/* ================================================================
 *  Breakpoints:
 *    tablet  : max-width 1024px
 *    mobile  : max-width 768px
 *    small   : max-width 480px
 *    tiny    : max-width 360px
 *
 *  Strategy:
 *    - Sidebar becomes a full-screen drawer (slide-in from left)
 *    - Header collapses to icon-only with hamburger trigger
 *    - Tooltips disabled (hover-only interactions don't apply on touch)
 *    - Touch targets minimum 44×44px everywhere
 *    - Workspace item single-tap navigation (pointer-events fix)
 *    - Chat messages full-width
 *    - Asset modal full-screen bottom sheet on mobile
 *    - Input area docked to bottom with safe-area insets
 *    - Creations panel full-screen
 *    - Popper menus open upward / centered when needed
 * ================================================================ */

/* ================================================================
 *  0. MOBILE DETECTION UTILITIES
 * ================================================================ */

.ii-send-btn-mobile-icon {
    display: none;
}

/* Hide tooltips on touch devices — they are hover-only and frustrate users */
@media (hover: none) and (pointer: coarse) {
    .ii-tooltip {
        display: none !important;
    }

    /* Remove data-tooltip dependent cursor hints on touch */
    [data-tooltip] {
        cursor: default;
    }

    /* Prevent double-tap zoom on all elements.
     * `manipulation` keeps pan + pinch-zoom but disables double-tap-to-zoom
     * and the 300 ms tap delay. Scrolling is unaffected. */
    .ii-app,
    .ii-app * {
        touch-action: manipulation;
    }

    /* Restore pan-y for scrollable containers so vertical scroll still works */
    .ii-app .ii-sidebar-chats,
    .ii-app .ii-chat-area,
    .ii-app .ii-messages,
    .ii-app .ii-creations-pane,
    .ii-app .ii-settings-options-list,
    .ii-app .ii-asset-modal-body,
    .ii-app .ii-drawer-body {
        touch-action: pan-y;
    }
}

/* ================================================================
 *  1. TABLET LAYOUT (≤ 1024px)
 *  Sidebar narrows, chat area adjusts, header simplifies
 * ================================================================ */

@media (max-width: 1536px) {
    .ii-scroll-to-bottom {
        display: none;
    }
}

@media (max-width: 1024px) {

    /* ── Settings gear: show gear, hide the 5 individual dropdowns ── */
    #iiImageSizeDropdown,
    #iiAspectRatioDropdown,
    #iiStyleDropdown,
    #iiRoomTypeDropdown,
    #iiLightTypeDropdown {
        display: none !important;
    }

    #iiSettingsGearBtn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        max-width: none;
        padding: 6px 10px;
    }

    #iiSettingsGearBtn.is-settings-open {
        border-color: rgba(0, 0, 0, 0.1);
        background-color: var(--ii-input-bg);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    }

    [data-theme="dark"] #iiSettingsGearBtn.is-settings-open {
        border-color: rgba(255, 255, 255, 0.1);
    }

    /* Suggestion cards: fixed width so the row scrolls/drags instead of stretching */
    .ii-suggestion-card {
        flex: 0 0 auto;
        width: 160px;
    }
}

/* ================================================================
 *  2. MOBILE LAYOUT (≤ 768px)
 *  Sidebar becomes a drawer, header restructured
 * ================================================================ */

