/*
  DT Conversas — CSS do produto (C3).

  Copiado do protótipo da Julia (docs/prototipo/REFATORACAO-DTCONVERSAS.html, 31/08/2026) — a
  fonte de verdade do desenho (D5): tokens, tema claro/escuro por variáveis, componentes e os
  três breakpoints. As fontes vêm de /fontes/fontes.css, local (sem CDN).

  O que mudou em relação ao protótipo está no fim do arquivo, na seção "acréscimos do produto".
  O bloco copiado só teve os seletores por id (#ctxHeadLabel, #ctxHeadIcon) trocados por
  classe: no produto quem desenha é o Preact, e id fixo não combina com componente.
*/

/* ===== tokens — claro (padrão) ===== */
:root{
  --ink:#142A35; --ink-soft:#4C6472; --ink-faint:#93A6AF;
  --bg:#F3F7F6; --surface:#FFFFFF; --surface-alt:#EAF2F0; --line:#DCE7E3;
  --accent:#2A7A63; --accent-strong:#1F5C4A; --accent-soft:#DDF0E8; --on-accent:#FFFFFF;
  --ok:#2F8F63; --ok-soft:#E1F3E8;
  --warn:#B6791F; --warn-soft:#F7E9D1;
  --danger:#BD4B3C; --danger-soft:#F6DEDA;
  --bubble-in:#FFFFFF; --bubble-out:#DCF1E8;
  --shadow:0 1px 2px rgba(20,42,53,.06), 0 10px 26px -14px rgba(20,42,53,.22);
  --brandbar-bg:#142A35; --brandbar-fg:#F3F7F6; --brandbar-fg-soft:#9CC7B7; --brandbar-accent:#6FC9AC;
  --radius-lg:20px; --radius-md:14px; --radius-sm:10px; --radius-pill:999px;
}
/* ===== tokens — escuro via SO ===== */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ink:#E9F1EE; --ink-soft:#A6BBC1; --ink-faint:#67808A;
    --bg:#0E1B22; --surface:#16262E; --surface-alt:#1C2F37; --line:#243A41;
    --accent:#67C4A5; --accent-strong:#87D8BB; --accent-soft:rgba(103,196,165,.16); --on-accent:#0E1B22;
    --ok:#67C4A5; --ok-soft:rgba(103,196,165,.14);
    --warn:#DDA75B; --warn-soft:rgba(221,167,91,.14);
    --danger:#E2897B; --danger-soft:rgba(226,137,123,.14);
    --bubble-in:#1C2F37; --bubble-out:#20463B;
    --shadow:0 1px 2px rgba(0,0,0,.35), 0 14px 34px -16px rgba(0,0,0,.65);
  }
}
/* ===== tokens — escuro forçado ===== */
:root[data-theme="dark"]{
  --ink:#E9F1EE; --ink-soft:#A6BBC1; --ink-faint:#67808A;
  --bg:#0E1B22; --surface:#16262E; --surface-alt:#1C2F37; --line:#243A41;
  --accent:#67C4A5; --accent-strong:#87D8BB; --accent-soft:rgba(103,196,165,.16); --on-accent:#0E1B22;
  --ok:#67C4A5; --ok-soft:rgba(103,196,165,.14);
  --warn:#DDA75B; --warn-soft:rgba(221,167,91,.14);
  --danger:#E2897B; --danger-soft:rgba(226,137,123,.14);
  --bubble-in:#1C2F37; --bubble-out:#20463B;
  --shadow:0 1px 2px rgba(0,0,0,.35), 0 14px 34px -16px rgba(0,0,0,.65);
}

*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;
  display:flex; flex-direction:column;
}
h1,h2,h3,.font-display{ font-family:'Sora',sans-serif; letter-spacing:-.01em; }
.material-symbols-rounded{
  font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 24;
  font-size:22px; line-height:1; vertical-align:middle; user-select:none; flex-shrink:0;
}
.fill{ font-variation-settings:'FILL' 1,'wght' 500,'GRAD' 0,'opsz' 24; }
button{ font:inherit; cursor:pointer; }
::-webkit-scrollbar{ width:8px; height:8px; }
::-webkit-scrollbar-thumb{ background:var(--line); border-radius:99px; }

.app{ flex:1; display:flex; flex-direction:column; min-height:0; }

/* ===== barra superior (marca) ===== */
.topbar{
  background:var(--brandbar-bg); color:var(--brandbar-fg);
  display:flex; align-items:center; gap:.75rem;
  padding:.7rem 1rem; padding-top:calc(.7rem + env(safe-area-inset-top));
}
.icon-btn{
  background:none; border:none; color:inherit; padding:.4rem; border-radius:var(--radius-pill);
  display:grid; place-items:center; width:2.5rem; height:2.5rem; flex-shrink:0;
}
.icon-btn:hover{ background:rgba(255,255,255,.08); }
.topbar-title{ min-width:0; flex:1; }
.topbar-title h1{ font-size:1.02rem; font-weight:700; margin:0; line-height:1.25; }
.topbar-title p{ font-size:.72rem; color:var(--brandbar-fg-soft); margin:.1rem 0 0; }
.brand-logo, .brand-logo-fallback{
  width:2.15rem; height:2.15rem; border-radius:var(--radius-pill); object-fit:cover; flex-shrink:0;
}
.brand-logo-fallback{
  display:none; background:var(--brandbar-accent); color:var(--brandbar-bg);
  align-items:center; justify-content:center; font-family:'Sora',sans-serif; font-weight:700; font-size:.8rem;
}

