lemma-sdk 0.2.19 → 0.2.21

package/dist/react/styles.css

@@ -19,6 +19,10 @@
   --state-info: #2f6fb2;
   --state-warning: #c78a2c;
   --shadow-xs: 0 1px 2px rgba(36, 31, 22, 0.08);
+  --assistant-radius-shell: 20px;
+  --assistant-radius-item: 16px;
+  --assistant-radius-bubble: 16px;
+  --assistant-radius-inline: 12px;
   --shadow-sm: 0 8px 24px rgba(36, 31, 22, 0.08);
   --shadow-md: 0 18px 36px rgba(36, 31, 22, 0.1);
   --shadow-lg: 0 24px 48px rgba(36, 31, 22, 0.14);
@@ -105,6 +109,10 @@
   --state-info: #2f6fb2;
   --state-warning: #c78a2c;
   --shadow-xs: 0 1px 2px rgba(36, 31, 22, 0.08);
+  --assistant-radius-shell: 20px;
+  --assistant-radius-item: 16px;
+  --assistant-radius-bubble: 16px;
+  --assistant-radius-inline: 12px;
   --shadow-sm: 0 8px 24px rgba(36, 31, 22, 0.08);
   --shadow-md: 0 18px 36px rgba(36, 31, 22, 0.1);
   --shadow-lg: 0 24px 48px rgba(36, 31, 22, 0.14);
@@ -144,6 +152,41 @@
   height: 100%;
 }
 
+.lemma-assistant-experience[data-radius="none"] {
+  --assistant-radius-shell: 0px;
+  --assistant-radius-item: 0px;
+  --assistant-radius-bubble: 0px;
+  --assistant-radius-inline: 0px;
+}
+
+.lemma-assistant-experience[data-radius="sm"] {
+  --assistant-radius-shell: 14px;
+  --assistant-radius-item: 10px;
+  --assistant-radius-bubble: 10px;
+  --assistant-radius-inline: 8px;
+}
+
+.lemma-assistant-experience[data-radius="md"] {
+  --assistant-radius-shell: 20px;
+  --assistant-radius-item: 16px;
+  --assistant-radius-bubble: 16px;
+  --assistant-radius-inline: 12px;
+}
+
+.lemma-assistant-experience[data-radius="lg"] {
+  --assistant-radius-shell: 24px;
+  --assistant-radius-item: 18px;
+  --assistant-radius-bubble: 18px;
+  --assistant-radius-inline: 14px;
+}
+
+.lemma-assistant-experience[data-radius="xl"] {
+  --assistant-radius-shell: 30px;
+  --assistant-radius-item: 22px;
+  --assistant-radius-bubble: 22px;
+  --assistant-radius-inline: 16px;
+}
+
 .lemma-assistant-markdown {
   color: inherit;
   line-height: 1.7;
@@ -263,7 +306,7 @@
   overflow-x: auto;
   padding: 0.9rem 1rem;
   border: 1px solid color-mix(in srgb, var(--border-default) 82%, transparent);
-  border-radius: 16px;
+  border-radius: var(--assistant-radius-item);
   background: color-mix(in srgb, var(--bg-canvas) 74%, var(--bg-surface));
   box-shadow: inset 0 1px 0 color-mix(in srgb, var(--bg-surface) 60%, transparent);
 }
@@ -284,7 +327,7 @@
   border-collapse: separate;
   border-spacing: 0;
   border: 1px solid color-mix(in srgb, var(--border-default) 82%, transparent);
-  border-radius: 16px;
+  border-radius: var(--assistant-radius-inline);
   background: color-mix(in srgb, var(--bg-surface) 96%, transparent);
 }
 
@@ -442,7 +485,7 @@
 .lemma-assistant-experience-composer {
   background: var(--bg-surface);
   border: 1px solid var(--border-default);
-  border-radius: 20px;
+  border-radius: var(--assistant-radius-shell);
   box-shadow: var(--shadow-lg);
 }
 
@@ -470,7 +513,7 @@
 .lemma-assistant-experience-sidebar-item {
   display: block;
   width: 100%;
-  border-radius: 16px;
+  border-radius: var(--assistant-radius-item);
 }
 
 .lemma-assistant-conversation-list-item-title,
@@ -582,6 +625,7 @@
   background: var(--bg-surface);
   border-color: color-mix(in srgb, var(--border-default) 88%, transparent);
   box-shadow: var(--shadow-sm);
