.chat-fab-window { position: relative; display: flex; flex-direction: column; width: 100%; height: 100%; /* Use Mantine variables in the editor; fall back to shared tokens in storybook */ background: var(--mantine-color-body, var(--color-surface, #ffffff)); border-radius: 16px; border: 1px solid var(--border-subtle, var(--color-border, #e3e8ee)); box-shadow: 0 8px 32px rgba(15, 23, 42, 0.14), 0 2px 8px rgba(15, 23, 42, 0.06); overflow: hidden; /* Closed state: collapsed toward bottom-right origin */ opacity: 0; transform: scale(0.9) translateY(14px); pointer-events: none; transform-origin: bottom right; transition: opacity 200ms ease, transform 220ms cubic-bezier(0.32, 0.72, 0, 1); } .chat-fab-window--open { opacity: 1; transform: scale(1) translateY(0); pointer-events: auto; } [data-mantine-color-scheme="dark"] .chat-fab-window, [data-theme="dark"] .chat-fab-window { box-shadow: 0 8px 32px rgba(0, 0, 0, 0.38), 0 2px 8px rgba(0, 0, 0, 0.22); } @media (prefers-reduced-motion: reduce) { .chat-fab-window { transition: opacity 100ms ease; } }