/* Copiloto Gado Certo — Terra Premium · ritmo de leitura Claude.
   Um só stylesheet responsivo:
   - desktop >900px  = topbar + [sidebar de conversas | chat]
   - mobile  ≤900px  = chat em tela cheia + menu lateral
   Restrições: CSP self-contained, fontes locais, SVG inline, XSS por textContent. */

/* ============ FONTES LOCAIS (variáveis, wght 400–700) ============ */
@font-face{
  font-family:'Inter';
  src:url('/web/fonts/inter-var.woff2') format('woff2');
  font-weight:400 700;font-style:normal;font-display:block;
}
@font-face{
  font-family:'JetBrains Mono';
  src:url('/web/fonts/jetbrains-mono-var.woff2') format('woff2');
  font-weight:400 700;font-style:normal;font-display:block;
}

/* ============ TOKENS — "Papel Quente" · tema CLARO calmo (aprovado 2026-07-14) ============
   O calor da Gado Certo vive no PAPEL (fundo/superfícies quentes), não na
   intensidade do texto nem no laranja. Corpo em ~9:1 (confortável, sem halation);
   laranja dosado a terracota, só na ação; hierarquia por PESO, não por 1px. */
:root{
  --bg:#F7F2EA;            /* papel quente — fundo do chat e base */
  --bg-agora:#F1EBDF;      /* superfície um degrau mais quente (adminbar, hero de pontos) */
  --wash:#FCF9F3;          /* superfície de card (mais clara que o bg) */
  --wash-2:#EFE7DA;        /* superfície interna (resposta sugerida, bloco citado) */
  --hair:rgba(58,44,28,.12);
  --hair-soft:rgba(58,44,28,.07);

  --ink:#2E2620;           /* títulos, strong, números — marrom-tinta forte (13:1) */
  --read:#4A4038;          /* CORPO DE LEITURA — ~9:1, calmo para turnos longos */
  --soft:#574E44;          /* leitura secundária (~7:1) */
  --muted:#6E6558;         /* meta (subtítulos, previews, horários) */
  --faint:#726A5B;         /* rótulos discretos — nudge p/ passar AA (~4.6:1) */

  --brand:#B04E17;         /* terracota — laranja Gado Certo dessaturado */
  --brand-hi:#CC6A2E;      /* hover/realce do acento */
  --brand-ink:#FCF9F3;     /* texto sobre a marca (claro) */
  --brand-wash:rgba(176,78,23,.08);

  --up:#3F7A44;            /* em dia / ao vivo */
  --warn:#98680F;          /* atenção */
  --down:#B23A2E;          /* vencido */

  /* elevação: no claro a profundidade vem de sombra suave, NÃO de brilho branco
     interno (--sheen) nem de glow — esses eram truques do tema escuro. */
  --shadow-sm:0 1px 2px rgba(60,40,20,.05);
  --shadow-md:0 10px 28px -16px rgba(60,40,20,.26);
  --sheen:0 0 0 0 transparent;   /* era inset branco; some no claro */
  --glow:transparent;

  /* aliases legados: rulesets preservados (drawer, composer, feedback…) repintados */
  --s1:#F1EBDF; --s2:#FCF9F3; --s3:#EFE7DA;
  --border:#E4DBCC; --border-2:#D8CDBB;
  --hairline:var(--hair);
  --text:var(--ink); --text-2:var(--soft);

  --mono:'JetBrains Mono',ui-monospace,monospace;
  --sans:'Inter',system-ui,sans-serif;
  --r-sm:10px; --r-md:14px; --r-lg:20px; --r-xl:26px;
  --ease:cubic-bezier(.2,.75,.3,1);
  --dur-1:.15s; --dur-2:.2s; --dur-3:.28s;
  --composer-h:150px;   /* atualizado por JS no mobile (composer fixo) */
}

*{margin:0;padding:0;box-sizing:border-box;}
html{background:var(--bg);-webkit-text-size-adjust:100%;}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-size:15px;line-height:1.55;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
.num,.mono{font-family:var(--mono);font-weight:500;font-variant-numeric:tabular-nums;letter-spacing:-.01em;}
button{font-family:var(--sans);cursor:pointer;background:none;border:none;color:inherit;}
a{color:inherit;text-decoration:none;}
svg{display:block;}
button:focus-visible,a:focus-visible,textarea:focus-visible,select:focus-visible,summary:focus-visible{
  outline:2px solid var(--brand);outline-offset:2px;border-radius:8px;
}
[hidden]{display:none !important;}
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* glow quente ambiente (só mobile, atrás do cabeçalho) */
.glow{
  position:absolute;top:0;left:0;right:0;height:210px;pointer-events:none;z-index:0;
  background:radial-gradient(260px 190px at 22% -30px,rgba(176,78,23,.07),transparent 74%);
}

/* ============ CABEÇALHO DESKTOP (topbar) ============ */
.topbar{
  min-height:60px;flex-shrink:0;
  display:flex;align-items:center;gap:13px;
  padding:6px 22px;
  border-bottom:1px solid var(--hair);
  background:rgba(247,242,234,.82);
  position:relative;z-index:40;
}
.topbar-spacer{flex:1;}
.brandmark{
  width:32px;height:32px;border-radius:9px;flex-shrink:0;
  background:linear-gradient(150deg,var(--brand-hi),var(--brand));
  color:var(--brand-ink);
  font-family:var(--mono);font-size:12px;font-weight:700;
  display:flex;align-items:center;justify-content:center;
}
.brand-txt h1{font-size:15.5px;font-weight:660;letter-spacing:-.01em;display:block;line-height:1.2;}
.brand-txt span{font-size:11.5px;color:var(--muted);display:flex;align-items:center;gap:6px;white-space:nowrap;}
/* estático: ferramenta de trabalho quer estabilidade visual (sem pulso infinito) */
.live-dot{
  width:7px;height:7px;border-radius:50%;background:var(--up);flex-shrink:0;
}
.who{display:flex;align-items:center;gap:10px;flex-shrink:0;}
.btn-sair{
  display:flex;align-items:center;justify-content:center;
  width:40px;height:40px;flex-shrink:0;
  border-radius:10px;border:1px solid var(--border);
  background:var(--wash);color:var(--muted);
  transition:color var(--dur-1),border-color var(--dur-1),background var(--dur-1);
}
.btn-sair:hover{color:var(--down);border-color:rgba(244,113,113,.4);background:rgba(244,113,113,.08);}
.btn-sair:active{transform:scale(.95);}
.who .id{text-align:right;line-height:1.25;}
.who .id b{font-size:13px;font-weight:600;display:block;}
.who .id span{font-size:11px;color:var(--muted);}
.avatar{
  width:36px;height:36px;border-radius:50%;flex-shrink:0;
  background:linear-gradient(160deg,#2C241E,#1A1512);
  border:1px solid var(--border);
  font-family:var(--mono);font-size:12px;font-weight:600;color:var(--brand-hi);
  display:flex;align-items:center;justify-content:center;
}

/* ticker legado — some no v3 (os contadores vivem nas seções) */
.ticker{display:none !important;}

/* ============ ADMINBAR (seletor de visão) ============ */
.adminbar{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:10px calc(20px + env(safe-area-inset-right,0px))
          10px calc(20px + env(safe-area-inset-left,0px));
  border-bottom:1px solid var(--hair);
  background:var(--bg-agora);
  position:relative;z-index:35;
}
.seg{
  display:flex;flex-wrap:wrap;gap:4px;  /* adminbar ganhou cadeiras de Head: 11 botões quebram linha em tela estreita */
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:999px;padding:4px;
}
.seg button{
  min-height:34px;padding:0 14px;position:relative;
  border:none;border-radius:999px;
  background:transparent;color:var(--muted);
  font-size:12.5px;font-weight:550;
  transition:background var(--dur-1),color var(--dur-1);
}
.seg button::after{content:"";position:absolute;inset:-5px 0;}
.seg button:hover{color:var(--ink);}
.seg button.on{background:var(--s3);color:var(--ink);font-weight:650;box-shadow:var(--shadow-sm);}
.seg-hint{font-size:11.5px;color:var(--faint);display:flex;align-items:center;gap:6px;}

/* ============ SHELL ============ */
.shell{position:relative;z-index:1;}

/* texto corrido dentro de um bloco de formulário/cartão (form da ligação) */
.d-desc{font-size:14.5px;line-height:1.62;color:var(--soft);}
.d-desc b{color:var(--ink);font-weight:600;}

/* linha de ações (botões lado a lado) */
.acts{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}

/* entrada escalonada */
.rise{animation:rise var(--dur-2) var(--ease) both;}
@keyframes rise{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}

/* ============ CHAT — leitura estilo Claude ============ */
.chat{background:var(--bg);}
.chat-scroll{scrollbar-width:thin;scrollbar-color:#3A322B transparent;}
.chat-inner{max-width:720px;margin:0 auto;display:flex;flex-direction:column;gap:24px;}
.divider{
  display:flex;align-items:center;gap:12px;color:var(--faint);
  font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  margin:10px 0 2px;
}
.divider::before,.divider::after{content:"";flex:1;height:1px;background:var(--hair);}

.msg{display:flex;flex-direction:column;}
.msg.bot{align-self:stretch;max-width:100%;}
.msg.me{align-self:flex-end;align-items:flex-end;max-width:82%;}
.bubble{overflow-wrap:break-word;min-width:0;}

/* usuário: bolha quente à direita */
.me .bubble{
  padding:12px 16px;font-size:15px;line-height:1.55;color:var(--read);
  background:var(--wash);border:1px solid var(--hair);
  border-radius:18px 18px 6px 18px;
}
.msg-time{
  display:inline-flex;align-items:center;gap:4px;
  font-family:var(--mono);font-size:10.5px;color:var(--faint);margin-top:5px;padding:0 4px;
}
.bot .msg-time{margin-top:10px;padding:0 2px;}
.msg-time svg{color:var(--muted);}

/* citação de contexto dentro da bolha do usuário */
.quote-ctx{
  display:flex;flex-direction:column;gap:1px;
  background:var(--wash-2);border-left:2px solid var(--brand);
  border-radius:4px 10px 10px 4px;padding:8px 11px;margin-bottom:9px;
}
.quote-ctx .q1{font-family:var(--mono);font-size:11.5px;font-weight:560;color:var(--brand-hi);}
.quote-ctx .q2{font-size:12.5px;color:var(--muted);}

/* NÚCLEO DE LEITURA — Inter 16/1.72, off-white, medida ~64ch */
.bot .who{display:flex;align-items:center;gap:9px;margin-bottom:12px;color:var(--muted);font-size:12.5px;font-weight:600;}
.bot .who .sp{width:22px;height:22px;border-radius:7px;background:linear-gradient(150deg,var(--brand-hi),var(--brand));display:flex;align-items:center;justify-content:center;color:var(--brand-ink);flex:none;}
.bot .who .sp svg{width:13px;height:13px;}
.bot .bubble{max-width:64ch;}
.bot .bubble p{font-size:15px;line-height:1.75;color:var(--read);letter-spacing:0;margin:0 0 1.15em;}
.bot .bubble p:last-child,.bot .bubble ol:last-child,.bot .bubble ul:last-child,
.bot .bubble blockquote:last-child,.bot .bubble table:last-child{margin-bottom:0;}
.bot .bubble strong{font-weight:640;color:var(--ink);}
.bot .bubble .num{color:var(--ink);font-weight:600;font-size:15px;}
/* lista numerada discreta — marcador círculo calmo (não quadrado laranja) */
.bot .bubble ol{list-style:none;counter-reset:p;margin:2px 0 1.05em;display:flex;flex-direction:column;gap:12px;padding:0;}
.bot .bubble ol li{counter-increment:p;position:relative;padding-left:30px;font-size:15px;line-height:1.66;color:var(--read);}
.bot .bubble ol li::before{
  content:counter(p);position:absolute;left:0;top:2px;width:21px;height:21px;border-radius:50%;
  background:var(--hair-soft);border:1px solid var(--hair);color:var(--soft);
  font-family:var(--mono);font-size:11px;font-weight:600;display:flex;align-items:center;justify-content:center;
}
.bot .bubble ul{list-style:none;margin:2px 0 1.05em;display:flex;flex-direction:column;gap:9px;padding:0;}
.bot .bubble ul li{position:relative;padding-left:20px;font-size:15px;line-height:1.66;color:var(--read);}
.bot .bubble ul li::before{content:"";position:absolute;left:4px;top:11px;width:5px;height:5px;border-radius:50%;background:var(--muted);}
/* citação quieta — borda macia, não itálico */
.bot .bubble blockquote{
  margin:2px 0 1.05em;padding:11px 16px;border-left:2px solid rgba(176,78,23,.4);
  background:rgba(176,78,23,.04);border-radius:0 10px 10px 0;
  font-size:15.5px;line-height:1.6;color:var(--read);font-style:normal;
}
.bot .bubble blockquote br+.bq-copy,.bot .bubble blockquote .bq-copy{margin-top:11px;}
.bq-copy{
  display:inline-flex;align-items:center;gap:7px;min-height:38px;padding:0 13px;
  border:1px solid rgba(176,78,23,.24);border-radius:10px;background:rgba(176,78,23,.06);
  font-family:var(--sans);font-size:13px;font-weight:600;color:var(--brand-hi);
  transition:background var(--dur-1);position:relative;
}
.bq-copy:hover{background:rgba(176,78,23,.12);}
.bq-copy.ok{color:var(--up);border-color:rgba(125,214,128,.35);background:rgba(125,214,128,.08);}
.bq-copy svg{width:13px;height:13px;}
/* cabeçalho de seção da resposta (### do modelo) */
.bot .bubble h4{margin:1.4em 0 .6em;font-size:14px;font-weight:650;letter-spacing:.01em;color:var(--ink);}
.bot .bubble h4:first-child{margin-top:0;}
.bot .bubble hr{border:0;border-top:1px solid var(--hair);margin:1.2em 0;}
/* tabela markdown — scroll interno (vertical e horizontal): a tabela lista o
   conjunto inteiro e quem limita a altura e o container, nao o conteudo */
.tblwrap{margin:2px 0 1.05em;border:1px solid var(--hair);border-radius:12px;overflow:auto;-webkit-overflow-scrolling:touch;max-height:min(430px,62vh);}
.bot .bubble table{border-collapse:collapse;width:100%;font-size:14px;line-height:1.45;}
.bot .bubble th{
  text-align:left;font-weight:620;font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);
  padding:9px 12px;background:var(--wash);border-bottom:1px solid var(--hair);white-space:nowrap;
  position:sticky;top:0;z-index:1;box-shadow:0 1px 0 var(--hair); /* a borda some no sticky com border-collapse; a sombra fica */
}
.bot .bubble td{padding:8px 12px;border-top:1px solid var(--hair);vertical-align:top;color:var(--read);}
.bot .bubble tbody tr:first-child td{border-top:0;}
.bot .bubble tbody tr:nth-child(even){background:rgba(236,230,221,.015);}
.bot .bubble td.cnum,.bot .bubble th.cnum{font-family:var(--mono);font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap;}
/* link inline pro CRM */
.crm-link{
  padding:0;font:inherit;cursor:pointer;color:var(--brand-hi);font-weight:600;
  text-decoration:underline;text-underline-offset:2px;text-decoration-color:rgba(176,78,23,.45);
}
.crm-link:hover{text-decoration-color:var(--brand);}
.crm-link:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:3px;}
/* CTA inline da resposta (read-action) */
.bubble-action{
  display:inline-flex;align-items:center;gap:9px;margin-top:4px;min-height:44px;padding:0 16px;border-radius:12px;
  background:var(--brand-wash);border:1px solid rgba(176,78,23,.22);color:var(--brand-hi);font-size:14px;font-weight:600;
  transition:background var(--dur-1);
}
.bubble-action svg{width:16px;height:16px;}
.bubble-action:hover{background:rgba(176,78,23,.14);}

