/* Browser/PWA layout: actual Safari chrome and hardware safe areas, no mock phone. */
html[data-platform="web"],html[data-platform="web"] body {
  width:100%;height:100%;min-height:0;margin:0;padding:0;overflow:hidden;
  background:#0d151a;
}
html[data-platform="web"] {
  /* Reserve only the hardware home-indicator area, once. */
  --volts-safe-bottom:min(env(safe-area-inset-bottom,0px),34px);
  --volts-nav-content:68px;
  --volts-nav-bottom:max(9px,var(--volts-safe-bottom));
  --volts-nav-height:calc(var(--volts-nav-content) - 9px + var(--volts-nav-bottom));
}
html[data-platform="web"][data-volts-keyboard="open"] { --volts-safe-bottom:0px; }
html[data-platform="web"] body { display:block; }
html[data-platform="web"] body:before,
html[data-platform="web"] .prototype:after,
html[data-platform="web"] .statusbar { display:none; }
html[data-platform="web"] .prototype {
  width:100%;max-width:560px;height:100vh;height:100dvh;
  height:var(--volts-view-height,100dvh);min-height:0;
  margin:0 auto;border:0;border-radius:0;box-shadow:none;
  padding-top:env(safe-area-inset-top,0px);
  padding-left:env(safe-area-inset-left,0px);
  padding-right:env(safe-area-inset-right,0px);
  padding-bottom:0;
}
/* An installed iOS app has no Safari toolbar. Its visualViewport/100dvh can
 * exclude the status-bar height even though this translucent shell starts
 * behind that bar. Use the full CSS canvas at rest, not a shorter JS height.
 * JS overrides it only for a genuinely open keyboard. Do not fix body/app:
 * that can trigger another WebKit clipping/compositor regression. */
@media(display-mode:standalone) {
  html[data-platform="web"] .prototype {
    height:100vh;height:var(--volts-view-height,100vh);
  }
}
html[data-platform="web"][data-volts-display="standalone"] .prototype {
  height:100vh;height:var(--volts-view-height,100vh);
}
html[data-platform="web"] .app { flex:1;min-height:0;overflow:hidden; }
html[data-platform="web"] .pilot-bar { position:relative;flex-shrink:0; }
html[data-platform="web"] .screen {
  inset:0;padding-top:18px;
  padding-bottom:calc(var(--volts-nav-height) + 22px);
  scroll-padding-top:20px;
  scroll-padding-bottom:calc(var(--volts-nav-height) + 22px);
  -webkit-overflow-scrolling:touch;overscroll-behavior-y:contain;
}
html[data-platform="web"] .screen .header { margin-top:0;min-height:40px; }
html[data-platform="web"] .nav {
  bottom:0;height:var(--volts-nav-height);
  padding:9px 10px var(--volts-nav-bottom);
  align-items:start;
}
html[data-platform="web"] .toast { bottom:calc(var(--volts-nav-height) + 14px); }
html[data-platform="web"] .account-gate,
html[data-platform="web"] .pilot-dialog {
  inset:0;padding-top:calc(25px + env(safe-area-inset-top,0px));
  padding-bottom:calc(18px + var(--volts-safe-bottom));
  -webkit-overflow-scrolling:touch;overscroll-behavior-y:contain;
}
html[data-platform="web"] input,
html[data-platform="web"] select,
html[data-platform="web"] textarea { font-size:16px; }
html[data-platform="web"] .pwa-password-field { position:relative; }
html[data-platform="web"] .pwa-password-field input { width:100%;padding-right:90px; }
html[data-platform="web"] .pwa-password-toggle {
  position:absolute;right:10px;top:50%;transform:translateY(-50%);
  border:0;background:transparent;color:#aebfff;padding:10px 5px;font:inherit;font-size:12px;
}
html[data-platform="web"] .pwa-password-toggle:focus-visible,
html[data-platform="web"] .pwa-backend-retry:focus-visible { outline:2px solid #99aeff;outline-offset:3px; }
html[data-platform="web"] .pwa-demo-note,
html[data-platform="web"] .pwa-preview-note {
  margin:10px 0;color:#aebdd0;font-size:12px;line-height:1.6;
}
html[data-platform="web"] .pwa-tools { display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap; }
html[data-platform="web"] .pwa-network-note {
  margin:10px 0;color:#f0d3a4;font-size:12px;line-height:1.6;
}
html[data-platform="web"] .pwa-information {
  color:#e9eff9;background:linear-gradient(140deg,#1b282f,#101a20);
  border:1px solid #405473;border-radius:24px;width:440px;
  max-width:calc(100vw - 32px);
  max-height:calc(100dvh - 36px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));
  padding:24px;overflow:auto;font-family:inherit;box-shadow:0 24px 80px #0009;
}
html[data-platform="web"] .pwa-information::backdrop { background:#03080cbb;backdrop-filter:blur(7px); }
html[data-platform="web"] .pwa-information h2 { font-size:23px;line-height:1.3;margin:0 0 17px; }
html[data-platform="web"] .pwa-information p { color:#b8c6d9;font-size:14px;line-height:1.7;margin:0 0 14px; }
html[data-platform="web"] .pwa-information .primary { margin-top:10px; }
html[data-platform="web"] .pwa-install {
  border:1px solid #405473;border-radius:12px;background:#1d2d40;
  color:#cad8f6;padding:10px 13px;font:inherit;font-size:12px;cursor:pointer;
}
html[data-platform="web"] .pwa-install:focus-visible {
  outline:2px solid #99aeff;outline-offset:3px;
}
@media(display-mode:standalone) {
  html[data-platform="web"] .pwa-install { display:none; }
}