@leadbot/components 2.21.0

package/dist/styles.css

@@ -0,0 +1,2723 @@
+@charset "UTF-8";
+@layer leadbot {
+  :root {
+    /* Typography */
+    --leadbot-font-size: 14px;
+    --leadbot-font-size-sm: 13px;
+    --leadbot-font-size-xs: 12px;
+    --leadbot-font-size-lg: 18px;
+    /* Shadows */
+    --leadbot-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.08);
+    --leadbot-shadow-md: 0 2px 4px rgba(0, 0, 0, 0.1), 0 4px 12px rgba(0, 0, 0, 0.1);
+    /* Border & gradient */
+    --leadbot-border-light: 1px solid rgba(0, 0, 0, 0.12);
+    --leadbot-gradient-card: linear-gradient(135deg, #ffffff 0%, #f9fafb 100%);
+    /* Spacing */
+    --leadbot-spacing-card: 16px;
+    /* Conversation width — cards, option buttons and forms. The widget panel is
+       built around 320px; an embedded flow (@leadbot/components) can widen or
+       narrow the whole conversation by overriding this one token. */
+    --leadbot-flow-max-width: 320px;
+    /* Border radius */
+    --leadbot-radius-sm: 6px;
+    --leadbot-radius-md: 8px;
+    --leadbot-radius-card: 12px;
+    --leadbot-radius-pill: 20px;
+    /* Surfaces */
+    --leadbot-color-surface: #ffffff;
+    --leadbot-color-surface-alt: #f9fafb;
+    --leadbot-color-surface-sunken: #f3f4f6;
+    --leadbot-color-surface-tray: #f8f9fa;
+    --leadbot-color-surface-tray-alt: #f0f0f0;
+    /* Borders */
+    --leadbot-color-border: #e5e7eb;
+    --leadbot-color-border-input: #ddd;
+    --leadbot-color-border-field: #e0e3e8;
+    --leadbot-color-border-checkbox: #d1d5db;
+    /* Text */
+    --leadbot-color-text: #1f2937;
+    --leadbot-color-text-strong: #374151;
+    --leadbot-color-text-body: #4b5563;
+    --leadbot-color-text-muted: #6b7280;
+    --leadbot-color-text-subtle: #9ca3af;
+    --leadbot-color-on-primary: #ffffff;
+    --leadbot-color-logo: #111827;
+    --leadbot-color-disabled: #ccc;
+    /* Feedback */
+    --leadbot-color-success: #059669;
+    --leadbot-color-success-text: #065f46;
+    --leadbot-color-online: #34d399;
+    --leadbot-color-error: #ef4444;
+    --leadbot-color-error-bg: #fee;
+    --leadbot-color-error-fg: #c33;
+    --leadbot-color-error-border: #fcc;
+    /* Focus rings — the sole focus indicator on text controls, which the global
+       a11y outline skips. Keep them clearly visible for keyboard users. */
+    --leadbot-focus-ring: 0 0 0 3px color-mix(in srgb, var(--leadbot-primary) 15%, transparent);
+    --leadbot-focus-ring-soft: 0 0 0 3px color-mix(in srgb, var(--leadbot-primary) 12%, transparent);
+    /* WhatsApp: widget chrome */
+    --leadbot-whatsapp-green: #42d66b;
+    --leadbot-whatsapp-green-hover: #35c95d;
+    --leadbot-whatsapp-on-green: #111b21;
+    --leadbot-whatsapp-wallpaper: #e5ddd5;
+    --leadbot-whatsapp-wallpaper-end: #d9d0c4;
+    --leadbot-whatsapp-bubble: #ffffff;
+    --leadbot-whatsapp-bubble-text: #303030;
+    --leadbot-whatsapp-tick: #4fc3f7;
+    /* WhatsApp: official brand colours, used where the UI mimics WhatsApp itself */
+    --leadbot-whatsapp-brand: #25d366;
+    --leadbot-whatsapp-brand-hover: #1fb959;
+    --leadbot-whatsapp-brand-dark: #128c7e;
+    /* Animation: durations */
+    --leadbot-duration-fast: 150ms;
+    --leadbot-duration-normal: 300ms;
+    --leadbot-duration-slow: 500ms;
+    /* Animation: easing curves */
+    --leadbot-ease-appear: cubic-bezier(0.16, 1, 0.3, 1);
+    --leadbot-ease-interactive: cubic-bezier(0.4, 0, 0.2, 1);
+    --leadbot-ease-loop: cubic-bezier(0.4, 0, 0.6, 1);
+    --leadbot-ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
+    --leadbot-primary: #2563eb;
+    --leadbot-available-height: 600px;
+    --leadbot-form-max-width: 360px;
+    --leadbot-form-max-height: var(--leadbot-available-height);
+    --leadbot-form-inline-padding: var(--leadbot-spacing-card);
+  }
+  [data-leadbot-theme=dark] {
+    /* Shadows — deeper, since the light ones vanish on dark backgrounds */
+    --leadbot-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.4);
+    --leadbot-shadow-md: 0 2px 4px rgba(0, 0, 0, 0.5), 0 4px 12px rgba(0, 0, 0, 0.5);
+    /* Border & gradient */
+    --leadbot-border-light: 1px solid rgba(255, 255, 255, 0.12);
+    --leadbot-gradient-card: linear-gradient(135deg, #1f2937 0%, #111827 100%);
+    /* Surfaces */
+    --leadbot-color-surface: #1f2937;
+    --leadbot-color-surface-alt: #111827;
+    --leadbot-color-surface-sunken: #111827;
+    --leadbot-color-surface-tray: #1a2332;
+    --leadbot-color-surface-tray-alt: #111827;
+    /* Borders */
+    --leadbot-color-border: #374151;
+    --leadbot-color-border-input: #4b5563;
+    --leadbot-color-border-field: #374151;
+    --leadbot-color-border-checkbox: #4b5563;
+    /* Text */
+    --leadbot-color-text: #f9fafb;
+    --leadbot-color-text-strong: #e5e7eb;
+    --leadbot-color-text-body: #d1d5db;
+    --leadbot-color-text-muted: #9ca3af;
+    --leadbot-color-text-subtle: #6b7280;
+    --leadbot-color-logo: #f9fafb;
+    --leadbot-color-disabled: #4b5563;
+    /* Feedback */
+    --leadbot-color-success: #34d399;
+    --leadbot-color-success-text: #a7f3d0;
+    --leadbot-color-error: #f87171;
+    --leadbot-color-error-bg: #3b1d1d;
+    --leadbot-color-error-fg: #fca5a5;
+    --leadbot-color-error-border: #7f1d1d;
+    /* WhatsApp: chat backdrop and bubbles, matching WhatsApp's own dark UI */
+    --leadbot-whatsapp-wallpaper: #0b141a;
+    --leadbot-whatsapp-wallpaper-end: #0b141a;
+    --leadbot-whatsapp-bubble: #202c33;
+    --leadbot-whatsapp-bubble-text: #e9edef;
+  }
+  @media (prefers-color-scheme: dark) {
+    [data-leadbot-theme=auto] {
+      /* Shadows — deeper, since the light ones vanish on dark backgrounds */
+      --leadbot-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.4);
+      --leadbot-shadow-md: 0 2px 4px rgba(0, 0, 0, 0.5), 0 4px 12px rgba(0, 0, 0, 0.5);
+      /* Border & gradient */
+      --leadbot-border-light: 1px solid rgba(255, 255, 255, 0.12);
+      --leadbot-gradient-card: linear-gradient(135deg, #1f2937 0%, #111827 100%);
+      /* Surfaces */
+      --leadbot-color-surface: #1f2937;
+      --leadbot-color-surface-alt: #111827;
+      --leadbot-color-surface-sunken: #111827;
+      --leadbot-color-surface-tray: #1a2332;
+      --leadbot-color-surface-tray-alt: #111827;
+      /* Borders */
+      --leadbot-color-border: #374151;
+      --leadbot-color-border-input: #4b5563;
+      --leadbot-color-border-field: #374151;
+      --leadbot-color-border-checkbox: #4b5563;
+      /* Text */
+      --leadbot-color-text: #f9fafb;
+      --leadbot-color-text-strong: #e5e7eb;
+      --leadbot-color-text-body: #d1d5db;
+      --leadbot-color-text-muted: #9ca3af;
+      --leadbot-color-text-subtle: #6b7280;
+      --leadbot-color-logo: #f9fafb;
+      --leadbot-color-disabled: #4b5563;
+      /* Feedback */
+      --leadbot-color-success: #34d399;
+      --leadbot-color-success-text: #a7f3d0;
+      --leadbot-color-error: #f87171;
+      --leadbot-color-error-bg: #3b1d1d;
+      --leadbot-color-error-fg: #fca5a5;
+      --leadbot-color-error-border: #7f1d1d;
+      /* WhatsApp: chat backdrop and bubbles, matching WhatsApp's own dark UI */
+      --leadbot-whatsapp-wallpaper: #0b141a;
+      --leadbot-whatsapp-wallpaper-end: #0b141a;
+      --leadbot-whatsapp-bubble: #202c33;
+      --leadbot-whatsapp-bubble-text: #e9edef;
+    }
+  }
+  @keyframes spin {
+    from {
+      transform: translateY(-50%) rotate(0deg);
+    }
+    to {
+      transform: translateY(-50%) rotate(360deg);
+    }
+  }
+  @keyframes slideInError {
+    from {
+      opacity: 0;
+      transform: translateY(-5px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+  @keyframes leadbot-typing-bounce {
+    0%, 80%, 100% {
+      transform: scale(0.8);
+      opacity: 0.5;
+    }
+    40% {
+      transform: scale(1);
+      opacity: 1;
+    }
+  }
+  @keyframes leadbot-chatbot-open {
+    0% {
+      opacity: 0;
+      transform: translateY(12px) scale(0.96);
+    }
+    100% {
+      opacity: 1;
+      transform: translateY(0) scale(1);
+    }
+  }
+  .leadbot-components {
+    box-sizing: border-box;
+    color: var(--leadbot-color-text);
+    font-family: var(--leadbot-font-family, inherit);
+    font-size: var(--leadbot-font-size);
+    line-height: 1.5;
+  }
+  .leadbot-components *,
+  .leadbot-components *::before,
+  .leadbot-components *::after {
+    box-sizing: border-box;
+  }
+  .leadbot-components {
+    /* ==========================================================================
+       Form Fields
+       File: src/steps/base_form_step.js
+       Classes: leadbot-field, leadbot-field-checkbox, leadbot-submit-btn
+       ========================================================================== */
+  }
+  .leadbot-components .leadbot-field {
+    margin-bottom: 16px;
+  }
+  .leadbot-components fieldset {
+    border: none;
+    margin: 0;
+    padding: 0;
+  }
+  .leadbot-components .leadbot-form-shell {
+    display: flex;
+    flex: 1 1 auto;
+    flex-direction: column;
+    max-height: inherit;
+    min-height: 0;
+    overflow: hidden;
+    width: 100%;
+  }
+  .leadbot-components .leadbot-form-scroll {
+    --leadbot-form-scrollbar-width: 8px;
+    flex: 1 1 auto;
+    min-height: 0;
+    overflow-x: hidden;
+    overflow-y: auto;
+    padding: var(--leadbot-spacing-card) max(0px, var(--leadbot-spacing-card) - var(--leadbot-form-scrollbar-width)) 0 var(--leadbot-spacing-card);
+    scrollbar-color: rgba(107, 114, 128, 0.45) transparent;
+    scrollbar-width: thin;
+    -webkit-overflow-scrolling: touch;
+  }
+  .leadbot-components .leadbot-form-scroll::-webkit-scrollbar {
+    width: var(--leadbot-form-scrollbar-width);
+  }
+  .leadbot-components .leadbot-form-scroll::-webkit-scrollbar-track {
+    background: transparent;
+  }
+  .leadbot-components .leadbot-form-scroll::-webkit-scrollbar-thumb {
+    background: rgba(107, 114, 128, 0.4);
+    border-radius: 999px;
+  }
+  .leadbot-components .leadbot-form-fields {
+    min-width: 0;
+  }
+  .leadbot-components .leadbot-form-actions {
+    background: var(--leadbot-color-surface);
+    border-top: 1px solid rgba(0, 0, 0, 0.08);
+    flex: 0 0 auto;
+    padding: 8px var(--leadbot-spacing-card);
+  }
+  .leadbot-components .leadbot-form-complete {
+    padding: var(--leadbot-spacing-card);
+  }
+  .leadbot-components .leadbot-field label {
+    display: block;
+    margin-bottom: 6px;
+    font-weight: 500;
+  }
+  .leadbot-components .leadbot-form label {
+    font-size: 0.8em;
+  }
+  .leadbot-components .leadbot-required-asterisk {
+    color: var(--leadbot-color-error);
+    margin-left: 2px;
+  }
+  .leadbot-components .leadbot-field input,
+  .leadbot-components .leadbot-field textarea,
+  .leadbot-components .leadbot-field select {
+    width: 100%;
+    padding: 12px;
+    border: 1px solid var(--leadbot-color-border-input);
+    border-radius: var(--leadbot-radius-sm);
+    background-color: var(--leadbot-color-surface);
+    color: inherit;
+    font-size: var(--leadbot-font-size);
+    font-family: inherit;
+    box-sizing: border-box;
+  }
+  .leadbot-components .leadbot-field textarea {
+    resize: vertical;
+  }
+  .leadbot-components {
+    /* Sole focus indicator for these fields (the global a11y outline skips text
+       controls), so the ring must stay clearly visible for keyboard users. */
+  }
+  .leadbot-components .leadbot-field input:focus,
+  .leadbot-components .leadbot-field textarea:focus,
+  .leadbot-components .leadbot-field select:focus {
+    outline: none;
+    border-color: var(--leadbot-primary);
+    box-shadow: var(--leadbot-focus-ring);
+  }
+  .leadbot-components {
+    /* Keyed off aria-invalid so the visual state and the screen-reader state can
+       never drift apart — baseFormStep sets the attribute, this styles it. */
+  }
+  .leadbot-components .leadbot-field input[aria-invalid=true],
+  .leadbot-components .leadbot-field textarea[aria-invalid=true],
+  .leadbot-components .leadbot-field select[aria-invalid=true] {
+    border-color: var(--leadbot-color-error);
+    box-shadow: 0 0 0 1px var(--leadbot-color-error);
+  }
+  .leadbot-components {
+    /* Per-field message, from client pre-flight validation or the collector's 400. */
+  }
+  .leadbot-components .leadbot-field-error {
+    margin: 6px 0 0;
+    color: var(--leadbot-color-error-fg);
+    font-size: var(--leadbot-font-size-sm);
+    line-height: 1.4;
+  }
+  .leadbot-components {
+    /* Checkbox */
+  }
+  .leadbot-components .leadbot-field-checkbox {
+    margin-bottom: 16px;
+  }
+  .leadbot-components .leadbot-field-checkbox label {
+    display: flex;
+    align-items: flex-start;
+    gap: 10px;
+    cursor: pointer;
+    margin: 0;
+    font-weight: 400;
+    line-height: 1.5;
+    user-select: none;
+  }
+  .leadbot-components .leadbot-field-checkbox input[type=checkbox] {
+    appearance: none;
+    -webkit-appearance: none;
+    width: 20px;
+    height: 20px;
+    min-width: 20px;
+    border: 2px solid var(--leadbot-color-border-checkbox);
+    border-radius: var(--leadbot-radius-sm);
+    cursor: pointer;
+    margin: 2px 0 0 0;
+    padding: 0;
+    flex-shrink: 0;
+    pointer-events: auto !important;
+    position: relative;
+    z-index: 10;
+    background: var(--leadbot-color-surface);
+    transition: all var(--leadbot-duration-fast) var(--leadbot-ease-interactive);
+  }
+  .leadbot-components .leadbot-field-checkbox input[type=checkbox]:hover {
+    border-color: var(--leadbot-primary);
+  }
+  .leadbot-components .leadbot-field-checkbox input[type=checkbox]:checked {
+    background: var(--leadbot-primary);
+    border-color: var(--leadbot-primary);
+  }
+  .leadbot-components .leadbot-field-checkbox input[type=checkbox]:checked::after {
+    content: "";
+    position: absolute;
+    left: 5px;
+    top: 2px;
+    width: 5px;
+    height: 9px;
+    border: solid var(--leadbot-color-on-primary);
+    border-width: 0 2px 2px 0;
+    transform: rotate(45deg);
+  }
+  .leadbot-components .leadbot-field-checkbox input[type=checkbox]:focus {
+    outline: none;
+    box-shadow: var(--leadbot-focus-ring);
+  }
+  .leadbot-components {
+    /* Checklist and radiolist */
+  }
+  .leadbot-components .leadbot-field-list .leadbot-field-list-label {
+    display: block;
+    margin: 0 0 6px;
+    padding: 0;
+    font-weight: 500;
+    font-size: 0.8em;
+  }
+  .leadbot-components .leadbot-field-list legend.leadbot-field-list-label {
+    width: 100%;
+  }
+  .leadbot-components .leadbot-field-options {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+  }
+  .leadbot-components .leadbot-field .leadbot-field-option {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    margin: 0;
+    font-weight: 400;
+    cursor: pointer;
+  }
+  .leadbot-components .leadbot-field .leadbot-field-option span {
+    display: inline-block;
+  }
+  .leadbot-components .leadbot-field-list input[type=checkbox],
+  .leadbot-components .leadbot-field-list input[type=radio] {
+    width: auto;
+    margin: 0;
+    padding: 0;
+    flex-shrink: 0;
+  }
+  .leadbot-components {
+    /* Submit Button */
+  }
+  .leadbot-components .leadbot-submit-btn {
+    background: var(--leadbot-primary);
+    color: var(--leadbot-color-on-primary);
+    border: none;
+    padding: 12px 24px;
+    border-radius: var(--leadbot-radius-md);
+    cursor: pointer;
+    font-size: var(--leadbot-font-size);
+    width: 100%;
+    transition: all var(--leadbot-duration-fast) var(--leadbot-ease-interactive);
+  }
+  .leadbot-components .leadbot-submit-btn:hover {
+    background-color: color-mix(in srgb, var(--leadbot-primary) 80%, black);
+    transform: translateY(-1px);
+  }
+  .leadbot-components .leadbot-submit-btn:active {
+    transform: scale(0.98);
+  }
+  .leadbot-components .leadbot-submit-btn:disabled {
+    cursor: not-allowed;
+    opacity: 0.7;
+  }
+  .leadbot-components .leadbot-submit-btn.leadbot-loading {
+    position: relative;
+  }
+  .leadbot-components .leadbot-submit-btn.leadbot-loading::after {
+    content: "";
+    position: absolute;
+    right: 12px;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 12px;
+    height: 12px;
+    border: 2px solid transparent;
+    border-top: 2px solid currentColor;
+    border-radius: 50%;
+    animation: spin 1s linear infinite;
+  }
+  .leadbot-components {
+    /* Form Messages */
+  }
+  .leadbot-components .leadbot-form-error {
+    background: var(--leadbot-color-error-bg);
+    color: var(--leadbot-color-error-fg);
+    padding: 8px 12px;
+    border-radius: var(--leadbot-radius-sm);
+    font-size: var(--leadbot-font-size-sm);
+    margin-bottom: 12px;
+    border: 1px solid var(--leadbot-color-error-border);
+    animation: slideInError var(--leadbot-duration-normal) var(--leadbot-ease-appear) backwards;
+  }
+  .leadbot-components .leadbot-form-title {
+    font-size: var(--leadbot-font-size-lg);
+    font-weight: 700;
+    margin-bottom: 16px;
+  }
+  .leadbot-components .leadbot-success-message {
+    color: var(--leadbot-color-success);
+    font-size: var(--leadbot-font-size);
+    font-weight: 500;
+    line-height: 1.5;
+    padding: 6px 16px;
+    margin: 0;
+    text-align: center;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    width: 100%;
+    box-sizing: border-box;
+  }
+  .leadbot-components .leadbot-success-message p {
+    margin: 0;
+  }
+  .leadbot-components .leadbot-success-message::before {
+    content: "✓";
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 20px;
+    height: 20px;
+    background: var(--leadbot-color-success);
+    color: var(--leadbot-color-on-primary);
+    border-radius: 50%;
+    font-size: var(--leadbot-font-size-xs);
+    font-weight: bold;
+    flex-shrink: 0;
+  }
+  .leadbot-components {
+    /* ==========================================================================
+       Chatbot Interface
+       File: src/steps/chatbotStep.tsx
+       Clean, minimal chat UI inspired by DigitalOcean's Docs Agent.
+       ========================================================================== */
+  }
+  .leadbot-components .leadbot-chatbot-interface {
+    background: var(--leadbot-color-surface);
+    border-radius: var(--leadbot-radius-card);
+    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.04);
+    max-width: 360px;
+    max-height: max(0px, var(--leadbot-available-height));
+    min-width: 360px;
+    min-height: 0;
+    overflow: hidden;
+    margin-bottom: 8px;
+    display: flex;
+    flex-direction: column;
+    animation: leadbot-chatbot-open var(--leadbot-duration-normal) var(--leadbot-ease-appear) backwards;
+  }
+  .leadbot-components {
+    /* ---- Header ---- */
+  }
+  .leadbot-components .leadbot-chatbot-header {
+    background: linear-gradient(135deg, var(--leadbot-primary) 0%, color-mix(in srgb, var(--leadbot-primary) 82%, black) 100%);
+    color: var(--leadbot-color-on-primary);
+    padding: 14px 16px;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    position: relative;
+    flex-shrink: 0;
+  }
+  .leadbot-components .leadbot-chatbot-header-avatar,
+  .leadbot-components .leadbot-chatbot-avatar {
+    width: 34px;
+    height: 34px;
+    border-radius: 50%;
+    overflow: hidden;
+    flex-shrink: 0;
+    background: rgba(255, 255, 255, 0.2);
+  }
+  .leadbot-components .leadbot-chatbot-header-avatar img,
+  .leadbot-components .leadbot-chatbot-avatar img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+  .leadbot-components .leadbot-chatbot-header-avatar .leadbot-avatar-fallback {
+    color: var(--leadbot-primary);
+  }
+  .leadbot-components .leadbot-chatbot-header-info {
+    display: flex;
+    flex-direction: column;
+    gap: 1px;
+    flex: 1;
+    min-width: 0;
+  }
+  .leadbot-components .leadbot-chatbot-title {
+    font-weight: 600;
+    font-size: var(--leadbot-font-size);
+    line-height: 1.2;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .leadbot-components .leadbot-chatbot-status {
+    display: flex;
+    align-items: center;
+    gap: 5px;
+    font-size: var(--leadbot-font-size-xs);
+    opacity: 0.85;
+  }
+  .leadbot-components .leadbot-chatbot-online-dot {
+    width: 7px;
+    height: 7px;
+    background: var(--leadbot-color-online);
+    border-radius: 50%;
+    flex-shrink: 0;
+  }
+  .leadbot-components {
+    /* ---- Messages area ---- */
+  }
+  .leadbot-components .leadbot-chatbot-messages {
+    min-height: 0;
+    max-height: none;
+    overflow-y: auto;
+    padding: 16px;
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    flex: 1 1 360px;
+  }
+  .leadbot-components {
+    /* ---- Message bubbles ---- */
+  }
+  .leadbot-components .leadbot-chatbot-message {
+    max-width: 88%;
+    padding: 10px 14px;
+    border-radius: var(--leadbot-radius-card);
+    font-size: var(--leadbot-font-size);
+    line-height: 1.5;
+    position: relative;
+    flex-shrink: 0;
+  }
+  .leadbot-components .leadbot-chatbot-message-bot {
+    background: var(--leadbot-color-surface-sunken);
+    color: var(--leadbot-color-text);
+    align-self: flex-start;
+    border-bottom-left-radius: 4px;
+  }
+  .leadbot-components .leadbot-chatbot-message-user {
+    background: var(--leadbot-primary);
+    color: var(--leadbot-color-on-primary);
+    align-self: flex-end;
+    border-bottom-right-radius: 4px;
+  }
+  .leadbot-components .leadbot-chatbot-message-content {
+    overflow-wrap: break-word;
+  }
+  .leadbot-components {
+    /* ---- Conversation starters ---- */
+  }
+  .leadbot-components .leadbot-chatbot-starters {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: flex-end;
+    gap: 6px;
+    padding: 4px 16px 8px;
+    flex-shrink: 0;
+  }
+  .leadbot-components .leadbot-chatbot-starter-btn {
+    background: var(--leadbot-color-surface);
+    border: 1px solid color-mix(in srgb, var(--leadbot-primary) 45%, var(--leadbot-color-surface));
+    color: var(--leadbot-primary);
+    border-radius: var(--leadbot-radius-pill);
+    padding: 8px 14px;
+    font-size: var(--leadbot-font-size-sm);
+    font-family: inherit;
+    font-weight: 500;
+    line-height: 1.4;
+    text-align: left;
+    max-width: 88%;
+    cursor: pointer;
+    transition: background var(--leadbot-duration-fast) var(--leadbot-ease-interactive), border-color var(--leadbot-duration-fast) var(--leadbot-ease-interactive);
+  }
+  .leadbot-components .leadbot-chatbot-starter-btn:hover:not(:disabled) {
+    background: color-mix(in srgb, var(--leadbot-primary) 8%, var(--leadbot-color-surface));
+    border-color: var(--leadbot-primary);
+  }
+  .leadbot-components .leadbot-chatbot-starter-btn:disabled {
+    opacity: 0.6;
+    cursor: default;
+  }
+  .leadbot-components {
+    /* Markdown in chatbot */
+  }
+  .leadbot-components .leadbot-chatbot-message-content p {
+    margin: 0 0 8px 0;
+  }
+  .leadbot-components .leadbot-chatbot-message-content p:last-child {
+    margin-bottom: 0;
+  }
+  .leadbot-components .leadbot-chatbot-message-content strong {
+    font-weight: 600;
+  }
+  .leadbot-components .leadbot-chatbot-message-content em {
+    font-style: italic;
+  }
+  .leadbot-components .leadbot-chatbot-message-content a {
+    color: var(--leadbot-primary);
+    text-decoration: underline;
+  }
+  .leadbot-components .leadbot-chatbot-message-user .leadbot-chatbot-message-content a {
+    color: var(--leadbot-color-on-primary);
+  }
+  .leadbot-components .leadbot-chatbot-message-content h1,
+  .leadbot-components .leadbot-chatbot-message-content h2,
+  .leadbot-components .leadbot-chatbot-message-content h3,
+  .leadbot-components .leadbot-chatbot-message-content h4,
+  .leadbot-components .leadbot-chatbot-message-content h5,
+  .leadbot-components .leadbot-chatbot-message-content h6 {
+    margin: 8px 0 4px 0;
+    font-weight: 600;
+    line-height: 1.3;
+  }
+  .leadbot-components .leadbot-chatbot-message-content h1:first-child,
+  .leadbot-components .leadbot-chatbot-message-content h2:first-child,
+  .leadbot-components .leadbot-chatbot-message-content h3:first-child,
+  .leadbot-components .leadbot-chatbot-message-content h4:first-child,
+  .leadbot-components .leadbot-chatbot-message-content h5:first-child,
+  .leadbot-components .leadbot-chatbot-message-content h6:first-child {
+    margin-top: 0;
+  }
+  .leadbot-components .leadbot-chatbot-message-content h1 {
+    font-size: 1.4em;
+  }
+  .leadbot-components .leadbot-chatbot-message-content h2 {
+    font-size: 1.25em;
+  }
+  .leadbot-components .leadbot-chatbot-message-content h3 {
+    font-size: 1.1em;
+  }
+  .leadbot-components .leadbot-chatbot-message-content h4 {
+    font-size: 1em;
+  }
+  .leadbot-components .leadbot-chatbot-message-content h5,
+  .leadbot-components .leadbot-chatbot-message-content h6 {
+    font-size: 0.95em;
+  }
+  .leadbot-components .leadbot-markdown-hr {
+    border: none;
+    border-top: 1px solid var(--leadbot-color-border);
+    margin: 12px 0;
+  }
+  .leadbot-components .leadbot-chatbot-message-content ul,
+  .leadbot-components .leadbot-chatbot-message-content ol {
+    margin: 6px 0;
+    padding-left: 20px;
+  }
+  .leadbot-components .leadbot-chatbot-message-content li {
+    margin: 2px 0;
+    line-height: 1.5;
+  }
+  .leadbot-components .leadbot-markdown-table {
+    width: 100%;
+    border-collapse: collapse;
+    margin: 8px 0;
+    font-size: var(--leadbot-font-size-sm);
+    border-radius: var(--leadbot-radius-sm);
+    overflow: hidden;
+  }
+  .leadbot-components .leadbot-markdown-table th {
+    background: var(--leadbot-color-surface-alt);
+    padding: 8px 10px;
+    text-align: left;
+    font-weight: 600;
+    border-bottom: 1px solid var(--leadbot-color-border);
+    color: var(--leadbot-color-text-strong);
+  }
+  .leadbot-components .leadbot-markdown-table td {
+    padding: 8px 10px;
+    border-bottom: 1px solid var(--leadbot-color-surface-sunken);
+    color: var(--leadbot-color-text);
+  }
+  .leadbot-components .leadbot-markdown-table tr:last-child td {
+    border-bottom: none;
+  }
+  .leadbot-components {
+    /* ---- Thinking / typing indicator ---- */
+  }
+  .leadbot-components .leadbot-chatbot-thinking {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+  .leadbot-components .leadbot-chatbot-thinking-text {
+    font-size: var(--leadbot-font-size-sm);
+    color: var(--leadbot-color-text-subtle);
+  }
+  .leadbot-components .leadbot-chatbot-message-typing {
+    padding: 10px 14px;
+  }
+  .leadbot-components .leadbot-chatbot-typing-dots {
+    display: flex;
+    gap: 4px;
+  }
+  .leadbot-components .leadbot-chatbot-typing-dots span {
+    width: 6px;
+    height: 6px;
+    background: var(--leadbot-color-text-subtle);
+    border-radius: 50%;
+    animation: leadbot-typing-bounce 1.4s infinite var(--leadbot-ease-loop);
+  }
+  .leadbot-components .leadbot-chatbot-typing-dots span:nth-child(1) {
+    animation-delay: -0.32s;
+  }
+  .leadbot-components .leadbot-chatbot-typing-dots span:nth-child(2) {
+    animation-delay: -0.16s;
+  }
+  .leadbot-components {
+    /* ---- Input area ---- */
+  }
+  .leadbot-components .leadbot-chatbot-input {
+    padding: 8px;
+    background: var(--leadbot-color-surface-tray);
+    border-top: 1px solid var(--leadbot-color-surface-tray-alt);
+    flex-shrink: 0;
+  }
+  .leadbot-components .leadbot-chatbot-input-field {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    border: 1.5px solid var(--leadbot-color-border-field);
+    border-radius: var(--leadbot-radius-card);
+    background: var(--leadbot-color-surface);
+    padding: 6px 6px 6px 14px;
+    transition: border-color var(--leadbot-duration-fast) var(--leadbot-ease-interactive), box-shadow var(--leadbot-duration-fast) var(--leadbot-ease-interactive);
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
+  }
+  .leadbot-components .leadbot-chatbot-input-field:focus-within {
+    border-color: var(--leadbot-primary);
+    box-shadow: var(--leadbot-focus-ring-soft);
+  }
+  .leadbot-components .leadbot-chatbot-message-input {
+    flex: 1;
+    border: none;
+    border-radius: var(--leadbot-radius-card);
+    padding: 8px 0;
+    font-size: var(--leadbot-font-size);
+    outline: none;
+    background: transparent;
+    color: var(--leadbot-color-text);
+    min-width: 0;
+  }
+  .leadbot-components .leadbot-chatbot-message-input::placeholder {
+    color: var(--leadbot-color-text-subtle);
+  }
+  .leadbot-components .leadbot-chatbot-send-btn {
+    width: 32px;
+    height: 32px;
+    background: var(--leadbot-color-border);
+    color: var(--leadbot-color-on-primary);
+    border: none;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: default;
+    transition: background var(--leadbot-duration-fast) var(--leadbot-ease-interactive);
+    flex-shrink: 0;
+    pointer-events: none;
+  }
+  .leadbot-components .leadbot-chatbot-send-btn svg {
+    width: 16px;
+    height: 16px;
+  }
+  .leadbot-components .leadbot-chatbot-send-btn--active {
+    background: var(--leadbot-primary);
+    cursor: pointer;
+    pointer-events: auto;
+  }
+  .leadbot-components .leadbot-chatbot-send-btn--active:hover {
+    opacity: 0.85;
+  }
+  .leadbot-components .leadbot-chatbot-send-btn--active:active {
+    opacity: 0.7;
+  }
+  .leadbot-components {
+    /* ---- Menu ---- */
+  }
+  .leadbot-components .leadbot-chatbot-menu-btn {
+    width: 30px;
+    height: 30px;
+    border-radius: var(--leadbot-radius-sm);
+    background: rgba(255, 255, 255, 0.15);
+    border: none;
+    color: var(--leadbot-color-on-primary);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    transition: background var(--leadbot-duration-fast) var(--leadbot-ease-interactive);
+    margin-left: auto;
+    flex-shrink: 0;
+  }
+  .leadbot-components .leadbot-chatbot-menu-btn:hover {
+    background: rgba(255, 255, 255, 0.25);
+  }
+  .leadbot-components .leadbot-chatbot-menu {
+    position: absolute;
+    top: 50px;
+    right: 12px;
+    background: var(--leadbot-color-surface);
+    border-radius: var(--leadbot-radius-md);
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
+    min-width: 150px;
+    overflow: hidden;
+    z-index: 100;
+    border: 1px solid rgba(0, 0, 0, 0.06);
+  }
+  .leadbot-components .leadbot-chatbot-menu-item {
+    width: 100%;
+    padding: 10px 14px;
+    border: none;
+    background: var(--leadbot-color-surface);
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    cursor: pointer;
+    transition: background var(--leadbot-duration-fast) var(--leadbot-ease-interactive);
+    color: var(--leadbot-color-text-strong);
+    font-size: var(--leadbot-font-size-sm);
+    text-align: left;
+  }
+  .leadbot-components .leadbot-chatbot-menu-item:hover {
+    background: var(--leadbot-color-surface-alt);
+  }
+  .leadbot-components .leadbot-chatbot-menu-item:active {
+    background: var(--leadbot-color-surface-sunken);
+  }
+  .leadbot-components .leadbot-chatbot-menu-item svg {
+    flex-shrink: 0;
+    color: var(--leadbot-color-text-muted);
+  }
+  .leadbot-components .leadbot-chatbot-menu-item-icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    line-height: 0;
+  }
+  .leadbot-components .leadbot-chatbot-menu-item-icon svg {
+    width: 14px;
+    height: 14px;
+    display: block;
+  }
+  .leadbot-components {
+    /* ---- Branding (fixed pill between messages and input) ---- */
+  }
+  .leadbot-components .leadbot-chatbot-branding {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 3px;
+    font-size: 9px;
+    color: var(--leadbot-color-text-subtle);
+    text-decoration: none;
+    background: transparent;
+    padding: 3px 10px;
+    border-radius: var(--leadbot-radius-pill);
+    margin: -2px auto 6px auto;
+    position: relative;
+    z-index: 2;
+    width: fit-content;
+    flex-shrink: 0;
+    border: 1.5px solid transparent;
+    transition: border-color var(--leadbot-duration-fast) var(--leadbot-ease-interactive);
+    cursor: pointer;
+  }
+  .leadbot-components .leadbot-chatbot-branding .leadbot-powered-by__logo {
+    color: var(--leadbot-color-logo);
+  }
+  .leadbot-components .leadbot-chatbot-branding:hover {
+    border-color: color-mix(in srgb, var(--leadbot-primary) 25%, transparent);
+  }
+  .leadbot-components .leadbot-chatbot-branding svg {
+    display: block;
+  }
+  .leadbot-components {
+    /* ---- Tool cards (AI-triggered steps rendered inline in the chat) ---- */
+  }
+  .leadbot-components .leadbot-chatbot-tool-card {
+    width: 88%;
+    padding: 0;
+    overflow: hidden;
+    background: var(--leadbot-color-surface);
+    border: 1px solid rgba(0, 0, 0, 0.08);
+    box-shadow: var(--leadbot-shadow-sm);
+  }
+  .leadbot-components .leadbot-chatbot-tool-card-header {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 10px 14px;
+    background: color-mix(in srgb, var(--leadbot-primary) 5%, var(--leadbot-color-surface));
+    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
+    font-size: var(--leadbot-font-size-sm);
+    font-weight: 600;
+    color: var(--leadbot-color-text);
+  }
+  .leadbot-components .leadbot-chatbot-tool-card-icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 22px;
+    height: 22px;
+    border-radius: var(--leadbot-radius-sm);
+    background: color-mix(in srgb, var(--leadbot-primary) 12%, var(--leadbot-color-surface));
+    color: var(--leadbot-primary);
+    flex-shrink: 0;
+  }
+  .leadbot-components .leadbot-chatbot-tool-card-icon svg {
+    display: block;
+  }
+  .leadbot-components .leadbot-chatbot-tool-card-title {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .leadbot-components .leadbot-chatbot-tool-card-check {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    margin-left: auto;
+    width: 18px;
+    height: 18px;
+    border-radius: 50%;
+    background: var(--leadbot-color-success);
+    color: var(--leadbot-color-on-primary);
+    flex-shrink: 0;
+  }
+  .leadbot-components .leadbot-chatbot-tool-card-check svg {
+    display: block;
+  }
+  .leadbot-components .leadbot-chatbot-tool-card--completed .leadbot-chatbot-tool-card-header {
+    background: color-mix(in srgb, var(--leadbot-color-success) 6%, var(--leadbot-color-surface));
+  }
+  .leadbot-components .leadbot-chatbot-tool-card--completed .leadbot-chatbot-tool-card-icon {
+    background: color-mix(in srgb, var(--leadbot-color-success) 12%, var(--leadbot-color-surface));
+    color: var(--leadbot-color-success);
+  }
+  .leadbot-components .leadbot-chatbot-tool-card--dismissed {
+    opacity: 0.55;
+  }
+  .leadbot-components .leadbot-chatbot-tool-card--dismissed .leadbot-chatbot-tool-card-header {
+    border-bottom: none;
+  }
+  .leadbot-components .leadbot-chatbot-tool-card-body {
+    max-width: 100%;
+    min-width: 0;
+  }
+  .leadbot-components {
+    /* Embedded steps must clamp to the bubble width instead of their own minimums. */
+  }
+  .leadbot-components .leadbot-chatbot-tool-card-body > * {
+    max-width: 100%;
+    min-width: 0;
+  }
+  .leadbot-components {
+    /* Embedded forms are part of the card — strip their standalone card chrome
+       (background, border, shadow) so the tool card reads as one surface. */
+  }
+  .leadbot-components .leadbot-chatbot-tool-card .leadbot-form,
+  .leadbot-components .leadbot-chatbot-tool-card .leadbot-callback-form,
+  .leadbot-components .leadbot-chatbot-tool-card .leadbot-email-request-form,
+  .leadbot-components .leadbot-chatbot-tool-card .leadbot-whatsapp-form {
+    width: 100%;
+    max-width: 100%;
+    background: none;
+    border: none;
+    border-radius: 0;
+    box-shadow: none;
+  }
+  .leadbot-components {
+    /* The header already shows the form title — don't repeat it in the body. */
+  }
+  .leadbot-components .leadbot-chatbot-tool-card .leadbot-form-title {
+    display: none;
+  }
+  .leadbot-components {
+    /* The chat pane scrolls — the embedded form must not add a nested scroll area. */
+  }
+  .leadbot-components .leadbot-chatbot-tool-card .leadbot-form-shell {
+    max-height: none;
+    overflow: visible;
+  }
+  .leadbot-components .leadbot-chatbot-tool-card .leadbot-form-scroll {
+    max-height: none;
+    overflow-y: visible;
+    overflow-x: hidden;
+    padding: 14px 14px 0 14px;
+  }
+  .leadbot-components .leadbot-chatbot-tool-card .leadbot-form-actions {
+    padding: 4px 14px 14px 14px;
+    border-top: none;
+    background: transparent;
+  }
+  .leadbot-components .leadbot-chatbot-tool-card .leadbot-form-complete {
+    padding: 14px;
+  }
+  .leadbot-components {
+    /* ---- Inline WhatsApp card (one tap opens WhatsApp with the message pre-filled) ---- */
+  }
+  .leadbot-components .leadbot-chatbot-tool-card--whatsapp .leadbot-chatbot-tool-card-header {
+    background: color-mix(in srgb, var(--leadbot-whatsapp-brand) 6%, var(--leadbot-color-surface));
+  }
+  .leadbot-components .leadbot-chatbot-tool-card--whatsapp .leadbot-chatbot-tool-card-icon {
+    background: color-mix(in srgb, var(--leadbot-whatsapp-brand) 14%, var(--leadbot-color-surface));
+    color: var(--leadbot-whatsapp-brand-dark);
+  }
+  .leadbot-components .leadbot-chatbot-wa {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    padding: 14px;
+  }
+  .leadbot-components .leadbot-chatbot-wa-contact {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+  }
+  .leadbot-components .leadbot-chatbot-wa .leadbot-whatsapp-avatar,
+  .leadbot-components .leadbot-chatbot-wa .leadbot-whatsapp-avatar-placeholder {
+    width: 36px;
+    height: 36px;
+    border-radius: 50%;
+    object-fit: cover;
+    flex-shrink: 0;
+  }
+  .leadbot-components .leadbot-chatbot-wa-contact-info {
+    display: flex;
+    flex-direction: column;
+    gap: 1px;
+    min-width: 0;
+  }
+  .leadbot-components .leadbot-chatbot-wa-name {
+    font-size: var(--leadbot-font-size-sm);
+    font-weight: 600;
+    color: var(--leadbot-color-text);
+  }
+  .leadbot-components .leadbot-chatbot-wa-via {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    font-size: 11px;
+    color: var(--leadbot-whatsapp-brand-dark);
+  }
+  .leadbot-components .leadbot-chatbot-wa-via svg {
+    width: 12px;
+    height: 12px;
+    display: block;
+  }
+  .leadbot-components .leadbot-chatbot-wa-text {
+    font-size: var(--leadbot-font-size-sm);
+    line-height: 1.5;
+    color: var(--leadbot-color-text-body);
+    border-left: 3px solid color-mix(in srgb, var(--leadbot-whatsapp-brand) 40%, var(--leadbot-color-surface));
+    padding-left: 10px;
+  }
+  .leadbot-components .leadbot-chatbot-wa-open-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    width: 100%;
+    padding: 10px 14px;
+    border: none;
+    border-radius: var(--leadbot-radius-md);
+    background: var(--leadbot-whatsapp-brand);
+    font-size: var(--leadbot-font-size-sm);
+    font-weight: 600;
+    color: var(--leadbot-color-on-primary);
+    cursor: pointer;
+    transition: background var(--leadbot-duration-fast) var(--leadbot-ease-interactive);
+  }
+  .leadbot-components .leadbot-chatbot-wa-open-btn:hover {
+    background: var(--leadbot-whatsapp-brand-hover);
+  }
+  .leadbot-components .leadbot-chatbot-wa-open-btn svg {
+    width: 15px;
+    height: 15px;
+    display: block;
+  }
+  .leadbot-components .leadbot-chatbot-wa-dismiss {
+    align-self: flex-start;
+    background: none;
+    border: none;
+    padding: 0;
+    font-size: var(--leadbot-font-size-xs);
+    color: var(--leadbot-color-text-subtle);
+    text-decoration: underline;
+    cursor: pointer;
+  }
+  .leadbot-components .leadbot-chatbot-wa-dismiss:hover {
+    color: var(--leadbot-color-text-body);
+  }
+  .leadbot-components .leadbot-chatbot-wa-qr {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 8px;
+    text-align: center;
+  }
+  .leadbot-components .leadbot-chatbot-wa-qr-title {
+    font-size: var(--leadbot-font-size-sm);
+    font-weight: 600;
+    color: var(--leadbot-color-text);
+  }
+  .leadbot-components .leadbot-chatbot-wa-qr-image svg {
+    width: 140px;
+    height: 140px;
+    display: block;
+  }
+  .leadbot-components .leadbot-chatbot-wa-qr-label {
+    font-size: var(--leadbot-font-size-xs);
+    color: var(--leadbot-color-text-muted);
+  }
+  .leadbot-components .leadbot-chatbot-wa-link {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    font-size: var(--leadbot-font-size-xs);
+    font-weight: 500;
+    color: var(--leadbot-whatsapp-brand-dark);
+    text-decoration: underline;
+  }
+  .leadbot-components .leadbot-chatbot-wa-link svg {
+    width: 13px;
+    height: 13px;
+    display: block;
+  }
+  .leadbot-components .leadbot-chatbot-wa-opened {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 6px;
+    font-size: var(--leadbot-font-size-sm);
+    color: var(--leadbot-color-success-text);
+  }
+  .leadbot-components {
+    /* Compact field styling tuned for the narrow chat column. */
+  }
+  .leadbot-components .leadbot-chatbot-tool-card .leadbot-field {
+    margin-bottom: 12px;
+  }
+  .leadbot-components .leadbot-chatbot-tool-card .leadbot-field label,
+  .leadbot-components .leadbot-chatbot-tool-card .leadbot-field-list .leadbot-field-list-label {
+    font-size: var(--leadbot-font-size-xs);
+    margin-bottom: 4px;
+    color: var(--leadbot-color-text-body);
+  }
+  .leadbot-components .leadbot-chatbot-tool-card .leadbot-field input,
+  .leadbot-components .leadbot-chatbot-tool-card .leadbot-field textarea,
+  .leadbot-components .leadbot-chatbot-tool-card .leadbot-field select {
+    padding: 9px 12px;
+    border-color: var(--leadbot-color-border);
+    border-radius: var(--leadbot-radius-md);
+    transition: border-color var(--leadbot-duration-fast) var(--leadbot-ease-interactive), box-shadow var(--leadbot-duration-fast) var(--leadbot-ease-interactive);
+  }
+  .leadbot-components .leadbot-chatbot-tool-card .leadbot-field input:focus,
+  .leadbot-components .leadbot-chatbot-tool-card .leadbot-field textarea:focus,
+  .leadbot-components .leadbot-chatbot-tool-card .leadbot-field select:focus {
+    border-color: var(--leadbot-primary);
+    box-shadow: var(--leadbot-focus-ring);
+  }
+  .leadbot-components {
+    /* ---- Citations ---- */
+  }
+  .leadbot-components .leadbot-citation-link {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 16px;
+    height: 16px;
+    padding: 0 4px;
+    border-radius: var(--leadbot-radius-md);
+    background: color-mix(in srgb, var(--leadbot-primary) 12%, transparent);
+    color: var(--leadbot-primary);
+    text-decoration: none;
+    font-size: 10px;
+    font-weight: 700;
+    line-height: 1;
+    cursor: pointer;
+    transition: background var(--leadbot-duration-fast) var(--leadbot-ease-interactive);
+    vertical-align: super;
+  }
+  .leadbot-components .leadbot-citation-link:hover {
+    background: color-mix(in srgb, var(--leadbot-primary) 22%, transparent);
+  }
+  .leadbot-components .leadbot-chatbot-citations {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    margin-top: 8px;
+    padding-top: 8px;
+    border-top: 1px solid rgba(0, 0, 0, 0.06);
+  }
+  .leadbot-components .leadbot-chatbot-citation-item {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    font-size: var(--leadbot-font-size-xs);
+    color: var(--leadbot-color-text-muted);
+    text-decoration: none;
+    padding: 4px 8px;
+    border-radius: var(--leadbot-radius-sm);
+    background: rgba(0, 0, 0, 0.02);
+    transition: background var(--leadbot-duration-fast) var(--leadbot-ease-interactive);
+  }
+  .leadbot-components .leadbot-chatbot-citation-item:hover {
+    background: color-mix(in srgb, var(--leadbot-primary) 6%, transparent);
+    color: var(--leadbot-primary);
+  }
+  .leadbot-components .leadbot-chatbot-citation-number {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 16px;
+    height: 16px;
+    padding: 0 4px;
+    border-radius: var(--leadbot-radius-md);
+    background: color-mix(in srgb, var(--leadbot-primary) 10%, transparent);
+    color: var(--leadbot-primary);
+    font-size: 10px;
+    font-weight: 700;
+    flex-shrink: 0;
+  }
+  .leadbot-components .leadbot-chatbot-citation-url {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    min-width: 0;
+  }
+  .leadbot-components {
+    /* ---- AI response feedback ---- */
+  }
+  .leadbot-components .leadbot-chatbot-feedback {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    margin-top: 6px;
+  }
+  .leadbot-components .leadbot-chatbot-feedback-buttons {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+  }
+  .leadbot-components .leadbot-chatbot-feedback-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 24px;
+    height: 24px;
+    padding: 0;
+    background: transparent;
+    border: none;
+    border-radius: var(--leadbot-radius-sm);
+    color: var(--leadbot-color-text-subtle);
+    cursor: pointer;
+    transition: color var(--leadbot-duration-fast) var(--leadbot-ease-interactive), background var(--leadbot-duration-fast) var(--leadbot-ease-interactive);
+  }
+  .leadbot-components .leadbot-chatbot-feedback-btn svg {
+    width: 14px;
+    height: 14px;
+  }
+  .leadbot-components .leadbot-chatbot-feedback-btn:hover {
+    color: var(--leadbot-color-text-body);
+    background: rgba(0, 0, 0, 0.05);
+  }
+  .leadbot-components .leadbot-chatbot-feedback-btn--selected,
+  .leadbot-components .leadbot-chatbot-feedback-btn--selected:hover {
+    color: var(--leadbot-primary);
+    background: color-mix(in srgb, var(--leadbot-primary) 10%, transparent);
+  }
+  .leadbot-components .leadbot-chatbot-feedback-comment {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+  }
+  .leadbot-components .leadbot-chatbot-feedback-textarea {
+    width: 100%;
+    box-sizing: border-box;
+    border: 1.5px solid var(--leadbot-color-border-field);
+    border-radius: var(--leadbot-radius-sm);
+    background: var(--leadbot-color-surface);
+    padding: 8px 10px;
+    font-size: var(--leadbot-font-size-sm);
+    font-family: inherit;
+    color: var(--leadbot-color-text);
+    resize: none;
+    outline: none;
+    transition: border-color var(--leadbot-duration-fast) var(--leadbot-ease-interactive), box-shadow var(--leadbot-duration-fast) var(--leadbot-ease-interactive);
+  }
+  .leadbot-components .leadbot-chatbot-feedback-textarea:focus {
+    border-color: var(--leadbot-primary);
+    box-shadow: var(--leadbot-focus-ring-soft);
+  }
+  .leadbot-components .leadbot-chatbot-feedback-textarea::placeholder {
+    color: var(--leadbot-color-text-subtle);
+  }
+  .leadbot-components .leadbot-chatbot-feedback-comment-actions {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+  }
+  .leadbot-components .leadbot-chatbot-feedback-send {
+    background: var(--leadbot-primary);
+    color: var(--leadbot-color-on-primary);
+    border: none;
+    border-radius: var(--leadbot-radius-pill);
+    padding: 5px 14px;
+    font-size: var(--leadbot-font-size-xs);
+    font-family: inherit;
+    font-weight: 600;
+    cursor: pointer;
+    transition: opacity var(--leadbot-duration-fast) var(--leadbot-ease-interactive);
+  }
+  .leadbot-components .leadbot-chatbot-feedback-send:hover {
+    opacity: 0.9;
+  }
+  .leadbot-components .leadbot-chatbot-feedback-skip {
+    background: transparent;
+    border: none;
+    padding: 0;
+    font-size: var(--leadbot-font-size-xs);
+    font-family: inherit;
+    color: var(--leadbot-color-text-muted);
+    cursor: pointer;
+    text-decoration: underline;
+  }
+  .leadbot-components .leadbot-chatbot-feedback-skip:hover {
+    color: var(--leadbot-color-text-strong);
+  }
+  .leadbot-components .leadbot-chatbot-feedback-thanks {
+    font-size: var(--leadbot-font-size-xs);
+    color: var(--leadbot-color-success);
+  }
+  .leadbot-components {
+    /* ==========================================================================
+       WhatsApp Interface
+       File: src/steps/whatsapp_step.js
+       Classes: leadbot-whatsapp-interface, leadbot-whatsapp-header, leadbot-whatsapp-chat,
+                leadbot-whatsapp-message, leadbot-whatsapp-input-container
+       ========================================================================== */
+  }
+  .leadbot-components .leadbot-whatsapp-button-container {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    margin-bottom: 16px;
+  }
+  .leadbot-components .leadbot-whatsapp-interface {
+    background: var(--leadbot-whatsapp-wallpaper);
+    border-radius: var(--leadbot-radius-card);
+    overflow: hidden;
+    box-shadow: var(--leadbot-shadow-sm);
+    min-width: 360px;
+    max-width: 360px;
+  }
+  .leadbot-components .leadbot-whatsapp-header {
+    background: linear-gradient(135deg, var(--leadbot-whatsapp-green) 0%, var(--leadbot-whatsapp-green-hover) 100%);
+    padding: 12px 16px;
+    display: flex;
+    align-items: center;
+  }
+  .leadbot-components .leadbot-whatsapp-contact-info {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+  }
+  .leadbot-components .leadbot-whatsapp-avatar {
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    object-fit: cover;
+    border: 2px solid var(--leadbot-color-surface);
+    background: var(--leadbot-color-surface);
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
+  }
+  .leadbot-components .leadbot-whatsapp-avatar-placeholder {
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    background: var(--leadbot-color-surface);
+    border: 2px solid var(--leadbot-color-surface);
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--leadbot-primary, var(--leadbot-whatsapp-on-green));
+    font-weight: 600;
+    font-size: 16px;
+  }
+  .leadbot-components .leadbot-whatsapp-avatar-placeholder .leadbot-avatar-fallback {
+    color: var(--leadbot-primary, var(--leadbot-whatsapp-on-green));
+  }
+  .leadbot-components .leadbot-whatsapp-contact-details {
+    color: var(--leadbot-color-on-primary);
+  }
+  .leadbot-components .leadbot-whatsapp-name {
+    font-weight: 500;
+    font-size: 16px;
+    line-height: 1.25;
+    letter-spacing: 0.01em;
+  }
+  .leadbot-components .leadbot-whatsapp-status {
+    font-size: var(--leadbot-font-size-xs);
+    font-weight: 400;
+    color: rgba(255, 255, 255, 0.85);
+    line-height: 1.3;
+    letter-spacing: 0.02em;
+  }
+  .leadbot-components .leadbot-whatsapp-chat {
+    padding: 16px;
+    min-height: 80px;
+    background: linear-gradient(to bottom, var(--leadbot-whatsapp-wallpaper) 0%, var(--leadbot-whatsapp-wallpaper-end) 100%);
+  }
+  .leadbot-components .leadbot-whatsapp-message {
+    background: var(--leadbot-whatsapp-bubble);
+    padding: 8px 12px;
+    border-radius: var(--leadbot-radius-md);
+    max-width: 100%;
+    position: relative;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+  }
+  .leadbot-components .leadbot-whatsapp-message::before {
+    content: "";
+    position: absolute;
+    left: -8px;
+    top: 16px;
+    width: 0;
+    height: 0;
+    border: 8px solid transparent;
+    border-right-color: var(--leadbot-whatsapp-bubble);
+    border-left: none;
+  }
+  .leadbot-components .leadbot-whatsapp-message-content {
+    color: var(--leadbot-whatsapp-bubble-text);
+    font-size: var(--leadbot-font-size);
+    line-height: 1.4;
+    margin-bottom: 4px;
+  }
+  .leadbot-components .leadbot-whatsapp-message-content p {
+    margin: 0;
+  }
+  .leadbot-components .leadbot-whatsapp-message-time {
+    font-size: 11px;
+    /* >= 4.5:1 on the white bubble (WCAG 1.4.3); #999 was 2.85:1 */
+    color: var(--leadbot-color-text-muted);
+    text-align: right;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: 4px;
+  }
+  .leadbot-components .leadbot-whatsapp-checkmarks {
+    color: var(--leadbot-whatsapp-tick);
+    margin-left: 4px;
+    display: inline-flex;
+    align-items: center;
+  }
+  .leadbot-components .leadbot-whatsapp-checkmarks svg {
+    width: 16px;
+    height: 12px;
+  }
+  .leadbot-components {
+    /* Credit line, right-aligned in the composer tray. */
+  }
+  .leadbot-components .leadbot-whatsapp-branding {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: 3px;
+    font-size: 9px;
+    line-height: 1;
+    margin: 5px 0 0 auto;
+    padding: 3px 10px;
+    width: fit-content;
+    max-width: 100%;
+    background: transparent;
+    border: 1.5px solid transparent;
+    border-radius: var(--leadbot-radius-pill);
+    color: var(--leadbot-color-text-subtle);
+    box-shadow: none;
+    backdrop-filter: none;
+    text-decoration: none;
+    font-weight: 400;
+    letter-spacing: 0;
+    flex-shrink: 0;
+    transition: border-color var(--leadbot-duration-fast) var(--leadbot-ease-interactive);
+  }
+  .leadbot-components .leadbot-whatsapp-branding:hover {
+    border-color: color-mix(in srgb, var(--leadbot-primary) 25%, transparent);
+  }
+  .leadbot-components .leadbot-whatsapp-branding > span:not(.leadbot-powered-by__logo) {
+    color: inherit;
+    transition: color 0.2s ease;
+  }
+  .leadbot-components .leadbot-whatsapp-branding .leadbot-powered-by__logo {
+    color: var(--leadbot-color-logo);
+    display: inline-flex;
+    align-items: center;
+    transition: color 0.2s ease;
+  }
+  .leadbot-components .leadbot-whatsapp-branding .leadbot-powered-by__logo svg {
+    height: 13px;
+    display: block;
+  }
+  .leadbot-components .leadbot-whatsapp-branding img {
+    height: 16px;
+    display: block;
+  }
+  .leadbot-components .leadbot-whatsapp-branding:focus-visible {
+    outline: 2px solid rgba(17, 24, 39, 0.24);
+    outline-offset: 3px;
+  }
+  .leadbot-components .leadbot-whatsapp-input-container {
+    padding: 10px 16px 8px;
+    background: var(--leadbot-color-surface-tray-alt);
+  }
+  .leadbot-components .leadbot-whatsapp-input-bar {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    background: var(--leadbot-color-surface);
+    border-radius: var(--leadbot-radius-pill);
+    padding: 6px 6px 6px 16px;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+    transition: box-shadow var(--leadbot-duration-fast) var(--leadbot-ease-interactive);
+  }
+  .leadbot-components {
+    /* Sole focus indicator for the message field (the global a11y outline skips
+       text controls). */
+  }
+  .leadbot-components .leadbot-whatsapp-input-bar:focus-within {
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 0 0 3px color-mix(in srgb, var(--leadbot-whatsapp-green) 40%, transparent);
+  }
+  .leadbot-components .leadbot-whatsapp-message-field {
+    flex: 1;
+    border: none;
+    background: transparent;
+    font-size: var(--leadbot-font-size);
+    color: var(--leadbot-whatsapp-bubble-text);
+    font-family: inherit;
+    outline: none;
+    padding: 6px 0;
+  }
+  .leadbot-components .leadbot-whatsapp-message-field::placeholder {
+    color: var(--leadbot-color-text-subtle);
+  }
+  .leadbot-components .leadbot-whatsapp-input-field {
+    display: flex;
+    align-items: center;
+    background: var(--leadbot-color-surface);
+    border-radius: var(--leadbot-radius-pill);
+    padding: 8px 16px;
+    gap: 12px;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+  }
+  .leadbot-components .leadbot-whatsapp-input-field input {
+    flex: 1;
+    border: none;
+    outline: none;
+    font-size: var(--leadbot-font-size);
+    color: var(--leadbot-color-text-muted);
+    background: transparent;
+  }
+  .leadbot-components .leadbot-whatsapp-send-btn {
+    background: var(--leadbot-whatsapp-green);
+    border: none;
+    border-radius: 50%;
+    width: 36px;
+    height: 36px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    color: var(--leadbot-color-on-primary);
+    transition: background 0.2s;
+  }
+  .leadbot-components .leadbot-whatsapp-send-btn span {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .leadbot-components .leadbot-whatsapp-send-btn svg {
+    display: block;
+    /* Optically center the paper-plane glyph within the round button */
+    margin-left: 1px;
+  }
+  .leadbot-components .leadbot-whatsapp-send-btn:hover {
+    background: var(--leadbot-whatsapp-green-hover);
+  }
+  .leadbot-components .leadbot-whatsapp-send-disabled {
+    background: var(--leadbot-color-disabled) !important;
+    cursor: not-allowed !important;
+    opacity: 0.6;
+  }
+  .leadbot-components .leadbot-whatsapp-send-disabled:hover {
+    background: var(--leadbot-color-disabled) !important;
+    transform: none !important;
+  }
+  .leadbot-components {
+    /* WhatsApp QR Code Card */
+  }
+  .leadbot-components .leadbot-whatsapp-qr-card {
+    background: var(--leadbot-color-surface-tray-alt);
+    padding: 20px 16px;
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+    animation: leadbot-qr-fade-in 0.3s ease-out;
+  }
+  @keyframes leadbot-qr-fade-in {
+    from {
+      opacity: 0;
+      transform: translateY(6px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+  .leadbot-components .leadbot-whatsapp-qr-content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 14px;
+  }
+  .leadbot-components .leadbot-whatsapp-qr-title {
+    font-size: var(--leadbot-font-size);
+    font-weight: 600;
+    color: var(--leadbot-whatsapp-bubble-text);
+  }
+  .leadbot-components .leadbot-whatsapp-qr-image {
+    background: var(--leadbot-color-surface);
+    border-radius: var(--leadbot-radius-md);
+    padding: 8px;
+    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
+  }
+  .leadbot-components .leadbot-whatsapp-qr-image svg {
+    display: block;
+    width: 160px;
+    height: 160px;
+  }
+  .leadbot-components .leadbot-whatsapp-qr-label {
+    font-size: var(--leadbot-font-size-xs);
+    color: var(--leadbot-color-text-subtle);
+    text-align: center;
+    line-height: 1.55;
+    max-width: 240px;
+  }
+  .leadbot-components .leadbot-whatsapp-qr-actions {
+    display: flex;
+    gap: 8px;
+    justify-content: center;
+  }
+  .leadbot-components .leadbot-whatsapp-qr-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 6px;
+    padding: 7px 14px;
+    border-radius: var(--leadbot-radius-pill);
+    font-size: var(--leadbot-font-size-sm);
+    font-weight: 500;
+    text-decoration: none;
+    cursor: pointer;
+    transition: background 0.2s;
+  }
+  .leadbot-components .leadbot-whatsapp-qr-btn-icon {
+    display: inline-flex;
+  }
+  .leadbot-components .leadbot-whatsapp-qr-btn-icon svg {
+    width: 14px;
+    height: 14px;
+  }
+  .leadbot-components .leadbot-whatsapp-qr-btn-web {
+    background: var(--leadbot-whatsapp-green);
+    color: var(--leadbot-whatsapp-on-green);
+  }
+  .leadbot-components .leadbot-whatsapp-qr-btn-web:hover {
+    background: var(--leadbot-whatsapp-green-hover);
+  }
+  .leadbot-components .leadbot-form,
+  .leadbot-components .leadbot-callback-form,
+  .leadbot-components .leadbot-email-request-form {
+    background: var(--leadbot-gradient-card);
+    border-radius: var(--leadbot-radius-card);
+    border: var(--leadbot-border-light);
+    box-shadow: var(--leadbot-shadow-sm);
+    width: 100%;
+    max-width: var(--leadbot-form-max-width);
+    display: flex;
+    flex-direction: column;
+    max-height: var(--leadbot-form-max-height);
+    min-height: 0;
+    overflow: hidden;
+    padding: 0;
+    word-wrap: break-word;
+    overflow-wrap: break-word;
+  }
+  .leadbot-components .leadbot-visually-hidden {
+    clip-path: inset(50%);
+    height: 1px;
+    overflow: hidden;
+    position: absolute;
+    white-space: nowrap;
+    width: 1px;
+  }
+  .leadbot-components .leadbot-submit-btn {
+    border: 1px solid transparent;
+  }
+  .leadbot-components .leadbot-layout-inline .leadbot-form-shell {
+    column-gap: 8px;
+    display: grid;
+    grid-template-columns: 1fr auto;
+    overflow: visible;
+    padding: var(--leadbot-form-inline-padding);
+  }
+  .leadbot-components .leadbot-layout-inline .leadbot-form-scroll,
+  .leadbot-components .leadbot-layout-inline .leadbot-form-fields {
+    display: contents;
+  }
+  .leadbot-components .leadbot-layout-inline .leadbot-form-title,
+  .leadbot-components .leadbot-layout-inline .leadbot-form-error,
+  .leadbot-components .leadbot-layout-inline .leadbot-field {
+    grid-column: 1/-1;
+  }
+  .leadbot-components .leadbot-layout-inline .leadbot-field:last-of-type {
+    grid-column: 1;
+    margin-bottom: 0;
+  }
+  .leadbot-components .leadbot-layout-inline .leadbot-form-actions {
+    align-self: end;
+    background: none;
+    border-top: 0;
+    grid-column: 2;
+    padding: 0;
+  }
+  .leadbot-components .leadbot-layout-inline .leadbot-submit-btn {
+    width: auto;
+  }
+  .leadbot-components.leadbot-bare {
+    --leadbot-form-inline-padding: 0px;
+  }
+  .leadbot-components.leadbot-bare .leadbot-form,
+  .leadbot-components.leadbot-bare .leadbot-callback-form,
+  .leadbot-components.leadbot-bare .leadbot-email-request-form,
+  .leadbot-components.leadbot-bare .leadbot-chatbot-interface,
+  .leadbot-components.leadbot-bare .leadbot-whatsapp-interface {
+    background: none;
+    border: 0;
+    border-radius: 0;
+    box-shadow: none;
+    max-height: none;
+    max-width: none;
+    overflow: visible;
+  }
+  .leadbot-components.leadbot-bare .leadbot-form-shell {
+    overflow: visible;
+  }
+  .leadbot-components.leadbot-bare .leadbot-form-scroll {
+    overflow: visible;
+    padding: 0;
+  }
+  .leadbot-components.leadbot-bare .leadbot-form-actions {
+    background: none;
+    border-top: 0;
+    padding: 0;
+  }
+  .leadbot-components.leadbot-bare .leadbot-form-complete {
+    padding: 0;
+  }
+  .leadbot-components .leadbot-field-error-text {
+    color: var(--leadbot-color-error);
+    font-size: 12px;
+    margin-top: 4px;
+  }
+  .leadbot-components .leadbot-chatbot-interface {
+    min-width: 0;
+    max-width: 100%;
+  }
+  .leadbot-components .leadbot-chatbot-message-content {
+    white-space: pre-wrap;
+  }
+  .leadbot-components .leadbot-whatsapp-interface {
+    min-width: 0;
+    max-width: 360px;
+  }
+  .leadbot-components .leadbot-buttons {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+  }
+  .leadbot-components .leadbot-buttons-btn {
+    background: var(--leadbot-color-surface);
+    border: 1px solid color-mix(in srgb, var(--leadbot-primary) 45%, var(--leadbot-color-surface));
+    color: var(--leadbot-primary);
+    border-radius: var(--leadbot-radius-pill);
+    padding: 8px 14px;
+    font-size: var(--leadbot-font-size-sm);
+    font-family: inherit;
+    font-weight: 500;
+    line-height: 1.4;
+    cursor: pointer;
+    transition: background var(--leadbot-duration-fast) var(--leadbot-ease-interactive), border-color var(--leadbot-duration-fast) var(--leadbot-ease-interactive);
+  }
+  .leadbot-components .leadbot-buttons-btn:hover {
+    background: color-mix(in srgb, var(--leadbot-primary) 8%, var(--leadbot-color-surface));
+    border-color: var(--leadbot-primary);
+  }
+  @keyframes fadeSlide {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+  @keyframes subtle-pulse {
+    0%, 100% {
+      transform: scale(1);
+      opacity: 1;
+    }
+    50% {
+      transform: scale(1.1);
+      opacity: 0.8;
+    }
+  }
+  @keyframes leadbot-datepicker-pop {
+    from {
+      opacity: 0;
+      transform: scale(0.95);
+    }
+    to {
+      opacity: 1;
+      transform: scale(1);
+    }
+  }
+  .leadbot-flow {
+    width: 100%;
+    --leadbot-flow-align: flex-start;
+    /* ==========================================================================
+       Base Classes (composable)
+       File: Used across multiple step renderers
+       ========================================================================== */
+    /* Card base - apply to message bubbles, forms, embeds
+       Used in: message_step.js, base_form_step.js, html_embed_step.js */
+  }
+  .leadbot-flow .leadbot-card {
+    position: relative;
+    background: var(--leadbot-gradient-card);
+    border-radius: var(--leadbot-radius-card);
+    border: var(--leadbot-border-light);
+    box-shadow: var(--leadbot-shadow-sm);
+    padding: var(--leadbot-spacing-card);
+    max-width: var(--leadbot-flow-max-width);
+    font-size: 14px;
+    color: var(--leadbot-color-text);
+    line-height: 1.5;
+    box-sizing: border-box;
+    word-wrap: break-word;
+    overflow-wrap: break-word;
+    animation: slideInCard var(--leadbot-duration-normal) var(--leadbot-ease-appear) backwards;
+  }
+  @keyframes slideInCard {
+    from {
+      opacity: 0;
+      transform: translate(12px, 8px);
+    }
+    to {
+      opacity: 1;
+      transform: translate(0, 0);
+    }
+  }
+  .leadbot-flow {
+    /* V1-style card modifiers */
+  }
+  .leadbot-flow .leadbot-card--has-pwrdby {
+    padding-bottom: 8px;
+  }
+  .leadbot-flow {
+    /* Title row (Name → Company) */
+  }
+  .leadbot-flow .leadbot-title-row {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 6px;
+    margin-bottom: 8px;
+    font-size: 13px;
+    font-weight: 500;
+    color: var(--leadbot-color-text-muted);
+    max-width: 100%;
+    min-width: 0;
+    row-gap: 2px;
+  }
+  .leadbot-flow .leadbot-title-row__name {
+    color: var(--leadbot-primary);
+    font-weight: 500;
+    flex: 0 1 auto;
+    max-width: 100%;
+    min-width: 0;
+    overflow-wrap: break-word;
+  }
+  .leadbot-flow .leadbot-title-row__arrow {
+    width: 15px;
+    height: 15px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex: 0 0 15px;
+  }
+  .leadbot-flow .leadbot-title-row__arrow svg {
+    width: 10px;
+    height: 10px;
+    fill: #9ca3af;
+  }
+  .leadbot-flow .leadbot-title-row__company {
+    color: #374151;
+    flex: 0 1 auto;
+    font-weight: 600;
+    max-width: 100%;
+    min-width: 0;
+    overflow-wrap: break-word;
+  }
+  .leadbot-flow {
+    /* Card content */
+  }
+  .leadbot-flow .leadbot-card__content {
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 1.5;
+    color: var(--leadbot-color-text);
+  }
+  .leadbot-flow .leadbot-card__content p {
+    margin: 0 0 12px 0;
+  }
+  .leadbot-flow .leadbot-card__content p:last-child {
+    margin-bottom: 0;
+  }
+  .leadbot-flow .leadbot-card__content strong {
+    font-weight: 600;
+    color: #374151;
+  }
+  .leadbot-flow .leadbot-card__content a {
+    color: var(--leadbot-primary);
+    text-decoration: underline;
+  }
+  .leadbot-flow .leadbot-card__content a:hover {
+    opacity: 0.8;
+  }
+  .leadbot-flow {
+    /* Inline form content inside card */
+  }
+  .leadbot-flow .leadbot-card__inline-form {
+    margin-top: 12px;
+  }
+  .leadbot-flow {
+    /* Button group sibling step styling */
+  }
+  .leadbot-flow .leadbot-step-buttons {
+    margin-top: 0;
+  }
+  .leadbot-flow {
+    /* ==========================================================================
+       Message Row & Avatar
+       File: src/steps/message_step.js
+       Classes: leadbot-message-row, leadbot-floating-avatar, leadbot-online-dot
+       ========================================================================== */
+  }
+  .leadbot-flow .leadbot-message-row {
+    display: flex;
+    align-items: flex-start;
+    gap: 8px;
+    margin-bottom: 4px;
+    flex-direction: row;
+  }
+  .leadbot-flow .leadbot-message-row.leadbot-message-has-avatar {
+    align-items: flex-start;
+  }
+  .leadbot-flow .leadbot-left .leadbot-message-row {
+    flex-direction: row-reverse;
+  }
+  .leadbot-flow .leadbot-right .leadbot-message-row {
+    flex-direction: row;
+  }
+  .leadbot-flow .leadbot-floating-avatar {
+    position: relative;
+    width: 54px;
+    height: 54px;
+    border-radius: 50%;
+    overflow: visible;
+    background: #f0f0f0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: 2px solid #fff;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 4px 10px rgba(0, 0, 0, 0.1);
+    flex-shrink: 0;
+    margin: 0;
+  }
+  .leadbot-flow .leadbot-floating-avatar img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    border-radius: 50%;
+  }
+  .leadbot-flow .leadbot-avatar-fallback {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--leadbot-primary);
+  }
+  .leadbot-flow .leadbot-avatar-fallback svg {
+    width: 65%;
+    height: 65%;
+  }
+  .leadbot-flow .leadbot-online-dot {
+    position: absolute;
+    top: -2px;
+    right: -3px;
+    width: 12px;
+    height: 12px;
+    background-color: #4bc24f;
+    border-radius: 50%;
+    border: 2px solid #fff;
+    z-index: 10;
+    animation: subtle-pulse 2s var(--leadbot-ease-loop) infinite;
+  }
+  .leadbot-flow {
+    /* ==========================================================================
+       Card Components (consolidated)
+       Files: message_step.js, base_form_step.js, html_embed_step.js, whatsapp_step.js
+       Base class: leadbot-card (see Base Classes section)
+       Specific: leadbot-message-bubble, leadbot-form, leadbot-callback-form,
+                 leadbot-email-request-form, leadbot-whatsapp-form, leadbot-html-embed
+       ========================================================================== */
+  }
+  .leadbot-flow .leadbot-message-bubble,
+  .leadbot-flow .leadbot-callback-form,
+  .leadbot-flow .leadbot-email-request-form,
+  .leadbot-flow .leadbot-whatsapp-form,
+  .leadbot-flow .leadbot-html-embed,
+  .leadbot-flow .leadbot-form {
+    background: var(--leadbot-gradient-card);
+    border-radius: var(--leadbot-radius-card);
+    border: var(--leadbot-border-light);
+    box-shadow: var(--leadbot-shadow-sm);
+    padding: var(--leadbot-spacing-card);
+    max-width: var(--leadbot-flow-max-width);
+    font-size: 14px;
+    color: var(--leadbot-color-text);
+    line-height: 1.5;
+    box-sizing: border-box;
+    word-wrap: break-word;
+    overflow-wrap: break-word;
+  }
+  .leadbot-flow .leadbot-callback-form,
+  .leadbot-flow .leadbot-email-request-form,
+  .leadbot-flow .leadbot-whatsapp-form,
+  .leadbot-flow .leadbot-form {
+    width: var(--leadbot-flow-max-width);
+  }
+  .leadbot-flow .leadbot-callback-form,
+  .leadbot-flow .leadbot-email-request-form,
+  .leadbot-flow .leadbot-form {
+    display: flex;
+    flex-direction: column;
+    max-height: calc(var(--leadbot-available-height, 100vh) - 240px);
+    min-height: 0;
+    overflow: hidden;
+    padding: 0;
+  }
+  .leadbot-flow .leadbot-message-bubble {
+    font-weight: 400;
+  }
+  .leadbot-flow .leadbot-html-embed {
+    background: none;
+    border: none;
+    box-shadow: none;
+    padding: 0;
+  }
+  .leadbot-flow {
+    /* 66px = 42px avatar + 8px gap + 16px padding */
+  }
+  .leadbot-flow .leadbot-right .leadbot-html-embed {
+    margin-left: 66px;
+  }
+  .leadbot-flow .leadbot-left .leadbot-html-embed {
+    margin-right: 66px;
+  }
+  .leadbot-flow .leadbot-form {
+    box-sizing: border-box;
+    pointer-events: auto;
+  }
+  .leadbot-flow .leadbot-form * {
+    pointer-events: auto;
+  }
+  .leadbot-flow .leadbot-bubble-whatsapp {
+    background: #e5f6ed;
+    color: #2563eb;
+  }
+  .leadbot-flow .leadbot-bubble-thankyou {
+    background: #f3f3f3;
+    color: #2563eb;
+  }
+  .leadbot-flow {
+    /* ==========================================================================
+       Options & Next Steps
+       File: src/steps/button_step.js, src/widget.js
+       Classes: leadbot-options, leadbot-next-steps, leadbot-option-btn
+       ========================================================================== */
+  }
+  .leadbot-flow .leadbot-options {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    /* Widget panel hugs the right edge; an embedded flow sets the token to
+       flex-start (see @leadbot/components `_flow.scss`). `--leadbot-flow-options-justify`
+       overrides just the button row (e.g. space-evenly) without moving the cards. */
+    justify-content: var(--leadbot-flow-options-justify, var(--leadbot-flow-align, flex-end));
+    gap: 8px;
+    background: none;
+    max-width: var(--leadbot-flow-max-width);
+  }
+  .leadbot-flow .leadbot-right .leadbot-options {
+    justify-content: flex-end;
+  }
+  .leadbot-flow .leadbot-left .leadbot-options {
+    justify-content: flex-start;
+  }
+  .leadbot-flow .leadbot-next-steps {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    padding: 0;
+    opacity: 0;
+    max-height: 0;
+    overflow: hidden;
+    align-items: var(--leadbot-flow-align, flex-start);
+  }
+  .leadbot-flow .leadbot-right .leadbot-next-steps {
+    align-items: flex-end;
+  }
+  .leadbot-flow .leadbot-next-steps-animate {
+    animation: slideInNextSteps var(--animation-duration, 300ms) var(--leadbot-ease-appear) forwards;
+    overflow: visible;
+  }
+  .leadbot-flow {
+    /* ==========================================================================
+       Option Buttons
+       ========================================================================== */
+  }
+  .leadbot-flow .leadbot-option-btn {
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    background: var(--btn-bg, var(--leadbot-primary));
+    color: var(--btn-color, #fff);
+    border: 1px solid var(--btn-bg, var(--leadbot-primary));
+    padding: 8px 16px;
+    border-radius: var(--leadbot-radius-md);
+    font-size: 14px;
+    cursor: pointer;
+    transition: box-shadow var(--leadbot-duration-fast) var(--leadbot-ease-interactive), transform var(--leadbot-duration-fast) var(--leadbot-ease-interactive);
+    box-shadow: var(--leadbot-shadow-sm);
+    position: relative;
+    max-width: var(--leadbot-flow-max-width);
+    /* Set --leadbot-flow-option-grow to 1 to let buttons fill the row. */
+    flex: var(--leadbot-flow-option-grow, 0) 1 auto;
+    line-height: 1.4;
+    white-space: normal;
+    word-wrap: break-word;
+    overflow-wrap: break-word;
+    box-sizing: border-box;
+  }
+  .leadbot-flow .leadbot-option-btn strong {
+    font-weight: 700;
+  }
+  .leadbot-flow .leadbot-option-btn-icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    margin-right: 8px;
+    width: 16px;
+    height: 16px;
+    flex-shrink: 0;
+  }
+  .leadbot-flow .leadbot-option-btn-icon svg {
+    width: 100%;
+    height: 100%;
+  }
+  .leadbot-flow .leadbot-option-btn-icon-badge {
+    width: 22px;
+    height: 22px;
+    border-radius: 50%;
+    background: var(--leadbot-primary);
+    color: #fff;
+  }
+  .leadbot-flow .leadbot-option-btn-icon-badge svg {
+    width: 12px;
+    height: 12px;
+  }
+  .leadbot-flow .leadbot-option-btn:hover {
+    box-shadow: var(--leadbot-shadow-md);
+    transform: translateY(-2px);
+  }
+  .leadbot-flow {
+    /* Secondary buttons (white background) */
+  }
+  .leadbot-flow .leadbot-option-btn-secondary {
+    background: #fff;
+    color: #161615;
+    border-color: #f4f3f1;
+  }
+  .leadbot-flow .leadbot-option-disabled {
+    opacity: 0.5;
+    cursor: not-allowed !important;
+    pointer-events: none;
+  }
+  .leadbot-flow {
+    /* History indicator - shows which option the user selected */
+  }
+  .leadbot-flow .leadbot-option-selected {
+    background: #7a7a79 !important;
+    color: #fff !important;
+    border-color: #7a7a79 !important;
+  }
+  .leadbot-flow .leadbot-datepicker {
+    position: relative;
+  }
+  .leadbot-flow .leadbot-datepicker.has-clear .leadbot-datepicker-input {
+    padding-right: 38px;
+  }
+  .leadbot-flow .leadbot-datepicker-icon {
+    position: absolute;
+    top: 50%;
+    left: 12px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #888;
+    pointer-events: none;
+    transform: translateY(-50%);
+  }
+  .leadbot-flow .leadbot-field input.leadbot-datepicker-input {
+    padding-left: 38px;
+    cursor: pointer;
+    caret-color: transparent;
+  }
+  .leadbot-flow .leadbot-datepicker-clear {
+    position: absolute;
+    top: 50%;
+    right: 8px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 24px;
+    height: 24px;
+    padding: 0;
+    border: none;
+    border-radius: 50%;
+    background: transparent;
+    color: #777;
+    font-size: 18px;
+    line-height: 1;
+    transform: translateY(-50%);
+    cursor: pointer;
+  }
+  .leadbot-flow .leadbot-datepicker-clear:hover {
+    background: #f0f0f0;
+    color: #333;
+  }
+  .leadbot-flow .leadbot-datepicker-panel,
+  .leadbot-flow .leadbot-timepicker-panel {
+    position: fixed;
+    z-index: 30;
+    box-sizing: border-box;
+    padding: 10px;
+    border: 1px solid #ddd;
+    border-radius: var(--leadbot-radius-md);
+    background: #fff;
+    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18);
+    transform-origin: top center;
+    animation: leadbot-datepicker-pop var(--leadbot-duration-fast) var(--leadbot-ease-appear) backwards;
+  }
+  .leadbot-flow .leadbot-datepicker-panel.is-above,
+  .leadbot-flow .leadbot-timepicker-panel.is-above {
+    transform-origin: bottom center;
+  }
+  .leadbot-flow .leadbot-datepicker-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 6px;
+  }
+  .leadbot-flow .leadbot-datepicker-month {
+    padding: 4px 10px;
+    border: none;
+    border-radius: var(--leadbot-radius-sm);
+    background: none;
+    font-size: 14px;
+    font-family: inherit;
+    font-weight: 600;
+    color: inherit;
+    text-transform: capitalize;
+    cursor: pointer;
+  }
+  .leadbot-flow .leadbot-datepicker-month:hover {
+    background: #f0f0f0;
+  }
+  .leadbot-flow .leadbot-datepicker-years {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 2px;
+  }
+  .leadbot-flow .leadbot-datepicker-year {
+    padding: 10px 0;
+    border: none;
+    border-radius: var(--leadbot-radius-sm);
+    background: none;
+    font-size: 13px;
+    font-family: inherit;
+    font-variant-numeric: tabular-nums;
+    color: inherit;
+    text-align: center;
+    cursor: pointer;
+  }
+  .leadbot-flow .leadbot-datepicker-year:hover {
+    background: #f0f0f0;
+  }
+  .leadbot-flow .leadbot-datepicker-year.is-selected {
+    background: var(--leadbot-primary);
+    color: #fff;
+    font-weight: 600;
+  }
+  .leadbot-flow .leadbot-datepicker-nav {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 6px;
+    border: none;
+    border-radius: var(--leadbot-radius-sm);
+    background: none;
+    color: #555;
+    cursor: pointer;
+  }
+  .leadbot-flow .leadbot-datepicker-nav:hover {
+    background: #f0f0f0;
+  }
+  .leadbot-flow .leadbot-datepicker-weekdays,
+  .leadbot-flow .leadbot-datepicker-grid {
+    display: grid;
+    grid-template-columns: repeat(7, 1fr);
+    gap: 2px;
+  }
+  .leadbot-flow .leadbot-datepicker-weekdays span {
+    padding: 4px 0;
+    font-size: 11px;
+    color: #888;
+    text-align: center;
+    text-transform: capitalize;
+  }
+  .leadbot-flow .leadbot-datepicker-day {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    aspect-ratio: 1;
+    border: none;
+    border-radius: 50%;
+    background: none;
+    font-size: 13px;
+    font-family: inherit;
+    color: inherit;
+    cursor: pointer;
+  }
+  .leadbot-flow .leadbot-datepicker-day:hover {
+    background: #f0f0f0;
+  }
+  .leadbot-flow .leadbot-datepicker-day.is-today {
+    font-weight: 700;
+    color: var(--leadbot-primary);
+  }
+  .leadbot-flow .leadbot-datepicker-day.is-selected {
+    background: var(--leadbot-primary);
+    color: #fff;
+  }
+  .leadbot-flow .leadbot-datepicker-blank {
+    display: block;
+    aspect-ratio: 1;
+  }
+  .leadbot-flow .leadbot-timepicker {
+    position: relative;
+  }
+  .leadbot-flow .leadbot-timepicker-icon {
+    position: absolute;
+    top: 50%;
+    left: 12px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #888;
+    pointer-events: none;
+    transform: translateY(-50%);
+  }
+  .leadbot-flow .leadbot-field input.leadbot-timepicker-input {
+    padding-left: 38px;
+    cursor: pointer;
+    caret-color: transparent;
+  }
+  .leadbot-flow .leadbot-timepicker.has-clear .leadbot-timepicker-input {
+    padding-right: 38px;
+  }
+  .leadbot-flow .leadbot-timepicker-clear {
+    position: absolute;
+    top: 50%;
+    right: 8px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 24px;
+    height: 24px;
+    padding: 0;
+    border: none;
+    border-radius: 50%;
+    background: transparent;
+    color: #777;
+    font-size: 18px;
+    line-height: 1;
+    transform: translateY(-50%);
+    cursor: pointer;
+  }
+  .leadbot-flow .leadbot-timepicker-clear:hover {
+    background: #f0f0f0;
+    color: #333;
+  }
+  .leadbot-flow .leadbot-timepicker-columns {
+    display: flex;
+    align-items: stretch;
+    gap: 4px;
+    height: 180px;
+  }
+  .leadbot-flow .leadbot-timepicker-columns-separator {
+    display: flex;
+    align-items: center;
+    color: #bbb;
+    font-size: 16px;
+    font-weight: 700;
+  }
+  .leadbot-flow .leadbot-timepicker-column {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    gap: 2px;
+    overflow-y: auto;
+    scroll-behavior: smooth;
+    scrollbar-width: thin;
+  }
+  .leadbot-flow .leadbot-timepicker-column::-webkit-scrollbar {
+    width: 6px;
+  }
+  .leadbot-flow .leadbot-timepicker-column::-webkit-scrollbar-thumb {
+    border-radius: 3px;
+    background: #d8d8d8;
+  }
+  .leadbot-flow .leadbot-timepicker-option {
+    flex: 0 0 auto;
+    padding: 8px 0;
+    border: none;
+    border-radius: var(--leadbot-radius-sm);
+    background: none;
+    font-size: 14px;
+    font-family: inherit;
+    font-variant-numeric: tabular-nums;
+    color: inherit;
+    text-align: center;
+    cursor: pointer;
+  }
+  .leadbot-flow .leadbot-timepicker-option:hover {
+    background: #f0f0f0;
+  }
+  .leadbot-flow .leadbot-timepicker-option.is-selected {
+    background: var(--leadbot-primary);
+    color: #fff;
+    font-weight: 600;
+  }
+  .leadbot-flow {
+    /* ==========================================================================
+       Embed Content
+       ========================================================================== */
+  }
+  .leadbot-flow .leadbot-embed-content {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: relative;
+    min-height: 300px;
+    border-radius: var(--leadbot-radius-card);
+    background: linear-gradient(110deg, #f0f0f0 8%, #f8f8f8 18%, #f0f0f0 33%);
+    background-size: 200% 100%;
+    animation: leadbot-embed-shimmer 1.5s linear infinite;
+  }
+  .leadbot-flow .leadbot-embed-loaded .leadbot-embed-content {
+    background: none;
+    animation: none;
+    min-height: 0;
+  }
+  @keyframes leadbot-embed-shimmer {
+    0% {
+      background-position: 200% 0;
+    }
+    100% {
+      background-position: -200% 0;
+    }
+  }
+  .leadbot-flow .leadbot-embed-content iframe {
+    width: 100%;
+    min-height: 300px;
+    border-radius: var(--leadbot-radius-card);
+    border: none;
+    box-shadow: var(--leadbot-shadow-sm);
+    opacity: 0;
+    transition: opacity var(--leadbot-duration-normal) var(--leadbot-ease-appear);
+  }
+  .leadbot-flow .leadbot-embed-loaded .leadbot-embed-content iframe {
+    opacity: 1;
+  }
+  .leadbot-flow .leadbot-embed-content * {
+    max-width: 100%;
+  }
+  .leadbot-flow {
+    /* ==========================================================================
+       Powered By
+       ========================================================================== */
+  }
+  .leadbot-flow .leadbot-powered-by {
+    font-size: 10px;
+    margin-top: 16px;
+    font-family: inherit;
+    font-weight: 400;
+    padding: 0;
+    width: 100%;
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    gap: 4px;
+  }
+  .leadbot-flow .leadbot-powered-by--right {
+    justify-content: flex-end;
+  }
+  .leadbot-flow .leadbot-powered-by--center {
+    justify-content: center;
+  }
+  .leadbot-flow .leadbot-powered-by a {
+    display: inline-flex;
+    align-items: center;
+    gap: 3px;
+    transition: opacity 0.2s ease;
+    text-decoration: none;
+    color: #111827;
+  }
+  .leadbot-flow .leadbot-powered-by a:hover {
+    opacity: 0.7;
+  }
+  .leadbot-flow .leadbot-powered-by > span:not(.leadbot-powered-by__logo) {
+    color: #9ca3af;
+  }
+  .leadbot-flow .leadbot-powered-by__logo {
+    display: inline-flex;
+    align-items: center;
+    line-height: 0;
+    color: #111827;
+  }
+  .leadbot-flow .leadbot-powered-by__logo svg {
+    height: 14px;
+    width: auto;
+  }
+  .leadbot-flow .leadbot-powered-by svg,
+  .leadbot-flow .leadbot-powered-by img {
+    display: block;
+  }
+  .leadbot-flow .leadbot-powered-by img {
+    height: 20px;
+    width: auto;
+  }
+  .leadbot-flow .leadbot-steps-container {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: var(--leadbot-flow-align);
+    gap: 12px;
+    width: 100%;
+    box-sizing: border-box;
+  }
+  .leadbot-flow .leadbot-step-wrapper {
+    display: flex;
+    flex-direction: column;
+    align-items: var(--leadbot-flow-align);
+    gap: 12px;
+  }
+  .leadbot-flow .leadbot-message-row > .leadbot-card {
+    flex: 1 1 auto;
+  }
+  .leadbot-flow .leadbot-step-current {
+    z-index: 2;
+  }
+  .leadbot-flow .leadbot-step-typing {
+    display: inline-flex;
+    align-items: center;
+    padding: 10px;
+    background: #b0b8c4;
+    border-radius: var(--leadbot-radius-pill);
+    box-shadow: var(--leadbot-shadow-sm);
+    animation: fadeSlide var(--leadbot-duration-fast) var(--leadbot-ease-appear) backwards;
+  }
+  .leadbot-flow .leadbot-step-typing-dots {
+    display: flex;
+    gap: 5px;
+    align-items: center;
+  }
+  .leadbot-flow .leadbot-step-typing-dots span {
+    width: 6px;
+    height: 6px;
+    background: #fff;
+    border-radius: 50%;
+    animation: leadbot-typing-bounce 1.4s infinite var(--leadbot-ease-loop);
+  }
+  .leadbot-flow .leadbot-step-typing-dots span:nth-child(1) {
+    animation-delay: -0.32s;
+  }
+  .leadbot-flow .leadbot-step-typing-dots span:nth-child(2) {
+    animation-delay: -0.16s;
+  }
+}