/* ================================================
   Layout — CSS Grid based. Sidebar, topbar, content area,
   auth (logged-out) centering.
   ================================================ */

/* --- Auth layout (logged-out) --- */
.auth-layout {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
}

/* --- App layout (logged-in) --- */
/* `minmax(0, 1fr)` (not bare `1fr`) on the content column is the key — bare
   `1fr` is shorthand for `minmax(auto, 1fr)`, where `auto` resolves to the
   content's min-content size. With unbounded-width children inside (e.g.
   the kanban-board's 5×320px columns), the track refuses to shrink below
   ~1600px and the whole grid widens past the viewport, scrolling the
   document horizontally and dragging the page title sideways. `minmax(0,
   1fr)` lets the track shrink to any width; overflow then happens inside
   the page-content (and is clipped or scrolled there). */
/* App shell: sidebar holds GroupPicker + nav + UserMenu (desktop); mobile
   replaces the sidebar with a topbar carrying the same surfaces. No topbar
   row on desktop — the sidebar is the entire shell chrome.
   `minmax(0, 1fr)` on the content column lets it shrink below its content
   min-width so wide children (kanban, chat split) can scroll inside
   themselves instead of widening the document. */
.app-layout {
    display: grid;
    grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
    grid-template-rows: 1fr;
    grid-template-areas: "sidebar content";
    min-height: 100vh;
}

/* --- Sidebar --- */
.sidebar {
    grid-area: sidebar;
    background: var(--color-sidebar);
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: var(--sidebar-width);
    z-index: 10;
    padding: var(--space-3);
    gap: var(--space-3);
}

.sidebar-nav {
    /* flex:1 + min-height:0 lets nav take the middle, pushing .sidebar-footer
       to the bottom via its own margin-top:auto fallback. */
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.sidebar-footer {
    /* Pinned to the bottom by flex:1 on .sidebar-nav above; margin-top:auto
       is belt-and-braces in case flex behavior changes. */
    margin-top: auto;
    flex-shrink: 0;
}

.sidebar-nav a {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    color: var(--color-sidebar-text);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    text-decoration: none;
    transition: background var(--transition), color var(--transition);
}

.sidebar-nav a:hover {
    background: var(--color-sidebar-hover);
    color: var(--color-sidebar-text-active);
    text-decoration: none;
}

.sidebar-nav a.active {
    background: var(--color-sidebar-active);
    color: var(--color-accent);
}

.sidebar-nav .nav-icon {
    width: 18px;
    height: 18px;
    opacity: 0.7;
}

.sidebar-nav a.active .nav-icon,
.sidebar-nav a:hover .nav-icon {
    opacity: 1;
}

/* --- Top bar (mobile-only).
   On desktop the sidebar carries both the GroupPicker and the UserMenu, so
   the topbar isn't needed and stays display:none. On mobile (<720px) it
   becomes the primary chrome: GroupPicker pill left, UserMenu avatar right. */
.topbar {
    grid-area: topbar;
    display: none;
    height: var(--topbar-height);
    background: var(--color-topbar);
    border-bottom: var(--border);
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    padding: 0 var(--space-3);
    position: sticky;
    top: 0;
    z-index: 5;
}

/* --- Page content ---
   Grey surface so every in-app page (Tasks, Lists, Members, Calendar, Settings…)
   reads as the design intends: white cards/panels/inputs floating on a light
   grey body. Auth + marketing layouts sit outside .page-content so they keep
   the body's near-white .color-bg. */
.page-content {
    grid-area: content;
    padding: var(--space-8);
    max-width: calc(var(--content-max-width) + var(--space-8) * 2);
    margin-inline: auto;
    width: 100%;
    background: var(--color-surface-alt);
}

/* Chat fills page-content edge-to-edge (no padding, no max-width) — sub-
   sidebar abuts the page-content's left edge and the thread fills the rest.
   page-content becomes flex column so chat-split's flex:1 actually sizes. */
.page-content:has(> .chat-split) {
    display: flex;
    flex-direction: column;
    padding: 0;
    max-width: none;
}

/* Kanban-style pages drop the content max-width and become a flex column so
   the kanban-board can claim the remaining viewport height (= horizontal
   scroll-bar pins to the viewport bottom instead of mid-page). page-hero +
   stats-grid keep an inline max-width inside the .page-content rule below
   so they don't visually stretch on wide monitors. `overflow-x: clip` is the
   containment seal: even if a child (typically the kanban-board) computes a
   wider intrinsic size than it should, the spill is clipped at page-content's
   edge instead of cascading up and dragging the page title sideways. clip is
   preferred over hidden because it doesn't establish a scroll context, so
   sticky/position behaviours elsewhere stay intact. */
.page-content:has(> .kanban-board) {
    max-width: none;
    display: flex;
    flex-direction: column;
    overflow-x: clip;
}

/* Lists drops the content max-width too — the sidebar + active-list panel
   want the full viewport width so the grey body extends to the right edge.
   .lists-page's own internal layout (.lists-layout grid) handles content
   width caps for very wide monitors. */
.page-content:has(> .lists-page) {
    max-width: none;
}


.page-title {
    font-family: var(--font-display);
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-medium);
    letter-spacing: -0.01em;
    margin-bottom: var(--space-6);
}

