/* ============ REDLINE // AVATAR v3 — clean screen + settings drawer ============ */
:root {
  --red: #ff2038;
  --red-hot: #ff4d5e;
  --red-dim: #8f1220;
  --red-glow: rgba(255, 32, 56, 0.55);
  --bg: #050506;
  --line: rgba(255, 32, 56, 0.28);
  --line-dim: rgba(255, 32, 56, 0.12);
  --text: #e8e3e4;
  --text-dim: #9a8f92;
  --mono: 'JetBrains Mono', Consolas, monospace;
  --disp: 'Orbitron', var(--mono);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }
body { background: var(--bg); color: var(--text); font-family: var(--mono); font-size: 14px; overflow: hidden;
  -webkit-tap-highlight-color: transparent; }
button, select, input, .s-chip { touch-action: manipulation; }
::selection { background: var(--red); color: #000; }
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--red-dim); border-radius: 4px; }

/* ---------- LAYERS ---------- */
#scene { position: fixed; inset: 0; z-index: 0; }
.vignette { position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(ellipse at 50% 45%, transparent 55%, rgba(0,0,0,0.28) 100%); }
.scanlines { position: fixed; inset: 0; z-index: 2; pointer-events: none; opacity: 0.16;
  background: repeating-linear-gradient(0deg, transparent 0 2px, rgba(0,0,0,0.22) 2px 4px); }
/* night scene = heavier retro overlays */
body.scene-night .vignette { background: radial-gradient(ellipse at 50% 45%, transparent 42%, rgba(0,0,0,0.75) 100%); }
body.scene-night .scanlines { opacity: 0.45; }

/* ---------- BOOT ---------- */
#boot { position: fixed; inset: 0; z-index: 100; background: #030304;
  display: flex; align-items: center; justify-content: center; }
.boot-inner { text-align: center; width: min(440px, 86vw); }
.boot-logo { font-family: var(--disp); font-weight: 900; font-size: clamp(42px, 9vw, 74px);
  letter-spacing: 0.14em; color: var(--red);
  text-shadow: 0 0 30px var(--red-glow), 0 0 90px rgba(255,32,56,0.3); }
.boot-logo .bl { display: inline-block; }
.boot-sub { margin-top: 8px; font-size: 11px; letter-spacing: 0.5em; color: var(--text-dim); }
.boot-bar { margin: 28px auto 12px; height: 3px; background: rgba(255,32,56,0.15); border-radius: 2px; overflow: hidden; }
.boot-fill { width: 0%; height: 100%; background: linear-gradient(90deg, var(--red-dim), var(--red), var(--red-hot)); box-shadow: 0 0 12px var(--red-glow); }
.boot-log { font-size: 10px; letter-spacing: 0.2em; color: var(--red); opacity: 0.8; min-height: 14px; }

/* ---------- CLEAN MAIN UI ---------- */
#ui { position: relative; z-index: 10; height: 100vh; height: 100dvh; display: flex; flex-direction: column;
  padding: 18px; padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  opacity: 0; /* GSAP reveals */ }

#gear { position: fixed; top: 16px; right: 16px; z-index: 40;
  width: 46px; height: 46px; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--line); color: var(--red);
  background: rgba(8, 6, 8, 0.55);
  display: flex; align-items: center; justify-content: center;
  transition: all 0.25s; }
#gear:hover { border-color: var(--red); box-shadow: 0 0 20px rgba(255,32,56,0.4); transform: rotate(45deg); }
#gear svg { filter: drop-shadow(0 0 6px var(--red-glow)); }

#stage { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  pointer-events: none; padding-bottom: 1vh; }
#state-word { font-family: var(--disp); font-size: 14px; font-weight: 700; letter-spacing: 0.6em;
  color: var(--red-hot); text-shadow: 0 0 20px var(--red-glow), 0 1px 8px rgba(0,0,0,0.9); text-indent: 0.6em; }
#state-word.dim { color: rgba(232,227,228,0.75); text-shadow: 0 1px 8px rgba(0,0,0,0.9); }
#hint { margin-top: 9px; font-size: 9.5px; letter-spacing: 0.24em; color: var(--text-dim);
  text-shadow: 0 1px 6px rgba(0,0,0,0.9); }

