/* ============================================================
   Tonalli AI — Aztec-inspired design system
   Agentic intelligence · 2026 UX
   ============================================================ */

:root {
  /* Aztec-inspired semantic palette */
  --aztec-obsidian: #07090f;
  --aztec-night:    #0d1220;
  --aztec-jade:     #14b8a6;
  --aztec-turquoise:#22d3ee;
  --aztec-gold:     #f4b23b;
  --aztec-sun:      #f59e0b;
  --aztec-copper:   #d97706;
  --aztec-clay:     #c2410c;
  --aztec-quetzal:  #059669;
  --aztec-serpent:  #7c2d12;
  --aztec-cochineal:#be123c;
  --aztec-ivory:    #f6ead1;

  /* Elevation + rhythm */
  --ring-focus: 0 0 0 3px hsl(var(--p) / 0.32);
  --shadow-float: 0 30px 60px -28px rgba(0,0,0,0.55), 0 12px 28px -18px rgba(0,0,0,0.45);
  --shadow-hover: 0 16px 32px -16px rgba(244,178,59,0.22), 0 6px 16px -10px rgba(34,211,238,0.18);

  /* Motion */
  --ease-out-soft: cubic-bezier(.2,.8,.2,1);
  --ease-spring:   cubic-bezier(.34,1.56,.64,1);
}

/* ========== Base ========== */
html, body { background: var(--aztec-obsidian); }

body {
  font-feature-settings: "ss01", "cv11", "cv06";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: rgba(244, 178, 59, 0.35); color: #fff; }

/* ========== Ambient aurora + aztec glyph wash ========== */
.bg-aurora {
  position: relative;
  background-image:
    radial-gradient(1000px 560px at 90% -10%, rgba(244, 178, 59, 0.18), transparent 62%),
    radial-gradient(900px 600px at -10% 110%, rgba(20, 184, 166, 0.16), transparent 62%),
    radial-gradient(700px 500px at 50% 50%, rgba(124, 58, 237, 0.06), transparent 70%);
}
.bg-aurora::before {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'><g fill='none' stroke='%23f4b23b' stroke-width='0.6' opacity='0.06'><path d='M10 70 L30 70 L30 50 L50 50 L50 30 L70 30 L70 50 L90 50 L90 70 L110 70 L110 90 L90 90 L90 110 L70 110 L70 90 L50 90 L50 110 L30 110 L30 90 L10 90 Z'/><circle cx='70' cy='70' r='6'/></g></svg>");
  background-size: 200px 200px;
  mask-image: radial-gradient(ellipse at 50% 40%, black 0%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 40%, black 0%, transparent 70%);
  opacity: 0.6;
}

[data-theme="tonalli-light"] .bg-aurora {
  background-image:
    radial-gradient(1000px 560px at 90% -10%, rgba(217, 119, 6, 0.12), transparent 62%),
    radial-gradient(900px 600px at -10% 110%, rgba(13, 116, 144, 0.10), transparent 62%);
}
[data-theme="tonalli-light"] .bg-aurora::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'><g fill='none' stroke='%237c2d12' stroke-width='0.6' opacity='0.12'><path d='M10 70 L30 70 L30 50 L50 50 L50 30 L70 30 L70 50 L90 50 L90 70 L110 70 L110 90 L90 90 L90 110 L70 110 L70 90 L50 90 L50 110 L30 110 L30 90 L10 90 Z'/><circle cx='70' cy='70' r='6'/></g></svg>");
}

/* ========== Aztec step-border divider ========== */
.aztec-rule {
  height: 10px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='10' viewBox='0 0 40 10'><path fill='%23f4b23b' fill-opacity='0.45' d='M0 6h4V4h4V2h4v2h4v2h4V4h4V2h4v2h4v2h4v2H0z'/></svg>");
  background-repeat: repeat-x;
  background-size: 40px 10px;
  opacity: 0.55;
}

/* ========== Minimalist brand mark ========== */
.brand-mark {
  background: linear-gradient(160deg, #13192c 0%, #070a14 100%);
  border: 1px solid rgba(244, 178, 59, 0.25);
  box-shadow:
    0 0 0 1px rgba(244, 178, 59, 0.08),
    0 10px 22px -12px rgba(0, 0, 0, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  color: var(--aztec-gold);
  position: relative;
}
.brand-mark::after {
  content: "";
  position: absolute;
  left: 50%; top: 14%;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--aztec-gold);
  transform: translateX(-50%);
  box-shadow: 0 0 10px rgba(244, 178, 59, 0.55);
  opacity: 0;
}
.brand-mark > * { position: relative; z-index: 2; }

[data-theme="tonalli-light"] .brand-mark {
  background: linear-gradient(160deg, #fdfcf7 0%, #f6ead1 100%);
  border-color: rgba(180, 83, 9, 0.35);
  color: var(--aztec-clay);
}

@keyframes sunspin { to { transform: rotate(360deg); } }

/* ========== Scrollbars ========== */
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, hsl(var(--b3)), hsl(var(--b2)));
  border-radius: 20px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, hsl(var(--p) / 0.6), hsl(var(--s) / 0.45));
  background-clip: padding-box;
}

/* ========== Chip (composer controls) ========== */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: hsl(var(--b3) / 0.5);
  border: 1px solid hsl(var(--bc) / 0.09);
  border-radius: 999px;
  padding: 0.28rem 0.75rem;
  font-size: 0.74rem;
  color: hsl(var(--bc) / 0.72);
  cursor: pointer;
  transition: border-color 0.2s var(--ease-out-soft), color 0.2s, background 0.2s, transform 0.15s;
  backdrop-filter: blur(8px);
}
.chip:hover {
  border-color: hsl(var(--p) / 0.55);
  color: hsl(var(--bc));
  background: hsl(var(--b3) / 0.75);
}
.chip:active { transform: translateY(1px); }
.chip select, .chip input[type="text"] {
  background: transparent; border: 0; color: inherit; font-size: 0.74rem; padding: 0;
  cursor: pointer;
}
.chip select:focus { outline: none; box-shadow: none; }
.chip input[type="range"] { accent-color: hsl(var(--p)); cursor: pointer; }

/* ========== Mode pills (agent modes) ========== */
.mode-strip {
  display: flex;
  gap: 0.4rem;
  overflow-x: auto;
  padding: 0.15rem 0.1rem 0.45rem;
  scrollbar-width: none;
}
.mode-strip::-webkit-scrollbar { display: none; }

