/* Responsive breakpoints. Must be loaded LAST — overrides other modules */

@media (max-width: 768px) {
    .profile-card { padding: 20px; gap: 16px; }
    .two-col { grid-template-columns: 1fr; gap: 14px; }

    /* Full-screen side drawers on mobile: the panel fills the viewport and still
       slides in from its side (scope drawer from the left, filters from the
       right) — replacing the old bottom-sheet, which left dead space above it.
       The side-slide (translateX) and side alignment come from drawer.css. */
    .drawer-panel {
        width: 100%;
        max-width: 100%;
        box-shadow: none;
    }
    /* The panel now covers the top bar too — keep the header clear of the notch. */
    .drawer-head { padding-top: max(14px, env(safe-area-inset-top)); }
    /* When a drawer has no foot, let its body own the bottom safe-area padding. */
    .drawer-panel:not(:has(.drawer-foot)) .drawer-body {
        padding-bottom: max(18px, calc(18px + env(safe-area-inset-bottom)));
    }
}

/* The centered 3-column grid (1fr · up-to-740px search · 1fr) needs room for the
   full 740px search plus both side clusters; below ~1150px the fixed side content
   can't shrink enough and the grid overflows (search/brand drift). Switch to a
   flex row — search fills, sides stay natural — well before it gets tight. */
@media (max-width: 1200px) {
    .topbar {
        display: flex;
        gap: 10px;
    }
    .topbar-actions { margin-left: auto; }
    .topbar-search {
        flex: 1 1 auto;
        max-width: none;
        margin: 0;
    }
}

@media (max-width: 860px) {
    /* Keep the top safe-area padding from topbar.css when narrowing the sides. */
    .topbar { padding: env(safe-area-inset-top) max(18px, env(safe-area-inset-right)) 0 max(18px, env(safe-area-inset-left)); }
    .brand-name { display: none; }
}

@media (max-width: 640px) {
    .topbar {
        padding: env(safe-area-inset-top) max(12px, env(safe-area-inset-right)) 0 max(12px, env(safe-area-inset-left));
        height: calc(56px + env(safe-area-inset-top));
        min-height: calc(56px + env(safe-area-inset-top));
        gap: 8px;
    }
    .brand-name { display: none; }

    /* Scope button: icon-only on mobile to save room */
    .scope-btn { padding: 0 8px; max-width: none; }
    .scope-label, .scope-caret { display: none; }

    /* Compact profile trigger on mobile: avatar + caret only */
    .profile-trigger { padding: 4px; gap: 4px; }
    .profile-name-wrap { display: none; }
    .profile-caret { display: none; }

    /* Profile dropdown becomes a bottom-sheet on mobile */
    .profile-menu:has(.profile-dropdown:not([hidden]))::before {
        content: "";
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.35);
        z-index: 49;
        animation: sheetBackdropIn .22s ease;
    }
    html[data-theme="dark"] .profile-menu:has(.profile-dropdown:not([hidden]))::before {
        background: rgba(0, 0, 0, 0.6);
    }

    .profile-dropdown {
        position: fixed;
        top: auto;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        min-width: 0;
        max-width: 100%;
        border-left: none;
        border-right: none;
        border-bottom: none;
        border-top: 1px solid var(--border);
        border-radius: 14px 14px 0 0;
        padding: 6px 10px max(14px, calc(14px + env(safe-area-inset-bottom)));
        box-shadow: 0 -4px 28px rgba(0, 0, 0, 0.18);
        animation: sheetIn .24s cubic-bezier(0.2, 0.8, 0.25, 1);
    }
    .profile-dropdown::before {
        content: "";
        display: block;
        width: 36px;
        height: 4px;
        background: var(--border-strong);
        border-radius: 2px;
        margin: 8px auto 6px;
    }
    .profile-dropdown-head { padding: 12px 10px 14px; }
    .profile-dropdown-divider { margin: 4px -10px; }
    .profile-dropdown-item {
        padding: 13px 12px;
        font-size: 14px;
        border-radius: 6px;
    }
    .profile-dropdown-item svg { width: 18px; height: 18px; }

    @keyframes sheetIn {
        from { transform: translateY(100%); }
        to { transform: translateY(0); }
    }
    @keyframes sheetBackdropIn {
        from { opacity: 0; }
        to { opacity: 1; }
    }

    /* Search bar shrinks on mobile */
    .feed-search { height: 34px; padding: 0 4px 0 10px; gap: 6px; }
    .feed-search input { font-size: 13px; }
    .feed-filter-btn { width: 26px; height: 26px; }

    .login-main { padding: 24px 16px; }
    .login-card { padding: 28px 22px; }
    .login-card::before { left: 16px; right: 16px; }
    .login-header h1 { font-size: 22px; }

    .profile-main { padding: 20px 14px 48px; }
    .profile-form { gap: 12px; }

    /* Feed cards on mobile */
    .feed-main { padding: 16px 14px 80px; gap: 12px; }
    .feed-card { padding: 14px; gap: 9px; }
    .feed-card-title { font-size: 15px; }
    .feed-card-body { font-size: 13.5px; max-height: 13em; }
    .feed-card-chips { gap: 5px; }

    .footpage { padding: 16px; }
}

@media (max-width: 380px) {
    .topbar { padding: env(safe-area-inset-top) max(10px, env(safe-area-inset-right)) 0 max(10px, env(safe-area-inset-left)); gap: 6px; }
    .feed-search { padding: 0 3px 0 8px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}