/* =======================================================
   Agent — embedded chat UI (hero + dock).
   Inherits site tokens from styles.css. Keep this file
   self-contained so the agent can mount on any route.
   ======================================================= */

/* ---------- shared ---------- */

[hidden] { display: none !important; }

.agent-thread {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  overflow-y: auto;
}

.agent-msg {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-width: 100%;
}
.agent-msg--user { align-items: flex-end; }
.agent-msg--assistant { align-items: flex-start; }

.agent-bubble {
  font-size: 1rem;
  line-height: 1.6;
  padding: 0.7rem 0.95rem;
  border-radius: var(--radius-md);
  max-width: 92%;
  word-wrap: break-word;
}
.agent-msg--user .agent-bubble {
  background: var(--bg-tertiary);
  color: var(--fg-primary);
}
.agent-msg--assistant .agent-bubble {
  background: transparent;
  color: var(--fg-secondary);
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}

.agent-bubble--pending .agent-thinking,
.agent-thinking {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.agent-thinking-label {
  font-size: 0.88rem;
  color: var(--fg-tertiary);
  letter-spacing: 0.01em;
}

/* Rotating ring: a conic-gradient fading from transparent to blue, masked
   into a ring. Feels like "actively working" vs. the old dot pulse. */
.agent-thinking-ring {
  width: 1.15em;
  height: 1.15em;
  border-radius: 999px;
  background: conic-gradient(from 0turn,
    color-mix(in oklab, #2e7bff 0%, transparent) 0deg,
    color-mix(in oklab, #2e7bff 75%, transparent) 280deg,
    color-mix(in oklab, #2e7bff 95%, transparent) 360deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(50% - 2.5px), #000 calc(50% - 1.5px));
          mask: radial-gradient(farthest-side, transparent calc(50% - 2.5px), #000 calc(50% - 1.5px));
  animation: agent-ring-spin 0.9s linear infinite;
  flex-shrink: 0;
}
@keyframes agent-ring-spin { to { transform: rotate(1turn); } }
@media (prefers-reduced-motion: reduce) {
  .agent-thinking-ring { animation: none; }
}

/* ---------- artifact cards ---------- */

.agent-cards {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: 100%;
}
.agent-cards:has(.agent-card--immersive) { gap: 1.25rem; }
.agent-msg--assistant { align-self: stretch; align-items: stretch; }

.agent-card {
  display: grid;
  grid-template-columns: 4.5rem 1fr;
  gap: 0.75rem;
  padding: 0.625rem;
  border: 1px solid var(--borders-primary);
  border-radius: var(--radius-md);
  background: var(--bg-secondary);
  color: inherit;
  text-decoration: none;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.agent-card:hover {
  background: var(--bg-tertiary);
  border-color: var(--fg-tertiary);
  transform: translateY(-1px);
}

.agent-card__thumb {
  display: block;
  width: 4.5rem;
  height: 3.25rem;
  border-radius: var(--radius-sm);
  background-size: cover;
  background-position: center;
  background-color: #1c1c1f;
  flex-shrink: 0;
}
.agent-card__thumb--empty {
  display: grid;
  place-items: center;
  color: var(--fg-tertiary);
}
.agent-card__thumb--empty svg { width: 18px; height: 18px; }

.agent-card__body {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}
.agent-card__label {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--fg-tertiary);
}
.agent-card__title {
  font-size: 0.925rem;
  font-weight: 600;
  color: var(--fg-primary);
  line-height: 1.3;
}
.agent-card__summary {
  font-size: 0.8rem;
  color: var(--fg-secondary);
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.agent-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.25rem;
  font-size: 0.75rem;
  color: var(--fg-primary);
  opacity: 0.8;
}
.agent-card__cta svg { width: 12px; height: 12px; }

/* ---------- immersive artifact card (big, inline UI) ---------- */

.agent-card--immersive {
  display: flex;
  flex-direction: column;
  grid-template-columns: none;
  gap: 0;
  padding: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bg-secondary);
  width: 100%;
}
.agent-card--immersive:hover { transform: none; }

.agent-card--immersive .agent-card__hero {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--bg-tertiary);
  overflow: hidden;
}
.agent-card--immersive .agent-card__hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.agent-card--immersive .agent-card__content {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.5rem;
}

.agent-card--immersive .agent-card__meta {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.agent-card--immersive .agent-card__label {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--fg-tertiary);
  font-weight: 500;
}
.agent-card--immersive .agent-card__kicker {
  font-family: var(--font-sans);
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.15;
  color: var(--fg-primary);
}

.agent-card--immersive .agent-card__prose {
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--fg-secondary);
  margin: 0;
}

/* Pillars — numbered rows */
.agent-card__pillars {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--borders-primary);
  border-radius: var(--radius-md);
  background: var(--bg-primary);
}
.agent-card__pillar {
  display: grid;
  grid-template-columns: 2rem 1fr;
  gap: 0.75rem;
  align-items: start;
}
.agent-card__pillar-num {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--fg-tertiary);
  padding-top: 0.15rem;
}
.agent-card__pillar-copy { display: flex; flex-direction: column; gap: 0.25rem; }
.agent-card__pillar-copy strong {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--fg-primary);
  line-height: 1.3;
}
.agent-card__pillar-copy span {
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--fg-secondary);
}

/* Screens — image + caption stacks */
.agent-card__screens {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.agent-card__screen { display: flex; flex-direction: column; gap: 0.625rem; margin: 0; }
.agent-card__screen-frame {
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--bg-tertiary);
  border: 1px solid var(--borders-primary);
}
.agent-card__screen-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.agent-card__screen-copy { display: flex; flex-direction: column; gap: 0.2rem; }
.agent-card__screen-copy strong {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--fg-primary);
}
.agent-card__screen-copy span {
  font-size: 0.82rem;
  color: var(--fg-secondary);
  line-height: 1.5;
}

/* Metrics — big values */
.agent-card__metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: 0.75rem;
}
.agent-card__metric {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 1rem;
  border: 1px solid var(--borders-primary);
  border-radius: var(--radius-md);
  background: var(--bg-primary);
}
.agent-card__metric strong {
  font-family: var(--font-sans);
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--fg-primary);
}
.agent-card__metric span {
  font-size: 0.8rem;
  color: var(--fg-secondary);
  line-height: 1.45;
}

/* Trailing gallery — remaining media not paired with screens */
.agent-card__gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
  gap: 0.5rem;
}
.agent-card__gallery img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-sm);
  border: 1px solid var(--borders-primary);
  display: block;
}

.agent-card--immersive .agent-card__cta {
  margin-top: 0.25rem;
  opacity: 1;
  color: var(--fg-secondary);
}
.agent-card--immersive:hover .agent-card__cta { color: var(--fg-primary); }

@media (max-width: 640px) {
  .agent-card--immersive .agent-card__content { padding: 1.25rem; gap: 0.875rem; }
  .agent-card--immersive .agent-card__kicker { font-size: 1.25rem; }
  .agent-card__screen-frame { aspect-ratio: 16 / 11; }
}

/* ---------- hero mode (landing page) ---------- */

/* Viewport lock ONLY applies when the copilot-chat hero is mounted. The
   static landing (intro + selected works) uses normal page scroll. */
html:has(.agent-hero--fullchat),
body[data-route="home"]:has(.agent-hero--fullchat) {
  height: 100vh;
  overflow: hidden;
}
body[data-route="home"]:has(.agent-hero--fullchat) main {
  padding: 0;
  margin-left: var(--sidebar-w);
  display: flex;
  height: 100vh;
  min-height: 0;
  max-height: 100vh;
  overflow: hidden;
}
body[data-route="home"]:has(.agent-hero--fullchat) .page--chat {
  max-width: none;
  margin: 0;
  padding: 0;
  gap: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}
