/* EasyAgent chat UI — bundled with the Strauss showcase profile.
 * Profile-accented sibling of the bryanzane.com homepage's blue accents.
 * Editorial vocabulary inherited from /llmbench/.
 */

:root {
  --bg-paper:  #FAFAF7;
  --bg-paper-2:#F3F2EC;
  --ink-900:   #0B0F1A;
  --ink-700:   #1F2638;
  --ink-500:   #4A5165;
  --ink-400:   #6B7285;
  --ink-300:   #9198A8;
  --ink-200:   #C7CBD4;
  --ink-100:   #E7E6DF;
  --rule:      rgba(12, 16, 28, 0.12);
  --rule-2:    rgba(12, 16, 28, 0.06);
  --orange-900: #5C1F00;
  --orange-700: #B33C00;
  --orange-500: #FF5500;
  --orange-300: #FF8C5A;
  --orange-200: #FFD5C2;
  --orange-100: #FFE7DA;
  --accent-lime: #9BD400;

  /* Legacy named palettes remain for reference; live chrome uses --profile-* vars. */
  --green-900: #0F3D23;
  --green-700: #1F5C36;
  --green-500: #2E7B3E;
  --green-300: #4DA66B;
  --green-200: #BFE2C5;
  --green-100: #DDF0E1;

  /* Profile brand indirection; app.js writes these from /api/profile.brand. */
  --profile-accent: #2E7B3E;
  --profile-accent-dark: #0F3D23;
  --profile-accent-soft: #DDF0E1;
  --profile-grid: rgba(46, 123, 62, 0.15);
  --profile-mark: #9BD400;
  --accent-900: var(--profile-accent-dark);
  --accent-700: color-mix(in srgb, var(--profile-accent-dark) 72%, var(--profile-accent));
  --accent-500: var(--profile-accent);
  --accent-300: color-mix(in srgb, var(--profile-accent) 58%, #fff);
  --accent-200: color-mix(in srgb, var(--profile-accent-soft) 74%, #fff);
  --accent-100: var(--profile-accent-soft);
  --accent-mark:   var(--profile-mark);   /* secondary sweep/mascot mark */
  --accent-banner: var(--profile-accent); /* big EASY AGENT hero banner */

  --serif: "Source Serif 4", Georgia, serif;
  --sans:  "Inter Tight", -apple-system, "Helvetica Neue", Arial, sans-serif;
  --mono:  "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --ed-nav-h: 52px;
  --chat-max: 1080px;
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  min-height: 100%;
  overflow-x: hidden;
  background: var(--bg-paper);
  color: var(--ink-900);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--accent-200); color: var(--accent-900); }

body {
  min-height: 100vh;
}

html[data-profile="frampton"],
html:has(body[data-profile="frampton"]) {
  background: #070404;
}

.ember-field {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
  opacity: 0;
  transition: opacity 420ms ease;
}
.ember-field span {
  position: absolute;
  left: var(--ember-left, 50%);
  bottom: -8vh;
  width: var(--ember-size, 3px);
  height: var(--ember-size, 3px);
  background: var(--ember-color, #ffb35c);
  box-shadow:
    0 0 6px color-mix(in srgb, var(--ember-color, #ffb35c) 82%, transparent),
    0 0 14px rgba(225, 29, 72, 0.28);
  opacity: 0;
  image-rendering: pixelated;
  animation: ember-rise var(--ember-duration, 9s) linear infinite;
  animation-delay: var(--ember-delay, 0s);
}

@keyframes ember-rise {
  0% {
    transform: translate3d(0, 0, 0) scale(0.7);
    opacity: 0;
  }
  12% {
    opacity: var(--ember-opacity, 0.62);
  }
  82% {
    opacity: var(--ember-opacity, 0.62);
  }
  100% {
    transform: translate3d(var(--ember-drift, 0), -114vh, 0) scale(1);
    opacity: 0;
  }
}

body[data-profile="frampton"] {
  --bg-paper: #070404;
  --bg-paper-2: #130b08;
  --ink-900: #fff1df;
  --ink-700: #f2c7ac;
  --ink-500: #c9967d;
  --ink-400: #a97463;
  --ink-300: #76564f;
  --ink-200: #4c2d29;
  --ink-100: #21100d;
  --rule: rgba(255, 186, 138, 0.18);
  --rule-2: rgba(255, 186, 138, 0.08);
  color-scheme: dark;
  background:
    radial-gradient(circle at 14% 18%, rgba(179, 38, 30, 0.24), transparent 30rem),
    radial-gradient(circle at 82% 4%, rgba(225, 29, 72, 0.14), transparent 22rem),
    linear-gradient(180deg, #080403 0%, #0f0705 48%, #050302 100%);
}
body[data-profile="frampton"] .ember-field {
  opacity: 1;
}
body[data-profile="frampton"] .ed-nav {
  background: rgba(7, 4, 4, 0.92);
}
body[data-profile="frampton"] .lb-hero {
  background: transparent;
}
body[data-profile="frampton"] .lb-hero-grid-bg {
  opacity: 0.32;
}
body[data-profile="frampton"] .chat-form {
  background: rgba(7, 4, 4, 0.90);
  box-shadow: 0 -18px 42px rgba(2, 1, 1, 0.82);
}
body[data-profile="frampton"] .agent-select-wrap,
body[data-profile="frampton"] .agent-tool-chip,
body[data-profile="frampton"] .tool-schema-close,
body[data-profile="frampton"] .chat-input-row {
  background: rgba(255, 226, 196, 0.055);
}
body[data-profile="frampton"] .agent-info,
body[data-profile="frampton"] .token-panel,
body[data-profile="frampton"] .tool-schema-dialog,
body[data-profile="frampton"] .tool-schema-head,
body[data-profile="frampton"] .msg-agent code,
body[data-profile="frampton"] .msg-agent pre,
body[data-profile="frampton"] .msg-thinking .thinking-content code,
body[data-profile="frampton"] .msg-thinking .thinking-content pre {
  background: rgba(255, 226, 196, 0.06);
}
body[data-profile="frampton"] .tool-schema-json {
  background: #0b0504;
  color: var(--ink-700);
}
body[data-profile="frampton"] .btn-send {
  background: var(--profile-accent);
  color: #fff4e8;
}
body[data-profile="frampton"] .btn-send:hover {
  background: #e03a2c;
}

/* ────── Sticky nav (sibling pattern with /llmbench/) ────── */

.ed-nav {
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(250, 250, 247, 0.92);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--rule);
}
.ed-nav-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 14px 32px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
}
.ed-nav-brand {
  display: flex;
  align-items: baseline;
  gap: 10px;
  text-decoration: none;
  color: var(--ink-900);
}
.ed-nav-mark {
  font-family: var(--serif);
  font-size: 20px;
  font-style: italic;
}
.ed-nav-vol {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-500);
}
.ed-nav-link {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-700);
  text-decoration: none;
  transition: color 0.15s;
}
.ed-nav-link:hover { color: var(--accent-700); }
.ed-nav-links {
  display: flex;
  gap: 24px;
}
.ed-nav-links a {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-700);
  text-decoration: none;
  transition: color 0.15s;
}
.ed-nav-links a:hover { color: var(--accent-700); }

