/* LMS bridge chrome — SP2 token language (Inter, white surfaces, indigo accent,
   soft shadow, no blur). Covers two surfaces that share the same treatment:
     · the ?bridge=1 pairing-host pill + modal (root viewer, spec D)
     · the /bridge/ completion popup + finish pill (spec E)
   Depends on the --jsv-* tokens in app.css. */

/* ── Shared modal shell (dim backdrop + centred card) ── */
.bridge-modal {
  position: fixed;
  inset: 0;
  z-index: 999995;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  font-family: var(--jsv-font);
}
.bridge-modal[hidden] { display: none; }

.bridge-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.3); /* no blur — matches viewer share modal */
}

.bridge-modal-card {
  position: relative;
  width: min(420px, 100%);
  padding: 32px;
  text-align: center;
  background: var(--jsv-surface);
  border-radius: var(--jsv-radius-menu);
  box-shadow: var(--jsv-shadow);
}

.bridge-modal-title {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0 0 8px;
  color: var(--jsv-text);
}

.bridge-modal-sub {
  font-size: 14px;
  line-height: 1.5;
  color: var(--jsv-text-secondary);
  margin: 0 auto 20px;
  max-width: 34ch;
}
.bridge-modal-sub strong { color: var(--jsv-text); font-weight: 600; }

/* ── Host modal: large code + live status (spec D) ── */
.bridge-code {
  font-size: 40px;
  font-weight: 700;
  letter-spacing: 0.14em;
  font-variant-numeric: tabular-nums;
  color: var(--jsv-text);
  margin: 4px 0 16px;
}

.bridge-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 auto 24px;
  font-size: 14px;
  font-weight: 500;
  color: var(--jsv-text-secondary);
}
.bridge-status-dot {
  width: 9px;
  height: 9px;
  border-radius: var(--jsv-radius-pill);
  background: var(--jsv-text-disabled);
}
.bridge-status.is-connected { color: #16a34a; }
.bridge-status.is-connected .bridge-status-dot { background: #22c55e; }

/* Companion finished & reported to the LMS: dot swaps for a bold green check. */
.bridge-status-check { display: none; width: 18px; height: 18px; }
.bridge-status.is-complete { color: #16a34a; font-weight: 600; }
.bridge-status.is-complete .bridge-status-dot { display: none; }
.bridge-status.is-complete .bridge-status-check { display: inline-block; }

/* ── Host pill: floats over the iframe, survives ?embed=1 (headerless) ── */
.bridge-host-pill {
  position: absolute;
  top: 80px; /* clear the 64px header so it doesn't cover the kebab */
  right: 16px;
  z-index: 40;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 48px;
  padding: 10px 19px; /* ~20% larger than the tertiary default — covers the viewer's AR button */
  font-family: var(--jsv-font);
  font-size: 14px;
  font-weight: 500;
  color: var(--jsv-text-secondary);
  background: var(--jsv-surface);
  border: none;
  box-shadow: var(--jsv-shadow);
  border-radius: var(--jsv-radius-pill);
  cursor: pointer;
  transition: color 0.15s;
}
.bridge-host-pill:hover { color: var(--jsv-text); }
/* Headerless embed mode: no header to clear, take the top corner. */
body.is-embed .bridge-host-pill { top: 16px; }
.bridge-host-pill svg { width: 16px; height: 16px; flex: 0 0 auto; }
.bridge-host-pill.is-connected { color: #16a34a; }

/* ── Completion popup (spec E) — two states in one card ── */
.bridge-complete-check {
  width: 56px;
  height: 56px;
  margin: 0 auto 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  line-height: 1;
  color: #16a34a;
  background: rgba(34, 197, 94, 0.12);
  border-radius: var(--jsv-radius-pill);
}

.bridge-modal-time {
  font-size: 14px;
  color: var(--jsv-text-secondary);
  margin: 0 0 24px;
}

.bridge-modal-primary { width: 100%; }

.bridge-modal-secondary {
  display: block;
  width: 100%;
  margin: 10px 0 0;
  padding: 10px 0;
  background: transparent;
  border: none;
  font-family: var(--jsv-font);
  font-size: 14px;
  font-weight: 500;
  color: var(--jsv-text-secondary);
  cursor: pointer;
  transition: color 0.15s;
}
.bridge-modal-secondary:hover { color: var(--jsv-text); }

/* ── Finish pill: reopens the completion popup after "Keep exploring" ── */
.bridge-finish-pill {
  position: absolute;
  bottom: 20px;
  right: 20px;
  z-index: 40;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 44px;
  padding: 10px 20px;
  font-family: var(--jsv-font);
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  background: var(--jsv-accent);
  border: none;
  box-shadow: var(--jsv-shadow);
  border-radius: var(--jsv-radius-pill);
  cursor: pointer;
  transition: background 0.15s;
}
.bridge-finish-pill:hover { background: var(--jsv-accent-hover); }

@media (max-width: 420px) {
  .bridge-host-pill .bridge-host-pill-label { display: none; }
  .bridge-host-pill { padding: 0; width: 40px; justify-content: center; }
}