/* Magic Plan mobile/tablet toolbar clone, independent from Sketch */

#mp-mobile-tool-strip {
    display: none !important;
}

/* Magic Blend: keep Strength label + box perfectly aligned */
.mb-resolution-head,
.mb-resolution-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) 90px;
    column-gap: 8px;
    align-items: end;
}

.mb-resolution-row {
    align-items: center;
}

.mb-resolution-label {
    grid-column: 1 / 4;
}

.mb-strength-label {
    grid-column: 4;
    width: 100% !important;
    flex: none !important;
    font-size: 9.5px !important;
    line-height: 1.05;
    letter-spacing: 0.03em;
    text-align: center !important;
    display: inline-flex;
    justify-content: center;
}

.mb-res-box-main {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
}

.mb-res-sep {
    justify-self: center;
}

.mb-strength-box {
    grid-column: 4;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    flex: none !important;
}

/*
 * Magic Blend only — landscape desktop + tablets: slightly shorter Prompt Assistant trigger,
 * slightly taller Positive Prompt (reclaims vertical space from the button row; does not affect Sketch/Generator).
 * min-height excludes typical phone landscape (short viewport).
 */
@media (orientation: landscape) and (min-height: 500px) and (
    ((min-width: 1024px) and (pointer: fine)) or
    ((min-width: 768px) and (max-width: 1366px) and (pointer: coarse))
) {
    body.magic-blend-page #qe-prompt-desktop.tg-sidebar-textarea {
        min-height: 108px !important;
        height: 108px !important;
    }

    body.magic-blend-page .pa-trigger-btn--sidebar {
        min-height: 0 !important;
        padding: 2px 7px !important;
        gap: 4px !important;
        align-items: center !important;
    }

    body.magic-blend-page .pa-trigger-btn--sidebar svg {
        width: 11px !important;
        height: 11px !important;
    }

    body.magic-blend-page .pa-trigger-btn--sidebar span {
        font-size: 0.48rem !important;
        line-height: 1.08 !important;
    }
}

@media (orientation: landscape) and (pointer: coarse) and (min-width: 901px) and (max-width: 1366px) {
    .mb-resolution-head,
    .mb-resolution-row {
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) 86px;
    }

    .mb-strength-label {
        font-size: 9px !important;
    }
}

@media (max-width: 1024px) {
    #mp-mobile-tool-strip {
        display: flex !important;
    }
}

@media (max-width: 600px),
(min-width: 601px) and (max-width: 1024px) {
    #mp-mobile-upload-btn {
        display: inline-flex !important;
        width: 48px;
        height: 48px;
        flex: 0 0 48px;
    }

    /* Mobile Tool Strip (Left) */
    #mp-mobile-tool-strip {
        position: fixed;
        top: 64px;
        left: 0;
        bottom: 0;
        /* Removed bottom: 60px — was leaving black gap below buttons */
        width: 60px;
        background: rgba(6, 23, 16, 0.65);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        border-right: 1px solid rgba(16, 185, 129, 0.15);
        display: flex !important;
        flex-direction: column;
        justify-content: space-evenly;
        align-items: center;
        padding: 4px 0;
        z-index: 50;
        overflow-y: auto;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    #mp-mobile-tool-strip::-webkit-scrollbar {
        display: none;
    }

    #mp-mobile-tool-strip .qe-m-tool {
        width: 40px;
        height: 40px;
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.03);
        border: 1px solid var(--glass-border);
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--text-dim);
        transition: all 0.2s;
        flex-shrink: 0;
    }

    #btn-m-undo,
    #btn-m-redo,
    #mp-btn-ts-undo,
    #mp-btn-ts-redo {
        color: var(--text-dim);
        border-color: var(--glass-border);
        pointer-events: auto;
        z-index: 60;
    }

    #btn-m-undo:active,
    #btn-m-redo:active,
    #mp-btn-ts-undo:active,
    #mp-btn-ts-redo:active {
        background: rgba(255, 255, 255, 0.1);
        color: white;
    }

    #btn-m-undo:disabled,
    #btn-m-redo:disabled,
    #mp-btn-ts-undo:disabled,
    #mp-btn-ts-redo:disabled {
        opacity: 0.3;
        pointer-events: auto !important;
        cursor: default;
    }

    #mp-mobile-tool-strip .qe-m-text-btn {
        flex-direction: column;
        gap: 2px;
        font-size: 8px;
        text-transform: uppercase;
        font-weight: 700;
        line-height: 1;
        color: var(--neon-green);
        border-color: rgba(16, 185, 129, 0.3);
        height: auto;
        padding: 4px 2px;
        min-height: 40px;
    }

    #mp-mobile-tool-strip .qe-m-slider-container {
        height: 60px;
        width: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 10px;
        margin-bottom: 10px;
    }

    #mp-mobile-tool-strip .qe-steps-mini {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin-bottom: 4px;
    }

    #mp-mobile-tool-strip .qe-steps-label {
        font-size: 8px;
        color: var(--text-dim);
        margin-bottom: 2px;
        text-transform: uppercase;
        font-weight: 700;
        letter-spacing: 0.5px;
    }

    #mp-steps-input {
        width: 36px;
        height: 24px;
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid var(--glass-border);
        border-radius: 4px;
        color: white;
        text-align: center;
        font-size: 16px;
        padding: 0;
        appearance: none;
        -moz-appearance: textfield;
        scroll-margin: 0;
        scroll-padding: 0;
    }

    #mp-steps-input:focus {
        border-color: var(--neon-green);
        background: rgba(255, 255, 255, 0.1);
        outline: none;
    }

    #mp-steps-input::-webkit-inner-spin-button,
    #mp-steps-input::-webkit-outer-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

    #mp-mobile-tool-strip .qe-m-slider {
        width: 60px;
        height: 20px;
        transform: rotate(-90deg);
        transform-origin: center;
        -webkit-appearance: none;
        appearance: none;
    }
}

