/* =====================================================
   YOUKUT — Página dedicada de Chat
   Desktop: sidebar de conversas à esquerda + thread centralizada à direita.
   Mobile: uma coluna por vez (lista OU thread, com botão de voltar).
===================================================== */

/* Alarga o container principal só quando a página de chat está ativa —
   o resto do app usa max-width:640px (feed centralizado), mas o chat
   de duas colunas precisa de mais espaço horizontal. Também zera o
   padding vertical grande do .main (pensado pra dar respiro/clearance
   do FAB de chat em outras páginas) — na página de chat ele só atrapalha
   o cálculo de altura e empurra a barra de mensagem pra fora da tela. */
.main.main-wide { max-width: 1100px; padding: 16px 0; }

.chat-page {
  display: flex;
  /* dvh = viewport "de verdade" no mobile, ignora a barra de endereço
     que aparece/some e bagunça o cálculo com vh puro */
  height: calc(100vh - 88px);
  height: calc(100dvh - 88px);
  min-height: 420px;
  max-height: 760px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}

/* ---------- Sidebar (lista de conversas) ---------- */
.chat-page-sidebar {
  width: 340px; flex-shrink: 0;
  display: flex; flex-direction: column; min-height: 0;
  border-right: 1px solid var(--border);
  background: var(--surface);
}
.chat-page-sidebar-header { padding: 18px 18px 12px; display: flex; align-items: center; gap: 10px; }
.chat-page-sidebar-header h2 { font-family: var(--font-display); font-size: 19px; margin: 0; }
.chat-page-exit-btn { display: none; }

.chat-page-search-wrap { position: relative; padding: 0 14px 12px; }
.chat-page-search-icon {
  position: absolute; left: 26px; top: 50%; transform: translateY(-50%);
  color: var(--text-muted); pointer-events: none;
}
#chat-page-search-input {
  width: 100%; padding: 9px 12px 9px 36px; border-radius: 999px;
  background: var(--surface-2); font-size: 13px;
}

.chat-page-list { flex: 1; overflow-y: auto; }
.chat-page-list-empty { padding: 30px 20px; font-size: 13px; text-align: center; }

.chat-page-row {
  display: flex; align-items: center; gap: 12px; padding: 12px 16px;
  cursor: pointer; transition: background .12s ease; border-left: 3px solid transparent;
  position: relative;
}
.chat-page-row:hover { background: var(--surface-2); }
.chat-page-row.active { background: var(--surface-2); border-left-color: var(--accent); }
.chat-page-row .avatar { flex-shrink: 0; }
.chat-page-row-info { flex: 1; min-width: 0; }
.chat-page-row-top { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; }
.chat-page-row-name { font-weight: 700; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-page-row-time { font-size: 11px; color: var(--text-muted); flex-shrink: 0; }
.chat-page-row-preview {
  font-size: 12.5px; color: var(--text-muted); margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.chat-page-row-preview.unread { color: var(--text); font-weight: 600; }
.chat-page-row-unread-dot {
  background: var(--accent); color: var(--accent-ink); font-size: 10.5px; font-weight: 700;
  min-width: 18px; height: 18px; border-radius: 999px; display: flex; align-items: center;
  justify-content: center; padding: 0 4px; flex-shrink: 0; margin-left: 6px;
}

/* ---------- Área principal ---------- */
.chat-page-main { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--bg); }

.chat-page-placeholder {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 40px; color: var(--text-muted);
}
.chat-page-placeholder-mark { color: var(--accent); font-size: 34px; }
.chat-page-placeholder h3 { font-family: var(--font-display); color: var(--text); margin: 6px 0 6px; font-size: 19px; }
.chat-page-placeholder p { font-size: 13.5px; max-width: 280px; margin: 0; line-height: 1.5; }

.chat-page-thread { flex: 1; display: flex; flex-direction: column; min-height: 0; }

.chat-page-thread-header {
  display: flex; align-items: center; gap: 12px; padding: 14px 18px;
  border-bottom: 1px solid var(--border); background: var(--surface); flex-shrink: 0;
}
.chat-page-back-btn { display: none; }
.chat-page-thread-meta { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.chat-page-thread-meta strong { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-page-thread-meta .muted { font-size: 12px; }

.chat-page-messages {
  flex: 1; min-height: 0; overflow-y: auto; padding: 22px 26px; display: flex; flex-direction: column; gap: 6px;
}

/* Reaproveita a maior parte do visual das bolhas de mensagem do widget
   flutuante (chat.css), só ajusta a largura pra área maior desta página */
.chat-page-messages .chat-msg-group { max-width: 60%; min-width: 0; }
.chat-page-messages .chat-msg-image,
.chat-page-messages .chat-msg-video { max-width: min(320px, 100%); max-height: 360px; width: auto; }

.chat-page-thread #chat-page-image-preview-wrap { margin: 0 18px 10px; max-width: 200px; }
.chat-page-thread #chat-page-image-preview-wrap.has-audio-preview { max-width: 300px; }
.chat-page-thread .chat-send-form { padding: 14px 18px; }

/* ---------- Responsivo: uma coluna por vez no mobile ---------- */
@media (max-width: 880px) {
  /* A página de chat vira um overlay de tela cheia, por cima de TUDO
     (inclusive do menu fixo do topo). Isso resolve de vez o conflito
     entre o cabeçalho fixo e o teclado virtual do celular — em vez de
     calcular "o espaço que sobra abaixo do menu", a página de chat
     simplesmente ocupa a tela inteira, sem ambiguidade nenhuma. */
  body.chat-page-active .topbar { display: none; }

  .main.main-wide { padding: 0; max-width: 100%; }

  .chat-page {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 150;
    height: 100vh;
    height: 100dvh;
    max-height: none;
    border-radius: 0;
    border: none;
  }

  .chat-page-exit-btn { display: inline-flex; }
  .chat-page-sidebar { width: 100%; }
  .chat-page-main { display: none; }

  /* O overlay ocupa a tela toda por baixo do notch/barra de status —
     sem isso, o cabeçalho ficava espremido lá em cima e a matemática de
     altura (100dvh) contava um espaço que na prática estava tampado. */
  .chat-page-sidebar-header { padding-top: calc(12px + var(--safe-top-forced, env(safe-area-inset-top))); }
  .chat-page-thread-header { padding-top: calc(12px + var(--safe-top-forced, env(safe-area-inset-top))); }

  /* E reserva o espaço do indicador de "home" lá embaixo, senão a barra
     de enviar mensagem fica meio escondida atrás dele */
  .chat-page-thread .chat-send-form { padding-bottom: calc(14px + env(safe-area-inset-bottom)); }

  /* Quando uma conversa está aberta no mobile, esconde a lista e mostra
     só a thread em tela cheia, com botão de voltar visível */
  .chat-page.thread-open .chat-page-sidebar { display: none; }
  .chat-page.thread-open .chat-page-main { display: flex; }
  .chat-page-back-btn { display: inline-flex; }

  .chat-page-messages .chat-msg-group { max-width: 78%; min-width: 0; }
  .chat-page-messages { overflow-x: hidden; }
  .chat-page-thread { overflow-x: hidden; }
  .chat-send-form { max-width: 100%; }
}

/* Reforço garantido, valor fixo, sem depender de env() nem de JS —
   mesma lógica aplicada na topbar e no widget de chat */
@media (display-mode: standalone) and (max-width: 880px) {
  .chat-page-sidebar-header { padding-top: 54px !important; }
  .chat-page-thread-header { padding-top: 54px !important; }
  .chat-page-thread .chat-send-form { padding-bottom: 26px !important; }
}