//Colors
& {
  --lbaic-white-rgb: 255, 255, 255;
  --lbaic-black-rgb: 0, 0, 0;
  --lbaic-red-rgb: 255, 59, 48;
  --lbaic-white-100: rgba(var(--lbaic-white-rgb), 1);
  --lbaic-black-100: rgba(var(--lbaic-black-rgb), 1);
  --lbaic-red-100: rgba(var(--lbaic-red-rgb), 1);

  // Gray colors (equivalent to Tailwind gray scale)
  --lbaic-gray-100: #f3f4f6;
  --lbaic-gray-200: #e5e7eb;
  --lbaic-gray-300: #d1d5db;
  --lbaic-gray-400: #9ca3af;
  --lbaic-gray-500: #6b7280;
  --lbaic-gray-600: #4b5563;
  --lbaic-gray-800: #1e2939;

  //primary button
  --lbaic-button-primary-color: rgba(var(--lbaic-white-rgb), 1);

  //secondary button
  --lbaic-button-secondary-border: #EAEBF0;
  --lbaic-button-secondary-bg: rgba(var(--lbaic-white-rgb), 1);
  --lbaic-button-secondary-color: #182939;
}

//Shadows
& {
  --lbaic-trigger-shadow: 0 10px 20px 0 rgba(var(--lbaic-black-rgb), 0.2);
  --lbaic-trigger-label-shadow: 0 1px 2px rgba(var(--lbaic-black-rgb), 0.25);
  --lbaic-chat-shadow: 0 10px 20px 0 rgba(var(--lbaic-black-rgb), 0.2);
  --lbaic-upload-remove-shadow: 0 0 1px 0 rgba(var(--lbaic-black-rgb), 0.2);
}

//Position
& {
  --lbaic-layout-t: var(--lbaic-t);
  --lbaic-layout-b: var(--lbaic-b);

  &-ltr, &[dir='ltr'] {
    --lbaic-position: fixed;
    --lbaic-layout-r: var(--lbaic-r);
    --lbaic-layout-l: var(--lbaic-l);
    --lbaic-input-actions-r: 0;
    --lbaic-intro-header-size-right: 50px;

    &.lbaic {
      &-right {
        --lbaic-grid-r: 0;
        --lbaic-chat-in-transform-origin: 100% 100%;
        --lbaic-trigger-label-right: 100%;
        --lbaic-trigger-label-transform: translate3d(-18px, -50%, 0);
        --lbaic-trigger-label-transform-hover: translate3d(-10px, -50%, 0);
      }

      &-left {
        --lbaic-grid-l: 0;
        --lbaic-chat-in-transform-origin: 0% 100%;
        --lbaic-trigger-label-left: 100%;
        --lbaic-trigger-label-transform: translate3d(10px, -50%, 0);
        --lbaic-trigger-label-transform-hover: translate3d(18px, -50%, 0);
      }
    }
  }

  &-rtl, &[dir='rtl'] {
    --lbaic-layout-r: var(--lbaic-l);
    --lbaic-layout-l: var(--lbaic-r);
    --lbaic-input-actions-l: 0;

    &.lbaic {
      &-right {
        --lbaic-grid-l: 0;
        --lbaic-chat-in-transform-origin: 0% 100%;

        .lbaic {
          &-full {
            --lbaic-chat-transform: calc(var(--lbaic-layout-l) * var(--lbaic-reverse-multiplier)), var(--lbaic-layout-b), 0;
          }
        }
      }

      &-left {
        --lbaic-grid-r: 0;
        --lbaic-chat-in-transform-origin: 100% 100%;

        .lbaic {
          &-full {
            --lbaic-chat-transform: var(--lbaic-layout-r), var(--lbaic-layout-b), 0;
          }
        }
      }
    }
  }
}

//Font
& {
  --lbaic-base-fs: 16px;
  --lbaic-fs-8: 8px;
  --lbaic-fs-9: 9px;
  --lbaic-fs-10: 10px;
  --lbaic-fs-11: 11px;
  --lbaic-fs-12: 12px;
  --lbaic-fs-13: 13px;
  --lbaic-fs-14: 14px;
  --lbaic-fs-16: 16px;
  --lbaic-fs-18: 18px;
  --lbaic-fs-24: 24px;
  --lbaic-fs-28: 28px;
  --lbaic-lh-8: 8px;
  --lbaic-lh-10: 10px;
  --lbaic-lh-11: 11px;
  --lbaic-lh-12: 12px;
  --lbaic-lh-13: 13px;
  --lbaic-lh-14: 14px;
  --lbaic-lh-16: 16px;
  --lbaic-lh-18: 18px;
  --lbaic-lh-20: 20px;
  --lbaic-lh-24: 24px;
  --lbaic-lh-30: 30px;

  @each $weight in $weights {
    --lbaic-fw-#{$weight}: #{$weight};
  }
}

