/* V3Labs Panel — base styles for every panel variant.
   Consumed by: right/left slide-in, bottom sheet, full overlay, codex. */

/* ═══ Veil ═══ */
.panel-veil {
    position: fixed;
    inset: 0;
    background: var(--pnl-veil);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--pnl-dur-in) var(--pnl-ease);
    z-index: var(--z-panel);
}
.panel-veil[data-active="true"] {
    opacity: 1;
    pointer-events: auto;
}

/* ═══ Panel base ═══ */
.panel {
    position: fixed;
    background: var(--surf-0);
    color: var(--ink-0);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    z-index: calc(var(--z-panel) + 1);
    will-change: transform, opacity;
    border: 1px solid var(--rule);
}

.panel[data-entering="true"],
.panel[data-leaving="true"]  { pointer-events: none; }

/* ─── Variant: right slide-in ─── */
.panel--right {
    top: calc(var(--ticker-h) + var(--nav-h));
    right: 0;
    bottom: var(--bar-h);
    width: var(--panel-w, 520px);
    max-width: 100vw;
    border-left: 1px solid var(--rule-strong);
    border-top: 0; border-right: 0; border-bottom: 0;
    background: linear-gradient(180deg,
        rgba(0, 0, 0, 0.92) 0%,
        rgba(5, 6, 10, 0.95) 100%);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: -24px 0 48px rgba(0, 0, 0, 0.6), -1px 0 0 rgba(6, 182, 212, 0.12);
}
.panel--right[data-state="mounted"] { transform: translateX(0); opacity: 1; }
.panel--right[data-state="pre"]     { transform: translateX(16px); opacity: 0; }
.panel--right[data-state="leaving"] { transform: translateX(12px); opacity: 0; transition: all var(--pnl-dur-out) var(--pnl-ease); }
.panel--right { transition: transform var(--pnl-dur-in) var(--pnl-ease), opacity var(--pnl-dur-in) var(--pnl-ease); }

/* ─── Variant: left slide-in ─── */
.panel--left {
    top: calc(var(--ticker-h) + var(--nav-h));
    left: 0;
    bottom: var(--bar-h);
    width: var(--panel-w, 360px);
    max-width: 100vw;
    border-right: 1px solid var(--rule-strong);
    border-top: 0; border-left: 0; border-bottom: 0;
    background: linear-gradient(180deg,
        rgba(0, 0, 0, 0.92) 0%,
        rgba(5, 6, 10, 0.95) 100%);
    backdrop-filter: blur(20px);
    box-shadow: 24px 0 48px rgba(0, 0, 0, 0.6), 1px 0 0 rgba(6, 182, 212, 0.12);
    transition: transform var(--pnl-dur-in) var(--pnl-ease), opacity var(--pnl-dur-in) var(--pnl-ease);
}
.panel--left[data-state="mounted"] { transform: translateX(0); opacity: 1; }
.panel--left[data-state="pre"]     { transform: translateX(-16px); opacity: 0; }
.panel--left[data-state="leaving"] { transform: translateX(-12px); opacity: 0; transition: all var(--pnl-dur-out) var(--pnl-ease); }

/* ─── Variant: bottom sheet ─── */
.panel--bottom {
    left: 0;
    right: 0;
    bottom: var(--bar-h);
    height: var(--panel-h, 70vh);
    max-height: calc(100vh - var(--ticker-h) - var(--nav-h) - var(--bar-h));
    border-top: 1px solid var(--rule-strong);
    border-left: 0; border-right: 0; border-bottom: 0;
    background: linear-gradient(180deg,
        rgba(0, 0, 0, 0.96) 0%,
        rgba(5, 6, 10, 0.98) 100%);
    backdrop-filter: blur(20px);
    box-shadow: 0 -24px 48px rgba(0, 0, 0, 0.6), 0 -1px 0 rgba(6, 182, 212, 0.12);
    transition: transform var(--pnl-dur-in) var(--pnl-ease), opacity var(--pnl-dur-in) var(--pnl-ease);
}
.panel--bottom[data-state="mounted"] { transform: translateY(0); opacity: 1; }
.panel--bottom[data-state="pre"]     { transform: translateY(20px); opacity: 0; }
.panel--bottom[data-state="leaving"] { transform: translateY(16px); opacity: 0; transition: all var(--pnl-dur-out) var(--pnl-ease); }

/* ─── Variant: overlay (modal) ─── */
.panel--overlay {
    inset: calc(var(--ticker-h) + var(--nav-h) + 32px) 32px calc(var(--bar-h) + 32px) 32px;
    max-width: var(--panel-max, 1200px);
    margin: 0 auto;
    border: 1px solid var(--rule-strong);
    border-radius: var(--r-2);
    background: linear-gradient(180deg,
        rgba(0, 0, 0, 0.96) 0%,
        rgba(5, 6, 10, 0.98) 100%);
    backdrop-filter: blur(24px);
    box-shadow: 0 48px 96px rgba(0, 0, 0, 0.65);
    transition: transform var(--pnl-dur-in) var(--pnl-ease), opacity var(--pnl-dur-in) var(--pnl-ease);
}
.panel--overlay[data-state="mounted"] { transform: scale(1); opacity: 1; }
.panel--overlay[data-state="pre"]     { transform: scale(0.97); opacity: 0; }
.panel--overlay[data-state="leaving"] { transform: scale(0.98); opacity: 0; transition: all var(--pnl-dur-out) var(--pnl-ease); }

