/* R55: native-scale layouts. JS uses the same 767px single-column boundary. */
html #app, html #app .shell-main, html #app .view, html #app .panel {
  min-inline-size: 0;
  min-block-size: 0;
}
html #app .panel[aria-hidden="true"] { visibility: hidden; pointer-events: none; }
html #app #sidenav .sidenav__btn {
  border-radius: 14px !important;
  scale: 1 !important;
  transform: none !important;
}
html :is(.vy-action-menu, #chat-tools-panel) {
  overflow-y: auto;
  overscroll-behavior: contain;
  overflow-wrap: anywhere;
}

/* A 72px navigation rail leaves 696px at 768: 260px list + 436px thread. */
@media (min-width: 768px) {
  html #app { --list-width: 260px; padding-bottom: 0 !important; }
  html #app #bottomnav { display: none !important; }
  html #app #sidenav {
    display: flex !important;
    flex: 0 0 72px;
    width: 72px !important;
    min-width: 72px !important;
    padding: 8px 2px !important;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  html #app #sidenav .sidenav__btn__label { font-size: 11px !important; line-height: 14px !important; }
  html #app #view-chats { flex-direction: row !important; }
  html #app #view-chats #panel-list {
    display: flex;
    position: relative;
    flex: 0 0 var(--list-width);
    width: var(--list-width);
    max-width: var(--list-width);
    border-right: 1px solid var(--border);
  }
  html #app #view-chats #panel-thread {
    position: relative !important;
    inset: auto !important;
    flex: 1 1 0;
    width: auto !important;
    min-width: 400px;
    max-width: none;
    transform: none !important;
    transition: none !important;
  }
  html #app #panel-list .list-header { padding-inline: 8px; gap: 0; }
  html #app #panel-list .list-header__title { font-size: 20px; }
  html #app #panel-list .chat-row { padding-inline: 10px; }
}
@media (min-width: 1101px) {
  html #app { --list-width: 300px; }
}
@media (min-width: 1500px) and (min-height: 801px) {
  html #app { --list-width: 320px; }
}

/* Five existing destinations use the same labelled controls in low landscape.
   Phone threads still use the full screen; portrait retains the bottom bar. */
@media (min-width: 600px) and (max-width: 860px) and (max-height: 480px) and (orientation: landscape) {
  html #app { padding-bottom: 0 !important; }
  html #app #bottomnav { display: none !important; }
  html #app #sidenav {
    display: flex !important;
    flex: 0 0 72px;
    width: 72px !important;
    min-width: 72px !important;
    padding: max(6px, env(safe-area-inset-top, 0px)) 2px max(6px, env(safe-area-inset-bottom, 0px)) !important;
    gap: 2px;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  html #app #sidenav .sidenav__btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 0 0 56px;
    min-height: 56px !important;
    height: 56px;
    min-width: 44px;
    margin: 0 2px;
    padding: 5px 0;
    gap: 2px;
  }
  html #app #sidenav .sidenav__btn__label { font-size: 11px !important; line-height: 14px !important; }
  html #app #sidenav .sidenav__btn__icon { width: 24px; height: 24px; }
  html #app #sidenav .sidenav__btn:focus-visible { outline-offset: -2px !important; }
  html #app #sidenav .sidenav__btn.is-active::before { display: none; }
}
@media (min-width: 600px) and (max-width: 767px) and (max-height: 480px) and (orientation: landscape) {
  html #app.is-thread-open #sidenav { display: none !important; }
}

/* Comfortable 1280x720 workspace without shrinking fonts or browser zoom. */
@media (min-width: 768px) and (max-height: 800px) {
  html #app #sidenav .sidenav__btn { min-height: 56px !important; padding-block: 6px; }
  html #app .view-header {
    height: 60px;
    min-height: 60px;
    padding-block: 8px;
  }
  html #app #thread-header {
    height: auto;
    min-height: 60px;
    padding-block: 8px;
  }
  html #app #composer-input { max-height: min(120px, 22dvh); }
  html .social-profile { max-height: calc(var(--vy-visible-height, 100dvh) - 24px); }
}
/* Geometry changes immediately. Only surface feedback transitions, with both
   motion preferences respected by the shared motion owner. */
@media (prefers-reduced-motion: no-preference) {
  html:not([data-vy-motion="off"]):not(.motion-off) #app #sidenav .sidenav__btn {
    transition: background-color 140ms ease, color 140ms ease !important;
  }
}