/* ===== faixa de status ===== */
.status-strip{
  display:flex; gap:.5rem; padding:.55rem .9rem; overflow-x:auto;
  background:var(--surface); border-bottom:1px solid var(--line);
}
.chip{
  display:inline-flex; align-items:center; gap:.3rem; white-space:nowrap;
  font-size:.72rem; font-weight:500; padding:.32rem .65rem; border-radius:var(--radius-pill);
  background:var(--surface-alt); color:var(--ink-soft);
}
.chip .material-symbols-rounded{ font-size:15px; }
.chip-accent{ background:var(--accent-soft); color:var(--accent-strong); }
.chip-tom-accent{ background:var(--accent-soft); color:var(--accent-strong); }
.chip-tom-warn{ background:var(--warn-soft); color:var(--warn); }
.chip-tom-danger{ background:var(--danger-soft); color:var(--danger); }

/* ===== filtros de setor ===== */
.faixa-cliente{
  display:flex; align-items:center; gap:.6rem; padding:.55rem .9rem; flex-wrap:wrap;
  background:var(--accent-soft); color:var(--accent-strong); border-bottom:1px solid var(--line);
  font-size:.85rem; font-weight:500;
}
.faixa-cliente .btn{ margin-left:auto; padding:.3rem .7rem; font-size:.8rem; }
.filters{
  display:flex; gap:.5rem; padding:.65rem .9rem; overflow-x:auto;
  background:var(--surface); border-bottom:1px solid var(--line);
}
.filter-chip{
  border:1px solid var(--line); background:var(--surface); color:var(--ink-soft);
  font-size:.78rem; font-weight:500; padding:.4rem .8rem; border-radius:var(--radius-pill);
  white-space:nowrap; display:inline-flex; align-items:center; gap:.35rem;
}
.filter-chip.active{ background:var(--ink); border-color:var(--ink); color:var(--bg); }

/* ===== workspace / painéis ===== */
.workspace{ flex:1; display:flex; min-height:0; position:relative; }
.shell{ flex:1; min-width:0; position:relative; overflow:hidden; }

.pane-fila, .pane-thread{
  position:absolute; inset:0; display:flex; flex-direction:column; min-height:0;
  background:var(--surface); transition:transform .32s cubic-bezier(.4,0,.2,1);
}
.pane-fila{ transform:translateX(0); z-index:1; }
.pane-thread{ transform:translateX(100%); z-index:2; border-left:1px solid var(--line); }
.shell[data-view="thread"] .pane-fila{ transform:translateX(-22%); }
.shell[data-view="thread"] .pane-thread{ transform:translateX(0); }

.pane-head{ padding:.85rem .9rem .1rem; flex-shrink:0; display:flex; align-items:center; gap:.4rem; }
.pane-head .label{ font-size:.72rem; font-weight:600; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-faint); }
.pane-collapse-btn, .ctx-collapse-btn{ display:none; margin-left:auto; width:2rem; height:2rem; color:var(--ink-faint); }
.pane-collapse-btn:hover, .ctx-collapse-btn:hover{ background:var(--surface-alt); color:var(--ink); }

.lista{ flex:1; overflow-y:auto; padding:.4rem; }
.lista-empty{ text-align:center; padding:3rem 1rem; color:var(--ink-faint); font-size:.85rem; }

.item{
  display:flex; gap:.7rem; padding:.7rem .6rem; border-radius:var(--radius-md);
  align-items:flex-start; text-align:left; width:100%; background:none; border:none; color:inherit;
}
.item:hover{ background:var(--surface-alt); }
.item.active{ background:var(--accent-soft); }

.avatar{
  width:2.6rem; height:2.6rem; border-radius:var(--radius-pill); flex-shrink:0;
  display:grid; place-items:center; font-family:'Sora',sans-serif; font-weight:700; font-size:.8rem;
  background:var(--accent-soft); color:var(--accent-strong);
}
.avatar.unknown{
  background:none; border:1.5px dashed var(--ink-faint); color:var(--ink-faint);
}
.avatar .material-symbols-rounded{ font-size:19px; }

