/* ourgirls.ai frontend styles — palette and card language follow candy.ai */
:root {
  /* surfaces (candy.ai: --co-bg / --clr-bg / --co-panel-2 / --co-panel-3) */
  --bg: #130e11;
  --surface: #1a1518;
  --surface-2: #1c171b;
  --surface-3: #241e23;
  --stage: #181116;

  --border: #ffffff1f;
  --border-strong: #ffffff2e;
  --line: #ffffff12;

  --text: #f2f2f3;
  --muted: #a1a1aa;
  --dim: #6b6b73;

  /* brand (candy.ai: --primary-color) */
  --pink: #f97187;
  --pink-hover: #fc768a;
  --pink-deep: #e65073;
  --hot: #ff356e;
  --gold: #fcbb00;

  --radius: 16px;
  --radius-sm: 12px;
  --pill: 999px;
  --sidebar-w: 232px;

  --font: "Poppins", "PingFang SC", "Noto Sans SC", "Microsoft YaHei", sans-serif;
}

* { box-sizing: border-box; touch-action: manipulation; }

html, body {
  height: 100%;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 14px;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

button, input, select, textarea { font: inherit; color: inherit; }

/* iOS Safari force-zooms the viewport when you focus a field whose
   font-size is below 16px. Keep every field at 16px or larger. */
input, textarea, select { font-size: 16px; }

button { cursor: pointer; border: 0; background: none; }
.hidden { display: none !important; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #ffffff29; border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: #ffffff47; }
::-webkit-scrollbar-track { background: transparent; }

/* App shell: fixed to the dynamic viewport so the page itself never grows.
   Each view owns its own scroll container instead. */
.app { display: flex; height: 100vh; height: 100dvh; overflow: hidden; }

/* ---------------- sidebar ---------------- */
.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh;
  flex: 0 0 var(--sidebar-w);
  width: var(--sidebar-w);
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 10px;
  border-right: 1px solid var(--border);
  background: var(--bg);
  overflow-y: auto;
}

.brand { display: flex; align-items: center; gap: 10px; padding: 4px 8px 10px; }
.sidebar-user {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0 8px 12px;
  padding: 10px 12px;
  border-radius: 14px;
  background: #ffffff0c;
}
.sidebar-user b {
  font-size: 14px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sidebar-user span { color: var(--pink); font-size: 12px; font-weight: 600; }
.logo-mark { width: 28px; height: 28px; display: block; flex: 0 0 auto; }
.brand-name { font-weight: 600; letter-spacing: -0.2px; flex: 1; font-size: 15px; }
.collapse { color: var(--dim); }
.collapse svg { width: 18px; height: 18px; }
.menu-btn svg { width: 32px; height: 32px; }

.nav { display: flex; flex-direction: column; gap: 2px; }
.nav.sub { margin-top: 8px; padding-top: 8px; border-top: 1px solid #ffffff14; }

.nav-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 11px 8px;
  border-radius: 12px;
  color: #f4f4f5;
  text-align: left;
  width: 100%;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0;
}
.nav-ico { width: 22px; height: 22px; flex: 0 0 auto; }
.nav-item:hover { background: #ffffff0d; }
.nav-item.active { background: #ffffff10; }

.sidebar-foot { margin-top: auto; display: flex; flex-direction: column; gap: 8px; padding-top: 10px; }
.premium-item { color: #f0b429; }
.premium-item .off {
  margin-left: auto;
  padding: 3px 7px;
  border-radius: 999px;
  background: #e11d48;
  color: #fff;
  font-style: normal;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0;
}
.drawer-links {
  margin: 4px 8px 0;
  color: #6f6f78;
  font-size: 12px;
  font-weight: 500;
}
.drawer-links button { color: inherit; font-weight: 500; }
.drawer-links button:hover { color: var(--text); }

/* ---------------- main column ---------------- */
.main { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; }

/* Views scroll internally. The chat view is the exception: its log scrolls
   while the header and composer stay put, so the page never resizes. */
.view { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow-y: auto; }
#view-chat { position: relative; overflow: hidden; background: var(--bg); }
.reel {
  position: absolute;
  inset: 0;
  z-index: 0;
  height: 100%;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  overscroll-behavior: contain;
  touch-action: pan-y;
}
.reel-slide {
  position: relative;
  height: 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  background: #141416;
}
.reel-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 18%;
  display: block;
  pointer-events: none;
}
.reel-slide::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.38) 0%, rgba(0, 0, 0, 0.02) 28%, rgba(0, 0, 0, 0.08) 52%, rgba(0, 0, 0, 0.62) 100%);
}
.reel-copy {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 46%;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}
.reel-tagline {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin: 0;
  padding: 12px 14px;
  border: 0;
  border-radius: 16px;
  background: rgba(18, 14, 14, 0.72);
  color: #fff;
  font: inherit;
  font-size: 14px;
  line-height: 1.45;
  text-align: left;
  cursor: pointer;
}
.reel-tagline-text {
  flex: 1;
  min-width: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.reel-tagline-text b { font-weight: 700; }
.reel-tagline.open .reel-tagline-text {
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
}
.reel-tagline-more {
  display: none;
  flex: none;
  width: 16px;
  color: #fff;
}
.reel-tagline.can-expand .reel-tagline-more { display: block; }
.reel-tagline-more svg { width: 16px; height: 16px; display: block; }
.reel-copy b {
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
  width: fit-content;
  max-width: 100%;
  padding: 6px 12px;
  border-radius: 12px;
  background: rgba(8, 6, 6, 0.72);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}
#view-chat .chat-head { display: none; }
body.chat-thread #view-chat .chat-head {
  display: flex;
  position: relative;
  z-index: 4;
  background: rgba(9, 9, 10, 0.78);
  border-bottom-color: transparent;
}
body.chat-thread .reel { overflow: hidden; touch-action: none; pointer-events: none; }
body.chat-thread .reel-copy { display: none; }
#view-chat .chat-who span { color: rgba(255, 255, 255, 0.86); }
#view-chat .log {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(76px + env(safe-area-inset-bottom));
  z-index: 2;
  flex: none;
  max-height: calc(100% - 96px);
  margin: 0 auto;
}
/* Thread mode: the log sits in the column between the header and the
   composer, so a long opening can scroll from the first line to the last.
   An absolute log tucked under the header clips the start and won't scroll. */
body.chat-thread #view-chat .log {
  position: relative;
  inset: auto;
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
body.chat-thread #view-chat .log > * { flex-shrink: 0; }
body.chat-thread #view-chat .composer {
  position: relative;
  inset: auto;
  flex: 0 0 auto;
}
#view-chat .msg.assistant {
  background: rgba(176, 78, 48, 0.86);
  color: #fff;
}
#view-chat .msg.opening {
  align-self: stretch;
  max-width: none;
  white-space: normal;
  padding: 18px 16px 16px;
  border-radius: 22px;
  background: rgba(32, 30, 32, 0.94);
  color: #f7f7f8;
  font-size: 15.5px;
  line-height: 1.55;
}
#view-chat .msg.opening.is-clamped {
  position: sticky;
  top: 0;
  z-index: 3;
}
#view-chat .opening-body.clamped {
  max-height: 9.3em;
  overflow: hidden;
  cursor: pointer;
}
#view-chat .opening-more {
  display: block;
  margin-top: 10px;
  padding: 0;
  color: var(--pink);
  font-size: 14px;
  font-weight: 700;
}
#view-chat .msg.opening p { margin: 0 0 0.9em; }
#view-chat .msg.opening p:last-child { margin-bottom: 0; }
#view-chat .msg.opening .narr { color: #f3c5d6; font-style: italic; }
.msg-time {
  align-self: center;
  margin: 12px 0 6px;
  color: rgba(255, 255, 255, 0.62);
  font-size: 12px;
  font-weight: 500;
}
.msg-copy {
  display: grid;
  place-items: center;
  align-self: flex-start;
  width: 28px;
  height: 28px;
  margin: 2px 2px 8px;
  border-radius: 8px;
  color: #b9b9c1;
}
.msg-copy.mine { align-self: flex-end; }
.msg-copy svg { width: 16px; height: 16px; }
.msg-copy:hover { background: #ffffff14; color: #fff; }
#view-chat .composer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
}
#view-chat .composer {
  background: rgba(22, 18, 20, 0.82);
  border: 1px solid #ffffff18;
  backdrop-filter: blur(16px);
}
#view-chat .composer textarea,
#view-chat .ask {
  background: transparent;
  color: #fff;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 14px 20px;
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}

.filters { display: contents; }
.sitebar {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 36px;
}
.menu-btn,
.sitebar-brand { display: none; }
.sitebar-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.findbar { display: contents; }
.find-scroll { display: contents; }
.select-wrap { position: relative; flex: 0 0 auto; }
.select-wrap select {
  appearance: none;
  padding: 9px 30px 9px 14px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid transparent;
  color: var(--text);
  cursor: pointer;
  font-size: 16px;
  transition: border-color .15s, background .15s;
}
.select-wrap select:hover { border-color: var(--border-strong); }
.select-wrap::after {
  content: "⌄";
  position: absolute;
  right: 11px;
  top: 50%;
  transform: translateY(-58%);
  color: var(--dim);
  pointer-events: none;
}

.search {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  height: 40px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid transparent;
  transition: border-color .15s, background .15s;
}
.search:focus-within { border-color: var(--border-strong); background: var(--surface-3); }
.search-icon { color: var(--dim); font-size: 15px; }
.search input {
  flex: 1;
  min-width: 0;
  background: none;
  border: 0;
  outline: none;
}
.search input::placeholder { color: var(--dim); }
.search input::-webkit-search-cancel-button { display: none; }
.search-clear { color: var(--dim); font-size: 12px; }

