/**
 * MOBILE V10 STYLES
 * Version: 4.30.11
 *
 * 360px-First Mobile Enhancement Styles for Sofia Price Tool
 *
 * Z-INDEX STRATEGY (SAFE ZONE: 50-160):
 * - 50: Chips (relative positioning)
 * - 51: Search container (above chips)
 * - 100: Collection dropdown
 * - 140: Collection overlay
 * - 150: Mobile header (sticky)
 * - 160: Toast notifications (v5.0.149: above overlay + header)
 *
 * EXISTING Z-INDEX STACK (DO NOT CONFLICT):
 * - 200: Existing mobile header (main.css)
 * - 1000: SlotMachine container
 * - 10000: Modals, overlays
 * - 99999: Insights tooltips
 *
 * BREAKPOINTS:
 * - Base: 360px (iPhone 12/13 mini - minimum supported)
 * - 375px: iPhone SE (more space)
 * - 390px: Standard iPhone (comfortable)
 * - 430px: Plus/Max (generous spacing)
 */

/* ============================================
   CSS CUSTOM PROPERTIES (360px BASE)
   ============================================ */

.mobile-ui {
    /* Spacing */
    --side-padding: 12px;
    --content-gap: 8px;

    /* Typography */
    --chip-font-size: 12px;
    --item-font-main: 14px;
    --item-font-sub: 11px;
    --input-font-size: 16px; /* 16px prevents iOS zoom on focus */

    /* Sizing */
    --chip-padding: 4px 8px;
    --chip-height: 28px;
    --chip-remove-size: 16px;  /* v4.25.6: Responsive chip remove button */
    --chip-text-max-width: 120px;  /* v5.0.18: Responsive chip text width */
    --item-height: 56px;       /* v4.25.6: Fixed from 52px per plan spec */
    --input-height: 44px;
    --header-height: 44px;
    --touch-target-min: 44px;

    /* Keyboard handling (set by JS) */
    --keyboard-height: 0px;

    /* v5.0.19: Dropdown positioning - calculated as header + search area (16px padding + 44px input + 8px gap) */
    --search-area-height: 68px;
    --dropdown-top: calc(var(--safe-area-top) + var(--header-height) + var(--search-area-height));

    /* Safe areas (notch, home indicator) */
    --safe-area-top: env(safe-area-inset-top, 0px);
    --safe-area-bottom: env(safe-area-inset-bottom, 0px);
    --safe-area-left: env(safe-area-inset-left, 0px);
    --safe-area-right: env(safe-area-inset-right, 0px);

    /* Colors (matches existing brand) */
    --color-primary: #C67E5F;      /* Terracotta */
    --color-primary-light: #D4967A;
    --color-primary-dark: #A6684D;
    --color-text: #333333;
    --color-text-secondary: #666666;
    --color-text-muted: #999999;
    --color-background: #FAFAF8;
    --color-surface: #FFFFFF;
    --color-border: #E5E5E0;
    --color-border-active: #C67E5F;
    --color-success: #4CAF50;
    --color-error: #F44336;

    /* Shadows */
    --shadow-subtle: 0 1px 3px rgba(0, 0, 0, 0.08);
    --shadow-medium: 0 2px 8px rgba(0, 0, 0, 0.12);
    --shadow-elevated: 0 4px 16px rgba(0, 0, 0, 0.16);

    /* Transitions */
    --transition-fast: 150ms ease-out;
    --transition-normal: 250ms ease-out;
}

/* ============================================
   375px+ (iPhone SE)
   ============================================ */
@media (min-width: 375px) {
    .mobile-ui {
        --side-padding: 16px;
        --chip-font-size: 13px;
        --chip-padding: 6px 12px;  /* v4.25.6: Fixed from 6px 10px per plan spec */
        --chip-height: 32px;
        --chip-remove-size: 20px;  /* v4.25.6: Larger at 375px+ */
        --chip-text-max-width: 150px;  /* v5.0.18: More room at 375px+ */
        --item-height: 60px;       /* v4.25.6: Fixed from 56px per plan spec */
        --item-font-main: 15px;
        --item-font-sub: 12px;
        --input-height: 48px;
        --header-height: 48px;
        --search-area-height: 72px;  /* v5.0.19: 16px + 48px input + 8px gap */
    }
}

/* ============================================
   390px+ (Standard iPhone)
   ============================================ */
@media (min-width: 390px) {
    .mobile-ui {
        --item-height: 64px;  /* v4.25.6: Adjusted for 390px+ */
        --item-font-main: 16px;
        --chip-text-max-width: 180px;  /* v5.0.18: More room at 390px+ */
    }
}

/* ============================================
   430px+ (Plus/Max)
   ============================================ */
@media (min-width: 430px) {
    .mobile-ui {
        --side-padding: 20px;
        --item-height: 64px;
        --chip-text-max-width: 200px;  /* v5.0.18: Maximum room at 430px+ */
    }
}

/* ============================================
   CONTAINER
   ============================================ */

.mobile-ui {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--color-background);
    display: flex;
    flex-direction: column;
    overflow: hidden;

    /* Touch optimizations */
    touch-action: manipulation;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;

    /* Safe area padding */
    padding-top: var(--safe-area-top);
    padding-left: var(--safe-area-left);
    padding-right: var(--safe-area-right);
}

/* ============================================
   HEADER
   ============================================ */

