:root {
  --bg: #0b0b0f;
  --bg2: #121218;
  --card: #18181f;
  --card-hover: #1e1e28;
  --text: #f2f2f5;
  --hint: #8b8b9a;
  --btn: #6c5ce7;
  --btn-hover: #7f71ef;
  --btn-text: #fff;
  --danger: #ff6b7a;
  --border: #2a2a36;
  --accent: #a78bfa;
  --sidebar-w: 72px;
  --sidebar-exp: 240px;
  --profile-w: 300px;
  --radius: 14px;
  /* Mobile browser chrome: JS sets --app-height from visualViewport; CSS falls back to dvh */
  --app-height: 100vh;
  --app-height: 100dvh;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --mobile-nav-h: 58px;
  --vv-offset-top: 0px;
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
}

* { box-sizing: border-box; }
html, body {
  height: 100%;
  height: var(--app-height);
  max-height: var(--app-height);
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  min-height: var(--app-height);
  overflow: hidden;
}
.hidden { display: none !important; }

/* —— Landing (logged out) —— */
.view-login {
  position: relative;
  min-height: var(--app-height);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  background:
    radial-gradient(ellipse 90% 60% at 80% 10%, color-mix(in srgb, var(--btn) 22%, transparent), transparent 55%),
    radial-gradient(ellipse 70% 50% at 10% 90%, color-mix(in srgb, #a855f7 14%, transparent), transparent 50%),
    var(--bg);
  padding-top: var(--safe-top);
  padding-bottom: var(--safe-bottom);
}
.landing {
  min-height: calc(var(--app-height) - var(--safe-top) - var(--safe-bottom));
  max-width: 1100px;
  margin: 0 auto;
  padding: 20px 24px 28px;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  width: 100%;
}
.landing-top {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px 16px;
  padding: 4px 0 20px;
  position: sticky;
  top: 0;
  z-index: 40;
  background: transparent;
}
.landing-top-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
/* Language control pinned to the left of the landing header */
.landing-lang.landing-lang-sticky {
  position: sticky;
  left: 0;
  flex-shrink: 0;
  order: -1;
  margin-right: 0;
  z-index: 2;
}
.landing-mark {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  object-fit: cover;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--btn) 40%, transparent);
}
.landing-brand {
  font-size: 1.05rem;
  letter-spacing: 0.01em;
}
/* Landing language switcher (top-right globe) */
.landing-lang {
  position: relative;
  flex-shrink: 0;
}
.landing-lang-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--border, #333) 80%, transparent);
  background: color-mix(in srgb, var(--panel, #16161c) 88%, transparent);
  color: var(--text);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.landing-lang-btn:hover,
.landing-lang-btn[aria-expanded="true"] {
  border-color: color-mix(in srgb, var(--btn, #7c5cff) 55%, transparent);
  background: color-mix(in srgb, var(--btn, #7c5cff) 12%, transparent);
}
.landing-lang-icon {
  flex-shrink: 0;
  opacity: 0.92;
}
.landing-lang-code {
  text-transform: uppercase;
  min-width: 1.5em;
}
.landing-lang-caret {
  font-size: 0.65rem;
  opacity: 0.7;
}
.landing-lang-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  min-width: 11.5rem;
  max-height: min(70vh, 22rem);
  overflow: auto;
  padding: 6px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--border, #333) 90%, transparent);
  background: color-mix(in srgb, var(--panel, #121218) 96%, #000);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
  z-index: 200;
}
.landing-lang-menu.hidden {
  display: none;
}
.landing-lang-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--text);
  font-size: 0.92rem;
  text-align: left;
  cursor: pointer;
}
.landing-lang-item:hover {
  background: color-mix(in srgb, var(--btn, #7c5cff) 14%, transparent);
}
.landing-lang-item.active {
  background: color-mix(in srgb, var(--btn, #7c5cff) 22%, transparent);
  font-weight: 600;
}
.landing-lang-item .code {
  font-size: 0.72rem;
  opacity: 0.65;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
/* Divider between stable languages and beta (ru/ja/vi/ta/te) */
.landing-lang-beta,
.lang-beta-break {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 6px 2px 4px;
  padding: 2px 6px;
  pointer-events: none;
  user-select: none;
}
.lang-beta-break {
  flex: 1 0 100%;
  margin: 8px 0 4px;
  padding: 0;
}
.landing-lang-beta::before,
.landing-lang-beta::after,
.lang-beta-break::before,
.lang-beta-break::after {
  content: "";
  flex: 1;
  height: 1px;
  background: color-mix(in srgb, var(--border, #333) 85%, transparent);
  opacity: 0.9;
}
.lang-beta-label {
  font-size: 0.62rem;
  font-weight: 650;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--hint, #888);
  opacity: 0.85;
  white-space: nowrap;
}
.landing-hero {
  flex: 1 1 auto;
  display: block;
  padding: 12px 0 28px;
  min-height: 0;
}
/* Pin footer under hero on the first screen */
.landing-main-col > .landing-foot {
  margin-top: auto;
  flex-shrink: 0;
}
.landing-with-strip .landing-copy {
  max-width: 36rem;
}
.landing-kicker {
  margin: 0 0 12px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}
.landing-copy h1 {
  margin: 0 0 16px;
  font-size: clamp(1.85rem, 4vw, 2.65rem);
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.landing-lead {
  margin: 0 0 20px;
  font-size: 1.05rem;
  line-height: 1.55;
  color: color-mix(in srgb, var(--text) 88%, var(--hint));
  max-width: 34em;
}
.landing-perks {
  margin: 0 0 28px;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.landing-perks li {
  position: relative;
  padding-left: 1.4em;
  color: var(--hint);
  font-size: 0.95rem;
  line-height: 1.4;
}
.landing-perks li::before {
  content: "✦";
  position: absolute;
  left: 0;
  color: var(--accent);
  font-size: 0.75rem;
  top: 0.2em;
}
.landing-perk-free {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}
.free-how-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  margin: 0 0 4px;
}
.free-how-link {
  display: inline-block;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 550;
  line-height: 1.2;
  color: var(--accent, #7c6af5);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
  opacity: 0.92;
}
.free-how-link:hover {
  opacity: 1;
  color: color-mix(in srgb, var(--accent, #7c6af5) 85%, var(--text));
}
.landing-perk-free .free-how-link {
  margin-left: 0;
  padding-left: 0;
}
.billing-world-h-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  margin: 0 0 6px;
}
.billing-world-h-wrap .billing-world-h {
  margin: 0;
}
.billing-world-h-wrap .free-how-link {
  font-size: 0.8rem;
}
.landing-cta {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 18px 18px 16px;
  background: color-mix(in srgb, var(--card) 88%, transparent);
  border: 1px solid var(--border);
  border-radius: 16px;
  max-width: 360px;
  backdrop-filter: blur(8px);
}
.login-widget {
  min-height: 48px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  width: 100%;
  gap: 8px;
}
.login-widget-google {
  min-height: 0;
  gap: 8px;
}
.login-widget-google:empty {
  display: none;
  min-height: 0;
}
/* Matching themed Sign in buttons (Telegram + Google) */
.landing-signin-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 48px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--border));
  background: color-mix(in srgb, var(--card) 70%, var(--bg2));
  color: var(--text);
  font: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease,
    transform 0.1s ease;
  box-shadow: 0 1px 0 color-mix(in srgb, #fff 4%, transparent);
}
.landing-signin-btn:hover {
  background: color-mix(in srgb, var(--accent) 16%, var(--card));
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}
.landing-signin-btn:active {
  transform: translateY(1px);
}
.landing-signin-btn:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent) 70%, transparent);
  outline-offset: 2px;
}
.landing-signin-telegram {
  border-color: color-mix(in srgb, #2aabee 45%, var(--border));
  background: linear-gradient(
    180deg,
    color-mix(in srgb, #2aabee 22%, var(--card)) 0%,
    color-mix(in srgb, #2aabee 10%, var(--card)) 100%
  );
}
.landing-signin-telegram:hover {
  border-color: color-mix(in srgb, #2aabee 70%, var(--border));
  background: linear-gradient(
    180deg,
    color-mix(in srgb, #2aabee 32%, var(--card)) 0%,
    color-mix(in srgb, #2aabee 14%, var(--card)) 100%
  );
  box-shadow: 0 0 0 3px color-mix(in srgb, #2aabee 20%, transparent);
}
.landing-signin-telegram .landing-signin-icon {
  color: #6fc8ff;
}
.landing-signin-google {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--accent) 18%, var(--card)) 0%,
    color-mix(in srgb, var(--btn) 12%, var(--card)) 100%
  );
}
.landing-signin-google:hover {
  border-color: color-mix(in srgb, var(--accent) 65%, var(--border));
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--accent) 28%, var(--card)) 0%,
    color-mix(in srgb, var(--btn) 18%, var(--card)) 100%
  );
}
.landing-signin-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  display: block;
}
.landing-signin-label {
  line-height: 1.2;
  white-space: nowrap;
}
.landing-signin-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin: 2px 0;
}
.landing-signin-divider::before,
.landing-signin-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border, rgba(255, 255, 255, 0.12));
}
.landing-signin-divider-text {
  font-size: 0.72rem;
  color: var(--hint, #8b8b9a);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
}
/* Official GIS button lives off-screen; custom button triggers it */
.google-gsi-ghost {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  padding: 0;
  margin: -1px;
  opacity: 0;
  pointer-events: none;
}
.landing-status { min-height: 1.2em; margin: 0; font-size: 0.88rem; }
.landing-meta {
  margin: 10px 0 0;
  line-height: 1.4;
  letter-spacing: 0.02em;
  text-align: center;
  opacity: 0.9;
}
.landing-fine { margin: 4px 0 0; line-height: 1.35; }
.landing-visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 320px;
}
.landing-orb {
  position: absolute;
  width: min(420px, 90%);
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--btn) 35%, transparent), transparent 55%),
    radial-gradient(circle at 70% 70%, color-mix(in srgb, #a855f7 25%, transparent), transparent 50%);
  filter: blur(2px);
  animation: landingPulse 8s ease-in-out infinite;
}
.landing-hero-img {
  position: relative;
  width: min(280px, 70%);
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 28px;
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.45),
    0 0 0 1px color-mix(in srgb, var(--btn) 30%, transparent);
}
@keyframes landingPulse {
  0%, 100% { transform: scale(1); opacity: 0.85; }
  50% { transform: scale(1.04); opacity: 1; }
}
.landing-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  padding-top: 16px;
  border-top: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
  font-size: 0.78rem;
  color: var(--hint);
}
.landing-foot-links { display: flex; gap: 14px; }
.landing-foot-meta {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  gap: 0.4em;
  min-width: 0;
  flex: 0 1 auto;
  text-align: left;
  white-space: nowrap;
}
.landing-foot-copy {
  line-height: 1.35;
  white-space: nowrap;
}
.landing-cookies,
.landing-ai-note {
  margin: 0;
  font-size: inherit;
  line-height: 1.35;
  opacity: 0.9;
  max-width: none;
  white-space: nowrap;
}
.footer-meta-sparkle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #fff;
  opacity: 0.92;
  line-height: 0;
}
.footer-sparkle-ico {
  display: block;
  width: 0.85em;
  height: 0.85em;
  color: #fff;
  filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.35));
}
.muted { color: var(--hint); }
.small { font-size: 0.8rem; }

@media (max-width: 800px) {
  .landing-hero {
    padding-top: 8px;
  }
  .landing-cta { max-width: none; width: 100%; }
}

/* Guest legal overlay */
.landing-legal {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.landing-legal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
}
.landing-legal-sheet {
  position: relative;
  width: min(640px, 100%);
  max-height: min(80vh, 720px);
  overflow: auto;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 18px 18px 22px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
}
.landing-legal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.landing-legal-head h2 { margin: 0; font-size: 1.2rem; }
.landing-legal-head .icon-btn {
  width: 36px;
  height: 36px;
  border: none;
  background: transparent;
  color: var(--hint);
  font-size: 1.4rem;
  cursor: pointer;
  border-radius: 10px;
}
.landing-legal-head .icon-btn:hover { color: var(--text); background: var(--bg); }
.landing-legal-body { max-width: none; }

/*
 * Public product copy (How / FAQ / Safety). Visible on the homepage so Google
 * OAuth does not classify the site as “login only”. Meta + FAQPage JSON-LD stay primary for SERP.
 */
.landing-seo-crawl {
  position: relative;
  width: 100%;
  max-width: 36rem;
  margin: 8px auto 0;
  padding: 8px 4px 36px;
  box-sizing: border-box;
}
.landing-seo,
.landing-how,
.landing-faq,
.landing-safety {
  margin: 0 0 22px;
}
.landing-section-title,
.landing-seo-title {
  margin: 0 0 10px;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0.01em;
}
.landing-seo-text {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--hint);
}
.landing-how-list,
.landing-faq-list {
  margin: 0;
  padding-left: 1.15rem;
  color: var(--hint);
  font-size: 0.9rem;
  line-height: 1.5;
}
.landing-how-list li,
.landing-faq-list li {
  margin: 0 0 8px;
}
.landing-faq-q {
  font-weight: 600;
  color: var(--text);
  margin: 0 0 4px;
}
.landing-faq-a {
  margin: 0 0 12px;
  color: var(--hint);
}
.landing-safety-text {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--hint);
}
.landing-signin-heading {
  margin: 0 0 8px;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--hint);
}
.landing-faq-item {
  margin: 0 0 10px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
  background: color-mix(in srgb, var(--card) 70%, transparent);
}
.landing-faq-item summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--text);
  list-style: none;
}
.landing-faq-item summary::-webkit-details-marker {
  display: none;
}
.landing-faq-item p {
  margin: 8px 0 0;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--hint);
}
.view-login .landing-seo-crawl {
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}

/* Landing: main content + DP rail on the RIGHT (list-sized cards ≥180px) */
.landing.landing-with-strip {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(200px, 220px);
  gap: 12px 36px;
  /* Start-align so a tall rail never stretches the page past the hero */
  align-items: start;
  max-width: 1240px;
  padding-left: 28px;
  padding-right: 20px;
  /* At least one screen; page may grow for footer — view-login scrolls */
  min-height: calc(var(--app-height) - var(--safe-top) - var(--safe-bottom));
}
.landing-main-col {
  min-width: 0;
  display: flex;
  flex-direction: column;
  /* Match viewport so footer pins under hero; rail is independent */
  min-height: calc(var(--app-height) - var(--safe-top) - var(--safe-bottom) - 40px);
}
.landing-dp-rail {
  position: sticky;
  top: 12px;
  /* Hard cap: long DP list never expands the landing page height */
  height: min(calc(var(--app-height) - var(--safe-top) - var(--safe-bottom) - 48px), 92vh, 920px);
  max-height: min(calc(var(--app-height) - var(--safe-top) - var(--safe-bottom) - 48px), 92vh, 920px);
  width: 100%;
  max-width: 220px;
  justify-self: end;
  align-self: start;
  overflow: hidden;
  box-sizing: border-box;
  /* Soft edge masks so the marquee feels continuous */
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    #000 6%,
    #000 94%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    #000 6%,
    #000 94%,
    transparent 100%
  );
}
.landing-dp-viewport {
  height: 100%;
  max-height: 100%;
  /* Auto mode: clip transform marquee. Manual mode (hover): native overflow scroll */
  overflow: hidden;
  position: relative;
  border-radius: 18px;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--btn, #6c5ce7) 45%, transparent) transparent;
  -webkit-overflow-scrolling: touch;
}
.landing-dp-viewport.is-manual {
  overflow-x: hidden;
  overflow-y: auto;
}
.landing-dp-viewport::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}
.landing-dp-viewport::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--btn, #6c5ce7) 45%, transparent);
  border-radius: 999px;
}
.landing-dp-viewport::-webkit-scrollbar-track {
  background: transparent;
}
/* Two equal groups; JS loops at 50% (transform or scroll) */
.landing-dp-track {
  display: flex;
  flex-direction: column;
  width: 100%;
  will-change: transform;
}
.landing-dp-group {
  display: flex;
  flex-direction: column;
  gap: 14px;
  /* Bottom padding = gap so seam between groups matches internal spacing */
  padding-bottom: 14px;
  flex-shrink: 0;
}
/* Card size matches companions grid min (180px, 2:3) */
.landing-dp-item {
  position: relative;
  display: block;
  width: 100%;
  max-width: 200px;
  aspect-ratio: 2 / 3;
  flex-shrink: 0;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--btn, #6c5ce7) 40%, transparent);
  box-shadow:
    0 10px 28px rgba(0, 0, 0, 0.42),
    0 0 0 1px color-mix(in srgb, var(--btn, #6c5ce7) 12%, transparent);
  background: var(--card, #18181f);
  /* No scale on hover — overflow:hidden + rail clip made growth look cheap */
  transition: box-shadow 0.18s ease, border-color 0.18s ease, filter 0.18s ease;
  text-decoration: none;
  color: var(--text);
  font-weight: 650;
  font-size: 1.35rem;
  line-height: 1;
  text-align: center;
}
.landing-dp-item::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2; /* above video, below name caption */
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.72) 0%,
    rgba(0, 0, 0, 0.18) 38%,
    transparent 62%
  );
  pointer-events: none;
  opacity: 0.92;
  transition: opacity 0.18s ease;
}
.landing-dp-item:hover {
  border-color: color-mix(in srgb, var(--btn, #6c5ce7) 75%, transparent);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--btn, #6c5ce7) 40%, transparent),
    0 12px 28px rgba(0, 0, 0, 0.5),
    0 0 20px color-mix(in srgb, var(--btn, #6c5ce7) 22%, transparent);
  filter: brightness(1.06);
}
.landing-dp-item:hover::after {
  opacity: 1;
}
.landing-dp-item:hover .landing-dp-media {
  filter: none;
}
.landing-dp-media {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #111;
}
.landing-dp-item img,
.landing-dp-item .landing-dp-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  z-index: 1;
}
.landing-dp-item .landing-dp-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  border: 0;
  background: transparent;
  pointer-events: none;
  z-index: 2;
}
.landing-dp-item .landing-dp-video.hidden {
  display: none !important;
}
.landing-dp-item .landing-dp-name {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 10px;
  z-index: 3;
  margin: 0;
  font-size: 0.82rem;
  font-weight: 650;
  line-height: 1.25;
  letter-spacing: 0.01em;
  color: #fff;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.65);
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}
@media (max-width: 900px) {
  .landing.landing-with-strip {
    grid-template-columns: minmax(0, 1fr) minmax(160px, 180px);
    gap: 10px 20px;
  }
  .landing-dp-rail {
    max-width: 180px;
  }
}
@media (max-width: 800px) {
  .landing.landing-with-strip {
    grid-template-columns: 1fr;
    padding-left: 16px;
    padding-right: 16px;
  }
  .landing-dp-rail {
    position: relative;
    top: 0;
    height: auto;
    max-height: none;
    width: 100%;
    max-width: none;
    order: -1;
    justify-self: stretch;
    margin: 0 0 8px;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(
      to right,
      transparent 0%,
      #000 5%,
      #000 95%,
      transparent 100%
    );
    mask-image: linear-gradient(
      to right,
      transparent 0%,
      #000 5%,
      #000 95%,
      transparent 100%
    );
  }
  .landing-dp-viewport {
    /* Fixed height so horizontal marquee can measure / animate */
    height: 210px;
    max-height: 210px;
    overflow: hidden;
    border-radius: 14px;
  }
  .landing-dp-viewport.is-manual {
    overflow-x: auto;
    overflow-y: hidden;
  }
  .landing-dp-track {
    flex-direction: row;
    width: max-content;
    height: 100%;
  }
  .landing-dp-group {
    flex-direction: row;
    gap: 12px;
    padding-bottom: 0;
    padding-right: 12px;
    height: 100%;
  }
  .landing-dp-item {
    width: 140px;
    max-width: none;
    height: 100%;
    /* 2:3 of 140 ≈ 210 tall — still large, scrollable strip */
    aspect-ratio: 2 / 3;
  }
}
@media (prefers-reduced-motion: reduce) {
  .landing-dp-rail {
    -webkit-mask-image: none;
    mask-image: none;
  }
  /* Auto-scroll disabled in JS when reduced-motion is set */
}

/* Guest public companion: split DP | full profile details */
.guest-companion-overlay {
  position: fixed;
  inset: 0;
  z-index: 120;
  background:
    radial-gradient(ellipse 70% 50% at 50% 20%, color-mix(in srgb, var(--btn) 18%, transparent), transparent 70%),
    var(--bg, #0b0b0f);
  overflow: auto;
  padding: 16px 20px 40px;
  display: flex;
  flex-direction: column;
}
.guest-companion-overlay.hidden { display: none !important; }
.guest-companion-back {
  align-self: flex-start;
  margin: 0 0 12px;
  background: none;
  border: none;
  color: var(--hint);
  font: inherit;
  cursor: pointer;
  padding: 6px 4px;
}
.guest-companion-back:hover { color: var(--text); }
.guest-companion-split {
  display: grid;
  grid-template-columns: minmax(240px, 42%) minmax(0, 1fr);
  gap: 28px 36px;
  align-items: start;
  width: min(960px, 100%);
  margin: 0 auto;
  flex: 1;
}
.guest-companion-media {
  position: relative;
  width: 100%;
  aspect-ratio: 2 / 3;
  border-radius: 20px;
  overflow: hidden;
  background: #111;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}
.guest-companion-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.guest-companion-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.guest-companion-details {
  text-align: left;
  min-width: 0;
  padding-top: 4px;
}
.guest-companion-details h1 {
  margin: 0 0 6px;
  font-size: 1.65rem;
  line-height: 1.2;
}
.guest-companion-meta {
  margin: 0 0 12px;
  font-size: 0.85rem;
  color: var(--hint);
}
.guest-companion-blurb {
  margin: 0 0 10px;
  font-size: 0.95rem;
  line-height: 1.45;
  color: color-mix(in srgb, var(--text) 90%, var(--hint));
}
.guest-companion-body {
  margin: 0 0 14px;
  font-size: 0.92rem;
  line-height: 1.55;
  white-space: pre-wrap;
}
.guest-companion-life {
  margin: 0 0 16px;
  padding-top: 12px;
  border-top: 1px solid color-mix(in srgb, var(--hint) 22%, transparent);
  font-size: 0.9rem;
  line-height: 1.5;
}
.guest-companion-life .life-line { margin: 0.35em 0; }
.guest-companion-life .life-label {
  color: var(--hint);
  font-weight: 550;
  margin-right: 0.25em;
}
.guest-companion-cta { margin: 0 0 14px; font-size: 0.85rem; }
@media (max-width: 720px) {
  .guest-companion-split {
    grid-template-columns: 1fr;
    max-width: 420px;
  }
  .guest-companion-media {
    max-width: 360px;
    margin: 0 auto;
  }
}
.seo-companion-card { text-align: left; max-width: 960px; margin: 0 auto; }
.seo-companion-split {
  display: grid;
  grid-template-columns: minmax(220px, 40%) 1fr;
  gap: 24px;
  align-items: start;
}
.seo-companion-media {
  position: relative;
  width: 100%;
  aspect-ratio: 2 / 3;
  border-radius: 20px;
  overflow: hidden;
  background: #111;
}
.seo-companion-photo,
.seo-companion-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.seo-companion-video {
  position: absolute;
  inset: 0;
}
.landing-section-title {
  margin: 0 0 12px;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}
/* SEO section styles only apply if crawl block is ever shown for debugging */
.landing-how-list {
  margin: 0;
  padding-left: 1.25rem;
  color: var(--hint);
  font-size: 0.9rem;
  line-height: 1.55;
}
.landing-how-list li { margin-bottom: 0.45em; }
.landing-faq-list { display: flex; flex-direction: column; gap: 8px; }
.landing-faq-item {
  border: 1px solid color-mix(in srgb, var(--hint) 22%, transparent);
  border-radius: 12px;
  padding: 10px 14px;
  background: color-mix(in srgb, var(--sec, #1a1a22) 80%, transparent);
}
.landing-faq-item summary {
  cursor: pointer;
  font-weight: 550;
  font-size: 0.92rem;
  list-style: none;
}
.landing-faq-item summary::-webkit-details-marker { display: none; }
.landing-faq-item p {
  margin: 8px 0 0;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--hint);
}
/* Server-rendered legal / catalog body: HIDDEN by default so it never pushes the app shell.
   Only visible without JS (crawlers / noscript). JS users never see the raw list (boot splash). */
.seo-ssr-root {
  display: none !important;
}
/* Non-JS SEO paint only (html.js hides this via critical CSS too) */
html:not(.js) body.seo-public-ssr .seo-ssr-root {
  display: block !important;
  min-height: 60vh;
  padding: 12px 16px 40px;
}
html:not(.js) body.seo-public-ssr #view-login,
html:not(.js) body.seo-public-ssr #view-app,
html:not(.js) body.seo-public-ssr #app {
  display: none !important;
}
/* SPA guest legal or main app: never show SSR block */
body.guest-legal-mode .seo-ssr-root,
body:not(.seo-public-ssr) .seo-ssr-root,
html.js .seo-ssr-root {
  display: none !important;
}

/* —— Site boot splash (mirrors Mini App) —— */
.boot-screen {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(ellipse 80% 50% at 50% 30%, color-mix(in srgb, var(--btn, #8b5cf6) 18%, transparent), transparent 70%),
    var(--bg, #0b0b0f);
  transition: opacity 0.35s ease, visibility 0.35s ease;
}
.boot-screen.boot-done,
.boot-screen.is-done {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
html:not(.js) .boot-screen {
  display: none !important;
}
.boot-screen .boot-inner {
  text-align: center;
  padding: 24px;
  max-width: 280px;
}
.boot-screen .boot-mark {
  position: relative;
  width: 64px;
  height: 64px;
  margin: 0 auto 18px;
}
.boot-screen .boot-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2.5px solid color-mix(in srgb, var(--hint, #a0a0b4) 25%, transparent);
  border-top-color: var(--btn, #8b5cf6);
  animation: site-boot-spin 0.85s linear infinite;
}
.boot-screen .boot-dot {
  position: absolute;
  inset: 18px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--btn, #8b5cf6) 55%, transparent);
  animation: site-boot-pulse 1.4s ease-in-out infinite;
}
@keyframes site-boot-spin {
  to { transform: rotate(360deg); }
}
@keyframes site-boot-pulse {
  0%, 100% { opacity: 0.45; transform: scale(0.9); }
  50% { opacity: 1; transform: scale(1); }
}
.boot-screen .boot-title {
  margin: 0 0 6px;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text, #f2f2f5);
}
.boot-screen .boot-sub {
  margin: 0;
  font-size: 0.9rem;
  color: var(--hint, #a0a0b4);
}
.seo-ssr-legal {
  max-width: 720px;
  margin: 24px auto 48px;
  padding: 20px 18px 28px;
  line-height: 1.55;
}
.seo-ssr-legal h1 { font-size: 1.45rem; margin: 0 0 0.6em; }
.seo-ssr-legal h2 { font-size: 1.1rem; margin: 1.2em 0 0.45em; }
.seo-ssr-legal .seo-breadcrumb {
  font-size: 0.8rem;
  color: var(--hint);
  margin-bottom: 12px;
}
.seo-ssr-legal .seo-breadcrumb a { color: inherit; }
.seo-ssr-links { margin-top: 1.5em; font-size: 0.9rem; }

/* Guest viewing #/privacy, #/terms, or #/billing without login */
body.guest-legal-mode {
  overflow: auto !important;
}
.coin-ico {
  display: inline-block;
  vertical-align: -0.18em;
  width: 1.15em;
  height: 1.15em;
  flex-shrink: 0;
}

/* —— Currency page: single column ~70% width + list-jump scroll —— */
/* Fill .main so the inner scroller gets a real height (otherwise flex:1 collapses). */
.main:has(#page-currency:not(.hidden)),
.main:has(#page-billing:not(.hidden)) {
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
#page-currency:not(.hidden),
#page-billing:not(.hidden) {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
  width: 100%;
}
#page-currency .page-head,
#page-billing .page-head,
#page-currency .page-head-legal,
#page-billing .page-head-legal {
  display: none !important;
}
#page-currency .billing-page-wrap,
#page-billing .billing-page-wrap {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  width: 100%;
}
#page-currency .billing-page-scroll,
#page-billing .billing-page-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  padding: 12px 0 40px;
}
#page-currency .billing-page-layout,
#page-billing .billing-page-layout,
#page-currency .billing-page-layout.billing-page-onecol,
#page-billing .billing-page-layout.billing-page-onecol,
#page-currency .billing-page-layout.billing-page-split,
#page-billing .billing-page-layout.billing-page-split {
  display: block !important;
  width: min(70%, 920px);
  max-width: 100%;
  margin: 0 auto;
  padding: 0 16px;
  box-sizing: border-box;
  grid-template-columns: none;
}
#page-currency .billing-side-col,
#page-billing .billing-side-col {
  display: none !important;
}
#page-currency .billing-plan-grid,
#page-billing .billing-plan-grid {
  /* Prefer one row: Free + tiers; --billing-plan-cols set in JS */
  grid-template-columns: repeat(var(--billing-plan-cols, 4), minmax(0, 1fr));
  gap: 14px;
  width: 100%;
}
#page-currency .billing-plan-card,
#page-billing .billing-plan-card {
  min-width: 0;
  padding: 18px 16px 16px;
  width: 100%;
}
@media (max-width: 900px) {
  #page-currency .billing-plan-grid,
  #page-billing .billing-plan-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 720px) {
  #page-currency .billing-page-layout,
  #page-billing .billing-page-layout,
  #page-currency .billing-page-layout.billing-page-onecol,
  #page-billing .billing-page-layout.billing-page-onecol {
    width: 100%;
    padding: 0 12px;
  }
  #page-currency .billing-plan-grid,
  #page-billing .billing-plan-grid {
    grid-template-columns: 1fr;
  }
}
#page-currency .list-jump-up,
#page-billing .list-jump-up {
  top: 10px;
}
#page-currency .list-jump-down,
#page-billing .list-jump-down {
  bottom: 10px;
}

/* —— Billing / Currency page panels —— */
/* Body copy uses theme --hint; only true headings stay --text */
/* Left stack: How-to section (own card) above Active plans / payments card */
#page-currency .billing-side-col, #page-billing .billing-side-col {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  width: 100%;
}
#page-currency .billing-howto-card, #page-billing .billing-howto-card,
#page-currency .billing-payments-card, #page-billing .billing-payments-card {
  max-width: none;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 16px;
  line-height: 1.55;
  font-size: 0.92rem;
  color: var(--hint);
  box-shadow: none;
}
#page-currency .billing-howto-card, #page-billing .billing-howto-card {
  padding: 0;
  /* Match other billing cards so the collapsed summary is always visible */
  display: block;
  min-height: 3rem;
}
#page-currency .billing-howto-card.hidden, #page-billing .billing-howto-card.hidden{
  display: none !important;
}
#page-currency .billing-howto-card .billing-howto, #page-billing .billing-howto-card .billing-howto{
  margin: 0;
  border: none;
  border-radius: var(--radius);
  background: transparent;
  padding: 0;
  display: block;
}
#page-currency .billing-howto-card .billing-howto-summary, #page-billing .billing-howto-card .billing-howto-summary{
  padding: 14px 14px;
  display: flex;
}
#page-currency .billing-howto-card .billing-howto-steps, #page-billing .billing-howto-card .billing-howto-steps{
  padding: 0 14px 12px;
  margin: 0;
}
/* Right column: Usage + Plans section cards */
#page-currency #billingContent.legal-panel, #page-billing #billingContent.legal-panel,
#page-currency #billingContent, #page-billing #billingContent,
#page-currency #billingContent.billing-sections, #page-billing #billingContent.billing-sections{
  max-width: none;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  line-height: 1.55;
  font-size: 0.92rem;
  color: var(--hint);
  box-shadow: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
#page-currency .billing-section, #page-billing .billing-section {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 14px;
  box-sizing: border-box;
  min-width: 0;
}
/* —— Referral link + QR —— */
#page-currency .billing-referral-section,
#page-billing .billing-referral-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
#page-currency .billing-referral-lead,
#page-billing .billing-referral-lead {
  margin: 0;
  max-width: 36rem;
  line-height: 1.45;
}
#page-currency .billing-referral-row,
#page-billing .billing-referral-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  min-width: 0;
}
#page-currency .billing-referral-link,
#page-billing .billing-referral-link {
  flex: 1 1 12rem;
  min-width: 0;
  max-width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--card) 70%, var(--bg, #0b0b12));
  color: var(--hint, #9aa0b4);
  font-size: 0.9rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  opacity: 1;
  cursor: default;
  box-sizing: border-box;
}
#page-currency .billing-referral-link:disabled,
#page-billing .billing-referral-link:disabled {
  opacity: 1;
  -webkit-text-fill-color: var(--hint, #9aa0b4);
}
#page-currency .billing-referral-qr-wrap,
#page-billing .billing-referral-qr-wrap {
  display: flex;
  justify-content: flex-start;
  padding: 4px 0 2px;
}
#page-currency .billing-referral-qr,
#page-billing .billing-referral-qr {
  width: 180px;
  height: 180px;
  max-width: 100%;
  border-radius: 12px;
  background: #fff;
  border: 1px solid var(--border);
  box-sizing: border-box;
}
#page-currency .billing-referral-total,
#page-billing .billing-referral-total {
  margin: 4px 0 0;
  font-weight: 600;
  color: var(--text);
}
/* —— Hero + currency explainer (pricing-page style) —— */
#page-currency .billing-section-hero, #page-billing .billing-section-hero {
  padding: 20px 16px 18px;
  background:
    radial-gradient(120% 80% at 10% -10%, color-mix(in srgb, var(--accent, #8b5cf6) 18%, transparent), transparent 55%),
    var(--card);
}
#page-currency .billing-lead, #page-billing .billing-lead {
  margin: 0 0 1rem;
  font-size: 1.02rem;
  line-height: 1.5;
  color: var(--text);
  max-width: 40rem;
}
#page-currency .billing-world-h, #page-billing .billing-world-h {
  margin: 0 0 0.35rem;
  font-size: 1.08rem;
  font-weight: 650;
  color: var(--text);
}
#page-currency .billing-world-lead, #page-billing .billing-world-lead {
  margin: 0 0 1rem;
  max-width: 40rem;
  line-height: 1.5;
}
#page-currency .billing-currency-grid, #page-billing .billing-currency-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
@media (max-width: 720px) {
  #page-currency .billing-currency-grid, #page-billing .billing-currency-grid {
    grid-template-columns: 1fr;
  }
}
#page-currency .billing-currency-card, #page-billing .billing-currency-card {
  margin: 0;
  padding: 12px 12px 14px;
  border-radius: calc(var(--radius) - 2px);
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg, #0b0b12) 35%, var(--card));
  min-width: 0;
}
#page-currency .billing-currency-card h4, #page-billing .billing-currency-card h4{
  margin: 0 0 0.35rem;
  font-size: 0.95rem;
  font-weight: 650;
  color: var(--text);
}
#page-currency .billing-currency-card p, #page-billing .billing-currency-card p{
  margin: 0;
  line-height: 1.45;
}
#page-currency .billing-currency-ico, #page-billing .billing-currency-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  margin-bottom: 0.4rem;
  font-size: 1.15rem;
  line-height: 1;
}
#page-currency .billing-currency-ico .coin-ico, #page-billing .billing-currency-ico .coin-ico{
  width: 1.25rem;
  height: 1.25rem;
}
#page-currency .billing-currency-ico-tg svg, #page-billing .billing-currency-ico-tg svg{
  width: 1.2rem;
  height: 1.2rem;
  opacity: 0.95;
}
#page-currency .billing-section-lead, #page-billing .billing-section-lead {
  margin: -0.15rem 0 0.85rem;
  max-width: 36rem;
  line-height: 1.45;
}
/* One-liner under Usage: “Help us keep things free.” + Donate */
#page-currency .billing-section-donate,
#page-billing .billing-section-donate {
  padding-top: 0.15rem;
  padding-bottom: 0.35rem;
  border-top: none;
}
#page-currency .billing-donate-line,
#page-billing .billing-donate-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem 0.75rem;
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.4;
  color: var(--muted, #9aa0b4);
}
#page-currency .billing-donate-text,
#page-billing .billing-donate-text {
  flex: 1 1 auto;
  min-width: 12rem;
}
#page-currency .billing-donate-btn,
#page-billing .billing-donate-btn {
  flex: 0 0 auto;
}
.billing-donate-field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin: 0.65rem 0 0.35rem;
}
.billing-donate-input {
  width: 100%;
  max-width: 16rem;
  box-sizing: border-box;
  padding: 0.45rem 0.6rem;
  border-radius: var(--radius, 8px);
  border: 1px solid var(--border, #333);
  background: var(--bg, #0b0b12);
  color: inherit;
  font: inherit;
}
.billing-donate-packs {
  margin: 0.25rem 0 0.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}
/* —— Plan pricing cards —— */
#page-currency .billing-plan-grid, #page-billing .billing-plan-grid {
  display: grid;
  grid-template-columns: repeat(var(--billing-plan-cols, 4), minmax(0, 1fr));
  gap: 12px;
  margin: 0 0 1rem;
  align-items: stretch;
  width: 100%;
}
@media (min-width: 901px) {
  #page-currency .billing-plan-card, #page-billing .billing-plan-card {
    min-height: 24rem;
  }
}
#page-currency .billing-plan-card, #page-billing .billing-plan-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  margin: 0;
  padding: 20px 16px 16px;
  border-radius: calc(var(--radius) - 2px);
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg, #0b0b12) 28%, var(--card));
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
}
#page-currency .billing-plan-tagline, #page-billing .billing-plan-tagline {
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.35;
  min-height: 1.35em;
}
#page-currency .billing-plan-rule, #page-billing .billing-plan-rule {
  margin: 0.15rem 0 0.35rem;
  border: 0;
  border-top: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
  opacity: 0.85;
  width: 100%;
}
#page-currency .billing-plan-body, #page-billing .billing-plan-body {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.45;
  flex: 0 0 auto;
}
#page-currency .billing-stars-oneline,
#page-billing .billing-stars-oneline {
  margin: 0.35rem 0 0;
  font-size: 1.02rem;
  font-weight: 600;
  line-height: 1.45;
  color: var(--text);
  max-width: 40rem;
}
#page-currency .billing-stars-oneline .billing-stars-ico,
#page-billing .billing-stars-oneline .billing-stars-ico,
#page-currency .billing-balance-oneline .billing-stars-ico,
#page-billing .billing-balance-oneline .billing-stars-ico {
  width: 1.05em;
  height: 1.05em;
  vertical-align: -0.12em;
  display: inline-block;
}
#page-currency .billing-balance-oneline,
#page-billing .billing-balance-oneline {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
}
#page-currency .billing-section-balance .billing-balance-eq,
#page-billing .billing-section-balance .billing-balance-eq {
  margin: 0;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--text);
  word-break: break-word;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.15rem 0.25rem;
}
#page-currency .billing-section-balance .billing-balance-eq .coin-ico,
#page-billing .billing-section-balance .billing-balance-eq .coin-ico,
#page-currency .billing-section-balance .billing-balance-eq .billing-stars-ico,
#page-billing .billing-section-balance .billing-balance-eq .billing-stars-ico {
  width: 1.05em;
  height: 1.05em;
  vertical-align: -0.15em;
  display: inline-block;
}
#page-currency .billing-balance-refill,
#page-billing .billing-balance-refill {
  color: var(--hint);
  font-size: 0.92em;
  white-space: normal;
}
#page-currency .billing-plan-rule-row,
#page-billing .billing-plan-rule-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.15rem 0 0.2rem;
  min-width: 0;
}
#page-currency .billing-plan-rule-row .billing-plan-rule,
#page-billing .billing-plan-rule-row .billing-plan-rule {
  flex: 1 1 auto;
  margin: 0;
  min-width: 1.5rem;
}
#page-currency .billing-section-active .billing-topoff-buy,
#page-billing .billing-section-active .billing-topoff-buy {
  margin: 0.75rem 0 0.5rem;
}
#page-currency .billing-plan-card-popular, #page-billing .billing-plan-card-popular {
  border-color: color-mix(in srgb, var(--accent, #8b5cf6) 55%, var(--border));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent, #8b5cf6) 35%, transparent);
  background:
    radial-gradient(90% 70% at 50% 0%, color-mix(in srgb, var(--accent, #8b5cf6) 16%, transparent), transparent 70%),
    color-mix(in srgb, var(--bg, #0b0b12) 20%, var(--card));
}
#page-currency .billing-plan-badge, #page-billing .billing-plan-badge {
  position: static;
  flex: 0 0 auto;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--text);
  background: color-mix(in srgb, var(--accent, #8b5cf6) 28%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent, #8b5cf6) 40%, var(--border));
}
#page-currency .billing-plan-name, #page-billing .billing-plan-name {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text);
  padding-right: 0;
}
#page-currency .billing-plan-daily, #page-billing .billing-plan-daily {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem;
}
#page-currency .billing-plan-price, #page-billing .billing-plan-price {
  margin: 0 0 0.25rem;
  font-size: 0.88rem;
  color: var(--text);
}
#page-currency .billing-plan-earn,
#page-billing .billing-plan-earn {
  margin: 0 0 0.35rem;
  font-size: 0.8rem;
  color: color-mix(in srgb, var(--btn, #6c5ce7) 75%, var(--text));
  font-weight: 600;
}
#page-currency .billing-earn-section,
#page-billing .billing-earn-section {
  margin-top: 0.5rem;
}
#page-currency .billing-earn-lead,
#page-billing .billing-earn-lead {
  margin: 0 0 0.75rem;
  line-height: 1.45;
}
#page-currency .billing-earn-table,
#page-billing .billing-earn-table {
  font-size: 0.88rem;
}
#page-currency .billing-earn-stars-cell,
#page-billing .billing-earn-stars-cell {
  white-space: nowrap;
  font-weight: 600;
}
#page-currency .billing-earn-coming-soon,
#page-billing .billing-earn-coming-soon {
  margin-top: 0.9rem;
  padding: 0.85rem 1rem;
  border-radius: 12px;
  border: 1px dashed color-mix(in srgb, var(--accent, #6c5ce7) 40%, var(--border));
  background: color-mix(in srgb, var(--accent, #6c5ce7) 8%, var(--card, #121218));
}
#page-currency .billing-earn-coming-soon-head,
#page-billing .billing-earn-coming-soon-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.45rem 0.75rem;
  margin-bottom: 0.45rem;
}
#page-currency .billing-earn-coming-soon-badge,
#page-billing .billing-earn-coming-soon-badge {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent, #6c5ce7);
  border: 1px solid color-mix(in srgb, var(--accent, #6c5ce7) 45%, transparent);
  border-radius: 999px;
  padding: 0.18rem 0.55rem;
  line-height: 1.2;
}
#page-currency .billing-earn-coming-soon-lead,
#page-billing .billing-earn-coming-soon-lead {
  margin: 0;
  flex: 1 1 12rem;
  line-height: 1.4;
}
#page-currency .billing-earn-coming-soon-list,
#page-billing .billing-earn-coming-soon-list {
  margin: 0;
  padding: 0 0 0 1.15rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.45;
}
#page-currency .billing-earn-coming-soon-list li,
#page-billing .billing-earn-coming-soon-list li {
  margin: 0.2rem 0;
}
#page-currency .billing-plan-perks, #page-billing .billing-plan-perks {
  margin: 0.25rem 0 0.5rem;
  padding: 0 0 0 1.05rem;
  color: var(--hint);
  font-size: 0.82rem;
  line-height: 1.4;
  flex: 1;
}
#page-currency .billing-plan-perks li, #page-billing .billing-plan-perks li{
  margin: 0.2rem 0;
}
#page-currency .billing-plan-cta-rule, #page-billing .billing-plan-cta-rule {
  margin: 0.55rem 0 0.4rem;
  border: 0;
  border-top: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
  width: 100%;
  opacity: 0.9;
}
#page-currency .billing-plan-approx, #page-billing .billing-plan-approx {
  margin: 0 0 0.4rem;
  text-align: center;
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--hint);
  min-height: 1.25em;
}
#page-currency .billing-plan-approx-100,
#page-billing .billing-plan-approx-100 {
  display: inline-block;
  margin-top: 0.15rem;
  font-weight: 500;
  font-size: 0.78rem;
}
#page-currency .billing-plan-approx-100 .coin-ico,
#page-billing .billing-plan-approx-100 .coin-ico {
  width: 0.95em;
  height: 0.95em;
  vertical-align: -0.12em;
}
#page-currency .billing-plan-cta, #page-billing .billing-plan-cta {
  margin-top: 0;
  width: 100%;
  box-sizing: border-box;
  text-align: center;
  white-space: normal;
  line-height: 1.25;
  padding: 0.55rem 0.55rem;
}
#page-currency .billing-plan-cta-static, #page-billing .billing-plan-cta-static {
  margin-top: auto;
  width: 100%;
  box-sizing: border-box;
  text-align: center;
  white-space: normal;
  line-height: 1.25;
  padding: 0.55rem 0.55rem;
}
/* Pin approx + button stack to card bottom */
#page-currency .billing-plan-card .billing-plan-cta-rule,
#page-billing .billing-plan-card .billing-plan-cta-rule {
  margin-top: auto;
}
#page-currency .billing-plan-cta.billing-subscribe-btn,
#page-billing .billing-plan-cta.billing-subscribe-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.15rem;
  min-height: 2.75rem;
}
#page-currency .billing-plan-cta .billing-plan-cta-prefix,
#page-billing .billing-plan-cta .billing-plan-cta-prefix {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  opacity: 0.95;
  line-height: 1.2;
}
#page-currency .billing-plan-cta .billing-plan-cta-date,
#page-billing .billing-plan-cta .billing-plan-cta-date {
  display: block;
  white-space: nowrap;
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  line-height: 1.2;
  color: #fff;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35);
}
#page-currency .billing-plan-cta-static, #page-billing .billing-plan-cta-static {
  margin: auto 0 0;
  padding: 0.55rem 0.5rem;
  font-size: 0.85rem;
  font-weight: 600;
  border-radius: 8px;
  border: 1px dashed var(--border);
}
#page-currency .billing-plan-table-wrap, #page-billing .billing-plan-table-wrap {
  margin: 0.25rem 0 1rem;
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) - 4px);
  overflow: hidden;
}
#page-currency .billing-plan-table-wrap > summary, #page-billing .billing-plan-table-wrap > summary{
  cursor: pointer;
  list-style: none;
  padding: 10px 12px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text);
  background: color-mix(in srgb, var(--bg, #0b0b12) 40%, transparent);
  user-select: none;
}
#page-currency .billing-plan-table-wrap > summary::-webkit-details-marker, #page-billing .billing-plan-table-wrap > summary::-webkit-details-marker{
  display: none;
}
#page-currency .billing-plan-table-wrap[open] > summary, #page-billing .billing-plan-table-wrap[open] > summary{
  border-bottom: 1px solid var(--border);
}
#page-currency .billing-plan-table-wrap .billing-table, #page-billing .billing-plan-table-wrap .billing-table{
  margin: 0;
}
#page-currency .billing-topoff-lead, #page-billing .billing-topoff-lead {
  margin: 0 0 0.55rem;
  max-width: 36rem;
}
/* Headings only — bright theme text */
#page-currency .page-head h2, #page-billing .page-head h2,
#page-currency #billingTitle, #page-billing #billingTitle,
#page-currency #billingContent h3, #page-billing #billingContent h3,
#page-currency .billing-payments-card h3, #page-billing .billing-payments-card h3,
#page-currency .billing-history-h, #page-billing .billing-history-h {
  margin: 1.4em 0 0.5em;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text);
}
#page-currency .page-head h2, #page-billing .page-head h2,
#page-currency #billingTitle, #page-billing #billingTitle {
  margin: 0 0 4px;
  font-size: 1.45rem;
}
#page-currency #billingContent h3:first-child, #page-billing #billingContent h3:first-child,
#page-currency .billing-section > h3:first-child, #page-billing .billing-section > h3:first-child,
#page-currency .billing-payments-card h3:first-child, #page-billing .billing-payments-card h3:first-child{
  margin-top: 0;
}
/* "Your payments" sits under Plan/Daily/Balance when present */
#page-currency .billing-payments-card .billing-history-h, #page-billing .billing-payments-card .billing-history-h{
  margin-top: 1.1em;
}
#page-currency .billing-payments-card > p:first-child, #page-billing .billing-payments-card > p:first-child{
  margin-top: 0;
}
/* Force body / labels / table / bold tier labels to theme hint */
#page-currency #billingContent p, #page-billing #billingContent p,
#page-currency #billingContent li, #page-billing #billingContent li,
#page-currency #billingContent ul, #page-billing #billingContent ul,
#page-currency #billingContent b, #page-billing #billingContent b,
#page-currency #billingContent strong, #page-billing #billingContent strong,
#page-currency #billingContent span, #page-billing #billingContent span,
#page-currency #billingContent td, #page-billing #billingContent td,
#page-currency #billingContent th, #page-billing #billingContent th,
#page-currency .billing-payments-card p, #page-billing .billing-payments-card p,
#page-currency .billing-payments-card li, #page-billing .billing-payments-card li,
#page-currency .billing-payments-card td, #page-billing .billing-payments-card td,
#page-currency .billing-payments-card th, #page-billing .billing-payments-card th,
#page-currency .billing-payments-card span, #page-billing .billing-payments-card span,
#page-currency .billing-tier-info, #page-billing .billing-tier-info,
#page-currency .billing-tier-info b, #page-billing .billing-tier-info b,
#page-currency .billing-premium-lead, #page-billing .billing-premium-lead,
#page-currency .billing-topoff-line, #page-billing .billing-topoff-line,
#page-currency .billing-note, #page-billing .billing-note,
#page-currency .billing-step-title, #page-billing .billing-step-title,
#page-currency .billing-step-desc, #page-billing .billing-step-desc,
#page-currency .billing-bot-card-name, #page-billing .billing-bot-card-name,
#page-currency .billing-bot-card-hint, #page-billing .billing-bot-card-hint,
#page-currency .billing-howto-summary, #page-billing .billing-howto-summary,
#page-currency .billing-howto-summary-label, #page-billing .billing-howto-summary-label,
#page-currency .billing-pay-stars, #page-billing .billing-pay-stars,
#page-currency .muted, #page-billing .muted,
#page-currency .tip, #page-billing .tip {
  color: var(--hint);
}
#page-currency .billing-payments-card, #page-billing .billing-payments-card {
  position: sticky;
  top: 12px;
  max-height: min(72vh, 580px);
  overflow: auto;
}
.billing-note {
  margin: 0 0 0.9em;
  font-size: 0.85rem;
}
/* How-to */
.billing-howto {
  margin: 1.15em 0 1.25em;
  border-radius: var(--radius);
  border: 1px solid color-mix(in srgb, var(--hint) 22%, transparent);
  background: color-mix(in srgb, var(--bg2) 55%, var(--card));
  overflow: hidden;
  color: var(--hint);
}
.billing-howto-summary {
  cursor: pointer;
  list-style: none;
  padding: 12px 14px;
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--hint);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  user-select: none;
}
.billing-howto-summary::-webkit-details-marker {
  display: none;
}
.billing-howto-summary-label {
  flex: 1;
  min-width: 0;
}
.billing-howto-chevron {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  color: var(--hint);
  transition: transform 0.18s ease;
}
.billing-howto[open] > .billing-howto-summary .billing-howto-chevron {
  transform: rotate(180deg);
}
.billing-howto-steps {
  list-style: none;
  margin: 0;
  padding: 0 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.billing-howto-step {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.billing-step-num {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 650;
  color: var(--btn-text);
  background: color-mix(in srgb, var(--btn) 78%, var(--bg));
  margin-top: 1px;
}
.billing-step-body {
  flex: 1;
  min-width: 0;
  color: var(--hint);
}
.billing-step-title {
  margin: 0 0 4px;
  font-weight: 600;
  font-size: 0.9rem;
  line-height: 1.35;
  color: var(--hint);
}
.billing-step-title-stars {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.billing-step-desc {
  margin: 0;
  line-height: 1.45;
  font-size: 0.85rem;
  color: var(--hint);
}
.billing-link-telegram {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.billing-link-telegram-focus {
  outline: 2px solid color-mix(in srgb, var(--accent, #8b5cf6) 65%, transparent);
  outline-offset: 4px;
  border-radius: 10px;
  transition: outline-color 0.2s ease;
}
.billing-link-telegram .billing-link-telegram-btn,
.billing-link-telegram .landing-signin-telegram {
  max-width: 100%;
}
.billing-link-telegram-status {
  margin: 8px 0 0;
}
.billing-howto-step-link .billing-step-num {
  background: color-mix(in srgb, var(--btn, #8b5cf6) 85%, #000);
}
.billing-step-bot {
  margin-top: 8px;
}
.billing-bot-card {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px 10px 10px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--bg2);
  text-decoration: none;
  color: var(--hint);
  max-width: 100%;
  transition: background 0.15s ease, border-color 0.15s ease;
}
a.billing-bot-card:hover {
  background: var(--card-hover);
  border-color: color-mix(in srgb, var(--btn) 35%, var(--border));
}
.billing-bot-card-static {
  cursor: default;
}
.billing-tg-logo {
  flex-shrink: 0;
  display: block;
  border-radius: 50%;
  opacity: 0.95;
}
.billing-bot-card-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.billing-bot-card-name {
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--hint);
}
.billing-bot-card-hint {
  font-size: 0.8rem;
  color: var(--hint);
  opacity: 0.9;
}
.billing-stars-ico {
  color: color-mix(in srgb, #d4a84b 55%, var(--hint));
  flex-shrink: 0;
  opacity: 0.85;
}
/* Active stacked premium plans */
.billing-active-plans {
  margin: 0 0 12px;
}
.billing-active-plan-list {
  margin: 0.35rem 0 0.65rem;
  padding-left: 1.15rem;
  font-size: 0.88rem;
  line-height: 1.45;
}
.billing-active-plan-list li {
  margin: 0.2rem 0;
}
.billing-daily-breakdown {
  margin: 0.25rem 0 0.5rem;
}
/* Payment history table */
.billing-history-h {
  margin: 0 0 0.6em;
}
.billing-pay-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0.35em 0 0.4em;
  border: 1px solid var(--border);
  border-radius: 12px;
}
.billing-pay-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
  min-width: 240px;
  color: var(--hint);
}
.billing-pay-table th,
.billing-pay-table td {
  padding: 8px 10px;
  text-align: left;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
  vertical-align: top;
  color: var(--hint);
}
.billing-pay-table th {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--hint);
  opacity: 0.9;
  background: color-mix(in srgb, var(--bg2) 70%, transparent);
}
.billing-pay-table tbody tr:last-child td {
  border-bottom: none;
}
.billing-pay-table tbody tr:hover td {
  background: color-mix(in srgb, var(--btn) 6%, transparent);
}
.billing-pay-stars {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--hint);
}
.billing-history-note {
  margin: 0.4em 0 0;
  font-size: 0.8rem;
  color: var(--hint);
}
.billing-history-empty {
  margin: 0.2em 0 0;
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--hint);
}
.billing-premium-lead {
  margin: 0 0 0.65em;
  color: var(--hint);
}
/* Subtle usage / tier plan tables */
.billing-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0.2em 0 1em;
  font-size: 0.92rem;
  color: var(--hint);
  background: transparent;
}
.billing-table th,
.billing-table td {
  border: 1px solid color-mix(in srgb, var(--text) 7%, transparent);
  padding: 0.48em 0.62em;
  vertical-align: middle;
  text-align: left;
  background: transparent;
}
.billing-table th {
  font-weight: 600;
  font-size: 0.84rem;
  color: color-mix(in srgb, var(--hint) 92%, transparent);
  white-space: nowrap;
}
.billing-table .billing-th-action,
.billing-table .billing-th-subscribe {
  border-bottom-color: color-mix(in srgb, var(--text) 7%, transparent);
}
.billing-table .billing-th-coin,
.billing-table .billing-th-daily,
.billing-table .billing-th-stars,
.billing-table .billing-th-limit,
.billing-table .billing-td-num,
.billing-table .billing-td-limit {
  text-align: center;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.billing-table .billing-th-limit,
.billing-table .billing-td-limit {
  width: 4.25rem;
}
.billing-action-with-info {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: wrap;
}
.billing-cost-with-info {
  display: inline-flex;
  align-items: center;
  gap: 0.28em;
  white-space: nowrap;
}
.billing-info-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0.1rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--hint, #9a96b0);
  cursor: pointer;
  line-height: 0;
  vertical-align: middle;
}
.billing-info-btn:hover,
.billing-info-btn:focus-visible {
  color: var(--accent, #6c5ce7);
  outline: none;
}
.billing-info-ico {
  display: block;
}
.billing-create-tiers-lead {
  margin: 0 0 0.75rem;
}
.billing-create-tiers-table {
  width: 100%;
  margin: 0;
}
.billing-table .billing-th-coin {
  width: 3.25rem;
}
.billing-table .billing-th-coin .coin-ico,
.billing-table .billing-th-daily .coin-ico,
.billing-table .billing-table-stars {
  vertical-align: -0.15em;
  opacity: 0.95;
}
.billing-table .billing-td-action {
  color: var(--hint);
}
.billing-table .billing-td-tier b {
  font-weight: 600;
  color: var(--hint);
}
.billing-table .billing-td-subscribe {
  text-align: right;
  white-space: nowrap;
  width: 1%;
}
.billing-table .billing-subscribe-btn {
  flex-shrink: 0;
  white-space: nowrap;
  margin: 0;
  min-width: 6.25rem;
  text-align: center;
}
/* Soft anti-save: discourage drag of photos (context menu blocked in JS). */
img.is-ready,
img.bubble-photo,
img.profile-photo,
img.comp-card-img,
img.chat-row-photo,
video {
  -webkit-user-drag: none;
  user-select: none;
}
.billing-usage-table {
  max-width: 28rem;
}
.billing-active-plans-table {
  margin: 0.2em 0 0.75em;
}
.billing-active-plans-table .billing-td-expires {
  font-size: 0.88em;
  white-space: nowrap;
}
.billing-active-plans-table .billing-active-empty {
  text-align: left;
  font-weight: 400;
}
.billing-free-h {
  margin: 0.35em 0 0.35em;
}
.billing-free-body {
  margin: 0 0 0.85em;
  color: var(--hint);
}
.billing-topoff-h {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  flex-shrink: 0;
}
.billing-topoff-line {
  margin: 0 0 0.75em;
  color: var(--hint);
}
.billing-topoff-buy {
  margin: 1.1em 0 0.6em;
}
/* Link Telegram popup (opens from Buy In Telegram when unlinked). */
.billing-link-tg-overlay {
  position: fixed;
  inset: 0;
  z-index: 12000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right))
    max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  background: color-mix(in srgb, #0b0b12 62%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.billing-link-tg-overlay.hidden {
  display: none;
}
.billing-link-tg-card {
  position: relative;
  width: min(420px, 100%);
  max-height: min(88vh, 560px);
  overflow: auto;
  padding: 1.25rem 1.2rem 1.15rem;
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--accent, #6c5ce7) 40%, var(--border));
  background: var(--card, #16161f);
  color: var(--text);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.45);
}
.billing-link-tg-close {
  position: absolute;
  top: 0.55rem;
  right: 0.55rem;
  width: 36px;
  height: 36px;
  font-size: 1.35rem;
  line-height: 1;
}
.billing-link-tg-title {
  margin: 0 2rem 0.4rem 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text);
}
.billing-link-tg-desc {
  margin: 0 0 0.85rem;
  line-height: 1.45;
}
.billing-link-telegram-host {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  justify-content: center;
  min-height: 2.5rem;
}
.billing-link-tg-card .status {
  margin: 0.75rem 0 0;
  text-align: center;
}
body.billing-link-tg-open {
  overflow: hidden;
}
.billing-topoff-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
/* Brand buy buttons: PayPal (gold) + Telegram (sky) with icons */
.btn.billing-btn-paypal,
.btn.billing-btn-telegram {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  font-weight: 650;
  border: none;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.12);
}
.btn.billing-btn-paypal {
  background: linear-gradient(180deg, #ffd56a 0%, #ffc439 55%, #f0b90b 100%);
  color: #003087;
}
.btn.billing-btn-paypal:hover {
  filter: brightness(1.04);
  color: #001c64;
}
.btn.billing-btn-paypal:active {
  filter: brightness(0.97);
}
.btn.billing-btn-telegram {
  background: linear-gradient(180deg, #54c0f8 0%, #2aabee 55%, #229ed9 100%);
  color: #fff;
}
.btn.billing-btn-telegram:hover {
  filter: brightness(1.05);
  color: #fff;
}
.btn.billing-btn-telegram:active {
  filter: brightness(0.97);
}
.btn.billing-btn-paypal .billing-pay-ico,
.btn.billing-btn-telegram .billing-pay-ico {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  display: block;
}
.btn.billing-btn-paypal .billing-pay-label,
.btn.billing-btn-telegram .billing-pay-label {
  line-height: 1.15;
}
.billing-paypal-hint {
  margin: 0.4rem 0 0;
}
.billing-topoff-input {
  width: 8.5rem;
  max-width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--hint);
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
}
.billing-topoff-input::placeholder {
  color: var(--hint);
  opacity: 0.75;
}
.billing-topoff-input:focus {
  outline: 2px solid color-mix(in srgb, var(--btn) 45%, transparent);
  outline-offset: 1px;
  color: var(--text);
}
.billing-topoff-star {
  flex: 0 0 auto;
  font-size: 1.15rem;
  line-height: 1;
  opacity: 0.95;
}
.billing-topoff-packs {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
#page-currency .billing-topoff-packs .chip, #page-billing .billing-topoff-packs .chip{
  color: var(--hint);
}
.billing-cashout-block {
  margin: 0.75rem 0 1.25rem;
  padding: 0;
}
.billing-topoff-bal-line {
  margin: 0 0 0.35em;
  font-size: 1.05rem;
}
.billing-cashout-h {
  margin: 0 0 0.35em;
  font-size: 1.05rem;
}
.billing-cashout-lead {
  margin: 0 0 0.65em;
}
.billing-stars-bal {
  margin: 0 0 0.65em;
  font-size: 1.15rem;
}
.billing-cashout-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.billing-cashout-label {
  font-weight: 600;
  white-space: nowrap;
}
.billing-cashout-area {
  margin: 0.15rem 0 0;
}
.billing-cashout-rule {
  border: 0;
  border-top: 1px solid var(--border);
  margin: 0.65rem 0;
  opacity: 0.9;
}
.billing-cashout-area .billing-cashout-rule:first-child {
  margin-top: 0.5rem;
}
.billing-cashout-area .billing-cashout-rule:last-child {
  margin-bottom: 0.5rem;
}
.billing-cashout-note {
  margin: 0.5rem 0 0;
}
.admin-cashout-total {
  margin: 0 0 0.75rem;
}
.admin-cashout-sum {
  margin: 0 0 0.35em;
  color: var(--text);
}
.admin-cashout-list-h {
  margin: 0.5rem 0 0.5rem;
  font-size: 0.95rem;
}
.admin-cashout-table {
  font-size: 0.88rem;
}
@media (max-width: 900px) {
  #page-currency .billing-page-layout.billing-page-split, #page-billing .billing-page-layout.billing-page-split{
    grid-template-columns: 1fr;
  }
  /* Must match #page-currency .billing-payments-card specificity so sticky does not win on mobile */
  #page-currency .billing-payments-card, #page-billing .billing-payments-card specificity so sticky does not win on mobile */
  #page-currency .billing-payments-card, #page-billing .billing-payments-card {
    position: static;
    top: auto;
    max-height: none;
    overflow: visible;
    width: 100%;
  }
}
@media (max-width: 560px) {
  .billing-table {
    font-size: 0.84rem;
  }
  .billing-table th,
  .billing-table td {
    padding: 0.4em 0.4em;
  }
  .billing-table .billing-subscribe-btn {
    min-width: 0;
    width: 100%;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
  .billing-tier-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}
body.guest-legal-mode .sidebar {
  display: none !important;
}
body.guest-legal-mode .shell-main {
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
body.guest-legal-mode .main {
  max-width: none;
  margin: 0;
  padding: 28px 16px 32px;
  overflow: auto;
  flex: 1;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  background: color-mix(in srgb, #000 42%, transparent);
  cursor: pointer;
}
/* Legal page itself is the card; click outside (main backdrop) closes */
body.guest-legal-mode .main > .page:not(.hidden) {
  cursor: default;
  max-width: 980px;
  width: 100%;
  margin: 0 auto;
  padding: 20px 18px 22px;
  border-radius: 16px;
  background: var(--card, var(--sec, #1a1a22));
  border: 1px solid color-mix(in srgb, var(--hint, #9a9aab) 22%, transparent);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.35);
}
/* Guest legal: same in-flow page-head as Profile (no sticky overlay on the card). */
body.guest-legal-mode .main > .page:not(.hidden) > .page-head,
body.guest-legal-mode .main > .page:not(.hidden) > .page-head-legal,
body.guest-legal-mode .main > .page:not(.hidden) > .legal-head-center {
  position: static;
  top: auto;
  margin: 0 0 16px;
  padding: 0;
  background: transparent;
  border: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  text-align: left;
}
body.guest-legal-mode .main > .page:not(.hidden) > .page-head h2,
body.guest-legal-mode .main > .page:not(.hidden) > .page-head-legal h2 {
  margin: 0 0 4px;
  font-size: 1.35rem;
}
body.guest-legal-mode .main > .page:not(.hidden) .panel,
body.guest-legal-mode .main > .page:not(.hidden) .terms-panel,
body.guest-legal-mode .main > .page:not(.hidden) .legal-panel {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  max-width: none;
}
body.guest-legal-mode .legal-toc {
  background: color-mix(in srgb, var(--bg, #111) 35%, transparent);
  top: 0.5rem;
}
body.guest-legal-mode .site-footer {
  display: flex;
}
body.guest-legal-mode .onboardBanner,
body.guest-legal-mode #onboardBanner {
  display: none !important;
}
/* Footer: swap Terms/Privacy/Billing for Sign-in close (guest legal only) */
body.guest-legal-mode .footer-links {
  display: none !important;
}
/* Never show Sign-in close while logged into the app shell */
.guest-legal-footer-back,
body:not(.guest-legal-mode) .guest-legal-footer-back {
  display: none !important;
}
body.guest-legal-mode .guest-legal-footer-back {
  display: inline-flex !important;
  align-items: center;
}

/* Guest browse: public Home + Profiles without a session */
body.guest-browse #btnLogout,
body.guest-browse #navAdmin,
body.guest-browse #navCoinBadge,
body.guest-browse #userChip,
body.guest-browse .sidebar-mgmt [data-page="settings"],
body.guest-browse .sidebar-mgmt [data-page="support"] {
  display: none !important;
}
body.guest-browse #btnNavSignIn {
  display: flex !important;
}
body.guest-browse #btnNavSignIn.hidden {
  display: flex !important;
}

/* —— First-visit gate on landing (18+ + interest) —— */
body.guest-gate-open #view-login .landing,
body.guest-gate-open #view-login .landing-seo-crawl {
  filter: blur(10px) saturate(0.85);
  transform: scale(1.01);
  pointer-events: none;
  user-select: none;
}
body.guest-gate-open {
  overflow: hidden;
}
.guest-gate-overlay {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(16px, var(--safe-top)) max(16px, var(--safe-right))
    max(16px, var(--safe-bottom)) max(16px, var(--safe-left));
}
.guest-gate-overlay.hidden {
  display: none !important;
}
.guest-gate-backdrop {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--bg) 55%, transparent);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.guest-gate-card {
  position: relative;
  z-index: 1;
  width: min(420px, 100%);
  margin: auto;
  padding: 26px 22px 20px;
  border-radius: 20px;
  background: var(--card);
  border: 1px solid color-mix(in srgb, var(--border) 90%, var(--btn));
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--btn) 12%, transparent),
    0 24px 64px rgba(0, 0, 0, 0.55);
  animation: setupCardIn 0.35s ease-out;
}
.guest-gate-kicker {
  margin: 0 0 8px;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  font-weight: 700;
  color: color-mix(in srgb, var(--muted) 80%, var(--btn));
}
.guest-gate-kicker--value {
  color: color-mix(in srgb, var(--btn) 75%, #ffd36a);
  letter-spacing: 0.1em;
}
.guest-gate-card h2 {
  margin: 0 0 8px;
  font-size: 1.35rem;
  letter-spacing: -0.02em;
}
.guest-gate-free-line {
  margin: 0 0 4px;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.3;
  color: color-mix(in srgb, var(--text) 92%, var(--btn));
  text-align: center;
}
.guest-gate-how-wrap {
  margin: 0 0 10px;
  text-align: center;
}
.guest-gate-how {
  font-size: 0.85rem;
  font-weight: 600;
}
.guest-gate-welcome-stars {
  margin: 0 0 10px;
  text-align: center;
  font-size: 0.95rem;
  font-weight: 700;
  color: color-mix(in srgb, #ffd36a 55%, var(--text));
}
.guest-gate-welcome-stars.hidden {
  display: none !important;
}
.guest-gate-lead {
  margin: 0 0 12px;
  line-height: 1.45;
  font-size: 0.92rem;
  color: color-mix(in srgb, var(--text) 88%, var(--muted));
}
.guest-gate-benefits,
.setup-consent-benefits {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.guest-gate-benefits li,
.setup-consent-benefits li {
  margin: 0;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 650;
  line-height: 1.2;
  background: color-mix(in srgb, var(--btn) 14%, var(--card));
  border: 1px solid color-mix(in srgb, var(--btn) 28%, var(--border));
  color: var(--text);
}
.guest-gate-card #guestGateTitle {
  margin: 0 0 6px;
  font-size: 1.55rem;
  letter-spacing: -0.03em;
  font-weight: 750;
}
.guest-gate-section-label {
  margin: 0 0 10px;
  font-size: 0.95rem;
  font-weight: 650;
  color: var(--text);
}
.guest-gate-interest-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
.guest-gate-choice {
  min-height: 48px;
  font-weight: 700;
  width: 100%;
  white-space: normal;
  line-height: 1.25;
  padding-left: 12px;
  padding-right: 12px;
}
.guest-gate-consent-note {
  margin: 14px 0 0;
  line-height: 1.4;
  text-align: center;
}
.guest-gate-consent-note a.guest-gate-terms-link {
  color: color-mix(in srgb, var(--btn) 75%, var(--text));
  font-weight: 650;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.guest-gate-consent-note a.guest-gate-terms-link:hover {
  color: var(--text);
}
.guest-gate-under18 {
  display: block;
  width: 100%;
  margin-top: 12px;
  padding: 8px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 0.85rem;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
  opacity: 0.9;
}
.guest-gate-under18:hover {
  color: var(--text);
  opacity: 1;
}
.guest-gate-blocked {
  text-align: center;
  padding: 8px 0 4px;
  line-height: 1.45;
}
.guest-gate-blocked.hidden,
#guestGateMain.hidden {
  display: none !important;
}

/* Admin users table: joined timestamp */
.admin-table .admin-joined {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* Profiles: “{n} more” + Sign in card (guest, after 10 DPs) */
/* First-party promo ads — image creatives are full-bleed (CTA is in the art). */
.comp-card.is-promo-ad,
.home-card.is-promo-ad {
  cursor: pointer;
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border));
  background: color-mix(in srgb, var(--accent) 8%, #111);
  overflow: hidden;
  padding: 0;
}
/* No meta/footer strip under promo art (normal profile cards have .comp-meta). */
.comp-card.is-promo-ad > .comp-meta,
.comp-card.is-promo-ad > .comp-actions {
  display: none !important;
}
.comp-card.is-promo-ad .comp-card-media,
.home-card.is-promo-ad .home-card-media {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  position: relative;
  min-height: 140px;
  padding: 14px;
  overflow: hidden;
  background: color-mix(in srgb, var(--accent) 8%, #111);
}
/*
 * Profile list: promo fills the full card height of neighboring profiles
 * (media + name/blurb + Chat) — not just the image aspect-ratio box.
 */
.comp-card.is-promo-ad {
  display: flex;
  flex-direction: column;
  height: 100%;
  align-self: stretch;
  /* Full profile card paint reservation (media + meta + actions). */
  contain-intrinsic-size: auto 380px;
}
.comp-card.is-promo-ad .comp-card-media {
  flex: 1 1 auto;
  width: 100%;
  /* Floor = profile photo; grow when the grid row is taller (meta+actions). */
  aspect-ratio: 18 / 25;
  min-height: 100%;
  height: auto;
  align-items: stretch;
}
/* Full-bleed creative — cover entire stretched card. */
.comp-card.is-promo-ad.has-promo-art {
  display: flex;
  flex-direction: column;
}
.comp-card.is-promo-ad.has-promo-art .comp-card-media {
  padding: 0;
  flex: 1 1 auto;
  width: 100%;
  aspect-ratio: 18 / 25;
  min-height: 100%;
  height: auto;
  align-items: stretch;
}
/* Home feed promos: same gen-frame footprint as organic landscape cards (3:2).
   JS applyHomeCardGenFrame sets width/height — do not force width:100% or 16:10. */
.home-card.is-promo-ad {
  display: flex;
  flex-direction: column;
  /* width set by applyHomeCardGenFrame (matches neighboring cards) */
  max-width: 100%;
  margin: 0 auto 14px;
  border-radius: 14px;
  padding: 0;
  overflow: hidden;
}
.home-card.is-promo-ad .home-card-media {
  position: relative;
  width: 100%;
  /* Prefer JS height; fall back to landscape ratio like organic feed */
  aspect-ratio: 3 / 2;
  min-height: 0;
  max-height: none;
  padding: 0;
  overflow: hidden;
  align-items: stretch;
  contain: layout paint;
  background: #0a0a0e;
}
.home-card.is-promo-ad.has-promo-art .home-card-media {
  padding: 0;
  min-height: 0;
  max-height: none;
  align-items: stretch;
  background: #0a0a0e;
}
/* Feed promos: always fit full creative in the gen frame (never height-crop) */
.home-card.is-promo-ad .promo-ad-art,
.home-card.is-promo-ad .promo-ad-video,
.home-card.is-promo-ad video.promo-ad-art {
  object-fit: contain;
  object-position: center center;
  background: #0a0a0e;
}
/* Ad creative (still or video) — absolute fill of frame; fit full asset inside (no crop) */
.promo-ad-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center center;
  z-index: 0;
  pointer-events: none;
  display: block;
  margin: 0;
  border: 0;
  padding: 0;
  box-sizing: border-box;
}
/* All ad videos: autoplay muted loop — never show player chrome.
   object-fit:contain so landscape/portrait never height-fills and crops sides. */
.promo-ad-video,
video.promo-ad-art,
video.promo-ad-video,
.thread-promo-fs-video,
.profile-video.promo-ad-video,
.lightbox-video.promo-ad-video,
.group-theme-gallery-video.promo-ad-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center center;
  pointer-events: none;
  border: 0;
  outline: none;
  background: #0a0a0c;
  box-sizing: border-box;
}
.promo-ad-video::-webkit-media-controls,
.promo-ad-video::-webkit-media-controls-enclosure,
.thread-promo-fs-video::-webkit-media-controls,
.thread-promo-fs-video::-webkit-media-controls-enclosure {
  display: none !important;
  -webkit-appearance: none;
}
/* Tiny sponsored chip only (disclosure); no title/body/button over the art. */
.promo-ad-sponsored-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 6;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
  background: color-mix(in srgb, #0a0a0c 62%, transparent);
  border: 1px solid color-mix(in srgb, #fff 28%, transparent);
  border-radius: 999px;
  padding: 0.22rem 0.55rem;
  line-height: 1.2;
  pointer-events: none;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
}
.home-card.is-promo-ad .promo-ad-sponsored-badge {
  top: 10px;
  left: 10px;
}
.promo-ad-inner {
  text-align: center;
  width: 100%;
  position: relative;
  z-index: 1;
}
.promo-ad-kicker {
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 6px;
  opacity: 0.9;
}
.promo-ad-title {
  font-size: 0.95rem;
  font-weight: 650;
  margin: 0 0 6px;
  color: var(--text);
  line-height: 1.25;
}
.promo-ad-body {
  font-size: 0.78rem;
  color: var(--hint);
  margin: 0 0 10px;
  line-height: 1.35;
}
.promo-ad-inner .btn {
  min-width: 7rem;
}
.bubble.promo-ad-thread {
  align-self: stretch;
  max-width: min(96%, 480px);
  width: 100%;
  margin: 10px auto;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--border));
  background: color-mix(in srgb, var(--accent) 10%, var(--card));
  text-align: center;
  overflow: hidden;
  cursor: pointer;
}
/* Guest in-stream: full-bleed landscape creative */
.bubble.promo-ad-thread.has-promo-art {
  position: relative;
  padding: 0;
  min-height: 140px;
  aspect-ratio: 16 / 9;
  max-height: min(42vh, 280px);
  border-style: solid;
}
.bubble.promo-ad-thread.has-promo-art .promo-ad-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
  display: block;
  pointer-events: none;
}
.bubble.promo-ad-thread .promo-ad-title {
  font-size: 0.9rem;
}
.bubble.promo-ad-thread .promo-ad-body {
  margin-bottom: 8px;
}

/* Signed-in chat/game: fullscreen interstitial above all messages */
.thread-promo-fs {
  position: absolute;
  inset: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  background: rgba(6, 6, 10, 0.94);
  animation: threadPromoFsIn 0.22s ease-out;
}
@keyframes threadPromoFsIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.thread-promo-fs-close {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, #fff 22%, transparent);
  background: color-mix(in srgb, #0a0a0c 55%, transparent);
  color: #fff;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.thread-promo-fs-close:hover {
  background: color-mix(in srgb, #0a0a0c 75%, transparent);
}
.thread-promo-fs-stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  outline: none;
}
.thread-promo-fs-art {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center center;
  display: block;
  pointer-events: none;
  background: #0a0a0c;
}
.thread-promo-fs-video,
video.thread-promo-fs-video {
  object-fit: contain;
  max-width: 100%;
  max-height: 100%;
}
.thread-promo-fs-title {
  margin: 0;
  padding: 24px;
  color: #fff;
  font-size: 1.15rem;
  font-weight: 650;
  text-align: center;
  max-width: 20rem;
}
.thread-promo-fs-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 1;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
  background: color-mix(in srgb, #0a0a0c 55%, transparent);
  border: 1px solid color-mix(in srgb, #fff 22%, transparent);
  border-radius: 999px;
  padding: 0.2rem 0.5rem;
  line-height: 1.2;
  pointer-events: none;
}

.comp-card.is-more-card {
  cursor: pointer;
  border-style: dashed;
  border-color: color-mix(in srgb, var(--btn) 45%, var(--border));
}
.comp-card.is-more-card .comp-card-media {
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(ellipse 70% 60% at 50% 40%, color-mix(in srgb, var(--btn) 22%, transparent), transparent 70%),
    color-mix(in srgb, var(--card) 70%, #000);
}
.comp-card-more-inner {
  text-align: center;
  padding: 16px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.comp-card-more-count {
  font-size: 1.35rem;
  font-weight: 750;
  letter-spacing: -0.02em;
  color: var(--text);
}
.comp-card-more-inner .btn {
  min-width: 7.5rem;
}

/* Guest gallery: sign-in placeholder slides */
.gallery-guest-more {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 20px;
  text-align: center;
  background:
    radial-gradient(ellipse 80% 55% at 50% 45%, color-mix(in srgb, var(--btn) 18%, transparent), transparent 65%),
    color-mix(in srgb, var(--bg) 72%, #000);
  color: var(--text);
}
.gallery-guest-more.hidden {
  display: none !important;
}
.gallery-guest-more-label {
  font-size: 1rem;
  font-weight: 650;
  max-width: 14rem;
  line-height: 1.35;
}
.slideshow.is-guest-more .profile-photo,
.slideshow.is-guest-more img.profile-photo {
  filter: blur(14px) brightness(0.55);
  transform: scale(1.06);
}

/* Gallery ads (every 5th still) — CTA strip over themed creative */
.gallery-ad-cta {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  padding: 14px 16px 16px;
  background: linear-gradient(
    to top,
    color-mix(in srgb, var(--bg) 92%, #000) 0%,
    color-mix(in srgb, var(--bg) 55%, transparent) 70%,
    transparent 100%
  );
  pointer-events: auto;
  cursor: pointer;
}
.gallery-ad-cta.hidden {
  display: none !important;
}
.gallery-ad-kicker {
  margin: 0;
  font-size: 0.68rem;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--hint);
}
.gallery-ad-title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.25;
}
.gallery-ad-cta .gallery-ad-btn {
  align-self: flex-start;
  margin-top: 4px;
}
/* Guest: hide swipe chrome while auto-roll is active */
.slideshow.is-guest-autoroll .photo-nav,
.slideshow.is-guest-autoroll .slide-dots,
.slideshow.is-guest-autoroll .gallery-dots {
  display: none !important;
  pointer-events: none !important;
}
/* Fullscreen lightbox: same auto-roll for guests (no prev/next chrome) */
#lightbox.is-guest-autoroll #btnLightboxPrev,
#lightbox.is-guest-autoroll #btnLightboxNext,
#lightbox.is-guest-autoroll #lightboxDots {
  display: none !important;
  pointer-events: none !important;
}

/* Guest feed end card — Sign in (after 10 DPs; not out-of-coins) */
.home-card--guest-signin .home-card-media--guest-signin {
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(ellipse 75% 55% at 50% 40%, color-mix(in srgb, var(--btn) 28%, transparent), transparent 70%),
    color-mix(in srgb, var(--card) 55%, #000);
  min-height: min(58vh, 520px);
}
.home-card-guest-signin {
  text-align: center;
  padding: 28px 22px;
  max-width: 18rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.home-card-guest-signin-title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 750;
  letter-spacing: -0.02em;
  color: var(--text);
}
.home-card-guest-signin-body {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.45;
  color: var(--muted);
}
.home-card-guest-signin-btn {
  min-width: 9rem;
  margin-top: 4px;
}

/*
 * Coach tips (feed / games / cast) — high-contrast amber, NOT theme purple.
 * Dark UI + purple buttons made them easy to miss.
 */
.cast-coach-tip,
.guest-coach-tip {
  --coach-bg: #ffe566;
  --coach-fg: #1a1200;
  --coach-ring: rgba(255, 229, 102, 0.55);
  --coach-glow: rgba(255, 196, 0, 0.55);
}
/* Pack-setup coach: point at Choose Characters after 3s */
.cast-coach-tip {
  position: fixed;
  z-index: 120;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 14px 8px;
  border-radius: 14px;
  background: var(--coach-bg);
  color: var(--coach-fg);
  border: 2px solid #fff6b0;
  font-size: 0.88rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  line-height: 1.2;
  box-shadow:
    0 0 0 3px var(--coach-ring),
    0 12px 32px var(--coach-glow),
    0 4px 12px rgba(0, 0, 0, 0.45);
  pointer-events: none;
  max-width: min(260px, 80vw);
  text-align: center;
  animation: guestCoachPulse 1.1s ease-in-out infinite;
}
.cast-coach-tip[hidden] {
  display: none !important;
}
.cast-rel-coach-tip {
  /* Wider multi-line copy for relationship coach */
  max-width: min(300px, 86vw);
  white-space: normal;
}
.cast-coach-arrow {
  font-size: 1.35rem;
  line-height: 1;
  color: var(--coach-fg);
  font-weight: 900;
  animation: castCoachNudgeDown 0.9s ease-in-out infinite;
}
@keyframes castCoachNudgeDown {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(5px); }
}

/* Demo coach arrows → Home (Social Feed) + Games (to the right of nav, ← points left) */
.guest-coach-root {
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
}
.guest-coach-root.hidden {
  display: none !important;
}
.guest-coach-tip {
  position: fixed;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  padding: 9px 14px 9px 11px;
  border-radius: 999px;
  background: var(--coach-bg);
  color: var(--coach-fg);
  border: 2px solid #fff6b0;
  font-size: 0.88rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  line-height: 1.15;
  box-shadow:
    0 0 0 3px var(--coach-ring),
    0 12px 32px var(--coach-glow),
    0 4px 12px rgba(0, 0, 0, 0.45);
  animation: guestCoachPulse 1.1s ease-in-out infinite;
  max-width: min(240px, 70vw);
  pointer-events: none;
  white-space: nowrap;
}
.guest-coach-tip[hidden] {
  display: none !important;
}
.guest-coach-arrow {
  font-size: 1.25rem;
  line-height: 1;
  flex: 0 0 auto;
  color: var(--coach-fg);
  font-weight: 900;
  animation: guestCoachNudge 0.9s ease-in-out infinite;
}
.guest-coach-label {
  line-height: 1.15;
  color: var(--coach-fg);
}
@keyframes guestCoachPulse {
  0%, 100% { transform: scale(1); opacity: 1; filter: brightness(1); }
  50% { transform: scale(1.04); opacity: 1; filter: brightness(1.06); }
}
/* Nudge toward the nav (left) */
@keyframes guestCoachNudge {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(-5px); }
}

.page-head-legal {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}
.page-head-legal.legal-head-center {
  align-items: center;
  text-align: center;
  width: 100%;
  max-width: 980px;
  margin: 0 auto 8px;
}
.page-head-legal.legal-head-center h2 {
  margin: 0;
  font-size: 1.45rem;
  font-weight: 650;
  letter-spacing: -0.02em;
}
.page-head-legal.legal-head-center .muted {
  margin: 4px 0 0;
}

/* —— Shell + auto-hide sidebar —— */
.shell {
  display: flex;
  height: var(--app-height);
  max-height: var(--app-height);
  width: 100%;
  overflow: hidden;
}
.sidebar {
  width: var(--sidebar-w);
  flex-shrink: 0;
  background: var(--bg2);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  padding: 12px 8px;
  gap: 8px;
  transition: width 0.34s cubic-bezier(0.22, 0.61, 0.36, 1);
  z-index: 40;
  overflow: hidden;
}
/* Toast is position:fixed from logo — lift stacking so mark stays visible under tail */
body.brand-toast-active .sidebar {
  overflow: visible;
  z-index: 220;
}
body.brand-toast-active .shell {
  overflow: visible;
}
body.brand-toast-active .brand-logo-wrap {
  z-index: 250;
}
.sidebar:hover,
.sidebar:focus-within {
  width: var(--sidebar-exp);
}
.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 8px 16px;
  min-height: 48px;
  width: 100%;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  border-radius: 12px;
}
.sidebar-brand:hover .brand-text,
.sidebar-brand:focus-visible .brand-text {
  opacity: 1;
}
.sidebar-brand:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--btn, #6c5ce7) 55%, transparent);
  outline-offset: 2px;
}
.brand-mark {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--btn), #a855f7);
  font-size: 1.1rem;
}
.brand-text {
  font-weight: 700;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.28s ease 0.04s;
}
.sidebar:hover .brand-text,
.sidebar:focus-within .brand-text {
  opacity: 1;
}
.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}
.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  border: none;
  background: transparent;
  color: var(--text);
  border-radius: 12px;
  padding: 12px 10px;
  font: inherit;
  cursor: pointer;
  text-align: left;
  min-height: 48px;
}
.nav-item:hover { background: color-mix(in srgb, var(--btn) 18%, transparent); }
.nav-item.active {
  background: color-mix(in srgb, var(--btn) 28%, transparent);
  color: #fff;
}
.nav-item.logout { color: var(--hint); }
.nav-icon {
  width: 28px;
  flex-shrink: 0;
  text-align: center;
  font-size: 1.15rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.nav-icon-svg svg {
  width: 22px;
  height: 22px;
  display: block;
}
/* Support: quieter mark so Chat stays the primary conversation icon */
.nav-icon-subtle {
  opacity: 0.72;
}
.nav-item:hover .nav-icon-subtle,
.nav-item.active .nav-icon-subtle {
  opacity: 1;
}
.nav-label {
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.28s ease 0.04s;
  font-size: 0.95rem;
}
.sidebar:hover .nav-label,
.sidebar:focus-within .nav-label {
  opacity: 1;
}
.sidebar-foot {
  border-top: 1px solid var(--border);
  padding-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.sidebar-mgmt {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
/* Desktop: More toggle / sheet chrome hidden */
.mobile-more-toggle { display: none; }
.mobile-more-grab,
.mobile-more-title,
.mobile-more-safety { display: none; }
.mobile-more-backdrop { display: none; }
.sidebar-user-row {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  padding: 0 4px;
}
.user-chip {
  font-size: 0.75rem;
  padding: 4px 6px 4px 10px;
  white-space: nowrap;
  opacity: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  flex: 1 1 auto;
  transition: opacity 0.28s ease 0.04s;
}
.sidebar:hover .user-chip,
.sidebar:focus-within .user-chip {
  opacity: 1;
}
/* Spendable balance — lives in site footer (before Terms), always visible when signed in */
.nav-coin-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  margin: 0;
  padding: 4px 10px 4px 8px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, #e0b03a 35%, var(--border));
  background: color-mix(in srgb, #e0b03a 10%, var(--card, #1a1a22));
  color: var(--text);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 650;
  line-height: 1;
  cursor: pointer;
  opacity: 1;
  pointer-events: auto;
  transition: border-color 0.12s, background 0.12s, box-shadow 0.2s, transform 0.2s;
}
.nav-coin-badge.hidden {
  display: none !important;
}
/* Footer placement: ~1in gap before Terms */
.footer-links .footer-coin-badge,
.footer-coin-badge {
  margin-right: 1in;
  align-self: center;
}
.nav-coin-count {
  color: var(--text);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}
.nav-coin-badge.is-exhausted .nav-coin-count,
.nav-coin-badge.is-low .nav-coin-count {
  color: #f04444;
}
.nav-coin-ico {
  display: inline-flex;
  align-items: center;
  line-height: 0;
}
.nav-coin-ico .coin-ico {
  width: 1.05em;
  height: 1.05em;
  display: block;
}
.nav-coin-count.hidden {
  display: none !important;
}
/* 0 balance: creator/artist mark instead of count + star */
.nav-coin-badge.is-empty {
  border-color: color-mix(in srgb, var(--btn, #6c5ce7) 40%, var(--border));
  background: color-mix(in srgb, var(--btn, #6c5ce7) 14%, var(--card, #1a1a22));
  color: color-mix(in srgb, var(--btn, #6c5ce7) 85%, #fff);
  padding-left: 9px;
  padding-right: 9px;
}
.nav-coin-badge.is-empty .nav-coin-ico .creator-ico {
  width: 1.15em;
  height: 1.15em;
  display: block;
}
.nav-coin-badge.is-empty:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--btn, #6c5ce7) 55%, var(--border));
  background: color-mix(in srgb, var(--btn, #6c5ce7) 22%, var(--card, #1a1a22));
}
.nav-coin-badge:hover:not(:disabled) {
  border-color: color-mix(in srgb, #e0b03a 55%, var(--border));
  background: color-mix(in srgb, #e0b03a 16%, var(--card, #1a1a22));
}
/* Pulse when balance changes (spend or top-up) */
.nav-coin-badge.is-pulse {
  animation: coinBadgePulse 0.85s ease-out;
}
@keyframes coinBadgePulse {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 color-mix(in srgb, #e0b03a 0%, transparent);
  }
  35% {
    transform: scale(1.12);
    box-shadow:
      0 0 0 4px color-mix(in srgb, #e0b03a 35%, transparent),
      0 0 18px color-mix(in srgb, #e0b03a 45%, transparent);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 color-mix(in srgb, #e0b03a 0%, transparent);
  }
}
@media (max-width: 640px) {
  .footer-links .footer-coin-badge,
  .footer-coin-badge {
    margin-right: 16px; /* keep readable gap on small screens */
  }
}

.main {
  flex: 1;
  min-width: 0;
  overflow: auto;
  padding: 20px 24px 32px;
  background:
    radial-gradient(ellipse 80% 50% at 20% -10%, color-mix(in srgb, var(--btn) 18%, transparent), transparent),
    var(--bg);
}
.main:has(.page-chats-workspace:not(.hidden)),
.main:has(.page-companions-workspace:not(.hidden)),
.main:has(.page-groups-workspace:not(.hidden)),
.main:has(.page-home:not(.hidden)) {
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* —— Pages —— */
.page-head { margin-bottom: 18px; }
.page-head.compact { margin-bottom: 8px; padding: 0 4px; }
.page-head h2 { margin: 0 0 4px; font-size: 1.45rem; }
.page-head.compact h2 { font-size: 1.05rem; margin: 0; }
.page-head .muted { margin: 0; }

.banner {
  background: color-mix(in srgb, var(--btn) 16%, var(--card));
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
  margin: 12px 16px 0;
}
.banner p { margin: 0 0 10px; }

/* —— Website setup wizard (language → consent → interest → look) —— */
.setup-overlay {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(16px, var(--safe-top)) max(16px, var(--safe-right))
    max(16px, var(--safe-bottom)) max(16px, var(--safe-left));
  overflow: auto;
}
.setup-overlay.hidden {
  display: none !important;
}
.setup-overlay-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%, color-mix(in srgb, var(--btn) 28%, transparent), transparent 55%),
    color-mix(in srgb, var(--bg) 82%, #000);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.setup-card {
  position: relative;
  z-index: 1;
  width: min(440px, 100%);
  margin: auto;
  padding: 28px 24px 22px;
  border-radius: 20px;
  background: var(--card);
  border: 1px solid color-mix(in srgb, var(--border) 90%, var(--btn));
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--btn) 12%, transparent),
    0 24px 64px rgba(0, 0, 0, 0.55);
  animation: setupCardIn 0.35s ease-out;
}
@keyframes setupCardIn {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.setup-step h2 {
  margin: 0 0 10px;
  font-size: 1.35rem;
  letter-spacing: -0.02em;
  line-height: 1.25;
}
.setup-kicker {
  margin: 0 0 8px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
}
.setup-lead {
  margin: 0 0 18px;
  line-height: 1.5;
  font-size: 0.95rem;
}
.consent-free-header {
  margin: 16px 0 0;
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.25;
  text-align: center;
}
.consent-free-block {
  margin: 8px 0 12px;
}
.consent-free-block .free-how-link {
  margin-top: 2px;
}
.setup-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 8px;
}
.setup-lang-chips {
  margin: 0 0 20px;
}
.setup-lang-chips .chip {
  min-width: calc(50% - 4px);
  justify-content: center;
}
.setup-terms {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  text-align: left;
  max-height: min(28vh, 200px);
  overflow: auto;
}
.setup-terms-h {
  margin: 0 0 8px;
  font-size: 0.9rem;
}
.setup-look-row {
  margin: 4px 0 16px;
  display: flex;
  gap: 8px;
  align-items: flex-start;
}
.setup-look-row textarea {
  flex: 1;
  min-height: 100px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font: inherit;
  resize: vertical;
}
.setup-status {
  margin: 14px 0 0;
  min-height: 1.2em;
  font-size: 0.88rem;
  text-align: center;
}
.setup-status.err {
  color: var(--danger);
}
.setup-status.ok {
  color: #6ee7a8;
}
body.setup-active .sidebar,
body.setup-active .site-footer {
  pointer-events: none;
  user-select: none;
  opacity: 0.35;
}
body.setup-active .main > .page {
  pointer-events: none;
  user-select: none;
  opacity: 0.2;
  filter: blur(2px);
}

.global-status { min-height: 0; margin: 4px 16px; }
.empty { padding: 24px 12px; text-align: center; font-size: 0.85rem; }

/* —— Chat workspace (list | chat | profile) —— */
.page-chats-workspace {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  height: 100%;
  margin: 0;
  padding: 0 !important;
}
.chat-workspace {
  display: grid;
  /* List | thread | profile — widths driven by --ws-list-w / --ws-detail-w (desktop resize). */
  grid-template-columns: var(--ws-list-w, 280px) minmax(0, 1fr) var(--ws-detail-w, 300px);
  flex: 1;
  min-height: 0;
  height: 100%;
  border-top: 1px solid var(--border);
  position: relative;
}
.chat-workspace.is-list-collapsed {
  grid-template-columns: 0 minmax(0, 1fr) var(--ws-detail-w, 300px);
}
.chat-workspace.is-detail-collapsed {
  grid-template-columns: var(--ws-list-w, 280px) minmax(0, 1fr) 0;
}
.chat-workspace.is-list-collapsed.is-detail-collapsed {
  grid-template-columns: 0 minmax(0, 1fr) 0;
}
.chat-workspace.is-list-collapsed .chat-list-pane,
.chat-workspace.is-detail-collapsed .chat-profile-pane {
  overflow: hidden;
  min-width: 0;
  width: 0;
  padding: 0;
  border: none;
  pointer-events: none;
  opacity: 0;
}

.chat-list-pane {
  border-right: 1px solid var(--border);
  background: var(--bg2);
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  padding: 12px 8px;
  overflow: hidden;
  position: relative;
}
.chats-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
  max-width: none;
  padding-right: 2px;
}
/* Compact rows — ~half previous height */
.chat-row {
  display: flex;
  gap: 8px;
  align-items: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 6px 8px;
  cursor: pointer;
  text-align: left;
  color: inherit;
  font: inherit;
  width: 100%;
  transition: background 0.12s, border-color 0.12s;
  min-height: 0;
}
.chat-row:hover {
  background: var(--card);
  border-color: var(--border);
}
.chat-row.active {
  background: color-mix(in srgb, var(--btn) 18%, var(--card));
  border-color: color-mix(in srgb, var(--btn) 35%, var(--border));
}
.chat-row-media {
  position: relative;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  overflow: hidden;
  background: #1a1a24;
}
.chat-row-media .chat-row-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  border-radius: 0;
}
.chat-row-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  border: 0;
  pointer-events: none;
  z-index: 2;
}
.chat-row-video.hidden {
  display: none !important;
}
.chat-row img,
.chat-row .chat-row-photo {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  object-fit: cover;
  object-position: center top;
  background: #1a1a24;
  flex-shrink: 0;
}
.chat-row-body { flex: 1; min-width: 0; }
.chat-row-top {
  display: flex;
  justify-content: space-between;
  gap: 6px;
  align-items: baseline;
  margin-bottom: 1px;
}
.chat-row-top strong { font-size: 0.88rem; font-weight: 600; }
.chat-row-top time { font-size: 0.68rem; color: var(--hint); white-space: nowrap; }
.chat-preview {
  font-size: 0.72rem;
  color: var(--hint);
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.25;
}
.chat-preview .role { color: var(--accent); font-weight: 600; }

/* Center conversation */
.chat-center-pane {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  background: var(--bg);
}
.chat-empty-state {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--hint);
}
.chat-empty-state.compact { min-height: 120px; flex: 0; padding: 24px; }
/* Host for per-companion chat instances (only one visible). */
.chat-instance-host {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  position: relative;
}
.chat-instance-host > .chat-instance.hidden,
.chat-instance-host > .chat-active.hidden {
  display: none !important;
}
.chat-active {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.chat-instance-host > .chat-active {
  width: 100%;
  height: 100%;
}

/* Phase 2: per-room game shells (same layout rules as chat pool) */
.group-instance-host {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  position: relative;
}
.group-instance-host > .group-instance.hidden,
.group-instance-host > .group-active.hidden {
  display: none !important;
}
.group-active {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.group-instance-host > .group-active {
  width: 100%;
  height: 100%;
}
.chat-instance-host [data-cel="chatHeadPhoto"],
.chat-instance-host #chatHeadPhoto {
  cursor: pointer;
}

/* In-chat Games promo (scenario-jump redirect) — mirrors Mini App banner idea */
.bubble.games-banner-cta {
  align-self: stretch;
  max-width: 100%;
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--btn) 18%, var(--card)),
    color-mix(in srgb, var(--card) 92%, #000)
  );
  border: 1px solid color-mix(in srgb, var(--btn) 35%, var(--border));
  border-radius: 14px;
  padding: 12px 14px;
  margin: 6px 0 10px;
}
.games-banner-cta-inner {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.games-banner-cta-icon {
  font-size: 1.6rem;
  line-height: 1;
  flex-shrink: 0;
}
.games-banner-cta-copy {
  min-width: 0;
  flex: 1;
}
.games-banner-cta-copy strong {
  display: block;
  font-size: 1rem;
  margin-bottom: 2px;
}
.games-banner-cta-copy p {
  margin: 0 0 10px;
}
.games-banner-cta-btn {
  margin-top: 2px;
}

/* Phase 3: per-companion profile cards in chat pane */
.profile-instance-host {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}
.profile-instance-host > .profile-instance.hidden,
.profile-instance-host > .chat-profile.hidden {
  display: none !important;
}
.profile-instance-host > .chat-profile {
  width: 100%;
  height: 100%;
  min-height: 0;
}

/* Right profile — footer (owner actions) pinned; body scrolls in .profile-scroll */
.chat-profile-pane {
  border-left: 1px solid var(--border);
  background: var(--bg2);
  overflow: hidden;
  min-height: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  position: relative;
}

/* —— Desktop workspace panes: resize + collapse (chat + gameroom) —— */
.ws-pane-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.ws-pane-head h2,
.ws-pane-head-title {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
}
.ws-pane-collapse {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  font-size: 1.1rem;
  line-height: 1;
  opacity: 0.75;
}
.ws-pane-collapse:hover {
  opacity: 1;
  background: color-mix(in srgb, var(--btn) 14%, var(--card));
}
.ws-resize-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 12px;
  z-index: 5;
  cursor: col-resize;
  touch-action: none;
  background: transparent;
  margin: 0;
}
/*
 * Two-line grip:
 *  - idle: short, soft marks in the middle (hint it’s resizable)
 *  - hover/focus/drag: full height (same span as original top/bottom 20%)
 */
.ws-resize-handle::before,
.ws-resize-handle::after {
  content: "";
  position: absolute;
  top: 50%;
  bottom: auto;
  width: 2px;
  height: 22px;
  margin-top: -11px;
  border-radius: 2px;
  background: color-mix(in srgb, var(--text) 22%, var(--border));
  opacity: 0.55;
  transition:
    top 0.12s,
    bottom 0.12s,
    height 0.12s,
    margin-top 0.12s,
    background 0.12s,
    opacity 0.12s;
  pointer-events: none;
}
.ws-resize-handle::before {
  left: calc(50% - 3px);
}
.ws-resize-handle::after {
  left: calc(50% + 1px);
}
.ws-resize-handle:hover::before,
.ws-resize-handle:hover::after,
.ws-resize-handle:focus-visible::before,
.ws-resize-handle:focus-visible::after,
body.ws-resizing .ws-resize-handle.is-active::before,
body.ws-resizing .ws-resize-handle.is-active::after {
  top: 20%;
  bottom: 20%;
  height: auto;
  margin-top: 0;
  background: color-mix(in srgb, var(--btn) 55%, var(--border));
  opacity: 1;
}
body.ws-resizing {
  cursor: col-resize !important;
  user-select: none !important;
}
body.ws-resizing iframe,
body.ws-resizing img,
body.ws-resizing video {
  pointer-events: none;
}
/* Handle on the right edge of list pane */
.chat-list-pane > .ws-resize-handle,
.group-list-pane > .ws-resize-handle {
  right: -6px;
}
/* Handle on the left edge of detail pane */
.ws-resize-handle-start {
  left: -6px;
  right: auto;
}
.ws-edge-tab {
  display: none;
  position: absolute;
  top: 50%;
  z-index: 8;
  transform: translateY(-50%);
  width: 22px;
  height: 56px;
  padding: 0;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  align-items: center;
  justify-content: center;
}
/* Expand tabs: on the workspace when a pane is collapsed */
.ws-edge-tab-list {
  left: 0;
  border-radius: 0 10px 10px 0;
  border-left: none;
}
.ws-edge-tab-detail {
  right: 0;
  border-radius: 10px 0 0 10px;
  border-right: none;
}
/* Collapse tabs: same chrome as expand, centered on the open pane seam */
.ws-edge-tab-list-collapse {
  right: 0;
  left: auto;
  /* Sit half on the list / center border (same “tab” feel as expand) */
  transform: translate(50%, -50%);
  border-radius: 10px 0 0 10px;
  border-right: none;
  z-index: 9;
}
.ws-edge-tab-detail-collapse {
  left: 0;
  right: auto;
  transform: translate(-50%, -50%);
  border-radius: 0 10px 10px 0;
  border-left: none;
  z-index: 9;
}
.ws-edge-tab:hover {
  background: color-mix(in srgb, var(--btn) 16%, var(--card));
  color: var(--accent, var(--btn));
}
/* Desktop only: expand when collapsed; collapse when open */
@media (min-width: 900px) {
  .chat-workspace.is-list-collapsed > .ws-edge-tab-list,
  .chat-workspace.is-detail-collapsed > .ws-edge-tab-detail,
  .group-workspace.is-detail-collapsed:not(.group-catalog-only):not(.group-no-card) > .ws-edge-tab-detail {
    display: inline-flex;
  }
  .chat-workspace.is-list-collapsed > .ws-edge-tab-list[hidden],
  .chat-workspace.is-detail-collapsed > .ws-edge-tab-detail[hidden],
  .group-workspace.is-detail-collapsed > .ws-edge-tab-detail[hidden] {
    display: inline-flex !important;
  }
  /* Collapse edge tabs while the matching pane is open */
  .chat-workspace:not(.is-list-collapsed) .chat-list-pane > .ws-edge-tab-list-collapse,
  .chat-workspace:not(.is-detail-collapsed) .chat-profile-pane > .ws-edge-tab-detail-collapse,
  .companions-workspace:not(.is-detail-collapsed) .companions-profile-pane > .ws-edge-tab-detail-collapse,
  .group-workspace:not(.is-detail-collapsed):not(.group-catalog-only):not(.group-no-card) .group-theme-pane > .ws-edge-tab-detail-collapse {
    display: inline-flex;
  }
  /* Desktop: no in-pane header chrome for profile (collapse is edge tab; mobile sheet re-enables) */
  .chat-workspace > .chat-profile-pane .profile-sheet-head {
    display: none;
  }
  .chat-workspace > .chat-profile-pane .profile-sheet-title {
    display: none;
  }
  .chat-workspace > .chat-profile-pane .profile-sheet-close {
    display: none;
  }
}
@media (max-width: 899px) {
  /* Hide desktop-only pane chrome; mobile list/sheet rules still apply. */
  .ws-pane-collapse,
  .ws-resize-handle,
  .ws-edge-tab,
  .group-theme-desktop-head,
  .companions-profile-desktop-head {
    display: none !important;
  }
  /* Ignore desktop collapse state under the desktop breakpoint. */
  .chat-workspace.is-list-collapsed .chat-list-pane,
  .chat-workspace.is-detail-collapsed .chat-profile-pane {
    opacity: 1;
    pointer-events: auto;
    overflow: hidden;
  }
  .chat-workspace.is-list-collapsed,
  .chat-workspace.is-detail-collapsed,
  .chat-workspace.is-list-collapsed.is-detail-collapsed {
    grid-template-columns: minmax(200px, 28%) minmax(0, 1fr) minmax(242px, 308px);
  }
}
.chat-profile {
  padding: 0;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  /* Fill the pane so owner management bar can sit on the bottom edge */
  min-height: 100%;
  height: 100%;
  overflow: hidden;
}
.chat-profile .profile-scroll {
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  /* Gallery gutters: top matches left/right (bottom stays roomier for scroll) */
  padding: 4px 4px 12px;
  /* Height = ratio of this content width (not aspect-ratio shrink) */
  container-type: inline-size;
  container-name: profile-gal;
}
/* Never collapse the gallery block; width always fills the scroll content box */
.chat-profile .profile-slideshow {
  display: block !important;
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* —— Companions workspace (grid | profile) —— */
.page-companions-workspace {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  height: 100%;
  margin: 0;
  padding: 0 !important;
  overflow: hidden;
}
.companions-workspace {
  display: grid;
  /* List | profile — detail width via --ws-detail-w (desktop resize + localStorage). */
  grid-template-columns: minmax(0, 1fr) var(--ws-detail-w, 300px);
  /* One row constrained to the workspace — without this, the row grows with all cards
     and the list never scrolls (sticky/fixed head fails). */
  grid-template-rows: minmax(0, 1fr);
  flex: 1;
  min-height: 0;
  height: 100%;
  overflow: hidden;
  position: relative;
}
.companions-workspace.is-detail-collapsed {
  grid-template-columns: minmax(0, 1fr) 0;
}
.companions-workspace.is-detail-collapsed .companions-profile-pane {
  overflow: hidden;
  min-width: 0;
  width: 0;
  padding: 0;
  border: none;
  pointer-events: none;
  opacity: 0;
}
.companions-main {
  min-width: 0;
  min-height: 0;
  height: 100%;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  /* Padding moved into head + list scroll so gutters still wheel-scroll the list */
  padding: 0;
}
/* Title + filters stay put (not sticky — true fixed flex head). */
.companions-sticky-head {
  flex: 0 0 auto;
  position: relative;
  z-index: 6;
  background: transparent;
  padding: 16px 24px 12px;
}
.companions-sticky-head .page-head {
  margin-bottom: 10px;
}
.companions-sticky-head .page-head h2 {
  margin: 0;
}
/* Profiles list: scroll pane + pinned jump arrows (like messages jump-down). */
.companions-list-wrap {
  position: relative;
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.companions-list-scroll {
  flex: 1 1 0;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  /* Side padding is inside the scroller so left/right gutters still scroll the list */
  padding: 0 24px 32px;
}
/* Profiles list jump arrows — same language as .chat-jump-down */
.list-jump {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  z-index: 6;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--card) 92%, var(--btn));
  color: var(--text);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: opacity 0.18s ease, transform 0.18s ease, background 0.12s;
}
.list-jump:hover {
  background: color-mix(in srgb, var(--btn) 40%, var(--card));
  transform: translateX(-50%) translateY(-1px);
}
.list-jump:active {
  transform: translateX(-50%) scale(0.96);
}
.list-jump.hidden {
  display: none !important;
}
.list-jump-up {
  top: 10px;
}
.list-jump-down {
  bottom: 10px;
}
.companions-profile-pane {
  border-left: 1px solid var(--border);
  background: var(--bg2);
  /* Footer pinned; bio/gallery scroll inside .profile-scroll */
  overflow: hidden;
  min-height: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  position: relative;
}
@media (min-width: 900px) {
  .companions-workspace.is-detail-collapsed > .ws-edge-tab-detail {
    display: inline-flex;
  }
  .companions-workspace.is-detail-collapsed > .ws-edge-tab-detail[hidden] {
    display: inline-flex !important;
  }
}
@media (max-width: 899px) {
  .companions-workspace,
  .companions-workspace.is-detail-collapsed {
    /* Mobile uses sheet; ignore desktop width var / collapse. */
    grid-template-columns: minmax(0, 1fr);
  }
  .companions-workspace.is-detail-collapsed .companions-profile-pane {
    opacity: 1;
    pointer-events: auto;
    width: auto;
  }
}
.companions-profile-pane #compProfileEmpty,
.companions-profile-pane #compProfile {
  flex: 1 1 auto;
  min-height: 0;
}
.companions-profile-pane .chat-profile {
  overflow: hidden;
  height: 100%;
  min-height: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}
.companions-profile-pane .chat-profile .profile-scroll {
  overflow-x: hidden;
  overflow-y: auto;
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  /* Same as chat profile: top matches left/right gutters */
  padding: 4px 4px 12px;
  container-type: inline-size;
  container-name: profile-gal;
}
/* Mobile sheet chrome — only shown under 768px */
.comp-profile-mobile-bar,
.profile-sheet-head {
  display: none;
}
/* Higher specificity than .chatroom-head-actions .icon-btn (same file, later).
   Desktop: profile is the right pane — no › control. Mobile media re-enables it. */
.chat-profile-view-btn,
.chatroom-head-actions .chat-profile-view-btn,
.chatroom-head-actions .icon-btn.chat-profile-view-btn {
  display: none;
}
.profile-sheet-close {
  width: 36px;
  height: 36px;
  font-size: 1.35rem;
  line-height: 1;
  flex-shrink: 0;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--hint) 30%, transparent);
  background: transparent;
  color: var(--text);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
/* Prevent body scroll under open mobile profile sheet */
body.comp-profile-sheet-open {
  overflow: hidden;
}

/* —— Companions toolbar (filter + count + search) —— */
.companions-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
  margin: 0;
  max-width: none;
}
.companions-filters-line {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1 1 200px;
  overflow: hidden; /* count never causes horizontal overflow */
}
.companions-filters {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  flex: 0 0 auto;
  min-width: 0;
}
.companions-filters .chip {
  flex: 0 0 auto; /* never squash filter chips */
}
/* Soft listed-count next to filters; fully hides when space is tight */
.companions-list-count {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: clip;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1.2;
  color: color-mix(in srgb, var(--hint, #a0a0b4) 88%, var(--text, #eee));
  opacity: 0.85;
  text-align: right;
  pointer-events: none;
  user-select: none;
}
.companions-list-count::before {
  content: "·";
  margin-right: 0.45em;
  opacity: 0.55;
  font-weight: 400;
}
.companions-list-count[hidden],
.companions-list-count.is-squeezed {
  display: none !important;
}
.companions-search-wrap {
  flex: 1 1 220px;
  min-width: min(100%, 180px);
  max-width: 360px;
}
.companions-search {
  width: 100%;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text);
  font: inherit;
  font-size: 0.9rem;
  padding: 9px 14px 9px 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%238b8b9a' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='7' cy='7' r='5'/%3E%3Cpath d='M11 11l3.5 3.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 12px 50%;
}
.companions-search::placeholder { color: var(--hint); }
.companions-search:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--btn) 55%, var(--border));
}

/* —— Companions grid —— */
.companions-grid {
  display: grid;
  /* Desktop: fill width with ~180px cards; mobile overridden to fixed 2-col like miniapp */
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 14px;
  align-content: start;
  align-items: stretch;
}
.companions-grid > .empty {
  grid-column: 1 / -1;
}

/* —— Loading skeleton previews (profiles + games) ——
 * Same card chrome as real tiles so users see the layout while data loads.
 */
@keyframes catalog-skeleton-shimmer {
  0% {
    background-position: 100% 0;
  }
  100% {
    background-position: -100% 0;
  }
}
.skeleton-shimmer {
  background: linear-gradient(
    105deg,
    color-mix(in srgb, #1a1a24 100%, transparent) 0%,
    color-mix(in srgb, #2a2a38 92%, #6c5ce7 8%) 42%,
    color-mix(in srgb, #1a1a24 100%, transparent) 84%
  );
  background-size: 220% 100%;
  animation: catalog-skeleton-shimmer 1.35s ease-in-out infinite;
}
.skeleton-line {
  height: 0.72rem;
  border-radius: 6px;
  margin: 0;
}
.skeleton-line-title {
  width: 68%;
  height: 0.85rem;
  margin-bottom: 0.45rem;
}
.skeleton-line-sub {
  width: 92%;
  height: 0.65rem;
  opacity: 0.85;
}
.skeleton-line-sub.short {
  width: 55%;
  margin-top: 0.35rem;
}
.comp-card.is-skeleton,
.group-theme-card-pick.is-skeleton {
  pointer-events: none;
  cursor: default;
  border-color: color-mix(in srgb, var(--border) 80%, transparent);
  box-shadow: none;
  opacity: 0.92;
}
.comp-card.is-skeleton:hover,
.group-theme-card-pick.is-skeleton:hover {
  border-color: color-mix(in srgb, var(--border) 80%, transparent);
  box-shadow: none;
}
.comp-card.is-skeleton .comp-card-media,
.group-theme-card-pick.is-skeleton .group-theme-pick-media {
  background: #15151c;
}
.comp-card.is-skeleton .comp-card-body,
.group-theme-card-pick.is-skeleton .group-theme-pick-body {
  padding: 10px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 0;
  min-height: 3.2rem;
}
.companions-grid.is-skeleton-host,
.group-theme-grid.is-skeleton-host {
  min-height: 12rem;
}
.catalog-skeleton-label {
  grid-column: 1 / -1;
  margin: 0 0 0.15rem;
  font-size: 0.78rem;
  font-style: italic;
  color: var(--hint, #9a9aab);
  opacity: 0.9;
}
.group-theme-grid.is-skeleton-host .catalog-skeleton-label {
  /* games grid may not be CSS grid children the same way */
  width: 100%;
  flex: 0 0 100%;
}
.comp-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  height: 100%;
  min-height: 100%;
  box-sizing: border-box;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  /* Skip paint for off-screen cards (browser-level); media still dehydrated in JS. */
  content-visibility: auto;
  contain-intrinsic-size: auto 320px;
}
.comp-card:hover {
  border-color: color-mix(in srgb, var(--btn) 40%, var(--border));
}
.comp-card.selected {
  border-color: color-mix(in srgb, var(--btn) 65%, var(--border));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--btn) 35%, transparent);
}
.comp-card-media {
  position: relative;
  width: 100%;
  /* ~20px shorter than 2:3 at ~180px card width (250 vs 270). */
  aspect-ratio: 18 / 25;
  overflow: hidden;
  background: #1a1a24;
}
.comp-card img,
.comp-card .comp-card-img {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: cover;
  object-position: center top;
  display: block;
  background: #1a1a24;
  position: relative;
  z-index: 1;
}
/* Photo corner tags */
.comp-card-media > .pill {
  position: absolute;
  z-index: 3;
  margin: 0;
  max-width: calc(100% - 16px);
  font-size: 0.72rem;
  line-height: 1.2;
  padding: 4px 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
  background: color-mix(in srgb, #121218 78%, transparent);
  border: 1px solid color-mix(in srgb, #fff 18%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}
/* Private — top left */
.comp-card-media .comp-card-private {
  top: 8px;
  left: 8px;
}
/* Active — bottom left */
.comp-card-media .comp-card-active {
  bottom: 8px;
  left: 8px;
}
/* Relationship pill — bottom right when chatting (compact: "{bond} {heat}") */
.comp-card-media .comp-card-bond {
  right: 8px;
  bottom: 8px;
  display: inline-flex;
  align-items: center;
  gap: 0.2em;
  max-width: calc(100% - 16px);
}
/* Keep heat glyph text-sized inside relationship pills (never a fat tile icon). */
.comp-card-media .comp-card-bond .heat-icon,
.pill.bond-tag .heat-icon {
  margin: 0 0 0 0.12em !important;
  font-size: 0.95em;
  line-height: 1;
  display: inline;
  vertical-align: -0.05em;
  background: transparent !important;
}
.comp-card-media .comp-card-bond .heat-icon-img,
.pill.bond-tag .heat-icon-img {
  margin: 0 0 0 0.1em !important;
  /* size from global .heat-icon-img */
  font-size: 0.95em;
  line-height: 1;
  display: inline-block;
  vertical-align: -0.18em;
  object-fit: contain;
  flex-shrink: 0;
  background: transparent !important;
}
/* Not chatting: mood (starting heat) glyph, bottom-right — no circle plate */
.comp-card-media .comp-card-mood {
  position: absolute;
  right: 8px;
  bottom: 8px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.4rem;
  height: 1.4rem;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  pointer-events: none;
  font-size: 1rem;
  line-height: 1;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.55));
}
.comp-card-media .comp-card-mood .heat-icon {
  margin: 0 !important;
  font-size: 1rem;
  line-height: 1;
  display: inline;
  vertical-align: middle;
  background: transparent !important;
}
.comp-card-media .comp-card-mood .heat-icon-img {
  margin: 0 !important;
  /* same default optical size as global .heat-icon-img */
  width: 1.35em !important;
  height: 1.35em !important;
  max-width: none;
  max-height: none;
  font-size: 1rem;
  line-height: 1;
  display: inline-block;
  vertical-align: middle;
  object-fit: contain;
  background: transparent !important;
}
/* Profile life + feed meta: mood icon middle-aligned with text (text-sized) */
.life-line-mood {
  display: flex;
  align-items: center;
  gap: 0.28em;
  flex-wrap: wrap;
}
.life-line-mood .life-mood-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  line-height: 1;
  margin: 0;
  width: 1.4em;
  height: 1.4em;
  font-size: 1em;
}
.life-line-mood .life-mood-icon .heat-icon {
  margin: 0 !important;
  font-size: 1em;
  line-height: 1;
  display: inline;
  object-fit: contain;
}
.life-line-mood .life-mood-icon .heat-icon-img {
  margin: 0 !important;
  width: 1.35em !important;
  height: 1.35em !important;
  max-width: none;
  max-height: none;
  font-size: 1em;
  line-height: 1;
  display: inline-block;
  object-fit: contain;
  vertical-align: middle;
}
.home-card-meta .home-card-mood-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  line-height: 1;
  margin: 0;
  width: 1.4em;
  height: 1.4em;
}
.home-card-meta .home-card-mood-icon .heat-icon {
  margin: 0 !important;
  font-size: 1em;
  display: inline;
}
.home-card-meta .home-card-mood-icon .heat-icon-img {
  margin: 0 !important;
  width: 1.35em !important;
  height: 1.35em !important;
  max-width: none;
  max-height: none;
  font-size: 1em;
  display: inline-block;
  object-fit: contain;
  vertical-align: -0.12em;
}
/* Empty / failed DP: keep silhouette visible (never a blank dark box). */
.comp-card .comp-card-img.is-placeholder,
.comp-card .comp-card-img.is-broken.is-placeholder {
  opacity: 1;
  filter: none;
  object-fit: cover;
  object-position: center center;
}
.comp-card-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  border: 0;
  background: transparent;
  pointer-events: none;
  z-index: 2;
}
.comp-card-video.hidden {
  display: none !important;
}
.comp-meta {
  padding: 10px 12px 8px;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
/* Name left · Follow chip right */
.comp-name-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}
.comp-meta .name {
  font-weight: 600;
  font-size: 0.98rem;
  line-height: 1.25;
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Full-width Chat at bottom of card (.comp-actions) */
.comp-card-chat-btn {
  width: 100%;
  white-space: nowrap;
  margin: 0;
}
.comp-card-chat-btn:disabled,
.comp-card-chat-btn.disabled {
  opacity: 0.55;
  cursor: default;
  pointer-events: none;
}
/* Subtle Follow/Following chip on list cards (public only) */
.follow-tag {
  appearance: none;
  flex: 0 0 auto;
  align-self: center;
  margin: 0;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--hint, #a0a0b4) 40%, var(--border, #2a2a36));
  background: color-mix(in srgb, var(--card, #14141c) 70%, transparent);
  color: color-mix(in srgb, var(--hint, #a0a0b4) 92%, var(--text, #eee));
  font: inherit;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.35;
  white-space: nowrap;
  cursor: pointer;
  text-align: center;
}
.follow-tag:hover {
  border-color: color-mix(in srgb, #f472b6 40%, var(--border));
  color: #f9a8d4;
}
.follow-tag.is-on {
  color: #fb7185;
  border-color: color-mix(in srgb, #fb7185 42%, var(--border));
  background: color-mix(in srgb, #fb7185 10%, transparent);
}
.comp-card-icons {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
  margin-top: -2px;
}
.comp-card-icons .icon-btn {
  width: 30px;
  height: 30px;
  border: none;
  background: transparent;
  color: var(--hint);
  border-radius: 8px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.comp-card-icons .icon-btn svg {
  width: 16px;
  height: 16px;
  display: block;
}
.comp-card-icons .icon-btn:hover {
  color: var(--text);
  background: color-mix(in srgb, var(--btn) 16%, transparent);
}
.comp-card-icons .icon-btn.danger:hover {
  color: #ff8a8a;
  background: color-mix(in srgb, #e55 14%, transparent);
}
/* Bot owner only: companion id above management actions (bottom-right).
   Footer is a flex end-stack: always on the bottom of the profile column;
   .profile-scroll scrolls above it. */
.chat-profile > .bond-meter:not(.hidden) {
  flex-shrink: 0;
  /* Push footer (bond + id + actions) to the bottom when content is short */
  margin-top: auto;
}
.chat-profile:not(:has(> .bond-meter:not(.hidden))) > .profile-owner-id:not(.hidden) {
  margin-top: auto;
}
.chat-profile:not(:has(> .bond-meter:not(.hidden))):not(:has(> .profile-owner-id:not(.hidden)))
  > .profile-owner-actions:not(.hidden) {
  margin-top: auto;
}
.profile-owner-id {
  flex-shrink: 0;
  margin: 0;
  padding: 6px 14px 0;
  text-align: right;
  font-size: 0.72rem;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  color: var(--hint);
  user-select: all;
  position: relative;
  z-index: 2;
  background: color-mix(in srgb, var(--bg2) 92%, var(--panel, #16161c));
  border-top: 1px solid var(--border);
}
.profile-owner-id.hidden {
  display: none !important;
}
/* When owner actions also show, id sits flush above the action bar (shared border). */
.chat-profile:has(.profile-owner-actions:not(.hidden)) .profile-owner-id:not(.hidden) {
  border-bottom: none;
  padding-bottom: 2px;
}
.chat-profile:has(.profile-owner-actions:not(.hidden)) .profile-owner-actions {
  border-top: none;
  padding-top: 6px;
}
.profile-owner-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  margin: 0;
  padding: 10px 14px 14px;
  border-top: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg2) 92%, var(--panel, #16161c));
  /* Flex footer (not sticky) — always on the bottom of .chat-profile */
  position: relative;
  z-index: 2;
}
.profile-owner-actions.hidden {
  display: none !important;
}
.profile-owner-actions .btn {
  flex: 0 0 auto;
  min-width: 0;
}
/* Make public / Make private — compact chip size (not full-width) */
.profile-owner-actions .profile-vis-btn {
  padding: 4px 10px;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.2;
  border-radius: 999px;
  min-height: 0;
}
.profile-owner-actions .owner-icon-row {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}
.profile-owner-actions .owner-catalog-reorder {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}
.profile-owner-actions .owner-catalog-reorder + .owner-icon-row {
  margin-left: 0;
}
.profile-owner-actions .icon-btn {
  width: 36px;
  height: 36px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  border-radius: 10px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.profile-owner-actions .icon-btn svg {
  width: 17px;
  height: 17px;
}
.profile-owner-actions .icon-btn:hover:not(:disabled):not(.is-disabled) {
  background: color-mix(in srgb, var(--btn) 14%, transparent);
}
.profile-owner-actions .icon-btn:disabled,
.profile-owner-actions .icon-btn.is-disabled {
  opacity: 0.35;
  cursor: default;
  pointer-events: none;
}
.profile-owner-actions .icon-btn.danger:hover {
  color: #ff8a8a;
  background: color-mix(in srgb, #e55 14%, transparent);
}
.comp-meta .blurb {
  font-size: 0.78rem;
  color: var(--hint);
  margin: 0;
  margin-top: 2px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.3;
}
.pill {
  display: inline-block;
  font-size: 0.65rem;
  padding: 2px 6px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--btn) 35%, transparent);
  margin-bottom: 4px;
  margin-right: 4px;
}
/* Bottom action bar: full-width Chat with her / Create */
.comp-actions {
  display: flex;
  gap: 6px;
  padding: 0 10px 12px;
}
.comp-actions .btn {
  flex: 1;
  padding: 8px 6px;
  font-size: 0.85rem;
}
.comp-actions .comp-card-chat-btn {
  flex: 1;
  width: 100%;
}

@media (max-width: 900px) {
  .companions-workspace {
    grid-template-columns: 1fr;
    /* Keep list row height-capped so header freeze + list scroll still work */
    grid-template-rows: minmax(0, 1fr) auto;
  }
  .companions-profile-pane {
    border-left: none;
    border-top: 1px solid var(--border);
    max-height: 42vh;
  }
}

/* —— Chat conversation pane —— */
.chatroom-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--bg2);
  flex-shrink: 0;
  /* Allow comic story bubble to peek above the edit icon */
  overflow: visible;
  position: relative;
  z-index: 5;
}
.chatroom-title {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1;
}
.chatroom-title strong { display: block; font-size: 0.98rem; }
/* Theme room: Edit cast + Delete stick to the right of the header */
.chatroom-head-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  margin-left: auto;
}
.chatroom-head-actions .icon-btn {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--hint) 30%, transparent);
  background: transparent;
  color: var(--hint);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.chatroom-head-actions .icon-btn svg {
  width: 18px;
  height: 18px;
  display: block;
}
.chatroom-head-actions .icon-btn:hover {
  color: var(--text);
  border-color: color-mix(in srgb, var(--btn) 45%, var(--border));
}
/* Comic speech bubble from the Edit (pencil) icon — “Story updated” */
.group-story-bubble-host {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  z-index: 30;
}
.group-story-comic-bubble {
  position: absolute;
  /* Below the pencil — header is at the top of the pane, so up = off-screen */
  top: calc(100% + 10px);
  right: 0;
  left: auto;
  transform: translateY(-6px) scale(0.92);
  z-index: 40;
  max-width: min(200px, 52vw);
  padding: 8px 12px;
  border-radius: 16px;
  border: 2px solid color-mix(in srgb, var(--text) 88%, #000);
  background: #fffef8;
  color: #1a1a22;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0.01em;
  white-space: nowrap;
  text-align: center;
  box-shadow:
    0 4px 0 color-mix(in srgb, #000 18%, transparent),
    0 10px 22px color-mix(in srgb, #000 28%, transparent);
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.18s ease,
    transform 0.22s cubic-bezier(0.34, 1.4, 0.64, 1),
    visibility 0.18s;
}
/* Comic tail pointing up toward the pencil */
.group-story-comic-bubble::after {
  content: "";
  position: absolute;
  right: 12px;
  top: -8px;
  width: 14px;
  height: 14px;
  background: #fffef8;
  border-left: 2px solid color-mix(in srgb, var(--text) 88%, #000);
  border-top: 2px solid color-mix(in srgb, var(--text) 88%, #000);
  transform: rotate(45deg);
  box-sizing: border-box;
}
.group-story-comic-bubble.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}
/* Soft pulse on the edit icon while the bubble is up */
.group-story-bubble-host.is-popping #btnGroupCastEdit {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}
@media (prefers-color-scheme: dark) {
  .group-story-comic-bubble {
    background: #f4f0e4;
    color: #14141c;
  }
  .group-story-comic-bubble::after {
    background: #f4f0e4;
  }
}
.chatroom-head-actions .icon-btn.danger:hover {
  color: #ff8a8a;
  border-color: color-mix(in srgb, #e55 50%, transparent);
}
.chatroom-title .muted {
  margin: 1px 0 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 36vw;
}
.avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top; /* faces sit in the upper half of DPs */
  background: #1a1a24;
  flex-shrink: 0;
}
.chat-row-photo {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  object-fit: cover;
  object-position: center top;
  background: #1a1a24;
  flex-shrink: 0;
}
.chat-thread {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.chat-messages {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  /* Extra bottom padding so last bubbles clear the camera FAB */
  padding: 16px 14px 58px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
  scroll-behavior: auto;
}
/* Short threads (new chat / new game room): pin bubbles to the bottom.
   Spacer takes free space when the thread is shorter than the viewport;
   collapses to 0 once messages overflow (normal scroll from top). */
.chat-messages::before {
  content: "";
  flex: 1 0 0;
  min-height: 0;
  pointer-events: none;
}
/* Jump-to-latest when user has scrolled up */
.chat-jump-down {
  position: absolute;
  left: 50%;
  bottom: 10px;
  transform: translateX(-50%);
  z-index: 5;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--card) 92%, var(--btn));
  color: var(--text);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: opacity 0.18s ease, transform 0.18s ease, background 0.12s;
}
.chat-jump-down:hover {
  background: color-mix(in srgb, var(--btn) 40%, var(--card));
  transform: translateX(-50%) translateY(-1px);
}
.chat-jump-down.hidden {
  display: none !important;
}
/* Status (left) + camera FAB (right) — independently anchored; camera never moves */
.chat-thread-status-bar {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none; /* only the camera receives clicks */
}
/* Disappearing messages: left edge, same vertical band as the camera */
.chat-thread-status {
  position: absolute;
  left: 12px;
  bottom: 16px;
  right: 68px; /* keep clear of the right-anchored camera */
  max-width: min(360px, calc(100% - 70px));
  width: max-content;
  pointer-events: none;
  text-align: left;
  padding: 7px 12px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
  background: color-mix(in srgb, var(--card) 90%, transparent);
  color: var(--hint);
  font-size: 0.78rem;
  font-style: italic;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0;
  transform: translateY(2px);
  transition: opacity 0.16s ease, transform 0.16s ease;
}
.chat-thread-status.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.chat-thread-status[hidden] {
  display: none !important;
}
/* Request picture — always bottom-right of conversation area */
.chat-camera-fab {
  position: absolute;
  right: 12px;
  bottom: 10px;
  z-index: 5;
  pointer-events: auto;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--btn) 32%, var(--border));
  background:
    radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--btn) 22%, transparent), transparent 62%),
    color-mix(in srgb, var(--btn) 10%, var(--card));
  color: var(--accent, #a78bfa);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.32);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: transform 0.12s ease, background 0.12s ease, border-color 0.12s ease, opacity 0.15s;
}
.chat-camera-fab:hover:not(:disabled) {
  background:
    radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--btn) 34%, transparent), transparent 65%),
    color-mix(in srgb, var(--btn) 16%, var(--card));
  border-color: color-mix(in srgb, var(--btn) 52%, var(--border));
  transform: translateY(-1px);
}
.chat-camera-fab:active:not(:disabled) {
  transform: scale(0.96);
}
.chat-camera-fab:disabled {
  opacity: 0.55;
  cursor: wait;
}
.chat-camera-fab.is-thinking {
  border-color: color-mix(in srgb, var(--btn) 55%, var(--border));
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--btn) 25%, transparent),
    0 0 14px color-mix(in srgb, var(--btn) 26%, transparent);
}
.chat-camera-icon {
  display: block;
}
.bubble {
  max-width: min(78%, 480px);
  padding: 8px 12px;
  border-radius: 14px;
  font-size: 0.92rem;
  line-height: 1.4;
  white-space: pre-wrap;
  word-break: break-word;
}
.bubble.assistant {
  align-self: flex-start;
  background: var(--card);
  border: 1px solid var(--border);
  border-bottom-left-radius: 5px;
}
.bubble.user {
  align-self: flex-end;
  background: color-mix(in srgb, var(--btn) 55%, #2a2050);
  border-bottom-right-radius: 5px;
}
.bubble.system {
  align-self: center;
  font-size: 0.78rem;
  color: var(--hint);
  background: transparent;
  max-width: 90%;
}
.chat-compose {
  --autoplay-inset-right: max(6px, calc(var(--safe-right) / 2));
  display: flex;
  gap: 8px;
  padding: 10px 12px 12px;
  border-top: 1px solid var(--border);
  background: var(--bg2);
  align-items: flex-end;
  flex-shrink: 0;
  position: relative;
  overflow: visible;
  z-index: 4;
  padding-bottom: max(12px, var(--safe-bottom));
  padding-left: max(12px, var(--safe-left));
  padding-right: var(--autoplay-inset-right);
}
.chat-compose > textarea {
  align-self: stretch;
  flex: 1 1 auto;
  min-width: 0;
}
/* Suggest + Send — normal flex siblings; autoplay is out of flow */
.chat-compose-actions {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  flex-shrink: 0;
  position: relative;
  padding: 0;
}
.chat-compose-actions .btn.primary,
.chat-compose #btnChatSend,
.chat-compose #btnGroupSend {
  flex-shrink: 0;
  min-height: 52px;
  min-width: 4.75rem;
  padding: 0 18px;
  font-size: 0.95rem;
  font-weight: 650;
  align-self: flex-end;
  border-radius: 12px;
}
/*
 * Auto Play — absolute always (closed + open), hangs from top of compose.
 * Closed: small top-right tab, arrow ↓.
 * Open: same origin (top:0 right:0), card drops down; thin full-width close
 * strip stays sticky at the top of the card. Height matches message box (JS).
 */
.autoplay-rail {
  position: absolute;
  top: 0; /* same attachment for closed tab and open card */
  right: var(--autoplay-inset-right, max(6px, calc(var(--safe-right) / 2))); /* pad from edge closed + open */
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-start;
  margin: 0;
  padding: 0;
  width: auto;
  height: auto;
  z-index: 8;
  pointer-events: none;
  box-sizing: border-box;
}
.autoplay-rail > * {
  pointer-events: auto;
}
/* Closed: short top-edge folder tab (rounded bottom = hangs from top) */
.autoplay-tab {
  flex-shrink: 0;
  width: 36px;
  min-width: 36px;
  height: 14px;
  min-height: 14px;
  max-height: 14px;
  margin: 0;
  padding: 0;
  border: 1px solid var(--border);
  border-top: none; /* attached to top edge of compose */
  border-radius: 0 0 8px 8px; /* rounded bottom — hangs from top */
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bg2) 40%, var(--card)), color-mix(in srgb, var(--card) 92%, var(--bg2)));
  color: var(--hint);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  box-shadow: 0 2px 6px color-mix(in srgb, #000 14%, transparent);
  transition: color 0.15s ease, border-color 0.15s ease, height 0.15s ease, max-height 0.15s ease, width 0.15s ease;
  z-index: 2;
}
.autoplay-tab:hover {
  color: var(--text);
  border-color: color-mix(in srgb, var(--btn) 40%, var(--border));
  height: 16px;
  max-height: 16px;
}
/* Pure CSS chevron — always vertical (top ↔ bottom), never left/right */
.autoplay-tab-arrow {
  display: block;
  width: 0;
  height: 0;
  margin: 0;
  padding: 0;
  border-style: solid;
  border-color: transparent;
  /* Closed: point DOWN (open panel downward) */
  border-left-width: 4px;
  border-right-width: 4px;
  border-top-width: 5px;
  border-bottom-width: 0;
  border-top-color: currentColor;
  border-bottom-color: transparent;
  transform: none !important;
  font-size: 0;
  line-height: 0;
  overflow: hidden;
  color: inherit;
  background: none;
  transition: none;
}
/* Open: point UP (collapse) */
.autoplay-tab[aria-expanded="true"] .autoplay-tab-arrow {
  border-top-width: 0;
  border-bottom-width: 5px;
  border-top-color: transparent;
  border-bottom-color: currentColor;
  transform: none !important;
}
/* Panel drops below the tab */
.autoplay-panel {
  display: none;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start; /* stick content under the close strip */
  gap: 10px;
  box-sizing: border-box;
  width: min(148px, 34vw);
  min-width: 128px;
  flex: 1 1 auto;
  min-height: 0;
  padding: 12px 12px 14px;
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border));
  border-top: none;
  border-radius: 0 0 14px 14px;
  background: color-mix(in srgb, var(--card) 96%, var(--bg2));
  box-shadow: 0 8px 20px color-mix(in srgb, #000 18%, transparent);
  z-index: 4;
}
.autoplay-panel:not(.hidden) {
  display: flex;
}
/*
 * Open: card stays absolute at top-right — same origin as the closed tab
 * (opens from there). Close strip: full card width, thin, sticky top.
 * Height synced to message box (syncAutoplayRailToMessageBox).
 */
.chat-compose.is-autoplay-open {
  display: flex;
  align-items: flex-start; /* message box top-aligned with card */
  gap: 8px;
  /* reserve card width + gap + same right inset as closed */
  padding-right: calc(min(148px, 34vw) + 8px + var(--autoplay-inset-right, max(6px, calc(var(--safe-right) / 2))));
}
.chat-compose.is-autoplay-open .chat-compose-actions {
  display: none !important;
}
.chat-compose.is-autoplay-open > textarea {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  min-height: 80px;
  max-height: 200px;
  height: auto;
  align-self: flex-start;
}
.chat-compose.is-autoplay-open .autoplay-rail {
  position: absolute;
  top: 0; /* stick to compose top — opened from the tab */
  right: var(--autoplay-inset-right, max(6px, calc(var(--safe-right) / 2))); /* same pad as closed */
  left: auto;
  bottom: auto;
  width: min(148px, 34vw);
  min-width: min(148px, 34vw);
  max-width: min(148px, 34vw);
  align-items: stretch;
  justify-content: flex-start;
  display: flex;
  flex-direction: column;
  margin: 0;
  pointer-events: auto;
  overflow: hidden;
  box-sizing: border-box;
}
/* Close tab: full width, thin; flush with compose top (like closed tab) */
.chat-compose.is-autoplay-open .autoplay-tab,
.autoplay-rail.is-open .autoplay-tab {
  position: sticky;
  top: 0;
  flex: 0 0 14px;
  width: 100%;
  min-width: 100%;
  max-width: 100%;
  height: 14px !important;
  min-height: 14px !important;
  max-height: 14px !important;
  margin: 0;
  border-radius: 0; /* no rounded top L/R — sides run to the top edge */
  border-top: none; /* no darker top border; attached to compose top */
  border-left: 1px solid color-mix(in srgb, var(--accent) 50%, var(--border));
  border-right: 1px solid color-mix(in srgb, var(--accent) 50%, var(--border));
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 25%, var(--border));
  box-shadow: none;
  color: var(--accent);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bg2) 40%, var(--card)), color-mix(in srgb, var(--card) 92%, var(--bg2)));
  z-index: 6;
}
.chat-compose.is-autoplay-open .autoplay-tab:hover,
.autoplay-rail.is-open .autoplay-tab:hover {
  height: 14px !important;
  max-height: 14px !important;
}
.chat-compose.is-autoplay-open .autoplay-panel {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  max-width: 100%;
  overflow: auto;
  padding: 10px 12px 12px;
  gap: 8px;
  border-radius: 0 0 14px 14px;
  justify-content: flex-start;
}
/* Mood icon + "Auto Play" on one compact row */
.autoplay-heading-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 0;
  width: 100%;
  position: relative;
  z-index: 2;
}
.autoplay-heading {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--hint);
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 2px;
  flex: 1 1 auto;
  min-width: 0;
}
.autoplay-turns {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  height: 34px;
  margin: 0;
  padding: 0 6px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 650;
  text-align: center;
  -moz-appearance: textfield;
  appearance: textfield;
}
.autoplay-turns::-webkit-outer-spin-button,
.autoplay-turns::-webkit-inner-spin-button {
  opacity: 1;
  height: 32px;
}
/* Owner gallery heat: reuses autoplay-mood bubble pattern on icon-btn row */
.gallery-heat-wrap {
  position: relative;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  z-index: 5;
}
.gallery-heat-wrap.hidden,
.gallery-heat-wrap[hidden] {
  display: none !important;
}
.gallery-heat-wrap.is-open {
  z-index: 80;
}
.gallery-heat-btn.icon-btn {
  /* match other gallery icon-btn size; icon is the heat glyph */
  position: relative;
}
.gallery-heat-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  line-height: 1;
}
.gallery-heat-ico .heat-icon,
.gallery-heat-ico .heat-icon-img {
  width: 1.25em !important;
  height: 1.25em !important;
  font-size: 15px;
  object-fit: contain;
}
/*
 * Bubble is position:fixed (set in JS) so it is not clipped by
 * .gallery-action-row { overflow: hidden / overflow-y: hidden }.
 * Absolute fallback when fixed coords not applied yet.
 */
.gallery-heat-bubble.autoplay-mood-bubble,
.gallery-heat-bubble {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 90;
  /* Ensure flex layout even if autoplay-mood-bubble rules are overridden */
  display: flex !important;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 4px 6px;
  pointer-events: auto;
}
.gallery-heat-bubble.gallery-heat-bubble--fixed {
  position: fixed !important;
  bottom: auto !important;
  left: auto !important;
  transform: none !important;
  margin: 0;
}
.gallery-heat-bubble.hidden,
.gallery-heat-bubble[hidden] {
  display: none !important;
}
/* Parent rows clip absolute children — open state must allow overflow */
.gallery-action-row:has(.gallery-heat-wrap.is-open),
.gallery-action-wrap:has(.gallery-heat-wrap.is-open),
.profile-icon-actions:has(.gallery-heat-wrap.is-open),
.group-theme-image-actions:has(.gallery-heat-wrap.is-open) {
  overflow: visible !important;
}

/* Compact mood: single current icon before title; bubble of all icons on click */
.autoplay-mood {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  min-width: 0;
  z-index: 4;
}
.autoplay-mood.is-open {
  z-index: 24;
}
/* Trigger: plain icon only (no circular chip — avoids heading overflow) */
.autoplay-mood-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: auto;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  line-height: 1;
  box-shadow: none;
  opacity: 0.92;
}
.autoplay-mood-btn:hover,
.autoplay-mood-btn:focus-visible {
  opacity: 1;
  outline: none;
  filter: brightness(1.08);
}
.autoplay-mood.is-open .autoplay-mood-btn {
  opacity: 1;
}
.autoplay-mood-btn-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  font-size: 14px;
  line-height: 1;
  pointer-events: none;
}
.autoplay-mood-btn-ico .heat-icon,
.autoplay-mood-btn-ico .heat-icon-img {
  width: 1.35em !important;
  height: 1.35em !important;
  font-size: 15px;
  line-height: 1;
  object-fit: contain;
}
/* Bubble floats above the mood icon with all heat icons */
.autoplay-mood-bubble {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 6px);
  transform: translateX(-50%);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 4px 5px;
  border: 1px solid color-mix(in srgb, var(--border) 75%, var(--accent));
  border-radius: 10px;
  background: color-mix(in srgb, var(--card) 94%, var(--bg2));
  box-shadow:
    0 8px 20px color-mix(in srgb, #000 20%, transparent),
    0 0 0 1px color-mix(in srgb, var(--accent) 8%, transparent);
  z-index: 30;
  white-space: nowrap;
  pointer-events: auto;
  max-width: min(140px, 90vw);
  box-sizing: border-box;
}
.autoplay-mood-bubble.hidden,
.autoplay-mood-bubble[hidden] {
  display: none !important;
}
.autoplay-mood-bubble::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border: 5px solid transparent;
  border-top-color: color-mix(in srgb, var(--card) 94%, var(--bg2));
  filter: drop-shadow(0 1px 0 color-mix(in srgb, var(--border) 70%, var(--accent)));
}
/* Picks: no circle — selected = soft hue fill only */
.autoplay-mood-pick {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: auto;
  min-width: 0;
  margin: 0;
  padding: 3px 5px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  line-height: 1;
  box-shadow: none;
}
.autoplay-mood-pick:hover,
.autoplay-mood-pick:focus-visible {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  outline: none;
}
.autoplay-mood-pick.is-on {
  background: color-mix(in srgb, var(--accent) 28%, transparent);
  box-shadow: none;
  border: none;
}
.autoplay-mood-pick .heat-icon,
.autoplay-mood-pick .heat-icon-img {
  width: 1.35em !important;
  height: 1.35em !important;
  font-size: 15px;
  line-height: 1;
  object-fit: contain;
  pointer-events: none;
}
/* Let the mood bubble float above the close tab / panel edges while open */
.autoplay-rail:has(.autoplay-mood.is-open),
.chat-compose.is-autoplay-open .autoplay-rail:has(.autoplay-mood.is-open) {
  overflow: visible;
  z-index: 12;
}
.chat-compose.is-autoplay-open .autoplay-panel:has(.autoplay-mood.is-open) {
  overflow: visible;
  z-index: 10;
}

/* Whole Auto Play section pulses when a run finishes (coin-badge style). */
.autoplay-panel.is-pulse,
.autoplay-rail.is-pulse {
  animation: autoplaySectionPulse 0.85s ease-out;
}
@keyframes autoplaySectionPulse {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--btn, #6c5ce7) 0%, transparent);
  }
  35% {
    transform: scale(1.03);
    box-shadow:
      0 0 0 3px color-mix(in srgb, var(--btn, #6c5ce7) 30%, transparent),
      0 0 18px color-mix(in srgb, var(--btn, #6c5ce7) 38%, transparent);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--btn, #6c5ce7) 0%, transparent);
  }
}
.autoplay-play-btn {
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  margin: 0;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--btn) 40%, var(--border));
  border-radius: 10px;
  background: color-mix(in srgb, var(--btn) 18%, var(--card));
  color: var(--text);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  line-height: 1;
  position: relative;
}
.autoplay-play-btn:hover {
  border-color: color-mix(in srgb, var(--btn) 55%, var(--border));
  background: color-mix(in srgb, var(--btn) 28%, var(--card));
}
.autoplay-play-btn.is-playing {
  color: #fff;
  background: color-mix(in srgb, var(--accent) 75%, #000);
  border-color: color-mix(in srgb, var(--accent) 60%, var(--border));
}
.autoplay-play-btn .autoplay-icon-stop {
  font-size: 0.65rem;
  line-height: 1;
}
/* Guest (user_id=-1): Play locked; hover shows Sign in bubble. */
.autoplay-play-btn.is-guest-locked,
.autoplay-play-btn.is-guest-locked:hover {
  opacity: 0.5;
  cursor: not-allowed;
  background: color-mix(in srgb, var(--card) 90%, #666);
  border-color: var(--border);
  color: var(--hint);
}
.autoplay-play-btn.is-guest-locked.is-playing {
  opacity: 0.5;
  background: color-mix(in srgb, var(--card) 90%, #666);
  border-color: var(--border);
}
.autoplay-guest-tip {
  display: none;
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 40;
  white-space: nowrap;
  max-width: min(220px, 70vw);
  padding: 0.4rem 0.65rem;
  border-radius: 10px;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.25;
  color: #fff;
  background: color-mix(in srgb, #1a1030 92%, var(--accent, #6c5ce7));
  border: 1px solid color-mix(in srgb, var(--accent, #6c5ce7) 45%, transparent);
  box-shadow: 0 6px 18px color-mix(in srgb, #000 45%, transparent);
  pointer-events: none;
}
.autoplay-guest-tip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border: 5px solid transparent;
  border-top-color: color-mix(in srgb, #1a1030 92%, var(--accent, #6c5ce7));
}
.autoplay-play-btn.is-guest-locked:hover .autoplay-guest-tip,
.autoplay-play-btn.is-guest-locked:focus-visible .autoplay-guest-tip {
  display: block;
}
.autoplay-panel .autoplay-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}
/* Right panes sit above the tab edge so the tab feels “behind” the card */
.chat-profile-pane,
.group-theme-pane {
  position: relative;
  z-index: 6;
}
.chat-compose textarea {
  flex: 1;
  resize: none;
  /* ~2× default single-line compose height */
  min-height: 80px;
  max-height: 200px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text);
  /* Match chat / game-room message bubbles */
  font: inherit;
  font-size: 0.92rem;
  line-height: 1.4;
  padding: 10px 12px;
}
.chat-compose textarea:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--btn) 60%, var(--border));
}
/* Muse orbit — product suggest mark (generating.gif energy). Used on chat, create, settings, scene. */
.muse-icon-btn,
.chat-compose .chat-suggest-btn,
.icon-btn.field-random,
.icon-btn.scene-random,
#btnSuggestAppearance,
#btnSuggestPersonality {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  color: var(--accent);
  border-color: color-mix(in srgb, var(--btn) 28%, var(--border));
  background:
    radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--btn) 18%, transparent), transparent 62%),
    color-mix(in srgb, var(--btn) 8%, var(--card));
  overflow: visible;
}
.chat-compose .chat-suggest-btn {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  min-width: 52px;
  border-radius: 14px;
  line-height: 1;
  align-self: flex-end;
  margin-bottom: 0;
  border: 1px solid color-mix(in srgb, var(--btn) 32%, var(--border));
  background:
    radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--btn) 22%, transparent), transparent 62%),
    color-mix(in srgb, var(--btn) 8%, var(--card));
}
.icon-btn.field-random,
.icon-btn.scene-random,
#btnSuggestAppearance,
#btnSuggestPersonality,
.muse-icon-btn:not(.chat-suggest-btn) {
  width: 40px;
  height: 40px;
  min-width: 40px;
  border-radius: 12px;
}
.suggest-muse {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5em;
  height: 1.5em;
}
.chat-compose .chat-suggest-btn .suggest-muse {
  width: 34px;
  height: 34px;
}
.suggest-muse-icon {
  display: block;
  width: 22px;
  height: 22px;
  overflow: visible;
}
.chat-compose .chat-suggest-btn .suggest-muse-icon {
  width: 32px;
  height: 32px;
}
/* Gentle orbit — same “circling energy” language as image generation */
.suggest-muse-orbit {
  transform-box: view-box;
  transform-origin: 16px 16px;
  animation: suggestMuseOrbit 7.5s linear infinite;
  will-change: transform;
}
.suggest-muse-orbit-inner {
  animation-duration: 5.2s;
  animation-direction: reverse;
}
.muse-icon-btn:not(:disabled):hover .suggest-muse-orbit,
.chat-suggest-btn:not(:disabled):hover .suggest-muse-orbit,
.field-random:not(:disabled):hover .suggest-muse-orbit,
.scene-random:not(:disabled):hover .suggest-muse-orbit {
  animation-duration: 3.2s;
}
.muse-icon-btn:not(:disabled):hover .suggest-muse-orbit-inner,
.chat-suggest-btn:not(:disabled):hover .suggest-muse-orbit-inner,
.field-random:not(:disabled):hover .suggest-muse-orbit-inner,
.scene-random:not(:disabled):hover .suggest-muse-orbit-inner {
  animation-duration: 2.4s;
}
/* While drafting — faster, more like generating */
.muse-icon-btn.is-thinking,
.chat-suggest-btn.is-thinking,
.field-random.is-thinking,
.field-random.busy,
.scene-random.is-thinking,
.scene-random.busy {
  border-color: color-mix(in srgb, var(--btn) 55%, var(--border));
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--btn) 25%, transparent),
    0 0 14px color-mix(in srgb, var(--btn) 26%, transparent);
}
.muse-icon-btn.is-thinking .suggest-muse-orbit,
.chat-suggest-btn.is-thinking .suggest-muse-orbit,
.field-random.is-thinking .suggest-muse-orbit,
.field-random.busy .suggest-muse-orbit,
.scene-random.is-thinking .suggest-muse-orbit,
.scene-random.busy .suggest-muse-orbit {
  animation-duration: 1.6s;
}
.muse-icon-btn.is-thinking .suggest-muse-orbit-inner,
.chat-suggest-btn.is-thinking .suggest-muse-orbit-inner,
.field-random.is-thinking .suggest-muse-orbit-inner,
.field-random.busy .suggest-muse-orbit-inner,
.scene-random.is-thinking .suggest-muse-orbit-inner,
.scene-random.busy .suggest-muse-orbit-inner {
  animation-duration: 1.15s;
}
@keyframes suggestMuseOrbit {
  to { transform: rotate(360deg); }
}
.chat-compose .chat-suggest-btn:disabled,
.muse-icon-btn:disabled {
  opacity: 0.72;
  cursor: wait;
}
.chat-compose .chat-suggest-btn:not(:disabled):hover,
.muse-icon-btn:not(:disabled):hover,
.field-random:not(:disabled):hover,
.scene-random:not(:disabled):hover {
  background:
    radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--btn) 32%, transparent), transparent 65%),
    color-mix(in srgb, var(--btn) 14%, var(--card));
  border-color: color-mix(in srgb, var(--btn) 52%, var(--border));
}
.chat-compose .chat-suggest-btn:not(:disabled):active,
.muse-icon-btn:not(:disabled):active {
  transform: scale(0.97);
}
/* Phone portrait, or phone landscape (short height → keep mobile UI, not desktop) */
@media (max-width: 768px), (orientation: landscape) and (max-height: 540px) and (max-width: 960px) {
  .chat-compose .chat-suggest-btn {
    width: 48px;
    height: 48px;
    min-width: 48px;
  }
  .chat-compose .chat-suggest-btn .suggest-muse-icon {
    width: 30px;
    height: 30px;
  }
}

/* Profile slideshow — full content width; height = 2:3 (portrait product ratio).
   Do NOT pair aspect-ratio with max-height (browsers shrink width → side gaps). */
.profile-slideshow {
  position: relative;
  top: auto;
  z-index: 1;
  width: 100%;
  max-width: 100%;
  min-width: 100%;
  min-height: 0;
  box-sizing: border-box;
  /* Fallback when container queries unavailable */
  aspect-ratio: 2 / 3;
  height: auto;
  max-height: min(85vh, calc((var(--ws-detail-w, 300px) - 8px) * 3 / 2));
  margin: 0 0 12px;
  border-radius: 12px;
  overflow: hidden;
  cursor: zoom-in;
  background: #111;
  user-select: none;
  flex-shrink: 0;
  display: block;
}
/* Prefer explicit height from content-box width so width never collapses */
@supports (height: 1cqi) {
  .profile-slideshow {
    aspect-ratio: auto;
    height: min(calc(100cqi * 3 / 2), 85vh);
    max-height: none;
  }
}
/* Personal / room-private still badge (profile gallery, game gallery, fullscreen). */
.photo-private-tag {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 6;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fff;
  background: color-mix(in srgb, #1a1a1a 72%, transparent);
  border: 1px solid color-mix(in srgb, #fff 22%, transparent);
  backdrop-filter: blur(6px);
  pointer-events: none;
  line-height: 1.3;
}
.lightbox-media .photo-private-tag {
  top: 12px;
  left: 12px;
}
/* Generating overlay — GIF fills the gallery slot; text overlaid at bottom. */
.profile-slideshow .gen-overlay {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding: 0;
  text-align: center;
  color: var(--text, #eee);
  background: #111;
}
.profile-slideshow .gen-overlay.hidden { display: none !important; }
.profile-slideshow .gen-placeholder {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}
.profile-slideshow .gen-copy {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: 14px 12px 16px;
  background: linear-gradient(
    180deg,
    transparent 0%,
    color-mix(in srgb, #000 55%, transparent) 35%,
    color-mix(in srgb, #000 85%, transparent) 100%
  );
}
.gen-title {
  margin: 0 0 6px;
  font-size: 1rem;
  font-weight: 650;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.75);
}
.gen-sub {
  margin: 0 auto;
  font-size: 0.82rem;
  color: color-mix(in srgb, #fff 88%, var(--muted, #999));
  max-width: 16rem;
  line-height: 1.35;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.7);
}
/* Generating GIF is the profile photo itself — never hide it (black pane bug). */
.profile-slideshow.is-generating .profile-photo {
  opacity: 1;
}
.profile-slideshow.is-generating .slide-nav,
.profile-slideshow.is-generating .slide-dots,
.profile-slideshow.is-generating .slide-hint {
  visibility: visible;
}
/* Accept/Reject on the gallery photo (not below the fold). */
.profile-slideshow .cand-gallery {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 6;
  padding: 12px 10px 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  background: linear-gradient(
    180deg,
    transparent 0%,
    color-mix(in srgb, #000 50%, transparent) 28%,
    color-mix(in srgb, #000 88%, transparent) 100%
  );
}
.profile-slideshow .cand-gallery.hidden { display: none !important; }
.profile-slideshow .cand-label {
  margin: 0;
  font-size: 0.85rem;
  font-weight: 600;
  color: #fff;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.8);
}
.profile-slideshow .cand-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  width: 100%;
}
.profile-slideshow .cand-btns .btn {
  flex: 1 1 auto;
  min-width: 5rem;
  max-width: 8.5rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
}
.profile-slideshow.has-candidate .slide-hint {
  visibility: hidden;
}

/* Side-by-side current vs new DP — inline on that profile only (not site modal) */
.dp-compare-panel {
  margin: 10px 0 12px;
  padding: 12px 12px 10px;
  border-radius: 14px;
  background: rgba(18, 16, 28, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}
.dp-compare-panel.hidden,
.dp-compare-panel[hidden] {
  display: none !important;
}
.dp-compare-heading {
  margin: 0 0 4px;
  font-size: 1rem;
  font-weight: 650;
}
.dp-compare-copy {
  margin: 0 0 8px;
  line-height: 1.35;
}
.dp-compare-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 8px 0 6px;
}
.dp-compare-card {
  margin: 0;
  text-align: center;
}
.dp-compare-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  border-radius: 12px;
  overflow: hidden;
  background: #141218
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 100'%3E%3Crect fill='%231a1820' width='80' height='100'/%3E%3Ccircle cx='40' cy='34' r='14' fill='%233a3548'/%3E%3Cpath d='M16 86c4-18 14-28 24-28s20 10 24 28' fill='%233a3548'/%3E%3C/svg%3E")
    center 30% / 55% no-repeat;
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.dp-compare-frame img,
.dp-compare-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  background: transparent;
}
.dp-compare-img.is-placeholder,
.dp-compare-img.is-loading:not(.is-ready) {
  /* keep frame silhouette; avoid broken-image icon */
  opacity: 0.92;
}
.dp-compare-img.is-ready {
  opacity: 1;
}
.dp-compare-img.is-broken {
  opacity: 0.35;
}
.dp-compare-card figcaption {
  margin-top: 6px;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  opacity: 0.9;
}
.dp-compare-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.dp-compare-actions .btn {
  flex: 1 1 7.5rem;
}
.dp-compare-again {
  margin-top: 8px;
}
.dp-compare-status {
  margin: 4px 0 0;
  text-align: center;
}
.dp-compare-actions .btn:disabled,
.dp-compare-again:disabled {
  opacity: 0.55;
  pointer-events: none;
}
@media (max-width: 420px) {
  .dp-compare-row {
    gap: 8px;
  }
  .dp-compare-actions {
    flex-direction: column;
  }
  .dp-compare-actions .btn {
    width: 100%;
  }
}

.profile-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  /* Match still: fill frame (no side bars) */
  object-fit: cover;
  object-position: center top;
  border: 0;
  background: #0a0a0e;
  pointer-events: none;
  z-index: 2;
}
.profile-video.hidden {
  display: none !important;
}
/* Fill the slideshow frame edge-to-edge (no side letterboxing). */
.profile-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  min-height: 0;
  aspect-ratio: unset;
  /* cover = no blank left/right; lightbox still shows full uncropped still */
  object-fit: cover;
  object-position: center top;
  display: block;
  background: #1a1a24;
  margin: 0;
  z-index: 1;
}
/* Chrome above video overlay so prev/next stay visible & clickable */
.profile-slideshow .slide-nav,
.profile-slideshow .slide-dots,
.profile-slideshow .slide-count,
.profile-slideshow .slide-hint {
  z-index: 4;
}
.slide-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 40px;
  border: none;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s;
  z-index: 4;
  pointer-events: auto;
}
.profile-slideshow:hover .slide-nav { opacity: 1; }
.slide-nav:hover { background: rgba(0, 0, 0, 0.7); }
.slide-nav.prev { left: 6px; }
.slide-nav.next { right: 6px; }
.slide-nav.hidden { display: none; }
/* Gallery dots — match mini-app (.slideshow .slide-dots span / .on) for profile + gameroom */
.slide-dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
  pointer-events: none;
  z-index: 4; /* above still/video layers (mini-app chrome) */
}
.slide-dot,
button.slide-dot {
  /* Reset button chrome so dots look like mini-app spans */
  appearance: none;
  -webkit-appearance: none;
  border: none;
  outline: none;
  padding: 0;
  margin: 0;
  width: 6px;
  height: 6px;
  min-width: 6px;
  min-height: 6px;
  max-width: 6px;
  max-height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
  box-shadow: none;
  flex-shrink: 0;
  display: block;
  font-size: 0;
  line-height: 0;
  color: transparent;
  cursor: pointer;
  pointer-events: auto; /* container is none; dots stay tappable */
}
.slide-dot:hover,
.slide-dot:focus-visible {
  background: rgba(255, 255, 255, 0.55);
}
.slide-dot.active,
.slide-dot.on {
  background: #fff;
}
/* Subtle divider between public and private gallery slides */
.slide-dot-sep {
  width: 1px;
  height: 8px;
  margin: 0 3px;
  border-radius: 1px;
  background: rgba(255, 255, 255, 0.45);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);
  flex-shrink: 0;
  align-self: center;
  opacity: 0.85;
  pointer-events: none;
}
.slide-dot.is-private {
  background: rgba(255, 255, 255, 0.22);
  box-shadow: inset 0 0 0 1px rgba(255, 200, 120, 0.35);
}
.slide-dot.is-private.active,
.slide-dot.is-private.on {
  background: #ffd9a8;
  box-shadow: none;
}
/* Expand hint — desktop hover only; hidden on touch / narrow screens */
.slide-hint {
  position: absolute;
  top: 8px;
  right: 8px;
  background: rgba(0, 0, 0, 0.45);
  padding: 2px 8px;
  border-radius: 6px;
  opacity: 0;
  transition: opacity 0.15s;
  pointer-events: none;
}
.profile-slideshow:hover .slide-hint { opacity: 1; }
@media (max-width: 768px), (orientation: landscape) and (max-height: 540px) and (max-width: 960px), (hover: none) {
  .slide-hint {
    display: none !important;
  }
}

.chat-profile h3 { margin: 0; font-size: 1.1rem; min-width: 0; }
/* Name + Chat CTA on one row (Chat lives next to name, not in photo action icons) */
/* Action icons + details under the gallery photo (profile + gameroom) */
.chat-profile .profile-scroll > .profile-icon-actions,
.chat-profile .profile-scroll > .profile-name-row,
.chat-profile .profile-scroll > .profile-follow-row,
.chat-profile .profile-scroll > .profile-life,
.chat-profile .profile-scroll > .profile-blurb,
.chat-profile .profile-scroll > .profile-body,
.chat-profile .profile-scroll > p.muted,
.group-theme-gallery > .group-theme-image-actions,
/* Scenes + plot are siblings of #groupThemeCard (not nested inside it). */
.group-theme-pane-scroll > .group-theme-card,
.group-theme-pane-scroll > .group-plot-card {
  padding-left: 7px;
  box-sizing: border-box;
}
.group-theme-pane-scroll > .group-theme-scenes {
  padding-left: 7px;
  padding-right: 7px;
  box-sizing: border-box;
}
.profile-name-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 4px;
  min-width: 0;
}
.profile-name-row h3 {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 8px;
}
.profile-name-row h3 .profile-name-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.profile-name-row h3 .profile-private-pill {
  flex-shrink: 0;
  margin: 0;
}
.profile-name-row .profile-chat-btn {
  flex-shrink: 0;
  padding: 6px 12px;
  min-height: 32px;
  font-size: 0.82rem;
}
.profile-name-row .profile-chat-btn.hidden {
  display: none !important;
}
/* Follow tag under name (profile view) — sticky left */
.profile-follow-row {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin: 0 0 6px;
  min-height: 0;
}
.profile-follow-row .follow-tag {
  font-size: 0.72rem;
  padding: 3px 10px;
}
/* Picture like heart in gallery action row */
.gallery-action-row .icon-btn.heart-btn.is-on,
.profile-icon-actions .icon-btn.heart-btn.is-on {
  color: #fb7185;
  border-color: color-mix(in srgb, #fb7185 40%, var(--border));
}
.gallery-action-row .icon-btn.heart-btn,
.profile-icon-actions .icon-btn.heart-btn {
  gap: 4px;
  min-width: 36px;
  min-height: 36px;
  padding: 0 8px;
  width: auto;
}
.gallery-action-row .icon-btn .icon-btn-count,
.profile-icon-actions .icon-btn .icon-btn-count {
  font-size: 0.72rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  line-height: 1;
  min-width: 1.1em;
  text-align: left;
  white-space: nowrap;
}
/* Generate / Animate: icon + Stars cost chip (e.g. "10 ⭐", "10 × sec ⭐") */
.gallery-action-row .icon-btn.has-cost,
.profile-icon-actions .icon-btn.has-cost {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  width: auto;
  min-width: 40px;
  min-height: 40px;
  height: auto;
  padding: 4px 6px;
  line-height: 1.05;
}
.gallery-action-row .icon-btn.has-cost svg,
.profile-icon-actions .icon-btn.has-cost svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
.gallery-action-row .icon-btn .icon-btn-cost,
.profile-icon-actions .icon-btn .icon-btn-cost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.12em;
  font-size: 0.58rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  line-height: 1.1;
  white-space: nowrap;
  opacity: 0.95;
}
.gallery-action-row .icon-btn .icon-btn-cost .star-ico,
.profile-icon-actions .icon-btn .icon-btn-cost .star-ico {
  font-size: 0.7em;
  line-height: 1;
}
.profile-blurb { margin: 8px 0 6px; font-size: 0.88rem; line-height: 1.4; }
.profile-body {
  font-size: 0.8rem;
  line-height: 1.4;
  white-space: pre-wrap;
  /* Full text scrolls with .profile-scroll; no inner max-height clip */
  max-height: none;
  overflow: visible;
  margin-bottom: 4px;
}
.profile-life {
  margin: 12px 0 4px;
  padding-top: 12px;
  border-top: 1px solid color-mix(in srgb, var(--hint, #888) 28%, transparent);
  font-size: 0.82rem;
  line-height: 1.45;
  /* Same muted tone as field labels / .life-label */
  color: var(--hint, #999);
}
.profile-life .life-line { margin: 0 0 4px; color: inherit; }
.profile-life .life-label {
  color: inherit;
  font-weight: 500;
}

/* Fullscreen lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 260; /* above game/profile card sheets (200) */
  background: rgba(0, 0, 0, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 12px;
  padding: 48px 64px 56px;
}
.lightbox-like-btn {
  position: absolute;
  right: 14px;
  bottom: 14px;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(12, 12, 18, 0.55);
  color: #fff;
  cursor: pointer;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 700;
}
.lightbox-like-btn.hidden {
  display: none !important;
}
.lightbox-like-btn.is-on {
  color: #fb7185;
  border-color: color-mix(in srgb, #fb7185 50%, rgba(255, 255, 255, 0.2));
}
.lightbox-like-btn svg {
  width: 20px;
  height: 20px;
  display: block;
}
.lightbox-like-count {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.lightbox-media {
  position: relative;
  max-width: 100%;
  max-height: calc(100vh - 100px);
  display: flex;
  align-items: center;
  justify-content: center;
}
.lightbox img,
.lightbox-video {
  max-width: min(96vw, 100%);
  max-height: calc(100vh - 100px);
  object-fit: contain;
  border-radius: 4px;
  user-select: none;
}
.lightbox-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  pointer-events: none;
  z-index: 2;
}
.lightbox-video.hidden {
  display: none !important;
}
.lightbox-nav {
  z-index: 5;
}
.lightbox-close {
  position: absolute;
  top: 12px;
  right: 16px;
  width: 44px;
  height: 44px;
  border: none;
  background: transparent;
  color: #fff;
  font-size: 2rem;
  cursor: pointer;
  line-height: 1;
}
.lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 64px;
  border: none;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-size: 2rem;
  cursor: pointer;
}
.lightbox-nav:hover { background: rgba(255, 255, 255, 0.16); }
.lightbox-nav.prev { left: 12px; }
.lightbox-nav.next { right: 12px; }
.lightbox-meta {
  position: absolute;
  bottom: 16px;
  left: 0;
  right: 0;
  text-align: center;
  color: #ddd;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  pointer-events: none;
}
/* Same dot style as profile card (override absolute positioning from .slide-dots). */
.lightbox-dots {
  position: static;
  left: auto;
  right: auto;
  bottom: auto;
  display: flex;
  justify-content: center;
  gap: 7px;
  pointer-events: none;
  z-index: auto;
}
.lightbox-dots .slide-dot {
  width: 8px;
  height: 8px;
  background: rgba(255, 255, 255, 0.35);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);
}
.lightbox-dots .slide-dot.active {
  background: #fff;
  transform: scale(1.15);
}
.lightbox-dots .slide-dot.is-private {
  background: rgba(255, 255, 255, 0.22);
  box-shadow: inset 0 0 0 1px rgba(255, 200, 120, 0.4), 0 0 0 1px rgba(0, 0, 0, 0.2);
}
.lightbox-dots .slide-dot.is-private.active {
  background: #ffd9a8;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);
  transform: scale(1.15);
}
.lightbox-dots .slide-dot-sep {
  width: 1px;
  height: 10px;
  margin: 0 4px;
  border-radius: 1px;
  background: rgba(255, 255, 255, 0.5);
  flex-shrink: 0;
  align-self: center;
}
.lightbox-hint {
  opacity: 0.65;
  font-size: 0.78rem;
}

/* —— Forms / settings —— */
.panel {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 16px;
  max-width: 520px;
}
.create-form label {
  display: block;
  margin-bottom: 12px;
  font-size: 0.85rem;
  color: var(--hint);
}
.create-form input,
.create-form select,
.create-form textarea,
.settings-block textarea {
  display: block;
  width: 100%;
  margin-top: 6px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font: inherit;
  padding: 10px 12px;
}
.settings-block { margin: 16px 0; }
.settings-block .label {
  margin: 0 0 8px;
  font-size: 0.85rem;
  color: var(--hint);
}
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  border: 1px solid color-mix(in srgb, var(--hint) 35%, transparent);
  background: transparent;
  color: var(--text);
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 0.9rem;
  cursor: pointer;
  font: inherit;
}
.chip.active {
  background: var(--btn);
  border-color: transparent;
  color: var(--btn-text);
}
.actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.actions.col { flex-direction: column; align-items: stretch; max-width: 280px; }

.btn {
  appearance: none;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text);
  border-radius: 10px;
  padding: 10px 14px;
  font: inherit;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.btn.primary { background: var(--btn); border-color: transparent; color: var(--btn-text); }
.btn.primary:hover { background: var(--btn-hover); }
.btn.ghost { background: transparent; }
.btn.sm { padding: 6px 10px; font-size: 0.85rem; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn:hover:not(:disabled) { filter: brightness(1.06); }

.status { min-height: 1.2em; font-size: 0.9rem; color: var(--hint); margin: 8px 0; }
.status.err { color: var(--danger); }
.status.quota {
  color: #5c4a12;
  padding: 8px 10px;
  border-radius: 10px;
  background: color-mix(in srgb, #f5e6a8 70%, transparent);
  border: 1px solid color-mix(in srgb, #e0b03a 45%, transparent);
}

/* —— Mobile / tablet —— */
@media (max-width: 1100px) {
  .chat-workspace {
    grid-template-columns: minmax(180px, 32%) minmax(0, 1fr) minmax(220px, 264px);
  }
}
@media (max-width: 900px) {
  .chat-workspace {
    grid-template-columns: minmax(160px, 38%) minmax(0, 1fr);
  }
  /* Only hide the chat-workspace profile column — NOT companions-profile-pane
     (that node also has .chat-profile-pane and was invisible on mobile). */
  .chat-workspace > .chat-profile-pane {
    display: none;
  }
  .companions-workspace {
    grid-template-columns: 1fr;
  }
  .companions-profile-pane {
    border-left: none;
    border-top: 1px solid var(--border);
    max-height: 40vh;
  }
}

/* Phones + narrow mobile browsers */
/* Phone portrait, or phone landscape (short height → keep mobile UI, not desktop) */
@media (max-width: 768px), (orientation: landscape) and (max-height: 540px) and (max-width: 960px) {
  html, body {
    height: var(--app-height);
    max-height: var(--app-height);
    /* Landing (logged out) may still document-scroll via .view-login */
    overscroll-behavior: none;
    touch-action: pan-y;
  }
  /* Logged-in app only: pin body so the shell owns all scrolling */
  body.app-shell {
    overflow: hidden;
    position: fixed;
    inset: 0;
    width: 100%;
  }
  /* When soft keyboard open, keep shell aligned to visual viewport */
  body.app-shell .shell {
    top: var(--vv-offset-top, 0px);
    height: var(--app-height);
    max-height: var(--app-height);
  }
  /* Games compose: never let keyboard push the thread off-screen */
  body.app-shell #groupActive.group-active {
    min-height: 0;
    max-height: 100%;
  }
  body.app-shell #groupForm.chat-compose {
    position: relative;
    z-index: 6;
    flex-shrink: 0;
  }
  body.app-shell #groupMessages.chat-messages {
    overscroll-behavior: contain;
  }

  /* Landing must scroll independently when body isn't fixed */
  .view-login {
    min-height: var(--app-height);
    max-height: var(--app-height);
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .shell {
    flex-direction: column;
    height: var(--app-height);
    max-height: var(--app-height);
    overflow: hidden;
    padding-top: var(--safe-top);
    /* Shell fills the fixed body — no page scroll */
    position: absolute;
    inset: 0;
    width: 100%;
  }

  /* Content first; nav docks to bottom (thumb zone, always visible) */
  .shell-main {
    order: 1;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    width: 100%;
    display: flex;
    flex-direction: column;
  }
  .sidebar {
    order: 2;
    width: 100% !important;
    max-width: 100%;
    height: calc(var(--mobile-nav-h) + var(--safe-bottom));
    min-height: calc(var(--mobile-nav-h) + var(--safe-bottom));
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
    justify-content: flex-start;
    gap: 2px;
    border-right: none;
    border-bottom: none;
    border-top: 1px solid var(--border);
    padding: 4px 4px calc(4px + var(--safe-bottom));
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    background: var(--bg2);
    z-index: 60;
    flex-shrink: 0;
  }
  .sidebar::-webkit-scrollbar { display: none; }
  .sidebar-brand {
    display: none; /* free space for nav icons */
  }
  .sidebar-nav {
    flex-direction: row;
    flex-wrap: nowrap;
    flex: 1 1 auto;
    gap: 2px;
    min-width: 0;
    justify-content: space-around;
  }
  .sidebar-foot {
    flex-direction: row;
    flex-wrap: nowrap;
    flex: 0 0 auto;
    border-top: none;
    border-left: 1px solid var(--border);
    padding: 0 0 0 4px;
    gap: 2px;
    align-items: stretch;
  }
  .user-chip,
  .nav-coin-badge,
  .sidebar-user-row { display: none !important; }

  /* Primary bar: Chat / Companions / Create + More only */
  .mobile-more-toggle {
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    min-width: 52px;
    max-width: 72px;
    min-height: 48px;
    padding: 4px 6px;
    border-radius: 10px;
  }
  .mobile-more-toggle .nav-icon {
    font-size: 1.35rem;
    line-height: 1;
    letter-spacing: 0.05em;
  }

  /* Management set slides up as a bottom sheet.
     IMPORTANT: sheet lives inside .sidebar (z-index 60). Without raising the
     sidebar stacking context, .mobile-more-backdrop (z 85) sits ON TOP and
     steals all taps — items look open but nothing is clickable. */
  .sidebar-mgmt {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 110;
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: min(72vh, 420px);
    padding: 8px 12px calc(16px + var(--safe-bottom));
    background: var(--bg2);
    border: 1px solid var(--border);
    border-bottom: none;
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.45);
    transform: translateY(110%);
    transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    pointer-events: none;
    /* Ensure taps hit buttons, not a transparent parent */
    touch-action: manipulation;
  }
  body.mobile-more-open .sidebar {
    /* Lift whole sidebar subtree above the dimmed backdrop */
    z-index: 100;
    overflow: visible;
  }
  body.mobile-more-open .sidebar-foot {
    overflow: visible;
  }
  body.mobile-more-open .sidebar-mgmt {
    transform: translateY(0);
    pointer-events: auto;
    z-index: 110;
  }
  .mobile-more-grab {
    display: block;
    width: 40px;
    height: 4px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--hint) 45%, transparent);
    margin: 4px auto 8px;
  }
  /* Explicit safety toggle — above Account & help (same control as footer) */
  .mobile-more-safety {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 0 10px;
    padding: 0 4px 10px;
    border-bottom: 1px solid color-mix(in srgb, var(--hint) 14%, transparent);
  }
  .mobile-more-safety .safety-control {
    width: 100%;
    max-width: 320px;
    justify-content: stretch;
    gap: 0.5rem;
  }
  .mobile-more-safety .safety-toggle {
    transform: none;
    flex: 1 1 auto;
    width: auto;
    justify-content: stretch;
  }
  .mobile-more-safety .safety-opt {
    flex: 1 1 0;
    justify-content: center;
    padding: 0.5rem 0.45rem;
    font-size: 0.8rem;
  }
  .mobile-more-title {
    display: block;
    margin: 0 4px 8px;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--hint);
    letter-spacing: 0.02em;
    text-transform: uppercase;
  }
  .sidebar-mgmt .nav-item {
    flex-direction: row;
    justify-content: flex-start;
    gap: 12px;
    min-width: 0;
    max-width: none;
    width: 100%;
    min-height: 48px;
    padding: 12px 14px;
    border-radius: 12px;
    text-align: left;
  }
  .sidebar-mgmt .nav-label {
    display: block !important;
    opacity: 1 !important;
    font-size: 0.95rem;
    max-width: none;
    overflow: visible;
  }
  .sidebar-mgmt .nav-icon {
    width: 28px;
    font-size: 1.15rem;
    text-align: center;
  }
  .sidebar-mgmt .nav-item.logout {
    margin-top: 6px;
    border-top: 1px solid var(--border);
    border-radius: 0 0 12px 12px;
    color: var(--hint);
  }

  .mobile-more-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    /* Below open sidebar/sheet (100/110), above app content */
    z-index: 95;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
    -webkit-tap-highlight-color: transparent;
  }
  body.mobile-more-open .mobile-more-backdrop {
    opacity: 1;
    pointer-events: auto;
  }
  body.mobile-more-open {
    /* sheet open: still lock page scroll */
    overflow: hidden;
  }

  .nav-item {
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    min-width: 52px;
    max-width: 72px;
    min-height: 48px;
    padding: 4px 6px;
    border-radius: 10px;
  }
  .nav-icon { width: 22px; font-size: 1.05rem; }
  .nav-icon-svg svg { width: 20px; height: 20px; }
  .nav-label {
    display: block !important;
    opacity: 1 !important;
    font-size: 0.62rem;
    line-height: 1.1;
    white-space: nowrap;
    max-width: 4.5rem;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .nav-item.logout .nav-label { font-size: 0.58rem; }

  .main {
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    max-height: 100%;
    padding: 12px 12px calc(12px + var(--safe-bottom));
    /* Settings / create / legal pages scroll inside .main (body is fixed) */
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    touch-action: pan-y;
  }
  .main:has(.page-chats-workspace:not(.hidden)),
  .main:has(.page-companions-workspace:not(.hidden)),
  .main:has(.page-groups-workspace:not(.hidden)),
  .main:has(.page-home:not(.hidden)) {
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }

  /* Scrollable non-workspace pages (settings, create, support, terms, …) */
  .main > .page:not(.hidden):not(.page-chats-workspace):not(.page-companions-workspace):not(.page-groups-workspace):not(.page-home) {
    min-height: min-content;
    padding-bottom: 24px;
  }

  .page-chats-workspace,
  .page-companions-workspace,
  .page-groups-workspace,
  .page-home {
    flex: 1;
    min-height: 0;
    height: 100%;
    max-height: 100%;
  }

  .group-workspace {
    height: 100%;
    min-height: 0;
    max-height: 100%;
  }

  .chat-workspace {
    grid-template-columns: 1fr;
    height: 100%;
    min-height: 0;
    max-height: 100%;
  }

  /* Conversation list when idle */
  .chat-list-pane {
    max-height: none;
    height: 100%;
    min-height: 0;
    border-right: none;
    border-bottom: none;
  }

  /* Open chat: hide list so compose fits above browser chrome + bottom nav */
  .chat-workspace:has(#chatActive:not(.hidden)) .chat-list-pane {
    display: none;
  }
  .chat-center-pane {
    min-height: 0;
    height: 100%;
    max-height: 100%;
  }
  .chat-active {
    height: 100%;
    min-height: 0;
    max-height: 100%;
  }
  .chat-thread {
    flex: 1;
    min-height: 0;
  }
  .chat-messages {
    padding: 12px 12px 8px;
  }
  .chat-compose {
    --autoplay-inset-right: max(5px, calc(var(--safe-right) / 2));
    padding: 8px 10px;
    padding-bottom: max(8px, var(--safe-bottom));
    padding-right: var(--autoplay-inset-right);
    /* Bottom nav is in flow below shell-main — no extra offset needed */
  }
  .chat-compose textarea {
    /* Match bubble text (0.92rem); iOS may zoom slightly on focus */
    font-size: 0.92rem;
    line-height: 1.4;
    min-height: 80px;
  }
  .chat-compose .btn {
    min-height: 44px;
    padding: 10px 14px;
  }

  /* Companions: full-width grid; profile opens as full-screen sheet on tap */
  .companions-workspace {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0, 1fr);
    height: 100%;
    overflow: hidden;
  }
  .companions-main {
    min-height: 0;
    height: 100%;
    max-height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    /* Miniapp-like side padding */
    padding: 10px 10px 0;
  }
  .companions-sticky-head {
    flex: 0 0 auto;
    position: relative;
    z-index: 6;
    background: transparent;
    padding: 0 0 10px;
  }
  /*
   * Profiles toolbar (phones): one line — All · Following · Mine + compact search.
   * Tap search to expand full width; filters reappear when search collapses.
   */
  .companions-toolbar {
    flex-wrap: nowrap;
    align-items: center;
    gap: 6px;
    width: 100%;
    min-width: 0;
  }
  .companions-filters-line {
    flex: 1 1 auto;
    min-width: 0;
    /* Never clip Following/Mine — scroll chips horizontally if needed */
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    gap: 6px;
  }
  .companions-filters-line::-webkit-scrollbar {
    display: none;
    height: 0;
  }
  .companions-filters {
    display: flex;
    flex-wrap: nowrap;
    gap: 5px;
    flex: 0 0 auto;
    min-width: max-content;
    width: max-content;
  }
  .companions-filters .chip {
    flex: 0 0 auto;
    padding: 6px 10px;
    font-size: 0.8rem;
    white-space: nowrap;
  }
  /* Always keep Following / Mine visible (do not soft-hide with .hidden) */
  .companions-filters .chip[data-filter="following"],
  .companions-filters .chip[data-filter="mine"] {
    display: inline-flex !important;
    visibility: visible !important;
  }
  .companions-filters .chip[data-filter="following"][hidden],
  .companions-filters .chip[data-filter="mine"][hidden] {
    display: inline-flex !important;
  }
  /* Count soft-hides on narrow so filters never wrap off-screen */
  .companions-list-count {
    display: none !important;
  }
  .companions-search-wrap {
    flex: 0 0 40px;
    width: 40px;
    min-width: 40px;
    max-width: 40px;
    transition:
      flex-basis 0.18s ease,
      width 0.18s ease,
      max-width 0.18s ease,
      min-width 0.18s ease;
  }
  .companions-search {
    width: 100%;
    min-height: 40px;
    padding: 8px 8px 8px 32px;
    font-size: 16px; /* avoid iOS focus zoom */
    background-position: 10px 50%;
    cursor: pointer;
  }
  /* Collapsed: hide placeholder so only the magnifier shows */
  .companions-toolbar:not(.is-search-open) .companions-search::placeholder {
    color: transparent;
  }
  .companions-toolbar:not(.is-search-open) .companions-search {
    color: transparent;
    caret-color: transparent;
  }
  /* Expanded: search takes the full toolbar row */
  .companions-toolbar.is-search-open .companions-filters-line {
    display: none;
  }
  .companions-toolbar.is-search-open .companions-search-wrap {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    max-width: none;
  }
  .companions-toolbar.is-search-open .companions-search {
    color: var(--text);
    caret-color: var(--text);
    cursor: text;
    padding: 8px 12px 8px 36px;
    background-position: 12px 50%;
  }
  .companions-toolbar.is-search-open .companions-search::placeholder {
    color: var(--hint);
  }
  .companions-list-wrap {
    flex: 1 1 0;
    min-height: 0;
  }
  .companions-list-scroll {
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    /* Match miniapp list gutters */
    padding: 0 2px max(16px, var(--safe-bottom));
  }
  /* Miniapp-style profile list: always 2 columns on phones */
  .companions-grid {
    overflow: visible;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    align-items: stretch;
  }
  .comp-card {
    height: 100%;
    min-height: 100%;
    contain-intrinsic-size: auto 280px;
  }
  .comp-card-media {
    /* Miniapp list media ratio */
    aspect-ratio: 2 / 3;
    flex: 0 0 auto;
  }
  .comp-meta {
    padding: 8px 10px 10px;
  }
  .comp-meta .name {
    font-size: 0.95rem;
  }
  .comp-meta .blurb {
    font-size: 0.75rem;
    margin-top: 2px;
  }
  .comp-actions .btn,
  .comp-actions .comp-card-chat-btn {
    padding: 7px 6px;
    font-size: 0.78rem;
  }
  .follow-tag {
    font-size: 0.65rem;
    padding: 2px 6px;
  }
  .companions-profile-pane {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 75;
    max-height: none !important;
    width: 100%;
    border: none;
    border-top: none;
    background: var(--bg);
    display: flex;
    flex-direction: column;
    /* Off-screen until .is-open */
    transform: translateY(110%);
    transition: transform 0.28s cubic-bezier(0.22, 0.61, 0.36, 1);
    pointer-events: none;
    padding-top: var(--safe-top);
    padding-bottom: max(12px, var(--safe-bottom));
    box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.4);
  }
  .companions-profile-pane.is-open {
    transform: translateY(0);
    pointer-events: auto;
    z-index: 200;
  }
  .companions-profile-pane .comp-profile-mobile-bar,
  .companions-profile-pane .profile-sheet-head {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-shrink: 0;
    padding: 10px 12px;
    padding-top: max(10px, var(--safe-top));
    border-bottom: 1px solid var(--border);
    background: var(--bg2);
  }
  .companions-profile-pane .comp-profile-mobile-title,
  .companions-profile-pane .profile-sheet-title {
    flex: 1;
    min-width: 0;
    margin: 0;
    font-size: 1.05rem;
    font-weight: 650;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .companions-profile-pane .profile-sheet-close {
    display: inline-flex !important;
  }
  /* Full-screen over blank bottom nav (same as Games card) */
  body.comp-profile-sheet-open .sidebar,
  body.comp-profile-sheet-open .mobile-more-backdrop {
    visibility: hidden !important;
    pointer-events: none !important;
    opacity: 0 !important;
  }
  body.comp-profile-sheet-open .companions-profile-pane.is-open {
    z-index: 200 !important;
    padding-bottom: max(12px, var(--safe-bottom)) !important;
  }
  /*
   * Mobile sheet: owner management bar stays at bottom of the sheet;
   * gallery + bio scroll in .profile-scroll above it.
   */
  .companions-profile-pane {
    overflow: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-y;
  }
  .companions-profile-pane .chat-profile,
  .companions-profile-pane .chat-empty-state {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  .companions-profile-pane .profile-scroll {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 12px 14px 8px;
  }
  /*
   * Full image visible (contain, not cover). Gallery fills sheet width;
   * tap / double-tap opens true fullscreen lightbox for uncropped viewing.
   */
  .companions-profile-pane .profile-scroll {
    container-type: inline-size;
    padding-top: 4px !important;
    padding-left: 4px !important;
    padding-right: 4px !important;
  }
  .companions-profile-pane .profile-slideshow {
    position: relative !important;
    top: auto !important;
    z-index: 1;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    height: auto;
    aspect-ratio: 2 / 3;
    max-height: min(78vh, calc((100vw - 16px) * 3 / 2));
    min-height: 160px;
    margin-bottom: 12px;
    flex-shrink: 0;
    overflow: hidden;
    border-radius: 14px;
    background: #0a0a0e;
    display: block !important;
  }
  @supports (height: 1cqi) {
    .companions-profile-pane .profile-slideshow {
      aspect-ratio: auto;
      height: min(calc(100cqi * 3 / 2), 78vh);
      max-height: none;
    }
  }
  .companions-profile-pane .profile-photo {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    max-height: none;
    min-height: 0 !important;
    aspect-ratio: unset !important;
    margin: 0;
    object-fit: cover;
    object-position: center top;
    display: block;
  }
  .companions-profile-pane .profile-video {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: cover;
    object-position: center top;
  }
  /* Always show prev/next on touch devices (no hover) */
  .companions-profile-pane .profile-slideshow .slide-nav {
    opacity: 0.85;
  }
  /* No desktop “double-click” hint on the mobile sheet */
  .companions-profile-pane .slide-hint {
    display: none !important;
  }
  .companions-profile-pane .profile-owner-actions {
    position: relative !important;
    bottom: auto !important;
    top: auto !important;
    flex-shrink: 0;
    /* Keep pinned under scroll body on mobile sheet */
    margin-top: 0;
    margin-bottom: 0;
    border-top: 1px solid var(--border);
  }
  .companions-profile-pane.is-open .chat-profile,
  .companions-profile-pane .chat-profile {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 1 1 auto;
  }
  .companions-profile-pane .profile-scroll {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
  }

  /* Chat: profile arrow next to delete (mobile sheet only) */
  .chat-profile-view-btn,
  .chatroom-head-actions .chat-profile-view-btn,
  .chatroom-head-actions .icon-btn.chat-profile-view-btn {
    display: inline-flex !important;
  }
  .chat-workspace.chat-profile-open .chat-profile-view-btn svg {
    transform: rotate(90deg);
  }
  .chat-profile-view-btn svg {
    transition: transform 0.18s ease;
  }
  /* Chat: profile full-screen sheet (arrow or avatar) */
  .chat-workspace > .chat-profile-pane {
    display: none;
  }
  .chat-workspace > .chat-profile-pane .profile-sheet-head {
    display: none;
  }
  .chat-workspace > .chat-profile-pane.is-open {
    display: flex !important;
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    z-index: 200 !important;
    max-height: none !important;
    width: 100% !important;
    height: 100% !important;
    border: none !important;
    background: var(--bg) !important;
    flex-direction: column !important;
    padding: 0 !important;
    padding-bottom: max(12px, var(--safe-bottom)) !important;
    pointer-events: auto !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  .chat-workspace > .chat-profile-pane.is-open .profile-sheet-head {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-shrink: 0;
    padding: 10px 12px;
    padding-top: max(10px, var(--safe-top));
    border-bottom: 1px solid var(--border);
    background: var(--bg2);
  }
  .chat-workspace > .chat-profile-pane.is-open .profile-sheet-title {
    font-size: 0.95rem;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  body.chat-profile-sheet-open .sidebar,
  body.chat-profile-sheet-open .mobile-more-backdrop {
    visibility: hidden !important;
    pointer-events: none !important;
    opacity: 0 !important;
  }
  .chat-workspace > .chat-profile-pane.is-open .chat-profile {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }
  .chat-workspace > .chat-profile-pane.is-open .profile-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .chat-workspace > .chat-profile-pane.is-open .profile-owner-actions,
  .chat-workspace > .chat-profile-pane.is-open .profile-owner-id,
  .chat-workspace > .chat-profile-pane.is-open .bond-meter {
    flex-shrink: 0;
  }
  .chat-workspace > .chat-profile-pane.is-open .profile-scroll {
    container-type: inline-size;
    padding-top: 4px !important;
    padding-left: 4px !important;
    padding-right: 4px !important;
  }
  .chat-workspace > .chat-profile-pane.is-open .profile-slideshow {
    position: relative !important;
    top: auto !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    height: auto;
    aspect-ratio: 2 / 3;
    max-height: min(78vh, calc((100vw - 16px) * 3 / 2));
    min-height: 160px;
    overflow: hidden;
    display: block !important;
    background: #0a0a0e;
  }
  @supports (height: 1cqi) {
    .chat-workspace > .chat-profile-pane.is-open .profile-slideshow {
      aspect-ratio: auto;
      height: min(calc(100cqi * 3 / 2), 78vh);
      max-height: none;
    }
  }
  .chat-workspace > .chat-profile-pane.is-open .profile-photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-height: none;
    min-height: 0 !important;
    aspect-ratio: unset !important;
    object-fit: cover;
    object-position: center top;
  }
  .chat-workspace > .chat-profile-pane.is-open .profile-video {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain;
    object-position: center center;
  }
  .chat-workspace > .chat-profile-pane.is-open .slide-hint {
    display: none !important;
  }
  .chat-workspace > .chat-profile-pane.is-open .profile-owner-actions {
    position: relative !important;
    bottom: auto !important;
    flex-shrink: 0;
  }

  .site-footer {
    display: none; /* use Terms in bottom nav; frees vertical space */
  }

  .bubble { max-width: 88%; }
  .lightbox {
    padding: 40px 12px calc(48px + var(--safe-bottom));
  }
  .lightbox-nav { width: 40px; height: 48px; font-size: 1.5rem; }
  .lightbox-meta {
    bottom: max(12px, var(--safe-bottom));
  }

  .page-head h2 { font-size: 1.25rem; }
  .create-wizard-2col,
  .settings-layout {
    grid-template-columns: 1fr;
  }
  .settings-col-photo,
  .settings-col-left.settings-col-photo,
  .settings-col-liked {
    position: static;
    top: auto;
    height: auto;
    max-height: none;
  }
  .settings-col-liked {
    width: 100%;
    min-height: min(70vh, 640px);
  }
  .settings-liked-rail {
    width: 100%;
    max-height: none;
    min-height: min(64vh, 580px);
    height: min(70vh, 640px);
  }
}

/* —— Chat list (comfortable — ~2× the ultra-tiny size) —— */
.chat-list-pane { padding: 10px 8px; }
.page-head.compact h2 { font-size: 1.05rem; }
.chats-list { gap: 4px; }
.chat-row {
  gap: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  min-height: 0;
}
.chat-row img {
  width: 48px;
  height: 48px;
  border-radius: 10px;
}
.chat-row-top strong { font-size: 0.92rem; font-weight: 600; }
.chat-row-top time { font-size: 0.72rem; }
.chat-preview {
  font-size: 0.78rem;
  line-height: 1.3;
  -webkit-line-clamp: 2;
}
.chatroom-head {
  justify-content: space-between;
}
/* Single trailing icon (e.g. 1:1 chat delete) */
.chatroom-head > .icon-btn {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--hint) 30%, transparent);
  background: transparent;
  color: var(--hint);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.chatroom-head > .icon-btn svg {
  width: 18px;
  height: 18px;
  display: block;
}
.chatroom-head > .icon-btn:hover,
.chatroom-head > .icon-btn.danger:hover {
  color: #ff8a8a;
  border-color: color-mix(in srgb, #e55 50%, transparent);
}
.btn.danger {
  background: transparent;
  border-color: color-mix(in srgb, #e55 55%, var(--hint));
  color: #ff8a8a;
}
.btn.danger:hover { background: color-mix(in srgb, #e55 18%, transparent); }
.btn.block { width: 100%; display: flex; }
.create-form-actions {
  display: flex;
  gap: 10px;
  align-items: stretch;
  margin-top: 4px;
}
.create-form-actions-with-tools {
  flex-wrap: wrap;
}
.create-form-tools {
  display: flex;
  gap: 6px;
  align-items: center;
  flex: 0 0 auto;
}
.create-form-tools .icon-btn {
  width: 40px;
  height: 40px;
}
.create-form-actions #btnCreateBack,
.create-form-actions #btnCreateFormBack {
  flex: 0 0 auto;
  min-width: 5.5rem;
  align-self: stretch;
}
.create-form-actions #btnCreateBack[hidden],
.create-form-actions #btnCreateFormBack[hidden] {
  display: none !important;
}
.create-form-actions #btnPreview {
  flex: 1;
  width: auto;
  min-width: 0;
}

/* Settings (miniapp parity) */
.settings-panel { max-width: 520px; }
.settings-card p { margin: 0.35em 0; font-size: 0.95rem; }
.settings-gender-block { margin: 16px 0; }
.settings-photo-label {
  margin: 0 0 8px;
  font-size: 0.85rem;
  color: var(--hint);
}
.col-actions { flex-direction: column; align-items: stretch; max-width: 320px; gap: 8px; margin: 12px 0; }
.col-actions .btn { width: 100%; }
.tip { margin-top: 8px; font-size: 0.8rem; color: var(--hint); }
.settings-photo-wrap {
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid color-mix(in srgb, var(--hint) 22%, transparent);
}
.settings-photo {
  width: 100%;
  max-width: 220px;
  aspect-ratio: 2 / 3;
  object-fit: contain;
  object-position: center top;
  border-radius: 12px;
  background: #111;
  display: block;
  margin: 0 auto 10px;
  border: 1px solid color-mix(in srgb, var(--hint) 25%, transparent);
}
.settings-look-text {
  font-size: 0.85rem;
  margin: 8px 0 10px;
  line-height: 1.4;
  white-space: pre-wrap;
}
.settings-look-editor { margin-top: 10px; }
.look-edit-row textarea { min-height: 72px; }

/* Terms (legacy setup consent list) */
.terms-panel { max-width: none; }
.terms-list {
  margin: 0;
  padding: 0 0 0 1.15em;
  font-size: 0.9rem;
  color: var(--hint);
  line-height: 1.5;
}
.terms-list li { margin-bottom: 10px; }

/* Legal reading layout — same page-head as My Profile; TOC left, content right */
.page-legal {
  max-width: 980px;
  margin: 0 auto;
  width: 100%;
}
/* Match Profile: normal in-flow page-head (no sticky bar over scrolling text). */
.page-legal > .page-head {
  margin-bottom: 18px;
  padding: 0;
  position: static;
  background: transparent;
  border: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  text-align: left;
  align-items: flex-start;
}
.page-legal > .page-head h2 {
  margin: 0 0 4px;
  font-size: 1.45rem;
  font-weight: 650;
  letter-spacing: -0.02em;
}
.page-legal > .page-head #privacyUpdated,
.page-legal > .page-head .muted {
  margin: 0;
}
/* Legacy sticky legal-head classes (if any remain) → profile-style, not overlay */
.page-legal > .page-head-legal,
.page-legal > .legal-head-center {
  position: static;
  top: auto;
  z-index: auto;
  margin: 0 0 18px;
  padding: 0;
  background: transparent;
  border: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  text-align: left;
  align-items: flex-start;
  max-width: none;
}
.page-legal > .page-head-legal h2,
.page-legal > .legal-head-center h2 {
  margin: 0 0 4px;
  font-size: 1.45rem;
}
.page-legal > .page-head-legal #privacyUpdated,
.page-legal > .legal-head-center #privacyUpdated {
  margin: 0;
}
.legal-layout {
  display: grid;
  grid-template-columns: minmax(160px, 220px) minmax(0, 1fr);
  gap: 18px 22px;
  align-items: start;
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
}
.legal-toc {
  position: sticky;
  top: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 8px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--hint) 18%, transparent);
  background: color-mix(in srgb, var(--card, var(--sec, #1a1a22)) 88%, transparent);
  max-height: min(70vh, 560px);
  overflow-y: auto;
  scrollbar-width: thin;
}
.legal-toc-link {
  display: block;
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  color: var(--hint);
  font: inherit;
  font-size: 0.82rem;
  line-height: 1.35;
  padding: 8px 10px;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}
.legal-toc-link:hover {
  color: var(--text);
  background: color-mix(in srgb, var(--hint) 12%, transparent);
}
.legal-toc-link.is-active {
  color: var(--text);
  background: color-mix(in srgb, var(--accent, #7c6af5) 16%, transparent);
  font-weight: 600;
}
.legal-toc-link.legal-toc-sub {
  padding-left: 18px;
  font-size: 0.78rem;
  opacity: 0.92;
}
.legal-panel.terms-panel,
#page-terms .legal-panel,
#page-privacy .legal-panel {
  max-width: none;
  min-height: 200px;
}
.legal-sec {
  /* Room for sticky TOC / mobile chrome — not a floating page title bar */
  scroll-margin-top: 12px;
  padding-bottom: 4px;
}
.legal-sec + .legal-sec {
  margin-top: 1.35em;
  padding-top: 1.15em;
  border-top: 1px solid color-mix(in srgb, var(--hint) 14%, transparent);
}
.legal-sec h3 {
  margin: 0 0 0.55em;
  font-size: 1.08rem;
  font-weight: 650;
  color: var(--text);
  letter-spacing: -0.01em;
}
.legal-subsec {
  margin-top: 1em;
  padding: 10px 12px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--hint) 7%, transparent);
  border: 1px solid color-mix(in srgb, var(--hint) 10%, transparent);
}
.legal-subsec h4 {
  margin: 0 0 0.4em;
  font-size: 0.95rem;
  font-weight: 650;
  color: var(--text);
}
.legal-panel p {
  margin: 0 0 0.75em;
}
.legal-panel p:last-child {
  margin-bottom: 0;
}
.legal-panel ul {
  margin: 0.15em 0 0.85em;
  padding-left: 1.2em;
}
.legal-panel li {
  margin-bottom: 0.45em;
}
.legal-panel li:last-child {
  margin-bottom: 0;
}
@media (max-width: 760px) {
  .legal-layout {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  /* Mobile browser: no Terms/Privacy table of contents */
  .legal-toc,
  #termsToc,
  #privacyToc {
    display: none !important;
  }
}

/* Create wizard */
.create-wizard { max-width: 560px; }
.create-backstory-section {
  margin-top: 4px;
}
.create-backstory-section .create-backstory-row {
  margin-top: 4px;
}
.create-backstory-section .create-backstory-row input {
  width: 100%;
  flex: 1;
}
.field-label {
  display: block;
  margin-bottom: 14px;
  font-size: 0.85rem;
  color: var(--hint);
}
.field-label input {
  display: block;
  width: 100%;
  margin-top: 6px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font: inherit;
  padding: 10px 12px;
}
.field-row {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin-top: 6px;
}
.field-row input,
.field-row textarea {
  flex: 1;
  margin-top: 0;
  min-width: 0;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font: inherit;
  padding: 10px 12px;
}
.icon-btn {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--hint) 30%, transparent);
  background: transparent;
  color: var(--hint);
  font-size: 1.1rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.icon-btn:hover { color: var(--text); border-color: color-mix(in srgb, var(--btn) 50%, transparent); }
.icon-btn.busy, .field-random.busy { opacity: 0.45; pointer-events: none; }
textarea.is-thinking {
  opacity: 0.85;
  font-style: italic;
  color: var(--muted, #9a9aab);
}

.card-section {
  margin: 12px 0;
  padding: 14px;
  border-radius: var(--radius);
  background: var(--card);
  border: 1px solid color-mix(in srgb, var(--hint) 22%, transparent);
}
.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.section-title { margin: 0; font-size: 1.05rem; font-weight: 650; }
.section-tip { margin: 6px 0 10px; font-size: 0.85rem; color: var(--hint); }

.picker-list { display: flex; flex-direction: column; gap: 6px; }
.picker-row-wrap.ethnicity-lock-row {
  display: flex;
  align-items: stretch;
  gap: 6px;
}
.picker-row-wrap.ethnicity-lock-row .picker-row {
  flex: 1;
  min-width: 0;
}
.ethnicity-lock-btn {
  flex: 0 0 auto;
  width: 42px;
  min-width: 42px;
  align-self: stretch;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--hint) 30%, transparent);
  background: var(--bg);
  cursor: pointer;
  font-size: 1.05rem;
  line-height: 1;
  padding: 0;
}
.ethnicity-lock-btn.is-locked {
  border-color: color-mix(in srgb, var(--btn) 45%, transparent);
  background: color-mix(in srgb, var(--btn) 14%, var(--bg));
}
.ethnicity-lock-btn.is-unlocked {
  opacity: 0.85;
}
.ethnicity-lock-btn:hover {
  border-color: var(--btn);
}
.ethnicity-lock-ico { pointer-events: none; }
.picker-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--hint) 28%, transparent);
  background: var(--bg);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.picker-label { font-weight: 550; }
.picker-value {
  color: var(--hint);
  font-size: 0.92rem;
  max-width: 55%;
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.picker-value.has-val { color: var(--text); font-weight: 500; }
.picker-row::after {
  content: "›";
  color: var(--hint);
  font-size: 1.2rem;
  margin-left: 2px;
}

.preset-track {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 4px 2px 12px;
  margin: 0 -4px;
}
.preset-track::-webkit-scrollbar { display: none; }
.preset-card {
  flex: 0 0 78%;
  max-width: 280px;
  scroll-snap-align: center;
  padding: 14px;
  border-radius: 14px;
  border: 1.5px solid color-mix(in srgb, var(--hint) 30%, transparent);
  background: var(--bg);
  cursor: pointer;
  color: inherit;
  font: inherit;
  text-align: left;
}
.preset-card.selected {
  border-color: var(--btn);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--btn) 40%, transparent);
}
.preset-card h4 { margin: 0 0 6px; font-size: 1.05rem; }
.preset-card .preset-range {
  font-size: 0.72rem;
  color: var(--hint);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 6px;
}
.preset-card p {
  margin: 0;
  font-size: 0.88rem;
  color: color-mix(in srgb, var(--text) 88%, var(--hint));
  line-height: 1.35;
}
.preset-caption {
  margin: 0 0 10px;
  font-size: 0.85rem;
  color: var(--hint);
  min-height: 1.2em;
}

/* Create preview — mirrors public / guest companion split (photo 2:3 + details) */
.create-preview {
  width: min(960px, 100%);
  max-width: 960px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 20px 22px 22px;
  margin-top: 16px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.28);
}
.create-preview-split {
  display: grid;
  grid-template-columns: minmax(240px, 42%) minmax(0, 1fr);
  gap: 24px 32px;
  align-items: start;
}
.create-preview-media {
  position: relative;
  width: 100%;
  aspect-ratio: 2 / 3;
  border-radius: 18px;
  overflow: hidden;
  background: #111;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
}
.create-preview-media.hidden {
  display: none;
}
.create-preview-split:has(.create-preview-media.hidden) {
  grid-template-columns: 1fr;
}
.create-preview-wait {
  margin: 0.55rem 0 0;
  text-align: center;
  line-height: 1.35;
  max-width: 16rem;
}
.create-preview-wait.hidden {
  display: none !important;
}
.create-preview-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  background: #111;
}
.create-preview-photo[style*="display: none"],
.create-preview-photo.hidden {
  display: none !important;
}
.create-preview-details {
  text-align: left;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  min-height: 100%;
}
.create-preview-title {
  margin: 0 0 8px;
  font-size: 1.55rem;
  font-weight: 650;
  line-height: 1.2;
}
.create-preview-blurb {
  margin: 0 0 12px;
  font-size: 0.98rem;
  line-height: 1.45;
  color: color-mix(in srgb, var(--text) 90%, var(--hint));
}
.create-preview-blurb:empty,
.create-preview-blurb.hidden {
  display: none;
}
.create-preview-body,
.create-preview .profile {
  margin: 0 0 14px;
  font-size: 0.94rem;
  line-height: 1.55;
  color: var(--hint);
  white-space: pre-wrap;
}
.create-preview-life {
  margin: 0 0 16px;
  padding-top: 12px;
  border-top: 1px solid color-mix(in srgb, var(--hint) 22%, transparent);
  font-size: 0.9rem;
  line-height: 1.5;
}
.create-preview-life .life-line { margin: 0.35em 0; }
.create-preview-life .life-label {
  color: var(--hint);
  font-weight: 550;
  margin-right: 0.25em;
}
.create-preview-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: auto;
  padding-top: 8px;
}
.create-preview-actions .btn.is-waiting-photo,
.create-preview-actions .btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.create-preview-actions .btn {
  min-width: 8rem;
}
@media (max-width: 720px) {
  .create-preview {
    padding: 14px;
    border-radius: 16px;
  }
  .create-preview-split {
    grid-template-columns: 1fr;
    max-width: 420px;
    margin: 0 auto;
    gap: 16px;
  }
  .create-preview-media {
    max-width: 360px;
    margin: 0 auto;
  }
  .create-preview-title { font-size: 1.3rem; }
  .create-preview-actions {
    flex-direction: column;
  }
  .create-preview-actions .btn {
    width: 100%;
  }
}

/* Bottom sheet */
.sheet {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.sheet-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
}
.sheet-panel {
  position: relative;
  max-height: min(72vh, 560px);
  overflow: auto;
  padding: 8px 14px 18px;
  border-radius: 18px 18px 0 0;
  background: var(--bg2);
  border: 1px solid color-mix(in srgb, var(--hint) 25%, transparent);
  border-bottom: none;
}
.sheet-handle {
  width: 40px;
  height: 4px;
  border-radius: 99px;
  background: color-mix(in srgb, var(--hint) 50%, transparent);
  margin: 4px auto 12px;
}
.sheet-title { margin: 0 0 12px; font-size: 1.1rem; text-align: center; }
.sheet-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
  justify-content: center;
}
.sheet-chip {
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--hint) 35%, transparent);
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: 0.92rem;
  cursor: pointer;
}
.sheet-chip.active {
  border-color: var(--btn);
  background: color-mix(in srgb, var(--btn) 22%, var(--bg));
  font-weight: 600;
}

/* Age number roller (create appearance) */
.sheet-options.age-roller-host {
  display: block;
  flex-wrap: nowrap;
  justify-content: stretch;
  margin-bottom: 8px;
}
.age-roller {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
  max-width: 220px;
  margin: 0 auto;
}
.age-roller-nav {
  border: none;
  background: transparent;
  color: var(--hint);
  font-size: 1.1rem;
  line-height: 1;
  padding: 4px 16px;
  cursor: pointer;
}
.age-roller-nav:hover { color: var(--text); }
.age-roller-viewport {
  position: relative;
  width: 100%;
  height: 176px; /* 4 × item */
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  -webkit-overflow-scrolling: touch;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--hint) 28%, transparent);
  background: color-mix(in srgb, var(--bg) 92%, var(--btn));
  mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent);
}
.age-roller-list {
  padding: 66px 0; /* center first/last item in viewport */
}
.age-roller-item {
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  scroll-snap-align: center;
  font-size: 1.35rem;
  font-weight: 550;
  color: color-mix(in srgb, var(--text) 55%, var(--hint));
  cursor: pointer;
  user-select: none;
}
.age-roller-item.is-selected {
  color: var(--text);
  font-weight: 700;
  font-size: 1.55rem;
}
.age-roller-highlight {
  pointer-events: none;
  position: absolute;
  left: 8px;
  right: 8px;
  top: 50%;
  height: 44px;
  margin-top: -22px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--btn) 45%, transparent);
  background: color-mix(in srgb, var(--btn) 12%, transparent);
}
.age-roller-actions {
  display: flex;
  gap: 10px;
  width: 100%;
  margin-top: 4px;
}
.age-roller-actions .btn {
  flex: 1;
}

/* Confirm modal */
.modal {
  position: fixed;
  inset: 0;
  z-index: 150;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
}
.modal-sheet {
  position: relative;
  width: 100%;
  max-width: 380px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 20px 18px 16px;
}
.modal-sheet h3 { margin: 0 0 8px; font-size: 1.1rem; }
.confirm-body { margin: 0 0 16px; font-size: 0.92rem; line-height: 1.4; }
.confirm-body.hidden { display: none !important; }
/* Share needs video: inline animate/video icon opens the video dialog */
.confirm-body .share-need-video-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  margin: 0 2px;
  padding: 4px 6px;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--accent, #8b7cff) 40%, var(--border, #444));
  background: color-mix(in srgb, var(--accent, #8b7cff) 14%, transparent);
  color: var(--accent, #8b7cff);
  cursor: pointer;
  line-height: 0;
}
.confirm-body .share-need-video-ico svg {
  width: 18px;
  height: 18px;
  display: block;
}
.confirm-body .share-need-video-ico:hover {
  color: var(--text, #fff);
  border-color: color-mix(in srgb, var(--accent, #8b7cff) 65%, transparent);
  background: color-mix(in srgb, var(--accent, #8b7cff) 22%, transparent);
}
.confirm-body .share-earn-stars {
  display: inline;
  color: var(--hint, #999);
  font-size: 0.9em;
}
/* Confirm sheet private badge — never absolute (gallery .photo-private-tag covers text). */
.confirm-lead {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  margin: 0 0 14px;
}
.confirm-lead.hidden {
  display: none !important;
}
.confirm-lead .confirm-body {
  margin: 0;
  flex: 1 1 12rem;
  min-width: 0;
  font-size: 0.95rem;
  line-height: 1.4;
}
.confirm-private-tag {
  position: static !important;
  top: auto !important;
  left: auto !important;
  z-index: auto !important;
  display: inline-flex;
  flex: 0 0 auto;
  pointer-events: none;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fff;
  background: color-mix(in srgb, #1a1a1a 72%, transparent);
  border: 1px solid color-mix(in srgb, #fff 22%, transparent);
  line-height: 1.3;
}
.confirm-private-tag.hidden {
  display: none !important;
}
.confirm-duration {
  margin: 0 0 16px;
}
.confirm-duration.hidden {
  display: none !important;
}
.confirm-duration-label {
  display: block;
  font-size: 0.85rem;
  color: var(--hint);
  margin-bottom: 8px;
}
.confirm-duration-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.confirm-duration-row input[type="range"] {
  flex: 1;
  min-width: 0;
  accent-color: var(--btn);
}
.confirm-duration-val {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  min-width: 2.25rem;
  text-align: right;
}
.modal-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}
.modal-actions .btn.danger {
  background: color-mix(in srgb, #e55 70%, #400);
  border-color: transparent;
  color: #fff;
}

.bubble-text { white-space: pre-wrap; }
/* Photo-only bubbles (separate message from conversation text) */
.bubble.bubble-photo-only {
  padding: 6px;
  background: transparent;
  border: none;
  box-shadow: none;
}
.bubble.bubble-photo-only .bubble-photo,
.bubble.bubble-photo-only .bubble-photo-frame {
  margin-top: 0;
}
.bubble-photo-frame {
  position: relative;
  display: block;
  max-width: min(260px, 70vw);
  margin-top: 8px;
  border-radius: 12px;
  overflow: hidden;
  cursor: zoom-in;
  background: #111;
  line-height: 0;
}
/* In-thread generating.gif placeholder (chat portrait / game landscape). */
.bubble-photo-frame.is-pending-gen {
  min-width: min(200px, 55vw);
  min-height: 200px;
  background: #0d0d12;
  cursor: default;
}
.bubble-photo-frame.is-pending-gen.is-landscape {
  min-width: min(260px, 70vw);
  min-height: 140px;
  aspect-ratio: 16 / 9;
}
.bubble-photo-frame.is-pending-gen .bubble-photo[data-gen-gif="1"] {
  width: 100%;
  height: 100%;
  min-height: inherit;
  max-height: 360px;
  object-fit: cover;
  opacity: 1;
}
.bubble.bubble-photo-only.is-pending-photo {
  display: flex !important;
  align-self: flex-start;
}
.bubble-photo-frame .bubble-photo {
  display: block;
  width: 100%;
  max-width: min(260px, 70vw);
  max-height: 360px;
  height: auto;
  min-height: 80px;
  margin: 0;
  border-radius: 12px;
  object-fit: cover;
  cursor: zoom-in;
  background: #111;
}
.bubble-photo-frame .bubble-photo-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center center;
  border-radius: 12px;
  pointer-events: none;
  background: #111;
}
.bubble-photo-frame .bubble-photo-video.hidden {
  display: none !important;
}
.bubble-photo {
  display: block;
  max-width: min(260px, 70vw);
  max-height: 360px;
  width: auto;
  height: auto;
  min-height: 80px;
  border-radius: 12px;
  margin-top: 8px;
  cursor: zoom-in;
  background: #111;
  object-fit: cover;
}
/* User message photos stay right-aligned; assistant/system photos left (default) */
.bubble.user .bubble-photo,
.bubble.user .bubble-photo-frame { margin-left: auto; }
.bubble.assistant .bubble-photo,
.bubble.assistant .bubble-photo-frame,
.bubble.system.bubble-photo-only .bubble-photo,
.bubble.system.bubble-photo-only .bubble-photo-frame,
.bubble.bubble-photo-only:not(.user) .bubble-photo,
.bubble.bubble-photo-only:not(.user) .bubble-photo-frame {
  margin-left: 0;
  margin-right: auto;
}
/* Theme photo-only scene stills: left-align like assistant chat photos */
#groupMessages .bubble.bubble-photo-only {
  align-self: flex-start;
}
/* Missing/unavailable chat still: hide entirely (JS also removes the node). */
.bubble-photo.is-broken,
.bubble-photo.is-loading:not([src]):not(.is-ready) {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  opacity: 0;
  overflow: hidden;
}
.bubble.bubble-photo-only:not(:has(img.bubble-photo.is-ready)):not(:has(img.bubble-photo[data-gen-gif="1"])) {
  /* Photo-only bubble with no ready still — collapse (removal is preferred). */
  display: none;
}
.bubble.assistant {
  max-width: min(78%, 520px);
}

/* Lightbox photo actions (Mini App parity) */
.lightbox-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin: 8px 0 4px;
}
.lightbox-actions .btn {
  min-width: 0;
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.25);
  color: #fff;
}
.lightbox-actions .btn:hover { background: rgba(255,255,255,0.18); }
.lightbox-actions .btn.danger {
  border-color: color-mix(in srgb, #e55 60%, #fff);
  color: #ffb0b0;
}
.lightbox-actions .btn:disabled {
  opacity: 0.35;
  pointer-events: none;
}
.lightbox-meta {
  max-width: 96vw;
  padding: 0 12px;
}
/* Scene generate modal (Mini App parity) */
.scene-modal-sheet {
  max-width: 520px;
  width: min(96vw, 520px);
}
/* Animate modal: same shell as image gen; no suggest dice */
.animate-modal-sheet {
  max-width: 520px;
  width: min(96vw, 520px);
}
.scene-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 4px;
}
.scene-title-row h3 {
  margin: 0;
  flex: 1;
  min-width: 0;
}
.modal-hint { margin: 0 0 12px; font-size: 0.85rem; color: var(--hint); }
.scene-input-row {
  display: flex;
  gap: 8px;
  align-items: flex-start;
}
.scene-input-row textarea,
#sceneInput {
  flex: 1;
  width: 100%;
  min-height: 200px;
  height: 220px;
  margin: 0;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: 0.95rem;
  line-height: 1.45;
  padding: 12px 14px;
  resize: vertical;
}
/* Animate prompt: ~75% of image-gen textarea height (220px → 165px) */
.animate-input-row {
  display: block;
  margin: 0 0 12px;
}
.animate-input-row textarea,
#animatePromptInput {
  display: block;
  width: 100%;
  box-sizing: border-box;
  min-height: 150px;
  height: 165px; /* 75% of #sceneInput 220px */
  margin: 0;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: 0.95rem;
  line-height: 1.45;
  padding: 12px 14px;
  resize: vertical;
}
/* Warm/Hot: locked defaults; Explicit: editable */
#animatePromptInput:disabled {
  opacity: 0.78;
  cursor: not-allowed;
  color: color-mix(in srgb, var(--text) 88%, var(--hint));
  resize: none;
}
.animate-duration {
  margin: 0 0 16px;
}
.animate-modal-sheet .modal-actions {
  margin-top: 4px;
}
.scene-random {
  flex-shrink: 0;
  margin-top: 4px;
}
.scene-random.busy {
  opacity: 0.5;
  pointer-events: none;
}
/* Secret mature toggle — no mature label */
.secret-toggle {
  flex-shrink: 0;
  border: none;
  background: transparent;
  padding: 4px;
  cursor: pointer;
  opacity: 0.45;
  transition: opacity 0.15s ease;
}
.secret-toggle:hover,
.secret-toggle:focus-visible {
  opacity: 0.85;
  outline: none;
}
.secret-toggle[aria-pressed="true"] { opacity: 1; }
.secret-toggle-track {
  display: block;
  width: 36px;
  height: 20px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--hint) 35%, transparent);
  border: 1px solid color-mix(in srgb, var(--hint) 40%, transparent);
  position: relative;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.secret-toggle[aria-pressed="true"] .secret-toggle-track {
  background: color-mix(in srgb, var(--btn) 55%, #222);
  border-color: color-mix(in srgb, var(--btn) 50%, transparent);
}
.secret-toggle-knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--text);
  opacity: 0.7;
  transition: transform 0.15s ease, opacity 0.15s ease, background 0.15s ease;
}
.secret-toggle[aria-pressed="true"] .secret-toggle-knob {
  transform: translateX(16px);
  opacity: 1;
  background: #fff;
}

/* —— Brand logo —— */
.brand-logo-wrap {
  position: relative;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  overflow: visible;
  z-index: 50;
}
.brand-logo {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  object-fit: cover;
  flex-shrink: 0;
  background: #111;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--btn) 35%, transparent);
  display: block;
}
.brand-mark { display: none; } /* replaced by logo image */

/* Speech bubble: pinned to bot logo, opens top-left → bottom-right */
.brand-toast-host {
  /* Fallback: sit beside logo wrap when not yet pinned */
  position: absolute;
  left: calc(100% + 4px);
  top: 4px;
  z-index: 9990;
  width: max-content;
  max-width: min(280px, 70vw);
  min-width: 11rem;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  transform-origin: top left;
}
/* Fixed to logo viewport coords (set by pinBrandToastToLogo) */
.brand-toast-host.is-pinned {
  position: fixed;
  left: var(--brand-toast-left, 56px);
  top: var(--brand-toast-top, 20px);
  right: auto;
  bottom: auto;
  z-index: 9990;
}
.brand-toast {
  pointer-events: auto;
  width: max-content;
  max-width: min(280px, 70vw);
  min-width: 11rem;
  transform-origin: 0% 12%; /* grow from left-tail / logo side */
  animation: brand-toast-in 0.36s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
.brand-toast.is-out {
  animation: brand-toast-out 0.24s ease forwards;
}
/* Comic body — left tail toward logo; subtle border */
.brand-toast-bubble {
  position: relative;
  background: linear-gradient(
    145deg,
    color-mix(in srgb, var(--card) 92%, #fff 6%),
    color-mix(in srgb, var(--card) 94%, var(--btn) 8%)
  );
  border: 1px solid color-mix(in srgb, var(--btn) 28%, var(--border));
  color: var(--text);
  font-size: 0.82rem;
  line-height: 1.35;
  font-weight: 650;
  padding: 10px 14px 10px 14px;
  box-shadow:
    0 1px 0 color-mix(in srgb, var(--btn) 12%, transparent),
    0 8px 20px rgba(0, 0, 0, 0.28);
  white-space: normal;
  word-break: normal;
  overflow-wrap: anywhere;
  width: max-content;
  max-width: min(280px, 70vw);
  min-width: 11rem;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 0;
  transform-origin: top left;
}
/*
 * Distinct comic silhouettes (a–f) — new shell each toast so shape re-rolls.
 * Same subtle border language; clearly different silhouettes + slight tilt.
 */
.brand-toast-bubble--a {
  border-radius: 4px 20px 20px 20px;
}
.brand-toast-bubble--b {
  border-radius: 22px 22px 22px 6px;
  transform: rotate(-1.2deg);
}
.brand-toast-bubble--c {
  border-radius: 16px 28px 12px 24px;
  transform: rotate(1.4deg);
}
.brand-toast-bubble--d {
  border-radius: 50% 50% 50% 12% / 42% 42% 42% 28%;
  padding: 12px 16px;
}
.brand-toast-bubble--e {
  border-radius: 14px 6px 22px 18px;
  transform: rotate(-0.9deg);
}
.brand-toast-bubble--f {
  border-radius: 26px 14px 8px 22px;
  transform: rotate(1.1deg);
}
.brand-toast {
  margin-bottom: 6px;
}
/* Left tail → logo (matches subtle border) */
.brand-toast-bubble::before {
  content: "";
  position: absolute;
  left: -9px;
  top: 10px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 7px 10px 7px 0;
  border-color: transparent color-mix(in srgb, var(--btn) 28%, var(--border)) transparent transparent;
}
.brand-toast-bubble::after {
  content: "";
  position: absolute;
  left: -6px;
  top: 12px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 5px 8px 5px 0;
  border-color: transparent color-mix(in srgb, var(--card) 94%, var(--btn) 6%) transparent transparent;
}
/* Tail height variety by shape (still left / logo-side) */
.brand-toast-bubble--b::before,
.brand-toast-bubble--b::after { top: 14px; }
.brand-toast-bubble--b::after { top: 16px; }
.brand-toast-bubble--c::before,
.brand-toast-bubble--c::after { top: 8px; }
.brand-toast-bubble--c::after { top: 10px; }
.brand-toast-bubble--d::before,
.brand-toast-bubble--d::after { top: 50%; margin-top: -7px; }
.brand-toast-bubble--d::after { margin-top: -5px; }
.brand-toast-bubble--e::before,
.brand-toast-bubble--e::after { top: 18px; }
.brand-toast-bubble--e::after { top: 20px; }
.brand-toast-bubble--f::before,
.brand-toast-bubble--f::after { top: 6px; }
.brand-toast-bubble--f::after { top: 8px; }

.brand-toast-line {
  display: flex;
  align-items: center; /* full line vertically centered */
  gap: 6px;
  white-space: normal;
  word-break: normal;
  overflow-wrap: anywhere;
  animation: brand-toast-line-in 0.28s ease both;
  padding: 3px 0;
}
.brand-toast-line + .brand-toast-line {
  border-top: 1px dashed color-mix(in srgb, var(--btn) 18%, transparent);
  margin-top: 2px;
  padding-top: 8px;
}
.brand-toast-line.is-out {
  animation: brand-toast-line-out 0.22s ease forwards;
}
/* Sentence text — inline flow so logo sits before the name mid-line */
.brand-toast-text {
  flex: 1 1 auto;
  min-width: 0;
  padding-top: 0;
  line-height: 1.4;
}
.brand-toast-seg {
  /* plain text segments around logo+name */
}
/* Inline [logo][name] unit — vertically centered with surrounding text */
.brand-toast-who {
  display: inline-flex;
  align-items: center;
  gap: 0.28em;
  vertical-align: middle;
  white-space: nowrap;
  margin: 0 0.12em;
  max-width: 100%;
}
.brand-toast-name {
  /* Same size/weight as surrounding toast text (was bolder → looked larger) */
  font-weight: inherit;
  font-size: inherit;
  line-height: inherit;
}
/* DP size tracks text (em) so it fits the line height */
.brand-toast-avatar {
  width: 1.15em;
  height: 1.15em;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 1px solid color-mix(in srgb, var(--btn) 20%, transparent);
  box-shadow: none;
  background: #1a1a22;
  display: block;
}
/* Pop in from logo (left/up) toward bottom-right */
@keyframes brand-toast-in {
  from {
    opacity: 0;
    transform: translate(-14px, -8px) scale(0.72);
  }
  to {
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }
}
@keyframes brand-toast-out {
  to {
    opacity: 0;
    transform: translate(-10px, -6px) scale(0.86);
  }
}
@keyframes brand-toast-line-in {
  from {
    opacity: 0;
    transform: translate(6px, 4px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes brand-toast-line-out {
  to {
    opacity: 0;
    transform: translateY(-3px);
    max-height: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
  }
}
/* Mobile bottom-nav: brand is normally hidden — surface logo + bubble top-left while toasting */
@media (max-width: 900px) {
  body.brand-toast-active .sidebar-brand {
    display: flex !important;
    position: fixed;
    top: calc(8px + var(--safe-top));
    left: calc(8px + var(--safe-left));
    z-index: 240;
    padding: 0;
    min-height: 0;
    pointer-events: none;
    background: transparent;
    border: 0;
  }
  body.brand-toast-active .sidebar-brand .brand-text {
    display: none !important;
  }
  body.brand-toast-active .brand-toast-host {
    pointer-events: auto;
  }
}
.login-logo {
  width: 96px;
  height: 96px;
  border-radius: 24px;
  object-fit: cover;
  display: block;
  margin: 0 auto 16px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.35);
}

/* Shell main + footer */
.shell-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
.shell-main .main {
  flex: 1;
  min-height: 0;
}
.site-footer {
  flex-shrink: 0;
  border-top: 1px solid var(--border);
  background: var(--bg2);
  /* Tight left so language sits flush with the main column edge */
  padding: 10px 12px 12px 8px;
  font-size: 0.78rem;
  color: var(--hint);
}
.footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  /* Full width of shell-main — no centered max-width (that left empty space before lang) */
  max-width: none;
  width: 100%;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.footer-start {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 10px 12px;
  min-width: 0;
  flex: 1 1 auto;
  margin: 0;
  padding: 0;
}
/* Language + copyright/cookies/AI note: keep left; legal links stay right */
.footer-meta {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  gap: 0.4em;
  min-width: 0;
  flex: 0 1 auto;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.footer-copy {
  line-height: 1.35;
  white-space: nowrap;
}
.footer-meta-sep {
  opacity: 0.55;
  flex-shrink: 0;
}
.footer-cookies,
.footer-ai-note {
  margin: 0;
  font-size: inherit;
  line-height: 1.35;
  opacity: 0.88;
  max-width: none;
  white-space: nowrap;
}
/* App footer language: flush left; fixed menu so it sits above bottom nav / sidebar */
.footer-lang {
  position: relative;
  flex-shrink: 0;
  z-index: 5;
  margin: 0;
  padding: 0;
  background: transparent;
}
.footer-lang-btn {
  padding: 5px 8px 5px 6px;
  font-size: 0.75rem;
  margin: 0;
}
.footer-lang-menu {
  /* position/size set in JS (fixed) so it is not clipped by .shell-main
     or painted under the mobile bottom nav (z-index 60). */
  position: fixed;
  top: auto;
  right: auto;
  left: auto;
  bottom: auto;
  z-index: 220;
  max-height: min(50vh, 18rem);
}
body.footer-lang-open .sidebar {
  /* keep nav visible but under the language menu */
  z-index: 60;
}
body.footer-lang-open .mobile-more-backdrop,
body.footer-lang-open .sidebar-mgmt {
  z-index: 70;
}
.footer-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}
a.footer-link {
  text-decoration: none;
  color: inherit;
  background: none;
  border: none;
  font: inherit;
  cursor: pointer;
  padding: 0;
}
.landing-foot-links a.footer-link {
  color: var(--hint);
}
.landing-foot-links a.footer-link:hover {
  color: var(--text);
}
.footer-link {
  appearance: none;
  border: none;
  background: none;
  color: var(--accent, #a78bfa);
  font: inherit;
  font-size: 0.78rem;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.footer-link:hover { color: var(--text); }

/* My Profile: fill .main so Liked/Generated uses all remaining width + height */
.main:has(#page-settings:not(.hidden)) {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
#page-settings.page {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  height: auto;
  max-height: 100%;
  box-sizing: border-box;
}
#page-settings > .page-head {
  flex: 0 0 auto;
  margin-bottom: 12px;
}
.settings-layout {
  display: grid;
  /* Photo | details (~+150px wider) | Liked/Generated takes remaining width */
  grid-template-columns: minmax(200px, 280px) minmax(280px, 450px) minmax(0, 1fr);
  gap: 16px;
  align-items: stretch;
  width: 100%;
  max-width: none;
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  box-sizing: border-box;
}
/* Photo + prefs stay natural height at top; gallery stretches to full grid row */
.settings-col-photo,
.settings-col-left.settings-col-photo {
  position: sticky;
  top: 12px;
  align-self: start;
}
.settings-col-right {
  position: static;
  align-self: start;
  min-width: 0;
  width: 100%;
  max-width: 450px;
  max-height: 100%;
  overflow-y: auto;
}
/* Divider after gender + interest, before language */
.settings-details-rule {
  border: none;
  border-top: 1px solid color-mix(in srgb, var(--hint) 22%, transparent);
  margin: 4px 0 14px;
  height: 0;
}
/* Scene modal heat: same segmented control as site Explicit safety, top-right of title */
.scene-title-row .scene-heat-toggle,
.scene-title-row .scene-heat-row {
  flex: 0 0 auto;
  margin: 0 0 0 auto;
  transform: scale(0.92);
  transform-origin: center right;
}
.scene-heat-toggle .safety-opt {
  padding: 0.34rem 0.5rem;
  font-size: 0.74rem;
}
.scene-heat-toggle .safety-ico-img,
.scene-heat-toggle .heat-icon-img {
  width: 1.15em !important;
  height: 1.15em !important;
}
/* legacy chip row if used outside title */
.scene-heat-row:not(.safety-toggle) {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 10px;
}

/* Free-tier create progress (Profiles / Games) under Change description — no heading */
.settings-create-quota {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin: 12px 0 0;
  padding: 0;
  font-size: 0.86rem;
  line-height: 1.35;
}
.settings-col-photo .settings-create-quota {
  margin-top: 12px;
}
.settings-create-quota[hidden] {
  display: none !important;
}
.settings-create-quota-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.55rem;
}
.settings-create-quota-label {
  min-width: 4.5rem;
  font-weight: 600;
  color: var(--text, #f2f2f7);
  opacity: 0.92;
}
.settings-create-quota-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  font-variant-numeric: tabular-nums;
}
.settings-create-quota-chip .star-ico,
.settings-create-quota-chip .coin-ico {
  width: 0.95em;
  height: 0.95em;
  vertical-align: -0.12em;
}
.group-theme-build-cost {
  margin: 0.35rem 0 0;
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
}
.group-theme-build-cost .star-ico,
.group-theme-build-cost .coin-ico {
  width: 0.95em;
  height: 0.95em;
  vertical-align: -0.12em;
}
.settings-col-liked {
  position: relative;
  top: auto;
  /* Stretch to the full height of the settings grid (fills .main below the title) */
  align-self: stretch;
  height: auto;
  max-height: none;
  min-height: 0;
  display: flex;
  flex-direction: column;
  min-width: 0;
  width: 100%;
  padding-bottom: 6px;
  box-sizing: border-box;
}
.settings-liked-title {
  margin: 0 0 10px;
  font-size: 0.95rem;
  font-weight: 650;
  letter-spacing: 0.01em;
  flex: 0 0 auto;
}
.settings-media-tabs {
  display: flex;
  gap: 6px;
  margin: 0 0 10px;
  flex: 0 0 auto;
  flex-wrap: wrap;
}
.settings-media-tab {
  border: 1px solid color-mix(in srgb, var(--hint) 28%, transparent);
  background: transparent;
  color: var(--hint);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  padding: 7px 12px;
  border-radius: 999px;
  cursor: pointer;
}
.settings-media-tab.is-active {
  color: var(--text);
  border-color: color-mix(in srgb, var(--accent, #7c6af5) 45%, transparent);
  background: color-mix(in srgb, var(--accent, #7c6af5) 14%, transparent);
}
.settings-media-panel {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.settings-media-panel.hidden {
  display: none !important;
}
.settings-danger-block {
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid color-mix(in srgb, var(--hint) 18%, transparent);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.settings-danger-btn {
  font-size: 0.9rem;
}
.settings-danger-note {
  margin: 2px 0 0;
}
.settings-liked-rail {
  --liked-tile-w: 144px;
  --liked-tile-h: 216px;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  display: grid;
  /* Fixed track width — extra space becomes more columns, not giant stretchy cards */
  grid-template-columns: repeat(auto-fill, var(--liked-tile-w));
  justify-content: start;
  align-content: start;
  gap: 10px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  padding-right: 2px;
  box-sizing: border-box;
}
.settings-shared-rail {
  width: 100%;
  min-height: 0;
  flex: 1 1 auto;
}
.settings-shared-tile .settings-liked-cap {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.settings-shared-badge {
  position: absolute;
  top: 6px;
  left: 6px;
  z-index: 2;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 3px 7px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  pointer-events: none;
}
/* Top-right video marker when a still has an attached animation */
.settings-liked-video-badge {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 3;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.58);
  color: #fff;
  pointer-events: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.14);
}
.settings-liked-video-badge svg {
  display: block;
  flex-shrink: 0;
}
.settings-gen-unshare {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 4;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: color-mix(in srgb, var(--bg, #0b0b12) 72%, transparent);
  color: var(--text, #f2f2f7);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
}
/* Unshare + video: keep video top-right; nudge unshare left */
.settings-liked-tile.has-video .settings-gen-unshare {
  right: 38px;
}
.settings-gen-unshare:hover {
  background: color-mix(in srgb, var(--accent, #6c5ce7) 45%, #000);
  border-color: transparent;
}
.settings-shared-tile.is-shared {
  position: relative;
}
.danger-confirm-checklist {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  margin: 0 0 0.85rem;
  text-align: left;
}
.danger-check-row {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  font-size: 0.9rem;
  line-height: 1.35;
  cursor: pointer;
  color: var(--text, #f2f2f7);
}
.danger-check-row.is-locked {
  cursor: default;
  opacity: 0.92;
}
.danger-check-row.is-kept {
  opacity: 0.72;
}
.danger-check-row input {
  margin-top: 0.15rem;
  flex-shrink: 0;
}
.danger-check-label {
  min-width: 0;
}
.settings-shared-badge.is-gone {
  background: color-mix(in srgb, #c45c5c 80%, #000);
}
/* Shared picture fullscreen overlay */
.shared-pic-overlay {
  position: fixed;
  inset: 0;
  z-index: 1400;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.shared-pic-overlay.hidden {
  display: none !important;
}
.shared-pic-overlay-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
}
.shared-pic-overlay-panel {
  position: relative;
  z-index: 1;
  width: min(920px, 96vw);
  max-height: min(92vh, 900px);
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--card, #1a1a22);
  border: 1px solid color-mix(in srgb, var(--hint) 22%, transparent);
  border-radius: 16px;
  padding: 14px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
  box-sizing: border-box;
}
/* Video clips (often landscape) need a wider stage than portrait stills */
.shared-pic-overlay-panel.is-video,
.shared-pic-overlay.is-video .shared-pic-overlay-panel {
  width: min(1120px, 96vw);
  max-height: min(94vh, 980px);
}
.shared-pic-overlay-close {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  width: 36px;
  height: 36px;
  font-size: 1.35rem;
}
.shared-pic-overlay-media {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0a0a0e;
  border-radius: 12px;
  overflow: hidden;
  max-height: min(70vh, 720px);
  width: 100%;
}
.shared-pic-overlay-panel.is-video .shared-pic-overlay-media,
.shared-pic-overlay.is-video .shared-pic-overlay-media {
  max-height: min(82vh, 860px);
  min-height: min(42vh, 380px);
  width: 100%;
}
.shared-pic-overlay-img,
.shared-pic-overlay-video {
  max-width: 100%;
  max-height: min(70vh, 720px);
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}
/* Force video to fill the media stage (intrinsic mp4 size is often small) */
.shared-pic-overlay-video {
  width: 100%;
  height: 100%;
  max-height: min(82vh, 860px);
  min-height: min(36vh, 300px);
  object-fit: contain;
  background: #000;
}
.shared-pic-overlay-meta {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.shared-pic-overlay-meta .muted {
  margin: 0;
}
/* Danger confirm typed character */
.danger-confirm-challenge {
  margin: 10px 0 0;
  font-size: 0.95rem;
  line-height: 1.45;
}
.danger-confirm-char {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.6em;
  padding: 2px 8px;
  margin: 0 4px;
  border-radius: 8px;
  font-weight: 800;
  font-size: 1.15rem;
  letter-spacing: 0.04em;
  color: var(--text);
  background: color-mix(in srgb, var(--accent, #7c6af5) 18%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent, #7c6af5) 40%, transparent);
}
.danger-confirm-input {
  width: 100%;
  margin-top: 10px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: 1.1rem;
  padding: 10px 12px;
  text-align: center;
  letter-spacing: 0.08em;
}
.settings-liked-empty {
  margin: 4px 0 0;
  grid-column: 1 / -1;
}
.settings-liked-tile {
  position: relative;
  display: block;
  /* Locked portrait box from rail CSS vars (prevents stretch/overlap) */
  width: var(--liked-tile-w);
  max-width: var(--liked-tile-w);
  height: var(--liked-tile-h);
  max-height: var(--liked-tile-h);
  min-width: 0;
  min-height: 0;
  flex: 0 0 auto;
  aspect-ratio: 2 / 3;
  box-sizing: border-box;
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  background: #111;
  padding: 0;
  cursor: pointer;
  color: inherit;
  font: inherit;
  text-align: left;
}
.settings-liked-tile:hover {
  border-color: color-mix(in srgb, var(--btn, #6c8cff) 40%, var(--border));
  filter: brightness(1.04);
}
.settings-liked-tile:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--btn, #6c8cff) 70%, transparent);
  outline-offset: 2px;
}
.settings-liked-tile img,
.settings-liked-tile video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  pointer-events: none;
}
.settings-liked-tile video {
  z-index: 1;
}
.settings-liked-tile img.is-placeholder {
  object-fit: contain;
  opacity: 0.55;
}
.settings-liked-tile .settings-liked-cap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 18px 8px 6px;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.72));
  color: #fff;
  font-size: 0.72rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}
.settings-panel { max-width: none; }
.settings-name-row {
  margin: 10px 0 12px;
  max-width: 220px;
}
.settings-name-input {
  display: block;
  width: 100%;
  margin: 0;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 1.15rem;
  font-weight: 650;
  line-height: 1.3;
  text-align: left;
}
.settings-name-input:hover {
  border-color: color-mix(in srgb, var(--hint) 28%, transparent);
  background: color-mix(in srgb, var(--card) 80%, var(--bg));
}
.settings-name-input:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--btn, #6c8cff) 55%, var(--border));
  background: var(--bg);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--btn, #6c8cff) 18%, transparent);
}
.settings-name-input::placeholder {
  color: var(--hint);
  font-weight: 500;
}

/* Create two columns */
.create-wizard-2col {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  max-width: 1100px;
}
.create-wizard-2col .create-left,
.create-wizard-2col .create-right {
  min-width: 0;
}
.create-wizard { max-width: none; }

/* Legal / privacy body */
.legal-panel {
  max-width: 720px;
  line-height: 1.58;
  font-size: 0.93rem;
  color: color-mix(in srgb, var(--text) 92%, var(--hint));
}
#page-terms .legal-panel,
#page-privacy .legal-panel {
  max-width: none;
}
.legal-panel h3 {
  margin: 1.4em 0 0.5em;
  font-size: 1.05rem;
  color: var(--text);
}
.legal-panel h3:first-child { margin-top: 0; }
.legal-panel p { margin: 0 0 0.75em; }
.legal-panel ul {
  margin: 0 0 0.9em;
  padding-left: 1.2em;
}
.legal-panel li { margin-bottom: 0.4em; }

@media (max-width: 900px) {
  /* Mobile: page scrolls; gallery is full-width with a tall rail */
  .main:has(#page-settings:not(.hidden)) {
    display: block;
    overflow-x: hidden;
    overflow-y: auto;
  }
  .settings-layout,
  .create-wizard-2col {
    grid-template-columns: 1fr;
  }
  #page-settings.page {
    height: auto;
    max-height: none;
    flex: none;
  }
  .settings-layout {
    flex: none;
    width: 100%;
  }
  /* Mobile: profile photo card scrolls with page (not sticky). */
  .settings-col-photo,
  .settings-col-left.settings-col-photo,
  .settings-col-right,
  .settings-col-liked {
    position: static;
    top: auto;
    max-height: none;
    overflow: visible;
  }
  .settings-col-liked {
    /* Full width of the page; use most of the viewport for the grid */
    width: 100%;
    height: auto;
    max-height: none;
    min-height: min(70vh, 640px);
  }
  .settings-media-panel {
    min-height: min(64vh, 580px);
  }
  .settings-liked-rail {
    width: 100%;
    max-height: none;
    min-height: min(64vh, 580px);
    height: min(70vh, 640px);
  }
}
@media (max-width: 640px) {
  .footer-inner { flex-direction: column; align-items: flex-start; }
}

/* Back to list — phones only (desktop keeps list + thread side by side) */
.chat-mobile-back {
  display: none;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin-right: 4px;
  flex-shrink: 0;
  border: 1px solid color-mix(in srgb, var(--hint) 30%, transparent);
  border-radius: 10px;
  background: transparent;
  color: var(--text);
  font-size: 1.15rem;
  cursor: pointer;
  padding: 0;
}
.chat-mobile-back.hidden {
  display: none !important;
}
/* Phone portrait, or phone landscape (short height → keep mobile UI, not desktop) */
@media (max-width: 768px), (orientation: landscape) and (max-height: 540px) and (max-width: 960px) {
  .chat-mobile-back:not(.hidden) {
    display: inline-flex;
  }
}

/* Profile photo action icons (Mini App style) */
.profile-icon-actions {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 6px;
  margin: 0 0 12px;
  justify-content: flex-start;
  min-width: 0;
  width: 100%;
}
.profile-icon-actions .icon-btn {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--hint) 30%, transparent);
  background: transparent;
  color: var(--hint);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  flex-shrink: 0;
}
.profile-icon-actions .icon-btn svg {
  width: 18px;
  height: 18px;
  display: block;
}
.profile-icon-actions .icon-btn:hover {
  color: var(--text);
  border-color: color-mix(in srgb, var(--btn) 50%, transparent);
}
.profile-icon-actions .icon-btn.danger:hover { color: #ff8a8a; }
.profile-icon-actions .icon-btn:disabled,
.profile-icon-actions .icon-btn.disabled {
  opacity: 0.35;
  pointer-events: none;
}
/* Gallery actions: one row when they fit; two equal rows when overflowing */
.gallery-action-wrap {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  width: 100%;
  min-width: 0;
}
.gallery-action-row {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  width: 100%;
  min-width: 0;
  overflow: hidden;
  padding-bottom: 0;
}
.gallery-action-wrap:not(.is-two-line) .gallery-action-row {
  justify-content: flex-start;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  touch-action: pan-x;
  padding-bottom: 2px;
}
.gallery-action-wrap.is-two-line .gallery-action-row {
  justify-content: flex-start;
}
.gallery-action-row .icon-btn {
  flex-shrink: 0;
}
.gallery-action-row .icon-btn.hidden {
  display: none !important;
}
/* Legacy: chat btn no longer lives in icon-actions (kept for safety) */
.profile-icon-actions .profile-chat-btn {
  margin-left: 4px;
  padding: 7px 14px;
  min-height: 36px;
  flex-shrink: 0;
}
/* Companion-level Private badge next to name */
.profile-private-pill,
.pill.profile-private-pill {
  display: inline-block;
  vertical-align: middle;
  margin: 0;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--btn) 28%, transparent);
  border: 1px solid color-mix(in srgb, var(--btn) 40%, transparent);
  color: var(--text);
}

/* Generate modal: space between textarea row and action buttons */
.scene-modal-sheet .modal-actions {
  margin-top: 18px;
}
.scene-input-row {
  margin-bottom: 4px;
}

/* Operation status — bottom-right toast (error red / ok green / quota gold) */
.global-status {
  position: fixed;
  right: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 400; /* above chat compose / sheets */
  min-height: 0;
  margin: 0;
  max-width: min(360px, calc(100vw - 32px));
  padding: 10px 36px 10px 14px; /* room for close */
  border-radius: 12px;
  background: var(--bg2);
  border: 1px solid var(--border);
  box-shadow: 0 8px 28px rgba(0,0,0,0.35);
  font-size: 0.9rem;
  color: var(--hint);
  pointer-events: none;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.2s ease, transform 0.2s ease;
  display: block; /* override any .status.quota { display:none } bleed */
}
.global-status:not(:empty),
.global-status.quota,
.global-status.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.global-status.err {
  color: var(--danger);
  border-color: color-mix(in srgb, var(--danger) 45%, var(--border));
}
.global-status-body {
  margin: 0;
  padding: 0;
  line-height: 1.4;
  word-break: break-word;
}
.global-status-close {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 2;
  width: 28px;
  height: 28px;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0.72;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
}
.global-status-close:hover {
  opacity: 1;
  background: color-mix(in srgb, currentColor 12%, transparent);
}
.global-status.quota .global-status-close {
  color: #2a1f06;
}
.global-status.err .global-status-close {
  color: var(--danger);
}

/* Inline product validation (billing / setup / scene / cast) — not red global toast */
.field-inline-error {
  margin: 6px 0 0;
  padding: 0;
  min-height: 0;
  font-size: 0.82rem;
  line-height: 1.35;
  color: var(--danger, #e86a6a);
  text-align: left;
}
.field-inline-error:empty,
.field-inline-error[hidden],
.field-inline-error.hidden {
  display: none !important;
  margin: 0;
}
.billing-topoff-buy .field-inline-error {
  margin: 8px 0 0;
}
.setup-step .field-inline-error {
  margin: 8px 2px 0;
}
.scene-modal-error {
  margin: 10px 0 0;
  width: 100%;
}
.group-cast-sticky-cta {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}
.group-cast-sticky-cta .group-create-status,
.group-cast-sticky-cta .field-inline-error {
  margin: 0;
  text-align: center;
  order: -1; /* above Start Game */
}
.group-cast-sticky-cta .group-create-status:empty {
  display: none !important;
}
@keyframes ui-shake {
  0%, 100% { transform: translateX(0); }
  15%, 45%, 75% { transform: translateX(-5px); }
  30%, 60%, 90% { transform: translateX(5px); }
}
.ui-shake {
  animation: ui-shake 0.42s ease;
}

/* Soft product tip (e.g. like lock) — not the red error toast */
.ui-anchor-tip {
  position: fixed;
  z-index: 520;
  max-width: min(260px, calc(100vw - 24px));
  padding: 8px 12px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--bg2, #1a1a22) 94%, var(--accent, #c9a46c) 6%);
  border: 1px solid color-mix(in srgb, var(--accent, #c9a46c) 35%, var(--border, #333));
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.4);
  color: var(--text, #f2f2f5);
  font-size: 0.82rem;
  line-height: 1.4;
  letter-spacing: 0.01em;
  pointer-events: none;
  opacity: 0;
  transform: translateY(4px) scale(0.98);
  transition: opacity 0.16s ease, transform 0.16s ease;
  text-align: center;
}
.ui-anchor-tip.is-on {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.home-card-like.is-like-locked.is-liked,
.icon-btn.heart-btn.is-like-locked.is-on,
#btnLightboxLike.is-like-locked.is-on {
  cursor: help;
}
/* Green success toast (e.g. animate.ready) — bottom-right fixed via .global-status */
.global-status.ok {
  color: #e0fff0;
  background: color-mix(in srgb, #123a28 92%, #2ecc71);
  border-color: color-mix(in srgb, #3ddc84 45%, transparent);
  box-shadow:
    0 0 0 1px color-mix(in srgb, #3ddc84 18%, transparent) inset,
    0 8px 28px rgba(0, 0, 0, 0.35);
}
.global-status.ok .global-status-close {
  color: #e0fff0;
}
/* Transactions ledger: attempt / fail rows slightly dimmed */
.billing-pay-table tr.billing-tx-failed td,
.billing-pay-table tr.billing-tx-cancelled td {
  opacity: 0.85;
  color: color-mix(in srgb, var(--text) 80%, #f87171);
}
.billing-pay-table tr.billing-tx-opened td {
  opacity: 0.9;
}
.billing-pay-table .billing-tx-status {
  white-space: nowrap;
  font-size: 0.92em;
}
/* Out of coins — rich gold card (matches Telegram denyQuota copy) */
.global-status.quota {
  position: fixed; /* keep absolute close positioned to toast */
  color: #2a1f06;
  max-width: min(420px, calc(100vw - 24px));
  padding: 14px 40px 15px 16px;
  border-radius: 16px;
  pointer-events: auto;
  background:
    linear-gradient(155deg, #fff6d4 0%, #f5d76e 42%, #e8b923 100%);
  border: 1px solid color-mix(in srgb, #c9971a 55%, #fff);
  box-shadow:
    0 0 0 1px color-mix(in srgb, #fff8dc 40%, transparent) inset,
    0 10px 32px rgba(120, 80, 0, 0.35),
    0 2px 0 color-mix(in srgb, #fff8e0 50%, transparent) inset;
}
.quota-toast-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: left;
  line-height: 1.4;
}
.quota-toast-lead {
  margin: 0;
  font-weight: 650;
  font-size: 0.95rem;
  color: #2a1c04;
  letter-spacing: 0.01em;
}
.quota-toast-action-row {
  margin: 0;
  font-size: 0.9rem;
  color: #4a3810;
  line-height: 1.45;
}
.quota-topoff-subtle {
  display: inline;
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  font-weight: 650;
  color: #1a1204;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, #8a6914 55%, transparent);
  text-underline-offset: 2px;
  cursor: pointer;
  pointer-events: auto;
}
.quota-topoff-subtle:hover {
  color: #000;
  text-decoration-color: #8a6914;
}
.quota-toast-trail {
  color: #5a4618;
}
.quota-toast-sub {
  margin: 2px 0 0;
  font-size: 0.84rem;
  color: #5c4a1a;
  opacity: 0.95;
}
.quota-link-btn {
  display: inline;
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  font-weight: 600;
  color: #3d2e0a;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
  pointer-events: auto;
}
.quota-link-btn:hover {
  color: #000;
}
/* Inline form .status.quota only — never hide #globalStatus (also has class "status") */
.status.quota:not(.global-status) {
  display: none;
}

/* Support page */
.support-panel { max-width: 560px; }
.support-panel textarea {
  display: block;
  width: 100%;
  margin-top: 6px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font: inherit;
  padding: 10px 12px;
  resize: vertical;
  min-height: 120px;
}
.tickets-section {
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid color-mix(in srgb, var(--hint) 22%, transparent);
}

/* Support page — Terms · Privacy (footer-style) */
.support-legal-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.55rem;
  margin: 1.1rem 0 0.25rem;
  padding-top: 0.85rem;
  border-top: 1px solid color-mix(in srgb, var(--hint, #9a9aab) 16%, transparent);
  font-size: 0.88rem;
}
.support-legal-link {
  color: var(--hint, #9a9aab);
  text-decoration: none;
  background: none;
  border: none;
  font: inherit;
  cursor: pointer;
  padding: 0;
}
.support-legal-link:hover {
  color: var(--text, #f2f2f7);
  text-decoration: underline;
}
.support-legal-sep {
  color: color-mix(in srgb, var(--hint, #9a9aab) 55%, transparent);
  user-select: none;
}

.tickets-heading {
  margin: 0 0 10px;
  font-size: 1rem;
  font-weight: 600;
}
.tickets-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ticket-card {
  background: var(--bg);
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--hint) 22%, transparent);
  padding: 10px 12px;
  text-align: left;
}
.ticket-card.is-closed { opacity: 0.75; }
.ticket-meta {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 0.8rem;
  color: var(--hint);
  margin-bottom: 6px;
}
.ticket-status {
  text-transform: capitalize;
  color: color-mix(in srgb, var(--btn) 70%, #fff);
}
.ticket-status.is-closed { color: var(--hint); }
.ticket-body {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.4;
  white-space: pre-wrap;
  word-break: break-word;
}

/* Photo placeholders + smooth ready fade (profile DP, avatars, cards, bubbles) */
.profile-photo,
.avatar,
.chat-row-photo,
.bubble-photo,
.comp-card-img {
  transition: opacity 0.32s ease, filter 0.32s ease;
  background: #1a1a24;
}
/* Keep silhouette visible while loading (no blank flash). Chat bubble stills stay hidden until ready. */
.profile-photo.is-loading,
.avatar.is-loading,
.chat-row-photo.is-loading,
.comp-card-img.is-loading,
.profile-photo.is-placeholder,
.avatar.is-placeholder,
.chat-row-photo.is-placeholder,
.comp-card-img.is-placeholder {
  opacity: 1;
  filter: none;
}
.bubble-photo.is-placeholder {
  /* Never show silhouette placeholders in the message thread */
  display: none !important;
}
.profile-photo.is-loading:not(.is-placeholder),
.avatar.is-loading:not(.is-placeholder),
.chat-row-photo.is-loading:not(.is-placeholder),
.comp-card-img.is-loading:not(.is-placeholder) {
  opacity: 0.72;
  filter: saturate(0.85);
}
/* Bubble photo while loading: invisible (no grey box) until is-ready */
.bubble-photo.is-loading:not(.is-ready):not([data-gen-gif="1"]) {
  opacity: 0;
  min-height: 0;
  max-height: 0;
  overflow: hidden;
}
.profile-photo.is-ready,
.avatar.is-ready,
.chat-row-photo.is-ready,
.bubble-photo.is-ready,
.comp-card-img.is-ready {
  opacity: 1;
  filter: none;
}
/* Soft shimmer over placeholder while waiting for the real photo */
.profile-photo.is-placeholder,
.avatar.is-placeholder,
.chat-row-photo.is-placeholder,
.comp-card-img.is-placeholder,
.bubble-photo.is-placeholder {
  position: relative;
}
@keyframes photo-shimmer {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}
.profile-slideshow.is-preloading .profile-photo.is-placeholder,
.comp-card-img.is-placeholder.is-loading,
.avatar.is-placeholder.is-loading,
.chat-row-photo.is-placeholder.is-loading {
  animation: photo-shimmer 1.4s ease-in-out infinite;
  background-image: linear-gradient(
    100deg,
    transparent 30%,
    color-mix(in srgb, var(--btn) 12%, transparent) 50%,
    transparent 70%
  );
  background-size: 200% 100%;
  background-color: #1a1a24;
}
.comp-card-img {
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  display: block;
  background: #1a1a24;
}
.profile-slideshow.is-preloading::after {
  content: none;
}
/* Failed bubble photos stay collapsed; placeholder still used elsewhere */
.bubble-photo.is-broken.is-placeholder {
  max-height: 360px;
  min-height: 80px;
  opacity: 0.9;
  margin-top: 8px;
  border: none;
  cursor: default;
}
/* List cards / avatars: keep silhouette visible when media fails (never blank) */
.comp-card-img.is-broken.is-placeholder,
.chat-row-photo.is-broken.is-placeholder,
.avatar.is-broken.is-placeholder,
.profile-photo.is-broken.is-placeholder {
  opacity: 1;
  filter: none;
}
/* Theme scene stills: landscape 3:2 multi-figure silhouette (not portrait head+shoulders) */
.bubble-photo.is-landscape-ph,
.bubble-photo.is-placeholder.is-landscape-ph {
  aspect-ratio: 3 / 2;
  width: min(280px, 78vw);
  max-width: min(280px, 78vw);
  max-height: none;
  min-height: 100px;
  height: auto;
  object-fit: cover;
  object-position: center center;
}
.bubble-photo.is-broken.is-placeholder.is-landscape-ph {
  max-height: none;
  min-height: 100px;
  opacity: 0.92;
}
/* Theme gallery empty/broken: keep multi-figure landscape placeholder under frame */
.group-theme-gallery-img.is-landscape-ph,
.group-theme-gallery-img.is-placeholder.is-landscape-ph {
  object-fit: cover;
  object-position: center center;
}

/* —— Owner admin (#/admin, not in nav) —— */
.admin-uptime-panel {
  padding: 1rem 1.15rem;
}
.admin-uptime-val {
  font-size: 1.5rem;
  font-weight: 650;
  letter-spacing: -0.02em;
  color: var(--text, #f2f2f5);
  font-variant-numeric: tabular-nums;
}
.admin-uptime-since {
  margin-top: 0.25rem;
}
.page-admin {
  padding: 16px 18px 40px;
  overflow: auto;
  max-height: calc(var(--app-height) - 24px);
}
.admin-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.admin-tabs {
  display: flex;
  gap: 6px;
  margin: 10px 0 0;
  flex-wrap: wrap;
}
.admin-tab {
  appearance: none;
  border: 1px solid var(--border, #2a2a36);
  background: color-mix(in srgb, var(--card, #14141c) 90%, transparent);
  color: var(--text, #eee);
  border-radius: 999px;
  padding: 6px 14px;
  font: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
}
.admin-tab:hover {
  border-color: color-mix(in srgb, var(--btn, #7c6af7) 45%, var(--border));
}
.admin-tab.is-active {
  background: color-mix(in srgb, var(--btn, #7c6af7) 28%, var(--card));
  border-color: color-mix(in srgb, var(--btn, #7c6af7) 55%, var(--border));
  color: #fff;
}
.admin-tab-panel.hidden,
.admin-tab-panel[hidden] {
  display: none !important;
}
/* Translate tab: full-width 2 columns (source | target).
   .panel defaults to max-width: 520px — override so both columns can breathe. */
.page-admin .panel,
.page-admin .admin-panel {
  max-width: none;
}
.admin-translate-panel {
  margin-top: 12px;
  width: 100%;
  max-width: none !important;
  box-sizing: border-box;
}
.admin-translate-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.admin-translate-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.admin-translate-actions #adminTranslateStatus {
  margin: 0;
  min-width: 4rem;
}
.admin-translate-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
  align-items: stretch;
  width: 100%;
}
.admin-translate-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  width: 100%;
}
.admin-translate-lab {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--hint, #a0a0b4);
}
.admin-translate-lang {
  width: 100%;
  max-width: 100%;
  font: inherit;
  font-size: 0.9rem;
  padding: 7px 10px;
  border-radius: 10px;
  border: 1px solid var(--border, #2a2a36);
  background: var(--input-bg, #0e0e14);
  color: var(--text, #eee);
  box-sizing: border-box;
}
.admin-translate-ta {
  width: 100%;
  min-height: min(55vh, 420px);
  flex: 1 1 auto;
  resize: vertical;
  font: inherit;
  font-size: 0.95rem;
  line-height: 1.45;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--border, #2a2a36);
  background: var(--input-bg, #0e0e14);
  color: var(--text, #eee);
  box-sizing: border-box;
}
.admin-translate-ta:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--btn, #7c6af7) 55%, var(--border));
}
@media (max-width: 720px) {
  .admin-translate-layout {
    grid-template-columns: 1fr;
  }
}
/* Users tab: full-width stacked grids (All + Recent). Payouts may still use multi-col. */
.admin-users-columns {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 12px;
  align-items: start;
}
.admin-users-columns.admin-users-columns-stack {
  grid-template-columns: 1fr;
}
.admin-users-columns .admin-panel {
  margin: 0;
  min-width: 0;
  width: 100%;
}
.admin-users-columns-stack .admin-table-wrap {
  width: 100%;
  overflow-x: auto;
}
.admin-impersonate-btn {
  white-space: nowrap;
  font-size: 0.78rem;
  padding: 4px 8px;
}
.admin-impersonating-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0 0 10px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, #f0a020 45%, transparent);
  background: color-mix(in srgb, #f0a020 14%, var(--card, #1a1a22));
  font-size: 0.9rem;
}
.admin-impersonating-banner.hidden {
  display: none !important;
}
.admin-user-pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 10px;
  flex-wrap: wrap;
}
.admin-user-pager .btn:disabled {
  opacity: 0.45;
  cursor: default;
}
@media (max-width: 1100px) {
  .admin-users-columns {
    grid-template-columns: 1fr;
  }
}
/* 3 equal columns: users | counts+queues | system */
.admin-columns {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 12px;
  align-items: start;
}
.admin-col {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}
.admin-col .admin-panel {
  margin: 0;
}
.admin-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 12px;
  align-items: start;
}
.admin-panel-wide { grid-column: 1 / -1; }
@media (max-width: 1100px) {
  .admin-columns {
    grid-template-columns: 1fr 1fr;
  }
  /* Stack: mid (queues) + system on top row feel; left full width second — simple reflow */
  .admin-col-left { grid-column: 1 / -1; order: 3; }
  .admin-col-mid { grid-column: 1; order: 1; }
  .admin-col-right { grid-column: 2; order: 2; }
}
@media (max-width: 720px) {
  .admin-columns {
    grid-template-columns: 1fr;
  }
  .admin-col-left,
  .admin-col-mid,
  .admin-col-right {
    grid-column: 1;
    order: 0;
  }
}
.admin-h {
  margin: 0 0 10px;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--accent);
}
.admin-chart-wrap {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--border, #2a2a36);
}
.admin-chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  align-items: center;
  margin-bottom: 8px;
}
.admin-chart-key {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.admin-chart-key::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 2px;
  display: inline-block;
}
.admin-chart-key.llm::before { background: #60a5fa; }
.admin-chart-key.img::before { background: #f472b6; }
.admin-chart-hint {
  margin-left: auto;
  opacity: 0.75;
}
#adminQueueChart {
  display: block;
  width: 100%;
  height: 160px;
  max-width: 100%;
  border-radius: 8px;
  background: color-mix(in srgb, var(--card, #14141c) 92%, #000);
}
.admin-kv {
  font-size: 0.85rem;
  line-height: 1.55;
  font-variant-numeric: tabular-nums;
}
.admin-kv dl {
  display: grid;
  grid-template-columns: minmax(8rem, 40%) 1fr;
  gap: 4px 12px;
  margin: 0;
}
.admin-kv dt {
  color: var(--hint);
  margin: 0;
}
.admin-kv dd {
  margin: 0;
  word-break: break-word;
}
.admin-table-wrap { overflow-x: auto; }
.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
}
.admin-table th,
.admin-table td {
  text-align: left;
  padding: 6px 8px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.admin-table th {
  color: var(--hint);
  font-weight: 500;
}
.admin-table tr:hover td { background: color-mix(in srgb, var(--card-hover) 80%, transparent); }
.admin-errors-table .admin-err-cell {
  max-width: 28rem;
  font-size: 0.82rem;
  word-break: break-word;
  white-space: normal;
}
.admin-errors-table .mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.8rem;
}
.admin-errors-table .nowrap { white-space: nowrap; }
.admin-user-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0 0 0.55rem;
  align-items: center;
}
.admin-user-search {
  flex: 1 1 8rem;
  min-width: 7rem;
  padding: 0.35rem 0.55rem;
  border-radius: 8px;
  border: 1px solid var(--border, #2a2a36);
  background: var(--bg2, #14141c);
  color: var(--text, #e8e8ef);
  font-size: 0.85rem;
}
.admin-user-sort,
.admin-user-order {
  padding: 0.35rem 0.4rem;
  border-radius: 8px;
  border: 1px solid var(--border, #2a2a36);
  background: var(--bg2, #14141c);
  color: var(--text, #e8e8ef);
  font-size: 0.8rem;
  max-width: 8rem;
}
.admin-attr-summary {
  margin: 0 0 0.55rem;
  font-size: 0.9rem;
  color: var(--text, #e8e8ef);
}
.admin-attr-sources {
  margin-bottom: 0.25rem;
}
.admin-attr-cell {
  max-width: 11rem;
  font-size: 0.78rem;
  line-height: 1.3;
  word-break: break-word;
}
.admin-badge {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 6px;
  font-size: 0.72rem;
  background: #2a2a36;
}
.admin-badge.ok { background: color-mix(in srgb, #22c55e 25%, #1a1a24); color: #86efac; }
.admin-badge.warn { background: color-mix(in srgb, #eab308 25%, #1a1a24); color: #fde047; }
.admin-badge.off { background: #2a2a36; color: var(--hint); }

/* —— Relationship bond meter (Stranger ↔ Soulmate / Enemies) —— */
.bond-meter {
  flex-shrink: 0;
  padding: 10px 14px 12px;
  border-top: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg2) 94%, transparent);
  position: sticky;
  bottom: 0;
  z-index: 3;
}
.bond-meter.hidden { display: none !important; }
/* Sit above owner actions when both sticky */
.chat-profile .bond-meter { bottom: 0; }
.chat-profile:has(.profile-owner-actions:not(.hidden)) .bond-meter {
  /* owner actions also sticky; bond sits just above them in flex column order */
  position: sticky;
  bottom: 0;
  z-index: 3;
}
.bond-meter-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--hint);
}
.heat-icon {
  display: inline;
  font-size: 0.95em;
  line-height: 1;
  vertical-align: -0.05em;
  margin-left: 0.15em;
}
/*
 * Explicit devil PNG (transparent padding) — default size matches the Profiles
 * card bottom-right mood glyph (no relationship). Use everywhere: feed, pills,
 * safety toggle, create heat, cast tags, etc.
 */
.heat-icon-img,
img.heat-icon-img,
.heat-icon.heat-icon-img {
  display: inline-block;
  width: 1.35em !important;
  height: 1.35em !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain;
  vertical-align: -0.22em;
  margin-left: 0.1em;
  flex-shrink: 0;
  background: transparent !important;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45));
}
.bond-meter-label {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--text);
}
.bond-meter-label.side-green { color: #5ddea0; }
.bond-meter-label.side-red { color: #ff7a7a; }
.bond-meter-label.side-neutral { color: var(--hint); }
.bond-track {
  position: relative;
  height: 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--border) 70%, #222);
  overflow: hidden;
}
.bond-track-center {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 2px;
  margin-left: -1px;
  background: color-mix(in srgb, var(--text) 35%, transparent);
  z-index: 1;
}
.bond-fill {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 0;
  border-radius: 999px;
  transition: width 0.35s ease, left 0.35s ease, right 0.35s ease;
}
.bond-fill.side-green {
  left: 50%;
  background: linear-gradient(90deg, #2f9e6b, #5ddea0);
}
.bond-fill.side-red {
  right: 50%;
  background: linear-gradient(270deg, #c44, #ff7a7a);
}
/* List card bond / relationship tag */
.pill.bond-tag {
  font-size: 0.68rem;
  font-weight: 650;
  border: 1px solid transparent;
  line-height: 1.25;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pill.bond-tag.side-green {
  color: #5ddea0;
  background: color-mix(in srgb, #5ddea0 14%, transparent);
  border-color: color-mix(in srgb, #5ddea0 35%, transparent);
}
.pill.bond-tag.side-red {
  color: #ff8a8a;
  background: color-mix(in srgb, #e55 14%, transparent);
  border-color: color-mix(in srgb, #e55 35%, transparent);
}
.pill.bond-tag.side-neutral {
  color: var(--hint);
  background: color-mix(in srgb, var(--btn) 10%, transparent);
  border-color: var(--border);
}

/* —— Group / theme rooms (full-height workspace like chats) —— */
.page-groups-workspace {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  height: 100%;
  margin: 0;
  padding: 0 !important;
}
.group-workspace {
  flex: 1;
  min-height: 0;
  display: grid;
  /* Left column matches chat list width; right ~ chat profile pane */
  grid-template-columns: minmax(200px, 28%) minmax(0, 1fr) minmax(242px, 308px);
  gap: 0;
  height: 100%;
  max-height: 100%;
  background: var(--bg);
  border-top: 1px solid var(--border);
}
/* New Game / empty: left list + center only — hide right Game Room card */
.group-workspace.group-no-card {
  grid-template-columns: minmax(200px, 28%) minmax(0, 1fr);
}
.group-workspace.group-no-card .group-theme-pane {
  display: none !important;
}
/* Match .chat-list-pane sizing / chrome */
.group-list-pane {
  border-right: 1px solid var(--border);
  background: var(--bg2);
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
  padding: 12px 8px;
  overflow: hidden;
}
.group-list-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  margin-bottom: 8px;
  padding: 0 4px;
  flex-shrink: 0;
}
.group-list-head h2 {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
}
.group-list-head .group-add-btn {
  margin-left: auto;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}
.group-list-head .group-add-btn:hover {
  border-color: color-mix(in srgb, var(--btn) 45%, var(--border));
  color: var(--accent, var(--btn));
  background: color-mix(in srgb, var(--btn) 12%, var(--card));
}
.group-list-pane .chats-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}
.group-theme-pane-sheet-head {
  display: none;
}
.group-card-view-btn,
.chatroom-head-actions .group-card-view-btn {
  display: none; /* mobile only — override .icon-btn display */
}
.group-theme-pane {
  border-right: none;
  border-left: 1px solid var(--border);
  background: var(--bg2);
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  height: 100%;
  position: relative;
  /* Same gallery gutters as profile: top matches left/right */
  padding: 4px 4px 0;
  overflow: hidden; /* sticky footer lives in pane */
}
.group-theme-pane-scroll {
  flex: 1;
  min-height: 0;
  min-width: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding-bottom: 8px;
  container-type: inline-size;
  container-name: game-gal;
}
/* Sticky bottom actions (edit cast + delete) */
/* Edit cast + Delete live in .chatroom-head-actions (room header, right) */
/* Theme room gallery — same slideshow chrome as chat profile pane */
.group-theme-gallery {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin: 0 0 10px;
}
.group-theme-gallery.hidden { display: none !important; }
.group-theme-slideshow.profile-slideshow {
  position: relative;
  top: auto;
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
  margin: 0 0 12px;
  border-radius: 12px;
  min-height: 0;
  box-sizing: border-box;
  /* Landscape multi-person stills — width always fills pane */
  aspect-ratio: 16 / 10;
  height: auto;
  max-height: min(70vh, calc((var(--ws-detail-w, 300px) - 8px) * 10 / 16));
  cursor: zoom-in;
  overflow: hidden;
  display: block;
  background: #0a0a0e;
}
@supports (height: 1cqi) {
  .group-theme-slideshow.profile-slideshow {
    aspect-ratio: auto;
    height: min(calc(100cqi * 10 / 16), 70vh);
    max-height: none;
  }
}
.group-theme-slideshow .profile-video.group-theme-gallery-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  /* Fill frame — no side bars */
  object-fit: cover;
  object-position: center center;
  z-index: 1;
  pointer-events: none;
  background: #0a0a0e;
}
.group-theme-slideshow .profile-photo.group-theme-gallery-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  min-height: 0;
  aspect-ratio: unset;
  object-fit: cover;
  object-position: center center;
  display: block;
  background: #1a1a24;
  margin: 0;
  z-index: 0;
}
/* Dots use shared .slide-dot styles from chat profile */
.group-theme-slideshow:not(.has-photo) .slide-nav,
.group-theme-slideshow:not(.has-photo) .slide-dots {
  display: none;
}
.group-theme-gallery-empty {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  text-align: center;
}
.group-theme-slideshow.has-photo .group-theme-gallery-empty { display: none; }
/* Empty gallery: soft landscape multi-figure placeholder under the hint text */
.group-theme-slideshow:not(.has-photo) .group-theme-gallery-img {
  opacity: 0.55;
  filter: saturate(0.85);
}
.group-theme-slideshow:not(.has-photo) .group-theme-gallery-empty { display: flex; }
/* While generating, always show landscape mannequin (never empty/opacity-0 slot). */
.group-theme-slideshow.is-generating {
  background: #111;
}
.group-theme-slideshow.is-generating .group-theme-gallery-img {
  opacity: 1 !important;
  object-fit: cover;
  object-position: center center;
}
.group-theme-slideshow.is-generating .group-theme-gallery-empty {
  display: none !important;
}
/* Same icon row as chat profile (.profile-icon-actions: flex-start) */
.group-theme-image-actions.profile-icon-actions {
  justify-content: flex-start;
  margin: 0 0 12px;
}
.group-theme-image-actions .icon-btn:disabled,
.group-theme-image-actions .icon-btn.disabled {
  opacity: 0.35;
  pointer-events: none;
}
.group-theme-cover {
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: 12px;
  object-fit: cover;
  object-position: center top;
  display: block;
  margin: 0 0 10px;
  background: #1a1a24;
  border: 1px solid var(--border);
}
.group-theme-cover-ph {
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: 12px;
  margin: 0 0 10px;
  background: linear-gradient(135deg, #2a1f3d, #5b3d8a 55%, #a78bfa);
  border: 1px solid var(--border);
}
.cast-gender-toggle {
  display: inline-flex;
  gap: 4px;
  margin-left: auto;
}
.cast-gender-toggle button {
  font: inherit;
  font-size: 0.68rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--hint);
  cursor: pointer;
}
.cast-gender-toggle button.is-on {
  color: var(--text);
  border-color: color-mix(in srgb, var(--btn) 45%, var(--border));
  background: color-mix(in srgb, var(--btn) 16%, var(--card));
}
/* Theme room rows (left list) — match chat-row density */
.theme-row {
  display: flex;
  gap: 8px;
  align-items: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 6px 8px;
  cursor: pointer;
  text-align: left;
  color: inherit;
  font: inherit;
  width: 100%;
  transition: background 0.12s, border-color 0.12s;
}
.theme-row:hover {
  background: var(--card);
  border-color: var(--border);
}
.theme-row.active {
  background: color-mix(in srgb, var(--btn) 18%, var(--card));
  border-color: color-mix(in srgb, var(--btn) 35%, var(--border));
}
.theme-row-media {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  overflow: hidden;
  background: #1a1a24;
  border: 1px solid var(--border);
}
.theme-row-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}
.theme-row-body {
  flex: 1;
  min-width: 0;
  font-size: 0.86rem;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.theme-row-body strong { font-weight: 600; }
.theme-row-body .scene-sep { color: var(--hint); font-weight: 400; }
.group-center-pane {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  height: 100%;
  overflow: hidden;
  background: var(--bg);
}
.group-active {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  height: 100%;
  /* Let the edit-icon story bubble paint over the message thread */
  overflow: visible;
}
#groupActive .chatroom-head {
  z-index: 12;
}
.group-theme-grid {
  display: grid;
  /* Wider cards — closer to pack gallery cover width (~300px) */
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  gap: 14px;
  margin: 12px 0;
}
.group-theme-card-pick {
  text-align: left;
  padding: 0;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text);
  cursor: pointer;
  font: inherit;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.group-theme-card-pick:hover { border-color: color-mix(in srgb, var(--btn) 45%, var(--border)); }
.group-theme-card-pick .group-theme-pick-media {
  position: relative;
  width: 100%;
  /* Double width as height (2:1), matches wide gallery stills */
  aspect-ratio: 2 / 1;
  overflow: hidden;
  background: #1a1a24;
  flex-shrink: 0;
}
.group-theme-card-pick .group-theme-pick-cover {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  border-radius: 0;
  object-fit: cover;
  display: block;
  margin: 0;
  background: #1a1a24;
}
/* Games catalog — landscape first-party promos (same grid cell as pack cards). */
.group-theme-card-pick.is-promo-ad {
  cursor: pointer;
  border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
  background: color-mix(in srgb, var(--accent) 8%, #111);
  padding: 0;
  text-align: left;
  font: inherit;
  color: inherit;
}
.group-theme-card-pick.is-promo-ad:hover {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
}
.group-theme-card-pick.is-promo-ad .group-theme-pick-media {
  flex: 1 1 auto;
  width: 100%;
  /* Match catalog covers (2:1 landscape). */
  aspect-ratio: 2 / 1;
  min-height: 0;
  padding: 0;
  position: relative;
  overflow: hidden;
}
.group-theme-card-pick.is-promo-ad.has-promo-art .group-theme-pick-media {
  /* Full card = landscape creative only (no title strip). */
  flex: 1 1 auto;
}
.group-theme-card-pick.is-promo-ad .promo-ad-art,
.group-theme-card-pick.is-promo-ad .group-theme-pick-cover.promo-ad-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
  display: block;
  z-index: 0;
  pointer-events: none;
  background: #0a0a0c;
}
.group-theme-card-pick.is-promo-ad .promo-ad-sponsored-badge {
  top: 8px;
  left: 8px;
}
.group-theme-card-pick.is-promo-ad .promo-ad-inner {
  padding: 16px 14px;
  width: 100%;
  box-sizing: border-box;
}
.group-theme-card-pick .group-theme-pick-body {
  padding: 10px 12px 12px;
  min-width: 0;
}
.group-theme-card-pick h4 {
  margin: 0 0 4px;
  font-size: 0.98rem;
  font-weight: 650;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.group-theme-card-pick p {
  margin: 0;
  font-size: 0.8rem;
  color: var(--hint);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
}
.group-theme-card-pick .badge-coin {
  display: inline-block; margin-top: 8px; font-size: 0.72rem;
  color: #e0b03a;
}
.group-cast-row {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  margin: 8px 0; padding: 8px 0; border-bottom: 1px solid var(--border);
}
.group-cast-row label { min-width: 7rem; font-weight: 600; font-size: 0.9rem; }
.group-cast-row select {
  flex: 1; min-width: 10rem;
  background: var(--card); color: var(--text);
  border: 1px solid var(--border); border-radius: 8px; padding: 8px;
  font: inherit;
}
/* Theme thread = same layout as 1:1 chat (.chat-thread / .chat-messages / .bubble) */
.group-thread-wrap {
  /* inherits .chat-thread when both classes present; keep fallback */
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
/* Cast speaker name above assistant bubbles (multi-person only) */
.bubble .bubble-who {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  color: var(--hint);
  margin: 0 0 4px;
  font-weight: 600;
  line-height: 1.2;
}
/* Cast speaker profile DP (preferred) before name */
.bubble .bubble-who-dp {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  display: block;
  background: color-mix(in srgb, var(--border, #333) 55%, transparent);
  border: 1px solid color-mix(in srgb, var(--border, #444) 70%, transparent);
}
/* images/dp_custom_emoji_round.png — circular emoji badge fallback */
.bubble .bubble-who-emoji {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  display: block;
}
.bubble .bubble-who-name {
  min-width: 0;
}
.bubble.user .bubble-who { display: none; }
.bubble.system .bubble-who { display: none; }
/* Watching bar — status left, actions right (same primary chrome as chat Send) */
.group-spectator-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-top: 1px solid var(--border);
  background: var(--bg2);
  flex-shrink: 0;
  padding-bottom: max(10px, var(--safe-bottom));
  padding-left: max(12px, var(--safe-left));
  padding-right: max(12px, var(--safe-right));
}
.group-spectator-hint {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  line-height: 1.35;
}
.group-spectator-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
  margin-left: auto;
  flex-shrink: 0;
}
/* Match compose Send height/weight */
.group-spectator-actions .btn.primary {
  min-height: 40px;
  padding: 0 16px;
  font-weight: 600;
}
.group-theme-card { padding: 4px 2px 4px 7px; font-size: 0.88rem; }
.group-theme-card h3 { margin: 0 0 8px; font-size: 1rem; }
.group-scene-btn {
  display: block; width: 100%; text-align: left;
  margin: 4px 0; padding: 8px 10px; border-radius: 10px;
  border: 1px solid var(--border); background: var(--card); color: var(--text);
  font: inherit; cursor: pointer;
}
.group-scene-btn.active { border-color: var(--btn); background: color-mix(in srgb, var(--btn) 14%, var(--card)); }
.group-scene-btn .parallel { font-size: 0.7rem; color: var(--hint); }
.group-roster-item { display: flex; justify-content: space-between; gap: 6px; padding: 6px 0; border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent); font-size: 0.82rem; }
.group-play-as { margin: 10px 0; width: 100%; }
/* Tablet: stack columns, keep usable heights (list stays visible — not mobile hide) */
@media (max-width: 900px) and (min-width: 769px) {
  .group-workspace {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0, 26vh) minmax(0, 1fr) minmax(0, 30vh);
    height: 100%;
    max-height: 100%;
  }
  .group-workspace.group-no-card {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0, 26vh) minmax(0, 1fr);
  }
  .group-list-pane { max-height: 26vh; overflow: auto; }
  .group-center-pane { min-height: 0; overflow: hidden; }
  .group-theme-pane {
    border-left: none;
    border-top: 1px solid var(--border);
    max-height: 30vh;
    overflow: hidden;
  }
}

/* Phones: match chat mobile — list OR room, not three crushed panes */
/* Phone portrait, or phone landscape (short height → keep mobile UI, not desktop) */
@media (max-width: 768px), (orientation: landscape) and (max-height: 540px) and (max-width: 960px) {
  .group-workspace {
    grid-template-columns: 1fr !important;
    grid-template-rows: 1fr !important;
    height: 100%;
    max-height: 100%;
    min-height: 0;
  }
  .group-list-pane {
    max-height: none !important;
    height: 100%;
    min-height: 0;
    overflow: hidden;
    border-right: none;
    border-bottom: none;
  }
  .group-list-pane .chats-list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  /* Idle: rooms list only (like chat list) */
  .group-workspace:not(:has(#groupActive:not(.hidden))):not(:has(#groupCreate:not(.hidden))) .group-center-pane,
  .group-workspace:not(:has(#groupActive:not(.hidden))):not(:has(#groupCreate:not(.hidden))) .group-theme-pane {
    display: none !important;
  }
  /* Active room / create: full-height center, hide list (like open chat) */
  .group-workspace:has(#groupActive:not(.hidden)) .group-list-pane,
  .group-workspace:has(#groupCreate:not(.hidden)) .group-list-pane {
    display: none !important;
  }
  .group-workspace:has(#groupActive:not(.hidden)),
  .group-workspace:has(#groupCreate:not(.hidden)) {
    grid-template-rows: 1fr !important;
  }
  .group-workspace:has(#groupActive:not(.hidden)) .group-center-pane {
    min-height: 0;
    height: 100%;
    max-height: 100%;
    overflow: hidden;
  }
  /* Theme card hidden until › opens full-screen sheet */
  .group-workspace:has(#groupActive:not(.hidden)):not(.group-card-open) .group-theme-pane {
    display: none !important;
  }
  .group-workspace:has(#groupCreate:not(.hidden)) .group-theme-pane {
    display: none !important;
  }
  /* Arrow next to delete — open card / gallery sheet */
  .group-card-view-btn {
    display: inline-flex !important;
  }
  .group-card-view-btn svg {
    transition: transform 0.18s ease;
  }
  .group-workspace.group-card-open .group-card-view-btn svg {
    transform: rotate(90deg);
  }
  .group-theme-pane-sheet-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-shrink: 0;
    padding: 10px 12px;
    padding-top: max(10px, var(--safe-top));
    border-bottom: 1px solid var(--border);
    background: var(--bg2);
  }
  .group-theme-sheet-title {
    font-size: 0.95rem;
  }
  .group-theme-pane-sheet-head .icon-btn {
    width: 36px;
    height: 36px;
    font-size: 1.35rem;
    line-height: 1;
  }
  /* Full-screen card sheet — specificity must beat :has(#groupActive) hide rule */
  .group-workspace.group-card-open:has(#groupActive:not(.hidden)) .group-theme-pane,
  .group-workspace.group-card-open .group-theme-pane {
    display: flex !important;
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    z-index: 120 !important;
    max-height: none !important;
    width: 100% !important;
    height: 100% !important;
    border: none !important;
    background: var(--bg) !important;
    flex-direction: column !important;
    padding: 0 !important;
    padding-bottom: max(12px, var(--safe-bottom)) !important;
    overflow: hidden !important;
    pointer-events: auto !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  .group-workspace.group-card-open .group-theme-pane-scroll {
    flex: 1;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 12px 14px 20px;
  }
  .group-workspace.group-card-open .group-theme-pane-scroll {
    container-type: inline-size;
    padding-top: 4px !important;
    padding-left: 4px !important;
    padding-right: 4px !important;
  }
  .group-workspace.group-card-open .group-theme-slideshow.profile-slideshow {
    width: 100% !important;
    min-width: 100% !important;
    aspect-ratio: 16 / 10;
    max-height: min(55vh, calc((100vw - 16px) * 10 / 16));
  }
  @supports (height: 1cqi) {
    .group-workspace.group-card-open .group-theme-slideshow.profile-slideshow {
      aspect-ratio: auto;
      height: min(calc(100cqi * 10 / 16), 55vh);
      max-height: none;
    }
  }
  .group-workspace.group-card-open .group-theme-slideshow .profile-photo.group-theme-gallery-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-height: none;
    object-fit: cover;
    object-position: center center;
  }
  .group-workspace.group-card-open .group-theme-slideshow .profile-video.group-theme-gallery-video {
    object-fit: cover;
    object-position: center center;
  }

  /* Body flag backup — guarantees sheet paints above shell */
  /* Hide bottom nav while card sheet is open — avoids blank menu strip under sheet */
  body.group-card-open .sidebar,
  body.group-card-open .mobile-more-backdrop {
    visibility: hidden !important;
    pointer-events: none !important;
    opacity: 0 !important;
  }
  body.group-card-open #groupThemePane {
    display: flex !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: 200 !important;
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    background: var(--bg) !important;
    flex-direction: column !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    overflow: hidden !important;
    padding: 0 !important;
    /* Full screen — no reserved blank strip for bottom nav */
    padding-bottom: max(12px, var(--safe-bottom)) !important;
  }
  body.group-card-open #groupThemePane .group-theme-pane-sheet-head {
    display: flex !important;
  }
  body.group-card-open #groupThemePane .group-theme-pane-scroll {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    /* Top matches left/right gutters (same as profile galleries) */
    padding: 4px 4px 20px !important;
  }
  .group-center-pane {
    min-height: 0;
    height: 100%;
    max-height: 100%;
    overflow: hidden;
  }
  .group-active {
    height: 100%;
    min-height: 0;
    max-height: 100%;
  }
  .group-thread-wrap {
    flex: 1;
    min-height: 0;
  }
  #groupMessages.chat-messages {
    padding: 12px 12px 8px;
    --gm-pad-x: 12px;
  }
  #groupForm.chat-compose {
    --autoplay-inset-right: max(5px, calc(var(--safe-right) / 2));
    padding: 8px 10px;
    padding-bottom: max(8px, var(--safe-bottom));
    padding-right: var(--autoplay-inset-right);
  }
  #groupForm.chat-compose textarea {
    font-size: 0.92rem;
    line-height: 1.4;
    min-height: 80px;
  }
  #groupForm.chat-compose .btn {
    min-height: 44px;
    padding: 10px 14px;
  }
  .group-theme-pane-scroll {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    flex: 1;
    min-height: 0;
  }
}

/* Theme cast picker — horizontal rails (manual scroll, ~2.5 cards visible) */
.group-cast-role { margin-bottom: 16px; }
.group-cast-role-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.cast-gender-pill {
  font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em;
  padding: 2px 8px; border-radius: 999px;
  background: color-mix(in srgb, var(--btn) 18%, var(--card));
  color: var(--text); border: 1px solid color-mix(in srgb, var(--btn) 30%, var(--border));
}
.cast-pick-rail {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--btn) 45%, transparent) transparent;
  padding-bottom: 4px;
  mask-image: linear-gradient(to right, #000 0%, #000 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, #000 0%, #000 92%, transparent 100%);
}
.cast-pick-rail::-webkit-scrollbar { height: 5px; }
.cast-pick-rail::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--btn) 45%, transparent);
  border-radius: 999px;
}
.cast-pick-tiles {
  display: flex;
  flex-wrap: nowrap;
  gap: 10px;
  width: max-content;
  padding: 2px 2px 6px;
}
/* ~2.5 cards visible: card = (100% - gaps) / 2.5 ≈ 40% of rail */
.cast-pick-rail {
  container-type: inline-size;
  container-name: cast-rail;
}
.cast-pick-tile {
  /* ~2.5 cards visible in the rail (fallback when cqi unsupported) */
  width: 120px;
  flex: 0 0 120px;
  min-width: 104px;
  padding: 0;
  border: 2px solid var(--border);
  border-radius: 14px;
  background: var(--card);
  color: var(--text);
  cursor: pointer;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  font: inherit;
  scroll-snap-align: start;
  box-shadow: 0 6px 16px rgba(0,0,0,0.22);
  transition: border-color 0.12s, box-shadow 0.12s;
}
@container cast-rail (min-width: 200px) {
  .cast-pick-tile {
    width: calc((100cqi - 20px) / 2.5);
    flex: 0 0 calc((100cqi - 20px) / 2.5);
  }
}
.cast-pick-tile.is-selected {
  border-color: var(--btn);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--btn) 40%, transparent),
    0 8px 18px rgba(0,0,0,0.28);
}
.cast-pick-media, .cast-pick-ph {
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  object-position: center top;
  display: block;
  background: #111;
}
.cast-pick-ph {
  display: flex; align-items: center; justify-content: center;
  font-size: 0.85rem; color: var(--hint);
}
.cast-pick-ph.you { font-weight: 700; color: var(--accent); font-size: 1rem; }
.cast-pick-meta {
  display: block;
  padding: 6px 8px 8px;
  font-size: 0.72rem;
  line-height: 1.25;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cast-pick-you .cast-pick-meta { text-align: center; }
.cast-edit-footer {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}
.cast-edit-footer .btn.block { width: 100%; }
.group-cast-edit-body {
  flex: 1;
  min-height: 0;
  overflow: auto;
}

/*
 * Cast columns (Edit Cast + New Theme cast): each role = a vertical column;
 * characters scroll in a vertical rail (~2.5 cards visible).
 */
.cast-edit-columns {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 12px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  padding: 4px 4px 6px;
  min-height: 0;
  box-sizing: border-box;
}
/* Role rail ≈ landing companion card width (grid min ~180px) */
.cast-edit-columns .group-cast-role.cast-edit-col {
  flex: 0 0 168px;
  min-width: 160px;
  max-width: 180px;
  width: 168px;
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
  align-self: stretch;
  background: color-mix(in srgb, var(--card) 70%, transparent);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 10px 12px;
  box-sizing: border-box;
}
.cast-edit-columns .group-cast-role-head {
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  margin-bottom: 10px;
  flex-shrink: 0;
}
.cast-edit-columns .group-cast-role-head .cast-role-title-row {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  width: 100%;
}
/* Edit icon before name; name ellipsizes inside the card (no wrap to next column) */
.cast-edit-columns .group-cast-role-head strong,
.cast-edit-columns .group-cast-role-head .cast-role-title-text {
  font-size: 0.98rem;
  font-weight: 600;
  line-height: 1.25;
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cast-edit-columns .cast-role-title-edit {
  flex: 0 0 auto;
  order: 0;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--hint);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.cast-edit-columns .cast-role-title-edit:hover {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}
.cast-edit-columns .cast-role-title-edit svg {
  width: 14px;
  height: 14px;
}
.cast-edit-columns .cast-role-title-input {
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 4px 6px;
  border: 1px solid var(--btn);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: 0.92rem;
  font-weight: 600;
}
/* Optional Women/Men — full rail width, equal halves */
.cast-edit-columns .cast-gender-toggle,
.cast-edit-columns .cast-gender-toggle-full {
  display: flex;
  width: 100%;
  margin-left: 0;
  justify-content: stretch;
  flex-wrap: nowrap;
  gap: 6px;
}
.cast-edit-columns .cast-gender-toggle button,
.cast-edit-columns .cast-gender-toggle-full button {
  flex: 1 1 0;
  min-width: 0;
  font-size: 0.82rem;
  font-weight: 600;
  padding: 7px 6px;
  line-height: 1.2;
  border-radius: 999px;
  text-align: center;
}
/* Relationship / Yourself under Women|Men for the selected cast card */
.cast-edit-columns .cast-role-rel-slot {
  display: flex;
  width: 100%;
  min-width: 0;
  margin-top: 2px;
}
.cast-edit-columns .cast-role-rel-slot .cast-yourself-tag,
.cast-edit-columns .cast-role-rel-slot .cast-rel-tag {
  max-width: 100%;
  width: 100%;
  justify-content: center;
  box-sizing: border-box;
}
/* Vertical rail — portrait cards like landing companions (2:3) */
.cast-edit-columns .cast-pick-rail-vertical,
.group-cast-edit-body .cast-pick-rail-vertical {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  width: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: y proximity;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--btn) 45%, transparent) transparent;
  padding: 0;
  mask-image: none;
  -webkit-mask-image: none;
  container-type: normal;
}
.cast-edit-columns .cast-pick-rail-vertical::-webkit-scrollbar {
  width: 5px;
  height: auto;
}
.cast-edit-columns .cast-pick-rail-vertical .cast-pick-tiles {
  flex-direction: column;
  flex-wrap: nowrap;
  width: 100%;
  gap: 12px;
  padding: 2px 0 6px;
}
/* Card chrome aligned with .comp-card */
.cast-edit-columns .cast-pick-rail-vertical .cast-pick-tile {
  width: 100%;
  flex: 0 0 auto;
  min-width: 0;
  max-width: none;
  scroll-snap-align: start;
  border-radius: var(--radius);
  border-width: 1px;
  position: relative;
  padding: 0;
  box-sizing: border-box;
  background: var(--card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 0;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}
.cast-edit-columns .cast-pick-rail-vertical .cast-pick-tile.is-selected {
  border-color: color-mix(in srgb, var(--btn) 65%, var(--border));
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--btn) 35%, transparent),
    0 6px 16px rgba(0, 0, 0, 0.22);
}
.cast-edit-columns .cast-pick-rail-vertical .cast-pick-media,
.cast-edit-columns .cast-pick-rail-vertical .cast-pick-ph {
  aspect-ratio: 2 / 3;
  width: 100%;
  max-height: none;
  border-radius: 0;
  object-fit: cover;
  object-position: center top;
  flex-shrink: 0;
}
.cast-edit-columns .cast-pick-rail-vertical .cast-pick-meta {
  padding: 8px 10px 10px;
  font-size: 0.88rem;
  font-weight: 600;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  display: block;
  min-width: 0;
}
.cast-edit-columns .cast-pick-name-line {
  display: flex;
  align-items: baseline;
  min-width: 0;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
}
.cast-edit-columns .cast-pick-name {
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
}
.cast-edit-columns .cast-pick-age {
  flex: 0 0 auto;
  color: var(--hint);
  font-weight: 500;
  font-size: 0.8rem;
}
.cast-rel-tag-slot {
  display: flex;
  min-width: 0;
  width: 100%;
}
/* Match Yourself + relationship tags (same size under gender chips) */
.cast-yourself-tag,
.cast-rel-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.2em;
  max-width: 100%;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
  padding: 7px 6px;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.2;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--card) 80%, var(--bg));
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cast-yourself-tag {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
  background: color-mix(in srgb, var(--accent) 12%, var(--card));
  cursor: default;
}
button.cast-rel-tag {
  cursor: pointer;
  font: inherit;
  text-align: center;
}
button.cast-rel-tag:hover {
  border-color: color-mix(in srgb, var(--btn) 50%, var(--border));
}
.cast-rel-tag.side-green {
  color: #5ddea0;
  border-color: color-mix(in srgb, #5ddea0 35%, var(--border));
}
.cast-rel-tag.side-red {
  color: #ff7a7a;
  border-color: color-mix(in srgb, #ff7a7a 35%, var(--border));
}
.cast-rel-tag .heat-icon {
  margin-left: 0.12em;
  font-size: 0.95em;
}
.cast-rel-tag .heat-icon-img {
  margin-left: 0.1em;
  /* size from global .heat-icon-img (1.35em) */
  vertical-align: -0.18em;
  object-fit: contain;
}

/* Relationship popup (cast picker) */
.cast-rel-popup-backdrop {
  position: fixed;
  inset: 0;
  z-index: 12000;
  background: color-mix(in srgb, #000 55%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  box-sizing: border-box;
}
.cast-rel-popup {
  width: min(420px, 100%);
  max-height: min(88vh, 640px);
  overflow: auto;
  background: var(--card);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.45);
  padding: 14px 16px 16px;
  box-sizing: border-box;
}
.cast-rel-popup-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}
.cast-rel-popup-close {
  border: none;
  background: transparent;
  color: var(--hint);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
}
.cast-rel-popup-sub {
  margin: 0 0 12px;
}
.cast-rel-section {
  margin-bottom: 12px;
}
.cast-rel-section-lab {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--hint);
  margin-bottom: 6px;
}
.cast-rel-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.cast-rel-chip {
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  border-radius: 999px;
  padding: 5px 10px;
  font-size: 0.8rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.25em;
}
.cast-rel-chip.is-on {
  border-color: var(--btn);
  background: color-mix(in srgb, var(--btn) 18%, var(--bg));
  color: var(--text);
  font-weight: 600;
}
.cast-rel-popup-foot {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}
.cast-edit-columns .cast-pick-rail-vertical .cast-pick-ph.you {
  font-size: 1rem;
  aspect-ratio: 2 / 3;
}
/* Edit mode: no pack prev/next */
.group-pack-setup-overlay.is-edit-mode .group-pack-edge-nav {
  display: none !important;
}
/* Edit name control on cast tiles */
.cast-pick-edit {
  position: absolute;
  top: 4px;
  right: 4px;
  z-index: 3;
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: color-mix(in srgb, #000 52%, transparent);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.85;
  transition: opacity 0.12s ease, background 0.12s ease;
}
.cast-pick-tile:hover .cast-pick-edit,
.cast-pick-edit:focus-visible {
  opacity: 1;
  background: color-mix(in srgb, var(--btn) 75%, #000);
}
.cast-pick-edit svg {
  width: 12px;
  height: 12px;
  display: block;
}
.cast-pick-name-input {
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 3px 4px;
  border: 1px solid var(--btn);
  border-radius: 4px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: 0.65rem;
  font-weight: 700;
}

/* New Theme cast panel — same column rails as Edit Cast */
.group-cast-panel {
  margin-top: 12px;
  min-height: 0;
}
.group-cast-panel #groupCastRoles.cast-edit-columns {
  max-height: min(58vh, 520px);
}
.group-create {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
.group-create-body {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 16px;
}

/* —— Full-screen pack setup popout (75% card, edge nav, story under gallery) —— */
.group-pack-setup-overlay {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(12px, var(--safe-top)) max(12px, var(--safe-right)) max(12px, var(--safe-bottom)) max(12px, var(--safe-left));
  box-sizing: border-box;
}
.group-pack-setup-overlay.hidden {
  display: none !important;
}
.group-pack-setup-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.62);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  cursor: pointer;
}

/* Full-height subtle prev/next spanning the viewport edges */
.group-pack-edge-nav {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 2;
  width: clamp(40px, 6vw, 72px);
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  color: color-mix(in srgb, #fff 42%, transparent);
  font-size: clamp(1.75rem, 3.5vw, 2.6rem);
  font-weight: 300;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.18s ease, background 0.18s ease;
  -webkit-tap-highlight-color: transparent;
}
.group-pack-edge-nav:hover:not(:disabled),
.group-pack-edge-nav:focus-visible:not(:disabled) {
  color: color-mix(in srgb, #fff 88%, transparent);
  background: color-mix(in srgb, #fff 6%, transparent);
  outline: none;
}
.group-pack-edge-nav:disabled {
  opacity: 0.22;
  cursor: default;
}
.group-pack-edge-nav.prev { left: 0; }
.group-pack-edge-nav.next { right: 0; }

/* Card: ~75% width, full available height */
.group-pack-setup-card {
  position: relative;
  z-index: 3;
  width: min(75vw, 960px);
  height: calc(var(--app-height) - max(24px, var(--safe-top) + var(--safe-bottom)));
  max-width: calc(100vw - 24px - clamp(40px, 6vw, 72px) * 2);
  max-height: calc(var(--app-height) - max(24px, var(--safe-top) + var(--safe-bottom)));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) + 4px);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55);
}
.group-pack-setup-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-shrink: 0;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--bg2);
}
.group-pack-setup-card-head strong {
  font-size: 1.05rem;
  font-weight: 600;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.group-pack-setup-close {
  font-size: 1.35rem;
  line-height: 1;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
}
.group-pack-setup-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  /* When cast is collapsed this pane grows — story fills it naturally */
  display: flex;
  flex-direction: column;
}
/* Natural height inside the scroll pane — don’t flex-trap the book page */
.group-pack-setup-scroll > .group-pack-story-wrap {
  flex: 0 0 auto;
  width: 100%;
  min-height: 0;
}

/*
 * Book page: one formatting context, gallery as left float.
 * Title / deck / body are in-flow siblings so line boxes wrap beside the photo
 * and reflow full-width under it (no permanent right column / empty left void).
 */
.group-pack-story-wrap.group-pack-newspaper,
.group-pack-newspaper.group-pack-story-wrap {
  /* flow-root contains the float; line boxes of siblings still wrap around it */
  display: flow-root;
  padding: 16px 18px 20px;
  width: 100%;
  height: auto;
  min-height: 0;
  box-sizing: border-box;
  overflow: visible;
}
.group-pack-gallery-block {
  float: left;
  width: min(38%, 300px);
  max-width: 42%;
  margin: 0 1.15rem 0.85rem 0;
  position: relative;
  z-index: 1;
  shape-outside: margin-box;
  shape-margin: 6px;
}
.group-pack-gallery {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  background: color-mix(in srgb, var(--bg) 40%, #000);
  width: 100%;
  aspect-ratio: 3 / 2;
  height: auto;
  min-height: 0;
  margin: 0;
  box-shadow: 0 8px 22px color-mix(in srgb, #000 28%, transparent);
}
/* Dissolve wrappers so their children participate in the article float flow */
.group-pack-story-side,
.group-pack-story-flow {
  display: contents;
}
/*
 * Critical: body must NOT be a block box beside the float (that leaves a permanent
 * empty column under the photo). display:contents promotes p/h3/figure children into
 * the article’s flow so they wrap beside the gallery and fill under it.
 */
.group-pack-story-body {
  display: contents;
}
.group-pack-story-body .story-progress-h {
  /* Start progress on a full-width band under the float when it appears */
  clear: both;
  margin: 1.1em 0 0.65em;
  padding-top: 0.55em;
  border-top: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
  font-size: 0.88rem;
  font-weight: 650;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--accent);
}
.group-pack-story-body .story-chapter {
  margin: 0 0 1.15em;
  padding: 0 0 0.9em;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
}
.group-pack-story-body .story-chapter:last-child {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 0.25em;
}
.group-pack-story-body .story-chapter-head {
  font-weight: 650;
  font-size: 1rem;
  margin: 0 0 0.5em;
  color: var(--text);
  letter-spacing: 0.005em;
  line-height: 1.35;
}
.group-pack-story-body .story-chapter-name {
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--text);
}
.group-pack-story-body .story-chapter-meta {
  font-weight: 500;
  font-size: 0.88rem;
  color: var(--hint);
}
.group-pack-story-body .story-chapter-body {
  margin: 0 0 0.7em;
  line-height: 1.65;
  color: color-mix(in srgb, var(--text) 92%, var(--hint));
  font-size: 0.9rem;
}
/* Chapter plates — float so surrounding prose wraps like a book */
.group-pack-story-body .story-chapter-fig {
  float: right;
  width: min(46%, 240px);
  margin: 0.15em 0 0.75em 1em;
  padding: 0;
  border-radius: 8px;
  overflow: hidden;
  background: color-mix(in srgb, var(--bg) 35%, #000);
  border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
  box-shadow: 0 4px 14px color-mix(in srgb, #000 18%, transparent);
  shape-outside: margin-box;
}
.group-pack-story-body .story-chapter-fig:nth-of-type(even) {
  float: left;
  margin: 0.15em 1em 0.75em 0;
}
/* Scene gens — landscape multi-person stills */
.group-pack-story-body .story-chapter-fig.is-scene {
  width: min(52%, 280px);
  aspect-ratio: 16 / 10;
}
.group-pack-story-body .story-chapter-fig.is-scene .story-chapter-img {
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: cover;
  object-position: center center;
}
/* Profile / companion portraits — keep 2:3 face crop (top-weighted) */
.group-pack-story-body .story-chapter-fig.is-portrait {
  width: min(38%, 168px);
  aspect-ratio: 2 / 3;
}
.group-pack-story-body .story-chapter-fig.is-portrait .story-chapter-img {
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: cover;
  object-position: center 18%; /* prefer face, not mid-torso crop */
}
.group-pack-story-body .story-chapter-img,
.group-pack-story-body .story-chapter-video {
  display: block;
  width: 100%;
  height: auto;
  max-height: min(28vh, 220px);
  object-fit: cover;
}
.group-pack-story-body .story-chapter-fig.is-scene .story-chapter-video,
.group-pack-story-body .story-chapter-fig.is-portrait .story-chapter-video {
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: cover;
}
.group-pack-story-body .story-chapter-fig.is-portrait .story-chapter-video {
  object-position: center 18%;
}
.group-pack-story-body .story-chapter-fig.is-scene .story-chapter-video {
  object-position: center center;
}
.group-pack-story-body .story-chapter::after {
  content: "";
  display: table;
  clear: both;
}
body.pack-setup-open {
  overflow: hidden;
}
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.group-pack-gal-frame {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.group-pack-gal-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: opacity 0.35s ease;
}
/* Empty pack gallery: keep landscape silhouette; never show HTML empty text */
.group-pack-gal-empty,
.group-pack-gal-empty.hidden {
  display: none !important;
}
.group-pack-gal-img.is-empty,
.group-pack-gal-img.is-placeholder,
.group-pack-gal-img.is-landscape-ph {
  display: block;
  object-fit: cover;
  object-position: center center;
}
.group-pack-gallery.is-empty .group-pack-gal-img {
  display: block;
  opacity: 0.95;
}
.group-pack-gal-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: color-mix(in srgb, #000 40%, transparent);
  color: #fff;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.15s ease, background 0.15s ease;
}
.group-pack-gallery:hover .group-pack-gal-nav,
.group-pack-gal-nav:focus-visible {
  opacity: 0.9;
}
.group-pack-gal-nav:hover {
  background: color-mix(in srgb, #000 62%, transparent);
}
.group-pack-gal-nav.prev { left: 8px; }
.group-pack-gal-nav.next { right: 8px; }
.group-pack-gal-nav.hidden { display: none; }
.group-pack-gal-dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 8px;
  display: flex;
  justify-content: center;
  gap: 5px;
  pointer-events: none;
}
.group-pack-gal-dots .slide-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: color-mix(in srgb, #fff 40%, transparent);
}
.group-pack-gal-dots .slide-dot.active {
  background: #fff;
}

/* Book prose — readable measure, wraps around floated gallery */
.group-pack-newspaper {
  min-width: 0;
  color: var(--text);
  font-family: inherit;
  max-width: none;
  margin: 0;
  box-sizing: border-box;
}
.group-pack-story-title {
  margin: 0 0 0.4em;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.015em;
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 45%, var(--border));
  padding-bottom: 8px;
  color: var(--text);
  /* let the title sit beside the float; no clear */
}
.group-pack-story-deck {
  margin: 0 0 0.85em;
  font-size: 0.9rem;
  font-style: italic;
  font-weight: 500;
  color: var(--hint);
  line-height: 1.5;
  padding-top: 0;
}
/* Typography targets children (body uses display:contents) */
.group-pack-newspaper .group-pack-story-body p,
.group-pack-newspaper > .group-pack-story-body p {
  margin: 0 0 0.85em;
  font-size: 0.93rem;
  line-height: 1.68;
  color: color-mix(in srgb, var(--text) 94%, var(--hint));
  text-align: left;
  hyphens: auto;
  -webkit-hyphens: auto;
  orphans: 2;
  widows: 2;
}
/* First baseline paragraph after the deck */
.group-pack-newspaper .group-pack-story-deck + .group-pack-story-body p:first-child,
.group-pack-newspaper .group-pack-story-body > p:first-child {
  font-size: 0.96rem;
  line-height: 1.7;
}
.group-pack-story-body h3 {
  /* No clear:both — scene heads can still sit beside the gallery;
     once past the float they naturally go full width under the photo. */
  margin: 1em 0 0.35em;
  padding-top: 0.45em;
  border-top: 1px solid color-mix(in srgb, var(--border) 65%, transparent);
  font-size: 0.95rem;
  font-weight: 650;
  text-transform: none;
  letter-spacing: 0.01em;
  color: var(--accent);
  line-height: 1.3;
}
.group-pack-story-body .scene-open {
  font-style: italic;
  color: var(--hint);
  font-size: 0.86rem;
  line-height: 1.55;
  margin: 0 0 0.75em;
}
.group-pack-story-body h3 + p {
  margin-top: 0.15em;
}
@media (max-width: 640px) {
  .group-pack-story-wrap.group-pack-newspaper,
  .group-pack-newspaper.group-pack-story-wrap {
    padding: 12px 12px 16px;
  }
  .group-pack-gallery-block {
    float: none;
    width: 100%;
    max-width: 100%;
    margin: 0 0 12px;
    shape-outside: none;
  }
  .group-pack-gallery {
    aspect-ratio: 3 / 2;
    height: auto;
  }
  .group-pack-story-title {
    font-size: 1.1rem;
  }
  .group-pack-story-body .story-chapter-fig,
  .group-pack-story-body .story-chapter-fig:nth-of-type(even) {
    float: none;
    width: 100%;
    max-width: none;
    margin: 0.5em 0 0.85em;
  }
  .group-pack-story-body .story-chapter-fig.is-portrait {
    width: min(52%, 200px);
    margin-left: auto;
    margin-right: auto;
  }
  .group-pack-story-body .story-chapter-fig.is-scene {
    width: 100%;
  }
  .group-pack-story-body .story-chapter-img {
    max-height: none;
  }
}

/* Choose Characters footer — starts collapsed; open ≈ 90% of setup card */
.group-cast-sticky {
  flex-shrink: 0;
  margin: 0;
  border-top: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg2) 94%, var(--bg));
  box-shadow: 0 -6px 20px color-mix(in srgb, #000 16%, transparent);
  display: flex;
  flex-direction: column;
  max-height: none;
  overflow: hidden;
  transition: height 0.2s ease, max-height 0.2s ease;
}
.group-cast-sticky-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-shrink: 0;
  padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px));
}
.group-cast-bar-left {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1 1 auto;
}
.group-cast-search-wrap {
  display: none;
  flex: 1 1 auto;
  min-width: 0;
  max-width: 220px;
  margin: 0;
}
/* Search visible only when cast is expanded */
.group-cast-sticky:not(.is-collapsed) .group-cast-search-wrap {
  display: block;
}
.group-cast-search {
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: 0.85rem;
  outline: none;
}
.group-cast-search:focus {
  border-color: color-mix(in srgb, var(--accent) 50%, var(--border));
}
.group-cast-search::placeholder {
  color: var(--hint);
}
.group-cast-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 7px 12px 7px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg) 55%, var(--card));
  color: var(--text);
  font: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  cursor: pointer;
  min-width: 0;
  box-shadow: 0 1px 0 color-mix(in srgb, #fff 4%, transparent);
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.group-cast-toggle:hover {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
  background: color-mix(in srgb, var(--accent) 10%, var(--card));
}
.group-cast-toggle:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent) 60%, transparent);
  outline-offset: 2px;
}
.group-cast-toggle-icon {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.group-cast-people-icon {
  color: var(--accent);
  flex-shrink: 0;
}
.group-cast-chevron-icon {
  color: var(--hint);
  flex-shrink: 0;
  transition: transform 0.2s ease;
}
/* Expanded (open): chevron points down = “collapse” */
.group-cast-sticky:not(.is-collapsed) .group-cast-chevron-icon {
  transform: rotate(0deg);
}
/* Collapsed: chevron points up = “expand” */
.group-cast-sticky.is-collapsed .group-cast-chevron-icon {
  transform: rotate(180deg);
}
.group-cast-toggle-label {
  letter-spacing: 0.01em;
}
.group-cast-sticky-cta {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  flex-shrink: 0;
}
.group-cast-sticky-cta > .btn {
  align-self: flex-end;
}
.group-cast-sticky-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0 12px 12px;
}
.group-cast-sticky.is-collapsed .group-cast-sticky-body {
  display: none;
}
/* Collapsed: bar only. Open: ~90% of the setup card height */
.group-cast-sticky.is-collapsed {
  height: auto;
  max-height: none;
  flex: 0 0 auto;
}
.group-cast-sticky:not(.is-collapsed) {
  height: 90%;
  max-height: 90%;
  flex: 0 0 auto;
}
.group-cast-sticky:not(.is-collapsed) .group-cast-sticky-bar {
  padding-bottom: 6px;
}
/*
 * Full-height flex chain inside open Choose Characters (setup overlay).
 * Beat global .cast-edit-columns max-height caps (58vh / 42vh) so rails fill the panel.
 */
.group-pack-setup-card .group-cast-sticky:not(.is-collapsed) {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.group-pack-setup-card .group-cast-sticky:not(.is-collapsed) .group-cast-sticky-body {
  flex: 1 1 auto;
  min-height: 0;
  height: 0; /* consume remaining sticky height under the bar */
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.group-pack-setup-card .group-cast-sticky:not(.is-collapsed) .group-cast-roles-sticky,
.group-pack-setup-card .group-cast-sticky:not(.is-collapsed) #groupCastRoles.cast-edit-columns {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: 100% !important;
  max-height: none !important;
  align-self: stretch;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}
.group-pack-setup-card .group-cast-sticky:not(.is-collapsed) .cast-edit-columns .group-cast-role.cast-edit-col {
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  align-self: stretch;
  display: flex;
  flex-direction: column;
}
.group-pack-setup-card .group-cast-sticky:not(.is-collapsed) .cast-edit-columns .cast-pick-rail-vertical,
.group-pack-setup-card .group-cast-sticky:not(.is-collapsed) .group-cast-edit-body .cast-pick-rail-vertical {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  max-height: none !important; /* override 58vh / 42vh caps */
  height: auto !important;
  overflow-x: hidden;
  overflow-y: auto;
}
.group-cast-sticky #groupCreateStatus,
.group-cast-sticky .group-create-status {
  margin: 0;
  min-height: 0;
  flex-shrink: 0;
  font-size: 0.85rem;
}

@media (max-width: 720px) {
  .group-pack-setup-card {
    width: min(94vw, 960px);
    height: calc(var(--app-height) - max(16px, var(--safe-top) + var(--safe-bottom)));
    max-width: calc(100vw - 16px);
    max-height: calc(var(--app-height) - max(16px, var(--safe-top) + var(--safe-bottom)));
  }
  .group-pack-edge-nav {
    width: 36px;
    font-size: 1.6rem;
  }
  .group-pack-story-wrap {
    padding: 12px 12px 16px;
  }
  .group-cast-sticky:not(.is-collapsed) {
    height: 90%;
    max-height: 90%;
  }
  .group-cast-sticky:not(.is-collapsed) .group-cast-sticky-body {
    height: 0;
  }
  .group-cast-toggle {
    padding: 6px 10px 6px 8px;
    font-size: 0.88rem;
  }
  .group-cast-search-wrap {
    max-width: 140px;
  }
}

.group-cast-panel .actions {
  position: sticky;
  bottom: 0;
  z-index: 2;
  margin-top: 12px;
  padding-top: 10px;
  background: linear-gradient(to top, var(--bg) 70%, transparent);
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* Wider Edit Cast modal on desktop (legacy overlay — not pack setup sticky) */
@media (min-width: 901px) {
  .group-cast-edit-overlay {
    padding: 24px;
  }
  .group-cast-edit-card {
    width: min(1100px, 96vw);
    max-width: 1100px;
    max-height: min(90vh, 900px);
  }
  /* Only legacy edit-card columns, not Choose Characters in setup overlay */
  .group-cast-edit-card .cast-edit-columns {
    min-height: min(58vh, 520px);
  }
  .group-cast-edit-card .cast-edit-columns .cast-pick-rail-vertical {
    max-height: min(58vh, 520px);
  }
  .group-cast-edit-card .cast-edit-columns .group-cast-role.cast-edit-col {
    min-width: 152px;
    max-width: 220px;
  }
}

/* Narrow phones: stack role columns, keep vertical rails */
@media (max-width: 600px) {
  .cast-edit-columns {
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: auto;
    min-height: 0;
  }
  .cast-edit-columns .group-cast-role.cast-edit-col {
    max-width: none;
    width: 100%;
    flex: 0 0 auto;
  }
  /* Legacy / non-overlay only — setup sticky rails stay full height */
  .cast-edit-columns .cast-pick-rail-vertical {
    max-height: 42vh;
  }
  .group-pack-setup-card .group-cast-sticky:not(.is-collapsed) .cast-edit-columns {
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
  }
  .group-pack-setup-card .group-cast-sticky:not(.is-collapsed) .cast-edit-columns .group-cast-role.cast-edit-col {
    width: 168px;
    max-width: 180px;
    flex: 0 0 168px;
    height: 100% !important;
  }
  .group-pack-setup-card .group-cast-sticky:not(.is-collapsed) .cast-edit-columns .cast-pick-rail-vertical {
    max-height: none !important;
  }
}
/* Ephemeral typing/photo/thinking status lives next to the camera FAB
   (.chat-thread-status), not as chat bubbles. */
#chatMessages .bubble.system.is-status,
#chatMessages .bubble.system.is-thinking,
#groupMessages .bubble.system.is-status,
#groupMessages .bubble.system.is-thinking {
  display: none; /* legacy; status is on the camera row */
}

/* Scene location banner: edge-to-edge in #groupMessages, fixed 100px height */
#groupMessages.chat-messages {
  --gm-pad-x: 14px; /* match .chat-messages horizontal padding */
}
#groupMessages .bubble.scene-banner-msg {
  align-self: stretch;
  /* Bleed past message pane padding for true edge-to-edge */
  width: calc(100% + 2 * var(--gm-pad-x));
  max-width: none;
  margin: 6px calc(-1 * var(--gm-pad-x)) 8px;
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
  border-radius: 0;
}
#groupMessages .scene-banner-frame {
  display: block;
  width: 100%;
  height: 100px;
  overflow: hidden;
  border-radius: 0;
  background: #121218;
  border: none;
  border-top: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
}
#groupMessages .scene-banner-img {
  display: block;
  width: 100%;
  height: 100px;
  object-fit: cover; /* always fill edge-to-edge; crop vertical if needed */
  object-position: center center;
  background: #121218;
}
#groupMessages .scene-banner-caption {
  margin-top: 8px;
  padding: 0 var(--gm-pad-x); /* caption stays in message gutter */
  font-size: 0.88rem;
  line-height: 1.4;
  color: var(--hint);
  font-style: italic;
}

/* Present strip — under the active scene button in the scenes list */
.group-theme-scenes {
  /* Match left inset on the right so scene cards don’t sit flush to the pane edge */
  padding-left: 7px;
  padding-right: 7px;
  box-sizing: border-box;
}
.group-scene-wrap {
  margin: 4px 0;
}
.group-scene-wrap .group-scene-btn {
  margin: 0;
}
.group-present-strip.under-scene {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: flex-end;
  padding: 8px 6px 8px 10px;
  margin: 0;
  border: 1px solid color-mix(in srgb, var(--btn) 28%, var(--border));
  border-top: none;
  border-radius: 0;
  background: color-mix(in srgb, var(--btn) 8%, var(--card));
}
.group-scene-wrap.is-active .group-scene-btn {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  margin-bottom: 0;
}
/* Description under characters (active scene); not storyline/blurb */
.group-scene-wrap .group-scene-desc {
  margin: 0 0 6px;
  padding: 6px 10px 10px;
  border: 1px solid color-mix(in srgb, var(--btn) 28%, var(--border));
  border-top: none;
  border-radius: 0 0 10px 10px;
  background: color-mix(in srgb, var(--btn) 6%, var(--card));
  line-height: 1.35;
}
.group-scene-wrap.is-active .group-present-strip.under-scene:last-child {
  border-radius: 0 0 10px 10px;
  margin-bottom: 6px;
  padding-bottom: 10px;
}
.group-present-strip.hidden { display: none !important; }
.present-card {
  position: relative;
  width: 52px; flex-shrink: 0; text-align: center;
}
.present-card.is-profile { cursor: pointer; }
.present-card.is-profile:hover img,
.present-card.is-profile:hover video {
  outline: 2px solid color-mix(in srgb, var(--btn) 55%, transparent);
  outline-offset: 1px;
}
.present-card img, .present-card video, .present-card .present-ph {
  width: 48px; height: 48px; border-radius: 10px;
  object-fit: cover;
  object-position: center top; /* face is usually in the top of the DP */
  display: block; margin: 0 auto; background: #111;
  border: 1px solid var(--border);
}
/* Silhouette / loading — never flash browser broken-image glyph */
.present-card img.present-face.is-placeholder,
.present-card img.present-face.is-broken,
.present-card img.present-face.is-loading {
  object-fit: cover;
  background: color-mix(in srgb, var(--card) 70%, #111);
}
.present-ph { display: flex; align-items: center; justify-content: center; font-size: 0.65rem; color: var(--hint); }
/* Site-wide: hide native broken-image icon/text if anything slips past JS */
img.is-broken {
  content: none;
  color: transparent;
  font-size: 0;
}
.present-name {
  display: block; margin-top: 2px; font-size: 0.62rem; color: var(--hint);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 52px;
}
.present-more {
  width: 48px; height: 48px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: var(--card); border: 1px dashed var(--border);
  font-weight: 700; font-size: 0.85rem; color: var(--text);
}
/* Remove from scene (room owner) */
.present-remove {
  position: absolute;
  top: -4px;
  right: -2px;
  z-index: 3;
  width: 18px;
  height: 18px;
  padding: 0;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, #fff 20%, transparent);
  background: color-mix(in srgb, #1a1a1a 82%, #c0392b);
  color: #fff;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.92;
}
.present-remove:hover {
  background: #c0392b;
  opacity: 1;
}
/* Invite character into scene */
.present-invite-wrap {
  position: relative;
  flex-shrink: 0;
  align-self: flex-end;
  margin-bottom: 14px; /* align with face row above name labels */
}
.present-invite-btn {
  min-width: 48px;
  height: 48px;
  padding: 0 10px;
  border-radius: 10px;
  border: 1px dashed color-mix(in srgb, var(--btn) 45%, var(--border));
  background: color-mix(in srgb, var(--btn) 10%, var(--card));
  color: var(--text);
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.present-invite-btn:hover:not(:disabled) {
  border-style: solid;
  border-color: var(--btn);
  background: color-mix(in srgb, var(--btn) 18%, var(--card));
}
.present-invite-btn:disabled {
  opacity: 0.45;
  cursor: default;
}
.present-invite-menu {
  position: absolute;
  left: 0;
  bottom: calc(100% + 6px);
  z-index: 20;
  min-width: 160px;
  max-width: 240px;
  max-height: 220px;
  overflow: auto;
  padding: 4px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--card);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}
.present-invite-menu.hidden { display: none !important; }
.present-invite-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  font-size: 0.82rem;
  cursor: pointer;
}
.present-invite-item:hover {
  background: color-mix(in srgb, var(--btn) 16%, transparent);
}

/* Live story objective (right pane) — 7px left inset matches profile details */
.group-plot-card {
  margin-top: 4px;
  padding: 8px 0 10px 7px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 8px;
  box-sizing: border-box;
}
.group-plot-card.hidden { display: none !important; }
.group-plot-card h4 {
  margin: 0 0 6px; font-size: 0.78rem; font-weight: 600;
  color: var(--hint); text-transform: uppercase; letter-spacing: 0.04em;
}
.group-plot-card .group-plot-obj {
  margin: 0 0 6px; font-size: 0.86rem; line-height: 1.35;
  color: var(--text);
}
.group-plot-card .group-plot-phase,
.group-plot-card .group-plot-exit,
.group-plot-card .group-plot-stakes {
  margin: 0 0 4px; line-height: 1.3;
}
.group-plot-card.in-book {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px 10px 7px;
  margin: 0 0 12px;
  background: color-mix(in srgb, var(--card) 88%, transparent);
}

/* Your bonds with cast — footer of right pane (like chat .bond-meter) */
.group-theme-pane > .group-my-bonds {
  flex-shrink: 0;
  margin: 0 -12px 0; /* bleed to pane edges (pane padding is 12px) */
  margin-top: auto;
  padding: 10px 12px max(10px, var(--safe-bottom, 0px));
  border-top: 1px solid var(--border);
  border-bottom: none;
  background: color-mix(in srgb, var(--bg2) 94%, transparent);
  position: relative;
  z-index: 3;
  max-height: min(40vh, 280px);
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.group-my-bonds {
  margin-top: 0;
  padding: 10px 12px;
}
.group-my-bonds.hidden { display: none !important; }
.group-my-bonds h4 {
  margin: 0 0 8px; font-size: 0.78rem; font-weight: 600;
  color: var(--hint); text-transform: uppercase; letter-spacing: 0.04em;
}
/* Mobile full-screen card sheet: full-bleed footer, no negative margin needed */
@media (max-width: 820px) {
  .group-workspace.group-card-open .group-theme-pane > .group-my-bonds,
  body.group-card-open #groupThemePane > .group-my-bonds {
    margin-left: 0;
    margin-right: 0;
    padding: 10px 14px max(12px, var(--safe-bottom));
  }
}
.group-bond-row {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 5px 0; font-size: 0.82rem;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
}
.group-bond-row:last-child { border-bottom: none; }
.group-bond-row .bond-who {
  min-width: 0; flex: 1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.group-bond-pill {
  flex-shrink: 0;
  font-size: 0.68rem; font-weight: 600;
  padding: 2px 8px; border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--card); color: var(--text);
}
.group-bond-pill.bond-green {
  color: #6ee7a8;
  border-color: color-mix(in srgb, #6ee7a8 40%, var(--border));
  background: color-mix(in srgb, #6ee7a8 12%, var(--card));
}
.group-bond-pill.bond-red {
  color: #f0a0a0;
  border-color: color-mix(in srgb, #f0a0a0 40%, var(--border));
  background: color-mix(in srgb, #f0a0a0 12%, var(--card));
}
.group-bond-pill.bond-neutral {
  color: var(--hint);
}

/* Theme compose + camera reuse 1:1 chat styles as-is (.chat-compose, .chat-camera-fab) */

/* Cast edit overlay */
.group-cast-edit-overlay {
  position: fixed; inset: 0; z-index: 80;
  background: rgba(0,0,0,0.55);
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
}
.group-cast-edit-overlay.hidden { display: none !important; }
.group-cast-edit-card {
  width: min(520px, 100%);
  max-height: min(80vh, 640px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 14px 16px 18px;
  box-shadow: 0 16px 48px rgba(0,0,0,0.45);
}
.group-cast-edit-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-bottom: 10px;
  flex-shrink: 0;
}
.group-cast-edit-head h3 { margin: 0; font-size: 1.05rem; }
.cast-edit-actions { margin-top: 14px; flex-direction: column; align-items: stretch; }

/* Desktop width for edit-cast is set with cast-edit-columns rules above */

/* —— Home feed: card wraps the full image (natural aspect), head/actions match —— */
.page-home {
  flex: 1;
  min-height: 0;
  height: 100%;
  max-height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  scroll-snap-type: y mandatory;
  scroll-padding-top: var(--home-peek, 10%);
  /* Clear mobile bottom nav + home safe area so last card / upgrade sits fully in view */
  scroll-padding-bottom: max(
    var(--home-peek, 10%),
    calc(var(--mobile-nav-h, 58px) + var(--safe-bottom) + 16px)
  );
}
/* Explicit safety: explicit icon (title, no click) + On / Blur / Off segments */
.safety-control {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  flex: 0 0 auto;
}
.safety-title {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  line-height: 0;
  pointer-events: none;
  user-select: none;
}
.safety-title .safety-ico-img {
  width: 1.35em;
  height: 1.35em;
  object-fit: contain;
  display: block;
  opacity: 0.92;
}
.safety-toggle {
  display: inline-flex;
  align-items: stretch;
  flex: 0 0 auto;
  border-radius: 999px;
  border: 1px solid var(--border, rgba(255, 255, 255, 0.12));
  background: color-mix(in srgb, var(--card, #16161f) 88%, #000);
  overflow: hidden;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset;
}
.safety-opt {
  appearance: none;
  border: 0;
  margin: 0;
  background: transparent;
  color: var(--muted, #9aa0b4);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1;
  padding: 0.38rem 0.62rem;
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
}
.safety-opt + .safety-opt {
  border-left: 1px solid var(--border, rgba(255, 255, 255, 0.1));
}
.safety-opt.is-active {
  background: color-mix(in srgb, var(--accent, #6c5ce7) 28%, transparent);
  color: var(--text, #f2f2f7);
}
.safety-opt:hover:not(:disabled):not(.is-active) {
  color: var(--text, #f2f2f7);
  background: color-mix(in srgb, var(--text, #fff) 6%, transparent);
}
.safety-opt:disabled,
.safety-opt[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
}
.safety-ico {
  font-size: 0.9rem;
  line-height: 1;
}
.safety-ico-img {
  width: 1.35em !important;
  height: 1.35em !important;
  object-fit: contain;
  display: block;
}
/* Feed sticky safety toggle removed on website (footer only). Keep host hidden if present. */
.safety-toggle-sticky {
  display: none !important;
}
/* Between language select and copyright in .footer-start */
.footer-safety-host {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  margin: 0;
}
.footer-safety-host .safety-control {
  transform: scale(0.9);
  transform-origin: center left;
}
/* Soft blur (safety = Blur) — feed, profile gallery, game room */
.home-card-media.is-explicit-blur,
.home-card.is-explicit-blur .home-card-media,
.profile-slideshow.is-explicit-blur,
.group-theme-slideshow.is-explicit-blur,
.group-theme-gallery.is-explicit-blur {
  overflow: hidden;
  position: relative;
}
.home-card-media.is-explicit-blur img,
.home-card-media.is-explicit-blur video,
.home-card.is-explicit-blur .home-card-still,
.home-card.is-explicit-blur .home-card-video,
.home-card.is-explicit-blur .home-card-media img,
.home-card.is-explicit-blur .home-card-media video,
.profile-slideshow.is-explicit-blur .profile-photo,
.profile-slideshow.is-explicit-blur img,
.profile-slideshow.is-explicit-blur video,
.group-theme-slideshow.is-explicit-blur img,
.group-theme-slideshow.is-explicit-blur video,
.group-theme-gallery.is-explicit-blur img,
.group-theme-gallery.is-explicit-blur video,
.group-theme-gallery-img.is-explicit-blur,
.group-theme-gallery-video.is-explicit-blur,
.lightbox.is-explicit-blur img,
.lightbox.is-explicit-blur video,
img.is-explicit-blur,
video.is-explicit-blur {
  /* Soft Blur: 28px → 25.2px (−10%) → 20.16px (−20% more) */
  filter: blur(20.16px) saturate(0.85) !important;
  transform: scale(1.08);
  pointer-events: none;
  user-select: none;
}
/* Soft veil so blurred explicit is not readable even on small thumbs */
.home-card-media.is-explicit-blur::after,
.home-card.is-explicit-blur .home-card-media::after,
.profile-slideshow.is-explicit-blur::after,
.group-theme-slideshow.is-explicit-blur::after,
.group-theme-gallery.is-explicit-blur .group-theme-slideshow::after {
  content: "";
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--bg, #0b0b12) 28%, transparent);
  pointer-events: none;
  z-index: 2;
}
/* Full / 100% blur (safety = Off) — heavier + opaque veil */
.home-card-media.is-explicit-blur-full img,
.home-card-media.is-explicit-blur-full video,
.home-card.is-explicit-blur-full .home-card-still,
.home-card.is-explicit-blur-full .home-card-video,
.home-card.is-explicit-blur-full .home-card-media img,
.home-card.is-explicit-blur-full .home-card-media video,
.profile-slideshow.is-explicit-blur-full .profile-photo,
.profile-slideshow.is-explicit-blur-full img,
.profile-slideshow.is-explicit-blur-full video,
.group-theme-slideshow.is-explicit-blur-full img,
.group-theme-slideshow.is-explicit-blur-full video,
.group-theme-gallery.is-explicit-blur-full img,
.group-theme-gallery.is-explicit-blur-full video,
.group-theme-gallery-img.is-explicit-blur-full,
.group-theme-gallery-video.is-explicit-blur-full,
.lightbox.is-explicit-blur-full img,
.lightbox.is-explicit-blur-full video,
img.is-explicit-blur-full,
video.is-explicit-blur-full {
  filter: blur(48px) brightness(0.45) saturate(0.6) !important;
  transform: scale(1.14);
  pointer-events: none;
  user-select: none;
}
.home-card-media.is-explicit-blur-full::after,
.home-card.is-explicit-blur-full .home-card-media::after,
.profile-slideshow.is-explicit-blur-full::after,
.group-theme-slideshow.is-explicit-blur-full::after,
.group-theme-gallery.is-explicit-blur-full .group-theme-slideshow::after {
  content: "";
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--bg, #0b0b12) 62%, transparent);
  pointer-events: none;
  z-index: 2;
}
/*
 * Off mode: crossed-out view/eye icon centered over the full-blur media.
 * ::after = veil; ::before = icon.
 */
.home-card-media.is-explicit-blur-full::before,
.home-card.is-explicit-blur-full .home-card-media::before,
.profile-slideshow.is-explicit-blur-full::before,
.group-theme-slideshow.is-explicit-blur-full::before,
.group-theme-gallery.is-explicit-blur-full .group-theme-slideshow::before,
.lightbox.is-explicit-blur-full .lightbox-media::before,
.lightbox-media.is-explicit-blur-full::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: clamp(2rem, 12%, 3.25rem);
  height: clamp(2rem, 12%, 3.25rem);
  transform: translate(-50%, -50%);
  z-index: 3;
  pointer-events: none;
  opacity: 0.92;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  /* Eye with slash — white stroke on translucent disc */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none'%3E%3Ccircle cx='24' cy='24' r='22' fill='rgba(0,0,0,0.45)'/%3E%3Cg stroke='%23f2f2f7' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 24s5.5-9 16-9 16 9 16 9-5.5 9-16 9S8 24 8 24z'/%3E%3Ccircle cx='24' cy='24' r='4.5'/%3E%3Cpath d='M12 36L36 12'/%3E%3C/g%3E%3C/svg%3E");
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.45));
}

.home-feed-shell {
  width: 100%;
  min-height: 100%;
  box-sizing: border-box;
}
.home-feed {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  min-height: 100%;
  padding: var(--home-peek, 10%) 12px;
  /* Extra bottom so free-tier upgrade card can scroll above bottom nav / footer */
  padding-bottom: max(
    var(--home-peek, 10%),
    calc(var(--mobile-nav-h, 58px) + var(--safe-bottom) + 40px)
  );
  box-sizing: border-box;
}
/* Spacer after upgrade note — keeps it from sitting under the docked nav */
.home-feed:has(.home-feed-upgrade)::after {
  content: "";
  display: block;
  flex: 0 0 auto;
  width: 100%;
  height: calc(var(--mobile-nav-h, 58px) + var(--safe-bottom) + 28px);
  pointer-events: none;
  scroll-snap-align: none;
}
.home-card {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  /* Width = gen frame (set in JS); never fit-content from image pixels */
  width: var(--home-media-default-w, min(100%, 512px));
  max-width: 100%;
  height: auto;
  min-height: 0;
  max-height: none;
  margin: 0 auto;
  box-sizing: border-box;
  background: var(--panel, rgba(255, 255, 255, 0.03));
  border: 1px solid var(--border, rgba(255, 255, 255, 0.08));
  border-radius: 14px;
  overflow: hidden;
  scroll-snap-align: center;
  scroll-snap-stop: always;
}
.home-card-head {
  position: relative;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 12px;
  width: 100%;
  box-sizing: border-box;
  text-align: left;
  color: inherit;
  font: inherit;
  flex-shrink: 0;
  background: color-mix(in srgb, var(--bg, #0e0e12) 92%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--border, #fff) 55%, transparent);
}
.home-card-head-left {
  min-width: 0;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  padding: 0;
}
.home-card-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--bg, #1a1a22);
  flex-shrink: 0;
}
.home-card-avatar.is-placeholder {
  opacity: 0.35;
}
/* Private shares (no public profile): title only, no DP */
.home-card--share:not(.home-card--share-public) .home-card-head-left--share {
  cursor: default;
}
/* Private share: share mark as DP (avatar-sized circle in header) */
.home-card-share-ico {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--accent, #8b7cff);
  background: color-mix(in srgb, var(--accent, #8b7cff) 16%, var(--bg, #1a1a22));
  border: 1px solid color-mix(in srgb, var(--accent, #8b7cff) 35%, transparent);
}
.home-card-share-ico svg {
  display: block;
  width: 18px;
  height: 18px;
}
/* Share badge on media — bottom-right, ~half prior header icon size */
.home-card-share-badge {
  position: absolute;
  right: 8px;
  bottom: 8px;
  z-index: 6;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  color: #fff;
  background: color-mix(in srgb, var(--accent, #8b7cff) 72%, #121218 28%);
  border: 1px solid color-mix(in srgb, #fff 28%, transparent);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}
.home-card-share-badge svg {
  display: block;
  width: 10px;
  height: 10px;
}
.home-card--share:not(.home-card--share-public) .home-card-media {
  cursor: default;
}
.home-card--share-public .home-card-media {
  cursor: pointer;
}
.gallery-action-row .icon-btn.share-btn--active,
.profile-icon-actions .icon-btn.share-btn--active,
.gallery-action-row .icon-btn[data-profile-act="share-photo"].is-on,
.profile-icon-actions .icon-btn[data-profile-act="share-photo"].is-on {
  color: var(--accent, #8b7cff);
}
.gallery-action-row .icon-btn .share-on-dot,
.profile-icon-actions .icon-btn .share-on-dot {
  font-size: 0.95rem;
  line-height: 1;
  color: var(--accent, #8b7cff);
}
.home-card-title {
  min-width: 0;
  flex: 1 1 auto;
  font-weight: 600;
  font-size: 0.9rem;
  line-height: 1.3;
  word-break: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.home-card-head-right {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
}
.home-card-head-right .follow-tag {
  white-space: nowrap;
}
/* Fixed gen frames only: portrait 512×768 (2:3), landscape 768×512 (3:2).
   Box is width×aspect-ratio; media is absolutely filled so natural pixels never overflow. */
.home-card-media {
  position: relative;
  flex: 0 0 auto;
  width: 100%;
  max-width: 100%;
  height: var(--home-media-default-h, auto);
  aspect-ratio: 2 / 3;
  line-height: 0;
  background: #0a0a0e;
  overflow: hidden;
  cursor: pointer;
  /* Isolate layout so img/video intrinsic size cannot grow the card */
  contain: layout paint;
}
.home-card-media.is-landscape {
  aspect-ratio: 3 / 2;
}
.home-card-media.is-portrait {
  aspect-ratio: 2 / 3;
}
/* Still always solid under video (Profiles listing pattern — no opacity thrash). */
.home-card-media img.home-card-still {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;
  object-position: center;
  margin: 0;
  border: 0;
  padding: 0;
  transition: none;
  box-sizing: border-box;
  z-index: 0;
  opacity: 1;
}
.home-card-media img.home-card-still.is-placeholder,
.home-card-media img.home-card-still.is-loading {
  object-fit: cover;
}
/* Same as .comp-card-video: absolute fill, hidden until ready to play. */
.home-card-media video.home-card-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  margin: 0;
  border: 0;
  padding: 0;
  background: transparent;
  pointer-events: none;
  z-index: 2;
  transition: none;
  box-sizing: border-box;
}
/* display:none while idle — still shows cleanly (never opacity swap). */
.home-card-media video.home-card-video.hidden {
  display: none !important;
}
/* Reserve gen-sized 2:3 frame before JS runs */
.home-card:not([data-media-ready="1"]) {
  width: var(--home-media-default-w, min(100%, 512px));
  max-width: 100%;
}
.home-card-actions {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  padding: 6px 10px 10px;
  width: 100%;
  box-sizing: border-box;
  flex-shrink: 0;
  background: color-mix(in srgb, var(--bg, #0e0e12) 70%, transparent);
}
.home-card-like {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 5px;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  padding: 4px 8px 4px 6px;
  border-radius: 8px;
  font: inherit;
  font-size: 0.9rem;
  min-height: 32px;
}
.home-card-meta {
  display: inline-flex;
  align-items: center;
  gap: 0.28em;
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  padding: 0 2px;
  border: 0;
  background: transparent;
  color: var(--hint, rgba(255, 255, 255, 0.72));
  font: inherit;
  font-size: 0.82rem;
  font-weight: 500;
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.home-card-like:hover {
  background: color-mix(in srgb, var(--btn, #6c5ce7) 12%, transparent);
}
.home-card-like.is-liked {
  color: #ff6b8a;
}
.home-card-like-count {
  font-variant-numeric: tabular-nums;
  font-weight: 650;
  font-size: 0.86rem;
  letter-spacing: -0.01em;
  opacity: 0.92;
  min-width: 1.25ch;
  line-height: 1;
  white-space: nowrap;
}
.home-feed-status {
  text-align: center;
  padding: 8px 12px 16px;
}
/* Free-tier soft upgrade — sized like a home feed card (portrait media frame) */
.home-feed-upgrade {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  margin: 0 auto 12px;
  padding: 0;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--border));
  background: color-mix(in srgb, var(--card) 92%, var(--accent) 8%);
  text-align: center;
  width: var(--home-media-default-w, min(100%, 512px));
  max-width: min(100%, var(--home-media-max-w, 512px));
  min-height: var(--home-media-default-h, min(72vh, 768px));
  height: auto;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  /* Snap into the visible viewport (above bottom nav), same as feed cards */
  scroll-snap-align: center;
  scroll-snap-stop: always;
}
.home-feed-upgrade--card {
  /* Explicit card footprint matches .home-card-media */
  width: var(--home-media-default-w, min(100%, 512px));
  max-width: min(100%, var(--home-media-max-w, 512px));
  min-height: var(--home-media-default-h, min(72vh, 768px));
}
.home-feed-upgrade-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 28px 22px;
  width: 100%;
  box-sizing: border-box;
}
.home-feed-upgrade-title {
  margin: 0 0 8px;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0.01em;
}
.home-feed-upgrade-body {
  margin: 0 0 16px;
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--hint, #8b8b9a);
  max-width: 22rem;
}
.home-feed-upgrade-btn {
  min-width: 8.5rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--border));
  background: color-mix(in srgb, var(--accent) 16%, var(--card));
  color: var(--text);
  font-weight: 600;
}
.home-feed-upgrade-btn:hover {
  background: color-mix(in srgb, var(--accent) 26%, var(--card));
  border-color: color-mix(in srgb, var(--accent) 60%, var(--border));
}
/* Gallery: upgrade replaces the photo frame (not a footer strip) */
.profile-slideshow.is-upgrade-locked .profile-photo.is-locked-hidden,
.profile-slideshow.is-upgrade-locked .profile-video {
  opacity: 0 !important;
  pointer-events: none;
}
.profile-slideshow .gallery-slide-upgrade {
  position: absolute;
  inset: 0;
  z-index: 6;
  width: 100% !important;
  max-width: none !important;
  min-height: 100% !important;
  height: 100% !important;
  margin: 0;
  border-radius: inherit;
  scroll-snap-align: none;
}
.home-card-media.is-locked {
  background: color-mix(in srgb, var(--card) 88%, var(--accent) 6%);
}
.home-feed-empty-wrap {
  min-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
@media (max-width: 720px) {
  .home-feed {
    padding-left: 8px;
    padding-right: 8px;
    gap: 10px;
  }
  .home-card {
    border-radius: 12px;
  }
  .home-card-head {
    padding: 6px 10px;
  }
  .home-card-avatar {
    width: 30px;
    height: 30px;
  }
  .home-card-title {
    font-size: 0.82rem;
  }
  .home-card-actions {
    padding: 4px 8px 8px;
  }
}

/* —— Game Builder (fullscreen 75% × 90% popout) —— */
.group-list-head-actions {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

/* List: Build card + draft rows — same shell as room rows */
.theme-row.theme-row-build {
  position: relative;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--accent, #6c5ce7) 50%, var(--border));
}
.theme-row.theme-row-build .theme-row-media {
  background:
    radial-gradient(120% 100% at 20% 15%, rgba(196, 181, 253, 0.55), transparent 55%),
    radial-gradient(90% 90% at 80% 90%, rgba(108, 92, 231, 0.45), transparent 50%),
    linear-gradient(145deg, #1e1a2e 0%, #2a2140 45%, #15121f 100%);
}
.theme-row-build-art {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  color: #e9d5ff;
}
.theme-row-build-art svg {
  width: 78%;
  height: 78%;
  filter: drop-shadow(0 6px 14px rgba(108, 92, 231, 0.55));
}
.theme-row.theme-row-build strong {
  color: #f5f3ff;
}
.theme-row.theme-row-build .scene-sep {
  color: color-mix(in srgb, #c4b5fd 85%, var(--muted, #999));
}
.theme-row.theme-row-draft {
  border-style: dashed;
  opacity: 0.98;
}
.theme-row-draft .theme-row-draft-badge {
  display: inline-block;
  margin-left: 0.35rem;
  padding: 0.05rem 0.4rem;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #ddd6fe;
  background: color-mix(in srgb, #6c5ce7 35%, transparent);
  border: 1px solid color-mix(in srgb, #a78bfa 40%, transparent);
  vertical-align: middle;
}

.group-build-overlay {
  position: fixed;
  inset: 0;
  z-index: 92;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(12px, var(--safe-top)) max(12px, var(--safe-right)) max(12px, var(--safe-bottom)) max(12px, var(--safe-left));
  box-sizing: border-box;
}
.group-build-overlay.hidden {
  display: none !important;
}
.group-build-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.64);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  cursor: pointer;
}
.group-build-card {
  position: relative;
  z-index: 3;
  width: min(75vw, 1040px);
  height: min(90vh, calc(var(--app-height, 100vh) - 24px));
  max-width: calc(100vw - 24px);
  max-height: calc(var(--app-height, 100vh) - max(24px, var(--safe-top) + var(--safe-bottom)));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) + 6px);
  box-shadow: 0 28px 72px rgba(0, 0, 0, 0.58);
}
.group-build-card-head {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex-shrink: 0;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--bg2);
  min-width: 0;
}
.group-build-card-head-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
  width: 100%;
}
.group-build-card-head-actions {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-shrink: 0;
}
/* Full available width under title row — wrap long errors / status (was 9rem ellipsis). */
.group-build-save-status {
  display: block;
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
  word-break: break-word;
  overflow-wrap: anywhere;
  font-size: 0.82rem;
  line-height: 1.35;
  opacity: 0.9;
  min-height: 0;
}
.group-build-save-status:empty {
  display: none;
}
.group-build-save,
.group-build-delete {
  width: 36px;
  height: 36px;
  color: color-mix(in srgb, var(--text, #fff) 80%, transparent);
}
.group-build-save:hover {
  color: var(--accent, #a78bfa);
}
.group-build-delete:hover {
  color: #ff8a8a;
}
.group-build-card-head-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1 1 auto;
}
.group-build-card-head-text strong {
  font-size: 1.08rem;
  font-weight: 600;
}
/* Game step progress + scene index (e.g. Scenes · 3/4 · Scene 1/3) under title */
.group-build-progress {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.45rem;
  line-height: 1.3;
  min-height: 1.1em;
}
.group-build-progress-sep {
  opacity: 0.55;
  user-select: none;
}
.group-build-progress-sep.hidden,
#gbSceneIndexLabel.hidden {
  display: none;
}
.group-build-close {
  font-size: 1.35rem;
  line-height: 1;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
}
.group-build-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  padding: 1rem 1.15rem 0.5rem;
  display: flex;
  flex-direction: column;
}
.group-build-step {
  flex: 1 1 auto;
  min-height: 0;
}
.group-build-step .field-label {
  display: block;
  margin-bottom: 0.85rem;
}
.group-build-step .field-hint {
  display: block;
  margin: 0.15rem 0 0.25rem;
}
.group-build-step .field-row {
  display: flex;
  gap: 0.45rem;
  align-items: center;
  margin-top: 0.35rem;
  position: relative;
}
.group-build-step .field-row-full {
  display: flex;
  gap: 0.45rem;
  align-items: stretch;
  margin-top: 0.35rem;
  position: relative;
}
/* Muse suggest: Thinking… is the field placeholder (see gbSetFieldThinking) */
.group-build-step input.is-thinking,
.group-build-step textarea.is-thinking {
  opacity: 0.9;
  font-style: italic;
  color: var(--muted, #9a9aab);
}
.group-build-step .field-row-full textarea {
  flex: 1;
  min-width: 0;
  width: 100%;
  min-height: 4.5rem;
  resize: vertical;
}
.group-build-step .field-row-full .field-random {
  align-self: flex-start;
  margin-top: 0.15rem;
  flex-shrink: 0;
}
/* Basics: Backstory fills leftover column height */
.group-build-step label.group-build-grow {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  margin-bottom: 0;
}
.group-build-step label.group-build-grow .field-row-full {
  flex: 1 1 auto;
  min-height: 0;
  align-items: stretch;
}
.group-build-step label.group-build-grow textarea {
  min-height: 8rem;
  height: 100%;
  resize: vertical;
}
.group-build-step input[type="text"],
.group-build-step textarea,
.group-build-step select {
  flex: 1;
  min-width: 0;
}
.group-build-split {
  display: grid;
  grid-template-columns: minmax(200px, 38%) 1fr;
  gap: 1rem 1.15rem;
  align-items: stretch;
  min-height: min(52vh, 420px);
  height: 100%;
}
@media (max-width: 720px) {
  .group-build-split {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .group-build-card {
    width: calc(100vw - 16px);
    height: calc(var(--app-height, 100vh) - 16px);
  }
}
.group-build-media-col {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-height: 0;
}
/* Screen-reader-only labels (heat row is icon-only) */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
/* Basics / scene: single muse suggest at top */
.gb-basics-top-row {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin: 0 0 0.35rem;
}
.gb-scene-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin: 0 0 0.45rem;
  flex-wrap: wrap;
}
.gb-scene-top-row .gb-scene-heat-block {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
}
.gb-suggest-top.field-random,
.gb-suggest-top.icon-btn {
  flex: 0 0 auto;
}
.gb-suggest-top.is-thinking,
.gb-suggest-top.busy {
  opacity: 0.7;
  pointer-events: none;
}
/* Visual scene / Description / What happens: label above, full-width box */
.group-build-step .field-label.gb-inline-field {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  margin-bottom: 0.55rem;
  width: 100%;
}
.group-build-step .field-label.gb-inline-field > span {
  display: block;
  padding-top: 0;
  line-height: 1.3;
  font-size: 0.82rem;
  width: 100%;
}
.group-build-step .field-label.gb-inline-field input,
.group-build-step .field-label.gb-inline-field textarea {
  display: block;
  margin-top: 0.35rem;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  min-height: 2.8rem;
  resize: vertical;
}
/* Site-themed inputs/textareas inside game builder */
.group-build-step input[type="text"],
.group-build-step input:not([type]),
.group-build-step textarea,
.group-build-step select {
  display: block;
  width: 100%;
  margin-top: 0.35rem;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: 0.92rem;
  line-height: 1.35;
  padding: 10px 12px;
  box-sizing: border-box;
}
.group-build-step textarea {
  min-height: 3.2rem;
  resize: vertical;
}
.group-build-step label.group-build-grow > span {
  display: block;
}
.group-build-step label.group-build-grow textarea {
  flex: 1 1 auto;
  min-height: 8rem;
  height: 100%;
}
/* Cost hint: bottom-left footer, italic subtle */
.gb-cost-hint {
  order: -1;
  flex: 1 1 100%;
  width: 100%;
  margin: 0 0 0.15rem;
  padding: 0;
  font-size: 0.72rem;
  font-style: italic;
  font-weight: 400;
  line-height: 1.35;
  color: color-mix(in srgb, var(--hint, #9a9aab) 88%, transparent);
  text-align: left;
  opacity: 0.92;
}
.gb-cost-hint .star-ico,
.gb-cost-hint .gb-coin-inline {
  font-style: normal;
  font-size: 0.85em;
}
/* Scene heat: icon-only chips before scene name */
.gb-scene-heat-block {
  margin: 0 0 0.35rem;
}
.gb-scene-heat {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
}
.gb-scene-heat-opt {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  min-width: 2rem;
  padding: 0;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  cursor: pointer;
  font: inherit;
  line-height: 1;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
.gb-scene-heat-opt .heat-icon {
  font-size: 1.05rem;
  width: 1.05rem;
  height: 1.05rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.gb-scene-heat-opt .heat-icon-img {
  width: 1.35em !important;
  height: 1.35em !important;
  object-fit: contain;
}
.gb-scene-heat-opt.is-on {
  border-color: color-mix(in srgb, var(--accent, #6c5ce7) 70%, var(--border));
  background: color-mix(in srgb, var(--accent, #6c5ce7) 22%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent, #6c5ce7) 30%, transparent);
}
.gb-scene-heat-opt:hover:not(.is-on) {
  border-color: color-mix(in srgb, var(--accent, #6c5ce7) 45%, var(--border));
}
/* Visual scene sits under the image (media column) */
.gb-scene-visual-block {
  margin: 0;
  flex-shrink: 0;
}
.gb-scene-visual-block textarea {
  resize: vertical;
  min-height: 2.6rem;
}
.group-build-media-col .gb-scene-cast-block {
  margin-bottom: 0;
  flex-shrink: 0;
}
/* Character chips: one character per line under the scene image */
.gb-scene-cast.gb-scene-cast-row {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 0.4rem;
  margin-top: 0.35rem;
  max-height: min(36vh, 280px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 2px;
}
.gb-scene-cast.gb-scene-cast-row .gb-scene-cast-chip {
  flex: 0 0 auto;
  width: 100%;
  justify-content: flex-start;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.group-build-media-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 2;
  border-radius: 12px;
  overflow: hidden;
  background: #1a1a22;
  border: 1px solid var(--border);
  flex-shrink: 0;
}
/* Scene step: same landscape 3:2 as cover + generated backdrops (never portrait crop). */
#groupBuildStepScenes .group-build-media-frame {
  aspect-ratio: 3 / 2;
  min-height: 0;
}
/* Description / What happens / Visual: roomy full-width textareas */
#groupBuildStepScenes #gbSceneDesc,
#groupBuildStepScenes #gbSceneObj,
#groupBuildStepScenes #gbSceneVisual {
  min-height: 3rem;
  width: 100%;
  resize: vertical;
}
/* Regenerate control overlaid on cover + scene stills (always visible) */
.group-build-media-frame .group-build-regen {
  position: absolute;
  left: 50%;
  bottom: 10px;
  transform: translateX(-50%);
  z-index: 6;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  width: auto;
  min-width: 7.5rem;
  height: 34px;
  padding: 0 0.85rem;
  margin: 0;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, #fff 28%, transparent);
  background: color-mix(in srgb, #0b0b12 72%, transparent);
  color: #f5f3ff;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1;
  cursor: pointer;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
  pointer-events: auto;
}
.group-build-media-frame .group-build-regen:hover:not(:disabled) {
  color: #fff;
  border-color: color-mix(in srgb, #a78bfa 65%, transparent);
  background: color-mix(in srgb, #6c5ce7 55%, rgba(0, 0, 0, 0.45));
}
.group-build-media-frame .group-build-regen:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.group-build-media-frame .group-build-regen svg {
  display: block;
  flex-shrink: 0;
}
.group-build-media-frame .group-build-regen span {
  white-space: nowrap;
}
/* Suggest/API error shown as field placeholder */
#groupBuild input.is-field-error,
#groupBuild textarea.is-field-error {
  border-color: color-mix(in srgb, var(--danger, #e55) 55%, var(--border));
  color: var(--danger, #e55);
}
#groupBuild input.is-field-error::placeholder,
#groupBuild textarea.is-field-error::placeholder {
  color: color-mix(in srgb, var(--danger, #e55) 85%, var(--hint));
  opacity: 1;
}
#gbRolesHost.is-thinking,
#gbRolesHost .gb-roles-thinking {
  min-height: 4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  color: var(--hint);
}
.group-build-dp,
.group-build-scene-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: #1a1a22;
}
.group-build-fields-col {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-height: 0;
  height: 100%;
}
/* Character cards — 2 per row + add tile */
.group-build-char-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}
@media (max-width: 560px) {
  .group-build-char-grid {
    grid-template-columns: 1fr;
  }
}
.group-build-char-card {
  border: 1px solid var(--border, #333);
  border-radius: 14px;
  padding: 0.85rem 0.9rem 2.4rem;
  background: var(--bg-elevated, rgba(255, 255, 255, 0.03));
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  min-height: 148px;
  position: relative;
}
.group-build-char-card .gb-char-delete {
  position: absolute;
  right: 0.55rem;
  bottom: 0.5rem;
  border: 0;
  background: transparent;
  color: color-mix(in srgb, #ff8a8a 85%, var(--muted, #999));
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  padding: 0.2rem 0.35rem;
  border-radius: 6px;
  opacity: 0.85;
}
.group-build-char-card .gb-char-delete:hover {
  color: #ff6b6b;
  opacity: 1;
  background: color-mix(in srgb, #ff6b6b 12%, transparent);
}
.group-build-char-card .gb-char-name {
  width: 100%;
  font-size: 1.05rem;
  font-weight: 600;
  padding: 0.55rem 0.65rem;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg, #111) 70%, transparent);
  color: var(--text, #fff);
}
.group-build-char-card .gb-char-name::placeholder {
  color: color-mix(in srgb, var(--muted, #999) 90%, transparent);
  font-weight: 500;
  opacity: 0.85;
}
.group-build-gender-row {
  display: flex;
  gap: 0.45rem;
}
.group-build-gender-row button {
  flex: 1;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text, #eee);
  border-radius: 999px;
  padding: 0.45rem 0.6rem;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.group-build-gender-row button.is-on {
  border-color: color-mix(in srgb, var(--accent, #6c5ce7) 70%, var(--border));
  background: color-mix(in srgb, var(--accent, #6c5ce7) 28%, transparent);
  color: #f5f3ff;
}
/* Scene cast multi-select chips */
.gb-scene-cast {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 0.4rem;
}
.gb-scene-cast-chip {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text, #eee);
  border-radius: 999px;
  padding: 0.4rem 0.75rem;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.gb-scene-cast-chip.is-on {
  border-color: color-mix(in srgb, var(--accent, #6c5ce7) 70%, var(--border));
  background: color-mix(in srgb, var(--accent, #6c5ce7) 28%, transparent);
  color: #f5f3ff;
}
.gb-scene-cast-empty {
  font-size: 0.85rem;
  color: var(--muted, #999);
}
/* Catalog cards: tags sit on the cover image */
.group-theme-card-pick .group-theme-pick-tag {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 3;
  padding: 0.18rem 0.5rem;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.3;
  pointer-events: none;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}
.group-theme-card-pick .group-theme-pick-tag.is-draft {
  color: #ede9fe;
  background: color-mix(in srgb, #6c5ce7 55%, rgba(0, 0, 0, 0.45));
  border: 1px solid color-mix(in srgb, #a78bfa 50%, transparent);
}
.group-theme-card-pick .group-theme-pick-tag.is-private {
  color: #fff;
  background: color-mix(in srgb, #111 55%, rgba(0, 0, 0, 0.35));
  border: 1px solid color-mix(in srgb, #fff 22%, transparent);
}
/* Active room for this pack — bottom-right of cover */
.group-theme-card-pick .group-theme-pick-tag.is-playing {
  top: auto;
  left: auto;
  bottom: 8px;
  right: 8px;
  color: #ecfdf5;
  background: color-mix(in srgb, #059669 62%, rgba(0, 0, 0, 0.4));
  border: 1px solid color-mix(in srgb, #34d399 55%, transparent);
}
.group-theme-card-pick.is-build-card {
  border-color: color-mix(in srgb, var(--accent, #6c5ce7) 50%, var(--border));
}
.group-theme-card-pick.is-build-card .group-theme-pick-media {
  background:
    radial-gradient(120% 100% at 20% 15%, rgba(196, 181, 253, 0.55), transparent 55%),
    radial-gradient(90% 90% at 80% 90%, rgba(108, 92, 231, 0.45), transparent 50%),
    linear-gradient(145deg, #1e1a2e 0%, #2a2140 45%, #15121f 100%);
}
.group-theme-build-art {
  width: 100%;
  height: 100%;
  min-height: 0;
  display: grid;
  place-items: center;
  color: #e9d5ff;
}
.group-theme-build-art svg {
  width: 28%;
  height: 28%;
  max-height: 56px;
  filter: drop-shadow(0 6px 14px rgba(108, 92, 231, 0.55));
}

/* Profile list — Create card (blurred ghost profile) */
.comp-card.is-create-card {
  cursor: default;
  border-color: color-mix(in srgb, var(--accent, #6c5ce7) 40%, var(--border));
}
.comp-card.is-create-card:hover {
  border-color: color-mix(in srgb, var(--accent, #6c5ce7) 65%, var(--border));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent, #6c5ce7) 25%, transparent);
}
.comp-card-media.is-create-blur-host {
  background: #1a1228;
}
.comp-card-media.is-create-blur-host .comp-card-img {
  filter: blur(18px) saturate(0.85) brightness(0.72);
  transform: scale(1.12);
  transform-origin: center top;
}
.comp-card.is-create-card .comp-meta .name.is-ghost-text,
.comp-card.is-create-card .comp-meta .blurb.is-ghost-text {
  filter: blur(5px);
  opacity: 0.55;
  user-select: none;
  pointer-events: none;
}
.comp-card.is-create-card .comp-create-waiting {
  margin: 0;
  font-size: 0.82rem;
  color: color-mix(in srgb, var(--text) 78%, var(--hint));
  line-height: 1.35;
}
.comp-card.is-create-card .comp-actions {
  padding: 0 12px 12px;
}
.btn.create-profile-cta {
  width: 100%;
  border: none;
  color: #fff;
  font-weight: 700;
  letter-spacing: 0.02em;
  /* Brighter than default chat primary */
  background: linear-gradient(135deg, #a78bfa 0%, #8b5cf6 42%, #ec4899 100%);
  box-shadow: 0 4px 16px color-mix(in srgb, #a78bfa 45%, transparent);
}
.btn.create-profile-cta:hover {
  filter: brightness(1.08);
  box-shadow: 0 6px 20px color-mix(in srgb, #ec4899 40%, transparent);
}

/* Create page head with Back */
.create-page-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.create-page-back {
  flex-shrink: 0;
  margin-top: 2px;
}
.create-page-head-text {
  min-width: 0;
  flex: 1;
}
.create-page-head-text h2 {
  margin: 0 0 4px;
}
/* Mood in chat — compact chips (icon + label). Do not stretch into fat tiles
   in the narrow left create column; wrap or scroll instead. */
.create-heat-slider {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
  align-items: center;
  padding-bottom: 2px;
}
.create-heat-opt {
  flex: 0 0 auto;
  min-width: 0;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 5px 10px;
  min-height: 30px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  cursor: pointer;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.15;
  white-space: nowrap;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
.create-heat-opt .heat-icon {
  font-size: 1.05rem;
  width: 1.05rem;
  height: 1.05rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: transparent;
  line-height: 1;
  margin: 0;
}
/* Explicit: same optical size as global mood glyph (profile bottom-right) */
.create-heat-opt .heat-icon-img {
  font-size: 1.05rem;
  width: 1.35em !important;
  height: 1.35em !important;
  object-fit: contain;
  flex-shrink: 0;
  background: transparent;
  line-height: 1;
  margin: 0;
}
/* Explicit devil PNG — no white plate; never paint a chip behind the glyph */
.create-heat-opt .heat-icon-img,
.heat-icon.heat-icon-img,
.heat-icon-img {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  mix-blend-mode: normal;
  image-rendering: auto;
}
.create-heat-opt .heat-name {
  line-height: 1.1;
}
.create-heat-opt.is-on {
  border-color: color-mix(in srgb, var(--accent, #6c5ce7) 70%, var(--border));
  background: color-mix(in srgb, var(--accent, #6c5ce7) 22%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent, #6c5ce7) 30%, transparent);
}
/* Games: catalog-only workspace (no left room list) */
.page-groups-catalog-first .group-workspace.group-catalog-only {
  display: block;
  grid-template-columns: none;
}
/* In-play room: messages + right game card (2 columns; list is inside center) */
.page-groups-catalog-first .group-workspace:not(.group-catalog-only):not(.group-no-card) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--ws-detail-w, 300px);
  height: 100%;
  position: relative;
}
.page-groups-catalog-first .group-workspace:not(.group-catalog-only):not(.group-no-card).is-detail-collapsed {
  grid-template-columns: minmax(0, 1fr) 0;
}
.page-groups-catalog-first .group-workspace:not(.group-catalog-only):not(.group-no-card).is-detail-collapsed .group-theme-pane {
  overflow: hidden;
  min-width: 0;
  width: 0;
  padding: 0;
  border: none;
  pointer-events: none;
  opacity: 0;
}
.page-groups-catalog-first .group-workspace:not(.group-catalog-only):not(.group-no-card) .group-theme-pane {
  display: flex !important;
  height: 100%;
  min-height: 0;
  min-width: 0;
  position: relative;
}
@media (max-width: 899px) {
  .page-groups-catalog-first .group-workspace:not(.group-catalog-only):not(.group-no-card),
  .page-groups-catalog-first .group-workspace:not(.group-catalog-only):not(.group-no-card).is-detail-collapsed {
    grid-template-columns: minmax(0, 1fr);
  }
  .page-groups-catalog-first .group-workspace:not(.group-catalog-only):not(.group-no-card).is-detail-collapsed .group-theme-pane {
    /* Mobile uses sheet open class, not desktop collapse */
    opacity: 1;
    pointer-events: auto;
    width: auto;
  }
}
.page-groups-catalog-first .group-center-pane {
  width: 100%;
  max-width: none;
  height: 100%;
  min-height: 0;
}
.page-groups-catalog-first .group-catalog-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px 0;
}
.page-groups-catalog-first .group-catalog-head h2 {
  margin: 0;
  font-size: 1.15rem;
}
.page-groups-catalog-first #groupCreate:not(.hidden) {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}
.page-groups-catalog-first #groupCreatePick {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 0 14px 20px;
}
.group-theme-card-pick .group-theme-pick-edit {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 4;
  border: 1px solid color-mix(in srgb, #fff 25%, transparent);
  background: color-mix(in srgb, #121218 72%, transparent);
  color: #fff;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  cursor: pointer;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.group-theme-card-pick .group-theme-pick-edit:hover {
  background: color-mix(in srgb, var(--accent, #6c5ce7) 55%, #121218);
}
.group-theme-card-pick .group-theme-pick-title-row {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  margin: 0 0 4px;
}
.group-theme-card-pick .group-theme-pick-title-row h4 {
  margin: 0;
  flex: 1;
  min-width: 0;
}
.group-build-char-add {
  border: 1.5px dashed color-mix(in srgb, var(--accent, #6c5ce7) 45%, var(--border));
  border-radius: 14px;
  min-height: 148px;
  background: color-mix(in srgb, var(--accent, #6c5ce7) 6%, transparent);
  color: #c4b5fd;
  display: grid;
  place-items: center;
  cursor: pointer;
  font-size: 2.4rem;
  font-weight: 300;
  line-height: 1;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.group-build-char-add:hover {
  background: color-mix(in srgb, var(--accent, #6c5ce7) 14%, transparent);
  border-color: color-mix(in srgb, var(--accent, #6c5ce7) 70%, var(--border));
  color: #ede9fe;
}
.group-build-char-add:disabled {
  opacity: 0.35;
  cursor: default;
}
.group-build-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
  padding: 0.85rem 1.15rem 1.05rem;
  /* Blend into card body — no hard footer plate */
  border-top: none;
  background: linear-gradient(
    180deg,
    transparent 0%,
    color-mix(in srgb, var(--card) 70%, transparent) 28%,
    var(--card) 100%
  );
  margin-top: -0.35rem;
}
.group-build-actions #gbBack {
  margin-right: auto;
}
.group-build-actions .gb-cost-hint {
  order: -1;
  flex: 1 1 100%;
  margin-right: auto;
}
.group-build-actions #gbConfirm .gb-coin-inline,
.group-build-actions #gbNext .gb-coin-inline {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}
.group-build-actions #gbDeleteScene {
  margin-right: 0.15rem;
}
.group-build-preview {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.group-build-preview-section {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 0.85rem 1rem;
  background: var(--bg-elevated, rgba(255, 255, 255, 0.03));
}
.group-build-preview-section h4 {
  margin: 0 0 0.45rem;
  font-size: 0.92rem;
  font-weight: 650;
  color: color-mix(in srgb, var(--text, #fff) 92%, transparent);
}
.group-build-preview-section p {
  margin: 0.2rem 0;
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--muted, #aaa);
  white-space: pre-wrap;
}
.group-build-preview-cover {
  width: min(100%, 280px);
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 10px;
  display: block;
  margin-top: 0.4rem;
  background: #222;
}
.group-build-preview-scene {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 0.65rem;
  margin-top: 0.55rem;
  align-items: start;
}
.group-build-preview-scene img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 8px;
  background: #222;
}
body.group-build-open {
  overflow: hidden;
}