/* Reprise da live (partial views/partials/live.php). Prefixo .sql; formato stories 9:16, visual da landing (Baloo/Nunito, rosa/roxo). */
.sql{--sq-ink:#3b2a59;--sq-pink:#e0157c;--sq-pink2:#ff6fb1;--sq-yel:#ffd23f;font-family:Nunito,system-ui,sans-serif;color:var(--sq-ink)}
.sql[hidden],.sql [hidden]{display:none!important}
.sql button{font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
.sql :focus-visible{outline:3px solid var(--sq-yel);outline-offset:2px}
.sql-selo{display:inline-block;font:800 11px/1 Baloo,Nunito,sans-serif;letter-spacing:.06em;color:#fff;background:var(--sq-pink);border-radius:99px;padding:5px 9px;flex:none}

/* bolha vertical (canto inferior esquerdo, acima da barra fixa e do aviso de cookies) */
.sql-bolha,.sql-x{position:fixed;z-index:35}
.sql-bolha{left:12px;bottom:calc(88px + env(safe-area-inset-bottom));width:84px;height:168px;padding:0;border:0;background:#000;border-radius:18px;overflow:visible;box-shadow:0 6px 22px rgba(59,42,89,.4);color:#fff}
.sql-mini{width:84px;height:168px;border-radius:18px;object-fit:cover;border:3px solid var(--sq-pink2);background:#f3e9ff;display:block;box-sizing:border-box}
.sql-bolha::after{content:"";position:absolute;left:3px;right:3px;bottom:3px;height:56px;border-radius:0 0 15px 15px;background:linear-gradient(#0000,#000c);pointer-events:none}
.sql-bolha .sql-selo{position:absolute;left:8px;top:-9px;font-size:10px;padding:4px 7px;z-index:1}
.sql-play{position:absolute;left:33px;top:75px;width:18px;height:18px;color:#fff;filter:drop-shadow(0 1px 3px rgba(0,0,0,.6));pointer-events:none}
.sql-txt{position:absolute;left:8px;right:8px;bottom:8px;z-index:1;font:800 11px/1.1 Baloo,Nunito,sans-serif;text-align:center;text-shadow:0 1px 2px #000}
.sql-x{left:-6px;bottom:calc(88px + 168px - 26px + env(safe-area-inset-bottom));width:44px;height:44px;border:0;background:none;display:grid;place-items:center;color:#fff;padding:0}
.sql-x svg{background:var(--sq-ink);border-radius:50%;padding:5px;box-sizing:content-box;width:14px;height:14px;box-shadow:0 2px 6px rgba(0,0,0,.3)}
.sql[data-topo="1"][data-estado=mini] .sql-bolha,.sql[data-topo="1"][data-estado=mini] .sql-x,.cookies-aberto .sql[data-estado=mini] .sql-bolha,.cookies-aberto .sql[data-estado=mini] .sql-x{display:none}
.sql:not([data-estado=mini]) .sql-bolha,.sql:not([data-estado=mini]) .sql-x{display:none}

/* tela cheia: stories */
.sql-jan{position:fixed;inset:0;z-index:90;background:#120a22;color:#fff;overflow:hidden}
.sql-fundo{pointer-events:none;position:absolute;inset:-40px;background:center/cover;filter:blur(32px) brightness(.5);display:none}
.sql-palco{position:absolute;inset:0;overflow:hidden;background:#000}
.sql-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000}
.sql-gt,.sql-gb{position:absolute;left:0;right:0;pointer-events:none}
.sql-gt{top:0;height:150px;background:linear-gradient(#000a,#0000)}
.sql-gb{bottom:0;height:56%;background:linear-gradient(#0000,#000b 45%,#000e)}
.sql-topo{position:absolute;left:0;right:0;top:0;display:flex;align-items:center;gap:6px;padding:calc(10px + env(safe-area-inset-top)) 8px 0 12px}
.sql-id{flex:1;min-width:0;display:flex;align-items:center;gap:8px}
.sql-av{width:40px;height:40px;border-radius:50%;background:#fff;border:2px solid var(--sq-pink2);flex:none;object-fit:cover}
.sql-nomes{min-width:0;line-height:1.1;text-shadow:0 1px 3px #000a}
.sql-nomes b{display:block;font:800 15px/1.1 Baloo,Nunito,sans-serif;white-space:nowrap}
.sql-nomes small{display:block;font-size:12px;font-weight:700;opacity:.9;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sql-bs{display:flex;gap:4px;flex:none}
.sql-b{flex:none;width:44px;height:44px;border:0;border-radius:50%;background:rgba(0,0,0,.4);color:#fff;display:grid;place-items:center;padding:0}
.sql-b:active{background:rgba(0,0,0,.65)}
.sql-b .i-som{display:none}.sql-b[aria-pressed=true] .i-som{display:block}.sql-b[aria-pressed=true] .i-mudo{display:none}
.sql [data-sql=expandir]{display:none}
.sql-aviso{position:absolute;left:50%;top:38%;transform:translateX(-50%);display:flex;align-items:center;gap:8px;min-height:44px;padding:0 18px;border:0;border-radius:99px;background:rgba(0,0,0,.6);color:#fff;font:800 15px Nunito,sans-serif;white-space:nowrap}
.sql-chat{position:absolute;left:10px;right:22%;bottom:calc(172px + env(safe-area-inset-bottom));max-height:34%;display:flex;flex-direction:column;justify-content:flex-end;gap:6px;overflow:hidden;pointer-events:none;-webkit-mask-image:linear-gradient(0deg,#000 78%,transparent);mask-image:linear-gradient(0deg,#000 78%,transparent)}
.sql-msg{display:flex;gap:7px;align-items:flex-start;animation:sql-sobe .3s ease}
.sql-msg i{flex:0 0 26px;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;color:#fff;font:700 11px/1 Nunito,sans-serif;font-style:normal;background:var(--c,#555)}
.sql-msg div{background:rgba(0,0,0,.34);border-radius:14px;padding:5px 10px;max-width:100%;font-size:13px;line-height:1.3;word-break:break-word;text-shadow:0 1px 2px #0008}
.sql-msg b{color:#ffd86e;font-size:11.5px;font-weight:800;margin-right:5px}
@keyframes sql-sobe{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.sql-fixado{position:absolute;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));display:grid;grid-template-columns:64px 1fr;gap:4px 12px;align-items:center}
.sql-th{width:64px;height:64px;border-radius:14px;border:2px solid #fff;object-fit:cover;background:var(--c,#eee);display:grid;place-items:center;font:800 11px/1.1 Baloo,sans-serif;color:#fff;text-align:center;overflow:hidden;box-sizing:border-box}
.sql-ft b{display:block;font:800 17px/1.15 Baloo,Nunito,sans-serif}
.sql-ft small{display:block;font-weight:800;font-size:13px;color:#ffd0e6;margin-top:2px}
.sql-go{grid-column:1/-1;margin-top:8px;min-height:54px;border:0;border-radius:99px;background:var(--sq-pink);color:#fff;font:800 18px Baloo,Nunito,sans-serif;letter-spacing:.03em;padding:0 18px;box-shadow:0 3px 0 #a80f5c}
.sql-go:active{transform:translateY(2px);box-shadow:0 1px 0 #a80f5c}
.sql-nota{grid-column:1/-1;text-align:center;font-size:12px;font-weight:700;opacity:.85;margin-top:2px}

/* desktop: celular (moldura + ilha) no centro da tela, vídeo 1:2 dentro */
.sql-ilha{display:none}
@media (min-width:900px){
  .sql-bolha{bottom:20px}
  .sql-x{bottom:calc(20px + 168px - 26px)}
  .sql-jan{background:rgba(10,6,20,.72);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:grid;place-items:center}
  .sql-fundo{display:block;filter:blur(40px) brightness(.35)}
  .sql-palco{position:relative;inset:auto;height:min(88vh,820px);aspect-ratio:1/2;border:12px solid #15121c;border-radius:48px;box-shadow:0 0 0 2px #4a4558,0 30px 80px rgba(0,0,0,.7)}
  .sql-ilha{display:block;position:absolute;z-index:6;top:10px;left:50%;width:92px;height:26px;margin-left:-46px;border-radius:99px;background:#000;pointer-events:none}
  .sql-topo{padding-top:44px}
  .sql-gt{height:170px}
}

/* card: o celular maior no canto inferior esquerdo (abre no clique da bolha); a tela cheia é o botão expandir */
.sql[data-estado=card] .sql-jan{position:fixed;inset:auto auto calc(var(--cookies-h,0px) + 84px + env(safe-area-inset-bottom)) 10px;width:min(58vw,230px);height:auto;aspect-ratio:1/2;background:none;z-index:60;overflow:visible;display:block;backdrop-filter:none;-webkit-backdrop-filter:none}
.sql[data-estado=card] .sql-palco{position:absolute;inset:0;height:100%;aspect-ratio:auto;border:6px solid #15121c;border-radius:30px;box-shadow:0 0 0 2px #4a4558,0 18px 44px rgba(0,0,0,.55)}
.sql[data-estado=card] .sql-fundo,.sql[data-estado=card] [data-sql=minimizar],.sql[data-estado=card] .sql-nomes small{display:none}
.sql[data-estado=card] [data-sql=expandir]{display:grid}
.sql[data-estado=card] .sql-ilha{display:block;position:absolute;z-index:6;top:6px;left:50%;width:54px;height:16px;margin-left:-27px;border-radius:99px;background:#000;pointer-events:none}
.sql[data-estado=card] .sql-topo{padding:26px 4px 0 6px;gap:2px}
.sql[data-estado=card] .sql-id{gap:5px}
.sql[data-estado=card] .sql-av{width:26px;height:26px}
.sql[data-estado=card] .sql-nomes b{font-size:12px}
.sql[data-estado=card] .sql-id .sql-selo{font-size:8px;padding:3px 5px}
.sql[data-estado=card] .sql-bs{gap:0}
.sql[data-estado=card] .sql-b{width:32px;height:32px}
.sql[data-estado=card] .sql-b svg{width:17px;height:17px}
.sql[data-estado=card] .sql-gt{height:80px}
.sql[data-estado=card] .sql-aviso{font-size:12px;min-height:34px;padding:0 12px;top:34%}
.sql[data-estado=card] .sql-chat{left:6px;right:8%;bottom:96px;max-height:30%;gap:4px}
.sql[data-estado=card] .sql-msg{gap:4px}
.sql[data-estado=card] .sql-msg i{flex-basis:18px;width:18px;height:18px;font-size:9px}
.sql[data-estado=card] .sql-msg div{font-size:10.5px;padding:3px 7px;border-radius:10px}
.sql[data-estado=card] .sql-msg b{font-size:9.5px}
.sql[data-estado=card] .sql-fixado{left:6px;right:6px;bottom:6px;grid-template-columns:36px 1fr;gap:2px 7px}
.sql[data-estado=card] .sql-th{width:36px;height:36px;border-radius:9px}
.sql[data-estado=card] .sql-ft b{font-size:12px}
.sql[data-estado=card] .sql-ft small{font-size:9.5px}
.sql[data-estado=card] .sql-go{min-height:38px;font-size:13px;margin-top:5px;padding:0 10px}
@media (min-width:900px){
  .sql[data-estado=card] .sql-jan{bottom:calc(var(--cookies-h,0px) + 20px);left:20px;width:300px}
  .sql[data-estado=card] .sql-palco{border-width:9px;border-radius:40px}
  .sql[data-estado=card] .sql-ilha{top:8px;width:70px;height:20px;margin-left:-35px}
  .sql[data-estado=card] .sql-topo{padding-top:34px}
  .sql[data-estado=card] .sql-av{width:30px;height:30px}
  .sql[data-estado=card] .sql-nomes b{font-size:13px}
  .sql[data-estado=card] .sql-b{width:36px;height:36px}
  .sql[data-estado=card] .sql-chat{bottom:118px}
  .sql[data-estado=card] .sql-msg div{font-size:12px}
  .sql[data-estado=card] .sql-msg b{font-size:10.5px}
  .sql[data-estado=card] .sql-msg i{flex-basis:22px;width:22px;height:22px;font-size:10px}
  .sql[data-estado=card] .sql-fixado{left:10px;right:10px;bottom:10px;grid-template-columns:46px 1fr}
  .sql[data-estado=card] .sql-th{width:46px;height:46px}
  .sql[data-estado=card] .sql-ft b{font-size:14px}
  .sql[data-estado=card] .sql-ft small{font-size:11px}
  .sql[data-estado=card] .sql-go{min-height:44px;font-size:15px}
}

@media (prefers-reduced-motion:reduce){.sql-msg{animation:none}}
@media (prefers-reduced-motion:no-preference){.sql-bolha{transition:transform .2s}.sql-bolha:active{transform:scale(.96)}}

/* No fim da página a bolha (esq.), o WhatsApp (dir.) e a barra fixa cobriam o CNPJ do rodapé: espaço para rolar o texto acima deles. */
.rodape{padding-bottom:calc(28px + 270px + env(safe-area-inset-bottom))}
@media (min-width:900px){.rodape{padding-bottom:220px}}