/* ────── Hero ────── */

.lb-hero {
  position: sticky;
  top: var(--ed-nav-h);
  z-index: 20;
  padding: 28px 32px 22px;
  border-bottom: 0;
  background: color-mix(in srgb, var(--bg-paper) 90%, transparent);
  overflow: hidden;
}
.lb-hero-grid-bg {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(var(--profile-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--profile-grid) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 30% 40%, #000, transparent);
          mask-image: radial-gradient(ellipse 70% 60% at 30% 40%, #000, transparent);
  opacity: 0.45;
  z-index: 0;
}
.lb-hero-inner {
  position: relative;
  z-index: 2;
  max-width: 880px;
  margin: 0 auto;
}
.lb-eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--accent-700);
  text-transform: uppercase;
  margin: 0 0 18px;
}
.lb-banner-h1 {
  display: flex;
  align-items: flex-start;
  gap: clamp(8px, 1vw, 18px);
  margin: 0;
  font-weight: inherit;
  font-size: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  min-width: 0;
}
.lb-banner-row {
  display: flex;
  align-items: flex-start;
  gap: clamp(8px, 1vw, 18px);
  position: relative;
  width: 100%;
}
.lb-banner {
  font-family: var(--mono);
  font-size: clamp(6px, 1.2vw, 12px);
  line-height: 1.05;
  margin: 0;
  white-space: pre;
  overflow: visible;

  /* Flat color fallback (no background-clip:text). */
  color: var(--accent-banner);

  /* Sweep gradient: NEW (current accent) on the left half, OLD (--accent-banner-prev,
     defaults to current accent so first paint reads as a single solid color) on the
     right half. Animating background-position from 100% 0 → 0% 0 wipes the new color
     in from the left. */
  background-image: linear-gradient(
    90deg,
    var(--accent-banner) 0%,
    var(--accent-banner) 50%,
    var(--accent-banner-prev, var(--accent-banner)) 50%,
    var(--accent-banner-prev, var(--accent-banner)) 100%
  );
  background-size: 200% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: background-position 720ms cubic-bezier(0.45, 0, 0.55, 1);
}
body.is-sweeping .lb-banner { background-position: 0% 0; }

/* Per-agent face — separate <pre> sibling sharing .lb-banner styling. The
   min-* reservations keep the row's height + width steady when faces vary in
   line count or character width across agents. */
.lb-face {
  min-height: calc(6em * 1.05);
  min-width: 11ch;
  color: var(--accent-mark);
}

/* Sweep scan-line: a 1px secondary profile line that traces left → right across
   the banner row concurrently with the gradient wipe, then fades at the tail.
   Only visible while body.is-sweeping is on. */
.lb-banner-row::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: var(--accent-mark);
  opacity: 0;
  transform: translateX(-100%);
  pointer-events: none;
}
body.is-sweeping .lb-banner-row::after {
  opacity: 0.55;
  transform: translateX(0);
  transition:
    transform 720ms cubic-bezier(0.45, 0, 0.55, 1),
    opacity 200ms ease 520ms;
}

