/* ============================================================================
   Pele L3 do redesign (trilha L): lista de conversas e janela da conversa.

   O que é: a linguagem visual do protótipo (valores copiados de css/componentes.css) aplicada
   sobre o DOM ATUAL do painel (#v-inbox: .col, .filters, #list > .conv, #center > .chat-head,
   #msgs > .msg, .composer), lendo os tokens pela ponte (css/ponte.css e css/piloto-ponte.css:
   --acento, --surf, --fg, --st-*, --mat-*, --dens, --dur-*...). Não usa as classes de
   componentes.css nem a classe .nvx-ui.

   Quando sai: esta folha é transitória. Quando o markup da lista e da conversa migrar para as
   classes de componentes.css (.item, .av, .chip, .msg, .composer...), este arquivo é apagado
   junto com o <link> do index.html e o JS que grava --stc e o <i class="st">.

   Por que seletores com id: as peles nvx-adaptive.css, nvx-apple.css, nvx-atendimento.css e as
   camadas de nvx-hig/*.css usam seletores como html[data-estilo="neuvox-hig"] .conv (0,2,1) e,
   no máximo, UM id (html[data-estilo="neuvox-hig"] #msgs .msg = 1,2,1). Um seletor ancorado em
   id (#list .conv = 1,1,0) vence os primeiros sem !important; onde a pele HIG usa id, esta folha
   usa dois (#center #msgs .msg = 2,1,0). Esta folha vem fora de @layer: vence as camadas
   nvx.ponte/componentes/telas e perde só para estilo inline e !important. Os !important das
   peles (nvx-hig/after-v2.css e after-v3.css) foram conferidos um a um: dois casam com
   propriedades definidas aqui, mas pedem o MESMO valor (.conv{animation:none!important},
   after-v2.css:252, e .conv .av{box-shadow:none!important}, after-v2.css:269), então nada aqui
   usa !important. Consequência: no tema HIG essas duas propriedades não são revertidas por esta folha.

   Exceções de propósito (comentadas onde aparecem):
   - o que o JS grava em estilo inline (Finalizar verde, #btn-nova display) não é tocado;
   - .chat-head.compacta (celular, <=560px) só muda cor/fundo/linha, nunca altura nem alvo de toque;
   - texto pequeno nunca usa --fg-3 nem a cor crua do estado (contraste abaixo de 4,5:1 medido):
     ver as variáveis --atd-* logo abaixo, que são o ÚNICO lugar para voltar ao valor do protótipo.
   ============================================================================ */

/* ---------- 0. Variáveis locais (texto legível nos dois modos) ----------
   Medido sobre --surf-2 / --surf (WCAG 2.x, mistura em oklab):
   --fg-3 = 3,7:1 no claro e 2,9:1 no escuro (reprova AA para 11px); --fg-2 = 5,8:1 / 5,4:1.
   A cor crua dos estados (--color-wait, --st-urg, --st-ia) como TEXTO fica entre 2,0:1 e 4,6:1;
   misturada com --fg (escura no claro, clara no escuro) passa de 4,5:1 nos dois modos.
   Marcadores (ponto, borda, fundo tingido) continuam com a cor crua, como no protótipo. */
#v-inbox {
  --atd-texto-2: var(--fg-2);
  --atd-texto-3: var(--fg-2); /* protótipo: var(--fg-3). Voltar a var(--fg-3) quando o token --color-subtle chegar a 4,5:1 */
  --atd-meta: color-mix(in oklab, var(--fg-2) 70%, var(--fg));
  --atd-wait-tx: color-mix(in oklab, var(--color-wait) 70%, var(--fg));
  --atd-warn-tx: color-mix(in oklab, var(--color-spectrum-coral) 50%, var(--fg));
  --atd-urg-tx: color-mix(in oklab, var(--st-urg) 70%, var(--fg));
  --atd-ia-tx: color-mix(in oklab, var(--st-ia) 50%, var(--fg));
  --atd-danger-tx: color-mix(in oklab, var(--vinho) 60%, var(--fg));
  --atd-hover: color-mix(in oklab, var(--acento) 12%, transparent);
}
/* Texto de "perigo" (menu "..."): no escuro 60% vinho dá 4,65:1 em repouso e 4,42:1 no hover (vinho a 10%);
   com 50% vinho + 50% --fg: 5,73:1 e 5,44:1. No claro 60% dá 9,78:1 e 8,27:1. */
