container.scss

@use "../../cssUtils" as cssUtils;

.openui-bottom-tray-container {
  display: flex;
  position: fixed;
  // Leave space for the 56px trigger + spacing (16px bottom + 56px height + 12px gap = 84px)
  bottom: 84px;
  right: cssUtils.$space-l;
  height: calc(90% - 84px);
  max-height: 768px;
  width: 448px;
  overflow: hidden;
  flex-direction: column;

  // Cone animation: expand from bottom-right (where trigger is)
  transform-origin: bottom right;
  transition:
    transform 0.25s ease-in-out,
    opacity 0.25s ease-in-out,
    clip-path 0.25s ease-in-out;

  border: 1px solid cssUtils.$border-default;
  border-radius: cssUtils.$radius-4xl;
  box-shadow: cssUtils.$shadow-2xl;

  background: cssUtils.$chat-container-bg;
  box-sizing: border-box;
  & * {
    box-sizing: border-box;
  }

  // Open state - fully expanded
  &--open {
    transform: scale(1);
    opacity: 1;
    clip-path: ellipse(150% 150% at 100% 100%);
  }

  // Closed state - collapsed to trigger point with cone clip
  &--closed {
    transform: scale(0.1);
    opacity: 0;
    pointer-events: none;
    clip-path: ellipse(0% 0% at 100% 100%);
  }

  // Mobile fullscreen
  @media (max-width: 768px) {
    right: 0;
    left: 0;
    top: 0;
    bottom: 0;
    width: 100dvw;
    height: 100dvh;
    max-height: none;
    max-width: none;
    border-radius: 0;
    border: none;

    // On mobile, expand from bottom-right corner where trigger was
    &--closed {
      transform: scale(0.1);
      clip-path: ellipse(0% 0% at 100% 100%);
    }
  }
}