.tab-bar {
    display: none;
}

/* Phone + tablet: one screen at a time, with the Graph tab actually reachable. */
@media (max-width: 1050px) {
    .footer {
        display: none;
    }

    .screen {
        display: none;
    }

    .screen.is-active {
        display: flex;
        animation: fade-in 0.22s ease;
    }

    body {
        padding-bottom: calc(64px + env(safe-area-inset-bottom));
    }

    body.has-ad-banner {
        padding-bottom: calc(64px + env(safe-area-inset-bottom) + var(--ad-banner-height, 0px));
    }

    body.has-ad-banner .tab-bar {
        bottom: calc(env(safe-area-inset-bottom) + var(--ad-banner-height, 0px));
        padding-bottom: 0.4rem;
    }

    body.has-ad-banner #toastContainer {
        bottom: calc(76px + env(safe-area-inset-bottom) + var(--ad-banner-height, 0px));
    }

    body.has-ad-banner::after {
        content: '';
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        height: calc(env(safe-area-inset-bottom) + var(--ad-banner-height, 0px));
        background: var(--bg);
        z-index: 19;
        pointer-events: none;
    }

    #toastContainer {
        bottom: calc(76px + env(safe-area-inset-bottom));
    }

    .tab-bar {
        display: flex;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 20;
        background: var(--tabbar-bg);
        backdrop-filter: blur(10px);
        border-top: 1px solid var(--border-soft);
        padding: 0.4rem 0.5rem calc(0.4rem + env(safe-area-inset-bottom));
    }

    .tab-btn {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.15rem;
        background: transparent;
        border: none;
        color: var(--text-muted);
        font-family: inherit;
        padding: 0.4rem 0.15rem;
        border-radius: var(--radius-md);
        cursor: pointer;
        min-height: 48px;
        transition: color 0.15s ease, background-color 0.15s ease, transform 0.12s ease;
    }

    .tab-btn:active {
        transform: scale(0.96);
    }

    .tab-btn.is-active {
        color: var(--accent);
        background-color: var(--accent-soft);
    }

    .tab-btn--ask.is-active {
        color: var(--ask-accent);
        background-color: var(--ask-accent-soft);
    }

    .tab-btn--reminders.is-active {
        color: var(--idle);
        background-color: var(--idle-soft);
    }

    .tab-btn--graph.is-active {
        color: var(--all-accent);
        background-color: var(--all-accent-soft);
    }

    .tab-btn--schedule.is-active {
        color: var(--schedule-accent);
        background-color: var(--schedule-accent-soft);
    }

    .tab-icon {
        font-size: 1.4rem;
        line-height: 1;
    }

    .tab-label {
        font-size: 0.62rem;
        font-weight: 600;
    }
}

@media (max-width: 640px) {
    .topbar-inner {
        gap: 0.5rem;
        padding: 0.7rem 1rem;
    }

    .brand-sub {
        display: none;
    }

    .brand h1 {
        font-size: 1.05rem;
    }

    .container {
        padding: 1.1rem 1rem 1.5rem;
        gap: 1.1rem;
    }

    .panel {
        padding: 1rem;
    }

    /* Cards were sized for a 3-column desktop layout - on a single phone
       column they need to be denser, and the lists should scroll with the
       page instead of in their own small boxed-in area. */
    .memory-list,
    .schedule-list,
    .reminders-section .schedule-list {
        max-height: none;
        overflow-y: visible;
    }

    .memory-list {
        gap: 0.45rem;
    }

    .schedule-list {
        gap: 0.6rem;
    }

    .schedule-day-group {
        gap: 0.4rem;
    }

    .memory-card,
    .schedule-card {
        padding: 0.7rem 0.85rem;
    }

    .memory-side {
        gap: 0.3rem;
    }

    .memory-meta {
        gap: 0.4rem;
        margin-top: 0.3rem;
    }

    .schedule-body {
        gap: 0.3rem;
    }

    .home-prompt {
        margin-bottom: 0.6rem;
    }

    .reminders-section + .reminders-section {
        margin-top: 1.1rem;
    }

    .calendar {
        gap: 0.4rem;
    }

    .calendar-grid {
        gap: 2px;
    }

    .cal-day {
        aspect-ratio: 1 / 0.78;
        font-size: 0.78rem;
    }

    .calendar-today-btn {
        font-size: 0.68rem;
        padding: 0.28rem 0.5rem;
    }

    textarea,
    input[type="text"],
    input[type="search"],
    .btn,
    .btn-mic {
        min-height: 48px;
    }

    .memory-card.editing .delete-confirm-actions .btn {
        min-height: clamp(48px, calc(44px + var(--edit-lines) * 4px), 64px);
    }

    .timeline-header .btn-icon-toggle,
    .pricing-modal-header .btn-icon-toggle {
        font-size: 1.3rem;
        min-width: 44px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .timeline-header .sidebar-back,
    .pricing-modal-header .sidebar-back {
        min-height: 44px;
        font-size: 0.92rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .screen.is-active,
    .tab-btn {
        animation: none !important;
        transition: none !important;
    }
}