.mobile-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--header-height);
    padding: 0 var(--side-padding);
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    position: sticky;
    top: 0;
    z-index: 150;
    flex-shrink: 0;
    /* v5.0.28: Smooth transition for keyboard-based hiding */
    transition: height 0.2s ease, opacity 0.2s ease, padding 0.2s ease;
}

/* v5.0.28: Hide Sofia header when keyboard is open to maximize vertical space */
.keyboard-open .mobile-header {
    height: 0;
    padding: 0;
    opacity: 0;
    overflow: hidden;
    border-bottom: none;
}

.mobile-brand {
    display: flex;
    align-items: center;
    gap: 8px;
}

.mobile-logo {
    width: 24px;
    height: 24px;
}

.mobile-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--color-text);
}

/* v5.0.53: Mobile version number - displays next to Sofia title */
.mobile-version {
    display: inline-block !important;
    font-size: 10px !important;
    font-family: monospace !important;
    color: #C67E5F !important;
    opacity: 1 !important;
    margin-left: 6px !important;
    background: rgba(198, 126, 95, 0.1) !important;
    padding: 2px 6px !important;
    border-radius: 4px !important;
}

.mobile-clear-btn {
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 500;
    color: var(--color-primary);
    background: transparent;
    border: 1px solid var(--color-primary);
    border-radius: 20px;
    cursor: pointer;
    min-height: var(--touch-target-min);
    transition: all var(--transition-fast);
}

.mobile-clear-btn:active {
    background: var(--color-primary);
    color: white;
}

/* v5.0.153: Help link + action grouping in header */
.mobile-header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.mobile-help-link {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 600;
    color: #999;
    border: 1px solid #ddd;
    border-radius: 50%;
    text-decoration: none;
    flex-shrink: 0;
}

.mobile-help-link:active {
    background: #f0f0f0;
}

/* ============================================
   CHIPS (Progress Indicators)
   ============================================ */

.mobile-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: var(--content-gap) var(--side-padding);
    background: var(--color-surface);
    position: relative;
    z-index: 50;
    flex-shrink: 0;
}

/* When keyboard visible, allow horizontal scroll */
.mobile-ui.keyboard-visible .mobile-chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.mobile-ui.keyboard-visible .mobile-chips::-webkit-scrollbar {
    display: none;
}

.mobile-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: var(--chip-padding);
    height: var(--chip-height);
    background: var(--color-primary-light);
    color: white;
    border-radius: 16px;
    font-size: var(--chip-font-size);
    font-weight: 500;
    white-space: nowrap;
    transition: transform var(--transition-fast);
}

.mobile-chip:active {
    transform: scale(0.96);
}

.chip-text {
    /* v5.0.18: Responsive chip text width - use CSS variable for breakpoint scaling */
    max-width: var(--chip-text-max-width, 120px);
    overflow: hidden;
    text-overflow: ellipsis;
}

.chip-remove {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--chip-remove-size);   /* v4.25.6: Responsive - 16px@360, 20px@375+ */
    height: var(--chip-remove-size);
    min-width: var(--chip-remove-size);  /* Prevent shrinking */
    background: rgba(255, 255, 255, 0.3);
    border: none;
    border-radius: 50%;
    color: white;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    /* v5.0.17: Expand touch target to 44px minimum (WCAG 2.1 AAA) without changing visual size */
    position: relative;
}

/* v5.0.17: Expanded touch area using pseudo-element (44px × 44px minimum) */
.chip-remove::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
}

.chip-remove:active {
    background: rgba(255, 255, 255, 0.5);
}

/* ============================================
   SEARCH AREA
   ============================================ */

.mobile-search-area {
    /* v5.0.5: Increased top padding to prevent header overlap */
    padding: 16px var(--side-padding) var(--content-gap) var(--side-padding);
    background: var(--color-surface);
    flex-shrink: 0;
    /* Ensure it's always above any floating elements */
    position: relative;
    z-index: 10;
}

.mobile-search-container {
    display: flex;
    align-items: center;
    /* v5.0.16 FIX: Remove gap - mic button now absolutely positioned inside input padding */
    position: relative;
    z-index: 51;
}

.mobile-search-input {
    flex: 1;
    height: var(--input-height);
    padding: 12px 48px 12px 16px;  /* v4.25.6: Fixed per plan spec - space for mic on right */
    font-size: var(--input-font-size);
    color: var(--color-text);
    background: var(--color-background);
    border: 2px solid var(--color-border);
    border-radius: 24px;
    outline: none;
    transition: border-color var(--transition-fast);

    /* Allow text selection in input */
    -webkit-user-select: text;
    user-select: text;
}

.mobile-search-input:focus {
    border-color: var(--color-primary);
}

.mobile-search-input::placeholder {
    color: var(--color-text-muted);
}

.mobile-mic-btn {
    /* v5.0.16 FIX: Position absolutely inside input's right padding area (48px) */
    position: absolute;
    right: 2px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    /* v5.0.17: Increased to 44px minimum touch target (WCAG 2.1 AAA) */
    width: 44px;
    height: 44px;
    background: var(--color-primary);
    border: none;
    border-radius: 50%;
    color: white;
    cursor: pointer;
    transition: all var(--transition-fast);
    z-index: 1;  /* Above input */
}

.mobile-mic-btn:active {
    /* v5.0.16 FIX: Combine translateY with scale for centered absolute positioning */
    transform: translateY(-50%) scale(0.92);
    background: var(--color-primary-dark);
}

.mobile-mic-btn svg {
    width: 20px;
    height: 20px;
}

/* Listening state - pulsing animation */
.mobile-mic-btn.listening {
    animation: pulse-listening 1.5s ease-in-out infinite;
    background: var(--color-error); /* Red when listening */
}