:root[data-modo="escuro"] #v-inbox { --atd-danger-tx: color-mix(in oklab, var(--vinho) 50%, var(--fg)); }
/* Contraste alto (aparência do painel): os textos secundários sobem para --fg. */
html[data-contraste="alto"] #v-inbox {
  --atd-texto-2: var(--fg);
  --atd-texto-3: var(--fg);
  --atd-meta: var(--fg);
}
/* Eixo de densidade do painel (o protótipo chama data-dens; o painel grava data-densidade). */
html[data-densidade="compacta"] { --dens: .8; }

/* ---------- 1. Coluna da lista ---------- */
#v-inbox .col {
  position: relative;
  background: var(--surf-2);
  border-right: 0;
}
/* Linha divisória como sombra do protótipo (inset -1px 0 0 var(--line)), mas num pseudo-elemento:
   os cabeçalhos de grupo (sticky, fundo opaco) cobririam uma sombra inset do próprio .col. */
#v-inbox .col::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 1px;
  background: var(--line);
  pointer-events: none;
  z-index: 2;
}

/* ---------- 2. Busca e filtros ---------- */
#v-inbox .filters {
  padding: calc(14px * var(--dens)) 12px 8px;
  gap: 6px 4px;
  border-bottom: 0;
  background: transparent;
}
#v-inbox .filters #search {
  box-sizing: border-box;
  height: 36px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surf);
  color: var(--fg);
  font-size: 13px;
  box-shadow: inset 0 1px 0 var(--rim);
}
#v-inbox .filters #search::placeholder { color: var(--atd-texto-3); opacity: 1; }
#v-inbox .filters #search:focus { border-color: var(--acento); }
#v-inbox .filters .chip {
  box-sizing: border-box;
  height: 32px;
  min-height: 32px;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  box-shadow: none;
  color: var(--atd-texto-2);
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  transition: background var(--dur-2) var(--ease), color var(--dur-2) var(--ease);
}
#v-inbox .filters .chip:hover {
  background: color-mix(in oklab, var(--acento) 8%, transparent);
  color: var(--fg);
}
#v-inbox .filters .chip.active {
  background: var(--acento-soft);
  color: var(--acento-ink);
}
/* Menu "Mais filtros": o .menu do protótipo (.vidro). A visibilidade (.open) continua do index. */
/* right:0 em vez do left:0 do index: a 1366px o menu (190px) ancorado na esquerda do chip "Mais filtros"
   passava da .col (overflow:hidden) em 35 a 67px e cortava borda e sombra. */
#v-inbox .filters .filtro-menu {
  right: 0;
  left: auto;
  min-width: 190px;
  padding: 6px;
  border: 0;
  border-radius: 16px;
  background: var(--mat-regular);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(var(--sat));
  backdrop-filter: blur(var(--blur)) saturate(var(--sat));
  box-shadow: inset 0 1px 0 var(--rim), 0 0 0 1px var(--line), var(--sombra-2);
}
#v-inbox .filters .filtro-menu [role="menuitem"] {
  padding: 9px 12px;
  border-radius: 12px;
  color: var(--fg);
  font-size: 13px;
}
#v-inbox .filters .filtro-menu [role="menuitem"]:hover { background: var(--atd-hover); }
#v-inbox .filters .filtro-menu [role="menuitem"].sel { color: var(--acento-ink); font-weight: 700; }
/* Nova conversa (só aparece no celular; o display vem do estilo inline): botão primário. */
#v-inbox .filters #btn-nova {
  min-height: 44px;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  background: var(--acento-btn);
  color: var(--acento-btn-fg);
  box-shadow: none;
  font-size: 13px;
  font-weight: 600;
  transition: transform var(--dur-4) var(--spring-pop), background var(--dur-2) var(--ease);
}
#v-inbox .filters #btn-nova:hover {
  background: color-mix(in oklab, var(--acento-btn) 88%, #000);
  border-color: transparent;
  transform: none;
  box-shadow: none;
}
#v-inbox .filters #btn-nova:active { transform: scale(.95); }

