/* 04 · O sistema (tom claro desde 17/10).
   A seção do v8 (ato do agente): index L185–259, site.css L402–423 (grade, sticky, .cap)
   e L267–350 (WhatsApp escuro). Só a fonte mudou: Geist e Geist Mono no lugar do Newsreader.
   Rodada 3: celular em foto (.device da base) preso à direita, história à esquerda.
   O celular é bloco de cor fixa; o resto usa os tokens do tom. */

/* ---------- cabeçalho (v8 .act-head) ---------- */
#sistema .sis-head { max-width: 60rem; margin: 0 auto clamp(64px, 11vh, 120px); text-align: center; }
#sistema .sis-head .eyebrow { margin-bottom: 18px; }
#sistema .sis-head h2 { margin-bottom: 26px; }
#sistema .sis-lede { font: 400 clamp(1.1rem, 1.55vw, 1.4rem)/1.45 var(--sans); letter-spacing: -.005em; color: var(--ink-2); max-width: 34em; margin: 0 auto; text-wrap: balance; }

/* ---------- grade: história à esquerda, celular preso à direita (v8 L402–414, lados trocados na rodada 3) ---------- */
#sistema .sis-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 clamp(16px, 2vw, 32px); }
#sistema .sis-ph { grid-column: 8 / span 5; grid-row: 1; }
#sistema .sis-sticky { position: sticky; top: max(7vh, calc(var(--nav-h) + 12px)); }
#sistema .sis-steps { grid-column: 1 / span 6; grid-row: 1; padding-bottom: 16vh; } /* o celular fica preso até o último passo */

#sistema .cap { min-height: 66vh; display: flex; flex-direction: column; justify-content: center; opacity: .22; transition: opacity .7s var(--ease-out); }
#sistema .cap.on { opacity: 1; }
#sistema .cap .k { font: 500 13px/1.4 var(--mono); letter-spacing: .02em; color: var(--accent); margin-bottom: 14px; }
#sistema .cap h3 { font: 500 clamp(2rem, 3.6vw, 3.4rem)/1.04 var(--sans); letter-spacing: -.035em; color: var(--ink); margin-bottom: 18px; }
#sistema .cap p:not(.k) { font: 400 clamp(1.08rem, 1.4vw, 1.3rem)/1.48 var(--sans); color: var(--ink-2); max-width: 26em; }

#sistema .sis-hint { min-height: 44px; display: flex; justify-content: center; margin-top: 14px; }
#sistema .sis-replay { min-height: 44px; border: 0; background: none; cursor: pointer; padding: 4px 10px; font: 500 .9rem/1 var(--sans); color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
#sistema .sis-replay[hidden] { display: none; }

#sistema .sis-close { text-align: center; margin-top: clamp(40px, 8vh, 90px); }
#sistema .sis-close p { font: 500 clamp(1.6rem, 3vw, 2.8rem)/1.12 var(--sans); letter-spacing: -.03em; color: var(--ink); max-width: 20em; margin: 0 auto 30px; text-wrap: balance; }
#sistema .sis-close .btn svg { width: 16px; height: 16px; transition: transform .4s var(--ease-out); }
#sistema .sis-close .btn:hover svg { transform: translateX(4px); }

/* ---------- celular em foto (.device da base) com o WhatsApp escuro do v8 ---------- */
/* a altura do aparelho cabe na tela com o botão "Ver de novo" embaixo (aspecto da foto: .4963) */
#sistema .sis-dev { --device-w: min(360px, calc((100svh - 160px) * .4963)); }
#sistema .screen { position: relative; height: 100%; display: flex; flex-direction: column; background: #0b141a; font-family: var(--sans); color: #e9edef; }
/* barra de status: ~7% da altura da tela (15% da largura), ao lado da ilha da câmera da foto */
#sistema .wa-status { flex: none; aspect-ratio: 20 / 3; display: flex; align-items: center; justify-content: space-between; padding: 0 9% 0 11%; background: #202c33; font: 600 12px/1 var(--sans); color: #e9edef; }
#sistema .wa-status i { font-style: normal; font-size: 10px; letter-spacing: .06em; opacity: .85; }
#sistema .wa-top { flex: none; display: flex; align-items: center; gap: 10px; padding: 4px 14px 10px; background: #202c33; color: #e9edef; border-bottom: 1px solid rgba(255,255,255,.04); line-height: 1.2; }
#sistema .wa-av { width: 34px; height: 34px; border-radius: 50%; background: #0e1a28; display: grid; place-items: center; flex: none; }
#sistema .wa-av svg { width: 18px; height: 18px; }
#sistema .wa-name { font-size: 15px; font-weight: 600; line-height: 1.15; }
#sistema .wa-sub { font-size: 12px; color: #8696a0; }
#sistema .wa-sub.typing { color: #00c8b4; }

