/* ============================================================
   MOBILE
   Mobile shell: tab bar, bottom sheet, FAB and loaders.
   Part of the incremental migration out of components.css:
   the mobile navigation and assistant sheet live here.
   ============================================================ */

/* Tab bar and mobile shell are mobile-only */
#mobile-tab-bar { display: none; }

@media (max-width: 768px) {
    /* --- Bottom tab bar: iOS-like glass --- */
    #mobile-tab-bar {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 50;
        display: flex;
        align-items: stretch;
        justify-content: space-around;
        gap: 2px;
        padding: 6px 8px max(6px, env(safe-area-inset-bottom, 0px));
        background: color-mix(in srgb, var(--surface-raised) 80%, transparent);
        border-top: 1px solid var(--border-subtle);
        backdrop-filter: blur(22px) saturate(1.3);
        -webkit-backdrop-filter: blur(22px) saturate(1.3);
        box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.14);
    }
    @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
        #mobile-tab-bar { background: var(--surface-raised); }
    }
    .mobile-tab {
        position: relative;
        flex: 1 1 0;
        min-width: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        padding: 6px 2px 4px;
        min-height: var(--touch-target-min);
        color: var(--text-muted);
        border-radius: var(--radius-sm);
        transition: color var(--duration-quick) var(--ease-standard);
    }
    .mobile-tab-icon { width: 23px; height: 23px; flex-shrink: 0; }
    .mobile-tab-label {
        font-size: 0.62rem;
        letter-spacing: 0.01em;
        line-height: 1;
        font-weight: 500;
    }
    .mobile-tab.active { color: var(--accent-primary); }
    .mobile-tab:active { transform: scale(0.96); }
    .mobile-tab-badge {
        position: absolute;
        top: 3px;
        left: calc(50% + 9px);
        width: 6px;
        height: 6px;
        padding: 0;
        background: var(--accent-primary);
        border-radius: 50%;
    }
    #app-view.mobile-chat-open #mobile-tab-bar {
        opacity: 0;
        pointer-events: none;
    }

    /* Keep panel content clear of the fixed tab bar */
    .widget-content {
        padding-bottom: calc(var(--tab-bar-height) + env(safe-area-inset-bottom, 0px) + 16px);
    }
    #app-view.mobile-notes-active .widget-content {
        padding-bottom: 0;
    }

    /* Uniform background across days: drop the alternating tint */
    .week-day-col,
    .week-day-col:nth-child(even) {
        background: transparent;
    }

    /* Day headers show only the relative label, no day-of-month */
    .week-day-block-num {
        display: none;
    }

    /* Cards: lifted, lighter surface to contrast with the uniform background */
    #week-view .week-item {
        background: var(--surface-raised);
        border: 1px solid var(--border-subtle);
        box-shadow: var(--shadow-soft);
    }

    #habits-view .habit-card,
    #habits-view .habit-health-panel {
        background: var(--surface-raised);
        border: 1px solid var(--border-subtle);
        box-shadow: var(--shadow-soft);
    }

    /* Top widget tabs move to the bottom bar on mobile */
    .widget-tabs { display: none; }
    .widget-header {
        padding: 0;
        margin: 0;
        border: none;
        min-height: 0;
    }
    .widget-header:not(:has(.review-toggle:not(.hidden))) {
        display: none;
    }

    /* FAB rides above the tab bar */
    #mobile-ai-fab {
        bottom: calc(var(--tab-bar-height) + env(safe-area-inset-bottom, 0px) + 14px);
    }

}