/* ==========================================================================
   css/upscale-chat.css — premium pass over Chat, Compare, Voice (layout
   only), Settings, the sidebar and the top bar. Loaded LAST: every rule
   here refines classes app.css/next.css/kits.css already define, using
   only their tokens (--accent, --accent-2, --kit-accent-grad, --glow-rgb,
   --bg, --panel, --border, --text, --text-muted, and the shared --radius-*/
   --shadow-*/--font-mono scale). No colour is ever hard-coded, no national
   flag colour is introduced here — every hue comes from the active kit.

   Spacing rhythm: 4/8px steps. Type: body 15-16px, small 13px (already the
   base in app.css; this file only adds the few sizes the new elements
   need, all within that scale). Motion: 150-200ms ease, fully disabled
   under prefers-reduced-motion. Verified with no horizontal overflow at
   375 / 768 / 1280px.
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
  :root { --uc-motion: 1; }
}
@media (prefers-reduced-motion: reduce) {
  :root { --uc-motion: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .uc-anim, .suggested-prompt-card, .msg, .msg-action-btn, .verdict-panel,
  .code-copy-btn, .send-btn, .composer-inner, .history-item, .nav-item,
  .compare-col, .settings-row, .roster-row, .thinking-dots span,
  .streaming-caret { transition: none !important; animation: none !important; }
}

/* ==========================================================================
   CHAT — empty state + suggested prompts
   ========================================================================== */

.empty-state {
  height: auto;
  min-height: 44vh;
  flex-direction: column;
  gap: 24px;
  padding: 40px 16px 8px;
}
.empty-state h1 {
  color: var(--text);
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: 0.005em;
}
.suggested-prompts {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  width: 100%;
  max-width: 680px;
  margin: 0 auto;
}
@media (min-width: 560px) {
  .suggested-prompts { grid-template-columns: repeat(2, 1fr); gap: 12px; }
}
.suggested-prompt-card {
  display: flex;
  align-items: center;
  min-height: 56px;
  padding: 14px 16px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--panel);
  backdrop-filter: blur(10px) saturate(1.1);
  color: var(--text);
  font-size: 13.5px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;
  position: relative;
  overflow: hidden;
}
.suggested-prompt-card::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(140px 80px at 0% 0%, rgba(var(--glow-rgb), 0.14), transparent 70%);
  opacity: 0;
  transition: opacity 180ms ease;
}
.suggested-prompt-card:hover,
.suggested-prompt-card:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(var(--glow-rgb), 0.5);
  box-shadow: var(--shadow-md);
}
.suggested-prompt-card:hover::before,
.suggested-prompt-card:focus-visible::before { opacity: 1; }
.suggested-prompt-card:active { transform: translateY(0); }
.spc-title { position: relative; z-index: 1; }

/* ==========================================================================
   CHAT — reading width, avatar, timestamps
   ========================================================================== */

.messages { max-width: 72ch; gap: 24px; }
.msg-user-col { display: flex; flex-direction: column; align-items: flex-end; max-width: 84%; margin-left: auto; gap: 4px; }
.msg-user .msg-bubble {
  max-width: 100%;
  background: linear-gradient(165deg, rgba(var(--glow-rgb), 0.16), var(--accent-soft) 70%);
  border: 1px solid rgba(var(--glow-rgb), 0.22);
  box-shadow: var(--shadow-sm);
}
.orb-mini-wrap {
  border-radius: 50%;
  box-shadow: 0 0 0 1px var(--border), 0 0 16px rgba(var(--glow-rgb), 0.18);
  background: var(--bg-sunken);
  overflow: hidden;
}
.msg-assistant-row { position: relative; }
.msg-assistant-body { font-size: 15px; line-height: 1.6; }

.msg-timestamp {
  font-size: 11px;
  color: var(--text-faint);
  font-family: var(--font-mono);
  opacity: 0;
  transition: opacity 150ms ease;
  white-space: nowrap;
}
.msg-timestamp-user { padding-right: 4px; }
.msg-timestamp-assistant { margin-left: 46px; margin-top: -4px; }
.msg:hover .msg-timestamp,
.msg:focus-within .msg-timestamp { opacity: 1; }
@media (hover: none) {
  .msg-timestamp { opacity: 0.6; }
}

/* thinking indicator, before the first delta */
.thinking-dots { display: inline-flex; align-items: center; gap: 5px; height: 22px; }
.thinking-dots span {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
  opacity: 0.35;
  animation: uc-think 1.1s ease-in-out infinite;
}
.thinking-dots span:nth-child(2) { animation-delay: 0.15s; }
.thinking-dots span:nth-child(3) { animation-delay: 0.3s; }
@keyframes uc-think {
  0%, 80%, 100% { opacity: 0.28; }
  40% { opacity: 0.9; }
}