@keyframes pulse-listening {
    /* v5.0.16 FIX: Combine translateY with scale for absolute positioning */
    0%, 100% {
        transform: translateY(-50%) scale(1);
        box-shadow: 0 0 0 0 rgba(244, 67, 54, 0.4);
    }
    50% {
        transform: translateY(-50%) scale(1.05);
        box-shadow: 0 0 0 10px rgba(244, 67, 54, 0);
    }
}

/* ============================================
   COLLECTION AREA (Fabric Stage)
   ============================================ */

.mobile-collection-area {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: var(--content-gap) var(--side-padding);
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    flex-shrink: 0;
}

/* v5.0.22: Hide "All Collections" button - redundant with Collection dropdown in fabric overlay */
.mobile-collection-dropdown {
    display: none !important;
}

/* Legacy styling kept for reference - button is now hidden
.mobile-collection-dropdown-OLD {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 0 16px;
    height: 36px;
    min-width: 140px;
    background: var(--color-background);
    border: 2px solid var(--color-border);
    border-radius: 24px;
    font-size: 14px;
    color: var(--color-text);
    cursor: pointer;
    transition: border-color var(--transition-fast);
    z-index: 100;
} */

.mobile-collection-dropdown:active {
    border-color: var(--color-primary);
}

.collection-arrow {
    font-size: 10px;
    color: var(--color-text-muted);
    transition: transform var(--transition-fast);
}

.mobile-collection-dropdown.open .collection-arrow {
    transform: rotate(180deg);
}

.mobile-fabric-search {
    flex: 1;
    height: var(--input-height);
    padding: 0 16px;
    font-size: var(--input-font-size);
    color: var(--color-text);
    background: var(--color-background);
    border: 2px solid var(--color-border);
    border-radius: 24px;
    outline: none;
    -webkit-user-select: text;
    user-select: text;
}

.mobile-fabric-search:focus {
    border-color: var(--color-primary);
}

/* ============================================
   COLLECTION DROPDOWN OVERLAY (Bottom Sheet)
   ============================================ */

.mobile-collection-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0);
    z-index: 140;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    transition: background 300ms ease-out;
}

.mobile-collection-overlay.visible {
    background: rgba(0, 0, 0, 0.4);
}

.mobile-collection-sheet {
    width: 100%;
    max-height: 50vh;  /* v4.25.6: Fixed from 70vh per plan spec */
    background: var(--color-surface);
    border-radius: 16px 16px 0 0;
    transform: translateY(100%);
    transition: transform 300ms ease-out;
    display: flex;
    flex-direction: column;
    padding-bottom: var(--safe-area-bottom);
}

.mobile-collection-overlay.visible .mobile-collection-sheet {
    transform: translateY(0);
}

.collection-sheet-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px var(--side-padding);
    border-bottom: 1px solid var(--color-border);
    flex-shrink: 0;
}

.collection-sheet-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--color-text);
}

.collection-sheet-close {
    /* v5.0.17: Increased to 44px minimum touch target (WCAG 2.1 AAA) */
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-background);
    border: none;
    border-radius: 50%;
    font-size: 20px;
    color: var(--color-text-muted);
    cursor: pointer;
}

.collection-sheet-options {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: #ffffff;  /* v5.0.81: Explicit white for container */
    color-scheme: light only;  /* v5.0.81: Prevent iOS dark mode auto-adaptation */
}

.collection-option {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px var(--side-padding);
    background-color: #ffffff !important;  /* v5.0.87: Force white with !important */
    -webkit-appearance: none;  /* v5.0.87: Reset iOS button defaults */
    appearance: none;
    border: none;
    border-bottom: 1px solid #e0e0e0;  /* v5.0.87: Hardcoded light border, no CSS var */
    text-align: left;
    cursor: pointer;
    min-height: var(--touch-target-min);
    transition: background-color 0.15s ease;  /* v5.0.87: Simplified transition */
    touch-action: manipulation;
    color-scheme: light only;
    -webkit-tap-highlight-color: transparent;  /* v5.0.87: Remove iOS tap highlight */
}

.collection-option:active {
    background-color: #f5f5f5 !important;  /* v5.0.87: Hardcoded light gray, no CSS var */
}

.collection-option.active {
    background: rgba(198, 126, 95, 0.08);
}

.option-text {
    font-size: 16px;
    color: var(--color-text);
}

.collection-option.active .option-text {
    color: var(--color-primary);
    font-weight: 500;
}

.option-check {
    color: var(--color-primary);
    font-size: 18px;
    font-weight: bold;
}

/* v5.0.106: Filter section headers for Collection and Price */
.filter-section-header {
    padding: 12px var(--side-padding) 8px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #666;
    background: #f8f8f8;
    border-bottom: 1px solid #e0e0e0;
}

.filter-section-header.price-section-header {
    margin-top: 8px;
    color: #5D9A6E;  /* Green for price section */
}

/* v5.0.106: Price option styling (mirrors collection-option) */
.price-option {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px var(--side-padding);
    background: var(--color-surface);
    border: none;
    border-bottom: 1px solid #f0f0f0;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    outline: none;
    -webkit-appearance: none;
    transition: background-color 0.15s ease;
    touch-action: manipulation;
    color-scheme: light only;
    -webkit-tap-highlight-color: transparent;
}

.price-option:active {
    background-color: #f5f5f5 !important;
}

.price-option.active {
    background: rgba(93, 154, 110, 0.08);  /* Green tint for active price */
}