@media (max-width: 768px) {

    /* ── App shell ── */
    .ii-app {
        height: 100svh;
        overflow: hidden;
        position: relative;
    }

    /* ── Sidebar: full-screen drawer ── */
    .ii-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        height: 100svh;
        height: 100dvh;
        /* fallback */
        z-index: 200;
        width: 80vw;
        min-width: 260px;
        max-width: 320px;
        transform: translateX(-100%);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
            box-shadow 0.3s ease;
        backface-visibility: hidden;
        border-right: 1px solid var(--ii-border);
    }

    .ii-sidebar.is-mobile-open {
        transform: translateX(0);
        box-shadow: 4px 0 32px rgba(0, 0, 0, 0.2);
    }

    /* Override the collapsed state on mobile — collapse means hidden */
    .ii-sidebar.collapsed {
        width: 80vw;
        min-width: 260px;
        transform: translateX(-100%);
    }

    /* ── Mobile sidebar backdrop overlay ── */
    .ii-sidebar-mobile-backdrop {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.45);
        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);
        z-index: 199;
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    .ii-sidebar-mobile-backdrop.is-visible {
        display: block;
        opacity: 1;
    }

    /* ── Sidebar nav: add close button space ── */
    .ii-sidebar-nav {
        padding: 0 12px;
        justify-content: space-between;
        height: 52px;
    }

    .ai-toast-close {
        opacity: 1;
    }

    .ii-share-social-btn {
        width: 36px;
        height: 36px;
    }

    /* ── Sidebar footer: keep accessible ── */
    .ii-sfooter {
        padding: 8px 12px;
        flex-direction: row;
        gap: 4px;
    }

    .ii-sidebar.collapsed .ii-sfooter {
        flex-direction: row;
        padding: 8px 12px;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }

    /* ── Main area: takes full width ── */
    .ii-main {
        width: 100%;
        flex: 1;
    }

    /* ── Studio header: mobile layout ── */
    .ii-studio-header {
        padding: 0 12px;
        height: 52px;
    }

    .ii-sh-left {
        width: auto;
        min-width: 40px;
    }

    .ii-sh-left .logo img {
        width: 76px;
    }

    .ii-viewer-img {
        transition: none;
    }

    .ii-popper-search-input {
        font-size: 16px;
    }

    /* Hide logo on very small screens to save space */
    @media (max-width: 380px) {
        .ii-sh-left .logo img {
            width: 60px;
        }

        .ii-beta-badge {
            font-size: 7px;
        }
    }

    .ii-sh-middle {
        display: none;
        flex: 1;
        padding: 0 8px;
        min-width: 0;
    }

    .ii-workspace-title {
        font-size: 0.875rem;
        max-width: 140px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .ii-sh-right {
        width: auto;
        min-width: 40px;
    }

    /* ── Mobile hamburger button ── */
    .ii-mobile-menu-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        border-radius: 8px;
        border: none;
        background: transparent;
        color: var(--ii-text-primary);
        cursor: pointer;
        transition: background 0.2s ease;
        flex-shrink: 0;
        -webkit-tap-highlight-color: transparent;
    }

    .ii-mobile-menu-btn:hover,
    .ii-mobile-menu-btn:active {
        background: var(--ii-bg-hover);
    }

    /* ── Hide sidebar toggle on mobile (sidebar uses drawer instead) ── */
    .ii-sidebar-toggle {
        display: none;
    }

    /* ── Nav buttons: touch-friendly ── */
    .ii-nav-btn {
        font-size: 14px;
        padding: 12px 14px;
        min-height: 44px;
    }

    /* ── Workspaces separator: more breathing room ── */
    .ii-workspaces-separator {
        padding: 10px 20px 4px;
    }

    /* ── Chat area: full-width messages ── */
    .ii-chat-area {
        padding: 16px 12px;
        padding-bottom: 160px;
    }

    .ii-messages {
        max-width: 100%;
        gap: 16px;
    }

    /* ── Welcome glow: hidden on mobile ── */
    .ii-input-glow {
        display: none;
    }

    /* ── Input wrapper: sticky bottom ── */
    .ii-input-wrapper {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        max-width: 100%;
        padding: 8px 12px;
        padding-bottom: max(12px, env(safe-area-inset-bottom));
        transform: none;
        z-index: 50;
    }

    .ii-main.is-empty .ii-input-wrapper {
        bottom: 0;
        transform: none;
        position: fixed;
    }

    /* Welcome header & suggestions: adjust for mobile */
    .ii-welcome-header {
        position: relative;
        bottom: auto;
        left: auto;
        right: auto;
        opacity: 1;
        visibility: visible;
        padding: 0;
        margin-bottom: 12px;
    }

    .ii-main.is-empty .ii-welcome-header {
        opacity: 1;
        visibility: visible;
    }

    .ii-welcome-header h1 {
        font-size: 24px;
        letter-spacing: -0.5px;
        text-align: center;
    }

    .ii-suggestion-card {
        flex: 0 0 auto;
        width: 160px;
        padding: 9px 12px;
        gap: 8px;
        border-radius: 14px;
    }

    .ii-suggestion-title {
        font-size: 11.5px;
    }

    .ii-suggestion-icon {
        width: 26px;
        height: 26px;
        border-radius: 6px;
        flex-shrink: 0;
    }

    /* "More Presets" footer — full width on mobile */
    .ii-more-presets-btn {
        width: 100%;
        justify-content: center;
        padding: 9px 18px;
    }

    /* Input row: more compact */
    .ii-input-row {
        padding: 6px 10px;
        border-radius: 10px;
    }

    .ii-input {
        font-size: 16px;
        /* 16px minimum prevents iOS Safari zoom-on-focus */
        max-height: 100px;
        padding: 6px 0;
    }

    /* Editor tools: wrap if needed */
    .ii-editor-tools {
        gap: 6px;
        flex-wrap: wrap;
    }

    .ii-dropdown-toggle {
        height: 32px;
        padding: 6px 10px;
        font-size: 12px;
    }

    /* Add assets button: touch-friendly */
    .ii-add-assets-btn {
        width: 40px;
        height: 40px;
    }

    /* Send button: full accessible touch target */
    .ii-send-btn {
        min-height: 40px;
        min-width: 40px;
        font-size: 13px;
        padding: 8px;
    }

    .ii-variant-count {
        min-height: 40px;
        min-width: 40px;
    }

    .ii-send-btn .ii-send-btn-label,
    .ii-send-btn .ii-send-btn-cost,
    .ii-send-btn .ii-send-btn-icon {
        display: none;
    }

    .ii-send-btn .ii-send-btn-mobile-icon {
        display: block;
    }

    .ii-presets-btn {
        min-height: 40px;
        min-width: 40px;
    }

    .ii-presets-btn span {
        display: none;
    }

    /* ── Generated images: full width ── */
    .ii-generated-image {
        max-width: 100%;
    }

    /* ── Variant tabs: horizontal scroll ── */
    .ii-variant-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding: 0 2px;
        gap: 4px;
    }

    .ii-variant-tabs::-webkit-scrollbar {
        display: none;
    }

    /* ── Receipt chips: wrap and scroll ── */
    .ii-receipt-chips {
        flex-wrap: wrap;
        gap: 4px;
    }

    .ii-receipt-chip {
        max-width: 120px;
        font-size: 10px;
    }

    /* ── Generation receipt: compact ── */
    .ii-generation-receipt {
        padding: 8px 10px;
        gap: 4px;
    }

    /* ── Asset chips in prompt bar ── */
    .ii-asset-chips-container {
        gap: 4px;
    }

    .ii-asset-chip-title {
        max-width: 80px;
    }

    /* ── Workspace items: touch-friendly (FIX: single-tap navigation) ── */
    .ii-workspace-item {
        padding: 10px 10px;
        border-radius: 8px;
        /* Remove any pointer-events issues */
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
    }

    .ii-workspace-item-link {
        /* Ensure the link is the primary touch target */
        flex: 1;
        min-width: 0;
        display: flex;
        align-items: center;
        gap: 10px;
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
        cursor: pointer;
    }

    /* Touch target for workspace item: expand clickable area */
    .ii-workspace-item-link::before {
        content: '';
        position: absolute;
        inset: 0;
        z-index: 0;
    }

    .ii-workspace-item {
        position: relative;
    }

    /* Workspace options button: large touch target */
    .ii-workspace-options-btn {
        opacity: 1;
        /* always visible on mobile */
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        z-index: 1;
        flex-shrink: 0;
        /* Expand touch target */
        margin: -8px -8px -8px 0;
        padding: 8px;
        border-radius: 8px;
    }

    /* Collection image: grid card, touch-friendly */
    .ii-collection-image {
        border-radius: 10px;
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
    }

    /* Options button: always visible on mobile (no hover state) */
    .ii-asset-options-btn {
        opacity: 1 !important;
        width: 28px;
        height: 28px;
        margin: 0;
        padding: 0;
    }

    /* Checkbox: always show on mobile */
    .ii-ci-checkbox input[type="checkbox"] {
        opacity: 0.85 !important;
        width: 18px;
        height: 18px;
    }

    /* ── Image action buttons: larger touch targets ── */
    .ii-image-actions {
        opacity: 1;
        /* always show on touch */
        top: 10px;
        right: 10px;
        gap: 6px;
    }

    .ii-image-action-btn {
        width: 36px;
        height: 36px;
        border-radius: 50%;
    }

    /* ── Chat skeleton: full-width ── */
    .ii-chat-area-skeleton {
        padding: 16px 12px;
    }

    .ii-input-wrapper-skeleton {
        padding: 8px 12px;
        max-width: 100%;
    }

    /* ── Creations panel ── */
    .ii-creations-panel {
        top: 52px;
        /* match mobile header height */
    }

    .ii-creations-tabs-bar {
        padding: 8px 12px;
    }

    .ii-creations-pane {
        padding: 16px 12px 80px;
    }

    .ii-creations-grid,
    .ii-creations-skeleton-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    /* ── Asset modal: bottom sheet on mobile ── */
    .ii-asset-modal-backdrop {
        align-items: flex-end;
        padding: 0;
    }

    .ii-asset-modal {
        max-width: 100%;
        width: 100%;
        height: 90svh;
        max-height: 90svh;
        border-radius: 20px 20px 0 0;
        transform: translateY(100%);
        transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .ii-asset-modal-backdrop.is-open .ii-asset-modal {
        transform: translateY(0);
    }

    .ii-asset-modal-header {
        padding: 12px 16px 10px;
    }

    .ii-asset-category-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .ii-asset-posts-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
    }

    /* ── Popup modal: mobile optimized ── */
    #iiReusablePopupContainer {
        width: 96% !important;
        max-width: 96vw !important;
        border-radius: 16px !important;
    }

    /* ── Swap modal grid: 2 columns on mobile ── */
    .ii-swap-modal-grid {}

    /* ── Sidebar skeleton ── */
    .ii-sidebar-skeleton {
        max-width: 100%;
    }

    /* ── Bulk action bar ── */
    .ii-bulk-action-bar {
        left: 0 !important;
        width: 100% !important;
        padding: 10px 12px;
        padding-bottom: max(10px, env(safe-area-inset-bottom));
        border-radius: 0;
        flex-wrap: wrap;
        gap: 6px;
    }

    .ii-bulk-bar-right {
        gap: 4px;
    }

    .ii-bulk-select-all-btn,
    .ii-bulk-delete-btn {
        height: 36px;
        font-size: 12px;
        padding: 0 10px;
    }

    /* ── Toast: full-width on mobile ── */
    .ai-toaster {
        width: calc(100% - 24px);
        max-width: calc(100% - 24px);
    }

    .ai-toaster[data-pos="bottom-right"],
    .ai-toaster[data-pos="bottom-left"],
    .ai-toaster[data-pos="bottom-center"] {
        bottom: max(16px, env(safe-area-inset-bottom));
        left: 12px;
        right: 12px;
        transform: none;
        width: auto;
    }

    .ai-toaster[data-pos="top-right"],
    .ai-toaster[data-pos="top-left"],
    .ai-toaster[data-pos="top-center"] {
        top: max(16px, env(safe-area-inset-top));
        left: 12px;
        right: 12px;
        transform: none;
        width: auto;
    }

    /* ── Popper menus: wider on mobile ── */
    .ii-popper-menu {
        min-width: 200px;
    }

    /* ── Edit wrapper ── */
    .ii-edit-image-preview {
        width: 52px;
        height: 52px;
    }

    /* ── Chat skeleton ── */
    .ii-chat-skeleton {
        position: fixed;
        top: 52px;
    }

    /* ── Section options button: always visible ── */
    .ii-section-options-btn {
        opacity: 1;
        width: 32px;
        height: 32px;
    }

    /* ── Workspace empty state: better mobile layout ── */
    .ii-workspace-empty-state {
        padding: 32px 16px;
    }

    /* ── Drop-down toggles: bigger ── */
    .ii-dropdown-toggle {
        width: 40px;
        height: 40px;
    }

    /* ── Edit action button: icon-only on mobile ── */
    .ii-edit-action-btn span {
        display: none;
    }

    /* ── Beta badge: smaller on mobile ── */
    .ii-beta-badge {
        padding: 2px 4px;
    }

    /* ── Sidebar footer (sfooter): account for iPhone home indicator ── */
    .ii-sfooter {
        padding-bottom: max(10px, env(safe-area-inset-bottom));
    }
}