@media (min-width: 601px) and (max-width: 1024px) {
    /* iPad/Tablet Magic Blend toolbar: same grouped layout as Sketch */
    #mp-mobile-tool-strip {
        position: fixed !important;
        top: 64px !important;
        left: 0 !important;
        bottom: 60px !important;
        width: 60px !important;
        display: block !important;
        padding: 0 !important;
        z-index: 50 !important;
        overflow: hidden !important;
    }

    #mp-mobile-tool-strip .qe-m-tool:not(.qe-m-text-btn) {
        width: 40px !important;
        height: 40px !important;
        border-radius: 8px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        transition: all 0.2s !important;
        flex-shrink: 0 !important;
        position: absolute !important;
        left: 10px !important;
    }

    #btn-m-undo,
    #btn-m-redo,
    #mp-btn-ts-undo,
    #mp-btn-ts-redo {
        color: var(--text-dim) !important;
        border-color: var(--glass-border) !important;
        pointer-events: auto !important;
        z-index: 60 !important;
    }

    #btn-m-undo:active,
    #btn-m-redo:active,
    #mp-btn-ts-undo:active,
    #mp-btn-ts-redo:active {
        background: rgba(255, 255, 255, 0.1) !important;
        color: white !important;
    }

    #btn-m-undo:disabled,
    #btn-m-redo:disabled,
    #mp-btn-ts-undo:disabled,
    #mp-btn-ts-redo:disabled {
        opacity: 0.3 !important;
        pointer-events: auto !important;
        cursor: default !important;
    }

    #mp-mobile-tool-strip .qe-m-text-btn {
        flex-direction: column !important;
        gap: 2px !important;
        font-size: 8px !important;
        text-transform: uppercase !important;
        font-weight: 700 !important;
        line-height: 1 !important;
        color: var(--neon-green) !important;
        border-color: rgba(16, 185, 129, 0.3) !important;
        height: 48px !important;
        padding: 4px 2px !important;
        min-height: 48px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
    }

    #mp-mobile-upload-btn {
        display: flex !important;
        position: absolute !important;
        left: 6px !important;
        bottom: 2px !important;
        width: 48px !important;
        height: 48px !important;
        min-width: 48px !important;
        min-height: 48px !important;
        padding: 4px 2px !important;
        flex: 0 0 48px !important;
        margin: 0 !important;
        background: rgba(16, 185, 129, 0.1) !important;
        border-radius: 8px !important;
        border: 1px solid rgba(16, 185, 129, 0.3) !important;
        font-size: 8px !important;
        text-transform: uppercase !important;
        font-weight: 700 !important;
        line-height: 1 !important;
        color: var(--neon-green) !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 2px !important;
        cursor: pointer !important;
    }

    #mp-mobile-tool-strip .qe-m-upload-icon-small {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin-bottom: 2px !important;
    }

    #mp-mobile-tool-strip .qe-m-slider-container {
        height: 60px !important;
        width: 40px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        position: absolute !important;
        left: 10px !important;
        top: 74px !important;
        margin: 0 !important;
    }

    #mp-mobile-tool-strip .qe-steps-mini {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        position: absolute !important;
        left: 10px !important;
        bottom: 236px !important;
        margin: 0 !important;
    }

    #mp-mobile-tool-strip .qe-steps-label {
        font-size: 8px !important;
        color: var(--text-dim) !important;
        margin-bottom: 2px !important;
        text-transform: uppercase !important;
        font-weight: 700 !important;
        letter-spacing: 0.5px !important;
    }

    #mp-steps-input {
        width: 36px !important;
        height: 24px !important;
        background: rgba(255, 255, 255, 0.05) !important;
        border: 1px solid var(--glass-border) !important;
        border-radius: 4px !important;
        color: white !important;
        text-align: center !important;
        font-size: 16px !important;
        padding: 0 !important;
        appearance: none !important;
        -moz-appearance: textfield !important;
        scroll-margin: 0 !important;
        scroll-padding: 0 !important;
    }

    #mp-steps-input:focus {
        border-color: var(--neon-green) !important;
        background: rgba(255, 255, 255, 0.1) !important;
        outline: none !important;
    }

    #mp-steps-input::-webkit-inner-spin-button,
    #mp-steps-input::-webkit-outer-spin-button {
        -webkit-appearance: none !important;
        margin: 0 !important;
    }

    #mp-mobile-tool-strip .qe-m-slider {
        width: 60px !important;
        height: 20px !important;
        transform: rotate(-90deg) !important;
        transform-origin: center !important;
    }

    /* Top cluster positions */
    #mp-btn-ts-marker {
        top: 12px !important;
    }


    #mp-btn-ts-eraser {
        top: 146px !important;
    }

    #mp-btn-ts-select {
        top: 198px !important;
    }

    /* Bottom cluster positions */
    #mp-btn-ts-undo {
        bottom: 172px !important;
    }

    #mp-btn-ts-redo {
        bottom: 120px !important;
    }

    #mp-btn-ts-clear {
        bottom: 60px !important;
        left: 6px !important;
        width: 48px !important;
        height: 48px !important;
        min-width: 48px !important;
        min-height: 48px !important;
        padding: 4px 2px !important;
        margin: 0 !important;
        background: rgba(16, 185, 129, 0.1) !important;
        border-radius: 8px !important;
        border: 1px solid rgba(16, 185, 129, 0.3) !important;
        font-size: 8px !important;
        text-transform: uppercase !important;
        font-weight: 700 !important;
        line-height: 1 !important;
        color: var(--neon-green) !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 2px !important;
        cursor: pointer !important;
    }
}

