:root {
  color-scheme:dark;
  --bg:#202127;
  --panel:#18191f;
  --surface:#2b2d35;
  --input:#24262e;
  --text:#f0f0f6;
  --muted:#a4a6b5;
  --line:#383a46;
  --accent:#a799ff;
  --accent-ink:#14121c;
  --danger:#ffa7b0;
  --shadow:0 16px 50px #0002;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

:root[data-theme=light] {
  color-scheme:light;
  --bg:#faf9fe;
  --panel:#f0eef7;
  --surface:#fff;
  --input:#fff;
  --text:#252239;
  --muted:#68647c;
  --line:#dcd8e9;
  --accent:#6853c9;
  --accent-ink:#fff;
  --danger:#a22540;
}

:root[data-theme=grey] {
  color-scheme:dark;
  --bg:#303236;
  --panel:#282a2e;
  --surface:#3c3e43;
  --input:#383a3f;
  --text:#fafafa;
  --muted:#b8bbc4;
  --line:#51545b;
}

:root[data-theme=oled] {
  --bg:#000;
  --panel:#080808;
  --surface:#121212;
  --input:#0c0c0c;
  --line:#303030;
  --text:#f5f5fa;
  --muted:#aaaab8;
}

* {
  box-sizing:border-box;
}

body {
  margin:0;
  background:var(--bg);
  color:var(--text);
}

button,input,textarea,select {
  font:inherit;
}

button,a,input,textarea,select,summary {
  -webkit-tap-highlight-color:transparent;
}

button {
  cursor:pointer;
}

button:disabled {
  opacity:.45;
  cursor:not-allowed;
}

button,input,textarea,select {
  border-radius:10px;
}

button {
  color:var(--text);
  border:1px solid var(--line);
  background:var(--surface);
  padding:11px 14px;
  transition:background .15s,transform .15s;
}

button:hover:not(:disabled) {
  filter:brightness(1.12);
}

button:active:not(:disabled) {
  transform:translateY(1px);
}

:focus-visible {
  outline:2px solid var(--accent);
  outline-offset:4px;
}

input,textarea,select {
  width:100%;
  padding:11px 12px;
  background:var(--input);
  border:1px solid var(--line);
  color:var(--text);
  min-width:0;
}

textarea {
  resize:vertical;
  line-height:1.6;
}

label {
  display:block;
  font-size:12px;
  font-weight:650;
  margin:16px 0 8px;
}

input::placeholder,textarea::placeholder {
  color:var(--muted);
}

[hidden] {
  display:none!important;
}

.app-shell {
  display:grid;
  grid-template-columns:292px minmax(0,1fr);
  height:100dvh;
  min-height:480px;
}

.sidebar {
  background:var(--panel);
  padding:30px 22px 20px;
  border-right:1px solid var(--line);
  overflow-y:auto;
  scrollbar-width:thin;
}

.brand {
  display:flex;
  align-items:center;
  gap:0;
  color:var(--text);
  text-decoration:none;
  font-size:25px;
  font-weight:750;
  letter-spacing:-1px;
}

.brand>span:last-child {
  color:var(--accent);
}

.brand-symbol {
  display:grid;
  place-items:center;
  width:36px;
  height:36px;
  border:1px solid var(--accent);
  border-radius:12px;
  color:var(--accent);
  margin-right:11px;
  font-size:26px;
}

.eyebrow {
  color:var(--muted);
  font-size:10px;
  font-weight:700;
  letter-spacing:1.8px;
}

.sidebar>.eyebrow {
  margin:20px 0 25px;
}

.primary {
  width:100%;
  background:var(--accent);
  color:var(--accent-ink);
  border-color:transparent;
  font-weight:700;
}

.prompt-section {
  margin:32px 0 24px;
}

h2 {
  margin:0;
}

.prompt-section h2 {
  font-size:10px;
  color:var(--muted);
  letter-spacing:1.8px;
  margin-bottom:14px;
}

.prompt-button {
  width:100%;
  text-align:left;
  background:transparent;
  border-color:transparent;
  overflow-wrap:anywhere;
}

.prompt-button>span {
  color:var(--accent);
  margin-right:10px;
}

.prompt-button small {
  display:block;
  margin:5px 0 0 26px;
  font-size:11px;
  color:var(--muted);
}

.prompt-button[aria-pressed=true] {
  background:var(--surface);
  border-color:var(--line);
}

.custom-row {
  display:flex;
  gap:5px;
  margin-top:8px;
  align-items:center;
}

.custom-row .prompt-button {
  flex:1;
  min-width:0;
}

.delete-prompt {
  padding:8px;
  background:transparent;
  color:var(--muted);
}

.panel {
  border-top:1px solid var(--line);
  padding:16px 0;
}

.panel summary {
  font-size:13px;
  font-weight:650;
  cursor:pointer;
  list-style:none;
  display:flex;
  justify-content:space-between;
}

.panel summary::-webkit-details-marker {
  display:none;
}

.panel summary span {
  color:var(--muted);
}

.panel[open] summary {
  margin-bottom:15px;
}

.hint {
  font-size:11px;
  color:var(--muted);
  line-height:1.65;
}

.secondary {
  font-size:12px;
  font-weight:650;
}

.panel form>.secondary {
  width:100%;
  margin-top:16px;
}

.key-field {
  display:flex;
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--input);
}