/* ─── Variant: fullscreen overlay (play-game, create-dexhero) ─── */
.panel--full {
    inset: 0;
    border: 0;
    border-radius: 0;
    background: var(--surf-0);
    z-index: var(--z-overlay);
    transition: opacity var(--pnl-dur-in) var(--pnl-ease);
}
.panel--full[data-state="mounted"] { opacity: 1; }
.panel--full[data-state="pre"]     { opacity: 0; }
.panel--full[data-state="leaving"] { opacity: 0; transition: opacity var(--pnl-dur-out) var(--pnl-ease); }

/* ─── Variant: codex (right, narrower, dimmed stage) ─── */
.panel--codex {
    top: calc(var(--ticker-h) + var(--nav-h));
    right: 0;
    bottom: var(--bar-h);
    width: var(--panel-w, 560px);
    max-width: 100vw;
    border-left: 1px solid var(--rule);
    background: rgba(0, 0, 0, 0.92);
    backdrop-filter: blur(16px);
    box-shadow: -16px 0 32px rgba(0, 0, 0, 0.5);
    transition: transform var(--pnl-dur-in) var(--pnl-ease), opacity var(--pnl-dur-in) var(--pnl-ease);
}
.panel--codex[data-state="mounted"] { transform: translateX(0); opacity: 1; }
.panel--codex[data-state="pre"]     { transform: translateX(10px); opacity: 0; }
.panel--codex[data-state="leaving"] { transform: translateX(8px); opacity: 0; transition: all var(--pnl-dur-out) var(--pnl-ease); }

/* ═══ Panel chrome (header + body) ═══ */
.panel__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 24px;
    border-bottom: 1px solid var(--rule);
    flex-shrink: 0;
    gap: 16px;
}

.panel__head-lead {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    flex: 1;
}

.panel__title {
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
    color: var(--ink-2);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.panel__title strong { color: var(--ink-0); font-weight: 600; }
.panel__title .sep { opacity: 0.4; margin: 0 6px; }

/* Variant: panel title rendered as in-line tabs (used by token-detail to
   move the Inspect/Games switcher out of the body and into the header,
   reclaiming vertical space for the model viewer). Buttons inherit the
   title's mono uppercase look; pressed state lights up cyan. */
.panel__title--tabs {
    gap: 6px;
    text-transform: none;
    letter-spacing: 0;
}
.panel__tab {
    background: transparent;
    border: 0;
    padding: 8px 14px;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ink-3, rgba(255,255,255,0.55));
    border-radius: 8px;
    cursor: pointer;
    transition: color var(--dur-sm), background var(--dur-sm);
}
.panel__tab:hover { color: var(--ink-1, rgba(255,255,255,0.78)); }
.panel__tab[aria-pressed="true"] {
    color: var(--acc-cyan, #06b6d4);
    background: var(--acc-soft, rgba(6,182,212,0.14));
}

/* Locked / coming-soon tab — label remains visible but is dimmed, and a
   small "Soon" stamp sits over the right side at an angle (same vibe as
   the BETA stamp on the 3D-generation path). Pointer events disabled so
   clicks pass through; hover does nothing. */
.panel__tab--locked {
    position: relative;
    color: var(--ink-3, rgba(255,255,255,0.4));
    cursor: not-allowed;
    opacity: 0.7;
    padding-right: 36px;
}
.panel__tab--locked:hover { color: var(--ink-3, rgba(255,255,255,0.4)); background: transparent; }
.panel__tab-soon {
    position: absolute;
    top: 50%;
    right: 4px;
    transform: translateY(-50%) rotate(-12deg);
    background: linear-gradient(135deg, rgba(255,128,0,0.18), rgba(255,184,77,0.14));
    color: #ff8000;
    border: 1px solid #ff8000;
    border-radius: 4px;
    padding: 1px 5px;
    font-family: var(--font-mono);
    font-size: 8.5px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    line-height: 1;
    text-shadow: 0 0 4px rgba(255,128,0,0.35);
    pointer-events: none;
}

/* Back + Close share the same chip aesthetic. Back is only present on
   multi-step flows (panels that declare a parentHash); close is universal.
   Intentionally no "return to home" button — the desktop lobby is already
   visible behind the panel, so closing already returns there. */
.panel__back,
.panel__close {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid var(--rule-strong);
    border-radius: 50%;
    color: var(--ink-2);
    cursor: pointer;
    transition: color var(--dur-sm), border-color var(--dur-sm), box-shadow var(--dur-sm);
    flex-shrink: 0;
}
.panel__back:hover {
    color: var(--acc-cyan);
    border-color: rgba(6, 182, 212, 0.55);
    box-shadow: var(--glow-cyan-sm);
}
.panel__close:hover {
    color: var(--err);
    border-color: rgba(239, 68, 68, 0.6);
    box-shadow: 0 0 16px rgba(239, 68, 68, 0.2);
}
.panel__back:focus-visible,
.panel__close:focus-visible {
    outline: none;
    color: var(--acc-cyan);
    border-color: var(--acc-cyan);
}

.panel__body {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 24px;
    min-height: 0;
}

.panel__foot {
    flex-shrink: 0;
    padding: 16px 24px;
    border-top: 1px solid var(--rule);
    display: flex;
    align-items: center;
    gap: 12px;
    justify-content: flex-end;
    background: rgba(0, 0, 0, 0.4);
}

/* ═══ Loading / empty / error states for panel body ═══ */
.panel-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 80px 24px;
    text-align: center;
    color: var(--ink-3);
    min-height: 240px;
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.panel-state__title {
    font-size: 20px;
    color: var(--ink-0);
    letter-spacing: var(--ls-hero);
    font-weight: 600;
}
.panel-state__body {
    max-width: 360px;
    line-height: 1.6;
    letter-spacing: 0.08em;
    text-transform: none;
    font-size: 13px;
    color: var(--ink-2);
}

/* ═══ Panel content primitives ═══ */
.panel-section {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
    margin-bottom: var(--sp-6);
}
.panel-section:last-child { margin-bottom: 0; }

.panel-section__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--rule);
    gap: 12px;
}
.panel-section__title {
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
    color: var(--ink-1);
    font-weight: 600;
}
.panel-section__count {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.16em;
    color: var(--ink-3);
    font-variant-numeric: tabular-nums;
}