.price-option .option-text {
    font-size: 16px;
    color: var(--color-text);
}

.price-option.active .option-text {
    color: #5D9A6E;  /* Green for active price */
    font-weight: 500;
}

.price-option .option-check {
    color: #5D9A6E;  /* Green checkmark for price */
}

/* v5.0.77: Force light theme on collection sheet in dark mode
 * Chrome applies system dark mode styles automatically.
 * Without this, collection text becomes unreadable (dark bg + dark text).
 * Matches pattern from v5.0.11/v5.0.34 for fabric dropdown.
 */
@media (prefers-color-scheme: dark) {
    .mobile-collection-overlay .mobile-collection-sheet {
        background: #ffffff !important;
        color: #333333 !important;
        color-scheme: light !important;
    }
    .mobile-collection-overlay .collection-sheet-header {
        background: #f8f8f8 !important;
        border-color: #e0e0e0 !important;
    }
    .mobile-collection-overlay .collection-sheet-title {
        color: #333333 !important;
    }
    .mobile-collection-overlay .collection-sheet-close {
        color: #666666 !important;
    }
    .mobile-collection-overlay .collection-option {
        background: #ffffff !important;
        border-color: #e0e0e0 !important;
    }
    .mobile-collection-overlay .collection-option:active {
        background: #f5f5f5 !important;
    }
    .mobile-collection-overlay .collection-option.active {
        background: #f5f0ed !important;
    }
    .mobile-collection-overlay .option-text {
        color: #333333 !important;
    }
    .mobile-collection-overlay .collection-option.active .option-text {
        color: #C67E5F !important;
    }
    .mobile-collection-overlay .option-check {
        color: #C67E5F !important;
    }
    /* v5.0.106: Price filter dark mode styles */
    .mobile-collection-overlay .filter-section-header {
        background: #f8f8f8 !important;
        border-color: #e0e0e0 !important;
        color: #666666 !important;
    }
    .mobile-collection-overlay .filter-section-header.price-section-header {
        color: #5D9A6E !important;
    }
    .mobile-collection-overlay .price-option {
        background: #ffffff !important;
        border-color: #e0e0e0 !important;
    }
    .mobile-collection-overlay .price-option:active {
        background: #f5f5f5 !important;
    }
    .mobile-collection-overlay .price-option.active {
        background: rgba(93, 154, 110, 0.08) !important;
    }
    .mobile-collection-overlay .price-option .option-text {
        color: #333333 !important;
    }
    .mobile-collection-overlay .price-option.active .option-text {
        color: #5D9A6E !important;
    }
    .mobile-collection-overlay .price-option .option-check {
        color: #5D9A6E !important;
    }
}

/* ============================================
   FABRIC SEARCH HIGHLIGHTING
   ============================================ */

.fabric-highlight,
mark.fabric-highlight {
    background-color: #FFEB3B; /* Yellow highlight */
    color: inherit;
    padding: 0 2px;
    border-radius: 2px;
}

/* v5.0.144: Fallback key-match indicator when search matches the internal
   fabric key but neither the display name nor the supplier pill contain
   the term (e.g. searching "linara" matches key "linara fr" but displays
   as "Signature Plain FR") */
.fabric-key-match {
    font-size: 11px;
    color: #666;
    background: #f5f5f5;
    padding: 1px 6px;
    border-radius: 3px;
    margin-left: 4px;
    white-space: nowrap;
}

/* ============================================
   v5.0.7 FIX: COLLECTION FILTER DROPDOWN
   Problem: The dropdown was positioned with bottom: 20%
   which cut off the "All Collections" option at the top.
   Solution: Center the dropdown vertically with proper
   margins and ensure scrollability.
   ============================================ */

body.mobile-v10-active .fabric-dropdown-menu,
body.mobile-v10-active .fabric-dropdown-menu.active,
body.mobile-v10-active .fabric-dropdown-menu-tall,
body.mobile-v10-active .fabric-dropdown-menu-tall.active {
    /* Override slotmachine.css mobile positioning */
    position: fixed !important;
    /* Center vertically on screen instead of bottom-anchored */
    top: 50% !important;
    bottom: auto !important;
    transform: translateY(-50%) !important;
    /* v5.0.37 FIX: Disable animation that was overriding transform with translateY(0) */
    /* The dropdownFadeIn animation in slotmachine.css ends with transform: translateY(0) */
    /* which was pushing the dropdown off-screen, hiding "All Collections" at the top */
    animation: none !important;
    /* Full width with margins */
    left: 16px !important;
    right: 16px !important;
    width: auto !important;
    /* v5.0.30 FIX: Proper height constraints - allow scrolling for collection filter */
    max-height: 60vh !important;
    min-height: auto !important;
    /* v5.0.44 FIX: Enable scrolling but disable iOS scroll position caching */
    /* -webkit-overflow-scrolling: touch causes iOS to cache/restore scroll positions */
    /* Removing it may feel slightly less smooth but prevents the scroll restoration bug */
    overflow-y: auto !important;
    overflow-x: hidden !important;
    /* Intentionally NOT using -webkit-overflow-scrolling: touch */
    overscroll-behavior: contain !important;
    /* v5.0.30 FIX: WHITE background - was showing gray/transparent */
    background: #ffffff !important;
    color: #333333 !important;
    /* Visual styling */
    border-radius: 16px !important;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3) !important;
    z-index: 300 !important;
    /* Add padding at top/bottom so first/last items aren't tight against edges */
    padding-top: 8px !important;
    padding-bottom: 8px !important;
}

