:root {
  color-scheme: dark;
  --bg: #080b10;
  --panel: rgba(14, 18, 25, .78);
  --panel-solid: #0e1219;
  --line: rgba(255,255,255,.09);
  --line-strong: rgba(255,255,255,.16);
  --text: #edf1f4;
  --muted: #8c96a3;
  --dim: #5f6874;
  --accent: #c8ff62;
  --accent-soft: rgba(200,255,98,.08);
  --danger: #ff775f;
}
* { box-sizing: border-box; }
html, body { margin:0; min-height:100%; background:var(--bg); color:var(--text); font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
body { min-height:100vh; overflow-x:hidden; }
body::before { content:""; position:fixed; inset:0; pointer-events:none; background:radial-gradient(circle at 75% 15%, rgba(111,143,170,.09), transparent 28%), linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px); background-size:auto, 48px 48px, 48px 48px; mask-image:linear-gradient(to bottom, black, transparent 88%); }
.noise { position:fixed; inset:0; opacity:.025; pointer-events:none; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E"); }
.shell { width:min(1440px, calc(100% - 36px)); margin:0 auto; min-height:100vh; position:relative; z-index:1; }
.topbar { height:92px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); }
.brand-wrap { display:flex; align-items:center; gap:14px; }
.mark { width:38px; height:38px; display:grid; place-items:center; border:1px solid var(--line-strong); font:700 18px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing:-.08em; transform:skew(-6deg); background:linear-gradient(145deg, rgba(255,255,255,.06), transparent); }
.brand { font-size:20px; font-weight:800; letter-spacing:.18em; }
.subbrand, .rail-label, .eyebrow, .status, #modeLabel { font:600 10px/1.3 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing:.18em; color:var(--dim); }
.subbrand { margin-top:5px; font-size:8px; }
.status { display:flex; align-items:center; gap:9px; }
.pulse { width:7px; height:7px; border-radius:50%; background:var(--accent); box-shadow:0 0 14px rgba(200,255,98,.5); }
.workspace { display:grid; grid-template-columns:260px minmax(0,1fr); min-height:calc(100vh - 92px); }
.rail { border-right:1px solid var(--line); padding:38px 26px 28px 0; display:flex; flex-direction:column; }
.rail-label { margin-bottom:14px; }
.mode { width:100%; background:transparent; color:var(--text); border:1px solid transparent; border-top-color:var(--line); padding:16px 12px; display:grid; grid-template-columns:30px 1fr; gap:8px; text-align:left; cursor:pointer; transition:.2s ease; }
.mode:last-of-type { border-bottom-color:var(--line); }
.mode:hover { background:rgba(255,255,255,.025); }
.mode.active { background:var(--accent-soft); border-color:rgba(200,255,98,.22); }
.mode-key { font:600 10px/1.4 ui-monospace, monospace; color:var(--dim); }
.mode.active .mode-key { color:var(--accent); }
.mode strong { display:block; font-size:13px; letter-spacing:.02em; }
.mode small { display:block; color:var(--muted); font-size:11px; margin-top:5px; line-height:1.35; }
.doctrine { margin-top:auto; padding-top:32px; }
.doctrine p { color:var(--muted); margin:8px 0; font-size:11px; }
.clear { margin-top:28px; color:var(--dim); border:1px solid var(--line); background:transparent; padding:10px; font:600 9px/1 ui-monospace, monospace; letter-spacing:.12em; cursor:pointer; }
.clear:hover { color:var(--text); border-color:var(--line-strong); }
.panel { position:relative; min-height:calc(100vh - 92px); display:flex; flex-direction:column; padding:0 0 0 54px; }
.empty-state { margin:auto 0; max-width:730px; padding-bottom:110px; }
.eyebrow { color:var(--accent); margin-bottom:22px; }
h1 { font-size:clamp(42px, 6vw, 78px); line-height:.98; letter-spacing:-.055em; margin:0; font-weight:700; max-width:720px; }
.empty-state p { max-width:610px; color:var(--muted); font-size:16px; line-height:1.7; margin-top:24px; }
.messages { width:min(920px, 100%); margin:0 auto; padding:48px 0 190px; display:none; }
.message { display:grid; grid-template-columns:92px minmax(0,1fr); gap:22px; padding:22px 0; border-bottom:1px solid var(--line); }
.message .role { font:600 9px/1.5 ui-monospace, monospace; letter-spacing:.14em; color:var(--dim); padding-top:5px; }
.message.son .role { color:var(--accent); }
.message .content { white-space:pre-wrap; font-size:15px; line-height:1.68; color:#dbe0e5; }
.message.user .content { color:#f1f4f6; }
.typing { color:var(--muted); }
.composer { position:fixed; bottom:26px; width:min(920px, calc(100vw - 370px)); left:calc(50% + 107px); transform:translateX(-50%); background:rgba(12,16,22,.94); border:1px solid var(--line-strong); box-shadow:0 24px 80px rgba(0,0,0,.35); backdrop-filter:blur(18px); }
.composer:focus-within { border-color:rgba(200,255,98,.28); }
textarea { width:100%; resize:none; border:0; outline:0; color:var(--text); background:transparent; padding:19px 20px 12px; min-height:58px; max-height:180px; font:14px/1.55 inherit; }
textarea::placeholder { color:#69727d; }
.composer-footer { display:flex; align-items:center; justify-content:space-between; padding:8px 9px 9px 20px; border-top:1px solid var(--line); }
#modeLabel { color:var(--dim); }
#sendBtn { border:0; background:var(--accent); color:#0a0d10; font:800 10px/1 ui-monospace, monospace; letter-spacing:.12em; padding:12px 14px; cursor:pointer; }
#sendBtn:disabled { opacity:.45; cursor:default; }
#sendBtn span { margin-left:6px; }
@media (max-width: 800px) {
  .shell { width:min(100% - 24px, 720px); }
  .topbar { height:74px; }
  .subbrand { display:none; }
  .workspace { display:block; min-height:calc(100vh - 74px); }
  .rail { border-right:0; border-bottom:1px solid var(--line); padding:14px 0; display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }
  .rail > .rail-label, .doctrine, .clear { display:none; }
  .mode { border:1px solid var(--line); padding:11px 9px; display:block; }
  .mode-key, .mode small { display:none; }
  .mode strong { text-align:center; font-size:11px; }
  .panel { padding:0; min-height:calc(100vh - 150px); }
  .empty-state { padding:56px 4px 150px; margin:0; }
  h1 { font-size:48px; }
  .empty-state p { font-size:14px; }
  .messages { padding:24px 4px 170px; }
  .message { grid-template-columns:62px 1fr; gap:10px; }
  .composer { width:calc(100vw - 24px); left:12px; transform:none; bottom:12px; }
}