/* ---------- 3. Aviso de espera ---------- */
#v-inbox #alerta-espera {
  margin: 6px 12px;
  padding: 8px 12px;
  border: 0;
  border-left: 3px solid var(--st-urg);
  border-radius: 14px;
  background: color-mix(in oklab, var(--st-urg) 10%, var(--surf));
  color: var(--fg);
  font-size: 12.5px;
  font-weight: 600;
}
#v-inbox #alerta-espera:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }

/* ---------- 4. Cabeçalhos de grupo ---------- */
#list .list-sec {
  padding: 14px 18px 6px;
  border-bottom: 0;
  background: var(--surf-2);
  color: var(--atd-texto-3);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
#list .list-sec.esperando { color: var(--atd-wait-tx); }

/* ---------- 5. Cartão da conversa (.item do protótipo) ---------- */
#list .conv {
  --anel-st: var(--surf-2); /* cor do fundo do cartão: o anel do ponto de estado se funde com ele */
  margin: 0 8px 2px;
  padding: calc(10px * var(--dens)) 12px;
  border: 0;
  border-radius: 14px;
  background: transparent;
  box-shadow: none;
  /* A barra lateral de SLA (borda esquerda + pulso nvxConvPulse*) sai: o estado vai no ponto do
     avatar (.st) e no selo .wait. Para voltar a piscar a barra, apagar esta linha e as de border/box-shadow
     (no tema HIG isso não basta: after-v2.css:252 mantém animation:none !important). */
  animation: none;
  transition: background var(--dur-2) var(--ease);
}
#list .conv:hover {
  --anel-st: color-mix(in oklab, var(--acento) 6%, var(--surf-2));
  background: color-mix(in oklab, var(--acento) 6%, transparent);
}
#list .conv:active { background: color-mix(in oklab, var(--acento) 10%, transparent); }
/* Pele Apple: o marcador de "precisa responder" (.needs::before) e o filete entre cartões (::after)
   repetem o ponto de estado do avatar e o respiro do cartão novo. */
html[data-estilo="apple"] #list .conv.needs::before,
html[data-estilo="apple"] #list .conv::after { content: none; }
#list .conv.sel {
  --anel-st: var(--acento-soft);
  background: var(--acento-soft);
}
/* Texto secundário sobre o fundo do selecionado (--acento-soft): no escuro --fg-2 dá 4,09:1 (reprova AA);
   --atd-meta (70% --fg-2 + 30% --fg) dá 5,45:1 no escuro e 6,55:1 no claro. */
#list .conv.sel .prev,
#list .conv.sel .time { color: var(--atd-meta); }
/* .late e .warn não ganham fundo: nada a declarar (o index nunca pinta o fundo; só a borda, removida acima). */
#list .conv .name {
  color: var(--fg);
  font-size: 14px;
  font-weight: 600;
}
#list .conv .time {
  color: var(--atd-texto-3);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
#list .conv .prev {
  color: var(--atd-texto-2);
  font-size: 12.5px;
}
/* Ponto de "não lida" ao lado do nome. A animação nvxDot continua a do index. */
#list .conv .name .dot {
  width: 8px;
  height: 8px;
  margin-right: 6px;
  background: var(--acento);
}

/* ---------- 6. Avatar e ponto de estado ---------- */
#list .av {
  position: relative;
  flex: 0 0 auto;
  width: calc(38px * var(--dens) + 8px);
  height: calc(38px * var(--dens) + 8px);
  border-radius: 50%;
  background: var(--acento-soft);
  box-shadow: none;
  color: var(--acento-ink);
  font-size: 12.5px;
  font-weight: 700;
  overflow: visible; /* o ponto .st sai 2px do círculo; a foto recebe o raio abaixo */
  /* Contexto de empilhamento local: o z-index do ponto (necessário porque _fetchAvatar faz appendChild da
     <img> depois do <i class="st">) não pode vazar e pintar por cima do .list-sec sticky (z-index 1). */
  isolation: isolate;
}
#list .av img { border-radius: 50%; }
/* O ponto é o único sinal visível do estado (o selo de texto .b-st sai da vista nas listas com grupos), então
   precisa de contorno para não depender só de cor (WCAG 1.4.11): a lavanda da Iris crua dá 2,5:1 sobre
   --surf-2. A borda mistura 55% do estado com --fg e mede 4,5:1 ou mais sobre --surf-2, o selecionado
   (--acento-soft) e o hover, nos dois modos. 12px com borda = 10px de preenchimento, como no protótipo. */
