/**
 * Mobile Wellness DS — copied from the peach/cream/charcoal mobile reference.
 * Scope: max-width 767px only. Desktop keeps map chrome / Wispr rim grammar.
 * Fonts stay Geologica (UI) + Klukva (brand wordmarks).
 */
:root {
    --well-cream: #FFF3E2;
    --well-cream-deep: #F5E6D4;
    --well-peach: #FBAB57;
    --well-peach-soft: #FEC674;
    --well-ink: #1A1A1A;
    --well-muted: #6b5340;
    --well-white: #FFFFFF;
    --well-shadow: 0 10px 28px rgba(26, 26, 26, 0.08);
    --well-shadow-strong: 0 14px 36px rgba(26, 26, 26, 0.14);
    --well-radius-card: 1.5rem;   /* 24 */
    --well-radius-sheet: 1.75rem; /* 28 */
    --well-radius-dock: 2rem;     /* 32 */
    --well-pad: 1.15rem;
    --well-gap: 0.85rem;
}

@media (max-width: 767px) {
    :root {
        --surface-page: var(--well-cream);
        --surface-window: var(--well-cream);
        --panel-solid: var(--well-cream);
        --panel-elevated: var(--well-white);
        --surface-stone: var(--well-cream-deep);
        --accent: var(--well-peach);
        --palette-secondary: var(--well-peach-soft);
        --ink: var(--well-ink);
        --ink-muted: var(--well-muted);
        --glass-elev: var(--well-shadow);
        --panel-shadow: var(--well-shadow);
        --radius-md: 1rem;
        --radius-lg: var(--well-radius-card);
        --radius-xl: var(--well-radius-sheet);
        /* Modals stay softer than peach dock (32); fullscreen sheets zero out radius anyway */
        --radius-2xl: 1.25rem;
        --mobile-nav-h: 4rem;
        --mobile-nav-wave-h: 0px; /* solid floating dock — no Haikei lip */
        --mobile-nav-float-gap: 0.65rem;
        --mobile-fs-bottom: calc(
            var(--mobile-nav-h) + var(--mobile-nav-float-gap) + var(--sab) + 0.35rem
        );
        --mobile-margin: 1.15rem;
        --mobile-gutter: 0.85rem;
    }

    /* No pinch-zoom / double-tap zoom on product chrome */
    html,
    body {
        touch-action: manipulation;
        -ms-touch-action: manipulation;
        overscroll-behavior-y: none;
    }

    html.dark,
    .dark {
        --well-cream: #1A1A1A;
        --well-cream-deep: #2c2c2c;
        --well-ink: #FFF3E2;
        --well-muted: #b8a894;
        --well-white: #2c2c2c;
        --well-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
        --surface-page: #1A1A1A;
        --surface-window: #1A1A1A;
        --panel-solid: #1A1A1A;
        --panel-elevated: #2c2c2c;
        --ink: #FFF3E2;
        --ink-muted: #b8a894;
    }

    /* —— Floating peach dock (reference) —— */
    #fab-add {
        display: none !important;
    }
    .mobile-bottom-nav {
        position: fixed;
        left: max(0.75rem, var(--sal));
        right: max(0.75rem, var(--sar));
        bottom: max(var(--mobile-nav-float-gap), var(--sab));
        z-index: 235;
        display: flex !important;
        flex-direction: column;
        align-items: stretch;
        justify-content: center;
        height: var(--mobile-nav-h);
        min-height: var(--mobile-nav-h);
        padding: 0;
        padding-bottom: 0;
        box-sizing: border-box;
        background: var(--well-peach) !important;
        border: 2px solid var(--well-ink, #1A1A1A) !important;
        border-radius: var(--well-radius-dock) !important;
        box-shadow: var(--well-shadow-strong) !important;
        overflow: visible;
        pointer-events: auto;
    }
    .mobile-bottom-nav__wave {
        display: none !important;
    }
    .mobile-bottom-nav__row {
        position: relative;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.15rem;
        height: 100%;
        padding: 0 0.55rem;
        box-sizing: border-box;
        background: transparent !important;
    }
    .mobile-nav-btn {
        position: relative;
        flex: 1 1 0;
        min-width: 0;
        min-height: var(--mobile-touch-min);
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0;
        padding: 0.25rem;
        border: none;
        border-radius: 999px;
        background: transparent;
        color: #222222;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        transition: transform 0.18s ease;
    }
    html.dark .mobile-nav-btn,
    .dark .mobile-nav-btn {
        color: #222222;
    }
    /* Convex white chips — same family as FAB, thumb «каблук» like Выбрать */
    .mobile-nav-btn i,
    .mobile-nav-btn i[class^="icon-"],
    .mobile-nav-btn i[class*=" icon-"] {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: 2.75rem !important;
        height: 2.75rem !important;
        min-width: 2.75rem;
        min-height: 2.75rem;
        border-radius: 50%;
        background: #ffffff;
        color: #222222;
        font-size: 1.35rem !important;
        line-height: 1;
        -webkit-text-stroke: 0.55px currentColor;
        paint-order: stroke fill;
        font-weight: 700;
        box-shadow:
            var(--control-thumb, inset 0 -3px 0 rgba(34, 34, 34, 0.18)),
            0 6px 14px rgba(26, 26, 26, 0.14);
        transition: transform 0.18s var(--ease-out, ease), box-shadow 0.18s ease, background 0.18s ease, color 0.18s ease;
        pointer-events: none;
        vertical-align: 0;
        text-align: center;
    }
    .mobile-nav-btn:active i {
        transform: scale(0.94) translateY(1px);
        box-shadow:
            var(--control-thumb-pressed, inset 0 -1px 0 rgba(34, 34, 34, 0.22)),
            0 3px 8px rgba(26, 26, 26, 0.1);
    }
    .mobile-nav-fab i {
        font-size: 1.75rem;
        line-height: 1;
        -webkit-text-stroke: 0.7px currentColor;
        paint-order: stroke fill;
        font-weight: 700;
        pointer-events: none;
    }
    .mobile-nav-btn__label {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }
    .mobile-nav-btn.is-active {
        background: transparent !important;
        color: #222222;
    }
    /* Kill legacy ink-dot from style.css */
    .mobile-nav-btn.is-active::after {
        content: none !important;
        display: none !important;
    }
    .mobile-nav-btn.is-active i,
    .mobile-nav-btn.is-active i[class^="icon-"],
    .mobile-nav-btn.is-active i[class*=" icon-"] {
        background: var(--well-ink, #1A1A1A) !important;
        color: #FFF3E2 !important;
        box-shadow:
            inset 0 -3px 0 rgba(0, 0, 0, 0.35),
            0 6px 14px rgba(26, 26, 26, 0.2);
    }
    .mobile-nav-btn.is-active:active i {
        box-shadow:
            inset 0 -1px 0 rgba(0, 0, 0, 0.4),
            0 3px 8px rgba(26, 26, 26, 0.14);
    }
    .mobile-nav-fab {
        position: relative;
        flex: 0 0 auto;
        width: 3.65rem;
        height: 3.65rem;
        margin-top: -1.85rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: none;
        border-radius: 50%;
        background: #ffffff !important;
        color: #222222 !important;
        box-shadow:
            var(--control-thumb, inset 0 -3px 0 rgba(34, 34, 34, 0.18)),
            0 10px 24px rgba(26, 26, 26, 0.18);
        cursor: pointer;
        z-index: 3;
        -webkit-tap-highlight-color: transparent;
        transition: transform 0.18s var(--ease-out, ease), box-shadow 0.18s ease;
    }
    .mobile-nav-fab:active {
        transform: scale(0.96) translateY(1px);
        box-shadow:
            var(--control-thumb-pressed, inset 0 -1px 0 rgba(34, 34, 34, 0.22)),
            0 4px 12px rgba(26, 26, 26, 0.14);
    }
    .mobile-nav-fab.is-open {
        transform: rotate(45deg);
    }
    .mobile-nav-fab.is-open:active {
        transform: rotate(45deg) scale(0.96);
    }

    /* —— Plus speed-dial (upload / record) — horizontal —— */
    .mobile-add-menu {
        position: absolute;
        left: 50%;
        bottom: calc(100% + 0.85rem);
        transform: translateX(-50%) translateY(0.5rem);
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 0.75rem;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.2s var(--ease-out, ease), transform 0.22s var(--ease-out, ease);
        z-index: 5;
    }
    .mobile-add-menu.is-open {
        opacity: 1;
        pointer-events: auto;
        transform: translateX(-50%) translateY(0);
    }
    .mobile-add-menu__btn {
        width: 3.25rem;
        height: 3.25rem;
        border: none;
        border-radius: 50%;
        background: #ffffff;
        color: #222222;
        box-shadow:
            var(--control-thumb, inset 0 -3px 0 rgba(34, 34, 34, 0.18)),
            0 10px 24px rgba(26, 26, 26, 0.18);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        transition: transform 0.18s var(--ease-out, ease), box-shadow 0.18s ease;
    }
    .mobile-add-menu__btn i {
        font-size: 1.45rem;
        -webkit-text-stroke: 0.55px currentColor;
        pointer-events: none;
    }
    .mobile-add-menu__btn:active {
        transform: scale(0.95) translateY(1px);
        box-shadow:
            var(--control-thumb-pressed, inset 0 -1px 0 rgba(34, 34, 34, 0.22)),
            0 4px 12px rgba(26, 26, 26, 0.14);
    }
    .mobile-add-menu__btn--record {
        background: #222222;
        color: #FFF3E2;
        box-shadow:
            inset 0 -3px 0 rgba(0, 0, 0, 0.35),
            0 10px 24px rgba(26, 26, 26, 0.2);
    }
    .mobile-add-menu__btn--record:active {
        box-shadow:
            inset 0 -1px 0 rgba(0, 0, 0, 0.4),
            0 4px 12px rgba(26, 26, 26, 0.14);
    }
    .mobile-add-menu__scrim {
        position: fixed;
        inset: 0;
        z-index: 225;
        background: rgba(26, 26, 26, 0.28);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.2s ease;
    }
    .mobile-add-menu__scrim.is-open {
        opacity: 1;
        pointer-events: auto;
    }

    /* —— True fullscreen surfaces: fill viewport; peach dock floats above via z-index —— */
    #sidebar.sidebar-panel,
    #sidebar,
    #events-sheet,
    .app-modal-overlay {
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
    }
    #sidebar.sidebar-panel,
    #sidebar {
        background: var(--well-cream) !important;
        background-color: var(--well-cream) !important;
        z-index: 200 !important;
        padding-bottom: calc(var(--mobile-fs-bottom) + 0.85rem) !important;
    }
    #events-sheet {
        background: var(--well-cream) !important;
        z-index: 205 !important;
    }
    .app-modal-overlay {
        background: color-mix(in srgb, var(--well-ink) 45%, transparent) !important;
        z-index: 210 !important;
        align-items: stretch !important;
        justify-content: stretch !important;
        padding: 0 !important;
    }
    .app-modal-overlay > .app-modal-panel,
    .app-modal-overlay > [id$="-modal-content"],
    #auth-modal > #auth-modal-content,
    #events-sheet .events-sheet-panel {
        background: var(--well-cream) !important;
        height: 100% !important;
        max-height: none !important;
        border-radius: 0 !important;
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding-bottom: calc(var(--mobile-fs-bottom) + 0.85rem) !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
    }
    /* Confirm stays compact-centered */
    #ui-modal-overlay.app-modal-overlay {
        align-items: center !important;
        justify-content: center !important;
        padding: 1rem !important;
        background: color-mix(in srgb, var(--well-ink) 45%, transparent) !important;
        bottom: 0 !important;
    }
    #ui-modal-overlay > #ui-modal-content {
        height: auto !important;
        max-height: min(85dvh, 32rem) !important;
        border-radius: var(--well-radius-sheet) !important;
        background: var(--well-white) !important;
        padding-bottom: 1rem !important;
        width: auto !important;
        max-width: 24rem !important;
        margin: auto !important;
    }
    /* Dock always above sheets / modals / record / player */
    .mobile-bottom-nav {
        z-index: 240 !important;
        pointer-events: auto !important;
    }
    .mobile-add-menu.is-open {
        z-index: 5;
        pointer-events: auto !important;
    }
    .mobile-nav-badge {
        position: absolute;
        top: 0.15rem;
        right: calc(50% - 1.4rem);
        min-width: 0.95rem;
        height: 0.95rem;
        padding: 0 0.22rem;
        border-radius: 999px;
        background: #222222;
        color: #fff;
        font-size: 0.6rem;
        font-weight: 700;
        line-height: 0.95rem;
        text-align: center;
        z-index: 2;
        border: 1.5px solid #fff;
    }
    .mobile-nav-btn.is-active .mobile-nav-badge {
        background: var(--well-peach, #FBAB57);
        color: #222;
        border-color: #fff;
    }

    /* —— Soft map chrome —— */
    #map-top-toolbar.map-top-toolbar,
    #map-top-right-controls .map-icon-btn,
    #burger-btn {
        background: var(--well-white) !important;
        background-color: var(--well-white) !important;
        border: none !important;
        box-shadow: var(--well-shadow) !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        color: var(--well-ink) !important;
    }
    #map-top-toolbar.map-top-toolbar {
        border-radius: 999px !important;
        padding: 0.3rem !important;
        left: max(0.75rem, var(--sal)) !important;
        right: auto !important;
    }
    #map-top-toolbar.map-top-toolbar.is-search-open,
    #map-top-toolbar.map-top-toolbar:has(.map-search-cluster.is-open),
    #map-top-toolbar.map-top-toolbar:has(.map-search-cluster:focus-within) {
        right: calc(var(--chrome-inset-right) + (3 * var(--mobile-touch)) + (2 * var(--mobile-gutter)) + 0.5rem) !important;
        left: max(var(--mobile-margin, 0.75rem), var(--sal)) !important;
        max-width: none !important;
        width: auto !important;
    }
    #map-top-right-controls .map-icon-btn,
    #burger-btn {
        border-radius: 999px !important;
        width: var(--mobile-touch) !important;
        height: var(--mobile-touch) !important;
    }

    /* —— Dock / sheets = cream page + soft cards —— */
    #sidebar.sidebar-panel,
    #sidebar {
        background: var(--well-cream) !important;
        background-color: var(--well-cream) !important;
        border: none !important;
        box-shadow: none !important;
        border-radius: 0 !important;
    }
    #sidebar .dock-header,
    #sidebar .rounded-2xl,
    #sidebar .rounded-xl,
    #sidebar .bg-white,
    #sidebar .bg-slate-50,
    #events-sheet .events-sheet-panel,
    .notif-panel {
        border-radius: var(--well-radius-card) !important;
        border-color: transparent !important;
        box-shadow: var(--well-shadow) !important;
    }
    #sidebar .bg-white,
    #sidebar .dark\:bg-slate-800 {
        background: var(--well-white) !important;
    }
    .dock-view-title {
        font-family: var(--font-ui) !important;
        font-weight: 700 !important;
        font-size: var(--text-heading-sm, 1.5rem) !important;
        letter-spacing: -0.03em !important;
        line-height: 1.1 !important;
    }

    /* —— Mobile player: cream card above the peach dock —— */
    #player-anchor.player-anchor {
        z-index: 228 !important;
        justify-content: stretch !important;
        padding-left: max(0.75rem, var(--sal)) !important;
        padding-right: max(0.75rem, var(--sar)) !important;
        padding-bottom: calc(var(--mobile-fs-bottom) + 0.35rem) !important;
    }
    #player-card.player-shell {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0.4rem 0.75rem 0.65rem !important;
        max-height: min(62dvh, 32rem) !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 0.35rem;
        -webkit-overflow-scrolling: touch;
        pointer-events: auto !important;
        background: var(--well-cream) !important;
        background-color: var(--well-cream) !important;
        border: none !important;
        border-radius: 1.35rem !important;
        box-shadow: var(--well-shadow-strong) !important;
        /* No mask — was clipping content / breaking hit targets around the + */
        -webkit-mask-image: none !important;
        mask-image: none !important;
        transition:
            transform 0.38s cubic-bezier(0.22, 1, 0.36, 1),
            opacity 0.28s ease !important;
    }
    #player-card.player-shell.is-dragging {
        transition: none !important;
        will-change: transform, opacity;
    }
    #player-card.player-shell.is-gesture-settle,
    #player-card.player-shell.is-gesture-closing {
        transition:
            transform 0.36s cubic-bezier(0.22, 1, 0.36, 1),
            opacity 0.28s ease !important;
        will-change: transform, opacity;
    }
    #sidebar.is-dragging {
        transition: none !important;
        will-change: transform, opacity;
    }
    #sidebar.is-gesture-settle {
        transition:
            transform 0.36s cubic-bezier(0.22, 1, 0.36, 1),
            opacity 0.28s ease !important;
        will-change: transform, opacity;
    }
    body.dock-view-details #player-anchor.player-anchor {
        /* Keep playing player above the sound card; hide only when player is closed */
        opacity: 0 !important;
        pointer-events: none !important;
        transform: translateY(1.25rem);
        transition:
            opacity 0.28s ease,
            transform 0.34s cubic-bezier(0.22, 1, 0.36, 1) !important;
    }
    body.dock-view-details.player-visible #player-anchor.player-anchor {
        opacity: 1 !important;
        pointer-events: auto !important;
        transform: none !important;
        z-index: 235 !important;
        padding-bottom: calc(0.75rem + var(--sab)) !important;
    }
    body.dock-view-details.player-visible #sidebar.sidebar-panel,
    body.dock-view-details.player-visible #sidebar {
        /* Leave room so card content isn't trapped under the floating player */
        padding-bottom: calc(9.5rem + var(--sab)) !important;
    }
    #player-card.player-shell.is-expanded {
        padding-top: 0.45rem !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }
    #player-card.player-shell:has(#ambisonics-control:not(.hidden)) {
        overflow-y: auto !important;
    }
    #player-card .player-sheet-handle {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        /* Large hit target — swipe lives here, not in a thin gap */
        height: 1.85rem;
        margin: 0 0 0.1rem;
        padding: 0.35rem 0;
        border: none;
        background: transparent;
        cursor: pointer;
        flex-shrink: 0;
        touch-action: none;
        -webkit-tap-highlight-color: transparent;
    }
    #player-card .drag-handle {
        display: block;
        width: 2.65rem;
        height: 0.34rem;
        border-radius: 999px;
        background: color-mix(in srgb, var(--ink) 32%, transparent);
    }
    /* Waveform contrast on cream player */
    #player-card #waveform-bg,
    #player-card .waveform-layer--bg {
        color: color-mix(in srgb, var(--well-ink) 30%, transparent) !important;
    }
    #player-card #waveform-buffered,
    #player-card .waveform-layer--buf {
        color: color-mix(in srgb, var(--well-ink) 48%, transparent) !important;
    }
    #player-card #waveform-active,
    #player-card .waveform-layer--act {
        color: var(--well-peach) !important;
    }
    #player-card .player-wave-block {
        height: 2.45rem !important;
        margin: 0 !important;
        flex-shrink: 0;
        touch-action: none;
    }
    #player-card .player-desktop-only {
        display: none !important;
    }
    #player-card .player-volume-row {
        display: none !important;
    }
    #player-card .player-main-row {
        display: flex;
        align-items: flex-start;
        gap: 0.55rem;
        min-width: 0;
        max-width: 100%;
        overflow: visible;
    }
    #player-card .player-play-btn {
        width: 2.4rem !important;
        height: 2.4rem !important;
        min-width: 2.4rem;
        min-height: 2.4rem;
    }
    #player-card .player-title {
        font-size: 0.84rem !important;
        font-weight: 700;
        line-height: 1.25 !important;
        color: var(--well-ink) !important;
        cursor: pointer;
        margin: 0;
        width: 100%;
        max-width: 100%;
        white-space: normal !important;
        word-break: break-word;
        overflow-wrap: anywhere;
        overflow: hidden !important;
        display: -webkit-box !important;
        -webkit-box-orient: vertical !important;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        max-height: calc(1.25em * 2);
        text-overflow: unset;
    }
    #player-card .player-main-meta {
        min-width: 0;
        overflow: visible;
        display: flex;
        flex-direction: column;
        gap: 0.22rem;
    }
    #player-card .player-main-sub {
        display: flex;
        align-items: center;
        gap: 0.25rem;
        margin: 0;
        font-size: 0.68rem;
        font-weight: 700;
        color: var(--ink-muted);
        font-variant-numeric: tabular-nums;
        min-width: 0;
        max-width: 100%;
        overflow: hidden;
    }
    #player-card .player-main-sub__sep {
        opacity: 0.45;
    }
    #player-card .player-gear-compact {
        display: inline;
        margin-left: 0.35rem;
        font-weight: 600;
        opacity: 0.85;
        min-width: 0;
    }
    #player-card .player-main-actions {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 0.25rem;
        min-width: 0;
        max-width: 100%;
    }
    #player-card .player-more-btn {
        display: inline-flex !important;
        width: 2.25rem;
        height: 2.25rem;
        color: #fff !important;
        background: var(--well-ink) !important;
        border: none !important;
        box-shadow: none !important;
    }
    #player-card .player-more-btn:active {
        transform: scale(0.96);
    }
    #player-card .player-more-btn i {
        color: #fff !important;
    }
    #player-card .player-title {
        text-decoration: underline;
        text-decoration-color: color-mix(in srgb, var(--accent, #FBAB57) 55%, transparent);
        text-underline-offset: 0.18em;
        cursor: pointer;
    }
    .player-discover-chip {
        position: absolute;
        top: 0.35rem;
        left: 50%;
        transform: translateX(-50%);
        z-index: 5;
        display: none;
        align-items: center;
        gap: 0.35rem;
        margin: 0;
        padding: 0.35rem 0.55rem;
        border-radius: 999px;
        background: var(--surface-stone, #F5E6D4);
        border: 1px solid var(--panel-border);
        color: var(--ink, #222);
        font-size: 0.72rem;
        font-weight: 700;
        width: fit-content;
        max-width: calc(100% - 1.5rem);
        box-shadow: 0 4px 14px rgba(34, 34, 34, 0.1);
        pointer-events: auto;
    }
    .player-discover-chip:not(.hidden) {
        display: inline-flex;
    }
    .player-discover-chip__action {
        background: none;
        border: none;
        padding: 0;
        font: inherit;
        color: inherit;
        cursor: pointer;
        text-decoration: underline;
        text-underline-offset: 0.12em;
    }
    .player-discover-chip__sep {
        opacity: 0.45;
    }
    .player-discover-chip__dismiss {
        margin-left: 0.15rem;
        background: none;
        border: none;
        padding: 0.1rem;
        color: var(--ink-muted);
        cursor: pointer;
        line-height: 1;
    }
    @media (min-width: 768px) {
        .player-discover-chip { display: none !important; }
    }
    /* Description: swipe-up only */
    #player-card .player-expand-panel {
        max-height: 0;
        opacity: 0;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden;
        pointer-events: none;
        transform: translateY(8px);
        transition:
            max-height 0.38s cubic-bezier(0.22, 1, 0.36, 1),
            opacity 0.26s ease,
            transform 0.34s cubic-bezier(0.22, 1, 0.36, 1),
            padding 0.26s ease;
    }
    #player-card.is-expanded .player-expand-panel {
        max-height: 8.5rem;
        opacity: 1;
        padding: 0.15rem 0.1rem 0.35rem !important;
        pointer-events: auto;
        transform: translateY(0);
        overflow-y: auto;
    }
    #player-card .player-description {
        display: block;
        color: var(--ink-muted);
        font-size: 0.8rem;
        line-height: 1.4;
        margin: 0;
    }
    #player-card .player-description.is-empty {
        font-style: italic;
        opacity: 0.75;
    }
    #player-card .player-gear-line {
        display: none;
    }
    #player-card .player-fab-notch {
        display: none !important;
    }
    #player-card #ambisonics-control:not(.hidden) {
        margin: 0.25rem 0 0.75rem;
        padding-top: 0.65rem;
    }

    /* Details card in dock — compact photo, single chrome, text fit */
    body.dock-view-details #details-modal-content.details-in-dock .details-gallery {
        height: 7.25rem !important;
        border-radius: 0 0 1rem 1rem;
        overflow: hidden;
    }
    body.dock-view-details #details-modal-content.details-in-dock .details-gallery.details-gallery--empty {
        display: none !important;
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
    }
    body.dock-view-details #details-modal-content.details-in-dock .details-gallery__img {
        object-fit: cover;
        object-position: center;
    }
    /* One close control: dock back. Hide gallery X / duplicate back on mobile dock. */
    body.dock-view-details #details-modal-content.details-in-dock .details-close-btn {
        display: none !important;
    }

    /* Sound card copy — never letter-stack; full width under actions */
    #details-modal-content,
    #details-modal-content.details-in-dock {
        min-width: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    #details-modal-content .details-copy,
    #details-modal-content .details-description,
    #details-modal-content #details-description,
    #details-modal-content #details-filename {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        white-space: normal !important;
        overflow-wrap: break-word !important;
        word-break: normal !important;
        word-wrap: break-word !important;
        hyphens: manual !important;
        writing-mode: horizontal-tb !important;
        text-orientation: mixed !important;
        letter-spacing: normal !important;
        line-height: 1.35 !important;
    }
    #details-modal-content .details-header-row {
        display: flex !important;
        flex-direction: column !important;
        gap: 0.55rem !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }
    #details-modal-content .details-title-row {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-items: flex-start !important;
        justify-content: space-between !important;
        gap: 0.5rem 0.65rem !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }
    #details-modal-content #details-title {
        display: block !important;
        flex: 1 1 10rem !important;
        width: auto !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        font-size: 1.35rem !important;
        font-weight: 700 !important;
        line-height: 1.25 !important;
        white-space: normal !important;
        overflow-wrap: break-word !important;
        writing-mode: horizontal-tb !important;
    }
    #details-modal-content .details-header-actions {
        display: flex !important;
        flex: 0 0 auto !important;
        align-items: flex-start !important;
        align-self: flex-start !important;
        justify-content: flex-end !important;
        gap: 0.4rem !important;
        margin: 0 !important;
        width: auto !important;
        max-width: 100% !important;
    }
    #details-modal-content #details-description {
        font-size: 0.9rem !important;
        line-height: 1.45 !important;
    }
    #details-modal-content #details-filename {
        overflow-wrap: anywhere !important;
        word-break: break-word !important;
    }
    #details-modal-content .details-download-xfer.file-xfer,
    #details-modal-content .file-xfer--compact {
        width: auto !important;
        max-width: 12rem !important;
        margin-inline: 0 !important;
    }
    body.dock-view-details #details-modal-content.details-in-dock .grid.grid-cols-2 {
        grid-template-columns: 1fr 1fr;
        column-gap: 0.75rem;
    }
    body.dock-view-details #details-modal-content.details-in-dock .meta-group {
        min-width: 0;
        max-width: 100%;
    }
    body.dock-view-details #details-modal-content.details-in-dock .meta-value {
        overflow-wrap: break-word;
        word-break: normal;
        min-width: 0;
    }
    .details-report-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.35rem;
        min-height: 2.5rem;
        padding: 0.4rem 0.75rem;
        border-radius: 999px;
        background: color-mix(in srgb, #b91c1c 12%, var(--well-white));
        color: #b91c1c;
        border: 1px solid color-mix(in srgb, #b91c1c 25%, transparent);
        font-size: 0.72rem;
        font-weight: 800;
        flex-shrink: 0;
    }
    .details-more-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 2.35rem;
        height: 2.35rem;
        border-radius: 999px;
        background: var(--well-ink);
        color: #fff;
        border: none;
        flex-shrink: 0;
    }
    .details-more-btn i { color: #fff; }
    .details-close-btn {
        background: color-mix(in srgb, var(--well-ink) 72%, transparent);
        color: #fff;
        backdrop-filter: blur(8px);
    }
    .details-close-btn i { color: #fff; }

    /* Analyzer panels — shared dashed window rim (.ds-frame / --frame-dashed) */
    #player-analyzers .analyzer-panel {
        background: var(--well-white, var(--panel-elevated)) !important;
        border: var(--frame-dashed, 2px dashed color-mix(in srgb, var(--ink) 18%, transparent)) !important;
        border-radius: var(--frame-radius, 1.1rem) !important;
        box-shadow: none !important;
    }

    /* —— Record / trim stages —— */
    #mobile-record-overlay {
        position: fixed;
        inset: 0;
        z-index: 220;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-end;
        gap: 0;
        padding: 0;
        padding-bottom: var(--mobile-fs-bottom);
        background: color-mix(in srgb, var(--well-ink) 48%, transparent);
        pointer-events: auto;
    }
    #mobile-record-overlay.hidden {
        display: none !important;
        pointer-events: none !important;
    }
    .mobile-rec-stage {
        background: var(--well-cream);
        border-radius: 1.5rem 1.5rem 0 0;
        padding: 1.15rem 1.15rem 1.35rem;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0.85rem;
        box-shadow: var(--well-shadow-strong);
        pointer-events: auto;
        position: relative;
        z-index: 1;
    }
    .mobile-rec-stage.hidden {
        display: none !important;
    }
    .mobile-rec-canvas {
        width: 100%;
        height: 5.5rem;
        border-radius: 1rem;
        background: var(--well-white);
        display: block;
        touch-action: none;
    }
    .mobile-rec-meter {
        display: flex;
        align-items: center;
        gap: 0.65rem;
    }
    .mobile-rec-meter__bar-wrap {
        flex: 1;
        height: 0.55rem;
        border-radius: 999px;
        background: color-mix(in srgb, var(--ink) 10%, transparent);
        overflow: hidden;
    }
    .mobile-rec-meter__bar {
        height: 100%;
        width: 0%;
        border-radius: inherit;
        background: var(--well-peach);
        transition: width 0.08s linear, background 0.15s ease;
    }
    .mobile-rec-meter__bar.is-hot {
        background: #963417;
    }
    .mobile-rec-gain {
        display: flex;
        flex-direction: column;
        gap: 0.35rem;
        margin: 0.2rem 0 0.15rem;
    }
    .mobile-rec-gain__label {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 0.72rem;
        font-weight: 700;
        color: var(--ink-muted);
    }
    .mobile-rec-gain__range {
        width: 100%;
        accent-color: var(--well-peach);
        height: 0.35rem;
    }
    .mobile-rec-db {
        font-size: 0.75rem;
        font-weight: 700;
        font-variant-numeric: tabular-nums;
        color: var(--well-ink);
        min-width: 4.5rem;
        text-align: right;
    }
    .mobile-rec-trim__rails {
        display: grid;
        gap: 0.45rem;
    }
    .mobile-rec-trim__range {
        width: 100%;
        accent-color: var(--well-peach);
    }
    .mobile-rec-trim__times {
        display: flex;
        justify-content: space-between;
        font-size: 0.7rem;
        font-weight: 700;
        color: var(--ink-muted);
        font-variant-numeric: tabular-nums;
    }
    .mobile-record__timer {
        font-size: 1.75rem;
        font-weight: 700;
        letter-spacing: -0.03em;
        text-align: center;
        color: var(--well-ink);
        font-variant-numeric: tabular-nums;
        transition: color 0.2s ease;
    }
    #mobile-record-overlay.is-recording #mobile-record-timer {
        color: #dc2626;
        animation: mobile-rec-timer-blink 1.05s ease-in-out infinite;
    }
    @keyframes mobile-rec-timer-blink {
        0%, 100% { opacity: 1; }
        50% { opacity: 0.45; }
    }
    .mobile-record__hint {
        text-align: center;
        font-size: 0.78rem;
        color: var(--ink-muted);
        margin: 0;
    }
    .mobile-record__actions {
        display: flex;
        gap: 0.75rem;
        justify-content: center;
        margin-top: 0.25rem;
    }
    .mobile-record__actions .ds-btn {
        flex: 1;
        min-width: 0;
        min-height: 2.85rem;
    }
    .mobile-record__actions--triple {
        flex-wrap: wrap;
    }
    .mobile-record__actions--triple .ds-btn {
        flex: 1 1 calc(33% - 0.5rem);
        min-width: 5.5rem;
    }
    .mobile-rec-meta {
        display: flex;
        flex-wrap: wrap;
        gap: 0.45rem 0.75rem;
        font-size: 0.72rem;
        font-weight: 700;
        color: var(--ink-muted);
    }
    .mobile-rec-meta span {
        display: inline-flex;
        align-items: center;
        gap: 0.3rem;
        min-width: 0;
    }
    .mobile-rec-meta i {
        font-size: 0.85rem;
        color: var(--well-peach);
    }
    .mobile-rec-preview-row {
        display: flex;
        align-items: center;
        gap: 0.75rem;
    }
    .mobile-rec-play {
        width: 2.85rem;
        height: 2.85rem;
        border-radius: 999px;
        border: none;
        background: var(--well-ink);
        color: #fff;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }
    .mobile-rec-play i {
        color: #fff;
        font-size: 1rem;
        margin-left: 0.1rem;
    }
    .mobile-rec-play.is-playing i {
        margin-left: 0;
    }
    .mobile-rec-play-time {
        font-size: 0.9rem;
        font-weight: 700;
        font-variant-numeric: tabular-nums;
        color: var(--well-ink);
    }
    .mobile-rec-editor-link {
        border: none;
        background: transparent;
        color: var(--ink-muted);
        font-size: 0.75rem;
        font-weight: 700;
        text-decoration: underline;
        text-underline-offset: 0.15em;
        padding: 0.15rem;
        cursor: pointer;
        align-self: center;
    }
    #mobile-record-overlay.is-recording #mobile-record-title::after {
        content: '';
        display: inline-block;
        width: 0.45rem;
        height: 0.45rem;
        margin-left: 0.45rem;
        border-radius: 50%;
        background: #963417;
        vertical-align: middle;
        animation: mobile-rec-pulse 1s ease infinite;
    }
    @keyframes mobile-rec-pulse {
        0%, 100% { opacity: 1; transform: scale(1); }
        50% { opacity: 0.45; transform: scale(0.85); }
    }

    /* —— Modals: soft top sheet feel, cream —— */
    .app-modal-overlay > .app-modal-panel,
    .app-modal-overlay > [id$="-modal-content"],
    #auth-modal > #auth-modal-content,
    #events-sheet .events-sheet-panel {
        background: var(--well-cream) !important;
        border: none !important;
        box-shadow: none !important;
    }
    #ui-modal-overlay > #ui-modal-content {
        border-radius: var(--well-radius-sheet) !important;
        background: var(--well-white) !important;
        border: none !important;
        box-shadow: var(--well-shadow-strong) !important;
    }

    /* —— Type roles on mobile (Geologica heavy titles like reference) —— */
    .type-eyebrow,
    .modal-label,
    #sidebar .text-\[10px\].font-bold.uppercase,
    #sidebar .uppercase.tracking-wider,
    #sidebar .uppercase.tracking-widest {
        font-family: var(--font-ui) !important;
        font-size: 0.6875rem !important;
        font-weight: 700 !important;
        letter-spacing: 0.12em !important;
        text-transform: uppercase !important;
        color: var(--ink-muted) !important;
    }
    .type-title,
    .type-title--sm {
        font-family: var(--font-ui) !important;
        font-weight: 700 !important;
        letter-spacing: -0.03em !important;
        line-height: 1.08 !important;
        color: var(--ink) !important;
    }
    .type-title {
        font-size: clamp(1.75rem, 7vw, 2.35rem) !important;
    }
    .type-title--sm {
        font-size: clamp(1.35rem, 5.5vw, 1.65rem) !important;
    }
    .type-accent,
    .ds-title-accent {
        color: var(--well-ink) !important;
        font-weight: 700;
    }
    .brand-title,
    .app-rail__brand {
        font-family: var(--font-brand) !important;
        font-weight: 400 !important;
    }
    .type-metric {
        font-family: var(--font-ui) !important;
        font-weight: 700 !important;
        letter-spacing: -0.025em !important;
    }

    /* —— Soft card primitives —— */
    .ds-card {
        border-radius: var(--well-radius-card);
        background: var(--well-white);
        box-shadow: var(--well-shadow);
        border: none;
        padding: var(--well-pad);
    }
    .ds-card--peach {
        background: var(--well-peach);
        color: #222222;
        box-shadow: var(--well-shadow);
    }
    .ds-card--ink {
        background: #222222;
        color: #FFF3E2;
        box-shadow: var(--well-shadow);
    }
    html.dark .ds-card--ink,
    .dark .ds-card--ink {
        background: #111111;
        color: #FFF3E2;
    }

    /* Sound list / feed rows → soft cards */
    #sounds-list .sidebar-sound-row {
        border-radius: 0.9rem !important;
    }
    #sidebar-feed .feed-card,
    #panel-expeditions > * {
        border-radius: var(--well-radius-card) !important;
    }

    /* Segmented controls → soft peach active + thumb (nested in cream track) */
    .glass-seg {
        background: var(--well-cream-deep) !important;
        border-radius: 999px !important;
        border: none !important;
        padding: 0.25rem !important;
    }
    .glass-seg__btn.is-active,
    .glass-seg__btn.is-active--accent {
        background: var(--well-peach) !important;
        color: #222222 !important;
        border-radius: 999px !important;
        box-shadow: var(--control-thumb, inset 0 -3px 0 rgba(34, 34, 34, 0.18)) !important;
    }
    .glass-seg__btn.is-active:active,
    .glass-seg__btn.is-active--accent:active {
        box-shadow: var(--control-thumb-pressed, inset 0 -1px 0 rgba(34, 34, 34, 0.22)) !important;
    }

    /* Peach CTAs keep thumb on mobile (primary keeps outer well-shadow, not thumb) */
    .ds-btn--accent,
    .ds-btn--soft {
        box-shadow: var(--control-thumb, inset 0 -3px 0 rgba(34, 34, 34, 0.18)) !important;
    }
    .ds-btn--accent:active:not(:disabled),
    .ds-btn--soft:active:not(:disabled) {
        box-shadow: var(--control-thumb-pressed, inset 0 -1px 0 rgba(34, 34, 34, 0.22)) !important;
    }

    /* Hide peach dock for add / record / sound card overlays */
    body.hide-mobile-nav .mobile-bottom-nav {
        display: none !important;
        pointer-events: none !important;
        visibility: hidden !important;
    }
    body.hide-mobile-nav {
        --mobile-fs-bottom: max(0.85rem, var(--sab));
    }
    body.hide-mobile-nav #mobile-record-overlay {
        padding-bottom: max(0.85rem, var(--sab));
    }
    body.hide-mobile-nav #events-sheet .events-sheet-panel {
        padding-bottom: max(0.85rem, var(--sab)) !important;
    }

    /* Primary CTAs on mobile: charcoal soft pill (reference) */
    .ds-btn--primary,
    #auth-action-btn,
    #publish-btn {
        border-radius: 999px !important;
        box-shadow: var(--well-shadow) !important;
    }

    /* Compact toast below top map chrome */
    #toast-message {
        top: calc(var(--sat, env(safe-area-inset-top, 0px)) + 4.15rem) !important;
        padding: 0.3rem 0.65rem !important;
        max-width: min(82vw, 17.5rem) !important;
        background: var(--well-white) !important;
        border: 1px solid color-mix(in srgb, var(--well-peach) 45%, transparent) !important;
        box-shadow: var(--well-shadow) !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
    #toast-message .toast-text,
    #toast-message #toast-text {
        font-size: 0.7rem !important;
        font-weight: 650 !important;
        line-height: 1.25 !important;
    }
    #toast-message .toast-icon {
        font-size: 0.72rem !important;
    }

    /* Add-sound modal: no horizontal scroll; slightly tighter */
    #add-modal.app-modal-overlay,
    #add-modal {
        overflow-x: hidden !important;
    }
    #add-modal-content {
        overflow: hidden !important;
        max-width: 100vw !important;
        min-height: 0 !important;
    }
    #add-modal-content > .px-6 {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
    #add-modal-content > .add-modal-body,
    #add-modal-content > .add-modal-footer {
        padding: 1rem !important;
        overflow-x: hidden !important;
    }
    #add-modal-content > .add-modal-body {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        gap: 1.15rem !important;
        -webkit-overflow-scrolling: touch;
    }
    #add-modal-content > .add-modal-footer {
        flex-shrink: 0 !important;
        position: sticky;
        bottom: 0;
        z-index: 2;
    }
    #add-modal-content .modal-input,
    #add-modal-content select.modal-input,
    #add-modal-content textarea.modal-input {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    #add-modal-content .file-xfer__name,
    #add-modal-content #add-file-name {
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }
    #add-modal-content .space-y-3.p-4,
    #add-modal-content .bg-white.p-4 {
        padding: 0.85rem !important;
    }
    #add-modal-content .grid {
        max-width: 100%;
    }

    /* CtxPopup: no sticky hover wash over the player on touch */
    #ctx-popup-menu {
        z-index: 260 !important;
        max-width: min(14rem, calc(100vw - 1.5rem));
    }
    #ctx-popup-menu button:hover {
        background: transparent !important;
    }
    @media (hover: hover) and (pointer: fine) {
        #ctx-popup-menu button:hover {
            background: color-mix(in srgb, var(--well-cream-deep) 80%, transparent) !important;
        }
    }

    @media (prefers-reduced-motion: reduce) {
        .mobile-nav-btn,
        .mobile-nav-fab {
            transition: none !important;
        }
    }
}