.icon-btn {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 10px;
  color: var(--muted);
  font-size: 18px;
  line-height: 1;
  flex: 0 0 auto;
}
.icon-btn:hover { background: #ffffff14; color: var(--text); }
.back-btn { width: 44px; height: 44px; color: #fff; }
.back-btn svg { width: 28px; height: 28px; }
.icon-btn.ghost:hover { color: var(--pink); }

/* tag chips */
.chips {
  display: flex;
  gap: 8px;
  flex: 1 0 100%;
  padding: 2px 0 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex: 0 0 auto;
  padding: 8px 15px;
  border-radius: var(--pill);
  background: var(--surface-3);
  color: var(--text);
  white-space: nowrap;
  border: 1px solid transparent;
  font-size: 13px;
}
.chip:hover { background: var(--surface-2); border-color: var(--border); }
.chip.active {
  background: #f971871f;
  border-color: var(--pink);
  color: var(--text);
  font-weight: 600;
}
.chip-all {
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
}
.chip-all.active {
  background: var(--pink);
  border-color: transparent;
  color: #2a0118;
}

/* homepage carousel */
.hero { padding: 4px 0 2px; }
.hero-track {
  position: relative;
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 0 14px;
  scrollbar-width: none;
}
.hero-track::-webkit-scrollbar { display: none; }
.hero-slide {
  position: relative;
  flex: 0 0 min(420px, 86%);
  height: 168px;
  scroll-snap-align: start;
  border-radius: 18px;
  overflow: hidden;
  background: linear-gradient(115deg, #3a1824 0%, #1a1218 55%, #121214 100%);
  color: #fff;
  text-align: left;
}
.hero-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 18%;
}
.hero-photo:not([src]) { display: none; }
.hero-slide::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #130e11e6 0%, #130e118c 42%, #130e1122 100%);
}
.hero-copy {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 4px;
  height: 100%;
  padding: 18px 18px 20px;
}
.hero-copy b {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.4px;
  line-height: 1.05;
}
.hero-copy em { font-style: normal; font-weight: 600; font-size: 14px; }
.hero-dots { display: flex; justify-content: center; gap: 6px; padding: 10px 0 2px; }
.hero-dots i { width: 6px; height: 6px; border-radius: 99px; background: #ffffff33; display: block; }
.hero-dots i.on { width: 16px; background: #fff; }

.hubs {
  display: flex;
  align-items: flex-end;
  gap: 22px;
  padding: 8px 20px 0;
}
.hub {
  position: relative;
  padding: 8px 2px 10px;
  color: #8d8d96;
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  background: none;
}
.hub.on { color: #fff; }
.hub.on::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--pink);
}

.browse-find {
  position: relative;
  padding: 12px 20px 2px;
}
.browse-search-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.round-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #2a2a2e;
  color: #fff;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}
.round-btn svg { width: 18px; height: 18px; }
.round-btn:hover,
.round-btn[aria-expanded="true"] { background: #3a3a42; }
.browse-search { height: 44px; background: #2a2a2e; }
.browse-search .search-icon { width: 18px; height: 18px; flex: 0 0 auto; }
.browse-search input { font-size: 14px; color: var(--text); }
.browse-chips {
  display: flex;
  gap: 2px;
  overflow-x: auto;
  padding: 8px 0 4px;
  scrollbar-width: none;
}
.browse-chips::-webkit-scrollbar { display: none; }
.browse-chip {
  flex: 0 0 auto;
  padding: 8px 14px;
  border-radius: 999px;
  background: transparent;
  color: #c8c8d0;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}
.browse-chip:hover { color: #fff; }
.browse-chip.on { background: #3a3a40; color: #fff; }
.sort-menu,
.filter-sheet {
  position: absolute;
  z-index: 25;
  top: 58px;
  background: var(--surface);
  border: 1px solid #ffffff14;
  border-radius: 16px;
  box-shadow: 0 12px 32px #00000080;
}
.sort-menu { left: 0; min-width: 168px; padding: 6px; }
.sort-menu button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  border-radius: 10px;
  color: var(--text);
  font-weight: 600;
}
.sort-menu button.on { background: #f971871f; }
.filter-sheet {
  right: 0;
  width: min(420px, 100%);
  padding: 10px 10px 12px;
}
.filter-label {
  margin: 0;
  padding: 2px 6px 8px;
  color: var(--dim);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.filter-tags { display: flex; flex-wrap: wrap; gap: 2px; }

/* character grid */
.grid-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 20px 14px;
}
.grid-head h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0;
}
.grid-head h2 em { font-style: normal; color: var(--pink); }
.grid-head span { color: var(--dim); font-size: 13px; }

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(196px, 1fr));
  gap: 16px 12px;
  padding: 0 20px 24px;
}

/* Character card — name and age sit on the image itself, candy.ai style. */
.card { display: block; text-align: left; min-width: 0; }

.card-thumb {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface-3);
  border: 1px solid var(--line);
}
.card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.3, 1);
}

/* permanent scrim so the name always stays readable */
.card-scrim {
  position: absolute;
  inset: auto 0 0 0;
  padding: 52px 12px 12px;
  background: linear-gradient(to top, #000000f2 18%, #00000099 62%, transparent);
}
.card-name {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  font-size: 14px;
  line-height: 1.2;
  color: #fff;
  text-shadow: 0 1px 6px #000000b3;
}
.card-name .nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card-name .ag { flex: 0 0 auto; font-weight: 500; color: #ffffffd9; }
.card-blurb {
  margin: 4px 0 0;
  color: #f3f3f5;
  font-size: 12px;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.card-stats {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
  font-size: 12px;
  color: #ffffffc7;
}
.card-stats .at { margin-left: auto; max-width: 42%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.card-noimg {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  color: var(--dim);
  font-size: 24px;
}
.card-play {
  position: absolute;
  right: 8px;
  top: 8px;
  padding: 3px 8px;
  border-radius: var(--pill);
  background: #000000a6;
  backdrop-filter: blur(6px);
  font-size: 11px;
  color: #fff;
}

.grid-foot { display: grid; place-items: center; padding: 6px 20px 40px; }
.more {
  padding: 12px 28px;
  border-radius: var(--pill);
  background: var(--surface-3);
  color: var(--text);
  font-weight: 600;
  border: 1px solid var(--line);
}
.more:hover { background: var(--surface-2); border-color: var(--border-strong); }
.end { color: var(--dim); margin: 0; }

.skeleton { border-radius: var(--radius); background: var(--surface-2); aspect-ratio: 3 / 4; animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: 0.55; } }

/* ---------------- chat ---------------- */
.chat-head {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 20px;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: blur(12px);
}
.chat-person {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1;
}
.chat-avatar-btn {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 50%;
}
.chat-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--surface-2);
  pointer-events: none;
}
.chat-who {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  line-height: 1.25;
  min-width: 0;
  flex: 1;
  padding: 0;
  color: inherit;
  text-align: left;
}
.chat-who b { font-size: 15px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-who span { color: var(--dim); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.persona {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom));
  background: #000000b8;
}
.persona[hidden] { display: none; }
.persona-sheet {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: min(460px, 100%);
  max-height: min(94vh, 920px);
  pointer-events: none;
}
.persona-card {
  position: relative;
  pointer-events: auto;
  width: 100%;
  max-height: calc(min(94vh, 920px) - 52px);
  overflow: auto;
  padding: 18px 18px 22px;
  border-radius: 28px;
  background: #141416;
  border: 1px solid #ffffff10;
}
/* Sits inside the card, top-right. Previously it was a sibling ABOVE the card,
   floating on the dark overlay where it was almost invisible. */
.persona-x {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 6;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #000000b3;
  border: 1px solid #ffffff40;
  color: #fff;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background 0.15s ease, transform 0.15s ease;
}
.persona-x:hover { background: #000000d9; transform: scale(1.06); }
.persona-x:active { transform: scale(0.94); }
.persona-stage {
  position: relative;
  width: min(100%, 280px);
  margin: 0 auto;
}
.persona-stage img,
.persona-stage video,
.persona-ph {
  display: block;
  width: 100%;
  max-height: min(42vh, 380px);
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: center 18%;
  border-radius: 18px;
  background: #1c1c20;
}
.persona-ph {
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 64px;
  font-weight: 800;
}
.persona-nav {
  position: absolute;
  top: 50%;
  z-index: 1;
  width: 36px;
  height: 36px;
  margin-top: -18px;
  border-radius: 50%;
  background: #00000066;
  color: #fff;
  font-size: 28px;
  line-height: 1;
}
.persona-nav.prev { left: 8px; }
.persona-nav.next { right: 8px; }
.persona-nav[hidden] { display: none; }
.persona-card h2 {
  margin: 16px 8px 8px;
  text-align: center;
  font-size: 22px;
  font-weight: 800;
  line-height: 1.25;
}
.persona-stats {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px 18px;
  color: #c8c8ce;
  font-size: 13px;
  font-weight: 600;
}
.persona-stat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  color: inherit;
  font-weight: 600;
}
.persona-stat svg { width: 16px; height: 16px; }
.persona-actions {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 10px;
  margin-top: 16px;
}
.persona-chat, .persona-gen {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 52px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 16px;
}
.persona-chat svg, .persona-gen svg { width: 18px; height: 18px; }
.persona-chat { background: #fff; color: #111; }
.persona-gen { background: #2a2a2e; color: #fff; }
.persona-facts {
  margin: 16px 4px 0;
  color: #d4d4d8;
  font-size: 14px;
}
.persona-facts b { color: #fff; font-weight: 700; }
.persona-bio {
  margin: 10px 4px 0;
  color: #e7e7ea;
  font-size: 14px;
  line-height: 1.55;
  text-align: left;
}
.persona-bio.clamped {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.persona-bio-more {
  margin-top: 4px;
  padding: 0;
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  text-decoration: underline;
}
.persona-bio-more[hidden] { display: none; }
.persona-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.persona-tag {
  padding: 8px 14px;
  border-radius: 999px;
  background: #2a2a2e;
  color: #eee;
  font-size: 13px;
  font-weight: 600;
}
.persona-creator {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  margin-top: 18px;
  padding: 10px;
  border-radius: 16px;
  background: #222226;
}
.persona-creator[hidden] { display: none; }
.persona-mark {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #3a3a42;
  font-weight: 700;
}
.persona-creator-copy { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.persona-creator-copy b { font-size: 14px; }
.persona-creator-copy span { color: var(--dim); font-size: 12px; }
.persona-follow {
  padding: 8px 14px;
  border-radius: 999px;
  background: #3a3a42;
  color: #fff;
  font-weight: 700;
}
.persona-follow.on { background: #fff; color: #111; }
.persona-more-from {
  display: block;
  margin: 14px auto 0;
  color: #eee;
  font-weight: 700;
}
.persona-more-from[hidden] { display: none; }
@media (min-width: 720px) {
  .persona { align-items: center; }
}

.log {
  flex: 1;
  overflow-y: auto;
  padding: 22px 20px 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: 860px;
  width: 100%;
  margin: 0 auto;
}

.msg {
  max-width: 76%;
  padding: 11px 14px;
  border-radius: 16px;
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
}
.msg.assistant { align-self: flex-start; background: #2a2a2e; border-radius: 18px; }
.msg.user { align-self: flex-end; background: #f97187; color: #2d1a1f; border-radius: 18px; }
.msg.error { align-self: center; background: #3f1d1d; color: #fca5a5; font-size: 13px; max-width: 90%; }

.thought {
  align-self: flex-start;
  max-width: 76%;
  margin: 2px 0 12px;
  padding: 10px 14px;
  border-radius: 16px;
  background: rgba(12, 10, 12, 0.92);
  color: #f6f1f4;
  font-size: 14px;
  font-style: italic;
  line-height: 1.6;
  white-space: pre-wrap;
}

.msg-img { align-self: flex-start; max-width: 300px; border-radius: var(--radius); display: block; }

.typing { display: flex; gap: 4px; align-self: flex-start; padding: 14px; }
.typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--dim); animation: blink 1.2s infinite; }
.typing i:nth-child(2) { animation-delay: 0.18s; }
.typing i:nth-child(3) { animation-delay: 0.36s; }
@keyframes blink { 0%, 60%, 100% { opacity: 0.25; } 30% { opacity: 1; } }

.composer {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
  margin: 0 auto 8px;
  width: min(860px, calc(100% - 20px));
  padding: 10px 12px calc(8px + env(safe-area-inset-bottom));
  border-radius: 26px;
  background: #1c1c20;
  border: 1px solid #ffffff14;
}
.starter {
  align-self: flex-end;
  max-width: min(86%, 420px);
  margin: 0 0 8px;
  padding: 10px 14px;
  border-radius: 16px;
  border: 1px solid rgba(249, 113, 135, 0.72);
  background: rgba(249, 113, 135, 0.16);
  color: #fff;
  text-align: left;
  line-height: 1.45;
  font-size: 14px;
  cursor: pointer;
}
.starter[hidden] { display: none; }
.starter:disabled { opacity: 0.55; cursor: default; }
body.has-starter:not(.chat-thread) #view-chat .log {
  bottom: calc(148px + env(safe-area-inset-bottom));
}
.composer textarea {
  width: 100%;
  min-height: 28px;
  max-height: 120px;
  padding: 2px 6px 6px;
  border: 0;
  border-radius: 0;
  background: transparent;
  resize: none;
  outline: none;
  line-height: 1.45;
  /* Must stay >= 16px: iOS Safari zooms the whole page when focusing
     an input whose font-size is smaller than that. */
  font-size: 16px;
}
.composer textarea::placeholder { color: #8d8d96; }
.ask {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding: 0 2px;
  background: transparent;
}
.ask-spacer { flex: 1; }
.ask-pill,
.ask-photo,
.ask-mic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  color: #f2f2f3;
}
.ask-pill {
  gap: 2px;
  height: 36px;
  padding: 0 8px 0 12px;
  border-radius: 999px;
  background: #2c2c31;
}
.ask-pill svg { width: 18px; height: 18px; }
.ask-pill svg:last-child { width: 14px; height: 14px; opacity: 0.85; }
.ask-photo,
.ask-mic {
  width: 36px;
  height: 36px;
  border-radius: 50%;
}
.ask-photo { background: #fff; color: #16161a; }
.ask-photo svg,
.ask-mic svg { width: 18px; height: 18px; }
.ask-mic { background: #2c2c31; }
.ask-go .ask-ico-send { display: none; }
.ask-go.has-text { background: #fff; color: #16161a; }
.ask-go.has-text .ask-ico-mic { display: none; }
.ask-go.has-text .ask-ico-send { display: block; }
.ask-go.recording { background: #f97187; color: #fff; }
.ask-menu {
  position: absolute;
  left: 12px;
  bottom: calc(100% + 8px);
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 180px;
  padding: 8px;
  border-radius: 14px;
  background: #2a2428;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}
.ask-menu button {
  height: 40px;
  border-radius: 10px;
  background: #3a3338;
  color: #fff;
  font-weight: 650;
  text-align: left;
  padding: 0 12px;
}
.msg-photo {
  display: block;
  width: min(220px, 100%);
  border-radius: 12px;
  cursor: pointer;
}
.msg audio { display: block; width: min(240px, 100%); margin-top: 6px; }
.msg-photo + .msg-text,
.msg audio + .msg-text { margin-top: 8px; }
.ask-go:disabled { opacity: 0.45; }

/* chat list */
.chats-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 auto;
  padding: 18px 16px 4px;
  max-width: 860px;
  width: 100%;
}
.chats-head h2 { margin: 0; font-size: 22px; font-weight: 600; letter-spacing: 0; line-height: 1.2; }
#chats-close { margin-left: auto; }
.chat-list { display: flex; flex-direction: column; margin: 0 auto; padding: 4px 8px 40px; max-width: 860px; width: 100%; }
.chat-row {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px 10px;
  border-radius: 12px;
  text-align: left;
  width: 100%;
  cursor: pointer;
}
.chat-row:hover { background: #ffffff0c; }
.chat-row img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; background: var(--surface-2); }
.chat-row .meta b { display: block; font-size: 14px; font-weight: 600; }
.chat-row .meta span { color: var(--dim); font-size: 13px; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-side { display: grid; justify-items: end; gap: 8px; color: var(--dim); }
.chat-side > span { font-size: 11px; white-space: nowrap; }
.chat-actions { display: flex; gap: 2px; }
.chat-actions button {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  color: #8d8d95;
  border-radius: 8px;
}
.chat-actions button:hover { background: #ffffff14; color: var(--text); }
.chat-actions svg { width: 16px; height: 16px; }

.blank { display: grid; place-items: center; gap: 10px; padding: 80px 20px; text-align: center; }
.blank h2 { margin: 0; }
.blank p { color: var(--dim); margin: 0; }

/* lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: #000000e6;
  display: grid;
  place-items: center;
  padding: 40px 20px;
}
.lightbox-close { position: absolute; top: 18px; right: 22px; font-size: 22px; color: #fff; }
.lightbox-body { display: flex; gap: 12px; overflow-x: auto; max-width: 100%; padding: 8px; }
.lightbox-body img { height: 72vh; border-radius: var(--radius); object-fit: contain; background: var(--surface); }

/* language picker */
.lang-modal {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: 24px 16px;
  background: #00000080;
}
.lang-card {
  width: min(420px, 100%);
  max-height: min(640px, calc(100vh - 48px));
  overflow: auto;
  padding: 18px 16px 16px;
  border-radius: 18px;
  background: #1c1c20;
  border: 1px solid #ffffff14;
  box-shadow: 0 18px 50px #00000080;
}
.lang-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.lang-head h2 { margin: 0; font-size: 22px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.lang-head p { margin: 6px 0 0; color: #9a9aa3; font-size: 13px; }
.lang-badge {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  background: #3a3a40;
  color: #d7d7de;
  font-size: 12px;
  font-style: normal;
  font-weight: 600;
}
.lang-list { display: flex; flex-direction: column; gap: 8px; }
.lang-option {
  width: 100%;
  height: 46px;
  border-radius: 12px;
  background: #2a2a30;
  color: #f2f2f3;
  font-size: 15px;
  font-weight: 600;
  text-align: left;
  padding: 0 16px;
}
.lang-option.on { background: #3a3a42; }

/* Toast */
.toast {
  position: fixed;
  left: 50%;
  bottom: 84px;
  transform: translateX(-50%);
  z-index: 95;
  max-width: min(420px, calc(100vw - 32px));
  padding: 11px 18px;
  border-radius: 10px;
  background: var(--surface-3);
  box-shadow: 0 8px 30px #00000080;
  font-size: 13px;
  line-height: 1.45;
  text-align: center;
}

/* mobile tab bar */
.tabbar {
  display: none;
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(8px + env(safe-area-inset-bottom));
  z-index: 60;
  width: min(460px, calc(100vw - 20px));
  justify-content: space-between;
  gap: 2px;
  padding: 6px 4px 8px;
  border-radius: 26px;
  border: 1px solid #ffffff14;
  background: rgba(22, 22, 24, 0.78);
  backdrop-filter: blur(18px) saturate(1.4);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}
.tab {
  flex: 1;
  min-width: 0;
  height: auto;
  padding: 4px 0 2px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  color: #b9b9c1;
  border-radius: 14px;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.1;
}
.tab span { white-space: nowrap; }
.tab svg { width: 22px; height: 22px; }
.tab[data-nav="create"] svg { width: 22px; height: 22px; }
.tab.active { color: var(--pink); }
.scrim { position: fixed; inset: 0; z-index: 70; background: #00000080; }
.ghost-pill, .join-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  line-height: 1;
}
.ghost-pill { border: 1px solid #ffffff38; color: #fff; }
.join-pill { background: var(--pink); color: #2a0118; font-weight: 700; }
.upgrade-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 16px;
  border-radius: 999px;
  background: var(--pink);
  color: #2a0118;
  font-weight: 700;
  font-size: 14px;
}
.upgrade-pill svg { width: 16px; height: 16px; }
.bell-btn { position: relative; width: 36px; height: 36px; color: #fff; }
.bell-btn svg { width: 22px; height: 22px; }
.bell-badge {
  position: absolute;
  top: 2px;
  right: 0;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: #ff3b5c;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
}
.notice {
  position: fixed;
  z-index: 95;
  top: 0;
  right: 0;
  width: min(460px, 100%);
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #0e0e10;
  border-left: 1px solid #ffffff14;
  box-shadow: -24px 0 60px #00000080;
}
.notice-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 16px 14px;
  border-bottom: 1px solid #ffffff14;
}
.notice-head h2 { margin: 0; font-size: 26px; font-weight: 700; }
.notice-head #notice-read { margin-left: auto; color: #bdbdc6; font-size: 14px; }
.notice-tabs .dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-left: 4px;
  border-radius: 50%;
  background: var(--pink);
  vertical-align: super;
}
.notice-list { flex: 1; overflow-y: auto; }
.notice-row {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 64px;
  gap: 12px;
  align-items: center;
  width: 100%;
  padding: 14px 16px;
  border-bottom: 1px solid #ffffff10;
  text-align: left;
  color: #eee;
}
.notice-row img {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  background: #222;
}
.notice-row .thumb {
  width: 64px;
  height: 64px;
  border-radius: 10px;
  object-fit: cover;
}
.notice-row b { display: block; font-size: 14px; line-height: 1.35; }
.notice-row span { color: #9a9aa3; font-size: 13px; }
.notice-empty {
  margin: 48px 20px;
  text-align: center;
  color: #8d8d95;
  font-size: 16px;
}
.auth-coins { margin: -8px 0 6px; color: var(--gold); font-weight: 700; }
.auth-invite { margin: 0 0 4px; color: var(--muted); font-size: 13px; font-weight: 600; letter-spacing: 0.4px; }
.auth-interest { margin: 0 0 16px; color: var(--muted); font-size: 13px; font-weight: 600; }

.ledger { margin: 0 0 14px; }
.ledger h3 { margin: 0 0 8px; font-size: 13px; font-weight: 600; color: var(--muted); }
.ledger ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 148px;
  overflow-y: auto;
}
.ledger li { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 13px; }
.ledger .meta { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ledger .note { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ledger .when { color: var(--dim); font-size: 12px; }
.ledger .amt { flex: 0 0 auto; font-weight: 700; }
.ledger .amt.plus { color: var(--gold); }
.ledger .amt.minus { color: #fca5a5; }
.ledger .empty { color: var(--dim); }

/* ---------------- shared controls ---------------- */
.primary {
  padding: 13px 26px;
  border-radius: var(--pill);
  font-weight: 600;
  color: #2d1a1f;
  background: var(--pink);
}
.primary:hover { background: var(--pink-hover); }
.primary:disabled { opacity: 0.55; cursor: default; }
.primary.need-photo { opacity: 0.45; }
.primary.wide { width: 100%; }
.small-btn { padding: 7px 14px; font-size: 13px; margin-left: auto; }

.seg {
  display: flex;
  gap: 4px;
  padding: 4px;
  border-radius: var(--pill);
  background: var(--surface-2);
}
.seg-item {
  flex: 1;
  padding: 11px 12px;
  border-radius: var(--pill);
  color: var(--muted);
  white-space: nowrap;
}
.seg-item:hover { color: var(--text); }
.seg-item.active { background: var(--surface-3); color: var(--text); font-weight: 600; }
.seg.small .seg-item { padding: 8px 10px; font-size: 13px; }
.seg-item.disabled { opacity: 0.4; cursor: default; }

/* ---------------- create wizard ---------------- */
.wizard {
  max-width: 760px;
  width: 100%;
  margin: 0 auto;
  padding: 18px 20px 72px;
}
.wiz-top {
  display: grid;
  grid-template-columns: 36px 1fr 36px;
  align-items: center;
  gap: 8px;
  margin-bottom: 22px;
}
.wiz-progress { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.wiz-progress span { color: var(--dim); font-size: 12px; text-align: center; letter-spacing: 0.4px; }
.wiz-bar { height: 3px; border-radius: 99px; background: var(--surface-3); overflow: hidden; }
.wiz-bar i { display: block; height: 100%; width: 0; background: var(--pink); border-radius: inherit; }
.wiz-kicker {
  margin: 0;
  text-align: center;
  color: var(--muted);
  font-size: 15px;
}
.wizard-title {
  margin: 2px 0 8px;
  font-size: 28px;
  font-weight: 700;
  text-align: center;
  letter-spacing: -0.4px;
  line-height: 1.15;
}
.wizard-title span { color: var(--pink); }
.wiz-hint { margin: 0 0 18px; text-align: center; color: var(--dim); font-size: 13px; }

.wiz-pills, .wiz-tiles, .wiz-swatches { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.wiz-pill, .wiz-tile {
  padding: 12px 16px;
  border-radius: 14px;
  background: var(--surface-2);
  border: 2px solid transparent;
  color: var(--text);
  font-size: 15px;
  font-weight: 600;
}
.wiz-pill.on, .wiz-tile.on, .wiz-portrait.on, .wiz-swatch.on { border-color: var(--pink); }
.wiz-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); }
.wiz-tile { text-align: center; }

.wiz-portraits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.wiz-portrait {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: 16px;
  overflow: hidden;
  border: 3px solid transparent;
  background: var(--surface-2);
  color: #fff;
  padding: 0;
}
.wiz-portrait img, .wiz-portrait .ph { width: 100%; height: 100%; object-fit: cover; display: block; }
.wiz-portrait .ph { background: linear-gradient(160deg, #2a2a32, #121216 70%); }
.wiz-portrait::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 46%;
  background: linear-gradient(transparent, #000000d6);
  pointer-events: none;
}
.wiz-portrait b {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 12px;
  z-index: 1;
  text-align: center;
  font-size: 15px;
  font-weight: 600;
  text-shadow: 0 2px 10px #000000cc;
}

.wiz-swatch {
  width: 72px;
  padding: 8px 0 10px;
  border-radius: 14px;
  border: 2px solid transparent;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
}
.wiz-swatch i {
  display: block;
  width: 36px;
  height: 36px;
  margin: 0 auto 6px;
  border-radius: 50%;
  border: 1px solid #ffffff22;
}

.wizard label { display: block; margin-bottom: 14px; color: var(--muted); font-size: 13px; }
.wizard input[type="text"],
.wizard input[type="number"],
.wizard input:not([type]),
.wizard textarea {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 12px 14px;
  border-radius: 11px;
  background: var(--surface-2);
  border: 1px solid transparent;
  color: var(--text);
  outline: none;
  resize: vertical;
  font-size: 16px;
}
.wizard input:focus, .wizard textarea:focus { border-color: var(--border-strong); }
.wiz-summary { margin: 0 0 16px; color: var(--dim); font-size: 13px; line-height: 1.5; text-align: center; }

.portrait-picks { display: flex; gap: 10px; margin: 4px 0 14px; }
.portrait-pick {
  width: 108px;
  height: 144px;
  padding: 0;
  border-radius: 14px;
  overflow: hidden;
  border: 2px solid transparent;
  background: var(--surface-2);
}
.portrait-pick.on { border-color: var(--pink); }
.portrait-pick img { width: 100%; height: 100%; object-fit: cover; display: block; }
.portrait-pick.busy { opacity: 0.7; }
.avatar-row { display: flex; gap: 16px; align-items: flex-start; margin: 4px 0 22px; }
.avatar-preview {
  width: 96px;
  height: 120px;
  flex: 0 0 auto;
  border-radius: 12px;
  background: var(--surface-2);
  display: grid;
  place-items: center;
  color: var(--dim);
  font-size: 22px;
  overflow: hidden;
}
.avatar-preview img { width: 100%; height: 100%; object-fit: cover; }
.avatar-ctl { flex: 1; min-width: 0; }
.avatar-ctl .hint { margin: 0 0 10px; color: var(--dim); font-size: 13px; line-height: 1.5; }
.avatar-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.file-btn {
  display: inline-block !important;
  margin: 0 !important;
  padding: 11px 18px;
  border-radius: 10px;
  background: var(--surface-2);
  color: var(--text);
  font-size: 14px;
  cursor: pointer;
}
.file-btn:hover { background: var(--surface-3); }
.file-btn.hidden { display: none !important; }

/* ---------------- generate ---------------- */
.gen-wrap { display: flex; gap: 22px; align-items: flex-start; padding: 20px; flex: 1; min-height: 0; }
.gen-panel {
  flex: 0 0 340px;
  position: sticky;
  top: 76px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px;
  border-radius: 18px;
  background: var(--surface);
  border: 1px solid var(--border);
}
.gen-subtabs { display: flex; gap: 16px; font-size: 14px; }
.gen-subtabs button { color: var(--dim); font-weight: 600; padding: 0; }
.gen-subtabs button.on { color: var(--text); }
.gen-step { margin: 8px 0 0; color: var(--muted); font-size: 13px; font-weight: 650; }
.gen-character {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px;
  border-radius: 14px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  text-align: left;
  color: var(--text);
}
.gen-character img {
  width: 48px;
  height: 64px;
  object-fit: cover;
  border-radius: 8px;
  background: #111;
}
.gen-character b { display: block; font-size: 15px; }
.gen-character em { display: block; margin-top: 2px; color: var(--dim); font-style: normal; font-size: 12px; }
.gen-links { display: flex; gap: 14px; }
.gen-links button { color: var(--pink); font-size: 13px; font-weight: 650; padding: 0; }
.gen-links button.on { color: #fff; }
.scene-picks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.scene-picks button, .style-picks button {
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: flex-start;
  padding: 10px;
  border-radius: 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 13px;
}
.scene-picks button span { color: var(--dim); font-size: 11px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scene-picks button.on, .style-picks button.on { border-color: var(--pink); }
.style-picks { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.style-picks button { align-items: center; font-weight: 650; }
.gen-note { margin: 0; color: var(--dim); font-size: 12px; line-height: 1.45; }
.gen-edit-grid { display: flex; gap: 8px; overflow-x: auto; min-height: 72px; }
.gen-edit-grid img {
  width: 54px;
  height: 72px;
  object-fit: cover;
  border-radius: 8px;
  border: 2px solid transparent;
  cursor: pointer;
}
.gen-edit-grid img.on { border-color: var(--pink); }
.gen-panel textarea {
  width: 100%;
  padding: 12px 14px;
  border-radius: 11px;
  background: var(--surface-2);
  border: 1px solid transparent;
  color: var(--text);
  outline: none;
  resize: vertical;
  font-size: 15px;
}
.gen-panel textarea:focus { border-color: var(--border-strong); }

.preset-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.preset {
  display: grid;
  place-items: center;
  gap: 4px;
  padding: 22px 8px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--muted);
}
.preset:hover { border-color: var(--pink); color: var(--text); }
.preset.active { border-color: var(--pink); background: #f9718714; color: var(--text); }
.preset.done { border-color: var(--pink); }
.preset i { font-style: normal; font-size: 20px; }
.preset b { font-size: 15px; font-weight: 600; color: var(--text); }
.preset span { font-size: 12px; color: var(--dim); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.preset.done span { color: var(--pink); }

.preset-options {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  padding: 12px;
  border-radius: 12px;
  background: var(--surface-2);
}
.opt {
  padding: 7px 12px;
  border-radius: 999px;
  background: var(--bg);
  color: var(--muted);
  font-size: 13px;
}
.opt:hover { color: var(--text); }
.opt.active { background: var(--pink); color: #2a0118; font-weight: 600; }

.gen-foot { margin-top: 4px; padding-top: 6px; }
.cost { opacity: 0.75; font-weight: 500; }

.gen-main { flex: 1; min-width: 0; }
.gen-main h2 {
  margin: 0 0 4px;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.4px;
}
.gen-main h2 em { font-style: normal; color: var(--pink); }
.gen-sub { margin: 0 0 16px; color: var(--dim); font-size: 13px; }
.gen-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; }
.gen-grid figure { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.gen-grid img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 12px;
  background: var(--surface-2);
  display: block;
  cursor: pointer;
}
.gen-grid figcaption { color: var(--dim); font-size: 12px; }
.gen-empty {
  grid-column: 1 / -1;
  padding: 30px;
  border-radius: 14px;
  border: 1px dashed var(--border-strong);
  color: var(--dim);
  text-align: center;
  line-height: 1.7;
}

/* ---------------- my ai ---------------- */
.myai { padding: 20px 0 60px; }
.myai .grid-head { padding-left: 20px; padding-right: 20px; }
.myai .grid { padding: 0 20px 20px; }

.mine-badge {
  position: absolute;
  left: 8px;
  top: 8px;
  padding: 3px 9px;
  border-radius: var(--pill);
  background: var(--pink);
  color: #2d1a1f;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.4px;
}

/* ---------------- character picker ---------------- */
.picker {
  position: fixed;
  inset: 0;
  z-index: 92;
  background: #000000cc;
  display: grid;
  place-items: center;
  padding: 40px 20px;
}
.picker-box {
  width: min(1000px, 100%);
  max-height: 82vh;
  display: flex;
  flex-direction: column;
  border-radius: 18px;
  background: var(--bg);
  border: 1px solid var(--border);
  overflow: hidden;
}
.picker-box header { display: flex; gap: 10px; padding: 14px; border-bottom: 1px solid var(--border); }
.picker-box header input {
  flex: 1;
  padding: 11px 14px;
  border-radius: 11px;
  background: var(--surface-2);
  border: 1px solid transparent;
  color: var(--text);
  outline: none;
}
.picker-box .grid { overflow-y: auto; padding: 16px; }

/* ---------------- responsive ---------------- */
@media (max-width: 1100px) {
  .grid { grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); }
}

@media (max-width: 860px) {
  .sidebar {
    display: flex;
    position: fixed;
    z-index: 80;
    left: 0;
    top: 0;
    transform: translateX(-105%);
    transition: transform 0.2s ease;
  }
  .sidebar.open { transform: none; }
  .tabbar { display: flex; }
  .main { padding-bottom: 88px; }
  body.in-chat .main { padding-bottom: 0; }
  body.chat-thread .tabbar { display: none; }
  body.chat-reel #view-chat .composer {
    bottom: calc(80px + env(safe-area-inset-bottom));
    padding-bottom: 8px;
  }
  body.chat-reel #view-chat .log {
    bottom: calc(156px + env(safe-area-inset-bottom));
    max-height: calc(100% - 172px - env(safe-area-inset-bottom));
  }
  body.chat-reel.has-starter #view-chat .log {
    bottom: calc(228px + env(safe-area-inset-bottom));
    max-height: calc(100% - 244px - env(safe-area-inset-bottom));
  }
  body.chat-thread #view-chat .composer {
    bottom: auto;
    padding-bottom: calc(8px + env(safe-area-inset-bottom));
  }
  body.chat-thread #view-chat .log {
    top: auto;
    bottom: auto;
    max-height: none;
  }
  .topbar { padding: 10px 12px 12px; gap: 10px; }
  .sitebar {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
  }
  .menu-btn, .sitebar-brand, .sitebar-actions { display: flex; }
  .menu-btn { display: grid; place-items: center; width: 40px; height: 40px; color: #fff; }
  .sidebar {
    width: min(300px, 84vw);
    background: #141416;
    border-right: 0;
    padding: 18px 16px 20px;
    box-shadow: 18px 0 48px #00000099;
  }
  .sitebar-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.3px;
    min-width: 0;
  }
  .sitebar-brand .logo-mark { width: 34px; height: 34px; }
  .sitebar-brand span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .sitebar-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
  .gender-wrap select {
    background: transparent;
    padding: 4px 18px 4px 2px;
  }
  .findbar { display: flex; align-items: center; gap: 8px; width: 100%; }
  .find-scroll {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .find-scroll::-webkit-scrollbar { display: none; }
  .filters { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
  .chips { flex: 0 0 auto; padding: 0; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 14px 10px; padding: 0 14px 20px; }
  .hubs { gap: 0; justify-content: space-between; padding: 6px 16px 0; }
  .browse-find { padding: 10px 14px 2px; }
  .hub { font-size: 15px; }
  .grid-head { padding: 4px 14px 10px; }
  .grid-foot { padding-bottom: 26px; }
  .log { padding: 16px 14px 8px; }
  .composer { width: calc(100% - 16px); padding-bottom: calc(8px + env(safe-area-inset-bottom)); }
  .msg, .thought { max-width: 88%; }
  .chat-head { padding: 8px 14px; }
  .chat-list { padding: 6px 8px 30px; }

  .wizard { padding: 14px 14px 48px; }
  .wizard-title { font-size: 28px; }
  .wiz-portraits { gap: 10px; }
  .avatar-row { flex-direction: column; }

  .gen-wrap { flex-direction: column; padding: 14px; gap: 16px; }
  .gen-panel { position: static; flex: 1 1 auto; width: 100%; }
  .gen-main h2 { font-size: 20px; }
  .gen-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  .myai .grid-head, .myai .grid { padding-left: 14px; padding-right: 14px; }
  .picker { padding: 16px; }
}

@media (min-width: 861px) {
  .grid-head h2 { font-size: 22px; }
  .sidebar.collapsed { flex-basis: 74px; width: 74px; }
  .sidebar.collapsed .sidebar-user,
  .sidebar.collapsed .brand-name,
  .sidebar.collapsed .nav-item span,
  .sidebar.collapsed .premium-item .off,
  .sidebar.collapsed .drawer-links { display: none; }
  .sidebar.collapsed .nav-item { justify-content: center; gap: 0; }
}

/* ---------------- auth ---------------- */
.auth {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding:
    max(12px, env(safe-area-inset-top))
    12px
    max(12px, env(safe-area-inset-bottom));
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  background: #000000a6;
  backdrop-filter: blur(8px);
}
.auth-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  width: min(920px, 100%);
  max-width: 100%;
  min-height: 560px;
  margin: auto;
  flex: 0 0 auto;
  padding: 0;
  overflow: hidden;
  border-radius: 28px;
  background: #1c1c1f;
  border: 1px solid #ffffff14;
  box-shadow: 0 24px 80px #00000099;
}
.auth-card.solo {
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  width: min(440px, 100%);
  min-height: 0;
}
.auth-card.solo .auth-art { display: none; }
.auth-card.solo .auth-foot { display: none; }
.auth-pane {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  padding: 42px 36px 24px;
}
.auth-card.solo .auth-pane { padding: 28px 22px 18px; }
.auth-photo {
  position: relative;
  min-height: 560px;
  background: #2a2422;
}
.auth-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 18%;
  display: block;
}
.auth-x {
  position: absolute;
  z-index: 2;
  top: 14px;
  right: 14px;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 50%;
  background: rgba(18, 18, 20, 0.72);
  color: #fff;
  font-size: 16px;
  backdrop-filter: blur(8px);
}
.auth-pane h2 {
  margin: 6px 0 22px;
  text-align: center;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.4px;
}
.auth-back {
  align-self: flex-start;
  margin: 0 0 4px;
  color: var(--muted);
  font-size: 13px;
}
.auth-mail {
  margin: -14px 0 16px;
  text-align: center;
  color: var(--muted);
  font-size: 14px;
}
.auth-field {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 52px;
  margin-bottom: 12px;
  padding: 0 16px;
  border-radius: 16px;
  background: transparent;
  border: 1px solid #ffffff2a;
  color: var(--dim);
}
.auth-field input {
  flex: 1;
  min-width: 0;
  background: none;
  border: 0;
  outline: none;
  font-size: 16px;
  color: var(--text);
  scroll-margin: 96px;
}
.field-ico, .auth-eye {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  padding: 0;
}
.field-ico svg, .auth-eye svg { width: 20px; height: 20px; display: block; }
.social {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-width: 0;
  height: 52px;
  margin-bottom: 10px;
  padding: 0 16px;
  border-radius: 999px;
  background: #fff;
  color: #161616;
  font-weight: 650;
  font-size: 16px;
  -webkit-appearance: none;
  appearance: none;
}
.social-ico { width: 22px; height: 22px; flex: 0 0 auto; display: block; }
.auth-links { display: flex; justify-content: center; margin: 14px 0 0; }
.auth-links button { color: var(--muted); font-size: 13px; text-decoration: underline; text-underline-offset: 3px; }
.auth-hint { margin: -4px 0 12px; color: var(--dim); font-size: 13px; }
.auth-error { margin: 0 0 10px; color: #fca5a5; font-size: 13px; }
.auth-continue,
.auth-submit {
  width: 100%;
  height: 52px;
  padding: 0;
  border-radius: 16px;
  background: #3a3a3f;
  color: #fff;
  font-weight: 600;
  font-size: 16px;
  -webkit-appearance: none;
  appearance: none;
}
.auth-continue:hover,
.auth-submit:hover { background: #4a4a50; }
.auth-submit:disabled,
.auth-continue:disabled { opacity: 0.6; }
.auth-or {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 8px 0 14px;
  color: #8d8d95;
  font-size: 14px;
}
.auth-or::before, .auth-or::after { content: ""; flex: 1; height: 1px; background: #ffffff22; }
.auth-legal {
  margin: 18px 0 0;
  color: #8d8d95;
  font-size: 12px;
  line-height: 1.55;
  text-align: center;
}
.auth-who { margin: 0 0 18px; color: var(--muted); word-break: break-all; }
@media (max-width: 760px) {
  .auth-card,
  .auth-card.solo { grid-template-columns: 1fr; width: min(440px, 100%); min-height: 0; }
  .auth-photo { display: none; }
  .auth-pane,
  .auth-card.solo .auth-pane { padding: 28px 18px 16px; }
  .auth-pane h2 { font-size: 26px; }
}

/* ---------------- plans ---------------- */
.plans { padding: 20px 16px 56px; }
.plan-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  max-width: 980px;
  margin: 0 auto;
}
.tier {
  position: relative;
  padding: 22px 18px 8px;
  border-radius: 22px;
  background: #141416;
  border: 1px solid #ffffff18;
}
.tier-premium {
  background: linear-gradient(180deg, #2a1020 0%, #141416 42%);
  border-color: #ff4fa344;
}
.tier-deluxe {
  background: linear-gradient(180deg, #2a2208 0%, #141416 42%);
  border-color: #f0b42955;
}
.tier-flag {
  display: inline-flex;
  margin-bottom: 10px;
  padding: 4px 8px;
  border-radius: 8px;
  background: var(--pink);
  color: #2a0118;
  font-size: 12px;
  font-weight: 700;
}
.tier-flag.gold { background: #f0b429; color: #2a1d00; }
.tier h2 {
  margin: 0;
  font-size: 28px;
  letter-spacing: -0.4px;
}
.tier-premium h2 { color: var(--pink); }
.tier-deluxe h2 { color: #f0b429; }
.tier-gem { margin-right: 6px; }
.tier-price { margin: 14px 0 0; }
.tier-price strong { font-size: 34px; letter-spacing: -1px; }
.tier-price span, .tier-bill { color: #bdbdc6; }
.tier-bill { margin: 2px 0 14px; font-size: 13px; }
.tier-go {
  width: 100%;
  height: 48px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 16px;
}
.tier-go.pink { background: var(--pink); color: #2a0118; }
.tier-go.gold { background: linear-gradient(90deg, #f6d365, #e8b923); color: #2a1d00; }
.tier-note { margin: 12px 0 0; color: #8d8d95; font-size: 12px; line-height: 1.45; text-align: center; }
.coin-box {
  margin-top: 16px;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid #ffffff14;
  background: #101012;
}
.coin-box p { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 14px; }
.coin-heart { color: var(--pink); }
.coin-range { width: 100%; margin: 14px 0 4px; accent-color: #fff; }
.coin-stops {
  display: flex;
  justify-content: space-between;
  color: #8d8d95;
  font-size: 12px;
}
.coin-line { justify-content: space-between; margin-top: 12px !important; color: #ddd; }
.tier-perks {
  margin: 16px 0 10px;
  padding: 8px 4px 0;
  list-style: none;
  display: grid;
  gap: 10px;
  border-top: 1px solid #ffffff14;
}
.tier-perks li { position: relative; padding-left: 22px; font-size: 14px; }
.tier-premium .tier-perks li::before { content: "✓"; position: absolute; left: 0; color: var(--pink); font-weight: 700; }
.tier-deluxe .tier-perks li::before { content: "✓"; position: absolute; left: 0; color: #f0b429; font-weight: 700; }
@media (max-width: 760px) {
  .plan-grid { grid-template-columns: 1fr; }
}

.pay {
  position: fixed;
  inset: 0;
  z-index: 110;
  display: grid;
  place-items: end center;
  padding: 16px;
  background: #000000a6;
}
.pay-card {
  position: relative;
  width: min(440px, 100%);
  margin-bottom: 8px;
  padding: 22px 18px 16px;
  border-radius: 18px;
  background: #161618;
  border: 1px solid #ffffff14;
}
.pay-card h2 { margin: 0 0 8px; font-size: 22px; }
.pay-summary { margin: 0 0 14px; color: var(--muted); }
.pay-methods { display: grid; gap: 8px; margin-bottom: 12px; }
.pay-methods button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 46px;
  border-radius: 12px;
  background: #fff;
  color: #111;
  font-weight: 700;
}
.pay-ico { width: 22px; height: 22px; flex: none; }
.pay-methods button.on { outline: 2px solid var(--pink); }
.pay-bill { margin: 0 0 14px; color: var(--dim); font-size: 13px; line-height: 1.45; }
.pay-note { margin: 10px 0 0; color: var(--dim); font-size: 12px; text-align: center; }

/* ---------------- markdown inside messages ---------------- */
.msg p { margin: 0 0 0.6em; }
.msg p:last-child { margin-bottom: 0; }
.msg strong { font-weight: 700; color: #fff; }
.msg em { font-style: italic; }
.msg code {
  padding: 1px 5px;
  border-radius: 5px;
  background: #00000059;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.92em;
}
.msg h3, .msg h4, .msg h5, .msg h6 {
  margin: 0.9em 0 0.45em;
  font-size: 1.02em;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--pink);
  text-transform: none;
}
.msg h3:first-child, .msg h4:first-child { margin-top: 0; }
.msg hr { border: 0; border-top: 1px solid var(--border); margin: 0.9em 0; }
.msg blockquote {
  margin: 0.6em 0;
  padding: 0.15em 0 0.15em 0.85em;
  border-left: 2px solid var(--border-strong);
  color: var(--muted);
}
.msg ul, .msg ol { margin: 0.5em 0; padding-left: 1.35em; }
.msg li { margin: 0.2em 0; }
.msg a { color: var(--pink); text-decoration: underline; }

/* Tables: the scroll container handles overflow, so the table itself keeps
   normal column sizing (display:block on <table> destroys column widths). */
.msg .md-table {
  margin: 0.7em 0;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 10px;
}
.msg .md-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9em;
}
.msg .md-table th,
.msg .md-table td {
  padding: 7px 10px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
  text-align: left;
}
.msg .md-table thead th {
  background: #ffffff12;
  font-weight: 600;
}
.msg .md-table tr:last-child td { border-bottom: 0; }
/* first cell is the label (race / stat), last is the rarity: keep both on one line */
/* ---------------- profile ---------------- */
.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;
}
.account {
  width: min(672px, 100%);
  margin: 0 auto;
  padding: 16px 16px 72px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.account-id {
  display: flex;
  align-items: center;
  gap: 12px;
}
.account-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--surface-3);
  color: var(--pink);
  font-weight: 700;
  flex: none;
}
.account-id-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.account-id-copy b { font-size: 15px; font-weight: 700; }
.account-id-copy small { color: #aaa; font-size: 13px; overflow: hidden; text-overflow: ellipsis; }
.account-redeem {
  display: flex;
  gap: 8px;
  padding: 0 16px 16px;
}
.account-redeem input {
  flex: 1;
  height: 40px;
  padding: 0 12px;
  border-radius: 10px;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
}
.account-redeem button {
  height: 40px;
  padding: 0 14px;
  border-radius: 10px;
  background: #fff;
  color: #111;
  font-weight: 700;
}
.account-refer {
  padding: 18px 16px 14px;
  border-radius: 16px;
  border: 1px solid #f9718744;
  background: linear-gradient(180deg, #2a1020 0%, var(--surface) 52%, var(--bg) 100%);
}
.account-refer-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.account-refer-kicker { margin: 0; color: var(--pink); font-size: 14px; font-weight: 700; }
.account-refer h2 { margin: 4px 0 0; font-size: 20px; font-weight: 700; }
.account-invite {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 38px;
  padding: 0 14px;
  border-radius: 999px;
  background: #fff;
  color: #111;
  font-weight: 700;
  flex: none;
}
.account-invite svg { width: 16px; height: 16px; }
.account-refer-copy { margin: 14px 0 0; color: var(--muted); font-size: 14px; line-height: 1.45; }
.account-refer-copy b { color: var(--text); }
.inline-coin { width: 14px; height: 14px; margin: 0 3px; vertical-align: -2px; color: var(--pink); }
.refer-bars { display: grid; grid-template-columns: repeat(10, 1fr); gap: 6px; margin-top: 16px; }
.refer-bars i { height: 4px; border-radius: 99px; background: #ffffff22; }
.refer-bars i.on { background: var(--pink); }
.refer-meta { display: flex; justify-content: space-between; gap: 12px; margin-top: 8px; color: #c8c8ce; font-size: 13px; }
.account-code-link { margin-top: 14px; padding: 0; color: var(--pink); font-size: 14px; font-weight: 600; }
.account-card {
  overflow: hidden;
  border-radius: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
}
.account-coins {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 16px;
}
.coin-mark { width: 20px; height: 20px; flex: none; }
.account-coins b {
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  line-height: 14px;
}
.account-coins span {
  color: #aaa;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
}
.account-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 16px;
  color: #fff;
  text-align: left;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
}
.account-coins + .account-row,
.account-row + .account-row { border-top: 1px solid #ffffff1a; }
.account-row:hover { background: var(--surface-3); }
.account-label { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; }
.account-ico { width: 18px; height: 18px; flex: none; color: var(--pink); }
.account-copy { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.account-copy b { font-size: 14px; font-weight: 500; line-height: 20px; }
.account-copy small { color: #aaa; font-size: 12px; font-weight: 400; line-height: 16px; }
.account-chev { width: 20px; height: 20px; flex: none; color: #aaa; }
.account-signout {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 16px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 14px;
  font-weight: 500;
  text-align: left;
}
.account-signout:hover { background: var(--surface-3); }
.account-bill-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
}
.account-bill {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
}
.account-bill + .account-bill { border-top: 1px solid #ffffff1a; }
.account-bill b { display: block; font-size: 14px; font-weight: 500; }
.account-bill small { color: #aaa; font-size: 12px; }
.account-bill em { font-style: normal; font-weight: 600; white-space: nowrap; }
.account-bill-empty { padding: 14px 16px 16px; color: #aaa; font-size: 13px; }

.msg .md-table td:first-child,
.msg .md-table th:first-child { white-space: nowrap; padding-right: 14px; }
.msg .md-table td:last-child,
.msg .md-table th:last-child { white-space: nowrap; }

.gen-panel.od-card { flex-basis: 420px; gap: 14px; }
.od-card .gen-subtabs { justify-content: center; gap: 28px; border-bottom: 1px solid var(--border); padding-bottom: 0; }
.od-card .gen-subtabs button { padding: 4px 2px 10px; }
.od-card .gen-subtabs button.on { color: var(--text); box-shadow: inset 0 -2px 0 #fff; }
.od-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.od-tile {
  position: relative;
  aspect-ratio: 3 / 3.6;
  border-radius: 16px;
  overflow: hidden;
  background: #2a2428 center / cover no-repeat;
  color: #fff;
  text-align: left;
}
.od-tile.req { box-shadow: inset 0 0 0 1.5px #f97187; }
.od-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.od-tile::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 48%;
  background: linear-gradient(transparent, rgba(0, 0, 0, .72));
  pointer-events: none;
}
.od-tile b, .od-tile span {
  position: absolute;
  left: 10px; right: 10px;
  z-index: 1;
  text-align: left;
}
.od-tile b { bottom: 26px; font-size: 15px; font-weight: 700; }
.od-tile span { bottom: 8px; font-size: 12px; color: #c9c2c6; }
.od-tile.req span { color: #f97187; }
.od-actions { display: flex; align-items: center; gap: 8px; }
.od-qty, .od-gear {
  width: 44px; height: 44px;
  border-radius: 14px;
  background: #2a2428;
  color: #fff;
  font-weight: 700;
  font-size: 16px;
}
.od-actions .primary { flex: 1; height: 44px; border-radius: 999px; }
.od-settings { display: flex; flex-direction: column; gap: 8px; }
.od-filters { display: flex; gap: 8px; margin: 10px 0 14px; }
.od-filters button {
  border-radius: 999px;
  padding: 6px 14px;
  background: #2a2428;
  color: #fff;
  font-size: 13px;
}
.od-filters button.on { background: #fff; color: #161316; }
.od-masonry { columns: 3; column-gap: 10px; }
.show-card {
  position: relative;
  display: block;
  width: 100%;
  margin: 0 0 10px;
  border-radius: 12px;
  overflow: hidden;
  break-inside: avoid;
  background: #221c20;
}
.show-card video { width: 100%; display: block; aspect-ratio: 916 / 1145; object-fit: cover; background: #221c20; }
.show-card span {
  position: absolute;
  left: 8px; right: 8px; bottom: 8px;
  color: #fff;
  font-weight: 800;
  font-size: 14px;
  letter-spacing: .02em;
  text-transform: uppercase;
  text-align: left;
  text-shadow: 0 1px 6px rgba(0,0,0,.6);
}
.sheet-mask {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(0, 0, 0, .62);
}
.sheet-card {
  position: relative;
  width: min(980px, 100%);
  height: min(86vh, 840px);
  display: flex;
  flex-direction: column;
  padding: 18px 16px 12px;
  border-radius: 18px;
  background: #161316;
  border: 1px solid #ffffff14;
}
.sheet-x { position: absolute; top: 10px; right: 14px; color: #fff; font-size: 26px; line-height: 1; }
.sheet-tabs { display: flex; gap: 22px; padding-right: 36px; }
.sheet-tabs button { color: #9a9296; font-weight: 700; padding: 4px 0 10px; }
.sheet-tabs button.on { color: #fff; box-shadow: inset 0 -2px 0 #fff; }
.sheet-chips { display: flex; gap: 8px; overflow-x: auto; padding: 12px 0; }
.sheet-chips button {
  flex: 0 0 auto;
  border-radius: 999px;
  padding: 6px 12px;
  background: #2a2428;
  color: #eee;
  font-size: 13px;
}
.sheet-chips button.on { background: #fff; color: #161316; }
.sheet-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  grid-auto-rows: auto;
  align-items: start;
  gap: 10px;
  overflow: auto;
  padding-bottom: 8px;
}
.preset-card {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  border-radius: 12px;
  overflow: hidden;
  background: #221c20;
}
.preset-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.preset-card span {
  position: absolute;
  left: 8px; right: 8px; bottom: 8px;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  text-align: left;
  text-shadow: 0 1px 6px rgba(0,0,0,.7);
}
.preset-card.on { box-shadow: inset 0 0 0 2px #f97187; }
.sheet-empty { grid-column: 1 / -1; color: #aaa; padding: 12px; }
@media (max-width: 860px) {
  .od-masonry { columns: 2; }
  .sheet-mask { padding: 10px; }
}
@media (min-width: 700px) {
  .gen-wrap { flex-direction: row; }
  .gen-panel.od-card { position: sticky; flex: 0 0 380px; width: auto; }
}

.od-card .seg { background: #141114; border-radius: 999px; padding: 4px; }
.od-card .seg-item { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border-radius: 999px; color: #b7b0b4; }
.od-card .seg-item.active { background: #fff; color: #161316; }
.od-card .gen-subtabs { justify-content: flex-start; gap: 8px; border-bottom: 0; }
.od-card .gen-subtabs button {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border-radius: 999px;
  background: #2a2428; color: #d7d0d3;
  box-shadow: none;
}
.od-card .gen-subtabs button.on { background: #4a4548; color: #fff; box-shadow: none; }
.od-gem {
  width: 8px; height: 8px; border-radius: 2px;
  background: #f97187; transform: rotate(45deg); display: inline-block;
}
.od-kicker { margin: 2px 0 0; color: #c9c2c6; font-size: 13px; font-weight: 650; }
.od-ico {
  position: absolute; left: 50%; top: 42%;
  width: 64px; height: 64px; margin: -32px 0 0 -32px;
  border-radius: 50%; background: #3a3338; color: #eee;
  display: grid; place-items: center;
}
.od-ico svg { width: 26px; height: 26px; }
.od-tile.has-photo .od-ico { display: none; }
.od-tile b, .od-tile span { left: 8px; right: 8px; text-align: center; }
.od-tile.req span { color: #ddd; }
.od-actions { position: relative; }
.od-pill {
  flex: 1; height: 42px; border-radius: 999px;
  background: #2a2428; color: #fff;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font-weight: 650;
}
.od-pill i { font-style: normal; color: #aaa; }
.od-card > .primary.wide { width: 100%; height: 46px; border-radius: 999px; }
.qty-menu {
  position: absolute; left: 0; bottom: calc(100% + 8px); z-index: 5;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px;
  padding: 8px; border-radius: 14px; background: #2a2428;
  box-shadow: 0 10px 30px rgba(0,0,0,.4);
}
.qty-menu button { min-width: 42px; height: 34px; border-radius: 10px; color: #fff; background: #3a3338; }
.od-custom { display: flex; flex-direction: column; gap: 8px; }
.od-custom p { margin: 0; display: flex; align-items: center; gap: 8px; }
.od-custom em {
  font-style: normal; font-size: 11px; font-weight: 700;
  color: #fff; background: #f97187; border-radius: 999px; padding: 2px 8px;
}
.od-drop::after { content: "▾"; margin-left: 6px; color: #aaa; font-size: 11px; }
.set-card {
  width: min(560px, 100%);
  max-height: min(88vh, 820px);
  overflow: auto;
  background: #2a2428;
  border-radius: 22px;
  padding: 18px 16px 20px;
  position: relative;
}
.set-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.set-head h2 { margin: 0; font-size: 22px; }
.set-head .sheet-x { position: static; font-size: 28px; }
.set-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.set-row .seg { background: #1a1618; }
.set-jobs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 14px; }
.set-jobs button { height: 42px; border-radius: 999px; background: #3a3338; color: #ddd; font-weight: 650; }
.set-jobs button.on { background: #5a5558; color: #fff; }
.set-label { margin: 12px 0 8px; font-weight: 700; }
.set-models { display: flex; flex-direction: column; gap: 8px; }
.set-model {
  display: flex; gap: 12px; align-items: center;
  width: 100%; text-align: left; padding: 8px;
  border-radius: 16px; background: #322c30; color: #fff;
}
.set-model img { width: 74px; height: 74px; object-fit: cover; border-radius: 12px; flex: 0 0 auto; }
.set-model b { font-size: 16px; }
.set-model small { display: block; color: #b7b0b4; font-size: 13px; margin-top: 4px; }
.set-model.on { box-shadow: inset 0 0 0 2px #f97187; }
.tag { display: inline-block; margin-left: 6px; padding: 2px 8px; border-radius: 999px; font-style: normal; font-size: 12px; font-weight: 700; color: #fff; }
.tag-def { background: #3b82f6; }
.tag-prem { background: #f97187; }
.tag-exp { background: #16803c; }
.set-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.set-chips button { border-radius: 999px; padding: 8px 12px; background: #3a3338; color: #eee; }
.set-chips button.on { background: #fff; color: #161316; }
.set-card textarea {
  width: 100%; box-sizing: border-box; border-radius: 12px;
  border: 0; background: #1c181b; color: #fff; padding: 10px 12px; resize: vertical;
}

/* character creator */
.cc-steps { display: grid; grid-template-columns: repeat(6, 1fr); gap: 2px; margin-bottom: 8px; }
.cc-steps button {
  background: transparent; color: #8d868a; font-size: 11px; font-weight: 650;
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 4px 0;
}
.cc-steps svg { width: 22px; height: 22px; display: block; }
.cc-steps button.is-on { color: #f97187; }
.cc-steps button.is-off { opacity: 0.35; }
.cc-title { margin: 10px 0 14px; text-align: center; font-size: 28px; font-weight: 750; line-height: 1.2; }
.cc-title span { color: #f97187; }
.cc-h { margin: 16px 0 8px; text-align: center; font-size: 14px; font-weight: 700; color: #eee; }
.cc-gender { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 14px; }
.cc-gender button {
  height: 42px; border-radius: 999px; background: #2a2428; color: #ddd;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-weight: 700;
}
.cc-gender button.on { background: #fff; color: #161316; }
.cc-gender img { width: 16px; height: 16px; object-fit: contain; }
.cc-styles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cc-style {
  position: relative; padding: 0; border-radius: 16px; overflow: hidden;
  border: 3px solid transparent; background: #241e23; color: #fff;
}
.cc-style.on { border-color: #f97187; }
.cc-style img { width: 100%; aspect-ratio: 3/4; object-fit: cover; display: block; }
.cc-style b { display: block; text-align: center; padding: 8px 4px 10px; font-size: 16px; }
.cc-check {
  position: absolute; top: 8px; right: 8px; width: 22px; height: 22px; border-radius: 50%;
  background: #f97187; color: #fff; display: none; place-items: center; font-style: normal; font-size: 13px;
}
.cc-style.on .cc-check { display: grid; }
.cc-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.cc-card {
  padding: 0; border-radius: 14px; overflow: hidden; border: 2px solid transparent;
  background: #241e23; color: #fff;
}
.cc-card.on { border-color: #f97187; }
.cc-card img { width: 100%; aspect-ratio: 3/4; object-fit: cover; display: block; background: #1a1518; }
.cc-card span { display: block; padding: 6px 4px 8px; font-size: 12px; font-weight: 650; text-align: center; }
.cc-swatches { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.cc-swatch {
  width: 68px; background: transparent; color: #ccc; font-size: 11px; font-weight: 650;
  border: 2px solid transparent; border-radius: 12px; padding: 4px 0 6px;
}
.cc-swatch.on { border-color: #f97187; color: #fff; }
.cc-swatch i {
  display: block; width: 28px; height: 28px; border-radius: 50%; margin: 0 auto 4px;
  border: 1px solid #ffffff33;
}
.cc-ages { display: flex; justify-content: center; gap: 4px; overflow: auto; padding: 4px 0 8px; }
.cc-ages button { min-width: 34px; height: 40px; border-radius: 10px; background: transparent; color: #8a8488; font-weight: 700; }
.cc-ages button.on { color: #fff; font-size: 22px; }
.cc-field { display: block; margin: 8px 0 12px; color: #ddd; font-size: 13px; font-weight: 650; }
.cc-rows { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.cc-row {
  width: 100%; display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 14px; background: #241e23; color: #fff; text-align: left;
}
.cc-row img { width: 36px; height: 36px; object-fit: contain; border-radius: 8px; }
.cc-row b { flex: 1; font-size: 14px; }
.cc-row em { font-style: normal; color: #c8c2c6; font-size: 13px; }
.cc-action { padding-top: 16px; margin-bottom: 8px; }
.cc-action .primary { width: 100%; height: 48px; border-radius: 999px; }
.cc-preview { width: min(280px, 70%); margin: 8px auto 12px; border-radius: 16px; overflow: hidden; background: #241e23; min-height: 80px; }
.cc-preview img { width: 100%; aspect-ratio: 3/4; object-fit: cover; display: block; }
.cc-stage .portrait-picks { justify-content: center; }
.cc-stage .avatar-btns { display: flex; justify-content: center; gap: 8px; margin-bottom: 8px; }
.cc-sheet {
  position: fixed; inset: 0; z-index: 90; background: rgba(0,0,0,.55);
  display: flex; align-items: flex-end; justify-content: center;
}
.cc-sheet-card {
  width: min(560px, 100%); max-height: min(82vh, 760px); overflow: auto;
  background: #1c181b; border-radius: 18px 18px 0 0; padding: 12px 14px 22px;
}
.cc-sheet-head { display: grid; grid-template-columns: 72px 1fr 72px; align-items: center; margin-bottom: 10px; }
.cc-sheet-head b { text-align: center; font-size: 16px; }
.cc-cancel { background: transparent; color: #bbb; font-size: 14px; text-align: left; }
.cc-sheet-card > input, .cc-custom-box input, .cc-stage > input {
  width: 100%; box-sizing: border-box; margin: 8px 0; padding: 10px 12px;
  border-radius: 12px; border: 0; background: #2a2428; color: #fff;
}
.cc-custom-box { display: flex; gap: 8px; align-items: center; }
.cc-custom-box input { flex: 1; }
.cc-custom-box .primary { height: 40px; border-radius: 12px; padding: 0 14px; }
.cc-icons { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.cc-opt {
  background: transparent; color: #eee; border: 2px solid transparent; border-radius: 12px;
  padding: 6px 2px; font-size: 12px; font-weight: 650;
}
.cc-opt.on { border-color: #f97187; }
.cc-opt img, .cc-none-mark {
  width: 56px; height: 56px; object-fit: contain; display: block; margin: 0 auto 4px;
}
.cc-none-mark {
  display: grid; place-items: center; border-radius: 12px; background: #2a2428; color: #aaa; font-size: 22px;
}
.cc-voice-meta, .cc-voice-h { margin: 8px 0; color: #bbb; font-size: 13px; }
.cc-tiers { display: flex; gap: 8px; margin-bottom: 8px; }
.cc-tiers button { border-radius: 999px; padding: 6px 12px; background: #2a2428; color: #ddd; }
.cc-tiers button.on { background: #fff; color: #161316; }
.cc-voices { display: flex; flex-direction: column; gap: 4px; }
.cc-voice {
  text-align: left; padding: 10px 12px; border-radius: 12px; background: #241e23; color: #fff; font-weight: 650;
}
.cc-voice.on { box-shadow: inset 0 0 0 2px #f97187; }


/* Spoken words vs physical action in chat bubbles.
   Line separation alone was not enough: on the warm orange bubble a slightly
   dimmer italic still reads as one paragraph. Give the action its own inset
   block — different size, different ground, clearly a stage direction. */
.msg .msg-text .said { margin: 0 0 6px; font-size: 1em; line-height: 1.55; }
.msg .msg-text .said:last-child { margin-bottom: 0; }
.msg .msg-text .acted {
  margin: 0 0 8px;
  padding: 5px 10px;
  border-radius: 9px;
  background: #0000002e;
  border-left: 2px solid #ffffff4d;
  font-style: italic;
  font-size: 0.9em;
  line-height: 1.45;
  color: #ffffffa6;
}
.msg .msg-text .acted:first-child { margin-top: 1px; }
.msg .msg-text .acted + .said { margin-top: 2px; }
.msg .msg-text > p:last-child { margin-bottom: 0; }

/* user bubbles are brand pink with dark text, so the action tint flips */
.msg.user .msg-text .acted {
  background: #2d1a1f1f;
  border-left-color: #2d1a1f4d;
  color: #2d1a1fb3;
}

/* ==========================================================================
   Chat view — rebuilt against WhatsApp / Telegram / iMessage conventions.
   Problems being fixed:
     · orange bubbles on bare skin made the text unreadable
     · no avatars, so speaker identity relied on colour alone
     · one timestamp at the top instead of per-message
     · the composer ate a fifth of the screen for an empty box
   ========================================================================== */

/* 1. Readability: a real scrim over the photograph, heavier at the edges. */
#view-chat .log {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px 14px 8px;
  scrollbar-gutter: stable;
}
#view-chat::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(to bottom, #0b0b0de6 0%, #0b0b0d80 18%, #0b0b0d59 45%, #0b0b0dd9 82%, #0b0b0df2 100%);
}
/* On phones keep a hint of the photo; on desktop the text column wins. */
@media (min-width: 820px) {
  #view-chat::before {
    background:
      linear-gradient(to right, #0b0b0df2 0%, #0b0b0de6 46%, #0b0b0d8c 68%, #0b0b0d4d 100%);
  }
}

/* 2. Bubbles: calm grounds, clear tail, room for a timestamp. */
#view-chat .msg {
  position: relative;
  max-width: min(78%, 460px);
  padding: 9px 12px 20px;
  border-radius: 16px;
  font-size: 15px;
  line-height: 1.5;
  box-shadow: 0 1px 2px #00000040;
  animation: msg-in 0.16s ease-out;
}
@keyframes msg-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}

#view-chat .msg.assistant {
  align-self: flex-start;
  margin-left: 30px;             /* leaves room for the avatar rail */
  background: #26262bf2;
  color: #f2f2f3;
  border-bottom-left-radius: 5px;
}
#view-chat .msg.user {
  align-self: flex-end;
  background: #f97187;
  color: #2d1a1f;
  border-bottom-right-radius: 5px;
}

/* avatar rail: first bubble of a run gets a face, the rest keep the gutter */
#view-chat .msg.assistant::before {
  content: "";
  position: absolute;
  left: -30px;
  top: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #2b2b31 center/cover no-repeat;
  background-image: var(--chat-avatar, none);
  border: 1px solid #ffffff1a;
}
#view-chat .msg.assistant.cont::before { display: none; }

/* timestamp inside the bubble, the way every chat app does it */
#view-chat .msg::after {
  content: attr(data-time);
  position: absolute;
  right: 10px;
  bottom: 5px;
  font-size: 10.5px;
  line-height: 1;
  letter-spacing: 0.01em;
  opacity: 0.55;
}
#view-chat .msg.user::after { color: #2d1a1f; }

/* text inside the bubble */
#view-chat .msg .msg-text { font-size: 15px; }
#view-chat .msg .msg-text .said { margin: 0 0 5px; }
#view-chat .msg .msg-text .acted {
  margin: 0 0 6px;
  padding: 0 0 0 9px;
  background: none;
  border-radius: 0;
  border-left: 2px solid #ffffff42;
  font-size: 0.93em;
  color: #ffffffa8;
}
#view-chat .msg.user .msg-text .acted {
  border-left-color: #2d1a1f4d;
  color: #2d1a1fb0;
}

/* the copy button only appears on hover — it was noise in a chat log */
#view-chat .msg .copy-btn { opacity: 0; transition: opacity 0.15s ease; }
#view-chat .msg:hover .copy-btn { opacity: 0.6; }

/* 3. Day separator, like the little "Today" pill. */
#view-chat .day-pill {
  align-self: center;
  margin: 6px 0 10px;
  padding: 3px 12px;
  border-radius: 999px;
  background: #ffffff14;
  backdrop-filter: blur(8px);
  font-size: 11.5px;
  color: #ffffffa8;
}

/* 4. Composer: a single pill, send button inside it. */
#view-chat .composer {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  gap: 8px;
  width: min(860px, calc(100% - 16px));
  margin: 0 auto calc(8px + env(safe-area-inset-bottom));
  padding: 6px 6px 6px 8px;
  border-radius: 24px;
  background: #1b1b1ff2;
  border: 1px solid #ffffff1f;
  box-shadow: 0 8px 24px #00000059;
  backdrop-filter: blur(14px);
}
#view-chat .composer textarea {
  flex: 1;
  min-height: 34px;
  max-height: 120px;
  padding: 8px 4px;
  border: 0;
  background: none;
  color: #f2f2f3;
  font-size: 16px;           /* keeps iOS from zooming on focus */
  line-height: 1.4;
  resize: none;
}
#view-chat .composer textarea::placeholder { color: #ffffff6b; }
#view-chat .composer .ask {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 0 0 auto;
}
#view-chat .composer .ask-pill,
#view-chat .composer .ask-photo {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #ffffff8c;
  background: none;
}
#view-chat .composer .ask-pill:hover,
#view-chat .composer .ask-photo:hover { background: #ffffff14; color: #fff; }
#view-chat .composer .ask-pill svg,
#view-chat .composer .ask-photo svg { width: 19px; height: 19px; }
#view-chat .composer .ask-go {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #f97187;
  color: #2d1a1f;
  transition: transform 0.12s ease, background 0.12s ease;
}
#view-chat .composer .ask-go:active { transform: scale(0.92); }
#view-chat .composer .ask-go:disabled { background: #ffffff26; color: #ffffff59; }
#view-chat .composer .ask-go svg { width: 19px; height: 19px; }

/* 5. Header: tighter, with a live dot under the name. */
#view-chat .chat-head {
  z-index: 3;
  padding: 8px 12px;
  background: #0b0b0de6;
  border-bottom: 1px solid #ffffff12;
  backdrop-filter: blur(16px);
}
#view-chat .chat-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid #ffffff1f;
}
#view-chat .chat-who b { font-size: 15px; font-weight: 600; }
#view-chat .chat-who span { font-size: 11.5px; color: #ffffff80; }

/* The suggestion chip floats ABOVE the composer. It used to sit inside the
   composer flex column, so it overlapped the input row. */
#view-chat .starter {
  position: fixed;
  left: 50%;
  bottom: calc(76px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  width: min(860px, calc(100% - 32px));
  max-width: none;
  margin: 0;
  padding: 10px 14px;
  border-radius: 16px;
  border: 1px solid #f97187b8;
  background: #241419f2;
  backdrop-filter: blur(12px);
  color: #f7e9ec;
  font-size: 13.5px;
  line-height: 1.45;
  text-align: left;
  box-shadow: 0 8px 24px #00000059;
  z-index: 4;
}

/* Stronger scrim: the earlier gradient still let bright skin sit behind the
   right-hand (user) bubbles, which made them hard to read. */
@media (min-width: 820px) {
  #view-chat::before {
    background:
      linear-gradient(to right, #0b0b0df5 0%, #0b0b0df0 40%, #0b0b0dbf 62%, #0b0b0d8f 100%);
  }
}
@media (max-width: 819px) {
  #view-chat::before {
    background:
      linear-gradient(to bottom, #0b0b0df0 0%, #0b0b0db3 20%, #0b0b0d8c 45%, #0b0b0de6 78%, #0b0b0df7 100%);
  }
}

/* --------------------------------------------------------------------------
   Composer, final layout: [attach] [ field ] [send]
   The old bar stacked a chat-bubble icon and a chevron in one button, which
   rendered as a mystery square, and put three controls on the right edge.
   -------------------------------------------------------------------------- */
#view-chat .composer {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  gap: 8px;
  width: min(860px, calc(100% - 16px));
  margin: 0 auto calc(8px + env(safe-area-inset-bottom));
  padding: 6px;
  border-radius: 24px;
  background: #1b1b1ff2;
  border: 1px solid #ffffff1f;
  box-shadow: 0 10px 28px #00000073;
  backdrop-filter: blur(16px);
}

/* attach: round, left, quiet until hovered */
#view-chat .composer-attach {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  margin-bottom: 1px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #ffffff8c;
  background: #ffffff0f;
  transition: background 0.14s ease, color 0.14s ease;
}
#view-chat .composer-attach:hover { background: #ffffff1f; color: #fff; }
#view-chat .composer-attach svg { width: 20px; height: 20px; }

/* field: the input reads as a field, not floating text */
#view-chat .composer-field {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  padding: 4px 6px;
  border-radius: 18px;
  background: #ffffff0d;
}
#view-chat .composer-field textarea {
  width: 100%;
  min-height: 30px;
  max-height: 120px;
  padding: 5px 4px;
  border: 0;
  background: none;
  color: #f2f2f3;
  font-size: 16px;
  line-height: 1.45;
  resize: none;
}
#view-chat .composer-field textarea::placeholder { color: #ffffff5c; }
#view-chat .composer-field textarea:focus { outline: none; }

/* send: solid circle, arrow up when there is text, mic when empty */
#view-chat .composer-send {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  margin-bottom: 1px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #f97187;
  color: #2d1a1f;
  transition: transform 0.12s ease, background 0.14s ease;
}
#view-chat .composer-send svg { width: 20px; height: 20px; }
#view-chat .composer-send .ask-ico-send { display: none; }
#view-chat .composer-send.has-text .ask-ico-mic { display: none; }
#view-chat .composer-send.has-text .ask-ico-send { display: block; }
#view-chat .composer-send:disabled { background: #ffffff1f; color: #ffffff40; }
#view-chat .composer-send:not(:disabled):active { transform: scale(0.92); }
#view-chat .composer-send.recording { background: #ff356e; animation: rec-pulse 1s infinite; }
@keyframes rec-pulse { 50% { opacity: 0.55; } }

/* ==========================================================================
   Loading states for the slow operations: image generation takes 20-60s and
   creating a character uploads an avatar. A disabled button is not enough
   feedback for a wait that long.
   ========================================================================== */

/* --- shimmer skeletons, used while images are being made --- */
.gen-skel,
.skel-ph {
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  background: #ffffff0a;
  border: 1px solid #ffffff12;
}
.gen-skel::after,
.skel-ph::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 20%, #ffffff1f 50%, transparent 80%);
  animation: skel-sweep 1.5s ease-in-out infinite;
}
@keyframes skel-sweep {
  from { transform: translateX(-100%); }
  to   { transform: translateX(100%); }
}
.gen-skel {
  aspect-ratio: 4 / 5;
  display: grid;
  place-items: center;
}
.gen-skel span {
  position: relative;
  z-index: 1;
  font-size: 12px;
  color: #ffffff5c;
  letter-spacing: 0.04em;
}

/* --- the progress line under the generate button --- */
.gen-progress {
  height: 3px;
  margin: 10px 0 0;
  border-radius: 999px;
  background: #ffffff14;
  overflow: hidden;
}
.gen-progress i {
  display: block;
  height: 100%;
  width: 40%;
  border-radius: 999px;
  background: linear-gradient(90deg, #f97187, #ff356e);
  animation: gen-slide 1.3s ease-in-out infinite;
}
@keyframes gen-slide {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(320%); }
}

/* --- the status line: elapsed time + rotating stage label --- */
.gen-status {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0 0;
  font-size: 12.5px;
  color: #ffffff8c;
}
.gen-status b { font-weight: 600; color: #f97187; font-variant-numeric: tabular-nums; }
.gen-dots { display: inline-flex; gap: 3px; }
.gen-dots i {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
  animation: blink 1.2s infinite;
}
.gen-dots i:nth-child(2) { animation-delay: 0.16s; }
.gen-dots i:nth-child(3) { animation-delay: 0.32s; }

/* --- full-screen blocker for "creating character" --- */
.busy-veil {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  background: #000000a6;
  backdrop-filter: blur(6px);
  animation: veil-in 0.18s ease-out;
}
@keyframes veil-in { from { opacity: 0; } to { opacity: 1; } }
.busy-card {
  display: grid;
  justify-items: center;
  gap: 14px;
  padding: 28px 34px;
  border-radius: 22px;
  background: #17171bf5;
  border: 1px solid #ffffff1f;
  box-shadow: 0 24px 60px #00000080;
}
.busy-ring {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 3px solid #ffffff1f;
  border-top-color: #f97187;
  animation: busy-spin 0.85s linear infinite;
}
@keyframes busy-spin { to { transform: rotate(360deg); } }
.busy-card b { font-size: 14.5px; font-weight: 600; color: #f2f2f3; }
.busy-card span { font-size: 12.5px; color: #ffffff7a; }

/* Coin balance in the chat header. Subscribers get a softer "Unlimited" pill;
   everyone else sees the running balance, which turns red when it runs out. */
#view-chat .chat-wallet {
  margin-left: auto;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 30px;
  padding: 0 11px;
  border-radius: 999px;
  background: #ffffff12;
  border: 1px solid #ffffff1f;
  color: #f2f2f3;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
#view-chat .chat-wallet svg { width: 15px; height: 15px; color: #fcbb00; }
#view-chat .chat-wallet b { font-weight: 600; }
#view-chat .chat-wallet.unlimited {
  background: #f971871f;
  border-color: #f9718759;
  color: #f97187;
}
#view-chat .chat-wallet.unlimited svg { color: #f97187; }
#view-chat .chat-wallet.low { color: #ff7a7a; border-color: #ff7a7a59; }

/* --------------------------------------------------------------------------
   Home search field, mobile fit.
   Two problems on phones:
     1. .browse-search input was 14px. iOS Safari zooms the whole page when a
        field under 16px gets focus, and it does not zoom back out.
     2. The placeholder is long ("Try 'Busty blonde' or 'Petite asian'") and
        pushed the clear button out of the pill on narrow screens.
   -------------------------------------------------------------------------- */

/* 16px is the threshold, not a taste choice: below it iOS zooms on focus. */
.browse-search input { font-size: 16px; }
.browse-search input::placeholder { overflow: hidden; text-overflow: ellipsis; }

@media (max-width: 560px) {
  .browse-search-row { gap: 6px; }
  .browse-search {
    height: 46px;
    padding: 0 12px;
    gap: 7px;
  }
  .browse-search .search-icon { width: 17px; height: 17px; }
  .browse-search input {
    font-size: 16px;          /* keeps iOS from zooming */
    min-width: 0;
    text-overflow: ellipsis;
  }
  .search-clear {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #ffffff1a;
    font-size: 11px;
  }
}

@media (max-width: 380px) {
  .browse-search { height: 44px; padding: 0 10px; }
  .browse-search input { font-size: 16px; }
}

/* Desktop can keep the tighter type; the zoom only affects touch browsers. */
@media (hover: hover) and (pointer: fine) {
  .browse-search input { font-size: 14.5px; }
}

/* ==========================================================================
   Profile page — rebuilt as four bands: identity, stats, settings, referral.
   The old layout was a narrow column of rows with ~600px of dead space below.
   ========================================================================== */

#view-profile { padding: 20px 16px 48px; }
#view-profile .account {
  width: min(720px, 100%);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* 1. identity: a soft gradient plate instead of a bare avatar line */
#view-profile .account-id {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 22px 20px;
  border-radius: 22px;
  background:
    radial-gradient(120% 140% at 0% 0%, #f971872e 0%, transparent 55%),
    radial-gradient(120% 140% at 100% 0%, #7c5cff26 0%, transparent 55%),
    #17171b;
  border: 1px solid #ffffff14;
  overflow: hidden;
}
#view-profile .account-id::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, #0b0b0d80 100%);
  pointer-events: none;
}
#view-profile .account-avatar {
  position: relative;
  z-index: 1;
  width: 64px;
  height: 64px;
  flex: 0 0 auto;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 24px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, #f97187, #e65073);
  box-shadow: 0 6px 20px #f9718759;
  border: 2px solid #ffffff26;
}
#view-profile .account-id-copy {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 4px;
  min-width: 0;
}
#view-profile .account-id-copy b {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#view-profile .account-id-copy small {
  font-size: 13px;
  color: #ffffff8c;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 2. stats: three tiles, the coin one opens the plans page */
#view-profile .profile-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
#view-profile .profile-stat {
  display: grid;
  gap: 3px;
  padding: 16px 16px 15px;
  border-radius: 18px;
  background: #17171b;
  border: 1px solid #ffffff14;
  text-align: left;
  transition: border-color 0.15s ease, background 0.15s ease;
}
#view-profile .profile-stat:hover { border-color: #ffffff2e; background: #1c1c21; }
#view-profile .profile-stat em {
  font-style: normal;
  font-size: 11.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #ffffff6b;
}
#view-profile .profile-stat b {
  font-size: 24px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: #f2f2f3;
}
#view-profile .profile-stat.is-coins b { color: #fcbb00; }
#view-profile .profile-stat.is-coins { cursor: pointer; }

/* 3. settings group: one card, rows separated by hairlines */
#view-profile .account-card {
  border-radius: 20px;
  background: #17171b;
  border: 1px solid #ffffff14;
  overflow: hidden;
}
#view-profile .account-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 15px 18px;
  text-align: left;
  border-bottom: 1px solid #ffffff0f;
  transition: background 0.14s ease;
}
#view-profile .account-row:last-child { border-bottom: 0; }
#view-profile .account-row:hover { background: #ffffff0a; }
#view-profile .account-label { display: flex; align-items: center; gap: 12px; min-width: 0; }
#view-profile .account-ico { width: 20px; height: 20px; color: #f97187; flex: 0 0 auto; }
#view-profile .account-copy { display: grid; gap: 2px; min-width: 0; }
#view-profile .account-copy b { font-size: 14.5px; font-weight: 600; }
#view-profile .account-copy small { font-size: 12.5px; color: #ffffff80; }
#view-profile .account-chev { width: 18px; height: 18px; color: #ffffff4d; flex: 0 0 auto; }

/* 4. referral keeps its gradient but gains breathing room */
#view-profile .account-refer {
  border-radius: 20px;
  padding: 18px;
  background:
    radial-gradient(120% 160% at 100% 0%, #f9718726 0%, transparent 60%),
    #1a1216;
  border: 1px solid #f9718733;
}
#view-profile .refer-bars { margin: 12px 0 8px; }
#view-profile .account-code-link { margin-top: 10px; }

/* mobile: stats stack to one row of three but smaller */
@media (max-width: 560px) {
  #view-profile { padding: 14px 12px 40px; }
  #view-profile .account-avatar { width: 56px; height: 56px; font-size: 21px; }
  #view-profile .account-id-copy b { font-size: 18px; }
  #view-profile .profile-stat { padding: 13px 12px; border-radius: 16px; }
  #view-profile .profile-stat b { font-size: 20px; }
  #view-profile .profile-stat em { font-size: 10.5px; }
}

/* Steps + progress bar inside the creating overlay. */
.busy-card .busy-steps {
  display: grid;
  gap: 7px;
  width: 100%;
  margin-top: 4px;
}
.busy-step {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: #ffffff59;
  transition: color 0.2s ease;
}
.busy-step i {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  border-radius: 50%;
  border: 1.6px solid #ffffff2e;
  position: relative;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.busy-step.now { color: #f2f2f3; }
.busy-step.now i {
  border-color: #f97187;
  animation: busy-step-pulse 1.1s ease-in-out infinite;
}
@keyframes busy-step-pulse {
  50% { box-shadow: 0 0 0 4px #f9718733; }
}
.busy-step.done { color: #ffffffa6; }
.busy-step.done i {
  border-color: #f97187;
  background: #f97187;
}
.busy-step.done i::after {
  content: "";
  position: absolute;
  left: 3.6px;
  top: 1.2px;
  width: 4px;
  height: 7px;
  border: solid #17171b;
  border-width: 0 1.8px 1.8px 0;
  transform: rotate(42deg);
}

.busy-card .busy-bar {
  width: 100%;
  height: 3px;
  margin-top: 6px;
  border-radius: 999px;
  background: #ffffff14;
  overflow: hidden;
}
.busy-card .busy-bar i {
  display: block;
  height: 100%;
  width: 45%;
  border-radius: 999px;
  background: linear-gradient(90deg, #f97187, #ff356e);
  animation: gen-slide 1.3s ease-in-out infinite;
}

/* Backdrop behind the notifications panel. Without it the panel read as a
   floating page with no obvious way out. */
.notice-scrim {
  position: fixed;
  inset: 0;
  z-index: 94;            /* just under .notice (95) */
  background: #00000073;
  backdrop-filter: blur(2px);
  animation: veil-in 0.16s ease-out;
}

/* ==========================================================================
   My AI — modelled on ourdream.ai/custom. Search row, centred tabs, and an
   empty state built around one tall "create" tile.
   ========================================================================== */

#view-myai { padding: 18px 20px 40px; }
#view-myai .myai {
  width: min(900px, 100%);
  margin: 0 auto;
}

/* search row */
#view-myai .myai-top {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}
#view-myai .myai-search {
  height: 44px;
  padding: 0 16px;
  gap: 10px;
  background: #1c1c1e;
  border-radius: 999px;
}
#view-myai .myai-search .search-icon { width: 18px; height: 18px; color: #8e8e93; }
#view-myai .myai-search input {
  font-size: 15px;
  color: #f2f2f3;
}
#view-myai .myai-search input::placeholder { color: #8e8e93; }

#view-myai .myai-filter {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #1c1c1e;
  border: 1px solid #ffffff14;
  color: #e5e5ea;
  transition: background 0.15s ease;
}
#view-myai .myai-filter:hover { background: #2c2c2e; }
#view-myai .myai-filter svg { width: 19px; height: 19px; }

/* centred tabs */

/* empty state */
#view-myai .myai-empty {
  display: grid;
  justify-items: center;
  gap: 22px;
  padding: 20px 0 40px;
}
#view-myai .myai-empty > p {
  margin: 0;
  font-size: 17px;
  color: #a1a1aa;
}

/* the create tile: a tall card with a fanned collage and a white pill */
#view-myai .my-create-tile {
  position: relative;
  display: block;
  width: 280px;
  height: 392px;
  padding: 0;
  border-radius: 22px;
  background: #141416;
  border: 1px solid #ffffff12;
  overflow: hidden;
  text-align: left;
  transition: border-color 0.18s ease, transform 0.18s ease;
}
#view-myai .my-create-tile:hover {
  border-color: #ffffff2e;
  transform: translateY(-2px);
}

#view-myai .my-collage {
  position: absolute;
  inset: 0 0 84px;
  display: block;
  /* clip the collage so a rotated card cannot spill into the footer */
  overflow: hidden;
  border-radius: 22px 22px 0 0;
}
#view-myai .my-collage img {
  position: absolute;
  display: block;
  object-fit: cover;
  border-radius: 12px;
  box-shadow: 0 8px 26px #000000a6;
}
/* back card, slightly rotated */
#view-myai .my-collage .c1 {
  left: 50%;
  top: 26px;
  width: 152px;
  height: 176px;
  transform: translateX(-50%) rotate(-4deg);
}
/* front left */
#view-myai .my-collage .c2 {
  left: 12px;
  top: 168px;
  width: 140px;
  height: 168px;
  transform: rotate(-7deg);
}
/* front right */
#view-myai .my-collage .c3 {
  right: 12px;
  top: 186px;
  width: 132px;
  height: 158px;
  transform: rotate(6deg);
}

#view-myai .my-create-foot {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 84px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 18px;
}
#view-myai .my-create-foot b {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.15;
  color: #ffffff;
  max-width: 96px;
}
#view-myai .my-create-btn {
  flex: 0 0 auto;
  padding: 9px 20px;
  border-radius: 999px;
  background: #ffffff;
  color: #111113;
  font-size: 14px;
  font-weight: 600;
}

#view-myai .myai-soon {
  padding: 60px 0;
  text-align: center;
  color: #8e8e93;
  font-size: 15px;
}

@media (max-width: 560px) {
  #view-myai { padding: 12px 14px 32px; }
  #view-myai .my-create-tile { width: 260px; height: 368px; }
  #view-myai .myai-empty > p { font-size: 16px; }
}


/* ---------------- voice note bubble ---------------- */

.voice-msg {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 190px;
  padding: 4px 2px;
}
.voice-play {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #f97187;
  color: #fff;
  transition: transform 0.12s ease, background 0.15s ease;
}
.voice-play:active { transform: scale(0.94); }
.voice-play svg { width: 18px; height: 18px; }
.voice-play .ico-pause { display: none; }
.voice-msg.playing .voice-play .ico-play { display: none; }
.voice-msg.playing .voice-play .ico-pause { display: block; }

/* waveform: a progress gradient sweeps across the bars while playing */
.voice-wave {
  --progress: 0%;
  flex: 1;
  display: flex;
  align-items: center;
  gap: 2px;
  height: 22px;
  position: relative;
  overflow: hidden;
}
.voice-wave i {
  flex: 1;
  min-width: 2px;
  border-radius: 2px;
  background: #ffffff3d;
  transition: background 0.2s ease;
}
.voice-msg.playing .voice-wave i {
  background: linear-gradient(90deg, #f97187 var(--progress), #ffffff3d var(--progress));
  background-size: 100vw 100%;
  background-attachment: fixed;
}
.voice-dur {
  flex: 0 0 auto;
  font-size: 12px;
  color: #ffffff8c;
  font-variant-numeric: tabular-nums;
}
.voice-msg.broken .voice-play { background: #ffffff14; color: #ffffff59; }

.voice-text-toggle {
  margin-top: 8px;
  font-size: 12.5px;
  color: #f97187;
  background: none;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.voice-text {
  margin-top: 7px;
  padding-top: 8px;
  border-top: 1px solid #ffffff14;
  font-size: 14px;
  line-height: 1.55;
  color: #ffffffcc;
}

/* the mic button while recording */
.composer-send.recording {
  background: #ff356e;
  animation: mic-rec 1s ease-in-out infinite;
}
@keyframes mic-rec {
  50% { box-shadow: 0 0 0 6px #ff356e2e; }
}

/* The transcript toggle sits inside a pink user bubble, so the brand pink is
   invisible there — flip it to white and lighten the divider. */
.msg.user .voice-text-toggle {
  color: #ffffff;
  opacity: 0.9;
}
.msg.user .voice-text {
  color: #ffffff;
  border-top-color: #ffffff4d;
}
.msg.user .voice-msg .voice-play {
  background: #ffffff;
  color: #e65073;
}
.msg.user .voice-wave i { background: #ffffff66; }
.msg.user .voice-dur { color: #ffffffcc; }

/* ==========================================================================
   Hold-to-talk recorder. WeChat's model: press and hold, the screen dims, a
   bubble shows the waveform, release to send, slide to the two side buttons to
   cancel or convert to text.
   ========================================================================== */

.rec {
  position: fixed;
  inset: 0;
  z-index: 210;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 0 0 34px;
  background: #000000d9;
  backdrop-filter: blur(14px) saturate(0.7);
  animation: veil-in 0.14s ease-out;
  touch-action: none;
}

.rec-stage {
  flex: 1;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 16px;
  padding: 24px;
}

.rec-bubble {
  min-width: 200px;
  min-height: 74px;
  padding: 20px 26px;
  border-radius: 22px;
  display: grid;
  place-items: center;
  background: #9ef01a;
  box-shadow: 0 16px 44px #000000a6;
  transition: transform 0.12s ease, opacity 0.12s ease;
}
.rec-bubble::after {
  content: "";
  position: absolute;
  margin-top: 96px;
  width: 0;
  height: 0;
  border: 9px solid transparent;
  border-top-color: #9ef01a;
}
.rec.is-cancel .rec-bubble {
  background: #ff4d4f;
  transform: scale(0.94);
  opacity: 0.9;
}
.rec.is-cancel .rec-bubble::after { border-top-color: #ff4d4f; }

/* the live waveform inside the bubble */
.rec-wave {
  display: flex;
  align-items: center;
  gap: 3px;
  height: 34px;
}
.rec-wave i {
  width: 3px;
  border-radius: 2px;
  background: #1b2b06;
  transition: height 0.08s linear;
}

.rec-hint {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  color: #ffffff;
  letter-spacing: 0.02em;
  text-shadow: 0 2px 10px #000000cc;
}

.rec-actions {
  display: flex;
  gap: 14px;
  padding: 0 18px;
}
.rec-act {
  flex: 1;
  height: 74px;
  border-radius: 999px;
  font-size: 15.5px;
  font-weight: 500;
  background: #ffffff2e;
  color: #ffffff;
  border: 1px solid #ffffff3d;
  transition: background 0.14s ease, transform 0.1s ease;
}
.rec-act.on {
  background: #ffffff4a;
  transform: scale(1.03);
}
.rec-text.on { background: #f97187; border-color: #f97187; color: #fff; }
.rec-cancel.on { background: #ff4d4f; border-color: #ff4d4f; color: #fff; }

/* the mic button reads as "hold" not "tap" */
.composer-send.mic { position: relative; }
.composer-send.mic::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid #f9718759;
  opacity: 0;
  transition: opacity 0.15s ease;
}
.composer-send.mic:active::after { opacity: 1; }

/* [hidden] loses to the explicit display on this pill, so make it explicit. */
#view-chat .chat-wallet[hidden] { display: none; }

/* The account block is a button now: it has to look tappable and route to the
   profile page instead of being an inert label. */
.sidebar-user {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.sidebar-user:hover { background: #ffffff12; border-color: #ffffff26; }
.sidebar-user b {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sidebar-user-chev {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  color: #ffffff4d;
}

/* --------------------------------------------------------------------------
   Homepage find row, matched to ourdream.ai.
   Order there is: search row -> category chips -> grid. Ours was the other way
   round, and .browse-find had no bottom margin, so the grid started 2px below
   the search pill and looked like it was being covered.
   -------------------------------------------------------------------------- */

.browse-find { margin: 0 0 10px; }
.browse-find .browse-search-row { gap: 8px; }

/* 44px round sort button, 44px search pill — same as theirs */
.browse-search-row .round-btn {
  width: 44px;
  height: 44px;
}
.browse-search {
  height: 44px;
  padding: 0 14px;
  background: #232326;
}

/* category chips sit between the search row and the grid */
#view-browse .hubs {
  margin: 0 0 12px;
  padding: 0;
}

@media (max-width: 560px) {
  .browse-find { margin-bottom: 10px; }
  .browse-find .browse-search-row { gap: 7px; }
  .browse-search-row .round-btn { width: 42px; height: 42px; }
  .browse-search { height: 42px; padding: 0 12px; }
  #view-browse .hubs { margin-bottom: 10px; }
}

/* --------------------------------------------------------------------------
   Generating a portrait takes 20-40s. The placeholder tiles only dimmed
   before, which reads as "nothing happened". Give them a spinner and a sweep.
   -------------------------------------------------------------------------- */

.portrait-pick.busy {
  opacity: 1;
  position: relative;
  overflow: hidden;
  background: #1a1a1e;
  border-color: #ffffff1f;
  cursor: default;
}
.portrait-pick.busy::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 20%, #ffffff17 50%, transparent 80%);
  animation: skel-sweep 1.6s ease-in-out infinite;
}
.portrait-pick.busy::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 26px;
  height: 26px;
  margin: -13px 0 0 -13px;
  border-radius: 50%;
  border: 2.5px solid #ffffff26;
  border-top-color: #f97187;
  animation: busy-spin 0.82s linear infinite;
}

/* the generate button stays put while working, showing its own spinner */
.file-btn.is-busy {
  position: relative;
  color: #ffffff8c;
  pointer-events: none;
}
.file-btn.is-busy::before {
  content: "";
  display: inline-block;
  width: 13px;
  height: 13px;
  margin-right: 7px;
  vertical-align: -2px;
  border-radius: 50%;
  border: 2px solid #ffffff33;
  border-top-color: #f97187;
  animation: busy-spin 0.82s linear infinite;
}
.portrait-status {
  margin: 2px 0 10px;
  text-align: center;
  font-size: 12.5px;
  color: #ffffff80;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.portrait-status i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #f97187;
  animation: blink 1.2s infinite;
}
.portrait-status i:nth-child(2) { animation-delay: 0.18s; }
.portrait-status i:nth-child(3) { animation-delay: 0.36s; }

/* --------------------------------------------------------------------------
   Inline voice recorder. Instead of a full-screen overlay with instruction
   copy, the text field becomes a recording bar: cancel, a pulsing dot, the
   elapsed time, and a live waveform. The send button turns into a stop/send.
   -------------------------------------------------------------------------- */

.composer-field { position: relative; }
.composer-field #text.hidden { display: none; }

.rec-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 44px;
  padding: 0 4px;
}
.rec-bar.hidden { display: none; }

.rec-x {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #ffffff14;
  color: #ffffffcc;
  transition: background 0.15s ease;
}
.rec-x:hover { background: #ffffff26; }
.rec-x svg { width: 15px; height: 15px; }

.rec-dot {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ff356e;
  animation: rec-blink 1s ease-in-out infinite;
}
@keyframes rec-blink {
  50% { opacity: 0.25; }
}

.rec-time {
  flex: 0 0 auto;
  font-size: 13px;
  color: #ffffffd9;
  font-variant-numeric: tabular-nums;
  min-width: 34px;
}

.rec-live {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 2px;
  height: 26px;
  overflow: hidden;
  justify-content: flex-end;
}
.rec-live i {
  flex: 0 0 auto;
  width: 3px;
  border-radius: 2px;
  background: #f97187;
  transition: height 0.07s linear;
}

/* the send button doubles as "stop and send" while recording */
.composer-send .ask-ico-stop { display: none; }
.composer-send.is-rec .ask-ico-mic { display: none; }
.composer-send.is-rec {
  background: #ff356e;
}
.composer-send.is-rec .ask-ico-stop { display: block; }
body.is-recording .starter { display: none; }

/* --------------------------------------------------------------------------
   Profile polish: group labels, tighter cards, calmer referral block.
   The settings rows used to be three separate cards floating apart; they now
   share one card with group headings so the page reads as sections.
   -------------------------------------------------------------------------- */

#view-profile .account { gap: 10px; }

/* small uppercase group heading between cards */
#view-profile .account-section {
  margin: 12px 2px 0;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #ffffff5c;
}
#view-profile .account-section:first-of-type { margin-top: 4px; }

/* bills header sits inline inside the merged card */
#view-profile .account-bill-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px 18px 6px;
  font-size: 14.5px;
  font-weight: 600;
  color: #f2f2f3;
  border-bottom: 1px solid #ffffff0f;
}
#view-profile #profile-bills { padding: 0 18px; }
#view-profile .account-signout-row { color: #ff7a7a; }
#view-profile .account-signout-row .account-ico { color: #ff7a7a; }

/* the referral block was the loudest thing on the page; tone it down */
#view-profile .account-refer {
  padding: 16px;
  border-radius: 18px;
  background:
    radial-gradient(120% 160% at 100% 0%, #f971871f 0%, transparent 62%),
    #17131a;
  border: 1px solid #ffffff14;
}
#view-profile .account-refer-kicker {
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #f97187b3;
}
#view-profile .account-refer h2 {
  font-size: 17px;
  margin: 2px 0 6px;
}
#view-profile .account-refer-copy { font-size: 13px; color: #ffffff8c; }
#view-profile .account-invite { padding: 7px 14px; font-size: 13px; }
#view-profile .account-code-link { font-size: 12.5px; }
#view-profile .account-refer .refer-bars { margin: 10px 0 6px; }
#view-profile .refer-meta { font-size: 12px; }

/* mobile: a little more air, heading rhythm tightened */
@media (max-width: 560px) {
  #view-profile .account { gap: 8px; }
  #view-profile .account-section { margin-top: 10px; font-size: 11px; }
  #view-profile .account-row { padding: 14px 15px; }
  #view-profile .account-bill-head { padding: 13px 15px 5px; }
  #view-profile #profile-bills { padding: 0 15px; }
  #view-profile .account-refer { padding: 14px; }
  #view-profile .account-refer h2 { font-size: 16px; }
}

/* the last row must clear the fixed bottom nav */
#view-profile .account { padding-bottom: 84px; }

/* --------------------------------------------------------------------------
   Sign-in sheet, matched to candy.ai's split card: image left with the logo
   overlaid, form right, pink primary action, social buttons underneath, and a
   footer strip offering sign-up.
   -------------------------------------------------------------------------- */

.auth-card {
  width: min(860px, 94vw);
  border-radius: 18px;
  overflow: hidden;
  background: #17171a;
  border: 1px solid #ffffff14;
  box-shadow: 0 40px 100px #000000cc;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  grid-template-rows: 1fr auto;
}

/* left: photo pane */
.auth-card .auth-art {
  grid-row: 1 / span 2;
  position: relative;
  background: #0f0f11;
  min-height: 560px;
}
.auth-card .auth-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.auth-card .auth-art::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #00000000 55%, #000000cc 100%);
  pointer-events: none;
}
.auth-card .auth-logo {
  position: absolute;
  left: 22px;
  bottom: 20px;
  z-index: 1;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #fff;
}
.auth-card .auth-logo em {
  font-style: normal;
  color: #f97187;
}

/* right: form pane */
.auth-card .auth-pane {
  padding: 34px 30px 26px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.auth-card .auth-pane h2 {
  margin: 0 0 18px;
  font-size: 26px;
  font-weight: 800;
  text-align: left;
  letter-spacing: -0.01em;
}
/* The wrapper already IS the box (it carries the border and radius). Giving
   the <input> its own border/background produced a box inside a box. */
.auth-card .auth-field {
  height: 46px;
  margin-bottom: 12px;
  border-radius: 10px;
  background: #0e0e10;
  border: 1px solid #ffffff1f;
  padding: 0 14px;
  transition: border-color 0.15s ease;
}
.auth-card .auth-field:focus-within {
  border-color: #f97187;
}
.auth-card .auth-field input {
  height: auto;
  background: none;
  border: 0;
  outline: none;
  box-shadow: none;
}

/* the primary action has to be the brand pink — grey read as disabled */
.auth-card .auth-continue {
  height: 46px;
  margin-top: 4px;
  border-radius: 10px;
  background: #f97187;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  transition: background 0.15s ease;
}
.auth-card .auth-continue:hover { background: #fc768a; }
.auth-card .auth-continue:disabled { background: #f9718766; }

.auth-card .auth-or {
  margin: 18px 0 14px;
  font-size: 12.5px;
  color: #ffffff6b;
}
.auth-card .auth-or::before,
.auth-card .auth-or::after { background: #ffffff1f; }

.auth-card .social {
  height: 44px;
  border-radius: 10px;
  background: #fff;
  color: #111;
  font-size: 14px;
  font-weight: 600;
  border: 0;
  margin-bottom: 9px;
}
.auth-card .social:hover { background: #f0f0f2; }

.auth-card .auth-legal {
  margin: 14px 0 0;
  font-size: 11px;
  line-height: 1.5;
  color: #ffffff59;
}

/* footer strip */
.auth-card .auth-foot {
  grid-column: 2;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 14px 30px;
  border-top: 1px solid #ffffff14;
  font-size: 13px;
  color: #ffffff8c;
}
.auth-card .auth-foot button {
  color: #f97187;
  font-weight: 600;
  font-size: 13px;
}

/* close button floats over the art pane */
.auth-card .auth-x {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 3;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #000000a6;
  border: 1px solid #ffffff26;
  color: #fff;
  display: grid;
  place-items: center;
}

@media (max-width: 780px) {
  .auth-card {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    width: min(440px, 94vw);
  }
  .auth-card .auth-art { display: none; }
  .auth-card .auth-foot { grid-column: 1; }
  .auth-card .auth-pane { padding: 26px 20px 20px; }
  .auth-card .auth-pane h2 { font-size: 22px; }
}

/* "Signing in…" state: the button keeps its pink but shows a spinner so the
   wait reads as work, not as a dead control. */
.auth-card .auth-continue.is-busy {
  background: #f97187b3;
  color: #fff;
  position: relative;
  padding-left: 34px;
}
.auth-card .auth-continue.is-busy::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -58px;
  border-radius: 50%;
  border: 2px solid #ffffff59;
  border-top-color: #fff;
  animation: busy-spin 0.75s linear infinite;
}
.auth-card .auth-continue.is-busy { cursor: progress; }

/* --------------------------------------------------------------------------
   Profile hero, rebuilt as a membership pass. The old row was an avatar and
   two lines of text; a gradient card with a plan badge reads as an account
   with status rather than a form header.
   -------------------------------------------------------------------------- */

#view-profile .member-card {
  position: relative;
  overflow: hidden;
  padding: 18px 20px 16px;
  border-radius: 22px;
  background: linear-gradient(135deg, #241820 0%, #17171b 45%, #1a1a24 100%);
  border: 1px solid #ffffff17;
  box-shadow: 0 18px 44px #00000059;
}
#view-profile .member-glow {
  position: absolute;
  width: 320px;
  height: 320px;
  right: -120px;
  top: -160px;
  border-radius: 50%;
  background: radial-gradient(circle, #f9718752 0%, transparent 68%);
  pointer-events: none;
}
#view-profile .member-top {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
#view-profile .member-badge {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #f97187;
  background: #f9718724;
  border: 1px solid #f9718747;
}
#view-profile .member-badge.is-paid {
  color: #12100a;
  background: linear-gradient(135deg, #ffd76a, #fcbb00);
  border-color: #fcbb0066;
}
#view-profile .member-mark {
  font-size: 18px;
  color: #ffffff2e;
}

#view-profile .member-body {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 16px 0 14px;
}
#view-profile .member-copy {
  display: grid;
  gap: 5px;
  min-width: 0;
}
#view-profile .member-copy b {
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#view-profile .member-copy small {
  font-size: 13px;
  color: #ffffff80;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#view-profile .member-card .account-avatar {
  width: 58px;
  height: 58px;
  font-size: 22px;
  box-shadow: 0 0 0 2px #ffffff1f, 0 8px 22px #00000073;
}

#view-profile .member-foot {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 13px;
  border-top: 1px solid #ffffff14;
  font-size: 13px;
  color: #ffffff8c;
}
#view-profile .member-cta {
  padding: 7px 15px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  color: #f2f2f3;
  background: #ffffff14;
  border: 1px solid #ffffff21;
  transition: background 0.15s ease;
}
#view-profile .member-cta:hover { background: #ffffff26; }

@media (max-width: 560px) {
  #view-profile .member-card { padding: 16px 17px 14px; border-radius: 20px; }
  #view-profile .member-copy b { font-size: 19px; }
  #view-profile .member-card .account-avatar { width: 52px; height: 52px; font-size: 20px; }
}

/* Coins moved into the membership card; the separate tile row is gone. */
#view-profile .member-coins {
  display: flex;
  align-items: baseline;
  gap: 7px;
  margin: 0 0 14px;
}
#view-profile .member-coin-ico {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
  color: #fcbb00;
  align-self: center;
}
#view-profile .member-coins b {
  font-size: 27px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #fcbb00;
  font-variant-numeric: tabular-nums;
}
#view-profile .member-coins span {
  font-size: 12.5px;
  color: #ffffff73;
}
@media (max-width: 560px) {
  #view-profile .member-coins b { font-size: 24px; }
}

/* ---- bills: a list on its own page, not inline under the settings ---- */
.subpage {
  width: min(720px, 100%);
  margin: 0 auto;
  padding: 14px 16px 40px;
}
.subpage-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 0 14px;
}
.subpage-back {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #ffffff0f;
  border: 1px solid #ffffff1a;
  color: #f2f2f3;
}
.subpage-back svg { width: 18px; height: 18px; }
.subpage-head h2 { margin: 0; font-size: 19px; font-weight: 700; }
.subpage-body {
  border-radius: 18px;
  background: #17171b;
  border: 1px solid #ffffff14;
  overflow: hidden;
}
.bill-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px;
  border-bottom: 1px solid #ffffff0f;
}
.bill-row:last-child { border-bottom: 0; }
.bill-row div { display: grid; gap: 3px; min-width: 0; }
.bill-row b { font-size: 14.5px; font-weight: 600; }
.bill-row small { font-size: 12px; color: #ffffff73; }
.bill-amount {
  flex: 0 0 auto;
  font-size: 14px;
  font-weight: 600;
  color: #fcbb00;
  font-variant-numeric: tabular-nums;
}

/* coins sit top-right in the membership card now */
#view-profile .member-top { align-items: center; }
#view-profile .member-coins {
  margin: 0;
  align-items: baseline;
  gap: 6px;
}
#view-profile .member-coins b { font-size: 20px; }
#view-profile .member-body { margin: 14px 0 0; }

/* --------------------------------------------------------------------------
   Account sheet (top-right button, signed in). It used to be five lines of
   plain text plus two bare <ul> lists; now it is a header, a wallet, an invite
   chip and grouped ledger rows.
   -------------------------------------------------------------------------- */

#auth-account { display: grid; gap: 2px; }

/* header: avatar + handle + plan chip */
.acc-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 16px;
}
.acc-avatar {
  width: 46px;
  height: 46px;
  flex: 0 0 auto;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, #f97187, #e65073);
  box-shadow: 0 4px 14px #f9718747;
}
.acc-id { display: grid; gap: 2px; min-width: 0; flex: 1; }
.acc-id b {
  font-size: 16px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.acc-id small {
  font-size: 12px;
  color: #ffffff73;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.acc-plan {
  flex: 0 0 auto;
  padding: 5px 11px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #f97187;
  background: #f971871f;
  border: 1px solid #f9718740;
}
.acc-plan.is-paid {
  color: #12100a;
  background: linear-gradient(135deg, #ffd76a, #fcbb00);
  border-color: #fcbb0059;
}

/* wallet: the number is the point, so it gets its own block */
.acc-wallet {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 14px 16px;
  border-radius: 14px;
  background: #ffffff0a;
  border: 1px solid #ffffff14;
  margin-bottom: 10px;
}
.acc-wallet-label {
  font-size: 11.5px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #ffffff5c;
}
.acc-wallet b {
  font-size: 24px;
  font-weight: 800;
  color: #fcbb00;
  font-variant-numeric: tabular-nums;
  margin-left: auto;
}
.acc-topup {
  flex: 0 0 auto;
  padding: 6px 13px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  color: #fff;
  background: #f97187;
  margin-left: 10px;
}
.acc-topup:hover { background: #fc768a; }

/* invite code reads as a copyable chip */
.acc-invite {
  width: 100%;
  text-align: left;
  padding: 11px 14px;
  border-radius: 12px;
  font-size: 13px;
  color: #ffffffcc;
  background: #ffffff0a;
  border: 1px dashed #ffffff2e;
  margin-bottom: 14px;
}
.acc-invite:hover { background: #ffffff14; }

.acc-section {
  margin: 10px 0 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #ffffff4d;
}
.acc-ledger { display: grid; gap: 1px; }
.acc-ledger li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid #ffffff0a;
  list-style: none;
}
.acc-ledger li:last-child { border-bottom: 0; }
.acc-ledger .meta { display: grid; gap: 2px; min-width: 0; }
.acc-ledger .note { font-size: 13px; color: #f2f2f3; }
.acc-ledger .when { font-size: 11px; color: #ffffff59; }
.acc-ledger .amt {
  font-size: 13.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  flex: 0 0 auto;
}
.acc-ledger .amt.plus { color: #4ade80; }
.acc-ledger .amt.minus { color: #ff7a7a; }
.acc-ledger .empty { font-size: 12.5px; color: #ffffff59; padding: 6px 0; }

.acc-signout {
  margin-top: 18px;
  width: 100%;
  height: 44px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  color: #ff7a7a;
  background: #ff7a7a14;
  border: 1px solid #ff7a7a33;
}
.acc-signout:hover { background: #ff7a7a24; }

/* the sign-up strip is for visitors only */
.auth-card .auth-foot[hidden] { display: none; }

/* In the account sheet the plan badge sits at the top-right, where the close
   button lives. Reserve the corner so they stop overlapping. */
#auth-account { padding-top: 10px; }
#auth-account .acc-head { padding-right: 40px; }
.auth-card.solo .auth-x { top: 10px; right: 10px; }

/* --------------------------------------------------------------------------
   Create chooser. The Create entry used to jump straight into the wizard; it
   now asks what to create first, so there is one landing point for character
   creation and media generation.
   -------------------------------------------------------------------------- */

.cm {
  position: fixed;
  inset: 0;
  z-index: 190;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* anchored to the bottom, the way the reference does it: card sits low,
     the round close button under it, bottom nav still visible behind */
  justify-content: flex-end;
  gap: 16px;
  padding: 20px 20px 130px;
  background: #000000a6;
  backdrop-filter: blur(6px);
  animation: veil-in 0.16s ease-out;
}
.cm .cm-card {
  width: min(420px, 100%);
  border-radius: 20px;
  background: #1b1b1f;
  border: 1px solid #ffffff1a;
  box-shadow: 0 30px 80px #000000b3;
  overflow: hidden;
}
.cm-row {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 16px 18px;
  text-align: left;
  border-bottom: 1px solid #ffffff0f;
  transition: background 0.14s ease;
}
.cm-row:last-child { border-bottom: 0; }
.cm-row:hover { background: #ffffff0a; }

.cm-ico {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  background: #ffffff12;
  border: 1px solid #ffffff17;
  color: #f2f2f3;
}
.cm-ico svg { width: 21px; height: 21px; }
.cm-copy { display: grid; gap: 3px; min-width: 0; }
.cm-copy b {
  font-size: 15.5px;
  font-weight: 700;
  color: #f2f2f3;
}
.cm-copy small {
  font-size: 12.5px;
  color: #ffffff80;
  line-height: 1.35;
}

/* round close button sits under the card, like the reference */
.cm .cm-x {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #f2f2f3;
  color: #111;
  box-shadow: 0 10px 30px #000000a6;
}
.cm .cm-x svg { width: 20px; height: 20px; }
.cm .cm-x:hover { background: #fff; }

@media (max-width: 560px) {
  /* keep the bottom clearance: the tab bar is fixed and would cover the ✕ */
  .cm { padding: 16px 16px 124px; }
  .cm-row { padding: 14px 15px; }
  .cm-ico { width: 40px; height: 40px; border-radius: 12px; }
}

/* --------------------------------------------------------------------------
   Sidebar account block: avatar + name + plan chip, with the coin balance on
   the second line. It used to be a bare name and a pink plan label.
   -------------------------------------------------------------------------- */

.sidebar-user {
  width: 100%;
  display: flex;
  /* the original rule stacked these vertically; the card is a row now */
  flex-direction: row;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border-radius: 14px;
  background: #ffffff08;
  border: 1px solid #ffffff14;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.sidebar-user:hover { background: #ffffff12; border-color: #ffffff26; }

.su-body {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: 3px;
}
.su-top {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.su-top b {
  flex: 1;
  min-width: 0;
  font-size: 13.5px;
  font-weight: 600;
  color: #f2f2f3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.su-plan {
  flex: 0 0 auto;
  font-style: normal;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 999px;
  color: #ffffff85;
  background: #ffffff14;
}
.su-plan.is-paid {
  color: #12100a;
  background: linear-gradient(135deg, #ffd76a, #fcbb00);
}

.su-coins {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: #fcbb00;
  font-variant-numeric: tabular-nums;
}
.su-coins svg { width: 12px; height: 12px; flex: 0 0 auto; }
.su-coins span { font-weight: 600; }

.sidebar-user-chev { width: 15px; height: 15px; flex: 0 0 auto; color: #ffffff40; }

/* collapsed rail: show the avatar only */
.sidebar.collapsed .sidebar-user {
  justify-content: center;
  padding: 8px;
}
.sidebar.collapsed .su-body,
.sidebar.collapsed .sidebar-user-chev { display: none; }

/* the original .sidebar-user span rule painted everything pink; the coin line
   needs to stay gold */
.sidebar-user .su-coins,
.sidebar-user .su-coins span { color: #fcbb00; }
.sidebar-user .su-top b { color: #f2f2f3; }

  
}

/* Creations gallery — every generated image and video in one place. */
.gal {
  width: min(1100px, 100%);
  margin: 0 auto;
  padding: 18px 16px 40px;
}
.gal-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 16px;
}
.gal-head h2 { margin: 0; font-size: 20px; font-weight: 700; }
.gal-head span { font-size: 13px; color: #ffffff73; }

.gal-grid {
  display: grid;
  /* large tiles: two per row on a phone, three on a tablet, four on desktop */
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px;
}
.gal-tile {
  position: relative;
  margin: 0;
  border-radius: 16px;
  overflow: hidden;
  background: #17171b;
  border: 1px solid #ffffff12;
  aspect-ratio: 3 / 4;
}
.gal-tile img,
.gal-tile video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.gal-tile img { cursor: zoom-in; }
.gal-tile figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 16px 9px 7px;
  font-size: 11px;
  color: #ffffffcc;
  background: linear-gradient(180deg, transparent, #000000b3);
}
.gal-badge {
  position: absolute;
  top: 7px;
  right: 7px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 10px;
  color: #fff;
  background: #000000a6;
  border: 1px solid #ffffff2e;
}
@media (max-width: 560px) {
  .gal { padding: 0 0 12px; }
  .gal-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
}

/* My AI segmented control: characters | creations */
.myai-seg {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  margin: 0 auto 18px;
  border-radius: 999px;
  background: #17171b;
  border: 1px solid #ffffff14;
}
#view-myai .myai { display: flex; flex-direction: column; align-items: center; }
#view-myai .myai > .grid,
#view-myai .myai > .gal,
#view-myai .myai > .myai-empty { width: 100%; }
.myai-seg button {
  padding: 8px 20px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  color: #8e8e93;
  transition: background 0.15s ease, color 0.15s ease;
}
.myai-seg button.on {
  background: #2c2c2e;
  color: #fff;
}
#view-myai .gal { width: 100%; }
#view-myai .gal.hidden { display: none; }
#view-myai .myai-empty.hidden { display: none; }