body[data-route="home"]:has(.agent-hero--fullchat) [data-agent-hero] {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* Static landing: normal scroll, content framed by a centered column. */
body[data-route="home"] main {
  margin-left: var(--sidebar-w);
}
body[data-route="home"] .page--chat {
  max-width: none;
  padding: 0;
  gap: 0;
}
body[data-route="home"] [data-agent-hero] { display: block; }

.agent-hero--static {
  display: block;
  width: 100%;
  padding: clamp(3rem, 8vh, 5.5rem) clamp(1.25rem, 3vw, 2rem) clamp(3rem, 6vh, 5rem);
  background: var(--bg-primary);
}
.agent-hero__static-stack {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(5rem, 12vh, 8rem);
  text-align: center;
}
/* Pull the launcher closer to the intro (negative margin-top) and push the
   Selected Works rail further down (positive margin-bottom) so the launcher
   reads as a waypoint between the greeting and the work, with more breathing
   room below before the portfolio starts. */
.agent-hero__static-stack > .agent-launcher {
  margin-top: clamp(-9rem, -12vh, -3.5rem);
  margin-bottom: clamp(5rem, 10vh, 8rem);
}
.agent-hero__static-stack > * { width: 100%; }
.agent-hero__static-stack .agent-hero__reply--intro { text-align: center; }

/* Selected Works — single horizontal row of cover tiles under the launcher.
   Section lives INSIDE the static-stack (max-width 1200px centered), so
   the label and tile row share the same left edge as the intro text and
   launcher. Tiles overflow the right of the column via horizontal scroll.
   Fades + lifts when the launcher expands into chat. */
.agent-works {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity 0.5s cubic-bezier(0.2, 0.8, 0.2, 1),
    transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1),
    filter 0.45s ease;
}
.agent-works.is-revealed {
  opacity: 1;
  transform: translateY(0);
}
.agent-works.is-dismissed {
  /* Launcher expands in place and pushes the Selected Works rail further
     down the stack (flex gap still carries); we no longer fade or blur it
     out — visitors keep seeing the work while they chat. */
  opacity: 1;
  transform: translateY(0);
  filter: none;
  pointer-events: auto;
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.agent-works__label {
  font-size: 0.75rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg-tertiary);
  font-weight: 500;
  text-align: center;
  padding: 0;
}

/* Single-column stack — each tile is the project-page hero div rendered
   at project-page scale. Generous vertical gap between items. */
.agent-works__row {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  gap: clamp(4rem, 10vh, 6.5rem);
  padding: 0;
}

.agent-works__tile {
  width: 100%;
  max-width: 1100px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 1rem;
  text-decoration: none;
  color: inherit;
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
  cursor: pointer;
}
.agent-works__tile:hover { transform: translateY(-3px); }
.agent-works__tile:hover .agent-works__cover {
  border-color: color-mix(in oklab, var(--fg-tertiary) 55%, transparent);
}
.agent-works__tile:hover .agent-works__caption-title { color: var(--fg-primary); }

/* Cover container — mirrors the project-page .outcome-frame--hero:
   dark bg #1c1c1f, 18px radius, padding clamp(28px,6vw,80px), drop shadow.
   Non-framed variant (Mahogany) drops the bg+padding and lets the media
   fill the container edge-to-edge. */
.agent-works__cover {
  position: relative;
  width: 100%;
  border-radius: 18px;
  border: 1px solid color-mix(in oklab, var(--borders-primary) 60%, transparent);
  overflow: hidden;
  background: #0c0a09;
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.14),
    0 22px 50px rgba(0, 0, 0, 0.28);
  transition: border-color 0.35s ease, box-shadow 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
  display: flex;
  align-items: center;
  justify-content: center;
}
.agent-works__img,
.agent-works__video {
  width: 100%;
  height: auto;
  object-fit: contain;
  object-position: center;
  display: block;
  background: transparent;
}

/* Framed variant — the .outcome-frame--hero treatment from project pages.
   Padding + inner radius + inner shadow match body[data-route="project-05"]
   .outcome-frame rules exactly. */
.agent-works__tile--framed .agent-works__cover {
  background: #1c1c1f;
  padding: clamp(28px, 6vw, 80px);
}
.agent-works__tile--framed .agent-works__img,
.agent-works__tile--framed .agent-works__video {
  border-radius: 10px;
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.14),
    0 14px 32px rgba(0, 0, 0, 0.25);
}

.agent-works__caption {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  align-items: center;
  text-align: center;
  padding: 0 0.15rem;
}
.agent-works__caption-title {
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--fg-secondary);
  letter-spacing: -0.01em;
  transition: color 0.3s ease;
}
.agent-works__caption-tag {
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  color: var(--fg-tertiary);
}

@media (max-width: 720px) {
  .agent-works__tile { max-width: 100%; }
  .agent-works__tile--framed .agent-works__cover { padding: clamp(16px, 4vw, 32px); }
}

@media (prefers-reduced-motion: reduce) {
  .agent-works,
  .agent-works__tile,
  .agent-works__cover { transition: none; }
  .agent-works.is-revealed { opacity: 1; transform: none; }
  .agent-works.is-dismissed { opacity: 1; transform: none; filter: none; }
}

/* Launcher — floating glassmorphic box with an animated conic-gradient
   glow border (Mahogany-style). Morphs in-place between data-state="compact"
   (input + prompt chips) and data-state="open" (head + thread + toolbar +
   form). Open state reuses the dock's data-agent-* wiring so renderAll() +
   sendMessage() treat it as any other dock thread. */
.agent-launcher {
  position: sticky;
  top: 1.25rem;
  z-index: 30;
  width: 100%;
  max-width: 820px;
  margin: 0 auto;
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity 0.55s ease,
    transform 0.55s ease,
    max-width 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
  animation: agentLauncherFloat 7s ease-in-out infinite;
}
.agent-launcher[data-stuck] {
  animation-play-state: paused;
}
.agent-launcher.is-revealed {
  opacity: 1;
  transform: translateY(0);
}
/* Pause the float animation while expanded — a static reading/typing surface
   should not hover. */
.agent-launcher[data-state="expanding"],
.agent-launcher[data-state="open"] {
  animation-play-state: paused;
}
.agent-launcher[data-state="open"] {
  max-width: 880px;
}
@keyframes agentLauncherFloat {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -6px; }
}

/* Outer glow wrap: 2px animated conic-gradient border. The gradient is
   clipped to ONLY the 2px ring via a mask-composite: exclude trick so the
   color stays on the stroke and never washes the surface. The rotation is
   driven by a @property custom angle, which animates natively rather than
   needing a super-sized rotated layer underneath. */
