/* Laptop / desktop — full viewport shell (no 430px phone column) */

@media (min-width: 600px) {
  html,
  body {
    width: 100%;
    max-width: none;
  }

  #app {
    max-width: none !important;
    width: 100% !important;
    margin: 0 !important;
  }

  #main {
    max-width: none !important;
    width: 100% !important;
  }

  body.capacitor-android.app-chrome::before {
    left: 0 !important;
    right: 0;
    max-width: none !important;
    width: 100% !important;
    transform: none !important;
  }

  body.app-chrome #main > .hdr,
  body.app-chrome.tab-home #main > .hdr,
  body.app-chrome.hdr-scroll-hidden #main > .hdr,
  body.app-chrome.tab-home.hdr-scroll-hidden #main > .hdr {
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    transform: translate3d(0, calc(-1 * var(--hdr-scroll-offset, 0px)), 0) !important;
  }

  body.nav-swipe-dragging #main > .hdr,
  body.nav-swipe-dragging.hdr-scroll-hidden #main > .hdr {
    left: 0 !important;
    right: 0 !important;
    max-width: none !important;
    transform: none !important;
  }

  #main > .nav,
  .nav.nav--product {
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: none !important;
    transform: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  body.nav-swipe-dragging #main > .nav {
    left: 0 !important;
    right: 0 !important;
    max-width: none !important;
    transform: none !important;
  }

  body.nav-swipe-dragging .screen.nav-swipe-slide {
    max-width: none !important;
    left: 0 !important;
    right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .shovl {
    max-width: none !important;
    width: 100% !important;
    left: 0 !important;
    right: 0 !important;
    margin: 0 !important;
  }

  .shovl .sheet {
    max-width: min(560px, calc(100vw - 48px));
    margin-left: auto;
    margin-right: auto;
  }

  #legal-ov > div,
  #notif-ov .notif-sheet,
  #notif-ov > div {
    max-width: none !important;
    width: 100% !important;
  }

  .treatly-agent-banner {
    left: 24px !important;
    right: 24px !important;
    transform: none !important;
    width: auto !important;
    max-width: none !important;
  }

  /* Home / feed — use full width (not 400px column) */
  .home-mood-panel--rail,
  #today-mood-chip.home-mood-panel--rail,
  .home-mood-quick,
  .home-top-bar--social {
    max-width: none !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .feed-stream--social,
  .feed-stream--bold {
    padding-left: max(20px, env(safe-area-inset-left, 0px));
    padding-right: max(20px, env(safe-area-inset-right, 0px));
  }

  .feed-stream--social > *,
  .feed-stream--bold > *,
  body.tab-home .feed-stream--social .person-feed-card,
  body.tab-home .feed-stream--bold .person-feed-card {
    max-width: none !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .home-scroll,
  .home-scroll-head,
  #home-scroll {
    width: 100%;
    max-width: none;
  }

  .screen.active,
  .screen.active > .app-scroll,
  .screen.active > .product-scroll {
    width: 100%;
    max-width: none;
  }

  #app::before {
    width: 100% !important;
    max-width: none !important;
    left: 0 !important;
    transform: none !important;
  }

  /* Persistent left menu (home drawer) — open by default, minimizable */
  body.desktop-sidebar-mode {
    --desktop-sidebar-w: min(320px, 28vw);
    --desktop-sidebar-offset: 0px;
  }

  body.desktop-sidebar-mode:not(.desktop-sidebar-minimized) {
    --desktop-sidebar-offset: var(--desktop-sidebar-w);
  }

  body.desktop-sidebar-mode.home-drawer-open {
    overflow: auto !important;
  }

  body.desktop-sidebar-mode .home-drawer {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: auto;
    width: var(--desktop-sidebar-w);
    z-index: 96;
    pointer-events: none;
    visibility: hidden;
    transition: width 0.22s ease, visibility 0.22s ease;
  }

  body.desktop-sidebar-mode:not(.desktop-sidebar-minimized) .home-drawer {
    pointer-events: auto;
    visibility: visible;
  }

  body.desktop-sidebar-mode .home-drawer-backdrop {
    display: none !important;
  }

  body.desktop-sidebar-mode .home-drawer-panel {
    position: absolute;
    left: 0;
    right: auto;
    top: 0;
    bottom: 0;
    width: 100%;
    max-width: none;
    transform: none !important;
    border-left: none;
    border-right: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
    box-shadow: none;
  }

  body.desktop-sidebar-mode .home-drawer-close::after {
    content: '‹';
    font-size: 18px;
    line-height: 1;
  }

  body.desktop-sidebar-mode .home-drawer-close {
    font-size: 0;
  }

  body.desktop-sidebar-mode:not(.desktop-sidebar-minimized) .hdr-menu-btn.show {
    display: none !important;
  }

  body.desktop-sidebar-mode.desktop-sidebar-minimized .hdr-menu-btn.show {
    display: inline-flex !important;
  }

  body.desktop-sidebar-mode:not(.desktop-sidebar-minimized).app-chrome #main > .hdr,
  body.desktop-sidebar-mode:not(.desktop-sidebar-minimized).app-chrome.tab-home #main > .hdr,
  body.desktop-sidebar-mode:not(.desktop-sidebar-minimized).app-chrome.hdr-scroll-hidden #main > .hdr,
  body.desktop-sidebar-mode:not(.desktop-sidebar-minimized).app-chrome.tab-home.hdr-scroll-hidden #main > .hdr {
    left: var(--desktop-sidebar-offset) !important;
    width: calc(100% - var(--desktop-sidebar-offset)) !important;
  }

  body.desktop-sidebar-mode:not(.desktop-sidebar-minimized) #main > .nav,
  body.desktop-sidebar-mode:not(.desktop-sidebar-minimized) .nav.nav--product {
    left: var(--desktop-sidebar-offset) !important;
    width: calc(100% - var(--desktop-sidebar-offset)) !important;
  }

  body.desktop-sidebar-mode:not(.desktop-sidebar-minimized) #main > .screen {
    margin-left: var(--desktop-sidebar-offset);
    width: calc(100% - var(--desktop-sidebar-offset));
    max-width: none;
    box-sizing: border-box;
  }

  body.desktop-sidebar-mode:not(.desktop-sidebar-minimized) .screen.nav-swipe-slide {
    left: var(--desktop-sidebar-offset) !important;
    width: calc(100% - var(--desktop-sidebar-offset)) !important;
    margin-left: 0 !important;
  }

  body.desktop-sidebar-mode:not(.desktop-sidebar-minimized) .treatly-agent-banner {
    left: calc(var(--desktop-sidebar-offset) + 24px) !important;
    right: 24px !important;
  }

  /* Home — “might need you” / Reach out alert uses full content width */
  body.tab-home .circle-alert {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box;
  }

  /* Circle tab (reach out / friends list) — fill pane beside sidebar */
  #s-friends.friends-screen,
  #s-friend-profile {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    width: 100% !important;
    max-width: none !important;
  }

  #s-friends #friends-list.friends-list-scroll,
  #s-friends #friends-list.fscroll {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    width: 100% !important;
    max-width: none !important;
  }

  #s-friends .friend-social-card,
  #s-friends .friends-search-wrap,
  #s-friends .friends-wellbeing-alert,
  #s-friends .friends-live-section {
    width: 100%;
    max-width: none;
    box-sizing: border-box;
  }

  .friends-footer-bar {
    left: 0;
    right: 0;
    width: 100%;
    max-width: none;
    padding-left: max(16px, env(safe-area-inset-left, 0px));
    padding-right: max(16px, env(safe-area-inset-right, 0px));
    bottom: calc(72px + env(safe-area-inset-bottom, 0px));
  }

  body.tab-friends #s-friends #friends-list.friends-list-scroll,
  body.tab-friends #s-friends #friends-list.fscroll {
    padding-bottom: calc(120px + env(safe-area-inset-bottom, 0px));
  }

  /* Friend profile — full scroll column */
  body.tab-friend-profile #s-friend-profile {
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    height: 100%;
  }

  #friend-profile-body.friend-profile-scroll,
  .friend-profile-scroll {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    width: 100% !important;
    max-width: none !important;
    padding-left: max(16px, env(safe-area-inset-left, 0px));
    padding-right: max(16px, env(safe-area-inset-right, 0px));
  }

  body.app-chrome.tab-friend-profile #friend-profile-body.friend-profile-scroll.app-scroll {
    padding-top: 4px;
    padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px));
  }

  .fp-profile-card,
  .fp-task-section {
    width: 100%;
    max-width: none;
    box-sizing: border-box;
  }
}