/**
 * Whendoist Mobile Styles
 * Mobile-first responsive styles for touch devices.
 *
 * Contents:
 * 1. iOS/Android Fixes
 * 2. Dynamic Viewport Height
 * 3. Bottom Sheet Component
 * 4. Mobile Tab Navigation
 * 5. Task Swipe Actions
 * 6. Touch Feedback
 * 7. Gesture Onboarding
 * 8. Pull to Refresh
 * 9. Mobile-specific Overrides
 */

/* =============================================================================
   1. iOS/Android Fixes
   ============================================================================= */

/* Prevent iOS zoom on input focus (inputs < 16px trigger zoom) */
@media (hover: none) and (pointer: coarse) {
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="search"],
    input[type="tel"],
    input[type="url"],
    input[type="date"],
    input[type="datetime-local"],
    input[type="time"],
    textarea,
    select {
        font-size: 16px !important;
    }
}

/* Disable double-tap zoom and pinch-to-zoom globally on touch devices */
* {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

/* Disable iOS callout on long press for images/links */
img, a {
    -webkit-touch-callout: none;
}

/* Prevent text selection during gestures */
.is-swiping,
.is-dragging {
    -webkit-user-select: none;
    user-select: none;
}

/* =============================================================================
   2. Dynamic Viewport Height
   ============================================================================= */

/* CSS custom property for true viewport height (set by JS) */
:root {
    --vh: 1vh;
    --app-height: 100vh;
}

/* Use dynamic height for full-screen elements */
.full-height {
    height: calc(var(--vh, 1vh) * 100);
    height: var(--app-height, 100vh);
}

/* =============================================================================
   3. Bottom Sheet Component
   ============================================================================= */

.sheet-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1100;
    background: rgba(0, 0, 0, 0);
    backdrop-filter: blur(0);
    visibility: hidden;
    transition: background 0.3s ease, backdrop-filter 0.3s ease, visibility 0s 0.3s;
}

.sheet-backdrop.visible {
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(2px);
    visibility: visible;
    transition: background 0.3s ease, backdrop-filter 0.3s ease, visibility 0s;
}

.bottom-sheet {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1101;
    background: var(--bg-surface, #fff);
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.15);
    max-height: 90vh;
    overflow: hidden;
    transform: translateY(100%);
    visibility: hidden;
    transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1), visibility 0s 0.3s;
    padding-bottom: env(safe-area-inset-bottom);
}

.bottom-sheet.visible {
    transform: translateY(0);
    visibility: visible;
    transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1), visibility 0s;
}

.sheet-handle {
    display: flex;
    justify-content: center;
    padding: 12px 0 8px;
    cursor: grab;
}

.sheet-handle-bar {
    width: 36px;
    height: 4px;
    background: var(--border-default, #ddd);
    border-radius: 2px;
}

.sheet-header {
    text-align: center;
    padding: 8px 16px 16px;
    border-bottom: 1px solid var(--border-subtle, #eee);
}

.sheet-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary, #111);
    margin: 0;
}

.sheet-task-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary, #111);
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 280px;
    margin: 0 auto;
}

.sheet-content {
    padding: 16px;
    overflow-y: auto;
    max-height: calc(90vh - 80px);
    -webkit-overflow-scrolling: touch;
}

/* Action sheet grid */
.action-sheet-actions {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    padding: 8px 0;
}