/* Page header row — pairs the page title with a trailing action (e.g.
   "+ Post open task" on Tasks). When .page-title is a child of .page-header,
   the bottom margin moves up to the row so spacing stays consistent. */
.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-6);
    flex-wrap: wrap;
}

.page-header > .page-title {
    margin-bottom: 0;
}

/* --- In-page titlebar (back arrow + h1 + optional eyebrow) ---
   Used by pages that own their own back navigation (chat thread, task detail)
   and that hide the global topbar/tabbar in immersive mobile mode. */
.page-titlebar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.4rem;
}

.page-titlebar-h1 {
    /* flex:1 grows the title to fill the row — pushes any trailing action
       (e.g. delete button on TaskDetail) to the right edge without needing
       margin-left:auto on the action itself. */
    flex: 1;
    font-size: 1.5rem;
    font-weight: var(--font-weight-medium);
    letter-spacing: -0.5px;
    color: var(--color-text);
    margin: 0;
}

.page-titlebar-eyebrow {
    font-size: 0.72rem;
    color: var(--color-text-muted);
    letter-spacing: 0.04em;
}

/* (.page-titlebar-back and .page-titlebar-delete are gone — both consumers
   now use the global .btn-icon .btn-icon-round (+ .btn-icon-danger for the
   destructive variant). The .page-titlebar-back-mobile/-desktop SVG-swap
   helpers live in components.css alongside the icon-button rules.) */

/* --- Bottom tab bar (mobile only) --- */
.tabbar {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: var(--tabbar-height);
    background: var(--color-surface);
    border-top: var(--border);
    padding-bottom: env(safe-area-inset-bottom);
    z-index: 8;
}

.tabbar-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    color: var(--color-text-muted);
    text-decoration: none;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    padding: var(--space-1) 0;
    transition: color var(--transition);
}

.tabbar-item:hover { color: var(--color-text); text-decoration: none; }

.tabbar-item.active { color: var(--color-accent); }

.tabbar-item .nav-icon { width: 22px; height: 22px; opacity: 1; }

.tabbar-label { line-height: 1; }

/* Wraps the icon so the unread pill can anchor to its top-right corner
   without disturbing the icon's flex slot. Used by both NavTabBar (mobile
   bottom-bar) and NavMenu (desktop sidebar) — single CSS surface. */
.nav-icon-wrap {
    position: relative;
    display: inline-flex;
    line-height: 0;
}

.nav-badge {
    position: absolute;
    top: -4px;
    right: -8px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: var(--radius-full);
    background: var(--color-accent);
    color: var(--color-text-inverse);
    font-size: 10px;
    font-weight: var(--font-weight-semibold);
    line-height: 16px;
    text-align: center;
    pointer-events: none;
    font-variant-numeric: tabular-nums;
}

/* Non-positioned variant — same accent pill chrome as .nav-badge but
   participates in the surrounding flex/inline flow. Used by row-level
   surfaces (group picker rows, user-menu avatar overlay) where the badge
   doesn't anchor to an icon's corner. */
.row-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    padding: 0 5px;
    border-radius: var(--radius-full);
    background: var(--color-accent);
    color: var(--color-text-inverse);
    font-size: 10px;
    font-weight: var(--font-weight-semibold);
    line-height: 1;
    pointer-events: none;
    font-variant-numeric: tabular-nums;
}

/* Countless variant — solid accent dot for surfaces where activity is
   per-row but the read watermark is shared (e.g. Lists, where one group
   watermark covers every list, so we can flag "changed since last visit"
   but not derive a per-row count). */
