/* "Aparência e sons" do chat (frontend/shared/services/chatAppearance.js):
   sala privada, comércio e profissional. Carregado por último. Cada tema define
   a paleta UMA vez (variáveis) e ela pinta o chat, a barra de baixo, os balões e
   a miniatura do painel. "Madeira" é o visual de sempre: só ganha a letra
   escolhida. Na privada o tema pinta também o cabeçalho; no comércio e no
   profissional só o chat (o resto da sala é a vitrine do negócio). */

/* ---------- letra (todos os temas; padrão "Média" = 16px, antes 11–13px) ---------- */
html body.pagina-sala.sala-privada #privada-lista-mensagens article > div > p,
html body.pagina-sala.sala-privada #privada-lista-mensagens article p{
    font-size:var(--chat-letra,16px)!important;
    line-height:1.38!important;
}
html body.pagina-sala.sala-privada #privada-lista-mensagens article > div > b,
html body.pagina-sala.sala-privada #privada-lista-mensagens article b{
    font-size:calc(var(--chat-letra,16px) * .8)!important;
}
html body.pagina-sala.sala-privada #privada-lista-mensagens article > div > small,
html body.pagina-sala.sala-privada #privada-lista-mensagens article small{
    font-size:calc(var(--chat-letra,16px) * .68)!important;
}

/* ---------- meu x outro (todos os temas, como no WhatsApp) ----------
   Minhas mensagens: à direita, sem meu nome nem minha bolinha.
   As da outra pessoa: à esquerda, com nome e bolinha. */
html body.pagina-sala.sala-privada #privada-lista-mensagens article.is-self > .avatar-chat,
html body.pagina-sala.sala-privada #privada-lista-mensagens article.is-self > div > b{display:none!important}
html body.pagina-sala.sala-privada #privada-lista-mensagens article.is-self{grid-template-columns:minmax(0,1fr)!important}