#list .av .st {
  position: absolute;
  right: -2px;
  bottom: -2px;
  z-index: 1;
  box-sizing: border-box;
  width: 12px;
  height: 12px;
  border: 1px solid color-mix(in oklab, var(--stc, var(--st-aguard)) 55%, var(--fg));
  border-radius: 50%;
  background: var(--stc, var(--st-aguard));
  box-shadow: 0 0 0 2px var(--anel-st, var(--surf-2));
}
/* Pílula de espera abaixo do avatar: só cor (forma e tamanho continuam os do index). */
#list .wait {
  background: color-mix(in oklab, var(--color-wait) 14%, var(--surf));
  color: var(--atd-wait-tx);
}
#list .wait.warn {
  background: color-mix(in oklab, var(--color-spectrum-coral) 16%, var(--surf));
  color: var(--atd-warn-tx);
}
#list .wait.late {
  background: color-mix(in oklab, var(--st-urg) 14%, var(--surf));
  color: var(--atd-urg-tx);
}
#list .wait.neutro {
  background: color-mix(in oklab, var(--fg) 8%, var(--surf));
  color: var(--atd-texto-2);
}

/* ---------- 7. Selos (badges) ---------- */
#list .badges .badge {
  padding: 1px 7px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surf);
  color: var(--atd-texto-2);
  font-size: 10.5px;
  font-weight: 600;
}
#list .badges .b-urg {
  border-color: color-mix(in oklab, var(--st-urg) 40%, var(--surf));
  color: var(--atd-urg-tx);
}
/* Risco: fundo fixo e texto branco (contraste); o --st-urg aqui seria rosa claro demais no escuro. */
#list .badges .b-risco {
  border-color: #B42318;
  background: #B42318;
  color: #fff;
  font-weight: 700;
}
#list .badges .b-ia {
  border-color: color-mix(in oklab, var(--st-ia) 55%, var(--surf));
  color: var(--atd-ia-tx);
}
/* Tarefa vencida/próxima: continuam vermelhos sólidos (e a vencida continua pulsando, animação do index). */
#list .badges .b-tarefa-vencida,
#list .badges .b-tarefa-proxima {
  border-color: transparent;
  background: var(--red, #dc2626);
  color: var(--on-accent, #fff); /* o adaptive escuro troca o texto por --on-accent; #fff fixo derrubaria esse conserto */
  font-weight: 800;
}
/* Texto do estado ("Novo", "Em atendimento"...): redundante com o cabeçalho do grupo e com o ponto
   colorido do avatar (o title do ponto carrega o mesmo texto). Sai da vista, mas o DOM mantém o
   badge para os testes e para leitor de tela (técnica sr-only em vez de display:none: o ponto é
   aria-hidden, então esconder o badge do leitor de tela tiraria o estado de quem não enxerga).
   Só vale quando a lista TEM cabeçalhos de grupo (filtro "Abertas": "Aguardando resposta"/"Em aberto").
   Nos demais filtros não há grupo, o ponto ficaria sozinho como sinal só de cor (WCAG 1.4.1) e o selo
   de texto volta ao normal (regra logo abaixo). */
#list .badges .b-st {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
#list:not(:has(.list-sec)) .badges .b-st {
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  padding: 1px 7px;
  border: 1px solid var(--line);
  overflow: hidden; /* o .badge do index trunca com reticências */
  clip: auto;
}

/* ---------- 8. "Atender agora" ---------- */
#list .atender {
  margin-top: 6px;
  padding: 6px 12px;
  border: 0;
  border-radius: 999px;
  background: var(--acento-btn);
  color: var(--acento-btn-fg);
  font-size: 12px;
  font-weight: 600;
  transition: transform var(--dur-4) var(--spring-pop), background var(--dur-2) var(--ease);
}
#list .atender:hover { background: color-mix(in oklab, var(--acento-btn) 88%, #000); }
#list .atender:active { transform: scale(.95); }

/* ---------- 9. Centro ---------- */
#center { background: var(--bg); }
#center .empty {
  color: var(--atd-texto-3);
  font-family: var(--font-head);
  font-size: 20px;
}

