/* =============================================================================
   Stage View — mw-sv-* prefix
   Page: MwStageViewPage.razor  (/booking/stage-view/{StageId?})

   One full-height ops screen, stacked top to bottom:
     1. MwStageRider          — fills whatever is left (stage swiper, timeline, rider)
     2. Stagecare note band   — the running stagecare shift's note, capped at ~10 lines
     3. Grip                  — steps the chat band through its preset heights
     4. Artist Office chat    — bounded band, default about a third of the screen

   The band chrome borrows the rider's dark surface palette so the stack reads as one
   screen instead of a dark widget dropped onto a light page.
   ============================================================================= */

.mw-sv-shell {
    --sv-bg: #15151d;
    --sv-surface: #1c1c26;
    --sv-lines: #30303d;
    --sv-text: #e2e2ea;
    --sv-text2: #9696aa;
    --sv-text3: #66667a;
    --sv-care: #34d4c8;
    --sv-accent: #7c6cff;

    /* NOTE: The band heights add up inside a fixed viewport — the rider absorbs the remainder,
       so no band may size itself from its content beyond its declared cap. */
    height: var(--mw-full-height, 100dvh);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--sv-bg);
}

.mw-sv-rider {
    flex: 1 1 auto;
    min-height: 0;
}

/* ── stagecare note band ─────────────────────────────────────────────────── */

.mw-sv-care {
    flex: 0 0 auto;
    background: var(--sv-surface);
    border-top: 1px solid var(--sv-lines);
    color: var(--sv-text);
    font-variant-numeric: tabular-nums;
}

.mw-sv-care-head {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    padding: 8px 12px;
    font-size: 12px;
}

/* NOTE: The line-count chip — the note's primary open affordance. Tapping it snaps the note open to fit
   all lines, so it is made loud: a violet glow that softly pulses to read as "tap me". */
.mw-sv-note-chip {
    flex: 0 0 auto;
    border: 1px solid color-mix(in srgb, var(--sv-accent) 70%, transparent);
    background: color-mix(in srgb, var(--sv-accent) 22%, transparent);
    color: #efeaff;
    font: inherit;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.01em;
    padding: 2px 10px;
    border-radius: 999px;
    cursor: pointer;
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--sv-accent) 60%, transparent), 0 0 14px 1px color-mix(in srgb, var(--sv-accent) 50%, transparent);
    animation: mw-sv-chip-glow 2.4s ease-in-out infinite;
    transition: transform 0.1s ease, background 0.12s ease;
}

.mw-sv-note-chip:hover {
    background: color-mix(in srgb, var(--sv-accent) 34%, transparent);
}

.mw-sv-note-chip:active {
    transform: scale(0.96);
}

/* NOTE: The expanded note carries its own scroll cues, so calm the chip's pulse once it is open. */
.mw-sv-care--open .mw-sv-note-chip {
    animation: none;
    box-shadow: 0 0 8px 0 color-mix(in srgb, var(--sv-accent) 35%, transparent);
}

@keyframes mw-sv-chip-glow {
    0%, 100% {
        box-shadow: 0 0 10px 0 color-mix(in srgb, var(--sv-accent) 35%, transparent);
    }
    50% {
        box-shadow: 0 0 18px 3px color-mix(in srgb, var(--sv-accent) 65%, transparent);
    }
}

.mw-sv-care-head .mud-icon-root {
    font-size: 16px;
    color: var(--sv-care);
    flex: 0 0 auto;
}

.mw-sv-care-who {
    flex: 0 1 auto;
    min-width: 0;
    font-weight: 700;
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mw-sv-care-time {
    flex: 0 0 auto;
    margin-left: auto;
    color: var(--sv-text2);
}

.mw-sv-care-idle {
    color: var(--sv-text3);
    font-size: 12px;
    font-style: italic;
}

.mw-sv-care-head--idle .mud-icon-root {
    color: var(--sv-text3);
}

/* NOTE: Rider-style hint (mirrors mw-sr-swipehint) nudging the collapsed note open. */
.mw-sv-note-hint {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0 0 8px;
    font-size: 9px;
    color: var(--sv-text3);
}

.mw-sv-note-hint .mud-icon-root {
    font-size: 13px;
    opacity: 0.7;
    color: var(--sv-accent);
}

/* NOTE: The note is capped at ten lines and scrolls beyond that. The two radial gradients are
   the "there is more" tell: they are painted against the scroll viewport (background-attachment:
   scroll) while the two linear gradients travel with the content (…: local) and mask them at the
   very top / very bottom. So a shadow is visible exactly when content is clipped in that
   direction — no JS, no measurement. */
/* NOTE: Height is drag-driven (inline style); this only handles overflow + the scroll cues. */
.mw-sv-care-note {
    padding: 2px 12px 10px;
    font-size: 13px;
    line-height: 1.45;
    overflow-y: auto;
    overscroll-behavior: contain;
    white-space: pre-wrap;
    word-break: break-word;
    color: var(--sv-text);

    background:
        linear-gradient(var(--sv-surface) 40%, rgba(28, 28, 38, 0)) top / 100% 20px no-repeat local,
        linear-gradient(rgba(28, 28, 38, 0), var(--sv-surface) 60%) bottom / 100% 20px no-repeat local,
        radial-gradient(farthest-side at 50% 0, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0)) top / 100% 10px no-repeat scroll,
        radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0)) bottom / 100% 10px no-repeat scroll;
}