.mode-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.38rem 0.75rem;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 500;
  color: hsl(var(--bc) / 0.7);
  background: hsl(var(--b2) / 0.65);
  border: 1px solid hsl(var(--bc) / 0.08);
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s var(--ease-out-soft);
  backdrop-filter: blur(10px);
}
.mode-pill:hover {
  color: hsl(var(--bc));
  border-color: hsl(var(--p) / 0.45);
  transform: translateY(-1px);
}
.mode-pill.active {
  color: #1a0f05;
  background: linear-gradient(135deg, #fde68a, #f4b23b 45%, #d97706);
  border-color: rgba(244, 178, 59, 0.6);
  box-shadow: 0 6px 16px -6px rgba(244, 178, 59, 0.55), inset 0 1px 0 rgba(255,255,255,0.35);
  font-weight: 600;
}
[data-theme="tonalli-light"] .mode-pill.active {
  color: #fff;
  background: linear-gradient(135deg, #b45309, #d97706 50%, #92400e);
}

/* ========== Tabs (sidebar) ========== */
.tab-panel { display: none; }
.tab-panel.active { display: flex; }

.tabs-bordered .tab {
  transition: color 0.18s, border-color 0.18s;
}
.tabs-bordered .tab.tab-active {
  color: hsl(var(--p));
  border-color: hsl(var(--p));
}

/* ========== Sidebar list items ========== */
.side-item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.56rem 0.72rem;
  border-radius: 0.6rem;
  color: hsl(var(--bc) / 0.75);
  cursor: pointer;
  font-size: 0.86rem;
  border: 1px solid transparent;
  transition: background 0.18s var(--ease-out-soft), color 0.18s, border-color 0.18s, transform 0.12s;
  position: relative;
  width: 100%;
  text-align: left;
}
.side-item:hover {
  background: hsl(var(--b3) / 0.75);
  color: hsl(var(--bc));
  transform: translateX(2px);
}
.side-item.active {
  background:
    linear-gradient(135deg, hsl(var(--p) / 0.18), hsl(var(--s) / 0.1)),
    linear-gradient(hsl(var(--b2)), hsl(var(--b2)));
  border-color: hsl(var(--p) / 0.4);
  color: hsl(var(--bc));
}
.side-item.active::before {
  content: "";
  position: absolute;
  left: -1px; top: 20%; bottom: 20%;
  width: 3px; border-radius: 3px;
  background: linear-gradient(180deg, var(--aztec-gold), var(--aztec-turquoise));
  box-shadow: 0 0 10px rgba(244,178,59,0.5);
}
.side-item .title-text {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.side-item .row-actions {
  display: none;
  gap: 2px;
}
.side-item:hover .row-actions { display: inline-flex; }
.side-item .row-actions button {
  background: transparent; border: none;
  padding: 3px; border-radius: 6px;
  color: hsl(var(--bc) / 0.55);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.side-item .row-actions button:hover {
  background: hsl(var(--b3));
  color: hsl(var(--bc));
}

/* ========== Messages ========== */
.msg {
  display: flex;
  gap: 0.75rem;
  max-width: 100%;
  animation: rise 0.28s var(--ease-out-soft);
}
.msg.user { justify-content: flex-end; }

.msg .avatar-sm {
  width: 32px; height: 32px; border-radius: 9px;
  display: grid; place-items: center;
  flex-shrink: 0; font-size: 0.75rem; font-weight: 700;
  position: relative;
  overflow: hidden;
}
.msg.assistant .avatar-sm {
  background: linear-gradient(160deg, #13192c 0%, #070a14 100%);
  color: var(--aztec-gold);
  border: 1px solid rgba(244, 178, 59, 0.3);
  box-shadow: 0 4px 12px -4px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.04);
}
.msg.user .avatar-sm {
  background: linear-gradient(135deg, hsl(var(--b3)), hsl(var(--b2)));
  color: hsl(var(--bc));
  order: 2;
  border: 1px solid hsl(var(--bc) / 0.1);
}

.bubble {
  padding: 0.95rem 1.05rem;
  border-radius: 1.1rem;
  line-height: 1.62;
  font-size: 0.94rem;
  max-width: 85%;
  border: 1px solid hsl(var(--bc) / 0.08);
  overflow-wrap: anywhere;
  position: relative;
}
.msg.assistant .bubble {
  background:
    linear-gradient(180deg, hsl(var(--b2) / 0.85), hsl(var(--b2) / 0.65));
  backdrop-filter: blur(10px);
  border-bottom-left-radius: 4px;
  box-shadow: 0 6px 22px -12px rgba(0,0,0,0.35);
}
.msg.user .bubble {
  background:
    linear-gradient(135deg, #1e3a5f 0%, #0e7490 50%, #0d5f73 100%);
  color: #f0fbff;
  border-color: rgba(255, 255, 255, 0.10);
  border-bottom-right-radius: 4px;
  box-shadow: 0 10px 26px -14px rgba(13, 116, 144, 0.55);
}
[data-theme="tonalli-light"] .msg.user .bubble {
  background: linear-gradient(135deg, #0e7490 0%, #0891b2 60%, #155e75 100%);
  color: #ffffff;
}

.bubble p + p { margin-top: 0.6em; }
.bubble ul, .bubble ol { margin: 0.6em 0 0.6em 1.3em; }
.bubble li { margin: 0.2em 0; }
.bubble h1, .bubble h2, .bubble h3 { margin: 0.7em 0 0.3em; font-weight: 600; letter-spacing: -0.01em; }
.bubble a { color: var(--aztec-gold); text-decoration: underline; text-underline-offset: 3px; }
.bubble > :first-child { margin-top: 0; }
.bubble > :last-child { margin-bottom: 0; }
.bubble :not(pre) > code {
  background: hsl(var(--b3));
  padding: 2px 6px;
  border-radius: 5px;
  font-size: 0.85em;
  font-family: 'JetBrains Mono', monospace;
  color: var(--aztec-gold);
}
[data-theme="tonalli-light"] .bubble :not(pre) > code { color: var(--aztec-clay); }

/* ========== Code blocks inside responses ========== */
.code-block {
  position: relative;
  margin: 0.8rem 0;
  background: #070a14;
  border: 1px solid rgba(244, 178, 59, 0.12);
  border-radius: 0.85rem;
  overflow: hidden;
  box-shadow: 0 10px 28px -18px rgba(0,0,0,0.5);
}
.code-block::before {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(180deg, var(--aztec-gold), var(--aztec-turquoise), var(--aztec-quetzal));
  opacity: 0.7;
}
.code-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.45rem 0.85rem 0.45rem 1rem;
  background: rgba(255, 255, 255, 0.025);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 0.7rem;
  color: #cbb892;
  letter-spacing: 0.4px;
}
.code-head .lang {
  text-transform: uppercase;
  font-weight: 600;
  font-family: 'JetBrains Mono', monospace;
  color: var(--aztec-gold);
}
.code-head .head-actions { display: flex; gap: 0.25rem; }
.code-head button {
  background: transparent;
  border: 1px solid transparent;
  color: #9aa4c7;
  padding: 3px 8px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.7rem;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: inherit;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.code-head button:hover {
  background: rgba(244, 178, 59, 0.08);
  color: var(--aztec-gold);
  border-color: rgba(244, 178, 59, 0.2);
}
.code-block pre {
  margin: 0;
  padding: 0.95rem 1.05rem;
  overflow-x: auto;
  background: transparent;
}
.code-block pre code {
  font-size: 0.82rem;
  line-height: 1.58;
  color: #e7ecff;
  background: transparent;
  font-family: 'JetBrains Mono', monospace;
}
.hljs { background: transparent !important; color: #e7ecff; padding: 0; }

/* ========== Thinking indicator ========== */
.thinking {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  color: hsl(var(--bc) / 0.65);
  font-size: 0.85rem;
}
.thinking .dots { display: inline-flex; gap: 5px; }
.thinking .dots i {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--aztec-gold), var(--aztec-turquoise));
  animation: pulse 1.2s infinite ease-in-out;
  box-shadow: 0 0 8px rgba(244, 178, 59, 0.5);
}
.thinking .dots i:nth-child(2) { animation-delay: 0.15s; }
.thinking .dots i:nth-child(3) { animation-delay: 0.3s; }

/* ========== Hero ========== */
.hero-title {
  font-size: clamp(1.8rem, 3.6vw, 2.6rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  background: linear-gradient(120deg, #ffffff 0%, #fde68a 40%, #f4b23b 60%, #22d3ee 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  line-height: 1.12;
}
[data-theme="tonalli-light"] .hero-title {
  background: linear-gradient(120deg, #1c1917 0%, #b45309 45%, #0e7490 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: hsl(var(--bc) / 0.75);
  background:
    linear-gradient(135deg, rgba(244,178,59,0.14), rgba(34,211,238,0.08));
  border: 1px solid rgba(244, 178, 59, 0.28);
  backdrop-filter: blur(8px);
}
.hero-eyebrow .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--aztec-gold);
  box-shadow: 0 0 10px var(--aztec-gold);
  animation: pulse 1.4s ease-in-out infinite;
}

.sug {
  text-align: left;
  padding: 0.95rem;
  background: hsl(var(--b2) / 0.7);
  border: 1px solid hsl(var(--bc) / 0.08);
  border-radius: 0.95rem;
  cursor: pointer;
  color: hsl(var(--bc) / 0.75);
  transition: all 0.22s var(--ease-out-soft);
  width: 100%;
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(8px);
}
.sug::before {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(180deg, var(--aztec-gold), var(--aztec-turquoise));
  opacity: 0;
  transition: opacity 0.22s;
}
.sug:hover {
  border-color: hsl(var(--p) / 0.5);
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
  background: hsl(var(--b2) / 0.9);
}
.sug:hover::before { opacity: 1; }
.sug .sug-title {
  color: hsl(var(--bc));
  font-weight: 600;
  font-size: 0.9rem;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 8px;
  letter-spacing: -0.01em;
}
.sug .sug-desc { font-size: 0.77rem; color: hsl(var(--bc) / 0.6); }

/* Capabilities strip on hero */
.cap-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  margin-top: 0.25rem;
}
.cap {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.72rem;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  color: hsl(var(--bc) / 0.78);
  background: hsl(var(--b2) / 0.6);
  border: 1px solid hsl(var(--bc) / 0.1);
  backdrop-filter: blur(6px);
}
.cap svg { color: var(--aztec-gold); }

/* ========== Palette ========== */
.palette-item {
  padding: 0.62rem 0.75rem;
  border-radius: 0.6rem;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  cursor: pointer;
  font-size: 0.87rem;
  color: hsl(var(--bc) / 0.78);
  transition: background 0.15s, color 0.15s, transform 0.12s;
}
.palette-item.active,
.palette-item:hover {
  background: hsl(var(--b3));
  color: hsl(var(--bc));
}
.palette-item.active { transform: translateX(2px); }
.palette-item .meta {
  margin-left: auto;
  font-size: 0.7rem;
  color: hsl(var(--bc) / 0.48);
  font-family: 'JetBrains Mono', monospace;
}

/* ========== Toast ========== */
#toasts .app-toast {
  background: hsl(var(--b2) / 0.95);
  border: 1px solid hsl(var(--p) / 0.4);
  padding: 0.6rem 0.95rem;
  border-radius: 0.65rem;
  font-size: 0.82rem;
  color: hsl(var(--bc));
  box-shadow: var(--shadow-float);
  animation: rise 0.2s var(--ease-out-soft);
  backdrop-filter: blur(12px);
}
#toasts .app-toast.error { border-color: hsl(var(--er) / 0.55); color: hsl(var(--er)); }
#toasts .app-toast.success { border-color: hsl(var(--su) / 0.55); color: hsl(var(--su)); }

/* ========== Empty state ========== */
.empty {
  text-align: center;
  padding: 1.6rem 0.6rem;
  color: hsl(var(--bc) / 0.5);
  font-size: 0.82rem;
}

/* ========== Focus rings (2026 a11y) ========== */
.btn:focus-visible,
.chip:focus-visible,
.mode-pill:focus-visible,
.side-item:focus-visible,
.sug:focus-visible,
.palette-item:focus-visible {
  outline: none;
  box-shadow: var(--ring-focus);
}

.input-ghost:focus { outline: none; box-shadow: none; }

/* ========== Composer ========== */
.composer {
  transition: border-color 0.2s var(--ease-out-soft), box-shadow 0.2s;
}
.composer:focus-within {
  box-shadow:
    0 25px 50px -20px rgba(0, 0, 0, 0.45),
    0 0 0 1px hsl(var(--p) / 0.4),
    0 0 0 4px hsl(var(--p) / 0.2);
  border-color: hsl(var(--p) / 0.6);
}

/* Subtle aztec step hint on composer top border */
.composer {
  position: relative;
}
.composer::before {
  content: "";
  position: absolute;
  top: -1px; left: 10%; right: 10%; height: 2px;
  background: linear-gradient(90deg,
    transparent,
    var(--aztec-gold),
    var(--aztec-turquoise),
    var(--aztec-quetzal),
    transparent);
  opacity: 0.35;
  border-radius: 2px;
}

/* ========== Keyframes ========== */
@keyframes rise {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
@keyframes pulse {
  0%, 100% { opacity: 0.35; transform: scale(0.8); }
  50%      { opacity: 1;    transform: scale(1.15); }
}
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .brand-mark::before,
  .msg.assistant .avatar-sm::after { animation: none; }
}

/* ========== Message hover actions ========== */
.msg {
  position: relative;
}
.msg-actions {
  position: absolute;
  bottom: -0.4rem;
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  background: hsl(var(--b2) / 0.95);
  border: 1px solid hsl(var(--bc) / 0.12);
  border-radius: 0.55rem;
  backdrop-filter: blur(8px);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.18s var(--ease-out-soft), transform 0.18s var(--ease-out-soft);
  pointer-events: none;
  box-shadow: 0 6px 16px -10px rgba(0,0,0,0.5);
  z-index: 3;
}
.msg.assistant .msg-actions { left: 44px; }
.msg.user .msg-actions { right: 44px; }
.msg:hover .msg-actions,
.msg:focus-within .msg-actions {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.msg-actions button {
  background: transparent;
  border: 0;
  color: hsl(var(--bc) / 0.6);
  padding: 4px 6px;
  border-radius: 5px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.7rem;
  transition: background 0.15s, color 0.15s;
}
.msg-actions button:hover {
  background: hsl(var(--p) / 0.15);
  color: var(--aztec-gold);
}

/* ========== Chat search ========== */
.chat-search {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.38rem 0.6rem;
  border-radius: 0.55rem;
  background: hsl(var(--b3) / 0.55);
  border: 1px solid hsl(var(--bc) / 0.08);
  color: hsl(var(--bc) / 0.6);
  transition: border-color 0.18s, background 0.18s;
}
.chat-search:focus-within {
  border-color: hsl(var(--p) / 0.5);
  background: hsl(var(--b3) / 0.8);
  color: hsl(var(--bc));
}
.chat-search input {
  background: transparent;
  border: 0;
  outline: none;
  flex: 1;
  font-size: 0.8rem;
  color: inherit;
  min-width: 0;
}
.chat-search input::placeholder { color: hsl(var(--bc) / 0.4); }
.chat-search input::-webkit-search-cancel-button { display: none; }

/* ========== Keyboard shortcuts list ========== */
.kbd-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.kbd-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.65rem;
  border-radius: 0.5rem;
  background: hsl(var(--b2) / 0.6);
  border: 1px solid hsl(var(--bc) / 0.06);
  font-size: 0.82rem;
  color: hsl(var(--bc) / 0.85);
}
.kbd-list li > span:last-child {
  display: inline-flex;
  gap: 3px;
  align-items: center;
  color: hsl(var(--bc) / 0.7);
}

/* ============================================================
   Responsive overhaul — works on every device
   Breakpoints: xs < 480 | sm 640 | md 768 | lg 1024 | xl 1280
   ============================================================ */

/* Dynamic viewport units (iOS chrome-safe) */
html, body { height: 100%; }
body { min-height: 100dvh; }
.drawer, .drawer-content { min-height: 100dvh; height: 100dvh; }

/* Skip-to-chat link (keyboard a11y) */
.skip-link {
  position: absolute; left: 0.5rem; top: 0.5rem;
  padding: 0.5rem 0.85rem; border-radius: 0.5rem;
  background: hsl(var(--p)); color: hsl(var(--pc));
  font-weight: 600; font-size: 0.85rem;
  transform: translateY(-150%);
  transition: transform 0.2s var(--ease-out-soft);
  z-index: 9999;
}
.skip-link:focus-visible { transform: translateY(0); outline: none; }

/* Fluid font scaling on chips + pills (no more tiny 0.74rem on phones) */
.chip { font-size: clamp(0.78rem, 0.72rem + 0.18vw, 0.88rem); }
.chip select, .chip input[type="text"] { font-size: clamp(0.78rem, 0.72rem + 0.18vw, 0.88rem); }
.mode-pill { font-size: clamp(0.76rem, 0.72rem + 0.14vw, 0.86rem); }
.bubble { font-size: clamp(0.9rem, 0.86rem + 0.2vw, 0.98rem); }

/* Safe-area bottom for notched devices (iOS) — additive to existing side padding */
.composer-shell { padding-bottom: max(0.75rem, env(safe-area-inset-bottom)); }
@media (min-width: 640px) {
  .composer-shell { padding-bottom: max(1.25rem, env(safe-area-inset-bottom)); }
}

/* Modals — never taller than viewport, always scrollable */
.modal-box {
  max-height: calc(100dvh - 2rem);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Mode-strip scroll hint (show gradient if overflow) */
.mode-strip {
  mask-image: linear-gradient(90deg, transparent, black 1rem, black calc(100% - 1rem), transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, black 1rem, black calc(100% - 1rem), transparent);
}

/* Sidebar width clamp on small viewports (drawer is 72 by default = 18rem = 288px) */
.drawer-side > nav { width: min(85vw, 18rem); }
@media (min-width: 768px) { .drawer-side > nav { width: 16rem; } }
@media (min-width: 1024px) { .drawer-side > nav { width: 17rem; } }
@media (min-width: 1280px) { .drawer-side > nav { width: 18rem; } }

/* Chat column — constrain on ultrawide so reading stays comfortable */
@media (min-width: 1280px) {
  #chat > * { max-width: 56rem; margin-left: auto; margin-right: auto; }
  .bubble { max-width: 78%; }
}
@media (min-width: 1536px) {
  #chat > * { max-width: 64rem; }
  .bubble { max-width: 72%; }
}

/* ---------- Touch devices: always-visible actions + tap-target sizing ---------- */
@media (hover: none), (pointer: coarse) {
  .side-item .row-actions { display: inline-flex !important; }
  .msg-actions {
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
  }
  .code-head button, .msg-actions button, .side-item .row-actions button {
    padding: 6px 10px;
    min-height: 32px;
  }
  /* Min 44px tap targets per WCAG 2.2 AA */
  .btn-sm, .btn-square.btn-sm { min-height: 40px; min-width: 40px; }
  .chip { min-height: 36px; padding: 0.35rem 0.85rem; }
  .mode-pill { min-height: 36px; padding: 0.45rem 0.9rem; }
  .tab { min-height: 44px; }
  .side-item { padding-top: 0.7rem; padding-bottom: 0.7rem; }
  /* Remove hover transforms that feel laggy on touch */
  .mode-pill:hover, .side-item:hover, .sug:hover { transform: none; }
}

/* ---------- xs: very narrow phones ---------- */
@media (max-width: 480px) {
  .bubble { max-width: 95%; padding: 0.85rem 0.9rem; border-radius: 0.95rem; }
  .msg { gap: 0.5rem; }
  .msg .avatar-sm { width: 28px; height: 28px; font-size: 0.7rem; }
  .msg.assistant .msg-actions { left: 38px; }
  .msg.user .msg-actions { right: 38px; }
  .hero-title { font-size: clamp(1.5rem, 8vw, 2rem); }
  .sug { padding: 0.75rem; }
  .code-block pre { padding: 0.75rem 0.85rem; }
  .code-block pre code { font-size: 0.76rem; }
  .code-head { padding: 0.4rem 0.6rem; font-size: 0.66rem; }
  .chip { padding: 0.28rem 0.65rem; }
  .composer { border-radius: 18px; padding: 0.55rem 0.55rem 0.55rem 0.85rem; }
  .kbd-list li { font-size: 0.78rem; padding: 0.45rem 0.55rem; }
}

/* ---------- sm: small phones / large phones (481-640) ---------- */
@media (min-width: 481px) and (max-width: 640px) {
  .bubble { max-width: 92%; }
}

/* ---------- md: tablets portrait / small landscape (641-1023) ---------- */
@media (min-width: 641px) and (max-width: 1023px) {
  .bubble { max-width: 88%; }
  #chat { padding-left: 1.25rem; padding-right: 1.25rem; }
  .modal-box { max-width: min(92vw, 40rem); }
}

/* ---------- Landscape phone keyboard-open fix ---------- */
@media (max-height: 480px) and (orientation: landscape) {
  .composer textarea { max-height: 6rem !important; }
  .mode-strip { padding-bottom: 0.2rem; }
}

/* ---------- Very wide screens: constrain composer too ---------- */
@media (min-width: 1280px) {
  .composer-shell > .mx-auto { max-width: 52rem; }
}

/* ---------- Accessibility: stronger focus on interactive controls ---------- */
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid hsl(var(--p) / 0.6);
  outline-offset: 2px;
}

/* ---------- Keep sidebar buttons thumb-reachable on mobile ---------- */
@media (max-width: 640px) {
  .drawer-side > nav { padding-bottom: max(0.75rem, env(safe-area-inset-bottom)); }
  #userChip { margin: 0.75rem; padding: 0.85rem; }
}

/* ---------- Horizontal scroll guard (never let chat overflow) ---------- */
#chat, .composer, .mode-strip { max-width: 100%; }
.bubble pre { max-width: 100%; }

/* ---------- Legacy 640px block replaced by new cascade above ---------- */

/* ========== Rate-limit badge ========== */
.rate-badge {
  display: none;
  align-items: center;
  gap: 0.35rem;
  padding: 0.22rem 0.55rem;
  border-radius: 999px;
  font-size: 0.68rem;
  font-family: 'JetBrains Mono', monospace;
  color: hsl(var(--bc) / 0.72);
  background: hsl(var(--b3) / 0.55);
  border: 1px solid hsl(var(--bc) / 0.12);
  line-height: 1;
  letter-spacing: 0.02em;
}
.rate-badge:not(:empty) { display: inline-flex; }
.rate-badge::before {
  content: "";
  width: 6px; height: 6px; border-radius: 50%;
  background: hsl(var(--su));
  box-shadow: 0 0 6px hsl(var(--su) / 0.6);
}
.rate-badge.rate-low { color: hsl(var(--wa)); border-color: hsl(var(--wa) / 0.45); }
.rate-badge.rate-low::before {
  background: hsl(var(--wa));
  box-shadow: 0 0 6px hsl(var(--wa) / 0.7);
}
@media (max-width: 640px) {
  .rate-badge { display: none !important; }
}

/* ========== PR 3 — Reasoning panel, usage badge, JSON toggle chip ========== */

/* Assistant bubble body wrapper (the markdown-rendered content). */
.bubble-body > :first-child { margin-top: 0; }
.bubble-body > :last-child  { margin-bottom: 0; }

/* Collapsible reasoning panel (shown for reasoning-capable models). */
.reasoning-panel {
  margin: 0 0 0.6rem;
  border-radius: 0.75rem;
  border: 1px dashed hsl(var(--bc) / 0.22);
  background: hsl(var(--b2) / 0.55);
  overflow: hidden;
}
.reasoning-panel.hidden { display: none; }
.reason-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.45rem 0.7rem;
  font-size: 0.72rem;
  font-weight: 500;
  color: hsl(var(--bc) / 0.7);
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: left;
}
.reason-toggle:hover { color: hsl(var(--bc) / 0.95); background: hsl(var(--bc) / 0.04); }
.reason-toggle .caret { margin-left: auto; transition: transform 0.2s; opacity: 0.6; }
.reasoning-panel.collapsed .caret { transform: rotate(-90deg); }
.reason-body {
  padding: 0.1rem 0.9rem 0.7rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.75rem;
  line-height: 1.55;
  color: hsl(var(--bc) / 0.72);
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 280px;
  overflow-y: auto;
}
.reasoning-panel.collapsed .reason-body { display: none; }

/* Per-message usage + cost footer. */
.usage-badge {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.6rem;
  padding-top: 0.55rem;
  border-top: 1px solid hsl(var(--bc) / 0.08);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.66rem;
  color: hsl(var(--bc) / 0.55);
  letter-spacing: 0.02em;
}
.usage-badge.hidden { display: none; }
.usage-badge .u-model {
  padding: 0.12rem 0.45rem;
  border-radius: 999px;
  background: hsl(var(--p) / 0.14);
  color: hsl(var(--p));
  font-weight: 600;
}
.usage-badge .u-cache {
  color: hsl(var(--su));
  font-weight: 600;
}
.usage-badge .u-reason {
  color: hsl(var(--a));
}
.usage-badge .u-cost { font-weight: 600; }

/* JSON-mode toggle chip — stays active when on. */
.chip.toggle-chip {
  cursor: pointer;
  user-select: none;
}
.chip.toggle-chip[aria-pressed="true"],
.chip.toggle-chip.active {
  background: hsl(var(--p) / 0.18);
  border-color: hsl(var(--p) / 0.55);
  color: hsl(var(--p));
}

/* Ensure advanced-settings details block looks right. */
.modal-box details[open] > summary svg { transform: rotate(0); }
.modal-box details > summary { list-style: none; }
.modal-box details > summary::-webkit-details-marker { display: none; }

/* On small screens the usage-badge can wrap tightly; compact it. */
@media (max-width: 480px) {
  .usage-badge { font-size: 0.62rem; gap: 0.35rem; }
  .reason-body { font-size: 0.7rem; max-height: 220px; }
}

/* ========== PR 4 — Attachments row, tool cards, voice, artifacts pane ========== */

/* Attachments row in composer */
.attachments-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  padding: 0 0 0.5rem;
}
.attach-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.28rem 0.55rem;
  border-radius: 0.6rem;
  background: hsl(var(--b3) / 0.55);
  border: 1px solid hsl(var(--bc) / 0.12);
  font-size: 0.72rem;
  max-width: 220px;
}
.attach-chip .attach-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 160px;
}
.attach-chip .attach-x {
  width: 18px; height: 18px;
  display: grid; place-items: center;
  border-radius: 999px;
  background: transparent;
  color: hsl(var(--bc) / 0.6);
  transition: background 0.15s, color 0.15s;
}
.attach-chip .attach-x:hover {
  background: hsl(var(--er) / 0.2);
  color: hsl(var(--er));
}
.composer.drag-over {
  outline: 2px dashed hsl(var(--p));
  outline-offset: 2px;
}

