/* Tema do modo embutido: visual do conversaquemuda.com (janela de conversa da capa), conteúdo e nome do Traz pra cá.
   Fontes e padrão são servidos daqui mesmo: o visitante não é rastreado por terceiros. */
@font-face{font-family:"Archivo";src:url("archivo-latin.woff2") format("woff2");font-weight:100 900;font-stretch:62% 125%;font-display:swap}
@font-face{font-family:"Instrument Sans";src:url("instrument-sans-latin.woff2") format("woff2");font-weight:400 700;font-display:swap}

html.embed{
  --bg:#ffffff; --fg:#111b21; --muted:#667781; --line:#eadcdc; --surface:#faf6f5;
  --red:#d4101f; --yellow:#f9c80e; --on-yellow:#1c1213;
  --wa-bg:#efeae2; --wa-in:#ffffff; --wa-out:#d9fdd3; --wa-head:#ffffff; --wa-head-fg:#1c1213;
  --wa-send:#d4101f; --wa-send-fg:#ffffff; --wa-chip:#a50b17; --wa-padrao:#cdc6b9;
  --sys-bg:#fff6cf; --sys-fg:#8a6400; --link:#a50b17;
  --font:"Instrument Sans",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --display:"Archivo","Arial Narrow",system-ui,sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){html.embed:not([data-theme="light"]){
  --bg:#26343c; --fg:#eef2f3; --muted:#9fb0b9; --line:#3d2a2c; --surface:#241819;
  --red:#ff6b73; --wa-bg:#1a2831; --wa-in:#2d3d47; --wa-out:#0b6b57; --wa-head:#26343c; --wa-head-fg:#f7eeee;
  --wa-send:#d4101f; --wa-send-fg:#ffffff; --wa-chip:#ffd9dc; --wa-padrao:#121c22;
  --sys-bg:#3a3210; --sys-fg:#f5cf3a; --link:#ffd9dc; color-scheme:dark}}
html.embed[data-theme="dark"]{
  --bg:#26343c; --fg:#eef2f3; --muted:#9fb0b9; --line:#3d2a2c; --surface:#241819;
  --red:#ff6b73; --wa-bg:#1a2831; --wa-in:#2d3d47; --wa-out:#0b6b57; --wa-head:#26343c; --wa-head-fg:#f7eeee;
  --wa-send:#d4101f; --wa-send-fg:#ffffff; --wa-chip:#ffd9dc; --wa-padrao:#121c22;
  --sys-bg:#3a3210; --sys-fg:#f5cf3a; --link:#ffd9dc; color-scheme:dark}

/* o cartão arredondado e a sombra ficam por conta do iframe (embed.js): aqui dentro é tela cheia */
html.embed,html.embed body{background:transparent}
html.embed .app{max-width:none;border:0;box-shadow:none;background:var(--wa-bg);isolation:isolate}
html.embed .app::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:var(--wa-padrao);
  -webkit-mask:url("padrao-baloes.svg") 0 0/170px 170px repeat;mask:url("padrao-baloes.svg") 0 0/170px 170px repeat}

/* barra do contato como a da capa: fundo de papel, nome em Archivo, avatar vermelho, linha embaixo */
html.embed .chathead{background:var(--wa-head);color:var(--wa-head-fg);border-bottom:1px solid var(--line);padding-top:8px}
html.embed .chathead b{font:700 .98rem/1.2 var(--display)}
html.embed .chathead small{opacity:.7}
html.embed .hbtn:hover{background:rgba(127,127,127,.16)}

/* balões da capa: 18px de raio e canto reto de 5px, sem borda */
html.embed .bubble{border-radius:18px;padding:10px 14px;line-height:1.45;font-size:.98rem}
html.embed .me .bubble{border-top-right-radius:18px;border-bottom-right-radius:5px;background:var(--wa-out);color:var(--fg)}
html.embed .coach .bubble{border-top-left-radius:18px;border-bottom-left-radius:5px;background:var(--wa-in);color:var(--fg)}
html.embed .bubble.draft{border:2px solid var(--yellow)}
html.embed .sys{border-radius:12px}
html.embed .example{border-radius:18px}
html.embed .tag{font-family:var(--display)}

/* botões: o amarelo da capa com canto reto, como o "Participar" */
html.embed .copy{border-radius:16px 16px 4px 16px;font-family:var(--display);box-shadow:0 3px 10px rgba(0,0,0,.2)}
html.embed .chip{border-radius:16px 16px 4px 16px;color:var(--wa-chip)}
html.embed .send{border-radius:50%}

html.embed textarea{border-radius:22px}
html.embed .quick,html.embed .composer{background:var(--wa-bg);border-top:1px solid var(--line)}
html.embed :focus-visible{outline:3px solid var(--yellow)}

/* tamanho do texto escolhido no site hospedeiro (os mesmos 12,5% e 25% do conversaquemuda.com) */
html.embed[data-fonte="1"] .app{zoom:1.125;height:calc(100dvh / 1.125)}
html.embed[data-fonte="2"] .app{zoom:1.25;height:calc(100dvh / 1.25)}

/* botões de resposta rápida menores, para sobrar espaço à conversa */
html.embed .quick{gap:5px;padding:4px 10px 6px}
html.embed .chip{padding:4px 10px;font-size:12.5px;line-height:1.3;border-radius:14px 14px 3px 14px;box-shadow:none}

/* a linha "Enter envia..." não aparece no embutido */
html.embed .hint{display:none}

/* abertura: as mensagens já escritas entram uma a uma (bridge.js). Os botões só depois da última. */
html.embed.anim #intro .msg:not(.vis):not(.t-ind),html.embed.anim #intro .example:not(.vis),html.embed.anim #log > .sys.fim:not(.vis){display:none}
html.embed.anim:not(.intro-done) .quick{display:none}
html.embed .vis-in{animation:trazIn .28s ease-out both}
@keyframes trazIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){html.embed .vis-in{animation:none}}

/* "escrevendo": o mesmo da capa do conversaquemuda.com (três pontos de 7px que pulam, balão com o canto reto) */
html.embed .bubble.typing{display:flex;align-items:center;gap:4px;padding:12px 16px;white-space:normal}
html.embed .coach .bubble.typing{background:var(--wa-in);border-radius:18px;border-bottom-left-radius:5px}
html.embed .me .bubble.typing{background:var(--wa-out);border-radius:18px;border-bottom-right-radius:5px}
html.embed .typing i{width:7px;height:7px;border-radius:50%;background:var(--muted);opacity:.5;animation:trazPulo 1s infinite}
html.embed .typing i:nth-child(2){animation-delay:.15s}
html.embed .typing i:nth-child(3){animation-delay:.3s}
@keyframes trazPulo{0%,60%,100%{transform:none;opacity:.5}30%{transform:translateY(-5px);opacity:1}}
@media (prefers-reduced-motion:reduce){html.embed .typing i{animation:none;opacity:.8}}

/* botão de enviar: sempre fundo vermelho e seta branca (também desabilitado, só um pouco mais claro) */
html.embed .send:not(.stop){background:#d4101f;color:#fff}
html.embed .send:not(.stop):disabled{opacity:.65}

/* embaixo do rascunho fica o "Edite, mande, e cole a resposta aqui." (igual ao site); no exemplo a barra some inteira */
html.embed .example .draftbar{display:none}

/* caixa de texto com uma linha só (cresce se a pessoa colar ou escrever mais) */
html.embed textarea{padding-block:12px;line-height:1.3}
html.embed .example.sai{opacity:0;transition:opacity .2s}