.lbaic-settings-copilot {
  --lbaic-settings-contenteditable-min-height: 96px;
  --lbaic-settings-contenteditable-max-height: 300px;
  --lbaic-settings-contenteditable-local-bg: #fff;
  --lbaic-settings-copilot-action-bg: rgba(0, 0, 0, 0);

  position: relative;
  width: 24px;
  height: 24px;

  &-toggle {
    --lbaic-settings-loading-circle-width: 18px;

    width: 100%;
    height: 100%;
    border-radius: 6px;
    background-color: var(--lbaic-settings-copilot-action-bg);

    &:hover {
      --lbaic-settings-copilot-action-bg: var(--lbaic-settings-button-bg-hover);
    }

    &:active {
      --lbaic-settings-copilot-action-bg: var(--lbaic-settings-button-bg-active)
    }

    &-i {
      width: 16px;
      height: auto;
      display: block;
      margin: auto;
      fill: var(--lbaic-settings-copilot-color);
    }
  }

  &-menu {
    --lbaic-settings-copilot-menu-opacity: 0;

    width: 120px;
    position: absolute;
    top: var(--lbaic-settings-copilot-menu-top, unset);
    left: var(--lbaic-settings-copilot-menu-left, unset);
    bottom: var(--lbaic-settings-copilot-menu-bottom, unset);
    padding: 3.5px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    border: 1px solid var(--lbaic-settings-kebab-border);
    border-radius: calc(8.75px + 4px);
    background-color: var(--lbaic-settings-copilot-menu-bg);
    box-shadow: 0 0 8px 0 rgba(var(--lbaic-settings-copilot-box-shadow), 0.65);
    transform: translate3d(0, -4px, 0);
    opacity: var(--lbaic-settings-copilot-menu-opacity);
    z-index: -1;

    &.active {
      --lbaic-settings-copilot-menu-transform: translate3d(0, -4px, 0);
      --lbaic-settings-copilot-menu-opacity: 1;
      --lbaic-settings-copilot-menu-events: all;
      z-index: 301;
    }
  }

  &-mode {
    &-custom {
      --lbaic-settings-ai-textarea-opacity: 0;
      --lbaic-settings-contenteditable-pbe: 52px;

      position: absolute;
      top: var(--lbaic-settings-ai-textarea-top, unset);
      left: var(--lbaic-settings-ai-textarea-left, unset);
      bottom: var(--lbaic-settings-ai-textarea-bottom, unset);
      width: 240px;
      border-radius: 6px;
      box-shadow: 0 4px 16px 0 rgba(var(--lbaic-settings-black-rgb), 0.06);
      transform: var(--lbaic-settings-ai-textarea-transform, translate3d(0, -4px, 0));
      opacity: var(--lbaic-settings-ai-textarea-opacity);
      transition: transform 180ms ease-in-out, opacity 180ms ease-in-out;
      z-index: -1;

      &.active {
        --lbaic-settings-ai-textarea-color: var(--lbaic-settings-primary);
        --lbaic-settings-ai-textarea-transform: translate3d(0, -4px, 0);
        --lbaic-settings-ai-textarea-opacity: 1;
        --lbaic-settings-ai-textarea-events: all;
        z-index: 301;
      }

      @include min-width($lbaic-settings-wp-xl-breakpoint) {
        width: 384px;
      }

      &-action {
        --lbaic-settings-button-fs: var(--lbaic-settings-fs-12);

        position: absolute;
        right: 12px;
        bottom: 12px;
        z-index: 1;
      }
    }
  }
}