/* caixa "o que você esperava?" */
.expect-box{margin-top:12px;display:flex;flex-direction:column;gap:8px;background:var(--wash);border:1px solid var(--hair);border-radius:var(--r-md);padding:12px;}
.expect-box textarea{background:var(--bg);border:1px solid var(--border);border-radius:10px;color:var(--ink);font-family:var(--sans);font-size:14px;line-height:1.5;padding:10px 12px;resize:vertical;min-height:56px;}
.expect-box textarea:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(176,78,23,.25);}
.expect-send{align-self:flex-end;min-height:40px;padding:0 16px;border-radius:10px;border:1px solid rgba(176,78,23,.35);background:rgba(176,78,23,.1);color:var(--brand-hi);font-size:13px;font-weight:600;}
.expect-send:hover{background:rgba(176,78,23,.16);}
.expect-send:disabled{opacity:.5;}
.expect-ok{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--up);}
.fb-expect{padding:4px 6px;min-height:30px;font-family:var(--sans);font-size:12px;color:var(--faint);text-decoration:underline;text-underline-offset:3px;position:relative;white-space:nowrap;}
.fb-expect::after{content:"";position:absolute;inset:-7px 0;}
.fb-expect:hover{color:var(--muted);}

/* rodapé da resposta: consultou + Ajudou? */
.bot-foot{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin-top:18px;padding:0 2px;font-size:12px;color:var(--muted);min-width:0;}
.src-label{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:var(--muted);white-space:nowrap;flex-shrink:0;}
.src-label svg{width:11px;height:11px;}
.src-chip{font-family:var(--mono);font-size:10px;font-weight:480;color:var(--muted);background:var(--wash);border:1px solid var(--border);border-radius:6px;padding:2px 6px;white-space:nowrap;max-width:110px;overflow:hidden;text-overflow:ellipsis;}
.fb{margin-left:auto;display:flex;align-items:center;gap:4px;flex-shrink:0;padding-left:4px;}
.fb-label{font-size:12px;color:var(--muted);margin-right:1px;white-space:nowrap;}
.fb-btn{width:30px;height:30px;display:flex;align-items:center;justify-content:center;border-radius:50%;border:1px solid var(--border);background:var(--wash);color:var(--muted);padding:0;position:relative;transition:transform var(--dur-1) var(--ease),color var(--dur-1);}
.fb-btn svg{width:14px;height:14px;}
.fb-btn::after{content:"";position:absolute;inset:-7px;}
.fb-btn:hover{color:var(--ink);}
.fb-btn:active{transform:scale(.9);}
.fb-btn.on{color:var(--up);border-color:rgba(125,214,128,.4);background:rgba(125,214,128,.08);}
.fb-btn:disabled{cursor:default;}
.fb-btn:disabled:not(.on){opacity:.6;}
.fb .ok{font-size:11.5px;color:var(--up);}
.fb .fb-err{font-size:11.5px;color:var(--down);}

/* digitando */
.typing{display:inline-flex;align-items:center;gap:5px;padding:6px 2px;}
.typing i{width:7px;height:7px;border-radius:50%;background:var(--muted);animation:blink 1.2s ease-in-out infinite;}
.typing i:nth-child(2){animation-delay:.18s;}
.typing i:nth-child(3){animation-delay:.36s;}
@keyframes blink{0%,60%,100%{opacity:.25;transform:translateY(0);}30%{opacity:1;transform:translateY(-3px);}}

/* pílula "novas mensagens" */
.new-msgs-wrap{display:flex;justify-content:center;z-index:15;pointer-events:none;}
.new-msgs{display:inline-flex;align-items:center;gap:7px;min-height:38px;padding:0 16px;border-radius:999px;background:linear-gradient(180deg,var(--brand-hi),var(--brand));color:var(--brand-ink);font-size:13px;font-weight:650;position:relative;pointer-events:auto;box-shadow:0 8px 22px -8px rgba(176,78,23,.5);transition:transform var(--dur-1) var(--ease);animation:rise var(--dur-2) var(--ease) both;}
.new-msgs::after{content:"";position:absolute;inset:-4px;}
.new-msgs:active{transform:scale(.94);}
.new-msgs .n{font-family:var(--mono);font-weight:700;}

/* ============ CHIPS + COMPOSER ============ */
.composer-block{border-top:1px solid var(--hair);background:linear-gradient(180deg,rgba(247,242,234,.6),var(--bg) 30%);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);z-index:20;}
.ctxbar{display:flex;align-items:center;gap:10px;max-width:720px;width:calc(100% - 32px);margin:12px auto 0;background:var(--wash-2);border:1px solid rgba(176,78,23,.2);border-left:2px solid var(--brand);border-radius:4px 12px 12px 4px;padding:8px 8px 8px 11px;}
.ctx-quote{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px;}
.ctx-quote .q1{font-size:11.5px;font-weight:560;color:var(--brand-hi);}
.ctx-quote .q2{font-size:12.5px;color:var(--muted);}
.ctx-x{width:32px;height:32px;border-radius:50%;flex-shrink:0;position:relative;background:var(--wash);color:var(--muted);display:flex;align-items:center;justify-content:center;}
.ctx-x::after{content:"";position:absolute;inset:-6px;}
.ctx-x:hover{color:var(--ink);}
/* os chips de sugestão saíram em 2026-07-25 (decisão do Imil): o compositor
   fica sozinho acima do teclado. Classes .chips/.chip removidas com eles. */
/* composer em CAIXA (estilo Claude): textarea em cima, controles embaixo */
.composer{display:flex;flex-direction:column;align-items:stretch;gap:2px;
  max-width:720px;width:calc(100% - 32px);
  margin:10px auto calc(14px + env(safe-area-inset-bottom,0px));padding:8px 10px 8px;
  background:var(--wash);border:1px solid var(--border-2);border-radius:22px;
  transition:border-color var(--dur-1),box-shadow var(--dur-1);}
.composer:focus-within{border-color:var(--brand);box-shadow:0 0 0 3px rgba(176,78,23,.3);}
.composer-controles{display:flex;align-items:center;gap:8px;padding:0 2px;}
.c-spacer{flex:1;}
#campo{min-height:52px;max-height:200px;background:none;border:0;border-radius:0;padding:8px 10px 4px;font-size:15.5px;line-height:1.45;color:var(--ink);font-family:var(--sans);resize:none;}
#campo::placeholder{color:var(--muted);}
#campo:focus{outline:none;}
.send{width:40px;height:40px;border-radius:50%;flex-shrink:0;background:linear-gradient(180deg,var(--brand-hi),var(--brand));color:var(--brand-ink);display:flex;align-items:center;justify-content:center;box-shadow:0 6px 18px -8px rgba(176,78,23,.5);transition:transform var(--dur-1) var(--ease),filter var(--dur-1);}
.send:hover{filter:brightness(1.06);}
.send:active{transform:scale(.9);}
.send:disabled{opacity:.45;box-shadow:none;cursor:default;}
.kbd-hint{font-family:var(--mono);font-size:10px;color:var(--faint);text-align:right;max-width:720px;margin:0 auto;padding:0 6px 10px;letter-spacing:.03em;}