.item-body{ min-width:0; flex:1; }
.item-top{ display:flex; align-items:center; gap:.4rem; }
.item-name{ font-size:.88rem; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.item-canal{ margin-left:auto; font-size:.65rem; color:var(--ink-faint); white-space:nowrap; flex-shrink:0; }
.item-preview{ font-size:.8rem; color:var(--ink-soft); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:.1rem; }
.item-meta{ display:flex; align-items:center; gap:.3rem; font-size:.7rem; color:var(--ink-faint); margin-top:.3rem; }
.item-meta .material-symbols-rounded{ font-size:14px; }
.setor-tag{ display:inline-flex; align-items:center; gap:.2rem; font-weight:500; }

/* ===== conversa ===== */
.thread-head{
  display:flex; align-items:center; gap:.65rem; padding:.65rem .8rem;
  border-bottom:1px solid var(--line); background:var(--surface); flex-shrink:0;
}
.btn-back{ display:inline-grid; }
.thread-head-info{ min-width:0; flex:1; line-height:1.3; }
.thread-head-info .name-row{ display:flex; align-items:center; gap:.4rem; font-size:.9rem; font-weight:600; }
.thread-head-info .sub{ font-size:.72rem; color:var(--ink-faint); }
.tag-cliente{
  font-size:.65rem; font-weight:600; background:var(--ok-soft); color:var(--ok);
  padding:.1rem .45rem; border-radius:var(--radius-pill);
}
.btn-ctx{ display:inline-grid; }

.wa-bg{
  flex:1; overflow-y:auto; padding:1.1rem .9rem;
  background-color:var(--bg);
  background-image:radial-gradient(color-mix(in srgb, var(--ink) 6%, transparent) 1px, transparent 1px);
  background-size:18px 18px;
}
.thread{ display:flex; flex-direction:column; gap:.4rem; max-width:640px; margin:0 auto; }

.dia-pill{
  align-self:center; background:var(--surface); color:var(--ink-soft); box-shadow:var(--shadow);
  font-size:.68rem; padding:.2rem .7rem; border-radius:var(--radius-pill); margin:.3rem 0;
}
.sistema-linha{
  align-self:center; font-size:.7rem; color:var(--ink-faint); margin:.25rem 0; text-align:center;
}
.bub{
  max-width:78%; padding:.5rem .65rem .35rem; border-radius:var(--radius-md); font-size:.86rem; line-height:1.42;
  box-shadow:var(--shadow); position:relative;
}
.bub-in{ background:var(--bubble-in); align-self:flex-start; border-bottom-left-radius:4px; }
.bub-out{ background:var(--bubble-out); align-self:flex-end; border-bottom-right-radius:4px; }
.bub-hora{
  float:right; font-size:.63rem; color:var(--ink-faint); margin:.3rem -.05rem -.05rem .5rem; display:inline-flex; align-items:center; gap:.15rem;
}
.bub-hora .material-symbols-rounded{ font-size:13px; color:var(--accent); }
.nota-card{
  align-self:center; max-width:92%; background:var(--surface); border:1.5px dashed var(--line);
  border-radius:var(--radius-md); padding:.85rem; font-size:.83rem; box-shadow:var(--shadow);
}
.nota-card .titulo{ display:flex; align-items:center; gap:.4rem; font-weight:600; margin-bottom:.35rem; }
textarea{
  width:100%; margin-top:.55rem; border:1px solid var(--line); border-radius:var(--radius-sm);
  background:var(--bg); color:var(--ink); padding:.55rem; font:inherit; font-size:.82rem; resize:vertical;
}

.actions-bar{ padding:.6rem .8rem 0; display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }
.btn{
  display:inline-flex; align-items:center; gap:.4rem; border-radius:var(--radius-pill);
  padding:.55rem 1rem; font-size:.83rem; font-weight:600; border:1.5px solid transparent; min-height:2.5rem;
}
.btn .material-symbols-rounded{ font-size:19px; }
.btn-primary{ background:var(--accent); color:var(--on-accent); }
.btn-primary:hover{ background:var(--accent-strong); }
.btn-ghost{ background:none; border-color:var(--line); color:var(--ink-soft); }
.btn-ghost:hover{ background:var(--surface-alt); }
.btn-block{ width:100%; justify-content:center; }
.pill-status{
  display:inline-flex; align-items:center; gap:.4rem; background:var(--accent-soft); color:var(--accent-strong);
  padding:.5rem .9rem; border-radius:var(--radius-pill); font-size:.83rem; font-weight:600;
}
.hint{ margin-left:auto; font-size:.68rem; color:var(--ink-faint); }

.composer{ display:flex; align-items:center; gap:.55rem; padding:.7rem .8rem; padding-bottom:calc(.7rem + env(safe-area-inset-bottom)); flex-shrink:0; }
.composer .icon-btn{ color:var(--ink-faint); width:2.2rem; height:2.2rem; }
.composer-input{
  flex:1; min-width:0; background:var(--surface-alt); border-radius:var(--radius-pill); padding:.55rem 1rem;
  font-size:.86rem; color:var(--ink-faint); border:none; font-family:inherit;
  text-overflow:ellipsis;
}
.composer-input:not(:disabled){ color:var(--ink); }
.composer-input:disabled{ cursor:not-allowed; }
.btn-send{
  width:2.6rem; height:2.6rem; border-radius:var(--radius-pill); background:var(--accent); color:var(--on-accent);
  border:none; display:grid; place-items:center; flex-shrink:0;
}
.btn-send:disabled{ background:var(--surface-alt); color:var(--ink-faint); }

/* ===== painel de contexto ===== */
.sheet-backdrop{
  position:fixed; inset:0; background:rgba(14,27,34,.45); opacity:0; pointer-events:none;
  transition:opacity .25s; z-index:40;
}
.sheet-backdrop.show{ opacity:1; pointer-events:auto; }

.ctx-panel{
  position:fixed; left:0; right:0; bottom:0; max-height:86vh; z-index:50;
  background:var(--surface); border-radius:var(--radius-lg) var(--radius-lg) 0 0;
  box-shadow:0 -10px 34px rgba(0,0,0,.2);
  transform:translateY(102%); transition:transform .32s cubic-bezier(.4,0,.2,1);
  display:flex; flex-direction:column; min-height:0;
}
.ctx-panel.open{ transform:translateY(0); }
.sheet-handle{ width:36px; height:4px; border-radius:99px; background:var(--line); margin:.6rem auto .1rem; flex-shrink:0; }
.ctx-head{
  display:flex; align-items:center; gap:.5rem; padding:.6rem 1rem; border-bottom:1px solid var(--line);
  font-size:.78rem; font-weight:600; color:var(--ink-soft); flex-shrink:0;
}
.ctx-head .material-symbols-rounded{ color:var(--accent); }
.ctx-close{ margin-left:auto; }
.ctx-body{ padding:1rem; overflow-y:auto; }

.ctx-nome{ font-size:1.02rem; font-weight:700; font-family:'Sora',sans-serif; }
.ctx-sub{ font-size:.78rem; color:var(--ink-faint); margin-top:.15rem; }
.kpi-row{ display:flex; gap:.6rem; margin:.9rem 0; }
.kpi{ flex:1; background:var(--surface-alt); border-radius:var(--radius-md); padding:.6rem .7rem; }
.kpi-label{ font-size:.63rem; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-faint); }
.kpi-value{ font-size:.92rem; font-weight:700; margin-top:.1rem; font-variant-numeric:tabular-nums; }

