orquesta-embed 0.1.28 → 0.1.30

package/dist/styles/embed-inline.d.ts

@@ -1,2 +1,2 @@
-export declare const EMBED_CSS = "\n/* Orquesta Embed SDK Styles - Auto-injected */\n/* These styles are scoped to orquesta-* classes to avoid conflicts */\n\n/* Reset for Orquesta elements */\n[class^=\"orquesta-\"],\n[class*=\" orquesta-\"] {\n  box-sizing: border-box;\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\n/* Base colors */\n.orquesta-embed-panel {\n  --orq-bg: #18181b;\n  --orq-bg-secondary: #27272a;\n  --orq-border: #3f3f46;\n  --orq-text: #fafafa;\n  --orq-text-muted: #a1a1aa;\n  --orq-primary: #3b82f6;\n  --orq-success: #22c55e;\n  --orq-warning: #eab308;\n  --orq-error: #ef4444;\n}\n\n/* Scrollbar styling */\n.orquesta-embed-panel ::-webkit-scrollbar {\n  width: 6px;\n  height: 6px;\n}\n\n.orquesta-embed-panel ::-webkit-scrollbar-track {\n  background: transparent;\n}\n\n.orquesta-embed-panel ::-webkit-scrollbar-thumb {\n  background: #3f3f46;\n  border-radius: 3px;\n}\n\n.orquesta-embed-panel ::-webkit-scrollbar-thumb:hover {\n  background: #52525b;\n}\n\n/* Animations */\n@keyframes orquesta-spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n\n@keyframes orquesta-pulse {\n  0%, 100% {\n    opacity: 1;\n  }\n  50% {\n    opacity: 0.5;\n  }\n}\n\n.orquesta-embed-panel .animate-spin {\n  animation: orquesta-spin 1s linear infinite;\n}\n\n.orquesta-embed-panel .animate-pulse {\n  animation: orquesta-pulse 2s ease-in-out infinite;\n}\n\n/* Utility classes */\n.orquesta-embed-panel .line-clamp-1 {\n  display: -webkit-box;\n  -webkit-line-clamp: 1;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n}\n\n.orquesta-embed-panel .line-clamp-2 {\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n}\n\n/* Focus visible */\n.orquesta-embed-panel button:focus-visible,\n.orquesta-embed-panel input:focus-visible,\n.orquesta-embed-panel textarea:focus-visible {\n  outline: 2px solid var(--orq-primary);\n  outline-offset: 2px;\n}\n\n/* Element selector highlight animation */\n#orquesta-element-highlight {\n  animation: orquesta-highlight-pulse 1.5s ease-in-out infinite;\n}\n\n@keyframes orquesta-highlight-pulse {\n  0%, 100% {\n    box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.4);\n  }\n  50% {\n    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.2);\n  }\n}\n\n/* Tooltip */\n.orquesta-tooltip {\n  position: absolute;\n  z-index: 2147483647;\n  padding: 4px 8px;\n  background: #18181b;\n  border: 1px solid #3f3f46;\n  border-radius: 4px;\n  font-size: 12px;\n  color: #fafafa;\n  pointer-events: none;\n  white-space: nowrap;\n}\n\n/* Transitions */\n.orquesta-embed-panel * {\n  transition-property: color, background-color, border-color, opacity, transform;\n  transition-duration: 150ms;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n/* Panel entrance animation */\n.orquesta-embed-panel {\n  animation: orquesta-panel-enter 0.2s ease-out;\n}\n\n@keyframes orquesta-panel-enter {\n  from {\n    opacity: 0;\n    transform: scale(0.95) translateY(10px);\n  }\n  to {\n    opacity: 1;\n    transform: scale(1) translateY(0);\n  }\n}\n\n/* Trigger button */\n.orquesta-embed-trigger {\n  animation: orquesta-trigger-enter 0.3s ease-out;\n}\n\n@keyframes orquesta-trigger-enter {\n  from {\n    opacity: 0;\n    transform: scale(0.8);\n  }\n  to {\n    opacity: 1;\n    transform: scale(1);\n  }\n}\n\n/* Log stream */\n.orquesta-log-stream {\n  background: #0a0a0a;\n  border: 1px solid #27272a;\n  border-radius: 6px;\n  padding: 8px;\n}\n\n/* Timeline item hover */\n.orquesta-timeline button:hover {\n  transform: translateX(2px);\n}\n\n/* ============================================ */\n/* Tailwind class overrides - CRITICAL STYLES  */\n/* These ensure styles work even when purged    */\n/* ============================================ */\n\n/* Explicit background colors */\n.orquesta-embed-panel {\n  background-color: #18181b !important;\n  color: #fafafa !important;\n}\n\n.orquesta-embed-panel .bg-zinc-950 { background-color: #09090b !important; }\n.orquesta-embed-panel .bg-zinc-900 { background-color: #18181b !important; }\n.orquesta-embed-panel .bg-zinc-800 { background-color: #27272a !important; }\n.orquesta-embed-panel .bg-zinc-700 { background-color: #3f3f46 !important; }\n.orquesta-embed-panel .bg-zinc-600 { background-color: #52525b !important; }\n\n/* Text colors */\n.orquesta-embed-panel .text-white { color: #fafafa !important; }\n.orquesta-embed-panel .text-zinc-100 { color: #f4f4f5 !important; }\n.orquesta-embed-panel .text-zinc-200 { color: #e4e4e7 !important; }\n.orquesta-embed-panel .text-zinc-300 { color: #d4d4d8 !important; }\n.orquesta-embed-panel .text-zinc-400 { color: #a1a1aa !important; }\n.orquesta-embed-panel .text-zinc-500 { color: #71717a !important; }\n.orquesta-embed-panel .text-red-400 { color: #f87171 !important; }\n.orquesta-embed-panel .text-red-300 { color: #fca5a5 !important; }\n.orquesta-embed-panel .text-green-400 { color: #4ade80 !important; }\n.orquesta-embed-panel .text-green-500 { color: #22c55e !important; }\n.orquesta-embed-panel .text-blue-400 { color: #60a5fa !important; }\n.orquesta-embed-panel .text-blue-500 { color: #3b82f6 !important; }\n.orquesta-embed-panel .text-yellow-400 { color: #facc15 !important; }\n.orquesta-embed-panel .text-purple-400 { color: #c084fc !important; }\n.orquesta-embed-panel .text-orange-400 { color: #fb923c !important; }\n.orquesta-embed-panel .text-gray-800 { color: #1f2937 !important; }\n\n/* Border colors */\n.orquesta-embed-panel .border-zinc-700 { border-color: #3f3f46 !important; }\n.orquesta-embed-panel .border-zinc-800 { border-color: #27272a !important; }\n.orquesta-embed-panel .border-red-800 { border-color: #991b1b !important; }\n\n/* Background colors for buttons and UI */\n.orquesta-embed-panel .bg-blue-500 { background-color: #3b82f6 !important; }\n.orquesta-embed-panel .bg-blue-600 { background-color: #2563eb !important; }\n.orquesta-embed-panel .bg-green-400 { background-color: #4ade80 !important; }\n.orquesta-embed-panel .bg-green-500 { background-color: #22c55e !important; }\n.orquesta-embed-panel .bg-green-600 { background-color: #16a34a !important; }\n.orquesta-embed-panel .bg-red-500 { background-color: #ef4444 !important; }\n.orquesta-embed-panel .bg-red-600 { background-color: #dc2626 !important; }\n.orquesta-embed-panel .bg-purple-600 { background-color: #9333ea !important; }\n.orquesta-embed-panel .bg-red-900\\/30 { background-color: rgba(127, 29, 29, 0.3) !important; }\n.orquesta-embed-panel .bg-white { background-color: #ffffff !important; }\n\n/* Hover states */\n.orquesta-embed-panel .hover\\:bg-zinc-700:hover { background-color: #3f3f46 !important; }\n.orquesta-embed-panel .hover\\:bg-zinc-800:hover { background-color: #27272a !important; }\n.orquesta-embed-panel .hover\\:bg-blue-500:hover { background-color: #3b82f6 !important; }\n.orquesta-embed-panel .hover\\:bg-blue-700:hover { background-color: #1d4ed8 !important; }\n.orquesta-embed-panel .hover\\:bg-gray-100:hover { background-color: #f3f4f6 !important; }\n.orquesta-embed-panel .hover\\:text-white:hover { color: #fafafa !important; }\n.orquesta-embed-panel .hover\\:text-zinc-300:hover { color: #d4d4d8 !important; }\n\n/* Form inputs */\n.orquesta-embed-panel input,\n.orquesta-embed-panel textarea {\n  background-color: #27272a !important;\n  border-color: #3f3f46 !important;\n  color: #fafafa !important;\n}\n\n.orquesta-embed-panel input::placeholder,\n.orquesta-embed-panel textarea::placeholder {\n  color: #71717a !important;\n}\n\n/* Buttons base */\n.orquesta-embed-panel button {\n  background-color: transparent;\n}\n\n.orquesta-embed-panel button:hover {\n  background-color: #3f3f46;\n}\n\n/* Rounded borders */\n.orquesta-embed-panel .rounded { border-radius: 0.25rem !important; }\n.orquesta-embed-panel .rounded-md { border-radius: 0.375rem !important; }\n.orquesta-embed-panel .rounded-lg { border-radius: 0.5rem !important; }\n.orquesta-embed-panel .rounded-xl { border-radius: 0.75rem !important; }\n.orquesta-embed-panel .rounded-full { border-radius: 9999px !important; }\n\n/* Border widths */\n.orquesta-embed-panel .border { border-width: 1px !important; }\n.orquesta-embed-panel .border-b { border-bottom-width: 1px !important; }\n.orquesta-embed-panel .border-t { border-top-width: 1px !important; }\n\n/* Padding */\n.orquesta-embed-panel .p-1 { padding: 0.25rem !important; }\n.orquesta-embed-panel .p-2 { padding: 0.5rem !important; }\n.orquesta-embed-panel .p-3 { padding: 0.75rem !important; }\n.orquesta-embed-panel .p-4 { padding: 1rem !important; }\n.orquesta-embed-panel .px-2 { padding-left: 0.5rem !important; padding-right: 0.5rem !important; }\n.orquesta-embed-panel .px-3 { padding-left: 0.75rem !important; padding-right: 0.75rem !important; }\n.orquesta-embed-panel .px-4 { padding-left: 1rem !important; padding-right: 1rem !important; }\n.orquesta-embed-panel .py-1 { padding-top: 0.25rem !important; padding-bottom: 0.25rem !important; }\n.orquesta-embed-panel .py-2 { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; }\n.orquesta-embed-panel .py-3 { padding-top: 0.75rem !important; padding-bottom: 0.75rem !important; }\n\n/* Margin */\n.orquesta-embed-panel .m-1 { margin: 0.25rem !important; }\n.orquesta-embed-panel .m-2 { margin: 0.5rem !important; }\n.orquesta-embed-panel .mb-1 { margin-bottom: 0.25rem !important; }\n.orquesta-embed-panel .mb-2 { margin-bottom: 0.5rem !important; }\n.orquesta-embed-panel .mb-4 { margin-bottom: 1rem !important; }\n.orquesta-embed-panel .mt-1 { margin-top: 0.25rem !important; }\n.orquesta-embed-panel .mt-2 { margin-top: 0.5rem !important; }\n.orquesta-embed-panel .mt-3 { margin-top: 0.75rem !important; }\n.orquesta-embed-panel .mt-4 { margin-top: 1rem !important; }\n.orquesta-embed-panel .mr-1 { margin-right: 0.25rem !important; }\n.orquesta-embed-panel .mr-2 { margin-right: 0.5rem !important; }\n.orquesta-embed-panel .mx-1 { margin-left: 0.25rem !important; margin-right: 0.25rem !important; }\n\n/* Gap */\n.orquesta-embed-panel .gap-0\\.5 { gap: 0.125rem !important; }\n.orquesta-embed-panel .gap-1 { gap: 0.25rem !important; }\n.orquesta-embed-panel .gap-1\\.5 { gap: 0.375rem !important; }\n.orquesta-embed-panel .gap-2 { gap: 0.5rem !important; }\n.orquesta-embed-panel .gap-3 { gap: 0.75rem !important; }\n.orquesta-embed-panel .gap-4 { gap: 1rem !important; }\n\n/* Flex */\n.orquesta-embed-panel .flex { display: flex !important; }\n.orquesta-embed-panel .flex-col { flex-direction: column !important; }\n.orquesta-embed-panel .flex-1 { flex: 1 1 0% !important; }\n.orquesta-embed-panel .flex-shrink-0 { flex-shrink: 0 !important; }\n.orquesta-embed-panel .items-center { align-items: center !important; }\n.orquesta-embed-panel .items-start { align-items: flex-start !important; }\n.orquesta-embed-panel .justify-center { justify-content: center !important; }\n.orquesta-embed-panel .justify-between { justify-content: space-between !important; }\n\n/* Width/Height */\n.orquesta-embed-panel .w-full { width: 100% !important; }\n.orquesta-embed-panel .w-2 { width: 0.5rem !important; }\n.orquesta-embed-panel .w-3 { width: 0.75rem !important; }\n.orquesta-embed-panel .w-3\\.5 { width: 0.875rem !important; }\n.orquesta-embed-panel .w-4 { width: 1rem !important; }\n.orquesta-embed-panel .w-5 { width: 1.25rem !important; }\n.orquesta-embed-panel .w-6 { width: 1.5rem !important; }\n.orquesta-embed-panel .w-8 { width: 2rem !important; }\n.orquesta-embed-panel .w-16 { width: 4rem !important; }\n.orquesta-embed-panel .h-2 { height: 0.5rem !important; }\n.orquesta-embed-panel .h-3 { height: 0.75rem !important; }\n.orquesta-embed-panel .h-3\\.5 { height: 0.875rem !important; }\n.orquesta-embed-panel .h-4 { height: 1rem !important; }\n.orquesta-embed-panel .h-5 { height: 1.25rem !important; }\n.orquesta-embed-panel .h-6 { height: 1.5rem !important; }\n.orquesta-embed-panel .h-8 { height: 2rem !important; }\n.orquesta-embed-panel .h-16 { height: 4rem !important; }\n.orquesta-embed-panel .h-full { height: 100% !important; }\n.orquesta-embed-panel .max-w-20 { max-width: 5rem !important; }\n\n/* Font */\n.orquesta-embed-panel .text-xs { font-size: 0.75rem !important; line-height: 1rem !important; }\n.orquesta-embed-panel .text-sm { font-size: 0.875rem !important; line-height: 1.25rem !important; }\n.orquesta-embed-panel .text-lg { font-size: 1.125rem !important; line-height: 1.75rem !important; }\n.orquesta-embed-panel .text-xl { font-size: 1.25rem !important; line-height: 1.75rem !important; }\n.orquesta-embed-panel .text-2xl { font-size: 1.5rem !important; line-height: 2rem !important; }\n.orquesta-embed-panel .text-4xl { font-size: 2.25rem !important; line-height: 2.5rem !important; }\n.orquesta-embed-panel .font-medium { font-weight: 500 !important; }\n.orquesta-embed-panel .font-semibold { font-weight: 600 !important; }\n.orquesta-embed-panel .font-bold { font-weight: 700 !important; }\n.orquesta-embed-panel .text-center { text-align: center !important; }\n.orquesta-embed-panel .truncate { overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; }\n\n/* Opacity */\n.orquesta-embed-panel .opacity-25 { opacity: 0.25 !important; }\n.orquesta-embed-panel .opacity-50 { opacity: 0.5 !important; }\n.orquesta-embed-panel .opacity-75 { opacity: 0.75 !important; }\n\n/* Overflow */\n.orquesta-embed-panel .overflow-hidden { overflow: hidden !important; }\n.orquesta-embed-panel .overflow-y-auto { overflow-y: auto !important; }\n\n/* Shadow */\n.orquesta-embed-panel .shadow-xl { box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important; }\n.orquesta-embed-panel .shadow-2xl { box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important; }\n.orquesta-embed-panel .shadow-lg { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important; }\n\n/* Position */\n.orquesta-embed-panel .fixed { position: fixed !important; }\n.orquesta-embed-panel .absolute { position: absolute !important; }\n.orquesta-embed-panel .relative { position: relative !important; }\n.orquesta-embed-panel .top-1 { top: 0.25rem !important; }\n.orquesta-embed-panel .right-1 { right: 0.25rem !important; }\n.orquesta-embed-panel .bottom-0 { bottom: 0 !important; }\n.orquesta-embed-panel .right-0 { right: 0 !important; }\n\n/* Z-index */\n.orquesta-embed-panel .z-\\[2147483647\\] { z-index: 2147483647 !important; }\n\n/* Cursor */\n.orquesta-embed-panel .cursor-move { cursor: move !important; }\n.orquesta-embed-panel .cursor-se-resize { cursor: se-resize !important; }\n.orquesta-embed-panel .cursor-not-allowed { cursor: not-allowed !important; }\n\n/* Select */\n.orquesta-embed-panel .select-none { user-select: none !important; }\n\n/* Disabled states */\n.orquesta-embed-panel .disabled\\:opacity-50:disabled { opacity: 0.5 !important; }\n.orquesta-embed-panel .disabled\\:cursor-not-allowed:disabled { cursor: not-allowed !important; }\n.orquesta-embed-panel .disabled\\:bg-blue-800:disabled { background-color: #1e40af !important; }\n.orquesta-embed-panel .disabled\\:bg-gray-300:disabled { background-color: #d1d5db !important; }\n\n/* Transition */\n.orquesta-embed-panel .transition-colors { transition-property: color, background-color, border-color !important; transition-duration: 150ms !important; }\n.orquesta-embed-panel .transition-all { transition-property: all !important; transition-duration: 150ms !important; }\n\n/* ============================================ */\n/* Action buttons & Comments - Timeline styles */\n/* ============================================ */\n\n/* Purple colors for \"Show on page\" button */\n.orquesta-embed-panel .text-purple-300 { color: #d8b4fe !important; }\n.orquesta-embed-panel .text-purple-400 { color: #c084fc !important; }\n.orquesta-embed-panel .bg-purple-600 { background-color: #9333ea !important; }\n.orquesta-embed-panel .bg-purple-600\\/20 { background-color: rgba(147, 51, 234, 0.2) !important; }\n.orquesta-embed-panel .bg-purple-600\\/30 { background-color: rgba(147, 51, 234, 0.3) !important; }\n.orquesta-embed-panel .border-purple-500\\/40 { border-color: rgba(168, 85, 247, 0.4) !important; }\n.orquesta-embed-panel .border-purple-500\\/60 { border-color: rgba(168, 85, 247, 0.6) !important; }\n.orquesta-embed-panel .hover\\:bg-purple-600\\/30:hover { background-color: rgba(147, 51, 234, 0.3) !important; }\n.orquesta-embed-panel .hover\\:border-purple-500\\/60:hover { border-color: rgba(168, 85, 247, 0.6) !important; }\n\n/* Zinc with opacity for \"View output\" button */\n.orquesta-embed-panel .bg-zinc-700\\/50 { background-color: rgba(63, 63, 70, 0.5) !important; }\n.orquesta-embed-panel .border-zinc-600\\/50 { border-color: rgba(82, 82, 91, 0.5) !important; }\n.orquesta-embed-panel .border-zinc-600 { border-color: #52525b !important; }\n.orquesta-embed-panel .border-zinc-500 { border-color: #71717a !important; }\n.orquesta-embed-panel .hover\\:border-zinc-500:hover { border-color: #71717a !important; }\n\n/* Blue with opacity */\n.orquesta-embed-panel .bg-blue-500\\/20 { background-color: rgba(59, 130, 246, 0.2) !important; }\n.orquesta-embed-panel .border-blue-500\\/30 { border-color: rgba(59, 130, 246, 0.3) !important; }\n.orquesta-embed-panel .text-blue-300 { color: #93c5fd !important; }\n.orquesta-embed-panel .text-blue-300\\/70 { color: rgba(147, 197, 253, 0.7) !important; }\n\n/* Additional padding */\n.orquesta-embed-panel .py-1\\.5 { padding-top: 0.375rem !important; padding-bottom: 0.375rem !important; }\n.orquesta-embed-panel .py-0\\.5 { padding-top: 0.125rem !important; padding-bottom: 0.125rem !important; }\n.orquesta-embed-panel .px-1\\.5 { padding-left: 0.375rem !important; padding-right: 0.375rem !important; }\n.orquesta-embed-panel .px-2\\.5 { padding-left: 0.625rem !important; padding-right: 0.625rem !important; }\n.orquesta-embed-panel .pb-2 { padding-bottom: 0.5rem !important; }\n.orquesta-embed-panel .pb-3 { padding-bottom: 0.75rem !important; }\n.orquesta-embed-panel .pt-1 { padding-top: 0.25rem !important; }\n\n/* Space utilities */\n.orquesta-embed-panel .space-y-0\\.5 > * + * { margin-top: 0.125rem !important; }\n.orquesta-embed-panel .space-y-1 > * + * { margin-top: 0.25rem !important; }\n.orquesta-embed-panel .space-y-2 > * + * { margin-top: 0.5rem !important; }\n.orquesta-embed-panel .space-y-3 > * + * { margin-top: 0.75rem !important; }\n\n/* Focus states */\n.orquesta-embed-panel .focus\\:outline-none:focus { outline: none !important; }\n.orquesta-embed-panel .focus\\:ring-1:focus { box-shadow: 0 0 0 1px var(--orq-primary, #3b82f6) !important; }\n.orquesta-embed-panel .focus\\:ring-blue-500:focus { --tw-ring-color: #3b82f6 !important; }\n\n/* Placeholder colors */\n.orquesta-embed-panel .placeholder\\:text-zinc-500::placeholder { color: #71717a !important; }\n\n/* Text utilities */\n.orquesta-embed-panel .break-words { word-wrap: break-word !important; overflow-wrap: break-word !important; }\n.orquesta-embed-panel .italic { font-style: italic !important; }\n\n/* Negative margins */\n.orquesta-embed-panel .-mt-1 { margin-top: -0.25rem !important; }\n\n/* Max height */\n.orquesta-embed-panel .max-h-\\[400px\\] { max-height: 400px !important; }\n.orquesta-embed-panel .max-h-\\[150px\\] { max-height: 150px !important; }\n\n/* Font mono */\n.orquesta-embed-panel .font-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important; }\n\n/* Text sizes */\n.orquesta-embed-panel .text-\\[10px\\] { font-size: 10px !important; line-height: 1.4 !important; }\n.orquesta-embed-panel .text-\\[11px\\] { font-size: 11px !important; line-height: 1.4 !important; }\n\n/* Flex wrap */\n.orquesta-embed-panel .flex-wrap { flex-wrap: wrap !important; }\n\n/* Min width */\n.orquesta-embed-panel .min-w-0 { min-width: 0 !important; }\n\n/* ml-auto for comment button alignment */\n.orquesta-embed-panel .ml-auto { margin-left: auto !important; }\n\n/* Hidden utility */\n.orquesta-embed-panel .hidden { display: none !important; }\n\n/* SVG icon sizing */\n.orquesta-embed-panel svg { flex-shrink: 0; }\n\n/* Mobile responsive */\n@media (max-width: 480px) {\n  .orquesta-embed-panel {\n    position: fixed !important;\n    left: 8px !important;\n    right: 8px !important;\n    bottom: 8px !important;\n    top: auto !important;\n    width: auto !important;\n    max-height: 70vh !important;\n  }\n}\n";
+export declare const EMBED_CSS = "\n/* Orquesta Embed SDK Styles - Auto-injected */\n/* These styles are scoped to orquesta-* classes to avoid conflicts */\n\n/* Reset for Orquesta elements */\n[class^=\"orquesta-\"],\n[class*=\" orquesta-\"] {\n  box-sizing: border-box;\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\n/* Base colors */\n.orquesta-embed-panel {\n  --orq-bg: #18181b;\n  --orq-bg-secondary: #27272a;\n  --orq-border: #3f3f46;\n  --orq-text: #fafafa;\n  --orq-text-muted: #a1a1aa;\n  --orq-primary: #3b82f6;\n  --orq-success: #22c55e;\n  --orq-warning: #eab308;\n  --orq-error: #ef4444;\n}\n\n/* Scrollbar styling */\n.orquesta-embed-panel ::-webkit-scrollbar {\n  width: 6px;\n  height: 6px;\n}\n\n.orquesta-embed-panel ::-webkit-scrollbar-track {\n  background: transparent;\n}\n\n.orquesta-embed-panel ::-webkit-scrollbar-thumb {\n  background: #3f3f46;\n  border-radius: 3px;\n}\n\n.orquesta-embed-panel ::-webkit-scrollbar-thumb:hover {\n  background: #52525b;\n}\n\n/* Animations */\n@keyframes orquesta-spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n\n@keyframes orquesta-pulse {\n  0%, 100% {\n    opacity: 1;\n  }\n  50% {\n    opacity: 0.5;\n  }\n}\n\n.orquesta-embed-panel .animate-spin {\n  animation: orquesta-spin 1s linear infinite;\n}\n\n.orquesta-embed-panel .animate-pulse {\n  animation: orquesta-pulse 2s ease-in-out infinite;\n}\n\n/* Utility classes */\n.orquesta-embed-panel .line-clamp-1 {\n  display: -webkit-box;\n  -webkit-line-clamp: 1;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n}\n\n.orquesta-embed-panel .line-clamp-2 {\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n}\n\n/* Focus visible */\n.orquesta-embed-panel button:focus-visible,\n.orquesta-embed-panel input:focus-visible,\n.orquesta-embed-panel textarea:focus-visible {\n  outline: 2px solid var(--orq-primary);\n  outline-offset: 2px;\n}\n\n/* Element selector highlight animation */\n#orquesta-element-highlight {\n  animation: orquesta-highlight-pulse 1.5s ease-in-out infinite;\n}\n\n@keyframes orquesta-highlight-pulse {\n  0%, 100% {\n    box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.4);\n  }\n  50% {\n    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.2);\n  }\n}\n\n/* Tooltip */\n.orquesta-tooltip {\n  position: absolute;\n  z-index: 2147483647;\n  padding: 4px 8px;\n  background: #18181b;\n  border: 1px solid #3f3f46;\n  border-radius: 4px;\n  font-size: 12px;\n  color: #fafafa;\n  pointer-events: none;\n  white-space: nowrap;\n}\n\n/* Transitions */\n.orquesta-embed-panel * {\n  transition-property: color, background-color, border-color, opacity, transform;\n  transition-duration: 150ms;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n/* Panel entrance animation */\n.orquesta-embed-panel {\n  animation: orquesta-panel-enter 0.2s ease-out;\n}\n\n@keyframes orquesta-panel-enter {\n  from {\n    opacity: 0;\n    transform: scale(0.95) translateY(10px);\n  }\n  to {\n    opacity: 1;\n    transform: scale(1) translateY(0);\n  }\n}\n\n/* Trigger button */\n.orquesta-embed-trigger {\n  animation: orquesta-trigger-enter 0.3s ease-out;\n}\n\n@keyframes orquesta-trigger-enter {\n  from {\n    opacity: 0;\n    transform: scale(0.8);\n  }\n  to {\n    opacity: 1;\n    transform: scale(1);\n  }\n}\n\n/* Log stream */\n.orquesta-log-stream {\n  background: #0a0a0a;\n  border: 1px solid #27272a;\n  border-radius: 6px;\n  padding: 8px;\n}\n\n/* Timeline item hover */\n.orquesta-timeline button:hover {\n  transform: translateX(2px);\n}\n\n/* ============================================ */\n/* Tailwind class overrides - CRITICAL STYLES  */\n/* These ensure styles work even when purged    */\n/* ============================================ */\n\n/* Explicit background colors */\n.orquesta-embed-panel {\n  background-color: #18181b !important;\n  color: #fafafa !important;\n}\n\n.orquesta-embed-panel .bg-zinc-950 { background-color: #09090b !important; }\n.orquesta-embed-panel .bg-zinc-900 { background-color: #18181b !important; }\n.orquesta-embed-panel .bg-zinc-800 { background-color: #27272a !important; }\n.orquesta-embed-panel .bg-zinc-700 { background-color: #3f3f46 !important; }\n.orquesta-embed-panel .bg-zinc-600 { background-color: #52525b !important; }\n\n/* Text colors */\n.orquesta-embed-panel .text-white { color: #fafafa !important; }\n.orquesta-embed-panel .text-zinc-100 { color: #f4f4f5 !important; }\n.orquesta-embed-panel .text-zinc-200 { color: #e4e4e7 !important; }\n.orquesta-embed-panel .text-zinc-300 { color: #d4d4d8 !important; }\n.orquesta-embed-panel .text-zinc-400 { color: #a1a1aa !important; }\n.orquesta-embed-panel .text-zinc-500 { color: #71717a !important; }\n.orquesta-embed-panel .text-red-400 { color: #f87171 !important; }\n.orquesta-embed-panel .text-red-300 { color: #fca5a5 !important; }\n.orquesta-embed-panel .text-green-400 { color: #4ade80 !important; }\n.orquesta-embed-panel .text-green-500 { color: #22c55e !important; }\n.orquesta-embed-panel .text-blue-400 { color: #60a5fa !important; }\n.orquesta-embed-panel .text-blue-500 { color: #3b82f6 !important; }\n.orquesta-embed-panel .text-yellow-400 { color: #facc15 !important; }\n.orquesta-embed-panel .text-purple-400 { color: #c084fc !important; }\n.orquesta-embed-panel .text-orange-400 { color: #fb923c !important; }\n.orquesta-embed-panel .text-gray-800 { color: #1f2937 !important; }\n\n/* Border colors */\n.orquesta-embed-panel .border-zinc-700 { border-color: #3f3f46 !important; }\n.orquesta-embed-panel .border-zinc-800 { border-color: #27272a !important; }\n.orquesta-embed-panel .border-red-800 { border-color: #991b1b !important; }\n\n/* Background colors for buttons and UI */\n.orquesta-embed-panel .bg-blue-500 { background-color: #3b82f6 !important; }\n.orquesta-embed-panel .bg-blue-600 { background-color: #2563eb !important; }\n.orquesta-embed-panel .bg-green-400 { background-color: #4ade80 !important; }\n.orquesta-embed-panel .bg-green-500 { background-color: #22c55e !important; }\n.orquesta-embed-panel .bg-green-600 { background-color: #16a34a !important; }\n.orquesta-embed-panel .bg-red-500 { background-color: #ef4444 !important; }\n.orquesta-embed-panel .bg-red-600 { background-color: #dc2626 !important; }\n.orquesta-embed-panel .bg-purple-600 { background-color: #9333ea !important; }\n.orquesta-embed-panel .bg-red-900\\/30 { background-color: rgba(127, 29, 29, 0.3) !important; }\n.orquesta-embed-panel .bg-white { background-color: #ffffff !important; }\n\n/* Hover states */\n.orquesta-embed-panel .hover\\:bg-zinc-700:hover { background-color: #3f3f46 !important; }\n.orquesta-embed-panel .hover\\:bg-zinc-800:hover { background-color: #27272a !important; }\n.orquesta-embed-panel .hover\\:bg-blue-500:hover { background-color: #3b82f6 !important; }\n.orquesta-embed-panel .hover\\:bg-blue-700:hover { background-color: #1d4ed8 !important; }\n.orquesta-embed-panel .hover\\:bg-gray-100:hover { background-color: #f3f4f6 !important; }\n.orquesta-embed-panel .hover\\:text-white:hover { color: #fafafa !important; }\n.orquesta-embed-panel .hover\\:text-zinc-300:hover { color: #d4d4d8 !important; }\n\n/* Form inputs */\n.orquesta-embed-panel input,\n.orquesta-embed-panel textarea {\n  background-color: #27272a !important;\n  border-color: #3f3f46 !important;\n  color: #fafafa !important;\n}\n\n.orquesta-embed-panel input::placeholder,\n.orquesta-embed-panel textarea::placeholder {\n  color: #71717a !important;\n}\n\n/* Buttons base */\n.orquesta-embed-panel button {\n  background-color: transparent;\n}\n\n.orquesta-embed-panel button:hover {\n  background-color: #3f3f46;\n}\n\n/* Rounded borders */\n.orquesta-embed-panel .rounded { border-radius: 0.25rem !important; }\n.orquesta-embed-panel .rounded-md { border-radius: 0.375rem !important; }\n.orquesta-embed-panel .rounded-lg { border-radius: 0.5rem !important; }\n.orquesta-embed-panel .rounded-xl { border-radius: 0.75rem !important; }\n.orquesta-embed-panel .rounded-full { border-radius: 9999px !important; }\n\n/* Border widths */\n.orquesta-embed-panel .border { border-width: 1px !important; }\n.orquesta-embed-panel .border-b { border-bottom-width: 1px !important; }\n.orquesta-embed-panel .border-t { border-top-width: 1px !important; }\n\n/* Padding */\n.orquesta-embed-panel .p-1 { padding: 0.25rem !important; }\n.orquesta-embed-panel .p-2 { padding: 0.5rem !important; }\n.orquesta-embed-panel .p-3 { padding: 0.75rem !important; }\n.orquesta-embed-panel .p-4 { padding: 1rem !important; }\n.orquesta-embed-panel .px-2 { padding-left: 0.5rem !important; padding-right: 0.5rem !important; }\n.orquesta-embed-panel .px-3 { padding-left: 0.75rem !important; padding-right: 0.75rem !important; }\n.orquesta-embed-panel .px-4 { padding-left: 1rem !important; padding-right: 1rem !important; }\n.orquesta-embed-panel .py-1 { padding-top: 0.25rem !important; padding-bottom: 0.25rem !important; }\n.orquesta-embed-panel .py-2 { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; }\n.orquesta-embed-panel .py-3 { padding-top: 0.75rem !important; padding-bottom: 0.75rem !important; }\n\n/* Margin */\n.orquesta-embed-panel .m-1 { margin: 0.25rem !important; }\n.orquesta-embed-panel .m-2 { margin: 0.5rem !important; }\n.orquesta-embed-panel .mb-1 { margin-bottom: 0.25rem !important; }\n.orquesta-embed-panel .mb-2 { margin-bottom: 0.5rem !important; }\n.orquesta-embed-panel .mb-4 { margin-bottom: 1rem !important; }\n.orquesta-embed-panel .mt-1 { margin-top: 0.25rem !important; }\n.orquesta-embed-panel .mt-2 { margin-top: 0.5rem !important; }\n.orquesta-embed-panel .mt-3 { margin-top: 0.75rem !important; }\n.orquesta-embed-panel .mt-4 { margin-top: 1rem !important; }\n.orquesta-embed-panel .mr-1 { margin-right: 0.25rem !important; }\n.orquesta-embed-panel .mr-2 { margin-right: 0.5rem !important; }\n.orquesta-embed-panel .mx-1 { margin-left: 0.25rem !important; margin-right: 0.25rem !important; }\n\n/* Gap */\n.orquesta-embed-panel .gap-0\\.5 { gap: 0.125rem !important; }\n.orquesta-embed-panel .gap-1 { gap: 0.25rem !important; }\n.orquesta-embed-panel .gap-1\\.5 { gap: 0.375rem !important; }\n.orquesta-embed-panel .gap-2 { gap: 0.5rem !important; }\n.orquesta-embed-panel .gap-3 { gap: 0.75rem !important; }\n.orquesta-embed-panel .gap-4 { gap: 1rem !important; }\n\n/* Flex */\n.orquesta-embed-panel .flex { display: flex !important; }\n.orquesta-embed-panel .flex-col { flex-direction: column !important; }\n.orquesta-embed-panel .flex-1 { flex: 1 1 0% !important; }\n.orquesta-embed-panel .flex-shrink-0 { flex-shrink: 0 !important; }\n.orquesta-embed-panel .items-center { align-items: center !important; }\n.orquesta-embed-panel .items-start { align-items: flex-start !important; }\n.orquesta-embed-panel .justify-center { justify-content: center !important; }\n.orquesta-embed-panel .justify-between { justify-content: space-between !important; }\n\n/* Width/Height */\n.orquesta-embed-panel .w-full { width: 100% !important; }\n.orquesta-embed-panel .w-2 { width: 0.5rem !important; }\n.orquesta-embed-panel .w-3 { width: 0.75rem !important; }\n.orquesta-embed-panel .w-3\\.5 { width: 0.875rem !important; }\n.orquesta-embed-panel .w-4 { width: 1rem !important; }\n.orquesta-embed-panel .w-5 { width: 1.25rem !important; }\n.orquesta-embed-panel .w-6 { width: 1.5rem !important; }\n.orquesta-embed-panel .w-8 { width: 2rem !important; }\n.orquesta-embed-panel .w-16 { width: 4rem !important; }\n.orquesta-embed-panel .h-2 { height: 0.5rem !important; }\n.orquesta-embed-panel .h-3 { height: 0.75rem !important; }\n.orquesta-embed-panel .h-3\\.5 { height: 0.875rem !important; }\n.orquesta-embed-panel .h-4 { height: 1rem !important; }\n.orquesta-embed-panel .h-5 { height: 1.25rem !important; }\n.orquesta-embed-panel .h-6 { height: 1.5rem !important; }\n.orquesta-embed-panel .h-8 { height: 2rem !important; }\n.orquesta-embed-panel .h-16 { height: 4rem !important; }\n.orquesta-embed-panel .h-full { height: 100% !important; }\n.orquesta-embed-panel .max-w-20 { max-width: 5rem !important; }\n\n/* Font */\n.orquesta-embed-panel .text-xs { font-size: 0.75rem !important; line-height: 1rem !important; }\n.orquesta-embed-panel .text-sm { font-size: 0.875rem !important; line-height: 1.25rem !important; }\n.orquesta-embed-panel .text-lg { font-size: 1.125rem !important; line-height: 1.75rem !important; }\n.orquesta-embed-panel .text-xl { font-size: 1.25rem !important; line-height: 1.75rem !important; }\n.orquesta-embed-panel .text-2xl { font-size: 1.5rem !important; line-height: 2rem !important; }\n.orquesta-embed-panel .text-4xl { font-size: 2.25rem !important; line-height: 2.5rem !important; }\n.orquesta-embed-panel .font-medium { font-weight: 500 !important; }\n.orquesta-embed-panel .font-semibold { font-weight: 600 !important; }\n.orquesta-embed-panel .font-bold { font-weight: 700 !important; }\n.orquesta-embed-panel .text-center { text-align: center !important; }\n.orquesta-embed-panel .truncate { overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; }\n\n/* Opacity */\n.orquesta-embed-panel .opacity-25 { opacity: 0.25 !important; }\n.orquesta-embed-panel .opacity-50 { opacity: 0.5 !important; }\n.orquesta-embed-panel .opacity-75 { opacity: 0.75 !important; }\n\n/* Overflow */\n.orquesta-embed-panel .overflow-hidden { overflow: hidden !important; }\n.orquesta-embed-panel .overflow-y-auto { overflow-y: auto !important; }\n\n/* Shadow */\n.orquesta-embed-panel .shadow-xl { box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important; }\n.orquesta-embed-panel .shadow-2xl { box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important; }\n.orquesta-embed-panel .shadow-lg { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important; }\n\n/* Position */\n.orquesta-embed-panel .fixed { position: fixed !important; }\n.orquesta-embed-panel .absolute { position: absolute !important; }\n.orquesta-embed-panel .relative { position: relative !important; }\n.orquesta-embed-panel .top-1 { top: 0.25rem !important; }\n.orquesta-embed-panel .right-1 { right: 0.25rem !important; }\n.orquesta-embed-panel .bottom-0 { bottom: 0 !important; }\n.orquesta-embed-panel .right-0 { right: 0 !important; }\n\n/* Z-index */\n.orquesta-embed-panel .z-\\[2147483647\\] { z-index: 2147483647 !important; }\n\n/* Cursor */\n.orquesta-embed-panel .cursor-move { cursor: move !important; }\n.orquesta-embed-panel .cursor-se-resize { cursor: se-resize !important; }\n.orquesta-embed-panel .cursor-not-allowed { cursor: not-allowed !important; }\n\n/* Select */\n.orquesta-embed-panel .select-none { user-select: none !important; }\n\n/* Disabled states */\n.orquesta-embed-panel .disabled\\:opacity-50:disabled { opacity: 0.5 !important; }\n.orquesta-embed-panel .disabled\\:cursor-not-allowed:disabled { cursor: not-allowed !important; }\n.orquesta-embed-panel .disabled\\:bg-blue-800:disabled { background-color: #1e40af !important; }\n.orquesta-embed-panel .disabled\\:bg-gray-300:disabled { background-color: #d1d5db !important; }\n\n/* Transition */\n.orquesta-embed-panel .transition-colors { transition-property: color, background-color, border-color !important; transition-duration: 150ms !important; }\n.orquesta-embed-panel .transition-all { transition-property: all !important; transition-duration: 150ms !important; }\n\n/* ============================================ */\n/* Action buttons & Comments - Timeline styles */\n/* ============================================ */\n\n/* Purple colors for \"Show on page\" button */\n.orquesta-embed-panel .text-purple-300 { color: #d8b4fe !important; }\n.orquesta-embed-panel .text-purple-400 { color: #c084fc !important; }\n.orquesta-embed-panel .bg-purple-600 { background-color: #9333ea !important; }\n.orquesta-embed-panel .bg-purple-600\\/20 { background-color: rgba(147, 51, 234, 0.2) !important; }\n.orquesta-embed-panel .bg-purple-600\\/30 { background-color: rgba(147, 51, 234, 0.3) !important; }\n.orquesta-embed-panel .border-purple-500\\/40 { border-color: rgba(168, 85, 247, 0.4) !important; }\n.orquesta-embed-panel .border-purple-500\\/60 { border-color: rgba(168, 85, 247, 0.6) !important; }\n.orquesta-embed-panel .hover\\:bg-purple-600\\/30:hover { background-color: rgba(147, 51, 234, 0.3) !important; }\n.orquesta-embed-panel .hover\\:border-purple-500\\/60:hover { border-color: rgba(168, 85, 247, 0.6) !important; }\n\n/* Zinc with opacity for \"View output\" button */\n.orquesta-embed-panel .bg-zinc-700\\/50 { background-color: rgba(63, 63, 70, 0.5) !important; }\n.orquesta-embed-panel .border-zinc-600\\/50 { border-color: rgba(82, 82, 91, 0.5) !important; }\n.orquesta-embed-panel .border-zinc-600 { border-color: #52525b !important; }\n.orquesta-embed-panel .border-zinc-500 { border-color: #71717a !important; }\n.orquesta-embed-panel .hover\\:border-zinc-500:hover { border-color: #71717a !important; }\n\n/* Blue with opacity */\n.orquesta-embed-panel .bg-blue-500\\/20 { background-color: rgba(59, 130, 246, 0.2) !important; }\n.orquesta-embed-panel .border-blue-500\\/30 { border-color: rgba(59, 130, 246, 0.3) !important; }\n.orquesta-embed-panel .text-blue-300 { color: #93c5fd !important; }\n.orquesta-embed-panel .text-blue-300\\/70 { color: rgba(147, 197, 253, 0.7) !important; }\n\n/* Additional padding */\n.orquesta-embed-panel .py-1\\.5 { padding-top: 0.375rem !important; padding-bottom: 0.375rem !important; }\n.orquesta-embed-panel .py-0\\.5 { padding-top: 0.125rem !important; padding-bottom: 0.125rem !important; }\n.orquesta-embed-panel .px-1\\.5 { padding-left: 0.375rem !important; padding-right: 0.375rem !important; }\n.orquesta-embed-panel .px-2\\.5 { padding-left: 0.625rem !important; padding-right: 0.625rem !important; }\n.orquesta-embed-panel .pb-2 { padding-bottom: 0.5rem !important; }\n.orquesta-embed-panel .pb-3 { padding-bottom: 0.75rem !important; }\n.orquesta-embed-panel .pt-1 { padding-top: 0.25rem !important; }\n\n/* Space utilities */\n.orquesta-embed-panel .space-y-0\\.5 > * + * { margin-top: 0.125rem !important; }\n.orquesta-embed-panel .space-y-1 > * + * { margin-top: 0.25rem !important; }\n.orquesta-embed-panel .space-y-2 > * + * { margin-top: 0.5rem !important; }\n.orquesta-embed-panel .space-y-3 > * + * { margin-top: 0.75rem !important; }\n\n/* Focus states */\n.orquesta-embed-panel .focus\\:outline-none:focus { outline: none !important; }\n.orquesta-embed-panel .focus\\:ring-1:focus { box-shadow: 0 0 0 1px var(--orq-primary, #3b82f6) !important; }\n.orquesta-embed-panel .focus\\:ring-blue-500:focus { --tw-ring-color: #3b82f6 !important; }\n\n/* Placeholder colors */\n.orquesta-embed-panel .placeholder\\:text-zinc-500::placeholder { color: #71717a !important; }\n\n/* Text utilities */\n.orquesta-embed-panel .break-words { word-wrap: break-word !important; overflow-wrap: break-word !important; }\n.orquesta-embed-panel .italic { font-style: italic !important; }\n\n/* Negative margins */\n.orquesta-embed-panel .-mt-1 { margin-top: -0.25rem !important; }\n\n/* Max height */\n.orquesta-embed-panel .max-h-\\[400px\\] { max-height: 400px !important; }\n.orquesta-embed-panel .max-h-\\[150px\\] { max-height: 150px !important; }\n\n/* Font mono */\n.orquesta-embed-panel .font-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important; }\n\n/* Text sizes */\n.orquesta-embed-panel .text-\\[10px\\] { font-size: 10px !important; line-height: 1.4 !important; }\n.orquesta-embed-panel .text-\\[11px\\] { font-size: 11px !important; line-height: 1.4 !important; }\n\n/* Flex wrap */\n.orquesta-embed-panel .flex-wrap { flex-wrap: wrap !important; }\n\n/* Min width */\n.orquesta-embed-panel .min-w-0 { min-width: 0 !important; }\n\n/* ml-auto for comment button alignment */\n.orquesta-embed-panel .ml-auto { margin-left: auto !important; }\n\n/* Hidden utility */\n.orquesta-embed-panel .hidden { display: none !important; }\n\n/* SVG icon sizing */\n.orquesta-embed-panel svg { flex-shrink: 0; }\n\n/* Mobile responsive */\n@media (max-width: 480px) {\n  .orquesta-embed-panel {\n    position: fixed !important;\n    left: 8px !important;\n    right: 8px !important;\n    bottom: 8px !important;\n    top: auto !important;\n    width: auto !important;\n    max-height: 70vh !important;\n  }\n}\n\n/* Builder Mode */\n.orquesta-builder{display:flex;flex-direction:column;width:100%;height:100vh;background:#0a0a0a;color:#fafafa;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;overflow:hidden}\n.orquesta-builder-header{display:flex;align-items:center;justify-content:space-between;height:48px;padding:0 16px;background:#18181b;border-bottom:1px solid #27272a;flex-shrink:0}\n.orquesta-builder-header-left{display:flex;align-items:center;gap:12px}\n.orquesta-builder-header-right{display:flex;align-items:center;gap:8px}\n.orquesta-builder-logo{font-weight:700;font-size:14px;color:#fafafa;letter-spacing:-0.02em}\n.orquesta-builder-project{font-size:13px;color:#a1a1aa}\n.orquesta-builder-status{display:flex;align-items:center;gap:6px;font-size:12px;color:#a1a1aa}\n.orquesta-builder-status-dot{width:8px;height:8px;border-radius:50%}\n.orquesta-builder-main{display:flex;flex:1;min-height:0}\n.orquesta-builder-chat{display:flex;flex-direction:column;width:380px;min-width:300px;max-width:50%;border-right:1px solid #27272a;background:#18181b}\n.orquesta-builder-chat-messages{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:12px}\n.orquesta-builder-chat-input{padding:12px 16px;border-top:1px solid #27272a;background:#18181b}\n.orquesta-builder-chat-input textarea{width:100%;min-height:60px;max-height:200px;padding:10px 12px;background:#27272a;border:1px solid #3f3f46;border-radius:8px;color:#fafafa;font-size:13px;resize:vertical;outline:none;font-family:inherit}\n.orquesta-builder-chat-input textarea:focus{border-color:#3b82f6}\n.orquesta-builder-chat-input-actions{display:flex;justify-content:space-between;align-items:center;margin-top:8px}\n.orquesta-builder-preview{flex:1;display:flex;flex-direction:column;min-width:0}\n.orquesta-builder-preview-bar{display:flex;align-items:center;height:36px;padding:0 12px;background:#18181b;border-bottom:1px solid #27272a;gap:8px;flex-shrink:0}\n.orquesta-builder-preview-url{flex:1;padding:4px 10px;background:#27272a;border:1px solid #3f3f46;border-radius:6px;color:#a1a1aa;font-size:12px;font-family:'SF Mono','Fira Code',monospace;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n.orquesta-builder-preview-iframe{flex:1;width:100%;border:none;background:#fff}\n.orquesta-builder-terminal{height:200px;min-height:100px;max-height:50vh;border-top:1px solid #27272a;background:#0a0a0a;display:flex;flex-direction:column;flex-shrink:0}\n.orquesta-builder-terminal-header{display:flex;align-items:center;justify-content:space-between;height:32px;padding:0 12px;background:#18181b;border-bottom:1px solid #27272a;flex-shrink:0}\n.orquesta-builder-terminal-title{font-size:12px;font-weight:600;color:#a1a1aa;text-transform:uppercase;letter-spacing:0.05em}\n.orquesta-builder-terminal-output{flex:1;overflow-y:auto;padding:8px 12px;font-family:'SF Mono','Fira Code','Cascadia Code',monospace;font-size:12px;line-height:1.5}\n.orquesta-builder-terminal.collapsed{height:32px;min-height:32px}\n.orquesta-builder-terminal.collapsed .orquesta-builder-terminal-output{display:none}\n.orquesta-builder-msg{max-width:90%;padding:10px 14px;border-radius:12px;font-size:13px;line-height:1.5;word-break:break-word}\n.orquesta-builder-msg-user{align-self:flex-end;background:#3b82f6;color:#fff;border-bottom-right-radius:4px}\n.orquesta-builder-msg-system{align-self:flex-start;background:#27272a;color:#fafafa;border-bottom-left-radius:4px}\n.orquesta-builder-msg-status{align-self:center;background:transparent;color:#71717a;font-size:12px;padding:4px 0}\n.orquesta-builder-resizer-h{width:4px;cursor:col-resize;background:transparent;flex-shrink:0}\n.orquesta-builder-resizer-h:hover{background:#3b82f6}\n.orquesta-builder-resizer-v{height:4px;cursor:row-resize;background:transparent;flex-shrink:0}\n.orquesta-builder-resizer-v:hover{background:#3b82f6}\n.orquesta-builder button{background:transparent;border:none;color:#a1a1aa;cursor:pointer;padding:4px 8px;border-radius:4px;font-size:12px}\n.orquesta-builder button:hover{background:#27272a;color:#fafafa}\n.orquesta-builder-btn-primary{background:#3b82f6!important;color:#fff!important;font-weight:500;padding:6px 16px!important;border-radius:6px!important}\n.orquesta-builder-btn-primary:hover{background:#2563eb!important}\n.orquesta-builder-btn-primary:disabled{opacity:0.5;cursor:not-allowed}\n@media(max-width:768px){.orquesta-builder-main{flex-direction:column}.orquesta-builder-chat{width:100%;max-width:100%;height:50%;border-right:none;border-bottom:1px solid #27272a}.orquesta-builder-resizer-h{display:none}}\n";
 export declare function injectStyles(): void;

