/* ============================================================
   appshot.css — mockups ILUSTRATIVOS da interface do app (agent-web).
   Recriações em HTML/CSS no TEMA CLARO, usando as próprias variáveis do
   design system do site (styles.css) para combinar com a página. Não são
   fotos do app real. Escopo: tudo vive sob .appshot; acompanha o tema do
   site (claro por padrão; segue o dark se a página estiver em dark).
   ============================================================ */

.appshot {
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink);
}

/* Chrome do "navegador" */
.appshot .as-chrome {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px;
  background: var(--bg-soft);
  border-bottom: 1px solid var(--border);
}
.appshot .as-dots { display: inline-flex; gap: 6px; flex: none; }
.appshot .as-dots i { width: 10px; height: 10px; border-radius: 50%; display: block; }
.appshot .as-dots i:nth-child(1) { background: #ff6b6b; }
.appshot .as-dots i:nth-child(2) { background: #ffd43b; }
.appshot .as-dots i:nth-child(3) { background: #51cf66; }
.appshot .as-url {
  flex: 1; text-align: center; font-size: 12px; color: var(--ink-3);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 999px; padding: 4px 12px;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.appshot .as-screen { padding: 18px; background: var(--bg-soft); }

/* Legenda de "ilustração" abaixo do mockup */
.appshot-cap {
  margin: 10px auto 0; text-align: center;
  font-size: 12.5px; color: var(--ink-3);
}

/* ---------- Painel de configurações (config de modelos) ---------- */
.appshot .as-panel-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; padding: 16px; max-width: 460px; margin: 0 auto;
  box-shadow: var(--shadow-sm);
}
.appshot .as-panel-head {
  font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--ink-3); margin-bottom: 14px;
}
.appshot .as-field { margin-bottom: 16px; }
.appshot .as-field:last-child { margin-bottom: 0; }
.appshot .as-label {
  display: block; font-size: 12.5px; font-weight: 600; color: var(--ink-2); margin-bottom: 7px;
}

/* "select" aberto simulado */
.appshot .as-select { position: relative; }
.appshot .as-select-value {
  display: flex; align-items: center; gap: 8px;
  background: var(--surface); border: 1px solid var(--brand);
  border-radius: 9px; padding: 9px 12px; color: var(--ink);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent);
}
.appshot .as-select-value .as-caret { margin-left: auto; color: var(--ink-3); }
.appshot .as-menu {
  margin-top: 6px; background: var(--surface);
  border: 1px solid var(--border); border-radius: 10px;
  padding: 6px; box-shadow: var(--shadow-md);
}
.appshot .as-optgroup {
  font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--ink-3); padding: 8px 10px 4px;
}
.appshot .as-opt {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; border-radius: 7px; color: var(--ink-2); font-size: 13px;
}
.appshot .as-opt .as-check { margin-left: auto; color: var(--brand-ink); font-weight: 700; }
.appshot .as-opt.is-sel { background: var(--brand-soft); color: var(--ink); }
.appshot .as-opt .as-flag { font-size: 14px; }
.appshot .as-tag {
  font-size: 11px; font-weight: 600; color: var(--accent-ink);
  background: var(--accent-soft); border-radius: 999px; padding: 1px 7px;
}
.appshot .as-tag.br { color: var(--support-ink); background: var(--support-soft); }
.appshot .as-muted { color: var(--ink-3); font-size: 12px; }

/* Segmentado (Reasoning) */
.appshot .as-seg {
  display: flex; gap: 4px; background: var(--bg-sunken);
  border: 1px solid var(--border); border-radius: 999px; padding: 4px;
}
.appshot .as-seg span {
  flex: 1; text-align: center; font-size: 12px; color: var(--ink-3);
  padding: 5px 6px; border-radius: 999px;
}
.appshot .as-seg span.is-on { background: var(--brand); color: #fff; font-weight: 700; }

/* ---------- Chat / timeline ---------- */
.appshot .as-chat { display: flex; flex-direction: column; gap: 12px; max-width: 560px; margin: 0 auto; }
.appshot .as-msg { max-width: 82%; padding: 10px 13px; border-radius: 12px; font-size: 13.5px; }
.appshot .as-user {
  align-self: flex-end; background: var(--brand); color: #fff;
  border-bottom-right-radius: 4px;
}
.appshot .as-turn { display: flex; flex-direction: column; gap: 8px; align-self: stretch; }
.appshot .as-node {
  border: 1px solid var(--border); border-radius: 10px;
  background: var(--surface); overflow: hidden;
}
.appshot .as-node-head {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; font-size: 12.5px; color: var(--ink-2); font-weight: 600;
}
.appshot .as-node-head .as-ok { margin-left: auto; color: var(--support-ink); font-weight: 600; }
.appshot .as-node.as-reason { background: var(--bg-soft); }
.appshot .as-node.as-reason .as-node-head { color: var(--brand-ink); }
.appshot .as-reason-body {
  padding: 0 12px 10px; font-size: 12.5px; color: var(--ink-3);
  border-top: 1px dashed var(--border); padding-top: 8px;
  font-family: ui-monospace, Menlo, Consolas, monospace;
}
.appshot .as-answer {
  background: var(--bg-sunken); border: 1px solid var(--border);
  border-radius: 12px; border-bottom-left-radius: 4px;
  padding: 12px 14px; font-size: 13.5px; color: var(--ink);
}
.appshot .as-answer strong { color: var(--brand-ink); }
.appshot .as-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px;
  font-size: 11.5px; color: var(--ink-3);
  font-family: ui-monospace, Menlo, Consolas, monospace; padding: 2px 2px 0;
}
.appshot .as-composer {
  display: flex; align-items: center; gap: 10px; margin-top: 4px;
  padding: 9px 14px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--surface); color: var(--ink-3);
  font-size: 12.5px;
}
.appshot .as-composer .as-mic {
  margin-left: auto; width: 28px; height: 28px; flex: none; border-radius: 50%;
  background: var(--brand); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 13px;
}