/* ---------- 10. Cabeçalho da conversa ---------- */
/* Sólido, sem backdrop-filter, position nem z-index: nada rola por baixo do cabeçalho (o vidro não
   amostraria nada) e o backdrop-filter o transformaria em contexto de empilhamento no nível do
   #msgs-wrap, deixando o menu "..." (z-index 15) por baixo de .scroll-bottom-btn (z 20), .msg-acts (z 12)
   e .v12-menu (z 14) do HIG. */
#center .chat-head {
  border-bottom: 0;
  background: var(--surf);
  box-shadow: inset 0 -1px 0 var(--line);
  color: var(--fg);
}
/* Medidas só no desktop: .compacta (celular) tem altura de 56px e alvos de 44px próprios do index. */
#center .chat-head:not(.compacta) {
  min-height: 64px;
  padding: 10px 18px;
}
/* Quebra de linha em qualquer largura (o index força nowrap acima de 900px): o HIG acrescenta busca e
   "Foco" à barra e, a 1366px, o "Finalizar" saía do centro. Os botões já têm flex-shrink:0, então ao
   faltar espaço eles descem para a linha de baixo em vez de sair cortados. O nome (.head-id) segue
   cedendo primeiro: base de 120px, depois a barra quebra. .compacta (celular) continua em uma linha. */
#center .chat-head:not(.compacta) { flex-wrap: wrap; }
#center .chat-head:not(.compacta) .head-id { flex: 1 1 120px; }
/* Não há container nomeado no painel; o centro tem menos de 1100px quando a janela tem até ~1500px. */
@media (max-width: 1500px) {
  #center .chat-head:not(.compacta) {
    gap: 6px;
    padding-left: 12px;
    padding-right: 12px;
  }
}
#center .chat-head h2 { color: var(--fg); }
#center .chat-head:not(.compacta) h2 {
  font-size: 15px;
  font-weight: 600;
}
#center .chat-head .sub {
  color: var(--atd-texto-2);
  font-size: 12px;
}
#center .chat-head .av {
  background: var(--acento-soft);
  color: var(--acento-ink);
}
#center .chat-head .badge {
  padding: 1px 7px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surf);
  color: var(--atd-texto-2);
  font-size: 10.5px;
  font-weight: 600;
}
#center .chat-head > .btn,
#center .chat-head > select.btn,
#center .chat-head .more-wrap > .btn {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surf);
  color: var(--fg);
}
#center .chat-head:not(.compacta) > .btn,
#center .chat-head:not(.compacta) > select.btn,
#center .chat-head:not(.compacta) .more-wrap > .btn {
  height: 34px;
  min-height: 34px;
}
#center .chat-head > .btn:hover,
#center .chat-head > select.btn:hover,
#center .chat-head .more-wrap > .btn:hover {
  border-color: var(--line);
  background: var(--surf-2);
}
/* "Detalhes" aberto (.btn.details-on, index.html): sem esta regra o (1,2,0) acima apagaria o estado. */
#center .chat-head > .btn.details-on,
#center .chat-head > .btn.details-on:hover {
  border-color: var(--acento);
  background: var(--acento-soft);
  color: var(--acento-ink);
}
/* Quando a barra quebra (HIG a 1366px), "Finalizar"/"Reabrir" fica sozinho na 2ª linha: vai para a
   direita. Em uma linha o .head-id (flex:1) consome a sobra e a margem automática vale 0: nada muda. */
#center .chat-head:not(.compacta) > :is([title="Finalizar atendimento"], [title="Reabrir atendimento"]) { margin-left: auto; }
/* Assumir: o mesmo botão primário do "Atender agora". */
#center .chat-head .btn.primary {
  border: 0;
  background: var(--acento-btn);
  color: var(--acento-btn-fg);
  box-shadow: none;
  transition: transform var(--dur-4) var(--spring-pop), background var(--dur-2) var(--ease);
}
#center .chat-head .btn.primary:hover {
  background: color-mix(in oklab, var(--acento-btn) 88%, #000);
  transform: none;
  box-shadow: none;
}
#center .chat-head .btn.primary:active { transform: scale(.95); }
/* Grupo "IA" (etiqueta + Sugerir/Resumo/Ligar): cápsula; a etiqueta vira o chip lavanda da Iris. */
#center .chat-head .ia-actions {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surf);
}
#center .chat-head .ia-actions-tag {
  align-self: center;
  height: 28px;
  margin-left: 2px;
  padding: 0 10px;
  border-radius: 999px;
  background: color-mix(in oklab, var(--st-ia) 14%, var(--surf));
  color: var(--atd-ia-tx);
  font-size: 11px;
  font-weight: 700;
}
/* :not(.ia-on): o botão "IA ligada" mantém o azul de informação do index. */
#center .chat-head .ia-actions button:not(.ia-on) {
  border-left-color: var(--line);
  background: var(--surf);
  color: var(--fg);
}
#center .chat-head .ia-actions button:not(.ia-on):hover { background: var(--surf-2); }
#center .chat-head:not(.compacta) #more-btn {
  width: 34px;
  padding: 0;
  border-radius: 50%;
  justify-content: center;
}
#center .chat-head #more-btn[aria-expanded="true"] {
  border-color: var(--acento);
  background: var(--acento-soft);
}
/* Menu "...": o .menu do protótipo, mas sólido (--surf): sem backdrop-filter, que dentro do cabeçalho não
   amostra as mensagens e com fundo semitransparente deixaria o texto de baixo vazar. A visibilidade
   (.open) continua do index. */
