/* umg-self-serve-rooms.css — companion stylesheet for umg-self-serve-rooms.js
 * ("New Circle" self-serve creation surface, Trello IsY96GSe — user-facing
 * name generalized Jul 25 2026, plans/ummahcity-prd.md §2; ids/classes below
 * keep the original "nfr" naming on purpose, only copy changed).
 *
 * Own file, not folded into ummahchat-theme.css, so this small high-stakes
 * surface is easy to review/rollback in isolation (same convention as
 * umg-e2ee-recovery.css). Forest/cream/gold ecosystem tokens: forest
 * #166534 / #0F4A26, cream #FAF8F3, gold #C8912E. Font matches Element's
 * own in-app theme (Instrument Sans) — this surface renders INSIDE the
 * chat app, not the marketing/SSO surfaces that use Amiri/Outfit.
 */

/* ---- Floating trigger button ------------------------------------------ */
#umg-nfr-btn {
  position: fixed;
  right: max(14px, env(safe-area-inset-right));
  bottom: max(20px, env(safe-area-inset-bottom));
  z-index: 2400;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 18px;
  border: none;
  border-radius: 999px;
  background: #166534;
  color: #FAF8F3;
  font-family: 'Instrument Sans', system-ui, -apple-system, sans-serif;
  font-weight: 600;
  font-size: 14px;
  line-height: 1;
  box-shadow: 0 4px 14px rgba(10, 44, 23, .35);
  cursor: pointer;
}
#umg-nfr-btn:hover { background: #0F4A26; }
#umg-nfr-btn:focus-visible { outline: 2px solid #C8912E; outline-offset: 2px; }
#umg-nfr-btn .umg-nfr-btn-icon { display: inline-flex; }

/* Hide the trigger whenever it would sit over the composer/room content
 * (same convention already used for the sign-out pill and the city-return
 * pill — data-uc-room-open fires at every viewport width, not just mobile,
 * per the Jul 20 sign-out/composer-overlap fix) or while any Element
 * dialog / context-menu / the auth/setup screens are showing. */
body[data-uc-room-open] #umg-nfr-btn,
body:has(.mx_Dialog_Container:not(:empty)) #umg-nfr-btn,
body:has(.mx_ContextualMenu_Container:not(:empty)) #umg-nfr-btn,
body:has(.mx_UserSettingsDialog) #umg-nfr-btn,
body:has(.mx_AuthPage) #umg-nfr-btn {
  display: none;
}
/* NOTE (Jul 23 2026, M8/Ilma-21): the User Settings dialog does NOT render
 * inside .mx_Dialog_Container (it uses Element's separate static dialog
 * container), so the .mx_Dialog_Container rule above did NOT catch it — the
 * FAB leaked ON TOP of the Settings > Account content on a live iPhone-WebKit
 * render. Added an explicit body:has(.mx_UserSettingsDialog) hide. Verified
 * live that .mx_UserSettingsDialog is present when Settings is open, and the
 * :has() selector works in iPhone-WebKit (offline fixture). */

@media (max-width: 480px) {
  #umg-nfr-btn { font-size: 13px; padding: 0 14px; }
}

/* ---- "Message a friend" (DM-by-@handle) trigger — Jul 25 2026 --------- */
/* Stacked directly above the New Family Room button (same right offset,
 * bottom offset += button height + gap), a lighter/secondary treatment
 * (outline, not filled) so it doesn't visually compete with the primary
 * New Circle CTA. Same hide rules as #umg-nfr-btn (room-open / any
 * dialog-or-contextmenu-or-Settings-or-Auth showing) — see that block's own
 * note re: :has() coverage of the User Settings dialog. */
#umg-dbh-btn {
  position: fixed;
  right: max(14px, env(safe-area-inset-right));
  bottom: calc(max(20px, env(safe-area-inset-bottom)) + 48px + 10px);
  z-index: 2400;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 16px;
  border: 1.5px solid #166534;
  border-radius: 999px;
  background: #FAF8F3;
  color: #166534;
  font-family: 'Instrument Sans', system-ui, -apple-system, sans-serif;
  font-weight: 600;
  font-size: 13px;
  line-height: 1;
  box-shadow: 0 3px 10px rgba(10, 44, 23, .18);
  cursor: pointer;
}
#umg-dbh-btn:hover { background: #F0EBDE; }
#umg-dbh-btn:focus-visible { outline: 2px solid #C8912E; outline-offset: 2px; }

body[data-uc-room-open] #umg-dbh-btn,
body:has(.mx_Dialog_Container:not(:empty)) #umg-dbh-btn,
body:has(.mx_ContextualMenu_Container:not(:empty)) #umg-dbh-btn,
body:has(.mx_UserSettingsDialog) #umg-dbh-btn,
body:has(.mx_AuthPage) #umg-dbh-btn {
  display: none;
}

@media (max-width: 480px) {
  #umg-dbh-btn { font-size: 12px; padding: 0 13px; min-height: 40px; }
  #umg-dbh-btn { bottom: calc(max(20px, env(safe-area-inset-bottom)) + 44px + 8px); }
}

/* Modal — deliberately its own overlay/card ids (#umg-dbh-*) so it can
 * open independently of the New Circle modal, but reuses the SAME shared
 * component classes (.umg-nfr-btn-primary/-secondary, .umg-nfr-sub, etc.)
 * for visual consistency with zero duplicated styling. */
