/* The thread scrolls in its own element with the bottom bar pinned below it — not the document
 * scroll other vanilla pages use on mobile. */
.session-page {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
}
/* Mobile: the shell's main area is unbounded in native-scroll mode, so bound to the viewport. */
@media (max-width: 767px) {
  .session-page {
    height: calc(var(--vh, 1vh) * 100);
    overflow: hidden;
  }
}

/* Always scrolls itself. It keeps the shared .page class (desktop wheel forwarding finds it), so
 * this must out-rank .page's mobile document-scroll rule, `html:not(.harmony) .page`. */
.session-page > .session-scroll.page {
  flex: 1;
  min-height: 0;
  height: auto;
  overflow-y: auto;
  overscroll-behavior-y: contain;
}

/* Capped and centered on desktop, like the sessions list; 20px gutters on mobile. */
.session-thread,
.session-bar > * {
  max-width: 760px;
}
.session-thread {
  box-sizing: content-box;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 8px 20px 24px;
}
@media (min-width: 768px) {
  .session-thread {
    padding: 8px 36px 24px;
  }
  .session-thread,
  .session-bar > * {
    margin-inline: auto;
  }
}

.session-loading {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-top: 8px;
}

.session-earlier {
  margin: 0;
  text-align: center;
  font-size: 13px;
  color: var(--ink-3);
}

.session-attachments {
  display: block;
  margin-bottom: 4px;
  font-size: 12px;
  color: var(--ink-3);
}

.session-bar {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px 20px 16px;
}
.session-bar > * {
  width: 100%;
  box-sizing: border-box;
}
@media (min-width: 768px) {
  .session-bar {
    padding: 8px 36px 20px;
  }
}
/* Mobile: just above the pinned bottom nav (fixed chrome, so its exact height). */
@media (max-width: 767px) {
  .session-bar {
    padding-bottom: calc(10px + var(--stratum-app-shell-nav-height, 0px));
  }
}

/* Tool details panel (claude/Thread.tsx's ToolPanel). */
.tool-panel-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-bottom: 8px;
}

/* Desktop: dock the tool panel to this page, not the viewport, so it lines up with the thread
 * rather than centering across the nav rail too, and give it the thread's outer width (760px
 * content + 36px padding each side). The same approach as media's ReadPage. Mobile keeps
 * BottomPanel's viewport-wide default. The panel sits inside the thread's scroller, but its
 * containing block is this page, so it neither scrolls nor gets clipped with the thread. */
@media (min-width: 768px) {
  .session-page .stratum-bottom-panel {
    position: absolute;
    max-width: calc(760px + 2 * 36px);
  }
}

/* Tool panel title: "Bash  Show the deploy result" in normal case, one size, like the tool rows
 * in the thread. The panel's usual small uppercase label doesn't work for a sentence: capitals look
 * bigger than lowercase at the same size, so an uppercase name never matches its description.
 * BottomPanel's header leaves room for the close button; the summary ellipsizes before it. */
.tool-panel-title {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
}
.tool-panel-summary {
  /* One line that scrolls sideways (swipe or trackpad) to show the rest, rather than an ellipsis;
     no visible scrollbar. */
  min-width: 0;
  overflow-x: auto;
  white-space: nowrap;
  scrollbar-width: none;
  font-weight: 400;
  color: var(--ink-2);
}
.tool-panel-summary::-webkit-scrollbar {
  display: none;
}
/* Each page scrolls inside the shell's main area on desktop and in harmony builds, and scrolls the
 * document on vanilla mobile (AppShellLayout's native scroll mode - see index.css). overscroll-behavior
 * keeps a scroll that hits the top or bottom from chaining into the document, which in the AEA app's
 * browser would collapse its address bar anyway. */
.page {
  height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
}
@media (max-width: 767px) {
  html:not(.harmony) .page {
    height: auto;
    overflow-y: visible;
  }
}

/* Matches PageHeaderDesktop and PageHeaderMobile's own side padding, so content lines up with the
 * title above it. */
.page-content {
  padding: 16px 20px var(--stratum-app-shell-content-inset-bottom, 0px);
}
@media (min-width: 768px) {
  .page-content {
    padding: 16px 36px var(--stratum-app-shell-content-inset-bottom, 0px);
  }
}

.page-content section {
  margin-top: 24px;
}

.page-intro {
  margin: 0;
  font-size: 18px;
}

.page-label {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.page-content p {
  margin: 0 0 6px;
}
/* On desktop the list centers in a readable column, like the session thread; the header title
 * stays left. */
.sessions-content {
  max-width: 760px;
  display: flex;
  flex-direction: column;
}
@media (min-width: 768px) {
  .sessions-content {
    margin-inline: auto;
  }
}

.sessions-host {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.sessions-skeleton-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
}
.sessions-skeleton-row + .sessions-skeleton-row {
  border-top: 1px solid var(--line);
}
.settings {
  max-width: 620px;
  margin: 0 auto;
}
.viewport-debug {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 8px);
  right: 8px;
  z-index: 1000;
  margin: 0;
  padding: 8px 10px;
  font: 11px/1.4 ui-monospace, Menlo, monospace;
  color: #fff;
  background: rgba(0, 0, 0, 0.75);
  border-radius: 8px;
  pointer-events: none;
}

/* Invisible elements whose measured heights read out CSS viewport units and the safe-area inset. */
.viewport-debug-probes {
  position: fixed;
  top: 0;
  left: -10px;
  width: 1px;
  visibility: hidden;
  pointer-events: none;
}
.viewport-debug-probes > div {
  position: absolute;
  top: 0;
  width: 1px;
}
.viewport-debug-safe {
  height: env(safe-area-inset-bottom, 0px);
}
:root {
  /* Extra bottom clearance stratum-ui's AppShellLayout adds under the installed PWA's bottom nav. */
  --pwa-nav-pad: 24px;
}

* {
  box-sizing: border-box;
}

/* --vh (index.tsx), not 100% or 100vh: iOS Safari can leave a CSS viewport height stale across
 * client-side route changes, leaving the page shorter than the screen. */
html,
body {
  margin: 0;
  padding: 0;
  height: calc(var(--vh, 1vh) * 100);
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow: hidden;
}

/* Vanilla mobile pages scroll the document (AppShellLayout's native scroll mode), which keeps iOS
 * Safari's text selection working. Desktop scrolls inside the shell instead.
 *
 * Harmony keeps the document still on mobile too: the AEA app's browser collapses its address bar into
 * a floating pill whenever the document scrolls, covering the bottom nav, and it reports no viewport
 * change that the page could reliably lift the nav by. A document that never scrolls keeps the bar
 * expanded. .harmony is added only by harmony builds (see index.tsx). */
@media (max-width: 767px) {
  html:not(.harmony) body {
    overflow: visible;
  }
}

#root {
  height: 100%;
}