:root {
  color-scheme: dark;
  --bg: #07100d;
  --panel: rgba(15, 28, 23, 0.82);
  --line: rgba(194, 232, 211, 0.13);
  --text: #f3f7f4;
  --muted: #98aaa1;
  --saffron: #ffb45a;
  --green: #70d39c;
  --green-bright: #a8f0c5;
  --danger: #ff8e83;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
body {
  margin: 0; min-height: 100vh; overflow-x: hidden; color: var(--text);
  background: radial-gradient(circle at 50% -10%, rgba(26, 92, 62, .32), transparent 38%), var(--bg);
}
button, input, textarea, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
.ambient { position: fixed; z-index: -1; width: 28rem; height: 28rem; border-radius: 50%; filter: blur(100px); opacity: .12; pointer-events: none; }
.ambient-one { background: var(--saffron); top: 15%; left: -18rem; }
.ambient-two { background: var(--green); right: -16rem; bottom: 0; }

.shell { width: min(1180px, calc(100% - 2rem)); margin: 0 auto; padding: 4.5rem 0 2rem; }
.hero { text-align: center; max-width: 840px; margin: 0 auto 3rem; }
.eyebrow { display: inline-flex; align-items: center; gap: .55rem; color: var(--green-bright); text-decoration: none; text-transform: uppercase; letter-spacing: .12em; font-size: .72rem; font-weight: 750; }
.pulse { width: .48rem; height: .48rem; background: var(--green); border-radius: 50%; box-shadow: 0 0 0 .3rem rgba(112, 211, 156, .12); }
.hero h1 { font-size: clamp(2.7rem, 7vw, 5.4rem); line-height: .98; letter-spacing: -.055em; margin: 1.25rem 0; font-weight: 720; }
.hero p { color: var(--muted); font-size: clamp(1rem, 2vw, 1.18rem); line-height: 1.65; max-width: 700px; margin: 0 auto; }
.stats { display: flex; justify-content: center; flex-wrap: wrap; gap: .7rem; margin-top: 1.75rem; }
.stats span { border: 1px solid var(--line); border-radius: 999px; padding: .48rem .78rem; color: var(--muted); font-size: .78rem; background: rgba(255,255,255,.025); }
.stats strong { color: var(--text); font-weight: 650; }

.workspace { display: grid; grid-template-columns: 310px minmax(0, 1fr); min-height: 720px; border: 1px solid var(--line); border-radius: 1.4rem; overflow: hidden; background: rgba(8, 17, 13, .75); box-shadow: 0 30px 90px rgba(0,0,0,.3); backdrop-filter: blur(20px); }
.settings { padding: 1.4rem; background: var(--panel); border-right: 1px solid var(--line); }
.panel-heading { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.7rem; }
.kicker { color: var(--saffron); text-transform: uppercase; letter-spacing: .12em; font-size: .65rem; font-weight: 800; }
.panel-heading h2 { font-size: 1.15rem; margin: .22rem 0 0; }
.icon-button { color: var(--muted); background: transparent; border: 1px solid var(--line); border-radius: .65rem; width: 2.15rem; height: 2.15rem; cursor: pointer; }
.icon-button:hover { color: var(--text); border-color: rgba(194,232,211,.3); }
label { display: block; font-size: .78rem; color: #c7d4cd; margin: 1.1rem 0 .45rem; font-weight: 650; }
input[type="password"], input[type="text"], textarea, select { width: 100%; color: var(--text); background: rgba(3, 10, 7, .65); border: 1px solid var(--line); border-radius: .75rem; padding: .75rem .82rem; outline: none; transition: border-color .18s, box-shadow .18s; }
textarea { resize: vertical; line-height: 1.45; }
input:focus, textarea:focus, select:focus { border-color: rgba(112,211,156,.55); box-shadow: 0 0 0 3px rgba(112,211,156,.08); }
.key-wrap { position: relative; }
.key-wrap input { padding-right: 3.8rem; }
.key-wrap button { position: absolute; right: .45rem; top: 50%; transform: translateY(-50%); background: transparent; border: 0; color: var(--green); cursor: pointer; font-size: .73rem; }
.field-note { margin: .4rem 0 0; color: var(--muted); font-size: .68rem; line-height: 1.4; }
.slider-heading { display: flex; align-items: center; justify-content: space-between; margin-top: 1.1rem; }
.slider-heading label { margin: 0; }
.slider-heading output { color: var(--green-bright); font: 650 .74rem ui-monospace, monospace; }
input[type="range"] { width: 100%; accent-color: var(--green); margin-top: .65rem; }
.key-link { display: inline-block; color: var(--green); font-size: .77rem; text-decoration: none; margin-top: 1.55rem; }

.chat-panel { display: grid; grid-template-rows: 1fr auto auto; min-width: 0; position: relative; }
.empty-state { align-self: center; justify-self: center; text-align: center; padding: 2rem; max-width: 640px; }
.empty-state.hidden { display: none; }
.chakra { width: 3.25rem; height: 3.25rem; display: grid; place-items: center; margin: 0 auto 1rem; border: 1px solid rgba(255,180,90,.35); color: var(--saffron); border-radius: 50%; background: rgba(255,180,90,.06); font-size: 1.25rem; }
.empty-state h2 { margin: 0; font-size: 1.45rem; }
.empty-state p { color: var(--muted); margin: .5rem 0 1.5rem; }
.examples { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; }
.examples button { color: #cbd8d1; background: rgba(255,255,255,.025); border: 1px solid var(--line); border-radius: .75rem; padding: .8rem; cursor: pointer; text-align: left; font-size: .78rem; }
.examples button:hover { color: var(--text); background: rgba(112,211,156,.06); border-color: rgba(112,211,156,.3); }
.messages { padding: 1.5rem clamp(1rem, 4vw, 3rem); overflow-y: auto; display: none; flex-direction: column; gap: 1rem; }
.messages.active { display: flex; }
.message { max-width: min(82%, 680px); padding: .9rem 1rem; border-radius: 1rem; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; font-size: .92rem; }
.message.user { align-self: flex-end; background: #214d39; border-bottom-right-radius: .3rem; }
.message.assistant { align-self: flex-start; background: rgba(255,255,255,.055); border: 1px solid var(--line); border-bottom-left-radius: .3rem; }
.message.error { color: #ffd0cb; border-color: rgba(255,142,131,.26); background: rgba(255,142,131,.08); }
.message.streaming::after { content: ""; display: inline-block; width: .45rem; height: 1rem; margin-left: .3rem; background: var(--green); vertical-align: -.15rem; animation: blink .8s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.composer { margin: 1rem clamp(1rem, 4vw, 3rem) .6rem; display: flex; align-items: flex-end; gap: .55rem; padding: .55rem; border: 1px solid var(--line); border-radius: 1rem; background: rgba(4, 11, 8, .78); }
.composer textarea { min-height: 2.8rem; max-height: 10rem; resize: none; border: 0; background: transparent; box-shadow: none; }
.send-button, .stop-button { flex: 0 0 auto; height: 2.55rem; min-width: 2.55rem; border: 0; border-radius: .72rem; cursor: pointer; font-weight: 800; }
.send-button { background: var(--green); color: #062013; font-size: 1.15rem; }
.send-button:disabled { opacity: .35; cursor: not-allowed; }
.stop-button { color: #2c0b08; background: var(--danger); padding: 0 .8rem; }
.hidden { display: none !important; }
.status { min-height: 1.2rem; color: var(--muted); font-size: .68rem; text-align: center; margin: 0 1rem 1rem; }
.status.error { color: var(--danger); }
footer { display: flex; justify-content: space-between; color: var(--muted); font-size: .72rem; padding: 1.3rem .25rem 0; }
footer a { color: var(--green); text-decoration: none; }

@media (max-width: 820px) {
  .shell { padding-top: 2.5rem; }
  .workspace { grid-template-columns: 1fr; }
  .settings { border-right: 0; border-bottom: 1px solid var(--line); }
  .chat-panel { min-height: 650px; }
}
@media (max-width: 540px) {
  .shell { width: min(100% - 1rem, 1180px); }
  .hero h1 { font-size: 2.75rem; }
  .stats { gap: .4rem; }
  .examples { grid-template-columns: 1fr; }
  .message { max-width: 94%; }
  footer { flex-direction: column; gap: .5rem; }
}