.alerta-box{
  display:flex; gap:.5rem; align-items:flex-start; padding:.65rem .75rem; border-radius:var(--radius-md);
  font-size:.8rem; line-height:1.45; margin-bottom:.9rem;
}
.alerta-box.tom-ok{ background:var(--ok-soft); color:var(--ok); }
.alerta-box.tom-atencao{ background:var(--warn-soft); color:var(--warn); }
.alerta-box.tom-risco{ background:var(--danger-soft); color:var(--danger); }
.alerta-box .material-symbols-rounded{ font-size:19px; margin-top:.05rem; }

.ctx-field{ margin-bottom:.9rem; }
.ctx-field-label{ font-size:.63rem; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-faint); margin-bottom:.3rem; }
.ctx-field-value{ display:flex; align-items:center; gap:.4rem; font-size:.85rem; }
.ctx-field-value .material-symbols-rounded{ font-size:18px; color:var(--ink-faint); }
.reserva-row{ display:flex; justify-content:space-between; align-items:center; font-size:.78rem; padding:.3rem 0; }
.status-pill{ background:var(--ok-soft); color:var(--ok); font-size:.68rem; font-weight:600; padding:.15rem .5rem; border-radius:var(--radius-pill); }

.ctx-actions{ display:flex; flex-direction:column; gap:.55rem; margin-top:.3rem; }
.ctx-footer{
  display:flex; align-items:center; gap:.4rem; font-size:.68rem; color:var(--ink-faint);
  margin-top:1rem; padding-top:.8rem; border-top:1px solid var(--line);
}
.ctx-footer .material-symbols-rounded{ font-size:14px; }

.orfao-box{ text-align:center; padding:1.2rem .5rem .4rem; }
.orfao-box .material-symbols-rounded{ font-size:40px; color:var(--ink-faint); }
.orfao-box h3{ font-size:.98rem; margin:.7rem 0 .3rem; }
.orfao-box p{ font-size:.82rem; color:var(--ink-soft); margin:0 0 1.1rem; line-height:1.5; }
.orfao-phone{
  display:inline-flex; align-items:center; gap:.4rem; background:var(--surface-alt); border-radius:var(--radius-pill);
  padding:.4rem .8rem; font-size:.8rem; font-weight:600; margin-bottom:1.1rem; font-variant-numeric:tabular-nums;
}

/* ===== responsivo: tablet ≥768px — fila + conversa lado a lado ===== */
@media (min-width:768px){
  .shell{ display:flex; overflow:visible; }
  .pane-fila, .pane-thread{ position:relative; inset:auto; transform:none !important; }
  .pane-fila{ flex:0 0 300px; border-right:1px solid var(--line); transition:flex-basis .22s ease; }
  .pane-thread{ flex:1; min-width:0; border-left:none; transition:none; }
  .btn-back{ display:none; }
  .pane-collapse-btn{ display:inline-grid; }
  .pane-fila.collapsed{ flex-basis:52px; overflow:hidden; }
  .pane-fila.collapsed .lista, .pane-fila.collapsed .pane-head .label{ display:none; }
  .pane-fila.collapsed .pane-head{ justify-content:center; padding:.85rem .3rem; }
  .pane-fila.collapsed .pane-collapse-btn{ margin-left:0; }
}

/* ===== responsivo: desktop ≥1100px — 3 painéis fixos ===== */
@media (min-width:1100px){
  .workspace{ display:flex; }
  .ctx-panel{
    position:relative; inset:auto; transform:none !important; max-height:none;
    border-radius:0; box-shadow:none; border-left:1px solid var(--line);
    flex:0 0 340px; transition:flex-basis .22s ease;
  }
  .sheet-backdrop{ display:none; }
  .sheet-handle, .ctx-close{ display:none; }
  .btn-ctx{ display:none; }
  .ctx-collapse-btn{ display:inline-grid; }
  .ctx-panel.collapsed{ flex-basis:52px; overflow:hidden; }
  .ctx-panel.collapsed .ctx-body, .ctx-panel.collapsed .ctx-head-label, .ctx-panel.collapsed .ctx-head-icon{ display:none; }
  .ctx-panel.collapsed .ctx-head{ justify-content:center; padding:.6rem .3rem; }
  .ctx-panel.collapsed .ctx-collapse-btn{ margin-left:0; }
}

@media (prefers-reduced-motion:reduce){
  .pane-fila,.pane-thread,.ctx-panel,.sheet-backdrop{ transition:none !important; }
}

/* ===== toast de confirmação ===== */
.toast{
  position:fixed; left:50%; bottom:1.4rem; transform:translate(-50%,20px); z-index:200;
  background:var(--ink); color:var(--bg); padding:.7rem 1.1rem; border-radius:var(--radius-pill);
  font-size:.82rem; font-weight:500; display:flex; align-items:center; gap:.5rem;
  box-shadow:var(--shadow); opacity:0; pointer-events:none; transition:opacity .25s, transform .25s;
  max-width:88vw;
}
.toast.show{ opacity:1; transform:translate(-50%,0); }
.toast .material-symbols-rounded{ font-size:18px; color:var(--accent-strong); }