#umg-dbh-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: rgba(10, 44, 23, .55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
#umg-dbh-card {
  position: relative;
  width: 100%;
  max-width: 420px;
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  background: #FAF8F3;
  color: #0A2C17;
  border-radius: 16px;
  padding: 24px 20px 20px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .35);
  font-family: 'Instrument Sans', system-ui, -apple-system, sans-serif;
}
#umg-dbh-card h2 { margin: 0 0 8px; font-size: 19px; font-weight: 700; color: #0A2C17; }
#umg-dbh-card label { display: block; font-size: 13px; font-weight: 600; margin: 14px 0 6px; color: #0A2C17; }
#umg-dbh-card input[type="text"] {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border: 1.5px solid #D8D0BE;
  border-radius: 10px;
  font-size: 15px;
  font-family: inherit;
  background: #fff;
  color: #0A2C17;
}
#umg-dbh-card input[type="text"]:focus { outline: none; border-color: #166534; }

/* ---- Modal overlay ------------------------------------------------------ */
#umg-nfr-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: rgba(10, 20, 15, .55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  box-sizing: border-box;
}

#umg-nfr-card {
  position: relative;
  width: min(420px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  background: #FAF8F3;
  color: #16241a;
  border-radius: 20px;
  padding: 28px 24px 24px;
  box-sizing: border-box;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .35);
  font-family: 'Instrument Sans', system-ui, -apple-system, sans-serif;
}

.umg-nfr-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 36px;
  height: 36px;
  border: none;
  background: transparent;
  color: #16241a;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  border-radius: 999px;
}
.umg-nfr-close:hover { background: rgba(22, 101, 52, .08); }

#umg-nfr-body h2 {
  margin: 0 0 8px;
  font-size: 1.25rem;
  font-weight: 700;
  padding-right: 28px;
}

.umg-nfr-sub {
  margin: 0 0 18px;
  font-size: .92rem;
  line-height: 1.45;
  color: #3f4a42;
}

.umg-nfr-error-text { color: #8a2c1f; }

#umg-nfr-body label {
  display: block;
  font-size: .82rem;
  font-weight: 600;
  margin-bottom: 6px;
  color: #16241a;
}

#umg-nfr-body input[type="text"]#umg-nfr-name-input {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  border: 1.5px solid rgba(22, 101, 52, .25);
  border-radius: 12px;
  font-size: 1rem;
  font-family: inherit;
  background: #fff;
  color: #16241a;
  margin-bottom: 6px;
}
#umg-nfr-body input[type="text"]#umg-nfr-name-input:focus {
  outline: none;
  border-color: #166534;
  box-shadow: 0 0 0 3px rgba(22, 101, 52, .15);
}

.umg-nfr-field-error {
  color: #8a2c1f;
  font-size: .82rem;
  margin: 4px 0 12px;
}

.umg-nfr-actions {
  display: flex;
  gap: 10px;
  margin-top: 8px;
}

.umg-nfr-btn-primary,
.umg-nfr-btn-secondary,
.umg-nfr-btn-outline {
  min-height: 46px;
  border-radius: 999px;
  font-family: inherit;
  font-weight: 600;
  font-size: .95rem;
  cursor: pointer;
  padding: 0 20px;
}

.umg-nfr-btn-primary {
  border: none;
  background: #166534;
  color: #FAF8F3;
  width: 100%;
}
.umg-nfr-btn-primary:hover { background: #0F4A26; }
.umg-nfr-btn-primary:disabled { opacity: .6; cursor: default; }

.umg-nfr-btn-secondary {
  border: 1.5px solid rgba(22, 101, 52, .3);
  background: transparent;
  color: #166534;
}
.umg-nfr-btn-secondary:hover { background: rgba(22, 101, 52, .08); }

.umg-nfr-btn-outline {
  border: 1.5px solid #C8912E;
  background: transparent;
  color: #8a611c;
}
.umg-nfr-btn-outline:hover { background: rgba(200, 145, 46, .1); }

.umg-nfr-actions .umg-nfr-btn-primary,
.umg-nfr-actions .umg-nfr-btn-secondary { width: auto; flex: 1; }

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

/* ---- Success step -------------------------------------------------------- */
.umg-nfr-link-row {
  display: flex;
  gap: 8px;
  margin-bottom: 18px;
}
.umg-nfr-link-input {
  flex: 1;
  min-width: 0;
  box-sizing: border-box;
  padding: 10px 12px;
  border: 1.5px solid rgba(22, 101, 52, .25);
  border-radius: 10px;
  font-size: .82rem;
  background: #fff;
  color: #16241a;
}
.umg-nfr-copy-btn { flex-shrink: 0; padding: 0 14px; min-height: 40px; }

.umg-nfr-qr-wrap {
  text-align: center;
  margin-bottom: 18px;
}
.umg-nfr-qr-img {
  display: block;
  margin: 0 auto;
  background: #fff;
  border-radius: 12px;
  padding: 10px;
  box-sizing: border-box;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
}
.umg-nfr-qr-caption {
  margin: 8px 0 0;
  font-size: .78rem;
  color: #6b7568;
}

.umg-nfr-secondary-line {
  font-size: .85rem;
  color: #3f4a42;
  margin: 14px 0 0;
  text-align: center;
}
.umg-nfr-secondary-line a { color: #166534; font-weight: 600; }

.umg-nfr-lock-row {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid rgba(22, 101, 52, .15);
  text-align: center;
}
.umg-nfr-lock-note {
  font-size: .78rem;
  color: #6b7568;
  margin: 8px 0 0;
}

.umg-nfr-done-btn {
  width: 100%;
  margin-top: 14px;
}

@media (max-width: 480px) {
  #umg-nfr-card { padding: 22px 18px 20px; }
  .umg-nfr-link-row { flex-direction: column; }
  .umg-nfr-copy-btn { width: 100%; }
}