/* cast-fieldset.css — LIVE (the standalone "cast fieldset" is gone; this styles
   the CHAT FIELDSET's cast sub-features now, rendered by _chat-fieldset.html /
   _cast-voice-controls.html / gallery-control-surface.html): the thumb chip,
   rich character switcher, voice/speed bubbles, memory-mode bubbles, and the
   public/private toggle. Loaded by scene/character change_form base_css.
   Colours read the semantic ROLES (--primary hair / --secondary eyes), not raw
   --slot-N — see STYLE_GUIDE.md. Rename/fold candidate → chat-cast.css. */

/* ─── Thumb chip — square, beveled, flip-front avatar / flip-back
   generate card. Border lives on the flip faces so it rotates with
   the card during the flip. Hair (slot-1) is the per-character
   identity color. ─── */
.cast-scene-thumb {
    width: 100%;
    height: auto;
    box-shadow:
        inset 0 3px 6px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(0, 0, 0, 0.3),
        0 1px 0 rgba(255, 255, 255, 0.04);
}
.cast-scene-thumb .char-thumb-flip > .flip-front,
.cast-scene-thumb .char-thumb-flip > .flip-back {
    background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--primary) 16%, #22222a) 0%,
        #22222a 50%
    );
    border: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow:
        inset 0 3px 6px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(0, 0, 0, 0.3),
        0 1px 0 rgba(255, 255, 255, 0.04);
}
/* Rich switcher — mirrors .ckpt-option / .ckpt-selected from
   generation-settings.css. Two-line select2 with a 36px thumb and
   name + detail text. */
.cast-rich-switcher.form-select {
    width: 100%;
    min-width: 0;
}
.cast-rich-option,
.cast-rich-selected {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    /* No border on the inner row — the per-option accent lives on
       the outer .select2-results__option's border-left (the theme
       reserves a 3px slot there). We propagate --option-accent up
       to that parent in JS so the border is flush with the option's
       edge instead of inset behind option padding. */
}
/* Dropdown rows fill the option width so the × right-aligns to the edge —
   margin-left:auto needs free space to push into, which a shrink-to-content
   row doesn't have. Scoped to the option (not the closed selection). */
.cast-rich-option {
    width: 100%;
}
.cast-rich-option__thumb,
.cast-rich-selected__thumb {
    width: 36px;
    height: 36px;
    border-radius: 4px;
    object-fit: cover;
    flex-shrink: 0;
    border: 1px solid rgba(255, 255, 255, 0.15);
}
.cast-rich-option__thumb--empty,
.cast-rich-selected__thumb--empty {
    display: inline-block;
    background: rgba(255, 255, 255, 0.06);
    border: 1px dashed rgba(255, 255, 255, 0.15);
}
/* Per-row × removed — the switcher is switch-only; clone delete/unclone lives
   in the gallery. */
