composeai 0.1.3 → 0.1.5

package/src/composer.css

@@ -1,23 +1,30 @@
 /* ComposeAI — component styles.
  *
- * Plain CSS (no Tailwind required) keyed off the CSS variables every consumer
- * defines for their theme:
+ * Plain CSS, NO Tailwind required. Every element the package renders (editor
+ * content AND chrome — card, buttons, menus, chips, …) is styled here off a
+ * single set of design tokens:
  *   --background, --foreground, --primary, --primary-foreground,
  *   --muted, --muted-foreground, --border, --card, --card-foreground,
  *   --popover, --popover-foreground, --accent, --accent-foreground,
  *   --destructive, --success, --warning
- * Values are HSL components (e.g. `258 90% 62%`) so utilities can compose
- * with opacities via `hsl(var(--primary) / 0.1)`.
+ * Values are HSL components (e.g. `258 90% 62%`) so they compose with
+ * opacities via `hsl(var(--primary) / 0.1)`.
+ *
+ * The package ships a complete DEFAULT value for every token (see the
+ * `[data-composer-scope]` block in the CHROME section below), scoped to the
+ * composer subtree + its portaled popovers — so a consumer who configures
+ * nothing still gets a correct, opaque, themed composer. The `color` /
+ * `tokens` / `sx` props override per-token (they apply inline on the same
+ * scope element, which always beats this stylesheet).
  */
 
 /* ----------------------------------------------------------------------------
  * Composer-wide custom properties.
  *
- * These are READ by both the package CSS below and the Tailwind utility
- * classes the components use (`bg-card`, `rounded-[28px]`, etc.). They are
- * SET inline on the composer root by `<Composer />` itself when the consumer
- * passes `tokens={...}`, so they only affect that one composer instance —
- * never the consumer app's global theme.
+ * These are READ by the package CSS below (`var(--composer-radius)`, etc.).
+ * They are SET inline on the composer root by `<Composer />` itself when the
+ * consumer passes `tokens={...}`, so they only affect that one composer
+ * instance — never the consumer app's global theme.
  *
  *   --composer-radius        outer card corner radius (default 28px)
  *   --composer-font-size     editor base font size (default 15px)
@@ -386,6 +393,10 @@
  * ------------------------------------------------------------------------- */
 
 .composer-ghost-overlay {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  user-select: none;
   font-size: var(--composer-font-size, 15px);
   font-family: var(--composer-font-family, inherit);
   line-height: 1.6;
@@ -418,6 +429,17 @@
   font-style: italic;
 }
 