#captions { position: relative; z-index: 10; text-align: center; min-height: 58px;
  display: flex; flex-direction: column; gap: 6px; align-items: center; justify-content: flex-end;
  padding: 0 8vw 10px; }
#cap-user { font-size: 12px; color: #d8d2d4; font-style: italic; text-shadow: 0 1px 6px rgba(0,0,0,0.95); }
#cap-user:not(:empty)::before { content: 'YOU // '; font-style: normal; font-size: 9px; letter-spacing: 0.2em; color: #b8b0b3; }
#cap-ai { font-size: 14.5px; line-height: 1.6; color: #fff; max-width: 780px;
  text-shadow: 0 1px 4px rgba(0,0,0,0.95), 0 0 24px rgba(0,0,0,0.6); }
#cap-ai:not(:empty)::before { content: 'CITI // '; font-size: 9px; letter-spacing: 0.2em; color: var(--red-hot); }
body.no-caps #captions { visibility: hidden; }

#controls { display: flex; align-items: center; justify-content: center; padding-bottom: 8px; }
#mic-btn { width: 68px; height: 68px; border-radius: 50%; cursor: pointer; flex: none;
  border: 1px solid var(--line); color: var(--red);
  background: radial-gradient(circle at 50% 35%, rgba(255,32,56,0.2), rgba(10,6,8,0.85) 70%);
  display: flex; align-items: center; justify-content: center;
  transition: box-shadow 0.25s, border-color 0.25s, transform 0.1s; }
#mic-btn:hover { border-color: var(--red); box-shadow: 0 0 26px rgba(255,32,56,0.4); }
#mic-btn:active { transform: scale(0.93); }
#mic-btn.live { border-color: var(--red); box-shadow: 0 0 34px var(--red-glow), inset 0 0 18px rgba(255,32,56,0.35);
  animation: mic-pulse 1.4s ease-in-out infinite; }
@keyframes mic-pulse { 0%,100% { box-shadow: 0 0 24px var(--red-glow); } 50% { box-shadow: 0 0 44px var(--red-glow); } }

/* ---------- SETTINGS DRAWER ---------- */
#s-backdrop { position: fixed; inset: 0; z-index: 50; background: rgba(0,0,0,0.5);
  opacity: 0; pointer-events: none; transition: opacity 0.25s; }
body.settings-open #s-backdrop { opacity: 1; pointer-events: auto; }

#settings { position: fixed; top: 0; right: 0; bottom: 0; z-index: 60;
  width: min(360px, 92vw);
  background: rgba(8, 6, 8, 0.97);
  border-left: 1px solid var(--red-dim);
  box-shadow: -18px 0 60px rgba(0,0,0,0.7), 0 0 30px rgba(255,32,56,0.12);
  transform: translateX(105%); transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  display: flex; flex-direction: column; }
body.settings-open #settings { transform: translateX(0); }

.s-head { display: flex; align-items: center; justify-content: space-between;
  padding: 16px 16px 14px; border-bottom: 1px solid var(--line-dim); }
.s-brand { display: flex; align-items: center; gap: 10px;
  font-family: var(--disp); font-size: 14px; font-weight: 700; letter-spacing: 0.14em; color: var(--red); }
.s-brand em { font-style: normal; color: var(--text); font-weight: 500; font-size: 10px; letter-spacing: 0.24em; opacity: 0.8; }
#s-close { background: none; border: 1px solid var(--line-dim); color: var(--text-dim);
  width: 30px; height: 30px; cursor: pointer; font-size: 13px; transition: all 0.2s; }
#s-close:hover { border-color: var(--red); color: var(--red); }

.s-body { flex: 1; overflow-y: auto; padding: 6px 16px 16px; }
.s-sec { padding: 14px 0 12px; border-bottom: 1px solid var(--line-dim); }
.s-sec h3 { font-family: var(--disp); font-size: 10px; font-weight: 700; letter-spacing: 0.32em;
  color: var(--text); margin-bottom: 11px; display: flex; align-items: center; }