/* a conversa inteira cabe na tela: --z encolhe o texto se o último passo não couber */
#sistema .wa-body { flex: 1; min-height: 0; padding: 12px 10px; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; background: #0b141a; }
#sistema .wa-stack { display: flex; flex-direction: column; gap: .42em; font-size: calc(13px * var(--z, 1)); }
#sistema .msg { position: relative; max-width: 84%; padding: .46em .62em .38em .7em; border-radius: .7em; font-size: 1em; line-height: 1.36; color: #e9edef; box-shadow: 0 1px .5px rgba(0,0,0,.25); overflow-wrap: anywhere; }
#sistema .msg.in { align-self: flex-start; background: #202c33; border-top-left-radius: 2px; }
#sistema .msg.out { align-self: flex-end; background: #005c4b; border-top-right-radius: 2px; }
#sistema .msg .meta { float: right; margin: .46em 0 -.3em .77em; font-size: .81em; color: rgba(233,237,239,.6); display: inline-flex; align-items: center; gap: 3px; }
#sistema .msg .meta svg { width: 1.15em; height: .77em; }
#sistema .msg ol { margin: .3em 0; padding-left: 1.3em; list-style: decimal; }
#sistema .msg ol li { margin: .15em 0; }
#sistema .wa-file { display: flex; align-items: center; gap: .7em; background: rgba(0,0,0,.18); border-radius: 7px; padding: .45em .55em; margin-bottom: .3em; }
#sistema .wa-file .ico { width: 2.2em; height: 2.6em; border-radius: 4px; background: #e9564b; color: #fff; font-size: .7em; font-weight: 700; display: grid; place-items: end center; padding-bottom: .4em; flex: none; }
#sistema .wa-file .ico.xl { background: #1d8f53; font-size: .62em; }
#sistema .wa-file .nm { font-size: .96em; font-weight: 500; line-height: 1.2; word-break: break-all; }
#sistema .wa-file .sz { font-size: .85em; color: rgba(233,237,239,.6); }
#sistema .work { align-self: flex-start; max-width: 90%; font-size: .9em; line-height: 1.35; color: #8696a0; display: grid; gap: .25em; padding: .15em .3em .3em; }
#sistema .work div { display: flex; gap: .55em; align-items: baseline; }
#sistema .work div::before { content: ""; width: 10px; height: 1px; background: currentColor; flex: none; transform: translateY(-3px); }
#sistema .work div.done { color: #00c8b4; }
#sistema .wa-bar { flex: none; display: flex; align-items: center; gap: 8px; padding: 8px 12px 20px; background: #202c33; } /* folga embaixo: cantos arredondados da tela da foto */
#sistema .wa-input { flex: 1; min-width: 0; height: 38px; border-radius: 20px; background: #2a3942; color: #e9edef; padding: 0 14px; font-size: 13px; line-height: 38px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#sistema .wa-input.ph { color: #8696a0; }
#sistema .wa-send { width: 38px; height: 38px; border-radius: 50%; background: #00a884; display: grid; place-items: center; flex: none; transition: transform .2s var(--ease-out); }
#sistema .wa-send.press { transform: scale(.9); }
#sistema .wa-send svg { width: 18px; height: 18px; }

/* passos ainda não alcançados: escondidos e sem ocupar espaço (v8 L322–323).
   Sem JS, a conversa inteira fica visível. */
.js #sistema .msg[data-s]:not(.show), .js #sistema .work:not(.show), .js #sistema .work div:not(.show) { display: none; }
#sistema .msg.show, #sistema .work div.show { animation: sistema-in .5s var(--ease-out); }
@keyframes sistema-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
/* medição do último passo (o JS liga por um instante) */
#sistema .sis-dev.measure .msg[data-s] { display: block !important; animation: none; }
#sistema .sis-dev.measure .work { display: grid !important; }
#sistema .sis-dev.measure .work div { display: flex !important; animation: none; }

/* ---------- celular: sem sticky, a história roda sozinha (v8 L417–423) ---------- */
@media (max-width: 900px) {
  #sistema .sis-grid { grid-template-columns: minmax(0, 1fr); }
  #sistema .sis-ph, #sistema .sis-steps { grid-column: 1 / -1; grid-row: auto; }
  #sistema .sis-sticky { position: static; }
  #sistema .sis-dev { --device-w: min(340px, calc((100svh - 90px) * .4963)); }
  #sistema .sis-steps { margin-top: 18px; }
  #sistema .cap { min-height: 0; padding: 30px 0; opacity: 1; border-top: 1px solid var(--line); }
  #sistema .cap:last-child { border-bottom: 1px solid var(--line); }
  #sistema .cap .k { margin-bottom: 8px; color: var(--ink-3); transition: color .4s; }
  #sistema .cap.on .k { color: var(--accent); }
  #sistema .cap h3 { font-size: clamp(1.55rem, 6.6vw, 2.2rem); margin-bottom: 10px; }
  #sistema .cap p:not(.k) { font-size: 1.02rem; }
}

@media (prefers-reduced-motion: reduce) {
  #sistema .cap, #sistema .cap .k, #sistema .wa-send, #sistema .sis-close .btn svg { transition: none; }
  #sistema .msg.show, #sistema .work div.show { animation: none; }
}