@atelier-ui/react 0.1.10 → 0.1.12

package/src/lib/button/llm-button.css

@@ -0,0 +1,139 @@
+.llm-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--ui-spacing-2);
+  border: 1px solid transparent;
+  border-radius: var(--ui-radius-md);
+  font-family: var(--ui-font-family);
+  font-size: var(--ui-font-size-md);
+  font-weight: var(--ui-font-weight-semibold);
+  line-height: var(--ui-line-height-tight);
+  letter-spacing: -0.01em;
+  cursor: pointer;
+  transition: background-color var(--ui-transition-fast),
+    border-color var(--ui-transition-fast),
+    color var(--ui-transition-fast),
+    box-shadow var(--ui-transition-fast);
+  white-space: nowrap;
+  text-decoration: none;
+  user-select: none;
+}
+
+.llm-button:focus-visible {
+  outline: none;
+  box-shadow: var(--ui-focus-ring);
+}
+
+/* Variants — flat by default; subtle state shifts only */
+.llm-button.variant-primary {
+  background-color: var(--ui-color-primary);
+  color: var(--ui-color-text-on-primary);
+  border-color: var(--ui-color-primary);
+}
+
+.llm-button.variant-primary:hover:not(.is-disabled) {
+  background-color: var(--ui-color-primary-hover);
+  border-color: var(--ui-color-primary-hover);
+}
+
+.llm-button.variant-primary:active:not(.is-disabled) {
+  background-color: var(--ui-color-primary-active);
+  border-color: var(--ui-color-primary-active);
+}
+
+.llm-button.variant-secondary {
+  background-color: var(--ui-color-secondary);
+  color: var(--ui-color-text-on-secondary);
+  border-color: var(--ui-color-secondary);
+}
+
+.llm-button.variant-secondary:hover:not(.is-disabled) {
+  background-color: var(--ui-color-secondary-hover);
+  border-color: var(--ui-color-secondary-hover);
+}
+
+.llm-button.variant-secondary:active:not(.is-disabled) {
+  background-color: var(--ui-color-secondary-active);
+  border-color: var(--ui-color-secondary-active);
+}
+
+.llm-button.variant-outline {
+  background-color: var(--ui-color-surface-raised);
+  color: var(--ui-color-primary);
+  border-color: var(--ui-color-border-strong);
+}
+
+.llm-button.variant-outline:hover:not(.is-disabled) {
+  background-color: var(--ui-color-surface-sunken);
+  border-color: var(--ui-color-primary);
+}
+
+.llm-button.variant-outline:active:not(.is-disabled) {
+  background-color: var(--ui-color-surface-sunken);
+  border-color: var(--ui-color-primary-active);
+}
+
+/* Non-color differentiation (WCAG 1.4.1): danger variant carries
+ * a darker inset border so its silhouette is recognizable in greyscale
+ * and color-blind simulations, not only by red fill. */
+.llm-button.variant-danger {
+  background-color: var(--ui-color-danger);
+  color: var(--ui-color-text-on-danger);
+  border-color: var(--ui-color-danger);
+  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.18);
+}
+
+.llm-button.variant-danger:hover:not(.is-disabled) {
+  background-color: var(--ui-color-danger-hover);
+  border-color: var(--ui-color-danger-hover);
+  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.18);
+}
+
+.llm-button.variant-danger:active:not(.is-disabled) {
+  background-color: var(--ui-color-danger-active);
+  border-color: var(--ui-color-danger-active);
+  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.18);
+}
+
+/* Sizes — modern target heights (sm 32px / md 40px / lg 48px) */
+.llm-button.size-sm {
+  padding: 0.375rem 0.875rem;
+  font-size: var(--ui-font-size-sm);
+  min-height: 2rem;
+}
+
+.llm-button.size-md {
+  padding: 0.5625rem 1.125rem;
+  font-size: var(--ui-font-size-md);
+  min-height: 2.5rem;
+}
+
+.llm-button.size-lg {
+  padding: 0.75rem 1.5rem;
+  font-size: var(--ui-font-size-lg);
+  min-height: 3rem;
+}
+
+/* Disabled */
+.llm-button.is-disabled {
+  opacity: var(--ui-opacity-disabled);
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+/* Loading spinner */
+.spinner {
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  border: 1.5px solid currentColor;
+  border-top-color: transparent;
+  border-radius: var(--ui-radius-full);
+  animation: llm-spin 0.7s linear infinite;
+  flex-shrink: 0;
+}
+
+@keyframes llm-spin {
+  to { transform: rotate(360deg); }
+}

package/src/lib/card/llm-card.css

@@ -0,0 +1,70 @@
+.llm-card {
+  display: block;
+  border-radius: var(--ui-radius-xl);
+  background-color: var(--ui-color-surface-raised);
+  overflow: hidden;
+}
+
+/* Modernised variants — single soft shadow on elevated, no shadow on
+ * outlined or flat. Cards rest on the page; they don't float off it. */
+.llm-card.variant-elevated {
+  box-shadow: var(--ui-shadow-sm);
+  border: 1px solid var(--ui-color-border);
+}
+
+.llm-card.variant-outlined {
+  border: 1px solid var(--ui-color-border);
+  background-color: var(--ui-color-surface-raised);
+}
+
+.llm-card.variant-flat {
+  background-color: var(--ui-color-surface-sunken);
+}
+
+/* Padding on .llm-card directly affects all slots */
+.llm-card.padding-none .llm-card-header,
+.llm-card.padding-none .llm-card-content,
+.llm-card.padding-none .llm-card-footer {
+  padding: 0;
+}
+
+.llm-card.padding-sm .llm-card-header,
+.llm-card.padding-sm .llm-card-content,
+.llm-card.padding-sm .llm-card-footer {
+  padding: var(--ui-spacing-4);
+}
+
+.llm-card.padding-md .llm-card-header,
+.llm-card.padding-md .llm-card-content,
+.llm-card.padding-md .llm-card-footer {
+  padding: var(--ui-spacing-6);
+}
+
+.llm-card.padding-lg .llm-card-header,
+.llm-card.padding-lg .llm-card-content,
+.llm-card.padding-lg .llm-card-footer {
+  padding: var(--ui-spacing-8);
+}
+
+/* Sub-component layouts */
+.llm-card-header {
+  display: block;
+  font-size: var(--ui-font-size-lg);
+  font-weight: var(--ui-font-weight-semibold);
+  color: var(--ui-color-text);
+  border-bottom: 1px solid var(--ui-color-border);
+  letter-spacing: var(--ui-letter-spacing-tight);
+}
+
+.llm-card-content {
+  display: block;
+  color: var(--ui-color-text);
+  line-height: var(--ui-line-height-normal);
+}
+
+.llm-card-footer {
+  display: flex;
+  align-items: center;
+  gap: var(--ui-spacing-3);
+  border-top: 1px solid var(--ui-color-border);
+}

package/src/lib/card/llm-card.d.ts

@@ -28,7 +28,7 @@ export interface LlmCardProps extends Omit<HTMLAttributes<HTMLDivElement>, 'role
 /**
  * A card component for grouping related content.
  */
-export declare function LlmCard({ variant, padding, children, className, ...rest }: LlmCardProps): import("react/jsx-runtime").JSX.Element;
+export declare function LlmCard({ variant, padding, children, className, ...rest }: LlmCardProps): import("react").JSX.Element;
 /**
  * The header component for an LlmCard.
  */
@@ -37,7 +37,7 @@ export declare function LlmCardHeader({ children, className, ...rest }: HTMLAttr
      * The content of the card header.
      */
     children?: ReactNode;
-}): import("react/jsx-runtime").JSX.Element;
+}): import("react").JSX.Element;
 /**
  * The main content component for an LlmCard.
  */