@property --glow-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
.agent-launcher__glow-wrap {
  position: relative;
  width: 100%;
  padding: 2px;
  border-radius: 22px;
  isolation: isolate;
  box-shadow:
    0 1px 3px color-mix(in oklab, #000 6%, transparent),
    0 12px 28px color-mix(in oklab, #000 9%, transparent),
    0 28px 72px color-mix(in oklab, #000 11%, transparent);
}
.agent-launcher__glow-wrap::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 2px;
  border-radius: inherit;
  background: conic-gradient(
    from var(--glow-angle, 0deg),
    rgba(134, 43, 0, 0.45),
    rgba(200, 85, 45, 0.95),
    rgba(251, 191, 36, 0.82),
    rgba(96, 165, 250, 0.65),
    rgba(167, 139, 250, 0.58),
    rgba(134, 43, 0, 0.45)
  );
  /* mask trick: subtract the content-box from the border-box so only the
     2px padding ring receives the conic fill. the surface inside stays
     untouched by the color. */
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
          mask-composite: exclude;
  animation: agentLauncherGlow 5.5s linear infinite;
  z-index: 2;
  pointer-events: none;
  opacity: 0.9;
}
.agent-launcher__glow-wrap:focus-within::before {
  animation-play-state: paused;
  opacity: 0.55;
}
@keyframes agentLauncherGlow {
  to { --glow-angle: 360deg; }
}

/* Inner surface: flex column. The surface's min-height animates from 0
   (compact) to a target (open) for smooth overall growth. Individual
   morphing children (head/thread/toolbar/prompts) animate their own
   max-height + opacity in parallel. Form stays visible across states. */
.agent-launcher__surface {
  position: relative;
  z-index: 1;
  border-radius: 20px;
  background: color-mix(in oklab, var(--bg-secondary) 78%, transparent);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  padding: 1rem 1rem 1.1rem;
  display: flex;
  flex-direction: column;
  min-height: 0;
  transition: min-height 0.55s cubic-bezier(0.2, 0.8, 0.2, 1),
              padding 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.agent-launcher[data-state="expanding"] .agent-launcher__surface,
.agent-launcher[data-state="open"] .agent-launcher__surface {
  min-height: min(80vh, 680px);
  padding: 1rem 1rem 1.5rem;
}

/* Head — visible only when open, fades + slides in. */
.agent-launcher__head {
  max-height: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  opacity: 0;
  transform: translateY(-4px);
  padding-bottom: 0;
  margin-bottom: 0;
  border-bottom: 1px solid transparent;
  transition:
    max-height 0.45s cubic-bezier(0.2, 0.8, 0.2, 1),
    opacity 0.28s ease 0.12s,
    transform 0.3s ease 0.12s,
    padding-bottom 0.35s ease,
    margin-bottom 0.35s ease,
    border-bottom-color 0.3s ease 0.1s;
}
.agent-launcher[data-state="open"] .agent-launcher__head {
  max-height: 2.4rem;
  opacity: 1;
  transform: translateY(0);
  padding-bottom: 0.55rem;
  margin-bottom: 0.6rem;
  border-bottom-color: color-mix(in oklab, var(--borders-primary) 70%, transparent);
}
.agent-launcher__title {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-tertiary);
  font-weight: 500;
}
.agent-launcher__title svg { width: 13px; height: 13px; color: var(--fg-primary); }
.agent-launcher__close {
  width: 1.75rem;
  height: 1.75rem;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  border: 1px solid var(--borders-primary);
  background: transparent;
  color: var(--fg-secondary);
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.agent-launcher__close:hover { background: var(--bg-tertiary); color: var(--fg-primary); }
.agent-launcher__close svg { width: 11px; height: 11px; }

/* Thread — flex:1 inside the flex-column surface. It naturally fills the
   space between head and toolbar as the surface's min-height animates up;
   no max-height transition needed — the flex grows with the parent. */
.agent-launcher__thread {
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
  overscroll-behavior: contain;
  opacity: 0;
  padding: 0;
  transition:
    opacity 0.3s ease 0.15s,
    padding 0.35s ease;
}
.agent-launcher__thread::-webkit-scrollbar { display: none; }
.agent-launcher[data-state="open"] .agent-launcher__thread {
  opacity: 1;
  padding: 0.1rem 0.1rem 0.35rem;
}

/* Pills (context pills from Cmd+. selection). Usually empty on home. */
.agent-launcher .agent-pills {
  display: none;
}
.agent-launcher[data-state="open"] .agent-pills:not([hidden]) {
  display: block;
}
/* Suggestions are hidden inside the launcher — the dedicated prompts row
   already covers the "seed me a question" affordance, and during a live
   response we don't want computeSuggestions echoing the same chips. */
.agent-launcher .agent-suggestions,
.agent-launcher [data-agent-suggestions] { display: none !important; }

/* Toolbar (select-content pill). */
.agent-launcher__toolbar {
  max-height: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  opacity: 0;
  padding: 0;
  margin-top: 0;
  transition:
    max-height 0.45s cubic-bezier(0.2, 0.8, 0.2, 1),
    opacity 0.3s ease 0.22s,
    padding 0.3s ease,
    margin-top 0.3s ease;
}
.agent-launcher[data-state="open"] .agent-launcher__toolbar {
  max-height: 2.8rem;
  opacity: 1;
  padding: 0.4rem 0 0.35rem;
  margin-top: 0.1rem;
}

/* Form row. In open state the form gets a subtle border+fill so it reads
   as the chat composer; in compact it sits flush with the surface. */
.agent-launcher__form {
  display: grid;
  /* input | inline walkthrough toggle | send */
  grid-template-columns: 1fr auto auto;
  gap: 0.5rem;
  align-items: center;
  padding: 0.3rem 0.3rem 0.3rem 1rem;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 14px;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.agent-launcher[data-state="open"] .agent-launcher__form {
  background: color-mix(in oklab, var(--bg-primary) 55%, transparent);
  border-color: color-mix(in oklab, var(--borders-primary) 80%, transparent);
}
.agent-launcher__input {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--fg-primary);
  font-family: inherit;
  font-size: 1.05rem;
  padding: 0.75rem 0;
}
.agent-launcher__input::placeholder { color: var(--fg-tertiary); }

/* Send button: scales to 0 during the morph then pops back in once the panel
   settles (transition-delay on the open state). */
.agent-launcher__send {
  width: 2.5rem;
  height: 2.5rem;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: var(--fg-primary);
  color: var(--bg-primary);
  border: 0;
  cursor: pointer;
  transform: scale(1);
  opacity: 1;
  transition: transform 0.22s ease, opacity 0.22s ease;
}
.agent-launcher__send svg { width: 0.95rem; height: 0.95rem; }
.agent-launcher__send:hover { opacity: 0.9; }
.agent-launcher[data-state="expanding"] .agent-launcher__send {
  transform: scale(0.5);
  opacity: 0;
  pointer-events: none;
}
.agent-launcher[data-state="open"] .agent-launcher__send {
  transform: scale(1);
  opacity: 1;
  pointer-events: auto;
  transition-delay: 0.45s;
}

/* Prompts row — visible in compact, collapsed in open. */
.agent-launcher__prompts {
  min-height: 0;
  max-height: 14rem;
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding-top: 0.75rem;
  margin-top: 0.1rem;
  border-top: 1px solid color-mix(in oklab, var(--borders-primary) 70%, transparent);
  opacity: 1;
  transition:
    max-height 0.45s cubic-bezier(0.2, 0.8, 0.2, 1),
    opacity 0.22s ease,
    padding-top 0.3s ease,
    margin-top 0.3s ease,
    border-top-color 0.22s ease;
}
.agent-launcher[data-state="expanding"] .agent-launcher__prompts,
.agent-launcher[data-state="open"] .agent-launcher__prompts {
  max-height: 0;
  opacity: 0;
  padding-top: 0;
  margin-top: 0;
  border-top-color: transparent;
  pointer-events: none;
}
.agent-launcher__prompt {
  font-family: inherit;
  font-size: 0.82rem;
  color: var(--fg-secondary);
  padding: 0.4rem 0.8rem;
  border-radius: 999px;
  border: 1px solid color-mix(in oklab, var(--borders-primary) 80%, transparent);
  background: color-mix(in oklab, var(--bg-primary) 45%, transparent);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.agent-launcher__prompt-icon {
  display: inline-flex;
  width: 0.85rem;
  height: 0.85rem;
  flex-shrink: 0;
  color: #2e7bff;
  opacity: 0.85;
}
.agent-launcher__prompt-icon svg { width: 100%; height: 100%; }
.agent-launcher__prompt[data-kind="walkthrough"] {
  border-color: color-mix(in oklab, #2e7bff 32%, var(--borders-primary));
}
.agent-launcher__prompt[data-kind="walkthrough"]:hover {
  border-color: color-mix(in oklab, #2e7bff 55%, var(--borders-primary));
}
.agent-launcher__prompt:hover,
.agent-launcher__prompt:focus-visible {
  background: color-mix(in oklab, var(--bg-primary) 70%, transparent);
  color: var(--fg-primary);
  border-color: var(--fg-tertiary);
  outline: none;
}

/* Thread-scoped bubble sizing: keep the launcher chat compact. */
.agent-launcher__thread .agent-msg { gap: 0.4rem; }
.agent-launcher__thread .agent-bubble { font-size: 0.92rem; line-height: 1.55; }

@media (prefers-reduced-motion: reduce) {
  .agent-launcher {
    animation: none;
    transition: opacity 0.2s ease;
  }
  .agent-launcher__glow-wrap::before {
    animation: none;
    opacity: 0.5;
  }
  .agent-launcher__surface,
  .agent-launcher__head,
  .agent-launcher__thread,
  .agent-launcher__toolbar,
  .agent-launcher__form,
  .agent-launcher__send,
  .agent-launcher__prompts {
    transition: none !important;
  }
}

@media (max-width: 900px) {
  body[data-route="home"] main { margin-left: 0; }
  .agent-launcher { max-width: 100%; }
  .agent-launcher[data-state="open"] { max-width: 100%; }
}

.agent-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  min-height: 100vh;
  width: 100%;
  padding: 3rem 2rem;
  background: var(--bg-primary);
}

/* The inner stack centers vertically when content fits, sticks to top when it overflows.
   `margin: auto` on a flex item consumes leftover space evenly, then collapses. */
.agent-hero__stack {
  width: 100%;
  max-width: 720px;
  margin: auto 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  text-align: center;
}

.agent-hero__headline {
  font-family: var(--font-sans);
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--fg-primary);
  margin: 0;
  max-width: 32ch;
}

/* ---------- splattered headline variant ---------- */

/* Full-screen chat layout: canvas grows, composer docks to bottom.
   On home, parent locks to 100vh so we don't push past the viewport. */
.agent-hero--fullchat {
  padding: 1.5rem 1.5rem 1.25rem;
  align-items: stretch;
  min-height: 0;
  height: 100%;
  max-height: 100%;
}

.agent-hero__stack--splat {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  align-items: stretch;
  text-align: left;
  gap: 1.25rem;
  padding-top: 0;
  flex: 1;
  min-height: 0;
  justify-content: flex-start;
}

.agent-hero__canvas {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding-top: clamp(1rem, 5vh, 3.5rem);
  overflow-y: auto;
  scroll-behavior: smooth;
  /* Trackpad / wheel scrolling works; no visible scroll track. */
  scrollbar-width: none;
  -ms-overflow-style: none;
  overscroll-behavior: contain;
}
.agent-hero__canvas::-webkit-scrollbar { width: 0; height: 0; display: none; }

/* Empty state: intro + works row top-align, canvas still scrolls internally
   so the composer stays pinned at the bottom of the viewport. */
.agent-hero__canvas--empty {
  padding-top: clamp(2rem, 8vh, 5rem);
  padding-bottom: 1.25rem;
}

/* Thread container: stacked messages, alternating alignment */
.agent-hero__thread {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  width: 100%;
  padding-bottom: 2rem;
}

.agent-hero__agent-msg {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
}

.agent-hero__composer {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding-top: 0.5rem;
}
.agent-hero__composer .agent-empty { width: 100%; }
.agent-hero__composer .agent-empty__prompts { justify-content: center; }

.agent-hero--fullchat .agent-hero__form {
  padding: 0.75rem 0.75rem 0.75rem 1.5rem;
  border-radius: 28px;
}
.agent-hero--fullchat .agent-hero__input {
  font-size: 1.05rem;
  padding: 0.85rem 0;
}
.agent-hero--fullchat .agent-hero__send {
  width: 2.75rem;
  height: 2.75rem;
}
.agent-hero--fullchat .agent-hero__send svg {
  width: 1rem;
  height: 1rem;
}

.agent-hero--fullchat .agent-thread {
  max-height: 100%;
  overflow-y: auto;
  padding-top: 1.5rem;
}

@media (max-width: 640px) {
  .agent-hero--fullchat { padding: 1rem 1rem 0.75rem; }
  .agent-hero--fullchat .agent-hero__form { padding: 0.5rem 0.5rem 0.5rem 1.15rem; }
  .agent-hero--fullchat .agent-hero__input { font-size: 0.95rem; padding: 0.6rem 0; }
  .agent-hero__canvas { padding-top: 1rem; }
}

/* Agent reply body — conversation text. Intro override is below. */
.agent-hero__reply {
  font-family: var(--font-sans);
  font-size: clamp(1.05rem, 1.5vw, 1.35rem);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.45;
  text-align: left;
  max-width: none;
  margin: 0;
  color: var(--fg-primary);
  text-wrap: balance;
}

.agent-hero__line {
  display: block;
}
/* Breathing room between the greeting and the descriptor below it. Applied
   to every intro line except the dim descriptor; with a two-line intro that
   leaves a clear beat between "Hey, I'm Adarsh." and the role line. */
.agent-hero__reply--intro .agent-hero__line:not(.agent-hero__line--dim) {
  margin-bottom: 0.45em;
}
.agent-hero__line--dim { color: var(--fg-secondary); }

/* User's message — right-aligned bubble, no label */
.agent-hero__you-bubble {
  align-self: flex-end;
  max-width: min(560px, 75%);
  padding: 0.6rem 1rem;
  background: var(--bg-secondary);
  border: 1px solid var(--borders-primary);
  border-radius: 18px;
  border-bottom-right-radius: 4px;
  color: var(--fg-primary);
  font-size: 0.95rem;
  line-height: 1.4;
  letter-spacing: -0.005em;
  white-space: pre-wrap;
  word-break: break-word;
}

/* Section chips surfacing real project divs */
.agent-hero__refs {
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.agent-hero__refs.is-revealed {
  opacity: 1;
  transform: translateY(0);
}
.agent-hero__refs-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--fg-tertiary);
  margin-bottom: 0.55rem;
}
.agent-hero__refs-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}
.agent-hero__ref {
  display: inline-flex;
  align-items: center;
  padding: 0.4rem 0.85rem;
  border: 1px solid var(--borders-primary);
  border-radius: 999px;
  color: var(--fg-secondary);
  font-size: 0.83rem;
  background: transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.agent-hero__ref:hover,
.agent-hero__ref:focus-visible {
  background: var(--bg-tertiary);
  color: var(--fg-primary);
  border-color: var(--fg-tertiary);
  outline: none;
}
.agent-hero__ref--open {
  border-color: var(--fg-tertiary);
  color: var(--fg-primary);
}

/* Single immersive artifact: one per reply, image-first, full width of the
   chat column. Image renders at natural aspect with a generous height cap so
   the actual UI is readable (~3x the old size). */
.agent-hero__artifacts { display: block; }
.agent-hero__artifact {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: none;
  border: 1px solid var(--borders-primary);
  border-radius: 14px;
  background: var(--bg-secondary);
  color: var(--fg-primary);
  text-decoration: none;
  overflow: hidden;
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.agent-hero__artifact:hover,
.agent-hero__artifact:focus-visible {
  border-color: var(--fg-tertiary);
  outline: none;
  transform: translateY(-1px);
  box-shadow: 0 10px 32px color-mix(in oklab, var(--fg-primary) 8%, transparent);
}
/* Padded frame around the image/video — matte background visible on all
   sides, mirroring the project-page .outcome-frame--hero treatment.
   Max size mirrors the selected-works tile so nothing in chat ever
   dominates the viewport. */
.agent-hero__artifact-media {
  position: relative;
  background: var(--bg-secondary);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(0.85rem, 1.5vw, 1.25rem);
  max-height: clamp(260px, 42vh, 420px);
}
.agent-hero__artifact-media--empty {
  aspect-ratio: 16 / 9;
}
.agent-hero__artifact-media--empty::before {
  content: "no preview";
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-tertiary);
}
.agent-hero__artifact-img,
.agent-hero__artifact-video {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: calc(clamp(260px, 42vh, 420px) - clamp(1.7rem, 3vw, 2.5rem));
  object-fit: contain;
  display: block;
  border-radius: 10px;
  background: var(--bg-tertiary);
  border: 1px solid color-mix(in oklab, var(--borders-primary) 80%, transparent);
}
.agent-hero__artifact-body {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 0.85rem 1.05rem 1.05rem;
}
.agent-hero__artifact-label {
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-tertiary);
  font-weight: 500;
}
.agent-hero__artifact-lede {
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--fg-secondary);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Transient live-stream notes (tool events) */
.agent-hero__live-note {
  font-size: 0.78rem;
  color: var(--fg-tertiary);
  letter-spacing: 0.05em;
  margin-top: 0.75rem;
}

/* Intro wrapper: identity statement stacked with the selected-works row. */
.agent-hero__intro {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* Intro reply stays dramatic as the greeting. */
.agent-hero__reply--intro {
  font-size: clamp(1.75rem, 3.2vw, 2.6rem);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.02em;
}

/* Selected works — horizontal scroll strip. Each tile is a padded frame
   (matte dark background, inset border) with the media inset inside. */
.agent-hero__works {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 1rem;
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 0.5rem;
  /* No scroll-snap so trackpad vertical gestures pass through cleanly to
     the canvas; the strip still scrolls horizontally with shift+wheel or
     an intentional x-drag. */
  overscroll-behavior: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.55s ease, transform 0.55s ease;
  touch-action: pan-x pan-y;
}
.agent-hero__works::-webkit-scrollbar { display: none; }
.agent-hero__works.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

.agent-hero__work {
  --work-pad: clamp(0.75rem, 1.25vw, 1.1rem);
  position: relative;
  flex: 0 0 auto;
  display: block;
  aspect-ratio: 16 / 10;
  height: clamp(260px, 42vh, 420px);
  padding: var(--work-pad);
  border-radius: 18px;
  background: var(--bg-secondary);
  border: 1px solid var(--borders-primary);
  color: var(--fg-primary);
  text-decoration: none;
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  overflow: hidden;
}
.agent-hero__work:hover,
.agent-hero__work:focus-visible {
  transform: translateY(-1px);
  border-color: var(--fg-tertiary);
  outline: none;
  box-shadow: 0 10px 30px color-mix(in oklab, var(--fg-primary) 8%, transparent);
}

/* Skeleton placeholder sitting inside the padding. */
.agent-hero__work-skeleton {
  position: absolute;
  inset: var(--work-pad);
  border-radius: 10px;
  background: linear-gradient(110deg, var(--bg-tertiary) 0%, var(--bg-secondary) 50%, var(--bg-tertiary) 100%);
  background-size: 220% 100%;
  animation: agentWorkSkeleton 1.6s ease-in-out infinite;
}
@keyframes agentWorkSkeleton {
  0%   { background-position: 220% 0; }
  100% { background-position: -220% 0; }
}

/* Real media, inset inside the padded frame. */
.agent-hero__work > .agent-hero__work-media {
  position: absolute;
  inset: var(--work-pad);
  width: auto;
  height: auto;
  object-fit: cover;
  object-position: center;
  display: block;
  margin: 0;
  padding: 0;
  border: 1px solid color-mix(in oklab, var(--borders-primary) 80%, transparent);
  border-radius: 10px;
  background: var(--bg-tertiary);
  overflow: hidden;
  transition: transform var(--dur) var(--ease);
}
.agent-hero__work:hover > .agent-hero__work-media { transform: scale(1.01); }

@media (prefers-reduced-motion: reduce) {
  .agent-hero__work-skeleton { animation: none; }
  .agent-hero__work > .agent-hero__work-media { transition: none; }
}

/* Thinking indicator while the model is processing — rotating ring + label.
   Hero variant matches the dock bubble form. */
.agent-hero__thinking {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin-top: 0.5rem;
  font-size: 1rem;
  color: var(--fg-tertiary);
}
.agent-hero__thinking .agent-thinking-ring { width: 1.15em; height: 1.15em; }

@keyframes agentThink {
  0%, 100% { opacity: 0.25; transform: translateY(0); }
  50%      { opacity: 1;    transform: translateY(-2px); }
}

.agent-hero__caret {
  display: inline-block;
  width: 0.08em;
  height: 0.85em;
  background: currentColor;
  animation: agentCaretBlink 1s steps(1) infinite;
  vertical-align: -0.08em;
  margin-left: 0.06em;
}

@keyframes agentCaretBlink {
  50% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .agent-hero__caret,
  .agent-hero__thinking i { animation: none; }
}

@media (max-width: 640px) {
  .agent-hero__reply {
    font-size: clamp(1.4rem, 7vw, 2.1rem);
    line-height: 1.15;
  }
  .agent-hero__reply--intro { font-size: clamp(1.55rem, 8vw, 2.3rem); }
  .agent-hero__stack--splat { gap: 1rem; padding-top: 0.5rem; }
  .agent-hero__you-bubble { font-size: 0.9rem; max-width: 85%; }
  .agent-hero__thread { gap: 1.5rem; }
}

.agent-hero__form {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.4rem 0.4rem 1rem;
  margin: 0;
  background: var(--bg-secondary);
  border: 1px solid var(--borders-primary);
  border-radius: 999px;
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.agent-hero__form:focus-within {
  border-color: var(--fg-tertiary);
  background: var(--bg-tertiary);
}
.agent-hero__input {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--fg-primary);
  font-family: inherit;
  font-size: 0.95rem;
  padding: 0.5rem 0;
}
.agent-hero__input::placeholder { color: var(--fg-tertiary); }
.agent-hero__send {
  width: 2.25rem; height: 2.25rem;
  display: inline-grid; place-items: center;
  border-radius: 999px;
  background: var(--fg-primary);
  color: var(--bg-primary);
  transition: opacity var(--dur) var(--ease);
}
.agent-hero__send svg { width: 0.9rem; height: 0.9rem; }
.agent-hero__send:disabled { opacity: 0.5; cursor: progress; }

.agent-hero__prompts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem;
  margin-top: 0.75rem;
}
.agent-hero__prompt,
.agent-prompt {
  font-family: inherit;
  font-size: 0.8rem;
  color: var(--fg-secondary);
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  border: 1px solid var(--borders-primary);
  background: transparent;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.agent-hero__prompt:hover,
.agent-prompt:hover {
  background: var(--bg-tertiary);
  color: var(--fg-primary);
}
.agent-prompt__icon {
  display: inline-flex;
  width: 0.85rem;
  height: 0.85rem;
  flex-shrink: 0;
  color: #2e7bff;
  opacity: 0.85;
}
.agent-prompt__icon svg { width: 100%; height: 100%; }
.agent-prompt[data-kind="walkthrough"] {
  border-color: color-mix(in oklab, #2e7bff 32%, var(--borders-primary));
}
.agent-prompt[data-kind="walkthrough"]:hover {
  border-color: color-mix(in oklab, #2e7bff 55%, var(--borders-primary));
}

.agent-hero .agent-thread {
  width: 100%;
  text-align: left;
}
.agent-hero .agent-thread:empty { display: none; }

/* Once the user starts chatting, collapse the empty-state posture:
   hide the headline and anchor the stack to the top instead of center. */
.agent-hero:has(.agent-thread:not(:empty)) .agent-hero__headline { display: none; }
.agent-hero:has(.agent-thread:not(:empty)) .agent-hero__stack { margin: 0; }

/* ---------- dock mode ---------- */

.agent-dock {
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  z-index: 60;
  font-family: var(--font-sans);
}

.agent-dock__trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 0.9rem;
  border-radius: 999px;
  background: var(--bg-primary);
  color: var(--fg-primary);
  border: 1px solid var(--borders-primary);
  font-size: 0.82rem;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.28);
  transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.agent-dock__trigger:hover { background: var(--bg-tertiary); transform: translateY(-1px); }
.agent-dock__trigger svg { width: 0.95rem; height: 0.95rem; }

/* When the panel is open the trigger fully disappears — no chrome left over
   the content. :has() is supported everywhere we care about; dock also gets
   pointer-events cleared so the hidden trigger can't catch clicks. */
[data-agent-dock]:has([data-agent-panel]:not([hidden])) .agent-dock__trigger {
  display: none;
}

.agent-dock__panel {
  position: absolute;
  bottom: calc(100% + 0.5rem);
  right: 0;
  width: min(500px, calc(100vw - 2rem));
  height: min(880px, calc(100vh - 2.5rem));
  max-height: calc(100vh - 2.5rem);
  display: flex;
  flex-direction: column;
  background: color-mix(in oklab, var(--bg-primary) 62%, transparent);
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  border: 1px solid color-mix(in oklab, var(--borders-primary) 60%, transparent);
  border-radius: var(--radius-lg);
  box-shadow:
    0 24px 80px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 color-mix(in oklab, white 6%, transparent);
  overflow: hidden;
  min-height: 0;
}
.agent-dock__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.6rem 0.75rem;
  border-bottom: 1px solid color-mix(in oklab, var(--borders-primary) 55%, transparent);
}
.agent-dock__title {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--fg-secondary);
}
.agent-dock__title svg { width: 0.85rem; height: 0.85rem; color: var(--fg-primary); }
.agent-dock__close {
  width: 1.5rem; height: 1.5rem;
  display: grid; place-items: center;
  border-radius: 999px;
  color: var(--fg-tertiary);
}
.agent-dock__close:hover { color: var(--fg-primary); background: var(--bg-tertiary); }
.agent-dock__close svg { width: 0.75rem; height: 0.75rem; }

.agent-dock__thread {
  padding: 0.9rem 0.9rem 0.35rem;
  flex: 1 1 auto;
  min-height: 220px;
  overflow-y: auto;
  overscroll-behavior: contain;
  /* Hide native scrollbar; scrolling is trackpad/wheel only. Dwell-based
     wheel capture in agent.js keeps page-scroll passthrough intact until the
     visitor intentionally enters the dock. */
  scrollbar-width: none; /* Firefox */
}
.agent-dock__thread::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

.agent-dock__prompts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  padding: 0 0.75rem 0.5rem;
}

.agent-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding: 0.55rem 0.9rem 0.85rem;
  flex-shrink: 0;
}
.agent-suggestions[hidden] { display: none; }