/* chat header (contexto do lote) */
.chat-head{display:flex;align-items:center;gap:10px;flex-shrink:0;}
.chat-head .ct{font-size:15px;font-weight:640;color:var(--ink);}
.ctx-chip{margin-left:auto;display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:11px;color:var(--brand-hi);background:rgba(176,78,23,.08);border:1px solid rgba(176,78,23,.2);padding:4px 11px;border-radius:20px;}
.ctx-chip .k{width:6px;height:6px;border-radius:50%;background:var(--brand);flex:none;}

/* ============ DRAWER / BOTTOM SHEET (esqueleto compartilhado) ============ */
.scrim{position:fixed;inset:0;z-index:50;background:rgba(46,38,32,.38);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);}
.drawer{background:var(--wash);display:flex;flex-direction:column;min-height:0;}
.grabber{width:38px;height:5px;border-radius:3px;background:#453A30;margin:8px auto 2px;flex-shrink:0;}
.drawer-head{display:flex;align-items:center;gap:12px;padding:14px 20px 16px;border-bottom:1px solid var(--hair);flex-shrink:0;}
.drawer-head .tile{width:38px;height:38px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex:none;}
.tile-brand{background:rgba(176,78,23,.12);border:1px solid rgba(176,78,23,.24);color:var(--brand);}
.drawer-head .t{flex:1;}
.drawer-head .t .kicker{display:block;color:var(--warn);font-size:10.5px;font-weight:650;letter-spacing:.08em;text-transform:uppercase;}
.drawer-head .t h3{font-size:18px;font-weight:650;letter-spacing:-.01em;margin-top:1px;color:var(--ink);}
.bs-close{width:32px;height:32px;border-radius:50%;position:relative;flex-shrink:0;background:var(--wash-2);color:var(--muted);display:flex;align-items:center;justify-content:center;}
.bs-close::after{content:"";position:absolute;inset:-6px;}
.bs-close:hover{color:var(--ink);}
.drawer-body{flex:1;overflow-y:auto;padding:18px 20px;min-height:0;}
.field-label{font-size:11.5px;font-weight:650;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);margin-bottom:8px;display:flex;align-items:baseline;}
.field-label + .field-label{margin-top:16px;}
.field-label .counter{margin-left:auto;font-size:10.5px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--faint);}
.hint{font-size:11.5px;color:var(--faint);margin-top:8px;display:flex;align-items:flex-start;gap:6px;line-height:1.5;}
.hint svg{flex-shrink:0;margin-top:2px;}
.qa{min-height:44px;display:inline-flex;align-items:center;justify-content:center;gap:7px;border-radius:var(--r-md);font-size:14px;font-weight:600;border:1px solid var(--border);background:var(--wash);color:var(--ink);transition:transform var(--dur-1) var(--ease),background var(--dur-1),filter var(--dur-1);}
.qa:hover{background:var(--s3);}
.qa:active{transform:scale(.96);}
.qa.primary{background:linear-gradient(180deg,var(--brand-hi),var(--brand));border:none;color:var(--brand-ink);box-shadow:0 6px 18px -8px rgba(176,78,23,.5);}
.qa.primary:hover{filter:brightness(1.06);}
.qa:disabled{opacity:.45;box-shadow:none;cursor:default;transform:none;filter:none;}
.ativas-head{display:flex;align-items:center;gap:8px;margin:26px 0 10px;font-size:11.5px;font-weight:650;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);}
.ativas-head::after{content:"";flex:1;height:1px;background:var(--hair);}
.ativas{display:flex;flex-direction:column;gap:8px;}
.ativas .vazio-lista{font-size:12.5px;color:var(--faint);padding:6px 2px;}
.ativa{display:flex;align-items:flex-start;gap:11px;background:var(--wash-2);border:1px solid var(--border);border-radius:var(--r-md);padding:12px 13px;}
.ativa .txt{flex:1;min-width:0;}
.ativa .txt p{font-size:13px;line-height:1.5;color:var(--read);}
.ativa .meta-row{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:10.5px;color:var(--faint);margin-top:6px;flex-wrap:wrap;}
.icon-btn{width:32px;height:32px;min-width:32px;border-radius:9px;position:relative;border:1px solid var(--border);background:transparent;color:var(--muted);display:flex;align-items:center;justify-content:center;transition:color var(--dur-1),border-color var(--dur-1);}
.icon-btn::after{content:"";position:absolute;inset:-6px;}
.icon-btn:hover{color:var(--down);border-color:rgba(244,113,113,.4);}
.drawer-foot{flex-shrink:0;padding:12px 20px calc(16px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--hair);font-size:11.5px;color:var(--faint);display:flex;align-items:center;gap:7px;}
.bsheet:focus,.drawer:focus{outline:none;}

/* ============ LAYOUTS ============ */

/* ---- desktop >900px: topbar + [conversas | chat] + drawer ---- */
@media (min-width:901px){
  html,body{height:100%;}
  body{display:flex;flex-direction:column;overflow:hidden;}
  .glow{display:none;}
  .mob-only{display:none !important;}
  .shell{flex:1;display:flex;min-height:0;}
  .chat{flex:1;display:flex;flex-direction:column;min-width:0;min-height:0;position:relative;}
  .chat-head{height:56px;padding:0 26px;border-bottom:1px solid var(--hair);}
  .chat-scroll{flex:1;overflow-y:auto;min-height:0;padding:30px 32px 8px;}
  .composer-block{flex-shrink:0;background:rgba(247,242,234,.85);}
  .ctxbar,.composer,.kbd-hint{max-width:720px;margin-left:auto;margin-right:auto;width:100%;}
  .ctxbar{margin-top:12px;}
  .composer{margin:10px auto 8px;}
  .new-msgs-wrap{position:relative;height:0;}
  .new-msgs{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);}
  .new-msgs:active{transform:translateX(-50%) scale(.94);}
  .msg.me{max-width:78%;}
  .me .bubble{font-size:14.5px;}
  .drawer{width:400px;flex-shrink:0;border-left:1px solid #332A23;box-shadow:-24px 0 60px -34px rgba(0,0,0,.75);animation:slide-in var(--dur-3) var(--ease) both;position:relative;z-index:20;}
  .scrim{display:none !important;}
  .grabber{display:none;}
  /* modal de confirmação de ligação (SDR): mesmo drawer, um pouco mais largo
     porque hospeda a transcrição + a busca de contato. Só no desktop: no
     mobile a folha usa a largura cheia (.drawer não tem width fixo lá). */
  .conf-modal{width:520px;}

  /* "Conectar WhatsApp" hospeda a tabela de identidades dos grupos — 6 colunas,
     duas delas com campo de texto e uma com botão. Em 400px o telefone e o
     "Salvar" ficavam fora da folha. Aqui ela nasce mais larga (proporcional à
     janela, para não espremer o chat em telas pequenas) e é AJUSTÁVEL: o canto
     inferior direito arrasta. O `overflow:hidden` é o que habilita o `resize`;
     a rolagem vertical continua no `.drawer-body`, que tem o `overflow-y` dele. */
  #wpp-panel{width:clamp(400px, 44vw, 720px);min-width:400px;max-width:92vw;
    overflow:hidden;resize:horizontal;}
}
@keyframes slide-in{from{transform:translateX(60px);opacity:.5;}to{transform:none;opacity:1;}}

/* desktop: esconde o cabeçalho mobile do chat */
@media (min-width:901px){
  .chat-mobtop{display:none !important;}
}

/* ---- mobile ≤900px: chat em tela cheia (chat-first, 2026-07-24) ---- */
@media (max-width:900px){
  .topbar{display:none;}
  .desk-only{display:none !important;}
  .seg{flex:1;}
  .seg button{flex:1;padding:0 6px;}
  .shell{display:block;}
  /* a adminbar virou item do menu lateral: some no celular */
  .adminbar{display:none !important;}

  .chat{display:block;}
  .chat{min-height:100dvh;background:var(--bg);}
  .chat-mobtop{
    position:sticky;top:0;z-index:6;
    display:flex;align-items:center;gap:10px;
    padding:calc(14px + env(safe-area-inset-top,0px)) 20px 12px;
    background:rgba(252,249,243,.92);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
    border-bottom:1px solid var(--hair);
  }
  .chat-mobtop .ct{font-size:19px;font-weight:600;letter-spacing:-.02em;color:var(--ink);}
  .chat-scroll{overflow:visible;}
  .chat-inner{padding:16px 18px 0;padding-bottom:calc(var(--composer-h) + 12px);max-width:720px;}

  /* bottom:0 de propósito — o respiro de baixo já vem do próprio .composer
     (padding 14px + env(safe-area-inset-bottom)); somar o inset aqui de novo
     abre uma faixa morta de ~34px no iPhone. */
  .composer-block{position:fixed;left:0;right:0;bottom:0;padding-left:env(safe-area-inset-left,0px);padding-right:env(safe-area-inset-right,0px);}
  .ctxbar,.composer,.kbd-hint{max-width:720px;margin-left:auto;margin-right:auto;}
  .ctxbar{margin-top:12px;}
  .kbd-hint{display:none;}
  /* o mobile do seletor de modo mora junto do proprio componente (perto do fim
     do arquivo) — aqui em cima a regra base dele ainda nem foi lida. */
  .new-msgs-wrap{position:fixed;left:0;right:0;bottom:calc(var(--composer-h) + 12px);padding-left:env(safe-area-inset-left,0px);padding-right:env(safe-area-inset-right,0px);}

  .drawer{position:fixed;left:0;right:0;bottom:0;z-index:60;max-height:88dvh;background:var(--wash);border:1px solid #332A23;border-bottom:none;border-radius:var(--r-xl) var(--r-xl) 0 0;box-shadow:0 -18px 50px -20px rgba(0,0,0,.7);animation:sheet-up var(--dur-3) var(--ease) both;padding-left:env(safe-area-inset-left,0px);padding-right:env(safe-area-inset-right,0px);}
  .drawer-head{border-bottom:none;padding-top:8px;}
  #campo{font-size:16px;}   /* iOS: <16px dispara auto-zoom */
}
@keyframes sheet-up{from{transform:translateY(40px);opacity:.4;}to{transform:none;opacity:1;}}

/* dedo em tela grande: alvo ≥44 */
@media (pointer:coarse){
  .qa{min-height:44px;}
}

/* ============ MOTION OFF ============ */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001s !important;
    animation-delay:0s !important;
    animation-iteration-count:1 !important;
    transition-duration:.001s !important;
    scroll-behavior:auto !important;
  }
}

/* ============ FILA DE MELHORIAS (gestão) ============ */
/* botão no cabeçalho (topbar do desktop): ghost discreto */
.btn-ghost-head{
  display:inline-flex;align-items:center;gap:7px;flex-shrink:0;
  min-height:38px;padding:0 13px;border-radius:999px;
  border:1px solid var(--border);background:var(--wash);
  color:var(--soft);font-size:13px;font-weight:600;
  transition:color var(--dur-1),border-color var(--dur-1),background var(--dur-1);
}
.btn-ghost-head:hover{color:var(--ink);border-color:var(--border-2);}
.head-badge{
  min-width:18px;height:18px;padding:0 5px;border-radius:99px;
  background:var(--brand);color:var(--brand-ink);
  font-size:11px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;
}

/* filtro de status no drawer */
.seg-filtro{display:flex;gap:4px;background:var(--bg);border:1px solid var(--border);border-radius:999px;padding:4px;margin:4px 0 10px;}
.seg-filtro button{flex:1;min-height:32px;border:none;border-radius:999px;background:transparent;color:var(--muted);font-size:12.5px;font-weight:550;}
.seg-filtro button.on{background:var(--s3);color:var(--ink);font-weight:650;}

