/**
 * UmmahChat DM-E2EE recovery modal — branded, non-scary (cream/forest/gold).
 * Companion to umg-e2ee-recovery.js (Jul 15 2026 rebuild, card Zy7egPOP).
 * Own dedicated file — deliberately NOT folded into ummahchat-theme.css so
 * this small, high-stakes surface is easy to review/rollback in isolation.
 *
 * Loaded unconditionally (not theme-scoped) since the modal must render
 * identically regardless of which Element theme is active.
 */

#umg-e2ee-recovery-overlay {
  display: none;
  position: fixed;
  inset: 0;
  /* CRITICAL (found live, Jul 16 2026): Element's OWN native secret-storage
   * dialog (.mx_Dialog_background) renders at z-index 4011/var(--dialog-
   * zIndex-standard-background) — verified in theme-light.css. The SDK's
   * bootstrapSecretStorage() can internally re-invoke Element's own
   * getSecretStorageKey callback (its private in-module key cache is NOT
   * reachable from outside, so we cannot pre-warm it) and pop that NATIVE
   * dialog to ask for the passphrase a second time. If our overlay sat
   * ABOVE that dialog (999999, the original value), a real human would see
   * only our "Securing your messages…" spinner forever with NO visible way
   * to answer Element's own prompt underneath — a genuine stuck-user trap,
   * not just a headless-test artifact. 3000 sits comfortably above normal
   * app chrome (room list/timeline/toasts all render far below 4000) but
   * BELOW Element's own dialog range, so if that native prompt appears it
   * renders on top of us and is answerable. */
  z-index: 3000;
  background: rgba(10, 44, 23, 0.55);
  align-items: center;
  justify-content: center;
  padding: 16px;
  box-sizing: border-box;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

#umg-e2ee-recovery-card {
  background: #FAF8F3;
  color: #0F1F17;
  border-radius: 16px;
  border-top: 4px solid #166534;
  max-width: 420px;
  width: 100%;
  padding: 28px 24px 24px;
  box-sizing: border-box;
  box-shadow: 0 20px 60px rgba(10, 44, 23, 0.35);
  text-align: center;
}

#umg-e2ee-recovery-card h2 {
  font-size: 18px;
  font-weight: 700;
  margin: 4px 0 8px;
  color: #0F1F17;
}

#umg-e2ee-recovery-card .umg-e2ee-sub {
  font-size: 13px;
  color: #5a5f5c;
  margin: 0 0 16px;
  line-height: 1.5;
}

#umg-e2ee-recovery-card .umg-e2ee-footnote {
  font-size: 11px;
  color: #8a8f8c;
  margin-top: 14px;
  line-height: 1.5;
  text-align: left;
}

#umg-e2ee-recovery-card label {
  display: block;
  text-align: left;
  font-size: 12px;
  font-weight: 600;
  color: #0F1F17;
  margin: 10px 0 4px;
}

#umg-e2ee-recovery-card input[type="password"] {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #E2E8F0;
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 14px;
  color: #0F1F17;
  background: #ffffff;
  outline: none;
}
#umg-e2ee-recovery-card input[type="password"]:focus {
  border-color: #166534;
}