.cast-rich-option__info,
.cast-rich-selected__info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.cast-rich-option__name,
.cast-rich-selected__name {
    font-size: 0.75rem;
    color: #c0c0c0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cast-rich-option__detail,
.cast-rich-selected__detail {
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.cast-rich-option__detail {
    /* Per-option color from --option-accent on the outer
       .select2-results__option (set by applyCastOptionAccents). */
    color: color-mix(in srgb, var(--option-accent, var(--primary)) 70%, rgba(255, 255, 255, 0.5));
}
.cast-rich-selected__detail {
    /* Closed selection always represents the active character —
       read its live --slot-1 from the #form-content cascade. */
    color: color-mix(in srgb, var(--primary) 70%, rgba(255, 255, 255, 0.5));
}
/* The switcher lives in the (sticky) chat header, so its open state should tuck
   UNDER that header when the page scrolls — like the rest of the page — instead
   of floating over it. Drop below the header z-index (~40–50); other select2s
   keep their high stack. Three pieces:
     1. the dropdown itself (results + search) — parented to <body>;
     2. a --open wrapper, if select2 makes one;
     3. the SELECTION container in the header, which select2 bumps to 99999 on
        open (theme rule) — that's where the pulled-up search overlay renders.
   The 3rd selector carries extra specificity to beat that generic 99999 rule. */
.select2-dropdown.cast-rich-dropdown,
.select2-container--open:has(.cast-rich-dropdown),
.cast-rich-switcher + .select2-container--default.select2-container--open {
    z-index: 30;
}

/* Hover / selected state: neutral white wash for the affordance,
   keep the per-option border-left (don't let the theme repaint it
   with --select2-accent / active character). */
.cast-rich-dropdown .select2-results__option--highlighted:has(.cast-rich-option),
.cast-rich-dropdown .select2-results__option--selected:has(.cast-rich-option) {
    background: rgba(255, 255, 255, 0.06) !important;
    border-left-color: var(--option-accent, transparent) !important;
}
/* Each option replicates the closed-selection box shape: 48px tall,
   flex-centered, same horizontal padding so the thumb sits at the
   same offset from the option's left edge as in the closed box.
   The 3px border-left slot the theme already reserves on every
   option gets the per-character color (--option-accent propagated
   up from the inner row by JS — see initCastSceneVoice). */
.cast-rich-dropdown .select2-results__option:has(.cast-rich-option) {
    height: var(--gs-select-height, 48px) !important;
    /* 0.1rem left-padding matches the closed-selection rendered
       wrapper so the thumb sits at the same horizontal offset in
       both states. */
    padding: 0 1.25rem 0 0.1rem !important;
    display: flex !important;
    align-items: center !important;
    border-left-color: var(--option-accent, transparent) !important;
}
/* Mirror gen-settings' pattern exactly: --gs-select-height drives
   the closed selection's height AND the theme's overlay pull-up AND
   the search-input height (they all read the same var). flex-center
   the selection box once at this level and the rendered wrapper
   plus its custom content (.cast-rich-selected) auto-center inside. */
.cast-rich-switcher + .select2-container {
    --gs-select-height: 48px;
}
.cast-rich-switcher + .select2-container--default .select2-selection--single {
    height: var(--gs-select-height) !important;
    min-height: var(--gs-select-height) !important;
    display: flex !important;
    align-items: center !important;
}
/* Override the global :is(.fieldset, ...) .select2-selection__rendered
   rule which forces line-height: 28px (intended for single-line
   text fields). With our two-line content (name + detail spans
   stacked) that 28px line-height makes each span 28px tall, total
   56px > 48px box → top/bottom straddling. line-height: 1.4
   collapses each span to its natural ~17px, so the pair fits
   centered inside the 48px container. 0.1rem padding-left pulls
   the thumb close to the accent border, matching gen-settings. */
.cast-rich-switcher + .select2-container--default .select2-selection__rendered {
    line-height: 1.4 !important;
    padding: 0 1.25rem 0 0.1rem !important;
}

/* OPEN STATE — give the closed selection a slightly darker bg so
   the search input "lands in" something, but keep the grey border
   (no bright accent shell, no halo). Doesn't compete with the
   per-character accents in the options list below. */
.cast-rich-switcher + .select2-container--default.select2-container--open .select2-selection--single {
    background: rgba(0, 0, 0, 0.45) !important;
}

/* Search input: kill the theme's own border + bg so the closed
   selection's open-state frame shows through. The result is a
   single accent-bordered box with the search input centered
   inside (no double-border, no inset rectangle). */
.select2-dropdown.cast-rich-dropdown .select2-search--dropdown .select2-search__field {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* ─── Voice controls — single-row pane below the chip+tags row.
   Two builder-tag bubbles flank the row, BOTH titled VOICE (mirrors
   the editor identity pills): (1) a collapsing select2 voice pill,
   (2) a bubble wrapping the SLOW/range/FAST speed strip. The slider
   uses the realism-slider recipe from scene-control-surface (slot-2
   there → slot-1 here to match hair-family identity). ─── */
.cast-scene-voice-wrap {
    display: flex;
    flex-direction: row;  /* override .field's column default from fieldsets-base.css */
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;   /* centre the voice + slider bubbles */
    gap: 0.5rem;
    margin-top: 0.6rem;
}
/* Voice controls row on the chat fieldset — centered, dropping the top-margin
   the wrap carried from its old memory-panel context. */
.chat-voice-row .cast-scene-voice-wrap {
    margin-top: 0;
    justify-content: center;
}
/* Footer voice-controls row — pinned open for everyone now (no slide), so it's
   just a normal row that sizes to its pills (voice / speed / volume, which wrap
   on narrow widths). No max-height cap / overflow:hidden — those were the slide
   drawer and clipped the pills at the fitted chat height. flex:0 0 auto keeps
   its full height in the flex chat column; the conversation fills the rest. */
.chat-voice-row--footer {
    flex: 0 0 auto;
    margin-top: 0.5rem;
}
/* Slim variant for the SLOW/FAST endpoints on the speed slider —
   uppercase punctuation flanking the track, not signs. */
.cast-voice-label--end {
    font-size: 0.55rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(255, 255, 255, 0.5);
    font-weight: 600;
    opacity: 0.7;
    flex: 0 0 auto;
}

/* ─── Voice pills — both wear .builder-tag. In the chat footer they take
   the SAME neutral grey chrome as the other chat controls (dark fill, faint
   white border) so they blend in; the character color still peeks through
   the CONTENT — the VOICE caption, the voice name, the slider thumb, and the
   show-in-chat toggle keep their slot tint. Scoped to .cast-scene-voice-wrap
   so the identity pills, vocab fields, appearance tags, and card-back are
   untouched. ─── */
.cast-scene-voice-wrap .cast-scene-voice-pill,
.cast-scene-voice-wrap .cast-scene-voice-speed-pill {
    gap: 0.4rem;
    min-width: 3.5rem;
    padding-top: 0.1rem;
    padding-bottom: 0.1rem;
    align-items: center;
    background: rgba(0, 0, 0, 0.25);
    border-color: rgba(255, 255, 255, 0.12);
}
/* The voice pill collapses to its value; the speed pill flexes wide so
   its slider strip has room. */
.cast-scene-voice-wrap .cast-scene-voice-pill {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 100%;
}
.cast-scene-voice-wrap .cast-scene-voice-speed-pill {
    /* Size to content (don't stretch full-width like a fat cat). */
    flex: 0 0 auto;
}
.cast-scene-voice-pill-label {
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    opacity: 0.55;
    flex: 0 0 auto;
    white-space: nowrap;
    line-height: 1;
    align-self: center;
}
/* The select2 container fills between the caption and the pill edge;
   the shared .builder-tag-select2 rule (fieldsets-env.css) lets it
   shrink to the selected value. */
.cast-scene-voice-pill .select2-container {
    flex: 1 1 auto;
    min-width: 0;
}
/* Strip the boxed select2 selection chrome so the pill shows ONLY the
   voice name (no recessed dark field, no accent left-border). Pin to
   1.5rem to match the .builder-tag-dropdown search overlay. Mirrors the
   .identity-pill selection rule; .select2-container--default kept in the
   chain (4 classes) so it beats select2-theme's 3-class single-select rule
   regardless of stylesheet load order. */
.cast-scene-voice-pill .select2-container--default .select2-selection--single {
    background: transparent;
    border: none;
    border-left: none;
    border-radius: 0;
    box-shadow: none;
    height: 1.5rem;
    min-height: 0;
    padding: 0;
    display: flex;
    align-items: center;
}
.cast-scene-voice-pill .select2-container--default .select2-selection--single:hover {
    background: transparent;
    border: none;
}
.cast-scene-voice-pill .select2-container--default .select2-selection__rendered {
    padding: 0;
    line-height: 1;
    font-size: 0.7rem;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cast-scene-voice-pill .select2-selection__arrow {
    display: none;
}
/* Speed slider lives inside its own flex strip so the SLOW/FAST
   endpoints hug the track instead of fighting for the bubble's flex
   space. Fills the speed pill after the leading VOICE caption. */
.cast-scene-voice-speed-wrap {
    flex: 0 0 auto;
    /* Match the voice pill's 1.5rem so this bubble isn't collapsed flat /
       half-height — the 6px slider track centres in it. */
    min-height: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.cast-scene-voice-speed {
    /* Clip the slider to a reasonable length instead of stretching. */
    flex: 0 0 auto;
    width: 5rem;
    height: 6px;
    -webkit-appearance: none;
    appearance: none;
    background: linear-gradient(90deg,
        color-mix(in srgb, var(--primary) 35%, rgba(0, 0, 0, 0.4)) 0%,
        color-mix(in srgb, var(--primary) 15%, rgba(0, 0, 0, 0.4)) 100%);
    border-radius: 3px;
    outline: none;
    cursor: pointer;
    margin: 0;
}
.cast-scene-voice-speed::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--primary) 60%, white);
    border: 1px solid color-mix(in srgb, var(--primary) 80%, rgba(0, 0, 0, 0.5));
    cursor: pointer;
}
.cast-scene-voice-speed::-moz-range-thumb {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--primary) 60%, white);
    border: 1px solid color-mix(in srgb, var(--primary) 80%, rgba(0, 0, 0, 0.5));
    cursor: pointer;
}

