@import '../../scss/mixin';

.root {
  --s: 1;
  --u: 1vw;
  --rem: 16px;

  &,
  :global(.--scheme-light) &,
  :global([data-theme='light']) & {
    --neutral-50: #FFFFFF;
    --neutral-100: #F8FAFC;
    --neutral-200: #EEF2FF;
    --neutral-300: #E7E7E7;
    --neutral-400: #CBD5E1;
    --neutral-500: #94A3B8;
    --neutral-600: #475569;
    --neutral-700: #1E293B;
    --neutral-800: #3E3F41;
    --neutral-900: #262626;
    --neutral-950: #000000;
  }

  @media (prefers-color-scheme: dark) {
    --neutral-50: #080808;
    --neutral-100: #141414;
    --neutral-200: #3E3F41;
    --neutral-300: #3E3F41;
    --neutral-400: #3a3a3a;
    --neutral-500: #94A3B8;
    --neutral-600: #CBD5E1;
    --neutral-700: #E7E7E7;
    --neutral-800: #EEF2FF;
    --neutral-900: #F8FAFC;
    --neutral-950: #FFFFFF;
  }

  :global(.--scheme-dark) &,
  :global([data-theme='dark']) & {
    --neutral-50: #080808;
    --neutral-100: #141414;
    --neutral-200: #3E3F41;
    --neutral-300: #3E3F41;
    --neutral-400: #3a3a3a;
    --neutral-500: #94A3B8;
    --neutral-600: #CBD5E1;
    --neutral-700: #E7E7E7;
    --neutral-800: #EEF2FF;
    --neutral-900: #F8FAFC;
    --neutral-950: #FFFFFF;
  }

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
  height: 100%;

  :global(.llm__main) {
    container-type: inline-size;
    --u: 1cqw;
    --rem: 16px;
    --margin: #{clampUnit(20, 110)};
    --negative-margin: calc(var(--margin) * -1);
    --gap: #{clampUnit(16, 32)};
  }

  :global(.llm__container) {
    padding: 0 clampUnit(20, 110);
  }

  &:not(.-embedded) {
    position: fixed;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 9999;

    &.-chat {
      @include bp(sm) {
        :global(.llm__main) {
          position: absolute;
          width: 100%;
          height: 100%;
          overflow: hidden;
          top: var(--llm-chat-top);
          right: var(--llm-chat-right);
          bottom: var(--llm-chat-bottom);
          left: var(--llm-chat-left);
          max-width: var(--llm-chat-max-width);
          max-height: var(--llm-chat-max-height);
          border-radius: var(--llm-chat-border-radius);
          box-shadow: var(--llm-chat-box-shadow);
        }
      }
    }
  }
}