#center .chat-head .more-menu {
  padding: 6px;
  border: 0;
  border-radius: 16px;
  background: var(--surf);
  box-shadow: inset 0 1px 0 var(--rim), 0 0 0 1px var(--line), var(--sombra-2);
}
#center .chat-head .more-menu button {
  border-radius: 12px;
}
#center .chat-head .more-menu button:not(.mi-ok):not(.mi-danger) { color: var(--fg); }
#center .chat-head .more-menu button:hover { background: var(--atd-hover); }
/* Perigo em vinho do protótipo, misturado com --fg para o texto passar de 4,5:1 também no escuro. */
#center .chat-head .more-menu .mi-danger { color: var(--atd-danger-tx); }
#center .chat-head .more-menu .mi-danger:hover { background: color-mix(in oklab, var(--vinho) 10%, transparent); }

/* ---------- 11. Mensagens ---------- */
#center #msgs {
  padding: 16px 24px;
  gap: calc(8px * var(--dens));
}
#center #msgs .msg {
  max-width: 64%;
  padding: calc(10px * var(--dens)) 14px;
  border-radius: 18px;
  font-size: 14px;
  line-height: 1.45;
}
/* :not(.v9-current): o HIG põe um halo (box-shadow) na ocorrência atual da busca na conversa
   (after-v9.css:74-77); a sombra do balão (2,1,0) o apagaria. */
#center #msgs .msg:not(.v9-current) { box-shadow: var(--sombra-1); }
#center #msgs .msg.msg-highlight { outline: 2px solid var(--acento); outline-offset: 2px; }
/* Cor do texto explícita: a pele HIG pinta o balão enviado de verde-escuro e põe texto branco em
   .m-out, .msg-body e .cargo, e a pele Apple faz o mesmo em .m-out. Com o fundo claro do protótipo
   o texto sumiria. */
#center #msgs .msg,
#center #msgs .msg-body { color: var(--fg); }
#center #msgs .m-revoked .msg-body { color: var(--atd-meta); } /* apagada: o index também esmaece e risca */
#center #msgs .sender .cargo { color: var(--atd-meta); }
#center #msgs .m-in {
  border: 0;
  border-radius: 18px 18px 18px 6px;
  background: var(--surf);
}
#center #msgs .m-out {
  border: 1px solid var(--mine-line);
  border-radius: 18px 18px 6px 18px;
  background: var(--mine);
}
#center #msgs .m-ai {
  border: 1px solid color-mix(in oklab, var(--st-ia) 30%, var(--surf));
  border-radius: 18px 18px 18px 6px;
  background: color-mix(in oklab, var(--st-ia) 12%, var(--surf));
}
/* O texto "resposta da IA" (content) continua o do index; aqui só a cor do rótulo. */
#center #msgs .m-ai:before { color: var(--atd-ia-tx); }
#center #msgs .m-sys {
  border: 0;
  background: var(--surf-2);
}
/* Nota interna, falha e envio não confirmado: mantêm a borda e a cor próprias do index, só ganham o raio de mensagem enviada. */
#center #msgs :is(.m-note, .m-fail, .m-unknown) { border-radius: 18px 18px 6px 18px; }
#center #msgs .sender {
  color: var(--atd-meta);
  font-size: 11px;
  font-weight: 700;
}
#center #msgs .m-in .sender { color: var(--acento-ink); }
#center #msgs .m-ai .sender { color: var(--atd-ia-tx); }
#center #msgs .m-note .sender { color: var(--amber); }
#center #msgs .meta {
  color: var(--atd-meta);
  font-size: 10.5px;
  font-variant-numeric: tabular-nums;
}
#center #msgs .quoted {
  border-left: 3px solid var(--acento);
  border-radius: 8px;
  background: color-mix(in oklab, var(--acento) 6%, transparent);
  color: var(--atd-meta);
}
#center #msgs .msg-act { border-radius: 999px; }
#center #msgs .msg-act:hover { background: var(--atd-hover); }
#center #msgs .msg-act-danger:hover {
  background: color-mix(in oklab, var(--st-urg) 12%, transparent);
  color: var(--atd-urg-tx);
}
/* Separador de dia ("Hoje"): o .dia do protótipo (pílula centrada). Sem sticky: o separador é um
   irmão solto de cada mensagem, e vários sticky se empilhariam no topo. */
