:root {
  color-scheme: light;
  --paper: #f7f6f1;
  --paper-deep: #efeee7;
  --ink: #242721;
  --soft-ink: #5f695e;
  --quiet: #9aa198;
  --line: #dfded5;
  --line-strong: #d3d0c5;
  --sage: #718071;
  --sage-deep: #536557;
  --olive: #818d78;
  --cream: #fbfaf6;
  --shadow: 0 13px 35px rgba(51, 57, 43, .08);
  --serif: Georgia, "Times New Roman", serif;
  --sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, monospace;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #171b19;
  --paper-deep: #202621;
  --ink: #eef0e6;
  --soft-ink: #b9c0b5;
  --quiet: #7f8b80;
  --line: #343d35;
  --line-strong: #4a564a;
  --sage: #b5c3a8;
  --sage-deep: #d2dec8;
  --cream: #202720;
  --shadow: 0 13px 35px rgba(0, 0, 0, .2);
}

* { box-sizing: border-box; }
html, body { min-width: 320px; min-height: 100%; }
body {
  background:
    radial-gradient(circle at 78% 14%, rgba(143, 158, 126, .11), transparent 22%),
    radial-gradient(circle at 46% 70%, rgba(211, 207, 187, .16), transparent 28%),
    var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  margin: 0;
}
body::before {
  background-image: radial-gradient(rgba(113, 128, 113, .16) 1px, transparent 1px);
  background-size: 120px 120px;
  content: "";
  inset: 0;
  opacity: .23;
  pointer-events: none;
  position: fixed;
}
:root[data-theme="dark"] body::before { opacity: .12; }
button, input, textarea { color: inherit; font: inherit; }
button { cursor: pointer; }
a { color: inherit; }

.app-shell { display: grid; grid-template-columns: 248px minmax(0, 1fr) 275px; min-height: 100vh; position: relative; }
.sidebar { border-right: 1px solid var(--line); display: flex; flex-direction: column; min-height: 100vh; padding: 22px 14px 17px; }
.sidebar-backdrop, .mobile-menu { display: none; }
.sidebar-brand { align-items: center; display: flex; gap: 12px; padding: 0 8px 21px; }
.sidebar-brand img { height: 45px; object-fit: contain; object-position: center; width: 59px; }
.brand-copy { display: grid; gap: 5px; }
.brand-name { font: 600 16px/1 var(--serif); letter-spacing: .1em; white-space: nowrap; }
.brand-subtitle { color: var(--soft-ink); font: 600 10px/1 var(--sans); letter-spacing: .19em; text-transform: uppercase; }
.sidebar-rule { border-top: 1px solid var(--line); margin: 0 -14px 18px; }
.new-thought { align-items: center; background: var(--cream); border: 1px solid var(--line); border-radius: 30px; box-shadow: 0 3px 8px rgba(45, 49, 40, .05); display: flex; font-weight: 650; gap: 12px; justify-content: center; margin: 0 0 35px; padding: 12px 15px; transition: border-color .2s, transform .2s; }
.new-thought:hover { border-color: var(--sage); transform: translateY(-1px); }
.plus { font-size: 21px; font-weight: 400; line-height: .7; }
.side-label { color: var(--sage); font: 600 11px var(--sans); letter-spacing: .16em; margin: 0 0 11px; text-transform: uppercase; }
.thought-list { display: grid; gap: 4px; }
.thought-item { background: transparent; border: 0; border-radius: 8px; color: var(--soft-ink); font-size: 14px; overflow: hidden; padding: 11px 12px; text-align: left; text-overflow: ellipsis; white-space: nowrap; }
.thought-item:hover, .thought-item.active { background: rgba(255, 255, 255, .72); color: var(--ink); }
.history-label { margin-top: 44px; }
.history-list { display: grid; gap: 4px; }
.history-item { background: transparent; border: 0; border-radius: 8px; color: var(--soft-ink); font-size: 13px; overflow: hidden; padding: 10px 12px; text-align: left; text-overflow: ellipsis; white-space: nowrap; }
.history-item:hover, .history-item.active { background: rgba(255, 255, 255, .72); color: var(--ink); }
.empty-history { color: var(--quiet); font: 13px/1.5 var(--serif); padding: 7px 12px; }
.theme-toggle { align-items: center; background: transparent; border: 0; color: var(--soft-ink); display: flex; gap: 12px; margin-top: auto; padding: 12px; text-align: left; }
.theme-toggle:hover { color: var(--ink); }
.sign-out { background: transparent; border: 0; color: var(--soft-ink); cursor: pointer; font: inherit; padding: 8px 12px; text-align: left; }
.sign-out:hover { color: var(--ink); }

