/* 1.63.1 (onda B, B2): tela Suporte (web/suporte.js). Folha de vidro estilo Apple: no computador fica à direita, sobre
   a operação; no celular e no app ocupa a tela entre a barra de status e a borda de baixo (a barra de abas do app
   some enquanto a conversa está aberta). Usa os tokens do Hub (vidro grosso para texto denso, cores do sistema, --dt
   para o tamanho da letra) e respeita Reduzir Transparência, Aumentar Contraste e Reduzir Movimento. */
#suporte-raiz{position:fixed;inset:0;z-index:1300;pointer-events:none}
#suporte-raiz[hidden]{display:none}
/* .sr-only: o global do Hub (index.html, 10.2) */
#suporte-raiz .sup-veu{position:absolute;inset:0;background:var(--vidro-veu,rgba(58,42,30,.22));opacity:0;transition:opacity var(--dur-lenta,.32s) var(--curva-padrao,ease);pointer-events:auto}
#suporte-raiz.aberto .sup-veu{opacity:1}
#suporte-raiz .sup-painel{position:absolute;top:12px;right:12px;bottom:12px;width:min(480px,calc(100vw - 24px));display:flex;flex-direction:column;overflow:hidden;pointer-events:auto;
  background:var(--vidro-grosso,rgba(252,250,247,.86));-webkit-backdrop-filter:blur(var(--vidro-desfoque,24px)) saturate(var(--vidro-saturacao,180%));backdrop-filter:blur(var(--vidro-desfoque,24px)) saturate(var(--vidro-saturacao,180%));
  border-radius:var(--r-sheet,20px);box-shadow:var(--vidro-brilho),var(--vidro-sombra-alta,0 18px 46px rgba(40,25,12,.2));color:var(--label,#3A2A1E);
  transform:translateX(24px);opacity:0;transition:transform var(--dur-lenta,.32s) var(--curva-padrao,cubic-bezier(.2,.8,.2,1)),opacity var(--dur-media,.2s) ease}
#suporte-raiz.aberto .sup-painel{transform:none;opacity:1}
body.suporte-aberto{overflow:hidden}

