/* ═══════════════════════════════════════════════════════════════════════
   mobile.css — phones and tablets (app page only).
   Compact layout (phones, either orientation): a slim top bar with a menu,
   the sketch over the full height, the tools in a dock at the bottom, panels
   as sheets rising from the bottom. Touch devices of any size get larger
   targets and touch-friendly drawing. Desktop is untouched: every rule here
   sits inside a media query.
   --dock-h is measured by mobile-shell.module.mjs.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
    --dock-h: 58px;
    --topbar-h: 48px;
    --top-h: calc(var(--topbar-h) + env(safe-area-inset-top, 0px));   /* bar + status-bar inset */
}

/* Hidden everywhere unless the compact layout shows them. */
.ss-mobile-only { display: none !important; }

/* ── Touch devices (any size) ────────────────────────────────────────────── */
@media (pointer: coarse) {
    button,
    .chameleon-navbar__tool-button,
    .chameleon-navbar__icon-button {
        touch-action: manipulation;          /* no double-tap zoom delay */
        -webkit-tap-highlight-color: transparent;
    }

    /* While a drawing tool is active, a finger draws instead of scrolling. */
    body.brush-mode-active #svgWrapper,
    body.shape-mode-active #svgWrapper,
    body.eraser-mode-active #svgWrapper {
        touch-action: none;
    }

    .eraser-caret-zone {
        width: 18px;
        height: 18px;
    }
}

/* ── Compact layout: phones, portrait or landscape ───────────────────────── */
@media (max-width: 760px), (max-height: 520px) {
    .ss-mobile-only { display: revert !important; }

    /* Top bar: logo, menu button. */
    .chameleon-navbar__site-row {
        min-height: var(--topbar-h);
        height: var(--topbar-h);
        flex-wrap: nowrap;
        gap: 8px;
    }
    .chameleon-navbar__logo { width: 84px; }
    .chameleon-navbar__site-nav,
    .chameleon-navbar__site-row-end { display: none; }

    .ss-menu-btn {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        margin-left: auto;
        width: 44px;
        height: 44px;
        border: 0;
        border-radius: 10px;
        background: transparent;
        color: inherit;
        cursor: pointer;
    }
    .ss-menu-btn svg { width: 22px; height: 22px; }

    /* Menu: the site navigation, language and account, as a sheet under the bar. */
    html.ss-menu-open .chameleon-navbar__site-nav,
    html.ss-menu-open .chameleon-navbar__site-row-end {
        display: flex;
        position: fixed;
        left: 0;
        right: 0;
        z-index: 2600;
        background: #ffffff;
        box-shadow: 0 10px 24px rgba(15, 23, 42, 0.16);
    }
    html.ss-menu-open .chameleon-navbar__site-nav {
        top: var(--top-h);
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
        padding: 8px 12px;
        max-height: calc(100dvh - var(--top-h) - 64px);
        overflow-y: auto;
        border-top: 1px solid #edf1f6;
    }
    html.ss-menu-open .chameleon-navbar__site-row-end {
        top: auto;
        bottom: 0;
        justify-content: space-between;
        align-items: center;
        min-height: 60px;
        padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px));
        border-top: 1px solid #edf1f6;
    }
    html.ss-menu-open .chameleon-navbar__site-nav .chameleon-navbar__site-link,
    html.ss-menu-open .ss-menu-item {
        display: flex;
        align-items: center;
        min-height: 44px;
        padding: 0 12px;
        border: 0;
        border-radius: 8px;
        background: transparent;
        color: inherit;
        font: inherit;
        font-size: 15px;
        text-align: left;
        flex: none;
    }
    html.ss-menu-open .navbar-dropdown__menu { position: static; box-shadow: none; }
    .ss-menu-scrim {
        position: fixed;
        inset: var(--top-h) 0 0 0;
        z-index: 2550;
        background: rgba(15, 23, 42, 0.28);
    }

    /* Tools: a dock at the bottom, one scrollable row, play section first. */
    .chameleon-navbar__tool-row {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1900;
        min-height: 0;
        height: auto;
        flex-wrap: nowrap !important;
        justify-content: flex-start !important;
        gap: 4px;
        padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px)) !important;
        overflow-x: auto;
        overflow-y: hidden;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
        border-top: 1px solid #dfe6ef;
        box-shadow: 0 -4px 14px rgba(15, 23, 42, 0.08);
    }
    .chameleon-navbar__tool-row::-webkit-scrollbar { display: none; }
    .chameleon-navbar__tool-row .toolbar-section { flex: none; gap: 0; }
    .chameleon-navbar__tool-row .toolbar-section__label { display: none; }
    .chameleon-navbar__tool-row .toolbar-section__items { gap: 4px; flex-wrap: nowrap; }
    .chameleon-navbar__tool-row .toolbar-section-sep { height: 28px; margin: 0 4px; flex: none; }
    .chameleon-navbar__tool-row .toolbar-vsep { display: none; }
    #toolbarSectionAudio { order: -2; }
    #toolbarSectionAudio + .toolbar-section-sep { order: -1; }
    .chameleon-navbar__tool-row .chameleon-navbar__tool-button,
    .chameleon-navbar__tool-row .chameleon-navbar__icon-button {
        flex: none !important;
        min-width: 44px;
        height: 44px;
        padding: 0 10px;
    }

    /* Compact dock buttons: the mixer by its icon, text buttons tighter, and a
       fade at the right edge showing that the row scrolls. */
    #mixerToggle span { display: none; }
    .chameleon-navbar__tool-row .chameleon-navbar__tool-button:not(:has(svg, img)) {
        padding: 0 8px;
        font-size: 13px;
    }
    .chameleon-navbar__tool-row {
        -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
        mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
    }
    .chameleon-navbar__tool-row.is-scrolled-end {
        -webkit-mask-image: none;
        mask-image: none;
    }

    /* The sketch fills the space between the bar and the dock. */
    body { padding-bottom: var(--dock-h); }
    #svgWrapper { margin-left: 0 !important; margin-right: 0 !important; }

    /* Library / Inspector open from the menu, over the full width. */
    .side-panel { top: var(--top-h); bottom: var(--dock-h); }
    .side-panel__rail { display: none; }
    .side-panel__body { width: 100vw; border-radius: 0 !important; }

    /* Panels become sheets rising from the dock. */
    .sketch-panel,
    #mappingModal,
    .sketch-popover,
    .mixer-strip {
        top: auto !important;
        left: 0 !important;
        right: 0 !important;
        bottom: var(--dock-h) !important;
        width: 100% !important;
        max-width: none !important;
        max-height: calc(100dvh - var(--top-h) - var(--dock-h) - 12px);
        border-radius: 14px 14px 0 0 !important;
        border-bottom: 0;
        box-shadow: 0 -8px 28px rgba(15, 23, 42, 0.2);
    }
    .sketch-popover,
    .mixer-strip { overflow-y: auto; }
    .mixer-strip__header { cursor: default; }

    /* Tool menus (brush, eraser, shapes, line style, export) as sheets too. */
    .eraser-size-popup,
    .shape-palette,
    .export-engine-menu,
    .line-style-popup {
        position: fixed !important;
        left: 8px !important;
        right: 8px !important;
        top: auto !important;
        bottom: calc(var(--dock-h) + 8px) !important;
        width: auto !important;
        min-width: 0 !important;
        max-height: calc(100dvh - var(--top-h) - var(--dock-h) - 24px) !important;
        overflow-y: auto;
    }

    /* Messages sit above the dock. */
    .tour-toast {
        left: 10px;
        right: 10px;
        bottom: calc(var(--dock-h) + 10px);
        max-width: none;
    }
    .image-import-backdrop { padding-bottom: calc(var(--dock-h) + 8px); }
}