/* cards da fila */
.mlh{background:var(--wash);border:1px solid var(--hair);border-radius:var(--r-md);padding:13px 14px;margin-bottom:10px;}
.mlh.feita{opacity:.62;}
.mlh-top{display:flex;align-items:center;gap:8px;margin-bottom:7px;}
.mlh-cat{font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--brand-hi);background:rgba(176,78,23,.1);border:1px solid rgba(176,78,23,.22);border-radius:20px;padding:2px 8px;}
.mlh-quem{font-size:11.5px;color:var(--muted);margin-left:auto;}
.mlh-ordem{font-size:14px;line-height:1.5;color:var(--read);}
.mlh-esp{font-size:12.5px;line-height:1.45;color:var(--muted);margin-top:6px;font-style:italic;}
.mlh-foot{display:flex;align-items:center;gap:10px;margin-top:11px;}
.mlh-ok{font-size:12.5px;font-weight:600;color:var(--up);}
.mlh-ferr{font-size:11px;color:var(--muted);}
.mlh-btn{min-height:34px;padding:0 13px;border-radius:9px;border:1px solid var(--border);background:none;color:var(--soft);font-size:12.5px;font-weight:600;margin-left:auto;}
.mlh-btn:hover{color:var(--ink);border-color:var(--border-2);}
.mlh-btn.primary{background:rgba(176,78,23,.1);border-color:rgba(176,78,23,.35);color:var(--brand);}
.mlh-btn.primary:hover{background:rgba(176,78,23,.16);}
.mlh-motivo{font-size:12.5px;line-height:1.45;color:var(--muted);margin-top:8px;padding-left:9px;border-left:2px solid rgba(176,78,23,.35);}
.mlh-nota{font-size:12.5px;color:var(--muted);}
.mlh-acoes{margin-left:auto;display:flex;align-items:center;gap:8px;}
.mlh-acoes .mlh-btn{margin-left:0;}
.mlh-orient-box{margin-top:10px;display:flex;flex-direction:column;gap:8px;}
.mlh-orient{width:100%;background:var(--wash);border:1px solid var(--hair);border-radius:var(--r-md);padding:9px 11px;color:var(--read);font:inherit;font-size:13px;line-height:1.45;resize:vertical;}
.mlh-orient:focus{outline:none;border-color:rgba(176,78,23,.45);}
.seg-filtro button{white-space:nowrap;}