@media (prefers-reduced-motion: reduce) {
  .lb-banner { transition: none; }
  .lb-face { transition: none; }
  body.is-sweeping .lb-banner-row::after { display: none; }
}
.lb-hero-action-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 16px;
  margin-top: 14px;
}
.lb-tagline {
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(14px, 1.4vw, 17px);
  color: var(--ink-700);
  line-height: 1.4;
  text-wrap: pretty;
  max-width: 640px;
}
.lb-hero-cta {
  display: inline-block;
  flex: 0 0 auto;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-700);
  border: 1px solid var(--accent-500);
  background: transparent;
  padding: 8px 18px;
  text-decoration: none;
  white-space: nowrap;
  transition: background 120ms ease, color 120ms ease;
}
.lb-hero-cta:hover {
  background: var(--accent-500);
  color: #fff;
}

/* ────── Credit / "Made with EasyAgent" sub-banner ────── */

.lb-credit {
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 36px 32px 32px;
  background: var(--bg-paper-2);
}
.lb-credit-inner {
  max-width: 880px;
  margin: 0 auto;
  text-align: center;
}
.lb-subbanner {
  font-family: var(--mono);
  font-size: clamp(3px, 0.78vw, 7px);
  line-height: 1.05;
  color: var(--accent-500);
  margin: 0 0 18px;
  white-space: pre;
  overflow: visible;
  display: inline-block;
}
.lb-credit-text {
  font-family: var(--serif);
  font-size: 15px;
  color: var(--ink-700);
  margin: 0 0 18px;
}
.lb-credit-cta {
  display: inline-block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-700);
  border: 1px solid var(--accent-500);
  background: transparent;
  padding: 9px 20px;
  text-decoration: none;
  transition: background 120ms ease, color 120ms ease;
}
.lb-credit-cta:hover {
  background: var(--accent-500);
  color: #fff;
}
.lb-lede {
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.55;
  color: var(--ink-700);
  margin: 22px 0 0;
  max-width: 640px;
  text-wrap: pretty;
}
.lb-section-kicker {
  display: inline-block;
  margin-top: 18px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-400);
}

/* ────── Chat layout ────── */

.chat {
  max-width: var(--chat-max);
  margin: 0 auto;
  padding: 28px 24px 0;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  position: relative;
  z-index: 2;
  width: 100%;
}
.chat-feed {
  flex: 0 0 var(--chat-feed-h, 44vh);
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
  height: var(--chat-feed-h, 44vh);
  min-height: 160px;
  padding: 0 0 1.5rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  position: relative;
}

/* ────── Messages ────── */

.msg { line-height: 1.55; }
.msg p { margin: 0 0 0.6rem; }
.msg p:last-child { margin-bottom: 0; }

.msg-system {
  font-family: var(--sans);
  font-size: 0.92rem;
  color: var(--ink-500);
  border-left: 2px solid var(--accent-100);
  padding: 0.2rem 0 0.2rem 0.9rem;
}
.msg-system .intro-copy {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.25rem 0.5rem;
  max-width: min(66ch, 100%);
  margin: 0 0 0.75rem;
  min-width: 0;
}
.intro-hello,
.intro-rest {
  line-height: 1.55;
}
.intro-rest {
  flex: 1 1 24rem;
}
.intro-name {
  display: flex;
  align-items: center;
  flex: 0 1 max-content;
  gap: 0.08rem;
  min-width: 0;
  max-width: 100%;
  overflow: visible;
}
.strauss-mark {
  font-family: var(--mono);
  font-size: clamp(7px, 0.95vw, 10px);
  line-height: 1.05;
  color: var(--profile-accent);
  margin: 0;
  max-width: 100%;
  white-space: pre;
  overflow: visible;
  flex: 0 0 auto;
}

/* Decorative ASCII should scale or overflow visibly, never become a nested
   scroll container. Code blocks keep their own overflow rules below. */
.lb-banner,
.lb-face,
.lb-subbanner,
.intro-name,
.strauss-mark {
  scrollbar-width: none;
}
.lb-banner::-webkit-scrollbar,
.lb-face::-webkit-scrollbar,
.lb-subbanner::-webkit-scrollbar,
.intro-name::-webkit-scrollbar,
.strauss-mark::-webkit-scrollbar {
  display: none;
}
.intro-period {
  color: var(--ink-500);
  line-height: 1;
  margin-left: 0.05rem;
}
.msg-system .hint {
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--ink-300);
  margin-top: 0.35rem;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem 0.45rem;
}
.msg-system em { font-style: italic; color: var(--accent-900); }
.suggestion-btn {
  appearance: none;
  border: 1px solid var(--rule);
  background: color-mix(in srgb, var(--accent-500) 3%, transparent);
  color: var(--accent-900);
  cursor: pointer;
  font-family: var(--mono);
  font-size: 0.78rem;
  font-style: italic;
  line-height: 1.35;
  padding: 0.18rem 0.45rem 0.22rem;
  transition:
    background 120ms ease,
    border-color 120ms ease,
    color 120ms ease;
}
.suggestion-btn:hover,
.suggestion-btn:focus-visible {
  background: var(--accent-100);
  border-color: var(--accent-500);
  color: var(--accent-700);
  outline: none;
}
.suggestion-btn:disabled {
  background: transparent;
  border-color: var(--rule-2);
  color: var(--ink-300);
  cursor: not-allowed;
}

/* ────── Welcome stream-in ──────
   Adding .is-streaming on .msg-system triggers a CSS animation-delay cascade
   across the existing intro children. No JS-driven timing — JS just toggles
   the class. The blinking ▋ caret on .intro-rest::after delivers the
   "streaming" feel without typewriter-stepping the text content. */
