& {
  --lbaic-button-local-opacity: 0;

  .lbaic {
    &-intro {
      height: 100%;
      display: grid;
      grid-template-rows: auto 1fr auto;
      grid-template-areas: 'header' 'main' 'footer';
      border-radius: inherit;
      opacity: var(--lbaic-chat-inner-opacity);
      animation: var(--lbaic-chat-inner-animation);
      overflow: hidden;

      &-item {
        &:not(:first-child) {
          --lbaic-intro-section-border: var(--lbaic-intro-section-border-color);

          &:has(.lbaic-intro-text) {
            margin-block-start: 16px;
          }
        }

        &:not(:last-child) {
          margin-block-end: 8px;
        }
      }

      &-main {
        grid-area: main;
        overflow: auto;
        scrollbar-color: var(--lbaic-main) transparent;
        scrollbar-width: thin;
        // Ensure scrolling works even with custom scroll libraries
        touch-action: pan-y pan-x;
        overscroll-behavior: contain;
      }

      &-header {
        width: 100%;
        grid-area: header;
        height: var(--lbaic-intro-header-height, 212px);
        background-image: var(--lbaic-intro-header-bg);
        background-color: var(--lbaic-chat-bg);
        border-radius: var(--lbaic-chat-radius) var(--lbaic-chat-radius) 0 0;
        transition: height 360ms ease-in-out;
        z-index: 10;

        &-inner {
          position: relative;
          width: 100%;
          max-width: 926px;
          margin-inline-start: auto;
          margin-inline-end: auto;
          padding: 24px 20px;
        }

        &-size {
          position: absolute;
          top: 20px;
          right: var(--lbaic-intro-header-size-right, 20px);
          z-index: 1;
        }

        &-close {
          position: absolute;
          top: 20px;
          right: 20px;
          z-index: 1;
        }

        &-in {
          max-height: 124px;
          padding-block-start: var(--lbaic-intro-header-in-padding-top, 20px);
          padding-block-end: var(--lbaic-intro-header-in-padding-bottom, 40px);
          padding-inline-end: 36px;
          transition: padding 360ms ease-in-out;

          * {
            font-family: inherit;
          }
        }

        &-action {
          &-in, &-in:not(:hover):not(:active):not(.has-background), &-in:focus {
            position: relative;
            width: 100%;
            height: 40px;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 20px;
            background-color: var(--lbaic-main);

            &:before, &:after {
              content: '';
              position: absolute;
              top: 0;
              right: 0;
              bottom: 0;
              left: 0;
              border-radius: inherit;
              pointer-events: none;
              z-index: 0;
            }

            &:before {
              background-color: var(--lbaic-intro-header-action-hover-bg);
              opacity: var(--lbaic-intro-header-action-hover-opacity, 0);
              transition: opacity 180ms ease-in-out;
            }

            &:after {
              background-color: var(--lbaic-intro-header-action-active-bg);
              opacity: var(--lbaic-intro-header-action-active-opacity, 0);
            }

            &:hover {
              --lbaic-intro-header-action-hover-opacity: 1;
              background-color: var(--lbaic-main);
            }

            &:active {
              --lbaic-intro-header-action-active-opacity: 1;
            }
          }

          &-label {
            position: relative;
            font-size: var(--lbaic-fs-14);
            font-weight: var(--lbaic-fw-500);
            color: var(--lbaic-white-100);
            line-height: var(--lbaic-lh-20);
            z-index: 1;
          }
        }
      }

      &-title {
        display: flex;
        align-items: center;

        &-in {
          display: -webkit-box;
          padding-inline-end: 8px;
          color: var(--lbaic-intro-header-title-color);
          overflow: hidden;
          word-break: break-word;
          -webkit-line-clamp: 1;
          -webkit-box-orient: vertical;

          transition: font-size 360ms ease-in-out, line-height 360ms ease-in-out;

          @media screen and (min-width: 0) {
            &:not(.entry-title):not(.page-title):not(.site-title) {
              font-size: var(--lbaic-intro-header-title-fs, 28px);
              font-weight: var(--lbaic-fw-700);
              line-height: var(--lbaic-intro-header-title-lh, var(--lbaic-lh-30));
            }
          }
        }

        &-icon {
          width: 20px;
          height: 20px;
          display: block;
          background-image: var(--lbaic-intro-header-title-icon);
          background-position: center;
          background-size: contain;
          background-repeat: no-repeat;
        }
      }

      &-subtitle {
        padding-block-start: var(--lbaic-intro-header-subtitle-padding-top, 10px);
        transition: padding 360ms ease-in-out;

        &-in {
          display: -webkit-box;
          overflow: hidden;
          font-size: var(--lbaic-intro-header-subtitle-fs, var(--lbaic-fs-16));
          font-weight: var(--lbaic-fw-500);
          color: var(--lbaic-intro-header-subtitle-color);
          line-height: var(--lbaic-intro-header-subtitle-lh, var(--lbaic-lh-24));
          word-break: break-word;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          transition: font-size 360ms ease-in-out, line-height 360ms ease-in-out;
        }
      }

      &-body {
        position: relative;
        width: 100%;
        max-width: 926px;
        margin-inline-start: auto;
        margin-inline-end: auto;
      }

      &-widgets {
        padding-inline: 20px;
      }

      &-label {
        &-in {
          &:not(:last-child) {
            margin-block-end: 20px;
          }
        }

        &-header {
          &, &:not(:hover):not(:active):not(.has-background) {
            width: 100%;
            display: flex;
            align-items: center;
            padding-block-end: 4px;
          }

          &-nested {
            .lbaic-intro-label-desc {
              &:not(:first-child) {
                margin-inline-start: 4px;
              }
            }
          }

          &-in {
            font-size: var(--lbaic-fs-14);
            font-weight: var(--lbaic-fw-500);
            line-height: var(--lbaic-lh-30);
            color: var(--lbaic-intro-title-color);
            overflow-x: hidden;

            &:not(:first-child:last-child) {
              padding-inline-end: 8px;
            }
          }

          &:hover {
            --lbaic-button-local-opacity: 0.1;
          }
        }

        &-body {
          min-height: 40px;

          &-scroll {
            display: flex;
            overflow-x: auto;
            overflow-y: hidden;
            scrollbar-width: none;
            // Ensure scrolling works even with custom scroll libraries
            touch-action: pan-x;
            overscroll-behavior-x: contain;
          }
        }

        &-desc {
          display: flex;
          margin-inline-start: auto;
          color: var(--lbaic-intro-title-color);
          border-radius: 2px;
          transition: background-color 180ms ease-in-out;

          &-i {
            width: 14px;
            flex: 0 0 14px;
            margin: auto;
            fill: currentColor;
          }
        }
      }

      &-section {
        padding-inline: 20px;

        &:not(:last-child){
          margin-block-end: 16px;
        }

        &-header {
          &, &:not(:hover):not(:active):not(.has-background) {
            width: 100%;
            display: flex;
            align-items: center;
            padding-block-end: 8px;
          }

          &-in {
            font-size: var(--lbaic-fs-14);
            font-weight: var(--lbaic-fw-500);
            line-height: var(--lbaic-lh-30);
            color: var(--lbaic-intro-title-color);

            &:not(:first-child:last-child) {
              padding-inline-end: 8px;
            }
          }

          &-action, &-action:not(:hover):not(:active):not(.has-background) {
            width: 16px;
            height: 16px;
            margin-inline-start: auto;
            padding: 2px;
            border-radius: 2px;
            color: var(--lbaic-intro-title-color);
            background-color: rgba(var(--lbaic-button-bg-hover), var(--lbaic-button-local-opacity));
          }

          &-action {
            &-i {
              width: 100%;
              height: auto;
              display: block;
              fill: currentColor;
            }
          }

          &:hover {
            --lbaic-button-local-opacity: 0.1;
          }
        }

        &-body {
          &-scroll {
            display: flex;
            overflow-x: auto;
            overflow-y: hidden;
            scrollbar-width: none;
            // Ensure scrolling works even with custom scroll libraries
            touch-action: pan-x;
            overscroll-behavior-x: contain;
          }
        }
      }

      &-row {
        position: relative;
        flex: 0 0 auto;
        padding-block: 10px;
        padding-inline: 16px 12px;
        background-color: var(--lbaic-intro-section-bg);
        border-radius: 6px;
        cursor: pointer;
        display: block; // Added for links

        &:before, &:after {
          content: '';
          position: absolute;
          top: 0;
          right: 0;
          bottom: 0;
          left: 0;
          border-radius: inherit;
          pointer-events: none;
          z-index: 0;
        }

        &:before {
          background-color: var(--lbaic-intro-row-hover-bg);
          opacity: var(--lbaic-intro-row-hover-opacity, 0);
          transition: opacity 180ms ease-in-out;
        }

        &:after {
          background-color: var(--lbaic-intro-row-active-bg);
          opacity: var(--lbaic-intro-row-active-opacity, 0);
        }

        &:hover {
          --lbaic-intro-row-hover-opacity: 1;
        }

        &:active {
          --lbaic-intro-row-active-opacity: 1;
        }


        &-in {
          position: relative;
          display: flex;
          align-items: center;
          z-index: 1;
        }

        &-label {
          flex: 1 0 0;
          font-size: var(--lbaic-fs-14);
          line-height: var(--lbaic-lh-20);
          color: var(--lbaic-intro-title-color);
          white-space: nowrap;
          overflow-x: hidden;
          text-overflow: ellipsis;

          &:not(:first-child:last-child) {
            padding-inline-end: 8px;
          }
        }

        &-icon {
          width: 22px;
          height: auto;
          flex: 0 0 22px;
          display: block;
          fill: var(--lbaic-intro-title-color);

          &:not(:first-child) {
            margin-inline-start: 8px;
          }

          &-nc {
            width: 17px;
            height: auto;
            flex: 0 0 17px;
          }

          &-i {
            width: 22px;
            height: auto;
            flex: 0 0 22px;
            display: block;
            fill: var(--lbaic-intro-title-color);
          }
        }
      }

      &-scroll-row {
        &, &:not(:hover):not(:active):not(.has-background) {
          max-width: 150px;
          position: relative;
          flex: 0 0 auto;
          padding-block: 10px;
          padding-inline: 16px 12px;
          background-color: var(--lbaic-intro-section-bg);
          border-radius: 6px;

          &:not(:last-child) {
            margin-inline-end: 8px;
          }
        }

        &::after, &::before {
          content: "";
          position: absolute;
          top: 0;
          right: 0;
          bottom: 0;
          left: 0;
          border-radius: inherit;
          pointer-events: none;
          z-index: 0;
          transition: opacity 180ms ease-in-out;
        }

        &::before {
          background-color: var(--lbaic-intro-row-hover-bg);
          opacity: var(--lbaic-button-local-hover-opacity, 0);
        }

        &::after {
          background-color: var(--lbaic-intro-row-active-bg);
          opacity: var(--lbaic-button-local-active-opacity, 0);
        }

        &:not(:last-child) {
          margin-inline-end: 8px;
        }

        &-in {
          display: flex;
          align-items: center;
        }

        &-action {
          &, &:not(:hover):not(:active):not(.has-background) {
            padding: 3px;
            background-color: rgba(var(--lbaic-button-bg-hover), var(--lbaic-button-local-opacity));
          }
        }

        &:hover {
          --lbaic-button-local-hover-opacity: 1;
          background-color: var(--lbaic-intro-section-bg);
        }

        &:active{
          --lbaic-button-local-active-opacity: 0.1;
        }
      }

      &-menu {
        position: absolute;
        top: 100%;
        left: var(--lbaic-intro-menu-left, 0);
        min-width: 170px;
        background-color: var(--lbaic-intro-menu-bg);
        border: 1px solid var(--lbaic-intro-menu-border);
        border-radius: 8px;
        box-shadow: var(--lbaic-chat-shadow);
        overflow: hidden;
        z-index: 1;

        &-item {
          &:not(:last-child) {
            border-bottom: 1px solid var(--lbaic-intro-menu-border);
          }

          &-in, &-in:not(:hover):not(:active):not(.has-background) {
            width: 100%;
            padding-block: 8px;
            padding-inline: 8px;
            color: var(--lbaic-message-fast-color);
            text-align: left;
            transition: background-color 180ms ease-in-out;
          }

          &-in {
            display: flex;
            align-items: center;

            &:hover {
              background-color: rgba(var(--lbaic-button-bg-hover), 0.1);
            }
          }

          &-i {
            width: 20px;
            height: auto;
            display: block;
            fill: currentColor;
          }

          &-label {
            flex: 1 0 0;
            font-size: var(--lbaic-fs-14);
            color: inherit;

            &:not(:first-child:last-child):not(:first-child) {
              padding-inline-start: 6px;
            }
          }
        }
      }

      &-text {
        &, & * {
          color: var(--lbaic-intro-text-color);
          font-size: var(--lbaic-fs-14);
        }

        b, b *, strong, strong *, h1, h1 *, h2, h2 *, h3, h3 *, h4, h4 *, h5, h5 *, h6, h6 * {
          font-weight: var(--lbaic-fw-500);
        }

        h1, h1 * {
          font-size: var(--lbaic-fs-16);
        }

        h2, h2 * {
          font-size: var(--lbaic-fs-14);
        }

        h3, h3 * {
          font-size: var(--lbaic-fs-12);
        }

        h4, h4 * {
          font-size: var(--lbaic-fs-10);
        }

        h5, h5 * {
          font-size: var(--lbaic-fs-9);
        }

        h6, h6 * {
          font-size: var(--lbaic-fs-8);
        }
      }

      &-search {
        padding-inline: 16px;
        padding-block: 16px;
        background-color: var(--lbaic-intro-section-bg);
        border-radius: 8px;

        &-input {
          height: 36px;
          display: flex;
          align-items: center;
          padding-block: 8px;
          padding-inline-start: 8px;
          margin-block-end: 8px;
          background-color: var(--lbaic-intro-search-bg);
          border-radius: 8px;

          &-icon {
            width: 20px;
            height: auto;
            flex: 0 0 20px;
            display: block;
            fill: var(--lbaic-intro-text-color);
          }

          &-in {
            height: 100%;
            flex: 1 0 0;
            margin: 0;
            padding-block: 0;
            padding-inline: 10px;
            border: none;
            font-size: var(--lbaic-fs-14);
            line-height: var(--lbaic-lh-20);
            color: var(--lbaic-intro-title-color);

            &:focus {
              outline: none;
              color: var(--lbaic-intro-title-color);

              &::-webkit-search-cancel-button {
                --lbaic-intro-search-cancel-opacity: 1;
                --lbaic-intro-search-cancel-events: all;
              }
            }

            &::-webkit-search-cancel-button {
              -webkit-appearance: none;
              appearance: none;
              height: 16px;
              width: 16px;
              background-image: url(data:image/svg+xml;base64,PHN2ZwogICAgICAgIHhtbG5zPSdodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZycKICAgICAgICBmaWxsPSdub25lJwogICAgICAgIHZpZXdCb3g9JzAgMCAyNCAyNCcKPgogICAgPHBhdGggZmlsbD0iIzM2MzUzNSIgZD0nbTEyIDEzLjQtNC45IDQuOWEuOTUuOTUgMCAwIDEtLjcuMjc1Ljk1Ljk1IDAgMCAxLS43LS4yNzUuOTUuOTUgMCAwIDEtLjI3NS0uN3EwLS40MjYuMjc1LS43bDQuOS00LjktNC45LTQuOWEuOTUuOTUgMCAwIDEtLjI3NS0uN3EwLS40MjYuMjc1LS43YS45NS45NSAwIDAgMSAuNy0uMjc1cS40MjQgMCAuNy4yNzVsNC45IDQuOSA0LjktNC45YS45NS45NSAwIDAgMSAuNy0uMjc1cS40MjQgMCAuNy4yNzVhLjk1Ljk1IDAgMCAxIC4yNzUuNy45NS45NSAwIDAgMS0uMjc1LjdMMTMuNCAxMmw0LjkgNC45YS45NS45NSAwIDAgMSAuMjc1LjcuOTUuOTUgMCAwIDEtLjI3NS43Ljk1Ljk1IDAgMCAxLS43LjI3NS45NS45NSAwIDAgMS0uNy0uMjc1eicgLz4KPC9zdmc+);
              background-size: contain;
              background-position: center;
              background-repeat: no-repeat;
              filter: invert(var(--lbaic-intro-search-cancel-filter));
              opacity: var(--lbaic-intro-search-cancel-opacity, 0);
              cursor: pointer;
              pointer-events: var(--lbaic-intro-search-cancel-events, none);
            }
          }
        }

        &-row {
          padding-block: 9px;
          display: flex;
          align-items: center;
          cursor: pointer;

          &:not(:last-child) {
            margin-block-end: 4px;
          }

          &-label {
            flex: 1 0 0;
            font-size: var(--lbaic-fs-14);
            line-height: var(--lbaic-lh-20);
            color: var(--lbaic-intro-title-color);

            &:not(:first-child:last-child) {
              padding-inline-end: 8px;
            }
          }

          &-icon {
            width: 22px;
            height: auto;
            flex: 0 0 22px;
            display: block;
            fill: var(--lbaic-intro-title-color);
          }
        }
      }

      &-footer {
        position: relative;
        width: 100%;
        max-width: 926px;
        grid-area: footer;
        margin-inline-start: auto;
        margin-inline-end: auto;
        padding: 16px 20px 20px;

        &-in {
          height: 58px;
          display: flex;
          padding-block: 4px;
          padding-inline: 4px;
          background-color: var(--lbaic-intro-section-bg);
          border-radius: 29px;
        }
      }

      &-tab, &-tab:not(:hover):not(:active):not(.has-background) {
        position: relative;
        width: 50%;
        height: 100%;
        flex: 1 0 0;
        display: grid;
        place-items: center;
        gap: 2px;
        padding-block: 6px;
        border-radius: inherit;
        background-color: var(--lbaic-intro-tab-bg);
        color: var(--lbaic-intro-tab-color);
        transition: background-color 180ms ease-in-out;
        overflow: hidden;
      }

      &-tab {
        &:before, &:after {
          content: '';
          position: absolute;
          top: 0;
          right: 0;
          bottom: 0;
          left: 0;
          pointer-events: none;
          z-index: 1;
        }

        &:before {
          background-color: var(--lbaic-intro-tab-hover-bg);
          opacity: var(--lbaic-intro-tab-hover-opacity, 0);
          transition: opacity 180ms ease-in-out;
        }

        &:after {
          background-color: var(--lbaic-intro-tab-active-bg);
          opacity: var(--lbaic-intro-tab-active-opacity, 0);
        }

        &:hover {
          --lbaic-intro-tab-hover-opacity: 1;
          overflow: hidden;
        }

        &:active {
          --lbaic-intro-tab-active-opacity: 1;
        }

        &-i {
          position: relative;
          width: 24px;
          height: auto;
          display: block;
          fill: currentColor;
          z-index: 2;
        }

        &-label {
          position: relative;
          font-size: var(--lbaic-fs-10);
          font-weight: var(--lbaic-fw-500);
          line-height: var(--lbaic-lh-12);
          z-index: 2;
        }

        &.active {
          pointer-events: none;

          &, &:active, &:focus {
            --lbaic-intro-tab-color: var(--lbaic-white-100);
            --lbaic-intro-tab-bg: var(--lbaic-main);
          }
        }
      }
    }

    &-loading {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      display: block;
      background-color: var(--lbaic-chat-bg);
      background-image: var(--lbaic-intro-loader-bg);
      border-radius: var(--lbaic-chat-radius);
      z-index: 11;

      &-chat {
        top: 64px;
        height: calc(100% - 64px);
        background-image: none;
        border-radius: inherit;
        border-bottom-left-radius: var(--lbaic-chat-radius);
        border-bottom-right-radius: var(--lbaic-chat-radius);
      }
    }
  }
}