/* ================================================================
 *  3. SMALL MOBILE (≤ 480px)
 * ================================================================ */

@media (max-width: 480px) {

    /* ── Welcome title ── */
    .ii-welcome-header h1 {
        font-size: 20px;
    }

    /* ── Suggestion cards: compact stack ── */
    .ii-welcome-suggestions {
        gap: 6px;
    }

    .ii-suggestion-card {
        padding: 8px 10px;
        gap: 8px;
        border-radius: 12px;
    }

    /* ── Workspace title: shorter ── */
    .ii-workspace-title {
        max-width: 110px;
        font-size: 0.8rem;
    }

    /* ── Asset posts grid: 2 columns ── */
    .ii-asset-posts-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* ── Asset category grid: 2 columns ── */
    .ii-asset-category-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* ── Receipt chip: tighter ── */
    .ii-receipt-chip {
        max-width: 100px;
    }

    /* ── Combined message ── */
    .ii-message-gallery-section {
        padding: 10px;
    }

    .ii-message-prompt-section {
        padding: 12px;
    }

    /* ── Image action overlay ── */
    .ii-image-actions {
        gap: 4px;
    }

    .ii-image-action-btn {
        width: 32px;
        height: 32px;
    }

    /* ── Input: smaller editor tools ── */
    .ii-editor-tools {
        gap: 4px;
    }

    .ii-dropdown-toggle {
        padding: 6px 8px;
        font-size: 11px;
    }

    .ii-dropdown-label {
        display: none;
        /* icon-only dropdowns on tiny screens */
    }

    /* ── Swap modal: full-height ── */
    .ii-asset-modal {
        height: 95svh;
        max-height: 95svh;
    }

    .ii-combined-message .ii-generated-image-link img {
        width: 100%;
    }
}

