glirastes 0.5.0 → 0.5.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (58) hide show
  1. package/CHANGELOG.md +17 -1
  2. package/README.md +32 -47
  3. package/dist/cjs/embed/chat-styles.generated.d.ts +1 -1
  4. package/dist/cjs/embed/chat-styles.generated.js +1 -1
  5. package/dist/cjs/react/components/approval-card.js +20 -1
  6. package/dist/cjs/react/locale-de.js +3 -0
  7. package/dist/cjs/react/provider/ai-chat-provider.js +3 -0
  8. package/dist/cjs/react/styles.css +26 -0
  9. package/dist/cjs/react/types.d.ts +5 -0
  10. package/dist/cjs/react/utils/create-approval-description.js +12 -6
  11. package/dist/cjs/runtime/glirastes.d.ts +5 -4
  12. package/dist/cjs/runtime/glirastes.js +4 -2
  13. package/dist/cjs/runtime/index.d.ts +1 -0
  14. package/dist/cjs/runtime/index.js +4 -1
  15. package/dist/cjs/runtime/local-limits.d.ts +6 -0
  16. package/dist/cjs/runtime/local-limits.js +26 -0
  17. package/dist/cjs/runtime/runtime-mode.d.ts +1 -1
  18. package/dist/cjs/runtime/runtime-mode.js +1 -1
  19. package/dist/cjs/runtime/sdk-version.d.ts +2 -0
  20. package/dist/cjs/runtime/sdk-version.js +5 -0
  21. package/dist/cjs/server/lancer/client.js +2 -1
  22. package/dist/cli/commands/connect.js +6 -6
  23. package/dist/cli/commands/connect.js.map +1 -1
  24. package/dist/cli/index.js +2 -2
  25. package/dist/cli/index.js.map +1 -1
  26. package/dist/embed/chat-styles.generated.d.ts +1 -1
  27. package/dist/embed/chat-styles.generated.js +1 -1
  28. package/dist/embed/chat-styles.generated.js.map +1 -1
  29. package/dist/react/components/approval-card.js +20 -1
  30. package/dist/react/components/approval-card.js.map +1 -1
  31. package/dist/react/locale-de.js +3 -0
  32. package/dist/react/locale-de.js.map +1 -1
  33. package/dist/react/provider/ai-chat-provider.js +3 -0
  34. package/dist/react/provider/ai-chat-provider.js.map +1 -1
  35. package/dist/react/styles.css +26 -0
  36. package/dist/react/types.d.ts +5 -0
  37. package/dist/react/utils/create-approval-description.js +12 -6
  38. package/dist/react/utils/create-approval-description.js.map +1 -1
  39. package/dist/runtime/glirastes.d.ts +5 -4
  40. package/dist/runtime/glirastes.js +4 -2
  41. package/dist/runtime/glirastes.js.map +1 -1
  42. package/dist/runtime/index.d.ts +1 -0
  43. package/dist/runtime/index.js +1 -0
  44. package/dist/runtime/index.js.map +1 -1
  45. package/dist/runtime/local-limits.d.ts +6 -0
  46. package/dist/runtime/local-limits.js +23 -0
  47. package/dist/runtime/local-limits.js.map +1 -0
  48. package/dist/runtime/runtime-mode.d.ts +1 -1
  49. package/dist/runtime/runtime-mode.js +1 -1
  50. package/dist/runtime/runtime-mode.js.map +1 -1
  51. package/dist/runtime/sdk-version.d.ts +2 -0
  52. package/dist/runtime/sdk-version.js +3 -0
  53. package/dist/runtime/sdk-version.js.map +1 -0
  54. package/dist/server/lancer/client.js +2 -1
  55. package/dist/server/lancer/client.js.map +1 -1
  56. package/package.json +1 -1
  57. package/skills/integrating-glirastes-nextjs/SKILL.md +2 -9
  58. package/skills/setting-up-glirastes/SKILL.md +40 -4
package/dist/cjs/embed/chat-styles.generated.js CHANGED
@@ -3,4 +3,4 @@ Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.CHAT_STYLES = void 0;
4
4
  // Generated by scripts/generate-embed-styles.mjs from src/react/styles.css.
5
5
  // Do not edit by hand.