.tick { width: 7px; height: 7px; background: var(--red); margin-right: 9px; display: inline-block; box-shadow: 0 0 8px var(--red-glow); }

/* model list */
#s-models { display: flex; flex-direction: column; }
.sm-group { font-size: 8.5px; letter-spacing: 0.3em; color: var(--red-hot); padding: 8px 2px 4px;
  display: flex; justify-content: space-between; }
.sm-group em { font-style: normal; color: var(--text-dim); letter-spacing: 0.1em; }
.sm-item { padding: 8px 10px; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 8px;
  border-left: 2px solid transparent; transition: background 0.12s, border-color 0.12s; }
.sm-item:hover { background: rgba(255,32,56,0.1); border-left-color: var(--red); }
.sm-item.active { background: rgba(255,32,56,0.16); border-left-color: var(--red); }
.sm-item .n { font-size: 12px; font-weight: 600; }
.sm-item .b { font-size: 8px; letter-spacing: 0.14em; color: var(--red-hot); border: 1px solid var(--red-dim); padding: 2px 5px; flex: none; }

/* chips (personas, scenes, lengths) */
.s-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.s-chip { background: rgba(255,32,56,0.06); border: 1px solid var(--line); color: var(--text);
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.1em; padding: 8px 12px; cursor: pointer;
  transition: all 0.18s; }
.s-chip:hover { border-color: var(--red); background: rgba(255,32,56,0.14); }
.s-chip.active { background: var(--red); color: #0a0203; font-weight: 600; box-shadow: 0 0 16px var(--red-glow); border-color: var(--red); }

/* rows / selects / buttons */
.s-row { display: flex; gap: 8px; align-items: center; }
#voice-sel { flex: 1; background: rgba(16,12,14,0.9); border: 1px solid var(--line-dim); color: var(--text);
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; padding: 8px; outline: none; cursor: pointer; }
#voice-sel:hover, #voice-sel:focus { border-color: var(--red); }
#voice-sel option { background: #0a080a; }
.s-gen { margin-top: 10px; }
#scene-prompt { flex: 1; background: rgba(16,12,14,0.9); border: 1px solid var(--line-dim); color: var(--text);
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; padding: 9px; outline: none; }
#scene-prompt::placeholder { color: #574d51; font-size: 10px; letter-spacing: 0.12em; }
#scene-prompt:hover, #scene-prompt:focus { border-color: var(--red); }
.s-btn { background: none; border: 1px solid var(--line); color: var(--red-hot);
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.22em; padding: 9px 14px; cursor: pointer;
  transition: all 0.2s; }
.s-btn:hover { background: var(--red); color: #0a0203; box-shadow: 0 0 14px var(--red-glow); }
.s-btn.s-danger { width: 100%; margin-top: 10px; border-color: var(--red-dim); }
.s-note { font-size: 9.5px; letter-spacing: 0.16em; color: var(--text-dim); margin-top: 9px; line-height: 1.8; }

.toggle { display: inline-flex; align-items: center; gap: 9px; cursor: pointer;
  font-size: 10px; letter-spacing: 0.22em; color: var(--text); user-select: none; }
.toggle input { display: none; }
.toggle span { width: 28px; height: 14px; border: 1px solid var(--line); position: relative; transition: all 0.2s; flex: none; }
.toggle span::after { content: ''; position: absolute; top: 1px; left: 1px; width: 10px; height: 10px;
  background: #574d51; transition: all 0.2s; }
.toggle input:checked + span { border-color: var(--red); box-shadow: 0 0 10px rgba(255,32,56,0.3); }
.toggle input:checked + span::after { left: 15px; background: var(--red); box-shadow: 0 0 8px var(--red-glow); }

.s-foot { padding: 14px 2px; font-size: 8.5px; letter-spacing: 0.22em; color: var(--text-dim); text-align: center; }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 700px) {
  #hint { display: none; }
  #cap-ai { font-size: 13px; }
  #mic-btn { width: 62px; height: 62px; }
}