/* ================================================================
 *  4. TINY SCREENS (≤ 360px)
 * ================================================================ */

@media (max-width: 360px) {
    .ii-studio-header {
        padding: 0 8px;
    }

    .ii-chat-area {
        padding: 12px 8px;
        padding-bottom: 160px;
    }

    .ii-input-wrapper {
        padding: 6px 8px;
        padding-bottom: max(8px, env(safe-area-inset-bottom));
    }

    .ii-creations-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 6px;
    }

    .ii-creations-pane {
        padding: 12px 8px 80px;
    }
}

/* ================================================================
 *  5. MOBILE SIDEBAR CLOSE BUTTON INJECTION
 *  The JS will inject a close button into the sidebar nav on mobile
 * ================================================================ */

.ii-sidebar-close-btn {
    display: none;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: none;
    background: transparent;
    color: var(--ii-text-primary);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.15s ease;
    flex-shrink: 0;
}

.ii-sidebar-close-btn:active {
    background: var(--ii-bg-hover);
}

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

/* ================================================================
 *  6. MOBILE HAMBURGER BUTTON IN HEADER
 *  Hidden on desktop, shown on mobile via JS injection
 * ================================================================ */

.ii-mobile-menu-btn {
    display: none;
}

@media (max-width: 768px) {
    .ii-mobile-menu-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        border-radius: 8px;
        border: none;
        background: transparent;
        color: var(--ii-text-primary);
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
        flex-shrink: 0;
    }

    .ii-mobile-menu-btn:active {
        background: var(--ii-bg-hover);
    }
}

