& {
  .lbaic {
    &-trigger {
      position: relative;
      width: var(--lbaic-trigger-size);
      height: var(--lbaic-trigger-size);
      z-index: 1000;
      transition: opacity 0.2s ease;

      &.lbaic-trigger-disabled {
        opacity: 0.75;

        .lbaic-trigger-in {
          cursor: default;

          &:hover {
            --lbaic-trigger-in-scale: 1;
          }

          &:active {
            --lbaic-trigger-in-scale: 1;
            --lbaic-trigger-active: 0;
          }
        }

        .lbaic-trigger-hover {
          opacity: 0;
        }
      }

      &-in {
        position: relative;
        width: 100%;
        height: 100%;
        transform: var(--lbaic-trigger-in-transform);
        opacity: var(--lbaic-trigger-in-opacity);
        animation: var(--lbaic-trigger-in-animation);
        z-index: 10;

        &:hover {
          --lbaic-trigger-in-scale: 1.1;
        }

        &:active {
          --lbaic-trigger-active: 1;
          --lbaic-trigger-in-scale: .9;
        }
      }

      &-icon {
        position: relative;
        width: 100%;
        height: 100%;
        display: block;
        transform: scale(var(--lbaic-trigger-in-scale, 1));
        transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1);

        &-bg, &-in {
          position: absolute;
          top: 0;
          right: 0;
          bottom: 0;
          left: 0;
          margin: auto;
        }

        &-bg {
          width: 100%;
          height: 100%;
          display: block;
        }

        &-in {
          width: 32px;
          height: 32px;
          display: block;
          transition: transform 240ms cubic-bezier(0.4, 0, 0.2, 1), opacity 240ms cubic-bezier(0.4, 0, 0.2, 1);
        }

        &-chat {
          opacity: 1;
          transform: translateX(0);

          &.lbaic-trigger-icon-main {
            transform: var(--lbaic-trigger-icon-in, translateX(0));
          }

          &.lbaic-trigger-icon-hidden {
            opacity: 0;
            transform: translateX(-10px);
            pointer-events: none;
          }
        }

        &-close {
          opacity: 0;
          transform: translateX(10px);
          pointer-events: none;

          &:not(.lbaic-trigger-icon-hidden) {
            opacity: 1;
            transform: translateX(0);
            pointer-events: auto;
          }

          &.lbaic-trigger-icon-hidden {
            opacity: 0;
            transform: translateX(10px);
            pointer-events: none;
          }
        }

        &-arrow {
          opacity: 1;
          transform: translateX(0);
          pointer-events: auto;

          &.lbaic-trigger-icon-hidden {
            opacity: 0;
            transform: translateX(10px);
            pointer-events: none;
          }
        }

        &-main {
          transform: var(--lbaic-trigger-icon-in);
          transition: transform 240ms ease-in-out, opacity 240ms cubic-bezier(0.4, 0, 0.2, 1);
        }
      }

      &-hover {
        opacity: var(--lbaic-trigger-hover, 0);
        transition: opacity 180ms var(--lbaic-ts-tf);
      }

      &-active {
        opacity: var(--lbaic-trigger-active, 0);
        transition: opacity 180ms var(--lbaic-ts-tf);
      }

      &-list {
        position: absolute;
        right: 0;
        bottom: 100%;
        left: 0;
      }

      &-item {
        position: relative;
        padding-bottom: 10px;
        z-index: 2;

        &-label {
          position: absolute;
          top: 50%;
          right: var(--lbaic-trigger-label-right, unset);
          left: var(--lbaic-trigger-label-left, unset);
          padding: 8px 16px;
          background-color: var(--lbaic-black-100);
          border: 1px solid rgba(var(--lbaic-white-rgb), 0.2);
          border-radius: 4px;
          font-size: var(--lbaic-fs-14);
          font-weight: var(--lbaic-fw-500);
          color: var(--lbaic-white-100);
          text-shadow: var(--lbaic-trigger-label-shadow);
          white-space: nowrap;
          transform: var(--lbaic-trigger-label-transform-default, var(--lbaic-trigger-label-transform));
          opacity: var(--lbaic-trigger-label-opacity, 0);
          transition: opacity 180ms ease-in-out, transform 180ms ease-in-out;
          pointer-events: none;
        }

        &-in, &-in:not(:hover):not(:active):not(.has-background) {
          position: relative;
          width: 52px;
          height: 52px;
          display: block;
          padding: 6px;
          margin: auto;
          background-color: var(--lbaic-trigger-item-color);
          border-radius: 50%;
          box-shadow: var(--lbaic-trigger-shadow);
        }

        &-in {
          &:before, &:after {
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            border-radius: inherit;
            opacity: 0;
            transition: opacity 180ms var(--lbaic-ts-tf);
            z-index: 1;
          }

          &:before {
            background-color: var(--lbaic-white-100);
          }

          &:after {
            background-color: var(--lbaic-black-100);
          }

          &:hover {
            &:before {
              opacity: 0.2;
            }
          }

          &:active {
            &:after {
              opacity: 0.2;
            }
          }
        }

        &-icon {
          position: relative;
          width: 32px;
          height: 32px;
          display: block;
          margin: auto;
          z-index: 2;
        }

        &:hover {
          --lbaic-trigger-label-transform-default: var(--lbaic-trigger-label-transform-hover);
          --lbaic-trigger-label-opacity: 1;
        }
      }

      &-unseen-messages {
        position: absolute;
        top: 0;
        right: 0;
        width: 14px;
        height: 14px;
        padding: 2px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background-color: var(--lbaic-trigger-color);
        z-index: 1;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);

        &-count {
          font-size: var(--lbaic-fs-8);
          line-height: var(--lbaic-lh-8);
          color: var(--lbaic-white-100);
        }
      }
    }

    &-chatbot-icon-widgets {
      position: absolute;
      bottom: 100%;
      left: var(--lbaic-chatbot-icon-widgets-left);
      right: var(--lbaic-chatbot-icon-widgets-right);
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      gap: 8px;
      margin-bottom: 12px;
      pointer-events: none;
      max-width: 420px;

      @include media-max(452) {
        width: calc(100vw - 32px);
      }

      &.lbaic-light {
        // Message
        --lbaic-chatbot-icon-message-widget-bubble-bg: #ffffff;
        --lbaic-chatbot-icon-message-widget-bubble-border: 1px solid rgba(69, 140, 246, 0.1);
        --lbaic-chatbot-icon-message-widget-bubble-color: #1e2939;
        // Dismiss
        --lbaic-chatbot-icon-widget-dismiss-bg: #f3f4f6;
        --lbaic-chatbot-icon-widget-dismiss-hover-bg: #e5e7eb;
        --lbaic-chatbot-icon-widget-dismiss-svg-fill: #4b5563;
        // Typing Indicator
        --lbaic-chatbot-icon-typing-dot-color: #9ca3af;
        // Lead capture (Figma light)
        --lbaic-chatbot-icon-lead-capture-bg: #ffffff;
        --lbaic-chatbot-icon-lead-capture-border: 1px solid rgba(69, 140, 246, 0.1);
        --lbaic-chatbot-icon-lead-capture-title-color: #1e2939;
        --lbaic-chatbot-icon-lead-capture-desc-color: #4b5563;
        --lbaic-chatbot-icon-lead-capture-label-color: #374151;
        --lbaic-chatbot-icon-lead-capture-input-bg: #f9fafb;
        --lbaic-chatbot-icon-lead-capture-input-border: 1px solid #e5e7eb;
        --lbaic-chatbot-icon-lead-capture-input-color: #111827;
        --lbaic-chatbot-icon-lead-capture-input-placeholder: #9ca3af;
        --lbaic-chatbot-icon-lead-capture-input-focus-bg: #ffffff;
      }

      &.lbaic-dark {
        // Message
        --lbaic-chatbot-icon-message-widget-bubble-bg: #212121;
        --lbaic-chatbot-icon-message-widget-bubble-border: 1px solid rgba(69, 140, 246, 0.15);
        --lbaic-chatbot-icon-message-widget-bubble-color: #f3f4f6;
        // Dismiss
        --lbaic-chatbot-icon-widget-dismiss-bg: #3d3d5c;
        --lbaic-chatbot-icon-widget-dismiss-hover-bg: #4d4d6c;
        --lbaic-chatbot-icon-widget-dismiss-svg-fill: #d1d5db;
        // Typing Indicator
        --lbaic-chatbot-icon-typing-dot-color: #9ca3af;
        // Lead capture (Figma dark)
        --lbaic-chatbot-icon-lead-capture-bg: #212121;
        --lbaic-chatbot-icon-lead-capture-border: 1px solid rgba(69, 140, 246, 0.15);
        --lbaic-chatbot-icon-lead-capture-title-color: #f3f4f6;
        --lbaic-chatbot-icon-lead-capture-desc-color: #9ca3af;
        --lbaic-chatbot-icon-lead-capture-label-color: #d1d5db;
        --lbaic-chatbot-icon-lead-capture-input-bg: #2a2a2a;
        --lbaic-chatbot-icon-lead-capture-input-border: 1px solid #3a3a3a;
        --lbaic-chatbot-icon-lead-capture-input-color: #f3f4f6;
        --lbaic-chatbot-icon-lead-capture-input-placeholder: #6b7280;
        --lbaic-chatbot-icon-lead-capture-input-focus-bg: #303030;
      }

      // Typing Indicator
      .lbaic-chatbot-icon-typing-indicator {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        margin-bottom: 8px;
        pointer-events: auto;
        gap: 8px;
        animation: lbaic-chatbot-icon-slide-up-bounce 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) both;

        &-content {
          height: 38px;
          display: flex;
          align-items: center;
          gap: 3px;
          padding: 10px 14px;
          background-color: var(--lbaic-chatbot-icon-message-widget-bubble-bg);
          border: var(--lbaic-chatbot-icon-message-widget-bubble-border);
          border-radius: 16px;
          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        }

        &-dot {
          width: 5px;
          height: 5px;
          border-radius: 50%;
          background-color: var(--lbaic-chatbot-icon-typing-dot-color);
          animation: typingDot 1.4s ease-in-out infinite;

          &:nth-child(2) {
            animation-delay: 0.2s;
          }

          &:nth-child(3) {
            animation-delay: 0.4s;
          }
        }
      }

      .lbaic-chatbot-icon-typing-avatar {
        width: 24px;
        height: 24px;
        border-radius: 50%;
        background-color: var(--lbaic-trigger-color);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        animation: lbaic-chatbot-icon-avatar-pulse 2s ease-in-out 1s infinite;

        svg {
          width: 16px;
          height: 16px;
          fill: var(--lbaic-white-100);
          color: var(--lbaic-white-100);
        }
      }

      .lbaic-chatbot-icon-widget-group {
        pointer-events: auto;
        width: 100%;

        // Message groups: no bounce (up-down) – only mini slide-up on each message widget
        &.lbaic-chatbot-icon-widget-group-message {
          animation: none;
        }

        &.lbaic-chatbot-icon-widget-group-lead_capture {
          animation: none;
        }

        &.lbaic-chatbot-icon-widget-group-prompt {
          animation: none;

          // Prompt group delays: shorter gaps between groups
          &:nth-child(2) .lbaic-chatbot-icon-prompt-widget {
            @for $i from 1 through 10 {
              &:nth-child(#{$i}) {
                animation-delay: 0.2s + ($i - 1) * 0.25s;
              }
            }
          }

          &:nth-child(4) .lbaic-chatbot-icon-prompt-widget {
            @for $i from 1 through 10 {
              &:nth-child(#{$i}) {
                animation-delay: 1.1s + ($i - 1) * 0.25s;
              }
            }
          }

          &:nth-child(6) .lbaic-chatbot-icon-prompt-widget {
            @for $i from 1 through 10 {
              &:nth-child(#{$i}) {
                animation-delay: 2s + ($i - 1) * 0.25s;
              }
            }
          }

          &:nth-child(8) .lbaic-chatbot-icon-prompt-widget {
            @for $i from 1 through 10 {
              &:nth-child(#{$i}) {
                animation-delay: 2.9s + ($i - 1) * 0.25s;
              }
            }
          }
        }

        .lbaic-chatbot-icon-message-group {
          display: flex;
          flex-direction: column;
          gap: 4px;

          .lbaic-chatbot-icon-message-widget {
            animation: lbaic-chatbot-icon-message-slide-up 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;

            @for $i from 1 through 6 {
              &:nth-child(#{$i}) {
                animation-delay: ($i - 1) * 0.08s;
              }
            }
          }
        }

        // Sync message widget mini slide with group delay (so 2nd/3rd message groups don't animate at 0s)
        &.lbaic-chatbot-icon-widget-group-message:nth-child(3) .lbaic-chatbot-icon-message-widget {
          @for $i from 1 through 6 {
            &:nth-child(#{$i}) {
              animation-delay: 0.65s + ($i - 1) * 0.08s;
            }
          }
        }

        &.lbaic-chatbot-icon-widget-group-message:nth-child(5) .lbaic-chatbot-icon-message-widget {
          @for $i from 1 through 6 {
            &:nth-child(#{$i}) {
              animation-delay: 1.5s + ($i - 1) * 0.08s;
            }
          }
        }

        &.lbaic-chatbot-icon-widget-group-message:nth-child(7) .lbaic-chatbot-icon-message-widget {
          @for $i from 1 through 6 {
            &:nth-child(#{$i}) {
              animation-delay: 2.4s + ($i - 1) * 0.08s;
            }
          }
        }

        &.lbaic-chatbot-icon-widget-group-message:nth-child(9) .lbaic-chatbot-icon-message-widget {
          @for $i from 1 through 6 {
            &:nth-child(#{$i}) {
              animation-delay: 3.3s + ($i - 1) * 0.08s;
            }
          }
        }

        .lbaic-chatbot-icon-prompt-group {
          display: flex;
          flex-direction: column;
          align-items: flex-end;
          gap: 8px;
          width: 100%;

          .lbaic-chatbot-icon-prompt-widget {
            @for $i from 1 through 10 {
              &:nth-child(#{$i}) {
                animation-delay: ($i - 1) * 0.25s;
              }
            }
          }
        }
      }

      .lbaic-chatbot-icon-widget-dismiss {
        --lbaic-button-bg: var(--lbaic-chatbot-icon-widget-dismiss-bg);
        --lbaic-button-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);

        position: absolute;
        top: -8px;
        left: var(--lbaic-chatbot-icon-widget-dismiss-left);
        right: var(--lbaic-chatbot-icon-widget-dismiss-right);
        width: 20px;
        height: 20px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.2s ease;
        z-index: 1;

        &:hover {
          background-color: var(--lbaic-chatbot-icon-widget-dismiss-hover-bg);
        }

        svg {
          width: 12px;
          height: 12px;
          color: var(--lbaic-chatbot-icon-widget-dismiss-svg-fill);
        }
      }

      // Lead capture widget (Figma ChatbotLeadCaptureWidget – near chatbot icon)
      .lbaic-chatbot-icon-lead-capture {
        position: relative;
        pointer-events: auto;
        animation: lbaic-chatbot-icon-slide-up-bounce 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) both;
        width: 280px;

        &-group {
          display: flex;
          flex-direction: column;
          align-items: flex-end;
          gap: 8px;
          width: 100%;
        }

        // Delay is set in JS (animationDelay) so lead_capture starts after previous groups’ animations

        .lbaic-chatbot-icon-lead-capture-container {
          padding: 20px;
          border-radius: 16px;
          box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
          background-color: var(--lbaic-chatbot-icon-lead-capture-bg);
          border: var(--lbaic-chatbot-icon-lead-capture-border);
        }

        .lbaic-chatbot-icon-lead-capture-header {
          margin-bottom: 16px;

          * {
            font-family: inherit;
          }
        }

        .lbaic-chatbot-icon-lead-capture-title {
          margin: 0 0 4px 0;
          font-size: var(--lbaic-fs-16);
          font-weight: var(--lbaic-fw-600);
          line-height: var(--lbaic-lh-24);
          color: var(--lbaic-chatbot-icon-lead-capture-title-color);
        }

        .lbaic-chatbot-icon-lead-capture-description {
          margin: 0;
          font-size: var(--lbaic-fs-12);
          line-height: var(--lbaic-lh-14);
          color: var(--lbaic-chatbot-icon-lead-capture-desc-color);

          strong, b {
            font-weight: var(--lbaic-fw-600, 600);
          }
        }

        .lbaic-chatbot-icon-lead-capture-form {
          display: flex;
          flex-direction: column;
          gap: 12px;
        }

        .lbaic-chatbot-icon-lead-capture-fields {
          display: flex;
          flex-direction: column;
          gap: 12px;
        }

        .lbaic-chatbot-icon-lead-capture-field {
          display: block;
        }

        .lbaic-chatbot-icon-lead-capture-label {
          display: block;
          margin-bottom: 6px;
          font-size: var(--lbaic-fs-12);
          font-weight: var(--lbaic-fw-500);
          color: var(--lbaic-chatbot-icon-lead-capture-label-color);
          cursor: pointer;
        }

        .lbaic-chatbot-icon-lead-capture-input {
          width: 100%;
          padding: 10px 12px;
          border-radius: 8px;
          font-size: var(--lbaic-fs-14);
          line-height: var(--lbaic-lh-20);
          outline: none;
          transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
          background-color: var(--lbaic-chatbot-icon-lead-capture-input-bg);
          border: var(--lbaic-chatbot-icon-lead-capture-input-border);
          color: var(--lbaic-chatbot-icon-lead-capture-input-color);
          box-sizing: border-box;

          &::placeholder {
            color: var(--lbaic-chatbot-icon-lead-capture-input-placeholder);
          }

          &:focus {
            border-color: var(--lbaic-main-color);
            background-color: var(--lbaic-chatbot-icon-lead-capture-input-focus-bg);
            box-shadow: 0 0 0 3px rgba(69, 140, 246, 0.1);
          }

          &.lbaic-chatbot-icon-lead-capture-input-invalid {
            border-color: var(--lbaic-red-100, #ef4444);
          }
        }

        .lbaic-chatbot-icon-lead-capture-submit, .lbaic-chatbot-icon-lead-capture-submit:not(:hover):not(:active):not(.has-background) {
          width: 100%;
          margin-top: 16px;
          padding: 12px 16px;
          border-radius: 8px;
          font-size: var(--lbaic-fs-14);
          font-weight: var(--lbaic-fw-600);
          color: var(--lbaic-white-100);
          background-color: var(--lbaic-main-color);
          border: none;
          cursor: pointer;
          transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
          box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
        }

        .lbaic-chatbot-icon-lead-capture-submit {
          &:hover:not(:disabled) {
            filter: brightness(0.95);
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
          }

          &:active:not(:disabled) {
            transform: scale(0.98);
          }

          &:disabled {
            opacity: 0.7;
            cursor: not-allowed;
          }
        }

        .lbaic-chatbot-icon-lead-capture-error {
          margin-top: 8px;
        }

        .lbaic-chatbot-icon-lead-capture-error-text {
          font-size: var(--lbaic-fs-13);
          line-height: var(--lbaic-lh-16);
          color: var(--lbaic-red-100, #ef4444);
        }

        > .lbaic-chatbot-icon-widget-dismiss {
          z-index: 20;
        }
      }

      // Shake animation when lead capture is required and user tries to open chat without completing
      .lbaic-chatbot-icon-widget-group .lbaic-chatbot-icon-lead-capture-group.lbaic-chatbot-icon-lead-capture-shake {
        animation: lbaic-chatbot-icon-lead-capture-shake 0.5s ease-in-out;
      }
    }

    &-chatbot-icon-message-widget {
      .lbaic-chatbot-icon-message-widget-content {
        display: flex;
        align-items: flex-start;
        justify-content: end;
        gap: 8px;
      }

      .lbaic-chatbot-icon-message-widget-avatar {
        width: 24px;
        height: 24px;
        border-radius: 50%;
        background-color: var(--lbaic-trigger-color);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        animation: lbaic-chatbot-icon-avatar-pulse 2s ease-in-out 1s infinite;

        svg {
          width: 16px;
          height: 16px;
          fill: var(--lbaic-white-100);
          color: var(--lbaic-white-100);
        }
      }

      .lbaic-chatbot-icon-message-widget-bubble {
        background-color: var(--lbaic-chatbot-icon-message-widget-bubble-bg);
        border: var(--lbaic-chatbot-icon-message-widget-bubble-border);
        padding: 10px 14px;
        width: max-content;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        transition: all 0.2s ease;
        position: relative;
        cursor: pointer;

        &:hover {
          filter: brightness(0.95);
        }
      }

      .lbaic-chatbot-icon-message-widget-text {
        color: var(--lbaic-chatbot-icon-message-widget-bubble-color);
        font-size: var(--lbaic-fs-14);
        font-weight: var(--lbaic-fw-400);
        line-height: var(--lbaic-lh-18);
        word-wrap: break-word;
        margin: 0;
      }
    }

    &-chatbot-icon-prompt-widget {
      animation: lbaic-chatbot-icon-prompt-slide-in-up 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
      width: 100%;

      .lbaic-chatbot-icon-prompt-widget-content {
        position: relative;
        transition: 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
        transform: translateY(0);
        display: flex;
        justify-content: end;

        &:hover {
          transform: scale(1.05);
        }

        &:active {
          transform: scale(0.95);
        }
      }

      .lbaic-chatbot-icon-prompt-widget-button {
        position: relative;
        padding: 6px 14px;
        border-radius: 9999px;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
        transition: 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
        cursor: pointer;
        background-color: var(--lbaic-main-color);
        width: max-content;
        max-width: 100%;

        &:hover {
          filter: brightness(0.85);
          box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }
      }

      .lbaic-chatbot-icon-prompt-widget-button-text {
        font-size: var(--lbaic-fs-12);
        font-weight: var(--lbaic-fw-500);
        line-height: var(--lbaic-fs-14);
        color: var(--lbaic-white-100);
      }
    }
  }

  @keyframes typingDot {
    0%, 60%, 100% {
      transform: translateY(0);
      opacity: 0.7;
    }
    30% {
      transform: translateY(-8px);
      opacity: 1;
    }
  }

  // Chatbot icon widgets – message/prompt animations
  @keyframes lbaic-chatbot-icon-slide-up-bounce {
    0% {
      opacity: 0;
      transform: translateY(32px);
    }
    60% {
      opacity: 1;
      transform: translateY(-4px);
    }
    80% {
      transform: translateY(2px);
    }
    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes lbaic-chatbot-icon-avatar-pulse {
    0%,
    100% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.15);
    }
  }

  // Mini slide-up for each message widget (Figma-style subtle up)
  @keyframes lbaic-chatbot-icon-message-slide-up {
    0% {
      opacity: 0;
      transform: translateY(8px);
    }
    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }

  // Vertical: prompts slide up from bottom (translateY(32px) → 0), 0.5s cubic-bezier, stagger 150ms
  @keyframes lbaic-chatbot-icon-prompt-slide-in-up {
    0% {
      opacity: 0;
      transform: translateY(32px);
    }
    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }

  // Lead capture widget – shake when required and user tries to open chat without completing
  @keyframes lbaic-chatbot-icon-lead-capture-shake {
    0%, 100% {
      transform: translateX(0);
    }
    10%, 30%, 50%, 70%, 90% {
      transform: translateX(-5px);
    }
    20%, 40%, 60%, 80% {
      transform: translateX(5px);
    }
  }
}

