/**
 * Mobile + tablet (≤1024px): copy **exact** Generator mobile tokens from
 * generator.css — .tg-composer (567–581) + @media (max-width: 1024px)
 * (1539–1561). No guessed colors. Desktop ≥1025px: not targeted.
 */
@media (max-width: 1024px) {
    /* STABILITY GUARDRAIL:
       Keep mobile/tablet shell visuals centralized in this file.
       If changing mobile glass look, edit here first to avoid cross-page regressions. */
    /* Single source of truth: mobile/tablet glass shells */
    html body .main-header {
        background: rgba(8, 11, 17, 0.38) !important;
        border-bottom-color: rgba(255, 255, 255, 0.10) !important;
        backdrop-filter: blur(var(--glass-blur)) !important;
        -webkit-backdrop-filter: blur(var(--glass-blur)) !important;
    }

    /* generator.css:567–581 + 1539–1540 */
    html body #tg-composer.tg-composer {
        background: rgba(10, 12, 18, 0.74) !important;
        backdrop-filter: blur(var(--glass-blur)) !important;
        -webkit-backdrop-filter: blur(var(--glass-blur)) !important;
        border: 1px solid rgba(255, 255, 255, 0.12) !important;
        box-shadow: 0 30px 60px rgba(0, 0, 0, 0.8), inset 0 0 15px rgba(255, 255, 255, 0.02) !important;
    }

    /* Same shell; edge bar uses top border only (sketch/magic-blend layout) */
    html body #qe-mobile-composer.tg-composer {
        background: rgba(10, 12, 18, 0.74) !important;
        backdrop-filter: blur(var(--glass-blur)) !important;
        -webkit-backdrop-filter: blur(var(--glass-blur)) !important;
        border: none !important;
        border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
        box-shadow: 0 30px 60px rgba(0, 0, 0, 0.8), inset 0 0 15px rgba(255, 255, 255, 0.02) !important;
    }

    /* generator.css:1543–1548 */
    html body #tg-composer .tg-prompt-wrapper,
    html body #qe-mobile-composer .tg-prompt-wrapper {
        background: rgba(249, 250, 252, 0.045) !important;
        border: 1px solid rgba(255, 255, 255, 0.12) !important;
        border-radius: 18px !important;
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.06),
            0 8px 24px rgba(0, 0, 0, 0.16) !important;
        backdrop-filter: none !important;
    }

    /* generator.css:1551–1553 */
    html body #tg-composer .tg-prompt-wrapper:focus-within,
    html body #qe-mobile-composer .tg-prompt-wrapper:focus-within {
        border-color: var(--neon-green) !important;
        background: rgba(246, 249, 252, 0.08) !important;
    }

    /* generator.css:1556–1561 */
    html body #tg-composer .tg-prompt-textarea,
    html body #tg-composer .tg-prompt-textarea:focus,
    html body #qe-mobile-composer .tg-prompt-textarea,
    html body #qe-mobile-composer .tg-prompt-textarea:focus {
        color: var(--text-white) !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        outline: none !important;
    }

    html body #tg-composer .tg-prompt-textarea::placeholder,
    html body #qe-mobile-composer .tg-prompt-textarea::placeholder {
        color: #94a3b8 !important;
    }

    /* generator.css:654–660 (.tg-param-group) */
    html body #tg-composer .tg-param-group,
    html body #qe-mobile-composer .tg-param-group {
        background: rgba(255, 255, 255, 0.03) !important;
        border: 1px solid rgba(255, 255, 255, 0.05) !important;
    }

    /* generator.css:672–676 (inputs in param row) */
    html body #tg-composer .tg-num-input,
    html body #qe-mobile-composer .tg-num-input {
        color: var(--neon-green) !important;
    }

    /* Quick Edit / Sketch / Magic Blend / Stencil: left tools panel shell only */
    html body .qe-sidebar {
        background: rgba(8, 11, 17, 0.38) !important;
        border-right-color: rgba(255, 255, 255, 0.10) !important;
        backdrop-filter: blur(var(--glass-blur)) !important;
        -webkit-backdrop-filter: blur(var(--glass-blur)) !important;
    }

    /* Mobile left tool strips (the visible left panel on QE/Sketch/Magic/Stencil) */
    html body #qe-mobile-tool-strip,
    html body #mp-mobile-tool-strip {
        background: rgba(8, 11, 17, 0.38) !important;
        border-right: 1px solid rgba(255, 255, 255, 0.10) !important;
        backdrop-filter: blur(var(--glass-blur)) !important;
        -webkit-backdrop-filter: blur(var(--glass-blur)) !important;
    }

    /* Keep undo/redo icons bright on mobile/tablet (visual only) */
    html body #btn-m-undo,
    html body #btn-m-redo,
    html body #btn-ts-undo,
    html body #btn-ts-redo,
    html body #mp-btn-ts-undo,
    html body #mp-btn-ts-redo {
        opacity: 1 !important;
        color: var(--text-white) !important;
    }

    html body #btn-m-undo:disabled,
    html body #btn-m-redo:disabled,
    html body #btn-ts-undo:disabled,
    html body #btn-ts-redo:disabled,
    html body #mp-btn-ts-undo:disabled,
    html body #mp-btn-ts-redo:disabled {
        opacity: 1 !important;
        color: var(--text-white) !important;
    }

    /* Shared mobile clear/upload glass controls (QE/Sketch/Magic/Stencil) */
    html body #btn-m-clear-image,
    html body #qe-mobile-upload-btn,
    html body #btn-ts-clear,
    html body #mp-btn-ts-clear,
    html body #mp-mobile-upload-btn {
        border-radius: 12px !important;
        border: 1px solid rgba(16, 185, 129, 0.32) !important;
        background:
            linear-gradient(180deg, rgba(16, 185, 129, 0.12) 0%, rgba(255, 255, 255, 0.02) 100%),
            linear-gradient(180deg, rgba(7, 20, 34, 0.94) 0%, rgba(4, 13, 24, 0.94) 100%) !important;
        color: var(--neon-green) !important;
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.14),
            0 8px 14px rgba(2, 6, 23, 0.36) !important;
    }

    html body #btn-m-clear-image:active,
    html body #qe-mobile-upload-btn:active,
    html body #btn-ts-clear:active,
    html body #mp-btn-ts-clear:active,
    html body #mp-mobile-upload-btn:active {
        border-color: rgba(16, 185, 129, 0.58) !important;
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.2),
            0 0 12px rgba(16, 185, 129, 0.28) !important;
    }
}