.umg-e2ee-rules {
  text-align: left;
  font-size: 11px;
  color: #8a8f8c;
  margin: 6px 0 2px;
  line-height: 1.6;
}
.umg-e2ee-rule-ok { color: #166534; }

/* [BUG-439, Jul 17 2026] .umg-e2ee-hint ("why 12 characters") REMOVED —
   the password minimum dropped 12->8 (Tab decision), so the hint's
   "longer than a typical password on purpose" framing no longer applies
   and the JS no longer emits this element. Rule intentionally deleted
   rather than left as dead CSS. */

.umg-e2ee-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(22, 101, 52, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 14px;
  font-size: 22px;
  color: #166534;
}
.umg-e2ee-icon-success { background: rgba(22, 101, 52, 0.12); color: #166534; }
.umg-e2ee-icon-error { background: rgba(220, 38, 38, 0.1); color: #B91C1C; }

.umg-e2ee-error {
  background: #FEF2F2;
  border: 1px solid #FECACA;
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 12px;
  color: #B91C1C;
  margin-bottom: 10px;
  text-align: left;
}

.umg-e2ee-btn-primary {
  width: 100%;
  padding: 12px;
  border-radius: 10px;
  border: none;
  background: #166534;
  color: #ffffff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  margin-top: 14px;
}
.umg-e2ee-btn-primary:hover { background: #124d28; }
.umg-e2ee-btn-primary:disabled { opacity: .5; cursor: not-allowed; }

.umg-e2ee-btn-secondary {
  width: 100%;
  padding: 10px;
  border-radius: 10px;
  border: 1px solid #E2E8F0;
  background: transparent;
  color: #5a5f5c;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  margin-top: 8px;
}
.umg-e2ee-btn-secondary:hover { background: #f1ede3; }

.umg-e2ee-spinner {
  width: 32px;
  height: 32px;
  margin: 0 auto 14px;
  border: 3px solid rgba(22, 101, 52, 0.2);
  border-top-color: #166534;
  border-radius: 50%;
  animation: umg-e2ee-spin .8s linear infinite;
}
@keyframes umg-e2ee-spin { to { transform: rotate(360deg); } }

@media (max-width: 480px) {
  #umg-e2ee-recovery-card {
    padding: 22px 18px 18px;
    border-radius: 14px;
  }
}

/* ============================================================
 * [Jul 23 2026, QA cold-grade blocker #1/#2] Yield-to-native banner.
 * Shown INSTEAD OF the modal overlay whenever Element's OWN native
 * "Confirm it's you" / peer-verify wall (.mx_CompleteSecurityBody /
 * .mx_SetupEncryptionBody, same classes documented under BUG-441) is
 * present — see umg-e2ee-recovery.js's applyOverlayVisibility(). This is
 * deliberately NOT a modal and NOT a full-screen backdrop: no focus trap,
 * no dismiss control needed (it clears itself the moment the native wall
 * clears), and — load-bearing — `pointer-events: none` so it can never
 * itself become a second click-blocking layer over the native UI it's
 * explaining. It is purely informational.
 * ============================================================ */
#umg-e2ee-yield-banner {
  display: none;
  position: fixed;
  top: max(12px, env(safe-area-inset-top, 12px));
  left: 50%;
  transform: translateX(-50%);
  z-index: 3000; /* same reasoning as #umg-e2ee-recovery-overlay above:
                     comfortably over normal app chrome, but this banner
                     is small + pointer-events:none, so unlike the modal
                     it can never bury anything regardless of z-index. */
  align-items: flex-start;
  gap: 10px;
  max-width: min(420px, calc(100vw - 24px));
  width: max-content;
  background: #FAF8F3;
  color: #0F1F17;
  border: 1px solid rgba(22, 101, 52, 0.25);
  border-left: 4px solid #C8912E;
  border-radius: 12px;
  padding: 12px 16px;
  box-shadow: 0 8px 24px rgba(10, 44, 23, 0.28);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 13px;
  line-height: 1.45;
  box-sizing: border-box;
  pointer-events: none;
}
.umg-e2ee-yield-icon {
  font-size: 16px;
  line-height: 1;
  flex-shrink: 0;
}

/* [Jul 25 2026, daily-loop pre-hardening pass] MOBILE-ONLY reposition —
 * top:12px + near-full-width (max-width:min(420px,100vw-24px)) means on a
 * phone viewport this banner's right edge lands almost exactly where
 * Element's native ".mx_CompleteSecurityBody"/".mx_SetupEncryptionBody"
 * wall renders its small icon-only close X (top-right of the dialog, no
 * aria-label — see bug441-recovery-code-login-verify-v6.py's bounding-box
 * heuristic for why it has no stable selector). pointer-events:none means
 * the X is still technically CLICKABLE underneath (a real tap at that
 * screen position hit-tests through us to the native button) — but a user
 * cannot SEE it to know to tap there, which is a real dead-end for anyone
 * who doesn't already know the escape exists. Confirmed live, Jul 25 2026,
 * dailyloop-audit-jul25.py screenshot A-00-loggedin.png at 390x844 (the X
 * visible on a 1280px desktop render of the identical wall is fully
 * covered on mobile). Fix: move the banner to the SAFE-AREA BOTTOM on
 * narrow viewports instead of the top — the native wall's own content
 * (title/description/buttons) sits in the upper ~65% of the screen with
 * genuine empty space below it before our footer links, so a bottom
 * banner never overlaps the X, the dialog buttons, OR the footer. Zero
 * change to size/copy/timing/logic — layout only. */
@media (max-width: 600px) {
  #umg-e2ee-yield-banner {
    top: auto;
    bottom: max(12px, env(safe-area-inset-bottom, 12px));
  }
}

/* [Jul 24 2026, BUG-441/BUG-459] the yield banner's delayed sign-out
 * escape — see ensureYieldBanner()/setYielding() in umg-e2ee-recovery.js.
 * The banner itself is pointer-events:none by design (informational only,
 * can never bury a click); this ONE control opts back into pointer-events
 * so it's real without turning the banner into a second click-blocking
 * layer over Element's native wall. Deliberately a plain text-link style,
 * not a prominent button — a real escape, not an invitation to bail. */
#umg-e2ee-yield-signout-btn {
  pointer-events: auto;
  background: none;
  border: none;
  padding: 6px 0 0;
  margin: 0;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  color: #166534;
  text-decoration: underline;
  cursor: pointer;
}
#umg-e2ee-yield-signout-btn:hover,
#umg-e2ee-yield-signout-btn:focus-visible {
  color: #0F4A26;
}

/* [Jul 23 2026] "Not now" defer button on the enrollment card (QA re-grade P1:
   enrollment must never be an aria-modal trap). Quiet secondary style — real
   affordance, not a dark-pattern whisper, but clearly subordinate to Set. */
.umg-e2ee-btn-notnow {
  display: block;
  width: 100%;
  margin-top: 10px;
  background: none;
  border: none;
  color: #9aa7bd;
  font-size: 13.5px;
  padding: 10px 8px;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.umg-e2ee-btn-notnow:hover { color: #cfd6e4; }