/* ===================================================================
   GOD MODE · by LastKeyboard — cinematic UI
   =================================================================== */
:root {
  --bg:#0a0a0a; --bg2:#0d0d0d; --panel:#111; --panel2:#161616; --panel3:#1a1a1a;
  --line:#242424; --line2:#2e2e2e;
  --fg:#ffffff; --fg2:#e8e8e8; --muted:#8a8a8a; --muted2:#666;
  --blue:#0066ff; --blue-soft:rgba(0,102,255,0.14);
  --green:#00cc66; --red:#ff3333; --gold:#ffaa00;
  --sans:-apple-system,"SF Pro Display","Helvetica Neue",Helvetica,Arial,sans-serif;
  --mono:"SF Mono","Fira Code","Courier New",monospace;
  --maxw:920px;
}

* { box-sizing:border-box; }
html, body {
  margin:0; padding:0; background:var(--bg); color:var(--fg2);
  font-family:var(--sans); line-height:1.6; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body { min-height:100vh; }
button { font-family:inherit; cursor:pointer; }
::selection { background:rgba(0,102,255,0.35); color:#fff; }

.hidden { display:none !important; }
.mono { font-family:var(--mono); }
.accent { color:var(--blue); }
.gold { color:var(--gold); }

/* Scrollbars */
::-webkit-scrollbar { width:10px; height:10px; }
::-webkit-scrollbar-track { background:var(--bg); }
::-webkit-scrollbar-thumb { background:#222; border-radius:6px; }
::-webkit-scrollbar-thumb:hover { background:#2e2e2e; }

/* ---------- Screens ---------- */
.screen { display:none; min-height:100vh; width:100%; position:relative; }
.screen.active { display:block; }
.screen-chat.active { display:flex; }

/* ---------- Buttons ---------- */
.btn {
  border:1px solid transparent; border-radius:6px; padding:14px 26px;
  font-size:14px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase;
  transition:all .18s ease; color:#fff; background:transparent;
}
.btn-primary { background:var(--blue); color:#fff; box-shadow:0 0 0 rgba(0,102,255,0); }
.btn-primary:hover { background:#1a75ff; box-shadow:0 6px 30px rgba(0,102,255,0.35); transform:translateY(-1px); }
.btn-secondary { border-color:var(--line2); color:var(--fg2); }
.btn-secondary:hover { border-color:#3a3a3a; background:var(--panel); }
.btn-ghost { border:1px solid var(--line); color:var(--muted); background:transparent;
  font-size:11px; padding:9px 14px; letter-spacing:0.1em; }
.btn-ghost:hover { color:var(--fg); border-color:var(--line2); background:var(--panel); }
.btn-link { background:none; border:none; color:var(--muted); font-size:13px;
  letter-spacing:0.12em; text-transform:uppercase; transition:color .18s; }
.btn-link:hover { color:var(--fg); }
.btn-report { background:linear-gradient(90deg,var(--blue),#00a3ff); color:#fff; width:100%;
  padding:16px; border-radius:8px; letter-spacing:0.12em;
  box-shadow:0 0 40px rgba(0,102,255,0.25); animation:pulseGlow 2.6s ease-in-out infinite; }
.btn-report:hover { transform:translateY(-1px); }
@keyframes pulseGlow {
  0%,100% { box-shadow:0 0 30px rgba(0,102,255,0.20); }
  50% { box-shadow:0 0 50px rgba(0,102,255,0.45); }
}
.btn-send { background:var(--blue); color:#fff; border-radius:6px; padding:0 22px; font-size:13px;
  min-height:46px; }
.btn-send:hover { background:#1a75ff; }
.btn-send:disabled { opacity:.4; cursor:not-allowed; }

/* ---------- Top bar ---------- */
.top-bar { position:absolute; top:0; left:0; right:0; display:flex;
  justify-content:space-between; align-items:center; padding:22px 32px; z-index:5; }
.wordmark { font-family:var(--mono); font-size:14px; letter-spacing:0.4em; color:var(--fg);
  font-weight:700; }
.by { font-family:var(--mono); font-size:11px; letter-spacing:0.28em; color:var(--muted);
  text-transform:uppercase; }

/* =====================================================================
   SCREEN 1 — LANDING
   ===================================================================== */
.screen-landing { align-items:center; justify-content:center;
  background:
    radial-gradient(1200px 700px at 50% -10%, rgba(0,102,255,0.10), transparent 60%),
    radial-gradient(900px 600px at 80% 120%, rgba(0,204,102,0.05), transparent 60%),
    var(--bg);
}
.screen-landing.active { display:flex; }
.landing-inner { max-width:760px; padding:120px 28px 90px; text-align:center; animation:fadeUp .7s ease both; }
@keyframes fadeUp { from { opacity:0; transform:translateY(18px); } to { opacity:1; transform:none; } }
.landing-kicker { font-family:var(--mono); font-size:11px; letter-spacing:0.34em; color:var(--muted);
  text-transform:uppercase; margin-bottom:22px; }
.landing-title { font-size:clamp(44px,8vw,84px); line-height:0.98; letter-spacing:-0.03em;
  color:var(--fg); margin:0 0 20px; font-weight:800; }
.landing-sub { font-size:clamp(17px,2.4vw,21px); color:var(--fg2); margin:0 auto 22px; max-width:600px;
  font-weight:500; }
.landing-body { color:var(--muted); font-size:15px; max-width:600px; margin:0 auto 34px; }

.signal-input-wrap { position:relative; margin-bottom:16px; }
.signal-textarea {
  width:100%; background:var(--panel); border:1px solid var(--line); border-radius:10px;
  color:var(--fg); font-size:17px; font-family:var(--sans); padding:20px 22px; resize:none;
  line-height:1.5; transition:border-color .2s, box-shadow .2s; min-height:64px; max-height:200px;
}
.signal-textarea::placeholder { color:var(--muted2); }
.signal-textarea:focus { outline:none; border-color:var(--blue);
  box-shadow:0 0 0 4px var(--blue-soft), 0 0 40px rgba(0,102,255,0.12); }

.url-hint { font-family:var(--mono); font-size:11px; color:var(--blue); letter-spacing:0.08em;
  margin-top:8px; text-align:left; padding-left:4px; }

.suggestions { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-bottom:34px; }
.chip {
  background:var(--panel2); border:1px solid var(--line); color:var(--fg2); border-radius:100px;
  padding:9px 16px; font-size:13px; transition:all .2s ease; max-width:100%;
  white-space:normal; text-align:left; line-height:1.35; animation:chipIn .4s ease both;
}
.chip:hover { border-color:var(--blue); color:var(--fg); background:var(--panel3); }
@keyframes chipIn { from { opacity:0; transform:translateY(6px);} to { opacity:1; transform:none;} }

.landing-actions { display:flex; flex-direction:column; align-items:center; gap:16px; margin-bottom:44px; }
.landing-actions .btn-primary { min-width:280px; padding:17px 26px; font-size:15px; }

.accepts { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; align-items:center;
  font-family:var(--mono); font-size:11px; letter-spacing:0.14em; color:var(--muted2);
  text-transform:uppercase; }
.accepts i { width:3px; height:3px; border-radius:50%; background:#333; display:inline-block; }

/* =====================================================================
   SCREEN 2 — SIGNAL VIDEO
   ===================================================================== */
.screen-signal { background:#000; align-items:center; justify-content:center;
  overflow:hidden; }
.screen-signal.active { display:flex; }
.signal-inner { position:relative; z-index:3; text-align:center; padding:80px 24px; width:100%;
  max-width:1000px; }
.signal-eyebrow { font-family:var(--mono); font-size:12px; letter-spacing:0.4em; color:var(--muted);
  text-transform:uppercase; margin-bottom:30px; }

.floating-words { position:absolute; inset:0; z-index:1; pointer-events:none; }
.fw { position:absolute; font-family:var(--mono); font-weight:700; letter-spacing:0.2em;
  color:#fff; opacity:0; font-size:clamp(16px,2.4vw,30px); text-transform:uppercase;
  transition:opacity 1s ease, transform 1s ease; transform:translateY(14px); }
.screen-signal.words-in .fw { opacity:0.16; transform:none; }
.screen-signal.words-in .fw:hover { opacity:0.5; }
.fw-tl { top:12%; left:8%; }
.fw-tr { top:14%; right:8%; color:var(--blue); }
.fw-lc { top:48%; left:5%; color:var(--gold); }
.fw-rc { top:52%; right:6%; color:var(--gold); }
.fw-bl { bottom:16%; left:9%; color:var(--green); }
.fw-br { bottom:14%; right:9%; }

.monolith { position:relative; z-index:2; margin:0 auto 34px; max-width:760px;
  border:1px solid #262626; background:#000; border-radius:2px; padding:10px;
  box-shadow:0 0 0 1px #111, 0 40px 120px rgba(0,0,0,0.8),
             0 0 80px rgba(0,102,255,0.08); }
.video-mount { position:relative; width:100%; aspect-ratio:16/9; background:#000; overflow:hidden; }
.video-mount iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }
.video-poster { position:absolute; inset:0; width:100%; height:100%; background:
  radial-gradient(circle at 50% 45%, #141414, #000 70%); border:none; display:flex;
  flex-direction:column; align-items:center; justify-content:center; gap:16px; }
.play-glyph { width:74px; height:74px; border-radius:50%; border:1px solid var(--line2);
  display:flex; align-items:center; justify-content:center; font-size:24px; color:#fff;
  padding-left:5px; transition:all .2s; }
.video-poster:hover .play-glyph { border-color:var(--blue); background:var(--blue-soft);
  box-shadow:0 0 40px rgba(0,102,255,0.3); }
.play-label { font-family:var(--mono); font-size:12px; letter-spacing:0.24em; color:var(--muted);
  text-transform:uppercase; }
.signal-controls { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }

/* =====================================================================
   SCREEN 3 — CHAT
   ===================================================================== */
.screen-chat { background:var(--bg2); }
.sidebar { width:270px; flex-shrink:0; background:var(--panel); border-right:1px solid var(--line);
  display:flex; flex-direction:column; padding:22px 20px; height:100vh; position:sticky; top:0;
  overflow-y:auto; }
.sidebar-top { margin-bottom:22px; }
.session-idea { margin-top:10px; font-size:13px; color:var(--muted); line-height:1.4;
  border-left:2px solid var(--line2); padding-left:10px; }

.score-panel { background:var(--panel2); border:1px solid var(--line); border-radius:10px;
  padding:16px; margin-bottom:22px; }
.score-panel-title { font-family:var(--mono); font-size:10px; letter-spacing:0.24em; color:var(--muted);
  text-transform:uppercase; margin-bottom:14px; }
.sc-row { display:flex; align-items:center; justify-content:space-between; gap:8px;
  font-family:var(--mono); font-size:11px; margin-bottom:11px; }
.sc-name { color:var(--muted); letter-spacing:0.08em; flex-shrink:0; width:78px; }
.sc-dots { color:var(--blue); letter-spacing:2px; font-size:12px; flex:1; }
.sc-num { color:var(--fg); width:22px; text-align:right; }
.sc-friction-val { font-weight:700; letter-spacing:0.1em; }
.sc-divider { height:1px; background:var(--line); margin:6px 0 12px; }
.sc-verdict .sc-name { color:var(--fg); }
.sc-verdict-val { font-weight:800; letter-spacing:0.08em; font-size:12px; }

.sidebar-suggestions { margin-bottom:auto; }
.sidebar-suggestions-title { font-family:var(--mono); font-size:10px; letter-spacing:0.24em;
  color:var(--muted); text-transform:uppercase; margin-bottom:12px; }
.suggestions-vertical { flex-direction:column; align-items:stretch; }
.suggestions-vertical .chip { width:100%; font-size:12px; padding:10px 13px; }
.start-over { margin-top:22px; text-align:left; padding:6px 0; }

.chat-main { flex:1; display:flex; flex-direction:column; height:100vh; min-width:0; }
.messages { flex:1; overflow-y:auto; padding:36px clamp(20px,6vw,80px) 20px;
  display:flex; flex-direction:column; gap:22px; scroll-behavior:smooth; }

.msg { max-width:760px; animation:msgIn .35s ease both; }
@keyframes msgIn { from { opacity:0; transform:translateY(8px);} to { opacity:1; transform:none; } }
.msg-assistant { align-self:flex-start; }
.msg-user { align-self:flex-end; }
.msg-role { font-family:var(--mono); font-size:10px; letter-spacing:0.2em; text-transform:uppercase;
  color:var(--muted); margin-bottom:8px; }
.msg-user .msg-role { text-align:right; }
.msg-bubble { border-radius:12px; padding:16px 20px; font-size:15.5px; line-height:1.68; }
.msg-assistant .msg-bubble { background:transparent; color:var(--fg2); padding-left:0; padding-right:0; }
.msg-user .msg-bubble { background:var(--panel3); border:1px solid var(--line); color:var(--fg); }
.msg-bubble p { margin:0 0 10px; }
.msg-bubble p:last-child { margin-bottom:0; }
.msg-bubble strong { color:var(--fg); font-weight:700; }
.msg-bubble em { color:var(--fg2); }
.msg-bubble h3, .msg-bubble h4 { color:var(--fg); margin:14px 0 8px; font-size:15px;
  font-family:var(--mono); letter-spacing:0.06em; }
.msg-bubble ul, .msg-bubble ol { margin:8px 0; padding-left:20px; }
.msg-bubble li { margin-bottom:5px; }
.msg-bubble code { font-family:var(--mono); background:var(--panel2); padding:1px 6px;
  border-radius:4px; font-size:13px; color:var(--green); }
.cursor-blink { display:inline-block; width:8px; height:16px; background:var(--blue);
  margin-left:2px; vertical-align:text-bottom; animation:blink 1s step-end infinite; }
@keyframes blink { 50% { opacity:0; } }

.chat-input-area { border-top:1px solid var(--line); padding:16px clamp(20px,6vw,80px) 20px;
  background:var(--bg2); }
.report-cta-wrap { max-width:760px; margin:0 auto 14px; }
.chat-input-row { max-width:760px; margin:0 auto; display:flex; gap:10px; align-items:flex-end; }
.chat-textarea { flex:1; background:var(--panel); border:1px solid var(--line); border-radius:8px;
  color:var(--fg); font-size:15px; font-family:var(--sans); padding:13px 16px; resize:none;
  line-height:1.5; min-height:46px; max-height:180px; transition:border-color .2s, box-shadow .2s; }
.chat-textarea::placeholder { color:var(--muted2); }
.chat-textarea:focus { outline:none; border-color:var(--blue); box-shadow:0 0 0 3px var(--blue-soft); }
.chat-input-meta { max-width:760px; margin:8px auto 0; display:flex; justify-content:space-between;
  font-family:var(--mono); font-size:10px; letter-spacing:0.08em; color:var(--muted2); }

/* =====================================================================
   SCREEN 4 — REPORT OVERLAY
   ===================================================================== */
.report-overlay { position:fixed; inset:0; z-index:60; background:rgba(5,5,5,0.85);
  backdrop-filter:blur(6px); display:none; align-items:center; justify-content:center; padding:24px; }
.report-overlay.open { display:flex; animation:fadeIn .25s ease; }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
.report-shell { width:100%; max-width:980px; height:92vh; background:var(--bg); border:1px solid var(--line);
  border-radius:14px; display:flex; flex-direction:column; overflow:hidden;
  box-shadow:0 40px 140px rgba(0,0,0,0.7); }
.report-toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:14px 18px; border-bottom:1px solid var(--line); background:var(--panel); flex-wrap:wrap; }
.report-toolbar-actions { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.btn-close, .modal-close { background:none; border:1px solid var(--line); color:var(--muted);
  width:34px; height:34px; border-radius:6px; font-size:15px; transition:all .18s; }
.btn-close:hover, .modal-close:hover { color:var(--fg); border-color:var(--line2); }
.report-frame { flex:1; width:100%; border:0; background:var(--bg); }
.report-loading { flex:1; display:none; flex-direction:column; align-items:center; justify-content:center;
  gap:16px; }
.report-loading.show { display:flex; }
.loading-orb { width:60px; height:60px; border-radius:50%;
  background:radial-gradient(circle at 40% 40%, var(--blue), #001a44);
  box-shadow:0 0 60px rgba(0,102,255,0.5); animation:orbPulse 1.4s ease-in-out infinite; }
@keyframes orbPulse { 0%,100% { transform:scale(0.9); opacity:.7;} 50% { transform:scale(1.1); opacity:1; } }
.loading-text { font-size:16px; color:var(--fg); }
.loading-sub { font-family:var(--mono); font-size:11px; letter-spacing:0.2em; color:var(--muted);
  text-transform:uppercase; }
.report-actions { display:flex; gap:12px; padding:16px 18px; border-top:1px solid var(--line);
  background:var(--panel); flex-wrap:wrap; justify-content:center; }

/* =====================================================================
   FOOTER + MODALS + TOAST
   ===================================================================== */
.global-footer { position:fixed; bottom:0; left:0; right:0; z-index:20; display:flex;
  gap:8px; align-items:center; justify-content:center; padding:10px; font-size:11px;
  color:var(--muted2); pointer-events:none; }
.screen-chat.active ~ .global-footer { display:none; }
.foot-link { background:none; border:none; color:var(--muted2); font-size:11px; letter-spacing:0.06em;
  pointer-events:auto; transition:color .18s; }
.foot-link:hover { color:var(--fg2); }
.foot-sep { color:#333; }

.modal-backdrop { position:fixed; inset:0; z-index:80; background:rgba(0,0,0,0.7);
  backdrop-filter:blur(4px); display:none; align-items:center; justify-content:center; padding:24px; }
.modal-backdrop.open { display:flex; }
.modal { position:relative; background:var(--panel); border:1px solid var(--line); border-radius:12px;
  max-width:520px; width:100%; padding:32px; max-height:80vh; overflow-y:auto; }
.modal-close { position:absolute; top:16px; right:16px; }
.modal-content { display:none; }
.modal-content.show { display:block; }
.modal-content h3 { color:var(--fg); margin:0 0 16px; font-size:20px; }
.modal-content p { color:var(--muted); font-size:14px; margin-bottom:14px; }

.toast { position:fixed; bottom:40px; left:50%; transform:translateX(-50%) translateY(20px);
  background:var(--panel3); border:1px solid var(--line2); color:var(--fg); padding:12px 22px;
  border-radius:8px; font-size:14px; z-index:120; opacity:0; pointer-events:none;
  transition:all .3s ease; box-shadow:0 20px 60px rgba(0,0,0,0.5); }
.toast.show { opacity:1; transform:translateX(-50%) translateY(0); }

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width:820px) {
  .sidebar { display:none; }
  .messages { padding:24px 18px 16px; }
  .chat-input-area { padding:14px 16px 18px; }
  .report-toolbar-actions .btn-ghost { display:none; }
  .report-toolbar-actions #close-report { display:inline-flex; }
  .landing-inner { padding:100px 20px 80px; }
  .fw-lc, .fw-rc { display:none; }
}
@media (max-width:560px) {
  .top-bar { padding:16px 18px; }
  .landing-actions .btn-primary { min-width:0; width:100%; }
  .report-shell { height:96vh; }
  .report-actions .btn { flex:1; min-width:140px; font-size:12px; padding:12px; }
}