package/dist/vanilla/OrquestaWidget.d.ts

@@ -10,6 +10,13 @@ export declare class OrquestaWidget {
     private showStatusBar;
     private statusBarMinimized;
     private lastCompletedPrompt;
+    private builderRoot;
+    private builderMsgContainer;
+    private builderTerminalOutput;
+    private builderPreviewFrame;
+    private builderTerminalCollapsed;
+    private builderMessages;
+    private builderLastOutputCount;
     private contextMenuState;
     private globalRightClickCleanup;
     constructor(config: OrquestaEmbedConfig);
@@ -44,6 +51,12 @@ export declare class OrquestaWidget {
         includeConsole?: boolean;
         includeNetwork?: boolean;
     }): Promise<string>;
+    private renderBuilder;
+    private createBuilderDOM;
+    private updateBuilderMessages;
+    private updateBuilderTerminal;
+    private getTerminalColor;
+    private escapeHtml;
     destroy(): void;
     showStatus(): void;
     hideStatus(): void;

package/dist/vanilla.d.ts

@@ -5,7 +5,7 @@ export { OrquestaEmbedClient } from './core/client';
 export { ConsoleCapture } from './core/console-capture';
 export { NetworkCapture } from './core/network-capture';
 export { ElementSelector } from './core/element-selector';
-export type { OrquestaEmbedConfig, Position, Theme, Feature, ElementContext, ConsoleEntry, NetworkEntry } from './core/config';
+export type { OrquestaEmbedConfig, Position, Theme, Feature, EmbedMode, ElementContext, ConsoleEntry, NetworkEntry } from './core/config';
 interface OrquestaGlobal {
     init: (config: OrquestaEmbedConfig) => OrquestaWidget;
     OrquestaWidget: typeof OrquestaWidget;