:root { color-scheme: dark; --live: #4cc9f0; --native: #ffc857; --earlier: #8fa3a8; --bg: #0f1326; --fg: #f1f3ff; --accent: #ff7a63; --warn: #ffa94d; --err: #ff6b6b; }
* { box-sizing: border-box; }
[hidden] { display: none !important; } /* author display rules (e.g. #idle grid) must not defeat the hidden attribute */
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--fg); font: 15px/1.4 "DM Sans", system-ui, -apple-system, "PingFang SC", sans-serif; }

#stage { position: fixed; top: 0; left: 0; right: 0; height: 100vh; height: 100dvh; display: flex; flex-direction: column; }
/* canvas area and conversation area are separate boxes, so generated pages can never cover the transcript */
#canvasWrap { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; background: #0f1326; }
#canvasWrap > #canvas { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #0f1326; }
#convo { flex: none; height: clamp(96px, 26dvh, 240px); overflow-y: auto; border-top: 1px solid #232a4d; background: #141937; }
#convo #turns { list-style: none; margin: 0; padding: .6rem 1rem; display: grid; gap: .4rem; align-content: end; min-height: 100%; }
#convo li { max-width: 92%; padding: .35rem .7rem; border-radius: 12px; font-size: 1rem; line-height: 1.35; overflow-wrap: anywhere; background: #1b2142; color: #c9cdf0; }
#convo li.user { justify-self: end; background: #3a2024; color: #ffc4b8; }
#idle { position: absolute; inset: 0; pointer-events: none; display: grid; place-content: center; text-align: center; padding: 2rem; gap: .5rem; opacity: .85; }
#idle h1 { margin: 0; font-size: 1.6rem; }

#pill { position: absolute; top: max(env(safe-area-inset-top), 10px); right: 12px; padding: 3px 10px; border-radius: 999px; font: 12px ui-monospace, Menlo, monospace; background: rgba(15, 19, 38, .85); border: 1px solid #232a4d; }
#pill[data-state="working"] { color: var(--accent); }
#pill[data-state="error"] { color: var(--err); }
#pill[data-state="ended"] { color: var(--warn); }

