:root {
  --tv-zinc-950: rgb(9 9 11);
  --tv-zinc-200: rgb(228 228 231);
  --tv-zinc-50: rgb(250 250 250);
  --tv-zinc-100: rgb(244 244 245);
  --tv-zinc-200: rgb(228 228 231);
  --tv-zinc-300: rgb(212 212 216);
  --tv-zinc-700: rgb(63 63 70);
  --tv-zinc-800: rgb(39 39 42);
  --tv-zinc-900: rgb(24, 24, 27);
  --tv-zinc-400: rgb(161, 161, 170);
  --tv-zinc-500: rgb(108 108 120);
  --tv-zinc-600: rgb(82 82 91);
}

.debug {
  outline: 1px solid red !important;
}

body {
  .trieve-close-icon {
    @apply tv-w-4 tv-h-4 tv-fill-current;
  }

  #trieve-search-modal-overlay {
    display: block;
  }

  #trieve-search-modal {
    font-family: var(--tv-prop-brand-font-family);

    button {
      min-width: auto;
      background-color: transparent;
      color: inherit;
      line-height: inherit;
      padding: 0;
      font-size: inherit;
      display: inherit;
      border: none;

      &.mic-button-container,
      &.image-button-container,
      &.paper-plane-button-container {
        height: 16px;
        width: 16px;
        fill: var(--tv-zinc-700);
        color: var(--tv-zinc-700);
        display: block;
      }

      &:focus {
        outline: none;
        box-shadow: none;
      }
    }

    input:focus,
    textarea:focus {
      outline: none;
      border: none;
    }

    svg {
      height: 16px;
      width: 16px;
      fill: currentColor;
      margin: 0;
    }

    .upload-icon {
      height: 32px;
      width: 32px;
      fill: currentColor;
      margin: 0;
    }

    ol,
    ul,
    strong {
      font-size: inherit;
      color: inherit;
    }

    .tv-guarantee-block {
      display: block;
    }

    .group-chat-carousel {
      @apply tv-pl-4 tv-flex tv-gap-2 tv-w-full tv-overflow-x-auto;
    }

    ::-webkit-scrollbar {
      width: 6px;
      height: 6px;
    }

    ::-webkit-scrollbar-thumb {
      border-radius: 3px;
      background-color: var(--tv-prop-scrollbar-thumb-color);
    }

    .trieve-elements-docs,
    .trieve-elements-pdf {
      @apply tv-scroll-smooth;

      .item-group-container {
        @apply tv-border-b tv-border-gray-300 tv-mb-5;
      }
      .item-group-name {
        @apply tv-text-sm tv-font-bold tv-mb-2;
      }
    }

    .trieve-elements-ecommerce {
      > li > .product > div {
        @apply tv-flex tv-flex-col;
      }
    }

    .no-results {
      > p.no-results-text {
        @apply tv-font-medium;
      }

      > p > a.no-results-help-link {
        @apply tv-underline;
        color: var(--tv-prop-brand-color);
      }
    }

    .no-results-loading {
      @apply tv-text-sm tv-text-center tv-my-8 tv-animate-pulse;
    }

    .no-results-loading.ecommerce {
      @apply tv-text-left;
    }

    .mode-switch-wrapper {
      &.mode-switch-popup {
        @apply tv-top-2.5 tv-z-30;
      }

      &.docs.trieve-mode-chat,
      &.pdf.trieve-mode-chat {
        @apply tv-top-0;
      }

      > div {
        @apply tv-p-0.5 tv-text-xs tv-rounded-md tv-flex;
        background-color: var(--tv-zinc-200);

        button {
          @apply tv-px-2 tv-py-1 tv-rounded-md tv-flex tv-gap-1 tv-items-center tv-transition-all;
          color: var(--tv-zinc-600);

          &.active {
            @apply tv-shadow-sm;
            background-color: var(--tv-zinc-50);
            color: var(--tv-zinc-800);
          }

          svg {
            @apply tv-h-3 tv-w-3;
          }
        }
      }
    }

    ul.tags {
      @apply tv-flex tv-flex-wrap tv-items-center tv-text-xs tv-relative !tv-mt-0;
      color: var(--tv-zinc-800);
      border-color: var(--tv-zinc-200);

      li {
        @apply tv-border-t-2 tv-rounded-sm;

        button {
          @apply tv-flex tv-gap-1 tv-items-center tv-py-1 tv-px-2;
        }
        border-color: transparent;
        &:hover,
        &.active {
          background-color: var(--tv-zinc-100);
        }

        &.active {
          border-color: var(--tv-prop-brand-color);
        }
      }
    }

    .trieve-footer {
      @apply tv-py-1.5;

      .tags-row {
        display: flex;
        flex-direction: row;
        width: 100%;

        .tags-spacer {
          @apply tv-flex-1 tv-block;
        }
      }

      .chat-controls-row {
        @apply tv-flex tv-w-full tv-justify-end tv-mt-0.5;
      }

      .bottom-row {
        @apply tv-flex tv-items-center 2xl:tv-px-0 tv-w-full tv-mx-auto tv-max-w-7xl;

        button {
          @apply tv-px-2 tv-text-sm tv-py-1 tv-rounded-md;
          color: var(--tv-zinc-700);
          border-color: var(--tv-zinc-300);

          &:hover {
            color: var(--tv-zinc-950);
          }
        }
      }

      .commands {
        @apply tv-hidden sm:tv-flex tv-text-xs tv-grow tv-gap-4 tv-m-0 tv-py-2 tv-pl-2;

        > li {
          @apply tv-flex tv-items-center tv-gap-1;

          > kbd {
            @apply tv-inline-flex tv-justify-center tv-items-center tv-py-0.5 tv-px-1 tv-border tv-font-mono tv-rounded-md tv-shadow-sm;
            border-color: var(--tv-zinc-200);
            color: var(--tv-zinc-800);
            background-color: var(--tv-zinc-100);
          }
        }
      }
    }

    .commands.ecommerce {
      visibility: hidden;
    }

    .trieve-powered {
      @apply tv-flex tv-items-center tv-justify-end tv-select-none tv-cursor-pointer tv-text-sm tv-text-center tv-gap-1;
      background-color: var(--bg-color);

      img {
        @apply tv-h-4 tv-w-4 tv-cursor-pointer;
      }
    }

    .additional-links {
      @apply tv-mt-4 tv-flex tv-flex-wrap tv-gap-2;

      a.source-anchor {
        @apply tv-px-2 tv-py-1 tv-rounded tv-text-sm;

        background-color: var(--tv-zinc-100);

        &.yt-anchor {
          @apply tv-max-w-44 tv-text-center tv-pt-3;
        }

        .yt-preview {
          @apply tv-h-16 tv-w-28 tv-block tv-mx-auto;
        }

        &:hover {
          background-color: var(--tv-zinc-200);
        }
      }
    }

    .carousel-root {
      width: 100%;
      overflow: hidden;
    }

    .carousel-scroll {
      display: flex;
      overflow-x: auto;
      overflow-y: hidden;
      scroll-snap-type: x-mandatory;
      scroll-behavior: smooth;
      width: 100%;
      list-style: none;
      padding: 0;
      margin: 0;
    }

    .carousel-scroll::-webkit-scrollbar {
      display: none;
    }

    .tv-carousel-gradient {
      background: linear-gradient(
        to left,
        rgb(255, 255, 255, 0.8) 0%,
        rgba(255, 255, 255, 0) 100%
      );
    }

    .tv-carousel-item {
      flex: 0 0 auto;
      padding: 0 0.15rem;
      scroll-snap-align: start;
      box-sizing: border-box;
      border-color: var(--tv-zinc-200);
      border-style: solid;

      a {
        @apply tv-rounded tv-px-2 tv-text-xs tv-py-1 tv-flex tv-flex-col tv-gap-y-1 tv-h-full;

        ::before {
          content: "";
          display: block;
          flex: 0 0 100% 100%;
        }

        &.tv-highlighted-item {
          background-color: yellow;
        }

        &.yt-anchor {
          @apply tv-text-center;
        }

        &:hover {
          @apply tv-bg-white;
        }
      }

      &:hover {
        border-color: var(--tv-prop-brand-color);
        transition: border-color 0.2s ease;
      }
    }

    .carousel-arrow {
      @apply tv-hidden md:tv-block;
    }

    .tv-carousel-item-hidden {
      visibility: hidden;
    }

    .tv-carousel-item-visibile {
      visibility: visible;
    }

    .carousel-controls {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: 5px;
    }

    .ecomm-details {
      @apply tv-flex tv-gap-1 tv-items-center tv-text-center tv-flex-col tv-px-2;
    }

    .ecomm-item-title {
      @apply tv-p-0 tv-line-clamp-4 tv-text-base tv-mb-0 tv-w-4/5;

      mark {
        @apply tv-bg-inherit;
        color: var(--tv-prop-brand-color);

        b {
          @apply tv-font-semibold;
        }
      }
    }

    .ecom-item-description {
      mark {
        @apply tv-bg-inherit;
        color: var(--tv-prop-brand-color);

        b {
          @apply tv-font-semibold;
        }
      }
    }

    .ecomm-item-price {
      @apply tv-p-0 tv-mb-0.5;
    }

    .ecommerce-featured-image-chat {
      @apply tv-mb-1 tv-max-h-48 tv-aspect-auto tv-mx-auto;
    }

    .yt-preview {
      @apply tv-h-16 tv-w-28 tv-block tv-mx-auto;
    }

    .user-message-container {
      @apply tv-max-w-[80%] tv-ml-auto;
    }

    .user {
      @apply tv-flex tv-flex-row-reverse tv-gap-1 tv-text-center tv-items-start;

      .user-text {
        @apply tv-text-left tv-px-5 tv-py-2 tv-rounded-xl;

        color: var(--tv-zinc-50);
        background-color: var(--tv-zinc-800);

        .loading {
          @apply tv-h-10 tv-w-10;
        }
      }
    }

    .loading-system {
      @apply tv-w-12;
      fill: var(--text-color);
    }

    .system,
    .code-markdown {
      @apply tv-mt-2 sm:tv-mt-2 tv-mb-2 tv-items-center tv-overflow-ellipsis;

      p:not(.ecomm-item-title) {
        @apply tv-pb-2;
      }

      a:not(.tv-carousel-item):not(.tv-carousel-item *):not(
          .additional-links *
        ) {
        text-decoration: underline;
        color: var(--tv-prop-brand-color);
      }

      .loading {
        @apply tv-h-10 tv-w-10;
      }

      pre {
        @apply tv-my-4 tv-overflow-x-scroll tv-bg-zinc-100 tv-p-4 tv-rounded-md;
      }

      ul:not(.carousel-scroll) {
        @apply tv-list-disc tv-pl-5 tv-my-4 tv-overflow-hidden;
      }

      ol {
        @apply tv-list-decimal tv-pl-5 tv-my-4 tv-overflow-hidden;
      }

      li:not(.tv-carousel-item) {
        @apply tv-my-3;

        list-style: unset;
      }

      li.tv-carousel-item {
        @apply tv-mb-4;
      }

      hr {
        @apply tv-mb-4;
      }

      .trieve-md-table {
        overflow-x: auto;
        margin-bottom: 1em;
        margin-top: 1em;

        table {
          width: 100%;
          border-collapse: collapse;
          border: 1px solid #ddd;
          font-size: 0.9em;
          margin-bottom: 0.5em;
          overflow-x: auto;

          th,
          td {
            border: 1px solid #ddd;
            padding: 8px 12px;
            text-align: left;
            vertical-align: top;
          }

          th {
            background-color: #f2f2f2;
            font-weight: bold;
            white-space: nowrap;
          }

          tr {
            border-bottom: 1px solid #ddd;
          }

          tr:nth-child(even) {
            background-color: #f9f9f9;
          }
        }
      }
    }

    .system.ecommerce {
      hr {
        @apply tv-mb-4;
      }
    }

    h1,
    h2,
    h3,
    h4 {
      @apply tv-font-semibold tv-pb-1 sm:tv-pb-2  tv-m-0 tv-leading-normal tv-pt-0 tv-text-base;

      font-family: var(--tv-prop-brand-font-family);
    }

    a {
      color: var(--tv-zinc-950);

      &:hover {
        color: var(--tv-zinc-950);
      }
    }

    .kbd-wrapper {
      @apply tv-absolute tv-right-2 tv-flex tv-py-1.5 tv-pr-1.5;

      kbd {
        @apply tv-inline-flex tv-items-center tv-rounded tv-border  tv-px-1 tv-text-xs;

        font-family: var(--tv-prop-brand-font-family);
        color: var(--tv-zinc-400);
        border-color: var(--tv-zinc-200);
      }
    }

    .suggested-queries-wrapper.ecommerce {
      @apply tv-pl-0;
    }

    .suggested-query {
      @apply tv-inline-flex tv-items-center tv-rounded-md tv-px-2 tv-py-1 tv-text-xs tv-text-left;
      color: var(--tv-zinc-900);

      &:not(p) {
        @apply tv-border;
        border-color: var(--tv-zinc-300);
        background-color: var(--tv-zinc-100);
        border-style: solid;
      }

      &:not(:disabled):not(p):hover {
        background-color: var(--tv-zinc-200);
      }

      &:not(p):disabled {
        @apply tv-cursor-not-allowed;
        color: var(--tv-zinc-400);
        border-color: var(--tv-zinc-200);
        background-color: var(--bg-color);
      }

      &.loading {
        @apply tv-animate-pulse;
      }

      &.empty-state-loading {
        @apply tv-animate-pulse;
      }
    }

    .message-wrapper {
      border-color: var(--tv-zinc-200);
    }

    .ai-avatar {
      @apply sm:tv-w-12 sm:tv-h-12 tv-rounded-full tv-flex tv-items-center tv-space-x-2;

      &.user {
        @apply sm:tv-w-10 tv-ml-1;
      }

      &.assistant {
        @apply tv-my-3;

        svg {
          fill: none;
        }
      }

      img {
        @apply tv-w-7 sm:tv-w-3/4 sm:tv-h-3/4 sm:tv-mx-auto sm:tv-mt-2;
      }

      svg {
        @apply tv-w-5 tv-h-5 sm:tv-w-3/4 sm:tv-h-3/4 sm:tv-mx-auto sm:tv-mt-2;
      }

      .tag {
        @apply tv-text-sm tv-w-fit tv-px-1.5 tv-py-1 tv-mb-0 tv-rounded-md sm:tv-hidden;
      }
    }

    .brand-paragraph {
      @apply tv-leading-8 tv-w-full;
    }

    .brand-name {
      @apply tv-text-white tv-px-1.5 tv-py-1 tv-rounded-md tv-font-[500] tv-w-fit;
    }

    /* ECOMMERCE */

    .ecommerce-featured-image {
      @apply tv-w-full tv-max-h-[16rem] tv-h-[16rem] tv-flex tv-justify-center tv-items-center tv-shrink-0 tv-overflow-hidden tv-rounded-lg;

      img {
        @apply tv-w-full;
      }

      .img-placeholder {
        @apply tv-h-full tv-w-full tv-bg-gray-200 tv-animate-pulse;
      }
    }

    .variants {
      @apply tv-flex tv-flex-wrap tv-gap-1 tv-items-center tv-text-zinc-700 tv-mt-1;

      button {
        @apply tv-text-[11px] tv-px-1 tv-border-zinc-200 tv-border tv-rounded-sm;
      }

      .variants-title {
        @apply tv-text-[11px];
      }
    }

    .content {
      p {
        @apply tv-m-3;
      }
    }

    h6 {
      @apply tv-text-base tv-font-medium tv-mb-4;
    }

    .component-header {
      color: var(--tv-zinc-500);

      .refetch {
        &:not(:disabled):hover {
          background-color: var(--tv-zinc-200);
        }
      }
    }

    .followup-questions {
      @apply tv-text-sm tv-flex tv-flex-wrap tv-gap-2 tv-mb-4;

      .followup-question {
        @apply tv-p-2 tv-text-left tv-rounded-md tv-border tv-border-solid tv-transition-all tv-flex tv-flex-row tv-justify-start tv-items-center tv-gap-2;
        border-color: var(--tv-zinc-200);

        .followup-icon {
          @apply tv-ml-0.5 tv-shrink-0 tv-size-4;
        }

        &:hover {
          background-color: var(--tv-zinc-200);
        }

        &.loading {
          @apply tv-animate-pulse;
        }

        &.empty-state-loading {
          @apply tv-animate-pulse;
        }

        svg {
          fill: none;
        }
      }
    }

    .questions {
      @apply tv-text-sm tv-flex tv-flex-wrap tv-gap-2 tv-pb-2;

      .suggested-question {
        @apply tv-p-2 tv-text-left tv-rounded-md tv-border tv-transition-all tv-border-solid;
        border-color: var(--tv-zinc-200);
        border: 1px solid var(--tv-zinc-200);
        background-color: transparent;

        .refresh-suggestions-icon {
          fill: currentcolor;
          height: 15px;
          width: 15px;
        }

        svg {
          fill: none;
        }

        &:hover {
          background-color: var(--tv-zinc-200);
        }

        &.loading {
          @apply tv-animate-pulse;
        }

        &.empty-state-loading {
          @apply tv-animate-pulse;
        }
      }
    }

    .input-wrapper {
      background-color: var(--bg-color);
      .search-icon {
        @apply tv-absolute tv-z-[51] tv-left-2;
        color: var(--tv-zinc-400);
      }

      &.trieve-mode-chat {
        .back-icon {
          @apply tv-top-[0.825rem] tv-left-5 tv-absolute tv-z-20;
        }
      }
    }

    input.trieve-mode-chat {
      @apply tv-block tv-w-full tv-rounded-lg tv-border-[1px] tv-py-1.5 tv-shadow-sm tv-ring-0 tv-outline-none sm:tv-text-sm sm:tv-leading-6 tv-pl-3 tv-pr-[5rem] tv-h-12 tv-z-10 tv-relative;
      color: var(--tv-zinc-900);
      background-color: var(--tv-zinc-50);
      border: 1px solid var(--tv-zinc-300);
      &::placeholder {
        color: var(--tv-zinc-400);
      }

      &:disabled {
        @apply tv-cursor-not-allowed;
        color: var(--tv-zinc-500);
        background-color: var(--tv-zinc-200);
      }

      &.inline-input {
        @apply tv-pl-2;

        &:focus {
          background-color: #fff;
        }
      }

      &:focus {
        border: 1px solid var(--tv-prop-brand-color);
      }
    }

    .input-flex {
      &:focus {
        border: 1px solid var(--tv-prop-brand-color);
      }
    }

    input.search-input {
      color-scheme: light;
    }

    .item {
      @apply tv-select-none tv-cursor-pointer tv-py-2 tv-text-left tv-flex tv-items-start tv-gap-2 tv-w-full tv-h-full tv-text-sm tv-outline-none tv-rounded-lg tv-px-5 tv-overflow-ellipsis;

      background-color: white;

      .ecommerce-secondary-row {
        @apply tv-flex tv-justify-between tv-items-center;

        .chat-product-button {
          @apply tv-fill-zinc-400 hover:tv-fill-zinc-800 hover:tv-bg-zinc-200 tv-py-1 tv-rounded;
        }
      }

      .chunk-path {
        @apply tv-text-xs tv-line-clamp-1 tv-overflow-ellipsis tv-text-zinc-600 tv-mb-[1px];
      }

      .chunk-title {
        @apply tv-pb-0 tv-text-base;
      }

      .chunk-title.ecommerce {
        @apply tv-text-wrap;
      }

      .chunk-price {
        @apply tv-text-base;
      }

      .post-method {
        @apply tv-text-xs tv-bg-blue-900 tv-px-1 tv-py-0.5 tv-rounded-md tv-text-blue-400 tv-mr-1;
      }

      .get-method {
        @apply tv-text-xs tv-bg-green-900 tv-px-1 tv-py-0.5 tv-rounded-md tv-text-green-400 tv-mr-1;
      }

      .delete-method {
        @apply tv-text-xs tv-bg-red-900 tv-px-1 tv-py-0.5 tv-rounded-md tv-text-red-400 tv-mr-1;
      }

      .put-method {
        @apply tv-text-xs tv-bg-yellow-900 tv-px-1 tv-py-0.5 tv-rounded-md tv-text-yellow-400 tv-mr-1;
      }

      .patch-method {
        @apply tv-text-xs tv-bg-purple-900 tv-px-1 tv-py-0.5 tv-rounded-md tv-text-purple-400 tv-mr-1;
      }

      h4 {
        @apply tv-overflow-hidden tv-whitespace-nowrap tv-text-ellipsis tv-max-w-[calc(90vw-45px)] sm:tv-max-w-[590px];

        &.yt-item {
          @apply tv-max-w-[calc(90vw-45px-7rem)] sm:tv-max-w-[590px];
        }
      }

      svg {
        @apply tv-shrink-0 tv-w-8;
      }

      mark {
        @apply tv-bg-inherit;
        color: var(--tv-prop-brand-color);

        b {
          @apply tv-font-semibold;
        }
      }

      &.group {
        @apply tv-pl-2 tv-pr-3;
      }

      &.start-chat {
        @apply tv-items-center tv-flex tv-max-w-[calc(90vw)] sm:tv-max-w-none;

        h4 {
          @apply tv-pl-0 tv-pt-0 tv-max-w-[calc(90vw-120px)] sm:tv-max-w-[400px];

          span {
            color: var(--tv-prop-brand-color);
          }
        }

        > div {
          @apply tv-justify-start tv-gap-3;

          > svg {
            @apply tv-shrink-0 tv-w-6;
            color: var(--tv-prop-brand-color);
          }
        }
      }

      &:hover,
      &:focus {
        @apply tv-outline-none tv-ring-0;
        background-color: var(--tv-zinc-100);
      }

      &:hover .arrow-link,
      &:focus .arrow-link {
        color: var(--tv-zinc-600);
      }

      .arrow-link {
        @apply tv-text-transparent tv-w-4 tv-h-4 tv-relative -tv-right-2 tv-shrink-0;
      }

      > div {
        @apply tv-flex tv-items-center tv-justify-between tv-w-full;
      }

      .description {
        color: var(--tv-zinc-600);
        @apply tv-font-normal tv-text-sm tv-m-0;
      }
    }

    &.dark {
      background-color: var(--tv-zinc-900);
      color: var(--tv-zinc-100);
      border-color: var(--tv-zinc-700);

      .tv-dark-text-white,
      .fa-magnifying-glass {
        @apply tv-text-zinc-400;
      }

      .tv-dark-from-neutral-700 {
        @apply tv-from-neutral-700;
      }

      .message-wrapper {
        border-color: var(--tv-zinc-600);
      }

      .variants {
        @apply tv-text-zinc-300;

        button {
          @apply tv-border-zinc-700;
        }
      }

      .mode-switch-wrapper {
        > div {
          background-color: var(--tv-zinc-800);

          button {
            color: var(--tv-zinc-400);

            &.active {
              @apply tv-shadow-sm;
              background-color: var(--tv-zinc-700);
              color: var(--tv-zinc-200);
            }

            svg {
              @apply tv-h-3 tv-w-3;
            }
          }
        }
      }

      .bottom-row {
        button {
          color: var(--tv-zinc-300);
          border-color: var(--tv-zinc-700);

          &:hover {
            color: var(--tv-zinc-50);
          }
        }
      }

      pre {
        @apply tv-bg-zinc-800;
      }

      ul.tags {
        color: var(--tv-zinc-200);
        border-color: var(--tv-zinc-700);

        li {
          &:hover {
            background-color: var(--tv-zinc-800);
          }

          &:hover,
          &.active {
            background-color: var(--tv-zinc-800);
          }

          &.active {
            border-color: var(--tv-prop-brand-color);
          }
        }
      }

      .questions {
        .suggested-question {
          border-color: var(--tv-zinc-700);

          &:hover {
            background-color: var(--tv-zinc-800);
          }
        }
      }
      .component-header {
        .suggested-question {
          border-color: var(--tv-zinc-700);

          &:hover {
            background-color: var(--tv-zinc-800);
          }
        }
      }

      .followup-questions {
        .followup-question {
          border-color: var(--tv-zinc-700);

          &:hover {
            background-color: var(--tv-zinc-800);
          }
        }
      }
      .component-header {
        .followup-question {
          border-color: var(--tv-zinc-700);

          &:hover {
            background-color: var(--tv-zinc-800);
          }
        }
      }

      .inline-chat-header {
        background-color: var(--tv-zinc-800);
        border-color: var(--tv-zinc-700);
      }

      .chat-footer-wrapper {
        background-color: var(--tv-zinc-900);
      }

      .inline-submit-icon {
        @apply tv-text-zinc-400;
      }

      .loading-system {
        @apply tv-w-12;
        fill: var(--tv-zinc-400);
      }

      .additional-links {
        @apply tv-flex tv-flex-wrap tv-gap-2 tv-mt-4;

        a {
          color: var(--tv-zinc-200);
          background-color: var(--tv-zinc-700);

          &:hover {
            color: var(--tv-zinc-50);
            background-color: var(--tv-zinc-800);
          }
        }
      }

      .tv-carousel-gradient {
        background: linear-gradient(
          to right,
          rgba(120, 120, 120, 0) 0%,
          rgba(120, 120, 120, 0.5) 100%
        );
      }

      .tv-carousel-item {
        color: var(--tv-zinc-100);
        background-color: var(--tv-zinc-800);
        border: 1px solid var(--tv-zinc-800);

        &:hover {
          color: var(--tv-zinc-50);
          border-color: var(--tv-zinc-600);
          background-color: var(--tv-zinc-800);
        }

        a {
          color: var(--tv-zinc-100);
          background-color: var(--tv-zinc-800);

          &:hover {
            color: var(--tv-zinc-50);
            background-color: var(--tv-zinc-800);
          }
        }
      }

      .kbd-wrapper {
        kbd {
          color: var(--tv-zinc-400);
          border-color: var(--tv-zinc-400);
        }
      }

      a {
        color: var(--tv-zinc-50);
        &:hover {
          color: var(--tv-zinc-50);
        }
      }

      input {
        background-color: var(--tv-zinc-900);
        color: var(--tv-zinc-50);
        outline: none;
        box-shadow:
          rgb(255, 255, 255) 0px 0px 0px 0px inset,
          var(--tv-zinc-600) 0px 0px 1px inset,
          rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
        border: 1px solid var(--tv-zinc-600);

        &.inline-input {
          &:focus {
            background-color: var(--tv-zinc-900);
          }
        }

        &:focus {
          outline: none;
          border: 1px solid var(--tv-prop-brand-color);
          box-shadow:
            rgb(255, 255, 255) 0px 0px 0px 0px inset,
            var(--tv-prop-brand-color) 0px 0px 1px inset,
            rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
        }
      }

      .input-wrapper {
        background-color: var(--tv-zinc-900);

        .suggested-queries-wrapper {
          .suggested-query {
            &:not(p) {
              background-color: var(--tv-zinc-900);
              border-color: var(--tv-zinc-700);
              color: var(--tv-zinc-300);
            }

            &:not(:disabled):not(p):hover {
              background-color: var(--tv-zinc-800);
            }
            &:not(p):disabled {
              @apply tv-cursor-not-allowed;
              color: var(--tv-zinc-400);
              border-color: var(--tv-zinc-700);
              background-color: var(--tv-zinc-900);
            }
          }
          > p {
            @apply tv-text-xs tv-m-0;
            color: var(--tv-zinc-300);
          }
        }

        &.docs.trieve-mode-search,
        &.pdf.trieve-mode-search,
        &.ecommerce.trieve-mode-search {
          background-color: var(--tv-zinc-900);
          color: var(--tv-zinc-50);
          outline: none;

          div.input-flex:not(:focus):not(:focus-within) {
            border-color: var(--tv-zinc-700);
          }

          input {
            @apply tv-border-none tv-outline-none;
            box-shadow: none;

            &:focus {
              @apply tv-border-none tv-outline-none;
            }
          }
        }
      }

      .trieve-powered {
        background-color: var(--tv-zinc-900);
      }

      .item {
        color: white;
        background-color: var(--tv-zinc-900);
        border-color: var(--tv-zinc-700);

        &:hover,
        &:focus {
          background-color: var(--tv-zinc-800);
        }

        .chunk-path {
          @apply tv-text-zinc-300;
        }

        .description {
          color: var(--tv-zinc-400);
        }
      }
    }

    .pdf-result-page {
      @apply tv-text-sm tv-opacity-70 tv-flex tv-gap-2;
    }
    .pdf-result-filename {
      @apply tv-text-sm tv-opacity-80 tv-flex tv-gap-2;
    }
  }
}

