/* =====================================================================
   Demo interativa do AIOX Cockpit · Vitrine (m4jfhvx5) · W1 · 21/10/2026
   Réplica desenhada a partir dos prints do app v0.12.3 (assets/app-v3.png).
   A VALIDAR pelo Pedro Valério: o que a demo mostra tem de ser o que o app faz.
   O palco é desenhado em 1440x820 e escalado para a largura do contêiner.
   ===================================================================== */
.demo{--app-fundo:#050505;--app-barra:#0e0e0e;--app-titulo:#1e2025;--app-borda:#24262b;--app-botao:#1a1b1f;
  --app-texto:#d6d6d0;--app-meta:#8a8a8a;--app-azul:#5c9cff;--app-quadro:#233b62;--app-claude:#D97757;
  position:relative;width:100%;aspect-ratio:1440/820;overflow:hidden;overflow:clip;background:var(--app-fundo)}
.demo .trilho{position:absolute;inset:0}
/* overflow:clip e não hidden: com hidden o navegador rola a caixa sozinho quando algo nasce fora dela, e a câmera do celular perde a referência */
.demo .palco{position:absolute;left:0;top:0;width:1440px;height:820px;transform-origin:0 0;
  display:grid;grid-template-rows:24px 36px 1fr 150px;grid-template-columns:200px 1fr;
  font:12px/1.45 var(--fonte-mono);color:var(--app-texto);user-select:none}