/* ===== menu / drawer de navegação ===== */
.drawer-backdrop{ position:fixed; inset:0; background:rgba(15,58,68,.45); opacity:0; pointer-events:none; transition:opacity .25s; z-index:90; }
.drawer-backdrop.show{ opacity:1; pointer-events:auto; }
.drawer{
  position:fixed; top:0; bottom:0; left:0; width:280px; max-width:82vw; z-index:95;
  background:var(--surface); box-shadow:0 0 34px rgba(0,0,0,.25);
  transform:translateX(-100%); transition:transform .3s cubic-bezier(.4,0,.2,1);
  display:flex; flex-direction:column;
}
.drawer.open{ transform:translateX(0); }
.drawer-head{ background:var(--brandbar-bg); color:var(--brandbar-fg); padding:1.1rem 1rem; display:flex; align-items:center; gap:.6rem; }
.drawer-head img, .drawer-head .brand-logo-fallback{ width:2.3rem; height:2.3rem; border-radius:var(--radius-pill); }
.drawer-head-name{ font-family:'Sora',sans-serif; font-weight:700; font-size:.95rem; }
.drawer-head-sub{ font-size:.68rem; color:var(--brandbar-fg-soft); }
.drawer-nav{ padding:.6rem; overflow-y:auto; flex:1; }
.drawer-label{ font-size:.66rem; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-faint); padding:.7rem .6rem .3rem; }
.drawer-link{
  display:flex; align-items:center; gap:.7rem; padding:.6rem; border-radius:var(--radius-md);
  font-size:.85rem; font-weight:500; color:var(--ink); text-decoration:none; width:100%; text-align:left;
  background:none; border:none;
}
.drawer-link .material-symbols-rounded{ color:var(--ink-faint); font-size:20px; }
.drawer-link:hover{ background:var(--surface-alt); }
.drawer-link.active{ background:var(--accent-soft); color:var(--accent-strong); }
.drawer-link.active .material-symbols-rounded{ color:var(--accent-strong); }
.drawer-link.disabled{ opacity:.45; cursor:default; }
.drawer-link.disabled:hover{ background:none; }
.drawer-hint{ font-size:.68rem; color:var(--ink-faint); padding:.2rem .6rem 0; line-height:1.4; }

/* ===== modal genérico (transferir / criar cadastro) ===== */
.modal-backdrop{
  position:fixed; inset:0; background:rgba(15,58,68,.5); display:flex; align-items:center; justify-content:center;
  padding:1.2rem; z-index:120; opacity:0; pointer-events:none; transition:opacity .25s;
}
.modal-backdrop.show{ opacity:1; pointer-events:auto; }
.modal-card{ background:var(--surface); border-radius:var(--radius-lg); padding:1.3rem; width:100%; max-width:360px; box-shadow:var(--shadow); }
.modal-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:.3rem; }
.modal-head h3{ font-size:1rem; margin:0; }
.modal-sub{ font-size:.78rem; color:var(--ink-soft); margin:.2rem 0 1rem; line-height:1.5; }
.setor-pick{ display:flex; flex-direction:column; gap:.5rem; }
.setor-pick button{
  display:flex; align-items:center; gap:.6rem; padding:.65rem .8rem; border-radius:var(--radius-md);
  border:1px solid var(--line); background:var(--surface); color:var(--ink); font-size:.85rem; font-weight:500; text-align:left;
}
.setor-pick button:hover{ background:var(--surface-alt); border-color:var(--accent); }
.field{ margin-bottom:.8rem; }
.field label{ display:block; font-size:.72rem; font-weight:600; color:var(--ink-soft); margin-bottom:.3rem; }
.field input{
  width:100%; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--bg);
  color:var(--ink); padding:.55rem .7rem; font:inherit; font-size:.85rem; box-sizing:border-box;
}
.field input:disabled{ color:var(--ink-faint); }

/* ===== estado "resolvida" na fila ===== */
.item.resolvida{ opacity:.55; }
.item-resolvida-chip{ display:inline-flex; align-items:center; gap:.2rem; color:var(--ok); font-weight:600; }

/* ===== confirmação antes de efetivar ação ===== */
.confirm-row{ display:flex; gap:.6rem; margin-top:.4rem; }
.confirm-row .btn{ flex:1; justify-content:center; }

/* =====================================================================
   acréscimos do produto — o que o protótipo não tinha porque não precisava:
   raiz do Preact, login, aviso de canal, status de envio, estados vazios.
   Tudo nos tokens do protótipo; nenhuma cor nova.
   ===================================================================== */

#raiz{ flex:1; display:flex; flex-direction:column; min-height:0; }
:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

/* marca: o protótipo usa o logo do tenant com "CF" de reserva. Logo por tenant é do C2 —
   até lá vale a reserva, com as iniciais do produto. */
.brand-mark{
  width:2.15rem; height:2.15rem; border-radius:var(--radius-pill); flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:var(--brandbar-accent); color:var(--brandbar-bg);
  font-family:'Sora',sans-serif; font-weight:700; font-size:.8rem;
}
.drawer-head .brand-mark{ width:2.3rem; height:2.3rem; }

/* ===== login ===== */
.login-wrap{ flex:1; display:grid; place-items:center; padding:1.2rem; }
.login-card{
  width:100%; max-width:380px; background:var(--surface); border-radius:var(--radius-lg);
  box-shadow:var(--shadow); overflow:hidden;
}
.login-head{
  background:var(--brandbar-bg); color:var(--brandbar-fg);
  display:flex; align-items:center; gap:.7rem; padding:1.1rem 1.2rem;
}
.login-head h1{ font-size:1.02rem; font-weight:700; margin:0; }
.login-head p{ font-size:.72rem; color:var(--brandbar-fg-soft); margin:.1rem 0 0; }
.login-body{ padding:1.2rem; }
.login-body .btn{ margin-top:.3rem; }
.field input:focus{ outline:2px solid var(--accent); outline-offset:1px; }
.form-erro, .form-info{
  display:flex; gap:.45rem; align-items:flex-start; font-size:.8rem; line-height:1.45;
  padding:.6rem .7rem; border-radius:var(--radius-md); margin:0 0 .9rem;
}
.form-erro{ background:var(--danger-soft); color:var(--danger); }
.form-info{ background:var(--accent-soft); color:var(--accent-strong); }
.form-erro .material-symbols-rounded, .form-info .material-symbols-rounded{ font-size:18px; }
.btn:disabled{ opacity:.6; cursor:default; }

