/* R56: quiet navigation and bounded shell geometry. Loaded after R55.
   Inner list/header/search/stories and thread media have separate owners.
   The R55 767px, CSS-narrow, keyboard and compact-composer paths stay intact. */

html #app {
  --home-rail-width: 64px;
  --home-list-target: 260px;
}

html #app #sidenav {
  box-sizing: border-box;
  align-items: stretch;
  gap: 6px;
  border-right-color: var(--home-line, var(--border));
  scrollbar-width: thin;
  overscroll-behavior: contain;
}

html #app #sidenav .sidenav__btn {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 0 0 60px;
  min-width: 44px;
  min-height: 60px !important;
  height: 60px;
  margin: 0 2px;
  padding: 7px 0 !important;
  gap: 5px;
  border-radius: 16px !important;
  color: var(--home-muted, var(--text-muted)) !important;
  background: transparent !important;
  box-shadow: none !important;
  scale: 1 !important;
  translate: none !important;
  transform: none !important;
  animation: none !important;
}

html #app #sidenav .sidenav__btn.is-active {
  color: var(--home-accent, var(--accent-text, var(--accent))) !important;
  background: var(--home-selected, var(--accent-soft)) !important;
}

/* One selected surface; the former edge stripe competes with it. */
html #app #sidenav .sidenav__btn.is-active::before {
  display: none !important;
}

html #app #sidenav .sidenav__btn__icon {
  display: grid;
  place-items: center;
  flex: 0 0 24px;
  inline-size: 24px;
  block-size: 24px;
  line-height: 0;
  scale: 1 !important;
  transform: none !important;
  animation: none !important;
}

html #app #sidenav .sidenav__btn__icon > svg {
  display: block;
  inline-size: 24px;
  block-size: 24px;
}

html #app #sidenav .sidenav__btn__label {
  max-inline-size: 100%;
  margin: 0;
  font-size: 11px !important;
  line-height: 14px !important;
  font-weight: 550;
  letter-spacing: 0 !important;
  white-space: nowrap !important;
  overflow-wrap: normal !important;
}

html #app #sidenav .sidenav__btn.is-active .sidenav__btn__label {
  font-weight: 650;
}

/* Keep live unread badges anchored inside their existing controls. */
html #app #sidenav .sidenav__btn .vh-navbadge,
html #app #bottomnav .bottomnav__btn .vh-navbadge {
  box-sizing: border-box;
  inset-inline-start: auto;
  inset-inline-end: 3px;
  top: 4px;
  left: auto;
  right: 3px;
  max-inline-size: calc(100% - 6px);
  min-inline-size: 18px;
  block-size: 18px;
  padding: 0 4px;
  border-width: 1px;
  font-size: 10px;
  line-height: 16px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: none;
  transform: none !important;
  animation: none !important;
}

html #app #sidenav .sidenav__btn:focus-visible,
html #app #bottomnav .bottomnav__btn:focus-visible {
  outline: 2px solid var(--home-accent, var(--accent-text, var(--accent))) !important;
  outline-offset: -3px !important;
}

/* Retain the existing 60px bar and safe-area reserve; no new bottom offset.
   R55 compact-composer owns its special three-column layout below280px. */
html:not([data-vy-compact-composer]) #app #bottomnav {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 0;
}

html #app #bottomnav .bottomnav__btn {
  min-inline-size: 44px;
  min-block-size: 56px;
  border-radius: 14px !important;
  scale: 1 !important;
  translate: none !important;
  transform: none !important;
  animation: none !important;
}

html #app #bottomnav .bottomnav__btn::before {
  inline-size: min(48px, calc(100% - 8px));
  block-size: 28px;
  border-radius: 10px;
  transform: translateX(-50%) !important;
  transition: opacity 140ms ease !important;
}

html #app #bottomnav .bottomnav__btn__icon {
  scale: 1 !important;
  translate: none !important;
  transform: none !important;
  animation: none !important;
}

html #app #bottomnav .bottomnav__btn__label {
  font-size: 11px !important;
  line-height: 14px !important;
  font-weight: 550;
}

html #app #bottomnav .bottomnav__btn.is-active .bottomnav__btn__label {
  font-weight: 650;
}