/* ── note grip (rider↔note divider) ──────────────────────────────────────── */

/* NOTE: The strip is the drag target (12px padding → ~28px). Bigger than the 4px visual bar, but not so
   tall it bloats the collapsed note band. touch-action:none stops a touch-drag from scrolling. */
.mw-sv-grip {
    position: relative;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    background: var(--sv-surface);
    cursor: ns-resize;
    touch-action: none;
    user-select: none;
}

/* NOTE: The note grip is the rider↔note divider; the care band already draws that border. */
.mw-sv-grip--note {
    border-top: none;
}

.mw-sv-grip-bar {
    width: 44px;
    height: 4px;
    border-radius: 999px;
    background: var(--sv-lines);
    transition: background 0.12s ease, width 0.12s ease;
}

.mw-sv-grip:hover .mw-sv-grip-bar,
.mw-sv-chathead:hover .mw-sv-grip-bar {
    background: var(--sv-text3);
    width: 60px;
}

/* ── chat header (drag handle + always-visible bar) ──────────────────────── */

/* NOTE: The chat's header doubles as its resize handle. It is a flex:0 0 auto row that stays on screen at
   every chat height, so the chat is never fully invisible — pulled all the way down it is all that remains.
   touch-action:none + move/up bound on the element keep a drag here resizing (not scrolling the messages). */
.mw-sv-chathead {
    position: relative;
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 6px 12px 8px;
    background: var(--sv-surface);
    border-top: 1px solid var(--sv-lines);
    cursor: ns-resize;
    touch-action: none;
    user-select: none;
}

.mw-sv-chathead-row {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-width: 0;
    font-size: 12px;
}

.mw-sv-chathead-row .mud-icon-root {
    font-size: 16px;
    color: var(--sv-text2);
    flex: 0 0 auto;
}

.mw-sv-chathead-title {
    flex: 0 0 auto;
    font-weight: 700;
    color: var(--sv-text);
}

/* NOTE: When there is an unheeded message and the chat is pulled (near-)closed, the header bar goes violet
   and a pill rides its right end. Both pulse; tapping the chat clears it. */
.mw-sv-chathead--alert .mw-sv-grip-bar {
    background: var(--sv-accent);
    box-shadow: 0 0 12px 1px color-mix(in srgb, var(--sv-accent) 65%, transparent);
}

.mw-sv-chathead-alert {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 2px 10px 2px 8px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--sv-accent) 70%, transparent);
    background: color-mix(in srgb, var(--sv-accent) 22%, transparent);
    color: #efeaff;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
    box-shadow: 0 0 14px 1px color-mix(in srgb, var(--sv-accent) 45%, transparent);
    animation: mw-sv-chip-glow 1.8s ease-in-out infinite;
}

.mw-sv-grip-alert-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--sv-accent);
    box-shadow: 0 0 8px 1px var(--sv-accent);
    flex: 0 0 auto;
}

/* NOTE: Sits above everything (rider gesture layer, chat) so pointermove/up keep flowing to Blazor
   for the whole drag; ns-resize cursor persists even as the pointer leaves the thin grip. */
.mw-sv-resize-overlay {
    position: fixed;
    inset: 0;
    z-index: 1200;
    cursor: ns-resize;
    touch-action: none;
}

/* ── chat band ───────────────────────────────────────────────────────────── */

/* NOTE: Frame chrome comes from the shared .mw-chat-panel (mw-chat.css); this only pins the band
   to the bottom of the stack and lets the grip drive its height (inline style). Scoped to the shell
   for specificity: this file loads BEFORE mw-chat.css, so a bare .mw-sv-chat-panel would lose every
   tie (border, radius) to .mw-chat-panel. */
.mw-sv-shell .mw-sv-chat-panel {
    flex: 0 0 auto;
    min-height: 0;
    border: 0;
    border-top: 1px solid var(--sv-lines);
    border-radius: 0;
}

/* ── empty state ─────────────────────────────────────────────────────────── */

.mw-sv-empty {
    text-align: center;
    padding: 32px 16px;
    color: var(--sv-text2);
}