.key-field input {
  border:0;
  background:transparent;
  padding-right:0;
}

.key-field button {
  border:0;
  background:transparent;
  font-size:11px;
  color:var(--accent);
  padding:8px;
}

.danger {
  width:100%;
  font-size:11px;
  color:var(--danger);
  background:transparent;
  margin-top:20px;
}

.sidebar-footer {
  font-size:10px;
  color:var(--muted);
  margin-top:25px;
}

.status-dot {
  display:inline-block;
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--accent);
  margin-right:5px;
}

input[type=color] {
  height:44px;
  padding:5px;
}

.chat-shell {
  display:flex;
  flex-direction:column;
  min-width:0;
  min-height:0;
  position:relative;
}

.chat-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:24px 36px;
  border-bottom:1px solid var(--line);
  gap:16px;
}

.chat-header h1 {
  font-size:16px;
  font-weight:550;
  margin:8px 0 0;
  overflow-wrap:anywhere;
}

.badge {
  font-size:11px;
  border:1px solid var(--line);
  border-radius:30px;
  padding:8px 13px;
  color:var(--muted);
  max-width:40%;
  overflow-wrap:anywhere;
}

.chat-scroll {
  overflow-y:auto;
  flex:1;
  min-height:0;
  padding:32px max(24px,calc((100% - 850px)/2));
  scrollbar-width:thin;
  scroll-padding:25px;
}

.welcome {
  max-width:650px;
  text-align:center;
  margin:clamp(20px,6vh,80px) auto 40px;
}

.orbit {
  width:100px;
  height:100px;
  border:1px solid var(--line);
  border-radius:50%;
  margin:0 auto 30px;
  display:grid;
  place-items:center;
  position:relative;
}

.orbit:before {
  content:"";
  position:absolute;
  inset:12px -15px;
  border:1px solid var(--accent);
  border-radius:50%;
  transform:rotate(-30deg);
  opacity:.4;
}

.orbit span {
  font-size:58px;
  color:var(--accent);
}

.welcome h2 {
  font-size:clamp(30px,4vw,50px);
  font-weight:600;
  letter-spacing:-2px;
  line-height:1.18;
  margin:20px 0;
}

.welcome h2 span {
  color:var(--accent);
}

.welcome>p:not(.eyebrow) {
  font-size:14px;
  color:var(--muted);
  line-height:1.8;
}

.welcome-note {
  display:inline-block;
  font-size:11px;
  padding:12px 16px;
  border:1px solid var(--line);
  border-radius:10px;
  margin-top:16px;
  color:var(--muted);
}

.message {
  margin:0 0 26px;
  max-width:92%;
  width:fit-content;
  min-width:100px;
}

.message.user {
  margin-left:auto;
}

.message-heading {
  display:flex;
  gap:9px;
  align-items:center;
  font-size:11px;
  font-weight:650;
  color:var(--muted);
  margin:0 6px 9px;
}

.user .message-heading {
  justify-content:flex-end;
}

.bubble {
  padding:18px 22px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:4px 18px 18px 18px;
  font-size:14px;
  line-height:1.8;
  overflow-wrap:anywhere;
}

.user .bubble {
  background:var(--accent);
  color:var(--accent-ink);
  border-color:transparent;
  border-radius:18px 4px 18px 18px;
  white-space:pre-wrap;
}

