@hanzo/browser-extension 1.7.6 → 1.9.33

package/src/chat-widget.tsx

@@ -0,0 +1,96 @@
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+import { flushSync } from 'react-dom';
+import {
+  Button,
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+  Textarea,
+} from '@hanzo/gui';
+
+function LoginPrompt() {
+  return (
+    <Card className="chat-modern-login-card">
+      <CardHeader>
+        <CardTitle>Chat with Zen AI models</CardTitle>
+        <CardDescription>Models enabled in Hanzo Cloud are loaded automatically.</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <Button id="auth-btn" className="chat-modern-auth-btn" type="button">
+          Sign in
+        </Button>
+        <Button id="signup-btn" className="secondary-btn" type="button">
+          Create account
+        </Button>
+        <p className="auth-note">
+          Browser tools work without sign-in.{' '}
+          <a href="https://docs.hanzo.ai" target="_blank" rel="noreferrer">
+            Learn more
+          </a>
+        </p>
+      </CardContent>
+    </Card>
+  );
+}
+
+function ChatComposer() {
+  return (
+    <div className="chat-modern-composer">
+      <div className="model-selector">
+        <select id="model-select">
+          <option value="claude-sonnet-4-20250514">Claude Sonnet 4</option>
+          <option value="claude-opus-4-20250514">Claude Opus 4</option>
+          <option value="gpt-4o">GPT-4o</option>
+          <option value="zen-coder-flash">Zen Coder Flash</option>
+          <option value="zen-max">Zen Max</option>
+        </select>
+      </div>
+
+      <div className="chat-flags">
+        <label className="flag-toggle">
+          <input type="checkbox" id="rag-enabled" defaultChecked />
+          <span>RAG</span>
+        </label>
+        <label className="flag-toggle">
+          <input type="checkbox" id="tab-context-enabled" defaultChecked />
+          <span>Tab Context</span>
+        </label>
+        <span id="rag-status" className="rag-status">
+          Ready
+        </span>
+      </div>
+
+      <div className="input-row">
+        <Textarea id="chat-input" className="chat-modern-input" placeholder="Ask anything..." rows={1} />
+        <Button id="send-btn" className="send-btn chat-modern-send" title="Send" type="button">
+          <svg viewBox="0 0 20 20" fill="none" stroke="currentColor" aria-hidden="true">
+            <path d="M4 10l12-6-6 12-2-6-4-2z" strokeWidth="1.5" fill="currentColor" />
+          </svg>
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+export function mountModernChatWidget() {
+  const loginTarget = document.getElementById('chat-login-prompt');
+  if (loginTarget) {
+    loginTarget.innerHTML = '';
+    const loginRoot = createRoot(loginTarget);
+    flushSync(() => {
+      loginRoot.render(<LoginPrompt />);
+    });
+  }
+
+  const composerTarget = document.getElementById('chat-composer');
+  if (composerTarget) {
+    composerTarget.innerHTML = '';
+    const composerRoot = createRoot(composerTarget);
+    flushSync(() => {
+      composerRoot.render(<ChatComposer />);
+    });
+  }
+}

package/src/gui-primitives.tsx

@@ -0,0 +1,116 @@
+/**
+ * Local @hanzo/gui primitives shim for the extension.
+ *
+ * This is the canonical surface the extension's React components import via
+ * `@hanzo/gui`. It deliberately does NOT pull in the upstream tamagui-based
+ * `@hanzo/gui` package because:
+ *
+ *   1. content-script + background bundles target the smallest possible
+ *      payload — RNW + tamagui's runtime is far too heavy for a script
+ *      injected into every page;
+ *   2. Hanzo brand is strict monochrome (see ~/work/hanzo/brand/brand.json,
+ *      primaryColor #FFFFFF), so no color tokens travel with primitives
+ *      anyway — pure structural elements styled by sibling CSS;
+ *   3. The full tamagui adoption ships in a future feature branch with the
+ *      compiler + RNW peer dep wired correctly.
+ *
+ * The build aliases `@hanzo/gui` → this file. When the tamagui adoption
+ * lands, swap the alias target to the published `@hanzo/gui` package.
+ *
+ * Each primitive renders a plain DOM element with a stable, monochrome
+ * class hook. All visuals come from sidebar.css / popup.css using the
+ * brand token scale (white luminance ladder, no chromatic accents).
+ */
+import React from 'react';
+
+type Classy = { className?: string; children?: React.ReactNode };
+
+function cx(base: string, extra?: string): string {
+  return extra ? `${base} ${extra}` : base;
+}
+
+export function Button(props: React.ButtonHTMLAttributes<HTMLButtonElement>) {
+  const { className, children, ...rest } = props;
+  return (
+    <button {...rest} className={cx('hanzo-gui-btn', className)}>
+      {children}
+    </button>
+  );
+}
+
+export function Textarea(props: React.TextareaHTMLAttributes<HTMLTextAreaElement>) {
+  const { className, children, ...rest } = props;
+  return (
+    <textarea {...rest} className={cx('hanzo-gui-textarea', className)}>
+      {children}
+    </textarea>
+  );
+}
+
+export function Input(props: React.InputHTMLAttributes<HTMLInputElement>) {
+  const { className, ...rest } = props;
+  return <input {...rest} className={cx('hanzo-gui-input', className)} />;
+}
+
+export function Card({ className, children }: Classy) {
+  return <div className={cx('hanzo-gui-card', className)}>{children}</div>;
+}
+
+export function CardHeader({ className, children }: Classy) {
+  return <div className={cx('hanzo-gui-card-header', className)}>{children}</div>;
+}
+
+export function CardTitle({ className, children }: Classy) {
+  return <h3 className={cx('hanzo-gui-card-title', className)}>{children}</h3>;
+}
+
+export function CardDescription({ className, children }: Classy) {
+  return <p className={cx('hanzo-gui-card-description', className)}>{children}</p>;
+}
+
+export function CardContent({ className, children }: Classy) {
+  return <div className={cx('hanzo-gui-card-content', className)}>{children}</div>;
+}
+
+/* Layout primitives — mirror the names used by the upstream Tamagui-based
+   @hanzo/gui (XStack/YStack) so call-sites can be ported without churn
+   when the full adoption lands. Pure flexbox under the hood. */
+type Stack = Classy & React.HTMLAttributes<HTMLDivElement> & {
+  gap?: number | string;
+};
+
+export function XStack({ className, gap, style, children, ...rest }: Stack) {
+  const merged: React.CSSProperties = {
+    display: 'flex',
+    flexDirection: 'row',
+    gap,
+    ...style,
+  };
+  return (
+    <div {...rest} style={merged} className={cx('hanzo-gui-xstack', className)}>
+      {children}
+    </div>
+  );
+}
+
+export function YStack({ className, gap, style, children, ...rest }: Stack) {
+  const merged: React.CSSProperties = {
+    display: 'flex',
+    flexDirection: 'column',
+    gap,
+    ...style,
+  };
+  return (
+    <div {...rest} style={merged} className={cx('hanzo-gui-ystack', className)}>
+      {children}
+    </div>
+  );
+}
+
+export function Text({ className, children, ...rest }: Classy & React.HTMLAttributes<HTMLSpanElement>) {
+  return (
+    <span {...rest} className={cx('hanzo-gui-text', className)}>
+      {children}
+    </span>
+  );
+}

package/src/manifest-firefox.json

@@ -1,19 +1,24 @@
 {
   "manifest_version": 3,
   "name": "Hanzo AI",
-  "version": "1.7.6",
-  "description": "AI-powered dev assistant — click-to-code navigation, source maps, WebGPU AI, and MCP integration for Claude Code.",
+  "version": "1.9.33",
+  "description": "AI answer engine, search, and dev assistant — Hanzo AI in a new tab, address-bar search, source-cited answers, realtime news, WebGPU AI, and MCP.",
   "permissions": [
     "activeTab",
     "identity",
     "storage",
     "tabs",
     "webNavigation",
-    "scripting"
+    "scripting",
+    "cookies",
+    "nativeMessaging",
+    "alarms"
   ],
   "host_permissions": [
     "http://localhost/*",
     "https://localhost/*",
+    "https://claude.ai/*",
+    "https://chatgpt.com/*",
     "<all_urls>"
   ],
   "content_security_policy": {
@@ -21,13 +26,19 @@
   },
   "content_scripts": [
     {
-      "matches": ["<all_urls>"],
-      "js": ["content-script.js"],
+      "matches": [
+        "<all_urls>"
+      ],
+      "js": [
+        "content-script.js"
+      ],
       "run_at": "document_idle"
     }
   ],
   "background": {
-    "scripts": ["background.js"],
+    "scripts": [
+      "background.js"
+    ],
     "type": "module"
   },
   "action": {
@@ -38,18 +49,30 @@
       "128": "icon128.png"
     }
   },
+  "chrome_url_overrides": {
+    "newtab": "newtab.html"
+  },
+  "omnibox": {
+    "keyword": "hanzo"
+  },
   "sidebar_action": {
     "default_title": "Hanzo AI",
     "default_panel": "sidebar.html",
     "default_icon": {
       "16": "icon16.png",
       "48": "icon48.png"
-    }
+    },
+    "open_at_install": false
   },
   "web_accessible_resources": [
     {
-      "resources": ["ai-worker.js", "models/*"],
-      "matches": ["<all_urls>"]
+      "resources": [
+        "ai-worker.js",
+        "models/*"
+      ],
+      "matches": [
+        "<all_urls>"
+      ]
     }
   ],
   "browser_specific_settings": {
@@ -58,9 +81,5 @@
       "strict_min_version": "109.0"
     },
     "gecko_android": {}
-  },
-  "data_collection_permissions": {
-    "purposes": ["functionality"],
-    "data_categories": ["technical_data"]
   }
 }

