:root {
  --bg: #08060a;
  --surface: #100c13;
  --surface-2: #17121b;
  --surface-3: #201a26;
  --line: #241d2b;
  --line-strong: #33293c;
  --text: #f2eef5;
  --muted: #918a99;
  --male: #00c3ff;
  --female: #fd65c2;
  --couple: #9d5cf0;
  --other: #98a1af;
  --online: #17bf5f;
  --accent: #ff06cd;
  --accent-deep: #e8377f;
  --accent-soft: #2a1120;
  --danger: #e8455b;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-md: 0 4px 18px rgba(0, 0, 0, .5);
  --shadow-lg: 0 14px 40px rgba(0, 0, 0, .6);
  --radius: 14px;
  --bar: 56px;
  --shell: 620px;
  /* Landing background. Swap this one line to change the hero image. */
  --hero-image: url("https://pbs.twimg.com/media/A3Ju_lbCAAAMVqd.png");
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

/* The UA rule for [hidden] is display:none, but any author display rule beats
   it. .screen and .composer both set display, so hidden must be forced here or
   every screen renders at once. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: #292929;
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
}

body { overflow: hidden; }

input, textarea, select, button { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--accent); }

.ic {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}

/* ---------- screens ---------- */

.screen {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  max-width: var(--shell);
  margin: 0 auto;
  border-left: 1px solid var(--line);
  border-right: 1px solid var(--line);
}

.screen--overlay {
  z-index: 20;
  animation: slide-in .18s ease-out;
}

@keyframes slide-in {
  from { transform: translateX(18px); opacity: 0; }
  to { transform: none; opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .screen--overlay { animation: none; }
}

/* ---------- join ---------- */

.screen--join { overflow-y: auto; display: block; }

.join {
  max-width: 420px;
  margin: 0 auto;
  padding: 40px 20px calc(40px + env(safe-area-inset-bottom));
}

.join__head { margin-bottom: 28px; }

.brand {
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
}

.brand span { color: var(--accent); }

.join__lead {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 15px;
}

.join__note {
  margin: 14px 0 0;
  color: var(--muted);
  font-size: 12.5px;
  text-align: center;
}

.form { display: flex; flex-direction: column; gap: 16px; }

.field { display: flex; flex-direction: column; gap: 7px; }
.field--age { width: 96px; }
.field--grow { flex: 1; }
.row { display: flex; gap: 12px; }

.field__label {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
}

.field__label em {
  font-style: normal;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  opacity: .7;
}

.field input,
.field select,
.field textarea {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 13px 14px;
  outline: none;
  width: 100%;
  resize: none;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--accent);
}

.segment {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 5px;
}

.segment__btn {
  background: none;
  border: 0;
  border-radius: 8px;
  padding: 9px 4px;
  font-size: 14px;
  color: var(--muted);
}

.segment__btn.is-active {
  background: var(--surface);
  color: var(--accent);
  font-weight: 700;
  box-shadow: var(--shadow-sm);
}

.photo-pick {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 108px;
  border: 1px dashed var(--line);
  border-radius: 12px;
  background: var(--surface-2);
  color: var(--muted);
  overflow: hidden;
  position: relative;
  cursor: pointer;
}

.photo-pick__hint { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.photo-pick img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.form__error {
  margin: 0;
  color: var(--danger);
  font-size: 14px;
}

/* ---------- buttons ---------- */

.btn {
  border: 1px solid var(--line);
  background: var(--surface-2);
  border-radius: 12px;
  padding: 12px 16px;
  font-weight: 600;
}

.btn--primary {
  background: linear-gradient(135deg, var(--accent) 0%, #ff7fb4 100%);
  border-color: transparent;
  color: #fff;
  font-weight: 700;
  box-shadow: 0 4px 14px rgba(255, 77, 148, .3);
}
.btn--primary:hover { box-shadow: 0 6px 18px rgba(255, 77, 148, .38); }
.btn--primary:disabled { opacity: .55; }
.btn--block { width: 100%; }
.btn--ghost { background: none; }
.btn--sm { padding: 8px 12px; font-size: 13px; }
.btn--danger { color: var(--danger); }

/* ---------- tabs ---------- */

.tabs {
  display: flex;
  height: var(--bar);
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  flex: none;
}

.tab {
  flex: 1;
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 14px;
  position: relative;
}

.tab.is-active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 650; }
.tab span { display: none; }

@media (min-width: 420px) {
  .tab span { display: inline; }
}

.badge {
  position: absolute;
  top: 9px;
  left: 50%;
  margin-left: 4px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--accent);
  color: #fff;
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  box-shadow: 0 2px 6px rgba(255, 77, 148, .4);
}

/* ---------- panes ---------- */

/* main column holds the header, tabs, ad slot and the scrolling panes */
.main {
  flex: 1;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* only this part scrolls, so the ad slot stays pinned under the menu */
.panes { flex: 1; min-height: 0; position: relative; }

.pane {
  display: none;
  position: absolute;
  inset: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.pane.is-active { display: block; }

/* ---------- advertising ---------- */

.adslot {
  flex: none;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  overflow: hidden;
  display: block;
}

.adslot iframe {
  border: 0;
  display: block;
  width: 100%;
  margin: 0 auto;
  max-width: 970px;
}

/* ---------- desktop sidebar ---------- */

.sidebar { display: none; }

@media (min-width: 900px) {
  #view-app { max-width: 1180px; flex-direction: row; }

  .sidebar {
    display: flex;
    flex-direction: column;
    width: 250px;
    flex: none;
    border-right: 1px solid var(--line);
    background: var(--surface);
    padding: 16px 12px;
  }

  /* the in-column header and tab bar are the mobile chrome; hide on desktop */
  .main > .topbar,
  .main > .tabs { display: none; }

  .sidebar__brand {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 8px 16px;
    gap: 8px;
  }

  .sidenav { display: flex; flex-direction: column; gap: 4px; }

  .sidenav__item {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 12px 14px;
    border: 0;
    border-radius: 11px;
    background: none;
    color: var(--muted);
    font-size: 15.5px;
    font-weight: 600;
    text-align: left;
    position: relative;
  }

  .sidenav__item:hover { background: var(--surface-2); color: var(--accent); }
  .sidenav__item.is-active {
    background: linear-gradient(135deg, var(--accent) 0%, #ff7fb4 100%);
    color: #fff;
    box-shadow: 0 4px 12px rgba(255, 77, 148, .28);
  }
  .sidenav__item .ic { width: 21px; height: 21px; }

  .badge--inline {
    position: static;
    margin-left: auto;
    top: auto;
    left: auto;
  }

  .sidebar__banner {
    margin-top: auto;
    padding-top: 16px;
    display: flex;
    justify-content: center;
  }

  .sidebar__banner iframe { border: 0; display: block; width: 100%; max-width: 300px; }
}

@media (min-width: 900px) {
  /* Overlays (profile, chat, snap) sit over the main column, not the whole
     window, so the sidebar stays put and visible.

     The app box is centered at up to 1180px. Its left edge is at
     max(0px, (100vw - 1180px) / 2); the main column starts 250px past that. */
  .screen--overlay, .screen--snap {
    max-width: none;
    margin: 0;
    left: calc(max(0px, (100vw - 1180px) / 2) + 250px);
    right: max(0px, (100vw - 1180px) / 2);
    border-right: 1px solid var(--line);
  }
}

.toolbar {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--bg);
  padding: 12px 14px 10px;
  border-bottom: 1px solid var(--line);
}

.toolbar__top {
  display: flex;
  align-items: center;
  gap: 10px;
}

.toolbar__search-btn {
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
}

.toolbar__search-btn.is-active { background: var(--accent); border-color: var(--accent); color: #fff; }

.search {
  display: flex;
  align-items: center;
  gap: 9px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 11px;
  padding: 0 12px;
  color: var(--muted);
  margin-top: 10px;
}

.search input {
  flex: 1;
  background: none;
  border: 0;
  outline: none;
  padding: 11px 0;
  color: var(--text);
}

.search__clear {
  flex: none;
  background: none;
  border: 0;
  color: var(--muted);
  display: flex;
  align-items: center;
  padding: 4px;
}

.chips { display: flex; gap: 7px; overflow-x: auto; scrollbar-width: none; flex: 1; min-width: 0; }
.chips::-webkit-scrollbar { display: none; }

.chip {
  flex: none;
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--muted);
  border-radius: 999px;
  padding: 7px 13px;
  font-size: 13.5px;
}

.chip:hover { border-color: var(--line-strong); color: var(--text); }
.chip.is-active {
  background: linear-gradient(135deg, var(--accent) 0%, #ff7fb4 100%);
  color: #fff;
  border-color: transparent;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(255, 77, 148, .28);
}

/* ---------- lists ---------- */

.list { padding: 10px 12px 16px; display: flex; flex-direction: column; gap: 8px; }

.row-item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 13px;
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 15px;
  text-align: left;
  box-shadow: var(--shadow-sm);
  transition: transform .13s ease, box-shadow .13s ease, border-color .13s ease;
}

.row-item:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}
.row-item:active { transform: none; box-shadow: var(--shadow-sm); }

/* A row that just arrived over the socket slides in, so the list visibly
   reacts instead of silently growing. */
.row-item--enter, .tile--enter { animation: row-in .34s cubic-bezier(.22, 1, .36, 1); }

@keyframes row-in {
  from { opacity: 0; transform: translateY(-8px) scale(.98); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .row-item--enter, .tile--enter { animation: none; }
}

/* ---------- bottom navigation ---------- */

/* The main column is a flex column, so a nav placed last simply sits at the
   bottom; no fixed positioning and therefore no overlap with the scroll area. */
.tabs--bottom {
  border-bottom: 0;
  border-top: 1px solid var(--line);
  height: auto;
  padding-bottom: env(safe-area-inset-bottom);
  box-shadow: 0 -2px 14px rgba(0, 0, 0, .45);
}

.tabs--bottom .tab {
  flex-direction: column;
  gap: 3px;
  height: 60px;
  border-bottom: 0;
  border-top: 2px solid transparent;
  font-size: 11.5px;
}

.tabs--bottom .tab .ic { width: 23px; height: 23px; }
.tabs--bottom .tab.is-active { border-top-color: var(--accent); }

/* badge sits on the icon rather than beside the label */
.tabs--bottom .badge { top: 6px; left: 50%; margin-left: 3px; }

/* ---------- profile button in the top bar ---------- */

.topbar__me {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 9px 3px 3px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: none;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  flex: none;
}

.topbar__me:hover { background: var(--surface-2); }

.topbar__me.is-active {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
}

.topbar__me .avatar { width: 32px; height: 32px; font-size: 13px; box-shadow: none; }
.topbar__melabel { white-space: nowrap; }

@media (max-width: 400px) { .topbar__melabel { display: none; } }


/* ---------- live cams ---------- */

.cams {
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, var(--surface-2) 0%, #000 100%);
  padding: 12px 14px 14px;
}

.cams__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.cams__title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 16px;
  font-weight: 750;
  letter-spacing: -0.015em;
}

.cams__pulse {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #e8203f;
  box-shadow: 0 0 8px rgba(232, 32, 63, .7);
  animation: live-pulse 1.8s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) { .cams__pulse { animation: none; } }

.cams__count { color: var(--muted); font-weight: 600; font-size: 13.5px; }

/* Five slots side by side, scrollable on a narrow phone. */
.cams__strip {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(84px, 1fr);
  gap: 7px;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 2px;
}

.cams__strip::-webkit-scrollbar { display: none; }

.cam {
  position: relative;
  z-index: 0;
  isolation: isolate;
  /* Square keeps the strip short so the expanded player gets the room. */
  aspect-ratio: 1 / 1;
  border-radius: 12px;
  overflow: hidden;
  background: #14101a;
  border: 1px solid var(--line);
  padding: 0;
  min-width: 0;
}

.cam__video { position: absolute; inset: 0; background: #14101a; }
.cam__video video { width: 100%; height: 100%; object-fit: cover; display: block; }

.cam__badge {
  position: absolute;
  top: 6px;
  left: 6px;
  z-index: 1;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .06em;
  color: #fff;
  background: #e8203f;
  padding: 2px 6px;
  border-radius: 4px;
}

.cam__you {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 1;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .04em;
  color: #14101a;
  background: #fff;
  padding: 2px 6px;
  border-radius: 4px;
}

.cam__eyes {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 2px 6px 2px 5px;
  border-radius: 999px;
  background: rgba(0, 0, 0, .55);
  backdrop-filter: blur(4px);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
}

.cam__eyes .ic { width: 12px; height: 12px; }

.cam__name {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  padding: 14px 6px 5px;
  font-size: 11.5px;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background: linear-gradient(to top, rgba(0, 0, 0, .82), transparent);
  text-shadow: 0 1px 3px rgba(0, 0, 0, .6);
}

.cam__name i { font-style: normal; font-weight: 400; opacity: .85; }

.cam.is-mine { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }

/* an empty slot invites you to take it */
.cam--free {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: var(--surface-2);
  border: 1.5px dashed var(--line-strong);
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 600;
}

.cam--free .ic { width: 19px; height: 19px; }
.cam--free:hover { border-color: var(--accent); color: var(--accent); background: var(--surface-2); }

.cams__note {
  margin: 10px 0 0;
  font-size: 13px;
  color: var(--danger);
}

@media (min-width: 900px) {
  .cams { padding: 16px 18px 18px; }
  .cams__strip { grid-auto-columns: minmax(0, 1fr); }
}





/* the strip stays visible but reads as inactive while we wait for a seat */
.cams__strip.is-dimmed { opacity: .45; pointer-events: none; }

/* ---------- modal ---------- */

.modal {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .68);
  backdrop-filter: blur(4px);
  animation: fade-in .16s ease-out;
}

.modal__card {
  position: relative;
  width: 100%;
  max-width: 380px;
  background: var(--surface);
  border-radius: 20px;
  padding: 26px 24px 22px;
  text-align: center;
  box-shadow: 0 24px 60px rgba(40, 8, 26, .34);
  animation: modal-in .2s cubic-bezier(.22, 1, .36, 1);
}

@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes modal-in {
  from { opacity: 0; transform: translateY(14px) scale(.97); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .modal__backdrop, .modal__card { animation: none; }
}

.modal__icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal__icon .ic { width: 27px; height: 27px; }

.modal__title {
  margin: 0 0 8px;
  font-size: 20px;
  font-weight: 750;
  letter-spacing: -0.02em;
}

.modal__text {
  margin: 0 0 16px;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--muted);
}

.modal__text b { color: var(--text); font-weight: 700; }

.modal__card--ask { text-align: left; }
.modal__card--ask .modal__icon { margin-left: 0; }
.modal__card--ask .modal__title { text-align: left; }

.modal__icon--danger { background: rgba(232, 69, 91, .12); color: var(--danger); }

.modal__actions {
  display: flex;
  gap: 10px;
  margin-top: 4px;
}

/* The confirming action sits on the right, where the thumb lands last, so a
   destructive one is not the first thing hit by accident. */
.modal__actions .btn { flex: 1; }

.modal__card--ask .field { margin-bottom: 16px; }

.modal__card--ask textarea {
  width: 100%;
  resize: vertical;
  min-height: 78px;
}

.modal__wait {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin-bottom: 18px;
  padding: 9px 12px;
  border-radius: 10px;
  background: var(--surface-2);
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
}

.modal__wait i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  animation: live-pulse 1.4s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) { .modal__wait i { animation: none; } }

/* the strip stays visible but reads as inactive while we wait for a seat */

/* ---- expanded cam ---- */

.cambig { margin-top: 10px; }

/*
 * The stage is capped in height, not just given a ratio.
 *
 * A 3:4 box on a phone is around 500px tall. Stacked under the strip and above
 * the chat that overflows the pane, and because the pane clips, what gets cut is
 * the bottom of the player - exactly where the name and viewer count sit. The
 * cap keeps the whole player on screen; the video letterboxes inside it, so the
 * full picture is still visible whatever shape the box ends up.
 */
.cambig__stage {
  position: relative;
  z-index: 0;
  isolation: isolate;
  width: 100%;
  aspect-ratio: 3 / 4;
  max-height: 46vh;
  border-radius: 16px;
  overflow: hidden;
  background: #14101a;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-md);
}

/* Landscape phones have almost no vertical room, so give the player less of it
   and let the chat keep its share. */
@media (max-height: 520px) {
  .cambig__stage { max-height: 62vh; }
}

.cambig__video { position: absolute; inset: 0; }
.cambig__video video { width: 100%; height: 100%; object-fit: contain; display: block; background: #14101a; }
.cambig__video audio { display: none; }

.cambig__badge {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 1;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .06em;
  color: #fff;
  background: #e8203f;
  padding: 3px 8px;
  border-radius: 5px;
}

.cambig__controls {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 1;
  display: flex;
  gap: 8px;
}

.cambig__btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 0;
  background: rgba(20, 16, 26, .62);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(6px);
  transition: background .12s ease;
}

.cambig__btn .ic { width: 21px; height: 21px; }
.cambig__btn:hover { background: rgba(20, 16, 26, .85); }
.cambig__btn.is-on { background: var(--accent); }

.cambig__foot {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  padding: 22px 12px 10px;
  background: linear-gradient(to top, rgba(0, 0, 0, .8), transparent);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.cambig__watching {
  flex: none;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .18);
  backdrop-filter: blur(6px);
  color: #fff;
  font-size: 12.5px;
  font-weight: 700;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .5);
}