.workspace { display: flex; flex-direction: column; min-width: 0; padding: 27px clamp(24px, 4vw, 70px) 26px; }
.workspace-top { align-items: center; display: flex; justify-content: space-between; margin: 0 auto; max-width: 880px; width: 100%; }
.workspace-top .mobile-menu { color: var(--soft-ink); }
.network-status { background: rgba(160, 124, 68, .1); border: 1px solid rgba(160, 124, 68, .24); border-radius: 6px; color: #80653d; display: none; font: 11px/1.45 var(--mono); margin: 13px auto 0; max-width: 880px; padding: 9px 12px; width: 100%; }
.network-status.visible { display: block; }
.workspace-mode { color: var(--sage); font: 600 10px var(--mono); letter-spacing: .16em; text-transform: uppercase; }
.command-link { color: var(--quiet); font: 10px var(--mono); text-decoration: none; text-transform: uppercase; }
.command-link:hover { color: var(--sage-deep); }
.content { display: flex; flex: 1; flex-direction: column; justify-content: center; margin: 0 auto; max-width: 880px; padding: 40px 0 34px; width: 100%; }
.eyebrow { color: var(--sage); font: 600 11px var(--sans); letter-spacing: .2em; margin: 0 0 19px; text-transform: uppercase; }
h1 { font: 400 clamp(43px, 6vw, 72px)/.98 var(--serif); letter-spacing: -.055em; margin: 0 0 21px; max-width: 700px; }
.intro { color: var(--soft-ink); font: 17px/1.65 var(--serif); margin: 0 0 36px; max-width: 585px; }
.starter-grid { display: grid; gap: 11px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 23px; max-width: 780px; }
.starter-toolbar { align-items: center; color: var(--quiet); display: flex; font: 11px var(--mono); justify-content: space-between; margin: 0 0 10px; max-width: 780px; }
.shuffle { background: transparent; border: 0; color: var(--sage-deep); font: 11px var(--mono); padding: 5px 0; }
.shuffle:hover { text-decoration: underline; }
.starter { background: rgba(255, 255, 255, .61); border: 1px solid var(--line); border-radius: 4px; min-height: 95px; padding: 17px 18px; text-align: left; transition: background .2s, border-color .2s, transform .2s; }
.starter:hover { background: var(--cream); border-color: var(--sage); transform: translateY(-2px); }
.starter small { color: var(--sage); display: block; font: 600 10px var(--mono); letter-spacing: .08em; margin-bottom: 14px; }
.starter span { display: block; font: 17px/1.3 var(--serif); }

.composer { background: rgba(255, 255, 255, .72); border: 1px solid var(--line-strong); border-radius: 17px; box-shadow: var(--shadow); display: flex; gap: 13px; padding: 12px 14px 12px 20px; }
.composer:focus-within { border-color: var(--sage); box-shadow: 0 14px 38px rgba(77, 93, 73, .12); }
.composer textarea { background: transparent; border: 0; flex: 1; line-height: 1.5; min-height: 48px; outline: 0; padding: 10px 0; resize: none; }
.composer textarea::placeholder { color: #a6aba3; font: italic 16px var(--serif); }
.send { align-self: flex-end; background: var(--sage); border: 0; border-radius: 20px; color: #fff; font-size: 13px; font-weight: 650; min-width: 88px; padding: 11px 17px; transition: background .2s, opacity .2s; }
.send:hover { background: var(--sage-deep); }
.send:disabled { cursor: wait; opacity: .55; }
.composer-hint { color: var(--quiet); font: 10px var(--mono); margin: 11px 3px 0; }
.draft-note { color: var(--sage); font: 10px var(--mono); margin: 9px 3px 0; }
.error { color: #a44f4f; font-size: 13px; line-height: 1.5; margin: 14px 3px 0; }
.sr-only { height: 1px; margin: -1px; overflow: hidden; position: absolute; width: 1px; clip: rect(0, 0, 0, 0); }
.notice-meta { color: var(--quiet) !important; font: 10px var(--mono) !important; letter-spacing: .06em; text-transform: uppercase; }

.chat-screen { display: flex; flex: 1; flex-direction: column; margin: 0 auto; max-width: 880px; padding: 37px 0 0; width: 100%; }
.chat-heading { align-items: baseline; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; margin-bottom: 20px; padding-bottom: 14px; }
.chat-heading h2 { font: 400 27px var(--serif); letter-spacing: -.035em; margin: 0; }
.session-state { color: var(--sage); font: 10px var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.messages { display: flex; flex: 1; flex-direction: column; gap: 20px; min-height: 0; overflow-y: auto; padding: 4px 10px 24px 0; }
.message { line-height: 1.7; max-width: 88%; white-space: pre-wrap; }
.message.user { align-self: flex-end; border-left: 2px solid var(--line-strong); padding: 0 0 0 17px; }
.message.assistant { align-self: flex-start; background: rgba(255, 255, 255, .69); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 8px 24px rgba(49, 56, 43, .055); max-width: min(760px, 100%); padding: 23px 26px; width: 100%; }
:root[data-theme="dark"] .message.assistant, :root[data-theme="dark"] .insight-card, :root[data-theme="dark"] .verify, :root[data-theme="dark"] .composer { background: rgba(31, 39, 32, .82); }
.message-label { color: var(--sage); display: block; font: 600 10px var(--sans); letter-spacing: .18em; margin-bottom: 10px; text-transform: uppercase; }
.message.user .message-label { color: var(--soft-ink); }
.message.assistant .message-label { border-bottom: 1px solid var(--line); padding-bottom: 12px; }
.message.assistant { font: 17px/1.7 var(--serif); }
.message.assistant::first-line { font-weight: 600; }
.message-content ul { margin: 8px 0; padding-left: 22px; }
.message-actions { border-top: 1px solid var(--line); margin-top: 15px; padding-top: 10px; }
.message-actions button { background: transparent; border: 0; color: var(--quiet); font: 10px var(--mono); padding: 0; }
.message-actions button:hover { color: var(--sage-deep); }
.pending { opacity: .78; }
.thinking { color: var(--soft-ink); font-style: italic; }
.thinking span { animation: thinking 1.1s infinite; display: inline-block; }
.response-error { align-items: center; background: rgba(164, 79, 79, .06); border: 1px solid rgba(164, 79, 79, .2); border-radius: 8px; color: #8b4c4c; display: flex; font: 13px var(--sans); gap: 14px; justify-content: space-between; margin: 0 0 12px; padding: 12px 15px; }
.response-error button { background: transparent; border: 1px solid currentColor; border-radius: 4px; color: inherit; font-size: 11px; padding: 6px 9px; }
@keyframes thinking { 0%, 100% { opacity: .2; } 50% { opacity: 1; } }
.chat-screen .composer { margin-top: auto; }
.empty-chat { color: var(--soft-ink); font: 18px/1.55 var(--serif); margin: auto 0; }

.right-rail { border-left: 1px solid var(--line); display: flex; flex-direction: column; min-height: 100vh; padding: 27px 23px; }
.logo-watermark { align-items: center; display: flex; justify-content: center; margin: 19px 0 33px; opacity: .86; overflow: hidden; }
.logo-watermark img { height: 122px; max-width: 190px; object-fit: contain; width: 100%; }
.insight-card { background: rgba(255, 255, 255, .65); border: 1px solid var(--line); border-radius: 13px; box-shadow: var(--shadow); margin-top: 10px; padding: 19px 20px 23px; }
.insight-card h3 { border-bottom: 1px solid var(--line); font: 600 10px var(--sans); letter-spacing: .15em; margin: 0 0 18px; padding-bottom: 13px; text-transform: uppercase; }
.insight-kicker { color: var(--sage); font: 600 10px var(--sans); letter-spacing: .14em; text-transform: uppercase; }
.insight-title { font: 24px/1.15 var(--serif); margin: 8px 0 12px; }
.insight-copy { color: var(--soft-ink); font: 15px/1.55 var(--serif); margin: 0; }
.method-list { border-top: 1px solid var(--line); display: grid; gap: 9px; margin-top: 20px; padding-top: 15px; }
.method-list span { color: var(--soft-ink); font: 11px/1.45 var(--mono); }
.privacy-note { color: var(--quiet); font: 10px/1.5 var(--mono); margin-top: auto; }

.verify-wrap { align-items: center; display: flex; flex: 1; justify-content: center; }
.verify { background: rgba(255, 255, 255, .72); border: 1px solid var(--line); border-radius: 13px; box-shadow: var(--shadow); max-width: 570px; padding: 30px; width: 100%; }
.verify h2 { font: 400 31px var(--serif); letter-spacing: -.04em; margin: 0 0 13px; }
.verify p { color: var(--soft-ink); font: 16px/1.65 var(--serif); }
.form-row { display: flex; gap: 9px; margin-top: 23px; }
.form-row input { background: var(--cream); border: 1px solid var(--line-strong); border-radius: 6px; flex: 1; min-width: 0; outline: 0; padding: 13px; }
.form-row input:focus { border-color: var(--sage); }
.action { background: var(--sage); border: 0; border-radius: 6px; color: #fff; padding: 12px 18px; }

.footer { color: var(--quiet); font: 9px var(--mono); letter-spacing: .08em; margin: 0 auto; max-width: 880px; padding-top: 16px; text-transform: uppercase; width: 100%; }
@media (max-width: 1120px) { .app-shell { grid-template-columns: 220px minmax(0, 1fr); } .right-rail { display: none; } }
@media (max-width: 700px) { .app-shell { display: block; } .sidebar { background: var(--paper); box-shadow: 12px 0 30px rgba(30, 37, 29, .16); left: -280px; min-height: 100vh; position: fixed; top: 0; transition: left .2s ease; width: 260px; z-index: 5; } .sidebar.mobile-open { left: 0; } .sidebar-backdrop { background: rgba(24, 29, 24, .25); border: 0; inset: 0; position: fixed; z-index: 4; } .sidebar-backdrop.visible { display: block; } .sidebar.mobile-open + .workspace .mobile-menu { display: none; } .mobile-menu { background: transparent; border: 0; display: inline-block; font-size: 18px; margin-right: 10px; padding: 0; } .sidebar-rule, .new-thought, .side-label, .thought-list, .empty-history, .theme-toggle { display: none; } .sidebar-brand { padding-bottom: 0; } .workspace { min-height: 100vh; padding: 20px 18px; } .starter-grid { grid-template-columns: 1fr; } .starter-toolbar { align-items: flex-start; gap: 8px; } .content { padding-top: 28px; } .right-rail { display: none; } .message.assistant { padding: 18px; } .form-row { flex-direction: column; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; scroll-behavior: auto !important; transition-duration: .01ms !important; } }