/* App-only additions on top of the design tokens in pb-chat.css. Design values stay in pb-chat.css. */
html, body { height: 100%; background: var(--paper, #F7F4EE); }
body { overscroll-behavior: none; }
html.dark-bg, html.dark-bg body { background: #1E1B17; }
.win { height: 100vh; height: 100dvh; max-width: 760px; margin: 0 auto; }
@media (min-width: 761px) { .win { border-left: 1px solid var(--line); border-right: 1px solid var(--line); } }

/* The mock-up feed is static; the real one scrolls and sticks to the bottom. */
.feed { overflow-y: auto; justify-content: flex-start; -webkit-overflow-scrolling: touch; }
.feed > :first-child { margin-top: auto; }
.bub { white-space: pre-wrap; overflow-wrap: anywhere; }
.bub a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.row { flex-shrink: 0; }
.day, .unread { flex-shrink: 0; }

/* Real images and video in place of the placeholder blocks. */
.img img, .img video { display: block; width: 100%; height: auto; max-height: 260px; object-fit: cover;
  border-radius: var(--r-group); background: var(--placeholder-img); cursor: zoom-in; }
.img video { cursor: default; }
.thumbs img { display: block; width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--r-btn);
  background: var(--placeholder-img); cursor: zoom-in; }

/* Phone: header as in the iPhone screens, safe areas instead of fixed paddings. */
.top { padding-top: env(safe-area-inset-top); height: calc(64px + env(safe-area-inset-top)); }
.comp { padding-bottom: calc(var(--gap-m) + env(safe-area-inset-bottom)); }
@media (pointer: coarse) and (max-width: 600px) {
  .top .wm, .top .sep { display: none; }
  .top .logo { order: 2; }
  .top .who { order: 1; }
  .top .ibtn { order: 3; }
}

/* Onboarding fills the window. */
.ob { min-height: 100%; padding-top: calc(40px + env(safe-area-inset-top)); padding-bottom: calc(32px + env(safe-area-inset-bottom)); }

/* Settings popover */
.menu { position: absolute; top: calc(60px + env(safe-area-inset-top)); right: var(--gap-m); z-index: 5; width: 260px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--sh-pop);
  padding: var(--gap-m); display: flex; flex-direction: column; gap: var(--gap-m); }
.menu h3 { margin: 0; font-size: 12px; font-weight: 500; color: var(--ink-2); }
.seg { display: flex; border: 1px solid var(--line); border-radius: var(--r-field); overflow: hidden; }
.seg button { flex: 1; height: 36px; border: 0; background: var(--surface); color: var(--ink-2); font: 500 13px var(--sans); cursor: pointer; }
.seg button + button { border-left: 1px solid var(--line); }
.seg button[aria-pressed="true"] { background: var(--nav-active); color: var(--ink); }
.menu .btn { width: 100%; }
.menu .hint { margin: 0; }

.banner { flex-shrink: 0; padding: var(--gap-s) var(--gap-l); font-size: 12px; color: var(--ink-2); background: var(--note);
  border-bottom: 1px solid var(--note-line); text-align: center; }
.empty { margin: auto; text-align: center; color: var(--ink-3); font-size: 13px; padding: var(--gap-2xl); }
.ta { overflow-y: auto; }
button:focus-visible, .ta:focus-visible, .inp:focus-visible, a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ta:focus, .inp:focus { outline: none; border-color: var(--dash); }
.drop[hidden] { display: none; }