.cambig__watching .ic { width: 14px; height: 14px; }

.cambig__who {
  border: 0;
  background: none;
  padding: 0;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
  overflow: hidden;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .6);
}

/* On a narrow screen the name gives way before the count does: knowing how many
   people are watching is the part you cannot get anywhere else on this screen. */
.cambig__who > span:first-child,
.cambig__who { white-space: nowrap; text-overflow: ellipsis; }

.cambig__who i { font-style: normal; font-weight: 400; opacity: .85; }

.cambig__link {
  font-size: 12.5px;
  font-weight: 600;
  color: #ffc4dc;
  border-bottom: 1px solid rgba(255, 196, 220, .5);
}

/* the strip cam currently expanded */
.cam.is-open { box-shadow: 0 0 0 2.5px var(--accent); }

@media (max-width: 380px) {
  .cambig__link { display: none; }
  .cambig__who { font-size: 15px; }
}

@media (min-width: 900px) {
  .cambig__stage { aspect-ratio: 16 / 9; max-height: 540px; margin: 0 auto; }
}

/* ---------- public chatroom ---------- */

/* The room pane is a column: cams keep their natural height at the top and the
   chat takes whatever is left, so the composer sits on the bottom edge rather
   than being pushed off screen by a tall strip. */
#pane-room {
  display: none;
  flex-direction: column;
  overflow: hidden;
}

