/* passada de design da home, 07/10/2026 · capa (casca #casca-quadro + app #dc-root) e demonstracao 'Conheca a Rafa'. Dono: agente ENTRADA.
   So le os tokens de base.css (--ds-*). Todo seletor vale para as DUAS copias (a casca estatica do celular e o app) pelo mesmo prefixo.
   Leitura rapida:  P = a folha da entrada   |   I = o corpo da folha QUANDO a conversa esta em repouso (so ai existe .ref-chat-head)
                    C = o cartao da demonstracao (a grade que contem a barra de conversa)   |   a conversa aberta nao e tocada por nada daqui. */

/* =====================================================================
   1. CAPA · retrato assinado ao lado do subtitulo (todas as larguras)
   ===================================================================== */
:is(#dc-root,#casca-quadro) [data-screen-label="Canvas conversacional"] .cin-p.ds-fala{display:flex!important;align-items:flex-start;text-wrap:pretty}
:is(#dc-root,#casca-quadro) [data-screen-label="Canvas conversacional"] .cin-p.ds-fala>span:last-child{flex:1 1 0;min-width:0}
/* o italico do titulo nao entra na conta da altura da linha: a casca (fontes substitutas) e o app (fontes reais) ficam com a MESMA altura de titulo, e a pagina nao pula quando o app monta */
:is(#dc-root,#casca-quadro) [data-screen-label="Canvas conversacional"] h1.cin-h1>i{line-height:0}
:is(#dc-root,#casca-quadro) [data-screen-label="Canvas conversacional"] .ds-ret{flex:none;display:block;box-sizing:border-box;width:56px;height:56px;margin-top:-3px;padding:3px;border-radius:50%;
  background:var(--ds-creme-2);box-shadow:0 0 0 1px var(--ds-ouro),0 12px 22px -14px rgba(74,19,32,.6)}
:is(#dc-root,#casca-quadro) [data-screen-label="Canvas conversacional"] .ds-ret img{display:block;width:100%;height:100%;border-radius:50%;object-fit:cover;object-position:50% 38%}

/* computador (>= 1100): titulo maior e firme, coluna de 560 px (a da imagem), fala assinada, fio de ouro curto no alto do titulo */
@media (min-width:1100px){
  :is(#dc-root,#casca-quadro) [data-screen-label="Canvas conversacional"] h1.cin-h1{font-size:min(var(--ds-h1),84px)!important;line-height:.98!important;letter-spacing:-.03em!important;white-space:nowrap}
  :is(#dc-root,#casca-quadro) [data-screen-label="Canvas conversacional"] h1.cin-h1::before{content:"";display:block;width:46px;height:2px;margin:0 0 28px;border-radius:2px;background:linear-gradient(90deg,var(--ds-ouro),rgba(201,165,94,0))}
  :is(#dc-root,#casca-quadro) [data-screen-label="Canvas conversacional"] .cin-p.ds-fala{gap:18px;max-width:clamp(400px,38vw,520px)!important;margin-top:32px!important;font-size:var(--ds-lead)!important;line-height:1.5!important;text-shadow:0 0 16px rgba(244,239,230,.95),0 0 5px rgba(244,239,230,.8)}
  :is(#dc-root,#casca-quadro) [data-screen-label="Canvas conversacional"] h1.cin-h1{text-shadow:0 0 22px rgba(244,239,230,.9)}
  :is(#dc-root,#casca-quadro) [data-screen-label="Canvas conversacional"] .cin-acoes{margin-top:36px}
}
/* tablet (760 a 1099): mesma ideia, empilhada */
@media (min-width:760px) and (max-width:1099px){
  :is(#dc-root,#casca-quadro) [data-screen-label="Canvas conversacional"] h1.cin-h1{font-size:var(--ds-h1)!important;line-height:.98!important;letter-spacing:-.022em!important}
  :is(#dc-root,#casca-quadro) [data-screen-label="Canvas conversacional"] .cin-p.ds-fala{gap:18px;max-width:640px!important;margin-top:24px!important;font-size:var(--ds-lead)!important;line-height:1.5!important}
}
/* celular (<= 759): titulo 44 px, rosto de 44 px, botoes mais baixos (a altura e o que se ganha aqui) */
@media (max-width:759px){
  :is(#dc-root,#casca-quadro) [data-screen-label="Canvas conversacional"] h1.cin-h1{font-size:var(--ds-h1)!important;line-height:.98!important;letter-spacing:-.02em!important}
  :is(#dc-root,#casca-quadro) [data-screen-label="Canvas conversacional"] .cin-p.ds-fala{gap:12px;margin-top:14px!important;font-size:15.5px!important;line-height:1.48!important}
  :is(#dc-root,#casca-quadro) [data-screen-label="Canvas conversacional"] .ds-ret{width:44px;height:44px;margin-top:0;padding:2px}
  :is(#dc-root,#casca-quadro) [data-screen-label="Canvas conversacional"] .cin-cta1{margin-top:18px!important;min-height:50px!important}
  :is(#dc-root,#casca-quadro) [data-screen-label="Canvas conversacional"] .cin-ver{margin-top:8px;min-height:46px}
  :is(#dc-root,#casca-quadro) [data-screen-label="Canvas conversacional"] .cin-frame{margin-top:16px}
}

/* =====================================================================
   2. DEMONSTRACAO "Conheca a Rafa" · o PALCO (so em repouso: depende de existir .ref-chat-head)
   cabecalho centrado -> um cartao-console em papel (aviso, barra, sugestoes, saida para o WhatsApp) -> "Ou conheca a operacao" por baixo
   ===================================================================== */
/* 2.1 cabecalho: o contentor some (display:contents) e o texto e o link viram itens do corpo, na ordem 1 (texto), 2 (cartao), 3 (link) */
:is(#dc-root,#casca-quadro) [data-screen-label="Canvas conversacional"]>div:has(>.ref-chat-head)>.ref-chat-head{display:contents}
:is(#dc-root,#casca-quadro) [data-screen-label="Canvas conversacional"]>div:has(>.ref-chat-head)>.ref-chat-head>div{order:1;box-sizing:border-box;width:100%;max-width:920px;margin-left:auto;margin-right:auto;text-align:center}
:is(#dc-root,#casca-quadro) [data-screen-label="Canvas conversacional"]>div:has(>.ref-chat-head) .ref-kicker{display:inline-flex;align-items:center;gap:14px;font:500 max(12px,var(--ds-rotulo))/1.4 var(--ds-mono)!important;letter-spacing:var(--ds-rotulo-esp);text-transform:uppercase;color:var(--ds-vinho)}
:is(#dc-root,#casca-quadro) [data-screen-label="Canvas conversacional"]>div:has(>.ref-chat-head) .ref-kicker::before,
:is(#dc-root,#casca-quadro) [data-screen-label="Canvas conversacional"]>div:has(>.ref-chat-head) .ref-kicker::after{content:"";flex:none;width:28px;height:1px;background:currentColor;opacity:.5}
:is(#dc-root,#casca-quadro) [data-screen-label="Canvas conversacional"]>div:has(>.ref-chat-head) .ref-chat-head h2{margin:18px 0 0;font:500 var(--ds-h2)/1.02 var(--ds-serif);letter-spacing:-.015em;color:var(--ds-tinta);text-wrap:balance}
/* 07/10 sessao principal: italico de duas cores no titulo da demonstracao, como nas outras secoes (HTML aplicado na casca e no modelo) */
:is(#dc-root,#casca-quadro) [data-screen-label="Canvas conversacional"]>div:has(>.ref-chat-head) .ref-chat-head h2 i{font-style:italic;color:var(--ds-vinho)}
:is(#dc-root,#casca-quadro) [data-screen-label="Canvas conversacional"]>div:has(>.ref-chat-head) .ref-chat-head p{max-width:34em;margin:16px auto 0;font:400 var(--ds-lead)/1.55 var(--ds-sans);color:var(--ds-sub-claro);text-wrap:balance}
:is(#dc-root,#casca-quadro) [data-screen-label="Canvas conversacional"]>div:has(>.ref-chat-head)>.ref-chat-head>a{order:3;align-self:center;display:inline-flex;align-items:center;gap:12px;box-sizing:border-box;min-height:44px;margin:26px 0 0;padding:0 2px;
  font:500 15px/1.4 var(--ds-sans)!important;color:var(--ds-vinho);text-decoration:underline;text-decoration-color:rgba(123,36,55,.32);text-decoration-thickness:1px;text-underline-offset:7px;white-space:nowrap}
:is(#dc-root,#casca-quadro) [data-screen-label="Canvas conversacional"]>div:has(>.ref-chat-head)>.ref-chat-head>a:hover{text-decoration-color:var(--ds-vinho)}
:is(#dc-root,#casca-quadro) [data-screen-label="Canvas conversacional"]>div:has(>.ref-chat-head)>.ref-chat-head>a>span{display:inline-block;transition:transform .25s var(--ds-ease)}
:is(#dc-root,#casca-quadro) [data-screen-label="Canvas conversacional"]>div:has(>.ref-chat-head)>.ref-chat-head>a:hover>span{transform:translateY(3px)}

/* 2.2 o cartao-console: a propria grade vira o cartao (papel, raio 22, sombra suave); uma coluna: barra / sugestoes / saida */
:is(#dc-root,#casca-quadro) [data-screen-label="Canvas conversacional"]>div:has(>.ref-chat-head)>div:has(.hv-nota){order:2;box-sizing:border-box;width:100%;max-width:920px!important;margin:var(--ds-bloco) auto 0!important;
  grid-template-columns:minmax(0,1fr)!important;grid-template-areas:"comp" "sug" "wa"!important;gap:0!important;
  background:linear-gradient(180deg,var(--ds-papel) 0%,#FCFAF5 100%);border-radius:var(--ds-raio);
  box-shadow:0 0 0 1px rgba(14,13,12,.07),inset 0 1px 0 #fff,0 44px 70px -46px rgba(14,13,12,.5),0 16px 34px -24px rgba(74,19,32,.3)}
/* aviso de demonstracao: o MESMO texto, agora uma linha discreta no topo do cartao (sem fonte de codigo, sem paragrafo) */
:is(#dc-root,#casca-quadro) [data-screen-label="Canvas conversacional"]>div:has(>.ref-chat-head) .hv-nota{max-width:none!important;margin:0 0 22px!important;padding:0 0 16px;border-bottom:1px solid rgba(14,13,12,.08);
  font-family:inherit!important;font-size:15px!important;line-height:1.5!important;letter-spacing:0!important;color:var(--ds-sub-claro)!important}
:is(#dc-root,#casca-quadro) [data-screen-label="Canvas conversacional"]>div:has(>.ref-chat-head) .hv-nota b{font-weight:600;color:var(--ds-vinho)}
/* barra de conversa: mais larga e mais alta; o brilho giratorio da borda continua */
:is(#dc-root,#casca-quadro) [data-screen-label="Canvas conversacional"]>div:has(>.ref-chat-head) .hv-nota~div div:has(>div>textarea){gap:10px!important;padding:7px 7px 7px 9px!important}
:is(#dc-root,#casca-quadro) [data-screen-label="Canvas conversacional"]>div:has(>.ref-chat-head) .hv-nota~div div:has(>div>textarea)>div{min-height:44px!important}
:is(#dc-root,#casca-quadro) [data-screen-label="Canvas conversacional"]>div:has(>.ref-chat-head) .hv-nota~div textarea{font-size:1.06rem!important}
:is(#dc-root,#casca-quadro) [data-screen-label="Canvas conversacional"]>div:has(>.ref-chat-head) .hv-nota+div>div:last-child{margin:14px 0 0 24px!important}

/* sugestoes: rotulo + 4 cartinhas (2x2 no computador, cada uma em UMA linha) */
:is(#dc-root,#casca-quadro) [data-screen-label="Canvas conversacional"]>div:has(>.ref-chat-head)>div:has(.hv-nota)>div:has(>.hv-rot){margin-top:30px;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px 14px!important}
:is(#dc-root,#casca-quadro) [data-screen-label="Canvas conversacional"]>div:has(>.ref-chat-head) .hv-rot{grid-column:1/-1;margin:0;padding:0 2px 4px!important;font-size:max(12px,var(--ds-rotulo))!important;letter-spacing:var(--ds-rotulo-esp)!important;color:var(--ds-sub-claro)!important}
:is(#dc-root,#casca-quadro) [data-screen-label="Canvas conversacional"]>div:has(>.ref-chat-head) .scp0{display:flex;align-items:center!important;gap:14px!important;box-sizing:border-box;width:100%;padding:15px 18px!important;
  border:1px solid rgba(14,13,12,.1)!important;border-radius:14px;background:#FAF6EE!important;color:var(--ds-tinta)!important;transition:border-color .2s,background-color .2s,box-shadow .2s,transform .2s var(--ds-ease)!important}
:is(#dc-root,#casca-quadro) [data-screen-label="Canvas conversacional"]>div:has(>.ref-chat-head) .scp0>span:first-child{font-size:12.5px!important;font-weight:500;letter-spacing:.08em!important;color:var(--ds-vinho)!important}
:is(#dc-root,#casca-quadro) [data-screen-label="Canvas conversacional"]>div:has(>.ref-chat-head) .scp0 .sc-interp{font-size:16px!important;line-height:1.35}
:is(#dc-root,#casca-quadro) [data-screen-label="Canvas conversacional"]>div:has(>.ref-chat-head) .scp0>span:last-child{color:var(--ds-vinho)!important;opacity:.55;font-size:1em!important;transition:transform .25s var(--ds-ease),opacity .2s}
:is(#dc-root,#casca-quadro) [data-screen-label="Canvas conversacional"]>div:has(>.ref-chat-head) .scp0:hover{border-color:rgba(123,36,55,.5)!important;background:var(--ds-papel)!important;box-shadow:0 14px 26px -18px rgba(74,19,32,.5);transform:translateY(-1px)}
:is(#dc-root,#casca-quadro) [data-screen-label="Canvas conversacional"]>div:has(>.ref-chat-head) .scp0:hover>span:last-child{opacity:1;transform:translateX(3px)}
:is(#dc-root,#casca-quadro) [data-screen-label="Canvas conversacional"]>div:has(>.ref-chat-head) .scp0:focus-visible{outline:3px solid var(--ds-ouro);outline-offset:3px}

/* saida para o WhatsApp: linha quieta no rodape do cartao (mesmo texto; o rotulo deixa a caixa alta e a fonte de codigo) */
:is(#dc-root,#casca-quadro) [data-screen-label="Canvas conversacional"]>div:has(>.ref-chat-head) .scp1{display:flex!important;align-self:auto!important;justify-self:stretch!important;gap:14px!important;margin-top:26px;padding:20px 0 0!important;
  border:0!important;border-top:1px solid rgba(14,13,12,.08)!important;border-radius:0!important;background:none!important;box-shadow:none!important}
:is(#dc-root,#casca-quadro) [data-screen-label="Canvas conversacional"]>div:has(>.ref-chat-head) .scp1>span:last-child{flex-direction:row!important;flex-wrap:wrap;align-items:baseline;gap:2px 12px;white-space:normal!important;line-height:1.4!important}
:is(#dc-root,#casca-quadro) [data-screen-label="Canvas conversacional"]>div:has(>.ref-chat-head) .scp1>span:last-child>span:first-child{font-family:inherit!important;font-size:15px!important;text-transform:none!important;letter-spacing:0!important;color:var(--ds-sub-claro)!important}
:is(#dc-root,#casca-quadro) [data-screen-label="Canvas conversacional"]>div:has(>.ref-chat-head) .scp1>span:last-child>span:last-child{margin-top:0!important;font-size:15px!important;font-weight:600!important;color:var(--ds-tinta)}
:is(#dc-root,#casca-quadro) [data-screen-label="Canvas conversacional"]>div:has(>.ref-chat-head) .scp1:hover>span:last-child>span:last-child{color:var(--ds-vinho)}
:is(#dc-root,#casca-quadro) [data-screen-label="Canvas conversacional"]>div:has(>.ref-chat-head) .scp1:focus-visible{outline:3px solid var(--ds-ouro);outline-offset:4px;border-radius:6px!important}

/* 2.3 computador e tablet (>= 760): respiro do palco */
@media (min-width:760px){
  :is(#dc-root,#casca-quadro) [data-screen-label="Canvas conversacional"]>div:has(>.ref-chat-head){padding-bottom:clamp(72px,7vw,112px)!important;
    background:radial-gradient(ellipse 58% 520px at 50% calc(100% - 360px),rgba(201,165,94,.13),rgba(123,36,55,.05) 46%,transparent 74%)}
  :is(#dc-root,#casca-quadro) [data-screen-label="Canvas conversacional"]>div:has(>.ref-chat-head)>.ref-chat-head>div{margin-top:calc(var(--ds-secao-y) * .72)}
  :is(#dc-root,#casca-quadro) [data-screen-label="Canvas conversacional"]>div:has(>.ref-chat-head)>div:has(.hv-nota){padding:34px clamp(24px,3.4vw,44px) 28px}
}
@media (min-width:760px) and (max-width:899px){
  :is(#dc-root,#casca-quadro) [data-screen-label="Canvas conversacional"]>div:has(>.ref-chat-head)>div:has(.hv-nota)>div:has(>.hv-rot){grid-template-columns:minmax(0,1fr)!important}
}

/* 2.4 celular (<= 759): o mesmo cartao, sugestoes em lista, espacos menores (a altura e o que se ganha aqui) */
@media (max-width:759px){
  :is(#dc-root,#casca-quadro) [data-screen-label="Canvas conversacional"]>div:has(>.ref-chat-head){padding-top:20px!important;padding-bottom:32px!important}
  :is(#dc-root,#casca-quadro) [data-screen-label="Canvas conversacional"]>div:has(>.ref-chat-head)>.ref-chat-head>div{margin-top:20px}
  :is(#dc-root,#casca-quadro) [data-screen-label="Canvas conversacional"]>div:has(>.ref-chat-head) .ref-chat-head h2{margin-top:10px;font-size:min(var(--ds-h2),8.4vw);line-height:1.04}
  :is(#dc-root,#casca-quadro) [data-screen-label="Canvas conversacional"]>div:has(>.ref-chat-head) .ref-chat-head p{margin-top:8px;font-size:.97rem;line-height:1.45}
  :is(#dc-root,#casca-quadro) [data-screen-label="Canvas conversacional"]>div:has(>.ref-chat-head)>.ref-chat-head>a{min-height:40px;margin-top:2px}
  :is(#dc-root,#casca-quadro) [data-screen-label="Canvas conversacional"]>div:has(>.ref-chat-head)>div:has(.hv-nota){margin-top:18px!important;padding:14px 16px 0}
  :is(#dc-root,#casca-quadro) [data-screen-label="Canvas conversacional"]>div:has(>.ref-chat-head) .hv-nota{margin-bottom:12px!important;padding-bottom:10px;font-size:13.5px!important;line-height:1.45!important}
  :is(#dc-root,#casca-quadro) [data-screen-label="Canvas conversacional"]>div:has(>.ref-chat-head) .hv-nota+div>div:last-child{margin:10px 0 0 18px!important}
  :is(#dc-root,#casca-quadro) [data-screen-label="Canvas conversacional"]>div:has(>.ref-chat-head)>div:has(.hv-nota)>div:has(>.hv-rot){margin-top:16px;grid-template-columns:minmax(0,1fr)!important;gap:0!important}
  :is(#dc-root,#casca-quadro) [data-screen-label="Canvas conversacional"]>div:has(>.ref-chat-head) .hv-rot{padding-bottom:6px!important}
  :is(#dc-root,#casca-quadro) [data-screen-label="Canvas conversacional"] .cin-intro{padding-bottom:8px!important}
  /* lista com fios, sem molduras (mais baixa que 4 cartinhas) */
  :is(#dc-root,#casca-quadro) [data-screen-label="Canvas conversacional"]>div:has(>.ref-chat-head) .scp0{padding:9px 2px!important;gap:12px!important;border:0!important;border-top:1px solid rgba(14,13,12,.08)!important;border-radius:0;background:none!important}
  :is(#dc-root,#casca-quadro) [data-screen-label="Canvas conversacional"]>div:has(>.ref-chat-head) .scp0 .sc-interp{font-size:15.5px!important}
  :is(#dc-root,#casca-quadro) [data-screen-label="Canvas conversacional"]>div:has(>.ref-chat-head) .scp0:hover{box-shadow:none;transform:none;background:none!important}
  :is(#dc-root,#casca-quadro) [data-screen-label="Canvas conversacional"]>div:has(>.ref-chat-head) .scp1{margin-top:4px;padding:12px 0 10px!important}
}
/* =====================================================================
   3. movimento: nada de animacao nova; so as transicoes curtas de toque/foco acima. "Reduzir movimento" e "Pausar animacoes" as desligam
   (mesma especificidade das regras que elas desligam, para ganhar de fato).
   ===================================================================== */
@media (prefers-reduced-motion:reduce){
  html :is(#dc-root,#casca-quadro) [data-screen-label="Canvas conversacional"]>div:has(>.ref-chat-head) :is(.scp0,.scp0>span,.ref-chat-head>a,.ref-chat-head>a>span),
  html :is(#dc-root,#casca-quadro) [data-screen-label="Canvas conversacional"]>div:has(>.ref-chat-head)>.ref-chat-head>a>span{transition:none!important;transform:none!important}
}
html[data-elite-paused] :is(#dc-root,#casca-quadro) [data-screen-label="Canvas conversacional"]>div:has(>.ref-chat-head) :is(.scp0,.scp0>span,.ref-chat-head>a,.ref-chat-head>a>span),
html[data-elite-paused] :is(#dc-root,#casca-quadro) [data-screen-label="Canvas conversacional"]>div:has(>.ref-chat-head)>.ref-chat-head>a>span{transition:none!important;transform:none!important}

/* =====================================================================
   refino ad6466d7 07/10 (revisão crítica da home cffe492)
   ===================================================================== */
/* ad6466d7/entrada[0]: a linha de status passa a pintar ACIMA do brilho giratorio (z-index 4 + halo creme da cor do cartao); o brilho em si (filter, opacity, animacao) nao e tocado */
:is(#dc-root,#casca-quadro) [data-screen-label="Canvas conversacional"]>div:has(>.ref-chat-head) .hv-nota+div>div:last-child{position:relative;z-index:4;text-shadow:0 0 5px #FDFBF7,0 0 2px #FDFBF7}
@media (max-width:759px){
  /* ad6466d7/entrada[1]: alvos de toque de 44 px (4 sugestoes e o link "Ou conheca a operacao") */
  :is(#dc-root,#casca-quadro) [data-screen-label="Canvas conversacional"]>div:has(>.ref-chat-head) .scp0{min-height:44px;box-sizing:border-box}
  :is(#dc-root,#casca-quadro) [data-screen-label="Canvas conversacional"]>div:has(>.ref-chat-head)>.ref-chat-head>a{min-height:44px;margin-top:2px}
  /* ad6466d7/entrada[3]: mais folga entre o link "Ou conheca a operacao" e a emenda com o Como (32 -> 56 px) */
  :is(#dc-root,#casca-quadro) [data-screen-label="Canvas conversacional"]>div:has(>.ref-chat-head){padding-bottom:56px!important}
  /* ad6466d7/entrada[5]: esmaece a borda direita da faixa de abas (pista de "role para ver mais"). Mascarar o nav abriria uma mancha escura (atras dele ha o escuro do quadro); por isso um ::after sticky de largura zero, colado a borda direita, projeta um degrade na cor efetiva do nav (app: creme .96 sobre o escuro do quadro = 234,229,221; casca estatica: 242,238,229). Sticky: so cobre as abas enquanto ha o que rolar; no fim da rolagem fica 30 px depois de "Entrar" e nao toca nela */
  :is(#dc-root,#casca-quadro) nav[style*="overflow-x"]{padding-right:0!important}
  :is(#dc-root,#casca-quadro) nav[style*="overflow-x"]::after{content:"";flex:none;align-self:stretch;position:sticky;right:0;width:0;margin-left:8px;pointer-events:none;box-shadow:0 0 14px 14px rgb(234,229,221)}
  #casca-quadro nav[style*="overflow-x"]::after{box-shadow:0 0 14px 14px rgb(242,238,229)}
}
@media (max-width:379px){
  /* ad6466d7/entrada[2]: placeholder a 15 px abaixo de 380 px (o campo segue em 17 px; texto do placeholder igual) */
  :is(#dc-root,#casca-quadro) [data-screen-label="Canvas conversacional"] textarea::placeholder{font-size:15px}
}