/* Tool cards inside assistant bubble */
.tool-calls {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-bottom: 0.55rem;
}
.tool-card {
  border: 1px solid hsl(var(--bc) / 0.12);
  border-radius: 0.7rem;
  background: hsl(var(--b2) / 0.55);
  overflow: hidden;
}
.tool-head {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.7rem;
  background: transparent;
  border: 0;
  cursor: pointer;
  font-size: 0.72rem;
  color: hsl(var(--bc) / 0.8);
  text-align: left;
}
.tool-head:hover { background: hsl(var(--bc) / 0.04); }
.tool-head .tool-name {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 600;
  color: hsl(var(--p));
}
.tool-head .tool-summary {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: hsl(var(--bc) / 0.55);
}
.tool-head .caret { opacity: 0.5; transition: transform 0.2s; }
.tool-head[aria-expanded="true"] .caret { transform: rotate(180deg); }
.tool-body { padding: 0 0.7rem 0.6rem; }
.tool-body.hidden { display: none; }
.tool-body .tool-section { margin-top: 0.45rem; }
.tool-body .tool-label {
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: hsl(var(--bc) / 0.55);
  margin-bottom: 0.15rem;
}
.tool-body pre {
  margin: 0;
  padding: 0.5rem 0.6rem;
  border-radius: 0.45rem;
  background: hsl(var(--b3) / 0.7);
  font-size: 0.68rem;
  max-height: 200px;
  overflow: auto;
  font-family: 'JetBrains Mono', monospace;
}