6
- exports.CHAT_STYLES = "/* glirastes — default chat panel styles.\n Auto-injected when you render <AiChat /> or <AiChatPanel />.\n Themes: every color / radius / font below is driven by CSS variables\n that can be overridden per-instance via the `theme` prop, which emits\n inline `--cm-*` vars on the root elements. The defaults below act as\n the fallback when no `theme` prop is given. */\n\n:where(\n [data-component=\"ai-chat-panel\"],\n [data-component=\"chat-window\"],\n [data-component=\"ai-trigger-button\"],\n [data-component=\"assistant-shell\"],\n [data-component=\"assistant-bubble\"],\n [data-component=\"assistant-toggle\"]\n):where(:not([data-unstyled], [data-unstyled] *)) {\n --cm-primary: #6366f1;\n --cm-primary-soft: #818cf8;\n --cm-primary-tint: rgba(99, 102, 241, 0.12);\n --cm-primary-ring: rgba(99, 102, 241, 0.18);\n --cm-bg: #ffffff;\n --cm-bg-muted: #f9fafb;\n --cm-bubble-user: #e0e7ff;\n --cm-bubble-assistant: #f3f4f6;\n --cm-border: #e5e7eb;\n --cm-text: #111827;\n --cm-text-muted: #6b7280;\n --cm-danger: #dc2626;\n --cm-radius: 0.875rem;\n --cm-radius-sm: 0.5rem;\n --cm-font: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif;\n}\n\n[data-component=\"ai-chat-panel\"]:where(:not([data-unstyled], [data-unstyled] *)) {\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n width: 100%;\n height: 100%;\n min-height: 520px;\n max-height: 100%;\n background: var(--cm-bg);\n color: var(--cm-text);\n border: 1px solid var(--cm-border);\n border-radius: var(--cm-radius);\n overflow: hidden;\n font-family: var(--cm-font);\n font-size: 14px;\n line-height: 1.5;\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.03);\n}\n\n[data-component=\"ai-chat-panel\"]:where(:not([data-unstyled], [data-unstyled] *)) *,\n[data-component=\"ai-chat-panel\"]:where(:not([data-unstyled], [data-unstyled] *)) *::before,\n[data-component=\"ai-chat-panel\"]:where(:not([data-unstyled], [data-unstyled] *)) *::after {\n box-sizing: border-box;\n}\n\n/* ---------- Error banner ---------- */\n[data-component=\"ai-chat-panel\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component=\"error-banner\"] {\n padding: 0.75rem 1rem;\n background: #fef2f2;\n color: #991b1b;\n border-bottom: 1px solid #fecaca;\n font-size: 13px;\n}\n\n/* ---------- Empty state ---------- */\n[data-component=\"ai-chat-panel\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component=\"empty-state\"] {\n flex: 1;\n display: grid;\n place-items: center;\n padding: 2rem;\n color: var(--cm-text-muted);\n text-align: center;\n}\n\n/* ---------- Message list ---------- */\n[data-component=\"ai-chat-panel\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component=\"message-list\"] {\n flex: 1;\n min-height: 0;\n overflow-y: auto;\n padding: 1rem;\n display: flex;\n flex-direction: column;\n gap: 0.75rem;\n scroll-behavior: smooth;\n}\n[data-component=\"ai-chat-panel\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component=\"message-list\"] > [data-action=\"load-more\"] {\n align-self: center;\n padding: 0.375rem 0.75rem;\n font: inherit;\n font-size: 12px;\n background: transparent;\n border: 1px solid var(--cm-border);\n border-radius: var(--cm-radius-sm);\n color: var(--cm-text-muted);\n cursor: pointer;\n}\n\n/* ---------- Message bubble ---------- */\n[data-component=\"ai-chat-panel\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component=\"message-bubble\"] {\n max-width: 85%;\n padding: 0.625rem 0.875rem;\n border-radius: var(--cm-radius);\n word-wrap: break-word;\n overflow-wrap: anywhere;\n}\n[data-component=\"ai-chat-panel\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component=\"message-bubble\"][data-role=\"user\"] {\n align-self: flex-end;\n background: var(--cm-bubble-user);\n color: var(--cm-text);\n}\n[data-component=\"ai-chat-panel\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component=\"message-bubble\"][data-role=\"assistant\"] {\n align-self: flex-start;\n background: var(--cm-bubble-assistant);\n}\n[data-component=\"ai-chat-panel\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component=\"message-bubble\"][data-role=\"system\"] {\n align-self: center;\n background: var(--cm-bg-muted);\n color: var(--cm-text-muted);\n font-style: italic;\n font-size: 13px;\n}\n\n/* ---------- Markdown content ---------- */\n[data-component=\"ai-chat-panel\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component=\"markdown\"] p {\n margin: 0 0 0.5rem 0;\n}\n[data-component=\"ai-chat-panel\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component=\"markdown\"] p:last-child {\n margin: 0;\n}\n[data-component=\"ai-chat-panel\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component=\"markdown\"] pre {\n background: rgba(0, 0, 0, 0.05);\n padding: 0.625rem 0.75rem;\n border-radius: var(--cm-radius-sm);\n overflow-x: auto;\n font-size: 12px;\n margin: 0.5rem 0;\n}\n[data-component=\"ai-chat-panel\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component=\"markdown\"] code {\n background: rgba(0, 0, 0, 0.06);\n padding: 0.125rem 0.25rem;\n border-radius: 3px;\n font-size: 0.9em;\n font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;\n}\n[data-component=\"ai-chat-panel\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component=\"markdown\"] pre code {\n background: transparent;\n padding: 0;\n}\n[data-component=\"ai-chat-panel\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component=\"markdown\"] ul,\n[data-component=\"ai-chat-panel\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component=\"markdown\"] ol {\n margin: 0.25rem 0 0.5rem 1.25rem;\n padding: 0;\n}\n\n/* ---------- Chat input / mention input ---------- */\n[data-component=\"ai-chat-panel\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component=\"chat-input\"],\n[data-component=\"ai-chat-panel\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component=\"mention-input\"] {\n flex-shrink: 0;\n display: flex;\n gap: 0.5rem;\n align-items: flex-end;\n padding: 0.75rem 1rem;\n border-top: 1px solid var(--cm-border);\n background: var(--cm-bg);\n}\n[data-component=\"ai-chat-panel\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component=\"chat-input\"] textarea,\n[data-component=\"ai-chat-panel\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component=\"mention-input\"] textarea {\n flex: 1;\n min-height: 40px;\n max-height: 160px;\n resize: none;\n padding: 0.5rem 0.75rem;\n background: var(--cm-bg-muted);\n border: 1px solid var(--cm-border);\n border-radius: var(--cm-radius-sm);\n color: var(--cm-text);\n font: inherit;\n outline: none;\n transition: border-color 0.15s, box-shadow 0.15s;\n}\n[data-component=\"ai-chat-panel\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component=\"chat-input\"] textarea:focus,\n[data-component=\"ai-chat-panel\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component=\"mention-input\"] textarea:focus {\n border-color: var(--cm-primary);\n box-shadow: 0 0 0 3px var(--cm-primary-ring);\n}\n[data-component=\"ai-chat-panel\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component=\"chat-input\"] textarea::placeholder,\n[data-component=\"ai-chat-panel\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component=\"mention-input\"] textarea::placeholder {\n color: var(--cm-text-muted);\n}\n\n/* ---------- Send / stop buttons ---------- */\n[data-component=\"ai-chat-panel\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-action=\"send\"] {\n padding: 0.5rem 1rem;\n background: var(--cm-primary);\n color: #fff;\n border: none;\n border-radius: var(--cm-radius-sm);\n font: inherit;\n font-weight: 500;\n cursor: pointer;\n transition: opacity 0.15s, transform 0.05s;\n}\n[data-component=\"ai-chat-panel\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-action=\"send\"]:hover:not(:disabled) {\n opacity: 0.92;\n}\n[data-component=\"ai-chat-panel\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-action=\"send\"]:active:not(:disabled) {\n transform: translateY(1px);\n}\n[data-component=\"ai-chat-panel\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-action=\"send\"]:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n[data-component=\"ai-chat-panel\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-action=\"stop\"] {\n padding: 0.5rem 0.875rem;\n background: transparent;\n color: var(--cm-text);\n border: 1px solid var(--cm-border);\n border-radius: var(--cm-radius-sm);\n font: inherit;\n cursor: pointer;\n}\n\n/* ---------- Suggestion bar ---------- */\n[data-component=\"ai-chat-panel\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component=\"suggestion-bar\"] {\n display: flex;\n flex-wrap: wrap;\n gap: 0.5rem;\n padding: 0.5rem 1rem 0.25rem 1rem;\n}\n[data-component=\"ai-chat-panel\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component=\"suggestion-chip\"] {\n padding: 0.375rem 0.75rem;\n background: var(--cm-bg-muted);\n border: 1px solid var(--cm-border);\n border-radius: 9999px;\n font: inherit;\n font-size: 12px;\n color: var(--cm-text);\n cursor: pointer;\n transition: background 0.15s, border-color 0.15s;\n}\n[data-component=\"ai-chat-panel\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component=\"suggestion-chip\"]:hover {\n background: var(--cm-bubble-user);\n border-color: var(--cm-primary);\n}\n\n/* ---------- Typing indicator ---------- */\n[data-component=\"ai-chat-panel\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component=\"typing-indicator\"] {\n display: flex;\n gap: 4px;\n padding: 0.5rem 1rem;\n align-items: center;\n}\n[data-component=\"ai-chat-panel\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component=\"typing-indicator\"] [data-element=\"dot\"] {\n width: 6px;\n height: 6px;\n background: var(--cm-text-muted);\n border-radius: 50%;\n animation: cm-chat-typing 1.4s infinite ease-in-out both;\n}\n[data-component=\"ai-chat-panel\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component=\"typing-indicator\"] [data-element=\"dot\"]:nth-child(2) {\n animation-delay: 0.16s;\n}\n[data-component=\"ai-chat-panel\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component=\"typing-indicator\"] [data-element=\"dot\"]:nth-child(3) {\n animation-delay: 0.32s;\n}\n@keyframes cm-chat-typing {\n 0%, 80%, 100% { transform: scale(0.7); opacity: 0.5; }\n 40% { transform: scale(1); opacity: 1; }\n}\n\n/* ---------- Truncation banner ---------- */\n[data-component=\"ai-chat-panel\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component=\"truncation-banner\"] {\n padding: 0.75rem 1rem;\n background: #fef9c3;\n color: #713f12;\n border-top: 1px solid #fde047;\n display: flex;\n justify-content: space-between;\n align-items: center;\n gap: 1rem;\n font-size: 13px;\n}\n[data-component=\"ai-chat-panel\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component=\"truncation-banner\"] [data-element=\"actions\"] {\n display: flex;\n gap: 0.5rem;\n}\n[data-component=\"ai-chat-panel\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component=\"truncation-banner\"] button {\n padding: 0.3125rem 0.625rem;\n background: #fff;\n border: 1px solid #d4a574;\n border-radius: var(--cm-radius-sm);\n font: inherit;\n font-size: 12px;\n cursor: pointer;\n}\n\n/* ---------- Approval cards ---------- */\n[data-component=\"ai-chat-panel\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component=\"approval-card\"],\n[data-component=\"ai-chat-panel\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component=\"bulk-approval-card\"] {\n margin: 0 1rem 0.75rem 1rem;\n padding: 0.875rem 1rem;\n background: #fffbeb;\n border: 1px solid #fcd34d;\n border-radius: var(--cm-radius);\n font-size: 13px;\n}\n[data-component=\"ai-chat-panel\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component=\"approval-card\"] [data-element=\"header\"],\n[data-component=\"ai-chat-panel\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component=\"bulk-approval-card\"] [data-element=\"header\"] {\n font-weight: 500;\n color: #713f12;\n margin-bottom: 0.5rem;\n}\n[data-component=\"ai-chat-panel\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component=\"approval-card\"] [data-element=\"details\"],\n[data-component=\"ai-chat-panel\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component=\"bulk-approval-card\"] [data-element=\"details\"] {\n background: rgba(255, 255, 255, 0.6);\n border: 1px solid rgba(252, 211, 77, 0.6);\n border-radius: var(--cm-radius-sm);\n padding: 0.5rem 0.625rem;\n margin-bottom: 0.625rem;\n font-size: 12px;\n color: #78350f;\n}\n[data-component=\"ai-chat-panel\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-element=\"detail-line\"] {\n display: flex;\n gap: 0.5rem;\n line-height: 1.5;\n}\n[data-component=\"ai-chat-panel\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-element=\"detail-label\"] {\n flex: 0 0 auto;\n min-width: 5.5rem;\n opacity: 0.75;\n}\n[data-component=\"ai-chat-panel\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-element=\"detail-label\"]::after {\n content: \":\";\n}\n[data-component=\"ai-chat-panel\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-element=\"detail-value\"] {\n min-width: 0;\n font-weight: 500;\n overflow-wrap: anywhere;\n}\n[data-component=\"ai-chat-panel\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component=\"approval-card\"] [data-element=\"actions\"],\n[data-component=\"ai-chat-panel\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component=\"bulk-approval-card\"] [data-element=\"actions\"] {\n display: flex;\n gap: 0.5rem;\n}\n[data-component=\"ai-chat-panel\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-action=\"approve\"] {\n padding: 0.375rem 0.875rem;\n background: #16a34a;\n color: #fff;\n border: none;\n border-radius: var(--cm-radius-sm);\n font: inherit;\n font-size: 12px;\n font-weight: 500;\n cursor: pointer;\n}\n[data-component=\"ai-chat-panel\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-action=\"approve\"]:hover:not(:disabled) {\n background: #15803d;\n}\n[data-component=\"ai-chat-panel\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-action=\"reject\"] {\n padding: 0.375rem 0.875rem;\n background: #fff;\n color: #dc2626;\n border: 1px solid #fca5a5;\n border-radius: var(--cm-radius-sm);\n font: inherit;\n font-size: 12px;\n cursor: pointer;\n}\n\n/* ---------- Mention chip ---------- */\n[data-component=\"ai-chat-panel\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component=\"mention-chip\"] {\n display: inline-flex;\n align-items: center;\n padding: 0.125rem 0.5rem;\n background: var(--cm-bubble-user);\n color: #3730a3;\n border-radius: 9999px;\n font-size: 12px;\n font-weight: 500;\n}\n\n/* ---------- Pipeline timeline ---------- */\n[data-component=\"ai-chat-panel\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component=\"pipeline-timeline\"] {\n padding: 0.5rem 1rem;\n border-bottom: 1px solid var(--cm-border);\n background: var(--cm-bg-muted);\n font-size: 12px;\n color: var(--cm-text-muted);\n}\n\n/* ---------- Activity log and plan ---------- */\n[data-component=\"ai-chat-panel\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component=\"activity-log\"],\n[data-component=\"ai-chat-panel\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component=\"plan-checklist\"] {\n margin: 0 0 0.375rem;\n font-size: 12px;\n color: var(--cm-text-muted);\n}\n[data-component=\"ai-chat-panel\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component=\"activity-log\"] [data-element=\"activity-summary\"] {\n display: inline-flex;\n align-items: center;\n gap: 0.375rem;\n cursor: pointer;\n list-style: none;\n user-select: none;\n}\n[data-component=\"ai-chat-panel\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component=\"activity-log\"] [data-element=\"activity-summary\"]::-webkit-details-marker {\n display: none;\n}\n[data-component=\"ai-chat-panel\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component=\"activity-log\"][data-state=\"running\"] [data-element=\"activity-summary\"] {\n color: var(--cm-text);\n}\n[data-component=\"ai-chat-panel\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component=\"activity-log\"] [data-element=\"activity-steps\"],\n[data-component=\"ai-chat-panel\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component=\"plan-checklist\"] [data-element=\"plan-items\"] {\n list-style: none;\n margin: 0.25rem 0 0;\n padding: 0 0 0 0.375rem;\n display: flex;\n flex-direction: column;\n gap: 0.125rem;\n}\n[data-component=\"ai-chat-panel\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component=\"activity-log\"] [data-element=\"activity-steps\"] {\n border-left: 1px solid var(--cm-border);\n margin-left: 0.375rem;\n}\n[data-component=\"ai-chat-panel\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component=\"activity-log\"] [data-element=\"activity-step\"],\n[data-component=\"ai-chat-panel\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component=\"plan-checklist\"] [data-element=\"plan-item\"] {\n display: flex;\n align-items: baseline;\n gap: 0.375rem;\n}\n[data-component=\"ai-chat-panel\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component=\"activity-log\"] [data-element=\"icon\"],\n[data-component=\"ai-chat-panel\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component=\"plan-checklist\"] [data-element=\"icon\"] {\n flex-shrink: 0;\n align-self: center;\n}\n[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\"],\n[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\"] {\n color: var(--cm-primary);\n}\n[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\"],\n[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\"] {\n color: #dc2626;\n}\n[data-component=\"ai-chat-panel\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component=\"activity-log\"] [data-element=\"detail\"] {\n opacity: 0.8;\n overflow-wrap: anywhere;\n}\n[data-component=\"ai-chat-panel\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component=\"activity-log\"] [data-element=\"detail\"]::before {\n content: \"· \";\n}\n[data-component=\"ai-chat-panel\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component=\"activity-log\"] [data-element=\"activity-notice\"] {\n margin: 0.25rem 0 0;\n}\n[data-component=\"ai-chat-panel\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component=\"plan-checklist\"] [data-element=\"title\"] {\n font-weight: 600;\n color: var(--cm-text);\n}\n[data-component=\"ai-chat-panel\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component=\"plan-checklist\"] [data-element=\"plan-item\"][data-status=\"in_progress\"] {\n color: var(--cm-text);\n}\n[data-component=\"ai-chat-panel\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component=\"plan-checklist\"] [data-element=\"plan-item\"][data-status=\"pending\"] {\n opacity: 0.55;\n}\n\n/* ---------- Tool result ---------- */\n[data-component=\"ai-chat-panel\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component=\"tool-result\"] {\n margin: 0.375rem 0;\n padding: 0.5rem 0.75rem;\n background: rgba(0, 0, 0, 0.03);\n border: 1px solid var(--cm-border);\n border-radius: var(--cm-radius-sm);\n font-size: 12px;\n color: var(--cm-text-muted);\n}\n\n/* ---------- Provider composer, '/' and '@' list ---------- */\n/* The wrapper above is flex, but the editor, mic and Send sit inside a bare\n <form> (classNames.input is empty by default). Without this rule the form\n shrink-wraps its contents and the editor and its list collapse to ~111px. */\n[data-component=\"ai-chat-panel\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component=\"mention-input\"][data-mode=\"providers\"] > form {\n display: flex;\n flex: 1;\n min-width: 0;\n gap: 0.5rem;\n align-items: flex-end;\n flex-wrap: wrap;\n}\n[data-component=\"ai-chat-panel\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component=\"rich-mention-input\"] {\n position: relative;\n flex: 1;\n min-width: 0;\n}\n[data-component=\"ai-chat-panel\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component=\"rich-mention-input\"] [data-element=\"editor\"] {\n box-sizing: border-box;\n min-height: 40px;\n max-height: 160px;\n overflow-y: auto;\n overflow-wrap: anywhere;\n padding: 0.5rem 0.75rem;\n background: var(--cm-bg-muted);\n border: 1px solid var(--cm-border);\n border-radius: var(--cm-radius-sm);\n color: var(--cm-text);\n outline: none;\n}\n[data-component=\"ai-chat-panel\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component=\"rich-mention-input\"] [data-element=\"editor\"]:focus {\n border-color: var(--cm-primary);\n box-shadow: 0 0 0 3px var(--cm-primary-ring);\n}\n[data-component=\"ai-chat-panel\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component=\"rich-mention-input\"] [data-element=\"placeholder\"] {\n position: absolute;\n top: 0.5rem;\n left: 0.75rem;\n color: var(--cm-text-muted);\n pointer-events: none;\n}\n[data-component=\"ai-chat-panel\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component=\"rich-mention-input\"] [data-component=\"mention-dropdown\"] {\n position: absolute;\n left: 0;\n right: 0;\n bottom: calc(100% + 0.25rem);\n z-index: 20;\n display: flex;\n flex-direction: column;\n max-height: min(40vh, 16rem);\n overflow-y: auto;\n background: var(--cm-bg);\n border: 1px solid var(--cm-border);\n border-radius: var(--cm-radius-sm);\n box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);\n}\n[data-component=\"ai-chat-panel\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component=\"mention-dropdown-item\"] {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n gap: 0.125rem;\n width: 100%;\n padding: 0.5rem 0.75rem;\n background: transparent;\n border: none;\n color: var(--cm-text);\n font: inherit;\n text-align: left;\n cursor: pointer;\n}\n[data-component=\"ai-chat-panel\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component=\"mention-dropdown-item\"][data-selected=\"true\"] {\n background: var(--cm-primary-tint);\n}\n[data-component=\"ai-chat-panel\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component=\"mention-dropdown-item\"] [data-element=\"description\"] {\n font-size: 12px;\n color: var(--cm-text-muted);\n}\n\n/* ---------- Chat interactions: entity actions and command arguments ---------- */\n/* The item keeps `width: 100%` from its own rule, so it gets a small flex basis here: with the full\n row as basis the shrink is shared by basis and squeezes the chips below their own width. The row\n wraps instead, which keeps the chips on one line beside the result and drops them below it only\n when the result cannot keep 8rem. */\n[data-component=\"ai-chat-panel\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component=\"mention-dropdown\"] [data-element=\"result-row\"] {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: 0.25rem;\n padding-right: 0.5rem;\n}\n[data-component=\"ai-chat-panel\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-element=\"result-row\"] > [data-component=\"mention-dropdown-item\"] {\n flex: 1 1 8rem;\n min-width: 0;\n}\n[data-component=\"ai-chat-panel\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-element=\"entity-actions\"] {\n display: flex;\n flex: 0 0 auto;\n flex-wrap: wrap;\n justify-content: flex-end;\n gap: 0.25rem;\n}\n[data-component=\"ai-chat-panel\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component=\"mention-action\"] {\n padding: 0.125rem 0.5rem;\n background: var(--cm-bg-muted);\n border: 1px solid var(--cm-border);\n border-radius: 999px;\n color: var(--cm-text);\n font: inherit;\n font-size: 12px;\n white-space: nowrap;\n cursor: pointer;\n}\n[data-component=\"ai-chat-panel\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component=\"mention-action\"][data-selected=\"true\"] {\n background: var(--cm-primary-tint);\n border-color: var(--cm-primary);\n}\n[data-component=\"ai-chat-panel\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component=\"command-arguments\"] {\n box-sizing: border-box;\n display: flex;\n flex-wrap: wrap;\n align-items: flex-end;\n gap: 0.5rem;\n max-width: 100%;\n margin: 0 0 0.5rem;\n padding: 0.75rem;\n background: var(--cm-bg);\n border: 1px solid var(--cm-border);\n border-radius: var(--cm-radius-sm);\n}\n/* The composer wrapper is one flex row and its `> form` rule (flex: 1) outranks the rule above,\n which would park the argument form beside the editor. The wrapper wraps and the form takes\n the full first row; the wrapper's gap supplies the space below it. */\n[data-component=\"ai-chat-panel\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component=\"mention-input\"][data-mode=\"providers\"] {\n flex-wrap: wrap;\n}\n[data-component=\"ai-chat-panel\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component=\"mention-input\"][data-mode=\"providers\"] > form[data-component=\"command-arguments\"] {\n flex: 1 1 100%;\n margin: 0;\n}\n[data-component=\"command-arguments\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-element=\"title\"] {\n flex: 1 1 100%;\n margin: 0;\n font-weight: 500;\n overflow-wrap: anywhere;\n}\n[data-component=\"command-arguments\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-element=\"error\"] {\n flex: 1 1 100%;\n margin: 0;\n color: var(--cm-danger);\n font-size: 12px;\n}\n[data-component=\"command-arguments\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-element=\"field\"] {\n position: relative;\n display: flex;\n flex: 1 1 10rem;\n flex-direction: column;\n gap: 0.25rem;\n min-width: 0;\n color: var(--cm-text-muted);\n font-size: 12px;\n}\n[data-component=\"command-arguments\"]:where(:not([data-unstyled], [data-unstyled] *)) input,\n[data-component=\"command-arguments\"]:where(:not([data-unstyled], [data-unstyled] *)) select {\n box-sizing: border-box;\n width: 100%;\n padding: 0.375rem 0.5rem;\n background: var(--cm-bg-muted);\n border: 1px solid var(--cm-border);\n border-radius: var(--cm-radius-sm);\n color: var(--cm-text);\n font: inherit;\n font-size: 14px;\n}\n[data-component=\"command-arguments\"]:where(:not([data-unstyled], [data-unstyled] *)) input:focus,\n[data-component=\"command-arguments\"]:where(:not([data-unstyled], [data-unstyled] *)) select:focus {\n outline: none;\n border-color: var(--cm-primary);\n box-shadow: 0 0 0 3px var(--cm-primary-ring);\n}\n[data-component=\"command-arguments\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-element=\"options\"] {\n position: absolute;\n left: 0;\n right: 0;\n bottom: calc(100% + 0.25rem);\n z-index: 20;\n max-height: 12rem;\n margin: 0;\n padding: 0;\n overflow-y: auto;\n list-style: none;\n background: var(--cm-bg);\n border: 1px solid var(--cm-border);\n border-radius: var(--cm-radius-sm);\n box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);\n}\n[data-component=\"command-arguments\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-element=\"options\"] [role=\"option\"] {\n padding: 0.375rem 0.5rem;\n color: var(--cm-text);\n cursor: pointer;\n}\n[data-component=\"command-arguments\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-element=\"options\"] [role=\"option\"][data-selected=\"true\"] {\n background: var(--cm-primary-tint);\n}\n/* The dropdown rule for descriptions is scoped to the mention items; without this one the span runs\n on after the label (`Alice Examplealice@example.com`). */\n[data-component=\"command-arguments\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-element=\"options\"] [data-element=\"description\"] {\n display: block;\n font-size: 12px;\n color: var(--cm-text-muted);\n}\n[data-component=\"command-arguments\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-element=\"actions\"] {\n display: flex;\n gap: 0.375rem;\n}\n[data-component=\"command-arguments\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-action=\"run\"],\n[data-component=\"command-arguments\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-action=\"cancel\"] {\n padding: 0.375rem 0.75rem;\n border-radius: var(--cm-radius-sm);\n font: inherit;\n font-size: 14px;\n cursor: pointer;\n}\n[data-component=\"command-arguments\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-action=\"run\"] {\n background: var(--cm-primary);\n border: 1px solid var(--cm-primary);\n color: #ffffff;\n}\n[data-component=\"command-arguments\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-action=\"cancel\"] {\n background: transparent;\n border: 1px solid var(--cm-border);\n color: var(--cm-text);\n}\n\n/* ---------- Structured clarification ---------- */\n[data-component=\"ai-chat-panel\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component=\"clarification-card\"] {\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n max-width: 100%;\n margin: 0.375rem 0;\n padding: 0.75rem;\n background: var(--cm-bg);\n border: 1px solid var(--cm-border);\n border-radius: var(--cm-radius-sm);\n}\n[data-component=\"clarification-card\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-element=\"question\"] {\n margin: 0;\n font-weight: 500;\n overflow-wrap: anywhere;\n}\n[data-component=\"clarification-card\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-element=\"options\"] {\n display: flex;\n flex-wrap: wrap;\n gap: 0.375rem;\n}\n[data-component=\"clarification-card\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-action=\"answer-option\"] {\n display: inline-flex;\n flex-direction: column;\n align-items: flex-start;\n max-width: 100%;\n padding: 0.375rem 0.75rem;\n background: var(--cm-bg-muted);\n border: 1px solid var(--cm-border);\n border-radius: 9999px;\n color: var(--cm-text);\n font: inherit;\n font-size: 13px;\n text-align: left;\n overflow-wrap: anywhere;\n cursor: pointer;\n}\n[data-component=\"clarification-card\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-action=\"answer-option\"]:disabled {\n opacity: 0.6;\n cursor: default;\n}\n[data-component=\"clarification-card\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-element=\"description\"] {\n font-size: 11px;\n color: var(--cm-text-muted);\n}\n[data-component=\"clarification-card\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-element=\"free-text\"] {\n display: flex;\n gap: 0.375rem;\n}\n[data-component=\"clarification-card\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-element=\"free-text\"] input {\n flex: 1;\n min-width: 0;\n padding: 0.375rem 0.625rem;\n background: var(--cm-bg-muted);\n border: 1px solid var(--cm-border);\n border-radius: var(--cm-radius-sm);\n color: var(--cm-text);\n font: inherit;\n}\n[data-component=\"clarification-card\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-action=\"answer-free-text\"] {\n padding: 0.375rem 0.75rem;\n background: var(--cm-primary);\n border: none;\n border-radius: var(--cm-radius-sm);\n color: #fff;\n font: inherit;\n cursor: pointer;\n}\n[data-component=\"clarification-card\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-action=\"answer-free-text\"]:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n\n/* ---------- Voice: mic, push-to-talk, retry, recording bar ---------- */\n[data-component=\"ai-chat-panel\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component=\"voice-input-addon\"],\n[data-component=\"ai-chat-panel\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-action=\"retry-recording\"] {\n flex-shrink: 0;\n min-width: 40px;\n min-height: 40px;\n padding: 0 0.625rem;\n background: var(--cm-bg-muted);\n border: 1px solid var(--cm-border);\n border-radius: var(--cm-radius-sm);\n color: var(--cm-text);\n font: inherit;\n cursor: pointer;\n touch-action: none;\n user-select: none;\n -webkit-user-select: none;\n -webkit-touch-callout: none;\n}\n[data-component=\"ai-chat-panel\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component=\"voice-input-addon\"][data-state=\"recording\"] {\n border-color: var(--cm-danger);\n color: var(--cm-danger);\n}\n[data-component=\"ai-chat-panel\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component=\"recording-bar\"] {\n min-width: 0;\n}\n/* The inline bar is `width: 100%` (inline style). Next to the editor, mic and\n Send it would get ~100px at 375px wide, too little for the live words. A\n non-auto flex-basis beats that width, so the bar takes a row of its own\n below them (form wraps; `order` moves it behind Send, which stays beside\n the editor). The row exists only while the bar is mounted. */\n[data-component=\"ai-chat-panel\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component=\"mention-input\"][data-mode=\"providers\"] > form > [data-component=\"recording-bar\"] {\n flex: 1 1 100%;\n order: 1;\n}\n\n/* ===========================================================================\n Drop-in defaults for the floating trigger button and chat window.\n These exist so <LangGraphAiChat /> / <VercelAiChat /> \"just work\" with\n zero consumer styling. Override by passing className/buttonClassName.\n =========================================================================== */\n\n[data-component=\"ai-trigger-button\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-element=\"button-pill\"] {\n background: linear-gradient(135deg, var(--cm-primary) 0%, var(--cm-primary-soft) 100%);\n color: #ffffff;\n box-shadow:\n 0 10px 25px -5px var(--cm-primary-tint),\n 0 4px 10px -3px var(--cm-primary-tint),\n 0 0 0 1px rgba(255, 255, 255, 0.12) inset;\n transition: transform 150ms ease, box-shadow 150ms ease;\n font-family: var(--cm-font);\n}\n\n[data-component=\"ai-trigger-button\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-element=\"button-pill\"]:hover {\n transform: translateY(-1px);\n box-shadow:\n 0 14px 30px -5px var(--cm-primary-tint),\n 0 6px 12px -3px var(--cm-primary-tint),\n 0 0 0 1px rgba(255, 255, 255, 0.16) inset;\n}\n\n[data-component=\"ai-trigger-button\"][data-dragging=\"true\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-element=\"button-pill\"] {\n transform: scale(1.04);\n}\n\n[data-component=\"ai-trigger-button\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-element=\"mic-trigger\"] {\n background: rgba(255, 255, 255, 0.22) !important;\n color: #ffffff;\n transition: background 150ms ease;\n}\n\n[data-component=\"ai-trigger-button\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-element=\"mic-trigger\"]:hover {\n background: rgba(255, 255, 255, 0.34) !important;\n}\n\n/* ---------- Chat window shell ---------- */\n[data-component=\"chat-window\"]:where(:not([data-unstyled], [data-unstyled] *)) {\n box-sizing: border-box;\n background: var(--cm-bg);\n color: var(--cm-text);\n border: 1px solid var(--cm-border);\n border-radius: var(--cm-radius);\n box-shadow:\n 0 25px 50px -12px rgba(0, 0, 0, 0.25),\n 0 0 0 1px rgba(0, 0, 0, 0.04);\n display: flex;\n flex-direction: column;\n overflow: hidden;\n z-index: 10000;\n font-family: var(--cm-font);\n font-size: 14px;\n}\n\n[data-component=\"chat-window\"][data-mode=\"sidebar\"]:where(:not([data-unstyled], [data-unstyled] *)) {\n border-radius: 0;\n box-shadow: none;\n}\n[data-component=\"chat-window\"][data-mode=\"sidebar\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component=\"chat-window-header\"] {\n cursor: default;\n}\n[data-component=\"chat-window-sidebar-resize\"]:where(:not([data-unstyled], [data-unstyled] *)) {\n position: absolute;\n inset: 0 auto 0 0;\n width: 8px;\n z-index: 11;\n cursor: ew-resize;\n touch-action: none;\n}\n[data-component=\"chat-window-sidebar-resize\"]:hover:where(:not([data-unstyled], [data-unstyled] *)),\n[data-component=\"chat-window-sidebar-resize\"]:focus-visible:where(:not([data-unstyled], [data-unstyled] *)) {\n background: var(--cm-primary-tint);\n outline: 2px solid var(--cm-primary);\n outline-offset: -2px;\n}\n[data-component=\"chat-window-rail\"]:where(:not([data-unstyled], [data-unstyled] *)) {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 12px;\n padding: 8px 0;\n height: 100%;\n}\n[data-component=\"chat-window-rail\"]:where(:not([data-unstyled], [data-unstyled] *)) span {\n writing-mode: vertical-rl;\n flex: 1;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n[data-component=\"chat-window-rail\"]:where(:not([data-unstyled], [data-unstyled] *)) button {\n appearance: none;\n border: 0;\n border-radius: var(--cm-radius-sm);\n width: 32px;\n min-height: 32px;\n background: transparent;\n color: inherit;\n cursor: pointer;\n font-size: 20px;\n}\n[data-component=\"chat-window-rail\"]:where(:not([data-unstyled], [data-unstyled] *)) button:hover {\n background: var(--cm-primary-tint);\n}\n\n/* ---------- Glassmorphism theme effect ----------\n Applied when the resolved theme sets `effect: 'glass'` (e.g. the\n `liquid-glass` preset). Adds a real backdrop blur so translucent\n backgrounds read as frosted glass instead of a flat wash. */\n[data-component=\"chat-window\"][data-theme-effect=\"glass\"]:where(:not([data-unstyled], [data-unstyled] *)),\n[data-component=\"ai-chat-panel\"][data-theme-effect=\"glass\"]:where(:not([data-unstyled], [data-unstyled] *)) {\n backdrop-filter: blur(24px) saturate(180%);\n -webkit-backdrop-filter: blur(24px) saturate(180%);\n}\n[data-component=\"ai-trigger-button\"][data-theme-effect=\"glass\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-element=\"button-pill\"] {\n backdrop-filter: blur(16px) saturate(180%);\n -webkit-backdrop-filter: blur(16px) saturate(180%);\n}\n\n/* ---------- Mobile: take over the whole screen ----------\n Below 640px the floating window pattern breaks down — the\n window is too small to contain a useful conversation and\n edge-resize handles/drag headers don't map to touch gestures.\n Pin to the viewport, kill the radius, and disable edge handles. */\n@media (max-width: 640px) {\n [data-component=\"chat-window\"]:where(:not([data-unstyled], [data-unstyled] *)) {\n position: fixed !important;\n left: 0 !important;\n top: 0 !important;\n right: 0 !important;\n bottom: 0 !important;\n width: 100vw !important;\n height: 100dvh !important;\n transform: none !important;\n border: none !important;\n border-radius: 0 !important;\n box-shadow: none !important;\n max-width: none !important;\n max-height: none !important;\n }\n [data-component=\"chat-window\"][data-collapsed=\"true\"]:where(:not([data-unstyled], [data-unstyled] *)) {\n left: auto !important;\n width: 44px !important;\n }\n [data-component=\"chat-window-resize-handle\"]:where(:not([data-unstyled], [data-unstyled] *)),\n [data-component=\"chat-window-sidebar-resize\"]:where(:not([data-unstyled], [data-unstyled] *)) {\n display: none !important;\n }\n [data-component=\"chat-window-header\"]:where(:not([data-unstyled], [data-unstyled] *)) {\n cursor: default !important;\n padding-top: max(0.75rem, env(safe-area-inset-top));\n padding-left: max(1rem, env(safe-area-inset-left));\n padding-right: max(1rem, env(safe-area-inset-right));\n }\n [data-component=\"chat-window-body\"]:where(:not([data-unstyled], [data-unstyled] *)) {\n padding-bottom: env(safe-area-inset-bottom);\n }\n /* Hide the pill while the chat is open — on mobile we own the\n whole viewport, so the pill would overlap the input bar. */\n [data-component=\"ai-trigger-button\"]:where(:not([data-unstyled], [data-unstyled] *)) {\n z-index: 9998;\n }\n}\n\n[data-component=\"chat-window\"]:where(:not([data-unstyled], [data-unstyled] *)) *,\n[data-component=\"chat-window\"]:where(:not([data-unstyled], [data-unstyled] *)) *::before,\n[data-component=\"chat-window\"]:where(:not([data-unstyled], [data-unstyled] *)) *::after {\n box-sizing: border-box;\n}\n\n[data-component=\"chat-window-header\"]:where(:not([data-unstyled], [data-unstyled] *)) {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 0.75rem 1rem;\n border-bottom: 1px solid var(--cm-border);\n background: var(--cm-bg-muted);\n cursor: grab;\n user-select: none;\n flex-shrink: 0;\n}\n\n[data-component=\"chat-window-header\"]:active:where(:not([data-unstyled], [data-unstyled] *)) {\n cursor: grabbing;\n}\n\n[data-component=\"chat-window-header\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-element=\"title\"] {\n font-size: 14px;\n font-weight: 600;\n color: var(--cm-text);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n[data-component=\"chat-window-header\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-element=\"title-wrap\"] {\n flex: 1 1 auto;\n min-width: 0;\n display: flex;\n align-items: center;\n}\n\n[data-component=\"chat-window-header\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-element=\"actions\"] {\n display: inline-flex;\n align-items: center;\n gap: 0.25rem;\n flex-shrink: 0;\n margin-left: 0.5rem;\n}\n\n[data-component=\"chat-window-header\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-action=\"close\"],\n[data-component=\"chat-window-header\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-action=\"layout\"],\n[data-component=\"chat-window-header\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-action=\"clear\"] {\n appearance: none;\n border: none;\n background: transparent;\n width: 1.75rem;\n height: 1.75rem;\n border-radius: var(--cm-radius-sm);\n line-height: 1;\n color: var(--cm-text-muted);\n cursor: pointer;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n transition: background 120ms ease, color 120ms ease;\n}\n\n[data-component=\"chat-window-header\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-action=\"close\"]:hover,\n[data-component=\"chat-window-header\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-action=\"layout\"]:hover,\n[data-component=\"chat-window-header\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-action=\"clear\"]:hover:not(:disabled) {\n background: var(--cm-primary-tint);\n color: var(--cm-text);\n}\n\n[data-component=\"chat-window-header\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-action=\"clear\"]:disabled {\n opacity: 0.35;\n cursor: not-allowed;\n}\n\n/* ---------- Session switcher ---------- */\n\n[data-component=\"session-switcher\"]:where(:not([data-unstyled], [data-unstyled] *)) {\n position: relative;\n display: inline-flex;\n flex: 0 0 auto;\n min-width: 0;\n font-family: var(--cm-font);\n pointer-events: none;\n}\n\n[data-component=\"session-switcher\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-element=\"trigger\"],\n[data-component=\"session-switcher\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-element=\"popover\"] {\n pointer-events: auto;\n}\n\n[data-component=\"session-switcher\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-element=\"trigger\"] {\n appearance: none;\n border: 1px solid transparent;\n background: transparent;\n padding: 0.25rem 0.5rem;\n border-radius: var(--cm-radius-sm);\n display: inline-flex;\n align-items: center;\n gap: 0.375rem;\n max-width: 100%;\n color: var(--cm-text);\n font-size: 14px;\n font-weight: 600;\n cursor: pointer;\n transition: background 120ms ease, border-color 120ms ease;\n}\n\n[data-component=\"session-switcher\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-element=\"trigger\"]:hover {\n background: var(--cm-primary-tint);\n}\n\n[data-component=\"session-switcher\"][data-open]:where(:not([data-unstyled], [data-unstyled] *)) [data-element=\"trigger\"] {\n background: var(--cm-primary-tint);\n border-color: var(--cm-primary);\n}\n\n[data-component=\"session-switcher\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-element=\"trigger-title\"] {\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n max-width: 14rem;\n}\n\n[data-component=\"session-switcher\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-element=\"popover\"] {\n position: absolute;\n top: calc(100% + 0.375rem);\n left: 0;\n min-width: 16rem;\n max-width: 22rem;\n max-height: 22rem;\n overflow: hidden;\n display: flex;\n flex-direction: column;\n background: var(--cm-bg);\n border: 1px solid var(--cm-border);\n border-radius: var(--cm-radius);\n box-shadow: 0 18px 40px -12px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(0, 0, 0, 0.04);\n z-index: 10001;\n font-weight: 400;\n}\n\n[data-component=\"session-switcher\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-element=\"new-session\"] {\n appearance: none;\n border: none;\n background: transparent;\n width: 100%;\n text-align: left;\n padding: 0.625rem 0.875rem;\n display: flex;\n align-items: center;\n gap: 0.5rem;\n font-size: 13px;\n font-weight: 600;\n color: var(--cm-primary);\n cursor: pointer;\n border-bottom: 1px solid var(--cm-border);\n}\n\n[data-component=\"session-switcher\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-element=\"new-session\"]:hover {\n background: var(--cm-primary-tint);\n}\n\n[data-component=\"session-switcher\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-element=\"new-session\"] [data-element=\"plus\"] {\n display: inline-flex;\n width: 1.25rem;\n height: 1.25rem;\n border-radius: 9999px;\n align-items: center;\n justify-content: center;\n background: var(--cm-primary);\n color: #ffffff;\n font-size: 14px;\n line-height: 1;\n}\n\n[data-component=\"session-switcher\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-element=\"session-list\"] {\n flex: 1 1 auto;\n overflow-y: auto;\n padding: 0.25rem 0;\n}\n\n[data-component=\"session-switcher\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-element=\"empty\"] {\n padding: 1rem 0.875rem;\n color: var(--cm-text-muted);\n font-size: 13px;\n text-align: center;\n}\n\n[data-component=\"session-switcher\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-element=\"session-row\"] {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n padding: 0.5rem 0.875rem;\n cursor: pointer;\n transition: background 120ms ease;\n}\n\n[data-component=\"session-switcher\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-element=\"session-row\"]:hover {\n background: var(--cm-primary-tint);\n}\n\n[data-component=\"session-switcher\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-element=\"session-row\"][data-active] {\n background: var(--cm-primary-tint);\n}\n\n[data-component=\"session-switcher\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-element=\"row-main\"] {\n flex: 1 1 auto;\n min-width: 0;\n}\n\n[data-component=\"session-switcher\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-element=\"row-title\"] {\n font-size: 13px;\n font-weight: 600;\n color: var(--cm-text);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n[data-component=\"session-switcher\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-element=\"row-subtitle\"] {\n font-size: 11px;\n color: var(--cm-text-muted);\n margin-top: 0.125rem;\n}\n\n[data-component=\"session-switcher\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-element=\"row-delete\"],\n[data-component=\"session-switcher\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-element=\"row-edit\"] {\n appearance: none;\n border: none;\n background: transparent;\n width: 1.5rem;\n height: 1.5rem;\n border-radius: var(--cm-radius-sm);\n color: var(--cm-text-muted);\n cursor: pointer;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n opacity: 0;\n transition: opacity 120ms ease, background 120ms ease, color 120ms ease;\n flex-shrink: 0;\n}\n\n[data-component=\"session-switcher\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-element=\"session-row\"]:hover [data-element=\"row-delete\"],\n[data-component=\"session-switcher\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-element=\"session-row\"]:hover [data-element=\"row-edit\"] {\n opacity: 1;\n}\n\n[data-component=\"session-switcher\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-element=\"row-edit\"]:hover {\n background: var(--cm-primary-tint);\n color: var(--cm-text);\n}\n\n[data-component=\"session-switcher\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-element=\"row-delete\"]:hover {\n background: rgba(220, 38, 38, 0.1);\n color: var(--cm-danger);\n}\n\n[data-component=\"session-switcher\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-element=\"session-row\"][data-editing] {\n background: var(--cm-primary-tint);\n cursor: text;\n}\n\n[data-component=\"session-switcher\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-element=\"row-title-input\"] {\n width: 100%;\n appearance: none;\n background: transparent;\n border: none;\n outline: none;\n padding: 0;\n margin: 0;\n font: inherit;\n font-size: 13px;\n font-weight: 600;\n color: var(--cm-text);\n caret-color: var(--cm-primary);\n}\n\n[data-component=\"session-switcher\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-element=\"row-title-input\"]::placeholder {\n color: var(--cm-text-muted);\n}\n\n/* ---------- Confirm dialog ---------- */\n\n[data-component=\"confirm-dialog-backdrop\"]:where(:not([data-unstyled], [data-unstyled] *)) {\n position: fixed;\n inset: 0;\n z-index: 10010;\n background: rgba(0, 0, 0, 0.55);\n backdrop-filter: blur(4px);\n -webkit-backdrop-filter: blur(4px);\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 1rem;\n font-family: var(--cm-font);\n animation: cm-confirm-fade 140ms ease-out;\n}\n\n[data-component=\"confirm-dialog\"]:where(:not([data-unstyled], [data-unstyled] *)) {\n background: var(--cm-bg);\n color: var(--cm-text);\n border: 1px solid var(--cm-border);\n border-radius: var(--cm-radius);\n box-shadow:\n 0 25px 50px -12px rgba(0, 0, 0, 0.6),\n 0 0 0 1px rgba(255, 255, 255, 0.04);\n padding: 1.25rem 1.25rem 1rem;\n min-width: min(22rem, calc(100vw - 2rem));\n max-width: 26rem;\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n animation: cm-confirm-pop 160ms cubic-bezier(0.2, 0.9, 0.3, 1.1);\n}\n\n[data-component=\"confirm-dialog\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-element=\"title\"] {\n font-size: 15px;\n font-weight: 600;\n color: var(--cm-text);\n line-height: 1.4;\n}\n\n[data-component=\"confirm-dialog\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-element=\"message\"] {\n font-size: 13px;\n color: var(--cm-text-muted);\n line-height: 1.5;\n margin-bottom: 0.25rem;\n}\n\n[data-component=\"confirm-dialog\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-element=\"actions\"] {\n display: flex;\n justify-content: flex-end;\n gap: 0.5rem;\n margin-top: 0.75rem;\n}\n\n[data-component=\"confirm-dialog\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-element=\"actions\"] button {\n appearance: none;\n border: 1px solid var(--cm-border);\n background: transparent;\n color: var(--cm-text);\n padding: 0.5rem 1rem;\n border-radius: var(--cm-radius-sm);\n font-size: 13px;\n font-weight: 600;\n cursor: pointer;\n transition: background 120ms ease, border-color 120ms ease, color 120ms ease, transform 120ms ease;\n font-family: inherit;\n}\n\n[data-component=\"confirm-dialog\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-element=\"cancel\"]:hover {\n background: var(--cm-primary-tint);\n border-color: var(--cm-primary);\n}\n\n[data-component=\"confirm-dialog\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-element=\"confirm\"] {\n background: var(--cm-primary);\n border-color: var(--cm-primary);\n color: #ffffff;\n}\n\n[data-component=\"confirm-dialog\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-element=\"confirm\"]:hover:not(:disabled) {\n filter: brightness(1.1);\n transform: translateY(-1px);\n}\n\n[data-component=\"confirm-dialog\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-element=\"confirm\"][data-destructive] {\n background: var(--cm-danger);\n border-color: var(--cm-danger);\n}\n\n[data-component=\"confirm-dialog\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-element=\"confirm\"]:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n\n@keyframes cm-confirm-fade {\n from { opacity: 0; }\n to { opacity: 1; }\n}\n\n@keyframes cm-confirm-pop {\n from { opacity: 0; transform: scale(0.95) translateY(6px); }\n to { opacity: 1; transform: scale(1) translateY(0); }\n}\n\n[data-component=\"chat-window-body\"]:where(:not([data-unstyled], [data-unstyled] *)) {\n flex: 1 1 auto;\n min-height: 0;\n display: flex;\n flex-direction: column;\n overflow: hidden;\n}\n\n/* When ai-chat-panel is a direct child of chat-window-body, drop its own\n border/radius/shadow so the window shell owns the framing. */\n[data-component=\"chat-window-body\"]:where(:not([data-unstyled], [data-unstyled] *)) > [data-component=\"ai-chat-panel\"] {\n border: none;\n border-radius: 0;\n box-shadow: none;\n min-height: 0;\n height: 100%;\n}\n\n/* ---------- Approval reminder ---------- */\n[data-component=\"ai-chat-panel\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component=\"approval-reminder\"] {\n margin: 0 1rem 0.5rem;\n padding: 0.5rem 0.75rem;\n border-radius: var(--cm-radius-sm);\n background: var(--cm-primary-tint);\n color: var(--cm-text);\n font-size: 0.8125rem;\n}\n\n/* ---------------------------------------------------------------------------\n AssistantShell — docked sidebar or detached window. The handle geometry\n is inline, so it also works unstyled; these rules are only the look.\n --------------------------------------------------------------------------- */\n[data-component=\"assistant-shell\"][data-floating-gesture]:where(:not([data-unstyled], [data-unstyled] *)) { transition: none; will-change: transform, width, height; }\n@media (pointer: coarse) {\n [data-component=\"assistant-shell-window-handle\"]:where(:not([data-unstyled], [data-unstyled] *)):is([data-resize-edge=\"n\"], [data-resize-edge=\"s\"]) { height: 16px !important; }\n [data-component=\"assistant-shell-window-handle\"]:where(:not([data-unstyled], [data-unstyled] *)):is([data-resize-edge=\"e\"], [data-resize-edge=\"w\"]) { width: 16px !important; }\n [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; }\n}\n\n[data-component=\"assistant-shell\"]:where(:not([data-unstyled], [data-unstyled] *)) {\n box-sizing: border-box;\n z-index: 60;\n background: var(--cm-bg);\n color: var(--cm-text);\n font-family: var(--cm-font);\n border-left: 1px solid var(--cm-border);\n}\n[data-component=\"assistant-shell\"][data-mode=\"floating\"]:where(:not([data-unstyled], [data-unstyled] *)) {\n border: 1px solid var(--cm-border);\n border-radius: var(--cm-radius);\n box-shadow: 0 12px 32px -12px rgba(17, 24, 39, 0.25);\n overflow: hidden;\n}\n[data-component=\"assistant-shell\"][data-floating-gesture=\"move\"]:where(:not([data-unstyled], [data-unstyled] *)) {\n box-shadow: 0 16px 40px -12px rgba(17, 24, 39, 0.35);\n}\n[data-component=\"assistant-shell\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-element=\"header\"] {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n height: 2.75rem;\n flex-shrink: 0;\n padding: 0 0.75rem;\n border-bottom: 1px solid var(--cm-border);\n}\n[data-component=\"assistant-shell\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-element=\"header\"] > [data-element=\"icon\"] {\n display: inline-flex;\n color: var(--cm-primary);\n}\n[data-component=\"assistant-shell\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-element=\"title\"] {\n flex: 1 1 0%;\n min-width: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n font-size: 0.875rem;\n font-weight: 600;\n}\n[data-component=\"assistant-shell\"]:where(:not([data-unstyled], [data-unstyled] *)) :is(header[data-element=\"header\"], [data-element=\"rail\"]) > [data-action] {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n width: 1.75rem;\n height: 1.75rem;\n padding: 0;\n border: 0;\n border-radius: var(--cm-radius-sm);\n background: transparent;\n color: var(--cm-text-muted);\n cursor: pointer;\n}\n[data-component=\"assistant-shell\"]:where(:not([data-unstyled], [data-unstyled] *)) :is(header[data-element=\"header\"], [data-element=\"rail\"]) > [data-action]:hover {\n background: var(--cm-primary-tint);\n color: var(--cm-text);\n}\n[data-component=\"assistant-shell\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-element=\"rail\"] {\n display: flex;\n flex-direction: column;\n align-items: center;\n height: 100%;\n padding: 0.5rem 0;\n}\n[data-component=\"assistant-shell\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-element=\"rail\"] > [data-action=\"expand\"] {\n flex: 1 1 0%;\n width: 100%;\n height: auto;\n flex-direction: column;\n justify-content: flex-start;\n gap: 1rem;\n padding-top: 0.25rem;\n font-size: 0.75rem;\n font-weight: 500;\n}\n[data-component=\"assistant-shell-resize\"]:where(:not([data-unstyled], [data-unstyled] *)):is(:hover, :focus-visible, [data-dragging]) {\n background: linear-gradient(to right, transparent 3px, var(--cm-primary) 3px, var(--cm-primary) 5px, transparent 5px);\n outline: none;\n}\n[data-component=\"assistant-bubble\"]:where(:not([data-unstyled], [data-unstyled] *)) {\n position: fixed;\n right: 1rem;\n bottom: 1rem;\n z-index: 40;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 2.75rem;\n height: 2.75rem;\n border: 0;\n border-radius: 9999px;\n background: var(--cm-primary);\n color: #fff;\n box-shadow: 0 8px 20px -8px rgba(17, 24, 39, 0.4);\n cursor: pointer;\n}\n[data-component=\"assistant-toggle\"]:where(:not([data-unstyled], [data-unstyled] *)) {\n display: inline-flex;\n align-items: center;\n gap: 0.5rem;\n height: 2.25rem;\n padding: 0 0.75rem;\n border: 0;\n border-radius: var(--cm-radius-sm);\n background: transparent;\n color: var(--cm-text);\n font: inherit;\n font-size: 0.875rem;\n cursor: pointer;\n}\n[data-component=\"assistant-toggle\"]:where(:not([data-unstyled], [data-unstyled] *)):is(:hover, [aria-pressed=\"true\"]) {\n background: var(--cm-primary-tint);\n}\n";
6
+ exports.CHAT_STYLES = "/* glirastes — default chat panel styles.\n Auto-injected when you render <AiChat /> or <AiChatPanel />.\n Themes: every color / radius / font below is driven by CSS variables\n that can be overridden per-instance via the `theme` prop, which emits\n inline `--cm-*` vars on the root elements. The defaults below act as\n the fallback when no `theme` prop is given. */\n\n:where(\n [data-component=\"ai-chat-panel\"],\n [data-component=\"chat-window\"],\n [data-component=\"ai-trigger-button\"],\n [data-component=\"assistant-shell\"],\n [data-component=\"assistant-bubble\"],\n [data-component=\"assistant-toggle\"]\n):where(:not([data-unstyled], [data-unstyled] *)) {\n --cm-primary: #6366f1;\n --cm-primary-soft: #818cf8;\n --cm-primary-tint: rgba(99, 102, 241, 0.12);\n --cm-primary-ring: rgba(99, 102, 241, 0.18);\n --cm-bg: #ffffff;\n --cm-bg-muted: #f9fafb;\n --cm-bubble-user: #e0e7ff;\n --cm-bubble-assistant: #f3f4f6;\n --cm-border: #e5e7eb;\n --cm-text: #111827;\n --cm-text-muted: #6b7280;\n --cm-danger: #dc2626;\n --cm-radius: 0.875rem;\n --cm-radius-sm: 0.5rem;\n --cm-font: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif;\n}\n\n[data-component=\"ai-chat-panel\"]:where(:not([data-unstyled], [data-unstyled] *)) {\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n width: 100%;\n height: 100%;\n min-height: 520px;\n max-height: 100%;\n background: var(--cm-bg);\n color: var(--cm-text);\n border: 1px solid var(--cm-border);\n border-radius: var(--cm-radius);\n overflow: hidden;\n font-family: var(--cm-font);\n font-size: 14px;\n line-height: 1.5;\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.03);\n}\n\n[data-component=\"ai-chat-panel\"]:where(:not([data-unstyled], [data-unstyled] *)) *,\n[data-component=\"ai-chat-panel\"]:where(:not([data-unstyled], [data-unstyled] *)) *::before,\n[data-component=\"ai-chat-panel\"]:where(:not([data-unstyled], [data-unstyled] *)) *::after {\n box-sizing: border-box;\n}\n\n/* ---------- Error banner ---------- */\n[data-component=\"ai-chat-panel\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component=\"error-banner\"] {\n padding: 0.75rem 1rem;\n background: #fef2f2;\n color: #991b1b;\n border-bottom: 1px solid #fecaca;\n font-size: 13px;\n}\n\n/* ---------- Empty state ---------- */\n[data-component=\"ai-chat-panel\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component=\"empty-state\"] {\n flex: 1;\n display: grid;\n place-items: center;\n padding: 2rem;\n color: var(--cm-text-muted);\n text-align: center;\n}\n\n/* ---------- Message list ---------- */\n[data-component=\"ai-chat-panel\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component=\"message-list\"] {\n flex: 1;\n min-height: 0;\n overflow-y: auto;\n padding: 1rem;\n display: flex;\n flex-direction: column;\n gap: 0.75rem;\n scroll-behavior: smooth;\n}\n[data-component=\"ai-chat-panel\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component=\"message-list\"] > [data-action=\"load-more\"] {\n align-self: center;\n padding: 0.375rem 0.75rem;\n font: inherit;\n font-size: 12px;\n background: transparent;\n border: 1px solid var(--cm-border);\n border-radius: var(--cm-radius-sm);\n color: var(--cm-text-muted);\n cursor: pointer;\n}\n\n/* ---------- Message bubble ---------- */\n[data-component=\"ai-chat-panel\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component=\"message-bubble\"] {\n max-width: 85%;\n padding: 0.625rem 0.875rem;\n border-radius: var(--cm-radius);\n word-wrap: break-word;\n overflow-wrap: anywhere;\n}\n[data-component=\"ai-chat-panel\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component=\"message-bubble\"][data-role=\"user\"] {\n align-self: flex-end;\n background: var(--cm-bubble-user);\n color: var(--cm-text);\n}\n[data-component=\"ai-chat-panel\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component=\"message-bubble\"][data-role=\"assistant\"] {\n align-self: flex-start;\n background: var(--cm-bubble-assistant);\n}\n[data-component=\"ai-chat-panel\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component=\"message-bubble\"][data-role=\"system\"] {\n align-self: center;\n background: var(--cm-bg-muted);\n color: var(--cm-text-muted);\n font-style: italic;\n font-size: 13px;\n}\n\n/* ---------- Markdown content ---------- */\n[data-component=\"ai-chat-panel\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component=\"markdown\"] p {\n margin: 0 0 0.5rem 0;\n}\n[data-component=\"ai-chat-panel\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component=\"markdown\"] p:last-child {\n margin: 0;\n}\n[data-component=\"ai-chat-panel\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component=\"markdown\"] pre {\n background: rgba(0, 0, 0, 0.05);\n padding: 0.625rem 0.75rem;\n border-radius: var(--cm-radius-sm);\n overflow-x: auto;\n font-size: 12px;\n margin: 0.5rem 0;\n}\n[data-component=\"ai-chat-panel\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component=\"markdown\"] code {\n background: rgba(0, 0, 0, 0.06);\n padding: 0.125rem 0.25rem;\n border-radius: 3px;\n font-size: 0.9em;\n font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;\n}\n[data-component=\"ai-chat-panel\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component=\"markdown\"] pre code {\n background: transparent;\n padding: 0;\n}\n[data-component=\"ai-chat-panel\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component=\"markdown\"] ul,\n[data-component=\"ai-chat-panel\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component=\"markdown\"] ol {\n margin: 0.25rem 0 0.5rem 1.25rem;\n padding: 0;\n}\n\n/* ---------- Chat input / mention input ---------- */\n[data-component=\"ai-chat-panel\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component=\"chat-input\"],\n[data-component=\"ai-chat-panel\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component=\"mention-input\"] {\n flex-shrink: 0;\n display: flex;\n gap: 0.5rem;\n align-items: flex-end;\n padding: 0.75rem 1rem;\n border-top: 1px solid var(--cm-border);\n background: var(--cm-bg);\n}\n[data-component=\"ai-chat-panel\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component=\"chat-input\"] textarea,\n[data-component=\"ai-chat-panel\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component=\"mention-input\"] textarea {\n flex: 1;\n min-height: 40px;\n max-height: 160px;\n resize: none;\n padding: 0.5rem 0.75rem;\n background: var(--cm-bg-muted);\n border: 1px solid var(--cm-border);\n border-radius: var(--cm-radius-sm);\n color: var(--cm-text);\n font: inherit;\n outline: none;\n transition: border-color 0.15s, box-shadow 0.15s;\n}\n[data-component=\"ai-chat-panel\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component=\"chat-input\"] textarea:focus,\n[data-component=\"ai-chat-panel\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component=\"mention-input\"] textarea:focus {\n border-color: var(--cm-primary);\n box-shadow: 0 0 0 3px var(--cm-primary-ring);\n}\n[data-component=\"ai-chat-panel\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component=\"chat-input\"] textarea::placeholder,\n[data-component=\"ai-chat-panel\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component=\"mention-input\"] textarea::placeholder {\n color: var(--cm-text-muted);\n}\n\n/* ---------- Send / stop buttons ---------- */\n[data-component=\"ai-chat-panel\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-action=\"send\"] {\n padding: 0.5rem 1rem;\n background: var(--cm-primary);\n color: #fff;\n border: none;\n border-radius: var(--cm-radius-sm);\n font: inherit;\n font-weight: 500;\n cursor: pointer;\n transition: opacity 0.15s, transform 0.05s;\n}\n[data-component=\"ai-chat-panel\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-action=\"send\"]:hover:not(:disabled) {\n opacity: 0.92;\n}\n[data-component=\"ai-chat-panel\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-action=\"send\"]:active:not(:disabled) {\n transform: translateY(1px);\n}\n[data-component=\"ai-chat-panel\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-action=\"send\"]:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n[data-component=\"ai-chat-panel\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-action=\"stop\"] {\n padding: 0.5rem 0.875rem;\n background: transparent;\n color: var(--cm-text);\n border: 1px solid var(--cm-border);\n border-radius: var(--cm-radius-sm);\n font: inherit;\n cursor: pointer;\n}\n\n/* ---------- Suggestion bar ---------- */\n[data-component=\"ai-chat-panel\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component=\"suggestion-bar\"] {\n display: flex;\n flex-wrap: wrap;\n gap: 0.5rem;\n padding: 0.5rem 1rem 0.25rem 1rem;\n}\n[data-component=\"ai-chat-panel\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component=\"suggestion-chip\"] {\n padding: 0.375rem 0.75rem;\n background: var(--cm-bg-muted);\n border: 1px solid var(--cm-border);\n border-radius: 9999px;\n font: inherit;\n font-size: 12px;\n color: var(--cm-text);\n cursor: pointer;\n transition: background 0.15s, border-color 0.15s;\n}\n[data-component=\"ai-chat-panel\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component=\"suggestion-chip\"]:hover {\n background: var(--cm-bubble-user);\n border-color: var(--cm-primary);\n}\n\n/* ---------- Typing indicator ---------- */\n[data-component=\"ai-chat-panel\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component=\"typing-indicator\"] {\n display: flex;\n gap: 4px;\n padding: 0.5rem 1rem;\n align-items: center;\n}\n[data-component=\"ai-chat-panel\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component=\"typing-indicator\"] [data-element=\"dot\"] {\n width: 6px;\n height: 6px;\n background: var(--cm-text-muted);\n border-radius: 50%;\n animation: cm-chat-typing 1.4s infinite ease-in-out both;\n}\n[data-component=\"ai-chat-panel\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component=\"typing-indicator\"] [data-element=\"dot\"]:nth-child(2) {\n animation-delay: 0.16s;\n}\n[data-component=\"ai-chat-panel\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component=\"typing-indicator\"] [data-element=\"dot\"]:nth-child(3) {\n animation-delay: 0.32s;\n}\n@keyframes cm-chat-typing {\n 0%, 80%, 100% { transform: scale(0.7); opacity: 0.5; }\n 40% { transform: scale(1); opacity: 1; }\n}\n\n/* ---------- Truncation banner ---------- */\n[data-component=\"ai-chat-panel\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component=\"truncation-banner\"] {\n padding: 0.75rem 1rem;\n background: #fef9c3;\n color: #713f12;\n border-top: 1px solid #fde047;\n display: flex;\n justify-content: space-between;\n align-items: center;\n gap: 1rem;\n font-size: 13px;\n}\n[data-component=\"ai-chat-panel\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component=\"truncation-banner\"] [data-element=\"actions\"] {\n display: flex;\n gap: 0.5rem;\n}\n[data-component=\"ai-chat-panel\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component=\"truncation-banner\"] button {\n padding: 0.3125rem 0.625rem;\n background: #fff;\n border: 1px solid #d4a574;\n border-radius: var(--cm-radius-sm);\n font: inherit;\n font-size: 12px;\n cursor: pointer;\n}\n\n/* ---------- Approval cards ---------- */\n[data-component=\"ai-chat-panel\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component=\"approval-card\"],\n[data-component=\"ai-chat-panel\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component=\"bulk-approval-card\"] {\n margin: 0 1rem 0.75rem 1rem;\n padding: 0.875rem 1rem;\n background: #fffbeb;\n border: 1px solid #fcd34d;\n border-radius: var(--cm-radius);\n font-size: 13px;\n}\n[data-component=\"ai-chat-panel\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component=\"approval-card\"] [data-element=\"header\"],\n[data-component=\"ai-chat-panel\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component=\"bulk-approval-card\"] [data-element=\"header\"] {\n font-weight: 500;\n color: #713f12;\n margin-bottom: 0.5rem;\n}\n[data-component=\"ai-chat-panel\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component=\"approval-card\"] [data-element=\"details\"],\n[data-component=\"ai-chat-panel\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component=\"bulk-approval-card\"] [data-element=\"details\"] {\n background: rgba(255, 255, 255, 0.6);\n border: 1px solid rgba(252, 211, 77, 0.6);\n border-radius: var(--cm-radius-sm);\n padding: 0.5rem 0.625rem;\n margin-bottom: 0.625rem;\n font-size: 12px;\n color: #78350f;\n}\n[data-component=\"ai-chat-panel\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-element=\"detail-line\"] {\n display: flex;\n gap: 0.5rem;\n line-height: 1.5;\n}\n[data-component=\"ai-chat-panel\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-element=\"detail-label\"] {\n flex: 0 0 auto;\n min-width: 5.5rem;\n opacity: 0.75;\n}\n[data-component=\"ai-chat-panel\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-element=\"detail-label\"]::after {\n content: \":\";\n}\n[data-component=\"ai-chat-panel\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-element=\"detail-value\"] {\n min-width: 0;\n font-weight: 500;\n overflow-wrap: anywhere;\n}\n[data-component=\"ai-chat-panel\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-element=\"detail-items\"] {\n margin: 0;\n padding: 0 0 0 1.125rem;\n}\n[data-component=\"ai-chat-panel\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-element=\"detail-text\"][data-collapsed] {\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 2;\n overflow: hidden;\n}\n[data-component=\"ai-chat-panel\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-element=\"detail-toggle\"] {\n display: block;\n margin-top: 0.125rem;\n padding: 0;\n background: none;\n border: none;\n color: inherit;\n font: inherit;\n font-weight: 500;\n text-decoration: underline;\n cursor: pointer;\n}\n[data-component=\"ai-chat-panel\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-element=\"detail-toggle\"]:focus-visible {\n outline: 2px solid var(--cm-primary);\n outline-offset: 2px;\n}\n[data-component=\"ai-chat-panel\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component=\"approval-card\"] [data-element=\"actions\"],\n[data-component=\"ai-chat-panel\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component=\"bulk-approval-card\"] [data-element=\"actions\"] {\n display: flex;\n gap: 0.5rem;\n}\n[data-component=\"ai-chat-panel\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-action=\"approve\"] {\n padding: 0.375rem 0.875rem;\n background: #16a34a;\n color: #fff;\n border: none;\n border-radius: var(--cm-radius-sm);\n font: inherit;\n font-size: 12px;\n font-weight: 500;\n cursor: pointer;\n}\n[data-component=\"ai-chat-panel\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-action=\"approve\"]:hover:not(:disabled) {\n background: #15803d;\n}\n[data-component=\"ai-chat-panel\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-action=\"reject\"] {\n padding: 0.375rem 0.875rem;\n background: #fff;\n color: #dc2626;\n border: 1px solid #fca5a5;\n border-radius: var(--cm-radius-sm);\n font: inherit;\n font-size: 12px;\n cursor: pointer;\n}\n\n/* ---------- Mention chip ---------- */\n[data-component=\"ai-chat-panel\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component=\"mention-chip\"] {\n display: inline-flex;\n align-items: center;\n padding: 0.125rem 0.5rem;\n background: var(--cm-bubble-user);\n color: #3730a3;\n border-radius: 9999px;\n font-size: 12px;\n font-weight: 500;\n}\n\n/* ---------- Pipeline timeline ---------- */\n[data-component=\"ai-chat-panel\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component=\"pipeline-timeline\"] {\n padding: 0.5rem 1rem;\n border-bottom: 1px solid var(--cm-border);\n background: var(--cm-bg-muted);\n font-size: 12px;\n color: var(--cm-text-muted);\n}\n\n/* ---------- Activity log and plan ---------- */\n[data-component=\"ai-chat-panel\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component=\"activity-log\"],\n[data-component=\"ai-chat-panel\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component=\"plan-checklist\"] {\n margin: 0 0 0.375rem;\n font-size: 12px;\n color: var(--cm-text-muted);\n}\n[data-component=\"ai-chat-panel\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component=\"activity-log\"] [data-element=\"activity-summary\"] {\n display: inline-flex;\n align-items: center;\n gap: 0.375rem;\n cursor: pointer;\n list-style: none;\n user-select: none;\n}\n[data-component=\"ai-chat-panel\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component=\"activity-log\"] [data-element=\"activity-summary\"]::-webkit-details-marker {\n display: none;\n}\n[data-component=\"ai-chat-panel\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component=\"activity-log\"][data-state=\"running\"] [data-element=\"activity-summary\"] {\n color: var(--cm-text);\n}\n[data-component=\"ai-chat-panel\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component=\"activity-log\"] [data-element=\"activity-steps\"],\n[data-component=\"ai-chat-panel\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component=\"plan-checklist\"] [data-element=\"plan-items\"] {\n list-style: none;\n margin: 0.25rem 0 0;\n padding: 0 0 0 0.375rem;\n display: flex;\n flex-direction: column;\n gap: 0.125rem;\n}\n[data-component=\"ai-chat-panel\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component=\"activity-log\"] [data-element=\"activity-steps\"] {\n border-left: 1px solid var(--cm-border);\n margin-left: 0.375rem;\n}\n[data-component=\"ai-chat-panel\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component=\"activity-log\"] [data-element=\"activity-step\"],\n[data-component=\"ai-chat-panel\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component=\"plan-checklist\"] [data-element=\"plan-item\"] {\n display: flex;\n align-items: baseline;\n gap: 0.375rem;\n}\n[data-component=\"ai-chat-panel\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component=\"activity-log\"] [data-element=\"icon\"],\n[data-component=\"ai-chat-panel\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component=\"plan-checklist\"] [data-element=\"icon\"] {\n flex-shrink: 0;\n align-self: center;\n}\n[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\"],\n[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\"] {\n color: var(--cm-primary);\n}\n[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\"],\n[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\"] {\n color: #dc2626;\n}\n[data-component=\"ai-chat-panel\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component=\"activity-log\"] [data-element=\"detail\"] {\n opacity: 0.8;\n overflow-wrap: anywhere;\n}\n[data-component=\"ai-chat-panel\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component=\"activity-log\"] [data-element=\"detail\"]::before {\n content: \"· \";\n}\n[data-component=\"ai-chat-panel\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component=\"activity-log\"] [data-element=\"activity-notice\"] {\n margin: 0.25rem 0 0;\n}\n[data-component=\"ai-chat-panel\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component=\"plan-checklist\"] [data-element=\"title\"] {\n font-weight: 600;\n color: var(--cm-text);\n}\n[data-component=\"ai-chat-panel\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component=\"plan-checklist\"] [data-element=\"plan-item\"][data-status=\"in_progress\"] {\n color: var(--cm-text);\n}\n[data-component=\"ai-chat-panel\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component=\"plan-checklist\"] [data-element=\"plan-item\"][data-status=\"pending\"] {\n opacity: 0.55;\n}\n\n/* ---------- Tool result ---------- */\n[data-component=\"ai-chat-panel\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component=\"tool-result\"] {\n margin: 0.375rem 0;\n padding: 0.5rem 0.75rem;\n background: rgba(0, 0, 0, 0.03);\n border: 1px solid var(--cm-border);\n border-radius: var(--cm-radius-sm);\n font-size: 12px;\n color: var(--cm-text-muted);\n}\n\n/* ---------- Provider composer, '/' and '@' list ---------- */\n/* The wrapper above is flex, but the editor, mic and Send sit inside a bare\n <form> (classNames.input is empty by default). Without this rule the form\n shrink-wraps its contents and the editor and its list collapse to ~111px. */\n[data-component=\"ai-chat-panel\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component=\"mention-input\"][data-mode=\"providers\"] > form {\n display: flex;\n flex: 1;\n min-width: 0;\n gap: 0.5rem;\n align-items: flex-end;\n flex-wrap: wrap;\n}\n[data-component=\"ai-chat-panel\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component=\"rich-mention-input\"] {\n position: relative;\n flex: 1;\n min-width: 0;\n}\n[data-component=\"ai-chat-panel\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component=\"rich-mention-input\"] [data-element=\"editor\"] {\n box-sizing: border-box;\n min-height: 40px;\n max-height: 160px;\n overflow-y: auto;\n overflow-wrap: anywhere;\n padding: 0.5rem 0.75rem;\n background: var(--cm-bg-muted);\n border: 1px solid var(--cm-border);\n border-radius: var(--cm-radius-sm);\n color: var(--cm-text);\n outline: none;\n}\n[data-component=\"ai-chat-panel\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component=\"rich-mention-input\"] [data-element=\"editor\"]:focus {\n border-color: var(--cm-primary);\n box-shadow: 0 0 0 3px var(--cm-primary-ring);\n}\n[data-component=\"ai-chat-panel\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component=\"rich-mention-input\"] [data-element=\"placeholder\"] {\n position: absolute;\n top: 0.5rem;\n left: 0.75rem;\n color: var(--cm-text-muted);\n pointer-events: none;\n}\n[data-component=\"ai-chat-panel\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component=\"rich-mention-input\"] [data-component=\"mention-dropdown\"] {\n position: absolute;\n left: 0;\n right: 0;\n bottom: calc(100% + 0.25rem);\n z-index: 20;\n display: flex;\n flex-direction: column;\n max-height: min(40vh, 16rem);\n overflow-y: auto;\n background: var(--cm-bg);\n border: 1px solid var(--cm-border);\n border-radius: var(--cm-radius-sm);\n box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);\n}\n[data-component=\"ai-chat-panel\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component=\"mention-dropdown-item\"] {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n gap: 0.125rem;\n width: 100%;\n padding: 0.5rem 0.75rem;\n background: transparent;\n border: none;\n color: var(--cm-text);\n font: inherit;\n text-align: left;\n cursor: pointer;\n}\n[data-component=\"ai-chat-panel\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component=\"mention-dropdown-item\"][data-selected=\"true\"] {\n background: var(--cm-primary-tint);\n}\n[data-component=\"ai-chat-panel\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component=\"mention-dropdown-item\"] [data-element=\"description\"] {\n font-size: 12px;\n color: var(--cm-text-muted);\n}\n\n/* ---------- Chat interactions: entity actions and command arguments ---------- */\n/* The item keeps `width: 100%` from its own rule, so it gets a small flex basis here: with the full\n row as basis the shrink is shared by basis and squeezes the chips below their own width. The row\n wraps instead, which keeps the chips on one line beside the result and drops them below it only\n when the result cannot keep 8rem. */\n[data-component=\"ai-chat-panel\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component=\"mention-dropdown\"] [data-element=\"result-row\"] {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: 0.25rem;\n padding-right: 0.5rem;\n}\n[data-component=\"ai-chat-panel\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-element=\"result-row\"] > [data-component=\"mention-dropdown-item\"] {\n flex: 1 1 8rem;\n min-width: 0;\n}\n[data-component=\"ai-chat-panel\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-element=\"entity-actions\"] {\n display: flex;\n flex: 0 0 auto;\n flex-wrap: wrap;\n justify-content: flex-end;\n gap: 0.25rem;\n}\n[data-component=\"ai-chat-panel\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component=\"mention-action\"] {\n padding: 0.125rem 0.5rem;\n background: var(--cm-bg-muted);\n border: 1px solid var(--cm-border);\n border-radius: 999px;\n color: var(--cm-text);\n font: inherit;\n font-size: 12px;\n white-space: nowrap;\n cursor: pointer;\n}\n[data-component=\"ai-chat-panel\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component=\"mention-action\"][data-selected=\"true\"] {\n background: var(--cm-primary-tint);\n border-color: var(--cm-primary);\n}\n[data-component=\"ai-chat-panel\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component=\"command-arguments\"] {\n box-sizing: border-box;\n display: flex;\n flex-wrap: wrap;\n align-items: flex-end;\n gap: 0.5rem;\n max-width: 100%;\n margin: 0 0 0.5rem;\n padding: 0.75rem;\n background: var(--cm-bg);\n border: 1px solid var(--cm-border);\n border-radius: var(--cm-radius-sm);\n}\n/* The composer wrapper is one flex row and its `> form` rule (flex: 1) outranks the rule above,\n which would park the argument form beside the editor. The wrapper wraps and the form takes\n the full first row; the wrapper's gap supplies the space below it. */\n[data-component=\"ai-chat-panel\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component=\"mention-input\"][data-mode=\"providers\"] {\n flex-wrap: wrap;\n}\n[data-component=\"ai-chat-panel\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component=\"mention-input\"][data-mode=\"providers\"] > form[data-component=\"command-arguments\"] {\n flex: 1 1 100%;\n margin: 0;\n}\n[data-component=\"command-arguments\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-element=\"title\"] {\n flex: 1 1 100%;\n margin: 0;\n font-weight: 500;\n overflow-wrap: anywhere;\n}\n[data-component=\"command-arguments\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-element=\"error\"] {\n flex: 1 1 100%;\n margin: 0;\n color: var(--cm-danger);\n font-size: 12px;\n}\n[data-component=\"command-arguments\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-element=\"field\"] {\n position: relative;\n display: flex;\n flex: 1 1 10rem;\n flex-direction: column;\n gap: 0.25rem;\n min-width: 0;\n color: var(--cm-text-muted);\n font-size: 12px;\n}\n[data-component=\"command-arguments\"]:where(:not([data-unstyled], [data-unstyled] *)) input,\n[data-component=\"command-arguments\"]:where(:not([data-unstyled], [data-unstyled] *)) select {\n box-sizing: border-box;\n width: 100%;\n padding: 0.375rem 0.5rem;\n background: var(--cm-bg-muted);\n border: 1px solid var(--cm-border);\n border-radius: var(--cm-radius-sm);\n color: var(--cm-text);\n font: inherit;\n font-size: 14px;\n}\n[data-component=\"command-arguments\"]:where(:not([data-unstyled], [data-unstyled] *)) input:focus,\n[data-component=\"command-arguments\"]:where(:not([data-unstyled], [data-unstyled] *)) select:focus {\n outline: none;\n border-color: var(--cm-primary);\n box-shadow: 0 0 0 3px var(--cm-primary-ring);\n}\n[data-component=\"command-arguments\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-element=\"options\"] {\n position: absolute;\n left: 0;\n right: 0;\n bottom: calc(100% + 0.25rem);\n z-index: 20;\n max-height: 12rem;\n margin: 0;\n padding: 0;\n overflow-y: auto;\n list-style: none;\n background: var(--cm-bg);\n border: 1px solid var(--cm-border);\n border-radius: var(--cm-radius-sm);\n box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);\n}\n[data-component=\"command-arguments\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-element=\"options\"] [role=\"option\"] {\n padding: 0.375rem 0.5rem;\n color: var(--cm-text);\n cursor: pointer;\n}\n[data-component=\"command-arguments\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-element=\"options\"] [role=\"option\"][data-selected=\"true\"] {\n background: var(--cm-primary-tint);\n}\n/* The dropdown rule for descriptions is scoped to the mention items; without this one the span runs\n on after the label (`Alice Examplealice@example.com`). */\n[data-component=\"command-arguments\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-element=\"options\"] [data-element=\"description\"] {\n display: block;\n font-size: 12px;\n color: var(--cm-text-muted);\n}\n[data-component=\"command-arguments\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-element=\"actions\"] {\n display: flex;\n gap: 0.375rem;\n}\n[data-component=\"command-arguments\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-action=\"run\"],\n[data-component=\"command-arguments\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-action=\"cancel\"] {\n padding: 0.375rem 0.75rem;\n border-radius: var(--cm-radius-sm);\n font: inherit;\n font-size: 14px;\n cursor: pointer;\n}\n[data-component=\"command-arguments\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-action=\"run\"] {\n background: var(--cm-primary);\n border: 1px solid var(--cm-primary);\n color: #ffffff;\n}\n[data-component=\"command-arguments\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-action=\"cancel\"] {\n background: transparent;\n border: 1px solid var(--cm-border);\n color: var(--cm-text);\n}\n\n/* ---------- Structured clarification ---------- */\n[data-component=\"ai-chat-panel\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component=\"clarification-card\"] {\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n max-width: 100%;\n margin: 0.375rem 0;\n padding: 0.75rem;\n background: var(--cm-bg);\n border: 1px solid var(--cm-border);\n border-radius: var(--cm-radius-sm);\n}\n[data-component=\"clarification-card\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-element=\"question\"] {\n margin: 0;\n font-weight: 500;\n overflow-wrap: anywhere;\n}\n[data-component=\"clarification-card\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-element=\"options\"] {\n display: flex;\n flex-wrap: wrap;\n gap: 0.375rem;\n}\n[data-component=\"clarification-card\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-action=\"answer-option\"] {\n display: inline-flex;\n flex-direction: column;\n align-items: flex-start;\n max-width: 100%;\n padding: 0.375rem 0.75rem;\n background: var(--cm-bg-muted);\n border: 1px solid var(--cm-border);\n border-radius: 9999px;\n color: var(--cm-text);\n font: inherit;\n font-size: 13px;\n text-align: left;\n overflow-wrap: anywhere;\n cursor: pointer;\n}\n[data-component=\"clarification-card\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-action=\"answer-option\"]:disabled {\n opacity: 0.6;\n cursor: default;\n}\n[data-component=\"clarification-card\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-element=\"description\"] {\n font-size: 11px;\n color: var(--cm-text-muted);\n}\n[data-component=\"clarification-card\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-element=\"free-text\"] {\n display: flex;\n gap: 0.375rem;\n}\n[data-component=\"clarification-card\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-element=\"free-text\"] input {\n flex: 1;\n min-width: 0;\n padding: 0.375rem 0.625rem;\n background: var(--cm-bg-muted);\n border: 1px solid var(--cm-border);\n border-radius: var(--cm-radius-sm);\n color: var(--cm-text);\n font: inherit;\n}\n[data-component=\"clarification-card\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-action=\"answer-free-text\"] {\n padding: 0.375rem 0.75rem;\n background: var(--cm-primary);\n border: none;\n border-radius: var(--cm-radius-sm);\n color: #fff;\n font: inherit;\n cursor: pointer;\n}\n[data-component=\"clarification-card\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-action=\"answer-free-text\"]:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n\n/* ---------- Voice: mic, push-to-talk, retry, recording bar ---------- */\n[data-component=\"ai-chat-panel\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component=\"voice-input-addon\"],\n[data-component=\"ai-chat-panel\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-action=\"retry-recording\"] {\n flex-shrink: 0;\n min-width: 40px;\n min-height: 40px;\n padding: 0 0.625rem;\n background: var(--cm-bg-muted);\n border: 1px solid var(--cm-border);\n border-radius: var(--cm-radius-sm);\n color: var(--cm-text);\n font: inherit;\n cursor: pointer;\n touch-action: none;\n user-select: none;\n -webkit-user-select: none;\n -webkit-touch-callout: none;\n}\n[data-component=\"ai-chat-panel\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component=\"voice-input-addon\"][data-state=\"recording\"] {\n border-color: var(--cm-danger);\n color: var(--cm-danger);\n}\n[data-component=\"ai-chat-panel\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component=\"recording-bar\"] {\n min-width: 0;\n}\n/* The inline bar is `width: 100%` (inline style). Next to the editor, mic and\n Send it would get ~100px at 375px wide, too little for the live words. A\n non-auto flex-basis beats that width, so the bar takes a row of its own\n below them (form wraps; `order` moves it behind Send, which stays beside\n the editor). The row exists only while the bar is mounted. */\n[data-component=\"ai-chat-panel\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component=\"mention-input\"][data-mode=\"providers\"] > form > [data-component=\"recording-bar\"] {\n flex: 1 1 100%;\n order: 1;\n}\n\n/* ===========================================================================\n Drop-in defaults for the floating trigger button and chat window.\n These exist so <LangGraphAiChat /> / <VercelAiChat /> \"just work\" with\n zero consumer styling. Override by passing className/buttonClassName.\n =========================================================================== */\n\n[data-component=\"ai-trigger-button\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-element=\"button-pill\"] {\n background: linear-gradient(135deg, var(--cm-primary) 0%, var(--cm-primary-soft) 100%);\n color: #ffffff;\n box-shadow:\n 0 10px 25px -5px var(--cm-primary-tint),\n 0 4px 10px -3px var(--cm-primary-tint),\n 0 0 0 1px rgba(255, 255, 255, 0.12) inset;\n transition: transform 150ms ease, box-shadow 150ms ease;\n font-family: var(--cm-font);\n}\n\n[data-component=\"ai-trigger-button\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-element=\"button-pill\"]:hover {\n transform: translateY(-1px);\n box-shadow:\n 0 14px 30px -5px var(--cm-primary-tint),\n 0 6px 12px -3px var(--cm-primary-tint),\n 0 0 0 1px rgba(255, 255, 255, 0.16) inset;\n}\n\n[data-component=\"ai-trigger-button\"][data-dragging=\"true\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-element=\"button-pill\"] {\n transform: scale(1.04);\n}\n\n[data-component=\"ai-trigger-button\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-element=\"mic-trigger\"] {\n background: rgba(255, 255, 255, 0.22) !important;\n color: #ffffff;\n transition: background 150ms ease;\n}\n\n[data-component=\"ai-trigger-button\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-element=\"mic-trigger\"]:hover {\n background: rgba(255, 255, 255, 0.34) !important;\n}\n\n/* ---------- Chat window shell ---------- */\n[data-component=\"chat-window\"]:where(:not([data-unstyled], [data-unstyled] *)) {\n box-sizing: border-box;\n background: var(--cm-bg);\n color: var(--cm-text);\n border: 1px solid var(--cm-border);\n border-radius: var(--cm-radius);\n box-shadow:\n 0 25px 50px -12px rgba(0, 0, 0, 0.25),\n 0 0 0 1px rgba(0, 0, 0, 0.04);\n display: flex;\n flex-direction: column;\n overflow: hidden;\n z-index: 10000;\n font-family: var(--cm-font);\n font-size: 14px;\n}\n\n[data-component=\"chat-window\"][data-mode=\"sidebar\"]:where(:not([data-unstyled], [data-unstyled] *)) {\n border-radius: 0;\n box-shadow: none;\n}\n[data-component=\"chat-window\"][data-mode=\"sidebar\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component=\"chat-window-header\"] {\n cursor: default;\n}\n[data-component=\"chat-window-sidebar-resize\"]:where(:not([data-unstyled], [data-unstyled] *)) {\n position: absolute;\n inset: 0 auto 0 0;\n width: 8px;\n z-index: 11;\n cursor: ew-resize;\n touch-action: none;\n}\n[data-component=\"chat-window-sidebar-resize\"]:hover:where(:not([data-unstyled], [data-unstyled] *)),\n[data-component=\"chat-window-sidebar-resize\"]:focus-visible:where(:not([data-unstyled], [data-unstyled] *)) {\n background: var(--cm-primary-tint);\n outline: 2px solid var(--cm-primary);\n outline-offset: -2px;\n}\n[data-component=\"chat-window-rail\"]:where(:not([data-unstyled], [data-unstyled] *)) {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 12px;\n padding: 8px 0;\n height: 100%;\n}\n[data-component=\"chat-window-rail\"]:where(:not([data-unstyled], [data-unstyled] *)) span {\n writing-mode: vertical-rl;\n flex: 1;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n[data-component=\"chat-window-rail\"]:where(:not([data-unstyled], [data-unstyled] *)) button {\n appearance: none;\n border: 0;\n border-radius: var(--cm-radius-sm);\n width: 32px;\n min-height: 32px;\n background: transparent;\n color: inherit;\n cursor: pointer;\n font-size: 20px;\n}\n[data-component=\"chat-window-rail\"]:where(:not([data-unstyled], [data-unstyled] *)) button:hover {\n background: var(--cm-primary-tint);\n}\n\n/* ---------- Glassmorphism theme effect ----------\n Applied when the resolved theme sets `effect: 'glass'` (e.g. the\n `liquid-glass` preset). Adds a real backdrop blur so translucent\n backgrounds read as frosted glass instead of a flat wash. */\n[data-component=\"chat-window\"][data-theme-effect=\"glass\"]:where(:not([data-unstyled], [data-unstyled] *)),\n[data-component=\"ai-chat-panel\"][data-theme-effect=\"glass\"]:where(:not([data-unstyled], [data-unstyled] *)) {\n backdrop-filter: blur(24px) saturate(180%);\n -webkit-backdrop-filter: blur(24px) saturate(180%);\n}\n[data-component=\"ai-trigger-button\"][data-theme-effect=\"glass\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-element=\"button-pill\"] {\n backdrop-filter: blur(16px) saturate(180%);\n -webkit-backdrop-filter: blur(16px) saturate(180%);\n}\n\n/* ---------- Mobile: take over the whole screen ----------\n Below 640px the floating window pattern breaks down — the\n window is too small to contain a useful conversation and\n edge-resize handles/drag headers don't map to touch gestures.\n Pin to the viewport, kill the radius, and disable edge handles. */\n@media (max-width: 640px) {\n [data-component=\"chat-window\"]:where(:not([data-unstyled], [data-unstyled] *)) {\n position: fixed !important;\n left: 0 !important;\n top: 0 !important;\n right: 0 !important;\n bottom: 0 !important;\n width: 100vw !important;\n height: 100dvh !important;\n transform: none !important;\n border: none !important;\n border-radius: 0 !important;\n box-shadow: none !important;\n max-width: none !important;\n max-height: none !important;\n }\n [data-component=\"chat-window\"][data-collapsed=\"true\"]:where(:not([data-unstyled], [data-unstyled] *)) {\n left: auto !important;\n width: 44px !important;\n }\n [data-component=\"chat-window-resize-handle\"]:where(:not([data-unstyled], [data-unstyled] *)),\n [data-component=\"chat-window-sidebar-resize\"]:where(:not([data-unstyled], [data-unstyled] *)) {\n display: none !important;\n }\n [data-component=\"chat-window-header\"]:where(:not([data-unstyled], [data-unstyled] *)) {\n cursor: default !important;\n padding-top: max(0.75rem, env(safe-area-inset-top));\n padding-left: max(1rem, env(safe-area-inset-left));\n padding-right: max(1rem, env(safe-area-inset-right));\n }\n [data-component=\"chat-window-body\"]:where(:not([data-unstyled], [data-unstyled] *)) {\n padding-bottom: env(safe-area-inset-bottom);\n }\n /* Hide the pill while the chat is open — on mobile we own the\n whole viewport, so the pill would overlap the input bar. */\n [data-component=\"ai-trigger-button\"]:where(:not([data-unstyled], [data-unstyled] *)) {\n z-index: 9998;\n }\n}\n\n[data-component=\"chat-window\"]:where(:not([data-unstyled], [data-unstyled] *)) *,\n[data-component=\"chat-window\"]:where(:not([data-unstyled], [data-unstyled] *)) *::before,\n[data-component=\"chat-window\"]:where(:not([data-unstyled], [data-unstyled] *)) *::after {\n box-sizing: border-box;\n}\n\n[data-component=\"chat-window-header\"]:where(:not([data-unstyled], [data-unstyled] *)) {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 0.75rem 1rem;\n border-bottom: 1px solid var(--cm-border);\n background: var(--cm-bg-muted);\n cursor: grab;\n user-select: none;\n flex-shrink: 0;\n}\n\n[data-component=\"chat-window-header\"]:active:where(:not([data-unstyled], [data-unstyled] *)) {\n cursor: grabbing;\n}\n\n[data-component=\"chat-window-header\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-element=\"title\"] {\n font-size: 14px;\n font-weight: 600;\n color: var(--cm-text);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n[data-component=\"chat-window-header\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-element=\"title-wrap\"] {\n flex: 1 1 auto;\n min-width: 0;\n display: flex;\n align-items: center;\n}\n\n[data-component=\"chat-window-header\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-element=\"actions\"] {\n display: inline-flex;\n align-items: center;\n gap: 0.25rem;\n flex-shrink: 0;\n margin-left: 0.5rem;\n}\n\n[data-component=\"chat-window-header\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-action=\"close\"],\n[data-component=\"chat-window-header\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-action=\"layout\"],\n[data-component=\"chat-window-header\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-action=\"clear\"] {\n appearance: none;\n border: none;\n background: transparent;\n width: 1.75rem;\n height: 1.75rem;\n border-radius: var(--cm-radius-sm);\n line-height: 1;\n color: var(--cm-text-muted);\n cursor: pointer;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n transition: background 120ms ease, color 120ms ease;\n}\n\n[data-component=\"chat-window-header\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-action=\"close\"]:hover,\n[data-component=\"chat-window-header\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-action=\"layout\"]:hover,\n[data-component=\"chat-window-header\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-action=\"clear\"]:hover:not(:disabled) {\n background: var(--cm-primary-tint);\n color: var(--cm-text);\n}\n\n[data-component=\"chat-window-header\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-action=\"clear\"]:disabled {\n opacity: 0.35;\n cursor: not-allowed;\n}\n\n/* ---------- Session switcher ---------- */\n\n[data-component=\"session-switcher\"]:where(:not([data-unstyled], [data-unstyled] *)) {\n position: relative;\n display: inline-flex;\n flex: 0 0 auto;\n min-width: 0;\n font-family: var(--cm-font);\n pointer-events: none;\n}\n\n[data-component=\"session-switcher\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-element=\"trigger\"],\n[data-component=\"session-switcher\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-element=\"popover\"] {\n pointer-events: auto;\n}\n\n[data-component=\"session-switcher\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-element=\"trigger\"] {\n appearance: none;\n border: 1px solid transparent;\n background: transparent;\n padding: 0.25rem 0.5rem;\n border-radius: var(--cm-radius-sm);\n display: inline-flex;\n align-items: center;\n gap: 0.375rem;\n max-width: 100%;\n color: var(--cm-text);\n font-size: 14px;\n font-weight: 600;\n cursor: pointer;\n transition: background 120ms ease, border-color 120ms ease;\n}\n\n[data-component=\"session-switcher\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-element=\"trigger\"]:hover {\n background: var(--cm-primary-tint);\n}\n\n[data-component=\"session-switcher\"][data-open]:where(:not([data-unstyled], [data-unstyled] *)) [data-element=\"trigger\"] {\n background: var(--cm-primary-tint);\n border-color: var(--cm-primary);\n}\n\n[data-component=\"session-switcher\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-element=\"trigger-title\"] {\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n max-width: 14rem;\n}\n\n[data-component=\"session-switcher\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-element=\"popover\"] {\n position: absolute;\n top: calc(100% + 0.375rem);\n left: 0;\n min-width: 16rem;\n max-width: 22rem;\n max-height: 22rem;\n overflow: hidden;\n display: flex;\n flex-direction: column;\n background: var(--cm-bg);\n border: 1px solid var(--cm-border);\n border-radius: var(--cm-radius);\n box-shadow: 0 18px 40px -12px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(0, 0, 0, 0.04);\n z-index: 10001;\n font-weight: 400;\n}\n\n[data-component=\"session-switcher\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-element=\"new-session\"] {\n appearance: none;\n border: none;\n background: transparent;\n width: 100%;\n text-align: left;\n padding: 0.625rem 0.875rem;\n display: flex;\n align-items: center;\n gap: 0.5rem;\n font-size: 13px;\n font-weight: 600;\n color: var(--cm-primary);\n cursor: pointer;\n border-bottom: 1px solid var(--cm-border);\n}\n\n[data-component=\"session-switcher\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-element=\"new-session\"]:hover {\n background: var(--cm-primary-tint);\n}\n\n[data-component=\"session-switcher\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-element=\"new-session\"] [data-element=\"plus\"] {\n display: inline-flex;\n width: 1.25rem;\n height: 1.25rem;\n border-radius: 9999px;\n align-items: center;\n justify-content: center;\n background: var(--cm-primary);\n color: #ffffff;\n font-size: 14px;\n line-height: 1;\n}\n\n[data-component=\"session-switcher\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-element=\"session-list\"] {\n flex: 1 1 auto;\n overflow-y: auto;\n padding: 0.25rem 0;\n}\n\n[data-component=\"session-switcher\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-element=\"empty\"] {\n padding: 1rem 0.875rem;\n color: var(--cm-text-muted);\n font-size: 13px;\n text-align: center;\n}\n\n[data-component=\"session-switcher\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-element=\"session-row\"] {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n padding: 0.5rem 0.875rem;\n cursor: pointer;\n transition: background 120ms ease;\n}\n\n[data-component=\"session-switcher\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-element=\"session-row\"]:hover {\n background: var(--cm-primary-tint);\n}\n\n[data-component=\"session-switcher\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-element=\"session-row\"][data-active] {\n background: var(--cm-primary-tint);\n}\n\n[data-component=\"session-switcher\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-element=\"row-main\"] {\n flex: 1 1 auto;\n min-width: 0;\n}\n\n[data-component=\"session-switcher\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-element=\"row-title\"] {\n font-size: 13px;\n font-weight: 600;\n color: var(--cm-text);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n[data-component=\"session-switcher\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-element=\"row-subtitle\"] {\n font-size: 11px;\n color: var(--cm-text-muted);\n margin-top: 0.125rem;\n}\n\n[data-component=\"session-switcher\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-element=\"row-delete\"],\n[data-component=\"session-switcher\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-element=\"row-edit\"] {\n appearance: none;\n border: none;\n background: transparent;\n width: 1.5rem;\n height: 1.5rem;\n border-radius: var(--cm-radius-sm);\n color: var(--cm-text-muted);\n cursor: pointer;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n opacity: 0;\n transition: opacity 120ms ease, background 120ms ease, color 120ms ease;\n flex-shrink: 0;\n}\n\n[data-component=\"session-switcher\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-element=\"session-row\"]:hover [data-element=\"row-delete\"],\n[data-component=\"session-switcher\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-element=\"session-row\"]:hover [data-element=\"row-edit\"] {\n opacity: 1;\n}\n\n[data-component=\"session-switcher\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-element=\"row-edit\"]:hover {\n background: var(--cm-primary-tint);\n color: var(--cm-text);\n}\n\n[data-component=\"session-switcher\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-element=\"row-delete\"]:hover {\n background: rgba(220, 38, 38, 0.1);\n color: var(--cm-danger);\n}\n\n[data-component=\"session-switcher\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-element=\"session-row\"][data-editing] {\n background: var(--cm-primary-tint);\n cursor: text;\n}\n\n[data-component=\"session-switcher\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-element=\"row-title-input\"] {\n width: 100%;\n appearance: none;\n background: transparent;\n border: none;\n outline: none;\n padding: 0;\n margin: 0;\n font: inherit;\n font-size: 13px;\n font-weight: 600;\n color: var(--cm-text);\n caret-color: var(--cm-primary);\n}\n\n[data-component=\"session-switcher\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-element=\"row-title-input\"]::placeholder {\n color: var(--cm-text-muted);\n}\n\n/* ---------- Confirm dialog ---------- */\n\n[data-component=\"confirm-dialog-backdrop\"]:where(:not([data-unstyled], [data-unstyled] *)) {\n position: fixed;\n inset: 0;\n z-index: 10010;\n background: rgba(0, 0, 0, 0.55);\n backdrop-filter: blur(4px);\n -webkit-backdrop-filter: blur(4px);\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 1rem;\n font-family: var(--cm-font);\n animation: cm-confirm-fade 140ms ease-out;\n}\n\n[data-component=\"confirm-dialog\"]:where(:not([data-unstyled], [data-unstyled] *)) {\n background: var(--cm-bg);\n color: var(--cm-text);\n border: 1px solid var(--cm-border);\n border-radius: var(--cm-radius);\n box-shadow:\n 0 25px 50px -12px rgba(0, 0, 0, 0.6),\n 0 0 0 1px rgba(255, 255, 255, 0.04);\n padding: 1.25rem 1.25rem 1rem;\n min-width: min(22rem, calc(100vw - 2rem));\n max-width: 26rem;\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n animation: cm-confirm-pop 160ms cubic-bezier(0.2, 0.9, 0.3, 1.1);\n}\n\n[data-component=\"confirm-dialog\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-element=\"title\"] {\n font-size: 15px;\n font-weight: 600;\n color: var(--cm-text);\n line-height: 1.4;\n}\n\n[data-component=\"confirm-dialog\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-element=\"message\"] {\n font-size: 13px;\n color: var(--cm-text-muted);\n line-height: 1.5;\n margin-bottom: 0.25rem;\n}\n\n[data-component=\"confirm-dialog\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-element=\"actions\"] {\n display: flex;\n justify-content: flex-end;\n gap: 0.5rem;\n margin-top: 0.75rem;\n}\n\n[data-component=\"confirm-dialog\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-element=\"actions\"] button {\n appearance: none;\n border: 1px solid var(--cm-border);\n background: transparent;\n color: var(--cm-text);\n padding: 0.5rem 1rem;\n border-radius: var(--cm-radius-sm);\n font-size: 13px;\n font-weight: 600;\n cursor: pointer;\n transition: background 120ms ease, border-color 120ms ease, color 120ms ease, transform 120ms ease;\n font-family: inherit;\n}\n\n[data-component=\"confirm-dialog\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-element=\"cancel\"]:hover {\n background: var(--cm-primary-tint);\n border-color: var(--cm-primary);\n}\n\n[data-component=\"confirm-dialog\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-element=\"confirm\"] {\n background: var(--cm-primary);\n border-color: var(--cm-primary);\n color: #ffffff;\n}\n\n[data-component=\"confirm-dialog\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-element=\"confirm\"]:hover:not(:disabled) {\n filter: brightness(1.1);\n transform: translateY(-1px);\n}\n\n[data-component=\"confirm-dialog\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-element=\"confirm\"][data-destructive] {\n background: var(--cm-danger);\n border-color: var(--cm-danger);\n}\n\n[data-component=\"confirm-dialog\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-element=\"confirm\"]:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n\n@keyframes cm-confirm-fade {\n from { opacity: 0; }\n to { opacity: 1; }\n}\n\n@keyframes cm-confirm-pop {\n from { opacity: 0; transform: scale(0.95) translateY(6px); }\n to { opacity: 1; transform: scale(1) translateY(0); }\n}\n\n[data-component=\"chat-window-body\"]:where(:not([data-unstyled], [data-unstyled] *)) {\n flex: 1 1 auto;\n min-height: 0;\n display: flex;\n flex-direction: column;\n overflow: hidden;\n}\n\n/* When ai-chat-panel is a direct child of chat-window-body, drop its own\n border/radius/shadow so the window shell owns the framing. */\n[data-component=\"chat-window-body\"]:where(:not([data-unstyled], [data-unstyled] *)) > [data-component=\"ai-chat-panel\"] {\n border: none;\n border-radius: 0;\n box-shadow: none;\n min-height: 0;\n height: 100%;\n}\n\n/* ---------- Approval reminder ---------- */\n[data-component=\"ai-chat-panel\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component=\"approval-reminder\"] {\n margin: 0 1rem 0.5rem;\n padding: 0.5rem 0.75rem;\n border-radius: var(--cm-radius-sm);\n background: var(--cm-primary-tint);\n color: var(--cm-text);\n font-size: 0.8125rem;\n}\n\n/* ---------------------------------------------------------------------------\n AssistantShell — docked sidebar or detached window. The handle geometry\n is inline, so it also works unstyled; these rules are only the look.\n --------------------------------------------------------------------------- */\n[data-component=\"assistant-shell\"][data-floating-gesture]:where(:not([data-unstyled], [data-unstyled] *)) { transition: none; will-change: transform, width, height; }\n@media (pointer: coarse) {\n [data-component=\"assistant-shell-window-handle\"]:where(:not([data-unstyled], [data-unstyled] *)):is([data-resize-edge=\"n\"], [data-resize-edge=\"s\"]) { height: 16px !important; }\n [data-component=\"assistant-shell-window-handle\"]:where(:not([data-unstyled], [data-unstyled] *)):is([data-resize-edge=\"e\"], [data-resize-edge=\"w\"]) { width: 16px !important; }\n [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; }\n}\n\n[data-component=\"assistant-shell\"]:where(:not([data-unstyled], [data-unstyled] *)) {\n box-sizing: border-box;\n z-index: 60;\n background: var(--cm-bg);\n color: var(--cm-text);\n font-family: var(--cm-font);\n border-left: 1px solid var(--cm-border);\n}\n[data-component=\"assistant-shell\"][data-mode=\"floating\"]:where(:not([data-unstyled], [data-unstyled] *)) {\n border: 1px solid var(--cm-border);\n border-radius: var(--cm-radius);\n box-shadow: 0 12px 32px -12px rgba(17, 24, 39, 0.25);\n overflow: hidden;\n}\n[data-component=\"assistant-shell\"][data-floating-gesture=\"move\"]:where(:not([data-unstyled], [data-unstyled] *)) {\n box-shadow: 0 16px 40px -12px rgba(17, 24, 39, 0.35);\n}\n[data-component=\"assistant-shell\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-element=\"header\"] {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n height: 2.75rem;\n flex-shrink: 0;\n padding: 0 0.75rem;\n border-bottom: 1px solid var(--cm-border);\n}\n[data-component=\"assistant-shell\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-element=\"header\"] > [data-element=\"icon\"] {\n display: inline-flex;\n color: var(--cm-primary);\n}\n[data-component=\"assistant-shell\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-element=\"title\"] {\n flex: 1 1 0%;\n min-width: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n font-size: 0.875rem;\n font-weight: 600;\n}\n[data-component=\"assistant-shell\"]:where(:not([data-unstyled], [data-unstyled] *)) :is(header[data-element=\"header\"], [data-element=\"rail\"]) > [data-action] {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n width: 1.75rem;\n height: 1.75rem;\n padding: 0;\n border: 0;\n border-radius: var(--cm-radius-sm);\n background: transparent;\n color: var(--cm-text-muted);\n cursor: pointer;\n}\n[data-component=\"assistant-shell\"]:where(:not([data-unstyled], [data-unstyled] *)) :is(header[data-element=\"header\"], [data-element=\"rail\"]) > [data-action]:hover {\n background: var(--cm-primary-tint);\n color: var(--cm-text);\n}\n[data-component=\"assistant-shell\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-element=\"rail\"] {\n display: flex;\n flex-direction: column;\n align-items: center;\n height: 100%;\n padding: 0.5rem 0;\n}\n[data-component=\"assistant-shell\"]:where(:not([data-unstyled], [data-unstyled] *)) [data-element=\"rail\"] > [data-action=\"expand\"] {\n flex: 1 1 0%;\n width: 100%;\n height: auto;\n flex-direction: column;\n justify-content: flex-start;\n gap: 1rem;\n padding-top: 0.25rem;\n font-size: 0.75rem;\n font-weight: 500;\n}\n[data-component=\"assistant-shell-resize\"]:where(:not([data-unstyled], [data-unstyled] *)):is(:hover, :focus-visible, [data-dragging]) {\n background: linear-gradient(to right, transparent 3px, var(--cm-primary) 3px, var(--cm-primary) 5px, transparent 5px);\n outline: none;\n}\n[data-component=\"assistant-bubble\"]:where(:not([data-unstyled], [data-unstyled] *)) {\n position: fixed;\n right: 1rem;\n bottom: 1rem;\n z-index: 40;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 2.75rem;\n height: 2.75rem;\n border: 0;\n border-radius: 9999px;\n background: var(--cm-primary);\n color: #fff;\n box-shadow: 0 8px 20px -8px rgba(17, 24, 39, 0.4);\n cursor: pointer;\n}\n[data-component=\"assistant-toggle\"]:where(:not([data-unstyled], [data-unstyled] *)) {\n display: inline-flex;\n align-items: center;\n gap: 0.5rem;\n height: 2.25rem;\n padding: 0 0.75rem;\n border: 0;\n border-radius: var(--cm-radius-sm);\n background: transparent;\n color: var(--cm-text);\n font: inherit;\n font-size: 0.875rem;\n cursor: pointer;\n}\n[data-component=\"assistant-toggle\"]:where(:not([data-unstyled], [data-unstyled] *)):is(:hover, [aria-pressed=\"true\"]) {\n background: var(--cm-primary-tint);\n}\n";
package/dist/cjs/react/components/approval-card.js CHANGED
@@ -2,7 +2,26 @@
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.ApprovalCard = ApprovalCard;
4
4
  const jsx_runtime_1 = require("react/jsx-runtime");