.sheet-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 16px 8px;
    background: var(--bg-panel, #f5f5f5);
    border: 1px solid var(--border-subtle, #eee);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.15s ease;
    -webkit-appearance: none;
    appearance: none;
}

.sheet-action:active {
    background: var(--interactive-pressed, #e5e5e5);
    transform: scale(0.95);
}

.sheet-action .action-icon {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sheet-action .action-icon .icon {
    width: 24px;
    height: 24px;
    stroke: var(--text-primary, #111);
}

.sheet-action .action-label {
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--text-secondary, #666);
}

.sheet-action--danger .action-icon .icon {
    stroke: var(--danger, #dc2626);
}

.sheet-action--danger .action-label {
    color: var(--danger, #dc2626);
}

.sheet-cancel {
    width: 100%;
    height: 48px;
    margin-top: 8px;
    background: var(--bg-panel, #f5f5f5);
    border: 1px solid var(--border-default, #ddd);
    border-radius: 12px;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-secondary, #666);
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition: all 0.15s ease;
}

.sheet-cancel:active {
    background: var(--interactive-pressed, #e5e5e5);
}

/* =============================================================================
   4. Mobile Tab Navigation
   ============================================================================= */

.mobile-tabs {
    display: none;
}

@media (max-width: 900px) {
    .mobile-tabs {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 100;
        /* Invisible container — pills and FAB float freely */
        background: transparent;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        padding: 8px 16px;
        padding-bottom: calc(8px + env(safe-area-inset-bottom, 0));
        border: none;
        box-shadow: none;
        gap: 8px;
        justify-content: center;
        align-items: center;
    }
}

.mobile-tab {
    flex: none; /* Compact pill — don't stretch */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    height: auto;
    min-height: 44px;
    min-width: 80px; /* Equal width — both pills match Schedule (the wider one) */
    padding: 6px 16px;
    border-radius: 16px;
    /* Each pill has its own glass since the container is invisible */
    background: rgba(255, 255, 255, 0.35);
    -webkit-backdrop-filter: blur(40px) saturate(180%);
    backdrop-filter: blur(40px) saturate(180%);
    border: 0.5px solid rgba(0, 0, 0, 0.05);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    color: #999;
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: color 0.15s ease, background 0.15s ease;
    -webkit-appearance: none;
    appearance: none;
    position: relative; /* anchor for badge */
    /* Override Pico margin */
    margin: 0 !important;
    margin-bottom: 0 !important;
}

.mobile-tab:active {
    transform: scale(0.95);
}

/* Active tab — white glass pill with accent text (matches energy selector) */
.mobile-tab.active {
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(0, 0, 0, 0.04);
    color: var(--primary, #6D5EF6);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05),
                0 0.5px 1px rgba(0, 0, 0, 0.03);
}

/* Telegram: icons ~24px, clean line style */
.tab-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

/* Telegram: tiny labels ~10px below icons */
.tab-label {
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.01em;
}

/* Embedded FAB in tab bar center */
.mobile-tab-add {
    display: none;
}

@media (max-width: 900px) {
    .mobile-tab-add {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        border-radius: 50%;
        background: var(--primary, #6D5EF6);
        color: white;
        font-size: 1.4rem;
        font-weight: 400;
        line-height: 1;
        border: none;
        box-shadow: 0 2px 8px rgba(109, 94, 246, 0.25);
        margin-top: -2px;
        flex-shrink: 0;
        cursor: pointer;
        transition: transform 0.15s ease, box-shadow 0.15s ease;
        -webkit-appearance: none;
        appearance: none;
        /* Override Pico margin */
        margin-bottom: 0 !important;
    }

    .mobile-tab-add:active {
        transform: scale(0.92);
        box-shadow: 0 1px 4px rgba(109, 94, 246, 0.3);
    }

    /* Hide standalone FAB on mobile — it's now in the tab bar */
    .add-task-btn {
        display: none !important;
    }
}

/* =============================================================================
   4a. PWA Safe Area - iOS PWA Handling
   ============================================================================= */

/* PWA standalone mode - header absorbs safe area with min-height
   Key insight: Use min-height (not height) so header expands naturally
   when safe-area padding is added, rather than squishing content.
   Use max() to preserve mobile padding while adding safe area space. */
@media (display-mode: standalone) {
    .site-header {
        /* Add notch space on top, preserve mobile padding (20px) on sides */
        padding-top: calc(12px + env(safe-area-inset-top, 0px));
        padding-left: max(env(safe-area-inset-left, 0px), 20px);
        padding-right: max(env(safe-area-inset-right, 0px), 20px);
        padding-bottom: 8px;
        /* min-height: 60px is set in app.css mobile section */
    }

    /* Bottom safe area for mobile tabs - already handled in main mobile-tabs rule */
}

/* =============================================================================
   4b. Mobile Layout - Tasks Page
   ============================================================================= */

@media (max-width: 900px) {
    /* Prevent body scroll — only page containers should scroll.
       NOTE: overflow:hidden on html/body propagates to the iOS viewport and
       shrinks it by safe-area-inset-top in PWA standalone mode.
       The standalone block below overrides this to overflow:visible. */
    html, body {
        overflow: hidden !important;
        overscroll-behavior: none !important;
    }

    /* Kill Pico CSS padding on main — Pico's `body > main` (specificity 0,0,2)
       beats our `main { padding: 0 }` (0,0,1). Page containers handle their own
       spacing; main padding creates gaps in PWA mode. */
    body > main {
        padding-block: 0 !important;
    }

    /* Override dashboard grid - single column, full height */
    .tasks-layout {
        display: flex !important;
        flex-direction: column !important;
        grid-template-columns: unset !important;
        grid-template-rows: unset !important;
        height: auto !important;
        overflow: visible !important;
    }

    /* Hide gradient separator */
    .tasks-layout::before {
        display: none;
    }

    /* Hide both panels by default */
    .tasks-panel,
    .calendar-panel {
        display: none !important;
    }

    /* Show active panel — NOW the scroll container (was .task-list-container).
       Content scrolls behind the fixed site-header for visible glass blur.
       No padding-top: the task-list-header's own padding-top handles the
       fixed-header offset AND provides the seamless glass layer. */
    .tasks-panel.mobile-active {
        display: block !important;
        height: 100vh;
        height: var(--app-height, 100vh);
        overflow-y: auto !important;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        border-radius: 0;
        border: none;
        padding-bottom: 0;
    }

    /* Bottom fade gradient — seamless transition into energy selector / tab bar.
       position: fixed is safe (no ancestor has transform/filter/backdrop-filter).
       z-index 98: above scroll content, below energy (99) and tabs (100).
       pointer-events: none keeps scrolling and taps working. */
    .tasks-panel.mobile-active::after {
        content: '';
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: calc(120px + env(safe-area-inset-bottom, 0px));
        background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,1));
        z-index: 98;
        pointer-events: none;
    }

    /* Spacer at the bottom of the scroll area so the last task can be
       scrolled above the glass elements (energy pill + tab bar). */
    .task-list-scroll::after {
        content: '';
        display: block;
        height: calc(120px + env(safe-area-inset-bottom, 0px));
    }

    .calendar-panel.mobile-active {
        display: flex !important;
        flex-direction: column;
        height: 100vh;
        height: var(--app-height, 100vh);
        overflow: visible !important;
        border-radius: 0;
        border: none;
        background: transparent;
        padding-top: var(--header-h);
        padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px));
    }

    /* Glass header backdrop for calendar — matches task-list-header::before */
    .calendar-panel.mobile-active::before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: calc(var(--header-h) + 20px);
        background: rgba(255, 255, 255, 0.45);
        -webkit-backdrop-filter: blur(20px) saturate(180%);
        backdrop-filter: blur(20px) saturate(180%);
        -webkit-mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
        mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
        z-index: 5;
        pointer-events: none;
    }

    /* Bottom fade for calendar — mask-image on the carousel itself.
       Unlike position:fixed overlays (which iOS compositing layers from
       -webkit-overflow-scrolling:touch can paint over), mask-image modifies
       the element's own rendered output. The content fades to transparent,
       showing the page background (white in light mode, dark in dark mode)
       through automatically — no separate dark-mode rule needed. */
    .calendar-carousel {
        -webkit-mask-image: linear-gradient(to bottom, black 0, black calc(100% - 200px), transparent 100%) !important;
        mask-image: linear-gradient(to bottom, black 0, black calc(100% - 200px), transparent 100%) !important;
    }

    /* Clear day-calendar backgrounds on mobile so the mask fade reveals the
       page background cleanly (instead of fading an opaque tinted surface). */
    .day-calendar,
    .day-calendar.today,
    .day-calendar.past,
    .day-calendar.future {
        background: transparent !important;
    }

    /* Transparent hour-grid so the fade blends through calendar content */
    .hour-grid {
        background: transparent !important;
    }

    /* Supplementary gradient overlay — provides extra white wash on browsers
       where position:fixed renders above the carousel compositing layer.
       On iOS Safari this may be hidden behind the carousel, but the mask-image
       above is the primary fade mechanism. */
    .calendar-panel.mobile-active .calendar-fade-gradient {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: calc(120px + env(safe-area-inset-bottom, 0px));
        background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,1));
        z-index: 98;
        pointer-events: none;
    }

    /* Calendar toolbar (Today + zoom) — lift above mobile tab bar.
       Desktop rule is bottom: 1rem (in dashboard.css), which sits behind
       the fixed tab bar on mobile.  !important needed because dashboard.css
       loads AFTER mobile.css and would win at equal specificity. */
    .calendar-toolbar {
        bottom: calc(1rem + 60px + env(safe-area-inset-bottom, 0px)) !important;
    }

    /* PWA mode - stable 100vh (no dynamic address bar) */
    @media (display-mode: standalone) {
        /* In PWA standalone there's no dynamic address bar, so 100vh is stable.
           Using var(--app-height) can leave a gap if innerHeight doesn't include
           the bottom safe area. 100dvh is more accurate on iOS 15.4+. */
        .tasks-panel.mobile-active,
        .calendar-panel.mobile-active {
            height: 100vh !important;
            height: 100dvh !important;
        }
    }

    /* Task list container — no longer the scroll container (tasks-panel is).
       Just a wrapper; overflow visible so sticky children work. */
    .task-list-container {
        overflow: visible !important;
        transform: none;
        will-change: auto;
    }

    /* Task list header — sticky at top:0, with padding-top that extends the
       glass behind the transparent fixed site-header. This creates ONE
       continuous glass layer covering both header areas — no seam.
       padding-top = header height + 2px gap pushes sort-row below the
       fixed header. No margin-top trick needed: without padding-top on
       .tasks-panel, the content box starts at 0 so sticky can reach 0. */
    .task-list-header {
        position: sticky;
        top: 0;
        z-index: 10;
        padding: calc(var(--header-h) + 2px) 8px 0 12px !important;
        background: rgba(255, 255, 255, 0.45) !important;
        -webkit-backdrop-filter: blur(20px) saturate(180%);
        backdrop-filter: blur(20px) saturate(180%);
        will-change: auto;
        border: none !important;
    }

    /* Remove solid background cover pseudo-element — not needed */
    .task-list-header::before {
        display: none !important;
    }

    /* Hide spectrum bar — no separator between the two transparent headers */
    .task-list-header::after {
        display: none !important;
    }

    /* Filter bar row - flex override for mobile */
    .header-row1 {
        display: flex !important;
        align-items: center;
        gap: 6px;
        min-height: auto;
        padding: 0 !important;
        width: 100%;
    }

    /* Header domain label — shows current domain name merged into sort header.
       Always in the flex flow but collapsed when inactive (flex-grow: 0,
       opacity: 0). JS drives opacity + flex-grow inline based on scroll
       position for smooth scroll-proportional reveal. No CSS transition —
       it would lag behind the scroll-driven animation. */
    .header-domain-label {
        display: inline-flex;
        align-items: center;
        flex: 0 1 0px;
        min-width: 0;
        font-size: 0.87rem;
        font-weight: 600;
        color: var(--text-primary);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        line-height: 1;
        opacity: 0;
    }

    .header-domain-label.active {
        /* opacity and flex-grow driven by JS inline styles */
    }

    /* Task count pill inside sticky domain label — matches .task-count in domain headers */
    .header-domain-count {
        font-size: 0.73rem;
        font-weight: 500;
        color: var(--text-muted);
        background: rgba(15, 23, 42, 0.05);
        padding: 1px 5px;
        border-radius: 9999px;
        margin-left: 4px;
        line-height: 1.4;
        flex-shrink: 0;
    }

    /* Hide kebab menu on mobile - not needed */
    .header-actions {
        display: none !important;
    }

    /* Header task label takes available space */
    .header-task {
        flex: 1;
        min-width: 0;
        margin-left: 0 !important;
    }

    /* Header meta columns - match task-meta sizing exactly */
    .header-meta {
        display: flex !important;
        gap: 4px !important;
        flex-shrink: 0;
        margin-left: auto;
    }

    /* Show full sort labels by default.  Only Duration needs compact ("DUR")
       because "DURATION" overflows 32px at 0.5rem uppercase. */
    .header-sort .label-full { display: inline !important; }
    .header-sort .label-compact { display: none !important; }
    .header-sort[data-sort="duration"] .label-full { display: none !important; }
    .header-sort[data-sort="duration"] .label-compact { display: inline !important; }

    /* Sort arrow — absolutely positioned inside button so it never affects
       the button's flow width.  No layout shift when sort changes.
       !important overrides dashboard.css :hover rule (higher specificity). */
    .header-sort .sort-icon {
        position: absolute !important;
        right: 1px;
        top: 50%;
        transform: translateY(-50%);
        width: auto !important;
        margin: 0 !important;
        opacity: 0 !important;
        overflow: visible !important;
        transition: opacity 0.15s ease !important;
    }
    .header-sort.active .sort-icon {
        opacity: 1 !important;
    }

    /* Hide gear on mobile */
    .settings-anchor { display: none !important; }

    .header-meta .header-sort {
        font-size: 0.67rem !important;
        padding: 2px 4px !important;
        min-height: auto;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        border: none !important;
        border-radius: 0 !important;
    }

    .header-meta .header-sort::before {
        content: '';
        position: absolute;
        top: -16px;
        bottom: -16px;
        left: -4px;
        right: -4px;
    }

    /* Taller calendar header on mobile with bigger nav buttons */
    .calendar-day-header {
        padding: 10px 0.75rem;
    }

    .day-header-nav {
        gap: 8px;
    }

    .day-nav-btn {
        width: 28px;
        height: 28px;
        border-radius: 6px;
        opacity: 0.8;
        position: relative;
    }

    .day-nav-btn svg {
        width: 18px;
        height: 18px;
    }

    /* Expand invisible touch target: 28px + 2×10px = 48px */
    .day-nav-btn::before {
        content: '';
        position: absolute;
        top: -10px;
        bottom: -10px;
        left: -10px;
        right: -10px;
    }

    .domain-add-btn {
        position: relative !important; /* beat all:unset in dashboard.css (loads after mobile.css) */
    }
    .domain-add-btn::before {
        content: '';
        position: absolute;
        top: -12px;
        bottom: -12px;
        left: -12px;
        right: -12px;
    }

    .calendar-quick-action::before {
        content: '';
        position: absolute;
        top: -12px;
        bottom: -12px;
        left: -12px;
        right: -12px;
    }

    /* Match column widths to task-meta spans — !important to beat dashboard.css */
    .header-sort[data-sort="duration"] { width: 38px !important; min-width: 38px !important; }
    .header-sort[data-sort="impact"] { width: 30px !important; min-width: 30px !important; }
    .header-sort[data-sort="clarity"] { width: 66px !important; min-width: 66px !important; }

    /* Floating glass energy selector — Telegram-style frosted glass.
       Mostly opaque with subtle blur, matching the tab bar treatment.
       Content scrolls behind it (padding-bottom: 0 + scroll spacer below). */
    .energy-wrapper {
        position: fixed !important;
        bottom: calc(62px + env(safe-area-inset-bottom, 0px));
        left: 50%;
        transform: translateX(-50%);
        z-index: 99;
        margin: 0 !important;
        padding: 4px !important;
        background: rgba(255, 248, 235, 0.35) !important;
        -webkit-backdrop-filter: blur(40px) saturate(180%);
        backdrop-filter: blur(40px) saturate(180%);
        border: 0.5px solid rgba(255, 245, 220, 0.4) !important;
        border-radius: 18px;
        box-shadow: 0 4px 20px rgba(120, 90, 40, 0.06),
                    inset 0 0.5px 0 rgba(255, 250, 230, 0.4);
        gap: 2px;
    }

    /* Hide label and dots — the pills carry text labels now */
    .energy-wrapper .energy-label,
    .energy-wrapper .clarity-dots {
        display: none !important;
    }

    /* Strip chrome from inner pill container */
    .header-energy__pills {
        background: transparent !important;
        border: none !important;
        padding: 0 !important;
        gap: 2px;
    }

    /* Segment pills — taller with room for emoji + label.
       width: auto overrides dashboard.css fixed 26px width. */
    .energy-wrapper .energy-pill {
        width: auto !important;
        height: 34px !important;
        padding: 0 14px !important;
        border-radius: 12px !important;
        font-size: 0.93rem !important;
        background: transparent !important;
        box-shadow: none !important;
        transition: background 0.15s ease, box-shadow 0.15s ease;
        gap: 4px;
        white-space: nowrap;
    }

    /* Text labels via ::after */
    .energy-wrapper .energy-pill[data-energy="1"]::after { content: "Zombie"; }
    .energy-wrapper .energy-pill[data-energy="2"]::after { content: "Normal"; }
    .energy-wrapper .energy-pill[data-energy="3"]::after { content: "Focus"; }

    .energy-wrapper .energy-pill::after {
        font-size: 0.87rem;
        font-weight: 600;
        letter-spacing: 0.01em;
        color: var(--text-secondary);
    }

    /* Active segment — warm glass pill */
    .energy-wrapper .energy-pill.active {
        background: rgba(255, 252, 245, 0.45) !important;
        box-shadow: 0 1px 4px rgba(120, 90, 40, 0.06),
                    0 0.5px 1px rgba(120, 90, 40, 0.03) !important;
    }

    .energy-wrapper .energy-pill.active::after {
        color: var(--text-primary);
    }

    /* Override dashboard.css mode-tinted active states on mobile */
    .energy-pill.active[data-energy="1"],
    .energy-pill.active[data-energy="2"],
    .energy-pill.active[data-energy="3"] {
        background: rgba(255, 252, 245, 0.45) !important;
        box-shadow: 0 1px 4px rgba(120, 90, 40, 0.06),
                    0 0.5px 1px rgba(120, 90, 40, 0.03) !important;
    }

    /* Task item - compact row with flex layout, matching Thoughts view.
       user-select: none prevents iOS text-selection / Siri Intelligence
       from racing with our long-press handler. */
    .task-item {
        display: flex !important;
        grid-template-columns: unset !important;
        align-items: center;  /* Center content vertically */
        padding: 11px 8px !important;
        gap: 8px;
        min-height: 44px;
        overflow: hidden;
        position: relative;
        -webkit-user-select: none;
        user-select: none;
        -webkit-touch-callout: none;
    }

    /* Hide complete gutter on mobile (swipe replaces it) */
    .task-item .complete-gutter {
        display: none !important;
    }

    /* Task content - single line with due date inline */
    .task-item .task-content {
        flex: 1;
        min-width: 0; /* Allow text truncation */
        display: flex;
        flex-direction: row;  /* Inline layout */
        align-items: center;
        gap: 6px;
    }

    .task-item .task-text {
        white-space: normal !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 1.0rem;
        flex: 1;
        min-width: 0;
        line-height: 1.3;
    }

    /* ── Subtask container — mobile overrides ── */
    .subtask-container {
        margin-left: 8px;
        padding-left: 8px;
        border-left-width: 1.5px;
    }

    .expand-toggle {
        min-height: 44px;
        padding: 8px 12px;
    }

    /* Due date inline and smaller */
    .task-item .task-due {
        font-size: 0.8rem;
        color: var(--text-muted);
        white-space: nowrap;
        flex-shrink: 0;
    }

    /* Task metadata - compact inline on mobile - show all columns.
       !important on gap/margin to beat dashboard.css which loads after mobile.css. */
    .task-item .task-meta {
        display: flex !important;
        align-items: center;
        gap: 4px !important;
        flex-shrink: 0;
        margin-left: auto;
    }

    /* Compact metadata chips - smaller on mobile with fixed widths.
       !important to beat dashboard.css base styles (border, padding-left). */
    .task-item .task-meta > span {
        font-size: 0.73rem !important;
        padding: 2px 4px !important;
        height: auto !important;
        min-height: 16px;
        text-align: center;
        display: flex !important;
        align-items: center;
        justify-content: center;
        border: none !important;
        border-radius: 0 !important;
    }

    /* Fixed widths to match header columns — !important to beat dashboard.css */
    .task-item .task-meta .meta-duration { width: 38px !important; min-width: 38px !important; }
    .task-item .task-meta .meta-impact { width: 30px !important; min-width: 30px !important; }
    .task-item .task-meta .meta-clarity { width: 66px !important; min-width: 66px !important; display: inline-flex !important; }

    /* Hide actions column on mobile (long-press context menu replaces it) */
    .task-item .task-actions {
        display: none !important;
    }

    /* Show impact as colored rail on left - FULL HEIGHT */
    .task-item::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 2px;
        border-radius: 2px 0 0 2px;
        opacity: 0.6;
    }

    .task-item.impact-1::before { background: var(--impact-critical); }
    .task-item.impact-2::before { background: var(--impact-high); }
    .task-item.impact-3::before { background: var(--impact-medium); }
    .task-item.impact-4::before { background: var(--impact-low, #94a3b8); }

    /* Adjust padding for rail */
    .task-item {
        padding-left: 12px !important;
    }

    /* Task due date - compact */
    .task-due {
        font-size: 0.8rem;
        opacity: 0.7;
    }

    /* Add task row - full width */
    .add-task-row {
        padding: 6px 8px !important;
        margin: 2px 4px !important;
    }

    /* Scheduled section separator — override grid to flex on mobile.
       Hide column labels (DATE/CLARITY/DUR/IMPACT) since task rows use
       flex layout that doesn't align with grid columns. */
    .section-separator--sched {
        display: flex !important;
        flex-wrap: wrap;
        gap: 4px 8px;
    }
    .section-separator--sched .sep-col-label,
    .section-separator--sched .sep-col-spacer {
        display: none !important;
    }
    .section-separator--sched .sched-label-group .sep-col-label {
        display: none !important;
    }

    /* Telegram-style hairline separators between tasks */
    .task-item + .task-item {
        border-top: 0.5px solid rgba(15, 23, 42, 0.06);
    }

    [data-theme="dark"] .task-item + .task-item {
        border-top-color: rgba(248, 250, 252, 0.06);
    }

    /* Project groups - cleaner on mobile */
    .project-group {
        margin-bottom: 0 !important;
    }

    .project-header {
        padding: 12px 12px;
    }

    /* Project header z-index for sticky (below task-list-header z-index: 10) */
    .project-header {
        z-index: 5;
    }

    /* Plan My Day banner — compact on mobile */
    .pmd-banner {
        padding: 8px 10px !important;
        margin: 4px 4px 2px !important;
        border-radius: 8px;
    }
    .pmd-banner-title { font-size: 0.87rem !important; }
    .pmd-banner-sub { font-size: 0.8rem !important; }
    .pmd-banner-btn { font-size: 0.8rem !important; padding: 4px 10px !important; }

    /* Section separators — mobile-scoped overrides for dashboard.css rules */
    .section-sep-label { font-size: 0.8rem !important; }
    .section-count { font-size: 0.75rem !important; }
}

/* =============================================================================
   5. Task Swipe Actions
   ============================================================================= */

/* Swipe action indicators */
.task-item {
    position: relative;
    overflow: visible;
}

.task-item .swipe-indicator {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.15s ease;
    pointer-events: none;
}

/* Complete indicator (swipe right reveals on left) */
.task-item .swipe-indicator--complete {
    left: -80px;
    background: linear-gradient(90deg, rgba(109, 94, 246, 0.15), transparent);
}

.task-item .swipe-indicator--complete::after {
    content: "✓";
    font-size: 1.5rem;
    color: var(--primary, #6D5EF6);
}

/* Schedule indicator (swipe left reveals on right) */
.task-item .swipe-indicator--schedule {
    right: -80px;
    background: linear-gradient(-90deg, rgba(109, 94, 246, 0.15), transparent);
}

.task-item .swipe-indicator--schedule::after {
    content: "";
    width: 24px;
    height: 24px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236D5EF6' stroke-width='2'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
    background-size: contain;
    transition: transform 0.15s ease;
}

/* Show indicators during swipe */
.task-item.swiping-right .swipe-indicator--complete,
.task-item.swiping-left .swipe-indicator--schedule {
    opacity: 1;
}

/* "Almost there" phase — icon scales up slightly */
.task-item.swipe-almost .swipe-indicator--complete::after,
.task-item.swipe-almost .swipe-indicator--schedule::after {
    transform: scale(1.15);
}

/* Task visual feedback during swipe */
.task-item.swipe-complete {
    background: rgba(109, 94, 246, 0.08) !important;
}

.task-item.swipe-schedule {
    background: rgba(109, 94, 246, 0.08) !important;
}

/* Departing/deleting animation */
.task-item.departing,
.task-item.deleting {
    transition: height 0.3s ease, opacity 0.3s ease, margin 0.3s ease;
    overflow: hidden;
}

/* Scheduling highlight */
.task-item.scheduling {
    outline: 2px solid var(--primary, #6D5EF6);
    outline-offset: -2px;
    background: rgba(109, 94, 246, 0.05);
}

/* =============================================================================
   6. Touch Feedback
   ============================================================================= */

/* Base touch feedback */
[data-touch-feedback] {
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.1s ease, background 0.15s ease;
}

[data-touch-feedback]:active {
    transform: scale(0.97);
    background: var(--interactive-pressed, rgba(0, 0, 0, 0.05));
}

/* Touch-only hover alternative */
@media (hover: none) and (pointer: coarse) {
    /* Remove hover states on touch devices */
    .task-item:hover {
        background: var(--bg-surface, #fff);
    }

    /* Add active states instead */
    .task-item:active {
        background: var(--interactive-pressed, rgba(0, 0, 0, 0.03));
    }

    /* Fix icon button styling on mobile - theme-aware colors */
    .icon-btn {
        -webkit-appearance: none;
        appearance: none;
        background: var(--bg-surface) !important;
        border: 1px solid var(--border-default) !important;
        color: var(--text-secondary) !important;
        outline: none;
    }

    .icon-btn svg {
        stroke: var(--text-secondary) !important;
    }

    .icon-btn:focus,
    .icon-btn:active {
        background: var(--bg-panel) !important;
        outline: none;
    }

    /* Thoughts page icon buttons */
    .thoughts-page .icon-btn,
    .bubble-actions .icon-btn {
        background: var(--bg-surface) !important;
        border: 1px solid var(--border-default) !important;
        color: var(--text-secondary) !important;
    }

    .thoughts-page .icon-btn svg,
    .bubble-actions .icon-btn svg {
        stroke: var(--text-secondary) !important;
    }

    .thoughts-page .icon-btn:active,
    .bubble-actions .icon-btn:active {
        background: var(--bg-panel) !important;
        transform: scale(0.95);
    }
}

/* =============================================================================
   7. Gesture Onboarding (Coachmarks)
   ============================================================================= */

.gesture-coachmark {
    position: fixed;
    left: 16px;
    right: 16px;
    z-index: 1200;
    background: var(--bg-elevated, #fff);
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    animation: coachmark-appear 0.3s ease;
}

@keyframes coachmark-appear {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
}

.coachmark-content {
    text-align: center;
}

.coachmark-gesture {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 10px 0;
}

.gesture-arrow {
    font-size: 1.5rem;
    color: var(--primary, #6D5EF6);
    animation: gesture-pulse 1s ease infinite;
}

.gesture-arrow.left {
    animation-direction: reverse;
}

@keyframes gesture-pulse {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(8px); }
}

.gesture-label {
    font-size: 0.875rem;
    color: var(--text-secondary, #666);
}

.gesture-icon {
    font-size: 1.25rem;
}

.coachmark-hint {
    font-size: 0.75rem;
    color: var(--text-muted, #999);
    margin: 16px 0 12px;
}

.coachmark-dismiss {
    padding: 10px 24px;
    background: var(--primary, #6D5EF6);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
}

/* 7a. Swipe hint animation — plays once on first visit */
@keyframes gesture-hint-swipe {
    0%   { transform: translateX(0); }
    25%  { transform: translateX(60px); }
    55%  { transform: translateX(60px); }
    80%  { transform: translateX(-40px); }
    95%  { transform: translateX(-40px); }
    100% { transform: translateX(0); }
}

.gesture-hint-active {
    animation: gesture-hint-swipe 2.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    z-index: 2;
}

/* 7b. Swipe hint tooltip */
.gesture-hint-tooltip {
    position: fixed;
    z-index: 1200;
    background: var(--bg-elevated, #fff);
    color: var(--text-secondary, #666);
    font-size: 0.75rem;
    line-height: 1.4;
    padding: 10px 14px;
    border-radius: 10px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity 0.2s ease, transform 0.2s ease;
    pointer-events: none;
}

.gesture-hint-tooltip.visible {
    opacity: 1;
    transform: translateY(0);
}

/* 7c. Permanent swipe peek affordance — subtle right edge on touch devices */
@media (hover: none) and (pointer: coarse) {
    .task-item::after {
        content: '';
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        width: 2px;
        background: var(--primary, #6D5EF6);
        opacity: 0.15;
        border-radius: 0 4px 4px 0;
        pointer-events: none;
    }
}

/* =============================================================================
   8. Pull to Refresh
   ============================================================================= */

.pull-to-refresh {
    position: fixed;
    top: 60px; /* Below header */
    left: 50%;
    transform: translateX(-50%) translateY(-60px);
    z-index: 50;
    background: var(--bg-surface, #fff);
    border-radius: 20px;
    padding: 8px 16px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
    display: flex;
    align-items: center;
    gap: 8px;
    transition: transform 0.3s ease, opacity 0.3s ease;
    /* Hidden by default - only show when pulling */
    opacity: 0;
    pointer-events: none;
}

.pull-to-refresh.dragging {
    transition: none;
}

.pull-to-refresh.visible {
    transform: translateX(-50%) translateY(12px);
    opacity: 1;
    pointer-events: auto;
    will-change: transform, opacity;
}

.pull-to-refresh.refreshing {
    transform: translateX(-50%) translateY(12px);
    opacity: 1;
}

.ptr-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid var(--border-default, #ddd);
    border-top-color: var(--primary, #6D5EF6);
    border-radius: 50%;
}

.refreshing .ptr-spinner {
    animation: ptr-spin 0.8s linear infinite;
}

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

.ptr-text {
    font-size: 0.75rem;
    color: var(--text-secondary, #666);
}

/* =============================================================================
   9. Mobile-specific Overrides
   ============================================================================= */

@media (max-width: 900px) {
    /* Header height token — used for fixed header offset */
    :root {
        --header-h: 44px;
    }

    /* Site header — fixed, TRANSPARENT. Glass comes from the unified
       .task-list-container::before pseudo. z-index 100 keeps nav text
       above the glass layer. */
    .site-header {
        position: fixed !important;
        left: 0;
        right: 0;
        max-width: none !important;
        background: transparent !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
        border-bottom: none !important;
        box-shadow: none !important;
        min-height: var(--header-h) !important;
        padding-top: 8px !important;
        padding-right: 16px !important;
        padding-bottom: 0 !important;
        padding-left: 16px !important;
    }

    /* PWA standalone: restore notch clearance (must come after longhand rule) */
    @media (display-mode: standalone) {
        :root {
            --header-h: calc(44px + env(safe-area-inset-top, 0px));
        }

        .site-header {
            padding-top: calc(12px + env(safe-area-inset-top, 0px)) !important;
        }

        html,
        body {
            background-color: var(--bg-surface, #fff);
            min-height: 0 !important;
            /* CRITICAL iOS PWA fix: Pico CSS (overflow-x:hidden on :root) and
               the mobile body-scroll-lock above (overflow:hidden !important)
               both propagate overflow:hidden to the viewport per CSS spec.
               On iOS PWA standalone, this shrinks the viewport by
               safe-area-inset-top (59px on iPhone 15 Pro Max), making
               100dvh/innerHeight=873 instead of 932. Also kill height:100%
               from the body-scroll-lock — it constrains body to the shrunken
               viewport size. See docs/PWA-VIEWPORT-FIX.md */
            overflow: visible !important;
            height: auto !important;
        }

        /* All page containers — use --app-height (set to screen.height by
           the inline <script> in <head> and mobile-core.js).  On iOS PWA
           standalone, innerHeight/100dvh can underreport by safe-area-inset-top
           (59px on iPhone 15 Pro Max).  screen.height is always correct.
           Falls back to 100vh if JS hasn't run yet.
           IMPORTANT: these must remain position:static (in-flow) so that
           html/body have non-zero content height.  See docs/PWA-VIEWPORT-FIX.md */
        .tasks-panel.mobile-active,
        .calendar-panel.mobile-active,
        .thoughts-page,
        .analytics-page,
        .settings-page {
            height: var(--app-height, 100vh) !important;
        }
    }

    /* Nav pill — fully transparent on glass header (matches task-list-header) */
    .header-nav {
        background: transparent !important;
    }

    /* Hide desktop-only elements */
    .desktop-only {
        display: none !important;
    }

    /* Nav items — keep visual 24px height, expand touch target via ::before */
    .nav-item {
        display: inline-flex;
        align-items: center;
        position: relative;
        border-bottom: 2px solid transparent !important;
        border-radius: 0 !important;
    }

    /* Invisible 44px touch target (same pattern as .header-sort) */
    .nav-item::before {
        content: '';
        position: absolute;
        top: -10px;
        bottom: -10px;
        left: -4px;
        right: -4px;
    }

    /* Active nav — underline indicator instead of grey background pill */
    .nav-item.active {
        background: transparent !important;
        box-shadow: none !important;
        color: var(--primary) !important;
        border-bottom-color: var(--primary) !important;
    }

    /* Clear persistent focus/active states after tap (iOS) */
    .nav-item:focus,
    .nav-item:active,
    .nav-item:focus-visible {
        outline: none !important;
        background: transparent !important;
        box-shadow: none !important;
    }
}

@media (max-width: 580px) {
    .mobile-tabs {
        padding: 8px 12px;
        padding-bottom: calc(8px + env(safe-area-inset-bottom, 0));
    }

    .mobile-tab {
        padding: 6px 14px;
        min-height: 40px;
        min-width: 76px;
    }

    /* Edge-to-edge container — reclaim horizontal padding */
    .container-fluid {
        padding-left: env(safe-area-inset-left, 0px) !important;
        padding-right: env(safe-area-inset-right, 0px) !important;
    }

    .tasks-layout {
        padding: 0 !important;
        margin-bottom: 0 !important;
    }

    .task-list-container {
        padding: 0 !important;
    }

    /* Flatten domain cards - borderless sections with sticky headers */
    .project-group {
        border: none !important;
        border-radius: 0 !important;
        background: transparent !important;
        margin-bottom: 0 !important;
        overflow: visible !important;
    }

    /* Domain header — non-sticky; domain name merges into task-list-header via JS */
    .project-header {
        position: relative;
        z-index: auto;
        border-bottom: none !important;
        border-radius: 0 !important;
        padding: 8px 12px 8px 16px !important;
        min-height: 36px !important;
    }

    /* Thin divider between groups instead of card borders */
    .project-group + .project-group {
        border-top: 1px solid var(--border-default);
        margin-top: 2px;
        padding-top: 0;
    }

    .add-task-row {
        margin: 2px 0 !important;
        border: none !important;
        border-radius: 0 !important;
    }

    /* Full-height panels — content scrolls behind glass tab bar */
    .tasks-panel.mobile-active {
        height: 100vh;
        height: var(--app-height, 100vh);
        padding-bottom: 0;
    }

    .calendar-panel.mobile-active {
        height: 100vh;
        height: var(--app-height, 100vh);
        padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px));
    }

    .calendar-toolbar {
        bottom: calc(1rem + 56px + env(safe-area-inset-bottom, 0px)) !important;
    }

    /* Floating energy pill — smaller tab bar at 580px */
    .energy-wrapper {
        bottom: calc(64px + env(safe-area-inset-bottom, 0px)) !important;
    }

    @media (display-mode: standalone) {
        .tasks-panel.mobile-active,
        .calendar-panel.mobile-active,
        .thoughts-page,
        .analytics-page,
        .settings-page {
            height: var(--app-height, 100vh) !important;
        }
    }

    /* Thoughts — tighter horizontal padding */
    .bubble-row {
        padding: 3px 4px !important;
    }
    .bubble-actions .icon-btn {
        min-width: 44px;
        min-height: 44px;
    }

    /* Analytics — zero container padding */
    .analytics-page .page-surface {
        padding: 0 8px !important;
    }

    /* Settings — tighter */
    .settings-row {
        padding: 10px 12px !important;
    }
    .settings-section-label {
        padding: 12px 12px 6px !important;
    }
    .settings-title {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
}

/* Foldable device support */
@media (horizontal-viewport-segments: 2) {
    .tasks-layout {
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: env(fold-width);
    }
}

/* Landscape tablet optimization */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
    .tasks-layout {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
    }

    .tasks-panel,
    .calendar-panel {
        display: flex !important;
    }

    .mobile-tabs {
        display: none;
    }

    /* Revert floating energy pill — inline header position */
    .energy-wrapper {
        position: static !important;
        transform: none !important;
        background: transparent !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
        border: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        padding: 0 !important;
    }

    .energy-wrapper .energy-label,
    .energy-wrapper .clarity-dots {
        display: flex !important;
    }

    .energy-wrapper .energy-pill::after {
        content: none !important;
    }

    .energy-wrapper .energy-pill {
        height: 20px !important;
        padding: 0 !important;
        width: 26px !important;
        border-radius: 4px !important;
        font-size: 0.75rem !important;
    }

    .header-energy__pills {
        background: var(--border-subtle) !important;
        border: 1px solid var(--border-default) !important;
        border-radius: 5px !important;
        padding: 1px !important;
    }
}

/* =============================================================================
   10. Safe Area Support
   ============================================================================= */

@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .bottom-sheet {
        padding-bottom: env(safe-area-inset-bottom);
    }

    .mobile-tabs {
        /* Safe area handled by parent */
    }
}

/* =============================================================================
   11. Reduced Motion Support
   ============================================================================= */

@media (prefers-reduced-motion: reduce) {
    .bottom-sheet,
    .sheet-backdrop,
    .gesture-coachmark,
    .gesture-arrow,
    .gesture-hint-active,
    .gesture-hint-tooltip,
    .pull-to-refresh,
    .task-item,
    .energy-wrapper,
    .energy-wrapper .energy-pill {
        transition: none !important;
        animation: none !important;
    }
}

/* =============================================================================
   12. Pico CSS Overrides for Mobile
   ============================================================================= */

@media (max-width: 900px) {
    /* Bubble action buttons - remove Pico margin */
    .thoughts-page .icon-btn,
    .bubble-actions .icon-btn {
        margin: 0 !important;
        margin-bottom: 0 !important;
    }

    /* Settings page icon buttons - theme-aware colors */
    .settings-page .icon-btn,
    .panel-row .icon-btn {
        -webkit-appearance: none;
        appearance: none;
        background: var(--bg-surface) !important;
        border: 1px solid var(--border-default) !important;
        color: var(--text-secondary) !important;
        margin: 0 !important;
        margin-bottom: 0 !important;
    }

    .settings-page .icon-btn svg,
    .panel-row .icon-btn svg {
        width: 14px;
        height: 14px;
        stroke: var(--text-secondary) !important;
    }

    .settings-page .icon-btn:active,
    .panel-row .icon-btn:active {
        background: var(--bg-panel) !important;
        transform: scale(0.95);
    }

    /* All buttons - override Pico margin */
    button.mobile-tab,
    button.mobile-tab-add,
    button.icon-btn,
    .mobile-tabs button,
    .bubble-actions button {
        margin: 0 !important;
        margin-bottom: 0 !important;
    }

    /* ── Thoughts Page — Chat Layout ── */
    /* IMPORTANT: Do NOT use position:fixed here — it removes the element
       from normal flow, collapsing html/body to 0px height.  On iOS PWA
       standalone this triggers a viewport-shrink bug (59px shorter).
       height-based sizing keeps the element in-flow so html/body have
       content height and the viewport stays full.  See docs/PWA-VIEWPORT-FIX.md */
    .thoughts-page {
        height: 100vh;
        height: var(--app-height, 100vh);
        overflow: hidden !important;
        padding: 0 !important;
        margin: 0 !important;
        max-width: none !important;
    }

    /* Chat container — full viewport */
    .thoughts-chat {
        height: 100%;
        width: 100%;
    }

    /* Glass header backdrop — tall with soft gradient fade.
       mask-image fades out the bottom so blur transitions smoothly. */
    .thoughts-chat::before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: calc(var(--header-h) + 80px);
        background: rgba(255, 255, 255, 0.45);
        -webkit-backdrop-filter: blur(20px) saturate(180%);
        backdrop-filter: blur(20px) saturate(180%);
        -webkit-mask-image: linear-gradient(to bottom, black 55%, transparent 100%);
        mask-image: linear-gradient(to bottom, black 55%, transparent 100%);
        z-index: 5;
        pointer-events: none;
    }

    /* Scroll area — clearance for header glass blur zone */
    .scroll-area {
        padding-top: calc(var(--header-h) + 40px);
        padding-left: 12px;
        padding-right: 4px;
    }

    /* Inline date label — mobile tweaks */
    .bubble-date {
        opacity: 0.45;
        margin-left: 4px;
    }

    /* Bubble rows — more breathing room */
    .bubble-row {
        padding: 5px 4px !important;
    }

    /* Visual break between date groups */
    .bubble-row.first-in-group {
        margin-top: 6px;
    }

    /* Bubble content — wider, borderless, subtle definition */
    .bubble-content {
        max-width: 85% !important;
        border: none !important;
        box-shadow: 0 0.5px 3px rgba(15, 23, 42, 0.10),
                    0 0 0 0.5px rgba(15, 23, 42, 0.04);
    }

    /* Match task-item font size on mobile (1.0rem) */
    .bubble-text {
        font-size: 1.0rem !important;
    }

    /* Actions — always visible, ghost style, right-aligned, tight rhythm */
    .bubble-actions {
        opacity: 1 !important;
        pointer-events: auto !important;
        margin-left: auto !important;
        flex-shrink: 0 !important;
        gap: 0 !important;
    }

    .bubble-actions .icon-btn {
        min-width: 36px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        border-radius: 18px !important;
        color: var(--text-muted) !important;
    }

    .bubble-actions .icon-btn svg {
        stroke: var(--text-muted) !important;
        width: 14px !important;
        height: 14px !important;
    }

    .bubble-actions .icon-btn:active {
        background: rgba(15, 23, 42, 0.06) !important;
    }

    /* Bottom fade gradient — transparent→solid, matches Tasks page.
       ::after on .thoughts-chat sits behind the bottom-bar. */
    .thoughts-chat::after {
        content: '';
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: calc(100px + env(safe-area-inset-bottom, 0px));
        background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,1));
        z-index: 2;
        pointer-events: none;
    }

    /* Bottom bar — transparent, floating above the fade gradient */
    .bottom-bar {
        padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px)) !important;
        background: transparent !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
        border-top: none !important;
        position: relative;
        z-index: 3;
    }

    /* Input — iOS style: no border, grey fill, pill */
    .bottom-bar-input {
        font-size: 1.0rem !important;
        height: 44px !important;
        border: none !important;
        border-radius: 22px !important;
        background: rgba(15, 23, 42, 0.04) !important;
        box-shadow: none !important;
        padding: 0 16px !important;
    }

    .bottom-bar-input:focus {
        box-shadow: none !important;
        background: rgba(15, 23, 42, 0.06) !important;
    }

    /* Submit button — mobile size + touch feedback */
    .bottom-bar-btn {
        width: 38px !important;
        height: 38px !important;
        background: var(--primary) !important;
        border: none !important;
        box-shadow: none !important;
    }

    .bottom-bar-btn .submit-icon {
        width: 18px !important;
        height: 18px !important;
        stroke: #fff !important;
    }

    .bottom-bar-btn:active {
        transform: scale(0.92);
        background: var(--primary-hover) !important;
    }

    /* ── Analytics Page ── */
    /* IMPORTANT: Do NOT use position:fixed — causes iOS PWA viewport shrink.
       See comment on .thoughts-page and docs/PWA-VIEWPORT-FIX.md */
    .analytics-page {
        height: 100vh;
        height: var(--app-height, 100vh);
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        padding: 0 !important;
        margin: 0 !important;
        max-width: none !important;
    }

    .analytics-page .page-surface {
        border: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        background: transparent !important;
        padding: 0 12px !important;
    }

    /* Glass sticky header with date range pills */
    .analytics-header {
        position: sticky !important;
        top: 0;
        z-index: 10;
        padding: calc(var(--header-h) + 8px) 12px 8px !important;
        background: rgba(255, 255, 255, 0.45) !important;
        -webkit-backdrop-filter: blur(20px) saturate(180%);
        backdrop-filter: blur(20px) saturate(180%);
        margin: 0 -12px !important;
        /* extend glass edge-to-edge despite parent padding */
        width: calc(100% + 24px) !important;
    }

    /* Compact title in header */
    .analytics-title {
        font-size: 0.87rem !important;
        margin: 0 !important;
    }

    /* Pill-shaped date range buttons */
    .date-range-selector {
        gap: 4px;
    }
    .range-btn {
        font-size: 0.73rem !important;
        padding: 4px 10px !important;
        min-height: 32px;
        min-width: 44px;
    }

    /* Section labels */
    .analytics-section-label {
        font-size: 0.8rem !important;
        padding: 16px 0 8px !important;
    }

    /* Panel cards — flat, full-width */
    .analytics-page .panel {
        border: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        background: transparent !important;
        border-top: 0.5px solid rgba(15, 23, 42, 0.06) !important;
    }

    .analytics-page .panel__hd {
        font-size: 0.8rem !important;
        padding: 12px 0 8px !important;
    }

    /* Stat cards — compact horizontal layout */
    .stat-card {
        padding: 12px 16px !important;
        border-radius: 8px !important;
    }

    .stat-card .stat-value {
        font-size: 1.5rem !important;
    }
    .stat-card.hero .stat-value {
        font-size: 2rem !important;
    }
    .stat-card .stat-label {
        font-size: 0.73rem !important;
    }

    /* Completion log rows */
    .completion-row {
        min-height: 44px;
        border-bottom: 0.5px solid rgba(15, 23, 42, 0.06) !important;
    }

    .recurring-row {
        min-height: 44px;
    }

    /* Bottom fade gradient — shorter than Tasks (no energy pill) */
    .analytics-page::after {
        content: '';
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: calc(70px + env(safe-area-inset-bottom, 0px));
        background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,1));
        z-index: 98;
        pointer-events: none;
    }

    /* Scroll spacer — matches gradient height */
    .analytics-page .page-surface::after {
        content: '';
        display: block;
        height: calc(70px + env(safe-area-inset-bottom, 0px));
    }

    /* ── Settings Page ── */
    /* IMPORTANT: Do NOT use position:fixed — causes iOS PWA viewport shrink.
       See comment on .thoughts-page and docs/PWA-VIEWPORT-FIX.md */
    .settings-page {
        height: 100vh;
        height: var(--app-height, 100vh);
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        padding: 0 !important;
        margin: 0 !important;
        max-width: none !important;
    }

    .settings-page .page-surface {
        border: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        background: transparent !important;
        padding: 0 !important;
    }

    /* Settings title — glass sticky header */
    .settings-title {
        position: sticky !important;
        top: 0;
        z-index: 10;
        padding: calc(var(--header-h) + 8px) 16px 8px !important;
        background: rgba(255, 255, 255, 0.45) !important;
        -webkit-backdrop-filter: blur(20px) saturate(180%);
        backdrop-filter: blur(20px) saturate(180%);
        font-size: 0.87rem !important;
        margin: 0 !important;
        max-width: none !important;
    }

    /* Settings grid — no gap, sections provide spacing */
    .settings-grid {
        padding: 0 !important;
        max-width: none !important;
        gap: 0 !important;
    }

    /* Section labels — sticky within scroll, glass background */
    .settings-section-label {
        position: sticky;
        top: calc(var(--header-h) + 36px);
        z-index: 5;
        padding: 12px 16px 6px !important;
        background: rgba(255, 255, 255, 0.45) !important;
        -webkit-backdrop-filter: blur(20px) saturate(180%);
        backdrop-filter: blur(20px) saturate(180%);
        font-size: 0.73rem !important;
        margin: 0 !important;
        border-left: none !important;
    }

    /* Panel cards — flat sections */
    .settings-panel {
        border: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        background: transparent !important;
    }

    /* Hairline separators between panels */
    .settings-panel + .settings-panel {
        border-top: 0.5px solid rgba(15, 23, 42, 0.06) !important;
    }

    /* Section separators */
    .settings-section + .settings-section {
        border-top: 0.5px solid rgba(15, 23, 42, 0.06) !important;
    }

    /* Settings rows */
    .settings-row {
        padding: 10px 16px !important;
        min-height: 44px !important;
        border-bottom: 0.5px solid rgba(15, 23, 42, 0.06) !important;
    }

    /* Row actions always visible */
    .row-actions {
        opacity: 1 !important;
        pointer-events: auto !important;
    }

    /* Danger zone — keep red tint, edge-to-edge */
    .settings-section--danger {
        border-radius: 0 !important;
    }
    .settings-panel--danger {
        border-radius: 0 !important;
    }

    /* Footer — full-width */
    .settings-footer {
        padding: 24px 16px !important;
        margin: 0 !important;
    }

    /* Bottom fade gradient — shorter than Tasks (no energy pill) */
    .settings-page::after {
        content: '';
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: calc(70px + env(safe-area-inset-bottom, 0px));
        background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,1));
        z-index: 98;
        pointer-events: none;
    }

    /* Scroll spacer — matches gradient height */
    .settings-grid::after {
        content: '';
        display: block;
        height: calc(70px + env(safe-area-inset-bottom, 0px));
    }

    /* ── Toast — full-width snackbar above tab bar ── */
    .toast-container {
        left: 12px !important;
        right: 12px !important;
        bottom: calc(68px + env(safe-area-inset-bottom, 0px)) !important;
    }

    .toast {
        max-width: none !important;
        width: auto !important;
        box-sizing: border-box !important;
        gap: 8px !important;
        padding: 10px 10px 10px 12px !important;
    }

    .toast-message {
        font-size: 0.8rem !important;
        min-width: 0 !important;
        white-space: normal !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 3 !important;
        -webkit-box-orient: vertical !important;
        line-height: 1.35 !important;
    }

    .toast-dismiss {
        width: 24px !important;
        height: 24px !important;
    }
}

/* =============================================================================
   13. Dark Mode Support
   ============================================================================= */

/* Dark mode — invisible tab container (same as light) */
@media (max-width: 900px) {
    [data-theme="dark"] .mobile-tabs {
        background: transparent;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        border: none;
        box-shadow: none;
    }
}

[data-theme="dark"] .mobile-tab {
    color: var(--text-muted);
    background: rgba(30, 30, 30, 0.4);
    -webkit-backdrop-filter: blur(40px) saturate(180%);
    backdrop-filter: blur(40px) saturate(180%);
    border-color: rgba(255, 255, 255, 0.06);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* Active tab — white glass pill with accent text (dark mode) */
[data-theme="dark"] .mobile-tab.active {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.05);
    color: var(--primary, #6D5EF6);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12),
                0 0.5px 1px rgba(0, 0, 0, 0.08);
}

[data-theme="dark"] .mobile-tab-add {
    box-shadow: 0 2px 8px rgba(109, 94, 246, 0.35);
}

/* Dark mode — ultra-transparent glass everywhere */
@media (max-width: 900px) {
    [data-theme="dark"] .energy-wrapper {
        background: rgba(45, 35, 20, 0.25) !important;
        -webkit-backdrop-filter: blur(40px) saturate(180%) !important;
        backdrop-filter: blur(40px) saturate(180%) !important;
        border-color: rgba(255, 230, 180, 0.08) !important;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15),
                    inset 0 0.5px 0 rgba(255, 240, 200, 0.06) !important;
    }

    [data-theme="dark"] .energy-wrapper .energy-pill.active,
    [data-theme="dark"] .energy-pill.active[data-energy="1"],
    [data-theme="dark"] .energy-pill.active[data-energy="2"],
    [data-theme="dark"] .energy-pill.active[data-energy="3"] {
        background: rgba(255, 245, 220, 0.06) !important;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15) !important;
    }

    /* Dark mode: glass header — dark tint */
    [data-theme="dark"] .task-list-header {
        background: rgba(15, 23, 42, 0.45) !important;
        -webkit-backdrop-filter: blur(20px) saturate(180%);
        backdrop-filter: blur(20px) saturate(180%);
    }

    /* Dark mode: site-header transparent — glass from task-list-header */
    [data-theme="dark"] .site-header {
        background: transparent !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
        padding-top: 8px !important;
        padding-right: 16px !important;
        padding-bottom: 0 !important;
        padding-left: 16px !important;
    }

    /* Dark PWA standalone: restore notch clearance + html/body background */
    @media (display-mode: standalone) {
        [data-theme="dark"] .site-header {
            padding-top: calc(12px + env(safe-area-inset-top, 0px)) !important;
        }

        [data-theme="dark"] html,
        [data-theme="dark"] body {
            background-color: var(--bg-surface, #0f172a);
        }
    }

    [data-theme="dark"] .header-nav {
        background: transparent !important;
    }

    [data-theme="dark"] .header-domain-label {
        color: var(--text-primary);
    }

    /* Dark mode: bottom fade gradients — fade to dark canvas.
       Tasks panel uses ::after overlay; calendar uses mask-image (auto-adapts
       to dark bg) but the supplementary gradient div also needs dark colors. */
    [data-theme="dark"] .tasks-panel.mobile-active::after,
    [data-theme="dark"] .calendar-panel.mobile-active .calendar-fade-gradient {
        background: linear-gradient(to bottom, rgba(15,23,42,0), rgba(15,23,42,1));
    }

    [data-theme="dark"] .project-header {
        border-bottom-color: transparent !important;
    }

    /* Dark: glass header backdrop for calendar */
    [data-theme="dark"] .calendar-panel.mobile-active::before {
        background: rgba(15, 23, 42, 0.45);
    }

    /* Dark: glass header backdrop for thoughts */
    [data-theme="dark"] .thoughts-chat::before {
        background: rgba(15, 23, 42, 0.45);
    }

    /* Dark: bubble shadow adjustment */
    [data-theme="dark"] .bubble-content {
        box-shadow: 0 0.5px 2px rgba(0, 0, 0, 0.2);
    }

    /* Dark: bottom fade gradient — fade to dark canvas */
    [data-theme="dark"] .thoughts-chat::after {
        background: linear-gradient(to bottom, rgba(15,23,42,0), rgba(15,23,42,1));
    }

    /* Dark: bottom bar stays transparent */
    [data-theme="dark"] .bottom-bar {
        background: transparent !important;
        border-top: none !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }

    /* Dark: input — dark grey fill */
    [data-theme="dark"] .bottom-bar-input {
        background: rgba(248, 250, 252, 0.06) !important;
    }
    [data-theme="dark"] .bottom-bar-input:focus {
        background: rgba(248, 250, 252, 0.10) !important;
    }

    /* Dark: submit button — same solid purple */
    [data-theme="dark"] .bottom-bar-btn {
        background: var(--primary) !important;
    }
    [data-theme="dark"] .bottom-bar-btn:active {
        background: var(--primary-hover) !important;
    }

    /* Dark: ghost action buttons */
    [data-theme="dark"] .bubble-actions .icon-btn {
        background: transparent !important;
        border: none !important;
        color: var(--text-muted) !important;
    }
    [data-theme="dark"] .bubble-actions .icon-btn svg {
        stroke: var(--text-muted) !important;
    }
    [data-theme="dark"] .bubble-actions .icon-btn:active {
        background: rgba(248, 250, 252, 0.06) !important;
    }
    [data-theme="dark"] .analytics-header {
        background: rgba(15, 23, 42, 0.45) !important;
    }
    [data-theme="dark"] .settings-title {
        background: rgba(15, 23, 42, 0.45) !important;
    }
    [data-theme="dark"] .settings-section-label {
        background: rgba(15, 23, 42, 0.45) !important;
    }

    /* Dark: bottom fade gradients — Analytics, Settings */
    [data-theme="dark"] .analytics-page::after,
    [data-theme="dark"] .settings-page::after {
        background: linear-gradient(to bottom, rgba(15,23,42,0), rgba(15,23,42,1));
    }
    [data-theme="dark"] .analytics-page .panel {
        border-top-color: rgba(248, 250, 252, 0.06) !important;
    }
    [data-theme="dark"] .completion-row {
        border-bottom-color: rgba(248, 250, 252, 0.06) !important;
    }
    [data-theme="dark"] .settings-row {
        border-bottom-color: rgba(248, 250, 252, 0.06) !important;
    }
    [data-theme="dark"] .settings-panel + .settings-panel,
    [data-theme="dark"] .settings-section + .settings-section {
        border-top-color: rgba(248, 250, 252, 0.06) !important;
    }
}