:root { --fundo: #f4f4f2; --painel: #ffffff; --texto: #1d1d1b; --suave: #6b6b66; --minha: #dcf3e4; --deles: #ffffff; --linha: #e2e2dd; --alerta: #b3261e; }
@media (prefers-color-scheme: dark) {
  :root { --fundo: #161615; --painel: #1f1f1d; --texto: #ecece8; --suave: #9a9a93; --minha: #1f3a2a; --deles: #2a2a27; --linha: #33332f; --alerta: #ff8a80; }
}
* { box-sizing: border-box; }
/* Coluna: aviso de caixa fora (quando houver) em cima, #app ocupa o resto da tela. */
body { margin: 0; font: 15px/1.4 system-ui, sans-serif; background: var(--fundo); color: var(--texto); display: flex; flex-direction: column; height: 100vh; box-sizing: border-box; }
#app { display: grid; grid-template-columns: minmax(260px, 360px) 1fr; flex: 1; min-height: 0; }
#coluna-lista { border-right: 1px solid var(--linha); overflow-y: auto; background: var(--painel); }
.abas { display: flex; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--linha); }
.abas a { color: var(--suave); text-decoration: none; }
.abas a.ativa { color: var(--texto); font-weight: 600; }
.lista { list-style: none; margin: 0; padding: 0; }
.lista a { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; padding: 10px 16px; color: inherit; text-decoration: none; border-bottom: 1px solid var(--linha); }
.lista .nome { font-weight: 500; }
.lista .caixa, .lista .hora { color: var(--suave); font-size: 12px; }
.lista .previa { color: var(--suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nao-lida .nome { font-weight: 700; }
.contador { background: #1f8a4c; color: #fff; border-radius: 10px; padding: 0 7px; font-size: 12px; justify-self: end; }
#conversa { display: flex; flex-direction: column; min-height: 0; }
.conversa { display: flex; flex-direction: column; height: 100%; }
.topo { display: flex; align-items: baseline; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--linha); background: var(--painel); }
.topo h1 { font-size: 17px; margin: 0; }
.mensagens { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 6px; }
.msg { max-width: 70%; padding: 6px 10px; border-radius: 8px; background: var(--deles); overflow-wrap: anywhere; }
/* Só o texto da mensagem guarda quebras e espaços; na bolha inteira, o recuo do template viraria espaço em branco. */
.msg .texto, .msg blockquote { white-space: pre-wrap; }
.msg.minha { align-self: flex-end; background: var(--minha); }
.msg .autor { font-size: 12px; font-weight: 600; color: var(--suave); }
.msg blockquote { margin: 0 0 4px; padding: 2px 8px; border-left: 3px solid var(--linha); color: var(--suave); }
.msg .meta { font-size: 11px; color: var(--suave); text-align: right; }
.status-failed { color: var(--alerta); font-weight: 600; }
.vazio { color: var(--suave); padding: 24px; }
@media (max-width: 720px) { #app { grid-template-columns: 1fr; } #conversa:empty { display: none; } }
.resposta { display: flex; gap: 8px; padding: 10px 16px; border-top: 1px solid var(--linha); background: var(--painel); }
.resposta textarea { flex: 1; resize: vertical; font: inherit; padding: 8px; border: 1px solid var(--linha); border-radius: 6px; background: var(--fundo); color: var(--texto); }
.resposta button, .falha button { font: inherit; padding: 6px 14px; border: 0; border-radius: 6px; background: #1f8a4c; color: #fff; cursor: pointer; }
.falha { display: flex; gap: 8px; align-items: center; color: var(--alerta); font-size: 13px; margin-top: 4px; }
.anexo img { max-width: 320px; max-height: 320px; border-radius: 6px; display: block; }
.anexo img.figurinha { max-width: 140px; }
.anexo img.miniatura { filter: blur(1px); opacity: .8; }
.anexo video { max-width: 320px; }
.anexo button, .alternar { font: inherit; font-size: 13px; padding: 4px 10px; border: 1px solid var(--linha); border-radius: 6px; background: var(--fundo); color: var(--texto); cursor: pointer; }
.expirada, .erro-anexo { color: var(--suave); font-size: 13px; margin: 4px 0 0; }
.anexar { display: flex; gap: 8px; padding: 0 16px 10px; background: var(--painel); font-size: 13px; }
.anexar input[type=text] { flex: 1; font: inherit; padding: 4px 8px; border: 1px solid var(--linha); border-radius: 6px; background: var(--fundo); color: var(--texto); }
.anexar button, .gravar, .tocar, .velocidades button { font: inherit; font-size: 13px; padding: 4px 10px; border: 1px solid var(--linha); border-radius: 6px; background: var(--fundo); color: var(--texto); cursor: pointer; }
.player { position: fixed; left: 0; right: 0; bottom: 0; display: flex; gap: 12px; align-items: center; padding: 8px 16px; background: var(--painel); border-top: 1px solid var(--linha); }
.player audio { flex: 1; }
.aviso-caixa { background: var(--alerta); color: var(--fundo); padding: 8px 16px; font-weight: 600; }
.mudo { color: var(--suave); font-weight: 400; }
.abas .alternar { margin-left: auto; }
.abas .sair { margin: 0; }
.abas .sair .alternar { margin-left: 0; }
.login { max-width: 320px; margin: 15vh auto; display: flex; flex-direction: column; gap: 12px; padding: 0 16px; }
.login input, .login button { font: inherit; padding: 10px; border-radius: 6px; border: 1px solid var(--linha); background: var(--painel); color: var(--texto); }
.login button { background: #1f8a4c; color: #fff; border: 0; cursor: pointer; }
.erro-login { color: var(--alerta); margin: 0; }
/* display: flex acima venceria o atributo hidden: sem isto o player apareceria vazio desde a abertura. */
.player[hidden] { display: none; }
.player { height: 56px; }
.velocidades button.ativa { font-weight: 600; border-color: var(--texto); }
/* Com o player aberto, a coluna da conversa encolhe para o formulário de resposta não ficar atrás dele. */
body.tocando { padding-bottom: 56px; }