/* streaming caret at the tail of live text */
.msg-assistant-body.is-streaming > *:last-child::after {
  content: "";
  display: inline-block;
  width: 2px;
  height: 1em;
  margin-left: 2px;
  vertical-align: -0.15em;
  background: var(--accent);
  animation: uc-caret 0.9s steps(1) infinite;
}
@keyframes uc-caret { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

/* ==========================================================================
   CHAT — markdown elements (headings, tables, blockquote, links, code)
   ========================================================================== */

.msg-assistant-body h3, .msg-assistant-body h4, .msg-assistant-body h5, .msg-assistant-body h6 {
  margin: 18px 0 8px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--text);
}
.msg-assistant-body h3:first-child, .msg-assistant-body h4:first-child { margin-top: 0; }
.msg-assistant-body h3 { font-size: 17px; }
.msg-assistant-body h4 { font-size: 15.5px; }
.msg-assistant-body h5, .msg-assistant-body h6 { font-size: 14px; text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-muted); }

.msg-assistant-body ol { margin: 0 0 10px; padding-left: 22px; }
.msg-assistant-body li { margin: 3px 0; }
.msg-assistant-body li::marker { color: var(--text-faint); }

.msg-assistant-body blockquote {
  margin: 0 0 10px;
  padding: 8px 14px;
  border-left: 3px solid var(--accent);
  background: var(--bg-sunken);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  color: var(--text-muted);
  font-size: 14px;
}

.msg-assistant-body table {
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
}
.msg-assistant-body table thead { background: var(--bg-sunken); }
.msg-assistant-body table th { font-weight: 700; font-size: 12px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.02em; }
.msg-assistant-body table tr:last-child td { border-bottom: none; }

.msg-assistant-body a {
  color: var(--accent-strong);
  text-decoration-color: rgba(var(--glow-rgb), 0.5);
  text-underline-offset: 2px;
}
.msg-assistant-body a:hover { text-decoration-thickness: 2px; }

/* fenced code: header with language label + copy button */
.code-block {
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}
.code-block-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 34px;
  padding: 0 8px 0 14px;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg-sunken) 88%, transparent);
}
.code-lang {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: lowercase;
  color: var(--text-faint);
}
.code-block .code-copy-btn {
  position: static;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  height: 28px;
  padding: 0 10px;
  border-radius: var(--radius-pill);
  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
}
.code-block .code-copy-btn:hover { background: var(--bg-elevated); border-color: rgba(var(--glow-rgb), 0.4); color: var(--text); }
.code-block .code-copy-btn.is-copied { color: var(--accent-strong); border-color: rgba(var(--glow-rgb), 0.5); background: var(--accent-soft); }
.code-block pre { padding: 14px; }
.code-block pre code { font-family: var(--font-mono); background: none; padding: 0; }

/* ==========================================================================
   CHAT — verdict chip + panel, message toolbar
   ========================================================================== */

.verdict-chip {
  transition: transform 150ms ease, box-shadow 150ms ease, background 150ms ease;
  letter-spacing: 0.02em;
}
.verdict-chip:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.verdict-chip:not(.verdict-blocked):not(.verdict-halted) { box-shadow: 0 0 0 1px rgba(var(--glow-rgb), 0.18); }

.verdict-panel {
  animation: uc-panel-open 190ms cubic-bezier(0.2, 0.7, 0.3, 1) both;
  transform-origin: top left;
}
@keyframes uc-panel-open {
  from { opacity: 0; transform: translateY(-4px) scaleY(0.96); }
  to { opacity: 1; transform: none; }
}

.msg-actions {
  opacity: 0;
  transform: translateY(-2px);
  transition: opacity 150ms ease, transform 150ms ease;
  gap: 2px;
}
.msg:hover .msg-actions,
.msg:focus-within .msg-actions,
.msg-actions:focus-within { opacity: 1; transform: none; }
@media (hover: none) {
  .msg-actions { opacity: 1; transform: none; }
}
.msg-action-btn { transition: background 150ms ease, color 150ms ease, transform 100ms ease; }
.msg-action-btn:active { transform: scale(0.92); }
.wrong-btn { transition: color 150ms ease; }
.wrong-btn:hover { color: var(--danger); }

/* ==========================================================================
   CHAT — composer
   ========================================================================== */

