* { box-sizing: border-box; margin: 0; }
[hidden] { display: none !important; }   /* id rules with display: would otherwise beat the hidden attribute */
html, body { height: 100%; background: #000; color: #fff; overflow: hidden;
  font: 16px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }

/* the clips are square. What you see is the canvas: the <video> elements play right behind it at
   the same size (fully "visible" to the browser, so iOS doesn't pause or throttle them) and the app
   draws their frames on it. The opaque canvas covers them completely. */
#stage { position: fixed; inset: 0; background: #000; }
#stage video, #screen { position: absolute; inset: 0; margin: auto; background: #000;
  width: min(100vw, 100vh); height: min(100vw, 100vh); }
@supports (height: 100dvh) { #stage video, #screen { width: min(100vw, 100dvh); height: min(100vw, 100dvh); } }
#stage video { z-index: 0; object-fit: contain; pointer-events: none; }
#screen { z-index: 1; }

#onscreen { position: absolute; z-index: 3; left: 50%; transform: translateX(-50%);
  bottom: calc(130px + env(safe-area-inset-bottom)); width: min(92vw, 520px);   /* above suggestions + chat bar */
  background: rgba(20, 20, 22, .92); border: 1px solid #f7ff1a55; border-radius: 14px;
  padding: 14px 16px; display: flex; gap: 12px; align-items: center; }
#onscreenText { flex: 1; font: 600 18px/1.3 ui-monospace, Menlo, monospace; letter-spacing: .5px;
  user-select: all; -webkit-user-select: all; word-break: normal; }   /* wrap only between groups */
#copy { background: #f7ff1a; color: #000; border: 0; border-radius: 10px; padding: 10px 14px; font-weight: 700; }

/* suggestions + chat bar (typing works like speaking) */
#dock { position: fixed; z-index: 4; left: 0; right: 0; bottom: 0;
  padding: 8px 12px calc(10px + env(safe-area-inset-bottom));
  background: linear-gradient(to top, rgba(0,0,0,.92), rgba(0,0,0,.7) 75%, transparent); }
#chips { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 10px; scrollbar-width: none;
  -webkit-overflow-scrolling: touch; transition: opacity .15s; }
#chips::-webkit-scrollbar { display: none; }
#chips button { flex: none; background: rgba(40, 40, 44, .9); color: #fff; border: 1px solid #f7ff1a55;
  border-radius: 18px; padding: 8px 14px; font-size: 14px; white-space: nowrap; }
#chips button:active { background: #f7ff1a; color: #000; }
#dock.busy #chips { opacity: 0; pointer-events: none; }
#chat { display: flex; gap: 8px; }
#chatText { flex: 1; min-width: 0; background: #1c1c1f; color: #fff; border: 1px solid #333; border-radius: 22px;
  padding: 12px 16px; font-size: 16px; /* 16px: iOS doesn't zoom in on focus */ outline: none; }
#chatText:focus { border-color: #f7ff1a88; }
#chatSend { background: #f7ff1a; color: #000; border: 0; border-radius: 22px; padding: 0 18px; font-weight: 700; font-size: 15px; }
#dock.busy #chatText, #dock.busy #chatSend { opacity: .45; }

/* listening indicator: a dot that glows while the user is talking */
#mic { position: absolute; z-index: 3; top: calc(16px + env(safe-area-inset-top)); right: 16px; }
#mic span { display: block; width: 14px; height: 14px; border-radius: 50%; background: #666;
  transition: background .15s, box-shadow .15s; }
#mic.listening span { background: #2fbf71; }
#mic.speaking span { background: #f7ff1a; box-shadow: 0 0 0 6px #f7ff1a33; }
#mic.thinking span { background: #f7ff1a; animation: pulse .8s infinite alternate; }
#mic.off span { background: #444; }
@keyframes pulse { to { opacity: .3; } }

#intro { position: fixed; inset: 0; z-index: 10; background: #000; display: grid; place-items: center; padding: 24px; }
#intro .box { width: min(88vw, 360px); text-align: center; }
#intro h1 { font-size: 34px; letter-spacing: .5px; }
#intro .sub { color: #9a9aa2; margin-bottom: 28px; }
#progress { height: 6px; background: #222; border-radius: 3px; overflow: hidden; }
#bar { height: 100%; width: 0; background: #f7ff1a; transition: width .2s; }
#status { color: #9a9aa2; margin-top: 12px; font-size: 14px; }
#start { margin-top: 24px; width: 100%; padding: 16px; border: 0; border-radius: 14px;
  background: #f7ff1a; color: #000; font-size: 17px; font-weight: 700; }
#error { margin-top: 16px; color: #ff6b6b; font-size: 14px; }

#debug { position: fixed; z-index: 20; left: 0; right: 0; top: 0; max-height: 45vh; overflow-y: auto;
  background: rgba(0,0,0,.8); font: 12px/1.35 ui-monospace, Menlo, monospace; padding: 8px 10px; }
#dbgLines div { border-bottom: 1px solid #333; padding: 3px 0; white-space: pre-wrap; }