/* ============================================================================
   C3D Design System — paleta do login universal (login.3cvd.com.br), a mesma
   do NIC, do NAE e do Relacionamento: navy #0c111d + dourado quente #d1a24a +
   creme #f5f1e8, fontes do sistema (sem webfont). Light é o padrão; dark
   acompanha o SO ou [data-theme="dark"].

   O visualizador de conversas nasceu com as cores do WhatsApp (verde, bege);
   aqui ele usa os tokens do ecossistema para funcionar também no escuro. As
   únicas cores fixas são as dos números (cada um escolhe a sua no cadastro) e
   o azul do "lido", que é a convenção que todo mundo já lê no celular.
   ============================================================================ */
:root{
  color-scheme:light dark;
  --ground:hsl(40 30% 96%); --surface:hsl(0 0% 100%); --surface-2:hsl(40 18% 91%); --surface-3:hsl(40 20% 90%);
  --border:hsl(40 14% 84%); --border-strong:hsl(40 14% 79%);
  --text:hsl(222 30% 11%); --text-2:hsl(222 12% 38%); --text-3:hsl(222 10% 42%);
  --accent:hsl(38 54% 35%); --accent-ink:hsl(0 0% 100%); --accent-soft:hsl(38 54% 35% / .12);
  --ok:hsl(153 55% 28%); --warn:hsl(30 92% 34%); --crit:hsl(0 70% 45%);
  --ok-soft:hsl(153 55% 28% / .12); --warn-soft:hsl(30 92% 34% / .12); --crit-soft:hsl(0 70% 45% / .12);
  --shadow-1:0 1px 2px hsl(222 40% 6% / .05), 0 1px 3px hsl(222 40% 6% / .07);
  --shadow-2:0 4px 20px -8px hsl(222 40% 6% / .16);
  --font-sans:-apple-system,BlinkMacSystemFont,system-ui,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  --font-mono:ui-monospace,'SF Mono','SFMono-Regular',Menlo,Consolas,monospace;
  --rail:hsl(222 34% 11%);
  --bolha-out:color-mix(in srgb, var(--accent) 14%, var(--surface));
  --lido:#3b9fd6;
  /* Nomes que o conversas.js usa em estilo inline. */
  --muted:var(--text-3); --err:var(--crit);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:hsl(222 34% 8%); --surface:hsl(222 34% 13%); --surface-2:hsl(222 28% 15%); --surface-3:hsl(221 30% 17%);
    --border:hsl(221 29% 20%); --border-strong:hsl(221 25% 24%);
    --text:hsl(40 33% 94%); --text-2:hsl(220 14% 62%); --text-3:hsl(220 13% 56%);
    --accent:hsl(39 59% 55%); --accent-ink:hsl(222 40% 10%); --accent-soft:hsl(39 59% 55% / .16);
    --ok:hsl(153 55% 50%); --warn:hsl(40 90% 60%); --crit:hsl(0 84% 68%);
    --ok-soft:hsl(153 55% 50% / .14); --warn-soft:hsl(40 90% 60% / .14); --crit-soft:hsl(0 84% 68% / .14);
    --shadow-1:0 1px 2px hsl(222 45% 3% / .5);
    --shadow-2:0 8px 28px -10px hsl(222 45% 3% / .7);
    --rail:hsl(222 38% 6%);
    --bolha-out:color-mix(in srgb, var(--accent) 22%, var(--surface));
    --lido:#53bdeb;
  }
}
:root[data-theme="dark"]{
  --ground:hsl(222 34% 8%); --surface:hsl(222 34% 13%); --surface-2:hsl(222 28% 15%); --surface-3:hsl(221 30% 17%);
  --border:hsl(221 29% 20%); --border-strong:hsl(221 25% 24%);
  --text:hsl(40 33% 94%); --text-2:hsl(220 14% 62%); --text-3:hsl(220 13% 56%);
  --accent:hsl(39 59% 55%); --accent-ink:hsl(222 40% 10%); --accent-soft:hsl(39 59% 55% / .16);
  --ok:hsl(153 55% 50%); --warn:hsl(40 90% 60%); --crit:hsl(0 84% 68%);
  --ok-soft:hsl(153 55% 50% / .14); --warn-soft:hsl(40 90% 60% / .14); --crit-soft:hsl(0 84% 68% / .14);
  --shadow-1:0 1px 2px hsl(222 45% 3% / .5);
  --shadow-2:0 8px 28px -10px hsl(222 45% 3% / .7);
  --rail:hsl(222 38% 6%);
  --bolha-out:color-mix(in srgb, var(--accent) 22%, var(--surface));
  --lido:#53bdeb;
}
*{box-sizing:border-box}
/* Qualquer classe com display: próprio vence o display:none do atributo
   hidden. Sem esta linha, esconder é só intenção. */