@media (min-width: 601px) and (max-width: 1024px) {
    html body #btn-m-clear-image,
    html body #qe-mobile-upload-btn,
    html body #btn-ts-clear,
    html body #mp-btn-ts-clear,
    html body #mp-mobile-upload-btn {
        width: 48px !important;
        height: 48px !important;
        min-width: 48px !important;
        min-height: 48px !important;
        max-width: 48px !important;
        max-height: 48px !important;
        flex: 0 0 48px !important;
        padding: 4px 2px !important;
        border-radius: 8px !important;
    }

    /* Shared iPad slider length + tool vertical anchors (Sketch + Magic Blend) */
    html body #qe-mobile-tool-strip .qe-m-slider-container,
    html body #mp-mobile-tool-strip .qe-m-slider-container {
        height: 96px !important;
    }

    html body #qe-mobile-tool-strip .qe-m-slider,
    html body #mp-mobile-tool-strip .qe-m-slider {
        width: 96px !important;
    }

    html body #btn-ts-eraser,
    html body #mp-btn-ts-eraser {
        top: 182px !important;
    }

    html body #btn-ts-select,
    html body #mp-btn-ts-select {
        top: 234px !important;
    }
}

@media (max-width: 600px) {
    html body #btn-m-clear-image,
    html body #qe-mobile-upload-btn,
    html body #btn-ts-clear,
    html body #mp-btn-ts-clear,
    html body #mp-mobile-upload-btn {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        min-height: 40px !important;
        max-width: 40px !important;
        max-height: 40px !important;
        flex: 0 0 40px !important;
        padding: 4px 2px !important;
        border-radius: 8px !important;
    }
}

/* Phone portrait: Sketch + Magic Blend use the same glass look as Quick Edit.
   The generated-output leak is fixed in JS by keeping .qe-panel-right hidden on phone,
   so these panels can stay transparent/blurred instead of solid. */
@media (max-width: 600px) and (orientation: portrait) {
    html body.magic-blend-page #mp-mobile-tool-strip,
    html body:not(.quick-edit-page):not(.stencil-page):not(.magic-blend-page) #qe-mobile-tool-strip {
        background: rgba(8, 11, 17, 0.38) !important;
        border-right: 1px solid rgba(255, 255, 255, 0.10) !important;
        backdrop-filter: blur(var(--glass-blur)) !important;
        -webkit-backdrop-filter: blur(var(--glass-blur)) !important;
        box-shadow: none !important;
    }

    html body.magic-blend-page #qe-mobile-composer.tg-composer,
    html body:not(.quick-edit-page):not(.stencil-page):not(.magic-blend-page) #qe-mobile-composer.tg-composer {
        background: rgba(10, 12, 18, 0.74) !important;
        border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
        backdrop-filter: blur(var(--glass-blur)) !important;
        -webkit-backdrop-filter: blur(var(--glass-blur)) !important;
        box-shadow: 0 30px 60px rgba(0, 0, 0, 0.8), inset 0 0 15px rgba(255, 255, 255, 0.02) !important;
    }
}