/* v5.0.49: PORTAL DROPDOWN - when moved to document.body */
/* This CSS takes over when dropdown is "portaled" out of slot-machine-items */
/* CRITICAL: No transform - it breaks touch events on iOS Safari */
.mobile-portal-dropdown {
    position: fixed !important;
    top: 20vh !important;  /* Position from top instead of centering with transform */
    left: 16px !important;
    right: 16px !important;
    bottom: auto !important;
    transform: none !important;  /* NO TRANSFORM - breaks iOS touch */
    max-height: 60vh !important;
    width: auto !important;
    min-width: auto !important;
    z-index: 99999 !important;  /* Much higher to ensure above backdrop */
    background: #ffffff !important;
    border-radius: 16px !important;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.4) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    padding: 12px 0 !important;
    display: block !important;
    pointer-events: auto !important;  /* Ensure touch events work */
}

/* Portal dropdown items - ensure clickable */
.mobile-portal-dropdown .fabric-dropdown-item {
    min-height: 52px !important;
    display: flex !important;
    align-items: center !important;
    padding: 16px 20px !important;
    font-size: 16px !important;
    border-bottom: 1px solid #f0f0f0 !important;
    cursor: pointer !important;
    pointer-events: auto !important;
    touch-action: manipulation !important;  /* iOS touch fix */
    -webkit-tap-highlight-color: rgba(198, 126, 95, 0.2) !important;
}

.mobile-portal-dropdown .fabric-dropdown-item:last-child {
    border-bottom: none !important;
}

.mobile-portal-dropdown .fabric-dropdown-item:active {
    background: #f5f5f5 !important;
}

.mobile-portal-dropdown .fabric-dropdown-item.active {
    background: #FFF5F0 !important;
    color: #C67E5F !important;
    font-weight: 600 !important;
}

.mobile-portal-dropdown .fabric-dropdown-item.empty-collection {
    opacity: 0.5 !important;
    pointer-events: none !important;  /* Disable clicks on empty collections */
}

/* Add backdrop when dropdown is open */
body.mobile-v10-active .fabric-dropdown-menu.active::before {
    content: '';
    position: fixed;
    top: -100vh;
    left: -100vw;
    right: -100vw;
    bottom: -100vh;
    background: rgba(0, 0, 0, 0.4);
    z-index: -1;
}

/* Ensure dropdown items have proper touch targets */
body.mobile-v10-active .fabric-dropdown-item {
    min-height: 48px !important;
    display: flex !important;
    align-items: center !important;
    padding: 14px 16px !important;
}

/* Make the first item (All Collections) visually distinct */
body.mobile-v10-active .fabric-dropdown-item:first-child {
    border-bottom: 2px solid #e0e0e0 !important;
    font-weight: 500 !important;
}

/* v5.0.30: Gray out collections with 0 items in current filter */
/* v5.0.34: Improved contrast - darker gray for better readability */
body.mobile-v10-active .fabric-dropdown-item.empty-collection {
    color: #888 !important;
    font-style: italic;
    background: #f5f5f5 !important;
}

/* v5.0.145: Removed hardcoded ::after "none in Popular" — now added dynamically
   in JS (populateFabrics) only when Popular filter is actually active */

/* v5.0.34: Dark mode support for collection dropdown */
@media (prefers-color-scheme: dark) {
    body.mobile-v10-active .fabric-dropdown-menu,
    body.mobile-v10-active .fabric-dropdown-menu.active,
    body.mobile-v10-active .fabric-dropdown-menu-tall,
    body.mobile-v10-active .fabric-dropdown-menu-tall.active {
        /* Force light theme for dropdown even in dark mode */
        background: #ffffff !important;
        color: #333333 !important;
    }

    body.mobile-v10-active .fabric-dropdown-item {
        color: #333 !important;
        background: #fff !important;
        border-color: #e0e0e0 !important;
    }

    body.mobile-v10-active .fabric-dropdown-item.active {
        background: #f5f0ed !important;
        color: #C67E5F !important;
    }

    body.mobile-v10-active .fabric-dropdown-item.empty-collection {
        color: #888 !important;
        background: #f5f5f5 !important;
    }

    /* v5.0.78: Force light theme for PORTAL dropdown in dark mode
     * The portal dropdown is appended directly to body, so it needs
     * specific targeting via .mobile-portal-dropdown class */
    .mobile-portal-dropdown {
        background: #ffffff !important;
        color: #333333 !important;
    }

    .mobile-portal-dropdown .fabric-dropdown-item {
        background: #ffffff !important;
        color: #333333 !important;
        border-color: #e0e0e0 !important;
    }

    .mobile-portal-dropdown .fabric-dropdown-item:active {
        background: #f0f0f0 !important;
    }

    .mobile-portal-dropdown .fabric-dropdown-item.active {
        background: #FFF5F0 !important;
        color: #C67E5F !important;
    }

    .mobile-portal-dropdown .fabric-dropdown-item.empty-collection {
        color: #888 !important;
        background: #f8f8f8 !important;
    }

    /* v5.0.77: Force light theme for collection sheet overlay in dark mode */
    body.mobile-v10-active .mobile-collection-overlay {
        background: rgba(0, 0, 0, 0.4) !important;
    }

    body.mobile-v10-active .mobile-collection-sheet {
        background: #ffffff !important;
        color: #333333 !important;
        color-scheme: light !important;
    }

    body.mobile-v10-active .collection-sheet-header {
        background: #ffffff !important;
        border-color: #e0e0e0 !important;
    }

    body.mobile-v10-active .collection-sheet-title {
        color: #333333 !important;
    }

    body.mobile-v10-active .collection-sheet-close {
        background: #f5f5f5 !important;
        color: #666666 !important;
    }

    body.mobile-v10-active .collection-option {
        background: #ffffff !important;
        border-color: #e0e0e0 !important;
    }

    body.mobile-v10-active .collection-option .option-text {
        color: #333333 !important;
    }

    body.mobile-v10-active .collection-option.active {
        background: rgba(198, 126, 95, 0.08) !important;
    }

    body.mobile-v10-active .collection-option.active .option-text {
        color: #C67E5F !important;
    }

    body.mobile-v10-active .option-check {
        color: #C67E5F !important;
    }

    /* v5.0.106: Price filter styles for iOS dark mode */
    body.mobile-v10-active .filter-section-header {
        background: #f8f8f8 !important;
        border-color: #e0e0e0 !important;
        color: #666666 !important;
    }

    body.mobile-v10-active .filter-section-header.price-section-header {
        color: #5D9A6E !important;
    }

    body.mobile-v10-active .price-option {
        background: #ffffff !important;
        border-color: #e0e0e0 !important;
    }

    body.mobile-v10-active .price-option .option-text {
        color: #333333 !important;
    }

    body.mobile-v10-active .price-option.active {
        background: rgba(93, 154, 110, 0.08) !important;
    }

    body.mobile-v10-active .price-option.active .option-text {
        color: #5D9A6E !important;
    }

    body.mobile-v10-active .price-option .option-check {
        color: #5D9A6E !important;
    }
}

