/* Alexa+ simulator. The page follows the app theme tokens from styles.css;
   the device is always a dark, nightstand-style Echo Show screen. */
.sim {
  min-height: 100vh; display: flex; flex-direction: column;
  --dev-bg: #0b0d10; --dev-ink: #f4f5f6; --dev-muted: #a9b0b8; --dev-line: #2a3038; --dev-surface: #151a20;
  --dev-cyan: #3ad1f2; --dev-blue: #2b6df5; --dev-alert: #ff6a3d; --dev-ok: #5fd39a; --dev-bad: #ff8a7a; --dev-warn: #f3c56b;
}
.sim input[type="text"], .sim input[type="password"], .sim input:not([type]) { min-height: 44px; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--surface); color: var(--ink); padding: var(--space-2) var(--space-3); }
.sim dialog input { width: 100%; }
.sim-top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-3) var(--space-6); border-bottom: 1px solid var(--line); background: var(--surface); }
.sim-brand { display: flex; align-items: center; gap: var(--space-3); text-decoration: none; font-weight: 650; font-size: var(--text-base); min-height: 40px; }
.sim-brand img { border-radius: 8px; }
.sim-top-controls { display: flex; align-items: center; gap: var(--space-2); }
.sim-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--line-strong); }
[data-status="connected"] .sim-dot { background: var(--success); }
[data-status="error"] .sim-dot { background: var(--danger); }

.sim-stage { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-6); padding: var(--space-6); max-width: none; margin: 0; }

