@aparte/core 0.2.0-alpha.0

package/dist/index.css

@@ -0,0 +1,2554 @@
+/*
+ * Aparte CSS
+ * Single source of truth for all component styles.
+ * Theme is controlled via CSS variables - app sets [data-aparte-theme="dark"] to switch.
+ */
+
+/* =========================================
+   Light Theme (Default)
+   ========================================= */
+:root,
+:host {
+  /* Base Colors */
+  --aparte-primary: #b07d33;
+  --aparte-primary-hover: #a06f28;
+  --aparte-secondary: #9a8fb0;
+  --aparte-neutral: #6d6479;
+
+  /* Backgrounds & Surfaces */
+  --aparte-bg: #f6f2ea;
+  --aparte-surface-1: #fffdf8;
+  /* Bubbles, cards */
+  --aparte-surface-2: #f1ebdf;
+  /* Code blocks, headers */
+  --aparte-surface-3: #e7dfce;
+  /* Skeletons, disabled */
+
+  /* Text */
+  --aparte-text: #241f2b;
+  --aparte-text-muted: #6d6479;
+  --aparte-text-inverse: #fffdf8;
+
+  /* Borders */
+  --aparte-border: #e5ddce;
+  --aparte-border-focus: var(--aparte-primary);
+  --aparte-border-width: 1px;
+
+  /* Status Colors */
+  --aparte-info: #3b82f6;
+  --aparte-success: #10b981;
+  --aparte-warning: #f59e0b;
+  --aparte-error: #ef4444;
+
+  /* Radius scale */
+  --aparte-radius-xs: 2px;
+  --aparte-radius-sm: 4px;
+  --aparte-radius-md: 6px;
+  --aparte-radius-lg: 8px;
+  --aparte-radius-xl: 12px;
+  --aparte-radius-full: 9999px;
+
+  /* Component-specific radius (overridable per app) */
+  --aparte-radius-input: var(--aparte-radius-lg);
+  --aparte-radius-input-footer: var(--aparte-radius-lg);
+  --aparte-radius-send-btn: var(--aparte-radius-md);
+  --aparte-radius-action-btn: var(--aparte-radius-sm);
+  --aparte-radius-select: var(--aparte-radius-md);
+  --aparte-radius-avatar: var(--aparte-radius-md);
+  --aparte-radius-bubble: var(--aparte-radius-lg);
+  --aparte-radius-code: var(--aparte-radius-lg);
+  --aparte-radius-thinking: var(--aparte-radius-lg);
+  --aparte-radius-terminal: var(--aparte-radius-lg);
+  --aparte-radius-error: var(--aparte-radius-md);
+  --aparte-radius-file-tree: var(--aparte-radius-lg);
+
+  /* Spacing scale — every gap / padding / margin / offset routes through these,
+     so there are no raw px spacings in the rules. Incidental, pixel-tuned values
+     (e.g. an overlay inset) get their own component var instead of a scale step. */
+  --aparte-space-1: 2px;
+  --aparte-space-2: 4px;
+  --aparte-space-3: 6px;
+  --aparte-space-4: 8px;
+  --aparte-space-5: 10px;
+  --aparte-space-6: 12px;
+  --aparte-space-7: 14px;
+  --aparte-space-8: 16px;
+
+  /* Font-size scale — component text sizes reference these (no raw px sizes). */
+  --aparte-font-size-2xs: 10px;
+  --aparte-font-size-xs: 11px;
+  --aparte-font-size-sm: 12px;
+  --aparte-font-size-md: 13px;
+  --aparte-font-size-lg: 14px;
+  --aparte-font-size-base: 15px;
+
+  /* Font-weight scale — every font-weight references these (no raw weights). */
+  --aparte-font-weight-normal: 400;
+  --aparte-font-weight-medium: 500;
+  --aparte-font-weight-semibold: 600;
+  --aparte-font-weight-bold: 700;
+
+  /* Line-height scale — every line-height references these (no raw values). */
+  --aparte-line-height-none: 1;
+  --aparte-line-height-tight: 1.25;
+  --aparte-line-height-normal: 1.5;
+  --aparte-line-height-relaxed: 1.6;
+  --aparte-line-height-loose: 1.7;
+
+  /* Typography */
+  --aparte-font-family: system-ui, -apple-system, sans-serif;
+
+  /* Text/icon over a --aparte-primary (brass) fill — send button, run button. */
+  --aparte-on-primary: #ffffff;
+  /* Focus ring — derived from the accent so it themes automatically. */
+  --aparte-focus-ring: 0 0 0 3px color-mix(in srgb, var(--aparte-primary) 15%, transparent);
+  /* Outline width for keyboard focus + drag-over indicators. */
+  --aparte-focus-outline-width: 2px;
+  /* Scrollbars rendered by the library. */
+  --aparte-scrollbar-width: 6px;
+  /* Comfortable hit-area on coarse (touch) pointers. */
+  --aparte-touch-target-size: 44px;
+
+  /* Messages */
+  --aparte-message-gap: 12px;
+  --aparte-message-padding: 16px 12px;
+  --aparte-message-max-width: 800px;
+
+  /* Bubbles — opt-in. By default both roles render as a transparent row with
+     no bubble background; consumers can flip these to get a chat-app look. */
+  --aparte-message-content-bg-user: #efe7f6;
+  --aparte-message-content-bg-assistant: transparent;
+  --aparte-message-content-text-user: var(--aparte-text);
+  --aparte-message-content-text-assistant: var(--aparte-text);
+  --aparte-message-content-padding: 10px 14px;
+  --aparte-message-content-radius: 14px;
+
+  /* Aliases used by some segment renderers (artifact card, tool pill).
+     Mapped to existing tokens so consumers that override --aparte-surface-1/2
+     get cohesive results without touching every rule. */
+  --aparte-surface:         var(--aparte-surface-1);
+  --aparte-surface-hover:   var(--aparte-surface-2);
+  --aparte-text-secondary:  var(--aparte-text-muted);
+  --aparte-accent:          var(--aparte-primary);
+  --aparte-success-border:  var(--aparte-success);
+  --aparte-success-surface: color-mix(in oklch, var(--aparte-success) 12%, transparent);
+  --aparte-error-border-soft: var(--aparte-error);
+  --aparte-error-surface:   color-mix(in oklch, var(--aparte-error) 12%, transparent);
+
+  /* Code typography — exposed so apps can swap in Geist Mono / Cascadia / … */
+  --aparte-code-font-family: ui-monospace, 'Cascadia Code', 'JetBrains Mono', 'Geist Mono', SFMono-Regular, Consolas, 'Liberation Mono', monospace;
+
+  /* Attachments */
+  --aparte-attachment-chip-bg: var(--aparte-surface-2);
+  --aparte-attachment-chip-border: var(--aparte-border);
+  --aparte-attachment-chip-radius: var(--aparte-radius-sm);
+  --aparte-attachment-chip-color: var(--aparte-text);
+  --aparte-attachment-image-size: 72px;
+  --aparte-attachments-max-height: 140px;
+
+  /* Attachment thumbnail tile (composer preview + sent-message strip) */
+  --aparte-thumb-radius: var(--aparte-radius-lg);
+  --aparte-thumb-name-color: #ffffff;
+  --aparte-thumb-name-scrim: linear-gradient(to top, rgba(0, 0, 0, 0.82), rgba(0, 0, 0, 0));
+  --aparte-thumb-name-padding: 14px 5px 4px;
+  --aparte-thumb-remove-size: 18px;
+  --aparte-thumb-remove-inset: 3px;
+  --aparte-thumb-remove-bg: rgba(0, 0, 0, 0.6);
+  --aparte-thumb-remove-bg-hover: rgba(0, 0, 0, 0.85);
+  --aparte-thumb-remove-color: #ffffff;
+
+  /* Action Bar */
+  --aparte-action-bar-gap: 4px;
+  --aparte-action-bar-btn-size: 28px;
+  --aparte-action-bar-btn-color: var(--aparte-text-muted);
+  --aparte-action-bar-btn-hover-bg: var(--aparte-surface-2);
+  --aparte-action-bar-btn-hover-color: var(--aparte-text);
+
+  /* Branch Picker */
+  --aparte-branch-picker-gap: 4px;
+  --aparte-branch-picker-btn-size: 20px;
+  --aparte-branch-picker-btn-icon-size: 16px;
+  --aparte-branch-picker-btn-color: var(--aparte-text-muted);
+  --aparte-branch-picker-btn-hover-color: var(--aparte-text);
+  --aparte-branch-picker-label-size: 12px;
+  --aparte-branch-picker-label-color: var(--aparte-text-muted);
+  --aparte-branch-picker-label-min-width: 32px;
+
+  /* Avatars */
+  --aparte-avatar-size: 32px;
+  --aparte-avatar-font-size: 14px;
+  --aparte-avatar-radius: var(--aparte-radius-avatar);
+  --aparte-avatar-bg-user: var(--aparte-primary);
+  --aparte-avatar-text-user: var(--aparte-text-inverse);
+  --aparte-avatar-bg-assistant: var(--aparte-surface-3);
+  --aparte-avatar-text-assistant: var(--aparte-text-inverse);
+  --aparte-avatar-image-user: none;
+  --aparte-avatar-image-assistant: none;
+  --aparte-avatar-image-size: 90%;
+
+  /* Text Sizes */
+  --aparte-name-font-size: 14px;
+  --aparte-name-color: var(--aparte-text);
+  --aparte-timestamp-font-size: 12px;
+  --aparte-timestamp-color: var(--aparte-text-muted);
+  --aparte-content-font-size: 15px;
+  --aparte-content-color: var(--aparte-text);
+
+  /* Input */
+  --aparte-input-bg: var(--aparte-surface-1);
+  --aparte-input-border: var(--aparte-border);
+  --aparte-input-text: var(--aparte-text);
+  --aparte-input-placeholder: var(--aparte-text-muted);
+  --aparte-input-focus-border: var(--aparte-primary);
+  --aparte-input-gap: 8px;
+  --aparte-input-editor-font-size: 15px;
+  --aparte-input-editor-max-height: 200px;
+  --aparte-input-container-min-height: 44px;
+
+  /* Send button + inline action buttons */
+  --aparte-send-btn-size: 36px;
+  --aparte-input-action-btn-size: 36px;
+  --aparte-input-action-btn-icon-size: 20px;
+  --aparte-select-min-width: 120px;
+
+  /* Status Indicator */
+  --aparte-status-color: var(--aparte-text-muted);
+  --aparte-status-bg: transparent;
+  --aparte-status-dot-size: 6px;
+
+  /* Thinking Segment */
+  --aparte-thinking-border: var(--aparte-border);
+  --aparte-thinking-bg: var(--aparte-surface-2);
+  --aparte-thinking-text: var(--aparte-text-muted);
+  --aparte-thinking-content: var(--aparte-text);
+  --aparte-thinking-content-bg: var(--aparte-surface-1);
+  --aparte-thinking-content-max-height: 300px;
+  --aparte-thinking-content-line-height: 1.55;
+  --aparte-thinking-toggle-size: 9px;
+  --aparte-thinking-rail-width: 2px;
+
+  /* Code Blocks */
+  --aparte-code-bg: var(--aparte-surface-1);
+  --aparte-code-header-bg: var(--aparte-surface-2);
+  --aparte-code-border: var(--aparte-border);
+  --aparte-code-header-text: var(--aparte-text-muted);
+  --aparte-code-copy-hover-bg: rgba(0, 0, 0, 0.05);
+  --aparte-code-copy-icon-size: 14px;
+  --aparte-code-inline-font-size: 0.875em;
+
+  /* Terminal */
+  --aparte-terminal-bg: #1e293b;
+  --aparte-terminal-text: #e2e8f0;
+  --aparte-terminal-icon: #64748b;
+  --aparte-terminal-hover: #334155;
+  --aparte-terminal-running: #22c55e;
+  --aparte-terminal-output-bg: #0f172a;
+  --aparte-terminal-output-text: #94a3b8;
+  --aparte-terminal-copy-btn-size: 26px;
+  --aparte-terminal-font-size: 13px;
+  --aparte-terminal-output-max-height: 200px;
+
+  /* Progress */
+  --aparte-progress-bar-bg: var(--aparte-surface-3);
+  --aparte-progress-bar-fill: var(--aparte-primary);
+  --aparte-progress-label: var(--aparte-text);
+
+  /* Scroll-to-bottom button */
+  --aparte-scroll-btn-size: 36px;
+  --aparte-scroll-btn-bg: var(--aparte-surface-1);
+  --aparte-scroll-btn-color: var(--aparte-text);
+  --aparte-scroll-btn-border: var(--aparte-border);
+  --aparte-scroll-btn-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
+  --aparte-scroll-btn-hover-bg: var(--aparte-surface-2);
+
+  /* File Tree */
+  --aparte-file-tree-bg: var(--aparte-surface-1);
+  --aparte-file-tree-border: var(--aparte-border);
+  --aparte-file-tree-header-bg: var(--aparte-surface-2);
+  --aparte-file-tree-hover: var(--aparte-surface-2);
+  --aparte-file-tree-title: var(--aparte-text-muted);
+  /* Git-status file colours reuse the semantic status tokens by default. */
+  --aparte-file-status-added: var(--aparte-success);
+  --aparte-file-status-modified: var(--aparte-info);
+  --aparte-file-status-deleted: var(--aparte-error);
+
+  /* Error segment */
+  --aparte-error-bg: #fef2f2;
+  --aparte-error-border: #fecaca;
+  --aparte-error-solid: #dc2626;
+  --aparte-error-text: #991b1b;
+  --aparte-error-title: #7f1d1d;
+  --aparte-error-icon-size: 20px;
+  --aparte-error-rail-width: 4px;
+
+  /* Prose (segment-content) */
+  --aparte-prose-p-margin: 0.4em 0;
+  --aparte-prose-h1-size: 1.4em;
+  --aparte-prose-h2-size: 1.25em;
+  --aparte-prose-h3-size: 1.1em;
+  --aparte-prose-list-indent: 1.5em;
+  --aparte-prose-list-margin: 0.4em 0;
+  --aparte-prose-li-margin: 0.15em 0;
+  --aparte-prose-blockquote-border: var(--aparte-border);
+  --aparte-prose-blockquote-border-width: 3px;
+  --aparte-prose-code-bg: var(--aparte-surface-2);
+
+  /* Viewport */
+  --aparte-viewport-padding: 16px;
+
+  /* Content */
+  --aparte-content-line-height: var(--aparte-line-height-loose, 1.7);
+  --aparte-cursor-color: var(--aparte-primary);
+
+  /* Status */
+  --aparte-status-font-size: 13px;
+
+  /* Input (composer) */
+  --aparte-input-font-size: 14px;
+  --aparte-input-line-height: var(--aparte-line-height-normal, 1.5);
+  --aparte-input-padding-x: 12px;
+  --aparte-input-padding-y: 10px;
+
+  /* Conversation List */
+  --aparte-conv-list-gap: 2px;
+  --aparte-conv-item-padding: 7px 10px;
+  --aparte-conv-item-radius: var(--aparte-radius-md);
+  --aparte-conv-item-color: var(--aparte-text-muted);
+  --aparte-conv-item-color-active: var(--aparte-text);
+  --aparte-conv-item-bg-hover: var(--aparte-surface-3);
+  --aparte-conv-item-bg-active: var(--aparte-surface-3);
+  --aparte-conv-item-font-size: 0.8125rem;
+  --aparte-conv-item-font-weight-active: var(--aparte-font-weight-medium, 500);
+  --aparte-conv-delete-color: var(--aparte-text-muted);
+  --aparte-conv-delete-bg-hover: var(--aparte-error);
+  --aparte-conv-delete-color-hover: var(--aparte-text-inverse);
+  --aparte-conv-delete-radius: var(--aparte-radius-sm);
+  --aparte-conv-item-gap: 6px;
+  --aparte-conv-action-btn-size: 20px;
+}
+
+/* =========================================
+   Dark Theme (App-controlled via attribute)
+   Usage: <div data-aparte-theme="dark">...</div>
+   ========================================= */
+[data-aparte-theme="dark"] {
+  /* Backgrounds */
+  --aparte-bg: #17141c;
+  --aparte-surface-1: #211b28;
+  --aparte-surface-2: #2a2333;
+  --aparte-surface-3: #342a40;
+
+  /* Bubbles — user only; assistant is plain prose (AI-chat convention) */
+  --aparte-message-content-bg-user: #2f2740;
+  --aparte-message-content-bg-assistant: transparent;
+
+  /* Text */
+  --aparte-text: #f2eee7;
+  --aparte-text-muted: #a89bb6;
+  --aparte-text-inverse: #17141c;
+  --aparte-name-color: #f2eee7;
+  --aparte-content-color: #ece8e2;
+  --aparte-timestamp-color: #7a7088;
+
+  /* Borders */
+  --aparte-border: #342a40;
+
+  /* Primary */
+  --aparte-primary: #d9a24b;
+  --aparte-primary-hover: #e7c588;
+
+  /* Input */
+  --aparte-input-bg: #211b28;
+  --aparte-input-border: #342a40;
+  --aparte-input-text: #f2eee7;
+  --aparte-input-placeholder: #7a7088;
+
+  /* Status */
+  --aparte-status-color: #94a3b8;
+
+  /* Thinking */
+  --aparte-thinking-border: #334155;
+  --aparte-thinking-bg: #1e293b;
+  --aparte-thinking-text: #94a3b8;
+  --aparte-thinking-content: #e5e7eb;
+  --aparte-thinking-content-bg: #0f172a;
+
+  /* Code */
+  --aparte-code-bg: #1e293b;
+  --aparte-code-header-bg: #334155;
+  --aparte-code-border: #475569;
+  --aparte-code-header-text: #94a3b8;
+
+  /* Progress */
+  --aparte-progress-bar-bg: #334155;
+  --aparte-scroll-btn-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
+  --aparte-progress-label: #e5e7eb;
+
+  /* File Tree */
+  --aparte-file-tree-bg: #1e293b;
+  --aparte-file-tree-border: #334155;
+  --aparte-file-tree-header-bg: #0f172a;
+  --aparte-file-tree-hover: #334155;
+  --aparte-file-tree-title: #94a3b8;
+
+  /* Error segment */
+  --aparte-error-bg: #2d1b1b;
+  --aparte-error-border: #7f1d1d;
+  --aparte-error-solid: #f87171;
+  --aparte-error-text: #fca5a5;
+  --aparte-error-title: #fecaca;
+
+  /* Prose */
+  --aparte-prose-blockquote-border: #475569;
+  --aparte-prose-code-bg: #334155;
+
+  /* Conversation List (dark overrides) */
+  --aparte-conv-item-bg-hover: #334155;
+  --aparte-conv-item-bg-active: #334155;
+  --aparte-conv-delete-color: #64748b;
+}
+
+/* =========================================
+   aparte-chat  (the drop-in shell)
+   Composes a viewport + composer as a flex column. Size the element yourself
+   (a height, or let it fill a sized parent); the viewport grows and scrolls and
+   the composer sits below it. Mirrors the framework auto-center layout for the
+   vanilla viewport, which otherwise has no flex sizing of its own.
+   ========================================= */
+
+/* Both host shapes core recognises get the same layout: the vanilla
+   <aparte-chat> element AND a framework wrapper's `[data-aparte-chat]` root
+   (React/Vue/Svelte/Angular render `<div data-aparte-chat>`). `[data-aparte-chat]`
+   is the SAME selector core uses to resolve the host (see aparte-client /
+   aparte-chat-bubble), so one rule covers both — no wrapper-specific class. */
+aparte-chat,
+[data-aparte-chat] {
+  display: flex;
+  flex-direction: column;
+  /* Fill the parent by default so the height:100% chain the inner scroll container
+     relies on has a definite anchor. Size the element yourself — a height on it, or
+     a sized parent. */
+  height: 100%;
+  width: 100%;
+  overflow: hidden;
+}
+
+/* The viewport takes the space left by the composer; the standalone height:100%
+   default resolves against the shell's definite height above, and the inner
+   .aparte-viewport-container keeps doing the scrolling (styled scrollbar, wheel,
+   auto-scroll, scroll button all stay wired to it). */
+aparte-chat > aparte-chat-viewport,
+[data-aparte-chat] > aparte-chat-viewport {
+  flex: 1 1 auto;
+  min-height: 0;
+}
+
+/* Model-selection gate (opt-in via AparteConfig.setRequireModelSelection): grey the
+   composer and block its send button until a model is selected — e.g. while the
+   model selector is still fetching. Ungates automatically on selection.
+   Unscoped so it greys the composer in EVERY host (vanilla shell + all wrappers),
+   not only a `[data-aparte-chat]` direct child. */
+aparte-composer[data-model-gated] {
+  opacity: 0.55;
+}
+aparte-composer[data-model-gated] aparte-composer-send {
+  pointer-events: none;
+}
+
+aparte-composer {
+  flex: 0 0 auto;
+}
+
+/* center-empty: the shell centers the composer as a welcome state until the first
+   message, then slides to the normal layout. The component toggles [data-empty]
+   on itself by watching its viewport — only `flex-grow` animates, so the composer
+   glides to the bottom instead of snapping. */
+aparte-chat[center-empty] > aparte-chat-viewport {
+  transition: flex-grow 0.3s ease;
+}
+
+aparte-chat[center-empty][data-empty] {
+  justify-content: center;
+}
+
+aparte-chat[center-empty][data-empty] > aparte-chat-viewport {
+  flex-grow: 0;
+  /* Release the standalone `height: 100%` (set on the viewport element for the
+     scroll chain): an explicit height ignores `flex-grow: 0`, so the empty viewport
+     would still fill the shell and leave `justify-content: center` no room to center
+     the composer. Empty = nothing to scroll, so auto height is safe here; the moment
+     a message lands, [data-empty] drops and height: 100% (scroll chain) is back. */
+  height: auto;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  aparte-chat[center-empty] > aparte-chat-viewport {
+    transition-duration: 0.01ms;
+  }
+}
+
+/* =========================================
+   aparte-chat-viewport
+   ========================================= */
+
+aparte-chat-viewport {
+  display: block;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  contain: layout style;
+  /* Container-query root: children adapt to the WIDGET's width, not the
+     viewport's — an embedded chat can be narrow inside a wide page. */
+  container-type: inline-size;
+  text-align: left;
+}
+
+.aparte-viewport-container {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  width: 100%;
+  overflow-y: auto;
+  overflow-x: hidden;
+  overscroll-behavior: contain;
+  scrollbar-width: thin;
+  scrollbar-color: var(--aparte-neutral, #6b7280) transparent;
+}
+
+.aparte-viewport-container::-webkit-scrollbar {
+  width: var(--aparte-scrollbar-width, 6px);
+}
+
+.aparte-viewport-container::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.aparte-viewport-container::-webkit-scrollbar-thumb {
+  background: var(--aparte-neutral, #6b7280);
+  border-radius: var(--aparte-radius-xs);
+}
+
+.aparte-viewport-container::-webkit-scrollbar-thumb:hover {
+  background: var(--aparte-secondary, #9ca3af);
+}
+
+.aparte-messages-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: var(--aparte-message-gap, 0);
+  padding: var(--aparte-viewport-padding, 16px);
+}
+
+/* ─── Scroll-to-bottom button ─────────────────────────────────────────────── */
+
+.aparte-scroll-btn {
+  position: absolute;
+  bottom: var(--aparte-space-8, 16px);
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 10;
+  width: var(--aparte-scroll-btn-size, 36px);
+  height: var(--aparte-scroll-btn-size, 36px);
+  border-radius: 50%;
+  background: var(--aparte-scroll-btn-bg);
+  color: var(--aparte-scroll-btn-color);
+  border: var(--aparte-border-width, 1px) solid var(--aparte-scroll-btn-border);
+  box-shadow: var(--aparte-scroll-btn-shadow);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: opacity 0.2s ease, transform 0.2s ease, background 0.15s ease;
+  pointer-events: auto;
+}
+
+.aparte-scroll-btn:hover {
+  background: var(--aparte-scroll-btn-hover-bg);
+}
+
+.aparte-scroll-btn--hidden {
+  opacity: 0;
+  pointer-events: none;
+  transform: translateX(-50%) translateY(8px);
+}
+
+/* ─── Bottom spacer ───────────────────────────────────────────────────────── */
+
+.aparte-bottom-spacer {
+  flex-shrink: 0;
+  height: 0px;
+}
+
+/* ─── Framework-managed viewport ──────────────────────────────────────────────
+   When a framework wrapper (React/Vue/Svelte/Angular) owns the bubble elements,
+   the viewport does NOT relocate them into an internal wrapper (that would break
+   the framework's DOM reconciliation). Instead the HOST itself is the scroll
+   surface — these rules mirror .aparte-viewport-container + .aparte-messages-wrapper
+   onto the host, and the bottom spacer becomes an additive padding (no element,
+   so it can't collide with the framework's children). */
+aparte-chat-viewport.aparte-viewport--framework,
+aparte-chat-viewport[framework-managed] {
+  overflow-y: auto;
+  overflow-x: hidden;
+  overscroll-behavior: contain;
+  display: flex;
+  flex-direction: column;
+  gap: var(--aparte-message-gap, 0);
+  padding: var(--aparte-viewport-padding, 16px);
+  padding-bottom: calc(var(--aparte-viewport-padding, 16px) + var(--aparte-fw-spacer, 0px));
+  scrollbar-width: thin;
+  scrollbar-color: var(--aparte-neutral, #6b7280) transparent;
+}
+
+/* The framework wrapper renders bubbles as DIRECT flex children of the viewport
+   (no inner wrapper, unlike the vanilla path). With the viewport as a fixed-height
+   flex column, those children would `flex-shrink` to fit — compressing content
+   instead of overflowing, so nothing scrolls. Pin their size so the content grows
+   past the viewport and the scroll surface actually scrolls. */
+aparte-chat-viewport.aparte-viewport--framework > *,
+aparte-chat-viewport[framework-managed] > * {
+  flex-shrink: 0;
+}
+
+aparte-chat-viewport.aparte-viewport--framework::-webkit-scrollbar {
+  width: var(--aparte-scrollbar-width, 6px);
+}
+
+aparte-chat-viewport.aparte-viewport--framework::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+aparte-chat-viewport.aparte-viewport--framework::-webkit-scrollbar-thumb {
+  background: var(--aparte-neutral, #6b7280);
+  border-radius: var(--aparte-radius-xs);
+}
+
+/* The scroll button lives INSIDE the scrolling host here (last child), so it
+   floats with `position: sticky` instead of the `absolute` used in core mode
+   (where it sits outside the scroll container). */
+aparte-chat-viewport.aparte-viewport--framework > .aparte-scroll-btn {
+  position: sticky;
+  bottom: var(--aparte-space-8, 16px);
+  left: auto;
+  align-self: center;
+  transform: none;
+  flex-shrink: 0;
+}
+
+aparte-chat-viewport.aparte-viewport--framework > .aparte-scroll-btn.aparte-scroll-btn--hidden {
+  transform: translateY(8px);
+}
+
+/* =========================================
+   aparte-chat-bubble
+   ========================================= */
+
+aparte-chat-bubble {
+  display: block;
+  width: 100%;
+  overflow: hidden;
+  /* Each bubble is its own layout/paint boundary, and bubbles scrolled out
+     of the viewport are skipped entirely (layout + paint) via
+     content-visibility. While a message streams the user is pinned to the
+     bottom, so every bubble above the live one stops costing a paint on each
+     token — that reclaimed GPU time goes back to the WebGPU decode.
+     contain-intrinsic-size keeps the scrollbar stable: the `auto` keyword
+     reuses a bubble's real height once it has been measured; the 320px is
+     only a fallback for bubbles that have never been rendered yet. */
+  contain: layout style paint;
+  content-visibility: auto;
+  contain-intrinsic-size: auto 320px;
+}
+
+.aparte-message {
+  display: flex;
+  gap: var(--aparte-message-gap, 12px);
+  padding: var(--aparte-message-padding, 16px 12px);
+  width: 100%;
+  max-width: var(--aparte-message-max-width, 800px);
+  margin: 0 auto;
+  min-width: 0;
+}
+
+.aparte-avatar {
+  flex-shrink: 0;
+  width: var(--aparte-avatar-size, 32px);
+  height: var(--aparte-avatar-size, 32px);
+  border-radius: var(--aparte-avatar-radius, 6px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: var(--aparte-avatar-font-size, 14px);
+  font-weight: var(--aparte-font-weight-semibold, 600);
+  font-family: var(--aparte-font-family, system-ui, -apple-system, sans-serif);
+}
+
+/* No message avatar by default — the slot only shows once an AvatarProvider
+   (or a consumer) fills it. Role is carried by layout + colour instead. */
+.aparte-avatar:empty {
+  display: none;
+}
+
+.aparte-avatar[data-role="user"] {
+  background: var(--aparte-avatar-bg-user, #6366f1);
+  color: var(--aparte-avatar-text-user, #ffffff);
+  background-image: var(--aparte-avatar-image-user, none);
+  background-size: var(--aparte-avatar-image-size, 90%);
+  background-repeat: no-repeat;
+  background-position: center;
+}
+
+.aparte-avatar[data-role="assistant"] {
+  background: var(--aparte-avatar-bg-assistant, #10b981);
+  color: var(--aparte-avatar-text-assistant, #ffffff);
+  background-image: var(--aparte-avatar-image-assistant, none);
+  background-size: var(--aparte-avatar-image-size, 90%);
+  background-repeat: no-repeat;
+  background-position: center;
+}
+
+.aparte-body {
+  flex: 1;
+  min-width: 0;
+}
+
+/* The message bubble — the surface fills ONLY the content (attachments +
+   segments + text). The sender name (above) and the action bar (below) are
+   siblings in .aparte-body, so they stay OUTSIDE the coloured surface. */
+.aparte-message-content {
+  border-radius: var(--aparte-message-content-radius, 0);
+  max-width: 100%;
+}
+
+/* AI-chat convention (not messaging): the USER message is a subtle bubble that
+   hugs its text; the ASSISTANT message is plain full-width prose — no bubble,
+   like ChatGPT / Claude. */
+.aparte-message[data-role="user"] .aparte-message-content {
+  width: fit-content;
+  padding: var(--aparte-message-content-padding, 0);
+  background: var(--aparte-message-content-bg-user, transparent);
+  color: var(--aparte-message-content-text-user, var(--aparte-text));
+}
+
+.aparte-message[data-role="assistant"] .aparte-message-content {
+  background: var(--aparte-message-content-bg-assistant, transparent);
+  color: var(--aparte-message-content-text-assistant, var(--aparte-text));
+}
+
+.aparte-header {
+  display: flex;
+  align-items: center;
+  gap: var(--aparte-space-4, 8px);
+  margin-bottom: var(--aparte-space-3, 6px);
+}
+
+.aparte-name {
+  font-size: var(--aparte-name-font-size, 14px);
+  font-weight: var(--aparte-font-weight-semibold, 600);
+  color: var(--aparte-name-color, #1f2937);
+  font-family: var(--aparte-font-family, system-ui, -apple-system, sans-serif);
+}
+
+.aparte-timestamp {
+  font-size: var(--aparte-timestamp-font-size, 12px);
+  color: var(--aparte-timestamp-color, #9ca3af);
+  font-family: var(--aparte-font-family, system-ui, -apple-system, sans-serif);
+}
+
+.aparte-content {
+  font-size: var(--aparte-content-font-size, 15px);
+  line-height: var(--aparte-content-line-height, 1.7);
+  color: var(--aparte-content-color, #374151);
+  font-family: var(--aparte-font-family, system-ui, -apple-system, sans-serif);
+  white-space: normal;
+  word-wrap: break-word;
+}
+
+.aparte-segments {
+  font-size: var(--aparte-content-font-size, 15px);
+  line-height: var(--aparte-content-line-height, 1.7);
+  color: var(--aparte-content-color, #374151);
+  font-family: var(--aparte-font-family, system-ui, -apple-system, sans-serif);
+}
+
+.aparte-segments:empty {
+  display: none;
+}
+
+/* =========================================
+   Attachments
+   ========================================= */
+
+.aparte-attachments {
+  display: flex;
+  flex-wrap: wrap;
+  /* Bubble attachments only ever render for user messages — anchor right. */
+  justify-content: flex-end;
+  gap: var(--aparte-space-3, 6px);
+  margin-bottom: var(--aparte-space-4, 8px);
+  /* Really small tiles inside the conversation. */
+  --aparte-attachment-image-size: 40px;
+  /* Many attachments → cap the height and scroll instead of growing forever. */
+  max-height: var(--aparte-attachments-max-height, 140px);
+  overflow-y: auto;
+}
+
+/* The class `display: flex` above would otherwise override the `hidden`
+   attribute — restore it so an empty attachment strip takes no space. */
+.aparte-attachments[hidden] {
+  display: none;
+}
+
+/* ── Attachment thumbnail tile ──────────────────────────────────────────────
+   Shared by the composer attachment preview and the sent-message attachment
+   strip. A square that shows the image itself (or a file glyph); the filename
+   and — in the composer — a remove button surface on hover. */
+.aparte-thumb {
+  position: relative;
+  width: var(--aparte-attachment-image-size, 56px);
+  height: var(--aparte-attachment-image-size, 56px);
+  flex-shrink: 0;
+  border-radius: var(--aparte-thumb-radius, 8px);
+  overflow: hidden;
+  box-sizing: border-box;
+  background: var(--aparte-attachment-chip-bg, var(--aparte-surface-2));
+  border: var(--aparte-border-width, 1px) solid var(--aparte-attachment-chip-border, var(--aparte-border));
+}
+
+.aparte-thumb--image {
+  cursor: pointer;
+}
+
+.aparte-thumb__img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+
+.aparte-thumb--file {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.aparte-thumb__ext {
+  font-size: var(--aparte-font-size-xs, 11px);
+  font-weight: var(--aparte-font-weight-bold, 700);
+  letter-spacing: 0.03em;
+  color: var(--aparte-text-muted, var(--aparte-text));
+}
+
+.aparte-thumb__name {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  padding: var(--aparte-thumb-name-padding, 14px 5px 4px);
+  font-size: var(--aparte-font-size-2xs, 10px);
+  line-height: var(--aparte-line-height-tight, 1.25);
+  color: var(--aparte-thumb-name-color, #fff);
+  background: var(--aparte-thumb-name-scrim, linear-gradient(to top, rgba(0, 0, 0, 0.82), rgba(0, 0, 0, 0)));
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  opacity: 0;
+  transition: opacity 0.15s ease;
+  pointer-events: none;
+}
+.aparte-thumb:hover .aparte-thumb__name {
+  opacity: 1;
+}
+
+.aparte-thumb__remove {
+  position: absolute;
+  top: var(--aparte-thumb-remove-inset, 3px);
+  right: var(--aparte-thumb-remove-inset, 3px);
+  width: var(--aparte-thumb-remove-size, 18px);
+  height: var(--aparte-thumb-remove-size, 18px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  border: none;
+  border-radius: 50%;
+  background: var(--aparte-thumb-remove-bg, rgba(0, 0, 0, 0.6));
+  color: var(--aparte-thumb-remove-color, #fff);
+  cursor: pointer;
+  opacity: 0;
+  transition: opacity 0.15s ease, background 0.15s ease;
+}
+.aparte-thumb:hover .aparte-thumb__remove {
+  opacity: 1;
+}
+.aparte-thumb__remove:hover {
+  background: var(--aparte-thumb-remove-bg-hover, rgba(0, 0, 0, 0.85));
+}
+
+/* =========================================
+   Action Bar
+   ========================================= */
+
+.aparte-footer {
+  display: flex;
+  align-items: center;
+  gap: var(--aparte-action-bar-gap, 4px);
+  margin-top: var(--aparte-space-3, 6px);
+  min-height: var(--aparte-action-bar-btn-size, 28px);
+}
+
+.aparte-action-bar {
+  display: flex;
+  align-items: center;
+  gap: var(--aparte-action-bar-gap, 4px);
+  opacity: 0;
+  transition: opacity 0.15s ease;
+  height: var(--aparte-action-bar-btn-size, 28px);
+}
+
+.aparte-message:hover .aparte-action-bar,
+.aparte-message:focus-within .aparte-action-bar {
+  opacity: 1;
+}
+
+/* Last assistant message: action bar always visible — but NOT while streaming */
+aparte-chat-bubble:last-of-type .aparte-message[data-role="assistant"]:not(.aparte-message-streaming) .aparte-action-bar {
+  opacity: 1;
+}
+
+/* Hide footer (action bar + branch picker) entirely while streaming */
+.aparte-message-streaming .aparte-footer {
+  display: none;
+}
+
+.aparte-action-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--aparte-action-bar-btn-size, 28px);
+  height: var(--aparte-action-bar-btn-size, 28px);
+  border: none;
+  border-radius: var(--aparte-radius-sm, 4px);
+  background: transparent;
+  color: var(--aparte-action-bar-btn-color, var(--aparte-text-muted));
+  cursor: pointer;
+  padding: 0;
+  transition: background 0.15s ease, color 0.15s ease;
+  flex-shrink: 0;
+}
+
+.aparte-action-btn:hover {
+  background: var(--aparte-action-bar-btn-hover-bg, var(--aparte-surface-2));
+  color: var(--aparte-action-bar-btn-hover-color, var(--aparte-text));
+}
+
+.aparte-action-btn[data-copied] {
+  color: var(--aparte-success, #10b981);
+}
+
+.aparte-action-btn[data-submitted] {
+  color: var(--aparte-primary, #6366f1);
+}
+
+/* =========================================
+   Branch Picker
+   ========================================= */
+
+.aparte-branch-picker {
+  display: flex;
+  align-items: center;
+  gap: var(--aparte-branch-picker-gap, 4px);
+}
+
+/* [hidden] is overridden by display:flex — force it back */
+.aparte-branch-picker[hidden] {
+  display: none;
+}
+
+.aparte-branch-prev,
+.aparte-branch-next {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--aparte-branch-picker-btn-size, 20px);
+  height: var(--aparte-branch-picker-btn-size, 20px);
+  border: none;
+  border-radius: var(--aparte-radius-sm, 4px);
+  background: transparent;
+  color: var(--aparte-branch-picker-btn-color, var(--aparte-text-muted));
+  cursor: pointer;
+  padding: 0;
+  font-size: var(--aparte-branch-picker-btn-icon-size, 16px);
+  line-height: var(--aparte-line-height-none, 1);
+  transition: color 0.15s ease, background 0.15s ease;
+}
+
+.aparte-branch-prev:hover:not(:disabled),
+.aparte-branch-next:hover:not(:disabled) {
+  color: var(--aparte-branch-picker-btn-hover-color, var(--aparte-text));
+  background: var(--aparte-action-bar-btn-hover-bg, var(--aparte-surface-2));
+}
+
+.aparte-branch-prev:disabled,
+.aparte-branch-next:disabled {
+  opacity: 0.3;
+  cursor: default;
+}
+
+.aparte-branch-label {
+  font-size: var(--aparte-branch-picker-label-size, 12px);
+  color: var(--aparte-branch-picker-label-color, var(--aparte-text-muted));
+  font-family: var(--aparte-font-family, system-ui, -apple-system, sans-serif);
+  min-width: var(--aparte-branch-picker-label-min-width, 32px);
+  text-align: center;
+}
+
+/* =========================================
+   Edit mode
+   ========================================= */
+
+/* Inline editor: the composer's contenteditable primitive, given the composer
+   shell's box (bordered surface) so it reads as the same field. The inner
+   .aparte-ci-editor inherits its padding/font/caret from the shared composer rule. */
+.aparte-message[data-editing] aparte-composer-input {
+  display: block;
+  margin: var(--aparte-space-2, 4px) 0;
+  background: var(--aparte-input-bg, var(--aparte-surface-1));
+  border: var(--aparte-border-width, 1px) solid var(--aparte-input-border, var(--aparte-border));
+  border-radius: var(--aparte-radius-input, 12px);
+  box-sizing: border-box;
+  transition: border-color 0.2s;
+}
+.aparte-message[data-editing] aparte-composer-input:focus-within {
+  border-color: var(--aparte-input-focus-border, var(--aparte-primary));
+}
+
+/* Edit mode keeps the action bar (now ✓ / ✗) visible even when the editor
+   is not focused — otherwise the user can't reach the save button. */
+.aparte-message[data-editing] .aparte-action-bar {
+  opacity: 1;
+}
+
+.aparte-action-btn.aparte-action-edit-save {
+  color: var(--aparte-success, #16a34a);
+}
+.aparte-action-btn.aparte-action-edit-save:hover {
+  background: var(--aparte-success-surface, rgba(34, 197, 94, 0.14));
+  color: var(--aparte-success, #16a34a);
+}
+.aparte-action-btn.aparte-action-edit-cancel {
+  color: var(--aparte-error, #dc2626);
+}
+.aparte-action-btn.aparte-action-edit-cancel:hover {
+  background: var(--aparte-error-surface, rgba(239, 68, 68, 0.14));
+  color: var(--aparte-error, #dc2626);
+}
+
+
+/* =========================================
+   Legacy composer input utility classes
+   ========================================= */
+
+.aparte-input-wrapper {
+  display: flex;
+  align-items: flex-end;
+  gap: var(--aparte-input-gap, 8px);
+  padding: var(--aparte-space-4, 8px) var(--aparte-space-6, 12px);
+  background: transparent;
+}
+
+/* Action slots */
+.aparte-actions-left,
+.aparte-actions-right {
+  display: flex;
+  align-items: center;
+  gap: var(--aparte-space-2, 4px);
+  flex-shrink: 0;
+}
+
+.aparte-input-container {
+  flex: 1;
+  min-height: var(--aparte-input-container-min-height, 44px);
+  /* Matches _minHeight default */
+  display: flex;
+  flex-direction: column;
+  /* justify-content: center; Removed to fix cursor pos */
+
+}
+
+.aparte-editor {
+  width: 100%;
+  max-height: var(--aparte-input-editor-max-height, 200px);
+  /* Matches _maxHeight default */
+  overflow-y: auto;
+  outline: none;
+  border: none;
+  font-family: var(--aparte-font-family, system-ui, -apple-system, sans-serif);
+  font-size: var(--aparte-input-editor-font-size, 15px);
+  line-height: var(--aparte-line-height-normal, 1.5);
+  color: var(--aparte-input-text, #374151);
+  background: transparent;
+  padding: var(--aparte-space-5, 10px) 0;
+  resize: none;
+  text-align: left;
+}
+
+/* Placeholder */
+.aparte-editor:empty:before {
+  content: attr(data-placeholder);
+  color: var(--aparte-input-placeholder, #9ca3af);
+  pointer-events: none;
+  display: block;
+  /* Ensures proper rendering */
+}
+
+/* Disabled state */
+.aparte-editor[contenteditable="false"] {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.aparte-send-button {
+  flex-shrink: 0;
+  width: var(--aparte-send-btn-size, 36px);
+  height: var(--aparte-send-btn-size, 36px);
+  border-radius: var(--aparte-radius-send-btn);
+  border: none;
+  background: var(--aparte-primary, #6366f1);
+  color: var(--aparte-on-primary, white);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: background 0.2s, opacity 0.2s;
+  padding: 0;
+}
+
+.aparte-send-button:hover:not(:disabled) {
+  background: var(--aparte-primary-hover, #4f46e5);
+}
+
+.aparte-send-button:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+  background: var(--aparte-send-disabled-bg, var(--aparte-primary));
+}
+
+/* Action Buttons in Input */
+.aparte-action-button {
+  background: transparent;
+  border: none;
+  color: var(--aparte-neutral, #6b7280);
+  padding: var(--aparte-space-4, 8px);
+  border-radius: var(--aparte-radius-action-btn);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: color 0.15s, background-color 0.15s;
+  width: var(--aparte-input-action-btn-size, 36px);
+  height: var(--aparte-input-action-btn-size, 36px);
+}
+
+.aparte-action-button:hover {
+  color: var(--aparte-primary, #6366f1);
+  /* Derive the hover tint from --aparte-primary instead of hardcoding indigo, so a
+     custom theme's action buttons tint with its own accent. */
+  background-color: color-mix(in srgb, var(--aparte-primary, #6366f1) 10%, transparent);
+}
+
+.aparte-action-button svg {
+  width: var(--aparte-input-action-btn-icon-size, 20px);
+  height: var(--aparte-input-action-btn-icon-size, 20px);
+}
+
+/* =========================================
+   Input Upper (for file chips, previews, etc.)
+   ========================================= */
+
+.aparte-input-upper {
+  display: none; /* shown by JS when chips are added */
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--aparte-space-4, 8px);
+  padding: var(--aparte-space-4, 8px) var(--aparte-space-6, 12px);
+  border-bottom: var(--aparte-border-width, 1px) solid var(--aparte-border, #e5e7eb);
+  font-size: var(--aparte-font-size-md, 13px);
+}
+
+.aparte-input-upper.has-content {
+  display: flex;
+}
+
+/* =========================================
+   Input Footer (for Model Selector, etc.)
+   ========================================= */
+
+.aparte-input-footer {
+  display: flex;
+  align-items: center;
+  gap: var(--aparte-space-6, 12px);
+  padding: var(--aparte-space-4, 8px) var(--aparte-space-6, 12px);
+  border-top: var(--aparte-border-width, 1px) solid var(--aparte-border, #e5e7eb);
+  font-size: var(--aparte-font-size-md, 13px);
+}
+
+.aparte-input-footer:empty {
+  display: none;
+}
+
+/* Slot areas */
+.aparte-input-footer slot[name="footer-left"] {
+  display: contents;
+}
+
+.aparte-input-footer slot[name="footer-center"] {
+  flex: 1;
+  display: contents;
+}
+
+.aparte-input-footer slot[name="footer-right"] {
+  display: contents;
+  margin-inline-start: auto;
+}
+
+/* Model Selector Component */
+aparte-model-selector {
+  display: flex;
+  align-items: center;
+  gap: var(--aparte-space-4, 8px);
+}
+/* Respect native hidden attribute — overrides the display:flex above */
+aparte-model-selector[hidden] { display: none !important; }
+
+.aparte-model-selector {
+  display: flex;
+  align-items: center;
+  gap: var(--aparte-space-4, 8px);
+}
+
+.aparte-provider-select,
+.aparte-model-select {
+  appearance: none;
+  background: var(--aparte-surface-1, #ffffff);
+  border: var(--aparte-border-width, 1px) solid var(--aparte-border, #e5e7eb);
+  border-radius: var(--aparte-radius-select);
+  padding: var(--aparte-space-3, 6px) 28px var(--aparte-space-3, 6px) var(--aparte-space-5, 10px);
+  font-size: var(--aparte-font-size-md, 13px);
+  font-family: var(--aparte-font-family, system-ui);
+  color: var(--aparte-text, #1f2937);
+  cursor: pointer;
+  min-width: var(--aparte-select-min-width, 120px);
+  /* Chevron: baked into a data-URI SVG (CSS vars can't interpolate into url()).
+     The stroke colour is theme-matched via the [data-aparte-theme] override
+     below rather than a single var — the one spot that needs two variants. */
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right var(--aparte-space-4, 8px) center;
+  transition: border-color 0.15s, box-shadow 0.15s;
+}
+
+.aparte-provider-select:hover,
+.aparte-model-select:hover {
+  border-color: var(--aparte-primary, #6366f1);
+}
+
+.aparte-provider-select:focus,
+.aparte-model-select:focus {
+  outline: none;
+  border-color: var(--aparte-primary, #6366f1);
+  box-shadow: var(--aparte-focus-ring, 0 0 0 3px rgba(99, 102, 241, 0.15));
+}
+
+/* Dark mode overrides for selects */
+[data-aparte-theme="dark"] .aparte-provider-select,
+[data-aparte-theme="dark"] .aparte-model-select {
+  background-color: var(--aparte-surface-1, #1e293b);
+  border-color: var(--aparte-border, #334155);
+  color: var(--aparte-text, #f1f5f9);
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
+}
+
+
+/* =========================================
+   aparte-chat-status
+   ========================================= */
+
+aparte-chat-status {
+  display: block;
+  width: 100%;
+  contain: layout style paint;
+}
+
+/* No layout footprint until the typing indicator is actually shown — otherwise the
+   always-present element reserves height (visible via flex-shrink:0 in the
+   framework-managed viewport) even on the empty/welcome screen. */
+aparte-chat-status:not([visible]) {
+  display: none;
+}
+
+.aparte-status-container {
+  display: flex;
+  align-items: center;
+  opacity: 0;
+  transform: translateY(8px);
+  transition: opacity 0.2s ease, transform 0.2s ease;
+  pointer-events: none;
+}
+
+.aparte-status-content {
+  display: flex;
+  align-items: center;
+  gap: var(--aparte-space-4, 8px);
+}
+
+.aparte-status-container[data-visible="true"] {
+  opacity: 1;
+  transform: translateY(0);
+  pointer-events: auto;
+}
+
+.aparte-status-text {
+  font-size: var(--aparte-status-font-size, 13px);
+  font-family: var(--aparte-font-family, system-ui, -apple-system, sans-serif);
+  color: var(--aparte-status-color, #6b7280);
+  font-style: italic;
+}
+
+.aparte-dots {
+  display: flex;
+  align-items: center;
+}
+
+.aparte-dot {
+  width: var(--aparte-status-dot-size, 6px);
+  height: var(--aparte-status-dot-size, 6px);
+  background: var(--aparte-status-color, #6b7280);
+  border-radius: 50%;
+  animation: aparte-pulse 1.2s infinite ease-in-out;
+}
+
+/* Respect prefers-reduced-motion. Scoped to Aparte's own custom elements (never
+   the consumer's page) — this covers every animated element the library renders
+   inside them: typing dots, spinners, pipeline/artifact pulses, segment
+   animations. Activity stays conveyed via aria-live / aria-busy. */
+@media (prefers-reduced-motion: reduce) {
+  aparte-chat-viewport *,
+  aparte-chat-bubble *,
+  aparte-composer *,
+  aparte-chat-status *,
+  aparte-conversation-list *,
+  aparte-select *,
+  aparte-progress-spinner * {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}
+
+@keyframes aparte-pulse {
+  0%, 100% {
+    opacity: 0.3;
+    transform: scale(0.75);
+  }
+  50% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+/* =========================================
+   Segment Renderers (Global Defaults)
+   ========================================= */
+
+/* Text */
+.segment-text {
+  word-wrap: break-word;
+}
+
+/* =========================================
+   Prose — reset-agnostic typography
+   Compact defaults for chat context.
+   Customizable via --aparte-prose-* variables.
+   ========================================= */
+
+.aparte-content,
+.segment-content {
+  white-space: normal;
+}
+
+.aparte-content p,
+.segment-content p {
+  margin: var(--aparte-prose-p-margin, 0.4em 0);
+}
+
+.aparte-content p:first-child,
+.segment-content p:first-child {
+  margin-top: 0;
+}
+
+.aparte-content p:last-child,
+.segment-content p:last-child {
+  margin-bottom: 0;
+}
+
+.aparte-content h1, .segment-content h1 { font-size: var(--aparte-prose-h1-size, 1.4em); font-weight: var(--aparte-font-weight-semibold, 600); margin: 0.6em 0 0.2em; }
+.aparte-content h2, .segment-content h2 { font-size: var(--aparte-prose-h2-size, 1.25em); font-weight: var(--aparte-font-weight-semibold, 600); margin: 0.5em 0 0.2em; }
+.aparte-content h3, .segment-content h3 { font-size: var(--aparte-prose-h3-size, 1.1em); font-weight: var(--aparte-font-weight-semibold, 600); margin: 0.4em 0 0.15em; }
+.aparte-content h4, .segment-content h4,
+.aparte-content h5, .segment-content h5,
+.aparte-content h6, .segment-content h6 { font-size: 1em; font-weight: var(--aparte-font-weight-semibold, 600); margin: 0.3em 0 0.1em; }
+
+.aparte-content ul,
+.segment-content ul {
+  list-style: disc;
+  padding-left: var(--aparte-prose-list-indent, 1.5em);
+  margin: var(--aparte-prose-list-margin, 0.4em 0);
+}
+
+.aparte-content ol,
+.segment-content ol {
+  list-style: decimal;
+  padding-left: var(--aparte-prose-list-indent, 1.5em);
+  margin: var(--aparte-prose-list-margin, 0.4em 0);
+}
+
+.aparte-content li,
+.segment-content li {
+  margin: var(--aparte-prose-li-margin, 0.15em 0);
+}
+
+.aparte-content blockquote,
+.segment-content blockquote {
+  border-left: var(--aparte-prose-blockquote-border-width, 3px) solid var(--aparte-prose-blockquote-border, var(--aparte-border, #e5e7eb));
+  padding-left: 1em;
+  margin: 0.4em 0;
+  color: var(--aparte-text-muted, #6b7280);
+  font-style: italic;
+}
+
+.aparte-content strong,
+.segment-content strong {
+  font-weight: var(--aparte-font-weight-semibold, 600);
+}
+
+.aparte-content em,
+.segment-content em {
+  font-style: italic;
+}
+
+.aparte-content code,
+.segment-content code {
+  font-family: var(--aparte-code-font-family, ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, monospace);
+  font-size: var(--aparte-code-inline-font-size, 0.875em);
+  background: var(--aparte-prose-code-bg, var(--aparte-code-bg, #f3f4f6));
+  padding: 0.1em 0.3em;
+  border-radius: var(--aparte-radius-xs);
+}
+
+.aparte-content a,
+.segment-content a {
+  color: var(--aparte-primary, #6366f1);
+  text-decoration: underline;
+}
+
+.aparte-content hr,
+.segment-content hr {
+  border: none;
+  border-top: var(--aparte-border-width, 1px) solid var(--aparte-border, #e5e7eb);
+  margin: 0.75em 0;
+}
+
+/* Thinking */
+.segment-thinking {
+  /* Understated disclosure: a muted left rail, not a filled card. */
+  border-left: var(--aparte-thinking-rail-width, 2px) solid var(--aparte-thinking-border, #e5e7eb);
+  margin: var(--aparte-space-5, 10px) 0;
+  background: transparent;
+}
+
+.thinking-header {
+  display: flex;
+  align-items: center;
+  gap: var(--aparte-space-3, 6px);
+  padding: var(--aparte-space-1, 2px) 0 var(--aparte-space-1, 2px) var(--aparte-space-5, 10px);
+  cursor: pointer;
+  user-select: none;
+  font-size: var(--aparte-font-size-sm, 12px);
+  color: var(--aparte-thinking-text, #6b7280);
+  list-style: none;
+}
+
+.thinking-header::-webkit-details-marker {
+  display: none;
+}
+
+.thinking-toggle {
+  margin-inline-start: auto;
+  /* Logical property */
+  transition: transform 0.2s;
+  opacity: 0.55;
+}
+
+details[open] .thinking-toggle {
+  transform: rotate(180deg);
+}
+
+.thinking-toggle::after {
+  content: '▼';
+  font-size: var(--aparte-thinking-toggle-size, 9px);
+}
+
+.thinking-content {
+  padding: var(--aparte-space-2, 4px) 0 var(--aparte-space-1, 2px) var(--aparte-space-5, 10px);
+  font-size: var(--aparte-font-size-md, 13px);
+  line-height: var(--aparte-thinking-content-line-height, 1.55);
+  white-space: pre-wrap;
+  color: var(--aparte-thinking-content, #4b5563);
+  background: transparent;
+  max-height: var(--aparte-thinking-content-max-height, 300px);
+  overflow-y: auto;
+}
+
+/* Code */
+.segment-code {
+  margin: var(--aparte-space-6, 12px) 0;
+  border-radius: var(--aparte-radius-code);
+  overflow: hidden;
+  border: var(--aparte-border-width, 1px) solid var(--aparte-code-border, #e5e7eb);
+}
+
+.code-header {
+  display: flex;
+  align-items: center;
+  padding: var(--aparte-space-4, 8px) var(--aparte-space-6, 12px);
+  background: var(--aparte-code-header-bg, #f3f4f6);
+  border-bottom: var(--aparte-border-width, 1px) solid var(--aparte-code-border, #e5e7eb);
+  font-size: var(--aparte-font-size-sm, 12px);
+  color: var(--aparte-code-header-text, #4b5563);
+}
+
+.code-filename {
+  font-weight: var(--aparte-font-weight-semibold, 600);
+  margin-inline-end: auto;
+  /* Logical property: pushes language + copy to the right when filename is present */
+}
+
+.code-header-filler {
+  flex: 1;
+  /* No-filename placeholder — keeps language + copy right-aligned */
+}
+
+.code-language {
+  margin-inline-end: var(--aparte-space-4, 8px);
+  /* Logical property */
+  text-transform: uppercase;
+  opacity: 0.7;
+}
+
+.code-copy {
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  padding: var(--aparte-space-2, 4px);
+  border-radius: var(--aparte-radius-sm);
+  color: inherit;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.code-copy:hover {
+  background: var(--aparte-code-copy-hover-bg, rgba(0, 0, 0, 0.05));
+}
+
+.code-copy svg {
+  width: var(--aparte-code-copy-icon-size, 14px);
+  height: var(--aparte-code-copy-icon-size, 14px);
+}
+
+.code-content-wrapper pre {
+  margin: 0;
+  padding: var(--aparte-space-6, 12px);
+  /* Wrap long lines instead of a horizontal scrollbar. `pre-wrap` honours
+     newlines + indentation but soft-wraps overflowing lines; `overflow-wrap:
+     anywhere` breaks unbreakable tokens (long URLs, hashes). Applies to both
+     the plain <pre><code> initial render and the shiki <pre class="shiki">
+     replacement, since both sit inside .code-content-wrapper. */
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+  overflow-x: hidden;
+  background: var(--aparte-code-bg, #ffffff);
+}
+
+/* Terminal */
+.segment-terminal {
+  margin: var(--aparte-space-6, 12px) 0;
+  font-family: var(--aparte-code-font-family, 'Fira Code', 'Monaco', 'Consolas', monospace);
+  font-size: var(--aparte-terminal-font-size, 13px);
+}
+
+.terminal-command-block {
+  display: flex;
+  align-items: center;
+  gap: var(--aparte-space-5, 10px);
+  padding: var(--aparte-space-5, 10px) var(--aparte-space-7, 14px);
+  background: var(--aparte-terminal-bg, #1e293b);
+  border-radius: var(--aparte-radius-terminal);
+  color: var(--aparte-terminal-text, #e2e8f0);
+}
+
+.terminal-icon {
+  flex-shrink: 0;
+  color: var(--aparte-terminal-icon, #64748b);
+  display: flex;
+  align-items: center;
+}
+
+.terminal-command {
+  flex: 1;
+  word-break: break-all;
+  background: transparent;
+  color: inherit;
+  font-family: inherit;
+}
+
+.terminal-actions {
+  display: flex;
+  align-items: center;
+  gap: var(--aparte-space-3, 6px);
+  flex-shrink: 0;
+}
+
+.terminal-run-btn {
+  padding: var(--aparte-space-2, 4px) var(--aparte-space-6, 12px);
+  background: var(--aparte-primary, #6366f1);
+  color: var(--aparte-on-primary, white);
+  border: none;
+  border-radius: var(--aparte-radius-sm);
+  font-size: var(--aparte-font-size-sm, 12px);
+  font-weight: var(--aparte-font-weight-medium, 500);
+  cursor: pointer;
+  transition: background 0.15s;
+}
+
+.terminal-run-btn:hover {
+  background: var(--aparte-primary-hover, #4f46e5);
+}
+
+.terminal-copy-btn {
+  width: var(--aparte-terminal-copy-btn-size, 26px);
+  height: var(--aparte-terminal-copy-btn-size, 26px);
+  padding: 0;
+  background: transparent;
+  border: none;
+  color: var(--aparte-terminal-icon, #64748b);
+  cursor: pointer;
+  border-radius: var(--aparte-radius-sm);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.terminal-copy-btn:hover {
+  background: var(--aparte-terminal-hover, #334155);
+  color: var(--aparte-terminal-text, #e2e8f0);
+}
+
+.terminal-running {
+  display: flex;
+  align-items: center;
+  gap: var(--aparte-space-3, 6px);
+  color: var(--aparte-terminal-running, #22c55e);
+  font-size: var(--aparte-font-size-sm, 12px);
+}
+
+.terminal-running .spinner {
+  width: var(--aparte-space-6, 12px);
+  height: var(--aparte-space-6, 12px);
+  border: 2px solid currentColor;
+  border-top-color: transparent;
+  border-radius: 50%;
+  animation: aparte-spin 0.8s linear infinite;
+}
+
+@keyframes aparte-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.terminal-output {
+  margin-top: var(--aparte-space-4, 8px);
+  padding: var(--aparte-space-5, 10px) var(--aparte-space-7, 14px);
+  background: var(--aparte-terminal-output-bg, #0f172a);
+  border-radius: var(--aparte-radius-md);
+  color: var(--aparte-terminal-output-text, #94a3b8);
+  white-space: pre-wrap;
+  line-height: var(--aparte-line-height-normal, 1.5);
+  max-height: var(--aparte-terminal-output-max-height, 200px);
+  overflow-y: auto;
+}
+
+.terminal-error {
+  margin-top: var(--aparte-space-3, 6px);
+  padding: var(--aparte-space-3, 6px) var(--aparte-space-5, 10px);
+  background: var(--aparte-error-bg, #fef2f2);
+  border-radius: var(--aparte-radius-sm);
+  color: var(--aparte-error-text, #dc2626);
+  font-size: var(--aparte-font-size-sm, 12px);
+}
+
+/* Errored bubble state — the whole message carries `data-error` while it holds
+   an error segment (set by the bubble in _reflectError). Kept subtle by default
+   since the error segment itself is already styled; this is a theming hook —
+   restyle `.aparte-message[data-error]` (or its parts) freely. */
+.aparte-message[data-error] .aparte-avatar {
+  box-shadow: 0 0 0 2px var(--aparte-error-solid, #dc2626);
+}
+
+/* Error */
+.segment-error {
+  display: flex;
+  gap: var(--aparte-space-6, 12px);
+  padding: var(--aparte-space-6, 12px) var(--aparte-space-8, 16px);
+  background: var(--aparte-error-bg, #fef2f2);
+  border: var(--aparte-border-width, 1px) solid var(--aparte-error-border, #fecaca);
+  border-left: var(--aparte-error-rail-width, 4px) solid var(--aparte-error-solid, #dc2626);
+  border-radius: var(--aparte-radius-error);
+  margin: var(--aparte-space-6, 12px) 0;
+  color: var(--aparte-error-text, #991b1b);
+  font-family: var(--aparte-font-family, system-ui, sans-serif);
+}
+
+.error-icon-wrapper {
+  flex-shrink: 0;
+  color: var(--aparte-error-solid, #dc2626);
+  display: flex;
+  align-items: flex-start;
+  padding-top: var(--aparte-space-1, 2px);
+}
+
+.error-icon-wrapper svg {
+  width: var(--aparte-error-icon-size, 20px);
+  height: var(--aparte-error-icon-size, 20px);
+}
+
+.error-content {
+  flex: 1;
+  min-width: 0;
+}
+
+.error-title {
+  font-weight: var(--aparte-font-weight-semibold, 600);
+  font-size: var(--aparte-font-size-lg, 14px);
+  margin-bottom: var(--aparte-space-2, 4px);
+  color: var(--aparte-error-title, #7f1d1d);
+}
+
+.error-message {
+  font-size: var(--aparte-font-size-lg, 14px);
+  line-height: var(--aparte-line-height-normal, 1.5);
+}
+
+.error-details {
+  margin-top: var(--aparte-space-4, 8px);
+  padding-top: var(--aparte-space-4, 8px);
+  border-top: var(--aparte-border-width, 1px) solid var(--aparte-error-border, #fecaca);
+  font-family: var(--aparte-code-font-family, monospace);
+  font-size: var(--aparte-font-size-sm, 12px);
+  opacity: 0.9;
+  white-space: pre-wrap;
+}
+
+/* Progress */
+.segment-progress {
+  margin: var(--aparte-space-6, 12px) 0;
+}
+
+.progress-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: var(--aparte-space-2, 4px);
+  color: var(--aparte-progress-label, #374151);
+  font-size: var(--aparte-font-size-lg, 14px);
+}
+
+.progress-bar {
+  height: var(--aparte-space-2, 4px);
+  background: var(--aparte-progress-bar-bg, #e5e7eb);
+  border-radius: var(--aparte-radius-xs);
+  margin-top: var(--aparte-space-4, 8px);
+  overflow: hidden;
+}
+
+.progress-fill {
+  height: 100%;
+  background: var(--aparte-progress-bar-fill, #6366f1);
+  border-radius: var(--aparte-radius-xs);
+  transition: width 0.3s ease;
+}
+
+/* File Tree */
+.segment-file-tree {
+  background: var(--aparte-file-tree-bg, #f8fafc);
+  border: var(--aparte-border-width, 1px) solid var(--aparte-file-tree-border, #e2e8f0);
+  border-radius: var(--aparte-radius-file-tree);
+  margin: var(--aparte-space-6, 12px) 0;
+  overflow: hidden;
+  font-family: var(--aparte-font-family, system-ui, -apple-system, sans-serif);
+  font-size: var(--aparte-font-size-md, 13px);
+}
+
+.file-tree-title {
+  padding: var(--aparte-space-5, 10px) var(--aparte-space-7, 14px);
+  background: var(--aparte-file-tree-header-bg, #f1f5f9);
+  border-bottom: var(--aparte-border-width, 1px) solid var(--aparte-file-tree-border, #e2e8f0);
+  font-weight: var(--aparte-font-weight-medium, 500);
+  color: var(--aparte-file-tree-title, #475569);
+}
+
+.file-tree-content {
+  padding: var(--aparte-space-4, 8px) 0;
+}
+
+.file-node {
+  display: flex;
+  align-items: center;
+  gap: var(--aparte-space-4, 8px);
+  padding: var(--aparte-space-2, 4px) var(--aparte-space-7, 14px);
+  cursor: default;
+}
+
+.file-node:hover {
+  background: var(--aparte-file-tree-hover, #f1f5f9);
+}
+
+.file-node.file-status-added .file-name { color: var(--aparte-file-status-added, #16a34a); }
+.file-node.file-status-modified .file-name { color: var(--aparte-file-status-modified, #0284c7); }
+.file-node.file-status-deleted .file-name { color: var(--aparte-file-status-deleted, #dc2626); text-decoration: line-through; opacity: 0.7; }
+
+.file-icon {
+  font-size: var(--aparte-font-size-lg, 14px);
+  flex-shrink: 0;
+  opacity: 0.7;
+}
+
+/* ─────────────────────────────────────────────────────────────────────────────
+   Composer Primitives
+   Headless by design — consumers own layout. These rules provide only the
+   minimum defaults needed for correctness (display, box model, interaction).
+   ───────────────────────────────────────────────────────────────────────────── */
+
+aparte-composer {
+  display: block;
+  /* Container-query root — see aparte-chat-viewport. */
+  container-type: inline-size;
+}
+
+aparte-composer-input {
+  display: block;
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+/* Contenteditable editor inside aparte-composer-input */
+aparte-composer-input .aparte-ci-editor {
+  display: block;
+  width: 100%;
+  min-height: var(--aparte-composer-control-size, 44px);
+  padding: var(--aparte-input-padding-y, 10px) var(--aparte-input-padding-x, 12px);
+  font-size: var(--aparte-input-font-size, 14px);
+  line-height: var(--aparte-input-line-height, 1.5);
+  color: var(--aparte-text);
+  background: transparent;
+  border: none;
+  outline: none;
+  resize: none;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+  overflow-y: hidden;
+  box-sizing: border-box;
+  caret-color: var(--aparte-text);
+}
+
+/* Placeholder via CSS */
+aparte-composer-input .aparte-ci-editor:empty::before {
+  content: attr(data-placeholder);
+  color: var(--aparte-input-placeholder, var(--aparte-text-muted, #9ca3af));
+  pointer-events: none;
+}
+
+aparte-composer-input .aparte-ci-editor[aria-disabled="true"] {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+aparte-composer-send {
+  display: contents;
+}
+
+aparte-composer-cancel {
+  display: contents;
+}
+
+/* ── Attachment chips list ── */
+aparte-composer-attachments {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--aparte-space-3, 6px);
+  padding: var(--aparte-space-4, 8px) var(--aparte-space-6, 12px);
+  width: 100%;
+  box-sizing: border-box;
+  border-bottom: var(--aparte-border-width, 1px) solid var(--aparte-border);
+}
+
+aparte-composer-attachments[hidden] {
+  display: none;
+}
+
+/* Composer attachment strip — lays out the thumbnail tiles (.aparte-thumb). */
+aparte-composer-attachments {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--aparte-space-3, 6px);
+  --aparte-attachment-image-size: 56px;
+  /* Many attachments → cap the height and scroll. */
+  max-height: var(--aparte-attachments-max-height, 140px);
+  overflow-y: auto;
+}
+
+/* ── Add attachment button ── */
+aparte-composer-add-attachment {
+  display: contents;
+}
+
+/* ── Generic action button ── */
+aparte-composer-action {
+  display: contents;
+}
+
+/* ── Drag-over state on root ── */
+aparte-composer.is-dragover .aparte-composer-shell {
+  outline: var(--aparte-focus-outline-width, 2px) dashed var(--aparte-primary);
+  outline-offset: -2px;
+  border-radius: var(--aparte-radius-input, 12px);
+}
+/* fallback: no shell */
+aparte-composer.is-dragover:not(:has(.aparte-composer-shell)) {
+  outline: var(--aparte-focus-outline-width, 2px) dashed var(--aparte-primary);
+  outline-offset: -2px;
+  border-radius: var(--aparte-radius-input, 12px);
+}
+
+/* ─────────────────────────────────────────────────────────────────────────────
+   Composer Layout Helpers  (opt-in, not required)
+   Use these classes when you want the composer look out of the box.
+
+   <aparte-composer>
+     <div class="aparte-composer-shell">
+       <aparte-composer-attachments></aparte-composer-attachments>
+       <div class="aparte-composer-row">
+         <aparte-composer-add-attachment></aparte-composer-add-attachment>
+         <aparte-composer-input></aparte-composer-input>
+         <aparte-composer-send></aparte-composer-send>
+       </div>
+     </div>
+   </aparte-composer>
+   ───────────────────────────────────────────────────────────────────────────── */
+
+/* Outer shell — visual border + radius. Mirrors .aparte-input-wrapper */
+.aparte-composer-shell {
+  background: var(--aparte-input-bg, var(--aparte-surface-1));
+  border: var(--aparte-border-width, 1px) solid var(--aparte-input-border, var(--aparte-border));
+  border-radius: var(--aparte-radius-input, 12px);
+  max-width: var(--aparte-message-max-width, 800px);
+  margin: 0 auto;
+  width: 100%;
+  box-sizing: border-box;
+  transition: border-color 0.2s;
+}
+
+.aparte-composer-shell:focus-within {
+  border-color: var(--aparte-primary);
+}
+
+/* Inner row — flex container for input + buttons */
+.aparte-composer-row {
+  display: flex;
+  align-items: flex-end;
+  gap: var(--aparte-space-4, 8px);
+  padding: var(--aparte-space-4, 8px) var(--aparte-space-6, 12px);
+}
+
+/* Action buttons sized to the input's single-line height — BOTH derive from
+   --aparte-composer-control-size (default 44px), so a theme resizes the whole
+   composer control set with ONE variable and alignment holds. Combined with
+   the row's `align-items: flex-end` this makes the buttons read as vertically
+   centered against a single line of text, and keeps them anchored to the
+   bottom once the input grows multi-line — no magic margins. */
+.aparte-composer-row button {
+  width: var(--aparte-composer-control-size, 44px);
+  height: var(--aparte-composer-control-size, 44px);
+  box-sizing: border-box;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* Footer row below the input row (model selector etc.) */
+.aparte-composer-footer {
+  display: flex;
+  align-items: center;
+  gap: var(--aparte-space-4, 8px);
+  padding: var(--aparte-space-3, 6px) var(--aparte-space-6, 12px);
+  border-top: var(--aparte-border-width, 1px) solid var(--aparte-border);
+}
+
+.aparte-composer-footer:empty {
+  display: none;
+}
+
+/* Cancel/dictate button — same visual style as action buttons */
+aparte-composer-cancel .aparte-cc-button[hidden],
+aparte-composer-dictate .aparte-cd-button[hidden] {
+  display: none !important;
+}
+
+aparte-composer-cancel .aparte-cc-button,
+aparte-composer-dictate .aparte-cd-button {
+  background: transparent;
+  border: none;
+  color: var(--aparte-neutral, #6b7280);
+  padding: var(--aparte-space-3, 6px);
+  border-radius: var(--aparte-radius-action-btn, 6px);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  transition: color 0.15s, background 0.15s;
+}
+
+aparte-composer-cancel .aparte-cc-button:hover,
+aparte-composer-dictate .aparte-cd-button:hover {
+  color: var(--aparte-text);
+  background: var(--aparte-surface-2);
+}
+
+/* ─────────────────────────────────────────────────────────────────────────────
+   Opt-in "centered composer when empty" — add the `--auto-center` modifier
+   (the wrappers do this from their `centerWhenEmpty` prop). Consumers that never
+   opt in keep just the base layout above.
+
+   Empty  → the [welcome + composer] group sits vertically centered.
+   Active → on the first message the list grows and the composer slides to the
+            bottom (~0.3s). Only `flex-grow` toggles between the two states
+            (flex-basis/height stay constant) so the transition slides instead
+            of snapping. Scoped to `.aparte-viewport--framework` so the native
+            (vanilla) viewport is never touched.
+   ───────────────────────────────────────────────────────────────────────────── */
+
+.aparte-chat-container--auto-center {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-height: 0;
+}
+
+.aparte-chat-container--auto-center aparte-chat-viewport.aparte-viewport--framework {
+  flex: 1 1 auto;
+  min-height: 0;
+  height: auto;
+  transition: flex-grow 0.3s ease; /* the "slide to bottom" on first message */
+}
+
+.aparte-chat-container--auto-center aparte-composer {
+  flex: 0 0 auto;
+}
+
+/* Empty delta — a wrapper sets [data-aparte-empty] only while centerWhenEmpty is
+   on AND the message list is empty. `justify-content` flips instantly (not an
+   animatable property) — fine, it only differs between the two steady states. */
+.aparte-chat-container--auto-center[data-aparte-empty] {
+  justify-content: center;
+}
+
+.aparte-chat-container--auto-center[data-aparte-empty]
+  aparte-chat-viewport.aparte-viewport--framework {
+  flex-grow: 0;
+}
+
+/* The pre-existing reduced-motion guard only matches `aparte-chat-viewport *`
+   (descendants), not the element itself — so the transition above needs its
+   own guard. */
+@media (prefers-reduced-motion: reduce) {
+  .aparte-chat-container--auto-center
+    aparte-chat-viewport.aparte-viewport--framework {
+    transition-duration: 0.01ms;
+  }
+}
+
+/* =========================================
+   aparte-conversation-list
+   ========================================= */
+
+aparte-conversation-list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--aparte-conv-list-gap, 2px);
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
+.aparte-conv-item {
+  display: flex;
+  align-items: center;
+  gap: var(--aparte-conv-item-gap, 6px);
+  padding: var(--aparte-conv-item-padding, 7px 10px);
+  border-radius: var(--aparte-conv-item-radius, 6px);
+  cursor: pointer;
+  min-width: 0;
+  color: var(--aparte-conv-item-color, var(--aparte-text-muted));
+  font-size: var(--aparte-conv-item-font-size, 0.8125rem);
+  font-family: var(--aparte-font-family, system-ui, -apple-system, sans-serif);
+  transition: background 0.12s;
+  outline: none;
+}
+
+.aparte-conv-item:hover {
+  background: var(--aparte-conv-item-bg-hover, var(--aparte-surface-3));
+}
+
+.aparte-conv-item:focus-visible {
+  outline: var(--aparte-focus-outline-width, 2px) solid var(--aparte-primary);
+  outline-offset: -2px;
+}
+
+.aparte-conv-item:hover .aparte-conv-item__delete {
+  opacity: 1;
+}
+
+.aparte-conv-item:hover .aparte-conv-item__archive {
+  opacity: 1;
+}
+
+/* Keyboard access (WCAG 2.1.1): the archive/delete actions are opacity:0 until
+   hover, which would hide keyboard focus. Reveal + ring them on focus. */
+.aparte-conv-item:focus-within .aparte-conv-item__archive,
+.aparte-conv-item:focus-within .aparte-conv-item__delete {
+  opacity: 1;
+}
+
+.aparte-conv-item__archive:focus-visible,
+.aparte-conv-item__delete:focus-visible {
+  opacity: 1;
+  outline: var(--aparte-focus-outline-width, 2px) solid var(--aparte-primary);
+  outline-offset: -2px;
+}
+
+.aparte-conv-item--active {
+  background: var(--aparte-conv-item-bg-active, var(--aparte-surface-3));
+  color: var(--aparte-conv-item-color-active, var(--aparte-text));
+  font-weight: var(--aparte-conv-item-font-weight-active, 500);
+}
+
+.aparte-conv-item--active .aparte-conv-item__delete {
+  opacity: 0;
+}
+
+.aparte-conv-item--active .aparte-conv-item__archive {
+  opacity: 0;
+}
+
+.aparte-conv-item__title {
+  flex: 1;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  min-width: 0;
+}
+
+.aparte-conv-item__delete {
+  flex-shrink: 0;
+  opacity: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--aparte-conv-action-btn-size, 20px);
+  height: var(--aparte-conv-action-btn-size, 20px);
+  border: none;
+  background: none;
+  color: var(--aparte-conv-delete-color, var(--aparte-text-muted));
+  border-radius: var(--aparte-conv-delete-radius, var(--aparte-radius-sm));
+  cursor: pointer;
+  padding: 0;
+  transition: opacity 0.12s, background 0.12s, color 0.12s;
+}
+
+.aparte-conv-item__delete:hover {
+  background: var(--aparte-conv-delete-bg-hover, var(--aparte-error));
+  color: var(--aparte-conv-delete-color-hover, var(--aparte-text-inverse));
+}
+
+.aparte-conv-item__archive {
+  flex-shrink: 0;
+  opacity: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--aparte-conv-action-btn-size, 20px);
+  height: var(--aparte-conv-action-btn-size, 20px);
+  border: none;
+  background: none;
+  color: var(--aparte-conv-archive-color, var(--aparte-text-muted));
+  border-radius: var(--aparte-conv-archive-radius, var(--aparte-radius-sm));
+  cursor: pointer;
+  padding: 0;
+  transition: opacity 0.12s, background 0.12s, color 0.12s;
+}
+
+.aparte-conv-item__archive:hover {
+  background: var(--aparte-conv-archive-bg-hover, var(--aparte-surface-4, var(--aparte-surface-3)));
+  color: var(--aparte-conv-archive-color-hover, var(--aparte-text));
+}
+
+.aparte-conv-item--archived .aparte-conv-item__title {
+  font-style: italic;
+  opacity: 0.85;
+}
+
+/* =========================================
+   Provider-HTML overflow guards
+   ========================================= */
+
+/* Markdown providers inject arbitrary HTML into .segment-text, and the bubble
+   clips overflow (`aparte-chat-bubble { overflow: hidden }`) — without these
+   guards a wide image or table is silently cut at the bubble edge. */
+.segment-text img {
+  max-width: 100%;
+  height: auto;
+}
+
+.segment-text table {
+  display: block;
+  max-width: 100%;
+  overflow-x: auto;
+  border-collapse: collapse;
+}
+
+/* =========================================
+   Adaptive layout (container width + input modality)
+   ========================================= */
+
+/* Narrow containers (embedded widgets, mobile) — tighter chrome. The theming
+   variables are defined at :root, so `var(x, fallback)` fallbacks can never
+   fire — instead each rule REASSIGNS the variable at the element, the same
+   per-context pattern .aparte-attachments already uses. To retheme the narrow
+   state, override these variables inside your own @container block. Browsers
+   without container-query support keep the wide defaults. */
+@container (max-width: 520px) {
+  .aparte-message {
+    --aparte-message-padding: var(--aparte-space-6, 12px) var(--aparte-space-4, 8px);
+    --aparte-message-gap: var(--aparte-space-4, 8px);
+  }
+
+  .aparte-avatar {
+    --aparte-avatar-size: 24px;
+  }
+
+  .aparte-messages-wrapper {
+    --aparte-viewport-padding: var(--aparte-space-6, 12px) var(--aparte-space-4, 8px);
+  }
+
+  .aparte-composer-row {
+    padding: var(--aparte-space-4, 8px);
+  }
+}
+
+/* Coarse pointers (touch) — comfortable hit areas. */
+@media (pointer: coarse) {
+  .aparte-scroll-btn {
+    --aparte-scroll-btn-size: var(--aparte-touch-target-size, 44px);
+  }
+
+  .aparte-send-button {
+    --aparte-send-btn-size: var(--aparte-touch-target-size, 44px);
+  }
+
+  .aparte-action-button {
+    --aparte-input-action-btn-size: var(--aparte-touch-target-size, 44px);
+  }
+
+  /* Hover cannot reveal these on touch — keep them visible and tappable. */
+  .aparte-conv-item__delete,
+  .aparte-conv-item__archive {
+    opacity: 1;
+    --aparte-conv-action-btn-size: 28px;
+  }
+}
+/**
+ * Aparte Select CSS
+ * Stylable via CSS variables
+ */
+
+aparte-select {
+    display: inline-block;
+    position: relative;
+    min-width: 200px;
+    font-family: var(--aparte-font-family, inherit);
+}
+
+/* Trigger */
+.aparte-select-trigger {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 0.5rem;
+    padding: 0.5rem 0.75rem;
+    background: var(--aparte-select-bg, var(--aparte-surface-1, #fff));
+    border: 1px solid var(--aparte-select-border, var(--aparte-border, #e2e8f0));
+    border-radius: var(--aparte-select-radius, 0.5rem);
+    cursor: pointer;
+    transition: border-color 0.15s, box-shadow 0.15s;
+}
+
+.aparte-select-trigger:hover {
+    border-color: var(--aparte-select-border-hover, var(--aparte-primary, #3b82f6));
+}
+
+.aparte-select-trigger:focus {
+    outline: none;
+    border-color: var(--aparte-select-border-focus, var(--aparte-primary, #3b82f6));
+    box-shadow: 0 0 0 2px var(--aparte-select-ring, rgba(59, 130, 246, 0.2));
+}
+
+aparte-select[disabled] .aparte-select-trigger {
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+
+.aparte-select-label {
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    color: var(--aparte-select-text, var(--aparte-text, #1e293b));
+}
+
+.aparte-select-chevron {
+    flex-shrink: 0;
+    color: var(--aparte-select-chevron, var(--aparte-text-muted, #94a3b8));
+    transition: transform 0.2s;
+}
+
+aparte-select[open] .aparte-select-chevron {
+    transform: rotate(180deg);
+}
+
+/* Dropdown — position:fixed to escape overflow:hidden ancestors */
+.aparte-select-dropdown {
+    position: fixed;
+    /* top / left / width are set dynamically by _updatePosition() */
+    background: var(--aparte-select-dropdown-bg, var(--aparte-surface-1, #fff));
+    border: 1px solid var(--aparte-select-border, var(--aparte-border, #e2e8f0));
+    border-radius: var(--aparte-select-radius, 0.5rem);
+    box-shadow: var(--aparte-select-shadow, 0 4px 12px rgba(0, 0, 0, 0.1));
+    z-index: var(--aparte-select-z, 1000);
+    max-height: 300px;
+    overflow: auto;
+}
+
+.aparte-select-dropdown[hidden] {
+    display: none;
+}
+
+/* Search */
+.aparte-select-search {
+    display: block;
+    width: 100%;
+    padding: 0.5rem 0.75rem;
+    border: none;
+    border-bottom: 1px solid var(--aparte-border, #e2e8f0);
+    background: transparent;
+    font-size: inherit;
+    font-family: inherit;
+}
+
+.aparte-select-search:focus {
+    outline: none;
+}
+
+/* Options container */
+.aparte-select-options {
+    padding: 0.25rem;
+}
+
+/* Option */
+aparte-option {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0.5rem 0.75rem;
+    border-radius: 0.25rem;
+    cursor: pointer;
+    transition: background-color 0.1s;
+    color: var(--aparte-select-text, var(--aparte-text, #1e293b));
+}
+
+aparte-option:hover {
+    background: var(--aparte-select-option-hover, var(--aparte-surface-2, #f1f5f9));
+}
+
+/* Keyboard-active option (roving highlight driven by aria-activedescendant).
+   Distinct from :hover so keyboard users get an unambiguous focus indicator. */
+aparte-option[data-active] {
+    background: var(--aparte-select-option-hover, var(--aparte-surface-2, #f1f5f9));
+    box-shadow: inset 0 0 0 2px var(--aparte-primary, #3b82f6);
+}
+
+aparte-option[selected] {
+    background: var(--aparte-select-option-selected, var(--aparte-primary, #3b82f6));
+    color: var(--aparte-select-option-selected-text, #fff);
+}
+
+aparte-option[disabled] {
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+
+/* Status dot injected by AparteOption when data-status is set */
+.aparte-status-dot {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    flex-shrink: 0;
+    margin-left: 8px;
+}
+
+.aparte-status-dot[data-status="ready"] {
+    background-color: #22c55e;
+}
+
+.aparte-status-dot[data-status="cached"] {
+    background-color: #f59e0b;
+}
+
+.aparte-status-dot[data-status="not-downloaded"] {
+    background-color: var(--aparte-border, #94a3b8);
+}
+
+/* Optgroup */
+aparte-optgroup {
+    display: block;
+}
+
+.aparte-optgroup-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0.5rem 0.75rem;
+    font-size: 0.75rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    color: var(--aparte-text-muted, #94a3b8);
+}
+
+.aparte-optgroup-chevron {
+    width: 0;
+    height: 0;
+    border-left: 4px solid transparent;
+    border-right: 4px solid transparent;
+    border-top: 5px solid currentColor;
+    transition: transform 0.2s;
+}
+
+aparte-optgroup[collapsed] .aparte-optgroup-chevron {
+    transform: rotate(-90deg);
+}
+
+/* Dark mode */
+[data-aparte-theme="dark"] aparte-select .aparte-select-trigger,
+[data-aparte-theme="dark"] aparte-select .aparte-select-dropdown {
+    background: var(--aparte-select-bg, var(--aparte-surface-1, #1e293b));
+    border-color: var(--aparte-select-border, var(--aparte-border, #334155));
+}
+
+[data-aparte-theme="dark"] aparte-option:hover {
+    background: var(--aparte-select-option-hover, var(--aparte-surface-2, #334155));
+}
+
+.aparte-optgroup-loader {
+    padding: 0.5rem 0.75rem;
+    font-size: 0.75rem;
+    color: var(--aparte-text-muted, #94a3b8);
+    font-style: italic;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+.aparte-spinner-small {
+    width: 12px;
+    height: 12px;
+    border: 2px solid currentColor;
+    border-top-color: transparent;
+    border-radius: 50%;
+    animation: aparte-spin 0.6s linear infinite;
+}
+
+@keyframes aparte-spin {
+    to {
+        transform: rotate(360deg);
+    }
+}/**
+ * AparteProgressSpinner — CSS
+ *
+ * All colors are driven by CSS custom properties so consumers can theme freely.
+ * The `color` property on the element controls both fill and track by default.
+ */
+
+aparte-progress-spinner {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--aparte-spinner-size, 14px);
+    height: var(--aparte-spinner-size, 14px);
+    flex-shrink: 0;
+}
+
+aparte-progress-spinner svg {
+    width: 100%;
+    height: 100%;
+    /* Start arc from 12 o'clock */
+    transform: rotate(-90deg);
+    transform-origin: center;
+    overflow: visible;
+}
+
+.aparte-spinner-track {
+    fill: none;
+    stroke: var(--aparte-spinner-track, color-mix(in srgb, currentColor 15%, transparent));
+    stroke-width: var(--aparte-spinner-stroke, 2.5);
+}
+
+.aparte-spinner-fill {
+    fill: none;
+    stroke: var(--aparte-spinner-color, currentColor);
+    stroke-width: var(--aparte-spinner-stroke, 2.5);
+    stroke-linecap: round;
+    transition: stroke-dashoffset 0.25s ease;
+}
+
+/* Indeterminate: rotate the whole SVG continuously */
+aparte-progress-spinner:not([value]) svg {
+    animation: aparte-spinner-rotate 0.9s linear infinite;
+}
+
+@keyframes aparte-spinner-rotate {
+    from { transform: rotate(-90deg); }
+    to   { transform: rotate(270deg); }
+}