5
+ const react_1 = require("react");
5
6
  const chat_context_js_1 = require("../provider/chat-context.js");
7
+ const COLLAPSED_ITEMS = 2;
8
+ const LONG_TEXT_LENGTH = 100;
9
+ function DetailValue({ value, items }) {
10
+ const { locale } = (0, chat_context_js_1.useChatContext)();
11
+ const [expanded, setExpanded] = (0, react_1.useState)(false);
12
+ const isList = !!items && items.length > COLLAPSED_ITEMS;
13
+ const isLong = !isList && value.length > LONG_TEXT_LENGTH;
14
+ if (!isList && !isLong) {
15
+ return (0, jsx_runtime_1.jsx)("span", { "data-element": "detail-value", children: value });
16
+ }
17
+ const hidden = isList ? items.length - COLLAPSED_ITEMS : 0;
18
+ const toggleLabel = expanded
19
+ ? locale.showLessLabel
20
+ : isList
21
+ ? locale.showAllItemsLabel.replace('{count}', String(items.length))
22
+ : locale.showMoreLabel;
23
+ return ((0, jsx_runtime_1.jsxs)("span", { "data-element": "detail-value", "data-expanded": expanded ? '' : undefined, children: [isList && expanded ? ((0, jsx_runtime_1.jsx)("ul", { "data-element": "detail-items", children: items.map((item, i) => ((0, jsx_runtime_1.jsx)("li", { children: item }, i))) })) : isList ? ((0, jsx_runtime_1.jsxs)("span", { "data-element": "detail-summary", children: [items.slice(0, COLLAPSED_ITEMS).join(', '), " +", hidden, " ", locale.moreItemsLabel] })) : ((0, jsx_runtime_1.jsx)("span", { "data-element": "detail-text", "data-collapsed": expanded ? undefined : '', children: value })), (0, jsx_runtime_1.jsx)("button", { type: "button", "data-element": "detail-toggle", "aria-expanded": expanded, onClick: () => setExpanded((open) => !open), children: toggleLabel })] }));
24
+ }
6
25
  /**
7
26
  * Single tool approval card with rich detail display.
8
27
  *
@@ -19,6 +38,6 @@ function ApprovalCard({ approval, onApprove, onReject, className, isProcessing,
19
38
  }
20
39
  const label = detail.substring(0, colonIndex);
21
40
  const value = detail.substring(colonIndex + 1).trim();
22
- return ((0, jsx_runtime_1.jsxs)("div", { "data-element": "detail-line", children: [(0, jsx_runtime_1.jsx)("span", { "data-element": "detail-label", children: label }), (0, jsx_runtime_1.jsx)("span", { "data-element": "detail-value", children: value })] }, i));
41
+ return ((0, jsx_runtime_1.jsxs)("div", { "data-element": "detail-line", children: [(0, jsx_runtime_1.jsx)("span", { "data-element": "detail-label", children: label }), (0, jsx_runtime_1.jsx)(DetailValue, { value: value, items: approval.detailItems?.[i] })] }, i));
23
42
  }) })), (0, jsx_runtime_1.jsxs)("div", { "data-element": "actions", children: [(0, jsx_runtime_1.jsxs)("button", { onClick: () => onReject(approval.id), disabled: isProcessing, "data-action": "reject", children: ['\u2715', " ", locale.cancelButton] }), (0, jsx_runtime_1.jsxs)("button", { onClick: () => onApprove(approval.id), disabled: isProcessing, "data-action": "approve", children: ['\u2713', " ", approval.confirmText ?? locale.confirmButton] })] })] }));
24
43
  }
package/dist/cjs/react/locale-de.js CHANGED
@@ -20,6 +20,9 @@ exports.deChatLocale = {
20
20
  confirmButton: 'Bestätigen',
21
21
  approvalPendingHint: 'Bitte bestätige oder lehne zuerst die offene Anfrage ab.',
22
22
  moreItemsLabel: 'weitere',
23
+ showAllItemsLabel: 'Alle {count} anzeigen',
24
+ showMoreLabel: 'Mehr anzeigen',
25
+ showLessLabel: 'Weniger anzeigen',
23
26
  allCountLabel: 'Alle {count}',
24
27
  pipelineTitle: 'Ablauf',
25
28
  pipelineRunningLabel: 'Läuft',
package/dist/cjs/react/provider/ai-chat-provider.js CHANGED
@@ -39,6 +39,9 @@ exports.DEFAULT_LOCALE = {
39
39
  confirmButton: 'Confirm',
40
40
  approvalPendingHint: 'Please approve or reject the open request first.',
41
41
  moreItemsLabel: 'more',
42
+ showAllItemsLabel: 'Show all {count}',
43
+ showMoreLabel: 'Show more',
44
+ showLessLabel: 'Show less',
42
45
  allCountLabel: 'All {count}',
43
46
  pipelineTitle: 'Pipeline',
44
47
  pipelineRunningLabel: 'Running',
package/dist/cjs/react/styles.css CHANGED
@@ -340,6 +340,32 @@
340
340
  font-weight: 500;
341
341
  overflow-wrap: anywhere;
342
342
  }
343
+ [data-component="ai-chat-panel"]:where(:not([data-unstyled], [data-unstyled] *)) [data-element="detail-items"] {
344
+ margin: 0;
345
+ padding: 0 0 0 1.125rem;
346
+ }
347
+ [data-component="ai-chat-panel"]:where(:not([data-unstyled], [data-unstyled] *)) [data-element="detail-text"][data-collapsed] {
348
+ display: -webkit-box;
349
+ -webkit-box-orient: vertical;
350
+ -webkit-line-clamp: 2;
351
+ overflow: hidden;
352
+ }
353
+ [data-component="ai-chat-panel"]:where(:not([data-unstyled], [data-unstyled] *)) [data-element="detail-toggle"] {
354
+ display: block;
355
+ margin-top: 0.125rem;
356
+ padding: 0;
357
+ background: none;
358
+ border: none;
359
+ color: inherit;
360
+ font: inherit;
361
+ font-weight: 500;
362
+ text-decoration: underline;
363
+ cursor: pointer;
364
+ }
365
+ [data-component="ai-chat-panel"]:where(:not([data-unstyled], [data-unstyled] *)) [data-element="detail-toggle"]:focus-visible {
366
+ outline: 2px solid var(--cm-primary);
367
+ outline-offset: 2px;
368
+ }
343
369
  [data-component="ai-chat-panel"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component="approval-card"] [data-element="actions"],
344
370
  [data-component="ai-chat-panel"]:where(:not([data-unstyled], [data-unstyled] *)) [data-component="bulk-approval-card"] [data-element="actions"] {
345
371
  display: flex;
package/dist/cjs/react/types.d.ts CHANGED
@@ -495,6 +495,9 @@ export interface ChatLocale {
495
495
  cancelButton: string;
496
496
  confirmButton: string;
497
497
  moreItemsLabel: string;
498
+ showAllItemsLabel: string;
499
+ showMoreLabel: string;
500
+ showLessLabel: string;
498
501
  allCountLabel: string;
499
502
  pipelineTitle: string;
500
503
  pipelineRunningLabel: string;
@@ -718,6 +721,8 @@ export interface PendingApproval {
718
721
  description?: string;
719
722
  /** Detail lines (e.g. "Title: My Task", "Priority: High") */