@keyframes ea-fade-up {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes ea-clip-reveal {
  from { clip-path: inset(0 0 100% 0); opacity: 0.4; }
  to   { clip-path: inset(0 0 0 0); opacity: 1; }
}
@keyframes ea-caret-blink {
  0%, 49%   { opacity: 1; }
  50%, 100% { opacity: 0; }
}

.msg-system.is-streaming .intro-hello,
.msg-system.is-streaming .intro-name,
.msg-system.is-streaming .intro-rest,
.msg-system.is-streaming .hint > * {
  opacity: 0;
  animation: ea-fade-up 280ms cubic-bezier(0.2, 0, 0, 1) forwards;
}
.msg-system.is-streaming .intro-hello { animation-delay: 0ms; }
.msg-system.is-streaming .intro-name  { animation-delay: 80ms; }
.msg-system.is-streaming .intro-name .strauss-mark {
  animation: ea-clip-reveal 420ms cubic-bezier(0.2, 0, 0, 1) 80ms forwards;
}
.msg-system.is-streaming .intro-rest  { animation-delay: 220ms; }
.msg-system.is-streaming .hint > *:nth-child(1) { animation-delay: 480ms; }
.msg-system.is-streaming .hint > *:nth-child(2) { animation-delay: 540ms; }
.msg-system.is-streaming .hint > *:nth-child(3) { animation-delay: 600ms; }
.msg-system.is-streaming .hint > *:nth-child(4) { animation-delay: 660ms; }
.msg-system.is-streaming .hint > *:nth-child(5) { animation-delay: 720ms; }

.msg-system.is-streaming .intro-rest::after {
  content: " ▋";
  color: var(--profile-accent);
  animation: ea-caret-blink 600ms steps(2, end) infinite;
  display: inline-block;
  margin-left: 0.1em;
}

@media (prefers-reduced-motion: reduce) {
  .msg-system.is-streaming .intro-hello,
  .msg-system.is-streaming .intro-name,
  .msg-system.is-streaming .intro-name .strauss-mark,
  .msg-system.is-streaming .intro-rest,
  .msg-system.is-streaming .hint > * {
    animation: none;
    opacity: 1;
    transform: none;
    clip-path: none;
  }
  .msg-system.is-streaming .intro-rest::after {
    content: none;
    animation: none;
  }
}

.msg-user {
  font-family: var(--mono);
  font-size: 0.88rem;
  color: var(--ink-700);
  border-left: 2px solid var(--accent-500);
  padding: 0.15rem 0 0.15rem 0.9rem;
}
.msg-user::before {
  content: "> ";
  color: var(--accent-500);
}

.msg-agent {
  font-family: var(--serif);
  font-size: 17px;
  color: var(--ink-900);
  line-height: 1.6;
  max-width: 64ch;
}

/* ── Markdown inside an agent bubble ── */
.msg-agent > *:first-child { margin-top: 0; }
.msg-agent > *:last-child  { margin-bottom: 0; }
.msg-agent p { margin: 0 0 0.75rem; }
.msg-agent h1,
.msg-agent h2,
.msg-agent h3,
.msg-agent h4 {
  font-family: var(--serif);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink-900);
  margin: 1.25rem 0 0.55rem;
  line-height: 1.25;
}
.msg-agent h1 { font-size: 1.5rem; }
.msg-agent h2 { font-size: 1.3rem; }
.msg-agent h3 { font-size: 1.12rem; }
.msg-agent h4 { font-size: 1rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-700); }
.msg-agent ul,
.msg-agent ol {
  margin: 0.2rem 0 0.85rem;
  padding-left: 1.4rem;
}
.msg-agent li { margin: 0.2rem 0; }
.msg-agent li > p { margin: 0 0 0.3rem; }
.msg-agent strong { font-weight: 600; color: var(--ink-900); }
.msg-agent em { font-style: italic; }
.msg-agent a {
  color: var(--accent-700);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
.msg-agent a:hover { color: var(--accent-500); }
.msg-agent code {
  font-family: var(--mono);
  font-size: 0.86em;
  background: var(--bg-paper-2);
  padding: 0.08em 0.32em;
  border-radius: 2px;
  color: var(--ink-900);
}
.msg-agent pre {
  font-family: var(--mono);
  font-size: 0.82rem;
  line-height: 1.5;
  background: var(--bg-paper-2);
  border: 1px solid var(--rule);
  padding: 0.75rem 0.9rem;
  margin: 0.6rem 0 0.9rem;
  overflow-x: auto;
  white-space: pre;
}
.msg-agent pre code {
  background: none;
  padding: 0;
  font-size: inherit;
  color: var(--ink-900);
}

/* highlight.js token theme for the cream/orange editorial palette.
   Class names mirror highlight.js output (.hljs-*). */
.msg-agent .hljs-comment,
.msg-agent .hljs-quote { color: var(--ink-400); font-style: italic; }
.msg-agent .hljs-keyword,
.msg-agent .hljs-selector-tag,
.msg-agent .hljs-literal,
.msg-agent .hljs-section,
.msg-agent .hljs-link { color: var(--accent-700); }
.msg-agent .hljs-string,
.msg-agent .hljs-attr,
.msg-agent .hljs-attribute,
.msg-agent .hljs-symbol { color: #2C5E2E; }
.msg-agent .hljs-number,
.msg-agent .hljs-meta,
.msg-agent .hljs-built_in,
.msg-agent .hljs-builtin-name { color: #6B4BA0; }
.msg-agent .hljs-title,
.msg-agent .hljs-title.class_,
.msg-agent .hljs-title.function_,
.msg-agent .hljs-name { color: #1F4F8E; font-weight: 500; }
.msg-agent .hljs-type,
.msg-agent .hljs-variable.language_,
.msg-agent .hljs-tag { color: #8A3324; }
.msg-agent .hljs-regexp,
.msg-agent .hljs-template-tag,
.msg-agent .hljs-template-variable { color: #6B4BA0; }
.msg-agent .hljs-deletion { color: #8A3324; }
.msg-agent .hljs-addition { color: #2C5E2E; }
.msg-agent .hljs-emphasis { font-style: italic; }
.msg-agent .hljs-strong { font-weight: 600; }

/* KaTeX block math: centered, breathing room, scrolls if too wide. */
.msg-agent .ea-math-block {
  margin: 0.75rem 0 0.95rem;
  overflow-x: auto;
  text-align: center;
}
.msg-agent .ea-math-block .katex-display { margin: 0; }
.msg-agent .katex { font-size: 1.05em; }
.msg-thinking .thinking-content .katex { font-size: 0.95em; }
.msg-agent blockquote {
  margin: 0.6rem 0 0.9rem;
  padding: 0.1rem 0 0.1rem 0.9rem;
  border-left: 2px solid var(--accent-200);
  color: var(--ink-700);
  font-style: italic;
}
.msg-agent hr {
  border: none;
  border-top: 1px solid var(--rule);
  margin: 1.2rem 0;
}
.msg-agent table {
  border-collapse: collapse;
  margin: 0.6rem 0 0.9rem;
  font-size: 0.92rem;
  font-family: var(--sans);
}
.msg-agent th,
.msg-agent td {
  border-bottom: 1px solid var(--rule);
  padding: 0.4rem 0.7rem 0.4rem 0;
  text-align: left;
}
.msg-agent th { color: var(--ink-500); font-weight: 600; }

/* ── Thinking / reasoning bubble ── */
.msg-thinking {
  border-left: 2px solid var(--ink-200);
  padding: 0.15rem 0 0.15rem 0.9rem;
  color: var(--ink-500);
  max-width: 64ch;
}
.msg-thinking .thinking-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-400);
  padding: 0.1rem 0;
}
.msg-thinking .thinking-content {
  font-family: var(--serif);
  font-style: italic;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-500);
  margin-top: 0.4rem;
}
.msg-thinking .thinking-content > *:first-child { margin-top: 0; }
.msg-thinking .thinking-content > *:last-child  { margin-bottom: 0; }
.msg-thinking .thinking-content p { margin: 0 0 0.55rem; }
.msg-thinking .thinking-content code {
  font-family: var(--mono);
  font-style: normal;
  font-size: 0.85em;
  background: var(--bg-paper-2);
  padding: 0.06em 0.28em;
  border-radius: 2px;
  color: var(--ink-700);
}
.msg-thinking .thinking-content pre {
  font-family: var(--mono);
  font-style: normal;
  font-size: 0.78rem;
  line-height: 1.5;
  background: var(--bg-paper-2);
  border: 1px solid var(--rule-2);
  padding: 0.6rem 0.8rem;
  margin: 0.5rem 0;
  overflow-x: auto;
  color: var(--ink-700);
}
.msg-thinking .thinking-content ul,
.msg-thinking .thinking-content ol {
  margin: 0.2rem 0 0.6rem;
  padding-left: 1.4rem;
}

/* ── Activity drawer (per-turn collapsible for thinking + tool calls) ── */
.activity-drawer {
  border: 1px dashed var(--rule-2);
  background: color-mix(in srgb, var(--bg-paper) 92%, transparent);
  padding: 0;
  font-family: var(--mono);
  max-width: 64ch;
}
.activity-drawer > summary {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.7rem;
  cursor: pointer;
  user-select: none;
  list-style: none;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-500);
}
.activity-drawer > summary::-webkit-details-marker { display: none; }
.activity-drawer > summary::before {
  content: "▸";
  display: inline-block;
  font-size: 9px;
  color: var(--ink-300);
  transition: transform 120ms ease;
}
.activity-drawer[open] > summary::before { transform: rotate(90deg); }
.activity-drawer > summary:hover { color: var(--accent-700); }
.activity-drawer .activity-icon {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--accent-700);
  display: inline-block;
  flex: 0 0 9px;
}
.activity-drawer.is-running .activity-icon {
  animation: activity-pulse 1.2s ease-in-out infinite;
}
.activity-drawer.is-done .activity-icon { background: var(--ink-300); animation: none; }
.activity-drawer.is-error .activity-icon { background: #a23636; animation: none; }
@keyframes activity-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.35; transform: scale(0.6); }
}
.activity-drawer .activity-label { font-weight: 500; }
.activity-drawer .activity-meta {
  font-size: 9px;
  color: var(--ink-400);
  text-transform: none;
  letter-spacing: 0.04em;
  margin-left: auto;
}
.activity-drawer .activity-body {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  padding: 0.55rem 0.85rem 0.75rem 1.7rem;
  border-top: 1px solid var(--rule-2);
}
.activity-drawer:not([open]) .activity-body { display: none; }
@media (prefers-reduced-motion: reduce) {
  .activity-drawer.is-running .activity-icon { animation: none; opacity: 0.6; }
}

/* ── Per-message token hover chip ── */
.has-token-chip { position: relative; }
.has-token-chip::after {
  content: attr(data-tokens) " " attr(data-token-label) " tokens";
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 4px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-500);
  background: var(--bg-paper);
  border: 1px solid var(--rule);
  padding: 1px 6px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms ease;
  white-space: nowrap;
  z-index: 2;
}
.has-token-chip:hover::after,
.has-token-chip:focus-within::after { opacity: 1; }

.msg-tool {
  font-family: var(--mono);
  font-size: 11px;
  font-style: italic;
  color: var(--ink-500);
  letter-spacing: 0.02em;
}
.msg-tool::before { content: "[ "; color: var(--ink-300); }
.msg-tool::after  { content: " ]"; color: var(--ink-300); }
.msg-tool .dots::after {
  content: "";
  display: inline-block;
  animation: dotcycle 1.2s steps(4, end) infinite;
}
@keyframes dotcycle {
  0%   { content: ""; }
  25%  { content: "."; }
  50%  { content: ".."; }
  75%  { content: "..."; }
  100% { content: ""; }
}
@media (prefers-reduced-motion: reduce) {
  .msg-tool .dots::after { animation: none; content: "…"; }
}
.msg-tool.is-done {
  font-style: normal;
  color: var(--ink-400);
}
.msg-tool.is-done strong { color: var(--ink-500); font-weight: 500; }
.msg-tool.is-error {
  font-style: normal;
  color: #a23636;
}
.msg-tool .tool-tail { color: inherit; }

.tool-sources {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-500);
  border-left: 1px solid var(--rule-2);
  margin: -0.1rem 0 0.55rem 0.9rem;
  padding-left: 0.7rem;
  max-width: min(620px, 100%);
}
.tool-sources summary {
  cursor: pointer;
  color: var(--ink-600);
  list-style-position: outside;
}
.tool-source-list {
  display: grid;
  gap: 0.25rem;
  margin: 0.45rem 0 0;
  padding: 0;
  list-style: none;
}
.tool-source-list li {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.35rem;
  min-width: 0;
}
.tool-source-label {
  color: var(--ink-700);
  overflow-wrap: anywhere;
}
.tool-source-kind,
.tool-source-hidden {
  color: var(--ink-400);
}
.tool-source-kind::before {
  content: "· ";
}
.tool-source-hidden {
  margin-top: 0.35rem;
}