/* minhas solicitacoes (pontos-panel) */
.sol{background:var(--wash);border:1px solid var(--hair);border-radius:var(--r-md);padding:11px 12px;margin-bottom:8px;}
.sol-top{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:6px;}
.sol-chip{font-size:11.5px;padding:2px 9px;border-radius:999px;border:1px solid var(--hair);color:var(--muted);}
.sol-chip.ok{color:var(--up);border-color:var(--up);}
.sol-chip.warn{color:var(--down);border-color:var(--down);}
.sol-chip.hot{color:var(--brand);border-color:var(--brand);font-weight:600;}
.sol-quando{font-size:11.5px;color:var(--faint);flex-shrink:0;}
.sol-txt{font-size:13px;line-height:1.5;color:var(--read);white-space:pre-wrap;}
.sol-txt.clamp{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
.sol-mais{background:none;border:none;padding:2px 0;font-size:12px;color:var(--brand);cursor:pointer;}
.sol-acoes{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap;}
.sol-acoes .mlh-btn{margin-left:0;}
.sol-acoes .expect-box{flex:1 1 100%;}

/* ============ BANNER DE AMBIENTE (só staging) ============ */
.env-banner{
  position:fixed;top:0;left:0;right:0;z-index:200;
  background:repeating-linear-gradient(-45deg,#8A5A00,#8A5A00 14px,#6E4700 14px,#6E4700 28px);
  color:#FFE9C2;text-align:center;
  font-size:12px;font-weight:700;letter-spacing:.08em;
  padding:5px 12px;
  border-bottom:1px solid rgba(255,200,97,.4);
}
body.com-env-banner .topbar{margin-top:27px;}
body.com-env-banner .glow{top:27px;}
@media (max-width:900px){
  body.com-env-banner .tela{padding-top:27px;}
}

/* ============ CARTÃO DE ESCRITA NO CRM (confirmação humana) ============ */
.escreve-card{
  margin-top:12px;display:flex;flex-direction:column;gap:9px;
  background:var(--wash);border:1px solid rgba(176,78,23,.28);
  border-radius:var(--r-md);padding:13px 14px;max-width:64ch;
}
.escreve-card.fim{border-color:var(--hair);}
.esc-kicker{
  font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--brand-hi);
}
.esc-alvo{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.esc-lote{font-size:13px;color:var(--ink);font-weight:600;}
.esc-meta{font-size:12px;color:var(--muted);}
.esc-tipo{
  font-size:11.5px;font-weight:650;color:var(--read);
  background:var(--wash-2);border:1px solid var(--hair);border-radius:20px;padding:2px 9px;
}
.escreve-card textarea{
  width:100%;resize:vertical;min-height:64px;
  background:var(--bg);border:1px solid var(--border);border-radius:10px;
  color:var(--read);font-family:var(--sans);font-size:14px;line-height:1.55;
  padding:9px 11px;
}
.escreve-card textarea:focus{outline:2px solid var(--brand);outline-offset:1px;}
.esc-nota{font-size:11.5px;color:var(--faint);font-style:italic;}
.esc-acoes{display:flex;gap:9px;justify-content:flex-end;}
.esc-btn{
  min-height:38px;padding:0 15px;border-radius:10px;
  border:1px solid var(--border);background:none;
  color:var(--soft);font-size:13px;font-weight:600;
}
.esc-btn:hover{color:var(--ink);border-color:var(--border-2);}
.esc-btn.primary{
  border:none;background:linear-gradient(180deg,var(--brand-hi),var(--brand));
  color:var(--brand-ink);font-weight:650;
  box-shadow:0 5px 14px -7px rgba(176,78,23,.5);
}
.esc-btn.primary:hover{filter:brightness(1.06);}
.esc-btn:disabled{opacity:.5;cursor:default;}
.esc-ok{
  display:flex;align-items:center;gap:8px;
  font-size:13.5px;font-weight:600;color:var(--up);
}

/* status curto ao lado dos pontinhos ("consultando meus_lotes…") */
.typing .typing-status{margin-left:9px;font-size:12px;color:var(--muted);font-style:italic;}
.typing.lida-meio{display:flex;margin-top:6px;padding:2px 0;}
/* Selo de aprendizado do copiloto no chat (hoje: [entrevista:concluida] do
   playbook do SDR): cor PROPRIA (indigo de estudo, fora da paleta terracota
   da conversa) — e aprendizado do copiloto, nao atendimento */
.aprendizado{margin:10px 0 4px;padding:10px 12px;border-radius:12px;
  background:#EEF0FB;border:1px solid #C9CFF2;border-left:4px solid #5B6ACF;}
.apr-tag{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.4px;
  text-transform:uppercase;color:#4553B8;margin-bottom:4px;}
.apr-nota{font-size:11px;color:#7079B8;font-style:italic;}
/* ============ COPIAR: resposta inteira + tabela para o Excel ============ */
/* no rodapé da mensagem, o copiar é discreto (vira laranja no hover/ok) */
.resp-copy.bq-copy{
  min-height:34px;padding:0 11px;font-size:12.5px;
  border-color:var(--border);background:none;color:var(--muted);
}
.resp-copy.bq-copy:hover{color:var(--brand-hi);border-color:rgba(176,78,23,.3);background:rgba(176,78,23,.06);}
.resp-copy.bq-copy.ok{color:var(--up);border-color:rgba(125,214,128,.35);background:rgba(125,214,128,.08);}
/* barra da tabela: botão alinhado à direita, colado na tabela */
.tbl-acao{display:flex;justify-content:flex-end;margin:-6px 0 14px;}
.tbl-copy{
  display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:0 11px;
  border:1px solid var(--border);border-radius:9px;background:none;
  font-family:var(--sans);font-size:12px;font-weight:600;color:var(--muted);
  transition:background var(--dur-1),color var(--dur-1);
}
.tbl-copy:hover{color:var(--brand-hi);border-color:rgba(176,78,23,.3);background:rgba(176,78,23,.06);}
.tbl-copy.ok{color:var(--up);border-color:rgba(125,214,128,.35);background:rgba(125,214,128,.08);}

/* modo sombra: aviso de que a escrita vai para o banco de teste */
.escreve-card.teste{border-color:rgba(255,200,97,.4);}
.esc-teste{
  font-size:11.5px;font-weight:600;color:var(--warn);
  background:rgba(255,200,97,.08);border:1px solid rgba(255,200,97,.25);
  border-radius:8px;padding:5px 9px;
}

/* ============ VÍDEO DO LOTE — miniatura sob demanda + compartilhar ============ */
.lote-video{margin:.4em 0 1.1em;}
.lv-row{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap;}
.lv-midia{width:264px;max-width:100%;}
/* miniatura: pôster leve + ▶; o MP4 só carrega no clique */
.lv-thumb{
  display:block;position:relative;width:100%;padding:0;cursor:pointer;
  border:1px solid var(--hair);border-radius:var(--r-md);overflow:hidden;
  background:var(--wash-2);aspect-ratio:16/10;line-height:0;
  transition:border-color var(--dur-1);
}
.lv-midia video{
  width:100%;display:block;border-radius:var(--r-md);
  background:var(--wash-2);border:1px solid var(--hair);aspect-ratio:16/10;object-fit:cover;
}
/* botão de compartilhar no WhatsApp (verde reconhecível, dosado) */
.lv-share{
  display:inline-flex;align-items:center;gap:8px;min-height:38px;padding:0 14px;
  border-radius:10px;border:1px solid rgba(37,163,86,.4);background:rgba(37,211,102,.09);
  color:#1B7A42;font-family:var(--sans);font-size:13px;font-weight:600;cursor:pointer;
  transition:background var(--dur-1);
}
.lv-share:hover{background:rgba(37,211,102,.16);}
.lv-share svg{color:#25A356;}
.lv-thumb:hover{border-color:var(--border-2);}
.lv-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.lv-thumb.lv-sem-poster{display:flex;align-items:center;justify-content:center;}
.lv-rotulo{font-size:12px;color:var(--muted);font-weight:600;line-height:1.2;}
.lv-play{
  position:absolute;inset:0;margin:auto;width:48px;height:48px;border-radius:50%;
  background:rgba(20,14,8,.48);border:1.5px solid rgba(255,255,255,.85);
  display:flex;align-items:center;justify-content:center;
  transition:background var(--dur-1),transform var(--dur-1);
}
.lv-thumb:hover .lv-play{background:rgba(176,78,23,.9);transform:scale(1.06);}
.lv-play::before{
  content:"";border-style:solid;border-width:8px 0 8px 13px;
  border-color:transparent transparent transparent #fff;margin-left:3px;
}
/* ao tocar, a mídia cresce da miniatura para uma largura confortável de leitura */
.lv-midia.lv-tocando{width:100%;max-width:60ch;}
.lv-load,.lv-erro{
  font-size:12.5px;color:var(--muted);padding:12px;text-align:center;max-width:264px;
  background:var(--wash);border:1px solid var(--hair);border-radius:var(--r-md);
}
.lv-erro{color:var(--faint);}

/* ── ponte call-tracker: card de ligação ── */
.lig-form{display:flex;flex-direction:column;gap:10px;padding:4px 0;}
.lig-campo{display:flex;flex-direction:column;gap:4px;}
.lig-campo label{font-size:12px;font-weight:600;color:var(--faint);}
.lig-campo input[type="text"],.lig-campo textarea{
  width:100%;padding:8px 10px;border:1px solid var(--border);
  border-radius:var(--r-sm);font:inherit;font-family:var(--sans);
  background:var(--bg);color:var(--read);
}
.lig-campo input[type="text"]:focus,.lig-campo textarea:focus{
  outline:2px solid var(--brand);outline-offset:1px;
}
.lig-lotes{display:flex;flex-wrap:wrap;gap:8px;}
.lig-lote{
  display:inline-flex;align-items:center;gap:5px;
  padding:4px 10px;border:1px solid var(--border);
  border-radius:999px;font-size:13px;color:var(--soft);cursor:pointer;
}
.lig-lote:has(input:checked){
  border-color:rgba(176,78,23,.4);background:var(--brand-wash);color:var(--ink);
}
.lig-add{
  width:88px;padding:4px 8px;border-radius:999px;
  border:1px dashed var(--border-2);font:inherit;font-family:var(--sans);
  background:var(--wash);color:var(--soft);
}
.lig-erro{color:var(--down);font-size:13px;min-height:1em;}
.lig-trecho{
  display:flex;flex-direction:column;gap:4px;
  padding:8px 10px;margin-bottom:6px;
  border:1px solid var(--hair);border-radius:var(--r-sm);
  background:var(--wash);
}
.lig-trecho-rotulo{
  font-size:11px;font-weight:600;color:var(--faint);
  text-transform:uppercase;letter-spacing:.02em;
}
.lig-trecho-texto{
  font-size:12.5px;color:var(--muted);white-space:pre-wrap;
  max-height:120px;overflow-y:auto;
}
.lig-codigo{
  align-self:flex-start;
  font-family:var(--mono);font-size:12px;font-weight:600;color:var(--brand-hi);
  background:var(--wash);border:1px solid var(--hair);border-radius:999px;
  padding:3px 11px;letter-spacing:.02em;
}
.lig-codigo[title]{cursor:pointer;}
.lig-codigo[title]:hover{background:var(--wash-2);}
.lig-transcricao{
  border:1px solid var(--hair);border-radius:var(--r-md);
  background:var(--wash);padding:10px 12px;
  max-height:240px;overflow:auto;
}
.lig-transcricao .lig-trecho-texto{max-height:none;overflow:visible;}
.lig-ver-tudo{align-self:flex-start;margin-top:6px;padding:2px 0;border:none;background:none;
  color:var(--faint);font-size:12.5px;font-weight:600;cursor:pointer;}
.lig-ver-tudo:hover{color:var(--ink);}

/* ============ CONECTAR WHATSAPP (gestão) — QR + status ============ */
/* ícone da marca (mesmo verde já usado em .lv-share, "Enviar no WhatsApp") */
.wpp-btn-head svg{color:#25A356;}
.tile-wpp{background:rgba(37,211,102,.1);border:1px solid rgba(37,163,86,.28);color:#1B7A42;}
.wpp-input{
  width:100%;min-height:44px;background:var(--bg);border:1px solid var(--border-2);
  border-radius:var(--r-md);padding:11px 14px;margin-bottom:14px;
  font-size:13.5px;color:var(--ink);font-family:var(--sans);transition:border-color var(--dur-1);
}
.wpp-input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(176,78,23,.25);}
.wpp-input::placeholder{color:var(--muted);}
.wpp-gerar{width:100%;}
.wpp-estado:not(:empty){margin-top:18px;display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;}
.wpp-carregando{font-size:13px;color:var(--muted);padding:8px 0;}
.wpp-erro{font-size:12.5px;color:var(--down);}
/* fundo branco fixo: o QR (preto sobre branco) precisa de contraste garantido
   independente do papel quente do tema */
.wpp-qr{width:220px;max-width:100%;border-radius:var(--r-md);border:1px solid var(--hair);background:#fff;padding:10px;}
.wpp-aguardando{font-size:13px;color:var(--muted);line-height:1.5;}
.wpp-ok{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:650;color:var(--up);}
.wpp-desconectar{border-color:rgba(244,113,113,.35);color:var(--down);}
.wpp-desconectar:hover{background:rgba(244,113,113,.08);}

/* ============ IDENTIDADES DOS GRUPOS (gestão) — curadoria @lid -> pessoa ============ */
.wpp-ids-div{margin-top:22px;padding-top:18px;border-top:1px solid var(--hair);}
.wpp-ids-lista{margin-top:8px;}
.wpp-ids-carregando{font-size:12.5px;color:var(--muted);padding:8px 0;}
.wpp-ids-erro{font-size:12.5px;color:var(--down);padding:8px 0;}
.wpp-ids-vazio{font-size:12.5px;color:var(--faint);padding:8px 0;}
.wpp-ids-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;}
.wpp-ids-table{width:100%;border-collapse:collapse;font-size:12.5px;}
.wpp-ids-table th{text-align:left;font-size:10px;font-weight:650;letter-spacing:.05em;text-transform:uppercase;color:var(--faint);padding:0 8px 6px 4px;white-space:nowrap;}
.wpp-ids-table td{padding:6px 8px 6px 4px;border-top:1px solid var(--hair);vertical-align:middle;}
.wpp-ids-table tr:first-child td{border-top:0;}
/* A dica é o pushname visto no grupo — é POR ELA que a gestão reconhece quem é a
   pessoa, então não pode ser cortada: em vez de truncar com reticências, o nome
   quebra em mais de uma linha. `overflow-wrap:anywhere` cobre o nome colado sem
   espaço (e-mail, apelido longo), que senão alargaria a tabela inteira. */
.wpp-ids-dica{color:var(--soft);min-width:130px;max-width:250px;
  white-space:normal;overflow-wrap:anywhere;}
.wpp-ids-msgs,.wpp-ids-ultima{color:var(--muted);white-space:nowrap;}
.wpp-ids-in{width:100%;min-width:82px;background:var(--bg);border:1px solid var(--border-2);border-radius:8px;padding:6px 8px;font-size:12.5px;color:var(--ink);font-family:var(--sans);}
.wpp-ids-in:focus{outline:none;border-color:var(--brand);}
.wpp-ids-btn{min-height:30px;padding:0 11px;border-radius:8px;border:1px solid var(--border);background:none;color:var(--soft);font-size:12px;font-weight:600;white-space:nowrap;}
.wpp-ids-btn:hover{color:var(--ink);border-color:var(--border-2);}
.wpp-ids-btn.ok{border-color:rgba(125,214,128,.35);color:var(--up);}
/* agrupamento por dono da fila "Contatos por identificar", escopo=todos */
.wpp-grupo-dono{display:flex;align-items:center;gap:8px;margin:14px 0 6px;font-size:12.5px;font-weight:600;color:var(--soft);}
.wpp-grupo-dono .n{min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--brand);color:var(--brand-ink);font-size:11px;display:inline-flex;align-items:center;justify-content:center;}
/* nota da secao final de LIDs (numeros ocultos), logo abaixo do cabecalho */
.wpp-lid-nota{font-size:12px;color:var(--muted);margin:2px 0 8px;}

/* ============ CONEXÕES (gestão) — Evolution + call-tracker, só leitura ============ */
.wpp-conx-lista{margin-top:8px;}
.conx-grupo{font-size:10px;font-weight:650;letter-spacing:.05em;text-transform:uppercase;color:var(--faint);margin:12px 0 4px;}
.conx-grupo:first-child{margin-top:2px;}
.conx-row{display:flex;align-items:center;gap:10px;padding:7px 2px;border-top:1px solid var(--hair);}
.conx-row:first-of-type,.conx-grupo + .conx-row{border-top:0;}
.conx-info{min-width:0;flex:1;}
.conx-main{font-size:13px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.conx-sub{font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px;}
.conx-sit{display:inline-flex;align-items:center;gap:6px;flex-shrink:0;font-size:11.5px;font-weight:600;color:var(--muted);}
.conx-dot{width:8px;height:8px;border-radius:50%;background:var(--faint);flex-shrink:0;}
.conx-sit.on{color:var(--up);}
.conx-sit.on .conx-dot{background:var(--up);}
.conx-sit.warn{color:var(--warn);}
.conx-sit.warn .conx-dot{background:var(--warn);}
.conx-sit.off{color:var(--faint);}
.conx-sit.off .conx-dot{background:var(--faint);}

/* ── ingestao de WhatsApp: "esta entrando mensagem?" ──────────────────────────
   Sinal separado de "esta conectado": um container parado deixa
   `wpp_instancias.status` em `open` para sempre, entao a linha da Evolution
   seguia verde durante os 4 dias parados de 24/07. */
/* versao instalada de cada maquina; ambar quando ficou atras da publicada */
.conx-versao{display:inline-block;margin-top:3px;font-family:var(--mono);font-size:10px;
  color:var(--faint);background:var(--wash-2);border-radius:4px;padding:1px 5px;}
.conx-versao.atrasada{color:var(--warn);background:rgba(152,104,15,.12);font-weight:600;}

.conx-ing{border:1px solid var(--hair);border-radius:var(--r-md);background:var(--wash);
  padding:10px 12px;margin:2px 0 4px;}
.conx-ing-topo{display:flex;align-items:center;gap:10px;}
.conx-ing-tit{flex:1;font-size:12.5px;font-weight:650;color:var(--ink);}
.conx-ing-sub{font-size:11.5px;color:var(--muted);margin-top:4px;line-height:1.4;
  white-space:normal;}
.conx-ing-dica{font-size:11.5px;color:var(--read);margin-top:6px;line-height:1.45;}
/* Dois niveis, porque a gravidade e' diferente: >6h pode ser so' uma madrugada
   quieta (ambar, "olha isso"); >1 dia e' a pane que passou 4 dias despercebida
   em 24/07 (vermelho). O cinza de `.conx-sit.off` serve para maquina desligada
   — situacao normal —, entao aqui ele e' sobrescrito. */
.conx-ing.atencao{background:rgba(152,104,15,.07);border-color:rgba(152,104,15,.35);
  border-left:3px solid var(--warn);}
.conx-ing.atencao .conx-ing-tit{color:var(--warn);}
.conx-ing.parada{background:rgba(178,58,46,.07);border-color:rgba(178,58,46,.35);
  border-left:3px solid var(--down);}
.conx-ing.parada .conx-ing-tit{color:var(--down);}
.conx-ing.parada .conx-sit.off{color:var(--down);}
.conx-ing.parada .conx-sit.off .conx-dot{background:var(--down);}
.conx-ing.nd{border-style:dashed;}

/* ── painel "Minhas conexoes": WhatsApp + gravador no MESMO lugar ──────────
   Um painel so' para as conexoes do computador da pessoa (Imil, 2026-07-30):
   separado, ela tinha de saber em qual das duas telas procurar o que. Cada
   secao some sozinha para quem nao tem aquele direito. */
.conx-secao{padding-top:18px;margin-top:18px;border-top:1px solid var(--hair);}
.conx-secao:first-child{padding-top:0;margin-top:0;border-top:0;}
.conx-secao[hidden]{display:none;}
.conx-secao-tit{font-size:10px;font-weight:650;letter-spacing:.05em;
  text-transform:uppercase;color:var(--faint);margin-bottom:4px;}
/* uma linha dizendo O QUE a secao e': sem ela o painel parecia pedir a mesma
   coisa duas vezes ("sao duas instalacoes?", Imil 2026-07-30). */
.conx-secao-sub{font-size:11.5px;color:var(--muted);line-height:1.45;margin-bottom:12px;}

/* ── instalar o gravador de ligacoes (call-tracker) ───────────────────────── */
.ct-estado{margin-bottom:16px;}
.ct-status{display:flex;align-items:center;gap:10px;padding:10px 12px;
  border:1px solid var(--hair);border-radius:var(--r-md);background:var(--wash);}
.ct-status.on{background:rgba(63,122,68,.07);border-color:rgba(63,122,68,.3);}
.ct-maquina{font-size:11.5px;color:var(--muted);margin-left:auto;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ct-ok{font-size:12px;color:var(--up);margin-top:6px;padding-left:2px;}
/* passos numerados: aqui a numeracao E' informacao — a ordem importa de verdade
   (instalar antes de configurar, configurar antes de abrir). */
.ct-passos{display:flex;flex-direction:column;gap:16px;}
.ct-passo{display:flex;gap:11px;align-items:flex-start;}
.ct-num{flex-shrink:0;width:22px;height:22px;border-radius:50%;margin-top:1px;
  background:var(--wash-2);color:var(--soft);font-size:11.5px;font-weight:650;
  display:flex;align-items:center;justify-content:center;
  font-variant-numeric:tabular-nums;}
.ct-corpo{flex:1;min-width:0;display:flex;flex-direction:column;gap:7px;}
.ct-tit{font-size:13.5px;font-weight:620;color:var(--ink);}
/* `.qa` nao traz padding lateral (quem usa aplica o seu) — sem isto o rotulo
   encosta na borda do botao. */
.ct-baixar{align-self:flex-start;text-decoration:none;padding:0 18px;}
.ct-caminho{display:flex;align-items:center;gap:8px;background:var(--wash-2);
  border:1px solid var(--hair);border-radius:var(--r-sm);padding:7px 10px;}
.ct-caminho code{flex:1;min-width:0;font-family:var(--mono);font-size:11.5px;
  color:var(--ink);overflow-x:auto;white-space:nowrap;}
.ct-copiar{flex-shrink:0;border:0;background:transparent;cursor:pointer;
  font-size:11px;color:var(--brand);font-weight:600;padding:2px 4px;}
.ct-copiar:hover{text-decoration:underline;}
.ct-copiar:focus-visible{outline:2px solid var(--brand);outline-offset:2px;}

/* estado da conexao quando ja' esta tudo certo: quem funciona quer ver o
   ESTADO, nao um passo a passo de instalacao (Imil, 2026-07-30). */
.conx-estado{display:flex;flex-direction:column;gap:7px;align-items:flex-start;}
.conx-status{display:flex;align-items:center;gap:10px;width:100%;
  padding:10px 12px;border:1px solid var(--hair);border-radius:var(--r-md);
  background:var(--wash);}
.conx-status.ok{background:rgba(63,122,68,.07);border-color:rgba(63,122,68,.3);}
.conx-status.atencao{background:rgba(152,104,15,.07);border-color:rgba(152,104,15,.32);}
.conx-quando{margin-left:auto;font-size:11.5px;color:var(--muted);white-space:nowrap;}
.conx-form[hidden]{display:none;}
.conx-trocar{border:0;background:none;padding:0;cursor:pointer;font-family:var(--sans);
  font-size:11.5px;color:var(--brand);text-decoration:underline;}
.conx-trocar:hover{color:var(--brand-hi);}
.conx-trocar:focus-visible{outline:2px solid var(--brand);outline-offset:2px;}

.ct-config-ruim{background:rgba(178,58,46,.07);border:1px solid rgba(178,58,46,.35);
  border-left:3px solid var(--down);border-radius:5px 12px 12px 5px;padding:11px 13px;}
.ct-config-tit{font-size:13px;font-weight:650;color:var(--down);margin-bottom:4px;}
.ct-config-txt{font-size:11.5px;color:var(--read);line-height:1.45;}

/* ── gestao: duplas lider -> membro (a lista conferivel) ──────────────────── */
.wpp-eqp-lista{display:flex;flex-direction:column;gap:10px;margin-bottom:10px;}
.wpp-eqp-bloco{border:1px solid var(--hair);border-radius:var(--r-md);
  background:var(--wash);padding:9px 11px;}
.wpp-eqp-lider{font-size:12.5px;font-weight:650;color:var(--ink);
  margin-bottom:5px;word-break:break-all;}
/* modificador SO' da fila de contatos (fix da revisao 2026-08-03): o nome
   ganha uma linha de numero logo abaixo, entao o espaco entre os dois fica
   mais justo - uma classe PROPRIA em vez de estreitar `.wpp-eqp-lider`, que
   tambem e' usada pela lista lider->membro da gestao (web/app.js:2407), onde
   nao ha numero nenhum depois e o espacamento de 5px continua certo. */
.wpp-eqp-lider-com-numero{margin-bottom:2px;}
/* o numero (fix 2026-08-03): identidade estavel abaixo do nome - nomes vem
   de pushName e variam por quem salvou o contato. font-variant-numeric
   alinha os digitos; word-break garante que "+55 65 99999-1111" nunca
   estoure a largura de 360-400px do card. */
.wpp-eqp-numero{font-size:11px;color:var(--faint);margin-bottom:5px;
  font-variant-numeric:tabular-nums;word-break:break-all;}
.wpp-eqp-row{display:flex;align-items:center;gap:8px;padding:4px 0;
  border-top:1px solid var(--hair-soft);}
.wpp-eqp-row:first-of-type{border-top:0;}
.wpp-eqp-membro{flex:1;min-width:0;font-size:12px;color:var(--soft);word-break:break-all;}
.wpp-eqp-x{flex-shrink:0;width:24px;height:24px;border-radius:7px;border:0;cursor:pointer;
  background:transparent;color:var(--muted);display:flex;align-items:center;justify-content:center;
  transition:background var(--dur-1),color var(--dur-1);}
.wpp-eqp-x:hover{background:rgba(178,58,46,.1);color:var(--down);}
.wpp-eqp-x:focus-visible{outline:2px solid var(--brand);outline-offset:1px;}
.wpp-eqp-x:disabled{opacity:.5;cursor:default;}
.wpp-eqp-form{display:flex;flex-direction:column;gap:7px;margin-bottom:6px;}
.wpp-eqp-add{align-self:flex-start;padding:0 18px;}   /* `.qa` nao tem padding lateral */

/* ── equipe de WhatsApp (painel do lider: ele + o time) ────────────────────── */
.wpp-time{margin-top:16px;padding-top:14px;border-top:1px solid var(--hair);}
.wpp-time-tit{font-size:10px;font-weight:650;letter-spacing:.05em;text-transform:uppercase;
  color:var(--faint);margin-bottom:8px;}
.wpp-time-lista{display:flex;flex-direction:column;gap:2px;}
.wpp-time-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:9px 2px;border-top:1px solid var(--hair-soft);}
.wpp-time-row:first-child{border-top:0;}
.wpp-time-info{flex:1;min-width:0;}
.wpp-time-nome{font-size:13.5px;color:var(--ink);text-transform:capitalize;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.wpp-time-sinais{display:flex;gap:12px;margin-top:3px;}
.wpp-sinal{display:inline-flex;align-items:center;gap:5px;font-size:11px;color:var(--muted);}
.wpp-sinal-dot{width:7px;height:7px;border-radius:50%;background:var(--faint);flex-shrink:0;}
.wpp-sinal.on{color:var(--up);}
/* PISCANDO so' no verde: o pulso e' o sinal de "vivo agora" (pedido do Imil).
   Piscar tambem no vermelho faria a tela inteira tremer no pior momento, que e'
   justamente quando a pessoa precisa ler com calma o que esta errado. */
.wpp-sinal.on .wpp-sinal-dot{background:var(--up);animation:wpp-pulso 2s ease-in-out infinite;}
.wpp-sinal.warn{color:var(--warn);}
.wpp-sinal.warn .wpp-sinal-dot{background:var(--warn);}
.wpp-sinal.off{color:var(--faint);}
@keyframes wpp-pulso{
  0%,100%{box-shadow:0 0 0 0 rgba(63,122,68,.55);}
  70%{box-shadow:0 0 0 5px rgba(63,122,68,0);}
}
.wpp-time-btn{flex-shrink:0;font-size:12px;font-weight:600;color:var(--brand);
  background:transparent;border:1px solid rgba(176,78,23,.35);border-radius:999px;
  padding:5px 13px;cursor:pointer;transition:background var(--dur-1),color var(--dur-1);}
.wpp-time-btn:hover{background:var(--brand);color:var(--brand-ink);}
.wpp-time-btn:disabled{opacity:.5;cursor:default;background:transparent;color:var(--brand);}
.wpp-time-btn:focus-visible{outline:2px solid var(--brand);outline-offset:2px;}
.wpp-time-qr{flex-basis:100%;margin-top:8px;padding-left:2px;
  display:flex;flex-direction:column;gap:8px;}
@media (prefers-reduced-motion:reduce){
  .wpp-sinal.on .wpp-sinal-dot{animation:none;}
}

/* ============ LIMPAR CONVERSA (botão no cabeçalho do chat) ============ */
.btn-limpar{
  margin-left:auto;display:inline-flex;align-items:center;gap:7px;flex-shrink:0;
  border:1px solid var(--hair);background:none;color:var(--muted);
  font-family:var(--sans);font-size:12.5px;font-weight:600;cursor:pointer;
  transition:color var(--dur-1),border-color var(--dur-1),background var(--dur-1);
}
.btn-limpar:hover{color:var(--ink);border-color:var(--border-2);background:var(--wash);}
.chat-head .btn-limpar{min-height:34px;padding:0 12px;border-radius:999px;}
.chat-mobtop .btn-limpar{width:42px;height:42px;justify-content:center;border-radius:11px;padding:0;color:var(--soft);}
.chat-limpo{text-align:center;color:var(--faint);font-size:13px;padding:34px 16px;}

/* linha discreta abaixo do input de contato: tipo do item casado no datalist
   (cliente do CRM × lead do app/indicação/ticket) — só aparece pro SDR */
.lig-tipo{font-size:12px;color:var(--faint);min-height:1em;}
/* SDR: dropdown próprio da busca de contato (substitui o <datalist> nativo) */
.lig-busca{list-style:none;margin:2px 0 0;padding:4px;max-height:220px;overflow-y:auto;
  background:var(--wash);border:1px solid var(--hair);border-radius:var(--r-md);}
.lig-busca[hidden]{display:none;}
.lig-busca-item{display:flex;justify-content:space-between;align-items:center;gap:8px;
  padding:7px 9px;border-radius:8px;cursor:pointer;}
.lig-busca-item:hover{background:var(--wash-2);}
.lig-busca-info{display:flex;flex-direction:column;gap:1px;min-width:0;}
.lig-busca-nome{color:var(--ink);font-size:14px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;}
/* Sublinha do candidato: etapa do kanban e/ou telefone. As duas faixas nasceram
   em paralelo resolvendo o MESMO problema — desambiguar homonimo — com dados
   diferentes, e sao complementares: a etapa diz de onde a pessoa vem no funil,
   o telefone distingue dois nomes iguais. `tabular-nums` alinha os numeros
   quando ha varios candidatos. */
.lig-busca-sub{display:flex;gap:7px;color:var(--faint);font-size:11px;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.lig-busca-etapa{flex-shrink:0;}
.lig-busca-fone{flex-shrink:0;font-variant-numeric:tabular-nums;color:var(--muted);}
.lig-busca-tag{color:var(--faint);font-size:11px;white-space:nowrap;flex-shrink:0;}

/* pista de texto na caixa Cliente */
.pista{margin-bottom:10px;padding:8px 10px;background:var(--wash-2);border:1px solid var(--hair);border-radius:8px;}
.pista-cab{font-size:12.5px;color:var(--soft);margin-bottom:4px;}
.pista-vezes{margin-left:6px;font-size:11px;color:var(--faint);}
.pista-nada{font-size:12px;color:var(--muted);}

/* ============ GRÁFICOS ([grafico:ID] no chat) ============ */
.grafico{margin:10px 0 4px;}
.grafico img{
  max-width:100%;height:auto;display:block;cursor:zoom-in;
  border:1px solid var(--hair);border-radius:var(--r-md);background:#FCF9F3;
}
.grafico.gr-erro{
  border:1px dashed var(--hair);border-radius:var(--r-md);padding:18px 14px;
  color:var(--faint);font-size:13px;text-align:center;font-style:italic;
}
.gr-acoes{display:flex;justify-content:flex-end;margin-top:4px;}
.gr-baixar{font-size:12px;color:var(--muted);text-decoration:none;border-bottom:1px dotted var(--muted);}
.gr-baixar:hover{color:var(--ink);}
.gr-retry{
  border:none;background:none;color:var(--muted);font-family:var(--sans);
  font-size:13px;font-style:italic;cursor:pointer;text-decoration:underline dotted;
}
.gr-retry:hover{color:var(--ink);}

/* ============ banner de versão (aba SPA envelhecida) ============ */
.versao-banner{
  position:fixed;top:0;left:0;right:0;z-index:210;
  border:none;cursor:pointer;
  background:var(--brand);color:#FFF4EA;text-align:center;
  font-family:var(--sans);font-size:12.5px;font-weight:700;letter-spacing:.04em;
  padding:7px 12px;
  /* PWA instalado roda edge-to-edge: sem isso o banner nasce sob o notch */
  padding-top:calc(7px + env(safe-area-inset-top,0px));
}
.versao-banner:hover{filter:brightness(1.08);}
body.com-versao-banner .topbar{margin-top:31px;}
body.com-versao-banner .glow{top:31px;}
/* staging: empilha ABAIXO do aviso de ambiente (que não pode ser encoberto) */
body.com-env-banner .versao-banner{top:27px;}
body.com-env-banner.com-versao-banner .topbar{margin-top:58px;}
body.com-env-banner.com-versao-banner .glow{top:58px;}

/* ============ seletor de modo de resposta (Opus por gatilho explicito) ============
   Padrao do seletor de modelo do Claude: um controle DISCRETO e ROTULADO no
   composer (nao um icone mudo, que so' se explicava no title do desktop) que
   abre um menu para cima com as opcoes descritas e um check na ativa. Nao
   compete com o .send: sem preenchimento nem borda em repouso. */
.modo-wrap{position:relative;flex-shrink:0;}
.modo-sel{
  display:inline-flex;align-items:center;gap:6px;height:46px;padding:0 11px;
  border:1px solid transparent;border-radius:var(--r-md);background:none;
  font-family:var(--sans);font-size:13px;font-weight:550;color:var(--muted);
  white-space:nowrap;cursor:pointer;
  transition:color var(--dur-1),background var(--dur-1),border-color var(--dur-1);
}
.modo-sel:hover,.modo-sel[aria-expanded="true"]{background:var(--wash-2);color:var(--ink);}
.modo-chev{opacity:.7;transition:transform var(--dur-1) var(--ease);}
.modo-sel[aria-expanded="true"] .modo-chev{transform:rotate(180deg);}
/* modo profundo ATIVO: terracota no seletor fechado. O rotulo ja diz QUAL modo
   e'; a cor faz o estado que custa ~5x nao passar despercebido entre mensagens
   (ele persiste) — sem faixa nem halo, que roubariam a atencao do composer. */
.modo-sel.fundo{color:var(--brand);}
.modo-sel.fundo:hover,.modo-sel.fundo[aria-expanded="true"]{background:var(--brand-wash);}
/* o icone espelha o modo: raio = normal, cabeca = profunda */
.modo-sel .ic-fundo,.modo-sel.fundo .ic-normal{display:none;}
.modo-sel.fundo .ic-fundo{display:block;}

.modo-pop{
  position:absolute;bottom:calc(100% + 8px);left:0;z-index:40;
  width:296px;max-width:calc(100vw - 32px);
  background:var(--wash);border:1px solid var(--hair);border-radius:var(--r-md);padding:6px;
  box-shadow:0 18px 48px -16px rgba(58,44,28,.42),0 3px 10px -5px rgba(58,44,28,.3);
  animation:modo-pop var(--dur-2) var(--ease);
}
.modo-pop[hidden]{display:none;}
@keyframes modo-pop{from{opacity:0;transform:translateY(5px) scale(.98);}to{opacity:1;transform:none;}}
.modo-pop-lbl{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--faint);padding:8px 10px 6px;
}
.modo-opt{
  display:flex;align-items:flex-start;gap:11px;width:100%;text-align:left;
  padding:10px 11px;border:0;border-radius:var(--r-sm);background:none;cursor:pointer;
  font-family:var(--sans);transition:background var(--dur-1);
}
.modo-opt:hover{background:var(--wash-2);}
.modo-opt-ic{
  flex-shrink:0;width:30px;height:30px;border-radius:9px;margin-top:1px;
  display:flex;align-items:center;justify-content:center;
  background:var(--wash-2);color:var(--soft);
  transition:background var(--dur-1),color var(--dur-1);
}
.modo-opt-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px;}
.modo-opt-t{font-size:13.5px;font-weight:620;color:var(--ink);}
.modo-opt-d{font-size:11.5px;color:var(--muted);line-height:1.35;}
.modo-opt-ck{flex-shrink:0;color:var(--brand);margin-top:5px;opacity:0;transition:opacity var(--dur-1);}
/* estado na FONTE (aria-checked), sem classe paralela que possa divergir dele */
.modo-opt[aria-checked="true"] .modo-opt-ck{opacity:1;}
.modo-opt[aria-checked="true"] .modo-opt-ic{background:var(--brand-wash);color:var(--brand);}
.modo-sel:focus-visible,.modo-opt:focus-visible{outline:2px solid var(--brand);outline-offset:2px;}
/* As variacoes do seletor ficam AQUI, depois da regra base — a media query
   mobile la de cima (linha ~752) e' lida ANTES deste bloco e seria anulada por
   ele (mesma especificidade, a ultima vence). */
@media (max-width:900px){
  /* Com o composer em CAIXA (2 linhas), o seletor vive na linha de controles e
     nao disputa largura com o campo — o hack antigo de linha propria
     (flex-wrap + modo-wrap 100%) saiu junto com a estrutura de linha unica. */
  .modo-sel{height:38px;}
}
.typing-fundo{
  margin-left:8px;font-family:var(--sans);font-size:11.5px;
  color:var(--brand);font-style:italic;align-self:center;
}

/* ============ Uso & custo (painel admin) ============ */
.uso-total{text-align:center;padding:8px 0 12px;border-bottom:1px solid var(--hair);margin-bottom:10px;}
.uso-total-usd{font-family:var(--sans);font-size:30px;font-weight:750;color:var(--ink);letter-spacing:-.01em;}
.uso-total-sub{font-size:12px;color:var(--muted);margin-top:2px;}
.uso-lista{display:flex;flex-direction:column;gap:8px;}
.uso-row{border:1px solid var(--hair);border-radius:var(--r-md);padding:10px 12px;background:var(--wash);}
.uso-row-top{display:flex;align-items:baseline;justify-content:space-between;gap:10px;}
.uso-nome{font-size:14px;color:var(--ink);font-weight:650;}
.uso-usd{font-family:var(--sans);font-size:15px;font-weight:750;color:var(--brand);flex-shrink:0;}
.uso-row-meta{font-size:11.5px;color:var(--muted);margin-top:3px;letter-spacing:.01em;}
.uso-carregando{font-size:13px;color:var(--faint);text-align:center;padding:20px;font-style:italic;}

/* ============ VOZ (Fase 0) — microfone push-to-talk no composer ============ */
.mic-btn{
  flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:11px;
  border:1px solid var(--hair);background:none;color:var(--muted);cursor:pointer;
  transition:color var(--dur-1),border-color var(--dur-1),background var(--dur-1);
}
.mic-btn:hover{color:var(--ink);border-color:var(--border-2);background:var(--wash);}
/* gravando: anel que cresce com o nivel captado (--nivel 0..1, do Web Audio em
   app.js). Sem o medidor, var(--nivel,0)=0 deixa so' o anel-base — ainda le como
   "gravando ativo". O box-shadow nao empurra layout. */
.mic-btn.gravando{
  color:var(--down);border-color:var(--down);background:rgba(178,58,46,.08);
  box-shadow:0 0 0 calc(3px + var(--nivel,0) * 12px) rgba(178,58,46,.16);
  transition:box-shadow 90ms linear;
}
.mic-btn.ocupado,.mic-btn:disabled{opacity:.6;cursor:progress;}
/* ── carteira de contribuicoes (drawer #pontos-panel) ── */
.pontos{--pad:0;}
.pontos .num{font-family:var(--mono);font-variant-numeric:tabular-nums;}
.pontos .p-hero{background:linear-gradient(165deg,var(--wash),var(--bg-agora));border:1px solid var(--border);
  border-radius:var(--r-lg);padding:18px;box-shadow:var(--shadow-md);}
.pontos .p-hero .lab{font-size:11px;text-transform:uppercase;letter-spacing:.09em;color:var(--faint);font-weight:600;}
.pontos .p-hero .big{display:flex;align-items:baseline;gap:9px;margin:6px 0 2px;}
.pontos .p-hero .big .v{font-family:var(--mono);font-size:46px;font-weight:700;line-height:1;color:var(--brand);letter-spacing:-.03em;}
.pontos .p-hero .big .u{font-size:13px;color:var(--muted);font-weight:600;}
.pontos .p-hero .sub{font-size:12.5px;color:var(--muted);margin-top:10px;padding-top:12px;border-top:1px solid var(--hair);}
.pontos .p-hero .sub b{color:var(--ink);font-weight:700;}
.pontos .p-sec{display:flex;align-items:center;gap:10px;margin:22px 2px 11px;}
.pontos .p-sec .t{font-size:13px;font-weight:700;color:var(--ink);}
.pontos .p-sec .ln{flex:1;height:1px;background:var(--hair);}
.pontos .podio{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;}
.pontos .pod{background:var(--wash);border:1px solid var(--border);border-radius:var(--r-sm);padding:11px 9px;text-align:center;box-shadow:var(--shadow-sm);}
.pontos .pod.me{background:var(--brand-wash);border-color:rgba(176,78,23,.28);}
.pontos .pod .pos{font-size:10.5px;color:var(--muted);font-weight:700;}
.pontos .pod.me .pos{color:var(--brand);}
.pontos .pod .pnm{font-size:12px;font-weight:600;color:var(--ink);margin:4px 0 2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.pontos .pod .ppt{font-family:var(--mono);font-size:15px;font-weight:700;color:var(--ink);}
.pontos .pod-voce{font-size:12px;color:var(--muted);text-align:center;margin-top:8px;}
.pontos .tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;}
.pontos .tile{background:var(--wash);border:1px solid var(--border);border-radius:var(--r-sm);padding:12px;box-shadow:var(--shadow-sm);}
.pontos .tile .v{font-family:var(--mono);font-size:22px;font-weight:700;color:var(--ink);}
.pontos .tile.tool .v{color:var(--brand);}
.pontos .tile .k{font-size:11px;color:var(--muted);margin-top:5px;}
.pontos .toolc{background:var(--wash);border:1px solid var(--border);border-radius:var(--r-md);padding:15px;margin-bottom:9px;box-shadow:var(--shadow-sm);}
.pontos .toolc .hd{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;}
.pontos .toolc .code{font-family:var(--mono);font-size:13px;font-weight:700;color:var(--brand);}
.pontos .toolc .earn{font-family:var(--mono);font-size:19px;font-weight:700;color:var(--up);flex-shrink:0;}
.pontos .toolc .cap{font-size:12px;color:var(--muted);margin:12px 0 8px;padding-top:11px;border-top:1px solid var(--hair);}
.pontos .toolc .cap b{color:var(--ink);}
.pontos .pips{display:flex;flex-wrap:wrap;gap:5px;}
.pontos .pip{width:21px;height:21px;border-radius:50%;background:linear-gradient(145deg,var(--brand-hi),var(--brand));
  color:var(--brand-ink);display:grid;place-items:center;font-size:9px;font-weight:700;}
.pontos .feed{display:flex;flex-direction:column;gap:1px;background:var(--border);border:1px solid var(--border);border-radius:var(--r-md);overflow:hidden;box-shadow:var(--shadow-sm);}
.pontos .ev{display:flex;align-items:center;gap:11px;padding:11px 13px;background:var(--wash);}
.pontos .ev .tx{flex:1;font-size:12.5px;color:var(--read);min-width:0;}
.pontos .ev .tx b{color:var(--ink);font-weight:600;}
.pontos .ev .tx .mono{font-family:var(--mono);font-size:11.5px;color:var(--brand);}
.pontos .ev .tx .wn{font-size:11px;color:var(--faint);}
.pontos .ev .pt{font-family:var(--mono);font-size:12.5px;font-weight:700;color:var(--up);flex-shrink:0;}
.pontos .ev .pt.neg{color:var(--down);}
.pontos .ev .pt.zero{color:var(--faint);}
.pontos .rr{display:flex;gap:12px;background:var(--wash);border:1px solid var(--border);border-radius:var(--r-sm);padding:13px;box-shadow:var(--shadow-sm);margin-bottom:8px;}
.pontos .rr.grow{background:linear-gradient(150deg,var(--brand-wash),var(--wash));border-color:rgba(176,78,23,.28);}
.pontos .rr .bg{font-family:var(--mono);font-size:14px;font-weight:700;color:var(--up);width:52px;flex-shrink:0;text-align:center;}
.pontos .rr .bg.zero{color:var(--faint);}
.pontos .rr .ti{font-size:12.5px;font-weight:600;color:var(--ink);}

/* ============ MENU LATERAL (só mobile) — navegação chat-first ============ */
/* Os painéis de conteúdo sobem de baixo (sheet); o menu é NAVEGAÇÃO e entra
   pela esquerda. A distinção é proposital e deve permanecer legível. */
.btn-menu{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;margin-left:-6px;border:none;background:none;color:var(--soft);border-radius:10px;}
.btn-menu:active{background:var(--wash);}
.menu-topo{display:flex;align-items:center;gap:12px;padding:18px 18px 16px;border-bottom:1px solid var(--hair);flex-shrink:0;}
.menu-id{flex:1;min-width:0;}
.menu-id b{display:block;font-size:15px;font-weight:650;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.menu-id span{font-size:12px;color:var(--muted);}
.menu-itens{flex:1;overflow-y:auto;padding:10px 10px;display:flex;flex-direction:column;gap:2px;min-height:0;}
.menu-item{display:flex;align-items:center;gap:12px;width:100%;padding:13px 12px;border:none;background:none;
  color:var(--read);font-size:14.5px;font-weight:550;text-align:left;border-radius:11px;}
.menu-item:active{background:var(--wash);}
.menu-item .lb{flex:1;}
.menu-item svg{flex-shrink:0;color:var(--muted);}
.menu-badge{flex-shrink:0;min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--brand);
  color:var(--brand-ink);font-size:11px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;}
.menu-visao{padding:12px 16px 14px;border-top:1px solid var(--hair);flex-shrink:0;}
.menu-sec{display:block;font-size:10.5px;font-weight:650;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);margin-bottom:9px;}
.menu-visao .seg{display:flex;flex-wrap:wrap;gap:6px;}
.menu-rodape{padding:8px 10px calc(10px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--hair);flex-shrink:0;}

@media (max-width:900px){
  /* sobrescreve o bottom-sheet de `.drawer` (app.css:816): o menu é lateral */
  .menu-lat{position:fixed;top:0;bottom:0;left:0;right:auto;z-index:60;
    width:min(84vw,340px);max-height:none;border:none;border-right:1px solid #332A23;border-radius:0;
    box-shadow:18px 0 50px -20px rgba(0,0,0,.7);
    animation:menu-in var(--dur-3) var(--ease) both;
    /* PWA instalado roda edge-to-edge: sem isso o topo do menu nasce sob o notch */
    padding-top:env(safe-area-inset-top,0px);
    padding-left:env(safe-area-inset-left,0px);padding-right:0;}
}
@keyframes menu-in{from{transform:translateX(-100%);}to{transform:none;}}
/* o menu não existe no desktop: lá os botões vivem na topbar */
@media (min-width:901px){ .menu-lat{display:none !important;} #btn-menu{display:none !important;} }
.pontos .rr .ex{font-size:11.5px;color:var(--muted);margin-top:3px;line-height:1.5;}

/* ============ CONVERSAS (sidebar desktop, estilo Claude) ============ */
/* campo "Confirmações" (SDR) — mora acima de Conversas na aba esquerda */
.conf-bloco{flex-shrink:0;padding:14px 12px 6px;border-bottom:1px solid var(--hair);}
.conf-cab{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 4px 6px;}
.conf-tit{font-size:12.5px;font-weight:700;color:var(--faint);letter-spacing:.02em;}
/* contador da fila, no par de cores da marca */
.conf-cont{min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--brand);
  color:var(--brand-ink);font-size:11.5px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;}
.conf-lista{display:flex;flex-direction:column;gap:2px;max-height:190px;overflow-y:auto;}
.conf-item{display:flex;flex-direction:column;align-items:flex-start;gap:1px;width:100%;
  padding:7px 10px;border:none;border-radius:9px;background:none;text-align:left;cursor:pointer;}
.conf-item:hover{background:var(--wash);}
.conf-quem{font-size:13px;font-weight:600;color:var(--ink);}
.conf-quando{font-size:11.5px;color:var(--faint);}
.conf-vazio{padding:4px 10px 8px;font-size:12.5px;color:var(--faint);}
/* bloco Confirmações do menu mobile — mesmo padrão de .menu-fios-bloco */
.menu-conf-bloco{margin-top:10px;border-top:1px solid var(--hair);padding-top:10px;}
.menu-conf-bloco .menu-sec{padding:0 12px 6px;margin-bottom:0;}

.fios-sidebar{width:290px;flex-shrink:0;display:flex;flex-direction:column;min-height:0;border-right:1px solid var(--hair);}
.fios-novo{padding:14px 12px 10px;flex-shrink:0;}
.fios-novo button{width:100%;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:38px;border-radius:11px;border:1px solid var(--border);background:var(--wash);color:var(--ink);font-size:13.5px;font-weight:600;}
.fios-novo button:hover{border-color:var(--border-2);}
.fios-lista{flex:1;overflow-y:auto;min-height:0;padding:0 8px 14px;}
.fio-item{position:relative;border-radius:10px;margin-bottom:2px;}
.fio-item:hover,.fio-item.ativo{background:var(--wash);}
.fio-abrir{width:100%;display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:9px 64px 9px 11px;border:none;background:none;text-align:left;color:var(--read);}
.fio-titulo{max-width:100%;font-size:13.5px;font-weight:550;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.fio-quando{font-size:11px;color:var(--faint);}
.fio-acoes{position:absolute;right:6px;top:9px;display:none;gap:2px;}
.fio-item:hover .fio-acoes{display:flex;}
.fio-ico{width:26px;height:26px;border-radius:8px;border:none;background:var(--wash);color:var(--muted);font-size:13px;line-height:1;}
.fio-ico:hover{color:var(--ink);background:var(--s3);}
.fio-renomear{width:100%;margin:4px 0;padding:7px 10px;border:1px solid var(--border-2);border-radius:9px;background:var(--wash);color:var(--ink);font:inherit;font-size:13px;}

/* bloco Conversas do menu mobile */
.menu-fios-bloco{margin-top:10px;border-top:1px solid var(--hair);padding-top:10px;}
.menu-fios-bloco .menu-sec{display:block;padding:0 12px 6px;font-size:10.5px;font-weight:650;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);}
.menu-fio-titulo{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.menu-item.ativo{background:var(--wash);}

.conf-resumo{display:flex;flex-direction:column;gap:12px;padding:4px 0;}
.conf-resumo p{margin:0;color:var(--read);font-size:14px;}
.conf-resumo button{align-self:flex-start;min-height:36px;padding:0 14px;border-radius:10px;
  border:1px solid var(--border);background:var(--wash);color:var(--ink);font-size:13.5px;font-weight:600;}
.conf-resumo button:hover{border-color:var(--border-2);}

/* ── anexos do chat: chips acima do campo + clipe no composer ── */
.chips-anexos{display:none;flex-wrap:wrap;gap:6px;padding:6px 10px 0;}
.chip-anexo{display:inline-flex;align-items:center;gap:6px;max-width:260px;
  padding:4px 8px;border:1px solid var(--border);border-radius:8px;
  font-size:12px;background:var(--wash);color:var(--soft);}
.chip-anexo>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.chip-anexo.enviando{opacity:.6;}
.chip-anexo.erro{border-color:#B3352B;color:#B3352B;}
.chip-x{border:0;background:none;cursor:pointer;font-size:14px;line-height:1;
  padding:0;color:inherit;}
.clipe{border:0;background:none;cursor:pointer;padding:4px;opacity:.7;
  display:inline-flex;align-items:center;color:var(--muted);}
.clipe:hover{opacity:1;}

/* veu de drag&drop: decorativo (pointer-events none) — o drop e' do document */
.drop-veu{position:fixed;inset:0;z-index:230;background:rgba(46,38,32,.28);
  display:flex;align-items:center;justify-content:center;pointer-events:none;}
.drop-veu[hidden]{display:none;}
.drop-caixa{display:flex;align-items:center;gap:10px;padding:22px 30px;
  border:2px dashed var(--brand);border-radius:14px;background:var(--wash);
  color:var(--ink);font-size:15px;font-weight:600;
  box-shadow:0 8px 30px rgba(0,0,0,.18);}

/* ── abertura de conversa nova (estilo Claude): saudacao + composer no centro ── */
.saudacao{display:flex;align-items:center;justify-content:center;gap:14px;padding:18px 0 6px;}
.s-faisca{display:flex;color:var(--brand);}
.saudacao h2{margin:0;font-family:Georgia,'Times New Roman',serif;font-weight:500;
  font-size:clamp(26px,3.2vw,38px);letter-spacing:-.01em;color:var(--ink);}
@media (min-width:901px){
  .chat.inicio{justify-content:center;}
  .chat.inicio .chat-head{display:none;}
  .chat.inicio .chat-scroll{flex:0 0 auto;overflow:visible;}
  .chat.inicio .composer-block{border-top:0;background:none;
    backdrop-filter:none;-webkit-backdrop-filter:none;}
  .chat.inicio .composer{max-width:720px;width:100%;margin-left:auto;margin-right:auto;}
  .chat.inicio .kbd-hint{max-width:720px;margin:0 auto;text-align:center;}
}