/* 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;
}
/* In standalone mode (added to home screen), hide all browser-chrome
   touch hints and make sure scrolling is locked properly. */
@media all and (display-mode: standalone) {
  html, body { overflow: hidden; }
  body { user-select: none; -webkit-user-select: none; }
  /* The chat-pane and other scrollable regions opt back in below. */
  .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); }

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 > .status-toggle { justify-self: start; }
.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;
}
.app-header > .user-group #avatarBtn {
  /* The emoji-fallback letter has its own baseline; force a tight
     line-height so the circle aligns flush with the username. */
  line-height: 1;
  vertical-align: middle;
}
.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-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;
}

/* Owner profile picture button next to the username on the dashboard. */
.avatar-btn {
  background: var(--accent);
  border: 0;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  padding: 0;
  cursor: pointer;
  overflow: hidden;
  position: relative;
  flex-shrink: 0;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.avatar-btn:hover { box-shadow: 0 0 0 3px rgba(115, 183, 70, 0.35); }
.avatar-btn:disabled { opacity: 0.5; cursor: wait; }
.avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.avatar-fallback {
  color: #fff;
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
/* 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;
}
.app-header > .user-group .avatar-btn {
  flex-shrink: 0;
  align-self: center;
  /* Optically nudge the avatar up so its center sits flush with the
     visual midline of the username text. The h1 below has line-height
     32px which leaves the glyph optical center a couple pixels below
     the box midpoint; this offset compensates on both mobile + desktop. */
  transform: translateY(-2px);
}
.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 / username / language / Install / sign-out all share the same
   baseline pill shape (height, padding, font-size, border-radius). The
   Install pill is included so the Lang ▾ / Install / Sign out trio sits
   on a single horizontal plane (support: "It should be on the same plane
   horizontally"). */
.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 / Install / Sign out trio. Force nowrap so the
   three pills always sit on one row — the Install pill was wrapping below
   on iOS Safari at narrow widths. 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 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.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: center;
  justify-content: center;
  padding: 24px;
  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.private-circle-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); }

/* 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);
}
.app-header .avatar-btn,
.chat-header .avatar-btn {
  width: var(--header-avatar-size);
  height: var(--header-avatar-size);
}

/* 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; }

/* 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 #installPill,
  .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;
  }

  /* Install pill — icon-only (📲). The "Install" text inside the inner
     <span data-i18n="install"> is hidden via font-size:0; the icon is
     injected via ::before so we don't need to touch app.html or the i18n
     dictionary entries. */
  .app-header > .right-group #installPill {
    width: 32px;
    height: 32px;
    padding: 0;
    margin: 0;
    min-height: 32px;
    border-radius: 999px;
    font-size: 0;
    overflow: hidden;
  }
  .app-header > .right-group #installPill::before {
    content: "📲";
    font-size: 1rem;
    line-height: 1;
  }
  .app-header > .right-group #installPill > * { display: none; }

  /* 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;
}

.app-header > .user-group .avatar-btn {
  transform: none !important;
  align-self: center !important;
  display: grid !important;
  place-items: center !important;
  width: var(--header-avatar-size, 40px);
  height: var(--header-avatar-size, 40px);
  margin: 0;
}

.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;
}

.avatar-img,
.contact-avatar-img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  border-radius: inherit;
}

.avatar-fallback,
.contact-avatar-fallback {
  width: 100%;
  height: 100%;
  display: grid !important;
  place-items: center !important;
  line-height: 1 !important;
  text-align: center;
}

.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);
}
.app-header .avatar-btn {
  width: 48px;
  height: 48px;
  border-radius: 50% !important;
  border: 2px solid color-mix(in srgb, var(--accent) 62%, #fff 18%);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 20%, transparent);
}
.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;
  }
  .app-header .avatar-btn {
    width: 42px;
    height: 42px;
  }
  .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;
}
.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;
}

/* v97 — account-holder avatar must stay a true circle on mobile Safari.
   Tight header layouts were allowing the button to compress into an oval
   after a real photo upload. */
.app-header .user-group .avatar-btn,
.app-header > .user-group #avatarBtn {
  --dl-owner-avatar-size: clamp(42px, 11vw, 54px);
  width: var(--dl-owner-avatar-size) !important;
  height: var(--dl-owner-avatar-size) !important;
  min-width: var(--dl-owner-avatar-size) !important;
  max-width: var(--dl-owner-avatar-size) !important;
  min-height: var(--dl-owner-avatar-size) !important;
  max-height: var(--dl-owner-avatar-size) !important;
  aspect-ratio: 1 / 1 !important;
  flex: 0 0 var(--dl-owner-avatar-size) !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  padding: 0 !important;
}
.app-header .user-group .avatar-img,
.app-header .user-group .avatar-fallback {
  width: 100% !important;
  height: 100% !important;
  min-width: 100% !important;
  min-height: 100% !important;
  border-radius: 50% !important;
}
.app-header .user-group .avatar-img {
  object-fit: cover !important;
  object-position: center center !important;
}
@media (max-width: 420px) {
  .app-header .user-group .avatar-btn,
  .app-header > .user-group #avatarBtn {
    --dl-owner-avatar-size: 44px;
  }
}

/* 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.65 — fix floating avatar in profile header. Constrain the
   wrapper to a fixed circle and make the inner image / fallback fill
   it. Add a small ring so it reads as a profile picture.
   Also adds spacing for the new ← My contacts back link. */
.pp-public-header .pp-header-avatar {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 88px !important;
  height: 88px !important;
  min-width: 88px !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  background: rgba(255,255,255,0.08) !important;
  border: 2px solid rgba(255,255,255,0.18) !important;
  flex-shrink: 0 !important;
  vertical-align: middle !important;
}
.pp-public-header .pp-header-avatar img,
.pp-public-header .pp-header-avatar svg {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 50% !important;
  display: block !important;
}
.pp-public-header .pp-header-avatar > span {
  font-size: 2rem !important;
  font-weight: 800 !important;
  color: #fff !important;
}
@media (max-width: 720px) {
  .pp-public-header .pp-header-avatar {
    width: 72px !important;
    height: 72px !important;
    min-width: 72px !important;
  }
}

.pp-brand-strip .pp-back-link:hover {
  text-decoration: underline !important;
}

/* v100.67 — kill the redundant top pp-public-header (the floating
   "Public profile + tiny avatar + Test" strip). The page already
   shows the full profile below with proper avatar, name, handle, and
   actions. The new global ← My contacts back button handles navigation.
   Sydal: "the profile picture is still floating." */
.pp-shell .pp-public-header {
  display: none !important;
}

/* v100.71 — separate the owner edit toolbar from the profile content
   below so the avatar doesn't appear to overlap/float between them.
   Sydal: "the reason you can't fix it is because its just a spacing
   issue between the setup and the actual profile." */
.pp-shell .pp-profile-stack {
  margin-top: 64px !important;
}
.pp-shell .pp-owner-edit-toolbar,
.pp-shell .pp-owner-toolbar,
.pp-shell .pp-edit-toolbar,
.pp-shell .followers-can-message,
.pp-shell .public-profile-edit-block {
  margin-bottom: 48px !important;
  padding-bottom: 24px !important;
}
.pp-shell .pp-cover-wrap {
  margin-top: 32px !important;
}
.pp-shell .pp-avatar,
.pp-shell .pp-profile-avatar {
  position: relative !important;
  margin-top: 0 !important;
  z-index: 2;
}