.bubble p {
  margin:0 0 12px;
  white-space:pre-wrap;
}

.bubble p:last-child {
  margin-bottom:0;
}

.bubble h2,.bubble h3,.bubble h4 {
  font-size:1.15em;
  margin:16px 0 8px;
}

.bubble pre {
  white-space:pre;
  overflow-x:auto;
  max-width:100%;
  background:var(--panel);
  padding:16px;
  border-radius:9px;
  line-height:1.55;
}

.bubble code {
  font-family:ui-monospace,SFMono-Regular,Consolas,monospace;
  font-size:.9em;
  background:var(--panel);
  padding:2px 5px;
  border-radius:4px;
}

.bubble pre code {
  padding:0;
  background:none;
}

.bubble ul,.bubble ol {
  padding-left:22px;
}

.bubble blockquote {
  border-left:3px solid var(--accent);
  padding-left:14px;
  margin:12px 0;
  color:var(--muted);
}

.message-state {
  font-size:11px;
  color:var(--muted);
  margin:8px 6px;
}

.loading:after {
  content:" · · ·";
  color:var(--accent);
  animation:pulse 1s ease-in-out infinite;
}

.composer-area {
  padding:12px max(24px,calc((100% - 850px)/2)) 20px;
  position:relative;
}

.status {
  color:var(--muted);
  font-size:11px;
  min-height:17px;
  line-height:1.5;
  margin:0 4px 9px;
}

.status.error {
  color:var(--danger);
}

.composer {
  display:flex;
  align-items:flex-end;
  gap:10px;
  padding:12px;
  background:var(--input);
  border:1px solid var(--line);
  border-radius:18px;
  box-shadow:var(--shadow);
}

.composer:focus-within {
  border-color:var(--accent);
}

.composer textarea {
  border:0;
  background:transparent;
  resize:none;
  max-height:180px;
  padding:9px 4px;
  outline:none;
  flex:1;
  font-size:14px;
}

.send {
  width:42px;
  height:42px;
  background:var(--accent);
  color:var(--accent-ink);
  border:0;
  font-size:25px;
  padding:0;
  flex-shrink:0;
}

.composer-note {
  font-size:10px;
  color:var(--muted);
  display:flex;
  justify-content:space-between;
  gap:12px;
  margin:12px 4px 0;
}

.jump {
  display:block;
  margin:0 auto 10px;
  border-radius:30px;
  font-size:11px;
}

.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

.skip-link {
  position:fixed;
  top:-100px;
  left:20px;
  z-index:10;
  background:var(--accent);
  color:var(--accent-ink);
  padding:12px;
}

.skip-link:focus {
  top:10px;
}

@keyframes pulse {
  50% {
    opacity:.3;
  }
}

@media(prefers-reduced-motion:reduce) {
  * {
    animation:none!important;
    transition:none!important;
  }
}

@media(min-width:1500px) {
  .sidebar {
    padding:34px 26px;
  }
  .app-shell {
    grid-template-columns:310px minmax(0,1fr);
  }
}

@media(max-width:760px) {
  .app-shell {
    display:flex;
    flex-direction:column;
    height:auto;
    min-height:100dvh;
  }
  .sidebar {
    border-right:0;
    border-bottom:1px solid var(--line);
    padding:18px 20px;
    overflow:visible;
  }
  .brand {
    font-size:22px;
  }
  .sidebar>.eyebrow,.sidebar-footer {
    display:none;
  }
  .primary {
    margin-top:18px;
  }
  .prompt-section {
    margin:20px 0 10px;
  }
  .prompt-section h2 {
    margin-bottom:8px;
  }
  .panel {
    padding:14px 0;
  }
  .chat-shell {
    height:85dvh;
    min-height:500px;
  }
  .chat-header {
    padding:20px;
  }
  .chat-scroll {
    padding:25px 16px;
  }
  .composer-area {
    padding:12px 16px max(18px,env(safe-area-inset-bottom));
  }
  .composer-note {
    flex-direction:column;
    gap:5px;
  }
  .bubble {
    padding:15px 17px;
  }
  .message {
    max-width:96%;
  }
  .welcome {
    margin:20px auto;
  }
  .welcome .eyebrow {
    font-size:8px;
  }
  .welcome h2 {
    letter-spacing:-1px;
  }
}