#pane-room.is-active { display: flex; }

#pane-room .cams { flex: none; }

/* Whatever the cams take, the chat keeps enough to stay usable: a log you can
   read a couple of lines in, plus the composer. */
#pane-room .room { min-height: 190px; }

.room {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.room__log {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 12px 12px 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  overscroll-behavior: contain;
}

.rmsg {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 5px 6px;
  border-radius: 10px;
  cursor: pointer;
}

.rmsg:hover { background: var(--surface-2); }

.rmsg--enter { animation: bubble-in .2s cubic-bezier(.22, 1, .36, 1); }
@media (prefers-reduced-motion: reduce) { .rmsg--enter { animation: none; } }

/* Deliberately small: in a busy room the avatars are decoration, the words are
   the content, and 40px portraits would push half the messages off screen. */
.rmsg__av {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--surface-3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  margin-top: 1px;
}

.rmsg__av img { width: 100%; height: 100%; object-fit: cover; display: block; }

.rmsg__main { min-width: 0; flex: 1; }

.rmsg__head {
  display: flex;
  align-items: baseline;
  gap: 7px;
  margin-bottom: 1px;
}

.rmsg__name {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rmsg__time {
  flex: none;
  font-style: normal;
  font-size: 11px;
  color: var(--muted);
  opacity: .8;
}

.rmsg__body {
  display: block;
  font-size: 15px;
  line-height: 1.45;
  color: var(--text);
  word-wrap: break-word;
  overflow-wrap: anywhere;
}

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

.rmsg__gif {
  display: block;
  margin-top: 4px;
  max-width: 220px;
  width: 100%;
  border-radius: 12px;
  background: var(--surface-3);
}

.rmsg.is-mine .rmsg__body { color: #fff; }

.room__note {
  margin: 0 12px 6px;
  padding: 8px 12px;
  border-radius: 10px;
  background: var(--accent-soft);
  border: 1px solid var(--accent);
  color: var(--accent);
  font-size: 13px;
}

.room__composer {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  background: var(--surface);
}

.room__composer input {
  flex: 1;
  min-width: 0;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 11px 16px;
  color: var(--text);
  font-size: 15px;
  outline: none;
}

.room__composer input:focus { border-color: var(--accent); }

.room__gif {
  flex: none;
  height: 40px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .04em;
}

.room__gif:hover { border-color: var(--accent); color: var(--accent); }

.room__send {
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 0;
  background: linear-gradient(135deg, var(--accent) 0%, #ff7fb4 100%);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3px 10px rgba(255, 77, 148, .3);
}

.room__send .ic { width: 19px; height: 19px; }

/* ---- GIF picker ---- */

.gifs {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  max-height: 62%;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-top: 1px solid var(--line);
  border-radius: 16px 16px 0 0;
  box-shadow: 0 -10px 30px rgba(0, 0, 0, .5);
}

.gifs__bar {
  flex: none;
  display: flex;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
}

.gifs__bar input {
  flex: 1;
  min-width: 0;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 9px 14px;
  color: var(--text);
  outline: none;
}

.gifs__close {
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 0;
  background: var(--surface-2);
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
}

.gifs__grid {
  flex: 1;
  overflow-y: auto;
  padding: 10px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

@media (min-width: 620px) { .gifs__grid { grid-template-columns: repeat(5, 1fr); } }

.gifs__item {
  padding: 0;
  border: 0;
  border-radius: 10px;
  overflow: hidden;
  background: var(--surface-3);
  aspect-ratio: 1 / 1;
}

.gifs__item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gifs__item:hover { outline: 2px solid var(--accent); }

.gifs__msg {
  grid-column: 1 / -1;
  padding: 26px 10px;
  text-align: center;
  color: var(--muted);
  font-size: 14px;
}

/* system notices in the room */
.rsys {
  align-self: center;
  max-width: 90%;
  margin: 4px 0;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 12.5px;
  text-align: center;
}

/* ---------- admin panel ---------- */

.me__section--admin { border-top: 2px solid var(--accent); }

.admin__head {
  margin: 12px 0 6px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
}

.admin__row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-2);
  margin-bottom: 6px;
}

.admin__slot {
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: 7px;
  background: var(--surface-3);
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}

.admin__who { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.admin__who b { font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.admin__who i { font-style: normal; font-size: 12px; color: var(--muted); }

.admin__acts { flex: none; display: flex; gap: 6px; }

.admin__msg {
  padding: 12px 10px;
  color: var(--muted);
  font-size: 13.5px;
}

/* ---------- people rows ---------- */

/* Full-bleed rows with hairline separators: no cards, no shadows. */
.list--rows {
  display: block;
  padding: 0;
}

.list--rows .empty { padding: 40px 20px; }

.srow {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 12px 0 0;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}

.srow:last-child { border-bottom: 0; }
.srow:hover { background: var(--surface); }

/* the whole left area opens the profile */
.srow__open {
  display: flex;
  align-items: center;
  gap: 13px;
  flex: 1;
  min-width: 0;
  padding: 12px 4px 12px 16px;
  border: 0;
  background: none;
  text-align: left;
}

.srow__avatar {
  position: relative;
  flex: none;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--surface-3);
  display: flex;
  align-items: center;
  justify-content: center;
}

.srow__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

.srow__initial {
  font-size: 24px;
  font-weight: 800;
  color: var(--accent);
}

/* Ring for people who are online. A box-shadow paints outside the element, so
   the avatar can keep clipping its image while still showing the ring. */
.srow__avatar.is-online {
  box-shadow: 0 0 0 2px #fff, 0 0 0 4.5px var(--accent);
}

.srow__dot {
  position: absolute;
  right: 0;
  bottom: 1px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--online);
  border: 2.5px solid #fff;
}

.srow__main { min-width: 0; display: flex; flex-direction: column; gap: 2px; }

.srow__top {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

/* Gender colour comes from the .g-* class the row adds; this is only the
   fallback for anyone without one. */
.srow__name {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.srow__age { flex: none; font-size: 15px; color: var(--muted); font-weight: 500; }

.srow__sub {
  font-size: 14.5px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* the action on the right, mirroring the camera button in the reference */
.srow__act {
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 0;
  background: none;
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .12s ease, color .12s ease;
}

.srow__act .ic { width: 25px; height: 25px; stroke-width: 1.9; }
.srow__act:hover { background: var(--accent); color: #fff; }
.srow__act:active { transform: scale(.94); }

.srow--enter { animation: row-in .34s cubic-bezier(.22, 1, .36, 1); }
@media (prefers-reduced-motion: reduce) { .srow--enter { animation: none; } }

.avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--surface-3);
  flex: none;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 19px;
  color: var(--muted);
  overflow: hidden;
  box-shadow: 0 0 0 2px var(--line);
}

/* subtle glow ring when online */
.row-item .avatar:has(.dot.is-online),
.avatar.is-online-ring {
  box-shadow: 0 0 0 2px rgba(23, 191, 95, .5);
}

.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar--sm { width: 34px; height: 34px; font-size: 14px; box-shadow: none; }
.avatar--lg { width: 100%; height: auto; aspect-ratio: 1; border-radius: 18px; font-size: 48px; box-shadow: none; }

.dot {
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #cfc6cd;
  border: 3px solid var(--bg);
}

.dot.is-online {
  background: var(--online);
  box-shadow: 0 0 6px rgba(23, 191, 95, .55);
}
.avatar--sm .dot { width: 10px; height: 10px; border-width: 2px; }

.row-item__main { flex: 1; min-width: 0; }

.row-item__name {
  font-weight: 650;
  font-size: 16.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: -0.01em;
  min-width: 0;
  flex-shrink: 1;
}

.g-male { color: var(--male); }
.g-female { color: var(--female); }
.g-couple { color: var(--couple); }
.g-other { color: var(--other); }

/* envelope icon before the avatar */
.row-item__env {
  flex: none;
  width: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  opacity: .7;
}
.row-item__env .ic { width: 19px; height: 19px; }

/* name + age + New badge on one line */
.row-item__top {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.row-item__age {
  color: var(--muted);
  font-size: 14px;
  font-weight: 400;
  flex: none;
}

.tag-new {
  flex: none;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #fff;
  background: linear-gradient(100deg, var(--accent), #ff6aa4);
  padding: 2px 7px;
  border-radius: 999px;
  box-shadow: 0 1px 6px rgba(255, 45, 122, .4);
}

.row-item__sub {
  color: var(--muted);
  font-size: 13.5px;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* country in its own right-aligned column */
.row-item__country {
  flex: none;
  max-width: 34%;
  color: var(--muted);
  font-size: 13px;
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-left: 8px;
}

.row-item__side { text-align: right; flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
.row-item__time { color: var(--muted); font-size: 12px; }

.pill {
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 10px;
  background: var(--accent);
  color: #fff;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
}

.list-end { padding: 18px; text-align: center; color: var(--muted); font-size: 13.5px; }

.empty { padding: 60px 26px; text-align: center; color: var(--muted); }
.empty strong { display: block; color: var(--text); font-size: 17px; margin-bottom: 6px; }

/* ---------- bar ---------- */

.bar {
  display: flex;
  align-items: center;
  gap: 4px;
  height: var(--bar);
  padding: 0 6px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  flex: none;
}

.bar__btn {
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 0;
  border-radius: 10px;
  color: var(--text);
}

.bar__title { font-weight: 600; font-size: 16px; }
.bar__spacer { flex: 1; }

.bar__peer {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  background: none;
  border: 0;
  min-width: 0;
  padding: 0 4px;
  text-align: left;
}

.bar__peerinfo { min-width: 0; }
.bar__peername { display: block; font-weight: 600; font-size: 15.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar__peerstate { display: block; font-size: 12px; color: var(--muted); }
.bar__peerstate.is-online { color: var(--online); }

/* ---------- profile layout ---------- */

.profile__grid { display: block; }

/* gallery */

.gallery { margin-bottom: 14px; }

.gallery__hero {
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: 18px;
  overflow: hidden;
  background: var(--surface-3);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-md);
}

.gallery__hero img { width: 100%; height: 100%; object-fit: cover; display: block; }

.gallery__hero--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 54px;
  font-weight: 800;
  color: var(--accent);
  background: linear-gradient(160deg, var(--surface-2), var(--surface-3));
}

.gallery__thumbs { display: flex; gap: 8px; margin-top: 8px; }

.gallery__thumb {
  width: 62px;
  height: 62px;
  padding: 0;
  border-radius: 12px;
  overflow: hidden;
  border: 2px solid transparent;
  background: var(--surface-2);
  flex: none;
  transition: border-color .12s ease;
}

.gallery__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery__thumb.is-active { border-color: var(--accent); }
.gallery__thumb:hover { border-color: var(--line-strong); }

/* fact list */

.profile__site {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  padding: 10px 14px;
  border-radius: 12px;
  background: var(--accent-soft);
  border: 1px solid var(--accent);
  color: var(--accent-deep);
  font-size: 14.5px;
  font-weight: 650;
  max-width: 100%;
  text-decoration: none;
  transition: background .12s ease, color .12s ease;
}

.profile__site:hover { background: var(--accent); color: #fff; }
.profile__site .ic { width: 17px; height: 17px; flex: none; }
.profile__site span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.field__hint {
  display: block;
  margin-top: 5px;
  font-size: 12.5px;
  color: var(--muted);
}

.profile__h {
  margin: 22px 0 10px;
  font-size: 17px;
  font-weight: 750;
  letter-spacing: -0.015em;
}

.facts {
  margin: 18px 0 0;
  padding: 0;
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
}

.fact {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  background: var(--surface);
  padding: 11px 14px;
}

.fact dt { color: var(--muted); font-size: 13.5px; }
.fact dd { margin: 0; font-weight: 600; font-size: 14.5px; text-align: right; }

/* suggestions sidebar */

.profile__side { margin-top: 22px; }

.sidecard {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 14px;
  box-shadow: var(--shadow-sm);
}

.sidecard__title {
  margin: 2px 4px 10px;
  font-size: 15.5px;
  font-weight: 750;
  letter-spacing: -0.015em;
}

.suggest {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 8px;
  border: 0;
  border-radius: 12px;
  background: none;
  text-align: left;
  transition: background .12s ease;
}

.suggest:hover { background: var(--surface-2); }
.suggest .avatar { width: 42px; height: 42px; font-size: 16px; }
.suggest__main { min-width: 0; display: flex; flex-direction: column; }

.suggest__name {
  font-weight: 650;
  font-size: 14.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.suggest__name i { font-style: normal; font-weight: 400; color: var(--muted); }

.suggest__place {
  font-size: 12.5px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Three columns once there is room: gallery, details, suggestions. */
@media (min-width: 900px) {
  .profile { padding: 24px 24px 40px; }

  .profile__grid {
    display: grid;
    grid-template-columns: 262px minmax(0, 1fr) 236px;
    gap: 24px;
    align-items: start;
    max-width: 1160px;
    margin: 0 auto;
  }

  .profile__left { position: sticky; top: 0; }
  .profile__side { margin-top: 0; position: sticky; top: 0; }

  .profile__name { font-size: 34px; }
  .facts { margin-top: 22px; }
}

/* Between tablet and desktop, drop the sidebar under the details. */
@media (min-width: 700px) and (max-width: 899px) {
  .profile__grid {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 26px;
    align-items: start;
  }
  .profile__side { grid-column: 1 / -1; }
}


/* ---------- profile ---------- */

.profile { flex: 1; overflow-y: auto; padding: 18px 16px calc(28px + env(safe-area-inset-bottom)); }
.profile__photo { margin-bottom: 16px; }

.profile__namerow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
}

.profile__name {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.05;
}

/* premium sheen on the name */
.profile__name.g-male   { background: linear-gradient(100deg, var(--male) 0%, #9cd4ff 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.profile__name.g-female { background: linear-gradient(100deg, var(--female) 0%, #ffb0d4 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.profile__name.g-couple { background: linear-gradient(100deg, var(--couple) 0%, #d9b8ff 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.profile__name.g-other  { background: linear-gradient(100deg, #6b7684 0%, #9aa5b3 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

/* online badge next to the name */
.profile__live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  padding: 4px 10px 4px 8px;
  border-radius: 999px;
  background: rgba(23, 191, 95, .12);
  border: 1px solid rgba(23, 191, 95, .3);
  color: #0f9d4f;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.profile__live i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #17bf5f;
  box-shadow: 0 0 6px rgba(23, 191, 95, .6);
  animation: live-pulse 1.8s ease-in-out infinite;
}

@keyframes live-pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .profile__live i { animation: none; } }

.profile__meta {
  color: var(--muted);
  margin-top: 8px;
  font-size: 14.5px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.profile__meta b { color: var(--text); font-weight: 600; }

.profile__bio {
  margin-top: 18px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 16px;
  line-height: 1.55;
}

.profile__bio-text {
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* Long bios are capped at five lines so they never dominate the screen or push
   the action buttons out of reach. The toggle appears only when clamping
   actually hides something. */
.profile__bio.is-clamped .profile__bio-text {
  display: -webkit-box;
  -webkit-line-clamp: 5;
  line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.profile__bio-toggle {
  margin-top: 8px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent);
  font-size: 13.5px;
  font-weight: 600;
}

.profile__actions { display: flex; gap: 10px; margin-top: 18px; }
.profile__actions .btn { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; }

/* ---------- me ---------- */

.me { padding: 18px 16px calc(28px + env(safe-area-inset-bottom)); }
.me__section { margin-top: 22px; }
.me__title { font-size: 12.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 600; margin-bottom: 10px; }
.me__actions { display: flex; flex-direction: column; gap: 10px; }
.me__actions .btn { display: flex; align-items: center; justify-content: center; gap: 8px; }
.me__token { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; color: var(--muted); word-break: break-all; background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }

/* ---------- chat ---------- */

.screen--chat { background: var(--bg); }

.thread {
  flex: 1;
  overflow-y: auto;
  padding: 16px 12px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  -webkit-overflow-scrolling: touch;
  background: var(--surface);
}

.thread__more { text-align: center; padding: 6px 0 14px; }

.bubble {
  max-width: 78%;
  padding: 9px 13px 8px;
  border-radius: 18px;
  line-height: 1.45;
  word-wrap: break-word;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
  font-size: 15.3px;
  position: relative;
  border: 1px solid transparent;
  box-shadow: var(--shadow-sm);
  animation: bubble-in .22s cubic-bezier(.22, 1, .36, 1);
}

@keyframes bubble-in {
  from { opacity: 0; transform: translateY(6px) scale(.98); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) { .bubble { animation: none; } }

/* Incoming is a plain card, outgoing carries the brand gradient. The tail is
   only drawn on the last bubble of a run, so a burst of messages reads as one
   block instead of a row of identical speech balloons. */
.bubble--in {
  align-self: flex-start;
  background: var(--surface);
  border-color: var(--line);
  color: var(--text);
  border-bottom-left-radius: 18px;
}

.bubble--out {
  align-self: flex-end;
  background: linear-gradient(135deg, #ff4d94 0%, #ff7fb4 100%);
  border-color: transparent;
  color: #fff;
  border-bottom-right-radius: 18px;
  box-shadow: 0 2px 8px rgba(255, 77, 148, .26);
}

.bubble--in.is-tail  { border-bottom-left-radius: 6px; }
.bubble--out.is-tail { border-bottom-right-radius: 6px; }

/* extra breathing room where the speaker changes */
.bubble.is-first { margin-top: 10px; }

.bubble__time {
  float: right;
  margin: 7px 0 -2px 12px;
  font-size: 10.5px;
  font-weight: 500;
  color: var(--muted);
  line-height: 1;
  opacity: .85;
}

.bubble--out .bubble__time { color: rgba(255, 255, 255, .85); }


/* photo message */
.bubble--photo { padding: 0; overflow: hidden; border-radius: 14px; }

.snapcard {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px 14px;
  min-width: 190px;
  background: none;
  border: 0;
  color: inherit;
  text-align: left;
  width: 100%;
}

.snapcard__icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: rgba(255, 45, 122, .16);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

.snapcard__label { font-size: 14.5px; font-weight: 600; }
.snapcard__sub { font-size: 12px; color: var(--muted); margin-top: 2px; }
.snapcard.is-spent .snapcard__icon { background: var(--surface-3); color: var(--muted); }
.snapcard.is-spent .snapcard__label { color: var(--muted); font-weight: 500; }

.day {
  align-self: center;
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 650;
  letter-spacing: .01em;
  background: var(--surface-3);
  border-radius: 999px;
  padding: 5px 13px;
  margin: 16px 0 8px;
}

.composer {
  display: flex;
  align-items: flex-end;
  gap: 9px;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  background: var(--surface);
  flex: none;
}

.composer textarea {
  flex: 1;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 11px 15px;
  max-height: 130px;
  outline: none;
  resize: none;
  line-height: 1.4;
}

.composer textarea:focus { border-color: var(--accent); }

.composer__send {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 0;
  background: var(--accent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

.composer__blocked {
  margin: 0;
  padding: 14px 16px calc(14px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  background: var(--surface);
  color: var(--muted);
  font-size: 14px;
  text-align: center;
}

/* ---------- toast ---------- */

.toast {
  position: fixed;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  z-index: 60;
  background: var(--surface-3);
  border: 1px solid var(--line);
  color: var(--text);
  padding: 11px 17px;
  border-radius: 999px;
  font-size: 14px;
  max-width: 88vw;
  text-align: center;
}

/* ---------- focus ---------- */

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }


/* ---------- wordmark ---------- */

.wordmark { display: flex; align-items: center; gap: 9px; }

/* The mark carries its own gradient fill, so it needs no colour from here. */
.logo-mark { width: 27px; height: 27px; flex: none; }

.wordmark__text {
  font-size: 19.5px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--text);
}

/* second half of the name in brand pink */
.wordmark__text i { font-style: normal; color: var(--accent); font-weight: 800; }

.wordmark--lg .logo-mark { width: 40px; height: 40px; }
.wordmark--lg .wordmark__text { font-size: 30px; }

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 52px;
  padding: 0 14px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  flex: none;
}

.topbar__count { font-size: 12.5px; color: var(--muted); }
.topbar__count b { color: var(--online); font-weight: 600; }

/* ---------- auth / landing ---------- */

.screen--auth { overflow-y: auto; display: block; padding: 0; border: 0; max-width: none; }

.landing {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

/* hero */

.hero {
  position: relative;
  isolation: isolate;
  color: #fff;
  padding: 44px 24px 48px;
  overflow: hidden;
  background-color: #1a0a12;
  background-image: var(--hero-image);
  background-size: cover;
  background-position: center;
}

/*
 * Two layers over the photo: a warm tint so the brand pink carries through, and
 * a darker vignette so white text stays readable wherever the image is bright.
 * Without these the headline disappears against light parts of the picture.
 */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(26, 8, 18, .58) 0%, rgba(26, 8, 18, .34) 40%, rgba(26, 8, 18, .82) 100%),
    linear-gradient(115deg, rgba(255, 45, 122, .42) 0%, rgba(160, 30, 90, .30) 55%, rgba(90, 20, 70, .42) 100%);
}

.hero__inner {
  max-width: 620px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero__brand { margin-bottom: 30px; }

.hero__brand .logo-mark {
  background: #fff;
  border-radius: 9px;
  padding: 4px;
  width: 34px;
  height: 34px;
  box-shadow: 0 4px 14px rgba(120, 20, 70, .35);
}

.hero__brand .wordmark__text { color: #fff; }
.hero__brand .wordmark__text i { color: rgba(255, 255, 255, .82); }

/* the online pill sits above the headline, as a live signal */
.hero__count {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: rgba(255, 255, 255, .13);
  border: 1px solid rgba(255, 255, 255, .28);
  backdrop-filter: blur(8px);
  border-radius: 999px;
  padding: 7px 16px;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 22px;
}

.hero__count b { color: #fff; font-weight: 800; }

.hero__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #2ee06a;
  box-shadow: 0 0 0 3px rgba(46, 224, 106, .28);
}

.hero__title {
  margin: 0 0 18px;
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.06;
  font-size: clamp(34px, 8.5vw, 58px);
  text-shadow: 0 2px 20px rgba(0, 0, 0, .35);
}

.hero__accent {
  background: linear-gradient(100deg, #ff6fae 0%, #ffd0e4 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero__lead {
  margin: 0 0 26px;
  max-width: 520px;
  font-size: 16px;
  line-height: 1.6;
  color: rgba(255, 255, 255, .88);
  text-shadow: 0 1px 12px rgba(0, 0, 0, .45);
}

.hero__feats {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 9px;
}

.hero__feats li {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13.5px;
  font-weight: 600;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .2);
  backdrop-filter: blur(6px);
  border-radius: 999px;
  padding: 7px 13px;
}

.hero__check { width: 15px; height: 15px; color: #7dffb0; stroke-width: 3; }
.hero__lock { width: 14px; height: 14px; color: #ffd0e4; }

/* login card */

.auth {
  flex: 1;
  padding: 30px 20px calc(36px + env(safe-area-inset-bottom));
  display: flex;
  justify-content: center;
  align-items: flex-start;
  background: var(--bg);
}

.auth__card { width: 100%; max-width: 420px; }

@media (min-width: 860px) {
  .auth__card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 20px;
    padding: 28px 26px 30px;
    box-shadow: var(--shadow-lg);
  }
}
.auth__brand { display: none; margin-bottom: 22px; }
.auth__note { margin: 14px 0 0; color: var(--muted); font-size: 12.5px; text-align: center; }

/* desktop: hero left, card right, both full height */
@media (min-width: 860px) {
  .landing { flex-direction: row; min-height: 100vh; }

  .hero {
    flex: 1;
    display: flex;
    align-items: center;
    padding: 56px 48px;
  }

  .hero__inner { max-width: 560px; }

  /* The form panel floats over the same photo rather than sitting on a flat
     white column, so the picture runs edge to edge like the reference. */
  .auth {
    width: 470px;
    flex: none;
    align-items: center;
    background: rgba(12, 8, 15, .88);
    backdrop-filter: blur(18px);
    border-left: 1px solid rgba(255, 255, 255, .35);
    box-shadow: -20px 0 60px rgba(0, 0, 0, .5);
  }

  .auth__brand { display: none; }
}

.segment--2 { grid-template-columns: repeat(2, 1fr); margin-bottom: 20px; }

.field__pw { position: relative; display: block; }
.field__pw input { padding-right: 46px; }

.field__reveal {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 0;
  color: var(--muted);
}

/* ---------- photo slots ---------- */

.slots { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.slot {
  position: relative;
  aspect-ratio: 1;
  border: 1px dashed var(--line);
  border-radius: 12px;
  background: var(--surface-2);
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  cursor: pointer;
}

.slot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.slot__hint { display: flex; align-items: center; justify-content: center; }

.slot__drop {
  position: absolute;
  right: 6px;
  top: 6px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 0;
  background: rgba(0, 0, 0, .62);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.slot__drop .ic { width: 16px; height: 16px; }

/* profile photo pair */



/* ---------- composer attach ---------- */

.composer__attach {
  width: 40px;
  height: 44px;
  border: 0;
  background: none;
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

/* ---------- photo viewer ---------- */

.screen--snap { z-index: 40; background: #000; }
.bar--snap { background: transparent; border-bottom: 0; }
.snap__warn { font-size: 12px; color: var(--muted); padding-right: 10px; }

.snap__stage {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 8px calc(24px + env(safe-area-inset-bottom));
  min-height: 0;
}

.snap__stage img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 12px; }

/* ---------- inbox row action ---------- */

.row-item__del {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  border: 0;
  background: none;
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

.row-item__del .ic { width: 18px; height: 18px; }