/* Plan with AI — full-coverage right-slide drawer.
 * Designed as a shared module: any page that wants the planner just includes
 *   <link rel="stylesheet" href="/css/plan-drawer.css">
 *   <script src="/js/plan-drawer.js" defer></script>
 * then calls window.openPlanDrawer() from any element.
 * The drawer embeds /plan?embed=1 in an iframe so all planner state, auth, and
 * API calls live in that document — no duplication, no cross-frame state sync.
 */

.plan-drawer {
    position: fixed; inset: 0;
    background: rgba(15, 23, 42, 0.55);
    z-index: 99990;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}
.plan-drawer.is-open { opacity: 1; visibility: visible; }

.plan-drawer-panel {
    position: fixed; top: 0; bottom: 0; right: 0;
    width: 100%;
    max-width: 960px;
    background: #fff;
    box-shadow: -8px 0 32px rgba(15, 23, 42, 0.18);
    transform: translateX(100%);
    transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex; flex-direction: column;
    will-change: transform;
}
.plan-drawer.is-open .plan-drawer-panel { transform: translateX(0); }

.plan-drawer-close {
    position: absolute;
    top: 14px; right: 14px;
    width: 36px; height: 36px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(15, 23, 42, 0.12);
    display: grid; place-items: center;
    cursor: pointer;
    color: #0f172a;
    z-index: 2;
    transition: background 0.15s, border-color 0.15s;
    font-family: inherit;
}
.plan-drawer-close:hover { background: #f1f5f9; border-color: rgba(15, 23, 42, 0.24); }
.plan-drawer-close:focus-visible { outline: 2px solid #c34a1f; outline-offset: 2px; }
.plan-drawer-close svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.plan-drawer iframe {
    width: 100%; height: 100%;
    border: 0;
    flex: 1;
    background: #fff;
}

/* Lock host page scroll while drawer is open. */
body.plan-drawer-open { overflow: hidden; }

@media (max-width: 640px) {
    .plan-drawer-close { top: 10px; right: 10px; width: 32px; height: 32px; }
}