package/src/manifest.json

@@ -1,21 +1,26 @@
 {
   "manifest_version": 3,
   "name": "Hanzo AI",
-  "version": "1.7.6",
-  "description": "AI-powered dev assistant — click-to-code navigation, source maps, WebGPU AI, and MCP integration for Claude Code.",
+  "version": "1.9.33",
+  "description": "AI answer engine, search, and dev assistant — Hanzo AI in a new tab, address-bar search, source-cited answers, realtime news, WebGPU AI, and MCP.",
+  "key": "MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAxfXGh0lPUT5m04GKfjUwrLsV6pLaK3VcZuFRPogqAir2tzyLYnQPRtHynue9yvDyguIVnlkwvcwfDOYZrvH76zbw4s6onPBG8HqTKO6LQ9K3kdO1qBBkMMjdOgULQ1MrWThEbpU7NSTiwLYpEta/jAvrKRCAeKIlQE8p6htZmPy9aRUZuae66JgLcAlzD2vviX9sVB1asFABJVswL1RgZ55/8IzZaUrFjzOo9OHK4hmEOtudzkML+5silsAYdC+1BZugph2x94ai17YmZTCL1XyUa5Ke4q80cj+i9rOTgzhZs+mruyhL/AvNVOXilsgqCdNqSz77naWzC3pVGbxOewIDAQAB",
   "permissions": [
     "activeTab",
     "identity",
-    "sidePanel",
     "storage",
     "tabs",
     "webNavigation",
     "scripting",
-    "debugger"
+    "cookies",
+    "debugger",
+    "alarms",
+    "nativeMessaging"
   ],
   "host_permissions": [
     "http://localhost/*",
     "https://localhost/*",
+    "https://claude.ai/*",
+    "https://chatgpt.com/*",
     "<all_urls>"
   ],
   "content_security_policy": {
@@ -23,8 +28,12 @@
   },
   "content_scripts": [
     {
-      "matches": ["<all_urls>"],
-      "js": ["content-script.js"],
+      "matches": [
+        "<all_urls>"
+      ],
+      "js": [
+        "content-script.js"
+      ],
       "run_at": "document_idle"
     }
   ],
@@ -40,18 +49,33 @@
       "128": "icon128.png"
     }
   },
