@smart-cloud/ai-kit-ui 1.0.3 → 1.1.0

package/src/styles/ai-kit-ui.css

@@ -1,32 +1,193 @@
+/* ==========================================================================
+   WP Suite AI Kit UI – Customizable Design Tokens (v2.1)
+   - External customization via --ai-kit-* variables
+   - Unified launcher + chat positioning (single source of truth via variables)
+   - Default squared corners everywhere (radius = 0), optional launcher override
+   - Mantine Button radius override supported via --button-radius
+   ========================================================================== */
+
 :host {
-  --ai-kit-border-width: 1px;
+  /* ---------------------------
+     0) Core typography & rhythm
+     --------------------------- */
+  --ai-kit-font-family:
+    Archivo, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
+    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+
+  /* Base font sizes */
+  --ai-kit-font-size: 14px;
+  --ai-kit-font-size-sm: 0.85rem;
+  --ai-kit-font-size-xs: 0.78rem;
+  --ai-kit-font-size-title: 0.9rem;
+
+  --ai-kit-line-height: 1.4;
+
+  /* Spacing scale */
+  --ai-kit-space-1: 4px;
+  --ai-kit-space-2: 8px;
+  --ai-kit-space-3: 12px;
+  --ai-kit-space-4: 16px;
+  --ai-kit-space-5: 20px;
+
+  /* Back-compat aliases */
+  --ai-kit-spacing-sm: var(--ai-kit-space-2);
+  --ai-kit-spacing-md: var(--ai-kit-space-3);
+  --ai-kit-spacing-lg: var(--ai-kit-space-4);
+
+  /* Radius
+     IMPORTANT: default squared corners everywhere */
+  --ai-kit-radius: 0px;
+  --ai-kit-radius-sm: 8px;
+  --ai-kit-radius-pill: 999px;
+  --ai-kit-radius-round: 50%;
 
-  --ai-kit-border-color: var(
+  /* Launcher can override independently */
+  --ai-kit-launcher-radius: var(--ai-kit-radius-sm);
+
+  /* Useful “bridge” vars */
+  --ai-kit-button-padding-x: var(--button-padding-x, 12px);
+  --ai-kit-input-padding-x: var(--input-padding-x, 12px);
+
+  /* ---------------------------
+     1) Semantic color tokens
+     --------------------------- */
+  --ai-kit-color-text: var(--mantine-color-text, #222);
+  --ai-kit-color-text-muted: rgba(0, 0, 0, 0.6);
+  --ai-kit-color-border: var(
     --mantine-color-default-border,
     rgba(0, 0, 0, 0.12)
   );
-  --ai-kit-text-color: var(
-    --mantine-color-text,
-    var(--mantine-color-default-color)
-  );
+  --ai-kit-color-border-muted: rgba(0, 0, 0, 0.18);
+
+  --ai-kit-color-surface: var(--mantine-color-body, #fff);
+  --ai-kit-color-surface-2: rgba(235, 235, 235, 0.15);
+  --ai-kit-color-surface-3: rgba(0, 0, 0, 0.03);
+
+  --ai-kit-color-danger: #c92a2a;
+  --ai-kit-color-warning: #f59e0b;
+  --ai-kit-color-success: #22c55e;
+
+  /* Brand / primary */
+  --ai-kit-color-primary: #228be6;
+  --ai-kit-color-primary-hover: #1971c2;
+  --ai-kit-color-primary-contrast: #fff;
 
-  --ai-kit-background-color: var(--mantine-color-body);
-  --ai-kit-options-background-color: rgba(235, 235, 235, 0.15);
+  /* Back-compat aliases (existing names) */
+  --ai-kit-text-color: var(--ai-kit-color-text);
+  --ai-kit-background-color: var(--ai-kit-color-surface);
+  --ai-kit-options-background-color: var(--ai-kit-color-surface-2);
+
+  --ai-kit-color-text-light: var(--ai-kit-color-text-muted);
+  --ai-kit-color-border-light: rgba(0, 0, 0, 0.1);
+  --ai-kit-color-background: var(--ai-kit-color-surface);
+  --ai-kit-color-background-light: var(--ai-kit-color-surface-3);
+  --ai-kit-color-background-lighter: rgba(0, 0, 0, 0.04);
+  --ai-kit-color-background-input: rgba(0, 0, 0, 0.06);
+
+  /* ---------------------------
+     2) Shadows
+     --------------------------- */
+  --ai-kit-shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.15);
+  --ai-kit-shadow-sm-hover: 0 6px 16px rgba(0, 0, 0, 0.2);
+
+  /* ---------------------------
+     3) Feature border animation tokens
+     --------------------------- */
+  --ai-kit-border-width: 1px;
+  --ai-kit-border-color: var(--ai-kit-color-border);
 
-  --ai-kit-border-radius: var(--paper-radius);
   --ai-kit-border-thickness: 2px;
   --ai-kit-border-speed: 1400ms;
   --ai-kit-border-angle: 0deg;
+
+  --ai-kit-border-gradient: conic-gradient(
+    from var(--ai-kit-border-angle, 0deg) at 50% 50%,
+    #00c2ff,
+    #7c3aed,
+    #22c55e,
+    #f59e0b,
+    #00c2ff
+  );
+
+  --ai-kit-position-z-index: 100001;
+
+  /* default offsets */
+  --ai-kit-open-button-offset-x: 20px;
+  --ai-kit-open-button-offset-y: 20px;
+
+  /* The active position values (set by wrapper variants) */
+  --ai-kit-pos-top: auto;
+  --ai-kit-pos-right: var(--ai-kit-open-button-offset-x);
+  --ai-kit-pos-bottom: var(--ai-kit-open-button-offset-y);
+  --ai-kit-pos-left: auto;
+
+  /* Sizing */
+  --ai-kit-chat-launcher-size: 60px;
+
+  --ai-kit-chat-width: 400px;
+  --ai-kit-chat-height-min: 360px;
+  --ai-kit-chat-height-max: 80vh;
+  --ai-kit-chat-height-cap: 1000px;
+
+  /* Launcher colors */
+  --ai-kit-launcher-bg: var(--ai-kit-color-primary);
+  --ai-kit-launcher-color: var(--ai-kit-color-primary-contrast);
+  --ai-kit-launcher-bg-hover: var(--ai-kit-color-primary-hover);
+  --ai-kit-launcher-shadow: var(--ai-kit-shadow-sm);
+  --ai-kit-launcher-shadow-hover: var(--ai-kit-shadow-sm-hover);
+
+  /* Chat surface & borders */
+  --ai-kit-chat-surface: var(--ai-kit-color-background);
+  --ai-kit-chat-surface-subtle: var(--ai-kit-color-background-light);
+  --ai-kit-chat-border-color: var(--ai-kit-color-border);
+  --ai-kit-chat-border-radius: var(--ai-kit-radius-sm);
+
+  /* Icon color in header actions */
+  --ai-kit-chat-icon-color: var(--ai-kit-color-text);
+
+  /* Status */
+  --ai-kit-chat-status-bg: rgba(255, 255, 255, 0.95);
+  --ai-kit-chat-status-fg: var(--ai-kit-color-text-muted);
+
+  /* Bubbles */
+  --ai-kit-user-bubble-bg: var(--ai-kit-color-primary);
+  --ai-kit-user-bubble-color: var(--ai-kit-color-primary-contrast);
+  --ai-kit-assistant-bubble-bg: rgba(0, 0, 0, 0.05);
+  --ai-kit-assistant-bubble-color: inherit;
+
+  /* Markdown */
+  --ai-kit-chat-code-bg: rgba(0, 0, 0, 0.1);
+  --ai-kit-chat-pre-bg: rgba(0, 0, 0, 0.05);
+
+  /* Close button */
+  --ai-kit-chat-close-bg: var(--ai-kit-color-background-lighter);
+  --ai-kit-chat-close-bg-hover: rgba(0, 0, 0, 0.07);
+
+  /* Typing */
+  --ai-kit-chat-typing-dot-color: #adb5bd;
+
+  /* Feedback */
+  --ai-kit-chat-feedback-bg: var(--ai-kit-color-background-lighter);
+  --ai-kit-chat-feedback-border: var(--ai-kit-color-border);
+  --ai-kit-chat-feedback-active-bg: #ffd43b;
+
+  /* Typography apply */
+  font-family: var(--ai-kit-font-family);
 }
 
+/* Variation defaults */
 :host[data-ai-kit-variation="default"] {
   --ai-kit-background-color: transparent;
 }
 
+/* ==========================================================================
+   AI Feature
+   ========================================================================== */
+
 .ai-feature-root {
-  --mb-z-index: var(--ai-kit-z-index, 100000) !important;
+  --mb-z-index: var(--ai-kit-position-z-index) !important;
   border: var(--ai-kit-border-width) solid var(--ai-kit-border-color);
-  border-radius: var(--ai-kit-border-radius);
+  border-radius: var(--ai-kit-radius);
 }
 
 .ai-feature-root .Mantine-Paper-root {
@@ -37,12 +198,13 @@
   width: 24px;
   height: 24px;
   fill: none;
-  margin-right: 8px;
+  margin-right: var(--ai-kit-space-2);
 }
 
 .ai-feature-open-button-no-title {
-  padding-inline-start: var(--button-padding-x);
+  padding-inline-start: var(--ai-kit-button-padding-x);
 }
+
 .ai-feature-open-button-no-title .mantine-Button-section {
   margin-inline-end: unset;
 }
@@ -50,8 +212,8 @@
 .ai-feature-options {
   background-color: var(--ai-kit-options-background-color);
   border: var(--ai-kit-border-width) solid var(--ai-kit-border-color);
-  border-radius: var(--ai-kit-border-radius);
-  font-size: var(--mantine-font-size-xs);
+  border-radius: var(--ai-kit-radius-sm);
+  font-size: var(--ai-kit-font-size-xs);
   cursor: pointer;
 }
 
@@ -69,41 +231,45 @@
 }
 
 .ai-feature-status-text {
-  font-size: var(--mantine-font-size-xs);
+  font-size: var(--ai-kit-font-size-xs);
   opacity: 0.85;
 }
 
 .ai-feature-generated-content {
   border: var(--ai-kit-border-width) solid var(--ai-kit-border-color);
-  border-radius: var(--ai-kit-border-radius);
+  border-radius: var(--ai-kit-radius);
   white-space: normal;
   background-color: var(--ai-kit-options-background-color);
   max-height: 400px;
   overflow: auto;
-  padding: var(--mantine-spacing-sm);
-  font-size: var(--mantine-font-size-sm);
-  line-height: var(--mantine-line-height-sm);
+  padding: var(--ai-kit-space-2);
+  font-size: var(--ai-kit-font-size);
+  line-height: var(--ai-kit-line-height);
 }
+
 .ai-feature-generated-content * {
   margin-block-start: auto;
   margin-block-end: auto;
 }
+
 .ai-feature-generated-content.ai-feature-preview,
 .ai-feature-generated-content.ai-feature-editor {
   max-height: 200px;
 }
+
 .ai-feature-generated-content.ai-feature-editor textarea {
   border: 0;
   max-height: 198px;
   resize: vertical;
 }
 
+/* Animated border wrapper */
 .ai-kit-feature-border {
   background-color: var(--ai-kit-background-color);
   position: relative;
   overflow: visible;
   padding: var(--ai-kit-border-thickness);
-  border-radius: var(--ai-kit-border-radius);
+  border-radius: var(--ai-kit-radius);
   width: 100%;
   box-sizing: border-box;
 }
@@ -118,7 +284,7 @@
   position: absolute;
   inset: 0;
   z-index: 0;
-  border-radius: var(--ai-kit-border-radius);
+  border-radius: var(--ai-kit-radius);
   padding: var(--ai-kit-border-thickness);
 }
 
