.ai-panel { position: fixed; z-index: 80; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(17,24,22,.62); 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(1100px,100%); height: min(760px,92svh); 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); 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: 0; } .ai-panel-dialog { width: 100%; height: 100svh; border: 0; } .ai-panel-close { top: 10px; right: 10px; } }