glirastes 0.3.2 → 0.5.0

package/dist/react/styles.css

@@ -8,8 +8,11 @@
 :where(
   [data-component="ai-chat-panel"],
   [data-component="chat-window"],
-  [data-component="ai-trigger-button"]
-) {
+  [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);
@@ -27,7 +30,7 @@
   --cm-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
 }
 
-[data-component="ai-chat-panel"] {
+[data-component="ai-chat-panel"]:where(:not([data-unstyled], [data-unstyled] *)) {
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
@@ -46,14 +49,14 @@
   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"] *,
-[data-component="ai-chat-panel"] *::before,
-[data-component="ai-chat-panel"] *::after {
+[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"] [data-component="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;
@@ -62,7 +65,7 @@
 }
 
 /* ---------- Empty state ---------- */
-[data-component="ai-chat-panel"] [data-component="empty-state"] {
+[data-component="ai-chat-panel"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component="empty-state"] {
   flex: 1;
   display: grid;
   place-items: center;
@@ -72,7 +75,7 @@
 }
 
 /* ---------- Message list ---------- */
-[data-component="ai-chat-panel"] [data-component="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;
@@ -82,7 +85,7 @@
   gap: 0.75rem;
   scroll-behavior: smooth;
 }
-[data-component="ai-chat-panel"] [data-component="message-list"] > [data-action="load-more"] {
+[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;
@@ -95,23 +98,23 @@
 }
 
 /* ---------- Message bubble ---------- */
-[data-component="ai-chat-panel"] [data-component="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"] [data-component="message-bubble"][data-role="user"] {
+[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"] [data-component="message-bubble"][data-role="assistant"] {
+[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"] [data-component="message-bubble"][data-role="system"] {
+[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);
@@ -120,13 +123,13 @@
 }
 
 /* ---------- Markdown content ---------- */
-[data-component="ai-chat-panel"] [data-component="markdown"] p {
+[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"] [data-component="markdown"] p:last-child {
+[data-component="ai-chat-panel"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component="markdown"] p:last-child {
   margin: 0;
 }
-[data-component="ai-chat-panel"] [data-component="markdown"] pre {
+[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);
@@ -134,26 +137,26 @@
   font-size: 12px;
   margin: 0.5rem 0;
 }
-[data-component="ai-chat-panel"] [data-component="markdown"] code {
+[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"] [data-component="markdown"] pre code {
+[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"] [data-component="markdown"] ul,
-[data-component="ai-chat-panel"] [data-component="markdown"] ol {
+[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"] [data-component="chat-input"],
-[data-component="ai-chat-panel"] [data-component="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;
@@ -162,8 +165,8 @@
   border-top: 1px solid var(--cm-border);
   background: var(--cm-bg);
 }
-[data-component="ai-chat-panel"] [data-component="chat-input"] textarea,
-[data-component="ai-chat-panel"] [data-component="mention-input"] textarea {
+[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;
@@ -177,18 +180,18 @@
   outline: none;
   transition: border-color 0.15s, box-shadow 0.15s;
 }
-[data-component="ai-chat-panel"] [data-component="chat-input"] textarea:focus,
-[data-component="ai-chat-panel"] [data-component="mention-input"] textarea:focus {
+[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"] [data-component="chat-input"] textarea::placeholder,
-[data-component="ai-chat-panel"] [data-component="mention-input"] textarea::placeholder {
+[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"] [data-action="send"] {
+[data-component="ai-chat-panel"]:where(:not([data-unstyled], [data-unstyled] *)) [data-action="send"] {
   padding: 0.5rem 1rem;
   background: var(--cm-primary);
   color: #fff;
@@ -199,17 +202,17 @@
   cursor: pointer;
   transition: opacity 0.15s, transform 0.05s;
 }
-[data-component="ai-chat-panel"] [data-action="send"]:hover:not(:disabled) {
+[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"] [data-action="send"]:active:not(:disabled) {
+[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"] [data-action="send"]:disabled {
+[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"] [data-action="stop"] {
+[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);
@@ -220,13 +223,13 @@
 }
 
 /* ---------- Suggestion bar ---------- */
-[data-component="ai-chat-panel"] [data-component="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"] [data-component="suggestion-chip"] {
+[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);
@@ -237,29 +240,29 @@
   cursor: pointer;
   transition: background 0.15s, border-color 0.15s;
 }
-[data-component="ai-chat-panel"] [data-component="suggestion-chip"]:hover {
+[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"] [data-component="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"] [data-component="typing-indicator"] [data-element="dot"] {
+[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"] [data-component="typing-indicator"] [data-element="dot"]:nth-child(2) {
+[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"] [data-component="typing-indicator"] [data-element="dot"]:nth-child(3) {
+[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 {
@@ -268,7 +271,7 @@
 }
 
 /* ---------- Truncation banner ---------- */
-[data-component="ai-chat-panel"] [data-component="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;
@@ -279,11 +282,11 @@
   gap: 1rem;
   font-size: 13px;
 }
-[data-component="ai-chat-panel"] [data-component="truncation-banner"] [data-element="actions"] {
+[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"] [data-component="truncation-banner"] button {
+[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;
@@ -294,8 +297,8 @@
 }
 
 /* ---------- Approval cards ---------- */
-[data-component="ai-chat-panel"] [data-component="approval-card"],
-[data-component="ai-chat-panel"] [data-component="bulk-approval-card"] {
+[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;
@@ -303,14 +306,14 @@
   border-radius: var(--cm-radius);
   font-size: 13px;
 }
-[data-component="ai-chat-panel"] [data-component="approval-card"] [data-element="header"],
-[data-component="ai-chat-panel"] [data-component="bulk-approval-card"] [data-element="header"] {
+[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"] [data-component="approval-card"] [data-element="details"],
-[data-component="ai-chat-panel"] [data-component="bulk-approval-card"] [data-element="details"] {
+[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);
@@ -319,12 +322,30 @@
   font-size: 12px;
   color: #78350f;
 }
-[data-component="ai-chat-panel"] [data-component="approval-card"] [data-element="actions"],
-[data-component="ai-chat-panel"] [data-component="bulk-approval-card"] [data-element="actions"] {
+[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"] [data-action="approve"] {
+[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-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;
@@ -335,10 +356,10 @@
   font-weight: 500;
   cursor: pointer;
 }
-[data-component="ai-chat-panel"] [data-action="approve"]:hover:not(:disabled) {
+[data-component="ai-chat-panel"]:where(:not([data-unstyled], [data-unstyled] *)) [data-action="approve"]:hover:not(:disabled) {
   background: #15803d;
 }
-[data-component="ai-chat-panel"] [data-action="reject"] {
+[data-component="ai-chat-panel"]:where(:not([data-unstyled], [data-unstyled] *)) [data-action="reject"] {
   padding: 0.375rem 0.875rem;
   background: #fff;
   color: #dc2626;
@@ -350,7 +371,7 @@
 }
 
 /* ---------- Mention chip ---------- */
-[data-component="ai-chat-panel"] [data-component="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;
@@ -362,7 +383,7 @@
 }
 
 /* ---------- Pipeline timeline ---------- */
-[data-component="ai-chat-panel"] [data-component="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);
@@ -370,8 +391,82 @@
   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"] [data-component="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);
@@ -381,13 +476,356 @@
   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"] [data-element="button-pill"] {
+[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:
@@ -398,7 +836,7 @@
   font-family: var(--cm-font);
 }
 
-[data-component="ai-trigger-button"] [data-element="button-pill"]:hover {
+[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),
@@ -406,22 +844,23 @@
     0 0 0 1px rgba(255, 255, 255, 0.16) inset;
 }
 
-[data-component="ai-trigger-button"][data-dragging="true"] [data-element="button-pill"] {
+[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"] [data-element="mic-trigger"] {
+[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"] [data-element="mic-trigger"]:hover {
+[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"] {
+[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);
@@ -437,16 +876,67 @@
   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"],
-[data-component="ai-chat-panel"][data-theme-effect="glass"] {
+[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"] [data-element="button-pill"] {
+[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%);
 }
@@ -457,7 +947,7 @@
    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"] {
+  [data-component="chat-window"]:where(:not([data-unstyled], [data-unstyled] *)) {
     position: fixed !important;
     left: 0 !important;
     top: 0 !important;
@@ -472,32 +962,37 @@
     max-width: none !important;
     max-height: none !important;
   }
-  [data-component="chat-window-resize-handle"] {
+  [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"] {
+  [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"] {
+  [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"] {
+  [data-component="ai-trigger-button"]:where(:not([data-unstyled], [data-unstyled] *)) {
     z-index: 9998;
   }
 }
 
-[data-component="chat-window"] *,
-[data-component="chat-window"] *::before,
-[data-component="chat-window"] *::after {
+[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"] {
+[data-component="chat-window-header"]:where(:not([data-unstyled], [data-unstyled] *)) {
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -509,11 +1004,11 @@
   flex-shrink: 0;
 }
 
-[data-component="chat-window-header"]:active {
+[data-component="chat-window-header"]:active:where(:not([data-unstyled], [data-unstyled] *)) {
   cursor: grabbing;
 }
 
-[data-component="chat-window-header"] [data-element="title"] {
+[data-component="chat-window-header"]:where(:not([data-unstyled], [data-unstyled] *)) [data-element="title"] {
   font-size: 14px;
   font-weight: 600;
   color: var(--cm-text);
@@ -522,14 +1017,14 @@
   text-overflow: ellipsis;
 }
 
-[data-component="chat-window-header"] [data-element="title-wrap"] {
+[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"] [data-element="actions"] {
+[data-component="chat-window-header"]:where(:not([data-unstyled], [data-unstyled] *)) [data-element="actions"] {
   display: inline-flex;
   align-items: center;
   gap: 0.25rem;
@@ -537,8 +1032,9 @@
   margin-left: 0.5rem;
 }
 
-[data-component="chat-window-header"] [data-action="close"],
-[data-component="chat-window-header"] [data-action="clear"] {
+[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;
@@ -554,20 +1050,21 @@
   transition: background 120ms ease, color 120ms ease;
 }
 
-[data-component="chat-window-header"] [data-action="close"]:hover,
-[data-component="chat-window-header"] [data-action="clear"]:hover:not(:disabled) {
+[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"] [data-action="clear"]:disabled {
+[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"] {
+[data-component="session-switcher"]:where(:not([data-unstyled], [data-unstyled] *)) {
   position: relative;
   display: inline-flex;
   flex: 0 0 auto;
@@ -576,12 +1073,12 @@
   pointer-events: none;
 }
 
-[data-component="session-switcher"] [data-element="trigger"],
-[data-component="session-switcher"] [data-element="popover"] {
+[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"] [data-element="trigger"] {
+[data-component="session-switcher"]:where(:not([data-unstyled], [data-unstyled] *)) [data-element="trigger"] {
   appearance: none;
   border: 1px solid transparent;
   background: transparent;
@@ -598,23 +1095,23 @@
   transition: background 120ms ease, border-color 120ms ease;
 }
 
-[data-component="session-switcher"] [data-element="trigger"]:hover {
+[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] [data-element="trigger"] {
+[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"] [data-element="trigger-title"] {
+[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"] [data-element="popover"] {
+[data-component="session-switcher"]:where(:not([data-unstyled], [data-unstyled] *)) [data-element="popover"] {
   position: absolute;
   top: calc(100% + 0.375rem);
   left: 0;
@@ -632,7 +1129,7 @@
   font-weight: 400;
 }
 
-[data-component="session-switcher"] [data-element="new-session"] {
+[data-component="session-switcher"]:where(:not([data-unstyled], [data-unstyled] *)) [data-element="new-session"] {
   appearance: none;
   border: none;
   background: transparent;
@@ -649,11 +1146,11 @@
   border-bottom: 1px solid var(--cm-border);
 }
 
-[data-component="session-switcher"] [data-element="new-session"]:hover {
+[data-component="session-switcher"]:where(:not([data-unstyled], [data-unstyled] *)) [data-element="new-session"]:hover {
   background: var(--cm-primary-tint);
 }
 
-[data-component="session-switcher"] [data-element="new-session"] [data-element="plus"] {
+[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;
@@ -666,20 +1163,20 @@
   line-height: 1;
 }
 
-[data-component="session-switcher"] [data-element="session-list"] {
+[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"] [data-element="empty"] {
+[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"] [data-element="session-row"] {
+[data-component="session-switcher"]:where(:not([data-unstyled], [data-unstyled] *)) [data-element="session-row"] {
   display: flex;
   align-items: center;
   gap: 0.5rem;
@@ -688,20 +1185,20 @@
   transition: background 120ms ease;
 }
 
-[data-component="session-switcher"] [data-element="session-row"]:hover {
+[data-component="session-switcher"]:where(:not([data-unstyled], [data-unstyled] *)) [data-element="session-row"]:hover {
   background: var(--cm-primary-tint);
 }
 
-[data-component="session-switcher"] [data-element="session-row"][data-active] {
+[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"] [data-element="row-main"] {
+[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"] [data-element="row-title"] {
+[data-component="session-switcher"]:where(:not([data-unstyled], [data-unstyled] *)) [data-element="row-title"] {
   font-size: 13px;
   font-weight: 600;
   color: var(--cm-text);
@@ -710,14 +1207,14 @@
   text-overflow: ellipsis;
 }
 
-[data-component="session-switcher"] [data-element="row-subtitle"] {
+[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"] [data-element="row-delete"],
-[data-component="session-switcher"] [data-element="row-edit"] {
+[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;
@@ -734,27 +1231,27 @@
   flex-shrink: 0;
 }
 
-[data-component="session-switcher"] [data-element="session-row"]:hover [data-element="row-delete"],
-[data-component="session-switcher"] [data-element="session-row"]:hover [data-element="row-edit"] {
+[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"] [data-element="row-edit"]:hover {
+[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"] [data-element="row-delete"]:hover {
+[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"] [data-element="session-row"][data-editing] {
+[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"] [data-element="row-title-input"] {
+[data-component="session-switcher"]:where(:not([data-unstyled], [data-unstyled] *)) [data-element="row-title-input"] {
   width: 100%;
   appearance: none;
   background: transparent;
@@ -769,13 +1266,13 @@
   caret-color: var(--cm-primary);
 }
 
-[data-component="session-switcher"] [data-element="row-title-input"]::placeholder {
+[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"] {
+[data-component="confirm-dialog-backdrop"]:where(:not([data-unstyled], [data-unstyled] *)) {
   position: fixed;
   inset: 0;
   z-index: 10010;
@@ -790,7 +1287,7 @@
   animation: cm-confirm-fade 140ms ease-out;
 }
 
-[data-component="confirm-dialog"] {
+[data-component="confirm-dialog"]:where(:not([data-unstyled], [data-unstyled] *)) {
   background: var(--cm-bg);
   color: var(--cm-text);
   border: 1px solid var(--cm-border);
@@ -807,28 +1304,28 @@
   animation: cm-confirm-pop 160ms cubic-bezier(0.2, 0.9, 0.3, 1.1);
 }
 
-[data-component="confirm-dialog"] [data-element="title"] {
+[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"] [data-element="message"] {
+[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"] [data-element="actions"] {
+[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"] [data-element="actions"] button {
+[data-component="confirm-dialog"]:where(:not([data-unstyled], [data-unstyled] *)) [data-element="actions"] button {
   appearance: none;
   border: 1px solid var(--cm-border);
   background: transparent;
@@ -842,28 +1339,28 @@
   font-family: inherit;
 }
 
-[data-component="confirm-dialog"] [data-element="cancel"]:hover {
+[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"] [data-element="confirm"] {
+[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"] [data-element="confirm"]:hover:not(:disabled) {
+[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"] [data-element="confirm"][data-destructive] {
+[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"] [data-element="confirm"]:disabled {
+[data-component="confirm-dialog"]:where(:not([data-unstyled], [data-unstyled] *)) [data-element="confirm"]:disabled {
   opacity: 0.5;
   cursor: not-allowed;
 }
@@ -878,7 +1375,7 @@
   to   { opacity: 1; transform: scale(1) translateY(0); }
 }
 
-[data-component="chat-window-body"] {
+[data-component="chat-window-body"]:where(:not([data-unstyled], [data-unstyled] *)) {
   flex: 1 1 auto;
   min-height: 0;
   display: flex;
@@ -888,10 +1385,145 @@
 
 /* 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"] > [data-component="ai-chat-panel"] {
+[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);
+}