.msg-error {
  font-family: var(--mono);
  font-size: 0.82rem;
  color: #a23636;
  border-left: 2px solid #d8a0a0;
  padding-left: 0.9rem;
}

/* ────── Form ────── */

.chat-form {
  border-top: 1px solid var(--rule);
  padding: 0.85rem 24px max(0.85rem, env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--bg-paper) 92%, transparent);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  width: min(var(--chat-max), 100vw);
  bottom: 0;
  max-width: 100%;
  min-width: 0;
  z-index: 35;
  box-shadow: 0 -18px 32px color-mix(in srgb, var(--bg-paper) 82%, transparent);
}
.chat-controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 0.55rem;
  font-family: var(--mono);
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-500);
  max-width: 100%;
  min-width: 0;
}
.model-static {
  color: var(--ink-700);
  border: 1px solid var(--rule);
  padding: 0.18rem 0.45rem;
  background: color-mix(in srgb, var(--accent-500) 4%, transparent);
}
.btn-ghost {
  font-family: var(--mono);
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: none;
  border: 1px solid var(--rule);
  color: var(--ink-500);
  padding: 0.2rem 0.6rem;
  cursor: pointer;
  margin-left: auto;
}
.btn-ghost:hover { color: var(--accent-900); border-color: var(--accent-500); }
.btn-toggle-stats { margin-left: 0; }
.btn-toggle-stats[aria-pressed="false"] {
  color: var(--ink-300);
  border-color: var(--rule-2);
}
.btn-toggle-stats[aria-pressed="false"]:hover {
  color: var(--accent-900);
  border-color: var(--accent-500);
}