+/* Padding mirrors EditorShell's editor padding so the ghost text lines up
+ * with the caret. `--multiline` matches `.composer-editor--multiline`
+ * (0.875rem 1.25rem); `--inline` matches `.composer-editor--inline`
+ * (0.5rem inline). Keep these in lock-step with those rules. */
+.composer-ghost-overlay--multiline {
+  padding: 0.875rem 1.25rem;
+}
+.composer-ghost-overlay--inline {
+  padding-inline: 0.5rem;
+}
+
 /* Inline-layout overrides: mirror the editor's 36px row line-height so
  * the suggestion sits on the same baseline as the typed text. */
 .composer-ghost-overlay.composer-ghost-overlay--inline {
@@ -451,7 +473,12 @@
  * order, with the line-height matching the 36px row height so a single
  * line of text is perfectly centered. */
 .composer-editor.composer-editor--inline {
+  height: 2.25rem; /* h-9 (36px) */
   line-height: 2.25rem; /* matches h-9 / leading-9 (36px) */
+  padding-inline: 0.5rem;
+  overflow-x: auto;
+  overflow-y: hidden;
+  white-space: nowrap;
   scrollbar-width: none;
 }
 .composer-editor.composer-editor--inline::-webkit-scrollbar {
@@ -478,4 +505,1131 @@
  * showing if a consumer renders one manually inside an inline composer. */
 [data-composer-root][data-composer-inline] [data-mermaid-tile] {
   display: none;
+}
+
+/* ============================================================================
+ * CHROME — self-contained component styles.
+ *
+ * Everything below styles the composer's *chrome* (card, toolbar, buttons,
+ * menus, attachment chips, tooltips, …) in plain CSS, so the package renders
+ * correctly with NO Tailwind in the consumer app and NO assumptions about the
+ * consumer's design-token names. Each element carries a semantic
+ * `composer-*` class (set by the components) that these rules target.
+ *
+ * Colors are keyed off the same `hsl(var(--token))` design tokens the editor
+ * content above uses. The package now ships a complete DEFAULT value for every
+ * token (below), scoped to the composer subtree + its portaled popovers, so a
+ * consumer who defines nothing still gets a correct, opaque, rounded composer.
+ * The `color` / `tokens` / `sx` props still win — they are applied inline on
+ * the same scope element, and inline always beats this stylesheet.
+ * ========================================================================= */
+
+/* ----------------------------------------------------------------------------
+ * Built-in default theme.
+ *
+ * Set DIRECTLY on the scope elements (not on the consumer's `:root`) so they
+ * shadow whatever the host app defines globally — even when the host uses an
+ * incompatible format (hex, rgb, oklch) for the same variable name. Because
+ * they sit on the same element the `color`/`tokens` props target inline, the
+ * consumer's theming still overrides them per-token. `--composer-shadow-*` are
+ * package-private so they can't clash with a host's shadow tokens.
+ * ------------------------------------------------------------------------- */
+.composer-root,
+[data-composer-scope] {
+  --background: 0 0% 100%;
+  --foreground: 222 18% 18%;
+  --card: 0 0% 100%;
+  --card-foreground: 222 18% 18%;
+  --popover: 0 0% 100%;
+  --popover-foreground: 222 18% 18%;
+  --muted: 220 14% 96%;
+  --muted-foreground: 220 9% 46%;
+  --border: 220 13% 90%;
+  --input: 220 13% 90%;
+  --primary: 222 47% 11%;
+  --primary-foreground: 210 20% 98%;
+  --accent: 220 14% 95%;
+  --accent-foreground: 222 47% 11%;
+  --ring: 222 47% 11%;
+  --destructive: 0 72% 51%;
+  --destructive-foreground: 0 0% 100%;
+  --success: 142 71% 45%;
+  --success-foreground: 0 0% 100%;
+  --warning: 38 92% 50%;
+  --warning-foreground: 24 10% 10%;
+
+  --composer-shadow-soft: 0 1px 2px hsl(220 13% 10% / 0.05),
+    0 12px 32px -16px hsl(220 13% 10% / 0.24);
+  --composer-shadow-pop: 0 4px 12px hsl(220 13% 10% / 0.08),
+    0 20px 48px -20px hsl(220 13% 10% / 0.4);
+}
+
+/* Auto dark theme for hosts whose users prefer dark — keeps the composer
+ * readable out of the box on a dark canvas. A consumer who wants an explicit
+ * theme regardless of OS setting passes `tokens` (which wins inline). */
+@media (prefers-color-scheme: dark) {
+  .composer-root,
+  [data-composer-scope] {
+    --background: 222 16% 11%;
+    --foreground: 210 20% 92%;
+    --card: 222 16% 13%;
+    --card-foreground: 210 20% 92%;
+    --popover: 222 16% 15%;
+    --popover-foreground: 210 20% 92%;
+    --muted: 220 14% 20%;
+    --muted-foreground: 220 9% 64%;
+    --border: 220 13% 26%;
+    --input: 220 13% 26%;
+    --primary: 210 20% 96%;
+    --primary-foreground: 222 47% 11%;
+    --accent: 220 13% 24%;
+    --accent-foreground: 210 20% 96%;
+    --ring: 210 20% 80%;
+    --destructive: 0 72% 55%;
+    --destructive-foreground: 0 0% 100%;
+    --success: 142 64% 47%;
+    --success-foreground: 0 0% 100%;
+    --warning: 38 92% 55%;
+    --warning-foreground: 24 10% 10%;
+
+    --composer-shadow-soft: 0 1px 2px hsl(0 0% 0% / 0.4),
+      0 12px 32px -16px hsl(0 0% 0% / 0.6);
+    --composer-shadow-pop: 0 4px 12px hsl(0 0% 0% / 0.5),
+      0 20px 48px -20px hsl(0 0% 0% / 0.7);
+  }
+}
+
+/* Shared keyframes / animation helpers. `composer-popover-in` already exists
+ * above for the small attachment popover; these cover the typeahead menus,
+ * spinners and pulsing recording indicators. */
+@keyframes composer-slide-up {
+  from {
+    opacity: 0;
+    transform: translateY(-4px) scale(0.985);
+  }
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+@keyframes composer-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+@keyframes composer-pulse {
+  50% {
+    opacity: 0.45;
+  }
+}
+.composer-spin {
+  animation: composer-spin 0.9s linear infinite;
+}
+.composer-pulse {
+  animation: composer-pulse 1.4s ease-in-out infinite;
+}
+
+/* Shared thin scrollbar (matches the editor's own, defined above). */
+.composer-scroll-y {
+  overflow-y: auto;
+  scrollbar-width: thin;
+  scrollbar-color: hsl(var(--border)) transparent;
+}
+.composer-scroll-x {
+  overflow-x: auto;
+  scrollbar-width: thin;
+  scrollbar-color: hsl(var(--border)) transparent;
+}
+.composer-scroll-y::-webkit-scrollbar,
+.composer-scroll-x::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+.composer-scroll-y::-webkit-scrollbar-thumb,
+.composer-scroll-x::-webkit-scrollbar-thumb {
+  background: hsl(var(--border));
+  border-radius: 9999px;
+}
+
+/* All package SVGs inherit the current text color and never shrink in a flex
+ * row. Concrete sizes are set per-context below. Mermaid-rendered SVGs live
+ * inside `.composer-mermaid-svg` and are sized there, never by this rule. */
+.composer-icon {
+  flex: none;
+  color: currentColor;
+}
+
+/* Visually-hidden but screen-reader-accessible (replaces Tailwind `sr-only`). */
+.composer-sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+/* ----------------------------------------------------------------------------
+ * Root + card + focus/drag overlays.
+ * ------------------------------------------------------------------------- */
+.composer-root {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+[data-composer-root] {
+  position: relative;
+  border: 1px solid hsl(var(--border));
+  background: hsl(var(--card));
+  color: hsl(var(--card-foreground));
+  box-shadow: var(--composer-shadow-soft);
+  transition: border-color 0.2s ease, box-shadow 0.2s ease;
+}
+[data-composer-root]:focus-within {
+  border-color: hsl(var(--primary) / 0.4);
+  box-shadow: 0 0 0 1px hsl(var(--primary) / 0.15),
+    0 10px 34px -14px hsl(var(--primary) / 0.35);
+}
+[data-composer-root][data-composer-web] {
+  box-shadow: 0 0 0 1px hsl(var(--primary) / 0.2), var(--composer-shadow-soft);
+}
+[data-composer-root][data-composer-dragging] {
+  border-color: hsl(var(--primary) / 0.6);
+  box-shadow: 0 0 0 2px hsl(var(--primary) / 0.6), var(--composer-shadow-soft);
+}
+
+.composer-overlay-glow {
+  pointer-events: none;
+  position: absolute;
+  inset: 0;
+  opacity: 0;
+  transition: opacity 0.25s ease;
+}
+[data-composer-root]:focus-within .composer-overlay-glow {
+  opacity: 1;
+}
+.composer-overlay-drop {
+  pointer-events: none;
+  position: absolute;
+  inset: 0;
+  z-index: 10;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: hsl(var(--primary) / 0.05);
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: hsl(var(--primary));
+  backdrop-filter: blur(1px);
+}
+
+/* ----------------------------------------------------------------------------
+ * Editor shell layout (multiline + inline).
+ * ------------------------------------------------------------------------- */
+.composer-editor--multiline {
+  min-height: 44px;
+  max-height: 14rem;
+  overflow-y: auto;
+  scrollbar-width: thin;
+  scrollbar-color: hsl(var(--border)) transparent;
+  padding: 0.875rem 1.25rem;
+}
+.composer-editor--multiline::-webkit-scrollbar {
+  width: 6px;
+}
+.composer-editor--multiline::-webkit-scrollbar-thumb {
+  background: hsl(var(--border));
+  border-radius: 9999px;
+}
+
+.composer-editor-block {
+  position: relative;
+  min-width: 0;
+}
+.composer-editor-block--inline {
+  flex: 1 1 0%;
+}
+
+.composer-placeholder {
+  pointer-events: none;
+  position: absolute;
+  user-select: none;
+  color: hsl(var(--muted-foreground));
+  font-size: 15px;
+}
+.composer-placeholder--multiline {
+  inset-inline: 0;
+  top: 0;
+  padding: 0.875rem 1.25rem;
+  line-height: 1.625;
+}
+.composer-placeholder--inline {
+  inset: 0;
+  padding-inline: 0.5rem;
+  line-height: 2.25rem;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.composer-inline-row {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  padding: 0.375rem 0.5rem;
+}
+.composer-inline-toolbar,
+.composer-inline-send {
+  display: flex;
+  flex: none;
+  align-items: center;
+}
+
+.composer-toolbar-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 0.75rem 0.625rem;
+}
+
+/* ----------------------------------------------------------------------------
+ * Toolbar + buttons.
+ * ------------------------------------------------------------------------- */
+.composer-toolbar {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+}
+
+.composer-toolbar-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: 2rem;
+  width: 2rem;
+  border-radius: 9999px;
+  color: hsl(var(--muted-foreground));
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  transition: background-color 0.15s ease, color 0.15s ease;
+}
+.composer-toolbar-btn:hover {
+  background: hsl(var(--accent));
+  color: hsl(var(--foreground));
+}
+.composer-toolbar-btn svg {
+  height: 1rem;
+  width: 1rem;
+}
+
+/* Web-search pill — wider, pressed state lights up in the brand color. */
+.composer-web-btn {
+  margin-inline-start: 0.125rem;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  height: 2rem;
+  padding-inline: 0.625rem;
+  border-radius: 9999px;
+  border: none;
+  background: transparent;
+  font-size: 0.75rem;
+  font-weight: 500;
+  color: hsl(var(--muted-foreground));
+  cursor: pointer;
+  transition: background-color 0.15s ease, color 0.15s ease;
+}
+.composer-web-btn:hover {
+  background: hsl(var(--accent));
+  color: hsl(var(--foreground));
+}
+.composer-web-btn[aria-pressed="true"] {
+  background: hsl(var(--primary) / 0.1);
+  color: hsl(var(--primary));
+}
+.composer-web-btn svg {
+  height: 0.875rem;
+  width: 0.875rem;
+}
+
+/* Voice button + live recording timer. */
+.composer-voice {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+}
+.composer-voice-btn[aria-pressed="true"] {
+  background: hsl(var(--destructive) / 0.1);
+  color: hsl(var(--destructive));
+  box-shadow: 0 0 0 1px hsl(var(--destructive) / 0.4);
+}
+.composer-voice-btn[aria-pressed="true"]:hover {
+  background: hsl(var(--destructive) / 0.15);
+  color: hsl(var(--destructive));
+}
+.composer-voice-timer {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  border-radius: 9999px;
+  background: hsl(var(--destructive) / 0.1);
+  padding: 0.125rem 0.5rem;
+  font-size: 11px;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-weight: 500;
+  font-variant-numeric: tabular-nums;
+  color: hsl(var(--destructive));
+}
+.composer-voice-dot {
+  height: 0.375rem;
+  width: 0.375rem;
+  border-radius: 9999px;
+  background: hsl(var(--destructive));
+}
+
+/* Send / stop button. Filled, circular, lifts on hover. The disabled send
+ * state drops to a muted fill so it reads as inert. */
+.composer-send-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: 2.25rem;
+  width: 2.25rem;
+  border-radius: 9999px;
+  border: none;
+  background: hsl(var(--foreground));
+  color: hsl(var(--background));
+  box-shadow: 0 1px 2px hsl(220 13% 10% / 0.12);
+  cursor: pointer;
+  transition: transform 0.15s ease, background-color 0.15s ease,
+    color 0.15s ease;
+}
+.composer-send-btn:hover:not(:disabled) {
+  transform: scale(1.05);
+}
+.composer-send-btn:disabled {
+  background: hsl(var(--muted));
+  color: hsl(var(--muted-foreground) / 0.6);
+  box-shadow: none;
+  cursor: default;
+}
+.composer-send-btn svg {
+  height: 1rem;
+  width: 1rem;
+}
+.composer-send-btn--stop svg {
+  height: 0.875rem;
+  width: 0.875rem;
+  fill: currentColor;
+}
+
+/* ----------------------------------------------------------------------------
+ * Typeahead menus (mentions / slash) + attachment-type popover.
+ *
+ * The mention/slash menus are portaled and positioned by SmartPopover (fixed,
+ * via inline styles), so the class only owns the surface + animation. The
+ * attachment-type picker positions itself (absolute, opens upward).
+ * ------------------------------------------------------------------------- */
+.composer-menu {
+  z-index: 50;
+  width: 16rem;
+  overflow: hidden;
+  border-radius: 0.75rem;
+  border: 1px solid hsl(var(--border));
+  background: hsl(var(--popover));
+  color: hsl(var(--popover-foreground));
+  box-shadow: var(--composer-shadow-pop);
+  transform-origin: top;
+  animation: composer-slide-up 0.16s ease-out;
+}
+.composer-menu--slash {
+  width: 18rem;
+}
+
+.composer-menu-list {
+  max-height: 18rem;
+  overflow-y: auto;
+  scrollbar-width: thin;
+  scrollbar-color: hsl(var(--border)) transparent;
+  padding-block: 0.25rem;
+}
+.composer-menu-list::-webkit-scrollbar {
+  width: 6px;
+}
+.composer-menu-list::-webkit-scrollbar-thumb {
+  background: hsl(var(--border));
+  border-radius: 9999px;
+}
+
+.composer-menu-group {
+  padding: 0.5rem 0.75rem 0.25rem;
+  font-size: 10px;
+  font-weight: 500;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: hsl(var(--muted-foreground));
+}
+
+.composer-menu-item {
+  display: flex;
+  cursor: pointer;
+  align-items: center;
+  gap: 0.625rem;
+  padding: 0.375rem 0.625rem;
+  font-size: 0.875rem;
+  color: hsl(var(--foreground));
+}
+.composer-menu-item[aria-selected="true"],
+.composer-menu-item[data-active] {
+  background: hsl(var(--accent));
+  color: hsl(var(--accent-foreground));
+}
+
+.composer-menu-text {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+  line-height: 1.2;
+}
+.composer-menu-label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-weight: 500;
+}
+.composer-menu-desc {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 11px;
+  color: hsl(var(--muted-foreground));
+}
+.composer-menu-shortcut {
+  margin-inline-start: auto;
+  border-radius: 0.25rem;
+  border: 1px solid hsl(var(--border));
+  background: hsl(var(--muted));
+  padding: 0.125rem 0.375rem;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 10px;
+  color: hsl(var(--muted-foreground));
+}
+
+/* Round avatar bubble for mention rows (icon / initial fallback). */
+.composer-menu-avatar {
+  display: flex;
+  height: 1.75rem;
+  width: 1.75rem;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  border-radius: 9999px;
+  background: hsl(var(--primary) / 0.1);
+  color: hsl(var(--primary));
+  font-size: 0.75rem;
+  font-weight: 600;
+}
+/* Square-ish badge for slash-command icons. */
+.composer-menu-icon {
+  display: flex;
+  height: 1.75rem;
+  width: 1.75rem;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  border-radius: 0.5rem;
+  background: hsl(var(--muted));
+  color: hsl(var(--muted-foreground));
+}
+
+/* Skeleton shimmer rows shown while async items load. */
+.composer-skel-row {
+  padding: 0.375rem 0.625rem;
+}
+.composer-skel-line {
+  display: flex;
+  align-items: center;
+  gap: 0.625rem;
+  padding: 0.375rem 0;
+}
+.composer-skel-avatar {
+  height: 1.75rem;
+  width: 1.75rem;
+  flex: none;
+  border-radius: 9999px;
+  background: hsl(var(--muted));
+}
+.composer-skel-avatar--square {
+  border-radius: 0.5rem;
+}
+.composer-skel-text {
+  display: flex;
+  min-width: 0;
+  flex: 1;
+  flex-direction: column;
+  gap: 0.375rem;
+}
+.composer-skel-bar {
+  height: 0.625rem;
+  border-radius: 0.25rem;
+  background: hsl(var(--muted));
+}
+.composer-skel-bar--sm {
+  height: 0.5rem;
+  background: hsl(var(--muted) / 0.7);
+}
+.composer-skel-group {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+.composer-skel-grouplabel {
+  display: block;
+  height: 0.5rem;
+  width: 4rem;
+  border-radius: 0.25rem;
+  background: hsl(var(--muted) / 0.7);
+  margin-block: 0.125rem 0.375rem;
+}
+
+/* Internal Avatar (image with initials fallback) used in mention rows. */
+.composer-avatar {
+  display: inline-flex;
+  flex: none;
+  user-select: none;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  border-radius: 9999px;
+  background: hsl(var(--primary) / 0.1);
+  color: hsl(var(--primary));
+  font-size: 0.75rem;
+  font-weight: 600;
+}
+.composer-avatar-img {
+  height: 100%;
+  width: 100%;
+  object-fit: cover;
+}
+
+/* Attachment-type picker popover — anchored above the paperclip. */
+.composer-attach-picker {
+  position: relative;
+}
+.composer-attach-menu {
+  position: absolute;
+  bottom: 100%;
+  inset-inline-start: 0;
+  z-index: 30;
+  margin-bottom: 0.5rem;
+  min-width: 200px;
+  overflow: hidden;
+  border-radius: 0.75rem;
+  border: 1px solid hsl(var(--border));
+  background: hsl(var(--popover));
+  color: hsl(var(--popover-foreground));
+  padding: 0.25rem;
+  box-shadow: var(--composer-shadow-pop);
+}
+.composer-attach-item {
+  display: flex;
+  width: 100%;
+  align-items: center;
+  gap: 0.625rem;
+  border-radius: 0.5rem;
+  border: none;
+  background: transparent;
+  padding: 0.375rem 0.625rem;
+  text-align: start;
+  font-size: 0.875rem;
+  color: hsl(var(--foreground));
+  cursor: pointer;
+  transition: background-color 0.15s ease, color 0.15s ease;
+}
+.composer-attach-item:hover {
+  background: hsl(var(--accent) / 0.6);
+}
+.composer-attach-item[data-active] {
+  background: hsl(var(--accent));
+  color: hsl(var(--accent-foreground));
+}
+.composer-attach-item-icon {
+  display: flex;
+  height: 1.25rem;
+  width: 1.25rem;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  color: hsl(var(--muted-foreground));
+}
+.composer-attach-item-label {
+  min-width: 0;
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-weight: 500;
+}
+.composer-attach-item-desc {
+  flex: none;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 11px;
+  color: hsl(var(--muted-foreground));
+}
+
+/* ----------------------------------------------------------------------------
+ * Attachment tray + chips.
+ * ------------------------------------------------------------------------- */
+.composer-attachment-tray {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  padding: 0.75rem 1rem 0;
+}
+
+.composer-chip {
+  position: relative;
+}
+.composer-chip--image {
+  height: 4rem;
+  width: 4rem;
+  overflow: hidden;
+  border-radius: 0.75rem;
+  border: 1px solid hsl(var(--border));
+  background: hsl(var(--muted));
+}
+.composer-chip-img {
+  height: 100%;
+  width: 100%;
+  object-fit: cover;
+}
+.composer-chip-overlay {
+  position: absolute;
+  inset: 0;
+  display: grid;
+  place-items: center;
+}
+.composer-chip-overlay--uploading {
+  background: hsl(var(--foreground) / 0.5);
+  color: hsl(var(--background));
+}
+.composer-chip-overlay--failed {
+  background: hsl(var(--destructive) / 0.55);
+  color: hsl(var(--destructive-foreground));
+}
+.composer-chip-overlay svg {
+  height: 1.25rem;
+  width: 1.25rem;
+}
+.composer-chip-zoom {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  background: hsl(var(--foreground) / 0.4);
+  color: hsl(var(--background));
+  opacity: 0;
+  cursor: pointer;
+  transition: opacity 0.15s ease;
+}
+.composer-chip--image:hover .composer-chip-zoom {
+  opacity: 1;
+}
+.composer-chip-zoom svg {
+  height: 1rem;
+  width: 1rem;
+}
+.composer-chip-remove {
+  position: absolute;
+  inset-inline-end: 0.25rem;
+  top: 0.25rem;
+  z-index: 10;
+  display: flex;
+  height: 1.25rem;
+  width: 1.25rem;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  border-radius: 9999px;
+  background: hsl(var(--foreground));
+  color: hsl(var(--background));
+  cursor: pointer;
+  opacity: 0;
+  transition: opacity 0.15s ease;
+}
+.composer-chip--image:hover .composer-chip-remove,
+.composer-chip-remove[data-visible] {
+  opacity: 1;
+}
+.composer-chip-remove svg {
+  height: 0.75rem;
+  width: 0.75rem;
+}
+
+.composer-chip--file {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  border-radius: 0.75rem;
+  border: 1px solid hsl(var(--border));
+  background: hsl(var(--card));
+  padding: 0.375rem 0.25rem 0.375rem 0.5rem;
+}
+.composer-chip--file[data-failed] {
+  border-color: hsl(var(--destructive) / 0.6);
+}
+.composer-chip-icon {
+  display: flex;
+  height: 2rem;
+  width: 2rem;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  border-radius: 0.5rem;
+  background: hsl(var(--muted));
+  color: hsl(var(--muted-foreground));
+}
+.composer-chip-icon[data-failed] {
+  background: hsl(var(--destructive) / 0.15);
+  color: hsl(var(--destructive));
+}
+.composer-chip-icon svg {
+  height: 1rem;
+  width: 1rem;
+}
+.composer-chip-text {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+}
+.composer-chip-name {
+  max-width: 160px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 0.75rem;
+  font-weight: 500;
+  line-height: 1.2;
+}
+.composer-chip-meta {
+  font-size: 10px;
+  color: hsl(var(--muted-foreground));
+}
+.composer-chip-meta[data-failed] {
+  color: hsl(var(--destructive));
+}
+.composer-chip-remove-inline {
+  display: flex;
+  height: 1.5rem;
+  width: 1.5rem;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  border-radius: 9999px;
+  background: transparent;
+  color: hsl(var(--muted-foreground));
+  cursor: pointer;
+  transition: background-color 0.15s ease, color 0.15s ease;
+}
+.composer-chip-remove-inline:hover {
+  background: hsl(var(--accent));
+  color: hsl(var(--foreground));
+}
+.composer-chip-remove-inline svg {
+  height: 0.875rem;
+  width: 0.875rem;
+}
+
+/* ----------------------------------------------------------------------------
+ * Image lightbox (portaled, full-viewport).
+ * ------------------------------------------------------------------------- */
+.composer-lightbox {
+  position: fixed;
+  inset: 0;
+  z-index: 50;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 1.5rem;
+}
+.composer-lightbox-backdrop {
+  position: absolute;
+  inset: 0;
+  background: hsl(var(--foreground) / 0.7);
+  backdrop-filter: blur(4px);
+}
+.composer-lightbox-close {
+  position: absolute;
+  inset-inline-end: 1.25rem;
+  top: 1.25rem;
+  display: flex;
+  height: 2.25rem;
+  width: 2.25rem;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  border-radius: 9999px;
+  background: hsl(var(--card));
+  color: hsl(var(--foreground));
+  box-shadow: var(--composer-shadow-soft);
+  cursor: pointer;
+  transition: background-color 0.15s ease;
+}
+.composer-lightbox-close:hover {
+  background: hsl(var(--accent));
+}
+.composer-lightbox-close svg {
+  height: 1rem;
+  width: 1rem;
+}
+.composer-lightbox-img {
+  position: relative;
+  max-height: 85vh;
+  max-width: 85vw;
+  border-radius: 0.5rem;
+  object-fit: contain;
+  box-shadow: 0 25px 50px -12px hsl(0 0% 0% / 0.5);
+}
+
+/* ----------------------------------------------------------------------------
+ * Mermaid diagram preview.
+ * ------------------------------------------------------------------------- */
+.composer-mermaid {
+  border-top: 1px solid hsl(var(--border) / 0.6);
+  background: hsl(var(--muted) / 0.3);
+  padding: 0.75rem 1rem;
+}
+.composer-mermaid-head {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+  margin-bottom: 0.375rem;
+  font-size: 10px;
+  font-weight: 500;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: hsl(var(--muted-foreground));
+}
+.composer-mermaid-head svg {
+  height: 0.75rem;
+  width: 0.75rem;
+}
+.composer-mermaid-row {
+  display: flex;
+  gap: 0.5rem;
+  overflow-x: auto;
+  scrollbar-width: thin;
+  scrollbar-color: hsl(var(--border)) transparent;
+}
+.composer-mermaid-tile {
+  position: relative;
+  flex: none;
+  overflow: hidden;
+  border-radius: 0.5rem;
+  border: 1px solid hsl(var(--border));
+  background: hsl(var(--card));
+  padding: 0;
+  cursor: pointer;
+  transition: border-color 0.15s ease;
+}
+.composer-mermaid-tile:hover {
+  border-color: hsl(var(--primary) / 0.4);
+}
+.composer-mermaid-svg {
+  height: 6rem;
+  width: 10rem;
+}
+.composer-mermaid-svg svg {
+  height: 100%;
+  width: 100%;
+}
+.composer-mermaid-zoom {
+  position: absolute;
+  inset-inline-end: 0.25rem;
+  top: 0.25rem;
+  display: flex;
+  height: 1.25rem;
+  width: 1.25rem;
+  align-items: center;
+  justify-content: center;
+  border-radius: 9999px;
+  background: hsl(var(--foreground) / 0.7);
+  color: hsl(var(--background));
+  opacity: 0;
+  transition: opacity 0.15s ease;
+}
+.composer-mermaid-tile:hover .composer-mermaid-zoom {
+  opacity: 1;
+}
+.composer-mermaid-zoom svg {
+  height: 0.75rem;
+  width: 0.75rem;
+}
+.composer-mermaid-msg {
+  display: grid;
+  height: 6rem;
+  width: 10rem;
+  place-items: center;
+  padding: 0 0.75rem;
+  text-align: center;
+  font-size: 11px;
+  line-height: 1.35;
+  color: hsl(var(--muted-foreground));
+}
+.composer-mermaid-msg--error {
+  font-size: 10px;
+  color: hsl(var(--destructive));
+}
+.composer-mermaid-code {
+  border-radius: 0.25rem;
+  background: hsl(var(--muted));
+  padding-inline: 0.25rem;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+}
+
+/* ----------------------------------------------------------------------------
+ * Hint bar + keyboard chips.
+ * ------------------------------------------------------------------------- */
+.composer-hint {
+  text-align: center;
+  font-size: 11px;
+  color: hsl(var(--muted-foreground));
+}
+.composer-kbd {
+  border-radius: 0.25rem;
+  border: 1px solid hsl(var(--border));
+  background: hsl(var(--card));
+  padding: 0.0625rem 0.25rem;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 10px;
+}
+.composer-hint-sm,
+.composer-hint-md {
+  display: none;
+}
+@media (min-width: 640px) {
+  .composer-hint-sm {
+    display: inline;
+  }
+}
+@media (min-width: 768px) {
+  .composer-hint-md {
+    display: inline;
+  }
+}
+
+/* ----------------------------------------------------------------------------
+ * Quick-prompt + suggestion chip rows.
+ * ------------------------------------------------------------------------- */
+.composer-prompts {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0 0.25rem 0.25rem;
+}
+.composer-suggestions {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 0.5rem;
+}
+.composer-prompt,
+.composer-suggestion {
+  display: inline-flex;
+  max-width: 100%;
+  align-items: center;
+  gap: 0.375rem;
+  border-radius: 9999px;
+  border: 1px solid hsl(var(--border));
+  background: hsl(var(--card) / 0.6);
+  padding: 0.375rem 0.875rem;
+  font-size: 0.75rem;
+  color: hsl(var(--muted-foreground));
+  backdrop-filter: blur(4px);
+  cursor: pointer;
+  transition: transform 0.15s ease, border-color 0.15s ease,
+    background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
+}
+.composer-prompt:hover,
+.composer-suggestion:hover {
+  transform: translateY(-1px);
+  border-color: hsl(var(--primary) / 0.4);
+  background: hsl(var(--card));
+  color: hsl(var(--foreground));
+  box-shadow: 0 1px 2px hsl(220 13% 10% / 0.1);
+}
+.composer-prompt:focus-visible,
+.composer-suggestion:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 2px hsl(var(--primary) / 0.4);
+}
+.composer-prompt svg,
+.composer-suggestion svg {
+  height: 0.75rem;
+  width: 0.75rem;
+  flex: none;
+  color: hsl(var(--primary));
+  opacity: 0.7;
+  transition: opacity 0.15s ease;
+}
+.composer-prompt:hover svg,
+.composer-suggestion:hover svg {
+  opacity: 1;
+}
+.composer-prompt-text {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* ----------------------------------------------------------------------------
+ * Tooltip.
+ * ------------------------------------------------------------------------- */
+.composer-tooltip-wrap {
+  position: relative;
+  display: inline-flex;
+}
+.composer-tooltip {
+  position: absolute;
+  z-index: 50;
+  white-space: nowrap;
+  border-radius: 0.375rem;
+  background: hsl(var(--foreground));
+  padding: 0.25rem 0.5rem;
+  font-size: 0.75rem;
+  color: hsl(var(--background));
+  box-shadow: var(--composer-shadow-soft);
+}
+.composer-tooltip--top {
+  bottom: 100%;
+  left: 50%;
+  margin-bottom: 0.5rem;
+  transform: translateX(-50%);
+}
+.composer-tooltip--bottom {
+  top: 100%;
+  left: 50%;
+  margin-top: 0.5rem;
+  transform: translateX(-50%);
+}
+.composer-tooltip--left {
+  inset-inline-end: 100%;
+  top: 50%;
+  margin-inline-end: 0.5rem;
+  transform: translateY(-50%);
+}
+.composer-tooltip--right {
+  inset-inline-start: 100%;
+  top: 50%;
+  margin-inline-start: 0.5rem;
+  transform: translateY(-50%);
 }