.ai-panel { position: fixed; z-index: 80; inset: 0; display: flex; align-items: flex-end; justify-content: flex-end; padding: 24px; background: rgba(17,24,22,.28); opacity: 0; pointer-events: none; transition: opacity .22s ease; }
.ai-panel.is-open { opacity: 1; pointer-events: auto; }
.ai-panel-dialog { position: relative; width: min(430px,calc(100vw - 48px)); height: min(720px,calc(100dvh - 48px)); overflow: hidden; background: #f7f3ea; border: 1px solid rgba(247,243,234,.5); box-shadow: 0 28px 90px rgba(0,0,0,.32); transform: translateY(16px) scale(.985); transform-origin: bottom right; transition: transform .22s ease; }
.ai-panel.is-open .ai-panel-dialog { transform: none; }
.ai-panel iframe { display: block; width: 100%; height: 100%; border: 0; background: #f7f3ea; }
.ai-panel-close { position: absolute; z-index: 1; top: 12px; right: 12px; width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid rgba(247,243,234,.32); background: rgba(17,24,22,.78); color: #f7f3ea; font-size: 24px; line-height: 1; cursor: pointer; }
@media (max-width: 620px) { .ai-panel { padding: 12px 0 0; } .ai-panel-dialog { width: 100%; height: calc(100dvh - 12px); border-right: 0; border-bottom: 0; border-left: 0; transform-origin: bottom; } .ai-panel-close { top: 10px; right: 10px; } }