/* Suggestion pills — neutral ghost style (no blue). Same family as the
   .agent-prompt quick-starts so the composer reads as one system. */
.agent-suggest {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.42rem 0.8rem;
  border-radius: 999px;
  font-size: 0.88rem;
  font-weight: 500;
  line-height: 1.2;
  color: var(--fg-secondary);
  background: transparent;
  border: 1px solid var(--borders-primary);
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.agent-suggest:hover {
  background: var(--bg-tertiary);
  border-color: var(--fg-tertiary);
  color: var(--fg-primary);
  transform: translateY(-1px);
}
.agent-suggest__label { white-space: nowrap; }
.agent-suggest__arrow { display: inline-grid; place-items: center; }
.agent-suggest__arrow svg { width: 0.85rem; height: 0.85rem; }

/* Mode pill — "Select" toggle. Outlined off, filled blue on. Lives inside
   the composer row by default (inline variant); header/toolbar variants
   have been retired. */
.agent-mode-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.32rem 0.7rem 0.32rem 0.55rem;
  border-radius: 999px;
  font-size: 0.78rem;
  line-height: 1.15;
  color: var(--fg-secondary);
  background: transparent;
  border: 1px solid var(--borders-primary);
  cursor: pointer;
  transition:
    background-color var(--dur) var(--ease),
    border-color var(--dur) var(--ease),
    color var(--dur) var(--ease),
    transform var(--dur) var(--ease);
}
.agent-mode-pill:hover {
  color: var(--fg-primary);
  border-color: color-mix(in oklab, #2e7bff 55%, var(--borders-primary));
}
.agent-mode-pill__dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 999px;
  background: transparent;
  border: 1.5px solid currentColor;
  opacity: 0.7;
  flex-shrink: 0;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.agent-mode-pill[aria-pressed="true"] {
  background: #2e7bff;
  color: #fff;
  border-color: #2e7bff;
  box-shadow: 0 4px 14px color-mix(in oklab, #2e7bff 35%, transparent);
}
.agent-mode-pill[aria-pressed="true"] .agent-mode-pill__dot {
  background: #fff;
  border-color: #fff;
  opacity: 1;
  animation: agent-mode-pulse 1.4s ease-in-out infinite;
}
@keyframes agent-mode-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.35); opacity: 0.7; }
}