/* ================================================================
 *  7. WORKSPACE ITEM SINGLE-TAP FIX
 *  On mobile, the options button overlaps the link.
 *  Fix by making options btn a proper z-index isolated button.
 * ================================================================ */

@media (max-width: 768px) {
    .ii-workspace-item {
        position: relative;
        isolation: isolate;
    }

    /* The link fills the entire item */
    .ii-workspace-item-link {
        position: relative;
        z-index: 1;
        /* Extend to fill the row except the options btn width */
        flex: 1;
        min-width: 0;
    }

    /* Options button sits above with higher z-index */
    .ii-workspace-options-btn {
        position: relative;
        z-index: 2;
        /* Always visible on mobile for discoverability */
        opacity: 1;
    }
}

/* ================================================================
 *  8. TOUCH INTERACTION IMPROVEMENTS
 * ================================================================ */

@media (max-width: 768px) {

    /* Active states for better touch feedback */
    .ii-collection-image:active {
        transform: scale(0.96);
        opacity: 0.9;
    }

    .ii-workspace-item:active {
        background: var(--ii-bg-hover);
    }

    .ii-image-action-btn:active {
        transform: scale(0.92);
    }

    .ii-send-btn:active:not(:disabled) {
        transform: scale(0.95);
    }

    .ii-suggestion-card:active {
        transform: translateY(0) scale(0.98);
        box-shadow: none;
    }

    /* Remove hover effects that don't apply on touch */
    .ii-workspace-item:hover {
        background: transparent;
    }

    /* Ensure all interactive elements have adequate size */
    .ii-copy-prompt-btn,
    .ii-prompt-expand-btn,
    .ii-prompt-menu-btn {
        width: 32px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .ii-cancel-edit-btn {
        width: 24px;
        height: 24px;
    }

    /* Checkbox: bigger on mobile (handled in card-specific block above) */
    .ii-ci-checkbox {
        top: 6px;
        left: 6px;
    }

    .ii-message-prompt-text {
        font-size: .8rem;
    }

    /* Receipt chip swap: easier to tap */
    .ii-receipt-chip {
        min-height: 32px;
        padding: 4px 6px;
    }

    /* Variant tabs: bigger touch targets */
    .ii-variant-tab {
        min-height: 32px;
        padding: 6px 12px;
    }

    /* Delete mode: grid cards retain aspect-ratio, no min-height needed */
    .is-delete-mode .ii-collection-image {
        min-height: unset;
    }
}

/* ================================================================
 *  9. DARK THEME MOBILE OVERRIDES
 * ================================================================ */

@media (max-width: 768px) {
    [data-theme="dark"] .ii-sidebar {
        background: var(--ii-dk-surface-1);
        border-right-color: var(--ii-dk-border);
    }

    [data-theme="dark"] .ii-sidebar-mobile-backdrop {
        background: rgba(0, 0, 0, 0.6);
    }
}

/* ================================================================
 *  10. LANDSCAPE MOBILE
 *  Adjust for phones in landscape orientation
 * ================================================================ */

@media (max-width: 896px) and (orientation: landscape) and (max-height: 500px) {
    .ii-studio-header {
        height: 44px;
    }

    .ii-chat-area {
        padding-bottom: 120px;
    }

    .ii-input-wrapper {
        padding: 4px 12px;
        padding-bottom: max(4px, env(safe-area-inset-bottom));
    }

    .ii-asset-modal {
        height: 95svh;
        border-radius: 12px;
    }

    .ii-creations-panel {
        top: 44px;
    }

    .ii-welcome-header h1 {
        font-size: 18px;
    }

}

/* ================================================================
 *  11. TABLET SIDEBAR (768px - 1024px)
 *  Semi-drawer: smaller width, tap-to-close backdrop
 * ================================================================ */

@media (min-width: 769px) and (max-width: 1024px) {
    :root {
        --ii-sidebar-width: 240px;
    }

    .ii-sidebar {
        position: relative;
        transform: none;
        z-index: 20;
    }

    /* When explicitly collapsed on tablet, hide */
    .ii-sidebar.collapsed {
        width: 56px;
        min-width: 56px;
    }

    .ii-workspace-title {
        max-width: 180px;
    }

    /* Workspace options: touch-friendly */
    .ii-workspace-options-btn {
        opacity: 1;
        width: 36px;
        height: 36px;
    }

    /* Asset options: always visible */
    .ii-asset-options-btn {
        opacity: 1;
    }
}

/* ================================================================
 *  12. IOS SAFE AREA SUPPORT
 * ================================================================ */

@supports (padding: max(0px)) {
    @media (max-width: 768px) {
        .ii-input-wrapper {
            padding-bottom: max(12px, env(safe-area-inset-bottom));
        }

        .ai-toaster[data-pos^="bottom"] {
            bottom: max(16px, env(safe-area-inset-bottom));
        }

        .ii-bulk-action-bar {
            padding-bottom: max(10px, env(safe-area-inset-bottom));
        }

        .ii-asset-modal {
            padding-bottom: env(safe-area-inset-bottom);
        }

        .ii-asset-modal-footer {
            padding-bottom: max(16px, env(safe-area-inset-bottom));
        }
    }
}

/* ================================================================
 *  13. REDUCED MOTION (mobile often has this enabled)
 * ================================================================ */

@media (prefers-reduced-motion: reduce) {
    .ii-sidebar {
        transition: none;
    }

    .ii-sidebar-mobile-backdrop {
        transition: none;
    }

    .ii-asset-modal {
        transition: none;
    }

    .ii-collection-image:active {
        transform: none;
    }
}

/* ================================================================
 *  14. GLOBAL SCROLLBAR HIDING ON MOBILE
 * ================================================================ */

@media (max-width: 768px) {

    .ii-sidebar-chats,
    .ii-messages,
    .ii-chat-area,
    .ii-creations-pane {
        width: 100%;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .ii-sidebar-chats::-webkit-scrollbar,
    .ii-messages::-webkit-scrollbar,
    .ii-chat-area::-webkit-scrollbar,
    .ii-creations-pane::-webkit-scrollbar {
        display: none;
    }
}