/* ---------- paletas ---------- */
body[data-chat-fundo="rosa-flores"],.gaba3-aparencia-tema[data-tema="rosa-flores"]{
    --t-cab:linear-gradient(180deg,#fbd5e2,#f5b9cd);--t-cab-txt:#5a1f3a;
    --t-chat:#fde8ef url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cg opacity='.55'%3E%3Cg fill='%23f6b3c8'%3E%3Ccircle cx='30' cy='22' r='7'/%3E%3Ccircle cx='42' cy='30' r='7'/%3E%3Ccircle cx='38' cy='44' r='7'/%3E%3Ccircle cx='22' cy='44' r='7'/%3E%3Ccircle cx='18' cy='30' r='7'/%3E%3C/g%3E%3Ccircle cx='30' cy='34' r='5' fill='%23ffe9a8'/%3E%3Cg fill='%23ffffff'%3E%3Ccircle cx='112' cy='100' r='6'/%3E%3Ccircle cx='122' cy='107' r='6'/%3E%3Ccircle cx='118' cy='119' r='6'/%3E%3Ccircle cx='106' cy='119' r='6'/%3E%3Ccircle cx='102' cy='107' r='6'/%3E%3C/g%3E%3Ccircle cx='112' cy='111' r='4' fill='%23f48fb1'/%3E%3Cpath d='M64 70q10-14 22 0M58 136q8-10 18 0M128 40q8-10 18 0' stroke='%23e9a7bf' stroke-width='2' fill='none'/%3E%3C/g%3E%3C/svg%3E") repeat;
    --t-rod:#fbd5e2;--t-pill:#fff;--t-pill-txt:#3a1d2b;--t-outro:#fff;--t-meu:#ffd3e2;--t-txt:#2b1a22;--t-nome:#b0306a;--t-palco:#f8cfdd;--t-palco-txt:#7a2d4d;
}
body[data-chat-fundo="coracoes"],.gaba3-aparencia-tema[data-tema="coracoes"]{
    --t-cab:linear-gradient(180deg,#ec407a,#d81b60);--t-cab-txt:#fff;
    --t-chat:linear-gradient(180deg,#fff0f3,#ffe1e8);
    --t-rod:#ffe1e8;--t-rod-txt:#c2185b;--t-pill:#fff;--t-pill-txt:#3d1520;--t-outro:#fff;--t-meu:#ffc2d1;--t-txt:#33121c;--t-nome:#c2185b;--t-palco:#ffd0db;--t-palco-txt:#9b1b46;
}
body[data-chat-fundo="lavanda"],.gaba3-aparencia-tema[data-tema="lavanda"]{
    --t-cab:linear-gradient(180deg,#e3d8f8,#d2c3f1);--t-cab-txt:#3d2d66;
    --t-chat:linear-gradient(180deg,#f4effc,#ebe3f9);
    --t-rod:#e3d8f8;--t-pill:#fff;--t-pill-txt:#2d2147;--t-outro:#fff;--t-meu:#e2d6ff;--t-txt:#241a3b;--t-nome:#6a4bb5;--t-palco:#e0d4f6;--t-palco-txt:#4b3a72;
}
body[data-chat-fundo="claro"],.gaba3-aparencia-tema[data-tema="claro"]{
    --t-cab:linear-gradient(180deg,#f4ecdd,#e9dcc5);--t-cab-txt:#4a3d2a;
    --t-chat:#f6f1e8;
    --t-rod:#efe6d6;--t-pill:#fff;--t-pill-txt:#2d2518;--t-outro:#fff;--t-meu:#dcf8c6;--t-txt:#231d12;--t-nome:#8a5a1f;--t-palco:#ece2cf;--t-palco-txt:#5a4a30;
}
body[data-chat-fundo="celeste"],.gaba3-aparencia-tema[data-tema="celeste"]{
    --t-cab:linear-gradient(180deg,#cbe7fb,#a9d6f5);--t-cab-txt:#16486b;
    --t-chat:linear-gradient(180deg,#d8eeff,#f3f9ff);
    --t-rod:#cbe7fb;--t-pill:#fff;--t-pill-txt:#12324a;--t-outro:#fff;--t-meu:#cfe9ff;--t-txt:#0f2638;--t-nome:#1f6fa8;--t-palco:#c4e2f8;--t-palco-txt:#1f4e72;
}
body[data-chat-fundo="verde"],.gaba3-aparencia-tema[data-tema="verde"]{
    --t-cab:linear-gradient(180deg,#d4eecf,#bfe4b9);--t-cab-txt:#23502a;
    --t-chat:#e8f5e6;
    --t-rod:#d4eecf;--t-pill:#fff;--t-pill-txt:#173a1c;--t-outro:#fff;--t-meu:#d9fdd3;--t-txt:#122b15;--t-nome:#2e7d32;--t-palco:#cde9c8;--t-palco-txt:#245a2a;
}
body[data-chat-fundo="noite"],.gaba3-aparencia-tema[data-tema="noite"]{
    --t-cab:linear-gradient(180deg,#141c3f,#0f1633);--t-cab-txt:#e8ecff;
    --t-chat:radial-gradient(ellipse at 70% 0%,#2a3672 0%,#121a3d 55%,#0a0f26 100%);
    --t-rod:#0f1633;--t-pill:#1e2750;--t-pill-txt:#eef1ff;--t-outro:#1e2750;--t-meu:#3949ab;--t-txt:#eef1ff;--t-nome:#9fa8ff;--t-palco:#141c3f;--t-palco-txt:#c5cbff;
}
body[data-chat-fundo="escuro"],.gaba3-aparencia-tema[data-tema="escuro"]{
    --t-cab:#202c33;--t-cab-txt:#e9edef;
    --t-chat:#0b141a;
    --t-rod:#202c33;--t-pill:#2a3942;--t-pill-txt:#e9edef;--t-outro:#202c33;--t-meu:#005c4b;--t-txt:#e9edef;--t-nome:#53bdeb;--t-palco:#111b21;--t-palco-txt:#aebac1;
}
body[data-chat-fundo="foto"],.gaba3-aparencia-tema[data-tema="foto"]{
    --t-cab:rgba(10,12,14,.62);--t-cab-txt:#fff;
    --t-chat:#222 var(--chat-fundo-foto) center/cover no-repeat;
    --t-rod:rgba(10,12,14,.5);--t-pill:rgba(255,255,255,.96);--t-pill-txt:#1d2327;--t-outro:rgba(255,255,255,.96);--t-meu:rgba(217,253,211,.97);--t-txt:#1d2327;--t-nome:#7a3e8e;--t-palco:rgba(10,12,14,.55);--t-palco-txt:#f1f1f1;
}
body[data-chat-fundo="oceano"],.gaba3-aparencia-tema[data-tema="oceano"]{
    --t-cab:linear-gradient(180deg,#0b4f6c,#073b52);--t-cab-txt:#e6f7ff;
    --t-chat:linear-gradient(180deg,#0e6b8f 0%,#0a4d6b 55%,#06324a 100%);
    --t-rod:#073b52;--t-pill:#0f5878;--t-pill-txt:#e6f7ff;--t-outro:#ffffff;--t-meu:#b9ecff;--t-txt:#0b2633;--t-nome:#0277bd;--t-palco:#08425c;--t-palco-txt:#bfe9ff;
}
body[data-chat-fundo="floresta"],.gaba3-aparencia-tema[data-tema="floresta"]{
    --t-cab:linear-gradient(180deg,#2e4a2c,#223a21);--t-cab-txt:#eaf5e2;
    --t-chat:linear-gradient(180deg,#3d6138 0%,#2b4729 100%);
    --t-rod:#223a21;--t-pill:#f4f7ef;--t-pill-txt:#1d2e1b;--t-outro:#f4f7ef;--t-meu:#cfe8b8;--t-txt:#1a2818;--t-nome:#4e7a2c;--t-palco:#2a4428;--t-palco-txt:#d4ecc7;
}
body[data-chat-fundo="futebol"],.gaba3-aparencia-tema[data-tema="futebol"]{
    --t-cab:linear-gradient(180deg,#1d5e2a,#164a21);--t-cab-txt:#ffffff;
    --t-chat:repeating-linear-gradient(180deg,#2f8a3e 0 46px,#2a7c38 46px 92px);
    --t-rod:#164a21;--t-pill:#fff;--t-pill-txt:#123318;--t-outro:#fff;--t-meu:#e3ffd9;--t-txt:#102414;--t-nome:#1b7a2c;--t-palco:#1f6a2e;--t-palco-txt:#e8ffe8;
}
body[data-chat-fundo="carbono"],.gaba3-aparencia-tema[data-tema="carbono"]{
    --t-cab:linear-gradient(180deg,#2b2f33,#1c1f22);--t-cab-txt:#e8eaec;
    --t-chat:linear-gradient(45deg,rgba(255,255,255,.04) 25%,transparent 25%,transparent 75%,rgba(255,255,255,.04) 75%) 0 0/8px 8px,linear-gradient(45deg,rgba(255,255,255,.04) 25%,transparent 25%,transparent 75%,rgba(255,255,255,.04) 75%) 4px 4px/8px 8px,#17191b;
    --t-rod:#1c1f22;--t-pill:#2b2f33;--t-pill-txt:#e8eaec;--t-outro:#2b2f33;--t-meu:#c62828;--t-txt:#f1f2f3;--t-nome:#ff8a65;--t-palco:#1f2225;--t-palco-txt:#c9cdd1;
}
body[data-chat-fundo="por-do-sol"],.gaba3-aparencia-tema[data-tema="por-do-sol"]{
    --t-cab:linear-gradient(180deg,#3b2a5c,#5a2f5f);--t-cab-txt:#ffe9d6;
    --t-chat:linear-gradient(180deg,#5a2f5f 0%,#c4566a 45%,#f39c5a 80%,#ffd27a 100%);
    --t-rod:#3b2a5c;--t-pill:#fff7ef;--t-pill-txt:#3b2232;--t-outro:#fff7ef;--t-meu:#ffe0c2;--t-txt:#2e1a24;--t-nome:#b4462f;--t-palco:#4a2c5e;--t-palco-txt:#ffd9c2;
}
.gaba3-aparencia-tema[data-tema="madeira"]{
    --t-cab:linear-gradient(180deg,#5a3a20,#3b2414);--t-cab-txt:#f1d99a;
    --t-chat:#2a1a0e linear-gradient(90deg,rgba(0,0,0,.2) 1px,transparent 1px) 0 0/12px 12px;
    --t-rod:#1b1009;--t-outro:rgba(22,14,8,.82);--t-meu:rgba(38,82,20,.92);--t-txt:#fff;
}

/* ---------- tema aplicado à sala (tudo menos a madeira) ---------- */
html body.pagina-sala.sala-privada:not([data-chat-fundo="madeira"]) .cabecera-sala{
    background:var(--t-cab)!important;
    color:var(--t-cab-txt)!important;
    border-color:transparent!important;
}
html body.pagina-sala.sala-privada:not([data-chat-fundo="madeira"]) .cabecera-sala :is(h1,.privada-menu-btn,.avatar-sala){
    color:var(--t-cab-txt)!important;
    text-shadow:none!important;
}
/* Os ícones soltos do cabeçalho (voltar, contatos) ficavam no verde-claro da madeira e sumiam nos
   temas claros (rosa, lavanda, céu…): agora seguem a cor de letra de cada tema (2026-10-06). */
html body.pagina-sala.sala-privada:not([data-chat-fundo="madeira"]) .cabecera-sala :is(.gaba3-header-back,#gaba3-contato-fab){
    color:var(--t-cab-txt)!important;
    text-shadow:none!important;
}
html body.pagina-sala.sala-privada:not([data-chat-fundo="madeira"]) .cabecera-sala .gaba3-header-back svg{stroke:currentColor!important}
html body.pagina-sala.sala-privada:not([data-chat-fundo="madeira"]) .cabecera-sala .gaba3-header-back{background:rgba(127,127,127,.18)!important}
/* A fileira que abre com o clip (apresentação, câmera, foto, chamada, localização, contato):
   ficava sempre no creme da madeira e sumia no rosa/claros — agora segue a cor da barra. */
html body.pagina-sala.sala-privada:not([data-chat-fundo="madeira"]) .privada-composer-tools :is(.privada-icon-btn,label){color:var(--t-rod-txt,var(--t-cab-txt))!important;opacity:1!important}
html body.pagina-sala.sala-privada:not([data-chat-fundo="madeira"]) .privada-composer-tools :is(.privada-icon-btn,label) svg{stroke:currentColor!important}
html body.pagina-sala.sala-privada:not([data-chat-fundo="madeira"]) #privada-chat-sala{
    background:var(--t-chat)!important;
}
html body.pagina-sala.sala-privada:not([data-chat-fundo="madeira"]) #privada-lista-mensagens{
    background:transparent!important;
    position:relative;
    z-index:1;
}
html body.pagina-sala.sala-privada:not([data-chat-fundo="madeira"]) .privada-chat-footer{
    background:var(--t-rod)!important;
    position:relative;
    z-index:2;
    border-color:transparent!important;
}
html body.pagina-sala.sala-privada:not([data-chat-fundo="madeira"]) #privada-roster-bar{
    background:var(--t-rod)!important;
    border-color:transparent!important;
}
html body.pagina-sala.sala-privada:not([data-chat-fundo="madeira"]) .privada-message-pill{
    background:var(--t-pill)!important;
    border-color:rgba(0,0,0,.08)!important;
}
html body.pagina-sala.sala-privada:not([data-chat-fundo="madeira"]) .privada-message-pill :is(input,textarea,.privada-icon-btn){
    color:var(--t-pill-txt)!important;
}
html body.pagina-sala.sala-privada:not([data-chat-fundo="madeira"]) #privada-form-chat :is(input,textarea)#privada-mensaje-chat{
    color:var(--t-pill-txt)!important;
    -webkit-text-fill-color:var(--t-pill-txt)!important;
    caret-color:var(--t-nome)!important;
}
html body.pagina-sala.sala-privada:not([data-chat-fundo="madeira"]) #privada-form-chat :is(input,textarea)#privada-mensaje-chat::placeholder{
    color:var(--t-pill-txt)!important;
    -webkit-text-fill-color:var(--t-pill-txt)!important;
    opacity:.5!important;
}
/* A camada de cima (câmera, chamada, apresentação) segue a cor de palco do tema. */
html body.pagina-sala.sala-privada:not([data-chat-fundo="madeira"]) #pantalla-directo{
    background:var(--t-palco)!important;
}

/* Balões */
html body.pagina-sala.sala-privada:not([data-chat-fundo="madeira"]) #privada-lista-mensagens article > div{
    background:var(--t-outro)!important;
    border-radius:4px 14px 14px 14px!important;
    padding:6px 10px!important;
    box-shadow:0 1px 2px rgba(0,0,0,.16)!important;
    text-shadow:none!important;
    box-sizing:border-box!important;
    max-width:100%!important;
    min-width:0!important;
    overflow-wrap:anywhere!important;
}
html body.pagina-sala.sala-privada:not([data-chat-fundo="madeira"]) #privada-lista-mensagens article.is-self > div{
    background:var(--t-meu)!important;
    border-radius:14px 4px 14px 14px!important;
}
html body.pagina-sala.sala-privada:not([data-chat-fundo="madeira"]) #privada-lista-mensagens article :is(p,small,span,a){
    color:var(--t-txt)!important;
    text-shadow:none!important;
}
html body.pagina-sala.sala-privada:not([data-chat-fundo="madeira"]) #privada-lista-mensagens article b{
    color:var(--t-nome)!important;
    background:none!important;
    text-shadow:none!important;
}
html body.pagina-sala.sala-privada:not([data-chat-fundo="madeira"]) #privada-lista-mensagens article.is-self > div :is(p,b){text-align:left!important}
/* A mensagem própria guardava 30px à direita para o ✓: no balão, ele fica dentro. */
html body.pagina-sala.sala-privada:not([data-chat-fundo="madeira"]) #privada-lista-mensagens article[data-gaba3-msg-own="1"]{padding-right:0!important}
html body.pagina-sala.sala-privada:not([data-chat-fundo="madeira"]) #privada-lista-mensagens article[data-gaba3-msg-own="1"] > div{padding-right:34px!important}
html body.pagina-sala.sala-privada:not([data-chat-fundo="madeira"]) #privada-lista-mensagens article.is-self > div > small{margin-left:auto!important}
html body.pagina-sala.sala-privada:not([data-chat-fundo="madeira"]) #privada-lista-mensagens .privada-visto-marca{color:var(--t-txt)!important;opacity:.5}
html body.pagina-sala.sala-privada:not([data-chat-fundo="madeira"]) #privada-lista-mensagens .privada-visto-marca.lido{color:#1f9fe0!important;opacity:1}

/* Madeira (o tema de sempre) com balões de verdade (2026-10-14, revisão para o público): antes o
   texto ficava solto sobre a madeira, as minhas alinhadas à direita linha por linha. Agora, como
   no WhatsApp: a minha em verde GABA3 à direita, a da outra pessoa em madeira escura à esquerda,
   o texto sempre alinhado à esquerda dentro do balão e o ✓ dentro dele. */
html body.pagina-sala.sala-privada[data-chat-fundo="madeira"] #privada-lista-mensagens article > div{
    background:rgba(22,14,8,.82)!important;
    border:1px solid rgba(241,217,154,.10)!important;
    border-radius:4px 14px 14px 14px!important;
    padding:6px 10px!important;
    box-shadow:0 1px 3px rgba(0,0,0,.35)!important;
    box-sizing:border-box!important;
    max-width:100%!important;
    min-width:0!important;
    overflow-wrap:anywhere!important;
}
html body.pagina-sala.sala-privada[data-chat-fundo="madeira"] #privada-lista-mensagens article.is-self > div{
    background:rgba(38,82,20,.92)!important;
    border-color:rgba(198,255,107,.16)!important;
    border-radius:14px 4px 14px 14px!important;
}
html body.pagina-sala.sala-privada[data-chat-fundo="madeira"] #privada-lista-mensagens article.is-self > div :is(p,b){text-align:left!important}
html body.pagina-sala.sala-privada[data-chat-fundo="madeira"] #privada-lista-mensagens article[data-gaba3-msg-own="1"]{padding-right:0!important}
html body.pagina-sala.sala-privada[data-chat-fundo="madeira"] #privada-lista-mensagens article[data-gaba3-msg-own="1"] > div{padding-right:34px!important}
html body.pagina-sala.sala-privada[data-chat-fundo="madeira"] #privada-lista-mensagens article.is-self > div > small{margin-left:auto!important}
/* Figurinha (só emojis): sem balão em nenhum tema, como no WhatsApp. */
html body.pagina-sala.sala-privada[data-chat-fundo] #privada-lista-mensagens article.msg-figurinha > div{background:transparent!important;border:0!important;box-shadow:none!important;padding:0!important}

/* ---------- fundos animados (poucas peças, só transform/opacity) ---------- */
.gaba3-tema-animacao{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.gaba3-tema-animacao i{position:absolute;display:block;will-change:transform;animation-duration:var(--d,14s);animation-delay:var(--a,0s);animation-iteration-count:infinite;animation-timing-function:linear}
.gaba3-tema-animacao.parado i{animation-play-state:paused}

/* Pétalas caindo e girando */
.anim-petalas i{top:-30px!important;width:16px;height:20px;border-radius:85% 0 85% 0;background:radial-gradient(circle at 30% 30%,#fff 0%,#f9c4d6 40%,#ef8fb0 100%);opacity:.85;animation-name:tema-petala}
.anim-petalas i:nth-child(3n){background:radial-gradient(circle at 30% 30%,#fff 0%,#fde2ec 50%,#f7b8cc 100%);width:12px;height:15px}
@keyframes tema-petala{
    0%{transform:translate(0,0) rotate(0deg) scale(var(--s,1))}
    50%{transform:translate(var(--x,30px),55vh) rotate(260deg) scale(var(--s,1))}
    100%{transform:translate(0,115vh) rotate(540deg) scale(var(--s,1))}
}
/* Corações subindo */
.anim-coracoes i{top:auto!important;bottom:-40px;width:22px;height:20px;opacity:.7;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 22'%3E%3Cpath d='M12 21s-9-6.2-9-12.2A5 5 0 0 1 12 5.6a5 5 0 0 1 9 3.2C21 14.8 12 21 12 21z' fill='%23ff6f91'/%3E%3C/svg%3E") center/contain no-repeat;animation-name:tema-coracao}
.anim-coracoes i:nth-child(2n){filter:hue-rotate(-18deg) brightness(1.15);opacity:.5}
@keyframes tema-coracao{
    0%{transform:translate(0,0) scale(var(--s,1));opacity:0}
    10%{opacity:.75}
    100%{transform:translate(var(--x,20px),-115vh) scale(var(--s,1));opacity:0}
}
/* Brilhos que piscam (lavanda) e estrelas (noite) */
.anim-brilhos i,.anim-estrelas i{width:8px;height:8px;animation-name:tema-brilho;animation-timing-function:ease-in-out;animation-duration:calc(var(--d,12s) / 3)}
.anim-brilhos i{background:radial-gradient(circle,#fff 0%,#cdb8ff 45%,transparent 70%)}
.anim-estrelas i{width:4px;height:4px;border-radius:50%;background:#fff;box-shadow:0 0 6px 2px rgba(200,210,255,.7)}
.anim-estrelas i:nth-child(4n){width:2px;height:2px}
@keyframes tema-brilho{0%,100%{opacity:.1;transform:scale(calc(var(--s,1) * .6))}50%{opacity:1;transform:scale(calc(var(--s,1) * 1.2))}}
/* Bolhas subindo (oceano) */
.anim-bolhas i{top:auto!important;bottom:-30px;width:12px;height:12px;border-radius:50%;border:1.5px solid rgba(255,255,255,.55);background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.55),rgba(255,255,255,.05) 60%);animation-name:tema-bolha}
@keyframes tema-bolha{
    0%{transform:translate(0,0) scale(var(--s,1));opacity:0}
    10%{opacity:.9}
    50%{transform:translate(calc(var(--x,10px) * .4),-55vh) scale(var(--s,1))}
    100%{transform:translate(0,-112vh) scale(var(--s,1));opacity:0}
}
/* Folhas caindo (floresta) */
.anim-folhas i{top:-30px!important;width:18px;height:18px;border-radius:0 90% 0 90%;background:linear-gradient(135deg,#9ccc65,#558b2f);opacity:.8;animation-name:tema-petala}
.anim-folhas i:nth-child(3n){background:linear-gradient(135deg,#ffca28,#ef6c00)}
.anim-folhas i:nth-child(4n){background:linear-gradient(135deg,#d4a35a,#8d5524)}
/* Nuvens passando devagar (céu) */
.anim-nuvens i{width:130px;height:42px;border-radius:42px;background:rgba(255,255,255,.75);filter:blur(1px);left:-160px!important;animation-name:tema-nuvem;animation-duration:calc(var(--d,14s) * 3)}
.anim-nuvens i::before,.anim-nuvens i::after{content:"";position:absolute;background:inherit;border-radius:50%}
.anim-nuvens i::before{width:60px;height:60px;left:22px;top:-28px}
.anim-nuvens i::after{width:46px;height:46px;left:66px;top:-18px}
.anim-nuvens i:nth-child(n+6){display:none}
@keyframes tema-nuvem{from{transform:translateX(0) scale(var(--s,1))}to{transform:translateX(calc(100vw + 320px)) scale(var(--s,1))}}
@media (prefers-reduced-motion:reduce){.gaba3-tema-animacao{display:none}}

/* ---------- painel "Aparência e sons" ---------- */
.gaba3-aparencia-dialog .gaba3-aparencia-titulo{margin:16px 0 8px;font-size:13px;letter-spacing:.05em;text-transform:uppercase;color:#cdb98f}
.gaba3-aparencia-fundos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.gaba3-aparencia-tema{display:flex;flex-direction:column;gap:6px;padding:0;border:0;background:none;color:#f2e6cc;font:inherit;font-size:12px;font-weight:700;cursor:pointer;text-align:center}
.gaba3-aparencia-tema .mini{position:relative;display:block;height:92px;border-radius:14px;overflow:hidden;background:var(--t-chat);background-size:cover;background-position:center;border:2px solid rgba(255,255,255,.16);box-shadow:0 4px 12px rgba(0,0,0,.35);transition:transform .15s ease,border-color .15s ease}
.gaba3-aparencia-tema[aria-checked="true"] .mini{border-color:#7ee03a;box-shadow:0 0 0 3px rgba(126,224,58,.35),0 4px 12px rgba(0,0,0,.35);transform:translateY(-2px)}
.gaba3-aparencia-tema .mini-topo{position:absolute;left:0;right:0;top:0;height:16px;background:var(--t-cab)}
.gaba3-aparencia-tema .mini-barra{position:absolute;left:0;right:0;bottom:0;height:14px;background:var(--t-rod)}
.gaba3-aparencia-tema .mini-balao{position:absolute;height:13px;border-radius:7px;box-shadow:0 1px 1px rgba(0,0,0,.15)}
.gaba3-aparencia-tema .mini-balao.outro{left:8px;top:28px;width:52%;background:var(--t-outro,#fff)}
.gaba3-aparencia-tema .mini-balao.meu{right:8px;top:50px;width:44%;background:var(--t-meu,#dcf8c6)}
.gaba3-aparencia-tema[data-tema="madeira"] .mini-balao{background:rgba(255,255,255,.75);height:4px;border-radius:2px;box-shadow:none}
.gaba3-aparencia-tema .nome{overflow-wrap:anywhere}
.gaba3-aparencia-tema .nome [data-morph-icone]{margin-right:4px;vertical-align:-3px}
.gaba3-aparencia-tema .nome [data-morph-icone] svg{width:14px;height:14px}
.gaba3-aparencia-testar [data-morph-icone],#privada-abrir-aparencia [data-morph-icone]{vertical-align:-4px}
.gaba3-aparencia-trocar-foto{grid-column:1/-1}
.gaba3-aparencia-grupo{grid-column:1/-1;margin:6px 0 0;font-size:12px;font-weight:700;letter-spacing:.04em;color:#a8b89a}
/* Futebol: linhas do campo por cima do gramado (só na sala). */
html body.pagina-sala.sala-privada[data-chat-fundo="futebol"] #privada-chat-sala::after{content:"";position:absolute;inset:18px 18px 80px;border:2px solid rgba(255,255,255,.3);border-radius:4px;background:radial-gradient(circle at 50% 50%,transparent 46px,rgba(255,255,255,.3) 47px,rgba(255,255,255,.3) 49px,transparent 50px),linear-gradient(180deg,transparent calc(50% - 1px),rgba(255,255,255,.3) calc(50% - 1px),rgba(255,255,255,.3) calc(50% + 1px),transparent calc(50% + 1px));pointer-events:none;z-index:0}
.gaba3-aparencia-opcao{min-height:44px;border-radius:10px;border:2px solid rgba(255,255,255,.18);background:#1b211b;color:#f2e6cc;font:inherit;font-size:13px;font-weight:700;cursor:pointer;padding:6px;overflow-wrap:anywhere}
.gaba3-aparencia-opcao[aria-checked="true"]{border-color:#7ee03a;box-shadow:0 0 0 2px rgba(126,224,58,.35)}
.gaba3-aparencia-opcao:disabled{opacity:.45;cursor:default}
.gaba3-aparencia-letras,.gaba3-aparencia-tons{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.gaba3-aparencia-tons{grid-template-columns:repeat(2,minmax(0,1fr));margin:8px 0}
.gaba3-aparencia-letra.letra-p{font-size:13px}
.gaba3-aparencia-letra.letra-m{font-size:15px}
.gaba3-aparencia-letra.letra-g{font-size:18px}
.gaba3-aparencia-amostra{margin:10px 0 0;font-size:var(--chat-letra,16px);color:#f2e6cc}
.gaba3-aparencia-chave{display:block;width:100%;min-height:46px;margin-top:8px;border-radius:12px;border:1px solid rgba(255,255,255,.18);background:#1b211b;color:#f2e6cc;font:inherit;font-weight:700;text-align:left;padding:10px 14px;cursor:pointer}
.gaba3-aparencia-chave[aria-pressed="true"]{border-color:#7ee03a}


/* ---------- painel (estilo próprio: serve as três salas) ---------- */
.gaba3-aparencia-dialog{width:min(420px,calc(100vw - 28px));max-height:min(80dvh,640px);margin:auto;padding:0;border:1px solid rgba(85,201,0,.35);border-radius:18px;background:linear-gradient(165deg,#122012f8,#0a120af5);color:#eef6e8;box-shadow:0 24px 60px #000a;overflow:auto}
.gaba3-aparencia-dialog::backdrop{background:#0009}
.gaba3-aparencia-dialog header{position:sticky;top:0;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;border-bottom:1px solid rgba(255,255,255,.1);background:#101c10}
.gaba3-aparencia-dialog header strong{font-size:16px}
.gaba3-aparencia-dialog header button{border:0;background:transparent;color:#fff;font-size:28px;line-height:1;cursor:pointer;min-width:44px;min-height:44px}
.gaba3-aparencia-corpo{display:grid;gap:12px;padding:16px}
.gaba3-aparencia-dica{margin:0;color:#9ab89a;font-size:13px;line-height:1.4}
.gaba3-aparencia-dica:empty{display:none}

/* Paleta (ícone de linha) no canto do chat (comércio e profissional): solto, sem bola. */
html body .gaba3-aparencia-atalho{background:none!important;border:0!important;box-shadow:none!important;border-radius:0!important}
.gaba3-aparencia-atalho{position:absolute;top:6px;right:6px;z-index:5;display:grid;place-items:center;width:40px;height:40px;padding:0;border:0;background:none;font-size:20px;line-height:1;cursor:pointer;filter:drop-shadow(0 1px 2px rgba(0,0,0,.7))}
.gaba3-aparencia-atalho{color:#fff}
.gaba3-aparencia-atalho [data-morph-icone] svg{width:22px;height:22px}

/* ---------- comércio: o tema pinta só o chat ---------- */
html body.pagina-publica #publica-chat-bloco .contenido-chat{position:relative}
html body.pagina-publica #publica-chat-lista{padding-top:44px!important}   /* espaço da paleta: nunca em cima da primeira mensagem */
/* Celular: com o chat encolhido (só a barra de escrever) a paleta não aparece — só com ele aberto. */
@media (max-width:850px){html body.pagina-publica #publica-chat-bloco:not(.publica-chat-expandido) .gaba3-aparencia-atalho{display:none}}
html body.pagina-publica #publica-chat-lista article p{font-size:var(--chat-letra,16px)!important;line-height:1.38!important}
html body.pagina-publica #publica-chat-lista article b{font-size:calc(var(--chat-letra,16px) * .8)!important}
html body.pagina-publica #publica-chat-lista article small{font-size:calc(var(--chat-letra,16px) * .68)!important}
html body.pagina-publica:not([data-chat-fundo="madeira"]) #publica-chat-bloco .contenido-chat{background:var(--t-chat)!important}
html body.pagina-publica:not([data-chat-fundo="madeira"]) #publica-chat-lista{background:transparent!important;position:relative;z-index:1}
html body.pagina-publica:not([data-chat-fundo="madeira"]) #publica-chat-bloco .pie-chat{background:var(--t-rod)!important;position:relative;z-index:2;border-color:transparent!important}
html body.pagina-publica:not([data-chat-fundo="madeira"]) #publica-chat-bloco .publica-mensagem-pill{background:var(--t-pill)!important;border-color:rgba(0,0,0,.08)!important}
html body.pagina-publica:not([data-chat-fundo="madeira"]) #publica-chat-bloco .publica-mensagem-pill .publica-icon-btn{color:var(--t-pill-txt)!important}
html body.pagina-publica:not([data-chat-fundo="madeira"]) #publica-form-chat input#publica-mensaje-chat{color:var(--t-pill-txt)!important;-webkit-text-fill-color:var(--t-pill-txt)!important;caret-color:var(--t-nome)!important}
html body.pagina-publica:not([data-chat-fundo="madeira"]) #publica-form-chat input#publica-mensaje-chat::placeholder{color:var(--t-pill-txt)!important;-webkit-text-fill-color:var(--t-pill-txt)!important;opacity:.5!important}
html body.pagina-publica:not([data-chat-fundo="madeira"]) #publica-chat-lista article > div{background:var(--t-outro)!important;border-radius:4px 14px 14px 14px!important;padding:6px 10px!important;box-shadow:0 1px 2px rgba(0,0,0,.16)!important;text-shadow:none!important;overflow-wrap:anywhere!important}
html body.pagina-publica:not([data-chat-fundo="madeira"]) #publica-chat-lista article.gaba3-mensagem-propria > div{background:var(--t-meu)!important;border-radius:14px 4px 14px 14px!important}
html body.pagina-publica:not([data-chat-fundo="madeira"]) #publica-chat-lista article :is(p,small,span:not(.avatar-chat),a){color:var(--t-txt)!important;text-shadow:none!important}
html body.pagina-publica:not([data-chat-fundo="madeira"]) #publica-chat-lista article b{color:var(--t-nome)!important;background:none!important;text-shadow:none!important}

/* ---------- profissional: o tema pinta só o chat ---------- */
html body .professional-public-chat{position:relative}
html body #professional-public-messages{padding-top:40px!important}   /* espaço da paleta */
html body #professional-public-messages article p{font-size:var(--chat-letra,16px)!important;line-height:1.38!important}
html body #professional-public-messages article b{font-size:calc(var(--chat-letra,16px) * .8)!important}
html body #professional-public-messages article small{font-size:calc(var(--chat-letra,16px) * .68)!important}
html body[data-chat-sala="profissional"]:not([data-chat-fundo="madeira"]) .professional-public-chat{background:var(--t-chat)!important}
html body[data-chat-sala="profissional"]:not([data-chat-fundo="madeira"]) #professional-public-messages{background:transparent!important;position:relative;z-index:1}
html body[data-chat-sala="profissional"]:not([data-chat-fundo="madeira"]) #professional-public-chat-form{background:var(--t-rod)!important;position:relative;z-index:2}
html body[data-chat-sala="profissional"]:not([data-chat-fundo="madeira"]) .professional-message-pill{background:var(--t-pill)!important;border-color:rgba(0,0,0,.08)!important}
html body[data-chat-sala="profissional"]:not([data-chat-fundo="madeira"]) .professional-message-pill :is(button,label){color:var(--t-pill-txt)!important}
html body[data-chat-sala="profissional"]:not([data-chat-fundo="madeira"]) #professional-public-chat-input{color:var(--t-pill-txt)!important;-webkit-text-fill-color:var(--t-pill-txt)!important;caret-color:var(--t-nome)!important}
html body[data-chat-sala="profissional"]:not([data-chat-fundo="madeira"]) #professional-public-chat-input::placeholder{color:var(--t-pill-txt)!important;-webkit-text-fill-color:var(--t-pill-txt)!important;opacity:.5!important}
html body[data-chat-sala="profissional"]:not([data-chat-fundo="madeira"]) #professional-public-messages article > div{background:var(--t-outro)!important;border-radius:4px 14px 14px 14px!important;padding:6px 10px!important;box-shadow:0 1px 2px rgba(0,0,0,.16)!important;text-shadow:none!important;overflow-wrap:anywhere!important}
html body[data-chat-sala="profissional"]:not([data-chat-fundo="madeira"]) #professional-public-messages article.is-self > div{background:var(--t-meu)!important;border-radius:14px 4px 14px 14px!important}
html body[data-chat-sala="profissional"]:not([data-chat-fundo="madeira"]) #professional-public-messages article :is(p,small,a){color:var(--t-txt)!important;text-shadow:none!important}
html body[data-chat-sala="profissional"]:not([data-chat-fundo="madeira"]) #professional-public-messages article b{color:var(--t-nome)!important;background:none!important;text-shadow:none!important}
html body[data-chat-sala="profissional"]:not([data-chat-fundo="madeira"]) .chat-publico-aviso{background:transparent!important;position:relative;z-index:1}
/* Nota de voz dentro do balão: um marco só (antes a cápsula própria do leitor ficava dentro do
   balão, dois contornos um dentro do outro). Todos os temas, como no WhatsApp. */
html body.pagina-sala.sala-privada[data-chat-fundo] #privada-lista-mensagens article.msg-voz > div > .chat-voz-bubble{border:0!important;background:transparent!important;box-shadow:none!important;padding-left:0!important;padding-right:0!important}
/* Conversa de dois: sem a bolinha e o nome da outra pessoa em cada mensagem (já se sabe quem
   é — está no cabeçalho), como no WhatsApp. Em grupo continuam, para saber quem disse o quê. */
html body.pagina-sala.sala-privada.circulo-direct #privada-lista-mensagens article:not(.is-self) > .avatar-chat,
html body.pagina-sala.sala-privada.circulo-direct #privada-lista-mensagens article:not(.is-self) > div > b{display:none!important}
html body.pagina-sala.sala-privada.circulo-direct #privada-lista-mensagens article:not(.is-self){grid-template-columns:minmax(0,1fr)!important}

/* Sala profissional NO CELULAR (2026-10-14, prova cliente ↔ profissional com dois aparelhos):
   balões como no WhatsApp, iguais aos da sala privada — o meu em verde GABA3 à direita, sem o
   "Você" e sem a minha bolinha (que ficava debaixo do ⋮); o do outro em madeira escura. O ⋮ fica
   discreto e com lugar próprio (antes cobria o fim do texto). A web da sala não muda. */
@media (max-width:780px){
html body[data-chat-fundo="madeira"] #professional-public-messages article.professional-message > div{background:rgba(22,14,8,.82)!important;border:1px solid rgba(241,217,154,.10)!important;border-radius:4px 14px 14px 14px!important;padding:6px 26px 6px 10px!important;box-shadow:0 1px 3px rgba(0,0,0,.35)!important;max-width:85%!important;min-width:0!important;overflow-wrap:anywhere!important;box-sizing:border-box!important}
html body[data-chat-fundo="madeira"] #professional-public-messages article.professional-message.is-self > div{background:rgba(38,82,20,.92)!important;border-color:rgba(198,255,107,.16)!important;border-radius:14px 4px 14px 14px!important;margin-left:auto!important}
html body[data-chat-fundo="madeira"] #professional-public-messages article.professional-message.is-self > div :is(p,b,small){text-align:left!important}
html body #professional-public-messages article.professional-message.is-self > span:first-child,
html body #professional-public-messages article.professional-message.is-self > div > b{display:none!important}
html body #professional-public-messages article.professional-message .chatpub-mais{background:transparent!important;border:0!important;box-shadow:none!important;opacity:.55}
}

/* Loja NO CELULAR (2026-10-14, revisão para o público): balões como no WhatsApp, iguais aos da sala
   privada e da profissional — o meu em verde GABA3 à direita, sem "Você" nem a minha bolinha; o do
   outro em madeira escura à esquerda; o ⋮ discreto. O computador não muda. */
@media (max-width:720px){
html body[data-chat-fundo="madeira"] #publica-chat-lista > article > div{background:rgba(22,14,8,.82)!important;border:1px solid rgba(241,217,154,.10)!important;border-radius:4px 14px 14px 14px!important;padding:6px 26px 6px 10px!important;box-shadow:0 1px 3px rgba(0,0,0,.35)!important;max-width:85%!important;min-width:0!important;overflow-wrap:anywhere!important;box-sizing:border-box!important}
html body[data-chat-fundo="madeira"] #publica-chat-lista > article.gaba3-mensagem-propria > div{background:rgba(38,82,20,.92)!important;border-color:rgba(198,255,107,.16)!important;border-radius:14px 4px 14px 14px!important;margin-left:auto!important}
html body #publica-chat-lista > article.gaba3-mensagem-propria > div :is(p,b,small){text-align:left!important}
html body #publica-chat-lista > article.gaba3-mensagem-propria > .avatar-chat,
html body #publica-chat-lista > article.gaba3-mensagem-propria > div > b{display:none!important}
html body #publica-chat-lista > article .chatpub-mais{background:transparent!important;border:0!important;box-shadow:none!important;opacity:.55}
}