:root{
  --bg:#0d1117;--s1:#161b22;--s2:#21262d;--b:#30363d;
  --tx:#e6edf3;--mt:#8b949e;--pr:#238636;--ac:#1f6feb;
  --dg:#da3633;--wn:#d29922;--wa:#25d366;
}
/* === Protótipo tema claro (2026-07-05) === */
:root[data-tema="light"]{
  --bg:#ffffff;--s1:#f6f8fa;--s2:#eaeef2;--b:#d0d7de;
  --tx:#1f2328;--mt:#656d76;
  /* acentos (--pr/--ac/--dg/--wn/--wa) preservados */
}
:root[data-tema="light"] .msg.agent .bubble,:root[data-tema="light"] .msg.bot .bubble{background:#e9e9eb;color:#111}
:root[data-tema="light"] .msg.user .bubble{background:#34c759;color:#fff}
:root[data-tema="light"] .msg-entrou{background:#e8f7ee;border-color:#8fd4a8;color:#0f7a3a}
:root[data-tema="light"] .fixo-btn{background:#e7f0ff;border-color:#a9c4ee;color:var(--tx)}
:root[data-tema="light"] .fixo-btn:hover:not(:disabled){background:#d4e2fb}
:root[data-tema="light"] .fixo-btn-destaque{color:#78350f}
:root[data-tema="light"] .tg-no-wa{background:#e6f4fc;border-color:#229ED9;color:#1c7ba6}
:root[data-tema="light"] .tg-no-wa:hover{background:#d1ebf7;color:#0e5d80}
:root[data-tema="light"] .tg-alerta{background:#fef7e6;border-color:#eab308;color:#5a4a16}
:root[data-tema="light"] .wa-card{box-shadow:0 2px 8px rgba(37,211,102,.20), inset 0 1px 0 rgba(255,255,255,.5)}
:root[data-tema="light"] .msg.bot .msg-av{border-color:rgba(124,58,237,.5)}
:root[data-tema="light"] #txt-wrap:focus-within{box-shadow:0 0 0 2px rgba(31,111,235,.25)}
/* Prechat overlay em tema claro — inline dark hardcoded no HTML.
   :not(.pc-light) evita atropelar a variante A que já tem paleta clara própria. */
:root[data-tema="light"] #prechat-overlay:not(.pc-light){background:rgba(255,255,255,0.94)!important}
:root[data-tema="light"] #prechat-overlay:not(.pc-light) > div{background:#fff!important;border-color:#e6ebf2!important;box-shadow:0 8px 32px rgba(15,23,42,.12)!important}
:root[data-tema="light"] #prechat-overlay:not(.pc-light) #prechat-intro-title{color:#11181f!important}
:root[data-tema="light"] #prechat-overlay:not(.pc-light) #prechat-intro-sub,
:root[data-tema="light"] #prechat-overlay:not(.pc-light) .pc-lbl{color:#5b6470!important}
:root[data-tema="light"] #prechat-overlay:not(.pc-light) input[type=text],
:root[data-tema="light"] #prechat-overlay:not(.pc-light) input[type=email],
:root[data-tema="light"] #prechat-overlay:not(.pc-light) input[type=tel]{background:#f4f7fb!important;border-color:#e6ebf2!important;color:#11181f!important}
:root[data-tema="light"] #prechat-overlay:not(.pc-light) input::placeholder{color:#9aa4b2!important}
:root[data-tema="light"] #prechat-overlay:not(.pc-light) #prechat-email-preview{background:#eef4ff!important;color:#5b6470!important}
:root[data-tema="light"] #prechat-overlay:not(.pc-light) #prechat-email-preview strong{color:#11181f!important}
:root[data-tema="light"] #prechat-overlay:not(.pc-light) #prechat-email-hint{background:#fff8e6!important;border-color:#eab308!important;color:#5a4a16!important}
:root[data-tema="light"] #prechat-overlay:not(.pc-light) #prechat-erro{color:#c92a26!important}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;background:var(--bg);color:var(--tx);display:flex;flex-direction:column;height:100dvh;overflow:hidden}
*{scrollbar-width:thin;scrollbar-color:var(--b) transparent}
*::-webkit-scrollbar{width:6px;height:6px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{background:var(--b);border-radius:3px}
*::-webkit-scrollbar-thumb:hover{background:var(--mt)}
/* header estilo iOS (pedido 09/07): avatar EM CIMA, nome embaixo, tudo centralizado em coluna */
#hdr{min-height:52px;background:var(--s1);border-bottom:1px solid var(--b);display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;padding:9px 16px;gap:5px;flex-shrink:0}
.av{width:36px;height:36px;border-radius:50%;background:var(--ac);display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:700;color:#fff;flex-shrink:0;overflow:visible}
.av img{width:36px;height:36px;object-fit:cover;border-radius:50%;display:block}
/* avatar da marca no header — 25% maior (36→45) + layout centralizado (pedido 09/07) */
#hdr-av-marca{width:52px;height:52px}
#hdr-av-marca img{width:52px;height:52px}
.av-verified{position:absolute;bottom:-1px;right:-2px;width:14px;height:14px;display:flex;align-items:center;justify-content:center;pointer-events:none}
.av-verified svg{width:14px;height:14px;display:block;filter:drop-shadow(0 0 1.5px rgba(0,0,0,.35))}
.hdr-info{display:flex;flex-direction:column;justify-content:center;flex:0 1 auto;min-width:0;text-align:center}
.hdr-info .hdr-name{font-size:15px;font-weight:600}
.hdr-info .hdr-status{font-size:12px;color:var(--wa);display:flex;align-items:center;gap:5px}
.hdr-info .hdr-sub{font-size:11.5px;color:var(--mt);margin-top:1px;display:flex;align-items:center;gap:5px;flex-wrap:wrap}
.hdr-info .hdr-sub b{color:var(--tx);font-weight:600}
.dot-online{width:7px;height:7px;border-radius:50%;background:var(--wa);box-shadow:0 0 0 0 rgba(37,211,102,.7);animation:hdrPulse 1.8s infinite;flex-shrink:0}
@keyframes hdrPulse{0%{box-shadow:0 0 0 0 rgba(37,211,102,.6)}70%{box-shadow:0 0 0 5px rgba(37,211,102,0)}100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}}
#msgs{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:10px;min-height:0}
.msg{display:flex;flex-direction:column;max-width:65%;min-width:0}
@media (max-width:520px){.msg{max-width:78%}}
/* Aviso "um atendente humano assumiu" — 1× quando a pessoa entra (robô fica discreto). */
.msg-entrou{align-self:center;max-width:88%;margin:6px auto;padding:5px 14px;font-size:11.5px;line-height:1.3;color:var(--wa,#25d366);background:rgba(37,211,102,.10);border:1px solid rgba(37,211,102,.28);border-radius:999px;text-align:center}
.msg-entrou strong{font-weight:700}
.msg.agent, .msg.bot{align-self:flex-start;flex-direction:row;align-items:flex-end;gap:8px}
.msg.user{align-self:flex-end}
.msg-av{width:39px;height:39px;border-radius:50%;background:var(--s2);display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;color:var(--tx);flex-shrink:0;overflow:hidden;align-self:flex-start;margin-top:2px;border:1.5px solid var(--b)}
.msg-av img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.msg.agent.continuation .msg-av, .msg.bot.continuation .msg-av{visibility:hidden}
.msg.bot .msg-av{background:linear-gradient(135deg,#1f6feb,#7c3aed);border-color:rgba(124,58,237,.4);color:#fff}
.msg.bot .msg-av svg{width:18px;height:18px}
/* === Balões estilo SMS (2026-07-09) === recebido (agent/bot) = cinza à esquerda; enviado
   (user) = verde vivo + texto branco à direita. Mesma bolha do agent pro bot (só muda avatar). */
.msg.bot .bubble{background:var(--s2);border:none;color:var(--tx);border-radius:18px 18px 18px 5px}
#typing{margin-left:42px}
.bubble{padding:9px 14px;font-size:14.5px;line-height:1.4;word-break:break-word}
.msg.agent .bubble{background:var(--s2);border:none;color:var(--tx);border-radius:18px 18px 18px 5px}
.msg.user .bubble{background:#34c759;border:none;color:#fff;border-radius:18px 18px 5px 18px}
.msg.user .msg-time{color:rgba(255,255,255,.8)}
.msg.user .bubble a{color:#fff;text-decoration:underline}
.bubble:has(img),.bubble:has(audio){padding:4px}
.bubble:has(img) .msg-time,.bubble:has(audio) .msg-time{position:absolute;bottom:6px;right:8px;background:rgba(0,0,0,.55);color:#fff;padding:1px 6px;border-radius:8px;float:none}
.bubble{position:relative}
/* 2026-05-23: card WA upgrade visual — gradiente WhatsApp, sombra, pulse sutil
   no ícone, hover lift. Mantém compatibilidade com markup existente (.wa-icon
   continua sendo o emoji 📲 ou SVG; .wa-txt strong/span seguem como antes).
   Variante B com telefone capturado agora também mostra esse card. */
.wa-card{
  background:linear-gradient(135deg,rgba(37,211,102,.12) 0%,rgba(18,140,126,.15) 100%);
  border:1px solid var(--wa);
  border-radius:14px;
  padding:18px 20px 20px;
  display:flex;align-items:center;gap:14px;
  cursor:pointer;
  margin-top:8px;
  text-decoration:none;color:var(--tx);
  box-shadow:0 2px 8px rgba(37,211,102,.15), inset 0 1px 0 rgba(255,255,255,.04);
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
  position:relative;
}
.wa-card::after{
  content:'';position:absolute;inset:0;border-radius:14px;
  background:radial-gradient(circle at 18px 50%, rgba(37,211,102,.18) 0%, transparent 60%);
  pointer-events:none;opacity:.7;z-index:0;
}
.wa-card:hover{
  background:linear-gradient(135deg,rgba(37,211,102,.20) 0%,rgba(18,140,126,.22) 100%);
  box-shadow:0 4px 16px rgba(37,211,102,.28), inset 0 1px 0 rgba(255,255,255,.06);
  transform:translateY(-1px);
}
.wa-card:active{transform:translateY(0)}
.wa-icon{
  font-size:32px;flex-shrink:0;position:relative;z-index:1;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.15));
  animation:wa-pulse 2.4s ease-in-out infinite;
}
@keyframes wa-pulse{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.08)}
}
.wa-txt{position:relative;z-index:1;flex:1;min-width:0}
.wa-txt strong{display:block;font-size:15px;font-weight:700;color:var(--wa);letter-spacing:.2px;margin-bottom:2px}
.wa-txt span{font-size:12.5px;color:var(--mt);line-height:1.45;display:block;padding-bottom:1px}
.wa-card .wa-chevron{
  flex-shrink:0;color:var(--wa);opacity:.7;font-size:18px;font-weight:700;
  position:relative;z-index:1;transition:transform .18s, opacity .18s;
}
.wa-card:hover .wa-chevron{transform:translateX(3px);opacity:1}
.tg-prompt{background:var(--s1);border:1px solid var(--b);border-radius:12px;padding:12px 14px;margin-top:8px;font-size:13px;color:var(--tx)}
.tg-prompt p{margin:0 0 9px;line-height:1.4}
.tg-prompt-btns{display:flex;gap:8px;flex-wrap:wrap}
.tg-prompt-btns button{flex:1;min-width:120px;padding:8px 10px;border-radius:8px;border:1px solid var(--b);background:var(--s2);color:var(--tx);font-size:12.5px;font-weight:600;cursor:pointer;transition:.15s;font-family:inherit}
.tg-prompt-btns .tg-yes{background:#229ED9;border-color:#229ED9;color:#fff}
.tg-prompt-btns .tg-yes:hover{background:#1c8bbd}
.tg-prompt-btns button:hover{background:var(--b)}
.tg-no-wa{align-self:flex-start;margin-top:14px;padding:7px 14px 7px 12px;background:rgba(34,158,217,.10);border:1px solid rgba(34,158,217,.45);color:#229ED9;border-radius:999px;font-size:12px;font-weight:500;cursor:pointer;font-family:inherit;transition:all .2s;letter-spacing:.2px;backdrop-filter:blur(4px);display:inline-flex;align-items:center;gap:6px}
.tg-no-wa svg{fill:currentColor;flex-shrink:0;transition:transform .2s}
.tg-no-wa:hover svg{transform:translateX(1px)}
.tg-no-wa:hover{background:rgba(34,158,217,.22);border-color:#229ED9;color:#fff;transform:translateY(-1px);box-shadow:0 2px 8px rgba(34,158,217,.25)}
.tg-no-wa:active{transform:translateY(0)}
.tg-alerta{background:rgba(245,158,11,.10);border:1px solid rgba(245,158,11,.45);border-radius:10px;padding:10px 13px;margin-top:8px;font-size:12.5px;color:var(--tx);line-height:1.5;display:flex;align-items:flex-start;gap:8px}
.tg-alerta::before{content:'⚠️';flex-shrink:0;font-size:14px}
.tg-card{background:rgba(34,158,217,.08);border:1px solid #229ED9;border-radius:12px;padding:14px 16px;display:flex;align-items:center;gap:12px;cursor:pointer;margin-top:6px;text-decoration:none;color:var(--tx)}
.tg-card:hover{background:rgba(34,158,217,.15)}
.tg-card .wa-icon{font-size:28px;flex-shrink:0}
.tg-card strong{display:block;font-size:14px;font-weight:600;color:#229ED9}
.tg-card span{font-size:12px;color:var(--mt)}
#typing{display:none;align-self:flex-start;padding:10px 14px;background:var(--s1);border:1px solid var(--b);border-radius:12px 12px 12px 3px;gap:4px;align-items:center}
#typing.show{display:flex}
.dot{width:7px;height:7px;border-radius:50%;background:var(--mt);animation:blink 1.2s infinite}
.dot:nth-child(2){animation-delay:.2s}
.dot:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,80%,100%{opacity:.2}40%{opacity:1}}
#inp-area{background:var(--s1);border-top:1px solid var(--b);padding:12px 14px;display:flex;gap:8px;align-items:flex-end;flex-shrink:0}
#inp-area .icon-grp{display:flex;gap:4px;align-items:center;flex-shrink:0}
#inp-area .icon-btn{width:40px;height:44px;background:transparent;border:none;border-radius:10px;cursor:pointer;color:var(--mt);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .15s,color .15s}
#inp-area .icon-btn:hover:not(:disabled){background:var(--s2);color:var(--tx)}
#inp-area .icon-btn:disabled{opacity:.35;cursor:not-allowed}
#inp-area .icon-btn svg{width:22px;height:22px;stroke-width:1.75}
#txt-wrap{flex:1;display:flex;align-items:flex-end;background:var(--s2);border:1px solid var(--b);border-radius:22px;padding:4px 6px 4px 16px;transition:border-color .15s;min-height:44px}
#txt-wrap:focus-within{border-color:var(--ac);box-shadow:0 0 0 2px rgba(31,111,235,.18)}
#txt{flex:1;background:transparent;border:none;padding:10px 0;color:var(--tx);font-size:15px;resize:none;outline:none;max-height:140px;min-height:24px;font-family:inherit;line-height:1.45}
#btn-send{width:44px;height:44px;background:var(--ac);border:none;border-radius:50%;cursor:pointer;color:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:transform .15s,opacity .15s,background .15s;margin-left:4px}
#btn-send:hover:not(:disabled){background:#1158c4;transform:scale(1.04)}
#btn-send:disabled{opacity:.35;cursor:not-allowed}
#btn-send svg{width:20px;height:20px;stroke-width:2}
#btn-mic.recording{background:var(--dg)!important;color:#fff!important;border-radius:50%;animation:micPulse 1s infinite}
#btn-mic.recording:hover{background:#a92520!important}
#btn-mic.paused{background:var(--s2)!important;color:var(--mt)!important;border-radius:50%}
#btn-mic.paused:hover{background:var(--b)!important;color:var(--tx)!important}
#btn-trash-audio:hover{background:rgba(218,54,51,.15)!important;color:var(--dg)!important}
#fixo-footer{flex:1;text-align:center;font-size:12px;color:var(--mt);padding:11px 0;font-style:italic;display:none}
#btn-iniciar-wrap{display:none;padding:10px 14px 0;background:var(--s1);border-top:1px solid var(--b);flex-shrink:0}
#btn-iniciar-wrap.show{display:block}
#btn-iniciar{width:100%;background:var(--pr);border:none;border-radius:10px;padding:12px;color:#fff;font-size:14px;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;transition:background .15s,transform .1s}
#btn-iniciar:hover{background:#1f7a2e}
#btn-iniciar:active{transform:scale(.98)}
#btn-iniciar svg{width:18px;height:18px;stroke-width:2}
.fixo-btns{display:flex;flex-direction:column;align-items:flex-start;gap:5px;align-self:flex-start;max-width:85%;margin-top:4px}
.fixo-btns.compact{flex-direction:row;flex-wrap:wrap;gap:6px}
.fixo-btn{background:rgba(31,111,235,.12);border:1px solid rgba(31,111,235,.35);color:var(--tx);padding:8px 14px;border-radius:14px;font-size:13.5px;cursor:pointer;text-align:left;transition:background .15s;font-family:inherit;animation:fixoBtnIn .32s cubic-bezier(.2,.8,.25,1) both}
.fixo-btn-destaque{background:linear-gradient(135deg,rgba(245,158,11,.18),rgba(217,119,6,.22));border:1.5px solid #d97706;color:#fbbf24;font-weight:600;box-shadow:0 0 0 0 rgba(245,158,11,.4);animation:fixoBtnIn .32s cubic-bezier(.2,.8,.25,1) both, destaqueGlow 2.4s ease-in-out infinite}
.fixo-btn-destaque:hover:not(:disabled){background:linear-gradient(135deg,rgba(245,158,11,.28),rgba(217,119,6,.32))!important}
@keyframes destaqueGlow{0%,100%{box-shadow:0 0 0 0 rgba(245,158,11,.4)}50%{box-shadow:0 0 0 6px rgba(245,158,11,0)}}
.fixo-btns.compact .fixo-btn{padding:7px 14px;font-size:12.5px;text-align:center}
.fixo-btn:hover:not(:disabled){background:rgba(31,111,235,.25)}
.fixo-btn:disabled{opacity:.4;cursor:not-allowed}
.fixo-btn:nth-child(1){animation-delay:.05s}
.fixo-btn:nth-child(2){animation-delay:.13s}
.fixo-btn:nth-child(3){animation-delay:.21s}
.fixo-btn:nth-child(4){animation-delay:.29s}
.fixo-btn:nth-child(5){animation-delay:.37s}
.fixo-btn:nth-child(6){animation-delay:.45s}
.fixo-btn:nth-child(7){animation-delay:.53s}
.fixo-btn:nth-child(8){animation-delay:.61s}
.fixo-btn:nth-child(n+9){animation-delay:.69s}
@keyframes fixoBtnIn{from{opacity:0;transform:translateY(8px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}
#chat-toast{position:fixed;bottom:80px;left:50%;transform:translateX(-50%) translateY(10px);background:#238636;color:#fff;font-size:13px;font-weight:600;padding:8px 18px;border-radius:20px;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:999}
#chat-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.msg-time{font-size:10px;color:var(--mt);float:right;margin-left:10px;margin-top:3px;white-space:nowrap;line-height:1.2}
#btn-perfil{position:absolute;right:14px;top:10px;background:transparent;border:1px solid var(--b);color:var(--mt);padding:6px 9px;border-radius:8px;cursor:pointer;font-size:13px;transition:.15s;display:flex;align-items:center;justify-content:center;line-height:1}
#btn-perfil svg{width:18px;height:18px;display:block}
#btn-perfil:hover{background:var(--s2);color:var(--tx)}
/* "Como funciona" — ícone info no topo-esquerdo (espelha o botão Perfil) + modal explicativo */
#btn-info{position:absolute;left:14px;top:10px;background:transparent;border:1px solid var(--b);color:var(--mt);padding:6px 9px;border-radius:8px;cursor:pointer;transition:.15s;display:flex;align-items:center;justify-content:center;line-height:1}
#btn-info svg{width:18px;height:18px;display:block}
#btn-info:hover{background:var(--s2);color:var(--tx)}
#info-modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:1000;align-items:center;justify-content:center;padding:16px}
#info-modal.open{display:flex}
.info-card{background:var(--s1);border:1px solid var(--b);border-radius:14px;padding:22px 20px 18px;width:100%;max-width:360px;display:flex;flex-direction:column;gap:13px;position:relative}
.info-card h3{font-size:17px;font-weight:700;color:var(--tx);display:flex;align-items:center;gap:8px;margin-bottom:2px}
.info-card h3 svg{width:20px;height:20px;color:var(--ac)}
.info-step{display:flex;gap:11px;align-items:flex-start}
.info-step .n{flex-shrink:0;width:26px;height:26px;border-radius:50%;background:var(--ac);color:#fff;font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:center}
.info-step .t{font-size:13.5px;color:var(--tx);line-height:1.45;padding-top:2px}
.info-step .t b{font-weight:700}
.info-trust{margin-top:2px;font-size:12.5px;color:var(--wa);display:flex;align-items:center;gap:6px;justify-content:center;background:rgba(37,211,102,.10);border:1px solid rgba(37,211,102,.28);border-radius:10px;padding:9px}
.info-trust svg{width:15px;height:15px;flex-shrink:0}
.info-close{position:absolute;top:9px;right:12px;background:none;border:0;color:var(--mt);font-size:23px;line-height:1;cursor:pointer;padding:2px 6px}
.info-close:hover{color:var(--tx)}
.info-cta{background:var(--ac);border:none;border-radius:10px;padding:11px;color:#fff;font-size:14px;font-weight:600;cursor:pointer;margin-top:4px;transition:background .15s}
.info-cta:hover{background:#1158c4}
#perfil-modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:1000;align-items:center;justify-content:center;padding:16px}
#perfil-modal.open{display:flex}
.perfil-card{background:var(--s1);border:1px solid var(--b);border-radius:12px;padding:18px;width:100%;max-width:340px;display:flex;flex-direction:column;gap:12px}
.perfil-card h3{font-size:15px;font-weight:600}
.perfil-card label{font-size:12px;color:var(--mt);display:block;margin-bottom:4px}
.perfil-card input[type=text]{width:100%;background:var(--s2);border:1px solid var(--b);border-radius:8px;padding:8px 10px;color:var(--tx);font-size:14px;font-family:inherit;outline:none}
.perfil-card input[type=text]:focus{border-color:var(--ac)}
.perfil-foto-area{display:flex;align-items:center;gap:12px}
.perfil-foto-prev{width:60px;height:60px;border-radius:50%;background:var(--s2);border:1px solid var(--b);object-fit:cover;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:22px;color:var(--mt)}
.perfil-foto-area button{background:var(--s2);border:1px solid var(--b);border-radius:8px;padding:7px 12px;color:var(--tx);font-size:13px;cursor:pointer;font-family:inherit}
.perfil-btns{display:flex;gap:8px;justify-content:flex-end;margin-top:6px}
.perfil-btns button{padding:8px 16px;border-radius:8px;font-size:13px;font-weight:600;cursor:pointer;font-family:inherit;border:1px solid var(--b);background:var(--s2);color:var(--tx)}
.perfil-btns .perfil-save{background:var(--ac);border-color:var(--ac);color:#fff}
.perfil-btns .perfil-save:disabled{opacity:.5;cursor:not-allowed}
@keyframes micPulse{0%,100%{opacity:1}50%{opacity:.55}}
#mic-status{display:none;align-items:center;gap:8px;font-size:12px;color:var(--mt);padding:0 6px}
#mic-status.show{display:flex}
#mic-status .rec-dot{width:8px;height:8px;border-radius:50%;background:var(--dg);animation:micPulse 1s infinite}
#emoji-picker{display:none;position:absolute;bottom:80px;left:14px;background:var(--s1);border:1px solid var(--b);border-radius:12px;padding:10px;box-shadow:0 12px 32px rgba(0,0,0,.5);z-index:50;max-width:280px;flex-wrap:wrap;gap:4px}
#emoji-picker.open{display:flex}
#emoji-picker button{background:transparent;border:none;font-size:22px;width:34px;height:34px;border-radius:6px;cursor:pointer;padding:0}
#emoji-picker button:hover{background:var(--s2)}
.msg-deletada .bubble{background:transparent!important;border:1px dashed var(--b)!important}
/* Ticks de leitura nas msgs do lead (estilo WhatsApp). */
/* Nome do atendente acima da msg (estilo WA group). Hide em continuations. */
.msg-autor{font-size:12px;font-weight:600;color:var(--ac);margin-bottom:2px;line-height:1.2}
.msg.continuation .msg-autor{display:none}
/* Reação emoji (badge flutuante na borda inferior da bolha — estilo WA). */
.msg .bubble{position:relative}
.msg-reacao-badge{position:absolute;bottom:-12px;right:8px;background:none;border:0;padding:0;font-size:15px;line-height:1;z-index:2;cursor:default;user-select:none}
.msg.agent .msg-reacao-badge,.msg.bot .msg-reacao-badge{right:auto;left:8px}
.msg-tick-lead{display:inline-flex;align-items:center;margin-left:3px;vertical-align:middle;flex-shrink:0;line-height:1}
.msg-tick-lead svg{display:block;height:13px;width:auto}
.msg-tick-lead.tick-sent{color:rgba(255,255,255,.55)}
.msg-tick-lead.tick-delivered{color:rgba(255,255,255,.55)}
.msg-tick-lead.tick-read{color:#34b7f1}
/* Em bolha do lead (azul), msg-time fica branco translúcido pra contrastar */
.msg.user .bubble:has(.msg-tick-lead) .msg-time{color:rgba(255,255,255,.7)}
/* 2026-06-09: reforço de entrega SÓ nas mídias do lead (foto/PDF/áudio) — palavra ao
   lado do tique. Lê `data-tick-status` (que _atualizarTickMsg mantém), então acompanha
   sozinho sent→delivered→read. Texto comum mantém só o tique (sem poluir). */
.msg.user.lead-midia .msg-tick-lead{display:inline-flex;gap:3px}
.msg.user.lead-midia .msg-tick-lead::after{font-size:10px;font-weight:600;letter-spacing:.2px;align-self:center}
.msg.user.lead-midia .msg-tick-lead[data-tick-status="sent"]::after{content:'Enviado'}
.msg.user.lead-midia .msg-tick-lead[data-tick-status="delivered"]::after{content:'Entregue'}
.msg.user.lead-midia .msg-tick-lead[data-tick-status="read"]::after{content:'Visto'}
/* Player de áudio minimalista — uma linha: btn | 0:00 | barra | hora | speed. */
.audio-player{display:flex;align-items:center;gap:7px;background:transparent;padding:1px 0;min-width:200px;max-width:240px}
.audio-player audio{display:none}
.audio-track{flex:1;display:flex;align-items:center;gap:6px;min-width:0}
.audio-time,.audio-hora{flex-shrink:0;font-size:9.5px;line-height:1;color:var(--mt);font-feature-settings:"tnum" 1}
.msg.user .audio-time,.msg.user .audio-hora{color:rgba(255,255,255,.75)}
/* Lead bubble já tem fundo azul translúcido — play branco invertido competia com
   a bolha. Mantém accent sólido pra contraste claro (mesmo padrão do atendente). */
.audio-btn{border:0;width:26px;height:26px;min-width:26px;border-radius:50%;background:var(--ac);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;padding:0;line-height:1;transition:transform .12s,filter .12s}
.audio-btn svg{width:11px;height:11px}
.audio-btn:hover{filter:brightness(1.1)}
.audio-btn:active{transform:scale(.94)}
.audio-bar{flex:1;height:2.5px;background:rgba(255,255,255,.18);border-radius:3px;overflow:hidden;cursor:pointer;position:relative;min-width:0}
.msg.agent .audio-bar,.msg.bot .audio-bar{background:rgba(0,0,0,.18)}
.audio-prog{height:100%;width:0%;background:var(--ac);border-radius:3px;transition:width .1s}
.msg.user .audio-prog{background:#fff}
.audio-speed{flex-shrink:0;font-size:9px;font-weight:700;color:var(--mt);background:transparent;border:1px solid var(--b);border-radius:8px;padding:1px 5px;cursor:pointer;line-height:1;font-feature-settings:"tnum" 1;transition:all .15s;min-width:24px;text-align:center}
.audio-speed:hover{border-color:var(--ac);color:var(--ac)}
.audio-speed.is-fast{background:var(--ac);color:#fff;border-color:var(--ac)}
.msg.user .audio-speed{color:rgba(255,255,255,.75);border-color:rgba(255,255,255,.3)}
.msg.user .audio-speed:hover,.msg.user .audio-speed.is-fast{background:#fff;color:var(--ac);border-color:#fff}
.bubble:has(.audio-player){padding:5px 8px}
/* msg-time externo escondido pra áudio — a hora vai dentro do audio-row2 (canto direito). */
.bubble:has(.audio-player) .msg-time{display:none!important}
/* Miniatura quadrada responsiva — clamp(min, preferred=50vw, max). Mobile pequeno
   pega 50vw, desktop trava em 220px. Click abre overlay fullscreen. */
.msg-img-thumb{width:clamp(85px,31vw,136px);aspect-ratio:1;object-fit:cover;border-radius:10px;display:block;cursor:zoom-in;background:var(--s2)}
.msg-img-thumb:hover{filter:brightness(1.05)}
.bubble:has(.msg-img-thumb){padding:4px}
/* Overlay lightbox */
#img-lightbox{display:none;position:fixed;inset:0;background:rgba(0,0,0,.92);z-index:9998;align-items:center;justify-content:center;padding:20px;cursor:zoom-out;animation:lbFade .15s ease}
#img-lightbox.open{display:flex}
#img-lightbox img{max-width:100%;max-height:100%;object-fit:contain;border-radius:6px;transform-origin:center center;will-change:transform;transition:transform .15s ease;touch-action:none;user-select:none;-webkit-user-drag:none}
#img-lightbox.zoomed{cursor:grab}
#img-lightbox-close{position:absolute;top:14px;right:14px;width:38px;height:38px;background:rgba(255,255,255,.12);border:0;border-radius:50%;color:#fff;font-size:22px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}
#img-lightbox-close:hover{background:rgba(255,255,255,.22)}
@keyframes lbFade{from{opacity:0}to{opacity:1}}
/* Visualizador de PDF in-app (lead) — espelha o #pdfViewer do painel */
#pdf-viewer{display:none;position:fixed;inset:0;background:rgba(0,0,0,.92);z-index:9998;flex-direction:column;padding:14px;gap:10px;animation:lbFade .15s ease}
#pdf-viewer.open{display:flex}
#pdf-viewer-bar{display:flex;align-items:center;gap:12px}
#pdf-viewer-nome{flex:1;color:#fff;font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#pdf-viewer-dl{color:#fff;text-decoration:none;background:rgba(255,255,255,.18);padding:6px 14px;border-radius:8px;font-size:13px}
#pdf-viewer-dl:hover{background:rgba(255,255,255,.3)}
#pdf-viewer-close{width:38px;height:38px;background:rgba(255,255,255,.12);border:0;border-radius:50%;color:#fff;font-size:22px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0}
#pdf-viewer-close:hover{background:rgba(255,255,255,.22)}
#pdf-viewer-frame{flex:1;width:100%;border:0;border-radius:10px;background:#fff}
/* Card de documento na bolha (lead) */
.msg-doc-card{display:flex;align-items:center;gap:10px;background:var(--s2);border:1px solid var(--b);border-left:3px solid #e53e3e;border-radius:10px;padding:10px 12px;text-decoration:none;color:inherit;cursor:pointer;max-width:280px;min-width:210px}
.msg-doc-card:hover{filter:brightness(1.06)}
.msg-doc-badge{width:38px;height:46px;background:#e53e3e;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;color:#fff;flex-shrink:0;letter-spacing:.02em;text-shadow:0 1px 2px rgba(0,0,0,.25)}
.msg-doc-nome{font-size:13px;color:var(--tx);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.msg-doc-sub{font-size:11px;color:var(--mt);margin-top:2px}
.msg-menu-popup button:active{background:rgba(218,54,51,.20)!important}
@keyframes apagarMenuIn{from{opacity:0;transform:translateY(-4px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}
/* 3-pontinhos FORA da bolha, lateral (paridade com chat WA do painel). */
/* user: row, menu antes da bolha (à esquerda do balão direito). */
/* agent/bot: row já existente, menu depois da bolha (à direita do balão esquerdo). */
.msg.user{flex-direction:row;align-items:center;gap:6px}
/* align-self:center força centralização vertical do botão mesmo quando o pai
   (agent/bot) usa align-items:flex-end pra ancorar o avatar no rodapé. */
.msg-menu{flex-shrink:0;display:flex;align-items:center;justify-content:center;align-self:center;opacity:0;transition:opacity .15s}
.msg:hover .msg-menu{opacity:1}
@media (hover:none){.msg-menu{opacity:.7}}
.msg-menu-btn{display:flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;background:transparent;border:0;color:var(--mt);cursor:pointer;padding:0;transition:background .12s,color .12s}
.msg-menu-btn:hover{background:var(--s2);color:var(--tx)}
.msg-menu-btn:focus{background:var(--s2);color:var(--tx);outline:1px solid var(--ac)}
/* Quote bar dentro da bolha (citação) */
.msg-quote{border-left:3px solid var(--ac);background:rgba(31,111,235,.10);border-radius:5px;padding:5px 8px;margin-bottom:6px;font-size:12px;line-height:1.35}
.msg-quote-autor{font-size:10.5px;color:var(--ac);font-weight:600;margin-bottom:1px}
.msg-quote-txt{color:var(--mt);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:280px}
.msg.user .msg-quote{border-left-color:#a78bfa;background:rgba(167,139,250,.12)}
.msg.user .msg-quote-autor{color:#a78bfa}

/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVIDADE MOBILE — auditoria 2026-05-17 noite
   Cobre: input area compacto, modais, picker, iOS zoom em inputs <16px,
   padding apertado, bubble largura, captura-menor form.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Shake animation pro botão Continuar quando lead tenta submit com typo
   detectado (Opção 2 anti-bounce — 28/05). Feedback visual claro de
   "espera, tem algo errado" sem bloquear. */
@keyframes prechat-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-8px); }
  40% { transform: translateX(8px); }
  60% { transform: translateX(-5px); }
  80% { transform: translateX(5px); }
}

/* A/B form variante A (15/06): tema CLARO + cabeçalho de confiança (foto + online).
   Tudo escopado em #prechat-overlay.pc-light — variante B e o default (escuro) ficam intactos. */
#prechat-overlay.pc-light{background:#fff!important}
#prechat-overlay.pc-light > div{background:#fff!important;border-color:transparent!important;box-shadow:none!important;max-width:380px}
#prechat-overlay.pc-light #prechat-intro-sub{color:#5b6470!important}
#prechat-overlay.pc-light .pc-lbl{color:#5b6470!important}
#prechat-overlay.pc-light #prechat-nome,
#prechat-overlay.pc-light #prechat-email,
#prechat-overlay.pc-light #prechat-conta{background:#f4f7fb!important;border-color:#e6ebf2!important;color:#11181f!important}
#prechat-overlay.pc-light #prechat-nome::placeholder,
#prechat-overlay.pc-light #prechat-email::placeholder,
#prechat-overlay.pc-light #prechat-conta::placeholder{color:#9aa4b2}
#prechat-overlay.pc-light #prechat-btn{background:#16a34a!important}
#prechat-overlay.pc-light #prechat-email-preview{background:#eef4ff!important;color:#5b6470!important}
#prechat-overlay.pc-light #prechat-email-preview strong{color:#11181f!important}
#prechat-overlay.pc-light #prechat-email-hint{background:#fff8e6!important;border-color:#eab308!important;color:#5a4a16!important}
.pc-hd{display:flex;flex-direction:column;align-items:center;text-align:center;gap:9px;margin-bottom:18px}
.pc-hd img{width:110px;height:110px;border-radius:50%;object-fit:cover;flex-shrink:0;background:#c2cedd}
.pc-hd-nm{font-size:15px;font-weight:600;color:#11181f;line-height:1.3}
.pc-hd-st{font-size:12px;color:#16a34a;display:flex;align-items:center;justify-content:center;gap:5px;margin-top:3px}
.pc-hd-st i{width:7px;height:7px;border-radius:50%;background:#16a34a;display:inline-block;flex-shrink:0}
/* lapidação variante A (15/06): ancoragem, headline, anel, confiança */
#prechat-overlay.pc-light{align-items:flex-start!important;padding-top:6vh!important;overflow-y:auto}
#prechat-overlay.pc-light .pc-hd{margin-bottom:10px}
#prechat-overlay.pc-light .pc-hd img{box-shadow:none}
.pc-av-block{position:relative;display:inline-flex;justify-content:center;margin-top:26px}
.pc-nota{position:absolute;left:50%;top:-22px;transform:translateX(calc(-50% + 30px));z-index:3;pointer-events:none;background:#fff;border:1px solid #ededed;border-radius:15px;padding:6px 12px;font-size:11px;font-weight:500;color:#1c1c1e;box-shadow:0 4px 14px rgba(0,0,0,.14);line-height:1.3;text-align:center;white-space:nowrap}
.pc-nota-dots{position:absolute;left:50%;top:6px;transform:translateX(-50%);z-index:3;pointer-events:none;display:flex;flex-direction:column;align-items:center;gap:2px}
.pc-nota-dots i{background:#fff;border:1px solid #ededed;border-radius:50%;display:block}
.pc-nota-dots i:nth-child(1){width:8px;height:8px;transform:translateX(18px)}
.pc-nota-dots i:nth-child(2){width:4px;height:4px}
.pc-av-ring{border-radius:50%;display:inline-flex;line-height:0;box-shadow:0 5px 20px rgba(0,0,0,.13)}
.pc-av-ring img{border:4px solid #fff!important;box-shadow:none!important}
#prechat-overlay.pc-light #prechat-intro-title{display:block!important;color:#11181f!important;text-align:center;font-size:19px!important;font-weight:600!important;margin:0!important;line-height:1.25}
#prechat-overlay.pc-light #prechat-trabalhe{color:#aeb6c1!important;font-size:11px!important}
#prechat-overlay.pc-light #prechat-modelo{color:#aeb6c1!important;font-size:11px!important}
#prechat-overlay.pc-light .pc-footer{position:fixed!important;left:0;right:0;bottom:0;justify-content:space-between!important;gap:12px;padding:14px 24px calc(14px + env(safe-area-inset-bottom,0px))!important;margin-top:0!important;background:#fff;border-top:1px solid #f1f4f8}
.pc-vf{display:inline-block;width:15px;height:15px;color:#1f6feb;vertical-align:-3px}
.pc-trust{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:7px;margin:10px 0 16px;font-size:11.5px;color:#41506a;font-weight:500}
.pc-trust>span{display:inline-flex;align-items:center;gap:4px}
.pc-trust .sep{color:#cdd5df}
.pc-trust svg{width:14px;height:14px;color:#16a34a}
.pc-re{display:flex;align-items:center;justify-content:center;gap:5px;font-size:11px;color:#5b6470;margin-top:10px}
.pc-re svg{width:14px;height:14px;color:#16a34a;flex-shrink:0}
.cupom-card{background:#fff;border-radius:16px;padding:26px 22px 22px;max-width:340px;width:100%;text-align:center;position:relative;box-shadow:0 14px 44px rgba(0,0,0,.32);font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif}
.cupom-x{position:absolute;top:9px;right:12px;background:none;border:none;font-size:24px;color:#9aa4b2;cursor:pointer;line-height:1;font-family:inherit}
.cupom-emoji{font-size:38px;line-height:1;margin-bottom:6px}
.cupom-titulo{font-size:19px;font-weight:700;color:#11181f;margin-bottom:6px}
.cupom-sub{font-size:13px;color:#5b6470;line-height:1.45;margin-bottom:16px}
.cupom-sub b{color:#16a34a}
.cupom-cod-wrap{display:flex;align-items:stretch;gap:8px;border:2px dashed #16a34a;background:#f0fdf4;border-radius:12px;padding:8px 8px 8px 12px;margin-bottom:13px}
.cupom-cod{flex:1;font-family:ui-monospace,SFMono-Regular,monospace;font-size:20px;font-weight:700;letter-spacing:1px;color:#15803d;display:flex;align-items:center;justify-content:center;min-height:34px}
.cupom-copiar{background:#16a34a;border:none;border-radius:8px;color:#fff;font-size:12px;font-weight:600;padding:0 14px;cursor:pointer;font-family:inherit;flex-shrink:0}
.cupom-instr{font-size:12px;color:#41506a;background:#f4f7fb;border-radius:10px;padding:10px 12px;line-height:1.45;margin-bottom:16px}
.cupom-ok{width:100%;background:#16a34a;border:none;border-radius:10px;color:#fff;font-size:14px;font-weight:600;padding:12px;cursor:pointer;font-family:inherit}
.pc-footer svg{width:13px!important;height:13px!important;flex-shrink:0}
.cupom-emoji svg{width:40px;height:40px;color:#16a34a;stroke-width:1.7}
.cupom-instr svg{width:14px;height:14px;vertical-align:-2px;margin-right:5px;color:#16a34a}

/* Phone/tablet (≤520px): tightening geral. */
@media (max-width:520px){
  /* iOS Safari auto-zoom em focus de input com font <16px — força 16 em todos. */
  #txt,
  #prechat-nome,#prechat-email,#prechat-conta,
  .perfil-card input[type=text],
  .cm-form input{font-size:16px}
  /* Msgs com padding menor — mais espaço pras bolhas em narrow. */
  #msgs{padding:12px;gap:8px}
  /* Input area compacto. */
  #inp-area{padding:8px 10px;gap:6px}
  #inp-area .icon-grp{gap:2px}
  #inp-area .icon-btn{width:38px;height:42px}
  #inp-area .icon-btn svg{width:20px;height:20px}
  #txt-wrap{padding:3px 4px 3px 14px;border-radius:20px;min-height:42px}
  #btn-send{width:42px;height:42px;margin-left:2px}
  #btn-send svg{width:18px;height:18px}
  /* Modal pré-chat: overlay com menos padding, card com padding menor. */
  #prechat-overlay{padding:12px!important}
  #prechat-overlay > div{padding:18px!important}
  /* Modal perfil. */
  #perfil-modal{padding:10px}
  .perfil-card{padding:14px;gap:10px;max-width:none}
  .perfil-card h3{font-size:14px}
  /* Bolhas: padding um pouquinho menor. */
  .bubble{padding:9px 12px}
  /* Picker emoji: cobre largura quase toda sem grudar nas bordas. */
  #emoji-picker{max-width:calc(100vw - 24px);left:12px;right:12px;bottom:74px}
  /* Captura-menor: input mínimo menor + button wrap ok. */
  .cm-form input{min-width:0;flex:1 1 140px}
  .cm-form button{flex:0 0 auto}
  .cm-card{padding:10px 12px}
  /* WhatsApp/Telegram cards: padding menor. */
  .wa-card,.tg-card{padding:12px 14px;gap:10px}
  .wa-icon,.tg-card .wa-icon{font-size:24px}
  /* Mensagem horário não cola na borda inferior em bolha de imagem. */
  .bubble:has(img) .msg-time,.bubble:has(audio) .msg-time{bottom:4px;right:6px}
}

/* Phone estreito (≤380px): mais aperto. */
@media (max-width:380px){
  #msgs{padding:10px 8px;gap:7px}
  #inp-area{padding:6px 8px;gap:4px}
  #inp-area .icon-btn{width:34px;height:40px}
  #inp-area .icon-btn svg{width:18px;height:18px}
  #txt-wrap{padding:2px 3px 2px 12px;min-height:40px}
  #btn-send{width:40px;height:40px}
  .bubble{padding:8px 11px;font-size:13.5px}
  .msg{max-width:84%}
  /* Modal pré-chat ainda mais compacto. */
  #prechat-overlay > div{padding:14px!important}
  /* Botões fixo wrapped. */
  .fixo-btn{padding:7px 12px;font-size:13px}
  .fixo-btns.compact .fixo-btn{padding:6px 11px;font-size:12px}
  /* Captura-menor: form em coluna se não couber. */
  .cm-form{gap:5px}
}

/* Phone muito estreito (≤340px) — Galaxy Fold/iPhone SE antigo. */
@media (max-width:340px){
  #inp-area{padding:5px 6px}
  #inp-area .icon-grp{gap:0}
  #inp-area .icon-btn{width:32px}
  #txt-wrap{padding-left:10px}
  .bubble{font-size:13px;padding:7px 10px}
  .msg{max-width:88%}
}

/* Landscape phone (altura baixa): pre-chat overlay scrolla se conteúdo passa. */
@media (max-height:480px){
  #prechat-overlay{align-items:flex-start;padding-top:8px;overflow-y:auto}
  #perfil-modal{align-items:flex-start;padding-top:8px;overflow-y:auto}
}