/* ─── MEMORY (right column) ────────────────────────────────────────
   Memory bubbles + content panel are always visible — independent of
   the thumb's flip state (flipping the thumb only turns the avatar ↔
   generate card in the left column). */
.cast-scene-memory-bubbles {
    display: flex;
}
.cast-scene-memory-panel {
    display: block;
}

/* Voice moved out of the memory panel — the Voice node bubble + its reveal
   detail-field are gone; the picker + speed pills are always visible on the
   chat fieldset's top layer (_cast-voice-controls.html). Their pill styling
   lives under .cast-scene-voice-wrap above and travels with the markup. */
/* Show-in-chat toggle — now rides ON the voice pill (was the Voice node
   bubble's pip). Eyes (slot-2) so it reads against the pill's hair (slot-1)
   fill. */
.cast-scene-voice-pill .cast-voice-tts-toggle {
    position: relative;
    width: 24px;
    height: 14px;
    margin-left: 0.35rem;
    border-radius: 7px;
    background: color-mix(in srgb, var(--secondary) 20%, rgba(255, 255, 255, 0.1));
    border: 1px solid color-mix(in srgb, var(--secondary) 35%, rgba(255, 255, 255, 0.18));
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
    flex-shrink: 0;
}
.cast-scene-voice-pill .cast-voice-tts-toggle .tag-knob {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--secondary) 55%, rgba(255, 255, 255, 0.4));
    transition: left 0.2s, background 0.2s;
}
.cast-scene-voice-pill .cast-voice-tts-toggle.on {
    background: color-mix(in srgb, var(--secondary) 35%, rgba(255, 255, 255, 0.1));
    border-color: color-mix(in srgb, var(--secondary) 55%, rgba(255, 255, 255, 0.25));
}
.cast-scene-voice-pill .cast-voice-tts-toggle.on .tag-knob {
    left: 12px;
    background: color-mix(in srgb, var(--secondary) 80%, white);
}
/* Flipping the thumb turns ONLY the thumb (avatar ↔ generate card) in the
   left column — the memory bubbles + panel + voice stay put. The old rule
   here hid them when flipped, back when the flip swapped the right column
   between a profile/tags face and a memory face; Phase D removed the tags
   editor, so hiding memory just exposed the empty space where tags used to
   be. Decoupled — memory is always shown. */