/* Final normalization: phone + iPad use identical Magic Blend strip visuals */
@media (max-width: 1024px) {
    #mp-mobile-tool-strip .qe-m-slider-container {
        height: 60px !important;
        width: 40px !important;
    }

    #mp-mobile-tool-strip .qe-m-slider {
        width: 60px !important;
        height: 20px !important;
        transform: rotate(-90deg) !important;
        transform-origin: center !important;
        -webkit-appearance: none !important;
        appearance: none !important;
    }

    #mp-mobile-tool-strip #mp-btn-ts-marker,
    #mp-mobile-tool-strip #mp-btn-ts-eraser,
    #mp-mobile-tool-strip #mp-btn-ts-select,
    #mp-mobile-tool-strip #btn-m-marker,
    #mp-mobile-tool-strip #btn-m-eraser {
        border-radius: 12px !important;
        border: 1px solid rgba(16, 185, 129, 0.3) !important;
        background:
            linear-gradient(180deg, rgba(16, 185, 129, 0.1) 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;
    }

    #mp-mobile-tool-strip #mp-btn-ts-marker.active,
    #mp-mobile-tool-strip #mp-btn-ts-eraser.active,
    #mp-mobile-tool-strip #mp-btn-ts-select.active,
    #mp-mobile-tool-strip #btn-m-marker.active,
    #mp-mobile-tool-strip #btn-m-eraser.active {
        border-color: rgba(16, 185, 129, 0.62) !important;
        background:
            radial-gradient(120% 120% at 26% 16%, rgba(16, 185, 129, 0.3) 0%, rgba(16, 185, 129, 0) 60%),
            linear-gradient(180deg, rgba(16, 185, 129, 0.54) 0%, rgba(9, 91, 74, 0.6) 100%) !important;
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.26),
            0 0 14px rgba(16, 185, 129, 0.3) !important;
    }
}