720
723
  details?: string[];
724
+ /** Items of array-valued detail lines, by index into `details`. */
725
+ detailItems?: Array<string[] | undefined>;
721
726
  /** Confirm button text override */
722
727
  confirmText?: string;
723
728
  }
package/dist/cjs/react/utils/create-approval-description.js CHANGED
@@ -109,32 +109,37 @@ function createApprovalDescriptionGenerator(config = {}) {
109
109
  continue;
110
110
  }
111
111
  const label = fieldLabels[key] || key;
112
- let displayValue;
113
112
  if (Array.isArray(value)) {
114
113
  const filtered = value.filter((v) => !UUID_REGEX.test(String(v)));
115
114
  if (filtered.length === 0)
116
115
  continue;
117
- displayValue = filtered.map((v) => formatValue(key, v)).join(', ');
116
+ const items = filtered.map((v) => formatValue(key, v));
117
+ result.push({ line: `${label}: ${items.join(', ')}`, items });
118
118
  }
119
119
  else {
120
- displayValue = formatValue(key, value);
120
+ result.push({ line: `${label}: ${formatValue(key, value)}` });
121
121
  }
122
- result.push(`${label}: ${displayValue}`);
123
122
  }
124
123
  return result;
125
124
  }
126
125
  return (toolName, approvalId, args, context) => {
127
126
  const details = [];
127
+ const detailItems = [];
128
128
  if (args && typeof args === 'object') {
129
129
  const stated = collectDetails(args);
130
130
  // What the call states comes first: a grouped card shows the first line.
131
- details.push(...stated);
131
+ for (const entry of stated) {
132
+ details.push(entry.line);
133
+ detailItems.push(entry.items);
134
+ }
132
135
  if (context?.names?.size) {
133
136
  // A name the arguments already state is not repeated; a differing
134
137
  // one stays visible next to it.
135
138
  for (const [label, name] of collectNames(args, context.names)) {
136
- if (!stated.some((line) => line.endsWith(`: ${name}`)))
139
+ if (!stated.some((entry) => entry.line.endsWith(`: ${name}`))) {
137
140
  details.push(`${label}: ${name}`);
141
+ detailItems.push(undefined);
142
+ }
138
143
  }
139
144
  }
140
145
  }
@@ -145,6 +150,7 @@ function createApprovalDescriptionGenerator(config = {}) {
145
150
  messageId: '',
146
151
  description: toolLabels[toolName] || defaultDescription,
147
152
  details,
153
+ ...(detailItems.some(Boolean) ? { detailItems } : {}),
148
154
  ...(defaultConfirmText ? { confirmText: defaultConfirmText } : {}),
149
155
  };
150
156
  };