#center #msgs .msg-dia {
  display: flex;
  justify-content: center;
  margin: 8px 0;
}
#center #msgs .msg-dia-rot {
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--mat-regular);
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--atd-texto-3);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* ---------- 12. Compositor (pílula flutuante) ---------- */
/* Sólido (--surf) e sem backdrop-filter: o compositor fica abaixo do #msgs-wrap no fluxo, o vidro não
   amostraria nada, e o filtro o tornaria contexto de empilhamento (e bloco de contenção do .emoji-pop,
   que é position:fixed no celular): .scroll-bottom-btn (z 20) passaria por cima do .copiloto-balloon
   (z 60), do #revisor-pop e do #mais-pop. */
#center .composer {
  margin: 0 16px 16px;
  padding: 8px 10px 8px 12px;
  border: 0;
  border-radius: 24px;
  background: var(--surf);
  box-shadow: inset 0 1px 0 var(--rim), 0 0 0 1px var(--line), var(--sombra-2);
}
#center .composer.drag-over { background: var(--acento-soft); }
/* Campo de texto: transparente e sem borda visível. A borda de 1px continua (transparente) e o
   padding não muda: o .draft-backdrop do corretor gramatical (index.html: padding 9px 12px, borda
   1px transparente, mesma fonte) precisa continuar alinhado ao texto do #draft. NÃO definir
   box-shadow aqui: o #draft.autocorrigido usa box-shadow como aviso de correção. */
#center .composer .draft-wrap {
  border-radius: 18px;
  background: transparent;
}
#center .composer #draft {
  border: 1px solid transparent;
  border-radius: 18px;
  background: transparent;
  color: var(--fg);
}
#center .composer #draft::placeholder { color: var(--atd-texto-3); }
#center .composer #draft:focus:not(.autocorrigido) { box-shadow: none; }
#center .composer .reply-bar {
  border-left-color: var(--acento);
  border-radius: 12px;
  background: var(--acento-soft);
}
/* Botões redondos de 36px. Sem min-width/min-height: no celular o index sobe para 44px e isso fica.
   #btn-plus.rec (gravando) e #btn-plus.nota-on (nota interna) mantêm as cores próprias do index. */
#center .composer #btn-emoji,
#center .composer #btn-copiloto,
#center .composer #btn-plus {
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 50%;
  justify-content: center;
}
#center .composer #btn-emoji,
#center .composer #btn-copiloto,
#center .composer #btn-plus:not(.rec):not(.nota-on) {
  border: 0;
  background: transparent;
  box-shadow: none;
  color: var(--atd-texto-2);
}
#center .composer #btn-emoji:hover,
#center .composer #btn-copiloto:hover,
#center .composer #btn-plus:not(.rec):not(.nota-on):hover { background: var(--atd-hover); }
#center .composer #revisor-chip {
  height: 36px;
  padding: 0 12px;
  border: 1px solid color-mix(in oklab, var(--acento) 50%, transparent);
  border-radius: 999px;
  background: transparent;
  color: var(--acento-ink);
}
#center .composer #revisor-chip:hover { background: var(--atd-hover); }
/* Enviar: pílula primária. */
#center .composer > .btn.primary {
  height: 38px;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  background: var(--acento-btn);
  box-shadow: none;
  color: var(--acento-btn-fg);
  font-size: 13px;
  font-weight: 600;
  transition: transform var(--dur-4) var(--spring-pop), background var(--dur-2) var(--ease);
}
#center .composer > .btn.primary:hover {
  background: color-mix(in oklab, var(--acento-btn) 88%, #000);
  transform: none;
  box-shadow: none;
}
#center .composer > .btn.primary:active { transform: scale(.95); }