/* ===== fila: botão de atualizar ao lado do de recolher ===== */
.btn-recarregar{ margin-left:auto; width:2rem; height:2rem; color:var(--ink-faint); }
.btn-recarregar:hover{ background:var(--surface-alt); color:var(--ink); }
.btn-recarregar + .pane-collapse-btn{ margin-left:0; }
.pane-fila.collapsed .btn-recarregar{ display:none; }

/* ===== conversa ===== */
.thread-vazia{
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.6rem;
  color:var(--ink-faint); font-size:.85rem; text-align:center; padding:2rem;
}
.thread-vazia .material-symbols-rounded{ font-size:40px; }
.thread-vazia p{ margin:0; }

/* a faixa que não deixa a atendente achar que o cliente recebeu */
.aviso-canal{ margin:.6rem .8rem 0; margin-bottom:0; flex-shrink:0; }
/* R1 (D6): a regra do canal pessoal, o pedido de justificativa e a thread que só pede o motivo. */
.aviso-regra{ margin:.6rem .8rem 0; flex-shrink:0; }
.acao-dica{ font-size:.72rem; color:var(--ink-faint); margin:.3rem 0 0; line-height:1.4; }
/* C13: ação que não executa fica CINZA de verdade (o primário esverdeado a 60% ainda convidava clique). */
.ctx-actions .btn:disabled{ filter:grayscale(1); opacity:.55; }
.acesso-restrito{ text-align:center; padding:1.5rem; gap:.6rem; }
.acesso-restrito p{ max-width:28rem; margin:0; }
.erro-campo{ display:block; margin-top:.3rem; font-size:.75rem; color:var(--danger); }
.field textarea{ width:100%; box-sizing:border-box; }
.alerta-box.tom-neutro{ background:var(--surface-alt); color:var(--ink-soft); }

.bub{ white-space:pre-wrap; overflow-wrap:anywhere; }
.bub-vazia{ color:var(--ink-faint); }
.bub-hora .ic-erro{ color:var(--danger); }
.bub-carimbo{
  display:flex; align-items:center; gap:.2rem; clear:both; margin-top:.35rem;
  font-size:.66rem; font-weight:700; letter-spacing:.02em; color:var(--warn); white-space:normal;
}
.bub-carimbo-erro{ color:var(--danger); }
.bub-carimbo .material-symbols-rounded{ font-size:14px; }

.composer-input:focus{ outline:2px solid var(--accent); outline-offset:1px; }
/* sem canal conectado o botão não é "enviar": outra cor, outro ícone, outro rótulo */
.btn-send-grava{ background:var(--warn); color:var(--on-accent); }

/* ===== toast por tom ===== */
.toast-warn, .toast-danger{ color:var(--bg); font-weight:600; }
.toast-warn{ background:var(--warn); }
.toast-danger{ background:var(--danger); }
.toast-warn .material-symbols-rounded, .toast-danger .material-symbols-rounded{ color:inherit; }
/* no protótipo o toast nasce em cima do composer; na tela real a pessoa está digitando ali,
   e o toast de erro fica 6 s. Sobe acima do campo de resposta. */
.toast{ bottom:calc(4.8rem + env(safe-area-inset-bottom)); }

/* Gaveta, menu e modal fechados ficam FORA da tela, não fora do documento: a sombra vazava na
   borda e o Tab do teclado entrava neles. `visibility` some com os dois, e a transição dela
   (discreta) espera o deslize terminar antes de esconder. */
.drawer{ visibility:hidden; transition:transform .3s cubic-bezier(.4,0,.2,1), visibility .3s; }
.drawer.open{ visibility:visible; }
.modal-backdrop{ visibility:hidden; transition:opacity .25s, visibility .25s; }
.modal-backdrop.show{ visibility:visible; }
@media (max-width:1099px){
  .ctx-panel{ visibility:hidden; transition:transform .32s cubic-bezier(.4,0,.2,1), visibility .32s; }
  .ctx-panel.open{ visibility:visible; }
}
@media (prefers-reduced-motion:reduce){
  .drawer, .modal-backdrop, .ctx-panel{ transition:none !important; }
}

/* =====================================================================
   C2 — tela de Configurações. Copiado de docs/prototipo/REFATORACAO-DTCONVERSAS-CONFIGURACOES.html,
   com escopo em .tela-config: lá o .chip e o .btn são um pouco maiores que na Central, e sem
   escopo um mudaria o outro.
   ===================================================================== */
.tela-config{ flex:1; overflow-y:auto; min-height:0; }
.tela-config .page{ max-width:680px; margin:0 auto; padding:1.2rem 1rem 4rem; }
.tela-config .section{ margin-bottom:1.8rem; }
.tela-config .section-head{ display:flex; align-items:baseline; justify-content:space-between; gap:.6rem; margin-bottom:.7rem; }
.tela-config .section-head h2{ font-size:1rem; margin:0; }
.tela-config .section-hint{ font-size:.76rem; color:var(--ink-faint); margin:.15rem 0 .9rem; line-height:1.5; }
.tela-config .card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); padding:1.1rem 1.2rem; box-shadow:var(--shadow); }
.tela-config > .page > .alerta-box{ margin-bottom:1.2rem; }