//Other
& {
  --lbaic-ts-d: 180ms;
  --lbaic-ts-tf: ease-in-out;

  &-ltr, &[dir='ltr'] {
    --lbaic-message-bot-radius: 16px 16px 16px 0;
    --lbaic-message-user-radius: 16px 16px 0 16px;
  }

  &-rtl, &[dir='rtl'] {
    --lbaic-message-bot-radius: 16px 16px 4px 16px;
    --lbaic-message-user-radius: 4px 16px 16px 16px;
  }
}

//Theme
& {
  &-light {
    --lbaic-chat-bg: #fff;
    --lbaic-grid-header-shadow: 0 -1px 0 0 #F2F3F9 inset;
    --lbaic-text-color: #1C1C1E;
    --lbaic-button-color: #1C1C1E;
    --lbaic-button-bg-hover: 28, 28, 30;
    --lbaic-button-rounded-bg: #F2F4F5;
    --lbaic-button-rounded-bg-active: 83, 83, 83;
    --lbaic-link-color: #007CBA;
    --lbaic-header-actions-menu-bg: #F2F4F5;
    --lbaic-header-actions-menu-border: rgba(83, 83, 83, 0.1);
    --lbaic-message-bot-bg: #F2F4F5;
    --lbaic-message-code-action-bg: rgba(var(--lbaic-black-rgb), 0.1);
    --lbaic-message-code-action-color: #535353;
    --lbaic-message-code-bg: rgba(var(--lbaic-black-rgb), 0.05);
    --lbaic-message-code-color: #303437;
    --lbaic-message-history-menu-bg: #F2F4F5;
    --lbaic-message-history-menu-border: rgba(83, 83, 83, 0.1);
    --lbaic-chatbot-avatar-bg: #F2F4F5;
    --lbaic-message-user-bg: var(--lbaic-main);
    --lbaic-message-file-color: var(--lbaic-black-100);
    --lbaic-input-bg: rgba(234, 235, 240, 0.5);
    --lbaic-input-with-action-bg: #f0f0f3;
    --lbaic-input-action-bg: #f5f5f7;
    --lbaic-input-action-color: #525F6A;
    --lbaic-input-color: #1C1C1E;
    --lbaic-input-placeholder-color: #525F6A;
    --lbaic-input-button-color: #535353;
    --lbaic-input-button-bg-hover: 83, 83, 83;
    --lbaic-input-error-outline: #dc3545;
    --lbaic-upload-fill: #1C1C1E;
    --lbaic-message-fast-bg: rgba(28, 28, 30, 0.1);
    --lbaic-message-fast-border: #535353;
    --lbaic-message-fast-color: #535353;
    --lbaic-popup-color: #121313;
    --lbaic-message-table-border:#dad9d9;

    // Load more messages
    --lbaic-message-load-more-color: #535353;

    //recommendation
    --lbaic-recommendation-border-color: #EAEBF0;
    --lbaic-recommendation-input-border-color: #D2D7E2;
    --lbaic-recommendation-color: #666666;
    --lbaic-recommendation-meta-color: #969696;

    //primary button
    --lbaic-button-primary-bg: var(--lbaic-main);
    --lbaic-button-primary-border: var(--lbaic-main);
    --lbaic-popup-shadow: 0 0 12px 0 rgba(var(--lbaic-black-rgb), 0.05);
    --lbaic-popup-overlay-bg: rgba(var(--lbaic-white-rgb), 0.8);


    --lbaic-toggle-shadow: 0px 2px 4px 0px rgba(0, 35, 11, 0.2);
    --lbaic-toggle-in: rgba(var(--lbaic-white-rgb), 1);
    --lbaic-toggle-bg: #BFBFBF;
    --lbaic-toggle-active-bg: var(--lbaic-main);

    --lbaic-intro-header-bg: linear-gradient(180deg, var(--lbaic-main) 0%, rgba(var(--lbaic-white-rgb), 0) 80%);
    --lbaic-intro-loader-bg: linear-gradient(180deg, var(--lbaic-main) 0, rgba(var(--lbaic-white-rgb), 0) 160px);
    --lbaic-intro-header-action-bg: #ECECEC;
    --lbaic-intro-header-action-icon: var(--lbaic-black-100);
    --lbaic-intro-header-action-hover-bg: rgba(var(--lbaic-black-rgb), 0.08);
    --lbaic-intro-header-action-active-bg: rgba(var(--lbaic-black-rgb), 0.2);
    --lbaic-intro-header-title-color: #1C1C1E;
    --lbaic-intro-header-subtitle-color: #565656;
    --lbaic-intro-section-border-color: #F2F4F5;
    --lbaic-intro-row-hover-bg: rgba(var(--lbaic-black-rgb), 0.08);
    --lbaic-intro-row-active-bg: rgba(var(--lbaic-black-rgb), 0.2);
    --lbaic-intro-section-bg: #f5f5f5;
    --lbaic-intro-menu-bg: #F2F4F5;
    --lbaic-intro-menu-border: rgba(83, 83, 83, 0.1);
    --lbaic-intro-search-bg: #EAEAEA;
    --lbaic-intro-search-cancel-filter: 0;
    --lbaic-intro-title-color: var(--lbaic-black-100);
    --lbaic-intro-text-color: #363535;
    --lbaic-intro-tab-bg: #f5f5f5;
    --lbaic-intro-tab-hover-bg: rgba(var(--lbaic-black-rgb), 0.08);
    --lbaic-intro-tab-active-bg: rgba(var(--lbaic-black-rgb), 0.2);
    --lbaic-intro-tab-color: #535353;
    --lbaic-agent-end-color:#666;
    --lbaic-agent-end-hover-color:#121313;

    // Scroll down button
    --lbaic-scroll-down-button-bg: #FAFAFA;
    --lbaic-scroll-down-button-hover-bg: #F1F1F1;
    --lbaic-scroll-down-button-color: #1C1C1C;
  }

  &-dark {
    --lbaic-chat-bg: #121313;
    --lbaic-grid-header-shadow: 0 -1px 0 0 #212121 inset;
    --lbaic-text-color: #fff;
    --lbaic-button-color: #fff;
    --lbaic-button-bg-hover: 255, 255, 255;
    --lbaic-button-rounded-bg: #212121;
    --lbaic-button-rounded-bg-active: 255, 255, 255;
    --lbaic-link-color: #007CBA;
    --lbaic-header-actions-menu-bg: #212121;
    --lbaic-header-actions-menu-border: rgba(83, 83, 83, 0.1);
    --lbaic-message-bot-bg: #212121;
    --lbaic-message-code-action-bg: rgba(var(--lbaic-white-rgb), 0.1);
    --lbaic-message-code-action-color: #fff;
    --lbaic-message-code-bg: rgba(var(--lbaic-white-rgb), 0.05);
    --lbaic-message-code-color: #fff;
    --lbaic-message-history-menu-bg: #212121;
    --lbaic-message-history-menu-border: rgba(83, 83, 83, 0.1);
    --lbaic-chatbot-avatar-bg: #212121;
    --lbaic-message-user-bg: var(--lbaic-main);
    --lbaic-message-file-color: var(--lbaic-white-100);
    --lbaic-input-bg: #212121;
    --lbaic-input-with-action-bg: #1a1a1a;
    --lbaic-input-action-bg: #212121;
    --lbaic-input-action-color: #969696;
    --lbaic-input-color: #fff;
    --lbaic-input-placeholder-color: #969696;
    --lbaic-input-button-color: #ECECEC;
    --lbaic-input-button-bg-hover: 236, 236, 236;
    --lbaic-input-error-outline: #ff6b7a;
    --lbaic-message-fast-bg: rgba(var(--lbaic-white-rgb), 0.1);
    --lbaic-message-fast-border: #535353;
    --lbaic-message-fast-color: #fff;
    --lbaic-popup-color: #fff;
    --lbaic-message-table-border:#3f3e3e;

    // Load more messages
    --lbaic-message-load-more-color: #fff;

    //recommendation
    --lbaic-recommendation-border-color: #2a2a2a;
    --lbaic-recommendation-input-border-color: #2a2a2a;
    --lbaic-recommendation-color: #666666;
    --lbaic-recommendation-meta-color: #969696;

    //primary button
    --lbaic-button-primary-bg: var(--lbaic-main);
    --lbaic-button-primary-border: var(--lbaic-main);
    --lbaic-popup-shadow: 0 0 12px 0 rgba(var(--lbaic-white-rgb), 0.05);
    --lbaic-popup-overlay-bg: rgba(18, 19, 19, 0.8);

    --lbaic-toggle-shadow: 0px 2px 4px 0px rgba(0, 35, 11, 0.2);
    --lbaic-toggle-in: rgba(var(--lbaic-white-rgb), 1);
    --lbaic-toggle-bg: #5a5a5a;
    --lbaic-toggle-active-bg: var(--lbaic-main);

    --lbaic-intro-header-bg: radial-gradient(100% 100% at 50% 0%, var(--lbaic-main) 0%, rgba(var(--lbaic-black-rgb), 0) 80%);
    --lbaic-intro-loader-bg: radial-gradient(100% 30% at 50% 0%, var(--lbaic-main) 0%, rgba(var(--lbaic-black-rgb), 0) 80%);
    --lbaic-intro-header-action-bg: var(--lbaic-white-100);
    --lbaic-intro-header-action-icon: var(--lbaic-black-100);
    --lbaic-intro-header-title-color: var(--lbaic-white-100);
    --lbaic-intro-header-subtitle-color: #cbcbcb;
    --lbaic-intro-header-action-hover-bg: rgba(var(--lbaic-white-rgb), 0.08);
    --lbaic-intro-header-action-active-bg: rgba(var(--lbaic-white-rgb), 0.2);
    --lbaic-intro-section-border-color: #3D3D3D;
    --lbaic-intro-row-hover-bg: rgba(var(--lbaic-white-rgb), 0.08);
    --lbaic-intro-row-active-bg: rgba(var(--lbaic-white-rgb), 0.2);
    --lbaic-intro-section-bg: #222;
    --lbaic-intro-menu-bg: #212121;
    --lbaic-intro-menu-border: rgba(83, 83, 83, 0.1);
    --lbaic-intro-search-bg: #363535;
    --lbaic-intro-search-cancel-filter: 1;
    --lbaic-intro-title-color: var(--lbaic-white-100);
    --lbaic-intro-text-color: var(--lbaic-white-100);
    --lbaic-intro-tab-bg: transparent;
    --lbaic-intro-tab-hover-bg: rgba(var(--lbaic-white-rgb), 0.08);
    --lbaic-intro-tab-active-bg: rgba(var(--lbaic-white-rgb), 0.2);
    --lbaic-intro-tab-color: #CDCDCD;
    --lbaic-agent-end-color:#666;
    --lbaic-agent-end-hover-color:#fff;

    // Scroll down button
    --lbaic-scroll-down-button-bg: #3E3E3E;
    --lbaic-scroll-down-button-hover-bg: #535353;
    --lbaic-scroll-down-button-color: #FAFAFA;
  }
}