/* ── Safe areas (notch, rounded corners, home indicator) ────────────────────
   With viewport-fit=cover the bars and backgrounds reach the screen edges;
   their content keeps clear of the notch. */
@media (max-width: 760px), (max-height: 520px) {
    .chameleon-navbar__site-row {
        box-sizing: content-box;
        padding-top: env(safe-area-inset-top, 0px);
        padding-left: max(12px, env(safe-area-inset-left, 0px));
        padding-right: max(8px, env(safe-area-inset-right, 0px));
    }
    .chameleon-navbar__tool-row {
        padding-left: max(8px, env(safe-area-inset-left, 0px)) !important;
        padding-right: max(8px, env(safe-area-inset-right, 0px)) !important;
    }
    #svgWrapper {
        margin-left: env(safe-area-inset-left, 0px) !important;
        margin-right: env(safe-area-inset-right, 0px) !important;
    }
    html.ss-menu-open .chameleon-navbar__site-nav,
    html.ss-menu-open .chameleon-navbar__site-row-end,
    .sketch-panel,
    .sketch-popover,
    .mixer-strip,
    .side-panel__body {
        padding-left: env(safe-area-inset-left, 0px);
        padding-right: env(safe-area-inset-right, 0px);
    }
    .eraser-size-popup,
    .shape-palette,
    .export-engine-menu,
    .line-style-popup {
        left: max(8px, env(safe-area-inset-left, 0px)) !important;
        right: max(8px, env(safe-area-inset-right, 0px)) !important;
    }
    .tour-toast {
        left: max(10px, env(safe-area-inset-left, 0px));
        right: max(10px, env(safe-area-inset-right, 0px));
    }
}

/* Landscape phones: every pixel of height counts. */
@media (max-height: 520px) {
    :root { --topbar-h: 42px; }
    .chameleon-navbar__logo { width: 72px; }
    .chameleon-navbar__tool-row .chameleon-navbar__tool-button,
    .chameleon-navbar__tool-row .chameleon-navbar__icon-button { height: 40px; }
    .chameleon-navbar__tool-row { padding-top: 4px !important; padding-bottom: calc(4px + env(safe-area-inset-bottom, 0px)) !important; }
}