.composer-inner { transition: border-color 180ms ease, box-shadow 180ms ease; }
.composer-note { transition: color 150ms ease; }
.composer:focus-within .composer-note,
.composer-inner:focus-within ~ .composer-note { color: var(--text-muted); }

.composer-char-hint {
  font-size: 10.5px;
  color: var(--text-faint);
  font-family: var(--font-mono);
  align-self: flex-end;
  padding: 0 4px 6px 0;
  opacity: 0;
  transition: opacity 150ms ease;
  user-select: none;
}
.composer-inner:focus-within .composer-char-hint,
.prompt-input:not(:placeholder-shown) ~ .composer-char-hint { opacity: 1; }

.send-btn { transition: transform 150ms ease, box-shadow 150ms ease, background 150ms ease, opacity 150ms ease; }
.send-btn:not(:disabled):hover { transform: scale(1.05); }
.send-btn:not(:disabled):active { transform: scale(0.96); }
.send-btn.is-stop { box-shadow: 0 0 0 1px rgba(var(--glow-rgb), 0.3), 0 6px 18px rgba(0, 0, 0, 0.22); }

/* keep the mic exactly where prompt-mic.js/app.css already put it — this
   file only adds motion/shadow refinement around the composer, never a
   layout change to the mic's own position. */

/* ==========================================================================
   COMPARE — equal-height columns, header chip, swipeable tabs on phone
   ========================================================================== */

.compare-columns { align-items: stretch; }
.compare-col { min-height: 0; }
.compare-col-head { gap: 10px; flex-wrap: nowrap; }
.compare-col-head h2 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.compare-col-chip {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 9px;
  border-radius: var(--radius-pill);
  background: var(--neutral-chip);
  color: var(--text-muted);
  font-size: 10.5px;
  font-weight: 700;
  flex-shrink: 0;
  white-space: nowrap;
}
.compare-col-body { flex: 1; }
.compare-col-body.is-thinking { display: flex; align-items: center; }
.compare-col-stats {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}
.compare-col-stats span::before { content: "· "; color: var(--text-faint); }
.compare-col-stats span:first-child::before { content: ""; }

@media (min-width: 900px) {
  .compare-columns { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
  .compare-col { display: flex !important; }
}

/* swipeable tabs on phone: scroll-snap + a moving indicator dot on the
   active tab, so the row reads as pageable rather than a plain menu */
@media (max-width: 899.98px) {
  .compare-tabs {
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
  }
  .compare-tab {
    scroll-snap-align: start;
    position: relative;
    transition: background 150ms ease, color 150ms ease;
  }
  .compare-tab.is-active::after {
    content: "";
    position: absolute;
    left: 50%; bottom: 3px;
    width: 5px; height: 5px;
    transform: translateX(-50%);
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 8px rgba(var(--glow-rgb), 0.6);
  }
  .compare-col { scroll-snap-align: start; }
}

/* ==========================================================================
   VOICE — centred orb, transcript card, small-caps status (layout only;
   the audio engine in js/voice.js and js/voice/* is untouched)
   ========================================================================== */

.voice-stage {
  justify-content: center;
  gap: 20px;
  padding-top: max(40px, 6vh);
  padding-bottom: max(28px, 6vh);
}
.orb-frame {
  transition: transform 200ms ease, filter 200ms ease;
  filter: none;
}
.orb-frame:hover { transform: none; }
.orb-frame[aria-pressed="true"] { filter: none; }

.voice-status {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--text-muted);
  font-family: inherit;
}

.voice-transcript {
  width: 100%;
  max-width: 520px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--panel);
  backdrop-filter: blur(10px) saturate(1.1);
  box-shadow: var(--shadow-md);
  padding: 16px 18px;
  max-height: 42vh;
  overflow-y: auto;
  text-align: left;
}
.voice-transcript:empty {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 64px;
  text-align: center;
  color: var(--text-faint);
  font-size: 12.5px;
}
.voice-transcript:empty::before { content: "Your conversation will appear here"; }

.voice-transcript .vt-line {
  display: flex;
  gap: 8px;
  padding: 8px 10px;
  border-radius: var(--radius-md);
  margin-bottom: 8px;
  background: var(--bg-sunken);
  font-size: 13.5px;
  line-height: 1.5;
}
.voice-transcript .vt-line:last-child { margin-bottom: 0; }
.voice-transcript .vt-you {
  flex-shrink: 0;
  color: var(--accent-strong);
  font-weight: 700;
}

.voice-controls { gap: 20px; }
.orb-btn { transition: transform 150ms ease, box-shadow 150ms ease, background 150ms ease, border-color 150ms ease; }
.orb-btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
.orb-btn:active { transform: translateY(0); }

