/* ── PANEL CHROME ────────────────────────────────────────────────────────────
   Phase 2 of panel-unification. Single source of truth for panel chrome:
   the box, header, body scroll behavior, expanded mode, mobile rules, Cally.
   Per-panel CONTENT lives in each panel's own *-content.css file.

   Step 10 cleanup (2026-05-06): all 8 stage panels migrated and reflect
   migrated. The legacy `.stage-panel-*` comma-grouped aliases that paired
   each `.panel-*` rule have been removed — every panel now emits `.panel-*`
   directly via the factory.

   `.stage-cally-*` and `.panel-cally-*` retain distinct margins by
   intentional design (stage: edge-to-edge `10px 0 24px 0`, reflect: inset
   `10px 12px 10px 12px`). Both look right; both stay. See feedback memory
   "Lead with the delta on cleanup passes."

   Loaded after stage.css and reflect.css in index.html so panel.css's rules
   win the cascade for migrated panels.

   Phase 2 PRD v4 §5.1 / §5.2 / §6.10.
   ─────────────────────────────────────────────────────────────────────────── */


/* ── Base container ────────────────────────────────────────────────────────── */

.panel {
    position: fixed;
    bottom: 60px;     /* anchored 60px above viewport bottom */
    right:  20px;
    width: 340px;
    /* Cap so the panel's top edge can't grow above 220px from the viewport top
       (which would cover the score-strip's quick-access icons). The 280
       below = 60 (bottom anchor) + 220 (top edge cap). On tall viewports the
       panel may end shorter than this cap when content is sparse — intrinsic
       sizing wins, top edge sits even higher (further from the UI). Mobile
       overrides below in @media (max-width: 600px). */
    max-height: calc(100vh - 280px);
    max-height: calc(100dvh - 280px); /* iOS Safari: dvh excludes browser chrome */
    background: var(--bg-panel);
    border: 1px solid var(--box-border);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    z-index: 500;
    overflow: hidden;
    animation: cp-fade-in 0.15s ease;
    display: flex;
    flex-direction: column;
}

.panel-hidden {
    display: none !important;
}


/* ── Header / drag handle ──────────────────────────────────────────────────── */

.panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px 10px;
    border-bottom: 1px solid var(--box-border);
    cursor: grab;
    user-select: none;
    position: relative;
    min-height: 52px;
}

.panel-header:active {
    cursor: grabbing;
}

.panel.is-dragging .panel-header {
    cursor: grabbing;
}


/* ── Header layout: title-group (left) / actions (right) ──────────────────── */

.panel-title-group {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.panel-title {
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-muted);
}

.panel-date {
    font-size: 0.78rem;
    color: var(--accent-color);
    font-weight: 500;
    letter-spacing: 0.2px;
}

.panel-header-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.panel-expand-btn {
    padding: 4px;
}


/* ── Scrollable body ──────────────────────────────────────────────────────── */

.panel-body {
    padding: 12px 16px 16px;
    overflow-y: auto;
    flex: 1 1 auto;
    min-height: 0;
    /* Disable browser scroll-anchoring during content updates while keyboard
       is open. Unconditional rather than scoped to .panel-keyboard-open
       because no current panel uses append-on-load / infinite-scroll
       patterns where anchoring would be desirable. */
    overflow-anchor: none;
    -webkit-overflow-scrolling: touch; /* iOS: momentum scroll inside fixed panel */
    overscroll-behavior: contain;       /* prevent scroll chaining to page */
    scrollbar-width: thin;
    scrollbar-color: var(--box-border) var(--bg-main);
}

.panel-body::-webkit-scrollbar       { width: 4px; }
.panel-body::-webkit-scrollbar-track { background: var(--bg-main); }
.panel-body::-webkit-scrollbar-thumb { background-color: var(--box-border); border-radius: 2px; }


/* ── Expanded (full-screen) state ─────────────────────────────────────────── */

.panel-expanded {
    top:        0 !important;
    left:       50% !important;
    right:      auto !important;
    bottom:     0 !important;
    width:      100% !important;
    max-width:  600px;
    transform:  translateX(-50%);
    max-height: 100vh;
    max-height: 100dvh; /* iOS Safari */
    border-radius: 0;
    z-index: 800;
    box-shadow: 0 0 0 100vw rgba(0, 0, 0, 0.85);
    overflow: hidden; /* keep clipping; inner body handles its own scroll */
}