@@ -127,19 +293,9 @@
   position: absolute;
   inset: 0;
   z-index: 0;
-  border-radius: var(--ai-kit-border-radius);
+  border-radius: var(--ai-kit-radius);
   padding: var(--ai-kit-border-thickness);
-  background: var(
-    --ai-kit-border-gradient,
-    conic-gradient(
-      from var(--ai-kit-border-angle, 0deg) at 50% 50%,
-      #00c2ff,
-      #7c3aed,
-      #22c55e,
-      #f59e0b,
-      #00c2ff
-    )
-  );
+  background: var(--ai-kit-border-gradient);
   animation: ai-kit-border-run var(--ai-kit-border-speed) linear infinite;
   -webkit-mask:
     linear-gradient(#000 0 0) content-box,
@@ -173,11 +329,11 @@
   }
 }
 
-/* AiResult inner padding so content doesn't touch the animated border */
+/* Actions layout */
 .ai-kit-actions {
   display: flex;
   width: 100%;
-  gap: var(--ai-kit-actions-gap, 8px);
+  gap: var(--ai-kit-actions-gap, var(--ai-kit-space-2));
   justify-content: flex-end;
   flex-wrap: wrap;
 }
@@ -199,3 +355,504 @@
     min-width: 0;
   }
 }
+
+/* ==========================================================================
+   AI Chatbot
+   ========================================================================== */
+
+/* Wrapper does not position; it only sets variables for the chosen corner */
+.ai-docs-ask {
+  display: contents;
+}
+
+.ai-docs-ask.ai-open-btn--bottom-right {
+  --ai-kit-pos-top: auto;
+  --ai-kit-pos-right: var(--ai-kit-open-button-offset-x);
+  --ai-kit-pos-bottom: var(--ai-kit-open-button-offset-y);
+  --ai-kit-pos-left: auto;
+}
+
+.ai-docs-ask.ai-open-btn--bottom-left {
+  --ai-kit-pos-top: auto;
+  --ai-kit-pos-right: auto;
+  --ai-kit-pos-bottom: var(--ai-kit-open-button-offset-y);
+  --ai-kit-pos-left: var(--ai-kit-open-button-offset-x);
+}
+
+.ai-docs-ask.ai-open-btn--top-right {
+  --ai-kit-pos-top: var(--ai-kit-open-button-offset-y);
+  --ai-kit-pos-right: var(--ai-kit-open-button-offset-x);
+  --ai-kit-pos-bottom: auto;
+  --ai-kit-pos-left: auto;
+}
+
+.ai-docs-ask.ai-open-btn--top-left {
+  --ai-kit-pos-top: var(--ai-kit-open-button-offset-y);
+  --ai-kit-pos-right: auto;
+  --ai-kit-pos-bottom: auto;
+  --ai-kit-pos-left: var(--ai-kit-open-button-offset-x);
+}
+
+.ai-docs-ask.ai-open-btn--bottom-right .ai-chat-container {
+  transform-origin: bottom right;
+}
+.ai-docs-ask.ai-open-btn--bottom-left .ai-chat-container {
+  transform-origin: bottom left;
+}
+.ai-docs-ask.ai-open-btn--top-right .ai-chat-container {
+  transform-origin: top right;
+}
+.ai-docs-ask.ai-open-btn--top-left .ai-chat-container {
+  transform-origin: top left;
+}
+
+/* Launcher Button (closed state)
+   Note: This is a Mantine Button; ensure radius works by also overriding --button-radius */
+.ai-launcher-button {
+  position: fixed;
+  top: var(--ai-kit-pos-top, auto);
+  right: var(--ai-kit-pos-right, auto);
+  bottom: var(--ai-kit-pos-bottom, auto);
+  left: var(--ai-kit-pos-left, auto);
+
+  z-index: var(--ai-kit-position-z-index);
+
+  width: var(--ai-kit-chat-launcher-size);
+  height: var(--ai-kit-chat-launcher-size);
+
+  /* Radius: apply both border-radius and Mantine variable */
+  border-radius: var(--ai-kit-launcher-radius) !important;
+  --button-radius: var(--ai-kit-launcher-radius) !important;
+
+  border: none;
+  background: var(--ai-kit-launcher-bg);
+  color: var(--ai-kit-launcher-color);
+
+  cursor: pointer;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  gap: 2px;
+
+  box-shadow: var(--ai-kit-launcher-shadow);
+  transition:
+    transform 0.2s ease,
+    box-shadow 0.2s ease,
+    background 0.2s ease;
+
+  padding: 0;
+  pointer-events: auto;
+}
+
+.ai-launcher-button:hover {
+  transform: scale(1.1);
+  box-shadow: var(--ai-kit-launcher-shadow-hover);
+  background: var(--ai-kit-launcher-bg-hover);
+}
+
+.ai-launcher-button:active {
+  transform: scale(0.95);
+}
+
+.ai-launcher-button svg {
+  width: 24px;
+  height: 24px;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+.ai-launcher-text {
+  font-size: 10px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.3px;
+  line-height: 1;
+}
+
+/* Chat Container (open state) – same corner as launcher */
+.ai-chat-container {
+  position: fixed;
+  top: var(--ai-kit-pos-top, auto);
+  right: var(--ai-kit-pos-right, auto);
+  bottom: var(--ai-kit-pos-bottom, auto);
+  left: var(--ai-kit-pos-left, auto);
+
+  z-index: var(--ai-kit-position-z-index);
+
+  width: var(--ai-kit-chat-width);
+  min-height: var(--ai-kit-chat-height-min);
+  max-height: var(--ai-kit-chat-height-max);
+  max-width: calc(90vw - 40px);
+
+  border-radius: var(--ai-kit-chat-border-radius);
+  border: 1px solid var(--ai-kit-chat-border-color);
+  background: var(--ai-kit-chat-surface);
+  box-shadow: var(--ai-kit-launcher-shadow);
+
+  overflow: hidden;
+  display: flex;
+  pointer-events: auto;
+  gap: 0;
+
+  transition:
+    transform 0.28s ease,
+    opacity 0.2s ease;
+  will-change: transform;
+}
+
+.ai-chat-container.maximized {
+  top: 0 !important;
+  right: 0 !important;
+  bottom: 0 !important;
+  left: 0 !important;
+
+  width: 100vw !important;
+  height: 100vh !important;
+  max-width: 100vw !important;
+  max-height: 100vh !important;
+  border-radius: 0;
+
+  transform: scale(1);
+  opacity: 1;
+}
+
+.ai-chat-container.maximized.ai-max-enter {
+  transform: scale(0.2);
+  opacity: 0.9;
+}
+
+.ai-chat-container-internal {
+  display: flex;
+  width: 100%;
+  max-width: 1300px;
+  margin-right: auto;
+  margin-left: auto;
+  flex-direction: column;
+}
+
+/* Input Box */
+.ai-box-open {
+  gap: var(--ai-kit-space-2);
+  padding: var(--ai-kit-space-4);
+  border-top: 1px solid var(--ai-kit-color-border-light);
+  background: var(--ai-kit-chat-surface-subtle);
+  margin-top: auto;
+}
+
+/* Responsive tweaks */
+@media (max-width: 996px) {
+  :host {
+    --ai-kit-chat-launcher-size: 56px;
+  }
+
+  .ai-launcher-button svg {
+    width: 22px;
+    height: 22px;
+  }
+
+  .ai-chat-container {
+    width: calc(100vw - 40px);
+    height: calc(100vh - 40px);
+    max-width: none;
+    max-height: none;
+
+    /* Keep same position variables */
+    top: var(--ai-kit-pos-top, auto);
+    right: var(--ai-kit-pos-right, auto);
+    bottom: var(--ai-kit-pos-bottom, auto);
+    left: var(--ai-kit-pos-left, auto);
+  }
+}
+
+@media (max-width: 600px) {
+  .ai-chat-container {
+    top: 0 !important;
+    right: 0 !important;
+    bottom: 0 !important;
+    left: 0 !important;
+
+    width: 100% !important;
+    height: 100% !important;
+    border-radius: 0;
+    max-width: 100% !important;
+    max-height: 100% !important;
+  }
+
+  .ai-box-open {
+    padding: var(--ai-kit-space-3);
+  }
+}
+
+/* Header / status */
+.ai-chat-header-bar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 var(--ai-kit-space-3) var(--ai-kit-space-3) var(--ai-kit-space-4);
+  border-bottom: 1px solid var(--ai-kit-chat-border-color);
+}
+
+.ai-status-line {
+  padding: var(--ai-kit-space-2) var(--ai-kit-space-4);
+  font-size: var(--ai-kit-font-size-sm);
+  color: var(--ai-kit-chat-status-fg);
+  background: var(--ai-kit-chat-status-bg);
+}
+
+.ai-chat-title {
+  font-weight: 600;
+  font-size: var(--ai-kit-font-size-title);
+}
+
+.ai-close-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  padding: 4px 8px;
+  border-radius: var(--ai-kit-radius-pill);
+  border: 1px solid var(--ai-kit-color-border);
+  background: var(--ai-kit-chat-close-bg);
+  color: inherit;
+  cursor: pointer;
+  font-size: 0.8rem;
+  transition:
+    background 0.2s ease,
+    transform 0.1s ease;
+}
+
+.ai-close-button:hover {
+  background: var(--ai-kit-chat-close-bg-hover);
+  transform: scale(1.05);
+}
+
+.ai-close-button:active {
+  transform: scale(0.95);
+}
+
+.ai-close-button svg {
+  width: 16px;
+  height: 16px;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+/* Chat area */
+.ai-chat-scroll {
+  flex: 1;
+  overflow-y: auto;
+  padding: var(--ai-kit-space-4);
+}
+
+.ai-chat-placeholder {
+  padding: var(--ai-kit-space-4);
+  color: #868e96;
+}
+
+.ai-chat-row {
+  margin-bottom: var(--ai-kit-space-2);
+  display: flex;
+}
+
+.ai-chat-row.user {
+  justify-content: flex-end;
+}
+
+.ai-chat-row.assistant {
+  justify-content: flex-start;
+}
+
+.ai-chat-bubble {
+  max-width: 85%;
+  padding: 10px 12px;
+  border-radius: var(--ai-kit-radius-sm);
+  background: var(--ai-kit-assistant-bubble-bg);
+  font-size: var(--ai-kit-font-size);
+  color: var(--ai-kit-assistant-bubble-color);
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+  word-break: break-word;
+  hyphens: auto;
+  line-height: var(--ai-kit-line-height);
+}
+
+.ai-chat-row.user .ai-chat-bubble {
+  background: var(--ai-kit-user-bubble-bg);
+  color: var(--ai-kit-user-bubble-color);
+}
+
+.ai-chat-header {
+  display: flex;
+  justify-content: space-between;
+  font-size: 0.75rem;
+  margin-bottom: 4px;
+  opacity: 0.8;
+}
+
+/* Input card */
+.ai-box {
+  border-radius: var(--ai-kit-radius-sm);
+  border: 1px solid var(--ai-kit-color-border);
+  padding: var(--ai-kit-space-2);
+  background: var(--ai-kit-color-background);
+  display: flex;
+  flex-direction: column;
+  gap: var(--ai-kit-space-2);
+}
+
+.ai-message {
+  --input-padding-inline-start: var(--ai-kit-input-padding-x);
+  --input-padding-inline-end: var(--ai-kit-input-padding-x);
+
+  flex: 1;
+  resize: vertical;
+  outline: none;
+  border: 1px solid var(--ai-kit-color-border-muted);
+  border-radius: var(--ai-kit-radius-sm);
+  font-size: var(--ai-kit-font-size);
+}
+
+.ai-message textarea {
+  border: 0;
+  resize: vertical;
+  min-height: 64px;
+}
+
+/* Thumbs */
+.ai-thumbs {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--ai-kit-space-2);
+}
+
+.ai-thumbs .thumb {
+  position: relative;
+  width: 80px;
+  height: 80px;
+  border-radius: var(--ai-kit-radius-sm);
+  overflow: hidden;
+  border: 1px solid var(--ai-kit-color-border);
+}
+
+.ai-thumbs img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.ai-thumbs .thumb button {
+  position: absolute;
+  top: 2px;
+  right: 2px;
+  border-radius: var(--ai-kit-radius-pill);
+  border: none;
+  background: rgba(0, 0, 0, 0.6);
+  color: #fff;
+  width: 20px;
+  height: 20px;
+  cursor: pointer;
+  font-size: 14px;
+  line-height: 18px;
+}
+
+/* Citations / status / feedback */
+.ai-citations {
+  margin-top: var(--ai-kit-space-2);
+  font-size: 0.8rem;
+}
+
+.ai-citations ul {
+  padding-left: 16px;
+  margin: 4px 0 0;
+}
+
+.ai-status-text {
+  font-size: 0.85rem;
+  color: var(--ai-kit-color-text-muted);
+}
+
+.ai-feedback {
+  margin-top: 6px;
+  display: flex;
+  gap: 4px;
+}
+
+.ai-feedback button {
+  border-radius: var(--ai-kit-radius-pill) !important;
+  border: 1px solid var(--ai-kit-chat-feedback-border);
+  background: var(--ai-kit-chat-feedback-bg);
+  width: 32px;
+  height: 32px;
+  cursor: pointer;
+  padding: 0;
+}
+
+.ai-feedback button.active {
+  background: var(--ai-kit-chat-feedback-active-bg);
+}
+
+.ai-error {
+  color: var(--ai-kit-color-danger);
+  font-size: 0.9rem;
+}
+
+/* Markdown formatting */
+.ai-chat-bubble p,
+.ai-chat-bubble ul,
+.ai-chat-bubble ol,
+.ai-chat-bubble pre,
+.ai-chat-bubble code {
+  margin: 0;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+}
+
+.ai-chat-bubble code {
+  background: var(--ai-kit-chat-code-bg);
+  padding: 2px 4px;
+  border-radius: 3px;
+  font-size: 0.9em;
+}
+
+.ai-chat-bubble pre {
+  background: var(--ai-kit-chat-pre-bg);
+  padding: 8px;
+  border-radius: 4px;
+  overflow-x: auto;
+  max-width: 100%;
+}
+
+/* Typing indicator */
+.typing-indicator {
+  display: inline-flex;
+  gap: 4px;
+}
+
+.typing-indicator span {
+  width: 6px;
+  height: 6px;
+  border-radius: 999px;
+  background: var(--ai-kit-chat-typing-dot-color);
+  animation: typing-bounce 0.9s infinite ease-in-out;
+}
+
+.typing-indicator span:nth-child(2) {
+  animation-delay: 0.15s;
+}
+
+.typing-indicator span:nth-child(3) {
+  animation-delay: 0.3s;
+}
+
+@keyframes typing-bounce {
+  0%,
+  80%,
+  100% {
+    transform: translateY(0);
+  }
+  40% {
+    transform: translateY(-4px);
+  }
+}