diff --git a/catalog/inventory.json b/catalog/inventory.json
index 584a1740..a70d5cbb 100644
--- a/catalog/inventory.json
+++ b/catalog/inventory.json
@@ -5456,7 +5456,7 @@
     {
       "id": "aurora-chat-block",
       "title": "Aurora Interactive Chat",
-      "description": "Interactive Aurora chat workspace combining the new conversation primitives with steerable streaming, editable user turns, hover actions, code and source surfaces, model/reasoning selection, slash-command skills, file mentions, and an in-field composer.",
+      "description": "Interactive Aurora chat workspace combining composable conversation primitives with steerable streaming, markdown and citation-rich assistant responses, editable user turns, code/source surfaces, attachment previews, empty/error states, model/reasoning selection, slash-command skills, file mentions, and an in-field composer.",
       "registryType": "registry:block",
       "group": "Chat Primitives",
       "categories": [
@@ -5487,10 +5487,13 @@
         "@aurora/aurora-bubble",
         "@aurora/aurora-chat-attachment",
         "@aurora/aurora-marker",
+        "@aurora/aurora-callout",
+        "@aurora/aurora-empty-state",
         "@aurora/aurora-code-block",
         "@aurora/aurora-ai-snippet",
         "@aurora/aurora-ai-sources",
-        "@aurora/aurora-ai-reasoning"
+        "@aurora/aurora-ai-reasoning",
+        "@aurora/aurora-ai-response"
       ],
       "fixtureId": null,
       "previewSlug": "chat-block",
diff --git a/lib/client-catalog.json b/lib/client-catalog.json
index 1d2ebc62..05b00077 100644
--- a/lib/client-catalog.json
+++ b/lib/client-catalog.json
@@ -588,7 +588,7 @@
       "slug": "chat-block",
       "label": "Interactive Chat",
       "group": "Chat Primitives",
-      "description": "Interactive Aurora chat workspace combining the new conversation primitives with steerable streaming, editable user turns, hover actions, code and source surfaces, model/reasoning selection, slash-command skills, file mentions, and an in-field composer.",
+      "description": "Interactive Aurora chat workspace combining composable conversation primitives with steerable streaming, markdown and citation-rich assistant responses, editable user turns, code/source surfaces, attachment previews, empty/error states, model/reasoning selection, slash-command skills, file mentions, and an in-field composer.",
       "registry": "aurora-chat-block",
       "installUrl": "https://aurora.tootie.tv/r/aurora-chat-block.json"
     },
diff --git a/public/r/aurora-ai-inline-citation.json b/public/r/aurora-ai-inline-citation.json
index 2cf56301..5a232616 100644
--- a/public/r/aurora-ai-inline-citation.json
+++ b/public/r/aurora-ai-inline-citation.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "registry/aurora/blocks/ai/elements/inline-citation.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { safeHttpUrl } from \"@/registry/aurora/lib/safe-url\"\n\nexport interface InlineCitationProps\n  extends React.AnchorHTMLAttributes<HTMLAnchorElement> {\n  /** 1-based citation number rendered inside the chip. */\n  index: number\n  /** Source title shown in the hover/focus preview popover. */\n  title?: string\n  /** Optional context line shown below the title. */\n  description?: string\n  /** Source URL shown in the hover/focus preview popover. */\n  url?: string\n}\n\n/**\n * InlineCitation — a compact rose citation chip rendered inline with body text.\n * When `title`/`url` are supplied it reveals a source preview on hover and\n * keyboard focus; otherwise it renders as a plain numbered chip.\n */\nconst InlineCitation = (\n    { ref,\n      className,\n      index,\n      title,\n      description,\n      url,\n      style,\n      children,\n      href,\n      target,\n      rel,\n      tabIndex,\n      onMouseEnter,\n      onMouseLeave,\n      onFocus,\n      onBlur,\n      ...props\n    }: InlineCitationProps & { ref?: React.Ref<HTMLAnchorElement> }\n  ) => {\n    const [open, setOpen] = React.useState(false)\n    const resolvedHref = safeHttpUrl(href ?? url)\n    const hasPreview = Boolean(title || description || url)\n    const previewId = React.useId()\n    const resolvedTarget = target ?? (resolvedHref ? \"_blank\" : undefined)\n    const resolvedRel = rel ?? (resolvedHref ? \"noreferrer noopener\" : undefined)\n\n    const handleMouseEnter = React.useCallback(\n      (event: React.MouseEvent<HTMLAnchorElement>) => {\n        if (hasPreview) setOpen(true)\n        onMouseEnter?.(event)\n      },\n      [hasPreview, onMouseEnter]\n    )\n    const handleMouseLeave = React.useCallback(\n      (event: React.MouseEvent<HTMLAnchorElement>) => {\n        if (hasPreview) setOpen(false)\n        onMouseLeave?.(event)\n      },\n      [hasPreview, onMouseLeave]\n    )\n    const handleFocus = React.useCallback(\n      (event: React.FocusEvent<HTMLAnchorElement>) => {\n        if (hasPreview) setOpen(true)\n        onFocus?.(event)\n      },\n      [hasPreview, onFocus]\n    )\n    const handleBlur = React.useCallback(\n      (event: React.FocusEvent<HTMLAnchorElement>) => {\n        if (hasPreview) setOpen(false)\n        onBlur?.(event)\n      },\n      [hasPreview, onBlur]\n    )\n\n    const chip = (\n      <a\n        ref={ref}\n        className={[\n          \"inline-flex items-center justify-center rounded-[5px] border align-baseline no-underline\",\n          \"border-[color:var(--aurora-citation-border)] bg-[var(--aurora-citation-bg)] transition-colors\",\n          \"hover:border-[color:var(--aurora-citation-border-hover)] hover:bg-[var(--aurora-citation-bg-hover)]\",\n          \"outline-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--aurora-citation-ring)] focus-visible:ring-offset-0\",\n          className,\n        ]\n          .filter(Boolean)\n          .join(\" \")}\n        href={resolvedHref}\n        target={resolvedTarget}\n        rel={resolvedRel}\n        tabIndex={tabIndex ?? (hasPreview && !resolvedHref ? 0 : undefined)}\n        aria-label={title ? `Citation ${index}: ${title}` : `Citation ${index}`}\n        aria-describedby={hasPreview && open ? previewId : undefined}\n        onMouseEnter={handleMouseEnter}\n        onMouseLeave={handleMouseLeave}\n        onFocus={handleFocus}\n        onBlur={handleBlur}\n        style={{\n          minWidth: \"1.05rem\",\n          padding: \"1px 5px\",\n          [\"--aurora-citation-bg\" as string]:\n            \"color-mix(in srgb, var(--aurora-accent-pink) 12%, transparent)\",\n          [\"--aurora-citation-bg-hover\" as string]:\n            \"color-mix(in srgb, var(--aurora-accent-pink) 20%, transparent)\",\n          [\"--aurora-citation-border\" as string]:\n            \"color-mix(in srgb, var(--aurora-accent-pink) 32%, transparent)\",\n          [\"--aurora-citation-border-hover\" as string]:\n            \"color-mix(in srgb, var(--aurora-accent-pink) 48%, transparent)\",\n          [\"--aurora-citation-ring\" as string]:\n            \"color-mix(in srgb, var(--aurora-accent-pink) 45%, transparent)\",\n          color: \"var(--aurora-accent-pink)\",\n          fontFamily: \"var(--aurora-font-mono)\",\n          fontSize: 11,\n          fontWeight: 600,\n          lineHeight: 1.45,\n          ...style,\n        }}\n        {...props}\n      >\n        {children ?? index}\n      </a>\n    )\n\n    if (!hasPreview) return chip\n\n    return (\n      <span\n        className=\"relative inline-block align-baseline\"\n        style={{ lineHeight: 0 }}\n      >\n        {chip}\n        <span\n          id={previewId}\n          role=\"tooltip\"\n          hidden={!open}\n          className=\"absolute left-1/2 z-50 grid gap-1\"\n          style={{\n            bottom: \"calc(100% + 8px)\",\n            transform: \"translateX(-50%)\",\n            width: \"max-content\",\n            maxWidth: 260,\n            padding: \"10px 12px\",\n            background: \"var(--aurora-surface-raised)\",\n            border: \"1px solid var(--aurora-border-strong)\",\n            borderRadius: \"var(--aurora-radius-1)\",\n            boxShadow:\n              \"var(--aurora-shadow-medium), var(--aurora-highlight-medium)\",\n          }}\n        >\n          {title ? (\n            <span\n              className=\"aurora-text-control\"\n              style={{\n                lineHeight: 1.35,\n                color: \"var(--aurora-text-primary)\",\n              }}\n            >\n              {title}\n            </span>\n          ) : null}\n          {description ? (\n            <span className=\"aurora-text-body-sm\" style={{ color: \"var(--aurora-text-muted)\" }}>\n              {description}\n            </span>\n          ) : null}\n          {url ? (\n            <span\n              className=\"aurora-text-meta\"\n              style={{\n                lineHeight: 1.4,\n                color: \"var(--aurora-accent-pink)\",\n                wordBreak: \"break-all\",\n              }}\n            >\n              {url}\n            </span>\n          ) : null}\n        </span>\n      </span>\n    )\n  }\nInlineCitation.displayName = \"InlineCitation\"\n\nexport { InlineCitation }\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { safeHttpUrl } from \"@/registry/aurora/lib/safe-url\"\n\nexport interface InlineCitationProps\n  extends React.AnchorHTMLAttributes<HTMLAnchorElement> {\n  /** 1-based citation number rendered inside the chip. */\n  index: number\n  /** Source title shown in the hover/focus preview popover. */\n  title?: string\n  /** Optional context line shown below the title. */\n  description?: string\n  /** Source URL shown in the hover/focus preview popover. */\n  url?: string\n}\n\n/**\n * InlineCitation — a compact rose citation chip rendered inline with body text.\n * When `title`/`url` are supplied it reveals a source preview on hover and\n * keyboard focus; otherwise it renders as a plain numbered chip.\n */\nconst InlineCitation = (\n    { ref,\n      className,\n      index,\n      title,\n      description,\n      url,\n      style,\n      children,\n      href,\n      target,\n      rel,\n      tabIndex,\n      onMouseEnter,\n      onMouseLeave,\n      onFocus,\n      onBlur,\n      ...props\n    }: InlineCitationProps & { ref?: React.Ref<HTMLAnchorElement> }\n  ) => {\n    const [open, setOpen] = React.useState(false)\n    const resolvedHref = safeHttpUrl(href ?? url)\n    const sourceHost = resolvedHref ? new URL(resolvedHref).hostname.replace(/^www\\./, \"\") : null\n    const hasPreview = Boolean(title || description || url)\n    const previewId = React.useId()\n    const resolvedTarget = target ?? (resolvedHref ? \"_blank\" : undefined)\n    const resolvedRel = rel ?? (resolvedHref ? \"noreferrer noopener\" : undefined)\n\n    const handleMouseEnter = React.useCallback(\n      (event: React.MouseEvent<HTMLAnchorElement>) => {\n        if (hasPreview) setOpen(true)\n        onMouseEnter?.(event)\n      },\n      [hasPreview, onMouseEnter]\n    )\n    const handleMouseLeave = React.useCallback(\n      (event: React.MouseEvent<HTMLAnchorElement>) => {\n        if (hasPreview) setOpen(false)\n        onMouseLeave?.(event)\n      },\n      [hasPreview, onMouseLeave]\n    )\n    const handleFocus = React.useCallback(\n      (event: React.FocusEvent<HTMLAnchorElement>) => {\n        if (hasPreview) setOpen(true)\n        onFocus?.(event)\n      },\n      [hasPreview, onFocus]\n    )\n    const handleBlur = React.useCallback(\n      (event: React.FocusEvent<HTMLAnchorElement>) => {\n        if (hasPreview) setOpen(false)\n        onBlur?.(event)\n      },\n      [hasPreview, onBlur]\n    )\n\n    const chip = (\n      <a\n        ref={ref}\n        className={[\n          \"inline-flex items-center justify-center rounded-[5px] border align-baseline no-underline\",\n          \"border-[color:var(--aurora-citation-border)] bg-[var(--aurora-citation-bg)] transition-colors\",\n          \"hover:border-[color:var(--aurora-citation-border-hover)] hover:bg-[var(--aurora-citation-bg-hover)]\",\n          \"outline-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--aurora-citation-ring)] focus-visible:ring-offset-0\",\n          className,\n        ]\n          .filter(Boolean)\n          .join(\" \")}\n        href={resolvedHref}\n        target={resolvedTarget}\n        rel={resolvedRel}\n        tabIndex={tabIndex ?? (hasPreview && !resolvedHref ? 0 : undefined)}\n        aria-label={title ? `Citation ${index}: ${title}` : `Citation ${index}`}\n        aria-describedby={hasPreview && open ? previewId : undefined}\n        onMouseEnter={handleMouseEnter}\n        onMouseLeave={handleMouseLeave}\n        onFocus={handleFocus}\n        onBlur={handleBlur}\n        style={{\n          minWidth: \"1.05rem\",\n          padding: \"1px 5px\",\n          [\"--aurora-citation-bg\" as string]:\n            \"color-mix(in srgb, var(--aurora-accent-pink) 12%, transparent)\",\n          [\"--aurora-citation-bg-hover\" as string]:\n            \"color-mix(in srgb, var(--aurora-accent-pink) 20%, transparent)\",\n          [\"--aurora-citation-border\" as string]:\n            \"color-mix(in srgb, var(--aurora-accent-pink) 32%, transparent)\",\n          [\"--aurora-citation-border-hover\" as string]:\n            \"color-mix(in srgb, var(--aurora-accent-pink) 48%, transparent)\",\n          [\"--aurora-citation-ring\" as string]:\n            \"color-mix(in srgb, var(--aurora-accent-pink) 45%, transparent)\",\n          color: \"var(--aurora-accent-pink)\",\n          fontFamily: \"var(--aurora-font-mono)\",\n          fontSize: 11,\n          fontWeight: 600,\n          lineHeight: 1.45,\n          ...style,\n        }}\n        {...props}\n      >\n        {children ?? index}\n      </a>\n    )\n\n    if (!hasPreview) return chip\n\n    return (\n      <span\n        className=\"relative inline-block align-baseline\"\n        style={{ lineHeight: 0 }}\n      >\n        {chip}\n        <span\n          id={previewId}\n          role=\"tooltip\"\n          hidden={!open}\n          className=\"absolute left-1/2 z-50 grid gap-1\"\n          style={{\n            bottom: \"calc(100% + 8px)\",\n            transform: \"translateX(-50%)\",\n            width: \"max-content\",\n            maxWidth: 260,\n            padding: \"10px 12px\",\n            background: \"var(--aurora-surface-raised)\",\n            border: \"1px solid var(--aurora-border-strong)\",\n            borderRadius: \"var(--aurora-radius-1)\",\n            boxShadow:\n              \"var(--aurora-shadow-medium), var(--aurora-highlight-medium)\",\n          }}\n        >\n          {title ? (\n            <span\n              className=\"aurora-text-control\"\n              style={{\n                lineHeight: 1.35,\n                color: \"var(--aurora-text-primary)\",\n              }}\n            >\n              {title}\n            </span>\n          ) : null}\n          {description ? (\n            <span className=\"aurora-text-body-sm\" style={{ color: \"var(--aurora-text-muted)\" }}>\n              {description}\n            </span>\n          ) : null}\n          {sourceHost ? (\n            <span className=\"aurora-text-meta inline-flex items-center gap-1\" style={{ lineHeight: 1.4, color: \"var(--aurora-accent-pink)\" }}>\n              <span>{sourceHost}</span><span aria-hidden=\"true\">↗</span>\n            </span>\n          ) : null}\n        </span>\n      </span>\n    )\n  }\nInlineCitation.displayName = \"InlineCitation\"\n\nexport { InlineCitation }\n",
       "type": "registry:component",
       "target": "@components/aurora/ai/inline-citation.tsx"
     }
diff --git a/public/r/aurora-ai-response.json b/public/r/aurora-ai-response.json
index b5f99616..2d68a222 100644
--- a/public/r/aurora-ai-response.json
+++ b/public/r/aurora-ai-response.json
@@ -17,7 +17,7 @@
   "files": [
     {
       "path": "registry/aurora/blocks/ai/elements/response.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Check, CodeXml, Copy } from \"lucide-react\"\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/registry/aurora/ui/button\"\nimport { useClipboard } from \"@/registry/aurora/lib/use-clipboard\"\nimport { safeHttpUrl } from \"@/registry/aurora/lib/safe-url\"\n\nexport interface ResponseSource {\n  /** Source title shown in the citation hover/focus preview. */\n  title: string\n  /** Source URL — rendered in the preview and used as the chip's link target. */\n  href?: string\n  /** Optional one-line description shown beneath the title in the preview. */\n  description?: string\n}\n\nexport interface ResponseProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Markdown answer body. Supports a focused subset matching the Claude Design\n   * Response element: `**bold**`, inline `` `code` ``, fenced ```code blocks```\n   * (with an optional language on the fence), `- ` bullet lists, and `[[n]]`\n   * citation references that bind to `sources[n - 1]`.\n   */\n  markdown: string\n  /** Ordered citation sources; a `[[n]]` reference maps to `sources[n - 1]`. */\n  sources?: ResponseSource[]\n  /** Fired when a citation chip is activated, with its 1-based index. */\n  onCitationClick?: (index: number, source?: ResponseSource) => void\n  /**\n   * When true the answer renders with a soft trailing fade + caret, signalling\n   * an in-progress stream. When the stream stops, set `streaming={false}`.\n   */\n  streaming?: boolean\n}\n\n/* ------------------------------------------------------------------ */\n/* Code-fence syntax highlighter (mirrors the registry Snippet spec). */\n/* ------------------------------------------------------------------ */\n\nconst KEYWORDS = new Set([\n  \"export\", \"import\", \"from\", \"default\", \"const\", \"let\", \"var\", \"function\",\n  \"async\", \"await\", \"return\", \"if\", \"else\", \"for\", \"while\", \"new\", \"class\",\n  \"extends\", \"typeof\", \"in\", \"of\", \"yield\", \"try\", \"catch\", \"finally\", \"throw\",\n  \"def\", \"lambda\", \"true\", \"false\", \"null\", \"undefined\", \"None\", \"True\",\n  \"False\", \"fn\", \"match\", \"pub\", \"use\", \"mut\", \"impl\", \"self\",\n])\n\nconst TOKEN_RE =\n  /(\\/\\/[^\\n]*|#[^\\n]*)|(\"(?:\\\\.|[^\"\\\\])*\"|'(?:\\\\.|[^'\\\\])*'|`(?:\\\\.|[^`\\\\])*`)|(\\b\\d[\\d_.]*\\b)|([A-Za-z_$][\\w$]*)|(\\s+)|([^\\s\\w$])/g\n\nfunction tokenColor(word: string, prevSig: string, nextSig: string): string | undefined {\n  if (KEYWORDS.has(word)) return \"var(--aurora-accent-pink)\"\n  if (prevSig === \".\" || nextSig === \"(\") return \"var(--aurora-accent-primary)\"\n  return undefined\n}\n\nfunction highlight(code: string): React.ReactNode[] {\n  const tokens: { text: string; type: number }[] = []\n  let match: RegExpExecArray | null\n  TOKEN_RE.lastIndex = 0\n  while ((match = TOKEN_RE.exec(code)) !== null) {\n    if (match[1]) tokens.push({ text: match[1], type: 1 })\n    else if (match[2]) tokens.push({ text: match[2], type: 2 })\n    else if (match[3]) tokens.push({ text: match[3], type: 3 })\n    else if (match[4]) tokens.push({ text: match[4], type: 4 })\n    else if (match[5]) tokens.push({ text: match[5], type: 5 })\n    else tokens.push({ text: match[6] ?? \"\", type: 6 })\n  }\n  const out: React.ReactNode[] = []\n  let key = 0\n  let prevSig = \"\"\n  for (let i = 0; i < tokens.length; i += 1) {\n    const t = tokens[i]\n    if (t.type === 5) {\n      out.push(<React.Fragment key={key++}>{t.text}</React.Fragment>)\n      continue\n    }\n    let color: string | undefined\n    if (t.type === 1) color = \"var(--aurora-text-muted)\"\n    else if (t.type === 2) color = \"var(--aurora-success)\"\n    else if (t.type === 3) color = \"var(--axon-orange)\"\n    else if (t.type === 4) {\n      let j = i + 1\n      while (j < tokens.length && tokens[j].type === 5) j += 1\n      const nextSig = j < tokens.length ? tokens[j].text : \"\"\n      color = tokenColor(t.text, prevSig, nextSig)\n    }\n    if (t.type !== 5) prevSig = t.text.trim() ? t.text : prevSig\n    out.push(\n      <span key={key++} style={color ? { color } : undefined}>\n        {t.text}\n      </span>\n    )\n  }\n  return out\n}\n\nfunction CodeCopyButton({ value }: { value: string }) {\n  const { copied, error, copy } = useClipboard(1200)\n  const handleCopy = React.useCallback(() => void copy(value), [copy, value])\n\n  return (\n    <Button\n      type=\"button\"\n      variant=\"ghost\"\n      size=\"icon\"\n      onClick={handleCopy}\n      aria-label={copied ? \"Copied to clipboard\" : error ? \"Unable to copy code\" : \"Copy code\"}\n      iconLeft={\n        copied ? (\n          <Check size={14} strokeWidth={1.75} aria-hidden data-icon=\"inline-start\" />\n        ) : (\n          <Copy size={14} strokeWidth={1.75} aria-hidden data-icon=\"inline-start\" />\n        )\n      }\n    >\n      <span className=\"sr-only\" aria-live=\"polite\" aria-atomic=\"true\">\n        {copied ? \"Copied\" : error ? \"Unable to copy\" : \"Copy code\"}\n      </span>\n    </Button>\n  )\n}\n\nfunction ResponseCodeBlock({ code, language }: { code: string; language: string }) {\n  return (\n    <div\n      style={{\n        background: \"var(--aurora-panel-strong)\",\n        border: \"1px solid var(--aurora-border-default)\",\n        borderRadius: \"var(--aurora-radius-2)\",\n        boxShadow: \"var(--aurora-shadow-medium), var(--aurora-highlight-medium)\",\n        overflow: \"hidden\",\n        margin: \"10px 0\",\n      }}\n    >\n      <div\n        className=\"flex items-center justify-between gap-3\"\n        style={{\n          padding: \"7px 12px\",\n          borderBottom: \"1px solid var(--aurora-border-default)\",\n          background:\n            \"linear-gradient(180deg, color-mix(in srgb, var(--aurora-panel-strong-top) 70%, transparent), transparent)\",\n        }}\n      >\n        <div className=\"flex items-center gap-2.5\">\n          <CodeXml className=\"size-4\" aria-hidden style={{ color: \"var(--aurora-text-muted)\" }} />\n          <span\n            style={{\n              display: \"inline-flex\",\n              alignItems: \"center\",\n              height: 22,\n              padding: \"0 9px\",\n              borderRadius: 7,\n              fontFamily: \"var(--aurora-font-mono)\",\n              fontSize: 11,\n              fontWeight: 600,\n              letterSpacing: \"0.06em\",\n              textTransform: \"uppercase\",\n              color: \"var(--aurora-accent-pink)\",\n              background: \"var(--aurora-accent-pink-surface)\",\n              border: \"1px solid var(--aurora-accent-pink-border)\",\n            }}\n          >\n            {language}\n          </span>\n        </div>\n        <CodeCopyButton value={code} />\n      </div>\n      <pre\n        className=\"overflow-auto aurora-text-code\"\n        style={{\n          margin: 0,\n          padding: \"12px 14px\",\n          background: \"transparent\",\n          color: \"var(--aurora-text-primary)\",\n          fontSize: 13,\n          lineHeight: 1.6,\n          whiteSpace: \"pre\",\n        }}\n      >\n        <code>{highlight(code)}</code>\n      </pre>\n    </div>\n  )\n}\n\n/* ------------------------------------------------------------------ */\n/* Citation chip (rose, hover/focus preview) — mirrors InlineCitation. */\n/* ------------------------------------------------------------------ */\n\nfunction CitationChip({\n  index,\n  source,\n  onActivate,\n}: {\n  index: number\n  source?: ResponseSource\n  onActivate?: (index: number, source?: ResponseSource) => void\n}) {\n  const [open, setOpen] = React.useState(false)\n  const safeHref = safeHttpUrl(source?.href)\n  const hasPreview = Boolean(source?.title || source?.description || source?.href)\n  const previewId = React.useId()\n  const isLinked = Boolean(safeHref)\n\n  const handleActivate = React.useCallback(\n    (event: React.MouseEvent<HTMLAnchorElement>) => {\n      if (!isLinked) event.preventDefault()\n      onActivate?.(index, source)\n    },\n    [index, isLinked, onActivate, source]\n  )\n\n  const handleKeyDown = React.useCallback(\n    (event: React.KeyboardEvent<HTMLAnchorElement>) => {\n      if (isLinked) return\n      if (event.key !== \"Enter\" && event.key !== \" \") return\n      event.preventDefault()\n      onActivate?.(index, source)\n    },\n    [index, isLinked, onActivate, source]\n  )\n\n  const chip = (\n    <a\n      href={safeHref}\n      target={safeHref ? \"_blank\" : undefined}\n      rel={safeHref ? \"noreferrer noopener\" : undefined}\n      className={cn(\n        \"inline-flex items-center justify-center rounded-[5px] border align-baseline no-underline\",\n        \"border-[color:var(--aurora-citation-border)] bg-[var(--aurora-citation-bg)] transition-colors\",\n        \"hover:border-[color:var(--aurora-citation-border-hover)] hover:bg-[var(--aurora-citation-bg-hover)]\",\n        \"outline-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--aurora-citation-ring)] focus-visible:ring-offset-0\",\n      )}\n      aria-label={\n        source?.title\n          ? `Citation ${index}: ${source.title}`\n          : `Citation ${index}: source unavailable`\n      }\n      aria-describedby={hasPreview && open ? previewId : undefined}\n      role={!isLinked && onActivate ? \"button\" : undefined}\n      tabIndex={!isLinked && onActivate ? 0 : isLinked ? undefined : -1}\n      onMouseEnter={hasPreview ? () => setOpen(true) : undefined}\n      onMouseLeave={hasPreview ? () => setOpen(false) : undefined}\n      onFocus={hasPreview ? () => setOpen(true) : undefined}\n      onBlur={hasPreview ? () => setOpen(false) : undefined}\n      onClick={handleActivate}\n      onKeyDown={handleKeyDown}\n      style={{\n        minWidth: \"1.05rem\",\n        padding: \"1px 6px\",\n        marginLeft: 3,\n        [\"--aurora-citation-bg\" as string]:\n          \"color-mix(in srgb, var(--aurora-accent-pink) 12%, transparent)\",\n        [\"--aurora-citation-bg-hover\" as string]:\n          \"color-mix(in srgb, var(--aurora-accent-pink) 20%, transparent)\",\n        [\"--aurora-citation-border\" as string]:\n          \"color-mix(in srgb, var(--aurora-accent-pink) 32%, transparent)\",\n        [\"--aurora-citation-border-hover\" as string]:\n          \"color-mix(in srgb, var(--aurora-accent-pink) 48%, transparent)\",\n        [\"--aurora-citation-ring\" as string]:\n          \"color-mix(in srgb, var(--aurora-accent-pink) 45%, transparent)\",\n        color: \"var(--aurora-accent-pink)\",\n        fontFamily: \"var(--aurora-font-mono)\",\n        fontSize: 11,\n        fontWeight: 600,\n        lineHeight: 1.45,\n        cursor: isLinked || onActivate ? \"pointer\" : \"default\",\n      }}\n    >\n      {index}\n    </a>\n  )\n\n  if (!hasPreview) return chip\n\n  return (\n    <span className=\"relative inline-block align-baseline\" style={{ lineHeight: 0 }}>\n      {chip}\n      <span\n        id={previewId}\n        role=\"tooltip\"\n        hidden={!open}\n        className=\"absolute left-1/2 z-50 grid gap-1 text-left\"\n        style={{\n          bottom: \"calc(100% + 8px)\",\n          transform: \"translateX(-50%)\",\n          width: \"max-content\",\n          maxWidth: 280,\n          padding: \"10px 12px\",\n          background: \"var(--aurora-surface-raised)\",\n          border: \"1px solid var(--aurora-border-strong)\",\n          borderRadius: \"var(--aurora-radius-1)\",\n          boxShadow: \"var(--aurora-shadow-medium), var(--aurora-highlight-medium)\",\n        }}\n      >\n        {source?.title ? (\n          <span\n            className=\"aurora-text-control\"\n            style={{\n              lineHeight: 1.35,\n              color: \"var(--aurora-text-primary)\",\n            }}\n          >\n            {source.title}\n          </span>\n        ) : null}\n        {source?.description ? (\n          <span\n            className=\"aurora-text-body-sm\"\n            style={{\n              lineHeight: 1.4,\n              color: \"var(--aurora-text-muted)\",\n            }}\n          >\n            {source.description}\n          </span>\n        ) : null}\n        {source?.href ? (\n          <span\n            className=\"aurora-text-meta\"\n            style={{\n              lineHeight: 1.4,\n              color: \"var(--aurora-accent-pink)\",\n              wordBreak: \"break-all\",\n            }}\n          >\n            {source.href}\n          </span>\n        ) : null}\n      </span>\n    </span>\n  )\n}\n\n/* ------------------------------------------------------------------ */\n/* Inline markdown: **bold**, `code`, and [[n]] citation references.   */\n/* ------------------------------------------------------------------ */\n\nconst INLINE_RE = /(\\*\\*[^*]+\\*\\*|`[^`]+`|\\[\\[\\d+\\]\\])/g\n\nfunction renderInline(\n  text: string,\n  keyPrefix: string,\n  sources: ResponseSource[] | undefined,\n  onCitationClick: ((index: number, source?: ResponseSource) => void) | undefined\n): React.ReactNode[] {\n  const parts = text.split(INLINE_RE).filter((p) => p !== \"\")\n  return parts.map((part, i) => {\n    const key = `${keyPrefix}-${i}`\n    if (part.startsWith(\"**\") && part.endsWith(\"**\")) {\n      return (\n        <strong key={key} style={{ fontWeight: 700, color: \"var(--aurora-text-primary)\" }}>\n          {part.slice(2, -2)}\n        </strong>\n      )\n    }\n    if (part.startsWith(\"`\") && part.endsWith(\"`\")) {\n      return (\n        <code\n          key={key}\n          style={{\n            fontFamily: \"var(--aurora-font-mono)\",\n            fontSize: \"0.86em\",\n            padding: \"1px 6px\",\n            borderRadius: 6,\n            color: \"var(--axon-orange)\",\n            background: \"color-mix(in srgb, var(--axon-orange) 12%, transparent)\",\n            border: \"1px solid color-mix(in srgb, var(--axon-orange) 26%, transparent)\",\n          }}\n        >\n          {part.slice(1, -1)}\n        </code>\n      )\n    }\n    const citation = /^\\[\\[(\\d+)\\]\\]$/.exec(part)\n    if (citation) {\n      const index = Number(citation[1])\n      return (\n        <CitationChip\n          key={key}\n          index={index}\n          source={sources?.[index - 1]}\n          onActivate={onCitationClick}\n        />\n      )\n    }\n    return <React.Fragment key={key}>{part}</React.Fragment>\n  })\n}\n\n/* ------------------------------------------------------------------ */\n/* Block parser: paragraphs, fenced code, and bullet lists.            */\n/* ------------------------------------------------------------------ */\n\ntype Block =\n  | { kind: \"code\"; code: string; language: string }\n  | { kind: \"list\"; items: string[] }\n  | { kind: \"paragraph\"; text: string }\n\nfunction parseBlocks(markdown: string): Block[] {\n  const blocks: Block[] = []\n  const lines = markdown.replace(/\\r\\n/g, \"\\n\").split(\"\\n\")\n  let i = 0\n  let paragraph: string[] = []\n  let list: string[] = []\n\n  const flushParagraph = () => {\n    if (paragraph.length) {\n      blocks.push({ kind: \"paragraph\", text: paragraph.join(\"\\n\") })\n      paragraph = []\n    }\n  }\n  const flushList = () => {\n    if (list.length) {\n      blocks.push({ kind: \"list\", items: list })\n      list = []\n    }\n  }\n\n  while (i < lines.length) {\n    const line = lines[i]\n    const fence = /^```(\\w+)?\\s*$/.exec(line)\n    if (fence) {\n      flushParagraph()\n      flushList()\n      const language = fence[1] ?? \"text\"\n      const body: string[] = []\n      i += 1\n      while (i < lines.length && !/^```\\s*$/.test(lines[i])) {\n        body.push(lines[i])\n        i += 1\n      }\n      i += 1 // skip closing fence\n      blocks.push({ kind: \"code\", code: body.join(\"\\n\"), language })\n      continue\n    }\n    const bullet = /^\\s*[-*]\\s+(.*)$/.exec(line)\n    if (bullet) {\n      flushParagraph()\n      list.push(bullet[1])\n      i += 1\n      continue\n    }\n    if (line.trim() === \"\") {\n      flushParagraph()\n      flushList()\n      i += 1\n      continue\n    }\n    flushList()\n    paragraph.push(line)\n    i += 1\n  }\n  flushParagraph()\n  flushList()\n  return blocks\n}\n\n/* ------------------------------------------------------------------ */\n/* Response                                                            */\n/* ------------------------------------------------------------------ */\n\n// Styles: registry/aurora/styles/aurora-components.css (@layer aurora-components).\n\nconst Response = (\n    { ref, markdown, sources, onCitationClick, streaming = false, className, style, ...props }: ResponseProps & { ref?: React.Ref<HTMLDivElement> }\n  ) => {\n    const blocks = React.useMemo(() => parseBlocks(markdown), [markdown])\n    const lastIndex = blocks.length - 1\n    const isEmpty = blocks.length === 0\n\n    return (\n      <div\n        ref={ref}\n        className={cn(\"aurora-text-body\", className)}\n        style={{\n          fontFamily: \"var(--aurora-font-sans)\",\n          fontSize: 14,\n          lineHeight: 1.55,\n          color: \"var(--aurora-text-primary)\",\n          opacity: streaming ? 0.96 : 1,\n          ...style,\n        }}\n        aria-busy={streaming || undefined}\n        aria-live={streaming ? \"polite\" : undefined}\n        {...props}\n      >\n        {isEmpty && streaming ? (\n          <div className=\"flex items-center gap-2 aurora-response-block\">\n            <span\n              aria-hidden\n              style={{\n                width: 7,\n                height: 7,\n                borderRadius: \"50%\",\n                background: \"var(--axon-orange)\",\n                boxShadow:\n                  \"0 0 0 3px color-mix(in srgb, var(--axon-orange) 12%, transparent)\",\n                animation: \"aurora-msg-caret 1.1s steps(1) infinite\",\n              }}\n            />\n            <span className=\"aurora-text-meta\" style={{ color: \"var(--aurora-text-muted)\" }}>\n              Generating response.\n            </span>\n          </div>\n        ) : null}\n        {blocks.map((block, bi) => {\n          const isLast = bi === lastIndex\n          if (block.kind === \"code\") {\n            return (\n              <div className=\"aurora-response-block\" key={`b-${bi}`}>\n                <ResponseCodeBlock code={block.code} language={block.language} />\n              </div>\n            )\n          }\n          if (block.kind === \"list\") {\n            return (\n              <ul\n                className=\"aurora-response-block\"\n                key={`b-${bi}`}\n                style={{\n                  listStyle: \"none\",\n                  margin: \"8px 0\",\n                  padding: 0,\n                  display: \"grid\",\n                  gap: 6,\n                }}\n              >\n                {block.items.map((item, li) => (\n                  <li\n                    key={`b-${bi}-${li}`}\n                    style={{ display: \"flex\", alignItems: \"flex-start\", gap: 10 }}\n                  >\n                    <span\n                      aria-hidden\n                      style={{\n                        marginTop: \"0.62em\",\n                        flex: \"0 0 auto\",\n                        width: 5,\n                        height: 5,\n                        borderRadius: \"50%\",\n                        background: \"var(--aurora-accent-primary)\",\n                      }}\n                    />\n                    <span style={{ flex: 1 }}>\n                      {renderInline(item, `b-${bi}-${li}`, sources, onCitationClick)}\n                      {streaming && isLast && li === block.items.length - 1 ? (\n                        <span className=\"aurora-response-caret\" aria-hidden />\n                      ) : null}\n                    </span>\n                  </li>\n                ))}\n              </ul>\n            )\n          }\n          return (\n            <p\n              className=\"aurora-response-block\"\n              key={`b-${bi}`}\n              style={{ margin: \"7px 0\" }}\n            >\n              {renderInline(block.text, `b-${bi}`, sources, onCitationClick)}\n              {streaming && isLast ? (\n                <span className=\"aurora-response-caret\" aria-hidden />\n              ) : null}\n            </p>\n          )\n        })}\n      </div>\n    )\n  }\nResponse.displayName = \"Response\"\n\nexport { Response }\nexport default Response\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Check, CodeXml, Copy } from \"lucide-react\"\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/registry/aurora/ui/button\"\nimport { useClipboard } from \"@/registry/aurora/lib/use-clipboard\"\nimport { safeHttpUrl } from \"@/registry/aurora/lib/safe-url\"\n\nexport interface ResponseSource {\n  /** Source title shown in the citation hover/focus preview. */\n  title: string\n  /** Source URL — rendered in the preview and used as the chip's link target. */\n  href?: string\n  /** Optional one-line description shown beneath the title in the preview. */\n  description?: string\n}\n\nexport interface ResponseProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Markdown answer body. Supports a focused subset matching the Claude Design\n   * Response element: `**bold**`, inline `` `code` ``, fenced ```code blocks```\n   * (with an optional language on the fence), `- ` bullet lists, and `[[n]]`\n   * citation references that bind to `sources[n - 1]`.\n   */\n  markdown: string\n  /** Ordered citation sources; a `[[n]]` reference maps to `sources[n - 1]`. */\n  sources?: ResponseSource[]\n  /** Fired when a citation chip is activated, with its 1-based index. */\n  onCitationClick?: (index: number, source?: ResponseSource) => void\n  /**\n   * When true the answer renders with a soft trailing fade + caret, signalling\n   * an in-progress stream. When the stream stops, set `streaming={false}`.\n   */\n  streaming?: boolean\n}\n\n/* ------------------------------------------------------------------ */\n/* Code-fence syntax highlighter (mirrors the registry Snippet spec). */\n/* ------------------------------------------------------------------ */\n\nconst KEYWORDS = new Set([\n  \"export\", \"import\", \"from\", \"default\", \"const\", \"let\", \"var\", \"function\",\n  \"async\", \"await\", \"return\", \"if\", \"else\", \"for\", \"while\", \"new\", \"class\",\n  \"extends\", \"typeof\", \"in\", \"of\", \"yield\", \"try\", \"catch\", \"finally\", \"throw\",\n  \"def\", \"lambda\", \"true\", \"false\", \"null\", \"undefined\", \"None\", \"True\",\n  \"False\", \"fn\", \"match\", \"pub\", \"use\", \"mut\", \"impl\", \"self\",\n])\n\nconst TOKEN_RE =\n  /(\\/\\/[^\\n]*|#[^\\n]*)|(\"(?:\\\\.|[^\"\\\\])*\"|'(?:\\\\.|[^'\\\\])*'|`(?:\\\\.|[^`\\\\])*`)|(\\b\\d[\\d_.]*\\b)|([A-Za-z_$][\\w$]*)|(\\s+)|([^\\s\\w$])/g\n\nfunction tokenColor(word: string, prevSig: string, nextSig: string): string | undefined {\n  if (KEYWORDS.has(word)) return \"var(--aurora-accent-pink)\"\n  if (prevSig === \".\" || nextSig === \"(\") return \"var(--aurora-accent-primary)\"\n  return undefined\n}\n\nfunction highlight(code: string): React.ReactNode[] {\n  const tokens: { text: string; type: number }[] = []\n  let match: RegExpExecArray | null\n  TOKEN_RE.lastIndex = 0\n  while ((match = TOKEN_RE.exec(code)) !== null) {\n    if (match[1]) tokens.push({ text: match[1], type: 1 })\n    else if (match[2]) tokens.push({ text: match[2], type: 2 })\n    else if (match[3]) tokens.push({ text: match[3], type: 3 })\n    else if (match[4]) tokens.push({ text: match[4], type: 4 })\n    else if (match[5]) tokens.push({ text: match[5], type: 5 })\n    else tokens.push({ text: match[6] ?? \"\", type: 6 })\n  }\n  const out: React.ReactNode[] = []\n  let key = 0\n  let prevSig = \"\"\n  for (let i = 0; i < tokens.length; i += 1) {\n    const t = tokens[i]\n    if (t.type === 5) {\n      out.push(<React.Fragment key={key++}>{t.text}</React.Fragment>)\n      continue\n    }\n    let color: string | undefined\n    if (t.type === 1) color = \"var(--aurora-text-muted)\"\n    else if (t.type === 2) color = \"var(--aurora-success)\"\n    else if (t.type === 3) color = \"var(--axon-orange)\"\n    else if (t.type === 4) {\n      let j = i + 1\n      while (j < tokens.length && tokens[j].type === 5) j += 1\n      const nextSig = j < tokens.length ? tokens[j].text : \"\"\n      color = tokenColor(t.text, prevSig, nextSig)\n    }\n    if (t.type !== 5) prevSig = t.text.trim() ? t.text : prevSig\n    out.push(\n      <span key={key++} style={color ? { color } : undefined}>\n        {t.text}\n      </span>\n    )\n  }\n  return out\n}\n\nfunction CodeCopyButton({ value }: { value: string }) {\n  const { copied, error, copy } = useClipboard(1200)\n  const handleCopy = React.useCallback(() => void copy(value), [copy, value])\n\n  return (\n    <Button\n      type=\"button\"\n      variant=\"ghost\"\n      size=\"icon\"\n      onClick={handleCopy}\n      aria-label={copied ? \"Copied to clipboard\" : error ? \"Unable to copy code\" : \"Copy code\"}\n      iconLeft={\n        copied ? (\n          <Check size={14} strokeWidth={1.75} aria-hidden data-icon=\"inline-start\" />\n        ) : (\n          <Copy size={14} strokeWidth={1.75} aria-hidden data-icon=\"inline-start\" />\n        )\n      }\n    >\n      <span className=\"sr-only\" aria-live=\"polite\" aria-atomic=\"true\">\n        {copied ? \"Copied\" : error ? \"Unable to copy\" : \"Copy code\"}\n      </span>\n    </Button>\n  )\n}\n\nfunction ResponseCodeBlock({ code, language }: { code: string; language: string }) {\n  return (\n    <div\n      style={{\n        background: \"var(--aurora-panel-strong)\",\n        border: \"1px solid var(--aurora-border-default)\",\n        borderRadius: \"var(--aurora-radius-2)\",\n        boxShadow: \"var(--aurora-shadow-medium), var(--aurora-highlight-medium)\",\n        overflow: \"hidden\",\n        margin: \"10px 0\",\n      }}\n    >\n      <div\n        className=\"flex items-center justify-between gap-3\"\n        style={{\n          padding: \"7px 12px\",\n          borderBottom: \"1px solid var(--aurora-border-default)\",\n          background:\n            \"linear-gradient(180deg, color-mix(in srgb, var(--aurora-panel-strong-top) 70%, transparent), transparent)\",\n        }}\n      >\n        <div className=\"flex items-center gap-2.5\">\n          <CodeXml className=\"size-4\" aria-hidden style={{ color: \"var(--aurora-text-muted)\" }} />\n          <span\n            style={{\n              display: \"inline-flex\",\n              alignItems: \"center\",\n              height: 22,\n              padding: \"0 9px\",\n              borderRadius: 7,\n              fontFamily: \"var(--aurora-font-mono)\",\n              fontSize: 11,\n              fontWeight: 600,\n              letterSpacing: \"0.06em\",\n              textTransform: \"uppercase\",\n              color: \"var(--aurora-accent-pink)\",\n              background: \"var(--aurora-accent-pink-surface)\",\n              border: \"1px solid var(--aurora-accent-pink-border)\",\n            }}\n          >\n            {language}\n          </span>\n        </div>\n        <CodeCopyButton value={code} />\n      </div>\n      <pre\n        className=\"overflow-auto aurora-text-code\"\n        style={{\n          margin: 0,\n          padding: \"12px 14px\",\n          background: \"transparent\",\n          color: \"var(--aurora-text-primary)\",\n          fontSize: 13,\n          lineHeight: 1.6,\n          whiteSpace: \"pre\",\n        }}\n      >\n        <code>{highlight(code)}</code>\n      </pre>\n    </div>\n  )\n}\n\n/* ------------------------------------------------------------------ */\n/* Citation chip (rose, hover/focus preview) — mirrors InlineCitation. */\n/* ------------------------------------------------------------------ */\n\nfunction CitationChip({\n  index,\n  source,\n  onActivate,\n}: {\n  index: number\n  source?: ResponseSource\n  onActivate?: (index: number, source?: ResponseSource) => void\n}) {\n  const [open, setOpen] = React.useState(false)\n  const safeHref = safeHttpUrl(source?.href)\n  const sourceHost = safeHref ? new URL(safeHref).hostname.replace(/^www\\./, \"\") : null\n  const hasPreview = Boolean(source?.title || source?.description || source?.href)\n  const previewId = React.useId()\n  const isLinked = Boolean(safeHref)\n\n  const handleActivate = React.useCallback(\n    (event: React.MouseEvent<HTMLAnchorElement>) => {\n      if (!isLinked) event.preventDefault()\n      onActivate?.(index, source)\n    },\n    [index, isLinked, onActivate, source]\n  )\n\n  const handleKeyDown = React.useCallback(\n    (event: React.KeyboardEvent<HTMLAnchorElement>) => {\n      if (isLinked) return\n      if (event.key !== \"Enter\" && event.key !== \" \") return\n      event.preventDefault()\n      onActivate?.(index, source)\n    },\n    [index, isLinked, onActivate, source]\n  )\n\n  const chip = (\n    <a\n      href={safeHref}\n      target={safeHref ? \"_blank\" : undefined}\n      rel={safeHref ? \"noreferrer noopener\" : undefined}\n      className={cn(\n        \"inline-flex items-center justify-center rounded-[5px] border align-baseline no-underline\",\n        \"border-[color:var(--aurora-citation-border)] bg-[var(--aurora-citation-bg)] transition-colors\",\n        \"hover:border-[color:var(--aurora-citation-border-hover)] hover:bg-[var(--aurora-citation-bg-hover)]\",\n        \"outline-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--aurora-citation-ring)] focus-visible:ring-offset-0\",\n      )}\n      aria-label={\n        source?.title\n          ? `Citation ${index}: ${source.title}`\n          : `Citation ${index}: source unavailable`\n      }\n      aria-describedby={hasPreview && open ? previewId : undefined}\n      role={!isLinked && onActivate ? \"button\" : undefined}\n      tabIndex={!isLinked && onActivate ? 0 : isLinked ? undefined : -1}\n      onMouseEnter={hasPreview ? () => setOpen(true) : undefined}\n      onMouseLeave={hasPreview ? () => setOpen(false) : undefined}\n      onFocus={hasPreview ? () => setOpen(true) : undefined}\n      onBlur={hasPreview ? () => setOpen(false) : undefined}\n      onClick={handleActivate}\n      onKeyDown={handleKeyDown}\n      style={{\n        minWidth: \"1.05rem\",\n        padding: \"1px 6px\",\n        marginLeft: 3,\n        [\"--aurora-citation-bg\" as string]:\n          \"color-mix(in srgb, var(--aurora-accent-pink) 12%, transparent)\",\n        [\"--aurora-citation-bg-hover\" as string]:\n          \"color-mix(in srgb, var(--aurora-accent-pink) 20%, transparent)\",\n        [\"--aurora-citation-border\" as string]:\n          \"color-mix(in srgb, var(--aurora-accent-pink) 32%, transparent)\",\n        [\"--aurora-citation-border-hover\" as string]:\n          \"color-mix(in srgb, var(--aurora-accent-pink) 48%, transparent)\",\n        [\"--aurora-citation-ring\" as string]:\n          \"color-mix(in srgb, var(--aurora-accent-pink) 45%, transparent)\",\n        color: \"var(--aurora-accent-pink)\",\n        fontFamily: \"var(--aurora-font-mono)\",\n        fontSize: 11,\n        fontWeight: 600,\n        lineHeight: 1.45,\n        cursor: isLinked || onActivate ? \"pointer\" : \"default\",\n      }}\n    >\n      {index}\n    </a>\n  )\n\n  if (!hasPreview) return chip\n\n  return (\n    <span className=\"relative inline-block align-baseline\" style={{ lineHeight: 0 }}>\n      {chip}\n      <span\n        id={previewId}\n        role=\"tooltip\"\n        hidden={!open}\n        className=\"absolute left-1/2 z-50 grid gap-1 text-left\"\n        style={{\n          bottom: \"calc(100% + 8px)\",\n          transform: \"translateX(-50%)\",\n          width: \"max-content\",\n          maxWidth: 280,\n          padding: \"10px 12px\",\n          background: \"var(--aurora-surface-raised)\",\n          border: \"1px solid var(--aurora-border-strong)\",\n          borderRadius: \"var(--aurora-radius-1)\",\n          boxShadow: \"var(--aurora-shadow-medium), var(--aurora-highlight-medium)\",\n        }}\n      >\n        {source?.title ? (\n          <span\n            className=\"aurora-text-control\"\n            style={{\n              lineHeight: 1.35,\n              color: \"var(--aurora-text-primary)\",\n            }}\n          >\n            {source.title}\n          </span>\n        ) : null}\n        {source?.description ? (\n          <span\n            className=\"aurora-text-body-sm\"\n            style={{\n              lineHeight: 1.4,\n              color: \"var(--aurora-text-muted)\",\n            }}\n          >\n            {source.description}\n          </span>\n        ) : null}\n        {sourceHost ? (\n          <span className=\"aurora-text-meta inline-flex items-center gap-1\" style={{ lineHeight: 1.4, color: \"var(--aurora-accent-pink)\" }}>\n            <span>{sourceHost}</span><span aria-hidden=\"true\">↗</span>\n          </span>\n        ) : null}\n      </span>\n    </span>\n  )\n}\n\n/* ------------------------------------------------------------------ */\n/* Inline markdown: **bold**, `code`, and [[n]] citation references.   */\n/* ------------------------------------------------------------------ */\n\nconst INLINE_RE = /(\\*\\*[^*]+\\*\\*|`[^`]+`|\\[\\[\\d+\\]\\])/g\n\nfunction renderInline(\n  text: string,\n  keyPrefix: string,\n  sources: ResponseSource[] | undefined,\n  onCitationClick: ((index: number, source?: ResponseSource) => void) | undefined\n): React.ReactNode[] {\n  const parts = text.split(INLINE_RE).filter((p) => p !== \"\")\n  return parts.map((part, i) => {\n    const key = `${keyPrefix}-${i}`\n    if (part.startsWith(\"**\") && part.endsWith(\"**\")) {\n      return (\n        <strong key={key} style={{ fontWeight: 700, color: \"var(--aurora-text-primary)\" }}>\n          {part.slice(2, -2)}\n        </strong>\n      )\n    }\n    if (part.startsWith(\"`\") && part.endsWith(\"`\")) {\n      return (\n        <code\n          key={key}\n          style={{\n            fontFamily: \"var(--aurora-font-mono)\",\n            fontSize: \"0.86em\",\n            padding: \"1px 6px\",\n            borderRadius: 6,\n            color: \"var(--axon-orange)\",\n            background: \"color-mix(in srgb, var(--axon-orange) 12%, transparent)\",\n            border: \"1px solid color-mix(in srgb, var(--axon-orange) 26%, transparent)\",\n          }}\n        >\n          {part.slice(1, -1)}\n        </code>\n      )\n    }\n    const citation = /^\\[\\[(\\d+)\\]\\]$/.exec(part)\n    if (citation) {\n      const index = Number(citation[1])\n      return (\n        <CitationChip\n          key={key}\n          index={index}\n          source={sources?.[index - 1]}\n          onActivate={onCitationClick}\n        />\n      )\n    }\n    return <React.Fragment key={key}>{part}</React.Fragment>\n  })\n}\n\n/* ------------------------------------------------------------------ */\n/* Block parser: paragraphs, fenced code, and bullet lists.            */\n/* ------------------------------------------------------------------ */\n\ntype Block =\n  | { kind: \"code\"; code: string; language: string }\n  | { kind: \"list\"; items: string[] }\n  | { kind: \"paragraph\"; text: string }\n\nfunction parseBlocks(markdown: string): Block[] {\n  const blocks: Block[] = []\n  const lines = markdown.replace(/\\r\\n/g, \"\\n\").split(\"\\n\")\n  let i = 0\n  let paragraph: string[] = []\n  let list: string[] = []\n\n  const flushParagraph = () => {\n    if (paragraph.length) {\n      blocks.push({ kind: \"paragraph\", text: paragraph.join(\"\\n\") })\n      paragraph = []\n    }\n  }\n  const flushList = () => {\n    if (list.length) {\n      blocks.push({ kind: \"list\", items: list })\n      list = []\n    }\n  }\n\n  while (i < lines.length) {\n    const line = lines[i]\n    const fence = /^```(\\w+)?\\s*$/.exec(line)\n    if (fence) {\n      flushParagraph()\n      flushList()\n      const language = fence[1] ?? \"text\"\n      const body: string[] = []\n      i += 1\n      while (i < lines.length && !/^```\\s*$/.test(lines[i])) {\n        body.push(lines[i])\n        i += 1\n      }\n      i += 1 // skip closing fence\n      blocks.push({ kind: \"code\", code: body.join(\"\\n\"), language })\n      continue\n    }\n    const bullet = /^\\s*[-*]\\s+(.*)$/.exec(line)\n    if (bullet) {\n      flushParagraph()\n      list.push(bullet[1])\n      i += 1\n      continue\n    }\n    if (line.trim() === \"\") {\n      flushParagraph()\n      flushList()\n      i += 1\n      continue\n    }\n    flushList()\n    paragraph.push(line)\n    i += 1\n  }\n  flushParagraph()\n  flushList()\n  return blocks\n}\n\n/* ------------------------------------------------------------------ */\n/* Response                                                            */\n/* ------------------------------------------------------------------ */\n\n// Styles: registry/aurora/styles/aurora-components.css (@layer aurora-components).\n\nconst Response = (\n    { ref, markdown, sources, onCitationClick, streaming = false, className, style, ...props }: ResponseProps & { ref?: React.Ref<HTMLDivElement> }\n  ) => {\n    const blocks = React.useMemo(() => parseBlocks(markdown), [markdown])\n    const lastIndex = blocks.length - 1\n    const isEmpty = blocks.length === 0\n\n    return (\n      <div\n        ref={ref}\n        className={cn(\"aurora-text-body\", className)}\n        style={{\n          fontFamily: \"var(--aurora-font-sans)\",\n          fontSize: 14,\n          lineHeight: 1.55,\n          color: \"var(--aurora-text-primary)\",\n          opacity: streaming ? 0.96 : 1,\n          ...style,\n        }}\n        aria-busy={streaming || undefined}\n        aria-live={streaming ? \"polite\" : undefined}\n        {...props}\n      >\n        {isEmpty && streaming ? (\n          <div className=\"flex items-center gap-2 aurora-response-block\">\n            <span\n              aria-hidden\n              style={{\n                width: 7,\n                height: 7,\n                borderRadius: \"50%\",\n                background: \"var(--axon-orange)\",\n                boxShadow:\n                  \"0 0 0 3px color-mix(in srgb, var(--axon-orange) 12%, transparent)\",\n                animation: \"aurora-msg-caret 1.1s steps(1) infinite\",\n              }}\n            />\n            <span className=\"aurora-text-meta\" style={{ color: \"var(--aurora-text-muted)\" }}>\n              Generating response.\n            </span>\n          </div>\n        ) : null}\n        {blocks.map((block, bi) => {\n          const isLast = bi === lastIndex\n          if (block.kind === \"code\") {\n            return (\n              <div className=\"aurora-response-block\" key={`b-${bi}`}>\n                <ResponseCodeBlock code={block.code} language={block.language} />\n              </div>\n            )\n          }\n          if (block.kind === \"list\") {\n            return (\n              <ul\n                className=\"aurora-response-block\"\n                key={`b-${bi}`}\n                style={{\n                  listStyle: \"none\",\n                  margin: \"8px 0\",\n                  padding: 0,\n                  display: \"grid\",\n                  gap: 6,\n                }}\n              >\n                {block.items.map((item, li) => (\n                  <li\n                    key={`b-${bi}-${li}`}\n                    style={{ display: \"flex\", alignItems: \"flex-start\", gap: 10 }}\n                  >\n                    <span\n                      aria-hidden\n                      style={{\n                        marginTop: \"0.62em\",\n                        flex: \"0 0 auto\",\n                        width: 5,\n                        height: 5,\n                        borderRadius: \"50%\",\n                        background: \"var(--aurora-accent-primary)\",\n                      }}\n                    />\n                    <span style={{ flex: 1 }}>\n                      {renderInline(item, `b-${bi}-${li}`, sources, onCitationClick)}\n                      {streaming && isLast && li === block.items.length - 1 ? (\n                        <span className=\"aurora-response-caret\" aria-hidden />\n                      ) : null}\n                    </span>\n                  </li>\n                ))}\n              </ul>\n            )\n          }\n          return (\n            <p\n              className=\"aurora-response-block\"\n              key={`b-${bi}`}\n              style={{ margin: \"7px 0\" }}\n            >\n              {renderInline(block.text, `b-${bi}`, sources, onCitationClick)}\n              {streaming && isLast ? (\n                <span className=\"aurora-response-caret\" aria-hidden />\n              ) : null}\n            </p>\n          )\n        })}\n      </div>\n    )\n  }\nResponse.displayName = \"Response\"\n\nexport { Response }\nexport default Response\n",
       "type": "registry:component",
       "target": "@components/aurora/ai/response.tsx"
     }
diff --git a/public/r/aurora-chat-block.json b/public/r/aurora-chat-block.json
index 192f8434..469034ec 100644
--- a/public/r/aurora-chat-block.json
+++ b/public/r/aurora-chat-block.json
@@ -3,7 +3,7 @@
   "name": "aurora-chat-block",
   "title": "Aurora Interactive Chat",
   "author": "jmagar <https://github.com/jmagar>",
-  "description": "Interactive Aurora chat workspace combining the new conversation primitives with steerable streaming, editable user turns, hover actions, code and source surfaces, model/reasoning selection, slash-command skills, file mentions, and an in-field composer.",
+  "description": "Interactive Aurora chat workspace combining composable conversation primitives with steerable streaming, markdown and citation-rich assistant responses, editable user turns, code/source surfaces, attachment previews, empty/error states, model/reasoning selection, slash-command skills, file mentions, and an in-field composer.",
   "dependencies": [
     "lucide-react@^1.24.0"
   ],
@@ -19,15 +19,18 @@
     "@aurora/aurora-bubble",
     "@aurora/aurora-chat-attachment",
     "@aurora/aurora-marker",
+    "@aurora/aurora-callout",
+    "@aurora/aurora-empty-state",
     "@aurora/aurora-code-block",
     "@aurora/aurora-ai-snippet",
     "@aurora/aurora-ai-sources",
-    "@aurora/aurora-ai-reasoning"
+    "@aurora/aurora-ai-reasoning",
+    "@aurora/aurora-ai-response"
   ],
   "files": [
     {
       "path": "registry/aurora/blocks/ai/chat/chat.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Bot, Brain, Check, CheckCheck, Command, Copy, Cpu, FileCode2, FileText, Paperclip, Pencil, RefreshCw, RotateCcw, Send, Sparkles, Square, ThumbsUp, X } from \"lucide-react\"\n\nimport { Reasoning } from \"@/registry/aurora/blocks/ai/elements/reasoning\"\nimport { Snippet } from \"@/registry/aurora/blocks/ai/elements/snippet\"\nimport { Source, Sources } from \"@/registry/aurora/blocks/ai/elements/sources\"\nimport { CodeBlock } from \"@/registry/aurora/blocks/workspace/code-block/code-block\"\nimport { Attachment, AttachmentAction, AttachmentActions, AttachmentContent, AttachmentDescription, AttachmentGroup, AttachmentMedia, AttachmentTitle, AttachmentTrigger, type AttachmentState } from \"@/registry/aurora/ui/attachment\"\nimport { Bubble, BubbleContent, BubbleGroup } from \"@/registry/aurora/ui/bubble\"\nimport { Button } from \"@/registry/aurora/ui/button\"\nimport { Marker, MarkerContent, MarkerIcon } from \"@/registry/aurora/ui/marker\"\nimport { Message, MessageAvatar, MessageContent, MessageFooter, MessageGroup, MessageHeader } from \"@/registry/aurora/ui/message\"\nimport { MessageScroller, MessageScrollerButton, MessageScrollerContent, MessageScrollerItem, MessageScrollerProvider, MessageScrollerViewport } from \"@/registry/aurora/ui/message-scroller\"\nimport { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectTrigger, SelectValue } from \"@/registry/aurora/ui/select\"\nimport { Spinner } from \"@/registry/aurora/ui/spinner\"\nimport { Textarea } from \"@/registry/aurora/ui/textarea\"\n\ntype DemoAttachment = { id: string; title: string; description: string; state: AttachmentState }\ntype ShowcaseKind = \"code\" | \"sources\" | \"reasoning\"\ntype DemoMessage = { kind: \"message\"; id: string; role: \"assistant\" | \"user\"; text: string; time: string; streaming?: boolean; scrollAnchor?: boolean; attachments?: DemoAttachment[]; showcase?: ShowcaseKind }\ntype DemoMarker = { kind: \"marker\"; id: string; label: string; variant?: \"default\" | \"separator\" | \"border\"; status?: \"thinking\" | \"ready\" | \"synced\" }\ntype DemoThreadItem = DemoMessage | DemoMarker\ntype Suggestion = { id: string; label: string; description: string; kind: \"skill\" | \"file\" }\n\nconst DEMO_SNIPPET = [\n  \"const { isAtEnd, scrollToEnd } = useMessageScroller()\",\n  \"if (!isAtEnd) scrollToEnd({ behavior: \\\"smooth\\\" })\",\n].join(\"\\n\")\n\nconst DEMO_CODE = [\n  \"function steerConversation(input: string) {\",\n  \"  stopActiveStream()\",\n  \"  appendUserTurn(input)\",\n  \"  beginAssistantStream({ reason: \\\"steer\\\" })\",\n  \"}\",\n].join(\"\\n\")\n\nconst SLASH_COMMANDS: Suggestion[] = [\n  { id: \"review\", label: \"/review\", description: \"Run the review skill\", kind: \"skill\" },\n  { id: \"docs\", label: \"/docs\", description: \"Run the documentation sweep skill\", kind: \"skill\" },\n  { id: \"test\", label: \"/test\", description: \"Run validation and smoke tests\", kind: \"skill\" },\n  { id: \"plan\", label: \"/plan\", description: \"Create an implementation plan\", kind: \"skill\" },\n]\n\nconst FILE_MENTIONS: Suggestion[] = [\n  { id: \"chat\", label: \"chat.tsx\", description: \"Interactive chat block\", kind: \"file\" },\n  { id: \"scroller\", label: \"message-scroller.tsx\", description: \"Viewport and streaming behavior\", kind: \"file\" },\n  { id: \"registry\", label: \"registry.json\", description: \"Aurora registry manifest\", kind: \"file\" },\n  { id: \"readme\", label: \"README.md\", description: \"Aurora package guide\", kind: \"file\" },\n]\n\nconst MODELS = [\"GPT-5.6\", \"Claude Sonnet 4.6\", \"Gemini 2.5 Pro\"]\nconst REASONING_LEVELS = [\"Auto\", \"Fast\", \"Balanced\", \"Deep\"]\n\nconst INITIAL_ITEMS: DemoThreadItem[] = [\n  { kind: \"marker\", id: \"marker-today\", label: \"Today\", variant: \"separator\" },\n  { kind: \"message\", id: \"assistant-welcome\", role: \"assistant\", time: \"9:31 PM\", text: \"The new conversation layer composes cleanly with Aurora's existing developer surfaces. Here's the lightweight snippet and the full steering helper.\", showcase: \"code\", attachments: [{ id: \"attachment-spec\", title: \"chat-primitives.md\", description: \"5 primitives · Aurora registry\", state: \"done\" }] },\n  { kind: \"message\", id: \"user-compose\", role: \"user\", time: \"9:33 PM\", text: \"Show me the references too, and keep assistant replies out of bubbles.\" },\n  { kind: \"marker\", id: \"marker-context\", label: \"Conversation context synchronized\", variant: \"border\", status: \"synced\" },\n  { kind: \"message\", id: \"assistant-compose\", role: \"assistant\", time: \"9:34 PM\", text: \"Assistant content is now plain conversational prose. Sources stay attached to the turn as compact references instead of becoming another oversized card stack.\", showcase: \"sources\" },\n  { kind: \"message\", id: \"user-streaming\", role: \"user\", time: \"9:36 PM\", text: \"Nice. Can I steer while you're still replying?\" },\n  { kind: \"message\", id: \"assistant-streaming\", role: \"assistant\", time: \"9:37 PM\", text: \"Yes. Keep typing while I stream. If the composer has text, Send steers the conversation. If it is empty, that same control becomes Stop.\", showcase: \"reasoning\" },\n  { kind: \"marker\", id: \"marker-live\", label: \"Interactive demo\", variant: \"separator\", status: \"ready\" },\n]\n\nconst MOCK_REPLY = \"Exactly. This response is streaming through the Aurora mock while MessageScroller watches whether you are pinned to the end. Type a steering message while this is still arriving and send it without waiting for the current response to finish.\"\nconst STEER_REPLY = \"Steering applied. I stopped the previous stream, preserved the partial response in the thread, and started a new response using your latest direction without locking the composer.\"\nconst RETRY_REPLY = \"Retried locally. The assistant response streams again with the same plain-message layout, compact actions, code surfaces, sources, and composer controls.\"\n\nfunction nextId(prefix: string) { return `${prefix}-${crypto.randomUUID()}` }\nfunction currentTime() { return new Intl.DateTimeFormat(undefined, { hour: \"numeric\", minute: \"2-digit\" }).format(new Date()) }\n\nfunction AttachmentCard({ attachment, onOpen, onRemove, compact = false }: { attachment: DemoAttachment; onOpen: (attachment: DemoAttachment) => void; onRemove?: (attachment: DemoAttachment) => void; compact?: boolean }) {\n  const pending = attachment.state === \"uploading\" || attachment.state === \"processing\"\n  const description = attachment.state === \"uploading\" ? \"Uploading mock file\" : attachment.state === \"processing\" ? \"Preparing attachment\" : attachment.description\n  return (\n    <Attachment state={attachment.state} size={compact ? \"xs\" : \"sm\"} className={compact ? \"max-w-[210px] flex-nowrap\" : undefined}>\n      <AttachmentMedia className={[\"relative\", compact ? \"[&>svg]:!size-3.5\" : undefined].filter(Boolean).join(\" \")}>\n        {pending ? <Spinner size=\"sm\" tone=\"cyan\" /> : <FileText aria-hidden=\"true\" />}\n        {attachment.state === \"done\" ? <span className=\"aurora-chat-attachment__state-badge\" aria-hidden=\"true\"><Check /></span> : null}\n      </AttachmentMedia>\n      <AttachmentContent><AttachmentTitle>{attachment.title}</AttachmentTitle>{compact ? null : <AttachmentDescription>{description}</AttachmentDescription>}</AttachmentContent>\n      {onRemove ? <AttachmentActions><AttachmentAction type=\"button\" className={compact ? \"!size-5 rounded-[5px] [&_svg]:!size-3.5\" : undefined} aria-label={\"Remove \" + attachment.title} onClick={() => onRemove(attachment)}><X data-icon=\"inline-start\" aria-hidden=\"true\" /></AttachmentAction></AttachmentActions> : null}\n      <AttachmentTrigger aria-label={\"Preview \" + attachment.title} onClick={() => onOpen(attachment)} />\n    </Attachment>\n  )\n}\n\nfunction ThreadMarker({ item }: { item: DemoMarker }) {\n  const Icon = item.status === \"synced\" ? CheckCheck : item.status === \"ready\" ? Check : Sparkles\n  return <Marker variant={item.variant} role={item.status === \"thinking\" ? \"status\" : undefined} className={item.status === \"thinking\" ? \"my-0.5\" : \"my-0.5 opacity-75\"}>{item.status ? <MarkerIcon>{item.status === \"thinking\" ? <Spinner size=\"sm\" tone=\"rose\" /> : <Icon aria-hidden=\"true\" />}</MarkerIcon> : null}<MarkerContent>{item.label}</MarkerContent></Marker>\n}\n\nfunction AssistantShowcase({ kind, reasoning }: { kind?: ShowcaseKind; reasoning: string }) {\n  if (kind === \"code\") {\n    return (\n      <div className=\"grid max-w-[640px] gap-2 pt-1 lg:grid-cols-[minmax(0,0.9fr)_minmax(0,1.1fr)] lg:items-start\">\n        <Snippet density=\"compact\" language=\"tsx\" code={DEMO_SNIPPET} />\n        <CodeBlock density=\"compact\" language=\"typescript\" filename=\"steering.ts\" code={DEMO_CODE} />\n      </div>\n    )\n  }\n  if (kind === \"sources\") {\n    return (\n      <Sources density=\"compact\" title=\"Sources & references\" collapsible defaultOpen className=\"max-w-[640px]\">\n        <Source density=\"compact\" index={1} source={{ title: \"shadcn chat components\", href: \"https://ui.shadcn.com/docs/changelog/2026-06-chat-components\", badge: \"DOCS\" }} />\n        <Source density=\"compact\" index={2} source={{ title: \"message-scroller.tsx\", badge: \"FILE\" }} />\n      </Sources>\n    )\n  }\n  if (kind === \"reasoning\") {\n    return (\n      <div className=\"max-w-[520px] pt-0.5\">\n        <Reasoning density=\"compact\" duration={2} content={`Used ${reasoning.toLowerCase()} reasoning to preserve viewport state, keep the composer unlocked, and choose the least disruptive steering path.`} />\n      </div>\n    )\n  }\n  return null\n}\n\nfunction SuggestionPopup({ label, items, activeIndex, onSelect }: { label: string; items: Suggestion[]; activeIndex: number; onSelect: (item: Suggestion) => void }) {\n  if (items.length === 0) return null\n  const heading = label.startsWith(\"Skills\") ? \"Skills\" : \"Files\"\n  return (\n    <div className=\"absolute bottom-[calc(100%+7px)] left-2 z-40 w-[min(310px,92%)] overflow-hidden rounded-[12px] border p-1.5\" style={{ borderColor: \"color-mix(in srgb, var(--aurora-border-strong) 88%, transparent)\", background: \"color-mix(in srgb, var(--aurora-surface-raised) 96%, transparent)\", boxShadow: \"var(--aurora-shadow-strong), var(--aurora-highlight-strong)\", backdropFilter: \"blur(14px)\" }}>\n      <div className=\"flex items-center justify-between gap-2 px-1.5 pb-1 pt-0.5\" style={{ color: \"var(--aurora-text-muted)\", fontSize: \"10px\", fontWeight: \"var(--aurora-weight-ui)\", letterSpacing: \"0.04em\", textTransform: \"uppercase\" }}>\n        <span>{heading}</span><span aria-hidden=\"true\" className=\"normal-case tracking-normal\">↑↓ · Enter</span>\n      </div>\n      <div role=\"listbox\" aria-label={label}>\n      {items.map((item, index) => (\n        <Button key={item.id} type=\"button\" variant=\"plain\" size=\"unstyled\" role=\"option\" aria-selected={index === activeIndex} className=\"flex w-full items-center gap-2 rounded-[8px] px-2 py-1.5 text-left transition-colors data-[selected=true]:bg-[var(--aurora-selected-bg)]\" data-selected={index === activeIndex ? \"true\" : \"false\"} onMouseDown={(event) => event.preventDefault()} onClick={() => onSelect(item)}>\n          {item.kind === \"skill\" ? <Command className=\"size-3.5 shrink-0\" aria-hidden style={{ color: \"var(--axon-orange)\" }} /> : <FileCode2 className=\"size-3.5 shrink-0\" aria-hidden style={{ color: \"var(--aurora-accent-primary)\" }} />}\n          <span className=\"min-w-0 flex-1\">\n            <span className=\"block truncate\" style={{ color: \"var(--aurora-text-primary)\", fontSize: \"var(--aurora-type-label)\", fontWeight: \"var(--aurora-weight-ui)\" }}>{item.label}</span>\n            <span className=\"block truncate\" style={{ color: \"var(--aurora-text-muted)\", fontSize: \"var(--aurora-type-caption)\" }}>{item.description}</span>\n          </span>\n          <span className=\"rounded-full border px-1.5 py-0.5\" style={{ borderColor: \"var(--aurora-border-default)\", color: \"var(--aurora-text-muted)\", fontSize: \"9px\", lineHeight: 1, textTransform: \"uppercase\" }}>{item.kind}</span>\n        </Button>\n      ))}\n      </div>\n    </div>\n  )\n}\n\nfunction CompactSelect({ label, value, options, onValueChange, icon }: { label: string; value: string; options: string[]; onValueChange: (value: string) => void; icon: React.ReactNode }) {\n  const tone = label === \"Model\" ? \"model\" : \"reasoning\"\n  return (\n    <Select value={value} onValueChange={onValueChange}>\n      <SelectTrigger aria-label={label} title={`${label}: ${value}`} data-chat-select={tone} className=\"aurora-chat-select !h-6 !w-auto min-w-0 max-w-[44%] flex-1 gap-1 rounded-full !px-1.5 !py-0 sm:min-w-[94px] sm:max-w-none sm:flex-none sm:!px-2 [&>svg]:!size-3\">\n        <span className=\"flex min-w-0 items-center gap-1 overflow-hidden sm:gap-1.5\">{icon}<SelectValue className=\"truncate\" /></span>\n      </SelectTrigger>\n      <SelectContent className=\"min-w-[160px]\">\n        <SelectGroup>\n          <SelectLabel className=\"!px-2 !py-1 text-[9px] uppercase tracking-[0.08em]\">{label}</SelectLabel>\n          {options.map((option) => <SelectItem key={option} value={option} className=\"!py-1 text-[11px]\">{option}</SelectItem>)}\n        </SelectGroup>\n      </SelectContent>\n    </Select>\n  )\n}\n\nexport interface AuroraChatBlockProps { title?: string; subtitle?: string; className?: string }\n\nfunction AuroraChatBlock({ title = \"Aurora Chat\", subtitle = \"Composable conversation primitives\", className }: AuroraChatBlockProps) {\n  const [items, setItems] = React.useState<DemoThreadItem[]>(INITIAL_ITEMS)\n  const [value, setValue] = React.useState(\"\")\n  const [composerAttachment, setComposerAttachment] = React.useState<DemoAttachment | null>(null)\n  const [previewAttachment, setPreviewAttachment] = React.useState<DemoAttachment | null>(null)\n  const [copiedId, setCopiedId] = React.useState<string | null>(null)\n  const [likedIds, setLikedIds] = React.useState<Set<string>>(() => new Set())\n  const [editingMessageId, setEditingMessageId] = React.useState<string | null>(null)\n  const [isResponding, setIsResponding] = React.useState(false)\n  const [activeAssistantId, setActiveAssistantId] = React.useState<string | null>(null)\n  const [model, setModel] = React.useState(MODELS[0])\n  const [reasoning, setReasoning] = React.useState(REASONING_LEVELS[0])\n  const [slashOpen, setSlashOpen] = React.useState(false)\n  const [slashQuery, setSlashQuery] = React.useState(\"\")\n  const [slashIndex, setSlashIndex] = React.useState(0)\n  const [mentionOpen, setMentionOpen] = React.useState(false)\n  const [mentionQuery, setMentionQuery] = React.useState(\"\")\n  const [mentionIndex, setMentionIndex] = React.useState(0)\n  const textareaRef = React.useRef<HTMLTextAreaElement | null>(null)\n  const streamTimerRef = React.useRef<number | null>(null)\n  const responseTimerRef = React.useRef<number | null>(null)\n  const timeoutRefs = React.useRef<Set<number>>(new Set())\n\n  const filteredSlash = React.useMemo(() => SLASH_COMMANDS.filter((item) => item.label.toLowerCase().includes(slashQuery.toLowerCase())), [slashQuery])\n  const filteredMentions = React.useMemo(() => FILE_MENTIONS.filter((item) => item.label.toLowerCase().includes(mentionQuery.toLowerCase())), [mentionQuery])\n  const slashActiveIndex = Math.min(slashIndex, Math.max(filteredSlash.length - 1, 0))\n  const mentionActiveIndex = Math.min(mentionIndex, Math.max(filteredMentions.length - 1, 0))\n\n  const clearTimers = React.useCallback(() => {\n    if (streamTimerRef.current != null) { window.clearInterval(streamTimerRef.current); streamTimerRef.current = null }\n    if (responseTimerRef.current != null) { window.clearTimeout(responseTimerRef.current); responseTimerRef.current = null }\n    timeoutRefs.current.forEach((timer) => window.clearTimeout(timer)); timeoutRefs.current.clear()\n  }, [])\n\n  const schedule = React.useCallback((callback: () => void, delay: number) => {\n    const timer = window.setTimeout(() => { timeoutRefs.current.delete(timer); callback() }, delay)\n    timeoutRefs.current.add(timer)\n    return timer\n  }, [])\n\n  React.useEffect(() => clearTimers, [clearTimers])\n\n  const stopResponse = React.useCallback(() => {\n    if (streamTimerRef.current != null) { window.clearInterval(streamTimerRef.current); streamTimerRef.current = null }\n    if (responseTimerRef.current != null) { window.clearTimeout(responseTimerRef.current); responseTimerRef.current = null }\n    setItems((current) => current.filter((item) => item.kind !== \"marker\" || item.status !== \"thinking\").map((item) => item.kind === \"message\" && item.streaming ? { ...item, streaming: false } : item))\n    setIsResponding(false)\n    setActiveAssistantId(null)\n  }, [])\n\n  const streamIntoMessage = React.useCallback((messageId: string, fullText: string) => {\n    if (streamTimerRef.current != null) window.clearInterval(streamTimerRef.current)\n    const words = fullText.split(\" \")\n    let cursor = 0\n    setIsResponding(true)\n    setActiveAssistantId(messageId)\n    setItems((current) => current.map((item) => item.kind === \"message\" && item.id === messageId ? { ...item, text: \"\", streaming: true } : item))\n    streamTimerRef.current = window.setInterval(() => {\n      cursor = Math.min(words.length, cursor + 2)\n      const done = cursor >= words.length\n      const text = words.slice(0, cursor).join(\" \")\n      setItems((current) => current.map((item) => item.kind === \"message\" && item.id === messageId ? { ...item, text, streaming: !done } : item))\n      if (done && streamTimerRef.current != null) {\n        window.clearInterval(streamTimerRef.current)\n        streamTimerRef.current = null\n        setIsResponding(false)\n        setActiveAssistantId(null)\n      }\n    }, 54)\n  }, [])\n\n  const queueMockReply = React.useCallback((thinkingMarkerId: string, replyText = MOCK_REPLY) => {\n    if (responseTimerRef.current != null) window.clearTimeout(responseTimerRef.current)\n    setIsResponding(true)\n    responseTimerRef.current = window.setTimeout(() => {\n      responseTimerRef.current = null\n      const assistantId = nextId(\"assistant\")\n      setItems((current) => [...current.filter((item) => item.id !== thinkingMarkerId), { kind: \"message\", id: assistantId, role: \"assistant\", time: currentTime(), text: \"\", streaming: true }])\n      streamIntoMessage(assistantId, replyText)\n    }, 420)\n  }, [streamIntoMessage])\n\n  const addMockAttachment = React.useCallback(() => {\n    if (composerAttachment) return\n    const attachment: DemoAttachment = { id: nextId(\"upload\"), title: \"gateway-health.json\", description: \"12 KB · JSON\", state: \"uploading\" }\n    setComposerAttachment(attachment)\n    schedule(() => setComposerAttachment((current) => current?.id === attachment.id ? { ...current, state: \"processing\" } : current), 650)\n    schedule(() => setComposerAttachment((current) => current?.id === attachment.id ? { ...current, state: \"done\" } : current), 1250)\n  }, [composerAttachment, schedule])\n\n  const insertSlashCommand = React.useCallback((item: Suggestion) => {\n    setValue((current) => current.replace(/(?:^|\\s)\\/[\\w-]*$/, (match) => match.replace(/\\/[\\w-]*$/, item.label + \" \")))\n    setSlashOpen(false)\n    window.requestAnimationFrame(() => textareaRef.current?.focus())\n  }, [])\n\n  const insertMention = React.useCallback((item: Suggestion) => {\n    setValue((current) => current.replace(/@[\\w./-]*$/, \"@\" + item.label + \" \"))\n    setMentionOpen(false)\n    window.requestAnimationFrame(() => textareaRef.current?.focus())\n  }, [])\n\n  const handleComposerChange = React.useCallback((event: React.ChangeEvent<HTMLTextAreaElement>) => {\n    const next = event.target.value\n    setValue(next)\n    const slashMatch = next.match(/(?:^|\\s)\\/([\\w-]*)$/)\n    if (slashMatch) {\n      setSlashQuery(slashMatch[1])\n      setSlashIndex(0)\n      setSlashOpen(true)\n      setMentionOpen(false)\n      return\n    }\n    setSlashOpen(false)\n    const mentionMatch = next.match(/@([\\w./-]*)$/)\n    if (mentionMatch) {\n      setMentionQuery(mentionMatch[1])\n      setMentionIndex(0)\n      setMentionOpen(true)\n    } else {\n      setMentionOpen(false)\n    }\n  }, [])\n\n  const submitMessage = React.useCallback(() => {\n    const text = value.trim()\n    if (!text && !composerAttachment) return\n\n    if (editingMessageId) {\n      setItems((current) => current.map((item) => item.kind === \"message\" && item.id === editingMessageId && item.role === \"user\" ? { ...item, text: text || item.text, time: currentTime() } : item))\n      setEditingMessageId(null)\n      setValue(\"\")\n      setComposerAttachment(null)\n      return\n    }\n\n    const steering = isResponding\n    if (steering) stopResponse()\n    const userId = nextId(\"user\")\n    const markerId = nextId(\"thinking\")\n    const message: DemoMessage = { kind: \"message\", id: userId, role: \"user\", time: currentTime(), text: text || \"Attached a file for context.\", scrollAnchor: true, attachments: composerAttachment ? [{ ...composerAttachment, state: \"done\" }] : undefined }\n    setItems((current) => [...current, message, { kind: \"marker\", id: markerId, label: steering ? \"Steering the active response\" : reasoning === \"Auto\" ? \"Aurora is reasoning\" : `Aurora is reasoning · ${reasoning}`, status: \"thinking\" }])\n    setValue(\"\")\n    setComposerAttachment(null)\n    queueMockReply(markerId, steering ? STEER_REPLY : MOCK_REPLY)\n  }, [composerAttachment, editingMessageId, isResponding, queueMockReply, reasoning, stopResponse, value])\n\n  const handleComposerKeyDown = React.useCallback((event: React.KeyboardEvent<HTMLTextAreaElement>) => {\n    if (slashOpen) {\n      if (event.key === \"ArrowDown\") { event.preventDefault(); setSlashIndex((index) => (index + 1) % Math.max(filteredSlash.length, 1)); return }\n      if (event.key === \"ArrowUp\") { event.preventDefault(); setSlashIndex((index) => (index - 1 + filteredSlash.length) % Math.max(filteredSlash.length, 1)); return }\n      if (event.key === \"Enter\") { event.preventDefault(); const item = filteredSlash[slashActiveIndex]; if (item) insertSlashCommand(item); return }\n      if (event.key === \"Escape\") { setSlashOpen(false); return }\n    }\n    if (mentionOpen) {\n      if (event.key === \"ArrowDown\") { event.preventDefault(); setMentionIndex((index) => (index + 1) % Math.max(filteredMentions.length, 1)); return }\n      if (event.key === \"ArrowUp\") { event.preventDefault(); setMentionIndex((index) => (index - 1 + filteredMentions.length) % Math.max(filteredMentions.length, 1)); return }\n      if (event.key === \"Enter\") { event.preventDefault(); const item = filteredMentions[mentionActiveIndex]; if (item) insertMention(item); return }\n      if (event.key === \"Escape\") { setMentionOpen(false); return }\n    }\n    if (event.key === \"Enter\" && !event.shiftKey && !event.nativeEvent.isComposing) { event.preventDefault(); submitMessage() }\n  }, [filteredMentions, filteredSlash, insertMention, insertSlashCommand, mentionActiveIndex, mentionOpen, slashActiveIndex, slashOpen, submitMessage])\n\n  const retryMessage = React.useCallback((messageId: string) => { if (!isResponding) streamIntoMessage(messageId, RETRY_REPLY) }, [isResponding, streamIntoMessage])\n  const copyMessage = React.useCallback((message: DemoMessage) => {\n    if (!navigator.clipboard) return\n    void navigator.clipboard.writeText(message.text).then(() => { setCopiedId(message.id); schedule(() => setCopiedId((current) => current === message.id ? null : current), 1200) }).catch(() => undefined)\n  }, [schedule])\n  const toggleLike = React.useCallback((messageId: string) => setLikedIds((current) => { const next = new Set(current); if (next.has(messageId)) next.delete(messageId); else next.add(messageId); return next }), [])\n  const editMessage = React.useCallback((message: DemoMessage) => { setEditingMessageId(message.id); setValue(message.text); window.requestAnimationFrame(() => textareaRef.current?.focus()) }, [])\n  const resetDemo = React.useCallback(() => { clearTimers(); setItems(INITIAL_ITEMS); setValue(\"\"); setComposerAttachment(null); setPreviewAttachment(null); setCopiedId(null); setLikedIds(new Set()); setEditingMessageId(null); setIsResponding(false); setActiveAssistantId(null); setModel(MODELS[0]); setReasoning(REASONING_LEVELS[0]); setSlashOpen(false); setMentionOpen(false) }, [clearTimers])\n\n  const hasComposerPayload = Boolean(value.trim() || composerAttachment)\n  const showStopButton = isResponding && !hasComposerPayload && !editingMessageId\n\n  return (\n    <section aria-label=\"Interactive Aurora chat demo\" className={[\"aurora-chat-block flex h-[min(680px,78svh)] min-h-[520px] w-full min-w-0 flex-col overflow-hidden rounded-[14px] border sm:h-[min(720px,78vh)] sm:min-h-[560px] sm:rounded-[18px]\", className].filter(Boolean).join(\" \")} style={{ borderColor: \"color-mix(in srgb, var(--aurora-border-strong) 88%, transparent)\", background: \"linear-gradient(180deg, color-mix(in srgb, var(--aurora-page-bg) 96%, var(--aurora-panel-medium)), var(--aurora-page-bg))\", boxShadow: \"var(--aurora-shadow-strong), var(--aurora-highlight-strong)\" }}>\n      <header className=\"flex shrink-0 items-center justify-between gap-3 border-b px-3 py-1.5 sm:px-3.5\" style={{ borderColor: \"color-mix(in srgb, var(--aurora-border-strong) 78%, transparent)\", background: \"linear-gradient(180deg, color-mix(in srgb, var(--aurora-panel-strong) 98%, transparent), color-mix(in srgb, var(--aurora-panel-medium) 92%, transparent))\", boxShadow: \"inset 0 -1px color-mix(in srgb, var(--aurora-highlight-medium) 55%, transparent)\" }}>\n        <div className=\"flex min-w-0 items-center gap-2\">\n          <span className=\"flex size-[26px] shrink-0 items-center justify-center rounded-[8px] border [&_svg]:size-3.5\" style={{ borderColor: \"color-mix(in srgb, var(--axon-orange) 36%, var(--aurora-border-default))\", background: \"color-mix(in srgb, var(--axon-orange) 10%, var(--aurora-panel-medium))\", color: \"var(--axon-orange)\" }}><Sparkles aria-hidden=\"true\" /></span>\n          <div className=\"min-w-0\"><h2 className=\"truncate\" style={{ fontFamily: \"var(--aurora-font-display)\", fontSize: \"var(--aurora-type-body)\", fontWeight: \"var(--aurora-weight-heading)\", lineHeight: \"var(--aurora-line-dense)\" }}>{title}</h2><p className=\"truncate\" style={{ color: \"var(--aurora-text-muted)\", fontSize: \"var(--aurora-type-caption)\", lineHeight: \"var(--aurora-line-dense)\" }}>{subtitle}</p></div>\n        </div>\n        <div className=\"flex shrink-0 items-center gap-1.5\">\n          <span className=\"hidden items-center gap-1.5 rounded-full border px-2 py-0.5 sm:inline-flex\" style={{ borderColor: \"color-mix(in srgb, var(--aurora-border-default) 78%, transparent)\", background: \"color-mix(in srgb, var(--aurora-control-surface) 42%, transparent)\", color: \"var(--aurora-text-muted)\", fontSize: \"var(--aurora-type-caption)\" }}>\n            <span className=\"aurora-status-dot\" style={{ \"--status-dot-color\": \"var(--aurora-success)\" } as React.CSSProperties} />Local mock\n          </span>\n          <Button variant=\"ghost\" size=\"sm\" type=\"button\" aria-label=\"Reset chat demo\" className=\"!h-6 !px-1.5 sm:!px-2 [&_svg]:!size-3.5\" onClick={resetDemo}><RefreshCw data-icon=\"inline-start\" aria-hidden=\"true\" /><span className=\"hidden sm:inline\">Reset</span></Button>\n        </div>\n      </header>\n\n      <div className=\"min-h-0 flex-1\">\n        <MessageScrollerProvider autoScroll scrollPreviousItemPeek={48}>\n          <MessageScroller>\n            <MessageScrollerViewport>\n              <MessageScrollerContent className=\"gap-2.5 px-2.5 py-2.5 sm:gap-2 sm:px-4 sm:py-3\">\n                {items.map((item) => (\n                  <MessageScrollerItem key={item.id} messageId={item.id} scrollAnchor={item.kind === \"message\" ? item.scrollAnchor : false} className={item.kind === \"message\" ? \"sm:pb-[9px]\" : undefined}>\n                    {item.kind === \"marker\" ? <ThreadMarker item={item} /> : (\n                      <MessageGroup className=\"gap-1\">\n                        <Message align={item.role === \"user\" ? \"end\" : \"start\"}>\n                          {item.role === \"assistant\" ? <MessageAvatar aria-label=\"Aurora\" className=\"!size-5 !min-w-5 sm:!size-[22px] sm:!min-w-[22px] [&_svg]:size-[11px] sm:[&_svg]:size-3\"><Bot aria-hidden=\"true\" /></MessageAvatar> : null}\n                          <MessageContent className=\"relative gap-1\">\n                            {item.role === \"assistant\" ? <MessageHeader className=\"min-h-0 gap-1 px-0 sm:gap-1.5\"><span style={{ color: \"var(--aurora-text-primary)\", fontSize: \"var(--aurora-type-caption)\", fontWeight: \"var(--aurora-weight-ui)\" }}>Aurora</span>{item.streaming ? <span className=\"aurora-chat-stream-status\" role=\"status\"><span className=\"aurora-chat-stream-dot\" aria-hidden=\"true\" />Streaming</span> : null}</MessageHeader> : null}\n                            <BubbleGroup>\n                              <Bubble variant={item.role === \"user\" ? \"default\" : \"ghost\"} align={item.role === \"user\" ? \"end\" : \"start\"} className={item.role === \"assistant\" ? \"max-w-[64ch]\" : \"max-w-[86%] sm:max-w-[36ch]\"}>\n                                <BubbleContent style={item.role === \"user\" ? { padding: \"7px 10px\", lineHeight: \"1.45\" } : { lineHeight: \"1.55\" }}>\n                                  {item.text}\n                                  {item.streaming ? <span aria-hidden=\"true\" className=\"ml-1 inline-block h-[1em] w-[2px] translate-y-[2px] rounded-full\" style={{ background: \"var(--aurora-accent-pink)\", animation: \"aurora-msg-caret 1.1s steps(1) infinite\" }} /> : null}\n                                </BubbleContent>\n                              </Bubble>\n                              {item.attachments?.length ? <AttachmentGroup className=\"gap-1.5 py-0.5\">{item.attachments.map((attachment) => <AttachmentCard key={attachment.id} attachment={attachment} onOpen={setPreviewAttachment} compact />)}</AttachmentGroup> : null}\n                            </BubbleGroup>\n                            {item.role === \"assistant\" ? <AssistantShowcase kind={item.showcase} reasoning={reasoning} /> : null}\n                            {item.role === \"assistant\" ? (\n                              <MessageFooter className=\"aurora-chat-action-rail pointer-events-auto h-[18px] min-h-[18px] translate-y-0 gap-0.5 px-0 opacity-70 transition-[opacity,transform] duration-150 sm:pointer-events-none sm:h-0 sm:min-h-0 sm:translate-y-1 sm:opacity-0 sm:group-hover/message:pointer-events-auto sm:group-hover/message:translate-y-0 sm:group-hover/message:opacity-100 sm:group-focus-within/message:pointer-events-auto sm:group-focus-within/message:translate-y-0 sm:group-focus-within/message:opacity-100 [@media(hover:none)]:pointer-events-auto [@media(hover:none)]:h-[18px] [@media(hover:none)]:min-h-[18px] [@media(hover:none)]:translate-y-0 [@media(hover:none)]:opacity-70\">\n                                <span className=\"mr-1\" style={{ color: \"var(--aurora-text-muted)\", fontSize: \"10.5px\" }}>{item.time}</span>\n                                <Button type=\"button\" variant=\"plain\" size=\"unstyled\" className=\"flex size-[18px] items-center justify-center rounded-[5px] transition-colors hover:bg-[var(--aurora-hover-bg)] [&_svg]:!size-3\" aria-label={copiedId === item.id ? \"Copied\" : \"Copy message\"} onClick={() => copyMessage(item)}>{copiedId === item.id ? <Check aria-hidden=\"true\" /> : <Copy aria-hidden=\"true\" />}</Button>\n                                <Button type=\"button\" variant=\"plain\" size=\"unstyled\" className=\"flex size-[18px] items-center justify-center rounded-[5px] transition-colors hover:bg-[var(--aurora-hover-bg)] [&_svg]:!size-3\" aria-label=\"Retry message\" disabled={isResponding} onClick={() => retryMessage(item.id)}><RotateCcw aria-hidden=\"true\" /></Button>\n                                <Button type=\"button\" variant=\"plain\" size=\"unstyled\" className=\"flex size-[18px] items-center justify-center rounded-[5px] transition-colors hover:bg-[var(--aurora-hover-bg)] [&_svg]:!size-3\" aria-label={likedIds.has(item.id) ? \"Remove reaction\" : \"Like message\"} aria-pressed={likedIds.has(item.id)} onClick={() => toggleLike(item.id)} style={{ color: likedIds.has(item.id) ? \"var(--aurora-accent-primary)\" : \"var(--aurora-text-muted)\" }}><ThumbsUp aria-hidden=\"true\" /></Button>\n                              </MessageFooter>\n                            ) : (\n                              <MessageFooter className=\"aurora-chat-action-rail pointer-events-auto h-[18px] min-h-[18px] translate-y-0 justify-end gap-0.5 px-0 opacity-70 transition-[opacity,transform] duration-150 sm:pointer-events-none sm:h-0 sm:min-h-0 sm:translate-y-1 sm:opacity-0 sm:group-hover/message:pointer-events-auto sm:group-hover/message:translate-y-0 sm:group-hover/message:opacity-100 sm:group-focus-within/message:pointer-events-auto sm:group-focus-within/message:translate-y-0 sm:group-focus-within/message:opacity-100 [@media(hover:none)]:pointer-events-auto [@media(hover:none)]:h-[18px] [@media(hover:none)]:min-h-[18px] [@media(hover:none)]:translate-y-0 [@media(hover:none)]:opacity-70\">\n                                <span className=\"mr-1\" style={{ color: \"var(--aurora-text-muted)\", fontSize: \"10.5px\" }}>{item.time}</span>\n                                <Button type=\"button\" variant=\"plain\" size=\"unstyled\" className=\"flex size-[18px] items-center justify-center rounded-[5px] transition-colors hover:bg-[var(--aurora-hover-bg)] [&_svg]:!size-3\" aria-label=\"Edit message\" onClick={() => editMessage(item)}><Pencil aria-hidden=\"true\" /></Button>\n                              </MessageFooter>\n                            )}\n                          </MessageContent>\n                        </Message>\n                      </MessageGroup>\n                    )}\n                  </MessageScrollerItem>\n                ))}\n              </MessageScrollerContent>\n            </MessageScrollerViewport>\n            <MessageScrollerButton direction=\"start\" className=\"!size-[22px] rounded-[6px] sm:!size-6 sm:rounded-[7px] [&_svg]:!size-3 sm:[&_svg]:!size-3.5\" />\n            <MessageScrollerButton direction=\"end\" variant=\"aurora\" className=\"!size-[22px] rounded-[6px] sm:!size-6 sm:rounded-[7px] [&_svg]:!size-3 sm:[&_svg]:!size-3.5\" />\n          </MessageScroller>\n        </MessageScrollerProvider>\n      </div>\n\n      {previewAttachment ? <div className=\"mx-3 mb-1.5 flex shrink-0 items-center gap-2 rounded-[9px] border px-2 py-1.5\" role=\"region\" aria-label=\"Attachment preview\" style={{ borderColor: \"color-mix(in srgb, var(--aurora-accent-primary) 28%, var(--aurora-border-default))\", background: \"color-mix(in srgb, var(--aurora-accent-primary) 6%, var(--aurora-panel-medium))\" }}>\n        <FileText className=\"size-3.5\" aria-hidden=\"true\" style={{ color: \"var(--aurora-accent-primary)\" }} />\n        <div className=\"min-w-0 flex-1\"><p className=\"truncate\" style={{ fontSize: \"var(--aurora-type-label)\", fontWeight: \"var(--aurora-weight-ui)\", lineHeight: \"var(--aurora-line-dense)\" }}>{previewAttachment.title}</p><p className=\"truncate\" style={{ color: \"var(--aurora-text-muted)\", fontSize: \"var(--aurora-type-caption)\", lineHeight: \"var(--aurora-line-dense)\" }}>Mock preview · {previewAttachment.description}</p></div>\n        <Button type=\"button\" variant=\"ghost\" size=\"icon\" className=\"!size-6 [&_svg]:!size-3.5\" aria-label=\"Close preview\" onClick={() => setPreviewAttachment(null)}><X aria-hidden=\"true\" /></Button>\n      </div> : null}\n\n      <form className=\"relative z-30 shrink-0 border-t p-1 sm:p-1.5\" style={{ borderColor: \"var(--aurora-border-default)\", background: \"color-mix(in srgb, var(--aurora-panel-strong) 94%, transparent)\" }} onSubmit={(event) => { event.preventDefault(); if (!showStopButton) submitMessage() }}>\n        <SuggestionPopup label=\"Skills and slash commands\" items={slashOpen ? filteredSlash : []} activeIndex={slashActiveIndex} onSelect={insertSlashCommand} />\n        <SuggestionPopup label=\"File mentions\" items={mentionOpen ? filteredMentions : []} activeIndex={mentionActiveIndex} onSelect={insertMention} />\n        {composerAttachment ? <AttachmentGroup className=\"mb-1.5 gap-1 py-0\"><AttachmentCard attachment={composerAttachment} onOpen={setPreviewAttachment} onRemove={() => setComposerAttachment(null)} compact /></AttachmentGroup> : null}\n        <div className=\"aurora-chat-composer overflow-hidden rounded-[12px] border\" data-streaming={isResponding ? \"true\" : undefined} style={{ borderColor: \"var(--aurora-border-strong)\", background: \"linear-gradient(180deg, color-mix(in srgb, var(--aurora-control-surface) 96%, var(--aurora-panel-strong)), var(--aurora-control-surface))\", boxShadow: \"var(--aurora-highlight-medium)\" }}>\n          <div className=\"relative\">\n            <Button type=\"button\" variant=\"ghost\" size=\"icon\" className=\"absolute bottom-1 left-1 z-10 !size-6 [&_svg]:!size-3.5\" aria-label=\"Add mock attachment\" disabled={Boolean(composerAttachment)} onClick={addMockAttachment}><Paperclip aria-hidden=\"true\" /></Button>\n            <Textarea ref={textareaRef} unstyled autoGrow rows={1} value={value} aria-label=\"Message\" aria-autocomplete=\"list\" placeholder={editingMessageId ? \"Edit your message…\" : isResponding ? \"Steer the response…\" : \"Ask Aurora anything…\"} className=\"max-h-[96px] min-h-[38px] w-full resize-none bg-transparent px-9 py-2 outline-none\" style={{ color: \"var(--aurora-text-primary)\", fontFamily: \"var(--aurora-font-sans)\", fontSize: \"var(--aurora-type-body-sm)\", lineHeight: \"var(--aurora-line-body)\", caretColor: \"var(--aurora-accent-primary)\" }} onChange={handleComposerChange} onKeyDown={handleComposerKeyDown} />\n            {showStopButton ? (\n              <Button type=\"button\" variant=\"destructive\" size=\"icon\" className=\"absolute bottom-1 right-1 z-10 !size-6 rounded-[7px] [&_svg]:!size-3\" aria-label=\"Stop response\" onClick={stopResponse}><Square fill=\"currentColor\" aria-hidden=\"true\" /></Button>\n            ) : (\n              <Button type=\"submit\" variant=\"rose\" size=\"icon\" filled className=\"absolute bottom-1 right-1 z-10 !size-6 rounded-[7px] [&_svg]:!size-3.5\" aria-label={editingMessageId ? \"Save edited message\" : isResponding ? \"Send steering message\" : \"Send message\"} disabled={!hasComposerPayload}><Send aria-hidden=\"true\" /></Button>\n            )}\n          </div>\n          <div className=\"flex min-w-0 items-center gap-1 overflow-hidden border-t px-1 py-0.5 sm:px-1.5\" style={{ borderColor: \"color-mix(in srgb, var(--aurora-border-default) 68%, transparent)\", background: \"linear-gradient(180deg, color-mix(in srgb, var(--aurora-panel-medium) 30%, transparent), color-mix(in srgb, var(--aurora-control-surface) 58%, transparent))\" }}>\n            <CompactSelect label=\"Model\" value={model} options={MODELS} onValueChange={setModel} icon={<Cpu className=\"size-3 shrink-0\" aria-hidden style={{ color: \"var(--axon-orange)\" }} />} />\n            <CompactSelect label=\"Reasoning\" value={reasoning} options={REASONING_LEVELS} onValueChange={setReasoning} icon={<Brain className=\"size-3 shrink-0\" aria-hidden style={{ color: \"var(--aurora-accent-pink)\" }} />} />\n            <span className=\"hidden min-w-0 items-center gap-1.5 sm:flex\" style={{ color: \"var(--aurora-text-muted)\", fontSize: \"10px\" }}><span className=\"inline-flex items-center gap-1\"><kbd className=\"aurora-chat-kbd\">@</kbd>files</span><span aria-hidden=\"true\">·</span><span className=\"inline-flex items-center gap-1\"><kbd className=\"aurora-chat-kbd\">/</kbd>skills</span></span>\n            <span className=\"flex-1\" />\n            {editingMessageId ? <Button type=\"button\" variant=\"plain\" size=\"unstyled\" className=\"flex items-center gap-1 rounded-[6px] px-1.5 py-0.5 [&_svg]:size-3\" onClick={() => { setEditingMessageId(null); setValue(\"\") }} style={{ color: \"var(--aurora-text-muted)\", fontSize: \"10px\" }}><X aria-hidden=\"true\" />Cancel edit</Button> : null}\n            {isResponding && !activeAssistantId ? <span aria-live=\"polite\" className=\"aurora-chat-thinking-label\"><span className=\"aurora-chat-thinking-dots\" aria-hidden=\"true\"><span /><span /><span /></span>{reasoning === \"Auto\" ? \"Thinking\" : `Thinking · ${reasoning}`}</span> : null}\n          </div>\n        </div>\n      </form>\n    </section>\n  )\n}\n\nexport { AuroraChatBlock }\nexport default AuroraChatBlock\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { AlertTriangle, Bot, Brain, Check, CheckCheck, Command, Copy, Cpu, FileCode2, FileText, Paperclip, Pencil, Plus, RefreshCw, RotateCcw, Send, Sparkles, Square, ThumbsUp, X } from \"lucide-react\"\n\nimport { Reasoning } from \"@/registry/aurora/blocks/ai/elements/reasoning\"\nimport { Response, type ResponseSource } from \"@/registry/aurora/blocks/ai/elements/response\"\nimport { Snippet } from \"@/registry/aurora/blocks/ai/elements/snippet\"\nimport { Source, Sources } from \"@/registry/aurora/blocks/ai/elements/sources\"\nimport { CodeBlock } from \"@/registry/aurora/blocks/workspace/code-block/code-block\"\nimport { Attachment, AttachmentAction, AttachmentActions, AttachmentContent, AttachmentDescription, AttachmentGroup, AttachmentMedia, AttachmentTitle, AttachmentTrigger, type AttachmentState } from \"@/registry/aurora/ui/attachment\"\nimport { Bubble, BubbleContent, BubbleGroup } from \"@/registry/aurora/ui/bubble\"\nimport { Button } from \"@/registry/aurora/ui/button\"\nimport { Callout } from \"@/registry/aurora/ui/callout\"\nimport { EmptyState } from \"@/registry/aurora/ui/empty-state\"\nimport { Marker, MarkerContent, MarkerIcon } from \"@/registry/aurora/ui/marker\"\nimport { Message, MessageAvatar, MessageContent, MessageFooter, MessageGroup, MessageHeader } from \"@/registry/aurora/ui/message\"\nimport { MessageScroller, MessageScrollerButton, MessageScrollerContent, MessageScrollerItem, MessageScrollerProvider, MessageScrollerViewport } from \"@/registry/aurora/ui/message-scroller\"\nimport { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectTrigger, SelectValue } from \"@/registry/aurora/ui/select\"\nimport { Spinner } from \"@/registry/aurora/ui/spinner\"\nimport { Textarea } from \"@/registry/aurora/ui/textarea\"\n\ntype DemoAttachment = { id: string; title: string; description: string; state: AttachmentState }\ntype ShowcaseKind = \"code\" | \"sources\" | \"reasoning\"\ntype DemoMessage = { kind: \"message\"; id: string; role: \"assistant\" | \"user\"; text: string; time: string; streaming?: boolean; scrollAnchor?: boolean; attachments?: DemoAttachment[]; responseSources?: ResponseSource[]; showcase?: ShowcaseKind }\ntype DemoMarker = { kind: \"marker\"; id: string; label: string; variant?: \"default\" | \"separator\" | \"border\"; status?: \"thinking\" | \"ready\" | \"synced\" }\ntype DemoError = { kind: \"error\"; id: string; title: string; text: string }\ntype DemoThreadItem = DemoMessage | DemoMarker | DemoError\ntype Suggestion = { id: string; label: string; description: string; kind: \"skill\" | \"file\" }\n\nconst DEMO_SNIPPET = [\n  \"const { isAtEnd, scrollToEnd } = useMessageScroller()\",\n  \"if (!isAtEnd) scrollToEnd({ behavior: \\\"smooth\\\" })\",\n].join(\"\\n\")\n\nconst DEMO_CODE = [\n  \"function steerConversation(input: string) {\",\n  \"  stopActiveStream()\",\n  \"  appendUserTurn(input)\",\n  \"  beginAssistantStream({ reason: \\\"steer\\\" })\",\n  \"}\",\n].join(\"\\n\")\n\nconst SLASH_COMMANDS: Suggestion[] = [\n  { id: \"review\", label: \"/review\", description: \"Run the review skill\", kind: \"skill\" },\n  { id: \"docs\", label: \"/docs\", description: \"Run the documentation sweep skill\", kind: \"skill\" },\n  { id: \"test\", label: \"/test\", description: \"Run validation and smoke tests\", kind: \"skill\" },\n  { id: \"plan\", label: \"/plan\", description: \"Create an implementation plan\", kind: \"skill\" },\n  { id: \"error\", label: \"/error\", description: \"Simulate a recoverable response error\", kind: \"skill\" },\n]\n\nconst FILE_MENTIONS: Suggestion[] = [\n  { id: \"chat\", label: \"chat.tsx\", description: \"Interactive chat block\", kind: \"file\" },\n  { id: \"scroller\", label: \"message-scroller.tsx\", description: \"Viewport and streaming behavior\", kind: \"file\" },\n  { id: \"registry\", label: \"registry.json\", description: \"Aurora registry manifest\", kind: \"file\" },\n  { id: \"readme\", label: \"README.md\", description: \"Aurora package guide\", kind: \"file\" },\n]\n\nconst MODELS = [\"GPT-5.6\", \"Claude Sonnet 4.6\", \"Gemini 2.5 Pro\"]\nconst REASONING_LEVELS = [\"Auto\", \"Fast\", \"Balanced\", \"Deep\"]\n\nconst INITIAL_ITEMS: DemoThreadItem[] = [\n  { kind: \"marker\", id: \"marker-today\", label: \"Today\", variant: \"separator\" },\n  { kind: \"message\", id: \"assistant-welcome\", role: \"assistant\", time: \"9:31 PM\", text: \"The new conversation layer composes cleanly with Aurora's existing `Response`, `Snippet`, and `CodeBlock` surfaces. Here's the lightweight snippet and the full steering helper.\", showcase: \"code\", attachments: [{ id: \"attachment-spec\", title: \"chat-primitives.md\", description: \"5 primitives · Aurora registry\", state: \"done\" }] },\n  { kind: \"message\", id: \"user-compose\", role: \"user\", time: \"9:33 PM\", text: \"Show me the references too, and keep assistant replies out of bubbles.\" },\n  { kind: \"marker\", id: \"marker-context\", label: \"Conversation context synchronized\", variant: \"border\", status: \"synced\" },\n  { kind: \"message\", id: \"assistant-compose\", role: \"assistant\", time: \"9:34 PM\", text: \"Assistant content is plain conversational prose with inline citations. Sources stay attached to the turn as compact references [[1]], while local file context remains visible without becoming another oversized card stack [[2]].\", responseSources: [{ title: \"shadcn chat components\", href: \"https://ui.shadcn.com/docs/changelog/2026-06-chat-components\", description: \"The upstream chat primitive release notes.\" }, { title: \"message-scroller.tsx\", description: \"Aurora viewport and streaming behavior.\" }], showcase: \"sources\" },\n  { kind: \"message\", id: \"user-streaming\", role: \"user\", time: \"9:36 PM\", text: \"Nice. Can I steer while you're still replying?\" },\n  { kind: \"message\", id: \"assistant-streaming\", role: \"assistant\", time: \"9:37 PM\", text: \"Yes. Keep typing while I stream. If the composer has text, **Send** steers the conversation. If it is empty, that same control becomes `Stop`.\", showcase: \"reasoning\" },\n  { kind: \"marker\", id: \"marker-live\", label: \"Interactive demo\", variant: \"separator\", status: \"ready\" },\n]\n\nconst MOCK_REPLY = \"Exactly. `MessageScroller` keeps the viewport stable while the composer stays live. Type a steering message while this is still arriving and **Send** it without waiting for the current response to finish.\"\nconst STEER_REPLY = \"Steering applied. `Stop` preserved the partial response, your steering turn was appended, and Aurora started a new response without locking the composer.\"\nconst RETRY_REPLY = \"Retried locally. The assistant response streams again with the same **plain-message layout**, compact actions, code surfaces, sources, and composer controls.\"\n\nfunction nextId(prefix: string) { return `${prefix}-${crypto.randomUUID()}` }\nfunction currentTime() { return new Intl.DateTimeFormat(undefined, { hour: \"numeric\", minute: \"2-digit\" }).format(new Date()) }\n\nfunction AttachmentCard({ attachment, onOpen, onRemove, compact = false }: { attachment: DemoAttachment; onOpen: (attachment: DemoAttachment) => void; onRemove?: (attachment: DemoAttachment) => void; compact?: boolean }) {\n  const pending = attachment.state === \"uploading\" || attachment.state === \"processing\"\n  const description = attachment.state === \"uploading\" ? \"Uploading mock file\" : attachment.state === \"processing\" ? \"Preparing attachment\" : attachment.description\n  return (\n    <Attachment state={attachment.state} size={compact ? \"xs\" : \"sm\"} className={compact ? \"max-w-[210px] flex-nowrap\" : undefined}>\n      <AttachmentMedia className={[\"relative\", compact ? \"[&>svg]:!size-3.5\" : undefined].filter(Boolean).join(\" \")}>\n        {pending ? <Spinner size=\"sm\" tone=\"cyan\" /> : <FileText aria-hidden=\"true\" />}\n        {attachment.state === \"done\" ? <span className=\"aurora-chat-attachment__state-badge\" aria-hidden=\"true\"><Check /></span> : null}\n      </AttachmentMedia>\n      <AttachmentContent><AttachmentTitle>{attachment.title}</AttachmentTitle>{compact ? null : <AttachmentDescription>{description}</AttachmentDescription>}</AttachmentContent>\n      {onRemove ? <AttachmentActions><AttachmentAction type=\"button\" className={compact ? \"!size-5 rounded-[5px] [&_svg]:!size-3.5\" : undefined} aria-label={\"Remove \" + attachment.title} onClick={() => onRemove(attachment)}><X data-icon=\"inline-start\" aria-hidden=\"true\" /></AttachmentAction></AttachmentActions> : null}\n      <AttachmentTrigger aria-label={\"Preview \" + attachment.title} onClick={() => onOpen(attachment)} />\n    </Attachment>\n  )\n}\n\nfunction AttachmentPreviewPanel({ attachment, onClose }: { attachment: DemoAttachment; onClose: () => void }) {\n  const json = attachment.title.endsWith(\".json\")\n  const preview = json\n    ? ['{', '  \"gateway\": \"healthy\",', '  \"latencyMs\": 24,', '  \"providers\": 18', '}'].join(\"\\n\")\n    : [\"# Chat primitives\", \"\", \"MessageScroller · Message · Bubble · Attachment · Marker\"].join(\"\\n\")\n  return (\n    <div className=\"mx-2 mb-1.5 shrink-0 overflow-hidden rounded-[10px] border sm:mx-3\" role=\"region\" aria-label=\"Attachment preview\" style={{ borderColor: \"color-mix(in srgb, var(--aurora-accent-primary) 30%, var(--aurora-border-default))\", background: \"color-mix(in srgb, var(--aurora-panel-strong) 96%, var(--aurora-accent-primary) 4%)\", boxShadow: \"var(--aurora-shadow-medium), var(--aurora-highlight-medium)\" }}>\n      <div className=\"flex items-center gap-2 px-2 py-1.5\">\n        <span className=\"flex size-6 shrink-0 items-center justify-center rounded-[6px] border\" style={{ borderColor: \"color-mix(in srgb, var(--aurora-accent-primary) 30%, var(--aurora-border-default))\", background: \"color-mix(in srgb, var(--aurora-accent-primary) 9%, transparent)\", color: \"var(--aurora-accent-primary)\" }}><FileText className=\"size-3.5\" aria-hidden=\"true\" /></span>\n        <div className=\"min-w-0 flex-1\"><p className=\"truncate\" style={{ fontSize: \"var(--aurora-type-label)\", fontWeight: \"var(--aurora-weight-ui)\", lineHeight: \"var(--aurora-line-dense)\" }}>{attachment.title}</p><p className=\"truncate\" style={{ color: \"var(--aurora-text-muted)\", fontSize: \"10px\", lineHeight: \"var(--aurora-line-dense)\" }}>{attachment.description} · Local preview</p></div>\n        <span className=\"hidden rounded-full border px-1.5 py-0.5 sm:inline\" style={{ borderColor: \"var(--aurora-border-default)\", color: \"var(--aurora-text-muted)\", fontFamily: \"var(--aurora-font-mono)\", fontSize: \"9px\", lineHeight: 1 }}>{json ? \"JSON\" : \"MD\"}</span>\n        <Button type=\"button\" variant=\"ghost\" size=\"icon\" className=\"!size-6 [&_svg]:!size-3.5\" aria-label=\"Close preview\" onClick={onClose}><X aria-hidden=\"true\" /></Button>\n      </div>\n      <pre tabIndex={0} aria-label={\"Preview of \" + attachment.title} className=\"max-h-[84px] overflow-auto border-t px-2.5 py-2 outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--aurora-focus-ring)]\" style={{ margin: 0, borderColor: \"color-mix(in srgb, var(--aurora-border-default) 72%, transparent)\", background: \"color-mix(in srgb, var(--aurora-page-bg) 70%, transparent)\", color: \"var(--aurora-text-secondary)\", fontFamily: \"var(--aurora-font-mono)\", fontSize: \"10px\", lineHeight: 1.5, whiteSpace: \"pre-wrap\" }}><code>{preview}</code></pre>\n    </div>\n  )\n}\n\nfunction ThreadMarker({ item }: { item: DemoMarker }) {\n  const Icon = item.status === \"synced\" ? CheckCheck : item.status === \"ready\" ? Check : Sparkles\n  return <Marker variant={item.variant} role={item.status === \"thinking\" ? \"status\" : undefined} className={item.status === \"thinking\" ? \"my-0.5\" : \"my-0.5 opacity-75\"}>{item.status ? <MarkerIcon>{item.status === \"thinking\" ? <Spinner size=\"sm\" tone=\"rose\" /> : <Icon aria-hidden=\"true\" />}</MarkerIcon> : null}<MarkerContent>{item.label}</MarkerContent></Marker>\n}\n\nfunction AssistantShowcase({ kind, reasoning }: { kind?: ShowcaseKind; reasoning: string }) {\n  if (kind === \"code\") {\n    return (\n      <div className=\"grid max-w-[640px] gap-2 pt-1 lg:grid-cols-[minmax(0,0.9fr)_minmax(0,1.1fr)] lg:items-start\">\n        <Snippet density=\"compact\" language=\"tsx\" code={DEMO_SNIPPET} />\n        <CodeBlock density=\"compact\" language=\"typescript\" filename=\"steering.ts\" code={DEMO_CODE} />\n      </div>\n    )\n  }\n  if (kind === \"sources\") {\n    return (\n      <Sources density=\"compact\" title=\"Sources & references\" collapsible defaultOpen className=\"max-w-[640px]\">\n        <Source density=\"compact\" index={1} source={{ title: \"shadcn chat components\", href: \"https://ui.shadcn.com/docs/changelog/2026-06-chat-components\", badge: \"DOCS\" }} />\n        <Source density=\"compact\" index={2} source={{ title: \"message-scroller.tsx\", badge: \"FILE\" }} />\n      </Sources>\n    )\n  }\n  if (kind === \"reasoning\") {\n    return (\n      <div className=\"max-w-[520px] pt-0.5\">\n        <Reasoning density=\"compact\" duration={2} content={`Used ${reasoning.toLowerCase()} reasoning to preserve viewport state, keep the composer unlocked, and choose the least disruptive steering path.`} />\n      </div>\n    )\n  }\n  return null\n}\n\nfunction SuggestionPopup({ label, items, activeIndex, onSelect }: { label: string; items: Suggestion[]; activeIndex: number; onSelect: (item: Suggestion) => void }) {\n  if (items.length === 0) return null\n  const heading = label.startsWith(\"Skills\") ? \"Skills\" : \"Files\"\n  return (\n    <div className=\"absolute bottom-[calc(100%+7px)] left-2 z-40 w-[min(310px,92%)] overflow-hidden rounded-[12px] border p-1.5\" style={{ borderColor: \"color-mix(in srgb, var(--aurora-border-strong) 88%, transparent)\", background: \"color-mix(in srgb, var(--aurora-surface-raised) 96%, transparent)\", boxShadow: \"var(--aurora-shadow-strong), var(--aurora-highlight-strong)\", backdropFilter: \"blur(14px)\" }}>\n      <div className=\"flex items-center justify-between gap-2 px-1.5 pb-1 pt-0.5\" style={{ color: \"var(--aurora-text-muted)\", fontSize: \"10px\", fontWeight: \"var(--aurora-weight-ui)\", letterSpacing: \"0.04em\", textTransform: \"uppercase\" }}>\n        <span>{heading}</span><span aria-hidden=\"true\" className=\"normal-case tracking-normal\">↑↓ · Enter</span>\n      </div>\n      <div role=\"listbox\" aria-label={label}>\n      {items.map((item, index) => (\n        <Button key={item.id} type=\"button\" variant=\"plain\" size=\"unstyled\" role=\"option\" aria-selected={index === activeIndex} className=\"flex w-full items-center gap-2 rounded-[8px] px-2 py-1.5 text-left transition-colors data-[selected=true]:bg-[var(--aurora-selected-bg)]\" data-selected={index === activeIndex ? \"true\" : \"false\"} onMouseDown={(event) => event.preventDefault()} onClick={() => onSelect(item)}>\n          {item.kind === \"skill\" ? <Command className=\"size-3.5 shrink-0\" aria-hidden style={{ color: \"var(--axon-orange)\" }} /> : <FileCode2 className=\"size-3.5 shrink-0\" aria-hidden style={{ color: \"var(--aurora-accent-primary)\" }} />}\n          <span className=\"min-w-0 flex-1\">\n            <span className=\"block truncate\" style={{ color: \"var(--aurora-text-primary)\", fontSize: \"var(--aurora-type-label)\", fontWeight: \"var(--aurora-weight-ui)\" }}>{item.label}</span>\n            <span className=\"block truncate\" style={{ color: \"var(--aurora-text-muted)\", fontSize: \"var(--aurora-type-caption)\" }}>{item.description}</span>\n          </span>\n          <span className=\"rounded-full border px-1.5 py-0.5\" style={{ borderColor: \"var(--aurora-border-default)\", color: \"var(--aurora-text-muted)\", fontSize: \"9px\", lineHeight: 1, textTransform: \"uppercase\" }}>{item.kind}</span>\n        </Button>\n      ))}\n      </div>\n    </div>\n  )\n}\n\nfunction CompactSelect({ label, value, options, onValueChange, icon }: { label: string; value: string; options: string[]; onValueChange: (value: string) => void; icon: React.ReactNode }) {\n  const tone = label === \"Model\" ? \"model\" : \"reasoning\"\n  return (\n    <Select value={value} onValueChange={onValueChange}>\n      <SelectTrigger aria-label={label} title={`${label}: ${value}`} data-chat-select={tone} className=\"aurora-chat-select !h-6 !w-auto min-w-0 max-w-[44%] flex-1 gap-1 rounded-full !px-1.5 !py-0 sm:min-w-[94px] sm:max-w-none sm:flex-none sm:!px-2 [&>svg]:!size-3\">\n        <span className=\"flex min-w-0 items-center gap-1 overflow-hidden sm:gap-1.5\">{icon}<SelectValue className=\"truncate\" /></span>\n      </SelectTrigger>\n      <SelectContent className=\"min-w-[160px]\">\n        <SelectGroup>\n          <SelectLabel className=\"!px-2 !py-1 text-[9px] uppercase tracking-[0.08em]\">{label}</SelectLabel>\n          {options.map((option) => <SelectItem key={option} value={option} className=\"!py-1 text-[11px]\">{option}</SelectItem>)}\n        </SelectGroup>\n      </SelectContent>\n    </Select>\n  )\n}\n\nexport interface AuroraChatBlockProps { title?: string; subtitle?: string; className?: string }\n\nfunction AuroraChatBlock({ title = \"Aurora Chat\", subtitle = \"Composable conversation primitives\", className }: AuroraChatBlockProps) {\n  const [items, setItems] = React.useState<DemoThreadItem[]>(INITIAL_ITEMS)\n  const [value, setValue] = React.useState(\"\")\n  const [composerAttachment, setComposerAttachment] = React.useState<DemoAttachment | null>(null)\n  const [previewAttachment, setPreviewAttachment] = React.useState<DemoAttachment | null>(null)\n  const [copiedId, setCopiedId] = React.useState<string | null>(null)\n  const [likedIds, setLikedIds] = React.useState<Set<string>>(() => new Set())\n  const [editingMessageId, setEditingMessageId] = React.useState<string | null>(null)\n  const [isResponding, setIsResponding] = React.useState(false)\n  const [activeAssistantId, setActiveAssistantId] = React.useState<string | null>(null)\n  const [model, setModel] = React.useState(MODELS[0])\n  const [reasoning, setReasoning] = React.useState(REASONING_LEVELS[0])\n  const [slashOpen, setSlashOpen] = React.useState(false)\n  const [slashQuery, setSlashQuery] = React.useState(\"\")\n  const [slashIndex, setSlashIndex] = React.useState(0)\n  const [mentionOpen, setMentionOpen] = React.useState(false)\n  const [mentionQuery, setMentionQuery] = React.useState(\"\")\n  const [mentionIndex, setMentionIndex] = React.useState(0)\n  const textareaRef = React.useRef<HTMLTextAreaElement | null>(null)\n  const streamTimerRef = React.useRef<number | null>(null)\n  const responseTimerRef = React.useRef<number | null>(null)\n  const timeoutRefs = React.useRef<Set<number>>(new Set())\n\n  const filteredSlash = React.useMemo(() => SLASH_COMMANDS.filter((item) => item.label.toLowerCase().includes(slashQuery.toLowerCase())), [slashQuery])\n  const filteredMentions = React.useMemo(() => FILE_MENTIONS.filter((item) => item.label.toLowerCase().includes(mentionQuery.toLowerCase())), [mentionQuery])\n  const slashActiveIndex = Math.min(slashIndex, Math.max(filteredSlash.length - 1, 0))\n  const mentionActiveIndex = Math.min(mentionIndex, Math.max(filteredMentions.length - 1, 0))\n\n  const clearTimers = React.useCallback(() => {\n    if (streamTimerRef.current != null) { window.clearInterval(streamTimerRef.current); streamTimerRef.current = null }\n    if (responseTimerRef.current != null) { window.clearTimeout(responseTimerRef.current); responseTimerRef.current = null }\n    timeoutRefs.current.forEach((timer) => window.clearTimeout(timer)); timeoutRefs.current.clear()\n  }, [])\n\n  const schedule = React.useCallback((callback: () => void, delay: number) => {\n    const timer = window.setTimeout(() => { timeoutRefs.current.delete(timer); callback() }, delay)\n    timeoutRefs.current.add(timer)\n    return timer\n  }, [])\n\n  React.useEffect(() => clearTimers, [clearTimers])\n\n  const stopResponse = React.useCallback(() => {\n    if (streamTimerRef.current != null) { window.clearInterval(streamTimerRef.current); streamTimerRef.current = null }\n    if (responseTimerRef.current != null) { window.clearTimeout(responseTimerRef.current); responseTimerRef.current = null }\n    setItems((current) => current.filter((item) => item.kind !== \"marker\" || item.status !== \"thinking\").map((item) => item.kind === \"message\" && item.streaming ? { ...item, streaming: false } : item))\n    setIsResponding(false)\n    setActiveAssistantId(null)\n  }, [])\n\n  const streamIntoMessage = React.useCallback((messageId: string, fullText: string) => {\n    if (streamTimerRef.current != null) window.clearInterval(streamTimerRef.current)\n    const words = fullText.split(\" \")\n    let cursor = 0\n    setIsResponding(true)\n    setActiveAssistantId(messageId)\n    setItems((current) => current.map((item) => item.kind === \"message\" && item.id === messageId ? { ...item, text: \"\", streaming: true } : item))\n    streamTimerRef.current = window.setInterval(() => {\n      cursor = Math.min(words.length, cursor + 2)\n      const done = cursor >= words.length\n      const text = words.slice(0, cursor).join(\" \")\n      setItems((current) => current.map((item) => item.kind === \"message\" && item.id === messageId ? { ...item, text, streaming: !done } : item))\n      if (done && streamTimerRef.current != null) {\n        window.clearInterval(streamTimerRef.current)\n        streamTimerRef.current = null\n        setIsResponding(false)\n        setActiveAssistantId(null)\n      }\n    }, 54)\n  }, [])\n\n  const queueMockReply = React.useCallback((thinkingMarkerId: string, replyText = MOCK_REPLY) => {\n    if (responseTimerRef.current != null) window.clearTimeout(responseTimerRef.current)\n    setIsResponding(true)\n    responseTimerRef.current = window.setTimeout(() => {\n      responseTimerRef.current = null\n      const assistantId = nextId(\"assistant\")\n      setItems((current) => [...current.filter((item) => item.id !== thinkingMarkerId), { kind: \"message\", id: assistantId, role: \"assistant\", time: currentTime(), text: \"\", streaming: true }])\n      streamIntoMessage(assistantId, replyText)\n    }, 420)\n  }, [streamIntoMessage])\n\n  const addMockAttachment = React.useCallback(() => {\n    if (composerAttachment) return\n    const attachment: DemoAttachment = { id: nextId(\"upload\"), title: \"gateway-health.json\", description: \"12 KB · JSON\", state: \"uploading\" }\n    setComposerAttachment(attachment)\n    schedule(() => setComposerAttachment((current) => current?.id === attachment.id ? { ...current, state: \"processing\" } : current), 650)\n    schedule(() => setComposerAttachment((current) => current?.id === attachment.id ? { ...current, state: \"done\" } : current), 1250)\n  }, [composerAttachment, schedule])\n\n  const insertSlashCommand = React.useCallback((item: Suggestion) => {\n    setValue((current) => current.replace(/(?:^|\\s)\\/[\\w-]*$/, (match) => match.replace(/\\/[\\w-]*$/, item.label + \" \")))\n    setSlashOpen(false)\n    window.requestAnimationFrame(() => textareaRef.current?.focus())\n  }, [])\n\n  const insertMention = React.useCallback((item: Suggestion) => {\n    setValue((current) => current.replace(/@[\\w./-]*$/, \"@\" + item.label + \" \"))\n    setMentionOpen(false)\n    window.requestAnimationFrame(() => textareaRef.current?.focus())\n  }, [])\n\n  const handleComposerChange = React.useCallback((event: React.ChangeEvent<HTMLTextAreaElement>) => {\n    const next = event.target.value\n    setValue(next)\n    const slashMatch = next.match(/(?:^|\\s)\\/([\\w-]*)$/)\n    if (slashMatch) {\n      setSlashQuery(slashMatch[1])\n      setSlashIndex(0)\n      setSlashOpen(true)\n      setMentionOpen(false)\n      return\n    }\n    setSlashOpen(false)\n    const mentionMatch = next.match(/@([\\w./-]*)$/)\n    if (mentionMatch) {\n      setMentionQuery(mentionMatch[1])\n      setMentionIndex(0)\n      setMentionOpen(true)\n    } else {\n      setMentionOpen(false)\n    }\n  }, [])\n\n  const submitMessage = React.useCallback(() => {\n    const text = value.trim()\n    if (!text && !composerAttachment) return\n\n    if (editingMessageId) {\n      setItems((current) => current.map((item) => item.kind === \"message\" && item.id === editingMessageId && item.role === \"user\" ? { ...item, text: text || item.text, time: currentTime() } : item))\n      setEditingMessageId(null)\n      setValue(\"\")\n      setComposerAttachment(null)\n      return\n    }\n\n    const steering = isResponding\n    if (steering) stopResponse()\n    const userId = nextId(\"user\")\n    if (text === \"/error\") {\n      const message: DemoMessage = { kind: \"message\", id: userId, role: \"user\", time: currentTime(), text, scrollAnchor: true, attachments: composerAttachment ? [{ ...composerAttachment, state: \"done\" }] : undefined }\n      const error: DemoError = { kind: \"error\", id: nextId(\"error\"), title: \"Mock response failed\", text: \"Aurora stopped before generating a response. Your turn is preserved, and you can retry, edit, or send a new direction.\" }\n      setItems((current) => [...current, message, error])\n      setValue(\"\")\n      setComposerAttachment(null)\n      return\n    }\n    const markerId = nextId(\"thinking\")\n    const message: DemoMessage = { kind: \"message\", id: userId, role: \"user\", time: currentTime(), text: text || \"Attached a file for context.\", scrollAnchor: true, attachments: composerAttachment ? [{ ...composerAttachment, state: \"done\" }] : undefined }\n    setItems((current) => [...current, message, { kind: \"marker\", id: markerId, label: steering ? \"Steering the active response\" : reasoning === \"Auto\" ? \"Aurora is reasoning\" : `Aurora is reasoning · ${reasoning}`, status: \"thinking\" }])\n    setValue(\"\")\n    setComposerAttachment(null)\n    queueMockReply(markerId, steering ? STEER_REPLY : MOCK_REPLY)\n  }, [composerAttachment, editingMessageId, isResponding, queueMockReply, reasoning, stopResponse, value])\n\n  const handleComposerKeyDown = React.useCallback((event: React.KeyboardEvent<HTMLTextAreaElement>) => {\n    if (slashOpen) {\n      if (event.key === \"ArrowDown\") { event.preventDefault(); setSlashIndex((index) => (index + 1) % Math.max(filteredSlash.length, 1)); return }\n      if (event.key === \"ArrowUp\") { event.preventDefault(); setSlashIndex((index) => (index - 1 + filteredSlash.length) % Math.max(filteredSlash.length, 1)); return }\n      if (event.key === \"Enter\") { event.preventDefault(); const item = filteredSlash[slashActiveIndex]; if (item) insertSlashCommand(item); return }\n      if (event.key === \"Escape\") { setSlashOpen(false); return }\n    }\n    if (mentionOpen) {\n      if (event.key === \"ArrowDown\") { event.preventDefault(); setMentionIndex((index) => (index + 1) % Math.max(filteredMentions.length, 1)); return }\n      if (event.key === \"ArrowUp\") { event.preventDefault(); setMentionIndex((index) => (index - 1 + filteredMentions.length) % Math.max(filteredMentions.length, 1)); return }\n      if (event.key === \"Enter\") { event.preventDefault(); const item = filteredMentions[mentionActiveIndex]; if (item) insertMention(item); return }\n      if (event.key === \"Escape\") { setMentionOpen(false); return }\n    }\n    if (event.key === \"Enter\" && !event.shiftKey && !event.nativeEvent.isComposing) { event.preventDefault(); submitMessage() }\n  }, [filteredMentions, filteredSlash, insertMention, insertSlashCommand, mentionActiveIndex, mentionOpen, slashActiveIndex, slashOpen, submitMessage])\n\n  const retryMessage = React.useCallback((messageId: string) => { if (!isResponding) streamIntoMessage(messageId, RETRY_REPLY) }, [isResponding, streamIntoMessage])\n  const copyMessage = React.useCallback((message: DemoMessage) => {\n    if (!navigator.clipboard) return\n    void navigator.clipboard.writeText(message.text).then(() => { setCopiedId(message.id); schedule(() => setCopiedId((current) => current === message.id ? null : current), 1200) }).catch(() => undefined)\n  }, [schedule])\n  const toggleLike = React.useCallback((messageId: string) => setLikedIds((current) => { const next = new Set(current); if (next.has(messageId)) next.delete(messageId); else next.add(messageId); return next }), [])\n  const editMessage = React.useCallback((message: DemoMessage) => { setEditingMessageId(message.id); setValue(message.text); window.requestAnimationFrame(() => textareaRef.current?.focus()) }, [])\n  const resetDemo = React.useCallback(() => { clearTimers(); setItems(INITIAL_ITEMS); setValue(\"\"); setComposerAttachment(null); setPreviewAttachment(null); setCopiedId(null); setLikedIds(new Set()); setEditingMessageId(null); setIsResponding(false); setActiveAssistantId(null); setModel(MODELS[0]); setReasoning(REASONING_LEVELS[0]); setSlashOpen(false); setMentionOpen(false) }, [clearTimers])\n  const newChat = React.useCallback(() => { clearTimers(); setItems([]); setValue(\"\"); setComposerAttachment(null); setPreviewAttachment(null); setCopiedId(null); setLikedIds(new Set()); setEditingMessageId(null); setIsResponding(false); setActiveAssistantId(null); setSlashOpen(false); setMentionOpen(false) }, [clearTimers])\n\n  const hasComposerPayload = Boolean(value.trim() || composerAttachment)\n  const showStopButton = isResponding && !hasComposerPayload && !editingMessageId\n\n  return (\n    <section aria-label=\"Interactive Aurora chat demo\" className={[\"aurora-chat-block flex h-[min(680px,78svh)] min-h-[520px] w-full min-w-0 flex-col overflow-hidden rounded-[14px] border sm:h-[min(720px,78vh)] sm:min-h-[560px] sm:rounded-[18px]\", className].filter(Boolean).join(\" \")} style={{ borderColor: \"color-mix(in srgb, var(--aurora-border-strong) 88%, transparent)\", background: \"linear-gradient(180deg, color-mix(in srgb, var(--aurora-page-bg) 96%, var(--aurora-panel-medium)), var(--aurora-page-bg))\", boxShadow: \"var(--aurora-shadow-strong), var(--aurora-highlight-strong)\" }}>\n      <header className=\"flex shrink-0 items-center justify-between gap-3 border-b px-3 py-1.5 sm:px-3.5\" style={{ borderColor: \"color-mix(in srgb, var(--aurora-border-strong) 78%, transparent)\", background: \"linear-gradient(180deg, color-mix(in srgb, var(--aurora-panel-strong) 98%, transparent), color-mix(in srgb, var(--aurora-panel-medium) 92%, transparent))\", boxShadow: \"inset 0 -1px color-mix(in srgb, var(--aurora-highlight-medium) 55%, transparent)\" }}>\n        <div className=\"flex min-w-0 items-center gap-2\">\n          <span className=\"flex size-[26px] shrink-0 items-center justify-center rounded-[8px] border [&_svg]:size-3.5\" style={{ borderColor: \"color-mix(in srgb, var(--axon-orange) 36%, var(--aurora-border-default))\", background: \"color-mix(in srgb, var(--axon-orange) 10%, var(--aurora-panel-medium))\", color: \"var(--axon-orange)\" }}><Sparkles aria-hidden=\"true\" /></span>\n          <div className=\"min-w-0\"><h2 className=\"truncate\" style={{ fontFamily: \"var(--aurora-font-display)\", fontSize: \"var(--aurora-type-body)\", fontWeight: \"var(--aurora-weight-heading)\", lineHeight: \"var(--aurora-line-dense)\" }}>{title}</h2><p className=\"truncate\" style={{ color: \"var(--aurora-text-muted)\", fontSize: \"var(--aurora-type-caption)\", lineHeight: \"var(--aurora-line-dense)\" }}>{subtitle}</p></div>\n        </div>\n        <div className=\"flex shrink-0 items-center gap-1.5\">\n          <span className=\"hidden items-center gap-1.5 rounded-full border px-2 py-0.5 sm:inline-flex\" style={{ borderColor: \"color-mix(in srgb, var(--aurora-border-default) 78%, transparent)\", background: \"color-mix(in srgb, var(--aurora-control-surface) 42%, transparent)\", color: \"var(--aurora-text-muted)\", fontSize: \"var(--aurora-type-caption)\" }}>\n            <span className=\"aurora-status-dot\" style={{ \"--status-dot-color\": \"var(--aurora-success)\" } as React.CSSProperties} />Local mock\n          </span>\n          <Button variant=\"ghost\" size=\"icon\" type=\"button\" aria-label=\"New chat\" className=\"!size-6 [&_svg]:!size-3.5\" onClick={newChat}><Plus aria-hidden=\"true\" /></Button>\n          <Button variant=\"ghost\" size=\"sm\" type=\"button\" aria-label=\"Reset chat demo\" className=\"!h-6 !px-1.5 sm:!px-2 [&_svg]:!size-3.5\" onClick={resetDemo}><RefreshCw data-icon=\"inline-start\" aria-hidden=\"true\" /><span className=\"hidden sm:inline\">Reset</span></Button>\n        </div>\n      </header>\n\n      <div className=\"min-h-0 flex-1\">\n        <MessageScrollerProvider autoScroll scrollPreviousItemPeek={48}>\n          <MessageScroller>\n            <MessageScrollerViewport>\n              <MessageScrollerContent className=\"gap-2.5 px-2.5 py-2.5 sm:gap-2 sm:px-4 sm:py-3\">\n                {items.length === 0 ? (\n                  <div className=\"flex min-h-[360px] flex-1 items-center justify-center py-6\">\n                    <EmptyState className=\"w-full max-w-[390px] gap-3 px-5 py-8\" icon={<Sparkles className=\"size-5\" />} title=\"Start a new conversation\" description=\"Ask Aurora anything, attach a file, use / skills, or @mention local context.\" action={<Button type=\"button\" variant=\"rose\" size=\"sm\" onClick={resetDemo}>Load demo thread</Button>} />\n                  </div>\n                ) : items.map((item) => (\n                  <MessageScrollerItem key={item.id} messageId={item.id} scrollAnchor={item.kind === \"message\" ? item.scrollAnchor : false} className={item.kind === \"message\" ? [\"sm:pb-[9px]\", item.responseSources?.length ? \"[content-visibility:visible]\" : \"\"].filter(Boolean).join(\" \") : undefined}>\n                    {item.kind === \"marker\" ? <ThreadMarker item={item} /> : item.kind === \"error\" ? (\n                      <Callout variant=\"error\" title={item.title} icon={<AlertTriangle className=\"size-3.5\" />} className=\"mx-auto w-full max-w-[640px] !gap-2 !p-2.5\">\n                        <div className=\"flex min-w-0 items-start justify-between gap-2\"><span className=\"min-w-0 flex-1\">{item.text}</span><Button type=\"button\" variant=\"ghost\" size=\"sm\" className=\"!h-6 shrink-0 !px-1.5 text-[10px]\" onClick={() => setItems((current) => current.filter((candidate) => candidate.id !== item.id))}>Dismiss</Button></div>\n                      </Callout>\n                    ) : (\n                      <MessageGroup className=\"gap-1\">\n                        <Message align={item.role === \"user\" ? \"end\" : \"start\"}>\n                          {item.role === \"assistant\" ? <MessageAvatar aria-label=\"Aurora\" className=\"!size-5 !min-w-5 sm:!size-[22px] sm:!min-w-[22px] [&_svg]:size-[11px] sm:[&_svg]:size-3\"><Bot aria-hidden=\"true\" /></MessageAvatar> : null}\n                          <MessageContent className=\"relative gap-1\">\n                            {item.role === \"assistant\" ? <MessageHeader className=\"min-h-0 gap-1 px-0 sm:gap-1.5\"><span style={{ color: \"var(--aurora-text-primary)\", fontSize: \"var(--aurora-type-caption)\", fontWeight: \"var(--aurora-weight-ui)\" }}>Aurora</span>{item.streaming ? <span className=\"aurora-chat-stream-status\" role=\"status\"><span className=\"aurora-chat-stream-dot\" aria-hidden=\"true\" />Streaming</span> : null}</MessageHeader> : null}\n                            <BubbleGroup>\n                              <Bubble variant={item.role === \"user\" ? \"default\" : \"ghost\"} align={item.role === \"user\" ? \"end\" : \"start\"} className={item.role === \"assistant\" ? \"max-w-[64ch]\" : \"max-w-[86%] sm:max-w-[36ch]\"}>\n                                {item.role === \"assistant\" ? <Response markdown={item.text} sources={item.responseSources} streaming={item.streaming} aria-live=\"off\" className=\"aurora-chat-response max-w-[64ch]\" style={{ fontSize: \"var(--aurora-type-body-sm)\", lineHeight: 1.55 }} /> : <BubbleContent style={{ padding: \"7px 10px\", lineHeight: \"1.45\" }}>{item.text}</BubbleContent>}\n                              </Bubble>\n                              {item.attachments?.length ? <AttachmentGroup className=\"gap-1.5 py-0.5\">{item.attachments.map((attachment) => <AttachmentCard key={attachment.id} attachment={attachment} onOpen={setPreviewAttachment} compact />)}</AttachmentGroup> : null}\n                            </BubbleGroup>\n                            {item.role === \"assistant\" ? <AssistantShowcase kind={item.showcase} reasoning={reasoning} /> : null}\n                            {item.role === \"assistant\" ? (\n                              <MessageFooter className=\"aurora-chat-action-rail pointer-events-auto h-[18px] min-h-[18px] translate-y-0 gap-0.5 px-0 opacity-70 transition-[opacity,transform] duration-150 sm:pointer-events-none sm:h-0 sm:min-h-0 sm:translate-y-1 sm:opacity-0 sm:group-hover/message:pointer-events-auto sm:group-hover/message:translate-y-0 sm:group-hover/message:opacity-100 sm:group-focus-within/message:pointer-events-auto sm:group-focus-within/message:translate-y-0 sm:group-focus-within/message:opacity-100 [@media(hover:none)]:pointer-events-auto [@media(hover:none)]:h-[18px] [@media(hover:none)]:min-h-[18px] [@media(hover:none)]:translate-y-0 [@media(hover:none)]:opacity-70\">\n                                <span className=\"mr-1\" style={{ color: \"var(--aurora-text-muted)\", fontSize: \"10.5px\" }}>{item.time}</span>\n                                <Button type=\"button\" variant=\"plain\" size=\"unstyled\" className=\"flex size-[18px] items-center justify-center rounded-[5px] transition-colors hover:bg-[var(--aurora-hover-bg)] [&_svg]:!size-3\" aria-label={copiedId === item.id ? \"Copied\" : \"Copy message\"} onClick={() => copyMessage(item)}>{copiedId === item.id ? <Check aria-hidden=\"true\" /> : <Copy aria-hidden=\"true\" />}</Button>\n                                <Button type=\"button\" variant=\"plain\" size=\"unstyled\" className=\"flex size-[18px] items-center justify-center rounded-[5px] transition-colors hover:bg-[var(--aurora-hover-bg)] [&_svg]:!size-3\" aria-label=\"Retry message\" disabled={isResponding} onClick={() => retryMessage(item.id)}><RotateCcw aria-hidden=\"true\" /></Button>\n                                <Button type=\"button\" variant=\"plain\" size=\"unstyled\" className=\"flex size-[18px] items-center justify-center rounded-[5px] transition-colors hover:bg-[var(--aurora-hover-bg)] [&_svg]:!size-3\" aria-label={likedIds.has(item.id) ? \"Remove reaction\" : \"Like message\"} aria-pressed={likedIds.has(item.id)} onClick={() => toggleLike(item.id)} style={{ color: likedIds.has(item.id) ? \"var(--aurora-accent-primary)\" : \"var(--aurora-text-muted)\" }}><ThumbsUp aria-hidden=\"true\" /></Button>\n                              </MessageFooter>\n                            ) : (\n                              <MessageFooter className=\"aurora-chat-action-rail pointer-events-auto h-[18px] min-h-[18px] translate-y-0 justify-end gap-0.5 px-0 opacity-70 transition-[opacity,transform] duration-150 sm:pointer-events-none sm:h-0 sm:min-h-0 sm:translate-y-1 sm:opacity-0 sm:group-hover/message:pointer-events-auto sm:group-hover/message:translate-y-0 sm:group-hover/message:opacity-100 sm:group-focus-within/message:pointer-events-auto sm:group-focus-within/message:translate-y-0 sm:group-focus-within/message:opacity-100 [@media(hover:none)]:pointer-events-auto [@media(hover:none)]:h-[18px] [@media(hover:none)]:min-h-[18px] [@media(hover:none)]:translate-y-0 [@media(hover:none)]:opacity-70\">\n                                <span className=\"mr-1\" style={{ color: \"var(--aurora-text-muted)\", fontSize: \"10.5px\" }}>{item.time}</span>\n                                <Button type=\"button\" variant=\"plain\" size=\"unstyled\" className=\"flex size-[18px] items-center justify-center rounded-[5px] transition-colors hover:bg-[var(--aurora-hover-bg)] [&_svg]:!size-3\" aria-label=\"Edit message\" onClick={() => editMessage(item)}><Pencil aria-hidden=\"true\" /></Button>\n                              </MessageFooter>\n                            )}\n                          </MessageContent>\n                        </Message>\n                      </MessageGroup>\n                    )}\n                  </MessageScrollerItem>\n                ))}\n              </MessageScrollerContent>\n            </MessageScrollerViewport>\n            <MessageScrollerButton direction=\"start\" className=\"!size-[22px] rounded-[6px] sm:!size-6 sm:rounded-[7px] [&_svg]:!size-3 sm:[&_svg]:!size-3.5\" />\n            <MessageScrollerButton direction=\"end\" variant=\"aurora\" className=\"!size-[22px] rounded-[6px] sm:!size-6 sm:rounded-[7px] [&_svg]:!size-3 sm:[&_svg]:!size-3.5\" />\n          </MessageScroller>\n        </MessageScrollerProvider>\n      </div>\n\n      {previewAttachment ? <AttachmentPreviewPanel attachment={previewAttachment} onClose={() => setPreviewAttachment(null)} /> : null}\n\n      <form className=\"relative z-30 shrink-0 border-t p-1 sm:p-1.5\" style={{ borderColor: \"var(--aurora-border-default)\", background: \"color-mix(in srgb, var(--aurora-panel-strong) 94%, transparent)\" }} onSubmit={(event) => { event.preventDefault(); if (!showStopButton) submitMessage() }}>\n        <SuggestionPopup label=\"Skills and slash commands\" items={slashOpen ? filteredSlash : []} activeIndex={slashActiveIndex} onSelect={insertSlashCommand} />\n        <SuggestionPopup label=\"File mentions\" items={mentionOpen ? filteredMentions : []} activeIndex={mentionActiveIndex} onSelect={insertMention} />\n        {composerAttachment ? <AttachmentGroup className=\"mb-1.5 gap-1 py-0\"><AttachmentCard attachment={composerAttachment} onOpen={setPreviewAttachment} onRemove={() => setComposerAttachment(null)} compact /></AttachmentGroup> : null}\n        <div className=\"aurora-chat-composer overflow-hidden rounded-[12px] border\" data-streaming={isResponding ? \"true\" : undefined} data-steering={isResponding && hasComposerPayload && !editingMessageId ? \"true\" : undefined}>\n          <div className=\"relative\">\n            <Button type=\"button\" variant=\"ghost\" size=\"icon\" className=\"absolute bottom-1 left-1 z-10 !size-6 [&_svg]:!size-3.5\" aria-label=\"Add mock attachment\" disabled={Boolean(composerAttachment)} onClick={addMockAttachment}><Paperclip aria-hidden=\"true\" /></Button>\n            <Textarea ref={textareaRef} unstyled autoGrow rows={1} value={value} aria-label=\"Message\" aria-autocomplete=\"list\" placeholder={editingMessageId ? \"Edit your message…\" : isResponding ? \"Steer the response…\" : \"Ask Aurora anything…\"} className=\"max-h-[96px] min-h-[38px] w-full resize-none bg-transparent px-9 py-2 outline-none\" style={{ color: \"var(--aurora-text-primary)\", fontFamily: \"var(--aurora-font-sans)\", fontSize: \"var(--aurora-type-body-sm)\", lineHeight: \"var(--aurora-line-body)\", caretColor: \"var(--aurora-accent-primary)\" }} onChange={handleComposerChange} onKeyDown={handleComposerKeyDown} />\n            {showStopButton ? (\n              <Button type=\"button\" variant=\"destructive\" size=\"icon\" className=\"absolute bottom-1 right-1 z-10 !size-6 rounded-[7px] [&_svg]:!size-3\" aria-label=\"Stop response\" onClick={stopResponse}><Square fill=\"currentColor\" aria-hidden=\"true\" /></Button>\n            ) : (\n              <Button type=\"submit\" variant=\"rose\" size=\"icon\" filled className=\"absolute bottom-1 right-1 z-10 !size-6 rounded-[7px] [&_svg]:!size-3.5\" aria-label={editingMessageId ? \"Save edited message\" : isResponding ? \"Send steering message\" : \"Send message\"} disabled={!hasComposerPayload}><Send aria-hidden=\"true\" /></Button>\n            )}\n          </div>\n          <div className=\"flex min-w-0 items-center gap-1 overflow-hidden border-t px-1 py-0.5 sm:px-1.5\" style={{ borderColor: \"color-mix(in srgb, var(--aurora-border-default) 68%, transparent)\", background: \"linear-gradient(180deg, color-mix(in srgb, var(--aurora-panel-medium) 30%, transparent), color-mix(in srgb, var(--aurora-control-surface) 58%, transparent))\" }}>\n            <CompactSelect label=\"Model\" value={model} options={MODELS} onValueChange={setModel} icon={<Cpu className=\"size-3 shrink-0\" aria-hidden style={{ color: \"var(--axon-orange)\" }} />} />\n            <CompactSelect label=\"Reasoning\" value={reasoning} options={REASONING_LEVELS} onValueChange={setReasoning} icon={<Brain className=\"size-3 shrink-0\" aria-hidden style={{ color: \"var(--aurora-accent-pink)\" }} />} />\n            <span className=\"hidden min-w-0 items-center gap-1.5 sm:flex\" style={{ color: \"var(--aurora-text-muted)\", fontSize: \"10px\" }}><span className=\"inline-flex items-center gap-1\"><kbd className=\"aurora-chat-kbd\">@</kbd>files</span><span aria-hidden=\"true\">·</span><span className=\"inline-flex items-center gap-1\"><kbd className=\"aurora-chat-kbd\">/</kbd>skills</span></span>\n            <span className=\"flex-1\" />\n            {editingMessageId ? <Button type=\"button\" variant=\"plain\" size=\"unstyled\" className=\"flex items-center gap-1 rounded-[6px] px-1.5 py-0.5 [&_svg]:size-3\" onClick={() => { setEditingMessageId(null); setValue(\"\") }} style={{ color: \"var(--aurora-text-muted)\", fontSize: \"10px\" }}><X aria-hidden=\"true\" />Cancel edit</Button> : null}\n            {isResponding && !activeAssistantId ? <span aria-live=\"polite\" className=\"aurora-chat-thinking-label\"><span className=\"aurora-chat-thinking-dots\" aria-hidden=\"true\"><span /><span /><span /></span>{reasoning === \"Auto\" ? \"Thinking\" : `Thinking · ${reasoning}`}</span> : null}\n          </div>\n        </div>\n      </form>\n    </section>\n  )\n}\n\nexport { AuroraChatBlock }\nexport default AuroraChatBlock\n",
       "type": "registry:component",
       "target": "@components/aurora/chat-block.tsx"
     }
@@ -41,7 +44,7 @@
     "installTarget": "@components/aurora/chat-block.tsx",
     "taxonomy": "ai"
   },
-  "docs": "Aurora interactive chat workspace composed from MessageScroller, Message, Bubble, Chat Attachment, and Marker plus Aurora's existing developer surfaces. Assistant turns are unbubbled; timestamps and message actions reveal on hover/focus; user turns support edit; assistant actions group icon-only copy, retry, and thumbs-up. The local demo includes steerable streaming, Stop vs Send behavior, model and reasoning selectors, slash-command skills, file @mentions, compact code blocks/snippets, sources/references, compact reasoning disclosure, animated mock attachment lifecycle, and jump controls.\n\nRegistry dependencies: aurora-tokens, aurora-components, aurora-button, aurora-spinner, aurora-textarea, aurora-select, aurora-message-scroller, aurora-message, aurora-bubble, aurora-chat-attachment, aurora-marker, aurora-code-block, aurora-ai-snippet, aurora-ai-sources, aurora-ai-reasoning.",
+  "docs": "Aurora interactive chat workspace composed from MessageScroller, Message, Bubble, Chat Attachment, and Marker plus Aurora's existing developer surfaces. Assistant turns are unbubbled; timestamps and message actions reveal on hover/focus; user turns support edit; assistant actions group icon-only copy, retry, and thumbs-up. The local demo includes steerable streaming, Stop vs Send behavior, model and reasoning selectors, slash-command skills, file @mentions, compact code blocks/snippets, inline markdown/citations, sources/references, compact reasoning disclosure, polished attachment preview/lifecycle, empty and recoverable error states, and jump controls.\n\nRegistry dependencies: aurora-tokens, aurora-components, aurora-button, aurora-spinner, aurora-textarea, aurora-select, aurora-message-scroller, aurora-message, aurora-bubble, aurora-chat-attachment, aurora-marker, aurora-callout, aurora-empty-state, aurora-code-block, aurora-ai-snippet, aurora-ai-sources, aurora-ai-reasoning, aurora-ai-response.",
   "categories": [
     "aurora",
     "block",
diff --git a/public/r/aurora-components.json b/public/r/aurora-components.json
index 079acce3..2e98d8c6 100644
--- a/public/r/aurora-components.json
+++ b/public/r/aurora-components.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/aurora/styles/aurora-components.css",
-      "content": "/* Aurora Design System — component base styles.\n\n   Every rule here lives in `@layer aurora-components`. Tailwind's `utilities`\n   layer is ordered AFTER it (see app/globals.css), so utility classes win over\n   these base rules — the shadcn-idiomatic override behavior.\n\n   Replaces the old per-component runtime <style> injection (ensureCSS/injectOnce):\n   that injected UNLAYERED CSS at runtime, which beat Tailwind utilities (cascade\n   bug), was not SSR'd (FOUC), and tripped strict CSP. Build-time + layered + SSR'd\n   fixes all three. Generated by scratchpad/assemble.mjs from per-component parts.\n   The consuming app must declare the layer order:\n     @layer theme, base, components, aurora-components, utilities; */\n\n@layer aurora-components {\n  /* ─── button ─── */\n/* ─── button ──────────────────────────────────────────────────────────── */\n  .aurora-btn {\n    position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 7px;\n    white-space: nowrap; cursor: pointer; user-select: none; font-family: var(--font-sans, Inter, sans-serif);\n    font-weight: 560; border: 1px solid var(--aurora-border-strong); background: var(--aurora-control-surface);\n    color: var(--aurora-text-primary); height: 32px; padding: 0 14px; border-radius: 9px; font-size: 13px;\n    box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 1px 2px rgba(0,0,0,0.34), 0 2px 6px rgba(0,0,0,0.16); text-decoration: none; box-sizing: border-box;\n    transition: background 150ms var(--motion-ease-out, ease), border-color 150ms var(--motion-ease-out, ease), box-shadow 200ms var(--motion-ease-out, ease), color 150ms var(--motion-ease-out, ease), transform 80ms ease-out;\n  }\n  .aurora-btn:active { transform: translateY(1px); }\n  .aurora-btn:focus-visible { outline: none; box-shadow: inset 0 1px 0 rgba(255,255,255,0.055), 0 0 0 1px color-mix(in srgb, var(--aurora-accent-primary) 45%, transparent), 0 0 0 3px color-mix(in srgb, var(--aurora-accent-primary) 22%, transparent); }\n  .aurora-btn:disabled, .aurora-btn[aria-disabled=\"true\"] { opacity: 0.45; cursor: not-allowed; transform: none; }\n  .aurora-btn--block { width: 100%; }\n  .aurora-btn--pill { border-radius: 999px; }\n  .aurora-btn--sm { height: 27px; padding: 0 11px; border-radius: 7px; font-size: 12px; gap: 6px; }\n  .aurora-btn--lg { height: 40px; padding: 0 20px; border-radius: 11px; font-size: 14px; gap: 8px; }\n  .aurora-btn--icon { width: 32px; padding: 0; }\n  .aurora-btn--sm.aurora-btn--icon { width: 27px; }\n  .aurora-btn--lg.aurora-btn--icon { width: 40px; }\n\n  .aurora-btn--aurora {\n    border-color: color-mix(in srgb, var(--aurora-accent-primary) 42%, var(--aurora-border-strong));\n    background: linear-gradient(180deg, color-mix(in srgb, var(--aurora-accent-primary) 11%, transparent), transparent 58%), var(--aurora-control-surface);\n    box-shadow: inset 0 1px 0 rgba(255,255,255,0.055), 0 1px 2px rgba(0,0,0,0.34), 0 2px 6px rgba(0,0,0,0.16), 0 0 0 1px color-mix(in srgb, var(--aurora-accent-primary) 22%, transparent);\n  }\n  .aurora-btn--aurora:hover { border-color: color-mix(in srgb, var(--aurora-accent-primary) 70%, var(--aurora-border-strong)); box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 1px 2px rgba(0,0,0,0.4), 0 3px 9px rgba(0,0,0,0.22), 0 0 0 1px color-mix(in srgb, var(--aurora-accent-primary) 38%, transparent); }\n\n  .aurora-btn--neutral:hover { background: var(--aurora-hover-bg); border-color: var(--aurora-border-strong); box-shadow: inset 0 1px 0 rgba(255,255,255,0.07), 0 1px 2px rgba(0,0,0,0.4), 0 3px 9px rgba(0,0,0,0.22); }\n\n  .aurora-btn--rose {\n    border-color: color-mix(in srgb, var(--aurora-accent-pink) 52%, var(--aurora-border-strong));\n    background: linear-gradient(180deg, color-mix(in srgb, var(--aurora-accent-pink) 14%, transparent), transparent 58%), var(--aurora-control-surface);\n    box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 0 0 1px color-mix(in srgb, var(--aurora-accent-pink) 24%, transparent);\n  }\n  .aurora-btn--rose:hover { border-color: color-mix(in srgb, var(--aurora-accent-pink) 76%, var(--aurora-border-strong)); box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 0 0 1px color-mix(in srgb, var(--aurora-accent-pink) 40%, transparent); }\n\n  .aurora-btn--success {\n    color: var(--aurora-success); border-color: color-mix(in srgb, var(--aurora-success) 46%, var(--aurora-border-strong));\n    background: linear-gradient(180deg, color-mix(in srgb, var(--aurora-success) 12%, transparent), transparent 58%), var(--aurora-control-surface);\n    box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 0 0 1px color-mix(in srgb, var(--aurora-success) 22%, transparent);\n  }\n  .aurora-btn--success:hover { border-color: color-mix(in srgb, var(--aurora-success) 72%, var(--aurora-border-strong)); box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 0 0 1px color-mix(in srgb, var(--aurora-success) 42%, transparent); }\n\n  .aurora-btn--warn {\n    color: var(--aurora-warn); border-color: color-mix(in srgb, var(--aurora-warn) 48%, var(--aurora-border-strong));\n    background: linear-gradient(180deg, color-mix(in srgb, var(--aurora-warn) 12%, transparent), transparent 58%), var(--aurora-control-surface);\n    box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 0 0 1px color-mix(in srgb, var(--aurora-warn) 22%, transparent);\n  }\n  .aurora-btn--warn:hover { border-color: color-mix(in srgb, var(--aurora-warn) 74%, var(--aurora-border-strong)); box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 0 0 1px color-mix(in srgb, var(--aurora-warn) 42%, transparent); }\n\n  .aurora-btn--ghost { border-color: transparent; background: transparent; box-shadow: none; color: var(--aurora-text-muted); }\n  .aurora-btn--ghost:hover { color: var(--aurora-text-primary); background: var(--aurora-hover-bg); }\n\n  /* plain — structural escape hatch: a bare clickable button with no Aurora fill */\n  .aurora-btn--plain { border-color: transparent; background: transparent; box-shadow: none; color: inherit; }\n  .aurora-btn--plain:hover { background: transparent; }\n\n  /* unstyled — strip the base dimensions/typography (pairs with --plain for a raw wrapper) */\n  .aurora-btn--unstyled { height: auto; min-height: 0; padding: 0; border: 0; border-radius: 0; font-size: inherit; font-weight: inherit; gap: 0; box-shadow: none; }\n\n  /* filled — the one flooded hero action (flooded fills are allowed; keep to one per surface) */\n  .aurora-btn--filled.aurora-btn--rose { background: var(--aurora-accent-pink); border-color: var(--aurora-accent-pink-deep); color: #2a0f18; box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), 0 0 0 1px color-mix(in srgb, var(--aurora-accent-pink-deep) 50%, transparent); }\n  .aurora-btn--filled.aurora-btn--rose:hover { background: var(--aurora-accent-pink-strong); border-color: var(--aurora-accent-pink-deep); }\n  .aurora-btn--filled.aurora-btn--aurora { background: var(--aurora-accent-primary); border-color: var(--aurora-accent-deep); color: #06131c; }\n  .aurora-btn--filled.aurora-btn--aurora:hover { background: color-mix(in srgb, var(--aurora-accent-primary) 86%, #fff); }\n  .aurora-btn--filled.aurora-btn--success { background: var(--aurora-success); border-color: color-mix(in srgb, var(--aurora-success) 60%, #000); color: #06201b; }\n  .aurora-btn--filled.aurora-btn--warn { background: var(--aurora-warn); border-color: color-mix(in srgb, var(--aurora-warn) 60%, #000); color: #211803; }\n\n  .aurora-btn--destructive {\n    color: var(--aurora-error); border-color: color-mix(in srgb, var(--aurora-error) 42%, var(--aurora-border-strong));\n    background: linear-gradient(180deg, color-mix(in srgb, var(--aurora-error) 9%, transparent), transparent 58%), var(--aurora-control-surface);\n  }\n  .aurora-btn--destructive:hover { border-color: color-mix(in srgb, var(--aurora-error) 62%, var(--aurora-border-strong)); }\n\n  .aurora-btn--pulse:not(:disabled):not([aria-disabled=\"true\"]) { animation: aurora-btn-pulse 2.4s ease-in-out infinite; }\n  .aurora-btn--loading { cursor: progress; }\n  .aurora-btn__spinner { width: 1em; height: 1em; border-radius: 50%; border: 2px solid currentColor; border-top-color: transparent; animation: aurora-btn-spin 0.62s linear infinite; flex-shrink: 0; }\n  .aurora-btn__icon { display: inline-flex; align-items: center; flex-shrink: 0; }\n\n  @media (prefers-reduced-motion: reduce) {\n    .aurora-btn--pulse { animation: none; }\n    .aurora-btn__spinner { animation-duration: 1.4s; }\n  }\n\n  /* ─── alert-dialog ─── */\n.aurora-alert {\n  display: grid;\n  grid-template-columns: auto 1fr;\n  gap: 16px;\n  padding: 28px;\n  border-radius: var(--aurora-radius-3);\n  border: 1px solid color-mix(in srgb, var(--aurora-border-default) 55%, var(--aurora-page-bg));\n  background: linear-gradient(180deg, var(--aurora-panel-strong-top), var(--aurora-panel-strong));\n  box-shadow: var(--aurora-shadow-strong), var(--aurora-highlight-strong);\n  box-sizing: border-box;\n}\n.aurora-alert__icon {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 44px;\n  height: 44px;\n  border-radius: 12px;\n  border: 1px solid var(--aurora-accent-pink-border);\n  background: var(--aurora-accent-pink-surface);\n  color: var(--aurora-accent-pink);\n  flex-shrink: 0;\n}\n.aurora-alert--info .aurora-alert__icon {\n  border-color: color-mix(in srgb, var(--aurora-accent-primary) 32%, transparent);\n  background: color-mix(in srgb, var(--aurora-accent-primary) 12%, var(--aurora-panel-medium));\n  color: var(--aurora-accent-primary);\n}\n.aurora-alert__main { display: flex; flex-direction: column; gap: 8px; min-width: 0; }\n.aurora-alert__title {\n  margin: 0;\n  font-family: var(--font-display, var(--font-sans, Manrope, sans-serif));\n  font-weight: 700;\n  font-size: 19px;\n  line-height: 1.25;\n  letter-spacing: -0.01em;\n  color: var(--aurora-text-primary);\n}\n.aurora-alert__desc {\n  margin: 0;\n  font-family: var(--font-sans, Inter, sans-serif);\n  font-size: 15px;\n  line-height: 1.5;\n  color: var(--aurora-text-muted);\n}\n.aurora-alert__footer {\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: flex-end;\n  gap: 10px;\n  margin-top: 14px;\n}\n\n  /* ─── card ─── */\n.aurora-card { color: var(--aurora-text-primary); border: 1px solid var(--aurora-border-default); box-sizing: border-box; }\n.aurora-card[data-tier=\"2\"] {\n  background: linear-gradient(180deg, var(--aurora-panel-strong-top), var(--aurora-panel-strong));\n  border-color: color-mix(in srgb, var(--aurora-border-default) 55%, var(--aurora-page-bg));\n  border-radius: var(--aurora-radius-3);\n  box-shadow: var(--aurora-shadow-strong), var(--aurora-highlight-strong);\n}\n.aurora-card[data-tier=\"1\"] {\n  background: linear-gradient(180deg, var(--aurora-panel-medium-top), var(--aurora-panel-medium));\n  border-color: color-mix(in srgb, var(--aurora-border-default) 42%, var(--aurora-page-bg));\n  border-radius: var(--aurora-radius-2);\n  box-shadow: var(--aurora-shadow-medium), var(--aurora-highlight-medium);\n}\n.aurora-card[data-accent=\"cyan\"] {\n  border-color: color-mix(in srgb, var(--aurora-accent-primary) 60%, var(--aurora-border-default));\n  box-shadow: var(--aurora-shadow-strong), var(--aurora-highlight-strong), 0 0 0 1px color-mix(in srgb, var(--aurora-accent-primary) 22%, transparent), 0 0 20px color-mix(in srgb, var(--aurora-accent-primary) 12%, transparent);\n}\n.aurora-card[data-accent=\"rose\"] {\n  border-color: color-mix(in srgb, var(--aurora-accent-pink) 60%, var(--aurora-border-default));\n  box-shadow: var(--aurora-shadow-strong), var(--aurora-highlight-strong), 0 0 0 1px color-mix(in srgb, var(--aurora-accent-pink) 22%, transparent), 0 0 20px color-mix(in srgb, var(--aurora-accent-pink) 12%, transparent);\n}\n.aurora-card[data-interactive=\"true\"] {\n  cursor: pointer;\n  transition: transform 160ms var(--motion-ease-out, ease), box-shadow 160ms var(--motion-ease-out, ease), border-color 160ms var(--motion-ease-out, ease);\n}\n.aurora-card[data-interactive=\"true\"]:hover {\n  transform: translateY(-2px);\n  border-color: color-mix(in srgb, var(--aurora-accent-primary) 38%, var(--aurora-border-strong));\n  box-shadow: var(--aurora-shadow-strong), 0 0 0 1px color-mix(in srgb, var(--aurora-accent-primary) 30%, transparent);\n}\n.aurora-card[data-interactive=\"true\"]:focus-visible {\n  outline: none;\n  box-shadow: var(--aurora-shadow-strong), 0 0 0 3px var(--aurora-focus-ring);\n}\n@media (prefers-reduced-motion: reduce) { .aurora-card[data-interactive=\"true\"] { transition: none; } }\n\n  /* ─── carousel ─── */\n.aurora-carousel { display: grid; gap: 14px; }\n.aurora-carousel__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }\n.aurora-carousel__title {\n  margin: 0;\n  font-family: var(--aurora-font-display);\n  font-weight: 800;\n  font-size: 26px;\n  line-height: 1.1;\n  letter-spacing: -0.02em;\n  color: var(--aurora-text-primary);\n}\n.aurora-carousel__controls { display: flex; gap: 8px; }\n.aurora-carousel__track {\n  display: flex;\n  gap: 12px;\n  overflow-x: auto;\n  scroll-snap-type: x mandatory;\n  padding-bottom: 4px;\n  scrollbar-width: thin;\n}\n.aurora-carousel__slide { min-width: 240px; scroll-snap-align: start; }\n.aurora-carousel__item {\n  position: relative;\n  border-radius: 8px;\n  border: 1px solid var(--aurora-border-default);\n  background:\n    linear-gradient(180deg, var(--aurora-panel-medium-top), transparent 60%),\n    var(--aurora-panel-medium);\n  box-shadow: var(--aurora-shadow-medium), var(--aurora-highlight-medium);\n  padding: 16px;\n}\n\n  /* ─── chat-message ─── */\n.aurora-chat-message {\n  display: flex;\n  flex-direction: column;\n  font-family: var(--font-sans);\n  color: var(--aurora-text-primary);\n}\n.aurora-chat-message[data-role=\"user\"] {\n  align-items: flex-end;\n}\n.aurora-chat-message[data-role=\"assistant\"] {\n  align-items: flex-start;\n}\n\n/* Assistant header row: avatar + author + time */\n.aurora-chat-message__head {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  margin-bottom: 10px;\n}\n.aurora-chat-message__avatar {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 40px;\n  height: 40px;\n  flex: 0 0 auto;\n  border-radius: var(--radius-1, 14px);\n  background: var(--aurora-panel-strong);\n  border: 1px solid var(--aurora-border-default);\n  color: var(--aurora-accent-pink);\n}\n.aurora-chat-message__meta {\n  display: flex;\n  align-items: baseline;\n  gap: 8px;\n  min-width: 0;\n}\n.aurora-chat-message__author {\n  font-family: var(--font-sans);\n  font-size: 15px;\n  font-weight: 700;\n  line-height: 1.2;\n  color: var(--aurora-text-primary);\n}\n.aurora-chat-message__time {\n  font-family: var(--font-sans);\n  font-size: 13px;\n  font-weight: 500;\n  line-height: 1.2;\n  color: var(--aurora-text-muted);\n}\n\n/* Bubble */\n.aurora-chat-message__bubble {\n  position: relative;\n  max-width: 100%;\n  padding: 16px 20px;\n  border-radius: var(--radius-2, 18px);\n  font-size: 17px;\n  line-height: 1.5;\n  border: 1px solid transparent;\n  box-sizing: border-box;\n}\n.aurora-chat-message[data-role=\"user\"] .aurora-chat-message__bubble {\n  background: color-mix(in srgb, var(--aurora-accent-primary) 12%, transparent);\n  border-color: color-mix(in srgb, var(--aurora-accent-primary) 42%, transparent);\n  color: var(--aurora-text-primary);\n  text-align: right;\n}\n.aurora-chat-message[data-role=\"assistant\"] .aurora-chat-message__bubble {\n  background: var(--aurora-panel-medium);\n  border-color: var(--aurora-border-default);\n  color: var(--aurora-text-primary);\n  text-align: left;\n}\n.aurora-chat-message__bubble p {\n  margin: 0;\n}\n.aurora-chat-message__bubble p + p {\n  margin-top: 12px;\n}\n\n/* Inline code chips */\n.aurora-chat-message__bubble code {\n  font-family: var(--font-mono);\n  font-size: 0.9em;\n  padding: 2px 7px;\n  border-radius: 7px;\n  background: color-mix(in srgb, var(--aurora-accent-pink) 12%, var(--aurora-panel-medium));\n  color: var(--aurora-accent-pink);\n}\n\n/* Citations — sit below the bubble, aligned to the message column */\n.aurora-chat-message__citations {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 8px;\n  margin-top: 10px;\n}\n.aurora-chat-message[data-role=\"user\"] .aurora-chat-message__citations {\n  justify-content: flex-end;\n}\n.aurora-chat-message__citation {\n  display: inline-flex;\n  align-items: center;\n  gap: 7px;\n  padding: 6px 12px;\n  border-radius: var(--radius-1, 14px);\n  border: 1px solid var(--aurora-border-default);\n  background: var(--aurora-control-surface);\n  font-family: var(--font-mono);\n  font-size: 13px;\n  font-weight: 500;\n  line-height: 1;\n  color: var(--aurora-text-muted);\n  text-decoration: none;\n  transition: border-color 120ms ease, color 120ms ease;\n}\n.aurora-chat-message__citation:hover {\n  border-color: var(--aurora-border-strong);\n  color: var(--aurora-text-primary);\n}\n.aurora-chat-message__citation-icon {\n  color: var(--aurora-accent-pink);\n  flex: 0 0 auto;\n}\n\n  /* ─── conversation primitives ─── */\n.aurora-message__avatar {\n  width: 32px;\n  height: 32px;\n  border: 1px solid color-mix(in srgb, var(--axon-orange) 34%, var(--aurora-border-default));\n  background: color-mix(in srgb, var(--axon-orange) 10%, var(--aurora-panel-medium));\n  color: var(--axon-orange);\n  box-shadow: var(--aurora-highlight-medium);\n}\n.aurora-message__meta {\n  min-height: 20px;\n  color: var(--aurora-text-muted);\n  font-family: var(--aurora-font-sans);\n  font-size: var(--aurora-type-label);\n  font-weight: var(--aurora-weight-ui);\n  letter-spacing: var(--aurora-letter-label);\n  line-height: var(--aurora-line-dense);\n}\n\n.aurora-bubble__content {\n  border: 1px solid transparent;\n  border-radius: 14px;\n  padding: 10px 13px;\n  color: var(--aurora-text-primary);\n  font-family: var(--aurora-font-sans);\n  font-size: var(--aurora-type-body-sm);\n  font-weight: var(--aurora-weight-body);\n  line-height: var(--aurora-line-body);\n  box-shadow: var(--aurora-highlight-medium);\n}\n.aurora-bubble__content:is(button, a) {\n  cursor: pointer;\n  text-align: left;\n  text-decoration: none;\n  transition: border-color 140ms ease, background 140ms ease, color 140ms ease;\n}\n.aurora-bubble__content:is(button, a):focus-visible {\n  outline: 2px solid var(--aurora-focus-ring);\n  outline-offset: 2px;\n}\n.aurora-bubble--default > .aurora-bubble__content {\n  background: linear-gradient(180deg, color-mix(in srgb, var(--aurora-accent-primary) 13%, var(--aurora-panel-medium)), color-mix(in srgb, var(--aurora-accent-primary) 7%, var(--aurora-panel-medium)));\n  border-color: color-mix(in srgb, var(--aurora-accent-primary) 36%, var(--aurora-border-default));\n}\n.aurora-bubble--secondary > .aurora-bubble__content {\n  background: color-mix(in srgb, var(--aurora-accent-pink) 11%, var(--aurora-panel-medium));\n  border-color: color-mix(in srgb, var(--aurora-accent-pink) 30%, var(--aurora-border-default));\n}\n.aurora-bubble--muted > .aurora-bubble__content {\n  background: var(--aurora-panel-medium);\n  border-color: var(--aurora-border-default);\n}\n.aurora-bubble--tinted > .aurora-bubble__content {\n  background: linear-gradient(180deg, color-mix(in srgb, var(--axon-orange) 9%, var(--aurora-panel-strong)), color-mix(in srgb, var(--axon-orange) 4%, var(--aurora-panel-medium)));\n  border-color: color-mix(in srgb, var(--axon-orange) 24%, var(--aurora-border-default));\n}\n.aurora-bubble--outline > .aurora-bubble__content {\n  background: color-mix(in srgb, var(--aurora-control-surface) 70%, transparent);\n  border-color: var(--aurora-border-strong);\n}\n.aurora-bubble--ghost > .aurora-bubble__content {\n  max-width: 100%;\n  padding: 0;\n  border-color: transparent;\n  border-radius: 0;\n  background: transparent;\n  box-shadow: none;\n}\n.aurora-bubble--destructive > .aurora-bubble__content {\n  background: color-mix(in srgb, var(--aurora-error) 10%, var(--aurora-panel-medium));\n  border-color: color-mix(in srgb, var(--aurora-error) 36%, var(--aurora-border-default));\n  color: var(--aurora-error);\n}\n.aurora-bubble__reactions {\n  z-index: 10;\n  min-height: 26px;\n  padding: 2px 5px;\n  border: 1px solid var(--aurora-border-default);\n  border-radius: 999px;\n  background: color-mix(in srgb, var(--aurora-panel-strong) 94%, transparent);\n  box-shadow: var(--aurora-shadow-medium), var(--aurora-highlight-medium);\n  color: var(--aurora-text-muted);\n}\n\n.aurora-chat-composer {\n  transition: border-color 150ms ease, box-shadow 150ms ease, background 150ms ease;\n}\n.aurora-chat-composer[data-streaming=\"true\"] {\n  border-color: color-mix(in srgb, var(--axon-orange) 28%, var(--aurora-border-strong));\n}\n.aurora-chat-composer:focus-within {\n  border-color: color-mix(in srgb, var(--aurora-accent-primary) 48%, var(--aurora-border-strong));\n  box-shadow: 0 0 0 1px color-mix(in srgb, var(--aurora-accent-primary) 18%, transparent),\n    0 10px 28px color-mix(in srgb, var(--aurora-accent-primary) 6%, transparent),\n    var(--aurora-highlight-medium);\n}\n.aurora-chat-select[data-chat-select=\"model\"] {\n  border-color: color-mix(in srgb, var(--axon-orange) 22%, var(--aurora-border-strong));\n  background: color-mix(in srgb, var(--axon-orange) 4%, var(--aurora-control-surface));\n}\n.aurora-chat-select[data-chat-select=\"reasoning\"] {\n  border-color: color-mix(in srgb, var(--aurora-accent-pink) 22%, var(--aurora-border-strong));\n  background: color-mix(in srgb, var(--aurora-accent-pink) 4%, var(--aurora-control-surface));\n}\n.aurora-chat-select:hover {\n  border-color: color-mix(in srgb, var(--aurora-accent-primary) 34%, var(--aurora-border-strong));\n}\n.aurora-chat-stream-status,\n.aurora-chat-thinking-label {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  color: var(--aurora-text-muted);\n  font-size: 9.5px;\n  font-weight: var(--aurora-weight-ui);\n  line-height: 1;\n}\n.aurora-chat-stream-dot {\n  width: 5px;\n  height: 5px;\n  border-radius: 999px;\n  background: var(--aurora-accent-pink);\n  box-shadow: 0 0 0 2px color-mix(in srgb, var(--aurora-accent-pink) 12%, transparent);\n  animation: aurora-chat-stream-pulse 1.2s ease-in-out infinite;\n}\n.aurora-chat-thinking-dots { display: inline-flex; align-items: center; gap: 2px; }\n.aurora-chat-thinking-dots > span {\n  width: 3px;\n  height: 3px;\n  border-radius: 999px;\n  background: var(--axon-orange);\n  animation: aurora-chat-thinking-dot 1.05s ease-in-out infinite;\n}\n.aurora-chat-thinking-dots > span:nth-child(2) { animation-delay: 120ms; }\n.aurora-chat-thinking-dots > span:nth-child(3) { animation-delay: 240ms; }\n.aurora-chat-kbd {\n  display: inline-flex;\n  min-width: 14px;\n  height: 14px;\n  align-items: center;\n  justify-content: center;\n  padding: 0 3px;\n  border: 1px solid color-mix(in srgb, var(--aurora-border-strong) 72%, transparent);\n  border-radius: 4px;\n  background: color-mix(in srgb, var(--aurora-panel-medium) 72%, transparent);\n  color: var(--aurora-text-secondary);\n  font-family: var(--aurora-font-mono);\n  font-size: 9px;\n  line-height: 1;\n  box-shadow: inset 0 1px color-mix(in srgb, white 4%, transparent);\n}\n@keyframes aurora-chat-stream-pulse {\n  0%, 100% { opacity: .45; transform: scale(.82); }\n  50% { opacity: 1; transform: scale(1); }\n}\n@keyframes aurora-chat-thinking-dot {\n  0%, 70%, 100% { opacity: .35; transform: translateY(0); }\n  35% { opacity: 1; transform: translateY(-2px); }\n}\n.aurora-chat-attachment {\n  position: relative;\n  overflow: hidden;\n  border: 1px solid var(--aurora-border-default);\n  border-radius: 13px;\n  background: color-mix(in srgb, var(--aurora-panel-medium) 92%, transparent);\n  color: var(--aurora-text-primary);\n  box-shadow: var(--aurora-highlight-medium);\n  transition: border-color 140ms ease, background 140ms ease, box-shadow 140ms ease;\n}\n.aurora-chat-attachment:focus-within {\n  border-color: color-mix(in srgb, var(--aurora-accent-primary) 52%, var(--aurora-border-strong));\n  box-shadow: 0 0 0 2px color-mix(in srgb, var(--aurora-focus-ring) 18%, transparent), var(--aurora-highlight-medium);\n}\n.aurora-chat-attachment:has(> a, > button):hover {\n  background: color-mix(in srgb, var(--aurora-accent-primary) 5%, var(--aurora-panel-medium));\n}\n.aurora-chat-attachment[data-state=\"idle\"] { border-style: dashed; }\n.aurora-chat-attachment[data-state=\"error\"] {\n  border-color: color-mix(in srgb, var(--aurora-error) 45%, var(--aurora-border-default));\n}\n.aurora-chat-attachment[data-state=\"uploading\"]::after,\n.aurora-chat-attachment[data-state=\"processing\"]::after {\n  content: \"\";\n  position: absolute;\n  left: -38%;\n  bottom: 0;\n  width: 38%;\n  height: 1px;\n  border-radius: 999px;\n  background: linear-gradient(90deg, transparent, var(--aurora-accent-primary), transparent);\n  pointer-events: none;\n  animation: aurora-chat-attachment-progress 1.25s ease-in-out infinite;\n}\n.aurora-chat-attachment__state-badge {\n  position: absolute;\n  right: -3px;\n  bottom: -3px;\n  display: inline-flex;\n  width: 10px;\n  height: 10px;\n  align-items: center;\n  justify-content: center;\n  border: 1px solid var(--aurora-panel-strong);\n  border-radius: 999px;\n  background: var(--aurora-success);\n  color: var(--aurora-page-bg);\n  box-shadow: 0 0 0 1px color-mix(in srgb, var(--aurora-success) 25%, transparent);\n}\n.aurora-chat-attachment__state-badge svg { width: 7px; height: 7px; stroke-width: 2.8; }\n@keyframes aurora-chat-attachment-progress {\n  0% { transform: translateX(0); opacity: .2; }\n  35% { opacity: 1; }\n  100% { transform: translateX(365%); opacity: .2; }\n}\n@media (prefers-reduced-motion: reduce) {\n  .aurora-chat-stream-dot,\n  .aurora-chat-thinking-dots > span,\n  .aurora-chat-attachment[data-state=\"uploading\"]::after,\n  .aurora-chat-attachment[data-state=\"processing\"]::after { animation: none; }\n}\n.aurora-chat-attachment--default { gap: 9px; padding: 8px 10px; font-size: var(--aurora-type-body-sm); }\n.aurora-chat-attachment--sm { gap: 8px; padding: 6px 8px; font-size: var(--aurora-type-label); }\n.aurora-chat-attachment--xs { gap: 5px; padding: 3px 5px; border-radius: 8px; font-size: var(--aurora-type-label); }\n.aurora-chat-attachment--horizontal { min-width: 160px; align-items: center; }\n.aurora-chat-attachment--xs.aurora-chat-attachment--horizontal { min-width: 0; }\n.aurora-chat-attachment--vertical { width: 118px; flex-direction: column; }\n.aurora-chat-attachment__media {\n  width: 40px;\n  border-radius: 9px;\n  background: color-mix(in srgb, var(--aurora-accent-primary) 8%, var(--aurora-control-surface));\n  color: var(--aurora-accent-primary);\n}\n.aurora-chat-attachment--sm .aurora-chat-attachment__media { width: 34px; }\n.aurora-chat-attachment--xs .aurora-chat-attachment__media { width: 24px; border-radius: 6px; }\n.aurora-chat-attachment--vertical .aurora-chat-attachment__media { width: 100%; }\n.aurora-chat-attachment__media--image { opacity: .62; }\n.aurora-chat-attachment[data-state=\"done\"] .aurora-chat-attachment__media--image,\n.aurora-chat-attachment[data-state=\"idle\"] .aurora-chat-attachment__media--image { opacity: 1; }\n.aurora-chat-attachment__media--image img { width: 100%; height: 100%; object-fit: cover; }\n.aurora-chat-attachment[data-state=\"error\"] .aurora-chat-attachment__media {\n  background: color-mix(in srgb, var(--aurora-error) 10%, var(--aurora-control-surface));\n  color: var(--aurora-error);\n}\n.aurora-chat-attachment__content { line-height: 1.22; }\n.aurora-chat-attachment__title {\n  color: var(--aurora-text-primary);\n  font-weight: var(--aurora-weight-ui);\n}\n.aurora-chat-attachment[data-state=\"uploading\"] .aurora-chat-attachment__title,\n.aurora-chat-attachment[data-state=\"processing\"] .aurora-chat-attachment__title {\n  background: linear-gradient(90deg, var(--aurora-text-muted), var(--aurora-text-primary), var(--aurora-text-muted));\n  background-size: 200% 100%;\n  color: transparent;\n  background-clip: text;\n  animation: aurora-shimmer 1.4s ease-in-out infinite;\n}\n.aurora-chat-attachment__description {\n  margin-top: 3px;\n  color: var(--aurora-text-muted);\n  font-size: var(--aurora-type-label);\n}\n.aurora-chat-attachment[data-state=\"error\"] .aurora-chat-attachment__description { color: var(--aurora-error); }\n.aurora-chat-attachment__actions { gap: 3px; }\n.aurora-chat-attachment--vertical .aurora-chat-attachment__actions { position: absolute; top: 8px; right: 8px; }\n.aurora-chat-attachment-group {\n  scrollbar-width: thin;\n  scrollbar-color: var(--aurora-border-strong) transparent;\n}\n\n.aurora-marker {\n  color: var(--aurora-text-muted);\n  font-family: var(--aurora-font-sans);\n  font-size: var(--aurora-type-label);\n  font-weight: var(--aurora-weight-ui);\n  letter-spacing: var(--aurora-letter-label);\n  line-height: var(--aurora-line-dense);\n}\n.aurora-marker a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }\n.aurora-marker a:hover { color: var(--aurora-text-primary); }\n.aurora-marker--separator::before,\n.aurora-marker--separator::after {\n  content: \"\";\n  height: 1px;\n  min-width: 0;\n  flex: 1;\n  background: var(--aurora-border-default);\n}\n.aurora-marker--separator::before { margin-right: 4px; }\n.aurora-marker--separator::after { margin-left: 4px; }\n.aurora-marker--border {\n  padding-bottom: 8px;\n  border-bottom: 1px solid var(--aurora-border-default);\n}\n.aurora-marker__icon {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--axon-orange);\n}\n\n.aurora-message-scroller__viewport {\n  position: relative;\n  scrollbar-gutter: stable;\n  scrollbar-width: thin;\n  scrollbar-color: var(--aurora-border-strong) transparent;\n  contain: content;\n  mask-image: linear-gradient(to bottom, transparent, #000 18px, #000 calc(100% - 18px), transparent);\n}\n.aurora-message-scroller__viewport[data-at-start=\"true\"] {\n  mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 18px), transparent);\n}\n.aurora-message-scroller__viewport[data-at-end=\"true\"] {\n  mask-image: linear-gradient(to bottom, transparent, #000 18px, #000 100%);\n}\n.aurora-message-scroller__viewport[data-at-start=\"true\"][data-at-end=\"true\"] { mask-image: none; }\n.aurora-message-scroller__viewport[data-autoscrolling=\"true\"] { scrollbar-color: transparent transparent; }\n.aurora-message-scroller__button {\n  position: absolute;\n  left: 50%;\n  z-index: 20;\n  transform: translateX(-50%);\n  box-shadow: var(--aurora-shadow-medium), var(--aurora-highlight-medium);\n  transition: opacity 180ms ease, transform 180ms ease;\n}\n.aurora-message-scroller__button[data-direction=\"end\"] { bottom: 12px; }\n.aurora-message-scroller__button[data-direction=\"start\"] { top: 12px; }\n.aurora-message-scroller__button[data-active=\"false\"] {\n  pointer-events: none;\n  opacity: 0;\n}\n.aurora-message-scroller__button[data-direction=\"end\"][data-active=\"false\"] { transform: translate(-50%, 10px) scale(.94); }\n.aurora-message-scroller__button[data-direction=\"start\"][data-active=\"false\"] { transform: translate(-50%, -10px) scale(.94); }\n@media (max-width: 639px) {\n  .aurora-chat-block .aurora-message-scroller__button {\n    left: auto;\n    right: 10px;\n    transform: none;\n  }\n  .aurora-chat-block .aurora-message-scroller__button[data-direction=\"end\"] { bottom: 8px; }\n  .aurora-chat-block .aurora-message-scroller__button[data-direction=\"start\"] { top: 8px; }\n  .aurora-chat-block .aurora-message-scroller__button[data-direction=\"end\"][data-active=\"false\"] { transform: translateY(8px) scale(.94); }\n  .aurora-chat-block .aurora-message-scroller__button[data-direction=\"start\"][data-active=\"false\"] { transform: translateY(-8px) scale(.94); }\n}\n\n  /* ─── chat-sidebar ─── */\n.aurora-chat-sidebar {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  width: 100%;\n  box-sizing: border-box;\n  font-family: var(--font-sans);\n  color: var(--aurora-text-primary);\n  background: var(--aurora-page-bg);\n  border-right: 1px solid var(--aurora-border-default);\n}\n\n/* Brand row */\n.aurora-chat-sidebar__brand {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  padding: 18px 18px 14px;\n  font-family: var(--font-sans);\n  font-size: 20px;\n  font-weight: 800;\n  line-height: 1.1;\n  letter-spacing: -0.01em;\n  color: var(--aurora-text-primary);\n}\n.aurora-chat-sidebar__brand svg {\n  flex: 0 0 auto;\n}\n\n/* New chat + search live in a padded header block */\n.aurora-chat-sidebar__head {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  padding: 0 18px 14px;\n}\n\n/* New chat button */\n.aurora-chat-sidebar__new {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 10px;\n  width: 100%;\n  padding: 14px 16px;\n  border-radius: var(--radius-1, 14px);\n  border: 1px solid color-mix(in srgb, var(--aurora-accent-primary) 42%, transparent);\n  background: linear-gradient(\n    180deg,\n    color-mix(in srgb, var(--aurora-accent-primary) 16%, var(--aurora-panel-strong)) 0%,\n    var(--aurora-panel-strong) 100%\n  );\n  color: var(--aurora-text-primary);\n  font-family: var(--font-sans);\n  font-size: 16px;\n  font-weight: 600;\n  line-height: 1;\n  cursor: pointer;\n  box-shadow: 0 0 0 1px color-mix(in srgb, var(--aurora-accent-primary) 18%, transparent),\n    0 8px 18px color-mix(in srgb, var(--aurora-accent-primary) 14%, transparent);\n  transition: border-color 120ms ease, box-shadow 120ms ease, background 120ms ease;\n}\n.aurora-chat-sidebar__new:hover {\n  border-color: color-mix(in srgb, var(--aurora-accent-primary) 60%, transparent);\n  box-shadow: 0 0 0 1px color-mix(in srgb, var(--aurora-accent-primary) 28%, transparent),\n    0 10px 22px color-mix(in srgb, var(--aurora-accent-primary) 20%, transparent);\n}\n.aurora-chat-sidebar__new:focus-visible {\n  outline: none;\n  border-color: var(--aurora-accent-strong);\n  box-shadow: 0 0 0 3px var(--aurora-focus-ring-strong);\n}\n.aurora-chat-sidebar__new-icon {\n  flex: 0 0 auto;\n  color: var(--aurora-text-primary);\n}\n\n/* Search field */\n.aurora-chat-sidebar__search {\n  position: relative;\n  display: flex;\n  align-items: center;\n}\n.aurora-chat-sidebar__search-icon {\n  position: absolute;\n  left: 16px;\n  top: 50%;\n  transform: translateY(-50%);\n  color: var(--aurora-text-muted);\n  pointer-events: none;\n}\n.aurora-chat-sidebar__search-input {\n  width: 100%;\n  box-sizing: border-box;\n  padding: 12px 14px 12px 44px;\n  border-radius: var(--radius-1, 14px);\n  border: 1px solid var(--aurora-border-default);\n  background: var(--aurora-control-surface);\n  color: var(--aurora-text-primary);\n  font-family: var(--font-sans);\n  font-size: 15px;\n  line-height: 1.2;\n  transition: border-color 120ms ease, box-shadow 120ms ease;\n}\n.aurora-chat-sidebar__search-input::placeholder {\n  color: var(--aurora-text-muted);\n}\n.aurora-chat-sidebar__search-input:focus-visible {\n  outline: none;\n  border-color: var(--aurora-accent-strong);\n  box-shadow: 0 0 0 3px var(--aurora-focus-ring-strong);\n}\n\n/* Thread list */\n.aurora-chat-sidebar__threads {\n  flex: 1 1 auto;\n  min-height: 0;\n  overflow-y: auto;\n  padding: 4px 12px 12px;\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n}\n.aurora-chat-sidebar__bucket {\n  padding: 14px 8px 6px;\n  font-family: var(--font-sans);\n  font-size: 12px;\n  font-weight: 700;\n  line-height: 1;\n  letter-spacing: 0.08em;\n  text-transform: uppercase;\n  color: var(--aurora-text-muted);\n}\n.aurora-chat-sidebar__thread {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  width: 100%;\n  box-sizing: border-box;\n  padding: 11px 12px;\n  border-radius: var(--radius-1, 14px);\n  border: 1px solid transparent;\n  background: transparent;\n  color: var(--aurora-text-muted);\n  font-family: var(--font-sans);\n  font-size: 16px;\n  font-weight: 500;\n  line-height: 1.25;\n  text-align: left;\n  cursor: pointer;\n  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;\n}\n.aurora-chat-sidebar__thread:hover {\n  background: var(--aurora-panel-medium);\n  color: var(--aurora-text-primary);\n}\n.aurora-chat-sidebar__thread:focus-visible {\n  outline: none;\n  border-color: var(--aurora-accent-strong);\n  box-shadow: 0 0 0 3px var(--aurora-focus-ring-strong);\n}\n.aurora-chat-sidebar__thread[data-active=\"true\"] {\n  background: color-mix(in srgb, var(--aurora-accent-primary) 12%, var(--aurora-panel-medium));\n  border-color: color-mix(in srgb, var(--aurora-accent-primary) 48%, transparent);\n  color: var(--aurora-text-primary);\n  font-weight: 700;\n}\n.aurora-chat-sidebar__thread-icon {\n  flex: 0 0 auto;\n  color: var(--aurora-accent-strong);\n}\n.aurora-chat-sidebar__thread[data-active=\"false\"] .aurora-chat-sidebar__thread-icon {\n  color: var(--aurora-text-muted);\n}\n.aurora-chat-sidebar__thread-title {\n  flex: 1 1 auto;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n/* User footer */\n.aurora-chat-sidebar__footer {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  flex: 0 0 auto;\n  padding: 12px 16px;\n  border-top: 1px solid var(--aurora-border-default);\n  background: var(--aurora-page-bg);\n}\n.aurora-chat-sidebar__avatar {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex: 0 0 auto;\n  width: 40px;\n  height: 40px;\n  border-radius: var(--radius-pill, 999px);\n  border: 1px solid color-mix(in srgb, var(--aurora-accent-primary) 48%, transparent);\n  background: color-mix(in srgb, var(--aurora-accent-primary) 14%, var(--aurora-panel-medium));\n  color: var(--aurora-accent-strong);\n  font-family: var(--font-sans);\n  font-size: 13px;\n  font-weight: 700;\n  line-height: 1;\n  letter-spacing: 0.02em;\n}\n.aurora-chat-sidebar__user {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  min-width: 0;\n  flex: 1 1 auto;\n}\n.aurora-chat-sidebar__user-name {\n  font-family: var(--font-sans);\n  font-size: 15px;\n  font-weight: 700;\n  line-height: 1.2;\n  color: var(--aurora-text-primary);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.aurora-chat-sidebar__user-plan {\n  font-family: var(--font-sans);\n  font-size: 13px;\n  font-weight: 500;\n  line-height: 1.2;\n  color: var(--aurora-text-muted);\n}\n.aurora-chat-sidebar__menu {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex: 0 0 auto;\n  width: 28px;\n  height: 28px;\n  padding: 0;\n  border-radius: var(--radius-1, 14px);\n  border: 1px solid transparent;\n  background: transparent;\n  color: var(--aurora-text-muted);\n  cursor: pointer;\n  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;\n}\n.aurora-chat-sidebar__menu:hover {\n  background: var(--aurora-panel-medium);\n  color: var(--aurora-text-primary);\n}\n.aurora-chat-sidebar__menu:focus-visible {\n  outline: none;\n  border-color: var(--aurora-accent-strong);\n  box-shadow: 0 0 0 3px var(--aurora-focus-ring-strong);\n}\n\n  /* ─── checkbox ─── */\n.aurora-checkbox {\n  display: inline-grid; place-items: center; flex-shrink: 0; cursor: pointer;\n  width: 19px; height: 19px; border-radius: 5px; padding: 0;\n  background: var(--aurora-control-surface); border: 1px solid var(--aurora-border-strong);\n  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);\n  transition: background 140ms ease, border-color 140ms ease, box-shadow 140ms ease;\n  position: relative;\n}\n.aurora-checkbox:hover {\n  border-color: color-mix(in srgb, var(--aurora-accent-primary) 40%, var(--aurora-border-strong));\n}\n.aurora-checkbox:focus-visible {\n  outline: none;\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--aurora-accent-primary) 22%, transparent);\n}\n.aurora-checkbox[data-state=\"checked\"],\n.aurora-checkbox[data-state=\"indeterminate\"] {\n  background: color-mix(in srgb, var(--aurora-accent-primary) 30%, var(--aurora-control-surface));\n  border-color: color-mix(in srgb, var(--aurora-accent-primary) 60%, var(--aurora-border-strong));\n  box-shadow: 0 0 0 1px color-mix(in srgb, var(--aurora-accent-primary) 22%, transparent);\n}\n.aurora-checkbox:disabled { opacity: 0.45; cursor: not-allowed; }\n.aurora-checkbox svg {\n  color: var(--aurora-accent-strong); opacity: 0;\n  transition: opacity 120ms ease;\n  position: absolute;\n}\n.aurora-checkbox[data-state=\"checked\"] svg.aurora-checkbox__check { opacity: 1; }\n.aurora-checkbox[data-state=\"indeterminate\"] svg.aurora-checkbox__dash { opacity: 1; }\n\n  /* ─── copy-button ─── */\n.aurora-copy-btn {\n  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 7px;\n  white-space: nowrap; cursor: pointer; user-select: none; font-family: var(--font-sans, Inter, sans-serif);\n  font-weight: 560; border: 1px solid var(--aurora-border-strong); background: var(--aurora-control-surface);\n  color: var(--aurora-text-primary); height: 32px; padding: 0 14px; border-radius: 9px; font-size: 13px;\n  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 1px 2px rgba(0,0,0,0.34), 0 2px 6px rgba(0,0,0,0.16);\n  text-decoration: none; box-sizing: border-box;\n  transition: background 150ms var(--motion-ease-out, ease), border-color 150ms var(--motion-ease-out, ease), box-shadow 200ms var(--motion-ease-out, ease), color 150ms var(--motion-ease-out, ease), transform 80ms ease-out;\n}\n.aurora-copy-btn:hover { background: var(--aurora-hover-bg); border-color: var(--aurora-border-strong); box-shadow: inset 0 1px 0 rgba(255,255,255,0.07), 0 1px 2px rgba(0,0,0,0.4), 0 3px 9px rgba(0,0,0,0.22); }\n.aurora-copy-btn:active { transform: translateY(1px); }\n.aurora-copy-btn:focus-visible { outline: none; box-shadow: inset 0 1px 0 rgba(255,255,255,0.055), 0 0 0 1px color-mix(in srgb, var(--aurora-accent-primary) 45%, transparent), 0 0 0 3px color-mix(in srgb, var(--aurora-accent-primary) 22%, transparent); }\n.aurora-copy-btn:disabled, .aurora-copy-btn[aria-disabled=\"true\"] { opacity: 0.45; cursor: not-allowed; transform: none; }\n\n/* icon-only square when there is no label */\n.aurora-copy-btn--icon { width: 32px; padding: 0; }\n\n/* copied state — brief success glow */\n.aurora-copy-btn--copied {\n  color: var(--aurora-success);\n  border-color: color-mix(in srgb, var(--aurora-success) 46%, var(--aurora-border-strong));\n  background: linear-gradient(180deg, color-mix(in srgb, var(--aurora-success) 12%, transparent), transparent 58%), var(--aurora-control-surface);\n  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 0 0 1px color-mix(in srgb, var(--aurora-success) 22%, transparent);\n}\n.aurora-copy-btn--copied:hover {\n  border-color: color-mix(in srgb, var(--aurora-success) 72%, var(--aurora-border-strong));\n  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 0 0 1px color-mix(in srgb, var(--aurora-success) 42%, transparent);\n}\n\n.aurora-copy-btn__icon { display: inline-flex; align-items: center; flex-shrink: 0; }\n.aurora-copy-btn__icon svg { display: block; }\n\n  /* ─── number-input ─── */\n.aurora-number-input {\n  display: inline-grid;\n  grid-template-columns: 32px minmax(0, 1fr) 32px;\n  align-items: center;\n  gap: 8px;\n  width: 100%;\n}\n/* Center field — lit accent ring, pill rounding, centered value (CD spec). */\n.aurora-number-input__field {\n  width: 100%;\n  height: 32px;\n  padding: 0 12px;\n  text-align: center;\n  border-radius: 999px;\n  border: 1px solid color-mix(in srgb, var(--aurora-accent-primary) 38%, var(--aurora-border-strong));\n  background: var(--aurora-control-surface);\n  color: var(--aurora-text-primary);\n  font-family: var(--font-sans, Inter, sans-serif);\n  font-size: 13px;\n  font-weight: 560;\n  box-shadow:\n    inset 0 1px 0 rgba(255, 255, 255, 0.04),\n    0 0 0 1px color-mix(in srgb, var(--aurora-accent-primary) 18%, transparent);\n  box-sizing: border-box;\n  appearance: textfield;\n  -moz-appearance: textfield;\n  transition:\n    border-color 150ms var(--motion-ease-out, ease),\n    box-shadow 200ms var(--motion-ease-out, ease);\n}\n.aurora-number-input__field::-webkit-outer-spin-button,\n.aurora-number-input__field::-webkit-inner-spin-button {\n  appearance: none;\n  -webkit-appearance: none;\n  margin: 0;\n}\n.aurora-number-input__field:focus,\n.aurora-number-input__field:focus-visible {\n  outline: none;\n  border-color: color-mix(in srgb, var(--aurora-accent-primary) 60%, var(--aurora-border-strong));\n  box-shadow:\n    inset 0 1px 0 rgba(255, 255, 255, 0.055),\n    0 0 0 1px color-mix(in srgb, var(--aurora-accent-primary) 45%, transparent),\n    0 0 0 3px color-mix(in srgb, var(--aurora-accent-primary) 22%, transparent);\n}\n.aurora-number-input__field:disabled {\n  opacity: 0.45;\n  cursor: not-allowed;\n}\n\n  /* ─── operation-icon ─── */\n.aurora-op-icon {\n  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;\n  border-radius: 8px; box-sizing: border-box;\n  background: var(--aurora-op-surface);\n  border: 1px solid var(--aurora-op-border);\n  color: var(--aurora-op-fg);\n  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);\n}\n.aurora-op-icon svg { display: block; }\n\n/* cyan — fetch / read */\n.aurora-op-icon--cyan {\n  --aurora-op-fg: var(--aurora-accent-strong);\n  --aurora-op-surface: color-mix(in srgb, var(--aurora-accent-primary) 13%, var(--aurora-control-surface));\n  --aurora-op-border: color-mix(in srgb, var(--aurora-accent-primary) 34%, transparent);\n}\n/* orange — AI / automation / async jobs */\n.aurora-op-icon--orange {\n  --aurora-op-fg: var(--axon-orange-strong);\n  --aurora-op-surface: color-mix(in srgb, var(--axon-orange) 14%, var(--aurora-control-surface));\n  --aurora-op-border: color-mix(in srgb, var(--axon-orange) 36%, transparent);\n}\n/* rose — secondary expressive override */\n.aurora-op-icon--rose {\n  --aurora-op-fg: var(--aurora-accent-pink-strong);\n  --aurora-op-surface: color-mix(in srgb, var(--aurora-accent-pink) 13%, var(--aurora-control-surface));\n  --aurora-op-border: color-mix(in srgb, var(--aurora-accent-pink) 34%, transparent);\n}\n/* neutral — fallback */\n.aurora-op-icon--neutral {\n  --aurora-op-fg: var(--aurora-text-muted);\n  --aurora-op-surface: color-mix(in srgb, var(--aurora-text-muted) 8%, var(--aurora-control-surface));\n  --aurora-op-border: color-mix(in srgb, var(--aurora-border-default) 70%, transparent);\n}\n\n  /* ─── skeleton ─── */\n    .aurora-shimmer {\n      background: linear-gradient(\n        90deg,\n        var(--aurora-panel-strong) 25%,\n        color-mix(in srgb, var(--aurora-border-strong) 60%, transparent) 37%,\n        var(--aurora-panel-strong) 63%\n      );\n      background-size: 800px 100%;\n      animation: aurora-shimmer 1.4s ease-in-out infinite;\n    }\n\n  /* ─── status-dot ─── */\n    .aurora-status-dot {\n      position: relative;\n      flex: none;\n      width: 9px;\n      height: 9px;\n      border-radius: 9999px;\n      background: var(--status-dot-color);\n      box-shadow:\n        0 0 0 0 color-mix(in srgb, var(--status-dot-color) 36%, transparent),\n        0 0 6px color-mix(in srgb, var(--status-dot-color) 70%, transparent);\n    }\n    .aurora-status-dot--pulse {\n      animation: aurora-status-dot-pulse 1.8s var(--motion-ease-in-out, ease-in-out) infinite;\n    }\n    @media (prefers-reduced-motion: reduce) {\n      .aurora-status-dot--pulse {\n        animation: none;\n      }\n    }\n\n  /* ─── stepper ─── */\n.aurora-stepper {\n  display: flex;\n  align-items: flex-start;\n  justify-content: center;\n  gap: 0;\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  font-family: var(--font-sans, \"Inter\", system-ui, sans-serif);\n}\n.aurora-stepper__step {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 12px;\n  min-width: 96px;\n}\n.aurora-stepper__node {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 48px;\n  height: 48px;\n  border-radius: 9999px;\n  border: 2px solid transparent;\n  font-family: var(--font-sans, \"Inter\", system-ui, sans-serif);\n  font-size: 16px;\n  font-weight: 700;\n  line-height: 1;\n  box-sizing: border-box;\n  transition:\n    background-color var(--motion-fast, 140ms) ease,\n    border-color var(--motion-fast, 140ms) ease,\n    color var(--motion-fast, 140ms) ease;\n}\n.aurora-stepper__step[data-status=\"complete\"] .aurora-stepper__node {\n  background: var(--aurora-accent-primary);\n  border-color: var(--aurora-accent-primary);\n  color: var(--aurora-accent-foreground);\n}\n.aurora-stepper__step[data-status=\"active\"] .aurora-stepper__node {\n  background: color-mix(in srgb, var(--aurora-accent-primary) 18%, transparent);\n  border-color: var(--aurora-accent-primary);\n  color: var(--aurora-accent-primary);\n}\n.aurora-stepper__step[data-status=\"upcoming\"] .aurora-stepper__node {\n  background: transparent;\n  border-color: var(--aurora-border-default);\n  color: var(--aurora-text-muted);\n}\n.aurora-stepper__check {\n  width: 20px;\n  height: 20px;\n}\n.aurora-stepper__text {\n  display: block;\n  text-align: center;\n}\n.aurora-stepper__label {\n  display: block;\n  font-size: 14px;\n  font-weight: 700;\n  line-height: 1.2;\n  text-align: center;\n}\n.aurora-stepper__step[data-status=\"upcoming\"] .aurora-stepper__label {\n  color: var(--aurora-text-muted);\n  font-weight: 600;\n}\n.aurora-stepper__step[data-status=\"complete\"] .aurora-stepper__label,\n.aurora-stepper__step[data-status=\"active\"] .aurora-stepper__label {\n  color: var(--aurora-text-primary);\n}\n.aurora-stepper__description {\n  margin-top: 4px;\n  font-size: 12px;\n  font-weight: 500;\n  line-height: 1.3;\n  text-align: center;\n  color: var(--aurora-text-muted);\n}\n\n  /* ─── switch ─── */\n[data-aurora-switch] {\n  background: var(--aurora-control-surface);\n  border: 1px solid var(--aurora-border-strong);\n  transition: background 160ms var(--motion-ease-out, ease), border-color 160ms var(--motion-ease-out, ease), box-shadow 160ms var(--motion-ease-out, ease);\n}\n[data-aurora-switch]:focus-visible {\n  outline: none;\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--aurora-accent-primary) 22%, transparent);\n}\n[data-aurora-switch][data-state=\"checked\"] {\n  background: color-mix(in srgb, var(--aurora-accent-primary) 32%, var(--aurora-control-surface));\n  border-color: color-mix(in srgb, var(--aurora-accent-primary) 50%, var(--aurora-border-strong));\n  box-shadow: 0 0 0 1px color-mix(in srgb, var(--aurora-accent-primary) 22%, transparent);\n}\n[data-aurora-switch]:disabled { opacity: 0.45; cursor: not-allowed; }\n\n[data-aurora-switch] [data-radix-switch-thumb] {\n  background: var(--aurora-text-muted);\n  transition: transform 160ms var(--motion-ease-out, ease), background 160ms var(--motion-ease-out, ease), box-shadow 160ms var(--motion-ease-out, ease);\n  pointer-events: none;\n}\n[data-aurora-switch][data-state=\"checked\"] [data-radix-switch-thumb] {\n  background: var(--aurora-accent-strong);\n  box-shadow: 0 0 8px var(--aurora-accent-primary);\n}\n\n[data-aurora-switch=\"sm\"]      [data-radix-switch-thumb]                       { transform: translateX(2px);  }\n[data-aurora-switch=\"sm\"][data-state=\"checked\"]      [data-radix-switch-thumb] { transform: translateX(16px); }\n[data-aurora-switch=\"default\"] [data-radix-switch-thumb]                       { transform: translateX(2px);  }\n[data-aurora-switch=\"default\"][data-state=\"checked\"] [data-radix-switch-thumb] { transform: translateX(19px); }\n[data-aurora-switch=\"lg\"]      [data-radix-switch-thumb]                       { transform: translateX(3px);  }\n[data-aurora-switch=\"lg\"][data-state=\"checked\"]      [data-radix-switch-thumb] { transform: translateX(23px); }\n\n@media (prefers-reduced-motion: reduce) {\n  [data-aurora-switch], [data-aurora-switch] [data-radix-switch-thumb] { transition: none; }\n}\n\n  /* ─── toast ─── */\n    .aurora-toast-enter { animation: toast-slide-in  0.28s cubic-bezier(0.16,1,0.3,1) forwards; }\n    .aurora-toast-exit  { animation: aurora-toast-out 0.22s ease-in             forwards; }\n\n  /* ─── color-picker ─── */\n.aurora-cp {\n  width: 100%;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n  padding: 20px;\n  border-radius: var(--radius-3, 16px);\n  background: var(--aurora-panel-strong);\n  border: 1px solid var(--aurora-border-default);\n  font-family: var(--font-sans, \"Inter\", system-ui, sans-serif);\n  color: var(--aurora-text-primary);\n}\n.aurora-cp *,\n.aurora-cp *::before,\n.aurora-cp *::after { box-sizing: border-box; }\n.aurora-cp__label {\n  font-family: var(--font-sans, \"Inter\", system-ui, sans-serif);\n  font-size: 12px;\n  font-weight: 700;\n  letter-spacing: 0.08em;\n  text-transform: uppercase;\n  color: var(--aurora-text-muted);\n  margin: 0;\n}\n.aurora-cp__sv {\n  position: relative;\n  width: 100%;\n  height: 160px;\n  border-radius: var(--radius-2, 12px);\n  border: 1px solid var(--aurora-border-default);\n  cursor: crosshair;\n  touch-action: none;\n  overflow: hidden;\n  outline: none;\n}\n.aurora-cp__sv:focus-visible {\n  box-shadow: 0 0 0 2px color-mix(in srgb, var(--aurora-accent-primary) 60%, transparent);\n}\n.aurora-cp__sv-handle {\n  position: absolute;\n  width: 18px;\n  height: 18px;\n  border-radius: 999px;\n  border: 2px solid #ffffff;\n  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45), 0 1px 4px rgba(0, 0, 0, 0.5);\n  transform: translate(-50%, -50%);\n  pointer-events: none;\n}\n.aurora-cp__hue {\n  position: relative;\n  width: 100%;\n  height: 14px;\n  border-radius: 999px;\n  cursor: pointer;\n  touch-action: none;\n  outline: none;\n  background: linear-gradient(\n    90deg,\n    #ff0000 0%,\n    #ffff00 17%,\n    #00ff00 33%,\n    #00ffff 50%,\n    #0000ff 67%,\n    #ff00ff 83%,\n    #ff0000 100%\n  );\n  border: 1px solid var(--aurora-border-strong);\n}\n.aurora-cp__hue:focus-visible {\n  box-shadow: 0 0 0 2px color-mix(in srgb, var(--aurora-accent-primary) 60%, transparent);\n}\n.aurora-cp__hue-handle {\n  position: absolute;\n  top: 50%;\n  width: 16px;\n  height: 16px;\n  border-radius: 999px;\n  border: 2px solid #ffffff;\n  background: var(--aurora-cp-color, #29b6f6);\n  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45), 0 1px 4px rgba(0, 0, 0, 0.5);\n  transform: translate(-50%, -50%);\n  pointer-events: none;\n}\n.aurora-cp__row {\n  display: flex;\n  align-items: stretch;\n  gap: 12px;\n}\n.aurora-cp__preview {\n  flex: none;\n  width: 64px;\n  height: 56px;\n  border-radius: var(--radius-2, 12px);\n  background: var(--aurora-cp-color, #29b6f6);\n  border: 1px solid color-mix(in srgb, #ffffff 16%, transparent);\n}\n.aurora-cp__input-wrap {\n  flex: 1 1 auto;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  height: 56px;\n  padding: 0 14px;\n  border-radius: var(--radius-2, 12px);\n  background: var(--aurora-control-surface);\n  border: 1px solid var(--aurora-border-strong);\n  transition: border-color 120ms var(--aurora-motion-ease, ease),\n    box-shadow 120ms var(--aurora-motion-ease, ease);\n}\n.aurora-cp__input-wrap:focus-within {\n  border-color: color-mix(in srgb, var(--aurora-accent-primary) 70%, var(--aurora-border-strong));\n  box-shadow: 0 0 0 1px color-mix(in srgb, var(--aurora-accent-primary) 40%, transparent);\n}\n.aurora-cp__hash {\n  font-family: var(--font-mono, \"JetBrains Mono\", monospace);\n  font-size: 16px;\n  font-weight: 600;\n  color: var(--aurora-text-muted);\n  user-select: none;\n}\n.aurora-cp__input {\n  flex: 1 1 auto;\n  min-width: 0;\n  background: transparent;\n  border: none;\n  outline: none;\n  color: var(--aurora-text-primary);\n  font-family: var(--font-mono, \"JetBrains Mono\", monospace);\n  font-size: 16px;\n  font-weight: 600;\n  letter-spacing: 0.04em;\n  text-transform: uppercase;\n  padding: 0;\n}\n.aurora-cp__swatches {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 10px;\n}\n.aurora-cp__swatch {\n  width: 44px;\n  height: 44px;\n  flex: none;\n  border-radius: var(--radius-2, 12px);\n  background: var(--aurora-cp-swatch, #29b6f6);\n  border: 1px solid color-mix(in srgb, #ffffff 14%, transparent);\n  cursor: pointer;\n  padding: 0;\n  outline: none;\n  transition: transform 120ms var(--aurora-motion-ease, ease),\n    box-shadow 120ms var(--aurora-motion-ease, ease);\n}\n.aurora-cp__swatch:hover {\n  transform: translateY(-1px);\n}\n.aurora-cp__swatch:focus-visible {\n  box-shadow: 0 0 0 2px color-mix(in srgb, var(--aurora-accent-primary) 60%, transparent);\n}\n.aurora-cp__swatch[data-selected=\"true\"] {\n  box-shadow:\n    0 0 0 2px var(--aurora-panel-strong),\n    0 0 0 4px var(--aurora-accent-primary);\n}\n\n  /* ─── drawer ─── */\n.aurora-drawer-overlay {\n  position: fixed;\n  inset: 0;\n  z-index: 50;\n  background: var(--aurora-overlay);\n}\n.aurora-drawer-overlay[data-state=\"open\"] {\n  animation: aurora-drawer-overlay-in var(--motion-duration-medium, 240ms) var(--motion-ease-out, cubic-bezier(0.2, 0.8, 0.2, 1));\n}\n.aurora-drawer-overlay[data-state=\"closed\"] {\n  animation: aurora-drawer-overlay-out var(--motion-duration-fast, 160ms) var(--motion-ease-in-out, cubic-bezier(0.4, 0, 0.2, 1));\n}\n\n.aurora-drawer-content {\n  position: fixed;\n  inset-inline: 0;\n  bottom: 0;\n  z-index: 50;\n  display: flex;\n  flex-direction: column;\n  max-height: 82vh;\n  width: 100%;\n  overflow: hidden;\n  border-top: 1px solid var(--aurora-border-strong);\n  border-top-left-radius: var(--aurora-radius-3, 22px);\n  border-top-right-radius: var(--aurora-radius-3, 22px);\n  background: var(--aurora-panel-strong);\n  color: var(--aurora-text-primary);\n  box-shadow: 0 -28px 72px rgba(0, 0, 0, 0.42), var(--aurora-highlight-strong);\n  outline: none;\n}\n.aurora-drawer-content[data-state=\"open\"] {\n  animation: aurora-drawer-in var(--motion-duration-slow, 360ms) var(--motion-ease-out, cubic-bezier(0.2, 0.8, 0.2, 1));\n}\n.aurora-drawer-content[data-state=\"closed\"] {\n  animation: aurora-drawer-out var(--motion-duration-medium, 240ms) var(--motion-ease-in-out, cubic-bezier(0.4, 0, 0.2, 1));\n}\n\n.aurora-drawer-handle-row {\n  display: flex;\n  justify-content: center;\n  padding-top: 12px;\n  padding-bottom: 4px;\n}\n.aurora-drawer-handle {\n  width: 44px;\n  height: 4px;\n  border-radius: 999px;\n  background: color-mix(in srgb, var(--aurora-accent-primary) 60%, transparent);\n}\n\n.aurora-drawer-header {\n  padding: 12px 28px 18px;\n}\n.aurora-drawer-header[data-divider=\"true\"] {\n  border-bottom: 1px solid var(--aurora-border-default);\n}\n.aurora-drawer-title {\n  margin: 0;\n  font-family: var(--font-display, 'Manrope', system-ui, sans-serif);\n  font-size: 22px;\n  font-weight: 700;\n  letter-spacing: -0.01em;\n  color: var(--aurora-text-primary);\n}\n.aurora-drawer-description {\n  margin: 6px 0 0;\n  font-size: 15px;\n  line-height: 1.5;\n  color: var(--aurora-text-muted);\n}\n\n.aurora-drawer-body {\n  min-height: 0;\n  flex: 1;\n  overflow-y: auto;\n  padding: 20px 28px 28px;\n  font-size: 16px;\n  line-height: 1.5;\n  color: var(--aurora-text-primary);\n}\n\n  /* ─── range-slider ─── */\n.aurora-range-slider {\n  --aurora-range-tone: var(--aurora-accent-primary);\n  position: relative;\n  width: 100%;\n  height: 20px;\n  display: flex;\n  align-items: center;\n}\n.aurora-range-slider__track {\n  position: absolute;\n  left: 0;\n  right: 0;\n  height: 6px;\n  border-radius: 999px;\n  background: var(--aurora-control-surface);\n  border: 1px solid var(--aurora-border-strong);\n  box-sizing: border-box;\n}\n.aurora-range-slider__fill {\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  border-radius: 999px;\n  background: var(--aurora-range-tone);\n  left: var(--aurora-range-from, 0%);\n  right: calc(100% - var(--aurora-range-to, 100%));\n}\n.aurora-range-slider__input {\n  position: absolute;\n  left: 0;\n  width: 100%;\n  height: 20px;\n  margin: 0;\n  padding: 0;\n  background: transparent;\n  pointer-events: none;\n  appearance: none;\n  -webkit-appearance: none;\n}\n.aurora-range-slider__input:focus-visible {\n  outline: none;\n}\n.aurora-range-slider__input::-webkit-slider-runnable-track {\n  height: 20px;\n  background: transparent;\n  border: none;\n}\n.aurora-range-slider__input::-moz-range-track {\n  height: 20px;\n  background: transparent;\n  border: none;\n}\n.aurora-range-slider__input::-webkit-slider-thumb {\n  -webkit-appearance: none;\n  appearance: none;\n  pointer-events: auto;\n  width: 18px;\n  height: 18px;\n  margin-top: 1px;\n  border-radius: 999px;\n  background: var(--aurora-panel-strong);\n  border: 2px solid var(--aurora-range-tone);\n  cursor: pointer;\n  box-shadow:\n    0 0 0 1px color-mix(in srgb, var(--aurora-range-tone) 45%, transparent),\n    0 0 12px color-mix(in srgb, var(--aurora-range-tone) 35%, transparent);\n  transition: box-shadow 120ms var(--aurora-motion-ease, ease);\n}\n.aurora-range-slider__input::-moz-range-thumb {\n  pointer-events: auto;\n  width: 18px;\n  height: 18px;\n  border-radius: 999px;\n  background: var(--aurora-panel-strong);\n  border: 2px solid var(--aurora-range-tone);\n  cursor: pointer;\n  box-shadow:\n    0 0 0 1px color-mix(in srgb, var(--aurora-range-tone) 45%, transparent),\n    0 0 12px color-mix(in srgb, var(--aurora-range-tone) 35%, transparent);\n  transition: box-shadow 120ms var(--aurora-motion-ease, ease);\n}\n.aurora-range-slider__input:hover::-webkit-slider-thumb,\n.aurora-range-slider__input:focus-visible::-webkit-slider-thumb {\n  box-shadow:\n    0 0 0 1px color-mix(in srgb, var(--aurora-range-tone) 60%, transparent),\n    0 0 16px color-mix(in srgb, var(--aurora-range-tone) 50%, transparent);\n}\n.aurora-range-slider__input:hover::-moz-range-thumb,\n.aurora-range-slider__input:focus-visible::-moz-range-thumb {\n  box-shadow:\n    0 0 0 1px color-mix(in srgb, var(--aurora-range-tone) 60%, transparent),\n    0 0 16px color-mix(in srgb, var(--aurora-range-tone) 50%, transparent);\n}\n.aurora-range-slider[data-disabled=\"true\"] {\n  opacity: 0.55;\n}\n.aurora-range-slider[data-disabled=\"true\"] .aurora-range-slider__input {\n  cursor: not-allowed;\n}\n.aurora-range-slider[data-disabled=\"true\"] .aurora-range-slider__input::-webkit-slider-thumb {\n  cursor: not-allowed;\n}\n.aurora-range-slider[data-disabled=\"true\"] .aurora-range-slider__input::-moz-range-thumb {\n  cursor: not-allowed;\n}\n\n/* ─── resizable-panels ─── */\n.aurora-resizable-panels__input::-webkit-slider-thumb {\n  -webkit-appearance: none;\n  appearance: none;\n  width: 6px;\n  height: 32px;\n  border-radius: var(--aurora-radius-1);\n  background: var(--aurora-panel-strong);\n  border: 1px solid var(--aurora-accent-primary);\n  cursor: col-resize;\n  box-shadow: 0 0 8px color-mix(in srgb, var(--aurora-accent-primary) 35%, transparent);\n  transition: box-shadow 120ms var(--aurora-motion-ease, ease);\n}\n.aurora-resizable-panels__input::-moz-range-thumb {\n  width: 6px;\n  height: 32px;\n  border-radius: var(--aurora-radius-1);\n  background: var(--aurora-panel-strong);\n  border: 1px solid var(--aurora-accent-primary);\n  cursor: col-resize;\n  box-shadow: 0 0 8px color-mix(in srgb, var(--aurora-accent-primary) 35%, transparent);\n  transition: box-shadow 120ms var(--aurora-motion-ease, ease);\n}\n.aurora-resizable-panels__input:hover::-webkit-slider-thumb,\n.aurora-resizable-panels__input:focus-visible::-webkit-slider-thumb {\n  box-shadow: 0 0 12px color-mix(in srgb, var(--aurora-accent-primary) 50%, transparent);\n}\n.aurora-resizable-panels__input:hover::-moz-range-thumb,\n.aurora-resizable-panels__input:focus-visible::-moz-range-thumb {\n  box-shadow: 0 0 12px color-mix(in srgb, var(--aurora-accent-primary) 50%, transparent);\n}\n\n  /* ─── slider ─── */\n.aurora-slider-cd {\n  --aurora-slider-tone: var(--aurora-accent-primary);\n  height: 20px;\n  width: 100%;\n  cursor: pointer;\n  appearance: none;\n  -webkit-appearance: none;\n  background: transparent;\n}\n.aurora-slider-cd:focus-visible { outline: none; }\n.aurora-slider-cd::-webkit-slider-runnable-track {\n  height: 6px;\n  border-radius: 999px;\n  background:\n    linear-gradient(\n      90deg,\n      var(--aurora-slider-tone) 0%,\n      var(--aurora-slider-tone) var(--aurora-slider-value, 0%),\n      var(--aurora-control-surface) var(--aurora-slider-value, 0%),\n      var(--aurora-control-surface) 100%\n    );\n  border: 1px solid var(--aurora-border-strong);\n}\n.aurora-slider-cd::-webkit-slider-thumb {\n  -webkit-appearance: none;\n  appearance: none;\n  width: 16px;\n  height: 16px;\n  margin-top: -6px;\n  border-radius: 999px;\n  background: var(--aurora-slider-tone);\n  border: 2px solid var(--aurora-panel-strong);\n  box-shadow:\n    0 0 0 1px color-mix(in srgb, var(--aurora-slider-tone) 45%, transparent),\n    0 0 12px color-mix(in srgb, var(--aurora-slider-tone) 35%, transparent);\n  transition: box-shadow 120ms var(--aurora-motion-ease, ease);\n}\n.aurora-slider-cd:hover::-webkit-slider-thumb,\n.aurora-slider-cd:focus-visible::-webkit-slider-thumb {\n  box-shadow:\n    0 0 0 1px color-mix(in srgb, var(--aurora-slider-tone) 60%, transparent),\n    0 0 16px color-mix(in srgb, var(--aurora-slider-tone) 50%, transparent);\n}\n.aurora-slider-cd::-moz-range-track {\n  height: 6px;\n  border-radius: 999px;\n  background: var(--aurora-control-surface);\n  border: 1px solid var(--aurora-border-strong);\n}\n.aurora-slider-cd::-moz-range-progress {\n  height: 6px;\n  border-radius: 999px;\n  background: var(--aurora-slider-tone);\n}\n.aurora-slider-cd::-moz-range-thumb {\n  width: 14px;\n  height: 14px;\n  border-radius: 999px;\n  background: var(--aurora-slider-tone);\n  border: 2px solid var(--aurora-panel-strong);\n  box-shadow:\n    0 0 0 1px color-mix(in srgb, var(--aurora-slider-tone) 45%, transparent),\n    0 0 12px color-mix(in srgb, var(--aurora-slider-tone) 35%, transparent);\n}\n\n  /* ─── action ─── */\n.aurora-action {\n  --aurora-action-size: 32px;\n  --aurora-action-icon: 16px;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n  box-sizing: border-box;\n  min-width: var(--aurora-action-size);\n  height: var(--aurora-action-size);\n  padding: 0;\n  width: var(--aurora-action-size);\n  border-radius: 10px;\n  border: 1px solid var(--aurora-border-default);\n  background: var(--aurora-control-surface);\n  color: var(--aurora-text-muted);\n  font-family: var(--font-sans, Inter, sans-serif);\n  font-size: var(--aurora-type-control, 13px);\n  font-weight: 600;\n  line-height: 1;\n  cursor: pointer;\n  -webkit-appearance: none;\n  appearance: none;\n  outline: none;\n  transition:\n    color var(--motion-duration-fast, 160ms) var(--motion-ease-out, ease),\n    border-color var(--motion-duration-fast, 160ms) var(--motion-ease-out, ease),\n    background var(--motion-duration-fast, 160ms) var(--motion-ease-out, ease),\n    transform var(--motion-duration-fast, 160ms) var(--motion-ease-out, ease);\n}\n.aurora-action svg {\n  width: var(--aurora-action-icon);\n  height: var(--aurora-action-icon);\n  flex: none;\n}\n.aurora-action:hover:not(:disabled) {\n  color: var(--aurora-accent-primary);\n  border-color: color-mix(in srgb, var(--aurora-accent-primary) 30%, var(--aurora-border-default));\n  background: color-mix(in srgb, var(--aurora-accent-primary) 6%, var(--aurora-control-surface));\n}\n.aurora-action:active:not(:disabled) {\n  transform: translateY(0.5px);\n}\n.aurora-action:focus-visible {\n  border-color: var(--aurora-accent-primary);\n  box-shadow: 0 0 0 3px var(--aurora-focus-ring-strong);\n}\n.aurora-action:disabled {\n  cursor: not-allowed;\n  opacity: 0.55;\n  color: var(--aurora-disabled-text);\n}\n\n/* icon + text: borderless ghost row */\n.aurora-action[data-has-label=\"true\"] {\n  width: auto;\n  padding: 0 10px 0 8px;\n  border-color: transparent;\n  background: transparent;\n}\n.aurora-action[data-has-label=\"true\"]:hover:not(:disabled) {\n  border-color: transparent;\n  background: color-mix(in srgb, var(--aurora-accent-primary) 8%, transparent);\n}\n.aurora-action__label {\n  color: var(--aurora-text-primary);\n  white-space: nowrap;\n}\n\n/* pressed toggle — rose/pink-tinted affirmative state */\n.aurora-action[data-pressed=\"true\"] {\n  color: var(--aurora-accent-pink);\n  border-color: var(--aurora-accent-pink-border);\n  background: var(--aurora-accent-pink-surface);\n}\n.aurora-action[data-pressed=\"true\"]:hover:not(:disabled) {\n  color: var(--aurora-accent-pink-strong);\n  border-color: color-mix(in srgb, var(--aurora-accent-pink) 46%, transparent);\n  background: color-mix(in srgb, var(--aurora-accent-pink) 18%, var(--aurora-panel-medium));\n}\n\n/* small */\n.aurora-action[data-size=\"sm\"] {\n  --aurora-action-size: 28px;\n  --aurora-action-icon: 14px;\n  border-radius: 8px;\n  font-size: 12px;\n}\n.aurora-action[data-size=\"sm\"][data-has-label=\"true\"] {\n  padding: 0 8px 0 6px;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .aurora-action { transition: none; }\n  .aurora-action:active:not(:disabled) { transform: none; }\n}\n\n  /* ─── branch ─── */\n.aurora-branch .aurora-branch__content {\n  font-family: var(--font-sans);\n  font-size: 17px;\n  line-height: 1.5;\n  color: var(--aurora-text-primary);\n  padding: 18px 20px 20px;\n}\n.aurora-branch .aurora-branch__toolbar {\n  display: flex;\n  align-items: center;\n  gap: 14px;\n  padding: 12px 14px;\n  border-top: 1px solid var(--aurora-border-default);\n  background: color-mix(in srgb, var(--aurora-accent-primary) 4%, transparent);\n}\n.aurora-branch .aurora-branch__label {\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  font-family: var(--font-display);\n  font-size: 13px;\n  font-weight: 700;\n  letter-spacing: 0.14em;\n  text-transform: uppercase;\n  color: var(--aurora-text-muted);\n  white-space: nowrap;\n}\n.aurora-branch .aurora-branch__dots {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n}\n.aurora-branch .aurora-branch__dot {\n  width: 7px;\n  height: 7px;\n  border-radius: 999px;\n  background: color-mix(in srgb, var(--aurora-accent-primary) 55%, transparent);\n  transition: width var(--motion-duration-fast, 140ms) var(--motion-ease-out, ease),\n    background var(--motion-duration-fast, 140ms) var(--motion-ease-out, ease);\n}\n.aurora-branch .aurora-branch__dot[data-active=\"true\"] {\n  width: 22px;\n  background: var(--aurora-rose-gradient);\n  box-shadow: 0 0 6px color-mix(in srgb, var(--aurora-accent-pink) 50%, transparent);\n}\n.aurora-branch .aurora-branch__meta {\n  font-family: var(--font-mono);\n  font-size: 13px;\n  color: var(--aurora-text-muted);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  min-width: 0;\n}\n.aurora-branch .aurora-branch__counter {\n  font-family: var(--font-mono);\n  font-size: 13px;\n  font-weight: 600;\n  color: var(--aurora-text-primary);\n  white-space: nowrap;\n  font-variant-numeric: tabular-nums;\n}\n.aurora-branch .aurora-branch__spacer { flex: 1 1 auto; min-width: 8px; }\n.aurora-branch .aurora-branch__group { display: inline-flex; align-items: center; gap: 8px; }\n\n  /* ─── checkpoint ─── */\n  .aurora-checkpoint--interactive:hover { border-color: var(--aurora-border-strong); background: var(--aurora-hover-bg); }\n  .aurora-checkpoint--interactive:focus-visible { outline: none; box-shadow: var(--aurora-active-glow), var(--aurora-shadow-medium); }\n\n  /* ─── confirmation ─── */\n.aurora-confirm {\n  display: grid;\n  gap: 16px;\n  padding: 22px;\n  background: var(--aurora-surface-raised);\n  border: 1px solid var(--aurora-border-strong);\n  border-radius: var(--aurora-radius-1);\n  box-shadow: var(--aurora-shadow-medium), var(--aurora-highlight-medium);\n  box-sizing: border-box;\n  color: var(--aurora-text-primary);\n}\n.aurora-confirm__head {\n  display: grid;\n  grid-template-columns: auto minmax(0, 1fr);\n  gap: 16px;\n  align-items: start;\n}\n.aurora-confirm__badge {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 48px;\n  height: 48px;\n  border-radius: 14px;\n  border: 1px solid var(--aurora-border-strong);\n  background: var(--aurora-control-surface);\n  color: var(--aurora-text-muted);\n  flex-shrink: 0;\n}\n.aurora-confirm--danger .aurora-confirm__badge {\n  border-color: color-mix(in srgb, var(--aurora-accent-pink) 38%, var(--aurora-border-strong));\n  background: color-mix(in srgb, var(--aurora-accent-pink) 14%, var(--aurora-control-surface));\n  color: var(--aurora-accent-pink);\n}\n.aurora-confirm__text { display: grid; gap: 4px; min-width: 0; }\n.aurora-confirm__title {\n  margin: 0;\n  font-family: var(--font-sans, Inter, sans-serif);\n  font-weight: 700;\n  font-size: 21px;\n  line-height: 1.2;\n  letter-spacing: -0.01em;\n  color: var(--aurora-text-primary);\n}\n.aurora-confirm__desc {\n  margin: 0;\n  font-family: var(--font-sans, Inter, sans-serif);\n  font-size: 15px;\n  line-height: 1.45;\n  color: var(--aurora-text-muted);\n}\n.aurora-confirm__details {\n  display: grid;\n  gap: 8px;\n  padding: 14px 16px;\n  border-radius: 12px;\n  border: 1px solid var(--aurora-border-strong);\n  background: color-mix(in srgb, var(--aurora-page-bg) 55%, transparent);\n}\n.aurora-confirm__detail {\n  display: grid;\n  grid-template-columns: auto minmax(0, 1fr);\n  gap: 10px;\n  align-items: baseline;\n  font-family: var(--font-mono, monospace);\n  font-size: 14px;\n  line-height: 1.45;\n  color: var(--aurora-text-primary);\n}\n.aurora-confirm__chevron { color: var(--aurora-text-muted); flex-shrink: 0; }\n.aurora-confirm--danger .aurora-confirm__chevron { color: color-mix(in srgb, var(--aurora-accent-pink) 80%, var(--aurora-text-muted)); }\n.aurora-confirm__actions { display: flex; justify-content: flex-end; gap: 12px; }\n\n  /* ─── connection ─── */\n.aurora-connection {\n  display: inline-flex;\n  align-items: center;\n  gap: 0;\n  color: var(--aurora-text-primary);\n  --conn-tone: var(--aurora-text-muted);\n}\n.aurora-connection[data-status=\"ok\"]      { --conn-tone: var(--aurora-success); }\n.aurora-connection[data-status=\"active\"]  { --conn-tone: var(--aurora-accent-primary); }\n.aurora-connection[data-status=\"error\"]   { --conn-tone: var(--aurora-error); }\n.aurora-connection[data-status=\"pending\"] { --conn-tone: var(--aurora-text-muted); }\n\n.aurora-connection__node {\n  display: inline-flex;\n  align-items: center;\n  gap: 10px;\n  padding: 10px 16px;\n  border-radius: 12px;\n  border: 1px solid var(--aurora-border-default);\n  background: var(--aurora-control-surface);\n  box-shadow: var(--aurora-highlight-medium);\n  box-sizing: border-box;\n}\n.aurora-connection__dot {\n  width: 9px;\n  height: 9px;\n  border-radius: 999px;\n  background: var(--conn-tone);\n  flex-shrink: 0;\n}\n.aurora-connection[data-status=\"active\"] .aurora-connection__dot {\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--conn-tone) 26%, transparent);\n}\n.aurora-connection__name {\n  font-family: var(--font-sans, Inter, sans-serif);\n  font-weight: 700;\n  font-size: 17px;\n  line-height: 1.1;\n  letter-spacing: -0.01em;\n  color: var(--aurora-text-primary);\n  white-space: nowrap;\n}\n\n.aurora-connection__edge {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  align-self: center;\n  flex-shrink: 0;\n  width: 96px;\n  height: 2px;\n  margin: 0 8px;\n}\n.aurora-connection__label {\n  position: absolute;\n  bottom: calc(100% + 6px);\n  left: 50%;\n  transform: translateX(-50%);\n  font-family: var(--font-mono, monospace);\n  font-size: 13px;\n  font-weight: 500;\n  line-height: 1;\n  letter-spacing: 0.01em;\n  color: var(--conn-tone);\n  white-space: nowrap;\n}\n.aurora-connection__line {\n  flex: 1 1 auto;\n  height: 2px;\n  border-radius: 999px;\n  background: var(--conn-tone);\n}\n.aurora-connection[data-dashed=\"true\"] .aurora-connection__line {\n  height: 0;\n  border-top: 2px dashed var(--conn-tone);\n  border-radius: 0;\n  background: none;\n}\n.aurora-connection[data-status=\"active\"] .aurora-connection__line {\n  background: none;\n  height: 0;\n  border-top: 2px dashed var(--conn-tone);\n  border-radius: 0;\n}\n.aurora-connection[data-flowing=\"true\"] .aurora-connection__line {\n  background-image: repeating-linear-gradient(\n    90deg,\n    var(--conn-tone) 0,\n    var(--conn-tone) 6px,\n    transparent 6px,\n    transparent 12px\n  );\n  background-size: 12px 2px;\n  background-repeat: repeat-x;\n  background-position: 0 0;\n  border-top: 0;\n  height: 2px;\n  animation: aurora-connection-flow var(--motion-duration-slow, 360ms) linear infinite;\n}\n@media (prefers-reduced-motion: reduce) {\n  .aurora-connection[data-flowing=\"true\"] .aurora-connection__line { animation: none; }\n}\n.aurora-connection__arrow {\n  position: relative;\n  width: 0;\n  height: 0;\n  flex-shrink: 0;\n  border-top: 5px solid transparent;\n  border-bottom: 5px solid transparent;\n}\n.aurora-connection__arrow--end {\n  border-left: 7px solid var(--conn-tone);\n  margin-left: 1px;\n}\n.aurora-connection__arrow--start {\n  border-right: 7px solid var(--conn-tone);\n  margin-right: 1px;\n}\n\n  /* ─── edge ─── */\n.aurora-edge {\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  padding: 7px 14px;\n  border-radius: var(--radius-pill, 999px);\n  border: 1px solid var(--edge-border);\n  background: var(--edge-surface);\n  box-shadow: var(--aurora-highlight-medium);\n  box-sizing: border-box;\n  font-family: var(--font-sans, Inter, sans-serif);\n  font-weight: 600;\n  font-size: 15px;\n  line-height: 1.1;\n  letter-spacing: -0.01em;\n  white-space: nowrap;\n  color: var(--edge-tone);\n  --edge-tone: var(--aurora-text-muted);\n  --edge-border: color-mix(in srgb, var(--edge-tone) 34%, transparent);\n  --edge-surface: color-mix(in srgb, var(--edge-tone) 12%, var(--aurora-panel-medium));\n}\n.aurora-edge[data-tone=\"active\"]  { --edge-tone: var(--aurora-accent-primary); }\n.aurora-edge[data-tone=\"success\"] { --edge-tone: var(--aurora-success); }\n.aurora-edge[data-tone=\"warn\"]    { --edge-tone: var(--aurora-warn); }\n.aurora-edge[data-tone=\"error\"]   { --edge-tone: var(--aurora-error); }\n.aurora-edge[data-tone=\"muted\"]   { --edge-tone: var(--aurora-text-muted); }\n\n.aurora-edge[data-tone=\"active\"] {\n  box-shadow: var(--aurora-highlight-medium),\n    0 0 0 1px color-mix(in srgb, var(--edge-tone) 26%, transparent),\n    0 0 18px color-mix(in srgb, var(--edge-tone) 22%, transparent);\n}\n\n.aurora-edge__dot {\n  width: 8px;\n  height: 8px;\n  border-radius: 999px;\n  background: var(--edge-tone);\n  flex-shrink: 0;\n}\n.aurora-edge[data-tone=\"active\"] .aurora-edge__dot {\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--edge-tone) 26%, transparent);\n}\n\n.aurora-edge__arrow {\n  font-family: var(--font-mono, monospace);\n  font-weight: 500;\n  color: color-mix(in srgb, var(--edge-tone) 78%, transparent);\n  flex-shrink: 0;\n}\n\n.aurora-edge[data-dashed=\"true\"] {\n  border-style: dashed;\n}\n.aurora-edge[data-flowing=\"true\"] {\n  border-style: dashed;\n  background-image: var(--edge-surface),\n    repeating-linear-gradient(\n      90deg,\n      var(--edge-tone) 0,\n      var(--edge-tone) 6px,\n      transparent 6px,\n      transparent 12px\n    );\n  background-position: 0 0, 0 0;\n  background-size: 100% 100%, 12px 1px;\n  background-repeat: no-repeat, repeat-x;\n  animation: aurora-edge-flow var(--motion-duration-slow, 360ms) linear infinite;\n}\n@media (prefers-reduced-motion: reduce) {\n  .aurora-edge[data-flowing=\"true\"] { animation: none; }\n}\n\n  /* ─── loader ─── */\n  .aurora-ai-loader__spinner {\n    border: 2px solid color-mix(in srgb, var(--aurora-loader-tone) 22%, transparent);\n    border-top-color: var(--aurora-loader-tone);\n    border-radius: 9999px;\n    animation: aurora-loader-spin 0.7s linear infinite;\n  }\n  .aurora-ai-loader__dot {\n    background: var(--aurora-loader-tone);\n    border-radius: 9999px;\n    animation: aurora-loader-dot 1.2s ease-in-out infinite;\n  }\n  .aurora-ai-loader__bar {\n    background: var(--aurora-loader-tone);\n    border-radius: 9999px;\n    transform-origin: center bottom;\n    animation: aurora-loader-bar 1s ease-in-out infinite;\n  }\n  .aurora-ai-loader__pulse-frame {\n    border: 1px solid color-mix(in srgb, var(--aurora-loader-tone) 38%, transparent);\n    border-radius: 9999px;\n  }\n  .aurora-ai-loader__pulse-ring {\n    border: 1.5px solid var(--aurora-loader-tone);\n    border-radius: 9999px;\n    animation: aurora-loader-pulse-ring 1.4s ease-out infinite;\n  }\n  .aurora-ai-loader__pulse-core {\n    background: var(--aurora-loader-tone);\n    border-radius: 9999px;\n    animation: aurora-loader-pulse-core 1.4s ease-in-out infinite;\n  }\n  @media (prefers-reduced-motion: reduce) {\n    .aurora-ai-loader__spinner,\n    .aurora-ai-loader__dot,\n    .aurora-ai-loader__bar,\n    .aurora-ai-loader__pulse-ring,\n    .aurora-ai-loader__pulse-core {\n      animation-duration: 0.001ms;\n      animation-iteration-count: 1;\n    }\n  }\n\n  /* ─── mic-selector ─── */\n.aurora-mic {\n  display: grid;\n  gap: 14px;\n  padding: 16px 18px;\n  border: 1px solid var(--aurora-border-strong);\n  border-radius: var(--aurora-radius-2);\n  background: var(--aurora-surface-raised);\n  box-shadow: var(--aurora-shadow-medium), var(--aurora-highlight-medium);\n  box-sizing: border-box;\n}\n.aurora-mic__head {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 12px;\n}\n.aurora-mic__title {\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  color: var(--aurora-accent-primary);\n  font-family: var(--aurora-font-sans, Inter, sans-serif);\n  font-size: var(--aurora-type-control, 14px);\n  font-weight: 680;\n  letter-spacing: var(--aurora-letter-ui, 0);\n  line-height: 1;\n}\n.aurora-mic__mute {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 34px;\n  height: 34px;\n  flex-shrink: 0;\n  border: 1px solid var(--aurora-border-strong);\n  border-radius: 10px;\n  background: var(--aurora-panel-strong);\n  color: var(--aurora-accent-primary);\n  cursor: pointer;\n  box-shadow: inset 0 1px 0 rgba(255,255,255,0.045);\n  transition: background 150ms var(--motion-ease-out, ease),\n    border-color 150ms var(--motion-ease-out, ease),\n    color 150ms var(--motion-ease-out, ease),\n    box-shadow 200ms var(--motion-ease-out, ease);\n}\n.aurora-mic__mute:hover {\n  border-color: color-mix(in srgb, var(--aurora-accent-primary) 55%, var(--aurora-border-strong));\n  background: color-mix(in srgb, var(--aurora-accent-primary) 8%, var(--aurora-panel-strong));\n}\n.aurora-mic__mute:focus-visible {\n  outline: none;\n  box-shadow: inset 0 1px 0 rgba(255,255,255,0.045),\n    0 0 0 1px color-mix(in srgb, var(--aurora-accent-primary) 45%, transparent),\n    0 0 0 3px color-mix(in srgb, var(--aurora-accent-primary) 22%, transparent);\n}\n.aurora-mic__mute[aria-pressed=\"true\"] {\n  color: var(--aurora-error);\n  border-color: color-mix(in srgb, var(--aurora-error) 46%, var(--aurora-border-strong));\n  background: color-mix(in srgb, var(--aurora-error) 10%, var(--aurora-panel-strong));\n}\n.aurora-mic__mute:disabled {\n  opacity: 0.45;\n  cursor: not-allowed;\n  box-shadow: inset 0 1px 0 rgba(255,255,255,0.045);\n}\n\n/* Live level meter — a row of cyan bars, one peaking center dot */\n.aurora-mic__meter {\n  display: flex;\n  align-items: center;\n  gap: 5px;\n  height: 26px;\n  padding: 0 2px;\n}\n.aurora-mic__bar {\n  flex: 1 1 0;\n  min-width: 0;\n  height: 6px;\n  border-radius: 999px;\n  background: var(--aurora-accent-primary);\n  transform-origin: center;\n  animation: aurora-mic-pulse 1.2s var(--motion-ease-in-out, ease-in-out) infinite;\n}\n.aurora-mic__bar--peak {\n  width: 16px;\n  height: 16px;\n  flex: 0 0 16px;\n  border-radius: 999px;\n  box-shadow: 0 0 0 4px color-mix(in srgb, var(--aurora-accent-primary) 16%, transparent);\n}\n.aurora-mic--muted .aurora-mic__bar {\n  background: color-mix(in srgb, var(--aurora-accent-primary) 30%, var(--aurora-border-default));\n  animation: none;\n}\n.aurora-mic--muted .aurora-mic__bar--peak {\n  box-shadow: none;\n}\n@media (prefers-reduced-motion: reduce) {\n  .aurora-mic__bar { animation: none; transform: scaleY(0.8); }\n}\n\n  /* ─── package-info ─── */\n.aurora-pkg {\n  display: grid; gap: 13px;\n  border: 1px solid var(--aurora-border-strong);\n  border-radius: var(--aurora-radius-1);\n  background: var(--aurora-surface-raised);\n  box-shadow: var(--aurora-shadow-medium), var(--aurora-highlight-medium);\n  padding: 16px 18px;\n  box-sizing: border-box;\n}\n.aurora-pkg--compact { gap: 0; padding: 13px 15px; }\n\n.aurora-pkg__head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: start; }\n.aurora-pkg--compact .aurora-pkg__head { gap: 12px; align-items: center; }\n\n.aurora-pkg__tile {\n  display: inline-flex; align-items: center; justify-content: center;\n  width: 60px; height: 60px; border-radius: 12px; flex-shrink: 0;\n  border: 1px solid color-mix(in srgb, var(--axon-orange) 30%, var(--aurora-border-strong));\n  background:\n    linear-gradient(180deg, color-mix(in srgb, var(--axon-orange) 14%, transparent), transparent 62%),\n    var(--aurora-control-surface);\n  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);\n  color: var(--axon-orange);\n}\n.aurora-pkg--compact .aurora-pkg__tile { width: 42px; height: 42px; border-radius: 10px; }\n\n.aurora-pkg__body { min-width: 0; display: grid; gap: 5px; }\n.aurora-pkg--compact .aurora-pkg__body { gap: 3px; }\n\n.aurora-pkg__title { display: flex; align-items: center; gap: 11px; flex-wrap: wrap; min-width: 0; }\n.aurora-pkg__name {\n  font-family: var(--aurora-font-mono); font-weight: 700; font-size: 17px;\n  letter-spacing: -0.01em; color: var(--aurora-text-primary);\n  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%;\n}\n.aurora-pkg--compact .aurora-pkg__name { font-size: 15px; }\n.aurora-pkg__version {\n  font-family: var(--aurora-font-mono); font-weight: 520; font-size: 14px;\n  color: var(--aurora-accent-strong); letter-spacing: 0;\n}\n.aurora-pkg--compact .aurora-pkg__version { font-size: 13px; }\n\n.aurora-pkg__badge {\n  display: inline-flex; align-items: center;\n  font-family: var(--aurora-font-mono); font-weight: 600; font-size: 11px;\n  letter-spacing: 0.06em; text-transform: uppercase;\n  padding: 3px 9px; border-radius: 7px; border: 1px solid transparent;\n  line-height: 1; white-space: nowrap;\n}\n.aurora-pkg__badge--latest {\n  color: var(--aurora-success);\n  background: var(--aurora-success-surface);\n  border-color: var(--aurora-success-border);\n}\n.aurora-pkg__badge--outdated {\n  color: var(--aurora-warn);\n  background: var(--aurora-warn-surface);\n  border-color: var(--aurora-warn-border);\n}\n\n.aurora-pkg__desc {\n  font-family: var(--aurora-font-sans); font-weight: 460; font-size: 14px;\n  color: var(--aurora-text-muted); line-height: 1.4; margin: 0;\n  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;\n}\n.aurora-pkg--compact .aurora-pkg__desc { font-size: 13px; }\n\n.aurora-pkg__divider { height: 1px; border: 0; margin: 0; background: var(--aurora-border-default); }\n\n.aurora-pkg__foot {\n  display: flex; align-items: center; justify-content: space-between; gap: 14px;\n}\n.aurora-pkg__meta {\n  display: flex; align-items: center; gap: 14px; min-width: 0; flex-wrap: wrap;\n  font-family: var(--aurora-font-mono); font-size: 13px; letter-spacing: 0;\n}\n.aurora-pkg__registry { color: var(--axon-orange); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }\n.aurora-pkg__metaitem { color: var(--aurora-text-muted); font-weight: 500; }\n\n  /* ─── panel ─── */\n  .aurora-ael {\n    position: relative;\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n    min-width: 0;\n    border-radius: var(--aurora-radius-2);\n    background: var(--aurora-surface-raised);\n    border: 1px solid var(--aurora-border-strong);\n    box-shadow: var(--aurora-shadow-medium), var(--aurora-highlight-medium);\n    color: var(--aurora-text-primary);\n    font-family: var(--aurora-font-sans);\n    overflow: hidden;\n  }\n  .aurora-ael__head {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    padding: 10px 14px;\n  }\n  .aurora-ael__icon {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n    width: 28px;\n    height: 28px;\n    border-radius: var(--aurora-radius-1);\n    color: var(--aurora-ael-tone, var(--aurora-accent-primary));\n    border: 1px solid color-mix(in srgb, var(--aurora-ael-tone, var(--aurora-accent-primary)) 55%, transparent);\n    background: color-mix(in srgb, var(--aurora-ael-tone, var(--aurora-accent-primary)) 12%, transparent);\n  }\n  .aurora-ael__titles {\n    display: flex;\n    flex-direction: column;\n    gap: 2px;\n    min-width: 0;\n    flex: 1;\n  }\n  .aurora-ael__eyebrow {\n    font-size: 11px;\n    font-weight: 700;\n    letter-spacing: 0.12em;\n    text-transform: uppercase;\n    color: var(--aurora-ael-tone, var(--aurora-accent-primary));\n    line-height: 1.2;\n  }\n  .aurora-ael__title {\n    font-size: 14px;\n    font-weight: 700;\n    letter-spacing: -0.01em;\n    color: var(--aurora-text-primary);\n    line-height: 1.2;\n  }\n  .aurora-ael__actions {\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    flex-shrink: 0;\n    margin-left: auto;\n  }\n  .aurora-ael__btn {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    gap: 6px;\n    border-radius: var(--aurora-radius-1);\n    border: 1px solid var(--aurora-border-strong);\n    background: color-mix(in srgb, var(--aurora-page-bg) 60%, transparent);\n    color: var(--aurora-text-muted);\n    cursor: pointer;\n    font-family: var(--aurora-font-sans);\n    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;\n  }\n  .aurora-ael__btn:hover {\n    color: var(--aurora-text-primary);\n    border-color: var(--aurora-accent-primary);\n  }\n  .aurora-ael__btn:focus-visible {\n    outline: 2px solid var(--aurora-focus-ring-strong);\n    outline-offset: 2px;\n  }\n  .aurora-ael__btn.icon {\n    padding: 0;\n  }\n  .aurora-ael__btn.sm {\n    width: 26px;\n    height: 26px;\n  }\n  .aurora-ael__body {\n    padding: 12px 14px;\n    border-top: 1px solid color-mix(in srgb, var(--aurora-border-strong) 60%, transparent);\n    font-size: 14px;\n    line-height: 1.55;\n    color: var(--aurora-text-primary);\n  }\n  .aurora-ael__foot {\n    padding: 9px 14px;\n    border-top: 1px solid color-mix(in srgb, var(--aurora-border-strong) 60%, transparent);\n    font-size: 12px;\n    color: var(--aurora-text-muted);\n  }\n\n  /* ─── persona ─── */\n.aurora-persona { display: flex; align-items: flex-start; gap: 13px; box-sizing: border-box; color: var(--aurora-text-primary); font-family: var(--font-sans, Inter, sans-serif); }\n.aurora-persona__av { position: relative; flex-shrink: 0; display: grid; place-items: center; font-family: var(--font-display, Manrope, sans-serif); font-weight: 800; letter-spacing: -0.01em; color: var(--aurora-accent-pink); background: color-mix(in srgb, var(--aurora-accent-pink) 16%, var(--aurora-control-surface)); border: 1px solid color-mix(in srgb, var(--aurora-accent-pink) 38%, var(--aurora-border-strong)); }\n.aurora-persona__dot { position: absolute; right: -2px; bottom: -2px; border-radius: 999px; border: 2px solid var(--aurora-panel-strong); }\n.aurora-persona__name { font-family: var(--font-display, Manrope, sans-serif); font-weight: 800; letter-spacing: -0.02em; color: var(--aurora-text-primary); }\n.aurora-persona__role { color: var(--aurora-text-muted); margin-top: 2px; }\n.aurora-persona__aibadge { display: inline-flex; align-items: center; font-family: var(--font-mono, monospace); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--aurora-accent-pink); background: color-mix(in srgb, var(--aurora-accent-pink) 12%, transparent); border: 1px solid color-mix(in srgb, var(--aurora-accent-pink) 30%, transparent); border-radius: 5px; font-size: 10px; padding: 2px 6px; }\n.aurora-persona__status { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono, monospace); font-size: 10.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--aurora-text-muted); }\n.aurora-persona__chip { font-family: var(--font-mono, monospace); font-size: 11px; color: var(--aurora-text-muted); background: var(--aurora-control-surface); border: 1px solid var(--aurora-border-default); border-radius: 6px; padding: 3px 9px; }\n\n/* full card */\n.aurora-persona--default { background: linear-gradient(180deg, var(--aurora-panel-strong-top), var(--aurora-panel-strong)); border: 1px solid color-mix(in srgb, var(--aurora-border-default) 55%, var(--aurora-page-bg)); border-radius: var(--radius-3, 22px); box-shadow: var(--aurora-shadow-strong), var(--aurora-highlight-strong); padding: 16px 18px; flex-direction: column; gap: 12px; }\n.aurora-persona--default .aurora-persona__av { width: 48px; height: 48px; border-radius: 13px; font-size: 16px; }\n.aurora-persona__head { display: flex; align-items: flex-start; gap: 13px; }\n.aurora-persona__titlerow { display: flex; align-items: center; gap: 9px; }\n\n/* compact row */\n.aurora-persona--compact { align-items: center; gap: 11px; background: var(--aurora-control-surface); border: 1px solid var(--aurora-border-default); border-radius: var(--radius-2, 18px); padding: 11px 14px; transition: border-color 150ms var(--motion-ease-out, ease), background 150ms var(--motion-ease-out, ease); }\n.aurora-persona--compact.aurora-persona--selected { border-color: color-mix(in srgb, var(--aurora-accent-pink) 60%, var(--aurora-border-strong)); background: color-mix(in srgb, var(--aurora-accent-pink) 8%, var(--aurora-control-surface)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--aurora-accent-pink) 24%, transparent); }\n.aurora-persona--compact .aurora-persona__av { width: 38px; height: 38px; border-radius: 11px; font-size: 13px; }\n.aurora-persona--compact .aurora-persona__name { font-size: 14px; }\n.aurora-persona--clickable { cursor: pointer; }\n\n  /* ─── response ─── */\n  .aurora-response-block { animation: aurora-response-fade-in var(--aurora-motion, 240ms) ease-out both; }\n  .aurora-response-caret {\n    display: inline-block;\n    width: 0.55em;\n    height: 1.05em;\n    margin-left: 2px;\n    vertical-align: text-bottom;\n    border-radius: 1px;\n    background: var(--aurora-accent-primary);\n    animation: aurora-response-caret 1s step-end infinite;\n  }\n\n  /* ─── shimmer ─── */\n    .aurora-ai-shimmer-bar {\n      background: linear-gradient(\n        90deg,\n        var(--aurora-panel-strong) 25%,\n        color-mix(in srgb, var(--aurora-border-strong) 60%, transparent) 37%,\n        var(--aurora-panel-strong) 63%\n      );\n      background-size: 800px 100%;\n      animation: aurora-shimmer 1.4s ease-in-out infinite;\n    }\n\n  /* ─── speech-input ─── */\n  @media (prefers-reduced-motion: reduce) {\n    .aurora-speech-bar { animation: none !important; }\n    .aurora-speech-dot { animation: none !important; }\n  }\n\n  /* ─── code-editor ─── */\n.aurora-squiggle {\n  text-decoration: underline wavy var(--aurora-error) 1px;\n  text-underline-offset: 2px;\n}\n.aurora-warn-squiggle {\n  text-decoration: underline wavy var(--aurora-warn) 1px;\n  text-underline-offset: 2px;\n}\n\n  /* ─── file-picker ─── */\n.aurora-file-picker-search:focus-within {\n  border-color: var(--aurora-border-strong);\n  box-shadow: 0 0 0 2px color-mix(in srgb, var(--aurora-accent-primary) 14%, transparent);\n}\n\n@media (max-width: 640px) {\n  .aurora-file-picker-dialog {\n    width: calc(100vw - 24px) !important;\n    height: calc(100vh - 48px) !important;\n    max-height: calc(100vh - 48px) !important;\n  }\n\n  .aurora-file-picker-body {\n    flex-direction: column !important;\n  }\n\n  .aurora-file-picker-sidebar {\n    width: 100% !important;\n    max-height: 126px !important;\n    border-right: 0 !important;\n    border-bottom: 1px solid var(--aurora-border-default) !important;\n    flex-direction: row !important;\n    flex-wrap: wrap !important;\n    align-items: center !important;\n    gap: 6px !important;\n    overflow-x: hidden !important;\n    overflow-y: auto !important;\n  }\n\n  .aurora-file-picker-sidebar-title,\n  .aurora-file-picker-upload-spacer {\n    display: none !important;\n  }\n\n  .aurora-file-picker-sidebar button {\n    flex: 1 1 calc(33.333% - 6px) !important;\n    justify-content: flex-start !important;\n    min-width: 0 !important;\n  }\n\n  .aurora-file-picker-main {\n    min-height: 0 !important;\n  }\n\n  .aurora-file-picker-toolbar {\n    flex-wrap: wrap !important;\n    align-items: stretch !important;\n  }\n\n  .aurora-file-picker-search {\n    flex-basis: 100% !important;\n  }\n\n  .aurora-file-picker-filters {\n    overflow-x: auto !important;\n    max-width: 100% !important;\n  }\n\n  .aurora-file-picker-footer {\n    align-items: stretch !important;\n    flex-direction: column !important;\n  }\n\n  .aurora-file-picker-actions {\n    width: 100% !important;\n  }\n\n  .aurora-file-picker-actions button {\n    flex: 1 !important;\n  }\n}\n\n  /* ─── file-tree ─── */\n.aurora-tree-item:focus-visible {\n  outline: 2px solid var(--aurora-focus-ring-strong);\n  outline-offset: -1px;\n}\n\n  /* ─── command-palette ─── */\n.aurora-cmd-search-row:focus-within {\n  border-bottom-color: var(--aurora-border-strong);\n  box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--aurora-accent-primary) 28%, transparent);\n}\n\n  /* ─── web-preview ─── */\n.aurora-shimmer-block {\n  background: linear-gradient(\n    90deg,\n    var(--aurora-panel-medium) 25%,\n    var(--aurora-hover-bg) 50%,\n    var(--aurora-panel-medium) 75%\n  );\n  background-size: 800px 100%;\n  animation: aurora-shimmer-web 1.4s ease-in-out infinite;\n  border-radius: 6px;\n}\n\n  /* ─── actions ─── */\n.aurora-actions {\n  display: flex;\n  align-items: center;\n  flex-wrap: wrap;\n  gap: 8px;\n  min-width: 0;\n}\n.aurora-action {\n  box-sizing: border-box;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n  flex: none;\n  margin: 0;\n  font-family: var(--font-sans, Inter, sans-serif);\n  font-size: 13px;\n  font-weight: 500;\n  line-height: 1;\n  color: var(--aurora-text-muted);\n  background: none;\n  border: 1px solid transparent;\n  cursor: pointer;\n  -webkit-appearance: none;\n  appearance: none;\n  transition:\n    color var(--motion-fast, 140ms) ease,\n    background var(--motion-fast, 140ms) ease,\n    border-color var(--motion-fast, 140ms) ease,\n    box-shadow var(--motion-fast, 140ms) ease;\n}\n.aurora-action > svg {\n  flex: none;\n  display: block;\n}\n/* icon-only: framed square */\n.aurora-action[data-shape=\"icon\"] {\n  width: 38px;\n  height: 38px;\n  padding: 0;\n  border-radius: 12px;\n  border-color: var(--aurora-border-strong);\n  background: linear-gradient(\n    180deg,\n    var(--aurora-panel-strong-top),\n    var(--aurora-panel-strong)\n  );\n  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);\n}\n.aurora-action[data-shape=\"icon\"]:hover:not(:disabled) {\n  color: var(--aurora-text-primary);\n  background: var(--aurora-hover-bg);\n}\n/* icon + text: ghost */\n.aurora-action[data-shape=\"text\"] {\n  height: 34px;\n  padding: 0 4px;\n  border-radius: 8px;\n  background: none;\n}\n.aurora-action[data-shape=\"text\"]:hover:not(:disabled) {\n  color: var(--aurora-text-primary);\n}\n/* pressed / toggled */\n.aurora-action[data-pressed=\"true\"] {\n  color: var(--aurora-text-primary);\n  border-color: color-mix(\n    in srgb,\n    var(--aurora-accent-primary) 38%,\n    var(--aurora-border-strong)\n  );\n  background: color-mix(\n    in srgb,\n    var(--aurora-accent-primary) 12%,\n    var(--aurora-panel-strong)\n  );\n}\n.aurora-action:focus-visible {\n  outline: none;\n  box-shadow:\n    inset 0 1px 0 rgba(255, 255, 255, 0.05),\n    0 0 0 1px color-mix(in srgb, var(--aurora-accent-primary) 45%, transparent),\n    0 0 0 3px color-mix(in srgb, var(--aurora-accent-primary) 22%, transparent);\n}\n.aurora-action:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n  /* ─── button-group ─── */\n  .aurora-btn-group-item {\n    display: inline-flex; align-items: center; justify-content: center; gap: 6px;\n    height: 28px; padding: 0 14px; border: none; background: none;\n    color: var(--aurora-text-muted);\n    font: 560 13px var(--aurora-font-sans, Inter, sans-serif);\n    border-radius: 7px; white-space: nowrap; cursor: pointer; user-select: none;\n    transition: color 140ms ease, background 140ms ease, box-shadow 140ms ease;\n  }\n  .aurora-btn-group-item > svg { flex: none; display: block; }\n  .aurora-btn-group-item:hover:not([aria-pressed=\"true\"]):not(:disabled) {\n    color: var(--aurora-text-primary);\n    background: color-mix(in srgb, var(--aurora-control-surface) 60%, transparent);\n  }\n  .aurora-btn-group-item[aria-pressed=\"true\"] {\n    color: var(--aurora-accent-strong);\n    background: color-mix(in srgb, var(--aurora-accent-primary) 14%, var(--aurora-control-surface));\n    box-shadow: 0 0 0 1px color-mix(in srgb, var(--aurora-accent-primary) 28%, transparent);\n  }\n  .aurora-btn-group-item:focus-visible {\n    outline: none;\n    box-shadow: 0 0 0 2px var(--aurora-focus-ring, color-mix(in srgb, var(--aurora-accent-primary) 55%, transparent));\n  }\n  .aurora-btn-group-item:disabled { opacity: 0.45; cursor: not-allowed; }\n  /* Vertical groups: items stretch and left-align. */\n  .aurora-btn-group[data-orientation=\"vertical\"] .aurora-btn-group-item {\n    width: 100%; justify-content: flex-start;\n  }\n}\n\n/* Global keyframes (deduped; layers don't meaningfully scope @keyframes). */\n/* Keyframes stay global (layers don't meaningfully scope @keyframes). */\n@keyframes aurora-btn-pulse {\n  0%, 100% { box-shadow: inset 0 1px 0 rgba(255,255,255,0.055), 0 0 0 1px color-mix(in srgb, var(--aurora-accent-primary) 30%, transparent); }\n  50% { box-shadow: inset 0 1px 0 rgba(255,255,255,0.055), 0 0 0 1px color-mix(in srgb, var(--aurora-accent-primary) 60%, transparent); }\n}\n\n@keyframes aurora-btn-spin { to { transform: rotate(360deg); } }\n\n@keyframes aurora-beacon-ping {\n  0%   { transform: scale(1);    opacity: 0.6; }\n  70%  { transform: scale(1.55); opacity: 0;   }\n  100% { transform: scale(1.55); opacity: 0;   }\n}\n\n@keyframes aurora-beacon-ring {\n  0%, 100% { opacity: 0.7; }\n  50%       { opacity: 1;   }\n}\n\n@keyframes aurora-progress-shimmer {\n  0%   { transform: translateX(-100%); }\n  100% { transform: translateX(400%); }\n}\n\n@keyframes aurora-progress-indeterminate {\n  0%   { left: -35%; right: 100%; }\n  60%  { left: 100%; right: -90%; }\n  100% { left: 100%; right: -90%; }\n}\n\n@keyframes aurora-shimmer {\n      0%   { background-position: -800px 0; }\n      100% { background-position:  800px 0; }\n    }\n\n@keyframes aurora-status-dot-pulse {\n      0%, 100% {\n        box-shadow:\n          0 0 0 0 color-mix(in srgb, var(--status-dot-color) 42%, transparent),\n          0 0 6px color-mix(in srgb, var(--status-dot-color) 70%, transparent);\n      }\n      50% {\n        box-shadow:\n          0 0 0 5px transparent,\n          0 0 9px color-mix(in srgb, var(--status-dot-color) 85%, transparent);\n      }\n    }\n\n@keyframes toast-slide-in {\n      from { transform: translateX(28px); opacity: 0; }\n      to   { transform: translateX(0);    opacity: 1; }\n    }\n\n@keyframes aurora-toast-out {\n      from { transform: translateX(0);    opacity: 1; max-height: 120px; margin-bottom: 10px; }\n      to   { transform: translateX(28px); opacity: 0; max-height: 0;    margin-bottom: 0; }\n    }\n\n@keyframes aurora-drawer-overlay-in { from { opacity: 0 } to { opacity: 1 } }\n\n@keyframes aurora-drawer-overlay-out { from { opacity: 1 } to { opacity: 0 } }\n\n@keyframes aurora-drawer-in { from { transform: translateY(100%) } to { transform: translateY(0) } }\n\n@keyframes aurora-drawer-out { from { transform: translateY(0) } to { transform: translateY(100%) } }\n\n@keyframes aurora-blink-cursor {\n  0%, 100% { opacity: 1; }\n  50%       { opacity: 0; }\n}\n\n@keyframes aurora-spin {\n  to { transform: rotate(360deg); }\n}\n\n@keyframes aurora-auq-fadein {\n  from { opacity: 0; transform: translateY(4px); }\n  to   { opacity: 1; transform: translateY(0); }\n}\n\n@keyframes aurora-cot-spin { to { transform: rotate(360deg); } }\n\n@keyframes aurora-cot-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }\n\n@keyframes aurora-cot-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }\n\n@keyframes aurora-connection-flow {\n  to { background-position: 12px 0; }\n}\n\n@keyframes aurora-edge-flow {\n  to { background-position: 0 0, 12px 0; }\n}\n\n@keyframes aurora-loader-spin {\n  to { transform: rotate(360deg); }\n}\n\n@keyframes aurora-loader-dot {\n  0%, 80%, 100% { opacity: 0.25; transform: scale(0.7); }\n  40%           { opacity: 1;    transform: scale(1); }\n}\n\n@keyframes aurora-loader-bar {\n  0%, 100% { transform: scaleY(0.35); }\n  50%      { transform: scaleY(1); }\n}\n\n@keyframes aurora-loader-pulse-ring {\n  0%   { transform: scale(0.45); opacity: 0.9; }\n  100% { transform: scale(1);    opacity: 0; }\n}\n\n@keyframes aurora-loader-pulse-core {\n  0%, 100% { opacity: 1;    transform: scale(1); }\n  50%      { opacity: 0.55; transform: scale(0.82); }\n}\n\n@keyframes aurora-msg-caret {\n  0%, 45%  { opacity: 1; }\n  55%, 100% { opacity: 0; }\n}\n\n@keyframes aurora-mic-pulse {\n  0%, 100% { transform: scaleY(0.55); opacity: 0.7; }\n  50% { transform: scaleY(1); opacity: 1; }\n}\n\n@keyframes aurora-plan-spin { to { transform: rotate(360deg); } }\n\n@keyframes aurora-plan-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }\n\n@keyframes aurora-reasoning-blink {\n    0%, 100% { opacity: 1; }\n    50% { opacity: 0; }\n  }\n\n@keyframes aurora-response-fade-in {\n  from { opacity: 0; transform: translateY(2px); }\n  to { opacity: 1; transform: translateY(0); }\n}\n\n@keyframes aurora-response-caret {\n  0%, 100% { opacity: 1; }\n  50% { opacity: 0; }\n}\n\n@keyframes aurora-speech-meter {\n    0%, 100% { transform: scaleY(0.42); }\n    50%      { transform: scaleY(1); }\n  }\n\n@keyframes aurora-speech-dot {\n    0%, 100% { opacity: 1; transform: scale(1); }\n    50%      { opacity: 0.45; transform: scale(0.82); }\n  }\n\n@keyframes aurora-tool-spin { to { transform: rotate(360deg); } }\n\n@keyframes aurora-border-pulse {\n    0%, 100% { opacity: 1; }\n    50% { opacity: 0.4; }\n  }\n\n@keyframes aurora-blink {\n    0%, 100% { opacity: 1; }\n    50% { opacity: 0; }\n  }\n\n@keyframes aurora-thinking-shimmer {\n    0% { background-position: 200% 0; }\n    100% { background-position: -200% 0; }\n  }\n\n@keyframes aurora-check-pop {\n  0% { transform: scale(0.5); opacity: 0; }\n  100% { transform: scale(1); opacity: 1; }\n}\n\n@keyframes aurora-check-draw {\n  from { stroke-dashoffset: 30; }\n  to   { stroke-dashoffset: 0; }\n}\n\n@keyframes aurora-pd-in {\n  from { opacity: 0; transform: translateY(-6px) scale(0.97); }\n  to   { opacity: 1; transform: translateY(0) scale(1); }\n}\n\n@keyframes aurora-bar-bounce {\n  0%, 100% { transform: scaleY(0.35); }\n  50%       { transform: scaleY(1); }\n}\n\n@keyframes aurora-error-squiggle {}\n\n@keyframes aurora-fp-in {\n  from { opacity: 0; transform: translate(-50%, calc(-50% - 12px)); }\n  to   { opacity: 1; transform: translate(-50%, -50%); }\n}\n\n@keyframes aurora-cursor-blink {\n          0%, 100% { opacity: 0.7; }\n          50% { opacity: 0; }\n        }\n\n@keyframes aurora-cmd-in {\n  from { opacity: 0; transform: translate(-50%, calc(-50% - 8px)); }\n  to   { opacity: 1; transform: translate(-50%, -50%); }\n}\n\n@keyframes aurora-backdrop-in {\n  from { opacity: 0; }\n  to   { opacity: 1; }\n}\n\n@keyframes aurora-share-in {\n  from { opacity: 0; transform: translate(-50%, calc(-50% - 10px)); }\n  to   { opacity: 1; transform: translate(-50%, -50%); }\n}\n\n@keyframes aurora-shimmer-web {\n  0%   { background-position: -400px 0; }\n  100% { background-position:  400px 0; }\n}\n\n@keyframes aurora-context-shimmer{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}\n",
+      "content": "/* Aurora Design System — component base styles.\n\n   Every rule here lives in `@layer aurora-components`. Tailwind's `utilities`\n   layer is ordered AFTER it (see app/globals.css), so utility classes win over\n   these base rules — the shadcn-idiomatic override behavior.\n\n   Replaces the old per-component runtime <style> injection (ensureCSS/injectOnce):\n   that injected UNLAYERED CSS at runtime, which beat Tailwind utilities (cascade\n   bug), was not SSR'd (FOUC), and tripped strict CSP. Build-time + layered + SSR'd\n   fixes all three. Generated by scratchpad/assemble.mjs from per-component parts.\n   The consuming app must declare the layer order:\n     @layer theme, base, components, aurora-components, utilities; */\n\n@layer aurora-components {\n  /* ─── button ─── */\n/* ─── button ──────────────────────────────────────────────────────────── */\n  .aurora-btn {\n    position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 7px;\n    white-space: nowrap; cursor: pointer; user-select: none; font-family: var(--font-sans, Inter, sans-serif);\n    font-weight: 560; border: 1px solid var(--aurora-border-strong); background: var(--aurora-control-surface);\n    color: var(--aurora-text-primary); height: 32px; padding: 0 14px; border-radius: 9px; font-size: 13px;\n    box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 1px 2px rgba(0,0,0,0.34), 0 2px 6px rgba(0,0,0,0.16); text-decoration: none; box-sizing: border-box;\n    transition: background 150ms var(--motion-ease-out, ease), border-color 150ms var(--motion-ease-out, ease), box-shadow 200ms var(--motion-ease-out, ease), color 150ms var(--motion-ease-out, ease), transform 80ms ease-out;\n  }\n  .aurora-btn:active { transform: translateY(1px); }\n  .aurora-btn:focus-visible { outline: none; box-shadow: inset 0 1px 0 rgba(255,255,255,0.055), 0 0 0 1px color-mix(in srgb, var(--aurora-accent-primary) 45%, transparent), 0 0 0 3px color-mix(in srgb, var(--aurora-accent-primary) 22%, transparent); }\n  .aurora-btn:disabled, .aurora-btn[aria-disabled=\"true\"] { opacity: 0.45; cursor: not-allowed; transform: none; }\n  .aurora-btn--block { width: 100%; }\n  .aurora-btn--pill { border-radius: 999px; }\n  .aurora-btn--sm { height: 27px; padding: 0 11px; border-radius: 7px; font-size: 12px; gap: 6px; }\n  .aurora-btn--lg { height: 40px; padding: 0 20px; border-radius: 11px; font-size: 14px; gap: 8px; }\n  .aurora-btn--icon { width: 32px; padding: 0; }\n  .aurora-btn--sm.aurora-btn--icon { width: 27px; }\n  .aurora-btn--lg.aurora-btn--icon { width: 40px; }\n\n  .aurora-btn--aurora {\n    border-color: color-mix(in srgb, var(--aurora-accent-primary) 42%, var(--aurora-border-strong));\n    background: linear-gradient(180deg, color-mix(in srgb, var(--aurora-accent-primary) 11%, transparent), transparent 58%), var(--aurora-control-surface);\n    box-shadow: inset 0 1px 0 rgba(255,255,255,0.055), 0 1px 2px rgba(0,0,0,0.34), 0 2px 6px rgba(0,0,0,0.16), 0 0 0 1px color-mix(in srgb, var(--aurora-accent-primary) 22%, transparent);\n  }\n  .aurora-btn--aurora:hover { border-color: color-mix(in srgb, var(--aurora-accent-primary) 70%, var(--aurora-border-strong)); box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 1px 2px rgba(0,0,0,0.4), 0 3px 9px rgba(0,0,0,0.22), 0 0 0 1px color-mix(in srgb, var(--aurora-accent-primary) 38%, transparent); }\n\n  .aurora-btn--neutral:hover { background: var(--aurora-hover-bg); border-color: var(--aurora-border-strong); box-shadow: inset 0 1px 0 rgba(255,255,255,0.07), 0 1px 2px rgba(0,0,0,0.4), 0 3px 9px rgba(0,0,0,0.22); }\n\n  .aurora-btn--rose {\n    border-color: color-mix(in srgb, var(--aurora-accent-pink) 52%, var(--aurora-border-strong));\n    background: linear-gradient(180deg, color-mix(in srgb, var(--aurora-accent-pink) 14%, transparent), transparent 58%), var(--aurora-control-surface);\n    box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 0 0 1px color-mix(in srgb, var(--aurora-accent-pink) 24%, transparent);\n  }\n  .aurora-btn--rose:hover { border-color: color-mix(in srgb, var(--aurora-accent-pink) 76%, var(--aurora-border-strong)); box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 0 0 1px color-mix(in srgb, var(--aurora-accent-pink) 40%, transparent); }\n\n  .aurora-btn--success {\n    color: var(--aurora-success); border-color: color-mix(in srgb, var(--aurora-success) 46%, var(--aurora-border-strong));\n    background: linear-gradient(180deg, color-mix(in srgb, var(--aurora-success) 12%, transparent), transparent 58%), var(--aurora-control-surface);\n    box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 0 0 1px color-mix(in srgb, var(--aurora-success) 22%, transparent);\n  }\n  .aurora-btn--success:hover { border-color: color-mix(in srgb, var(--aurora-success) 72%, var(--aurora-border-strong)); box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 0 0 1px color-mix(in srgb, var(--aurora-success) 42%, transparent); }\n\n  .aurora-btn--warn {\n    color: var(--aurora-warn); border-color: color-mix(in srgb, var(--aurora-warn) 48%, var(--aurora-border-strong));\n    background: linear-gradient(180deg, color-mix(in srgb, var(--aurora-warn) 12%, transparent), transparent 58%), var(--aurora-control-surface);\n    box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 0 0 1px color-mix(in srgb, var(--aurora-warn) 22%, transparent);\n  }\n  .aurora-btn--warn:hover { border-color: color-mix(in srgb, var(--aurora-warn) 74%, var(--aurora-border-strong)); box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 0 0 1px color-mix(in srgb, var(--aurora-warn) 42%, transparent); }\n\n  .aurora-btn--ghost { border-color: transparent; background: transparent; box-shadow: none; color: var(--aurora-text-muted); }\n  .aurora-btn--ghost:hover { color: var(--aurora-text-primary); background: var(--aurora-hover-bg); }\n\n  /* plain — structural escape hatch: a bare clickable button with no Aurora fill */\n  .aurora-btn--plain { border-color: transparent; background: transparent; box-shadow: none; color: inherit; }\n  .aurora-btn--plain:hover { background: transparent; }\n\n  /* unstyled — strip the base dimensions/typography (pairs with --plain for a raw wrapper) */\n  .aurora-btn--unstyled { height: auto; min-height: 0; padding: 0; border: 0; border-radius: 0; font-size: inherit; font-weight: inherit; gap: 0; box-shadow: none; }\n\n  /* filled — the one flooded hero action (flooded fills are allowed; keep to one per surface) */\n  .aurora-btn--filled.aurora-btn--rose { background: var(--aurora-accent-pink); border-color: var(--aurora-accent-pink-deep); color: #2a0f18; box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), 0 0 0 1px color-mix(in srgb, var(--aurora-accent-pink-deep) 50%, transparent); }\n  .aurora-btn--filled.aurora-btn--rose:hover { background: var(--aurora-accent-pink-strong); border-color: var(--aurora-accent-pink-deep); }\n  .aurora-btn--filled.aurora-btn--aurora { background: var(--aurora-accent-primary); border-color: var(--aurora-accent-deep); color: #06131c; }\n  .aurora-btn--filled.aurora-btn--aurora:hover { background: color-mix(in srgb, var(--aurora-accent-primary) 86%, #fff); }\n  .aurora-btn--filled.aurora-btn--success { background: var(--aurora-success); border-color: color-mix(in srgb, var(--aurora-success) 60%, #000); color: #06201b; }\n  .aurora-btn--filled.aurora-btn--warn { background: var(--aurora-warn); border-color: color-mix(in srgb, var(--aurora-warn) 60%, #000); color: #211803; }\n\n  .aurora-btn--destructive {\n    color: var(--aurora-error); border-color: color-mix(in srgb, var(--aurora-error) 42%, var(--aurora-border-strong));\n    background: linear-gradient(180deg, color-mix(in srgb, var(--aurora-error) 9%, transparent), transparent 58%), var(--aurora-control-surface);\n  }\n  .aurora-btn--destructive:hover { border-color: color-mix(in srgb, var(--aurora-error) 62%, var(--aurora-border-strong)); }\n\n  .aurora-btn--pulse:not(:disabled):not([aria-disabled=\"true\"]) { animation: aurora-btn-pulse 2.4s ease-in-out infinite; }\n  .aurora-btn--loading { cursor: progress; }\n  .aurora-btn__spinner { width: 1em; height: 1em; border-radius: 50%; border: 2px solid currentColor; border-top-color: transparent; animation: aurora-btn-spin 0.62s linear infinite; flex-shrink: 0; }\n  .aurora-btn__icon { display: inline-flex; align-items: center; flex-shrink: 0; }\n\n  @media (prefers-reduced-motion: reduce) {\n    .aurora-btn--pulse { animation: none; }\n    .aurora-btn__spinner { animation-duration: 1.4s; }\n  }\n\n  /* ─── alert-dialog ─── */\n.aurora-alert {\n  display: grid;\n  grid-template-columns: auto 1fr;\n  gap: 16px;\n  padding: 28px;\n  border-radius: var(--aurora-radius-3);\n  border: 1px solid color-mix(in srgb, var(--aurora-border-default) 55%, var(--aurora-page-bg));\n  background: linear-gradient(180deg, var(--aurora-panel-strong-top), var(--aurora-panel-strong));\n  box-shadow: var(--aurora-shadow-strong), var(--aurora-highlight-strong);\n  box-sizing: border-box;\n}\n.aurora-alert__icon {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 44px;\n  height: 44px;\n  border-radius: 12px;\n  border: 1px solid var(--aurora-accent-pink-border);\n  background: var(--aurora-accent-pink-surface);\n  color: var(--aurora-accent-pink);\n  flex-shrink: 0;\n}\n.aurora-alert--info .aurora-alert__icon {\n  border-color: color-mix(in srgb, var(--aurora-accent-primary) 32%, transparent);\n  background: color-mix(in srgb, var(--aurora-accent-primary) 12%, var(--aurora-panel-medium));\n  color: var(--aurora-accent-primary);\n}\n.aurora-alert__main { display: flex; flex-direction: column; gap: 8px; min-width: 0; }\n.aurora-alert__title {\n  margin: 0;\n  font-family: var(--font-display, var(--font-sans, Manrope, sans-serif));\n  font-weight: 700;\n  font-size: 19px;\n  line-height: 1.25;\n  letter-spacing: -0.01em;\n  color: var(--aurora-text-primary);\n}\n.aurora-alert__desc {\n  margin: 0;\n  font-family: var(--font-sans, Inter, sans-serif);\n  font-size: 15px;\n  line-height: 1.5;\n  color: var(--aurora-text-muted);\n}\n.aurora-alert__footer {\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: flex-end;\n  gap: 10px;\n  margin-top: 14px;\n}\n\n  /* ─── card ─── */\n.aurora-card { color: var(--aurora-text-primary); border: 1px solid var(--aurora-border-default); box-sizing: border-box; }\n.aurora-card[data-tier=\"2\"] {\n  background: linear-gradient(180deg, var(--aurora-panel-strong-top), var(--aurora-panel-strong));\n  border-color: color-mix(in srgb, var(--aurora-border-default) 55%, var(--aurora-page-bg));\n  border-radius: var(--aurora-radius-3);\n  box-shadow: var(--aurora-shadow-strong), var(--aurora-highlight-strong);\n}\n.aurora-card[data-tier=\"1\"] {\n  background: linear-gradient(180deg, var(--aurora-panel-medium-top), var(--aurora-panel-medium));\n  border-color: color-mix(in srgb, var(--aurora-border-default) 42%, var(--aurora-page-bg));\n  border-radius: var(--aurora-radius-2);\n  box-shadow: var(--aurora-shadow-medium), var(--aurora-highlight-medium);\n}\n.aurora-card[data-accent=\"cyan\"] {\n  border-color: color-mix(in srgb, var(--aurora-accent-primary) 60%, var(--aurora-border-default));\n  box-shadow: var(--aurora-shadow-strong), var(--aurora-highlight-strong), 0 0 0 1px color-mix(in srgb, var(--aurora-accent-primary) 22%, transparent), 0 0 20px color-mix(in srgb, var(--aurora-accent-primary) 12%, transparent);\n}\n.aurora-card[data-accent=\"rose\"] {\n  border-color: color-mix(in srgb, var(--aurora-accent-pink) 60%, var(--aurora-border-default));\n  box-shadow: var(--aurora-shadow-strong), var(--aurora-highlight-strong), 0 0 0 1px color-mix(in srgb, var(--aurora-accent-pink) 22%, transparent), 0 0 20px color-mix(in srgb, var(--aurora-accent-pink) 12%, transparent);\n}\n.aurora-card[data-interactive=\"true\"] {\n  cursor: pointer;\n  transition: transform 160ms var(--motion-ease-out, ease), box-shadow 160ms var(--motion-ease-out, ease), border-color 160ms var(--motion-ease-out, ease);\n}\n.aurora-card[data-interactive=\"true\"]:hover {\n  transform: translateY(-2px);\n  border-color: color-mix(in srgb, var(--aurora-accent-primary) 38%, var(--aurora-border-strong));\n  box-shadow: var(--aurora-shadow-strong), 0 0 0 1px color-mix(in srgb, var(--aurora-accent-primary) 30%, transparent);\n}\n.aurora-card[data-interactive=\"true\"]:focus-visible {\n  outline: none;\n  box-shadow: var(--aurora-shadow-strong), 0 0 0 3px var(--aurora-focus-ring);\n}\n@media (prefers-reduced-motion: reduce) { .aurora-card[data-interactive=\"true\"] { transition: none; } }\n\n  /* ─── carousel ─── */\n.aurora-carousel { display: grid; gap: 14px; }\n.aurora-carousel__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }\n.aurora-carousel__title {\n  margin: 0;\n  font-family: var(--aurora-font-display);\n  font-weight: 800;\n  font-size: 26px;\n  line-height: 1.1;\n  letter-spacing: -0.02em;\n  color: var(--aurora-text-primary);\n}\n.aurora-carousel__controls { display: flex; gap: 8px; }\n.aurora-carousel__track {\n  display: flex;\n  gap: 12px;\n  overflow-x: auto;\n  scroll-snap-type: x mandatory;\n  padding-bottom: 4px;\n  scrollbar-width: thin;\n}\n.aurora-carousel__slide { min-width: 240px; scroll-snap-align: start; }\n.aurora-carousel__item {\n  position: relative;\n  border-radius: 8px;\n  border: 1px solid var(--aurora-border-default);\n  background:\n    linear-gradient(180deg, var(--aurora-panel-medium-top), transparent 60%),\n    var(--aurora-panel-medium);\n  box-shadow: var(--aurora-shadow-medium), var(--aurora-highlight-medium);\n  padding: 16px;\n}\n\n  /* ─── chat-message ─── */\n.aurora-chat-message {\n  display: flex;\n  flex-direction: column;\n  font-family: var(--font-sans);\n  color: var(--aurora-text-primary);\n}\n.aurora-chat-message[data-role=\"user\"] {\n  align-items: flex-end;\n}\n.aurora-chat-message[data-role=\"assistant\"] {\n  align-items: flex-start;\n}\n\n/* Assistant header row: avatar + author + time */\n.aurora-chat-message__head {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  margin-bottom: 10px;\n}\n.aurora-chat-message__avatar {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 40px;\n  height: 40px;\n  flex: 0 0 auto;\n  border-radius: var(--radius-1, 14px);\n  background: var(--aurora-panel-strong);\n  border: 1px solid var(--aurora-border-default);\n  color: var(--aurora-accent-pink);\n}\n.aurora-chat-message__meta {\n  display: flex;\n  align-items: baseline;\n  gap: 8px;\n  min-width: 0;\n}\n.aurora-chat-message__author {\n  font-family: var(--font-sans);\n  font-size: 15px;\n  font-weight: 700;\n  line-height: 1.2;\n  color: var(--aurora-text-primary);\n}\n.aurora-chat-message__time {\n  font-family: var(--font-sans);\n  font-size: 13px;\n  font-weight: 500;\n  line-height: 1.2;\n  color: var(--aurora-text-muted);\n}\n\n/* Bubble */\n.aurora-chat-message__bubble {\n  position: relative;\n  max-width: 100%;\n  padding: 16px 20px;\n  border-radius: var(--radius-2, 18px);\n  font-size: 17px;\n  line-height: 1.5;\n  border: 1px solid transparent;\n  box-sizing: border-box;\n}\n.aurora-chat-message[data-role=\"user\"] .aurora-chat-message__bubble {\n  background: color-mix(in srgb, var(--aurora-accent-primary) 12%, transparent);\n  border-color: color-mix(in srgb, var(--aurora-accent-primary) 42%, transparent);\n  color: var(--aurora-text-primary);\n  text-align: right;\n}\n.aurora-chat-message[data-role=\"assistant\"] .aurora-chat-message__bubble {\n  background: var(--aurora-panel-medium);\n  border-color: var(--aurora-border-default);\n  color: var(--aurora-text-primary);\n  text-align: left;\n}\n.aurora-chat-message__bubble p {\n  margin: 0;\n}\n.aurora-chat-message__bubble p + p {\n  margin-top: 12px;\n}\n\n/* Inline code chips */\n.aurora-chat-message__bubble code {\n  font-family: var(--font-mono);\n  font-size: 0.9em;\n  padding: 2px 7px;\n  border-radius: 7px;\n  background: color-mix(in srgb, var(--aurora-accent-pink) 12%, var(--aurora-panel-medium));\n  color: var(--aurora-accent-pink);\n}\n\n/* Citations — sit below the bubble, aligned to the message column */\n.aurora-chat-message__citations {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 8px;\n  margin-top: 10px;\n}\n.aurora-chat-message[data-role=\"user\"] .aurora-chat-message__citations {\n  justify-content: flex-end;\n}\n.aurora-chat-message__citation {\n  display: inline-flex;\n  align-items: center;\n  gap: 7px;\n  padding: 6px 12px;\n  border-radius: var(--radius-1, 14px);\n  border: 1px solid var(--aurora-border-default);\n  background: var(--aurora-control-surface);\n  font-family: var(--font-mono);\n  font-size: 13px;\n  font-weight: 500;\n  line-height: 1;\n  color: var(--aurora-text-muted);\n  text-decoration: none;\n  transition: border-color 120ms ease, color 120ms ease;\n}\n.aurora-chat-message__citation:hover {\n  border-color: var(--aurora-border-strong);\n  color: var(--aurora-text-primary);\n}\n.aurora-chat-message__citation-icon {\n  color: var(--aurora-accent-pink);\n  flex: 0 0 auto;\n}\n\n  /* ─── conversation primitives ─── */\n.aurora-message__avatar {\n  width: 32px;\n  height: 32px;\n  border: 1px solid color-mix(in srgb, var(--axon-orange) 34%, var(--aurora-border-default));\n  background: color-mix(in srgb, var(--axon-orange) 10%, var(--aurora-panel-medium));\n  color: var(--axon-orange);\n  box-shadow: var(--aurora-highlight-medium);\n}\n.aurora-message__meta {\n  min-height: 20px;\n  color: var(--aurora-text-muted);\n  font-family: var(--aurora-font-sans);\n  font-size: var(--aurora-type-label);\n  font-weight: var(--aurora-weight-ui);\n  letter-spacing: var(--aurora-letter-label);\n  line-height: var(--aurora-line-dense);\n}\n\n.aurora-bubble__content {\n  border: 1px solid transparent;\n  border-radius: 14px;\n  padding: 10px 13px;\n  color: var(--aurora-text-primary);\n  font-family: var(--aurora-font-sans);\n  font-size: var(--aurora-type-body-sm);\n  font-weight: var(--aurora-weight-body);\n  line-height: var(--aurora-line-body);\n  box-shadow: var(--aurora-highlight-medium);\n}\n.aurora-bubble__content:is(button, a) {\n  cursor: pointer;\n  text-align: left;\n  text-decoration: none;\n  transition: border-color 140ms ease, background 140ms ease, color 140ms ease;\n}\n.aurora-bubble__content:is(button, a):focus-visible {\n  outline: 2px solid var(--aurora-focus-ring);\n  outline-offset: 2px;\n}\n.aurora-bubble--default > .aurora-bubble__content {\n  background: linear-gradient(180deg, color-mix(in srgb, var(--aurora-accent-primary) 13%, var(--aurora-panel-medium)), color-mix(in srgb, var(--aurora-accent-primary) 7%, var(--aurora-panel-medium)));\n  border-color: color-mix(in srgb, var(--aurora-accent-primary) 36%, var(--aurora-border-default));\n}\n.aurora-bubble--secondary > .aurora-bubble__content {\n  background: color-mix(in srgb, var(--aurora-accent-pink) 11%, var(--aurora-panel-medium));\n  border-color: color-mix(in srgb, var(--aurora-accent-pink) 30%, var(--aurora-border-default));\n}\n.aurora-bubble--muted > .aurora-bubble__content {\n  background: var(--aurora-panel-medium);\n  border-color: var(--aurora-border-default);\n}\n.aurora-bubble--tinted > .aurora-bubble__content {\n  background: linear-gradient(180deg, color-mix(in srgb, var(--axon-orange) 9%, var(--aurora-panel-strong)), color-mix(in srgb, var(--axon-orange) 4%, var(--aurora-panel-medium)));\n  border-color: color-mix(in srgb, var(--axon-orange) 24%, var(--aurora-border-default));\n}\n.aurora-bubble--outline > .aurora-bubble__content {\n  background: color-mix(in srgb, var(--aurora-control-surface) 70%, transparent);\n  border-color: var(--aurora-border-strong);\n}\n.aurora-bubble--ghost > .aurora-bubble__content {\n  max-width: 100%;\n  padding: 0;\n  border-color: transparent;\n  border-radius: 0;\n  background: transparent;\n  box-shadow: none;\n}\n.aurora-bubble--destructive > .aurora-bubble__content {\n  background: color-mix(in srgb, var(--aurora-error) 10%, var(--aurora-panel-medium));\n  border-color: color-mix(in srgb, var(--aurora-error) 36%, var(--aurora-border-default));\n  color: var(--aurora-error);\n}\n.aurora-bubble__reactions {\n  z-index: 10;\n  min-height: 26px;\n  padding: 2px 5px;\n  border: 1px solid var(--aurora-border-default);\n  border-radius: 999px;\n  background: color-mix(in srgb, var(--aurora-panel-strong) 94%, transparent);\n  box-shadow: var(--aurora-shadow-medium), var(--aurora-highlight-medium);\n  color: var(--aurora-text-muted);\n}\n\n.aurora-chat-composer {\n  border-color: var(--aurora-border-strong);\n  background: linear-gradient(180deg, color-mix(in srgb, var(--aurora-control-surface) 96%, var(--aurora-panel-strong)), var(--aurora-control-surface));\n  box-shadow: var(--aurora-highlight-medium);\n  transition: border-color 150ms ease, box-shadow 150ms ease, background 150ms ease;\n}\n.aurora-chat-composer[data-streaming=\"true\"] {\n  border-color: color-mix(in srgb, var(--axon-orange) 28%, var(--aurora-border-strong));\n}\n.aurora-chat-composer[data-steering=\"true\"] {\n  border-color: color-mix(in srgb, var(--aurora-accent-pink) 38%, var(--aurora-border-strong));\n  background: linear-gradient(180deg, color-mix(in srgb, var(--aurora-accent-pink) 3%, var(--aurora-control-surface)), var(--aurora-control-surface));\n  box-shadow: 0 0 0 1px color-mix(in srgb, var(--aurora-accent-pink) 10%, transparent), var(--aurora-highlight-medium);\n}\n.aurora-chat-response .aurora-response-block:first-child { margin-top: 0 !important; }\n.aurora-chat-response .aurora-response-block:last-child { margin-bottom: 0 !important; }\n.aurora-chat-response code {\n  box-decoration-break: clone;\n  -webkit-box-decoration-break: clone;\n}\n.aurora-chat-composer:focus-within {\n  border-color: color-mix(in srgb, var(--aurora-accent-primary) 48%, var(--aurora-border-strong));\n  box-shadow: 0 0 0 1px color-mix(in srgb, var(--aurora-accent-primary) 18%, transparent),\n    0 10px 28px color-mix(in srgb, var(--aurora-accent-primary) 6%, transparent),\n    var(--aurora-highlight-medium);\n}\n.aurora-chat-select[data-chat-select=\"model\"] {\n  border-color: color-mix(in srgb, var(--axon-orange) 22%, var(--aurora-border-strong));\n  background: color-mix(in srgb, var(--axon-orange) 4%, var(--aurora-control-surface));\n}\n.aurora-chat-select[data-chat-select=\"reasoning\"] {\n  border-color: color-mix(in srgb, var(--aurora-accent-pink) 22%, var(--aurora-border-strong));\n  background: color-mix(in srgb, var(--aurora-accent-pink) 4%, var(--aurora-control-surface));\n}\n.aurora-chat-select:hover {\n  border-color: color-mix(in srgb, var(--aurora-accent-primary) 34%, var(--aurora-border-strong));\n}\n.aurora-chat-stream-status,\n.aurora-chat-thinking-label {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  color: var(--aurora-text-muted);\n  font-size: 9.5px;\n  font-weight: var(--aurora-weight-ui);\n  line-height: 1;\n}\n.aurora-chat-stream-dot {\n  width: 5px;\n  height: 5px;\n  border-radius: 999px;\n  background: var(--aurora-accent-pink);\n  box-shadow: 0 0 0 2px color-mix(in srgb, var(--aurora-accent-pink) 12%, transparent);\n  animation: aurora-chat-stream-pulse 1.2s ease-in-out infinite;\n}\n.aurora-chat-thinking-dots { display: inline-flex; align-items: center; gap: 2px; }\n.aurora-chat-thinking-dots > span {\n  width: 3px;\n  height: 3px;\n  border-radius: 999px;\n  background: var(--axon-orange);\n  animation: aurora-chat-thinking-dot 1.05s ease-in-out infinite;\n}\n.aurora-chat-thinking-dots > span:nth-child(2) { animation-delay: 120ms; }\n.aurora-chat-thinking-dots > span:nth-child(3) { animation-delay: 240ms; }\n.aurora-chat-kbd {\n  display: inline-flex;\n  min-width: 14px;\n  height: 14px;\n  align-items: center;\n  justify-content: center;\n  padding: 0 3px;\n  border: 1px solid color-mix(in srgb, var(--aurora-border-strong) 72%, transparent);\n  border-radius: 4px;\n  background: color-mix(in srgb, var(--aurora-panel-medium) 72%, transparent);\n  color: var(--aurora-text-secondary);\n  font-family: var(--aurora-font-mono);\n  font-size: 9px;\n  line-height: 1;\n  box-shadow: inset 0 1px color-mix(in srgb, white 4%, transparent);\n}\n@keyframes aurora-chat-stream-pulse {\n  0%, 100% { opacity: .45; transform: scale(.82); }\n  50% { opacity: 1; transform: scale(1); }\n}\n@keyframes aurora-chat-thinking-dot {\n  0%, 70%, 100% { opacity: .35; transform: translateY(0); }\n  35% { opacity: 1; transform: translateY(-2px); }\n}\n.aurora-chat-attachment {\n  position: relative;\n  overflow: hidden;\n  border: 1px solid var(--aurora-border-default);\n  border-radius: 13px;\n  background: color-mix(in srgb, var(--aurora-panel-medium) 92%, transparent);\n  color: var(--aurora-text-primary);\n  box-shadow: var(--aurora-highlight-medium);\n  transition: border-color 140ms ease, background 140ms ease, box-shadow 140ms ease;\n}\n.aurora-chat-attachment:focus-within {\n  border-color: color-mix(in srgb, var(--aurora-accent-primary) 52%, var(--aurora-border-strong));\n  box-shadow: 0 0 0 2px color-mix(in srgb, var(--aurora-focus-ring) 18%, transparent), var(--aurora-highlight-medium);\n}\n.aurora-chat-attachment:has(> a, > button):hover {\n  background: color-mix(in srgb, var(--aurora-accent-primary) 5%, var(--aurora-panel-medium));\n}\n.aurora-chat-attachment[data-state=\"idle\"] { border-style: dashed; }\n.aurora-chat-attachment[data-state=\"error\"] {\n  border-color: color-mix(in srgb, var(--aurora-error) 45%, var(--aurora-border-default));\n}\n.aurora-chat-attachment[data-state=\"uploading\"]::after,\n.aurora-chat-attachment[data-state=\"processing\"]::after {\n  content: \"\";\n  position: absolute;\n  left: -38%;\n  bottom: 0;\n  width: 38%;\n  height: 1px;\n  border-radius: 999px;\n  background: linear-gradient(90deg, transparent, var(--aurora-accent-primary), transparent);\n  pointer-events: none;\n  animation: aurora-chat-attachment-progress 1.25s ease-in-out infinite;\n}\n.aurora-chat-attachment__state-badge {\n  position: absolute;\n  right: -3px;\n  bottom: -3px;\n  display: inline-flex;\n  width: 10px;\n  height: 10px;\n  align-items: center;\n  justify-content: center;\n  border: 1px solid var(--aurora-panel-strong);\n  border-radius: 999px;\n  background: var(--aurora-success);\n  color: var(--aurora-page-bg);\n  box-shadow: 0 0 0 1px color-mix(in srgb, var(--aurora-success) 25%, transparent);\n}\n.aurora-chat-attachment__state-badge svg { width: 7px; height: 7px; stroke-width: 2.8; }\n@keyframes aurora-chat-attachment-progress {\n  0% { transform: translateX(0); opacity: .2; }\n  35% { opacity: 1; }\n  100% { transform: translateX(365%); opacity: .2; }\n}\n@media (prefers-reduced-motion: reduce) {\n  .aurora-chat-stream-dot,\n  .aurora-chat-thinking-dots > span,\n  .aurora-chat-attachment[data-state=\"uploading\"]::after,\n  .aurora-chat-attachment[data-state=\"processing\"]::after { animation: none; }\n}\n.aurora-chat-attachment--default { gap: 9px; padding: 8px 10px; font-size: var(--aurora-type-body-sm); }\n.aurora-chat-attachment--sm { gap: 8px; padding: 6px 8px; font-size: var(--aurora-type-label); }\n.aurora-chat-attachment--xs { gap: 5px; padding: 3px 5px; border-radius: 8px; font-size: var(--aurora-type-label); }\n.aurora-chat-attachment--horizontal { min-width: 160px; align-items: center; }\n.aurora-chat-attachment--xs.aurora-chat-attachment--horizontal { min-width: 0; }\n.aurora-chat-attachment--vertical { width: 118px; flex-direction: column; }\n.aurora-chat-attachment__media {\n  width: 40px;\n  border-radius: 9px;\n  background: color-mix(in srgb, var(--aurora-accent-primary) 8%, var(--aurora-control-surface));\n  color: var(--aurora-accent-primary);\n}\n.aurora-chat-attachment--sm .aurora-chat-attachment__media { width: 34px; }\n.aurora-chat-attachment--xs .aurora-chat-attachment__media { width: 24px; border-radius: 6px; }\n.aurora-chat-attachment--vertical .aurora-chat-attachment__media { width: 100%; }\n.aurora-chat-attachment__media--image { opacity: .62; }\n.aurora-chat-attachment[data-state=\"done\"] .aurora-chat-attachment__media--image,\n.aurora-chat-attachment[data-state=\"idle\"] .aurora-chat-attachment__media--image { opacity: 1; }\n.aurora-chat-attachment__media--image img { width: 100%; height: 100%; object-fit: cover; }\n.aurora-chat-attachment[data-state=\"error\"] .aurora-chat-attachment__media {\n  background: color-mix(in srgb, var(--aurora-error) 10%, var(--aurora-control-surface));\n  color: var(--aurora-error);\n}\n.aurora-chat-attachment__content { line-height: 1.22; }\n.aurora-chat-attachment__title {\n  color: var(--aurora-text-primary);\n  font-weight: var(--aurora-weight-ui);\n}\n.aurora-chat-attachment[data-state=\"uploading\"] .aurora-chat-attachment__title,\n.aurora-chat-attachment[data-state=\"processing\"] .aurora-chat-attachment__title {\n  background: linear-gradient(90deg, var(--aurora-text-muted), var(--aurora-text-primary), var(--aurora-text-muted));\n  background-size: 200% 100%;\n  color: transparent;\n  background-clip: text;\n  animation: aurora-shimmer 1.4s ease-in-out infinite;\n}\n.aurora-chat-attachment__description {\n  margin-top: 3px;\n  color: var(--aurora-text-muted);\n  font-size: var(--aurora-type-label);\n}\n.aurora-chat-attachment[data-state=\"error\"] .aurora-chat-attachment__description { color: var(--aurora-error); }\n.aurora-chat-attachment__actions { gap: 3px; }\n.aurora-chat-attachment--vertical .aurora-chat-attachment__actions { position: absolute; top: 8px; right: 8px; }\n.aurora-chat-attachment-group {\n  scrollbar-width: thin;\n  scrollbar-color: var(--aurora-border-strong) transparent;\n}\n\n.aurora-marker {\n  color: var(--aurora-text-muted);\n  font-family: var(--aurora-font-sans);\n  font-size: var(--aurora-type-label);\n  font-weight: var(--aurora-weight-ui);\n  letter-spacing: var(--aurora-letter-label);\n  line-height: var(--aurora-line-dense);\n}\n.aurora-marker a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }\n.aurora-marker a:hover { color: var(--aurora-text-primary); }\n.aurora-marker--separator::before,\n.aurora-marker--separator::after {\n  content: \"\";\n  height: 1px;\n  min-width: 0;\n  flex: 1;\n  background: var(--aurora-border-default);\n}\n.aurora-marker--separator::before { margin-right: 4px; }\n.aurora-marker--separator::after { margin-left: 4px; }\n.aurora-marker--border {\n  padding-bottom: 8px;\n  border-bottom: 1px solid var(--aurora-border-default);\n}\n.aurora-marker__icon {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--axon-orange);\n}\n\n.aurora-message-scroller__viewport {\n  position: relative;\n  scrollbar-gutter: stable;\n  scrollbar-width: thin;\n  scrollbar-color: var(--aurora-border-strong) transparent;\n  contain: content;\n  mask-image: linear-gradient(to bottom, transparent, #000 18px, #000 calc(100% - 18px), transparent);\n}\n.aurora-message-scroller__viewport[data-at-start=\"true\"] {\n  mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 18px), transparent);\n}\n.aurora-message-scroller__viewport[data-at-end=\"true\"] {\n  mask-image: linear-gradient(to bottom, transparent, #000 18px, #000 100%);\n}\n.aurora-message-scroller__viewport[data-at-start=\"true\"][data-at-end=\"true\"] { mask-image: none; }\n.aurora-message-scroller__viewport[data-autoscrolling=\"true\"] { scrollbar-color: transparent transparent; }\n.aurora-message-scroller__button {\n  position: absolute;\n  left: 50%;\n  z-index: 20;\n  transform: translateX(-50%);\n  box-shadow: var(--aurora-shadow-medium), var(--aurora-highlight-medium);\n  transition: opacity 180ms ease, transform 180ms ease;\n}\n.aurora-message-scroller__button[data-direction=\"end\"] { bottom: 12px; }\n.aurora-message-scroller__button[data-direction=\"start\"] { top: 12px; }\n.aurora-message-scroller__button[data-active=\"false\"] {\n  pointer-events: none;\n  opacity: 0;\n}\n.aurora-message-scroller__button[data-direction=\"end\"][data-active=\"false\"] { transform: translate(-50%, 10px) scale(.94); }\n.aurora-message-scroller__button[data-direction=\"start\"][data-active=\"false\"] { transform: translate(-50%, -10px) scale(.94); }\n@media (max-width: 639px) {\n  .aurora-chat-block .aurora-message-scroller__button {\n    left: auto;\n    right: 10px;\n    transform: none;\n  }\n  .aurora-chat-block .aurora-message-scroller__button[data-direction=\"end\"] { bottom: 8px; }\n  .aurora-chat-block .aurora-message-scroller__button[data-direction=\"start\"] { top: 8px; }\n  .aurora-chat-block .aurora-message-scroller__button[data-direction=\"end\"][data-active=\"false\"] { transform: translateY(8px) scale(.94); }\n  .aurora-chat-block .aurora-message-scroller__button[data-direction=\"start\"][data-active=\"false\"] { transform: translateY(-8px) scale(.94); }\n}\n\n  /* ─── chat-sidebar ─── */\n.aurora-chat-sidebar {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  width: 100%;\n  box-sizing: border-box;\n  font-family: var(--font-sans);\n  color: var(--aurora-text-primary);\n  background: var(--aurora-page-bg);\n  border-right: 1px solid var(--aurora-border-default);\n}\n\n/* Brand row */\n.aurora-chat-sidebar__brand {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  padding: 18px 18px 14px;\n  font-family: var(--font-sans);\n  font-size: 20px;\n  font-weight: 800;\n  line-height: 1.1;\n  letter-spacing: -0.01em;\n  color: var(--aurora-text-primary);\n}\n.aurora-chat-sidebar__brand svg {\n  flex: 0 0 auto;\n}\n\n/* New chat + search live in a padded header block */\n.aurora-chat-sidebar__head {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  padding: 0 18px 14px;\n}\n\n/* New chat button */\n.aurora-chat-sidebar__new {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 10px;\n  width: 100%;\n  padding: 14px 16px;\n  border-radius: var(--radius-1, 14px);\n  border: 1px solid color-mix(in srgb, var(--aurora-accent-primary) 42%, transparent);\n  background: linear-gradient(\n    180deg,\n    color-mix(in srgb, var(--aurora-accent-primary) 16%, var(--aurora-panel-strong)) 0%,\n    var(--aurora-panel-strong) 100%\n  );\n  color: var(--aurora-text-primary);\n  font-family: var(--font-sans);\n  font-size: 16px;\n  font-weight: 600;\n  line-height: 1;\n  cursor: pointer;\n  box-shadow: 0 0 0 1px color-mix(in srgb, var(--aurora-accent-primary) 18%, transparent),\n    0 8px 18px color-mix(in srgb, var(--aurora-accent-primary) 14%, transparent);\n  transition: border-color 120ms ease, box-shadow 120ms ease, background 120ms ease;\n}\n.aurora-chat-sidebar__new:hover {\n  border-color: color-mix(in srgb, var(--aurora-accent-primary) 60%, transparent);\n  box-shadow: 0 0 0 1px color-mix(in srgb, var(--aurora-accent-primary) 28%, transparent),\n    0 10px 22px color-mix(in srgb, var(--aurora-accent-primary) 20%, transparent);\n}\n.aurora-chat-sidebar__new:focus-visible {\n  outline: none;\n  border-color: var(--aurora-accent-strong);\n  box-shadow: 0 0 0 3px var(--aurora-focus-ring-strong);\n}\n.aurora-chat-sidebar__new-icon {\n  flex: 0 0 auto;\n  color: var(--aurora-text-primary);\n}\n\n/* Search field */\n.aurora-chat-sidebar__search {\n  position: relative;\n  display: flex;\n  align-items: center;\n}\n.aurora-chat-sidebar__search-icon {\n  position: absolute;\n  left: 16px;\n  top: 50%;\n  transform: translateY(-50%);\n  color: var(--aurora-text-muted);\n  pointer-events: none;\n}\n.aurora-chat-sidebar__search-input {\n  width: 100%;\n  box-sizing: border-box;\n  padding: 12px 14px 12px 44px;\n  border-radius: var(--radius-1, 14px);\n  border: 1px solid var(--aurora-border-default);\n  background: var(--aurora-control-surface);\n  color: var(--aurora-text-primary);\n  font-family: var(--font-sans);\n  font-size: 15px;\n  line-height: 1.2;\n  transition: border-color 120ms ease, box-shadow 120ms ease;\n}\n.aurora-chat-sidebar__search-input::placeholder {\n  color: var(--aurora-text-muted);\n}\n.aurora-chat-sidebar__search-input:focus-visible {\n  outline: none;\n  border-color: var(--aurora-accent-strong);\n  box-shadow: 0 0 0 3px var(--aurora-focus-ring-strong);\n}\n\n/* Thread list */\n.aurora-chat-sidebar__threads {\n  flex: 1 1 auto;\n  min-height: 0;\n  overflow-y: auto;\n  padding: 4px 12px 12px;\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n}\n.aurora-chat-sidebar__bucket {\n  padding: 14px 8px 6px;\n  font-family: var(--font-sans);\n  font-size: 12px;\n  font-weight: 700;\n  line-height: 1;\n  letter-spacing: 0.08em;\n  text-transform: uppercase;\n  color: var(--aurora-text-muted);\n}\n.aurora-chat-sidebar__thread {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  width: 100%;\n  box-sizing: border-box;\n  padding: 11px 12px;\n  border-radius: var(--radius-1, 14px);\n  border: 1px solid transparent;\n  background: transparent;\n  color: var(--aurora-text-muted);\n  font-family: var(--font-sans);\n  font-size: 16px;\n  font-weight: 500;\n  line-height: 1.25;\n  text-align: left;\n  cursor: pointer;\n  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;\n}\n.aurora-chat-sidebar__thread:hover {\n  background: var(--aurora-panel-medium);\n  color: var(--aurora-text-primary);\n}\n.aurora-chat-sidebar__thread:focus-visible {\n  outline: none;\n  border-color: var(--aurora-accent-strong);\n  box-shadow: 0 0 0 3px var(--aurora-focus-ring-strong);\n}\n.aurora-chat-sidebar__thread[data-active=\"true\"] {\n  background: color-mix(in srgb, var(--aurora-accent-primary) 12%, var(--aurora-panel-medium));\n  border-color: color-mix(in srgb, var(--aurora-accent-primary) 48%, transparent);\n  color: var(--aurora-text-primary);\n  font-weight: 700;\n}\n.aurora-chat-sidebar__thread-icon {\n  flex: 0 0 auto;\n  color: var(--aurora-accent-strong);\n}\n.aurora-chat-sidebar__thread[data-active=\"false\"] .aurora-chat-sidebar__thread-icon {\n  color: var(--aurora-text-muted);\n}\n.aurora-chat-sidebar__thread-title {\n  flex: 1 1 auto;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n/* User footer */\n.aurora-chat-sidebar__footer {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  flex: 0 0 auto;\n  padding: 12px 16px;\n  border-top: 1px solid var(--aurora-border-default);\n  background: var(--aurora-page-bg);\n}\n.aurora-chat-sidebar__avatar {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex: 0 0 auto;\n  width: 40px;\n  height: 40px;\n  border-radius: var(--radius-pill, 999px);\n  border: 1px solid color-mix(in srgb, var(--aurora-accent-primary) 48%, transparent);\n  background: color-mix(in srgb, var(--aurora-accent-primary) 14%, var(--aurora-panel-medium));\n  color: var(--aurora-accent-strong);\n  font-family: var(--font-sans);\n  font-size: 13px;\n  font-weight: 700;\n  line-height: 1;\n  letter-spacing: 0.02em;\n}\n.aurora-chat-sidebar__user {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  min-width: 0;\n  flex: 1 1 auto;\n}\n.aurora-chat-sidebar__user-name {\n  font-family: var(--font-sans);\n  font-size: 15px;\n  font-weight: 700;\n  line-height: 1.2;\n  color: var(--aurora-text-primary);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.aurora-chat-sidebar__user-plan {\n  font-family: var(--font-sans);\n  font-size: 13px;\n  font-weight: 500;\n  line-height: 1.2;\n  color: var(--aurora-text-muted);\n}\n.aurora-chat-sidebar__menu {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex: 0 0 auto;\n  width: 28px;\n  height: 28px;\n  padding: 0;\n  border-radius: var(--radius-1, 14px);\n  border: 1px solid transparent;\n  background: transparent;\n  color: var(--aurora-text-muted);\n  cursor: pointer;\n  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;\n}\n.aurora-chat-sidebar__menu:hover {\n  background: var(--aurora-panel-medium);\n  color: var(--aurora-text-primary);\n}\n.aurora-chat-sidebar__menu:focus-visible {\n  outline: none;\n  border-color: var(--aurora-accent-strong);\n  box-shadow: 0 0 0 3px var(--aurora-focus-ring-strong);\n}\n\n  /* ─── checkbox ─── */\n.aurora-checkbox {\n  display: inline-grid; place-items: center; flex-shrink: 0; cursor: pointer;\n  width: 19px; height: 19px; border-radius: 5px; padding: 0;\n  background: var(--aurora-control-surface); border: 1px solid var(--aurora-border-strong);\n  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);\n  transition: background 140ms ease, border-color 140ms ease, box-shadow 140ms ease;\n  position: relative;\n}\n.aurora-checkbox:hover {\n  border-color: color-mix(in srgb, var(--aurora-accent-primary) 40%, var(--aurora-border-strong));\n}\n.aurora-checkbox:focus-visible {\n  outline: none;\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--aurora-accent-primary) 22%, transparent);\n}\n.aurora-checkbox[data-state=\"checked\"],\n.aurora-checkbox[data-state=\"indeterminate\"] {\n  background: color-mix(in srgb, var(--aurora-accent-primary) 30%, var(--aurora-control-surface));\n  border-color: color-mix(in srgb, var(--aurora-accent-primary) 60%, var(--aurora-border-strong));\n  box-shadow: 0 0 0 1px color-mix(in srgb, var(--aurora-accent-primary) 22%, transparent);\n}\n.aurora-checkbox:disabled { opacity: 0.45; cursor: not-allowed; }\n.aurora-checkbox svg {\n  color: var(--aurora-accent-strong); opacity: 0;\n  transition: opacity 120ms ease;\n  position: absolute;\n}\n.aurora-checkbox[data-state=\"checked\"] svg.aurora-checkbox__check { opacity: 1; }\n.aurora-checkbox[data-state=\"indeterminate\"] svg.aurora-checkbox__dash { opacity: 1; }\n\n  /* ─── copy-button ─── */\n.aurora-copy-btn {\n  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 7px;\n  white-space: nowrap; cursor: pointer; user-select: none; font-family: var(--font-sans, Inter, sans-serif);\n  font-weight: 560; border: 1px solid var(--aurora-border-strong); background: var(--aurora-control-surface);\n  color: var(--aurora-text-primary); height: 32px; padding: 0 14px; border-radius: 9px; font-size: 13px;\n  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 1px 2px rgba(0,0,0,0.34), 0 2px 6px rgba(0,0,0,0.16);\n  text-decoration: none; box-sizing: border-box;\n  transition: background 150ms var(--motion-ease-out, ease), border-color 150ms var(--motion-ease-out, ease), box-shadow 200ms var(--motion-ease-out, ease), color 150ms var(--motion-ease-out, ease), transform 80ms ease-out;\n}\n.aurora-copy-btn:hover { background: var(--aurora-hover-bg); border-color: var(--aurora-border-strong); box-shadow: inset 0 1px 0 rgba(255,255,255,0.07), 0 1px 2px rgba(0,0,0,0.4), 0 3px 9px rgba(0,0,0,0.22); }\n.aurora-copy-btn:active { transform: translateY(1px); }\n.aurora-copy-btn:focus-visible { outline: none; box-shadow: inset 0 1px 0 rgba(255,255,255,0.055), 0 0 0 1px color-mix(in srgb, var(--aurora-accent-primary) 45%, transparent), 0 0 0 3px color-mix(in srgb, var(--aurora-accent-primary) 22%, transparent); }\n.aurora-copy-btn:disabled, .aurora-copy-btn[aria-disabled=\"true\"] { opacity: 0.45; cursor: not-allowed; transform: none; }\n\n/* icon-only square when there is no label */\n.aurora-copy-btn--icon { width: 32px; padding: 0; }\n\n/* copied state — brief success glow */\n.aurora-copy-btn--copied {\n  color: var(--aurora-success);\n  border-color: color-mix(in srgb, var(--aurora-success) 46%, var(--aurora-border-strong));\n  background: linear-gradient(180deg, color-mix(in srgb, var(--aurora-success) 12%, transparent), transparent 58%), var(--aurora-control-surface);\n  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 0 0 1px color-mix(in srgb, var(--aurora-success) 22%, transparent);\n}\n.aurora-copy-btn--copied:hover {\n  border-color: color-mix(in srgb, var(--aurora-success) 72%, var(--aurora-border-strong));\n  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 0 0 1px color-mix(in srgb, var(--aurora-success) 42%, transparent);\n}\n\n.aurora-copy-btn__icon { display: inline-flex; align-items: center; flex-shrink: 0; }\n.aurora-copy-btn__icon svg { display: block; }\n\n  /* ─── number-input ─── */\n.aurora-number-input {\n  display: inline-grid;\n  grid-template-columns: 32px minmax(0, 1fr) 32px;\n  align-items: center;\n  gap: 8px;\n  width: 100%;\n}\n/* Center field — lit accent ring, pill rounding, centered value (CD spec). */\n.aurora-number-input__field {\n  width: 100%;\n  height: 32px;\n  padding: 0 12px;\n  text-align: center;\n  border-radius: 999px;\n  border: 1px solid color-mix(in srgb, var(--aurora-accent-primary) 38%, var(--aurora-border-strong));\n  background: var(--aurora-control-surface);\n  color: var(--aurora-text-primary);\n  font-family: var(--font-sans, Inter, sans-serif);\n  font-size: 13px;\n  font-weight: 560;\n  box-shadow:\n    inset 0 1px 0 rgba(255, 255, 255, 0.04),\n    0 0 0 1px color-mix(in srgb, var(--aurora-accent-primary) 18%, transparent);\n  box-sizing: border-box;\n  appearance: textfield;\n  -moz-appearance: textfield;\n  transition:\n    border-color 150ms var(--motion-ease-out, ease),\n    box-shadow 200ms var(--motion-ease-out, ease);\n}\n.aurora-number-input__field::-webkit-outer-spin-button,\n.aurora-number-input__field::-webkit-inner-spin-button {\n  appearance: none;\n  -webkit-appearance: none;\n  margin: 0;\n}\n.aurora-number-input__field:focus,\n.aurora-number-input__field:focus-visible {\n  outline: none;\n  border-color: color-mix(in srgb, var(--aurora-accent-primary) 60%, var(--aurora-border-strong));\n  box-shadow:\n    inset 0 1px 0 rgba(255, 255, 255, 0.055),\n    0 0 0 1px color-mix(in srgb, var(--aurora-accent-primary) 45%, transparent),\n    0 0 0 3px color-mix(in srgb, var(--aurora-accent-primary) 22%, transparent);\n}\n.aurora-number-input__field:disabled {\n  opacity: 0.45;\n  cursor: not-allowed;\n}\n\n  /* ─── operation-icon ─── */\n.aurora-op-icon {\n  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;\n  border-radius: 8px; box-sizing: border-box;\n  background: var(--aurora-op-surface);\n  border: 1px solid var(--aurora-op-border);\n  color: var(--aurora-op-fg);\n  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);\n}\n.aurora-op-icon svg { display: block; }\n\n/* cyan — fetch / read */\n.aurora-op-icon--cyan {\n  --aurora-op-fg: var(--aurora-accent-strong);\n  --aurora-op-surface: color-mix(in srgb, var(--aurora-accent-primary) 13%, var(--aurora-control-surface));\n  --aurora-op-border: color-mix(in srgb, var(--aurora-accent-primary) 34%, transparent);\n}\n/* orange — AI / automation / async jobs */\n.aurora-op-icon--orange {\n  --aurora-op-fg: var(--axon-orange-strong);\n  --aurora-op-surface: color-mix(in srgb, var(--axon-orange) 14%, var(--aurora-control-surface));\n  --aurora-op-border: color-mix(in srgb, var(--axon-orange) 36%, transparent);\n}\n/* rose — secondary expressive override */\n.aurora-op-icon--rose {\n  --aurora-op-fg: var(--aurora-accent-pink-strong);\n  --aurora-op-surface: color-mix(in srgb, var(--aurora-accent-pink) 13%, var(--aurora-control-surface));\n  --aurora-op-border: color-mix(in srgb, var(--aurora-accent-pink) 34%, transparent);\n}\n/* neutral — fallback */\n.aurora-op-icon--neutral {\n  --aurora-op-fg: var(--aurora-text-muted);\n  --aurora-op-surface: color-mix(in srgb, var(--aurora-text-muted) 8%, var(--aurora-control-surface));\n  --aurora-op-border: color-mix(in srgb, var(--aurora-border-default) 70%, transparent);\n}\n\n  /* ─── skeleton ─── */\n    .aurora-shimmer {\n      background: linear-gradient(\n        90deg,\n        var(--aurora-panel-strong) 25%,\n        color-mix(in srgb, var(--aurora-border-strong) 60%, transparent) 37%,\n        var(--aurora-panel-strong) 63%\n      );\n      background-size: 800px 100%;\n      animation: aurora-shimmer 1.4s ease-in-out infinite;\n    }\n\n  /* ─── status-dot ─── */\n    .aurora-status-dot {\n      position: relative;\n      flex: none;\n      width: 9px;\n      height: 9px;\n      border-radius: 9999px;\n      background: var(--status-dot-color);\n      box-shadow:\n        0 0 0 0 color-mix(in srgb, var(--status-dot-color) 36%, transparent),\n        0 0 6px color-mix(in srgb, var(--status-dot-color) 70%, transparent);\n    }\n    .aurora-status-dot--pulse {\n      animation: aurora-status-dot-pulse 1.8s var(--motion-ease-in-out, ease-in-out) infinite;\n    }\n    @media (prefers-reduced-motion: reduce) {\n      .aurora-status-dot--pulse {\n        animation: none;\n      }\n    }\n\n  /* ─── stepper ─── */\n.aurora-stepper {\n  display: flex;\n  align-items: flex-start;\n  justify-content: center;\n  gap: 0;\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  font-family: var(--font-sans, \"Inter\", system-ui, sans-serif);\n}\n.aurora-stepper__step {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 12px;\n  min-width: 96px;\n}\n.aurora-stepper__node {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 48px;\n  height: 48px;\n  border-radius: 9999px;\n  border: 2px solid transparent;\n  font-family: var(--font-sans, \"Inter\", system-ui, sans-serif);\n  font-size: 16px;\n  font-weight: 700;\n  line-height: 1;\n  box-sizing: border-box;\n  transition:\n    background-color var(--motion-fast, 140ms) ease,\n    border-color var(--motion-fast, 140ms) ease,\n    color var(--motion-fast, 140ms) ease;\n}\n.aurora-stepper__step[data-status=\"complete\"] .aurora-stepper__node {\n  background: var(--aurora-accent-primary);\n  border-color: var(--aurora-accent-primary);\n  color: var(--aurora-accent-foreground);\n}\n.aurora-stepper__step[data-status=\"active\"] .aurora-stepper__node {\n  background: color-mix(in srgb, var(--aurora-accent-primary) 18%, transparent);\n  border-color: var(--aurora-accent-primary);\n  color: var(--aurora-accent-primary);\n}\n.aurora-stepper__step[data-status=\"upcoming\"] .aurora-stepper__node {\n  background: transparent;\n  border-color: var(--aurora-border-default);\n  color: var(--aurora-text-muted);\n}\n.aurora-stepper__check {\n  width: 20px;\n  height: 20px;\n}\n.aurora-stepper__text {\n  display: block;\n  text-align: center;\n}\n.aurora-stepper__label {\n  display: block;\n  font-size: 14px;\n  font-weight: 700;\n  line-height: 1.2;\n  text-align: center;\n}\n.aurora-stepper__step[data-status=\"upcoming\"] .aurora-stepper__label {\n  color: var(--aurora-text-muted);\n  font-weight: 600;\n}\n.aurora-stepper__step[data-status=\"complete\"] .aurora-stepper__label,\n.aurora-stepper__step[data-status=\"active\"] .aurora-stepper__label {\n  color: var(--aurora-text-primary);\n}\n.aurora-stepper__description {\n  margin-top: 4px;\n  font-size: 12px;\n  font-weight: 500;\n  line-height: 1.3;\n  text-align: center;\n  color: var(--aurora-text-muted);\n}\n\n  /* ─── switch ─── */\n[data-aurora-switch] {\n  background: var(--aurora-control-surface);\n  border: 1px solid var(--aurora-border-strong);\n  transition: background 160ms var(--motion-ease-out, ease), border-color 160ms var(--motion-ease-out, ease), box-shadow 160ms var(--motion-ease-out, ease);\n}\n[data-aurora-switch]:focus-visible {\n  outline: none;\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--aurora-accent-primary) 22%, transparent);\n}\n[data-aurora-switch][data-state=\"checked\"] {\n  background: color-mix(in srgb, var(--aurora-accent-primary) 32%, var(--aurora-control-surface));\n  border-color: color-mix(in srgb, var(--aurora-accent-primary) 50%, var(--aurora-border-strong));\n  box-shadow: 0 0 0 1px color-mix(in srgb, var(--aurora-accent-primary) 22%, transparent);\n}\n[data-aurora-switch]:disabled { opacity: 0.45; cursor: not-allowed; }\n\n[data-aurora-switch] [data-radix-switch-thumb] {\n  background: var(--aurora-text-muted);\n  transition: transform 160ms var(--motion-ease-out, ease), background 160ms var(--motion-ease-out, ease), box-shadow 160ms var(--motion-ease-out, ease);\n  pointer-events: none;\n}\n[data-aurora-switch][data-state=\"checked\"] [data-radix-switch-thumb] {\n  background: var(--aurora-accent-strong);\n  box-shadow: 0 0 8px var(--aurora-accent-primary);\n}\n\n[data-aurora-switch=\"sm\"]      [data-radix-switch-thumb]                       { transform: translateX(2px);  }\n[data-aurora-switch=\"sm\"][data-state=\"checked\"]      [data-radix-switch-thumb] { transform: translateX(16px); }\n[data-aurora-switch=\"default\"] [data-radix-switch-thumb]                       { transform: translateX(2px);  }\n[data-aurora-switch=\"default\"][data-state=\"checked\"] [data-radix-switch-thumb] { transform: translateX(19px); }\n[data-aurora-switch=\"lg\"]      [data-radix-switch-thumb]                       { transform: translateX(3px);  }\n[data-aurora-switch=\"lg\"][data-state=\"checked\"]      [data-radix-switch-thumb] { transform: translateX(23px); }\n\n@media (prefers-reduced-motion: reduce) {\n  [data-aurora-switch], [data-aurora-switch] [data-radix-switch-thumb] { transition: none; }\n}\n\n  /* ─── toast ─── */\n    .aurora-toast-enter { animation: toast-slide-in  0.28s cubic-bezier(0.16,1,0.3,1) forwards; }\n    .aurora-toast-exit  { animation: aurora-toast-out 0.22s ease-in             forwards; }\n\n  /* ─── color-picker ─── */\n.aurora-cp {\n  width: 100%;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n  padding: 20px;\n  border-radius: var(--radius-3, 16px);\n  background: var(--aurora-panel-strong);\n  border: 1px solid var(--aurora-border-default);\n  font-family: var(--font-sans, \"Inter\", system-ui, sans-serif);\n  color: var(--aurora-text-primary);\n}\n.aurora-cp *,\n.aurora-cp *::before,\n.aurora-cp *::after { box-sizing: border-box; }\n.aurora-cp__label {\n  font-family: var(--font-sans, \"Inter\", system-ui, sans-serif);\n  font-size: 12px;\n  font-weight: 700;\n  letter-spacing: 0.08em;\n  text-transform: uppercase;\n  color: var(--aurora-text-muted);\n  margin: 0;\n}\n.aurora-cp__sv {\n  position: relative;\n  width: 100%;\n  height: 160px;\n  border-radius: var(--radius-2, 12px);\n  border: 1px solid var(--aurora-border-default);\n  cursor: crosshair;\n  touch-action: none;\n  overflow: hidden;\n  outline: none;\n}\n.aurora-cp__sv:focus-visible {\n  box-shadow: 0 0 0 2px color-mix(in srgb, var(--aurora-accent-primary) 60%, transparent);\n}\n.aurora-cp__sv-handle {\n  position: absolute;\n  width: 18px;\n  height: 18px;\n  border-radius: 999px;\n  border: 2px solid #ffffff;\n  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45), 0 1px 4px rgba(0, 0, 0, 0.5);\n  transform: translate(-50%, -50%);\n  pointer-events: none;\n}\n.aurora-cp__hue {\n  position: relative;\n  width: 100%;\n  height: 14px;\n  border-radius: 999px;\n  cursor: pointer;\n  touch-action: none;\n  outline: none;\n  background: linear-gradient(\n    90deg,\n    #ff0000 0%,\n    #ffff00 17%,\n    #00ff00 33%,\n    #00ffff 50%,\n    #0000ff 67%,\n    #ff00ff 83%,\n    #ff0000 100%\n  );\n  border: 1px solid var(--aurora-border-strong);\n}\n.aurora-cp__hue:focus-visible {\n  box-shadow: 0 0 0 2px color-mix(in srgb, var(--aurora-accent-primary) 60%, transparent);\n}\n.aurora-cp__hue-handle {\n  position: absolute;\n  top: 50%;\n  width: 16px;\n  height: 16px;\n  border-radius: 999px;\n  border: 2px solid #ffffff;\n  background: var(--aurora-cp-color, #29b6f6);\n  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45), 0 1px 4px rgba(0, 0, 0, 0.5);\n  transform: translate(-50%, -50%);\n  pointer-events: none;\n}\n.aurora-cp__row {\n  display: flex;\n  align-items: stretch;\n  gap: 12px;\n}\n.aurora-cp__preview {\n  flex: none;\n  width: 64px;\n  height: 56px;\n  border-radius: var(--radius-2, 12px);\n  background: var(--aurora-cp-color, #29b6f6);\n  border: 1px solid color-mix(in srgb, #ffffff 16%, transparent);\n}\n.aurora-cp__input-wrap {\n  flex: 1 1 auto;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  height: 56px;\n  padding: 0 14px;\n  border-radius: var(--radius-2, 12px);\n  background: var(--aurora-control-surface);\n  border: 1px solid var(--aurora-border-strong);\n  transition: border-color 120ms var(--aurora-motion-ease, ease),\n    box-shadow 120ms var(--aurora-motion-ease, ease);\n}\n.aurora-cp__input-wrap:focus-within {\n  border-color: color-mix(in srgb, var(--aurora-accent-primary) 70%, var(--aurora-border-strong));\n  box-shadow: 0 0 0 1px color-mix(in srgb, var(--aurora-accent-primary) 40%, transparent);\n}\n.aurora-cp__hash {\n  font-family: var(--font-mono, \"JetBrains Mono\", monospace);\n  font-size: 16px;\n  font-weight: 600;\n  color: var(--aurora-text-muted);\n  user-select: none;\n}\n.aurora-cp__input {\n  flex: 1 1 auto;\n  min-width: 0;\n  background: transparent;\n  border: none;\n  outline: none;\n  color: var(--aurora-text-primary);\n  font-family: var(--font-mono, \"JetBrains Mono\", monospace);\n  font-size: 16px;\n  font-weight: 600;\n  letter-spacing: 0.04em;\n  text-transform: uppercase;\n  padding: 0;\n}\n.aurora-cp__swatches {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 10px;\n}\n.aurora-cp__swatch {\n  width: 44px;\n  height: 44px;\n  flex: none;\n  border-radius: var(--radius-2, 12px);\n  background: var(--aurora-cp-swatch, #29b6f6);\n  border: 1px solid color-mix(in srgb, #ffffff 14%, transparent);\n  cursor: pointer;\n  padding: 0;\n  outline: none;\n  transition: transform 120ms var(--aurora-motion-ease, ease),\n    box-shadow 120ms var(--aurora-motion-ease, ease);\n}\n.aurora-cp__swatch:hover {\n  transform: translateY(-1px);\n}\n.aurora-cp__swatch:focus-visible {\n  box-shadow: 0 0 0 2px color-mix(in srgb, var(--aurora-accent-primary) 60%, transparent);\n}\n.aurora-cp__swatch[data-selected=\"true\"] {\n  box-shadow:\n    0 0 0 2px var(--aurora-panel-strong),\n    0 0 0 4px var(--aurora-accent-primary);\n}\n\n  /* ─── drawer ─── */\n.aurora-drawer-overlay {\n  position: fixed;\n  inset: 0;\n  z-index: 50;\n  background: var(--aurora-overlay);\n}\n.aurora-drawer-overlay[data-state=\"open\"] {\n  animation: aurora-drawer-overlay-in var(--motion-duration-medium, 240ms) var(--motion-ease-out, cubic-bezier(0.2, 0.8, 0.2, 1));\n}\n.aurora-drawer-overlay[data-state=\"closed\"] {\n  animation: aurora-drawer-overlay-out var(--motion-duration-fast, 160ms) var(--motion-ease-in-out, cubic-bezier(0.4, 0, 0.2, 1));\n}\n\n.aurora-drawer-content {\n  position: fixed;\n  inset-inline: 0;\n  bottom: 0;\n  z-index: 50;\n  display: flex;\n  flex-direction: column;\n  max-height: 82vh;\n  width: 100%;\n  overflow: hidden;\n  border-top: 1px solid var(--aurora-border-strong);\n  border-top-left-radius: var(--aurora-radius-3, 22px);\n  border-top-right-radius: var(--aurora-radius-3, 22px);\n  background: var(--aurora-panel-strong);\n  color: var(--aurora-text-primary);\n  box-shadow: 0 -28px 72px rgba(0, 0, 0, 0.42), var(--aurora-highlight-strong);\n  outline: none;\n}\n.aurora-drawer-content[data-state=\"open\"] {\n  animation: aurora-drawer-in var(--motion-duration-slow, 360ms) var(--motion-ease-out, cubic-bezier(0.2, 0.8, 0.2, 1));\n}\n.aurora-drawer-content[data-state=\"closed\"] {\n  animation: aurora-drawer-out var(--motion-duration-medium, 240ms) var(--motion-ease-in-out, cubic-bezier(0.4, 0, 0.2, 1));\n}\n\n.aurora-drawer-handle-row {\n  display: flex;\n  justify-content: center;\n  padding-top: 12px;\n  padding-bottom: 4px;\n}\n.aurora-drawer-handle {\n  width: 44px;\n  height: 4px;\n  border-radius: 999px;\n  background: color-mix(in srgb, var(--aurora-accent-primary) 60%, transparent);\n}\n\n.aurora-drawer-header {\n  padding: 12px 28px 18px;\n}\n.aurora-drawer-header[data-divider=\"true\"] {\n  border-bottom: 1px solid var(--aurora-border-default);\n}\n.aurora-drawer-title {\n  margin: 0;\n  font-family: var(--font-display, 'Manrope', system-ui, sans-serif);\n  font-size: 22px;\n  font-weight: 700;\n  letter-spacing: -0.01em;\n  color: var(--aurora-text-primary);\n}\n.aurora-drawer-description {\n  margin: 6px 0 0;\n  font-size: 15px;\n  line-height: 1.5;\n  color: var(--aurora-text-muted);\n}\n\n.aurora-drawer-body {\n  min-height: 0;\n  flex: 1;\n  overflow-y: auto;\n  padding: 20px 28px 28px;\n  font-size: 16px;\n  line-height: 1.5;\n  color: var(--aurora-text-primary);\n}\n\n  /* ─── range-slider ─── */\n.aurora-range-slider {\n  --aurora-range-tone: var(--aurora-accent-primary);\n  position: relative;\n  width: 100%;\n  height: 20px;\n  display: flex;\n  align-items: center;\n}\n.aurora-range-slider__track {\n  position: absolute;\n  left: 0;\n  right: 0;\n  height: 6px;\n  border-radius: 999px;\n  background: var(--aurora-control-surface);\n  border: 1px solid var(--aurora-border-strong);\n  box-sizing: border-box;\n}\n.aurora-range-slider__fill {\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  border-radius: 999px;\n  background: var(--aurora-range-tone);\n  left: var(--aurora-range-from, 0%);\n  right: calc(100% - var(--aurora-range-to, 100%));\n}\n.aurora-range-slider__input {\n  position: absolute;\n  left: 0;\n  width: 100%;\n  height: 20px;\n  margin: 0;\n  padding: 0;\n  background: transparent;\n  pointer-events: none;\n  appearance: none;\n  -webkit-appearance: none;\n}\n.aurora-range-slider__input:focus-visible {\n  outline: none;\n}\n.aurora-range-slider__input::-webkit-slider-runnable-track {\n  height: 20px;\n  background: transparent;\n  border: none;\n}\n.aurora-range-slider__input::-moz-range-track {\n  height: 20px;\n  background: transparent;\n  border: none;\n}\n.aurora-range-slider__input::-webkit-slider-thumb {\n  -webkit-appearance: none;\n  appearance: none;\n  pointer-events: auto;\n  width: 18px;\n  height: 18px;\n  margin-top: 1px;\n  border-radius: 999px;\n  background: var(--aurora-panel-strong);\n  border: 2px solid var(--aurora-range-tone);\n  cursor: pointer;\n  box-shadow:\n    0 0 0 1px color-mix(in srgb, var(--aurora-range-tone) 45%, transparent),\n    0 0 12px color-mix(in srgb, var(--aurora-range-tone) 35%, transparent);\n  transition: box-shadow 120ms var(--aurora-motion-ease, ease);\n}\n.aurora-range-slider__input::-moz-range-thumb {\n  pointer-events: auto;\n  width: 18px;\n  height: 18px;\n  border-radius: 999px;\n  background: var(--aurora-panel-strong);\n  border: 2px solid var(--aurora-range-tone);\n  cursor: pointer;\n  box-shadow:\n    0 0 0 1px color-mix(in srgb, var(--aurora-range-tone) 45%, transparent),\n    0 0 12px color-mix(in srgb, var(--aurora-range-tone) 35%, transparent);\n  transition: box-shadow 120ms var(--aurora-motion-ease, ease);\n}\n.aurora-range-slider__input:hover::-webkit-slider-thumb,\n.aurora-range-slider__input:focus-visible::-webkit-slider-thumb {\n  box-shadow:\n    0 0 0 1px color-mix(in srgb, var(--aurora-range-tone) 60%, transparent),\n    0 0 16px color-mix(in srgb, var(--aurora-range-tone) 50%, transparent);\n}\n.aurora-range-slider__input:hover::-moz-range-thumb,\n.aurora-range-slider__input:focus-visible::-moz-range-thumb {\n  box-shadow:\n    0 0 0 1px color-mix(in srgb, var(--aurora-range-tone) 60%, transparent),\n    0 0 16px color-mix(in srgb, var(--aurora-range-tone) 50%, transparent);\n}\n.aurora-range-slider[data-disabled=\"true\"] {\n  opacity: 0.55;\n}\n.aurora-range-slider[data-disabled=\"true\"] .aurora-range-slider__input {\n  cursor: not-allowed;\n}\n.aurora-range-slider[data-disabled=\"true\"] .aurora-range-slider__input::-webkit-slider-thumb {\n  cursor: not-allowed;\n}\n.aurora-range-slider[data-disabled=\"true\"] .aurora-range-slider__input::-moz-range-thumb {\n  cursor: not-allowed;\n}\n\n/* ─── resizable-panels ─── */\n.aurora-resizable-panels__input::-webkit-slider-thumb {\n  -webkit-appearance: none;\n  appearance: none;\n  width: 6px;\n  height: 32px;\n  border-radius: var(--aurora-radius-1);\n  background: var(--aurora-panel-strong);\n  border: 1px solid var(--aurora-accent-primary);\n  cursor: col-resize;\n  box-shadow: 0 0 8px color-mix(in srgb, var(--aurora-accent-primary) 35%, transparent);\n  transition: box-shadow 120ms var(--aurora-motion-ease, ease);\n}\n.aurora-resizable-panels__input::-moz-range-thumb {\n  width: 6px;\n  height: 32px;\n  border-radius: var(--aurora-radius-1);\n  background: var(--aurora-panel-strong);\n  border: 1px solid var(--aurora-accent-primary);\n  cursor: col-resize;\n  box-shadow: 0 0 8px color-mix(in srgb, var(--aurora-accent-primary) 35%, transparent);\n  transition: box-shadow 120ms var(--aurora-motion-ease, ease);\n}\n.aurora-resizable-panels__input:hover::-webkit-slider-thumb,\n.aurora-resizable-panels__input:focus-visible::-webkit-slider-thumb {\n  box-shadow: 0 0 12px color-mix(in srgb, var(--aurora-accent-primary) 50%, transparent);\n}\n.aurora-resizable-panels__input:hover::-moz-range-thumb,\n.aurora-resizable-panels__input:focus-visible::-moz-range-thumb {\n  box-shadow: 0 0 12px color-mix(in srgb, var(--aurora-accent-primary) 50%, transparent);\n}\n\n  /* ─── slider ─── */\n.aurora-slider-cd {\n  --aurora-slider-tone: var(--aurora-accent-primary);\n  height: 20px;\n  width: 100%;\n  cursor: pointer;\n  appearance: none;\n  -webkit-appearance: none;\n  background: transparent;\n}\n.aurora-slider-cd:focus-visible { outline: none; }\n.aurora-slider-cd::-webkit-slider-runnable-track {\n  height: 6px;\n  border-radius: 999px;\n  background:\n    linear-gradient(\n      90deg,\n      var(--aurora-slider-tone) 0%,\n      var(--aurora-slider-tone) var(--aurora-slider-value, 0%),\n      var(--aurora-control-surface) var(--aurora-slider-value, 0%),\n      var(--aurora-control-surface) 100%\n    );\n  border: 1px solid var(--aurora-border-strong);\n}\n.aurora-slider-cd::-webkit-slider-thumb {\n  -webkit-appearance: none;\n  appearance: none;\n  width: 16px;\n  height: 16px;\n  margin-top: -6px;\n  border-radius: 999px;\n  background: var(--aurora-slider-tone);\n  border: 2px solid var(--aurora-panel-strong);\n  box-shadow:\n    0 0 0 1px color-mix(in srgb, var(--aurora-slider-tone) 45%, transparent),\n    0 0 12px color-mix(in srgb, var(--aurora-slider-tone) 35%, transparent);\n  transition: box-shadow 120ms var(--aurora-motion-ease, ease);\n}\n.aurora-slider-cd:hover::-webkit-slider-thumb,\n.aurora-slider-cd:focus-visible::-webkit-slider-thumb {\n  box-shadow:\n    0 0 0 1px color-mix(in srgb, var(--aurora-slider-tone) 60%, transparent),\n    0 0 16px color-mix(in srgb, var(--aurora-slider-tone) 50%, transparent);\n}\n.aurora-slider-cd::-moz-range-track {\n  height: 6px;\n  border-radius: 999px;\n  background: var(--aurora-control-surface);\n  border: 1px solid var(--aurora-border-strong);\n}\n.aurora-slider-cd::-moz-range-progress {\n  height: 6px;\n  border-radius: 999px;\n  background: var(--aurora-slider-tone);\n}\n.aurora-slider-cd::-moz-range-thumb {\n  width: 14px;\n  height: 14px;\n  border-radius: 999px;\n  background: var(--aurora-slider-tone);\n  border: 2px solid var(--aurora-panel-strong);\n  box-shadow:\n    0 0 0 1px color-mix(in srgb, var(--aurora-slider-tone) 45%, transparent),\n    0 0 12px color-mix(in srgb, var(--aurora-slider-tone) 35%, transparent);\n}\n\n  /* ─── action ─── */\n.aurora-action {\n  --aurora-action-size: 32px;\n  --aurora-action-icon: 16px;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n  box-sizing: border-box;\n  min-width: var(--aurora-action-size);\n  height: var(--aurora-action-size);\n  padding: 0;\n  width: var(--aurora-action-size);\n  border-radius: 10px;\n  border: 1px solid var(--aurora-border-default);\n  background: var(--aurora-control-surface);\n  color: var(--aurora-text-muted);\n  font-family: var(--font-sans, Inter, sans-serif);\n  font-size: var(--aurora-type-control, 13px);\n  font-weight: 600;\n  line-height: 1;\n  cursor: pointer;\n  -webkit-appearance: none;\n  appearance: none;\n  outline: none;\n  transition:\n    color var(--motion-duration-fast, 160ms) var(--motion-ease-out, ease),\n    border-color var(--motion-duration-fast, 160ms) var(--motion-ease-out, ease),\n    background var(--motion-duration-fast, 160ms) var(--motion-ease-out, ease),\n    transform var(--motion-duration-fast, 160ms) var(--motion-ease-out, ease);\n}\n.aurora-action svg {\n  width: var(--aurora-action-icon);\n  height: var(--aurora-action-icon);\n  flex: none;\n}\n.aurora-action:hover:not(:disabled) {\n  color: var(--aurora-accent-primary);\n  border-color: color-mix(in srgb, var(--aurora-accent-primary) 30%, var(--aurora-border-default));\n  background: color-mix(in srgb, var(--aurora-accent-primary) 6%, var(--aurora-control-surface));\n}\n.aurora-action:active:not(:disabled) {\n  transform: translateY(0.5px);\n}\n.aurora-action:focus-visible {\n  border-color: var(--aurora-accent-primary);\n  box-shadow: 0 0 0 3px var(--aurora-focus-ring-strong);\n}\n.aurora-action:disabled {\n  cursor: not-allowed;\n  opacity: 0.55;\n  color: var(--aurora-disabled-text);\n}\n\n/* icon + text: borderless ghost row */\n.aurora-action[data-has-label=\"true\"] {\n  width: auto;\n  padding: 0 10px 0 8px;\n  border-color: transparent;\n  background: transparent;\n}\n.aurora-action[data-has-label=\"true\"]:hover:not(:disabled) {\n  border-color: transparent;\n  background: color-mix(in srgb, var(--aurora-accent-primary) 8%, transparent);\n}\n.aurora-action__label {\n  color: var(--aurora-text-primary);\n  white-space: nowrap;\n}\n\n/* pressed toggle — rose/pink-tinted affirmative state */\n.aurora-action[data-pressed=\"true\"] {\n  color: var(--aurora-accent-pink);\n  border-color: var(--aurora-accent-pink-border);\n  background: var(--aurora-accent-pink-surface);\n}\n.aurora-action[data-pressed=\"true\"]:hover:not(:disabled) {\n  color: var(--aurora-accent-pink-strong);\n  border-color: color-mix(in srgb, var(--aurora-accent-pink) 46%, transparent);\n  background: color-mix(in srgb, var(--aurora-accent-pink) 18%, var(--aurora-panel-medium));\n}\n\n/* small */\n.aurora-action[data-size=\"sm\"] {\n  --aurora-action-size: 28px;\n  --aurora-action-icon: 14px;\n  border-radius: 8px;\n  font-size: 12px;\n}\n.aurora-action[data-size=\"sm\"][data-has-label=\"true\"] {\n  padding: 0 8px 0 6px;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .aurora-action { transition: none; }\n  .aurora-action:active:not(:disabled) { transform: none; }\n}\n\n  /* ─── branch ─── */\n.aurora-branch .aurora-branch__content {\n  font-family: var(--font-sans);\n  font-size: 17px;\n  line-height: 1.5;\n  color: var(--aurora-text-primary);\n  padding: 18px 20px 20px;\n}\n.aurora-branch .aurora-branch__toolbar {\n  display: flex;\n  align-items: center;\n  gap: 14px;\n  padding: 12px 14px;\n  border-top: 1px solid var(--aurora-border-default);\n  background: color-mix(in srgb, var(--aurora-accent-primary) 4%, transparent);\n}\n.aurora-branch .aurora-branch__label {\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  font-family: var(--font-display);\n  font-size: 13px;\n  font-weight: 700;\n  letter-spacing: 0.14em;\n  text-transform: uppercase;\n  color: var(--aurora-text-muted);\n  white-space: nowrap;\n}\n.aurora-branch .aurora-branch__dots {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n}\n.aurora-branch .aurora-branch__dot {\n  width: 7px;\n  height: 7px;\n  border-radius: 999px;\n  background: color-mix(in srgb, var(--aurora-accent-primary) 55%, transparent);\n  transition: width var(--motion-duration-fast, 140ms) var(--motion-ease-out, ease),\n    background var(--motion-duration-fast, 140ms) var(--motion-ease-out, ease);\n}\n.aurora-branch .aurora-branch__dot[data-active=\"true\"] {\n  width: 22px;\n  background: var(--aurora-rose-gradient);\n  box-shadow: 0 0 6px color-mix(in srgb, var(--aurora-accent-pink) 50%, transparent);\n}\n.aurora-branch .aurora-branch__meta {\n  font-family: var(--font-mono);\n  font-size: 13px;\n  color: var(--aurora-text-muted);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  min-width: 0;\n}\n.aurora-branch .aurora-branch__counter {\n  font-family: var(--font-mono);\n  font-size: 13px;\n  font-weight: 600;\n  color: var(--aurora-text-primary);\n  white-space: nowrap;\n  font-variant-numeric: tabular-nums;\n}\n.aurora-branch .aurora-branch__spacer { flex: 1 1 auto; min-width: 8px; }\n.aurora-branch .aurora-branch__group { display: inline-flex; align-items: center; gap: 8px; }\n\n  /* ─── checkpoint ─── */\n  .aurora-checkpoint--interactive:hover { border-color: var(--aurora-border-strong); background: var(--aurora-hover-bg); }\n  .aurora-checkpoint--interactive:focus-visible { outline: none; box-shadow: var(--aurora-active-glow), var(--aurora-shadow-medium); }\n\n  /* ─── confirmation ─── */\n.aurora-confirm {\n  display: grid;\n  gap: 16px;\n  padding: 22px;\n  background: var(--aurora-surface-raised);\n  border: 1px solid var(--aurora-border-strong);\n  border-radius: var(--aurora-radius-1);\n  box-shadow: var(--aurora-shadow-medium), var(--aurora-highlight-medium);\n  box-sizing: border-box;\n  color: var(--aurora-text-primary);\n}\n.aurora-confirm__head {\n  display: grid;\n  grid-template-columns: auto minmax(0, 1fr);\n  gap: 16px;\n  align-items: start;\n}\n.aurora-confirm__badge {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 48px;\n  height: 48px;\n  border-radius: 14px;\n  border: 1px solid var(--aurora-border-strong);\n  background: var(--aurora-control-surface);\n  color: var(--aurora-text-muted);\n  flex-shrink: 0;\n}\n.aurora-confirm--danger .aurora-confirm__badge {\n  border-color: color-mix(in srgb, var(--aurora-accent-pink) 38%, var(--aurora-border-strong));\n  background: color-mix(in srgb, var(--aurora-accent-pink) 14%, var(--aurora-control-surface));\n  color: var(--aurora-accent-pink);\n}\n.aurora-confirm__text { display: grid; gap: 4px; min-width: 0; }\n.aurora-confirm__title {\n  margin: 0;\n  font-family: var(--font-sans, Inter, sans-serif);\n  font-weight: 700;\n  font-size: 21px;\n  line-height: 1.2;\n  letter-spacing: -0.01em;\n  color: var(--aurora-text-primary);\n}\n.aurora-confirm__desc {\n  margin: 0;\n  font-family: var(--font-sans, Inter, sans-serif);\n  font-size: 15px;\n  line-height: 1.45;\n  color: var(--aurora-text-muted);\n}\n.aurora-confirm__details {\n  display: grid;\n  gap: 8px;\n  padding: 14px 16px;\n  border-radius: 12px;\n  border: 1px solid var(--aurora-border-strong);\n  background: color-mix(in srgb, var(--aurora-page-bg) 55%, transparent);\n}\n.aurora-confirm__detail {\n  display: grid;\n  grid-template-columns: auto minmax(0, 1fr);\n  gap: 10px;\n  align-items: baseline;\n  font-family: var(--font-mono, monospace);\n  font-size: 14px;\n  line-height: 1.45;\n  color: var(--aurora-text-primary);\n}\n.aurora-confirm__chevron { color: var(--aurora-text-muted); flex-shrink: 0; }\n.aurora-confirm--danger .aurora-confirm__chevron { color: color-mix(in srgb, var(--aurora-accent-pink) 80%, var(--aurora-text-muted)); }\n.aurora-confirm__actions { display: flex; justify-content: flex-end; gap: 12px; }\n\n  /* ─── connection ─── */\n.aurora-connection {\n  display: inline-flex;\n  align-items: center;\n  gap: 0;\n  color: var(--aurora-text-primary);\n  --conn-tone: var(--aurora-text-muted);\n}\n.aurora-connection[data-status=\"ok\"]      { --conn-tone: var(--aurora-success); }\n.aurora-connection[data-status=\"active\"]  { --conn-tone: var(--aurora-accent-primary); }\n.aurora-connection[data-status=\"error\"]   { --conn-tone: var(--aurora-error); }\n.aurora-connection[data-status=\"pending\"] { --conn-tone: var(--aurora-text-muted); }\n\n.aurora-connection__node {\n  display: inline-flex;\n  align-items: center;\n  gap: 10px;\n  padding: 10px 16px;\n  border-radius: 12px;\n  border: 1px solid var(--aurora-border-default);\n  background: var(--aurora-control-surface);\n  box-shadow: var(--aurora-highlight-medium);\n  box-sizing: border-box;\n}\n.aurora-connection__dot {\n  width: 9px;\n  height: 9px;\n  border-radius: 999px;\n  background: var(--conn-tone);\n  flex-shrink: 0;\n}\n.aurora-connection[data-status=\"active\"] .aurora-connection__dot {\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--conn-tone) 26%, transparent);\n}\n.aurora-connection__name {\n  font-family: var(--font-sans, Inter, sans-serif);\n  font-weight: 700;\n  font-size: 17px;\n  line-height: 1.1;\n  letter-spacing: -0.01em;\n  color: var(--aurora-text-primary);\n  white-space: nowrap;\n}\n\n.aurora-connection__edge {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  align-self: center;\n  flex-shrink: 0;\n  width: 96px;\n  height: 2px;\n  margin: 0 8px;\n}\n.aurora-connection__label {\n  position: absolute;\n  bottom: calc(100% + 6px);\n  left: 50%;\n  transform: translateX(-50%);\n  font-family: var(--font-mono, monospace);\n  font-size: 13px;\n  font-weight: 500;\n  line-height: 1;\n  letter-spacing: 0.01em;\n  color: var(--conn-tone);\n  white-space: nowrap;\n}\n.aurora-connection__line {\n  flex: 1 1 auto;\n  height: 2px;\n  border-radius: 999px;\n  background: var(--conn-tone);\n}\n.aurora-connection[data-dashed=\"true\"] .aurora-connection__line {\n  height: 0;\n  border-top: 2px dashed var(--conn-tone);\n  border-radius: 0;\n  background: none;\n}\n.aurora-connection[data-status=\"active\"] .aurora-connection__line {\n  background: none;\n  height: 0;\n  border-top: 2px dashed var(--conn-tone);\n  border-radius: 0;\n}\n.aurora-connection[data-flowing=\"true\"] .aurora-connection__line {\n  background-image: repeating-linear-gradient(\n    90deg,\n    var(--conn-tone) 0,\n    var(--conn-tone) 6px,\n    transparent 6px,\n    transparent 12px\n  );\n  background-size: 12px 2px;\n  background-repeat: repeat-x;\n  background-position: 0 0;\n  border-top: 0;\n  height: 2px;\n  animation: aurora-connection-flow var(--motion-duration-slow, 360ms) linear infinite;\n}\n@media (prefers-reduced-motion: reduce) {\n  .aurora-connection[data-flowing=\"true\"] .aurora-connection__line { animation: none; }\n}\n.aurora-connection__arrow {\n  position: relative;\n  width: 0;\n  height: 0;\n  flex-shrink: 0;\n  border-top: 5px solid transparent;\n  border-bottom: 5px solid transparent;\n}\n.aurora-connection__arrow--end {\n  border-left: 7px solid var(--conn-tone);\n  margin-left: 1px;\n}\n.aurora-connection__arrow--start {\n  border-right: 7px solid var(--conn-tone);\n  margin-right: 1px;\n}\n\n  /* ─── edge ─── */\n.aurora-edge {\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  padding: 7px 14px;\n  border-radius: var(--radius-pill, 999px);\n  border: 1px solid var(--edge-border);\n  background: var(--edge-surface);\n  box-shadow: var(--aurora-highlight-medium);\n  box-sizing: border-box;\n  font-family: var(--font-sans, Inter, sans-serif);\n  font-weight: 600;\n  font-size: 15px;\n  line-height: 1.1;\n  letter-spacing: -0.01em;\n  white-space: nowrap;\n  color: var(--edge-tone);\n  --edge-tone: var(--aurora-text-muted);\n  --edge-border: color-mix(in srgb, var(--edge-tone) 34%, transparent);\n  --edge-surface: color-mix(in srgb, var(--edge-tone) 12%, var(--aurora-panel-medium));\n}\n.aurora-edge[data-tone=\"active\"]  { --edge-tone: var(--aurora-accent-primary); }\n.aurora-edge[data-tone=\"success\"] { --edge-tone: var(--aurora-success); }\n.aurora-edge[data-tone=\"warn\"]    { --edge-tone: var(--aurora-warn); }\n.aurora-edge[data-tone=\"error\"]   { --edge-tone: var(--aurora-error); }\n.aurora-edge[data-tone=\"muted\"]   { --edge-tone: var(--aurora-text-muted); }\n\n.aurora-edge[data-tone=\"active\"] {\n  box-shadow: var(--aurora-highlight-medium),\n    0 0 0 1px color-mix(in srgb, var(--edge-tone) 26%, transparent),\n    0 0 18px color-mix(in srgb, var(--edge-tone) 22%, transparent);\n}\n\n.aurora-edge__dot {\n  width: 8px;\n  height: 8px;\n  border-radius: 999px;\n  background: var(--edge-tone);\n  flex-shrink: 0;\n}\n.aurora-edge[data-tone=\"active\"] .aurora-edge__dot {\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--edge-tone) 26%, transparent);\n}\n\n.aurora-edge__arrow {\n  font-family: var(--font-mono, monospace);\n  font-weight: 500;\n  color: color-mix(in srgb, var(--edge-tone) 78%, transparent);\n  flex-shrink: 0;\n}\n\n.aurora-edge[data-dashed=\"true\"] {\n  border-style: dashed;\n}\n.aurora-edge[data-flowing=\"true\"] {\n  border-style: dashed;\n  background-image: var(--edge-surface),\n    repeating-linear-gradient(\n      90deg,\n      var(--edge-tone) 0,\n      var(--edge-tone) 6px,\n      transparent 6px,\n      transparent 12px\n    );\n  background-position: 0 0, 0 0;\n  background-size: 100% 100%, 12px 1px;\n  background-repeat: no-repeat, repeat-x;\n  animation: aurora-edge-flow var(--motion-duration-slow, 360ms) linear infinite;\n}\n@media (prefers-reduced-motion: reduce) {\n  .aurora-edge[data-flowing=\"true\"] { animation: none; }\n}\n\n  /* ─── loader ─── */\n  .aurora-ai-loader__spinner {\n    border: 2px solid color-mix(in srgb, var(--aurora-loader-tone) 22%, transparent);\n    border-top-color: var(--aurora-loader-tone);\n    border-radius: 9999px;\n    animation: aurora-loader-spin 0.7s linear infinite;\n  }\n  .aurora-ai-loader__dot {\n    background: var(--aurora-loader-tone);\n    border-radius: 9999px;\n    animation: aurora-loader-dot 1.2s ease-in-out infinite;\n  }\n  .aurora-ai-loader__bar {\n    background: var(--aurora-loader-tone);\n    border-radius: 9999px;\n    transform-origin: center bottom;\n    animation: aurora-loader-bar 1s ease-in-out infinite;\n  }\n  .aurora-ai-loader__pulse-frame {\n    border: 1px solid color-mix(in srgb, var(--aurora-loader-tone) 38%, transparent);\n    border-radius: 9999px;\n  }\n  .aurora-ai-loader__pulse-ring {\n    border: 1.5px solid var(--aurora-loader-tone);\n    border-radius: 9999px;\n    animation: aurora-loader-pulse-ring 1.4s ease-out infinite;\n  }\n  .aurora-ai-loader__pulse-core {\n    background: var(--aurora-loader-tone);\n    border-radius: 9999px;\n    animation: aurora-loader-pulse-core 1.4s ease-in-out infinite;\n  }\n  @media (prefers-reduced-motion: reduce) {\n    .aurora-ai-loader__spinner,\n    .aurora-ai-loader__dot,\n    .aurora-ai-loader__bar,\n    .aurora-ai-loader__pulse-ring,\n    .aurora-ai-loader__pulse-core {\n      animation-duration: 0.001ms;\n      animation-iteration-count: 1;\n    }\n  }\n\n  /* ─── mic-selector ─── */\n.aurora-mic {\n  display: grid;\n  gap: 14px;\n  padding: 16px 18px;\n  border: 1px solid var(--aurora-border-strong);\n  border-radius: var(--aurora-radius-2);\n  background: var(--aurora-surface-raised);\n  box-shadow: var(--aurora-shadow-medium), var(--aurora-highlight-medium);\n  box-sizing: border-box;\n}\n.aurora-mic__head {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 12px;\n}\n.aurora-mic__title {\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  color: var(--aurora-accent-primary);\n  font-family: var(--aurora-font-sans, Inter, sans-serif);\n  font-size: var(--aurora-type-control, 14px);\n  font-weight: 680;\n  letter-spacing: var(--aurora-letter-ui, 0);\n  line-height: 1;\n}\n.aurora-mic__mute {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 34px;\n  height: 34px;\n  flex-shrink: 0;\n  border: 1px solid var(--aurora-border-strong);\n  border-radius: 10px;\n  background: var(--aurora-panel-strong);\n  color: var(--aurora-accent-primary);\n  cursor: pointer;\n  box-shadow: inset 0 1px 0 rgba(255,255,255,0.045);\n  transition: background 150ms var(--motion-ease-out, ease),\n    border-color 150ms var(--motion-ease-out, ease),\n    color 150ms var(--motion-ease-out, ease),\n    box-shadow 200ms var(--motion-ease-out, ease);\n}\n.aurora-mic__mute:hover {\n  border-color: color-mix(in srgb, var(--aurora-accent-primary) 55%, var(--aurora-border-strong));\n  background: color-mix(in srgb, var(--aurora-accent-primary) 8%, var(--aurora-panel-strong));\n}\n.aurora-mic__mute:focus-visible {\n  outline: none;\n  box-shadow: inset 0 1px 0 rgba(255,255,255,0.045),\n    0 0 0 1px color-mix(in srgb, var(--aurora-accent-primary) 45%, transparent),\n    0 0 0 3px color-mix(in srgb, var(--aurora-accent-primary) 22%, transparent);\n}\n.aurora-mic__mute[aria-pressed=\"true\"] {\n  color: var(--aurora-error);\n  border-color: color-mix(in srgb, var(--aurora-error) 46%, var(--aurora-border-strong));\n  background: color-mix(in srgb, var(--aurora-error) 10%, var(--aurora-panel-strong));\n}\n.aurora-mic__mute:disabled {\n  opacity: 0.45;\n  cursor: not-allowed;\n  box-shadow: inset 0 1px 0 rgba(255,255,255,0.045);\n}\n\n/* Live level meter — a row of cyan bars, one peaking center dot */\n.aurora-mic__meter {\n  display: flex;\n  align-items: center;\n  gap: 5px;\n  height: 26px;\n  padding: 0 2px;\n}\n.aurora-mic__bar {\n  flex: 1 1 0;\n  min-width: 0;\n  height: 6px;\n  border-radius: 999px;\n  background: var(--aurora-accent-primary);\n  transform-origin: center;\n  animation: aurora-mic-pulse 1.2s var(--motion-ease-in-out, ease-in-out) infinite;\n}\n.aurora-mic__bar--peak {\n  width: 16px;\n  height: 16px;\n  flex: 0 0 16px;\n  border-radius: 999px;\n  box-shadow: 0 0 0 4px color-mix(in srgb, var(--aurora-accent-primary) 16%, transparent);\n}\n.aurora-mic--muted .aurora-mic__bar {\n  background: color-mix(in srgb, var(--aurora-accent-primary) 30%, var(--aurora-border-default));\n  animation: none;\n}\n.aurora-mic--muted .aurora-mic__bar--peak {\n  box-shadow: none;\n}\n@media (prefers-reduced-motion: reduce) {\n  .aurora-mic__bar { animation: none; transform: scaleY(0.8); }\n}\n\n  /* ─── package-info ─── */\n.aurora-pkg {\n  display: grid; gap: 13px;\n  border: 1px solid var(--aurora-border-strong);\n  border-radius: var(--aurora-radius-1);\n  background: var(--aurora-surface-raised);\n  box-shadow: var(--aurora-shadow-medium), var(--aurora-highlight-medium);\n  padding: 16px 18px;\n  box-sizing: border-box;\n}\n.aurora-pkg--compact { gap: 0; padding: 13px 15px; }\n\n.aurora-pkg__head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: start; }\n.aurora-pkg--compact .aurora-pkg__head { gap: 12px; align-items: center; }\n\n.aurora-pkg__tile {\n  display: inline-flex; align-items: center; justify-content: center;\n  width: 60px; height: 60px; border-radius: 12px; flex-shrink: 0;\n  border: 1px solid color-mix(in srgb, var(--axon-orange) 30%, var(--aurora-border-strong));\n  background:\n    linear-gradient(180deg, color-mix(in srgb, var(--axon-orange) 14%, transparent), transparent 62%),\n    var(--aurora-control-surface);\n  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);\n  color: var(--axon-orange);\n}\n.aurora-pkg--compact .aurora-pkg__tile { width: 42px; height: 42px; border-radius: 10px; }\n\n.aurora-pkg__body { min-width: 0; display: grid; gap: 5px; }\n.aurora-pkg--compact .aurora-pkg__body { gap: 3px; }\n\n.aurora-pkg__title { display: flex; align-items: center; gap: 11px; flex-wrap: wrap; min-width: 0; }\n.aurora-pkg__name {\n  font-family: var(--aurora-font-mono); font-weight: 700; font-size: 17px;\n  letter-spacing: -0.01em; color: var(--aurora-text-primary);\n  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%;\n}\n.aurora-pkg--compact .aurora-pkg__name { font-size: 15px; }\n.aurora-pkg__version {\n  font-family: var(--aurora-font-mono); font-weight: 520; font-size: 14px;\n  color: var(--aurora-accent-strong); letter-spacing: 0;\n}\n.aurora-pkg--compact .aurora-pkg__version { font-size: 13px; }\n\n.aurora-pkg__badge {\n  display: inline-flex; align-items: center;\n  font-family: var(--aurora-font-mono); font-weight: 600; font-size: 11px;\n  letter-spacing: 0.06em; text-transform: uppercase;\n  padding: 3px 9px; border-radius: 7px; border: 1px solid transparent;\n  line-height: 1; white-space: nowrap;\n}\n.aurora-pkg__badge--latest {\n  color: var(--aurora-success);\n  background: var(--aurora-success-surface);\n  border-color: var(--aurora-success-border);\n}\n.aurora-pkg__badge--outdated {\n  color: var(--aurora-warn);\n  background: var(--aurora-warn-surface);\n  border-color: var(--aurora-warn-border);\n}\n\n.aurora-pkg__desc {\n  font-family: var(--aurora-font-sans); font-weight: 460; font-size: 14px;\n  color: var(--aurora-text-muted); line-height: 1.4; margin: 0;\n  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;\n}\n.aurora-pkg--compact .aurora-pkg__desc { font-size: 13px; }\n\n.aurora-pkg__divider { height: 1px; border: 0; margin: 0; background: var(--aurora-border-default); }\n\n.aurora-pkg__foot {\n  display: flex; align-items: center; justify-content: space-between; gap: 14px;\n}\n.aurora-pkg__meta {\n  display: flex; align-items: center; gap: 14px; min-width: 0; flex-wrap: wrap;\n  font-family: var(--aurora-font-mono); font-size: 13px; letter-spacing: 0;\n}\n.aurora-pkg__registry { color: var(--axon-orange); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }\n.aurora-pkg__metaitem { color: var(--aurora-text-muted); font-weight: 500; }\n\n  /* ─── panel ─── */\n  .aurora-ael {\n    position: relative;\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n    min-width: 0;\n    border-radius: var(--aurora-radius-2);\n    background: var(--aurora-surface-raised);\n    border: 1px solid var(--aurora-border-strong);\n    box-shadow: var(--aurora-shadow-medium), var(--aurora-highlight-medium);\n    color: var(--aurora-text-primary);\n    font-family: var(--aurora-font-sans);\n    overflow: hidden;\n  }\n  .aurora-ael__head {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    padding: 10px 14px;\n  }\n  .aurora-ael__icon {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n    width: 28px;\n    height: 28px;\n    border-radius: var(--aurora-radius-1);\n    color: var(--aurora-ael-tone, var(--aurora-accent-primary));\n    border: 1px solid color-mix(in srgb, var(--aurora-ael-tone, var(--aurora-accent-primary)) 55%, transparent);\n    background: color-mix(in srgb, var(--aurora-ael-tone, var(--aurora-accent-primary)) 12%, transparent);\n  }\n  .aurora-ael__titles {\n    display: flex;\n    flex-direction: column;\n    gap: 2px;\n    min-width: 0;\n    flex: 1;\n  }\n  .aurora-ael__eyebrow {\n    font-size: 11px;\n    font-weight: 700;\n    letter-spacing: 0.12em;\n    text-transform: uppercase;\n    color: var(--aurora-ael-tone, var(--aurora-accent-primary));\n    line-height: 1.2;\n  }\n  .aurora-ael__title {\n    font-size: 14px;\n    font-weight: 700;\n    letter-spacing: -0.01em;\n    color: var(--aurora-text-primary);\n    line-height: 1.2;\n  }\n  .aurora-ael__actions {\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    flex-shrink: 0;\n    margin-left: auto;\n  }\n  .aurora-ael__btn {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    gap: 6px;\n    border-radius: var(--aurora-radius-1);\n    border: 1px solid var(--aurora-border-strong);\n    background: color-mix(in srgb, var(--aurora-page-bg) 60%, transparent);\n    color: var(--aurora-text-muted);\n    cursor: pointer;\n    font-family: var(--aurora-font-sans);\n    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;\n  }\n  .aurora-ael__btn:hover {\n    color: var(--aurora-text-primary);\n    border-color: var(--aurora-accent-primary);\n  }\n  .aurora-ael__btn:focus-visible {\n    outline: 2px solid var(--aurora-focus-ring-strong);\n    outline-offset: 2px;\n  }\n  .aurora-ael__btn.icon {\n    padding: 0;\n  }\n  .aurora-ael__btn.sm {\n    width: 26px;\n    height: 26px;\n  }\n  .aurora-ael__body {\n    padding: 12px 14px;\n    border-top: 1px solid color-mix(in srgb, var(--aurora-border-strong) 60%, transparent);\n    font-size: 14px;\n    line-height: 1.55;\n    color: var(--aurora-text-primary);\n  }\n  .aurora-ael__foot {\n    padding: 9px 14px;\n    border-top: 1px solid color-mix(in srgb, var(--aurora-border-strong) 60%, transparent);\n    font-size: 12px;\n    color: var(--aurora-text-muted);\n  }\n\n  /* ─── persona ─── */\n.aurora-persona { display: flex; align-items: flex-start; gap: 13px; box-sizing: border-box; color: var(--aurora-text-primary); font-family: var(--font-sans, Inter, sans-serif); }\n.aurora-persona__av { position: relative; flex-shrink: 0; display: grid; place-items: center; font-family: var(--font-display, Manrope, sans-serif); font-weight: 800; letter-spacing: -0.01em; color: var(--aurora-accent-pink); background: color-mix(in srgb, var(--aurora-accent-pink) 16%, var(--aurora-control-surface)); border: 1px solid color-mix(in srgb, var(--aurora-accent-pink) 38%, var(--aurora-border-strong)); }\n.aurora-persona__dot { position: absolute; right: -2px; bottom: -2px; border-radius: 999px; border: 2px solid var(--aurora-panel-strong); }\n.aurora-persona__name { font-family: var(--font-display, Manrope, sans-serif); font-weight: 800; letter-spacing: -0.02em; color: var(--aurora-text-primary); }\n.aurora-persona__role { color: var(--aurora-text-muted); margin-top: 2px; }\n.aurora-persona__aibadge { display: inline-flex; align-items: center; font-family: var(--font-mono, monospace); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--aurora-accent-pink); background: color-mix(in srgb, var(--aurora-accent-pink) 12%, transparent); border: 1px solid color-mix(in srgb, var(--aurora-accent-pink) 30%, transparent); border-radius: 5px; font-size: 10px; padding: 2px 6px; }\n.aurora-persona__status { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono, monospace); font-size: 10.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--aurora-text-muted); }\n.aurora-persona__chip { font-family: var(--font-mono, monospace); font-size: 11px; color: var(--aurora-text-muted); background: var(--aurora-control-surface); border: 1px solid var(--aurora-border-default); border-radius: 6px; padding: 3px 9px; }\n\n/* full card */\n.aurora-persona--default { background: linear-gradient(180deg, var(--aurora-panel-strong-top), var(--aurora-panel-strong)); border: 1px solid color-mix(in srgb, var(--aurora-border-default) 55%, var(--aurora-page-bg)); border-radius: var(--radius-3, 22px); box-shadow: var(--aurora-shadow-strong), var(--aurora-highlight-strong); padding: 16px 18px; flex-direction: column; gap: 12px; }\n.aurora-persona--default .aurora-persona__av { width: 48px; height: 48px; border-radius: 13px; font-size: 16px; }\n.aurora-persona__head { display: flex; align-items: flex-start; gap: 13px; }\n.aurora-persona__titlerow { display: flex; align-items: center; gap: 9px; }\n\n/* compact row */\n.aurora-persona--compact { align-items: center; gap: 11px; background: var(--aurora-control-surface); border: 1px solid var(--aurora-border-default); border-radius: var(--radius-2, 18px); padding: 11px 14px; transition: border-color 150ms var(--motion-ease-out, ease), background 150ms var(--motion-ease-out, ease); }\n.aurora-persona--compact.aurora-persona--selected { border-color: color-mix(in srgb, var(--aurora-accent-pink) 60%, var(--aurora-border-strong)); background: color-mix(in srgb, var(--aurora-accent-pink) 8%, var(--aurora-control-surface)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--aurora-accent-pink) 24%, transparent); }\n.aurora-persona--compact .aurora-persona__av { width: 38px; height: 38px; border-radius: 11px; font-size: 13px; }\n.aurora-persona--compact .aurora-persona__name { font-size: 14px; }\n.aurora-persona--clickable { cursor: pointer; }\n\n  /* ─── response ─── */\n  .aurora-response-block { animation: aurora-response-fade-in var(--aurora-motion, 240ms) ease-out both; }\n  .aurora-response-caret {\n    display: inline-block;\n    width: 0.55em;\n    height: 1.05em;\n    margin-left: 2px;\n    vertical-align: text-bottom;\n    border-radius: 1px;\n    background: var(--aurora-accent-primary);\n    animation: aurora-response-caret 1s step-end infinite;\n  }\n\n  /* ─── shimmer ─── */\n    .aurora-ai-shimmer-bar {\n      background: linear-gradient(\n        90deg,\n        var(--aurora-panel-strong) 25%,\n        color-mix(in srgb, var(--aurora-border-strong) 60%, transparent) 37%,\n        var(--aurora-panel-strong) 63%\n      );\n      background-size: 800px 100%;\n      animation: aurora-shimmer 1.4s ease-in-out infinite;\n    }\n\n  /* ─── speech-input ─── */\n  @media (prefers-reduced-motion: reduce) {\n    .aurora-speech-bar { animation: none !important; }\n    .aurora-speech-dot { animation: none !important; }\n  }\n\n  /* ─── code-editor ─── */\n.aurora-squiggle {\n  text-decoration: underline wavy var(--aurora-error) 1px;\n  text-underline-offset: 2px;\n}\n.aurora-warn-squiggle {\n  text-decoration: underline wavy var(--aurora-warn) 1px;\n  text-underline-offset: 2px;\n}\n\n  /* ─── file-picker ─── */\n.aurora-file-picker-search:focus-within {\n  border-color: var(--aurora-border-strong);\n  box-shadow: 0 0 0 2px color-mix(in srgb, var(--aurora-accent-primary) 14%, transparent);\n}\n\n@media (max-width: 640px) {\n  .aurora-file-picker-dialog {\n    width: calc(100vw - 24px) !important;\n    height: calc(100vh - 48px) !important;\n    max-height: calc(100vh - 48px) !important;\n  }\n\n  .aurora-file-picker-body {\n    flex-direction: column !important;\n  }\n\n  .aurora-file-picker-sidebar {\n    width: 100% !important;\n    max-height: 126px !important;\n    border-right: 0 !important;\n    border-bottom: 1px solid var(--aurora-border-default) !important;\n    flex-direction: row !important;\n    flex-wrap: wrap !important;\n    align-items: center !important;\n    gap: 6px !important;\n    overflow-x: hidden !important;\n    overflow-y: auto !important;\n  }\n\n  .aurora-file-picker-sidebar-title,\n  .aurora-file-picker-upload-spacer {\n    display: none !important;\n  }\n\n  .aurora-file-picker-sidebar button {\n    flex: 1 1 calc(33.333% - 6px) !important;\n    justify-content: flex-start !important;\n    min-width: 0 !important;\n  }\n\n  .aurora-file-picker-main {\n    min-height: 0 !important;\n  }\n\n  .aurora-file-picker-toolbar {\n    flex-wrap: wrap !important;\n    align-items: stretch !important;\n  }\n\n  .aurora-file-picker-search {\n    flex-basis: 100% !important;\n  }\n\n  .aurora-file-picker-filters {\n    overflow-x: auto !important;\n    max-width: 100% !important;\n  }\n\n  .aurora-file-picker-footer {\n    align-items: stretch !important;\n    flex-direction: column !important;\n  }\n\n  .aurora-file-picker-actions {\n    width: 100% !important;\n  }\n\n  .aurora-file-picker-actions button {\n    flex: 1 !important;\n  }\n}\n\n  /* ─── file-tree ─── */\n.aurora-tree-item:focus-visible {\n  outline: 2px solid var(--aurora-focus-ring-strong);\n  outline-offset: -1px;\n}\n\n  /* ─── command-palette ─── */\n.aurora-cmd-search-row:focus-within {\n  border-bottom-color: var(--aurora-border-strong);\n  box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--aurora-accent-primary) 28%, transparent);\n}\n\n  /* ─── web-preview ─── */\n.aurora-shimmer-block {\n  background: linear-gradient(\n    90deg,\n    var(--aurora-panel-medium) 25%,\n    var(--aurora-hover-bg) 50%,\n    var(--aurora-panel-medium) 75%\n  );\n  background-size: 800px 100%;\n  animation: aurora-shimmer-web 1.4s ease-in-out infinite;\n  border-radius: 6px;\n}\n\n  /* ─── actions ─── */\n.aurora-actions {\n  display: flex;\n  align-items: center;\n  flex-wrap: wrap;\n  gap: 8px;\n  min-width: 0;\n}\n.aurora-action {\n  box-sizing: border-box;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n  flex: none;\n  margin: 0;\n  font-family: var(--font-sans, Inter, sans-serif);\n  font-size: 13px;\n  font-weight: 500;\n  line-height: 1;\n  color: var(--aurora-text-muted);\n  background: none;\n  border: 1px solid transparent;\n  cursor: pointer;\n  -webkit-appearance: none;\n  appearance: none;\n  transition:\n    color var(--motion-fast, 140ms) ease,\n    background var(--motion-fast, 140ms) ease,\n    border-color var(--motion-fast, 140ms) ease,\n    box-shadow var(--motion-fast, 140ms) ease;\n}\n.aurora-action > svg {\n  flex: none;\n  display: block;\n}\n/* icon-only: framed square */\n.aurora-action[data-shape=\"icon\"] {\n  width: 38px;\n  height: 38px;\n  padding: 0;\n  border-radius: 12px;\n  border-color: var(--aurora-border-strong);\n  background: linear-gradient(\n    180deg,\n    var(--aurora-panel-strong-top),\n    var(--aurora-panel-strong)\n  );\n  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);\n}\n.aurora-action[data-shape=\"icon\"]:hover:not(:disabled) {\n  color: var(--aurora-text-primary);\n  background: var(--aurora-hover-bg);\n}\n/* icon + text: ghost */\n.aurora-action[data-shape=\"text\"] {\n  height: 34px;\n  padding: 0 4px;\n  border-radius: 8px;\n  background: none;\n}\n.aurora-action[data-shape=\"text\"]:hover:not(:disabled) {\n  color: var(--aurora-text-primary);\n}\n/* pressed / toggled */\n.aurora-action[data-pressed=\"true\"] {\n  color: var(--aurora-text-primary);\n  border-color: color-mix(\n    in srgb,\n    var(--aurora-accent-primary) 38%,\n    var(--aurora-border-strong)\n  );\n  background: color-mix(\n    in srgb,\n    var(--aurora-accent-primary) 12%,\n    var(--aurora-panel-strong)\n  );\n}\n.aurora-action:focus-visible {\n  outline: none;\n  box-shadow:\n    inset 0 1px 0 rgba(255, 255, 255, 0.05),\n    0 0 0 1px color-mix(in srgb, var(--aurora-accent-primary) 45%, transparent),\n    0 0 0 3px color-mix(in srgb, var(--aurora-accent-primary) 22%, transparent);\n}\n.aurora-action:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n  /* ─── button-group ─── */\n  .aurora-btn-group-item {\n    display: inline-flex; align-items: center; justify-content: center; gap: 6px;\n    height: 28px; padding: 0 14px; border: none; background: none;\n    color: var(--aurora-text-muted);\n    font: 560 13px var(--aurora-font-sans, Inter, sans-serif);\n    border-radius: 7px; white-space: nowrap; cursor: pointer; user-select: none;\n    transition: color 140ms ease, background 140ms ease, box-shadow 140ms ease;\n  }\n  .aurora-btn-group-item > svg { flex: none; display: block; }\n  .aurora-btn-group-item:hover:not([aria-pressed=\"true\"]):not(:disabled) {\n    color: var(--aurora-text-primary);\n    background: color-mix(in srgb, var(--aurora-control-surface) 60%, transparent);\n  }\n  .aurora-btn-group-item[aria-pressed=\"true\"] {\n    color: var(--aurora-accent-strong);\n    background: color-mix(in srgb, var(--aurora-accent-primary) 14%, var(--aurora-control-surface));\n    box-shadow: 0 0 0 1px color-mix(in srgb, var(--aurora-accent-primary) 28%, transparent);\n  }\n  .aurora-btn-group-item:focus-visible {\n    outline: none;\n    box-shadow: 0 0 0 2px var(--aurora-focus-ring, color-mix(in srgb, var(--aurora-accent-primary) 55%, transparent));\n  }\n  .aurora-btn-group-item:disabled { opacity: 0.45; cursor: not-allowed; }\n  /* Vertical groups: items stretch and left-align. */\n  .aurora-btn-group[data-orientation=\"vertical\"] .aurora-btn-group-item {\n    width: 100%; justify-content: flex-start;\n  }\n}\n\n/* Global keyframes (deduped; layers don't meaningfully scope @keyframes). */\n/* Keyframes stay global (layers don't meaningfully scope @keyframes). */\n@keyframes aurora-btn-pulse {\n  0%, 100% { box-shadow: inset 0 1px 0 rgba(255,255,255,0.055), 0 0 0 1px color-mix(in srgb, var(--aurora-accent-primary) 30%, transparent); }\n  50% { box-shadow: inset 0 1px 0 rgba(255,255,255,0.055), 0 0 0 1px color-mix(in srgb, var(--aurora-accent-primary) 60%, transparent); }\n}\n\n@keyframes aurora-btn-spin { to { transform: rotate(360deg); } }\n\n@keyframes aurora-beacon-ping {\n  0%   { transform: scale(1);    opacity: 0.6; }\n  70%  { transform: scale(1.55); opacity: 0;   }\n  100% { transform: scale(1.55); opacity: 0;   }\n}\n\n@keyframes aurora-beacon-ring {\n  0%, 100% { opacity: 0.7; }\n  50%       { opacity: 1;   }\n}\n\n@keyframes aurora-progress-shimmer {\n  0%   { transform: translateX(-100%); }\n  100% { transform: translateX(400%); }\n}\n\n@keyframes aurora-progress-indeterminate {\n  0%   { left: -35%; right: 100%; }\n  60%  { left: 100%; right: -90%; }\n  100% { left: 100%; right: -90%; }\n}\n\n@keyframes aurora-shimmer {\n      0%   { background-position: -800px 0; }\n      100% { background-position:  800px 0; }\n    }\n\n@keyframes aurora-status-dot-pulse {\n      0%, 100% {\n        box-shadow:\n          0 0 0 0 color-mix(in srgb, var(--status-dot-color) 42%, transparent),\n          0 0 6px color-mix(in srgb, var(--status-dot-color) 70%, transparent);\n      }\n      50% {\n        box-shadow:\n          0 0 0 5px transparent,\n          0 0 9px color-mix(in srgb, var(--status-dot-color) 85%, transparent);\n      }\n    }\n\n@keyframes toast-slide-in {\n      from { transform: translateX(28px); opacity: 0; }\n      to   { transform: translateX(0);    opacity: 1; }\n    }\n\n@keyframes aurora-toast-out {\n      from { transform: translateX(0);    opacity: 1; max-height: 120px; margin-bottom: 10px; }\n      to   { transform: translateX(28px); opacity: 0; max-height: 0;    margin-bottom: 0; }\n    }\n\n@keyframes aurora-drawer-overlay-in { from { opacity: 0 } to { opacity: 1 } }\n\n@keyframes aurora-drawer-overlay-out { from { opacity: 1 } to { opacity: 0 } }\n\n@keyframes aurora-drawer-in { from { transform: translateY(100%) } to { transform: translateY(0) } }\n\n@keyframes aurora-drawer-out { from { transform: translateY(0) } to { transform: translateY(100%) } }\n\n@keyframes aurora-blink-cursor {\n  0%, 100% { opacity: 1; }\n  50%       { opacity: 0; }\n}\n\n@keyframes aurora-spin {\n  to { transform: rotate(360deg); }\n}\n\n@keyframes aurora-auq-fadein {\n  from { opacity: 0; transform: translateY(4px); }\n  to   { opacity: 1; transform: translateY(0); }\n}\n\n@keyframes aurora-cot-spin { to { transform: rotate(360deg); } }\n\n@keyframes aurora-cot-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }\n\n@keyframes aurora-cot-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }\n\n@keyframes aurora-connection-flow {\n  to { background-position: 12px 0; }\n}\n\n@keyframes aurora-edge-flow {\n  to { background-position: 0 0, 12px 0; }\n}\n\n@keyframes aurora-loader-spin {\n  to { transform: rotate(360deg); }\n}\n\n@keyframes aurora-loader-dot {\n  0%, 80%, 100% { opacity: 0.25; transform: scale(0.7); }\n  40%           { opacity: 1;    transform: scale(1); }\n}\n\n@keyframes aurora-loader-bar {\n  0%, 100% { transform: scaleY(0.35); }\n  50%      { transform: scaleY(1); }\n}\n\n@keyframes aurora-loader-pulse-ring {\n  0%   { transform: scale(0.45); opacity: 0.9; }\n  100% { transform: scale(1);    opacity: 0; }\n}\n\n@keyframes aurora-loader-pulse-core {\n  0%, 100% { opacity: 1;    transform: scale(1); }\n  50%      { opacity: 0.55; transform: scale(0.82); }\n}\n\n@keyframes aurora-msg-caret {\n  0%, 45%  { opacity: 1; }\n  55%, 100% { opacity: 0; }\n}\n\n@keyframes aurora-mic-pulse {\n  0%, 100% { transform: scaleY(0.55); opacity: 0.7; }\n  50% { transform: scaleY(1); opacity: 1; }\n}\n\n@keyframes aurora-plan-spin { to { transform: rotate(360deg); } }\n\n@keyframes aurora-plan-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }\n\n@keyframes aurora-reasoning-blink {\n    0%, 100% { opacity: 1; }\n    50% { opacity: 0; }\n  }\n\n@keyframes aurora-response-fade-in {\n  from { opacity: 0; transform: translateY(2px); }\n  to { opacity: 1; transform: translateY(0); }\n}\n\n@keyframes aurora-response-caret {\n  0%, 100% { opacity: 1; }\n  50% { opacity: 0; }\n}\n\n@keyframes aurora-speech-meter {\n    0%, 100% { transform: scaleY(0.42); }\n    50%      { transform: scaleY(1); }\n  }\n\n@keyframes aurora-speech-dot {\n    0%, 100% { opacity: 1; transform: scale(1); }\n    50%      { opacity: 0.45; transform: scale(0.82); }\n  }\n\n@keyframes aurora-tool-spin { to { transform: rotate(360deg); } }\n\n@keyframes aurora-border-pulse {\n    0%, 100% { opacity: 1; }\n    50% { opacity: 0.4; }\n  }\n\n@keyframes aurora-blink {\n    0%, 100% { opacity: 1; }\n    50% { opacity: 0; }\n  }\n\n@keyframes aurora-thinking-shimmer {\n    0% { background-position: 200% 0; }\n    100% { background-position: -200% 0; }\n  }\n\n@keyframes aurora-check-pop {\n  0% { transform: scale(0.5); opacity: 0; }\n  100% { transform: scale(1); opacity: 1; }\n}\n\n@keyframes aurora-check-draw {\n  from { stroke-dashoffset: 30; }\n  to   { stroke-dashoffset: 0; }\n}\n\n@keyframes aurora-pd-in {\n  from { opacity: 0; transform: translateY(-6px) scale(0.97); }\n  to   { opacity: 1; transform: translateY(0) scale(1); }\n}\n\n@keyframes aurora-bar-bounce {\n  0%, 100% { transform: scaleY(0.35); }\n  50%       { transform: scaleY(1); }\n}\n\n@keyframes aurora-error-squiggle {}\n\n@keyframes aurora-fp-in {\n  from { opacity: 0; transform: translate(-50%, calc(-50% - 12px)); }\n  to   { opacity: 1; transform: translate(-50%, -50%); }\n}\n\n@keyframes aurora-cursor-blink {\n          0%, 100% { opacity: 0.7; }\n          50% { opacity: 0; }\n        }\n\n@keyframes aurora-cmd-in {\n  from { opacity: 0; transform: translate(-50%, calc(-50% - 8px)); }\n  to   { opacity: 1; transform: translate(-50%, -50%); }\n}\n\n@keyframes aurora-backdrop-in {\n  from { opacity: 0; }\n  to   { opacity: 1; }\n}\n\n@keyframes aurora-share-in {\n  from { opacity: 0; transform: translate(-50%, calc(-50% - 10px)); }\n  to   { opacity: 1; transform: translate(-50%, -50%); }\n}\n\n@keyframes aurora-shimmer-web {\n  0%   { background-position: -400px 0; }\n  100% { background-position:  400px 0; }\n}\n\n@keyframes aurora-context-shimmer{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}\n",
       "type": "registry:style"
     }
   ],
diff --git a/public/r/registry.json b/public/r/registry.json
index 89fcd07f..34675a20 100644
--- a/public/r/registry.json
+++ b/public/r/registry.json
@@ -5561,14 +5561,14 @@
       "name": "aurora-chat-block",
       "type": "registry:block",
       "title": "Aurora Interactive Chat",
-      "description": "Interactive Aurora chat workspace combining the new conversation primitives with steerable streaming, editable user turns, hover actions, code and source surfaces, model/reasoning selection, slash-command skills, file mentions, and an in-field composer.",
+      "description": "Interactive Aurora chat workspace combining composable conversation primitives with steerable streaming, markdown and citation-rich assistant responses, editable user turns, code/source surfaces, attachment previews, empty/error states, model/reasoning selection, slash-command skills, file mentions, and an in-field composer.",
       "dependencies": ["lucide-react@^1.24.0"],
-      "registryDependencies": ["@aurora/aurora-tokens", "@aurora/aurora-components", "@aurora/aurora-button", "@aurora/aurora-spinner", "@aurora/aurora-textarea", "@aurora/aurora-select", "@aurora/aurora-message-scroller", "@aurora/aurora-message", "@aurora/aurora-bubble", "@aurora/aurora-chat-attachment", "@aurora/aurora-marker", "@aurora/aurora-code-block", "@aurora/aurora-ai-snippet", "@aurora/aurora-ai-sources", "@aurora/aurora-ai-reasoning"],
+      "registryDependencies": ["@aurora/aurora-tokens", "@aurora/aurora-components", "@aurora/aurora-button", "@aurora/aurora-spinner", "@aurora/aurora-textarea", "@aurora/aurora-select", "@aurora/aurora-message-scroller", "@aurora/aurora-message", "@aurora/aurora-bubble", "@aurora/aurora-chat-attachment", "@aurora/aurora-marker", "@aurora/aurora-callout", "@aurora/aurora-empty-state", "@aurora/aurora-code-block", "@aurora/aurora-ai-snippet", "@aurora/aurora-ai-sources", "@aurora/aurora-ai-reasoning", "@aurora/aurora-ai-response"],
       "files": [{ "path": "registry/aurora/blocks/ai/chat/chat.tsx", "type": "registry:component", "target": "@components/aurora/chat-block.tsx" }],
       "author": "jmagar <https://github.com/jmagar>",
       "categories": ["aurora", "block", "ai", "chat", "application"],
       "meta": { "namespace": "@aurora", "style": "aurora", "family": "block", "requiresTokens": true, "sourcePath": "registry/aurora/blocks/ai/chat/chat.tsx", "installTarget": "@components/aurora/chat-block.tsx", "taxonomy": "ai" },
-      "docs": "Aurora interactive chat workspace composed from MessageScroller, Message, Bubble, Chat Attachment, and Marker plus Aurora's existing developer surfaces. Assistant turns are unbubbled; timestamps and message actions reveal on hover/focus; user turns support edit; assistant actions group icon-only copy, retry, and thumbs-up. The local demo includes steerable streaming, Stop vs Send behavior, model and reasoning selectors, slash-command skills, file @mentions, compact code blocks/snippets, sources/references, compact reasoning disclosure, animated mock attachment lifecycle, and jump controls.\n\nRegistry dependencies: aurora-tokens, aurora-components, aurora-button, aurora-spinner, aurora-textarea, aurora-select, aurora-message-scroller, aurora-message, aurora-bubble, aurora-chat-attachment, aurora-marker, aurora-code-block, aurora-ai-snippet, aurora-ai-sources, aurora-ai-reasoning."
+      "docs": "Aurora interactive chat workspace composed from MessageScroller, Message, Bubble, Chat Attachment, and Marker plus Aurora's existing developer surfaces. Assistant turns are unbubbled; timestamps and message actions reveal on hover/focus; user turns support edit; assistant actions group icon-only copy, retry, and thumbs-up. The local demo includes steerable streaming, Stop vs Send behavior, model and reasoning selectors, slash-command skills, file @mentions, compact code blocks/snippets, inline markdown/citations, sources/references, compact reasoning disclosure, polished attachment preview/lifecycle, empty and recoverable error states, and jump controls.\n\nRegistry dependencies: aurora-tokens, aurora-components, aurora-button, aurora-spinner, aurora-textarea, aurora-select, aurora-message-scroller, aurora-message, aurora-bubble, aurora-chat-attachment, aurora-marker, aurora-callout, aurora-empty-state, aurora-code-block, aurora-ai-snippet, aurora-ai-sources, aurora-ai-reasoning, aurora-ai-response."
     },
     {
       "name": "aurora-chat-message",
diff --git a/registry.json b/registry.json
index 89fcd07f..34675a20 100644
--- a/registry.json
+++ b/registry.json
@@ -5561,14 +5561,14 @@
       "name": "aurora-chat-block",
       "type": "registry:block",
       "title": "Aurora Interactive Chat",
-      "description": "Interactive Aurora chat workspace combining the new conversation primitives with steerable streaming, editable user turns, hover actions, code and source surfaces, model/reasoning selection, slash-command skills, file mentions, and an in-field composer.",
+      "description": "Interactive Aurora chat workspace combining composable conversation primitives with steerable streaming, markdown and citation-rich assistant responses, editable user turns, code/source surfaces, attachment previews, empty/error states, model/reasoning selection, slash-command skills, file mentions, and an in-field composer.",
       "dependencies": ["lucide-react@^1.24.0"],
-      "registryDependencies": ["@aurora/aurora-tokens", "@aurora/aurora-components", "@aurora/aurora-button", "@aurora/aurora-spinner", "@aurora/aurora-textarea", "@aurora/aurora-select", "@aurora/aurora-message-scroller", "@aurora/aurora-message", "@aurora/aurora-bubble", "@aurora/aurora-chat-attachment", "@aurora/aurora-marker", "@aurora/aurora-code-block", "@aurora/aurora-ai-snippet", "@aurora/aurora-ai-sources", "@aurora/aurora-ai-reasoning"],
+      "registryDependencies": ["@aurora/aurora-tokens", "@aurora/aurora-components", "@aurora/aurora-button", "@aurora/aurora-spinner", "@aurora/aurora-textarea", "@aurora/aurora-select", "@aurora/aurora-message-scroller", "@aurora/aurora-message", "@aurora/aurora-bubble", "@aurora/aurora-chat-attachment", "@aurora/aurora-marker", "@aurora/aurora-callout", "@aurora/aurora-empty-state", "@aurora/aurora-code-block", "@aurora/aurora-ai-snippet", "@aurora/aurora-ai-sources", "@aurora/aurora-ai-reasoning", "@aurora/aurora-ai-response"],
       "files": [{ "path": "registry/aurora/blocks/ai/chat/chat.tsx", "type": "registry:component", "target": "@components/aurora/chat-block.tsx" }],
       "author": "jmagar <https://github.com/jmagar>",
       "categories": ["aurora", "block", "ai", "chat", "application"],
       "meta": { "namespace": "@aurora", "style": "aurora", "family": "block", "requiresTokens": true, "sourcePath": "registry/aurora/blocks/ai/chat/chat.tsx", "installTarget": "@components/aurora/chat-block.tsx", "taxonomy": "ai" },
-      "docs": "Aurora interactive chat workspace composed from MessageScroller, Message, Bubble, Chat Attachment, and Marker plus Aurora's existing developer surfaces. Assistant turns are unbubbled; timestamps and message actions reveal on hover/focus; user turns support edit; assistant actions group icon-only copy, retry, and thumbs-up. The local demo includes steerable streaming, Stop vs Send behavior, model and reasoning selectors, slash-command skills, file @mentions, compact code blocks/snippets, sources/references, compact reasoning disclosure, animated mock attachment lifecycle, and jump controls.\n\nRegistry dependencies: aurora-tokens, aurora-components, aurora-button, aurora-spinner, aurora-textarea, aurora-select, aurora-message-scroller, aurora-message, aurora-bubble, aurora-chat-attachment, aurora-marker, aurora-code-block, aurora-ai-snippet, aurora-ai-sources, aurora-ai-reasoning."
+      "docs": "Aurora interactive chat workspace composed from MessageScroller, Message, Bubble, Chat Attachment, and Marker plus Aurora's existing developer surfaces. Assistant turns are unbubbled; timestamps and message actions reveal on hover/focus; user turns support edit; assistant actions group icon-only copy, retry, and thumbs-up. The local demo includes steerable streaming, Stop vs Send behavior, model and reasoning selectors, slash-command skills, file @mentions, compact code blocks/snippets, inline markdown/citations, sources/references, compact reasoning disclosure, polished attachment preview/lifecycle, empty and recoverable error states, and jump controls.\n\nRegistry dependencies: aurora-tokens, aurora-components, aurora-button, aurora-spinner, aurora-textarea, aurora-select, aurora-message-scroller, aurora-message, aurora-bubble, aurora-chat-attachment, aurora-marker, aurora-callout, aurora-empty-state, aurora-code-block, aurora-ai-snippet, aurora-ai-sources, aurora-ai-reasoning, aurora-ai-response."
     },
     {
       "name": "aurora-chat-message",
diff --git a/registry/aurora/blocks/ai/chat/chat.tsx b/registry/aurora/blocks/ai/chat/chat.tsx
index 24536cd0..0d1528a6 100644
--- a/registry/aurora/blocks/ai/chat/chat.tsx
+++ b/registry/aurora/blocks/ai/chat/chat.tsx
@@ -1,15 +1,18 @@
 "use client"
 
 import * as React from "react"
-import { Bot, Brain, Check, CheckCheck, Command, Copy, Cpu, FileCode2, FileText, Paperclip, Pencil, RefreshCw, RotateCcw, Send, Sparkles, Square, ThumbsUp, X } from "lucide-react"
+import { AlertTriangle, Bot, Brain, Check, CheckCheck, Command, Copy, Cpu, FileCode2, FileText, Paperclip, Pencil, Plus, RefreshCw, RotateCcw, Send, Sparkles, Square, ThumbsUp, X } from "lucide-react"
 
 import { Reasoning } from "@/registry/aurora/blocks/ai/elements/reasoning"
+import { Response, type ResponseSource } from "@/registry/aurora/blocks/ai/elements/response"
 import { Snippet } from "@/registry/aurora/blocks/ai/elements/snippet"
 import { Source, Sources } from "@/registry/aurora/blocks/ai/elements/sources"
 import { CodeBlock } from "@/registry/aurora/blocks/workspace/code-block/code-block"
 import { Attachment, AttachmentAction, AttachmentActions, AttachmentContent, AttachmentDescription, AttachmentGroup, AttachmentMedia, AttachmentTitle, AttachmentTrigger, type AttachmentState } from "@/registry/aurora/ui/attachment"
 import { Bubble, BubbleContent, BubbleGroup } from "@/registry/aurora/ui/bubble"
 import { Button } from "@/registry/aurora/ui/button"
+import { Callout } from "@/registry/aurora/ui/callout"
+import { EmptyState } from "@/registry/aurora/ui/empty-state"
 import { Marker, MarkerContent, MarkerIcon } from "@/registry/aurora/ui/marker"
 import { Message, MessageAvatar, MessageContent, MessageFooter, MessageGroup, MessageHeader } from "@/registry/aurora/ui/message"
 import { MessageScroller, MessageScrollerButton, MessageScrollerContent, MessageScrollerItem, MessageScrollerProvider, MessageScrollerViewport } from "@/registry/aurora/ui/message-scroller"
@@ -19,9 +22,10 @@ import { Textarea } from "@/registry/aurora/ui/textarea"
 
 type DemoAttachment = { id: string; title: string; description: string; state: AttachmentState }
 type ShowcaseKind = "code" | "sources" | "reasoning"
-type DemoMessage = { kind: "message"; id: string; role: "assistant" | "user"; text: string; time: string; streaming?: boolean; scrollAnchor?: boolean; attachments?: DemoAttachment[]; showcase?: ShowcaseKind }
+type DemoMessage = { kind: "message"; id: string; role: "assistant" | "user"; text: string; time: string; streaming?: boolean; scrollAnchor?: boolean; attachments?: DemoAttachment[]; responseSources?: ResponseSource[]; showcase?: ShowcaseKind }
 type DemoMarker = { kind: "marker"; id: string; label: string; variant?: "default" | "separator" | "border"; status?: "thinking" | "ready" | "synced" }
-type DemoThreadItem = DemoMessage | DemoMarker
+type DemoError = { kind: "error"; id: string; title: string; text: string }
+type DemoThreadItem = DemoMessage | DemoMarker | DemoError
 type Suggestion = { id: string; label: string; description: string; kind: "skill" | "file" }
 
 const DEMO_SNIPPET = [
@@ -42,6 +46,7 @@ const SLASH_COMMANDS: Suggestion[] = [
   { id: "docs", label: "/docs", description: "Run the documentation sweep skill", kind: "skill" },
   { id: "test", label: "/test", description: "Run validation and smoke tests", kind: "skill" },
   { id: "plan", label: "/plan", description: "Create an implementation plan", kind: "skill" },
+  { id: "error", label: "/error", description: "Simulate a recoverable response error", kind: "skill" },
 ]
 
 const FILE_MENTIONS: Suggestion[] = [
@@ -56,18 +61,18 @@ const REASONING_LEVELS = ["Auto", "Fast", "Balanced", "Deep"]
 
 const INITIAL_ITEMS: DemoThreadItem[] = [
   { kind: "marker", id: "marker-today", label: "Today", variant: "separator" },
-  { kind: "message", id: "assistant-welcome", role: "assistant", time: "9:31 PM", text: "The new conversation layer composes cleanly with Aurora's existing developer surfaces. Here's the lightweight snippet and the full steering helper.", showcase: "code", attachments: [{ id: "attachment-spec", title: "chat-primitives.md", description: "5 primitives · Aurora registry", state: "done" }] },
+  { kind: "message", id: "assistant-welcome", role: "assistant", time: "9:31 PM", text: "The new conversation layer composes cleanly with Aurora's existing `Response`, `Snippet`, and `CodeBlock` surfaces. Here's the lightweight snippet and the full steering helper.", showcase: "code", attachments: [{ id: "attachment-spec", title: "chat-primitives.md", description: "5 primitives · Aurora registry", state: "done" }] },
   { kind: "message", id: "user-compose", role: "user", time: "9:33 PM", text: "Show me the references too, and keep assistant replies out of bubbles." },
   { kind: "marker", id: "marker-context", label: "Conversation context synchronized", variant: "border", status: "synced" },
-  { kind: "message", id: "assistant-compose", role: "assistant", time: "9:34 PM", text: "Assistant content is now plain conversational prose. Sources stay attached to the turn as compact references instead of becoming another oversized card stack.", showcase: "sources" },
+  { kind: "message", id: "assistant-compose", role: "assistant", time: "9:34 PM", text: "Assistant content is plain conversational prose with inline citations. Sources stay attached to the turn as compact references [[1]], while local file context remains visible without becoming another oversized card stack [[2]].", responseSources: [{ title: "shadcn chat components", href: "https://ui.shadcn.com/docs/changelog/2026-06-chat-components", description: "The upstream chat primitive release notes." }, { title: "message-scroller.tsx", description: "Aurora viewport and streaming behavior." }], showcase: "sources" },
   { kind: "message", id: "user-streaming", role: "user", time: "9:36 PM", text: "Nice. Can I steer while you're still replying?" },
-  { kind: "message", id: "assistant-streaming", role: "assistant", time: "9:37 PM", text: "Yes. Keep typing while I stream. If the composer has text, Send steers the conversation. If it is empty, that same control becomes Stop.", showcase: "reasoning" },
+  { kind: "message", id: "assistant-streaming", role: "assistant", time: "9:37 PM", text: "Yes. Keep typing while I stream. If the composer has text, **Send** steers the conversation. If it is empty, that same control becomes `Stop`.", showcase: "reasoning" },
   { kind: "marker", id: "marker-live", label: "Interactive demo", variant: "separator", status: "ready" },
 ]
 
-const MOCK_REPLY = "Exactly. This response is streaming through the Aurora mock while MessageScroller watches whether you are pinned to the end. Type a steering message while this is still arriving and send it without waiting for the current response to finish."
-const STEER_REPLY = "Steering applied. I stopped the previous stream, preserved the partial response in the thread, and started a new response using your latest direction without locking the composer."
-const RETRY_REPLY = "Retried locally. The assistant response streams again with the same plain-message layout, compact actions, code surfaces, sources, and composer controls."
+const MOCK_REPLY = "Exactly. `MessageScroller` keeps the viewport stable while the composer stays live. Type a steering message while this is still arriving and **Send** it without waiting for the current response to finish."
+const STEER_REPLY = "Steering applied. `Stop` preserved the partial response, your steering turn was appended, and Aurora started a new response without locking the composer."
+const RETRY_REPLY = "Retried locally. The assistant response streams again with the same **plain-message layout**, compact actions, code surfaces, sources, and composer controls."
 
 function nextId(prefix: string) { return `${prefix}-${crypto.randomUUID()}` }
 function currentTime() { return new Intl.DateTimeFormat(undefined, { hour: "numeric", minute: "2-digit" }).format(new Date()) }
@@ -88,6 +93,24 @@ function AttachmentCard({ attachment, onOpen, onRemove, compact = false }: { att
   )
 }
 
+function AttachmentPreviewPanel({ attachment, onClose }: { attachment: DemoAttachment; onClose: () => void }) {
+  const json = attachment.title.endsWith(".json")
+  const preview = json
+    ? ['{', '  "gateway": "healthy",', '  "latencyMs": 24,', '  "providers": 18', '}'].join("\n")
+    : ["# Chat primitives", "", "MessageScroller · Message · Bubble · Attachment · Marker"].join("\n")
+  return (
+    <div className="mx-2 mb-1.5 shrink-0 overflow-hidden rounded-[10px] border sm:mx-3" role="region" aria-label="Attachment preview" style={{ borderColor: "color-mix(in srgb, var(--aurora-accent-primary) 30%, var(--aurora-border-default))", background: "color-mix(in srgb, var(--aurora-panel-strong) 96%, var(--aurora-accent-primary) 4%)", boxShadow: "var(--aurora-shadow-medium), var(--aurora-highlight-medium)" }}>
+      <div className="flex items-center gap-2 px-2 py-1.5">
+        <span className="flex size-6 shrink-0 items-center justify-center rounded-[6px] border" style={{ borderColor: "color-mix(in srgb, var(--aurora-accent-primary) 30%, var(--aurora-border-default))", background: "color-mix(in srgb, var(--aurora-accent-primary) 9%, transparent)", color: "var(--aurora-accent-primary)" }}><FileText className="size-3.5" aria-hidden="true" /></span>
+        <div className="min-w-0 flex-1"><p className="truncate" style={{ fontSize: "var(--aurora-type-label)", fontWeight: "var(--aurora-weight-ui)", lineHeight: "var(--aurora-line-dense)" }}>{attachment.title}</p><p className="truncate" style={{ color: "var(--aurora-text-muted)", fontSize: "10px", lineHeight: "var(--aurora-line-dense)" }}>{attachment.description} · Local preview</p></div>
+        <span className="hidden rounded-full border px-1.5 py-0.5 sm:inline" style={{ borderColor: "var(--aurora-border-default)", color: "var(--aurora-text-muted)", fontFamily: "var(--aurora-font-mono)", fontSize: "9px", lineHeight: 1 }}>{json ? "JSON" : "MD"}</span>
+        <Button type="button" variant="ghost" size="icon" className="!size-6 [&_svg]:!size-3.5" aria-label="Close preview" onClick={onClose}><X aria-hidden="true" /></Button>
+      </div>
+      <pre tabIndex={0} aria-label={"Preview of " + attachment.title} className="max-h-[84px] overflow-auto border-t px-2.5 py-2 outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--aurora-focus-ring)]" style={{ margin: 0, borderColor: "color-mix(in srgb, var(--aurora-border-default) 72%, transparent)", background: "color-mix(in srgb, var(--aurora-page-bg) 70%, transparent)", color: "var(--aurora-text-secondary)", fontFamily: "var(--aurora-font-mono)", fontSize: "10px", lineHeight: 1.5, whiteSpace: "pre-wrap" }}><code>{preview}</code></pre>
+    </div>
+  )
+}
+
 function ThreadMarker({ item }: { item: DemoMarker }) {
   const Icon = item.status === "synced" ? CheckCheck : item.status === "ready" ? Check : Sparkles
   return <Marker variant={item.variant} role={item.status === "thinking" ? "status" : undefined} className={item.status === "thinking" ? "my-0.5" : "my-0.5 opacity-75"}>{item.status ? <MarkerIcon>{item.status === "thinking" ? <Spinner size="sm" tone="rose" /> : <Icon aria-hidden="true" />}</MarkerIcon> : null}<MarkerContent>{item.label}</MarkerContent></Marker>
@@ -302,6 +325,14 @@ function AuroraChatBlock({ title = "Aurora Chat", subtitle = "Composable convers
     const steering = isResponding
     if (steering) stopResponse()
     const userId = nextId("user")
+    if (text === "/error") {
+      const message: DemoMessage = { kind: "message", id: userId, role: "user", time: currentTime(), text, scrollAnchor: true, attachments: composerAttachment ? [{ ...composerAttachment, state: "done" }] : undefined }
+      const error: DemoError = { kind: "error", id: nextId("error"), title: "Mock response failed", text: "Aurora stopped before generating a response. Your turn is preserved, and you can retry, edit, or send a new direction." }
+      setItems((current) => [...current, message, error])
+      setValue("")
+      setComposerAttachment(null)
+      return
+    }
     const markerId = nextId("thinking")
     const message: DemoMessage = { kind: "message", id: userId, role: "user", time: currentTime(), text: text || "Attached a file for context.", scrollAnchor: true, attachments: composerAttachment ? [{ ...composerAttachment, state: "done" }] : undefined }
     setItems((current) => [...current, message, { kind: "marker", id: markerId, label: steering ? "Steering the active response" : reasoning === "Auto" ? "Aurora is reasoning" : `Aurora is reasoning · ${reasoning}`, status: "thinking" }])
@@ -334,6 +365,7 @@ function AuroraChatBlock({ title = "Aurora Chat", subtitle = "Composable convers
   const toggleLike = React.useCallback((messageId: string) => setLikedIds((current) => { const next = new Set(current); if (next.has(messageId)) next.delete(messageId); else next.add(messageId); return next }), [])
   const editMessage = React.useCallback((message: DemoMessage) => { setEditingMessageId(message.id); setValue(message.text); window.requestAnimationFrame(() => textareaRef.current?.focus()) }, [])
   const resetDemo = React.useCallback(() => { clearTimers(); setItems(INITIAL_ITEMS); setValue(""); setComposerAttachment(null); setPreviewAttachment(null); setCopiedId(null); setLikedIds(new Set()); setEditingMessageId(null); setIsResponding(false); setActiveAssistantId(null); setModel(MODELS[0]); setReasoning(REASONING_LEVELS[0]); setSlashOpen(false); setMentionOpen(false) }, [clearTimers])
+  const newChat = React.useCallback(() => { clearTimers(); setItems([]); setValue(""); setComposerAttachment(null); setPreviewAttachment(null); setCopiedId(null); setLikedIds(new Set()); setEditingMessageId(null); setIsResponding(false); setActiveAssistantId(null); setSlashOpen(false); setMentionOpen(false) }, [clearTimers])
 
   const hasComposerPayload = Boolean(value.trim() || composerAttachment)
   const showStopButton = isResponding && !hasComposerPayload && !editingMessageId
@@ -349,6 +381,7 @@ function AuroraChatBlock({ title = "Aurora Chat", subtitle = "Composable convers
           <span className="hidden items-center gap-1.5 rounded-full border px-2 py-0.5 sm:inline-flex" style={{ borderColor: "color-mix(in srgb, var(--aurora-border-default) 78%, transparent)", background: "color-mix(in srgb, var(--aurora-control-surface) 42%, transparent)", color: "var(--aurora-text-muted)", fontSize: "var(--aurora-type-caption)" }}>
             <span className="aurora-status-dot" style={{ "--status-dot-color": "var(--aurora-success)" } as React.CSSProperties} />Local mock
           </span>
+          <Button variant="ghost" size="icon" type="button" aria-label="New chat" className="!size-6 [&_svg]:!size-3.5" onClick={newChat}><Plus aria-hidden="true" /></Button>
           <Button variant="ghost" size="sm" type="button" aria-label="Reset chat demo" className="!h-6 !px-1.5 sm:!px-2 [&_svg]:!size-3.5" onClick={resetDemo}><RefreshCw data-icon="inline-start" aria-hidden="true" /><span className="hidden sm:inline">Reset</span></Button>
         </div>
       </header>
@@ -358,9 +391,17 @@ function AuroraChatBlock({ title = "Aurora Chat", subtitle = "Composable convers
           <MessageScroller>
             <MessageScrollerViewport>
               <MessageScrollerContent className="gap-2.5 px-2.5 py-2.5 sm:gap-2 sm:px-4 sm:py-3">
-                {items.map((item) => (
-                  <MessageScrollerItem key={item.id} messageId={item.id} scrollAnchor={item.kind === "message" ? item.scrollAnchor : false} className={item.kind === "message" ? "sm:pb-[9px]" : undefined}>
-                    {item.kind === "marker" ? <ThreadMarker item={item} /> : (
+                {items.length === 0 ? (
+                  <div className="flex min-h-[360px] flex-1 items-center justify-center py-6">
+                    <EmptyState className="w-full max-w-[390px] gap-3 px-5 py-8" icon={<Sparkles className="size-5" />} title="Start a new conversation" description="Ask Aurora anything, attach a file, use / skills, or @mention local context." action={<Button type="button" variant="rose" size="sm" onClick={resetDemo}>Load demo thread</Button>} />
+                  </div>
+                ) : items.map((item) => (
+                  <MessageScrollerItem key={item.id} messageId={item.id} scrollAnchor={item.kind === "message" ? item.scrollAnchor : false} className={item.kind === "message" ? ["sm:pb-[9px]", item.responseSources?.length ? "[content-visibility:visible]" : ""].filter(Boolean).join(" ") : undefined}>
+                    {item.kind === "marker" ? <ThreadMarker item={item} /> : item.kind === "error" ? (
+                      <Callout variant="error" title={item.title} icon={<AlertTriangle className="size-3.5" />} className="mx-auto w-full max-w-[640px] !gap-2 !p-2.5">
+                        <div className="flex min-w-0 items-start justify-between gap-2"><span className="min-w-0 flex-1">{item.text}</span><Button type="button" variant="ghost" size="sm" className="!h-6 shrink-0 !px-1.5 text-[10px]" onClick={() => setItems((current) => current.filter((candidate) => candidate.id !== item.id))}>Dismiss</Button></div>
+                      </Callout>
+                    ) : (
                       <MessageGroup className="gap-1">
                         <Message align={item.role === "user" ? "end" : "start"}>
                           {item.role === "assistant" ? <MessageAvatar aria-label="Aurora" className="!size-5 !min-w-5 sm:!size-[22px] sm:!min-w-[22px] [&_svg]:size-[11px] sm:[&_svg]:size-3"><Bot aria-hidden="true" /></MessageAvatar> : null}
@@ -368,10 +409,7 @@ function AuroraChatBlock({ title = "Aurora Chat", subtitle = "Composable convers
                             {item.role === "assistant" ? <MessageHeader className="min-h-0 gap-1 px-0 sm:gap-1.5"><span style={{ color: "var(--aurora-text-primary)", fontSize: "var(--aurora-type-caption)", fontWeight: "var(--aurora-weight-ui)" }}>Aurora</span>{item.streaming ? <span className="aurora-chat-stream-status" role="status"><span className="aurora-chat-stream-dot" aria-hidden="true" />Streaming</span> : null}</MessageHeader> : null}
                             <BubbleGroup>
                               <Bubble variant={item.role === "user" ? "default" : "ghost"} align={item.role === "user" ? "end" : "start"} className={item.role === "assistant" ? "max-w-[64ch]" : "max-w-[86%] sm:max-w-[36ch]"}>
-                                <BubbleContent style={item.role === "user" ? { padding: "7px 10px", lineHeight: "1.45" } : { lineHeight: "1.55" }}>
-                                  {item.text}
-                                  {item.streaming ? <span aria-hidden="true" className="ml-1 inline-block h-[1em] w-[2px] translate-y-[2px] rounded-full" style={{ background: "var(--aurora-accent-pink)", animation: "aurora-msg-caret 1.1s steps(1) infinite" }} /> : null}
-                                </BubbleContent>
+                                {item.role === "assistant" ? <Response markdown={item.text} sources={item.responseSources} streaming={item.streaming} aria-live="off" className="aurora-chat-response max-w-[64ch]" style={{ fontSize: "var(--aurora-type-body-sm)", lineHeight: 1.55 }} /> : <BubbleContent style={{ padding: "7px 10px", lineHeight: "1.45" }}>{item.text}</BubbleContent>}
                               </Bubble>
                               {item.attachments?.length ? <AttachmentGroup className="gap-1.5 py-0.5">{item.attachments.map((attachment) => <AttachmentCard key={attachment.id} attachment={attachment} onOpen={setPreviewAttachment} compact />)}</AttachmentGroup> : null}
                             </BubbleGroup>
@@ -403,17 +441,13 @@ function AuroraChatBlock({ title = "Aurora Chat", subtitle = "Composable convers
         </MessageScrollerProvider>
       </div>
 
-      {previewAttachment ? <div className="mx-3 mb-1.5 flex shrink-0 items-center gap-2 rounded-[9px] border px-2 py-1.5" role="region" aria-label="Attachment preview" style={{ borderColor: "color-mix(in srgb, var(--aurora-accent-primary) 28%, var(--aurora-border-default))", background: "color-mix(in srgb, var(--aurora-accent-primary) 6%, var(--aurora-panel-medium))" }}>
-        <FileText className="size-3.5" aria-hidden="true" style={{ color: "var(--aurora-accent-primary)" }} />
-        <div className="min-w-0 flex-1"><p className="truncate" style={{ fontSize: "var(--aurora-type-label)", fontWeight: "var(--aurora-weight-ui)", lineHeight: "var(--aurora-line-dense)" }}>{previewAttachment.title}</p><p className="truncate" style={{ color: "var(--aurora-text-muted)", fontSize: "var(--aurora-type-caption)", lineHeight: "var(--aurora-line-dense)" }}>Mock preview · {previewAttachment.description}</p></div>
-        <Button type="button" variant="ghost" size="icon" className="!size-6 [&_svg]:!size-3.5" aria-label="Close preview" onClick={() => setPreviewAttachment(null)}><X aria-hidden="true" /></Button>
-      </div> : null}
+      {previewAttachment ? <AttachmentPreviewPanel attachment={previewAttachment} onClose={() => setPreviewAttachment(null)} /> : null}
 
       <form className="relative z-30 shrink-0 border-t p-1 sm:p-1.5" style={{ borderColor: "var(--aurora-border-default)", background: "color-mix(in srgb, var(--aurora-panel-strong) 94%, transparent)" }} onSubmit={(event) => { event.preventDefault(); if (!showStopButton) submitMessage() }}>
         <SuggestionPopup label="Skills and slash commands" items={slashOpen ? filteredSlash : []} activeIndex={slashActiveIndex} onSelect={insertSlashCommand} />
         <SuggestionPopup label="File mentions" items={mentionOpen ? filteredMentions : []} activeIndex={mentionActiveIndex} onSelect={insertMention} />
         {composerAttachment ? <AttachmentGroup className="mb-1.5 gap-1 py-0"><AttachmentCard attachment={composerAttachment} onOpen={setPreviewAttachment} onRemove={() => setComposerAttachment(null)} compact /></AttachmentGroup> : null}
-        <div className="aurora-chat-composer overflow-hidden rounded-[12px] border" data-streaming={isResponding ? "true" : undefined} style={{ borderColor: "var(--aurora-border-strong)", background: "linear-gradient(180deg, color-mix(in srgb, var(--aurora-control-surface) 96%, var(--aurora-panel-strong)), var(--aurora-control-surface))", boxShadow: "var(--aurora-highlight-medium)" }}>
+        <div className="aurora-chat-composer overflow-hidden rounded-[12px] border" data-streaming={isResponding ? "true" : undefined} data-steering={isResponding && hasComposerPayload && !editingMessageId ? "true" : undefined}>
           <div className="relative">
             <Button type="button" variant="ghost" size="icon" className="absolute bottom-1 left-1 z-10 !size-6 [&_svg]:!size-3.5" aria-label="Add mock attachment" disabled={Boolean(composerAttachment)} onClick={addMockAttachment}><Paperclip aria-hidden="true" /></Button>
             <Textarea ref={textareaRef} unstyled autoGrow rows={1} value={value} aria-label="Message" aria-autocomplete="list" placeholder={editingMessageId ? "Edit your message…" : isResponding ? "Steer the response…" : "Ask Aurora anything…"} className="max-h-[96px] min-h-[38px] w-full resize-none bg-transparent px-9 py-2 outline-none" style={{ color: "var(--aurora-text-primary)", fontFamily: "var(--aurora-font-sans)", fontSize: "var(--aurora-type-body-sm)", lineHeight: "var(--aurora-line-body)", caretColor: "var(--aurora-accent-primary)" }} onChange={handleComposerChange} onKeyDown={handleComposerKeyDown} />
diff --git a/registry/aurora/blocks/ai/elements/inline-citation.tsx b/registry/aurora/blocks/ai/elements/inline-citation.tsx
index 6e6ca960..3175a972 100644
--- a/registry/aurora/blocks/ai/elements/inline-citation.tsx
+++ b/registry/aurora/blocks/ai/elements/inline-citation.tsx
@@ -42,6 +42,7 @@ const InlineCitation = (
   ) => {
     const [open, setOpen] = React.useState(false)
     const resolvedHref = safeHttpUrl(href ?? url)
+    const sourceHost = resolvedHref ? new URL(resolvedHref).hostname.replace(/^www\./, "") : null
     const hasPreview = Boolean(title || description || url)
     const previewId = React.useId()
     const resolvedTarget = target ?? (resolvedHref ? "_blank" : undefined)
@@ -166,16 +167,9 @@ const InlineCitation = (
               {description}
             </span>
           ) : null}
-          {url ? (
-            <span
-              className="aurora-text-meta"
-              style={{
-                lineHeight: 1.4,
-                color: "var(--aurora-accent-pink)",
-                wordBreak: "break-all",
-              }}
-            >
-              {url}
+          {sourceHost ? (
+            <span className="aurora-text-meta inline-flex items-center gap-1" style={{ lineHeight: 1.4, color: "var(--aurora-accent-pink)" }}>
+              <span>{sourceHost}</span><span aria-hidden="true">↗</span>
             </span>
           ) : null}
         </span>
diff --git a/registry/aurora/blocks/ai/elements/response.tsx b/registry/aurora/blocks/ai/elements/response.tsx
index 16147ba2..ab1cb866 100644
--- a/registry/aurora/blocks/ai/elements/response.tsx
+++ b/registry/aurora/blocks/ai/elements/response.tsx
@@ -201,6 +201,7 @@ function CitationChip({
 }) {
   const [open, setOpen] = React.useState(false)
   const safeHref = safeHttpUrl(source?.href)
+  const sourceHost = safeHref ? new URL(safeHref).hostname.replace(/^www\./, "") : null
   const hasPreview = Boolean(source?.title || source?.description || source?.href)
   const previewId = React.useId()
   const isLinked = Boolean(safeHref)
@@ -318,16 +319,9 @@ function CitationChip({
             {source.description}
           </span>
         ) : null}
-        {source?.href ? (
-          <span
-            className="aurora-text-meta"
-            style={{
-              lineHeight: 1.4,
-              color: "var(--aurora-accent-pink)",
-              wordBreak: "break-all",
-            }}
-          >
-            {source.href}
+        {sourceHost ? (
+          <span className="aurora-text-meta inline-flex items-center gap-1" style={{ lineHeight: 1.4, color: "var(--aurora-accent-pink)" }}>
+            <span>{sourceHost}</span><span aria-hidden="true">↗</span>
           </span>
         ) : null}
       </span>
diff --git a/registry/aurora/styles/aurora-components.css b/registry/aurora/styles/aurora-components.css
index f4a0b729..ee8b9719 100644
--- a/registry/aurora/styles/aurora-components.css
+++ b/registry/aurora/styles/aurora-components.css
@@ -435,11 +435,25 @@
 }
 
 .aurora-chat-composer {
+  border-color: var(--aurora-border-strong);
+  background: linear-gradient(180deg, color-mix(in srgb, var(--aurora-control-surface) 96%, var(--aurora-panel-strong)), var(--aurora-control-surface));
+  box-shadow: var(--aurora-highlight-medium);
   transition: border-color 150ms ease, box-shadow 150ms ease, background 150ms ease;
 }
 .aurora-chat-composer[data-streaming="true"] {
   border-color: color-mix(in srgb, var(--axon-orange) 28%, var(--aurora-border-strong));
 }
+.aurora-chat-composer[data-steering="true"] {
+  border-color: color-mix(in srgb, var(--aurora-accent-pink) 38%, var(--aurora-border-strong));
+  background: linear-gradient(180deg, color-mix(in srgb, var(--aurora-accent-pink) 3%, var(--aurora-control-surface)), var(--aurora-control-surface));
+  box-shadow: 0 0 0 1px color-mix(in srgb, var(--aurora-accent-pink) 10%, transparent), var(--aurora-highlight-medium);
+}
+.aurora-chat-response .aurora-response-block:first-child { margin-top: 0 !important; }
+.aurora-chat-response .aurora-response-block:last-child { margin-bottom: 0 !important; }
+.aurora-chat-response code {
+  box-decoration-break: clone;
+  -webkit-box-decoration-break: clone;
+}
 .aurora-chat-composer:focus-within {
   border-color: color-mix(in srgb, var(--aurora-accent-primary) 48%, var(--aurora-border-strong));
   box-shadow: 0 0 0 1px color-mix(in srgb, var(--aurora-accent-primary) 18%, transparent),
diff --git a/stories/aurora/chat-block.stories.tsx b/stories/aurora/chat-block.stories.tsx
index 6ec55ec6..cd346db6 100644
--- a/stories/aurora/chat-block.stories.tsx
+++ b/stories/aurora/chat-block.stories.tsx
@@ -54,6 +54,7 @@ export const InteractiveFlow: Story = {
     await expect(canvas.getByRole("button", { name: "Stop response" })).toBeInTheDocument()
 
     await userEvent.type(input, "Keep it concise.")
+    await expect(canvasElement.querySelector(".aurora-chat-composer")).toHaveAttribute("data-steering", "true")
     await userEvent.click(canvas.getByRole("button", { name: "Send steering message" }))
     await expect(canvas.getByText("Keep it concise.")).toBeInTheDocument()
 
@@ -64,6 +65,33 @@ export const InteractiveFlow: Story = {
   },
 }
 
+export const ContentStates: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+    const citation = canvas.getByRole("link", { name: /Citation 1:/i })
+    await userEvent.hover(citation)
+    await expect(canvas.getByRole("tooltip")).toHaveTextContent("ui.shadcn.com")
+    await userEvent.unhover(citation)
+
+    await userEvent.click(canvas.getByRole("button", { name: "Preview chat-primitives.md" }))
+    const preview = canvas.getByRole("region", { name: "Attachment preview" })
+    await expect(preview).toHaveTextContent("# Chat primitives")
+    await userEvent.click(within(preview).getByRole("button", { name: "Close preview" }))
+
+    await userEvent.click(canvas.getByRole("button", { name: "New chat" }))
+    await expect(canvas.getByText("Start a new conversation")).toBeInTheDocument()
+    await userEvent.click(canvas.getByRole("button", { name: "Load demo thread" }))
+
+    const input = canvas.getByRole("textbox", { name: "Message" })
+    await userEvent.type(input, "/error")
+    await userEvent.click(canvas.getByRole("button", { name: "Send message" }))
+    const alert = canvas.getByRole("alert", { name: "Mock response failed" })
+    await expect(alert).toHaveTextContent("Your turn is preserved")
+    await userEvent.click(within(alert).getByRole("button", { name: "Dismiss" }))
+    await expect(canvas.queryByRole("alert", { name: "Mock response failed" })).not.toBeInTheDocument()
+  },
+}
+
 export const StopFlow: Story = {
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement)
diff --git a/tests/chat-primitives-contract.test.ts b/tests/chat-primitives-contract.test.ts
index 5e469586..958763c3 100644
--- a/tests/chat-primitives-contract.test.ts
+++ b/tests/chat-primitives-contract.test.ts
@@ -32,7 +32,7 @@ test("interactive chat block composes all five primitive families and stays loca
   for (const primitiveModule of ["message-scroller", "message", "bubble", "attachment", "marker"]) {
     assert.ok(source.includes("@/registry/aurora/ui/" + primitiveModule), "chat block does not import " + primitiveModule)
   }
-  for (const interaction of ["setInterval", "navigator.clipboard", "retryMessage", "addMockAttachment", "toggleLike", "editMessage", "stopResponse", "insertSlashCommand", "insertMention", "resetDemo"]) {
+  for (const interaction of ["setInterval", "navigator.clipboard", "retryMessage", "addMockAttachment", "toggleLike", "editMessage", "stopResponse", "insertSlashCommand", "insertMention", "resetDemo", "newChat"]) {
     assert.ok(source.includes(interaction), "chat block is missing " + interaction)
   }
   assert.equal(/\bfetch\s*\(/.test(source), false)
@@ -57,6 +57,7 @@ test("new chat surfaces preserve Aurora conversation ergonomics", () => {
   assert.ok(block.includes("h-[min(680px,78svh)]"), "mobile chat should use small-viewport units instead of desktop vh sizing")
   assert.ok(block.includes("max-w-[44%] flex-1"), "mobile model and reasoning selectors should share the composer footer without overflowing")
   assert.ok(block.includes("aurora-chat-composer"), "composer should retain the unified Aurora focus surface")
+  assert.ok(block.includes("data-steering={isResponding && hasComposerPayload"), "composer should expose a distinct steering state while a reply is active")
   assert.ok(block.includes('aria-label="Edit message"'), "user messages should expose edit actions")
   assert.ok(block.includes("<ThumbsUp"), "assistant actions should include thumbs up beside copy and retry")
   assert.equal(block.includes(">Retry</Button>"), false, "copy and retry controls should stay icon-only")
@@ -73,12 +74,28 @@ test("new chat surfaces preserve Aurora conversation ergonomics", () => {
   assert.ok(block.includes('Snippet density="compact"'), "assistant turns should demonstrate snippets")
   assert.ok(block.includes('CodeBlock density="compact"'), "assistant turns should demonstrate code blocks")
   assert.ok(block.includes('Sources density="compact"'), "assistant turns should demonstrate sources and references")
+  assert.ok(block.includes('<Response markdown={item.text}'), "assistant prose should use Aurora Response for markdown, citations, and streaming typography")
+  assert.ok(block.includes("responseSources?: ResponseSource[]"), "assistant turns should support inline citation metadata")
+  assert.ok(block.includes("[content-visibility:visible]"), "citation-rich turns should allow hover previews to escape paint containment")
+  assert.ok(block.includes("AttachmentPreviewPanel"), "attachments should expose a real compact preview surface")
+  assert.ok(block.includes('label: "/error"'), "slash commands should include the recoverable error-state demo")
+  assert.ok(block.includes("<EmptyState"), "new chats should render a deliberate empty state")
+  assert.ok(block.includes('<Callout variant="error"'), "recoverable failures should use the Aurora error callout")
   assert.ok(block.includes("absolute bottom-1 left-1"), "attachment control should live inside the input field")
   assert.ok(block.includes("absolute bottom-1 right-1"), "send or stop control should live inside the input field")
   assert.equal(/<Textarea[^>]*disabled=/.test(block), false, "the composer should remain editable while the assistant is replying")
   assert.equal(block.includes("aria-label={item.role === \"user\" ? \"You\" : \"Aurora\"}"), false, "user turns should not regain redundant identity avatars")
 })
 
+test("chat citations use concise hostname previews", () => {
+  const response = read("registry/aurora/blocks/ai/elements/response.tsx")
+  const inlineCitation = read("registry/aurora/blocks/ai/elements/inline-citation.tsx")
+  assert.ok(response.includes("const sourceHost = safeHref ? new URL(safeHref).hostname"))
+  assert.ok(inlineCitation.includes("const sourceHost = resolvedHref ? new URL(resolvedHref).hostname"))
+  assert.equal(response.includes("{source.href}"), false, "response citation previews should not dump raw URLs")
+  assert.equal(inlineCitation.includes("{url}"), false, "inline citation previews should not dump raw URLs")
+})
+
 test("chat developer surfaces keep scrollable code keyboard reachable", () => {
   const snippet = read("registry/aurora/blocks/ai/elements/snippet.tsx")
   const codeBlock = read("registry/aurora/blocks/workspace/code-block/code-block.tsx")
diff --git a/tests/e2e/site.spec.ts b/tests/e2e/site.spec.ts
index 8b5725c6..c6f3ae38 100644
--- a/tests/e2e/site.spec.ts
+++ b/tests/e2e/site.spec.ts
@@ -88,6 +88,36 @@ test("chat autocomplete popovers accept real pointer clicks above the transcript
   await expect(input).toHaveValue("@chat.tsx ")
 })
 
+test("chat content states remain interactive across browsers", async ({ page }) => {
+  await page.goto("/gallery/chat-block")
+
+  const citation = page.getByRole("link", { name: /Citation 1:/i })
+  await citation.focus()
+  const tooltip = page.getByRole("tooltip").first()
+  await expect(tooltip).toBeVisible()
+  await expect(tooltip).toContainText("ui.shadcn.com")
+  const citationItem = citation.locator('xpath=ancestor::*[@data-slot="message-scroller-item"][1]')
+  await expect(citationItem).toHaveCSS("content-visibility", "visible")
+
+  await page.getByRole("button", { name: "Preview chat-primitives.md" }).click()
+  const preview = page.getByRole("region", { name: "Attachment preview" })
+  await expect(preview).toBeVisible()
+  await expect(preview).toContainText("# Chat primitives")
+  await preview.getByRole("button", { name: "Close preview" }).click()
+
+  await page.getByRole("button", { name: "New chat" }).click()
+  await expect(page.getByText("Start a new conversation")).toBeVisible()
+  await page.getByRole("button", { name: "Load demo thread" }).click()
+
+  const input = page.getByRole("textbox", { name: "Message" })
+  await input.fill("/error")
+  await page.getByRole("button", { name: "Send message" }).click()
+  const alert = page.getByRole("alert", { name: "Mock response failed" })
+  await expect(alert).toContainText("Your turn is preserved")
+  await alert.getByRole("button", { name: "Dismiss" }).click()
+  await expect(alert).toHaveCount(0)
+})
+
 test("chat has a dedicated unclipped mobile layout on touch viewports", async ({ page }, testInfo) => {
   test.skip(!testInfo.project.name.includes("mobile"))
   await page.goto("/gallery/chat-block")