/* ============================================
   CONTENT AREA
   ============================================ */

.mobile-content {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: calc(var(--content-gap) + var(--safe-area-bottom));
}

/* Keyboard-aware height adjustment */
.mobile-ui.keyboard-visible .mobile-content {
    height: calc(100vh - var(--header-height) - var(--keyboard-height) - var(--safe-area-bottom));
}

/* ============================================
   TOAST NOTIFICATIONS
   ============================================ */

.mobile-toast {
    position: fixed;
    /* v5.0.18: Include keyboard height so toast appears above keyboard */
    bottom: calc(20px + var(--safe-area-bottom) + var(--keyboard-height, 0px));
    left: var(--side-padding);
    right: var(--side-padding);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: var(--color-text);
    color: white;
    border-radius: 12px;
    box-shadow: var(--shadow-elevated);
    z-index: 160;  /* v5.0.149: Above collection overlay (140) and mobile header (150) */
    animation: toast-slide-up 250ms ease-out;
    /* v5.0.18: Smooth transition when keyboard opens/closes */
    transition: bottom 0.25s ease-out;
}

@keyframes toast-slide-up {
    from {
        transform: translateY(100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.toast-message {
    font-size: 14px;
    font-weight: 500;
}

.toast-undo {
    padding: 8px 16px;
    background: transparent;
    border: 1px solid white;
    border-radius: 20px;
    color: white;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.toast-undo:active {
    background: white;
    color: var(--color-text);
}

.toast-error {
    background: var(--color-error);
}

.toast-success {
    background: var(--color-success);
}

/* ============================================
   TOUCH FEEDBACK
   ============================================ */

.tappable {
    -webkit-tap-highlight-color: rgba(198, 126, 95, 0.2);
    cursor: pointer;
}

.tappable:active {
    transform: scale(0.98);
    opacity: 0.9;
}

/* ============================================
   SELECTABLE TEXT
   ============================================ */

.mobile-ui .selectable,
.mobile-ui .price-value,
.mobile-ui .price-row,
.mobile-ui .messages-wrapper {
    -webkit-user-select: text;
    user-select: text;
}

/* ============================================
   HIDE DESKTOP UI ON MOBILE
   Paradigm separation: autocomplete mode hides landing
   LLM mode shows chat container normally
   ============================================ */

@media (max-width: 768px) {
    /* v5.0.2 FIX: Hide landing container but keep SlotMachine dropdown working
     *
     * CRITICAL: Cannot use display:none because slot-machine-inline is appended
     * INSIDE landing-container by SlotMachine (line 837 of slotmachine.js).
     * A child element cannot override parent's display:none.
     *
     * Solution: Use visibility:hidden + position:absolute to hide the container
     * visually but keep it in the DOM so slot-machine-inline can use position:fixed
     * to break out of the container's boundaries.
     */
    body.mobile-v10-active .landing-container,
    body.mobile-v10-active #landingContainer {
        visibility: hidden !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 0 !important;
        overflow: visible !important;  /* Allow dropdown to escape */
        pointer-events: none !important;
    }

    /* v5.0.21 FIX: Hide main app header when mobile-v10 is active
     * The main header from main.css has position:fixed and z-index:200 which
     * overlaps and cuts off the mobile-ui chips area.
     * Mobile-v10 has its own header (.mobile-header) so hiding this is safe.
     */
    body.mobile-v10-active .header,
    body.mobile-v10-active header.header {
        display: none !important;
    }

    /* v5.0.23: Define positioning variables on body so dropdown can access them
     * (dropdown is NOT inside .mobile-ui, it's appended to .search-container)
     *
     * Must account for ALL elements above dropdown in fabric stage:
     * - Header: 60px (Sofia branding + New button)
     * - Chips: ~56px (selected product + config chips with padding)
     * - Collection area: ~60px (fabric search input + padding)
     * - Safe area: env(safe-area-inset-top) for notch
     */
    body.mobile-v10-active {
        /* Individual component heights */
        --mobile-header-height: 60px;    /* Header with Sofia branding */
        --mobile-chips-height: 56px;     /* Chips area (product + config) */
        --mobile-collection-height: 60px; /* Collection area with fabric search */
        /* Total: header + chips + collection = 176px, add buffer for safe area */
        --mobile-dropdown-top: calc(
            env(safe-area-inset-top, 0px) +
            var(--mobile-header-height) +
            var(--mobile-chips-height) +
            var(--mobile-collection-height) +
            8px
        );
    }

    /* v5.0.28: When keyboard is open, header is hidden so reduce dropdown-top */
    body.mobile-v10-active.keyboard-open {
        /* Header is now hidden (0px), chips still visible, collection area visible */
        --mobile-dropdown-top: calc(
            env(safe-area-inset-top, 0px) +
            var(--mobile-chips-height) +
            var(--mobile-collection-height) +
            8px
        );
    }

    /* v5.0.9 UX OVERHAUL: Better space utilization for dropdown
     *
     * KEY CHANGES:
     * 1. When keyboard CLOSED: Expand to fill more screen (75vh)
     * 2. When keyboard OPEN: Compact mode above keyboard
     * 3. Items align to TOP of container (not cramped at bottom)
     * 4. Smoother transitions
     */
    body.mobile-v10-active .slot-machine-inline,
    body.mobile-v10-active .slot-machine-inline.active {
        display: block !important;
        visibility: visible !important;
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 200 !important;
        pointer-events: auto !important;
        /* v5.0.15 FIX: Reset margins to prevent 16px overflow on mobile */
        /* Base slotmachine.css has margin-left/right: -8px which extends beyond viewport */
        margin: 0 !important;
        box-sizing: border-box !important;
        /* v5.0.11 FIX: Force light theme - Chrome dark mode was making text unreadable */
        background: #ffffff !important;
        color: #1a1a1a !important;
        color-scheme: light !important;
        border: 1px solid #e0e0e0 !important;
        /* v5.0.20: Bottom sheet style when keyboard closed */
        border-radius: 16px 16px 0 0 !important;
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15) !important;
        /* Smooth transition */
        transition: bottom 0.25s ease-out, max-height 0.25s ease-out, top 0.25s ease-out !important;

        /* v5.0.20 FIX: DEFAULT (keyboard CLOSED) - bottom sheet style */
        /* Dropdown appears at bottom and expands upward - doesn't overlap input */
        top: auto !important;
        bottom: 0 !important;
        /* v5.0.20: Reduced to 50vh to ensure it doesn't overlap chip/input area */
        max-height: 50vh !important;
        overflow: hidden !important;
    }

    /* v5.0.26: When keyboard is OPEN, position dropdown BELOW input */
    body.mobile-v10-active.keyboard-open .slot-machine-inline,
    body.mobile-v10-active.keyboard-open .slot-machine-inline.active {
        /* Switch to top positioning when keyboard is visible */
        /* Fallback 184px = 60 (header) + 56 (chips) + 60 (collection) + 8 (buffer) */
        top: var(--mobile-dropdown-top, 184px) !important;
        bottom: auto !important;
        /* Rounded bottom corners when positioned below input */
        border-radius: 0 0 16px 16px !important;
        border-top: 3px solid var(--color-primary, #C67E5F) !important;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15) !important;
        /* v5.0.26: Fill space between input and keyboard, accounting for iOS accessory bar (~44px)
         * The accessory bar (autofill suggestions) sits above the keyboard on iOS Safari/Chrome
         * We can't hide it, but we can ensure our content doesn't get covered by it */
        --ios-accessory-bar-height: 44px;

        max-height: calc(100vh - var(--mobile-dropdown-top, 184px) - var(--keyboard-height, 0px) - var(--ios-accessory-bar-height) - 10px) !important;
    }

    /* Ensure all slot-machine-inline children are also visible */
    body.mobile-v10-active .slot-machine-inline *,
    body.mobile-v10-active .slot-machine-inline.active * {
        visibility: visible !important;
    }

    /* Ensure specific child containers display correctly */
    body.mobile-v10-active .slot-machine-inline .slot-machine-container {
        display: flex !important;
        flex-direction: column !important;
        /* v5.0.19: Fill the fixed height set by top/bottom positioning */
        height: 100% !important;
    }

    body.mobile-v10-active .slot-machine-inline .slot-machine-items {
        display: block !important;
        overflow-y: auto !important;
        /* v5.0.9: Fill available space and scroll from top */
        flex: 1 !important;
        min-height: 0 !important;
        /* v5.0.11 FIX: Force light theme */
        background: #ffffff !important;
    }

    /* v5.0.11 FIX: Force light theme on header */
    body.mobile-v10-active .slot-machine-header {
        padding: 10px 16px !important;
        min-height: 40px !important;
        background: #f8f8f8 !important;
        color: #1a1a1a !important;
        border-bottom: 1px solid #e0e0e0 !important;
    }

    /* v5.0.28: Ultra-compact header when keyboard is open - just show X button */
    body.mobile-v10-active.keyboard-open .slot-machine-header {
        padding: 4px 12px !important;
        min-height: 28px !important;
    }

    /* v5.0.31: Keep breadcrumb visible but compact when keyboard open (was hidden in v5.0.28, breaking UX) */
    body.mobile-v10-active.keyboard-open .slot-machine-breadcrumb {
        flex: 1 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        font-size: 13px !important;
    }

    body.mobile-v10-active.keyboard-open .slot-machine-close {
        width: 24px !important;
        height: 24px !important;
        font-size: 16px !important;
    }

    /* v5.0.9: Smaller close button to save space */
    body.mobile-v10-active .slot-machine-close {
        width: 28px !important;
        height: 28px !important;
        font-size: 18px !important;
    }

    /* v5.0.11 FIX: Force light theme on breadcrumb */
    body.mobile-v10-active .slot-machine-breadcrumb {
        font-size: 14px !important;
        color: #333333 !important;
    }

    /* v5.0.11 FIX: Force light theme on close button */
    body.mobile-v10-active .slot-machine-close {
        color: #666666 !important;
        background: transparent !important;
    }

    /* v5.0.31: Keyboard-open breadcrumb styling moved up to consolidated rule */

    /* v5.0.11 FIX: Force light theme on ALL slot items
     * Chrome dark mode was applying dark background with dark text = unreadable
     */
    body.mobile-v10-active .slot-item {
        min-height: 52px !important;
        padding: 12px 16px !important;
        border-bottom: 1px solid #f0f0f0 !important;
        /* CRITICAL: Force light background and dark text */
        background: #ffffff !important;
        color: #1a1a1a !important;
    }

    /* v5.0.9: Item name styling */
    body.mobile-v10-active .slot-item-name {
        font-size: 16px !important;
        font-weight: 500 !important;
        color: #1a1a1a !important;
    }

    /* v5.0.9: Item subtitle/meta styling */
    body.mobile-v10-active .slot-item-count,
    body.mobile-v10-active .slot-item-options {
        font-size: 13px !important;
        color: #888 !important;
    }

    /* v5.0.9: Price styling - make it prominent */
    body.mobile-v10-active .slot-item-price {
        font-size: 15px !important;
        font-weight: 600 !important;
        color: #2e7d32 !important;
    }

    /* v5.0.9: Fabric filter area - compact on mobile */
    body.mobile-v10-active .fabric-filter-row1,
    body.mobile-v10-active .fabric-filter-row2 {
        padding: 8px 12px !important;
        gap: 8px !important;
    }

    /* v5.0.9: Filter chips - smaller */
    body.mobile-v10-active .fabric-filter-chip {
        padding: 6px 12px !important;
        font-size: 13px !important;
        min-height: 32px !important;
    }

    /* Chat container visible by default - LLM paradigm works normally */
    /* Hide mobile-ui when in chat mode (controlled by JS) */
    body.mobile-v10-active.chat-mode .mobile-ui {
        display: none !important;
    }

    body.mobile-v10-active.chat-mode .chat-container,
    body.mobile-v10-active.chat-mode #chatContainer {
        display: flex !important;
    }

    /* In autocomplete mode, hide chat and show mobile UI */
    body.mobile-v10-active:not(.chat-mode) .chat-container,
    body.mobile-v10-active:not(.chat-mode) #chatContainer {
        display: none !important;
    }
}

/* ============================================
   v5.0.31: NEW PRICING BUTTON (Mobile Post-Pricing UX)
   ============================================ */

.new-pricing-btn {
    display: none;
}

/* v5.0.130: Mobile chat ALWAYS shows "New Pricing" button, NEVER the old text input.
 * Previously depended on body.pricing-complete class which caused intermittent flashes
 * of the old input during loading. Now purely CSS-driven: when chat is active on mobile,
 * the button is always visible. Desktop is unaffected (main.css hides button with !important). */
@media (max-width: 768px) {
    /* Show "New Pricing" button whenever chat view is active on mobile */
    #chatContainer.active .chat-input-container .new-pricing-btn {
        display: flex !important;
        align-items: center;
        justify-content: center;
        gap: 10px;
        width: 100%;
        padding: 16px 24px;
        margin: 0;
        background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
        color: white;
        border: none;
        border-radius: 12px;
        font-size: 17px;
        font-weight: 600;
        cursor: pointer;
        box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
        transition: all 0.2s ease;
    }

    #chatContainer.active .chat-input-container .new-pricing-btn:active {
        transform: scale(0.98);
        box-shadow: 0 2px 8px rgba(99, 102, 241, 0.4);
    }

    #chatContainer.active .chat-input-container .new-pricing-btn svg {
        width: 22px;
        height: 22px;
        stroke-width: 2.5;
    }

    /* Always hide the old chat input on mobile when in chat mode */
    #chatContainer.active .chat-input-wrapper {
        display: none !important;
    }

    /* Style the chat-input-container to center the button */
    #chatContainer.active .chat-input-container {
        padding: 12px 16px 20px 16px !important;
        background: #f8f9fa !important;
        border-top: 1px solid #e5e7eb !important;
    }
}

/* ============================================
   v5.0.51: MOBILE VERSION NUMBER DISPLAY
   Use media query (more reliable than class-based)
   ============================================ */

@media (max-width: 768px) {
    .brand-version {
        display: inline-block !important;
        font-size: 9px !important;
        color: #C67E5F !important;
        font-family: monospace !important;
        margin-left: 6px !important;
        opacity: 0.8 !important;
        vertical-align: middle !important;
    }

    /* Put version on same line as brand name */
    .brand-info {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        gap: 2px 6px !important;
    }

    /* Hide tagline on mobile to save space */
    .brand-tagline {
        display: none !important;
    }
}

/* ============================================
   PRINT STYLES (hide mobile UI)
   ============================================ */

@media print {
    .mobile-ui {
        display: none !important;
    }
}