//Size
& {
  --lbaic-chat-max-h: calc(100vh - var(--lbaic-b) - 16px);
  --lbaic-chat-radius: 12px;
  --lbaic-chat-transform: 0, calc(var(--lbaic-trigger-gap) * var(--lbaic-reverse-multiplier)), 0;

  --lbaic-message-mw: 92%;

  &-sm {
    --lbaic-chat-w: 380px;
    --lbaic-chat-max-w: 380px;
    --lbaic-chat-h: 420px;
    --lbaic-message-table-max-width:285px;
  }

  &-md {
    --lbaic-chat-w: 380px;
    --lbaic-chat-max-w: 380px;
    --lbaic-chat-h: 700px;
    --lbaic-message-table-max-width:285px;
  }

  &-lg {
    --lbaic-chat-w: 380px;
    --lbaic-chat-max-w: 380px;
    --lbaic-chat-h: var(--lbaic-chat-max-h);
    --lbaic-message-table-max-width: 285px;
  }

  &-xl {
    --lbaic-chat-w: 600px;
    --lbaic-chat-max-w: 600px;
    --lbaic-chat-h: 650px;
    --lbaic-message-mw: 85%;
    --lbaic-recommendation-card-grid: 1fr 1fr;
    --lbaic-message-table-max-width:448px;
  }

  &-full {
    --lbaic-chat-position: fixed;
    --lbaic-chat-w: 100vw;
    --lbaic-chat-max-w: 926px;
    --lbaic-chat-h: 100vh;
    --lbaic-chat-max-h: 100dvh;
    --lbaic-chat-radius: 0;
    --lbaic-chat-transform: 0, 0, 0;
    --lbaic-chat-z-index: 1001;
    --lbaic-message-mw: 424px;
    --lbaic-recommendation-card-grid: 1fr 1fr 1fr;
    --lbaic-message-table-max-width:424px;

    @include media-max(465) {
      --lbaic-message-mw: 90%;
    }
  }
}