/* ────── Agent switcher + info panel ────── */

.agent-select-wrap {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  border: 1px solid var(--rule);
  padding: 0.14rem 0.45rem 0.14rem 0.5rem;
  background: #fff;
  max-width: 100%;
  min-width: 0;
}
.agent-select-label {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  color: var(--ink-400);
}
.agent-select {
  font-family: var(--mono);
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-700);
  background: transparent;
  border: none;
  padding: 0.06rem 0.1rem;
  cursor: pointer;
  width: clamp(10rem, 22vw, 20rem);
  appearance: none;
  -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-400) 50%),
                    linear-gradient(135deg, var(--ink-400) 50%, transparent 50%);
  background-position: calc(100% - 9px) 50%, calc(100% - 5px) 50%;
  background-size: 4px 4px, 4px 4px;
  background-repeat: no-repeat;
  padding-right: 1.1rem;
  max-width: 100%;
  min-width: 0;
}
.agent-select:focus { outline: none; color: var(--accent-900); }

.agent-info {
  margin: 0.55rem 0 0.35rem;
  border: 1px solid var(--rule);
  background: var(--bg-paper-2);
  font-family: var(--mono);
  font-size: 0.74rem;
  color: var(--ink-500);
}
.agent-info > summary {
  cursor: pointer;
  list-style: none;
  user-select: none;
  padding: 0.35rem 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-400);
}
.agent-info > summary::-webkit-details-marker { display: none; }
.agent-info > summary::before {
  content: "+ ";
  display: inline-block;
  margin-right: 0.2rem;
  color: var(--ink-300);
}
.agent-info[open] > summary::before { content: "− "; }
.agent-info > summary:hover { color: var(--accent-900); }

