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

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

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

  :global {
    [data-main=true] {
      container-type: inline-size;
      --u: 1cqw;
      --rem: 16px;
      --margin: #{clampUnit(20, 110)};
      --negative-margin: calc(var(--margin) * -1);
      --gap: #{clampUnit(16, 32)};
    }

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

  &:not([data-embedded=true]) {
    position: fixed;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 9999;

    &[data-mode=chat] {
      @include bp(sm) {
        :global {
          [data-main=true] {
            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);
          }
        }
      }
    }
  }
}