/* Shared viewport shell. Each screen owns its content scrolling strategy. */
.app-page {
  height: 100vh;
  height: var(--app-viewport-height, 100dvh);
  display: flex;
  flex-direction: column;
  padding-bottom: 0;
  overflow: hidden;
}
.app-page .site-header { position: relative; flex: 0 0 auto; }
.app-page .site-footer { display: none; }
.app-page .main-shell {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  overflow: auto;
  overscroll-behavior-y: contain;
  padding-block: 24px;
  scroll-padding-block: 12px;
}
.app-page .messages { flex: 0 0 auto; max-height: 30%; overflow: auto; }
.guest-language { display: flex; gap: 4px; margin: 0; padding: 3px; border: 1px solid var(--line-soft); border-radius: 14px; background: var(--paper); }
.guest-language button { min-height: 40px; padding: 5px 10px; border: 0; border-radius: 10px; background: transparent; color: var(--muted); font-size: var(--text-xs); }
.guest-language button[aria-current] { background: var(--blue); color: var(--primary); font-weight: 700; }
html[dir="ltr"] .icon-arrow,
html[dir="ltr"] .settings-chevron { transform: scaleX(-1); }
html[dir="ltr"] .form-field input:not([type="checkbox"]),
html[dir="ltr"] .form-field textarea { text-align: start; }
html[dir="ltr"] .field-code input:not([type="checkbox"]) { text-align: center; }
html[dir="ltr"] .data-table { text-align: start; }
html[dir="ltr"] .staff-note { border-right: 0; border-inline-start: 3px solid var(--accent); }
@media (min-width: 801px) {
  .header-inner { gap: 16px; }
  .desktop-nav { flex-wrap: wrap; }
  html[lang="en"] .desktop-nav { gap: 16px; }
  html[lang="en"] .desktop-nav a { font-size: var(--text-xs); }
  html[lang="en"] .header-actions .account-chip > span:last-child { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
@media (max-width: 800px) {
  .app-page .site-header { height: calc(56px + env(safe-area-inset-top, 0px)); }
  .app-page .brand-logo { width: 46px; }
  .app-page .main-shell {
    padding: 12px max(14px, env(safe-area-inset-right, 0px)) 12px max(14px, env(safe-area-inset-left, 0px));
    margin-bottom: calc(var(--mobile-nav-height) + env(safe-area-inset-bottom, 0px));
  }
  .app-page.keyboard-open .main-shell { margin-bottom: 0; }
  .app-page .mobile-nav { border-radius: 20px 20px 0 0; }
}