.agent-info-body {
  padding: 0.2rem 0.7rem 0.55rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  border-top: 1px dotted var(--ink-200);
}
.agent-info-row {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  line-height: 1.45;
}
.agent-info-label {
  flex: 0 0 5.5rem;
  color: var(--ink-300);
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.agent-info-value {
  flex: 1 1 auto;
  color: var(--ink-700);
  word-break: break-word;
}

.agent-tool-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.32rem;
}

.agent-tool-chip {
  appearance: none;
  border: 1px solid var(--rule);
  background: #fff;
  color: var(--ink-700);
  font: inherit;
  font-size: 0.68rem;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.28rem 0.42rem;
  cursor: pointer;
  transition:
    color 160ms ease,
    border-color 160ms ease,
    background-color 160ms ease;
}

.agent-tool-chip:hover,
.agent-tool-chip:focus-visible {
  border-color: var(--accent-500);
  color: var(--accent-900);
  background: var(--accent-100);
  outline: none;
}

.agent-tool-chip:disabled {
  cursor: not-allowed;
  color: var(--ink-300);
  border-color: var(--ink-200);
  background: transparent;
}

.tool-schema-dialog {
  width: min(720px, calc(100vw - 2rem));
  max-height: min(720px, calc(100vh - 2rem));
  padding: 0;
  border: 1px solid var(--ink-900);
  background: var(--bg-paper);
  color: var(--ink-900);
  box-shadow: 0 24px 80px rgba(31, 26, 21, 0.26);
}

.tool-schema-dialog::backdrop {
  background: rgba(31, 26, 21, 0.42);
}

.tool-schema-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.7rem 0.85rem;
  border-bottom: 1px solid var(--rule);
  background: var(--bg-paper-2);
}

.tool-schema-title {
  margin: 0;
  font-family: var(--mono);
  font-size: 0.78rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent-900);
}

.tool-schema-close {
  appearance: none;
  width: 1.8rem;
  height: 1.8rem;
  border: 1px solid var(--rule);
  background: #fff;
  color: var(--ink-700);
  font-family: var(--mono);
  font-size: 0.9rem;
  line-height: 1;
  cursor: pointer;
}

.tool-schema-close:hover,
.tool-schema-close:focus-visible {
  border-color: var(--accent-500);
  color: var(--accent-900);
  outline: none;
}

.tool-schema-json {
  margin: 0;
  padding: 0.9rem;
  max-height: calc(min(720px, 100vh - 2rem) - 3.3rem);
  overflow: auto;
  background: #fff;
  color: var(--ink-700);
  font-family: var(--mono);
  font-size: 0.72rem;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
}

.chat-input-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border: 1px solid var(--rule);
  background: #fff;
  padding: 0.55rem 0.8rem;
  transition: border-color 120ms ease;
  max-width: 100%;
  min-width: 0;
}
.chat-input-row:focus-within {
  border-color: var(--accent-500);
}
.chat-prompt {
  font-family: var(--mono);
  color: var(--accent-500);
}
.chat-input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  font-family: var(--mono);
  font-size: 0.92rem;
  color: var(--ink-900);
  background: transparent;
}
.chat-input::placeholder { color: var(--ink-300); }
.chat-input:disabled { color: var(--ink-300); }

.char-count {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--ink-300);
  font-variant-numeric: tabular-nums;
  padding: 0 0.25rem;
  transition: color 120ms ease;
  user-select: none;
}
.char-count.is-warning { color: var(--accent-700); }
.char-count.is-max { color: var(--accent-500); font-weight: 500; }

.btn-send {
  font-family: var(--mono);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: var(--accent-900);
  color: #fff;
  border: none;
  padding: 0.4rem 0.9rem;
  cursor: pointer;
}
.btn-send:hover { background: var(--accent-500); }
.btn-send:disabled { background: var(--ink-300); cursor: not-allowed; }

/* ────── Token panel (sticky hero meter) ────── */