/* The clips player continues to own its dark bottom bar and contrast. */
html #app:not([data-view="clips"]) #bottomnav {
  background: var(--home-surface, var(--surface)) !important;
  border-top-color: var(--home-line, var(--border));
  box-shadow: 0 -1px 0 color-mix(in srgb, var(--home-line, var(--border)) 40%, transparent) !important;
}

html #app:not([data-view="clips"]) #bottomnav .bottomnav__btn {
  color: var(--home-muted, var(--text-muted)) !important;
}

html #app:not([data-view="clips"]) #bottomnav .bottomnav__btn.is-active {
  color: var(--home-accent, var(--accent-text, var(--accent))) !important;
}

html #app:not([data-view="clips"]) #bottomnav .bottomnav__btn::before {
  background: var(--home-selected, var(--accent-soft));
}

html #app[data-view="chats"] #sidenav {
  background: var(--home-subtle, var(--surface-2)) !important;
}

html #app #view-chats {
  background: var(--home-stage, var(--bg));
}

html #app #view-chats #panel-list {
  background: var(--home-surface, var(--surface)) !important;
  border-right-color: var(--home-line, var(--border));
}

/* No outer app margin/padding: visualViewport and fixed overlays keep their
   R55 coordinate system. At768,64+260 leaves444px for the thread. */
@media (min-width: 768px) {
  html:not([data-vy-css-narrow]) #app {
    --list-width: min(var(--home-list-target), max(260px, calc(var(--vy-visible-width, 100vw) - var(--home-rail-width) - 400px)));
  }

  html:not([data-vy-css-narrow]) #app #sidenav {
    flex: 0 0 var(--home-rail-width);
    width: var(--home-rail-width) !important;
    min-width: var(--home-rail-width) !important;
    padding: max(12px, env(safe-area-inset-top, 0px)) 2px max(12px, env(safe-area-inset-bottom, 0px)) !important;
  }

  html:not([data-vy-css-narrow]) #app #view-chats #panel-list {
    box-sizing: border-box;
    flex: 0 0 var(--list-width);
    width: var(--list-width);
    max-width: var(--list-width);
  }
}

@media (min-width: 1024px) {
  html #app { --home-list-target: 320px; }
}

@media (min-width: 1101px) {
  html #app { --home-rail-width: 76px; }
}

@media (min-width: 1200px) {
  html #app { --home-list-target: 352px; }
}

/* Low landscape retains five labelled44px targets in the existing rail.
   Display/hiding at600–767 and CSS-narrow stays owned by navigation-r55. */
@media (min-width: 600px) and (max-height: 500px) and (orientation: landscape) {
  html:not([data-vy-css-narrow]) #app #sidenav {
    flex: 0 0 64px;
    width: 64px !important;
    min-width: 64px !important;
    gap: 4px;
    padding: max(6px, env(safe-area-inset-top, 0px)) 2px max(6px, env(safe-area-inset-bottom, 0px)) !important;
  }

  html:not([data-vy-css-narrow]) #app { --home-rail-width: 64px; }

  html #app #sidenav .sidenav__btn {
    flex-basis: 48px;
    min-height: 48px !important;
    height: 48px;
    padding-block: 3px !important;
    gap: 2px;
    border-radius: 13px !important;
  }

  html #app #sidenav .sidenav__btn__icon {
    flex-basis: 22px;
    inline-size: 22px;
    block-size: 22px;
  }

  html #app #sidenav .sidenav__btn__icon > svg {
    inline-size: 22px;
    block-size: 22px;
  }
}

/* At320, five64px cells fit their existing11px labels. Physical insets remain. */
@media (max-width: 360px) {
  html #app #bottomnav {
    padding-inline: env(safe-area-inset-left, 0px) env(safe-area-inset-right, 0px);
  }
}

@media (hover: hover) {
  html #app #sidenav .sidenav__btn:not(.is-active):hover {
    background: var(--home-surface, var(--surface)) !important;
    color: var(--home-ink, var(--text)) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html #app #sidenav .sidenav__btn,
  html #app #bottomnav .bottomnav__btn,
  html #app #bottomnav .bottomnav__btn::before {
    transition: none !important;
  }
}

html:is([data-vy-motion="off"], .motion-off) #app #sidenav .sidenav__btn,
html:is([data-vy-motion="off"], .motion-off) #app #bottomnav .bottomnav__btn,
html:is([data-vy-motion="off"], .motion-off) #app #bottomnav .bottomnav__btn::before {
  transition: none !important;
}