/* ── Dark theme ──────────────────────────────────────────────────────────── */
@media (max-width: 760px), (max-height: 520px) {
    [data-theme="dark"] .chameleon-navbar__tool-row { border-top-color: rgba(255, 255, 255, 0.1); }
    [data-theme="dark"].ss-menu-open .chameleon-navbar__site-nav,
    [data-theme="dark"].ss-menu-open .chameleon-navbar__site-row-end {
        background: #161b21;
        border-top-color: rgba(255, 255, 255, 0.08);
    }
    [data-theme="dark"] .ss-menu-scrim { background: rgba(0, 0, 0, 0.5); }
}

/* Portrait phones: a hint to turn the device for drawing (shown by mobile-shell). */
.ss-rotate-hint .tour-toast__text::before {
    content: "⟳ ";
}

/* ── Selected shape: actions bar (touch screens) ─────────────────────────── */
.shape-actions {
    position: fixed;
    z-index: 1950;
    display: flex;
    gap: 2px;
    padding: 4px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.18);
}
.shape-actions[hidden] { display: none; }
.shape-actions__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 40px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #2a4060;
    touch-action: manipulation;
}
.shape-actions__btn svg { width: 20px; height: 20px; }
.shape-actions__btn:active { background: rgba(74, 143, 168, 0.18); }
.shape-actions__btn--delete { color: #b83030; }
[data-theme="dark"] .shape-actions { background: #1e2329; border-color: rgba(255, 255, 255, 0.14); }
[data-theme="dark"] .shape-actions__btn { color: #d8e6f0; }
[data-theme="dark"] .shape-actions__btn--delete { color: #f08a8a; }

/* ── Panels on touch screens ─────────────────────────────────────────────── */
.fx-move { display: none; }

@media (pointer: coarse) {
    /* noUiSlider: larger handles, centred on the 18px track. */
    :root { --sl-handle-size: 26px; }
    .noUi-horizontal .noUi-handle {
        top: calc((18px - var(--sl-handle-size)) / 2);
    }
    .noUi-target { margin-block: 6px; }

    /* Checkboxes and small buttons in panels. */
    .sketch-panel input[type="checkbox"],
    .sketch-popover input[type="checkbox"],
    .mixer-strip input[type="checkbox"] {
        width: 20px;
        height: 20px;
    }
    .sketch-panel .effects-chain-toggle,
    .sketch-panel button.effects-chain-toggle { min-width: 36px; min-height: 36px; }

    /* Effects: reorder with ▲ ▼ (drag & drop needs a mouse); no drag handle. */
    .effect-row[data-effect-id] .drag-handle { display: none; }
    .fx-move {
        display: inline-flex;
        flex-direction: column;
        gap: 2px;
        margin-left: auto;
    }
    .fx-move__btn {
        width: 32px;
        height: 24px;
        border: 1px solid #d4dce8;
        border-radius: 6px;
        background: #f5f8fc;
        color: #2a4060;
        font-size: 10px;
        line-height: 1;
        touch-action: manipulation;
    }
    [data-theme="dark"] .fx-move__btn {
        border-color: rgba(255, 255, 255, 0.16);
        background: rgba(255, 255, 255, 0.06);
        color: #d8e6f0;
    }

    /* Mixer faders and pans: room for a finger. */
    .mix-ch input[type="range"] { min-height: 28px; }
}

/* ── Mapping panel on narrow screens: each row on two lines ──────────────────
   feature · characteristic · invert, then the range slider over the full width. */
@media (max-width: 600px) {
    .sketch-modal__body .selection-header {
        grid-template-columns: 1fr;
    }
    .sketch-modal__body .selection-header .column:not(.feature-column) { display: none; }
    .sketch-modal__body .selection-row {
        grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto;
        row-gap: 6px;
        padding: 8px 10px;
    }
    .sketch-modal__body .selection-row .range-slider-column {
        grid-column: 1 / -1;
        padding: 2px 16px 4px;
    }
    .sketch-modal__body .selection-row .characteristic-column { font-size: 12px; line-height: 1.25; }
}

/* Saved sketches: the toolbar button by its icon on phones; the menu as a sheet. */
@media (max-width: 760px), (max-height: 520px) {
    .sk-btn .sk-btn__title { display: none; }
    .sk-btn { position: relative; }
    .sk-btn__dot { position: absolute; top: 6px; right: 6px; }
    .sk-menu {
        position: fixed !important;
        left: max(8px, env(safe-area-inset-left, 0px)) !important;
        right: max(8px, env(safe-area-inset-right, 0px)) !important;
        top: auto !important;
        bottom: calc(var(--dock-h) + 8px) !important;
        width: auto !important;
    }
}