/* Sources panel — rendered under any assistant message that used web_search
   or fetch_url. Compact, Perplexity-style citation footer. */
.sources-panel {
  margin-top: 0.65rem;
  padding: 0.55rem 0.65rem 0.6rem;
  border: 1px solid hsl(var(--bc) / 0.1);
  border-radius: 0.8rem;
  background: linear-gradient(180deg, hsl(var(--b2) / 0.55), hsl(var(--b2) / 0.25));
}
.sources-head {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  font-size: 0.72rem;
  color: hsl(var(--bc) / 0.75);
  text-align: left;
}
.sources-head:hover { color: hsl(var(--p)); }
.sources-head .sources-label {
  flex: 1;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-size: 0.62rem;
  color: hsl(var(--bc) / 0.6);
}
.sources-head .caret { opacity: 0.5; transition: transform 0.2s; }
.sources-panel.collapsed .sources-head .caret { transform: rotate(-90deg); }
.sources-list {
  list-style: none;
  padding: 0;
  margin: 0.55rem 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 0.4rem;
}
.sources-list.hidden { display: none; }
.sources-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
  padding: 0.45rem 0.55rem;
  border: 1px solid hsl(var(--bc) / 0.08);
  border-radius: 0.55rem;
  background: hsl(var(--b1) / 0.6);
  transition: border-color 0.15s, transform 0.15s;
}
.sources-list li:hover {
  border-color: hsl(var(--p) / 0.45);
  transform: translateY(-1px);
}
.sources-list .src-num {
  flex: 0 0 1.1rem;
  height: 1.1rem;
  font-size: 0.6rem;
  font-weight: 700;
  color: hsl(var(--p));
  background: hsl(var(--p) / 0.12);
  border-radius: 99px;
  display: grid;
  place-items: center;
  margin-top: 1px;
}
.sources-list a {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
}
.sources-list .src-title {
  font-size: 0.72rem;
  font-weight: 500;
  color: hsl(var(--bc) / 0.9);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-height: 1.3;
}
.sources-list .src-domain {
  margin-top: 0.2rem;
  font-size: 0.62rem;
  color: hsl(var(--p) / 0.85);
  font-family: 'JetBrains Mono', monospace;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Tool configuration modal rows */
.tool-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.65rem 0.8rem;
  border: 1px solid hsl(var(--bc) / 0.1);
  border-radius: 0.7rem;
  background: hsl(var(--b2) / 0.45);
  cursor: pointer;
}
.tool-row:hover { border-color: hsl(var(--p) / 0.4); }
.tool-row .tool-text { flex: 1; min-width: 0; }
.tool-row .tool-title { font-size: 0.8rem; font-weight: 600; }
.tool-row .tool-desc { font-size: 0.68rem; color: hsl(var(--bc) / 0.55); }

/* Voice input pulse */
#micBtn.recording {
  color: hsl(var(--er));
  background: hsl(var(--er) / 0.14);
  animation: mic-pulse 1.4s ease-in-out infinite;
}
@keyframes mic-pulse {
  0%, 100% { box-shadow: 0 0 0 0 hsl(var(--er) / 0.4); }
  50%      { box-shadow: 0 0 0 6px hsl(var(--er) / 0); }
}

/* Artifacts side pane */
.artifacts-pane {
  position: fixed;
  top: 0; right: 0;
  width: min(46vw, 640px);
  height: 100dvh;
  background: hsl(var(--b1));
  border-left: 1px solid hsl(var(--bc) / 0.15);
  box-shadow: -16px 0 40px -20px rgba(0, 0, 0, 0.45);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.28s ease;
  z-index: 60;
}
.artifacts-pane.open { transform: translateX(0); }
.artifacts-head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 0.75rem;
  border-bottom: 1px solid hsl(var(--bc) / 0.1);
  background: hsl(var(--b2) / 0.6);
}
.artifacts-title {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.78rem;
  font-weight: 600;
  min-width: 0;
}
.artifacts-title #artifactTitle {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 180px;
}
.artifacts-lang {
  font-size: 0.62rem;
  padding: 0.12rem 0.45rem;
  border-radius: 999px;
  background: hsl(var(--p) / 0.14);
  color: hsl(var(--p));
  font-family: 'JetBrains Mono', monospace;
  text-transform: lowercase;
}
.artifacts-tabs { display: flex; gap: 0.2rem; margin-left: auto; }
.art-tab {
  padding: 0.25rem 0.7rem;
  border-radius: 0.5rem;
  background: transparent;
  border: 1px solid transparent;
  font-size: 0.72rem;
  color: hsl(var(--bc) / 0.7);
  cursor: pointer;
}
.art-tab.active {
  background: hsl(var(--bc) / 0.08);
  border-color: hsl(var(--bc) / 0.15);
  color: hsl(var(--bc));
}
.artifacts-actions { display: flex; gap: 0.15rem; }
.art-btn {
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border-radius: 0.45rem;
  background: transparent;
  border: 0;
  color: hsl(var(--bc) / 0.7);
  cursor: pointer;
}
.art-btn:hover { background: hsl(var(--bc) / 0.08); color: hsl(var(--bc)); }
.artifacts-body {
  flex: 1; min-height: 0;
  position: relative;
  display: flex;
  flex-direction: column;
}
.art-preview {
  flex: 1; min-height: 0;
  width: 100%;
  border: 0;
  background: #0e1322;
}
.art-preview.hidden { display: none; }
.art-code {
  flex: 1; min-height: 0;
  overflow: auto;
  margin: 0;
  padding: 1rem;
  background: #0a0e1c;
  color: #e7ecff;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.78rem;
  line-height: 1.6;
}
.art-code.hidden { display: none; }

/* Mobile: artifacts as bottom sheet */
@media (max-width: 880px) {
  .artifacts-pane {
    width: 100vw;
    height: 80dvh;
    top: auto; bottom: 0; right: 0;
    border-left: 0;
    border-top: 1px solid hsl(var(--bc) / 0.15);
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
    transform: translateY(100%);
  }
  .artifacts-pane.open { transform: translateY(0); }
}

/* ============================================================
   PR 5 — Onboarding, skill levels, glossary, info tips
   ============================================================ */

/* Onboarding overlay */
.onboard-overlay {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: radial-gradient(ellipse at center, hsl(var(--b1) / 0.85), hsl(var(--b1) / 0.95));
  backdrop-filter: blur(10px);
  display: grid;
  place-items: center;
  padding: 1.25rem;
  animation: fadeIn 0.25s ease-out;
}
@keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }

.onboard-card {
  width: min(520px, 100%);
  max-height: calc(100dvh - 2rem);
  overflow-y: auto;
  background: hsl(var(--b2));
  border: 1px solid hsl(var(--bc) / 0.12);
  border-radius: 1.25rem;
  padding: 1.75rem;
  box-shadow:
    0 24px 60px -20px hsl(var(--p) / 0.35),
    0 8px 28px -12px rgba(0,0,0,0.4);
  animation: slideUp 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes slideUp {
  from { transform: translateY(16px); opacity: 0 }
  to   { transform: translateY(0); opacity: 1 }
}

.onboard-card h2 {
  font-size: clamp(1.2rem, 1rem + 0.6vw, 1.5rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-top: 0.75rem;
  color: hsl(var(--bc));
}
.onboard-card p {
  color: hsl(var(--bc) / 0.75);
  margin-top: 0.6rem;
  line-height: 1.55;
  font-size: 0.92rem;
}
.onboard-card p strong { color: hsl(var(--p)); font-weight: 600; }

.onboard-prog {
  display: flex;
  gap: 6px;
  align-items: center;
}
.onboard-prog span {
  flex: 1;
  height: 4px;
  border-radius: 3px;
  background: hsl(var(--bc) / 0.12);
  transition: background-color 0.2s;
}
.onboard-prog span.active {
  background: hsl(var(--p));
  box-shadow: 0 0 10px hsl(var(--p) / 0.5);
}
.onboard-prog span.done { background: hsl(var(--p) / 0.55); }

.onboard-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid hsl(var(--bc) / 0.08);
}
.onboard-actions .flex-1 { flex: 1; }

/* Skill picker */
.skill-picker {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
  margin-top: 1rem;
}
.skill-opt {
  background: hsl(var(--b3) / 0.5);
  border: 1px solid hsl(var(--bc) / 0.1);
  border-radius: 0.75rem;
  padding: 0.7rem 0.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  text-align: left;
  cursor: pointer;
  transition: all 0.15s;
  color: hsl(var(--bc));
}
.skill-opt:hover { border-color: hsl(var(--p) / 0.4); background: hsl(var(--b3) / 0.8); }
.skill-opt.active {
  border-color: hsl(var(--p));
  background: hsl(var(--p) / 0.1);
  box-shadow: 0 0 0 1px hsl(var(--p) / 0.5);
}
.skill-opt strong {
  font-size: 0.82rem;
  font-weight: 700;
  color: hsl(var(--bc));
}
.skill-opt span {
  font-size: 0.68rem;
  color: hsl(var(--bc) / 0.6);
  line-height: 1.3;
}
@media (max-width: 520px) {
  .skill-picker { grid-template-columns: 1fr; }
  .skill-opt { padding: 0.75rem; }
}

/* Skill-level gating — show/hide advanced knobs by skill
   Default = intermediate (if no skill class set, show intermediate content)  */
html.skill-beginner .advanced-only,
html.skill-beginner .intermediate-only { display: none !important; }
html.skill-intermediate .advanced-only { display: none !important; }
/* Expert: everything is visible (no rule needed) */

/* Info tip pill */
.info-tip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  color: hsl(var(--bc) / 0.5);
  cursor: help;
  position: relative;
  transition: color 0.15s;
}
.info-tip:hover { color: hsl(var(--p)); }
.info-tip::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: hsl(var(--n));
  color: hsl(var(--nc));
  padding: 0.45rem 0.65rem;
  border-radius: 0.5rem;
  font-size: 0.68rem;
  font-weight: 400;
  line-height: 1.4;
  white-space: normal;
  width: max-content;
  max-width: 240px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s, transform 0.15s;
  z-index: 60;
  box-shadow: 0 6px 16px -4px rgba(0,0,0,0.35);
}
.info-tip:hover::after,
.info-tip:focus::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Glossary list */
.glossary-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-height: 60dvh;
  overflow-y: auto;
  padding-right: 0.25rem;
}
.glossary-row {
  padding: 0.6rem 0.75rem;
  border-left: 2px solid hsl(var(--p) / 0.5);
  background: hsl(var(--b3) / 0.35);
  border-radius: 0 0.5rem 0.5rem 0;
}
.glossary-term {
  font-weight: 700;
  font-size: 0.82rem;
  color: hsl(var(--p));
  letter-spacing: 0.01em;
}
.glossary-defn {
  font-size: 0.78rem;
  color: hsl(var(--bc) / 0.78);
  line-height: 1.5;
  margin-top: 0.15rem;
}