-  "side_panel": {
-    "default_path": "sidebar.html"
-  },
   "icons": {
     "16": "icon16.png",
     "48": "icon48.png",
     "128": "icon128.png"
   },
+  "chrome_url_overrides": {
+    "newtab": "newtab.html"
+  },
+  "chrome_settings_overrides": {
+    "search_provider": {
+      "name": "Hanzo",
+      "keyword": "hanzo",
+      "search_url": "https://hanzo.chat/c/new?q={searchTerms}&submit=true",
+      "favicon_url": "https://hanzo.ai/favicon.ico",
+      "encoding": "UTF-8",
+      "is_default": true
+    }
+  },
   "web_accessible_resources": [
     {
-      "resources": ["ai-worker.js", "models/*"],
-      "matches": ["<all_urls>"]
+      "resources": [
+        "ai-worker.js",
+        "models/*"
+      ],
+      "matches": [
+        "<all_urls>"
+      ]
     }
   ]
 }

package/src/newtab.css

@@ -0,0 +1,277 @@
+/* Hanzo Answer Engine — strict monochrome (brand primaryColor #FFFFFF).
+   Shared tokens mirror popup.css / sidebar.css. */
+:root {
+  --bg: #0a0a0a;
+  --surface: #0f0f0f;
+  --surface-2: #171717;
+  --surface-3: #1e1e1e;
+  --text: #fafafa;
+  --text-2: #a3a3a3;
+  --text-3: #666666;
+  --border: rgba(255, 255, 255, 0.10);
+  --border-2: rgba(255, 255, 255, 0.16);
+  --glass: rgba(255, 255, 255, 0.04);
+  --glass-2: rgba(255, 255, 255, 0.07);
+  --radius: 12px;
+  --radius-sm: 8px;
+  --radius-xs: 6px;
+  --sidebar-w: 232px;
+}
+
+* { box-sizing: border-box; }
+
+html, body {
+  margin: 0;
+  height: 100%;
+  background: var(--bg);
+  color: var(--text);
+  font-family: 'Geist Sans', -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', sans-serif;
+  -webkit-font-smoothing: antialiased;
+}
+
+a { color: inherit; text-decoration: none; }
+
+.ae-root {
+  display: grid;
+  grid-template-columns: var(--sidebar-w) 1fr;
+  height: 100vh;
+  transition: grid-template-columns 0.18s ease;
+}
+.ae-root.collapsed { grid-template-columns: 60px 1fr; }
+
+/* ── Sidebar ─────────────────────────────────────────────── */
+.ae-sidebar {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 14px 12px;
+  border-right: 1px solid var(--border);
+  background: var(--surface);
+  min-width: 0;
+}
+.ae-side-top { display: flex; align-items: center; justify-content: space-between; }
+.ae-brand {
+  display: flex; align-items: center; gap: 9px;
+  background: none; border: none; color: var(--text);
+  font-size: 15px; font-weight: 600; letter-spacing: -0.01em;
+  cursor: pointer; padding: 4px; min-width: 0;
+}
+.ae-brand span { white-space: nowrap; overflow: hidden; }
+.ae-collapse, .ae-new, .ae-signin {
+  cursor: pointer; font-family: inherit;
+}
+.ae-collapse {
+  background: none; border: none; color: var(--text-3);
+  padding: 4px; border-radius: var(--radius-xs); display: flex;
+}
+.ae-collapse:hover { color: var(--text); background: var(--glass); }
+.ae-new {
+  display: flex; align-items: center; gap: 8px;
+  margin-top: 8px; padding: 9px 12px;
+  background: var(--text); color: #000; border: none;
+  border-radius: var(--radius-sm); font-size: 13px; font-weight: 600;
+  white-space: nowrap; overflow: hidden;
+}
+.ae-new:hover { background: #fff; }
+.ae-nav { display: flex; flex-direction: column; margin-top: 12px; gap: 1px; }
+.ae-nav a {
+  padding: 8px 10px; border-radius: var(--radius-xs);
+  color: var(--text-2); font-size: 13px; white-space: nowrap;
+}
+.ae-nav a:hover { background: var(--glass); color: var(--text); }
+.ae-side-bottom { margin-top: auto; }
+.ae-signin {
+  width: 100%; padding: 9px 12px;
+  background: var(--glass-2); border: 1px solid var(--border);
+  color: var(--text); border-radius: var(--radius-sm);
+  font-size: 12.5px; font-weight: 500; white-space: nowrap; overflow: hidden;
+}
+.ae-signin:hover { border-color: var(--border-2); background: var(--surface-2); }
+.ae-signin.big { width: auto; padding: 10px 18px; font-size: 14px; }
+.collapsed .ae-brand span, .collapsed .ae-new span, .collapsed .ae-nav { display: none; }
+
+/* ── Main ────────────────────────────────────────────────── */
+.ae-main { min-width: 0; overflow: hidden; display: flex; flex-direction: column; }
+
+/* Hero (empty state) */
+.ae-hero {
+  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
+  gap: 26px; padding: 24px; overflow-y: auto;
+}
+.ae-wordmark {
+  display: flex; align-items: center; gap: 14px;
+  font-size: 46px; font-weight: 600; letter-spacing: -0.03em; color: var(--text);
+}
+.ae-hero-card { width: 100%; max-width: 720px; }
+.ae-news { width: 100%; max-width: 720px; }
+.ae-news-head, .ae-followups-head, .ae-model-group-label {
+  font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em;
+  color: var(--text-3); margin-bottom: 10px;
+}
+.ae-news-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
+.ae-news-item {
+  display: flex; flex-direction: column; gap: 4px;
+  padding: 11px 13px; border: 1px solid var(--border);
+  border-radius: var(--radius-sm); background: var(--surface);
+}
+.ae-news-item:hover { border-color: var(--border-2); background: var(--surface-2); }
+.ae-news-title { font-size: 13px; color: var(--text); line-height: 1.35; }
+.ae-news-meta { font-size: 11px; color: var(--text-3); }
+
+/* ── Input card ──────────────────────────────────────────── */
+.ae-card {
+  background: var(--surface-2);
+  border: 1px solid var(--border-2);
+  border-radius: var(--radius);
+  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.02);
+  overflow: hidden;
+}
+.ae-input {
+  display: block; width: 100%; resize: none;
+  padding: 16px 18px 6px; min-height: 30px; max-height: 200px;
+  background: transparent; border: none; outline: none;
+  color: var(--text); font-family: inherit; font-size: 15px; line-height: 1.5;
+}
+.ae-input::placeholder { color: var(--text-3); }
+.ae-card-row {
+  display: flex; align-items: center; justify-content: space-between;
+  gap: 8px; padding: 8px 10px 10px; flex-wrap: wrap;
+}
+.ae-chips { display: flex; gap: 4px; flex-wrap: wrap; }
+.ae-chip {
+  padding: 4px 9px; border-radius: 999px; cursor: pointer;
+  background: var(--glass); border: 1px solid var(--border);
+  color: var(--text-3); font-size: 11px; font-family: inherit;
+}
+.ae-chip:hover { color: var(--text-2); }
+.ae-chip.on { background: var(--text); color: #000; border-color: var(--text); }
+.ae-card-right { display: flex; align-items: center; gap: 6px; }
+.ae-modes { display: flex; gap: 2px; background: var(--glass); border-radius: var(--radius-xs); padding: 2px; }
+.ae-mode {
+  padding: 4px 9px; border: none; background: none; cursor: pointer;
+  color: var(--text-3); font-size: 11.5px; font-family: inherit; border-radius: 5px;
+}
+.ae-mode:hover { color: var(--text-2); }
+.ae-mode.on { background: var(--surface-3); color: var(--text); }
+.ae-send {
+  width: 34px; height: 34px; flex-shrink: 0; cursor: pointer;
+  display: flex; align-items: center; justify-content: center;
+  background: var(--text); color: #000; border: none; border-radius: 50%;
+}
+.ae-send:disabled { opacity: 0.4; cursor: default; }
+
+/* ── Model picker ────────────────────────────────────────── */
+.ae-picker { position: relative; }
+.ae-picker-btn {
+  display: flex; align-items: center; gap: 6px; cursor: pointer;
+  padding: 6px 10px; background: var(--glass); border: 1px solid var(--border);
+  border-radius: var(--radius-xs); color: var(--text-2); font-size: 12px; font-family: inherit;
+}
+.ae-picker-btn:hover { color: var(--text); border-color: var(--border-2); }
+.ae-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--text-2); }
+.ae-picker-menu {
+  position: absolute; bottom: calc(100% + 6px); right: 0; z-index: 40;
+  width: 320px; max-height: 420px; display: flex; flex-direction: column;
+  background: var(--surface-2); border: 1px solid var(--border-2);
+  border-radius: var(--radius-sm); box-shadow: 0 12px 48px rgba(0, 0, 0, 0.6); overflow: hidden;
+}
+.ae-picker-filter {
+  margin: 8px; padding: 8px 10px; background: var(--bg);
+  border: 1px solid var(--border); border-radius: var(--radius-xs);
+  color: var(--text); font-family: inherit; font-size: 13px; outline: none;
+}
+.ae-picker-list { overflow-y: auto; padding: 0 6px 6px; }
+.ae-model-group-label { padding: 8px 8px 4px; margin: 0; }
+.ae-model-row {
+  display: flex; flex-direction: column; gap: 2px; width: 100%; text-align: left;
+  padding: 8px 10px; background: none; border: none; cursor: pointer;
+  border-radius: var(--radius-xs); color: var(--text); font-family: inherit;
+}
+.ae-model-row:hover { background: var(--glass); }
+.ae-model-row.active { background: var(--glass-2); }
+.ae-model-name { font-size: 13px; display: flex; align-items: center; gap: 7px; }
+.ae-model-desc { font-size: 11px; color: var(--text-3); line-height: 1.3; }
+.ae-badge {
+  font-size: 9px; text-transform: uppercase; letter-spacing: 0.04em;
+  padding: 1px 5px; border-radius: 4px; background: var(--glass-2); color: var(--text-2);
+}
+.ae-plan-banner {
+  display: flex; align-items: center; justify-content: space-between; gap: 8px;
+  padding: 10px 12px; border-top: 1px solid var(--border);
+  font-size: 11.5px; color: var(--text-2); background: var(--surface);
+}
+.ae-plan-tiers { display: flex; gap: 8px; }
+.ae-plan-tier b { color: var(--text); }
+
+/* ── Answer view ─────────────────────────────────────────── */
+.ae-answer-wrap { flex: 1; display: flex; flex-direction: column; min-height: 0; }
+.ae-answer-scroll { flex: 1; overflow-y: auto; padding: 32px 28px 20px; }
+.ae-answer-scroll > * { max-width: 760px; margin-left: auto; margin-right: auto; }
+.ae-question { font-size: 26px; font-weight: 600; letter-spacing: -0.02em; margin: 0 0 20px; }
+.ae-sources { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 16px; margin-bottom: 8px; }
+.ae-source {
+  flex: 0 0 190px; display: flex; flex-direction: column; gap: 6px;
+  padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm);
+  background: var(--surface);
+}
+.ae-source:hover { border-color: var(--border-2); background: var(--surface-2); }
+.ae-source-head { display: flex; align-items: center; gap: 6px; }
+.ae-source-head img { border-radius: 3px; }
+.ae-source-host { font-size: 11px; color: var(--text-3); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ae-source-idx { font-size: 10px; color: var(--text-3); border: 1px solid var(--border); border-radius: 4px; padding: 0 5px; }
+.ae-source-title { font-size: 12.5px; line-height: 1.35; color: var(--text); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
+
+.ae-status { display: flex; align-items: center; gap: 10px; color: var(--text-2); font-size: 14px; padding: 8px 0; }
+
+.ae-answer.markdown { font-size: 15px; line-height: 1.65; color: var(--text); }
+.markdown h2 { font-size: 20px; margin: 22px 0 10px; font-weight: 600; }
+.markdown h3 { font-size: 17px; margin: 18px 0 8px; font-weight: 600; }
+.markdown h4, .markdown h5 { font-size: 15px; margin: 14px 0 6px; font-weight: 600; }
+.markdown p { margin: 0 0 12px; }
+.markdown ul, .markdown ol { margin: 0 0 12px; padding-left: 22px; }
+.markdown li { margin: 4px 0; }
+.markdown a { color: var(--text); text-decoration: underline; text-decoration-color: var(--text-3); text-underline-offset: 2px; }
+.markdown a:hover { text-decoration-color: var(--text); }
+.markdown code { background: var(--surface-2); padding: 1px 5px; border-radius: 4px; font-size: 0.9em; font-family: 'Geist Mono', ui-monospace, monospace; }
+
+.ae-followups { margin-top: 26px; border-top: 1px solid var(--border); padding-top: 16px; }
+.ae-followup {
+  display: flex; align-items: center; justify-content: space-between; width: 100%;
+  padding: 12px 4px; background: none; border: none; border-bottom: 1px solid var(--border);
+  color: var(--text); font-family: inherit; font-size: 14px; text-align: left; cursor: pointer;
+}
+.ae-followup:hover { color: var(--text); }
+.ae-followup:hover .ae-followup-arrow { color: var(--text); transform: translateX(2px); }
+.ae-followup-arrow { color: var(--text-3); transition: transform 0.12s ease; }
+
+.ae-error { color: var(--text-2); padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); }
+.ae-auth { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 8px 0; }
+.ae-auth p { margin: 0; color: var(--text-2); font-size: 15px; }
+
+.ae-answer-composer { padding: 12px 28px 20px; border-top: 1px solid var(--border); background: var(--bg); }
+.ae-answer-composer > .ae-card { max-width: 760px; margin: 0 auto; }
+
+/* ── Spinner ─────────────────────────────────────────────── */
+.ae-spinner {
+  width: 14px; height: 14px; border-radius: 50%; display: inline-block;
+  border: 2px solid var(--border-2); border-top-color: var(--text);
+  animation: ae-spin 0.7s linear infinite;
+}
+@keyframes ae-spin { to { transform: rotate(360deg); } }
+
+@media (max-width: 720px) {
+  .ae-root, .ae-root.collapsed { grid-template-columns: 1fr; }
+  .ae-sidebar { display: none; }
+  .ae-news-grid { grid-template-columns: 1fr; }
+  .ae-hero { gap: 20px; padding: 20px 16px; justify-content: flex-start; padding-top: 48px; }
+  .ae-wordmark { font-size: 34px; }
+  .ae-answer-scroll { padding: 20px 16px 16px; }
+  .ae-answer-composer { padding: 10px 16px 16px; }
+  .ae-question { font-size: 21px; }
+  /* Input card: let the control row wrap so the model picker + send stay
+     reachable at narrow widths (mobile-first). */
+  .ae-card-row { flex-direction: column; align-items: stretch; gap: 10px; }
+  .ae-card-right { justify-content: space-between; }
+  .ae-modes { flex: 1; justify-content: space-between; }
+  .ae-source { flex-basis: 150px; }
+}