/* responsivo.css — Pontos de quebra: notebook baixo, tablet e celular.
   Parte de painel.css, dividido em 13/09/2026: um arquivo de 3.782 linhas
   não se navega. A ORDEM dos <link> no index.html importa (cascata). */

/* ---------- responsividade ----------
   1080px: detalhes somem (regra própria acima). 980px: trilho e lista compactos.
   720px: lista OU conversa (uma por vez). */

/* Voltar existe em QUALQUER largura: em tela estreita devolve a lista, em tela
   larga fecha a conversa e volta ao estado vazio (o mesmo que o logo faz). */
#chat-voltar {
  display: inline-flex;
  align-items: center;
  background: none;
  border: 0;
  color: var(--texto-2);
  padding: 4px 6px 4px 0;
  flex-shrink: 0;
  cursor: pointer;
}
#chat-voltar:hover { color: var(--texto); }

@media (max-height: 700px) {
  /* notebook pequeno/janela baixa: o trilho encolhe em vez de estourar */
  #trilho { padding: 8px 4px 6px; gap: 2px; overflow-y: auto; scrollbar-width: none; }
  #trilho::-webkit-scrollbar { display: none; }
  #trilho .logotipo { margin-bottom: 4px; }
  .tr-item { padding: 6px 2px 4px; }
}

@media (max-width: 980px) {
  #app { grid-template-columns: 52px minmax(200px, 260px) minmax(0, 1fr); gap: 8px; padding: 8px; }
  #trilho { padding: 10px 4px 8px; }
  #trilho .logotipo { width: 26px; height: 26px; }
  .tr-item { width: 44px; padding: 9px 2px; }
  .tr-item span, #toggle-online span { display: none; } /* só ícones, com title */
  #abas { margin: 8px 8px 6px; }
  #abas button { font-size: 10px; padding: 6px 1px; }
  #abas button svg { display: none; } /* só o rótulo: o ícone não cabe */
  #filtros, #filtro-periodo { padding-left: 8px; padding-right: 8px; }
  #relatorio { padding: 14px; }
  #chat-cabecalho { padding: 10px 12px; }
  #chat-mensagens { padding: 16px 14px; }
}

@media (max-width: 720px) {
  /* tela estreita (celular, janela lado a lado, PWA): lista OU conversa */
  #app { grid-template-columns: 52px minmax(0, 1fr); gap: 0; padding: 0; }
  #trilho, #lateral, #conversa, #banner-descanso { border-radius: 0; border: 0; }
  #conversa { display: none; }
  #app.vendo-chat #lateral { display: none; }
  #app.vendo-chat #conversa { display: flex; }
  .msg { max-width: 84%; }
  #alertas, #toasts { max-width: calc(100vw - 66px); }
  .toast { width: auto; }
  /* celular estreito: as ações do cabeçalho quebram linha em vez de cortar */
  #chat-cabecalho { flex-wrap: wrap; row-gap: 6px; }
  #chat-cabecalho .acoes { flex-wrap: wrap; max-width: 100%; }
  #chat-cabecalho select { max-width: 100%; }
  #chat-envio { padding: 10px; gap: 6px; }
  /* composer compacto: Nota e Enviar viram só ícone, senão o Enviar sai da tela */
  #modo-nota, #chat-envio button[type="submit"] { font-size: 0; gap: 0; }
  #chat-envio button[type="submit"] { padding: 9px 11px; }
  /* o teclado do celular já tem emoji: o botão aqui só roubaria largura do
     campo (medido em 360px: 85px com ele, 127px sem). O ":palavra" e as
     carinhas continuam funcionando. */
  #emoji-abrir { display: none; }
  #texto-caixa { min-width: 0; }
  #chat-cabecalho .acoes { gap: 5px; }
  #chat-cabecalho button, #chat-cabecalho select { padding: 6px 9px; font-size: 12px; }
}

body.tema-claro #chat-mensagens {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'><g fill='%230c0e12' fill-opacity='.02'><rect x='14.75' y='15' width='4.5' height='8' rx='2.25'/><rect x='21.75' y='11' width='4.5' height='16' rx='2.25'/><rect x='28.75' y='15' width='4.5' height='8' rx='2.25'/></g></svg>");
}

body:has(#banner-descanso:not(.oculto)) #alertas { top: 62px; }

/* anexo cujo arquivo se perdeu (ex.: upload anterior ao Postgres): aviso
   discreto no lugar do ícone quebrado do navegador */
.anexo-perdido {
  display: block;
  font-size: 12px;
  color: var(--texto-3);
  font-style: italic;
  padding: 4px 0;
}

/* Banner nos temas CLAROS: céu de lusco-fusco. Estrela branca e o feixe de luz
   só existem no escuro; no claro eles viram sujeira sobre fundo pastel. */
body.tema-claro .estrelas,
body.tema-claro .estrela-cadente { display: none; }
body.tema-claro #banner-descanso::after { opacity: .5; }
body.tema-claro .aurora { opacity: .55; }
body.tema-claro .nuvem { opacity: .85; }
body.tema-claro .nuvem ellipse { fill-opacity: .55; }