/* * Anu-AI-Chat — front-end widget: fullscreen toggle styling. * * The bundled widget already styles `.aac-window__btn` for header * actions, so we mostly inherit. We only: * - guarantee the new button matches the close X visually * - apply a focus ring for keyboard users * - when is set, expand `.aac-window` * to fill the viewport with smooth animation. * * Scoped: never touches anything outside the widget DOM. */ .aac-window__btn--fullscreen { display: inline-flex !important; align-items: center; justify-content: center; cursor: pointer; } .aac-window__btn--fullscreen:focus-visible { outline: 2px solid #fff; outline-offset: 2px; } /* Fullscreen mode — apply only to the chat window when toggled. */ html[data-aac-fullscreen="1"] .aac-window { position: fixed !important; inset: 0 !important; width: 100vw !important; height: 100vh !important; max-width: 100vw !important; max-height: 100vh !important; border-radius: 0 !important; margin: 0 !important; z-index: 2147483646 !important; box-shadow: none !important; transition: border-radius 0.2s ease; } /* The bubble (toggle pill) is irrelevant while fullscreen — hide it. */ html[data-aac-fullscreen="1"] .aac-bubble { display: none !important; } /* Lock background scroll while fullscreen so the chat owns the viewport. */ body.aac-fullscreen-on { overflow: hidden !important; } /* Header sticks to the top in fullscreen so actions stay reachable. */ html[data-aac-fullscreen="1"] .aac-window__header { position: sticky; top: 0; z-index: 2; } /* Center the messages column at large widths for readability. */ html[data-aac-fullscreen="1"] .aac-messages { max-width: 980px; margin: 0 auto; width: 100%; } html[data-aac-fullscreen="1"] .aac-input, html[data-aac-fullscreen="1"] .aac-input__wrapper { max-width: 980px; margin-left: auto; margin-right: auto; width: 100%; } /* Smooth open/close transitions when toggling fullscreen. */ .aac-window { transition: width 0.22s ease, height 0.22s ease, border-radius 0.22s ease, inset 0.22s ease; } /* On very small screens (mobile), the widget already fills the screen, so the fullscreen mode is essentially a no-op — keep button visible for consistency but disable the layout overrides. */ @media (max-width: 520px) { html[data-aac-fullscreen="1"] .aac-window { transition: none; } }