/* Magic Blend phone only: remove glass bleed behind left tool strip. */
@media (max-width: 600px) and (orientation: portrait) {
    #mp-mobile-tool-strip {
        background: rgba(6, 23, 16, 0.92) !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        border-right: 1px solid rgba(16, 185, 129, 0.08) !important;
        box-shadow: none !important;
    }

    #mp-mobile-tool-strip #mp-btn-ts-marker,
    #mp-mobile-tool-strip #mp-btn-ts-eraser,
    #mp-mobile-tool-strip #mp-btn-ts-select,
    #mp-mobile-tool-strip #btn-m-marker,
    #mp-mobile-tool-strip #btn-m-eraser {
        background: rgba(7, 20, 34, 0.94) !important;
        box-shadow: none !important;
    }
}

/* Magic Blend desktop: pin recents strip to the left, right after the brand.
   With flex: 1 from sketch.css, the strip fills the middle and the brand-wrap
   plus nav-actions sit at the edges — visually pushing the thumbnail cluster
   into the centre of the header. Anchor the strip absolutely so the
   thumbnails sit immediately after "MAGIC BLEND". (The JS no longer forces
   inline left:8px, so this CSS now actually wins.)
   Note: dropped `pointer: fine` — Opera/Chromium browsers on Windows touch
   laptops sometimes report `pointer: coarse` and would skip this rule. The
   iPad-specific block below has its own (orientation: landscape) +
   (max-width: 1366px) constraints so it still takes precedence on tablets. */
@media (min-width: 1025px) {
    body.magic-blend-page .main-header .nav-container {
        position: relative !important;
        display: flex !important;
        align-items: center !important;
    }

    body.magic-blend-page .app-brand-wrap,
    body.magic-blend-page .nav-actions.app-nav-actions-shrink {
        position: relative !important;
        z-index: 2 !important;
        flex: 0 0 auto !important;
    }

    body.magic-blend-page #sketch-recents-strip {
        position: absolute !important;
        left: calc(158px + 5mm) !important;
        right: 70px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        height: 48px !important;
        padding: 0 !important;
        gap: 6px !important;
        justify-content: flex-start !important;
        align-items: center !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
        z-index: 1 !important;
    }

    body.magic-blend-page .nav-actions.app-nav-actions-shrink {
        width: 56px !important;
        min-width: 56px !important;
        justify-content: flex-end !important;
        margin-left: auto !important;
    }
}

/* Magic Blend tablet only: center recents strip (Sketch page uses flex-start). */
@media (min-width: 768px) and (max-width: 1024px) {
    .sketch-recents-strip {
        justify-content: flex-start !important;
        padding: 0 12px !important;
    }
}

/* Magic Blend phone/tablet touch: keep recents locked in header (portrait + landscape). */
@media (max-width: 1024px) and (pointer: coarse) {
    body.magic-blend-page .main-header {
        overflow: hidden !important;
        contain: layout style !important;
    }

    body.magic-blend-page .main-header .nav-container {
        position: relative !important;
        display: flex !important;
        align-items: center !important;
        overflow: hidden !important;
        min-height: 64px !important;
        max-height: 64px !important;
    }

    body.magic-blend-page .app-brand-wrap,
    body.magic-blend-page .nav-actions.app-nav-actions-shrink {
        position: relative !important;
        z-index: 2 !important;
        flex: 0 0 auto !important;
    }

    body.magic-blend-page #sketch-recents-strip {
        position: absolute !important;
        left: calc(96px + 9mm) !important;
        right: 58px !important;
        top: 0 !important;
        bottom: 0 !important;
        height: 48px !important;
        max-height: 48px !important;
        margin: auto 0 !important;
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        width: auto !important;
        flex: none !important;
        min-width: 0 !important;
        max-width: none !important;
        padding: 0 !important;
        gap: 5px !important;
        justify-content: flex-start !important;
        align-items: center !important;
        overflow: hidden !important;
        transform: none !important;
        box-sizing: border-box !important;
        z-index: 1 !important;
    }

    body.magic-blend-page #sketch-recents-strip .sketch-recent-thumb {
        width: 34px !important;
        height: 42px !important;
        object-fit: cover !important;
        object-position: center !important;
        border-radius: 4px !important;
        flex: 0 0 34px !important;
    }

    /* nth-child cap removed — header-recents-display-lock.css */

    body.magic-blend-page .nav-actions.app-nav-actions-shrink {
        width: 56px !important;
        min-width: 56px !important;
        justify-content: flex-end !important;
        margin-left: auto !important;
    }
}

