/**
 * 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;
    max-width: 100vw;
    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;
    position: relative;
}

.mobile-help-link::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 44px;
    height: 44px;
    transform: translate(-50%, -50%);
}

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

/* ROOT-FIX Step 6a (IMPL-STEP6 F3): phone 📋 Reference button — present only when window.SOFIA_REF_V2 is on,
   so these rules match nothing with the flag off. Same visual weight as the "?", 44 x 44 tap area, and a
   10 px margin so its tap area does not overlap the "?" one (24 + 10 gap + 10 margin = 44 between centres). */
.mobile-ref-btn {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0 10px 0 0;
    font-size: 13px;
    line-height: 1;
    background: transparent;
    border: 1px solid #ddd;
    border-radius: 6px;
    cursor: pointer;
    flex-shrink: 0;
    position: relative;
    -webkit-tap-highlight-color: transparent;
}

.mobile-ref-btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 44px;
    height: 44px;
    transform: translate(-50%, -50%);
}

.mobile-ref-btn: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);
}

/* 27 Sep 2026 (J2): "Ask" beside the fabric box — same slot as desktop's landing Ask */
.mobile-fabric-ask { flex: 0 0 auto; height: var(--input-height); min-height: 44px; min-width: 64px; padding: 0 18px;
    border: none; border-radius: 24px; background: var(--color-primary); color: #fff;
    font-size: var(--input-font-size); font-weight: 600; cursor: pointer;
    /* UI390: JS shows it as inline-flex; centre the label (it sat clipped on the pill's top edge at 390) */
    align-items: center; justify-content: center; line-height: 1; }
.mobile-fabric-ask:disabled { opacity: .45; cursor: default; }
.mobile-fabric-ask:active { background: var(--color-primary-dark); }

/* ============================================
   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 */
}

/* 3 Oct 2026 PROD-POLISH (flag SOFIA_PROD_POLISH, <html class="sofia-prod-polish">): the price sheet from the
 * shared £500 band table shows a cloth count per band; an empty band is greyed and not selectable. */
html.sofia-prod-polish .price-option .option-count {
    margin-left: auto;
    margin-right: 8px;
    font-size: 14px;
    color: var(--color-text-muted, #777);
}
html.sofia-prod-polish .price-option.price-option-empty {
    cursor: default;
    opacity: 0.45;
}

/* 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.active:not(.slot-machine-soft-hidden) {
        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 */
        /* UI390 (29 Sep 2026): 50vh left 45-60 % of a 390 x 844 phone blank above a 3-row list. Grow up to
           the same edge the keyboard-open layout uses (--mobile-dropdown-top, below header + chips + input),
           so the sheet still never covers the chips or the input. */
        max-height: calc(100vh - var(--mobile-dropdown-top, 184px)) !important;
        max-height: calc(100dvh - var(--mobile-dropdown-top, 184px)) !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;
        /* UI390 (29 Sep 2026): slotmachine.css caps the container at 40vh on phones, which silently overrode the
           sheet's own max-height (the sheet stopped at 340px of an 844px screen). The sheet above owns the cap.
           UI-LEFTOVERS (30 Sep 2026): `none` let the container grow to its full content (7,958 px of rows for the
           product list) because the sheet has only a max-height, so `height: 100%` resolves to auto; the sheet
           clipped it and the list could no longer scroll on a phone. Take the sheet's own cap instead. */
        max-height: inherit !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 {
        /* UI390 (29 Sep 2026): 28px was below the 44px tap minimum for the sheet's only close control.
           44px hit area; the -8px margin keeps the header the same size and the X where it was. */
        width: 44px !important;
        height: 44px !important;
        margin: -8px -8px -8px 0 !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;
    }
    /* UI390 (29 Sep 2026): chat mode hides both headers, but body kept the 60px top padding reserved for
       the fixed header — a blank band at the top of every phone answer that cut scrolled text off at its
       edge. Give the band back (keep the notch inset for home-screen use). */
    body.mobile-v10-active.chat-mode {
        padding-top: env(safe-area-inset-top, 0px) !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;
}

/* Keep the existing follow-up composer under the price card on phones and
 * iPad split view. New Pricing remains a separate secondary action. */
@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;
    }

    #chatContainer.active .chat-input-wrapper {
        display: flex !important;
        order: 0;
        width: 100%;
        min-width: 0;
        gap: 8px;
    }
    #chatContainer.active .chat-send-btn {
        display: flex !important;
        flex: 0 0 44px;
        width: 44px;
        height: 44px;
    }
    #chatContainer.active .chat-input-field {
        min-width: 0;
        min-height: 44px;
        font-size: 16px;
    }
    #chatContainer.active .chat-input-container .new-pricing-btn {
        order: 1;
        padding: 10px 16px;
        min-height: 44px;
        font-size: 15px;
    }

    /* Style the chat-input-container to center the button */
    #chatContainer.active .chat-input-container {
        display: flex;
        flex-direction: column;
        gap: 10px;
        padding: 12px 16px max(12px, env(safe-area-inset-bottom)) 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;
    }
}

/* Identity options: one card per row on phones; alternative line scrolls locally. */
@media (max-width: 768px) {
    .v6-identity-options .v6-identity-grid { grid-template-columns: minmax(0, 1fr); }
    .v6-identity-options button { min-height: 44px; }
    .v6-identity-options .v6-identity-ask { align-items: stretch; }
}

/* Batch 7: closed pickers must leave both answers and the composer clickable. */
body.mobile-v10-active .slot-machine-inline:not(.active),
body.mobile-v10-active .slot-machine-inline.slot-machine-soft-hidden,
body.mobile-v10-active .slot-machine-inline.slot-machine-soft-hidden * {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* G3.18 #60 (blank landing): the phone shell finally has landing guidance
   (welcome + tappable examples, rendered into .mobile-content at creation).
   Hidden once the chat starts, like the rest of the landing. */
.mobile-landing-guide {
    padding: 24px 20px;
    text-align: center;
}
.mobile-landing-welcome {
    font-size: 20px;
    font-weight: 600;
    margin: 0 0 8px;
}
.mobile-landing-hint {
    font-size: 14px;
    opacity: 0.75;
    margin: 0 0 16px;
}
.mobile-landing-example {
    display: block;
    width: 100%;
    min-height: 44px;
    margin: 0 0 10px;
    padding: 10px 14px;
    font-size: 15px;
    text-align: left;
    background: transparent;
    border: 1px solid currentColor;
    border-radius: 10px;
    opacity: 0.9;
}
body.chat-mode .mobile-landing-guide {
    display: none;
}