/* status bar estilo TUI */
.appshot .as-statusbar {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-top: 12px; padding: 8px 12px;
  background: var(--bg-sunken); border: 1px solid var(--border); border-radius: 8px;
  font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 11.5px; color: var(--ink-3);
}
.appshot .as-statusbar .on { color: var(--support-ink); }
.appshot .as-statusbar b { color: var(--ink-2); font-weight: 600; }

/* ---------- Formulário (editor de especialista) ---------- */
.appshot .as-textarea {
  background: var(--surface); border: 1px solid var(--border); border-radius: 9px;
  padding: 10px 12px; color: var(--ink-2); font-size: 12.5px; line-height: 1.55; min-height: 66px;
}
.appshot .as-input {
  display: flex; align-items: center; gap: 8px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 9px;
  padding: 9px 12px; color: var(--ink); font-size: 13px;
}
.appshot .as-input .as-suffix { margin-left: auto; color: var(--ink-3); font-size: 12px; }
.appshot .as-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.appshot .as-chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; padding: 4px 9px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--bg-soft); color: var(--ink-2);
}
.appshot .as-chip.on { border-color: color-mix(in srgb, var(--brand) 45%, var(--border)); background: var(--brand-soft); color: var(--brand-ink); }

/* ---------- QR (conectar WhatsApp) ---------- */
.appshot .as-qr {
  width: 152px; height: 152px; margin: 2px auto 0; position: relative;
  background: #fff; border: 1px solid var(--border); border-radius: 10px; padding: 12px;
}
.appshot .as-qr-matrix {
  position: absolute; inset: 12px; border-radius: 2px;
  background: repeating-conic-gradient(#0f1720 0 25%, #ffffff 0 50%) 0 0 / 11px 11px;
  opacity: .92;
}
.appshot .as-qr-eye {
  position: absolute; width: 34px; height: 34px; background: #fff;
  border: 6px solid #0f1720; border-radius: 6px; z-index: 1;
}
.appshot .as-qr-eye::after { content: ""; position: absolute; inset: 5px; background: #0f1720; border-radius: 2px; }
.appshot .as-qr-eye.tl { top: 10px; left: 10px; }
.appshot .as-qr-eye.tr { top: 10px; right: 10px; }
.appshot .as-qr-eye.bl { bottom: 10px; left: 10px; }

/* ---------- Badge "voz" ---------- */
.appshot .as-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--brand-ink); background: var(--brand-soft); border-radius: 999px; padding: 1px 7px; margin-bottom: 5px;
}
.appshot .as-user .as-badge { color: #fff; background: rgba(255,255,255,.22); }

/* ---------- Barra de chamada (voz) ---------- */
.appshot .as-callbar {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface);
}
.appshot .as-callbar .as-live { display: flex; align-items: center; gap: 7px; color: var(--support-ink); font-size: 12.5px; font-weight: 600; }
.appshot .as-callbar .as-pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--support); }
.appshot .as-callbar .as-ctrls { margin-left: auto; display: flex; gap: 8px; }
.appshot .as-callbar .as-ctrl { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--bg-sunken); font-size: 13px; }
.appshot .as-callbar .as-ctrl.hang { background: #ff6b6b; }

/* ---------- Tabela (billing) ---------- */
.appshot .as-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.appshot .as-table th {
  text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--ink-3); font-weight: 700; padding: 8px 10px; border-bottom: 1px solid var(--border);
}
.appshot .as-table td { padding: 9px 10px; border-bottom: 1px solid var(--border); color: var(--ink-2); }
.appshot .as-table td.num { text-align: right; font-family: ui-monospace, Menlo, Consolas, monospace; color: var(--ink); }
.appshot .as-table tr:last-child td { border-bottom: none; }