@media (max-width: 1024px) and (pointer: coarse) and (orientation: landscape) {
    body.magic-blend-page #sketch-recents-strip {
        left: calc(88px + 7mm) !important;
        right: 52px !important;
    }
}

/* Legacy portrait-only alias — keep for regression lock calc(96px + 9mm) */
@media (max-width: 767px) and (orientation: portrait) {
    body.magic-blend-page .main-header .nav-container {
        position: relative !important;
    }
}

/* Magic Blend — sidebar primary: idle "Blend"; busy "Blending..." + slate / grey treatment */
body.magic-blend-page #btn-generate.tg-sidebar-generate-btn.is-blending {
    background: linear-gradient(180deg, rgba(71, 85, 105, 0.55) 0%, rgba(51, 65, 85, 0.78) 100%) !important;
    color: #f1f5f9 !important;
    border: 1px solid rgba(148, 163, 184, 0.38) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 6px 16px rgba(0, 0, 0, 0.35) !important;
    cursor: wait !important;
}

body.magic-blend-page #btn-generate.tg-sidebar-generate-btn.is-blending:hover {
    filter: none;
}

body.magic-blend-page #btn-generate .mb-blend-btn-inner {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
}

body.magic-blend-page #btn-generate .mb-blend-btn-spinner {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

/* -------------------------------------------------------------------------- */
/* Magic Blend — iPad / tablet LANDSCAPE only fix-ups.                        */
/* Targets touch tablets in horizontal orientation between 901–1366px.        */
/* Two issues addressed:                                                      */
/*   1) Recents strip thumbnails were sitting flush left under the "MAGIC     */
/*      BLEND" brand text. Anchor the strip absolutely past the brand wrap.   */
/*   2) Sidebar resolution row had W/H forced to width:80px (sketch.css       */
/*      ".qe-sidebar .res-box") which overflows the 280px sidebar grid and    */
/*      causes the W×H × Strength boxes to crowd / overlap. Restore           */
/*      grid-column fit and tighten the Strength column.                      */
/* -------------------------------------------------------------------------- */
@media (orientation: landscape) and (pointer: coarse) and (min-width: 901px) and (max-width: 1366px) {
    /* --- Header: recents strip anchored after the brand --- */
    body.magic-blend-page .main-header .nav-container {
        position: relative !important;
        display: flex !important;
        align-items: center !important;
    }

    body.magic-blend-page .app-brand-wrap,
    body.magic-blend-page .nav-actions.app-nav-actions-shrink {
        position: relative !important;
        z-index: 2 !important;
        flex: 0 0 auto !important;
    }

    body.magic-blend-page #sketch-recents-strip {
        position: absolute !important;
        left: calc(140px + 5mm) !important;
        right: 70px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        height: 48px !important;
        padding: 0 !important;
        gap: 6px !important;
        justify-content: flex-start !important;
        align-items: center !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
        z-index: 1 !important;
    }

    /* --- Sidebar: resolution row fits properly --- */
    body.magic-blend-page .qe-sidebar .mb-resolution-row .res-box {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        flex: 1 1 auto !important;
    }

    body.magic-blend-page .mb-resolution-head,
    body.magic-blend-page .mb-resolution-row {
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) 70px !important;
        column-gap: 6px !important;
    }

    body.magic-blend-page .mb-strength-label {
        font-size: 9px !important;
    }

    body.magic-blend-page .mb-res-sep {
        font-size: 0.85rem !important;
        line-height: 1 !important;
    }
}