/* Tablet/iPad portrait: mirror phone glass transparency on target editor pages. */
@media (min-width: 601px) and (max-width: 1024px) and (orientation: portrait) {
    html body.tg-body.generator-page #tg-composer.tg-composer,
    html body.tg-body #qe-mobile-composer.tg-composer {
        background: rgba(7, 34, 25, 0.24) !important;
        border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
        backdrop-filter: blur(var(--glass-blur)) !important;
        -webkit-backdrop-filter: blur(var(--glass-blur)) !important;
        box-shadow: 0 30px 60px rgba(0, 0, 0, 0.8), inset 0 0 15px rgba(255, 255, 255, 0.02) !important;
    }

    html body.tg-body #qe-mobile-tool-strip,
    html body.tg-body.magic-blend-page #mp-mobile-tool-strip {
        background: rgba(6, 23, 16, 0.92) !important;
        border-right: 1px solid rgba(255, 255, 255, 0.10) !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        box-shadow: none !important;
    }

    html body.tg-body:not(.generator-page) .main-header {
        background: rgba(6, 23, 16, 0.92) !important;
        border-bottom-color: rgba(16, 185, 129, 0.10) !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        box-shadow: none !important;
    }

    /* iPad portrait generator: keep stable transparent-glass header like home style. */
    html body.tg-body.generator-page .main-header {
        background: transparent !important;
        background-color: transparent !important;
        border-bottom: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        box-shadow: none !important;
    }

    html body.quick-edit-page .qe-panel-center,
    html body:not(.quick-edit-page):not(.stencil-page):not(.magic-blend-page) .qe-panel-center,
    html body.magic-blend-page .qe-panel-center {
        top: 64px !important;
        left: 60px !important;
        right: 0 !important;
        bottom: 80px !important;
        width: auto !important;
        height: auto !important;
    }

    /* Tablet portrait hard guard: never show desktop output panel behind shell. */
    html body.quick-edit-page .qe-panel-right,
    html body:not(.quick-edit-page):not(.stencil-page):not(.magic-blend-page) .qe-panel-right,
    html body.magic-blend-page .qe-panel-right {
        display: none !important;
    }
}

/* iPad/tablet landscape: real iPads can be 1180–1366 CSS px, so max-width:1024 misses them.
   Restrict to coarse pointers so desktop/laptop stays untouched. */
@media (orientation: landscape) and (pointer: coarse) and (min-width: 901px) and (max-width: 1366px) {
    html body.tg-body.generator-page .main-header {
        background: transparent !important;
        background-color: transparent !important;
        border-bottom: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        box-shadow: none !important;
    }

    html body.quick-edit-page .main-header,
    html body:not(.quick-edit-page):not(.stencil-page):not(.magic-blend-page) .main-header,
    html body.magic-blend-page .main-header,
    html body.stencil-page .main-header {
        background: rgba(6, 23, 16, 0.92) !important;
        border-bottom-color: rgba(255, 255, 255, 0.10) !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        box-shadow: none !important;
    }

    html body.quick-edit-page .qe-sidebar,
    html body:not(.quick-edit-page):not(.stencil-page):not(.magic-blend-page) .qe-sidebar,
    html body.magic-blend-page .qe-sidebar,
    html body.stencil-page .qe-sidebar {
        background: rgba(6, 23, 16, 0.92) !important;
        border-right: 1px solid rgba(255, 255, 255, 0.10) !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        box-shadow: none !important;
    }

    /* Tablet landscape hard guard: prevent desktop output panel bleed. */
    html body.quick-edit-page .qe-panel-right,
    html body:not(.quick-edit-page):not(.stencil-page):not(.magic-blend-page) .qe-panel-right,
    html body.magic-blend-page .qe-panel-right {
        display: none !important;
    }

    html body.quick-edit-page #qe-prompt-desktop,
    html body:not(.quick-edit-page):not(.stencil-page):not(.magic-blend-page) #qe-prompt-desktop,
    html body.magic-blend-page #qe-prompt-desktop,
    html body.stencil-page #qe-prompt-desktop,
    html body.quick-edit-page .tg-sidebar .tg-sidebar-textarea,
    html body:not(.quick-edit-page):not(.stencil-page):not(.magic-blend-page) .tg-sidebar .tg-sidebar-textarea,
    html body.magic-blend-page .tg-sidebar .tg-sidebar-textarea,
    html body.stencil-page .tg-sidebar .tg-sidebar-textarea {
        background: rgba(249, 250, 252, 0.045) !important;
        border: 1px solid rgba(255, 255, 255, 0.12) !important;
        backdrop-filter: none !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 8px 24px rgba(0, 0, 0, 0.16) !important;
    }

    /* iPad landscape parity: keep bottom clear/upload controls identical size. */
    html body #qe-mobile-upload-btn,
    html body #btn-ts-clear,
    html body #mp-btn-ts-clear,
    html body #mp-mobile-upload-btn {
        width: 48px !important;
        height: 48px !important;
        min-width: 48px !important;
        min-height: 48px !important;
        max-width: 48px !important;
        max-height: 48px !important;
        flex: 0 0 48px !important;
        padding: 4px 2px !important;
        border-radius: 8px !important;
    }
}