[hidden]{display:none!important}
html,body{height:100%}
body{
  margin:0; background:var(--ground); color:var(--text);
  font-family:var(--font-sans); font-size:14px; line-height:1.45;
  letter-spacing:-.011em; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  overflow:hidden;
}
button{font:inherit;color:inherit;cursor:pointer}
a{color:var(--accent)}
:focus-visible{outline:none;box-shadow:0 0 0 3px hsl(38 54% 35% / .3)}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ─── casca: topbar do ecossistema + área do sistema ─── */
#app{display:flex;flex-direction:column;height:100vh;height:100dvh}
.topbar{
  flex:none; z-index:20;
  background:color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--border);
}
.topbar-in{display:flex;align-items:center;gap:10px;padding:9px 20px;flex-wrap:wrap}
.brand{display:flex;align-items:baseline;gap:10px;min-width:0}
.brand-mark{
  font-family:var(--font-mono); font-weight:600; font-size:15px; letter-spacing:.06em;
  color:var(--accent-ink); background:var(--accent); padding:3px 8px; border-radius:5px;
}
.brand-sub{color:var(--text-2);font-size:12.5px;white-space:nowrap}
.spacer{flex:1}
.sectors{display:flex;gap:2px;align-items:center;flex-wrap:wrap}
.setor{
  display:inline-flex;align-items:center;gap:6px;text-decoration:none;
  color:var(--text-2);font-size:12.5px;padding:5px 9px;border-radius:6px;
  border:1px solid transparent;white-space:nowrap;background:none;
}
.setor:hover{background:var(--surface-2);color:var(--text)}
.setor.ativo{background:var(--accent-soft);color:var(--accent);border-color:color-mix(in srgb,var(--accent) 30%,transparent)}
.whoami{display:flex;align-items:center;gap:8px;min-width:0}
.whoami-rot{font-family:var(--font-mono);font-size:8.5px;letter-spacing:.16em;color:var(--text-3);text-transform:uppercase}
.whoami-nome{font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.eu-av{
  display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:24px;height:24px;border-radius:50%;background:var(--text-3);color:#fff;
  font-family:var(--font-mono);font-size:9.5px;font-weight:600;border:2px solid var(--surface);
}
.btn-ghost{
  border:1px solid var(--border); background:var(--surface); color:var(--text-2);
  padding:5px 11px; border-radius:6px; font-size:12.5px; text-decoration:none; white-space:nowrap;
}
.btn-ghost:hover{border-color:var(--border-strong);color:var(--text)}

.btn{
  background:var(--accent);color:var(--accent-ink);border:1px solid transparent;
  padding:7px 14px;border-radius:6px;font-size:13px;font-weight:500;white-space:nowrap;
}
.btn:hover{filter:brightness(1.08)}
.btn.sec{background:var(--surface);color:var(--text);border-color:var(--border)}
.btn.sec:hover{border-color:var(--border-strong);filter:none}
.btn.dan{background:var(--surface);color:var(--crit);border-color:color-mix(in srgb,var(--crit) 35%,transparent)}
.btn.sm{padding:4px 10px;font-size:12px}
.btn:disabled{opacity:.5;cursor:not-allowed}

/* Telas de passagem: carregando e sem acesso. */
.passagem{height:100vh;height:100dvh;display:flex;align-items:center;justify-content:center;padding:24px}
.passagem-card{
  max-width:420px;text-align:center;background:var(--surface);border:1px solid var(--border);
  border-radius:12px;padding:28px;box-shadow:var(--shadow-2)
}
.passagem-card h1{font-size:18px;margin:10px 0 6px}
.passagem-card p{color:var(--text-2);margin:0 0 16px}

/* ─── visualizador: números | conversas | conversa ─── */
.wa{flex:1;min-height:0;display:grid;grid-template-columns:84px 370px 1fr}
.rail{background:var(--rail);display:flex;flex-direction:column;align-items:center;padding:12px 0;gap:8px;overflow-y:auto}
.num{position:relative;width:76px;border:0;background:none;padding:4px 0;border-radius:10px;color:#fff;display:flex;flex-direction:column;align-items:center;gap:4px;flex:none}
.num .av{width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:16px;color:#fff;overflow:hidden;border:3px solid transparent;position:relative}
.num.on .av{border-color:hsl(39 59% 55%)}
.num small{font-size:10px;max-width:72px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;opacity:.85}
.num .dot{position:absolute;top:40px;right:14px;width:13px;height:13px;border-radius:50%;border:2px solid var(--rail);background:#9ca3af}
.dot.open{background:#22c55e}.dot.close,.dot.inexistente{background:#ef4444}.dot.connecting{background:#f59e0b}
.add{width:46px;height:46px;border-radius:50%;border:2px dashed rgba(255,255,255,.45);background:none;color:#fff;font-size:24px;flex:none;margin-top:4px}

.lista{background:var(--surface);border-right:1px solid var(--border);display:flex;flex-direction:column;min-width:0;min-height:0}
.lh{padding:12px 14px;background:var(--surface-2);border-bottom:1px solid var(--border)}
.lh .t{display:flex;align-items:center;gap:6px}
.lh b{font-size:15px}
.lh .sub{font-size:12px;color:var(--text-3)}
.busca{margin-top:10px}
.busca input{width:100%;padding:8px 12px;border:1px solid var(--border);border-radius:8px;background:var(--surface);color:var(--text);font:inherit}
.filtros{display:flex;gap:6px;margin-top:8px}
.fb{border:1px solid var(--border);background:var(--surface);padding:3px 12px;border-radius:999px;font-size:12px;color:var(--text-2)}
.fb.on{background:var(--accent-soft);color:var(--accent);border-color:color-mix(in srgb,var(--accent) 30%,transparent);font-weight:600}
.chats{flex:1;overflow-y:auto;min-height:0}
.chat{display:flex;gap:12px;padding:10px 14px;cursor:pointer;border-bottom:1px solid var(--surface-2);align-items:center}
.chat:hover{background:var(--surface-2)}.chat.on{background:var(--accent-soft)}
.pic{width:46px;height:46px;border-radius:50%;background:var(--surface-3);color:var(--text-2);display:flex;align-items:center;justify-content:center;font-weight:600;flex:none;overflow:hidden;position:relative}
.pic img,.av img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.ci{flex:1;min-width:0}
.ci .l1,.ci .l2{display:flex;gap:6px;align-items:center}
.ci .n{flex:1;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:15px}
.ci .h{font-size:11px;color:var(--text-3);flex:none}
.ci .p{flex:1;font-size:13px;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.badge{background:var(--accent);color:var(--accent-ink);border-radius:999px;font-size:11px;font-weight:700;min-width:20px;height:20px;padding:0 6px;display:flex;align-items:center;justify-content:center}
.chat.unread .h{color:var(--accent);font-weight:600}
.vazio{padding:40px 20px;text-align:center;color:var(--text-3)}

.conv{display:flex;flex-direction:column;min-width:0;min-height:0;background:var(--ground)}
.ch{display:flex;align-items:center;gap:12px;padding:10px 16px;background:var(--surface-2);border-bottom:1px solid var(--border);min-height:62px}
.ch .nm{font-weight:600;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ch .sb{font-size:12px;color:var(--text-3)}
.ch .grow{flex:1;min-width:0}
.voltar{display:none;border:0;background:none;font-size:22px;padding:0 6px 0 0;color:var(--text-3)}
.msgs{flex:1;overflow-y:auto;padding:16px 6%;display:flex;flex-direction:column;gap:3px;min-height:0}
.dia{align-self:center;background:var(--surface);color:var(--text-3);font-size:12px;padding:4px 12px;border-radius:8px;margin:10px 0;box-shadow:var(--shadow-1)}
.b{max-width:min(75%,560px);padding:6px 9px 4px;border-radius:8px;box-shadow:var(--shadow-1);word-wrap:break-word;overflow-wrap:anywhere}
.b.in{align-self:flex-start;background:var(--surface)}
.b.out{align-self:flex-end;background:var(--bolha-out)}
.b .autor{font-size:12px;font-weight:600;color:var(--accent);margin-bottom:2px}
.b .txt{white-space:pre-wrap}
.b .meta{font-size:11px;color:var(--text-3);text-align:right;margin-top:2px;display:flex;gap:4px;justify-content:flex-end;align-items:center}
.tk{font-size:12px;letter-spacing:-3px;padding-right:3px}.tk.lido{color:var(--lido)}
.b.erro{outline:1px solid var(--crit)}
.b.tmp{opacity:.75}
.midia{margin:-2px -5px 4px;min-width:220px}
.midia img{max-width:100%;max-height:340px;border-radius:6px;display:block;cursor:zoom-in}
.midia img.fig{max-width:150px;cursor:default}
.midia audio{width:280px;max-width:100%;display:block}
.midia video{max-width:100%;max-height:340px;border-radius:6px;display:block}
.mbtn{display:flex;align-items:center;gap:8px;background:var(--surface-2);border:0;border-radius:6px;padding:10px 12px;width:100%;font:inherit;color:var(--text);text-align:left}
.doc{display:flex;align-items:center;gap:8px;background:var(--surface-2);border-radius:6px;padding:10px 12px;color:var(--text);text-decoration:none}
.mais{align-self:center;margin:6px 0 12px}
.composer{display:flex;gap:8px;align-items:flex-end;padding:10px 16px;background:var(--surface-2);border-top:1px solid var(--border)}
.composer textarea{flex:1;resize:none;border:1px solid var(--border);border-radius:8px;padding:10px 12px;font:inherit;max-height:140px;min-height:42px;height:42px;line-height:1.4;background:var(--surface);color:var(--text)}
.ib{border:0;background:none;font-size:22px;color:var(--text-2);height:42px;width:42px;flex:none}
.send{background:var(--accent);color:var(--accent-ink);border-radius:50%;font-size:18px}
.send:disabled{opacity:.5;cursor:not-allowed}
.aviso{padding:10px 14px;border-radius:8px;font-size:13px;margin:10px 14px}
.aviso.err{background:var(--crit-soft);color:var(--crit)}.aviso.ok{background:var(--ok-soft);color:var(--ok)}.aviso.warn{background:var(--warn-soft);color:var(--warn)}
.centro{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--text-3);text-align:center;padding:30px;gap:12px}
.qr{width:264px;height:264px;background:#fff;padding:8px;border-radius:8px}
.anexo{display:flex;align-items:center;gap:10px;padding:8px 16px;background:var(--accent-soft);font-size:13px}
.anexo span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

dialog{border:1px solid var(--border);border-radius:12px;padding:0;width:min(560px,94vw);max-height:90vh;box-shadow:var(--shadow-2);background:var(--surface);color:var(--text)}
dialog::backdrop{background:rgba(0,0,0,.45)}
.dh{padding:14px 18px;border-bottom:1px solid var(--border);display:flex;align-items:center}
.dh b{flex:1;font-size:15px}
.db{padding:16px 18px;overflow:auto;max-height:78vh}
.db h3{font-family:var(--font-mono);font-size:10px;margin:0 0 8px;text-transform:uppercase;letter-spacing:.18em;color:var(--text-3)}
.db section{margin-bottom:24px}
.db label{display:block;font-size:12px;font-weight:600;color:var(--text-2);margin:10px 0 4px}
.db input[type=text],.db select{width:100%;padding:9px 11px;border:1px solid var(--border);border-radius:7px;font:inherit;background:var(--surface);color:var(--text)}
.db input[type=color]{width:100%;height:39px;border:1px solid var(--border);border-radius:7px;padding:2px;background:var(--surface)}
.row{display:flex;gap:10px;align-items:flex-end}
.row>.f{flex:1}
.row>.c{flex:0 0 70px}
.cad{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--border)}
.cad .grow{flex:1;min-width:0}
.hint{font-size:12px;color:var(--text-3);margin-top:6px}
#novoQr{text-align:center;margin-top:12px}
#zoom{background:transparent;border:0;width:100vw;max-width:100vw;height:100vh;max-height:100vh;border-radius:0;box-shadow:none}
#zoom::backdrop{background:rgba(0,0,0,.85)}
#zoom img{max-width:96vw;max-height:92vh;display:block;margin:4vh auto 0}

@media (max-width:1100px){.brand-sub{display:none}}
@media (max-width:820px){
  .topbar-in{padding:8px 12px}
  .whoami{display:none}
  .wa{grid-template-columns:1fr;grid-template-rows:auto 1fr}
  .rail{flex-direction:row;padding:6px 10px;overflow-x:auto;overflow-y:hidden}
  .num{width:64px}
  .num .dot{right:8px}
  .lista,.conv{grid-row:2;grid-column:1}
  .wa.aberta .lista{display:none}
  .wa:not(.aberta) .conv{display:none}
  .voltar{display:block}
  .msgs{padding:12px 10px}
  .b{max-width:88%}
}