/* Grid helper */
.panel-grid {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(auto-fill, minmax(var(--grid-min, 150px), 1fr));
}

/* Tabs inside panel */
.panel-tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--rule);
    margin-bottom: 20px;
}
.panel-tab {
    padding: 12px 16px;
    background: transparent;
    border: 0;
    color: var(--ink-3);
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    cursor: pointer;
    position: relative;
    transition: color var(--dur-sm);
}
.panel-tab:hover { color: var(--ink-0); }
.panel-tab[aria-selected="true"] { color: var(--acc-cyan); }
.panel-tab[aria-selected="true"]::after {
    content: "";
    position: absolute;
    left: 16px; right: 16px; bottom: -1px;
    height: 2px;
    background: var(--acc-cyan);
    box-shadow: var(--glow-cyan-sm);
}

/* Row (for tables/lists inside panels) */
.panel-row {
    display: grid;
    grid-template-columns: var(--row-cols, 1fr auto);
    align-items: center;
    gap: 14px;
    padding: 14px 0;
    border-bottom: 1px solid var(--rule);
    font-family: var(--font-mono);
    font-size: 13px;
    text-decoration: none;
    color: var(--ink-1);
    transition: color var(--dur-sm), transform var(--dur-sm);
}
.panel-row:hover { color: var(--ink-0); }
.panel-row:last-child { border-bottom: 0; }

/* ═══ Mobile panel collapse ═══ */
@media (max-width: 960px) {
    .panel--right,
    .panel--left,
    .panel--codex {
        left: 0;
        right: 0;
        width: 100%;
        max-width: 100%;
        border-left: 0;
        border-right: 0;
    }
    .panel--bottom { height: 85vh; }
    .panel--overlay {
        inset: var(--ticker-h) 0 var(--bar-h) 0;
        border: 0; border-radius: 0;
    }
    .panel__head { padding: 14px 16px; }
    .panel__body { padding: 16px; }
    .panel__foot { padding: 12px 16px; }
}

/* At phone widths, side pages take over the entire viewport. The panel's
   built-in close (.panel__close) is the way back; the lobby behind isn't
   useful at this scale and competes for taps. Bottom sheet keeps its
   sheet behavior so partial-context flows (chat, quick actions) stay. */
@media (max-width: 640px) {
    .panel--right,
    .panel--left,
    .panel--codex,
    .panel--overlay {
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        inset: 0;
        width: 100vw;
        height: 100dvh;
        max-width: 100vw;
        max-height: 100dvh;
        margin: 0;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }
    .panel--bottom { height: 92dvh; }
    .panel__head { padding: 12px 14px; gap: 10px; }
    .panel__body { padding: 14px; }
    .panel__foot { padding: 10px 14px; gap: 8px; }
    .panel__title { font-size: 11px; letter-spacing: 0.20em; }
    .panel-tab { padding: 10px 12px; font-size: 10.5px; letter-spacing: 0.18em; }
    .panel-state { padding: 48px 16px; min-height: 180px; }
    .panel-state__title { font-size: 17px; }
}

@media (max-width: 414px) {
    .panel__head { padding: 10px 12px; }
    .panel__body { padding: 12px; }
    .panel__foot { padding: 8px 12px; }
    .panel__back, .panel__close { width: 28px; height: 28px; }
    .panel-section { margin-bottom: var(--sp-5); }
}