:root {
  color-scheme: dark;
  --bg: #07090b;
  --panel: #0f1216;
  --panel-2: #15191e;
  --line: rgba(255,255,255,.12);
  --text: #f3f1ea;
  --muted: #9da2a8;
  --gold: #c9a667;
  --red: #cf3e35;
  --green: #60b98a;
  font-family: Inter, "Segoe UI", Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body {
  margin: 0;
  background:
    radial-gradient(circle at 78% 12%, rgba(201,166,103,.11), transparent 34rem),
    linear-gradient(150deg, #0d1013, var(--bg) 58%);
  color: var(--text);
}
button, input, textarea { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: wait; opacity: .62; }

.shell { min-height: 100vh; display: grid; grid-template-rows: auto 1fr; }
.brandbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: 18px clamp(20px, 4vw, 68px);
  border-bottom: 1px solid var(--line);
  background: rgba(7,9,11,.82);
  backdrop-filter: blur(20px);
}
.brand { color: inherit; display: flex; align-items: center; gap: 12px; text-decoration: none; }
.brand-mark {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--gold);
  color: var(--gold);
  font-weight: 800;
  letter-spacing: -.08em;
}
.brand strong, .brand small { display: block; }
.brand strong { font-size: 14px; letter-spacing: .04em; }
.brand small { margin-top: 4px; color: var(--muted); font-size: 10px; letter-spacing: .11em; text-transform: uppercase; }
.status { display: flex; gap: 9px; align-items: center; color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .09em; }
.status i { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 12px var(--green); }

.login-view {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, 480px);
  gap: clamp(40px, 8vw, 130px);
  align-items: center;
  width: min(1240px, calc(100% - 40px));
  margin: 0 auto;
  padding: 70px 0;
}
.eyebrow { color: var(--gold); font: 700 11px/1.2 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .16em; }
.login-copy h1 { max-width: 760px; margin: 18px 0 24px; font-size: clamp(42px, 6.5vw, 92px); line-height: .96; letter-spacing: -.055em; }
.login-copy > p:not(.eyebrow) { max-width: 690px; color: #c2c5c8; font-size: 18px; line-height: 1.65; }
dl { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-top: 46px; background: var(--line); border: 1px solid var(--line); }
dl div { min-width: 0; padding: 18px; background: rgba(12,15,18,.94); }
dt { color: var(--muted); font: 700 10px/1.2 ui-monospace, monospace; letter-spacing: .14em; }
dd { margin: 9px 0 0; font-size: 13px; line-height: 1.45; overflow-wrap: anywhere; }

.login-card { padding: clamp(28px, 4vw, 48px); border: 1px solid var(--line); background: rgba(15,18,22,.92); box-shadow: 0 28px 80px rgba(0,0,0,.38); }
.login-card h2 { margin: 10px 0 32px; font-size: 28px; }
label { display: grid; gap: 9px; margin-bottom: 18px; color: #d8d9da; font-size: 13px; }
input, textarea {
  width: 100%;
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 0;
  outline: none;
  background: #090b0e;
}
input { height: 50px; padding: 0 14px; }
textarea { resize: none; min-height: 64px; max-height: 220px; padding: 15px 16px; line-height: 1.5; }
input:focus, textarea:focus { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); }
.primary, .secondary {
  min-height: 48px;
  border: 1px solid transparent;
  padding: 0 20px;
  font-weight: 750;
  letter-spacing: .035em;
}
.primary { background: var(--gold); color: #101010; }
.secondary { width: 100%; border-color: var(--line); background: transparent; color: var(--text); }
.login-card .primary { width: 100%; margin-top: 6px; }
.login-card small { display: block; margin-top: 18px; color: var(--muted); line-height: 1.5; }
.form-error { color: #ff887f; font-size: 13px; line-height: 1.4; }

.chat-view { min-height: 0; display: grid; grid-template-columns: 280px 1fr; }
.chat-view[hidden], .login-view[hidden] { display: none; }
.chat-aside { padding: 34px 28px; border-right: 1px solid var(--line); background: rgba(10,12,15,.78); display: flex; flex-direction: column; }
.chat-aside h2 { margin: 8px 0 5px; font-size: 22px; }
.model-name { margin: 0 0 28px; color: var(--muted); font: 12px ui-monospace, monospace; }
.aside-note { margin-top: auto; padding-top: 26px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; line-height: 1.55; }
.aside-note strong { color: var(--text); }
.text-button { margin-top: 18px; padding: 10px 0; border: 0; color: var(--muted); background: none; text-align: left; }
.chat-main { min-width: 0; min-height: calc(100vh - 79px); display: grid; grid-template-rows: 1fr auto; }
.messages { min-height: 0; overflow-y: auto; padding: 50px clamp(22px, 7vw, 120px) 30px; }
.message { width: min(820px, 100%); margin: 0 auto 28px; }
.message > span { display: block; margin-bottom: 9px; color: var(--gold); font: 700 10px ui-monospace, monospace; letter-spacing: .12em; text-transform: uppercase; }
.message.user > span { color: var(--muted); }
.message p { margin: 0; color: #e0e1e2; font-size: 16px; line-height: 1.68; white-space: pre-wrap; overflow-wrap: anywhere; }
.message.user { padding-left: min(11vw, 110px); }
.composer { padding: 18px clamp(22px, 7vw, 120px) 26px; border-top: 1px solid var(--line); background: rgba(7,9,11,.9); }
.composer > * { width: min(820px, 100%); margin-left: auto; margin-right: auto; }
.composer-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 10px; }
.composer-row span { color: var(--muted); font: 11px ui-monospace, monospace; }
.composer-row .primary { width: auto; min-width: 150px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }

@media (max-width: 850px) {
  .brandbar { align-items: flex-start; }
  .status span { display: none; }
  .login-view { grid-template-columns: 1fr; padding: 48px 0; }
  .login-copy h1 { font-size: clamp(42px, 13vw, 66px); }
  dl { grid-template-columns: 1fr; }
  .chat-view { grid-template-columns: 1fr; }
  .chat-aside { padding: 18px 20px; border-right: 0; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px; }
  .chat-aside .eyebrow, .chat-aside .model-name, .aside-note, .text-button { display: none; }
  .chat-aside h2 { margin: 0; font-size: 16px; }
  .chat-aside .secondary { width: auto; min-height: 40px; }
  .chat-main { min-height: calc(100vh - 148px); }
  .messages { padding-top: 28px; }
  .message.user { padding-left: 28px; }
}