+  border-radius: var(--assistant-radius-shell);
 }
 
 .lemma-assistant-pending-file-chip {
@@ -589,6 +633,7 @@
   align-items: center;
   gap: 6px;
   max-width: 100%;
+  border-radius: var(--assistant-radius-inline);
 }
 
 .lemma-assistant-pending-file-chip-label {
@@ -684,6 +729,7 @@
 
 .lemma-assistant-message-user-bubble {
   max-width: 72ch;
+  border-radius: var(--assistant-radius-bubble);
 }
 
 .lemma-assistant-message-text {
@@ -705,7 +751,7 @@
 .lemma-assistant-tool-rollup-thinking,
 .lemma-assistant-widget-card-frame,
 .lemma-assistant-presented-file > *:first-child {
-  border-radius: 12px;
+  border-radius: var(--assistant-radius-inline);
 }
 
 .lemma-assistant-widget-card-frame {
@@ -772,6 +818,1201 @@
   cursor: default;
 }
 
+.lemma-assistant-shell,
+.lemma-assistant-experience {
+  width: 100%;
+  height: 100%;
+  font-family: inherit;
+  -webkit-font-smoothing: antialiased;
+}
+
+.lemma-assistant-viewport,
+.lemma-assistant-experience-viewport {
+  flex: 1 1 auto;
+  padding: 16px;
+  background: var(--bg-surface);
+}
+
+.lemma-assistant-viewport-inner {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.lemma-assistant-header,
+.lemma-assistant-experience-header,
+.lemma-assistant-conversation-list-header,
+.lemma-assistant-experience-sidebar-header {
+  padding: 12px 16px;
+}
+
+.lemma-assistant-header-badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  border-radius: 999px;
+  background: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary));
+  box-shadow: var(--shadow-xs);
+  flex: 0 0 auto;
+}
+
+.lemma-assistant-header-title,
+.lemma-assistant-conversation-list-title,
+.lemma-assistant-experience-sidebar-title {
+  font-size: 13px;
+  font-weight: 600;
+  line-height: 1.2;
+  color: var(--text-primary);
+}
+
+.lemma-assistant-header-subtitle,
+.lemma-assistant-conversation-list-meta,
+.lemma-assistant-experience-sidebar-meta {
+  margin-top: 4px;
+  font-size: 11px;
+  color: var(--text-tertiary);
+}
+
+.lemma-assistant-conversation-list,
+.lemma-assistant-experience-sidebar {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.lemma-assistant-conversation-list-items,
+.lemma-assistant-experience-sidebar-items {
+  padding: 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.lemma-assistant-conversation-list-item,
+.lemma-assistant-experience-sidebar-item {
+  cursor: pointer;
+  border: 1px solid var(--border-default);
+  background: var(--bg-surface);
+  padding: 10px 12px;
+  text-align: left;
+  color: inherit;
+  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
+}
+
+.lemma-assistant-conversation-list-item:hover,
+.lemma-assistant-experience-sidebar-item:hover {
+  background: var(--bg-subtle);
+}
+
+.lemma-assistant-conversation-list-item-active,
+.lemma-assistant-experience-sidebar-item-active {
+  border-color: color-mix(in srgb, var(--brand-primary) 44%, var(--border-default));
+  background: color-mix(in srgb, var(--brand-glow) 42%, var(--bg-surface));
+}
+
+.lemma-assistant-conversation-list-item-title,
+.lemma-assistant-experience-sidebar-item-title {
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--text-primary);
+}
+
+.lemma-assistant-conversation-list-item-status,
+.lemma-assistant-experience-sidebar-item-status {
+  margin-top: 4px;
+  font-size: 10px;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--text-tertiary);
+}
+
+.lemma-assistant-conversation-list-new,
+.lemma-assistant-experience-sidebar-new,
+.lemma-assistant-experience-plan-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  border-radius: 999px;
+  border: 1px solid color-mix(in srgb, var(--border-default) 88%, transparent);
+  background: color-mix(in srgb, var(--bg-surface) 90%, transparent);
+  padding: 6px 12px;
+  font-size: 11px;
+  font-weight: 500;
+  color: var(--text-secondary);
+  box-shadow: var(--shadow-xs);
+  transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease, transform 160ms ease;
+}
+
+.lemma-assistant-conversation-list-new:hover,
+.lemma-assistant-experience-sidebar-new:hover,
+.lemma-assistant-experience-plan-button:hover {
+  color: var(--text-primary);
+  background: var(--bg-subtle);
+}
+
+.lemma-assistant-model-picker,
+.lemma-assistant-experience-model-picker {
+  height: 32px;
+  border-radius: 999px;
+  border: 1px solid color-mix(in srgb, var(--border-default) 80%, transparent);
+  padding: 0 12px;
+  font-size: 11px;
+  color: var(--text-secondary);
+}
+
+.lemma-assistant-ask-overlay {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.lemma-assistant-ask-overlay-kicker {
+  font-size: 11px;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: var(--text-tertiary);
+}
+
+.lemma-assistant-ask-overlay-copy {
+  min-width: 0;
+}
+
+.lemma-assistant-ask-overlay-question {
+  margin: 4px 0 0;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 1.5;
+  color: var(--text-primary);
+}
+
+.lemma-assistant-ask-overlay-skip,
+.lemma-assistant-ask-overlay-continue {
+  border: 0;
+  border-radius: var(--assistant-radius-inline);
+  background: transparent;
+  padding: 6px 10px;
+  font-size: 12px;
+  transition: background-color 160ms ease, color 160ms ease;
+}
+
+.lemma-assistant-ask-overlay-skip {
+  color: var(--text-tertiary);
+}
+
+.lemma-assistant-ask-overlay-skip:hover {
+  background: var(--bg-subtle);
+  color: var(--text-primary);
+}
+
+.lemma-assistant-ask-overlay-options {
+  max-height: 260px;
+  padding-right: 4px;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.lemma-assistant-ask-overlay-option {
+  border: 1px solid var(--border-default);
+  border-radius: calc(var(--assistant-radius-inline) + 2px);
+  background: var(--bg-canvas);
+  padding: 8px 10px;
+  text-align: left;
+  font-size: 13px;
+  color: var(--text-secondary);
+  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
+}
+
+.lemma-assistant-ask-overlay-option:hover {
+  background: var(--bg-subtle);
+  color: var(--text-primary);
+}
+
+.lemma-assistant-ask-overlay-option-selected {
+  border-color: color-mix(in srgb, var(--brand-primary) 64%, var(--border-subtle));
+  background: color-mix(in srgb, var(--brand-primary) 14%, transparent);
+  color: var(--text-primary);
+}
+
+.lemma-assistant-ask-overlay-option-rank {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 16px;
+  height: 16px;
+  border-radius: 999px;
+  padding: 0 4px;
+  background: var(--brand-primary);
+  color: var(--text-on-brand);
+  font-size: 10px;
+  font-weight: 600;
+}
+
+.lemma-assistant-ask-overlay-option-indicator {
+  display: inline-block;
+  width: 10px;
+  height: 10px;
+  border-radius: 999px;
+  border: 1px solid var(--border-default);
+  background: transparent;
+}
+
+.lemma-assistant-ask-overlay-option-indicator-selected {
+  border-color: var(--brand-primary);
+  background: var(--brand-primary);
+}
+
+.lemma-assistant-ask-overlay-actions {
+  justify-content: flex-end;
+}
+
+.lemma-assistant-ask-overlay-continue {
+  background: var(--bg-subtle);
+  color: var(--text-tertiary);
+  font-weight: 500;
+}
+
+.lemma-assistant-ask-overlay-continue-enabled {
+  background: var(--brand-primary);
+  color: var(--text-on-brand);
+}
+
+.lemma-assistant-ask-overlay-continue-enabled:hover {
+  background: color-mix(in srgb, var(--brand-primary) 88%, var(--text-primary));
+}
+
+.lemma-assistant-composer-status-rail {
+  padding: 0 8px 4px;
+}
+
+.lemma-assistant-composer-status,
+.lemma-assistant-experience-status {
+  display: flex;
+  align-items: center;
+  transition: opacity 160ms ease;
+}
+
+.lemma-assistant-composer-pending,
+.lemma-assistant-experience-pending {
+  align-items: center;
+  padding: 0 4px 6px;
+}
+
+.lemma-assistant-pending-file-chip {
+  padding: 4px 8px;
+  background: var(--bg-subtle);
+  color: var(--text-secondary);
+  font-size: 11px;
+}
+
+.lemma-assistant-pending-file-chip-label {
+  max-width: 180px;
+}
+
+.lemma-assistant-pending-file-chip-remove {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  border-radius: 999px;
+}
+
+.lemma-assistant-pending-file-chip-remove:hover {
+  background: var(--bg-canvas);
+}
+
+.lemma-assistant-status-pill {
+  min-height: 30px;
+  max-width: 100%;
+  padding: 6px 12px;
+  border-radius: 999px;
+  border: 1px solid color-mix(in srgb, var(--brand-primary) 24%, var(--border-default));
+  background: color-mix(in srgb, var(--brand-glow) 28%, var(--bg-surface));
+  color: var(--text-secondary);
+  font-size: 12px;
+  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, opacity 160ms ease;
+}
+
+.lemma-assistant-status-pill-subtle {
+  border-color: color-mix(in srgb, var(--border-default) 72%, transparent);
+  background: color-mix(in srgb, var(--bg-surface) 90%, transparent);
+  color: var(--text-tertiary);
+}
+
+.lemma-assistant-status-pill-dot,
+.lemma-assistant-status-pill-dot-core,
+.lemma-assistant-status-pill-dot-ping {
+  display: inline-flex;
+  width: 10px;
+  height: 10px;
+  border-radius: 999px;
+}
+
+.lemma-assistant-status-pill-dot {
+  position: relative;
+  flex: 0 0 auto;
+}
+
+.lemma-assistant-status-pill-dot-ping {
+  position: absolute;
+  inset: 0;
+  background: color-mix(in srgb, var(--brand-primary) 45%, transparent);
+}
+
+.lemma-assistant-status-pill-dot-core {
+  position: relative;
+  background: var(--brand-primary);
+}
+
+.lemma-assistant-status-pill-label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.lemma-assistant-presented-files {
+  padding-top: 4px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.lemma-assistant-presented-file-card {
+  border: 1px solid color-mix(in srgb, var(--border-default) 78%, transparent);
+  border-radius: var(--assistant-radius-shell);
+  background: linear-gradient(
+    180deg,
+    color-mix(in srgb, var(--bg-surface) 96%, transparent),
+    color-mix(in srgb, var(--bg-canvas) 76%, transparent)
+  );
+  padding: 10px 12px;
+}
+
+.lemma-assistant-presented-file-name {
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--text-primary);
+}
+
+.lemma-assistant-presented-file-path {
+  margin-top: 4px;
+  font-size: 12px;
+  color: var(--text-tertiary);
+  word-break: break-word;
+}
+
+.lemma-assistant-plan-strip {
+  padding: 10px 12px;
+}
+
+.lemma-assistant-plan-strip-summary {
+  gap: 8px;
+}
+
+.lemma-assistant-plan-strip-title {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--text-primary);
+}
+
+.lemma-assistant-plan-strip-count,
+.lemma-assistant-plan-strip-current {
+  font-size: 11px;
+  color: var(--text-tertiary);
+}
+
+.lemma-assistant-plan-strip-current {
+  margin-top: 6px;
+  color: var(--text-secondary);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.lemma-assistant-plan-strip-active {
+  display: inline-flex;
+  align-items: center;
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--brand-primary) 16%, transparent);
+  padding: 2px 6px;
+  font-size: 10px;
+  font-weight: 500;
+  color: var(--brand-primary);
+}
+
+.lemma-assistant-plan-strip-hide,
+.lemma-assistant-plan-strip-toggle {
+  border: 0;
+  background: transparent;
+  padding: 0;
+  font-size: 11px;
+  font-weight: 500;
+  color: var(--text-tertiary);
+  transition: color 160ms ease;
+}
+
+.lemma-assistant-plan-strip-toggle {
+  font-size: 10px;
+  color: var(--brand-primary);
+}
+
+.lemma-assistant-plan-strip-hide:hover,
+.lemma-assistant-plan-strip-toggle:hover {
+  color: var(--text-primary);
+}
+
+.lemma-assistant-plan-strip-steps {
+  margin-top: 8px;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.lemma-assistant-plan-strip-step {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  font-size: 11px;
+}
+
+.lemma-assistant-plan-strip-step-dot {
+  margin-top: 4px;
+  width: 8px;
+  height: 8px;
+  border-radius: 999px;
+  flex: 0 0 auto;
+}
+
+.lemma-assistant-plan-strip-step-dot-completed {
+  background: var(--state-success);
+}
+
+.lemma-assistant-plan-strip-step-dot-in-progress {
+  background: var(--brand-primary);
+}
+
+.lemma-assistant-plan-strip-step-dot-pending {
+  background: var(--border-default);
+}
+
+.lemma-assistant-plan-strip-step-label {
+  line-height: 1.45;
+}
+
+.lemma-assistant-plan-strip-step-label-completed {
+  color: var(--text-tertiary);
+  text-decoration: line-through;
+}
+
+.lemma-assistant-plan-strip-step-label-in-progress {
+  color: var(--brand-primary);
+  font-weight: 500;
+}
+
+.lemma-assistant-plan-strip-step-label-pending {
+  color: var(--text-secondary);
+}
+
+.lemma-assistant-plan-strip-footer {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding-top: 2px;
+}
+
+.lemma-assistant-plan-strip-hidden-count {
+  font-size: 10px;
+  color: var(--text-tertiary);
+}
+
+.lemma-assistant-thinking {
+  padding: 0 4px;
+  animation: lemma-assistant-fade-in 220ms ease;
+}
+
+.lemma-assistant-thinking-label {
+  gap: 10px;
+  font-size: 12px;
+  line-height: 1.4;
+  color: var(--text-tertiary);
+}
+
+.lemma-assistant-thinking-dot,
+.lemma-assistant-tool-rollup-dot {
+  display: inline-flex;
+  width: 8px;
+  height: 8px;
+  border-radius: 999px;
+  background: var(--brand-accent);
+  flex: 0 0 auto;
+}
+
+.lemma-assistant-thinking-text,
+.lemma-assistant-reasoning-label-streaming {
+  font-weight: 600;
+  color: transparent;
+  background: linear-gradient(110deg, var(--text-secondary), 35%, var(--brand-accent), 50%, var(--text-secondary), 65%);
+  background-size: 250% 100%;
+  -webkit-background-clip: text;
+  background-clip: text;
+  animation: lemma-assistant-shimmer 1.6s linear infinite;
+}
+
+.lemma-assistant-empty-state-hero {
+  margin-bottom: 24px;
+}
+
+.lemma-assistant-empty-state-badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  margin-bottom: 12px;
+  border-radius: 999px;
+  background: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary));
+  box-shadow: var(--shadow-xs);
+}
+
+.lemma-assistant-empty-state-badge-icon,
+.lemma-assistant-experience-header-badge-icon {
+  color: var(--text-on-brand);
+}
+
+.lemma-assistant-empty-state-badge-icon {
+  font-size: 18px;
+}
+
+.lemma-assistant-empty-state-title {
+  margin: 0;
+  font-size: 15px;
+  font-weight: 600;
+  color: var(--text-primary);
+}
+
+.lemma-assistant-empty-state-copy {
+  max-width: 24rem;
+  margin: 6px auto 0;
+  font-size: 13px;
+  line-height: 1.6;
+  color: var(--text-tertiary);
+}
+
+.lemma-assistant-empty-state-suggestion {
+  cursor: pointer;
+  justify-content: flex-start;
+  border: 1px solid var(--border-default);
+  border-radius: calc(var(--assistant-radius-inline) + 2px);
+  background: var(--bg-surface);
+  padding: 10px 12px;
+  text-align: left;
+  font-size: 12px;
+  color: var(--text-secondary);
+  transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease, transform 160ms ease;
+}
+
+.lemma-assistant-empty-state-suggestion:hover {
+  border-color: color-mix(in srgb, var(--brand-accent) 52%, var(--border-subtle));
+  background: color-mix(in srgb, var(--brand-glow) 72%, var(--bg-surface));
+  color: var(--text-primary);
+}
+
+.lemma-assistant-empty-state-suggestion-icon {
+  font-size: 16px;
+  opacity: 0.72;
+  transition: opacity 160ms ease;
+}
+
+.lemma-assistant-empty-state-suggestion:hover .lemma-assistant-empty-state-suggestion-icon {
+  opacity: 1;
+}
+
+.lemma-assistant-empty-state-suggestion-text {
+  flex: 1 1 auto;
+  line-height: 1.35;
+}
+
+.lemma-assistant-empty-state-suggestion-arrow {
+  color: var(--text-tertiary);
+  opacity: 0;
+  transform: translateX(0);
+  transition: color 160ms ease, opacity 160ms ease, transform 160ms ease;
+}
+
+.lemma-assistant-empty-state-suggestion:hover .lemma-assistant-empty-state-suggestion-arrow {
+  opacity: 1;
+  color: var(--state-warning);
+  transform: translateX(2px);
+}
+
+.lemma-assistant-reasoning,
+.lemma-assistant-widget-card,
+.lemma-assistant-tool-rollup,
+.lemma-assistant-tool-rollup-item {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.lemma-assistant-reasoning-summary {
+  list-style: none;
+  cursor: pointer;
+  gap: 6px;
+  font-size: 12px;
+  line-height: 1.4;
+  color: var(--text-tertiary);
+}
+
+.lemma-assistant-reasoning-summary::-webkit-details-marker {
+  display: none;
+}
+
+.lemma-assistant-reasoning-caret,
+.lemma-assistant-tool-rollup-caret,
+.lemma-assistant-inline-tool-call-caret {
+  transition: transform 160ms ease;
+}
+
+.lemma-assistant-reasoning[open] .lemma-assistant-reasoning-caret {
+  transform: rotate(90deg);
+}
+
+.lemma-assistant-reasoning-label {
+  font-weight: 600;
+  color: var(--text-secondary);
+}
+
+.lemma-assistant-reasoning-body,
+.lemma-assistant-tool-rollup-details,
+.lemma-assistant-tool-details-panel {
+  margin-top: 4px;
+  padding-left: 16px;
+  border-left: 1px solid var(--border-default);
+}
+
+.lemma-assistant-reasoning-text,
+.lemma-assistant-tool-rollup-thinking-text,
+.lemma-assistant-tool-details-code-text {
+  margin: 0;
+  white-space: pre-wrap;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
+}
+
+.lemma-assistant-reasoning-text {
+  font-size: 11px;
+  line-height: 1.45;
+  color: var(--text-tertiary);
+}
+
+.lemma-assistant-tool-details-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+}
+
+.lemma-assistant-tool-details-title {
+  font-size: 9px;
+  font-weight: 500;
+  letter-spacing: 0.03em;
+  text-transform: none;
+  color: color-mix(in srgb, var(--text-tertiary) 92%, var(--text-secondary));
+}
+
+.lemma-assistant-tool-details-label,
+.lemma-assistant-tool-rollup-thinking-title {
+  font-size: 9px;
+  font-weight: 500;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+  color: color-mix(in srgb, var(--text-tertiary) 88%, var(--text-secondary));
+}
+
+.lemma-assistant-tool-details-link {
+  border: 0;
+  background: transparent;
+  padding: 0;
+  font-size: 9px;
+  font-weight: 500;
+  color: color-mix(in srgb, var(--state-success) 78%, var(--text-tertiary));
+}
+
+.lemma-assistant-tool-details-panel-custom {
+  min-width: 0;
+}
+
+.lemma-assistant-tool-details-grid {
+  display: grid;
+  grid-template-columns: repeat(1, minmax(0, 1fr));
+  gap: 8px;
+}
+
+@media (min-width: 640px) {
+  .lemma-assistant-tool-details-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+.lemma-assistant-tool-details-section {
+  min-width: 0;
+}
+
+.lemma-assistant-tool-details-code {
+  margin-top: 4px;
+  max-height: 96px;
+  overflow: auto;
+  border-radius: var(--assistant-radius-inline);
+  background: color-mix(in srgb, var(--bg-canvas) 70%, transparent);
+  padding: 8px;
+  font-size: 11px;
+}
+
+.lemma-assistant-tool-details-code-text,
+.lemma-assistant-tool-rollup-thinking-text {
+  color: var(--text-secondary);
+}
+
+.lemma-assistant-inline-tool-call {
+  border: 0;
+  background: transparent;
+  padding: 0;
+  width: 100%;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  text-align: left;
+  font-size: 10px;
+  line-height: 1.45;
+  color: var(--text-secondary);
+  transition: color 160ms ease;
+}
+
+.lemma-assistant-inline-tool-call:hover {
+  color: var(--text-primary);
+}
+
+.lemma-assistant-inline-tool-call[data-state="executing"] {
+  color: var(--state-info);
+}
+
+.lemma-assistant-inline-tool-call[data-state="complete"] {
+  color: var(--state-success);
+}
+
+.lemma-assistant-inline-tool-call[data-state="failed"] {
+  color: var(--state-error);
+}
+
+.lemma-assistant-inline-tool-call-name {
+  font-size: 9.5px;
+  font-weight: 500;
+  white-space: nowrap;
+  color: color-mix(in srgb, currentColor 78%, var(--text-tertiary));
+}
+
+.lemma-assistant-inline-tool-call-summary {
+  font-size: 9.5px;
+  color: color-mix(in srgb, currentColor 72%, var(--text-tertiary));
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.lemma-assistant-inline-tool-call-caret {
+  margin-left: auto;
+}
+
+.lemma-assistant-inline-tool-call[data-selected="true"] .lemma-assistant-inline-tool-call-caret {
+  transform: rotate(90deg);
+}
+
+.lemma-assistant-tool-rollup-toggle {
+  border: 0;
+  background: transparent;
+  padding: 0;
+  gap: 6px;
+  font-size: 9.5px;
+  line-height: 1.45;
+  color: color-mix(in srgb, var(--text-tertiary) 92%, var(--text-secondary));
+  transition: color 160ms ease;
+}
+
+.lemma-assistant-tool-rollup-toggle:hover {
+  color: color-mix(in srgb, var(--text-secondary) 92%, var(--text-primary));
+}
+
+.lemma-assistant-tool-rollup-toggle[data-expanded="true"] .lemma-assistant-tool-rollup-caret {
+  transform: rotate(90deg);
+}
+
+.lemma-assistant-tool-rollup-summary {
+  font-size: 9.5px;
+  color: color-mix(in srgb, var(--text-tertiary) 92%, var(--text-secondary));
+}
+
+.lemma-assistant-tool-rollup-summary-working {
+  font-weight: 500;
+  color: color-mix(in srgb, var(--text-secondary) 88%, var(--text-primary));
+}
+
+.lemma-assistant-tool-rollup-thinking {
+  border-radius: var(--assistant-radius-inline);
+  background: var(--bg-canvas);
+  padding: 8px 10px;
+}
+
+.lemma-assistant-tool-rollup-thinking-text {
+  max-height: 10rem;
+  overflow: auto;
+  font-size: 11px;
+  line-height: 1.45;
+}
+
+.lemma-assistant-widget-card-header {
+  align-items: center;
+}
+
+.lemma-assistant-widget-card-title {
+  font-size: 9.5px;
+  font-weight: 500;
+  letter-spacing: 0.02em;
+  color: color-mix(in srgb, var(--text-tertiary) 84%, var(--text-secondary));
+}
+
+.lemma-assistant-widget-card-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  border-radius: 6px;
+  padding: 2px 6px;
+  font-size: 10px;
+  font-weight: 500;
+}
+
+.lemma-assistant-widget-card-badge-rendering {
+  background: color-mix(in srgb, var(--state-info) 16%, transparent);
+  color: var(--state-info);
+}
+
+.lemma-assistant-widget-card-badge-failed {
+  background: color-mix(in srgb, var(--state-error) 12%, transparent);
+  color: var(--state-error);
+}
+
+.lemma-assistant-widget-card-badge-ready {
+  background: color-mix(in srgb, var(--state-success) 12%, transparent);
+  color: var(--state-success);
+}
+
+.lemma-assistant-widget-card-error,
+.lemma-assistant-widget-card-missing {
+  margin: 0;
+  font-size: 11px;
+}
+
+.lemma-assistant-widget-card-error {
+  color: var(--state-error);
+}
+
+.lemma-assistant-widget-card-missing {
+  color: var(--text-secondary);
+}
+
+.lemma-assistant-widget-card-frame {
+  display: block;
+  border: 0;
+  background: transparent;
+}
+
+.lemma-assistant-message {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.lemma-assistant-message-assistant {
+  padding: 2px 4px;
+}
+
+.lemma-assistant-message-user {
+  display: flex;
+  justify-content: flex-end;
+  max-width: none;
+}
+
+.lemma-assistant-message-user-bubble {
+  margin-left: auto;
+  max-width: 72ch;
+  border-radius: var(--assistant-radius-bubble);
+  padding: 10px 14px;
+  background: var(--brand-primary);
+  color: var(--text-on-brand);
+}
+
+.lemma-assistant-message-header {
+  font-size: 11px;
+  color: var(--text-tertiary);
+}
+
+.lemma-assistant-message-header-dot {
+  display: inline-block;
+  width: 6px;
+  height: 6px;
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--brand-primary) 40%, transparent);
+  flex: 0 0 auto;
+}
+
+.lemma-assistant-message-body {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.lemma-assistant-message-text {
+  font-size: 13px;
+  line-height: 1.6;
+  color: var(--text-secondary);
+}
+
+.lemma-assistant-experience {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.lemma-assistant-experience-sidebar {
+  display: none;
+}
+
+.lemma-assistant-experience-main {
+  display: flex;
+  flex: 1 1 auto;
+  min-height: 0;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.lemma-assistant-experience-card {
+  display: flex;
+  flex: 1 1 auto;
+  min-height: 0;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.lemma-assistant-experience-new {
+  border: 0;
+  background: transparent;
+  width: 32px;
+  height: 32px;
+  border-radius: 999px;
+  color: var(--text-tertiary);
+}
+
+.lemma-assistant-experience-new:hover {
+  background: var(--bg-subtle);
+  color: var(--text-secondary);
+}
+
+.lemma-assistant-experience-viewport {
+  min-height: 180px;
+}
+
+.lemma-assistant-experience-loading,
+.lemma-assistant-experience-loading-older {
+  display: flex;
+  justify-content: center;
+}
+
+.lemma-assistant-experience-loading {
+  padding: 24px 0;
+}
+
+.lemma-assistant-experience-loading-older {
+  padding: 4px 0;
+}
+
+.lemma-assistant-experience-loading-text {
+  font-size: 14px;
+  color: var(--text-tertiary);
+}
+
+.lemma-assistant-experience-loading-older-text {
+  font-size: 12px;
+  color: var(--text-tertiary);
+}
+
+.lemma-assistant-experience-inline-status {
+  display: flex;
+  align-items: center;
+  min-height: 38px;
+  padding: 0 4px;
+}
+
+.lemma-assistant-experience-inline-status-pill {
+  transition: opacity 160ms ease;
+}
+
+.lemma-assistant-experience-inline-status-pill[data-has-content="true"] {
+  opacity: 0.8;
+}
+
+.lemma-assistant-experience-error {
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+  border: 1px solid color-mix(in srgb, var(--state-error) 48%, var(--border-subtle));
+  border-radius: calc(var(--assistant-radius-inline) + 2px);
+  background: color-mix(in srgb, var(--state-error) 12%, transparent);
+  padding: 12px;
+  font-size: 12px;
+  color: var(--state-error);
+}
+
+.lemma-assistant-experience-error-title {
+  margin: 0;
+  font-weight: 600;
+}
+
+.lemma-assistant-experience-error-copy {
+  margin: 4px 0 0;
+}
+
+.lemma-assistant-experience-bottom-spacer {
+  height: 56px;
+  flex: 0 0 auto;
+}
+
+.lemma-assistant-experience-bottom-anchor {
+  height: 1px;
+}
+
+.lemma-assistant-experience-composer-body {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.lemma-assistant-experience-input-row {
+  position: relative;
+}
+
+.lemma-assistant-experience-file-input {
+  display: none;
+}
+
+.lemma-assistant-experience-upload,
+.lemma-assistant-experience-send {
+  border: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 36px;
+  border-radius: 999px;
+  transition: background-color 160ms ease, color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
+}
+
+.lemma-assistant-experience-upload {
+  margin: 0 0 6px 4px;
+  background: var(--bg-subtle);
+  color: var(--text-secondary);
+}
+
+.lemma-assistant-experience-upload:hover:not(:disabled):not([data-disabled="true"]) {
+  background: var(--bg-canvas);
+  color: var(--text-primary);
+}
+
+.lemma-assistant-experience-upload:disabled,
+.lemma-assistant-experience-upload[data-disabled="true"] {
+  color: var(--text-tertiary);
+}
+
+.lemma-assistant-experience-textarea {
+  flex: 1 1 auto;
+  min-height: 48px;
+  max-height: 220px;
+  border: 0;
+  background: transparent;
+  padding: 10px 12px;
+  font-size: 14px;
+  line-height: 1.6;
+  color: var(--text-primary);
+  outline: none;
+}
+
+.lemma-assistant-experience-textarea::placeholder {
+  color: var(--text-tertiary);
+}
+
+.lemma-assistant-experience-send-wrap {
+  padding: 0 6px 6px 0;
+}
+
+.lemma-assistant-experience-send[data-state="busy"] {
+  background: var(--text-primary);
+  color: var(--text-inverse);
+}
+
+.lemma-assistant-experience-send[data-state="busy"]:hover {
+  background: color-mix(in srgb, var(--text-primary) 80%, transparent);
+  transform: scale(1.05);
+}
+
+.lemma-assistant-experience-send[data-state="ready"] {
+  background: var(--brand-primary);
+  color: var(--text-on-brand);
+  box-shadow: var(--shadow-xs);
+}
+
+.lemma-assistant-experience-send[data-state="ready"]:hover {
+  background: color-mix(in srgb, var(--brand-primary) 88%, var(--text-primary));
+}
+
+.lemma-assistant-experience-send[data-state="idle"] {
+  background: var(--bg-subtle);
+  color: var(--text-tertiary);
+}
+
+@media (min-width: 1024px) {
+  .lemma-assistant-experience[data-show-conversation-list="true"] {
+    display: grid;
+    grid-template-columns: 280px minmax(0, 1fr);
+    align-items: stretch;
+  }
+
+  .lemma-assistant-experience[data-show-conversation-list="true"] .lemma-assistant-experience-sidebar {
+    display: flex;
+    min-height: 0;
+  }
+}
+
+@keyframes lemma-assistant-fade-in {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes lemma-assistant-shimmer {
+  0% {
+    background-position: 0% 50%;
+  }
+
+  100% {
+    background-position: 250% 50%;
+  }
+}
+
 @keyframes lemma-assistant-ping {
   0% {
     opacity: 0.55;