package/dist/cjs/runtime/glirastes.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import { type ExecutionBudget, type Principal, type SecurityRevocation } from '../contracts/index.js';
1
+ import { type Principal, type SecurityRevocation } from '../contracts/index.js';
2
2
  import type { ToolRegistry } from '../types.js';
3
3
  import { type ResolvedRuntimeConnection } from '../sync/connection-lookup.js';
4
4
  import type { RuntimePushConnector } from '../sync/control-plane-client.js';
@@ -8,6 +8,7 @@ import { type LocalRuntimeSource } from './local-runtime-source.js';
8
8
  import { type LocalToolBinding } from './local-tool-bindings.js';
9
9
  import { type RuntimeMetricsSinkOptions } from './metrics/sink.js';
10
10
  import type { RuntimeMetricsSink } from './metrics/turn-recorder.js';
11
+ import { type LocalLimits } from './local-limits.js';
11
12
  import type { ToolSearchSemanticsMap } from './tool-discovery.js';
12
13
  import type { TurnSnapshot } from './turn-snapshot.js';
13
14
  /** The module `glirastes tools refresh` emits (`tools.generated.ts`). */
@@ -17,8 +18,8 @@ export interface GlirastesGeneratedModule extends GeneratedToolModule {
17
18
  export interface CreateGlirastesOptions {
18
19
  /** The generated module, e.g. `import * as generated from '@/generated/glirastes/tools.generated'`. */
19
20
  generated: GlirastesGeneratedModule;
20
- /** Local turn limits; the runtime never exceeds them, whatever a Platform revision allows. */
21
- localLimits: ExecutionBudget;
21
+ /** Local turn limits; the runtime never exceeds them, whatever a Platform revision allows. Unset fields use `DEFAULT_LOCAL_LIMITS`. */
22
+ localLimits?: LocalLimits;
22
23
  /**
23
24
  * Wraps the generated bindings before they are bound, e.g. to add write
24
25
  * feedback to the endpoint tools. Called once per process.
@@ -32,7 +33,7 @@ export interface CreateGlirastesOptions {
32
33
  * code whatever is reported here.
33
34
  */
34
35
  onError?: (error: unknown) => void;
35
- /** The app version reported at runner registration. */
36
+ /** The app version reported at runner registration. Defaults to `GLIRASTES_BUILD_ID`, else `glirastes@<sdk version>`. */
36
37
  version?: string;
37
38
  /** A technical runtime label reported at registration, e.g. `nextjs`. */
38
39
  runtime?: string;
package/dist/cjs/runtime/glirastes.js CHANGED
@@ -12,6 +12,8 @@ const local_tool_bindings_js_1 = require("./local-tool-bindings.js");
12
12
  const sink_js_1 = require("./metrics/sink.js");
13
13
  const policy_overlay_js_1 = require("./policy-overlay.js");
14
14
  const runtime_mode_js_1 = require("./runtime-mode.js");
15
+ const local_limits_js_1 = require("./local-limits.js");
16
+ const sdk_version_js_1 = require("./sdk-version.js");
15
17
  const DEFAULT_FIRST_SYNC_TIMEOUT_MS = 5_000;
16
18
  const DEFAULT_RETRY_INTERVAL_MS = 30_000;
17
19
  /** Keeps the sync state in memory and the accepted deployment materialized for the turns. */
@@ -101,7 +103,7 @@ function createInstance(options, appId) {
101
103
  const localSource = (identity, managed) => (0, local_runtime_source_js_1.createLocalRuntimeSource)({
102
104
  setupArtifact: bound.setupArtifact,
103
105
  bindings: bound.bindings,
104
- localLimits: options.localLimits,
106
+ localLimits: (0, local_limits_js_1.resolveLocalLimits)(options.localLimits),
105
107
  ...(identity ? { identity } : {}),
106
108
  ...(managed
107
109
  ? {
@@ -165,7 +167,7 @@ function createInstance(options, appId) {
165
167
  appId: connection.appId,
166
168
  environmentId: connection.environmentId,
167
169
  runnerKey: connection.runnerKey,
168
- version: options.version ?? '0.0.0',
170
+ version: options.version?.trim() || env.GLIRASTES_BUILD_ID?.trim() || `glirastes@${sdk_version_js_1.SDK_VERSION}`,
169
171
  stateStore: store,
170
172
  setupArtifact: options.generated.setupArtifact,
171
173
  // A deployment that names a tool this code lacks, or has changed, keeps running on the local tool.
package/dist/cjs/runtime/index.d.ts CHANGED
@@ -2,6 +2,7 @@ export { assertPromptPinForResume, createTurnSnapshot, isToolRevoked, type TurnS
2
2
  export { PromptBundleStore, type ActivePromptBundle, type PinnedPromptBundle, type PromptArtifactRegistry, type PromptBundleSections, type PromptBundleStoreOptions, type StagedPromptBundle, } from './prompt-bundle-store.js';
3
3
  export { authorizeToolCall, type ToolAuthorizationResult, } from './authorization.js';
4
4
  export { ExecutionBudgetTracker, type BudgetEvaluation, type BudgetReason, type ExecutionUsage, } from './budget.js';
5
+ export { DEFAULT_LOCAL_LIMITS, resolveLocalLimits, type LocalLimits } from './local-limits.js';
5
6
  export { createExecutionFingerprint } from './fingerprint.js';
6
7
  export { DEFAULT_CONTROL_PLANE_URL, RUNTIME_API_KEY_PATTERN, resolveRuntimeConnectionConfig, resolveRuntimeMode, type RuntimeConnectionConfig, type RuntimeMode, } from './runtime-mode.js';
7
8
  export { createEphemeralLocalSigner, type LocalRevisionSigner, } from './local-signer.js';
package/dist/cjs/runtime/index.js CHANGED
@@ -1,6 +1,6 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.lookupRuntimeConnection = exports.createGlirastes = exports.createRuntimeMetricsSinkFromEnv = exports.createRuntimeMetricsSink = exports.createTurnMetricsRecorder = exports.resolveStepCost = exports.rawChunkCostUsd = exports.providerReportedCostUsd = exports.combineTurnCost = exports.UNKNOWN_TURN_COST = exports.RuntimePriceTableSchema = exports.createGeneratedRuntimeSource = exports.createContractBindings = exports.createPostgresRuntimeStore = exports.assertRuntimePersistenceReady = exports.POSTGRES_RUNTIME_STORE_SCHEMA_SQL = exports.CheckpointConflictError = exports.OfflineExecutionLeaseAuthorizer = exports.createJsonSchemaLike = exports.searchTokens = exports.searchTermVariants = exports.createToolSearchIndex = exports.createTurnToolDiscovery = exports.createRegistryToolDiscovery = exports.relaxableToolIds = exports.policyOverlayFromRevision = exports.applyPolicyOverlay = exports.modelFacingToolName = exports.materializeManifestToolRegistry = exports.localToolBindingMismatches = exports.createLocalSchemaDigest = exports.assertLocalToolBindingMatches = exports.createManagedTurnGuard = exports.createLocalRuntimeSource = exports.createEphemeralLocalSigner = exports.resolveRuntimeMode = exports.resolveRuntimeConnectionConfig = exports.RUNTIME_API_KEY_PATTERN = exports.DEFAULT_CONTROL_PLANE_URL = exports.createExecutionFingerprint = exports.ExecutionBudgetTracker = exports.authorizeToolCall = exports.PromptBundleStore = exports.isToolRevoked = exports.createTurnSnapshot = exports.assertPromptPinForResume = void 0;
3
+ exports.lookupRuntimeConnection = exports.createGlirastes = exports.createRuntimeMetricsSinkFromEnv = exports.createRuntimeMetricsSink = exports.createTurnMetricsRecorder = exports.resolveStepCost = exports.rawChunkCostUsd = exports.providerReportedCostUsd = exports.combineTurnCost = exports.UNKNOWN_TURN_COST = exports.RuntimePriceTableSchema = exports.createGeneratedRuntimeSource = exports.createContractBindings = exports.createPostgresRuntimeStore = exports.assertRuntimePersistenceReady = exports.POSTGRES_RUNTIME_STORE_SCHEMA_SQL = exports.CheckpointConflictError = exports.OfflineExecutionLeaseAuthorizer = exports.createJsonSchemaLike = exports.searchTokens = exports.searchTermVariants = exports.createToolSearchIndex = exports.createTurnToolDiscovery = exports.createRegistryToolDiscovery = exports.relaxableToolIds = exports.policyOverlayFromRevision = exports.applyPolicyOverlay = exports.modelFacingToolName = exports.materializeManifestToolRegistry = exports.localToolBindingMismatches = exports.createLocalSchemaDigest = exports.assertLocalToolBindingMatches = exports.createManagedTurnGuard = exports.createLocalRuntimeSource = exports.createEphemeralLocalSigner = exports.resolveRuntimeMode = exports.resolveRuntimeConnectionConfig = exports.RUNTIME_API_KEY_PATTERN = exports.DEFAULT_CONTROL_PLANE_URL = exports.createExecutionFingerprint = exports.resolveLocalLimits = exports.DEFAULT_LOCAL_LIMITS = exports.ExecutionBudgetTracker = exports.authorizeToolCall = exports.PromptBundleStore = exports.isToolRevoked = exports.createTurnSnapshot = exports.assertPromptPinForResume = void 0;
4
4
  var turn_snapshot_js_1 = require("./turn-snapshot.js");
5
5
  Object.defineProperty(exports, "assertPromptPinForResume", { enumerable: true, get: function () { return turn_snapshot_js_1.assertPromptPinForResume; } });
6
6
  Object.defineProperty(exports, "createTurnSnapshot", { enumerable: true, get: function () { return turn_snapshot_js_1.createTurnSnapshot; } });
@@ -11,6 +11,9 @@ var authorization_js_1 = require("./authorization.js");
11
11
  Object.defineProperty(exports, "authorizeToolCall", { enumerable: true, get: function () { return authorization_js_1.authorizeToolCall; } });
12
12
  var budget_js_1 = require("./budget.js");
13
13
  Object.defineProperty(exports, "ExecutionBudgetTracker", { enumerable: true, get: function () { return budget_js_1.ExecutionBudgetTracker; } });
14
+ var local_limits_js_1 = require("./local-limits.js");
15
+ Object.defineProperty(exports, "DEFAULT_LOCAL_LIMITS", { enumerable: true, get: function () { return local_limits_js_1.DEFAULT_LOCAL_LIMITS; } });
16
+ Object.defineProperty(exports, "resolveLocalLimits", { enumerable: true, get: function () { return local_limits_js_1.resolveLocalLimits; } });
14
17
  var fingerprint_js_1 = require("./fingerprint.js");
15
18
  Object.defineProperty(exports, "createExecutionFingerprint", { enumerable: true, get: function () { return fingerprint_js_1.createExecutionFingerprint; } });
16
19
  var runtime_mode_js_1 = require("./runtime-mode.js");
package/dist/cjs/runtime/local-limits.d.ts ADDED
@@ -0,0 +1,6 @@
1
+ import type { DelegationBudget, ExecutionBudget } from '../contracts/index.js';
2
+ export type LocalLimits = Partial<Omit<ExecutionBudget, 'delegation'>> & {
3
+ delegation?: Partial<DelegationBudget>;
4
+ };
5
+ export declare const DEFAULT_LOCAL_LIMITS: ExecutionBudget;
6
+ export declare function resolveLocalLimits(limits?: LocalLimits): ExecutionBudget;
package/dist/cjs/runtime/local-limits.js ADDED
@@ -0,0 +1,26 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.DEFAULT_LOCAL_LIMITS = void 0;
4
+ exports.resolveLocalLimits = resolveLocalLimits;
5
+ exports.DEFAULT_LOCAL_LIMITS = {
6
+ maxModelSteps: 6,
7
+ maxToolCalls: 8,
8
+ totalTimeoutMs: 60_000,
9
+ toolTimeoutMs: 15_000,
10
+ maxInputTokens: 40_000,
11
+ maxOutputTokens: 4_000,
12
+ maxEstimatedCostUsd: 0.5,
13
+ maxRepeatedFingerprint: 3,
14
+ maxConsecutiveErrors: 3,
15
+ delegation: { maxDepth: 1, maxBreadth: 1, sharedBudget: true },
16
+ };
17
+ function defined(value) {
18
+ return Object.fromEntries(Object.entries(value ?? {}).filter(([, entry]) => entry !== undefined));
19
+ }
20
+ function resolveLocalLimits(limits) {
21
+ return {
22
+ ...exports.DEFAULT_LOCAL_LIMITS,
23
+ ...defined(limits),
24
+ delegation: { ...exports.DEFAULT_LOCAL_LIMITS.delegation, ...defined(limits?.delegation) },
25
+ };
26
+ }