/* barra de título e barra de comandos */
.demo .titulo{grid-column:1/-1;background:var(--app-titulo);display:flex;align-items:center;gap:8px;padding:0 10px;font:12px system-ui,sans-serif;color:#e8e8e8}
.demo .titulo i{width:12px;height:12px;background:var(--lima);display:inline-block}
.demo .titulo .jan{margin-left:auto;display:flex;gap:22px;color:#bbb}
.demo .comandos{grid-column:1/-1;background:var(--app-barra);border-bottom:1px solid var(--app-borda);display:flex;align-items:center;gap:6px;padding:0 10px;white-space:nowrap}
.demo .comandos .marca{display:flex;align-items:center;gap:8px;margin-right:8px}
.demo .comandos .marca img{height:14px}
.demo .comandos .marca small{font-size:11px;color:var(--app-meta)}
.demo .b{padding:3px 7px;background:var(--app-botao);color:#cfcfcf;font:12px system-ui,sans-serif;border:0;cursor:default}
.demo .b.apagado{color:#555}
.demo .b.clicavel{cursor:pointer}
.demo .b.clicavel:hover{background:#26282d;color:#fff}
.demo .b.campo{width:120px;color:#8a8a8a;background:#141518}
.demo .comandos .dir{margin-left:auto;display:flex;gap:18px;color:var(--app-azul)}
.demo .comandos .dir .host{color:var(--lima)}

/* convite para clicar */
.demo .pulsa{position:relative;outline:1px solid var(--lima);box-shadow:0 0 0 0 var(--lima-50);animation:demo-pulsa 1.6s infinite}
@keyframes demo-pulsa{70%{box-shadow:0 0 0 8px rgba(209,255,0,0)}100%{box-shadow:0 0 0 0 rgba(209,255,0,0)}}
.demo .dica{position:absolute;z-index:5;background:var(--lima);color:#050505;font:600 13px/1.3 var(--fonte-display);text-transform:uppercase;padding:8px 10px;white-space:nowrap;pointer-events:none;transition:opacity .3s}
.demo .dica::before{content:"";position:absolute;top:-6px;left:16px;border:6px solid transparent;border-top:0;border-bottom-color:var(--lima)}
.demo .dica.esconde{opacity:0}
@media(max-width:959px){.demo .dica{white-space:normal;max-width:calc(100% - 16px);font-size:12px}}
.demo .dica.lateral::before{top:50%;left:-6px;transform:translateY(-50%);border:6px solid transparent;border-left:0;border-right-color:var(--lima)}

/* barra lateral */
.demo .lado{background:var(--app-barra);border-right:1px solid var(--app-borda);padding:10px;display:flex;flex-direction:column;gap:6px;overflow:hidden}
.demo .lado h6{margin:8px 0 2px;font:11px var(--fonte-mono);color:var(--app-meta);letter-spacing:.04em}
.demo .lado h6.lima{color:var(--lima)}
.demo .proj{display:flex;align-items:center;gap:8px;padding:2px 0;cursor:pointer;color:#bbb}
.demo .proj .cor{width:34px;height:14px}
.demo .proj.ativo{color:#fff}
.demo .proj.ativo::after{content:"";width:6px;height:6px;border-radius:50%;background:#fff;order:-1}
.demo .proj:not(.ativo)::after{content:"";width:6px;height:6px;border-radius:50%;border:1px solid #888;order:-1}
.demo .proj:hover{color:#fff}
.demo .chips{display:flex;flex-wrap:wrap;gap:4px 10px;font:12px system-ui,sans-serif;color:#ccc}
.demo .chips .on{background:#3a3a3a;padding:0 4px}
.demo .arvore{display:flex;flex-direction:column;gap:3px;color:#9a9a9a}
.demo .arvore .pasta{color:var(--app-azul)}

/* área dos projetos */
.demo .area{position:relative;background:var(--app-fundo) radial-gradient(#1b1b1b 1px,transparent 1px) 0 0/18px 18px;overflow:hidden}
/* área sem fim: os quadros ficam lado a lado e a câmera anda até eles */
.demo .mundo{position:absolute;left:24px;top:28px;bottom:28px;width:1192px;transform-origin:0 50%}
.demo .quadro{position:absolute;top:0;bottom:0;border:2px solid;padding:12px 14px 14px;display:flex;flex-direction:column;gap:10px}
.demo .quadro.lima{background:#3a470c;border-color:#a8cc00}
.demo .quadro.lima .nome{color:var(--lima)}
.demo .quadro.azul{background:var(--app-quadro);border-color:var(--app-azul)}
.demo .quadro.azul .nome{color:var(--app-azul)}
.demo .quadro .nome{font-size:15px}
/* minimapa */
.demo .minimapa{position:absolute;right:14px;bottom:14px;width:170px;height:96px;background:#0d0d0d;border:1px solid #1d1d1d;padding:10px}
.demo .mm{position:relative;height:100%}
.demo .mq{position:absolute;top:30%;width:44%;height:40%;display:flex;gap:2px;padding:2px;cursor:pointer;border:1px solid}
.demo .mq.lima{border-color:#536509;background:#232b07}
.demo .mq.azul{border-color:#2f5288;background:#16253d}
.demo .mq i{flex:1;background:var(--app-claude)}
.demo .mq i.shell{background:#6b6b6b}
.demo .mq i.codex{background:#e8e8e8} .demo .mq i.gemini{background:#8ab4f8} .demo .mq i.grok{background:#b0b0b0}
.demo .vista{position:absolute;top:18%;width:50%;height:64%;border:1px solid var(--lima);pointer-events:none;transition:left .9s cubic-bezier(.16,1,.3,1)}
.demo .paineis{flex:1;display:flex;gap:12px;min-height:0}
.demo .painel{flex:1;min-width:0;background:#080808;border:1px solid #101218;display:flex;flex-direction:column;animation:demo-entra .45s var(--curva-expo)}
.demo .painel.foco{border-color:var(--app-claude)}
@keyframes demo-entra{from{opacity:0;transform:translateY(10px)}}
.demo .painel .cab{display:flex;align-items:center;gap:6px;padding:4px 6px;background:#0e0e0e;border-bottom:1px solid #1d1d1d;font-size:11px}
.demo .painel .tag{padding:0 6px;background:var(--app-claude);color:#1a0d07}
.demo .painel .tag.shell{background:#3a3a3a;color:#ddd}
.demo .painel .tag.codex{background:#e8e8e8;color:#111}
.demo .painel .tag.gemini{background:#8ab4f8;color:#0b1a33}
.demo .painel .tag.grok{background:#b0b0b0;color:#111}
.demo .painel .tag.local{background:#222;color:#999;border:1px solid #444}
.demo .painel .cab .x{margin-left:auto;color:#666}
.demo .painel .corpo{flex:1;padding:8px 10px;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;white-space:pre-wrap}
.demo .painel .corpo .lin{min-height:1.45em}
.demo .painel .corpo .eu{color:#fff}
.demo .painel .corpo .ok{color:var(--ok)}
.demo .painel .corpo .meta{color:var(--app-meta)}
.demo .painel .corpo .arq{color:var(--app-azul)}
.demo .painel .cursor{display:inline-block;width:7px;height:13px;background:var(--lima);vertical-align:-2px;animation:demo-pisca 1s steps(1) infinite}
@keyframes demo-pisca{50%{opacity:0}}
.demo .painel .rodape{padding:4px 10px;border-top:1px solid #1d1d1d;color:var(--app-meta);font-size:11px}

/* telemetria */
.demo .tele{grid-column:2;background:var(--app-barra);border-top:1px solid var(--app-borda);display:grid;grid-template-columns:1fr 260px 260px;grid-template-rows:24px 1fr;font:12px system-ui,sans-serif}
.demo .tele .topo{grid-column:1/-1;display:flex;align-items:center;gap:8px;padding:0 10px;color:#ddd}
.demo .tele .topo span{margin-left:auto;color:var(--app-meta);font:11px var(--fonte-mono)}
.demo .tele h6{margin:0 0 6px;font:11px var(--fonte-mono);color:var(--app-meta);letter-spacing:.04em}
.demo .tele .sessoes{padding:6px 10px;overflow:hidden}
.demo .tele .cartoes{display:flex;gap:8px}
.demo .tele .cartao{width:200px;padding:8px;background:#080808;border:1px solid #1d1d1d;display:flex;flex-direction:column;gap:6px;animation:demo-entra .45s var(--curva-expo)}
.demo .tele .cartao.foco{background:#1c242e;border-color:var(--lima)}
.demo .tele .cartao b{font-weight:500;display:flex;align-items:center;gap:6px}
.demo .tele .cartao b::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--ok)}
.demo .tele .cartao .num{font-size:11px;display:flex;gap:8px}
.demo .tele .cartao .ctx{color:var(--ok)}
.demo .tele .cartao .usd{color:#999}
.demo .tele .cartao .mod{color:var(--app-azul)}
.demo .tele .col{padding:6px 10px;border-left:1px solid var(--app-borda);overflow:hidden}
.demo .tele .col p{margin:0;color:#ccc}
.demo .tele .eventos .lista>div{display:flex;gap:6px;align-items:center;color:#ddd;font-size:11px;margin-bottom:3px;animation:demo-entra .45s var(--curva-expo)}
.demo .tele .eventos i{width:7px;height:7px;border-radius:50%;background:var(--ok);flex:none}
.demo .tele .eventos time{color:var(--app-meta)}
.demo .lado.baixo{grid-row:4;grid-column:1;border-top:1px solid var(--app-borda)}

/* recomeçar */
.demo .recomecar{position:absolute;right:16px;bottom:16px;z-index:6}
.demo .recomecar[hidden]{display:none}

/* ---------- recortes animados da dobra 2 (js/recortes.js) ---------- */
.demo.recorte{aspect-ratio:720/450}
.demo .palco-mini{position:relative;width:720px;height:450px;overflow:hidden;font:12px/1.45 var(--fonte-mono);color:var(--app-texto);user-select:none;
  background:var(--app-fundo) radial-gradient(#1b1b1b 1px,transparent 1px) 0 0/18px 18px}
.demo .quadro.solto{position:absolute;inset:20px}
.demo .area-mini{position:absolute;inset:0}
.demo .mundo-mini{position:absolute;left:10px;top:20px;width:700px;height:410px;transform-origin:0 0;transition:transform 1.3s cubic-bezier(.16,1,.3,1)}
.demo .mundo-mini .quadro{width:700px}
.demo .zoom-mini{position:absolute;right:12px;top:10px;padding:2px 8px;background:var(--app-botao);color:#cfcfcf;font:12px system-ui,sans-serif;z-index:2}
.demo .tele-mini{padding:18px 20px;font:13px system-ui,sans-serif}
.demo .tele-mini .topo{display:flex;color:#ddd;margin-bottom:14px}
.demo .tele-mini .topo span{margin-left:auto;color:var(--app-meta);font:12px var(--fonte-mono)}
.demo .tele-mini h6{margin:0 0 8px;font:11px var(--fonte-mono);color:var(--app-meta);letter-spacing:.04em}
.demo .tele-mini .cartoes{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:20px}
.demo .tele-mini .cartao{padding:12px;background:#080808;border:1px solid #1d1d1d;display:flex;flex-direction:column;gap:10px;transition:border-color .3s,background .3s}
.demo .tele-mini .cartao.foco{background:#1c242e;border-color:var(--lima)}
.demo .tele-mini .cartao b{font-weight:500;display:flex;align-items:center;gap:6px}
.demo .tele-mini .cartao b::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--ok)}
.demo .tele-mini .num{display:flex;gap:10px;font-size:12px}
.demo .tele-mini .ctx{color:var(--ok)} .demo .tele-mini .usd{color:#999} .demo .tele-mini .mod{color:var(--app-azul)}
.demo .tele-mini .barra{display:block;height:3px;background:#1d1d1d}
.demo .tele-mini .barra i{display:block;height:100%;background:var(--ok);transition:width .6s}
.demo .tele-mini .lista>div{display:flex;gap:8px;align-items:center;color:#ddd;font-size:12px;margin-bottom:6px;animation:demo-entra .45s var(--curva-expo)}
.demo .tele-mini .lista i{width:8px;height:8px;border-radius:50%;background:var(--ok);flex:none}
.demo .tele-mini .lista time{color:var(--app-meta)}

/* celular: troca a demo pela imagem (REF-48) */
.demo-imagem{display:none}
/* o print parado fica guardado como alternativa (decisão do Pedro); por ora o celular usa a demo cortada */
.demo-imagem{display:none}
@media (prefers-reduced-motion:reduce){.demo .pulsa,.demo .painel,.demo .tele .cartao{animation:none}}