/* ---------- Saldo / créditos ---------- */
.appshot .as-balance { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; }
.appshot .as-balance .amt { font-size: 30px; font-weight: 800; letter-spacing: -.02em; color: var(--ink); }
.appshot .as-balance .cur { color: var(--ink-3); font-size: 13px; }
.appshot .as-split { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.appshot .as-pill {
  font-size: 11.5px; padding: 4px 10px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--bg-soft); color: var(--ink-2);
}
.appshot .as-pill .dot2 { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 5px; vertical-align: middle; }

/* ---------- Linhas (mesa de atendimento) ---------- */
.appshot .as-rows { display: flex; flex-direction: column; gap: 8px; }
.appshot .as-row {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  border: 1px solid var(--border); border-radius: 10px; background: var(--surface);
}
.appshot .as-row .as-av { width: 30px; height: 30px; border-radius: 8px; background: var(--bg-sunken); display: flex; align-items: center; justify-content: center; font-size: 14px; flex: none; }
.appshot .as-row .as-rtx { min-width: 0; }
.appshot .as-row .as-rtitle { font-size: 13px; color: var(--ink); font-weight: 600; }
.appshot .as-row .as-rsub { font-size: 11.5px; color: var(--ink-3); }
.appshot .as-row .as-rbtn { margin-left: auto; font-size: 12px; font-weight: 600; color: #fff; background: var(--brand); padding: 6px 12px; border-radius: 999px; flex: none; }
.appshot .as-row .as-rbtn.ghost { background: transparent; color: var(--brand-ink); border: 1px solid var(--border); }
.appshot .as-tab-live { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--support-ink); font-weight: 700; }

/* ---------- Aprovação de ação (HITL) ---------- */
.appshot .as-approve { display: flex; gap: 8px; margin-top: 12px; }
.appshot .as-abtn {
  flex: 1; text-align: center; font-size: 12.5px; font-weight: 600;
  padding: 8px 10px; border-radius: 8px; border: 1px solid var(--border);
}
.appshot .as-abtn.approve { background: var(--brand); color: #fff; border-color: transparent; }
.appshot .as-abtn.edit { background: var(--surface); color: var(--ink-2); }
.appshot .as-abtn.reject { background: var(--surface); color: #e03131; border-color: color-mix(in srgb, #e03131 30%, var(--border)); }

/* ============================================================
   .demo — vídeos de demonstração (recriações na identidade da
   marca, com narração e legendas queimadas). Moldura no mesmo
   espírito dos mockups .appshot; segue o tema da página.
   ============================================================ */
.demo { max-width: 900px; margin: 0 auto; }
.demo-frame {
  position: relative;
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  background: var(--bg-sunken);
  box-shadow: var(--shadow-lg);
  aspect-ratio: 16 / 9;
}
.demo-frame > video {
  width: 100%; height: 100%; display: block;
  object-fit: cover; background: var(--bg-sunken);
}

/* Botão de play sobreposto — só aparece com JS (html.js); sem JS,
   os controles nativos do <video> dão conta sozinhos. */
.demo-play {
  position: absolute; inset: 0; margin: 0;
  display: flex; align-items: center; justify-content: center;
  border: 0; padding: 0; cursor: pointer; font-family: inherit;
  background: linear-gradient(180deg, rgba(15, 23, 32, .04), rgba(15, 23, 32, .30));
  transition: background .2s ease;
}
.demo-play:hover { background: linear-gradient(180deg, rgba(15, 23, 32, .10), rgba(15, 23, 32, .42)); }
.demo-play .pico {
  width: 74px; height: 74px; border-radius: 50%;
  background: var(--accent); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 26px; padding-left: 5px; line-height: 1;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .30);
  transition: transform .2s ease;
}
.demo-play:hover .pico { transform: scale(1.06); }
.demo-play .plabel {
  position: absolute; left: 18px; right: 18px; bottom: 16px;
  text-align: left; font-size: 13.5px; font-weight: 600; color: #fff;
  text-shadow: 0 1px 4px rgba(0, 0, 0, .55);
}
/* O botão de play só aparece quando o demo.js efetivamente rodou e marcou
   o bloco (.demo-enhanced). Assim, se o demo.js não carregar/executar
   (bloqueador, CSP, falha de rede), o overlay nunca cobre o vídeo e os
   controles nativos do <video> seguem usáveis. */
.demo:not(.demo-enhanced) .demo-play { display: none; }
.demo.is-playing .demo-play { display: none; }

.demo-cap {
  margin: 12px auto 0; text-align: center;
  font-size: 12.5px; color: var(--ink-3);
}

@media (max-width: 640px) {
  .demo-play .pico { width: 60px; height: 60px; font-size: 22px; }
  .demo-play .plabel { font-size: 12.5px; bottom: 12px; }
}