#bar { position: relative; z-index: 2; flex: none; display: flex; align-items: center; justify-content: center; gap: .75rem; padding: .6rem .75rem calc(.6rem + env(safe-area-inset-bottom)); background: rgba(15, 19, 38, .9); min-height: 56px; }
button, .btn, .big-start { font: inherit; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: .55rem 1.4rem; text-decoration: none; color: var(--fg); border-radius: 999px; border: 1px solid #2c3463; background: #1b2142; color: var(--fg); }
#start, .primary, .big-start { background: var(--accent); color: #1a0e0c; border-color: var(--accent); font-weight: 600; }
#end { background: #3a1a1a; border-color: #6b2c2c; }
button:disabled { opacity: .5; }
#msg { font-size: 13px; color: var(--warn); }

body.login { display: grid; place-items: center; padding: 1.5rem max(1rem, env(safe-area-inset-left)); }
body.login main { display: grid; gap: 1.1rem; width: min(360px, 100%); }
body.login h1 { margin: 0; font: 700 clamp(34px, 9vw, 44px)/1.02 "Familjen Grotesk", system-ui, sans-serif; letter-spacing: -.01em; text-wrap: balance; }
body.login .sub { margin: 0; font-size: 1.1rem; color: #c9cdf0; }
body.login .sub em { font-style: normal; color: var(--accent); }
body.login form { display: grid; gap: .75rem; margin-top: .6rem; }
body.login input { font: inherit; padding: .65rem .8rem; border-radius: 10px; border: 1px solid #2c3463; background: #1b2142; color: var(--fg); }

a.ghost { color: var(--fg); text-decoration: none; padding: .55rem .9rem; min-height: 44px; display: inline-flex; align-items: center; }
button.ghost { background: transparent; border-color: transparent; padding-inline: .8rem; }
.danger { color: var(--err); }

/* shared page chrome (home + replay) */
body.page, body.replay { min-height: 100vh; min-height: 100dvh; padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom); }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .5rem 1rem; padding-inline: max(1rem, env(safe-area-inset-left)) max(1rem, env(safe-area-inset-right)); }
.topbar h1 { margin: 0; font-size: 1.25rem; }
.topbar strong { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; }
.content { max-width: 720px; margin: 0 auto; padding: .5rem 1rem 2rem; }
.starts { display: flex; flex-wrap: wrap; gap: .6rem; margin: .5rem 0 1.25rem; }
.start-btn { flex: 1 1 10rem; min-height: 40px; padding: .4rem 1rem; font-size: .95rem; font-weight: 600; }
.big-start { width: 100%; font-size: 1.1rem; font-weight: 600; border-radius: 14px; margin: .5rem 0 1.25rem; }
h2 { font-size: 1rem; opacity: .8; margin: 0 0 .5rem; }
.cards { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.card { display: grid; grid-template-columns: 120px 1fr; gap: .75rem; padding: .6rem; border: 1px solid #232a4d; border-radius: 14px; background: #141937; }
.thumbwrap { position: relative; width: 120px; height: 90px; overflow: hidden; border-radius: 8px; background: #0f1326; }
.thumb { position: absolute; top: 0; left: 0; width: 480px; height: 360px; border: 0; transform: scale(.25); transform-origin: 0 0; pointer-events: none; }
.info { display: grid; gap: .25rem; min-width: 0; align-content: start; }
.title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.meta { font-size: 12px; opacity: .7; }
.actions { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .25rem; }
.actions .btn, .actions button { padding: .4rem .8rem; }
.rename { font: inherit; min-height: 44px; padding: 0 .6rem; border-radius: 10px; border: 1px solid #2c3463; background: #1b2142; color: var(--fg); width: 100%; }
@media (max-width: 480px) {
  .card { grid-template-columns: 1fr; }
  .thumbwrap { width: 100%; height: 0; padding-bottom: 56%; }
  .thumb { width: 400%; height: 400%; transform: scale(.25); }
}

/* back button (live + replay) */
.iconbtn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex: none; border-radius: 50%; color: var(--fg); background: rgba(15, 19, 38, .85); border: 1px solid #232a4d; text-decoration: none; }
#stage .back { position: absolute; top: max(env(safe-area-inset-top), 8px); left: 12px; z-index: 3; }
#pill { top: calc(max(env(safe-area-inset-top), 8px) + 10px); }

/* replay: fixed-height column; only the transcript scrolls */
body.replay { height: 100vh; height: 100dvh; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
body.replay .topbar { flex: none; }
body.replay #rstage { position: relative; flex: 1 1 auto; min-height: 120px; overflow: hidden; background: #0f1326; border-block: 1px solid #232a4d; }
body.replay #canvas { position: absolute; left: 50%; top: 50%; border: 0; transform-origin: center center; background: #0f1326; }
#panel { flex: none; padding: .25rem 1rem 0; }
#controls { display: flex; align-items: center; gap: .75rem; }
#scrub { flex: 1; min-width: 0; height: 44px; accent-color: var(--accent); }
#pos { font: 12px ui-monospace, Menlo, monospace; opacity: .8; min-width: 4.5ch; text-align: right; }
#summary { margin: 0; min-height: 1.4em; color: var(--accent); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#msg { margin: 0; color: var(--warn); }
#msg:empty { display: none; }
#turns { position: relative; flex: 0 1 26dvh; min-height: 72px; list-style: none; margin: 0; padding: .5rem 1rem 1rem; overflow-y: auto; display: grid; gap: .4rem; align-content: start; border-top: 1px solid #232a4d; }
#turns li { padding: .4rem .7rem; border-radius: 10px; background: #1b2142; max-width: 90%; overflow-wrap: anywhere; }
#turns li.user { justify-self: end; background: #3a2024; }
#turns li.future { opacity: .3; }

body.login .error { margin: 0; color: var(--err); text-align: center; font-size: 14px; }

/* shown while a page is being built: a centered animation when there is nothing on screen yet, otherwise a slim bar on top */
#building { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
#building .bar { position: absolute; top: 0; left: 0; right: 0; height: 3px; overflow: hidden; background: rgba(125, 211, 252, .15); }
#building .bar::after { content: ''; position: absolute; inset: 0; width: 40%; background: var(--accent); border-radius: 3px; animation: vc-slide 1.2s ease-in-out infinite; }
#building .center { position: absolute; inset: 0; display: none; place-content: center; justify-items: center; gap: .6rem; text-align: center; }
#building.empty .center { display: grid; }
#building.empty .bar { display: none; }
#building .center p { margin: 0; opacity: .8; }
#building .dots { display: inline-flex; gap: 8px; }
#building .dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); animation: vc-bounce 1s ease-in-out infinite; }
#building .dots i:nth-child(2) { animation-delay: .15s; }
#building .dots i:nth-child(3) { animation-delay: .3s; }
@keyframes vc-slide { 0% { transform: translateX(-100%); } 100% { transform: translateX(250%); } }
@keyframes vc-bounce { 0%, 80%, 100% { transform: translateY(0); opacity: .4; } 40% { transform: translateY(-10px); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { #building .bar::after, #building .dots i { animation: none; } #building .bar::after { width: 100%; opacity: .5; } }

/* typing instead of talking */
#say { display: flex; flex: 1 1 auto; flex-wrap: wrap; min-width: 0; gap: .5rem; }
#text { flex: 1 1 8rem; min-width: 0; padding: .5rem .75rem; border-radius: 999px; border: 1px solid #2c3463; background: #141937; color: var(--fg); font-size: 16px; }
#send { background: var(--accent); color: #1a0e0c; border-color: var(--accent); font-weight: 600; }

/* what the assistant is doing right now: the page being made (with Stop), a search, a look at the screen */
#activity { position: absolute; z-index: 3; left: 56px; right: 96px; top: calc(max(env(safe-area-inset-top), 8px) + 6px); display: flex; flex-direction: column; align-items: flex-start; gap: 6px; pointer-events: none; }
#activity .chip { display: inline-flex; align-items: center; gap: .5rem; max-width: 100%; padding: 4px 10px; border-radius: 999px; font-size: 13px; background: rgba(15, 19, 38, .88); border: 1px solid #232a4d; pointer-events: auto; }
#activity .chip .state { font: 12px ui-monospace, Menlo, monospace; color: var(--accent); white-space: nowrap; }
#activity .chip .what { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
#activity .chip[data-state="done"] .state { color: #7dd3a8; }
#activity .chip[data-state="failed"] .state { color: var(--err); }
#activity .chip[data-state="superseded"] .state, #activity .chip[data-state="cancelled"] .state, #activity .chip[data-state="noop"] .state { color: var(--warn); }
#activity .chip[data-state="running"] .state::before, #chips .chip .state::before { content: ''; display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: var(--accent); animation: vc-bounce 1s ease-in-out infinite; }
#stop { padding: 1px 10px; border-radius: 999px; font-size: 12px; background: #3a1a1a; border: 1px solid #6b2c2c; color: inherit; }
#chips { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
@media (prefers-reduced-motion: reduce) { #activity .chip .state::before, #chips .chip .state::before { animation: none; } }
/* task rows between the chat bubbles */
#turns li.task { align-self: center; max-width: 100%; background: none; border: 0; padding: 0 .5rem; font: 12px ui-monospace, Menlo, monospace; color: #7f9aa1; }

/* which kind of session: a stamp on the thumbnail and a band down the card's edge (the word carries it, the colour helps the eye) */
.card { --kind: var(--earlier); border-left: 5px solid var(--kind); }
.card.kind-live { --kind: var(--live); }
.card.kind-native { --kind: var(--native); }
.stamp { position: absolute; top: 5px; left: 5px; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; line-height: 1.5; background: var(--kind); color: #0f1326; box-shadow: 0 1px 3px rgba(0,0,0,.5); }
.start-live { border-color: var(--live); }
.start-native { border-color: var(--native); }

/* attaching an image to a typed message */
#attach { min-width: 44px; padding: 0 .6rem; font-size: 1.2rem; line-height: 1; }
#attachments { order: -1; display: flex; flex: 1 1 100%; flex-wrap: wrap; gap: .6rem; align-items: center; padding: .1rem 0 .25rem; }
.att-thumb { position: relative; display: inline-flex; align-items: center; }
.att-thumb img { height: 48px; max-width: 80px; object-fit: cover; border-radius: 8px; border: 1px solid #2c3463; }
.att-x { position: absolute; top: -8px; right: -8px; min-height: 22px; width: 22px; padding: 0; border-radius: 50%; font-size: 14px; line-height: 1; }
#turns li.user img.att { display: block; max-width: 160px; max-height: 110px; border-radius: 8px; margin-bottom: .3rem; }

/* Night studio: headline, small line, and the waveform-to-page drawing */
.headline { opacity: 1; margin: 0; font: 700 clamp(30px, 7vw, 40px)/1.04 "Familjen Grotesk", system-ui, sans-serif; letter-spacing: -.01em; text-wrap: balance; }
.subline { margin: 0; color: #c9cdf0; }
.subline em { font-style: normal; color: var(--accent); }
.motif { width: 100%; max-width: 320px; height: auto; display: block; color: var(--accent); }
.hero { display: grid; gap: .5rem; margin: .5rem 0 1.4rem; }
.hero .motif { max-width: 260px; margin-top: .4rem; }
.topbar h1 { font-family: "Familjen Grotesk", system-ui, sans-serif; }
#idle h1 { font: 700 clamp(28px, 6vw, 38px)/1.05 "Familjen Grotesk", system-ui, sans-serif; text-wrap: balance; }
#idle p { max-width: 34ch; margin-inline: auto; color: #c9cdf0; }
body.login button[type="submit"] { background: var(--accent); color: #1a0e0c; border-color: var(--accent); font-weight: 700; border-radius: 10px; }
.who { display: flex; align-items: center; gap: .25rem; margin: 0; }