/* topo */
.sup-topo{flex:none;display:flex;align-items:flex-start;gap:4px;padding:14px 10px 10px 18px;border-bottom:.5px solid var(--sep,rgba(58,42,30,.14))}
.sup-titulos{flex:1;min-width:0}
.sup-topo h2{margin:2px 0 0;font-size:calc(22px * var(--dt,1));font-weight:700;letter-spacing:-.01em}
.sup-sub{margin:3px 0 0;color:var(--label2,#6B5A4C);font-size:calc(13px * var(--dt,1));line-height:1.35}
.sup-icone{flex:none;width:44px;height:44px;border:0;border-radius:50%;background:transparent;color:var(--label2,#6B5A4C);display:grid;place-items:center;cursor:pointer;transition:background var(--dur-rapida,.12s),transform var(--dur-rapida,.12s)}
.sup-icone[hidden]{display:none}
.sup-icone svg,.sup-mic svg,.sup-enviar svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@media (hover:hover){.sup-icone:hover{background:var(--fill,rgba(90,65,45,.08))}}
.sup-icone:active{transform:scale(var(--apertado-escala,.97));background:var(--fill2,rgba(90,65,45,.12))}
.sup-icone:focus-visible,.sup-botao:focus-visible,.sup-chip:focus-visible,.sup-mic:focus-visible,.sup-enviar:focus-visible{outline:var(--foco-largura,3px) solid var(--foco-cor,#2F7CF6);outline-offset:2px}

/* conversa */
.sup-rolagem{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding:14px 14px 6px}
.sup-lista{display:flex;flex-direction:column;gap:10px}
.sup-msg{display:flex;flex-direction:column;max-width:88%;gap:4px}
.sup-pessoa{align-self:flex-end;align-items:flex-end}
.sup-assistente,.sup-humano,.sup-sistema{align-self:flex-start;align-items:flex-start}
.sup-bolha{padding:10px 14px;border-radius:18px;font-size:calc(16px * var(--dt,1));line-height:1.4;overflow-wrap:anywhere}
.sup-bolha p{margin:0}
.sup-bolha p+p{margin-top:6px}
.sup-bolha ol{margin:4px 0 0;padding-left:22px}
.sup-bolha li{margin:3px 0}
.sup-pessoa .sup-bolha{background:var(--on-blue,#0062BD);color:#fff;border-bottom-right-radius:6px}
.sup-assistente .sup-bolha{background:var(--surface,#fff);box-shadow:inset 0 0 0 .5px var(--sep,rgba(58,42,30,.14));border-bottom-left-radius:6px}
.sup-humano .sup-bolha{background:color-mix(in srgb,var(--sys-green,#34C759) 16%,var(--surface,#fff));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--sys-green,#34C759) 40%,transparent);border-bottom-left-radius:6px}
.sup-quem{display:inline-flex;align-items:center;gap:6px;font-size:max(11px, calc(12px * var(--dt,1)));font-weight:700;color:color-mix(in srgb,var(--sys-green,#34C759) 60%,var(--label,#3A2A1E))}
.sup-quem svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2}
.sup-hora{font-size:max(11px, calc(11px * var(--dt,1)));color:var(--label3,#8A7666);padding:0 6px}
.sup-hora.falhou{color:var(--sys-red,#FF383C);font-weight:600}
.sup-pensando .sup-bolha{display:inline-flex;align-items:center;gap:10px;color:var(--label2,#6B5A4C)}
.sup-pontos{display:inline-flex;gap:4px}
.sup-pontos i{width:7px;height:7px;border-radius:50%;background:currentColor;opacity:.35;animation:sup-ponto 1.2s infinite ease-in-out}
.sup-pontos i:nth-child(2){animation-delay:.15s}.sup-pontos i:nth-child(3){animation-delay:.3s}
@keyframes sup-ponto{0%,80%,100%{opacity:.25;transform:translateY(0)}40%{opacity:.9;transform:translateY(-3px)}}

/* vazio, sugestões e histórico */
.sup-vazio{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:28px 12px}
.sup-vazio h3{margin:6px 0 0;font-size:calc(20px * var(--dt,1))}
.sup-vazio p{margin:0;color:var(--label2,#6B5A4C);font-size:calc(15px * var(--dt,1));line-height:1.4;max-width:340px}
.sup-marca{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb,var(--sys-blue,#0088FF) 14%,transparent);color:var(--sys-blue,#0088FF)}
.sup-marca svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:2}
.sup-sugestoes{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:10px}
.sup-chip{min-height:44px;padding:0 16px;border-radius:var(--r-pill,999px);border:0;background:var(--fill,rgba(90,65,45,.08));color:var(--label,#3A2A1E);font-weight:600;font-size:calc(15px * var(--dt,1));cursor:pointer;transition:transform var(--dur-rapida,.12s),background var(--dur-rapida,.12s)}
@media (hover:hover){.sup-chip:hover{background:var(--fill2,rgba(90,65,45,.12))}}
.sup-chip:active{transform:scale(var(--apertado-escala,.97));opacity:var(--apertado-opacidade,.6)}
.sup-chip.mini{min-height:44px;min-width:44px;padding:0 12px;font-size:calc(13px * var(--dt,1))} /* 1.66.0: alvo de 44 px também no "Resolveu?" */
.sup-nota{display:flex;align-items:center;gap:6px;margin-top:2px;color:var(--label2,#6B5A4C);font-size:calc(13px * var(--dt,1))}
.sup-roda{width:26px;height:26px;border-radius:50%;border:3px solid var(--fill2,rgba(90,65,45,.12));border-top-color:var(--sys-blue,#0088FF);animation:sup-gira .8s linear infinite}
@keyframes sup-gira{to{transform:rotate(360deg)}}
.sup-historico-topo{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}
.sup-historico h3{margin:0;font-size:calc(17px * var(--dt,1))}
.sup-historico ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.sup-historico li button{width:100%;min-height:52px;text-align:left;border:0;border-radius:var(--r-card,16px);background:var(--surface,#fff);box-shadow:inset 0 0 0 .5px var(--sep,rgba(58,42,30,.14));padding:10px 14px;display:flex;flex-direction:column;gap:2px;cursor:pointer}
.sup-historico li button:active{transform:scale(var(--apertado-escala,.97))}
.sup-historico li b{font-size:calc(15px * var(--dt,1));white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.sup-historico li span{font-size:max(11px, calc(12px * var(--dt,1)));color:var(--label2,#6B5A4C)}

/* cartões dentro da conversa */
.sup-cartao{width:min(360px,78vw);box-sizing:border-box;border-radius:var(--r-card,16px);padding:12px 14px;background:var(--vidro-regular,rgba(255,255,255,.66));box-shadow:var(--vidro-brilho),0 1px 2px rgba(40,25,12,.06),0 6px 18px rgba(40,25,12,.10);font-size:calc(14px * var(--dt,1))}
.sup-cartao p{margin:6px 0 0;line-height:1.35}
.sup-cartao-topo{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.sup-cartao-topo b{display:inline-flex;align-items:center;gap:6px;font-size:calc(15px * var(--dt,1))}
.sup-cartao-topo b svg,.sup-selo svg,.sup-alerta svg,.sup-erro svg{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sup-selo{flex:none;display:inline-flex;align-items:center;gap:4px;font-size:max(11px, calc(12px * var(--dt,1)));font-weight:700;padding:3px 9px;border-radius:var(--r-pill,999px);background:var(--fill,rgba(90,65,45,.08));color:var(--label2,#6B5A4C);text-align:right}
.sup-mudanca{border-top:4px solid var(--sys-orange,#FF8D28)}
.sup-mudanca.estado-aplicada{border-top-color:var(--sys-green,#34C759)}
.sup-mudanca.estado-aplicada .sup-selo{background:color-mix(in srgb,var(--sys-green,#34C759) 18%,transparent);color:color-mix(in srgb,var(--sys-green,#34C759) 55%,var(--label,#3A2A1E))}
.sup-mudanca.estado-recusada,.sup-mudanca.estado-expirada,.sup-mudanca.estado-falhou,.sup-mudanca.estado-indisponivel,.sup-mudanca.estado-substituida{border-top-color:var(--sys-gray3,#C7C7CC);opacity:.85}
.sup-depara{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;margin-top:10px}
.sup-depara div{border-radius:12px;padding:8px 10px;background:var(--fill,rgba(90,65,45,.08));display:flex;flex-direction:column;gap:2px;min-width:0}
.sup-depara div:last-child{background:color-mix(in srgb,var(--sys-blue,#0088FF) 12%,transparent)}
.sup-depara span{font-size:max(11px, calc(11px * var(--dt,1)));font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--label2,#6B5A4C)}
.sup-depara b{font-size:calc(17px * var(--dt,1));overflow-wrap:anywhere}
.sup-depara i{font-style:normal;color:var(--label3,#8A7666)}
.sup-efeito,.sup-rodape{color:var(--label2,#6B5A4C);font-size:calc(13px * var(--dt,1))}
.sup-alerta{display:flex;gap:6px;align-items:flex-start;padding:8px 10px;border-radius:10px;background:color-mix(in srgb,var(--sys-orange,#FF8D28) 16%,transparent);color:var(--label,#3A2A1E)}
.sup-acoes{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px;margin-top:10px}
.sup-botao{min-height:44px;padding:0 16px;border-radius:12px;border:0;background:var(--fill,rgba(90,65,45,.08));color:var(--label,#3A2A1E);font-weight:600;font-size:calc(15px * var(--dt,1));cursor:pointer;transition:transform var(--dur-rapida,.12s),opacity var(--dur-rapida,.12s),background var(--dur-rapida,.12s)}
.sup-botao.primario{background:var(--on-blue,#0062BD);color:#fff;box-shadow:0 6px 16px color-mix(in srgb,var(--on-blue,#0062BD) 30%,transparent)}
.sup-botao:active{transform:scale(var(--apertado-escala,.97));opacity:var(--apertado-opacidade,.6)}
.sup-botao:disabled{opacity:var(--desligado-opacidade,.42);cursor:default;transform:none}
.sup-botao.carregando{position:relative;opacity:.8}
.sup-botao.erro{background:var(--sys-red,#FF383C);color:#fff}
.sup-pin{display:flex;flex-direction:column;gap:4px;flex:1 1 100%;font-size:max(11px, calc(12px * var(--dt,1)));color:var(--label2,#6B5A4C)}
.sup-pin input{min-height:44px;border-radius:12px;border:1px solid var(--sep,rgba(58,42,30,.2));background:var(--surface,#fff);padding:0 12px;font-size:calc(18px * var(--dt,1));letter-spacing:.3em}
.sup-chamado{border-top:4px solid var(--sys-indigo,#6155F5)}
.sup-chamado.respondido{border-top-color:var(--sys-green,#34C759)}
.sup-selo.prioridade-alta{background:color-mix(in srgb,var(--sys-red,#FF383C) 16%,transparent);color:color-mix(in srgb,var(--sys-red,#FF383C) 70%,var(--label,#3A2A1E))}
.sup-tela{border-top:4px solid var(--sys-blue,#0088FF)}
.sup-aparelho.falhou{border-top:4px solid var(--sys-red,#FF383C)}
.sup-diag ul{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.sup-diag li{display:flex;gap:8px;align-items:flex-start;line-height:1.35}
.sup-ponto{flex:none;width:10px;height:10px;border-radius:50%;margin-top:5px;background:var(--sys-gray,#8E8E93)}
.sup-ponto.verde{background:var(--sys-green,#34C759)}.sup-ponto.vermelho{background:var(--sys-red,#FF383C)}.sup-ponto.amarelo{background:var(--sys-orange,#FF8D28)}

/* erro e aviso */
.sup-erro{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:10px 12px;border-radius:14px;background:color-mix(in srgb,var(--sys-red,#FF383C) 12%,transparent);color:var(--label,#3A2A1E);font-size:calc(14px * var(--dt,1))}
.sup-erro span{flex:1;min-width:160px}
.sup-aviso{flex:none;margin:0 14px 6px;padding:8px 12px;border-radius:12px;background:color-mix(in srgb,var(--sys-orange,#FF8D28) 16%,transparent);font-size:calc(13px * var(--dt,1))}

/* campo de texto */
.sup-compor{flex:none;display:flex;align-items:flex-end;gap:8px;padding:10px 12px 12px;border-top:.5px solid var(--sep,rgba(58,42,30,.14))}
.sup-compor textarea{flex:1;min-height:44px;max-height:132px;resize:none;box-sizing:border-box;border:0;border-radius:22px;padding:11px 16px;background:var(--surface,#fff);box-shadow:inset 0 0 0 1px var(--sep,rgba(58,42,30,.18));color:var(--label,#3A2A1E);font:inherit;font-size:calc(16px * var(--dt,1));line-height:1.35}
.sup-compor textarea:focus{outline:none;box-shadow:inset 0 0 0 2px var(--sys-blue,#0088FF)}
.sup-mic,.sup-enviar{flex:none;width:44px;height:44px;border-radius:50%;border:0;display:grid;place-items:center;cursor:pointer;transition:transform var(--dur-rapida,.12s),opacity var(--dur-rapida,.12s),background var(--dur-rapida,.12s)}
.sup-mic{background:var(--fill,rgba(90,65,45,.08));color:var(--label,#3A2A1E)}
.sup-mic[hidden]{display:none}
.sup-mic.gravando{background:var(--sys-red,#FF383C);color:#fff;animation:sup-pulso 1.4s infinite}
@keyframes sup-pulso{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--sys-red,#FF383C) 45%,transparent)}100%{box-shadow:0 0 0 14px transparent}}
.sup-enviar{background:var(--on-blue,#0062BD);color:#fff}
.sup-enviar:disabled{opacity:var(--desligado-opacidade,.42);cursor:default}
.sup-mic:active,.sup-enviar:not(:disabled):active{transform:scale(.92)}

/* celular e app: folha em tela cheia, acima da área segura */
@media (max-width:640px){
  #suporte-raiz .sup-painel{top:max(8px,env(safe-area-inset-top));left:0;right:0;bottom:0;width:auto;border-radius:var(--r-sheet,20px) var(--r-sheet,20px) 0 0;transform:translateY(40px)}
  .sup-compor{padding-bottom:max(12px,env(safe-area-inset-bottom))}
  .sup-cartao{width:min(360px,80vw)}
}
/* com a conversa aberta as peças nativas (barra de abas e botões do topo) somem (HubNativo.ocultarBarra): a folha começa logo abaixo da barra de status */
html.app-nativo #suporte-raiz .sup-painel{top:calc(var(--app-status,env(safe-area-inset-top)) + 8px);left:0;right:0;bottom:0;width:auto;border-radius:22px 22px 0 0;transform:translateY(40px)}
html.app-nativo #suporte-raiz.aberto .sup-painel{transform:none}
html.app-nativo .sup-compor{padding-bottom:max(12px,env(safe-area-inset-bottom))}

/* Convivência com o cartão global de aprovação (web/aprovacoes.js, #aprov-raiz, canto de baixo à direita): com a
   conversa aberta, no computador ele fica à esquerda da folha (senão cobre o botão Enviar); no celular e no app, logo
   acima do campo de texto. */
@media (min-width:641px){body.suporte-aberto #aprov-raiz{right:calc(min(480px,100vw - 24px) + 28px)}}
@media (max-width:640px){body.suporte-aberto #aprov-raiz{bottom:calc(env(safe-area-inset-bottom) + 84px)}}
html.app-nativo body.suporte-aberto #aprov-raiz{bottom:calc(env(safe-area-inset-bottom) + 84px)}

/* escuro, contraste, transparência, movimento */
body.dark .sup-assistente .sup-bolha,body.dark .sup-historico li button,body.dark .sup-compor textarea,body.dark .sup-pin input{background:var(--surface2,#2C2A27)}
body.dark .sup-cartao{box-shadow:var(--vidro-brilho),0 6px 18px rgba(0,0,0,.4)}
@media (prefers-reduced-transparency:reduce){#suporte-raiz .sup-painel{-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--vidro-solido,#FBF8F4)}.sup-cartao{background:var(--surface,#fff)}}
@media (prefers-contrast:more){.sup-assistente .sup-bolha,.sup-cartao{box-shadow:inset 0 0 0 1.5px var(--sep,rgba(42,28,18,.32))}}
@media (prefers-reduced-motion:reduce){#suporte-raiz .sup-painel,#suporte-raiz .sup-veu{transition:none}.sup-pontos i,.sup-roda,.sup-mic.gravando{animation:none}}

/* 1.66.0 (onda H): o Cérebro no lugar do microfone (a mesma esfera animada do Cérebro do sistema, .aiorb2 do index.html) */
#suporte-raiz .sup-cerebro{background:transparent;padding:0;overflow:visible}
#suporte-raiz .sup-cerebro .aiorb2.grande{width:40px;height:40px}
#suporte-raiz .sup-cerebro.gravando{background:transparent;animation:none}
#suporte-raiz .sup-cerebro.gravando .aiorb2.grande{animation-duration:1.2s;box-shadow:0 0 0 2px rgba(255,255,255,.35),0 0 26px 8px rgba(224,52,46,.55)}
#suporte-raiz .sup-marca-cerebro{flex:none;display:grid;place-items:center;width:34px;height:34px;margin-right:2px}
#suporte-raiz .sup-marca-cerebro .aiorb2{width:30px;height:30px}

/* 1.69.1: o ícone do Cérebro é o mesmo do sistema (o cérebro da marca, .philippe-brain do philippe-orb.css), e o Cérebro ouve
   DENTRO da janela do suporte: a fala aparece no campo daqui e nada do Cérebro acende por trás (barra, brilho, desfoque). */
#suporte-raiz .sup-cerebro .sup-cerebro-icone{width:34px;height:38px}
#suporte-raiz .sup-marca-cerebro .philippe-brain{width:28px;height:31px}
#suporte-raiz .sup-cerebro.gravando .sup-cerebro-icone img{animation:sup-cerebro-ouve 1.2s ease-in-out infinite;filter:drop-shadow(0 0 3px rgba(255,207,83,.95)) drop-shadow(0 0 8px rgba(224,52,46,.55))}
@keyframes sup-cerebro-ouve{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}
#suporte-raiz.sup-ouvindo #sup-texto{box-shadow:0 0 0 2px var(--sys-red,#FF383C) inset}
body.cerebro-no-suporte #aiz,body.cerebro-no-suporte #aifloat,body.cerebro-no-suporte #aikdsbar,body.cerebro-no-suporte .aiframe,body.cerebro-no-suporte .siriorb{visibility:hidden!important;opacity:0!important}
html:not(.app-nativo) body.cerebro-no-suporte.ai-on{padding-top:var(--topo-reserva)}
/* o modo de conversa do Cérebro (ws-hero-mode) esconde o topo; ouvindo no Suporte, a tela por trás fica como estava */
html:not(.app-nativo) body.cerebro-no-suporte.ws-hero-mode header.top{display:grid!important}
/* e o logo do topo não vira o cérebro aceso: quem mostra que está ouvindo é o microfone do Suporte */
body.cerebro-no-suporte.ai-on #aibtn>.philippe-brain{display:none!important}
body.cerebro-no-suporte.ai-on .top .brand img.lday,body.cerebro-no-suporte.ai-on .top .brand img.lnight{opacity:1;transform:none;animation:none;filter:none}
html:not(.app-nativo) body.cerebro-no-suporte.ai-on header.top>#aibtn{background:var(--topo-vidro,rgba(255,255,255,.62));box-shadow:var(--vidro-brilho),0 1px 2px rgba(40,25,12,.08),0 4px 14px rgba(40,25,12,.12)}
body.cerebro-no-suporte.ai-on main,body.cerebro-no-suporte.ai-on .top{transform:none!important;filter:none!important}
body.cerebro-no-suporte.ai-on::before,body.cerebro-no-suporte.ai-on::after{opacity:0!important;visibility:hidden!important}
@media (prefers-reduced-motion:reduce){#suporte-raiz .sup-cerebro.gravando .sup-cerebro-icone img{animation:none}}