/* Root CSS zoom does not change media-query widths. Match the shell's effective
   width using the adaptive viewport owner; fonts and44px controls stay intact. */
html[data-vy-css-narrow] #app { padding-bottom:calc(60px + var(--safe-bottom,0px)) !important; }
html[data-vy-css-narrow] #app.is-thread-open { padding-bottom:0 !important; }
html[data-vy-css-narrow] #app #sidenav { display:none !important; }
html[data-vy-css-narrow] #app #bottomnav { display:grid !important; }
html[data-vy-css-narrow] #app.is-thread-open #bottomnav { display:none !important; }
html[data-vy-css-narrow] #app #view-chats { flex-direction:column !important; }
html[data-vy-css-narrow] #app #view-chats :is(#panel-list,#panel-thread) {
  position:relative !important; inset:auto !important; flex:1 1 0 !important;
  width:100% !important; min-width:0 !important; max-width:100% !important;
  min-height:0 !important; transform:none !important; transition:none !important;
}
html[data-vy-css-narrow] #app #view-chats .panel[aria-hidden="true"] { display:none !important; }
html[data-vy-css-narrow] #app #view-chats .panel[aria-hidden="false"] { display:flex !important; }
html[data-vy-css-narrow] #app #panel-thread #btn-back { display:grid !important; }
html[data-vy-css-narrow] #app #panel-thread #thread-header { flex:none; min-width:0; }
html[data-vy-css-narrow] #app #panel-thread #messages { flex:1 1 0; min-height:0; }
html[data-vy-css-narrow] #app #panel-thread #composer-wrap { flex:none; min-width:0; }

/*160–279 effective CSS pixels: preserve an actual writing area, then wrap the
   existing action toolbar onto a second row without shrinking touch targets. */
html[data-vy-compact-composer] #app #composer-wrap #composer-bar {
  flex-direction:column !important; align-items:stretch !important; gap:4px !important;
  padding:4px !important; min-width:0; min-height:0;
}
html[data-vy-compact-composer] #app #composer-wrap #composer-bar .composer__field {
  flex:0 0 auto !important; width:100% !important; min-width:0 !important;
  box-sizing:border-box; padding-inline:2px !important;
}
html[data-vy-compact-composer] #app #composer-wrap #composer-bar .composer__actions {
  align-self:flex-end; flex-wrap:wrap !important; justify-content:flex-end;
  max-width:100%; gap:2px !important;
}
html[data-vy-compact-composer] #app #view-chats #composer-input {
  min-width:0 !important; max-height:64px !important; padding-inline:4px !important;
}
html[data-vy-compact-composer] #app #view-chats #thread-header {
  flex-wrap:wrap; gap:2px !important; padding:4px !important; min-height:44px !important;
}
html[data-vy-compact-composer] #app #thread-header .thread-header__info { flex:1 1 70px; }
html[data-vy-compact-composer] #app #thread-header .vy2-header-avatar { display:none; }
html[data-vy-compact-composer] #app #thread-header .thread-header__actions { margin-left:auto; }
html[data-vy-compact-composer] #app #view-chats :is(#reply-bar,#edit-bar) { padding-inline:4px; }
html[data-vy-compact-composer] #app #view-chats .reply-bar__text {
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
html[data-vy-compact-composer] #app #bottomnav {
  grid-template-columns:repeat(3,minmax(44px,1fr)) !important; width:100%; padding-inline:2px !important;
}
html[data-vy-compact-composer] #app:not(.is-thread-open) { padding-bottom:calc(116px + var(--safe-bottom,0px)) !important; }

/* A195px effective landscape height still reserves a line for reading. Long
   input remains scrollable; reply keeps its label and44px cancel control. */
html[data-vy-layout-short] #app #view-chats #thread-header {
  min-height:48px !important; height:48px !important; padding:2px 6px !important;
}
html[data-vy-layout-short] #app #view-chats :is(#reply-bar,#edit-bar) {
  min-height:44px !important; padding:0 6px !important;
}
html[data-vy-layout-short] #app #view-chats .reply-bar__text {
  display:block; white-space:nowrap !important; overflow:hidden; text-overflow:ellipsis;
}
html[data-vy-layout-short] #app #view-chats #composer-wrap #composer-bar { min-height:52px; padding:2px 6px !important; }
html[data-vy-layout-short] #app #view-chats #composer-input { min-height:44px !important; max-height:44px !important; overflow-y:auto !important; }
html[data-vy-layout-short] #app #view-chats #messages { padding-block:2px !important; }