/* ── THEME TOKENS ─────────────────────────────────────────── */
:root {
  --periwinkle:       #9BAEE8;
  --periwinkle-dim:   rgba(155,174,232,0.10);
  --periwinkle-muted: rgba(155,174,232,0.35);
  --sage:             #85B5A0;
  --sage-dim:         rgba(133,181,160,0.12);
  --sage-muted:       rgba(133,181,160,0.38);
  --blush:            #C9889A;
}

[data-theme="dark"] {
  --bg:        #0f1117;
  --surface:   #141720;
  --surface-2: #1b1f2e;
  --border:    #252a3a;
  --border-subtle: #1e2230;
  --text:      #e8eaf2;
  --text-mute: #6b7090;
  --text-faint:#32384f;
  --input-bg:  #141720;
  --modal-bg:  #141720;
}
[data-theme="light"] {
  --bg:        #f5f6fa;
  --surface:   #ffffff;
  --surface-2: #eef0f8;
  --border:    #d8dbed;
  --border-subtle: #e5e7f4;
  --text:      #111827;
  --text-mute: #5c6480;
  --text-faint:#b0b5cc;
  --input-bg:  #ffffff;
  --modal-bg:  #ffffff;
}

/* ── BASE ─────────────────────────────────────────────────── */
*, *::before, *::after { scrollbar-width: thin; scrollbar-color: var(--border) transparent; box-sizing: border-box; }
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', sans-serif;
  transition: background .2s, color .2s;
}
.mono { font-family: 'JetBrains Mono', monospace; }

/* ── ANIMATIONS ───────────────────────────────────────────── */
@keyframes fadeUp { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:translateY(0)} }
.bubble-in { animation: fadeUp .18s cubic-bezier(.2,.7,.3,1) both; }

@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }
.cursor-blink { animation: blink 1.1s step-end infinite; }

@keyframes dotPulse { 0%,80%,100%{opacity:.2;transform:scale(.75)} 40%{opacity:1;transform:scale(1)} }
.dot { animation: dotPulse 1.3s infinite; display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--text-mute); }
.dot:nth-child(2){animation-delay:.18s}.dot:nth-child(3){animation-delay:.36s}

@keyframes pulse-ring { 0%{transform:scale(1);opacity:.5} 100%{transform:scale(1.5);opacity:0} }
.mic-active .pulse-ring { animation: pulse-ring .9s ease-out infinite; }

/* ── SIDEBAR GRAIN ────────────────────────────────────────── */
[data-theme="dark"] #sidebar {
  background: linear-gradient(180deg, #111520 0%, #0d1018 100%);
}
[data-theme="light"] #sidebar {
  background: #ffffff;
}

/* ── LOGO ─────────────────────────────────────────────────── */
.logo-text { letter-spacing: -0.02em; }
.logo-dot {
  display: inline-block;
  width: 5px; height: 5px;
  background: var(--periwinkle);
  border-radius: 50%;
  margin-left: 2px;
  vertical-align: middle;
  position: relative; top: -1px;
  box-shadow: 0 0 6px var(--periwinkle);
}

/* ── PROSE (bot messages) ─────────────────────────────────── */
.prose-bot { line-height: 1.7; }
.prose-bot code {
  background: var(--surface-2);
  padding:.1em .35em; border-radius:3px;
  font-family:'JetBrains Mono',monospace;
  font-size:.8em;
  color: var(--periwinkle);
}
.prose-bot pre {
  background: var(--surface-2);
  border:1px solid var(--border);
  border-radius:6px; padding:.75em 1em;
  overflow-x:auto; margin:.5em 0;
}
.prose-bot pre code { background:none; padding:0; color: var(--text); }
.prose-bot a { color: var(--periwinkle); text-decoration:underline; text-underline-offset:2px; text-decoration-color: var(--periwinkle-muted); }
.prose-bot p { margin:0 0 .35em; }
.prose-bot p:last-child { margin-bottom: 0; }
.prose-bot strong { font-weight:600; }
.prose-bot ul, .prose-bot ol { padding-left: 1.25em; margin: .35em 0; }
.prose-bot li { margin: .15em 0; }

/* ── BOT BUBBLE ───────────────────────────────────────────── */
.bot-bubble {
  background: var(--surface-2);
  color: var(--text);
  border-radius: 14px 14px 14px 3px;
  padding: 9px 14px;
  font-size: .875rem;
  line-height: 1.55;
  word-break: break-words;
}
[data-theme="dark"] .bot-bubble {
  background: var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--border);
}
[data-theme="light"] .bot-bubble {
  background: var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--border);
}

/* ── USER BUBBLE ──────────────────────────────────────────── */
.user-bubble {
  background: var(--sage);
  color: #0e1a14;
  border-radius: 14px 14px 3px 14px;
  padding: 9px 14px;
  font-size: .875rem;
  line-height: 1.55;
  word-break: break-words;
  font-weight: 500;
  box-shadow: 0 2px 16px var(--sage-dim);
}
[data-theme="light"] .user-bubble {
  background: var(--sage);
  color: #0e1a14;
}

/* ── MSG ACTIONS ─────────────────────────────────────────── */
.msg-actions { opacity:0; transition:opacity .12s; }
.msg-row:hover .msg-actions { opacity:1; }

/* ── SIDEBAR ITEM ────────────────────────────────────────── */
.sidebar-item {
  transition: background .1s;
  border-radius: 6px;
}
.sidebar-item:hover { background: var(--surface-2); }
.sidebar-item.active { background: var(--surface-2); }

/* ── SEND BUTTON ─────────────────────────────────────────── */
#sendBtn {
  background: var(--periwinkle);
  color: #0d1510;
  font-weight: 600;
  transition: opacity .15s, box-shadow .15s;
}
#sendBtn:hover:not(:disabled) {
  opacity: .9;
  box-shadow: 0 0 12px var(--periwinkle-muted);
}
#sendBtn:disabled { opacity:.2; }

/* ── MIC BUTTON ──────────────────────────────────────────── */
#micBtn { transition: background .2s, border-color .2s, box-shadow .2s; }
#micBtn:hover { border-color: var(--text-mute) !important; }

/* ── INPUT FOCUS ──────────────────────────────────────────── */
#messageInput:focus {
  border-color: var(--periwinkle-muted) !important;
  box-shadow: 0 0 0 3px var(--periwinkle-dim);
  outline: none;
}

/* ── NEW CHAT BTN ─────────────────────────────────────────── */
#newChatBtn { transition: border-color .15s, color .15s; }
#newChatBtn:hover { border-color: var(--text-mute) !important; color: var(--text) !important; }

/* ── EMPTY STATE ACCENT ───────────────────────────────────── */
.empty-slash { color: var(--periwinkle); opacity: .6; }

/* ── STATUS DOT PULSE ─────────────────────────────────────── */
@keyframes statusPulse { 0%,100%{opacity:.7} 50%{opacity:1} }
#statusDot { animation: statusPulse 2.5s ease-in-out infinite; }

/* ── MOBILE ──────────────────────────────────────────────── */
@media (max-width:768px) {
  #sidebar { position:fixed;inset:0 auto 0 0;z-index:40;transform:translateX(-100%);transition:transform .2s ease; }
  #sidebar.open { transform:translateX(0); }
  #sidebarScrim { display:none; }
  #sidebarScrim.open { display:block; }
}

textarea::placeholder { color: var(--text-faint); }
textarea { font-family: 'Inter', sans-serif; }