/*
 * Vestibular AI — PWA shell styles.
 *
 * Scoped to the shell's own elements. The one exception is the safe-area rule
 * for the workspace's bottom navigation, which applies only in installed mode:
 * on a phone with a home indicator the browser's chrome is gone, and a bottom
 * bar that was fine in a tab sits underneath the indicator once installed.
 * That is a viewport adaptation, not a change to the workspace's layout
 * decisions, and it is declared as such in PWA_ARCHITECTURE.md.
 */

:root {
  --pwa-safe-top: env(safe-area-inset-top, 0px);
  --pwa-safe-bottom: env(safe-area-inset-bottom, 0px);
  --pwa-safe-left: env(safe-area-inset-left, 0px);
  --pwa-safe-right: env(safe-area-inset-right, 0px);
  --pwa-indigo: #4338ca;
  --pwa-ink: #1f2430;
  --pwa-line: #d8dde6;
  --pwa-warn: #b45309;
  --pwa-warn-bg: #fff7ed;
  --pwa-error: #b91c1c;
  --pwa-error-bg: #fef2f2;
  --pwa-ok: #15803d;
}

/* ------------------------------------------------------------- splash */

#pwa-splash {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: #f5f7f9;
  color: var(--pwa-ink);
  font: 15px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  padding: calc(24px + var(--pwa-safe-top)) 24px calc(24px + var(--pwa-safe-bottom));
  text-align: center;
}

#pwa-splash .pwa-splash-mark {
  width: 72px;
  height: 72px;
  border-radius: 18px;
  background: var(--pwa-indigo);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 34px;
  font-weight: 600;
  letter-spacing: 0.5px;
}

#pwa-splash .pwa-splash-name { font-size: 19px; font-weight: 650; }
#pwa-splash .pwa-splash-sub { color: #5b6472; }
#pwa-splash .pwa-splash-demo {
  margin-top: 14px;
  font-size: 12.5px;
  color: var(--pwa-warn);
}

/* -------------------------------------------------------------- shell */

.pwa-shell {
  font: 13.5px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--pwa-ink);
}

.pwa-banners {
  position: fixed;
  top: calc(8px + var(--pwa-safe-top));
  left: calc(8px + var(--pwa-safe-left));
  right: calc(8px + var(--pwa-safe-right));
  z-index: 8000;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}

.pwa-banner {
  pointer-events: auto;
  border: 1px solid var(--pwa-line);
  border-radius: 10px;
  padding: 9px 12px;
  background: #fff;
  box-shadow: 0 6px 22px rgba(15, 23, 42, 0.12);
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: 560px;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
}

.pwa-banner-text { color: #4a5361; }

.pwa-banner-offline,
.pwa-banner-degraded,
.pwa-banner-unknown {
  border-color: #f0c38a;
  background: var(--pwa-warn-bg);
}

.pwa-banner-offline strong,
.pwa-banner-degraded strong,
.pwa-banner-unknown strong { color: var(--pwa-warn); }

.pwa-banner-update { border-color: #c7d2fe; background: #eef2ff; }
.pwa-banner-update strong { color: var(--pwa-indigo); }

.pwa-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }

.pwa-btn {
  font: inherit;
  border: 1px solid var(--pwa-line);
  background: #fff;
  color: var(--pwa-ink);
  border-radius: 8px;
  padding: 8px 12px;
  min-height: 44px;
  cursor: pointer;
}

.pwa-btn[disabled] { opacity: 0.55; cursor: not-allowed; }
.pwa-btn-primary {
  background: var(--pwa-indigo);
  border-color: var(--pwa-indigo);
  color: #fff;
}
.pwa-btn-quiet { background: #eef2ff; }

/* ----------------------------------------------------------- launcher */

.pwa-launcher {
  position: fixed;
  right: calc(12px + var(--pwa-safe-right));
  bottom: calc(76px + var(--pwa-safe-bottom));
  z-index: 8000;
  width: 44px;
  height: 44px;
  border-radius: 22px;
  border: 1px solid var(--pwa-line);
  background: #fff;
  color: var(--pwa-ink);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.14);
}

@media (min-width: 900px) {
  .pwa-launcher { bottom: calc(16px + var(--pwa-safe-bottom)); }
}

/* -------------------------------------------------------------- panel */

.pwa-panel {
  position: fixed;
  inset: 0;
  z-index: 8500;
  background: rgba(15, 23, 42, 0.35);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: calc(12px + var(--pwa-safe-top)) 12px calc(12px + var(--pwa-safe-bottom));
}

@media (min-width: 700px) {
  .pwa-panel { align-items: center; }
}

.pwa-panel-card {
  background: #fff;
  border-radius: 14px;
  border: 1px solid var(--pwa-line);
  width: 100%;
  max-width: 560px;
  max-height: 82vh;
  overflow: auto;
  padding: 14px;
  box-sizing: border-box;
}

.pwa-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.pwa-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }

.pwa-tab {
  font: inherit;
  border: 1px solid var(--pwa-line);
  background: #fff;
  border-radius: 999px;
  padding: 7px 12px;
  min-height: 40px;
  cursor: pointer;
}

.pwa-tab-active {
  background: var(--pwa-indigo);
  border-color: var(--pwa-indigo);
  color: #fff;
}