.row-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: var(--radius-full);
    background: var(--color-accent);
    flex-shrink: 0;
    pointer-events: none;
}

/* --- Secondary tabs (inside a page) --- */
.subtabs {
    display: flex;
    gap: var(--space-1);
    border-bottom: var(--border);
    margin-bottom: var(--space-6);
    margin-top: calc(var(--space-4) * -1);
}

.subtab {
    padding: var(--space-2) var(--space-2);
    color: var(--color-text-muted);
    text-decoration: none;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color var(--transition), border-color var(--transition);
}

.subtab:hover { color: var(--color-text); text-decoration: none; }

.subtab.active {
    color: var(--color-accent);
    border-bottom-color: var(--color-accent);
}

/* ================================================
   Group picker (GroupPicker.razor) — appears at the
   top of the sidebar (desktop) and the left of the
   topbar (mobile). Same dropdown contents in both
   places; the Variant parameter swaps the trigger
   chrome.
   ================================================ */
.group-picker { position: relative; }

.group-picker-trigger {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    background: transparent;
    border: 1px solid transparent;
    color: var(--color-text);
    cursor: pointer;
    text-align: left;
    transition: background var(--transition), border-color var(--transition);
}

.group-picker-trigger:hover { background: var(--color-bg-hover); }

.group-picker-open .group-picker-trigger { background: var(--color-bg-hover); }

.group-picker-meta {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
    line-height: 1.2;
}

.group-picker-name {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.group-picker-sub {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 2px;
}

.group-picker-chevron {
    width: 14px;
    height: 14px;
    color: var(--color-text-muted);
    flex-shrink: 0;
}

/* Sidebar variant — card-like surface that anchors the top of the
   desktop sidebar. 32px square Avatar is rendered by the component. */
.group-picker-sidebar .group-picker-trigger {
    padding: var(--space-2);
    border-radius: var(--radius-md);
    border-color: var(--color-border);
    background: var(--color-surface);
}

/* Topbar variant — full-radius pill for the mobile topbar. 26px square
   Avatar is rendered by the component. */
.group-picker-topbar .group-picker-trigger {
    padding: var(--space-1) var(--space-2) var(--space-1) var(--space-1);
    border-radius: var(--radius-full);
    background: var(--color-surface-alt);
    width: auto;
    max-width: 60vw;
}

.group-picker-topbar .group-picker-sub { display: none; }

.group-picker-backdrop {
    position: fixed;
    inset: 0;
    z-index: 19;
    background: transparent;
}

.group-picker-dropdown {
    position: absolute;
    top: calc(100% + var(--space-1));
    left: 0;
    min-width: 240px;
    max-width: 320px;
    background: var(--color-surface);
    border: var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    padding: var(--space-1);
    z-index: 20;
}

/* Topbar pill dropdown anchors right edge to the trigger to stay on-screen */
.group-picker-topbar .group-picker-dropdown {
    left: 0;
    right: auto;
}

.group-picker-section-label {
    padding: var(--space-2) var(--space-3) var(--space-1);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.group-picker-item {
    width: 100%;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: none;
    border: none;
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text);
    text-align: left;
    cursor: pointer;
    transition: background var(--transition);
}

.group-picker-item:hover { background: var(--color-bg-hover); }

.group-picker-item-selected { font-weight: var(--font-weight-semibold); }

.group-picker-item-action { color: var(--color-accent); }

/* Lets the group name absorb the row's free space so the trailing unread
   pill sits flush against the right edge — without this, the badge would
   hug the name instead of the row. */
.group-picker-item-name {
    flex: 1;
    text-align: left;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.group-picker-item-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    color: var(--color-text-muted);
}

.group-picker-item-action .group-picker-item-icon { color: var(--color-accent); }

.group-picker-item-check {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-accent);
}

.group-picker-item-check svg { width: 100%; height: 100%; }

.group-picker-divider {
    height: 1px;
    background: var(--color-border);
    margin: var(--space-1) 0;
}

