/* MESSAGES */
.messages-page { padding:24px 0 40px; }
.messages-layout { display:grid; grid-template-columns:320px 1fr; gap:0; border:1px solid var(--border); border-radius:var(--r-xl); overflow:hidden; background:var(--white); height:calc(100vh - var(--header-h) - 80px); min-height:500px; }

.conv-list { border-right:1px solid var(--border); display:flex; flex-direction:column; overflow:hidden; }
.conv-list__header { padding:16px 20px; border-bottom:1px solid var(--border); }
.conv-list__title { font-family:var(--font-display); font-size:16px; font-weight:700; }
.conv-list__search { padding:12px 16px; border-bottom:1px solid var(--border); }
.conv-list__search input { width:100%; padding:8px 12px 8px 34px; border:1.5px solid var(--gray-200); border-radius:var(--r-md); font-size:13px; outline:none; background:var(--surface); }
.conv-list__body { flex:1; overflow-y:auto; }

.conv-item { display:flex; align-items:center; gap:12px; padding:14px 16px; cursor:pointer; transition:background var(--t-fast); border-bottom:1px solid var(--border); position:relative; }
.conv-item:hover { background:var(--gray-50); }
.conv-item.active { background:var(--primary-50); }
.conv-item.active::before { content:''; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--primary); }
.conv-item__info { flex:1; min-width:0; }
.conv-item__top { display:flex; align-items:center; justify-content:space-between; margin-bottom:3px; }
.conv-item__name { font-size:14px; font-weight:600; color:var(--dark-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
.conv-item__time { font-size:11px; color:var(--gray-400); flex-shrink:0; }
.conv-item__listing { font-size:12px; color:var(--primary); font-weight:500; margin-bottom:3px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.conv-item__preview { font-size:13px; color:var(--gray-400); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.conv-item__unread { width:20px; height:20px; border-radius:50%; background:var(--primary); color:white; font-size:11px; font-weight:700; display:flex; align-items:center; justify-content:center; flex-shrink:0; }

.chat-area { display:flex; flex-direction:column; overflow:hidden; }
.chat-header { padding:14px 20px; border-bottom:1px solid var(--border); display:flex; align-items:center; gap:12px; }
.chat-header__info { flex:1; min-width:0; overflow:hidden; }
.chat-header__name { font-family:var(--font-display); font-size:15px; font-weight:700; line-height:1.2; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.chat-header__listing { font-size:12px; color:var(--primary); font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.chat-header__status { font-size:12px; color:var(--success); display:flex; align-items:center; gap:4px; }
.chat-header__status::before { content:''; width:6px; height:6px; border-radius:50%; background:var(--success); }

.chat-body { flex:1; overflow-y:auto; padding:20px; display:flex; flex-direction:column; gap:16px; }
.chat-date-sep { text-align:center; font-size:11px; font-weight:600; color:var(--gray-400); margin:8px 0; }

.msg { display:flex; gap:8px; max-width:75%; }
.msg--mine { margin-left:auto; flex-direction:row-reverse; }
.msg--other { margin-right:auto; }
.msg__bubble { padding:11px 15px; border-radius:18px; font-size:14px; line-height:1.55; word-break:break-word; }
.msg--other .msg__bubble { background:var(--gray-100); color:var(--dark-2); border-radius:4px 18px 18px 18px; }
.msg--mine .msg__bubble { background:var(--primary); color:var(--white); border-radius:18px 4px 18px 18px; }
.msg__meta { display:flex; align-items:center; gap:4px; font-size:11px; color:var(--gray-400); margin-top:4px; justify-content:flex-end; }
.msg--mine .msg__meta { justify-content:flex-end; }
.ticks { display:flex; gap:1px; }
.tick { width:12px; height:12px; color:var(--gray-300); }
.tick.read { color:var(--info); }

.chat-footer { padding:14px 16px; border-top:1px solid var(--border); display:flex; gap:10px; align-items:flex-end; }
.chat-input-wrap { flex:1; background:var(--surface); border:1.5px solid var(--border); border-radius:var(--r-xl); padding:10px 16px; display:flex; gap:10px; align-items:flex-end; transition:all var(--t-fast); }
.chat-input-wrap:focus-within { border-color:var(--primary); background:var(--white); }
.chat-input { flex:1; border:none; outline:none; background:transparent; font-size:14px; resize:none; max-height:120px; line-height:1.5; }
.chat-input::placeholder { color:var(--gray-400); }
.chat-send { width:40px; height:40px; border-radius:50%; background:var(--primary); color:white; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:all var(--t-fast); flex-shrink:0; border:none; }
.chat-send:hover { background:var(--primary-dark); transform:scale(1.05); }

.chat-empty { display:flex; flex-direction:column; align-items:center; justify-content:center; height:100%; color:var(--gray-400); gap:16px; }
.chat-empty svg { width:64px; height:64px; opacity:0.3; }
.chat-empty p { font-size:15px; }

/* ── Mobile Chat Back Button (hidden on desktop) ── */
.chat-back-btn {
  display: none; width: 36px; height: 36px; border-radius: var(--r-md);
  align-items: center; justify-content: center; flex-shrink: 0;
  color: var(--gray-600); cursor: pointer; transition: all var(--t-fast);
  background: none; border: none;
}
.chat-back-btn:hover { background: var(--surface); color: var(--dark-2); }

@media(max-width:768px){
  .messages-page { padding: 0; }
  .messages-page > .container { padding: 0; max-width: 100%; }

  .messages-layout {
    grid-template-columns: 1fr;
    height: calc(100vh - var(--header-h) - 64px - env(safe-area-inset-bottom, 0px));
    height: calc(100dvh - var(--header-h) - 64px - env(safe-area-inset-bottom, 0px));
    min-height: unset;
    border: none; border-radius: 0;
  }

  /* Default: show list, hide chat */
  .conv-list {
    height: 100%; border-right: none; border-bottom: none;
  }
  .chat-area { display: none; }

  /* When chat is open: hide list, show chat */
  .messages-layout.chat-open .conv-list { display: none; }
  .messages-layout.chat-open .chat-area {
    display: flex; height: 100%;
  }

  /* Hide beta badge on messages page to maximize space */
  .messages-page ~ .beta-badge-float { display: none; }

  /* Show back button on mobile */
  .chat-back-btn { display: flex; width: 40px; height: 40px; }

  /* Conv list — premium touch targets */
  .conv-item { min-height: 72px; padding: 14px 16px; gap: 12px; }
  .conv-item__name { font-size: 14.5px; }
  .conv-item__listing { font-size: 12.5px; margin-bottom: 2px; }
  .conv-item__preview { font-size: 13px; }
  .conv-item__unread { width: 22px; height: 22px; font-size: 11px; }

  /* Chat header — compact but clear */
  .chat-header { padding: 12px 16px; gap: 10px; }
  .chat-header__name { font-size: 14.5px; }
  .chat-header .btn { font-size: 11.5px; padding: 6px 10px; white-space: nowrap; flex-shrink: 0; }

  /* Chat body — smooth scroll */
  .chat-body { -webkit-overflow-scrolling: touch; }

  /* Message bubbles — handle long content */
  .msg__bubble { overflow-wrap: anywhere; }
  .msg { max-width: 80%; }

  /* Chat footer — safe for all devices */
  .chat-footer {
    padding: 12px 16px;
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  }
  .chat-input { font-size: 16px; } /* prevents iOS zoom on focus */
  .chat-send { width: 42px; height: 42px; }
}

@media(max-width:480px){
  .conv-list__header { padding: 14px 16px; }
  .conv-list__title { font-size: 15px; }
  .conv-item { padding: 12px 14px; gap: 10px; min-height: 66px; }
  .chat-body { padding: 14px; gap: 12px; }
  .chat-footer { padding: 10px 12px; padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }
  .chat-header { padding: 10px 12px; gap: 8px; }
  .chat-header .btn { font-size: 11px; padding: 5px 8px; }
  .msg { max-width: 85%; }
  .msg__bubble { padding: 9px 13px; font-size: 14px; }
  .chat-send { width: 38px; height: 38px; }
  .chat-empty svg { width: 48px; height: 48px; }
  .chat-empty p { font-size: 14px; }
  .chat-input-wrap { padding: 8px 12px; }
}

@media(max-width:360px){
  .conv-item { padding: 10px 12px; min-height: 60px; }
  .conv-item__name { font-size: 13px; }
  .conv-item__preview { font-size: 12px; }
  .chat-body { padding: 10px; }
  .msg__bubble { padding: 8px 11px; font-size: 13px; }
  .chat-header .btn { font-size: 10px; padding: 4px 7px; }
}