glirastes 0.4.0 → 0.5.1

package/dist/cjs/react/styles.css

@@ -0,0 +1,1555 @@
+/* glirastes — default chat panel styles.
+   Auto-injected when you render <AiChat /> or <AiChatPanel />.
+   Themes: every color / radius / font below is driven by CSS variables
+   that can be overridden per-instance via the `theme` prop, which emits
+   inline `--cm-*` vars on the root elements. The defaults below act as
+   the fallback when no `theme` prop is given. */
+
+:where(
+  [data-component="ai-chat-panel"],
+  [data-component="chat-window"],
+  [data-component="ai-trigger-button"],
+  [data-component="assistant-shell"],
+  [data-component="assistant-bubble"],
+  [data-component="assistant-toggle"]
+):where(:not([data-unstyled], [data-unstyled] *)) {
+  --cm-primary: #6366f1;
+  --cm-primary-soft: #818cf8;
+  --cm-primary-tint: rgba(99, 102, 241, 0.12);
+  --cm-primary-ring: rgba(99, 102, 241, 0.18);
+  --cm-bg: #ffffff;
+  --cm-bg-muted: #f9fafb;
+  --cm-bubble-user: #e0e7ff;
+  --cm-bubble-assistant: #f3f4f6;
+  --cm-border: #e5e7eb;
+  --cm-text: #111827;
+  --cm-text-muted: #6b7280;
+  --cm-danger: #dc2626;
+  --cm-radius: 0.875rem;
+  --cm-radius-sm: 0.5rem;
+  --cm-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+}
+
+[data-component="ai-chat-panel"]:where(:not([data-unstyled], [data-unstyled] *)) {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  min-height: 520px;
+  max-height: 100%;
+  background: var(--cm-bg);
+  color: var(--cm-text);
+  border: 1px solid var(--cm-border);
+  border-radius: var(--cm-radius);
+  overflow: hidden;
+  font-family: var(--cm-font);
+  font-size: 14px;
+  line-height: 1.5;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.03);
+}
+
+[data-component="ai-chat-panel"]:where(:not([data-unstyled], [data-unstyled] *)) *,
+[data-component="ai-chat-panel"]:where(:not([data-unstyled], [data-unstyled] *)) *::before,
+[data-component="ai-chat-panel"]:where(:not([data-unstyled], [data-unstyled] *)) *::after {
+  box-sizing: border-box;
+}
+
+/* ---------- Error banner ---------- */
+[data-component="ai-chat-panel"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component="error-banner"] {
+  padding: 0.75rem 1rem;
+  background: #fef2f2;
+  color: #991b1b;
+  border-bottom: 1px solid #fecaca;
+  font-size: 13px;
+}
+
+/* ---------- Empty state ---------- */
+[data-component="ai-chat-panel"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component="empty-state"] {
+  flex: 1;
+  display: grid;
+  place-items: center;
+  padding: 2rem;
+  color: var(--cm-text-muted);
+  text-align: center;
+}
+
+/* ---------- Message list ---------- */
+[data-component="ai-chat-panel"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component="message-list"] {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  padding: 1rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  scroll-behavior: smooth;
+}
+[data-component="ai-chat-panel"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component="message-list"] > [data-action="load-more"] {
+  align-self: center;
+  padding: 0.375rem 0.75rem;
+  font: inherit;
+  font-size: 12px;
+  background: transparent;
+  border: 1px solid var(--cm-border);
+  border-radius: var(--cm-radius-sm);
+  color: var(--cm-text-muted);
+  cursor: pointer;
+}
+
+/* ---------- Message bubble ---------- */
+[data-component="ai-chat-panel"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component="message-bubble"] {
+  max-width: 85%;
+  padding: 0.625rem 0.875rem;
+  border-radius: var(--cm-radius);
+  word-wrap: break-word;
+  overflow-wrap: anywhere;
+}
+[data-component="ai-chat-panel"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component="message-bubble"][data-role="user"] {
+  align-self: flex-end;
+  background: var(--cm-bubble-user);
+  color: var(--cm-text);
+}
+[data-component="ai-chat-panel"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component="message-bubble"][data-role="assistant"] {
+  align-self: flex-start;
+  background: var(--cm-bubble-assistant);
+}
+[data-component="ai-chat-panel"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component="message-bubble"][data-role="system"] {
+  align-self: center;
+  background: var(--cm-bg-muted);
+  color: var(--cm-text-muted);
+  font-style: italic;
+  font-size: 13px;
+}
+
+/* ---------- Markdown content ---------- */
+[data-component="ai-chat-panel"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component="markdown"] p {
+  margin: 0 0 0.5rem 0;
+}
+[data-component="ai-chat-panel"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component="markdown"] p:last-child {
+  margin: 0;
+}
+[data-component="ai-chat-panel"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component="markdown"] pre {
+  background: rgba(0, 0, 0, 0.05);
+  padding: 0.625rem 0.75rem;
+  border-radius: var(--cm-radius-sm);
+  overflow-x: auto;
+  font-size: 12px;
+  margin: 0.5rem 0;
+}
+[data-component="ai-chat-panel"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component="markdown"] code {
+  background: rgba(0, 0, 0, 0.06);
+  padding: 0.125rem 0.25rem;
+  border-radius: 3px;
+  font-size: 0.9em;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+}
+[data-component="ai-chat-panel"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component="markdown"] pre code {
+  background: transparent;
+  padding: 0;
+}
+[data-component="ai-chat-panel"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component="markdown"] ul,
+[data-component="ai-chat-panel"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component="markdown"] ol {
+  margin: 0.25rem 0 0.5rem 1.25rem;
+  padding: 0;
+}
+
+/* ---------- Chat input / mention input ---------- */
+[data-component="ai-chat-panel"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component="chat-input"],
+[data-component="ai-chat-panel"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component="mention-input"] {
+  flex-shrink: 0;
+  display: flex;
+  gap: 0.5rem;
+  align-items: flex-end;
+  padding: 0.75rem 1rem;
+  border-top: 1px solid var(--cm-border);
+  background: var(--cm-bg);
+}
+[data-component="ai-chat-panel"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component="chat-input"] textarea,
+[data-component="ai-chat-panel"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component="mention-input"] textarea {
+  flex: 1;
+  min-height: 40px;
+  max-height: 160px;
+  resize: none;
+  padding: 0.5rem 0.75rem;
+  background: var(--cm-bg-muted);
+  border: 1px solid var(--cm-border);
+  border-radius: var(--cm-radius-sm);
+  color: var(--cm-text);
+  font: inherit;
+  outline: none;
+  transition: border-color 0.15s, box-shadow 0.15s;
+}
+[data-component="ai-chat-panel"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component="chat-input"] textarea:focus,
+[data-component="ai-chat-panel"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component="mention-input"] textarea:focus {
+  border-color: var(--cm-primary);
+  box-shadow: 0 0 0 3px var(--cm-primary-ring);
+}
+[data-component="ai-chat-panel"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component="chat-input"] textarea::placeholder,
+[data-component="ai-chat-panel"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component="mention-input"] textarea::placeholder {
+  color: var(--cm-text-muted);
+}
+
+/* ---------- Send / stop buttons ---------- */
+[data-component="ai-chat-panel"]:where(:not([data-unstyled], [data-unstyled] *)) [data-action="send"] {
+  padding: 0.5rem 1rem;
+  background: var(--cm-primary);
+  color: #fff;
+  border: none;
+  border-radius: var(--cm-radius-sm);
+  font: inherit;
+  font-weight: 500;
+  cursor: pointer;
+  transition: opacity 0.15s, transform 0.05s;
+}
+[data-component="ai-chat-panel"]:where(:not([data-unstyled], [data-unstyled] *)) [data-action="send"]:hover:not(:disabled) {
+  opacity: 0.92;
+}
+[data-component="ai-chat-panel"]:where(:not([data-unstyled], [data-unstyled] *)) [data-action="send"]:active:not(:disabled) {
+  transform: translateY(1px);
+}
+[data-component="ai-chat-panel"]:where(:not([data-unstyled], [data-unstyled] *)) [data-action="send"]:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+[data-component="ai-chat-panel"]:where(:not([data-unstyled], [data-unstyled] *)) [data-action="stop"] {
+  padding: 0.5rem 0.875rem;
+  background: transparent;
+  color: var(--cm-text);
+  border: 1px solid var(--cm-border);
+  border-radius: var(--cm-radius-sm);
+  font: inherit;
+  cursor: pointer;
+}
+
+/* ---------- Suggestion bar ---------- */
+[data-component="ai-chat-panel"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component="suggestion-bar"] {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  padding: 0.5rem 1rem 0.25rem 1rem;
+}
+[data-component="ai-chat-panel"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component="suggestion-chip"] {
+  padding: 0.375rem 0.75rem;
+  background: var(--cm-bg-muted);
+  border: 1px solid var(--cm-border);
+  border-radius: 9999px;
+  font: inherit;
+  font-size: 12px;
+  color: var(--cm-text);
+  cursor: pointer;
+  transition: background 0.15s, border-color 0.15s;
+}
+[data-component="ai-chat-panel"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component="suggestion-chip"]:hover {
+  background: var(--cm-bubble-user);
+  border-color: var(--cm-primary);
+}
+
+/* ---------- Typing indicator ---------- */
+[data-component="ai-chat-panel"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component="typing-indicator"] {
+  display: flex;
+  gap: 4px;
+  padding: 0.5rem 1rem;
+  align-items: center;
+}
+[data-component="ai-chat-panel"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component="typing-indicator"] [data-element="dot"] {
+  width: 6px;
+  height: 6px;
+  background: var(--cm-text-muted);
+  border-radius: 50%;
+  animation: cm-chat-typing 1.4s infinite ease-in-out both;
+}
+[data-component="ai-chat-panel"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component="typing-indicator"] [data-element="dot"]:nth-child(2) {
+  animation-delay: 0.16s;
+}
+[data-component="ai-chat-panel"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component="typing-indicator"] [data-element="dot"]:nth-child(3) {
+  animation-delay: 0.32s;
+}
+@keyframes cm-chat-typing {
+  0%, 80%, 100% { transform: scale(0.7); opacity: 0.5; }
+  40%           { transform: scale(1);   opacity: 1;   }
+}
+
+/* ---------- Truncation banner ---------- */
+[data-component="ai-chat-panel"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component="truncation-banner"] {
+  padding: 0.75rem 1rem;
+  background: #fef9c3;
+  color: #713f12;
+  border-top: 1px solid #fde047;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 1rem;
+  font-size: 13px;
+}
+[data-component="ai-chat-panel"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component="truncation-banner"] [data-element="actions"] {
+  display: flex;
+  gap: 0.5rem;
+}
+[data-component="ai-chat-panel"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component="truncation-banner"] button {
+  padding: 0.3125rem 0.625rem;
+  background: #fff;
+  border: 1px solid #d4a574;
+  border-radius: var(--cm-radius-sm);
+  font: inherit;
+  font-size: 12px;
+  cursor: pointer;
+}
+
+/* ---------- Approval cards ---------- */
+[data-component="ai-chat-panel"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component="approval-card"],
+[data-component="ai-chat-panel"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component="bulk-approval-card"] {
+  margin: 0 1rem 0.75rem 1rem;
+  padding: 0.875rem 1rem;
+  background: #fffbeb;
+  border: 1px solid #fcd34d;
+  border-radius: var(--cm-radius);
+  font-size: 13px;
+}
+[data-component="ai-chat-panel"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component="approval-card"] [data-element="header"],
+[data-component="ai-chat-panel"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component="bulk-approval-card"] [data-element="header"] {
+  font-weight: 500;
+  color: #713f12;
+  margin-bottom: 0.5rem;
+}
+[data-component="ai-chat-panel"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component="approval-card"] [data-element="details"],
+[data-component="ai-chat-panel"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component="bulk-approval-card"] [data-element="details"] {
+  background: rgba(255, 255, 255, 0.6);
+  border: 1px solid rgba(252, 211, 77, 0.6);
+  border-radius: var(--cm-radius-sm);
+  padding: 0.5rem 0.625rem;
+  margin-bottom: 0.625rem;
+  font-size: 12px;
+  color: #78350f;
+}
+[data-component="ai-chat-panel"]:where(:not([data-unstyled], [data-unstyled] *)) [data-element="detail-line"] {
+  display: flex;
+  gap: 0.5rem;
+  line-height: 1.5;
+}
+[data-component="ai-chat-panel"]:where(:not([data-unstyled], [data-unstyled] *)) [data-element="detail-label"] {
+  flex: 0 0 auto;
+  min-width: 5.5rem;
+  opacity: 0.75;
+}
+[data-component="ai-chat-panel"]:where(:not([data-unstyled], [data-unstyled] *)) [data-element="detail-label"]::after {
+  content: ":";
+}
+[data-component="ai-chat-panel"]:where(:not([data-unstyled], [data-unstyled] *)) [data-element="detail-value"] {
+  min-width: 0;
+  font-weight: 500;
+  overflow-wrap: anywhere;
+}
+[data-component="ai-chat-panel"]:where(:not([data-unstyled], [data-unstyled] *)) [data-element="detail-items"] {
+  margin: 0;
+  padding: 0 0 0 1.125rem;
+}
+[data-component="ai-chat-panel"]:where(:not([data-unstyled], [data-unstyled] *)) [data-element="detail-text"][data-collapsed] {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+}
+[data-component="ai-chat-panel"]:where(:not([data-unstyled], [data-unstyled] *)) [data-element="detail-toggle"] {
+  display: block;
+  margin-top: 0.125rem;
+  padding: 0;
+  background: none;
+  border: none;
+  color: inherit;
+  font: inherit;
+  font-weight: 500;
+  text-decoration: underline;
+  cursor: pointer;
+}
+[data-component="ai-chat-panel"]:where(:not([data-unstyled], [data-unstyled] *)) [data-element="detail-toggle"]:focus-visible {
+  outline: 2px solid var(--cm-primary);
+  outline-offset: 2px;
+}
+[data-component="ai-chat-panel"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component="approval-card"] [data-element="actions"],
+[data-component="ai-chat-panel"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component="bulk-approval-card"] [data-element="actions"] {
+  display: flex;
+  gap: 0.5rem;
+}
+[data-component="ai-chat-panel"]:where(:not([data-unstyled], [data-unstyled] *)) [data-action="approve"] {
+  padding: 0.375rem 0.875rem;
+  background: #16a34a;
+  color: #fff;
+  border: none;
+  border-radius: var(--cm-radius-sm);
+  font: inherit;
+  font-size: 12px;
+  font-weight: 500;
+  cursor: pointer;
+}
+[data-component="ai-chat-panel"]:where(:not([data-unstyled], [data-unstyled] *)) [data-action="approve"]:hover:not(:disabled) {
+  background: #15803d;
+}
+[data-component="ai-chat-panel"]:where(:not([data-unstyled], [data-unstyled] *)) [data-action="reject"] {
+  padding: 0.375rem 0.875rem;
+  background: #fff;
+  color: #dc2626;
+  border: 1px solid #fca5a5;
+  border-radius: var(--cm-radius-sm);
+  font: inherit;
+  font-size: 12px;
+  cursor: pointer;
+}
+
+/* ---------- Mention chip ---------- */
+[data-component="ai-chat-panel"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component="mention-chip"] {
+  display: inline-flex;
+  align-items: center;
+  padding: 0.125rem 0.5rem;
+  background: var(--cm-bubble-user);
+  color: #3730a3;
+  border-radius: 9999px;
+  font-size: 12px;
+  font-weight: 500;
+}
+
+/* ---------- Pipeline timeline ---------- */
+[data-component="ai-chat-panel"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component="pipeline-timeline"] {
+  padding: 0.5rem 1rem;
+  border-bottom: 1px solid var(--cm-border);
+  background: var(--cm-bg-muted);
+  font-size: 12px;
+  color: var(--cm-text-muted);
+}
+
+/* ---------- Activity log and plan ---------- */
+[data-component="ai-chat-panel"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component="activity-log"],
+[data-component="ai-chat-panel"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component="plan-checklist"] {
+  margin: 0 0 0.375rem;
+  font-size: 12px;
+  color: var(--cm-text-muted);
+}
+[data-component="ai-chat-panel"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component="activity-log"] [data-element="activity-summary"] {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  cursor: pointer;
+  list-style: none;
+  user-select: none;
+}
+[data-component="ai-chat-panel"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component="activity-log"] [data-element="activity-summary"]::-webkit-details-marker {
+  display: none;
+}
+[data-component="ai-chat-panel"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component="activity-log"][data-state="running"] [data-element="activity-summary"] {
+  color: var(--cm-text);
+}
+[data-component="ai-chat-panel"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component="activity-log"] [data-element="activity-steps"],
+[data-component="ai-chat-panel"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component="plan-checklist"] [data-element="plan-items"] {
+  list-style: none;
+  margin: 0.25rem 0 0;
+  padding: 0 0 0 0.375rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.125rem;
+}
+[data-component="ai-chat-panel"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component="activity-log"] [data-element="activity-steps"] {
+  border-left: 1px solid var(--cm-border);
+  margin-left: 0.375rem;
+}
+[data-component="ai-chat-panel"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component="activity-log"] [data-element="activity-step"],
+[data-component="ai-chat-panel"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component="plan-checklist"] [data-element="plan-item"] {
+  display: flex;
+  align-items: baseline;
+  gap: 0.375rem;
+}
+[data-component="ai-chat-panel"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component="activity-log"] [data-element="icon"],
+[data-component="ai-chat-panel"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component="plan-checklist"] [data-element="icon"] {
+  flex-shrink: 0;
+  align-self: center;
+}
+[data-component="ai-chat-panel"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component="activity-log"] [data-element="activity-step"][data-status="done"] [data-element="icon"],
+[data-component="ai-chat-panel"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component="plan-checklist"] [data-element="plan-item"][data-status="completed"] [data-element="icon"] {
+  color: var(--cm-primary);
+}
+[data-component="ai-chat-panel"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component="activity-log"] [data-element="activity-step"][data-status="error"] [data-element="icon"],
+[data-component="ai-chat-panel"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component="activity-log"][data-state="error"] [data-element="activity-summary"] [data-element="icon"] {
+  color: #dc2626;
+}
+[data-component="ai-chat-panel"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component="activity-log"] [data-element="detail"] {
+  opacity: 0.8;
+  overflow-wrap: anywhere;
+}
+[data-component="ai-chat-panel"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component="activity-log"] [data-element="detail"]::before {
+  content: "· ";
+}
+[data-component="ai-chat-panel"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component="activity-log"] [data-element="activity-notice"] {
+  margin: 0.25rem 0 0;
+}
+[data-component="ai-chat-panel"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component="plan-checklist"] [data-element="title"] {
+  font-weight: 600;
+  color: var(--cm-text);
+}
+[data-component="ai-chat-panel"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component="plan-checklist"] [data-element="plan-item"][data-status="in_progress"] {
+  color: var(--cm-text);
+}
+[data-component="ai-chat-panel"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component="plan-checklist"] [data-element="plan-item"][data-status="pending"] {
+  opacity: 0.55;
+}
+
+/* ---------- Tool result ---------- */
+[data-component="ai-chat-panel"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component="tool-result"] {
+  margin: 0.375rem 0;
+  padding: 0.5rem 0.75rem;
+  background: rgba(0, 0, 0, 0.03);
+  border: 1px solid var(--cm-border);
+  border-radius: var(--cm-radius-sm);
+  font-size: 12px;
+  color: var(--cm-text-muted);
+}
+
+/* ---------- Provider composer, '/' and '@' list ---------- */
+/* The wrapper above is flex, but the editor, mic and Send sit inside a bare
+   <form> (classNames.input is empty by default). Without this rule the form
+   shrink-wraps its contents and the editor and its list collapse to ~111px. */
+[data-component="ai-chat-panel"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component="mention-input"][data-mode="providers"] > form {
+  display: flex;
+  flex: 1;
+  min-width: 0;
+  gap: 0.5rem;
+  align-items: flex-end;
+  flex-wrap: wrap;
+}
+[data-component="ai-chat-panel"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component="rich-mention-input"] {
+  position: relative;
+  flex: 1;
+  min-width: 0;
+}
+[data-component="ai-chat-panel"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component="rich-mention-input"] [data-element="editor"] {
+  box-sizing: border-box;
+  min-height: 40px;
+  max-height: 160px;
+  overflow-y: auto;
+  overflow-wrap: anywhere;
+  padding: 0.5rem 0.75rem;
+  background: var(--cm-bg-muted);
+  border: 1px solid var(--cm-border);
+  border-radius: var(--cm-radius-sm);
+  color: var(--cm-text);
+  outline: none;
+}
+[data-component="ai-chat-panel"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component="rich-mention-input"] [data-element="editor"]:focus {
+  border-color: var(--cm-primary);
+  box-shadow: 0 0 0 3px var(--cm-primary-ring);
+}
+[data-component="ai-chat-panel"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component="rich-mention-input"] [data-element="placeholder"] {
+  position: absolute;
+  top: 0.5rem;
+  left: 0.75rem;
+  color: var(--cm-text-muted);
+  pointer-events: none;
+}
+[data-component="ai-chat-panel"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component="rich-mention-input"] [data-component="mention-dropdown"] {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: calc(100% + 0.25rem);
+  z-index: 20;
+  display: flex;
+  flex-direction: column;
+  max-height: min(40vh, 16rem);
+  overflow-y: auto;
+  background: var(--cm-bg);
+  border: 1px solid var(--cm-border);
+  border-radius: var(--cm-radius-sm);
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
+}
+[data-component="ai-chat-panel"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component="mention-dropdown-item"] {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 0.125rem;
+  width: 100%;
+  padding: 0.5rem 0.75rem;
+  background: transparent;
+  border: none;
+  color: var(--cm-text);
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+[data-component="ai-chat-panel"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component="mention-dropdown-item"][data-selected="true"] {
+  background: var(--cm-primary-tint);
+}
+[data-component="ai-chat-panel"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component="mention-dropdown-item"] [data-element="description"] {
+  font-size: 12px;
+  color: var(--cm-text-muted);
+}
+
+/* ---------- Chat interactions: entity actions and command arguments ---------- */
+/* The item keeps `width: 100%` from its own rule, so it gets a small flex basis here: with the full
+   row as basis the shrink is shared by basis and squeezes the chips below their own width. The row
+   wraps instead, which keeps the chips on one line beside the result and drops them below it only
+   when the result cannot keep 8rem. */
+[data-component="ai-chat-panel"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component="mention-dropdown"] [data-element="result-row"] {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.25rem;
+  padding-right: 0.5rem;
+}
+[data-component="ai-chat-panel"]:where(:not([data-unstyled], [data-unstyled] *)) [data-element="result-row"] > [data-component="mention-dropdown-item"] {
+  flex: 1 1 8rem;
+  min-width: 0;
+}
+[data-component="ai-chat-panel"]:where(:not([data-unstyled], [data-unstyled] *)) [data-element="entity-actions"] {
+  display: flex;
+  flex: 0 0 auto;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  gap: 0.25rem;
+}
+[data-component="ai-chat-panel"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component="mention-action"] {
+  padding: 0.125rem 0.5rem;
+  background: var(--cm-bg-muted);
+  border: 1px solid var(--cm-border);
+  border-radius: 999px;
+  color: var(--cm-text);
+  font: inherit;
+  font-size: 12px;
+  white-space: nowrap;
+  cursor: pointer;
+}
+[data-component="ai-chat-panel"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component="mention-action"][data-selected="true"] {
+  background: var(--cm-primary-tint);
+  border-color: var(--cm-primary);
+}
+[data-component="ai-chat-panel"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component="command-arguments"] {
+  box-sizing: border-box;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-end;
+  gap: 0.5rem;
+  max-width: 100%;
+  margin: 0 0 0.5rem;
+  padding: 0.75rem;
+  background: var(--cm-bg);
+  border: 1px solid var(--cm-border);
+  border-radius: var(--cm-radius-sm);
+}
+/* The composer wrapper is one flex row and its `> form` rule (flex: 1) outranks the rule above,
+   which would park the argument form beside the editor. The wrapper wraps and the form takes
+   the full first row; the wrapper's gap supplies the space below it. */
+[data-component="ai-chat-panel"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component="mention-input"][data-mode="providers"] {
+  flex-wrap: wrap;
+}
+[data-component="ai-chat-panel"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component="mention-input"][data-mode="providers"] > form[data-component="command-arguments"] {
+  flex: 1 1 100%;
+  margin: 0;
+}
+[data-component="command-arguments"]:where(:not([data-unstyled], [data-unstyled] *)) [data-element="title"] {
+  flex: 1 1 100%;
+  margin: 0;
+  font-weight: 500;
+  overflow-wrap: anywhere;
+}
+[data-component="command-arguments"]:where(:not([data-unstyled], [data-unstyled] *)) [data-element="error"] {
+  flex: 1 1 100%;
+  margin: 0;
+  color: var(--cm-danger);
+  font-size: 12px;
+}
+[data-component="command-arguments"]:where(:not([data-unstyled], [data-unstyled] *)) [data-element="field"] {
+  position: relative;
+  display: flex;
+  flex: 1 1 10rem;
+  flex-direction: column;
+  gap: 0.25rem;
+  min-width: 0;
+  color: var(--cm-text-muted);
+  font-size: 12px;
+}
+[data-component="command-arguments"]:where(:not([data-unstyled], [data-unstyled] *)) input,
+[data-component="command-arguments"]:where(:not([data-unstyled], [data-unstyled] *)) select {
+  box-sizing: border-box;
+  width: 100%;
+  padding: 0.375rem 0.5rem;
+  background: var(--cm-bg-muted);
+  border: 1px solid var(--cm-border);
+  border-radius: var(--cm-radius-sm);
+  color: var(--cm-text);
+  font: inherit;
+  font-size: 14px;
+}
+[data-component="command-arguments"]:where(:not([data-unstyled], [data-unstyled] *)) input:focus,
+[data-component="command-arguments"]:where(:not([data-unstyled], [data-unstyled] *)) select:focus {
+  outline: none;
+  border-color: var(--cm-primary);
+  box-shadow: 0 0 0 3px var(--cm-primary-ring);
+}
+[data-component="command-arguments"]:where(:not([data-unstyled], [data-unstyled] *)) [data-element="options"] {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: calc(100% + 0.25rem);
+  z-index: 20;
+  max-height: 12rem;
+  margin: 0;
+  padding: 0;
+  overflow-y: auto;
+  list-style: none;
+  background: var(--cm-bg);
+  border: 1px solid var(--cm-border);
+  border-radius: var(--cm-radius-sm);
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
+}
+[data-component="command-arguments"]:where(:not([data-unstyled], [data-unstyled] *)) [data-element="options"] [role="option"] {
+  padding: 0.375rem 0.5rem;
+  color: var(--cm-text);
+  cursor: pointer;
+}
+[data-component="command-arguments"]:where(:not([data-unstyled], [data-unstyled] *)) [data-element="options"] [role="option"][data-selected="true"] {
+  background: var(--cm-primary-tint);
+}
+/* The dropdown rule for descriptions is scoped to the mention items; without this one the span runs
+   on after the label (`Alice Examplealice@example.com`). */
+[data-component="command-arguments"]:where(:not([data-unstyled], [data-unstyled] *)) [data-element="options"] [data-element="description"] {
+  display: block;
+  font-size: 12px;
+  color: var(--cm-text-muted);
+}
+[data-component="command-arguments"]:where(:not([data-unstyled], [data-unstyled] *)) [data-element="actions"] {
+  display: flex;
+  gap: 0.375rem;
+}
+[data-component="command-arguments"]:where(:not([data-unstyled], [data-unstyled] *)) [data-action="run"],
+[data-component="command-arguments"]:where(:not([data-unstyled], [data-unstyled] *)) [data-action="cancel"] {
+  padding: 0.375rem 0.75rem;
+  border-radius: var(--cm-radius-sm);
+  font: inherit;
+  font-size: 14px;
+  cursor: pointer;
+}
+[data-component="command-arguments"]:where(:not([data-unstyled], [data-unstyled] *)) [data-action="run"] {
+  background: var(--cm-primary);
+  border: 1px solid var(--cm-primary);
+  color: #ffffff;
+}
+[data-component="command-arguments"]:where(:not([data-unstyled], [data-unstyled] *)) [data-action="cancel"] {
+  background: transparent;
+  border: 1px solid var(--cm-border);
+  color: var(--cm-text);
+}
+
+/* ---------- Structured clarification ---------- */
+[data-component="ai-chat-panel"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component="clarification-card"] {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  max-width: 100%;
+  margin: 0.375rem 0;
+  padding: 0.75rem;
+  background: var(--cm-bg);
+  border: 1px solid var(--cm-border);
+  border-radius: var(--cm-radius-sm);
+}
+[data-component="clarification-card"]:where(:not([data-unstyled], [data-unstyled] *)) [data-element="question"] {
+  margin: 0;
+  font-weight: 500;
+  overflow-wrap: anywhere;
+}
+[data-component="clarification-card"]:where(:not([data-unstyled], [data-unstyled] *)) [data-element="options"] {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.375rem;
+}
+[data-component="clarification-card"]:where(:not([data-unstyled], [data-unstyled] *)) [data-action="answer-option"] {
+  display: inline-flex;
+  flex-direction: column;
+  align-items: flex-start;
+  max-width: 100%;
+  padding: 0.375rem 0.75rem;
+  background: var(--cm-bg-muted);
+  border: 1px solid var(--cm-border);
+  border-radius: 9999px;
+  color: var(--cm-text);
+  font: inherit;
+  font-size: 13px;
+  text-align: left;
+  overflow-wrap: anywhere;
+  cursor: pointer;
+}
+[data-component="clarification-card"]:where(:not([data-unstyled], [data-unstyled] *)) [data-action="answer-option"]:disabled {
+  opacity: 0.6;
+  cursor: default;
+}
+[data-component="clarification-card"]:where(:not([data-unstyled], [data-unstyled] *)) [data-element="description"] {
+  font-size: 11px;
+  color: var(--cm-text-muted);
+}
+[data-component="clarification-card"]:where(:not([data-unstyled], [data-unstyled] *)) [data-element="free-text"] {
+  display: flex;
+  gap: 0.375rem;
+}
+[data-component="clarification-card"]:where(:not([data-unstyled], [data-unstyled] *)) [data-element="free-text"] input {
+  flex: 1;
+  min-width: 0;
+  padding: 0.375rem 0.625rem;
+  background: var(--cm-bg-muted);
+  border: 1px solid var(--cm-border);
+  border-radius: var(--cm-radius-sm);
+  color: var(--cm-text);
+  font: inherit;
+}
+[data-component="clarification-card"]:where(:not([data-unstyled], [data-unstyled] *)) [data-action="answer-free-text"] {
+  padding: 0.375rem 0.75rem;
+  background: var(--cm-primary);
+  border: none;
+  border-radius: var(--cm-radius-sm);
+  color: #fff;
+  font: inherit;
+  cursor: pointer;
+}
+[data-component="clarification-card"]:where(:not([data-unstyled], [data-unstyled] *)) [data-action="answer-free-text"]:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* ---------- Voice: mic, push-to-talk, retry, recording bar ---------- */
+[data-component="ai-chat-panel"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component="voice-input-addon"],
+[data-component="ai-chat-panel"]:where(:not([data-unstyled], [data-unstyled] *)) [data-action="retry-recording"] {
+  flex-shrink: 0;
+  min-width: 40px;
+  min-height: 40px;
+  padding: 0 0.625rem;
+  background: var(--cm-bg-muted);
+  border: 1px solid var(--cm-border);
+  border-radius: var(--cm-radius-sm);
+  color: var(--cm-text);
+  font: inherit;
+  cursor: pointer;
+  touch-action: none;
+  user-select: none;
+  -webkit-user-select: none;
+  -webkit-touch-callout: none;
+}
+[data-component="ai-chat-panel"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component="voice-input-addon"][data-state="recording"] {
+  border-color: var(--cm-danger);
+  color: var(--cm-danger);
+}
+[data-component="ai-chat-panel"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component="recording-bar"] {
+  min-width: 0;
+}
+/* The inline bar is `width: 100%` (inline style). Next to the editor, mic and
+   Send it would get ~100px at 375px wide, too little for the live words. A
+   non-auto flex-basis beats that width, so the bar takes a row of its own
+   below them (form wraps; `order` moves it behind Send, which stays beside
+   the editor). The row exists only while the bar is mounted. */
+[data-component="ai-chat-panel"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component="mention-input"][data-mode="providers"] > form > [data-component="recording-bar"] {
+  flex: 1 1 100%;
+  order: 1;
+}
+
+/* ===========================================================================
+   Drop-in defaults for the floating trigger button and chat window.
+   These exist so <LangGraphAiChat /> / <VercelAiChat /> "just work" with
+   zero consumer styling. Override by passing className/buttonClassName.
+   =========================================================================== */
+
+[data-component="ai-trigger-button"]:where(:not([data-unstyled], [data-unstyled] *)) [data-element="button-pill"] {
+  background: linear-gradient(135deg, var(--cm-primary) 0%, var(--cm-primary-soft) 100%);
+  color: #ffffff;
+  box-shadow:
+    0 10px 25px -5px var(--cm-primary-tint),
+    0 4px 10px -3px var(--cm-primary-tint),
+    0 0 0 1px rgba(255, 255, 255, 0.12) inset;
+  transition: transform 150ms ease, box-shadow 150ms ease;
+  font-family: var(--cm-font);
+}
+
+[data-component="ai-trigger-button"]:where(:not([data-unstyled], [data-unstyled] *)) [data-element="button-pill"]:hover {
+  transform: translateY(-1px);
+  box-shadow:
+    0 14px 30px -5px var(--cm-primary-tint),
+    0 6px 12px -3px var(--cm-primary-tint),
+    0 0 0 1px rgba(255, 255, 255, 0.16) inset;
+}
+
+[data-component="ai-trigger-button"][data-dragging="true"]:where(:not([data-unstyled], [data-unstyled] *)) [data-element="button-pill"] {
+  transform: scale(1.04);
+}
+
+[data-component="ai-trigger-button"]:where(:not([data-unstyled], [data-unstyled] *)) [data-element="mic-trigger"] {
+  background: rgba(255, 255, 255, 0.22) !important;
+  color: #ffffff;
+  transition: background 150ms ease;
+}
+
+[data-component="ai-trigger-button"]:where(:not([data-unstyled], [data-unstyled] *)) [data-element="mic-trigger"]:hover {
+  background: rgba(255, 255, 255, 0.34) !important;
+}
+
+/* ---------- Chat window shell ---------- */
+[data-component="chat-window"]:where(:not([data-unstyled], [data-unstyled] *)) {
+  box-sizing: border-box;
+  background: var(--cm-bg);
+  color: var(--cm-text);
+  border: 1px solid var(--cm-border);
+  border-radius: var(--cm-radius);
+  box-shadow:
+    0 25px 50px -12px rgba(0, 0, 0, 0.25),
+    0 0 0 1px rgba(0, 0, 0, 0.04);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  z-index: 10000;
+  font-family: var(--cm-font);
+  font-size: 14px;
+}
+
+[data-component="chat-window"][data-mode="sidebar"]:where(:not([data-unstyled], [data-unstyled] *)) {
+  border-radius: 0;
+  box-shadow: none;
+}
+[data-component="chat-window"][data-mode="sidebar"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component="chat-window-header"] {
+  cursor: default;
+}
+[data-component="chat-window-sidebar-resize"]:where(:not([data-unstyled], [data-unstyled] *)) {
+  position: absolute;
+  inset: 0 auto 0 0;
+  width: 8px;
+  z-index: 11;
+  cursor: ew-resize;
+  touch-action: none;
+}
+[data-component="chat-window-sidebar-resize"]:hover:where(:not([data-unstyled], [data-unstyled] *)),
+[data-component="chat-window-sidebar-resize"]:focus-visible:where(:not([data-unstyled], [data-unstyled] *)) {
+  background: var(--cm-primary-tint);
+  outline: 2px solid var(--cm-primary);
+  outline-offset: -2px;
+}
+[data-component="chat-window-rail"]:where(:not([data-unstyled], [data-unstyled] *)) {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 12px;
+  padding: 8px 0;
+  height: 100%;
+}
+[data-component="chat-window-rail"]:where(:not([data-unstyled], [data-unstyled] *)) span {
+  writing-mode: vertical-rl;
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+[data-component="chat-window-rail"]:where(:not([data-unstyled], [data-unstyled] *)) button {
+  appearance: none;
+  border: 0;
+  border-radius: var(--cm-radius-sm);
+  width: 32px;
+  min-height: 32px;
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+  font-size: 20px;
+}
+[data-component="chat-window-rail"]:where(:not([data-unstyled], [data-unstyled] *)) button:hover {
+  background: var(--cm-primary-tint);
+}
+
+/* ---------- Glassmorphism theme effect ----------
+   Applied when the resolved theme sets `effect: 'glass'` (e.g. the
+   `liquid-glass` preset). Adds a real backdrop blur so translucent
+   backgrounds read as frosted glass instead of a flat wash. */
+[data-component="chat-window"][data-theme-effect="glass"]:where(:not([data-unstyled], [data-unstyled] *)),
+[data-component="ai-chat-panel"][data-theme-effect="glass"]:where(:not([data-unstyled], [data-unstyled] *)) {
+  backdrop-filter: blur(24px) saturate(180%);
+  -webkit-backdrop-filter: blur(24px) saturate(180%);
+}
+[data-component="ai-trigger-button"][data-theme-effect="glass"]:where(:not([data-unstyled], [data-unstyled] *)) [data-element="button-pill"] {
+  backdrop-filter: blur(16px) saturate(180%);
+  -webkit-backdrop-filter: blur(16px) saturate(180%);
+}
+
+/* ---------- Mobile: take over the whole screen ----------
+   Below 640px the floating window pattern breaks down — the
+   window is too small to contain a useful conversation and
+   edge-resize handles/drag headers don't map to touch gestures.
+   Pin to the viewport, kill the radius, and disable edge handles. */
+@media (max-width: 640px) {
+  [data-component="chat-window"]:where(:not([data-unstyled], [data-unstyled] *)) {
+    position: fixed !important;
+    left: 0 !important;
+    top: 0 !important;
+    right: 0 !important;
+    bottom: 0 !important;
+    width: 100vw !important;
+    height: 100dvh !important;
+    transform: none !important;
+    border: none !important;
+    border-radius: 0 !important;
+    box-shadow: none !important;
+    max-width: none !important;
+    max-height: none !important;
+  }
+  [data-component="chat-window"][data-collapsed="true"]:where(:not([data-unstyled], [data-unstyled] *)) {
+    left: auto !important;
+    width: 44px !important;
+  }
+  [data-component="chat-window-resize-handle"]:where(:not([data-unstyled], [data-unstyled] *)),
+  [data-component="chat-window-sidebar-resize"]:where(:not([data-unstyled], [data-unstyled] *)) {
+    display: none !important;
+  }
+  [data-component="chat-window-header"]:where(:not([data-unstyled], [data-unstyled] *)) {
+    cursor: default !important;
+    padding-top: max(0.75rem, env(safe-area-inset-top));
+    padding-left: max(1rem, env(safe-area-inset-left));
+    padding-right: max(1rem, env(safe-area-inset-right));
+  }
+  [data-component="chat-window-body"]:where(:not([data-unstyled], [data-unstyled] *)) {
+    padding-bottom: env(safe-area-inset-bottom);
+  }
+  /* Hide the pill while the chat is open — on mobile we own the
+     whole viewport, so the pill would overlap the input bar. */
+  [data-component="ai-trigger-button"]:where(:not([data-unstyled], [data-unstyled] *)) {
+    z-index: 9998;
+  }
+}
+
+[data-component="chat-window"]:where(:not([data-unstyled], [data-unstyled] *)) *,
+[data-component="chat-window"]:where(:not([data-unstyled], [data-unstyled] *)) *::before,
+[data-component="chat-window"]:where(:not([data-unstyled], [data-unstyled] *)) *::after {
+  box-sizing: border-box;
+}
+
+[data-component="chat-window-header"]:where(:not([data-unstyled], [data-unstyled] *)) {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.75rem 1rem;
+  border-bottom: 1px solid var(--cm-border);
+  background: var(--cm-bg-muted);
+  cursor: grab;
+  user-select: none;
+  flex-shrink: 0;
+}
+
+[data-component="chat-window-header"]:active:where(:not([data-unstyled], [data-unstyled] *)) {
+  cursor: grabbing;
+}
+
+[data-component="chat-window-header"]:where(:not([data-unstyled], [data-unstyled] *)) [data-element="title"] {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--cm-text);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+[data-component="chat-window-header"]:where(:not([data-unstyled], [data-unstyled] *)) [data-element="title-wrap"] {
+  flex: 1 1 auto;
+  min-width: 0;
+  display: flex;
+  align-items: center;
+}
+
+[data-component="chat-window-header"]:where(:not([data-unstyled], [data-unstyled] *)) [data-element="actions"] {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  flex-shrink: 0;
+  margin-left: 0.5rem;
+}
+
+[data-component="chat-window-header"]:where(:not([data-unstyled], [data-unstyled] *)) [data-action="close"],
+[data-component="chat-window-header"]:where(:not([data-unstyled], [data-unstyled] *)) [data-action="layout"],
+[data-component="chat-window-header"]:where(:not([data-unstyled], [data-unstyled] *)) [data-action="clear"] {
+  appearance: none;
+  border: none;
+  background: transparent;
+  width: 1.75rem;
+  height: 1.75rem;
+  border-radius: var(--cm-radius-sm);
+  line-height: 1;
+  color: var(--cm-text-muted);
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  transition: background 120ms ease, color 120ms ease;
+}
+
+[data-component="chat-window-header"]:where(:not([data-unstyled], [data-unstyled] *)) [data-action="close"]:hover,
+[data-component="chat-window-header"]:where(:not([data-unstyled], [data-unstyled] *)) [data-action="layout"]:hover,
+[data-component="chat-window-header"]:where(:not([data-unstyled], [data-unstyled] *)) [data-action="clear"]:hover:not(:disabled) {
+  background: var(--cm-primary-tint);
+  color: var(--cm-text);
+}
+
+[data-component="chat-window-header"]:where(:not([data-unstyled], [data-unstyled] *)) [data-action="clear"]:disabled {
+  opacity: 0.35;
+  cursor: not-allowed;
+}
+
+/* ---------- Session switcher ---------- */
+
+[data-component="session-switcher"]:where(:not([data-unstyled], [data-unstyled] *)) {
+  position: relative;
+  display: inline-flex;
+  flex: 0 0 auto;
+  min-width: 0;
+  font-family: var(--cm-font);
+  pointer-events: none;
+}
+
+[data-component="session-switcher"]:where(:not([data-unstyled], [data-unstyled] *)) [data-element="trigger"],
+[data-component="session-switcher"]:where(:not([data-unstyled], [data-unstyled] *)) [data-element="popover"] {
+  pointer-events: auto;
+}
+
+[data-component="session-switcher"]:where(:not([data-unstyled], [data-unstyled] *)) [data-element="trigger"] {
+  appearance: none;
+  border: 1px solid transparent;
+  background: transparent;
+  padding: 0.25rem 0.5rem;
+  border-radius: var(--cm-radius-sm);
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  max-width: 100%;
+  color: var(--cm-text);
+  font-size: 14px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: background 120ms ease, border-color 120ms ease;
+}
+
+[data-component="session-switcher"]:where(:not([data-unstyled], [data-unstyled] *)) [data-element="trigger"]:hover {
+  background: var(--cm-primary-tint);
+}
+
+[data-component="session-switcher"][data-open]:where(:not([data-unstyled], [data-unstyled] *)) [data-element="trigger"] {
+  background: var(--cm-primary-tint);
+  border-color: var(--cm-primary);
+}
+
+[data-component="session-switcher"]:where(:not([data-unstyled], [data-unstyled] *)) [data-element="trigger-title"] {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 14rem;
+}
+
+[data-component="session-switcher"]:where(:not([data-unstyled], [data-unstyled] *)) [data-element="popover"] {
+  position: absolute;
+  top: calc(100% + 0.375rem);
+  left: 0;
+  min-width: 16rem;
+  max-width: 22rem;
+  max-height: 22rem;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  background: var(--cm-bg);
+  border: 1px solid var(--cm-border);
+  border-radius: var(--cm-radius);
+  box-shadow: 0 18px 40px -12px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(0, 0, 0, 0.04);
+  z-index: 10001;
+  font-weight: 400;
+}
+
+[data-component="session-switcher"]:where(:not([data-unstyled], [data-unstyled] *)) [data-element="new-session"] {
+  appearance: none;
+  border: none;
+  background: transparent;
+  width: 100%;
+  text-align: left;
+  padding: 0.625rem 0.875rem;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--cm-primary);
+  cursor: pointer;
+  border-bottom: 1px solid var(--cm-border);
+}
+
+[data-component="session-switcher"]:where(:not([data-unstyled], [data-unstyled] *)) [data-element="new-session"]:hover {
+  background: var(--cm-primary-tint);
+}
+
+[data-component="session-switcher"]:where(:not([data-unstyled], [data-unstyled] *)) [data-element="new-session"] [data-element="plus"] {
+  display: inline-flex;
+  width: 1.25rem;
+  height: 1.25rem;
+  border-radius: 9999px;
+  align-items: center;
+  justify-content: center;
+  background: var(--cm-primary);
+  color: #ffffff;
+  font-size: 14px;
+  line-height: 1;
+}
+
+[data-component="session-switcher"]:where(:not([data-unstyled], [data-unstyled] *)) [data-element="session-list"] {
+  flex: 1 1 auto;
+  overflow-y: auto;
+  padding: 0.25rem 0;
+}
+
+[data-component="session-switcher"]:where(:not([data-unstyled], [data-unstyled] *)) [data-element="empty"] {
+  padding: 1rem 0.875rem;
+  color: var(--cm-text-muted);
+  font-size: 13px;
+  text-align: center;
+}
+
+[data-component="session-switcher"]:where(:not([data-unstyled], [data-unstyled] *)) [data-element="session-row"] {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 0.875rem;
+  cursor: pointer;
+  transition: background 120ms ease;
+}
+
+[data-component="session-switcher"]:where(:not([data-unstyled], [data-unstyled] *)) [data-element="session-row"]:hover {
+  background: var(--cm-primary-tint);
+}
+
+[data-component="session-switcher"]:where(:not([data-unstyled], [data-unstyled] *)) [data-element="session-row"][data-active] {
+  background: var(--cm-primary-tint);
+}
+
+[data-component="session-switcher"]:where(:not([data-unstyled], [data-unstyled] *)) [data-element="row-main"] {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+[data-component="session-switcher"]:where(:not([data-unstyled], [data-unstyled] *)) [data-element="row-title"] {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--cm-text);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+[data-component="session-switcher"]:where(:not([data-unstyled], [data-unstyled] *)) [data-element="row-subtitle"] {
+  font-size: 11px;
+  color: var(--cm-text-muted);
+  margin-top: 0.125rem;
+}
+
+[data-component="session-switcher"]:where(:not([data-unstyled], [data-unstyled] *)) [data-element="row-delete"],
+[data-component="session-switcher"]:where(:not([data-unstyled], [data-unstyled] *)) [data-element="row-edit"] {
+  appearance: none;
+  border: none;
+  background: transparent;
+  width: 1.5rem;
+  height: 1.5rem;
+  border-radius: var(--cm-radius-sm);
+  color: var(--cm-text-muted);
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  opacity: 0;
+  transition: opacity 120ms ease, background 120ms ease, color 120ms ease;
+  flex-shrink: 0;
+}
+
+[data-component="session-switcher"]:where(:not([data-unstyled], [data-unstyled] *)) [data-element="session-row"]:hover [data-element="row-delete"],
+[data-component="session-switcher"]:where(:not([data-unstyled], [data-unstyled] *)) [data-element="session-row"]:hover [data-element="row-edit"] {
+  opacity: 1;
+}
+
+[data-component="session-switcher"]:where(:not([data-unstyled], [data-unstyled] *)) [data-element="row-edit"]:hover {
+  background: var(--cm-primary-tint);
+  color: var(--cm-text);
+}
+
+[data-component="session-switcher"]:where(:not([data-unstyled], [data-unstyled] *)) [data-element="row-delete"]:hover {
+  background: rgba(220, 38, 38, 0.1);
+  color: var(--cm-danger);
+}
+
+[data-component="session-switcher"]:where(:not([data-unstyled], [data-unstyled] *)) [data-element="session-row"][data-editing] {
+  background: var(--cm-primary-tint);
+  cursor: text;
+}
+
+[data-component="session-switcher"]:where(:not([data-unstyled], [data-unstyled] *)) [data-element="row-title-input"] {
+  width: 100%;
+  appearance: none;
+  background: transparent;
+  border: none;
+  outline: none;
+  padding: 0;
+  margin: 0;
+  font: inherit;
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--cm-text);
+  caret-color: var(--cm-primary);
+}
+
+[data-component="session-switcher"]:where(:not([data-unstyled], [data-unstyled] *)) [data-element="row-title-input"]::placeholder {
+  color: var(--cm-text-muted);
+}
+
+/* ---------- Confirm dialog ---------- */
+
+[data-component="confirm-dialog-backdrop"]:where(:not([data-unstyled], [data-unstyled] *)) {
+  position: fixed;
+  inset: 0;
+  z-index: 10010;
+  background: rgba(0, 0, 0, 0.55);
+  backdrop-filter: blur(4px);
+  -webkit-backdrop-filter: blur(4px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 1rem;
+  font-family: var(--cm-font);
+  animation: cm-confirm-fade 140ms ease-out;
+}
+
+[data-component="confirm-dialog"]:where(:not([data-unstyled], [data-unstyled] *)) {
+  background: var(--cm-bg);
+  color: var(--cm-text);
+  border: 1px solid var(--cm-border);
+  border-radius: var(--cm-radius);
+  box-shadow:
+    0 25px 50px -12px rgba(0, 0, 0, 0.6),
+    0 0 0 1px rgba(255, 255, 255, 0.04);
+  padding: 1.25rem 1.25rem 1rem;
+  min-width: min(22rem, calc(100vw - 2rem));
+  max-width: 26rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  animation: cm-confirm-pop 160ms cubic-bezier(0.2, 0.9, 0.3, 1.1);
+}
+
+[data-component="confirm-dialog"]:where(:not([data-unstyled], [data-unstyled] *)) [data-element="title"] {
+  font-size: 15px;
+  font-weight: 600;
+  color: var(--cm-text);
+  line-height: 1.4;
+}
+
+[data-component="confirm-dialog"]:where(:not([data-unstyled], [data-unstyled] *)) [data-element="message"] {
+  font-size: 13px;
+  color: var(--cm-text-muted);
+  line-height: 1.5;
+  margin-bottom: 0.25rem;
+}
+
+[data-component="confirm-dialog"]:where(:not([data-unstyled], [data-unstyled] *)) [data-element="actions"] {
+  display: flex;
+  justify-content: flex-end;
+  gap: 0.5rem;
+  margin-top: 0.75rem;
+}
+
+[data-component="confirm-dialog"]:where(:not([data-unstyled], [data-unstyled] *)) [data-element="actions"] button {
+  appearance: none;
+  border: 1px solid var(--cm-border);
+  background: transparent;
+  color: var(--cm-text);
+  padding: 0.5rem 1rem;
+  border-radius: var(--cm-radius-sm);
+  font-size: 13px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: background 120ms ease, border-color 120ms ease, color 120ms ease, transform 120ms ease;
+  font-family: inherit;
+}
+
+[data-component="confirm-dialog"]:where(:not([data-unstyled], [data-unstyled] *)) [data-element="cancel"]:hover {
+  background: var(--cm-primary-tint);
+  border-color: var(--cm-primary);
+}
+
+[data-component="confirm-dialog"]:where(:not([data-unstyled], [data-unstyled] *)) [data-element="confirm"] {
+  background: var(--cm-primary);
+  border-color: var(--cm-primary);
+  color: #ffffff;
+}
+
+[data-component="confirm-dialog"]:where(:not([data-unstyled], [data-unstyled] *)) [data-element="confirm"]:hover:not(:disabled) {
+  filter: brightness(1.1);
+  transform: translateY(-1px);
+}
+
+[data-component="confirm-dialog"]:where(:not([data-unstyled], [data-unstyled] *)) [data-element="confirm"][data-destructive] {
+  background: var(--cm-danger);
+  border-color: var(--cm-danger);
+}
+
+[data-component="confirm-dialog"]:where(:not([data-unstyled], [data-unstyled] *)) [data-element="confirm"]:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+@keyframes cm-confirm-fade {
+  from { opacity: 0; }
+  to   { opacity: 1; }
+}
+
+@keyframes cm-confirm-pop {
+  from { opacity: 0; transform: scale(0.95) translateY(6px); }
+  to   { opacity: 1; transform: scale(1) translateY(0); }
+}
+
+[data-component="chat-window-body"]:where(:not([data-unstyled], [data-unstyled] *)) {
+  flex: 1 1 auto;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+/* When ai-chat-panel is a direct child of chat-window-body, drop its own
+   border/radius/shadow so the window shell owns the framing. */
+[data-component="chat-window-body"]:where(:not([data-unstyled], [data-unstyled] *)) > [data-component="ai-chat-panel"] {
+  border: none;
+  border-radius: 0;
+  box-shadow: none;
+  min-height: 0;
+  height: 100%;
+}
+
+/* ---------- Approval reminder ---------- */
+[data-component="ai-chat-panel"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component="approval-reminder"] {
+  margin: 0 1rem 0.5rem;
+  padding: 0.5rem 0.75rem;
+  border-radius: var(--cm-radius-sm);
+  background: var(--cm-primary-tint);
+  color: var(--cm-text);
+  font-size: 0.8125rem;
+}
+
+/* ---------------------------------------------------------------------------
+   AssistantShell — docked sidebar or detached window. The handle geometry
+   is inline, so it also works unstyled; these rules are only the look.
+   --------------------------------------------------------------------------- */
+[data-component="assistant-shell"][data-floating-gesture]:where(:not([data-unstyled], [data-unstyled] *)) { transition: none; will-change: transform, width, height; }
+@media (pointer: coarse) {
+  [data-component="assistant-shell-window-handle"]:where(:not([data-unstyled], [data-unstyled] *)):is([data-resize-edge="n"], [data-resize-edge="s"]) { height: 16px !important; }
+  [data-component="assistant-shell-window-handle"]:where(:not([data-unstyled], [data-unstyled] *)):is([data-resize-edge="e"], [data-resize-edge="w"]) { width: 16px !important; }
+  [data-component="assistant-shell-window-handle"]:where(:not([data-unstyled], [data-unstyled] *)):is([data-resize-edge="ne"], [data-resize-edge="nw"], [data-resize-edge="se"], [data-resize-edge="sw"]) { width: 28px !important; height: 28px !important; }
+}
+
+[data-component="assistant-shell"]:where(:not([data-unstyled], [data-unstyled] *)) {
+  box-sizing: border-box;
+  z-index: 60;
+  background: var(--cm-bg);
+  color: var(--cm-text);
+  font-family: var(--cm-font);
+  border-left: 1px solid var(--cm-border);
+}
+[data-component="assistant-shell"][data-mode="floating"]:where(:not([data-unstyled], [data-unstyled] *)) {
+  border: 1px solid var(--cm-border);
+  border-radius: var(--cm-radius);
+  box-shadow: 0 12px 32px -12px rgba(17, 24, 39, 0.25);
+  overflow: hidden;
+}
+[data-component="assistant-shell"][data-floating-gesture="move"]:where(:not([data-unstyled], [data-unstyled] *)) {
+  box-shadow: 0 16px 40px -12px rgba(17, 24, 39, 0.35);
+}
+[data-component="assistant-shell"]:where(:not([data-unstyled], [data-unstyled] *)) [data-element="header"] {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  height: 2.75rem;
+  flex-shrink: 0;
+  padding: 0 0.75rem;
+  border-bottom: 1px solid var(--cm-border);
+}
+[data-component="assistant-shell"]:where(:not([data-unstyled], [data-unstyled] *)) [data-element="header"] > [data-element="icon"] {
+  display: inline-flex;
+  color: var(--cm-primary);
+}
+[data-component="assistant-shell"]:where(:not([data-unstyled], [data-unstyled] *)) [data-element="title"] {
+  flex: 1 1 0%;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 0.875rem;
+  font-weight: 600;
+}
+[data-component="assistant-shell"]:where(:not([data-unstyled], [data-unstyled] *)) :is(header[data-element="header"], [data-element="rail"]) > [data-action] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 1.75rem;
+  height: 1.75rem;
+  padding: 0;
+  border: 0;
+  border-radius: var(--cm-radius-sm);
+  background: transparent;
+  color: var(--cm-text-muted);
+  cursor: pointer;
+}
+[data-component="assistant-shell"]:where(:not([data-unstyled], [data-unstyled] *)) :is(header[data-element="header"], [data-element="rail"]) > [data-action]:hover {
+  background: var(--cm-primary-tint);
+  color: var(--cm-text);
+}
+[data-component="assistant-shell"]:where(:not([data-unstyled], [data-unstyled] *)) [data-element="rail"] {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  height: 100%;
+  padding: 0.5rem 0;
+}
+[data-component="assistant-shell"]:where(:not([data-unstyled], [data-unstyled] *)) [data-element="rail"] > [data-action="expand"] {
+  flex: 1 1 0%;
+  width: 100%;
+  height: auto;
+  flex-direction: column;
+  justify-content: flex-start;
+  gap: 1rem;
+  padding-top: 0.25rem;
+  font-size: 0.75rem;
+  font-weight: 500;
+}
+[data-component="assistant-shell-resize"]:where(:not([data-unstyled], [data-unstyled] *)):is(:hover, :focus-visible, [data-dragging]) {
+  background: linear-gradient(to right, transparent 3px, var(--cm-primary) 3px, var(--cm-primary) 5px, transparent 5px);
+  outline: none;
+}
+[data-component="assistant-bubble"]:where(:not([data-unstyled], [data-unstyled] *)) {
+  position: fixed;
+  right: 1rem;
+  bottom: 1rem;
+  z-index: 40;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.75rem;
+  height: 2.75rem;
+  border: 0;
+  border-radius: 9999px;
+  background: var(--cm-primary);
+  color: #fff;
+  box-shadow: 0 8px 20px -8px rgba(17, 24, 39, 0.4);
+  cursor: pointer;
+}
+[data-component="assistant-toggle"]:where(:not([data-unstyled], [data-unstyled] *)) {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  height: 2.25rem;
+  padding: 0 0.75rem;
+  border: 0;
+  border-radius: var(--cm-radius-sm);
+  background: transparent;
+  color: var(--cm-text);
+  font: inherit;
+  font-size: 0.875rem;
+  cursor: pointer;
+}
+[data-component="assistant-toggle"]:where(:not([data-unstyled], [data-unstyled] *)):is(:hover, [aria-pressed="true"]) {
+  background: var(--cm-primary-tint);
+}