/* Node bubbles — same no-color tag shape, but clickable. Slot-1
   (hair) is the per-character identity accent used throughout this
   fieldset; the extra specificity beats the slot-2 default in
   generation-settings.css. */
.cast-scene-memory-bubbles {
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.25rem;
    min-height: 1.6rem;
}
.cast-scene-memory-bubbles .memory-node-bubble {
    --tag-color: var(--primary);
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}
/* Bubble color identifies the memory's provenance (same specificity as the
   base rule above, so source order wins): card seed = hair, the lone user
   anchor = neutral grey (system-level, like the pips), model-created
   on-the-fly = eyes. */
.cast-scene-memory-bubbles .memory-node--system { --tag-color: var(--primary); }
.cast-scene-memory-bubbles .memory-node--user   { --tag-color: rgba(255, 255, 255, 0.5); }
.cast-scene-memory-bubbles .memory-node--fly     { --tag-color: var(--secondary); }
.cast-scene-memory-bubbles .memory-node-bubble:hover,
.cast-scene-memory-bubbles .memory-node-bubble:focus-visible {
    background: color-mix(in srgb, var(--tag-color) 32%, rgba(255, 255, 255, 0.06));
    outline: none;
}
.cast-scene-memory-bubbles .memory-node-bubble.active {
    background: color-mix(in srgb, var(--tag-color) 42%, rgba(255, 255, 255, 0.08));
    border-color: color-mix(in srgb, var(--tag-color) 55%, transparent);
}
/* Memory-added badge — a small +N count pinned to a node's top-right when the
   model writes memories to it live (scene_generation.js handleMemoryAdded), so
   the owner sees them accruing (they commit to the public source on Save in the
   editor). Mirrors the generate queue-count; eyes (slot-2) accent so it reads
   as a system notification regardless of the node's own tint. pointer-events
   off so a tap lands on the bubble, which clears the badge (seen it). */