body {
  #open-trieve-modal {
    @apply tv-flex tv-items-center tv-text-sm tv-leading-6 tv-ring-1 tv-shadow-sm tv-justify-between tv-rounded-md tv-border-0 tv-py-1.5 tv-px-2 sm:tv-text-sm tv-truncate tv-gap-2;

    &:not(.responsive) {
      @apply tv-w-full tv-min-w-[43px] tv-max-w-[300px];
    }

    &.responsive {
      @apply sm:tv-w-full sm:tv-min-w-[43px] sm:tv-max-w-[300px];
    }

    color: var(--tv-zinc-400);
    background-color: var(--tv-zinc-50);
    outline: none;
    border: 1px solid var(--tv-zinc-300);
    box-shadow:
      rgb(255, 255, 255) 0px 0px 0px 0px inset,
      var(--tv-zinc-300) 0px 0px 1px inset,
      rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;

    &:hover {
      outline: none;
      border: 1px solid var(--tv-prop-brand-color);
      box-shadow:
        rgb(255, 255, 255) 0px 0px 0px 0px inset,
        var(--tv-prop-brand-color) 0px 0px 1px inset,
        rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
    }

    > div {
      @apply tv-flex tv-items-center tv-gap-3;

      &.responsive {
        @apply sm:tv-min-w-[42px];
      }

      &:not(.responsive) {
        @apply tv-min-w-[42px];
      }

      svg {
        @apply tv-min-w-4 tv-flex-none;
        color: var(--tv-zinc-700);

        &:hover {
          color: var(--tv-zinc-800);
        }
      }

      > div {
        @apply tv-truncate tv-min-w-0;
        &.responsive {
          @media (max-width: 640px) {
            display: none;
          }
        }
      }
    }

    .open {
      @apply tv-inline-flex tv-items-center tv-rounded tv-border tv-px-1 tv-text-xs tv-py-0.5 tv-gap-1;

      font-family: var(--tv-prop-brand-font-family);
      color: var(--tv-zinc-400);
      border-color: var(--tv-zinc-200);

      &.responsive {
        @media (max-width: 640px) {
          display: none;
        }
      }

      @media screen and (-webkit-font-smoothing: antialiased) {
        .mac {
          display: block;
        }

        .not-mac {
          display: none;
        }
      }

      .mac {
        display: none;
      }

      .not-mac {
        display: block;
      }
    }

    &.dark {
      @apply hover:tv-brightness-[1.25];
      background-color: var(--tv-zinc-900);
      color: var(--tv-zinc-600);
      outline: none;
      border: 1px solid var(--tv-zinc-600);
      box-shadow:
        rgb(255, 255, 255) 0px 0px 0px 0px inset,
        var(--tv-zinc-600) 0px 0px 1px inset,
        rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
      &:hover {
        outline: none;
        border: 1px solid var(--tv-prop-brand-color);
        box-shadow:
          rgb(255, 255, 255) 0px 0px 0px 0px inset,
          var(--tv-prop-brand-color) 0px 0px 1px inset,
          rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
      }

      svg {
        color: var(--tv-zinc-300);

        &:hover {
          color: var(--tv-zinc-100);
        }
      }

      span {
        border-color: var(--tv-zinc-400);
        color: var(--tv-zinc-400);
      }
    }
  }

  .floating-action-button {
    @apply tv-fixed tv-flex tv-flex-row tv-gap-2 tv-justify-center tv-items-center tv-cursor-pointer tv-rounded-full tv-border-0 tv-shadow-sm tv-px-4 tv-py-2.5;
    font-family: var(--tv-prop-brand-font-family);

    &.brand-color {
      background-color: var(--tv-prop-brand-color);
      color: white;

      &:hover {
        background-color: var(--tv-prop-brand-color);
      }
    }

    &:not(.brand-color) {
      @apply tv-text-black tv-bg-zinc-100;
    }

    &.dark:not(.brand-color) {
      @apply tv-bg-zinc-900 tv-text-white;

      &:hover {
        @apply tv-bg-zinc-800;
      }
    }

    &:hover {
      @apply tv-bg-zinc-200 tv-transform tv-transition-transform tv-duration-200 hover:tv-scale-110;
    }

    img {
      @apply tv-h-6;
    }
  }

  .floating-search-icon {
    @apply tv-rounded-full tv-p-[0.35rem] tv-ml-0.5 tv-flex tv-justify-center tv-items-center;

    background-color: var(--tv-prop-brand-color);

    svg {
      width: 26px;
      height: 26px;
      fill: white;
    }
  }

  .floating-search-btn-container {
    @apply tv-fixed tv-flex tv-flex-row tv-justify-center tv-items-center tv-top-[calc(50%-34px)] tv-bg-white tv-w-min tv-p-2 hover:tv-cursor-pointer;
    box-shadow: 0 0 20px 10px rgba(0, 0, 0, 0.05);

    &.dark {
      @apply tv-bg-zinc-900;
    }

    .floating-search-btn {
      @apply tv-flex tv-justify-center tv-items-center tv-rounded-full tv-p-1 tv-border-0;

      background-color: var(--tv-prop-brand-color);

      .search-icon {
        @apply tv-text-lg tv-text-white;
      }
    }
  }

  .floating-input-container {
    @apply tv-fixed tv-bottom-5 tv-flex tv-flex-row tv-items-center tv-justify-start tv-gap-2 tv-w-3/4 tv-left-[12.5%] sm:tv-left-[25%] sm:tv-w-1/2 tv-p-1 tv-pr-5 tv-h-[55px] tv-rounded-full tv-cursor-pointer tv-transition-colors tv-duration-300 tv-ease-in-out tv-bg-white tv-border-2;

    &.dark {
      @apply tv-bg-zinc-900 tv-border-zinc-600;
    }

    &:hover {
      border-color: var(--tv-prop-brand-color);
    }

    &:focus {
      border-color: var(--tv-prop-brand-color);
    }

    .floating-search-input {
      @apply tv-p-2 tv-outline-none tv-text-base tv-w-full tv-text-black tv-bg-transparent tv-text-ellipsis tv-border-none tv-shadow-none;

      font-family: var(--tv-prop-brand-font-family);
    }

    button {
      @apply tv-flex tv-justify-center tv-items-center tv-gap-4 tv-text-sm tv-bg-none tv-border-none;
    }
  }

  .trieve-search-page {
    @apply tv-w-[25%]  tv-max-w-[25%] tv-mr-2;
    &[data-display="false"] {
      display: none;
    }

    .trieve-search-subheader-w-full {
      @apply tv-w-full;
    }

    .trieve-search-page-main-section {
      @apply tv-flex tv-w-full;
    }

    .trieve-filter-sidebar {
      @apply tv-p-2 tv-border-r tv-min-h-full tv-mr-5 tv-w-full;
    }

    .trieve-filter-sidebar-section {
      @apply tv-flex tv-flex-col tv-min-w-fit tv-w-fit tv-min-h-full;
    }

    .trieve-filter-sidebar-options {
      @apply tv-min-w-fit;
    }
  }

  .trieve-active-filter-pills-container {
    @apply tv-flex tv-gap-3 tv-items-center tv-p-2 tv-border-b;

    &[data-number-selected-filters="0"] {
      display: none;
    }

    .trieve-all-active-filters {
      @apply tv-flex tv-gap-2 tv-p-2 tv-flex-wrap;

      .trieve-active-filter-pill {
        @apply tv-flex tv-items-center tv-gap-1 tv-cursor-pointer tv-px-2 tv-py-1 tv-rounded-lg tv-bg-zinc-100;

        .trieve-active-filter-pill-text {
          @apply tv-text-sm;
        }

        .trieve-active-filter-pill-remove-icon {
          @apply tv-w-4 tv-h-4;
        }

        &:hover {
          @apply tv-bg-zinc-200;
        }
      }
    }

    .trieve-clear-filters-button {
      @apply tv-rounded-lg tv-px-2 tv-py-1 tv-h-fit;

      &[data-number-selected-filters="0"] {
        display: none;
      }

      &:hover {
        @apply tv-bg-zinc-200;
      }
    }
  }

  .trieve-accordion-container {
    @apply tv-p-2 tv-transition-all tv-duration-300 tv-ease-in-out;

    .trieve-accordion-header {
      @apply tv-flex tv-items-center tv-gap-1 tv-cursor-pointer tv-w-full tv-justify-between;

      &[data-open="true"] {
        .trieve-accordion-title {
          @apply tv-font-medium;
        }
      }

      &:hover {
        .trieve-accordion-title {
          @apply tv-underline;
        }
      }

      .trieve-accordion-title {
        @apply !tv-p-0;
      }

      .trieve-accordion-details {
        @apply tv-flex tv-items-center tv-gap-1;

        .trieve-accordion-number {
          @apply tv-rounded-full tv-text-white tv-w-4 tv-h-4 tv-text-center tv-text-xs;
          background-color: var(--tv-prop-brand-color);

          &[data-value="0"] {
            display: none;
          }
        }

        .trieve-accordion-icon-container {
          @apply tv-w-4 tv-h-4;
        }
      }
    }

    .trieve-accordion-content-container {
      max-height: 0;
      overflow: hidden;
      transform-origin: top;
      transform: scaleY(0);
      transition:
        max-height 0.2s ease-out,
        transform 0.2s ease-out;
      margin-top: 0.5rem;

      &[data-open="true"] {
        transform: scaleY(1);
        max-height: 100%;
      }

      hr {
        @apply tv-mt-2;
      }

      .trieve-accordion-content {
        @apply tv-gap-2 tv-flex tv-flex-col tv-min-w-fit;
      }
    }
  }

  .trieve-filter-button-container {
    @apply !tv-flex tv-gap-2 tv-cursor-pointer tv-ml-2;

    .trieve-single-button {
      @apply tv-rounded-full tv-cursor-pointer tv-w-6 tv-h-6 tv-relative tv-flex tv-justify-center tv-items-center;
      background-color: var(--tv-zinc-200);

      &[data-active="true"] {
        background-color: var(--tv-prop-brand-color);

        .trieve-circle {
          background-color: var(--tv-zinc-50);
        }
      }

      &:hover:not([data-active="true"]) {
        background-color: var(--tv-zinc-300);
      }

      .trieve-circle {
        @apply tv-rounded-full;
        background-color: var(--tv-zinc-200);
        width: 10%;
        height: 10%;
      }

      .trieve-checkbox-icon {
        display: none;
      }
    }

    .trieve-multiple-button {
      @apply tv-rounded-md tv-cursor-pointer tv-w-6 tv-h-6 tv-flex tv-items-center tv-justify-center;
      background-color: var(--tv-zinc-200);

      &[data-active="true"] {
        background-color: var(--tv-prop-brand-color);

        .trieve-checkbox-icon {
          display: block;
          color: var(--tv-zinc-50);
          width: 80%;
          height: 80%;
          fill: currentColor;

          svg {
            width: 100% !important;
            height: 100% !important;
          }
        }
      }

      &:hover:not([data-active="true"]) {
        background-color: var(--tv-zinc-300);
      }

      .trieve-checkbox-icon {
        display: none;
      }

      .trieve-circle {
        display: none;
      }
    }

    label {
      @apply tv-cursor-pointer tv-whitespace-nowrap;
    }
  }

  .trieve-filter-main-section {
    @apply tv-w-full;
  }

  .trieve-inference-filters-form {
    @apply tv-flex tv-flex-col tv-gap-6 tv-p-2 tv-mt-2 tv-w-full;

    .trieve-inference-filters-step-container {
      @apply tv-flex tv-flex-col tv-p-2;

      &[data-prev-complete="false"] {
        .trieve-inference-filters-step-header {
          .trieve-inference-filters-step-number {
            background-color: #86868b;
          }

          .trieve-inference-filters-step-title {
            color: #86868b;
          }

          .trieve-inference-filters-step-description {
            color: #86868b;
          }
        }
      }

      .trieve-inference-filters-step-header {
        @apply tv-text-lg tv-flex tv-items-center tv-gap-2;

        .trieve-inference-filters-step-number {
          @apply tv-rounded-full tv-text-white tv-w-5 tv-h-5 tv-text-center tv-text-sm;
          background-color: var(--tv-prop-brand-color);
        }

        .trieve-inference-filters-step-title {
          @apply tv-text-xl tv-font-bold;
        }
      }

      .trieve-inference-filters-step-description {
        @apply tv-mt-0.5 tv-text-[#86868b] tv-font-bold;
      }

      .trieve-inference-filters-step-input-container {
        display: none;

        &[data-loading-state="idle"] {
          display: block;
        }

        .trieve-image-input-container {
          @apply tv-border-dashed tv-border-2 tv-rounded-xl tv-px-2 tv-py-4 tv-mt-4 tv-flex-col tv-items-center tv-justify-center tv-cursor-pointer;

          display: none;

          &[data-input-field-type="image"] {
            display: flex;
          }

          &:hover {
            border-color: var(--tv-prop-brand-color);

            .trieve-image-input-icon {
              svg {
                color: var(--tv-prop-brand-color);
              }
            }
          }

          .trieve-image-input-icon {
            @apply tv-w-52 tv-h-48;

            &[data-image-selected="true"] {
              display: none;
            }

            svg {
              color: var(--tv-zinc-400);
            }
          }

          .trieve-image-input-preview {
            @apply tv-max-h-48;
            display: none;

            &[data-image-selected="true"] {
              display: block;
            }
          }

          .trieve-image-input-placeholder {
            @apply tv-mt-6 tv-max-w-[75%] tv-text-center;
          }
        }

        .trieve-text-step-container {
          &[data-input-field-type="text"] {
            display: block;
          }
        }

        .trieve-text-step-container,
        .trieve-inference-filters-step-tags-container {
          display: none;

          &[data-prev-complete="false"] {
            .trieve-text-input-container {
              display: none;
            }

            .trieve-text-button-container {
              display: none;
            }
          }

          &[data-completed="true"] {
            .trieve-text-button-container {
              display: none;
            }
          }

          .trieve-text-input-container {
            @apply tv-w-full tv-mt-4;

            .trieve-text-input-label {
              @apply tv-block tv-ml-1 tv-text-gray-700 tv-text-lg;
            }

            .trieve-text-input-textarea-container {
              .trieve-text-input-textarea {
                @apply tv-block tv-w-full tv-rounded-xl tv-bg-white tv-px-3 tv-py-1.5 tv-outline tv-outline-1 tv--outline-offset-1 tv-outline-gray-300 placeholder:tv-text-gray-400 focus:tv-outline focus:tv-outline-2 focus:tv--outline-offset-2 tv-text-black;

                &:focus,
                &:hover {
                  outline-color: var(--tv-prop-brand-color);
                }
              }
            }
          }

          .trieve-text-button-container {
            @apply tv-flex tv-w-full tv-mt-4;

            .trieve-text-input-button {
              @apply tv-flex tv-items-center tv-justify-center tv-px-3 tv-py-1.5 tv-rounded-xl tv-gap-x-1;

              background-color: var(--tv-prop-brand-color);
              color: white;

              &:hover {
                @apply tv-outline tv-outline-2 tv-outline-offset-2;

                outline-color: var(--tv-prop-brand-color);
              }

              &[disabled] {
                @apply tv-cursor-not-allowed tv-opacity-50;
                background-color: var(--tv-zinc-300);
                color: var(--tv-zinc-50);
                cursor: not-allowed;
                pointer-events: none;
                outline: none;
                box-shadow: none;
              }
            }
          }
        }

        .trieve-inference-filters-step-tags-container {
          display: none;

          &[data-input-field-type="tags"] {
            display: block;
          }

          .trieve-inference-filters-step-tags {
            display: none;

            &[data-prev-complete="true"] {
              display: block;
            }

            .trieve-inference-filters-step-tags-section-title {
              @apply tv-text-lg tv-mb-2 tv-mt-3;
            }

            .trieve-inference-filters-step-row {
              @apply tv-flex tv-flex-wrap tv-gap-2 tv-mt-4;
            }

            .trieve-inference-filters-step-tags-children {
              display: none;

              &[data-active="true"] {
                display: block;
              }
            }

            button.trieve-inference-filters-step-tag {
              @apply tv-flex tv-items-center tv-gap-x-1 tv-py-1 tv-px-2 tv-rounded-xl tv-cursor-pointer tv-bg-zinc-100;

              &[data-active="true"] {
                background-color: var(--tv-prop-brand-color);
                color: white;

                .trieve-checkbox-icon {
                  display: block;
                }
              }

              &:hover:not([data-active="true"]) {
                background-color: var(--tv-zinc-200);
                color: var(--tv-prop-brand-color);

                .trieve-checkbox-icon {
                  display: block;
                }
              }

              .trieve-checkbox-icon {
                display: none;
              }
            }
          }
        }

        .trieve-inference-filters-search-modal-container {
          display: none;

          &[data-input-field-type="search_modal"] {
            display: block;
          }

          &[data-prev-complete="false"] {
            .trieve-inference-filters-search-modal {
              display: none;
            }
          }

          .trieve-inference-filters-search-modal {
            display: block;
          }
        }
      }

      .trieve-inference-filters-step-loading-container {
        @apply tv-flex tv-flex-col tv-items-center tv-justify-center tv-h-32;

        &[data-loading-state="idle"] {
          display: none;
        }

        svg {
          @apply tv-w-12;
        }

        .trieve-loading-text {
          @apply tv-animate-pulse;
        }
      }
    }
  }
}