.panel-expanded .panel-body {
    max-height: calc(100vh - 56px);
    max-height: calc(100dvh - 56px); /* iOS Safari dvh fix */
}


/* ── Cally row (unified) ──────────────────────────────────────────────────── */
/* Stage Cally and reflect Cally are visually IDENTICAL except for the row
   margin (stage: `10px 0 24px 0`, reflect: `10px 12px 10px 12px`). Comma-
   grouping `.stage-cally-*` is safe (identical values); `.reflect-cally-*`
   stays out of the group and continues to be governed by reflect.css until
   step 9 Cally unification. */

.panel-cally-row,
.stage-cally-row {
    display: flex;
    align-items: center;
    margin: 10px 0 24px 0;
    gap: 0;
}

.panel-cally-bubble,
.stage-cally-bubble {
    position: relative;
    flex: 1;
    margin-right: 8px;
    background: var(--bg-panel);
    border: 1px solid var(--accent-color);
    border-radius: 8px;
    padding: 8px 10px;
    min-height: 40px;
    display: flex;
    align-items: center;
}

.panel-cally-bubble::after,
.stage-cally-bubble::after {
    content: '';
    position: absolute;
    right: -8px;
    top: 50%;
    transform: translateY(-50%);
    border-width: 7px 0 7px 8px;
    border-style: solid;
    border-color: transparent transparent transparent var(--accent-color);
}

.panel-cally-bubble::before,
.stage-cally-bubble::before {
    content: '';
    position: absolute;
    right: -6px;
    top: 50%;
    transform: translateY(-50%);
    border-width: 6px 0 6px 7px;
    border-style: solid;
    border-color: transparent transparent transparent var(--bg-panel);
    z-index: 1;
}

.panel-cally-bubble-text,
.stage-cally-bubble-text {
    font-size: 0.78rem;
    color: var(--accent-color);
    margin: 0;
    line-height: 1.4;
}

.panel-cally-sprite,
.stage-cally-sprite {
    width: 48px;
    height: 48px;
    image-rendering: pixelated;
    object-fit: contain;
    flex-shrink: 0;
    padding-left: 10px;
    filter: var(--icon-accent-filter);
}

/* Trigger button on the day grid (ritual-reflect row). Renamed from
   .reflect-cally-trigger in step 9. No standalone CSS rule today — styling
   inherits from .nav-icon-button. Listed here as a hook for step 10. */
.panel-cally-trigger {
    /* (intentionally empty — class is a hook, not a styled selector) */
}


/* ── Mobile rules ─────────────────────────────────────────────────────────── */

@media (max-width: 600px) {
    /* Edge-to-edge gutter, top-anchor when not expanded.
       !important wins over inline-style positions JS may have written from
       desktop drag state. (Phase 1 §5.1 root-cause.) */
    .panel {
        left: 8px;
        right: 8px;
        width: auto;
    }

    .panel:not(.panel-expanded) {
        top: 8px !important;
        bottom: auto !important;
        max-height: calc(100vh - 80px);   /* fallback: older iOS Safari */
        max-height: calc(100dvh - 80px);  /* iOS 15.4+ */
    }

    /* Body height derived from dvh (NOT vh) so panel chrome doesn't clip.
       Formula: dvh - panel-top(8) - header(52) - safe-area - buffer(90).
       Padding ensures bottom-most content scrolls fully into view above
       iOS browser chrome / home indicator. */
    .panel:not(.panel-expanded) .panel-body {
        max-height: calc(100vh - 150px);
        max-height: calc(100dvh - 150px - env(safe-area-inset-bottom, 0px));
        padding-bottom: calc(48px + env(safe-area-inset-bottom, 0px));
    }

    /* Lock background scroll while any panel is visible. Prevents iOS
       from auto-scrolling the document during keyboard show, and matches
       the single-panel mobile UX model. position:fixed is the robust lock
       iOS Safari respects (overflow:hidden alone can be bypassed when a
       focused input triggers iOS's scroll-into-view).

       The factory's _lockBodyScroll captures window.scrollY before adding
       this class, sets body.style.top to -scrollY (preserving visual
       position), and restores scrollY after class removal. PRD v6 R16 +
       Phase 1 §5.7 + the 2026-05-06 panel-close-scroll-unlock fix. */
    body.panel-open-mobile {
        overflow: hidden;
        position: fixed;
        left: 0;
        right: 0;
        width: 100%;
    }
}