/* Device frame: 16:10 like an Echo Show 8. */
.device { position: relative; width: min(1100px, 100%, calc((100vh - 330px) * 1.6)); min-width: min(640px, 100%);
  flex-shrink: 1; aspect-ratio: 16 / 10; padding: 18px; border-radius: 30px; background: linear-gradient(#24282d, #15181b); box-shadow: 0 0 0 1px #00000080, 0 24px 60px #0000004d; }
.device-camera { position: absolute; top: 7px; left: 50%; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: #05070a; box-shadow: inset 0 0 0 1px #3a3f45; }
.device-screen { position: relative; width: 100%; height: 100%; border-radius: 14px; overflow: hidden; background: var(--dev-bg); color: var(--dev-ink); container-type: size; font-size: clamp(14px, 2.3cqh, 22px); }
.device-screen :focus-visible { outline: 3px solid var(--dev-cyan); outline-offset: 3px; }
.screen-status { position: absolute; top: 0; left: 0; right: 0; display: flex; justify-content: space-between; padding: 2.6cqh 4cqw 0; color: var(--dev-muted); font-size: max(12px, 3cqh); letter-spacing: .02em; z-index: 2; }

.scene { position: absolute; inset: 0; padding: 9cqh 5cqw 22cqh; display: none; flex-direction: column; overflow: hidden; }
.device[data-screen="offline"] [data-scene="offline"], .device[data-screen="idle"] [data-scene="idle"],
.device[data-screen="incident"] [data-scene="incident"], .device[data-screen="impact"] [data-scene="impact"],
.device[data-screen="suspect"] [data-scene="suspect"], .device[data-screen="runbook"] [data-scene="runbook"],
.device[data-screen="history"] [data-scene="history"], .device[data-screen="approval"] [data-scene="approval"],
.device[data-screen="recovery"] [data-scene="recovery"], .device[data-screen="handoff"] [data-scene="handoff"] { display: flex; animation: scene-in 260ms ease-out; }
@keyframes scene-in { from { opacity: 0; transform: translateY(1.5cqh); } to { opacity: 1; transform: none; } }

.scene-center { margin: auto; text-align: center; }
.scene-big { font-size: 6cqh; font-weight: 600; }
.scene-sub { margin: 2cqh auto 0; color: var(--dev-muted); font-size: 3cqh; }

.ambient { margin: auto 0; padding-left: 2cqw; }
.ambient-time { font-size: 22cqh; font-weight: 300; letter-spacing: -.04em; line-height: 1; }
.ambient-date { margin-top: 1.5cqh; color: var(--dev-muted); font-size: 5cqh; }
.ambient-health { margin-top: 5cqh; }
.ambient-note { margin-top: 2.4cqh; color: var(--dev-muted); font-size: 4cqh; }

.pill { display: inline-flex; align-items: center; gap: .5em; padding: .3em .8em; border-radius: 999px; background: #ffffff14; font-size: 4.6cqh; font-weight: 600; white-space: nowrap; }
.pill-dot { width: .6em; height: .6em; border-radius: 50%; background: var(--dev-muted); }
.pill[data-health="healthy"] { color: var(--dev-ok); } .pill[data-health="healthy"] .pill-dot { background: var(--dev-ok); }
.pill[data-health="degraded"] { color: var(--dev-bad); background: #ff6a3d1f; } .pill[data-health="degraded"] .pill-dot { background: var(--dev-bad); }
.pill[data-health="unknown"] { color: var(--dev-warn); } .pill[data-health="unknown"] .pill-dot { background: var(--dev-warn); }

.card-kicker { display: flex; align-items: center; gap: .6em; color: var(--dev-muted); text-transform: uppercase; letter-spacing: .12em; font-size: 3.2cqh; font-weight: 600; }
.kicker-alert { width: .7em; height: .7em; border-radius: 50%; background: var(--dev-alert); box-shadow: 0 0 0 .3em #ff6a3d33; }
.card-title { margin-top: 1.2cqh; font-size: 6.4cqh; font-weight: 650; letter-spacing: -.02em; line-height: 1.12; max-width: none; overflow-wrap: anywhere; }
.card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3cqw; margin-top: 4cqh; }
.card-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.stat { display: flex; flex-direction: column; gap: .5cqh; min-width: 0; }
.stat-label { color: var(--dev-muted); font-size: 3.4cqh; }
.stat-label em { font-style: normal; color: var(--dev-warn); margin-left: .3em; }
.stat-value { font-size: 8.5cqh; font-weight: 650; line-height: 1.05; letter-spacing: -.02em; overflow-wrap: anywhere; }
.stat-value.small { font-size: 5cqh; }
.stat-value .pill { font-size: 4cqh; margin-top: 1cqh; }
.stat-note { color: var(--dev-muted); font-size: 3.2cqh; }
.mono { font-family: var(--mono); letter-spacing: 0; }
.stat-value.mono { font-size: 6cqh; }
.card-body { margin-top: 3cqh; font-size: 4cqh; line-height: 1.4; max-width: 70ch; color: #dfe3e7; }
.card-caveat { margin-top: 2cqh; font-size: 3.2cqh; color: var(--dev-muted); }
.card-actions { display: flex; flex-wrap: wrap; gap: 1.5cqw; margin-top: 3cqh; }

.spark { margin: 3cqh 0 0; }
.spark svg { width: 100%; height: 10cqh; overflow: visible; }
.spark polyline { fill: none; stroke: var(--dev-alert); stroke-width: 2.4; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.spark circle { fill: var(--dev-alert); stroke: none; }
.spark figcaption { margin-top: .8cqh; color: var(--dev-muted); font-size: 3cqh; }

.device-button { min-height: 44px; min-width: 44px; padding: .5em 1.1em; border: 1px solid #ffffff38; border-radius: 999px; background: #ffffff12; color: var(--dev-ink); font-size: max(15px, 3cqh); font-weight: 600; }
.device-button:hover:not(:disabled) { background: #ffffff22; }
.device-button.danger { border-color: #ff8a7a99; color: #ffd2cb; }

.steps { margin: 3cqh 0 0; padding-left: 1.4em; font-size: 4.2cqh; line-height: 1.35; display: grid; gap: 1.4cqh; }
.steps li::marker { color: var(--dev-cyan); font-weight: 700; }
.steps.compact { font-size: 3.4cqh; gap: .6cqh; color: #dfe3e7; }
.history { list-style: none; margin: 3cqh 0 0; padding: 0; display: grid; gap: 2cqh; }
.history li { padding: 2cqh 2.4cqw; border-radius: 12px; background: var(--dev-surface); border: 1px solid var(--dev-line); }
.history strong { display: block; font-size: 3.6cqh; }
.history span { color: var(--dev-muted); font-size: 2.8cqh; }
.history p { margin-top: .6cqh; font-size: 3cqh; }

.approval-layout { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4cqw; align-items: center; flex: 1; }
.approval .card-title { font-size: 5cqh; }
.approval-facts { display: grid; grid-template-columns: auto 1fr; gap: .4cqh 2cqw; margin: 1.6cqh 0 0; font-size: 3.2cqh; }
.approval-facts dt { color: var(--dev-muted); }
.approval-facts dd { margin: 0; overflow-wrap: anywhere; }
.approval-prompt { margin-top: 2cqh; font-size: 4cqh; font-weight: 600; color: var(--dev-cyan); }
.approval-code { margin-top: 1.4cqh; display: flex; flex-direction: column; gap: .4cqh; }
.approval-code-label { color: var(--dev-muted); font-size: 2.8cqh; }
.approval-code-digits { font-family: var(--mono); font-size: 6cqh; font-weight: 700; letter-spacing: .25em; color: var(--dev-warn); line-height: 1.1; }
.approval .card-actions { margin-top: 1.6cqh; }
.approval-form { display: flex; gap: 1.5cqw; margin-top: 1.4cqh; flex-wrap: wrap; }
.approval-form input { min-height: 44px; width: 12em; border-radius: 999px; border: 1px solid #ffffff38; background: #ffffff10; color: var(--dev-ink); padding: 0 1em; font-size: max(15px, 3cqh); font-family: var(--mono); }
.ring-wrap { position: relative; width: 30cqh; height: 30cqh; }
.ring { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 9; }
.ring-track { stroke: #ffffff1a; }
.ring-fill { stroke: var(--dev-cyan); stroke-linecap: round; transition: stroke-dashoffset 900ms linear; }
.device[data-screen="approval"] .ring-fill { stroke: var(--dev-warn); }
.ring-wrap[data-verdict="verified"] .ring-fill { stroke: var(--dev-ok); }
.ring-wrap[data-verdict="not_verified"] .ring-fill, .ring-wrap[data-verdict="unknown"] .ring-fill { stroke: var(--dev-bad); }
.ring-label { position: absolute; inset: 0; display: grid; place-items: center; font-size: 6cqh; font-weight: 650; }

.transcript { position: absolute; left: 5cqw; right: 5cqw; bottom: 5cqh; min-height: 12cqh; display: flex; flex-direction: column; justify-content: flex-end; gap: .6cqh; z-index: 3; pointer-events: none; }
.transcript p { max-width: none; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.transcript .t-alexa { -webkit-line-clamp: 4; }
.t-user { color: var(--dev-muted); font-size: 3.4cqh; font-style: italic; }
.t-user:not(:empty)::before { content: "You: "; font-style: normal; }
.t-alexa { font-size: 4.2cqh; font-weight: 500; }
.sound-hint { position: absolute; top: 2.4cqh; left: 50%; transform: translateX(-50%); padding: .2em .9em; border-radius: 999px; background: #ffffff14; color: var(--dev-muted); font-size: max(12px, 2.3cqh); z-index: 4; }
.sound-hint[hidden] { display: none; }

/* Light bar along the bottom edge of the screen. */
.light-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 1.6cqh; min-height: 6px; overflow: hidden; opacity: 0; transition: opacity 240ms ease-out; z-index: 5; }
.light-bar span { position: absolute; inset: 0; background: linear-gradient(90deg, var(--dev-blue), var(--dev-cyan), var(--dev-blue)); }
.device[data-bar="listening"] .light-bar { opacity: 1; }
.device[data-bar="listening"] .light-bar span { background: linear-gradient(90deg, var(--dev-blue) 0%, var(--dev-cyan) 50%, var(--dev-blue) 100%); background-size: 200% 100%; animation: bar-slide 1.6s linear infinite; }
.device[data-bar="thinking"] .light-bar { opacity: 1; }
.device[data-bar="thinking"] .light-bar span { animation: bar-pulse 1s ease-in-out infinite alternate; }
.device[data-bar="speaking"] .light-bar { opacity: 1; }
.device[data-bar="alert"] .light-bar { opacity: 1; }
.device[data-bar="alert"] .light-bar span { background: linear-gradient(90deg, #ff3d2e, var(--dev-alert), #ffa23d, var(--dev-alert), #ff3d2e); animation: bar-pulse 700ms ease-in-out infinite alternate; }
.device[data-bar="alert"] .device-screen { box-shadow: inset 0 0 0 2px #ff6a3d55; }
@keyframes bar-slide { from { background-position: 0 0; } to { background-position: 200% 0; } }
@keyframes bar-pulse { from { opacity: .45; } to { opacity: 1; } }

/* Console under the device. */
.console { width: min(960px, 100%); display: grid; gap: var(--space-3); }
.chips { display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: center; }
.chip { min-height: 40px; padding: var(--space-2) var(--space-4); border: 1px solid var(--line-strong); border-radius: 999px; background: var(--surface); color: var(--ink); font-weight: 600; }
.chip:hover:not(:disabled) { background: var(--subtle); }
.say { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-2); align-items: center; }
.say input { width: 100%; min-height: 48px; font-size: var(--text-base); }
.talk { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 48px; padding: 0 var(--space-6); border-radius: 999px; border: 0; background: #1b2a3a; color: #e9f7ff; font-weight: 650; font-size: var(--text-base); box-shadow: inset 0 0 0 2px #3ad1f266; }
.talk svg { width: 20px; height: 20px; }
.talk[aria-pressed="true"] { background: #0f5c78; box-shadow: inset 0 0 0 2px #3ad1f2; }
.talk:disabled { opacity: .55; }
.console-row { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); align-items: center; justify-content: center; }
.switch { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 40px; cursor: pointer; }
.switch input { width: 20px; height: 20px; accent-color: var(--accent); }
.judge { border: 1px dashed var(--line-strong); border-radius: var(--radius-lg); padding: var(--space-2) var(--space-4); background: var(--surface); }
.judge summary { min-height: 40px; display: flex; align-items: center; font-weight: 650; }
.judge p { margin: var(--space-2) 0; }
.judge-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.sim-footer { padding: var(--space-6); border-top: 1px solid var(--line); color: var(--muted); text-align: center; display: grid; gap: var(--space-2); justify-items: center; }
.sim-footer a { min-height: 40px; display: inline-flex; align-items: center; }

/* Tablet and phone: full-bleed device, no bezel. */
@media (max-width: 900px) {
  .sim-top { padding: var(--space-2) var(--space-4); }
  .sim-brand .muted { display: none; }
  .sim-stage { padding: 0 0 var(--space-6); gap: var(--space-4); }
  .device { width: 100%; min-width: 0; padding: 0; border-radius: 0; box-shadow: none; background: var(--dev-bg); aspect-ratio: auto; height: min(78vh, 720px); min-height: 520px; }
  .device-camera { display: none; }
  .device-screen { border-radius: 0; font-size: 16px; }
  .console { padding: 0 var(--space-4); }
}
@media (max-width: 900px) and (orientation: portrait) {
  .scene { padding: 8cqh 6cqw 24cqh; }
  .card-grid, .card-grid.two { grid-template-columns: 1fr 1fr; gap: 2.4cqh 5cqw; margin-top: 3cqh; }
  .card-title { font-size: 4.2cqh; }
  .stat-value { font-size: 5cqh; }
  .stat-value.small, .stat-value.mono { font-size: 3.4cqh; }
  .stat-label, .stat-note { font-size: 1.8cqh; }
  .card-kicker { font-size: 1.7cqh; }
  .card-body, .steps { font-size: 2.3cqh; }
  .steps.compact, .card-caveat, .spark figcaption { font-size: 1.8cqh; }
  .ambient-time { font-size: 13cqh; }
  .ambient-date, .pill { font-size: 2.6cqh; }
  .ambient-note { font-size: 2cqh; }
  .approval-layout { grid-template-columns: 1fr; gap: 2cqh; align-content: start; }
  .approval .card-title { font-size: 3.6cqh; }
  .approval-facts { font-size: 2cqh; }
  .approval-prompt { font-size: 2.8cqh; }
  .approval-code-digits { font-size: 4.4cqh; }
  .approval-code-label { font-size: 2cqh; }
  .ring-wrap { width: 16cqh; height: 16cqh; order: -1; }
  .ring-label { font-size: 3.4cqh; }
  .t-user { font-size: 1.8cqh; } .t-alexa { font-size: 2.2cqh; }
  .screen-status { font-size: 1.8cqh; padding-top: 2cqh; }
  .history strong { font-size: 2.4cqh; } .history span, .history p { font-size: 1.9cqh; }
  .light-bar { height: 1cqh; }
  .say { grid-template-columns: minmax(0, 1fr) auto; }
  .talk { grid-column: 1 / -1; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .scene, .light-bar span, .ring-fill { animation: none !important; transition: none !important; }
  .device[data-bar="listening"] .light-bar span { background-size: 100% 100%; }
}

/* Desktop: device and console side by side so the device fills the viewport height. */
@media (min-width: 1100px) {
  .sim-stage { flex-direction: row; align-items: center; }
  .device { width: min(1100px, calc(100vw - 420px), calc((100vh - 150px) * 1.6)); min-width: 600px; }
  .console { width: 320px; flex-shrink: 0; }
  .chips { justify-content: flex-start; }
  .say { grid-template-columns: minmax(0, 1fr) auto; }
  .talk { grid-column: 1 / -1; justify-content: center; }
  .console-row { justify-content: flex-start; }
  .sim-footer { padding: var(--space-3) var(--space-6); }
}