/* Inline variant — sits inside the composer row, left of the send button.
   No dot, compact padding; active state stays solid blue. */
.agent-mode-pill--inline {
  padding: 0.32rem 0.65rem;
  font-size: 0.74rem;
  letter-spacing: 0.01em;
}
.agent-mode-pill--inline .agent-mode-pill__dot { display: none; }

/* Narrow viewports: collapse only the inline Walkthrough toggle to icon-only
   so the composer input keeps usable width. The Select pill keeps its label
   (it has no icon to fall back on). aria-label / title remain on the toggle. */
@media (max-width: 560px) {
  .agent-mode-pill--inline[data-walkthrough-toggle] .agent-mode-pill__label { display: none; }
  .agent-mode-pill--inline[data-walkthrough-toggle] {
    padding: 0.32rem 0.45rem;
    width: 2.1rem;
    height: 2.1rem;
    justify-content: center;
  }
}

/* Tour-icon variant for the walkthrough toggle. Replaces the dot with an
   inline SVG so the toggle and the walkthrough prompt pills share an icon. */
.agent-mode-pill__icon {
  display: inline-flex;
  width: 0.85rem;
  height: 0.85rem;
  flex-shrink: 0;
  opacity: 0.85;
}
.agent-mode-pill__icon svg { width: 100%; height: 100%; }
.agent-mode-pill[aria-pressed="true"] .agent-mode-pill__icon { opacity: 1; }