.tela-config .identidade-row{ display:flex; align-items:center; gap:1rem; margin-bottom:1rem; }
.tela-config .identidade-avatar{ width:3.4rem; height:3.4rem; font-size:1.05rem; }
.tela-config .identidade-avatar .material-symbols-rounded{ font-size:28px; }
.identidade-nome{ font-weight:700; font-family:'Sora',sans-serif; }
.identidade-sub{ font-size:.76rem; color:var(--ink-faint); }
.tela-config .field input{ font-size:.87rem; padding:.6rem .75rem; }
.field select{ width:100%; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--bg); color:var(--ink); padding:.6rem .75rem; font:inherit; font-size:.87rem; }
.field-cols{ display:grid; grid-template-columns:1fr 1fr; gap:.7rem; }

.tela-config .chip-row{ display:flex; flex-wrap:wrap; gap:.5rem; }
.tela-config .chip{ font-size:.78rem; padding:.4rem .75rem; gap:.35rem; }
.tela-config .chip .material-symbols-rounded{ font-size:16px; }
.chip-ok{ background:var(--ok-soft); color:var(--ok); }

.setor-card{ display:flex; align-items:flex-start; gap:.9rem; padding:.95rem 0; border-bottom:1px solid var(--line); }
.setor-card:last-child{ border-bottom:none; }
.setor-icon{ width:2.5rem; height:2.5rem; border-radius:var(--radius-md); background:var(--accent-soft); color:var(--accent-strong); display:grid; place-items:center; flex-shrink:0; }
.setor-icon.tom-warn{ background:var(--warn-soft); color:var(--warn); }
.setor-icon.tom-danger{ background:var(--danger-soft); color:var(--danger); }
.setor-body{ flex:1; min-width:0; }
.setor-nome{ font-size:.9rem; font-weight:600; }
.setor-acoes{ font-size:.78rem; color:var(--ink-soft); margin-top:.3rem; line-height:1.6; }
.setor-acoes b{ color:var(--ink); font-weight:600; }
.setor-faz{ color:var(--ink-faint); }
.setor-botoes{ display:flex; align-items:center; gap:.15rem; flex-shrink:0; }
.setor-botoes .icon-btn{ width:2.1rem; height:2.1rem; color:var(--ink-faint); }
.setor-botoes .icon-btn:hover:not(:disabled){ background:var(--surface-alt); color:var(--ink); }
.setor-botoes .icon-btn:disabled{ opacity:.3; cursor:default; }
.tela-config .btn{ padding:.5rem .9rem; font-size:.8rem; min-height:0; }
.tela-config .btn .material-symbols-rounded{ font-size:18px; }
.btn-dashed{ width:100%; justify-content:center; border:1.5px dashed var(--line); background:none; color:var(--ink-faint); margin-top:.9rem; padding:.65rem; }
.btn-dashed:hover{ border-color:var(--accent); color:var(--accent-strong); }

.vocab-row{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.6rem 0; border-bottom:1px solid var(--line); font-size:.83rem; }
.vocab-row:last-child{ border-bottom:none; }
.vocab-key{ color:var(--ink-faint); font-size:.72rem; text-transform:uppercase; letter-spacing:.03em; flex-shrink:0; }
.vocab-input{ border:none; border-bottom:1.5px solid var(--line); background:none; color:var(--ink); font-weight:600; font-size:.85rem; text-align:right; padding:.25rem 0; font-family:inherit; width:55%; }
.vocab-input:focus{ outline:none; border-color:var(--accent); }
.vocab-salvar{ margin-top:1rem; }

.rbac-row{ display:flex; align-items:flex-start; gap:.7rem; padding:.7rem 0; border-bottom:1px solid var(--line); }
.rbac-row:last-child{ border-bottom:none; }
.rbac-row .material-symbols-rounded{ color:var(--accent); margin-top:.1rem; }
.rbac-role{ font-size:.85rem; font-weight:600; }
.rbac-desc{ font-size:.78rem; color:var(--ink-soft); margin-top:.1rem; line-height:1.5; }

/* ===== modal do setor: a ação vem do catálogo, com a descrição curada ao lado ===== */
.modal-card.modal-largo{ max-width:420px; max-height:88vh; overflow-y:auto; }
.acao-campos{ border:1px solid var(--line); border-radius:var(--radius-md); padding:.8rem .9rem .2rem; margin:0 0 .9rem; min-width:0; }
.acao-campos.sem-borda{ border:none; padding:0; margin:0; }
.acao-campos legend{ font-size:.72rem; font-weight:700; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.04em; padding:0 .3rem; }
.acao-descricao{ font-size:.76rem; color:var(--ink-soft); line-height:1.5; margin:.4rem 0 0; }
.acao-pendente{ display:block; margin-top:.25rem; color:var(--warn); font-weight:600; font-size:.7rem; }
.icone-campo{ display:flex; align-items:center; gap:.5rem; }
.icone-campo .material-symbols-rounded{ color:var(--accent-strong); }
fieldset:disabled input, fieldset:disabled select{ color:var(--ink-soft); cursor:default; }

/* ===== setor na fila e no cabeçalho, com a cor da config do tenant ===== */
.setor-tag.tom-accent{ color:var(--accent-strong); }
.setor-tag.tom-warn{ color:var(--warn); }
.setor-tag.tom-danger{ color:var(--danger); }
.setor-orfao{ font-style:italic; }
.name-row .setor-tag{ font-size:.7rem; font-weight:600; }
.name-row .setor-tag .material-symbols-rounded{ font-size:15px; }
.brand-mark .material-symbols-rounded{ font-size:20px; }

