/* ============================================================================
   stage.css — Phase R2 — context-aware full-screen takeover styling.

   Layer architecture (z-index order, low to high):
     0      — base panes (#shell-main content)
     90     — app shell nav and header
     980    — reachability banner / shell-level affordances
     990    — bubble host (floating minimized stage chips)
     1000   — stage root (full-screen takeovers)

   The stage root and bubble host both sit at fixed positions outside the
   normal flow. The bubble host has pointer-events:none on itself so it
   doesn't block clicks on the underlying app shell; only the bubble
   buttons themselves opt back into pointer-events.
   ========================================================================= */

#y-stage-root {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1000;
    contain: layout style;
}

#y-bubble-host {
    position: fixed;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 96px);
    right:  calc(env(safe-area-inset-right,  0px) + 16px);
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 990;
    pointer-events: none;
}

/* ── Stage container ────────────────────────────────────────────────────── */

.y-stage {
    position: fixed;
    inset: 0;
    pointer-events: auto;
    background: var(--y-stage-scrim, rgba(8, 10, 18, 0.94));
    backdrop-filter: blur(28px) saturate(120%);
    -webkit-backdrop-filter: blur(28px) saturate(120%);
    display: flex;
    flex-direction: column;
    padding-top:    env(safe-area-inset-top,    0px);
    padding-right:  env(safe-area-inset-right,  0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    padding-left:   env(safe-area-inset-left,   0px);
    color: #f0f3fa;
    container-type: inline-size;
    /* Enter state */
    opacity: 0;
    transform: scale(0.965);
    transition:
        opacity   320ms cubic-bezier(0.20, 0.80, 0.20, 1.00),
        transform 320ms cubic-bezier(0.20, 0.80, 0.20, 1.00);
}

.y-stage[data-presented="true"] {
    opacity: 1;
    transform: scale(1);
}

/* Color identity hooks. Each pane will override these in its own CSS
   when stages bear that pane's color (e.g., green for the call stage). */
.y-stage[data-color="green"]  { --y-stage-accent: #5fd17a; }
.y-stage[data-color="red"]    { --y-stage-accent: #f06b58; }
.y-stage[data-color="orange"] { --y-stage-accent: #f0a050; }
.y-stage[data-color="yellow"] { --y-stage-accent: #f0d050; }
.y-stage[data-color="blue"]   { --y-stage-accent: #6aa8f0; }
.y-stage[data-color="indigo"] { --y-stage-accent: #8a78f0; }
.y-stage[data-color="violet"] { --y-stage-accent: #c878f0; }

/* ── Floating bubble (minimized stage chip) ─────────────────────────────── */

.y-bubble {
    pointer-events: auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: rgba(20, 24, 36, 0.92);
    backdrop-filter: blur(14px) saturate(110%);
    -webkit-backdrop-filter: blur(14px) saturate(110%);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    color: #f0f3fa;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
    transition:
        transform   180ms cubic-bezier(0.2, 0.8, 0.2, 1),
        box-shadow  180ms cubic-bezier(0.2, 0.8, 0.2, 1),
        border-color 180ms ease;
    /* Subtle entry */
    animation: y-bubble-in 240ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.y-bubble:hover {
    transform: translateY(-2px);
    box-shadow:
        0 14px 32px rgba(0, 0, 0, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.20);
}

.y-bubble:active { transform: translateY(0); }

.y-bubble:focus-visible {
    outline: 2px solid var(--y-stage-accent, #f0d088);
    outline-offset: 3px;
}

.y-bubble-icon  { font-size: 18px; line-height: 1; }
.y-bubble-label { white-space: nowrap; max-width: 180px; overflow: hidden; text-overflow: ellipsis; }

@keyframes y-bubble-in {
    from { opacity: 0; transform: translateY(8px) scale(0.92); }
    to   { opacity: 1; transform: translateY(0)   scale(1);    }
}

/* Bubble color identity */
.y-bubble[data-color="green"]  { border-color: rgba(95, 209, 122, 0.35); }
.y-bubble[data-color="red"]    { border-color: rgba(240, 107, 88, 0.35); }
.y-bubble[data-color="orange"] { border-color: rgba(240, 160, 80, 0.35); }
.y-bubble[data-color="yellow"] { border-color: rgba(240, 208, 80, 0.35); }
.y-bubble[data-color="blue"]   { border-color: rgba(106, 168, 240, 0.35); }
.y-bubble[data-color="indigo"] { border-color: rgba(138, 120, 240, 0.35); }
.y-bubble[data-color="violet"] { border-color: rgba(200, 120, 240, 0.35); }

/* ── Reduced motion + small viewport polish ─────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .y-stage,
    .y-bubble {
        transition: none !important;
        animation: none !important;
    }
    .y-stage[data-presented="true"] { opacity: 1; transform: none; }
}

/* On very small viewports give the bubble host a bit of headroom above the
   bottom nav. The exact 96px offset is a sensible default that works with
   the existing shell-nav height. */
@container (max-width: 380px) {
    .y-bubble-label { max-width: 120px; }
}

/* View Transitions API hooks — small touch so the cross-stage morph feels
   intentional rather than jumpy on browsers that support it. */
@supports (view-transition-name: foo) {
    ::view-transition-old(root),
    ::view-transition-new(root) {
        animation-duration: 280ms;
        animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
    }
}