.cast-scene-memory-bubbles .memory-node-bubble { position: relative; }
.cast-scene-memory-bubbles .memory-node-bubble .node-mem-badge {
    position: absolute;
    top: -7px;
    right: -7px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    box-sizing: border-box;
    background: linear-gradient(180deg,
        var(--secondary) 0%,
        color-mix(in srgb, var(--secondary) 60%, #000) 100%);
    border: 1.5px solid rgba(0, 0, 0, 0.55);
    border-radius: 8px;
    color: #fff;
    font-size: 0.55rem;
    font-weight: 700;
    font-family: 'SF Mono', Monaco, monospace;
    line-height: 13px;
    text-align: center;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
    z-index: 6;
    pointer-events: none;
}
.cast-memory-empty {
    font-size: 0.65rem;
    font-style: italic;
    color: rgba(255, 255, 255, 0.4);
}

/* Content panel — sits in the voice pane's slot in memory mode. One
   detail block per node, hidden until its bubble is picked. The hint
   shows until something is active (:has on the active detail). */
.cast-scene-memory-panel {
    margin-top: 0.6rem;
    max-height: 220px;
    overflow-y: auto;
    /* Firefox — thin, faint eyes-tinted thumb (replaces the default grey bar). */
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--secondary) 25%, rgba(255, 255, 255, 0.1)) transparent;
}
/* Delicate card scrollbar — 6px, rounded, transparent track, a faint --secondary
   thumb that firms on hover. Replaces the chunky OS default; reusable recipe for
   card-back scroll areas. */
