/* Cobalt Chat — themed to match the Juleisy intake form */
:root {
  color-scheme: dark;
  --bg: #20211f;
  --card: #2b2c29;
  --card-2: #262724;
  --text: #f5f5f1;
  --muted: #c8c6c0;
  --muted-2: #a7a59f;
  --accent: #73b746;          /* Cobalt green */
  --accent-2: #1d5718;
  --bubble-me: #73b746;
  --bubble-them: #2b2c29;
  --border: #464744;
  --border-soft: #3d3f3b;
  --green: #73b746;
  --yellow: #d29922;
  --red: #f85149;
}

/* v88 — Profile Hub glow-up.
   The profile tools need to feel as considered as the public profile page,
   while staying compact enough for mobile browsers. */
.public-profile-block {
  position: relative;
  overflow: hidden;
  margin: 18px auto 0;
  width: min(100% - 24px, 720px);
  padding: 16px;
  border-radius: 18px !important;
  border: 1px solid color-mix(in srgb, var(--accent) 34%, rgba(255,255,255,0.14));
  background:
    radial-gradient(circle at 10% 0%, color-mix(in srgb, var(--accent) 24%, transparent), transparent 32%),
    linear-gradient(145deg, rgba(255,255,255,0.12), rgba(255,255,255,0.035)),
    color-mix(in srgb, var(--card) 86%, transparent);
  box-shadow: 0 22px 60px rgba(0,0,0,0.26), inset 0 1px 0 rgba(255,255,255,0.10);
}
.public-profile-block::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 5px;
  background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--gold, #f4c430) 78%, #fff 22%), color-mix(in srgb, var(--danger, #e11d48) 70%, var(--accent) 30%));
  opacity: 0.95;
}
.public-profile-hub-head {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
}
.public-profile-toggle {
  min-width: 0;
}
.public-profile-glyph {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.10);
}
.public-profile-label strong {
  font-size: 1.02rem;
  font-weight: 950;
  letter-spacing: 0;
}
.public-profile-label small {
  max-width: 44ch;
}
.public-profile-preview {
  margin: 0;
  min-height: 38px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  padding: 9px 13px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--accent) 42%, rgba(255,255,255,0.14));
  background: color-mix(in srgb, var(--accent) 13%, rgba(255,255,255,0.07));
  color: var(--text);
  font-weight: 900;
  text-decoration: none;
}
.public-profile-preview:hover {
  text-decoration: none;
  transform: translateY(-1px);
}
.public-profile-hub-tools {
  position: relative;
  z-index: 1;
  gap: 12px;
  margin-top: 16px;
}
.public-profile-hub-section {
  padding: 13px;
  border: 1px solid rgba(255,255,255,0.10) !important;
  border-left: 0 !important;
  border-radius: 14px !important;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.105), rgba(255,255,255,0.028)),
    color-mix(in srgb, var(--card-2) 84%, transparent) !important;
}
.public-profile-section-title strong {
  font-size: 0.96rem;
  font-weight: 920;
}
.public-profile-action-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}
.public-profile-action {
  min-height: 82px;
  border-radius: 13px !important;
  border-color: rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.055);
  transition: transform 0.16s ease, border-color 0.16s ease, background 0.16s ease;
}
.public-profile-action:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--accent) 48%, rgba(255,255,255,0.14));
  background: color-mix(in srgb, var(--accent) 10%, rgba(255,255,255,0.06));
}
.public-profile-action > span {
  width: 38px;
  height: 38px;
  background:
    radial-gradient(circle at 32% 25%, rgba(255,255,255,0.30), transparent 30%),
    color-mix(in srgb, var(--accent) 24%, transparent);
}
.public-profile-action.primary {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 24%, rgba(255,255,255,0.08)), rgba(255,255,255,0.055));
}
.public-profile-action.live {
  border-color: color-mix(in srgb, var(--danger, #e11d48) 58%, rgba(255,255,255,0.14));
}
.public-profile-subtoggle {
  border-radius: 13px !important;
  background: rgba(255,255,255,0.045);
}
@media (max-width: 620px) {
  .public-profile-block {
    width: calc(100% - 18px);
    padding: 14px;
    border-radius: 16px !important;
  }
  .public-profile-hub-head {
    grid-template-columns: 1fr;
  }
  .public-profile-preview {
    width: 100%;
  }
  .public-profile-action-grid {
    grid-template-columns: 1fr;
  }
  .public-profile-action {
    min-height: 76px;
  }
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.5;
  height: 100%;
  /* Disable iOS rubber-band scroll + pull-to-refresh so the standalone PWA
     feels like a native app (the chat shouldn't bounce when you swipe up). */
  overscroll-behavior-y: contain;
  -webkit-tap-highlight-color: transparent;
}
/* v100.99 — standalone (PWA-on-home-screen) mode. The previous block
   set `html, body { overflow: hidden }` which DISABLED ALL SCROLLING
   when DirectoLink was installed as a home-screen app on iOS Safari
   or Chrome — Sydal: "Why can't I scroll or do anything when I
   download the website as an app on my phone's home screen with
   Chrome." The original intent was probably to suppress pull-to-
   refresh rubber-banding, but `overflow: hidden` is the wrong tool;
   the modern, targeted way is `overscroll-behavior-y: none`. Removed
   the overflow rule entirely; kept user-select tweaks. */
@media all and (display-mode: standalone) {
  html, body {
    overscroll-behavior-y: none;
    -webkit-overflow-scrolling: touch;
  }
  body { user-select: none; -webkit-user-select: none; }
  /* Text-selection opt-ins for inputs / chat content. */
  .messages, .contact-list-wrap, .stealth-card,
  textarea, input { user-select: text; -webkit-user-select: text; }
}

/* Install-as-app banner — shown on every page until user installs or
   dismisses. Adapts to platform via lang.js (Android one-tap install,
   iOS walkthrough, etc.). */
.install-banner {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: max(16px, env(safe-area-inset-bottom));
  background: rgba(43, 44, 41, 0.98);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  z-index: 2000;
  font-size: 0.85rem;
  backdrop-filter: blur(20px);
}
.iib-icon { font-size: 1.4rem; flex-shrink: 0; }
.iib-msg {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.3;
  min-width: 0;
}
.iib-msg small { color: var(--muted); font-size: 0.75rem; }
.iib-action {
  background: var(--accent);
  color: #fff;
  border: 0;
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 0.82rem;
  cursor: pointer;
  font-family: inherit;
  font-weight: 600;
  flex-shrink: 0;
}
.iib-action:hover { background: #84c952; }
.iib-close {
  background: transparent;
  color: var(--muted);
  border: 0;
  font-size: 1rem;
  cursor: pointer;
  padding: 6px 8px;
  border-radius: 6px;
  flex-shrink: 0;
}
.iib-close:hover { color: var(--text); }

/* Install walkthrough modal */
.install-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  z-index: 3000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 16px;
}
@media (min-width: 600px) {
  .install-modal-backdrop { align-items: center; }
}
.install-modal {
  background: var(--card);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 24px 22px max(20px, env(safe-area-inset-bottom));
  width: 100%;
  max-width: 440px;
  position: relative;
  box-shadow: 0 16px 48px rgba(0,0,0,0.5);
  animation: install-modal-in 0.22s ease-out;
}
@keyframes install-modal-in {
  from { transform: translateY(20px); opacity: 0; }
  to   { transform: translateY(0);   opacity: 1; }
}
.install-modal h3 {
  margin: 0 0 8px;
  font-size: 1.1rem;
  padding-right: 28px;
}
.install-modal-sub {
  margin: 0 0 18px;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.4;
}
.install-modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  background: transparent;
  color: var(--muted);
  border: 0;
  font-size: 1rem;
  cursor: pointer;
  padding: 6px;
  border-radius: 6px;
}
.install-modal-close:hover { color: var(--text); }
.install-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.install-steps li {
  display: grid;
  grid-template-columns: 28px 1fr 28px;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--card-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  font-size: 0.92rem;
  line-height: 1.4;
}
.install-steps .step-num {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.install-steps .step-icon { font-size: 1.2rem; text-align: right; }
.install-help {
  margin: 0 0 12px;
  font-size: 0.92rem;
  color: var(--text);
  line-height: 1.4;
}
.install-help-sub {
  margin: 12px 0 0;
  font-size: 0.82rem;
  color: var(--muted);
  line-height: 1.4;
}
.install-now-btn {
  background: var(--accent);
  color: #fff;
  border: 0;
  border-radius: 999px;
  padding: 12px 20px;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  width: 100%;
  margin-top: 8px;
}
.install-now-btn:hover { background: #84c952; }
.install-modal-footer {
  margin-top: 18px;
  text-align: center;
}
.install-keep-btn {
  background: transparent;
  color: var(--muted);
  border: 0;
  font-size: 0.85rem;
  cursor: pointer;
  text-decoration: underline;
  font-family: inherit;
  padding: 8px;
}
.install-keep-btn:hover { color: var(--text); }

.signin-install-pill {
  position: fixed;
  top: 10px;
  right: 142px;
  z-index: 50;
  min-height: 36px;
  background: rgba(0,0,0,0.4);
}

.dl-codex-install-backdrop {
  align-items: center;
  overflow: auto;
  padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom));
  background:
    radial-gradient(circle at 50% -10%, rgba(43, 88, 255, 0.22), transparent 36%),
    rgba(0, 0, 0, 0.78);
}
.dl-codex-install-modal {
  width: min(430px, calc(100vw - 24px));
  max-height: calc(100vh - 24px);
  overflow: auto;
  padding: 22px 24px 18px;
  border-radius: 28px;
  background:
    radial-gradient(circle at 50% 12%, rgba(35, 79, 166, 0.15), transparent 30%),
    linear-gradient(180deg, #060a12 0%, #02050b 100%);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 28px 90px rgba(0,0,0,0.72);
  color: #fff;
  text-align: center;
}
.dl-codex-install-modal.android {
  background:
    radial-gradient(circle at 50% 16%, rgba(85, 201, 46, 0.14), transparent 30%),
    linear-gradient(180deg, #050a10 0%, #02050b 100%);
}
.dl-codex-main-icon {
  width: 78px;
  height: 78px;
  border-radius: 22px;
  display: block;
  margin: 0 auto 10px;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.22), 0 12px 30px rgba(0,0,0,0.42);
}
.dl-codex-install-modal h3 {
  padding: 0;
  margin: 0;
  font-size: clamp(1.9rem, 8vw, 2.55rem);
  line-height: 1.05;
  letter-spacing: -0.05em;
}
.dl-blue { color: #1554d1; }
.dl-red { color: #ff2439; }
.dl-codex-install-sub {
  margin: 12px 0 20px;
  color: rgba(255,255,255,0.68);
  font-size: clamp(1rem, 3.5vw, 1.24rem);
}
.dl-codex-steps {
  display: grid;
  gap: 12px;
}
.dl-codex-install-step {
  position: relative;
  min-height: 72px;
  display: grid;
  grid-template-columns: 56px 1fr 82px;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 24px;
  background: rgba(7, 13, 26, 0.58);
  border: 1px solid rgba(255,255,255,0.09);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.035);
}
.dl-codex-install-step:not(:last-child)::after {
  content: "↓";
  position: absolute;
  left: 41px;
  bottom: -18px;
  font-size: 1.2rem;
  color: rgba(255,255,255,0.38);
  z-index: 2;
}
.dl-codex-install-modal.android .dl-codex-install-step:not(:last-child)::after {
  color: rgba(108, 211, 65, 0.78);
}
.dl-codex-step-num {
  width: 38px;
  height: 38px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.09);
  color: #fff;
  font-size: 1.55rem;
  font-weight: 900;
}
.dl-codex-install-modal.android .dl-codex-step-num {
  color: #76e244;
  background: rgba(63, 164, 36, 0.28);
}
.dl-codex-step-text {
  text-align: left;
  color: #fff;
  font-size: 1.18rem;
  line-height: 1.25;
  letter-spacing: -0.03em;
}
.dl-codex-step-icon {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 62px;
  min-height: 62px;
  border-radius: 999px;
  background: rgba(255,255,255,0.035);
  border: 1px solid rgba(255,255,255,0.07);
}
.dl-codex-step-img {
  width: 42px;
  height: 42px;
  object-fit: contain;
}
.dl-codex-clean-icon {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  color: #fff;
  font-weight: 900;
  font-size: 1.35rem;
  line-height: 1;
  background: transparent;
  box-shadow: none;
  text-shadow: 0 1px 8px rgba(0,0,0,0.35);
}
.dl-codex-install-modal.android .dl-codex-clean-icon {
  color: #79e64a;
}
.dl-codex-clean-icon.dots {
  letter-spacing: 0.12em;
  transform: translateX(0.05em);
}
.dl-codex-clean-icon.vertical-dots {
  color: #72df42;
  font-size: 2rem;
}
.dl-codex-clean-icon.share {
  font-size: 1.9rem;
  transform: translateY(-2px);
}
.dl-codex-clean-icon.chevron {
  font-size: 2.1rem;
  transform: translateY(-4px);
}
.dl-codex-clean-icon.plus {
  font-size: 1.7rem;
}
.dl-codex-arrow-icon {
  color: #65d83b;
  font-size: 2.2rem;
  line-height: 1;
}
.dl-codex-native-prompt {
  width: 128px;
  margin-right: -4px;
  padding: 12px 12px 9px;
  border-radius: 14px;
  background: #141b27;
  border: 1px solid rgba(255,255,255,0.12);
  text-align: left;
  box-shadow: 0 8px 28px rgba(0,0,0,0.36);
}
.dl-codex-native-prompt strong {
  display: block;
  margin-bottom: 9px;
  font-size: 0.86rem;
  color: #fff;
}
.dl-codex-native-prompt span {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
}
.dl-codex-native-prompt img {
  width: 24px;
  height: 24px;
  border-radius: 7px;
}
.dl-codex-native-prompt small {
  display: block;
  margin-top: 10px;
  color: #8deb45;
  text-align: right;
  font-size: 0.72rem;
}
.dl-codex-app-thumb {
  width: 54px;
  height: 54px;
  border-radius: 16px;
}
.dl-codex-done {
  margin: 18px auto 14px;
  color: #fff;
}
.dl-codex-done.safari img {
  width: 74px;
  height: 74px;
  border-radius: 21px;
  display: block;
  margin: 0 auto 8px;
}
.dl-codex-done strong {
  display: block;
  font-size: 1.45rem;
  line-height: 1;
}
.dl-codex-done.android strong {
  color: #77e246;
}
.dl-codex-done p,
.dl-codex-done small {
  display: block;
  margin: 4px 0 0;
  color: rgba(255,255,255,0.82);
  font-size: 1rem;
  line-height: 1.2;
}
.dl-codex-rocket {
  width: 62px;
  height: 62px;
  margin: 0 auto 8px;
  display: grid;
  place-items: center;
  color: #7ce84b;
  font-size: 2.2rem;
  border: 2px solid rgba(124,232,75,0.72);
  border-radius: 21px;
}
.dl-codex-browser-card {
  display: grid;
  grid-template-columns: 62px 1fr 50px;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 22px;
  background: rgba(7, 13, 26, 0.58);
  border: 1px solid rgba(255,255,255,0.10);
  text-align: left;
}
.dl-codex-browser-logo {
  width: 54px;
  height: 54px;
  object-fit: contain;
}
.dl-codex-browser-card p {
  margin: 0;
  color: rgba(255,255,255,0.74);
  font-size: 0.92rem;
  line-height: 1.35;
}
.dl-codex-device {
  width: 38px;
  height: 54px;
  border: 2px solid rgba(255,255,255,0.20);
  border-radius: 9px;
  display: grid;
  place-items: center;
  justify-self: end;
}
.dl-codex-device img {
  width: 24px;
  height: 24px;
  object-fit: contain;
}
.dl-codex-device.android {
  border-color: rgba(113, 224, 67, 0.78);
}
.dl-codex-install-modal .install-keep-btn {
  color: rgba(255,255,255,0.62);
}

@media (max-width: 520px) {
  .signin-install-pill {
    right: auto;
    left: 10px;
  }
  .dl-codex-install-modal {
    padding: 18px 14px 14px;
    border-radius: 24px;
  }
  .dl-codex-install-step {
    grid-template-columns: 48px 1fr 72px;
    min-height: 68px;
    padding: 10px 12px;
    border-radius: 20px;
  }
  .dl-codex-step-text {
    font-size: 1.03rem;
  }
  .dl-codex-step-icon {
    width: 56px;
    min-height: 56px;
  }
  .dl-codex-native-prompt {
    width: 112px;
  }
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ------ stealth landing ------ */
body.stealth {
  background: var(--bg);
  justify-content: center;
  align-items: center;
}
.stealth-card {
  width: 100%;
  max-width: 320px;
  padding: 60px 24px;
}
.auth-heading {
  text-align: center;
  font-size: 1.4rem;
  font-weight: 600;
  margin: 0 0 18px;
  color: var(--text);
  letter-spacing: -0.02em;
}
.stealth-card form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.stealth-card form button {
  background: var(--accent);
  color: #fff;
  border: none;
  width: 100%;
  border-radius: 8px;
  height: 44px;
  font-weight: 600;
  font-size: 1rem;
  margin-top: 12px;
}
.stealth-card form button:hover {
  background: var(--accent-2);
}
.stealth-card input[type="text"],
.stealth-card input[type="password"] {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
  padding: 10px 12px;
  border-radius: 6px;
  font-size: 1rem;
  font-family: inherit;
  width: 100%;
}
.stealth-card input:focus {
  outline: none;
  border-color: var(--accent);
}
.stealth-card button {
  align-self: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--border);
  font-size: 1.2rem;
  cursor: pointer;
  margin-top: 6px;
}
.stealth-card button:hover { color: var(--text); border-color: var(--accent); }
.auth-error {
  margin: 6px 0 0;
  color: var(--red);
  font-size: 0.85rem;
  text-align: center;
}

/* ------ generic card pages ------ */
main.card, .card {
  margin: 40px auto;
  padding: 28px 24px;
  max-width: 480px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
}

h1 { margin: 0 0 6px; font-size: 1.4rem; }
.muted { color: var(--muted); font-size: 0.9rem; margin: 6px 0 18px; }

label {
  display: block;
  margin: 14px 0 4px;
  font-size: 0.85rem;
  color: var(--muted);
}
input[type="text"], input[type="password"], textarea {
  width: 100%;
  padding: 10px 12px;
  background: var(--card-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 1rem;
  font-family: inherit;
}
input:focus, textarea:focus { outline: none; border-color: var(--accent); }

button {
  display: inline-block;
  margin-top: 16px;
  padding: 10px 16px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}
button:hover { background: var(--accent-2); }
button:disabled { opacity: 0.5; cursor: default; }

a { color: var(--accent); }

.link-row { display: flex; gap: 8px; align-items: center; }
.link-row input { flex: 1; }
.link-row button { margin-top: 0; }

a.primary {
  display: inline-block;
  margin-top: 10px;
  padding: 10px 16px;
  background: var(--accent);
  color: #fff;
  border-radius: 8px;
  font-weight: 600;
  text-decoration: none;
}

/* ------ dashboard ------ */
/* v40 ITEM 12 — support: "It only lets you scroll in full screen in the
   contact menu on the desktop." The global `html, body { height: 100%; }`
   rule was locking the dashboard body to exactly the viewport height,
   so when the window was smaller than the content the bottom was just
   clipped (no scrollbar). The chat page side-stepped this because it
   uses an explicit internal flex column with .messages doing its own
   overflow-y: auto. For the dashboard we keep the existing
   display: flex flex-direction: column layout but let the body grow
   beyond the viewport by overriding height — the browser window then
   scrolls naturally at any window size. */
body.app-body {
  display: flex;
  flex-direction: column;
  height: auto;
  min-height: 100vh;
  min-height: 100dvh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
/* 3-column grid: status left, [avatar + username] center, lang+signout
   right. Side columns are equal-fr so the center group stays anchored
   exactly in the middle of the header regardless of pill text widths. */
.app-header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--card);
  border-bottom: 1px solid var(--border);
}
.app-header > .header-left-group {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.app-header > .user-group {
  justify-self: center;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  line-height: 1;
}
.app-header h1 {
  font-size: 1rem;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1;
  display: inline-flex;
  align-items: center;
}/* v100 stripped account-avatar rule */

.app-header > .right-group {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.link-btn {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 999px;
  height: 32px;
  margin: 0;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 0.85rem;
  cursor: pointer;
}
.status-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  height: 32px;
  border-radius: 999px;
  background: var(--card-2);
  border: 1px solid var(--border);
  color: var(--text);
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
  margin: 0;
}
.status-toggle:hover { border-color: var(--accent); }
.status-toggle .status-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 8px rgba(115, 183, 70, 0.6);
}
.status-toggle.status-online .status-dot { background: var(--green); box-shadow: 0 0 8px rgba(115, 183, 70, 0.6); }
.status-toggle.status-busy .status-dot { background: var(--yellow); box-shadow: 0 0 8px rgba(210, 153, 34, 0.6); }
.status-toggle.status-dnd .status-dot { background: var(--red); box-shadow: 0 0 8px rgba(248, 81, 73, 0.6); }

.contact-list-wrap {
  margin: 24px auto;
  padding: 0 16px;
  max-width: 480px;
  width: 100%;
}
.contact-list-wrap h2 {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--muted);
  margin: 12px 0 8px;
}
.contact-list {
  list-style: none;
  padding: 0;
  margin: 0 0 18px;
  /* Cap the visible list height so a long contact list scrolls in place
     instead of pushing the rest of the dashboard off-screen. */
  max-height: min(60vh, 540px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  /* Subtle inset shadow at top + bottom hints there's more to scroll. */
  scrollbar-width: thin;
}
.contact-row {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  display: block;
  margin-bottom: 8px;
}
/* (Old `.contact-row-main` rule lived here; replaced by the layout
   defined alongside the per-contact avatar further down in this file.) */
.link-toggle-row {
  display: flex;
  align-items: center;
  border-top: 1px solid var(--border-soft);
  padding-top: 10px;
}
.toggle-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
}
.toggle-pill input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.toggle-pill .toggle-track {
  width: 42px;
  height: 24px;
  background: var(--card-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  position: relative;
  transition: background 0.15s;
}
.toggle-pill .toggle-track::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  background: var(--muted);
  border-radius: 50%;
  transition: transform 0.15s, background 0.15s;
}
.toggle-pill input[type="checkbox"]:checked + .toggle-track {
  background: var(--accent);
  border-color: var(--accent);
}
.toggle-pill input[type="checkbox"]:checked + .toggle-track::after {
  transform: translateX(18px);
  background: #fff;
}
.toggle-pill .toggle-text {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text);
}

/* Ephemeral / message delete UI */
.bubble {
  position: relative;
}
.bubble:hover .msg-delete-btn,
.bubble:hover .msg-speak-btn {
  opacity: 1;
}
.msg-delete-btn {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 22px;
  height: 22px;
  padding: 0;
  margin: 0;
  border: none;
  background: rgba(0,0,0,0.4);
  color: #fff;
  border-radius: 50%;
  font-size: 0.8rem;
  line-height: 22px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.1s;
}
/* Speak-aloud button — sits inline at the bottom of each text bubble.
   Always visible on mobile (no hover state); fades in on desktop hover.
   Tap to play TTS audio of the message text. */
.msg-speak-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  margin: 4px 0 0 0;
  border: none;
  background: rgba(255, 255, 255, 0.08);
  color: var(--text);
  border-radius: 50%;
  font-size: 0.85rem;
  cursor: pointer;
  opacity: 0.85;
  transition: opacity 0.1s, background 0.1s;
}
.msg-speak-btn:hover {
  opacity: 1;
  background: rgba(255, 255, 255, 0.15);
}
.msg-speak-btn:disabled {
  opacity: 0.5;
  cursor: wait;
}
.ephemeral-timer {
  display: inline-block;
  margin-top: 6px;
  font-size: 0.8rem;
  font-weight: 700;
  color: #fff;
  background: var(--red);
  padding: 2px 8px;
  border-radius: 999px;
}
.ephemeral-expired {
  opacity: 0.6;
  font-style: italic;
}

/* Chat-header action buttons share the same pill geometry so they line
   up cleanly on the same baseline. Size lives here; per-button CSS only
   adds color/spacing tweaks. The Install + Sign-up pills are included so
   they sit on the same horizontal plane as the rest of the header.
   The three icon buttons (📞 voice, 📹 video, 🎨 customize) are NOT in
   this pill family — they use the .chat-icon-btn rule below to render
   as identical 40x40 circular icon buttons (support 2026-05-04). */
.chat-header .translate-btn,
.chat-header .lang-button,
.chat-header .install-pill,
.chat-header .signup-pill {
  height: 32px;
  padding: 0 12px;
  font-size: 0.85rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 0;
  line-height: 1;
}
/* === v33: chat-header icon buttons (📞 / 📹 / 🎨) ====================
   support 2026-05-04: "the call button should be the same size as the video
   call and customization button". All three render as identical 40x40
   circular icon buttons — same border-radius, same background, same icon
   centering. Adding a new icon button to the chat header? Just give it
   .chat-icon-btn and you'll get the same geometry for free.            */
.chat-header .chat-icon-btn,
.chat-header .voice-btn-call,
.chat-header .video-btn,
.chat-header .chat-customize-btn,
.app-header .chat-icon-btn,
.app-header .dashboard-customize-btn {
  width: 40px;
  height: 40px;
  padding: 0;
  margin: 0 0 0 8px;
  border-radius: 999px;
  background: var(--card-2);
  border: 1px solid var(--border);
  color: var(--text);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  line-height: 1;
  flex: 0 0 auto;
}
.chat-header .chat-icon-btn:hover,
.chat-header .voice-btn-call:hover,
.chat-header .video-btn:hover,
.chat-header .chat-customize-btn:hover,
.app-header .chat-icon-btn:hover,
.app-header .dashboard-customize-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.chat-header .chat-icon-btn:active,
.chat-header .voice-btn-call:active,
.chat-header .video-btn:active,
.chat-header .chat-customize-btn:active,
.app-header .chat-icon-btn:active,
.app-header .dashboard-customize-btn:active {
  transform: translateY(1px);
}

/* Legacy .video-btn block — kept as a no-op anchor below in case any
   downstream skin overrides target it. The geometry above wins. */
.video-btn {
  margin: 0 0 0 8px;
  background: var(--card-2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 999px;
  height: 32px;
  padding: 0 12px;
  font-size: 0.85rem;
  cursor: pointer;
}
.video-btn:hover { border-color: var(--accent); color: var(--accent); }

/* In-app video call overlay */
[hidden] { display: none !important; }
.call-overlay {
  position: fixed;
  inset: 0;
  background: #000;
  z-index: 9999;
  display: flex;
  flex-direction: column;
}
.call-shell {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.call-mount {
  flex: 1;
  width: 100%;
  height: 100%;
}
.call-overlay.docked {
  inset: auto 18px 18px auto;
  width: min(420px, calc(100vw - 24px));
  height: min(280px, calc(100vh - 140px));
  background: transparent;
  display: block;
  pointer-events: none;
}
.call-overlay.docked .call-shell {
  width: 100%;
  height: 100%;
  flex: none;
  background: #000;
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 18px;
  box-shadow: 0 24px 70px rgba(0,0,0,0.45);
  overflow: hidden;
  pointer-events: auto;
}
.call-overlay.docked .call-mount {
  height: 100%;
  min-height: 0;
}
.call-overlay.audio-only {
  inset: auto 16px max(16px, env(safe-area-inset-bottom, 16px)) 16px;
  height: auto;
  background: transparent;
  display: block;
  pointer-events: none;
  z-index: 9990;
}
.call-overlay.audio-only .call-shell {
  width: min(560px, 100%);
  margin: 0 auto;
  padding: 14px;
  background: rgba(15, 18, 28, 0.94);
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 26px;
  box-shadow: 0 22px 70px rgba(0,0,0,0.45);
  overflow: hidden;
  pointer-events: auto;
}
.call-overlay.audio-only .call-mount {
  height: auto;
  min-height: 0;
}
.call-overlay.audio-only .call-controls {
  position: static;
  justify-content: center;
  flex-wrap: wrap;
  padding: 0 0 10px;
}
.call-overlay.audio-only .call-close {
  position: static;
}
.phone-call-panel {
  min-height: 130px;
  display: grid;
  place-items: center;
  gap: 8px;
  padding: 10px 12px 14px;
  text-align: center;
  color: #fff;
}
.phone-call-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #2ec4b6, #6c5ce7);
  box-shadow: 0 0 0 10px rgba(46,196,182,0.12);
  font-size: 1.8rem;
}
.phone-call-panel h2 {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 900;
}
.phone-call-panel p {
  margin: 0;
  color: rgba(255,255,255,0.72);
  font-size: 0.9rem;
}
.phone-call-audio-sink {
  display: none;
}
.call-app-drawer {
  position: fixed;
  inset: 0;
  z-index: 1500;
  background: var(--bg);
  display: flex;
  flex-direction: column;
}
.call-app-drawer[hidden] { display: none !important; }
.call-app-drawer-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: max(12px, env(safe-area-inset-top, 0px)) 14px 12px;
  background: var(--card-bg);
  border-bottom: 1px solid var(--border);
  color: var(--text);
  box-shadow: 0 10px 30px rgba(0,0,0,0.28);
}
.call-app-drawer-bar button {
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--card-2);
  color: var(--text);
  padding: 8px 14px;
  font-weight: 800;
  cursor: pointer;
}
.call-app-frame {
  flex: 1;
  width: 100%;
  min-height: 0;
  border: 0;
  background: var(--bg);
}
.call-close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  background: var(--red);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 8px 14px;
  font-weight: 700;
  cursor: pointer;
  margin: 0;
}
.contact-name { font-weight: 600; }
.contact-actions { display: flex; gap: 10px; align-items: center; flex-shrink: 0; }
/* Open chat / Copy link stacked vertically, vertically centered with the
   trash button alongside them. Frees up horizontal space so long contact
   names show in full instead of ellipsis-truncating. */
.contact-action-stack {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: stretch;
}
.contact-action-stack > * { width: 100%; text-align: center; }
.contact-actions a, .contact-actions .copy-btn {
  font-size: 0.85rem;
  background: transparent;
  border: 1px solid var(--border);
  padding: 4px 8px;
  border-radius: 6px;
  margin: 0;
  color: var(--text);
  cursor: pointer;
  text-decoration: none;
}
.contact-actions a:hover, .contact-actions .copy-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}

details {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 14px;
  margin-bottom: 10px;
}
details summary {
  cursor: pointer;
  color: var(--muted);
  font-size: 0.9rem;
}
details[open] summary { color: var(--text); }

.toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0;
  color: var(--text);
  font-size: 0.95rem;
}
.visibility-options {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 8px;
}
.warn {
  background: rgba(248, 81, 73, 0.08);
  border: 1px solid rgba(248, 81, 73, 0.4);
  color: #ffa9a3;
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 0.85rem;
  margin: 8px 0;
}
.contact-row .contact-name { cursor: default; }
.contact-row .contact-name[title] { cursor: pointer; text-decoration: underline dotted; }

/* ------ chat page ------ */
body.chat-body {
  height: 100vh;
  height: 100dvh;
}
.chat-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--card);
  border-bottom: 1px solid var(--border);
}
.chat-header h1 {
  flex: 1;
  font-size: 1rem;
  font-weight: 600;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chat-header .back { color: var(--accent); text-decoration: none; font-size: 0.85rem; }

/* The OTHER party's online status next to the chat title. Subtle —
   small dot + label, hidden until they broadcast a status. */
.other-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  color: var(--muted);
  white-space: nowrap;
}
.other-status-badge .status-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green);
}
.other-status-badge.status-online .status-dot { background: var(--green); box-shadow: 0 0 6px rgba(115, 183, 70, 0.6); }
.other-status-badge.status-busy .status-dot { background: var(--yellow); box-shadow: 0 0 6px rgba(210, 153, 34, 0.6); }
.other-status-badge.status-dnd .status-dot { background: var(--red); box-shadow: 0 0 6px rgba(248, 81, 73, 0.6); }

/* Tighten chat-header status pill on mobile to fit alongside title +
   other action pills. */
.chat-header #chatStatusToggle {
  height: 30px;
  padding: 0 10px;
  font-size: 0.78rem;
}
.chat-header #chatStatusToggle .status-label { font-size: 0.78rem; }
@media (max-width: 600px) {
  .chat-header #chatStatusToggle { padding: 0 8px; }
  .chat-header #chatStatusToggle .status-label { font-size: 0.72rem; }
  .other-status-badge { font-size: 0.72rem; }
}

/* ---- Mobile chat-header tightening ---- */
@media (max-width: 600px) {
  .chat-header {
    gap: 6px;
    padding: 10px 10px;
    flex-wrap: wrap;
  }
  .chat-header h1 {
    font-size: 0.95rem;
    flex: 1 1 100%;
    order: -1;
    text-align: left;
    padding-right: 6px;
  }
  .chat-header .back { font-size: 0.78rem; }
  .chat-header .translate-btn,
  .chat-header .lang-button {
    height: 30px;
    padding: 0 10px;
    font-size: 0.78rem;
  }
  /* Keep the three icon buttons square on narrow screens but trim them
     a touch so they match the surrounding 30px-tall pills' visual mass. */
  .chat-header .chat-icon-btn,
  .chat-header .voice-btn-call,
  .chat-header .video-btn,
  .chat-header .chat-customize-btn {
    width: 36px;
    height: 36px;
    margin-left: 6px;
    font-size: 0.95rem;
  }
  .chat-header .translate-btn {
    /* Truncate long "Translate (Español)" labels so they don't blow the
       header out on narrow screens. */
    max-width: 130px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .conn-status { font-size: 0.7rem; }
  .lang-menu {
    /* Anchor to the right edge with a tiny inset so it never spills off
       the screen on narrow phones. */
    right: 6px;
    min-width: 200px;
    max-width: calc(100vw - 12px);
  }
  .vanish-menu {
    /* Make sure the vanish duration menu fits comfortably above the
       toolbar on phones with narrow viewports. */
    left: 8px !important;
    min-width: 0;
    width: calc(100vw - 16px);
    max-width: 320px;
  }
  .translate-panel { padding: 12px 14px; }
}

/* iOS Safari sometimes refuses to let MediaRecorder run when the input
   field is focused-but-hidden. Make sure the form/textarea size accounts
   for the on-screen keyboard. */
@supports (height: 100dvh) {
  body.chat-body { height: 100dvh; }
}
.conn-status { font-size: 0.75rem; color: var(--muted); }
.conn-status.live { color: var(--green); }
.conn-status.error { color: var(--red); }

.chat-pane {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.messages {
  flex: 1;
  overflow-y: auto;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
/* ------ Signup intake wizard ------ */
.intake-overlay {
  position: fixed;
  inset: 0;
  z-index: 99998;
  background: rgba(15, 15, 14, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.intake-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 24px;
  width: 100%;
  max-width: 480px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
}
.intake-progress {
  height: 4px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 20px;
}
.intake-progress-bar {
  height: 100%;
  background: var(--accent);
  width: 0%;
  transition: width 0.25s ease;
}
.intake-question {
  font-size: 1.2rem;
  font-weight: 600;
  margin-bottom: 18px;
  line-height: 1.35;
}
.intake-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.intake-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: var(--card-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  font-size: 0.95rem;
}
.intake-option:hover { border-color: var(--accent); }
.intake-option input { accent-color: var(--accent); }
.intake-freetext-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 14px;
  background: var(--card-2);
  border: 1px dashed var(--border);
  border-radius: 10px;
  margin-top: 4px;
}
.intake-freetext-label {
  font-size: 0.78rem;
  color: var(--muted);
  font-weight: 500;
}
.intake-freetext-input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text);
  font-size: 0.95rem;
  font-family: inherit;
}
.intake-freetext-input:focus {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.intake-hint {
  font-size: 0.82rem;
  color: var(--muted);
  margin: 6px 0 12px 0;
  line-height: 1.4;
}

/* Welcome screen post-intake — shows the user's personal code + public
   handle so they understand the dual-relationship model from minute 1. */
.welcome-card {
  max-width: 440px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.welcome-title {
  margin: 0 0 2px 0;
  font-size: 1.4rem;
}
.welcome-sub {
  margin: 0 0 10px 0;
  font-size: 0.92rem;
}
.welcome-block {
  background: var(--card-2);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px 16px;
  margin: 4px 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.welcome-personal { border-color: rgba(115, 183, 70, 0.4); background: rgba(115, 183, 70, 0.06); }
.welcome-public   { border-color: rgba(60, 130, 246, 0.4); background: rgba(60, 130, 246, 0.06); }
.welcome-block-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 0.92rem;
}
.welcome-emoji { font-size: 1.2rem; }
.welcome-block-label { letter-spacing: 0.04em; }
.welcome-code {
  display: block;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 1.25rem;
  letter-spacing: 0.16em;
  font-weight: 700;
  background: rgba(0, 0, 0, 0.18);
  border-radius: 8px;
  padding: 8px 12px;
  text-align: center;
  user-select: all;
  margin: 4px 0;
}
.welcome-block-tip {
  font-size: 0.78rem;
  margin: 0;
}
.welcome-copy-btn {
  align-self: flex-start;
  background: var(--accent);
  color: #fff;
  border: none;
  padding: 6px 14px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.82rem;
  cursor: pointer;
}
.welcome-finish-btn {
  background: var(--accent);
  color: #fff;
  border: none;
  padding: 12px 32px;
  border-radius: 999px;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
}
.intake-date {
  width: 100%;
  padding: 12px 14px;
  background: var(--card-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  font-size: 1rem;
  font-family: inherit;
}
.intake-actions {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 22px;
}
.intake-back, .intake-next {
  padding: 12px 22px;
  border-radius: 999px;
  border: 0;
  font-weight: 600;
  cursor: pointer;
  font-size: 0.95rem;
}
.intake-back {
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--border);
}
.intake-next {
  background: var(--accent);
  color: #061004;
  margin-left: auto;
}
.intake-next:hover { background: #84c952; }

/* Slide-in banner that appears at the top of the chat for ~2.5 seconds
   when a new message arrives. Universal alert mechanism — works on iOS
   silent mode, on muted tabs, with no audio gesture, etc. */
.new-msg-toast {
  position: fixed;
  top: 12px;
  left: 50%;
  transform: translate(-50%, -120%);
  background: var(--accent);
  color: #061004;
  padding: 10px 18px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.92rem;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
  z-index: 99999;
  pointer-events: none;
  transition: transform 0.28s ease;
}
.new-msg-toast.visible {
  transform: translate(-50%, 0);
}

.bubble {
  max-width: 78%;
  padding: 10px 13px;
  border-radius: 14px;
  word-wrap: break-word;
  white-space: pre-wrap;
  font-size: 0.95rem;
  /* Skip rendering off-screen bubbles so iOS doesn't recompute layout
     for the entire message history when the keyboard pops up. Native
     browser optimization, supported in modern Safari/Chrome. */
  content-visibility: auto;
  contain-intrinsic-size: auto 60px;
}
/* Both sides use the same dark bubble color now — color-based identity
   was unreliable (depended on per-device markers that could get wiped or
   overwritten). Distinction comes from alignment + bubble shape (the
   "tail" corner) + the @username label that travels in the encrypted
   Sender field. */
.bubble.me {
  align-self: flex-end;
  background: var(--bubble-them);
  color: var(--text);
  border-bottom-right-radius: 4px;
  border: 1px solid rgba(115, 183, 70, 0.45);
}
.bubble.them {
  align-self: flex-start;
  background: var(--bubble-them);
  color: var(--text);
  border-bottom-left-radius: 4px;
}
/* @username label above the bubble for messages whose Sender field has
   a real identity (the OWNER's auth username). The link recipient's
   bubbles have an empty sender → no label. */
.sender-label {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--accent);
  margin-bottom: 2px;
  letter-spacing: 0.02em;
}
.bubble .meta {
  display: block;
  margin-top: 4px;
  font-size: 0.7rem;
  opacity: 0.65;
}
.send-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 16px;
  /* Lift above iOS Safari / Chrome bottom UI bars. */
  padding-bottom: max(env(safe-area-inset-bottom), 18px);
  background: var(--card);
  border-top: 1px solid var(--border);
}
/* Single-line text input — identical engine to the login username
   field, which is the only DOM with zero typing delay on Chrome iOS.
   Switched away from textarea entirely; Chrome iOS has a slower input
   pipeline for multiline. */
.send-form input[type="text"],
.send-form textarea {
  width: 100%;
  resize: none;
  height: 56px;
  padding: 10px 12px;
  background: var(--card-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 16px;
}
.send-form textarea:focus { outline: none; border-color: var(--accent); }
.send-actions {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
}
.send-submit {
  margin-left: auto;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 0 22px;
  height: 40px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.9rem;
}
.send-submit:hover { background: #84c952; }
.send-submit:disabled { opacity: 0.5; cursor: wait; }

/* Vanish duration popover */
.vanish-menu {
  position: absolute;
  bottom: 70px;
  left: 16px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  z-index: 500;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  min-width: 180px;
}
.vanish-menu-title {
  font-size: 0.78rem;
  color: var(--muted);
  padding: 6px 10px 4px;
}
.vanish-menu-note {
  color: var(--muted-2);
  font-size: 0.72rem;
  line-height: 1.25;
  max-width: 230px;
  padding: 0 10px 6px;
}
.vanish-menu button {
  background: transparent;
  color: var(--text);
  border: none;
  text-align: left;
  padding: 10px 12px;
  border-radius: 8px;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.9rem;
}
.vanish-menu button:hover { background: var(--card-2); }
.vanish-menu button.cancel { color: var(--muted); border-top: 1px solid var(--border-soft); margin-top: 4px; }

/* Vanish badge in sender's bubble before recipient views */
.vanish-pending {
  display: block;
  margin-top: 6px;
  font-size: 0.8rem;
  color: var(--muted);
  font-style: italic;
}

/* Tap-to-reveal placeholder for View Once media */
.view-once-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--card-2);
  border: 1px dashed var(--border);
  border-radius: 8px;
  padding: 28px 16px;
  margin-top: 6px;
  cursor: pointer;
  color: var(--muted);
  font-size: 0.9rem;
}
.view-once-placeholder:hover { color: var(--text); border-color: var(--accent); }

.name-prompt { margin: 40px auto; }
.error-pane { margin: 40px auto; max-width: 480px; }

.footer {
  margin-top: 30px;
  font-size: 0.75rem;
  color: var(--muted);
  text-align: center;
}

/* Profile picture next to each contact's name. Click to upload, falls
   back to a colored circle with the contact's first initial. */
/* Each contact row is one centered-aligned flex line: [avatar] [info column] [actions]
   The avatar's vertical center matches the info column's vertical center,
   so the picture lines up cleanly with the contact's name regardless of
   whether the link toggle text underneath is "LIVE" or "DISABLED". */
.contact-avatar {
  width: 56px;
  height: 56px;
  border: 0;
  border-radius: 50%;
  background: var(--accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  overflow: hidden;
  flex-shrink: 0;
  padding: 0;
}
.contact-avatar:hover { box-shadow: 0 0 0 3px rgba(115, 183, 70, 0.3); }
.contact-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.contact-avatar-fallback {
  color: #fff;
  font-weight: 700;
  font-size: 1.25rem;
  text-transform: uppercase;
}
.contact-row-main {
  display: flex;
  align-items: center;
  gap: 12px;
}
.contact-name-row {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  line-height: 1.2;
}
.contact-name-row .contact-name {
  display: inline-block;
  font-weight: 600;
  font-size: 1rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}
.contact-row-foot {
  margin-top: 10px;
  padding-left: 68px; /* line up with text after the 56px avatar + gap */
}
.contact-name-row .contact-name {
  display: inline-flex;
  align-items: center;
  line-height: 1.2;
}
.contact-name-row .rename-btn {
  background: transparent;
  border: 0;
  color: var(--muted);
  cursor: pointer;
  padding: 0;
  font-size: 0.95rem;
  opacity: 0.7;
  border-radius: 4px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  vertical-align: middle;
  /* Emoji glyphs have their own baseline that drops the pencil below
     the name's mid-line. Nudge it up a hair to optically center. */
  position: relative;
  top: -2px;
}
.contact-name-row .rename-btn:hover { opacity: 1; }
/* Lock/unlock button next to the pencil — toggles visibility between
   "appears on dashboard" and "hidden behind a code". Same visual size
   as the pencil so they read as a pair of inline tools on the name row. */
.contact-name-row .visibility-toggle-btn {
  background: transparent;
  border: 0;
  color: var(--muted);
  cursor: pointer;
  padding: 0;
  font-size: 0.95rem;
  opacity: 0.7;
  border-radius: 4px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  vertical-align: middle;
  position: relative;
  top: -2px;
}
.contact-name-row .visibility-toggle-btn:hover { opacity: 1; }
/* Pin/unpin button — same shape as the pencil and visibility toggle.
   📌 = unpinned, 📍 = pinned. Pinned contacts sort to the very top. */
.contact-name-row .pin-btn {
  background: transparent;
  border: 0;
  color: var(--muted);
  cursor: pointer;
  padding: 0;
  font-size: 0.95rem;
  opacity: 0.7;
  border-radius: 4px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  vertical-align: middle;
  position: relative;
  top: -2px;
}
.contact-name-row .pin-btn:hover { opacity: 1; }
.contact-name-row .pin-btn.pinned { opacity: 1; }
/* New-message dot — sits at the end of the contact name row when the
   dashboard's polling sees a fresh message from the other party that
   hasn't been opened yet in chat.html. Cleared when chat.html stamps
   the latest message ID as "seen" in localStorage. */
.contact-name-row .unread-dot {
  display: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent);
  margin-left: 6px;
  flex-shrink: 0;
  box-shadow: 0 0 0 2px rgba(115, 183, 70, 0.25);
}
.contact-row.has-unread .unread-dot { display: inline-block; }
.contact-row.has-unread .contact-name { color: var(--accent); }
.contact-link-status {
  /* Smaller inline toggle pill — sits directly under the contact name. */
  font-size: 0.78rem;
}/* v100 stripped account-avatar rule */
/* v100 stripped account-avatar rule */
/* v100 stripped account-avatar rule */
/* v100 stripped account-avatar rule */
/* v100 stripped account-avatar rule */

/* Force the avatar button + username to share the same vertical center
   regardless of font baseline differences. The container uses flex
   centering and both children get explicit equal heights. */
.app-header > .user-group {
  height: 32px;
  align-items: center;
}/* v100 stripped account-avatar rule */

.app-header > .user-group h1 {
  align-self: center;
  height: 32px;
  line-height: 32px;
  display: inline-flex;
  align-items: center;
  padding: 0;
}

/* Trash icon next to each contact — wipes the message history for that
   conversation. Subtle red on hover. */
.contact-row .clear-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  border-radius: 999px;
  /* Match the height of Open chat / Copy link so all three actions sit
     on the same horizontal line. The other buttons compute to ~28px from
     `padding: 4px 8px` + 0.85rem text + 1px border on each side; matching
     to 28×28 keeps the trash optically centered with them. */
  width: 28px;
  height: 28px;
  padding: 0;
  cursor: pointer;
  font-size: 0.85rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.contact-row .clear-btn:hover { color: var(--red); border-color: var(--red); }
.contact-row .clear-btn:disabled { opacity: 0.5; cursor: wait; }
/* Permanently-delete-contact button — same shape as the trash, but
   marked red since it nukes the entire contact + history. */
.contact-row .delete-contact-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  border-radius: 999px;
  width: 28px;
  height: 28px;
  padding: 0;
  cursor: pointer;
  font-size: 0.85rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.contact-row .delete-contact-btn:hover { color: var(--red); border-color: var(--red); }
.contact-row .delete-contact-btn:disabled { opacity: 0.5; cursor: wait; }

/* Tighten the action buttons on mobile so longer contact names have
   room to breathe before they ellipsis-truncate. Layout stays the same
   (avatar | name | actions on one row); only the buttons get a hair
   smaller. */
@media (max-width: 600px) {
  .contact-actions { gap: 6px; }
  .contact-actions a,
  .contact-actions .copy-btn {
    font-size: 0.78rem;
    padding: 4px 7px;
  }
  .contact-row-main { gap: 8px; }
}

/* ------ Invite-friend section on the dashboard ------ */
.invite-friend {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
  margin: 12px 0;
}
.invite-friend summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--accent);
  list-style: none;
}
.invite-friend summary::-webkit-details-marker { display: none; }
.invite-friend > p { margin: 8px 0; }
.invite-code-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
}
.invite-code {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  background: var(--card-2);
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid var(--border);
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  color: var(--text);
}

/* ------ stealth: hide unlock summary visually ------ */
.hidden-unlock summary {
  list-style: none;
  font-size: 0.7rem;
  opacity: 0.5;
}
.hidden-unlock summary::-webkit-details-marker { display: none; }

/* ------ Auth: plain "Create account" / "Sign in" text link ------ */
/* Highest specificity to defeat `.stealth-card form button` (which would
   otherwise render this as a giant green submit button). The body
   selector + class chain keeps it a discreet centered text link no
   matter what other rules say. */
body.stealth .stealth-card form button.auth-switch-link,
.stealth-card form button.auth-switch-link,
form button.auth-switch-link {
  display: inline;
  margin: 0 0 0 4px;
  background: transparent;
  color: var(--accent);
  border: 0;
  padding: 4px 6px;
  font-size: 0.9rem;
  cursor: pointer;
  font-family: inherit;
  font-weight: 600;
  text-decoration: underline;
  height: auto;
  width: auto;
  border-radius: 4px;
  text-align: left;
}
body.stealth .stealth-card form button.auth-switch-link:hover,
.stealth-card form button.auth-switch-link:hover,
form button.auth-switch-link:hover {
  color: #84c952;
  background: transparent;
}

.auth-warn {
  font-size: 0.78rem;
  color: var(--muted);
  background: rgba(210, 153, 34, 0.08);
  border: 1px solid rgba(210, 153, 34, 0.3);
  border-radius: 8px;
  padding: 10px 12px;
  margin: 4px 0;
  line-height: 1.45;
}

/* ------ Password show/hide toggle on the auth landing page ------ */
.password-row {
  position: relative;
  width: 100%;
}
.password-row input {
  width: 100%;
  padding-right: 44px;
  box-sizing: border-box;
}
/* Masked text input: visually hide the typed characters as dots while
   keeping the input as type="text" so the emoji keyboard shows up on
   iOS / Android. iOS hides emojis on type="password", which broke the
   "use 🚲🍕🌮 as your code" feature. The eye toggle adds/removes this
   class to flip between masked and revealed. */
.masked-input.is-masked {
  -webkit-text-security: disc;
  text-security: disc;
  letter-spacing: 0.18em;
}
/* Higher specificity than `.stealth-card form button` so the eye toggle
   doesn't inherit the giant green submit-button styles. Use top:0 +
   bottom:0 + margin:auto so the emoji is truly vertically centered no
   matter what padding the input has. */
.stealth-card form button.show-password,
form button.show-password {
  position: absolute;
  right: 8px;
  top: 0;
  bottom: 0;
  margin: auto 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  opacity: 0.7;
  width: 32px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  color: var(--text);
  border-radius: 50%;
  font-weight: normal;
  transform: none;
}
.stealth-card form button.show-password:hover,
form button.show-password:hover { opacity: 1; background: transparent; }

/* ------ language picker placement on the auth landing page ------ */
/* Sits inside the centered .stealth-card so it's naturally above the
   "Sign in" heading and centered with the rest of the form. */
.auth-lang-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 24px;
  position: relative;
}

/* "Don't have an account? Create one" line below the submit button. */
.auth-mode-switch {
  text-align: center;
  font-size: 0.9rem;
  color: var(--muted);
  margin: 12px 0 0;
}

.translate-divider {
  border: 0;
  border-top: 1px solid var(--border-soft);
  margin: 4px 0;
}

/* Dashboard header pills — match the chat-header pill geometry exactly so
   Available / Install / username / language / sign-out all share the same
   baseline pill shape (height, padding, font-size, border-radius). The
   Install pill sits beside the status light where it is easy to find. */
.app-header .link-btn,
.app-header .status-toggle,
.app-header .lang-button,
.app-header .install-pill {
  height: 32px;
  padding: 0 12px;
  font-size: 0.85rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 0;
  line-height: 1;
  white-space: nowrap;
  box-sizing: border-box;
}
/* Right-group is the Lang / Sign out trio. Force nowrap so the
   pills always sit on one row. min-width:0 lets each child shrink to
   its content rather than overflowing the grid track. */
.app-header > .right-group {
  flex-wrap: nowrap;
  min-width: 0;
}
.app-header > .right-group > * { flex: 0 0 auto; min-width: 0; }
@media (max-width: 600px) {
  .app-header {
    gap: 6px;
    padding: 10px 8px;
    flex-wrap: nowrap;
  }
  .app-header > .header-left-group {
    gap: 6px;
  }
  .app-header h1 {
    flex: 1;
    min-width: 0;
    font-size: 0.95rem;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .app-header .status-toggle,
  .app-header .link-btn,
  .app-header .lang-button,
  .app-header .install-pill {
    font-size: 0.78rem;
    padding: 0 10px;
    height: 30px;
    gap: 4px;
  }
  /* Tightest viewports: drop the "EN" text from the lang pill — the flag
     alone identifies it. Keeps the three pills on one row even on a 320px
     iPhone SE. */
  .app-header > .right-group { gap: 6px; }
}
@media (max-width: 360px) {
  .app-header .lang-button #currentLangCode { display: none; }
}

/* ------ language picker (chat header) ------ */
.lang-wrap {
  position: relative;
  z-index: 50;
}
.lang-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: var(--card-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 0.8rem;
  cursor: pointer;
  font-family: inherit;
}
.lang-button:hover { border-color: var(--accent); }
.lang-button .flag { font-size: 1rem; }
.lang-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 220px;
  max-height: min(70vh, 480px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  display: flex;
  flex-direction: column;
  gap: 2px;
  overscroll-behavior: contain;
}
.lang-menu-title {
  margin: 6px 8px 4px;
  font-size: 0.7rem;
  color: var(--muted-2);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.lang-option {
  display: grid;
  grid-template-columns: 32px 1fr;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: transparent;
  color: var(--text);
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
}
.lang-option:hover, .lang-option.selected { background: var(--card-2); }
.lang-option .flag { font-size: 1.2rem; text-align: center; }
.lang-option strong { display: block; font-size: 0.9rem; }
.lang-option small { color: var(--muted-2); font-size: 0.72rem; }

/* ------ translate button + panel ------ */
.translate-btn {
  background: var(--card-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 0.85rem;
  cursor: pointer;
  margin-right: 8px;
}
.translate-btn:hover { border-color: var(--accent); }

.translate-panel {
  background: var(--card);
  border-bottom: 1px solid var(--border);
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.translate-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.9rem;
  color: var(--text);
}
.translate-row select {
  background: var(--card-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 0.9rem;
  font-family: inherit;
}
.translate-row.toggle { gap: 8px; }
.translate-row.toggle input { width: 18px; height: 18px; accent-color: var(--accent); }
.translate-note {
  margin: 0;
  font-size: 0.78rem;
  color: var(--muted-2);
}

/* ------ translation slot inside bubbles ------ */
.translation-slot {
  display: block;
  margin-top: 6px;
  font-size: 0.9em;
  color: var(--muted);
  font-style: italic;
  border-top: 1px dashed var(--border-soft);
  padding-top: 5px;
}
.translation-slot.translating { opacity: 0.6; }
.translation-slot.translated {
  color: var(--text);
  font-style: normal;
  opacity: 0.9;
}
/* Per-message translate button. On mobile we widen the tap target so it
   actually responds to taps — at the previous size some users couldn't
   land on it. Stays a discreet underlined link visually. */
.translate-msg-btn {
  background: transparent;
  color: var(--accent);
  border: none;
  padding: 8px 4px;
  cursor: pointer;
  font-size: 0.85rem;
  text-decoration: underline;
  font-family: inherit;
  -webkit-tap-highlight-color: rgba(115,183,70,0.25);
  display: inline-block;
  min-height: 32px;
  line-height: 1.4;
}
.translate-msg-btn:hover { color: #8fcf66; }
.translate-msg-btn:active { color: #5a9335; }
.translate-msg-btn:disabled { color: var(--muted-2); cursor: wait; text-decoration: none; }

/* Bubbles for "me" use accent green text bg — make their translation legible */
.bubble.me .translation-slot {
  border-top-color: rgba(255,255,255,0.25);
  color: rgba(255,255,255,0.85);
}
.bubble.me .translate-msg-btn {
  color: #fff;
}

/* ------ Custom voice-note audio player ------ */
.audio-player {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: rgba(0,0,0,0.18);
  border-radius: 12px;
  padding: 10px 12px;
  margin-top: 6px;
  width: 100%;
  max-width: 320px;
  /* On narrow screens (mobile), let it shrink to whatever the bubble is. */
  min-width: 0;
  box-sizing: border-box;
}
@media (min-width: 600px) {
  .audio-player { min-width: 260px; }
}
.bubble.them .audio-player { background: rgba(255,255,255,0.06); }
.ap-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.ap-play {
  background: var(--accent);
  color: #fff;
  border: 0;
  border-radius: 50%;
  width: 34px;
  height: 34px;
  font-size: 0.85rem;
  cursor: pointer;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  padding: 0;
}
.ap-play:hover { background: #84c952; }
.ap-progress {
  flex: 1;
  height: 24px; /* bigger touch target on mobile; visual bar drawn via inner element */
  background: transparent;
  position: relative;
  border-radius: 999px;
  overflow: visible;
  cursor: pointer;
  min-width: 60px;
  -webkit-tap-highlight-color: transparent;
}
.ap-progress::before {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 6px;
  background: rgba(255,255,255,0.2);
  border-radius: 999px;
  pointer-events: none;
}
.ap-progress-fill {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 6px;
  width: 0%;
  background: #fff;
  border-radius: 999px;
  transition: width 0.1s linear;
  pointer-events: none;
}
.bubble.them .ap-progress-fill { background: var(--accent); }
.ap-time {
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
  color: rgba(255,255,255,0.85);
  flex-shrink: 0;
  min-width: 38px;
  text-align: right;
}
.bubble.them .ap-time { color: var(--muted); }
.ap-download {
  color: rgba(255,255,255,0.85);
  font-size: 1rem;
  text-decoration: none;
  flex-shrink: 0;
  padding: 0 4px;
  cursor: pointer;
}
.bubble.them .ap-download { color: var(--muted); }
.ap-download:hover { color: #fff; }
.bubble.them .ap-download:hover { color: var(--text); }
.ap-speed-row { gap: 12px; padding-left: 4px; }
.ap-speed-slider {
  flex: 1;
  height: 24px; /* big touch area; visual track is drawn via gradient below */
  accent-color: #fff;
  -webkit-appearance: none;
  appearance: none;
  background: linear-gradient(to bottom, transparent calc(50% - 2px), rgba(255,255,255,0.25) calc(50% - 2px), rgba(255,255,255,0.25) calc(50% + 2px), transparent calc(50% + 2px));
  border-radius: 999px;
  cursor: pointer;
  margin: 0;
  padding: 0;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}
.bubble.them .ap-speed-slider {
  background: rgba(255,255,255,0.15);
  accent-color: var(--accent);
}
.ap-speed-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  border: 0;
  cursor: pointer;
}
.bubble.them .ap-speed-slider::-webkit-slider-thumb { background: var(--accent); }
.ap-speed-slider::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  border: 0;
  cursor: pointer;
}
.bubble.them .ap-speed-slider::-moz-range-thumb { background: var(--accent); }
.ap-speed-label {
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
  color: rgba(255,255,255,0.85);
  min-width: 48px;
  text-align: left;
  flex-shrink: 0;
}
.bubble.them .ap-speed-label { color: var(--muted); }

/* ------ Voice-note transcript caption ------ */
.bubble .voice-transcript {
  display: block;
  font-size: 0.88rem;
  font-style: italic;
  opacity: 0.85;
  line-height: 1.4;
  margin-bottom: 4px;
}
.bubble.me .voice-transcript { color: rgba(255,255,255,0.9); }

/* ------ System messages (recording consent, screen-rec warnings) ------ */
.sys-msg {
  align-self: center;
  max-width: 80%;
  background: var(--card-2);
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 0.85rem;
  text-align: center;
  margin: 8px 0;
}
.sys-msg.recording {
  background: rgba(248, 81, 73, 0.12);
  border-color: rgba(248, 81, 73, 0.4);
  color: var(--text);
}
.sys-msg.warn {
  background: rgba(210, 153, 34, 0.12);
  border-color: rgba(210, 153, 34, 0.4);
  color: var(--text);
}
.sys-actions {
  display: inline-flex;
  gap: 6px;
  margin-left: 10px;
}
.sys-btn {
  background: var(--card);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 0.78rem;
  cursor: pointer;
  font-family: inherit;
}
.sys-btn.accept { background: var(--accent); color: #fff; border-color: var(--accent); }
.sys-btn.decline { color: var(--red); }
.sys-btn:hover { opacity: 0.9; }

/* ------ Call overlay controls (record + end call) ------ */
.call-controls {
  position: absolute;
  top: 14px;
  right: 14px;
  display: flex;
  gap: 8px;
  align-items: center;
  z-index: 10;
}
.call-tool-btn {
  background: rgba(255,255,255,0.12);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 0.82rem;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
}
.call-tool-btn:hover { background: rgba(255,255,255,0.2); }
.call-tool-btn[aria-pressed="true"] {
  background: rgba(129, 114, 255, 0.32);
  border-color: rgba(171, 163, 255, 0.7);
}
.call-tool-btn.off {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
}
.call-record {
  background: var(--card-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 6px 16px;
  font-size: 0.85rem;
  cursor: pointer;
  font-family: inherit;
}
.call-record.active {
  background: var(--red);
  color: #fff;
  border-color: var(--red);
  animation: rec-pulse 1.5s ease-in-out infinite;
}
.call-record:disabled { opacity: 0.6; cursor: wait; }
.call-rec-status {
  color: var(--red);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  animation: rec-pulse 1.5s ease-in-out infinite;
}
@keyframes rec-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}
/* Full-screen incoming-call ringer — pops up when the other party rings
   you. Big Answer / Decline buttons, pulsing icon, takes over the chat. */
.incoming-call-screen {
  position: fixed;
  inset: 0;
  background: rgba(15, 15, 14, 0.96);
  z-index: 9998;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: max(16px, calc(env(safe-area-inset-top) + 12px)) 20px 20px;
  backdrop-filter: blur(20px);
  animation: incoming-fade-in 0.18s ease-out;
}
@keyframes incoming-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.incoming-call-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 36px 28px max(28px, env(safe-area-inset-bottom));
  width: 100%;
  max-width: 380px;
  text-align: center;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
}
.incoming-call-pulse {
  font-size: 3rem;
  margin: 0 auto 18px;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: var(--accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  animation: ring-pulse 1.4s ease-in-out infinite;
  box-shadow: 0 0 0 0 rgba(115, 183, 70, 0.7);
}
@keyframes ring-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(115, 183, 70, 0.7); transform: scale(1); }
  70%  { box-shadow: 0 0 0 24px rgba(115, 183, 70, 0); transform: scale(1.06); }
  100% { box-shadow: 0 0 0 0 rgba(115, 183, 70, 0); transform: scale(1); }
}
.incoming-call-card h2 {
  margin: 0 0 8px;
  font-size: 1.4rem;
  font-weight: 700;
}
.incoming-call-sub {
  margin: 0 0 28px;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.4;
}
.incoming-call-actions {
  display: flex;
  gap: 16px;
  justify-content: center;
}
.incoming-decline,
.incoming-answer {
  flex: 1;
  height: 56px;
  border-radius: 999px;
  border: 0;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.incoming-decline {
  background: var(--red);
  color: #fff;
}
.incoming-decline:hover { background: #d44a45; }
.incoming-answer {
  background: var(--accent);
  color: #fff;
}
.incoming-answer:hover { background: #84c952; }

.call-privacy-banner {
  position: fixed;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(43, 44, 41, 0.92);
  color: var(--muted);
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 0.78rem;
  z-index: 1100;
  border: 1px solid var(--border);
}

/* ==========================================================================
   v2 features — Circle ⭕, GIF picker, voice assistant, customization,
   location share, money/ride deep-link buttons, theme picker.
   ========================================================================== */

/* Circle pill / invite button on dashboard contact rows */
.invite-circle-btn,
.circle-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 6px;
  padding: 2px 10px;
  font-size: 0.74rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-weight: 600;
  transition: background 120ms, color 120ms, border-color 120ms;
}
.invite-circle-btn:hover {
  background: rgba(115, 183, 70, 0.12);
  color: var(--accent);
  border-color: var(--accent);
}
.circle-pill.mutual {
  background: rgba(115, 183, 70, 0.18);
  color: var(--accent);
  border-color: rgba(115, 183, 70, 0.4);
  cursor: default;
}
.circle-pill.pending {
  background: rgba(255, 196, 0, 0.12);
  color: #d9a300;
  border-color: rgba(255, 196, 0, 0.3);
  cursor: default;
}
.circle-pill.incoming {
  background: rgba(115, 183, 70, 0.18);
  color: var(--accent);
  border-color: rgba(115, 183, 70, 0.5);
  animation: circle-pulse 1.6s ease-in-out infinite;
}
@keyframes circle-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.04); }
}

/* In-chat Circle invite banner (rendered as a sys-msg by chat.js) */
.sys-msg.circle-invite {
  flex-direction: column;
  background: linear-gradient(135deg, rgba(115, 183, 70, 0.08), rgba(115, 183, 70, 0.02));
  border: 1px solid rgba(115, 183, 70, 0.3);
  border-radius: 14px;
  padding: 14px 16px;
  align-items: stretch;
  gap: 8px;
  max-width: 90%;
  margin: 12px auto;
}
.sys-msg.circle-invite .circle-banner-icon {
  font-size: 1.6rem;
  text-align: center;
}
.sys-msg.circle-invite .circle-banner-title {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--text);
  text-align: center;
}
.sys-msg.circle-invite .circle-banner-sub {
  font-size: 0.82rem;
  color: var(--muted);
  text-align: center;
}
.sys-msg.circle-invite .sys-actions {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-top: 4px;
}
.sys-msg.circle-mutual {
  background: rgba(115, 183, 70, 0.16);
  border: 1px solid rgba(115, 183, 70, 0.4);
  color: var(--accent);
  font-weight: 600;
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  padding: 10px 14px;
  margin: 8px auto;
  max-width: 80%;
}

/* GIF picker */
.gif-picker {
  position: absolute;
  bottom: 70px;
  left: 12px;
  right: 12px;
  max-height: 50vh;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 10px;
  z-index: 800;
  overflow-y: auto;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
}
.gif-picker[hidden] { display: none; }
.gif-picker-search {
  width: 100%;
  margin-bottom: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
}
.gif-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
}
.gif-grid img {
  width: 100%;
  height: 110px;
  object-fit: cover;
  border-radius: 8px;
  cursor: pointer;
  background: #222;
}
.gif-trigger-btn,
.uber-btn,
.paypal-btn,
.location-btn,
.assistant-btn,
.qa-btn {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--muted);
  padding: 4px 10px;
  font-size: 0.85rem;
  cursor: pointer;
  margin-right: 4px;
  white-space: nowrap;
}
.gif-trigger-btn:hover,
.uber-btn:hover,
.paypal-btn:hover,
.location-btn:hover,
.assistant-btn:hover,
.qa-btn:hover {
  background: rgba(115, 183, 70, 0.12);
  color: var(--accent);
  border-color: var(--accent);
}

/* Overflow sheet that the "More…" quick-action opens */
.qa-more-sheet {
  position: fixed;
  bottom: 80px;
  left: 12px;
  right: 12px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 16px;
  z-index: 1500;
  box-shadow: 0 12px 50px rgba(0, 0, 0, 0.55);
  max-width: 480px;
  margin: 0 auto;
}
.qa-more-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.qa-more-grid button {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 12px 6px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font-size: 1.4rem;
  cursor: pointer;
  transition: transform 80ms;
}
.qa-more-grid button span {
  font-size: 0.72rem;
  color: var(--muted);
}
.qa-more-grid button:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
}

/* Quick-action drawer above the send field */
.chat-quick-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  padding: 6px 12px 0 12px;
}
.chat-quick-actions button { white-space: nowrap; }

/* Voice assistant overlay — fullscreen pulsing circle while listening */
.assistant-overlay {
  position: fixed;
  inset: 0;
  background: radial-gradient(circle at 50% 40%, rgba(115, 183, 70, 0.18), transparent 60%), rgba(0, 0, 0, 0.86);
  z-index: 2200;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  color: #fff;
  text-align: center;
  padding: 20px;
}
.assistant-overlay[hidden] { display: none; }
.assistant-pulse {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--accent), rgba(115, 183, 70, 0.18));
  animation: assistant-pulse 1.6s ease-in-out infinite;
  box-shadow: 0 0 40px rgba(115, 183, 70, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3.6rem;
}
@keyframes assistant-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}
.assistant-name {
  font-size: 1.6rem;
  font-weight: 600;
  letter-spacing: 0.4px;
}
.assistant-status {
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.95rem;
  min-height: 1.4em;
}
.assistant-transcript {
  font-size: 1.1rem;
  font-style: italic;
  max-width: 84vw;
  color: rgba(255, 255, 255, 0.92);
}
.assistant-reply {
  font-size: 1.05rem;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 12px 16px;
  max-width: 84vw;
}
.assistant-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}
.assistant-action-card {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 12px;
  padding: 10px 14px;
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: stretch;
  min-width: 220px;
}
.assistant-action-card .desc { font-size: 0.85rem; color: rgba(255, 255, 255, 0.78); }
.assistant-action-card .row { display: flex; gap: 6px; }
.assistant-action-card .row button { flex: 1; }
.assistant-close-btn {
  position: absolute;
  top: 18px;
  right: 18px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #fff;
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 0.9rem;
  cursor: pointer;
}

/* Voice-or-typing parity: assistant overlay also accepts typed input */
.assistant-typer {
  display: flex;
  gap: 8px;
  width: min(420px, 84vw);
  margin-top: 12px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  padding: 4px 4px 4px 16px;
}
.assistant-typer-input {
  flex: 1;
  background: transparent;
  border: none;
  color: #fff;
  font-size: 0.95rem;
  outline: none;
  font-family: inherit;
}
.assistant-typer-input::placeholder { color: rgba(255, 255, 255, 0.5); }
.assistant-typer-send {
  background: var(--accent);
  border: none;
  color: #fff;
  border-radius: 999px;
  width: 40px;
  height: 40px;
  font-size: 1.1rem;
  font-weight: 700;
  cursor: pointer;
}
.assistant-typer-send:disabled { opacity: 0.5; cursor: not-allowed; }

/* Theme picker (settings panel) */
.theme-picker {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 10px 0;
}
.theme-swatch {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  border: 2px solid transparent;
  cursor: pointer;
  background: var(--swatch-bg, #73b746);
}
.theme-swatch.active {
  border-color: #fff;
  box-shadow: 0 0 0 2px var(--swatch-bg, #73b746);
}

/* Location share preview */
.location-bubble {
  display: block;
  border-radius: 14px;
  overflow: hidden;
  background: #222;
  max-width: 280px;
  text-decoration: none;
  color: var(--text);
  border: 1px solid var(--border);
}
.location-bubble img {
  display: block;
  width: 100%;
  height: 160px;
  object-fit: cover;
}
.location-bubble .meta-row {
  padding: 8px 10px;
  font-size: 0.85rem;
}
.location-bubble.live { border-color: var(--accent); }
.location-bubble.live::before {
  content: "● LIVE";
  position: absolute;
  top: 8px;
  left: 8px;
  background: var(--accent);
  color: #fff;
  font-size: 0.7rem;
  padding: 2px 8px;
  border-radius: 999px;
  font-weight: 700;
}

/* Location open-with row — three buttons (Google / Apple / Waze)
   so the user picks whichever maps app they prefer. */
.location-open-row {
  display: flex;
  gap: 6px;
  padding: 6px 8px 8px;
  background: var(--card-2, rgba(255,255,255,0.04));
}
.loc-open-btn {
  flex: 1;
  text-align: center;
  padding: 7px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 0.78rem;
  font-weight: 600;
  text-decoration: none;
  transition: background 100ms;
}
.loc-open-btn:hover {
  background: rgba(115, 183, 70, 0.15);
  border-color: var(--accent);
  color: var(--accent);
}

/* Money / ride deep-link buttons (in chat) */
.action-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 14px;
  background: rgba(115, 183, 70, 0.12);
  border: 1px solid rgba(115, 183, 70, 0.3);
  text-decoration: none;
  color: var(--text);
  margin-top: 6px;
  max-width: 280px;
}
.action-card .icon { font-size: 1.4rem; }
.action-card .txt { display: flex; flex-direction: column; }
.action-card .txt .title { font-weight: 600; font-size: 0.9rem; }
.action-card .txt .sub { font-size: 0.78rem; color: var(--muted); }

/* Masked text input (used for passwords). Visually equivalent to
   type="password" via -webkit-text-security, but the input is type="text"
   underneath so iOS Safari shows the emoji keyboard. The .unmasked variant
   is added by the show-password toggle to reveal the typed value. */
.masked-input {
  -webkit-text-security: disc;
  text-security: disc; /* Future-spec, currently no-op in most browsers */
  font-family: text-security-disc, ui-monospace, monospace;
}
.masked-input.unmasked {
  -webkit-text-security: none;
  text-security: none;
  font-family: inherit;
}

/* Per-contact tones picker — the app owner's "iPhone-style ringtones per contact"
   feature. Modal overlay with two grids (text tone + ringtone), tap
   to preview, Save commits to the contact's keychain entry. */
.contact-tone-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.62);
  z-index: 2400;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.contact-tone-card {
  background: var(--card-bg);
  border-radius: 18px;
  padding: 22px;
  max-width: 460px;
  width: 100%;
  position: relative;
  border: 1px solid var(--border);
  box-shadow: 0 12px 50px rgba(0, 0, 0, 0.55);
}
.contact-tone-card h3 {
  margin: 0 0 4px 0;
  font-size: 1.1rem;
}
.contact-tone-card h4 {
  font-size: 0.85rem;
  color: var(--muted);
  margin: 18px 0 8px 0;
  font-weight: 600;
}
.contact-tone-close {
  position: absolute;
  top: 12px;
  right: 14px;
  background: transparent;
  border: none;
  color: var(--muted);
  font-size: 1.4rem;
  cursor: pointer;
}
.contact-tone-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.contact-tone-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 8px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  cursor: pointer;
  font-size: 0.82rem;
  transition: transform 100ms, border-color 100ms;
}
.contact-tone-btn:hover { transform: translateY(-1px); border-color: var(--accent); }
.contact-tone-btn.selected {
  border-color: var(--accent);
  background: rgba(115, 183, 70, 0.1);
}
.contact-tone-btn.upload {
  background: rgba(60, 130, 246, 0.06);
  border-style: dashed;
  border-color: rgba(60, 130, 246, 0.45);
  color: rgba(60, 130, 246, 1);
}
.contact-tone-btn.upload:hover {
  background: rgba(60, 130, 246, 0.12);
  border-color: rgba(60, 130, 246, 0.8);
}
.contact-tone-btn .tone-name { font-weight: 600; }
.contact-tone-btn .tone-play {
  font-size: 0.9rem;
  color: var(--accent);
  opacity: 0.5;
}
.contact-tone-btn:hover .tone-play, .contact-tone-btn.selected .tone-play { opacity: 1; }
.contact-tone-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 16px;
}
.contact-tone-save {
  padding: 10px 22px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  border: none;
  font-weight: 600;
  cursor: pointer;
}

/* Inline media cards — YouTube + Spotify embedded in chat bubbles.
   Designed to match the "super app, super premium" feel: rounded,
   subtle shadow, lazy-load (poster first, iframe only after Play) so
   bandwidth stays low on bad DR/Belize 4G. */
.youtube-bubble {
  width: min(100%, 360px);
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  margin-top: 4px;
  position: relative;
}
.youtube-bubble iframe,
.youtube-bubble .yt-poster {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.youtube-bubble .yt-poster {
  background-size: cover;
  background-position: center;
  background-color: #111;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 250ms ease;
}
.youtube-bubble .yt-poster:hover { transform: scale(1.01); }
.youtube-bubble .yt-play-btn {
  width: 64px;
  height: 64px;
  border-radius: 999px;
  background: rgba(255, 0, 0, 0.92);
  color: #fff;
  border: none;
  font-size: 1.6rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.5);
  transition: transform 120ms ease, background 120ms ease;
  padding-left: 4px; /* Optical-center the triangle */
}
.youtube-bubble .yt-play-btn:hover {
  transform: scale(1.08);
  background: rgba(255, 0, 0, 1);
}

.spotify-bubble {
  width: min(100%, 360px);
  border-radius: 14px;
  overflow: hidden;
  background: #181818;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  margin-top: 4px;
}
.spotify-bubble iframe {
  display: block;
  width: 100%;
  height: 152px;
  border: 0;
}

/* Amazon inline product card. Until the affiliate API is wired (post-
   launch), this is a placeholder card with the ASIN and a tap-to-open
   CTA. After approval, image/title/price populate via the Amazon
   Product Advertising API. DR is Amazon's LATAM hub so this is a
   primary integration. */
.amazon-bubble {
  display: flex;
  align-items: center;
  gap: 12px;
  background: linear-gradient(135deg, #232f3e, #1a232e);
  border-radius: 14px;
  padding: 14px 16px;
  margin-top: 4px;
  text-decoration: none;
  color: #fff;
  border: 1px solid rgba(255, 153, 0, 0.25);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
  width: min(100%, 320px);
  transition: transform 120ms, border-color 120ms;
}
.amazon-bubble:hover {
  transform: translateY(-1px);
  border-color: rgba(255, 153, 0, 0.6);
}
.amazon-bubble .amazon-icon {
  width: 44px;
  height: 44px;
  background: rgba(255, 153, 0, 0.12);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.amazon-bubble .amazon-meta {
  flex: 1;
  min-width: 0;
}
.amazon-bubble .amazon-asin {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.55);
  letter-spacing: 0.06em;
}
.amazon-bubble .amazon-cta {
  font-size: 0.95rem;
  font-weight: 600;
  color: #ff9900;
  margin-top: 2px;
}

/* Read receipts — iMessage-style ✓ sent → ✓✓ read */
.read-tick {
  display: inline-block;
  margin-left: 6px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: -1px;
  user-select: none;
  vertical-align: middle;
  transition: color 200ms ease;
}
.read-tick.sent { color: rgba(255, 255, 255, 0.45); }
.read-tick.read {
  color: var(--accent);
  /* Subtle pulse on first appearance to draw the eye */
  animation: read-tick-pulse 600ms ease-out;
}
@keyframes read-tick-pulse {
  0% { transform: scale(0.8); opacity: 0; }
  60% { transform: scale(1.2); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

/* Custom-tone trim editor (support: "I want it customizable, hate that
   you can't play the whole song"). Lets the user pick start/end OR
   play the whole file. */
.tone-trim-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  z-index: 2600;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  backdrop-filter: blur(6px);
}
.tone-trim-card {
  background: var(--card-bg);
  border-radius: 18px;
  padding: 22px;
  width: 100%;
  max-width: 460px;
  position: relative;
  border: 1px solid var(--border);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55);
}
.tone-trim-card h3 { margin: 0 0 4px 0; font-size: 1.1rem; }
.tone-trim-close {
  position: absolute; top: 12px; right: 14px;
  background: transparent; border: none; color: var(--muted);
  font-size: 1.4rem; cursor: pointer;
}
.tone-trim-audio {
  width: 100%;
  margin: 12px 0;
}
.tone-trim-range {
  display: flex;
  gap: 12px;
  margin-bottom: 8px;
}
.tone-trim-range label {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.78rem;
  color: var(--muted);
}
.tone-trim-range input {
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font-size: 0.95rem;
  font-family: ui-monospace, monospace;
}
.tone-trim-full {
  display: flex; gap: 8px; align-items: center;
  margin: 8px 0;
  font-size: 0.92rem;
}
.tone-trim-actions {
  display: flex;
  gap: 8px;
  margin-top: 14px;
}
.tone-trim-preview, .tone-trim-save {
  flex: 1;
  padding: 12px;
  border-radius: 12px;
  border: none;
  font-weight: 600;
  cursor: pointer;
}
.tone-trim-preview {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text);
  border: 1px solid var(--border);
}
.tone-trim-save {
  background: var(--accent);
  color: #fff;
}

/* Dashboard apps section — top-level collapsible dropdown
   (support: "It should just say Apps. That should be a drop down menu too") */
.dashboard-apps {
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.dashboard-apps-toggle {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  list-style: none;
  padding: 8px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.dashboard-apps-toggle::-webkit-details-marker { display: none; }
.dashboard-apps-toggle::before {
  content: "▸";
  display: inline-block;
  transition: transform 150ms;
  color: var(--muted);
  font-size: 0.85rem;
}
.dashboard-apps[open] > .dashboard-apps-toggle::before {
  transform: rotate(90deg);
}
.dashboard-apps-grid {
  margin-top: 8px;
}
.dash-app-cat {
  margin-bottom: 14px;
}
.dash-app-cat-title {
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  font-weight: 600;
  margin: 0 0 8px 0;
}
.dash-app-tiles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.dash-app-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 12px 6px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--card-bg);
  color: var(--text);
  cursor: pointer;
  transition: transform 80ms;
}
.dash-app-tile:hover { transform: translateY(-2px); border-color: var(--accent); }
.dash-app-emoji { font-size: 1.5rem; }
.dash-app-label { font-size: 0.7rem; color: var(--muted); }

/* Soft "Make an account" banner for anonymous link recipients */
.linkuser-acct-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(115, 183, 70, 0.14);
  border-top: 1px solid rgba(115, 183, 70, 0.4);
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 200;
  font-size: 0.86rem;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.linkuser-acct-banner .luab-msg { flex: 1; color: var(--text); }
.linkuser-acct-banner .luab-make {
  background: var(--accent);
  color: #fff;
  padding: 6px 14px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.82rem;
  white-space: nowrap;
}
.linkuser-acct-banner .luab-dismiss {
  background: transparent;
  border: none;
  color: var(--muted);
  font-size: 1rem;
  cursor: pointer;
  padding: 4px 8px;
}

/* Categorized "More integrations" sheet (support: "should be in categories") */
.qa-more-sheet-categorized {
  align-items: flex-end;
  bottom: auto;
  top: auto;
  inset: 0;
  background: rgba(0, 0, 0, 0.62);
  display: flex;
  justify-content: center;
  padding: 0;
  position: fixed;
  z-index: 1500;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.qa-more-sheet-categorized .qa-more-inner {
  background: var(--card-bg);
  border-radius: 18px 18px 0 0;
  padding: 18px 18px 32px;
  width: 100%;
  max-width: 540px;
  max-height: 88vh;
  overflow-y: auto;
  box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.45);
  animation: loc-slide-up 0.22s ease-out;
  position: relative;
}
.qa-more-h {
  margin: 0 0 12px 0;
  font-size: 1.1rem;
}
.qa-more-close {
  position: absolute;
  top: 12px;
  right: 14px;
  background: transparent;
  border: none;
  color: var(--muted);
  font-size: 1.4rem;
  cursor: pointer;
}
.qa-cat {
  margin-bottom: 16px;
}
.qa-cat-title {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  font-weight: 600;
  margin: 0 0 8px 0;
}

/* In-app calculator overlay */
.calc-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  z-index: 2500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  backdrop-filter: blur(6px);
}
.calc-card {
  background: #1a1a1a;
  border-radius: 22px;
  padding: 18px;
  width: 100%;
  max-width: 320px;
  position: relative;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
}
.calc-close {
  position: absolute;
  top: 10px;
  right: 14px;
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.55);
  font-size: 1.4rem;
  cursor: pointer;
}
.calc-display {
  text-align: right;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 2.4rem;
  font-weight: 300;
  color: #fff;
  padding: 18px 8px 14px;
  margin-top: 10px;
  word-break: break-all;
  min-height: 1.4em;
}
.calc-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.calc-btn {
  height: 56px;
  border-radius: 999px;
  border: none;
  background: #333;
  color: #fff;
  font-size: 1.4rem;
  font-weight: 500;
  cursor: pointer;
  transition: filter 100ms;
}
.calc-btn:hover { filter: brightness(1.15); }
.calc-btn:active { filter: brightness(0.85); }
.calc-btn.calc-fn { background: #a5a5a5; color: #000; }
.calc-btn.calc-op { background: var(--accent); }
.calc-btn.calc-eq { background: var(--accent); }
.calc-btn.calc-zero { grid-column: span 2; border-radius: 28px; }
.calc-send {
  width: 100%;
  margin-top: 12px;
  padding: 12px;
  background: rgba(115, 183, 70, 0.18);
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 14px;
  font-weight: 600;
  cursor: pointer;
}
.calc-send:hover { background: rgba(115, 183, 70, 0.28); }

/* WhatsApp-style location share sheet — preview map + Send/Cancel */
.loc-share-sheet {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.62);
  z-index: 2300;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.loc-share-card {
  background: var(--card-bg);
  border-radius: 18px 18px 0 0;
  padding: 18px 18px 24px 18px;
  width: 100%;
  max-width: 540px;
  position: relative;
  border-top: 1px solid var(--border);
  box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.45);
  animation: loc-slide-up 0.22s ease-out;
}
@keyframes loc-slide-up {
  from { transform: translateY(50%); opacity: 0.4; }
  to   { transform: translateY(0);   opacity: 1; }
}
.loc-share-card h3 {
  margin: 0 0 8px 0;
  font-size: 1.1rem;
}
.loc-share-close {
  position: absolute;
  top: 12px;
  right: 14px;
  background: transparent;
  border: none;
  color: var(--muted);
  font-size: 1.4rem;
  cursor: pointer;
}
.loc-share-preview {
  border-radius: 14px;
  overflow: hidden;
  margin-top: 4px;
  background: #181818;
  aspect-ratio: 16/9;
}
.loc-share-preview img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.loc-share-preview-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--muted);
  font-family: ui-monospace, monospace;
}
.loc-share-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
  font-size: 0.92rem;
}
.loc-share-actions {
  display: flex;
  gap: 8px;
  margin-top: 14px;
}
.loc-share-cancel,
.loc-share-send {
  flex: 1;
  padding: 12px 16px;
  border-radius: 12px;
  border: none;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
}
.loc-share-cancel {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text);
  border: 1px solid var(--border);
}
.loc-share-send {
  background: var(--accent);
  color: #fff;
}
.loc-share-note {
  font-size: 0.74rem;
  margin: 10px 0 0 0;
  text-align: center;
}
.loc-share-spinner {
  width: 36px;
  height: 36px;
  margin: 18px auto 8px;
  border: 3px solid rgba(115, 183, 70, 0.18);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: loc-spin 0.9s linear infinite;
}
@keyframes loc-spin { to { transform: rotate(360deg); } }

/* Cleaner contact-code block (the app owner's simplification request 2026-05-03).
   Combines "My code" + "Add by code" into ONE always-visible section
   instead of three collapsed details elements. Replaces the old
   .contact-code-section + .add-by-code-section layout. */
.contact-code-block {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px 16px;
  margin: 14px 0;
}
.contact-code-header {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.contact-code-label {
  font-size: 0.75rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
}
.contact-code-block .contact-code-text {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 1.2rem;
  letter-spacing: 0.18em;
  font-weight: 700;
  background: rgba(115, 183, 70, 0.12);
  border: 1px solid rgba(115, 183, 70, 0.3);
  color: var(--accent);
  padding: 6px 12px;
  border-radius: 8px;
  user-select: all;
  flex: 1;
  min-width: 130px;
  text-align: center;
}
.contact-code-block .contact-code-copy,
.contact-code-block .contact-code-regen {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 0.78rem;
  cursor: pointer;
  font-weight: 600;
}
.contact-code-block .contact-code-regen { padding: 6px 10px; font-size: 1rem; }
.contact-code-block .contact-code-copy:hover,
.contact-code-block .contact-code-regen:hover {
  background: rgba(115, 183, 70, 0.12);
  color: var(--accent);
  border-color: var(--accent);
}
.contact-code-tip {
  font-size: 0.78rem;
  margin: 8px 0 0 0;
}
.add-by-code-row {
  display: flex;
  gap: 6px;
  flex-direction: column;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed var(--border);
}
.add-by-code-row input {
  font-family: inherit;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font-size: 0.92rem;
}
.add-by-code-row input#addByCodeInput {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.add-by-code-row button {
  padding: 8px 16px;
  border-radius: 8px;
  background: var(--accent);
  color: #fff;
  border: none;
  cursor: pointer;
  font-weight: 600;
  align-self: flex-start;
}

/* v32 — Circle Invite Link block. Visually a sibling of the contact-code
   block above. Mostly reuses tokens. The link text is monospace + smaller
   than the contact code (URLs are longer than 8-char codes). */
.circle-invite-link-block {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px 16px;
  margin: 14px 0;
}
.circle-invite-link-header {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.circle-invite-link-title {
  font-size: 0.78rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
}
.circle-invite-link-tip {
  font-size: 0.78rem;
  margin: 8px 0 0 0;
}
.circle-invite-link-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 10px 0 6px;
  flex-wrap: wrap;
}
.circle-invite-link-row .circle-invite-link-text {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.92rem;
  font-weight: 600;
  background: rgba(115, 183, 70, 0.12);
  border: 1px solid rgba(115, 183, 70, 0.3);
  color: var(--accent);
  padding: 6px 12px;
  border-radius: 8px;
  user-select: all;
  flex: 1;
  min-width: 160px;
  text-align: center;
  word-break: break-all;
}
.circle-invite-link-row .circle-invite-link-copy,
.circle-invite-link-row .circle-invite-link-regen {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 0.78rem;
  cursor: pointer;
  font-weight: 600;
}
.circle-invite-link-row .circle-invite-link-regen { font-size: 1rem; }
.circle-invite-link-row .circle-invite-link-copy:hover,
.circle-invite-link-row .circle-invite-link-regen:hover {
  background: rgba(115, 183, 70, 0.12);
  color: var(--accent);
  border-color: var(--accent);
}
.circle-invite-link-meta {
  display: flex;
  gap: 12px;
  align-items: center;
  font-size: 0.8rem;
  color: var(--muted);
  flex-wrap: wrap;
  margin-top: 4px;
}
.circle-invite-link-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  margin-left: auto;
}
.circle-invite-link-customize {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--border);
}
.circle-invite-link-customize summary {
  cursor: pointer;
  color: var(--muted);
  font-size: 0.82rem;
  list-style: revert;
}
.circle-invite-link-textarea {
  display: block;
  width: 100%;
  min-height: 64px;
  margin: 8px 0;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: 0.9rem;
  resize: vertical;
}
.circle-invite-link-save {
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  border: none;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.82rem;
}
.circle-invite-link-status {
  margin-top: 8px;
  font-size: 0.82rem;
  min-height: 1.1em;
}
.circle-invite-link-status.ok { color: var(--accent); }
.circle-invite-link-status.err { color: #d27474; }

/* Legacy — keep these existing rules so old class references don't crash;
   but they're effectively unused after the layout cleanup. */
.contact-code-section, .add-by-code-section {
  margin-top: 8px;
}
.contact-code-display {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 8px;
}
.contact-code-text {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 1.4rem;
  letter-spacing: 0.16em;
  font-weight: 700;
  background: rgba(115, 183, 70, 0.12);
  border: 1px solid rgba(115, 183, 70, 0.3);
  color: var(--accent);
  padding: 8px 14px;
  border-radius: 10px;
  user-select: all;
}
.contact-code-display button {
  font-size: 0.85rem;
  padding: 6px 12px;
  border-radius: 999px;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  cursor: pointer;
}
.contact-code-display button:hover {
  background: rgba(115, 183, 70, 0.12);
  color: var(--accent);
  border-color: var(--accent);
}

#addByCodeForm {
  display: flex;
  gap: 8px;
  flex-direction: column;
  margin-top: 6px;
}
#addByCodeInput {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 1.1rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.pending-invites-panel {
  background: rgba(255, 196, 0, 0.08);
  border: 1px solid rgba(255, 196, 0, 0.3);
  border-radius: 14px;
  padding: 14px 16px;
  margin: 12px 0;
}
.pending-invites-panel h3 {
  margin: 0 0 8px 0;
  font-size: 1rem;
  color: #d9a300;
}
.pending-invites-panel ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.pending-invites-panel li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  border-top: 1px solid rgba(255, 196, 0, 0.18);
  flex-wrap: wrap;
}
.pending-invites-panel li:first-child { border-top: none; }
.pending-invites-panel .invite-name {
  flex: 1;
  font-size: 0.9rem;
}
.pending-invites-panel button {
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 0.82rem;
  cursor: pointer;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text);
}
.pending-invites-panel button.accept {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.pending-invites-panel button.decline {
  color: var(--muted);
}


/* --- Tones picker — record + cancel additions (2026-05-03 P0 fix) --- */
.contact-tone-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 16px;
}
.contact-tone-cancel {
  padding: 10px 22px;
  border-radius: 999px;
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border);
  font-weight: 600;
  cursor: pointer;
}
.contact-tone-cancel:hover { background: rgba(0,0,0,0.04); }
/* Record tile sits next to the upload tile in the same grid */
.contact-tone-btn.record {
  background: linear-gradient(135deg, #ffe0e7, #fff);
  border-style: dashed;
  color: var(--text);
}
.contact-tone-btn.record:hover {
  border-color: #e63b5d;
  transform: translateY(-1px);
}
/* Live recording strip — pulses a red dot + counts seconds + offers
   stop / cancel. Mounted inside the tone-card just under the heading. */
.tone-record-strip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 12px;
  background: #ffe9ec;
  border: 1px solid #f5c1c9;
  margin: 8px 0 12px 0;
}
.tone-record-pulse {
  color: #e63b5d;
  font-size: 18px;
  animation: tone-record-pulse 1.1s infinite ease-in-out;
}
@keyframes tone-record-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.4; transform: scale(0.85); }
}
.tone-record-timer {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  flex: 1;
  color: #4a0d18;
}
.tone-record-stop, .tone-record-cancel {
  border: none;
  border-radius: 999px;
  padding: 6px 14px;
  font-weight: 600;
  cursor: pointer;
}
.tone-record-stop {
  background: #e63b5d;
  color: #fff;
}
.tone-record-cancel {
  background: transparent;
  color: #4a0d18;
}

/* ===========================================================================
   Customize panel (🎨)
   ===========================================================================
   Modal-style panel for theme + chat background + bubble + font size.
   Mounted by customization.js mountSettingsPanel(). */
.customize-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  z-index: 4000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0;
  backdrop-filter: blur(6px);
}
@media (min-width: 600px) {
  .customize-backdrop {
    align-items: center;
    padding: 16px;
  }
}
.customize-modal {
  background: var(--card);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 16px 16px 0 0;
  width: 100%;
  max-width: 520px;
  max-height: 88vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  -webkit-overflow-scrolling: touch;
}
@media (min-width: 600px) {
  .customize-modal { border-radius: 16px; max-height: 80vh; }
}
.customize-panel {
  padding: 16px 18px 24px;
}
.customize-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.customize-head h3 {
  margin: 0;
  font-size: 1.1rem;
  letter-spacing: 0.2px;
}
.customize-close {
  background: transparent;
  border: 0;
  color: var(--muted);
  font-size: 1.4rem;
  cursor: pointer;
  padding: 4px 10px;
  border-radius: 8px;
  line-height: 1;
}
.customize-close:hover { color: var(--text); background: rgba(255, 255, 255, 0.05); }

.customize-section {
  border-top: 1px solid var(--border-soft);
  padding: 14px 0 10px;
}
.customize-section:first-of-type { border-top: 0; }
.customize-section h4 {
  margin: 0 0 10px;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--muted);
  font-weight: 600;
}

.customize-swatches {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.customize-swatches .theme-swatch {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 2px solid transparent;
  cursor: pointer;
}
.customize-swatches .theme-swatch.active {
  border-color: #fff;
  box-shadow: 0 0 0 2px rgba(255,255,255,0.15);
}

.customize-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.86rem;
  margin: 6px 0;
}
.customize-row span { min-width: 90px; color: var(--muted); }
.customize-row input[type="color"] {
  width: 38px;
  height: 32px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: transparent;
  padding: 2px;
  cursor: pointer;
}
.customize-row input[type="text"].cz-hex-text {
  background: var(--card-2);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 6px 10px;
  border-radius: 8px;
  width: 100px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.85rem;
}

.customize-bgkind,
.customize-bubble-styles,
.customize-fontsize {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.customize-radio {
  background: var(--card-2);
  border: 1px solid var(--border);
  padding: 6px 12px;
  border-radius: 999px;
  cursor: pointer;
  font-size: 0.85rem;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.customize-radio input { accent-color: var(--accent); margin: 0; }
.customize-radio:has(input:checked) {
  border-color: var(--accent);
  background: rgba(115, 183, 70, 0.12);
}

.cz-bg-solid,
.cz-bg-gradient,
.cz-bg-image { margin-top: 10px; }

.customize-gradients {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
.customize-gradient-swatch {
  border: 2px solid transparent;
  border-radius: 10px;
  height: 56px;
  cursor: pointer;
  position: relative;
  color: #fff;
  font-size: 0.78rem;
  font-weight: 600;
  text-shadow: 0 1px 2px rgba(0,0,0,0.6);
}
.customize-gradient-swatch.active {
  border-color: #fff;
  box-shadow: 0 0 0 2px rgba(255,255,255,0.15);
}
.customize-gradient-swatch span {
  position: absolute;
  left: 10px;
  bottom: 6px;
}

.cz-upload-bg, .cz-clear-bg {
  background: var(--card-2);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 8px 12px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.85rem;
  margin-right: 6px;
  margin-top: 4px;
}
.cz-upload-bg:hover, .cz-clear-bg:hover {
  border-color: var(--accent);
}
.cz-clear-bg { color: var(--red); border-color: rgba(248, 81, 73, 0.4); }
.customize-hint { font-size: 0.78rem; margin: 6px 0; }

.customize-preview {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: stretch;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--border-soft);
  background: var(--card-2);
}
.cz-preview-bubble {
  padding: 9px 14px;
  border-radius: 16px;
  font-size: var(--app-font-size, 16px);
  max-width: 80%;
  line-height: 1.35;
}
.cz-preview-them {
  background: var(--bubble-them);
  color: var(--text);
  align-self: flex-start;
  border-bottom-left-radius: 4px;
}
.cz-preview-me {
  background: var(--bubble-me);
  color: #fff;
  align-self: flex-end;
  border-bottom-right-radius: 4px;
}
/* Bubble style variants — same rules as for real bubbles below. */
html.bubbles-square .cz-preview-bubble { border-radius: 6px; }
html.bubbles-pill .cz-preview-bubble { border-radius: 999px; padding: 8px 18px; }
html.bubbles-minimal .cz-preview-bubble {
  border-radius: 6px;
  background: transparent !important;
  color: var(--text) !important;
  border: 1px solid var(--border-soft);
  padding: 8px 12px;
}

/* === v33: Customize panel — scope banner + scope-aware preview ========
   support flagged the scope picker as "not findable" (2026-05-04). The new
   layout pulls the scope picker OUT of the regular section stack and
   into a high-contrast banner at the top of the panel so it's the FIRST
   thing the user sees. Same banner gets a one-line hint below the
   dropdown that explains exactly what the picked scope affects. */
.customize-scope-banner {
  margin: 4px 0 14px;
  padding: 12px 14px;
  border: 1px solid var(--accent, #73b746);
  border-radius: 12px;
  background: rgba(115, 183, 70, 0.10);
  background: color-mix(in srgb, var(--accent, #73b746) 12%, transparent);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.customize-scope-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.customize-scope-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text);
  flex: 0 0 auto;
}
.cz-scope-select {
  flex: 1 1 220px;
  min-width: 200px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--card-2);
  color: var(--text);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--text) 50%),
                    linear-gradient(135deg, var(--text) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 12px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 30px;
}
.cz-scope-select:focus {
  outline: 2px solid var(--accent, #73b746);
  outline-offset: 1px;
}
.customize-scope-hint {
  margin: 0;
  font-size: 0.78rem;
  color: var(--muted);
  line-height: 1.35;
}
.customize-scope-hint strong {
  color: var(--text);
}
.cz-reset-scope {
  align-self: flex-start;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 0.78rem;
  cursor: pointer;
}
.cz-reset-scope:hover { border-color: var(--accent); color: var(--accent); }

/* Per-contact preview — small label above the bubbles to make it crystal
   clear that the bubbles you see ARE this contact's chat, not a generic
   demo. */
.cz-preview-contact-label {
  font-size: 0.78rem;
  color: var(--muted);
  margin-bottom: 4px;
  align-self: flex-start;
  font-weight: 600;
}

/* Dashboard scope preview — fake contact list. Mirrors the real
   .contact-row-v2 layout (avatar + name + link pill + Open) so the user
   immediately recognises what they're customizing. */
.cz-preview-dashboard {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}
.cz-preview-contact-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--card-2);
  border: 1px solid var(--border-soft);
  border-radius: 12px;
}
.cz-preview-avatar {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: var(--accent, #73b746);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.95rem;
  flex: 0 0 auto;
}
.cz-preview-contact-info {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.cz-preview-contact-name {
  color: var(--text);
  font-weight: 600;
  font-size: 0.95rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cz-preview-contact-pill {
  font-size: 0.7rem;
  color: var(--accent, #73b746);
  background: rgba(115, 183, 70, 0.12);
  padding: 2px 8px;
  border-radius: 999px;
  align-self: flex-start;
  white-space: nowrap;
}
.cz-preview-open {
  color: var(--accent, #73b746);
  font-size: 0.85rem;
  font-weight: 600;
  flex: 0 0 auto;
}

.customize-footer {
  display: flex;
  justify-content: space-between;
  margin-top: 16px;
  gap: 10px;
}
.cz-reset, .cz-done {
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid var(--border);
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 600;
  font-family: inherit;
}
.cz-reset {
  background: transparent;
  color: var(--muted);
}
.cz-reset:hover { color: var(--text); }
.cz-done {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

/* The "🎨 Customize" trigger button on the dashboard. */
.customize-trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--card-2);
  color: var(--text);
  border: 1px solid var(--border);
  padding: 8px 14px;
  border-radius: 999px;
  cursor: pointer;
  font-size: 0.88rem;
  font-family: inherit;
  margin-top: 8px;
}
.customize-trigger:hover { border-color: var(--accent); }

/* ===========================================================================
   Bubble style variants (for ALL chat bubbles, not just preview)
   These ride on top of the existing .bubble-me / .bubble-them styles.
   =========================================================================== */
html.bubbles-square .bubble-me,
html.bubbles-square .bubble-them,
html.bubbles-square .message,
html.bubbles-square .messages > div {
  border-radius: 6px !important;
}
html.bubbles-pill .bubble-me,
html.bubbles-pill .bubble-them,
html.bubbles-pill .message {
  border-radius: 22px !important;
}
html.bubbles-minimal .bubble-me,
html.bubbles-minimal .bubble-them {
  background: transparent !important;
  border: 1px solid var(--border-soft) !important;
  color: var(--text) !important;
}

/* Font size — applied to message bubble + chat input, leaves header
   typography alone so the global UI doesn't shift around the user. */
.message, .bubble-me, .bubble-them, #sendInput, .chat-pane {
  font-size: var(--app-font-size, 16px);
}

/* ===========================================================================
   File-send (📎) — inline file card with optional image/video/audio preview.
   =========================================================================== */
.file-bubble {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 4px;
  max-width: 320px;
}
.file-bubble .media-placeholder {
  display: block;
  color: var(--muted);
  font-size: 0.78rem;
  padding: 8px 10px;
}
.file-bubble img,
.file-bubble video {
  display: block;
  max-width: 100%;
  border-radius: 10px;
}
.file-card {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--card-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 12px;
}
.file-card-icon {
  font-size: 1.6rem;
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 10px;
}
.file-card-meta {
  flex: 1;
  min-width: 0;
}
.file-card-name {
  font-size: 0.92rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 500;
}
.file-card-sub {
  font-size: 0.74rem;
  color: var(--muted);
  margin-top: 2px;
}
.file-card-dl {
  flex-shrink: 0;
  background: var(--accent);
  color: #fff;
  border: 0;
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}
.file-card-dl:hover { filter: brightness(1.06); }
.file-card-dl:disabled { opacity: 0.6; cursor: progress; }

/* Inline previews inside .file-bubble auto-style as cards above. */
.file-bubble .audio-player {
  background: var(--card-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 8px 12px;
}


/* ========================================================================
 * v28 — i18n + Install pill + Circle pill + Make-account banner + RTL +
 * contact-name truncation fix. support items 8/12/14/17/19.
 * ====================================================================== */

/* Item 19 — Install pill in header (between language picker and sign-out).
 * Same oval shape, same horizontal plane. Hidden when already installed. */
.install-pill {
  appearance: none;
  border: 1px solid var(--border, #3a3b38);
  background: var(--card, #2b2c29);
  color: var(--text, #f4f3ee);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  line-height: 1.4;
  transition: background 0.15s, border-color 0.15s;
}
.install-pill:hover { border-color: var(--accent, #73b746); }
.install-pill:active { transform: translateY(1px); }
[hidden].install-pill { display: none; }

/* Item 12 — "In your Circle" pill badge. Replaces the cramped green-circle-
 * with-wrapped-text avatar overload. Horizontal pill, soft green bg, 1 line. */
.circle-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 999px;
  background: #d4ebbf;
  color: #2a4d10;
  font-size: 0.78rem;
  font-weight: 500;
  white-space: nowrap;
  line-height: 1.3;
}
.circle-pill .circle-pill-emoji { font-size: 0.85rem; }
[data-theme="light"] .circle-pill { background: #e8f5d8; }

/* Link & live (demoted) and link disabled badges (item 16) */
.link-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(115, 183, 70, 0.15);
  color: var(--accent, #73b746);
  font-size: 0.78rem;
  font-weight: 500;
  white-space: nowrap;
  line-height: 1.3;
}
.link-pill.is-disabled {
  background: rgba(220, 60, 60, 0.15);
  color: #d44;
}

/* Item 14 — fix contact-name truncation regression. The old layout had a
 * fixed-width name container next to a wide badge row, causing names to
 * truncate at "Acc...". Switch to flex with min-width:0 so the name takes
 * available space and the badge row shrinks/wraps as needed. */
.contact-row,
.contact-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.contact-row .contact-name,
.contact-list .contact-name {
  flex: 1 1 auto;
  min-width: 0;
  white-space: normal;        /* allow wrap */
  overflow-wrap: anywhere;    /* graceful wrap on long handles */
  word-break: break-word;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;       /* up to 2 lines, then truncate */
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* Pencil/edit icon must sit OUTSIDE the name container — separate slot. */
.contact-row .name-edit,
.contact-list .name-edit {
  flex: 0 0 auto;
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 4px;
  margin-left: 4px;
}
/* Badge row collapses into wrap when name is long — keeps name primary */
.contact-row .contact-badges,
.contact-list .contact-badges {
  flex: 0 1 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  justify-content: flex-end;
}

/* Item 8 — anonymous "Make an account" banner. Anchored to bottom of screen,
 * same visual family as circle-invite-accepted. Dismissable. */
.make-account-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 800;
  background: linear-gradient(180deg, #2b2c29 0%, #20211f 100%);
  border-top: 1px solid var(--accent, #73b746);
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.3);
  animation: makeAcctSlideUp 0.3s ease-out;
}
@keyframes makeAcctSlideUp {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}
.make-account-banner .mab-icon {
  font-size: 1.5rem;
  flex: 0 0 auto;
}
.make-account-banner .mab-text {
  flex: 1 1 auto;
  min-width: 0;
}
.make-account-banner .mab-title {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text, #f4f3ee);
}
.make-account-banner .mab-tip {
  font-size: 0.8rem;
  color: var(--muted, #999);
  margin-top: 2px;
}
.make-account-banner .mab-cta {
  flex: 0 0 auto;
  background: var(--accent, #73b746);
  color: #fff;
  border: 0;
  border-radius: 999px;
  padding: 8px 16px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.make-account-banner .mab-cta:hover { filter: brightness(1.1); }
.make-account-banner .mab-close {
  flex: 0 0 auto;
  background: transparent;
  border: 0;
  color: var(--muted, #999);
  cursor: pointer;
  font-size: 1.1rem;
  padding: 4px 8px;
}

/* Item 11/19 — install pill is the persistent install affordance now.
 * Keep the install-banner styling intact for legacy usage but the new
 * primary path is the header pill. */

/* Secret Circle banner (item 18 explainer + hidden section header) */
.secret-circle-banner {
  background: linear-gradient(180deg, #2b2c29 0%, #20211f 100%);
  border: 1px solid var(--accent, #73b746);
  border-radius: 12px;
  padding: 16px;
  margin: 12px 0;
}
.secret-circle-banner h3 { margin: 0 0 8px; font-size: 1.05rem; }
.secret-circle-banner p { margin: 0 0 12px; font-size: 0.88rem; color: var(--muted, #aaa); }
.secret-circle-banner .scb-actions { display: flex; gap: 8px; }
.secret-circle-banner .scb-cta {
  background: var(--accent, #73b746); color: #fff; border: 0;
  border-radius: 8px; padding: 8px 14px; cursor: pointer; font-weight: 500;
}

/* Hidden contacts section header */
.hidden-contacts-section h3 {
  display: flex; align-items: center; gap: 8px;
  font-size: 0.95rem; margin: 16px 0 8px; color: var(--muted, #aaa);
}
.start-group-chat-btn {
  background: var(--accent, #73b746);
  color: #fff; border: 0; border-radius: 999px;
  padding: 8px 16px; cursor: pointer; font-weight: 500;
  margin: 8px 0;
}
.start-group-chat-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* Region empty-state for country-aware app filter (item 2) */
.region-more-apps {
  padding: 12px;
  background: rgba(115, 183, 70, 0.08);
  border-radius: 8px;
  font-size: 0.85rem;
  color: var(--muted, #999);
  text-align: center;
  margin: 8px 0;
}

/* Advanced Customize panel section (item 9 — placeholder styling for now) */
.customize-advanced { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border, #3a3b38); }
.customize-advanced summary { cursor: pointer; font-weight: 600; padding: 8px 0; }
.customize-advanced label {
  display: flex; flex-direction: column; gap: 4px;
  margin: 8px 0; font-size: 0.85rem;
}
.customize-advanced label > span { color: var(--muted, #aaa); }
.customize-advanced .adv-pos-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px;
  max-width: 200px;
}
.customize-advanced .adv-pos-grid button {
  padding: 8px; background: var(--card, #2b2c29);
  border: 1px solid var(--border, #3a3b38);
  border-radius: 4px; cursor: pointer; font-size: 0.7rem;
  color: var(--text, #f4f3ee);
}
.customize-advanced .adv-pos-grid button.selected {
  background: var(--accent, #73b746); border-color: var(--accent, #73b746); color: #fff;
}
.customize-advanced .adv-reset {
  margin-top: 12px; background: transparent; border: 1px solid var(--border, #3a3b38);
  color: var(--muted, #aaa); padding: 6px 14px; border-radius: 999px; cursor: pointer;
}

/* RTL adjustments for Arabic. The runtime sets <html dir="rtl"> when
 * language is ar; these rules flip key padding/text alignment. Hindi
 * stays LTR (Devanagari is LTR), so [dir="rtl"] only fires for Arabic. */
[dir="rtl"] body { text-align: right; }
[dir="rtl"] .lang-wrap { flex-direction: row-reverse; }
[dir="rtl"] .contact-row,
[dir="rtl"] .contact-list li { flex-direction: row-reverse; }
[dir="rtl"] .send-actions,
[dir="rtl"] .right-group { flex-direction: row-reverse; }
[dir="rtl"] .make-account-banner { flex-direction: row-reverse; }
[dir="rtl"] .install-modal-close { right: auto; left: 12px; }
/* Use logical properties for newly-added elements so RTL works automatically */
.circle-pill, .link-pill, .install-pill { padding-inline-start: 14px; padding-inline-end: 14px; }


/* Amplified make-account funnel (the app owner's "obvious + impossible to miss"
 * directive on top of item 8). Big sticky banner + inline first-time
 * hook + header Sign-up pill. */

.make-account-banner--big {
  background: linear-gradient(180deg, #73b746 0%, #5a9035 100%);
  border-top: none;
  padding: 14px 16px 18px;
  flex-direction: column;
  gap: 10px;
}
.make-account-banner--big .mab-content {
  display: flex; align-items: center; gap: 12px; width: 100%;
}
.make-account-banner--big .mab-text {
  flex: 1 1 auto; display: flex; align-items: center; gap: 10px; min-width: 0;
}
.make-account-banner--big .mab-icon { font-size: 1.6rem; }
.make-account-banner--big .mab-title-big {
  font-size: 1rem; font-weight: 700; color: #fff;
  letter-spacing: 0.01em; line-height: 1.3;
}
.make-account-banner--big .mab-cta-big {
  display: inline-block;
  background: #fff; color: #2a4d10;
  font-weight: 700; font-size: 0.95rem;
  padding: 10px 18px; border-radius: 999px;
  text-decoration: none; white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0,0,0,0.18);
}
.make-account-banner--big .mab-cta-big:active { transform: translateY(1px); }
.make-account-banner--big .mab-remind {
  background: transparent; border: 0; cursor: pointer;
  color: rgba(255,255,255,0.82); font-size: 0.78rem;
  padding: 4px 10px; align-self: center;
  text-decoration: underline; text-underline-offset: 2px;
}

/* Inline first-time hook above the conversation. Smaller, dismissable. */
.anon-chat-hook {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px; margin: 8px 12px;
  background: rgba(115, 183, 70, 0.12);
  border: 1px solid rgba(115, 183, 70, 0.35);
  border-radius: 10px;
  font-size: 0.85rem;
  color: var(--text, #f4f3ee);
  flex-wrap: wrap;
}
.anon-chat-hook .anon-hook-text { flex: 1 1 240px; line-height: 1.4; }
.anon-chat-hook .anon-hook-cta {
  background: var(--accent, #73b746); color: #fff; padding: 6px 12px;
  border-radius: 999px; text-decoration: none; font-weight: 600; font-size: 0.82rem;
  white-space: nowrap;
}
.anon-chat-hook .anon-hook-close {
  background: transparent; border: 0; color: var(--muted, #888);
  cursor: pointer; font-size: 1rem; padding: 2px 6px;
}

/* Header Sign-up pill — same family as Install pill (item 19). */
.signup-pill {
  appearance: none;
  border: 1px solid var(--accent, #73b746);
  background: var(--accent, #73b746);
  color: #fff;
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  line-height: 1.4;
  transition: filter 0.15s;
}
.signup-pill:hover { filter: brightness(1.08); }
.signup-pill:active { transform: translateY(1px); }
[hidden].signup-pill { display: none; }


/* ========================================================================
 * v29 — Contact card layout overhaul (support: "the contact name is COMPLETELY
 * INVISIBLE … so much space in that box"). New layout: avatar, name+chips,
 * Open button, ⋯ overflow menu. Everything else moves into the menu so
 * the name has horizontal room and there's no horizontal scroll.
 * Selector targets `.contact-row-v2` so the legacy `.contact-row-main /
 * -foot` rules above don't fight the new layout (the new render emits
 * neither of those wrappers).
 * ====================================================================== */
.contact-row.contact-row-v2 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  overflow: hidden;
  border-bottom: 1px solid var(--border);
  flex-direction: row;
  flex-wrap: nowrap;
  width: 100%;
  box-sizing: border-box;
  min-width: 0;
}
.contact-row.contact-row-v2 .contact-avatar {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--card-2);
  border: 1px solid var(--border);
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  cursor: pointer;
}
.contact-row.contact-row-v2 .contact-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.contact-row.contact-row-v2 .contact-avatar-fallback {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
}
.contact-row.contact-row-v2 .contact-info {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.contact-row.contact-row-v2 .contact-name {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.25;
  /* override legacy `.contact-row .contact-name { cursor: default }` */
  cursor: default;
}
.contact-row.contact-row-v2 .contact-status {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  font-size: 0.72rem;
  align-items: center;
  min-width: 0;
}
.contact-row.contact-row-v2 .contact-status .link-pill {
  font-size: 0.72rem;
  padding: 2px 8px;
}
.contact-row.contact-row-v2 .contact-status .link-pill.live { background: rgba(115, 183, 70, 0.18); color: var(--accent); }
.contact-row.contact-row-v2 .contact-status .link-pill.off  { background: rgba(255, 255, 255, 0.06); color: var(--muted); }
.contact-row.contact-row-v2 .contact-status .circle-pill { font-size: 0.72rem; padding: 2px 8px; }
.contact-row.contact-row-v2 .contact-open {
  flex: 0 0 auto;
  height: 32px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: #fff;
  font-weight: 600;
  font-size: 0.85rem;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  cursor: pointer;
}
.contact-row.contact-row-v2 .contact-open:hover { filter: brightness(1.08); }
.contact-row.contact-row-v2 .contact-more {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--card-2);
  color: var(--text);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.contact-row.contact-row-v2 .contact-more:hover { border-color: var(--accent); color: var(--accent); }
@media (max-width: 380px) {
  .contact-row.contact-row-v2 { gap: 8px; padding: 8px 10px; }
  .contact-row.contact-row-v2 .contact-open { padding: 0 10px; font-size: 0.78rem; }
}

/* v56 — support: "I like having the open button because it made an idiot
   proof." The explicit .contact-open pill is back on every viewport. The
   v42 whole-row tap-anywhere behavior stays — power users tap the card,
   everyone else taps the explicit pill. Both routes go to the same chat
   URL (data-href on the row). The pill IS translated now via the
   tt("openContact") fallback chain in renderContactRows. */
@media (max-width: 480px) {
  .contact-row.contact-row-v2 .contact-open { display: inline-flex; }
  .contact-row.contact-row-v2 { cursor: pointer; }
  .contact-row.contact-row-v2:active { background: var(--card-2); }
}
@media (min-width: 481px) {
  .contact-row.contact-row-v2 { cursor: pointer; }
  .contact-row.contact-row-v2:hover { background: var(--card-2); }
}

/* v58 — support (asked multiple times): "Invite to my circle should be
   next to Link is LIVE on the right side." Both circle controls now
   live in a dedicated right-side cluster between .contact-info (left)
   and the Open button. The cluster is a flex group so the two pills
   sit side-by-side; on narrow viewports it can wrap underneath the
   row content gracefully without colliding with the Open + ⋯ buttons. */
.contact-row.contact-row-v2 .contact-circle-cluster {
  flex: 0 1 auto;
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  margin-left: auto; /* pushes cluster + Open + ⋯ to the right edge */
  min-width: 0;
}
.contact-row.contact-row-v2 .contact-circle-cluster .circle-pill,
.contact-row.contact-row-v2 .contact-circle-cluster .link-pill {
  font-size: 0.72rem;
  padding: 2px 8px;
  white-space: nowrap;
}
/* When the row gets narrow, let the cluster wrap to its OWN row beneath
   the avatar/name so both pills stay visible. The avatar + name +
   contact-info still sit on row 1; the cluster + Open + ⋯ flow to row
   2 as a group thanks to the parent's flex-wrap. */
@media (max-width: 480px) {
  .contact-row.contact-row-v2 { flex-wrap: wrap; row-gap: 6px; }
  .contact-row.contact-row-v2 .contact-info { flex: 1 1 100%; }
  .contact-row.contact-row-v2 .contact-circle-cluster {
    flex: 1 1 auto;
    justify-content: flex-start;
    margin-left: 56px; /* line up under the name, past the avatar */
  }
  .contact-row.contact-row-v2 .contact-open,
  .contact-row.contact-row-v2 .contact-more { margin-left: 0; }
}
@media (max-width: 380px) {
  .contact-row.contact-row-v2 .contact-circle-cluster .circle-pill,
  .contact-row.contact-row-v2 .contact-circle-cluster .link-pill {
    font-size: 0.68rem;
    padding: 2px 6px;
  }
  .contact-row.contact-row-v2 .contact-circle-cluster { margin-left: 48px; }
}

/* ⋯ overflow menu — popover next to the contact-more button */
.contact-more-menu {
  position: absolute;
  z-index: 200;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 6px;
  min-width: 200px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.45);
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.contact-more-menu button {
  appearance: none;
  background: transparent;
  border: 0;
  color: var(--text);
  text-align: start;
  padding: 9px 12px;
  border-radius: 8px;
  font-size: 0.9rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
}
.contact-more-menu button:hover { background: var(--card-2); }
.contact-more-menu button.danger { color: var(--red, #d65b50); }
.contact-more-menu button.danger:hover { background: rgba(214, 91, 80, 0.12); }
.contact-more-menu hr { border: 0; border-top: 1px solid var(--border); margin: 4px 2px; }

/* ========================================================================
 * v29 — Public Profile toggle on dashboard. support: "I want a way to
 * toggle on my public profile in the contact screen."
 * ====================================================================== */
.public-profile-block {
  margin: 12px 16px 0;
  padding: 12px 14px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
}
.public-profile-toggle {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  position: relative;
}
.public-profile-glyph { font-size: 1.4rem; flex: 0 0 auto; }
.public-profile-label { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.public-profile-label strong { font-size: 0.95rem; font-weight: 600; }
.public-profile-label small { font-size: 0.75rem; line-height: 1.3; }
/* Visually hide the native checkbox but keep it focusable. */
.public-profile-switch {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}
.public-profile-track {
  flex: 0 0 auto;
  width: 46px;
  height: 26px;
  background: var(--card-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  position: relative;
  transition: background 0.15s, border-color 0.15s;
}
.public-profile-track::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--text);
  transition: transform 0.15s, background 0.15s;
}
.public-profile-switch:checked + .public-profile-track {
  background: var(--accent);
  border-color: var(--accent);
}
.public-profile-switch:checked + .public-profile-track::after {
  transform: translateX(20px);
  background: #fff;
}
.public-profile-preview {
  display: inline-block;
  margin-top: 8px;
  font-size: 0.8rem;
  color: var(--accent);
  text-decoration: none;
}
.public-profile-preview:hover { text-decoration: underline; }
.public-profile-hub-head {
  display: grid;
  gap: 8px;
}
.public-profile-hub-tools {
  display: grid;
  gap: 14px;
  margin-top: 14px;
}
.public-profile-hub-section {
  display: grid;
  gap: 10px;
}
.public-profile-hub-section.contacts-profile-section {
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--border));
  border-radius: 14px;
  background:
    radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 34%),
    color-mix(in srgb, var(--card-2) 82%, transparent);
}
.public-profile-section-title {
  display: grid;
  gap: 2px;
}
.public-profile-section-title strong {
  color: var(--text);
  font-size: 0.92rem;
  line-height: 1.15;
}
.public-profile-section-title small {
  color: var(--muted);
  line-height: 1.3;
}
.public-profile-action-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.public-profile-action {
  min-height: 88px;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 10px;
  row-gap: 2px;
  align-content: center;
  text-align: left;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--card-2);
  color: var(--text);
  padding: 12px;
  cursor: pointer;
  text-decoration: none;
}
.public-profile-action > span {
  grid-row: 1 / span 2;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 18%, transparent);
}
.public-profile-action strong,
.public-profile-business strong {
  font-size: 0.9rem;
  line-height: 1.15;
}
.public-profile-action small,
.public-profile-business small {
  color: var(--muted);
  line-height: 1.25;
}
.public-profile-action.primary {
  border-color: color-mix(in srgb, var(--accent) 42%, var(--border));
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 18%, var(--card-2)), var(--card-2));
}
.public-profile-action:disabled {
  opacity: 0.48;
  cursor: not-allowed;
  filter: grayscale(0.25);
}
.public-profile-action.live {
  border-color: rgba(225, 29, 72, 0.55);
  background: linear-gradient(135deg, rgba(225,29,72,0.20), var(--card-2));
}
.public-profile-action.live > span {
  background: #e11d48;
  color: #fff;
  box-shadow: 0 0 0 6px rgba(225,29,72,0.14);
}
.public-profile-business {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border));
  border-radius: 12px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 14%, var(--card-2)), var(--card-2));
  color: var(--text);
  padding: 12px;
  cursor: pointer;
}
.public-profile-business > span:first-child {
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: color-mix(in srgb, var(--accent) 20%, transparent);
}
.public-profile-business > span:last-child {
  display: grid;
  gap: 3px;
}
.bc-live-dot {
  width: 11px;
  height: 11px;
  display: inline-block;
  border-radius: 50%;
  background: #e11d48;
  box-shadow: 0 0 0 6px rgba(225,29,72,0.16);
  vertical-align: middle;
}
@media (max-width: 520px) {
  .public-profile-action-grid { grid-template-columns: 1fr; }
}

/* v31 — In-card "🔗 Link is LIVE" interactive pill (support: "put that
   back in the box"). Same shape as the .link-pill status chip but
   tappable. Uses role=switch / aria-checked for assistive tech. */
.contact-row.contact-row-v2 .link-pill-toggle {
  cursor: pointer;
  border: 1px solid transparent;
  font: inherit;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.72rem;
  line-height: 1.2;
}
/* v37 — Item 10: ALWAYS green when live, regardless of theme accent.
   support: "It's confusing to your brain seeing it red and thinking it's
   active." Cognitive expectation = green=on. Hardcoded so a red theme
   accent (Dominican / Belize) doesn't bleed through. */
.contact-row.contact-row-v2 .link-pill-toggle.live {
  background: #2ECC71 !important;
  color: #FFFFFF !important;
  border-color: #27AE60 !important;
}
.contact-row.contact-row-v2 .link-pill-toggle.off {
  background: #95A5A6 !important;
  color: #FFFFFF !important;
  border-color: #7F8C8D !important;
}
.contact-row.contact-row-v2 .link-pill-toggle:hover { filter: brightness(1.08); }

/* Full-size iOS-style pill used across profile settings and contact cards. */
input.dl-pill-toggle,
.public-profile-subtoggle input.dl-pill-toggle {
  appearance: none;
  -webkit-appearance: none;
  width: 50px;
  height: 28px;
  flex: 0 0 50px;
  margin: 0;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 999px;
  background: #7f8c8d;
  position: relative;
  cursor: pointer;
  transition: background 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
  vertical-align: middle;
}
input.dl-pill-toggle::after,
.public-profile-subtoggle input.dl-pill-toggle::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.28);
  transition: transform 0.16s ease;
}
input.dl-pill-toggle:checked,
.public-profile-subtoggle input.dl-pill-toggle:checked {
  background: #2ECC71;
  border-color: #27AE60;
}
input.dl-pill-toggle:checked::after,
.public-profile-subtoggle input.dl-pill-toggle:checked::after {
  transform: translateX(22px);
}
input.dl-pill-toggle:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent) 72%, #fff);
  outline-offset: 3px;
}
.contact-disclosure-controls {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  flex: 0 1 auto;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}
.contact-share-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 6px;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 999px;
  background: rgba(255,255,255,0.04);
  color: var(--text);
}
.contact-share-toggle small {
  font-size: 0.72rem;
  line-height: 1;
  color: var(--muted);
  white-space: nowrap;
}
.contact-share-toggle input.dl-pill-toggle:checked {
  background: linear-gradient(135deg, #2ed477, color-mix(in srgb, var(--accent) 72%, #0866ff)) !important;
  border-color: color-mix(in srgb, #2ed477 70%, var(--accent)) !important;
  box-shadow: 0 0 0 1px rgba(46,212,119,0.22), 0 0 18px rgba(46,212,119,0.24) !important;
}
.contact-share-toggle input.dl-pill-toggle:checked::after {
  transform: translateX(22px) !important;
  box-shadow: 0 7px 16px rgba(0,0,0,0.25) !important;
}
.contact-share-toggle:has(input.dl-pill-toggle:checked) {
  border-color: rgba(46,212,119,0.36);
  background: color-mix(in srgb, #2ed477 10%, rgba(255,255,255,0.04));
}
.contact-share-toggle:has(input.dl-pill-toggle:checked) small {
  color: color-mix(in srgb, #2ed477 72%, #fff);
}
.account-identity-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: 10px;
  align-items: end;
}
.settings-identity-section {
  margin: 12px 0 18px;
  padding: 16px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 18px;
  background: rgba(255,255,255,0.035);
}
.account-identity-form label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}
.account-identity-form input {
  width: 100%;
  min-height: 44px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(8,12,24,0.50);
  color: var(--text);
  padding: 0 12px;
  font: inherit;
  font-weight: 800;
}
.account-identity-form button {
  min-height: 44px;
  border-radius: 999px;
  border: 0;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  color: #fff;
  padding: 0 18px;
  font: inherit;
  font-weight: 900;
  cursor: pointer;
}
@media (max-width: 720px) {
  .account-identity-form {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 560px) {
  .contact-row.contact-row-v2 .contact-circle-cluster {
    flex: 1 1 100%;
    justify-content: flex-start;
    margin-left: 56px;
  }
  .contact-row.contact-row-v2 .contact-disclosure-controls {
    justify-content: flex-start;
  }
}

/* v31 — Secret Circle section. Rendered between the regular contact
   list and the "+ new contact" form once the user unlocks any hidden
   contact this session. The header sits flush with the list and gets
   its own subtle border/colour to communicate "different bucket". */
.secret-circle-header {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  margin: 14px 0 6px;
  background: rgba(115, 183, 70, 0.06);
  border: 1px dashed rgba(115, 183, 70, 0.4);
  border-radius: 10px;
}
.secret-circle-title {
  font-weight: 700;
  color: var(--text);
  font-size: 0.92rem;
}
button.secret-circle-title {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  text-align: left;
  cursor: pointer;
}
button.secret-circle-title:hover {
  color: var(--accent);
}
.secret-circle-dock {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid color-mix(in srgb, var(--accent) 24%, var(--border));
}
.secret-circle-list {
  margin: 0;
  padding: 0;
  gap: 10px;
}
.circle-info-compare {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0 0 14px;
}
.circle-info-compare button {
  min-height: 38px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--card-2);
  color: var(--muted);
  font-weight: 850;
  cursor: pointer;
}
.circle-info-compare button.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.secret-group-btn {
  font-size: 0.78rem;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: #fff;
  cursor: pointer;
  font-weight: 600;
}
.secret-group-btn:hover { filter: brightness(1.08); }
.contact-row.contact-row-secret { border-color: rgba(115, 183, 70, 0.35); }
.secret-chip { background: rgba(115, 183, 70, 0.18) !important; color: var(--accent) !important; }

/* v31 — Secret Circle first-time explainer + group picker overlay.
   Shared modal styling (same family as the chat circle-invite banner). */
.secret-circle-explainer {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.55);
  display: flex; align-items: center; justify-content: center;
  padding: 16px; z-index: 250;
}
.secret-circle-explainer-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 20px;
  width: 100%; max-width: 420px;
}
.secret-circle-explainer-card h3 {
  margin: 0 0 8px;
  color: var(--text);
  font-size: 1.05rem;
}
.secret-circle-explainer-card p {
  margin: 0 0 14px;
  color: var(--muted);
  line-height: 1.45;
  font-size: 0.92rem;
}
.secret-circle-explainer-actions {
  display: flex; gap: 8px; justify-content: flex-end;
}
.secret-circle-explainer-actions button {
  min-height: 40px;
  padding: 0 18px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--card-2);
  color: var(--text);
  font-weight: 600;
  cursor: pointer;
}
.secret-circle-explainer-actions button.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.secret-group-pick-list {
  display: flex; flex-direction: column; gap: 6px;
  max-height: 240px; overflow-y: auto;
  margin: 0 0 14px;
}
.secret-group-pick {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  color: var(--text);
}
.secret-group-pick input { accent-color: var(--accent); }

/* v31 — public profile page tokens fallback (in case styles.css doesn't
   already define --card-2 globally). Conservative — only sets it when
   the existing var resolves to nothing. */
:root { --card-2: var(--card-2, rgba(255, 255, 255, 0.04)); }

/* ========================================================================
   v34 — Advanced customization knobs
   ========================================================================
   New CSS variables driven by customization.js apply():
     --bubble-me / --bubble-them / --bubble-me-text / --bubble-them-text
     --bubble-radius / --bubble-padding / --bubble-max-width
     --bubble-border-width / --bubble-border-color / --bubble-border-style
     --bubble-shadow
     --app-font-family / --app-font-size / --app-font-weight
     --app-letter-spacing / --app-line-height
     --header-opacity / --header-avatar-size
     --header-border-width / --header-border-color
     --compose-radius / --compose-height / --compose-text-color
     --send-btn-color
     --secondary / --gold
   The defaults below are only applied when customization.js hasn't yet
   set the variable — so existing builds keep rendering identically.
   ====================================================================== */
:root {
  --bubble-radius: 18px;
  --bubble-padding: 12px;
  --bubble-max-width: 75%;
  --bubble-border-width: 0;
  --bubble-border-color: transparent;
  --bubble-border-style: solid;
  --bubble-shadow: 0 1px 2px rgba(0,0,0,0.15);
  --bubble-me-text: #ffffff;
  --bubble-them-text: var(--text);
  --app-font-family: Inter, ui-sans-serif, system-ui, -apple-system, sans-serif;
  --app-font-weight: 400;
  --app-letter-spacing: 0;
  --app-line-height: 1.5;
  --header-opacity: 1;
  --header-avatar-size: 36px;
  --header-border-width: 1px;
  --header-border-color: var(--border);
  --compose-radius: 24px;
  --compose-height: 48px;
  --compose-text-color: var(--text);
  --send-btn-color: var(--accent);
  --secondary: #002D62;
  --gold: #F4C430;
}

/* Apply font/letter/line knobs at the body level so all text inherits. */
body {
  font-family: var(--app-font-family);
  font-weight: var(--app-font-weight);
  letter-spacing: var(--app-letter-spacing);
  line-height: var(--app-line-height);
}

/* Bubbles inherit the customizable geometry. The .bubble class is the
   one chat.js renders. We layer more specific selectors so legacy
   bubbles-rounded / bubbles-pill / bubbles-minimal keep working. */
.messages .bubble,
.cz-preview-bubble {
  border-radius: var(--bubble-radius);
  padding: var(--bubble-padding) calc(var(--bubble-padding) + 4px);
  max-width: var(--bubble-max-width);
  border: var(--bubble-border-width) var(--bubble-border-style) var(--bubble-border-color);
  box-shadow: var(--bubble-shadow);
}
.messages .bubble.me,
.cz-preview-bubble.cz-preview-me {
  background: var(--bubble-me);
  color: var(--bubble-me-text);
}
.messages .bubble.them,
.cz-preview-bubble.cz-preview-them {
  background: var(--bubble-them);
  color: var(--bubble-them-text);
}

/* Italic-received toggle. */
body.adv-italic-received .messages .bubble.them,
body.adv-italic-received .cz-preview-bubble.cz-preview-them { font-style: italic; }

/* Header sticky / static / glass / gradient toggles. */
body.adv-header-static .chat-header,
body.adv-header-static .app-header { position: static; }
body.adv-header-glass .chat-header,
body.adv-header-glass .app-header {
  background: rgba(20, 20, 22, 0.55);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
}
body.adv-header-gradient .chat-header,
body.adv-header-gradient .app-header {
  background: linear-gradient(135deg, var(--accent), var(--secondary));
}
.chat-header, .app-header {
  opacity: var(--header-opacity);
  border-bottom: var(--header-border-width) solid var(--header-border-color);
}/* v100 stripped account-avatar rule */


/* Compose bar. */
.send-form input[type="text"],
.send-form #sendInput {
  border-radius: var(--compose-radius);
  height: var(--compose-height);
  color: var(--compose-text-color);
}
.send-submit { background: var(--send-btn-color); }

/* Send button shape — body class set by apply(). */
body.adv-send-circle .send-submit  { border-radius: 999px; }
body.adv-send-pill .send-submit    { border-radius: 999px; padding: 0 22px; }
body.adv-send-square .send-submit  { border-radius: 8px; }

/* Density classes. */
body.density-compact .messages .bubble     { margin-block: 2px; padding: 6px 10px; }
body.density-comfortable .messages .bubble { margin-block: 6px; }
body.density-spacious .messages .bubble    { margin-block: 14px; padding: 16px 20px; }

/* Reduce-motion + high-contrast. */
body.adv-reduce-motion *,
body.adv-reduce-motion *::before,
body.adv-reduce-motion *::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
}
body.adv-high-contrast {
  --text: #ffffff;
  --muted: #e5e5e5;
  --border: #ffffff;
}

/* Animated background stubs — CSS-only so no JS perf cost. */
.dl-anim-particles {
  background-image:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,0.06) 2px, transparent 3px),
    radial-gradient(circle at 70% 80%, rgba(255,255,255,0.04) 2px, transparent 3px),
    radial-gradient(circle at 50% 50%, rgba(255,255,255,0.05) 2px, transparent 3px);
  background-size: 200px 200px, 350px 350px, 280px 280px;
  animation: dl-particles-drift 24s linear infinite;
}
@keyframes dl-particles-drift {
  0%   { background-position: 0 0, 0 0, 0 0; }
  100% { background-position: 200px 200px, -350px 350px, 280px -280px; }
}
.dl-anim-waves {
  background:
    repeating-linear-gradient(180deg, rgba(255,255,255,0.03) 0 2px, transparent 2px 24px);
  animation: dl-wave-shift 12s ease-in-out infinite alternate;
}
@keyframes dl-wave-shift { 0% { background-position: 0 0; } 100% { background-position: 0 30px; } }
.dl-anim-aurora {
  background:
    radial-gradient(ellipse at 30% 20%, var(--accent), transparent 60%),
    radial-gradient(ellipse at 70% 80%, var(--secondary), transparent 60%);
  opacity: 0.18;
  animation: dl-aurora-flow 20s ease-in-out infinite alternate;
}
@keyframes dl-aurora-flow {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(20px, -10px) scale(1.05); }
}
.dl-anim-breathing {
  background: radial-gradient(circle at 50% 50%, var(--accent), transparent 70%);
  opacity: 0.12;
  animation: dl-breathing 8s ease-in-out infinite;
}
@keyframes dl-breathing {
  0%, 100% { transform: scale(1); opacity: 0.10; }
  50%      { transform: scale(1.15); opacity: 0.20; }
}

/* ---- Quick Themes preset chips ---- */
.cz-presets-section { padding-top: 6px; }
.cz-presets-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}
.cz-preset-chip {
  background: var(--card-2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 0.88rem;
  cursor: pointer;
  font-family: inherit;
  transition: border-color 120ms ease, transform 80ms ease;
}
.cz-preset-chip:hover { border-color: var(--accent); }
.cz-preset-chip:active { transform: translateY(1px); }
.cz-preset-chip.cz-preset-custom {
  background: transparent;
  color: var(--muted);
  cursor: default;
}

/* ---- Advanced section ---- */
.cz-advanced-section {
  background:
    radial-gradient(circle at 8% 0%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 34%),
    color-mix(in srgb, var(--card-2) 92%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--border) 82%);
  border-radius: 16px;
  padding: 14px 12px;
  margin-top: 10px;
}
.cz-advanced-section > h4 { margin-top: 0; }
.cz-advanced-hero {
  border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--border) 76%);
  border-radius: 14px;
  padding: 14px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--card) 92%, transparent), color-mix(in srgb, var(--accent) 10%, transparent));
  margin-bottom: 10px;
}
.cz-advanced-kicker {
  display: inline-flex;
  padding: 5px 9px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--border) 66%);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--text);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.cz-advanced-hero h4 {
  margin: 10px 0 6px;
  color: var(--text);
  font-size: 1rem;
  letter-spacing: 0;
  text-transform: none;
}
.cz-advanced-hero p {
  margin: 0;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.42;
}
.cz-advanced-hero strong {
  color: var(--text);
}
.cz-adv-scope-strip {
  display: grid;
  gap: 3px;
  padding: 10px 12px;
  border-radius: 13px;
  border: 1px solid color-mix(in srgb, var(--accent) 20%, var(--border) 80%);
  background: color-mix(in srgb, var(--card) 78%, transparent);
  margin-bottom: 10px;
}
.cz-adv-scope-strip span {
  color: var(--muted);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 800;
}
.cz-adv-scope-strip strong {
  color: var(--text);
  font-size: 0.94rem;
}
.cz-adv-scope-strip small {
  color: var(--muted);
  line-height: 1.32;
}
.cz-adv-recipe-block {
  padding: 12px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--accent) 20%, var(--border) 80%);
  background: color-mix(in srgb, var(--card) 74%, transparent);
  margin-bottom: 12px;
}
.cz-adv-recipe-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: end;
  margin-bottom: 10px;
}
.cz-adv-recipe-head strong {
  color: var(--text);
}
.cz-adv-recipe-head small {
  color: var(--muted);
  font-size: 0.75rem;
  line-height: 1.25;
  text-align: right;
  max-width: 260px;
}
.cz-adv-recipe-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}
.cz-adv-recipe {
  min-height: 94px;
  text-align: left;
  border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--border) 82%);
  border-radius: 13px;
  background:
    radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 38%),
    color-mix(in srgb, var(--card-2) 84%, transparent);
  color: var(--text);
  padding: 10px;
  display: grid;
  gap: 6px;
  cursor: pointer;
  box-shadow: 0 12px 24px rgba(0,0,0,0.16);
}
.cz-adv-recipe:hover,
.cz-adv-recipe.is-applying {
  border-color: color-mix(in srgb, var(--accent) 58%, var(--border) 42%);
  transform: translateY(-1px);
}
.cz-adv-recipe-swatches {
  display: flex;
  gap: 5px;
}
.cz-adv-recipe-swatches i {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.24);
  box-shadow: 0 4px 10px rgba(0,0,0,0.20);
}
.cz-adv-recipe strong {
  font-size: 0.9rem;
}
.cz-adv-recipe small {
  color: var(--muted);
  line-height: 1.28;
}
@media (min-width: 620px) {
  .cz-adv-recipe-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.cz-adv-group {
  border: 1px solid color-mix(in srgb, var(--accent) 14%, var(--border) 86%);
  border-radius: 13px;
  padding: 6px 12px;
  margin-bottom: 8px;
  background: color-mix(in srgb, var(--card) 86%, transparent);
}
.cz-adv-group > summary {
  cursor: pointer;
  font-weight: 700;
  padding: 10px 0;
  list-style: none;
  user-select: none;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 8px;
}
.cz-adv-group > summary::-webkit-details-marker { display: none; }
.cz-adv-group > summary span {
  color: var(--text);
  font-size: 0.92rem;
}
.cz-adv-group > summary small {
  color: var(--muted);
  font-size: 0.74rem;
  line-height: 1.28;
  font-weight: 500;
  grid-column: 1 / 2;
}
.cz-adv-group > summary::after {
  content: "▾";
  grid-column: 2 / 3;
  grid-row: 1 / 3;
  align-self: center;
  margin-left: auto;
  color: var(--muted);
  transition: transform 120ms ease;
}
.cz-adv-group[open] > summary::after { transform: rotate(180deg); }
.cz-adv-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  padding: 8px 0 12px;
}
@media (min-width: 540px) {
  .cz-adv-grid { grid-template-columns: 1fr 1fr; }
}
.cz-adv-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  font-size: 0.9rem;
  color: var(--text);
}
.cz-adv-row > span {
  color: var(--muted);
  font-size: 0.85rem;
}
.cz-adv-row input[type="range"] {
  grid-column: 1 / -1;
  width: 100%;
  accent-color: var(--accent);
}
.cz-adv-row .cz-adv-out {
  grid-column: 2 / 3;
  font-variant-numeric: tabular-nums;
  font-size: 0.8rem;
  color: var(--muted);
  min-width: 48px;
  text-align: right;
}
.cz-adv-row select,
.cz-adv-row input[type="color"],
.cz-adv-row input[type="text"],
.cz-adv-row textarea {
  background: var(--card-2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 6px;
  padding: 4px 8px;
  font-family: inherit;
  min-width: 0;
}
.cz-adv-row textarea {
  grid-column: 1 / -1;
  min-height: 60px;
  resize: vertical;
  line-height: 1.35;
}
.cz-adv-row.cz-adv-toggle input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--accent);
}
@media (max-width: 520px) {
  .cz-adv-recipe-head {
    align-items: start;
    flex-direction: column;
  }
  .cz-adv-recipe-head small {
    text-align: left;
    max-width: none;
  }
}


/* v36 — Change password (Settings panel) ----------------------------------
   Sits inside the existing Settings <details> drawer. Uses the same input
   styling as the rest of the dashboard so it visually belongs there. */
.change-password-section {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.change-password-heading {
  margin: 0 0 4px;
  font-size: 0.95rem;
  color: var(--text);
}
.change-password-sub {
  margin: 0 0 12px;
  font-size: 0.78rem;
}
.change-password-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cp-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cp-label {
  font-size: 0.78rem;
  color: var(--muted);
}
.cp-input-row {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--card-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0 8px 0 0;
}
.cp-input {
  flex: 1;
  background: transparent;
  border: 0;
  color: var(--text);
  padding: 10px 12px;
  font-size: 0.95rem;
  outline: none;
  font-family: inherit;
}
.cp-input.masked-input { -webkit-text-security: disc; text-security: disc; }
.cp-input.unmasked { -webkit-text-security: none; text-security: none; }
.cp-eye {
  background: transparent;
  border: 0;
  font-size: 1.05rem;
  cursor: pointer;
  padding: 4px 6px;
  color: var(--text);
  opacity: 0.75;
}
.cp-eye:hover { opacity: 1; }
.cp-inline-error {
  margin: 4px 0 0;
  font-size: 0.78rem;
  color: #ff8a8a;
  min-height: 1em;
}
.cp-submit {
  margin-top: 4px;
  background: var(--accent);
  color: #061004;
  border: 0;
  border-radius: 8px;
  padding: 10px 14px;
  font-weight: 600;
  cursor: pointer;
  font-size: 0.92rem;
}
.cp-submit:disabled { opacity: 0.6; cursor: not-allowed; }
.delete-account-section {
  margin-top: 28px;
  border-color: color-mix(in srgb, var(--red, #ff5b5b) 42%, var(--border)) !important;
}
.delete-account-section .change-password-heading {
  color: #ffb0b0;
}
.cp-submit.danger {
  background: linear-gradient(135deg, #ff5b5b, #c82333);
  color: #fff;
}
.cp-submit.danger:hover {
  filter: brightness(1.05);
}

/* v36 — toast for auth-related success / failure messages. Reused for
   change-password and (future) other auth ops. Slides down from the top. */
.auth-toast {
  position: fixed;
  top: 12px;
  left: 50%;
  transform: translate(-50%, -120%);
  background: var(--accent);
  color: #061004;
  padding: 10px 18px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.92rem;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
  z-index: 99999;
  pointer-events: none;
  transition: transform 0.28s ease;
  max-width: 90vw;
  text-align: center;
}
.auth-toast.visible {
  transform: translate(-50%, 0);
}
.auth-toast.error {
  background: #ff5d5d;
  color: #fff;
}

/* v36 — Forgot password link on the landing form. Tiny, unobtrusive, sits
   under the Sign in button. */
.forgot-password-link {
  display: block;
  margin: 8px auto 0;
  background: transparent;
  border: 0;
  color: var(--accent);
  font-size: 0.82rem;
  text-decoration: underline;
  cursor: pointer;
  text-align: center;
  padding: 2px 4px;
}
.forgot-password-link:hover { opacity: 0.85; }

/* ========================================================================== */
/* v37 — Founding Member, Requests inbox, Public Profile editor, Voice clone, */
/* Help button, Broadcast, Theme marketplace, semantic-color "live" pill.     */
/* ========================================================================== */

.founding-block {
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.10), rgba(255, 165, 0, 0.04));
  border: 1px solid rgba(255, 200, 0, 0.32);
  border-radius: 12px;
  padding: 12px 14px;
  margin: 12px 0;
}
.founding-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, #ffd60a, #ffa600);
  color: #2a1a00;
  font-weight: 700;
  font-size: 0.85rem;
  padding: 4px 10px;
  border-radius: 999px;
  letter-spacing: 0.02em;
}
.founding-badge--small { font-size: 0.7rem; padding: 2px 6px; }
.founding-meta { margin: 8px 0 0; font-size: 0.82rem; line-height: 1.45; }

.requests-block { margin: 10px 0; border: 1px solid var(--border); border-radius: 12px; padding: 6px 10px; background: var(--card-2); }
.requests-summary { cursor: pointer; padding: 6px 4px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.requests-summary::-webkit-details-marker { display: none; }
.requests-badge { background: #ff5d5d; color: #fff; border-radius: 999px; padding: 1px 7px; font-size: 0.72rem; font-weight: 700; min-width: 18px; text-align: center; }
.requests-list { display: flex; flex-direction: column; gap: 6px; padding: 6px 0; }
.request-item { background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px; display: flex; flex-direction: column; gap: 4px; }
.request-item .request-from { font-weight: 600; font-size: 0.9rem; color: var(--text); }
.request-item .request-handle { color: var(--muted); font-size: 0.78rem; margin-left: 4px; }
.request-item .request-preview { color: var(--muted); font-size: 0.85rem; line-height: 1.35; }
.request-item .request-time { color: var(--muted); font-size: 0.72rem; }
.request-item .request-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.request-item .request-actions button { flex: 1; min-height: 32px; border-radius: 8px; border: 1px solid var(--border); background: var(--card-2); color: var(--text); font-weight: 600; font-size: 0.82rem; cursor: pointer; }
.request-item .request-actions button.accept { background: #2ECC71; color: #fff; border-color: #27AE60; }
.request-item .request-actions button.decline { background: var(--card-2); color: var(--muted); }
.request-item .request-actions button.block { background: #ff5d5d; color: #fff; border-color: #d94646; }

/* v81 — Requests center upgrade. Message requests and contact/circle
   requests now live together in one visually obvious dashboard block. */
.requests-block {
  border-radius: 18px;
  padding: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 34%),
    color-mix(in srgb, var(--card-2) 86%, transparent);
  box-shadow: 0 16px 40px rgba(0,0,0,0.22);
}
.requests-summary {
  padding: 14px;
  min-height: 66px;
}
.requests-summary-icon {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--accent) 16%, var(--card));
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border));
  flex: 0 0 auto;
}
.requests-summary-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
  flex: 1 1 auto;
}
.requests-summary-copy strong {
  color: var(--text);
  font-size: 1rem;
}
.requests-summary-copy small {
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.25;
}
.requests-badge {
  min-width: 26px;
  height: 26px;
  padding: 0 8px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  color: #fff;
  font-weight: 900;
  font-size: 0.78rem;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 16%, transparent);
}
.requests-toolbar {
  margin: 0 12px 10px;
  padding: 10px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--border));
  background: color-mix(in srgb, var(--card) 72%, transparent);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.requests-toolbar > div {
  display: grid;
  gap: 2px;
}
.requests-toolbar strong {
  font-size: 0.9rem;
}
.requests-toolbar span {
  font-size: 0.76rem;
}
.requests-toolbar button {
  border: 1px solid var(--border);
  background: var(--accent);
  color: #fff;
  border-radius: 999px;
  padding: 8px 12px;
  font-weight: 800;
  cursor: pointer;
}
.requests-toolbar button:disabled {
  opacity: 0.55;
  cursor: wait;
}
.requests-subsection {
  margin: 0 12px 12px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--accent) 16%, var(--border));
  background: color-mix(in srgb, var(--card) 80%, transparent);
  padding: 10px;
}
.requests-subhead {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: start;
  margin-bottom: 8px;
}
.requests-subhead span {
  color: var(--text);
  font-weight: 900;
  font-size: 0.84rem;
}
.requests-subhead small {
  color: var(--muted);
  font-size: 0.72rem;
  text-align: right;
  line-height: 1.25;
}
.requests-empty {
  margin: 0 12px 12px;
  padding: 12px;
  border-radius: 14px;
  border: 1px dashed color-mix(in srgb, var(--accent) 22%, var(--border));
  background: color-mix(in srgb, var(--card) 58%, transparent);
  text-align: center;
}
.pending-invites-panel.requests-subsection {
  margin-top: 0;
}
.pending-invites-panel.requests-subsection ul {
  margin: 0;
}
.pending-invites-panel.requests-subsection li {
  border: 1px solid color-mix(in srgb, var(--accent) 16%, var(--border));
  border-radius: 12px;
  background: color-mix(in srgb, var(--card-2) 78%, transparent);
  padding: 10px;
}
.request-item {
  border-radius: 13px;
  padding: 10px;
  background:
    radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 34%),
    color-mix(in srgb, var(--card-2) 78%, transparent);
}
@media (max-width: 540px) {
  .requests-toolbar,
  .requests-subhead {
    flex-direction: column;
    align-items: stretch;
  }
  .requests-toolbar button {
    width: 100%;
  }
  .requests-subhead small {
    text-align: left;
  }
}
.requests-empty { text-align: center; padding: 8px 4px; }

.public-profile-edit { display: block; margin: 8px 0 0; background: transparent; border: 1px solid var(--border); color: var(--text); padding: 8px 12px; border-radius: 999px; font-size: 0.82rem; cursor: pointer; }
.broadcast-btn { display: block; margin: 6px 0 0; background: transparent; border: 1px solid var(--accent); color: var(--accent); padding: 8px 12px; border-radius: 999px; font-size: 0.82rem; cursor: pointer; }
.broadcast-btn:hover { background: rgba(115,183,70,0.12); }
.help-trigger { display: block; width: 100%; background: var(--card-2); border: 1px solid var(--border); color: var(--text); padding: 10px 14px; border-radius: 10px; margin-top: 8px; font-size: 0.95rem; text-align: left; cursor: pointer; }

/* v48 — Dashboard "❓ Help" header pill (mirrors .dashboard-customize-btn
   geometry) and the lightweight "Ask support a question" modal it opens.
   Theme via CSS variables so Customize-driven palettes carry through. */
.dashboard-help-btn { background: transparent !important; background-color: transparent !important; box-shadow: none !important; border: none !important; color: inherit; cursor: pointer; }
.app-header .dashboard-help-btn:hover { background: rgba(255, 255, 255, 0.08) !important; }
.app-header .dashboard-help-btn:active { background: rgba(255, 255, 255, 0.10) !important; }

.help-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.62); display: flex; align-items: center; justify-content: center; padding: 20px; z-index: 2400; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.help-modal-overlay[hidden] { display: none; }
.help-modal-card { background: var(--card-bg, var(--card)); color: var(--text); border: 1px solid var(--border); border-radius: 16px; padding: 22px 22px 20px; max-width: 480px; width: 100%; position: relative; box-shadow: 0 12px 50px rgba(0,0,0,0.55); }
.help-modal-close { position: absolute; top: 8px; right: 10px; background: transparent; border: 0; color: var(--text); font-size: 22px; line-height: 1; cursor: pointer; padding: 4px 8px; }
.help-modal-close:hover { color: var(--accent); }
.help-modal-title { margin: 0 0 6px; font-size: 1.1rem; }
.help-modal-sub { margin: 0 0 14px; color: var(--muted); font-size: 0.9rem; line-height: 1.4; }
.help-modal-textarea { width: 100%; box-sizing: border-box; background: var(--card-2); color: var(--text); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; font: inherit; resize: vertical; min-height: 110px; }
.help-modal-textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.help-modal-feedback { margin: 10px 0 0; font-size: 0.85rem; }
.help-modal-feedback.is-success { color: var(--accent); }
.help-modal-feedback.is-error { color: #e25252; }
.help-modal-send { display: block; width: 100%; margin-top: 14px; background: var(--accent); color: #fff; border: 0; border-radius: 10px; padding: 11px 16px; font-size: 0.95rem; font-weight: 600; cursor: pointer; }
.help-modal-send:hover { filter: brightness(1.05); }
.help-modal-send:disabled { opacity: 0.6; cursor: not-allowed; }

.epp-modal { position: fixed; inset: 0; background: rgba(0,0,0,0.6); display: flex; align-items: center; justify-content: center; padding: 16px; z-index: 600; overflow-y: auto; }
.epp-card { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 18px; width: 100%; max-width: 540px; max-height: 90vh; overflow-y: auto; }
.epp-card h3 { margin: 0 0 12px; }
.epp-row { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.epp-row label { font-size: 0.85rem; color: var(--muted); }
.epp-row input, .epp-row textarea, .epp-row select { background: var(--card-2); color: var(--text); border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; font: inherit; }
.epp-row textarea { min-height: 80px; resize: vertical; }
.epp-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 14px; }
.epp-actions button { min-height: 38px; padding: 0 14px; border-radius: 999px; background: var(--card-2); color: var(--text); border: 1px solid var(--border); font-weight: 600; cursor: pointer; }
.epp-actions button.primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.epp-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 4px; }
.epp-gallery .epp-gallery-cell { aspect-ratio: 1 / 1; background: var(--card-2); border: 1px dashed var(--border); border-radius: 8px; display: flex; align-items: center; justify-content: center; color: var(--muted); cursor: pointer; overflow: hidden; position: relative; }
.epp-gallery .epp-gallery-cell img { width: 100%; height: 100%; object-fit: cover; }
.epp-gallery .epp-gallery-cell .epp-remove { position: absolute; top: 4px; right: 4px; background: rgba(0,0,0,0.65); color: #fff; border: 0; width: 22px; height: 22px; border-radius: 50%; cursor: pointer; font-size: 0.85rem; }

/* v48 — inline Edit Public Profile inside the Settings drawer.
   Text fields only. Distinct namespace (.epp-inline-*) so it cannot
   collide with the .epp-* modal styles above. */
.epp-inline-section { margin-top: 14px; padding: 14px; background: var(--card-2); border: 1px solid var(--border); border-radius: 10px; }
.epp-inline-heading { margin: 0 0 4px; font-size: 0.98rem; }
.epp-inline-sub { margin: 0 0 10px; font-size: 0.82rem; }
.epp-inline-form { display: flex; flex-direction: column; gap: 10px; }
.epp-inline-field { display: flex; flex-direction: column; gap: 4px; }
.epp-inline-label { font-size: 0.82rem; color: var(--muted); }
.epp-inline-input { background: var(--card); color: var(--text); border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; font: inherit; width: 100%; box-sizing: border-box; }
.epp-inline-textarea { min-height: 64px; resize: vertical; }
.epp-bio-counter { font-size: 0.74rem; align-self: flex-end; }
.epp-handle-row { display: flex; align-items: stretch; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; background: var(--card); }
.epp-handle-row .epp-handle-prefix { display: inline-flex; align-items: center; padding: 0 8px; background: var(--card-2); color: var(--muted); font-weight: 600; }
.epp-handle-row .epp-handle-input { border: 0; border-radius: 0; padding: 8px 10px; flex: 1 1 auto; background: transparent; }
.epp-inline-actions { display: flex; align-items: center; gap: 10px; margin-top: 4px; flex-wrap: wrap; }
.epp-inline-save { min-height: 36px; padding: 0 16px; border-radius: 999px; background: var(--accent); color: #fff; border: 1px solid var(--accent); font-weight: 600; cursor: pointer; }
.epp-inline-save:disabled { opacity: 0.6; cursor: not-allowed; }
.epp-inline-save[data-busy="1"]::before { content: "⟳ "; display: inline-block; animation: epp-spin 0.9s linear infinite; }
@keyframes epp-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.epp-inline-status { font-size: 0.84rem; }
.epp-inline-status.is-saving { color: var(--muted); }
.epp-inline-status.is-success { color: #2ECC71; }
.epp-inline-status.is-partial { color: #FFA94D; }
.epp-inline-status.is-error { color: #e25252; }
.epp-inline-notice { margin: 4px 0 0; font-size: 0.78rem; color: #FFA94D; }

/* ----- v49 — Inline Public-Profile PHOTOS ---------------------------------
   Avatar / cover / gallery uploaders that live next to the inline text-
   fields form (.epp-inline-section). Each .pp-photo-slot is the tap
   target. The 📷 overlay sits on top of any uploaded image so users can
   see "tap to change" without losing the picture.
*/
.pp-photos-section { margin-top: 14px; }
.pp-photos-row { display: flex; flex-direction: column; gap: 6px; margin: 12px 0 0; }
.pp-photos-row-avatar { align-items: flex-start; }
.pp-photo-slot {
  position: relative;
  background: var(--card);
  border: 1px dashed var(--border);
  border-radius: 12px;
  cursor: pointer;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
}
.pp-photo-slot:hover { border-color: var(--accent); color: var(--text); }
.pp-photo-slot:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pp-photo-slot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pp-photo-slot.has-photo { border-style: solid; }
.pp-photo-slot-cover { width: 100%; aspect-ratio: 3 / 1; min-height: 96px; }
.pp-photo-slot-avatar { width: 96px; height: 96px; border-radius: 50%; }
.pp-photo-placeholder { font-size: 1.6rem; }
.pp-photo-placeholder-wide { font-size: 1.8rem; }
.pp-photo-overlay {
  position: absolute;
  bottom: 6px; right: 6px;
  background: rgba(0,0,0,0.55);
  color: #fff;
  font-size: 0.8rem;
  padding: 2px 8px;
  border-radius: 999px;
  pointer-events: none;
}
.pp-photo-overlay-wide { left: 50%; right: auto; bottom: 8px; transform: translateX(-50%); white-space: nowrap; }
/* Gallery — 3-up grid with a trailing + Add tile. Capped at 6 photos. */
.pp-gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-top: 4px;
}
.pp-gallery-tile {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--card);
  border: 1px dashed var(--border);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  overflow: hidden;
  color: var(--muted);
  font-size: 0.85rem;
}
.pp-gallery-tile.has-photo { border-style: solid; }
.pp-gallery-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pp-gallery-tile.pp-gallery-add:hover { border-color: var(--accent); color: var(--text); }
.pp-gallery-remove {
  position: absolute;
  top: 4px; right: 4px;
  background: rgba(0,0,0,0.65);
  color: #fff;
  border: 0;
  width: 22px; height: 22px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 0.85rem;
  line-height: 1;
}
.pp-gallery-cap {
  grid-column: span 3;
  padding: 6px 0;
  font-size: 0.78rem;
  text-align: center;
}

.voice-clone-block { margin-top: 12px; padding: 12px; background: var(--card-2); border: 1px solid var(--border); border-radius: 10px; }
.voice-clone-block h4 { margin: 0 0 6px; font-size: 0.95rem; }
.voice-clone-script { background: var(--card); border: 1px solid var(--border); border-radius: 8px; padding: 10px; font-size: 0.85rem; line-height: 1.45; color: var(--muted); margin: 8px 0; }
.voice-clone-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.voice-clone-actions button { min-height: 36px; padding: 0 12px; border-radius: 999px; background: var(--card); color: var(--text); border: 1px solid var(--border); cursor: pointer; font-size: 0.85rem; }
.voice-clone-actions button.primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.voice-clone-actions button.danger { background: #ff5d5d; color: #fff; border-color: #d94646; }
.voice-clone-rec { color: #ff5d5d; font-weight: 700; animation: vc-blink 1.2s infinite; }
@keyframes vc-blink { 0%,100% { opacity: 1; } 50% { opacity: 0.45; } }
.voice-clone-consent { display: flex; align-items: flex-start; gap: 6px; font-size: 0.78rem; color: var(--muted); margin-top: 6px; }

.link-live-pill { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 999px; font-size: 0.72rem; font-weight: 700; }
.link-live-pill.active, .link-live-pill[data-state="active"] { background: #2ECC71 !important; color: #FFFFFF !important; border: 1px solid #27AE60 !important; }
.link-live-pill.disabled, .link-live-pill[data-state="disabled"] { background: #95A5A6 !important; color: #FFFFFF !important; border: 1px solid #7F8C8D !important; }
.status-dot.online, .status-dot.semantic-online { background: #2ECC71 !important; }

.tm-modal { position: fixed; inset: 0; background: rgba(0,0,0,0.65); z-index: 700; padding: 16px; overflow-y: auto; }
.tm-card { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 16px; max-width: 720px; margin: 0 auto; }
.tm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.tm-tile { border-radius: 12px; border: 1px solid color-mix(in srgb, var(--accent) 20%, var(--border) 80%); background: color-mix(in srgb, var(--card-2) 88%, transparent); padding: 10px; display: flex; flex-direction: column; gap: 6px; cursor: pointer; position: relative; min-width: 0; box-shadow: 0 16px 34px rgba(0,0,0,0.22); }
.tm-tile-thumb { min-height: 112px; border-radius: 10px; background: linear-gradient(135deg, var(--accent), var(--card)); display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; position: relative; overflow: hidden; border: 1px solid rgba(255,255,255,0.12); }
.tm-tile-thumb::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 18% 0%, rgba(255,255,255,0.20), transparent 30%), linear-gradient(180deg, transparent, rgba(0,0,0,0.24)); pointer-events: none; }
.tm-thumb-badge { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; background: rgba(0,0,0,0.34); border: 1px solid rgba(255,255,255,0.26); backdrop-filter: blur(8px); z-index: 1; }
.tm-thumb-bubble { position: absolute; right: 12px; bottom: 14px; width: 54px; height: 18px; border-radius: 999px 999px 4px 999px; box-shadow: 0 8px 18px rgba(0,0,0,0.25); z-index: 1; }
.tm-thumb-bubble-secondary { left: 12px; right: auto; bottom: 40px; width: 44px; opacity: 0.86; border-radius: 999px 999px 999px 4px; }
.tm-tile-name { font-weight: 800; font-size: 0.94rem; color: var(--text); }
.tm-tile-author { color: var(--muted); font-size: 0.72rem; }
.tm-tile-desc { color: var(--muted); font-size: 0.74rem; line-height: 1.3; min-height: 2.5em; }
.tm-tile-installs { color: var(--muted); font-size: 0.72rem; }
.tm-tile-actions { display: flex; gap: 6px; margin-top: 4px; }
.tm-tile-actions button { flex: 1; padding: 7px 8px; border-radius: 9px; font-size: 0.76rem; font-weight: 700; cursor: pointer; border: 1px solid var(--border); background: var(--card); color: var(--text); min-width: 0; }
.tm-tile-actions button.primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.tm-empty, .tm-loading { text-align: center; padding: 24px; color: var(--muted); grid-column: 1 / -1; }

.saved-theme-chip { background: linear-gradient(135deg, var(--accent), var(--card)); color: #fff; }
.theme-chip.is-active-custom { outline: 2px dashed var(--accent); }

/* v80 — Community Theme Gallery page. */
.theme-market-body {
  min-height: 100vh;
  background:
    radial-gradient(ellipse at 10% 0%, color-mix(in srgb, var(--accent) 30%, transparent), transparent 34%),
    radial-gradient(ellipse at 100% 20%, color-mix(in srgb, var(--secondary) 26%, transparent), transparent 38%),
    var(--theme-page-bg, var(--bg));
  color: var(--text);
}
.theme-market-page {
  width: min(1120px, 100%);
  margin: 0 auto;
  padding: 18px 14px 34px;
}
.theme-market-header {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: start;
  margin-bottom: 16px;
}
.theme-market-back {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--card-2) 86%, transparent);
  color: var(--text);
  font-size: 1.2rem;
  font-weight: 800;
  cursor: pointer;
}
.theme-market-kicker {
  margin: 0 0 5px;
  color: var(--muted);
  font-weight: 800;
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.theme-market-header h1 {
  margin: 0;
  font-size: clamp(1.65rem, 5vw, 3.2rem);
  line-height: 1.02;
}
.theme-market-sub {
  margin: 8px 0 0;
  color: var(--muted);
  max-width: 680px;
  line-height: 1.45;
}
.theme-market-feature {
  min-height: 210px;
  border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--border) 76%);
  border-radius: 14px;
  background:
    radial-gradient(circle at 8% 0%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 34%),
    linear-gradient(135deg, color-mix(in srgb, var(--card) 92%, transparent), color-mix(in srgb, var(--card-2) 84%, transparent));
  display: grid;
  grid-template-columns: minmax(0, 1fr) 220px;
  gap: 18px;
  align-items: center;
  padding: 18px;
  overflow: hidden;
  box-shadow: 0 18px 48px rgba(0,0,0,0.26);
}
.theme-market-feature-copy h2 {
  margin: 10px 0 8px;
  font-size: clamp(1.2rem, 3vw, 2rem);
}
.theme-market-feature-copy p {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}
.theme-market-pill {
  display: inline-flex;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--accent) 38%, var(--border) 62%);
  color: var(--text);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  font-size: 0.78rem;
  font-weight: 800;
}
.theme-market-phone {
  width: 170px;
  height: 230px;
  border-radius: 28px;
  border: 1px solid rgba(255,255,255,0.18);
  background:
    radial-gradient(circle at 18% 8%, rgba(255,255,255,0.20), transparent 26%),
    linear-gradient(160deg, var(--secondary), var(--accent));
  justify-self: center;
  position: relative;
  box-shadow: 0 24px 60px rgba(0,0,0,0.34);
}
.theme-market-phone-top,
.theme-market-phone-card,
.theme-market-phone-bubble,
.theme-market-phone-nav {
  position: absolute;
  left: 18px;
  right: 18px;
  border-radius: 999px;
  background: rgba(255,255,255,0.20);
}
.theme-market-phone-top { top: 18px; height: 24px; }
.theme-market-phone-card { top: 56px; height: 62px; border-radius: 14px; background: rgba(0,0,0,0.22); }
.theme-market-phone-bubble { width: 88px; height: 26px; top: 136px; left: 52px; right: auto; background: rgba(255,255,255,0.78); }
.theme-market-phone-bubble.two { top: 170px; left: 20px; width: 104px; background: rgba(0,0,0,0.30); }
.theme-market-phone-nav { bottom: 16px; height: 10px; left: 54px; right: 54px; }
.theme-market-toolbar {
  margin: 14px 0;
  display: grid;
  gap: 10px;
}
.theme-market-filters,
.theme-market-sorts {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 2px;
}
.theme-market-filters button,
.theme-market-sorts button {
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--card-2) 86%, transparent);
  color: var(--text);
  border-radius: 999px;
  padding: 8px 12px;
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
}
.theme-market-filters button.active,
.theme-market-sorts button.active {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
}
.theme-market-results {
  border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--border) 82%);
  border-radius: 14px;
  background: color-mix(in srgb, var(--card) 88%, transparent);
  padding: 14px;
}
.theme-market-results-head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 10px;
  margin-bottom: 12px;
}
.theme-market-results-head h2 {
  margin: 0;
  font-size: 1rem;
}
.theme-market-results-head p {
  margin: 0;
  color: var(--muted);
  font-size: 0.8rem;
  text-align: right;
}
.theme-market-grid {
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
}
@media (max-width: 720px) {
  .theme-market-feature {
    grid-template-columns: 1fr;
    min-height: unset;
  }
  .theme-market-phone {
    width: min(220px, 76vw);
    height: 190px;
  }
  .theme-market-results-head {
    align-items: start;
    flex-direction: column;
  }
  .theme-market-results-head p {
    text-align: left;
  }
  .theme-market-grid {
    grid-template-columns: 1fr;
  }
}

/* Live preview wrapper — sticky bottom of customize panel. */
.live-preview-wrap { position: sticky; bottom: 0; background: var(--card); border-top: 1px solid var(--border); padding: 10px 12px; margin: 12px -16px -16px; z-index: 5; }
.live-preview-wrap h5 { margin: 0 0 6px; font-size: 0.85rem; color: var(--text); }
.live-preview-hint { color: var(--muted); font-size: 0.72rem; margin-bottom: 6px; }
.live-preview-bubbles { display: flex; flex-direction: column; gap: 6px; }
.live-preview-bubble { max-width: 70%; padding: 8px 12px; border-radius: 16px; font-size: 0.85rem; }
.live-preview-bubble.them { align-self: flex-start; background: var(--card-2); color: var(--text); }
.live-preview-bubble.me { align-self: flex-end; background: var(--accent); color: #fff; }
.live-preview-bubble.media { align-self: flex-start; padding: 0; overflow: hidden; }
.live-preview-bubble.media img { display: block; width: 140px; height: 80px; object-fit: cover; }

/* ============================================================================
   v45 — COUNTRY THEME BUILDER (variable-driven toolkit, replaces v38/v39 spec)
   support: "the country themes are still broken — give the user every knob to
   build a country theme that looks like the ChatGPT mockups, instead of trying
   to pixel-match three specific themes."
   The Advanced section in customization.js writes ~60 CSS custom properties
   on `body`. Country preset chips (🇩🇴 🇧🇿 🇭🇹 etc.) just SET those
   variables to that country's flag-color defaults. User can then tweak any
   knob to match their ChatGPT mockup exactly. Save preset → reusable.
============================================================================ */

/* ---- Country-Theme variable defaults (apply to every preset in the
   country family AND when the user hasn't set anything yet) -------------- */
body[data-preset="dr"], body[data-preset="dominican"],
body[data-preset="bz"], body[data-preset="belize"],
body[data-preset="ht"], body[data-preset="haiti"],
body[data-preset="mexico"], body[data-preset="colombia"], body[data-preset="cuba"],
body[data-preset="pr"], body[data-preset="jamaica"], body[data-preset="venezuela"],
body[data-preset="brazil"], body[data-preset="argentina"], body[data-preset="spain"],
body[data-preset="france"], body[data-preset="italy"], body[data-preset="usa"],
body[data-preset="custom-country"] {
  /* Background gradient stops */
  --bg-top: #050914;
  --bg-mid: #071224;
  --bg-bottom: #050914;
  --accent-1-color: rgba(0,45,98,0.55);
  --accent-1-pos: top left;
  --accent-2-color: rgba(206,17,38,0.35);
  --accent-2-pos: top right;
  --bg-overlay-opacity: 0;
  --bg-blur: 0px;
  /* Stripe / divider */
  --stripe-show: 1;
  --stripe-count: 3;
  --stripe-1-color: #002D62;
  --stripe-1-width: 38%;
  --stripe-2-color: #FFFFFF;
  --stripe-2-width: 24%;
  --stripe-3-color: #CE1126;
  --stripe-3-width: 38%;
  --badge-style: none;
  --badge-size: 24px;
  /* Cards */
  --card-bg-1: rgba(8,14,28,0.92);
  --card-bg-2: rgba(0,45,98,0.22);
  --card-bg-3: rgba(206,17,38,0.12);
  --card-border: rgba(255,255,255,0.12);
  --card-radius: 22px;
  --card-shadow: 0 18px 45px rgba(0,0,0,0.35);
  --card-blur: 18px;
  --card-padding: 16px;
  /* Buttons */
  --btn-primary-start: #CE1126;
  --btn-primary-end: #EF233C;
  --btn-primary-radius: 16px;
  --btn-primary-shadow-color: 206,17,38;
  --btn-primary-shadow-intensity: 0.35;
  --btn-primary-weight: 700;
  --btn-secondary-start: rgba(0,45,98,0.45);
  --btn-secondary-end: rgba(0,45,98,0.45);
  --btn-secondary-border: rgba(255,255,255,0.14);
  --btn-positive-start: #2ECC71;
  --btn-positive-end: #27AE60;
  /* Bubbles */
  --bubble-sent-top: #063B82;
  --bubble-sent-bottom: #002D62;
  --bubble-sent-radius: 18px;
  --bubble-text-sent: #FFFFFF;
  --bubble-recv-bg: rgba(255,255,255,0.06);
  --bubble-text-recv: #F5F7FA;
  --bubble-shadow: none;
  --bubble-padding: 12px;
  /* Logo */
  --logo-part1-color: #F5F7FA;
  --logo-part2-color: #CE1126;
  --logo-font-size: 32px;
  --logo-font-weight: 800;
  /* Country subtitle */
  --country-subtitle-color: rgba(245,247,250,0.85);
  --country-subtitle-font: system-ui, -apple-system, sans-serif;
  --country-subtitle-size: 16px;
  /* Header */
  --header-bg: transparent;
  --header-opacity: 1;
  --header-avatar-size: 40px;
  --header-text-color: #F5F7FA;
  /* Bottom nav */
  --nav-active-color: #F5F7FA;
  --nav-inactive-opacity: 0.6;
  /* Surface text */
  --bg: var(--bg-top);
  --text: var(--header-text-color);
  --accent: var(--btn-primary-start);
  --accent-2: var(--btn-primary-end);
  --bubble-me: var(--bubble-sent-bottom);
  --bubble-them: var(--bubble-recv-bg);
}

/* ---- Country-by-country overrides (just variable values) -------------- */
body[data-preset="dr"], body[data-preset="dominican"] {
  --bg-top: #050914; --bg-mid: #071224; --bg-bottom: #050914;
  --accent-1-color: rgba(0,45,98,0.55); --accent-1-pos: top left;
  --accent-2-color: rgba(206,17,38,0.35); --accent-2-pos: top right;
  --stripe-1-color: #002D62; --stripe-2-color: #FFFFFF; --stripe-3-color: #CE1126;
  --card-bg-1: rgba(8,14,28,0.92); --card-bg-2: rgba(0,45,98,0.22); --card-bg-3: rgba(206,17,38,0.12);
  --btn-primary-start: #CE1126; --btn-primary-end: #EF233C;
  --btn-primary-shadow-color: 206,17,38;
  --btn-secondary-start: rgba(0,45,98,0.45); --btn-secondary-end: rgba(0,45,98,0.45);
  --btn-positive-start: #2ECC71; --btn-positive-end: #27AE60;
  --bubble-sent-top: #063B82; --bubble-sent-bottom: #002D62;
  --logo-part1-color: #F5F7FA; --logo-part2-color: #CE1126;
}
body[data-preset="bz"], body[data-preset="belize"] {
  --bg-top: #003FAD; --bg-mid: #002C7A; --bg-bottom: #001B4D;
  --accent-1-color: rgba(0,87,231,0.55); --accent-1-pos: top left;
  --accent-2-color: rgba(18,184,74,0.25); --accent-2-pos: bottom right;
  --stripe-1-color: #0057E7; --stripe-1-width: 35%;
  --stripe-2-color: #D90B1C; --stripe-2-width: 25%;
  --stripe-3-color: #12B84A; --stripe-3-width: 40%;
  --card-bg-1: rgba(0,63,173,0.88); --card-bg-2: rgba(0,43,120,0.78); --card-bg-3: rgba(18,184,74,0.12);
  --card-border: rgba(255,255,255,0.18);
  --btn-primary-start: #D90B1C; --btn-primary-end: #FF1E2D;
  --btn-primary-shadow-color: 217,11,28;
  --btn-secondary-start: #003FAD; --btn-secondary-end: #0057E7;
  --btn-positive-start: #0FAF45; --btn-positive-end: #19D35A;
  --bubble-sent-top: #0057E7; --bubble-sent-bottom: #003FAD;
  --logo-part1-color: #F5F7FA; --logo-part2-color: #D90B1C;
  --country-subtitle-color: #19D35A;
}
body[data-preset="ht"], body[data-preset="haiti"] {
  --bg-top: #006BFF; --bg-mid: #003D90; --bg-bottom: #050A45;
  --accent-1-color: rgba(0,107,255,0.55); --accent-1-pos: top left;
  --accent-2-color: rgba(210,16,52,0.30); --accent-2-pos: bottom right;
  --stripe-1-color: #0038A8; --stripe-1-width: 50%;
  --stripe-2-color: #D21034; --stripe-2-width: 50%;
  --stripe-count: 2;
  --card-bg-1: rgba(5,10,69,0.92); --card-bg-2: rgba(0,107,255,0.24); --card-bg-3: rgba(210,16,52,0.12);
  --btn-primary-start: #D21034; --btn-primary-end: #EE2A4D;
  --btn-primary-shadow-color: 210,16,52;
  --btn-secondary-start: #0038A8; --btn-secondary-end: #006BFF;
  --btn-positive-start: #24D34E; --btn-positive-end: #16A33A;
  --bubble-sent-top: #006BFF; --bubble-sent-bottom: #0038A8;
  --logo-part1-color: #F5F7FA; --logo-part2-color: #D21034;
}
body[data-preset="mexico"] {
  --bg-top: #006847; --bg-mid: #1a3d2e; --bg-bottom: #050914;
  --stripe-count: 3; --stripe-1-color: #006847; --stripe-2-color: #FFFFFF; --stripe-3-color: #CE1126;
  --card-bg-1: rgba(0,104,71,0.85); --card-bg-2: rgba(26,61,46,0.6); --card-bg-3: rgba(206,17,38,0.12);
  --btn-primary-start: #CE1126; --btn-primary-end: #B30E20;
  --btn-secondary-start: #006847; --btn-secondary-end: #00543A;
  --btn-positive-start: #2ECC71; --btn-positive-end: #27AE60;
  --bubble-sent-top: #B30E20; --bubble-sent-bottom: #8C0A18;
  --logo-part2-color: #CE1126;
}
body[data-preset="colombia"] {
  --bg-top: #FCD116; --bg-mid: #003893; --bg-bottom: #050914;
  --stripe-count: 3; --stripe-1-color: #FCD116; --stripe-1-width: 50%;
  --stripe-2-color: #003893; --stripe-2-width: 25%;
  --stripe-3-color: #CE1126; --stripe-3-width: 25%;
  --card-bg-1: rgba(0,56,147,0.85); --card-bg-2: rgba(252,209,22,0.18); --card-bg-3: rgba(206,17,38,0.12);
  --btn-primary-start: #CE1126; --btn-primary-end: #A00E1F;
  --btn-secondary-start: #003893; --btn-secondary-end: #002870;
  --bubble-sent-top: #003893; --bubble-sent-bottom: #002870;
  --logo-part1-color: #FCD116; --logo-part2-color: #CE1126;
}
body[data-preset="cuba"] {
  --bg-top: #002A8F; --bg-mid: #001870; --bg-bottom: #001050;
  --card-bg-1: rgba(0,42,143,0.92); --card-bg-2: rgba(0,30,100,0.6); --card-bg-3: rgba(207,20,43,0.12);
  --btn-primary-start: #CF142B; --btn-primary-end: #A00E20;
  --btn-secondary-start: #002A8F; --btn-secondary-end: #001870;
  --bubble-sent-top: #002A8F; --bubble-sent-bottom: #001870;
  --logo-part2-color: #CF142B;
}
body[data-preset="pr"] {
  --bg-top: #0050F0; --bg-mid: #003BB0; --bg-bottom: #001A50;
  --stripe-count: 3; --stripe-1-color: #ED0000; --stripe-2-color: #FFFFFF; --stripe-3-color: #ED0000;
  --card-bg-1: rgba(0,80,240,0.78); --card-bg-2: rgba(0,26,80,0.78); --card-bg-3: rgba(237,0,0,0.10);
  --btn-primary-start: #ED0000; --btn-primary-end: #B80000;
  --btn-secondary-start: #0050F0; --btn-secondary-end: #003BB0;
  --bubble-sent-top: #0050F0; --bubble-sent-bottom: #003BB0;
  --logo-part2-color: #ED0000;
}
body[data-preset="jamaica"] {
  --bg-top: #009B3A; --bg-mid: #00671F; --bg-bottom: #003820;
  --stripe-count: 3; --stripe-1-color: #009B3A; --stripe-2-color: #FED100; --stripe-3-color: #000000;
  --card-bg-1: rgba(0,155,58,0.78); --card-bg-2: rgba(0,56,32,0.78); --card-bg-3: rgba(254,209,0,0.12);
  --btn-primary-start: #FED100; --btn-primary-end: #D6B100;
  --btn-secondary-start: #000000; --btn-secondary-end: #1a1a1a;
  --btn-positive-start: #009B3A; --btn-positive-end: #006B28;
  --bubble-sent-top: #009B3A; --bubble-sent-bottom: #006B28;
  --logo-part1-color: #FED100; --logo-part2-color: #009B3A;
}
body[data-preset="venezuela"] {
  --bg-top: #FCE300; --bg-mid: #003893; --bg-bottom: #050914;
  --stripe-count: 3; --stripe-1-color: #FCE300; --stripe-2-color: #003893; --stripe-3-color: #CE1126;
  --card-bg-1: rgba(0,56,147,0.85); --card-bg-2: rgba(252,227,0,0.16); --card-bg-3: rgba(206,17,38,0.12);
  --btn-primary-start: #CE1126; --btn-primary-end: #A00E1F;
  --btn-secondary-start: #003893; --btn-secondary-end: #002870;
  --bubble-sent-top: #003893; --bubble-sent-bottom: #002870;
  --logo-part1-color: #FCE300; --logo-part2-color: #CE1126;
}
body[data-preset="brazil"] {
  --bg-top: #009C3B; --bg-mid: #006B28; --bg-bottom: #003820;
  --stripe-count: 3; --stripe-1-color: #009C3B; --stripe-2-color: #FFDF00; --stripe-3-color: #002776;
  --card-bg-1: rgba(0,156,59,0.85); --card-bg-2: rgba(0,39,118,0.55); --card-bg-3: rgba(255,223,0,0.12);
  --btn-primary-start: #FFDF00; --btn-primary-end: #D6BB00;
  --btn-secondary-start: #002776; --btn-secondary-end: #001855;
  --btn-positive-start: #009C3B; --btn-positive-end: #006B28;
  --bubble-sent-top: #009C3B; --bubble-sent-bottom: #006B28;
  --logo-part1-color: #FFDF00; --logo-part2-color: #009C3B;
}
body[data-preset="argentina"] {
  --bg-top: #74ACDF; --bg-mid: #4A7CB0; --bg-bottom: #1f3a5c;
  --stripe-count: 3; --stripe-1-color: #74ACDF; --stripe-2-color: #FFFFFF; --stripe-3-color: #74ACDF;
  --card-bg-1: rgba(116,172,223,0.55); --card-bg-2: rgba(31,58,92,0.85); --card-bg-3: rgba(246,180,14,0.12);
  --btn-primary-start: #CE1126; --btn-primary-end: #A00E1F;
  --btn-secondary-start: #74ACDF; --btn-secondary-end: #4A7CB0;
  --btn-positive-start: #F6B40E; --btn-positive-end: #C8920B;
  --bubble-sent-top: #74ACDF; --bubble-sent-bottom: #4A7CB0;
  --logo-part2-color: #F6B40E;
}
body[data-preset="spain"] {
  --bg-top: #AA151B; --bg-mid: #6B0D11; --bg-bottom: #3a0000;
  --stripe-count: 3; --stripe-1-color: #AA151B; --stripe-2-color: #F1BF00; --stripe-3-color: #AA151B;
  --card-bg-1: rgba(170,21,27,0.78); --card-bg-2: rgba(58,0,0,0.78); --card-bg-3: rgba(241,191,0,0.16);
  --btn-primary-start: #F1BF00; --btn-primary-end: #C99E00;
  --btn-secondary-start: #AA151B; --btn-secondary-end: #6B0D11;
  --bubble-sent-top: #AA151B; --bubble-sent-bottom: #6B0D11;
  --logo-part1-color: #F1BF00; --logo-part2-color: #FFFFFF;
}
body[data-preset="france"] {
  --bg-top: #0055A4; --bg-mid: #003B73; --bg-bottom: #001a3a;
  --stripe-count: 3; --stripe-1-color: #0055A4; --stripe-2-color: #FFFFFF; --stripe-3-color: #EF4135;
  --card-bg-1: rgba(0,85,164,0.85); --card-bg-2: rgba(0,26,58,0.78); --card-bg-3: rgba(239,65,53,0.12);
  --btn-primary-start: #EF4135; --btn-primary-end: #C03029;
  --btn-secondary-start: #0055A4; --btn-secondary-end: #003B73;
  --bubble-sent-top: #0055A4; --bubble-sent-bottom: #003B73;
  --logo-part2-color: #EF4135;
}
body[data-preset="italy"] {
  --bg-top: #008C45; --bg-mid: #006130; --bg-bottom: #003820;
  --stripe-count: 3; --stripe-1-color: #008C45; --stripe-2-color: #FFFFFF; --stripe-3-color: #CD212A;
  --card-bg-1: rgba(0,140,69,0.85); --card-bg-2: rgba(0,56,32,0.78); --card-bg-3: rgba(205,33,42,0.12);
  --btn-primary-start: #CD212A; --btn-primary-end: #A01A21;
  --btn-secondary-start: #008C45; --btn-secondary-end: #006130;
  --btn-positive-start: #008C45; --btn-positive-end: #006130;
  --bubble-sent-top: #008C45; --bubble-sent-bottom: #006130;
  --logo-part1-color: #008C45; --logo-part2-color: #CD212A;
}
body[data-preset="usa"] {
  --bg-top: #002868; --bg-mid: #001A50; --bg-bottom: #001244;
  --stripe-count: 3; --stripe-1-color: #BF0A30; --stripe-2-color: #FFFFFF; --stripe-3-color: #002868;
  --card-bg-1: rgba(0,40,104,0.92); --card-bg-2: rgba(0,18,68,0.78); --card-bg-3: rgba(191,10,48,0.12);
  --btn-primary-start: #BF0A30; --btn-primary-end: #8F0824;
  --btn-secondary-start: #002868; --btn-secondary-end: #001A50;
  --bubble-sent-top: #002868; --bubble-sent-bottom: #001A50;
  --logo-part2-color: #BF0A30;
}

/* ---- Unified country-preset visuals — read entirely from variables --- */
body[data-preset="dr"], body[data-preset="dominican"],
body[data-preset="bz"], body[data-preset="belize"],
body[data-preset="ht"], body[data-preset="haiti"],
body[data-preset="mexico"], body[data-preset="colombia"], body[data-preset="cuba"],
body[data-preset="pr"], body[data-preset="jamaica"], body[data-preset="venezuela"],
body[data-preset="brazil"], body[data-preset="argentina"], body[data-preset="spain"],
body[data-preset="france"], body[data-preset="italy"], body[data-preset="usa"],
body[data-preset="custom-country"] {
  background:
    radial-gradient(circle at var(--accent-1-pos), var(--accent-1-color), transparent 34%),
    radial-gradient(circle at var(--accent-2-pos), var(--accent-2-color), transparent 30%),
    linear-gradient(180deg, var(--bg-top) 0%, var(--bg-mid) 45%, var(--bg-bottom) 100%);
  background-attachment: fixed;
  color: var(--header-text-color);
}

/* Cards everywhere read from --card-* */
body[data-preset="dr"] .card, body[data-preset="dominican"] .card,
body[data-preset="bz"] .card, body[data-preset="belize"] .card,
body[data-preset="ht"] .card, body[data-preset="haiti"] .card,
body[data-preset="mexico"] .card, body[data-preset="colombia"] .card,
body[data-preset="cuba"] .card, body[data-preset="pr"] .card,
body[data-preset="jamaica"] .card, body[data-preset="venezuela"] .card,
body[data-preset="brazil"] .card, body[data-preset="argentina"] .card,
body[data-preset="spain"] .card, body[data-preset="france"] .card,
body[data-preset="italy"] .card, body[data-preset="usa"] .card,
body[data-preset="custom-country"] .card,
body[data-preset="dr"] .stealth-card, body[data-preset="dominican"] .stealth-card,
body[data-preset="bz"] .stealth-card, body[data-preset="belize"] .stealth-card,
body[data-preset="ht"] .stealth-card, body[data-preset="haiti"] .stealth-card,
body[data-preset="mexico"] .stealth-card, body[data-preset="colombia"] .stealth-card,
body[data-preset="cuba"] .stealth-card, body[data-preset="pr"] .stealth-card,
body[data-preset="jamaica"] .stealth-card, body[data-preset="venezuela"] .stealth-card,
body[data-preset="brazil"] .stealth-card, body[data-preset="argentina"] .stealth-card,
body[data-preset="spain"] .stealth-card, body[data-preset="france"] .stealth-card,
body[data-preset="italy"] .stealth-card, body[data-preset="usa"] .stealth-card,
body[data-preset="custom-country"] .stealth-card,
body[data-preset="dr"] .contact-code-block, body[data-preset="dominican"] .contact-code-block,
body[data-preset="bz"] .contact-code-block, body[data-preset="belize"] .contact-code-block,
body[data-preset="ht"] .contact-code-block, body[data-preset="haiti"] .contact-code-block,
body[data-preset="custom-country"] .contact-code-block,
body[data-preset="dr"] .public-profile-block, body[data-preset="dominican"] .public-profile-block,
body[data-preset="bz"] .public-profile-block, body[data-preset="belize"] .public-profile-block,
body[data-preset="ht"] .public-profile-block, body[data-preset="haiti"] .public-profile-block,
body[data-preset="custom-country"] .public-profile-block,
body[data-preset="dr"] .circle-invite-link-block, body[data-preset="dominican"] .circle-invite-link-block,
body[data-preset="bz"] .circle-invite-link-block, body[data-preset="belize"] .circle-invite-link-block,
body[data-preset="ht"] .circle-invite-link-block, body[data-preset="haiti"] .circle-invite-link-block,
body[data-preset="custom-country"] .circle-invite-link-block,
body[data-preset="dr"] .name-prompt, body[data-preset="dominican"] .name-prompt,
body[data-preset="bz"] .name-prompt, body[data-preset="belize"] .name-prompt,
body[data-preset="ht"] .name-prompt, body[data-preset="haiti"] .name-prompt,
body[data-preset="custom-country"] .name-prompt {
  background: linear-gradient(135deg, var(--card-bg-1), var(--card-bg-2), var(--card-bg-3)) !important;
  border: 1px solid var(--card-border) !important;
  border-radius: var(--card-radius) !important;
  box-shadow: var(--card-shadow) !important;
  backdrop-filter: blur(var(--card-blur)) !important;
  -webkit-backdrop-filter: blur(var(--card-blur)) !important;
  padding: var(--card-padding) !important;
}

/* Primary buttons */
body[data-preset="dr"] .stealth-card form button[type="submit"],
body[data-preset="dr"] .stealth-card #authSubmit,
body[data-preset="dr"] .send-form .send-submit,
body[data-preset="dr"] .primary-button,
body[data-preset="dr"] .action-btn-primary,
body[data-preset="dr"] .send-btn,
body[data-preset="dr"] .action-btn,
body[data-preset="dr"] .btn-primary,
body[data-preset="dr"] #addByCodeForm button[type="submit"],
body[data-preset="dr"] #newContactForm button[type="submit"],
body[data-preset="dominican"] .primary-button,
body[data-preset="dominican"] .action-btn-primary,
body[data-preset="bz"] .primary-button, body[data-preset="bz"] .action-btn-primary,
body[data-preset="belize"] .primary-button, body[data-preset="belize"] .action-btn-primary,
body[data-preset="ht"] .primary-button, body[data-preset="ht"] .action-btn-primary,
body[data-preset="haiti"] .primary-button, body[data-preset="haiti"] .action-btn-primary,
body[data-preset="mexico"] .primary-button, body[data-preset="colombia"] .primary-button,
body[data-preset="cuba"] .primary-button, body[data-preset="pr"] .primary-button,
body[data-preset="jamaica"] .primary-button, body[data-preset="venezuela"] .primary-button,
body[data-preset="brazil"] .primary-button, body[data-preset="argentina"] .primary-button,
body[data-preset="spain"] .primary-button, body[data-preset="france"] .primary-button,
body[data-preset="italy"] .primary-button, body[data-preset="usa"] .primary-button,
body[data-preset="custom-country"] .primary-button,
body[data-preset="custom-country"] .action-btn-primary {
  background: linear-gradient(135deg, var(--btn-primary-start), var(--btn-primary-end)) !important;
  color: #FFFFFF !important;
  border: 0 !important;
  border-radius: var(--btn-primary-radius) !important;
  font-weight: var(--btn-primary-weight) !important;
  box-shadow: 0 12px 30px rgba(var(--btn-primary-shadow-color), var(--btn-primary-shadow-intensity)) !important;
}

/* Secondary buttons */
body[data-preset="dr"] .secondary-button,
body[data-preset="dominican"] .secondary-button,
body[data-preset="bz"] .secondary-button, body[data-preset="belize"] .secondary-button,
body[data-preset="ht"] .secondary-button, body[data-preset="haiti"] .secondary-button,
body[data-preset="mexico"] .secondary-button, body[data-preset="colombia"] .secondary-button,
body[data-preset="cuba"] .secondary-button, body[data-preset="pr"] .secondary-button,
body[data-preset="jamaica"] .secondary-button, body[data-preset="venezuela"] .secondary-button,
body[data-preset="brazil"] .secondary-button, body[data-preset="argentina"] .secondary-button,
body[data-preset="spain"] .secondary-button, body[data-preset="france"] .secondary-button,
body[data-preset="italy"] .secondary-button, body[data-preset="usa"] .secondary-button,
body[data-preset="custom-country"] .secondary-button {
  background: linear-gradient(135deg, var(--btn-secondary-start), var(--btn-secondary-end)) !important;
  border: 1px solid var(--btn-secondary-border) !important;
  color: #F5F7FA !important;
  border-radius: var(--btn-primary-radius) !important;
}

/* Positive (green action) */
body[data-preset="dr"] .green-action,
body[data-preset="dominican"] .green-action,
body[data-preset="bz"] .green-action, body[data-preset="belize"] .green-action,
body[data-preset="ht"] .green-action, body[data-preset="haiti"] .green-action,
body[data-preset="mexico"] .green-action, body[data-preset="colombia"] .green-action,
body[data-preset="cuba"] .green-action, body[data-preset="pr"] .green-action,
body[data-preset="jamaica"] .green-action, body[data-preset="venezuela"] .green-action,
body[data-preset="brazil"] .green-action, body[data-preset="argentina"] .green-action,
body[data-preset="spain"] .green-action, body[data-preset="france"] .green-action,
body[data-preset="italy"] .green-action, body[data-preset="usa"] .green-action,
body[data-preset="custom-country"] .green-action {
  background: linear-gradient(135deg, var(--btn-positive-start), var(--btn-positive-end)) !important;
  color: #FFFFFF !important;
  border: 0 !important;
  border-radius: var(--btn-primary-radius) !important;
  font-weight: var(--btn-primary-weight) !important;
}

/* Sent message bubbles */
body[data-preset="dr"] .messages .bubble.me, body[data-preset="dr"] .messages .me .bubble, body[data-preset="dr"] .message.mine,
body[data-preset="dominican"] .messages .bubble.me, body[data-preset="dominican"] .message.mine,
body[data-preset="bz"] .messages .bubble.me, body[data-preset="bz"] .message.mine,
body[data-preset="belize"] .messages .bubble.me, body[data-preset="belize"] .message.mine,
body[data-preset="ht"] .messages .bubble.me, body[data-preset="ht"] .message.mine,
body[data-preset="haiti"] .messages .bubble.me, body[data-preset="haiti"] .message.mine,
body[data-preset="mexico"] .messages .bubble.me,
body[data-preset="colombia"] .messages .bubble.me,
body[data-preset="cuba"] .messages .bubble.me,
body[data-preset="pr"] .messages .bubble.me,
body[data-preset="jamaica"] .messages .bubble.me,
body[data-preset="venezuela"] .messages .bubble.me,
body[data-preset="brazil"] .messages .bubble.me,
body[data-preset="argentina"] .messages .bubble.me,
body[data-preset="spain"] .messages .bubble.me,
body[data-preset="france"] .messages .bubble.me,
body[data-preset="italy"] .messages .bubble.me,
body[data-preset="usa"] .messages .bubble.me,
body[data-preset="custom-country"] .messages .bubble.me,
body[data-preset="custom-country"] .message.mine {
  background: linear-gradient(180deg, var(--bubble-sent-top), var(--bubble-sent-bottom)) !important;
  color: var(--bubble-text-sent) !important;
  border-radius: var(--bubble-sent-radius) !important;
  padding: var(--bubble-padding) !important;
}

/* Flag-stripe divider — only shown if --stripe-show=1 */
body[data-preset="dr"] .flag-divider, body[data-preset="dominican"] .flag-divider,
body[data-preset="bz"] .flag-divider, body[data-preset="belize"] .flag-divider,
body[data-preset="ht"] .flag-divider, body[data-preset="haiti"] .flag-divider,
body[data-preset="mexico"] .flag-divider, body[data-preset="colombia"] .flag-divider,
body[data-preset="cuba"] .flag-divider, body[data-preset="pr"] .flag-divider,
body[data-preset="jamaica"] .flag-divider, body[data-preset="venezuela"] .flag-divider,
body[data-preset="brazil"] .flag-divider, body[data-preset="argentina"] .flag-divider,
body[data-preset="spain"] .flag-divider, body[data-preset="france"] .flag-divider,
body[data-preset="italy"] .flag-divider, body[data-preset="usa"] .flag-divider,
body[data-preset="custom-country"] .flag-divider {
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg,
    var(--stripe-1-color) 0%,
    var(--stripe-1-color) var(--stripe-1-width),
    var(--stripe-2-color) var(--stripe-1-width),
    var(--stripe-2-color) calc(var(--stripe-1-width) + var(--stripe-2-width)),
    var(--stripe-3-color) calc(var(--stripe-1-width) + var(--stripe-2-width)),
    var(--stripe-3-color) 100%);
  margin: 8px 0;
  width: 100%;
}

/* Country sign-in titleblock — wordmark uses logo color vars */
body[data-preset="dr"] .dr-signin-titleblock, body[data-preset="dominican"] .dr-signin-titleblock,
body[data-preset="bz"] .bz-signin-titleblock, body[data-preset="belize"] .bz-signin-titleblock,
body[data-preset="ht"] .ht-signin-titleblock, body[data-preset="haiti"] .ht-signin-titleblock,
body[data-preset="custom-country"] .country-signin-titleblock {
  text-align: center;
  margin: 4px 0 14px;
  color: var(--header-text-color);
}
body[data-preset="dr"] .dr-signin-titleblock .dr-app-name,
body[data-preset="dominican"] .dr-signin-titleblock .dr-app-name,
body[data-preset="bz"] .bz-signin-titleblock .bz-app-name,
body[data-preset="belize"] .bz-signin-titleblock .bz-app-name,
body[data-preset="ht"] .ht-signin-titleblock .ht-app-name,
body[data-preset="haiti"] .ht-signin-titleblock .ht-app-name {
  font-size: var(--logo-font-size);
  font-weight: var(--logo-font-weight);
  letter-spacing: 0.5px;
  color: var(--logo-part1-color);
}
body[data-preset="dr"] .dr-signin-titleblock .dr-app-name .dr-link,
body[data-preset="dominican"] .dr-signin-titleblock .dr-app-name .dr-link,
body[data-preset="bz"] .bz-signin-titleblock .bz-app-name .bz-link,
body[data-preset="belize"] .bz-signin-titleblock .bz-app-name .bz-link,
body[data-preset="ht"] .ht-signin-titleblock .ht-app-name .ht-link,
body[data-preset="haiti"] .ht-signin-titleblock .ht-app-name .ht-link {
  color: var(--logo-part2-color);
}
body[data-preset="dr"] .dr-signin-titleblock .dr-subtitle,
body[data-preset="dominican"] .dr-signin-titleblock .dr-subtitle,
body[data-preset="bz"] .bz-signin-titleblock .bz-subtitle,
body[data-preset="belize"] .bz-signin-titleblock .bz-subtitle,
body[data-preset="ht"] .ht-signin-titleblock .ht-subtitle,
body[data-preset="haiti"] .ht-signin-titleblock .ht-subtitle {
  font-size: var(--country-subtitle-size);
  color: var(--country-subtitle-color);
  font-family: var(--country-subtitle-font);
  margin-top: 2px;
}

/* Country invite footer */
body[data-preset="dr"] .dr-invite-footer, body[data-preset="dominican"] .dr-invite-footer,
body[data-preset="bz"] .bz-invite-footer, body[data-preset="belize"] .bz-invite-footer,
body[data-preset="ht"] .ht-invite-footer, body[data-preset="haiti"] .ht-invite-footer,
body[data-preset="custom-country"] .country-invite-footer {
  margin-top: 14px;
  font-size: 0.8rem;
  text-align: center;
  color: rgba(245,247,250,0.78);
  line-height: 1.4;
  white-space: pre-line;
}

/* Country subtitle */
body[data-preset="dr"] .country-subtitle, body[data-preset="dominican"] .country-subtitle,
body[data-preset="bz"] .country-subtitle, body[data-preset="belize"] .country-subtitle,
body[data-preset="ht"] .country-subtitle, body[data-preset="haiti"] .country-subtitle,
body[data-preset="mexico"] .country-subtitle, body[data-preset="colombia"] .country-subtitle,
body[data-preset="cuba"] .country-subtitle, body[data-preset="pr"] .country-subtitle,
body[data-preset="jamaica"] .country-subtitle, body[data-preset="venezuela"] .country-subtitle,
body[data-preset="brazil"] .country-subtitle, body[data-preset="argentina"] .country-subtitle,
body[data-preset="spain"] .country-subtitle, body[data-preset="france"] .country-subtitle,
body[data-preset="italy"] .country-subtitle, body[data-preset="usa"] .country-subtitle,
body[data-preset="custom-country"] .country-subtitle {
  color: var(--country-subtitle-color);
  font-family: var(--country-subtitle-font);
  font-size: var(--country-subtitle-size);
  text-align: center;
  margin: 8px 0;
}

/* Stealth mode top stripe — only when stripe-show is on */
body[data-preset="dr"].stealth::before, body[data-preset="dominican"].stealth::before,
body[data-preset="bz"].stealth::before, body[data-preset="belize"].stealth::before,
body[data-preset="ht"].stealth::before, body[data-preset="haiti"].stealth::before,
body[data-preset="custom-country"].stealth::before {
  content: "";
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 8px;
  background: linear-gradient(90deg,
    var(--stripe-1-color) 0%,
    var(--stripe-1-color) var(--stripe-1-width),
    var(--stripe-2-color) var(--stripe-1-width),
    var(--stripe-2-color) calc(var(--stripe-1-width) + var(--stripe-2-width)),
    var(--stripe-3-color) calc(var(--stripe-1-width) + var(--stripe-2-width)),
    var(--stripe-3-color) 100%);
  z-index: 60;
  pointer-events: none;
  opacity: var(--stripe-show, 1);
}

/* Country language-chip readability */
body[data-preset="dr"] .lang-button, body[data-preset="dominican"] .lang-button,
body[data-preset="bz"] .lang-button, body[data-preset="belize"] .lang-button,
body[data-preset="ht"] .lang-button, body[data-preset="haiti"] .lang-button {
  background: rgba(0,0,0,0.32);
  color: #F5F7FA;
  border-color: rgba(255,255,255,0.2);
}

@media (max-width: 480px) {
  body[data-preset="dr"], body[data-preset="dominican"],
  body[data-preset="bz"], body[data-preset="belize"],
  body[data-preset="ht"], body[data-preset="haiti"],
  body[data-preset="custom-country"] {
    background-attachment: scroll;
  }
}

body[data-preset="caribbean"] { --accent: #00bcd4; background: linear-gradient(135deg, #0a4d68, #088395, #05bfdb, #ffe66d) fixed; }
body[data-preset="midnight"] { --accent: #6c5ce7; background: radial-gradient(circle at 20% 80%, #1a1a2e, #0a0a14) fixed; }
body[data-preset="sunset"] { --accent: #ff6b6b; background: linear-gradient(135deg, #ff6b6b, #ffa500, #ffe66d) fixed; }
body[data-preset="minimal"] { --accent: #555; background: #f5f5f5; color: #222; }


/* ========================================================================== */
/* v37 Item 14 — Mobile spacing / layout polish.                              */
/* the app owner's iPhone screenshot: header pills overflow, contact "Open" too       */
/* dominant on red theme, "Link is LIVE" text wraps weirdly. Add tap-target   */
/* sizing + iOS safe-area handling.                                           */
/* ========================================================================== */

@media (max-width: 480px) {
  .right-group { gap: 4px; flex-wrap: wrap; }
  .right-group .lang-button { padding: 6px 8px; font-size: 0.78rem; }
  /* Show flag only — no "EN" code text on tight screens. */
  .right-group .lang-button #currentLangCode { display: none; }
  .right-group .install-pill { padding: 6px 8px; font-size: 0.78rem; }
  .app-header { padding: 6px 8px; gap: 4px; flex-wrap: wrap; }
  .user-group h1 { font-size: 1.1rem; }
  .status-toggle { padding: 4px 8px; font-size: 0.78rem; }

  .contact-row, .contact-row-v2 { padding: 10px 12px; gap: 6px; }
  .contact-row-v2 .link-pill-toggle { font-size: 0.68rem; padding: 2px 6px; }
  .contact-status { font-size: 0.7rem; gap: 4px; }

  .card, .contact-code-block, .public-profile-block, .circle-invite-link-block,
  .founding-block, .requests-block { padding: 12px; }

  /* Tap target floor — every interactive button gets 44px min. */
  button, .contact-row a, .help-trigger, .public-profile-edit, .broadcast-btn {
    min-height: 44px;
  }
  .request-item .request-actions button { min-height: 38px; font-size: 0.78rem; }

  /* iOS Safari home-bar safe area. */
  body { padding-bottom: env(safe-area-inset-bottom); }

  /* Pill row in contact card stacks vertically below the name. */
  .contact-row .contact-meta { flex-direction: column; align-items: flex-start; gap: 2px; }
}

@media (max-width: 360px) {
  /* Tighter still for iPhone SE / mini sizes. */
  .right-group .install-pill span { display: none; }
  .signout-btn span { display: none; }
  .contact-row-v2 .open-btn span { display: none; }
  .contact-row-v2 .open-btn::before { content: "▶"; }
  .app-header h1 { font-size: 1rem; }
}

/* When the sign-in screen is custom-themed via the `signin` scope, this
   hook lets app.js (or customization.js) set --signin-bg / --signin-accent
   without modifying the theme cascade for the rest of the app. */
body[data-scope="signin"] {
  background: var(--signin-bg, var(--bg));
}
body[data-scope="signin"] .auth-form-container,
body[data-scope="signin"] .signin-card {
  --accent: var(--signin-accent, var(--accent));
}

/* ============================================================
   v40 — fix the "Continue" button on the sign-in invite-code
   block (support: "the Continue button is rendering as a small
   red circle"). Force a proper pill shape with explicit width
   so nothing inherited from .stealth-card form button presses
   it into a 44x44 icon shape.
============================================================ */
.code-entry-block .code-continue-btn,
#codeEntryContinueBtn.code-continue-btn {
  display: inline-block;
  width: auto;
  min-width: 140px;
  max-width: 100%;
  padding: 12px 24px;
  margin-top: 8px;
  border: none;
  border-radius: 12px;            /* pill, NOT a circle */
  aspect-ratio: auto;             /* clobber any inherited 1/1 */
  background: linear-gradient(135deg, #CE1126, #EF233C);
  color: #FFFFFF;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  letter-spacing: 0.01em;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(206, 17, 38, 0.28);
  transition: transform 0.08s ease, box-shadow 0.16s ease, opacity 0.16s ease;
}
.code-entry-block .code-continue-btn:hover,
#codeEntryContinueBtn.code-continue-btn:hover { opacity: 0.95; }
.code-entry-block .code-continue-btn:active,
#codeEntryContinueBtn.code-continue-btn:active { transform: translateY(1px); }
.code-entry-block .code-continue-btn:disabled,
#codeEntryContinueBtn.code-continue-btn:disabled { opacity: 0.6; cursor: default; }

/* ============================================================
   v40 ITEM 9 — public profile editor gallery: unlimited cells
   with × delete + ↑↓ reorder controls and a trailing "+ Add"
   tile. Layout stays at 3 cells per row, scrolls vertically.
============================================================ */
.epp-gallery .epp-add-cell {
  font-size: 0.85rem;
  color: var(--muted);
  border-style: dashed;
}
.epp-gallery .epp-cell-actions {
  position: absolute;
  inset: auto 4px 4px auto;
  display: flex;
  gap: 4px;
  background: rgba(0,0,0,0.55);
  padding: 2px;
  border-radius: 999px;
}
.epp-gallery .epp-cell-actions button {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 0;
  background: rgba(255,255,255,0.16);
  color: #fff;
  cursor: pointer;
  font-size: 0.78rem;
  line-height: 1;
  padding: 0;
}
.epp-gallery .epp-cell-actions button.epp-remove {
  background: rgba(206,17,38,0.9);
}

/* ============================================================
   v40 ITEM 12 — support: "Just use the way you scroll in the
   messages part. It works fine." Replicate the .messages
   scroll pattern (flex: 1; overflow-y: auto; momentum scroll;
   overscroll-behavior contain) on every long-modal surface.
   The Customize panel was the offender; now every modal that
   can grow taller than its viewport gets the same treatment.
============================================================ */
.customize-modal,
.customize-panel,
.epp-card,
.tm-card,
.intake-card {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  scroll-behavior: smooth;
}
/* Ensure the customize panel itself doesn't have its own inner
   scroll fighting the modal's — flex-column lets the inner content
   own the scroll just like .messages does. */
.customize-modal { display: flex; flex-direction: column; }
.customize-panel { flex: 1; min-height: 0; }

/* ============================================================
   v40 ITEM 13 — support: "I don't like that the phone call 📞
   emoji is highlighted." Strip background / box-shadow / active
   tints from every emoji-as-button (voice call, video call,
   customize, install, sign-out icons). Keep only geometry +
   subtle 8% white hover/active.
============================================================ */
.chat-header .voice-btn-call,
.chat-header .video-btn,
.chat-header .chat-icon-btn.voice-btn-call,
.chat-header .chat-icon-btn.video-btn,
.app-header .chat-icon-btn,
.dashboard-customize-btn {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  border: none !important;
  color: inherit;
  font-family: inherit;  /* let system emoji font carry */
  cursor: pointer;
}
.chat-header .voice-btn-call:hover,
.chat-header .video-btn:hover,
.chat-header .chat-icon-btn:hover,
.app-header .chat-icon-btn:hover,
.dashboard-customize-btn:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  background-color: rgba(255, 255, 255, 0.08) !important;
  box-shadow: none !important;
  border: none !important;
}
.chat-header .voice-btn-call:active,
.chat-header .video-btn:active,
.chat-header .chat-icon-btn:active,
.app-header .chat-icon-btn:active,
.dashboard-customize-btn:active {
  background: rgba(255, 255, 255, 0.10) !important;
}
.chat-header .voice-btn-call:focus-visible,
.chat-header .video-btn:focus-visible,
.chat-header .chat-icon-btn:focus-visible,
.app-header .chat-icon-btn:focus-visible {
  outline: 2px solid rgba(255,255,255,0.4);
  outline-offset: 2px;
}

/* ===========================================================================
   v41 styles
   =========================================================================== */

/* ---- ITEM 2: Tone Library list ----------------------------------------- */
.contact-tone-library {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.contact-tone-library > summary {
  cursor: pointer;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text);
  list-style: none;
  padding: 6px 0;
}
.contact-tone-library > summary::-webkit-details-marker { display: none; }
.contact-tone-library-count { margin-left: 6px; font-weight: 400; }
.contact-tone-library-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 4px;
}
.tone-lib-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 12px;
  background: var(--card-2, rgba(255,255,255,0.03));
  border: 1px solid var(--border);
}
.tone-lib-meta { display: flex; gap: 8px; align-items: center; min-width: 0; flex: 1; }
.tone-lib-name { font-weight: 600; font-size: 0.9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tone-lib-len { font-size: 0.78rem; }
.tone-lib-type-badge {
  font-size: 0.68rem;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(59, 130, 246, 0.15);
  color: #93c5fd;
}
.tone-lib-actions { display: flex; gap: 4px; flex-wrap: wrap; }
.tone-lib-actions button {
  font-size: 0.74rem;
  padding: 5px 9px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  cursor: pointer;
}
.tone-lib-actions .tone-lib-preview { background: rgba(255,255,255,0.06); }
.tone-lib-actions .tone-lib-delete { background: transparent; color: var(--muted); border-color: transparent; font-size: 1rem; padding: 2px 8px; }
.tone-lib-actions .tone-lib-use-both { background: var(--accent); color: #fff; border-color: transparent; }

/* ---- ITEM 3 + ITEM 11: Rich post render + comments --------------------- */
.request-type-badge.post {
  margin-left: 8px;
  font-size: 0.7rem;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(59, 130, 246, 0.18);
  color: #93c5fd;
}
.post-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  margin: 8px 0;
}
.post-media {
  width: 100%;
  height: 100px;
  object-fit: cover;
  border-radius: 8px;
  cursor: pointer;
  background: var(--card-2);
}
.post-voice { margin: 6px 0; }
.post-voice audio { width: 100%; height: 36px; }
.post-location {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  margin: 6px 0;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--card-2);
  text-decoration: none;
  color: var(--text);
  font-size: 0.85rem;
}
.post-location-pin { font-size: 1rem; }
.post-link-card {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  margin: 6px 0;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--card-2);
  text-decoration: none;
  color: var(--text);
  font-size: 0.85rem;
}
.post-link-icon { font-size: 1rem; flex-shrink: 0; }
.post-link-meta { display: flex; flex-direction: column; min-width: 0; }
.post-link-host { font-weight: 600; }
.post-link-url { font-size: 0.74rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.post-longform {
  font-size: 0.95rem;
  line-height: 1.5;
  margin: 6px 0;
}
.post-longform h2 { font-size: 1.1rem; margin: 10px 0 4px; }
.post-longform h3 { font-size: 1rem; margin: 8px 0 4px; }
.post-longform h4 { font-size: 0.95rem; margin: 6px 0 2px; }
.post-longform p { margin: 4px 0; }
.post-longform ul { margin: 4px 0; padding-left: 18px; }
.post-longform blockquote {
  border-left: 3px solid var(--accent);
  padding-left: 10px;
  margin: 6px 0;
  color: var(--muted);
}
.post-longform code {
  font-family: ui-monospace, monospace;
  font-size: 0.86em;
  padding: 1px 5px;
  border-radius: 4px;
  background: rgba(255,255,255,0.06);
}
.post-longform-preview {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.post-readmore {
  background: transparent;
  border: 0;
  color: var(--accent);
  cursor: pointer;
  padding: 0;
  font-size: 0.82rem;
  font-weight: 600;
  margin-bottom: 4px;
}
.post-actions {
  display: flex;
  gap: 6px;
  margin: 8px 0 4px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}
.post-actions button {
  background: transparent;
  border: 0;
  color: var(--muted);
  cursor: pointer;
  font-size: 0.85rem;
  padding: 6px 10px;
  border-radius: 8px;
  transition: background 120ms, color 120ms;
}
.post-actions button:hover { background: rgba(255,255,255,0.05); color: var(--text); }
.post-actions .post-act-react.reacted { color: #f87171; }
.post-act-count { font-size: 0.75rem; opacity: 0.85; }
.post-comments {
  margin-top: 6px;
  padding-top: 8px;
  border-top: 1px dashed var(--border);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.post-comments-expand {
  background: transparent;
  border: 0;
  color: var(--accent);
  cursor: pointer;
  font-size: 0.8rem;
  text-align: left;
  padding: 0;
}
.post-comment {
  padding: 6px 8px;
  border-radius: 10px;
  background: var(--card-2);
}
.post-comment-meta {
  display: flex;
  gap: 8px;
  align-items: baseline;
  font-size: 0.78rem;
}
.post-comment-author { font-weight: 600; color: var(--text); }
.post-comment-time { color: var(--muted); }
.post-comment-body { font-size: 0.88rem; margin: 2px 0; word-wrap: break-word; }
.post-comment-actions { display: flex; gap: 6px; margin-top: 2px; }
.post-comment-actions button {
  background: transparent;
  border: 0;
  color: var(--muted);
  cursor: pointer;
  font-size: 0.75rem;
  padding: 2px 6px;
  border-radius: 6px;
}
.post-comment-actions button:hover { background: rgba(255,255,255,0.05); color: var(--text); }
.post-comment-replies { margin-top: 6px; margin-left: 14px; padding-left: 8px; border-left: 2px solid var(--border); }
.post-comment-composer {
  display: flex;
  gap: 6px;
  align-items: flex-end;
  margin-top: 4px;
}
.post-comment-input {
  flex: 1;
  resize: vertical;
  min-height: 32px;
  padding: 6px 10px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font-size: 0.88rem;
  font-family: inherit;
}
.post-comment-send {
  padding: 6px 12px;
  border-radius: 10px;
  border: 0;
  background: var(--accent);
  color: #fff;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.82rem;
}
.post-follow-prompt { font-size: 0.78rem; padding: 4px 6px; }
.post-comment-more {
  background: transparent;
  border: 0;
  color: var(--accent);
  cursor: pointer;
  padding: 0;
  font-size: 0.78rem;
}
.post-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.92);
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  cursor: pointer;
}
.post-lightbox img,
.post-lightbox video {
  max-width: 100%;
  max-height: 100%;
  border-radius: 8px;
}

/* ---- ITEM 7: Customize "Saved ✓" toast --------------------------------- */
.cz-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9100;
  padding: 10px 18px;
  border-radius: 999px;
  background: rgba(34, 197, 94, 0.95);
  color: #fff;
  font-weight: 600;
  font-size: 0.95rem;
  box-shadow: 0 6px 18px rgba(0,0,0,0.4);
  opacity: 1;
  transition: opacity 240ms, transform 240ms;
}
.cz-toast.cz-toast-out {
  opacity: 0;
  transform: translateX(-50%) translateY(8px);
}

/* ---- v60 LIVE-PREVIEW POLISH (was ITEM 13 dashboard fix) -------------
   support: "I get the live preview now. It makes sense how you did it in
   the messages. It's just clunky in the contact screen. It's a good idea
   just fix it."
   The v41 dashboard treatment was: collapsed-by-default <details>,
   transform: scale(.92) (cramped), max-height: 200px (clipped second
   row), hidden hint copy. All of that broke the see-as-you-tweak feel
   the messages preview delivers.
   Polish: open-by-default summary with a real "PREVIEW" pill (so users
   still know it isn't a real row), no scale/clip, hint copy restored,
   pointer-events stays off the inner block so taps pass through to the
   actual customize controls. Smooth color/background transitions on the
   preview rows + bubbles so accent / theme tweaks animate in. */

/* Universal polish — applies on every scope (incl. messages). Limited to
   transitions (purely visual) so this never changes layout in the
   messages surface support asked us not to touch. */
.cz-preview-bubble,
.cz-preview-contact-row,
.cz-preview-avatar,
.cz-preview-contact-pill,
.cz-preview-open {
  transition:
    background-color 180ms ease,
    background-image 180ms ease,
    color 180ms ease,
    border-color 180ms ease,
    border-radius 180ms ease,
    box-shadow 180ms ease;
}

/* "PREVIEW" pill in the summary — clarifies the rows aren't real, which
   is the only legitimate reason the v41 design hid the dashboard preview
   in the first place. Renders on every scope. */
.cz-live-preview-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  list-style: none;
  font-weight: 600;
  font-size: 0.92rem;
  padding: 4px 0;
}
.cz-live-preview-summary::-webkit-details-marker { display: none; }
.cz-live-preview-summary::before {
  content: "▾";
  display: inline-block;
  margin-right: 2px;
  transition: transform 150ms;
  color: var(--muted);
  font-size: 0.78rem;
}
details.live-preview-wrap:not([open]) > .cz-live-preview-summary::before {
  transform: rotate(-90deg);
}
.cz-live-preview-title { flex: 1 1 auto; }
.cz-live-preview-pill {
  flex: 0 0 auto;
  font-size: 0.62rem;
  letter-spacing: 0.8px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(115, 183, 70, 0.15);
  color: var(--accent, #73b746);
  border: 1px solid rgba(115, 183, 70, 0.35);
  text-transform: uppercase;
}

/* Dashboard scope ("contact screen") — match the messages preview
   visual rhythm, just with the contact-list mock as content. */
.live-preview-wrap[data-scope="dashboard"] {
  /* Inherit the .live-preview-wrap sticky/border-top defaults so the
     dashboard preview sits in the same footer slot as the messages one
     instead of as a separate boxed island. */
}
.live-preview-wrap[data-scope="dashboard"] .customize-preview {
  pointer-events: none;          /* preview is read-only */
  margin-top: 6px;
  /* Removed: transform: scale(.92), max-height: 200px, overflow: hidden,
     opacity: .95 — those were what made the contact-screen preview feel
     cramped. Natural sizing now. */
}
.live-preview-wrap[data-scope="dashboard"] .live-preview-hint {
  /* Restored — same framing copy the messages preview gets so users
     understand what they're looking at. */
  display: block;
}

/* ---- ITEM 17: Add to Circle pill (in-row, secondary action) ----------- */
.circle-pill.add-to-circle {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--accent);
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 0.74rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 120ms, color 120ms;
}
.circle-pill.add-to-circle:hover {
  background: var(--accent);
  color: #fff;
}
.circle-pill.add-to-circle:disabled {
  opacity: 0.55;
  cursor: progress;
}

/* ========================================================================
   v52 — Apps Drawer (📎 button on compose row)
   ------------------------------------------------------------------------
   Sliding container that lives ABOVE the .send-form. Tap 📎 → it expands
   into a horizontal scroll row of app icons. Tap an app → the row is
   replaced by that app's inline picker (search input, geolocate, send).
   The drawer hides itself after a successful share. */

.attach-btn {
  /* Repurposed for v52 as the apps-drawer toggle. Same visual weight as
     the send button — consistent affordance pair. */
  background: rgba(115, 183, 70, 0.10);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 999px;
  width: 40px;
  height: 40px;
  font-size: 1.1rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  transition: background 120ms, border-color 120ms;
}
.attach-btn:hover {
  background: rgba(115, 183, 70, 0.20);
  border-color: var(--accent);
}

.apps-drawer {
  background: var(--card-2, rgba(255,255,255,0.04));
  border-top: 1px solid var(--border);
}
.apps-drawer-row {
  display: flex;
  gap: 10px;
  padding: 12px 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.apps-drawer-app {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 70px;
  padding: 8px 6px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  color: var(--text);
  cursor: pointer;
  scroll-snap-align: start;
  font-family: inherit;
  transition: background 120ms, border-color 120ms;
}
.apps-drawer-app:hover {
  background: rgba(115, 183, 70, 0.10);
  border-color: var(--accent);
}
.apps-drawer-app-icon {
  font-size: 1.6rem;
  line-height: 1;
}
.apps-drawer-app-name {
  font-size: 0.7rem;
  font-weight: 600;
  text-align: center;
  white-space: nowrap;
  max-width: 60px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.apps-drawer-cog {
  opacity: 0.85;
}

/* Inline picker that replaces the icon row when an app is opened. */
.apps-picker {
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.apps-picker-head {
  display: flex;
  align-items: center;
  gap: 8px;
}
.apps-picker-icon {
  font-size: 1.2rem;
}
.apps-picker-title {
  flex: 1;
  font-weight: 700;
  font-size: 0.95rem;
}
.apps-picker-cancel {
  background: transparent;
  border: none;
  color: var(--text);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 8px;
  font-family: inherit;
}
.apps-picker-cancel:hover {
  background: rgba(255,255,255,0.06);
}
.apps-picker-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.apps-picker-input {
  width: 100%;
  height: 40px;
  padding: 8px 12px;
  background: var(--card);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 16px;
  font-family: inherit;
}
.apps-picker-input:focus {
  outline: none;
  border-color: var(--accent);
}
.apps-picker-status {
  font-size: 0.8rem;
  color: var(--muted, #888);
}
.apps-picker-status[data-kind="ok"]    { color: var(--accent); }
.apps-picker-status[data-kind="error"] { color: #d54a4a; }
.apps-picker-row {
  display: flex;
  gap: 8px;
}
.apps-picker-secondary {
  flex: 1;
  height: 36px;
  background: rgba(115, 183, 70, 0.10);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 10px;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 600;
}
.apps-picker-secondary:hover {
  background: rgba(115, 183, 70, 0.20);
  border-color: var(--accent);
}
.apps-picker-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}
.apps-picker-cancel-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 999px;
  padding: 0 18px;
  height: 36px;
  font-family: inherit;
  font-weight: 600;
  cursor: pointer;
}
.apps-picker-submit {
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 0 22px;
  height: 36px;
  font-family: inherit;
  font-weight: 700;
  cursor: pointer;
}
.apps-picker-submit:hover {
  background: #84c952;
}

/* Incoming apps-drawer message bubbles. */
.apps-map-card {
  display: flex;
  flex-direction: column;
  border-radius: 14px;
  overflow: hidden;
  background: #1c1c1c;
  border: 1px solid var(--border);
  max-width: 280px;
}
.apps-map-thumb-wrap {
  position: relative;
  width: 100%;
  height: 160px;
  background: #2a2a2a;
  display: block;
}
.apps-map-thumb {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.apps-map-thumb-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #888;
  font-size: 1.6rem;
}
.apps-map-pin {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -90%);
  font-size: 1.6rem;
  pointer-events: none;
  text-shadow: 0 1px 4px rgba(0,0,0,0.6);
}
.apps-map-meta {
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.apps-map-name {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--text);
  word-break: break-word;
}
.apps-map-coords {
  font-size: 0.78rem;
  color: var(--muted, #888);
}
.apps-map-open {
  display: inline-block;
  align-self: flex-start;
  margin-top: 4px;
  padding: 7px 14px;
  background: rgba(115, 183, 70, 0.15);
  color: var(--text);
  text-decoration: none;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 700;
  transition: background 120ms, border-color 120ms, color 120ms;
}
.apps-map-open:hover {
  background: rgba(115, 183, 70, 0.30);
  border-color: var(--accent);
  color: var(--accent);
}

/* ========================================================================== */
/* v61 — Mobile responsive header (icon-only pills).                          */
/*                                                                            */
/* SUPERSEDES v55. support compared desktop pills visible: 🇺🇸 EN /             */
/* 🎨 / ❓ / ⏻ Sign out to mobile (only 🎨 + ❓ visible, rest hidden          */
/* in a ⋯ More dropdown) and said "I like how it looks at the top right way   */
/* better than the mobile. Copy that for the mobile."                         */
/*                                                                            */
/* New approach: keep the pills inline on mobile, but render them ICON-ONLY   */
/* (no text labels) so they fit on a 375px viewport without overflow. The     */
/* ⋯ More menu DOM is kept (graceful fallback) but hidden at every viewport.  */
/* Desktop (≥ 481px) layout is untouched.                                     */
/* ========================================================================== */

/* The More button is hidden at every viewport now — every pill is reachable
   inline. Markup remains in the DOM so behaviour code stays a no-op-safe
   reference if someone hits an even narrower viewport in future.            */
#dashboardMoreBtn { display: none !important; }

.dashboard-more-menu {
  position: absolute;
  right: 8px;
  top: calc(100% + 6px);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 6px;
  min-width: 220px;
  max-width: calc(100vw - 24px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.dashboard-more-menu,
.dashboard-more-menu[hidden] { display: none; }
.more-menu-item {
  background: transparent;
  border: 0;
  border-radius: 8px;
  color: var(--text);
  padding: 10px 12px;
  font-size: 0.92rem;
  text-align: start;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  min-height: 44px;
  font-family: inherit;
}
.more-menu-item:hover { background: var(--card-2); }
.more-menu-item:active { background: rgba(255, 255, 255, 0.06); }
.more-menu-item > span:first-child {
  font-size: 1.1rem;
  width: 24px;
  text-align: center;
  flex: 0 0 24px;
}

@media (max-width: 480px) {
  /* Tighter spacing so icon pills + the user/status groups fit on iPhone
     widths. 32x32 each, with 4px gaps, fits inside the
     right-group column on a 375px viewport. flex-wrap: wrap is the safety
     net for ultra-narrow viewports (≤ 360px / older iPhone SE 1st gen):
     pills will gracefully wrap to a second row instead of overflowing. */
  .app-header > .right-group {
    gap: 4px;
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  /* Header pills stay visible — icon-only — no text labels. */
  .app-header > .right-group .lang-wrap,
  .app-header > .right-group #dashboardCustomizeBtn,
  .app-header > .right-group #dashboardHelpBtn,
  .app-header > .right-group #logoutBtn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
  }

  /* Lang pill — flag-only (the "EN" code text is hidden by the v37 rule
     above at line ~6370). Square 32x32 to match the icon pills next to it. */
  .app-header > .right-group .lang-button {
    width: 32px;
    height: 32px;
    padding: 0;
    margin: 0;
    min-height: 32px;
    border-radius: 999px;
    justify-content: center;
  }
  .app-header > .right-group .lang-button .flag { font-size: 1rem; line-height: 1; }

  /* 🎨 / ❓ — already 40x40 .chat-icon-btn at desktop. Shrink to 32x32
     on mobile so the pills fit. Drop the leading 8px margin so the gap rule
     governs spacing. */
  .app-header .chat-icon-btn {
    width: 32px;
    height: 32px;
    margin: 0;
    padding: 0;
    min-height: 32px;
    font-size: 0.95rem;
    line-height: 1;
  }

  /* Sign-out pill — icon-only (⏻). The translated text "⏻ Sign out" is
     baked into the i18n dictionary as part of the button's textContent
     (see lang.js line 2285 etc.), so we can't hide just the words via a
     child selector. Instead: zero out the button's font-size to wipe the
     text glyphs, then re-render the ⏻ glyph via ::before at full size. */
  .app-header > .right-group #logoutBtn {
    width: 32px;
    height: 32px;
    padding: 0;
    margin: 0;
    min-height: 32px;
    border-radius: 999px;
    font-size: 0;
    overflow: hidden;
    color: var(--text);
  }
  .app-header > .right-group #logoutBtn::before {
    content: "⏻";
    font-size: 1rem;
    line-height: 1;
    color: var(--text);
  }

  /* Header padding tightening — v37 already does this, restated here so
     the icon-only mobile geometry doesn't get squeezed by some other
     later-loaded skin override. */
  .app-header { padding: 6px 8px; column-gap: 6px; }
}

/* RTL: dropdown anchor unchanged (kept hidden anyway, but preserved for
   the future). */
[dir="rtl"] .dashboard-more-menu { right: auto; left: 8px; }

/* ========================================================================
   v63 (DirectoLink beta) — theme variables driven by ChatGPT mockup analysis
   for Dominican / Belize / Haiti presets. Each rule below is the literal
   `css_block` payload from the integration JSON. The matching CSS variables
   are written by customization.js apply() (see "v63: Theme variables"
   block) and also surfaced as user-tweakable Advanced controls
   (adv_headerStripePattern / adv_cardBg / adv_glowColor / adv_headerBadge
   / adv_themeWordmark).

   The defaults inherit from the existing --secondary / --accent / --card-bg
   palette so non-country presets (original / midnight / sunset / minimal /
   caribbean) keep painting without picking up DR / BZ / HT specifics.
   ======================================================================== */

/* --header-stripe-pattern — flag-style stripe under the chat header and
   along the top of cards. */
.theme-stripe, .chat-header::after, .card::before { content: ''; display: block; height: 4px; width: 100%; border-radius: 999px; background: var(--header-stripe-pattern); }

/* --card-gradient — multi-stop gradient background for any .card-like
   surface. Falls back to the existing --card-bg when no preset override. */
.card, .contact-card, .code-card, .settings-card { background: var(--card-gradient); border: 1px solid var(--border); backdrop-filter: blur(18px); box-shadow: 0 18px 45px rgba(0,0,0,0.32); }

/* --theme-glow-color — soft colored shadow around the primary CTA + send
   button + active nav pill so the country accent reads at distance. */
.primary-button, .send-button, .active-nav { box-shadow: 0 12px 30px var(--theme-glow-color); }

/* --theme-badge — flag emoji or any glyph rendered before the badge text
   (e.g. country pill in the chat header / signin hero). */
.theme-badge::before { content: var(--theme-badge); display: inline-flex; align-items: center; justify-content: center; font-size: 22px; }

/* --theme-wordmark — the country-specific wordmark string ("República
   Dominicana", "Belize", "Haïti", or the default "DirectoLink"). */
.theme-wordmark::before { content: var(--theme-wordmark); color: var(--gold); font-weight: 700; letter-spacing: 0.02em; }

/* Neutral surfaces must never inherit a stale country wordmark. Country
   presets still control this through body[data-preset="dr"/"belize"/etc.]. */
body:not([data-preset]) .theme-badge::before,
body[data-preset="original"] .theme-badge::before {
  content: "🔐" !important;
}
body:not([data-preset]) .theme-wordmark::before,
body[data-preset="original"] .theme-wordmark::before {
  content: "DirectoLink" !important;
}

/* ======================================================================
 * v64 — Stacked contact card layout at every viewport.
 *
 * support compared his desktop and mobile contact cards side-by-side and
 * said: "For the contact box it looks better on the mobile. So copy
 * that as the desktop one." Mobile already stacked into 4 rows:
 *
 *   [Avatar]
 *   [Name — full text, no truncation]
 *   [⭕ Invite to my Circle][🔗 Link is LIVE]
 *   [Open][⋯]
 *
 * Desktop instead crammed everything onto one horizontal row that
 * truncated the contact name to "Test...".
 *
 * Fix: hoist the mobile @media (max-width:480px) rules to the base so
 * the same stacked layout applies at 375 / 768 / 1280 / 1920 / 2560 px.
 * The v58 invite-circle-cluster (⭕ Invite + 🔗 Link is LIVE adjacent
 * to each other on a shared row) and the v56 Open button (always
 * visible) are both preserved.
 *
 * Notes on the flex math:
 *  - .contact-info gets flex: 1 1 100% so the name wraps to its own
 *    row beneath the avatar.
 *  - .contact-circle-cluster gets flex: 1 1 100% so the two pills
 *    sit on a row of their own (NOT alongside Open + ⋯) at every
 *    viewport — that's what support showed in the mobile screenshot.
 *  - .contact-name drops white-space:nowrap + overflow:hidden +
 *    text-overflow:ellipsis. Names like "Testing1" no longer
 *    truncate; long handles wrap to multiple lines instead.
 * ====================================================================== */
.contact-row.contact-row-v2 {
  flex-wrap: wrap;
  row-gap: 6px;
}
.contact-row.contact-row-v2 .contact-info {
  flex: 1 1 100%;
}
.contact-row.contact-row-v2 .contact-name {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  word-break: break-word;
  overflow-wrap: anywhere;
  -webkit-line-clamp: unset;
  display: block;
}
.contact-row.contact-row-v2 .contact-circle-cluster {
  flex: 1 1 100%;
  justify-content: flex-start;
  margin-left: 56px;
  min-width: 0;
}
.contact-row.contact-row-v2 .contact-open,
.contact-row.contact-row-v2 .contact-more {
  margin-left: 0;
}
/* Slightly tighter indent at the smallest viewport so the cluster
   doesn't get pushed off the right edge. */
@media (max-width: 380px) {
  .contact-row.contact-row-v2 .contact-circle-cluster { margin-left: 48px; }
}
/* End v64 stacked-layout block. */

/* ========================================================================
   v66 — Theme builder framework v2 (DirectoLink beta)

   Adds 11 CSS variables forming a complete theme paint surface:
     --theme-page-bg, --card-gradient, --header-stripe-pattern,
     --theme-badge, --theme-wordmark, --theme-glow-color,
     --primary-button-gradient, --positive-button-gradient,
     --chat-bubble-gradient, --active-nav-color, --background-art

   Defaults inherit from existing palette tokens so non-country presets
   (original / caribbean / midnight / sunset / minimal) keep painting
   correctly without picking up DR / BZ / HT specifics.

   This block is the verbatim ChatGPT spec — selectors and values are
   intentionally untouched from the integration JSON. customization.js
   apply() drives the variable values, with i18n preserved for the
   theme-wordmark via THEME_WORDMARKS lookup (v65 logic).
   ======================================================================== */

/* v66 — Theme builder framework v2 */
:root {
  --theme-page-bg: var(--bg);
  --card-gradient: var(--card-bg);
  --header-stripe-pattern: linear-gradient(90deg, var(--secondary), var(--accent));
  --theme-badge: "🔐";
  --theme-wordmark: "DirectoLink";
  --theme-glow-color: rgba(59,130,246,0.35);
  --primary-button-gradient: linear-gradient(135deg, var(--accent), var(--secondary));
  --positive-button-gradient: linear-gradient(135deg, #10B981, #22C55E);
  --chat-bubble-gradient: var(--bubble-me);
  --active-nav-color: var(--accent);
  --background-art: none;
}

body,
.app,
.page,
.chat-page,
.contacts-page,
.login-page {
  background: var(--theme-page-bg) !important;
}

body::before,
.app::before,
.page::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: var(--background-art);
  opacity: 0.18;
  z-index: 0;
}

.card,
.contact-card,
.code-card,
.settings-card,
.profile-card,
.login-card {
  background: var(--card-gradient) !important;
  border: 1px solid var(--border);
  backdrop-filter: blur(18px);
  box-shadow: 0 18px 45px rgba(0,0,0,0.32);
}

.theme-stripe,
.chat-header::after,
.login-card::before,
.code-card::before,
.profile-card::before {
  content: "";
  display: block;
  height: 4px;
  width: 100%;
  border-radius: 999px;
  background: var(--header-stripe-pattern);
}

.theme-badge::before {
  content: var(--theme-badge);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
}

.theme-wordmark::before {
  content: var(--theme-wordmark);
  color: var(--gold);
  font-weight: 800;
  letter-spacing: 0.03em;
}

.primary-button,
.sign-in-button,
.send-button {
  background: var(--primary-button-gradient) !important;
  box-shadow: 0 12px 30px var(--theme-glow-color);
}

.positive-button,
.add-contact-button,
.available-indicator {
  background: var(--positive-button-gradient) !important;
}

.message.me,
.bubble.me,
.chat-bubble.me {
  background: var(--chat-bubble-gradient) !important;
  color: var(--bubble-me-text);
}

.nav-item.active,
.bottom-nav .active,
.active-nav {
  color: var(--active-nav-color) !important;
}

.nav-item.active svg,
.bottom-nav .active svg {
  color: var(--active-nav-color) !important;
}

.voice-play-button,
.mic-button {
  background: var(--accent) !important;
  box-shadow: 0 8px 20px var(--theme-glow-color);
}
/* End v66 theme builder framework v2 block. */

/* ============================================================
   V69 — STICKY DONE FOOTER (DirectoLink beta fix)
   ----------------------------------------------------------------
   Bug: the customize panel's Done button sat at y=3080 in the
   page (below the viewport) because content overflowed OUT of
   the modal instead of scrolling INSIDE it. The modal had
   clientHeight = scrollHeight, so its overflow-y:auto did
   nothing — the page itself scrolled instead.
   Fix:
     1. Lock the modal to a max-height (≤ 90vh) and clip its
        overflow so the page never grows past the viewport.
     2. Make the panel the scrolling element inside the modal.
     3. Sticky-pin the footer to the bottom of the panel's
        scroll viewport so the Done button is always reachable.
   These rules come AFTER the v40 ITEM 12 block on purpose —
   the cascade picks the later, more specific declarations and
   the v40 flex-column scaffold still applies on the modal.
============================================================ */
.customize-modal {
  display: flex;
  flex-direction: column;
  max-height: 90vh;
  overflow: hidden;
}
@media (min-width: 600px) {
  .customize-modal { max-height: 90vh; }
}
.customize-panel {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.customize-footer {
  flex: 0 0 auto;
  position: sticky;
  bottom: 0;
  background: var(--card, #1a1b23);
  padding: 12px 16px;
  margin: 16px -18px 0;            /* cancel the panel's 18px side padding so footer spans full width */
  border-top: 1px solid var(--border, rgba(255, 255, 255, 0.08));
  display: flex;
  gap: 8px;
  justify-content: space-between;  /* keep Reset on the left, Done on the right (matches v59 layout) */
  z-index: 10;
}
.cz-done {
  padding: 10px 24px;
  font-weight: 600;
}
/* End V69 sticky-done-footer block. */

/* v95 — Customization Studio polish. The art button should feel like a
   design surface, not a long settings form. Voice controls are intentionally
   left alone in customization.js; this layer only improves layout, page
   targeting, previews, saved-theme actions, and mobile spacing. */
.customize-modal {
  max-width: min(760px, 100vw);
  background:
    radial-gradient(circle at 10% 0%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 34%),
    color-mix(in srgb, var(--card) 96%, #000 4%);
  border-color: color-mix(in srgb, var(--accent) 22%, var(--border) 78%);
}

.customize-panel {
  padding: 18px 18px 24px;
}

.customize-head {
  position: sticky;
  top: 0;
  z-index: 9;
  margin: -18px -18px 12px;
  padding: 16px 18px 12px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--card) 96%, #000 4%) 0%, color-mix(in srgb, var(--card) 82%, transparent) 100%);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 16%, var(--border) 84%);
}

.customize-head h3 {
  font-size: clamp(1.05rem, 2vw, 1.28rem);
  font-weight: 950;
  letter-spacing: 0;
}

.customize-close {
  width: 36px;
  height: 36px;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255,255,255,0.07);
}

.customize-section {
  border-top-color: color-mix(in srgb, var(--accent) 12%, var(--border-soft) 88%);
}

.customize-scope-banner {
  border-radius: 18px;
  padding: 14px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 16%, transparent), rgba(255,255,255,0.035)),
    color-mix(in srgb, var(--card-2) 88%, transparent);
  box-shadow: 0 18px 40px rgba(0,0,0,0.18);
}

.cz-command-center {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--accent) 20%, var(--border) 80%);
  border-radius: 18px;
  background:
    radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--accent) 13%, transparent), transparent 34%),
    color-mix(in srgb, var(--card) 88%, transparent);
}

.cz-command-copy {
  display: grid;
  gap: 5px;
}

.cz-command-kicker {
  width: fit-content;
  padding: 5px 9px;
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border) 70%);
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--text);
  font-size: 0.68rem;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0;
}

.cz-command-copy h4 {
  margin: 0;
  color: var(--text);
  font-size: clamp(1.12rem, 3vw, 1.45rem);
  font-weight: 950;
  text-transform: none;
  letter-spacing: 0;
}

.cz-command-copy p {
  margin: 0;
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.42;
}

.cz-scope-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.cz-scope-card {
  min-height: 112px;
  border: 1px solid color-mix(in srgb, var(--accent) 16%, var(--border) 84%);
  border-radius: 16px;
  padding: 12px;
  text-align: left;
  color: var(--text);
  background:
    linear-gradient(145deg, rgba(255,255,255,0.08), rgba(255,255,255,0.025));
  display: grid;
  align-content: start;
  gap: 5px;
  cursor: pointer;
  box-shadow: 0 12px 28px rgba(0,0,0,0.12);
}

.cz-scope-card small {
  color: color-mix(in srgb, var(--accent) 78%, #fff 22%);
  font-size: 0.68rem;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0;
}

.cz-scope-card strong {
  font-size: 0.92rem;
  font-weight: 950;
}

.cz-scope-card span {
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.3;
}

.cz-scope-card:hover,
.cz-scope-card.active {
  border-color: color-mix(in srgb, var(--accent) 64%, #fff 12%);
  background:
    radial-gradient(circle at 12% 0%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 46%),
    linear-gradient(145deg, rgba(255,255,255,0.11), rgba(255,255,255,0.035));
  transform: translateY(-1px);
}

.cz-scope-card.active::after {
  content: "Editing";
  width: fit-content;
  margin-top: 2px;
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--primary-button-gradient, var(--accent));
  color: #fff;
  font-size: 0.68rem;
  font-weight: 950;
}

.cz-style-preview {
  min-height: 250px;
  border-radius: 22px;
  border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--border) 78%);
  padding: 12px;
  overflow: hidden;
  background:
    var(--background-art, none),
    var(--theme-page-bg, var(--bg));
  background-size: var(--theme-background-art-size, cover), cover;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.09), 0 20px 48px rgba(0,0,0,0.20);
}

.cz-style-preview-top {
  height: 38px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 4px;
}

.cz-style-preview-top i {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent);
}

.cz-style-preview-top span {
  color: var(--text);
  font-size: 0.78rem;
  font-weight: 950;
}

.cz-style-preview-top b {
  margin-left: auto;
  width: 62px;
  height: 5px;
  border-radius: 999px;
  background: var(--header-stripe-pattern, var(--accent));
}

.cz-style-preview-card {
  margin-top: 10px;
  padding: 14px;
  border-radius: var(--contact-card-radius, 18px);
  border: 1px solid var(--theme-outline-color, var(--border));
  background: var(--card-gradient, rgba(255,255,255,0.08));
  display: grid;
  gap: 8px;
}

.cz-style-preview-card strong {
  color: var(--text);
  font-size: 1rem;
  font-weight: 950;
}

.cz-style-preview-card span {
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.34;
}

.cz-style-preview-card button {
  justify-self: start;
  border: 0;
  border-radius: 999px;
  padding: 8px 12px;
  color: #fff;
  background: var(--primary-button-gradient, var(--accent));
  font-weight: 900;
}

.cz-style-preview-bubbles {
  display: grid;
  gap: 8px;
  margin-top: 14px;
}

.cz-style-preview-bubbles span {
  width: fit-content;
  max-width: 82%;
  padding: 9px 12px;
  border-radius: var(--bubble-radius, 18px);
  font-size: 0.82rem;
  box-shadow: 0 10px 24px rgba(0,0,0,0.16);
}

.cz-style-preview-bubbles .them {
  background: var(--bubble-them);
  color: var(--bubble-them-text, var(--text));
}

.cz-style-preview-bubbles .me {
  justify-self: end;
  background: var(--chat-bubble-gradient, var(--bubble-me));
  color: var(--bubble-me-text, #fff);
}

.cz-presets-section {
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--accent) 16%, var(--border) 84%);
  border-radius: 18px;
  background: color-mix(in srgb, var(--card) 86%, transparent);
}

.cz-presets-section h4 {
  color: var(--text);
  font-size: 0.92rem;
  font-weight: 950;
  text-transform: none;
  letter-spacing: 0;
}

.cz-presets-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.cz-preset-chip {
  min-height: 42px;
  border-radius: 14px;
  padding: 9px 11px;
  font-weight: 900;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.09), rgba(255,255,255,0.025));
}

.cz-preset-chip.active {
  border-color: color-mix(in srgb, var(--accent) 72%, #fff 14%);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 22%, transparent);
}

.cz-saved-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}

.cz-saved-actions button {
  min-height: 40px;
  padding: 8px 10px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--accent) 16%, var(--border) 84%);
  background: color-mix(in srgb, var(--card-2) 88%, transparent);
  color: var(--text);
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 900;
}

.cz-save-theme {
  background: var(--primary-button-gradient, var(--accent)) !important;
  border-color: transparent !important;
  color: #fff !important;
}

.cz-advanced-section {
  border-radius: 20px;
  padding: 14px;
}

.cz-advanced-hero {
  border-radius: 18px;
  padding: 16px;
}

.cz-advanced-hero h4 {
  font-size: clamp(1.18rem, 3vw, 1.55rem);
  font-weight: 950;
}

.cz-adv-recipe-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.cz-adv-recipe {
  min-height: 132px;
  border-radius: 18px;
  padding: 12px;
  align-content: start;
}

.cz-adv-recipe strong {
  font-size: 0.98rem;
  font-weight: 950;
}

.cz-adv-recipe small {
  font-size: 0.76rem;
}

.cz-adv-group {
  border-radius: 16px;
  padding: 7px 12px;
}

.cz-adv-group > summary span {
  font-weight: 950;
}

.cz-adv-row {
  padding: 9px 0;
}

.cz-adv-row select,
.cz-adv-row input[type="color"],
.cz-adv-row input[type="text"],
.cz-adv-row textarea {
  border-radius: 10px;
  padding: 8px 10px;
  background: var(--theme-input-gradient, var(--card-2));
}

@media (min-width: 720px) {
  .cz-command-center {
    grid-template-columns: minmax(0, 1fr) 260px;
    align-items: start;
  }

  .cz-command-copy,
  .cz-scope-cards {
    grid-column: 1;
  }

  .cz-style-preview {
    grid-column: 2;
    grid-row: 1 / span 2;
  }
}

@media (max-width: 540px) {
  .customize-modal {
    max-height: 94vh;
    border-radius: 22px 22px 0 0;
  }

  .customize-panel {
    padding: 14px 14px 22px;
  }

  .customize-head {
    margin: -14px -14px 10px;
    padding: 14px;
  }

  .cz-scope-cards,
  .cz-presets-row,
  .cz-adv-recipe-grid,
  .cz-saved-actions {
    grid-template-columns: 1fr;
  }

  .cz-style-preview {
    min-height: 220px;
  }
}


/* ========================================================================
   v70 — Country mockup precision layer + builder surfaces
   Added by ChatGPT for support. This layer uses the advanced variables exposed
   in the 🎨 menu so Dominican, Belize, and Haiti can be recreated from knobs,
   not hardcoded one-off CSS.
   ======================================================================== */
:root {
  --theme-hero-art: none;
  --theme-hero-art-opacity: 0;
  --theme-art-opacity: 0.18;
  --theme-script-color: var(--gold);
  --theme-script-font: Inter, ui-sans-serif, system-ui, -apple-system, sans-serif;
  --theme-input-gradient: rgba(255,255,255,0.06);
  --theme-surface-gradient: rgba(255,255,255,0.06);
  --theme-symbol-accent: "";
  --theme-badge-ring-gradient: var(--header-stripe-pattern);
  --theme-outline-color: var(--border);
}
body[data-preset="dr"], body[data-preset="bz"], body[data-preset="ht"] {
  background: var(--theme-page-bg) !important;
  color: #F5F7FA;
}
body[data-preset="dr"]::before,
body[data-preset="bz"]::before,
body[data-preset="ht"]::before {
  background: var(--background-art) !important;
  opacity: var(--theme-art-opacity) !important;
  mix-blend-mode: screen;
}
body[data-preset="dr"] .stealth-card,
body[data-preset="bz"] .stealth-card,
body[data-preset="ht"] .stealth-card {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(0,0,0,0.08), rgba(0,0,0,0.34)), var(--theme-surface-gradient) !important;
  border: 1px solid var(--theme-outline-color) !important;
  box-shadow: 0 28px 80px rgba(0,0,0,0.38) !important;
}
body[data-preset="dr"] .stealth-card::before,
body[data-preset="bz"] .stealth-card::before,
body[data-preset="ht"] .stealth-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 44%;
  background: var(--theme-hero-art);
  opacity: var(--theme-hero-art-opacity);
  pointer-events: none;
  z-index: 0;
}
body[data-preset="dr"] .stealth-card > *,
body[data-preset="bz"] .stealth-card > *,
body[data-preset="ht"] .stealth-card > * { position: relative; z-index: 1; }
body[data-preset="dr"] .theme-header-row,
body[data-preset="bz"] .theme-header-row,
body[data-preset="ht"] .theme-header-row { display: none !important; }
body[data-preset="dr"] .dr-signin-titleblock,
body[data-preset="bz"] .bz-signin-titleblock,
body[data-preset="ht"] .ht-signin-titleblock {
  padding-top: 64px;
  margin-bottom: 18px !important;
}
body[data-preset="dr"] .dr-flag,
body[data-preset="bz"] .bz-flag,
body[data-preset="ht"] .ht-flag,
body[data-preset="dr"] .theme-badge::before,
body[data-preset="bz"] .theme-badge::before,
body[data-preset="ht"] .theme-badge::before {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.94);
  box-shadow: 0 0 0 4px transparent, 0 18px 44px rgba(0,0,0,0.34);
  border: 3px solid transparent;
  background-image: linear-gradient(#fff,#fff), var(--theme-badge-ring-gradient);
  background-origin: border-box;
  background-clip: content-box, border-box;
  font-size: 54px;
  margin-bottom: 12px;
}
body[data-preset="dr"] .dr-app-name,
body[data-preset="bz"] .bz-app-name,
body[data-preset="ht"] .ht-app-name {
  font-size: 42px !important;
  line-height: 1.02;
  text-shadow: 0 4px 24px rgba(0,0,0,0.55);
}
body[data-preset="bz"] .theme-wordmark::before,
body[data-preset="ht"] .theme-wordmark::before,
body[data-preset="bz"] .bz-app-name::after,
body[data-preset="ht"] .ht-app-name::after {
  color: var(--theme-script-color) !important;
  font-family: var(--theme-script-font) !important;
  font-style: italic;
}
body[data-preset="dr"] .flag-divider,
body[data-preset="bz"] .belize-divider,
body[data-preset="ht"] .haiti-divider,
body[data-preset="dr"] .theme-stripe,
body[data-preset="bz"] .theme-stripe,
body[data-preset="ht"] .theme-stripe {
  height: 4px !important;
  width: min(260px, 78%) !important;
  margin: 12px auto !important;
  background: var(--header-stripe-pattern) !important;
  position: relative;
  overflow: visible;
}
body[data-preset="dr"] .flag-divider::after,
body[data-preset="bz"] .belize-divider::after,
body[data-preset="ht"] .haiti-divider::after,
body[data-preset="dr"] .theme-stripe::after,
body[data-preset="bz"] .theme-stripe::after,
body[data-preset="ht"] .theme-stripe::after,
body[data-preset="dr"] .chat-header::after,
body[data-preset="bz"] .chat-header::after,
body[data-preset="ht"] .chat-header::after,
body[data-preset="dr"] .contact-code-block::before,
body[data-preset="bz"] .contact-code-block::before,
body[data-preset="ht"] .contact-code-block::before,
body[data-preset="dr"] .circle-invite-link-block::before,
body[data-preset="bz"] .circle-invite-link-block::before,
body[data-preset="ht"] .circle-invite-link-block::before {
  content: var(--theme-symbol-accent);
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: #fff;
  background: var(--theme-badge-ring-gradient);
  box-shadow: 0 0 0 2px rgba(255,255,255,0.18), 0 6px 18px rgba(0,0,0,0.3);
}
body[data-preset="dr"] input,
body[data-preset="bz"] input,
body[data-preset="ht"] input,
body[data-preset="dr"] textarea,
body[data-preset="bz"] textarea,
body[data-preset="ht"] textarea {
  background: var(--theme-input-gradient) !important;
  border-color: var(--theme-outline-color) !important;
  color: #F5F7FA !important;
}
body[data-preset="dr"] .contact-row,
body[data-preset="bz"] .contact-row,
body[data-preset="ht"] .contact-row,
body[data-preset="dr"] .public-profile-block,
body[data-preset="bz"] .public-profile-block,
body[data-preset="ht"] .public-profile-block,
body[data-preset="dr"] .contact-code-block,
body[data-preset="bz"] .contact-code-block,
body[data-preset="ht"] .contact-code-block,
body[data-preset="dr"] .circle-invite-link-block,
body[data-preset="bz"] .circle-invite-link-block,
body[data-preset="ht"] .circle-invite-link-block,
body[data-preset="dr"] .name-prompt,
body[data-preset="bz"] .name-prompt,
body[data-preset="ht"] .name-prompt,
body[data-preset="dr"] .card,
body[data-preset="bz"] .card,
body[data-preset="ht"] .card {
  background: var(--card-gradient) !important;
  border: 1px solid var(--theme-outline-color) !important;
  box-shadow: 0 18px 45px rgba(0,0,0,0.32) !important;
  backdrop-filter: blur(18px);
}
body[data-preset="dr"] .contact-code-block,
body[data-preset="bz"] .contact-code-block,
body[data-preset="ht"] .contact-code-block,
body[data-preset="dr"] .circle-invite-link-block,
body[data-preset="bz"] .circle-invite-link-block,
body[data-preset="ht"] .circle-invite-link-block { position: relative; overflow: hidden; }
body[data-preset="dr"] .contact-code-block::before,
body[data-preset="bz"] .contact-code-block::before,
body[data-preset="ht"] .contact-code-block::before,
body[data-preset="dr"] .circle-invite-link-block::before,
body[data-preset="bz"] .circle-invite-link-block::before,
body[data-preset="ht"] .circle-invite-link-block::before {
  top: 0;
  left: 50%;
}
body[data-preset="dr"] .contact-code-block::after,
body[data-preset="bz"] .contact-code-block::after,
body[data-preset="ht"] .contact-code-block::after,
body[data-preset="dr"] .circle-invite-link-block::after,
body[data-preset="bz"] .circle-invite-link-block::after,
body[data-preset="ht"] .circle-invite-link-block::after,
body[data-preset="dr"] .chat-header::after,
body[data-preset="bz"] .chat-header::after,
body[data-preset="ht"] .chat-header::after {
  content: "";
  display: block;
  height: 4px;
  width: 100%;
  border-radius: 999px;
  background: var(--header-stripe-pattern);
}
body[data-preset="dr"] #addByCodeForm button[type="submit"],
body[data-preset="bz"] #addByCodeForm button[type="submit"],
body[data-preset="ht"] #addByCodeForm button[type="submit"],
body[data-preset="dr"] #newContactForm button[type="submit"],
body[data-preset="bz"] #newContactForm button[type="submit"],
body[data-preset="ht"] #newContactForm button[type="submit"] {
  background: var(--positive-button-gradient) !important;
  border: 0 !important;
  color: #fff !important;
  box-shadow: 0 10px 28px var(--theme-glow-color);
}
body[data-preset="dr"] #authSubmit,
body[data-preset="bz"] #authSubmit,
body[data-preset="ht"] #authSubmit,
body[data-preset="dr"] .contact-open,
body[data-preset="bz"] .contact-open,
body[data-preset="ht"] .contact-open,
body[data-preset="dr"] .send-submit,
body[data-preset="bz"] .send-submit,
body[data-preset="ht"] .send-submit {
  background: var(--primary-button-gradient) !important;
  color: #fff !important;
  box-shadow: 0 12px 30px var(--theme-glow-color) !important;
}
body[data-preset="dr"] .copy-btn,
body[data-preset="bz"] .copy-btn,
body[data-preset="ht"] .copy-btn,
body[data-preset="dr"] .secondary-button,
body[data-preset="bz"] .secondary-button,
body[data-preset="ht"] .secondary-button {
  background: linear-gradient(135deg, var(--secondary), color-mix(in srgb, var(--secondary) 72%, #ffffff 18%)) !important;
  border-color: var(--theme-outline-color) !important;
}
body[data-preset="dr"] .bubble.me,
body[data-preset="bz"] .bubble.me,
body[data-preset="ht"] .bubble.me,
body[data-preset="dr"] .message.me,
body[data-preset="bz"] .message.me,
body[data-preset="ht"] .message.me {
  background: var(--chat-bubble-gradient) !important;
  color: var(--bubble-me-text) !important;
  box-shadow: 0 12px 35px rgba(0,0,0,0.30);
}
body[data-preset="dr"] .media-placeholder audio,
body[data-preset="bz"] .media-placeholder audio,
body[data-preset="ht"] .media-placeholder audio { accent-color: var(--accent); }
body[data-preset="dr"] .status-dot,
body[data-preset="bz"] .status-dot,
body[data-preset="ht"] .status-dot,
body[data-preset="dr"] .status-online .status-dot,
body[data-preset="bz"] .status-online .status-dot,
body[data-preset="ht"] .status-online .status-dot { background: var(--gold) !important; }
body[data-preset="dr"] .bottom-nav .active,
body[data-preset="bz"] .bottom-nav .active,
body[data-preset="ht"] .bottom-nav .active,
body[data-preset="dr"] .nav-item.active,
body[data-preset="bz"] .nav-item.active,
body[data-preset="ht"] .nav-item.active { color: var(--active-nav-color) !important; }
@media (max-width: 520px) {
  body[data-preset="dr"] .dr-signin-titleblock,
  body[data-preset="bz"] .bz-signin-titleblock,
  body[data-preset="ht"] .ht-signin-titleblock { padding-top: 54px; }
  body[data-preset="dr"] .dr-flag,
  body[data-preset="bz"] .bz-flag,
  body[data-preset="ht"] .ht-flag { width: 84px; height: 84px; font-size: 48px; }
  body[data-preset="dr"] .dr-app-name,
  body[data-preset="bz"] .bz-app-name,
  body[data-preset="ht"] .ht-app-name { font-size: 36px !important; }
}
/* End v70 mockup precision layer. */


/* Codex public-profile redesign merge from V72 */
/* Codex public-profile */
.pp-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: color-mix(in srgb, var(--card-2) 82%, transparent);
  overflow: hidden;
}
.pp-stats > div,
.pp-stats > button {
  min-width: 0;
  padding: 10px 6px;
  text-align: center;
  border-inline-start: 1px solid var(--border);
}
.pp-stats > div:first-child,
.pp-stats > button:first-child { border-inline-start: 0; }
.pp-stat-btn {
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font: inherit;
}
.pp-stats > .pp-stat-btn + .pp-stat-btn { border-inline-start: 1px solid var(--border); }
.pp-stat-btn:hover,
.pp-stat-btn:focus-visible {
  background: color-mix(in srgb, var(--pp-accent, var(--accent)) 12%, transparent);
  outline: 0;
}
.pp-stats strong {
  display: block;
  color: var(--text);
  font-size: 1rem;
  line-height: 1.15;
}
.pp-stats span {
  display: block;
  color: var(--muted);
  font-size: 0.75rem;
  line-height: 1.2;
  margin-top: 2px;
  overflow-wrap: anywhere;
}
.pp-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin: 0 16px 14px;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card);
}
.pp-tabs button {
  min-width: 0;
  min-height: 40px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
}
.pp-tabs button.active {
  background: var(--card-2);
  color: var(--text);
  box-shadow: inset 0 -2px 0 var(--accent);
}
.pp-panel[hidden] { display: none !important; }
.pp-about-list {
  margin: 0 16px 16px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card);
  overflow: hidden;
}
.pp-about-list > div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 14px;
  border-top: 1px solid var(--border);
  color: var(--text);
}
.pp-about-list > div:first-child { border-top: 0; }
.pp-about-list span {
  color: var(--muted);
  font-size: 0.86rem;
}
.pp-about-list strong {
  color: var(--text);
  font-size: 0.9rem;
  text-align: end;
  overflow-wrap: anywhere;
}
.pp-post-media video {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 8px;
  background: var(--card-2);
}
@media (max-width: 420px) {
  .pp-actions button { flex-basis: 100%; }
  .pp-about-list > div {
    display: block;
  }
  .pp-about-list strong {
    display: block;
    margin-top: 4px;
    text-align: start;
  }
}

/* Codex public-profile MySpace + Instagram-like surfaces */
body.pp-has-wallpaper {
  background-image: linear-gradient(rgba(0,0,0,0.35), rgba(0,0,0,0.55)), var(--pp-wallpaper) !important;
  background-size: cover !important;
  background-position: center !important;
  background-attachment: fixed !important;
}
body.pp-skin-clean { background-color: var(--pp-bg, var(--bg)); }
body.pp-skin-neon .pp-card,
body.pp-skin-neon .pp-post,
body.pp-skin-neon .pp-about-list,
body.pp-skin-neon .pp-tabs {
  border-color: var(--pp-accent, var(--accent));
  box-shadow: 0 0 22px color-mix(in srgb, var(--pp-accent, var(--accent)) 36%, transparent);
}
body.pp-skin-poster .pp-cover-wrap { height: 260px; }
body.pp-skin-scrapbook .pp-card,
body.pp-skin-scrapbook .pp-post {
  transform: rotate(-0.25deg);
  border-style: dashed;
}
body.pp-shape-square .pp-card,
body.pp-shape-square .pp-post,
body.pp-shape-square .pp-tabs,
body.pp-shape-square .pp-about-list { border-radius: 0; }
body.pp-shape-pill .pp-card,
body.pp-shape-pill .pp-post,
body.pp-shape-pill .pp-tabs,
body.pp-shape-pill .pp-about-list { border-radius: 24px; }
body.pp-font-serif .pp-shell { font-family: Georgia, "Times New Roman", serif; }
body.pp-font-mono .pp-shell { font-family: "SF Mono", Menlo, Consolas, monospace; }
body.pp-font-display .pp-shell { font-family: "Trebuchet MS", "Arial Black", system-ui, sans-serif; }
.pp-actions button.primary,
.pp-back,
.pp-comment-form button,
.pp-modal-actions button.primary { background: var(--pp-accent, var(--accent)); border-color: var(--pp-accent, var(--accent)); }
.pp-chip.badge,
.pp-post-actions button.on,
.pp-tabs button.active { color: var(--pp-accent, var(--accent)); }
.pp-tabs button.active { box-shadow: inset 0 -2px 0 var(--pp-accent, var(--accent)); }
.pp-mood {
  display: inline-flex;
  margin-top: 8px;
  padding: 5px 10px;
  border-radius: 999px;
  color: var(--text);
  background: color-mix(in srgb, var(--pp-accent, var(--accent)) 18%, transparent);
  border: 1px solid color-mix(in srgb, var(--pp-accent, var(--accent)) 42%, transparent);
  font-size: 0.82rem;
}
.pp-link-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}
.pp-link-row a,
.pp-profile-embed a {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--card-2);
  color: var(--text);
  text-decoration: none;
  font-size: 0.84rem;
  font-weight: 700;
}
.pp-profile-embed { margin-top: 10px; }
.pp-story-rail {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding: 0 16px 14px;
  scrollbar-width: thin;
}
.pp-social-title,
.pp-social-rail {
  width: min(calc(100vw - 48px), 1480px);
  margin-left: 50%;
  transform: translateX(-50%);
}
.pp-social-title {
  margin-top: 34px;
  margin-bottom: 24px;
  font-size: 1.45rem;
  line-height: 1.1;
  letter-spacing: 0;
  text-transform: none;
}
.pp-social-rail {
  flex-wrap: wrap;
  gap: 30px 34px;
  overflow-x: visible;
  padding-bottom: 46px;
}
.pp-story-bubble {
  flex: 0 0 72px;
  width: 72px;
  border: 0;
  background: transparent;
  color: var(--text);
  padding: 0;
  cursor: pointer;
  font: inherit;
}
.pp-story-bubble span {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 6px;
  border: 2px solid var(--pp-accent, var(--accent));
  background: var(--card-2);
  color: var(--text);
  overflow: hidden;
  font-weight: 800;
}
.pp-story-bubble img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pp-story-bubble em {
  display: block;
  font-style: normal;
  font-size: 0.72rem;
  line-height: 1.15;
  color: var(--muted);
  overflow-wrap: anywhere;
}
.pp-social-rail .pp-story-bubble {
  flex: 0 0 112px;
  width: 112px;
}
.pp-social-rail .pp-story-bubble span {
  width: 96px;
  height: 96px;
  border-width: 4px;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--pp-accent, var(--accent)) 42%, transparent);
}
.pp-social-rail .pp-story-bubble em {
  max-width: 112px;
  margin: 0 auto;
  color: var(--text);
  font-size: 0.96rem;
  font-weight: 800;
  line-height: 1.08;
}
@media (max-width: 520px) {
  .pp-social-title,
  .pp-social-rail {
    width: calc(100vw - 32px);
  }
  .pp-social-title {
    margin-top: 26px;
    margin-bottom: 18px;
    font-size: 1.22rem;
  }
  .pp-social-rail {
    gap: 18px;
    padding-bottom: 32px;
  }
  .pp-social-rail .pp-story-bubble {
    flex-basis: 84px;
    width: 84px;
  }
  .pp-social-rail .pp-story-bubble span {
    width: 74px;
    height: 74px;
    border-width: 3px;
  }
  .pp-social-rail .pp-story-bubble em {
    max-width: 84px;
    font-size: 0.78rem;
  }
}
.pp-empty-rail {
  min-height: 72px;
  display: flex;
  align-items: center;
  color: var(--muted);
  font-size: 0.86rem;
}
.pp-tabs { grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)); }
.pp-clips-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0 16px 16px;
}
.pp-clip-card {
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card);
  overflow: hidden;
}
.pp-clip-card video,
.pp-clip-card img,
.pp-clip-fallback {
  width: 100%;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--card-2);
  color: var(--text);
  font-size: 1.6rem;
  font-weight: 800;
}
.pp-clip-card p {
  margin: 0;
  padding: 8px;
  color: var(--text);
  font-size: 0.78rem;
  line-height: 1.3;
}
.pp-lightbox video {
  max-width: 100%;
  max-height: 100%;
  border-radius: 6px;
}
.pp-detail-page {
  position: fixed;
  inset: 0;
  z-index: 450;
  overflow: auto;
  padding: 18px;
  background:
    linear-gradient(rgba(0,0,0,0.62), rgba(0,0,0,0.78)),
    var(--pp-wallpaper, transparent);
  background-size: cover;
  background-position: center;
}
.pp-detail-card {
  width: min(680px, 100%);
  min-height: calc(100vh - 36px);
  margin: 0 auto;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: color-mix(in srgb, var(--card) 94%, transparent);
  color: var(--text);
  box-shadow: 0 20px 70px rgba(0,0,0,0.36);
}
.pp-detail-back {
  min-height: 38px;
  padding: 8px 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--card-2);
  color: var(--text);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}
.pp-detail-eyebrow {
  margin-top: 18px;
  color: var(--pp-accent, var(--accent));
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.pp-detail-card h2 {
  margin: 6px 0 14px;
  color: var(--text);
  font-size: 1.45rem;
  line-height: 1.15;
  overflow-wrap: anywhere;
}
.pp-detail-body {
  color: var(--text);
  line-height: 1.55;
}
.pp-detail-body p {
  margin: 12px 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.pp-detail-body small {
  color: var(--muted);
}
.pp-detail-media {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px;
  margin: 0 0 14px;
}
.pp-detail-media img,
.pp-detail-media video {
  width: 100%;
  max-height: 72vh;
  border-radius: 10px;
  background: var(--card-2);
  object-fit: cover;
}
.pp-detail-media img {
  aspect-ratio: 1 / 1;
  cursor: pointer;
}
.pp-detail-media video {
  aspect-ratio: 9 / 16;
}
.pp-detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}
.pp-detail-actions a,
.pp-detail-actions button {
  min-height: 40px;
  padding: 9px 14px;
  border: 1px solid var(--pp-accent, var(--accent));
  border-radius: 999px;
  background: var(--pp-accent, var(--accent));
  color: #fff;
  text-decoration: none;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}
.pp-detail-comment-hint {
  margin-top: 14px;
  padding: 12px;
  border: 1px dashed var(--border);
  border-radius: 10px;
  color: var(--muted);
  background: var(--card-2);
  font-size: 0.9rem;
}
.pp-clip-card { cursor: pointer; }
@media (max-width: 520px) {
  .pp-detail-page { padding: 0; }
  .pp-detail-card {
    min-height: 100vh;
    border-radius: 0;
    border-inline: 0;
  }
  .pp-detail-media {
    grid-template-columns: 1fr;
  }
}
.pp-owner-modal {
  position: fixed;
  inset: 0;
  z-index: 500;
  background: rgba(0,0,0,0.62);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.pp-owner-card {
  width: min(460px, 100%);
  max-height: min(720px, calc(100vh - 32px));
  overflow: auto;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  color: var(--text);
  padding: 18px;
  position: relative;
}
.pp-owner-card-wide { width: min(720px, 100%); }
.pp-owner-close {
  position: absolute;
  right: 10px;
  top: 10px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--card-2);
  color: var(--text);
  cursor: pointer;
}
.pp-owner-card h3 { margin: 0 40px 6px 0; }
.pp-owner-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}
.pp-owner-card label {
  display: grid;
  gap: 5px;
  color: var(--text);
  font-size: 0.86rem;
  font-weight: 700;
}
.pp-owner-card input,
.pp-owner-card select,
.pp-owner-card textarea {
  width: 100%;
  min-height: 38px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card-2);
  color: var(--text);
  padding: 8px 10px;
  font: inherit;
}
.pp-owner-card textarea { resize: vertical; }
.pp-owner-full { margin-top: 10px; }
.pp-media-callout,
.pp-file-drop {
  border: 2px dashed var(--accent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--accent) 12%, var(--card-2));
  padding: 12px;
}
.pp-media-callout strong,
.pp-file-drop strong {
  display: block;
  color: var(--text);
  font-size: 1rem;
}
.pp-media-callout small,
.pp-file-drop small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  line-height: 1.3;
  font-weight: 600;
}
.pp-media-callout button {
  width: 100%;
  min-height: 40px;
  margin-top: 10px;
  border-radius: 999px;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: #fff;
  font-weight: 900;
  cursor: pointer;
}
.pp-file-drop input[type="file"] {
  margin-top: 10px;
  cursor: pointer;
}
.pp-existing-highlights {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 8px 0 2px;
}
.pp-existing-highlights span {
  flex: 0 0 70px;
  display: grid;
  gap: 5px;
  justify-items: center;
  color: var(--text);
  font-weight: 800;
  font-size: 0.74rem;
}
.pp-existing-highlights img,
.pp-existing-highlights b {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid var(--accent);
}
.pp-existing-highlights img {
  object-fit: cover;
}
.pp-existing-highlights b {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--card-2);
}
.pp-existing-highlights em {
  font-style: normal;
  max-width: 70px;
  overflow-wrap: anywhere;
  text-align: center;
}
.pp-owner-actions {
  display: flex;
  gap: 10px;
  margin-top: 14px;
}
.pp-owner-actions button {
  flex: 1;
  min-height: 40px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--card-2);
  color: var(--text);
  font-weight: 700;
  cursor: pointer;
}
.pp-owner-actions .primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.public-profile-subtoggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card-2, rgba(255,255,255,0.04));
  color: var(--text);
}
.public-profile-subtoggle strong {
  display: block;
  font-size: 0.9rem;
}
.public-profile-subtoggle small {
  display: block;
  margin-top: 2px;
  line-height: 1.3;
}
.public-profile-subtoggle input {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  accent-color: var(--accent);
}
.pp-actions button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.pp-business-card {
  margin: 14px 0;
  padding: 14px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--pp-accent, var(--accent)) 36%, var(--border));
  background: color-mix(in srgb, var(--pp-accent, var(--accent)) 10%, var(--card));
  color: var(--text);
}
.pp-business-kicker {
  color: var(--pp-accent, var(--accent));
  font-size: 0.76rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.pp-business-card h3 {
  margin: 4px 0 6px;
  font-size: 1.12rem;
}
.pp-business-card p {
  margin: 0 0 10px;
  color: var(--text);
  line-height: 1.4;
}
.pp-business-meta,
.pp-business-services {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.pp-business-meta span,
.pp-business-services span {
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 6px 9px;
  background: var(--card-2);
  color: var(--text);
  font-size: 0.78rem;
  font-weight: 700;
}
.pp-business-subtitle {
  margin-top: 14px;
  color: var(--text);
  font-size: 0.86rem;
  font-weight: 900;
}
.pp-business-service-list,
.pp-business-employee-list {
  display: grid;
  gap: 8px;
  margin-top: 8px;
}
.pp-business-service {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 3px 8px;
  align-items: start;
  padding: 10px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--card-2) 78%, transparent);
}
.pp-business-service strong {
  color: var(--text);
}
.pp-business-service span {
  color: var(--pp-accent, var(--accent));
  font-weight: 900;
}
.pp-business-service small {
  grid-column: 1 / -1;
  color: var(--muted);
}
.pp-business-employee {
  padding: 10px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--pp-accent, var(--accent)) 20%, var(--border));
  background: color-mix(in srgb, var(--card-2) 72%, transparent);
}
.pp-business-employee-top {
  display: flex;
  gap: 10px;
  align-items: center;
}
.pp-business-employee-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--pp-accent, var(--accent));
  color: #fff;
  font-weight: 900;
  flex: 0 0 auto;
}
.pp-business-employee-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pp-business-employee-top strong,
.pp-business-employee-top small {
  display: block;
}
.pp-business-employee-top small,
.pp-business-employee p {
  color: var(--muted);
}
.pp-business-employee p {
  margin: 8px 0;
  line-height: 1.35;
}
.pp-walkin-badge,
.pp-walkin-pill {
  margin-left: auto;
  border-radius: 999px;
  padding: 5px 8px;
  background: #22c55e;
  color: #fff !important;
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 900;
}
.pp-business-work {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin: 8px 0;
}
.pp-business-work img,
.pp-business-work video {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 9px;
  background: var(--card);
}
.pp-business-employee-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.pp-business-employee-actions a,
.pp-business-employee-actions button {
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text);
  border-radius: 999px;
  padding: 7px 10px;
  font-weight: 800;
  font-size: 0.78rem;
  text-decoration: none;
  cursor: pointer;
}
.pp-business-employee-actions .active {
  border-color: var(--pp-accent, var(--accent));
  background: color-mix(in srgb, var(--pp-accent, var(--accent)) 18%, var(--card));
}
.pp-business-employee-actions .pp-appointment-btn {
  background: var(--pp-accent, var(--accent));
  border-color: var(--pp-accent, var(--accent));
  color: #fff;
}
.pp-business-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  margin-top: 12px;
  border-radius: 999px;
  background: var(--pp-accent, var(--accent));
  color: #fff;
  text-decoration: none;
  font-weight: 900;
}
.pp-appointment-card label {
  display: grid;
  gap: 6px;
  margin: 10px 0;
}
.pp-appointment-card label span {
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 800;
}
.pp-appointment-card input,
.pp-appointment-card select,
.pp-appointment-card textarea {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--card-2);
  color: var(--text);
  padding: 10px;
  font: inherit;
}
.pp-business-enable {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--card-2);
}
.pp-business-enable input {
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  accent-color: var(--accent);
}
.pp-owner-media-panel {
  margin-top: 14px;
  padding: 14px;
  border: 2px dashed var(--pp-accent, var(--accent));
  border-radius: 14px;
  background: color-mix(in srgb, var(--pp-accent, var(--accent)) 14%, var(--card));
}
.pp-owner-media-panel strong {
  display: block;
  color: var(--text);
  font-size: 1rem;
  margin-bottom: 4px;
}
.pp-owner-media-panel small {
  display: block;
  color: var(--muted);
  line-height: 1.35;
  font-weight: 700;
}
.pp-owner-media-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}
.pp-owner-media-actions a {
  min-height: 46px;
  border-radius: 999px;
  border: 1px solid var(--pp-accent, var(--accent));
  background: var(--pp-accent, var(--accent));
  color: #fff;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 14px;
  font-weight: 900;
}
@media (max-width: 520px) {
  .pp-owner-grid { grid-template-columns: 1fr; }
  .pp-clips-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pp-owner-media-actions { grid-template-columns: 1fr; }
}

/* Codex country-theme precision refresh.
   This sits after the older v70 layer and uses the Advanced fields from
   customization.js, so DR / Belize / Haiti can be matched from the panel. */
:root {
  --theme-hero-art-size: cover;
  --theme-hero-art-position: center top;
  --theme-hero-art-height: 48%;
  --theme-background-art-size: cover;
  --theme-background-art-position: center center;
  --theme-art-blend-mode: screen;
  --theme-crest-art: none;
  --theme-crest-art-size: 96px;
  --theme-crest-bg: #fff;
  --theme-country-welcome: "Welcome to";
  --theme-country-tagline: "";
  --theme-divider-height: 4px;
  --theme-divider-width: 62%;
  --theme-divider-badge-bg: var(--theme-badge-ring-gradient);
  --theme-divider-badge-size: 24px;
  --theme-bottom-flag-bar: var(--header-stripe-pattern);
}

body[data-preset="dr"],
body[data-preset="bz"],
body[data-preset="ht"] {
  background: var(--theme-page-bg) !important;
}

body[data-preset="dr"]::before,
body[data-preset="bz"]::before,
body[data-preset="ht"]::before {
  background: var(--background-art) !important;
  background-position: var(--theme-background-art-position) !important;
  background-size: var(--theme-background-art-size) !important;
  opacity: var(--theme-art-opacity) !important;
  mix-blend-mode: var(--theme-art-blend-mode) !important;
}

body[data-preset="dr"] .stealth-card,
body[data-preset="bz"] .stealth-card,
body[data-preset="ht"] .stealth-card {
  border-radius: 24px !important;
  background: linear-gradient(180deg, rgba(0,0,0,0.02), rgba(0,0,0,0.38)), var(--theme-surface-gradient) !important;
}

body[data-preset="dr"] .stealth-card::before,
body[data-preset="bz"] .stealth-card::before,
body[data-preset="ht"] .stealth-card::before {
  height: var(--theme-hero-art-height) !important;
  background: var(--theme-hero-art) !important;
  background-position: var(--theme-hero-art-position) !important;
  background-size: var(--theme-hero-art-size) !important;
}

body[data-preset="dr"] .stealth-card::after,
body[data-preset="bz"] .stealth-card::after,
body[data-preset="ht"] .stealth-card::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 8px;
  background: var(--theme-bottom-flag-bar);
  pointer-events: none;
  z-index: 2;
}

body[data-preset="dr"] .dr-signin-titleblock,
body[data-preset="bz"] .bz-signin-titleblock,
body[data-preset="ht"] .ht-signin-titleblock {
  padding-top: 58px !important;
  margin-bottom: 22px !important;
}

body[data-preset="dr"] .dr-signin-titleblock::before,
body[data-preset="bz"] .bz-signin-titleblock::before,
body[data-preset="ht"] .ht-signin-titleblock::before {
  content: var(--theme-country-welcome);
  display: block;
  margin: 0 0 8px;
  color: rgba(255,255,255,0.92);
  font-size: 1.05rem;
  font-weight: 700;
  text-shadow: 0 3px 18px rgba(0,0,0,0.55);
}

body[data-preset="dr"] .dr-signin-titleblock::after,
body[data-preset="bz"] .bz-signin-titleblock::after,
body[data-preset="ht"] .ht-signin-titleblock::after {
  content: var(--theme-country-tagline);
  display: block;
  margin-top: 14px;
  color: rgba(255,255,255,0.9);
  font-size: 0.95rem;
  line-height: 1.35;
  text-shadow: 0 3px 18px rgba(0,0,0,0.55);
}

body[data-preset="dr"] .dr-flag,
body[data-preset="bz"] .bz-flag,
body[data-preset="ht"] .ht-flag {
  width: var(--theme-crest-art-size) !important;
  height: var(--theme-crest-art-size) !important;
  font-size: 0 !important;
  background-color: var(--theme-crest-bg) !important;
  background-image: var(--theme-crest-art), linear-gradient(var(--theme-crest-bg), var(--theme-crest-bg)), var(--theme-badge-ring-gradient) !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: cover, cover, cover !important;
  border: 3px solid transparent !important;
  box-shadow: 0 0 0 3px rgba(255,255,255,0.10), 0 18px 46px rgba(0,0,0,0.42) !important;
}

body[data-preset="dr"] .dr-app-name,
body[data-preset="bz"] .bz-app-name,
body[data-preset="ht"] .ht-app-name {
  color: var(--logo-part1-color, #fff) !important;
  font-size: 44px !important;
  letter-spacing: 0 !important;
}

body[data-preset="dr"] .dr-link,
body[data-preset="bz"] .bz-link,
body[data-preset="ht"] .ht-link {
  color: var(--logo-part2-color, var(--accent)) !important;
}

body[data-preset="dr"] .dr-app-name::after,
body[data-preset="bz"] .bz-app-name::after,
body[data-preset="ht"] .ht-app-name::after {
  content: var(--theme-wordmark);
  display: block;
  margin-top: 2px;
  color: var(--theme-script-color) !important;
  font-family: var(--theme-script-font) !important;
  font-size: 0.52em;
  font-weight: 700;
  line-height: 1;
}

body[data-preset="dr"] .dr-app-name::after {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, sans-serif !important;
  font-size: 0.34em;
}

body[data-preset="dr"] .flag-divider,
body[data-preset="bz"] .belize-divider,
body[data-preset="ht"] .haiti-divider,
body[data-preset="dr"] .theme-stripe,
body[data-preset="bz"] .theme-stripe,
body[data-preset="ht"] .theme-stripe,
body[data-preset="dr"] .preset-flag-divider,
body[data-preset="bz"] .preset-flag-divider,
body[data-preset="ht"] .preset-flag-divider {
  width: min(300px, var(--theme-divider-width)) !important;
  height: var(--theme-divider-height) !important;
  border-radius: 999px;
  background: var(--header-stripe-pattern) !important;
  overflow: visible !important;
}

body[data-preset="dr"] .flag-divider::after,
body[data-preset="bz"] .belize-divider::after,
body[data-preset="ht"] .haiti-divider::after,
body[data-preset="dr"] .theme-stripe::after,
body[data-preset="bz"] .theme-stripe::after,
body[data-preset="ht"] .theme-stripe::after,
body[data-preset="dr"] .preset-flag-divider::after,
body[data-preset="bz"] .preset-flag-divider::after,
body[data-preset="ht"] .preset-flag-divider::after {
  width: var(--theme-divider-badge-size) !important;
  height: var(--theme-divider-badge-size) !important;
  background: var(--theme-divider-badge-bg) !important;
  font-size: calc(var(--theme-divider-badge-size) * 0.52) !important;
}

body[data-preset="dr"] .app-header,
body[data-preset="bz"] .app-header,
body[data-preset="ht"] .app-header,
body[data-preset="dr"] .chat-header,
body[data-preset="bz"] .chat-header,
body[data-preset="ht"] .chat-header {
  background: color-mix(in srgb, #020713 78%, var(--secondary) 22%) !important;
  border-bottom: 1px solid var(--theme-outline-color) !important;
}

body[data-preset="dr"] .app-header::after,
body[data-preset="bz"] .app-header::after,
body[data-preset="ht"] .app-header::after,
body[data-preset="dr"] .chat-header::after,
body[data-preset="bz"] .chat-header::after,
body[data-preset="ht"] .chat-header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: var(--theme-divider-height);
  background: var(--header-stripe-pattern);
  border-radius: 0;
  transform: none;
  width: auto;
  box-shadow: none;
}

body[data-preset="dr"] .app-header .theme-badge::before,
body[data-preset="bz"] .app-header .theme-badge::before,
body[data-preset="ht"] .app-header .theme-badge::before,
body[data-preset="dr"] .chat-header .theme-badge::before,
body[data-preset="bz"] .chat-header .theme-badge::before,
body[data-preset="ht"] .chat-header .theme-badge::before {
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
  font-size: 1rem !important;
}

body[data-preset="dr"] .app-header .theme-wordmark::before,
body[data-preset="bz"] .app-header .theme-wordmark::before,
body[data-preset="ht"] .app-header .theme-wordmark::before {
  color: var(--gold) !important;
  font-weight: 900 !important;
}

body[data-preset="dr"] .contact-row,
body[data-preset="bz"] .contact-row,
body[data-preset="ht"] .contact-row,
body[data-preset="dr"] .public-profile-block,
body[data-preset="bz"] .public-profile-block,
body[data-preset="ht"] .public-profile-block,
body[data-preset="dr"] .contact-code-block,
body[data-preset="bz"] .contact-code-block,
body[data-preset="ht"] .contact-code-block,
body[data-preset="dr"] .circle-invite-link-block,
body[data-preset="bz"] .circle-invite-link-block,
body[data-preset="ht"] .circle-invite-link-block,
body[data-preset="dr"] .card,
body[data-preset="bz"] .card,
body[data-preset="ht"] .card {
  border-radius: 16px !important;
  background: var(--card-gradient) !important;
  border-color: var(--theme-outline-color) !important;
}

body[data-preset="dr"] #authSubmit,
body[data-preset="bz"] #authSubmit,
body[data-preset="ht"] #authSubmit,
body[data-preset="dr"] .contact-open,
body[data-preset="bz"] .contact-open,
body[data-preset="ht"] .contact-open,
body[data-preset="dr"] .send-submit,
body[data-preset="bz"] .send-submit,
body[data-preset="ht"] .send-submit,
body[data-preset="dr"] .primary-button,
body[data-preset="bz"] .primary-button,
body[data-preset="ht"] .primary-button {
  background: var(--primary-button-gradient) !important;
  border-color: transparent !important;
}

body[data-preset="dr"] #addByCodeForm button[type="submit"],
body[data-preset="bz"] #addByCodeForm button[type="submit"],
body[data-preset="ht"] #addByCodeForm button[type="submit"],
body[data-preset="dr"] #newContactForm button[type="submit"],
body[data-preset="bz"] #newContactForm button[type="submit"],
body[data-preset="ht"] #newContactForm button[type="submit"] {
  background: var(--positive-button-gradient) !important;
}

body[data-preset="dr"] .bottom-nav,
body[data-preset="bz"] .bottom-nav,
body[data-preset="ht"] .bottom-nav {
  background: color-mix(in srgb, #020713 84%, var(--secondary) 16%) !important;
  border-top: 1px solid var(--theme-outline-color) !important;
}

@media (max-width: 520px) {
  body[data-preset="dr"] .dr-signin-titleblock,
  body[data-preset="bz"] .bz-signin-titleblock,
  body[data-preset="ht"] .ht-signin-titleblock {
    padding-top: 42px !important;
  }
  body[data-preset="dr"] .dr-app-name,
  body[data-preset="bz"] .bz-app-name,
  body[data-preset="ht"] .ht-app-name {
    font-size: 38px !important;
  }
}

/* Codex premium quick themes: Original, Caribbean, Midnight, Sunset, Minimal. */
body[data-preset="original"],
body[data-preset="caribbean"],
body[data-preset="midnight"],
body[data-preset="sunset"],
body[data-preset="minimal"] {
  background: var(--theme-page-bg) !important;
}

body[data-preset="minimal"] {
  --text: #111827;
  --muted: #64748b;
  --card: #ffffff;
  --card-2: #f8fafc;
  color: #111827;
}

body[data-preset="original"]::before,
body[data-preset="caribbean"]::before,
body[data-preset="midnight"]::before,
body[data-preset="sunset"]::before,
body[data-preset="minimal"]::before {
  background: var(--background-art) !important;
  background-position: var(--theme-background-art-position) !important;
  background-size: var(--theme-background-art-size) !important;
  opacity: var(--theme-art-opacity) !important;
  mix-blend-mode: var(--theme-art-blend-mode) !important;
}

body[data-preset="original"] .stealth-card,
body[data-preset="caribbean"] .stealth-card,
body[data-preset="midnight"] .stealth-card,
body[data-preset="sunset"] .stealth-card,
body[data-preset="minimal"] .stealth-card {
  position: relative;
  overflow: hidden;
  border-radius: 24px !important;
  background: linear-gradient(180deg, rgba(0,0,0,0.04), rgba(0,0,0,0.34)), var(--theme-surface-gradient) !important;
  border: 1px solid var(--theme-outline-color) !important;
  box-shadow: 0 28px 80px rgba(0,0,0,0.34) !important;
}

body[data-preset="minimal"] .stealth-card {
  background: var(--theme-surface-gradient) !important;
  box-shadow: 0 24px 70px rgba(15,23,42,0.18) !important;
}

body[data-preset="original"] .stealth-card::before,
body[data-preset="caribbean"] .stealth-card::before,
body[data-preset="midnight"] .stealth-card::before,
body[data-preset="sunset"] .stealth-card::before,
body[data-preset="minimal"] .stealth-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: var(--theme-hero-art-height);
  background: var(--theme-hero-art);
  background-position: var(--theme-hero-art-position);
  background-size: var(--theme-hero-art-size);
  opacity: var(--theme-hero-art-opacity);
  pointer-events: none;
  z-index: 0;
}

body[data-preset="original"] .stealth-card::after,
body[data-preset="caribbean"] .stealth-card::after,
body[data-preset="midnight"] .stealth-card::after,
body[data-preset="sunset"] .stealth-card::after,
body[data-preset="minimal"] .stealth-card::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 8px;
  background: var(--theme-bottom-flag-bar);
  pointer-events: none;
  z-index: 2;
}

body[data-preset="original"] .stealth-card > *,
body[data-preset="caribbean"] .stealth-card > *,
body[data-preset="midnight"] .stealth-card > *,
body[data-preset="sunset"] .stealth-card > *,
body[data-preset="minimal"] .stealth-card > * {
  position: relative;
  z-index: 1;
}

body[data-preset="original"] .stealth-card .theme-header-row,
body[data-preset="caribbean"] .stealth-card .theme-header-row,
body[data-preset="midnight"] .stealth-card .theme-header-row,
body[data-preset="sunset"] .stealth-card .theme-header-row,
body[data-preset="minimal"] .stealth-card .theme-header-row {
  display: grid !important;
  justify-items: center;
  gap: 8px !important;
  padding-top: 54px;
  margin: 0 0 22px !important;
  text-align: center;
}

body[data-preset="original"] .stealth-card .theme-header-row::before,
body[data-preset="caribbean"] .stealth-card .theme-header-row::before,
body[data-preset="midnight"] .stealth-card .theme-header-row::before,
body[data-preset="sunset"] .stealth-card .theme-header-row::before,
body[data-preset="minimal"] .stealth-card .theme-header-row::before {
  content: var(--theme-country-welcome);
  color: color-mix(in srgb, var(--text, #fff) 88%, #ffffff 12%);
  font-size: 1.05rem;
  font-weight: 700;
  text-shadow: 0 3px 18px rgba(0,0,0,0.35);
}

body[data-preset="original"] .stealth-card .theme-header-row::after,
body[data-preset="caribbean"] .stealth-card .theme-header-row::after,
body[data-preset="midnight"] .stealth-card .theme-header-row::after,
body[data-preset="sunset"] .stealth-card .theme-header-row::after,
body[data-preset="minimal"] .stealth-card .theme-header-row::after {
  content: var(--theme-country-tagline);
  max-width: 320px;
  color: color-mix(in srgb, var(--text, #fff) 82%, transparent);
  font-size: 0.95rem;
  line-height: 1.35;
  text-shadow: 0 3px 18px rgba(0,0,0,0.28);
}

body[data-preset="original"] .stealth-card .theme-badge::before,
body[data-preset="caribbean"] .stealth-card .theme-badge::before,
body[data-preset="midnight"] .stealth-card .theme-badge::before,
body[data-preset="sunset"] .stealth-card .theme-badge::before,
body[data-preset="minimal"] .stealth-card .theme-badge::before {
  content: "";
  width: var(--theme-crest-art-size) !important;
  height: var(--theme-crest-art-size) !important;
  border-radius: 50%;
  display: block;
  background-color: var(--theme-crest-bg);
  background-image: var(--theme-crest-art), linear-gradient(var(--theme-crest-bg), var(--theme-crest-bg)), var(--theme-badge-ring-gradient);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover, cover, cover;
  border: 3px solid transparent;
  background-origin: border-box;
  background-clip: content-box, content-box, border-box;
  box-shadow: 0 0 0 3px rgba(255,255,255,0.10), 0 18px 46px rgba(0,0,0,0.28);
}

body[data-preset="original"] .stealth-card .theme-wordmark::before,
body[data-preset="caribbean"] .stealth-card .theme-wordmark::before,
body[data-preset="midnight"] .stealth-card .theme-wordmark::before,
body[data-preset="sunset"] .stealth-card .theme-wordmark::before,
body[data-preset="minimal"] .stealth-card .theme-wordmark::before {
  content: "DirectoLink";
  display: block;
  color: var(--logo-part1-color, var(--text, #fff));
  font-size: 42px;
  font-weight: 900;
  line-height: 1;
  text-shadow: 0 4px 24px rgba(0,0,0,0.34);
}

body[data-preset="original"] .stealth-card .theme-wordmark::after,
body[data-preset="caribbean"] .stealth-card .theme-wordmark::after,
body[data-preset="midnight"] .stealth-card .theme-wordmark::after,
body[data-preset="sunset"] .stealth-card .theme-wordmark::after,
body[data-preset="minimal"] .stealth-card .theme-wordmark::after {
  content: var(--theme-wordmark);
  display: block;
  margin-top: 4px;
  color: var(--theme-script-color);
  font-family: var(--theme-script-font);
  font-size: 1.35rem;
  font-weight: 800;
  line-height: 1;
}

body[data-preset="original"] .stealth-card .theme-wordmark::after {
  content: "";
}

body[data-preset="original"] input,
body[data-preset="caribbean"] input,
body[data-preset="midnight"] input,
body[data-preset="sunset"] input,
body[data-preset="minimal"] input,
body[data-preset="original"] textarea,
body[data-preset="caribbean"] textarea,
body[data-preset="midnight"] textarea,
body[data-preset="sunset"] textarea,
body[data-preset="minimal"] textarea {
  background: var(--theme-input-gradient) !important;
  border-color: var(--theme-outline-color) !important;
  color: var(--text) !important;
}

body[data-preset="original"] .app-header,
body[data-preset="caribbean"] .app-header,
body[data-preset="midnight"] .app-header,
body[data-preset="sunset"] .app-header,
body[data-preset="minimal"] .app-header,
body[data-preset="original"] .chat-header,
body[data-preset="caribbean"] .chat-header,
body[data-preset="midnight"] .chat-header,
body[data-preset="sunset"] .chat-header,
body[data-preset="minimal"] .chat-header {
  background: color-mix(in srgb, var(--secondary) 78%, #020713 22%) !important;
  border-bottom: 1px solid var(--theme-outline-color) !important;
}

body[data-preset="minimal"] .app-header,
body[data-preset="minimal"] .chat-header {
  background: #ffffff !important;
}

body[data-preset="original"] .app-header::after,
body[data-preset="caribbean"] .app-header::after,
body[data-preset="midnight"] .app-header::after,
body[data-preset="sunset"] .app-header::after,
body[data-preset="minimal"] .app-header::after,
body[data-preset="original"] .chat-header::after,
body[data-preset="caribbean"] .chat-header::after,
body[data-preset="midnight"] .chat-header::after,
body[data-preset="sunset"] .chat-header::after,
body[data-preset="minimal"] .chat-header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: var(--theme-divider-height);
  background: var(--header-stripe-pattern);
}

body[data-preset="original"] .app-header .theme-badge::before,
body[data-preset="caribbean"] .app-header .theme-badge::before,
body[data-preset="midnight"] .app-header .theme-badge::before,
body[data-preset="sunset"] .app-header .theme-badge::before,
body[data-preset="minimal"] .app-header .theme-badge::before,
body[data-preset="original"] .chat-header .theme-badge::before,
body[data-preset="caribbean"] .chat-header .theme-badge::before,
body[data-preset="midnight"] .chat-header .theme-badge::before,
body[data-preset="sunset"] .chat-header .theme-badge::before,
body[data-preset="minimal"] .chat-header .theme-badge::before {
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
  font-size: 1rem !important;
}

body[data-preset="original"] .contact-row,
body[data-preset="caribbean"] .contact-row,
body[data-preset="midnight"] .contact-row,
body[data-preset="sunset"] .contact-row,
body[data-preset="minimal"] .contact-row,
body[data-preset="original"] .public-profile-block,
body[data-preset="caribbean"] .public-profile-block,
body[data-preset="midnight"] .public-profile-block,
body[data-preset="sunset"] .public-profile-block,
body[data-preset="minimal"] .public-profile-block,
body[data-preset="original"] .contact-code-block,
body[data-preset="caribbean"] .contact-code-block,
body[data-preset="midnight"] .contact-code-block,
body[data-preset="sunset"] .contact-code-block,
body[data-preset="minimal"] .contact-code-block,
body[data-preset="original"] .circle-invite-link-block,
body[data-preset="caribbean"] .circle-invite-link-block,
body[data-preset="midnight"] .circle-invite-link-block,
body[data-preset="sunset"] .circle-invite-link-block,
body[data-preset="minimal"] .circle-invite-link-block,
body[data-preset="original"] .card,
body[data-preset="caribbean"] .card,
body[data-preset="midnight"] .card,
body[data-preset="sunset"] .card,
body[data-preset="minimal"] .card {
  border-radius: 16px !important;
  background: var(--card-gradient) !important;
  border: 1px solid var(--theme-outline-color) !important;
  box-shadow: 0 18px 45px rgba(0,0,0,0.22) !important;
  backdrop-filter: blur(18px);
}

body[data-preset="minimal"] .contact-row,
body[data-preset="minimal"] .public-profile-block,
body[data-preset="minimal"] .contact-code-block,
body[data-preset="minimal"] .circle-invite-link-block,
body[data-preset="minimal"] .card {
  box-shadow: 0 14px 35px rgba(15,23,42,0.12) !important;
}

body[data-preset="original"] #authSubmit,
body[data-preset="caribbean"] #authSubmit,
body[data-preset="midnight"] #authSubmit,
body[data-preset="sunset"] #authSubmit,
body[data-preset="minimal"] #authSubmit,
body[data-preset="original"] .contact-open,
body[data-preset="caribbean"] .contact-open,
body[data-preset="midnight"] .contact-open,
body[data-preset="sunset"] .contact-open,
body[data-preset="minimal"] .contact-open,
body[data-preset="original"] .send-submit,
body[data-preset="caribbean"] .send-submit,
body[data-preset="midnight"] .send-submit,
body[data-preset="sunset"] .send-submit,
body[data-preset="minimal"] .send-submit,
body[data-preset="original"] .primary-button,
body[data-preset="caribbean"] .primary-button,
body[data-preset="midnight"] .primary-button,
body[data-preset="sunset"] .primary-button,
body[data-preset="minimal"] .primary-button {
  background: var(--primary-button-gradient) !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: 0 12px 30px var(--theme-glow-color) !important;
}

body[data-preset="original"] .bubble.me,
body[data-preset="caribbean"] .bubble.me,
body[data-preset="midnight"] .bubble.me,
body[data-preset="sunset"] .bubble.me,
body[data-preset="minimal"] .bubble.me,
body[data-preset="original"] .message.me,
body[data-preset="caribbean"] .message.me,
body[data-preset="midnight"] .message.me,
body[data-preset="sunset"] .message.me,
body[data-preset="minimal"] .message.me {
  background: var(--chat-bubble-gradient) !important;
  color: var(--bubble-me-text) !important;
}

body[data-preset="original"] .bottom-nav,
body[data-preset="caribbean"] .bottom-nav,
body[data-preset="midnight"] .bottom-nav,
body[data-preset="sunset"] .bottom-nav,
body[data-preset="minimal"] .bottom-nav {
  background: color-mix(in srgb, var(--secondary) 80%, #020713 20%) !important;
  border-top: 1px solid var(--theme-outline-color) !important;
}

body[data-preset="minimal"] .bottom-nav {
  background: #ffffff !important;
}

body[data-preset="original"] .bottom-nav .active,
body[data-preset="caribbean"] .bottom-nav .active,
body[data-preset="midnight"] .bottom-nav .active,
body[data-preset="sunset"] .bottom-nav .active,
body[data-preset="minimal"] .bottom-nav .active,
body[data-preset="original"] .nav-item.active,
body[data-preset="caribbean"] .nav-item.active,
body[data-preset="midnight"] .nav-item.active,
body[data-preset="sunset"] .nav-item.active,
body[data-preset="minimal"] .nav-item.active {
  color: var(--active-nav-color) !important;
}

@media (max-width: 520px) {
  body[data-preset="original"] .stealth-card .theme-header-row,
  body[data-preset="caribbean"] .stealth-card .theme-header-row,
  body[data-preset="midnight"] .stealth-card .theme-header-row,
  body[data-preset="sunset"] .stealth-card .theme-header-row,
  body[data-preset="minimal"] .stealth-card .theme-header-row {
    padding-top: 42px;
  }
  body[data-preset="original"] .stealth-card .theme-wordmark::before,
  body[data-preset="caribbean"] .stealth-card .theme-wordmark::before,
  body[data-preset="midnight"] .stealth-card .theme-wordmark::before,
  body[data-preset="sunset"] .stealth-card .theme-wordmark::before,
  body[data-preset="minimal"] .stealth-card .theme-wordmark::before {
    font-size: 36px;
  }
}

/* v73 social upgrade — brings contacts + chat up to the public-profile polish. */
:root {
  --social-glass-opacity: 0.68;
  --social-glass-mix: 68%;
  --social-blur: 18px;
  --contact-card-radius: 18px;
  --vanish-accent: #8B5CF6;
  --social-surface: color-mix(in srgb, var(--card-2) var(--social-glass-mix), transparent);
  --social-outline: color-mix(in srgb, var(--accent) 30%, var(--border) 70%);
}

.app-body .contact-list-wrap,
.chat-body .chat-pane {
  background:
    linear-gradient(145deg, rgba(255,255,255,0.10), rgba(255,255,255,0.025)),
    var(--social-surface);
  border: 1px solid var(--social-outline);
  box-shadow: 0 26px 70px rgba(0,0,0,0.34), inset 0 1px 0 rgba(255,255,255,0.10);
  backdrop-filter: blur(var(--social-blur));
}

.app-body .contact-list-wrap {
  border-radius: 22px;
  padding: 18px;
}

.contact-row.contact-row-v2 {
  position: relative;
  overflow: hidden;
  border-radius: var(--contact-card-radius) !important;
  border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--border) 78%) !important;
  background:
    radial-gradient(circle at 12% 0%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 34%),
    linear-gradient(135deg, rgba(255,255,255,0.09), rgba(255,255,255,0.025)) !important;
  box-shadow: 0 18px 44px rgba(0,0,0,0.24) !important;
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.contact-row.contact-row-v2:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border) 45%) !important;
  box-shadow: 0 24px 60px rgba(0,0,0,0.30) !important;
}

.contact-row.contact-row-v2::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--header-stripe-pattern, var(--primary-button-gradient));
  opacity: 0.95;
}

body.adv-contact-avatar-ring .contact-row.contact-row-v2 .contact-avatar {
  border: 2px solid transparent !important;
  background:
    linear-gradient(var(--card-2), var(--card-2)) padding-box,
    var(--header-stripe-pattern, linear-gradient(135deg, var(--accent), var(--secondary))) border-box !important;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 16%, transparent), 0 12px 30px rgba(0,0,0,0.28);
}

.contact-row.contact-row-v2 .contact-preview {
  margin-top: 3px;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.25;
}

.contact-row.contact-row-v2 .contact-circle-cluster .circle-pill,
.contact-row.contact-row-v2 .contact-circle-cluster .link-pill,
.contact-row.contact-row-v2 .contact-open,
.contact-row.contact-row-v2 .contact-more {
  backdrop-filter: blur(12px);
}

.contact-row.contact-row-v2 .contact-open {
  min-height: 42px;
  border-radius: 999px !important;
  background: var(--primary-button-gradient, var(--accent)) !important;
  box-shadow: 0 12px 30px var(--theme-glow-color, rgba(59,130,246,0.28)) !important;
}

.chat-body .chat-pane {
  width: min(100%, 980px);
  margin-inline: auto;
  border-radius: 0;
}

body.adv-chat-frame-glass .chat-body .chat-pane,
.chat-body.adv-chat-frame-glass .chat-pane {
  border-radius: 22px 22px 0 0;
}

body.adv-chat-frame-solid .chat-pane,
.chat-body.adv-chat-frame-solid .chat-pane {
  background: var(--card-2);
  backdrop-filter: none;
}

body.adv-chat-frame-edge .chat-pane,
.chat-body.adv-chat-frame-edge .chat-pane {
  width: 100%;
  border-radius: 0;
  border-left: 0;
  border-right: 0;
}

.chat-body .messages {
  padding: 18px 16px 12px;
  background:
    radial-gradient(circle at 22% 8%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 30%),
    radial-gradient(circle at 86% 82%, color-mix(in srgb, var(--secondary) 16%, transparent), transparent 34%);
}

.messages .bubble {
  position: relative;
  margin-block: 7px;
  isolation: isolate;
}

body.adv-message-tails .messages .bubble.me::after,
body.adv-message-tails .messages .bubble.them::after {
  content: "";
  position: absolute;
  bottom: 5px;
  width: 14px;
  height: 14px;
  transform: rotate(45deg);
  z-index: -1;
}

body.adv-message-tails .messages .bubble.me::after {
  right: -4px;
  background: inherit;
}

body.adv-message-tails .messages .bubble.them::after {
  left: -4px;
  background: inherit;
}

.send-form {
  gap: 10px;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.12), rgba(255,255,255,0.035)),
    color-mix(in srgb, var(--card-2) 82%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--border) 78%) !important;
  box-shadow: 0 -12px 34px rgba(0,0,0,0.20), inset 0 1px 0 rgba(255,255,255,0.10);
  backdrop-filter: blur(var(--social-blur));
}

.send-form.vanish-mode-on {
  border-color: color-mix(in srgb, var(--vanish-accent) 58%, var(--border) 42%) !important;
  box-shadow: 0 -12px 34px rgba(0,0,0,0.20), 0 0 0 1px color-mix(in srgb, var(--vanish-accent) 35%, transparent);
}

.send-form input[type="text"],
.send-form #sendInput {
  border-radius: 999px !important;
  background: var(--theme-input-gradient, rgba(255,255,255,0.07)) !important;
}

.send-actions .tool-btn,
.tool-btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  border-radius: 999px !important;
  border-color: color-mix(in srgb, var(--accent) 22%, var(--border) 78%) !important;
  background: linear-gradient(135deg, rgba(255,255,255,0.11), rgba(255,255,255,0.04)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.09);
}

.vanish-mode-toggle {
  color: var(--muted);
  width: auto !important;
  min-width: 76px !important;
  padding-inline: 12px !important;
  font-size: 0.78rem !important;
  font-weight: 900 !important;
}

.vanish-mode-toggle.active {
  color: #fff !important;
  border-color: color-mix(in srgb, var(--vanish-accent) 70%, var(--border) 30%) !important;
  background: radial-gradient(circle at 35% 20%, #fff6, transparent 34%), var(--vanish-accent) !important;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--vanish-accent) 18%, transparent), 0 12px 28px color-mix(in srgb, var(--vanish-accent) 34%, transparent);
}

.vanish-mode-banner {
  margin: 12px 12px 0;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--vanish-accent) 54%, var(--border) 46%);
  background:
    radial-gradient(circle at 4% 0%, color-mix(in srgb, var(--vanish-accent) 36%, transparent), transparent 42%),
    rgba(15, 12, 28, 0.82);
  color: #fff;
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 16px 36px color-mix(in srgb, var(--vanish-accent) 18%, transparent);
}

.vanish-mode-banner strong {
  font-size: 0.82rem;
}

.vanish-mode-banner span {
  color: rgba(255,255,255,0.78);
  font-size: 0.78rem;
}

.vanish-menu button.selected,
.vanish-chip {
  color: #fff;
  background: color-mix(in srgb, var(--vanish-accent) 70%, #111827 30%);
  border-color: color-mix(in srgb, var(--vanish-accent) 72%, var(--border) 28%);
}

.vanish-chip {
  display: inline-flex;
  width: fit-content;
  margin-top: 6px;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0;
}

.ephemeral-timer {
  margin-top: 6px;
  color: color-mix(in srgb, var(--vanish-accent) 72%, #fff 28%);
  font-size: 0.72rem;
  font-weight: 800;
}

@media (max-width: 640px) {
  .app-body .contact-list-wrap {
    border-radius: 0;
    border-left: 0;
    border-right: 0;
    padding: 12px;
  }

  .contact-row.contact-row-v2 .contact-preview {
    display: none;
  }

  .vanish-mode-banner {
    align-items: flex-start;
    flex-direction: column;
    gap: 2px;
  }

  .vanish-mode-toggle {
    min-width: 42px !important;
    width: 42px !important;
    padding-inline: 0 !important;
    font-size: 0 !important;
  }

  .vanish-mode-toggle::before {
    content: "⏱";
    font-size: 0.82rem;
  }
}

/* v104 — Profile Studio cleanup.
   Remove the old mockup art line and the small placeholder circles from
   every Profile Studio action tile. Keep the same buttons/IDs, only replace
   the visual shell. */
.contact-list-wrap .public-profile-block {
  padding: 16px !important;
  border-radius: 28px !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.04)),
    color-mix(in srgb, var(--card-bg, #20211f) 88%, #05070b 12%) !important;
}
.contact-list-wrap .public-profile-block::before {
  content: "" !important;
  position: absolute !important;
  inset: 12px 12px auto 12px !important;
  height: 138px !important;
  border-radius: 24px !important;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 34%, #111827), rgba(10,16,28,0.92) 48%, color-mix(in srgb, var(--secondary, #475569) 28%, #0b1020)) !important;
  background-size: cover !important;
  background-position: center !important;
  opacity: 1 !important;
  filter: none !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.16),
    inset 0 -1px 0 rgba(255,255,255,0.08),
    0 16px 36px rgba(0,0,0,0.24) !important;
  pointer-events: none !important;
  z-index: -2 !important;
}
.contact-list-wrap .public-profile-block::after {
  content: "" !important;
  position: absolute !important;
  inset: 30px 30px auto auto !important;
  width: 86px !important;
  height: 86px !important;
  border-radius: 28px !important;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.16), rgba(255,255,255,0.04)) !important;
  opacity: 0.5 !important;
  filter: none !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12) !important;
  pointer-events: none !important;
  z-index: -1 !important;
}
.contact-list-wrap .public-profile-hub-head {
  min-height: 138px !important;
  padding: 34px 12px 18px !important;
  align-items: center !important;
}
.contact-list-wrap .public-profile-toggle {
  border-radius: 22px !important;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.12), rgba(255,255,255,0.045)),
    rgba(5, 8, 14, 0.42) !important;
}
.contact-list-wrap .public-profile-label strong {
  font-size: clamp(1.12rem, 2.3vw, 1.48rem) !important;
}
.contact-list-wrap .public-profile-label small {
  max-width: 30ch !important;
}
.contact-list-wrap .public-profile-hub-section {
  overflow: hidden !important;
  border-radius: 20px !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.075), rgba(255,255,255,0.03)),
    rgba(7, 10, 15, 0.48) !important;
}
.contact-list-wrap .public-profile-hub-section::before {
  content: none !important;
  display: none !important;
}
.contact-list-wrap .public-profile-action {
  min-height: 86px !important;
  padding: 15px !important;
  border-radius: 18px !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.105), rgba(255,255,255,0.035)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.10),
    0 12px 24px rgba(0,0,0,0.16) !important;
}
.contact-list-wrap .public-profile-action.primary {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 30%, rgba(255,255,255,0.09)), rgba(255,255,255,0.04)) !important;
  border-color: color-mix(in srgb, var(--accent) 46%, rgba(255,255,255,0.16)) !important;
}
.contact-list-wrap .public-profile-action::before,
.contact-list-wrap .public-profile-action::after,
.contact-list-wrap .public-profile-business::before,
.contact-list-wrap .public-profile-business::after {
  content: none !important;
  display: none !important;
}
.contact-list-wrap .public-profile-action > span[aria-hidden="true"],
.contact-list-wrap .public-profile-action > span[aria-hidden="true"]::before,
.contact-list-wrap .public-profile-action > span[aria-hidden="true"]::after {
  display: none !important;
  content: none !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
.contact-list-wrap .public-profile-action strong {
  font-size: 0.92rem !important;
  line-height: 1.12 !important;
}
.contact-list-wrap .public-profile-action small {
  max-width: 22ch !important;
  color: rgba(255,255,255,0.66) !important;
}
.contact-list-wrap .public-profile-business {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 18%, rgba(255,255,255,0.08)), rgba(255,255,255,0.035)) !important;
}
@media (max-width: 640px) {
  .contact-list-wrap .public-profile-block {
    padding: 12px !important;
    border-radius: 24px !important;
  }
  .contact-list-wrap .public-profile-block::before {
    inset: 10px 10px auto 10px !important;
    height: 126px !important;
    border-radius: 21px !important;
  }
  .contact-list-wrap .public-profile-block::after {
    width: 64px !important;
    height: 64px !important;
    border-radius: 22px !important;
  }
  .contact-list-wrap .public-profile-hub-head {
    min-height: 126px !important;
    padding: 24px 8px 14px !important;
  }
  .contact-list-wrap .public-profile-action {
    min-height: 78px !important;
  }
}

/* v107 final: no internal scroll in contacts/Circles, and smaller cards so the
   section fits naturally on desktop and mobile. */
.app-body .contact-list-wrap,
.contact-list-wrap {
  overflow: visible !important;
}
.app-body .contact-list,
.contact-list {
  max-height: none !important;
  overflow: visible !important;
  overflow-y: visible !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
  scrollbar-width: none !important;
}
.app-body .contact-list::-webkit-scrollbar,
.contact-list::-webkit-scrollbar {
  display: none !important;
}
.contact-row.contact-row-v2 {
  grid-template-columns: 62px minmax(0, 1fr) auto 46px !important;
  grid-template-areas:
    "avatar info open more"
    "avatar cluster cluster cluster" !important;
  min-height: 112px !important;
  height: auto !important;
  padding: 14px 16px !important;
  gap: 10px 12px !important;
  align-items: center !important;
  overflow: visible !important;
}
.contact-row.contact-row-v2 .contact-avatar,
body.adv-contact-avatar-ring .contact-row.contact-row-v2 .contact-avatar {
  width: 58px !important;
  height: 58px !important;
  min-width: 58px !important;
  min-height: 58px !important;
}
.contact-row.contact-row-v2 .contact-info {
  align-self: center !important;
  min-height: 0 !important;
}
.contact-row.contact-row-v2 .contact-name {
  font-size: clamp(1.25rem, 2vw, 1.7rem) !important;
  line-height: 1.05 !important;
}
.contact-row.contact-row-v2 .contact-preview {
  margin-top: 4px !important;
  font-size: clamp(0.8rem, 1.4vw, 1rem) !important;
}
.contact-row.contact-row-v2 .contact-circle-cluster {
  align-self: center !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  margin: 0 !important;
}
.contact-row.contact-row-v2 .contact-circle-cluster .circle-pill,
.contact-row.contact-row-v2 .contact-circle-cluster .link-pill {
  min-height: 30px !important;
  padding: 5px 10px !important;
  font-size: 0.78rem !important;
  line-height: 1.1 !important;
}
.contact-row.contact-row-v2 .contact-open {
  min-width: 84px !important;
  min-height: 42px !important;
  height: auto !important;
  align-self: center !important;
  padding: 8px 16px !important;
}
.contact-row.contact-row-v2 .contact-more {
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  min-height: 42px !important;
  align-self: center !important;
}
.secret-circle-header.circle-groups-header {
  min-height: 0 !important;
  padding: 12px 14px !important;
  gap: 10px !important;
  align-items: center !important;
}
.secret-circle-header.circle-groups-header .secret-circle-title {
  font-size: 1rem !important;
  line-height: 1.1 !important;
}
.secret-circle-header.circle-groups-header .secret-group-btn {
  min-height: 42px !important;
  padding: 9px 16px !important;
}
.circle-group-row.contact-row.contact-row-v2 {
  min-height: 118px !important;
}
@media (max-width: 640px) {
  .contact-row.contact-row-v2 {
    grid-template-columns: 56px minmax(0, 1fr) !important;
    grid-template-areas:
      "avatar info"
      "cluster cluster"
      "open more" !important;
    min-height: 0 !important;
    padding: 14px !important;
    gap: 10px !important;
  }
  .contact-row.contact-row-v2 .contact-avatar,
  body.adv-contact-avatar-ring .contact-row.contact-row-v2 .contact-avatar {
    width: 56px !important;
    height: 56px !important;
    min-width: 56px !important;
    min-height: 56px !important;
  }
  .contact-row.contact-row-v2 .contact-name {
    font-size: 1.2rem !important;
  }
  .contact-row.contact-row-v2 .contact-preview {
    font-size: 0.82rem !important;
    max-width: 100% !important;
  }
  .contact-row.contact-row-v2 .contact-circle-cluster {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: 100% !important;
  }
  .contact-row.contact-row-v2 .contact-circle-cluster .circle-pill,
  .contact-row.contact-row-v2 .contact-circle-cluster .link-pill {
    justify-content: center !important;
    width: 100% !important;
    min-width: 0 !important;
    white-space: normal !important;
  }
  .contact-row.contact-row-v2 .contact-open,
  .contact-row.contact-row-v2 .contact-more {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 44px !important;
  }
  .contact-row.contact-row-v2 .contact-more {
    height: 44px !important;
  }
  .secret-circle-header.circle-groups-header {
    grid-template-columns: 1fr !important;
    padding: 12px !important;
  }
  .secret-circle-header.circle-groups-header .secret-group-btn {
    width: 100% !important;
  }
  .circle-group-row.contact-row.contact-row-v2 {
    min-height: 0 !important;
  }
}
@media (max-width: 380px) {
  .contact-row.contact-row-v2 .contact-circle-cluster {
    grid-template-columns: 1fr !important;
  }
}

/* v108 bottom guard: add/unlock are compact, clickable whole-card controls. */
.new-contact,
.hidden-unlock {
  align-self: start !important;
}
.new-contact:not([open]),
.hidden-unlock:not([open]) {
  min-height: 88px !important;
  padding: 0 !important;
  display: flex !important;
  align-items: stretch !important;
  cursor: pointer !important;
  transition: transform 140ms ease, border-color 140ms ease, background 140ms ease, box-shadow 140ms ease !important;
}
.new-contact:not([open]):hover,
.hidden-unlock:not([open]):hover,
.new-contact:not([open]):focus-visible,
.hidden-unlock:not([open]):focus-visible {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--accent) 42%, rgba(255,255,255,0.16)) !important;
  box-shadow:
    0 18px 44px rgba(0,0,0,0.22),
    0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent) !important;
}
.new-contact:not([open]) summary,
.hidden-unlock:not([open]) summary {
  width: 100% !important;
  min-height: 88px !important;
  padding: 0 clamp(18px, 4vw, 28px) !important;
  display: flex !important;
  align-items: center !important;
  list-style: none !important;
  cursor: pointer !important;
}
.new-contact:not([open]) summary::-webkit-details-marker,
.hidden-unlock:not([open]) summary::-webkit-details-marker {
  display: none !important;
}
.new-contact[open],
.hidden-unlock[open] {
  padding: 16px !important;
}
@media (max-width: 640px) {
  .new-contact:not([open]),
  .hidden-unlock:not([open]),
  .new-contact:not([open]) summary,
  .hidden-unlock:not([open]) summary {
    min-height: 78px !important;
  }
}

/* v109 true bottom guard: invite-code entry is always visible and centered. */
body.stealth {
  min-height: 100dvh !important;
  justify-content: center !important;
  align-items: center !important;
  overflow-y: auto !important;
  padding: max(16px, env(safe-area-inset-top)) 12px max(18px, env(safe-area-inset-bottom)) !important;
}
body.stealth .stealth-card {
  width: min(100% - 20px, 420px) !important;
  max-width: 420px !important;
  max-height: calc(100dvh - 34px) !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  scrollbar-width: thin !important;
}
body.stealth .stealth-card > * {
  position: relative !important;
  z-index: 2 !important;
}
body.stealth #codeEntryBlock.code-entry-block,
body.stealth #codeEntryBlock[hidden].code-entry-block {
  display: grid !important;
  justify-items: center !important;
  width: 100% !important;
  margin: 16px auto 0 !important;
  padding: 14px !important;
  border-radius: 18px !important;
  border: 1px solid color-mix(in srgb, var(--accent) 30%, rgba(255,255,255,0.16)) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.035)),
    rgba(0,0,0,0.18) !important;
  box-shadow: 0 16px 34px rgba(0,0,0,0.22) !important;
  text-align: center !important;
}
body.stealth .code-entry-heading {
  width: 100% !important;
  margin: 0 0 8px !important;
  text-align: center !important;
}
body.stealth #codeEntryInput {
  width: min(100%, 240px) !important;
  text-align: center !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  font-weight: 850 !important;
}
body.stealth #codeEntryContinueBtn.code-continue-btn {
  width: min(100%, 210px) !important;
  min-height: 46px !important;
  border-radius: 999px !important;
}
body.stealth #codeEntryBlock .muted {
  max-width: 32ch !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
@media (max-width: 520px) {
  body.stealth {
    justify-content: flex-start !important;
    padding-top: max(52px, env(safe-area-inset-top)) !important;
  }
  body.stealth .stealth-card {
    width: min(100% - 12px, 430px) !important;
    max-height: calc(100dvh - 76px) !important;
  }
  body.stealth #codeEntryBlock.code-entry-block {
    padding: 12px !important;
  }
}

/* v111: customizer footer should not float over the editor controls. */
.customize-panel .customize-footer {
  position: static !important;
  inset: auto !important;
  bottom: auto !important;
  z-index: auto !important;
  margin: 18px 0 0 !important;
  padding: 16px 0 0 !important;
  border-top: 1px solid color-mix(in srgb, var(--accent) 18%, var(--border) 82%) !important;
  background: transparent !important;
  box-shadow: none !important;
}
.customize-panel .cz-reset,
.customize-panel .cz-done {
  min-height: 44px;
}
@media (max-width: 520px) {
  .customize-panel .customize-footer {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }
  .customize-panel .cz-reset,
  .customize-panel .cz-done {
    width: 100% !important;
  }
}

/* v111: image layers for areas that already expose color/gradient controls. */
:root {
  --theme-button-art: none;
  --theme-button-art-size: cover;
  --theme-button-art-position: center center;
  --theme-button-art-opacity: 0;
  --theme-bubble-art: none;
  --theme-bubble-art-size: cover;
  --theme-bubble-art-position: center center;
  --theme-bubble-art-opacity: 0;
}
.primary-button,
.sign-in-button,
.send-button,
#authSubmit,
#codeEntryContinueBtn,
.send-submit,
.contact-row.contact-row-v2 .contact-open,
.public-profile-action.primary,
.public-profile-action.live,
.public-profile-business,
.cz-done {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
}
.primary-button::before,
.sign-in-button::before,
.send-button::before,
#authSubmit::before,
#codeEntryContinueBtn::before,
.send-submit::before,
.contact-row.contact-row-v2 .contact-open::before,
.public-profile-action.primary::before,
.public-profile-action.live::before,
.public-profile-business::before,
.cz-done::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: var(--theme-button-art);
  background-size: var(--theme-button-art-size);
  background-position: var(--theme-button-art-position);
  background-repeat: no-repeat;
  opacity: var(--theme-button-art-opacity);
  mix-blend-mode: soft-light;
}
.messages .bubble,
.message.me,
.message.them,
.chat-bubble.me,
.chat-bubble.them,
.cz-preview-bubble {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.messages .bubble::before,
.message.me::before,
.message.them::before,
.chat-bubble.me::before,
.chat-bubble.them::before,
.cz-preview-bubble::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: var(--theme-bubble-art);
  background-size: var(--theme-bubble-art-size);
  background-position: var(--theme-bubble-art-position);
  background-repeat: no-repeat;
  opacity: var(--theme-bubble-art-opacity);
  mix-blend-mode: soft-light;
}

/* v109: invite-code entry is core auth UI. Keep it centered and visible on
   every sign-in theme so people can always paste a code and create an account. */
body.stealth {
  min-height: 100dvh !important;
  justify-content: center !important;
  align-items: center !important;
  overflow-y: auto !important;
  padding: max(16px, env(safe-area-inset-top)) 12px max(18px, env(safe-area-inset-bottom)) !important;
}
body.stealth .stealth-card {
  width: min(100% - 20px, 420px) !important;
  max-width: 420px !important;
  max-height: calc(100dvh - 34px) !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  scrollbar-width: thin !important;
}
body.stealth .stealth-card > * {
  position: relative !important;
  z-index: 2 !important;
}
body.stealth #codeEntryBlock.code-entry-block {
  display: grid !important;
  justify-items: center !important;
  width: 100% !important;
  margin: 16px auto 0 !important;
  padding: 14px !important;
  border-radius: 18px !important;
  border: 1px solid color-mix(in srgb, var(--accent) 30%, rgba(255,255,255,0.16)) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.035)),
    rgba(0,0,0,0.18) !important;
  box-shadow: 0 16px 34px rgba(0,0,0,0.22) !important;
  text-align: center !important;
}
body.stealth #codeEntryBlock[hidden] {
  display: grid !important;
}
body.stealth .code-entry-heading {
  width: 100% !important;
  margin: 0 0 8px !important;
  text-align: center !important;
}
body.stealth #codeEntryInput {
  width: min(100%, 240px) !important;
  text-align: center !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  font-weight: 850 !important;
}
body.stealth #codeEntryContinueBtn.code-continue-btn {
  width: min(100%, 210px) !important;
  min-height: 46px !important;
  border-radius: 999px !important;
}
body.stealth #codeEntryBlock .muted {
  max-width: 32ch !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
@media (max-width: 520px) {
  body.stealth {
    justify-content: flex-start !important;
    padding-top: max(52px, env(safe-area-inset-top)) !important;
  }
  body.stealth .stealth-card {
    width: min(100% - 12px, 430px) !important;
    max-height: calc(100dvh - 76px) !important;
  }
  body.stealth #codeEntryBlock.code-entry-block {
    padding: 12px !important;
  }
}

/* v108: closed add/unlock panels are compact, full-card buttons. */
.new-contact,
.hidden-unlock {
  align-self: start !important;
}
.new-contact:not([open]),
.hidden-unlock:not([open]) {
  min-height: 88px !important;
  padding: 0 !important;
  display: flex !important;
  align-items: stretch !important;
  cursor: pointer !important;
  transition: transform 140ms ease, border-color 140ms ease, background 140ms ease, box-shadow 140ms ease !important;
}
.new-contact:not([open]):hover,
.hidden-unlock:not([open]):hover,
.new-contact:not([open]):focus-visible,
.hidden-unlock:not([open]):focus-visible {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--accent) 42%, rgba(255,255,255,0.16)) !important;
  box-shadow:
    0 18px 44px rgba(0,0,0,0.22),
    0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent) !important;
}
.new-contact:not([open]) summary,
.hidden-unlock:not([open]) summary {
  width: 100% !important;
  min-height: 88px !important;
  padding: 0 clamp(18px, 4vw, 28px) !important;
  display: flex !important;
  align-items: center !important;
  list-style: none !important;
  cursor: pointer !important;
}
.new-contact:not([open]) summary::-webkit-details-marker,
.hidden-unlock:not([open]) summary::-webkit-details-marker {
  display: none !important;
}
.new-contact[open],
.hidden-unlock[open] {
  padding: 16px !important;
}
@media (max-width: 640px) {
  .new-contact:not([open]),
  .hidden-unlock:not([open]),
  .new-contact:not([open]) summary,
  .hidden-unlock:not([open]) summary {
    min-height: 78px !important;
  }
}

/* v107: let the contacts and Circle area belong to the page instead of becoming
   a small scroll-trapped panel. */
.app-body .contact-list-wrap,
.contact-list-wrap {
  overflow: visible !important;
}
.app-body .contact-list,
.contact-list {
  max-height: none !important;
  overflow: visible !important;
  overflow-y: visible !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
  scrollbar-width: none !important;
}
.app-body .contact-list::-webkit-scrollbar,
.contact-list::-webkit-scrollbar {
  display: none !important;
}
.contact-row.contact-row-v2 {
  grid-template-columns: 62px minmax(0, 1fr) auto 46px !important;
  grid-template-areas:
    "avatar info open more"
    "avatar cluster cluster cluster" !important;
  min-height: 112px !important;
  height: auto !important;
  padding: 14px 16px !important;
  gap: 10px 12px !important;
  align-items: center !important;
  overflow: visible !important;
}
.contact-row.contact-row-v2 .contact-avatar,
body.adv-contact-avatar-ring .contact-row.contact-row-v2 .contact-avatar {
  width: 58px !important;
  height: 58px !important;
  min-width: 58px !important;
  min-height: 58px !important;
}
.contact-row.contact-row-v2 .contact-info {
  align-self: center !important;
  min-height: 0 !important;
}
.contact-row.contact-row-v2 .contact-name {
  font-size: clamp(1.25rem, 2vw, 1.7rem) !important;
  line-height: 1.05 !important;
}
.contact-row.contact-row-v2 .contact-preview {
  margin-top: 4px !important;
  font-size: clamp(0.8rem, 1.4vw, 1rem) !important;
}
.contact-row.contact-row-v2 .contact-circle-cluster {
  align-self: center !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  margin: 0 !important;
}
.contact-row.contact-row-v2 .contact-circle-cluster .circle-pill,
.contact-row.contact-row-v2 .contact-circle-cluster .link-pill {
  min-height: 30px !important;
  padding: 5px 10px !important;
  font-size: 0.78rem !important;
  line-height: 1.1 !important;
}
.contact-row.contact-row-v2 .contact-open {
  min-width: 84px !important;
  min-height: 42px !important;
  height: auto !important;
  align-self: center !important;
  padding: 8px 16px !important;
}
.contact-row.contact-row-v2 .contact-more {
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  min-height: 42px !important;
  align-self: center !important;
}
.secret-circle-header.circle-groups-header {
  min-height: 0 !important;
  padding: 12px 14px !important;
  gap: 10px !important;
  align-items: center !important;
}
.secret-circle-header.circle-groups-header .secret-circle-title {
  font-size: 1rem !important;
  line-height: 1.1 !important;
}
.secret-circle-header.circle-groups-header .secret-group-btn {
  min-height: 42px !important;
  padding: 9px 16px !important;
}
.circle-group-row.contact-row.contact-row-v2 {
  min-height: 118px !important;
}

@media (max-width: 640px) {
  .contact-row.contact-row-v2 {
    grid-template-columns: 56px minmax(0, 1fr) !important;
    grid-template-areas:
      "avatar info"
      "cluster cluster"
      "open more" !important;
    min-height: 0 !important;
    padding: 14px !important;
    gap: 10px !important;
  }
  .contact-row.contact-row-v2 .contact-avatar,
  body.adv-contact-avatar-ring .contact-row.contact-row-v2 .contact-avatar {
    width: 56px !important;
    height: 56px !important;
    min-width: 56px !important;
    min-height: 56px !important;
  }
  .contact-row.contact-row-v2 .contact-name {
    font-size: 1.2rem !important;
  }
  .contact-row.contact-row-v2 .contact-preview {
    font-size: 0.82rem !important;
    max-width: 100% !important;
  }
  .contact-row.contact-row-v2 .contact-circle-cluster {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: 100% !important;
  }
  .contact-row.contact-row-v2 .contact-circle-cluster .circle-pill,
  .contact-row.contact-row-v2 .contact-circle-cluster .link-pill {
    justify-content: center !important;
    width: 100% !important;
    min-width: 0 !important;
    white-space: normal !important;
  }
  .contact-row.contact-row-v2 .contact-open,
  .contact-row.contact-row-v2 .contact-more {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 44px !important;
  }
  .contact-row.contact-row-v2 .contact-more {
    height: 44px !important;
  }
  .secret-circle-header.circle-groups-header {
    grid-template-columns: 1fr !important;
    padding: 12px !important;
  }
  .secret-circle-header.circle-groups-header .secret-group-btn {
    width: 100% !important;
  }
  .circle-group-row.contact-row.contact-row-v2 {
    min-height: 0 !important;
  }
}

@media (max-width: 380px) {
  .contact-row.contact-row-v2 .contact-circle-cluster {
    grid-template-columns: 1fr !important;
  }
}

/* v106 — image-backed theme surfaces. The customizer now has a card/panel
   image layer and a Profile Studio image layer, so themes can move beyond
   flat color swatches without changing the app wiring. */
body[data-preset="dr"] .contact-list-wrap,
body[data-preset="bz"] .contact-list-wrap,
body[data-preset="ht"] .contact-list-wrap,
body[data-preset="caribbean"] .contact-list-wrap,
body[data-preset="midnight"] .contact-list-wrap,
body[data-preset="sunset"] .contact-list-wrap,
body[data-preset="original"] .contact-list-wrap,
body[data-preset="minimal"] .contact-list-wrap,
body[data-preset="dr"] .chat-pane,
body[data-preset="bz"] .chat-pane,
body[data-preset="ht"] .chat-pane,
body[data-preset="caribbean"] .chat-pane,
body[data-preset="midnight"] .chat-pane,
body[data-preset="sunset"] .chat-pane,
body[data-preset="original"] .chat-pane,
body[data-preset="minimal"] .chat-pane,
body[data-preset="dr"] .stealth-card,
body[data-preset="bz"] .stealth-card,
body[data-preset="ht"] .stealth-card,
body[data-preset="caribbean"] .stealth-card,
body[data-preset="midnight"] .stealth-card,
body[data-preset="sunset"] .stealth-card,
body[data-preset="original"] .stealth-card,
body[data-preset="minimal"] .stealth-card {
  background:
    linear-gradient(145deg, rgba(255,255,255,0.15), rgba(255,255,255,0.045) 42%, rgba(0,0,0,0.12)),
    var(--theme-card-art, none),
    var(--theme-surface-gradient, rgba(255,255,255,0.06)) !important;
  background-blend-mode: normal, var(--theme-card-art-blend-mode, soft-light), normal !important;
}

body[data-preset="dr"] .contact-row.contact-row-v2,
body[data-preset="bz"] .contact-row.contact-row-v2,
body[data-preset="ht"] .contact-row.contact-row-v2,
body[data-preset="caribbean"] .contact-row.contact-row-v2,
body[data-preset="midnight"] .contact-row.contact-row-v2,
body[data-preset="sunset"] .contact-row.contact-row-v2,
body[data-preset="original"] .contact-row.contact-row-v2,
body[data-preset="minimal"] .contact-row.contact-row-v2,
body[data-preset="dr"] .contact-code-block,
body[data-preset="bz"] .contact-code-block,
body[data-preset="ht"] .contact-code-block,
body[data-preset="caribbean"] .contact-code-block,
body[data-preset="midnight"] .contact-code-block,
body[data-preset="sunset"] .contact-code-block,
body[data-preset="original"] .contact-code-block,
body[data-preset="minimal"] .contact-code-block,
body[data-preset="dr"] .circle-invite-link-block,
body[data-preset="bz"] .circle-invite-link-block,
body[data-preset="ht"] .circle-invite-link-block,
body[data-preset="caribbean"] .circle-invite-link-block,
body[data-preset="midnight"] .circle-invite-link-block,
body[data-preset="sunset"] .circle-invite-link-block,
body[data-preset="original"] .circle-invite-link-block,
body[data-preset="minimal"] .circle-invite-link-block,
body[data-preset="dr"] .requests-block,
body[data-preset="bz"] .requests-block,
body[data-preset="ht"] .requests-block,
body[data-preset="caribbean"] .requests-block,
body[data-preset="midnight"] .requests-block,
body[data-preset="sunset"] .requests-block,
body[data-preset="original"] .requests-block,
body[data-preset="minimal"] .requests-block,
body[data-preset="dr"] details.settings,
body[data-preset="bz"] details.settings,
body[data-preset="ht"] details.settings,
body[data-preset="caribbean"] details.settings,
body[data-preset="midnight"] details.settings,
body[data-preset="sunset"] details.settings,
body[data-preset="original"] details.settings,
body[data-preset="minimal"] details.settings,
body[data-preset="dr"] .settings-panel,
body[data-preset="bz"] .settings-panel,
body[data-preset="ht"] .settings-panel,
body[data-preset="caribbean"] .settings-panel,
body[data-preset="midnight"] .settings-panel,
body[data-preset="sunset"] .settings-panel,
body[data-preset="original"] .settings-panel,
body[data-preset="minimal"] .settings-panel {
  background:
    linear-gradient(145deg, rgba(255,255,255,0.13), rgba(255,255,255,0.036)),
    var(--theme-card-art, none),
    var(--card-gradient, rgba(255,255,255,0.06)) !important;
  background-blend-mode: normal, var(--theme-card-art-blend-mode, soft-light), normal !important;
  border-color: color-mix(in srgb, var(--theme-outline-color, var(--border)) 86%, #ffffff 14%) !important;
}

.contact-list-wrap .public-profile-block {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.14), rgba(255,255,255,0.052) 48%, rgba(0,0,0,0.16)),
    var(--theme-card-art, none),
    rgba(8, 12, 18, 0.72) !important;
  background-blend-mode: normal, var(--theme-card-art-blend-mode, soft-light), normal !important;
}
.contact-list-wrap .public-profile-block::before {
  background:
    linear-gradient(180deg, rgba(0,0,0,0.02), rgba(0,0,0,0.50)),
    var(--theme-profile-studio-art, var(--theme-hero-art, none)),
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 54%, #102033), #08111f 68%, color-mix(in srgb, var(--danger, #e11d48) 34%, #08111f)) !important;
  background-size: cover, var(--theme-profile-studio-art-size, cover), cover !important;
  background-position: center, var(--theme-profile-studio-art-position, center), center !important;
  opacity: var(--theme-profile-studio-art-opacity, 0.72) !important;
}
.contact-list-wrap .public-profile-action,
.contact-list-wrap .public-profile-business,
.contact-list-wrap .public-profile-subtoggle {
  background:
    linear-gradient(145deg, rgba(255,255,255,0.13), rgba(255,255,255,0.035)),
    var(--theme-card-art, none) !important;
  background-blend-mode: normal, var(--theme-card-art-blend-mode, soft-light) !important;
}
.contact-list-wrap .public-profile-action::before,
.contact-list-wrap .public-profile-action::after,
.contact-list-wrap .public-profile-action > span[aria-hidden="true"],
.contact-list-wrap .public-profile-action > span[aria-hidden="true"]::before,
.contact-list-wrap .public-profile-action > span[aria-hidden="true"]::after {
  content: none !important;
  display: none !important;
}

body[data-preset="minimal"] .contact-list-wrap,
body[data-preset="minimal"] .chat-pane,
body[data-preset="minimal"] .stealth-card,
body[data-preset="minimal"] .contact-row.contact-row-v2,
body[data-preset="minimal"] .contact-code-block,
body[data-preset="minimal"] .circle-invite-link-block,
body[data-preset="minimal"] .requests-block,
body[data-preset="minimal"] details.settings,
body[data-preset="minimal"] .settings-panel {
  color: #111827 !important;
}

/* v74 — redesigned contacts container: more like a social inbox than a list box. */
.app-body .contact-list-wrap {
  position: relative;
  max-width: 760px;
  margin: clamp(18px, 4vw, 42px) auto 24px;
  padding: 20px;
  overflow: hidden;
}

.app-body .contact-list-wrap::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 14% 0%, color-mix(in srgb, var(--accent) 28%, transparent), transparent 30%),
    radial-gradient(circle at 92% 18%, color-mix(in srgb, var(--gold) 18%, transparent), transparent 28%),
    linear-gradient(180deg, rgba(255,255,255,0.07), transparent 42%);
  opacity: 0.92;
}

.contacts-panel-head,
.contacts-panel-tabs,
.contact-list,
.contact-list-wrap > details,
.contact-list-wrap > div[hidden] {
  position: relative;
  z-index: 1;
}

.contacts-panel-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: end;
  padding: 4px 2px 18px;
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 24%, var(--border) 76%);
}

.contacts-eyebrow {
  display: inline-flex;
  width: fit-content;
  margin-bottom: 6px;
  padding: 4px 9px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  color: color-mix(in srgb, var(--accent) 76%, #fff 24%);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.contact-list-wrap .contacts-panel-copy h2 {
  margin: 0;
  color: var(--text);
  font-size: clamp(1.35rem, 2.8vw, 2rem);
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
}

.contacts-panel-copy p {
  max-width: 420px;
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.4;
}

.contacts-panel-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(76px, 1fr));
  gap: 8px;
}

.contacts-panel-stats span {
  min-width: 0;
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--accent) 20%, var(--border) 80%);
  background:
    linear-gradient(145deg, rgba(255,255,255,0.11), rgba(255,255,255,0.035)),
    color-mix(in srgb, var(--card-2) 70%, transparent);
  text-align: center;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
}

.contacts-panel-stats strong {
  display: block;
  color: var(--text);
  font-size: 1.1rem;
  line-height: 1;
}

.contacts-panel-stats small {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.contacts-panel-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 14px 0 12px;
}

.contacts-panel-tabs span {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--border) 82%);
  background: rgba(255,255,255,0.045);
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 800;
}

.contacts-panel-tabs span:first-child {
  color: #fff;
  border-color: color-mix(in srgb, var(--accent) 58%, var(--border) 42%);
  background: var(--primary-button-gradient, var(--accent));
  box-shadow: 0 10px 26px var(--theme-glow-color, rgba(59,130,246,0.20));
}

.app-body .contact-list {
  display: grid;
  gap: 12px;
  margin: 0 0 16px;
  padding: 2px 2px 8px;
  max-height: min(58vh, 620px);
  overflow-x: hidden;
  mask-image: linear-gradient(to bottom, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
}

.app-body .contact-list .muted {
  display: block;
  padding: 28px 16px;
  border: 1px dashed color-mix(in srgb, var(--accent) 30%, var(--border) 70%);
  border-radius: 18px;
  background: rgba(255,255,255,0.04);
  text-align: center;
}

.app-body .new-contact,
.app-body .hidden-unlock {
  margin-top: 12px;
  border-radius: 18px;
  border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--border) 82%);
  background:
    linear-gradient(145deg, rgba(255,255,255,0.09), rgba(255,255,255,0.025)),
    color-mix(in srgb, var(--card-2) 72%, transparent);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
}

.app-body .new-contact summary,
.app-body .hidden-unlock summary {
  min-height: 52px;
  display: flex;
  align-items: center;
  padding: 0 18px;
  color: var(--text);
  font-weight: 900;
  cursor: pointer;
}

.app-body .new-contact summary::marker,
.app-body .hidden-unlock summary::marker {
  color: var(--accent);
}

@media (max-width: 720px) {
  .contacts-panel-head {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .contacts-panel-stats {
    width: 100%;
  }
}

@media (max-width: 520px) {
  .app-body .contact-list-wrap {
    max-width: none;
    margin-top: 0;
    padding: 14px;
  }

  .contacts-panel-stats {
    grid-template-columns: repeat(3, 1fr);
  }

  .contacts-panel-stats span {
    padding: 9px 6px;
  }

  .contacts-panel-stats small {
    font-size: 0.58rem;
  }
}

/* v75 — phone-browser spacing pass. Treat the mobile browser chrome as
   part of the layout: smaller header, no horizontal pressure, and contact
   rows that stack cleanly when Safari/Chrome shrink the viewport. */
@media (max-width: 560px) {
  body.app-body {
    overflow-x: hidden;
  }

  .app-body .contact-list-wrap {
    width: calc(100% - 16px);
    max-width: 430px;
    margin: 8px auto max(18px, env(safe-area-inset-bottom));
    padding: 12px;
    border-left: 1px solid var(--social-outline);
    border-right: 1px solid var(--social-outline);
    border-radius: 18px;
  }

  .contacts-panel-head {
    gap: 12px;
    padding-bottom: 12px;
  }

  .contacts-eyebrow {
    margin-bottom: 5px;
    padding: 3px 8px;
    font-size: 0.62rem;
  }

  .contact-list-wrap .contacts-panel-copy h2 {
    font-size: 1.28rem;
  }

  .contacts-panel-copy p {
    display: none;
  }

  .contacts-panel-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }

  .contacts-panel-stats span {
    border-radius: 13px;
    padding: 8px 4px;
  }

  .contacts-panel-stats strong {
    font-size: 1rem;
  }

  .contacts-panel-stats small {
    margin-top: 4px;
    font-size: 0.54rem;
    letter-spacing: 0.02em;
  }

  .contacts-panel-tabs {
    flex-wrap: nowrap;
    gap: 6px;
    margin: 10px -2px 10px;
    overflow-x: auto;
    padding: 0 2px 4px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .contacts-panel-tabs::-webkit-scrollbar {
    display: none;
  }

  .contacts-panel-tabs span {
    flex: 0 0 auto;
    min-height: 28px;
    padding: 0 10px;
    font-size: 0.7rem;
  }

  .app-body .contact-list {
    gap: 10px;
    max-height: min(48svh, 430px);
    padding: 1px 1px 8px;
    mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 14px), transparent 100%);
  }

  .contact-row.contact-row-v2 {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 40px;
    align-items: center;
    gap: 8px 10px;
    padding: 12px !important;
    min-width: 0;
  }

  .contact-row.contact-row-v2 .contact-avatar {
    grid-column: 1;
    grid-row: 1;
    width: 44px;
    height: 44px;
  }

  .contact-row.contact-row-v2 .contact-info {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    flex: initial;
  }

  .contact-row.contact-row-v2 .contact-name {
    font-size: 0.98rem;
    white-space: nowrap;
  }

  .contact-row.contact-row-v2 .contact-preview {
    display: none;
  }

  .contact-row.contact-row-v2 .contact-more {
    grid-column: 3;
    grid-row: 1;
    width: 38px;
    height: 38px;
    justify-self: end;
  }

  .contact-row.contact-row-v2 .contact-circle-cluster {
    grid-column: 1 / -1;
    grid-row: 2;
    margin-left: 0 !important;
    justify-content: flex-start;
    width: 100%;
  }

  .contact-row.contact-row-v2 .contact-circle-cluster .circle-pill,
  .contact-row.contact-row-v2 .contact-circle-cluster .link-pill {
    max-width: 100%;
    white-space: normal;
    line-height: 1.2;
  }

  .contact-row.contact-row-v2 .contact-open {
    grid-column: 1 / -1;
    grid-row: 3;
    width: 100%;
    min-height: 40px;
    justify-self: stretch;
  }

  .app-body .new-contact summary,
  .app-body .hidden-unlock summary {
    min-height: 48px;
    padding: 0 14px;
    font-size: 0.92rem;
  }
}

@supports (height: 100dvh) {
  @media (max-width: 560px) {
    .app-body .contact-list {
      max-height: min(48dvh, 430px);
    }
  }
}

/* v76 — Directo-native shape language. Inspired by social tools in what
   it does, but visually closer to a private connection board / pass system. */
.app-body .contact-list-wrap {
  max-width: 720px;
  border-radius: 10px;
  background:
    linear-gradient(120deg, rgba(255,255,255,0.075), rgba(255,255,255,0.015) 42%, transparent 42%),
    linear-gradient(180deg, color-mix(in srgb, var(--card-2) 82%, transparent), color-mix(in srgb, var(--card) 70%, transparent)) !important;
}

.app-body .contact-list-wrap::before {
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--accent) 30%, transparent) 0 1px, transparent 1px 18px),
    linear-gradient(180deg, rgba(255,255,255,0.06), transparent 38%);
  background-size: 18px 100%, 100% 100%;
  opacity: 0.5;
}

.contacts-panel-head {
  grid-template-columns: minmax(0, 1fr) minmax(190px, 280px);
  align-items: stretch;
  border-bottom: 0;
  padding: 0 0 14px 14px;
}

.contacts-panel-head::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  bottom: 14px;
  width: 4px;
  border-radius: 999px;
  background: var(--header-stripe-pattern, var(--primary-button-gradient));
}

.contacts-eyebrow {
  border-radius: 6px;
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--border) 66%);
}

.contacts-panel-stats {
  align-self: stretch;
  grid-template-columns: 1fr;
}

.contacts-panel-stats span {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 8px;
  border-radius: 8px;
  text-align: left;
}

.contacts-panel-stats small {
  margin: 0;
}

.contacts-signal-rail {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin: 4px 0 14px;
  padding: 1px;
  border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--border) 78%);
  border-radius: 8px;
  background: color-mix(in srgb, var(--accent) 20%, var(--border) 80%);
  overflow: hidden;
}

.contacts-signal-rail span {
  min-width: 0;
  padding: 10px 12px;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.095), rgba(255,255,255,0.025)),
    color-mix(in srgb, var(--card-2) 78%, transparent);
}

.contacts-signal-rail b {
  display: block;
  color: color-mix(in srgb, var(--accent) 78%, #fff 22%);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
}

.contacts-signal-rail em {
  display: block;
  margin-top: 3px;
  color: var(--text);
  font-size: 0.78rem;
  font-style: normal;
  font-weight: 850;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.contact-row.contact-row-v2 {
  border-radius: 8px !important;
  padding: 14px 14px 14px 18px !important;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--accent) 9%, transparent), transparent 36%),
    linear-gradient(135deg, rgba(255,255,255,0.085), rgba(255,255,255,0.025)) !important;
}

.contact-row.contact-row-v2::before {
  width: 5px;
  border-radius: 0;
}

.contact-row.contact-row-v2::after {
  content: "";
  position: absolute;
  top: 12px;
  bottom: 12px;
  right: 72px;
  width: 1px;
  background: repeating-linear-gradient(to bottom, color-mix(in srgb, var(--accent) 45%, transparent) 0 4px, transparent 4px 8px);
  opacity: 0.75;
}

.contact-row.contact-row-v2 .contact-avatar,
body.adv-contact-avatar-ring .contact-row.contact-row-v2 .contact-avatar {
  border-radius: 10px !important;
}

.contact-row.contact-row-v2 .contact-open {
  border-radius: 8px !important;
  min-height: 38px;
  padding-inline: 16px;
}

.contact-row.contact-row-v2 .contact-more {
  border-radius: 8px;
}

.contact-row.contact-row-v2 .contact-preview {
  color: color-mix(in srgb, var(--muted) 84%, var(--accent) 16%);
}

.public-profile-hub-section {
  border-radius: 8px !important;
  border-left: 4px solid color-mix(in srgb, var(--accent) 70%, var(--border) 30%);
}

.public-profile-action {
  border-radius: 8px !important;
}

@media (max-width: 720px) {
  .contacts-panel-head {
    grid-template-columns: 1fr;
  }

  .contacts-panel-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .contacts-panel-stats span {
    grid-template-columns: 1fr;
    text-align: center;
  }
}

@media (max-width: 560px) {
  .app-body .contact-list-wrap {
    border-radius: 10px;
  }

  .contacts-signal-rail {
    grid-template-columns: 1fr;
  }

  .contacts-signal-rail span {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 8px;
    align-items: center;
    padding: 8px 10px;
  }

  .contacts-signal-rail em {
    margin: 0;
  }

  .contact-row.contact-row-v2::after {
    display: none;
  }

  .contact-row.contact-row-v2 .contact-open {
    border-radius: 8px !important;
  }
}

/* v78 — visual alignment pass. The contact screen had a few older
   "optical nudge" rules fighting newer card layouts, which made profile
   pictures feel slightly off-center. These final rules use explicit grid
   placement and true center alignment for the header avatar and contact
   tiles across desktop + mobile browser widths. */
.app-header > .user-group {
  height: auto !important;
  min-height: var(--header-avatar-size, 40px);
  align-items: center !important;
  justify-content: center;
}/* v100 stripped account-avatar rule */


.app-header > .user-group h1 {
  height: auto !important;
  min-height: var(--header-avatar-size, 40px);
  line-height: 1.12 !important;
  display: inline-flex !important;
  align-items: center !important;
  margin: 0;
  padding: 0;
}/* v100 stripped account-avatar rule */
/* v100 stripped account-avatar rule */


.contact-row.contact-row-v2 {
  display: grid !important;
  grid-template-columns: 52px minmax(0, 1fr) minmax(112px, auto) 42px;
  grid-template-areas:
    "avatar info chips more"
    "avatar info open more";
  align-items: center !important;
  column-gap: 12px;
  row-gap: 8px;
  min-height: 92px;
}

.contact-row.contact-row-v2::after {
  display: none !important;
}

.contact-row.contact-row-v2 .contact-avatar,
body.adv-contact-avatar-ring .contact-row.contact-row-v2 .contact-avatar {
  grid-area: avatar;
  justify-self: center;
  align-self: center;
  width: 48px;
  height: 48px;
  display: grid !important;
  place-items: center !important;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.contact-row.contact-row-v2 .contact-info {
  grid-area: info;
  min-width: 0;
  align-self: center;
  justify-content: center;
}

.contact-row.contact-row-v2 .contact-name {
  line-height: 1.15;
}

.contact-row.contact-row-v2 .contact-preview {
  max-width: 34ch;
}

.contact-row.contact-row-v2 .contact-circle-cluster {
  grid-area: chips;
  justify-self: end;
  align-self: end;
  justify-content: flex-end;
  margin-left: 0 !important;
  width: auto;
}

.contact-row.contact-row-v2 .contact-open {
  grid-area: open;
  justify-self: end;
  align-self: start;
  min-width: 112px;
  width: auto;
  box-sizing: border-box;
}

.contact-row.contact-row-v2 .contact-more {
  grid-area: more;
  justify-self: end;
  align-self: center;
  display: grid !important;
  place-items: center !important;
}

@media (max-width: 720px) {
  .contact-row.contact-row-v2 {
    grid-template-columns: 52px minmax(0, 1fr) 42px;
    grid-template-areas:
      "avatar info more"
      ". chips chips"
      ". open open";
    min-height: 0;
    padding: 14px !important;
  }

  .contact-row.contact-row-v2 .contact-avatar,
  body.adv-contact-avatar-ring .contact-row.contact-row-v2 .contact-avatar {
    align-self: center;
  }

  .contact-row.contact-row-v2 .contact-circle-cluster {
    justify-self: stretch;
    justify-content: flex-start;
    width: 100%;
  }

  .contact-row.contact-row-v2 .contact-open {
    justify-self: stretch;
    width: 100%;
    min-width: 0;
  }
}

@media (max-width: 430px) {
  .contact-row.contact-row-v2 {
    grid-template-columns: 48px minmax(0, 1fr) 40px;
    column-gap: 10px;
    padding: 12px !important;
  }

  .contact-row.contact-row-v2 .contact-avatar,
  body.adv-contact-avatar-ring .contact-row.contact-row-v2 .contact-avatar {
    width: 44px;
    height: 44px;
  }

  .contact-row.contact-row-v2 .contact-circle-cluster .circle-pill,
  .contact-row.contact-row-v2 .contact-circle-cluster .link-pill {
    flex: 1 1 auto;
    justify-content: center;
    text-align: center;
  }
}

/* v84 — contact board polish. The old "Directo board" header was reading
   like a chunky promo card inside the dashboard. This makes it feel more
   like a useful home surface: cleaner title, calmer stats, and lighter
   connection chips that survive narrow mobile browser widths. */
.app-body .contact-list-wrap {
  border-radius: 20px !important;
  padding: clamp(14px, 3vw, 22px) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.082), rgba(255,255,255,0.026)),
    color-mix(in srgb, var(--card) 74%, transparent) !important;
}

.app-body .contact-list-wrap::before {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 18%, transparent), transparent 30%),
    linear-gradient(180deg, rgba(255,255,255,0.06), transparent 34%) !important;
  opacity: 0.7 !important;
}

.contacts-panel-head {
  padding: 2px 0 14px !important;
  border-bottom: 0 !important;
  gap: 14px !important;
}

.contacts-panel-head::before {
  display: none !important;
}

.contacts-eyebrow {
  padding: 0 !important;
  margin-bottom: 8px !important;
  border: 0 !important;
  background: transparent !important;
  color: color-mix(in srgb, var(--accent) 78%, #fff 22%) !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.14em !important;
}

.contact-list-wrap .contacts-panel-copy h2 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: clamp(1.45rem, 3vw, 2.05rem) !important;
}

.contacts-panel-copy p {
  max-width: 520px !important;
  color: color-mix(in srgb, var(--muted) 88%, #fff 12%) !important;
}

.contacts-panel-stats {
  min-width: min(100%, 250px);
  gap: 6px !important;
  padding: 5px;
  border: 1px solid color-mix(in srgb, var(--accent) 16%, var(--border) 84%);
  border-radius: 14px;
  background: rgba(255,255,255,0.035);
}

.contacts-panel-stats span {
  padding: 8px 9px !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: transparent !important;
  box-shadow: none !important;
}

.contacts-panel-stats strong {
  font-size: 1.18rem !important;
}

.contacts-panel-stats small {
  color: color-mix(in srgb, var(--muted) 86%, var(--accent) 14%) !important;
}

.contacts-signal-rail {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px !important;
  margin: 2px 0 16px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  overflow: visible !important;
}

.contacts-signal-rail span {
  min-width: 0;
  padding: 10px 12px !important;
  border: 1px solid color-mix(in srgb, var(--accent) 16%, var(--border) 84%);
  border-radius: 12px;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.07), rgba(255,255,255,0.026)),
    color-mix(in srgb, var(--card-2) 58%, transparent) !important;
}

.contacts-signal-rail b {
  color: var(--text) !important;
  font-size: 0.74rem !important;
  letter-spacing: 0 !important;
  text-transform: none;
}

.contacts-signal-rail em {
  margin-top: 4px !important;
  color: var(--muted) !important;
  font-size: 0.7rem !important;
  font-weight: 700 !important;
}

@media (max-width: 560px) {
  .contacts-panel-head {
    gap: 10px !important;
  }

  .contacts-panel-stats {
    min-width: 0;
    width: 100%;
  }

  .contacts-signal-rail {
    grid-template-columns: 1fr !important;
    gap: 6px !important;
    margin-bottom: 12px !important;
  }

  .contacts-signal-rail span {
    display: grid;
    grid-template-columns: 74px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    padding: 8px 10px !important;
  }

  .contacts-signal-rail em {
    margin: 0 !important;
  }
}

/* v85 — theme quality repair. Earlier preset layers were flattening the
   ChatGPT-style country mockups into plain gradients. This restores the
   full-screen art direction: fabric/landscape hero on sign-in, landmark
   atmosphere on contacts + chat, stronger flag separators, and richer
   glass cards. */
body[data-preset="dr"],
body[data-preset="bz"],
body[data-preset="ht"],
body[data-preset="caribbean"],
body[data-preset="midnight"],
body[data-preset="sunset"],
body[data-preset="original"],
body[data-preset="minimal"] {
  background: var(--theme-page-bg) !important;
}

body[data-preset="dr"]::before,
body[data-preset="bz"]::before,
body[data-preset="ht"]::before,
body[data-preset="caribbean"]::before,
body[data-preset="midnight"]::before,
body[data-preset="sunset"]::before,
body[data-preset="original"]::before,
body[data-preset="minimal"]::before {
  background: var(--background-art) !important;
  background-position: var(--theme-background-art-position) !important;
  background-size: var(--theme-background-art-size) !important;
  opacity: var(--theme-art-opacity) !important;
  mix-blend-mode: var(--theme-art-blend-mode) !important;
}

body[data-preset="dr"] .stealth-card,
body[data-preset="bz"] .stealth-card,
body[data-preset="ht"] .stealth-card {
  min-height: min(760px, calc(100svh - 22px));
  padding-top: clamp(34px, 7svh, 62px) !important;
  border-radius: 26px !important;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.02) 0%, rgba(0,0,0,0.16) 38%, rgba(0,0,0,0.50) 100%),
    var(--theme-surface-gradient) !important;
  border: 1px solid color-mix(in srgb, var(--theme-outline-color) 82%, #ffffff 18%) !important;
  box-shadow: 0 34px 92px rgba(0,0,0,0.50), inset 0 1px 0 rgba(255,255,255,0.16) !important;
}

body[data-preset="dr"] .stealth-card::before,
body[data-preset="bz"] .stealth-card::before,
body[data-preset="ht"] .stealth-card::before {
  height: clamp(230px, var(--theme-hero-art-height), 430px) !important;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.06), rgba(0,0,0,0.38)),
    var(--theme-hero-art) !important;
  background-position: var(--theme-hero-art-position) !important;
  background-size: var(--theme-hero-art-size) !important;
  opacity: var(--theme-hero-art-opacity) !important;
}

body[data-preset="dr"] .dr-signin-titleblock,
body[data-preset="bz"] .bz-signin-titleblock,
body[data-preset="ht"] .ht-signin-titleblock {
  padding-top: clamp(84px, 15svh, 135px) !important;
}

body[data-preset="dr"] .dr-flag,
body[data-preset="bz"] .bz-flag,
body[data-preset="ht"] .ht-flag {
  transform: translateY(-2px);
  box-shadow:
    0 0 0 5px rgba(255,255,255,0.12),
    0 0 0 9px color-mix(in srgb, var(--accent) 32%, transparent),
    0 22px 58px rgba(0,0,0,0.52) !important;
}

body[data-preset="dr"] .dr-app-name,
body[data-preset="bz"] .bz-app-name,
body[data-preset="ht"] .ht-app-name {
  text-shadow: 0 5px 24px rgba(0,0,0,0.72) !important;
}

body[data-preset="bz"] .bz-app-name::after,
body[data-preset="ht"] .ht-app-name::after {
  font-size: 0.58em !important;
  font-weight: 500 !important;
  text-shadow: 0 5px 22px rgba(0,0,0,0.62) !important;
}

body[data-preset="dr"] .contact-list-wrap,
body[data-preset="bz"] .contact-list-wrap,
body[data-preset="ht"] .contact-list-wrap,
body[data-preset="caribbean"] .contact-list-wrap,
body[data-preset="midnight"] .contact-list-wrap,
body[data-preset="sunset"] .contact-list-wrap,
body[data-preset="original"] .contact-list-wrap,
body[data-preset="minimal"] .contact-list-wrap,
body[data-preset="dr"] .chat-pane,
body[data-preset="bz"] .chat-pane,
body[data-preset="ht"] .chat-pane,
body[data-preset="caribbean"] .chat-pane,
body[data-preset="midnight"] .chat-pane,
body[data-preset="sunset"] .chat-pane,
body[data-preset="original"] .chat-pane,
body[data-preset="minimal"] .chat-pane {
  background:
    linear-gradient(145deg, rgba(255,255,255,0.13), rgba(255,255,255,0.035)),
    var(--theme-surface-gradient) !important;
  border-color: color-mix(in srgb, var(--theme-outline-color) 86%, #ffffff 14%) !important;
  box-shadow: 0 30px 86px rgba(0,0,0,0.42), inset 0 1px 0 rgba(255,255,255,0.13) !important;
}

body[data-preset="dr"] .contact-list-wrap::before,
body[data-preset="bz"] .contact-list-wrap::before,
body[data-preset="ht"] .contact-list-wrap::before,
body[data-preset="caribbean"] .contact-list-wrap::before,
body[data-preset="midnight"] .contact-list-wrap::before,
body[data-preset="sunset"] .contact-list-wrap::before,
body[data-preset="original"] .contact-list-wrap::before,
body[data-preset="minimal"] .contact-list-wrap::before {
  background:
    var(--background-art),
    radial-gradient(circle at 8% 0%, color-mix(in srgb, var(--accent) 28%, transparent), transparent 30%),
    linear-gradient(180deg, rgba(255,255,255,0.08), transparent 48%) !important;
  background-position: var(--theme-background-art-position), center, center !important;
  background-size: var(--theme-background-art-size), cover, cover !important;
  opacity: 0.82 !important;
  mix-blend-mode: screen;
}

body[data-preset="dr"] .contacts-panel-head,
body[data-preset="bz"] .contacts-panel-head,
body[data-preset="ht"] .contacts-panel-head,
body[data-preset="caribbean"] .contacts-panel-head,
body[data-preset="midnight"] .contacts-panel-head,
body[data-preset="sunset"] .contacts-panel-head,
body[data-preset="original"] .contacts-panel-head,
body[data-preset="minimal"] .contacts-panel-head {
  border-top: var(--theme-divider-height) solid transparent !important;
  border-image: var(--header-stripe-pattern) 1 !important;
  padding-top: 14px !important;
}

body[data-preset="dr"] .contact-row.contact-row-v2,
body[data-preset="bz"] .contact-row.contact-row-v2,
body[data-preset="ht"] .contact-row.contact-row-v2,
body[data-preset="caribbean"] .contact-row.contact-row-v2,
body[data-preset="midnight"] .contact-row.contact-row-v2,
body[data-preset="sunset"] .contact-row.contact-row-v2,
body[data-preset="original"] .contact-row.contact-row-v2,
body[data-preset="minimal"] .contact-row.contact-row-v2,
body[data-preset="dr"] .public-profile-hub-section,
body[data-preset="bz"] .public-profile-hub-section,
body[data-preset="ht"] .public-profile-hub-section,
body[data-preset="caribbean"] .public-profile-hub-section,
body[data-preset="midnight"] .public-profile-hub-section,
body[data-preset="sunset"] .public-profile-hub-section,
body[data-preset="original"] .public-profile-hub-section,
body[data-preset="minimal"] .public-profile-hub-section {
  background:
    linear-gradient(135deg, rgba(255,255,255,0.11), rgba(255,255,255,0.030)),
    var(--card-gradient) !important;
  border-color: color-mix(in srgb, var(--theme-outline-color) 88%, #ffffff 12%) !important;
}

body[data-preset="dr"] .chat-body .messages,
body[data-preset="bz"] .chat-body .messages,
body[data-preset="ht"] .chat-body .messages,
body[data-preset="caribbean"] .chat-body .messages,
body[data-preset="midnight"] .chat-body .messages,
body[data-preset="sunset"] .chat-body .messages,
body[data-preset="original"] .chat-body .messages,
body[data-preset="minimal"] .chat-body .messages {
  background:
    var(--background-art),
    radial-gradient(circle at 14% 4%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 32%),
    radial-gradient(circle at 96% 82%, color-mix(in srgb, var(--gold) 14%, transparent), transparent 34%) !important;
  background-position: var(--theme-background-art-position), center, center !important;
  background-size: var(--theme-background-art-size), cover, cover !important;
}

body[data-preset="dr"] .app-header,
body[data-preset="bz"] .app-header,
body[data-preset="ht"] .app-header,
body[data-preset="caribbean"] .app-header,
body[data-preset="midnight"] .app-header,
body[data-preset="sunset"] .app-header,
body[data-preset="original"] .app-header,
body[data-preset="minimal"] .app-header,
body[data-preset="dr"] .chat-header,
body[data-preset="bz"] .chat-header,
body[data-preset="ht"] .chat-header,
body[data-preset="caribbean"] .chat-header,
body[data-preset="midnight"] .chat-header,
body[data-preset="sunset"] .chat-header,
body[data-preset="original"] .chat-header,
body[data-preset="minimal"] .chat-header {
  background:
    linear-gradient(135deg, rgba(255,255,255,0.10), rgba(255,255,255,0.025)),
    color-mix(in srgb, var(--card) 82%, transparent) !important;
  backdrop-filter: blur(18px);
}

body[data-preset="dr"] .link-pill.live,
body[data-preset="bz"] .link-pill.live,
body[data-preset="ht"] .link-pill.live,
body[data-preset="caribbean"] .link-pill.live,
body[data-preset="midnight"] .link-pill.live,
body[data-preset="sunset"] .link-pill.live,
body[data-preset="original"] .link-pill.live,
body[data-preset="minimal"] .link-pill.live,
body[data-preset="dr"] .circle-pill.add-to-circle,
body[data-preset="bz"] .circle-pill.add-to-circle,
body[data-preset="ht"] .circle-pill.add-to-circle,
body[data-preset="caribbean"] .circle-pill.add-to-circle,
body[data-preset="midnight"] .circle-pill.add-to-circle,
body[data-preset="sunset"] .circle-pill.add-to-circle,
body[data-preset="original"] .circle-pill.add-to-circle,
body[data-preset="minimal"] .circle-pill.add-to-circle {
  border-color: color-mix(in srgb, var(--accent) 70%, #ffffff 30%) !important;
  background: color-mix(in srgb, var(--accent) 20%, rgba(255,255,255,0.08)) !important;
  color: #fff !important;
}

@media (max-width: 640px) {
  .vanish-mode-toggle::before {
    content: "⏱" !important;
    font-size: 0.92rem !important;
  }

  body[data-preset="dr"] .stealth-card,
  body[data-preset="bz"] .stealth-card,
  body[data-preset="ht"] .stealth-card {
    min-height: calc(100svh - 12px);
    border-radius: 22px !important;
  }

  body[data-preset="dr"] .dr-signin-titleblock,
  body[data-preset="bz"] .bz-signin-titleblock,
  body[data-preset="ht"] .ht-signin-titleblock {
    padding-top: clamp(72px, 13svh, 112px) !important;
  }
}

/* v88 final layer — keep the Profile Hub polish above all older theme
   repair layers that also touch this block. */
.public-profile-block {
  width: min(100% - 24px, 720px) !important;
  margin: 18px auto 0 !important;
  padding: 16px !important;
  border-radius: 18px !important;
  border: 1px solid color-mix(in srgb, var(--accent) 34%, rgba(255,255,255,0.14)) !important;
  background:
    radial-gradient(circle at 10% 0%, color-mix(in srgb, var(--accent) 24%, transparent), transparent 32%),
    linear-gradient(145deg, rgba(255,255,255,0.12), rgba(255,255,255,0.035)),
    color-mix(in srgb, var(--card) 86%, transparent) !important;
}
.public-profile-hub-section {
  border-left: 0 !important;
  border-radius: 14px !important;
}
.public-profile-action {
  border-radius: 13px !important;
}
@media (max-width: 620px) {
  .public-profile-block {
    width: calc(100% - 18px) !important;
    padding: 14px !important;
  }
}

/* v89 — Contact Home art direction reset.
   This is the "wow" layer: richer mobile-first dashboard, less settings
   box, more personal social home. It keeps existing markup and behavior. */
body.app-body {
  min-height: 100svh;
  background:
    linear-gradient(125deg, rgba(16, 69, 151, 0.34) 0 18%, transparent 18% 100%),
    linear-gradient(154deg, transparent 0 52%, rgba(225, 29, 72, 0.22) 52% 64%, transparent 64% 100%),
    linear-gradient(180deg, #081328 0%, #071223 44%, #101820 100%) !important;
  color: var(--text);
}
body.app-body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(255,255,255,0.045) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255,255,255,0.032) 1px, transparent 1px);
  background-size: 58px 58px;
  mask-image: linear-gradient(180deg, rgba(0,0,0,0.52), transparent 72%);
  opacity: 0.55;
}
.app-header {
  position: sticky;
  top: 0;
  z-index: 30;
  margin: 0 auto;
  width: min(100%, 1180px);
  padding: max(10px, env(safe-area-inset-top)) 14px 10px;
  border-bottom: 1px solid rgba(255,255,255,0.10) !important;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.13), rgba(255,255,255,0.045)),
    rgba(9, 18, 33, 0.78) !important;
  box-shadow: 0 18px 50px rgba(0,0,0,0.24);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.app-header .status-toggle,
.app-header .lang-button,
.app-header .link-btn,
.app-header .install-pill,
.app-header .chat-icon-btn {
  min-height: 40px;
  border-radius: 999px !important;
  border: 1px solid rgba(255,255,255,0.13) !important;
  background: rgba(255,255,255,0.07) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
}/* v100 stripped account-avatar rule */

.app-header .user-group h1 {
  font-size: clamp(1.05rem, 2vw, 1.32rem);
  font-weight: 950;
}
.app-header .theme-wordmark::before {
  font-weight: 950;
  color: color-mix(in srgb, var(--gold, #f4c430) 82%, #fff 18%);
}
.contact-list-wrap {
  position: relative;
  width: min(100% - 24px, 980px) !important;
  margin: 22px auto 54px !important;
  padding: clamp(14px, 3vw, 24px) !important;
  overflow: hidden;
  border-radius: 30px !important;
  border: 1px solid rgba(255,255,255,0.13) !important;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.14), rgba(255,255,255,0.04)),
    color-mix(in srgb, var(--card) 78%, rgba(7, 18, 35, 0.90)) !important;
  box-shadow: 0 30px 90px rgba(0,0,0,0.38), inset 0 1px 0 rgba(255,255,255,0.11);
}
.contact-list-wrap::before {
  content: "";
  position: absolute;
  left: -8%;
  right: -8%;
  top: 0;
  height: clamp(150px, 24vw, 250px);
  background:
    linear-gradient(100deg, color-mix(in srgb, var(--accent) 46%, #0f4ea8 54%) 0 24%, transparent 24% 100%),
    linear-gradient(150deg, transparent 0 54%, color-mix(in srgb, var(--danger, #e11d48) 46%, transparent) 54% 66%, transparent 66% 100%),
    linear-gradient(180deg, rgba(255,255,255,0.12), transparent);
  opacity: 0.82;
  transform: skewY(-3deg);
  transform-origin: top left;
}
.contact-list-wrap::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 8px;
  background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--gold, #f4c430) 82%, #fff 18%), var(--danger, #e11d48));
  opacity: 0.9;
}
.contacts-panel-head,
.contacts-signal-rail,
.contact-list,
.contact-list-wrap > details,
.contact-list-wrap > div:not([hidden]),
.contact-list-wrap > section {
  position: relative;
  z-index: 1;
}
.contacts-panel-head {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(230px, 0.8fr);
  gap: clamp(14px, 3vw, 28px);
  align-items: end;
  min-height: clamp(150px, 22vw, 220px);
  padding: clamp(18px, 4vw, 34px) clamp(14px, 3vw, 26px) 18px !important;
  border-radius: 24px !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.12), rgba(255,255,255,0.035)),
    rgba(7, 16, 31, 0.58) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
}
.contacts-eyebrow {
  display: inline-flex;
  width: fit-content;
  min-height: 28px;
  align-items: center;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.13);
  color: color-mix(in srgb, var(--gold, #f4c430) 78%, #fff 22%);
  font-size: 0.72rem;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.contact-list-wrap .contacts-panel-copy h2 {
  margin: 12px 0 8px;
  font-size: clamp(2rem, 6vw, 4rem);
  line-height: 0.94;
  font-weight: 980;
  letter-spacing: 0;
}
.contacts-panel-copy p {
  max-width: 46ch;
  margin: 0;
  color: rgba(255,255,255,0.76);
  font-weight: 650;
}
.contacts-panel-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.contacts-panel-stats span {
  min-width: 0;
  min-height: 82px;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 2px;
  padding: 10px 8px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.08);
}
.contacts-panel-stats strong {
  font-size: clamp(1.4rem, 3vw, 2.1rem);
  line-height: 1;
  font-weight: 950;
}
.contacts-panel-stats small {
  color: rgba(255,255,255,0.66);
  font-size: 0.68rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.contacts-signal-rail {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
  margin: 12px 0 14px;
}
.contacts-signal-rail span {
  min-width: 0;
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.055);
}
.contacts-signal-rail b,
.contacts-signal-rail em {
  display: block;
  min-width: 0;
}
.contacts-signal-rail b {
  font-size: 0.82rem;
  font-weight: 950;
}
.contacts-signal-rail em {
  margin-top: 2px;
  color: rgba(255,255,255,0.62);
  font-size: 0.72rem;
  font-style: normal;
}
.contact-list {
  display: grid;
  gap: 11px !important;
  margin-top: 10px !important;
}
.contact-row.contact-row-v2 {
  position: relative;
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  min-height: 92px;
  gap: 12px !important;
  padding: 14px !important;
  overflow: hidden;
  border-radius: 22px !important;
  border: 1px solid rgba(255,255,255,0.13) !important;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.13), rgba(255,255,255,0.035)),
    rgba(255,255,255,0.048) !important;
  box-shadow: 0 14px 34px rgba(0,0,0,0.18);
}
.contact-row.contact-row-v2::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 5px;
  background: linear-gradient(180deg, var(--accent), var(--danger, #e11d48));
}
.contact-row.contact-row-v2 .contact-avatar,
body.adv-contact-avatar-ring .contact-row.contact-row-v2 .contact-avatar {
  width: 54px !important;
  height: 54px !important;
  border-radius: 50% !important;
  border: 2px solid color-mix(in srgb, var(--accent) 54%, #fff 24%) !important;
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 18%, transparent);
}
.contact-row.contact-row-v2 .contact-name {
  font-size: 1.03rem !important;
  font-weight: 950 !important;
}
.contact-row.contact-row-v2 .contact-preview {
  margin-top: 3px;
  color: rgba(255,255,255,0.64) !important;
  font-size: 0.82rem;
}
.contact-row.contact-row-v2 .contact-circle-cluster {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}
.contact-row.contact-row-v2 .contact-circle-cluster .circle-pill,
.contact-row.contact-row-v2 .contact-circle-cluster .link-pill {
  border-radius: 999px !important;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.07);
  font-size: 0.72rem;
  font-weight: 850;
}
.contact-row.contact-row-v2 .contact-open {
  min-height: 42px;
  padding: 0 18px !important;
  border-radius: 999px !important;
  font-weight: 950;
  background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 72%, #fff 28%)) !important;
  box-shadow: 0 14px 30px color-mix(in srgb, var(--accent) 22%, transparent);
}
.contact-row.contact-row-v2 .contact-more {
  width: 42px;
  height: 42px;
  border-radius: 50% !important;
  background: rgba(255,255,255,0.07) !important;
}
.new-contact,
.hidden-unlock,
.requests-block,
.contact-code-block,
.circle-invite-link-block,
.founding-block {
  position: relative;
  z-index: 1;
  width: min(100%, 720px);
  margin: 14px auto 0 !important;
  padding: 14px !important;
  border-radius: 20px !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.105), rgba(255,255,255,0.032)),
    rgba(255,255,255,0.045) !important;
  box-shadow: 0 18px 44px rgba(0,0,0,0.18);
}
.new-contact summary,
.hidden-unlock summary,
.requests-summary {
  min-height: 42px;
  align-items: center;
  font-weight: 950 !important;
}
.contact-code-header,
.circle-invite-link-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  gap: 9px;
  align-items: center;
}
.contact-code-label,
.circle-invite-link-title {
  color: color-mix(in srgb, var(--gold, #f4c430) 80%, #fff 20%);
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.72rem;
}
.contact-code-text,
.circle-invite-link-text {
  min-width: 0;
  padding: 10px 12px !important;
  border-radius: 14px !important;
  border: 1px solid color-mix(in srgb, var(--accent) 32%, rgba(255,255,255,0.12));
  background: rgba(255,255,255,0.075) !important;
  color: var(--text);
  font-size: clamp(1rem, 3vw, 1.45rem);
  font-weight: 950;
  letter-spacing: 0.08em;
  text-align: center;
}
.add-by-code-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: 8px;
  margin-top: 12px;
}
.add-by-code-row input,
.new-contact input,
.hidden-unlock input,
.circle-invite-link-textarea,
.change-password-section input {
  min-height: 44px;
  border-radius: 14px !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  background: rgba(0,0,0,0.16) !important;
  color: var(--text);
}
.contact-code-copy,
.contact-code-regen,
.circle-invite-link-copy,
.circle-invite-link-regen,
.add-by-code-row button,
.new-contact button,
.hidden-unlock button,
.requests-toolbar button {
  min-height: 42px;
  border-radius: 999px !important;
  font-weight: 920;
}
.requests-block {
  overflow: hidden;
}
.requests-summary-icon {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 18%, transparent);
}
.requests-toolbar,
.requests-subsection {
  border-radius: 16px !important;
  background: rgba(255,255,255,0.055) !important;
}
.public-profile-block {
  width: min(100%, 760px) !important;
  margin-top: 16px !important;
  padding: 18px !important;
  border-radius: 26px !important;
  background:
    linear-gradient(132deg, color-mix(in srgb, var(--accent) 24%, transparent) 0 24%, transparent 24%),
    linear-gradient(154deg, transparent 0 58%, color-mix(in srgb, var(--danger, #e11d48) 22%, transparent) 58% 70%, transparent 70%),
    linear-gradient(145deg, rgba(255,255,255,0.13), rgba(255,255,255,0.036)),
    rgba(255,255,255,0.055) !important;
}
.public-profile-hub-head {
  grid-template-columns: minmax(0, 1fr) auto;
  padding-bottom: 6px;
}
.public-profile-glyph {
  font-size: 1.35rem;
}
.public-profile-label strong {
  font-size: 1.12rem;
}
.public-profile-preview {
  min-height: 42px;
  padding-inline: 16px;
}
.public-profile-hub-section {
  padding: 14px !important;
}
.public-profile-action {
  min-height: 88px;
}
.public-profile-action strong,
.public-profile-business strong {
  font-size: 0.94rem;
  font-weight: 950;
}
.public-profile-action small,
.public-profile-business small {
  font-size: 0.76rem;
}
.public-profile-business {
  border-radius: 16px !important;
  background: rgba(255,255,255,0.06) !important;
}
.pp-business-template-hint {
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--accent) 34%, rgba(255,255,255,0.13));
  background:
    radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 44%),
    rgba(255,255,255,0.055);
}
.pp-business-template-hint strong {
  font-size: 0.9rem;
  font-weight: 950;
  color: var(--text);
}
.pp-business-template-hint span {
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.35;
}
@media (max-width: 720px) {
  body.app-body {
    background:
      linear-gradient(130deg, rgba(16, 69, 151, 0.38) 0 28%, transparent 28% 100%),
      linear-gradient(160deg, transparent 0 58%, rgba(225, 29, 72, 0.20) 58% 72%, transparent 72% 100%),
      linear-gradient(180deg, #071326 0%, #091523 100%) !important;
  }
  .app-header {
    padding-inline: 8px;
  }
  .app-header .user-group {
    min-width: 0;
  }/* v100 stripped account-avatar rule */

  .contact-list-wrap {
    width: calc(100% - 14px) !important;
    margin-top: 8px !important;
    padding: 10px !important;
    border-radius: 24px !important;
  }
  .contacts-panel-head {
    grid-template-columns: 1fr;
    align-items: stretch;
    min-height: 0;
    padding: 18px 14px !important;
  }
  .contact-list-wrap .contacts-panel-copy h2 {
    font-size: clamp(2.15rem, 12vw, 3.25rem);
  }
  .contacts-panel-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .contacts-panel-stats span {
    min-height: 66px;
  }
  .contacts-signal-rail {
    grid-template-columns: 1fr;
  }
  .contact-row.contact-row-v2 {
    grid-template-columns: auto minmax(0, 1fr) auto;
    min-height: 86px;
    border-radius: 18px !important;
  }
  .contact-row.contact-row-v2 .contact-circle-cluster {
    grid-column: 2 / -1;
    justify-content: flex-start;
  }
  .contact-row.contact-row-v2 .contact-open {
    grid-column: 3;
    grid-row: 1;
    min-width: 70px;
    padding-inline: 12px !important;
  }
  .contact-row.contact-row-v2 .contact-more {
    grid-column: 3;
    grid-row: 2;
    justify-self: end;
  }
  .add-by-code-row,
  .contact-code-header,
  .circle-invite-link-row,
  .public-profile-hub-head {
    grid-template-columns: 1fr;
  }
  .contact-code-copy,
  .contact-code-regen,
  .circle-invite-link-copy,
  .circle-invite-link-regen {
    width: 100%;
  }
  .public-profile-preview {
    width: 100%;
  }
  .public-profile-action-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 430px) {
  .contacts-panel-stats small,
  .contacts-signal-rail em,
  .public-profile-action small {
    font-size: 0.68rem;
  }
  .contact-row.contact-row-v2 {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .contact-row.contact-row-v2 .contact-open,
  .contact-row.contact-row-v2 .contact-more {
    grid-column: 1 / -1;
    grid-row: auto;
    width: 100%;
    justify-self: stretch;
  }
}

/* v91 — Social home rebuild. The contact screen should not feel like a
   settings stack; it should feel like the user's social command center.
   This layer changes layout, scale, and hierarchy without touching the
   existing button behavior. */
body.app-body {
  background:
    radial-gradient(circle at 16% 0%, color-mix(in srgb, var(--accent) 34%, transparent), transparent 30%),
    radial-gradient(circle at 92% 14%, color-mix(in srgb, var(--danger, #e11d48) 24%, transparent), transparent 31%),
    linear-gradient(135deg, rgba(0, 56, 168, 0.30) 0 18%, transparent 18% 100%),
    linear-gradient(180deg, #050b18 0%, #07142a 46%, #050914 100%) !important;
}
body.app-body::before {
  background:
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255,255,255,0.028) 1px, transparent 1px),
    radial-gradient(circle at 50% 0%, rgba(255,255,255,0.08), transparent 42%);
  background-size: 72px 72px, 72px 72px, cover;
  opacity: 0.48;
}
.app-header {
  width: min(100% - 18px, 1120px) !important;
  margin-top: 10px !important;
  border-radius: 24px !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.14), rgba(255,255,255,0.035)),
    rgba(6, 14, 29, 0.82) !important;
}
.app-header::after {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 0;
  height: 3px;
  border-radius: 999px;
  background: var(--header-stripe-pattern, linear-gradient(90deg, var(--accent), #fff, var(--danger, #e11d48)));
  opacity: 0.9;
}
.contact-list-wrap {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(330px, 390px);
  grid-template-areas:
    "hero hero"
    "rail rail"
    "contacts profile"
    "new profile"
    "unlock profile"
    "requests profile"
    "code invite"
    "settings settings";
  gap: 14px !important;
  width: min(100% - 22px, 1120px) !important;
  max-width: 1120px !important;
  padding: clamp(12px, 2vw, 18px) !important;
  border-radius: 34px !important;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.125), rgba(255,255,255,0.026)),
    rgba(4, 11, 24, 0.82) !important;
  border-color: rgba(255,255,255,0.16) !important;
  box-shadow: 0 36px 110px rgba(0,0,0,0.44), inset 0 1px 0 rgba(255,255,255,0.11) !important;
}
.contact-list-wrap::before {
  height: clamp(230px, 30vw, 350px) !important;
  background:
    linear-gradient(100deg, color-mix(in srgb, var(--accent) 74%, #0b63ce 26%) 0 30%, transparent 30% 100%),
    linear-gradient(154deg, transparent 0 58%, color-mix(in srgb, var(--danger, #e11d48) 58%, transparent) 58% 70%, transparent 70% 100%),
    radial-gradient(circle at 74% 18%, rgba(255,255,255,0.20), transparent 22%) !important;
  opacity: 0.92 !important;
  transform: none !important;
  clip-path: polygon(0 0, 100% 0, 100% 82%, 0 100%);
}
.contacts-panel-head {
  grid-area: hero;
  min-height: clamp(220px, 31vw, 330px) !important;
  align-items: end !important;
  border-radius: 30px !important;
  padding: clamp(22px, 4vw, 44px) !important;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.02), rgba(0,0,0,0.34)),
    var(--theme-hero-art, none),
    linear-gradient(135deg, rgba(0, 56, 168, 0.66), rgba(3, 10, 24, 0.72) 58%, rgba(225, 29, 72, 0.34)) !important;
  background-position: center top, var(--theme-hero-art-position, center top), center !important;
  background-size: cover, var(--theme-hero-art-size, cover), cover !important;
  overflow: hidden;
}
.contacts-panel-head::after {
  content: "";
  position: absolute;
  left: clamp(18px, 4vw, 44px);
  right: clamp(18px, 4vw, 44px);
  bottom: 18px;
  height: 5px;
  border-radius: 999px;
  background: var(--theme-bottom-flag-bar, var(--header-stripe-pattern, linear-gradient(90deg, var(--accent), #fff, var(--danger, #e11d48))));
  box-shadow: 0 12px 28px rgba(0,0,0,0.24);
}
.contacts-eyebrow {
  min-height: 32px !important;
  padding: 7px 12px !important;
  border: 1px solid rgba(255,255,255,0.16) !important;
  border-radius: 999px !important;
  background: rgba(0,0,0,0.22) !important;
  color: #fff !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.contact-list-wrap .contacts-panel-copy h2 {
  margin: 12px 0 8px !important;
  font-size: clamp(2.7rem, 8vw, 5.6rem) !important;
  line-height: 0.86 !important;
  letter-spacing: 0 !important;
  text-shadow: 0 6px 30px rgba(0,0,0,0.45);
}
.contacts-panel-copy p {
  font-size: clamp(1rem, 2vw, 1.2rem);
  color: rgba(255,255,255,0.84) !important;
}
.contacts-panel-stats {
  align-self: end;
  padding: 7px !important;
  border-radius: 22px !important;
  border: 1px solid rgba(255,255,255,0.16) !important;
  background: rgba(0,0,0,0.24) !important;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.contacts-panel-stats span {
  min-height: 94px !important;
  border-radius: 17px !important;
  background: rgba(255,255,255,0.09) !important;
}
.contacts-panel-stats strong {
  font-size: clamp(1.7rem, 4vw, 2.55rem) !important;
}
.contacts-signal-rail {
  grid-area: rail;
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  margin: 0 !important;
}
.contacts-signal-rail span {
  min-height: 72px;
  border-radius: 22px !important;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.12), rgba(255,255,255,0.03)),
    rgba(255,255,255,0.046) !important;
}
.contacts-signal-rail b {
  font-size: 0.92rem !important;
}
.audience-stats-rail strong {
  display: block;
  color: #fff;
  font-size: clamp(1.55rem, 3.4vw, 2.35rem);
  line-height: 1;
  font-weight: 980;
  letter-spacing: 0;
}
.contacts-signal-rail em {
  font-size: 0.78rem !important;
  white-space: normal;
}
.audience-stats-rail em {
  margin-top: 7px !important;
  color: rgba(255,255,255,0.72) !important;
  font-size: 0.78rem !important;
  font-weight: 900;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.audience-stats-rail span {
  position: relative;
  overflow: hidden;
}
.audience-stats-rail span::after {
  content: "";
  position: absolute;
  right: -18px;
  top: -18px;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
}
.contact-list {
  grid-area: contacts;
  gap: 14px !important;
  margin: 0 !important;
}
.contact-list::before {
  content: "Contacts";
  display: block;
  margin: 2px 0 -2px;
  color: rgba(255,255,255,0.92);
  font-size: 1.12rem;
  font-weight: 950;
}
.contact-row.contact-row-v2 {
  min-height: 126px !important;
  grid-template-columns: auto minmax(0, 1fr) auto !important;
  grid-template-areas:
    "avatar info open"
    "avatar cluster more";
  gap: 10px 14px !important;
  padding: 18px !important;
  border-radius: 28px !important;
  background:
    radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 34%),
    linear-gradient(145deg, rgba(255,255,255,0.14), rgba(255,255,255,0.034)),
    rgba(255,255,255,0.052) !important;
  box-shadow: 0 20px 60px rgba(0,0,0,0.26) !important;
}
.contact-row.contact-row-v2::before {
  width: 100% !important;
  height: 4px !important;
  inset: 0 0 auto !important;
  background: var(--theme-bottom-flag-bar, linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--gold, #f4c430) 84%, #fff 16%), var(--danger, #e11d48))) !important;
}
.contact-row.contact-row-v2::after {
  content: "";
  position: absolute;
  right: 16px;
  top: 16px;
  width: 82px;
  height: 82px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  filter: blur(4px);
  opacity: 0.9;
  pointer-events: none;
}
.contact-row.contact-row-v2 .contact-avatar {
  grid-area: avatar;
  width: 74px !important;
  height: 74px !important;
  align-self: center;
  border-width: 3px !important;
}
.contact-row.contact-row-v2 .contact-info {
  grid-area: info;
}
.contact-row.contact-row-v2 .contact-name {
  font-size: clamp(1.18rem, 2vw, 1.5rem) !important;
  line-height: 1.05;
}
.contact-row.contact-row-v2 .contact-preview {
  max-width: 34ch;
  margin-top: 6px !important;
  color: rgba(255,255,255,0.70) !important;
}
.contact-row.contact-row-v2 .contact-circle-cluster {
  grid-area: cluster;
  justify-content: flex-start !important;
  gap: 8px !important;
}
.contact-row.contact-row-v2 .contact-circle-cluster .circle-pill,
.contact-row.contact-row-v2 .contact-circle-cluster .link-pill {
  min-height: 34px;
  padding: 7px 11px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,0.085) !important;
}
.contact-row.contact-row-v2 .contact-open {
  grid-area: open;
  min-width: 92px;
  min-height: 48px !important;
  border-radius: 16px !important;
  position: relative;
  z-index: 1;
}
.contact-row.contact-row-v2 .contact-more {
  grid-area: more;
  justify-self: end;
  border-radius: 16px !important;
  position: relative;
  z-index: 1;
}
.new-contact {
  grid-area: new;
}
.hidden-unlock {
  grid-area: unlock;
}
.requests-block {
  grid-area: requests;
}
.public-profile-block {
  grid-area: profile;
  align-self: start;
  position: sticky !important;
  top: 96px;
  width: 100% !important;
  margin: 0 !important;
  padding: 18px !important;
  border-radius: 30px !important;
  background:
    radial-gradient(circle at 18% 0%, color-mix(in srgb, var(--accent) 32%, transparent), transparent 30%),
    linear-gradient(158deg, transparent 0 58%, color-mix(in srgb, var(--danger, #e11d48) 24%, transparent) 58% 70%, transparent 70%),
    linear-gradient(145deg, rgba(255,255,255,0.16), rgba(255,255,255,0.038)),
    rgba(255,255,255,0.06) !important;
  box-shadow: 0 26px 80px rgba(0,0,0,0.34), inset 0 1px 0 rgba(255,255,255,0.12);
}
.public-profile-block::before {
  height: 154px !important;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.04), rgba(0,0,0,0.35)),
    var(--theme-hero-art, none),
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 68%, #0b63ce 32%), #07111f 68%, color-mix(in srgb, var(--danger, #e11d48) 62%, #07111f 38%)) !important;
  background-position: center top, var(--theme-hero-art-position, center top), center !important;
  background-size: cover, var(--theme-hero-art-size, cover), cover !important;
  border-radius: 28px 28px 20px 20px;
  opacity: 1 !important;
}
.public-profile-block::after {
  content: "";
  position: absolute;
  top: 28px;
  right: 28px;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background:
    var(--theme-crest-art, none) center / cover no-repeat,
    linear-gradient(#fff, #fff);
  border: 3px solid rgba(255,255,255,0.86);
  box-shadow: 0 16px 34px rgba(0,0,0,0.34);
  z-index: 1;
}
.public-profile-hub-head {
  min-height: 142px;
  align-items: end !important;
  padding: 78px 2px 8px !important;
}
.public-profile-glyph {
  width: 54px !important;
  height: 54px !important;
  font-size: 1.55rem !important;
  background: rgba(0,0,0,0.28) !important;
  border: 1px solid rgba(255,255,255,0.18);
}
.public-profile-label strong {
  font-size: 1.45rem !important;
  line-height: 1.02;
}
.public-profile-label small {
  max-width: 26ch;
  color: rgba(255,255,255,0.72) !important;
}
.public-profile-preview {
  align-self: end;
  border-radius: 16px !important;
  background: var(--primary-button-gradient, linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 72%, #fff 28%))) !important;
  color: #fff !important;
  border: 0 !important;
  box-shadow: 0 16px 34px color-mix(in srgb, var(--accent) 28%, transparent);
}
.public-profile-hub-tools {
  display: grid !important;
  gap: 12px !important;
}
.public-profile-hub-section {
  border-radius: 22px !important;
  padding: 15px !important;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.13), rgba(255,255,255,0.032)),
    rgba(0,0,0,0.16) !important;
}
.public-profile-section-title strong {
  font-size: 1rem !important;
}
.public-profile-section-title small {
  color: rgba(255,255,255,0.66) !important;
}
.public-profile-action-grid {
  grid-template-columns: 1fr !important;
}
.public-profile-action {
  min-height: 74px !important;
  border-radius: 18px !important;
  grid-template-columns: 42px minmax(0, 1fr) !important;
  text-align: left !important;
  background: rgba(255,255,255,0.07) !important;
}
.public-profile-action span[aria-hidden="true"] {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: color-mix(in srgb, var(--accent) 20%, transparent);
}
.public-profile-action.primary {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 28%, rgba(255,255,255,0.08)), rgba(255,255,255,0.06)) !important;
  border-color: color-mix(in srgb, var(--accent) 46%, rgba(255,255,255,0.16)) !important;
}
.public-profile-subtoggle,
.public-profile-business {
  border-radius: 18px !important;
  background: rgba(255,255,255,0.065) !important;
}
.contact-code-block {
  grid-area: code;
  width: 100% !important;
}
.circle-invite-link-block {
  grid-area: invite;
  width: 100% !important;
}
details.settings,
.settings-panel,
.settings-section,
.change-password-section {
  grid-area: settings;
}
.new-contact,
.hidden-unlock,
.requests-block,
.contact-code-block,
.circle-invite-link-block,
.settings,
.founding-block {
  width: 100% !important;
  margin: 0 !important;
  border-radius: 24px !important;
}
body[data-preset="dr"] .contacts-panel-head,
body[data-preset="bz"] .contacts-panel-head,
body[data-preset="ht"] .contacts-panel-head,
body[data-preset="dr"] .public-profile-block::before,
body[data-preset="bz"] .public-profile-block::before,
body[data-preset="ht"] .public-profile-block::before {
  background:
    linear-gradient(180deg, rgba(0,0,0,0.05), rgba(0,0,0,0.44)),
    var(--theme-hero-art, none),
    linear-gradient(135deg, var(--bg-top, #002d62), #06101f 62%, var(--btn-primary-start, #ce1126)) !important;
  background-position: center top, var(--theme-hero-art-position, center top), center !important;
  background-size: cover, var(--theme-hero-art-size, cover), cover !important;
}
@media (max-width: 900px) {
  .contact-list-wrap {
    grid-template-columns: 1fr;
    grid-template-areas:
      "hero"
      "rail"
      "contacts"
      "new"
      "unlock"
      "profile"
      "requests"
      "code"
      "invite"
      "settings";
  }
  .public-profile-block {
    position: relative !important;
    top: auto;
  }
}
@media (max-width: 640px) {
  .app-header {
    width: calc(100% - 12px) !important;
    margin-top: 6px !important;
    border-radius: 18px !important;
  }
  .contact-list-wrap {
    width: calc(100% - 10px) !important;
    gap: 10px !important;
    padding: 8px !important;
    border-radius: 24px !important;
  }
  .contacts-panel-head {
    min-height: 290px !important;
    grid-template-columns: 1fr !important;
    padding: 20px 14px !important;
    border-radius: 22px !important;
  }
  .contacts-panel-head::after {
    left: 14px;
    right: 14px;
    bottom: 14px;
  }
  .contact-list-wrap .contacts-panel-copy h2 {
    font-size: clamp(2.65rem, 16vw, 4.1rem) !important;
  }
  .contacts-panel-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
  .contacts-panel-stats span {
    min-height: 68px !important;
  }
  .contacts-signal-rail {
    grid-template-columns: 1fr !important;
  }
  .contacts-signal-rail span {
    min-height: 58px;
  }
  .contact-row.contact-row-v2 {
    grid-template-columns: auto minmax(0, 1fr) !important;
    grid-template-areas:
      "avatar info"
      "cluster cluster"
      "open more" !important;
    min-height: 0 !important;
    padding: 15px !important;
    border-radius: 22px !important;
  }
  .contact-row.contact-row-v2 .contact-avatar {
    width: 62px !important;
    height: 62px !important;
  }
  .contact-row.contact-row-v2 .contact-circle-cluster {
    display: grid !important;
    grid-template-columns: 1fr;
  }
  .contact-row.contact-row-v2 .contact-open,
  .contact-row.contact-row-v2 .contact-more {
    width: 100%;
    justify-self: stretch;
  }
  .public-profile-block {
    border-radius: 24px !important;
    padding: 12px !important;
  }
  .public-profile-block::before {
    height: 132px !important;
    border-radius: 22px 22px 18px 18px;
  }
  .public-profile-block::after {
    width: 58px;
    height: 58px;
    top: 22px;
    right: 22px;
  }
  .public-profile-hub-head {
    grid-template-columns: 1fr !important;
    min-height: 126px;
    padding-top: 66px !important;
  }
  .public-profile-preview {
    width: 100%;
  }
}

/* v92 — semantic status lights. Availability is a signal, not a theme
   decoration, so country/community themes must never repaint the dot. */
:root {
  --status-online-green: #2ecc71;
  --status-busy-amber: #f4b740;
  --status-dnd-red: #ff4d57;
}
.status-toggle .status-dot,
.other-status-badge .status-dot {
  border: 1px solid rgba(255,255,255,0.36) !important;
}
.status-toggle.status-online .status-dot,
.other-status-badge.status-online .status-dot,
.status-dot.online,
.status-dot.semantic-online,
body[data-preset] .status-toggle.status-online .status-dot,
body[data-preset] .other-status-badge.status-online .status-dot {
  background: var(--status-online-green) !important;
  box-shadow: 0 0 0 4px rgba(46, 204, 113, 0.16), 0 0 14px rgba(46, 204, 113, 0.72) !important;
}
.status-toggle.status-busy .status-dot,
.other-status-badge.status-busy .status-dot,
body[data-preset] .status-toggle.status-busy .status-dot,
body[data-preset] .other-status-badge.status-busy .status-dot {
  background: var(--status-busy-amber) !important;
  box-shadow: 0 0 0 4px rgba(244, 183, 64, 0.15), 0 0 14px rgba(244, 183, 64, 0.66) !important;
}
.status-toggle.status-dnd .status-dot,
.other-status-badge.status-dnd .status-dot,
body[data-preset] .status-toggle.status-dnd .status-dot,
body[data-preset] .other-status-badge.status-dnd .status-dot {
  background: var(--status-dnd-red) !important;
  box-shadow: 0 0 0 4px rgba(255, 77, 87, 0.15), 0 0 14px rgba(255, 77, 87, 0.68) !important;
}

/* v93 — Private group panel should open something useful, not a dead
   "coming soon" alert. */
.secret-group-panel {
  width: min(92vw, 460px);
}
.secret-group-member-list {
  display: grid;
  gap: 10px;
  margin: 14px 0;
}
.secret-group-member {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 60px;
  padding: 9px 11px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.13);
  background: rgba(255,255,255,0.07);
  color: var(--text);
  text-align: left;
  cursor: pointer;
}
.secret-group-member span {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 26%, transparent);
  font-weight: 950;
}
.secret-group-member strong,
.secret-group-member small {
  min-width: 0;
}
.secret-group-member small {
  color: var(--muted);
  font-weight: 850;
}
.group-chat-row {
  border-color: color-mix(in srgb, var(--accent) 30%, rgba(255,255,255,0.16)) !important;
  background:
    radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 34%),
    linear-gradient(145deg, rgba(255,255,255,0.1), rgba(255,255,255,0.04)) !important;
}
.group-chat-avatar {
  width: 62px;
  height: 62px;
  border-radius: 22px;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--accent) 38%, rgba(255,255,255,0.14));
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--accent) 52%, rgba(255,255,255,0.08)), rgba(255,255,255,0.05));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), 0 14px 32px rgba(0,0,0,0.25);
}
.group-chat-avatar.secret {
  border-color: rgba(255,255,255,0.18);
  background:
    linear-gradient(145deg, rgba(255,255,255,0.14), rgba(255,255,255,0.04)),
    rgba(0,0,0,0.28);
}
.group-chat-avatar span {
  color: #fff;
  font-size: 0.86rem;
  font-weight: 950;
  letter-spacing: 0.04em;
}
.circle-groups-header {
  border-color: color-mix(in srgb, var(--accent) 36%, rgba(255,255,255,0.14)) !important;
}
.circle-group-hint {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 850;
  line-height: 1.25;
  text-align: right;
}
@media (max-width: 640px) {
  .group-chat-avatar {
    width: 56px;
    height: 56px;
    border-radius: 19px;
  }
  .circle-group-hint {
    text-align: left;
  }
}

/* v94 — Profile Studio premium reset. Keep every existing button wired,
   but make the public/private/business profile hub feel like a polished
   product surface instead of a placeholder stack. */
.contact-list-wrap .public-profile-block {
  position: sticky !important;
  top: 96px !important;
  isolation: isolate !important;
  overflow: hidden !important;
  padding: 14px !important;
  border-radius: 30px !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.13), rgba(255,255,255,0.055) 46%, rgba(255,255,255,0.035)),
    rgba(10, 13, 18, 0.78) !important;
  box-shadow:
    0 30px 70px rgba(0,0,0,0.42),
    inset 0 1px 0 rgba(255,255,255,0.16) !important;
  backdrop-filter: blur(24px) saturate(1.08) !important;
}
.contact-list-wrap .public-profile-block::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 0 auto 0 !important;
  height: 158px !important;
  border-radius: 30px 30px 22px 22px !important;
  opacity: 0.82 !important;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.02), rgba(0,0,0,0.58)),
    var(--theme-hero-art, none),
    radial-gradient(circle at 20% 15%, color-mix(in srgb, var(--accent) 34%, transparent), transparent 32%),
    linear-gradient(135deg, #0b1730 0%, #101723 62%, color-mix(in srgb, var(--accent) 38%, #111827)) !important;
  background-size: cover, var(--theme-hero-art-size, cover), cover, cover !important;
  background-position: center, var(--theme-hero-art-position, center), center, center !important;
  pointer-events: none !important;
  z-index: -2 !important;
}
.contact-list-wrap .public-profile-block::after {
  content: "" !important;
  position: absolute !important;
  top: 42px !important;
  right: -34px !important;
  left: auto !important;
  width: min(360px, 74%) !important;
  height: 150px !important;
  border-radius: 999px 0 0 999px !important;
  background:
    radial-gradient(circle at 18% 50%, rgba(255,255,255,0.2), transparent 24%),
    radial-gradient(circle at 58% 38%, color-mix(in srgb, var(--accent) 28%, transparent), transparent 46%),
    linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent) !important;
  filter: blur(2px) !important;
  opacity: 0.72 !important;
  box-shadow: none !important;
  pointer-events: none !important;
  z-index: -1 !important;
}
.contact-list-wrap .public-profile-hub-head {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: end !important;
  gap: 12px !important;
  min-height: 134px !important;
  padding: 58px 8px 10px !important;
  border: 0 !important;
  background: transparent !important;
}
.contact-list-wrap .public-profile-toggle {
  display: grid !important;
  grid-template-columns: 52px minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 10px !important;
  border-radius: 26px !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  background:
    linear-gradient(135deg, rgba(10,16,31,0.68), rgba(255,255,255,0.06)),
    rgba(8, 12, 20, 0.42) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.13),
    0 18px 42px rgba(0,0,0,0.22) !important;
  backdrop-filter: blur(18px) saturate(1.08) !important;
}
.contact-list-wrap .public-profile-glyph {
  width: 52px !important;
  height: 52px !important;
  display: inline-grid !important;
  place-items: center !important;
  border-radius: 18px !important;
  border: 1px solid rgba(255,255,255,0.28) !important;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.2), rgba(255,255,255,0.055)),
    color-mix(in srgb, var(--accent) 32%, rgba(9,13,20,0.72)) !important;
  color: #fff !important;
  font-size: 0.72rem !important;
  font-weight: 950 !important;
  letter-spacing: 0.06em !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 16px 28px rgba(0,0,0,0.24) !important;
}
.contact-list-wrap .public-profile-label {
  min-width: 0 !important;
  display: grid !important;
  gap: 4px !important;
}
.contact-list-wrap .public-profile-label strong {
  color: #fff !important;
  font-size: clamp(1.32rem, 2.7vw, 1.9rem) !important;
  line-height: 1.02 !important;
  font-weight: 950 !important;
  letter-spacing: 0 !important;
}
.contact-list-wrap .public-profile-label small {
  max-width: 34ch !important;
  color: rgba(255,255,255,0.76) !important;
  font-size: 0.8rem !important;
  line-height: 1.3 !important;
  font-weight: 780 !important;
}
.contact-list-wrap .public-profile-track {
  width: 54px !important;
  height: 32px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255,255,255,0.22) !important;
  background: rgba(255,255,255,0.16) !important;
  box-shadow: inset 0 1px 4px rgba(0,0,0,0.36) !important;
}
.contact-list-wrap .public-profile-track::after {
  width: 26px !important;
  height: 26px !important;
  top: 2px !important;
  left: 3px !important;
  background: #fff !important;
  box-shadow: 0 7px 18px rgba(0,0,0,0.28) !important;
}
.contact-list-wrap .public-profile-switch:checked + .public-profile-track {
  background: linear-gradient(135deg, #2ed477, color-mix(in srgb, var(--accent) 72%, #0866ff)) !important;
}
.contact-list-wrap .public-profile-switch:checked + .public-profile-track::after {
  transform: translateX(20px) !important;
}
.contact-list-wrap .public-profile-preview {
  align-self: center !important;
  min-height: 42px !important;
  padding: 0 15px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255,255,255,0.24) !important;
  background: rgba(255,255,255,0.13) !important;
  color: #fff !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0.84rem !important;
  font-weight: 900 !important;
  text-decoration: none !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.14) !important;
}
.contact-list-wrap .public-profile-hub-tools {
  display: grid !important;
  gap: 12px !important;
}
.contact-list-wrap .public-profile-hub-section {
  position: relative !important;
  overflow: hidden !important;
  padding: 14px !important;
  border-radius: 22px !important;
  border: 1px solid rgba(255,255,255,0.13) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.095), rgba(255,255,255,0.04)),
    rgba(7, 10, 15, 0.58) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08) !important;
}
.contact-list-wrap .public-profile-hub-section::before {
  content: "" !important;
  position: absolute !important;
  left: 14px !important;
  top: 0 !important;
  width: 72px !important;
  height: 2px !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 76%, #fff), transparent) !important;
  opacity: 0.82 !important;
}
.contact-list-wrap .public-profile-section-title {
  display: grid !important;
  gap: 4px !important;
  margin-bottom: 12px !important;
}
.contact-list-wrap .public-profile-section-title strong {
  color: #fff !important;
  font-size: 0.98rem !important;
  line-height: 1.1 !important;
  font-weight: 950 !important;
  letter-spacing: 0 !important;
}
.contact-list-wrap .public-profile-section-title small {
  color: rgba(255,255,255,0.64) !important;
  font-size: 0.76rem !important;
  line-height: 1.34 !important;
  font-weight: 760 !important;
}
.contact-list-wrap .public-profile-action-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
}
.contact-list-wrap .public-profile-action {
  position: relative !important;
  overflow: hidden !important;
  min-height: 92px !important;
  grid-template-columns: 1fr !important;
  align-content: end !important;
  gap: 6px !important;
  padding: 16px !important;
  border-radius: 20px !important;
  border: 1px solid rgba(255,255,255,0.13) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.105), rgba(255,255,255,0.045)),
    rgba(255,255,255,0.035) !important;
  color: #fff !important;
  text-align: left !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08) !important;
  cursor: pointer !important;
}
.contact-list-wrap .public-profile-action::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background:
    radial-gradient(circle at 88% 12%, color-mix(in srgb, var(--accent) 26%, transparent), transparent 32%) !important;
  opacity: 0.8 !important;
  pointer-events: none !important;
}
.contact-list-wrap .public-profile-action:hover {
  transform: translateY(-1px) !important;
  border-color: color-mix(in srgb, var(--accent) 42%, rgba(255,255,255,0.18)) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.135), rgba(255,255,255,0.055)),
    rgba(255,255,255,0.04) !important;
}
.contact-list-wrap .public-profile-action span[aria-hidden="true"] {
  display: none !important;
  pointer-events: none !important;
}
.contact-list-wrap .public-profile-action span[aria-hidden="true"]::before {
  content: none !important;
}
.contact-list-wrap .public-profile-action.primary span[aria-hidden="true"]::before,
.contact-list-wrap .public-profile-action.live span[aria-hidden="true"]::before {
  content: none !important;
}
.contact-list-wrap .public-profile-action strong,
.contact-list-wrap .public-profile-action small {
  position: relative !important;
  z-index: 1 !important;
  min-width: 0 !important;
}
.contact-list-wrap .public-profile-action strong {
  font-size: 0.9rem !important;
  line-height: 1.1 !important;
  font-weight: 950 !important;
  color: #fff !important;
}
.contact-list-wrap .public-profile-action small {
  max-width: 19ch !important;
  color: rgba(255,255,255,0.58) !important;
  font-size: 0.72rem !important;
  line-height: 1.25 !important;
  font-weight: 760 !important;
}
.contact-list-wrap .public-profile-action.primary {
  border-color: color-mix(in srgb, var(--accent) 50%, rgba(255,255,255,0.18)) !important;
  background:
    radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--accent) 42%, transparent), transparent 40%),
    linear-gradient(180deg, rgba(255,255,255,0.15), rgba(255,255,255,0.052)),
    rgba(255,255,255,0.045) !important;
}
.contact-list-wrap .public-profile-action.live {
  border-color: rgba(255, 70, 90, 0.45) !important;
}
.contact-list-wrap .public-profile-action.live span[aria-hidden="true"] {
  background: linear-gradient(145deg, #ff3558, #c91131) !important;
  border-color: rgba(255,255,255,0.18) !important;
  box-shadow: 0 0 0 4px rgba(255, 53, 88, 0.15) !important;
}
.contact-list-wrap .public-profile-action.live span[aria-hidden="true"]::before {
  width: 10px !important;
  height: 10px !important;
  background: #fff !important;
  border: 0 !important;
}
.contact-list-wrap .public-profile-subtoggle {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 12px !important;
  min-height: 68px !important;
  margin: 8px 0 10px !important;
  padding: 12px !important;
  border-radius: 18px !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  background: rgba(255,255,255,0.052) !important;
}
.contact-list-wrap .public-profile-subtoggle span {
  min-width: 0 !important;
  display: grid !important;
  gap: 3px !important;
}
.contact-list-wrap .public-profile-subtoggle strong {
  color: #fff !important;
  font-size: 0.84rem !important;
  line-height: 1.22 !important;
  font-weight: 940 !important;
}
.contact-list-wrap .public-profile-subtoggle small {
  color: rgba(255,255,255,0.58) !important;
  font-size: 0.72rem !important;
  line-height: 1.25 !important;
  font-weight: 760 !important;
}
.contact-list-wrap .public-profile-subtoggle input {
  appearance: none !important;
  width: 50px !important;
  height: 30px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  background: rgba(255,255,255,0.16) !important;
  position: relative !important;
  cursor: pointer !important;
  transition: 160ms ease !important;
}
.contact-list-wrap .public-profile-subtoggle input::after {
  content: "" !important;
  position: absolute !important;
  top: 3px !important;
  left: 3px !important;
  width: 22px !important;
  height: 22px !important;
  border-radius: 999px !important;
  background: #fff !important;
  box-shadow: 0 7px 16px rgba(0,0,0,0.25) !important;
  transition: 160ms ease !important;
}
.contact-list-wrap .public-profile-subtoggle input:checked {
  background: linear-gradient(135deg, #2ed477, color-mix(in srgb, var(--accent) 72%, #0866ff)) !important;
}
.contact-list-wrap .public-profile-subtoggle input:checked::after {
  transform: translateX(20px) !important;
}
.contact-list-wrap .public-profile-business {
  width: 100% !important;
  display: grid !important;
  grid-template-columns: 44px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 12px !important;
  min-height: 78px !important;
  padding: 12px !important;
  border-radius: 20px !important;
  border: 1px solid color-mix(in srgb, var(--accent) 40%, rgba(255,255,255,0.14)) !important;
  background:
    radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--accent) 30%, transparent), transparent 40%),
    rgba(255,255,255,0.06) !important;
  color: #fff !important;
  text-align: left !important;
  cursor: pointer !important;
}
.contact-list-wrap .public-profile-business > span:first-child {
  width: 44px !important;
  height: 44px !important;
  display: inline-grid !important;
  place-items: center !important;
  border-radius: 15px !important;
  border: 1px solid rgba(255,255,255,0.16) !important;
  background: color-mix(in srgb, var(--accent) 26%, rgba(255,255,255,0.06)) !important;
  color: #fff !important;
  font-size: 0.68rem !important;
  font-weight: 950 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
}
.contact-list-wrap .public-profile-business strong {
  color: #fff !important;
  font-size: 0.92rem !important;
  font-weight: 950 !important;
}
.contact-list-wrap .public-profile-business small {
  color: rgba(255,255,255,0.62) !important;
  font-size: 0.73rem !important;
  line-height: 1.3 !important;
  font-weight: 760 !important;
}

/* Requests should feel connected and actionable on the same level as the
   upgraded profile studio. */
.contact-list-wrap .requests-block {
  overflow: hidden !important;
  border-radius: 26px !important;
  border: 1px solid rgba(255,255,255,0.15) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.095), rgba(255,255,255,0.04)),
    rgba(8, 11, 17, 0.68) !important;
  box-shadow: 0 22px 54px rgba(0,0,0,0.32), inset 0 1px 0 rgba(255,255,255,0.1) !important;
  backdrop-filter: blur(18px) saturate(1.08) !important;
}
.contact-list-wrap .requests-summary {
  min-height: 76px !important;
  padding: 15px !important;
  gap: 12px !important;
}
.contact-list-wrap .requests-summary-icon {
  width: 48px !important;
  height: 48px !important;
  border-radius: 17px !important;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.18), rgba(255,255,255,0.06)),
    color-mix(in srgb, var(--accent) 30%, transparent) !important;
  color: transparent !important;
  font-size: 0 !important;
  position: relative !important;
}
.contact-list-wrap .requests-summary-icon::before {
  content: "" !important;
  width: 21px !important;
  height: 15px !important;
  border: 2px solid #fff !important;
  border-radius: 5px !important;
  box-shadow: inset 0 -6px 0 rgba(255,255,255,0.16) !important;
}
.contact-list-wrap .requests-summary-copy strong {
  color: #fff !important;
  font-size: 1.04rem !important;
  font-weight: 950 !important;
}
.contact-list-wrap .requests-summary-copy small,
.contact-list-wrap .requests-toolbar span,
.contact-list-wrap .requests-subhead small,
.contact-list-wrap .requests-empty {
  color: rgba(255,255,255,0.62) !important;
  font-weight: 760 !important;
}

/* v102 — Sydal wanted the Requests card to read cleanly without the
   decorative bubble before the word "Requests." Keep this as a cache-safe
   guard in case an older app.html shell still contains the span. */
.contact-list-wrap .requests-summary-icon {
  display: none !important;
}
.contact-list-wrap .requests-toolbar,
.contact-list-wrap .requests-subsection {
  margin-left: 14px !important;
  margin-right: 14px !important;
  border-radius: 18px !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  background: rgba(255,255,255,0.052) !important;
}
.contact-list-wrap .requests-toolbar {
  padding: 12px !important;
}
.contact-list-wrap .requests-toolbar button {
  min-height: 38px !important;
  padding: 0 15px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255,255,255,0.2) !important;
  background: #fff !important;
  color: #111827 !important;
  font-weight: 950 !important;
}
.contact-list-wrap .requests-subhead span {
  color: #fff !important;
  font-weight: 950 !important;
}
.contact-list-wrap .requests-empty {
  margin: 0 14px 14px !important;
  padding: 12px !important;
  border-radius: 18px !important;
  border: 1px dashed rgba(255,255,255,0.18) !important;
  background: rgba(255,255,255,0.04) !important;
}
@media (max-width: 900px) {
  .contact-list-wrap .public-profile-block {
    position: relative !important;
    top: auto !important;
  }
}
@media (max-width: 640px) {
  .contact-list-wrap .public-profile-block {
    padding: 12px !important;
    border-radius: 26px !important;
  }
  .contact-list-wrap .public-profile-block::before {
    height: 150px !important;
    border-radius: 26px 26px 20px 20px !important;
  }
  .contact-list-wrap .public-profile-hub-head {
    grid-template-columns: 1fr !important;
    min-height: 140px !important;
    padding: 54px 6px 10px !important;
  }
  .contact-list-wrap .public-profile-toggle {
    grid-template-columns: 48px minmax(0, 1fr) auto !important;
    gap: 10px !important;
  }
  .contact-list-wrap .public-profile-glyph {
    width: 48px !important;
    height: 48px !important;
  }
  .contact-list-wrap .public-profile-label strong {
    font-size: 1.42rem !important;
  }
  .contact-list-wrap .public-profile-preview {
    width: 100% !important;
  }
  .contact-list-wrap .public-profile-action-grid {
    grid-template-columns: 1fr !important;
  }
  .contact-list-wrap .public-profile-action {
    min-height: 88px !important;
  }
  .contact-list-wrap .public-profile-action small {
    max-width: 28ch !important;
  }
}

/* v96 — clean up owner/business modals. Remove the small circular/badge
   details that made the setup forms feel unfinished. */
.pp-owner-modal {
  backdrop-filter: blur(10px) saturate(1.05) !important;
  -webkit-backdrop-filter: blur(10px) saturate(1.05) !important;
}
.pp-owner-card {
  border-radius: 18px !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.035)),
    color-mix(in srgb, var(--card) 92%, #05070c) !important;
  box-shadow: 0 28px 80px rgba(0,0,0,0.48) !important;
}
.pp-owner-close {
  top: 14px !important;
  right: 14px !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 10px !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  background: rgba(255,255,255,0.055) !important;
  box-shadow: none !important;
  color: rgba(255,255,255,0.82) !important;
  font-size: 1.1rem !important;
}
.pp-owner-close:hover {
  background: rgba(255,255,255,0.11) !important;
  color: #fff !important;
}
.pp-business-enable {
  border-radius: 14px !important;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.055), rgba(255,255,255,0.025)) !important;
}
.pp-business-enable input[type="checkbox"] {
  width: 44px !important;
  height: 24px !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,0.13) !important;
  padding: 0 !important;
  position: relative !important;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.25) !important;
  cursor: pointer !important;
}
.pp-business-enable input[type="checkbox"]::after {
  content: "" !important;
  position: absolute !important;
  top: 3px !important;
  left: 3px !important;
  width: 18px !important;
  height: 18px !important;
  border-radius: 50% !important;
  background: #fff !important;
  box-shadow: 0 4px 10px rgba(0,0,0,0.28) !important;
  transition: transform 160ms ease !important;
}
.pp-business-enable input[type="checkbox"]:checked {
  background: linear-gradient(135deg, #24c067, var(--accent)) !important;
}
.pp-business-enable input[type="checkbox"]:checked::after {
  transform: translateX(20px) !important;
}
.pp-business-template-hint {
  border-radius: 14px !important;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.07), rgba(255,255,255,0.03)) !important;
}/* v100 stripped account-avatar rule */
/* v100 stripped account-avatar rule */
/* v100 stripped account-avatar rule */

@media (max-width: 420px) {/* v100 stripped account-avatar rule */

}

/* v98 — mobile contact cards need room for every action. The previous card
   clipped the Open and menu buttons at the bottom on phone browsers. */
.contact-list::before {
  content: attr(data-list-label) !important;
}
@media (max-width: 640px) {
  .contact-row.contact-row-v2 {
    grid-template-columns: 76px minmax(0, 1fr) !important;
    grid-template-areas:
      "avatar info"
      "cluster cluster"
      "open open"
      "more more" !important;
    min-height: 330px !important;
    height: auto !important;
    overflow: visible !important;
    padding: 24px 20px !important;
    gap: 18px 16px !important;
    align-items: start !important;
  }
  .contact-row.contact-row-v2 .contact-avatar,
  body.adv-contact-avatar-ring .contact-row.contact-row-v2 .contact-avatar {
    width: 72px !important;
    height: 72px !important;
    align-self: start !important;
    justify-self: center !important;
  }
  .contact-row.contact-row-v2 .contact-info {
    min-height: 72px !important;
    justify-content: center !important;
    align-self: start !important;
  }
  .contact-row.contact-row-v2 .contact-name {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }
  .contact-row.contact-row-v2 .contact-circle-cluster {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    align-self: stretch !important;
  }
  .contact-row.contact-row-v2 .contact-circle-cluster .circle-pill,
  .contact-row.contact-row-v2 .contact-circle-cluster .link-pill {
    width: 100% !important;
    min-height: 54px !important;
    justify-content: center !important;
    border-radius: 999px !important;
    font-size: 0.94rem !important;
  }
  .contact-row.contact-row-v2 .contact-open,
  .contact-row.contact-row-v2 .contact-more {
    width: 100% !important;
    min-height: 58px !important;
    height: auto !important;
    justify-self: stretch !important;
    border-radius: 20px !important;
    font-size: 1rem !important;
  }
  .contact-row.contact-row-v2 .contact-more {
    font-size: 1.25rem !important;
  }
}

/* v99 — closed add/unlock cards are full-card tap targets. */
.new-contact:not([open]),
.hidden-unlock:not([open]) {
  cursor: pointer !important;
}
.new-contact:not([open]) summary,
.hidden-unlock:not([open]) summary {
  min-height: 66px !important;
  width: 100% !important;
}
@media (max-width: 640px) {
  .new-contact:not([open]) summary,
  .hidden-unlock:not([open]) summary {
    min-height: 76px !important;
    font-size: 1.04rem !important;
  }
}

/* v100 — desktop Circle creation should not create a second scroll box.
   Let the contact column and Circle picker grow naturally on computers;
   phones keep the compact scrolling behavior from earlier rules. */
@media (min-width: 901px) {
  .app-body .contact-list {
    max-height: none !important;
    overflow: visible !important;
    mask-image: none !important;
    -webkit-mask-image: none !important;
  }
  .contact-list-wrap {
    overflow: visible !important;
  }
  .secret-circle-explainer-card.secret-group-picker-card {
    width: min(760px, calc(100vw - 64px)) !important;
    max-width: 760px !important;
  }
  .secret-group-picker-card .secret-group-pick-list {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    max-height: none !important;
    overflow: visible !important;
  }
  .secret-group-picker-card .secret-circle-explainer-actions {
    margin-top: 18px !important;
  }
}

/* v101 — mobile Circle picker and default branding polish. Phones get a
   compact picker instead of a tall modal, and the neutral/original theme
   uses the real DirectoLink mark instead of text initials. */
.brand-mark-glyph,
.contact-list-wrap .public-profile-glyph.brand-mark-glyph {
  font-size: 0 !important;
  background:
    linear-gradient(rgba(255,255,255,0.94), rgba(255,255,255,0.94)) padding-box,
    var(--header-stripe-pattern, linear-gradient(135deg, #0F4C81, #CE1126)) border-box !important;
}
.brand-mark-glyph::before,
.contact-list-wrap .public-profile-glyph.brand-mark-glyph::before {
  content: "";
  display: block;
  width: 72%;
  height: 72%;
  margin: 14%;
  border-radius: 50%;
  background: url("/directolink-mark.jpg") center / contain no-repeat;
}
body:not([data-preset]) .stealth-card .theme-header-row,
body[data-preset="original"] .stealth-card .theme-header-row {
  flex-direction: column !important;
  gap: 10px !important;
}
body:not([data-preset]) .stealth-card .theme-badge::before,
body[data-preset="original"] .stealth-card .theme-badge::before {
  content: "" !important;
  display: block !important;
  width: 88px !important;
  height: 88px !important;
  border-radius: 50% !important;
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(135deg, #0F4C81 0 48%, #CE1126 52% 100%) border-box !important;
  background-image:
    url("/directolink-mark.jpg"),
    linear-gradient(#fff, #fff),
    linear-gradient(135deg, #0F4C81 0 48%, #CE1126 52% 100%) !important;
  background-position: center, center, center !important;
  background-size: contain, cover, cover !important;
  background-repeat: no-repeat !important;
  border: 3px solid transparent !important;
  box-shadow: 0 18px 44px rgba(0,0,0,0.28) !important;
}
body:not([data-preset]) .stealth-card .theme-wordmark,
body[data-preset="original"] .stealth-card .theme-wordmark {
  display: block !important;
  width: min(260px, 78vw) !important;
  aspect-ratio: 2.55 / 1 !important;
  border-radius: 18px !important;
  background: #fff url("/directolink-wordmark.jpg") center / contain no-repeat !important;
  box-shadow: 0 18px 46px rgba(0,0,0,0.24) !important;
}
body:not([data-preset]) .stealth-card .theme-wordmark::before,
body:not([data-preset]) .stealth-card .theme-wordmark::after,
body[data-preset="original"] .stealth-card .theme-wordmark::before,
body[data-preset="original"] .stealth-card .theme-wordmark::after {
  content: "" !important;
  display: none !important;
}
@media (max-width: 640px) {
  .secret-circle-explainer {
    align-items: flex-end !important;
    padding: 10px !important;
  }
  .secret-circle-explainer-card.secret-group-picker-card {
    width: min(100%, 420px) !important;
    max-width: 420px !important;
    max-height: calc(100dvh - 24px) !important;
    padding: 14px !important;
    border-radius: 22px !important;
    overflow: hidden !important;
  }
  .secret-group-picker-card h3 {
    font-size: 1rem !important;
    margin-bottom: 4px !important;
  }
  .secret-group-picker-card p {
    font-size: 0.8rem !important;
    line-height: 1.25 !important;
    margin-bottom: 10px !important;
  }
  .secret-group-picker-card .secret-group-pick-list {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    max-height: min(36dvh, 260px) !important;
    margin-bottom: 12px !important;
  }
  .secret-group-picker-card .secret-group-pick {
    min-height: 44px !important;
    padding: 8px !important;
    border-radius: 14px !important;
    font-size: 0.86rem !important;
  }
  .secret-group-picker-card .secret-circle-explainer-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }
  .secret-group-picker-card .secret-circle-explainer-actions button {
    min-height: 46px !important;
    padding: 0 12px !important;
  }
}

/* v105 — final Profile Studio visual override.
   This lives at the end of the file so older merge blocks cannot bring back
   the white header line or the placeholder circles in the action tiles. */
.contact-list-wrap .public-profile-block {
  padding: 16px !important;
  border-radius: 28px !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.04)),
    color-mix(in srgb, var(--card-bg, #20211f) 88%, #05070b 12%) !important;
}
.contact-list-wrap .public-profile-block::before {
  content: "" !important;
  position: absolute !important;
  inset: 12px 12px auto 12px !important;
  height: 138px !important;
  border-radius: 24px !important;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 34%, #111827), rgba(10,16,28,0.92) 48%, color-mix(in srgb, var(--secondary, #475569) 28%, #0b1020)) !important;
  background-size: cover !important;
  background-position: center !important;
  opacity: 1 !important;
  filter: none !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.16),
    inset 0 -1px 0 rgba(255,255,255,0.08),
    0 16px 36px rgba(0,0,0,0.24) !important;
  pointer-events: none !important;
  z-index: -2 !important;
}
.contact-list-wrap .public-profile-block::after {
  content: "" !important;
  position: absolute !important;
  inset: 30px 30px auto auto !important;
  width: 86px !important;
  height: 86px !important;
  border-radius: 28px !important;
  background: linear-gradient(135deg, rgba(255,255,255,0.16), rgba(255,255,255,0.04)) !important;
  opacity: 0.5 !important;
  filter: none !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12) !important;
  pointer-events: none !important;
  z-index: -1 !important;
}
.contact-list-wrap .public-profile-hub-head {
  min-height: 138px !important;
  padding: 34px 12px 18px !important;
  align-items: center !important;
}
.contact-list-wrap .public-profile-toggle {
  border-radius: 22px !important;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.12), rgba(255,255,255,0.045)),
    rgba(5, 8, 14, 0.42) !important;
}
.contact-list-wrap .public-profile-label strong {
  font-size: clamp(1.12rem, 2.3vw, 1.48rem) !important;
}
.contact-list-wrap .public-profile-label small {
  max-width: 30ch !important;
}
.contact-list-wrap .public-profile-hub-section {
  overflow: hidden !important;
  border-radius: 20px !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.075), rgba(255,255,255,0.03)),
    rgba(7, 10, 15, 0.48) !important;
}
.contact-list-wrap .public-profile-hub-section::before {
  content: none !important;
  display: none !important;
}
.contact-list-wrap .public-profile-action {
  min-height: 86px !important;
  padding: 15px !important;
  border-radius: 18px !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.105), rgba(255,255,255,0.035)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.10),
    0 12px 24px rgba(0,0,0,0.16) !important;
}
.contact-list-wrap .public-profile-action.primary {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 30%, rgba(255,255,255,0.09)), rgba(255,255,255,0.04)) !important;
  border-color: color-mix(in srgb, var(--accent) 46%, rgba(255,255,255,0.16)) !important;
}
.contact-list-wrap .public-profile-action::before,
.contact-list-wrap .public-profile-action::after,
.contact-list-wrap .public-profile-business::before,
.contact-list-wrap .public-profile-business::after {
  content: none !important;
  display: none !important;
}
.contact-list-wrap .public-profile-action > span[aria-hidden="true"],
.contact-list-wrap .public-profile-action > span[aria-hidden="true"]::before,
.contact-list-wrap .public-profile-action > span[aria-hidden="true"]::after {
  display: none !important;
  content: none !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
.contact-list-wrap .public-profile-action strong {
  font-size: 0.92rem !important;
  line-height: 1.12 !important;
}
.contact-list-wrap .public-profile-action small {
  max-width: 22ch !important;
  color: rgba(255,255,255,0.66) !important;
}
.contact-list-wrap .public-profile-business {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 18%, rgba(255,255,255,0.08)), rgba(255,255,255,0.035)) !important;
}
@media (max-width: 640px) {
  .contact-list-wrap .public-profile-block {
    padding: 12px !important;
    border-radius: 24px !important;
  }
  .contact-list-wrap .public-profile-block::before {
    inset: 10px 10px auto 10px !important;
    height: 126px !important;
    border-radius: 21px !important;
  }
  .contact-list-wrap .public-profile-block::after {
    width: 64px !important;
    height: 64px !important;
    border-radius: 22px !important;
  }
  .contact-list-wrap .public-profile-hub-head {
    min-height: 126px !important;
    padding: 24px 8px 14px !important;
  }
  .contact-list-wrap .public-profile-action {
    min-height: 78px !important;
  }
}

/* v107 bottom guard: this must stay after the Profile Studio overrides so the
   contacts/Circles list cannot become a scroll-trapped box again. */
.app-body .contact-list-wrap,
.contact-list-wrap {
  overflow: visible !important;
}
.app-body .contact-list,
.contact-list {
  max-height: none !important;
  overflow: visible !important;
  overflow-y: visible !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
  scrollbar-width: none !important;
}
.app-body .contact-list::-webkit-scrollbar,
.contact-list::-webkit-scrollbar {
  display: none !important;
}
.contact-row.contact-row-v2 {
  grid-template-columns: 62px minmax(0, 1fr) auto 46px !important;
  grid-template-areas:
    "avatar info open more"
    "avatar cluster cluster cluster" !important;
  min-height: 112px !important;
  height: auto !important;
  padding: 14px 16px !important;
  gap: 10px 12px !important;
  align-items: center !important;
  overflow: visible !important;
}
.contact-row.contact-row-v2 .contact-avatar,
body.adv-contact-avatar-ring .contact-row.contact-row-v2 .contact-avatar {
  width: 58px !important;
  height: 58px !important;
  min-width: 58px !important;
  min-height: 58px !important;
}
.contact-row.contact-row-v2 .contact-info {
  align-self: center !important;
  min-height: 0 !important;
}
.contact-row.contact-row-v2 .contact-name {
  font-size: clamp(1.25rem, 2vw, 1.7rem) !important;
  line-height: 1.05 !important;
}
.contact-row.contact-row-v2 .contact-preview {
  margin-top: 4px !important;
  font-size: clamp(0.8rem, 1.4vw, 1rem) !important;
}
.contact-row.contact-row-v2 .contact-circle-cluster {
  align-self: center !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  margin: 0 !important;
}
.contact-row.contact-row-v2 .contact-circle-cluster .circle-pill,
.contact-row.contact-row-v2 .contact-circle-cluster .link-pill {
  min-height: 30px !important;
  padding: 5px 10px !important;
  font-size: 0.78rem !important;
  line-height: 1.1 !important;
}
.contact-row.contact-row-v2 .contact-open {
  min-width: 84px !important;
  min-height: 42px !important;
  height: auto !important;
  align-self: center !important;
  padding: 8px 16px !important;
}
.contact-row.contact-row-v2 .contact-more {
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  min-height: 42px !important;
  align-self: center !important;
}
.secret-circle-header.circle-groups-header {
  min-height: 0 !important;
  padding: 12px 14px !important;
  gap: 10px !important;
  align-items: center !important;
}
.secret-circle-header.circle-groups-header .secret-circle-title {
  font-size: 1rem !important;
  line-height: 1.1 !important;
}
.secret-circle-header.circle-groups-header .secret-group-btn {
  min-height: 42px !important;
  padding: 9px 16px !important;
}
.circle-group-row.contact-row.contact-row-v2 {
  min-height: 118px !important;
}
@media (max-width: 640px) {
  .contact-row.contact-row-v2 {
    grid-template-columns: 56px minmax(0, 1fr) !important;
    grid-template-areas:
      "avatar info"
      "cluster cluster"
      "open more" !important;
    min-height: 0 !important;
    padding: 14px !important;
    gap: 10px !important;
  }
  .contact-row.contact-row-v2 .contact-avatar,
  body.adv-contact-avatar-ring .contact-row.contact-row-v2 .contact-avatar {
    width: 56px !important;
    height: 56px !important;
    min-width: 56px !important;
    min-height: 56px !important;
  }
  .contact-row.contact-row-v2 .contact-name {
    font-size: 1.2rem !important;
  }
  .contact-row.contact-row-v2 .contact-preview {
    font-size: 0.82rem !important;
    max-width: 100% !important;
  }
  .contact-row.contact-row-v2 .contact-circle-cluster {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: 100% !important;
  }
  .contact-row.contact-row-v2 .contact-circle-cluster .circle-pill,
  .contact-row.contact-row-v2 .contact-circle-cluster .link-pill {
    justify-content: center !important;
    width: 100% !important;
    min-width: 0 !important;
    white-space: normal !important;
  }
  .contact-row.contact-row-v2 .contact-open,
  .contact-row.contact-row-v2 .contact-more {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 44px !important;
  }
  .contact-row.contact-row-v2 .contact-more {
    height: 44px !important;
  }
  .secret-circle-header.circle-groups-header {
    grid-template-columns: 1fr !important;
    padding: 12px !important;
  }
  .secret-circle-header.circle-groups-header .secret-group-btn {
    width: 100% !important;
  }
  .circle-group-row.contact-row.contact-row-v2 {
    min-height: 0 !important;
  }
}
@media (max-width: 380px) {
  .contact-row.contact-row-v2 .contact-circle-cluster {
    grid-template-columns: 1fr !important;
  }
}

/* v108 true bottom guard: add/unlock are compact, clickable whole-card controls. */
.new-contact,
.hidden-unlock {
  align-self: start !important;
}
.new-contact:not([open]),
.hidden-unlock:not([open]) {
  min-height: 88px !important;
  padding: 0 !important;
  display: flex !important;
  align-items: stretch !important;
  cursor: pointer !important;
  transition: transform 140ms ease, border-color 140ms ease, background 140ms ease, box-shadow 140ms ease !important;
}
.new-contact:not([open]):hover,
.hidden-unlock:not([open]):hover,
.new-contact:not([open]):focus-visible,
.hidden-unlock:not([open]):focus-visible {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--accent) 42%, rgba(255,255,255,0.16)) !important;
  box-shadow:
    0 18px 44px rgba(0,0,0,0.22),
    0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent) !important;
}
.new-contact:not([open]) summary,
.hidden-unlock:not([open]) summary {
  width: 100% !important;
  min-height: 88px !important;
  padding: 0 clamp(18px, 4vw, 28px) !important;
  display: flex !important;
  align-items: center !important;
  list-style: none !important;
  cursor: pointer !important;
}
.new-contact:not([open]) summary::-webkit-details-marker,
.hidden-unlock:not([open]) summary::-webkit-details-marker {
  display: none !important;
}
.new-contact[open],
.hidden-unlock[open] {
  padding: 16px !important;
}
@media (max-width: 640px) {
  .new-contact:not([open]),
  .hidden-unlock:not([open]),
  .new-contact:not([open]) summary,
  .hidden-unlock:not([open]) summary {
    min-height: 78px !important;
  }
}

/* v109 final bottom guard: invite-code entry is always visible and centered. */
body.stealth {
  min-height: 100dvh !important;
  justify-content: center !important;
  align-items: center !important;
  overflow-y: auto !important;
  padding: max(16px, env(safe-area-inset-top)) 12px max(18px, env(safe-area-inset-bottom)) !important;
}
body.stealth .stealth-card {
  width: min(100% - 20px, 420px) !important;
  max-width: 420px !important;
  max-height: calc(100dvh - 34px) !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  scrollbar-width: thin !important;
}
body.stealth .stealth-card > * {
  position: relative !important;
  z-index: 2 !important;
}
body.stealth #codeEntryBlock.code-entry-block,
body.stealth #codeEntryBlock[hidden].code-entry-block {
  display: grid !important;
  justify-items: center !important;
  width: 100% !important;
  margin: 16px auto 0 !important;
  padding: 14px !important;
  border-radius: 18px !important;
  border: 1px solid color-mix(in srgb, var(--accent) 30%, rgba(255,255,255,0.16)) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.035)),
    rgba(0,0,0,0.18) !important;
  box-shadow: 0 16px 34px rgba(0,0,0,0.22) !important;
  text-align: center !important;
}
body.stealth .code-entry-heading {
  width: 100% !important;
  margin: 0 0 8px !important;
  text-align: center !important;
}
body.stealth #codeEntryInput {
  width: min(100%, 240px) !important;
  text-align: center !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  font-weight: 850 !important;
}
body.stealth #codeEntryContinueBtn.code-continue-btn {
  width: min(100%, 210px) !important;
  min-height: 46px !important;
  border-radius: 999px !important;
}
body.stealth #codeEntryBlock .muted {
  max-width: 32ch !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
@media (max-width: 520px) {
  body.stealth {
    justify-content: flex-start !important;
    padding-top: max(52px, env(safe-area-inset-top)) !important;
  }
  body.stealth .stealth-card {
    width: min(100% - 12px, 430px) !important;
    max-height: calc(100dvh - 76px) !important;
  }
  body.stealth #codeEntryBlock.code-entry-block {
    padding: 12px !important;
  }
}/* v100 stripped account-avatar rule */
/* v100 stripped account-avatar rule */
/* v100 stripped account-avatar rule */
/* v100 stripped account-avatar rule */
/* v100 stripped account-avatar rule */
/* v100 stripped account-avatar rule */
/* v100 stripped account-avatar rule */
/* v100 stripped account-avatar rule */

@media (max-width: 420px) {/* v100 stripped account-avatar rule */

}/* v100 stripped account-avatar rule */
/* v100 stripped account-avatar rule */
/* v100 stripped account-avatar rule */



/* ========================================================================
   v100 — account-holder avatar = pure contact-avatar copy.
   All bespoke #avatarBtn / .avatar-btn / .avatar-img / .avatar-fallback /
   .account-avatar rules above were stripped. The button now inherits
   .contact-avatar styling automatically. The only thing this block does
   is constrain the size for the header (44px instead of 56px) and hide
   any [hidden] child reliably.
   ======================================================================== */
.app-header #avatarBtn.contact-avatar {
  width: 44px;
  height: 44px;
}
.app-header #avatarBtn.contact-avatar > [hidden] {
  display: none !important;
}
@media (max-width: 420px) {
  .app-header #avatarBtn.contact-avatar {
    width: 40px;
    height: 40px;
  }
}

/* ========================================================================
   v100.3 — fix the giant gap between "+ new contact" and "Unlock a hidden
   contact", and make the "Requests" card the same compact size as those
   two so all three look consistent.
   
   ROOT CAUSE: the .contact-list-wrap grid uses named areas that put
   `new`, `unlock`, and `requests` in the same rows as the tall `profile`
   column. The profile column (Profile Studio block) is ~1900px tall, so
   its row span forces every shared row to be ~330px tall — even though
   the new-contact / hidden-unlock cards are only 90px. That's the gap.
   
   FIX: redo grid-template-areas so the profile column spans ONLY the
   contacts row. The new/unlock/requests rows live below, full-width,
   sized to their compact 88px content.
   ======================================================================== */
.contact-list-wrap {
  grid-template-areas:
    "hero hero"
    "rail rail"
    "contacts profile"
    "new ."
    "unlock ."
    "requests ."
    "code invite"
    "settings settings" !important;
}
/* v100.7 — profile column overflows VISIBLY into the empty right-column
   cells below (rows 4-6), instead of forcing those rows tall. The left
   column (new / unlock / requests) stays tight at ~90px per row, and
   the requests card no longer spans into the right side where the
   Profile Studio body sits. Sydal: "the section is too wide. it goes
   into the other menu on the right." */
.contact-list-wrap > .public-profile-block {
  align-self: start !important;
  overflow: visible !important;
  z-index: 2;
}

/* Make the Requests card behave exactly like .new-contact and
   .hidden-unlock when not opened — same 88px compact height, same
   summary layout, same hover states. */
.requests-block,
details.requests-block {
  align-self: start !important;
  margin-bottom: 0 !important;
  padding: 0 !important;
}
.requests-block:not([open]),
details.requests-block:not([open]) {
  min-height: 88px !important;
  padding: 0 !important;
  display: flex !important;
  align-items: stretch !important;
  cursor: pointer !important;
  border-radius: 16px !important;
  border: 1px solid var(--border) !important;
  background: var(--card) !important;
  transition: transform 140ms ease, border-color 140ms ease, background 140ms ease, box-shadow 140ms ease !important;
}
.requests-block:not([open]):hover,
.requests-block:not([open]):focus-visible {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--accent) 42%, rgba(255,255,255,0.16)) !important;
  box-shadow:
    0 18px 44px rgba(0,0,0,0.22),
    0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent) !important;
}
.requests-block:not([open]) > .requests-summary {
  width: 100% !important;
  min-height: 88px !important;
  padding: 0 clamp(18px, 4vw, 28px) !important;
  display: flex !important;
  align-items: center !important;
  list-style: none !important;
  cursor: pointer !important;
  /* Hide the body art (lock icon, gradient backdrop) when collapsed —
     compact cards just show the summary text and badge. */
  background: transparent !important;
}
.requests-block:not([open]) > .requests-summary::-webkit-details-marker {
  display: none !important;
}
/* The body content (toolbar, profile messages list, lock illustration)
   only renders when [open]. <details> handles that natively, but some
   CSS overrides may have forced the body art visible — explicitly hide
   the decorative children when collapsed. */
.requests-block:not([open]) > *:not(.requests-summary) {
  display: none !important;
}
.requests-block[open] {
  padding: 16px !important;
}
@media (max-width: 640px) {
  .requests-block:not([open]),
  .requests-block:not([open]) > .requests-summary {
    min-height: 78px !important;
  }
}

/* ========================================================================
   v100.4 — visual tightening pass per Sydal 2026-05-05.
   "those boxes are too big. make it more visually appealing."
   - Audience stats rail: smaller padding, tighter type, single horizontal
     strip on mobile so all 4 chips fit in one row.
   - Contact tiles: drop the mobile 330px min-height, reduce padding,
     keep the avatar in line with name/info instead of stacking it.
   - Hero block: reduce the giant 220-330px clamp so the dashboard doesn't
     waste a third of the viewport on the eyebrow art.
   ======================================================================== */

/* --- Audience stats rail (PUBLIC FOLLOWERS / CIRCLE MEMBERS / etc.) --- */
.contacts-signal-rail.audience-stats-rail {
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)) !important;
  gap: 6px !important;
  margin: 4px 0 12px !important;
}
.contacts-signal-rail.audience-stats-rail span {
  padding: 8px 10px !important;
  border-radius: 10px !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}
.contacts-signal-rail.audience-stats-rail strong {
  font-size: 1.25rem !important;
  line-height: 1 !important;
  margin: 0 !important;
}
.contacts-signal-rail.audience-stats-rail em {
  margin-top: 2px !important;
  font-size: 0.62rem !important;
  letter-spacing: 0.04em !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  color: var(--muted) !important;
}
@media (max-width: 640px) {
  .contacts-signal-rail.audience-stats-rail {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* --- Contact + circle row tiles --- */
/* Drop the mobile 330px forced height. Fit all info in ~96px row. */
.contact-row.contact-row-v2 {
  min-height: 0 !important;
  padding: 12px 14px !important;
}
@media (max-width: 640px) {
  .contact-row.contact-row-v2 {
    grid-template-columns: 56px minmax(0, 1fr) auto !important;
    grid-template-areas:
      "avatar info open"
      "avatar cluster cluster" !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 10px 12px !important;
    gap: 6px 12px !important;
    align-items: center !important;
  }
  .contact-row.contact-row-v2 .contact-avatar,
  body.adv-contact-avatar-ring .contact-row.contact-row-v2 .contact-avatar {
    width: 48px !important;
    height: 48px !important;
    align-self: center !important;
    justify-self: start !important;
  }
  .contact-row.contact-row-v2 .contact-info {
    min-height: 0 !important;
  }
  .contact-row.contact-row-v2 .contact-name {
    font-size: 1.05rem !important;
    line-height: 1.15 !important;
  }
  .contact-row.contact-row-v2 .contact-preview {
    font-size: 0.82rem !important;
    line-height: 1.2 !important;
  }
}

/* --- Dashboard hero (the "Social home" / "My Circle" strip at top) --- */
/* The 220-330px clamp ate too much vertical space. Tighten. */
.contacts-panel-head {
  min-height: clamp(140px, 18vw, 200px) !important;
  padding: clamp(16px, 3vw, 28px) !important;
}
.contact-list-wrap .contacts-panel-copy h2 {
  font-size: clamp(1.6rem, 5vw, 3rem) !important;
  margin: 6px 0 4px !important;
}
.contacts-panel-copy p {
  font-size: clamp(0.86rem, 1.8vw, 1.05rem) !important;
}

/* ========================================================================
   v100.6 — invite-link Copy + regen visual cleanup.
   Sydal: "on the right of the code there's a weird oval and circle".
   The Copy button rendered as an oversized pill and the regen ↻ as a
   tiny disconnected circle — they didn't look like part of the same
   row. Now both share consistent rounded styling and the regen icon is
   a solid square button that visually pairs with the link field.
   ======================================================================== */
.circle-invite-link-row {
  grid-template-columns: minmax(0, 1fr) auto auto !important;
  gap: 8px !important;
}
.circle-invite-link-row .circle-invite-link-copy,
.circle-invite-link-row .circle-invite-link-regen {
  min-height: 44px !important;
  height: 44px !important;
  padding: 0 18px !important;
  border-radius: 12px !important;
  border: 1px solid color-mix(in srgb, var(--accent) 32%, rgba(255,255,255,0.18)) !important;
  background: color-mix(in srgb, var(--accent) 18%, rgba(255,255,255,0.05)) !important;
  color: var(--text) !important;
  font-weight: 700 !important;
  font-size: 0.9rem !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap !important;
  cursor: pointer !important;
}
.circle-invite-link-row .circle-invite-link-regen {
  width: 44px !important;
  padding: 0 !important;
  font-size: 1.1rem !important;
}
.circle-invite-link-row .circle-invite-link-copy:hover,
.circle-invite-link-row .circle-invite-link-regen:hover {
  background: color-mix(in srgb, var(--accent) 30%, rgba(255,255,255,0.06)) !important;
  border-color: color-mix(in srgb, var(--accent) 48%, rgba(255,255,255,0.22)) !important;
}

/* ========================================================================
   v100.8 — Contacts list spacing.
   Sydal: "the spacing of the contact is weird. it just says contact in
   small letters with so much space."
   - Bigger "Contacts" heading (matches the type scale of the other
     section labels like "Profile Studio" / "Requests").
   - Less wasted gap between heading and the first contact row.
   - Tighten the gap between contacts inside the list.
   - Make sure the contacts grid area sizes to its actual content rather
     than reserving the full Profile Studio overflow height.
   ======================================================================== */
.contact-list-wrap > .contact-list {
  align-self: start !important;
  gap: 8px !important;
  margin-top: 4px !important;
}
.contact-list-wrap > .contact-list::before {
  content: attr(data-list-label) !important;
  display: block !important;
  font-size: clamp(1.15rem, 2.4vw, 1.45rem) !important;
  font-weight: 950 !important;
  letter-spacing: -0.01em !important;
  color: rgba(255,255,255,0.96) !important;
  margin: 0 0 8px !important;
  padding: 0 4px !important;
  text-transform: none !important;
}

/* Tighten the gap between the audience-stats rail and the contacts
   heading, and between the contacts list and the new-contact card. */
.contact-list-wrap {
  row-gap: 10px !important;
}

/* Remove the empty "trailing" whitespace under the list when there are
   only a few contacts (with `align-self: start` above the list shrinks
   to its content; this just ensures the cluster of cards below it sits
   right against the last contact row). */
.contact-list-wrap > .contact-list {
  max-height: none !important;
  overflow: visible !important;
}

/* ========================================================================
   v100.9 — MOBILE FIX. The 2-column grid (contacts | profile) was being
   applied on phones too, squishing the contact tiles into a vertical
   strip (text wrapping per character — "T e s t 2") while Profile Studio
   crowded the right side. Sydal: "the spacing for the mobile side is so
   bad."
   
   On mobile, collapse to a single column and stack EVERYTHING:
     hero
     rail
     contacts
     new
     unlock
     requests
     profile
     code
     invite
     settings
   ======================================================================== */
@media (max-width: 720px) {
  .contact-list-wrap {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas:
      "hero"
      "rail"
      "contacts"
      "new"
      "unlock"
      "requests"
      "profile"
      "code"
      "invite"
      "settings" !important;
    padding: 12px !important;
    gap: 10px !important;
  }
  /* Profile Studio fills the column at its natural height instead of
     overflowing into empty cells. */
  .contact-list-wrap > .public-profile-block {
    align-self: stretch !important;
    overflow: visible !important;
    width: 100% !important;
    margin-top: 0 !important;
  }
  /* Don't let any sub-section force a wide minimum on a phone. */
  .public-profile-block,
  .public-profile-hub-section,
  .requests-toolbar,
  .requests-subsection {
    min-width: 0 !important;
  }
  /* Contact tiles: lock to the row layout established in v100.4 — avatar
     on the left, info to the right, no per-character vertical wrapping. */
  .contact-row.contact-row-v2 {
    grid-template-columns: 56px minmax(0, 1fr) auto !important;
    grid-template-areas:
      "avatar info open"
      "avatar cluster cluster" !important;
    min-height: 0 !important;
    padding: 10px 12px !important;
    gap: 6px 12px !important;
    align-items: center !important;
  }
  .contact-row.contact-row-v2 .contact-name {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    word-break: normal !important;
  }
  /* Audience-stats rail: 2x2 already set in v100.4; keep it tight. */
  .contacts-signal-rail.audience-stats-rail {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }
}

/* ========================================================================
   v100.10 — empty background + nicer "bubbles".
   Sydal: "make the background empty. also redo the bubbles so something
   more visually appealing."
   - Strip the decorative card background, gradient halo, and
     `::before` art layer off `.contact-list-wrap`. The dashboard now
     sits directly on the body's theme color — empty, clean.
   - Redo the audience-stats rail and contact tiles with a unified
     "bubble" style: dark translucent surface, soft rounded corners,
     gentle accent border, no busy gradients.
   ======================================================================== */

/* --- Empty dashboard background --- */
.app-body .contact-list-wrap,
.contact-list-wrap {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.contact-list-wrap::before,
.contact-list-wrap::after {
  content: none !important;
  display: none !important;
}

/* --- Hero block: drop the heavy art + gradient halo --- */
.contacts-panel-head {
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--accent) 22%, transparent),
      color-mix(in srgb, var(--secondary, #475569) 14%, transparent)) !important;
  border: 1px solid color-mix(in srgb, var(--accent) 24%, rgba(255,255,255,0.12)) !important;
  border-radius: 22px !important;
  min-height: clamp(120px, 16vw, 180px) !important;
  padding: clamp(16px, 3vw, 24px) !important;
  box-shadow: none !important;
}
.contacts-panel-head::after {
  content: none !important;
  display: none !important;
}

/* --- Audience stats: clean unified bubbles --- */
.contacts-signal-rail.audience-stats-rail {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  gap: 8px !important;
}
.contacts-signal-rail.audience-stats-rail span {
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  border-radius: 14px !important;
  padding: 10px 14px !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}
.contacts-signal-rail.audience-stats-rail strong {
  font-size: 1.4rem !important;
  font-weight: 800 !important;
  color: var(--text) !important;
  letter-spacing: -0.01em !important;
}
.contacts-signal-rail.audience-stats-rail em {
  font-size: 0.62rem !important;
  font-weight: 700 !important;
  color: rgba(255,255,255,0.55) !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
}

/* --- Contact + circle tiles: matching bubble style --- */
.contact-row.contact-row-v2 {
  background: rgba(255,255,255,0.045) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 16px !important;
  box-shadow: none !important;
  padding: 12px 14px !important;
  position: relative;
  overflow: hidden;
}
.contact-row.contact-row-v2::before,
.contact-row.contact-row-v2::after {
  display: none !important;
  content: none !important;
}
.contact-row.contact-row-v2:hover {
  background: rgba(255,255,255,0.07) !important;
  border-color: color-mix(in srgb, var(--accent) 28%, rgba(255,255,255,0.14)) !important;
}

/* --- Compact cards (new contact / unlock / requests) bubble parity --- */
.new-contact:not([open]),
.hidden-unlock:not([open]),
.requests-block:not([open]) {
  background: rgba(255,255,255,0.045) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 16px !important;
  box-shadow: none !important;
}

/* --- Profile Studio: matching minimal surface --- */
.contact-list-wrap .public-profile-block {
  background: rgba(255,255,255,0.035) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 20px !important;
  box-shadow: none !important;
  padding: 14px !important;
}
.contact-list-wrap .public-profile-block::before,
.contact-list-wrap .public-profile-block::after {
  display: none !important;
  content: none !important;
}
.public-profile-action,
.public-profile-business {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 14px !important;
  box-shadow: none !important;
}
.public-profile-action::before,
.public-profile-action::after,
.public-profile-business::before,
.public-profile-business::after {
  display: none !important;
  content: none !important;
}

/* v100.10b — kill the floating empty placeholder squares Codex left
   inside Profile Studio (a brand-mark glyph + a big rounded thumbnail
   shell that has no image inside on most installs). The toggle, label,
   and Open page button stay; the empty boxes go. */
.contact-list-wrap .public-profile-glyph,
.contact-list-wrap .public-profile-glyph.brand-mark-glyph {
  display: none !important;
}
.contact-list-wrap .public-profile-glyph::before,
.contact-list-wrap .public-profile-glyph::after {
  display: none !important;
  content: none !important;
}
.public-profile-hub-head {
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 10px !important;
}
.public-profile-toggle {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

/* ========================================================================
   v100.11 — Profile Studio matches Public Page card style.
   Sydal: "remove open page. also make Profile studio the same size and
   shape as public page below it."
   - Hide the standalone "Open page" pill (#publicProfilePreview).
   - Promote .public-profile-hub-head into a card surface that visually
     matches the .public-profile-hub-section ("Public Page") card below
     it: same padding, same border-radius, same translucent fill, same
     full width.
   ======================================================================== */
.contact-list-wrap #publicProfilePreview,
.contact-list-wrap a.public-profile-preview {
  display: none !important;
}

.contact-list-wrap .public-profile-hub-head {
  display: block !important;
  grid-template-columns: none !important;
  width: 100% !important;
  padding: 14px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  background: rgba(255,255,255,0.04) !important;
  box-shadow: none !important;
  margin: 0 0 12px !important;
}
.contact-list-wrap .public-profile-toggle {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  width: 100% !important;
  margin: 0 !important;
}
.contact-list-wrap .public-profile-label {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}
.contact-list-wrap .public-profile-label strong {
  display: block !important;
  font-size: 1.05rem !important;
  font-weight: 800 !important;
  color: var(--text) !important;
  line-height: 1.15 !important;
}
.contact-list-wrap .public-profile-label small {
  display: block !important;
  margin-top: 4px !important;
  font-size: 0.86rem !important;
  color: rgba(255,255,255,0.62) !important;
  line-height: 1.35 !important;
}

/* ========================================================================
   v100.12 — mobile Profile Studio polish.
   Sydal screenshot shows: narrow Profile Studio card with text wrapping
   per word ("Design / the / pages / people / see"), plus an "Open page"
   pill still floating below. Make Profile Studio full-width on mobile,
   horizontal-row toggle + label, and force the Open page pill off
   everywhere.
   ======================================================================== */

/* Belt-and-suspenders kill of the standalone Open Page pill — global. */
#publicProfilePreview,
a.public-profile-preview,
.public-profile-hub-head a.public-profile-preview {
  display: none !important;
  visibility: hidden !important;
}

/* Mobile: Profile Studio header card spans full width + horizontal toggle */
@media (max-width: 720px) {
  .contact-list-wrap .public-profile-block {
    width: 100% !important;
    max-width: 100% !important;
    padding: 14px !important;
  }
  .contact-list-wrap .public-profile-hub-head {
    display: block !important;
    grid-template-columns: none !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 14px !important;
    margin: 0 0 12px !important;
  }
  .contact-list-wrap .public-profile-toggle {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 14px !important;
    width: 100% !important;
  }
  .contact-list-wrap .public-profile-label {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
  }
  .contact-list-wrap .public-profile-label strong {
    font-size: 1.1rem !important;
    line-height: 1.15 !important;
    word-break: normal !important;
    white-space: normal !important;
  }
  .contact-list-wrap .public-profile-label small {
    font-size: 0.85rem !important;
    line-height: 1.35 !important;
    word-break: normal !important;
  }
  /* Toggle switch sits on the right, doesn't shrink */
  .contact-list-wrap .public-profile-switch,
  .contact-list-wrap .public-profile-track {
    flex: 0 0 auto !important;
  }
  /* Public Page sub-action grid: 2 columns on mobile (Open Page / Design Page) */
  .public-profile-action-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
  .public-profile-action {
    min-height: 76px !important;
    padding: 12px !important;
  }
}

/* ========================================================================
   v100.13 — desktop layout fix.
   The 2-column grid (contacts | profile) collapsed weird because the
   `1fr` left column was shrinking to fit-content of the contact list
   (only 2 rows) and the wrap visibly narrowed to ~400px. Sydal: "there
   is a spacing problem in the desktop version. you might need to move
   things around."
   
   Fix: single-column stacked layout at every viewport size. Hero, rail,
   contacts, new, unlock, requests, Profile Studio, Public Page all
   stack vertically with 14px gaps. Centered, max 760px wide. Inside
   Public Page the Open Page / Design Page tiles stay side-by-side via
   their own internal grid.
   ======================================================================== */
.contact-list-wrap {
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-areas:
    "hero"
    "rail"
    "contacts"
    "new"
    "unlock"
    "requests"
    "profile"
    "code"
    "invite"
    "settings" !important;
  width: min(100% - 24px, 760px) !important;
  max-width: 760px !important;
  margin: 22px auto 54px !important;
  gap: 14px !important;
}
.contact-list-wrap > .public-profile-block,
.public-profile-block {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
}
@media (max-width: 720px) {
  .contact-list-wrap {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 12px !important;
    gap: 10px !important;
  }
}

/* ========================================================================
   v100.14 — solid card surfaces.
   Sydal: "its super broken at the bottom. there's like menus in the
   background." The cards from v100.10 used rgba(255,255,255,0.045) —
   barely 4% white over a dark body gradient with theme-art ::before,
   so the cards looked see-through and the geometric body-art bled
   through. Make the surfaces more opaque so each card sits solidly on
   its own dark fill.
   ======================================================================== */
.contacts-signal-rail.audience-stats-rail span,
.contact-row.contact-row-v2,
.new-contact:not([open]),
.hidden-unlock:not([open]),
.requests-block:not([open]),
.contact-list-wrap .public-profile-block,
.contact-list-wrap .public-profile-hub-head,
.contact-list-wrap .public-profile-hub-section,
.public-profile-action,
.public-profile-business,
.contact-code-block,
.circle-invite-link-block,
.add-by-code-row,
details.settings,
details.settings[open],
.change-password-section {
  background: rgba(15, 22, 38, 0.86) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  box-shadow: 0 8px 22px rgba(0,0,0,0.32) !important;
}

/* Inner sub-sections sit one level deeper — slightly lighter so the
   nesting reads. */
.public-profile-action,
.public-profile-business {
  background: rgba(255,255,255,0.05) !important;
  border-color: rgba(255,255,255,0.08) !important;
  box-shadow: none !important;
}

/* Kill any body theme-art bleeding into the dashboard area. */
body[data-preset]::before,
.app-body::before {
  opacity: 0.12 !important;
}

/* The contact-list-wrap should still be transparent so the body color
   shows behind the stack. Just no card-on-card pattern showing. */
.app-body .contact-list-wrap,
.contact-list-wrap {
  background: transparent !important;
}

/* ========================================================================
   v100.16 — Business Page action grid containment fix.
   Sydal: "everything below show my business page has a spacing issue.
   layer on top of layer. you can click the background in between spaces."
   The new #businessProfileActionGrid was inheriting both the old
   .public-profile-business decorative pseudo-elements and the
   .public-profile-action-grid layout from the Public Page section,
   producing absolute-positioned ghost layers. Lock everything down.
   ======================================================================== */
#businessProfileActionGrid,
.business-profile-action-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
  width: 100% !important;
  margin: 12px 0 0 !important;
  padding: 0 !important;
  position: relative !important;
}
#businessProfileActionGrid > .public-profile-action {
  position: relative !important;
  margin: 0 !important;
  padding: 12px !important;
  min-height: 76px !important;
  border-radius: 14px !important;
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  box-shadow: none !important;
  text-align: left !important;
  cursor: pointer !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: 4px !important;
  overflow: hidden !important;
}
#businessProfileActionGrid > .public-profile-action::before,
#businessProfileActionGrid > .public-profile-action::after {
  display: none !important;
  content: none !important;
}
#businessProfileActionGrid > .public-profile-action strong {
  font-size: 0.95rem !important;
  font-weight: 800 !important;
  color: var(--text) !important;
  line-height: 1.2 !important;
}
#businessProfileActionGrid > .public-profile-action small {
  font-size: 0.78rem !important;
  color: rgba(255,255,255,0.6) !important;
  line-height: 1.3 !important;
}
@media (max-width: 720px) {
  #businessProfileActionGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* Make sure the toggle row above the grid sits flush with no orphan
   margin-bottom that would create a gap you can click through. */
#businessProfileToggleRow {
  margin-bottom: 0 !important;
  padding: 12px !important;
}
/* The hub-section that contains Business Page should grow naturally
   with its children — no fixed heights, no overflow:visible into the
   rows below. */
.public-profile-hub-section {
  position: relative !important;
  overflow: visible !important;
}

/* ========================================================================
   v100.17 — flatten everything onto a single plane.
   Sydal: "there shouldn't be two layers for the contact menu. i can
   still click on things in the background. you just need to space it
   out and put the layers on the same plane."
   
   Strip every absolute-positioned pseudo-element and decorative
   overlay inside the dashboard. Every direct child of .contact-list-wrap
   sits in normal flow, opaque, with no z-index and no ::before/::after
   ghost layers that could be tap-through.
   ======================================================================== */

/* Kill the body theme-art layer that sits behind the dashboard. */
body[data-preset]::before,
body::before,
.app-body::before {
  content: none !important;
  display: none !important;
  background: none !important;
}

/* Strip pseudo-elements off every direct child of the dashboard wrap
   AND off every nested card surface. */
.contact-list-wrap *::before,
.contact-list-wrap *::after {
  /* Whitelist a few that are ESSENTIAL for icon glyphs (theme-badge,
     theme-wordmark) — those use ::before for the symbol content. */
}
.contact-list-wrap > *::before,
.contact-list-wrap > *::after,
.contact-list-wrap .public-profile-block::before,
.contact-list-wrap .public-profile-block::after,
.contact-list-wrap .public-profile-hub-section::before,
.contact-list-wrap .public-profile-hub-section::after,
.contact-list-wrap .public-profile-action::before,
.contact-list-wrap .public-profile-action::after,
.contact-list-wrap .public-profile-business::before,
.contact-list-wrap .public-profile-business::after,
.contact-list-wrap .contact-row::before,
.contact-list-wrap .contact-row::after,
.contact-list-wrap .contact-row-v2::before,
.contact-list-wrap .contact-row-v2::after,
.contact-list-wrap .contacts-panel-head::before,
.contact-list-wrap .contacts-panel-head::after,
.contact-list-wrap .contacts-signal-rail::before,
.contact-list-wrap .contacts-signal-rail::after,
.contact-list-wrap .new-contact::before,
.contact-list-wrap .new-contact::after,
.contact-list-wrap .hidden-unlock::before,
.contact-list-wrap .hidden-unlock::after,
.contact-list-wrap .requests-block::before,
.contact-list-wrap .requests-block::after,
.contact-list-wrap .contact-code-block::before,
.contact-list-wrap .contact-code-block::after,
.contact-list-wrap .circle-invite-link-block::before,
.contact-list-wrap .circle-invite-link-block::after,
.contact-list-wrap .circle-invite-link-row::before,
.contact-list-wrap .circle-invite-link-row::after {
  display: none !important;
  content: none !important;
  background: none !important;
  inset: auto !important;
  width: 0 !important;
  height: 0 !important;
}

/* Force every direct child of the dashboard to be static-positioned in
   normal flow. No absolute layers, no z-index, no overlap. */
.contact-list-wrap > * {
  position: static !important;
  z-index: auto !important;
  transform: none !important;
  inset: auto !important;
}

/* The dashboard wrap itself: simple block, no overflow tricks, no
   decorative layers behind. Items stack and the body behind shows
   through ONLY where the wrap is intentionally empty (between the
   max-width column and the viewport edges). */
.contact-list-wrap {
  position: relative !important;
  z-index: auto !important;
  isolation: isolate !important;
  overflow: visible !important;
}

/* Cards: solid fill so the body behind never bleeds through, no
   transparency. */
.contact-list-wrap .contacts-panel-head,
.contact-list-wrap .contacts-signal-rail.audience-stats-rail,
.contact-list-wrap .contact-row.contact-row-v2,
.contact-list-wrap .new-contact:not([open]),
.contact-list-wrap .hidden-unlock:not([open]),
.contact-list-wrap .requests-block:not([open]),
.contact-list-wrap .public-profile-block,
.contact-list-wrap .public-profile-hub-head,
.contact-list-wrap .public-profile-hub-section,
.contact-list-wrap .public-profile-action,
.contact-list-wrap .public-profile-business,
.contact-list-wrap .contact-code-block,
.contact-list-wrap .circle-invite-link-block,
.contact-list-wrap .add-by-code-row,
.contact-list-wrap details.settings,
.contact-list-wrap .change-password-section,
.contact-list-wrap #businessProfileActionGrid > .public-profile-action {
  background-color: #0F1626 !important;
  background-image: none !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* The audience stats rail tiles need their own opaque fill since they
   are sub-items inside a transparent grid container. */
.contact-list-wrap .contacts-signal-rail.audience-stats-rail {
  background-color: transparent !important;
  border: 0 !important;
  padding: 0 !important;
}
.contact-list-wrap .contacts-signal-rail.audience-stats-rail > span {
  background-color: #0F1626 !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
}

/* ========================================================================
   v100.18 — DESKTOP ONLY card-in-card flatten.
   Sydal: "Mobile works perfectly don't touch it. The problem is with
   the desktop." On desktop the .public-profile-hub-section has an
   opaque card background, AND the .public-profile-block parent ALSO
   has one — visible as nested rectangles. Make the hub-sections
   transparent on desktop so the parent block reads as ONE card with
   sections inside, not card-on-card. Mobile rules from earlier passes
   are unchanged.
   ======================================================================== */
@media (min-width: 721px) {
  .contact-list-wrap .public-profile-hub-section {
    background: transparent !important;
    background-color: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 0 18px !important;
  }
  .contact-list-wrap .public-profile-hub-section + .public-profile-hub-section {
    border-top: 1px solid rgba(255,255,255,0.08) !important;
    padding-top: 18px !important;
  }
  /* The hub-head (Profile Studio toggle row) at the top of the block
     stays as its own card surface, separated from the sections below
     it by a gap inside the parent block. */
  .contact-list-wrap .public-profile-hub-head {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    margin: 0 0 18px !important;
    padding: 0 !important;
  }
  /* Make the parent block tall enough to contain everything cleanly. */
  .contact-list-wrap .public-profile-block {
    padding: 18px !important;
  }
}

/* ========================================================================
   v100.19 — make action tiles look like INSET items inside the parent
   Profile Studio card on desktop, not floating cards on a separate
   layer. The Open Business Page / Business Setup tiles (and Public
   Page's Open Page / Design Page tiles) now use a lighter shade that
   reads as a sub-element of the parent card rather than a sibling.
   ======================================================================== */
@media (min-width: 721px) {
  .contact-list-wrap .public-profile-action,
  .contact-list-wrap #businessProfileActionGrid > .public-profile-action,
  .contact-list-wrap .public-profile-business {
    background-color: rgba(255,255,255,0.04) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    box-shadow: none !important;
  }
  .contact-list-wrap .public-profile-action:hover,
  .contact-list-wrap #businessProfileActionGrid > .public-profile-action:hover,
  .contact-list-wrap .public-profile-business:hover {
    background-color: rgba(255,255,255,0.07) !important;
    border-color: rgba(255,255,255,0.14) !important;
  }
  /* Same for the toggle rows inside a hub-section — they're sub-elements
     of the parent card, not separate cards. */
  .contact-list-wrap .public-profile-subtoggle,
  .contact-list-wrap #businessProfileToggleRow,
  .contact-list-wrap #followersCanMessageRow {
    background-color: rgba(255,255,255,0.04) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: 14px !important;
    padding: 12px 14px !important;
    margin: 0 0 10px !important;
  }
  /* Section title spacing: heading sits flush above the inset items. */
  .contact-list-wrap .public-profile-section-title {
    margin: 4px 4px 10px !important;
  }
}

/* ========================================================================
   v100.20 — apply the mobile MY CODE / INVITE LINK / settings layout
   to desktop too. Sydal: "Just do it the same way you did on mobile.
   Everything is fine until you get to my code on the desktop version."
   The remaining desktop weirdness was the .circle-invite-link-row using
   a 4-column grid (label / link / Copy / regen), absolute-positioned
   pseudo-elements on the contact-code-block, and stale grid-areas.
   Pin everything to a clean stacked column on desktop too.
   ======================================================================== */
@media (min-width: 721px) {
  /* Code / invite area: each row spans full width of the dashboard
     column (760px max), so MY CODE and YOUR INVITE LINK each get
     their own full-width opaque card, stacked vertically. */
  .contact-list-wrap > .contact-code-block,
  .contact-list-wrap > .circle-invite-link-block,
  .contact-list-wrap > details.settings,
  .contact-list-wrap > .change-password-section {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 16px !important;
  }
  /* Code block internal layout: stack vertically. The "Copy" + "regen"
     buttons go below the code on their own row, each pill full-width. */
  .contact-list-wrap .contact-code-block .contact-code-header {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
  }
  .contact-list-wrap .contact-code-block .contact-code-text {
    width: 100% !important;
    text-align: center !important;
  }
  .contact-list-wrap .contact-code-block .contact-code-copy,
  .contact-list-wrap .contact-code-block .contact-code-regen {
    width: 100% !important;
    height: 44px !important;
    border-radius: 999px !important;
    font-weight: 700 !important;
  }
  /* Invite link row: stack the link, Copy, and regen vertically too. */
  .contact-list-wrap .circle-invite-link-block .circle-invite-link-row {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
  }
  .contact-list-wrap .circle-invite-link-block .circle-invite-link-text {
    width: 100% !important;
    text-align: center !important;
    word-break: break-all !important;
  }
  .contact-list-wrap .circle-invite-link-block .circle-invite-link-copy {
    width: 100% !important;
    height: 44px !important;
    border-radius: 999px !important;
  }
  .contact-list-wrap .circle-invite-link-block .circle-invite-link-regen {
    width: 100% !important;
    height: 44px !important;
    border-radius: 999px !important;
  }
  /* Add-by-code form row: stack the input + name + Add contact pill. */
  .contact-list-wrap .add-by-code-row {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 12px 0 0 !important;
  }
  .contact-list-wrap .add-by-code-row input,
  .contact-list-wrap .add-by-code-row button {
    width: 100% !important;
    min-height: 44px !important;
    border-radius: 14px !important;
  }
  /* Settings: clean stacked layout, no nested-card visuals. */
  .contact-list-wrap details.settings > summary {
    cursor: pointer !important;
    padding: 8px 0 !important;
    font-weight: 700 !important;
  }
  .contact-list-wrap details.settings[open] {
    padding: 16px !important;
  }
}

/* ========================================================================
   v100.21 — Sydal asks 2026-05-05:
   1. Contacts heading is bumping the top edge — give it breathing room.
   2. Invite to my Circle pill: RED when nothing is set, GREEN once
      invited (or when mutual). Visual cue that you've already invited
      this person.
   3. (Pending follow-up: full Links section as a separate area for
      people who got a link but haven't joined yet — that's a data-model
      change for a later drop. This drop is just the visual rule above.)
   ======================================================================== */
.contact-list-wrap > .contact-list,
.contact-list-wrap > .contact-list::before {
  margin-top: 14px !important;
}
.contact-list-wrap > .contact-list::before {
  margin-bottom: 12px !important;
  font-size: clamp(1.2rem, 2.6vw, 1.55rem) !important;
}

/* Default state: Invite to my Circle — RED */
.circle-pill.add-to-circle {
  background:
    linear-gradient(135deg, #DC2626, #991B1B) !important;
  color: #fff !important;
  border: 1px solid color-mix(in srgb, #DC2626 60%, #fff 40%) !important;
  box-shadow: 0 6px 18px rgba(220, 38, 38, 0.32) !important;
  font-weight: 800 !important;
}
.circle-pill.add-to-circle:hover {
  background:
    linear-gradient(135deg, #EF4444, #B91C1C) !important;
  border-color: color-mix(in srgb, #DC2626 70%, #fff 30%) !important;
}

/* After clicking: invite pending — GREEN */
.circle-pill.pending {
  background:
    linear-gradient(135deg, #16A34A, #15803D) !important;
  color: #fff !important;
  border: 1px solid color-mix(in srgb, #16A34A 60%, #fff 40%) !important;
  box-shadow: 0 6px 18px rgba(22, 163, 74, 0.32) !important;
  font-weight: 800 !important;
}

/* Mutual circle — also GREEN (already in your circle) */
.circle-pill.mutual {
  background:
    linear-gradient(135deg, #16A34A, #15803D) !important;
  color: #fff !important;
  border: 1px solid color-mix(in srgb, #16A34A 60%, #fff 40%) !important;
  box-shadow: 0 6px 18px rgba(22, 163, 74, 0.32) !important;
  font-weight: 800 !important;
}

/* Override the per-country presets that re-color this button. */
body[data-preset="dr"] .circle-pill.add-to-circle,
body[data-preset="bz"] .circle-pill.add-to-circle,
body[data-preset="ht"] .circle-pill.add-to-circle,
body[data-preset="caribbean"] .circle-pill.add-to-circle,
body[data-preset="midnight"] .circle-pill.add-to-circle,
body[data-preset="sunset"] .circle-pill.add-to-circle,
body[data-preset="minimal"] .circle-pill.add-to-circle {
  background:
    linear-gradient(135deg, #DC2626, #991B1B) !important;
  border-color: color-mix(in srgb, #DC2626 60%, #fff 40%) !important;
}
body[data-preset="dr"] .circle-pill.pending,
body[data-preset="bz"] .circle-pill.pending,
body[data-preset="ht"] .circle-pill.pending,
body[data-preset="dr"] .circle-pill.mutual,
body[data-preset="bz"] .circle-pill.mutual,
body[data-preset="ht"] .circle-pill.mutual {
  background:
    linear-gradient(135deg, #16A34A, #15803D) !important;
  border-color: color-mix(in srgb, #16A34A 60%, #fff 40%) !important;
}

/* v100.22 — Links list mirrors the Contacts list layout. The header
   uses the same data-list-label pseudo-element treatment, with a
   slightly muted accent color to distinguish from Contacts. */
.contact-list-wrap > .links-list {
  align-self: start !important;
  gap: 8px !important;
  margin-top: 4px !important;
  margin-bottom: 14px !important;
}
.contact-list-wrap > .links-list::before {
  content: attr(data-list-label) !important;
  display: block !important;
  font-size: clamp(1.15rem, 2.4vw, 1.45rem) !important;
  font-weight: 950 !important;
  color: rgba(255,255,255,0.86) !important;
  margin: 0 0 8px !important;
  padding: 0 4px !important;
}

/* v100.22b — flatten EVERY remaining wrapper below the Profile Studio
   block onto the same plane on desktop. requests-block, contact-code-
   block, circle-invite-link-block, settings, change-password — all get
   identical card treatment, full width, no nested layers. */
@media (min-width: 721px) {
  .contact-list-wrap > .requests-block,
  .contact-list-wrap > .contact-code-block,
  .contact-list-wrap > .circle-invite-link-block,
  .contact-list-wrap > details.settings,
  .contact-list-wrap > .change-password-section,
  .contact-list-wrap > .founding-block:not([hidden]) {
    background-color: #0F1626 !important;
    background-image: none !important;
    border: 1px solid rgba(255,255,255,0.10) !important;
    border-radius: 16px !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    padding: 16px !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    grid-column: 1 / -1 !important;
    position: static !important;
    z-index: auto !important;
    overflow: visible !important;
  }
  .contact-list-wrap > .requests-block::before,
  .contact-list-wrap > .requests-block::after,
  .contact-list-wrap > .contact-code-block::before,
  .contact-list-wrap > .contact-code-block::after,
  .contact-list-wrap > .circle-invite-link-block::before,
  .contact-list-wrap > .circle-invite-link-block::after {
    display: none !important;
    content: none !important;
  }
}

/* ========================================================================
   v100.23 — STRETCH desktop wrap + flatten EVERY child onto one plane.
   Sydal: "nothing is on the same level in the desktop. put it on the
   same level and stretch it out."
   - Wrap goes from 760px max → use the browser width up to 1120px.
   - Every direct child of .contact-list-wrap shares one surface
     treatment: same #0F1626 fill, same border, same radius, same flat
     shadow-less treatment, full 100% width of the wrap.
   ======================================================================== */
@media (min-width: 721px) {
  .contact-list-wrap {
    width: min(100% - 32px, 1120px) !important;
    max-width: 1120px !important;
    margin: 22px auto 54px !important;
    padding: 22px !important;
    gap: 14px !important;
  }
  .contact-list-wrap > *:not(.contacts-signal-rail):not(.contacts-panel-head) {
    background-color: #0F1626 !important;
    background-image: none !important;
    border: 1px solid rgba(255,255,255,0.10) !important;
    border-radius: 16px !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    width: 100% !important;
    max-width: 100% !important;
    grid-column: 1 / -1 !important;
    margin: 0 !important;
    padding: 18px !important;
    position: static !important;
    z-index: auto !important;
    transform: none !important;
    overflow: visible !important;
  }
  /* Header / hero get their own slightly different surface but still
     same plane (no shadows, no overlap). */
  .contact-list-wrap > .contacts-panel-head {
    width: 100% !important;
    grid-column: 1 / -1 !important;
    margin: 0 !important;
  }
  /* Audience stats sit transparent above their tile children. */
  .contact-list-wrap > .contacts-signal-rail.audience-stats-rail {
    background-color: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    grid-column: 1 / -1 !important;
    margin: 0 !important;
  }
  /* The lists (linksList, contactList) are .contact-list with class —
     they're caught by the *:not() above, so they get the card. We want
     the LI rows inside to be transparent so they don't look like
     cards-on-a-card. */
  .contact-list-wrap > .contact-list .contact-row.contact-row-v2 {
    background-color: rgba(255,255,255,0.04) !important;
    border-color: rgba(255,255,255,0.08) !important;
  }
}

/* v100.24 — apply the same flatten on mobile too. Sydal: "Same issue
   on mobile." */
.contact-list-wrap > *:not(.contacts-signal-rail):not(.contacts-panel-head) {
  background-color: #0F1626 !important;
  background-image: none !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  border-radius: 16px !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 16px !important;
  position: static !important;
  z-index: auto !important;
  transform: none !important;
  overflow: visible !important;
}
.contact-list-wrap > .contacts-panel-head {
  width: 100% !important;
  margin: 0 !important;
}
.contact-list-wrap > .contacts-signal-rail.audience-stats-rail {
  background-color: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  margin: 0 !important;
}
.contact-list-wrap > .contact-list .contact-row.contact-row-v2 {
  background-color: rgba(255,255,255,0.04) !important;
  border-color: rgba(255,255,255,0.08) !important;
}
@media (max-width: 720px) {
  .contact-list-wrap {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 12px !important;
    gap: 10px !important;
  }
  .contact-list-wrap > *:not(.contacts-signal-rail):not(.contacts-panel-head) {
    padding: 14px !important;
  }
}

/* v100.25 — Circle groups header was rendering inside the .contact-list
   ul and overlapping the first contact row. Force every child of the
   contact list (including section headers, group tiles, and message
   hints) to stack as normal block flow. No absolute positioning. */
.contact-list-wrap > .contact-list,
.contact-list-wrap > .links-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  list-style: none !important;
  padding: 0 !important;
}
.contact-list-wrap > .contact-list > *,
.contact-list-wrap > .links-list > *,
.contact-list-wrap > .contact-list .secret-circle-dock,
.contact-list-wrap > .contact-list .secret-circle-list,
.contact-list-wrap > .contact-list .group-section-header {
  position: static !important;
  z-index: auto !important;
  transform: none !important;
  margin: 0 !important;
  width: 100% !important;
}
.contact-list-wrap > .contact-list .group-section-header,
.contact-list-wrap > .contact-list h3 {
  margin-top: 14px !important;
  margin-bottom: 6px !important;
  padding: 0 4px !important;
  font-size: 1.05rem !important;
  font-weight: 800 !important;
  color: rgba(255,255,255,0.86) !important;
}

/* ========================================================================
   v100.26 — fix TOP of desktop dashboard. Sydal: "you fixed the bottom
   on the contact page in desktop. the top is the problem."
   The hero block and audience-stats rail still had the old over-styled
   treatment (huge type, tall hero with gradient art, weird stats grid).
   Flatten both to match the rest of the cards.
   ======================================================================== */

/* Hero block: flat solid card, normal type, no decorative gradient art. */
.contact-list-wrap > .contacts-panel-head {
  background-color: #0F1626 !important;
  background-image: none !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  border-radius: 16px !important;
  box-shadow: none !important;
  min-height: 0 !important;
  padding: 18px !important;
  width: 100% !important;
  margin: 0 !important;
  overflow: hidden !important;
}
.contact-list-wrap > .contacts-panel-head::before,
.contact-list-wrap > .contacts-panel-head::after {
  display: none !important;
  content: none !important;
}
.contact-list-wrap .contacts-eyebrow {
  font-size: 0.7rem !important;
  padding: 4px 10px !important;
  background: rgba(255,255,255,0.08) !important;
  border-color: rgba(255,255,255,0.12) !important;
  display: inline-flex !important;
  width: fit-content !important;
  min-height: 0 !important;
  margin: 0 0 8px !important;
}
.contact-list-wrap .contacts-panel-copy h2 {
  font-size: clamp(1.4rem, 2.8vw, 1.9rem) !important;
  margin: 0 0 6px !important;
  line-height: 1.15 !important;
  font-weight: 800 !important;
  letter-spacing: -0.01em !important;
  text-shadow: none !important;
}
.contact-list-wrap .contacts-panel-copy p {
  font-size: 0.92rem !important;
  line-height: 1.4 !important;
  color: rgba(255,255,255,0.7) !important;
  margin: 0 !important;
}

/* Stats rail: flat 4-column row of small chips with subtle border. */
.contact-list-wrap > .contacts-signal-rail.audience-stats-rail {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)) !important;
  gap: 8px !important;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
}
.contact-list-wrap > .contacts-signal-rail.audience-stats-rail span {
  background-color: #0F1626 !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  border-radius: 14px !important;
  padding: 10px 14px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}
.contact-list-wrap > .contacts-signal-rail.audience-stats-rail strong {
  font-size: 1.35rem !important;
  font-weight: 800 !important;
  color: var(--text) !important;
  line-height: 1 !important;
}
.contact-list-wrap > .contacts-signal-rail.audience-stats-rail em {
  font-size: 0.62rem !important;
  font-weight: 700 !important;
  color: rgba(255,255,255,0.55) !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  font-style: normal !important;
  margin-top: 2px !important;
}
@media (max-width: 720px) {
  .contact-list-wrap > .contacts-signal-rail.audience-stats-rail {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* ========================================================================
   v100.28 — RESTORE the Links / Contacts section headers.
   v100.17 nuked every ::before on direct children of .contact-list-wrap
   to flatten the layers — but that ALSO killed the contact-list::before
   pseudo-elements that show the "Links" / "Contacts" labels above each
   list. Re-enable specifically those two.
   ======================================================================== */
.contact-list-wrap > #linksList::before,
.contact-list-wrap > #contactList::before,
.contact-list-wrap > .links-list::before,
.contact-list-wrap > .contact-list::before {
  content: attr(data-list-label) !important;
  display: block !important;
  font-size: clamp(1.2rem, 2.6vw, 1.55rem) !important;
  font-weight: 950 !important;
  color: rgba(255,255,255,0.96) !important;
  margin: 4px 4px 12px !important;
  padding: 0 !important;
  background: none !important;
  width: auto !important;
  height: auto !important;
}
.contact-list-wrap > #linksList::before {
  /* Visually distinguish Links from Contacts with a subtle accent. */
  color: color-mix(in srgb, var(--accent) 78%, #fff 22%) !important;
}

/* ========================================================================
   v100.29 — REAL <h2> Links / Contacts headers. Pseudo-elements kept
   getting stripped by other flatten rules; using actual heading
   elements that no ::before nuke can hit.
   ======================================================================== */
.dashboard-list-section {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  background-color: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
.dashboard-list-heading {
  display: block !important;
  font-size: clamp(1.2rem, 2.6vw, 1.55rem) !important;
  font-weight: 950 !important;
  margin: 4px 4px 12px !important;
  padding: 0 !important;
  color: rgba(255,255,255,0.96) !important;
  letter-spacing: -0.01em !important;
}
.dashboard-list-heading-links {
  color: color-mix(in srgb, var(--accent) 78%, #fff 22%) !important;
}
.dashboard-list-section .contact-list,
.dashboard-list-section ul.contact-list {
  background-color: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* v100.30b — kill the duplicate pseudo-element "Links"/"Contacts" label
   from v100.28 since v100.29 uses real <h2> headings. Sydal: "for
   links keep the purple one and delete the white one." */
.contact-list-wrap > #linksList::before,
.contact-list-wrap > #contactList::before,
.contact-list-wrap > .links-list::before,
.contact-list-wrap > .contact-list::before,
.dashboard-list-section .contact-list::before,
.dashboard-list-section .links-list::before {
  display: none !important;
  content: none !important;
}

/* ========================================================================
   v100.32 — drop the named grid-template-areas and stack everything in
   source order via flexbox column. The grid-template-areas was placing
   sections by name (hero/rail/contacts/new/etc.) and the new linksSection
   + contactsSection elements weren't named, so they got auto-placed in
   weird positions far from where Sydal expects (Links → Contacts → new
   contact, in that order, immediately one after another).
   ======================================================================== */
.contact-list-wrap {
  display: flex !important;
  flex-direction: column !important;
  grid-template-areas: none !important;
  grid-template-columns: 1fr !important;
  gap: 14px !important;
}
.contact-list-wrap > * {
  grid-area: auto !important;
  grid-column: auto !important;
  grid-row: auto !important;
}
@media (max-width: 720px) {
  .contact-list-wrap {
    gap: 10px !important;
  }
}

/* v100.38 — circle delete (✕) button next to Open. */
.contact-row.contact-row-v2 .delete-circle-btn {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  border: 1px solid rgba(255,255,255,0.16) !important;
  background: rgba(255,255,255,0.04) !important;
  color: rgba(255,255,255,0.7) !important;
  cursor: pointer !important;
  font-size: 0.95rem !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-left: 8px !important;
  padding: 0 !important;
}
.contact-row.contact-row-v2 .delete-circle-btn:hover {
  background: rgba(220, 38, 38, 0.22) !important;
  border-color: rgba(220, 38, 38, 0.55) !important;
  color: #fff !important;
}

/* ========================================================================
   v100.39 — chat compose + bubble fix.
   1. Photo / Timer / Flash / Voice / Apps (📎) all share the SAME pill
      shape on the compose row. Currently 📎 is a small icon-only
      button while the others are pills with text.
   2. Message bubbles in chat were rendering as full-width bars because
      they were getting `width: 100%` from a flex parent. Lock width
      back to content-size with the original 78% cap.
   ======================================================================== */

/* Compose row buttons — uniform pills */
#sendActions .attach-btn,
#sendActions #attachFileBtn,
#sendActions #vanishModeBtn,
#sendActions .tool-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  height: 40px !important;
  min-height: 40px !important;
  padding: 0 14px !important;
  border-radius: 999px !important;
  border: 1px solid var(--border) !important;
  background: var(--card-2) !important;
  color: var(--text) !important;
  font-size: 0.85rem !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
  margin: 0 4px 0 0 !important;
  cursor: pointer !important;
}
#sendActions .attach-btn:hover,
#sendActions #attachFileBtn:hover,
#sendActions #vanishModeBtn:hover,
#sendActions .tool-btn:hover {
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border) 60%) !important;
}

/* Chat bubble: enforce content-sized width, never stretch full-width. */
.messages .bubble,
.messages .bubble.me,
.messages .bubble.them,
.message-list .bubble,
.message-list .bubble.me,
.message-list .bubble.them {
  display: inline-block !important;
  width: auto !important;
  max-width: 78% !important;
  align-self: auto !important;
}
.messages .bubble.me,
.message-list .bubble.me {
  align-self: flex-end !important;
  margin-left: auto !important;
}
.messages .bubble.them,
.message-list .bubble.them {
  align-self: flex-start !important;
  margin-right: auto !important;
}
.messages > .msg-row,
.message-list > .msg-row {
  display: flex !important;
  width: 100% !important;
}
.messages > .msg-row.me,
.message-list > .msg-row.me {
  justify-content: flex-end !important;
}
.messages > .msg-row.them,
.message-list > .msg-row.them {
  justify-content: flex-start !important;
}

/* ========================================================================
   v100.41 — paperclip pill + bubble fix (round 2).
   Sydal: "the bubble the paperclip is in is wrong. look at the ones
   next to it and do it the same way. as you didnt fix the messages.
   you already had it right. why did you break it"
   Force the Files paperclip button to match Photo/Timer/Flash/Voice.
   Force bubbles to fit-content, with align-self via flex parent and
   width capped at the original 78%.
   ======================================================================== */

/* Files paperclip pill — explicit identical sizing to Photo/Timer/etc. */
#sendActions #attachFileBtn,
#sendActions .attach-btn.tool-btn,
.send-form #attachFileBtn,
.send-form .attach-btn {
  height: 40px !important;
  min-height: 40px !important;
  padding: 0 16px !important;
  border-radius: 999px !important;
  border: 1px solid var(--border) !important;
  background: var(--card-2) !important;
  color: var(--text) !important;
  font-size: 0.85rem !important;
  font-weight: 700 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  margin: 0 4px 0 0 !important;
  width: auto !important;
}
#sendActions #attachFileBtn > span,
.send-form #attachFileBtn > span,
#sendActions #vanishModeBtn > span {
  display: inline !important;
  font-size: inherit !important;
}

/* Bubble fit-content fix — restore the pre-v100 look. */
.messages .bubble,
.messages .bubble.me,
.messages .bubble.them {
  width: fit-content !important;
  max-width: 78% !important;
  display: inline-block !important;
  align-self: flex-start !important;
  margin: 0 !important;
}
.messages .bubble.me {
  align-self: flex-end !important;
}
/* v100.54 — desktop bubble sizing kept big (perfect per Sydal). Mobile
   gets a smaller, more readable size. Sydal: "desktop is perfect.
   mobile is broken. make sure to only make the mobile smaller". */

/* DESKTOP (>= 721px): the v100.53 sizes that landed perfectly. */
@media (min-width: 721px) {
  body .messages .bubble,
  html body .chat-body .messages .bubble {
    padding: 80px 100px !important;
    max-width: 96% !important;
    min-width: 380px !important;
    border-radius: 40px !important;
    margin: 16px 0 !important;
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
  }
  body .messages .bubble .meta {
    margin-top: 24px !important;
    display: block !important;
  }
}

/* MOBILE (<= 720px): smaller padding, comfortable phone-sized bubble. */
@media (max-width: 720px) {
  body .messages .bubble,
  html body .chat-body .messages .bubble {
    padding: 14px 18px !important;
    max-width: 88% !important;
    min-width: 0 !important;
    border-radius: 20px !important;
    margin: 6px 0 !important;
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
  }
  body .messages .bubble .meta {
    margin-top: 6px !important;
    display: block !important;
  }
}

/* Translate + 🔊 buttons render at all sizes. */
body .messages .bubble .translate-msg-btn,
body .messages .bubble .msg-speak-btn {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  margin: 14px 12px 0 0 !important;
  padding: 10px 16px !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  background: rgba(255,255,255,0.16) !important;
  border: 1px solid rgba(255,255,255,0.24) !important;
  color: #fff !important;
  border-radius: 999px !important;
  cursor: pointer !important;
  align-items: center !important;
  gap: 6px !important;
  white-space: nowrap !important;
}
@media (max-width: 720px) {
  body .messages .bubble .translate-msg-btn,
  body .messages .bubble .msg-speak-btn {
    margin: 6px 6px 0 0 !important;
    padding: 6px 10px !important;
    font-size: 0.82rem !important;
  }
}

/* v100.57 — tight spacing on the new public-profile toggle row inside
   the Public profile section. Sydal: "try to do it without a bunch of
   spacing issues." */
.contact-list-wrap #publicProfileBlock .public-profile-hub-head {
  margin: 0 0 12px !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
}
.contact-list-wrap #publicProfileBlock .public-profile-hub-head > .public-profile-label {
  display: block !important;
}
.contact-list-wrap #publicProfileBlock .public-profile-subtoggle {
  margin: 8px 0 12px !important;
}

/* v100.63 — Public profile entry head: visibility toggle on the left,
   compact ✏️ Edit pill on the right. */
.public-profile-entry {
  display: block;
}
.public-profile-entry-head {
  display: flex;
  align-items: stretch;
  gap: 10px;
  margin-bottom: 12px;
}
.public-profile-entry-head .public-profile-subtoggle {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0 !important;
}
.public-profile-edit-pill {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 16px;
  height: 44px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  color: var(--text);
  font-weight: 700;
  font-size: 0.9rem;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.public-profile-edit-pill:hover {
  background: color-mix(in srgb, var(--accent) 14%, rgba(255,255,255,0.06));
  border-color: color-mix(in srgb, var(--accent) 36%, rgba(255,255,255,0.16));
}

/* ========================================================================
   v100.66 — universal back button. Sydal: "add a back button like the
   messages page for every page so you can navigate without pressing
   back on your browser. it will be an app in the playstore soon."
   Floating, sticky, always-visible on every page that isn't the main
   contacts dashboard. Tap → /app.html.
   ======================================================================== */
.global-back-btn {
  position: fixed !important;
  top: max(12px, env(safe-area-inset-top, 12px)) !important;
  left: max(12px, env(safe-area-inset-left, 12px)) !important;
  z-index: 999999 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 10px 16px !important;
  border-radius: 999px !important;
  background: rgba(15, 22, 38, 0.86) !important;
  border: 1px solid rgba(255,255,255,0.16) !important;
  color: #fff !important;
  font-weight: 800 !important;
  font-size: 0.92rem !important;
  text-decoration: none !important;
  cursor: pointer !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  box-shadow: 0 8px 22px rgba(0,0,0,0.32) !important;
}
.global-back-btn:hover {
  background: rgba(15, 22, 38, 0.94) !important;
  border-color: rgba(255,255,255,0.28) !important;
}

/* ========================================================================
   v100.73 — copy the perfect "Open Public Profile" page everywhere.
   Sydal: "Go back 4 versions and copy the Open Public Profile page. It
   was perfect in that one. Then apply it to all of the pages that show
   a profile page."
   The view-mode (read-only) profile renders cleanly because editor
   blocks are empty. Edit mode broke because those blocks were CHILDREN
   of .pp-profile-stack, sandwiched between cover and card. Fix: lift
   editor blocks OUT of .pp-profile-stack entirely. Editor panels now
   render as siblings ABOVE the stack. The stack itself is identical to
   view mode in every situation — owner viewing, owner editing,
   stranger viewing, business profile, private circle profile. The
   cover/card/avatar overlap is therefore identical to the "perfect"
   view-mode rendering Sydal asked for.
   ======================================================================== */
.pp-editor-panel {
  margin: 0 0 16px;
}
.pp-editor-panel > * {
  margin-top: 0;
}

/* ========================================================================
   v100.75 — chat header: remove the floating "← My contacts" pill.
   Sydal: "my contacts in the messages needs to be fixed. it covers up
   buttons at the top left."
   The global-back-btn is position:fixed top-left so it layered on top
   of the chat-header's status toggle and chat title. Chat already has
   its own #backLink inside the header — unhid it and removed the
   global pill from chat.html. Other pages (themes, reset, join, u,
   business) still get the floating pill since they don't have native
   in-page back navigation.
   ======================================================================== */

/* ========================================================================
   v100.74 — "Show me my profile" actually navigates somewhere now.
   Sydal: "when i click on show me my profile it should take me to this.
   make sure it goes somewhere when i click on it. right now it doesnt"
   Two bugs ganged up: (a) Open Public Page tile pointed at edit mode
   (?owner=1&edit=1), so clicking it landed in the broken edit layout
   instead of the clean view-mode layout shown in the screenshots;
   (b) Open Business Page used window.open(_, "_blank") which popup
   blockers eat silently — the catch fallback only ran on throw, not on
   null return, so the click did nothing visible. Fixed: Open buttons
   now go to ?owner=1 (view mode, no edit) and navigate same-tab.
   ======================================================================== */

/* ========================================================================
   v100.76 — mobile chat-header regression. Sydal: "you literally had it
   perfect last night for mobile now it looks weird."
   v100.75 unhid #backLink in chat.html, which added "← My contacts" as
   a visible flex child to the already-tight mobile chat header and
   reshuffled the layout. On phone widths, collapse the back link to
   just the arrow — header still has a usable back affordance, but it
   no longer competes with title/status/lang pills for space. The
   lang.js-set textContent is hidden via font-size:0; the arrow is
   rebuilt as a CSS pseudo-element so it works in every locale.
   ======================================================================== */
@media (max-width: 520px) {
  .chat-header .back {
    font-size: 0 !important;
    line-height: 1 !important;
    padding: 0 4px;
  }
  .chat-header .back::before {
    content: "←";
    font-size: 1.05rem;
    line-height: 1;
    color: var(--accent);
    display: inline-block;
  }
}

/* ========================================================================
   v100.77 — signup email field UX. Sydal's wife entered her email in
   the wrong field because the email box was unclear. Make the email
   field the unmistakable primary input on the signup form: visible
   label above (not just placeholder), full-width, min 44px tall
   (Apple HIG), live ✓/✗ validity indicator using :user-valid /
   :user-invalid so the indicator stays empty until the user actually
   interacts with the field.
   ======================================================================== */
.auth-field-label {
  display: block;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--text);
  margin: 8px 0 4px;
}
.email-input-row {
  position: relative;
  display: block;
  margin: 0 0 4px;
}
.email-input-row #email {
  width: 100%;
  min-height: 44px;
  padding-right: 38px;
  font-size: 1rem;
}
.email-input-row #email:user-valid {
  border-color: var(--green);
}
.email-input-row #email:user-invalid {
  border-color: var(--red);
}
#emailValidity {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.05rem;
  font-weight: 800;
  line-height: 1;
  pointer-events: none;
}
.email-input-row #email:user-valid + #emailValidity::before {
  content: "✓";
  color: var(--green);
}
.email-input-row #email:user-invalid + #emailValidity::before {
  content: "✗";
  color: var(--red);
}

/* ========================================================================
   v100.76 — mobile contact-screen header + compose pill polish.
   Sydal: "On mobile in the contact screen directolink goes into the
   emojis on the top right" + "the spacing of the emojis is off."
   Two CSS-only fixes:
   1) On phone-narrow screens (<=520px), hide the .theme-wordmark
      ("DirectoLink" / "República Dominicana" / "Belize" / etc.) — it
      was overflowing into the right-group's stacked icons (flag,
      customize, help, logout). Branding stays implicit on phone; the
      wordmark returns at tablet width and above.
   2) Bump the emoji-to-label gap inside compose pills (Files, Timer,
      and the dynamically-added Photo/Flash/Voice pills) from 6px to
      8px so icons aren't crammed against the text label.
   ======================================================================== */
@media (max-width: 520px) {
  .app-header .theme-wordmark { display: none !important; }
}
#sendActions .tool-btn,
#sendActions .attach-btn,
#sendActions #attachFileBtn,
#sendActions #vanishModeBtn {
  gap: 8px !important;
}

/* ========================================================================
   v100.77 — call overlay controls fit on phone screens.
   Sydal: "the spacing in mobile is off in the video calling."
   .call-controls anchored to top-right with display:flex; on phones the
   four buttons (Mute mic / Camera off / Hide me / End call) overflow
   horizontally and overlap each other AND the self-view PiP. Spanish
   labels make it worse ("Encender cámara", "Finalizar"). Fix: on
   <=520px, anchor controls to the BOTTOM of the call view (Zoom/
   FaceTime/WhatsApp pattern), full-width with safe-area inset, wrap if
   still tight, smaller padding + font.
   ======================================================================== */
@media (max-width: 520px) {
  .call-controls {
    top: auto !important;
    bottom: max(20px, env(safe-area-inset-bottom, 16px)) !important;
    right: 12px !important;
    left: 12px !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  .call-tool-btn,
  .call-record {
    padding: 6px 10px !important;
    font-size: 0.78rem !important;
  }
}

.call-overlay.docked .call-controls {
  top: 8px !important;
  right: 8px !important;
  left: 8px !important;
  bottom: auto !important;
  justify-content: flex-end !important;
  flex-wrap: wrap !important;
  gap: 5px !important;
}
.call-overlay.docked .call-tool-btn,
.call-overlay.docked .call-record,
.call-overlay.docked .call-close {
  position: static !important;
  padding: 4px 8px !important;
  font-size: 0.68rem !important;
  line-height: 1.1 !important;
}
.call-overlay.docked .call-rec-status {
  font-size: 0.68rem !important;
}

@media (max-width: 640px) {
  .call-overlay.docked {
    left: 10px;
    right: 10px;
    bottom: max(10px, env(safe-area-inset-bottom, 10px));
    width: auto;
    height: 240px;
  }
}

/* ========================================================================
   v100.78 — compose pill row spacing on mobile. Sydal screenshot
   2026-05-06: Files / Photo / Timer / Flash crammed together with
   almost no horizontal gap because the v100.41 block set per-button
   `margin: 0 4px 0 0` which layered awkwardly on top of the parent
   .send-actions's gap: 6px. Replace per-button margin with parent
   flex gap. Bump the gap to 10px on phones so pills feel like
   distinct buttons. flex-wrap is already on .send-actions (line
   1414) so longer locales — Spanish "Temporizador" (12 chars) is
   the longest — wrap onto a second line cleanly with the same
   vertical row-gap. Voice pill row + Send button (margin-left:auto)
   are untouched.
   ======================================================================== */
#sendActions .tool-btn,
#sendActions .attach-btn,
#sendActions #attachFileBtn,
#sendActions #vanishModeBtn,
.send-form .attach-btn,
.send-actions .tool-btn,
.send-actions button {
  margin: 0 !important;
}
.send-actions,
#sendActions {
  gap: 12px !important;
  row-gap: 12px !important;
}

/* ========================================================================
   v100.88 — REVERT v100.79's mobile bubble "cleanup". That block was
   added in response to a vague "bubbles are broken" complaint that
   actually meant the COMPOSE PILLS, not message bubbles. The bubble
   rules introduced overflow:hidden + tighter padding which clipped
   the visible content of sent bubbles (text body / Translate pill /
   timestamp / read-receipt) — the whole bubble interior turned into
   an empty blue rounded rectangle. Sydal showed the pre-v100.79
   bubble screenshot ("call" + Translate + 9:50 AM + ✓) and said
   "it worked fine like this." Removing v100.79 entirely so the
   v100.54 mobile bubble rules (line 17341) take effect again.
   ======================================================================== */

/* ========================================================================
   v100.80 — REPOSITION compose pills on mobile (Files / Timer / Photo
   / Flash). Sydal: "in desktop website gives the bubbles enough space
   to properly show everything. you cant fix it without repositing it
   on the mobile site." Spacing alone can't win — at 375pt the four
   pills with full text labels ("Files / Timer / Photo / Flash", or
   their longer Spanish equivalents) simply don't fit alongside the
   Send button. Switch to icon-only on phone widths: each pill becomes
   a 44×44 circle showing only the emoji. 4 pills × 44px + 12px gaps +
   Send button still leaves breathing room on a 375pt screen.
   The aria-hidden emoji spans stay visible; the data-i18n text spans
   hide. Send button (text "Send") is untouched. Voice pill (separate
   row, outside #sendActions) is untouched.
   ======================================================================== */
@media (max-width: 520px) {
  #sendActions .tool-btn,
  #sendActions .attach-btn,
  #sendActions #attachFileBtn,
  #sendActions #vanishModeBtn {
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    height: 44px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    font-size: 1.15rem !important;
    flex: 0 0 44px !important;
  }
  /* Hide the text label inside each pill but keep the emoji span. */
  #sendActions .tool-btn span[data-i18n],
  #sendActions .attach-btn span[data-i18n],
  #sendActions #attachFileBtn span[data-i18n],
  #sendActions #vanishModeBtn span[data-i18n] {
    display: none !important;
  }
  /* Emoji span stays visible — center it in the round pill. */
  #sendActions .tool-btn span[aria-hidden="true"],
  #sendActions .attach-btn span[aria-hidden="true"],
  #sendActions #attachFileBtn span[aria-hidden="true"],
  #sendActions #vanishModeBtn span[aria-hidden="true"] {
    margin: 0 !important;
    line-height: 1 !important;
  }
}

/* ========================================================================
   v100.82 — bulletproof icon-only pills + fix desktop double-bolt.
   Sydal: "Its still not right yet for the mobile site. also one issue
   with the desktop now. remove a lightning bolt from flash. it was
   only one lightning bolt the entire time."
   Two roots:
   (1) The Timer label kept showing on mobile because a v100.41 rule
       (#sendActions #vanishModeBtn > span { display:inline !important })
       was tying my v100.80 display:none on specificity/cascade. Solved
       by nuking ALL text inside the pill via font-size:0, then
       rendering the icon from a data-icon attribute via ::before.
       This works regardless of internal markup or any conflicting
       display rule on inner spans.
   (2) Desktop "two lightning bolts" came from v100.81 prepending an
       extra emoji span on top of the lang.js i18n string for vanishBtn
       which is already "⚡ Flash". Reverted in chat.js: emoji is now
       stored on the button's data-icon attribute (not appended as a
       child), so desktop renders only the natural i18n label.
   chat.html now also carries data-icon on the static Files (📎) and
   Timer (⏱) buttons to feed the same ::before rule.
   ======================================================================== */
@media (max-width: 520px) {
  #sendActions .tool-btn,
  #sendActions .attach-btn,
  #sendActions #attachFileBtn,
  #sendActions #vanishModeBtn {
    font-size: 0 !important;
    line-height: 0 !important;
  }
  #sendActions .tool-btn[data-icon]::before,
  #sendActions .attach-btn[data-icon]::before,
  #sendActions #attachFileBtn[data-icon]::before,
  #sendActions #vanishModeBtn[data-icon]::before {
    content: attr(data-icon);
    display: inline-block;
    font-size: 1.2rem;
    line-height: 1;
  }
}

/* ========================================================================
   v100.84 — REVERT v100.80 / v100.82 icon-only treatment on mobile.
   Sydal: "my idea is use the desktop version in the mobile, just move
   them around so they fit." Keep desktop's labeled pills (📎 Files,
   📷 Photo, ⏱ Timer, ⚡ Flash, 🎤 Voice). Reorganize the row so they
   fit on a 375pt phone: pills wrap onto multiple lines with the
   parent's flex-wrap, and the Send button is forced onto its own
   bottom row (full width) so labeled pills aren't fighting it for
   horizontal space.
   This rule overrides the earlier v100.80/v100.82 mobile rules by
   resetting width/font-size/etc. and re-showing the spans they hid.
   ======================================================================== */
@media (max-width: 520px) {
  #sendActions .tool-btn,
  #sendActions .attach-btn,
  #sendActions #attachFileBtn,
  #sendActions #vanishModeBtn {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 38px !important;
    padding: 0 14px !important;
    border-radius: 999px !important;
    font-size: 0.85rem !important;
    line-height: 1 !important;
    flex: 0 0 auto !important;
  }
  /* Re-show label + emoji spans that v100.80/v100.82 hid. */
  #sendActions .tool-btn span[data-i18n],
  #sendActions .attach-btn span[data-i18n],
  #sendActions #attachFileBtn span[data-i18n],
  #sendActions #vanishModeBtn span[data-i18n],
  #sendActions .tool-btn span[aria-hidden="true"],
  #sendActions .attach-btn span[aria-hidden="true"],
  #sendActions #attachFileBtn span[aria-hidden="true"],
  #sendActions #vanishModeBtn span[aria-hidden="true"] {
    display: inline !important;
    font-size: inherit !important;
  }
  /* Suppress the v100.82 ::before icon — full labels render now. */
  #sendActions .tool-btn::before,
  #sendActions .attach-btn::before,
  #sendActions #attachFileBtn::before,
  #sendActions #vanishModeBtn::before {
    content: none !important;
  }
  /* Force Send onto its own row, full-width, so labeled pills above
     wrap freely without colliding with it. */
  .send-actions .send-submit,
  #sendActions .send-submit {
    flex: 1 0 100% !important;
    margin-left: 0 !important;
    margin-top: 8px !important;
    width: 100% !important;
    align-self: stretch !important;
  }
}

/* ========================================================================
   v100.89 — toast for auto-imported contacts. When someone joins via
   the inviter's link/code, the new auto-accept flow drops the contact
   straight into the inviter's keychain and surfaces a toast instead
   of the old Accept/Decline approval UI. Toast fades in, persists
   ~6s, then fades out. "Dismiss" closes it manually.
   ======================================================================== */
.dl-toast {
  position: fixed;
  left: 50%;
  bottom: max(20px, env(safe-area-inset-bottom, 16px));
  transform: translate(-50%, 12px);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  background: var(--card);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 999px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.32);
  font-size: 0.92rem;
  font-weight: 600;
  max-width: calc(100vw - 32px);
  z-index: 100000;
  opacity: 0;
  transition: opacity 0.24s ease, transform 0.24s ease;
  pointer-events: auto;
}
.dl-toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}
.dl-toast .dl-toast-msg {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.dl-toast .dl-toast-dismiss {
  background: transparent;
  color: var(--accent);
  border: 0;
  font-weight: 800;
  font-size: 0.85rem;
  cursor: pointer;
  padding: 4px 8px;
  flex: 0 0 auto;
}
.dl-toast .dl-toast-dismiss:hover {
  text-decoration: underline;
}

/* ========================================================================
   v100.99 — Circle → Contact rename across all 15 languages.
   Per Sydal: "The word 'Circle' should not appear anywhere a user can
   see it." Done via a Python pass over lang.js that swapped each
   locale's Circle word — Circle/circle, Círculo/círculo, Cercle,
   Sèk, Sirkl, Kreis, サークル, 서클, 圈子, Круг, Krąg, सर्कल, دائرة,
   Cerchio — for the local equivalent of "Contact" (Contacto, Contact,
   Kontak, Kontakt, 連絡先, 연락처, 联系人, Контакт, संपर्क, جهة اتصال).
   The standalone ⭕ emoji was dropped from pill labels and banner
   text. Inline fallbacks in app.js were also updated: the "Mutual
   contact" pill no longer shows the ⭕ prefix; the "Invite sent"
   pill reads "Request sent" if the i18n key is missing; the
   "Incoming request" pill uses "Incoming request" instead of
   "Circle invite". Variable names and CSS classes (.circle-pill,
   getCircleStatus, etc.) were left as-is — internal, not user-
   visible. SW CACHE_NAME bumped to v86 so every device evicts the
   v85 shell on next load. Functionally the contact-add system is
   the v100.92 in-chat circle-invite flow that worked before; this
   version is just the wording cleanup on top.
   ======================================================================== */

/* ========================================================================
   v100.99b — prominent contact-requests banner at the top of the
   dashboard. Renders incoming Accept/Decline requests so they can't
   be missed. Visible only when the list is non-empty (renderPending-
   Invites toggles `hidden`). Avatar + name + handle per row, big
   green Accept, gray Decline, smooth fade-out on tap.
   ======================================================================== */
.contact-requests-banner {
  margin: 12px 12px 0;
  padding: 14px 16px;
  background: color-mix(in srgb, var(--accent) 12%, var(--card));
  border: 2px solid var(--accent);
  border-radius: 16px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.24);
  position: relative;
  z-index: 5;
}
.contact-requests-banner-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  font-weight: 800;
  font-size: 0.95rem;
  color: var(--text);
}
.contact-requests-banner-icon {
  font-size: 1.1rem;
}
.contact-requests-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.contact-requests-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  transition: opacity 0.3s ease, transform 0.3s ease, max-height 0.3s ease;
}
.contact-requests-list li.removing {
  opacity: 0;
  transform: translateY(-6px);
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  border-color: transparent;
  margin: 0;
  pointer-events: none;
  overflow: hidden;
}
.contact-requests-list .req-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--card-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.95rem;
  flex: 0 0 40px;
  overflow: hidden;
}
.contact-requests-list .req-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.contact-requests-list .req-text {
  flex: 1 1 auto;
  min-width: 0;
}
.contact-requests-list .req-name {
  display: block;
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.contact-requests-list .req-sub {
  display: block;
  font-size: 0.78rem;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.contact-requests-list .req-actions {
  display: flex;
  gap: 6px;
  flex: 0 0 auto;
}
.contact-requests-list button {
  border: 0;
  border-radius: 999px;
  padding: 8px 14px;
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
  font-family: inherit;
}
.contact-requests-list button.accept {
  background: var(--green);
  color: #fff;
}
.contact-requests-list button.accept:hover {
  background: color-mix(in srgb, var(--green) 86%, #fff 14%);
}
.contact-requests-list button.decline {
  background: var(--card-2);
  color: var(--text);
  border: 1px solid var(--border);
}
.contact-requests-list button.decline:hover {
  background: color-mix(in srgb, var(--border) 30%, var(--card-2));
}

/* ========================================================================
   v101 — mobile header + contact-card spacing.
   The installed browser-app can show Status + Install + Refresh at the
   same time, which made the avatar/name collide with the left controls.
   Phone widths now keep the header controls-only and move identity into
   the My Circle hero. Contact cards use a compact two-column action grid
   instead of the older tall stacked layout.
   ======================================================================== */
.mobile-hero-identity {
  display: none;
}

@media (max-width: 480px) {
  body.app-body {
    padding-top: 0 !important;
  }

  .app-header {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas: "left right" !important;
    align-items: center !important;
    gap: 6px !important;
    width: calc(100% - 14px) !important;
    margin: max(8px, env(safe-area-inset-top, 0px)) auto 10px !important;
    padding: 10px !important;
    border-radius: 18px !important;
    min-height: 74px !important;
  }

  .app-header > .header-left-group {
    grid-area: left !important;
    justify-self: start !important;
    max-width: 100% !important;
    overflow: hidden !important;
    gap: 6px !important;
  }

  .app-header > .user-group {
    display: none !important;
  }

  .app-header > .right-group {
    grid-area: right !important;
    justify-self: end !important;
    align-self: start !important;
    gap: 5px !important;
    flex-wrap: wrap !important;
    max-width: 116px !important;
  }

  .app-header .status-toggle {
    max-width: 122px !important;
    overflow: hidden !important;
  }

  .app-header .header-install-pill {
    max-width: 78px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .app-header .header-refresh-pill {
    width: 34px !important;
    min-width: 34px !important;
    max-width: 34px !important;
    padding: 0 !important;
    font-size: 1rem !important;
  }

  .contact-list-wrap > .contacts-panel-head {
    display: grid !important;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, min(238px, 58vw)) !important;
    align-items: center !important;
    gap: 8px !important;
    min-height: 136px !important;
    padding: 16px !important;
  }

  .contact-list-wrap > .contacts-panel-head .contacts-panel-copy {
    grid-column: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .mobile-hero-identity {
    display: grid !important;
    grid-template-columns: 52px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 10px !important;
    grid-column: 2 !important;
    justify-self: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 52px !important;
    padding: 0 !important;
    border-radius: 999px !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
  }

  .mobile-hero-avatar.contact-avatar,
  body.adv-contact-avatar-ring .mobile-hero-avatar.contact-avatar {
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
    min-height: 52px !important;
    justify-self: end !important;
    transform: translateX(4px) !important;
  }

  .mobile-hero-name {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    justify-self: stretch !important;
    min-height: 52px !important;
    padding: 0 14px 0 18px !important;
    border-radius: 999px !important;
    border: 1px solid color-mix(in srgb, var(--border) 72%, #fff 28%) !important;
    background: color-mix(in srgb, var(--card-2) 82%, transparent) !important;
    box-shadow: 0 10px 22px rgba(0,0,0,0.16) !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: clamp(0.78rem, 3.35vw, 0.94rem) !important;
    line-height: 1.05 !important;
    font-weight: 950 !important;
    letter-spacing: -0.035em !important;
    color: var(--text) !important;
  }
}

@media (max-width: 360px) {
  .contact-list-wrap > .contacts-panel-head {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .mobile-hero-identity {
    grid-column: 1 !important;
    justify-self: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
    transform: none !important;
  }

  .mobile-hero-name {
    max-width: 100% !important;
  }
}

@media all and (display-mode: standalone) and (max-width: 480px) {
  .app-header .header-install-pill {
    display: none !important;
  }
}

@media (max-width: 480px) {
  .is-standalone-app .app-header .header-install-pill {
    display: none !important;
  }
}

@media (max-width: 640px) {
  .dashboard-list-section .contact-list,
  .contact-list-wrap > .contact-list {
    gap: 12px !important;
  }

  .contact-row.contact-row-v2 {
    display: grid !important;
    grid-template-columns: 64px minmax(0, 1fr) auto !important;
    grid-template-areas:
      "avatar info open"
      "avatar cluster cluster" !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 14px !important;
    gap: 10px 12px !important;
    align-items: center !important;
    overflow: visible !important;
  }

  .contact-row.contact-row-v2 .contact-avatar,
  body.adv-contact-avatar-ring .contact-row.contact-row-v2 .contact-avatar {
    grid-area: avatar !important;
    width: 58px !important;
    height: 58px !important;
    min-width: 58px !important;
    min-height: 58px !important;
    align-self: center !important;
    justify-self: start !important;
  }

  .contact-row.contact-row-v2 .contact-info {
    grid-area: info !important;
    min-width: 0 !important;
    align-self: center !important;
  }

  .contact-row.contact-row-v2 .contact-name {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font-size: clamp(1.2rem, 8vw, 1.75rem) !important;
  }

  .contact-row.contact-row-v2 .contact-preview {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .contact-row.contact-row-v2 .contact-open {
    grid-area: open !important;
    width: auto !important;
    min-width: 82px !important;
    min-height: 48px !important;
    padding: 8px 16px !important;
    align-self: center !important;
    justify-self: end !important;
  }

  .contact-row.contact-row-v2 .contact-more {
    position: absolute !important;
    right: 12px !important;
    bottom: 12px !important;
    width: 38px !important;
    height: 46px !important;
    min-width: 38px !important;
    min-height: 46px !important;
    padding: 0 !important;
    border-radius: 18px !important;
  }

  .contact-row.contact-row-v2 .contact-circle-cluster {
    grid-area: cluster !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 9px !important;
    width: 100% !important;
    padding-right: 48px !important;
    align-self: start !important;
  }

  .contact-row.contact-row-v2 .contact-circle-cluster .circle-pill,
  .contact-row.contact-row-v2 .contact-circle-cluster .link-pill,
  .contact-row.contact-row-v2 .contact-circle-cluster .contact-share-toggle {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 44px !important;
    justify-content: center !important;
    border-radius: 999px !important;
    font-size: 0.9rem !important;
    line-height: 1.05 !important;
  }

  .contact-row.contact-row-v2 .contact-circle-cluster .contact-share-toggle {
    justify-content: space-between !important;
    padding: 7px 9px !important;
  }
}

@media (max-width: 380px) {
  .contact-row.contact-row-v2 {
    grid-template-columns: 58px minmax(0, 1fr) !important;
    grid-template-areas:
      "avatar info"
      "open open"
      "cluster cluster" !important;
  }

  .contact-row.contact-row-v2 .contact-open {
    width: 100% !important;
    justify-self: stretch !important;
  }

  .contact-row.contact-row-v2 .contact-circle-cluster {
    grid-template-columns: 1fr !important;
    padding-right: 46px !important;
  }
}

/* v104 — Sydal mobile spacing polish.
   Mobile only: center the account photo in the hero, pin the username pill
   to the right edge, and keep the top-right icon controls in one clean row
   with sign-out as the far-right button. */
@media (max-width: 480px) {
  .app-header {
    grid-template-columns: minmax(0, 1fr) max-content !important;
    align-items: center !important;
  }

  .app-header > .header-left-group {
    min-width: 0 !important;
    max-width: 100% !important;
    gap: 4px !important;
  }

  .app-header .status-toggle {
    max-width: 104px !important;
  }

  .app-header .header-install-pill {
    max-width: 70px !important;
    padding-inline: 10px !important;
  }

  .app-header .header-refresh-pill {
    width: clamp(34px, 9vw, 38px) !important;
    min-width: clamp(34px, 9vw, 38px) !important;
    max-width: clamp(34px, 9vw, 38px) !important;
    height: clamp(34px, 9vw, 38px) !important;
    min-height: clamp(34px, 9vw, 38px) !important;
  }

  .app-header > .right-group {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-end !important;
    align-self: center !important;
    gap: 5px !important;
    max-width: none !important;
    width: max-content !important;
  }

  .app-header > .right-group .lang-wrap { order: 1 !important; }
  .app-header > .right-group #dashboardCustomizeBtn { order: 2 !important; }
  .app-header > .right-group #dashboardHelpBtn { order: 3 !important; }
  .app-header > .right-group #logoutBtn { order: 4 !important; }
  .app-header > .right-group #dashboardMoreBtn { display: none !important; }

  .app-header > .right-group .lang-button,
  .app-header > .right-group #dashboardCustomizeBtn,
  .app-header > .right-group #dashboardHelpBtn,
  .app-header > .right-group #logoutBtn {
    width: clamp(34px, 9vw, 38px) !important;
    min-width: clamp(34px, 9vw, 38px) !important;
    max-width: clamp(34px, 9vw, 38px) !important;
    height: clamp(34px, 9vw, 38px) !important;
    min-height: clamp(34px, 9vw, 38px) !important;
    max-height: clamp(34px, 9vw, 38px) !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 999px !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .contact-list-wrap > .contacts-panel-head {
    position: relative !important;
    grid-template-columns: 1fr !important;
    min-height: 138px !important;
    padding: 18px 16px !important;
  }

  .contact-list-wrap > .contacts-panel-head .contacts-panel-copy {
    grid-column: 1 !important;
    max-width: calc(50% - 18px) !important;
    align-self: center !important;
  }

  .mobile-hero-identity {
    position: absolute !important;
    left: calc(50% - 28px) !important;
    right: 16px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    display: grid !important;
    grid-template-columns: 56px minmax(0, 1fr) !important;
    gap: 10px !important;
    width: auto !important;
    max-width: none !important;
    min-height: 56px !important;
  }

  .mobile-hero-avatar.contact-avatar,
  body.adv-contact-avatar-ring .mobile-hero-avatar.contact-avatar {
    width: 56px !important;
    height: 56px !important;
    min-width: 56px !important;
    min-height: 56px !important;
    justify-self: center !important;
    transform: none !important;
    z-index: 2 !important;
  }

  .mobile-hero-name {
    min-height: 56px !important;
    justify-self: stretch !important;
    justify-content: flex-start !important;
    padding: 0 14px !important;
    font-size: clamp(0.72rem, 3.15vw, 0.9rem) !important;
    letter-spacing: -0.04em !important;
  }
}

@media (max-width: 360px) {
  .app-header > .right-group {
    gap: 4px !important;
  }

  .app-header > .right-group .lang-button,
  .app-header > .right-group #dashboardCustomizeBtn,
  .app-header > .right-group #dashboardHelpBtn,
  .app-header > .right-group #logoutBtn,
  .app-header .header-refresh-pill {
    width: 32px !important;
    min-width: 32px !important;
    max-width: 32px !important;
    height: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;
  }

  .contact-list-wrap > .contacts-panel-head .contacts-panel-copy {
    max-width: calc(50% - 14px) !important;
  }

  .mobile-hero-identity {
    left: calc(50% - 26px) !important;
    right: 12px !important;
    grid-template-columns: 52px minmax(0, 1fr) !important;
    gap: 8px !important;
  }
}

/* v105 — identity hero redesign.
   The hero card should be about the account identity, not another "Contacts"
   title. Hide the old copy everywhere; on mobile, stack the handle directly
   above a larger centered profile photo with no username bubble. */
.contact-list-wrap > .contacts-panel-head .contacts-panel-copy {
  display: none !important;
}

.contact-list-wrap > .contacts-panel-head {
  display: grid !important;
  place-items: center !important;
  min-height: 158px !important;
  padding: 24px !important;
}

.contact-list-wrap > .contacts-panel-head .mobile-hero-identity {
  display: grid !important;
  grid-template-areas:
    "name"
    "avatar" !important;
  grid-template-columns: minmax(0, 1fr) !important;
  justify-items: center !important;
  align-items: center !important;
  gap: 10px !important;
  position: static !important;
  width: min(100%, 420px) !important;
  max-width: 100% !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}

.mobile-hero-name {
  grid-area: name !important;
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--text) !important;
  font-size: clamp(1rem, 2.2vw, 1.28rem) !important;
  font-weight: 950 !important;
  line-height: 1.05 !important;
  letter-spacing: -0.035em !important;
  text-align: center !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.mobile-hero-avatar.contact-avatar,
body.adv-contact-avatar-ring .mobile-hero-avatar.contact-avatar {
  grid-area: avatar !important;
  width: 82px !important;
  height: 82px !important;
  min-width: 82px !important;
  min-height: 82px !important;
  justify-self: center !important;
  transform: none !important;
}

@media (max-width: 480px) {
  .contact-list-wrap > .contacts-panel-head {
    position: relative !important;
    min-height: 178px !important;
    padding: 22px 16px !important;
    place-items: center !important;
  }

  .contact-list-wrap > .contacts-panel-head .mobile-hero-identity {
    position: absolute !important;
    left: 50% !important;
    right: auto !important;
    top: 50% !important;
    width: min(72vw, 300px) !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 11px !important;
    transform: translate(-50%, -50%) !important;
    justify-items: center !important;
  }

  .mobile-hero-name {
    font-size: clamp(1rem, 5vw, 1.32rem) !important;
    padding: 0 6px !important;
    text-align: center !important;
  }

  .mobile-hero-avatar.contact-avatar,
  body.adv-contact-avatar-ring .mobile-hero-avatar.contact-avatar {
    width: 78px !important;
    height: 78px !important;
    min-width: 78px !important;
    min-height: 78px !important;
  }
}

@media (max-width: 360px) {
  .contact-list-wrap > .contacts-panel-head {
    min-height: 166px !important;
  }

  .contact-list-wrap > .contacts-panel-head .mobile-hero-identity {
    width: min(72vw, 260px) !important;
  }

  .mobile-hero-avatar.contact-avatar,
  body.adv-contact-avatar-ring .mobile-hero-avatar.contact-avatar {
    width: 70px !important;
    height: 70px !important;
    min-width: 70px !important;
    min-height: 70px !important;
  }
}

/* v106 — desktop already has the account identity in the top header.
   Remove the extra hero card on desktop; keep the centered identity hero
   only on mobile where the header hides the account name/photo. */
@media (min-width: 481px) {
  .contact-list-wrap > .contacts-panel-head {
    display: none !important;
  }
}

/* v110 — mobile-only correction. Revert the bad viewport math from v108.
   Keep the photo/handle stack in normal grid flow so the profile photo sits
   on the same center line as the mobile page/stats column, then nudge the
   centered stack slightly left to match the actual phone screenshot. Desktop
   remains controlled by the v106 desktop rule above. */
@media (max-width: 480px) {
  .contact-list-wrap > .contacts-panel-head {
    display: grid !important;
    place-items: center !important;
    justify-items: center !important;
    align-items: center !important;
    overflow: hidden !important;
  }

  .contact-list-wrap > .contacts-panel-head .mobile-hero-identity {
    position: static !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    margin: 0 auto !important;
    width: min(72vw, 300px) !important;
    transform: translateX(-28px) !important;
    justify-self: center !important;
    align-self: center !important;
    justify-items: center !important;
  }
}

@media (max-width: 360px) {
  .contact-list-wrap > .contacts-panel-head .mobile-hero-identity {
    width: min(72vw, 260px) !important;
    transform: translateX(-22px) !important;
  }
}

/* v111 — business setup studio. The business page needs its own practical
   tool, especially for salons where each worker can link to their own
   DirectoLink public or business profile. */
.pp-business-setup-modal {
  max-width: min(1120px, calc(100vw - 28px)) !important;
  padding: clamp(18px, 3vw, 28px) !important;
}

.business-setup-shell {
  display: grid;
  grid-template-columns: minmax(210px, 0.34fr) minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}

.business-setup-side,
.business-setup-card,
.business-setup-preview {
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 22px;
  background:
    linear-gradient(145deg, rgba(15, 23, 42, 0.94), rgba(30, 41, 59, 0.82));
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.26);
}

.business-setup-side {
  position: sticky;
  top: 18px;
  padding: 22px;
}

.business-setup-kicker {
  display: inline-flex;
  margin-bottom: 10px;
  color: #8db8ff;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.business-setup-side h3 {
  margin: 0 0 8px;
  color: #fff;
  font-size: clamp(1.35rem, 2.2vw, 1.9rem);
  line-height: 1.02;
}

.business-setup-steps {
  display: grid;
  gap: 8px;
  margin-top: 18px;
}

.business-setup-steps span {
  display: block;
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.045);
  color: rgba(255, 255, 255, 0.84);
  font-size: 0.84rem;
  font-weight: 850;
}

.business-setup-main {
  display: grid;
  gap: 14px;
}

.business-setup-card {
  padding: clamp(16px, 2.4vw, 22px);
}

.business-setup-card h4 {
  margin: 0 0 14px;
  color: #fff;
  font-size: 1rem;
  letter-spacing: -0.02em;
}

.business-template-btn {
  min-height: 42px;
  padding: 0 16px;
  border: 1px solid rgba(141, 184, 255, 0.45);
  border-radius: 999px;
  background: rgba(79, 140, 255, 0.18);
  color: #dbeafe;
  font-weight: 900;
}

.business-setup-preview {
  padding: 18px;
  color: #f8fafc;
}

.business-preview-hero {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 14px;
}

.business-preview-avatar {
  display: grid;
  width: 54px;
  height: 54px;
  place-items: center;
  border-radius: 18px;
  background: linear-gradient(135deg, #2563eb, #ef3340);
  color: #fff;
  font-weight: 950;
}

.business-preview-hero strong,
.business-preview-grid strong {
  display: block;
  color: #fff;
}

.business-preview-hero small,
.business-preview-grid small,
.business-preview-team em {
  color: rgba(226, 232, 240, 0.72);
}

.business-preview-actions,
.business-preview-tabs,
.business-preview-meta,
.business-preview-team {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.business-preview-actions button,
.business-preview-tabs span,
.business-preview-meta span,
.business-preview-team span {
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  padding: 8px 11px;
  font-weight: 850;
}

.business-preview-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.business-preview-grid article {
  min-height: 96px;
  padding: 13px;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 16px;
  background: rgba(2, 6, 23, 0.46);
}

@media (max-width: 760px) {
  .business-setup-shell {
    grid-template-columns: 1fr;
  }

  .business-setup-side {
    position: static;
  }

  .business-setup-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .business-preview-grid {
    grid-template-columns: 1fr;
  }
}

/* Audio-only calls: separate from the video/Daily overlay. */
.audio-call-overlay {
  position: fixed;
  inset: 0;
  z-index: 1490;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(circle at 50% 35%, rgba(91, 192, 190, 0.18), transparent 34%),
    rgba(0, 0, 0, 0.74);
  backdrop-filter: blur(18px);
}

.audio-call-overlay[hidden] {
  display: none;
}

.audio-call-overlay.docked {
  inset: max(8px, env(safe-area-inset-top, 0px)) 12px auto 12px;
  z-index: 1510;
  display: block;
  padding: 0;
  background: transparent;
  backdrop-filter: none;
  pointer-events: none;
}

.audio-call-card {
  width: min(440px, calc(100vw - 36px));
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 28px;
  padding: 34px 28px 28px;
  text-align: center;
  color: #fff;
  background: linear-gradient(180deg, rgba(42, 43, 39, 0.96), rgba(24, 25, 23, 0.96));
  box-shadow: 0 26px 70px rgba(0, 0, 0, 0.48);
}

.audio-call-overlay.docked .audio-call-card {
  width: min(430px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 12px;
  row-gap: 2px;
  padding: 8px 10px;
  text-align: left;
  border-radius: 999px;
  pointer-events: auto;
}

.audio-call-avatar {
  display: grid;
  width: 102px;
  height: 102px;
  margin: 0 auto 18px;
  place-items: center;
  border-radius: 50%;
  background:
    linear-gradient(135deg, rgba(91, 192, 190, 0.95), rgba(107, 88, 229, 0.95)),
    #111827;
  background-size: cover;
  background-position: center;
  font-size: 2.7rem;
  box-shadow: 0 0 0 14px rgba(91, 192, 190, 0.16);
}

.audio-call-overlay.docked .audio-call-avatar {
  width: 44px;
  height: 44px;
  margin: 0;
  font-size: 1.25rem;
  cursor: pointer;
  box-shadow: 0 0 0 6px rgba(91, 192, 190, 0.12);
}

.audio-call-card h2 {
  margin: 0;
  font-size: clamp(1.8rem, 5vw, 2.35rem);
  line-height: 1.05;
}

.audio-call-overlay.docked .audio-call-card h2 {
  font-size: 0.95rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.audio-call-card p {
  margin: 14px auto 28px;
  max-width: 320px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 1rem;
  line-height: 1.45;
}

.audio-call-overlay.docked .audio-call-card p {
  grid-column: 2;
  margin: 0;
  max-width: none;
  font-size: 0.74rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.audio-call-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

.audio-call-overlay.docked .audio-call-actions {
  grid-column: 3;
  grid-row: 1 / span 2;
  justify-content: flex-end;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
}

.audio-call-actions button {
  border: 0;
  border-radius: 999px;
  padding: 14px 24px;
  color: #fff;
  font-weight: 950;
  cursor: pointer;
}

.audio-call-overlay.docked .audio-call-actions button {
  padding: 8px 10px;
  font-size: 0.74rem;
  white-space: nowrap;
}

.audio-call-overlay.docked .audio-tool:not(.audio-nav) {
  display: none;
}

.audio-call-overlay.docked .audio-hangup {
  min-width: 0;
  padding-inline: 12px;
}

.audio-call-overlay.docked.collapsed {
  left: 12px;
  right: auto;
  width: auto;
}

.audio-call-overlay.docked.collapsed .audio-call-card {
  width: 56px;
  height: 56px;
  padding: 6px;
  display: grid;
  grid-template-columns: 1fr;
  place-items: center;
  border-radius: 50%;
}

.audio-call-overlay.docked.collapsed .audio-call-avatar {
  width: 44px;
  height: 44px;
}

.audio-call-overlay.docked.collapsed .audio-call-card h2,
.audio-call-overlay.docked.collapsed .audio-call-card p,
.audio-call-overlay.docked.collapsed .audio-call-actions {
  display: none;
}

.audio-tool {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
}

.audio-tool.off {
  opacity: 0.62;
}

.audio-answer {
  min-width: 132px;
  background: #5bc0be;
}

.audio-decline,
.audio-hangup {
  min-width: 132px;
  background: #ef5d55;
}

/* Telegram-style voice call dock: a tiny top light bar, then a menu on tap. */
:root {
  --audio-call-bar-space: 12px;
}

body.chat-body.audio-call-bar-active {
  padding-top: var(--audio-call-bar-space);
}

body.audio-call-bar-active .call-app-drawer {
  top: var(--audio-call-bar-space);
}

.audio-call-lightbar {
  display: none;
}

.audio-call-overlay.docked {
  inset: 0 0 auto 0 !important;
  width: auto !important;
  height: var(--audio-call-bar-space) !important;
  z-index: 1510;
  padding: 0 !important;
  background: transparent !important;
  backdrop-filter: none !important;
  pointer-events: none;
}

.audio-call-overlay.docked .audio-call-lightbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  display: block;
  width: 100%;
  height: var(--audio-call-bar-space);
  margin: 0 !important;
  padding: 0;
  border: 0;
  border-radius: 0;
  cursor: pointer;
  pointer-events: auto;
  background:
    linear-gradient(90deg, transparent, rgba(91, 192, 190, 0.78), rgba(107, 88, 229, 0.92), rgba(91, 192, 190, 0.78), transparent);
  box-shadow: 0 0 18px rgba(91, 192, 190, 0.55);
}

.audio-call-lightbar-glow {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 44px;
  height: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 0 16px rgba(255, 255, 255, 0.55);
  transform: translate(-50%, -50%);
}

.audio-call-overlay.docked:not(.menu-open) .audio-call-card {
  display: none !important;
}

.audio-call-overlay.docked.menu-open .audio-call-card {
  position: fixed;
  top: calc(var(--audio-call-bar-space) + 6px);
  left: 12px;
  right: 12px;
  width: min(560px, calc(100vw - 24px)) !important;
  min-height: 0 !important;
  height: auto !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: 54px minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 12px;
  row-gap: 2px;
  padding: 10px 12px !important;
  text-align: left;
  border-radius: 32px !important;
  pointer-events: auto;
  background: linear-gradient(180deg, rgba(42, 43, 39, 0.97), rgba(24, 25, 23, 0.97));
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.46);
}

.audio-call-overlay.docked.menu-open .audio-call-avatar {
  width: 54px !important;
  height: 54px !important;
  margin: 0 !important;
  font-size: 1.45rem !important;
  box-shadow: 0 0 0 6px rgba(91, 192, 190, 0.12);
}

.audio-call-overlay.docked.menu-open .audio-call-card h2 {
  display: block !important;
  margin: 0 !important;
  font-size: 1rem !important;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.audio-call-overlay.docked.menu-open .audio-call-card p {
  display: block !important;
  grid-column: 2;
  margin: 0 !important;
  max-width: none;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.78rem !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.audio-call-overlay.docked.menu-open .audio-call-actions {
  display: flex !important;
  grid-column: 3;
  grid-row: 1 / span 2;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
}

.audio-call-overlay.docked.menu-open .audio-call-actions button {
  padding: 12px 16px !important;
  font-size: 0.84rem !important;
}

.audio-call-overlay.docked.menu-open .audio-hangup,
.audio-call-overlay.docked.menu-open .audio-nav {
  min-width: 0;
}

.audio-call-overlay.docked.collapsed {
  left: 0 !important;
  right: 0 !important;
  width: auto !important;
}

@media (max-width: 520px) {
  .audio-call-overlay.docked.menu-open .audio-call-card {
    grid-template-columns: 48px minmax(0, 1fr) auto;
    column-gap: 10px;
    padding: 9px 10px !important;
  }
  .audio-call-overlay.docked.menu-open .audio-call-avatar {
    width: 48px !important;
    height: 48px !important;
  }
  .audio-call-overlay.docked.menu-open .audio-call-actions {
    gap: 6px;
  }
  .audio-call-overlay.docked.menu-open .audio-call-actions button {
    padding: 10px 12px !important;
    font-size: 0.78rem !important;
  }
}

/* Video calls use the same persistent pattern as audio, plus camera controls. */
:root {
  --video-call-bar-space: 12px;
  --video-call-control-space: 112px;
}

body.chat-body.video-call-bar-active {
  padding-top: var(--video-call-bar-space);
}

.video-call-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: stretch;
  background: #050607;
}

.video-call-overlay[hidden] {
  display: none;
}

.video-call-card {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  overflow: hidden;
  color: #fff;
  background: #050607;
}

.video-call-stage {
  position: relative;
  min-height: 0;
  overflow: hidden;
}

.video-call-remote,
.video-call-waiting {
  position: absolute;
  inset: 0;
}

.video-call-remote {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
  background: #050607;
}

.video-call-waiting {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 10px;
  padding: 24px;
  text-align: center;
  background:
    radial-gradient(circle at 50% 34%, rgba(91, 192, 190, 0.2), transparent 34%),
    #111827;
}

.video-call-overlay.has-remote .video-call-waiting {
  display: none;
}

.video-call-orb {
  width: 92px;
  height: 92px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(91, 192, 190, 0.95), rgba(107, 88, 229, 0.95));
  box-shadow: 0 0 0 16px rgba(91, 192, 190, 0.14);
  font-weight: 950;
  letter-spacing: 0;
}

.video-call-waiting h2,
.video-call-waiting p {
  margin: 0;
}

.video-call-local {
  position: absolute;
  left: 16px;
  bottom: 12px;
  width: min(26vw, 128px);
  aspect-ratio: 3 / 4;
  object-fit: contain;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 14px;
  background: #111827;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.42);
}

.video-call-menu-head {
  display: none;
}

.video-call-controls {
  position: relative;
  left: auto;
  right: auto;
  bottom: auto;
  z-index: 3;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(3px, 0.9vw, 6px);
  flex-wrap: nowrap;
  width: min(620px, calc(100vw - 10px));
  margin: 6px auto max(8px, env(safe-area-inset-bottom, 8px));
  padding: 5px;
  border-radius: 18px;
  background: rgba(12, 16, 24, 0.78);
  backdrop-filter: blur(18px);
  transform: none;
}

.video-call-controls button {
  flex: 0 1 auto;
  min-width: 0;
  min-height: 42px;
  margin: 0;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  padding: 0 clamp(6px, 1.7vw, 11px);
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
  font-weight: 850;
  font-size: clamp(0.64rem, 2.15vw, 0.8rem);
  line-height: 1.1;
  white-space: nowrap;
  cursor: pointer;
}

.video-call-controls button.off {
  background: #ef5d55;
}

.video-answer {
  background: #5bc0be !important;
  min-width: 132px;
}

.video-decline,
.video-hangup {
  background: #ef5d55 !important;
  flex: 0 0 auto;
}

.video-call-lightbar {
  display: none;
}

.video-call-pip-anchor {
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 1;
  width: 2px;
  height: 2px;
  opacity: 0.01;
  pointer-events: none;
}

.video-call-overlay.docked .video-call-lightbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  display: block;
  width: 100%;
  height: var(--video-call-bar-space);
  margin: 0 !important;
  padding: 0;
  border: 0;
  border-radius: 0;
  cursor: pointer;
  pointer-events: auto;
  background:
    linear-gradient(90deg, transparent, rgba(91, 192, 190, 0.78), rgba(107, 88, 229, 0.92), rgba(91, 192, 190, 0.78), transparent);
  box-shadow: 0 0 18px rgba(91, 192, 190, 0.55);
}

.video-call-lightbar-glow {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 44px;
  height: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 0 16px rgba(255, 255, 255, 0.55);
  transform: translate(-50%, -50%);
}

.video-call-overlay.docked {
  inset: 0 0 auto 0;
  width: auto;
  height: var(--video-call-bar-space);
  padding: 0;
  background: transparent;
  display: block;
  pointer-events: none;
}

.video-call-overlay.docked .video-call-card {
  position: fixed;
  left: 0;
  top: 0;
  width: 1px;
  height: 1px;
  min-height: 0;
  opacity: 0.001;
  overflow: hidden;
  pointer-events: none;
  background: transparent;
}

.video-call-overlay.docked.menu-open .video-call-card {
  top: calc(var(--video-call-bar-space) + 6px);
  left: 12px;
  right: 12px;
  width: min(620px, calc(100vw - 24px));
  height: auto;
  min-height: 0;
  margin: 0 auto;
  opacity: 1;
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  grid-template-rows: none;
  align-items: center;
  column-gap: 12px;
  row-gap: 9px;
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 32px;
  color: #fff;
  background: linear-gradient(180deg, rgba(42, 43, 39, 0.97), rgba(24, 25, 23, 0.97));
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.46);
  pointer-events: auto;
}

.video-call-overlay.docked .video-call-stage {
  position: fixed;
  inset: auto;
  left: 0;
  bottom: 0;
  width: 180px;
  height: 104px;
  opacity: 0.001;
  pointer-events: none;
  overflow: hidden;
}

.video-call-overlay.docked.menu-open .video-call-menu-head {
  display: contents;
}

.video-call-avatar {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background:
    linear-gradient(135deg, rgba(91, 192, 190, 0.95), rgba(107, 88, 229, 0.95)),
    #111827;
  font-size: 1.45rem;
  box-shadow: 0 0 0 6px rgba(91, 192, 190, 0.12);
}

.video-call-copy {
  min-width: 0;
}

.video-call-copy h2 {
  margin: 0;
  font-size: 1rem;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.video-call-copy p {
  margin: 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.78rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.video-call-overlay.docked.menu-open .video-call-controls {
  position: static;
  grid-column: 1 / -1;
  width: 100%;
  margin: 0;
  transform: none;
  justify-content: center;
  gap: clamp(3px, 0.9vw, 6px);
  flex-wrap: nowrap;
  padding: 0;
  background: transparent;
  backdrop-filter: none;
  pointer-events: auto;
}

.video-call-overlay.docked.menu-open .video-back {
  display: none;
}

.video-call-overlay.docked .video-call-controls button {
  min-height: 40px;
  padding: 0 clamp(6px, 1.55vw, 10px);
  font-size: clamp(0.64rem, 2vw, 0.76rem);
}

@media (max-width: 520px) {
  :root {
    --video-call-control-space: 62px;
  }
  .video-call-controls {
    width: calc(100vw - 8px);
    padding: 4px;
    border-radius: 16px;
  }
  .video-call-controls button {
    min-height: 40px;
  }
  .video-call-local {
    width: min(27vw, 112px);
    left: 12px;
  }
  .video-call-overlay.docked.menu-open .video-call-card {
    grid-template-columns: 48px minmax(0, 1fr);
    column-gap: 10px;
    padding: 9px 10px;
  }
  .video-call-avatar {
    width: 48px;
    height: 48px;
  }
}

/* Mockup-approved home modules, mounted inside the live contacts dashboard. */
.contact-list-wrap > .home-hub-launcher {
  display: grid !important;
  gap: clamp(14px, 2vw, 18px) !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 0 clamp(16px, 2vw, 22px) !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.home-theme-strip,
.home-shortcut-card,
.contact-list-wrap .public-profile-hub-section.hub-approved-card,
.contact-list-wrap #foundingMemberBlock.public-profile-hub-section {
  position: relative !important;
  overflow: hidden !important;
  border-radius: 24px !important;
  border: 1px solid rgba(94, 136, 255, 0.35) !important;
  background:
    radial-gradient(circle at 8% 0%, rgba(244, 63, 94, 0.16), transparent 32%),
    radial-gradient(circle at 100% 8%, rgba(68, 133, 255, 0.20), transparent 34%),
    linear-gradient(135deg, rgba(18, 27, 58, 0.96), rgba(9, 16, 36, 0.96)) !important;
  box-shadow: 0 22px 54px rgba(0, 0, 0, 0.24) !important;
}

.home-theme-strip,
.contact-list-wrap .public-profile-hub-section.hub-approved-card,
.contact-list-wrap #foundingMemberBlock.public-profile-hub-section {
  padding: clamp(18px, 2.4vw, 26px) !important;
}

.home-theme-head,
.hub-section-title,
.founder-card-head {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 14px !important;
  margin-bottom: 16px !important;
}

.home-theme-head h3,
.hub-section-title h3,
.founder-card-head h3 {
  margin: 0 !important;
  color: rgba(255, 255, 255, 0.96) !important;
  font-size: clamp(1.35rem, 3vw, 1.8rem) !important;
  line-height: 1.08 !important;
}

.home-theme-head p,
.hub-section-title p,
.founder-card-head p,
.hub-approved-card .hub-copy {
  margin: 7px 0 0 !important;
  color: rgba(214, 223, 255, 0.68) !important;
  font-size: clamp(0.95rem, 2vw, 1.1rem) !important;
  line-height: 1.35 !important;
}

.home-strip-action,
.home-shortcut-action,
.founder-action,
.hub-approved-card .public-profile-action.primary,
.hub-approved-card .public-profile-action.gradient {
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  background: linear-gradient(135deg, #3577ff 0%, #7d5cff 52%, #f03966 100%) !important;
  color: #fff !important;
  box-shadow: 0 16px 36px rgba(53, 119, 255, 0.28) !important;
}

.home-strip-action,
.founder-action {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 54px !important;
  padding: 0 24px !important;
  border-radius: 999px !important;
  font-weight: 900 !important;
  cursor: pointer !important;
}

.home-theme-grid {
  display: grid !important;
  grid-template-columns: repeat(6, minmax(118px, 1fr)) !important;
  gap: 12px !important;
}

.home-theme-card {
  min-height: 112px !important;
  display: flex !important;
  align-items: flex-end !important;
  justify-content: space-between !important;
  gap: 10px !important;
  padding: 14px !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  border-radius: 16px !important;
  color: #fff !important;
  font-weight: 900 !important;
  text-align: left !important;
  cursor: pointer !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 14px 28px rgba(0, 0, 0, 0.18) !important;
}

.home-theme-card small {
  color: rgba(255, 255, 255, 0.92) !important;
  font-weight: 900 !important;
}

.home-theme-card.is-active {
  outline: 2px solid rgba(255, 255, 255, 0.78) !important;
  outline-offset: 2px !important;
}

.home-shortcut-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1.4fr) minmax(260px, 0.9fr) !important;
  gap: 14px !important;
}

.home-shortcut-card {
  min-height: 96px !important;
  display: grid !important;
  grid-template-columns: auto 1fr auto !important;
  align-items: center !important;
  gap: 16px !important;
  padding: 18px 22px !important;
  cursor: pointer !important;
}

.home-shortcut-icon {
  width: 46px !important;
  height: 46px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, 0.12) !important;
  font-size: 1.35rem !important;
}

.home-shortcut-card strong {
  display: block !important;
  color: #fff !important;
  font-size: 1.15rem !important;
}

.home-shortcut-card span {
  display: block !important;
  margin-top: 4px !important;
  color: rgba(214, 223, 255, 0.66) !important;
}

.hub-approved-card + .hub-approved-card,
.contact-list-wrap #foundingMemberBlock.public-profile-hub-section {
  margin-top: 18px !important;
}

.hub-approved-card .hub-card-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

.hub-approved-card .public-profile-action {
  min-height: 86px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  gap: 5px !important;
  padding: 16px 18px !important;
  border-radius: 18px !important;
  border: 1px solid rgba(148, 163, 184, 0.22) !important;
  background: rgba(5, 13, 32, 0.48) !important;
  color: #fff !important;
  text-align: left !important;
  cursor: pointer !important;
}

.hub-approved-card .public-profile-action strong {
  color: #fff !important;
  font-size: clamp(1rem, 2vw, 1.15rem) !important;
  line-height: 1.12 !important;
}

.hub-approved-card .public-profile-action small {
  color: rgba(214, 223, 255, 0.66) !important;
  font-size: 0.92rem !important;
  line-height: 1.25 !important;
}

.hub-approved-card .profile-toggle-row {
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  gap: 14px !important;
  align-items: center !important;
  min-height: 70px !important;
  padding: 15px 16px !important;
  margin-bottom: 12px !important;
  border: 1px solid rgba(148, 163, 184, 0.22) !important;
  border-radius: 17px !important;
  background: rgba(5, 13, 32, 0.44) !important;
}

.hub-approved-card .profile-toggle-row span,
.hub-approved-card .profile-toggle-row strong {
  display: block !important;
  color: #fff !important;
  font-weight: 900 !important;
}

.hub-approved-card .profile-toggle-row small {
  display: block !important;
  margin-top: 3px !important;
  color: rgba(214, 223, 255, 0.64) !important;
}

.hub-approved-card .profile-toggle-row input,
.hub-approved-card .dl-pill-toggle {
  width: 54px !important;
  height: 30px !important;
}

.founder-card-body {
  display: grid !important;
  gap: 14px !important;
}

.founder-card-main {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
}

.founder-card-main .founder-avatar {
  width: 74px !important;
  height: 74px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #e11d72, #6d5dfc) !important;
  font-size: 2rem !important;
  box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.05) !important;
}

.founder-card-actions {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 12px !important;
}

@media (max-width: 920px) {
  .home-theme-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .home-shortcut-row {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 640px) {
  .home-theme-head,
  .hub-section-title,
  .founder-card-head {
    display: grid !important;
  }

  .home-theme-grid,
  .hub-approved-card .hub-card-grid,
  .founder-card-actions {
    grid-template-columns: 1fr !important;
  }

  .home-theme-card {
    min-height: 92px !important;
  }

  .home-shortcut-card {
    grid-template-columns: auto 1fr !important;
  }

  .home-shortcut-action {
    display: none !important;
  }
}

/* Mobile-correct theme store shelf from the approved mockup. */
.contact-list-wrap .home-theme-copy {
  display: grid !important;
  gap: 8px !important;
}

.contact-list-wrap .home-strip-kicker {
  display: block !important;
  color: rgba(213, 202, 255, 0.9) !important;
  font-size: clamp(0.78rem, 2.8vw, 0.95rem) !important;
  font-weight: 900 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
}

.contact-list-wrap .home-theme-copy h2 {
  margin: 0 !important;
  color: #fff !important;
  font-size: clamp(1.5rem, 6.5vw, 2.5rem) !important;
  line-height: 1.08 !important;
}

.contact-list-wrap .home-theme-options {
  display: flex !important;
  align-items: stretch !important;
  gap: clamp(12px, 3.2vw, 18px) !important;
  width: 100% !important;
  max-width: 100% !important;
  margin-top: clamp(6px, 2vw, 12px) !important;
  padding: 4px 18px 8px 4px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scroll-snap-type: x proximity !important;
  -webkit-overflow-scrolling: touch !important;
}

.contact-list-wrap .home-theme-options::-webkit-scrollbar {
  display: none !important;
}

.contact-list-wrap .home-theme-card {
  flex: 0 0 clamp(190px, 42vw, 270px) !important;
  min-width: clamp(190px, 42vw, 270px) !important;
  min-height: clamp(108px, 20vw, 132px) !important;
  scroll-snap-align: start !important;
  border-radius: 18px !important;
}

.contact-list-wrap .home-theme-card[data-theme="ocean"] {
  background:
    radial-gradient(circle at 8% 0%, rgba(125, 226, 255, 0.62), transparent 36%),
    linear-gradient(135deg, #24b7d4, #0f6e62 72%, #07372f) !important;
}

.contact-list-wrap .home-theme-card[data-theme="midnight"] {
  background:
    radial-gradient(circle at 0% 0%, rgba(255, 255, 255, 0.36), transparent 32%),
    linear-gradient(135deg, #8b91a9, #17213f 42%, #050914) !important;
}

.contact-list-wrap .home-theme-card[data-theme="sunset"] {
  background:
    radial-gradient(circle at 5% 2%, rgba(255, 206, 132, 0.5), transparent 34%),
    linear-gradient(135deg, #ef705d, #8f22af 56%, #4c1685) !important;
}

.contact-list-wrap .home-theme-card[data-theme="caribbean"] {
  background:
    radial-gradient(circle at 6% 0%, rgba(170, 250, 215, 0.55), transparent 34%),
    linear-gradient(135deg, #73c6a6, #1b7059 62%, #083c2f) !important;
}

.contact-list-wrap .home-wide-shortcut {
  position: relative !important;
  min-height: 96px !important;
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  align-items: center !important;
  column-gap: 14px !important;
  padding: clamp(16px, 4vw, 22px) !important;
  border-radius: 20px !important;
  border: 1px solid rgba(94, 136, 255, 0.38) !important;
  background:
    radial-gradient(circle at 0% 0%, rgba(244, 63, 94, 0.18), transparent 34%),
    linear-gradient(135deg, rgba(37, 26, 72, 0.92), rgba(20, 40, 82, 0.9)) !important;
  color: #fff !important;
  text-align: left !important;
  cursor: pointer !important;
}

.contact-list-wrap .home-wide-shortcut span {
  grid-row: span 2 !important;
  width: 44px !important;
  height: 44px !important;
  display: grid !important;
  place-items: center !important;
  font-size: 1.45rem !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, 0.12) !important;
}

.contact-list-wrap .home-wide-shortcut strong {
  min-width: 0 !important;
  color: #fff !important;
  font-size: clamp(1.18rem, 4.6vw, 1.8rem) !important;
  line-height: 1.08 !important;
}

.contact-list-wrap .home-wide-shortcut small {
  min-width: 0 !important;
  color: rgba(221, 226, 255, 0.64) !important;
  font-size: clamp(0.92rem, 3.6vw, 1.12rem) !important;
  line-height: 1.3 !important;
}

.contact-list-wrap .home-watch-shortcut {
  border-color: rgba(244, 63, 94, 0.44) !important;
  background:
    radial-gradient(circle at 100% 0%, rgba(244, 63, 94, 0.22), transparent 32%),
    linear-gradient(135deg, rgba(65, 20, 70, 0.96), rgba(96, 14, 56, 0.92)) !important;
}

@media (max-width: 640px) {
  .contact-list-wrap > .home-hub-launcher {
    gap: 14px !important;
  }

  .contact-list-wrap .home-theme-strip {
    padding: 22px 18px 18px !important;
  }

  .contact-list-wrap .home-theme-head {
    display: contents !important;
  }

  .contact-list-wrap .home-strip-action {
    width: min(270px, 78%) !important;
    min-height: 58px !important;
    margin: 12px 0 6px !important;
    font-size: 1.03rem !important;
  }

  .contact-list-wrap .home-theme-card {
    flex-basis: clamp(190px, 62vw, 260px) !important;
    min-width: clamp(190px, 62vw, 260px) !important;
    min-height: 112px !important;
  }

  .contact-list-wrap .home-shortcut-row {
    grid-template-columns: minmax(0, 1.55fr) minmax(118px, 0.85fr) !important;
    gap: 12px !important;
  }

  .contact-list-wrap .home-wide-shortcut {
    min-height: 106px !important;
    padding: 16px 14px !important;
  }

  .contact-list-wrap .home-watch-shortcut {
    grid-template-columns: 1fr !important;
    align-content: center !important;
    row-gap: 8px !important;
  }

  .contact-list-wrap .home-watch-shortcut span {
    grid-row: auto !important;
    width: 38px !important;
    height: 38px !important;
  }
}

/* Clean-room dashboard profile hub port: final layer wins over old live profile artifacts. */
.contact-list-wrap #publicProfileBlock.public-profile-block,
.contact-list-wrap .public-profile-block {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  margin: 18px 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  overflow: visible !important;
}

.contact-list-wrap #publicProfileBlock::before,
.contact-list-wrap #publicProfileBlock::after,
.contact-list-wrap .public-profile-block::before,
.contact-list-wrap .public-profile-block::after,
.contact-list-wrap .public-profile-hub-section::before,
.contact-list-wrap .public-profile-hub-section::after,
.contact-list-wrap .public-profile-action::before,
.contact-list-wrap .public-profile-action::after {
  content: none !important;
  display: none !important;
}

.contact-list-wrap .public-profile-hub-tools {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 18px !important;
  width: 100% !important;
}

.contact-list-wrap .public-profile-hub-section.hub-approved-card,
.contact-list-wrap .public-profile-hub-section {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  min-height: 0 !important;
  padding: 22px !important;
  border-radius: 20px !important;
  border: 1px solid rgba(82, 124, 240, 0.32) !important;
  background: linear-gradient(135deg, rgba(12, 20, 46, 0.94), rgba(21, 37, 82, 0.82)) !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

.contact-list-wrap .public-profile-hub-section.hub-card-blue { border-top: 3px solid #527cf0 !important; }
.contact-list-wrap .public-profile-hub-section.hub-card-red { border-top: 3px solid #ef4444 !important; }
.contact-list-wrap .public-profile-hub-section.hub-card-green { border-top: 3px solid #22c55e !important; }
.contact-list-wrap .public-profile-hub-section.hub-card-gold { border-top: 3px solid #f5c842 !important; }
.contact-list-wrap .public-profile-hub-section.hub-card-purple { border-top: 3px solid #a855f7 !important; }

.contact-list-wrap .public-profile-section-title {
  display: block !important;
  margin: 0 0 18px !important;
}

.contact-list-wrap .public-profile-section-title strong {
  display: block !important;
  margin: 0 0 8px !important;
  color: #f8fafc !important;
  font-size: clamp(22px, 4.5vw, 32px) !important;
  line-height: 1.05 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

.contact-list-wrap .public-profile-section-title small {
  display: block !important;
  color: #a8b3cf !important;
  font-size: clamp(15px, 3.5vw, 21px) !important;
  line-height: 1.35 !important;
}

.contact-list-wrap .public-profile-subtoggle {
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  align-items: center !important;
  gap: 16px !important;
  margin: 0 0 14px !important;
  padding: 16px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(82, 124, 240, 0.28) !important;
  background: rgba(9, 15, 33, 0.55) !important;
  box-shadow: none !important;
}

.contact-list-wrap .public-profile-subtoggle strong {
  display: block !important;
  color: #f8fafc !important;
  font-size: clamp(16px, 3.8vw, 22px) !important;
  line-height: 1.15 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

.contact-list-wrap .public-profile-subtoggle small {
  display: block !important;
  margin-top: 4px !important;
  color: #9aa5bf !important;
  font-size: clamp(13px, 3.1vw, 18px) !important;
  line-height: 1.25 !important;
}

.contact-list-wrap .public-profile-subtoggle input.dl-pill-toggle,
.contact-list-wrap .public-profile-subtoggle input {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 52px !important;
  height: 30px !important;
  min-width: 52px !important;
  border-radius: 999px !important;
  border: 0 !important;
  background: #0c1327 !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08) !important;
  position: relative !important;
  cursor: pointer !important;
}

.contact-list-wrap .public-profile-subtoggle input.dl-pill-toggle::after,
.contact-list-wrap .public-profile-subtoggle input::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  top: 4px !important;
  left: 4px !important;
  width: 22px !important;
  height: 22px !important;
  border-radius: 50% !important;
  background: #fff !important;
  transition: transform 0.18s ease !important;
}

.contact-list-wrap .public-profile-subtoggle input.dl-pill-toggle:checked,
.contact-list-wrap .public-profile-subtoggle input:checked {
  background: #22c55e !important;
}

.contact-list-wrap .public-profile-subtoggle input.dl-pill-toggle:checked::after,
.contact-list-wrap .public-profile-subtoggle input:checked::after {
  transform: translateX(22px) !important;
}

.contact-list-wrap .public-profile-action-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 14px !important;
  width: 100% !important;
}

.contact-list-wrap .public-profile-action,
.contact-list-wrap #businessProfileActionGrid > .public-profile-action {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  min-height: 112px !important;
  padding: 18px !important;
  border-radius: 18px !important;
  border: 1px solid rgba(82, 124, 240, 0.28) !important;
  background: linear-gradient(180deg, rgba(20, 31, 67, 0.92), rgba(12, 19, 42, 0.9)) !important;
  color: #f8fafc !important;
  text-decoration: none !important;
  box-shadow: none !important;
  text-align: left !important;
}

.contact-list-wrap .public-profile-action.primary,
.contact-list-wrap #businessProfileActionGrid > .public-profile-action.primary {
  border-color: transparent !important;
  background: linear-gradient(135deg, #2f80ff, #8b5cf6 55%, #ef3f6f) !important;
  color: #fff !important;
}

.contact-list-wrap .public-profile-action.full-action {
  width: 100% !important;
  min-height: 58px !important;
  margin-top: 14px !important;
  align-items: center !important;
  text-align: center !important;
}

.contact-list-wrap .public-profile-action strong,
.contact-list-wrap #businessProfileActionGrid > .public-profile-action strong {
  display: block !important;
  color: inherit !important;
  font-size: clamp(16px, 3.8vw, 22px) !important;
  line-height: 1.15 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

.contact-list-wrap .public-profile-action small,
.contact-list-wrap #businessProfileActionGrid > .public-profile-action small {
  display: block !important;
  margin-top: 6px !important;
  color: rgba(226,232,240,0.72) !important;
  font-size: clamp(13px, 3.1vw, 18px) !important;
  line-height: 1.25 !important;
}

@media (max-width: 760px) {
  .contact-list-wrap .public-profile-hub-tools {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  .contact-list-wrap .public-profile-hub-section.hub-approved-card,
  .contact-list-wrap .public-profile-hub-section {
    padding: 18px !important;
    border-radius: 20px !important;
  }

  .contact-list-wrap .public-profile-action-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  .contact-list-wrap .public-profile-action,
  .contact-list-wrap #businessProfileActionGrid > .public-profile-action {
    min-height: 96px !important;
    padding: 14px !important;
    border-radius: 16px !important;
  }
}