/* Header variant — sits in the dock head to the left of the close button.
   Larger than inline because the header has more breathing room. */
.agent-mode-pill--header {
  padding: 0.3rem 0.6rem 0.3rem 0.55rem;
  font-size: 0.76rem;
  margin-right: 0.35rem;
}

/* Glassmorphic tooltip. Any element with a [data-tip] attribute gets a soft,
   blurred label on hover/focus. Kept decorative — the underlying control has
   aria-label for screen readers, so the tooltip is purely visual polish. */
[data-tip] { position: relative; }
[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  top: calc(100% + 0.55rem);
  left: 50%;
  transform: translateX(-50%) translateY(-3px);
  max-width: 240px;
  width: max-content;
  padding: 0.45rem 0.7rem;
  border-radius: 10px;
  background: color-mix(in oklab, var(--bg-primary) 58%, transparent);
  color: var(--fg-secondary);
  border: 1px solid color-mix(in oklab, var(--borders-primary) 55%, transparent);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.08),
    0 10px 28px rgba(0, 0, 0, 0.22);
  font-size: 0.72rem;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0;
  text-align: center;
  white-space: normal;
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease, transform 160ms ease;
  z-index: 60;
}
[data-tip]:hover::after,
[data-tip]:focus-visible::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  transition-delay: 180ms;
}
/* Dock header pill sits near the top of the panel; flip the tooltip below
   the pill's bounds but anchor from the right so it never clips outside the
   dock panel on the right edge. */
.agent-dock__head .agent-mode-pill[data-tip]::after {
  left: auto;
  right: 0;
  transform: translateY(-3px);
}
.agent-dock__head .agent-mode-pill[data-tip]:hover::after,
.agent-dock__head .agent-mode-pill[data-tip]:focus-visible::after {
  transform: translateY(0);
}

/* Launcher variant — floats in the top-right corner of the landing launcher
   surface. Mirrors the dock header's right-side pill so the "walkthrough mode
   is on" cue reads consistently across surfaces. */
.agent-mode-pill--launcher {
  position: absolute;
  top: 0.75rem;
  right: 0.85rem;
  z-index: 3;
  padding: 0.3rem 0.65rem 0.3rem 0.55rem;
  font-size: 0.75rem;
  letter-spacing: 0.01em;
  background: color-mix(in oklab, var(--bg-primary) 60%, transparent);
  backdrop-filter: blur(6px);
}
.agent-launcher[data-state="expanding"] .agent-mode-pill--launcher,
.agent-launcher[data-state="open"] .agent-mode-pill--launcher {
  top: 0.55rem;
  right: 3rem; /* clear the launcher's close button */
}
@media (max-width: 560px) {
  .agent-mode-pill--launcher {
    top: 0.55rem;
    right: 0.6rem;
    font-size: 0.72rem;
    padding: 0.26rem 0.55rem 0.26rem 0.45rem;
  }
}

/* Walkthrough progress — thin blue fill along the divider between the dock
   header and the thread body. Width tracks journey.currentIndex / steps.length
   via the --progress custom property set by renderJourneyProgress(). Hidden
   until a journey is live so the chrome stays calm when idle. */
.agent-dock__progress {
  position: absolute;
  left: 0;
  bottom: -1px;
  height: 2px;
  width: var(--progress, 0%);
  background: #2e7bff;
  box-shadow: 0 0 10px color-mix(in oklab, #2e7bff 60%, transparent);
  pointer-events: none;
  opacity: 0;
  transition: width 380ms cubic-bezier(0.2, 0.8, 0.2, 1), opacity 220ms ease;
}
.agent-dock__progress.is-visible { opacity: 1; }
.agent-dock__head { position: relative; }

/* Launcher progress — sits along the bottom edge of the input form, above the
   prompt-chip row. Same behavior as the dock variant; same --progress token. */
.agent-launcher__progress {
  display: block;
  height: 2px;
  width: var(--progress, 0%);
  margin: 0.35rem 0 0;
  border-radius: 999px;
  background: #2e7bff;
  box-shadow: 0 0 10px color-mix(in oklab, #2e7bff 60%, transparent);
  opacity: 0;
  transition: width 380ms cubic-bezier(0.2, 0.8, 0.2, 1), opacity 220ms ease;
}
.agent-launcher__progress.is-visible { opacity: 1; }

.agent-dock__form {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 0.4rem;
  padding: 0.65rem 0.65rem 0.75rem 0.9rem;
  border-top: 1px solid color-mix(in oklab, var(--borders-primary) 55%, transparent);
  flex-shrink: 0;
}
.agent-dock__input {
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--fg-primary);
  font-family: inherit;
  font-size: 0.9rem;
}
.agent-dock__input::placeholder { color: var(--fg-tertiary); }
.agent-dock__send {
  width: 1.9rem; height: 1.9rem;
  display: inline-grid; place-items: center;
  border-radius: 999px;
  background: var(--fg-primary);
  color: var(--bg-primary);
}
.agent-dock__send svg { width: 0.8rem; height: 0.8rem; }
.agent-dock__send:disabled { opacity: 0.5; cursor: progress; }

/* ---------- empty state (pre-turn) ---------- */

.agent-empty {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.agent-empty[hidden] { display: none !important; }

.agent-empty__featured { display: flex; flex-direction: column; gap: 0.35rem; }
.agent-empty__label {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--fg-tertiary);
  padding: 0 0.1rem;
}

.agent-empty__prompts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

/* Walkthrough-first CTA block — headline + primary action above the regular
   prompt chips. Shown only when state.walkthroughMode is on. */
.agent-empty__cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.45rem;
  padding: 0.75rem 0.85rem;
  border-radius: 14px;
  background: color-mix(in oklab, #2e7bff 10%, transparent);
  border: 1px solid color-mix(in oklab, #2e7bff 35%, transparent);
}
.agent-empty__cta-headline {
  font-size: 0.85rem;
  color: var(--fg-primary);
  font-weight: 500;
}
.agent-empty__cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.42rem 0.85rem;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 500;
  color: #fff;
  background: #2e7bff;
  border: 1px solid #2e7bff;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.agent-empty__cta-btn:hover { background: #2a5cd1; transform: translateY(-1px); }

.agent-hero .agent-empty {
  width: 100%;
  gap: 1.25rem;
  text-align: left;
}
.agent-hero .agent-empty__prompts { justify-content: center; }
.agent-hero .agent-empty__label { text-align: left; }

.agent-cards--grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  text-align: left;
}
@media (max-width: 640px) {
  .agent-cards--grid { grid-template-columns: 1fr; }
}
.agent-dock__panel .agent-empty { padding: 0 0.75rem 0.5rem; }

/* ---------- live typing caret + chips ---------- */

.agent-caret {
  display: inline-block;
  width: 2px;
  height: 1em;
  margin-left: 2px;
  vertical-align: -2px;
  background: var(--fg-primary);
  opacity: 0.8;
  animation: agent-blink 1s steps(2) infinite;
}
@keyframes agent-blink { 50% { opacity: 0; } }

.agent-live-chip {
  display: inline-flex;
  align-items: center;
  margin-left: 0.5rem;
  padding: 0.15rem 0.45rem;
  border-radius: 999px;
  font-size: 0.7rem;
  color: var(--fg-tertiary);
  background: var(--bg-tertiary);
}

/* ---------- dock artifact chip (minimal, sleek) ---------- */

.agent-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  width: 100%;
  padding: 0.55rem 0.85rem;
  border: 1px solid color-mix(in oklab, var(--borders-primary) 55%, transparent);
  border-radius: 999px;
  background: color-mix(in oklab, var(--bg-secondary) 55%, transparent);
  color: var(--fg-secondary);
  text-decoration: none;
  font-size: 0.88rem;
  line-height: 1.25;
  opacity: 0.85;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease), opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.agent-chip:hover,