.voice-keyboard-row input { transition: border-color 150ms ease, box-shadow 150ms ease; }
.voice-keyboard-row input:focus { border-color: rgba(var(--glow-rgb), 0.55); box-shadow: 0 0 0 1px rgba(var(--glow-rgb), 0.3); }

.voice-verdict { display: flex; justify-content: center; }
.voice-footnote {
  font-size: 12px;
  letter-spacing: 0.01em;
  text-transform: none;
  font-family: inherit;
}

/* ==========================================================================
   SIDEBAR — hover actions, active state, footer, nav icon alignment
   ========================================================================== */

.sidebar-history { padding: 6px 8px 10px; }
.history-group-label { padding: 14px 10px 6px; }
.history-group-label:first-child { padding-top: 8px; }

.history-item {
  display: flex;
  align-items: center;
  gap: 8px;
  transition: background 150ms ease, color 150ms ease, padding-left 150ms ease;
  border-left: 2px solid transparent;
}
.history-item:hover { background: var(--bg-sunken); padding-left: 12px; }
.history-item.is-active {
  background: linear-gradient(90deg, rgba(var(--glow-rgb), 0.14), rgba(var(--glow-rgb), 0.02));
  color: var(--accent-strong);
  font-weight: 600;
  border-left-color: var(--accent);
}

.nav-item {
  transition: background 150ms ease, color 150ms ease, box-shadow 150ms ease;
}
.nav-item svg { flex-shrink: 0; width: 18px; height: 18px; }
.nav-item.is-active svg { color: var(--accent-strong); }

.btn-newchat { transition: background 150ms ease, border-color 150ms ease, box-shadow 150ms ease; }
.btn-newchat:hover { border-color: rgba(var(--glow-rgb), 0.4); box-shadow: 0 0 0 1px rgba(var(--glow-rgb), 0.14); }

.user-row { transition: background 150ms ease; }
.avatar {
  box-shadow: 0 0 0 1px rgba(var(--glow-rgb), 0.35), 0 2px 10px rgba(var(--glow-rgb), 0.18);
  background: var(--kit-accent-grad, linear-gradient(135deg, var(--accent), var(--accent-2)));
}

/* ==========================================================================
   TOP BAR — consistent heights, aligned controls, refined status pill
   ========================================================================== */

.topbar { row-gap: 0; }
.topbar-controls { min-height: 44px; }
.model-select-btn {
  transition: border-color 150ms ease, background 150ms ease, box-shadow 150ms ease;
}
.model-select-btn:hover { border-color: rgba(var(--glow-rgb), 0.45); }
.model-select-btn svg { transition: transform 150ms ease; }
.model-select-btn[aria-expanded="true"] svg { transform: rotate(180deg); }

.status-pill {
  position: relative;
  padding-left: 20px;
  transition: background 150ms ease, color 150ms ease;
}
.status-pill::before {
  content: "";
  position: absolute; left: 9px; top: 50%;
  width: 6px; height: 6px;
  transform: translateY(-50%);
  border-radius: 50%;
  background: currentColor;
  opacity: 0.55;
}
.status-pill-on::before {
  opacity: 1;
  box-shadow: none;
  animation: none;
}
.status-pill-off::before { animation: none; }

.toggle-group { align-items: center; }
.deep-safety-wrap { min-height: 44px; }

/* ==========================================================================
   SETTINGS — grouped cards, consistent rows
   ========================================================================== */

.settings-wrap { max-width: 640px; margin: 0 auto; width: 100%; }
.settings-section {
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.settings-section h2 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
}
.settings-row, .roster-row { min-height: 48px; }
.settings-row span:first-child, .roster-row > div:first-child { font-size: 14px; }

/* ==========================================================================
   RESPONSIVE — verified 375 / 768 / 1280, no horizontal overflow
   ========================================================================== */

@media (max-width: 480px) {
  .empty-state { padding-top: 28px; gap: 18px; }
  .suggested-prompts { gap: 8px; }
  .suggested-prompt-card { min-height: 52px; padding: 12px 14px; font-size: 13px; }
  .messages { padding-left: 0; padding-right: 0; }
  .msg-timestamp-assistant { margin-left: 44px; }
  .voice-transcript { max-height: 34vh; padding: 12px 14px; }
  .orb-frame { width: min(293px, 77vw); height: min(293px, 77vw); }
}

@media (min-width: 1280px) {
  .messages { max-width: 72ch; }
  .compare-columns { gap: 16px; }
}