/* Single inset source; tests may override these properties on :root. */
:root {
  --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);
}
body {
  padding-top: max(var(--safe-top), 12px);
  padding-right: max(var(--safe-right), 12px);
  padding-bottom: calc(max(var(--safe-bottom), 16px) + 64px);
  padding-left: max(var(--safe-left), 12px);
}
/* Reserve the hosting badge's usual bottom-right footprint, not its internals. */
.header { top: max(var(--safe-top), 12px); }
.toast {
  bottom: calc(max(var(--safe-bottom), 16px) + 64px);
  right: max(var(--safe-right), 12px);
  max-width: calc(100% - max(var(--safe-left), 12px) - max(var(--safe-right), 12px));
}
.modal-backdrop {
  padding: max(var(--safe-top), 12px) max(var(--safe-right), 12px)
    calc(max(var(--safe-bottom), 16px) + 64px) max(var(--safe-left), 12px);
  overflow-y: auto;
}
body > nav {
  padding-top: max(var(--safe-top), 12px);
  padding-left: max(var(--safe-left), 12px);
  padding-right: max(var(--safe-right), 12px);
}
@media(max-width:768px) {
  .nav-open .nav-links, nav .nav-links {
    top: calc(max(var(--safe-top), 12px) + 80px);
    left: max(var(--safe-left), 12px);
    right: max(var(--safe-right), 12px);
    max-height: calc(100dvh - max(var(--safe-top), 12px) - max(var(--safe-bottom), 16px) - 160px);
    overflow-y: auto;
  }
}
html[data-phone-page="voice"] body { padding: 0; }
html[data-phone-page="voice"] .screen {
  top: calc(max(var(--safe-top), 12px) + 64px);
  bottom: 64px;
  padding: 0 max(var(--safe-right), 24px) max(var(--safe-bottom), 16px) max(var(--safe-left), 24px);
  overflow-y: auto;
  justify-content: flex-start;
}
html[data-phone-page="voice"] .screen > * { flex-shrink: 0; }
html[data-phone-page="voice"] .transcript-area { margin-top: auto; }
#interpreterBadge, #resumeMic, .swipe-exit-hint { max-width: 100%; box-sizing: border-box; }
html[data-phone-page="listen"] body { padding: 0; }
html[data-phone-page="listen"] .wrap {
  padding: max(var(--safe-top), 24px) max(var(--safe-right), 20px)
    calc(max(var(--safe-bottom), 16px) + 64px) max(var(--safe-left), 20px);
}
html[data-phone-page="listen"] .transport {
  position: sticky;
  bottom: calc(max(var(--safe-bottom), 16px) + 64px);
  margin-left: max(var(--safe-left), 0px);
  margin-right: max(var(--safe-right), 0px);
  padding: 12px;
  background: var(--paper, white);
  border-radius: 12px;
  z-index: 2;
}