:root {
  --bottom-nav-height: 60px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
}
/* Contained viewport + opaque native status bar: Safari owns the screen edges.
   Insets are normally zero where iOS already reserves the area; never add
   physical screen heights or compensate for a particular iPhone model. */
.auth-layout,.install-gate { min-height:100svh; min-height:100dvh; }
input:focus-visible,textarea:focus-visible,select:focus-visible { outline:2px solid #65d6ff; outline-offset:1px; }
.password-panel h2 { margin-bottom:8px; }
.password-panel .muted { font-size:.9375rem; }
.password-field { margin:18px 0; }
.password-field label { display:block; margin-bottom:7px; font-size:1rem; }
.password-control { position:relative; }
.password-control input { height:56px; min-height:56px; padding:12px 54px 12px 14px; font-size:16px; }
.password-eye { position:absolute; inset:6px 6px 6px auto; width:44px; min-height:44px; padding:0; border:0; background:transparent; color:#9dc8e9; }
.password-eye svg { width:22px; height:22px; }
.password-eye .eye-slash { display:none; }
.password-eye[aria-pressed=true] .eye-slash { display:block; }
.password-checklist { list-style:none; padding:0; margin:10px 0; display:grid; gap:5px; font-size:.875rem; color:#9ab6cb; }
.password-checklist li { display:flex; gap:8px; align-items:baseline; }
.password-checklist [data-valid=true] { color:#5adbc4; }
.password-security-note { font-size:.8125rem; color:#91aabc; margin:10px 0 18px; }
.password-panel .errorlist { font-size:.875rem; padding-left:20px; }

/* Same frame for small phones, tablets and phones rotated into landscape.
   Main owns its scrolling; the header and navigation are non-scrolling rows.
   Flex reserves the navigation's real height, so pages need no magic padding. */
@media(max-width:720px), (max-width:1024px) and (any-pointer:coarse) {
  html.portal-active,html.portal-active body { height:100%; overflow:hidden; overscroll-behavior:none; }
  html.portal-active #application {
    position:fixed; inset:0; height:100%; height:100dvh;
    display:flex; flex-direction:column; overflow:hidden;
  }
  html.portal-active.is-virtual-keyboard-open #application {
    top:var(--visual-top,0px); bottom:auto; height:var(--visual-height,100dvh);
  }
  html.portal-active .sidebar { display:none; }
  html.portal-active .workspace { margin:0; display:flex; flex-direction:column; flex:1; min-height:0; width:100%; overflow:hidden; }
  html.portal-active .workspace>.topbar {
    flex:none; gap:12px;
    padding:calc(12px + var(--safe-top)) calc(16px + var(--safe-right)) 12px calc(16px + var(--safe-left));
  }
  html.portal-active .topbar-brand { font-size:1.4rem; letter-spacing:.12em; }
  html.portal-active .topbar-brand small { display:block; font-size:.65rem; }
  html.portal-active .topbar-tools { gap:10px; }
  html.portal-active .topbar .identity>span:last-child { display:none; }
  html.portal-active .workspace>main {
    flex:1; min-height:0; width:100%; margin:0 auto; overflow-y:auto; overscroll-behavior-y:contain;
    padding:24px calc(16px + var(--safe-right)) 20px calc(16px + var(--safe-left));
    scroll-padding-block:16px; overflow-wrap:anywhere; -webkit-overflow-scrolling:touch;
  }
  html.portal-active .mobile-nav {
    position:static; inset:auto; z-index:10; flex:0 0 auto; display:flex; align-items:stretch; justify-content:space-around;
    min-height:calc(var(--bottom-nav-height) + var(--safe-bottom));
    padding:4px var(--safe-right) var(--safe-bottom) var(--safe-left);
    background:#061523; border-top:1px solid #1c3d54; backdrop-filter:none;
  }
  html.portal-active .mobile-nav a { flex:1; min-width:0; min-height:55px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; padding:3px 0; color:#adbed0; }
  html.portal-active .mobile-nav a[aria-current] { color:#1fbaff; }
  html.portal-active .mobile-nav a span { font-size:.75rem; line-height:1.3; white-space:nowrap; }
  html.portal-active .mobile-nav .ui-icon { width:23px; height:23px; }
  html.portal-active.is-virtual-keyboard-open .mobile-nav,html.portal-active .chat-page .mobile-nav { display:none; }
  html.portal-active .chat-page .workspace>.topbar { display:none; }
  html.portal-active .chat-page .workspace>main { padding:0; overflow:hidden; display:flex; flex-direction:column; }
  html.portal-active .chat-shell { border:0; border-radius:0; height:auto; max-height:none; min-height:0; flex:1; }
  html.portal-active .chat-header { padding:calc(10px + var(--safe-top)) calc(12px + var(--safe-right)) 10px calc(12px + var(--safe-left)); }
  html.portal-active .chat-composer { padding:10px calc(12px + var(--safe-right)) calc(10px + var(--safe-bottom)) calc(12px + var(--safe-left)); }
  html.portal-active.is-virtual-keyboard-open .chat-composer { padding-bottom:10px; }
  html.portal-active.is-virtual-keyboard-open textarea { min-height:64px; max-height:calc(var(--visual-height,100dvh) * .45); }
  html.portal-active.is-virtual-keyboard-open .chat-composer textarea { min-height:48px; max-height:100px; }
  html.portal-active .chat-timeline { overflow-anchor:none; -webkit-overflow-scrolling:touch; }
  html.portal-active .page-heading { flex-wrap:wrap; }
  html.portal-active .form-panel button { max-width:100%; }
  html.portal-active .password-panel { padding:20px 16px; }
  html.portal-active dialog[open],[role=dialog][aria-modal=true] { max-height:calc(var(--visual-height,100dvh) - 24px); overflow-y:auto; }
}