/* A persistent navigation rail from 681px upward. The photo, scenic heading,
   suggestions and composer are styled by scenic-home.css, not this shell.
   File-only route review deliberately marks its rail inert; keep that mode
   single-pane with its own visible return to the service notice. */
@media (min-width: 681px) {
  body.immersive-navigation .app-shell {
    --wide-rail-width: 64px;
    --wide-sidebar-width: 240px;
  }
  body.immersive-navigation .app-shell:has(> .rail:not([inert]):not([hidden])) {
    display: grid;
    grid-template-columns: var(--wide-rail-width) minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    width: min(720px, calc(100% - 32px));
    max-width: 720px;
    min-width: 0;
  }
  body.immersive-navigation .app-shell > .rail:not([inert]):not([hidden]) {
    /* Overrides the earlier scene-home display:none!important rule. */
    display: flex !important;
    grid-column: 1;
    grid-row: 1;
    width: var(--wide-rail-width);
    height: 100%;
    min-width: 0;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: #ffffff;
  }
  body.immersive-navigation .app-shell > .rail > .brand-mark,
  body.immersive-navigation .app-shell > .rail > button { flex: none; }

  body.immersive-navigation .app-shell:has(> .rail:not([inert]):not([hidden])) > .main {
    position: relative;
    display: block;
    grid-column: 2;
    grid-row: 1;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
  }
  body.immersive-navigation .app-shell:not(.mode-messages) > .sidebar { display: none !important; }
  body.immersive-navigation .app-shell.mode-messages:has(> .rail:not([inert]):not([hidden])) {
    grid-template-columns: var(--wide-rail-width) var(--wide-sidebar-width) minmax(0, 1fr);
  }
  body.immersive-navigation .app-shell.mode-messages:has(> .rail:not([inert]):not([hidden])) > .sidebar {
    display: flex;
    grid-column: 2;
    grid-row: 1;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
  }
  body.immersive-navigation .app-shell.mode-messages:has(> .rail:not([inert]):not([hidden])) > .main { grid-column: 3; }

  /* The rail already exposes profile, routes and messages on the home scene. */
  body.immersive-navigation.scene-home .app-shell:has(> .rail:not([inert]):not([hidden])) .immersive-nav { display: none; }

  /* Hide only returns whose destination is the home page. Editor/photo/guide
     subpages keep their existing return-to-parent controls and focus order. */
  body.immersive-navigation .app-shell:has(> .rail:not([inert]):not([hidden])) :is(#messagesHome, #assistantHome, #profileHome, #routeBack)[aria-label="返回首页"],
  body.immersive-navigation .app-shell:has(> .rail:not([inert]):not([hidden])) #guidePanel .guide-return[data-guide-action="home"][aria-label="返回首页"] {
    display: none !important;
  }
}

@media (min-width: 1200px) {
  body.immersive-navigation .app-shell {
    --wide-rail-width: 76px;
    --wide-sidebar-width: 290px;
  }
  body.immersive-navigation .app-shell:has(> .rail:not([inert]):not([hidden])) {
    width: min(1200px, calc(100% - 64px));
    max-width: 1200px;
  }
}

/* A short landscape viewport still needs reachable rail controls. Scrolling
   remains available when even this compact spacing cannot fit the height. */
@media (min-width: 681px) and (max-height: 540px) {
  body.immersive-navigation .app-shell > .rail:not([inert]):not([hidden]) { padding-block: 12px; }
  body.immersive-navigation .app-shell > .rail > .rail-button { margin-top: 8px; }
  body.immersive-navigation .app-shell > .rail > .rail-button:first-of-type { margin-top: 12px; }
}