/* Octo: simulação de uma atividade (pedido, braços, aprovação de quem comanda).
   Usada na landing (#demo-uso, seção método) e no índice de cada área. Motor em js/simulacao.js.
   Depende das variáveis de cor e fonte de octo.css ou areas.css, que têm os mesmos nomes. */

.demo { margin: 0 0 clamp(48px, 6vw, 90px); background: var(--tinta); color: #cdd8e6; border-radius: var(--raio); border: 1px solid var(--linha-escura); box-shadow: 0 30px 60px -40px rgba(6, 10, 16, .6); overflow: hidden; font-size: .95rem; }
.demo-topo { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-bottom: 1px solid var(--linha-escura); background: var(--carvao); }
.demo-pontos { display: inline-flex; gap: 6px; }
.demo-pontos i { width: 10px; height: 10px; border-radius: 50%; background: var(--grafite); display: block; }
.demo-titulo { font-family: var(--mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--neblina); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.demo-replay { background: none; border: 1px solid var(--linha-escura); color: var(--neblina); border-radius: 999px; padding: 5px 12px; font-family: var(--mono); font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; }
.demo-replay:hover { color: #fff; border-color: #fff; }
.demo-linhas { height: 440px; overflow: hidden; padding: 20px clamp(16px, 2.4vw, 32px); display: flex; flex-direction: column; gap: 14px; scroll-behavior: smooth; }
.demo-msg { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 14px; align-items: start; opacity: 0; transform: translateY(8px); transition: opacity .35s ease, transform .35s ease; }
.demo-msg.ativa { opacity: 1; transform: none; }
.demo-quem { font-family: var(--mono); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--neblina); padding-top: 4px; display: flex; flex-direction: column; gap: 2px; }
.demo-quem b { color: #fff; font-weight: 500; }
.demo-quem.quem-octo b { background: var(--grad-texto); -webkit-background-clip: text; background-clip: text; color: transparent; }
.demo-texto { line-height: 1.55; color: #cdd8e6; }
.demo-texto code { font-family: var(--mono); font-size: .82em; color: #fff; background: rgba(255, 255, 255, .08); padding: 1px 6px; border-radius: 6px; }
.demo-texto .ok { color: var(--verde-vivo); }
.demo-texto .marca { display: inline-block; font-family: var(--mono); font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ciano); border: 1px solid rgba(0, 194, 224, .4); border-radius: 999px; padding: 2px 9px; margin-right: 8px; vertical-align: middle; }
.demo-gestor .demo-texto { color: #fff; font-weight: 500; }
.demo-card { border: 1px solid var(--linha-escura); border-left: 3px solid var(--azul); border-radius: 10px; padding: 12px 16px; background: rgba(255, 255, 255, .04); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 18px; margin-top: 8px; }
.demo-card span { font-size: .86rem; color: #b9c6dc; }
.demo-card span b { color: #fff; font-weight: 500; }
.demo-card .larga { grid-column: 1 / -1; }
.demo-cursor { display: inline-block; width: .55em; height: 1.05em; background: var(--ciano); vertical-align: -0.15em; margin-left: 2px; animation: demo-pisca 1s steps(2, start) infinite; }
@keyframes demo-pisca { to { visibility: hidden; } }
.demo-espera { font-family: var(--mono); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--neblina); }
.demo-espera i { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--ciano); margin-right: 4px; animation: demo-flutua 1.2s ease-in-out infinite; }
.demo-espera i:nth-child(2) { animation-delay: .2s; } .demo-espera i:nth-child(3) { animation-delay: .4s; }
.demo figcaption { padding: 12px 16px 14px; border-top: 1px solid var(--linha-escura); color: var(--neblina); font-size: .82rem; }
@media (max-width: 720px) {
    .demo-msg { grid-template-columns: 1fr; gap: 4px; }
    .demo-card { grid-template-columns: 1fr; }
    .demo-linhas { height: 480px; }
}
@media (prefers-reduced-motion: reduce) {
    .demo-msg { opacity: 1; transform: none; transition: none; }
    .demo-cursor, .demo-espera i { animation: none; }
}

.demo-abas { display: flex; gap: 8px; padding: 10px 16px; border-bottom: 1px solid var(--linha-escura); overflow-x: auto; scrollbar-width: none; }
.demo-abas::-webkit-scrollbar { display: none; }
.demo-abas button { flex: none; background: none; border: 1px solid var(--linha-escura); color: var(--neblina); border-radius: 999px; padding: 6px 13px; font-family: var(--mono); font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; transition: color .2s ease, border-color .2s ease, background .2s ease; }
.demo-abas button:hover { color: #fff; border-color: rgba(255, 255, 255, .5); }
.demo-abas button[aria-selected="true"] { color: #fff; border-color: var(--ciano); background: rgba(0, 194, 224, .12); }

@keyframes demo-flutua { 0%, 100% { transform: translateY(3px); } 50% { transform: translateY(-5px); } }

/* quem assina ou aprova no fim da cena */
.demo-quem.quem-assina b { color: var(--verde-vivo); }
.demo-assina .demo-texto { color: #fff; }

/* nas áreas: link da aba para a página da frente */
.demo-frente { margin: 0; padding: 12px 16px; border-top: 1px solid var(--linha-escura); display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-family: var(--mono); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--neblina); }
.demo-frente a { color: #fff; text-decoration: none; border-bottom: 1px solid var(--ciano); padding: 4px 0; }
.demo-frente a:hover, .demo-frente a:focus-visible { color: var(--ciano); }
.demo-frente a[hidden] { display: none; }