/* Echo Show host simulator: a dev surface in the Clear Instrument tokens. The device holds the 768x480 canvas at up to 1.667x. */
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--ground); color: var(--ink); font: 16px/1.4 var(--font-body); }
[hidden] { display: none !important; }
.label { font: 600 var(--fs-label)/1.2 var(--font-mono); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--muted); }

.bar { display: flex; justify-content: space-between; gap: 16px; padding: 12px 16px; border-bottom: var(--hair) solid var(--line); }
.sim { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 16px; padding: 16px; height: calc(100% - 45px); }
.stage { min-width: 0; display: flex; flex-direction: column; gap: 10px; }

.device { align-self: center; padding: 14px; background: #05080C; border-radius: 22px; box-shadow: 0 0 0 var(--hair) var(--line); }
.screen { width: 768px; height: 480px; position: relative; overflow: hidden; border-radius: 6px; background: var(--ground); }
.screen iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.idle { margin: 0; height: 100%; display: grid; place-items: center; font: 600 40px/1.1 var(--font-display); color: var(--muted); }
.meta { align-self: center; margin: 0; }

.caption { margin: 0; min-height: 1.4em; font-size: 20px; }
.caption b { color: var(--rose-ink); }
.ask { display: flex; gap: 8px; }
.ask input { flex: 1; min-width: 0; font: 18px/1 var(--font-body); padding: 12px 14px; color: var(--ink); background: var(--surface); border: var(--hair) solid var(--line); border-radius: var(--r-tight); }
.ask button, .chip { font: 600 16px/1 var(--font-body); padding: 12px 18px; border-radius: var(--r-tight); cursor: pointer; border: 0; }
.talk, .send { color: var(--on-rose); background: var(--rose-ink); }
.talk[aria-pressed="true"] { outline: 3px solid var(--rose); outline-offset: 2px; }
.chip { color: var(--ink); background: transparent; box-shadow: inset 0 0 0 var(--hair) var(--ink); padding: 8px 12px; }
.row { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; }
.toggle { font-size: 15px; color: var(--muted); }
button:focus-visible, input:focus-visible { outline: 3px solid var(--rose); outline-offset: 2px; }
.context { margin: 0; font: 13px/1.4 var(--font-mono); color: var(--muted); }

.log { min-height: 0; display: flex; flex-direction: column; background: var(--surface); border-radius: var(--r-acrylic); box-shadow: 0 0 0 var(--hair) var(--line); }
.log h2 { margin: 0; padding: 12px 14px; border-bottom: var(--hair) solid var(--line); }
.log ol { list-style: none; margin: 0; padding: 6px 0; overflow-y: auto; font: 12px/1.4 var(--font-mono); }
.log li { padding: 5px 14px; border-left: 3px solid transparent; }
.log li .t { color: var(--muted); margin-right: 6px; }
.log li b { font-weight: 700; }
.log li code { display: block; color: var(--muted); white-space: pre-wrap; word-break: break-word; max-height: 4.2em; overflow: hidden; }
.log li[data-kind="user"], .log li[data-kind="alexa"], .log li[data-kind="sonic"] { border-left-color: var(--rose); }
.log li[data-kind="app"] { border-left-color: var(--ok); }
.log li[data-kind="ctx"] { border-left-color: var(--care-fill); }
.log li[data-kind="err"] { border-left-color: var(--care); color: var(--care); }

@media (max-width: 1100px) { .sim { grid-template-columns: 1fr; height: auto; } .log ol { max-height: 50vh; } }