/* Desktop enhancements are intentionally isolated from the mobile app layout. */
#desktopNavigation { display: none; }
#desktopSpaces { position: fixed; inset: 0; width: 100%; height: 100dvh; border: 0; background: #141619; z-index: 9999; }
#desktopSpaces { top: 0; height: 100dvh; }
@media (min-width: 1280px) {
    body.desktop-navigation-enabled:has(#desktopSpaces), body.desktop-navigation-enabled.cg-open { background: #17191b !important; background-image: none !important; }
    body.desktop-navigation-enabled.cg-open #friendsGalleryFeedOverlay { --cg-bg: #17191b; background: #17191b; }
    body.desktop-navigation-enabled #friendsGalleryFeedOverlay .cg-back { display: none; }
    body.desktop-navigation-enabled:has(#desktopSpaces)::before, body.desktop-navigation-enabled:has(#desktopSpaces)::after,
    body.desktop-navigation-enabled.cg-open::before, body.desktop-navigation-enabled.cg-open::after { display: none !important; }
    body.desktop-navigation-enabled #circleSwitcher .circle-switcher-header { display: none !important; }
    body.desktop-navigation-enabled #friendsGalleryFeedOverlay .cg-title { display: none; }
    body.desktop-navigation-enabled :is(#circleSwitcher, #friendsGalleryFeedOverlay, #circleSwitcherBackdrop) { left: 280px !important; width: calc(100% - 280px) !important; }
    body.desktop-navigation-enabled #desktopSpaces { left: 280px; width: calc(100% - 280px); }
    body.desktop-navigation-enabled.circle-switcher-open { overflow: hidden; }
    body.desktop-navigation-enabled #circleSwitcher { padding: 64px max(40px, calc((100vw - 1560px) / 2)) 48px !important; background: #17191b !important; transition: none !important; }
    body.desktop-navigation-enabled #circleSwitcher.open { transform: none !important; }
    body.desktop-navigation-enabled:has(#circleSwitcher.open) #desktopNavigation,
    body.desktop-navigation-enabled.cg-open #desktopNavigation,
    body.desktop-navigation-enabled:has(#desktopSpaces) #desktopNavigation { z-index: 10000; }
    body.desktop-navigation-enabled > .full-section { width: calc(100% - 280px); margin-left: 280px; margin-right: 0; }
    body.desktop-navigation-enabled :is(#bottomNav, #dockFlipBtn) { display: none !important; }
    #desktopNavigation { display: flex; flex-direction: column; position: fixed; top: 72px; left: 24px; right: auto; bottom: 24px; width: 232px; box-sizing: border-box; padding: 0 16px 0 0; border: 0; border-right: 1px solid #303338; background: transparent; box-shadow: none; z-index: 80; gap: 16px; }
    #desktopNavigation .desktop-nav-links { min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
    #desktopNavigation .desktop-nav-group + .desktop-nav-group { margin-top: 18px; padding-top: 14px; border-top: 1px solid #303338; }
    #desktopNavigation h2 { margin: 0 0 6px; padding: 0 14px; font: 600 12px system-ui, sans-serif; color: #aeb5c2; letter-spacing: 0; }
    #desktopNavigation button { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 42px; flex-shrink: 0; padding: 10px 14px; border: 0; border-radius: 8px; background: transparent; color: #d9dde4; font: 500 15px system-ui, sans-serif; text-align: left; cursor: pointer; }
    #desktopNavigation .desktop-nav-primary button { min-height: 50px; font-size: 18px; font-weight: 600; }
    #desktopNavigation svg { width: 22px; height: 22px; flex: 0 0 22px; }
    #desktopNavigation button:hover { background: #25282e; }
    #desktopNavigation button[aria-current="page"] { background: #302d23; color: #f2c14e; }
    #desktopNavigation button:focus-visible { outline: 2px solid #f2c14e; outline-offset: -2px; }
    #desktopNavigation .desktop-nav-create { margin-top: auto; background: #f2c14e; color: #191b20; min-height: 48px; justify-content: center; font-weight: 700; }
    #desktopNavigation .desktop-nav-create:hover { background: #ffda77; }
    #desktopNavigation .desktop-nav-create > span:first-child { font-size: 24px; }
    #desktopNavigation .desktop-nav-create:focus-visible { outline-color: #fff; }
}
#circleSwitcherList.circle-switcher-list { width: 100%; justify-items: stretch; }
#circleSwitcherList > .csp-content { min-width: 0; width: 100%; }
@media (min-width: 1024px) {
    /* Activity workspaces retain their existing tab visibility and actions. */
    :is(#routine, #workouts, #food, #plans) > .sec-container { max-width: 1280px !important; padding-inline: 40px !important; }
    :is(#routine, #workouts, #food, #plans) :is(.rtn-tabs, .wkt-icon-tabs, .fnt-tabs, .pln-tab-bar) { justify-content: flex-start; }
    :is(#routine, #workouts, #food, #plans) :is(.rtn-tab, .wkt-icon-tab, .fnt-tab, .pln-tab) { flex: 0 1 auto; min-width: 120px; }
    :is(#routine, #workouts, #food) .routine-search-wrap { max-width: 760px; }
    #workouts .new-workout-grid, #food .new-food-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
    #workouts .wkt-volume-chart { min-height: 220px; }
    :is(#rtnCalDiv, #wktDivCalendar, #fntCalendarTab) { max-width: 1000px; margin-inline: auto; }
    :is(#routine, #workouts, #food) :is(.rtn-cal-grid, .fnt-cal-grid) { gap: 8px; }
    :is(#routine, #workouts, #food) :is(.rtn-cal-grid, .fnt-cal-grid) > * { min-height: 72px; }
    #routine .new-timeline { max-width: 1000px; }
    #routine .rtn-stat-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
    #food #fntMealsTab { display: grid; grid-template-columns: minmax(300px, .8fr) minmax(0, 1.2fr); column-gap: 32px; align-items: start; }
    #food #fntMealsTab > .fnt-date-nav { grid-column: 1 / -1; }
    #food #fntMealsTab > .fnt-cal-summary { grid-column: 1; grid-row: 2 / 4; margin: 0; }
    #food #fntMealSectionHdr { grid-column: 2; grid-row: 2; }
    #food #fntMealList { grid-column: 2; grid-row: 3; min-width: 0; }
    #plans #plnGoalList { gap: 24px; }
    #plans .pln-hero { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
    /* The games library is a desktop destination; gameplay keeps its own sizing. */
    #gamesHubOverlay { padding: 32px; align-items: center; }
    #gamesHubOverlay .gh-sheet { width: 100%; max-width: 1200px; max-height: calc(100dvh - 64px); border-radius: 8px; padding: 24px 32px; }
    #gamesHubOverlay .gh-handle-bar { display: none; }
    #gamesHubOverlay .gh-header { margin-bottom: 24px; }
    #gamesHubOverlay .gh-orbs-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
    #gamesHubOverlay .gh-orb-desc { font-size: 14px; line-height: 1.5; }
    #gamesHubOverlay .gh-lb-game-tabs { flex-wrap: wrap; }
    /* Desktop conversation header occupies its own row instead of covering messages. */
    #agentChatPanel { width: 100%; max-width: 1120px; }
    #agentChatPanel .agc-header { position: relative; inset: auto; flex-shrink: 0; align-items: center; min-height: 80px; padding: 12px 28px !important; border-bottom: 1px solid var(--ag-line) !important; }
    #agentChatPanel .agc-contact { flex-direction: row; gap: 12px; }
    #agentChatPanel .agc-contact-avatar { width: 44px; height: 44px; font-size: 22px; }
    #agentChatPanel .agc-thread { padding: 24px 32px !important; scroll-padding-top: 24px; }
    #agentChatPanel .agc-bubble { max-width: min(760px, 80%) !important; overflow-wrap: anywhere; }
    #agentChatPanel .agc-composer-wrap { padding: 16px 32px; }
    #agentChatPanel .agc-composer-menu { left: 32px; width: 340px; }
    /* Profile: identity and activity share the available desktop width. */
    #photos > .sec-container { width: 100%; max-width: 1200px !important; margin-inline: auto; padding-inline: 32px; }
    #photos .profile-hub-pane, #photos .profile-occasions-view, #photos .gallery-toolbar { width: 100%; max-width: none; }
    #photos .sec-header.profile-hero-header { text-align: left; margin-bottom: 24px; padding: 24px 0; border-radius: 0; }
    #photos .sec-header.profile-hero-header.has-avatar { padding: 96px 24px 24px; }
    #photos .sec-header.profile-hero-header:not(.has-avatar)::after { display: none; }
    #photos .profile-hero-copy { text-align: left; margin-top: 0; align-items: flex-start; }
    #photos .sec-header.profile-hero-header h2 { font-size: 32px; letter-spacing: 0; }
    #photos .sec-header.profile-hero-header p { max-width: none; }
    #photos .pov-activity-list { color: #aeb5c2; }
    #photos .gallery-toolbar { justify-content: space-between; margin-bottom: 28px; }
    #photos #profileOverviewPane { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px 32px; max-width: none; }
    #photos #profileOverviewPane > * { min-width: 0; margin: 0; }
    #photos .pov-hero-card { grid-column: 1; padding: 0 0 24px; background: none; border: 0; border-radius: 0; box-shadow: none; }
    #photos .pov-stats-row { grid-column: 2; align-self: center; }
    #photos .pov-display-name { font-size: 24px; overflow-wrap: anywhere; letter-spacing: 0; }
    #photos .pov-bio-keywords { flex-wrap: wrap; }
    #photos .pov-action-btn { min-height: 40px; font-size: 13px; }
    #photos .pov-card { padding: 20px 0; background: none; border: 0; border-top: 1px solid rgba(255,255,255,.14); border-radius: 0; box-shadow: none; }
    #photos .pov-card-header { gap: 10px; flex-wrap: wrap; }
    #photos .pov-section-title { font-size: 16px; }
    #photos .pov-bio-text { font-size: 15px; line-height: 1.6; overflow-wrap: anywhere; }
    #photos .pov-gallery-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    #photos #profileDashboardView { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; max-width: none; }
    #photos #profileDashboardView > .idash-card { min-width: 0; margin: 0; }
    #photos #profileOccasionsGrid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
    #profileModal .profile-modal-box { width: 720px; max-width: calc(100vw - 96px); max-height: calc(100dvh - 80px); padding: 32px; border-radius: 8px; }
    #profileModal .profile-bio-input { min-height: 110px; }
    #profileModal .auth-input { font-size: 15px; }
    #profileModal .profile-avatar-section { justify-content: flex-start; gap: 24px; }
    :is(#photos, #profileModal) :is(button, input, textarea):focus-visible { outline: 2px solid #f2c14e; outline-offset: 3px; }
    /* Chat workspaces: scroll messages, not the header or composer. */
    #dmOverlay { padding: 24px 32px; background: var(--cx-bg); }
    #dmOverlay .dm-container {
        max-width: 1120px;
        min-height: 0;
        border-inline: 1px solid var(--cx-line);
        background: var(--cx-bg);
    }
    #dmOverlay .dm-header { min-height: 76px; padding: 16px 28px; }
    #dmOverlay .dm-messages { min-height: 0; padding: 24px 28px; overscroll-behavior: contain; }
    #dmOverlay .dm-input-bar { padding: 16px 28px !important; flex-shrink: 0; }
    #circleView.circle-view.gc-mode {
        inset: 0;
        padding: 24px max(32px, calc((100vw - 1120px) / 2));
        box-sizing: border-box;
        min-height: 0;
        height: 100dvh;
        background: var(--cx-bg);
        border: 0;
    }
    #circleView.gc-mode::before, #circleView.gc-mode::after { display: none; }
    #circleView.gc-mode .circle-view-inner { width: 100%; overflow: hidden !important; }
    #circleView.gc-mode .circle-view-header { flex-shrink: 0; padding: 12px 28px 0; max-height: 230px; overflow-y: auto; }
    #circleView.gc-mode .circle-hero-row { padding: 8px 0; gap: 8px; }
    #circleView.gc-mode .circle-hero-orb-shell { width: 48px; height: 48px; }
    #circleView.gc-mode .circle-hero-orb { width: 48px; height: 48px; }
    #circleView.gc-mode .circle-hero-name { font-size: 22px; letter-spacing: 0; }
    #circleView.gc-mode .circle-seg { padding-inline: 28px; margin-top: 8px; }
    #circleView.gc-mode .circle-feed { min-height: 0; }
    #circleView.gc-mode .gc-wrap { display: flex; flex-direction: column; overflow: hidden; }
    #circleView.gc-mode #gcMessages { overflow-y: auto; overscroll-behavior: contain; padding: 24px 28px; }
    #circleView.gc-mode #gcInputBar { width: 100%; max-width: none; margin: 0; padding: 16px 28px !important; }
    :is(#dmOverlay, #circleView.gc-mode) .cx-grp { padding-inline: 0; }
    :is(#dmOverlay, #circleView.gc-mode) .cx-bub { max-width: min(640px, 72%); font-size: 15px; line-height: 1.55; letter-spacing: 0; }
    :is(#dmOverlay, #circleView.gc-mode) .cx-bub.card { max-width: min(560px, 72%); }
    :is(#dmOverlay, #circleView.gc-mode) .cx-bub.media { max-width: min(440px, 65%); }
    :is(#dmOverlay, #circleView.gc-mode) :is(button, textarea):focus-visible { outline: 2px solid var(--cx-accent); outline-offset: 3px; }
    #circleSwitcher.circle-switcher {
        padding: 64px max(40px, calc((100vw - 1280px) / 2)) 110px !important;
        box-sizing: border-box;
    }
    #circleSwitcher .circle-switcher-header {
        padding: 12px 0 24px !important;
        text-align: left !important;
    }
    #circleSwitcher .circle-switcher-title-wrap { text-align: left !important; }
    #circleSwitcherTitle {
        justify-content: flex-start !important;
        font-size: 32px !important;
        line-height: 1.25;
    }
    #circleSwitcherSubtitle { text-align: left !important; padding: 8px 0 0 !important; }
    #circleSwitcher .csp-search-row { padding: 0 0 20px; gap: 16px; }
    #circleSwitcher .csp-search-inner { max-width: 600px; border-radius: 8px; }
    #circleSwitcher .csp-search-input { font-size: 15px; min-height: 44px; }
    #circleSwitcher .csp-create-btn { margin-left: auto; min-height: 44px; border-radius: 8px; }
    #circleSwitcher .csp-filters { padding: 0; margin-bottom: 24px; border-bottom: 1px solid rgba(255,255,255,.14); }
    #circleSwitcher .csp-filter-tab { min-height: 44px; padding-inline: 20px; font-size: 14px; }
    #circleSwitcher .csp-content { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; align-items: start; }
    #circleSwitcher .csp-content:has(.csp-activity-list) { grid-template-columns: minmax(0, 1fr) 300px; }
    #circleSwitcher .csp-section { min-width: 0; padding: 0; grid-column: 1; }
    #circleSwitcher .csp-section:has(.csp-activity-list) { grid-column: 2; grid-row: 1 / span 3; }
    #circleSwitcher .csp-section-head { padding: 0 0 14px; gap: 12px; }
    #circleSwitcher .csp-section-title { font-size: 18px; }
    #circleSwitcher .csp-activity-list { margin: 0; border: 0; border-radius: 0; background: none; }
    #circleSwitcher .csp-activity-item { padding: 16px 0; gap: 10px; }
    #circleSwitcher .csp-activity-dot { left: 36px; }
    #circleSwitcher .csp-circles-scroll,
    #circleSwitcher .csp-discover-scroll {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
        gap: 16px;
        padding: 0;
        overflow: visible;
    }
    #circleSwitcher .csp-circle-card,
    #circleSwitcher .csp-discover-card {
        min-width: 0;
        min-height: 210px;
        padding: 20px 16px;
        border-radius: 8px;
    }
    #circleSwitcher .csp-card-name,
    #circleSwitcher .csp-discover-name { font-size: 15px; white-space: normal; overflow-wrap: anywhere; line-height: 1.45; }
    #circleSwitcher .csp-card-meta,
    #circleSwitcher .csp-discover-meta { font-size: 12px; color: #aeb5c2; }
    #circleSwitcher .csp-card-status { font-size: 12px; color: #aeb5c2; margin-top: 10px; }
    #circleSwitcher .csp-card-role { font-size: 11px; }
    #circleSwitcher .csp-circle-card:hover,
    #circleSwitcher .csp-discover-card:hover { border-color: #f2c14e; background: rgba(255,255,255,.08); }
    #circleSwitcher :is(button, input, [role="button"]):focus-visible { outline: 2px solid #f2c14e; outline-offset: 3px; }
    #circleSwitcher .csp-content > div:last-child:not([class]) { display: none; }
    #circleSwitcher .csp-loading,
    #circleSwitcher .csp-empty { grid-column: 1 / -1; padding: 24px 0; }
}