.agent-chip:focus-visible {
  background: var(--bg-tertiary);
  border-color: var(--fg-tertiary);
  color: var(--fg-primary);
  opacity: 1;
  outline: none;
  transform: translateY(-1px);
}
.agent-chip__icon {
  display: inline-grid;
  place-items: center;
  color: var(--fg-tertiary);
  flex-shrink: 0;
}
.agent-chip__icon svg { width: 0.95rem; height: 0.95rem; }
.agent-chip__title {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--fg-primary);
  font-weight: 600;
}
.agent-chip__project {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--fg-tertiary);
  font-weight: 400;
  opacity: 0.7;
  text-align: right;
  padding-left: 0.5rem;
}
.agent-chip__arrow {
  display: inline-grid;
  place-items: center;
  color: var(--fg-tertiary);
  flex-shrink: 0;
  transition: transform var(--dur) var(--ease), color var(--dur) var(--ease);
}
.agent-chip__arrow svg { width: 0.8rem; height: 0.8rem; }
.agent-chip:hover .agent-chip__arrow,
.agent-chip:focus-visible .agent-chip__arrow {
  color: var(--fg-primary);
  transform: translateX(2px);
}
.agent-chip:hover .agent-chip__project { opacity: 0.9; color: var(--fg-secondary); }

/* ---------- context pills (selection + element pick) ---------- */