@@ -46,7 +46,7 @@ export declare function LlmCardContent({ children, className, ...rest }: HTMLAtt
      * The main content of the card.
      */
     children?: ReactNode;
-}): import("react/jsx-runtime").JSX.Element;
+}): import("react").JSX.Element;
 /**
  * The footer component for an LlmCard.
  */
@@ -55,5 +55,5 @@ export declare function LlmCardFooter({ children, className, ...rest }: HTMLAttr
      * The content of the card footer.
      */
     children?: ReactNode;
-}): import("react/jsx-runtime").JSX.Element;
+}): import("react").JSX.Element;
 //# sourceMappingURL=llm-card.d.ts.map

package/src/lib/card/llm-card.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"llm-card.d.ts","sourceRoot":"","sources":["../../../../../../libs/react/src/lib/card/llm-card.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClD,OAAO,KAAK,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AACxD,OAAO,gBAAgB,CAAC;AAExB;;GAEG;AACH,MAAM,WAAW,YACf,SAAQ,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,MAAM,CAAC,EAClD,WAAW;IACb;;OAEG;IACH,OAAO,CAAC,EAAE,UAAU,GAAG,UAAU,GAAG,MAAM,CAAC;IAC3C;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IACtC;;;;;OAKG;IACH,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;GAEG;AACH,wBAAgB,OAAO,CAAC,EACtB,OAAoB,EACpB,OAAc,EACd,QAAQ,EACR,SAAS,EACT,GAAG,IAAI,EACR,EAAE,YAAY,2CASd;AAED;;GAEG;AACH,wBAAgB,aAAa,CAAC,EAC5B,QAAQ,EACR,SAAS,EACT,GAAG,IAAI,EACR,EAAE,cAAc,CAAC,cAAc,CAAC,GAAG;IAClC;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,2CAMA;AAED;;GAEG;AACH,wBAAgB,cAAc,CAAC,EAC7B,QAAQ,EACR,SAAS,EACT,GAAG,IAAI,EACR,EAAE,cAAc,CAAC,cAAc,CAAC,GAAG;IAClC;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,2CAMA;AAED;;GAEG;AACH,wBAAgB,aAAa,CAAC,EAC5B,QAAQ,EACR,SAAS,EACT,GAAG,IAAI,EACR,EAAE,cAAc,CAAC,cAAc,CAAC,GAAG;IAClC;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,2CAMA"}
+{"version":3,"file":"llm-card.d.ts","sourceRoot":"","sources":["../../../../../../libs/react/src/lib/card/llm-card.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClD,OAAO,KAAK,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AACxD,OAAO,gBAAgB,CAAC;AAExB;;GAEG;AACH,MAAM,WAAW,YACf,SAAQ,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,MAAM,CAAC,EAClD,WAAW;IACb;;OAEG;IACH,OAAO,CAAC,EAAE,UAAU,GAAG,UAAU,GAAG,MAAM,CAAC;IAC3C;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IACtC;;;;;OAKG;IACH,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;GAEG;AACH,wBAAgB,OAAO,CAAC,EACtB,OAAoB,EACpB,OAAc,EACd,QAAQ,EACR,SAAS,EACT,GAAG,IAAI,EACR,EAAE,YAAY,+BASd;AAED;;GAEG;AACH,wBAAgB,aAAa,CAAC,EAC5B,QAAQ,EACR,SAAS,EACT,GAAG,IAAI,EACR,EAAE,cAAc,CAAC,cAAc,CAAC,GAAG;IAClC;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,+BAMA;AAED;;GAEG;AACH,wBAAgB,cAAc,CAAC,EAC7B,QAAQ,EACR,SAAS,EACT,GAAG,IAAI,EACR,EAAE,cAAc,CAAC,cAAc,CAAC,GAAG;IAClC;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,+BAMA;AAED;;GAEG;AACH,wBAAgB,aAAa,CAAC,EAC5B,QAAQ,EACR,SAAS,EACT,GAAG,IAAI,EACR,EAAE,cAAc,CAAC,cAAc,CAAC,GAAG;IAClC;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,+BAMA"}

package/src/lib/chat/llm-chat.css

@@ -0,0 +1,446 @@
+/* ── Host wrapper ──────────────────────────────────────────────────────────── */
+.llm-chat {
+  display: contents;
+}
+
+/* ── Shared surface (header / messages / input column) ─────────────────────── */
+.llm-chat .surface {
+  display: flex;
+  flex-direction: column;
+  background: var(--ui-color-surface);
+  color: var(--ui-color-text);
+  overflow: hidden;
+}
+
+/* ═══════════════════════════════════════════════════════════════════════════ */
+/* DRAWER variant                                                              */
+/* ═══════════════════════════════════════════════════════════════════════════ */
+.llm-chat.variant-drawer dialog {
+  all: unset;
+  position: fixed;
+  inset: 0 0 0 auto;
+  height: 100dvh;
+  width: 28rem;
+  display: none;
+  flex-direction: column;
+  background: var(--ui-color-surface);
+  box-shadow: var(--ui-shadow-xl, -8px 0 32px rgba(0, 0, 0, 0.12));
+  color: var(--ui-color-text);
+  overflow: hidden;
+  transform: translateX(100%);
+  transition:
+    transform var(--ui-duration-slow) var(--ui-ease-out, ease-out),
+    display var(--ui-duration-slow) allow-discrete,
+    overlay var(--ui-duration-slow) allow-discrete;
+}
+
+.llm-chat.variant-drawer dialog[open] {
+  display: flex;
+  transform: translateX(0);
+}
+
+@starting-style {
+  .llm-chat.variant-drawer dialog[open] {
+    transform: translateX(100%);
+  }
+}
+
+.llm-chat.variant-drawer dialog::backdrop {
+  background: var(--ui-color-overlay);
+  backdrop-filter: blur(2px);
+  transition:
+    opacity var(--ui-duration-slow) var(--ui-ease-out, ease-out),
+    display var(--ui-duration-slow) allow-discrete,
+    overlay var(--ui-duration-slow) allow-discrete;
+}
+
+.llm-chat.variant-drawer .drawer-surface {
+  width: 100%;
+  height: 100%;
+}
+
+/* ═══════════════════════════════════════════════════════════════════════════ */
+/* POPUP variant                                                               */
+/* ═══════════════════════════════════════════════════════════════════════════ */
+.llm-chat.variant-popup .popup-surface {
+  position: fixed;
+  bottom: calc(var(--ui-spacing-6) + 3.5rem + var(--ui-spacing-4));
+  right: var(--ui-spacing-6);
+  width: 23.75rem;
+  height: 35rem;
+  border-radius: var(--ui-radius-xl);
+  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
+  z-index: 100;
+}
+
+.llm-chat.variant-popup .fab-bubble {
+  position: fixed;
+  bottom: var(--ui-spacing-6);
+  right: var(--ui-spacing-6);
+  width: 3.5rem;
+  height: 3.5rem;
+  border-radius: var(--ui-radius-full);
+  background: var(--ui-color-brand-ai, #b5e61c);
+  color: var(--ui-color-text);
+  border: none;
+  font-family: var(--ui-font-family);
+  font-size: var(--ui-font-size-lg);
+  font-weight: var(--ui-font-weight-semibold);
+  cursor: pointer;
+  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
+  transition:
+    transform var(--ui-transition-fast),
+    box-shadow var(--ui-transition-fast);
+  z-index: 101;
+}
+
+.llm-chat.variant-popup .fab-bubble:hover {
+  transform: scale(1.05);
+  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.22);
+}
+
+.llm-chat.variant-popup .fab-bubble:focus-visible {
+  outline: none;
+  box-shadow: var(--ui-focus-ring), 0 6px 16px rgba(0, 0, 0, 0.18);
+}
+
+/* ═══════════════════════════════════════════════════════════════════════════ */
+/* INLINE variant                                                              */
+/* ═══════════════════════════════════════════════════════════════════════════ */
+.llm-chat.variant-inline .inline-surface {
+  width: 100%;
+  height: 100%;
+  min-height: 24rem;
+  border: 1px solid var(--ui-color-border);
+  border-radius: var(--ui-radius-xl);
+}
+
+.llm-chat.variant-inline .llm-chat-header .close-btn {
+  display: none;
+}
+
+/* ═══════════════════════════════════════════════════════════════════════════ */
+/* SUB-COMPONENT: header                                                       */
+/* ═══════════════════════════════════════════════════════════════════════════ */
+.llm-chat-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--ui-spacing-3);
+  padding: var(--ui-spacing-3) var(--ui-spacing-4);
+  border-bottom: 1px solid var(--ui-color-border);
+  flex-shrink: 0;
+}
+
+.llm-chat-header .title-block {
+  display: flex;
+  align-items: center;
+  gap: var(--ui-spacing-3);
+  font-size: var(--ui-font-size-md);
+  font-weight: var(--ui-font-weight-semibold);
+  color: var(--ui-color-text);
+  letter-spacing: var(--ui-letter-spacing-tight);
+  flex: 1;
+  min-width: 0;
+}
+
+.llm-chat-header .close-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 2rem;
+  height: 2rem;
+  padding: 0;
+  background: transparent;
+  border: 1px solid var(--ui-color-border);
+  border-radius: var(--ui-radius-sm);
+  cursor: pointer;
+  color: var(--ui-color-text-muted);
+  transition:
+    background-color var(--ui-transition-fast),
+    color var(--ui-transition-fast);
+}
+
+.llm-chat-header .close-btn:hover {
+  background-color: var(--ui-color-surface-sunken);
+  color: var(--ui-color-text);
+}
+
+.llm-chat-header .close-btn:focus-visible {
+  outline: none;
+  box-shadow: var(--ui-focus-ring);
+}
+
+/* ═══════════════════════════════════════════════════════════════════════════ */
+/* SUB-COMPONENT: messages                                                     */
+/* ═══════════════════════════════════════════════════════════════════════════ */
+.llm-chat-messages {
+  display: flex;
+  flex-direction: column;
+  gap: var(--ui-spacing-3);
+  padding: var(--ui-spacing-4);
+  overflow-y: auto;
+  overflow-anchor: auto;
+  scroll-behavior: smooth;
+  flex: 1;
+  background: var(--ui-color-surface);
+}
+
+/* ═══════════════════════════════════════════════════════════════════════════ */
+/* SUB-COMPONENT: message bubble                                               */
+/* ═══════════════════════════════════════════════════════════════════════════ */
+.llm-chat-message {
+  display: block;
+  max-width: 85%;
+  padding: var(--ui-spacing-3) var(--ui-spacing-4);
+  border-radius: var(--ui-radius-lg);
+  font-size: var(--ui-font-size-sm);
+  line-height: var(--ui-line-height-normal);
+  word-wrap: break-word;
+}
+
+.llm-chat-message.role-assistant,
+.llm-chat-message.role-system {
+  background: var(--ui-color-surface-sunken);
+  color: var(--ui-color-text);
+  align-self: flex-start;
+}
+
+.llm-chat-message.role-user {
+  background: var(--ui-color-primary);
+  color: var(--ui-color-text-on-primary);
+  align-self: flex-end;
+}
+
+.llm-chat-message.role-system {
+  font-style: italic;
+  color: var(--ui-color-text-muted);
+}
+
+.llm-chat-message.is-failed {
+  background: var(--ui-color-surface-sunken);
+  border: 1px dashed var(--ui-color-danger);
+  color: var(--ui-color-text);
+}
+
+/* ═══════════════════════════════════════════════════════════════════════════ */
+/* SUB-COMPONENT: typing indicator                                             */
+/* ═══════════════════════════════════════════════════════════════════════════ */
+.llm-chat-typing {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--ui-spacing-1);
+  padding: var(--ui-spacing-2) var(--ui-spacing-3);
+  background: var(--ui-color-surface-sunken);
+  border-radius: var(--ui-radius-lg);
+  align-self: flex-start;
+}
+
+.llm-chat-typing .dot {
+  width: 0.375rem;
+  height: 0.375rem;
+  border-radius: 50%;
+  background: var(--ui-color-text-muted);
+  animation: llm-chat-typing 1.4s infinite ease-in-out;
+}
+
+.llm-chat-typing .dot:nth-child(2) {
+  animation-delay: 0.16s;
+}
+
+.llm-chat-typing .dot:nth-child(3) {
+  animation-delay: 0.32s;
+}
+
+/* Inline cursor variant — drops the bubble chrome so the dots can sit at the
+   end of a streaming assistant message. */
+.llm-chat-typing.is-inline {
+  display: inline-flex;
+  padding: 0;
+  margin-left: var(--ui-spacing-1);
+  background: transparent;
+  border-radius: 0;
+  vertical-align: baseline;
+  align-self: auto;
+}
+
+.llm-chat-typing.is-inline .dot {
+  width: 0.25rem;
+  height: 0.25rem;
+}
+
+@keyframes llm-chat-typing {
+  0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
+  30% { opacity: 1; transform: translateY(-2px); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .llm-chat-typing .dot {
+    animation: none;
+    opacity: 0.6;
+  }
+}
+
+.llm-chat-typing .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;
+}
+
+/* ═══════════════════════════════════════════════════════════════════════════ */
+/* SUB-COMPONENT: suggestion chip                                              */
+/* ═══════════════════════════════════════════════════════════════════════════ */
+.llm-chat-suggestion {
+  display: block;
+}
+
+.llm-chat-suggestion .chip {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--ui-spacing-1);
+  width: 100%;
+  padding: var(--ui-spacing-3) var(--ui-spacing-4);
+  background: var(--ui-color-surface);
+  color: var(--ui-color-text);
+  border: 1px solid var(--ui-color-border);
+  border-radius: var(--ui-radius-lg);
+  font-family: var(--ui-font-family);
+  text-align: left;
+  cursor: pointer;
+  transition:
+    background-color var(--ui-transition-fast),
+    border-color var(--ui-transition-fast);
+}
+
+.llm-chat-suggestion .chip:hover {
+  background-color: var(--ui-color-surface-sunken);
+  border-color: var(--ui-color-border-hover);
+}
+
+.llm-chat-suggestion .chip:focus-visible {
+  outline: none;
+  box-shadow: var(--ui-focus-ring);
+}
+
+.llm-chat-suggestion .chip-label {
+  font-size: var(--ui-font-size-sm);
+  font-weight: var(--ui-font-weight-medium);
+  color: var(--ui-color-text);
+}
+
+.llm-chat-suggestion .chip-hint {
+  font-size: var(--ui-font-size-xs);
+  color: var(--ui-color-text-muted);
+}
+
+/* ═══════════════════════════════════════════════════════════════════════════ */
+/* SUB-COMPONENT: input footer                                                 */
+/* ═══════════════════════════════════════════════════════════════════════════ */
+.llm-chat-input {
+  display: flex;
+  align-items: flex-end;
+  gap: var(--ui-spacing-2);
+  padding: var(--ui-spacing-3) var(--ui-spacing-4);
+  border-top: 1px solid var(--ui-color-border);
+  background: var(--ui-color-surface);
+  flex-shrink: 0;
+}
+
+.llm-chat-input .field {
+  flex: 1;
+  min-width: 0;
+  padding: var(--ui-spacing-2) var(--ui-spacing-3);
+  border: 1px solid var(--ui-color-input-border, var(--ui-color-border));
+  border-radius: var(--ui-radius-md);
+  background: var(--ui-color-surface-sunken);
+  color: var(--ui-color-text);
+  font-family: var(--ui-font-family);
+  font-size: var(--ui-font-size-sm);
+  line-height: var(--ui-line-height-normal);
+  resize: none;
+  transition: border-color var(--ui-transition-fast);
+}
+
+.llm-chat-input .field::placeholder {
+  color: var(--ui-color-text-muted);
+}
+
+.llm-chat-input .field:hover:not(:disabled) {
+  border-color: var(--ui-color-input-border-hover, var(--ui-color-border-hover));
+}
+
+.llm-chat-input .field:focus-visible {
+  outline: none;
+  border-color: var(--ui-color-primary);
+  box-shadow: var(--ui-focus-ring);
+}
+
+.llm-chat-input .field:disabled {
+  opacity: var(--ui-opacity-disabled);
+  cursor: not-allowed;
+}
+
+.llm-chat-input .action-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  padding: var(--ui-spacing-2) var(--ui-spacing-4);
+  border: 1px solid transparent;
+  border-radius: var(--ui-radius-md);
+  font-family: var(--ui-font-family);
+  font-size: var(--ui-font-size-sm);
+  font-weight: var(--ui-font-weight-medium);
+  cursor: pointer;
+  transition:
+    background-color var(--ui-transition-fast),
+    border-color var(--ui-transition-fast),
+    transform var(--ui-transition-fast);
+}
+
+.llm-chat-input .action-btn.variant-primary {
+  background: var(--ui-color-primary);
+  color: var(--ui-color-text-on-primary);
+  border-color: var(--ui-color-primary);
+}
+
+.llm-chat-input .action-btn.variant-primary:hover:not(:disabled) {
+  background: var(--ui-color-primary-hover);
+  border-color: var(--ui-color-primary-hover);
+}
+
+.llm-chat-input .action-btn.variant-danger {
+  background: var(--ui-color-danger);
+  color: var(--ui-color-text-on-danger);
+  border-color: var(--ui-color-danger);
+}
+
+.llm-chat-input .action-btn.variant-danger:hover {
+  background: var(--ui-color-danger-hover);
+  border-color: var(--ui-color-danger-hover);
+}
+
+.llm-chat-input .action-btn:disabled {
+  opacity: var(--ui-opacity-disabled);
+  cursor: not-allowed;
+}
+
+.llm-chat-input .action-btn:focus-visible {
+  outline: none;
+  box-shadow: var(--ui-focus-ring);
+}
+
+/* ═══════════════════════════════════════════════════════════════════════════ */
+/* STATUS-aware tweaks                                                         */
+/* ═══════════════════════════════════════════════════════════════════════════ */
+.llm-chat.status-streaming .llm-chat-input .field {
+  cursor: wait;
+}