/* =====================================================================
   C8 — fila: quem espera resposta da central, quem está atendendo, arquivadas.
   ===================================================================== */
.btn-recarregar + .btn-recarregar{ margin-left:0; }
.pane-fila.collapsed .btn-arquivadas{ display:none; }
.btn-arquivadas.ativo{ background:var(--accent-soft); color:var(--accent-strong); }

/* a marca de "pendente": o cliente falou depois da última resposta de uma pessoa */
.ponto-pendente{
  display:inline-block; width:.5rem; height:.5rem; border-radius:var(--radius-pill);
  background:var(--warn); margin-right:.3rem; vertical-align:middle; flex-shrink:0;
}
.item.pendente .item-canal{ color:var(--warn); font-weight:600; }
.item.pendente .item-name{ font-weight:700; }
.pendente-tag{ color:var(--warn); font-weight:600; }
.situacao-minha{ color:var(--accent-strong); font-weight:600; }
.filter-chip.active .ponto-pendente{ background:var(--bg); }

/* barra de atendimento (protótipo) — pill neutra quando a conversa é de outra pessoa */
.actions-bar{ flex-shrink:0; }
.pill-status.pill-neutra{ background:var(--surface-alt); color:var(--ink-soft); }
.thread-head .btn-arquivar{ color:var(--ink-faint); }
.thread-head .btn-arquivar:hover{ background:var(--surface-alt); color:var(--ink); }
/* na coluna de 300px da fila, cada etiqueta quebra inteira — não "na / fila" */
.item-meta{ flex-wrap:wrap; row-gap:.1rem; }
.item-meta .setor-tag, .item-meta .pendente-tag{ white-space:nowrap; }

/* =====================================================================
   C9 — envio otimista e "mensagens novas" para quem está relendo.
   ===================================================================== */
.thread-area{ flex:1; min-height:0; position:relative; display:flex; flex-direction:column; }
.novas-pill{
  position:absolute; left:50%; bottom:.8rem; transform:translateX(-50%);
  display:inline-flex; align-items:center; gap:.3rem; border:none; cursor:pointer;
  background:var(--accent); color:var(--on-accent); font-size:.76rem; font-weight:600;
  padding:.4rem .85rem; border-radius:var(--radius-pill); box-shadow:var(--shadow);
}
.novas-pill .material-symbols-rounded{ font-size:16px; }

.bub-otimista.bub-enviando, .bub-otimista.bub-gravada{ opacity:.75; }
.bub-otimista.bub-falhou{ outline:1.5px solid var(--danger); outline-offset:-1.5px; }
.bub-pendente{
  display:flex; align-items:center; gap:.2rem; clear:both; margin-top:.3rem;
  font-size:.66rem; color:var(--ink-faint); white-space:normal;
}
.bub-pendente .material-symbols-rounded{ font-size:13px; }
.bub-acoes{ display:flex; gap:.4rem; margin-top:.4rem; white-space:normal; }
.bub-acao{
  display:inline-flex; align-items:center; gap:.2rem; border:1px solid var(--line); cursor:pointer;
  background:var(--surface); color:var(--ink-soft); font-size:.7rem; font-weight:600;
  padding:.2rem .55rem; border-radius:var(--radius-pill);
}
.bub-acao:hover{ border-color:var(--accent); color:var(--accent-strong); }
.bub-acao .material-symbols-rounded{ font-size:14px; }

/* =====================================================================
   C10 — transferência: o setor escolhido no modal, o recado, e o setor no painel de contato.
   ===================================================================== */
.setor-pick button{ position:relative; }
.setor-pick button.escolhido{ border-color:var(--accent); background:var(--accent-soft); color:var(--accent-strong); font-weight:600; }
.setor-pick .pick-check{ margin-left:auto; color:var(--accent-strong); }
.recado-campo{ margin-top:1rem; }
.recado-campo textarea{ margin-top:0; }
.recado-dica{ display:block; font-size:.7rem; color:var(--ink-faint); margin-top:.3rem; }
.pick-aviso{ margin:.6rem 0 0; text-align:center; }
.ctx-sem-setor{ color:var(--ink-faint); font-size:.8rem; }
.ctx-actions{ margin-bottom:.9rem; }
.ctx-actions .btn:disabled{ opacity:.55; }
.ctx-acoes-dica{ font-size:.7rem; color:var(--ink-faint); margin:.1rem 0 0; text-align:center; }

/* =====================================================================
   C11 — a ficha do cliente: exemplo marcado, sem fonte, erro com "tentar de novo".
   ===================================================================== */
.ficha-exemplo{ margin-bottom:.9rem; }
.ficha-sem-fonte{ margin-top:.9rem; }
.ctx-separado{ margin-top:1rem; padding-top:.9rem; border-top:1px solid var(--line); }
.link-acao{
  background:none; border:none; padding:0; margin-left:.25rem; cursor:pointer;
  color:inherit; font:inherit; font-weight:700; text-decoration:underline; text-underline-offset:2px;
}

/* =====================================================================
   C12 — o bot nas Configurações: ligar com aviso, prévia do menu, as regras que faltam.
   ===================================================================== */
.bot-ligado{ display:flex; align-items:flex-start; gap:.6rem; font-size:.82rem; line-height:1.5; margin-bottom:1rem; cursor:pointer; }
.bot-ligado input{ width:1.1rem; height:1.1rem; margin-top:.15rem; accent-color:var(--accent); flex-shrink:0; }
.bot-previa{ margin:.4rem 0 1rem; padding:.8rem; border-radius:var(--radius-md); background:var(--bg); }
.bot-previa .bub{ max-width:none; margin-top:.4rem; }
.bot-pendente{ margin-bottom:1rem; }