.cast-scene-memory-panel::-webkit-scrollbar { width: 6px; }
.cast-scene-memory-panel::-webkit-scrollbar-track { background: transparent; }
.cast-scene-memory-panel::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--secondary) 25%, rgba(255, 255, 255, 0.1));
    border-radius: 3px;
}
.cast-scene-memory-panel::-webkit-scrollbar-thumb:hover {
    background: color-mix(in srgb, var(--secondary) 45%, rgba(255, 255, 255, 0.15));
}
/* Solid HAIR fill — overrides .field--bevel's 225° eyes→hair gradient so the memory
   description reads as a carved solid-hair bevel, matching the scene card's
   activity/description. 2-class selector beats the 1-class .field--bevel (no
   !important); the inset "carved" shadows + border stay from .field--bevel. */
.field--bevel.cast-scene-memory-panel {
    background: color-mix(in srgb, var(--primary) 16%, var(--card-base));
}
.memory-node-detail { display: none; }
.memory-node-detail.active { display: block; }
.memory-node-detail__head {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin-bottom: 0.35rem;
}
.memory-node-detail__name {
    font-size: 0.8rem;
    font-weight: 700;
    color: color-mix(in srgb, var(--primary) 70%, white);
}
.memory-node-detail__type {
    font-size: 0.55rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.45);
}
.memory-node-detail__obs {
    margin: 0;
    padding-left: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.memory-node-detail__obs li {
    font-size: 0.72rem;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.78);
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
}
.memory-node-detail__obs .memory-obs-text { flex: 1; min-width: 0; }
/* Editable observations (user anchor + on-the-fly) — click to correct a
   fact. Subtle until hovered/focused so it reads as text, not a form. */
.memory-obs-text[contenteditable] {
    cursor: text;
    border-radius: 3px;
    padding: 0 2px;
    transition: background 0.12s ease;
}
.memory-obs-text[contenteditable]:hover { background: rgba(255, 255, 255, 0.06); }
.memory-obs-text[contenteditable]:focus {
    background: rgba(255, 255, 255, 0.1);
    outline: none;
}

/* The two × controls — forget a node (bubble) or one observation. System-
   level, so neutral grey (not slot-tinted, same call as the pips) — they
   brighten on hover, no destructive red until we know it's wanted. */
.memory-node-remove,
.memory-obs-remove {
    cursor: pointer;
    font-weight: 700;
    line-height: 1;
    font-size: 0.7rem;
    opacity: 0.4;
    color: rgba(255, 255, 255, 0.85);
    transition: opacity 0.15s ease, color 0.15s ease;
    user-select: none;
}
.memory-node-remove { margin-left: 0.3rem; }
.memory-obs-remove { flex: 0 0 auto; }
.memory-node-remove:hover,
.memory-node-remove:focus-visible,
.memory-obs-remove:hover,
.memory-obs-remove:focus-visible {
    opacity: 1;
    color: rgba(255, 255, 255, 0.98);
    outline: none;
}
.memory-node-detail__none {
    font-style: italic;
    color: rgba(255, 255, 255, 0.4);
    list-style: none;
}
.memory-node-hint {
    font-size: 0.7rem;
    font-style: italic;
    color: rgba(255, 255, 255, 0.4);
    text-align: center;
    padding: 0.4rem 0;
}
.cast-scene-memory-panel:has(.memory-node-detail.active) .memory-node-hint {
    display: none;
}

/* ===== Public/private toggle (was inline <style> #2) ===== */
.cast-editor-private-toggle {
    margin-left: auto; display: inline-flex; align-items: center; gap: 0.3rem;
    padding: 0.18rem 0.6rem; border-radius: 999px; cursor: pointer;
    font-size: 0.68rem; font-weight: 700; letter-spacing: 0.04em;
    /* Neutral grey chrome (toolbar convention) — readable on any character,
       never the hair/eyes slot colour. Lock icon + label carry the state. */
    background: color-mix(in srgb, white 6%, var(--card-base));
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: rgba(255, 255, 255, 0.58);
}
.cast-editor-private-toggle.is-private {
    background: color-mix(in srgb, white 11%, var(--card-base));
    border-color: rgba(255, 255, 255, 0.30);
    color: rgba(255, 255, 255, 0.85);
}