.agent-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  padding: 0 0.9rem 0.5rem;
  flex-shrink: 0;
}
.agent-pills[hidden] { display: none; }
.agent-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  max-width: 100%;
  padding: 0.25rem 0.45rem 0.25rem 0.55rem;
  border-radius: 999px;
  background: color-mix(in oklab, #2e7bff 16%, transparent);
  color: #2a5cd1;
  border: 1px solid color-mix(in oklab, #2e7bff 32%, transparent);
  font-size: 0.76rem;
  line-height: 1.2;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.agent-pill:hover {
  background: color-mix(in oklab, #2e7bff 24%, transparent);
  border-color: color-mix(in oklab, #2e7bff 48%, transparent);
  color: #1b4bb5;
}
.agent-pill__icon {
  display: inline-grid;
  place-items: center;
  width: 0.85rem;
  height: 0.85rem;
  flex-shrink: 0;
}
.agent-pill__icon svg { width: 0.8rem; height: 0.8rem; }
.agent-pill__label {
  max-width: 18ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.agent-pill__close {
  display: inline-grid;
  place-items: center;
  width: 1rem;
  height: 1rem;
  border-radius: 999px;
  color: inherit;
  opacity: 0.7;
  background: transparent;
  border: 0;
  cursor: pointer;
  flex-shrink: 0;
}
.agent-pill__close:hover { opacity: 1; background: color-mix(in oklab, #2e7bff 18%, transparent); }
.agent-pill__close svg { width: 0.6rem; height: 0.6rem; }
@media (prefers-color-scheme: dark) {
  .agent-pill {
    background: color-mix(in oklab, #7aa8ff 14%, transparent);
    color: #bcd2ff;
    border-color: color-mix(in oklab, #7aa8ff 28%, transparent);
  }
  .agent-pill:hover {
    background: color-mix(in oklab, #7aa8ff 22%, transparent);
    border-color: color-mix(in oklab, #7aa8ff 44%, transparent);
    color: #e3ecff;
  }
}

/* ---------- inline selection popover ---------- */

.agent-selection {
  position: absolute;
  z-index: 1000;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  background: var(--bg-primary);
  color: var(--fg-primary);
  border: 1px solid var(--borders-primary);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
  font-size: 0.78rem;
  cursor: pointer;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 120ms var(--ease), transform 120ms var(--ease);
  pointer-events: auto;
}
.agent-selection[hidden] { display: none; }
.agent-selection.is-visible { opacity: 1; transform: translateY(0); }
.agent-selection:hover { background: var(--bg-tertiary); }
.agent-selection svg { width: 0.8rem; height: 0.8rem; color: #2e7bff; }

/* ---------- element pick mode (Lovable-style) ---------- */

.agent-pick-outline {
  position: fixed;
  z-index: 999;
  pointer-events: none;
  border: 1.5px solid #2e7bff;
  border-radius: 6px;
  box-shadow: 0 0 0 4px color-mix(in oklab, #2e7bff 18%, transparent);
  transition: top 80ms ease, left 80ms ease, width 80ms ease, height 80ms ease;
}
.agent-pick-outline[hidden] { display: none; }
.agent-pick-outline__tag {
  position: absolute;
  top: -1.4rem;
  left: 0;
  padding: 0.15rem 0.45rem;
  background: #2e7bff;
  color: #fff;
  font-size: 0.68rem;
  line-height: 1.1;
  letter-spacing: 0.04em;
  border-radius: 4px;
  white-space: nowrap;
  text-transform: lowercase;
}

/* Select mode — the panel stays fully interactive so the user can see the
   captured pill appear. We only dim surrounding chrome and keep a soft cue
   on pickable content. */
html.is-agent-picking nav,
html.is-agent-picking header[role="banner"] {
  opacity: 0.55;
  transition: opacity var(--dur) var(--ease);
}

.agent-dock__head-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
}

/* Fresh-pill pulse — runs briefly after a selection or element is captured
   so the user gets visual confirmation that the pin landed. */
.agent-pill--fresh {
  animation: agent-pill-fresh 900ms ease-out;
}
@keyframes agent-pill-fresh {
  0%   { box-shadow: 0 0 0 0 color-mix(in oklab, #2e7bff 55%, transparent); transform: scale(1); }
  35%  { box-shadow: 0 0 0 6px color-mix(in oklab, #2e7bff 25%, transparent); transform: scale(1.06); }
  100% { box-shadow: 0 0 0 0 color-mix(in oklab, #2e7bff 0%,  transparent); transform: scale(1); }
}

/* ---------- copilot-driven nav highlight ---------- */

/* Short flash kept for legacy paths (hash jumps, etc.); intentionally brief
   because the tour path uses the sticky highlight below instead. */
.is-agent-flash {
  animation: agent-blink 1.2s ease-in-out;
  border-radius: 8px;
  outline-offset: 2px;
}
@keyframes agent-blink {
  0%   { outline: 0 solid transparent; }
  12%  { outline: 2px solid var(--fg-primary); }
  28%  { outline: 0 solid transparent; }
  44%  { outline: 2px solid var(--fg-primary); }
  60%  { outline: 0 solid transparent; }
  76%  { outline: 2px solid var(--fg-primary); }
  100% { outline: 0 solid transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .is-agent-flash { animation: none; outline: 2px solid var(--fg-tertiary); outline-offset: 2px; }
}

/* Sticky highlight — persists on the current tour target until the next step
   activates, the journey is interrupted, or the visitor takes over. A soft
   blue ring with a subtle inner glow so the element reads as "you are here"
   without screaming. */
.is-agent-highlight {
  outline: 2px solid color-mix(in oklab, #2e7bff 70%, transparent);
  outline-offset: 4px;
  border-radius: 10px;
  box-shadow:
    0 0 0 6px color-mix(in oklab, #2e7bff 14%, transparent),
    0 14px 32px color-mix(in oklab, #2e7bff 10%, transparent);
  transition: outline-color 280ms var(--ease), box-shadow 280ms var(--ease);
  animation: agent-highlight-in 420ms var(--ease);
}
@keyframes agent-highlight-in {
  from {
    outline-color: color-mix(in oklab, #2e7bff 0%, transparent);
    box-shadow: 0 0 0 0 color-mix(in oklab, #2e7bff 0%, transparent);
  }
  to {
    outline-color: color-mix(in oklab, #2e7bff 70%, transparent);
    box-shadow:
      0 0 0 6px color-mix(in oklab, #2e7bff 14%, transparent),
      0 14px 32px color-mix(in oklab, #2e7bff 10%, transparent);
  }
}
@media (prefers-reduced-motion: reduce) {
  .is-agent-highlight { animation: none; }
}

/* ---------- guided tour (tour_sections) ---------- */

/* Tour-step assistant messages get a small "N / M · Section title" chip above
   the bubble so users can see the walkthrough progressing. Visually tied to
   the blue pin/select family so the guided mode reads as one system. */
.agent-msg--tour {
  gap: 0.35rem;
  margin-top: 0.35rem;
}

.agent-tour-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  align-self: flex-start;
  padding: 0.22rem 0.55rem 0.22rem 0.5rem;
  border-radius: 999px;
  font-size: 0.7rem;
  line-height: 1.2;
  color: #2a5cd1;
  background: color-mix(in oklab, #2e7bff 14%, transparent);
  border: 1px solid color-mix(in oklab, #2e7bff 28%, transparent);
  letter-spacing: 0.01em;
  animation: agent-tour-chip-in 320ms var(--ease);
}
.agent-tour-chip__num {
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 0.66rem;
  opacity: 0.85;
}
.agent-tour-chip__title {
  color: #1b4bb5;
  font-weight: 600;
  max-width: 26ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@keyframes agent-tour-chip-in {
  from { opacity: 0; transform: translateY(-2px); }
  to   { opacity: 1; transform: translateY(0); }
}

.agent-msg--tour .agent-bubble {
  border-left: 2px solid color-mix(in oklab, #2e7bff 45%, transparent);
  padding-left: 0.75rem;
  margin-left: 0.1rem;
}

/* Hero variant — same idea, sized up to match hero typography rhythm. */
.agent-hero__agent-msg--tour { gap: 0.5rem; }
.agent-tour-chip--hero {
  font-size: 0.75rem;
  padding: 0.3rem 0.65rem 0.3rem 0.55rem;
}

@media (prefers-color-scheme: dark) {
  .agent-tour-chip {
    background: color-mix(in oklab, #7aa8ff 14%, transparent);
    color: #bcd2ff;
    border-color: color-mix(in oklab, #7aa8ff 28%, transparent);
  }
  .agent-tour-chip__title { color: #e3ecff; }
  .agent-msg--tour .agent-bubble {
    border-left-color: color-mix(in oklab, #7aa8ff 45%, transparent);
  }
}

/* ---------- journey card (HITL multi-step navigation) ---------- */

/* One card per tour_sections call. Proposed state shows the plan + "Let's
   go"; running state expands the current step with its narration and shows
   the Next button. Visual style is deliberately restrained — a sleek plan
   card, not a loud widget. */
.agent-msg--journey { width: 100%; }
.agent-journey {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 0.85rem 1rem 0.9rem;
  border: 1px solid color-mix(in oklab, #2e7bff 18%, var(--borders-primary));
  border-radius: var(--radius-lg, 12px);
  background:
    linear-gradient(180deg,
      color-mix(in oklab, #2e7bff 6%, var(--bg-secondary)) 0%,
      color-mix(in oklab, #2e7bff 2%, var(--bg-secondary)) 100%);
  box-shadow: 0 1px 0 color-mix(in oklab, white 4%, transparent) inset;
}
.agent-journey__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.agent-journey__chip {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #1d4ed8;
  background: #e6eeff;
  border: 1px solid #b8cdff;
}

.agent-journey__intro {
  margin: 0;
  font-size: 0.94rem;
  line-height: 1.5;
  color: var(--fg-secondary);
}

.agent-journey__steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  border-top: 1px solid color-mix(in oklab, #2e7bff 10%, transparent);
  padding-top: 0.65rem;
}
.agent-journey__step {
  display: grid;
  grid-template-columns: 1.55rem 1fr;
  gap: 0.65rem;
  align-items: start;
  padding: 0.45rem 0.4rem;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.agent-journey__step:hover { background: color-mix(in oklab, #2e7bff 6%, transparent); }
.agent-journey__num {
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 0.72rem;
  color: var(--fg-tertiary);
  padding-top: 0.18rem;
  letter-spacing: 0.02em;
}
.agent-journey__body {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}
.agent-journey__title {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--fg-secondary);
  line-height: 1.3;
}
.agent-journey__narration {
  font-size: 0.88rem;
  color: var(--fg-secondary);
  line-height: 1.55;
}

/* Step states. Current is the visual focus; done is dimmed with a check-ish
   tone; upcoming is quiet. */
.agent-journey__step.is-current .agent-journey__num {
  color: #2a5cd1;
}
.agent-journey__step.is-current .agent-journey__title {
  color: var(--fg-primary);
}
.agent-journey__step.is-done { opacity: 0.62; }
.agent-journey__step.is-done .agent-journey__title { text-decoration: line-through; text-decoration-color: color-mix(in oklab, var(--fg-tertiary) 60%, transparent); }
.agent-journey__step.is-upcoming .agent-journey__title { color: var(--fg-tertiary); }

.agent-journey__controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  padding-top: 0.35rem;
  border-top: 1px solid color-mix(in oklab, #2e7bff 14%, transparent);
}

/* Shared pill style for all journey control buttons. */
.agent-journey__next,
.agent-journey__go,
.agent-journey__resume {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.45rem 0.85rem;
  border-radius: 999px;
  border: 0;
  background: #2e7bff;
  color: #fff;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 4px 14px color-mix(in oklab, #2e7bff 35%, transparent);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.agent-journey__next:hover,
.agent-journey__go:hover,
.agent-journey__resume:hover { transform: translateY(-1px); box-shadow: 0 6px 18px color-mix(in oklab, #2e7bff 40%, transparent); }
.agent-journey__next svg,
.agent-journey__go svg,
.agent-journey__resume svg { width: 0.9rem; height: 0.9rem; }

/* Ready-pulse — triggered ~14s after a step activates if the user hasn't
   advanced. Calls attention without being disruptive. */
.agent-journey__next.is-ready {
  animation: agent-journey-ready-pulse 1.6s ease-in-out infinite;
}
@keyframes agent-journey-ready-pulse {
  0%, 100% { box-shadow: 0 4px 14px color-mix(in oklab, #2e7bff 35%, transparent); }
  50%      { box-shadow: 0 6px 26px color-mix(in oklab, #2e7bff 65%, transparent); }
}

.agent-journey__skip {
  padding: 0.4rem 0.75rem;
  border-radius: 999px;
  border: 1px solid color-mix(in oklab, var(--fg-tertiary) 50%, transparent);
  background: transparent;
  color: var(--fg-tertiary);
  font-size: 0.82rem;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.agent-journey__skip:hover {
  background: color-mix(in oklab, var(--bg-tertiary) 70%, transparent);
  color: var(--fg-primary);
}

.agent-journey__end {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.82rem;
  font-style: normal;
  color: var(--fg-secondary);
}
.agent-journey__end svg { width: 0.85rem; height: 0.85rem; opacity: 0.75; }
.agent-journey__end--muted { opacity: 0.7; font-style: italic; }
.agent-journey__end-meta {
  margin-left: 0.55rem;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  color: var(--fg-tertiary);
  text-transform: lowercase;
}

@media (prefers-color-scheme: dark) {
  .agent-journey {
    background: color-mix(in oklab, #7aa8ff 6%, var(--bg-secondary));
    border-color: color-mix(in oklab, #7aa8ff 22%, var(--borders-primary));
  }
  .agent-journey__chip {
    background: color-mix(in oklab, #7aa8ff 14%, transparent);
    color: #bcd2ff;
    border-color: color-mix(in oklab, #7aa8ff 28%, transparent);
  }
  .agent-journey__step.is-current .agent-journey__num { color: #bcd2ff; }
  .agent-journey__next {
    background: #4f8dff;
    box-shadow: 0 4px 14px color-mix(in oklab, #4f8dff 40%, transparent);
  }
}

/* ---------- responsive ---------- */

@media (max-width: 900px) {
  .agent-hero { padding: 2rem 1.25rem; }
  .agent-hero__stack { gap: 1.25rem; }
  .agent-dock { bottom: 0.75rem; right: 0.75rem; }
  .agent-dock__panel { width: calc(100vw - 1.5rem); }
}

/* On phones the dock occupies the full visual width with symmetric gutters
   so it doesn't read as off-center. We pin the wrap to both sides instead
   of just the right, which guarantees the panel can never extend past the
   viewport regardless of inner content. */
@media (max-width: 768px) {
  .agent-dock {
    left: 0.625rem;
    right: 0.625rem;
    bottom: 0.625rem;
    width: auto;
  }
  .agent-dock__panel {
    left: 0;
    right: 0;
    width: auto;
    border-radius: 18px;
    height: min(72vh, calc(100vh - 6rem));
    max-height: calc(100vh - 6rem);
  }
  /* Pull the dock inner padding in so content doesn't crowd the right edge. */
  .agent-dock__head,
  .agent-dock__form { padding-left: 0.875rem; padding-right: 0.875rem; }
}