.group-picker-create {
    padding: var(--space-2) var(--space-3);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

/* ================================================
   User menu (UserMenu.razor) — appears at the bottom
   of the sidebar (desktop) and the right of the
   topbar (mobile). Same dropdown contents in both;
   Variant swaps the trigger chrome.
   ================================================ */
.user-menu { position: relative; }

.user-menu-trigger {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    background: transparent;
    border: none;
    color: var(--color-text);
    cursor: pointer;
    text-align: left;
    transition: background var(--transition);
}

.user-menu-trigger:hover { background: var(--color-bg-hover); }

/* Avatar wrap inside the trigger — position:relative anchors the
   SyncIndicator badge to the avatar's bottom-right corner. */
.user-menu-avatar {
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
}

.user-menu-open .user-menu-trigger { background: var(--color-bg-hover); }

.user-menu-meta {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

.user-menu-name {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-menu-chevron {
    width: 14px;
    height: 14px;
    color: var(--color-text-muted);
    flex-shrink: 0;
}

/* Sidebar variant — row with avatar + name + chevron pinned to the
   bottom of the desktop sidebar. */
.user-menu-sidebar .user-menu-trigger {
    padding: var(--space-2);
    border-radius: var(--radius-md);
}

/* Topbar variant — avatar-only circle in the mobile topbar. Name +
   chevron hide; Avatar component sizes itself via its Size parameter. */
.user-menu-topbar .user-menu-trigger {
    width: auto;
    padding: 0;
    border-radius: var(--radius-full);
}

.user-menu-topbar .user-menu-meta,
.user-menu-topbar .user-menu-chevron { display: none; }

.user-menu-backdrop {
    position: fixed;
    inset: 0;
    z-index: 19;
    background: transparent;
}

.user-menu-dropdown {
    position: absolute;
    min-width: 220px;
    background: var(--color-surface);
    border: var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    padding: var(--space-1);
    z-index: 20;
}

/* Sidebar variant opens upward (the trigger sits at the bottom of the
   sidebar) and aligns to the trigger's left edge. */
.user-menu-sidebar .user-menu-dropdown {
    bottom: calc(100% + var(--space-1));
    left: 0;
}

/* Topbar variant opens downward and aligns to the right of the trigger
   to stay on-screen. */
.user-menu-topbar .user-menu-dropdown {
    top: calc(100% + var(--space-1));
    right: 0;
}

.user-menu-item {
    width: 100%;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: none;
    border: none;
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text);
    text-align: left;
    cursor: pointer;
    transition: background var(--transition);
}

.user-menu-item:hover { background: var(--color-bg-hover); }

.user-menu-item-danger { color: var(--color-danger); }

.user-menu-item-danger:hover { background: var(--color-danger-bg, var(--color-bg-hover)); }

.user-menu-item-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    color: var(--color-text-muted);
}

.user-menu-item-danger .user-menu-item-icon { color: var(--color-danger); }

.user-menu-divider {
    height: 1px;
    background: var(--color-border);
    margin: var(--space-1) 0;
}

/* --- Theme picker (used inside UserMenu dropdown) --- */
.theme-picker {
    display: flex;
    gap: var(--space-1);
    background: var(--color-neutral-100);
    padding: 3px;
    border-radius: var(--radius-md);
    margin: var(--space-2) var(--space-3);
}

.theme-option {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-2);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-muted);
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background var(--transition), color var(--transition);
}

.theme-option svg { width: 14px; height: 14px; }

.theme-option:hover { color: var(--color-text); }

.theme-option-active {
    background: var(--color-surface);
    color: var(--color-text);
    box-shadow: var(--shadow-sm);
}

/* --- Responsive: tablet — sidebar collapses to icon-only (720 – 960) ---
   Same flex-column structure (GroupPicker top, nav middle, UserMenu bottom),
   but the .group-picker-meta / .nav-label / .user-menu-meta sections hide so
   only the avatars + icons remain in the narrow strip. */
@media (min-width: 720px) and (max-width: 959.98px) {
    .app-layout {
        grid-template-columns: var(--sidebar-width-compact) minmax(0, 1fr);
    }

    .sidebar {
        width: var(--sidebar-width-compact);
        padding: var(--space-2);
        gap: var(--space-2);
    }

    .sidebar-nav a {
        justify-content: center;
        padding: var(--space-2);
    }

    .sidebar-nav a .nav-label { display: none; }
    .sidebar-nav .nav-icon { width: 20px; height: 20px; }

    /* Hide the group-picker + user-menu meta sections at compact width —
       leaves the avatar + chevron only. The chevron stays so users still see
       the surface is clickable. */
    .sidebar .group-picker-meta,
    .sidebar .user-menu-meta {
        display: none;
    }

    .sidebar .group-picker-trigger,
    .sidebar .user-menu-trigger {
        justify-content: center;
        gap: 0;
    }

    /* Shrink the GroupPicker's square Avatar so it sits comfortably inside the
       narrow sidebar strip. Avatar sizes itself via inline width/height, so
       !important is unavoidable here without restructuring the component. */
    .sidebar .group-picker .avatar {
        width: 28px !important;
        height: 28px !important;
        font-size: 11.4px !important;

    }
}

