/* ============================================================
   3-canvas-mobile.css
   Bundle 3/5 — Responsive / PWA / ImageViewer
   Nguồn gốc: canvas-mobile.css + pwa-mobile.css + image-viewer.css
   Load SAU 2-canvas.css để override đúng thứ tự.
   canvas-mobile.css đã bị load 2 lần trong App.razor cũ — đã fix.
   ============================================================ */

/* ══════════════════════════════════════════════════════════
   canvas-mobile.css — Mobile layout, sidebar overlay, 2-toolbar
══════════════════════════════════════════════════════════ */

   ============================================================ */

/* ── 1. Sidebar overlay < 1024px ─────────────────────────────── */
@media (max-width: 768px) {
    .sidebar {
        position: fixed !important;
        left: 0;
        top: 0;
        bottom: 0;
        z-index: 500;
        width: 0 !important;
        overflow: hidden;
        transition: width 0.25s cubic-bezier(.4,0,.2,1), box-shadow 0.25s ease !important;
    }

        .sidebar.open {
            width: 260px !important;
            overflow: visible !important;
            box-shadow: 4px 0 24px rgba(0,0,0,.18) !important;
        }

    .canvas-app.sidebar-open-mobile::before {
        content: '';
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.35);
        z-index: 499;
        pointer-events: auto;
    }

    .canvas-main {
        width: 100% !important;
        margin-left: 0 !important;
    }
}

/* ── 2. Right panel ẩn ≤ 768px ───────────────────────────────── */
@media (max-width: 768px) {
    .right-panel {
        display: none !important;
    }
}

/* ── 3. Panel trigger — chỉ hiện ≤ 768px ────────────────────── */
.panel-trigger-btn {
    display: none;
}

@media (max-width: 768px) {
    .panel-trigger-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 28px;
        height: 28px;
        border-radius: 7px;
        border: none;
        background: none;
        cursor: pointer;
        color: #6b7280;
        padding: 0;
        flex-shrink: 0;
        position: relative;
        transition: background 0.1s, color 0.1s;
    }

        .panel-trigger-btn:hover,
        .panel-trigger-btn.active {
            background: #eff6ff;
            color: #2563eb;
        }

        .panel-trigger-btn .color-indicator {
            position: absolute;
            bottom: 3px;
            right: 3px;
            width: 7px;
            height: 7px;
            border-radius: 50%;
            border: 1.5px solid #fff;
            box-shadow: 0 0 0 1px rgba(0,0,0,.1);
            pointer-events: none;
        }
}

/* ── 4. Overflow fix để popup không bị clip ──────────────────── */
@media (max-width: 768px) {
    .canvas-main {
        overflow: visible !important;
    }

    .canvas-workspace {
        overflow: hidden !important;
    }

    .toolbar-right {
        overflow: visible !important;
    }
}

/* ── 5. Mobile panel popup ───────────────────────────────────── */
.mobile-panel-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 150;
    background: transparent;
}

    .mobile-panel-overlay.open {
        display: block;
    }

.mobile-panel-popup {
    display: none;
}