/* ---------- 13. Foco visível ---------- */
#list .conv:focus-visible,
#center .btn:focus-visible,
#center #draft:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 2px;
}
#center .btn:focus-visible { box-shadow: none; }
#v-inbox .filters #search:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }

/* ---------- 14. Eixos de aparência ---------- */
/* Transparência reduzida (aparência do painel), render sem GPU e preferência do sistema: o único vidro que
   sobrou (menu "Mais filtros", que flutua sobre a lista) vira superfície sólida. Cabeçalho, menu "..." e
   compositor já são sólidos em qualquer modo. O seletor repete a âncora de id de propósito. */
html[data-transparencia="reduzida"] #v-inbox .filters .filtro-menu,
html[data-render="software"] #v-inbox .filters .filtro-menu {
  background: var(--surf);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
@media (prefers-reduced-transparency: reduce) {
  #v-inbox .filters .filtro-menu {
    background: var(--surf);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}
/* Render sem GPU (data-render="software", o modo existe para CPU sem GPU): sem sombra difusa nos balões, no
   cartão selecionado e no "Atender agora". O anel do contraste alto vem logo depois e continua valendo. */
html[data-render="software"] #center #msgs .msg:not(.v9-current),
html[data-render="software"] #list .conv.sel,
html[data-render="software"] #list .atender { box-shadow: none; }
/* Contraste alto: as peles põem um anel no cartão selecionado e borda nos balões (nvx-adaptive.css:336-337,
   nvx-apple.css:95, nvx-hig after.css:272, after-v2.css:496, after-v4.css:324) e as regras acima os
   apagam (box-shadow:none do cartão, border:0 do .m-in, bordas do .m-out/.m-ai). Aqui voltam. */
html[data-contraste="alto"] #list .conv.sel { box-shadow: inset 0 0 0 1.5px var(--fg); }
html[data-contraste="alto"] #center #msgs :is(.m-in, .m-out, .m-ai) { border: 1px solid var(--fg-2); }
/* Movimento reduzido: a aparência do painel (data-movimento) e a preferência do sistema ("Como o sistema" é
   o padrão) zeram transição e o efeito de pressionar. Os dois blocos são o mesmo. */
html[data-movimento="reduzido"] #list .conv,
html[data-movimento="reduzido"] #list .atender,
html[data-movimento="reduzido"] #center .chat-head .btn.primary,
html[data-movimento="reduzido"] #center .composer > .btn.primary,
html[data-movimento="reduzido"] #v-inbox .filters .chip,
html[data-movimento="reduzido"] #v-inbox .filters #btn-nova {
  transition: none;
}
html[data-movimento="reduzido"] #list .atender:active,
html[data-movimento="reduzido"] #center .chat-head .btn.primary:active,
html[data-movimento="reduzido"] #center .composer > .btn.primary:active,
html[data-movimento="reduzido"] #v-inbox .filters #btn-nova:active {
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  #list .conv,
  #list .atender,
  #center .chat-head .btn.primary,
  #center .composer > .btn.primary,
  #v-inbox .filters .chip,
  #v-inbox .filters #btn-nova {
    transition: none;
  }
  #list .atender:active,
  #center .chat-head .btn.primary:active,
  #center .composer > .btn.primary:active,
  #v-inbox .filters #btn-nova:active {
    transform: none;
  }
}

/* ---------- 15. Celular (<=1000px: mensagens; <=560px: o mesmo corte do .chat-head.compacta) ---------- */
@media (max-width: 1000px) {
  #center #msgs .msg { max-width: 86%; } /* o index já usava 86% nesta faixa */
}
@media (max-width: 560px) {
  #list .conv { margin: 0 4px 2px; }
  #list .atender { padding: 8px 14px; } /* o index sobe para 44px de altura e 8px 14px aqui */
  #center #msgs { padding: 12px; }
  #center .composer { margin: 0 8px 8px; }
}