&.lbaic-right {
  --lbaic-chatbot-icon-widgets-right: 0;
  --lbaic-chatbot-icon-widgets-left: unset;
  --lbaic-chatbot-icon-widget-dismiss-right: -8px;
  --lbaic-chatbot-icon-widget-dismiss-left: unset;

  .lbaic-chatbot-icon-widgets {
    .lbaic-chatbot-icon-widget-group {
      .lbaic-chatbot-icon-message-group {
        .lbaic-chatbot-icon-message-widget {
          .lbaic-chatbot-icon-message-widget-bubble {
            border-radius: 16px 0 0 16px;
          }

          &:first-of-type {
            .lbaic-chatbot-icon-message-widget-bubble {
              border-top-right-radius: 16px;
            }
          }

          &:last-of-type {
            .lbaic-chatbot-icon-message-widget-bubble {
              border-bottom-right-radius: 16px;
            }
          }
        }
      }
    }
  }
}

&.lbaic-left {
  --lbaic-chatbot-icon-widgets-right: unset;
  --lbaic-chatbot-icon-widgets-left: 0;
  --lbaic-chatbot-icon-widget-dismiss-right: unset;
  --lbaic-chatbot-icon-widget-dismiss-left: -8px;

  .lbaic-chatbot-icon-widgets {
    align-items: flex-start;

    .lbaic-chatbot-icon-typing-indicator {
      flex-direction: row-reverse;
    }

    .lbaic-chatbot-icon-widget-group {
      .lbaic-chatbot-icon-message-group {
        .lbaic-chatbot-icon-message-widget {
          .lbaic-chatbot-icon-message-widget-content {
            flex-direction: row-reverse;
            justify-content: start;
          }

          .lbaic-chatbot-icon-message-widget-bubble {
            border-radius: 0 16px 16px 0;
          }

          &:first-of-type {
            .lbaic-chatbot-icon-message-widget-bubble {
              border-top-left-radius: 16px;
            }
          }

          &:last-of-type {
            .lbaic-chatbot-icon-message-widget-bubble {
              border-bottom-left-radius: 16px;
            }
          }
        }
      }

      .lbaic-chatbot-icon-prompt-group {
        align-items: flex-start;

        .lbaic-chatbot-icon-prompt-widget-content {
          justify-content: start;
        }
      }

      .lbaic-chatbot-icon-lead-capture-group {
        align-items: flex-start;
      }
    }
  }
}