/* Role gallery on empty state */
.role-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 0.6rem;
  width: 100%;
  max-width: 48rem;
}
.role-card {
  background: hsl(var(--b2) / 0.6);
  border: 1px solid hsl(var(--bc) / 0.08);
  border-radius: 0.9rem;
  padding: 0.8rem;
  text-align: left;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  transition: all 0.15s;
}
.role-card:hover {
  border-color: hsl(var(--p) / 0.5);
  background: hsl(var(--b2));
  transform: translateY(-1px);
}
.role-card .role-ico {
  width: 28px;
  height: 28px;
  border-radius: 0.55rem;
  background: hsl(var(--p) / 0.12);
  color: hsl(var(--p));
  display: grid;
  place-items: center;
  margin-bottom: 0.25rem;
}
.role-card .role-name {
  font-size: 0.82rem;
  font-weight: 700;
  color: hsl(var(--bc));
}
.role-card .role-desc {
  font-size: 0.68rem;
  color: hsl(var(--bc) / 0.6);
  line-height: 1.35;
}

/* Friendly-copy microlabel under a control name */
.sub-label {
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: hsl(var(--bc) / 0.45);
  font-weight: 500;
}

/* ============================================================
   PHASE 0 — Landing, auth, app-wide animation additions.
   All keyframes collapse to instant final-state under
   `prefers-reduced-motion: reduce` via the global override at
   the top of this file, which zeros animation/transition dur.
   ============================================================ */

