/* ============================================
   MOBILE RESPONSIVE FIX - BibliaTech
   ===========================================Bible content, whereas the RHS is to the right. I want ot to be the exact same as it was before with the pop-up notes and theuir inital positioning(pasyed Imahe 2   
   Complete mobile-first responsive redesign that:
   - Ensures Bible content spans full width on mobile
   - Removes sidebar margins/padding on mobile
   - Properly centers and spaces content
   - Fixes the content being pushed to the right
   - Works with notes mode as default on desktop
   
   Priority: This file should be loaded after all other CSS files
   to ensure overrides work correctly.
*/

/* ============================================
   MOBILE BREAKPOINTS (max-width: 1024px)
   Phones, tablets, and smaller devices
   ============================================ */

@media (max-width: 1024px) {
    
    /* ==========================================
       CRITICAL: RESET ALL MARGINS AND POSITIONING
       ========================================== */
    
    /* Reset body and html */
    html, body {
        overflow-x: hidden !important;
        width: 100% !important;
        max-width: 100vw !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* Remove notes-mode body offset */
    body.notes-mode-active,
    body.reader-mode-active,
    body.ai-mode-active {
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* Main wrapper - remove ALL sidebar offsets */
    .main-wrapper,
    .main-wrapper.sidebar-collapsed,
    .main-wrapper.sidebar-expanded,
    body.notes-mode-active .main-wrapper,
    body.notes-mode-active:not(.notes-panel-visible) .main-wrapper,
    body.notes-mode-active.notes-panel-visible .main-wrapper,
    body.notes-mode-active .main-wrapper.sidebar-collapsed,
    body.notes-mode-active:not(.notes-panel-visible) .main-wrapper.sidebar-collapsed,
    body.reader-mode-active .main-wrapper,
    body.ai-mode-active .main-wrapper {
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        min-height: 100vh !important;
        transform: none !important;
        left: 0 !important;
    }
    
    /* Ensure notes mode doesn't shift content - comprehensive override */
    body.notes-mode-active .main-wrapper,
    body.notes-mode-active .bible-main-content,
    body.notes-mode-active .bible-book-content,
    body.notes-mode-active .bible-content-wrapper,
    body.notes-mode-active .chapter-content,
    body.notes-mode-active:not(.notes-panel-visible) .main-wrapper,
    body.notes-mode-active:not(.notes-panel-visible) .bible-main-content,
    body.notes-mode-active:not(.notes-panel-visible) .bible-book-content,
    body.notes-mode-active:not(.notes-panel-visible) .bible-content-wrapper,
    body.notes-mode-active:not(.notes-panel-visible) .chapter-content {
        margin-left: 0 !important;
        margin-right: 0 !important;
        transform: none !important;
        left: 0 !important;
        width: 100% !important;
    }
    
    /* Content padding */
    .bible-main-content,
    .bible-book-content,
    .bible-content-wrapper,
    .chapter-content {
        padding-left: 18px !important;
        padding-right: 18px !important;
    }
    
    /* ==========================================
       HIDE DESKTOP ELEMENTS ON MOBILE
       ========================================== */
    
    /* Hide sidebar completely */
    .sidebar,
    .sidebar.collapsed,
    .sidebar.expanded,
    #sidebar,
    nav.sidebar,
    .sidebar-container {
        display: none !important;
        visibility: hidden !important;
        width: 0 !important;
        max-width: 0 !important;
        opacity: 0 !important;
        pointer-events: none !important;
        position: absolute !important;
        left: -9999px !important;
    }
    
    /* Hide top navbar */
    .top-navbar,
    #top-navbar {
        display: none !important;
    }
    
    /* Hide desktop navigation elements */
    .bible-navigation-header,
    .navigation-content,
    .book-title-section,
    .chapter-navigation-section,
    .verse-controls-container,
    .verse-controls-section,
    #chapter-form,
    .chapter-form,
    .compact-book-btn,
    .compact-book-translation-pill,
    .compact-chapter-nav,
    .compact-clear-btn,
    .nav-mode-selector {
        display: none !important;
    }
    
    /* Hide AI panels on mobile (handled separately) */
    .ai-chat-panel,
    #ai-chat-panel,
    .ai-panel {
        display: none !important;
    }
    
    /* Hide notes panel on mobile (too small for side panel) */
    .notes-panel {
        display: none !important;
    }
    
    /* ==========================================
       BIBLE MAIN CONTENT - FULL WIDTH
       ========================================== */
    
    .bible-main-content,
    .bible-content-wrapper,
    .bible-book-content {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
        background: var(--bible-bg-primary, #ffffff) !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        border: none !important;
    }
    
    /* Ensure content wrapper is flush left */
    .bible-content-wrapper {
        padding: 0 !important;
        margin: 0 !important;
    }
    
    /* Remove any centering or max-width constraints */
    .bible-book-content {
        margin-top: 0 !important;
        padding-top: 50px !important; /* Space for mobile hero nav */
    }
    
    /* ==========================================
       CHAPTER CONTENT - OPTIMIZED TYPOGRAPHY
       ========================================== */
    
    .chapter-content {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 100% !important;
        margin: 0 !important;
        padding: 18px !important;
        padding-top: 8px !important;
        padding-bottom: 60px !important; /* Space for floating bottom nav pill */
        box-sizing: border-box !important;
        
        /* Typography */
        font-family: var(--bible-font-family, 'Crimson Text', Georgia, serif) !important;
        font-size: var(--bible-font-size, 16px) !important;
        line-height: var(--bible-line-height, 1.8) !important;
        color: var(--bible-text-primary, #2d1e2f) !important;
        text-align: left !important;
        
        /* Remove desktop styling */
        background: transparent !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        border: none !important;
        
        /* Single column on mobile */
        columns: 1 !important;
        column-gap: 0 !important;
        
        /* Prevent text overflow */
        overflow-wrap: break-word !important;
        word-wrap: break-word !important;
        hyphens: auto !important;
        -webkit-hyphens: auto !important;
    }
    
    /* Poetic content - single column */
    .chapter-content.poetic,
    .chapter-content.poetic.layout-two-column,
    .chapter-content.poetic.layout-auto {
        columns: 1 !important;
        padding-left: 18px !important;
        padding-right: 18px !important;
    }
    
    /* ==========================================
       PARAGRAPHS AND VERSE STYLING
       ========================================== */
    
    .chapter-content p {
        margin: 0 0 1.2em 0 !important;
        padding: 0 !important;
        text-align: left !important;
        text-indent: 0 !important;
        line-height: var(--bible-line-height, 1.8) !important;
    }
    
    /* Verse numbers */
    .chapter-content .v,
    .verse-number {
        font-size: 0.7em !important;
        vertical-align: super !important;
        color: var(--bible-text-verse-num, #7c3aed) !important;
        font-weight: 600 !important;
        margin-right: 4px !important;
        padding: 2px 4px !important;
        border-radius: 3px !important;
        display: inline !important;
        min-width: auto !important;
        cursor: pointer !important;
    }
    
    /* Verse text */
    .verse-text,
    .verse-text-wrapper {
        display: inline !important;
        font-size: inherit !important;
        line-height: inherit !important;
        color: var(--bible-text-primary, #2d1e2f) !important;
    }
    
    /* ==========================================
       MOBILE HERO NAVIGATION - TOP BAR
       ========================================== */
    
    .mobile-hero-navigation {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: relative !important; /* Changed from fixed - scrolls with content */
        top: auto !important;
        left: auto !important;
        right: auto !important;
        height: 48px !important;
        min-height: 48px !important;
        max-height: 48px !important;
        background: var(--theme-bg-card, #ffffff) !important;
        border-bottom: 1px solid var(--theme-border-gentle, rgba(0,0,0,0.08)) !important;
        z-index: 100 !important;
        padding: 0 12px !important;
        align-items: center !important;
        justify-content: space-between !important;
        box-shadow: 0 1px 3px rgba(0,0,0,0.05) !important;
        -webkit-backdrop-filter: blur(8px) !important;
        backdrop-filter: blur(8px) !important;
        width: 100% !important;
        margin: 0 auto !important;
    }
    
    /* Book selector button */
    .mobile-hero-book-section {
        flex: 1 !important;
        display: flex !important;
        align-items: center !important;
        min-width: 0 !important;
    }
    
    .mobile-hero-book-btn {
        background: transparent !important;
        border: 1px solid var(--theme-border-light, rgba(0,0,0,0.1)) !important;
        border-radius: 6px !important;
        padding: 8px 12px !important;
        color: var(--theme-text-primary, #1a1a1a) !important;
        font-size: 13px !important;
        font-weight: 500 !important;
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
        max-width: 180px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        cursor: pointer !important;
        min-height: 36px !important;
        -webkit-tap-highlight-color: transparent !important;
    }
    
    .mobile-hero-book-name {
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    
    /* Chapter navigation section */
    .mobile-hero-chapter-section {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
    }
    
    .mobile-hero-chapter-btn {
        background: transparent !important;
        border: 1px solid var(--theme-border-light, rgba(0,0,0,0.1)) !important;
        border-radius: 6px !important;
        padding: 8px 10px !important;
        min-width: 36px !important;
        min-height: 36px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        color: var(--theme-text-primary, #1a1a1a) !important;
        font-size: 16px !important;
        font-weight: 500 !important;
        cursor: pointer !important;
        -webkit-tap-highlight-color: transparent !important;
    }
    
    .mobile-hero-chapter-btn:disabled {
        opacity: 0.4 !important;
        cursor: not-allowed !important;
    }
    
    .mobile-hero-current-chapter {
        background: var(--accent-bg, rgba(124, 58, 237, 0.1)) !important;
        color: var(--accent-color, #7c3aed) !important;
        font-weight: 600 !important;
        padding: 6px 10px !important;
        border-radius: 6px !important;
        font-size: 13px !important;
        min-width: 28px !important;
        text-align: center !important;
        border: 1px solid var(--accent-color, #7c3aed) !important;
    }
    
    /* ==========================================
       MOBILE BOTTOM NAVIGATION
       ========================================== */
    
    .mobile-bottom-nav,
    .mobile-bottom-nav.nav-visible {
        display: flex !important;
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        height: 70px !important;
        background: rgba(255, 255, 255, 0.98) !important;
        border-top: 1px solid rgba(0,0,0,0.08) !important;
        z-index: 1100 !important;
        justify-content: space-around !important;
        align-items: center !important;
        padding: 8px 12px !important;
        padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important;
        box-shadow: 0 -2px 10px rgba(0,0,0,0.05) !important;
        /* Override the auto-hide behavior - always show navigation */
        transform: translateY(0) !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }
    
    /* Dark theme bottom nav */
    [data-theme="dark"] .mobile-bottom-nav {
        background: rgba(30, 30, 35, 0.98) !important;
        border-top: 1px solid rgba(255,255,255,0.1) !important;
    }
    
    .mobile-nav-item,
    .bottom-nav-item {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 8px 12px !important;
        min-width: 50px !important;
        min-height: 44px !important;
        border-radius: 8px !important;
        color: #6b7280 !important;
        font-size: 10px !important;
        font-weight: 500 !important;
        text-decoration: none !important;
        cursor: pointer !important;
        transition: all 0.2s ease !important;
        -webkit-tap-highlight-color: transparent !important;
    }
    
    .mobile-nav-item.active,
    .bottom-nav-item.active,
    .mobile-nav-item:hover,
    .bottom-nav-item:hover {
        color: #3b82f6 !important;
        background: rgba(59, 130, 246, 0.1) !important;
    }
    
    .mobile-nav-item .nav-icon,
    .bottom-nav-item .nav-icon,
    .bottom-nav-icon {
        width: 22px !important;
        height: 22px !important;
        margin-bottom: 4px !important;
    }
    
    .mobile-nav-item .nav-text,
    .bottom-nav-item .nav-text,
    .bottom-nav-text {
        font-size: 10px !important;
        line-height: 1 !important;
    }
    
    /* ==========================================
       WELCOME/SHALOM PAGE MOBILE ADJUSTMENTS
       ========================================== */
    
    .shalom-welcome,
    .welcome-content {
        padding: 1.5rem !important;
        margin: 0 auto !important;
        max-width: 100% !important;
        min-height: calc(100vh - 150px) !important;
    }
    
    .shalom-title {
        font-size: 2.5rem !important;
        letter-spacing: -2px !important;
    }
    
    .shalom-subtitle {
        font-size: 1.1rem !important;
        max-width: 100% !important;
    }
    
    .custom-book-selector {
        width: 85% !important;
        max-width: 280px !important;
    }
    
    .book-selector-btn {
        height: 56px !important;
        font-size: 1rem !important;
    }
    
    .shalom-or {
        font-size: 0.9rem !important;
        margin: 1rem 0 !important;
    }
    
    .shalom-search-container {
        width: 100% !important;
        max-width: 320px !important;
    }
    
    .shalom-search-input {
        width: 100% !important;
        padding: 12px 16px !important;
        font-size: 14px !important;
    }
    
    /* ==========================================
       DARK THEME MOBILE ADJUSTMENTS
       ========================================== */
    
    [data-theme="dark"] .chapter-content {
        background: transparent !important;
        color: var(--bible-dark-text-primary, #e2e8f0) !important;
        border: none !important;
        box-shadow: none !important;
    }
    
    [data-theme="dark"] .bible-main-content,
    [data-theme="dark"] .bible-content-wrapper,
    [data-theme="dark"] .bible-book-content {
        background: var(--bible-dark-bg-primary, #121212) !important;
        border: none !important;
        box-shadow: none !important;
    }
    
    [data-theme="dark"] .mobile-hero-navigation {
        background: rgba(26, 26, 26, 0.98) !important;
        border-bottom: 1px solid rgba(255,255,255,0.1) !important;
    }
    
    [data-theme="dark"] .mobile-hero-book-btn,
    [data-theme="dark"] .mobile-hero-chapter-btn {
        color: #e5e5e5 !important;
        border-color: rgba(255,255,255,0.15) !important;
    }
    
    /* ==========================================
       HIDE ALL FLOATING ACTION BUTTONS ON MOBILE
       ========================================== */
    
    /* Hide all FABs and floating buttons on mobile */
    .create-note-btn,
    .view-all-notes-btn,
    #view-all-notes-btn,
    .mode-toggle-btn-standalone,
    .mode-options-radial,
    .mode-selector-overlay,
    .passive-study-fab,
    .notes-graph-fab,
    .floating-action-btn,
    .bible-study-graph-btn,
    .ai-mini-panel,
    #notes-graph-fab,
    #passive-study-btn,
    #create-note-btn,
    [class*="fab-"],
    [class*="-fab"],
    button[class*="floating"],
    .note-sticky,
    .note-floating,
    .passive-study-toggle,
    #passive-study-toggle {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }
    
    /* ==========================================
       VERSE SELECTION MOBILE INTERFACE
       Hide by default, show only when active
       ========================================== */
    
    .mobile-verse-ai {
        position: fixed !important;
        bottom: 70px !important; /* Above bottom nav */
        left: 0 !important;
        right: 0 !important;
        background: var(--bg-color, white) !important;
        border-radius: 16px 16px 0 0 !important;
        transform: translateY(100%) !important;
        transition: transform 0.3s ease !important;
        z-index: 2000 !important;
        box-shadow: 0 -2px 20px rgba(0,0,0,0.1) !important;
        max-height: 200px !important;
        padding: 16px !important;
        padding-bottom: 20px !important;
        /* HIDDEN BY DEFAULT - only show when active */
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
    }
    
    .mobile-verse-ai.active {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
    
    /* ==========================================
       TOUCH INTERACTIONS
       ========================================== */
    
    /* Improve touch targets */
    button, 
    a,
    .mobile-nav-item,
    .bottom-nav-item,
    .mobile-hero-book-btn,
    .mobile-hero-chapter-btn {
        -webkit-tap-highlight-color: transparent !important;
        touch-action: manipulation !important;
    }
    
    /* Verse tap feedback */
    .chapter-content .v:active,
    .verse-text:active,
    .verse-text-wrapper:active {
        opacity: 0.7 !important;
    }
    
    /* Selected verse styling - PREVENT all font/layout changes on highlight */
    .chapter-content .v.selected,
    .verse-text.selected,
    .verse-text-wrapper.selected,
    .verse-text.underline,
    .verse-text-wrapper.underline {
        background: var(--user-highlight-selected, rgba(124, 58, 237, 0.2)) !important;
        border-radius: 4px !important;
        /* Lock font to the user's chosen font — NOT inherit (parent may differ) */
        font-family: var(--bible-font-family, 'Crimson Text', Georgia, serif) !important;
        font-size: var(--bible-font-size, 1.1rem) !important;
        font-weight: var(--bible-font-weight, 400) !important;
        font-style: normal !important;
        line-height: var(--bible-line-height, 1.9) !important;
        letter-spacing: var(--bible-letter-spacing, normal) !important;
        color: var(--bible-text-primary) !important;
        /* Kill all transforms and animations that shift/scale text */
        transform: none !important;
        animation: none !important;
        transition: background-color 0.15s ease !important;
        box-shadow: none !important;
        text-shadow: none !important;
        /* Prevent layout shifts from padding/margin/border/display changes */
        padding: inherit !important;
        margin: inherit !important;
        border: none !important;
        border-left: none !important;
    }

    /* Verse number selected - keep inline-block display like base state */
    .chapter-content .v.selected {
        display: inline-block !important;
        padding: 3px 6px !important;
        margin-right: .4rem !important;
        border: 1px solid var(--user-highlight-border, rgba(124, 58, 237, 0.3)) !important;
    }

    /* Verse text selected/underline - keep inline display like base state */
    .verse-text.selected,
    .verse-text-wrapper.selected,
    .verse-text.underline,
    .verse-text-wrapper.underline {
        display: inline !important;
        margin-left: 4px !important;
        padding: 0 !important;
        text-decoration: none !important;
    }

    /* Dark mode - use the same explicit var() values */
    [data-theme="dark"] .chapter-content .v.selected,
    [data-theme="dark"] .verse-text.selected,
    [data-theme="dark"] .verse-text-wrapper.selected,
    [data-theme="dark"] .verse-text.underline,
    [data-theme="dark"] .verse-text-wrapper.underline,
    [data-theme="dark"] .verse-text.selected *,
    [data-theme="dark"] .verse-text-wrapper.selected *,
    [data-theme="dark"] .verse-text.underline *,
    [data-theme="dark"] .verse-text-wrapper.underline * {
        color: var(--bible-text-primary) !important;
        font-family: var(--bible-font-family, 'Crimson Text', Georgia, serif) !important;
        font-size: var(--bible-font-size, 1.1rem) !important;
        font-weight: var(--bible-font-weight, 400) !important;
        text-shadow: none !important;
        animation: none !important;
        transform: none !important;
    }

    /* Neutralize mobile-verse-touch.css animations and display changes */
    .v,
    .verse-text,
    .verse-text-wrapper {
        will-change: auto !important;
        backface-visibility: visible !important;
        perspective: none !important;
    }

    .v.selected,
    .verse-text.selected,
    .verse-text-wrapper.selected {
        animation: none !important;
    }
}

/* ============================================
   TABLET BREAKPOINTS (769px - 1024px)
   ============================================ */

@media (min-width: 769px) and (max-width: 1024px) {
    
    /* Similar reset for tablets */
    .main-wrapper,
    .main-wrapper.sidebar-collapsed,
    .main-wrapper.sidebar-expanded,
    body.notes-mode-active .main-wrapper,
    body.notes-mode-active:not(.notes-panel-visible) .main-wrapper,
    body.notes-mode-active.notes-panel-visible .main-wrapper {
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        width: 100% !important;
        transform: none !important;
    }
    
    /* Hide sidebar on tablets */
    .sidebar {
        display: none !important;
    }
    
    /* Hide all FABs on tablets too */
    .create-note-btn,
    .view-all-notes-btn,
    #view-all-notes-btn,
    .mode-toggle-btn-standalone,
    .passive-study-fab,
    .notes-graph-fab,
    .floating-action-btn,
    .ai-mini-panel,
    .passive-study-toggle,
    #passive-study-toggle {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }
    
    /* Full width content */
    .bible-main-content,
    .bible-content-wrapper,
    .bible-book-content {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
    }
    
    .chapter-content {
        max-width: 100% !important;
        margin: 0 auto !important;
        padding: 24px !important;
        padding-bottom: 60px !important;
    }
    
    /* Show mobile navigation on tablets too */
    .mobile-hero-navigation {
        display: flex !important;
    }
    
    .mobile-bottom-nav {
        display: flex !important;
    }
    
    /* Hide desktop nav */
    .top-navbar,
    .bible-navigation-header {
        display: none !important;
    }
}

/* ============================================
   LANDSCAPE MOBILE ADJUSTMENTS
   ============================================ */

@media (max-width: 926px) and (orientation: landscape) {
    
    /* Reduce header height in landscape */
    .mobile-hero-navigation {
        height: 40px !important;
        min-height: 40px !important;
        max-height: 40px !important;
        padding: 0 12px !important;
    }
    
    .mobile-hero-book-btn,
    .mobile-hero-chapter-btn {
        min-height: 32px !important;
        padding: 6px 10px !important;
        font-size: 12px !important;
    }
    
    /* Reduce bottom nav in landscape */
    .mobile-bottom-nav {
        height: 56px !important;
    }
    
    .mobile-nav-item,
    .bottom-nav-item {
        padding: 4px 8px !important;
    }
    
    .mobile-nav-item .nav-icon,
    .bottom-nav-item .nav-icon {
        width: 18px !important;
        height: 18px !important;
    }
    
    .mobile-nav-item .nav-text,
    .bottom-nav-item .nav-text {
        font-size: 9px !important;
    }
    
    /* Adjust content padding for landscape */
    .bible-book-content {
        padding-top: 44px !important;
    }
    
    .chapter-content {
        padding-bottom: 50px !important;
    }
}

/* ============================================
   SMALL PHONE BREAKPOINT (max-width: 375px)
   iPhone SE, small Android phones
   ============================================ */

@media (max-width: 375px) {
    
    .mobile-hero-navigation {
        padding: 0 8px !important;
    }
    
    .mobile-hero-book-btn {
        max-width: 140px !important;
        font-size: 12px !important;
        padding: 6px 10px !important;
    }
    
    .mobile-hero-chapter-btn {
        min-width: 32px !important;
        min-height: 32px !important;
        font-size: 14px !important;
    }
    
    .mobile-hero-current-chapter {
        font-size: 12px !important;
        padding: 4px 8px !important;
    }
    
    .chapter-content {
        padding: 14px !important;
        font-size: 15px !important;
    }
    
    .shalom-title {
        font-size: 2rem !important;
    }
    
    .shalom-subtitle {
        font-size: 1rem !important;
    }
}

/* ============================================
   iOS SAFARI SPECIFIC FIXES
   ============================================ */

@supports (-webkit-touch-callout: none) {
    
    /* Fix iOS viewport issues */
    html {
        height: -webkit-fill-available !important;
    }
    
    body {
        min-height: -webkit-fill-available !important;
    }
    
    /* Safe area padding for notched devices */
    .mobile-hero-navigation {
        padding-top: env(safe-area-inset-top, 0) !important;
        height: calc(48px + env(safe-area-inset-top, 0)) !important;
    }
    
    .mobile-bottom-nav {
        padding-bottom: calc(8px + env(safe-area-inset-bottom, 0)) !important;
        height: calc(70px + env(safe-area-inset-bottom, 0)) !important;
    }
    
    .bible-book-content {
        padding-top: calc(50px + env(safe-area-inset-top, 0)) !important;
    }
    
    .chapter-content {
        padding-bottom: calc(60px + env(safe-area-inset-bottom, 0)) !important;
    }
    
    /* Prevent iOS zoom on input focus */
    input, select, textarea {
        font-size: 16px !important;
    }
    
    /* Fix iOS momentum scrolling */
    .chapter-content {
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior: contain !important;
    }
}

/* ============================================
   ACCESSIBILITY IMPROVEMENTS
   ============================================ */

@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .mobile-hero-navigation,
    .mobile-bottom-nav {
        border-width: 2px !important;
    }
    
    .chapter-content .v {
        border: 1px solid currentColor !important;
    }
}

/* ============================================
   REAL-TIME COLLABORATION — MOBILE STYLES
   Presence bar, remote highlights, name tags
   ============================================ */

@media (max-width: 1024px) {

    /* ---- Presence bar: sticky banner above chapter text ---- */
    .collab-presence-bar {
        position: sticky !important;
        top: 0 !important;
        z-index: 200 !important;
        display: flex !important;
        align-items: center !important;
        gap: 0.4rem !important;
        padding: 6px 14px !important;
        margin: 0 !important;
        border-radius: 0 !important;
        font-size: 0.75rem !important;
        background: #f0fdf4 !important;
        border-bottom: 1px solid #bbf7d0 !important;
        border-top: none !important;
        border-left: none !important;
        border-right: none !important;
        box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important;
    }

    [data-theme="dark"] .collab-presence-bar {
        background: #14332a !important;
        border-bottom-color: #166534 !important;
        color: #86efac !important;
    }

    .collab-presence-dot {
        width: 7px !important;
        height: 7px !important;
        flex-shrink: 0 !important;
    }

    /* ---- Remote user verse highlights ---- */
    .collab-remote-highlight {
        background-color: var(--collab-bg, rgba(99, 102, 241, 0.18)) !important;
        border-radius: 2px !important;
        transition: background-color 0.2s ease !important;
    }

    span.v.collab-remote-highlight {
        border-left: 2px solid var(--collab-border, #6366f1) !important;
        padding-left: 6px !important;
        margin-left: -8px !important;
    }

    .collab-text-wrap.collab-remote-highlight {
        border-left: none !important;
        padding-left: 0 !important;
        margin-left: 0 !important;
    }

    /* ---- Floating name tag on remote user's selection ---- */
    .collab-name-tag {
        position: absolute !important;
        top: -1.2em !important;
        left: -2px !important;
        font-size: 0.58rem !important;
        padding: 1px 5px 1px !important;
        border-radius: 3px 3px 3px 0 !important;
        white-space: nowrap !important;
        pointer-events: none !important;
        z-index: 60 !important;
        max-width: 120px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    /* ---- Collab author badge on mobile note cards ---- */
    .note-collab-author {
        font-size: 0.62rem !important;
        padding: 1px 6px !important;
    }
}

/* Small phones: further compact the presence bar */
@media (max-width: 375px) {
    .collab-presence-bar {
        font-size: 0.7rem !important;
        padding: 5px 10px !important;
    }
    
    .collab-name-tag {
        font-size: 0.52rem !important;
        max-width: 90px !important;
    }
}

/* ============================================
   MOBILE NOTES OVERLAY
   ============================================ */

@media (max-width: 1024px) {
    .mobile-notes-overlay {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        background: rgba(0, 0, 0, 0.5) !important;
        z-index: 2000 !important;
        display: flex !important;
        align-items: flex-end !important;
        justify-content: center !important;
        opacity: 0 !important;
        visibility: hidden !important;
        transition: opacity 0.3s ease, visibility 0.3s ease !important;
    }
    
    .mobile-notes-overlay.active,
    .mobile-notes-overlay:not(.hidden) {
        opacity: 1 !important;
        visibility: visible !important;
    }
    
    .mobile-notes-overlay.hidden {
        display: none !important;
    }
    
    .mobile-notes-panel {
        width: 100% !important;
        max-height: 140px !important;
        background: var(--bg-color, #ffffff) !important;
        border-radius: 14px 14px 0 0 !important;
        box-shadow: 0 -1px 6px rgba(0, 0, 0, 0.04) !important;
        transform: translateY(100%) !important;
        transition: transform 0.28s ease !important;
        overflow: hidden !important;
    }
    
    .mobile-notes-overlay.active .mobile-notes-panel,
    .mobile-notes-overlay:not(.hidden) .mobile-notes-panel,
    .mobile-notes-panel.visible {
        transform: translateY(0) !important;
    }
    
    .mobile-notes-header {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 16px 20px !important;
        border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
        background: var(--bg-color, #ffffff) !important;
    }
    
    .mobile-notes-title {
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        margin: 0 !important;
        font-size: 18px !important;
        font-weight: 600 !important;
        color: var(--text-primary, #1a1a1a) !important;
    }
    
    .mobile-notes-title svg {
        color: #3b82f6 !important;
    }
    
    .mobile-notes-close {
        width: 36px !important;
        height: 36px !important;
        border: none !important;
        background: rgba(0, 0, 0, 0.05) !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer !important;
        color: #666 !important;
        transition: all 0.2s ease !important;
    }
    
    .mobile-notes-close:hover {
        background: rgba(0, 0, 0, 0.1) !important;
    }
    
    .mobile-notes-content {
        flex: 1 !important;
        overflow-y: auto !important;
        padding: 20px !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    .mobile-notes-empty {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 40px 20px !important;
        text-align: center !important;
    }
    
    .mobile-notes-empty .empty-icon {
        margin-bottom: 16px !important;
        color: #ccc !important;
    }
    
    .mobile-notes-empty p {
        margin: 0 !important;
        color: #666 !important;
        font-size: 16px !important;
    }
    
    .mobile-notes-empty .empty-hint {
        margin-top: 8px !important;
        font-size: 14px !important;
        color: #999 !important;
    }
    
    .mobile-notes-list {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
    }
    
    /* Mobile note item cards */
    .mobile-note-item {
        background: rgba(124, 58, 237, 0.05) !important;
        border: 1px solid rgba(124, 58, 237, 0.15) !important;
        border-radius: 12px !important;
        padding: 14px 16px !important;
        transition: all 0.2s ease !important;
    }
    
    .mobile-note-item:hover,
    .mobile-note-item:active {
        background: rgba(59, 130, 246, 0.1) !important;
        border-color: rgba(59, 130, 246, 0.3) !important;
    }
    
    .mobile-note-item .note-reference {
        font-weight: 600 !important;
        font-size: 14px !important;
        color: #3b82f6 !important;
        margin-bottom: 8px !important;
    }
    
    .mobile-note-item .note-content {
        font-size: 14px !important;
        line-height: 1.5 !important;
        color: #333 !important;
        margin-bottom: 8px !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 3 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
    }
    
    .mobile-note-item .note-date {
        font-size: 12px !important;
        color: #888 !important;
    }
    
    /* Dark theme for mobile notes */
    [data-theme="dark"] .mobile-notes-panel {
        background: #1a1a1a !important;
    }
    
    [data-theme="dark"] .mobile-notes-header {
        background: #1a1a1a !important;
        border-bottom-color: rgba(255, 255, 255, 0.1) !important;
    }
    
    [data-theme="dark"] .mobile-notes-title {
        color: #e5e5e5 !important;
    }
    
    [data-theme="dark"] .mobile-notes-close {
        background: rgba(255, 255, 255, 0.1) !important;
        color: #aaa !important;
    }
    
    [data-theme="dark"] .mobile-notes-empty p {
        color: #999 !important;
    }
    
    [data-theme="dark"] .mobile-notes-empty .empty-icon {
        color: #555 !important;
    }
    
    [data-theme="dark"] .mobile-note-item {
        background: rgba(59, 130, 246, 0.08) !important;
        border-color: rgba(59, 130, 246, 0.15) !important;
    }
    
    [data-theme="dark"] .mobile-note-item .note-reference {
        color: #93c5fd !important;
    }
    
    [data-theme="dark"] .mobile-note-item .note-content {
        color: #e5e5e5 !important;
    }
    
    [data-theme="dark"] .mobile-note-item .note-date {
        color: #888 !important;
    }
}