:root{
  --azul:#2C2E87; --azul-esc:#23246c; --amarelo:#F6D100; --amarelo-txt:#F6D100;
  --fundo:#ffffff; --linha:#e3e5eb; --texto:#1f2433; --cinza:#6a7082; --suave:#f4f5f8;
  --ok:#0a7a42; --okbg:#e8f4ed; --atencao:#b7800f; --atencaobg:#fbf3df; --crit:#c0392b; --critbg:#fbe9e7;
  --topo:64px;
  --seg-top:var(--safe-area-inset-top,env(safe-area-inset-top,0px)); --seg-bot:var(--safe-area-inset-bottom,env(safe-area-inset-bottom,0px));
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%}
body{font-family:Roboto,"Segoe UI",system-ui,-apple-system,Arial,sans-serif;color:var(--texto);background:var(--fundo);font-size:16px;line-height:1.4;overscroll-behavior-y:none}
body.inicio{background:var(--amarelo)}
button,input,select,textarea{font:inherit}
[hidden]{display:none!important}

/* ===== barra de cima ===== */
#topo{position:fixed;top:0;left:0;right:0;z-index:20;height:calc(var(--topo) + var(--seg-top));padding-top:var(--seg-top);display:flex;align-items:center;background:var(--azul);color:#fff}
#topo .tb{width:60px;height:var(--topo);display:grid;place-items:center;background:none;border:0;color:#fff;cursor:pointer;flex:none}
#topo-meio{flex:1;display:flex;justify-content:center;align-items:center;min-width:0}
#topo-logo{height:44px;width:auto}
#topo-titulo{font-size:19px;font-weight:700;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#tela{padding-top:calc(var(--topo) + var(--seg-top));padding-bottom:calc(24px + var(--seg-bot));min-height:100%}

/* ===== tela inicial ===== */
.grade{display:grid;grid-template-columns:repeat(3,1fr);gap:6px 0;padding:14px 4px 10px}
.bt-ini{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:10px;min-height:128px;padding:12px 2px 6px;background:none;border:0;color:var(--azul);cursor:pointer;border-radius:10px;text-align:center}
.bt-ini:active{background:rgba(44,46,135,.08)}
.bt-ini .ic{width:66px;height:66px;background:var(--azul);-webkit-mask:var(--ic) center/contain no-repeat;mask:var(--ic) center/contain no-repeat}
.bt-ini span{font-weight:500;font-size:16.5px;line-height:1.15;max-width:118px}
.grade .bt-ini:last-child:nth-child(3n+1){grid-column:2}

/* ===== telas internas ===== */
.pag{padding:18px 16px 8px;max-width:640px;margin:0 auto}
.pag h2{margin:4px 0 14px;font-size:20px;color:var(--azul)}
.intro{color:var(--cinza);margin:0 0 16px}
.vazio{padding:28px 10px;text-align:center;color:var(--cinza)}
.carregando{padding:36px 10px;text-align:center;color:var(--cinza)}

.btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:52px;padding:12px 16px;border-radius:10px;border:2px solid var(--azul);background:#fff;color:var(--azul);font-weight:700;font-size:16.5px;cursor:pointer;text-decoration:none}
.btn.pri{background:var(--azul);color:#fff}
.btn.ama{background:var(--amarelo);border-color:var(--amarelo);color:var(--azul)}
.btn:disabled{opacity:.55;cursor:default}
.btn+.btn{margin-top:12px}
.btn svg{flex:none}
.btn-peq{display:inline-flex;align-items:center;gap:6px;padding:8px 12px;border-radius:8px;border:1.5px solid var(--azul);background:#fff;color:var(--azul);font-weight:600;font-size:14px;text-decoration:none;cursor:pointer}

.cartao{border:1px solid var(--linha);border-radius:12px;background:#fff;margin-bottom:12px;overflow:hidden}
.cartao .ft{width:100%;max-height:220px;object-fit:cover;display:block;background:var(--suave)}
.cartao .cp{padding:14px 14px 12px;display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start}
.cartao .cp.sem-ic{grid-template-columns:1fr}
.ic-cat{width:46px;height:46px;border-radius:50%;background:var(--azul);display:grid;place-items:center}
.ic-cat img{width:28px;height:28px;object-fit:contain}
.cartao h3{margin:0 0 4px;font-size:17px;color:var(--texto)}
.cartao .dt{font-size:13.5px;color:var(--azul);font-weight:600;margin-bottom:4px}
.cartao .ds{margin:0;color:#3d4252;white-space:pre-line;font-size:15px}
.cartao .en{margin:6px 0 0;color:var(--cinza);font-size:14px}
.cartao .ac{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.cartao .dist{font-size:13px;color:var(--cinza);margin-top:4px}

.tel-linha{display:flex;align-items:center;gap:12px;padding:12px 4px;border-bottom:1px solid var(--linha);text-decoration:none;color:inherit}
.tel-linha .nm{flex:1;min-width:0}
.tel-linha .nm b{display:block;font-size:16px}
.tel-linha .nm span{color:var(--cinza);font-size:14.5px}
.tel-linha .lg{color:var(--azul);font-weight:700;font-size:14px}

/* ===== formulários ===== */
.campo{margin-bottom:16px}
.campo>label,.campo>.rot{display:block;font-weight:600;margin-bottom:6px;font-size:15px}
.campo input[type=text],.campo input[type=tel]{width:100%;padding:13px 12px;border:1.5px solid #c9cdd8;border-radius:10px;background:#fff;font-size:17px;color:var(--texto)}
.campo input:focus{outline:2px solid var(--azul);outline-offset:1px;border-color:var(--azul)}
.placa{font-size:26px!important;letter-spacing:4px;text-transform:uppercase;text-align:center;font-weight:700}
.opcoes{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.opcao{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:74px;padding:10px 8px;border:1.5px solid #c9cdd8;border-radius:10px;background:#fff;color:var(--texto);cursor:pointer;text-align:center;font-weight:600;font-size:15px}
.opcao[aria-pressed=true]{border-color:var(--azul);background:#eceefb;color:var(--azul);box-shadow:inset 0 0 0 1px var(--azul)}
.local{display:flex;align-items:center;gap:10px;padding:12px;border-radius:10px;background:var(--suave);font-size:15px}
.local .bol{width:10px;height:10px;border-radius:50%;background:var(--cinza);flex:none}
.local.ok .bol{background:var(--ok)}
.local.erro .bol{background:var(--crit)}
.local span{flex:1}
.foto-prev{display:block;max-width:100%;max-height:200px;border-radius:10px;margin-top:10px}
.msg{padding:12px;border-radius:10px;background:var(--critbg);color:#8a2318;margin-bottom:14px;font-size:15px}
.nota{font-size:14px;color:var(--cinza);margin:8px 0 0}

/* ===== sucesso ===== */
.feito{text-align:center;padding:26px 6px 10px}
.feito .ck{width:76px;height:76px;margin:0 auto 14px;border-radius:50%;background:var(--okbg);display:grid;place-items:center}
.feito h2{margin:0 0 8px}
.prot{display:inline-block;margin:6px 0 14px;padding:10px 16px;border-radius:10px;background:var(--suave);font-size:22px;font-weight:700;letter-spacing:1px;color:var(--azul)}

/* ===== pedágio ===== */
.deb{display:flex;align-items:center;gap:12px;padding:12px 4px;border-bottom:1px solid var(--linha)}
.deb input{width:24px;height:24px;accent-color:var(--azul);flex:none}
.deb .inf{flex:1;min-width:0}
.deb .inf b{display:block}
.deb .inf span{color:var(--cinza);font-size:14px}
.deb .vl{font-weight:700;white-space:nowrap}
.pilula{display:inline-flex;align-items:center;gap:6px;padding:2px 10px;border-radius:999px;font-size:12.5px;font-weight:600;border:1px solid}
.pilula:before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.pilula.at{color:var(--atencao);background:var(--atencaobg);border-color:#ecd59d}
.total{display:flex;justify-content:space-between;align-items:center;padding:14px 4px;font-size:18px}
.total b{font-size:22px;color:var(--azul)}
.qr{display:grid;place-items:center;padding:12px;border:1px solid var(--linha);border-radius:12px;margin:0 auto 12px;max-width:290px;background:#fff}
.qr svg{width:100%;height:auto;display:block}
.pix-vl{text-align:center;font-size:26px;font-weight:700;color:var(--azul);margin:4px 0}
.pix-rec{text-align:center;color:var(--cinza);margin:0 0 14px;font-size:14.5px}

/* ===== ocorrências ===== */
.ocor{border:1px solid var(--linha);border-left:5px solid var(--atencao);border-radius:10px;padding:12px 14px;margin-bottom:10px;background:#fff}
.ocor b{display:block;font-size:16.5px}
.ocor .lc{color:var(--azul);font-weight:600;font-size:14.5px;margin:2px 0}
.ocor p{margin:4px 0 0;color:#3d4252;font-size:15px}
.ocor .hr{color:var(--cinza);font-size:13px;margin-top:6px}

/* ===== menu lateral ===== */
#menu{position:fixed;inset:0;z-index:40}
.menu-fundo{position:absolute;inset:0;background:rgba(15,16,40,.45)}
.menu-painel{position:absolute;top:0;bottom:0;left:0;width:min(84vw,320px);background:#fff;overflow-y:auto;padding:calc(18px + var(--seg-top)) 0 calc(18px + var(--seg-bot));box-shadow:4px 0 24px rgba(0,0,0,.2)}
.menu-painel .mlogo{display:block;height:54px;margin:4px 20px 14px}
.menu-painel button,.menu-painel a{display:flex;align-items:center;gap:14px;width:100%;padding:11px 20px;background:none;border:0;color:var(--texto);font-size:16px;text-align:left;cursor:pointer;text-decoration:none}
.menu-painel button:active{background:var(--suave)}
.menu-painel .mic{width:34px;height:34px;border-radius:50%;background:var(--azul);display:grid;place-items:center;flex:none}
.menu-painel .mic img{width:20px;height:20px;object-fit:contain}
.menu-painel hr{border:0;border-top:1px solid var(--linha);margin:8px 0}
.menu-painel .ver{padding:8px 20px;color:var(--cinza);font-size:13px}

/* ===== busca ===== */
.busca-in{width:100%;padding:13px 12px;border:1.5px solid #c9cdd8;border-radius:10px;font-size:17px}
.res{display:flex;align-items:center;gap:12px;width:100%;padding:12px 4px;border:0;border-bottom:1px solid var(--linha);background:none;text-align:left;cursor:pointer;color:inherit}
.res span{color:var(--cinza);font-size:13.5px;display:block}

#aviso{position:fixed;left:50%;bottom:calc(24px + var(--seg-bot));transform:translateX(-50%);z-index:60;max-width:90vw;padding:12px 18px;border-radius:10px;background:#1f2433;color:#fff;font-size:15px;box-shadow:0 6px 20px rgba(0,0,0,.25)}
.aviso-cca{margin-top:20px;padding:14px 16px;border-radius:12px;border:1px solid #ecd59d;border-left:5px solid var(--atencao);background:var(--atencaobg)}
.aviso-cca.ok{border-color:#9fd0b4;border-left-color:var(--ok);background:var(--okbg)}
.aviso-cca b{display:block;font-size:16.5px}
.aviso-cca p{margin:6px 0 0;font-size:15px}

/* ===== localização ===== */
.loc-sos{display:flex;align-items:center;gap:10px;text-align:left;margin:0 0 14px;padding:12px;border-radius:10px;background:var(--okbg);color:#14532d;font-size:14.5px}
.loc-sos .bol{width:10px;height:10px;border-radius:50%;background:var(--ok);flex:none;animation:pisca 1.6s infinite}
@keyframes pisca{50%{opacity:.3}}
#ocor-frente{position:fixed;left:10px;right:10px;bottom:calc(14px + var(--seg-bot));z-index:35;display:flex;align-items:stretch;border-radius:12px;background:#fff;border:1px solid #ecd59d;border-left:6px solid var(--atencao);box-shadow:0 8px 24px rgba(0,0,0,.25)}
#ocor-frente .of-txt{flex:1;text-align:left;background:none;border:0;padding:12px 14px;cursor:pointer;color:var(--texto)}
#ocor-frente .of-txt b{display:block;font-size:16px}
#ocor-frente .of-txt span{color:var(--cinza);font-size:14px}
#ocor-frente .of-x{width:46px;background:none;border:0;font-size:26px;color:var(--cinza);cursor:pointer}
#loc-pergunta{position:fixed;inset:0;z-index:50;background:rgba(15,16,40,.55);display:flex;align-items:flex-end;justify-content:center;padding:16px 16px calc(16px + var(--seg-bot))}
.lp-caixa{width:100%;max-width:480px;background:#fff;border-radius:16px;padding:20px 18px}
.lp-caixa h3{margin:0 0 8px;color:var(--azul);font-size:19px}
.lp-caixa p{margin:0 0 16px;color:#3d4252;font-size:15.5px}
.lp-link{display:block;margin:12px auto 0;background:none;border:0;color:var(--azul);text-decoration:underline;font-size:14px;cursor:pointer}
body.com-aviso #tela{padding-bottom:calc(110px + var(--seg-bot))}

/* ===== pagamentos ===== */
.pg{padding-top:14px}
.abas{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;border-radius:14px;background:#eceef4;margin-bottom:6px}
.abas button{border:0;border-radius:11px;padding:11px 6px;background:none;color:var(--cinza);font-weight:700;font-size:15px;cursor:pointer}
.abas button[aria-selected=true]{background:#fff;color:var(--azul);box-shadow:0 1px 4px rgba(20,24,60,.15)}
.cartao-form{border:1px solid var(--linha);border-radius:16px;padding:14px 14px 16px;background:#fff;box-shadow:0 2px 10px rgba(20,24,60,.06);margin:14px 0 14px}
.cartao-form .btn{margin-top:12px}
.rot-c{text-align:center;color:var(--cinza);font-size:14px;margin-bottom:10px}
.placa-caixa{border:3px solid #1f2433;border-radius:12px;overflow:hidden;background:#fff}
.placa-caixa .faixa{background:#2f6bd8;color:#fff;font-size:11px;font-weight:700;letter-spacing:3px;text-align:center;padding:3px 0}
.placa-caixa.ext .faixa{background:#6a7082}
.placa-in{display:block;width:100%;border:0;outline:0;text-align:center;font:700 34px/1.2 ui-monospace,"Roboto Mono",Consolas,monospace;letter-spacing:6px;padding:10px 4px 12px;color:#1f2433;background:#fff;text-transform:uppercase}
.placa-in::placeholder{color:#c3c7d3}
.chave{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px;font-size:15.5px;cursor:pointer}
.chave input{position:absolute;opacity:0;pointer-events:none}
.chave i{position:relative;width:50px;height:30px;border-radius:15px;background:#cfd3de;flex:none;transition:background .15s}
.chave i:after{content:"";position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:left .15s}
.chave input:checked+i{background:var(--azul)}
.chave input:checked+i:after{left:23px}
.chave input:focus-visible+i{outline:2px solid var(--azul);outline-offset:2px}
.aceite{display:flex;align-items:flex-start;gap:12px;padding:6px 2px;font-size:15px;color:#3d4252;cursor:pointer}
.aceite input{width:22px;height:22px;accent-color:var(--azul);flex:none;margin:0}
.lnk{background:none;border:0;padding:0;color:var(--azul);text-decoration:underline;font:inherit;cursor:pointer}
.lnk.perigo{color:var(--crit)}
.pg .msg{margin-top:12px}
.pg #r-busca{margin-top:10px}
.res-card{border:1px solid var(--linha);border-radius:16px;padding:18px 16px;margin:18px 0 12px;background:#fff;box-shadow:0 2px 10px rgba(20,24,60,.06);text-align:center}
.res-card .btn{margin-top:14px}
.res-top{margin-bottom:10px}
.res-rot{display:block;color:var(--cinza);font-size:14px}
.res-valor{font-size:36px;font-weight:800;color:var(--azul);line-height:1.15;margin:2px 0 4px}
.res-tit{display:block;font-size:18px;margin-bottom:6px}
.res-card p{margin:6px 0 0;font-size:15px;color:#3d4252}
.res-card.sem-deb{border-left:6px solid var(--atencao);text-align:left}
.res-card.sem-deb.ok{border-left-color:var(--ok)}
.res-card.pix .qr{margin:14px auto 6px}
.placa-mini{display:inline-flex;flex-direction:column;align-items:center;min-width:104px;border:2px solid #1f2433;border-radius:7px;overflow:hidden;background:#fff;font:700 17px/1.3 ui-monospace,"Roboto Mono",Consolas,monospace;letter-spacing:2px;color:#1f2433;vertical-align:middle}
.placa-mini i{display:block;width:100%;background:#2f6bd8;color:#fff;font:700 8px/1.6 Roboto,Arial,sans-serif;letter-spacing:2px;font-style:normal;text-align:center}
.btn-soc{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;min-height:52px;margin-top:10px;border:1.5px solid #c9cdd8;border-radius:12px;background:#fff;color:#1f2433;font-weight:700;font-size:16px;cursor:pointer}
.btn-soc.apple{background:#000;border-color:#000;color:#fff}
.ola{display:flex;flex-direction:column;margin:12px 0 8px}
.ola span{font-size:19px;font-weight:700;color:var(--azul)}
.ola small{color:var(--cinza)}
.placa-item{display:flex;align-items:center;gap:14px;width:100%;padding:14px;margin-bottom:10px;border:1px solid var(--linha);border-radius:14px;background:#fff;box-shadow:0 1px 6px rgba(20,24,60,.05);text-align:left;cursor:pointer;color:inherit}
.pi-st{flex:1;display:flex;flex-direction:column;min-width:0}
.pi-st small{color:var(--cinza);font-size:13.5px}
.pi-valor{font-size:19px;color:var(--azul)}
.pi-seta{font-size:28px;color:#b0b5c3;line-height:1}
.conta-rodape{display:flex;justify-content:space-between;margin-top:22px;font-size:14.5px}
.voltar{display:block;margin:12px 0 6px;text-decoration:none;font-weight:600}
.det-placa{text-align:center;margin:6px 0 10px}
.lista-deb{border:1px solid var(--linha);border-radius:14px;padding:0 12px;background:#fff}
.lista-deb .deb:last-child{border-bottom:0}
.deb-vazio{width:24px;flex:none}
.remover{display:block;margin:22px auto 0;font-size:14.5px}
.central{display:block;text-align:center;margin:26px 0 6px;color:var(--azul);font-weight:600;text-decoration:none}
.placa-mini.ext i{background:#6a7082}

/* ===== chamada com o CCO ===== */
.cha-bts{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.cha-bts .btn{margin:0;flex-direction:column;gap:4px;min-height:74px;font-size:15.5px}
.cha-bts+.nota{margin-bottom:12px}
.pag>.btn+.cha-bts{margin-top:12px}
#chamada{position:fixed;inset:0;z-index:60;display:flex;flex-direction:column;background:#fff;color:var(--texto);padding:calc(16px + var(--seg-top)) 18px calc(22px + var(--seg-bot))}
body.em-chamada{overflow:hidden}
.ch-topo{text-align:center;display:flex;flex-direction:column;gap:4px}
.ch-tit{font-size:22px;font-weight:700;color:var(--azul)}
.ch-est{font-size:17px;color:var(--cinza);font-variant-numeric:tabular-nums}
.ch-prot{font-size:13px;color:var(--cinza)}
.ch-meio{flex:1;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;min-height:0;margin:14px 0}
.ch-roda{width:132px;height:132px;border-radius:50%;background:var(--azul);color:#fff;display:grid;place-items:center}
.ch-roda svg{width:56px;height:56px}
#chamada[data-fase=chamando] .ch-roda{animation:ch-pulso 1.6s ease-out infinite}
@keyframes ch-pulso{0%{box-shadow:0 0 0 0 rgba(44,46,135,.45)}100%{box-shadow:0 0 0 34px rgba(44,46,135,0)}}
.ch-nota{background:var(--atencaobg);color:#7a5600;border-radius:10px;padding:10px 12px;font-size:14.5px;text-align:center;max-width:320px}
.ch-bts{display:flex;justify-content:center;gap:22px}
.ch-bt{display:flex;flex-direction:column;align-items:center;gap:6px;background:none;border:0;color:var(--texto);font-size:13.5px;cursor:pointer;padding:0}
.ch-bt i{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;background:var(--suave);color:var(--azul);border:1.5px solid var(--linha)}
.ch-bt[aria-pressed=true] i{background:var(--azul);color:#fff;border-color:var(--azul)}
.ch-bt.fim i{background:var(--crit);border-color:var(--crit);color:#fff}
/* vídeo */
#chamada.video{background:#111;color:#fff}
#chamada.video .ch-tit{color:#fff}
#chamada.video .ch-est,#chamada.video .ch-prot{color:#d6d8e0}
#chamada.video .ch-bt{color:#fff}
#chamada.video .ch-bt:not(.fim) i{background:rgba(255,255,255,.14);border-color:transparent;color:#fff}
#chamada.video .ch-bt[aria-pressed=true]:not(.fim) i{background:#fff;color:#111}
#ch-remoto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:12px;background:#000;display:none}
#chamada.com-video #ch-remoto{display:block}
#chamada.com-video .ch-roda{display:none}
#ch-local{position:absolute;right:8px;bottom:8px;width:30%;max-width:130px;aspect-ratio:3/4;object-fit:cover;border-radius:10px;background:#333;border:2px solid #fff;z-index:2}
#ch-local.espelho{transform:scaleX(-1)}
.ch-nota{position:relative;z-index:3}
.ch-fim-box{margin:auto 0;text-align:center}
.ch-fim-box .ck{width:76px;height:76px;margin:0 auto 14px;border-radius:50%;background:var(--okbg);display:grid;place-items:center}
.ch-fim-box h2{margin:0 0 8px;color:var(--azul)}
.ch-fim-box p{color:var(--cinza);margin:0 0 10px}
.ch-fim-box .ch-prot-fim{font-weight:600;color:var(--texto);margin-bottom:22px}
.ch-bt.atende i{background:var(--ok);border-color:var(--ok);color:#fff}
#chamada.video .ch-bt.atende i{background:var(--ok);color:#fff}
#chamada[data-fase=recebendo] .ch-roda{animation:ch-pulso 1.2s ease-out infinite}
#chamada[data-fase=recebendo] .ch-bts{gap:70px}
#chamada[data-fase=recebendo] #ch-local{display:none}

/* ===== chat ===== */
body.tela-chat #tela{padding-bottom:0}
.chat{display:flex;flex-direction:column;height:calc(100dvh - var(--topo) - var(--seg-top))}
.chat-est{display:flex;align-items:center;gap:10px;padding:8px 14px;border-bottom:1px solid var(--linha);font-size:14px;color:var(--cinza);background:#fff}
.chat-est #h-est{color:var(--azul);font-weight:600}
.chat-prot{font-size:12px}
.chat-fim{margin-left:auto;background:none;border:1px solid var(--linha);border-radius:8px;padding:5px 10px;color:var(--texto);font-size:13px;cursor:pointer}
.chat-msgs{flex:1;overflow-y:auto;padding:14px 12px 8px;display:flex;flex-direction:column;gap:10px;background:var(--suave)}
.chat-b{max-width:84%;align-self:flex-start;background:#fff;border:1px solid var(--linha);border-radius:14px 14px 14px 4px;padding:9px 12px 6px;font-size:15.5px;line-height:1.35}
.chat-b.eu{align-self:flex-end;background:var(--azul);border-color:var(--azul);color:#fff;border-radius:14px 14px 4px 14px}
.chat-b.atendente{border-left:3px solid var(--amarelo)}
.chat-b.ia{background:var(--amarelo);border-color:var(--amarelo);color:var(--azul)}
.chat-b.ia .quem{color:var(--azul)}
.chat-b.ia .h{color:#6b5d10}
.chat-b.ia .chat-acao{background:var(--azul);color:#fff}
.chat-b.ia .chat-link{color:var(--azul)}
.chat-barra button#h-env.ocupado{opacity:.5}
.chat-b .quem{display:block;font-size:12px;color:var(--azul);font-weight:600;margin-bottom:3px}
.chat-b .h{display:block;text-align:right;font-size:11px;color:var(--cinza);margin-top:4px}
.chat-b.eu .h{color:#d9dbf2}
.chat-b.pend{opacity:.7}
.chat-b.erro{background:var(--crit)}
.chat-sis{align-self:center;max-width:90%;text-align:center;font-size:13.5px;color:var(--cinza);background:#fff;border:1px dashed var(--linha);border-radius:10px;padding:8px 12px}
.chat-acoes{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px;justify-content:center}
.chat-b .chat-acoes{justify-content:flex-start}
.chat-acao{display:inline-flex;align-items:center;gap:6px;padding:8px 12px;border-radius:10px;background:var(--amarelo);color:var(--azul);font-weight:700;font-size:14px;text-decoration:none;border:0;cursor:pointer}
.chat-acao svg{width:18px;height:18px}
.chat-digita{align-self:flex-start;background:#fff;border:1px solid var(--linha);border-radius:14px;padding:10px 14px;display:flex;gap:5px}
.chat-digita i{width:7px;height:7px;border-radius:50%;background:var(--cinza);animation:chat-pula 1s infinite}
.chat-digita i:nth-child(2){animation-delay:.15s}.chat-digita i:nth-child(3){animation-delay:.3s}
@keyframes chat-pula{0%,60%,100%{opacity:.3}30%{opacity:1}}
.chat-barra{display:flex;align-items:flex-end;gap:8px;padding:8px 10px calc(8px + var(--seg-bot));border-top:1px solid var(--linha);background:#fff}
.chat-barra textarea{flex:1;resize:none;border:1px solid var(--linha);border-radius:20px;padding:10px 14px;font-size:16px;max-height:120px;line-height:1.3}
.chat-barra button#h-env{width:46px;height:46px;border-radius:50%;border:0;background:var(--azul);color:#fff;display:grid;place-items:center;flex:none;cursor:pointer}
.chat-barra .btn{margin:0}
.chat-0800{display:flex;align-items:center;gap:8px;padding:10px 14px;background:var(--amarelo);color:var(--azul);font-weight:700;font-size:15px;text-decoration:none;border-bottom:1px solid var(--linha)}
.chat-0800 svg{width:20px;height:20px;flex:none}
.chat-0800 small{margin-left:auto;font-weight:600;font-size:12px;opacity:.8}
.pag .chat-0800{border-radius:12px;border:0;margin-top:16px}
.chat-link{color:var(--azul);font-weight:700;text-decoration:underline}
/* páginas montadas no painel */
.pagina h2{margin:6px 0 10px;font-size:21px;color:var(--azul)}
.pg-tx{margin:0 0 14px;font-size:15.5px;line-height:1.5;color:#3d4252}
.pg-tx b{color:var(--texto)}
.pg-img{display:block;width:100%;border-radius:12px;margin:0 0 14px;background:var(--suave)}
.pagina .pg-bt{margin:0 0 12px}
.cartao .sub{font-size:14px;color:var(--azul);font-weight:600;margin:-2px 0 4px}
/* Convite para instalar o app pelo navegador */
.instalar{display:flex;align-items:center;gap:12px;margin:14px 14px 0;padding:12px 12px 12px 14px;border:1px solid var(--linha);border-radius:14px;background:var(--suave)}
.instalar img{width:44px;height:44px;border-radius:10px;flex:none}
.instalar div{flex:1;display:grid;gap:2px;font-size:13px;color:var(--cinza);line-height:1.35}
.instalar b{color:var(--texto);font-size:14.5px}
.instalar svg{vertical-align:-3px;color:var(--azul)}
.btn-inst{background:var(--azul);color:#fff;border:0;border-radius:10px;padding:9px 14px;font-weight:700;font-size:14px;flex:none}
.inst-x{background:none;border:0;color:var(--cinza);font-size:24px;line-height:1;padding:2px 6px;flex:none}
.chat-av{margin-left:auto;background:var(--azul);color:#fff;border:0;border-radius:8px;padding:5px 10px;font-size:12.5px;font-weight:700}
.chat-av + .chat-fim{margin-left:8px}
/* Atendimento */
.at-bts{display:grid;gap:10px;margin-top:12px}
.at-bts.n3{grid-template-columns:repeat(3,1fr)}
.at-bts.n2{grid-template-columns:1fr 1fr}
.at-bts.n1{grid-template-columns:1fr}
.at-bt{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:86px;padding:10px 6px;border-radius:14px;background:var(--azul);color:#fff;text-decoration:none;font-weight:700;font-size:14.5px;line-height:1.2;text-align:center}
.at-bt svg{width:26px;height:26px}
.btn-volta{display:grid;gap:3px;width:100%;margin:0 0 16px;padding:14px 16px;border:2px solid var(--azul);border-radius:14px;background:#eef0fa;color:var(--azul);text-align:left;text-decoration:none;font:inherit;cursor:pointer}
.btn-volta b{font-size:16px}
.btn-volta span{font-size:14px;color:var(--texto)}
.btn-volta.so-info{border-color:var(--ok);background:var(--okbg);color:var(--ok);cursor:default}
.at-bts+.btn{margin-top:12px}
/* ===== minha conta (painel lateral) ===== */
.mc-topo{display:flex;align-items:center;gap:10px;padding:4px 20px 14px;color:var(--azul);font-size:19px;font-weight:700}
.mc-ola{display:grid;gap:2px;padding:4px 20px 10px}
.mc-ola b{font-size:17px;color:var(--texto)}
.mc-ola small,.mc-entrar small{color:var(--cinza);font-size:13.5px}
.mc-entrar{display:grid;gap:6px;padding:4px 20px 12px}
.mc-entrar b{font-size:16px;line-height:1.3}
.menu-painel .btn-soc{justify-content:center;gap:12px;min-height:48px;margin-top:6px;padding:0 12px;border:1.5px solid #c9cdd8;border-radius:12px;background:#fff;font-weight:700;font-size:15px}
.menu-painel .btn-soc.apple{background:#000;border-color:#000;color:#fff}
.mc-sec{padding:12px 20px 6px;color:var(--cinza);font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.mc-abertos{padding:0 16px}
.menu-painel .btn-volta{display:grid;gap:3px;margin:0 0 10px;padding:12px 14px;border:2px solid var(--azul);border-radius:12px;background:#eef0fa;color:var(--azul)}
.menu-painel .btn-volta.so-info{border-color:var(--ok);background:var(--okbg);color:var(--ok)}
.menu-painel .btn-volta span{font-size:13.5px}
/* ===== meus atendimentos ===== */
.hist{display:grid;gap:10px}
.hist-it{display:grid;gap:4px;padding:12px 14px;border:1px solid var(--linha);border-radius:12px}
.hist-l1{display:flex;justify-content:space-between;align-items:center;gap:10px}
.hist-l1 b{font-size:15.5px}
.hist-it small{color:var(--cinza);font-size:13px}
.pilula.ok{color:var(--ok);background:var(--okbg);border-color:#b9dcc7}
.pilula.cz{color:var(--cinza);background:var(--suave);border-color:var(--linha)}
.pilula.cr{color:var(--crit);background:var(--critbg);border-color:#efc1bb}
.hist-it.abre{width:100%;text-align:left;font:inherit;color:inherit;background:#fff;cursor:pointer}
.hist-it.abre:active{background:var(--suave)}
.hist-ver{color:var(--azul);font-size:13.5px;font-weight:600}
.chat-hist{display:flex;flex-direction:column;min-height:calc(100vh - 60px)}
.chat-hist .chat-msgs{flex:1}
.hist-nota{align-self:center;text-align:center;margin:8px 4px}