/* A folding window (fold.js). Reyansh (iPhone Duo, 2026-10-27): "make it
 * perfect on the duo", "half app on the folded screen etc should be
 * covered", then "its still terrible": a flat screen, folded or open, keeps
 * the plain phone or desktop layout; only the Viewport Segments API's two
 * segments change it. Laid out by the window, never the device:
 * - Book (two segments side by side): the sidebar fills the left one, the
 *   chat the right one, the crease's band between them stays empty.
 * - Tabletop (stacked segments): the chat reads in the top one, the composer
 *   fills the bottom one (reach and typing), nothing on the band. Not while
 *   the keyboard is up: it covers the bottom one.
 * - Safe areas per edge: the sidebar and the Details panel keep clear of the
 *   insets on their own edges (a side rail of system controls is often on
 *   one side only). Where every inset is 0 nothing moves. */

.rail {
  padding: max(var(--sv-space-3), env(safe-area-inset-top)) var(--sv-space-3) max(var(--sv-space-3), env(safe-area-inset-bottom)) max(var(--sv-space-3), env(safe-area-inset-left));
}
@media (max-width: 960px) {
  .panel { padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) 0; }
}
/* The desktop layout on a touch screen with a side inset (an unfolded foldable, a phone on its side): the chat's column ends where the inset starts. */
@media (min-width: 761px) and (max-width: 960px) {
  .main { padding-right: env(safe-area-inset-right); }
}

/* ---- book: the sidebar on the left segment, the chat on the right ---- */
:root[data-fold="book"] .app { grid-template-columns: var(--fold-start) calc(var(--fold-end) - var(--fold-start)) minmax(0, 1fr); }
:root[data-fold="book"] .rail { grid-column: 1; }
:root[data-fold="book"] .main { grid-column: 3; }
:root[data-fold="book"] :is(.rail, .rail.open) { position: relative; inset: auto; width: auto; transform: none; transition: none; box-shadow: none; z-index: auto; }
:root[data-fold="book"] :is(.topbar > button.rail-toggle, .rail-grip) { display: none; }
:root[data-fold="book"] .topbar { padding-left: var(--sv-space-2); }
:root[data-fold="book"] .transcript { padding-left: var(--sv-space-3); }
:root[data-fold="book"] .composer { margin-left: 0; }
/* The chat's half is phone-wide: the desktop top bar keeps the title and controls, not the meta line. */
:root[data-fold="book"] .topbar > .meta { display: none; }
@media (max-width: 960px) {
  /* The Details overlay stays inside the right segment. */
  :root[data-fold="book"] .panel { width: min(24rem, 100vw - var(--fold-end)); }
}
@media (min-width: 961px) {
  :root[data-fold="book"] .app { grid-template-columns: var(--fold-start) calc(var(--fold-end) - var(--fold-start)) minmax(0, 1fr) 0px; }
  :root[data-fold="book"] .app.panel-open { grid-template-columns: var(--fold-start) calc(var(--fold-end) - var(--fold-start)) minmax(0, 1fr) var(--panel-w); }
  :root[data-fold="book"] .panel { grid-column: 4; }
}

/* ---- tabletop: read on top, type below ---- */
:root[data-fold="tabletop"]:not(.kb-open) .composer {
  min-height: calc(var(--app-h, 100dvh) - var(--fold-end) - max(var(--sv-space-2), env(safe-area-inset-bottom)));
  margin-top: calc(var(--fold-end) - var(--fold-start));
  margin-bottom: max(var(--sv-space-2), env(safe-area-inset-bottom));
}
:root[data-fold="tabletop"]:not(.kb-open) .composer textarea { flex: 1; max-height: none; }