/* --- Responsive: mobile single-column grid with bottom tab bar (<720) ---
   Sidebar hides; topbar appears with GroupPicker + UserMenu; nav lives in the
   bottom tabbar. */
@media (max-width: 719.98px) {
    .app-layout {
        grid-template-columns: 1fr;
        grid-template-rows: var(--topbar-height) 1fr;
        grid-template-areas:
            "topbar"
            "content";
    }

    .sidebar {
        display: none;
    }

    .topbar {
        display: flex;
    }

    .tabbar {
        display: flex;
    }

    .page-content {
        padding: var(--space-4);
        padding-bottom: calc(var(--tabbar-height) + env(safe-area-inset-bottom) + var(--space-4));
    }
}

/* Immersive chat (mobile only) — the sidebar is gone at <720px, so the
   grid drops to a single "content" area and the thread takes the full
   viewport with its own back nav. At ≥720px the sidebar is back, the chat
   lives inside the content column normally, and at ≥1024px the chat-split
   adds its own sub-sidebar. */
@media (max-width: 719.98px) {
    .app-layout:has(.chat-page) {
        grid-template-rows: 1fr;
        grid-template-areas: "content";
    }

    .app-layout:has(.chat-page) .topbar,
    .app-layout:has(.chat-page) .tabbar {
        display: none;
    }

    .app-layout:has(.chat-page) .page-content {
        /* No extra padding — the composer is flush with the bottom edge.
           env(safe-area-inset-bottom) keeps the composer above the iOS home
           indicator on devices that have one. */
        padding-bottom: env(safe-area-inset-bottom);
    }
}

/* TaskDetail covers the viewport at mobile widths only — the slide-out
   becomes a full-page takeover. At ≥720px the sidebar stays and the
   detail panel sits inside the content column; at ≥1024px the panel
   becomes a partial slide-out and the topbar/tabbar are already hidden
   by their default rules. */
@media (max-width: 719.98px) {
    .app-layout:has(.task-detail-form) {
        grid-template-rows: 1fr;
        grid-template-areas: "content";
    }

    .app-layout:has(.task-detail-form) .topbar,
    .app-layout:has(.task-detail-form) .tabbar {
        display: none;
    }

    .app-layout:has(.task-detail-form) .page-content {
        padding-bottom: calc(env(safe-area-inset-bottom) + var(--space-4));
    }
}

/* --- Force mobile layout (MAUI host) --- */
body.force-mobile .app-layout {
    grid-template-columns: 1fr;
    grid-template-rows: var(--topbar-height) 1fr;
    grid-template-areas:
        "topbar"
        "content";
}

body.force-mobile .sidebar { display: none; }

body.force-mobile .topbar {
    display: flex;
    padding: 0 var(--space-4);
}

body.force-mobile .tabbar { display: flex; }

body.force-mobile .page-content {
    padding: var(--space-4);
    padding-bottom: calc(var(--tabbar-height) + env(safe-area-inset-bottom) + var(--space-4));
}

body.force-mobile .app-layout:has(.chat-page),
body.force-mobile .app-layout:has(.task-detail-form) {
    grid-template-rows: 1fr;
    grid-template-areas: "content";
}

body.force-mobile .app-layout:has(.chat-page) .topbar,
body.force-mobile .app-layout:has(.chat-page) .tabbar,
body.force-mobile .app-layout:has(.task-detail-form) .topbar,
body.force-mobile .app-layout:has(.task-detail-form) .tabbar {
    display: none;
}

body.force-mobile .app-layout:has(.chat-page) .page-content {
    /* Mirror the <1024px rule — composer hard against the bottom, safe-area only. */
    padding-bottom: env(safe-area-inset-bottom);
}

body.force-mobile .app-layout:has(.task-detail-form) .page-content {
    padding-bottom: calc(env(safe-area-inset-bottom) + var(--space-4));
}