.token-panel {
  flex: 0 0 auto;
  align-self: center;
  margin-left: 0;
  max-width: 100%;
  min-width: 0;
  border: 1px solid var(--rule);
  background: color-mix(in srgb, var(--bg-paper) 88%, #fff);
  padding: 4px 8px;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
}
.lb-hero-action-row .token-panel .token-rule { display: none; }
.token-panel-head {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-700);
  border-bottom: 0;
  padding: 0;
  margin: 0;
}
.token-row {
  display: flex;
  justify-content: flex-start;
  align-items: baseline;
  gap: 4px;
  padding: 1px 3px;
  transition: background 600ms ease;
}
.token-row.is-flash {
  background: var(--accent-200);
  transition: background 0ms;
}
.token-rule {
  align-self: stretch;
  border-top: 0;
  border-left: 1px solid var(--rule-2);
  margin: 0 1px;
}
.token-label {
  font-family: var(--mono);
  color: var(--ink-500);
  text-transform: uppercase;
  font-size: 8px;
  letter-spacing: 0.08em;
}
.token-count {
  font-family: var(--mono);
  color: var(--accent-700);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
}
.token-row-total .token-label { color: var(--ink-700); }
.token-row-total .token-count { color: var(--ink-900); font-weight: 500; }
.token-row-input .token-label,
.token-row-input .token-count { color: var(--ink-400); }
body.tokens-hidden .token-panel { display: none; }

@media (prefers-reduced-motion: reduce) {
  .ember-field span {
    animation: none;
    opacity: 0.22;
  }
  .token-row.is-flash { transition: none; }
}

@media (max-width: 860px) {
  .lb-banner-row {
    flex-wrap: wrap;
  }
  .token-panel {
    flex: 1 1 100%;
    align-self: auto;
    margin-left: 0;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, auto));
    justify-content: start;
    gap: 4px 8px;
  }
  .token-panel-head {
    margin-bottom: 0;
  }
  .lb-hero-action-row .token-panel .token-rule {
    display: block;
    min-height: 16px;
  }
  .token-row {
    min-width: 0;
    flex-direction: row;
    align-items: baseline;
    gap: 2px;
    border-left: 1px solid var(--rule-2);
    padding: 2px 4px;
  }
}

@media (max-width: 640px) {
  .chat {
    padding-bottom: 196px;
  }
  .chat-form {
    padding-left: 18px;
    padding-right: 18px;
  }
  .token-panel {
    gap: 3px;
    padding: 8px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .token-panel-head {
    grid-column: 1 / -1;
    padding-bottom: 4px;
  }
  .lb-hero-action-row .token-panel .token-rule { display: none; }
  .token-row {
    padding: 3px;
    border-left: 1px solid var(--rule-2);
  }
  .token-label {
    font-size: 8px;
    letter-spacing: 0.02em;
  }
  .token-count {
    font-size: 11px;
  }
}

/* ────── Mobile ────── */

@media (max-width: 640px) {
  .ed-nav-inner { padding: 12px 18px; }
  .ed-nav-vol { display: none; }
  .ed-nav-links { gap: 14px; }
  .ed-nav-links a { font-size: 10px; letter-spacing: 0.12em; }
  .lb-hero { padding: 18px 18px 14px; }
  .lb-tagline { font-size: 14px; margin-top: 10px; }
  .lb-lede { font-size: 16px; margin-top: 18px; }
  .chat { padding: 20px 18px 196px; }
  .msg-agent { font-size: 16px; }
  .agent-select-wrap {
    flex: 1 1 100%;
  }
  .agent-select {
    width: 100%;
  }
  .intro-name {
    flex-basis: 100%;
    padding-bottom: 2px;
  }
  .strauss-mark { font-size: clamp(6px, 1.8vw, 8px); }
  .suggestion-btn { max-width: 100%; }
  .lb-credit { padding: 26px 18px 24px; }
  .lb-credit-text { font-size: 14px; }
  #new-chat { margin-left: 0; }
}

@media (max-width: 360px) {
  .lb-hero { padding-left: 14px; padding-right: 14px; }
  .lb-banner-row { gap: 4px; }
  .lb-banner { font-size: 5px; }
  .lb-face {
    min-height: calc(5em * 1.05);
    min-width: 7ch;
  }
  .chat { padding-left: 18px; padding-right: 18px; }
  .chat-input-row {
    gap: 0.35rem;
    padding: 0.5rem 0.55rem;
  }
  .char-count { padding: 0 0.1rem; }
  .btn-send { padding: 0.38rem 0.65rem; }
}

/* ────── Theme cross-fade ──────
   When the profile brand changes, the brand-colored chrome eases between palettes
   instead of snapping. The hero banner has its own sweep animation (above) and
   is intentionally excluded from this list. */

.ed-nav-link, .ed-nav-links a,
.lb-eyebrow, .lb-hero-cta, .lb-credit-cta, .lb-subbanner,
.msg-system, .msg-system em, .msg-user::before,
.suggestion-btn, .msg-tool, .msg-thinking .thinking-label,
.msg-agent a, .msg-agent .hljs-link,
.btn-ghost, .agent-select, .agent-info > summary,
.char-count, .btn-send, .chat-prompt,
.strauss-mark, .intro-period {
  transition:
    color 320ms ease,
    background-color 320ms ease,
    border-color 320ms ease;
}

@media (prefers-reduced-motion: reduce) {
  .ed-nav-link, .ed-nav-links a,
  .lb-eyebrow, .lb-hero-cta, .lb-credit-cta, .lb-subbanner,
  .msg-system, .msg-system em, .msg-user::before,
  .suggestion-btn, .msg-tool, .msg-thinking .thinking-label,
  .msg-agent a, .msg-agent .hljs-link,
  .btn-ghost, .agent-select, .agent-info > summary,
  .char-count, .btn-send, .chat-prompt,
  .strauss-mark, .intro-period {
    transition: none;
  }
}