/* ---------- Shared animation primitives ---------- */
@keyframes aurora-drift {
  0%   { background-position:   0% 50%, 100% 50%, 50% 50%; }
  50%  { background-position: 100% 50%,   0% 50%, 50% 50%; }
  100% { background-position:   0% 50%, 100% 50%, 50% 50%; }
}
@keyframes reveal-in-up {
  from { opacity: 0; transform: translate3d(0, 16px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes gradient-pan {
  0%   { background-position:   0% 50%; }
  100% { background-position: 200% 50%; }
}
@keyframes ring-rotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes spring-pulse {
  0%   { transform: scale(1); }
  30%  { transform: scale(0.94); }
  60%  { transform: scale(1.06); }
  100% { transform: scale(1); }
}
@keyframes typewriter-in {
  from { opacity: 0; filter: blur(4px); transform: translate3d(0, 4px, 0); }
  to   { opacity: 1; filter: blur(0);   transform: translate3d(0, 0, 0); }
}

/* `[data-reveal]` starts invisible; `.reveal-in` (added by motion.js
   IntersectionObserver) triggers the animation. */
[data-reveal] {
  opacity: 0;
  transform: translate3d(0, 16px, 0);
  transition: opacity 0.6s var(--ease-out-soft), transform 0.6s var(--ease-out-soft);
  will-change: opacity, transform;
}
[data-reveal].reveal-in { opacity: 1; transform: translate3d(0, 0, 0); }

/* Tilt cards use two CSS vars set by motion.js::wireTilt. */
[data-tilt] {
  transform: perspective(800px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
  transition: transform 0.18s var(--ease-out-soft), box-shadow 0.18s var(--ease-out-soft);
  transform-style: preserve-3d;
  will-change: transform;
}

/* Reusable spring bounce on click — add `.spring-pulse` via motion.js. */
.spring-pulse { animation: spring-pulse 0.32s var(--ease-spring); }

/* Typewriter token — each word fades + unblurs in sequence. */
.typewriter-token {
  display: inline-block;
  opacity: 0;
  animation: typewriter-in 0.22s var(--ease-out-soft) forwards;
  white-space: pre-wrap;
}

/* ---------- Landing page ---------- */
.landing-body {
  overflow-x: hidden;
  /* kill the chat-app's body overflow: hidden so the landing can scroll */
  overflow-y: auto;
  min-height: 100svh;
}

.landing-nav {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem clamp(1rem, 4vw, 2.5rem);
  backdrop-filter: saturate(1.2) blur(12px);
  -webkit-backdrop-filter: saturate(1.2) blur(12px);
  background: linear-gradient(to bottom, rgba(7,9,15,0.92), rgba(7,9,15,0.75));
  border-bottom: 1px solid hsl(var(--bc) / 0.08);
}
.landing-brand {
  display: flex; align-items: center; gap: 0.6rem;
  color: inherit; text-decoration: none;
  letter-spacing: -0.01em;
}
.landing-brand .brand-text { font-size: 0.98rem; font-weight: 600; }
.landing-nav-links {
  display: none;
  gap: 1.5rem;
  margin-left: 1rem;
  font-size: 0.88rem;
}
.landing-nav-links a {
  color: hsl(var(--bc) / 0.7);
  text-decoration: none;
  transition: color 0.15s;
}
.landing-nav-links a:hover { color: hsl(var(--p)); }
.landing-nav-cta { margin-left: auto; display: flex; gap: 0.5rem; align-items: center; }
@media (min-width: 768px) {
  .landing-nav-links { display: flex; }
}

/* Hero */
.hero-section {
  position: relative;
  padding: clamp(3rem, 8vw, 6rem) clamp(1rem, 4vw, 2.5rem) 4rem;
  overflow: hidden;
  /* Safe-area insets at top (notch) — landing is safe-area-aware too. */
  padding-top: max(clamp(3rem, 8vw, 6rem), env(safe-area-inset-top));
}
.hero-aurora {
  position: absolute; inset: -20% -10% -10% -10%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(900px 640px at 20% 10%, rgba(244, 178, 59, 0.22), transparent 60%),
    radial-gradient(900px 640px at 80% 20%, rgba(20, 184, 166, 0.22), transparent 60%),
    radial-gradient(800px 500px at 50% 100%, rgba(34, 211, 238, 0.16), transparent 65%);
  background-size: 180% 180%, 180% 180%, 180% 180%;
  animation: aurora-drift 22s ease-in-out infinite;
  filter: blur(4px);
}
.hero-glyphs {
  position: absolute; inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.45;
}
.hero-glyphs .glyph {
  position: absolute;
  color: hsl(var(--p));
  opacity: 0.18;
}
.hero-glyphs .g1 { top: 12%; left:  6%; width:  80px; }
.hero-glyphs .g2 { top: 24%; right: 10%; width: 140px; color: var(--aztec-turquoise); }
.hero-glyphs .g3 { bottom:  8%; left: 14%; width: 120px; color: var(--aztec-quetzal); }
.hero-glyphs .g4 { bottom: 18%; right:  6%; width:  90px; }

.hero-inner {
  position: relative; z-index: 1;
  max-width: 70rem; margin: 0 auto;
  display: flex; flex-direction: column; align-items: center;
  gap: 1.2rem;
  text-align: center;
}
.hero-title {
  font-size: clamp(2.2rem, 6vw, 4.2rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.05;
  max-width: 22ch;
  margin-top: 0.4rem;
}
.hero-title .grad-text {
  background: linear-gradient(120deg, var(--aztec-gold) 0%, var(--aztec-turquoise) 45%, var(--aztec-quetzal) 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: gradient-pan 8s linear infinite;
}
.hero-sub {
  max-width: 42rem;
  font-size: clamp(1rem, 1.4vw, 1.12rem);
  color: hsl(var(--bc) / 0.72);
  line-height: 1.6;
}
.hero-cta { display: flex; gap: 0.75rem; flex-wrap: wrap; justify-content: center; margin-top: 0.5rem; }
.hero-cta .btn-lg { min-height: 3rem; font-size: 0.98rem; }
.hero-trust {
  display: flex; gap: 0.6rem; flex-wrap: wrap; justify-content: center;
  font-size: 0.78rem;
  color: hsl(var(--bc) / 0.55);
}
.hero-trust .trust-item { display: inline-flex; align-items: center; gap: 0.3rem; }
.hero-trust .trust-dot { opacity: 0.4; }

/* Hero demo "chat window" */
.hero-demo {
  width: 100%;
  max-width: 46rem;
  margin-top: 1.5rem;
}
.demo-window {
  border-radius: 1.1rem;
  border: 1px solid hsl(var(--bc) / 0.1);
  background: linear-gradient(180deg, hsl(var(--b2)), hsl(var(--b1)));
  box-shadow: var(--shadow-float);
  overflow: hidden;
  text-align: left;
  transform-style: preserve-3d;
}
.demo-head {
  display: flex; align-items: center; gap: 0.4rem;
  padding: 0.6rem 0.9rem;
  border-bottom: 1px solid hsl(var(--bc) / 0.08);
  background: hsl(var(--b3) / 0.35);
  font-size: 0.72rem;
  color: hsl(var(--bc) / 0.6);
}
.demo-head .tl { width: 0.65rem; height: 0.65rem; border-radius: 999px; }
.demo-head .tl-r { background: var(--aztec-cochineal); }
.demo-head .tl-y { background: var(--aztec-gold); }
.demo-head .tl-g { background: var(--aztec-quetzal); }
.demo-head .demo-title { margin-left: 0.5rem; font-family: var(--font-mono, ui-monospace, monospace); }
.demo-body { padding: 1rem 1rem 1.2rem; display: flex; flex-direction: column; gap: 0.75rem; }
.demo-bubble {
  max-width: 85%;
  padding: 0.75rem 1rem;
  border-radius: 1rem;
  font-size: 0.92rem;
  line-height: 1.5;
}
.demo-bubble.user {
  align-self: flex-end;
  background: linear-gradient(135deg, hsl(var(--p) / 0.25), hsl(var(--s) / 0.2));
  border: 1px solid hsl(var(--p) / 0.35);
  color: hsl(var(--bc));
}
.demo-bubble.assistant {
  align-self: flex-start;
  background: hsl(var(--b3) / 0.55);
  border: 1px solid hsl(var(--bc) / 0.08);
}
.demo-bubble .thinking-row {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: 0.72rem;
  color: hsl(var(--bc) / 0.55);
  margin-bottom: 0.5rem;
}
.demo-bubble .dots { display: inline-flex; gap: 0.15rem; }
.demo-bubble .dots i {
  width: 0.28rem; height: 0.28rem; border-radius: 999px;
  background: hsl(var(--p));
  opacity: 0.35;
  animation: pulse 1.2s ease-in-out infinite;
}
.demo-bubble .dots i:nth-child(2) { animation-delay: 0.15s; }
.demo-bubble .dots i:nth-child(3) { animation-delay: 0.3s; }
.demo-code {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.78rem;
  background: #0a0e1c;
  color: #e7ecff;
  border-radius: 0.65rem;
  padding: 0.8rem 1rem;
  overflow-x: auto;
  line-height: 1.6;
  border: 1px solid rgba(255,255,255,0.06);
}
.tok-kw { color: #f4b23b; }
.tok-fn { color: #22d3ee; }
.tok-t  { color: #14b8a6; }
.tok-n  { color: #f59e0b; }

/* Sections */
.section {
  padding: clamp(3rem, 7vw, 5rem) clamp(1rem, 4vw, 2.5rem);
  position: relative;
}
.section.bg-strip {
  background: linear-gradient(180deg, transparent, hsl(var(--b2) / 0.5), transparent);
}
.section-inner { max-width: 72rem; margin: 0 auto; }
.section-title {
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  text-align: center;
  margin-bottom: 0.6rem;
}
.section-sub {
  text-align: center;
  color: hsl(var(--bc) / 0.65);
  max-width: 40rem;
  margin: 0 auto 2.5rem;
  font-size: 1rem;
  line-height: 1.6;
}

/* Features grid */
.features-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.feature-card {
  padding: 1.4rem;
  border-radius: 1.1rem;
  border: 1px solid hsl(var(--bc) / 0.1);
  background: linear-gradient(180deg, hsl(var(--b2) / 0.7), hsl(var(--b1) / 0.5));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.feature-card h3 { font-size: 1.1rem; font-weight: 600; margin: 0.75rem 0 0.4rem; }
.feature-card p  { color: hsl(var(--bc) / 0.7); font-size: 0.92rem; line-height: 1.55; }
.feature-ico {
  display: inline-grid; place-items: center;
  width: 2.4rem; height: 2.4rem;
  border-radius: 0.7rem;
  background: linear-gradient(135deg, hsl(var(--p) / 0.25), hsl(var(--s) / 0.25));
  color: hsl(var(--p));
  border: 1px solid hsl(var(--p) / 0.35);
}

/* Models grid */
.model-grid {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.model-card {
  padding: 1.4rem;
  border-radius: 1.1rem;
  border: 1px solid hsl(var(--bc) / 0.1);
  background: hsl(var(--b2) / 0.7);
  display: flex; flex-direction: column; gap: 0.6rem;
  position: relative;
  overflow: hidden;
}
.model-card::before {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--aztec-gold), var(--aztec-turquoise), var(--aztec-quetzal));
  opacity: 0.65;
}
.model-card header { display: flex; flex-direction: column; gap: 0.25rem; }
.model-card h3 { font-size: 1.25rem; font-weight: 700; }
.model-card code {
  font-size: 0.7rem; color: hsl(var(--bc) / 0.55);
  background: none; padding: 0;
}
.model-badge {
  align-self: flex-start;
  padding: 0.2rem 0.55rem;
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-radius: 999px;
  border: 1px solid hsl(var(--bc) / 0.2);
  color: hsl(var(--bc) / 0.7);
}
.model-badge.featured { background: hsl(var(--p) / 0.15); color: hsl(var(--p)); border-color: hsl(var(--p) / 0.4); }
.model-badge.agentic  { background: hsl(var(--s) / 0.15); color: hsl(var(--s)); border-color: hsl(var(--s) / 0.4); }
.model-card p { color: hsl(var(--bc) / 0.7); font-size: 0.88rem; line-height: 1.55; }
.model-specs { list-style: none; padding: 0; margin: 0.4rem 0 0; display: flex; flex-direction: column; gap: 0.3rem; }
.model-specs li {
  display: flex; align-items: center; gap: 0.4rem;
  font-size: 0.8rem;
  color: hsl(var(--bc) / 0.7);
}
.model-specs li svg { color: var(--aztec-quetzal); flex-shrink: 0; }

/* Tools showcase */
.tool-showcase {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.tool-cell {
  padding: 1.25rem;
  border-radius: 1rem;
  border: 1px solid hsl(var(--bc) / 0.08);
  background: hsl(var(--b2) / 0.55);
  position: relative;
}
.tool-num {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.72rem;
  color: hsl(var(--p) / 0.7);
  letter-spacing: 0.08em;
}
.tool-cell h4 {
  display: flex; align-items: center; gap: 0.4rem;
  font-size: 1rem; font-weight: 600; margin: 0.35rem 0 0.4rem;
}
.tool-cell p { color: hsl(var(--bc) / 0.65); font-size: 0.86rem; line-height: 1.55; }

/* Cerebras speed grid */
.speed-grid {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  margin-top: 1.25rem;
}
.speed-card {
  padding: 1.6rem 1.3rem 1.35rem;
  border-radius: 1.1rem;
  border: 1px solid hsl(var(--bc) / 0.1);
  background: linear-gradient(180deg, hsl(var(--b2) / 0.7), hsl(var(--b2) / 0.35));
  position: relative;
  overflow: hidden;
}
.speed-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at top right, hsl(var(--p) / 0.12), transparent 60%);
  pointer-events: none;
}
.speed-num {
  font-family: "Space Grotesk", sans-serif;
  font-size: 2.6rem;
  font-weight: 700;
  letter-spacing: -0.04em;
  background: linear-gradient(135deg, #ffffff 0%, #fde4a8 50%, hsl(var(--p)) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  line-height: 1;
}
.speed-unit {
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: hsl(var(--p) / 0.9);
  margin-top: 0.45rem;
  font-weight: 600;
}
.speed-card p {
  margin-top: 0.85rem;
  color: hsl(var(--bc) / 0.7);
  font-size: 0.86rem;
  line-height: 1.55;
}

/* FAQ */
.faq-grid {
  max-width: 48rem;
  margin: 0 auto;
  display: grid;
  gap: 0.6rem;
}
.faq-item {
  border: 1px solid hsl(var(--bc) / 0.1);
  border-radius: 0.9rem;
  background: hsl(var(--b2) / 0.5);
  padding: 0;
  overflow: hidden;
  transition: border-color 0.2s;
}
.faq-item[open] { border-color: hsl(var(--p) / 0.35); }
.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 1rem 1.15rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  font-weight: 600;
  font-size: 0.98rem;
  color: hsl(var(--bc) / 0.9);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary svg {
  color: hsl(var(--p));
  transition: transform 0.2s;
  flex-shrink: 0;
}
.faq-item[open] summary svg { transform: rotate(90deg); }
.faq-item p {
  padding: 0 1.15rem 1.1rem;
  color: hsl(var(--bc) / 0.7);
  font-size: 0.9rem;
  line-height: 1.6;
  margin: 0;
}
.faq-item p strong { color: hsl(var(--bc) / 0.95); }

/* Pricing tiers */
.tier-grid {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  max-width: 60rem; margin: 0 auto;
}
.tier-card {
  padding: 1.6rem 1.4rem;
  border-radius: 1.1rem;
  border: 1px solid hsl(var(--bc) / 0.1);
  background: hsl(var(--b2) / 0.55);
  display: flex; flex-direction: column; gap: 0.8rem;
  position: relative;
}
.tier-card.featured {
  border-color: hsl(var(--p) / 0.55);
  background: linear-gradient(180deg, hsl(var(--p) / 0.08), hsl(var(--b2) / 0.6));
  box-shadow: 0 20px 40px -22px hsl(var(--p) / 0.4);
}
.tier-badge {
  position: absolute; top: -0.6rem; right: 1rem;
  padding: 0.2rem 0.6rem;
  font-size: 0.62rem;
  text-transform: uppercase; letter-spacing: 0.08em;
  background: hsl(var(--p));
  color: hsl(var(--pc));
  border-radius: 999px;
  font-weight: 600;
}
.tier-card h3 { font-size: 1.1rem; font-weight: 600; color: hsl(var(--bc) / 0.8); }
.tier-price {
  font-size: 2.4rem; font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
}
.tier-suf { font-size: 0.8rem; font-weight: 400; color: hsl(var(--bc) / 0.55); }
.tier-feats { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.45rem; }
.tier-feats li {
  display: flex; align-items: center; gap: 0.5rem;
  font-size: 0.88rem;
  color: hsl(var(--bc) / 0.75);
}
.tier-feats svg { color: var(--aztec-quetzal); flex-shrink: 0; }

/* Final CTA */
.final-cta {
  position: relative;
  padding: clamp(3rem, 7vw, 5rem) clamp(1rem, 4vw, 2.5rem);
  text-align: center;
  overflow: hidden;
}
.final-cta .aurora-inner {
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(700px 400px at 50% 0%,  rgba(244, 178, 59, 0.25), transparent 65%),
    radial-gradient(700px 400px at 50% 100%, rgba(20, 184, 166, 0.2),  transparent 65%);
  animation: aurora-drift 18s ease-in-out infinite alternate;
  pointer-events: none;
}
.final-cta .cta-body { position: relative; z-index: 1; max-width: 40rem; margin: 0 auto; }
.cta-title {
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  font-weight: 700;
  letter-spacing: -0.02em;
}
.cta-sub { color: hsl(var(--bc) / 0.65); margin: 0.5rem 0 1.4rem; font-size: 1rem; }
.cta-buttons { display: flex; gap: 0.75rem; flex-wrap: wrap; justify-content: center; }

/* Footer */
.landing-footer {
  padding: 2rem clamp(1rem, 4vw, 2.5rem);
  border-top: 1px solid hsl(var(--bc) / 0.08);
  position: relative;
}
.footer-inner {
  max-width: 72rem; margin: 0 auto;
  display: flex; flex-wrap: wrap; gap: 1rem; align-items: center;
  justify-content: space-between;
  font-size: 0.86rem;
}
.footer-brand { display: flex; align-items: center; gap: 0.5rem; }
.footer-tag { color: hsl(var(--bc) / 0.55); font-size: 0.78rem; }
.footer-links { display: flex; gap: 1.25rem; flex-wrap: wrap; }
.footer-links a { color: hsl(var(--bc) / 0.65); text-decoration: none; }
.footer-links a:hover { color: hsl(var(--p)); }
.footer-aztec {
  margin-top: 1.2rem;
  height: 10px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='10' viewBox='0 0 24 10'><path fill='%23f4b23b' d='M0 7h3V5h3V3h3v2h3v2h3V5h3V3h3v2h3v2h0v3H0z'/></svg>");
  background-repeat: repeat-x;
  opacity: 0.18;
}

/* ---------- Auth page ---------- */
.auth-body {
  min-height: 100svh;
  overflow-y: auto;
}
.auth-shell {
  display: grid;
  grid-template-columns: 1fr;
  min-height: 100svh;
}
@media (min-width: 900px) {
  .auth-shell { grid-template-columns: 1.1fr 1fr; }
}
.auth-art {
  position: relative;
  display: none;
  color: hsl(var(--p));
  overflow: hidden;
  background: linear-gradient(135deg, #060812, #0b0f1f 55%, #091a1e);
}
@media (min-width: 900px) {
  .auth-art { display: block; }
}
.auth-art .art-aurora {
  position: absolute; inset: -20%;
  background:
    radial-gradient(600px 500px at 20% 30%, rgba(244, 178, 59, 0.3), transparent 60%),
    radial-gradient(600px 500px at 80% 70%, rgba(20, 184, 166, 0.28), transparent 60%);
  background-size: 200% 200%;
  animation: aurora-drift 22s ease-in-out infinite;
  filter: blur(6px);
}
.auth-art .art-rings {
  position: absolute; inset: 50% auto auto 50%;
  width: 80%; max-width: 36rem;
  transform: translate(-50%, -50%);
  color: var(--aztec-gold);
}
.auth-art .art-rings .ring-1 { transform-origin: center; animation: ring-rotate 120s linear infinite; }
.auth-art .art-rings .ring-2 { transform-origin: center; animation: ring-rotate 80s linear infinite reverse; }
.auth-art .art-rings .ring-3 { transform-origin: center; animation: ring-rotate 60s linear infinite; }
.auth-back {
  position: absolute; top: 1.25rem; left: 1.25rem; z-index: 3;
  display: inline-flex; align-items: center; gap: 0.35rem;
  color: hsl(var(--bc) / 0.7);
  text-decoration: none;
  font-size: 0.85rem;
  padding: 0.4rem 0.7rem;
  border-radius: 0.6rem;
  background: hsl(var(--b1) / 0.4);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.auth-back:hover { color: hsl(var(--p)); }
.auth-art .art-copy {
  position: absolute; left: 2rem; bottom: 2rem; z-index: 2;
  max-width: 22rem;
  color: hsl(var(--bc));
  display: flex; flex-direction: column; gap: 0.6rem;
}
.auth-art .art-copy h2 { font-size: 1.6rem; font-weight: 700; letter-spacing: -0.01em; }
.auth-art .art-copy p  { color: hsl(var(--bc) / 0.7); line-height: 1.55; font-size: 0.92rem; }
.art-glyphs {
  display: flex; gap: 0.4rem;
  color: hsl(var(--p) / 0.5);
}
.art-glyphs svg { width: 32px; height: 14px; }

/* Right pane */
.auth-main {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: clamp(1.5rem, 5vw, 3rem) clamp(1rem, 4vw, 2rem);
  padding-top: max(clamp(1.5rem, 5vw, 3rem), env(safe-area-inset-top));
  padding-bottom: max(clamp(1.5rem, 5vw, 3rem), env(safe-area-inset-bottom));
}
.auth-card {
  width: 100%;
  max-width: 26rem;
  padding: 2rem 1.8rem;
  border-radius: 1.2rem;
  border: 1px solid hsl(var(--bc) / 0.08);
  background: hsl(var(--b2) / 0.7);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: var(--shadow-float);
}
.auth-tabs {
  display: flex; gap: 0.25rem;
  background: hsl(var(--b3) / 0.4);
  padding: 0.25rem;
  border-radius: 0.7rem;
  margin-bottom: 1.2rem;
}
.auth-tab {
  flex: 1; min-height: 40px;
  border: 0; background: transparent;
  color: hsl(var(--bc) / 0.65);
  font-weight: 500; font-size: 0.88rem;
  border-radius: 0.55rem;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.auth-tab.active {
  background: hsl(var(--p));
  color: hsl(var(--pc));
  box-shadow: 0 6px 14px -8px hsl(var(--p) / 0.5);
}
.auth-panel { display: none; flex-direction: column; gap: 0.85rem; }
.auth-panel.active { display: flex; animation: reveal-in-up 0.4s var(--ease-out-soft); }

.auth-h { font-size: 1.35rem; font-weight: 700; letter-spacing: -0.01em; }
.auth-sub { color: hsl(var(--bc) / 0.65); font-size: 0.88rem; margin: -0.35rem 0 0.75rem; }

.auth-field { display: flex; flex-direction: column; gap: 0.3rem; }
.auth-label {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 0.78rem;
  color: hsl(var(--bc) / 0.75);
  font-weight: 500;
}
.auth-hint { font-size: 0.7rem; color: hsl(var(--bc) / 0.5); }
.auth-input-wrap {
  position: relative;
  display: flex; align-items: center;
  background: hsl(var(--b1) / 0.5);
  border: 1px solid hsl(var(--bc) / 0.12);
  border-radius: 0.7rem;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.auth-input-wrap:focus-within {
  border-color: hsl(var(--p) / 0.6);
  box-shadow: var(--ring-focus);
}
.auth-input-wrap > svg {
  margin: 0 0.55rem;
  color: hsl(var(--bc) / 0.55);
  flex-shrink: 0;
}
.auth-input-wrap input {
  flex: 1;
  background: transparent;
  border: 0;
  padding: 0.75rem 0.5rem 0.75rem 0;
  /* 16px minimum — prevents iOS Safari auto-zoom on focus. Audit pass 2 row 6. */
  font-size: 16px;
  color: hsl(var(--bc));
  outline: none;
  min-width: 0;
}
.auth-input-wrap input::placeholder { color: hsl(var(--bc) / 0.35); }
.auth-eye {
  background: transparent; border: 0; cursor: pointer;
  color: hsl(var(--bc) / 0.55);
  padding: 0 0.6rem;
  min-height: 44px; min-width: 44px; /* touch target */
  display: inline-flex; align-items: center; justify-content: center;
}
.auth-eye:hover { color: hsl(var(--p)); }

.pw-strength {
  height: 4px;
  border-radius: 999px;
  background: hsl(var(--bc) / 0.08);
  overflow: hidden;
  margin-top: 0.3rem;
}
.pw-strength span {
  display: block; height: 100%; width: 0;
  background: hsl(var(--error));
  transition: width 0.25s, background 0.25s;
}
.pw-strength span[data-level="2"] { background: hsl(var(--warning)); }
.pw-strength span[data-level="3"] { background: hsl(var(--s)); }
.pw-strength span[data-level="4"] { background: hsl(var(--su)); }

.auth-inline-link {
  background: none; border: 0; padding: 0;
  color: hsl(var(--p));
  font-size: 0.78rem;
  font-weight: 500;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.auth-inline-link:hover { color: hsl(var(--p) / 0.8); }

.auth-divider {
  display: flex; align-items: center; gap: 0.75rem;
  color: hsl(var(--bc) / 0.4);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin: 0.2rem 0;
}
.auth-divider::before, .auth-divider::after {
  content: ""; flex: 1; height: 1px;
  background: hsl(var(--bc) / 0.1);
}

.auth-oauth { background: hsl(var(--b1) / 0.5); border-color: hsl(var(--bc) / 0.15); }

.auth-alt {
  text-align: center;
  color: hsl(var(--bc) / 0.65);
  font-size: 0.82rem;
  margin-top: 0.4rem;
}
.auth-terms {
  font-size: 0.68rem;
  color: hsl(var(--bc) / 0.5);
  line-height: 1.45;
  text-align: center;
  margin-top: 0.5rem;
}

.auth-alert {
  padding: 0.7rem 0.9rem;
  border-radius: 0.7rem;
  font-size: 0.86rem;
  line-height: 1.4;
  border: 1px solid;
}
.auth-alert-error {
  color: hsl(var(--er));
  border-color: hsl(var(--er) / 0.4);
  background: hsl(var(--er) / 0.1);
}
.auth-alert-success {
  color: hsl(var(--su));
  border-color: hsl(var(--su) / 0.4);
  background: hsl(var(--su) / 0.1);
}

.auth-footer {
  margin-top: 1.5rem;
  font-size: 0.8rem;
  color: hsl(var(--bc) / 0.55);
  display: flex; gap: 0.6rem; align-items: center;
}
.auth-footer a { color: inherit; text-decoration: none; }
.auth-footer a:hover { color: hsl(var(--p)); }

/* ============================================================
   PHASE 2 — Mobile/responsiveness fixes
   Audit pass 2 consensus items.
   ============================================================ */

/* 2.1 — Touch targets ≥ 44×44 on coarse pointers.
   DaisyUI's btn-sm is 2rem (32px); we lift to 44 where a finger taps. */
@media (hover: none), (pointer: coarse) {
  .btn-sm, .btn-square.btn-sm { min-height: 44px; min-width: 44px; }
  .chip { min-height: 44px; }
  .mode-pill { min-height: 44px; padding-top: 0.55rem; padding-bottom: 0.55rem; }
  .code-head button { min-height: 40px; padding: 8px 12px; }
  .msg-actions button { min-height: 40px; min-width: 40px; padding: 6px 10px; }
  .side-item { min-height: 44px; }
  .tab { min-height: 44px; }
  /* DaisyUI btn-xs is only used by icon decorators — still bump for thumbs */
  .btn-xs.btn-square { min-height: 36px; min-width: 36px; }
}

/* 2.2 — iOS Safari auto-zooms on any `<input>/<textarea>` whose font-size
   is under 16px while focused. Lock the code/form fields up to 16px on
   narrow viewports even when Tailwind utility says `text-xs`. */
@media (max-width: 640px) {
  input.input, textarea.textarea, select.select,
  #sysInput, #fileContent, #stopInput, #seedInput {
    font-size: 16px !important;
  }
}

/* 2.3 — Safe-area padding on the chat stream so home-indicator doesn't
   clip the bottom message, and on the hero wrap at top for notched devices. */
#chat {
  padding-bottom: max(1rem, env(safe-area-inset-bottom));
}
.composer-shell {
  /* composer-shell already has safe-area-inset-bottom padding; keep it */
}

/* 2.5 — Rate-limit indicator on mobile: not a full pill, just a single icon
   with a title tooltip, so users still see they're approaching their cap. */
@media (max-width: 640px) {
  /* Undo the previous rule that hid the badge entirely on mobile. */
  .rate-badge { display: inline-flex !important; }
  .rate-badge {
    padding: 0.15rem 0.4rem;
    font-size: 0.62rem;
    min-height: 28px;
  }
  /* Hide the "Live" pill to make room on narrow top bars. */
  .navbar .badge.gap-1\.5.hidden.sm\:inline-flex { display: none; }
}

/* 2.6 — Explicit tablet window (iPad Mini / portrait tablet) so the composer
   gets a bit of breathing room rather than being glued to phone rules. */
@media (min-width: 768px) and (max-width: 1023px) {
  #chat { padding-left: 2rem; padding-right: 2rem; }
  .composer-shell { padding-left: 2rem; padding-right: 2rem; }
  .composer { padding: 0.85rem 0.85rem 0.85rem 1.1rem; }
  .mode-strip { gap: 0.45rem; }
}

/* Ultra-wide — give long-form content a little more breathing room. */
@media (min-width: 1600px) {
  .composer-shell .mx-auto.max-w-3xl { max-width: 56rem; }
  #chat > div { max-width: 56rem !important; }
}

/* ============================================================
   Usage dashboard — /usage.html
   ============================================================ */
.usage-body { overflow-y: auto; min-height: 100svh; }
.usage-nav {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 1rem;
  padding: 0.8rem clamp(1rem, 4vw, 2rem);
  backdrop-filter: saturate(1.2) blur(12px);
  -webkit-backdrop-filter: saturate(1.2) blur(12px);
  background: linear-gradient(to bottom, rgba(7,9,15,0.92), rgba(7,9,15,0.75));
  border-bottom: 1px solid hsl(var(--bc) / 0.08);
}
.usage-nav h1 { font-size: 1rem; font-weight: 600; letter-spacing: -0.01em; }
.usage-nav .back-link {
  display: inline-flex; align-items: center; gap: 0.3rem;
  color: hsl(var(--bc) / 0.7);
  text-decoration: none; font-size: 0.88rem;
  padding: 0.4rem 0.6rem; border-radius: 0.5rem;
}
.usage-nav .back-link:hover { color: hsl(var(--p)); }
.range-picker {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: 0.78rem; color: hsl(var(--bc) / 0.65);
}
.range-picker select {
  background: hsl(var(--b2));
  border: 1px solid hsl(var(--bc) / 0.12);
  border-radius: 0.5rem;
  padding: 0.35rem 0.5rem;
  color: hsl(var(--bc));
  font-size: 0.82rem;
}

.usage-main {
  max-width: 72rem;
  margin: 0 auto;
  padding: clamp(1.2rem, 3vw, 2rem);
  display: flex; flex-direction: column; gap: 1.1rem;
}
.usage-notice {
  padding: 0.9rem 1rem;
  border-radius: 0.75rem;
  border: 1px solid hsl(var(--p) / 0.35);
  background: hsl(var(--p) / 0.08);
  color: hsl(var(--bc));
  font-size: 0.9rem;
}

.kpi-row {
  display: grid; gap: 0.75rem;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.kpi {
  padding: 1.1rem;
  border-radius: 1rem;
  border: 1px solid hsl(var(--bc) / 0.08);
  background: hsl(var(--b2) / 0.6);
  display: flex; flex-direction: column; gap: 0.15rem;
}
.kpi-k {
  font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: hsl(var(--bc) / 0.55);
}
.kpi-v {
  font-size: 1.8rem; font-weight: 700;
  letter-spacing: -0.02em;
  color: hsl(var(--p));
}
.kpi-sub { font-size: 0.7rem; color: hsl(var(--bc) / 0.5); }

.usage-card {
  padding: 1.1rem;
  border-radius: 1rem;
  border: 1px solid hsl(var(--bc) / 0.08);
  background: hsl(var(--b2) / 0.5);
}
.usage-card header { margin-bottom: 0.8rem; }
.usage-card h2 { font-size: 1rem; font-weight: 600; }

.chart-wrap { position: relative; }
.spark { width: 100%; height: 140px; display: block; }
.spark .pt circle { transition: r 0.15s; }
.spark .pt:hover circle { r: 5; }
.chart-empty {
  text-align: center;
  color: hsl(var(--bc) / 0.5);
  font-size: 0.85rem;
  padding: 1.5rem 0;
}

.model-table { display: flex; flex-direction: column; gap: 0.8rem; }
.mrow { display: flex; flex-direction: column; gap: 0.3rem; }
.mrow-head {
  display: flex; align-items: baseline; justify-content: space-between;
  font-size: 0.88rem;
}
.mrow-head code {
  font-size: 0.8rem;
  color: hsl(var(--bc) / 0.85);
  background: none; padding: 0;
}
.mrow-cost { font-weight: 600; color: hsl(var(--p)); font-family: "JetBrains Mono", monospace; }
.mrow-bar {
  height: 6px; border-radius: 999px;
  background: hsl(var(--bc) / 0.08);
  overflow: hidden;
}
.mrow-bar span {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--aztec-gold), var(--aztec-turquoise));
  border-radius: 999px;
}
.mrow-sub {
  display: flex; gap: 1rem;
  font-size: 0.72rem;
  color: hsl(var(--bc) / 0.55);
}
.mrow-sub .cached { color: var(--aztec-turquoise); }

.recent-list { display: flex; flex-direction: column; gap: 0.3rem; }
.rrow {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  gap: 0.75rem;
  align-items: center;
  padding: 0.55rem 0.7rem;
  border-radius: 0.55rem;
  background: hsl(var(--b1) / 0.5);
  font-size: 0.82rem;
}
.rrow-when { color: hsl(var(--bc) / 0.65); font-family: "JetBrains Mono", monospace; font-size: 0.72rem; }
.rrow-model { font-size: 0.7rem; color: hsl(var(--bc) / 0.9); background: none; padding: 0; }
.rrow-tok { color: hsl(var(--bc) / 0.65); }
.rrow-cost { color: hsl(var(--p)); font-family: "JetBrains Mono", monospace; }

@media (max-width: 640px) {
  .rrow { grid-template-columns: 1fr auto; row-gap: 0.2rem; }
  .rrow-model { grid-column: 1 / 2; }
  .rrow-tok   { grid-column: 1 / 2; font-size: 0.72rem; }
  .rrow-cost  { grid-column: 2 / 3; grid-row: 1 / 2; }
}

/* ============================================================
   Folder strip + pinned chat indicator
   ============================================================ */
.folder-strip {
  display: flex; flex-wrap: wrap; gap: 0.35rem;
  padding: 0.35rem 0.7rem 0.4rem;
}
.folder-chip {
  padding: 0.25rem 0.55rem;
  font-size: 0.72rem;
  border-radius: 999px;
  border: 1px solid hsl(var(--bc) / 0.12);
  background: hsl(var(--b1) / 0.5);
  color: hsl(var(--bc) / 0.75);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.folder-chip:hover { border-color: hsl(var(--p) / 0.5); color: hsl(var(--p)); }
.folder-chip.active {
  background: hsl(var(--p) / 0.18);
  border-color: hsl(var(--p) / 0.5);
  color: hsl(var(--p));
  font-weight: 500;
}
.folder-chip.folder-add {
  border-style: dashed;
  color: hsl(var(--bc) / 0.55);
}
.side-item.pinned { background: hsl(var(--p) / 0.05); }
.side-item.pinned > svg:first-child { color: hsl(var(--p)); }
.folder-tag {
  display: inline-block;
  margin-left: 0.35rem;
  padding: 0.05rem 0.4rem;
  font-size: 0.6rem;
  color: hsl(var(--bc) / 0.55);
  background: hsl(var(--bc) / 0.08);
  border-radius: 999px;
  text-transform: none;
  letter-spacing: 0;
}

/* ============================================================
   Public share viewer — /s/:slug
   ============================================================ */
.share-body { overflow-y: auto; min-height: 100svh; }
.share-nav {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.7rem clamp(1rem, 4vw, 2rem);
  backdrop-filter: saturate(1.2) blur(12px);
  -webkit-backdrop-filter: saturate(1.2) blur(12px);
  background: linear-gradient(to bottom, rgba(7,9,15,0.92), rgba(7,9,15,0.75));
  border-bottom: 1px solid hsl(var(--bc) / 0.08);
}
.share-brand {
  display: flex; align-items: center; gap: 0.5rem;
  color: inherit; text-decoration: none;
}
.share-badge {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 0.3rem;
  padding: 0.25rem 0.6rem;
  font-size: 0.7rem;
  color: hsl(var(--p));
  background: hsl(var(--p) / 0.1);
  border: 1px solid hsl(var(--p) / 0.3);
  border-radius: 999px;
}
.share-main {
  max-width: 48rem; margin: 0 auto;
  padding: clamp(1.2rem, 3vw, 2rem);
  display: flex; flex-direction: column; gap: 1rem;
}
.share-title {
  font-size: clamp(1.4rem, 3vw, 1.9rem);
  font-weight: 700; letter-spacing: -0.02em;
  margin-bottom: 0.5rem;
}
.share-status { font-size: 0.9rem; color: hsl(var(--bc) / 0.65); }
.share-status-error {
  padding: 0.8rem;
  border-radius: 0.7rem;
  border: 1px solid hsl(var(--er) / 0.4);
  background: hsl(var(--er) / 0.08);
  color: hsl(var(--er));
}
.share-chat { display: flex; flex-direction: column; gap: 1rem; }
.share-msg {
  display: flex;
  gap: 0.75rem;
}
.share-msg.user .share-bubble {
  align-self: flex-end;
  background: linear-gradient(135deg, hsl(var(--p) / 0.2), hsl(var(--s) / 0.15));
  border: 1px solid hsl(var(--p) / 0.3);
  margin-left: auto;
  max-width: 85%;
}
.share-msg.assistant .share-bubble {
  background: hsl(var(--b2) / 0.7);
  border: 1px solid hsl(var(--bc) / 0.08);
}
.share-bubble {
  padding: 0.9rem 1.1rem;
  border-radius: 1rem;
  line-height: 1.6;
  font-size: 0.95rem;
  max-width: 100%;
  overflow-x: auto;
}
.share-bubble pre {
  margin: 0.5rem 0;
  background: #0a0e1c;
  border-radius: 0.6rem;
  padding: 0.9rem 1rem;
  overflow-x: auto;
  font-size: 0.82rem;
}
.share-bubble code { font-family: "JetBrains Mono", ui-monospace, monospace; }
.share-bubble p  { margin: 0.35rem 0; }
.share-bubble ul, .share-bubble ol { padding-left: 1.3rem; margin: 0.35rem 0; }

/* ============================================================
   Speaking state — subtle pulse on the avatar while TTS is active.
   ============================================================ */
.msg.speaking .avatar-sm {
  box-shadow: 0 0 0 0 hsl(var(--p) / 0.45);
  animation: pulse-speak 1.6s ease-in-out infinite;
}
@keyframes pulse-speak {
  0%, 100% { box-shadow: 0 0 0 0 hsl(var(--p) / 0); }
  50%      { box-shadow: 0 0 0 6px hsl(var(--p) / 0.25); }
}

/* ============================================================
   /compare — Ensemble Compare. 2x2 grid of model replies that
   stream in parallel, each cell with its own header + status.
   Reuses bubble-body markdown styles for the body content.
   ============================================================ */
/* Compare results need more width than a regular chat bubble to fit 4
   readable cells. The chat column uses flex-column + align-items: center,
   so sibling msg elements naturally shrink to their content width. Force
   stretch so the compare grid can spread across the full chat column. */
.msg.assistant:has(.compare-grid) {
  align-self: stretch;
  width: 100%;
  max-width: 100%;
}
.msg.assistant:has(.compare-grid) .bubble {
  max-width: 100%;
  width: 100%;
  flex: 1;
}
.compare-header {
  display: flex; align-items: center; gap: 6px;
  font-size: 0.72rem; font-weight: 600;
  color: hsl(var(--bc) / 0.7);
  margin-bottom: 8px;
  text-transform: uppercase; letter-spacing: 0.04em;
}
.compare-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
@media (max-width: 720px) {
  .compare-grid { grid-template-columns: 1fr; }
}
.compare-cell {
  border: 1px solid hsl(var(--bc) / 0.12);
  border-radius: 10px;
  background: hsl(var(--b1));
  padding: 8px 10px;
  min-height: 120px;
  display: flex; flex-direction: column; gap: 6px;
  overflow: hidden;
}
.compare-cell-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
  font-size: 0.78rem;
  border-bottom: 1px dashed hsl(var(--bc) / 0.1);
  padding-bottom: 4px;
}
.compare-cell-head strong {
  font-weight: 600;
  letter-spacing: 0.01em;
}
.compare-cell-status {
  font-size: 0.66rem;
  color: hsl(var(--bc) / 0.55);
  font-variant-numeric: tabular-nums;
}
.compare-cell.streaming .compare-cell-status::before {
  content: ''; display: inline-block;
  width: 6px; height: 6px; border-radius: 50%;
  background: hsl(var(--p)); margin-right: 5px;
  animation: pulse-speak 1.1s ease-in-out infinite;
  vertical-align: middle;
}
.compare-cell.errored {
  border-color: hsl(var(--er) / 0.4);
  background: hsl(var(--er) / 0.06);
}
.compare-cell.errored .compare-cell-status { color: hsl(var(--er)); }
.compare-cell.done { border-color: hsl(var(--su) / 0.35); }
.compare-cell-body {
  font-size: 0.86rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
  overflow-y: auto;
  max-height: 420px;
}
.compare-cell-body pre { font-size: 0.72rem; }
.compare-footer {
  margin-top: 8px;
  font-size: 0.7rem;
  color: hsl(var(--bc) / 0.55);
  text-align: right;
}