.pwa-panel h3 { margin: 0 0 8px; font-size: 15px; }
.pwa-muted { color: #5b6472; }
.pwa-steps { padding-left: 20px; margin: 6px 0; }
.pwa-steps li { margin-bottom: 4px; }

.pwa-dl {
  display: grid;
  grid-template-columns: minmax(120px, 42%) 1fr;
  gap: 6px 12px;
  margin: 0;
}

.pwa-dl dt { color: #5b6472; }
.pwa-dl dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.pwa-demo-line {
  margin: 14px 0 0;
  padding-top: 10px;
  border-top: 1px dashed var(--pwa-line);
  color: var(--pwa-warn);
  font-size: 12.5px;
}

.pwa-demo-strip {
  position: fixed;
  left: calc(10px + var(--pwa-safe-left));
  bottom: calc(4px + var(--pwa-safe-bottom));
  z-index: 7000;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 11.5px;
  color: var(--pwa-warn);
  background: rgba(255, 247, 237, 0.92);
  border: 1px solid #f0c38a;
  border-radius: 8px;
  padding: 3px 8px;
  pointer-events: none;
  max-width: calc(100vw - 90px);
}

@media (min-width: 900px) {
  .pwa-demo-strip { bottom: calc(10px + var(--pwa-safe-bottom)); }
}

/* ------------------------------------------------------------ overlay */

.pwa-overlay {
  position: fixed;
  inset: 0;
  z-index: 9500;
  background: rgba(127, 29, 29, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.pwa-overlay-card {
  background: #fff;
  border: 2px solid var(--pwa-error);
  border-radius: 12px;
  padding: 16px;
  max-width: 620px;
  width: 100%;
  box-sizing: border-box;
  max-height: 80vh;
  overflow: auto;
}

.pwa-overlay-card h2 { margin: 0 0 8px; font-size: 16px; color: var(--pwa-error); }
.pwa-mono {
  font: 11.5px/1.45 ui-monospace, SFMono-Regular, Menlo, monospace;
  background: #f8fafc;
  border: 1px solid var(--pwa-line);
  border-radius: 8px;
  padding: 8px;
  overflow: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* ------------------------------------------- installed-mode safe areas */

html[data-pwa-standalone="true"] body .bottomnav {
  padding-bottom: calc(6px + var(--pwa-safe-bottom));
}

html[data-pwa-standalone="true"] body .topbar {
  padding-top: calc(8px + var(--pwa-safe-top));
}

html[data-pwa-standalone="true"] .pwa-launcher {
  bottom: calc(80px + var(--pwa-safe-bottom));
}

/* --------------------------------------------- after the physician review */

/*
 * PWA-PRI-001 asks for a warning that is prominent first and compact after,
 * and never gone. Two elements, not one: a banner that can be acknowledged
 * and a chip that cannot.
 */

.pwa-banner-prominent {
  border-width: 2px;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.2);
}

.pwa-banner-title { font-size: 15px; }

.pwa-banner-engine_failure,
.pwa-banner-degraded,
.pwa-banner-offline,
.pwa-banner-unknown {
  border-color: #f0a35a;
  background: var(--pwa-warn-bg);
}

.pwa-banner-engine_failure .pwa-banner-title,
.pwa-banner-degraded .pwa-banner-title,
.pwa-banner-offline .pwa-banner-title,
.pwa-banner-unknown .pwa-banner-title { color: var(--pwa-warn); }

.pwa-banner-saved { border-color: #c7d2fe; background: #eef2ff; }
.pwa-banner-saved strong { color: var(--pwa-indigo); }

/*
 * The chip rides inside the same fixed stack as the banners. It used to be a
 * separately positioned overlay, and at some widths it sat on top of the very
 * sentence it was meant to summarise.
 */
.pwa-chips {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  max-width: 100%;
}

.pwa-chip {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  border: 1px solid #f0a35a;
  background: var(--pwa-warn-bg);
  color: var(--pwa-warn);
  border-radius: 999px;
  padding: 5px 11px;
  font-size: 12.5px;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.12);
}

.pwa-chip-dot { font-size: 9px; line-height: 1; }
.pwa-chip-cause { color: #8a5a20; }

/*
 * On a phone the compact status has to wrap, and a pill that wraps onto three
 * lines is a lozenge with text falling out of its corners. Below 480px it
 * becomes a plain full-width row instead -- still compact, still persistent.
 */
@media (max-width: 480px) {
  .pwa-chips { justify-content: stretch; }
  .pwa-chip {
    width: 100%;
    border-radius: 10px;
    justify-content: flex-start;
    padding: 7px 11px;
  }
}

/*
 * The frozen workspace owns this button. The shell does not restyle the
 * workspace: it marks a button the physician must not press right now, and the
 * marking is removed the moment the engine verifies again.
 */
button[data-pwa-blocked="1"] {
  opacity: 0.5;
  filter: grayscale(0.7);
  cursor: not-allowed;
  position: relative;
}

/* PWA-PRI-006 — blocked, not merely covered. */
#root[data-pwa-blocked="1"] {
  display: none !important;
}

.pwa-confirm {
  margin-top: 8px;
  border-top: 1px dashed var(--pwa-line);
  padding-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.pwa-btn-danger {
  background: var(--pwa-error);
  border-color: var(--pwa-error);
  color: #fff;
}

.pwa-demo-notice {
  border: 1px solid #f0c38a;
  background: var(--pwa-warn-bg);
  color: var(--pwa-warn);
  border-radius: 8px;
  padding: 8px 10px;
  margin-bottom: 10px;
  font-size: 12.5px;
}

.pwa-overlay-card h3 { margin: 12px 0 6px; font-size: 14px; }