@media (max-width: 768px) {
    .mobile-panel-popup {
        position: absolute;
        bottom: calc(100% + 8px);
        right: 0;
        z-index: 200;
        display: none;
        flex-direction: column;
        gap: 10px;
        padding: 12px;
        background: #fff;
        border: 1px solid #e5e7eb;
        border-radius: 12px;
        box-shadow: 0 8px 32px rgba(0,0,0,.14);
        min-width: 180px;
        width: max-content;
    }

        .mobile-panel-popup.open {
            display: flex;
            animation: mpFadeUp 0.15s cubic-bezier(.4,0,.2,1);
        }

    @keyframes mpFadeUp {
        from {
            opacity: 0;
            transform: translateY(6px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .mp-label {
        font-size: 10px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .06em;
        color: #9ca3af;
        margin-bottom: 5px;
    }

    .mp-divider {
        height: 1px;
        background: #f0f0f0;
    }

    .mp-colors {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 6px;
    }

    .mp-color-dot {
        width: 22px;
        height: 22px;
        border-radius: 50%;
        border: 2px solid transparent;
        cursor: pointer;
        padding: 0;
        transition: transform 0.1s, border-color 0.1s;
    }

        .mp-color-dot:hover {
            transform: scale(1.15);
        }

        .mp-color-dot.active {
            border-color: #3b82f6;
            transform: scale(1.1);
        }

    .mp-slider-row {
        display: flex;
        align-items: center;
        gap: 8px;
    }

        .mp-slider-row svg {
            flex-shrink: 0;
            color: #9ca3af;
        }

    .mp-slider {
        flex: 1;
        cursor: pointer;
        accent-color: #3b82f6;
    }

    .mp-sizes {
        display: flex;
        gap: 4px;
    }

    .mp-size-btn {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 4px;
        padding: 5px 2px;
        border: 1.5px solid #e5e7eb;
        border-radius: 7px;
        background: none;
        cursor: pointer;
        font-size: 11px;
        font-weight: 600;
        color: #6b7280;
        transition: border-color 0.1s, background 0.1s, color 0.1s;
    }

        .mp-size-btn:hover {
            background: #f3f4f6;
        }

        .mp-size-btn.active {
            border-color: #2563eb;
            background: #eff6ff;
            color: #2563eb;
        }

    .mp-size-dot {
        border-radius: 50%;
        background: currentColor;
        flex-shrink: 0;
    }

    .mp-grids {
        display: flex;
        gap: 4px;
    }

    .mp-grid-btn {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 6px 0;
        border: 1.5px solid #e5e7eb;
        border-radius: 7px;
        background: none;
        cursor: pointer;
        color: #6b7280;
        transition: background 0.1s, border-color 0.1s;
    }

        .mp-grid-btn:hover {
            background: #f3f4f6;
            border-color: #d1d5db;
            color: #111;
        }
}

/* ── 6. Secondary toolbar — ẩn trên desktop ─────────────────── */
.toolbar-secondary {
    display: none;
}

/* ── 7. Primary row wrapper — transparent trên desktop ──────── */
.toolbar-primary-row {
    display: contents; /* trên desktop: như không có wrapper */
}

/* ── 8. MOBILE: 2 toolbar riêng biệt, width vừa đủ ─────────── */
@media (max-width: 768px) {

    /* bottom-toolbar: bỏ background/border gốc,
       thành container vô hình chứa 2 toolbar con */
    .bottom-toolbar {
        left: 50% !important;
        transform: translateX(-50%) !important;
      /*  left: 8px !important;
        right: auto !important;
        transform: none !important;*/

        align-items: flex-start !important;

        width: max-content !important;
        max-width: calc(100vw - 16px) !important;
        bottom: 10px !important;
        flex-direction: column !important;
        gap: 4px !important;
        padding: 0 !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        overflow: visible !important;
    }

    /* ── Secondary: border riêng, width vừa đủ ── */
    .toolbar-secondary {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 2px;
        width: max-content;
        background: #f3f4f6;
        border: 1px solid #e5e7eb;
        border-radius: 10px;
        padding: 3px 8px;
        box-shadow: 0 2px 8px rgba(0,0,0,.08);
    }

        .toolbar-secondary .tool-btn,
        .toolbar-secondary .icon-btn {
            width: 28px !important;
            height: 28px !important;
            flex-shrink: 0;
        }

            .toolbar-secondary .tool-btn svg,
            .toolbar-secondary .icon-btn svg {
                width: 13px !important;
                height: 13px !important;
            }

        .toolbar-secondary .toolbar-divider {
            height: 14px;
            margin: 0 2px;
        }

    /* ── Primary row: border riêng, width vừa đủ ── */
    .toolbar-primary-row {
        display: flex;
        align-items: center;
        gap: 2px;
        width: max-content;
        background: #fff;
        border: 1px solid #e5e7eb;
        border-radius: 10px;
        padding: 4px 8px;
        box-shadow: 0 4px 16px rgba(0,0,0,.1);
    }

        /* Tool buttons nhỏ hơn trong primary */
        .toolbar-primary-row .tool-btn {
            width: 28px !important;
            height: 28px !important;
            flex-shrink: 0;
        }

            .toolbar-primary-row .tool-btn svg {
                width: 14px !important;
                height: 14px !important;
            }

        /* Zoom */
        .toolbar-primary-row .zoom-btn {
            min-width: 32px !important;
            font-size: 11px !important;
            padding: 3px 4px !important;
        }

        .toolbar-primary-row .toolbar-left .icon-btn.sm {
            width: 26px !important;
            height: 26px !important;
        }

        .toolbar-primary-row .toolbar-left {
            margin-right: 2px !important;
        }

        .toolbar-primary-row .toolbar-right {
            margin-left: 2px !important;
        }

        .toolbar-primary-row .toolbar-divider {
            margin: 0 2px;
        }

        /* Ẩn undo/redo/delete/duplicate/download khỏi primary */
        .toolbar-primary-row .tool-btn[title="Undo (Ctrl+Z)"],
        .toolbar-primary-row .tool-btn[title="Redo (Ctrl+Y)"],
        .toolbar-primary-row .tool-btn[title="Delete"],
        .toolbar-primary-row .tool-btn[title="Duplicate"],
        .toolbar-primary-row .icon-btn[title="Download"] {
            display: none !important;
        }

        /* Ẩn Frame/Image (đã có trong more menu) */
        .toolbar-primary-row .tool-btn[title="Frame (F)"],
        .toolbar-primary-row .tool-btn[title="Image (I)"] {
            display: none !important;
        }

        /* Ẩn divider đầu tiên sau khi undo/redo bị ẩn */
        .toolbar-primary-row .toolbar-center > .toolbar-divider:first-child {
            display: none !important;
        }

        .toolbar-primary-row .toolbar-left {
            display: none !important;
        }
}

/* ── 9. Dark theme ───────────────────────────────────────────── */
[data-theme="dark"] .mobile-panel-popup,
.dark-theme .mobile-panel-popup {
    background: var(--bg-primary, #1e293b);
    border-color: var(--border, #334155);
}

[data-theme="dark"] .toolbar-secondary,
.dark-theme .toolbar-secondary {
    background: var(--bg-secondary, #1e293b);
    border-color: var(--border, #334155);
}

[data-theme="dark"] .toolbar-primary-row,
.dark-theme .toolbar-primary-row {
    background: var(--bg-primary, #0f172a);
    border-color: var(--border, #334155);
}

/* ══════════════════════════════════════════════════════════
   pwa-mobile.css — PWA install banner, SW update, touch optimizations
══════════════════════════════════════════════════════════ */

:root {
    --vh: 1vh; /* override bằng JS: setVhVar() trong mobile-helpers.js */
    --keyboard-height: 0px;
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left: env(safe-area-inset-left, 0px);
    --safe-right: env(safe-area-inset-right, 0px);
}

/* Dùng --vh thay vì 100vh để tránh iOS Safari address bar bug */
@media (max-width: 768px) {
    .canvas-app {
        height: calc(var(--vh, 1vh) * 100) !important;
    }

    .um-page {
        height: calc(var(--vh, 1vh) * 100) !important;
    }
}

/* ── PWA Install Banner ────────────────────────────────────────────────── */
.pwa-install-banner {
    position: fixed;
    bottom: calc(16px + var(--safe-bottom));
    left: 16px;
    right: 16px;
    z-index: 9000;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.15), 0 2px 8px rgba(0,0,0,0.08);
    animation: bannerSlideUp 0.3s cubic-bezier(.4,0,.2,1);
    max-width: 480px;
    margin: 0 auto;
}

@keyframes bannerSlideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.pwa-install-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    background: #eff6ff;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pwa-install-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.pwa-install-text strong {
    font-size: 13px;
    font-weight: 600;
    color: #111827;
}

.pwa-install-text span {
    font-size: 11px;
    color: #6b7280;
}

.pwa-install-btn {
    flex-shrink: 0;
    padding: 7px 14px;
    border-radius: 8px;
    border: none;
    background: #2563eb;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
    white-space: nowrap;
}

.pwa-install-btn:hover {
    background: #1d4ed8;
}

.pwa-install-dismiss {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #9ca3af;
    padding: 0;
    transition: background 0.1s, color 0.1s;
}

.pwa-install-dismiss:hover {
    background: #f3f4f6;
    color: #374151;
}

/* Dark theme */
[data-theme="dark"] .pwa-install-banner,
.dark-theme .pwa-install-banner {
    background: var(--bg-primary, #1e293b);
    border-color: var(--border, #334155);
}

[data-theme="dark"] .pwa-install-text strong,
.dark-theme .pwa-install-text strong {
    color: var(--text-primary, #f1f5f9);
}

[data-theme="dark"] .pwa-install-icon,
.dark-theme .pwa-install-icon {
    background: rgba(37,99,235,0.15);
}

/* ── SW Update Banner ──────────────────────────────────────────────────── */
.sw-update-banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9100;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 10px 16px;
    padding-top: calc(10px + var(--safe-top));
    background: #2563eb;
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    animation: slideDown 0.3s ease;
}

@keyframes slideDown {
    from { transform: translateY(-100%); }
    to { transform: translateY(0); }
}

.sw-update-btn {
    padding: 5px 12px;
    border-radius: 6px;
    border: 1.5px solid rgba(255,255,255,0.5);
    background: transparent;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}

.sw-update-btn:hover {
    background: rgba(255,255,255,0.15);
}

/* ── PWA Standalone mode adjustments ──────────────────────────────────── */
.pwa-standalone .topbar {
    padding-top: var(--safe-top);
    height: calc(44px + var(--safe-top));
}

.pwa-standalone .sidebar {
    padding-top: var(--safe-top);
}

/* ── Offline indicator ────────────────────────────────────────────────── */
.offline-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 10px;
    background: #fef3c7;
    color: #92400e;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.offline-badge::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #f59e0b;
    flex-shrink: 0;
}

/* ── Touch optimizations ──────────────────────────────────────────────── */

/* Minimum 44px touch targets (Apple HIG / WCAG) */
@media (hover: none) {
    .tool-btn,
    .icon-btn,
    .btn-primary,
    .btn-outline,
    .doc-item,
    .page-item,
    .um-page-btn {
        /*min-height: 44px;
        min-width: 44px;*/
    }

    /* Exceptions: purely decorative / inline */
    .icon-btn.sm {
        min-height: 36px;
        min-width: 36px;
    }

    /* Tap highlight */
    button, a, [role="button"] {
        -webkit-tap-highlight-color: rgba(37,99,235,0.1);
    }

    /* Remove tap delay */
    * {
        touch-action: manipulation;
    }

    /* Canvas workspace: let Fabric handle touch */
    .canvas-workspace,
    .canvas-workspace * {
        touch-action: none;
    }
}

/* ── Keyboard-open state ──────────────────────────────────────────────── */
.keyboard-open .bottom-toolbar {
    /* Di lên khi keyboard mở */
    transform: translateY(calc(-1 * var(--keyboard-height)));
    transition: transform 0.25s ease;
}

.keyboard-open .mobile-bottom-sheet-overlay {
    /* Điều chỉnh overlay khi keyboard mở */
    bottom: var(--keyboard-height);
}

/* ── Mobile sidebar close button ─────────────────────────────────────── */
.mobile-sidebar-close {
    display: none;
}

@media (max-width: 768px) {
    .mobile-sidebar-close {
        display: flex;
    }
}

/* ── Orientation: landscape phone ────────────────────────────────────── */
@media (max-width: 896px) and (orientation: landscape) and (max-height: 500px) {
    /* Landscape phone: giảm chiều cao các element */
    .topbar {
        height: 36px !important;
    }

    .bottom-toolbar {
        min-height: 44px !important;
        padding: 4px 8px !important;
    }

    .tool-btn {
        width: 30px !important;
        height: 30px !important;
    }

    /* Sidebar chiếm toàn chiều cao */
    .sidebar.open {
        width: 200px !important;
    }

    /* Mobile panel: smaller */
    .mobile-bottom-sheet {
        max-height: 80vh;
    }
}

/* ── Tablet (768px - 1024px): Hybrid layout ─────────────────────────── */
@media (min-width: 769px) and (max-width: 1024px) {
    /* Sidebar vẫn overlay nhưng rộng hơn */
    .sidebar.open {
        width: 240px;
    }

    /* Right panel thu hẹp */
    .right-panel {
        width: 44px;
    }
}

/* ── Accessibility: focus visible trên touch ─────────────────────────── */
@media (hover: none) {
    :focus-visible {
        outline: 2px solid #2563eb;
        outline-offset: 2px;
    }

    :focus:not(:focus-visible) {
        outline: none;
    }
}

/* ══════════════════════════════════════════════════════════
   image-viewer.css — iv-* fullscreen image viewer
══════════════════════════════════════════════════════════ */

/* ── Theme tokens ── */
.iv-overlay {
    /* Light theme defaults */
    --iv-overlay-bg: rgba(15, 15, 20, 0.55);
    --iv-toolbar-bg: var(--bg-primary, #ffffff);
    --iv-toolbar-border: var(--border, #e5e7eb);
    --iv-toolbar-shadow: 0 1px 4px rgba(0,0,0,.06);
    --iv-title-color: var(--text-primary, #111827);
    --iv-muted-color: var(--text-secondary, #6b7280);
    --iv-counter-bg: var(--bg-secondary, #f3f4f6);
    --iv-zoom-bg: var(--bg-secondary, #f3f4f6);
    --iv-zoom-border: var(--border, #e5e7eb);
    --iv-btn-hover-bg: var(--bg-hover, #e5e7eb);
    --iv-btn-color: var(--text-secondary, #6b7280);
    --iv-btn-hover-color: var(--text-primary, #111827);
    --iv-divider: var(--border, #e5e7eb);
    --iv-stage-bg: #ebebeb;
    --iv-checker-color: #ddd;
    --iv-img-shadow: 0 0 0 1px rgba(0,0,0,.06), 0 4px 20px rgba(0,0,0,.15);
    --iv-spinner-track: var(--border, #e5e7eb);
    --iv-spinner-top: #6366f1;
    --iv-nav-bg: var(--bg-primary, #ffffff);
    --iv-nav-border: var(--border, #e5e7eb);
    --iv-nav-color: var(--text-secondary, #6b7280);
    --iv-nav-shadow: 0 2px 8px rgba(0,0,0,.1);
    --iv-thumbs-bg: var(--bg-primary, #ffffff);
    --iv-thumbs-border: var(--border, #e5e7eb);
    --iv-thumb-bg: var(--bg-secondary, #f3f4f6);
    --iv-hint-bg: var(--bg-primary, #ffffff);
    --iv-hint-border: var(--border, #e5e7eb);
    --iv-hint-color: var(--text-secondary, #6b7280);
    --iv-hint-dot: var(--border, #d1d5db);
    --iv-hint-shadow: 0 2px 8px rgba(0,0,0,.08);
    --iv-accent: #6366f1;
}

   

/* ── Overlay ── */
.iv-overlay {
    position: fixed;
    inset: 0;
    z-index: 9000;
    display: flex;
    flex-direction: column;
    background: rgba(0, 0, 0, 0);
    transition: background 0.22s ease;
    outline: none;
    user-select: none;
}

    .iv-overlay.iv-visible {
        background: var(--iv-overlay-bg);
    }

/* ── Toolbar ── */
.iv-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 0 12px;
    height: 52px;
    background: var(--iv-toolbar-bg);
    border-bottom: 1px solid var(--iv-toolbar-border);
    box-shadow: var(--iv-toolbar-shadow);
    flex-shrink: 0;
    transform: translateY(-52px);
    opacity: 0;
    transition: transform 0.22s cubic-bezier(.25,.46,.45,.94), opacity 0.22s ease;
}

.iv-visible .iv-toolbar {
    transform: translateY(0);
    opacity: 1;
}

.iv-toolbar-left, .iv-toolbar-right {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 140px;
}

.iv-toolbar-right {
    justify-content: flex-end;
}

.iv-title {
    font-size: 13px;
    font-weight: 500;
    color: var(--iv-title-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 260px;
}

.iv-counter {
    font-size: 11px;
    color: var(--iv-muted-color);
    font-variant-numeric: tabular-nums;
    background: var(--iv-counter-bg);
    padding: 2px 8px;
    border-radius: 10px;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Zoom controls */
.iv-zoom-controls {
    display: flex;
    align-items: center;
    gap: 2px;
    background: var(--iv-zoom-bg);
    border: 1px solid var(--iv-zoom-border);
    border-radius: 10px;
    padding: 3px;
}

.iv-tool-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    border-radius: 7px;
    cursor: pointer;
    color: var(--iv-btn-color);
    transition: background 0.12s, color 0.12s;
    text-decoration: none;
    flex-shrink: 0;
    font-family: inherit;
}

    .iv-tool-btn:hover {
        background: var(--iv-btn-hover-bg);
        color: var(--iv-btn-hover-color);
    }

    .iv-tool-btn:disabled {
        opacity: .35;
        cursor: not-allowed;
    }

.iv-zoom-display {
    min-width: 52px;
    width: auto;
    font-size: 11px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: .01em;
    color: var(--iv-title-color);
}

.iv-divider {
    width: 1px;
    height: 18px;
    background: var(--iv-divider);
    margin: 0 2px;
    flex-shrink: 0;
}

.iv-close-btn:hover {
    background: rgba(239,68,68,.15) !important;
    color: #dc2626 !important;
}

.iv-dark .iv-close-btn:hover {
    background: rgba(239,68,68,.25) !important;
    color: #fca5a5 !important;
}

/* ── Stage ── */
.iv-stage {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    cursor: grab;
    background-color: var(--iv-stage-bg);
    background-image: linear-gradient(45deg, var(--iv-checker-color) 25%, transparent 25%), linear-gradient(-45deg, var(--iv-checker-color) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, var(--iv-checker-color) 75%), linear-gradient(-45deg, transparent 75%, var(--iv-checker-color) 75%);
    background-size: 20px 20px;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0;
}

    .iv-stage:active {
        cursor: grabbing;
    }

/* ── Image wrap ── */
.iv-img-wrap {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    transform-origin: center center;
    will-change: transform;
}

.iv-img {
    display: block;
    max-width: min(90vw, 1400px);
    max-height: calc(100vh - 128px);
    object-fit: contain;
    border-radius: 2px;
    box-shadow: var(--iv-img-shadow);
    opacity: 0;
    transition: opacity 0.18s ease;
    pointer-events: none;
    -webkit-user-drag: none;
    user-select: none;
    background: #ffffff;
}

    .iv-img.iv-img-loaded {
        opacity: 1;
    }

/* Spinner */
.iv-img-loader {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 80px;
    min-height: 80px;
    position: absolute;
    z-index: 1;
    pointer-events: none;
    transition: opacity 0.15s;
}

    .iv-img-loader.iv-hidden {
        opacity: 0;
        pointer-events: none;
    }

.iv-spinner {
    width: 28px;
    height: 28px;
    border: 2.5px solid var(--iv-spinner-track);
    border-top-color: var(--iv-spinner-top);
    border-radius: 50%;
    animation: iv-spin 0.7s linear infinite;
}

@keyframes iv-spin {
    to {
        transform: rotate(360deg);
    }
}

/* ── Nav arrows ── */
.iv-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--iv-nav-border);
    background: var(--iv-nav-bg);
    border-radius: 50%;
    cursor: pointer;
    color: var(--iv-nav-color);
    box-shadow: var(--iv-nav-shadow);
    transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.15s, box-shadow 0.15s;
}

    .iv-nav:hover {
        background: var(--iv-btn-hover-bg);
        border-color: var(--iv-accent);
        color: var(--iv-accent);
        box-shadow: 0 4px 12px rgba(99,102,241,.2);
    }

.iv-nav-prev {
    left: 14px;
}

.iv-nav-next {
    right: 14px;
}

.iv-nav-prev:hover {
    transform: translateY(-50%) translateX(-1px);
}

.iv-nav-next:hover {
    transform: translateY(-50%) translateX(1px);
}

.iv-nav-disabled {
    opacity: .25;
    cursor: not-allowed;
    pointer-events: none;
}

/* ── Thumbnails ── */
.iv-thumbs {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 16px;
    height: 72px;
    background: var(--iv-thumbs-bg);
    border-top: 1px solid var(--iv-thumbs-border);
    overflow-x: auto;
    flex-shrink: 0;
    transform: translateY(72px);
    opacity: 0;
    transition: transform 0.22s cubic-bezier(.25,.46,.45,.94) 0.06s, opacity 0.22s ease 0.06s;
}

.iv-visible .iv-thumbs {
    transform: translateY(0);
    opacity: 1;
}

.iv-thumbs::-webkit-scrollbar {
    height: 3px;
}

.iv-thumbs::-webkit-scrollbar-track {
    background: transparent;
}

.iv-thumbs::-webkit-scrollbar-thumb {
    background: var(--iv-divider);
    border-radius: 2px;
}

.iv-thumb {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    border-radius: 6px;
    overflow: hidden;
    border: 2px solid transparent;
    cursor: pointer;
    background: var(--iv-thumb-bg);
    padding: 0;
    opacity: .5;
    transition: border-color 0.12s, opacity 0.12s, transform 0.12s;
}

    .iv-thumb:hover {
        opacity: .85;
        transform: scale(1.06);
    }

    .iv-thumb.active {
        border-color: var(--iv-accent);
        opacity: 1;
    }

    .iv-thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        pointer-events: none;
        background: #ffffff;
    }

/* ── Hint bar ── */
.iv-hint {
    position: absolute;
    bottom: 88px;
    left: 50%;
    transform: translateX(-50%) translateY(6px);
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 14px;
    background: var(--iv-hint-bg);
    border: 1px solid var(--iv-hint-border);
    border-radius: 20px;
    font-size: 11px;
    color: var(--iv-hint-color);
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s, transform 0.3s;
    box-shadow: var(--iv-hint-shadow);
}

    .iv-hint.iv-hint-show {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }

.iv-hint-dot {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--iv-hint-dot);
    flex-shrink: 0;
}

/* No thumbnail strip */
.iv-overlay:not(:has(.iv-thumbs)) .iv-hint {
    bottom: 20px;
}

/* ── Touch ── */
@media (hover: none) {
    .iv-nav {
        display: flex !important;
        opacity: 1;
    }

    .iv-hint {
        display: none;
    }
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
    .iv-toolbar, .iv-thumbs, .iv-img {
        transition: none;
    }
}