/* ==========================================================================
   CamTok — styles
   The chat interface IS the landing. The video area shows TWO stacked frames:
     top = the stranger (remote), bottom = you (local). They are equal by
     default and can be resized by dragging the divider between them.
   Body state flags drive the UI with pure CSS:
     data-mode  = video | text
     data-state = idle | searching | connected
     data-has-local = "1" once your camera is on
   Three distinct device layouts:
     - Mobile  (< 600px)   : frames fill the screen, chat as a slide-up drawer.
     - Tablet  (600-1023px): frames fill the upper area, chat stacked beneath.
     - Desktop (>= 1024px) : frames in a left column, chat sidebar on the right.
   ========================================================================== */

:root {
  --brand-1: #6d5efc;
  --brand-2: #ff4d8d;
  --ink: #12121a;
  --ink-soft: #3a3a4d;
  --muted: #6b6b80;
  --line: #e7e7ef;
  --bg: #f6f6fb;
  --card: #ffffff;
  --stage: #0d0d14;
  --stage-2: #14141f;
  --me: #6d5efc;
  --them: #ececf5;
  --danger: #ef4444;
  --next: #22c55e;
  --radius: 16px;
  --shadow: 0 10px 30px rgba(20, 20, 40, .10);
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font); color: var(--ink); background: var(--bg);
  -webkit-font-smoothing: antialiased; line-height: 1.5;
}
img { max-width: 100%; display: block; }
[hidden] { display: none !important; }

/* ---- Brand mark --------------------------------------------------------- */
.brand { display: inline-flex; align-items: center; gap: 9px; font-weight: 800; letter-spacing: -.02em; text-decoration: none; color: #fff; }
.brand .logo {
  width: 32px; height: 32px; border-radius: 9px;
  background: linear-gradient(135deg, var(--brand-1), var(--brand-2));
  display: grid; place-items: center; color: #fff; font-size: 17px;
  box-shadow: 0 6px 16px rgba(109, 94, 252, .4);
}
.brand .name { font-size: 20px; }
.brand .logo svg { width: 60%; height: 60%; }
/* Logo <-> menu-icon flip: hints that tapping the logo opens the menu.
   The gradient tile stays; only the icon flips (like turning a page). */
.brand .logo { perspective: 240px; }
.brand .logo-flip {
  position: relative; width: 100%; height: 100%;
  transform-style: preserve-3d;
  animation: ctLogoFlip 4.5s ease-in-out infinite;
}
.brand .logo-face {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
}
.brand .logo-back { transform: rotateY(180deg); }
@keyframes ctLogoFlip {
  0%, 38%  { transform: rotateY(0deg); }      /* hold: camera logo */
  50%, 88% { transform: rotateY(180deg); }    /* hold: menu (three lines) */
  100%     { transform: rotateY(360deg); }    /* flip back to the logo */
}
@media (prefers-reduced-motion: reduce) {
  .brand .logo-flip { animation: none; }
  .brand .logo-back { display: none; }        /* keep just the logo, no motion */
}
.grad { background: linear-gradient(135deg, var(--brand-1), var(--brand-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ==========================================================================
   APP SHELL
   ========================================================================== */
.app { height: 100vh; height: 100dvh; display: flex; flex-direction: column; background: var(--stage); color: #fff; overflow: hidden; }

.topbar {
  flex: none; display: flex; align-items: center; justify-content: space-between;
  padding: 12px 20px; background: rgba(255,255,255,.03); border-bottom: 1px solid rgba(255,255,255,.07);
}
.top-right { display: flex; align-items: center; gap: 20px; }
.online-pill { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700; color: #d7d7e6; background: rgba(255,255,255,.08); padding: 6px 12px; border-radius: 999px; }
.online-pill .dot { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,.25); }
.nav a { margin-left: 18px; color: #c9c9d8; text-decoration: none; font-weight: 600; font-size: 14px; }
.nav a:hover { color: #fff; }

/* ---- Stage: video column + chat --------------------------------------- */
.stage { flex: 1; min-height: 0; display: flex; }

.video-col { flex: 1; min-height: 0; min-width: 0; display: flex; flex-direction: column; }

/* Each video frame */
.vframe {
  position: relative; overflow: hidden; min-height: 0;
  flex-grow: 1; flex-basis: 0;               /* equal by default */
  background: #000;
}
.vframe video { position: relative; z-index: 0; width: 100%; height: 100%; object-fit: cover; display: none; background: #000; }

/* TV "no signal" static — shown behind the branding until a video plays. */
.tv-noise {
  position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: .4;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.5' numOctaves='1' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 480px 480px;
  animation: tv-static .7s steps(8) infinite;
}
@keyframes tv-static { from { background-position: 0 0; } to { background-position: -480px 480px; } }
/* Keep the static up until the stranger's real video frame actually appears
   (not merely when matched) — masks the black connect gap. */
body[data-remote-live="1"] #remoteFrame .tv-noise { display: none; }
@media (prefers-reduced-motion: reduce) { .tv-noise { animation: none; } }

/* Connected but the stranger sent no video (camera off / no permission): drop the
   "no-signal" static + search spinner, show a clean camera-off state, and show the
   green "Connected" badge (we ARE connected, there's just no picture). */
body[data-remote-nocam="1"] #remoteFrame .tv-noise,
body[data-remote-nocam="1"] #remoteFrame .search-logo,
body[data-remote-nocam="1"] .status-chip { display: none; }
body[data-remote-nocam="1"] #remoteFrame .conn-badge { display: inline-flex; }
.cam-off { position: absolute; inset: 0; z-index: 2; display: none; flex-direction: column;
  align-items: center; justify-content: center; gap: 12px; color: #cfcfe0; pointer-events: none; text-align: center; padding: 16px; }
.cam-off svg { width: 60px; height: 60px; opacity: .7; }
.cam-off span { font-size: 14px; font-weight: 600; }
body[data-remote-nocam="1"] #remoteFrame .cam-off { display: flex; }
/* While dragging the divider, pause the repaint-heavy static/logo animations so
   the resize stays smooth (the frozen static still shows — no visible change). */
body.dragging .tv-noise,
body.dragging .search-logo > span,
body.dragging .conn-badge i { animation-play-state: paused; }
.vframe-local video { transform: scaleX(-1); }     /* mirror your self-view */
body[data-state="connected"] #remoteVideo { display: block; }
body[data-has-local="1"] #localVideo { display: block; }

.vframe-remote { background: radial-gradient(120% 120% at 50% 30%, var(--stage-2), var(--stage)); }
.vframe-local  { background: #101019; }

/* Centered content inside a frame (branding / placeholder) */
.vframe-mid {
  position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center;
  padding: 16px; gap: 6px; color: #fff;
  text-shadow: 0 2px 8px rgba(0,0,0,.6);
}
body:not([data-state="idle"]) .brand-block { display: none; }        /* branding only while idle */
body:not([data-state="idle"]) #localPlaceholder { display: none; }   /* hide the Start overlay during a session */
body[data-has-local="1"] .me-badge { display: none; }                /* the live self-preview replaces the avatar */
/* While idle with the camera previewing, dim just behind the Start button/text for readability. */
body[data-has-local="1"][data-state="idle"] #localPlaceholder { background: radial-gradient(circle at 50% 60%, rgba(0,0,0,.5), transparent 72%); }

.pre-logo {
  width: 72px; height: 72px; border-radius: 20px; margin-bottom: 8px;
  background: linear-gradient(135deg, var(--brand-1), var(--brand-2));
  display: grid; place-items: center; color: #fff; font-size: 36px;
  box-shadow: 0 16px 40px rgba(109,94,252,.5);
}
.pre-logo svg { width: 52%; height: 52%; }
.me-badge svg { width: 28px; height: 28px; }
.fs-btn svg { width: 20px; height: 20px; }
.composer > button svg { width: 20px; height: 20px; }
.sheet-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.sheet-btn svg { width: 20px; height: 20px; }
.stage-title { font-size: clamp(20px, 2.6vw, 30px); line-height: 1.1; letter-spacing: -.03em; margin: 4px 0 2px; color: #fff; }
.stage-sub { color: #b9b9cc; max-width: 360px; margin: 0; font-size: clamp(13px, 1.6vw, 15px); }

.me-badge { width: 60px; height: 60px; border-radius: 50%; background: rgba(255,255,255,.1); display: grid; place-items: center; font-size: 30px; color: #cfcfe0; margin-bottom: 10px; }
.me-badge svg { width: 28px; height: 28px; }
.me-hint { color: #9a9ab0; font-size: 13px; max-width: 240px; margin: 8px 0 0; }

/* Premium in-frame Start button (shown in the "You" frame while idle) */
.frame-start {
  display: none; align-items: center; justify-content: center; gap: 9px;
  border: 0; cursor: pointer; font-family: var(--font); font-weight: 800;
  font-size: 16px; color: #fff; padding: 14px 30px; border-radius: 999px;
  background: linear-gradient(135deg, var(--brand-1), var(--brand-2));
  box-shadow: 0 12px 30px rgba(109,94,252,.5);
  transition: transform .08s ease, box-shadow .2s ease, filter .2s ease;
}
body[data-state="idle"] .frame-start { display: inline-flex; }
.frame-start:hover { filter: brightness(1.06); box-shadow: 0 14px 36px rgba(109,94,252,.6); }
.frame-start:active { transform: translateY(1px); }
.frame-start:disabled { opacity: .55; cursor: not-allowed; }
.frame-start svg { width: 1.25em; height: 1.25em; flex: none; }

/* Searching status chip (over the remote frame) */
.status-chip { position: absolute; inset: 0; z-index: 2; display: none; align-items: flex-end; justify-content: center; padding-bottom: 16px; pointer-events: none; }
body[data-state="searching"] .status-chip,
body[data-state="connected"]:not([data-remote-live="1"]) .status-chip { display: flex; }
.status-chip span { background: rgba(0,0,0,.55); padding: 10px 18px; border-radius: 999px; font-size: 14px; font-weight: 600; color: #fff; backdrop-filter: blur(4px); }

/* Breathing logo shown over the static while searching / connecting (until the
   stranger's real frame appears). transform+opacity only -> GPU-composited,
   no layout/paint work, so it stays smooth on any device. */
.search-logo { position: absolute; inset: 0; z-index: 2; display: none; align-items: center; justify-content: center; pointer-events: none; }
body[data-state="searching"] .search-logo,
body[data-state="connected"]:not([data-remote-live="1"]) .search-logo { display: flex; }
.search-logo > span {
  width: 84px; height: 84px; border-radius: 24px; color: #fff;
  background: linear-gradient(135deg, var(--brand-1), var(--brand-2));
  display: grid; place-items: center;
  box-shadow: 0 0 40px 6px rgba(109,94,252,.55);
  animation: breathe 1s ease-in-out infinite;
  will-change: opacity, filter;
}
.search-logo svg { width: 46%; height: 46%; }
/* Logo comes and goes — fades in sharp, fades out with a soft blur. */
@keyframes breathe {
  0%   { opacity: 0; filter: blur(6px); }
  50%  { opacity: 1; filter: blur(0); }
  100% { opacity: 0; filter: blur(6px); }
}
@media (prefers-reduced-motion: reduce) { .search-logo > span { animation: none; } }

/* Small corner label */
.vframe-tag { position: absolute; left: 10px; top: 10px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #fff; background: rgba(0,0,0,.42); padding: 4px 9px; border-radius: 7px; z-index: 3; }

/* The remote frame keeps its label + a "Connected" badge on one row. */
.vframe-tags { position: absolute; left: 10px; top: 10px; z-index: 3; display: flex; align-items: center; gap: 6px; }
.vframe-tags .vframe-tag { position: static; }
.conn-badge { display: none; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #fff; background: rgba(34, 197, 94, .92); padding: 4px 9px; border-radius: 7px; box-shadow: 0 2px 8px rgba(0, 0, 0, .3); }
.conn-badge i { width: 7px; height: 7px; border-radius: 50%; background: #fff; box-shadow: 0 0 6px rgba(255, 255, 255, .9); animation: connPulse 1.6s ease-in-out infinite; }
/* Add-friend icon in the stranger frame — same icon as the fullscreen one, but
   shown ONLY on mobile/tablet, NOT in fullscreen, and only when connected to an
   addable (signed-in) stranger. Sits right after the "Connected" badge. */
.vf-friend-btn { display: none; position: relative; align-items: center; justify-content: center;
  width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  background: linear-gradient(135deg, var(--brand-1), var(--brand-2)); color: #fff;
  box-shadow: 0 3px 10px rgba(109,94,252,.4); }
.vf-friend-btn svg { width: 16px; height: 16px; display: block; }
.vf-friend-btn .ic-add, .vf-friend-btn .ic-sent { display: grid; place-items: center; }
.vf-friend-btn .ic-sent { display: none; }
.vf-friend-btn.is-sent .ic-add { display: none; }
.vf-friend-btn.is-sent .ic-sent { display: grid; }
.vf-friend-btn.is-sent { background: rgba(34,197,94,.92); }
.vf-friend-btn.is-loading .ic-add, .vf-friend-btn.is-loading .ic-sent { visibility: hidden; }
.vf-friend-btn.is-loading::after { content: ""; position: absolute; top: 50%; left: 50%; width: 15px; height: 15px;
  margin: -7.5px 0 0 -7.5px; border-radius: 50%; border: 2px solid rgba(255,255,255,.4); border-top-color: #fff;
  animation: fsSpin .7s linear infinite; }
@media (max-width: 1023px) {
  body[data-remote-live="1"] .video-col:not(.fs-mode).can-friend #remoteFrame .vf-friend-btn,
  body[data-remote-nocam="1"] .video-col:not(.fs-mode).can-friend #remoteFrame .vf-friend-btn { display: inline-flex; }
}
@keyframes connPulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
/* Mobile + tablet only: reveal the badge once the stranger's video is live. */
@media (max-width: 1023px) {
  body[data-remote-live="1"] #remoteFrame .conn-badge { display: inline-flex; }
}
.video-col.fs-mode .conn-badge { display: none !important; }

/* TikTok-style next panel: sits just below the screen, rises up as you drag.
   GPU-composited (transform/translate3d only) so the drag never janks. */
.fs-next-peek { display: none; }
.video-col.fs-mode .fs-next-peek {
  display: flex; position: absolute; inset: 0; z-index: 2;
  align-items: center; justify-content: center;
  background: radial-gradient(120% 90% at 50% 40%, #17172a 0%, #0b0b13 70%);
  color: #fff; transform: translate3d(0, 100%, 0); will-change: transform;
}
.fs-next-inner { display: flex; flex-direction: column; align-items: center; gap: 14px; opacity: .92; }
.fs-next-logo { width: 66px; height: 66px; border-radius: 18px; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--brand-1), var(--brand-2)); box-shadow: 0 12px 30px rgba(109,94,252,.45); }
.fs-next-logo svg { width: 52%; height: 52%; }
.fs-next-inner p { margin: 0; font-weight: 700; font-size: 15px; color: #d7d7e6; }

/* Brand mark, top-left, ONLY in fullscreen (the topbar is hidden then). */
.fs-brand { display: none; }
.video-col.fs-mode .fs-brand {
  display: inline-flex; align-items: center; gap: 8px; pointer-events: none;
  /* Above the PiP (z6) so dragging the small frame up over the brand never hides
     the CamTok name — it always shows on top. pointer-events:none keeps drag free. */
  position: absolute; left: 14px; top: 14px; z-index: 9;
  font-weight: 800; letter-spacing: -.02em; color: #fff;
  text-shadow: 0 1px 6px rgba(0,0,0,.55);
}
.fs-brand .logo {
  width: 30px; height: 30px; border-radius: 9px;
  background: linear-gradient(135deg, var(--brand-1), var(--brand-2));
  display: grid; place-items: center; color: #fff;
  box-shadow: 0 6px 16px rgba(109, 94, 252, .4);
}
.fs-brand .logo svg { width: 60%; height: 60%; }
.fs-brand .name { font-size: 18px; }
/* Your own withdrawable diamonds, shown right by the brand while fullscreen.
   Only your own balance; hidden when you have none (a pure sender sees nothing). */
.fs-brand .fs-diamonds {
  display: inline-flex; align-items: center; font-size: 13px; font-weight: 800;
  color: #bfe9ff; background: rgba(10, 20, 40, .45); border: 1px solid rgba(150, 210, 255, .35);
  padding: 3px 9px; border-radius: 999px; text-shadow: none; margin-left: 2px;
}
.fs-brand .fs-diamonds[hidden] { display: none; }

/* ---- WhatsApp-style fullscreen: one frame fills, the other is a small PiP.
   Tapping the PiP swaps which frame is big. ------------------------------- */
.video-col.fs-mode { position: relative; }
.video-col.fs-mode .vsplit { display: none; }
/* touch-action:none so a slow vertical drag on the video isn't hijacked by the
   browser's native scroll — the TikTok swipe-up must own the gesture. */
.video-col.fs-mode .vframe { position: absolute; flex: none; touch-action: none; }
.video-col.fs-mode .vframe-tag { display: none; }
/* The in-frame Start button belongs to the non-fullscreen view only. */
.video-col.fs-mode .frame-start { display: none; }
/* Fullscreen: show the "Looking for someone…" chip near the TOP (just under
   the CamTok label) instead of at the bottom. */
.video-col.fs-mode .status-chip { align-items: flex-start; justify-content: center; padding-top: 60px; padding-bottom: 0; }
/* Fullscreen + idle (not started yet): a Start button centered on the big
   frame, whichever side is big. All devices. */
.fs-start-btn { display: none; }
body[data-state="idle"] .video-col.fs-mode .fs-start-btn {
  display: inline-flex; align-items: center; gap: 10px;
  position: absolute; left: 50%; top: calc(50% + 82px); transform: translateX(-50%);
  z-index: 9; cursor: pointer; border: 0; color: #fff;
  font-family: var(--font); font-weight: 800; font-size: 17px; letter-spacing: -.01em;
  padding: 16px 30px; border-radius: 16px; white-space: nowrap;
  background: linear-gradient(135deg, var(--brand-1), var(--brand-2));
  box-shadow: 0 16px 34px rgba(109,94,252,.5), 0 1px 0 rgba(255,255,255,.18) inset;
}
body[data-state="idle"] .video-col.fs-mode .fs-start-btn:active { transform: translateX(-50%) scale(.97); }
.fs-start-btn svg { width: 20px; height: 20px; }

/* Big frame = data-fs-big; fills the screen */
.video-col.fs-mode[data-fs-big="remote"] #remoteFrame,
.video-col.fs-mode[data-fs-big="local"]  #localFrame {
  inset: 0; width: 100%; height: 100%; z-index: 1; border-radius: 0;
}
/* Small frame = the other one; a tappable PiP bottom-right */
.video-col.fs-mode[data-fs-big="remote"] #localFrame,
.video-col.fs-mode[data-fs-big="local"]  #remoteFrame {
  inset: auto; right: 14px; bottom: 14px;
  width: 116px; height: 164px; z-index: 6;
  border-radius: 14px; border: 2px solid rgba(255,255,255,.75);
  box-shadow: 0 8px 24px rgba(0,0,0,.55); overflow: hidden; cursor: grab;
  touch-action: none;
}
/* Phone/tablet only: rest the PiP just ABOVE the fullscreen button line so it
   never sits over the gift/filter icons. (Desktop/mouse is left untouched.
   The touch + large-screen case is handled inside the desktop block below so
   it wins over the desktop bottom:22px default.) */
@media (pointer: coarse) and (max-width: 1023px) {
  .video-col.fs-mode[data-fs-big="remote"] #localFrame,
  .video-col.fs-mode[data-fs-big="local"]  #remoteFrame { bottom: 62px; }
}
/* ---- Chat while fullscreen --------------------------------------------
   The real #messages + #composer nodes are moved into the video column on
   enter (so the list is the SAME one shared with the non-fullscreen view),
   shown as a small bottom-left overlay, toggled by the chat button. */
.fs-chat-btn, .fs-av-btn { display: none; }
.video-col.fs-mode .fs-chat-btn,
.video-col.fs-mode .fs-av-btn {
  display: grid; place-items: center; position: absolute; bottom: 14px;
  z-index: 8; width: 40px; height: 40px; border: 0; border-radius: 50%;
  background: rgba(0,0,0,.5); color: #fff; cursor: pointer;
  box-shadow: 0 6px 18px rgba(0,0,0,.45);
}
.video-col.fs-mode .fs-chat-btn { left: 14px; }
.video-col.fs-mode .fs-mic-btn { left: 62px; }
.video-col.fs-mode .fs-sound-btn { left: 110px; }
.video-col.fs-mode .fs-cam-btn { left: 158px; }
.video-col.fs-mode .fs-filter-btn { left: 206px; }   /* after camera switch (mobile/tablet) */
.video-col.fs-mode .fs-gift-btn { left: 254px; }     /* after filters (mobile/tablet) */
/* Add-friend icon: fullscreen only, and only when the partner is addable. */
.video-col.fs-mode .fs-friend-btn { left: 302px; display: none; }
.video-col.fs-mode.can-friend .fs-friend-btn { display: grid; }
.fs-friend-btn .ic-add, .fs-friend-btn .ic-sent { display: grid; place-items: center; }
.fs-friend-btn .ic-sent { display: none; }
.fs-friend-btn.is-sent .ic-add { display: none; }
.fs-friend-btn.is-sent .ic-sent { display: grid; }
.video-col.fs-mode .fs-friend-btn.is-sent { background: rgba(34,197,94,.62); }
.video-col.fs-mode .fs-friend-btn.is-sent:hover { background: rgba(34,197,94,.75); }
/* Small spinner over the icon while the friend request is sending. */
.fs-friend-btn.is-loading .ic-add, .fs-friend-btn.is-loading .ic-sent { visibility: hidden; }
.fs-friend-btn.is-loading::after {
  content: ""; position: absolute; top: 50%; left: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px;
  border-radius: 50%; border: 2.5px solid rgba(255,255,255,.35); border-top-color: #fff;
  animation: fsSpin .7s linear infinite;
}
@keyframes fsSpin { to { transform: rotate(360deg); } }
/* Desktop non-fullscreen gift button: only once a chat has started (not idle). */
body[data-state="idle"] #pcGift { display: none; }
/* Next button is desktop-fullscreen only; hidden on phones/tablets. */
.video-col.fs-mode .fs-next-btn { display: none; }
.video-col.fs-mode .fs-chat-btn:hover,
.video-col.fs-mode .fs-av-btn:hover { background: rgba(0,0,0,.68); }
.fs-chat-btn svg, .fs-av-btn svg { width: 19px; height: 19px; }
/* Muted state: switch to the "off" glyph and tint the button red. */
.fs-av-btn .ic-off { display: none; }
.fs-av-btn.is-off .ic-on { display: none; }
.fs-av-btn.is-off .ic-off { display: block; }
.video-col.fs-mode .fs-av-btn.is-off { background: rgba(200,40,40,.6); }
.video-col.fs-mode .fs-av-btn.is-off:hover { background: rgba(200,40,40,.75); }
.fs-chat-btn .fs-chat-ico-close { display: none; }
.video-col.fs-chat-open .fs-chat-btn .fs-chat-ico-open { display: none; }
.video-col.fs-chat-open .fs-chat-btn .fs-chat-ico-close { display: block; }
/* Messages: ALWAYS visible in fullscreen, small, previewed just ABOVE the
   chat icon at the bottom-left. */
.video-col.fs-mode #messages {
  display: flex; position: absolute; left: 14px; bottom: 60px; z-index: 8;
  width: min(56%, 220px); height: min(30%, 200px);
  background: transparent; border-radius: 14px; padding: 12px; pointer-events: auto;
  transition: transform .2s ease, opacity .2s ease;
  /* pan-y: keep vertical scroll for the browser, hand horizontal swipes (hide)
     to our JS so even a slow left drag is captured, not hijacked as scroll. */
  touch-action: pan-y;
}
/* Swiped left to hide (phone/tablet); the reveal tab brings it back. */
.video-col.fs-mode.fs-chat-hidden #messages { transform: translateX(-125%); opacity: 0; pointer-events: none; }
/* Reveal / collapse tabs — hidden by default; shown only in fullscreen. */
.fs-chat-reveal, .fs-chat-hide { display: none; }
.video-col.fs-mode.fs-chat-hidden .fs-chat-reveal {
  display: grid; place-items: center; position: absolute; left: 0; bottom: 130px;
  z-index: 9; width: 26px; height: 46px; border: 0; padding: 0;
  border-radius: 0 12px 12px 0; background: rgba(0,0,0,.5); color: #fff;
  cursor: pointer; box-shadow: 0 4px 14px rgba(0,0,0,.4); touch-action: none;
}
.video-col.fs-mode.fs-chat-hidden .fs-chat-reveal:hover { background: rgba(0,0,0,.68); }
.fs-chat-reveal svg { width: 18px; height: 18px; }
/* Stranger's messages are shown in italics to set them apart from yours. */
.video-col.fs-mode #messages .msg-them .bubble { background: rgba(255,255,255,.94); color: var(--ink); font-style: italic; }
.video-col.fs-mode #messages .msg-system { color: #eaeaf2; text-shadow: 0 1px 2px rgba(0,0,0,.6); }
/* Both people's messages sit on the LEFT (two colors keep them apart) so the
   list stays narrow and clear of the small PiP frame at bottom-right. Your own
   messages are nudged a little to the right so the two are easy to tell apart. */
.video-col.fs-mode #messages .msg-me { justify-content: flex-start; padding-left: 30px; }
.video-col.fs-mode #messages .msg-me .bubble { border-bottom-right-radius: 16px; border-bottom-left-radius: 5px; }

/* Composer: hidden until the chat button opens it; it appears just above the
   chat icon and the message preview lifts above it. */
.video-col.fs-mode #composer { display: none; }
.video-col.fs-mode.fs-chat-open #composer {
  display: flex; position: absolute; left: 14px; z-index: 8;
  width: min(56%, 220px); transform: none; border: 0; border-radius: 14px;
  background: rgba(255,255,255,.96); box-shadow: 0 8px 24px rgba(0,0,0,.4);
  /* Sit above the on-screen keyboard when it's open (VirtualKeyboard API sets
     env(keyboard-inset-height)); otherwise dock above the chat icon. */
  bottom: max(72px, calc(10px + env(keyboard-inset-height, 0px)));
}
.video-col.fs-mode.fs-chat-open #messages { bottom: max(132px, calc(72px + env(keyboard-inset-height, 0px))); }
/* Emoji picker opens from the composer's LEFT edge in fullscreen (the composer
   is left-aligned and narrow), so it never clips off the left wall. */
.video-col.fs-mode #composer .emoji-panel { left: -2px; right: auto; }

/* Fullscreen button: shown on the big frame (acts as exit), hidden on the PiP */
.video-col.fs-mode .fs-btn { display: grid; }
.video-col.fs-mode[data-fs-big="remote"] #localFrame .fs-btn,
.video-col.fs-mode[data-fs-big="local"]  #remoteFrame .fs-btn { display: none; }

/* Fullscreen button (per frame) */
.fs-btn {
  position: absolute; right: 10px; top: 10px; z-index: 4;
  width: 38px; height: 38px; border: 0; border-radius: 10px;
  background: rgba(0,0,0,.45); color: #fff; font-size: 18px; line-height: 1;
  cursor: pointer; display: grid; place-items: center;
}
.fs-btn:hover { background: rgba(0,0,0,.65); }
/* On desktop only the stranger (remote) frame can go fullscreen. */
@media (min-width: 1024px) { .vframe-local .fs-btn { display: none; } }

/* Draggable divider between the two frames */
.vsplit { flex: 0 0 10px; background: rgba(255,255,255,.07); cursor: row-resize; position: relative; touch-action: none; z-index: 6; }
/* Invisible grab zone taller than the visible bar so the divider is easy to
   catch even when a frame is dragged very small (the visible 10px bar and the
   handle below are unchanged). */
.vsplit::before { content: ""; position: absolute; left: 0; right: 0; top: -11px; bottom: -11px; }
.vsplit::after { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 40px; height: 4px; border-radius: 4px; background: rgba(255,255,255,.4); z-index: 1; }
.vsplit:hover { background: rgba(255,255,255,.14); }
/* No video surface in text mode -> hide the whole column */
body[data-mode="text"] .video-col { display: none; }

/* Vertical divider between the video column and the chat (DESKTOP only) */
.colsplit { display: none; }

/* ---- Chat panel -------------------------------------------------------- */
.chat-panel { display: flex; flex-direction: column; background: #fff; color: var(--ink); min-height: 0; position: relative; }

/* Centered Start button shown in the chat panel while text chat is idle.
   Solid, high-contrast, premium look — no gradient. */
.text-start { display: none; position: absolute; inset: 0; align-items: center; justify-content: center; z-index: 6; pointer-events: none; }
body[data-mode="text"][data-state="idle"] .text-start { display: flex; }
.text-start-btn {
  pointer-events: auto; display: inline-flex; align-items: center; gap: 10px;
  background: var(--brand-1); color: #fff; border: 0; cursor: pointer;
  font-family: var(--font); font-size: 16px; font-weight: 800; letter-spacing: -.01em;
  padding: 15px 28px; border-radius: 14px;
  box-shadow: 0 12px 26px rgba(109,94,252,.38), 0 1px 0 rgba(255,255,255,.18) inset;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.text-start-btn svg { width: 20px; height: 20px; }
.text-start-btn:hover { background: #5b4cf0; transform: translateY(-2px); box-shadow: 0 18px 34px rgba(109,94,252,.46); }
.text-start-btn:active { transform: translateY(0); box-shadow: 0 8px 16px rgba(109,94,252,.36); }

/* Status banner at the top of the chat panel (DESKTOP ONLY): mirrors the
   searching / Connected / error state so the user sees it beside the chat. */
.chat-status { display: none; flex: 0 0 auto; align-items: center; gap: 10px; padding: 10px 16px; font-size: 13px; font-weight: 700; border-bottom: 1px solid var(--line); }
.chat-status #chatStatusText { display: inline-flex; align-items: center; gap: 8px; }
.chat-status #chatStatusText::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 3px rgba(0,0,0,.06); }
.chat-status[data-kind="search"]     { color: var(--brand-1); background: rgba(109,94,252,.08); }
.chat-status[data-kind="search"] #chatStatusText::before,
.chat-status[data-kind="connecting"] #chatStatusText::before { animation: connPulse 1.2s ease-in-out infinite; }
.chat-status[data-kind="connecting"] { color: var(--muted); background: rgba(0,0,0,.04); }
.chat-status[data-kind="connected"]  { color: #16a34a; background: rgba(34,197,94,.10); }
.chat-status[data-kind="error"]      { color: var(--danger); background: rgba(239,68,68,.10); }

/* A default stranger avatar pinned to the right end of the text-chat banner,
   with a small green presence dot to signal that someone is there. */
.chat-status-av { display: none; position: relative; margin-left: auto; width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(135deg, var(--brand-1), var(--brand-2)); color: #fff; align-items: center; justify-content: center; box-shadow: 0 2px 6px rgba(0,0,0,.18); flex: 0 0 auto; }
.chat-status-av svg { width: 20px; height: 20px; display: block; }
.chat-status-av::after { content: ""; position: absolute; right: -1px; bottom: -1px; width: 9px; height: 9px; border-radius: 50%; background: #22c55e; border: 2px solid #fff; }
body[data-mode="text"] .chat-status[data-kind="connected"] .chat-status-av { display: flex; }

/* Desktop: banner shows in both video and text modes. */
@media (min-width: 1024px) { .chat-status:not([hidden]) { display: flex; } }
/* Mobile + tablet: only text mode gets the banner (video mode has the overlay). */
body[data-mode="text"] .chat-status:not([hidden]) { display: flex; }
.messages { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 8px; contain: paint; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.msg { display: flex; }
.msg .bubble { max-width: 78%; padding: 9px 14px; border-radius: 16px; font-size: 15px; word-wrap: break-word; overflow-wrap: anywhere; }
img.emoji { width: 1.25em; height: 1.25em; margin: 0 .05em; vertical-align: -.25em; display: inline; }
.msg-me { justify-content: flex-end; }
.msg-me .bubble { background: var(--me); color: #fff; border-bottom-right-radius: 5px; }
.msg-them .bubble { background: var(--them); color: var(--ink); border-bottom-left-radius: 5px; }
.msg-system { justify-content: center; color: var(--muted); font-size: 13px; text-align: center; padding: 4px 8px; }
/* A sent gift, shown as a small chat message: little logo + its coin price. */
.msg .bubble-gift { display: inline-flex; align-items: center; gap: 7px; padding: 6px 10px; }
.gift-msg-img { width: 30px; height: 30px; object-fit: contain; pointer-events: none; flex: none; }
.gift-msg-price { display: inline-flex; align-items: center; gap: 3px; font-weight: 800; font-size: 12px; color: #ffcf3f; background: rgba(0, 0, 0, .5); padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.gift-msg-price .gm-c { font-size: 11px; line-height: 1; }
.composer { display: flex; gap: 8px; padding: 10px; border-top: 1px solid var(--line); background: #fff; position: relative; }
.input-wrap { position: relative; flex: 1; display: flex; }
.composer input { flex: 1; width: 100%; border: 1px solid var(--line); border-radius: 12px; padding: 12px 46px 12px 14px; font-size: 16px; font-family: var(--font); outline: none; }
.emoji-in-input { position: absolute; right: 5px; top: 50%; transform: translateY(-50%); border: 0; background: none; padding: 5px; cursor: pointer; color: var(--ink); display: inline-flex; align-items: center; justify-content: center; border-radius: 9px; }
.emoji-in-input svg { width: 22px; height: 22px; display: block; }
.emoji-in-input:hover, .emoji-in-input:active { color: #000; }
.composer input:focus { border-color: var(--brand-1); }
.composer > button { border: 0; background: var(--brand-1); color: #fff; font-weight: 800; padding: 0 18px; border-radius: 12px; cursor: pointer; font-size: 17px; display: inline-flex; align-items: center; justify-content: center; }
.composer > button:disabled { opacity: .5; cursor: not-allowed; }

/* ---- Control bar ------------------------------------------------------- */
.controls { flex: none; display: flex; align-items: center; gap: 14px; padding: 14px 20px; background: rgba(255,255,255,.03); border-top: 1px solid rgba(255,255,255,.07); }
.mode-toggle { display: inline-flex; background: rgba(255,255,255,.08); border-radius: 12px; padding: 4px; gap: 4px; flex: none; }
.mode-btn { border: 0; background: transparent; color: #c9c9d8; cursor: pointer; font-family: var(--font); font-weight: 800; font-size: 15px; padding: 10px 22px; border-radius: 9px; transition: all .15s ease; }
.mode-btn.is-active { background: #fff; color: var(--brand-1); box-shadow: 0 3px 10px rgba(0,0,0,.2); }
body:not([data-state="idle"]) .mode-toggle { opacity: .45; pointer-events: none; }

.action-btns { display: flex; gap: 12px; align-items: center; margin-left: auto; }
.ctrl { border: 0; cursor: pointer; font-family: var(--font); font-weight: 800; border-radius: 14px; color: #fff; font-size: 19px; padding: 15px 40px; min-width: 140px; transition: transform .06s ease, opacity .2s ease, box-shadow .2s ease; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.ctrl svg { width: 1.15em; height: 1.15em; flex: none; }
.icon-btn svg { width: 22px; height: 22px; }
.ctrl:active { transform: translateY(1px); }
.ctrl-start { background: linear-gradient(135deg, var(--brand-1), var(--brand-2)); box-shadow: 0 12px 28px rgba(109,94,252,.42); }
.ctrl-next  { background: var(--next); box-shadow: 0 10px 24px rgba(34,197,94,.4); }
.ctrl-stop  { background: var(--danger); box-shadow: 0 10px 24px rgba(239,68,68,.4); }
.ctrl-ghost { background: rgba(255,255,255,.14); min-width: 0; }
.ctrl-mode { background: rgba(255,255,255,.16); }
.icon-btn { min-width: 0; }
body[data-state="idle"] #stopBtn, body[data-state="idle"] #nextBtn, body[data-state="idle"] #pcSettings { display: none; }
body:not([data-state="idle"]) #startBtn { display: none; }
.chat-toggle { display: none; }
.m-controls { display: none; }

/* Emoji picker panel — anchored to the input, sits just above the composer and
   moves with it (page scroll, keyboard, layout changes) like WhatsApp. */
.emoji-panel { position: absolute; right: 10px; bottom: calc(100% + 8px); z-index: 40; border-radius: 16px; overflow: hidden; box-shadow: 0 16px 40px rgba(0,0,0,.24); }
.emoji-panel emoji-picker {
  width: min(340px, calc(100vw - 24px));
  height: min(360px, 46vh);
  --background: #fff;
  --border-color: var(--line);
  --indicator-color: var(--brand-1);
  --input-border-color: var(--line);
  --input-background: #fff;
  --input-font-color: var(--ink);
  --input-placeholder-color: var(--muted);
  --button-active-background: rgba(109,94,252,.14);
  --button-hover-background: rgba(109,94,252,.10);
}

/* ---- Mobile settings bottom sheet -------------------------------------- */
.sheet { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: flex-end; justify-content: center; background: rgba(0,0,0,.45); }
.sheet-inner { width: 100%; max-width: 460px; background: #fff; border-top-left-radius: 22px; border-top-right-radius: 22px; padding: 16px 16px calc(16px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 10px; }
.sheet-btn { border: 0; border-radius: 12px; padding: 15px; font-family: var(--font); font-weight: 800; font-size: 16px; cursor: pointer; background: #f0f0f6; color: var(--ink); }
.sheet-danger { background: var(--danger); color: #fff; }
.sheet-cancel { background: transparent; color: var(--muted); }
.sheet-row { display: flex; flex-direction: column; gap: 6px; }
.sheet-label { font-weight: 800; font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.sheet-select { border: 1px solid var(--line); border-radius: 12px; padding: 13px 12px; font-size: 15px; font-family: var(--font); background: #fff; color: var(--ink); }
/* Stranger-volume slider (can boost above 100%). */
.vol-range { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 999px; background: var(--line); outline: none; margin-top: 6px; }
.vol-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 22px; height: 22px; border-radius: 50%; background: linear-gradient(135deg, var(--brand-1), var(--brand-2)); cursor: pointer; box-shadow: 0 2px 6px rgba(0,0,0,.25); }
.vol-range::-moz-range-thumb { width: 22px; height: 22px; border: 0; border-radius: 50%; background: var(--brand-1); cursor: pointer; }

/* ---- Filters & effects sheet ------------------------------------------------
   A SEPARATE bottom sheet from Settings. Deliberately TRANSLUCENT (glassy panel,
   no dark scrim) so the live self-view behind it stays visible while the user
   tries filters — they see the effect update in real time. */
.filter-sheet { background: transparent; }        /* no dark scrim -> the live self-view stays visible behind */
.filter-inner {
  background: rgba(16,16,26,.58);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  backdrop-filter: blur(16px) saturate(1.2);
  color: #fff;
  box-shadow: 0 -10px 40px rgba(0,0,0,.35);
  border-top: 1px solid rgba(255,255,255,.14);
  gap: 14px;
  max-height: 72vh; overflow-y: auto;
}
.filter-head { display: flex; align-items: center; justify-content: space-between; }
.filter-title { font-weight: 900; font-size: 17px; letter-spacing: -.01em; }
.filter-head-right { display: flex; align-items: center; gap: 12px; }
/* On/Off switch — turn the effect off (back to the raw, lag-free camera) without
   leaving the popup or the call. */
.filter-toggle { border: 0; background: transparent; padding: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; }
.filter-toggle .ft-label { font-size: 12.5px; font-weight: 800; color: rgba(255,255,255,.7); text-transform: uppercase; letter-spacing: .04em; min-width: 22px; text-align: right; }
.ft-track { width: 46px; height: 27px; border-radius: 999px; background: rgba(255,255,255,.24); position: relative; transition: background .18s ease; }
.ft-knob { position: absolute; top: 3px; left: 3px; width: 21px; height: 21px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.35); transition: transform .18s ease; }
.filter-toggle.is-on .ft-label { color: #fff; }
.filter-toggle.is-on .ft-track { background: linear-gradient(135deg, var(--brand-1), var(--brand-2)); }
.filter-toggle.is-on .ft-knob { transform: translateX(19px); }
.filter-x { width: 34px; height: 34px; border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(255,255,255,.14); color: #fff; display: inline-flex; align-items: center; justify-content: center; }
.filter-x svg { width: 18px; height: 18px; }
.filter-x:active { background: rgba(255,255,255,.26); }

.filter-note {
  margin: -2px 0 0; font-size: 13px; line-height: 1.4; font-weight: 800; color: #ffd66b;
  background: rgba(255,193,7,.14); border: 1px solid rgba(255,193,7,.32);
  border-radius: 10px; padding: 9px 11px;
}
.filter-note::before { content: "⚠ "; }
/* Preset chips — a horizontally scrollable row (touch devices swipe it). */
.filter-presets { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.filter-presets::-webkit-scrollbar { display: none; }
/* Mouse/desktop can't swipe the row and the scrollbar is hidden -> WRAP the chips
   to multiple lines instead so every preset is reachable without scrolling. */
@media (hover: hover) and (pointer: fine) {
  .filter-presets { flex-wrap: wrap; overflow-x: visible; }
}
.filter-chip {
  flex: 0 0 auto; border: 1.5px solid rgba(255,255,255,.22); border-radius: 999px;
  padding: 9px 15px; font-family: var(--font); font-weight: 800; font-size: 13.5px;
  background: rgba(255,255,255,.08); color: #fff; cursor: pointer; white-space: nowrap;
  transition: transform .08s ease, background .15s ease, border-color .15s ease;
}
.filter-chip:active { transform: scale(.95); }
.filter-chip.is-on {
  border-color: transparent;
  background: linear-gradient(135deg, var(--brand-1), var(--brand-2));
  box-shadow: 0 6px 16px rgba(109,94,252,.4);
}

/* Adjustment sliders. */
.filter-sliders { display: flex; flex-direction: column; gap: 12px; }
.filter-slider-row { display: flex; flex-direction: column; gap: 6px; }
.filter-slider-head { display: flex; justify-content: space-between; font-size: 12.5px; font-weight: 800; color: rgba(255,255,255,.82); text-transform: uppercase; letter-spacing: .04em; }
.filter-slider-head .val { color: #fff; font-variant-numeric: tabular-nums; }
.filter-range { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 999px;
  background: rgba(255,255,255,.2); outline: none; }
.filter-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 22px; height: 22px; border-radius: 50%;
  background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.4); cursor: pointer; }
.filter-range::-moz-range-thumb { width: 22px; height: 22px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.4); cursor: pointer; }

.filter-actions { display: flex; gap: 10px; }
.filter-reset, .filter-done { flex: 1; border: 0; border-radius: 12px; padding: 14px; font-family: var(--font); font-weight: 800; font-size: 15px; cursor: pointer; }
.filter-reset { background: rgba(255,255,255,.12); color: #fff; }
.filter-reset:active { background: rgba(255,255,255,.22); }
.filter-done { background: linear-gradient(135deg, var(--brand-1), var(--brand-2)); color: #fff; }

/* Text mode has no camera/audio -> hide camera/sound/mic controls (keep the Settings button). */
body[data-mode="text"] #setSwitchCam,
body[data-mode="text"] #setFilters,
body[data-mode="text"] #setSound,
body[data-mode="text"] #setMic,
body[data-mode="text"] #strVolRow,
body[data-mode="text"] #camRow { display: none; }

/* ==========================================================================
   DESKTOP (>= 1024px): video column left, chat sidebar right
   ========================================================================== */
@media (min-width: 1024px) {
  .stage { flex-direction: row; }
  .video-col { flex: 0 0 var(--vcol-w, 500px); }
  .chat-panel { flex: 1; border-left: 1px solid rgba(0,0,0,.06); }
  body[data-mode="text"] .chat-panel { flex: 1; }

  .colsplit {
    display: block; flex: 0 0 8px; align-self: stretch;
    background: rgba(255,255,255,.06); cursor: col-resize; position: relative; touch-action: none;
  }
  .colsplit::after { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 4px; height: 42px; border-radius: 4px; background: rgba(255,255,255,.35); }
  .colsplit:hover { background: rgba(255,255,255,.14); }
  body[data-mode="text"] .colsplit { display: none; }

  /* Bigger PiP in fullscreen on desktop (large screens have room for it). */
  .video-col.fs-mode[data-fs-big="remote"] #localFrame,
  .video-col.fs-mode[data-fs-big="local"]  #remoteFrame {
    right: 22px; bottom: 22px; width: 260px; height: 350px;
  }
  /* Large TOUCH screens (e.g. a tablet in landscape) get the 82px button line,
     so lift the PiP above it here too — mouse desktops keep bottom:22px. */
  @media (pointer: coarse) {
    .video-col.fs-mode[data-fs-big="remote"] #localFrame,
    .video-col.fs-mode[data-fs-big="local"]  #remoteFrame { bottom: 108px; }
  }

  /* Fullscreen chat on desktop: the screen is big, so make the list wider and
     much taller (capped at 60% so it never reaches the CamTok label up top),
     and enlarge the chat button to suit a mouse. */
  .video-col.fs-mode #messages { width: 340px; height: min(60%, 560px); bottom: 78px; }
  .video-col.fs-mode.fs-chat-open #messages { bottom: 138px; }
  .video-col.fs-mode.fs-chat-open #composer { width: 340px; }
  /* All three bottom buttons the same size on desktop. */
  .video-col.fs-mode .fs-chat-btn,
  .video-col.fs-mode .fs-av-btn { width: 82px; height: 82px; }
  .video-col.fs-mode .fs-chat-btn svg,
  .video-col.fs-mode .fs-av-btn svg { width: 38px; height: 38px; }
  .video-col.fs-mode .fs-mic-btn { left: 108px; }
  .video-col.fs-mode .fs-sound-btn { left: 202px; }
  /* Camera switch is pointless on desktop -> hide it there. */
  .video-col.fs-mode .fs-cam-btn { display: none; }
  /* Filters button sits where camera-switch would be (after sound) on desktop. */
  .video-col.fs-mode .fs-filter-btn { left: 296px; }
  /* Next button (desktop fullscreen only), tinted green like the main Next. */
  .video-col.fs-mode .fs-next-btn { display: grid; left: 390px; background: rgba(34,197,94,.62); }
  .video-col.fs-mode .fs-next-btn:hover { background: rgba(34,197,94,.8); }
  /* Gift button sits after Next on desktop fullscreen. */
  .video-col.fs-mode .fs-gift-btn { left: 484px; }
  /* Add-friend icon sits after Gift on desktop fullscreen. */
  .video-col.fs-mode .fs-friend-btn { left: 578px; }
  .video-col.fs-mode .fs-friend-btn.is-loading::after { width: 32px; height: 32px; margin: -16px 0 0 -16px; border-width: 3px; }
  /* Push the fullscreen Start button a little lower on desktop. */
  body[data-state="idle"] .video-col.fs-mode .fs-start-btn { top: calc(50% + 112px); }

  /* Slim, subtle scrollbar for the fullscreen chat list (the default is ugly). */
  .video-col.fs-mode #messages { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.28) transparent; }
  .video-col.fs-mode #messages::-webkit-scrollbar { width: 6px; }
  .video-col.fs-mode #messages::-webkit-scrollbar-track { background: transparent; }
  .video-col.fs-mode #messages::-webkit-scrollbar-thumb { background: rgba(255,255,255,.28); border-radius: 3px; }
  .video-col.fs-mode #messages::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.42); }

  /* Collapse ("<", by the list) and reveal (">", on the left wall) tabs. */
  .video-col.fs-mode .fs-chat-hide {
    display: grid; place-items: center; position: absolute; left: 356px; top: 50%;
    transform: translateY(-50%); z-index: 9; width: 26px; height: 52px; border: 0; padding: 0;
    border-radius: 13px; background: rgba(0,0,0,.5); color: #fff; cursor: pointer;
    box-shadow: 0 4px 14px rgba(0,0,0,.4);
  }
  .video-col.fs-mode.fs-chat-hidden .fs-chat-hide { display: none; }
  .video-col.fs-mode .fs-chat-hide:hover { background: rgba(0,0,0,.68); }
  .video-col.fs-mode .fs-chat-hide svg { width: 18px; height: 18px; }
  .video-col.fs-mode.fs-chat-hidden .fs-chat-reveal {
    top: 50%; bottom: auto; transform: translateY(-50%); width: 26px; height: 52px;
  }
}

/* ==========================================================================
   MOBILE + TABLET (< 1024px): video fills the screen, chat overlays it, and
   dedicated touch controls (two Start buttons + camera-switch when idle;
   Stop / Settings / Chat / Next when active). The Chat button opens the
   keyboard with a docked input; sending or closing the keyboard hides it.
   ========================================================================== */
@media (max-width: 1023px) {
  .topbar { padding: 10px 14px; }
  .brand .name { font-size: 18px; }
  .nav { display: none; }

  /* Swap desktop controls for the touch controls */
  .pc-only { display: none !important; }
  .m-controls { display: flex; width: 100%; gap: 10px; align-items: center; justify-content: center; flex-wrap: wrap; }
  body[data-state="idle"] .m-active { display: none; }
  body:not([data-state="idle"]) .m-idle { display: none; }

  /* Text chat with the keyboard open: hide the control bar so Stop/Next can't
     be tapped by accident next to Send. It returns the moment the keyboard
     closes. */
  body.text-kb-open .controls { display: none; }

  /* Text mode: the camera-switch button is useless (the emoji lives inside the
     input now), so hide it. Video mode keeps the camera switch. */
  body[data-mode="text"] #camSwitchBtn { display: none; }

  /* Video fills the stage; chat overlays the bottom */
  .stage { position: relative; }
  .video-col { position: absolute; inset: 0; }
  .colsplit { display: none; }

  .chat-panel {
    position: absolute; left: 0; right: 0; bottom: 0; top: auto;
    background: transparent; pointer-events: none; border: 0; box-shadow: none;
    height: auto; max-height: min(34%, 220px); z-index: 7;
    display: flex; flex-direction: column; justify-content: flex-end;
  }
  .messages { flex: 0 1 auto; pointer-events: auto; background: linear-gradient(to top, rgba(0,0,0,.5), rgba(0,0,0,0)); padding: 34px 12px 12px; }
  /* Stranger dragged tall -> hide the chat message overlay so it doesn't jam
     over the tiny "You" frame. It returns when dragged back up. Video only
     (keeps the docked composer working). */
  body[data-mode="video"].stranger-tall .messages { display: none; }
  .msg-them .bubble { background: rgba(255,255,255,.94); }
  .msg-system { color: #eaeaf2; text-shadow: 0 1px 2px rgba(0,0,0,.6); }

  /* Composer docked to the bottom; hidden until the Chat button opens it */
  .composer {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; pointer-events: auto;
    transform: translateY(130%); transition: transform .22s ease;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  }
  body.chat-input-open .composer { transform: translateY(0); }

  /* Text mode: solid chat panel, composer always visible */
  body[data-mode="text"] .chat-panel { position: static; background: #fff; pointer-events: auto; max-height: none; flex: 1; justify-content: flex-start; }
  body[data-mode="text"] .messages { background: #fff; padding: 16px; flex: 1; }
  body[data-mode="text"] .msg-them .bubble { background: var(--them); }
  body[data-mode="text"] .msg-system { color: var(--muted); text-shadow: none; }
  body[data-mode="text"] .composer { position: relative; transform: none; }

  /* Control sizing */
  .controls { padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); }
  .ctrl { font-size: 16px; padding: 15px 10px; }
  .ctrl-start.m-idle, .ctrl-mode.m-idle, .m-active.ctrl-next { flex: 1; min-width: 0; }
  /* Keep the two idle mode buttons on ONE line so their height never grows on
     small phones; the label auto-shrinks with the viewport instead. */
  .ctrl-start.m-idle, .ctrl-mode.m-idle { white-space: nowrap; font-size: clamp(12px, 3.4vw, 16px); }
  .icon-btn { flex: 0 0 auto; width: 54px; padding: 15px 0; font-size: 19px; }
  .stage-sub { max-width: 260px; }

  /* Fullscreen chat preview: slightly smaller text on phones/tablets. */
  .video-col.fs-mode #messages .bubble { font-size: 13px; padding: 7px 11px; }
  .video-col.fs-mode #messages .msg-system { font-size: 12px; }
}

/* ---- Auto-update countdown toast --------------------------------------- */
.update-toast {
  position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%);
  z-index: 9999; display: flex; align-items: center; gap: 12px;
  background: #14141f; color: #fff; border: 1px solid rgba(255,255,255,.14);
  padding: 12px 16px; border-radius: 14px; box-shadow: 0 12px 30px rgba(0,0,0,.5);
  font-size: 14px; font-weight: 600; max-width: calc(100% - 24px);
}
.ut-btn { border: 0; background: linear-gradient(135deg, var(--brand-1), var(--brand-2)); color: #fff; font-weight: 800; padding: 8px 14px; border-radius: 10px; cursor: pointer; font-size: 13px; }

/* ==========================================================================
   SEO CONTENT (below the app)
   ========================================================================== */
.seo { background: var(--bg); color: var(--ink); }
.section { max-width: 1120px; margin: 0 auto; padding: 46px 20px; }
.section h2 { font-size: clamp(22px, 3.4vw, 30px); letter-spacing: -.02em; text-align: center; margin: 0 0 8px; }
.section .sub { text-align: center; color: var(--muted); margin: 0 auto 28px; max-width: 620px; }
.cards { display: grid; gap: 16px; grid-template-columns: repeat(3, 1fr); }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow); }
.card .ic { font-size: 26px; margin-bottom: 8px; }
.card h3 { margin: 0 0 6px; font-size: 18px; }
.card p { margin: 0; color: var(--ink-soft); font-size: 15px; }
.faq { max-width: 780px; margin: 0 auto; }
.faq details { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 14px 18px; margin-bottom: 12px; }
.faq summary { font-weight: 700; cursor: pointer; font-size: 16px; }
.faq p { color: var(--ink-soft); margin: 10px 0 2px; }
.site-footer { border-top: 1px solid var(--line); padding: 26px 20px; text-align: center; color: var(--muted); font-size: 14px; }
.site-footer a { color: var(--muted); margin: 0 8px; text-decoration: none; }
.site-footer a:hover { color: var(--brand-1); }

@media (max-width: 1023px) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 599px) { .cards { grid-template-columns: 1fr; } }

/* ---- Reconnecting overlay --------------------------------------------------
   Shown over a frozen call while ICE restarts and re-routes to a working TURN
   server, so a mid-call media hiccup never looks like the app just hung. Sits
   centred over the whole video column in both normal and fullscreen modes.
   pointer-events:none keeps Next and the other controls clickable underneath. */
.video-col { position: relative; }
.reconnect-overlay { display: none; }
body[data-reconnecting="1"] .reconnect-overlay {
  display: flex;
  position: absolute;
  inset: 0;
  z-index: 20;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.reconnect-box {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 82%;
  padding: 12px 18px;
  border-radius: 999px;
  background: rgba(0, 0, 0, .62);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  box-shadow: 0 6px 24px rgba(0, 0, 0, .35);
}
.reconnect-spinner {
  flex: none;
  width: 18px;
  height: 18px;
  border: 2.5px solid rgba(255, 255, 255, .3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: rc-spin .8s linear infinite;
}
.reconnect-overlay.rc-lost .reconnect-spinner { display: none; }
@keyframes rc-spin { to { transform: rotate(360deg); } }

/* ---- Sponsored break -------------------------------------------------------
   An Adsterra native banner shown INSIDE the stranger frame every few Nexts.
   Fills whichever size #remoteFrame currently is (normal, fullscreen, mobile),
   sits over the noise/search UI on an opaque dark ground, and forces light text
   so the native ad reads on the dark frame. The bottom-wall Next/controls live
   outside #remoteFrame, so they stay reachable to skip the ad. */
.stranger-ad { display: none; }
body[data-ad-break="1"] #remoteFrame .stranger-ad {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  position: absolute;
  inset: 0;
  z-index: 9;
  padding: 18px;
  background: #0d0e18;
  overflow: auto;
}
/* Reserve top space for the floating Next button — fullscreen only (the button
   is hidden in non-fullscreen, where the bottom Next control is used instead). */
body[data-ad-break="1"] .video-col.fs-mode #remoteFrame .stranger-ad { padding: 96px 18px 18px; }
body[data-ad-break="1"] #remoteFrame .search-logo,
body[data-ad-break="1"] #remoteFrame .status-chip,
body[data-ad-break="1"] #remoteFrame .tv-noise { display: none; }   /* no "no-signal" static behind/around the ad */
.stranger-ad-label {
  flex: none;
  color: rgba(255, 255, 255, .5);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.stranger-ad-next {
  position: absolute;
  left: 50%;
  top: 50px;
  transform: translateX(-50%);
  z-index: 10;                 /* always above the ad creative so it stays tappable */
  display: none;               /* fullscreen only — non-fullscreen uses the bottom Next control */
  align-items: center;
  gap: 6px;
  padding: 11px 26px;
  border: 0;
  border-radius: 999px;
  background: var(--next);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(34, 197, 94, .45);
}
.video-col.fs-mode .stranger-ad-next { display: inline-flex; }
.stranger-ad-next svg { width: 18px; height: 18px; }
.stranger-ad-next:active { transform: translateX(-50%) scale(.97); }
.stranger-ad-inner {
  width: 100%;
  max-width: 360px;
  color: #fff;
}
.stranger-ad-inner img { max-width: 100%; }

/* Shown while the ad is still loading (or when there's no fill and we're about to
   auto-skip), so the wait reads as "loading an ad" instead of a blank black frame.
   Hidden the moment the creative renders (JS clears data-ad-loading) or the break
   ends. */
.ad-loading { display: none; }
body[data-ad-break="1"][data-ad-loading="1"] #remoteFrame .ad-loading {
  display: flex;
  align-items: center;
  gap: 9px;
  color: rgba(255, 255, 255, .75);
  font-size: 13px;
  font-weight: 600;
}
.ad-loading-spin {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, .25);
  border-top-color: rgba(255, 255, 255, .85);
  border-radius: 50%;
  animation: ad-spin .7s linear infinite;
}
@keyframes ad-spin { to { transform: rotate(360deg); } }

/* Sponsored display banner before the "How CamTok works" section (728x90 desktop /
   320x50 mobile, injected by JS into #pageAdSlot). Labelled for transparency; the
   slot reserves a little height so the page doesn't jump when the ad loads. */
.page-ad { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 20px 16px 6px; }
.page-ad-label { color: var(--muted); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.page-ad-slot { width: 100%; min-height: 50px; display: flex; justify-content: center; align-items: center; }
.page-ad-slot iframe { display: block; border: 0; max-width: 100%; }

/* ---- Left slide-in drawer menu (opened by tapping the logo) ----------------- */
.drawer-scrim { position: fixed; inset: 0; z-index: 60; background: rgba(10, 10, 20, .5); }
.drawer {
  position: fixed; top: 0; left: 0; z-index: 61;
  width: 340px; max-width: 88vw; height: 100%;
  background: #fff; color: var(--ink);
  box-shadow: 0 0 40px rgba(0, 0, 0, .3);
  transform: translateX(-100%); transition: transform .25s ease;
  display: flex; flex-direction: column;
  padding: max(12px, env(safe-area-inset-top)) 0 12px;
  overflow-y: auto;
}
/* Per-device widths: phone (compact, near-full), tablet (roomier), desktop (fixed). */
@media (max-width: 599px) { .drawer { width: 88vw; } }
@media (min-width: 600px) and (max-width: 1023px) { .drawer { width: 400px; max-width: 70vw; } }
@media (min-width: 1024px) { .drawer { width: 360px; } }
.drawer.open { transform: translateX(0); }
.drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 6px 16px 14px; }
.drawer-head .brand { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; color: var(--ink); }
.drawer-close { border: 0; background: none; padding: 6px; cursor: pointer; color: var(--muted); border-radius: 8px; display: inline-flex; }
.drawer-close svg { width: 22px; height: 22px; }
.drawer-close:hover { background: rgba(0, 0, 0, .05); }
.drawer-auth { padding: 4px 16px 8px; }
.drawer-auth-msg { padding: 2px 16px 0; color: #c0392b; font-size: 12px; }
.drawer-auth-msg:empty { display: none; }
.gbtn {
  width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px;
  background: #fff; color: var(--ink); font-weight: 700; font-size: 15px; cursor: pointer;
}
.gbtn:hover { background: #f7f7fb; }
.gbtn-ico { display: inline-flex; }
/* Drawer profile card — a compact clickable row that opens the full Profile page. */
.drawer-profile { display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px 10px; border: 1px solid var(--line); border-radius: 14px; background: #fff; cursor: pointer; text-align: left; font: inherit; text-decoration: none; color: var(--ink); }
.drawer-profile:hover { background: #f7f7fb; }
.drawer-avatar { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; background: #e9e9f2; flex: none; display: block; }
.avatar-fallback { display: flex; align-items: center; justify-content: center; font-weight: 800; color: #fff; background: linear-gradient(135deg, var(--brand-1), var(--brand-2)); }
.drawer-avatar.avatar-fallback { font-size: 18px; }
.drawer-profile-info { min-width: 0; flex: 1; }
.drawer-uname { font-weight: 800; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.drawer-uemail { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
.drawer-chev { flex: none; color: var(--muted); display: inline-flex; }
.drawer-chev svg { width: 20px; height: 20px; }

/* ---- Profile page (full screen; centered card on tablet/desktop) ----------- */
.profile-page { position: fixed; inset: 0; z-index: 70; background: var(--bg); color: var(--ink); display: flex; flex-direction: column; transform: translateX(100%); transition: transform .25s ease; }
.profile-page.open { transform: translateX(0); }
.pp-head { flex: none; display: flex; align-items: center; gap: 10px; padding: max(10px, env(safe-area-inset-top)) 14px 10px; border-bottom: 1px solid var(--line); background: #fff; }
.pp-back { border: 0; background: none; padding: 6px; margin: -6px 0 -6px -6px; color: var(--ink); cursor: pointer; display: inline-flex; border-radius: 8px; }
.pp-back:hover { background: rgba(0, 0, 0, .05); }
.pp-back svg { width: 24px; height: 24px; }
.pp-title { font-weight: 800; font-size: 18px; }
.pp-scroll { flex: 1; min-height: 0; overflow-y: auto; }
.pp-body { width: 100%; max-width: 560px; margin: 0 auto; padding: 22px 18px 40px; display: flex; flex-direction: column; align-items: center; }
.pp-msg { max-width: 560px; margin: 0 auto; padding: 0 18px 18px; color: var(--muted); font-size: 13px; text-align: center; }
.pp-msg:empty { display: none; }
.pp-avatar-wrap { position: relative; width: 104px; height: 104px; margin-bottom: 20px; }
.pp-avatar { width: 104px; height: 104px; border-radius: 50%; object-fit: cover; background: #e9e9f2; display: block; }
.pp-avatar.avatar-fallback { font-size: 42px; }
.pp-avatar-edit { position: absolute; right: 0; bottom: 0; width: 34px; height: 34px; border-radius: 50%; border: 3px solid var(--bg); background: var(--brand-1); color: #fff; display: grid; place-items: center; cursor: pointer; padding: 0; }
.pp-avatar-edit svg { width: 17px; height: 17px; }
.pp-fields { width: 100%; display: flex; flex-direction: column; gap: 4px; }
.pp-field { padding: 12px 0; border-bottom: 1px solid var(--line); }
.pp-label { display: block; font-size: 12px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--muted); margin-bottom: 5px; }
.pp-field-val { display: flex; align-items: center; gap: 8px; }
.pp-val { flex: 1; min-width: 0; font-size: 16px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp-val.pp-empty { color: var(--muted); font-weight: 500; font-style: italic; }
.pp-edit { flex: none; border: 0; background: none; padding: 6px; color: var(--muted); cursor: pointer; display: inline-flex; border-radius: 8px; }
.pp-edit:hover { background: rgba(0, 0, 0, .06); color: var(--ink); }
.pp-edit svg { width: 17px; height: 17px; }
.pp-input { flex: 1; min-width: 0; font-size: 16px; font-family: var(--font); padding: 8px 10px; border: 1px solid var(--brand-1); border-radius: 10px; outline: none; }
.pp-save { flex: none; border: 0; background: var(--brand-1); color: #fff; width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; cursor: pointer; padding: 0; }
.pp-save svg { width: 18px; height: 18px; }
.pp-nav { width: 100%; margin-top: 20px; display: flex; flex-direction: column; border-top: 1px solid var(--line); padding-top: 8px; }
.pp-nav a { padding: 13px 10px; color: var(--ink); text-decoration: none; font-weight: 600; font-size: 15px; border-radius: 10px; }
.pp-nav a:hover { background: rgba(0, 0, 0, .05); }
.pp-section { width: 100%; margin-top: 22px; }
.pp-section-title { font-size: 13px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); margin: 0 0 8px; }
.pp-soon { font-size: 14px; color: var(--muted); margin: 0; }
.pp-logout { width: 100%; margin-top: 30px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 13px; border: 1px solid var(--line); border-radius: 14px; background: #fff; color: #c0392b; font-weight: 700; font-size: 15px; cursor: pointer; }
.pp-logout:hover { background: #fdf0ef; border-color: #f0c9c4; }
.pp-logout svg { width: 19px; height: 19px; }
body.profile-open { overflow: hidden; }
/* Standalone /profile.html — its own page (reuses the pp- content styles). The whole
   document scrolls; the header stays pinned at the top. */
.pp-standalone { min-height: 100dvh; background: var(--bg); color: var(--ink); }
.pp-standalone .pp-head { position: sticky; top: 0; z-index: 5; }
.pp-standalone .pp-scroll { flex: none; overflow: visible; }
.pp-loading { max-width: 560px; margin: 0 auto; padding: 44px 18px; color: var(--muted); text-align: center; font-size: 15px; }
/* It is a full PAGE on every device — never a floating popup. The bar spans the full
   width; the content sits in a centred, readable column on larger screens. */
.pp-head-row { width: 100%; max-width: 560px; margin: 0 auto; display: flex; align-items: center; gap: 10px; }
/* Phone: bigger avatar edit tap target. */
@media (max-width: 599px) {
  .pp-avatar-edit { width: 36px; height: 36px; }
}
/* Tablet: a little more breathing room. */
@media (min-width: 600px) {
  .pp-head { padding-left: 22px; padding-right: 22px; }
  .pp-body { padding: 30px 22px 48px; }
}
/* Desktop: larger avatar + spacing (still a full page, not a card). */
@media (min-width: 1024px) {
  .pp-body { padding: 34px 24px 56px; }
  .pp-avatar-wrap, .pp-avatar { width: 120px; height: 120px; }
}
/* Wallet summary at the top of the menu (signed-in only). */
.drawer-wallet {
  display: flex; gap: 8px; margin: 6px 16px 2px; padding: 0; background: none; border: 0;
  cursor: pointer; width: calc(100% - 32px); text-align: left; font: inherit;
}
.drawer-wallet[hidden] { display: none; }
.drawer-wallet .dw-item {
  flex: 1; display: flex; align-items: center; gap: 6px; padding: 10px 12px; border-radius: 12px;
  border: 1px solid var(--line); font-weight: 800; color: var(--ink);
}
.drawer-wallet .dw-coins { background: linear-gradient(135deg, rgba(255,213,74,.22), rgba(255,179,0,.10)); }
.drawer-wallet .dw-dia { background: linear-gradient(135deg, rgba(120,200,255,.22), rgba(80,150,255,.10)); }
.drawer-wallet .dw-ic { font-size: 15px; line-height: 1; flex: none; }
.drawer-wallet .dw-n { font-size: 15px; }
.drawer-wallet .dw-l { font-size: 11px; font-weight: 600; opacity: .7; }
.drawer-wallet:active { transform: scale(.99); }
/* Loading spinner shown in the wallet summary until the first live balance lands. */
.drawer-wallet { position: relative; }
.drawer-wallet .dw-spin { display: none; }
.drawer-wallet.loading .dw-item { visibility: hidden; }
.drawer-wallet.loading .dw-spin {
  display: block; position: absolute; left: 50%; top: 50%; width: 22px; height: 22px;
  margin: -11px 0 0 -11px; border: 2.5px solid rgba(120,120,140,.25);
  border-top-color: #6d5efc; border-radius: 50%; animation: dwspin .7s linear infinite;
}
@keyframes dwspin { to { transform: rotate(360deg); } }
/* Menu spinner: shown ONLY when the signed-in nav items are slow to resolve
   (auth restore lag). JS arms it behind a short threshold, so fast loads — and
   returning users revealed instantly from the cached hint — never flash it. */
.drawer-loading { display: none; align-items: center; gap: 10px; padding: 12px 14px; color: #9a9aae; font-size: 14px; }
.drawer-loading.show { display: flex; }
.drawer-loading .dl-spin { width: 18px; height: 18px; flex: 0 0 auto; border: 2.5px solid rgba(120,120,140,.25); border-top-color: #6d5efc; border-radius: 50%; animation: dwspin .7s linear infinite; }
/* Spinner on a Gift button while gift.js + the manifest lazy-load on first open. */
.gift-loading { position: relative; color: transparent !important; pointer-events: none; }
.gift-loading svg { visibility: hidden; }
.gift-loading::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 18px; height: 18px;
  margin: -9px 0 0 -9px; border: 2.5px solid rgba(255,255,255,.35);
  border-top-color: #fff; border-radius: 50%; animation: giftspin .7s linear infinite;
}
@keyframes giftspin { to { transform: rotate(360deg); } }
.drawer-nav { display: flex; flex-direction: column; padding: 8px; border-top: 1px solid var(--line); margin-top: 6px; }
.drawer-nav a { padding: 13px 12px; border-radius: 10px; color: var(--ink); text-decoration: none; font-weight: 600; }
.drawer-nav a:hover { background: rgba(0, 0, 0, .05); }
.drawer-update { display: flex; align-items: center; gap: 10px; width: 100%; padding: 13px 12px; border: 0; border-radius: 10px; background: none; color: var(--ink); font: inherit; font-weight: 600; text-align: left; cursor: pointer; }
.drawer-update:hover { background: rgba(0, 0, 0, .05); }
.drawer-update svg { width: 18px; height: 18px; flex: none; opacity: .8; }
.drawer-update.is-updating { opacity: .6; pointer-events: none; }
.drawer-update .du-t { flex: 1; }
/* Pending friend-request count on the menu item. */
.du-badge { flex: none; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px;
  background: linear-gradient(135deg, var(--brand-1), var(--brand-2)); color: #fff;
  font-size: 12px; font-weight: 800; line-height: 20px; text-align: center; }
.du-badge[hidden] { display: none; }
body.drawer-open { overflow: hidden; }
.topbar .brand { cursor: pointer; }

/* ---- In-chat friend chips (Add friend / Accept / You're now friends) ------
   Self-contained cards so they read clearly in BOTH the normal chat panel and
   the translucent fullscreen video overlay. */
.msg-friend { justify-content: center; padding: 4px 8px; }
.msg-friend .mf-card, .msg-friend { }
.msg-friend {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; justify-content: center;
}
.msg-friend .mf-text { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.msg-friend .mf-heart { width: 15px; height: 15px; vertical-align: -2px; color: var(--brand-2); }
.msg-friend .mf-acts { display: inline-flex; gap: 8px; }
.msg-friend .mf-btn {
  display: inline-flex; align-items: center; gap: 5px; border: 0; cursor: pointer;
  padding: 6px 12px; border-radius: 999px; font: inherit; font-size: 12px; font-weight: 700;
  color: #fff; background: linear-gradient(135deg, var(--brand-1), var(--brand-2));
  box-shadow: 0 3px 11px rgba(109,94,252,.32);
}
.msg-friend .mf-btn svg { width: 13px; height: 13px; }
.msg-friend .mf-btn:disabled { opacity: .6; cursor: default; }
.msg-friend .mf-btn-ghost { background: none; color: var(--muted); box-shadow: none; border: 1.5px solid rgba(0,0,0,.15); }
/* The whole row is a soft card so it stands apart from ordinary bubbles. */
.msg.msg-friend { margin: 6px auto; max-width: 92%; background: rgba(109,94,252,.08);
  border: 1px solid rgba(109,94,252,.18); border-radius: 14px; padding: 11px 12px; }
.msg.msg-friend-done { background: rgba(46,204,113,.10); border-color: rgba(46,204,113,.28);
  font-size: 12px; font-weight: 600; padding: 8px 11px; max-width: 86%; }
.msg.msg-friend-done .mf-heart { width: 13px; height: 13px; }
/* Fullscreen video overlay: keep the card readable on top of video. */
.video-col.fs-mode #messages .msg-friend { background: rgba(20,20,28,.82); border-color: rgba(255,255,255,.16); }
.video-col.fs-mode #messages .msg-friend .mf-text { color: #fff; }

/* Non-fullscreen mobile/tablet: render the ad a touch smaller so its title never
   spills outside the smaller stranger frame. Adsterra lets publishers set the
   native-banner block size + font size, and a fully-visible smaller ad only
   improves viewability — so this is within their rules. */
@media (max-width: 1023px) {
  /* Tight padding so the frame hugs the ad (no wasted top/bottom gap); the frame
     is sized to the ad in JS via growStrangerForAd(). */
  body[data-ad-break="1"] .video-col:not(.fs-mode) #remoteFrame .stranger-ad { padding: 0 12px 10px; justify-content: flex-start; }
  /* Dark ground so any residual space around the in-flow ad stays seamless. */
  body[data-ad-break="1"] .video-col:not(.fs-mode) #remoteFrame { background: #0d0e18; }
  /* The top-bar notice already says "Advertisement" here, so drop the in-ad
     label (non-fullscreen mobile/tablet only) to bring the ad up further. */
  body[data-ad-break="1"] .video-col:not(.fs-mode) #remoteFrame .stranger-ad-label { display: none; }
  body[data-ad-break="1"] .video-col:not(.fs-mode) #remoteFrame .stranger-ad-inner {
    max-width: 100%;         /* never wider than the frame -> never spills out */
    font-size: 12px;
  }
  /* Make the ad's title wrap instead of clipping at the frame edge, so the whole
     title stays visible (better viewability + advertiser satisfaction). */
  body[data-ad-break="1"] .video-col:not(.fs-mode) #remoteFrame .stranger-ad-inner * {
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    max-width: 100%;
    min-height: 0 !important;          /* collapse any reserved empty placeholder space */
  }
  /* Adsterra's native-banner container reserves a fixed block height, so even with
     a single ad card it leaves a tall empty box below the creative -> the auto-sized
     frame then shows a big dead gap. Force every wrapper (not the ad image itself) to
     hug its content so the frame shrinks to exactly the rendered card. */
  body[data-ad-break="1"] .video-col:not(.fs-mode) #remoteFrame .stranger-ad-inner *:not(img) {
    height: auto !important;
  }
}

/* Ad notice below the topbar — non-fullscreen mobile/tablet only, during an ad
   break. Backstop for tiny phones where the "Advertisement" label inside the ad
   frame is too cramped to read. Hidden on desktop and in fullscreen (the app
   chrome is not shown in the fullscreen element). */
.ad-note { display: none; }
@media (max-width: 1023px) {
  /* Amber "sponsored" bar — deliberately OFF the purple/pink brand palette so it
     reads instantly as an ad disclosure (the near-universal ad/sponsored colour)
     instead of blending in as site chrome. A solid "AD" chip on the left makes the
     meaning register at a glance without having to read the sentence. */
  body[data-ad-break="1"] .ad-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 14px;
    font-size: clamp(11px, 3.2vw, 13px);
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: .01em;
    color: #3a2a00;                         /* dark text on amber */
    background: #ffcb2e;                     /* strong amber — signals "advertisement" */
    border-bottom: 2px solid #d99b00;
  }
  body[data-ad-break="1"] .ad-note::before {
    content: "AD";
    flex: none;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .06em;
    color: #ffcb2e;
    background: #1a1400;
    padding: 2px 7px;
    border-radius: 4px;
  }
}

/* Always-on Next button on the right wall — mobile/tablet fullscreen only.
   Sits over the frames (like the other fs controls) so it works during an ad
   too, and is excluded from the swipe-to-next gesture so a tap never drags. */
.fs-side-next { display: none; }
@media (max-width: 1023px) {
  .video-col.fs-mode .fs-side-next {
    display: grid;
    place-items: center;
    position: absolute;
    right: 0;                       /* flush against the right wall */
    top: 50%;                       /* true vertical centre */
    transform: translateY(-50%);
    z-index: 8;
    width: 42px;
    height: 48px;
    padding: 0;
    border: 0;
    border-radius: 24px 0 0 24px;   /* rounded on the inner side, flat against the wall */
    background: rgba(0, 0, 0, .5);
    color: #fff;
    cursor: pointer;
    touch-action: none;
  }
  .video-col.fs-mode .fs-side-next svg { width: 22px; height: 22px; }
  .video-col.fs-mode .fs-side-next:active { transform: translateY(-50%) scale(.94); }
}

/* ==========================================================================
   Standalone pages (friends.html / messages.html) — shared shell + layout.
   Same top bar + menu as home; simple, responsive on PC / tablet / phone.
   ========================================================================== */
body.pg-standalone { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; background: var(--bg); }
.pg-topbar { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 10px 16px; padding-top: calc(10px + env(safe-area-inset-top));
  background: rgba(255,255,255,.92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(0,0,0,.07); }
.pg-topbar .pg-title { font-size: 15px; font-weight: 800; color: var(--muted); }

.pg-wrap { width: 100%; max-width: 720px; margin: 0 auto; flex: 1; min-height: 0; display: flex; flex-direction: column;
  padding: 14px 16px calc(18px + env(safe-area-inset-bottom)); }

/* Tabs (Friends | Blocked) */
.pg-tabs { display: flex; gap: 6px; background: rgba(0,0,0,.05); border-radius: 12px; padding: 4px; margin-bottom: 14px; }
.pg-tab { flex: 1; border: 0; background: none; cursor: pointer; padding: 10px; border-radius: 9px; font: inherit; font-weight: 700; color: var(--muted); }
.pg-tab.is-active { background: #fff; color: var(--ink); box-shadow: 0 2px 8px rgba(0,0,0,.08); }
.pg-panel[hidden] { display: none; }

/* Loading ring + empty states */
.pg-loading { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 46px 0; color: var(--muted); }
@keyframes pgSpin { to { transform: rotate(360deg); } }
.pg-ring { width: 40px; height: 40px; border-radius: 50%; border: 3px solid rgba(109,94,252,.2); border-top-color: var(--brand-1); animation: pgSpin .7s linear infinite; }
.pg-empty { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 44px 22px; text-align: center; color: var(--muted); }
.pg-empty svg { width: 48px; height: 48px; opacity: .5; }

/* A person row (friends / blocked) */
.pg-row { display: flex; align-items: center; gap: 13px; padding: 11px 10px; border-radius: 14px; background: var(--card); box-shadow: 0 1px 3px rgba(0,0,0,.05); margin-bottom: 10px; position: relative; }
.pg-row-busy { opacity: .5; pointer-events: none; }
.pg-av { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; flex: none; background: var(--them); }
.pg-av-fb { display: flex; align-items: center; justify-content: center; font-weight: 800; color: #fff; background: linear-gradient(135deg, var(--brand-1), var(--brand-2)); }
.pg-meta { flex: 1; min-width: 0; }
.pg-name { font-weight: 700; font-size: 15.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pg-msg-btn { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; flex: none;
  padding: 8px 14px; border-radius: 999px; font-size: 13px; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, var(--brand-1), var(--brand-2)); box-shadow: 0 4px 14px rgba(109,94,252,.32); }
.pg-msg-btn svg { width: 15px; height: 15px; }
.pg-unblock { flex: none; border: 1.5px solid rgba(0,0,0,.14); background: none; color: var(--ink); font: inherit; font-weight: 700; font-size: 13px; padding: 8px 14px; border-radius: 999px; cursor: pointer; }

/* Overflow menu on a friend row */
.pg-more-wrap { position: relative; flex: none; }
.pg-more { border: 0; background: none; cursor: pointer; width: 34px; height: 34px; border-radius: 50%; color: var(--muted); display: flex; align-items: center; justify-content: center; }
.pg-more:hover { background: rgba(0,0,0,.06); }
.pg-more svg { width: 20px; height: 20px; }
.pg-menu { position: absolute; right: 0; top: 38px; z-index: 5; background: var(--card); border-radius: 12px; box-shadow: 0 12px 30px rgba(0,0,0,.18); overflow: hidden; min-width: 150px; padding: 4px; }
.pg-menu[hidden] { display: none; }
.pg-menu-item { display: block; width: 100%; text-align: left; border: 0; background: none; cursor: pointer; padding: 11px 12px; border-radius: 8px; font: inherit; font-weight: 600; color: var(--ink); }
.pg-menu-item:hover { background: rgba(0,0,0,.05); }
.pg-menu-item.pg-danger { color: #e23b5a; }

/* ---- Messages page ------------------------------------------------------ */
body.pg-dm .pg-wrap { max-width: 980px; padding-bottom: 0; }
.dm-wrap { flex: 1; min-height: 0; }
.dm-list { flex: 1; min-height: 0; overflow: auto; }
.dm-conv { display: none; flex-direction: column; min-height: 0; }
.dm-thread { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; border: 0; background: none; cursor: pointer; padding: 10px; border-radius: 14px; }
.dm-thread:hover { background: rgba(0,0,0,.04); }
.dm-thread.is-open { background: rgba(109,94,252,.1); }
.dm-thread-mid { flex: 1; min-width: 0; }
.dm-thread-name { font-weight: 700; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dm-thread-preview { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dm-thread-preview.dm-muted { font-style: italic; opacity: .8; }
.dm-thread-right { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; flex: none; }
.dm-thread-time { font-size: 11px; color: var(--muted); }
.dm-unread { width: 10px; height: 10px; border-radius: 50%; background: linear-gradient(135deg, var(--brand-1), var(--brand-2)); }

/* Conversation view */
.dm-conv-head { display: flex; align-items: center; gap: 10px; padding: 8px 4px 12px; border-bottom: 1px solid rgba(0,0,0,.07); }
.dm-back { display: none; border: 0; background: none; cursor: pointer; color: var(--ink); width: 34px; height: 34px; align-items: center; justify-content: center; }
.dm-back svg { width: 22px; height: 22px; }
.dm-head-img { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; }
.dm-head-name { font-weight: 800; font-size: 16px; }
.dm-msgs { flex: 1; min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: 8px; padding: 14px 4px; }
.dm-placeholder { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; color: var(--muted); text-align: center; padding: 20px; }
.dm-placeholder svg { width: 54px; height: 54px; opacity: .45; }
.dm-msg { display: flex; flex-direction: column; max-width: 76%; position: relative; }
.dm-msg.dm-me { align-self: flex-end; align-items: flex-end; }
.dm-msg.dm-them { align-self: flex-start; align-items: flex-start; }
.dm-bubble { padding: 9px 14px; border-radius: 16px; font-size: 15px; word-wrap: break-word; overflow-wrap: anywhere; }
.dm-me .dm-bubble { background: linear-gradient(135deg, var(--brand-1), var(--brand-2)); color: #fff; border-bottom-right-radius: 5px; }
.dm-them .dm-bubble { background: var(--them); color: var(--ink); border-bottom-left-radius: 5px; }
/* Content + delete button on one line (delete on the outer side of the bubble). */
.dm-line { display: flex; align-items: center; gap: 6px; max-width: 100%; }
.dm-del { flex: none; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 50%;
  background: rgba(0,0,0,.06); color: var(--muted); cursor: pointer; display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity .15s, background .15s, color .15s; }
.dm-del svg { width: 14px; height: 14px; }
.dm-msg:hover .dm-del { opacity: .75; }
.dm-del:hover { opacity: 1; background: rgba(226,59,90,.14); color: #e23b5a; }
@media (hover: none) { .dm-del { opacity: .4; } }   /* touch devices: always visible, subtle */

/* ---- Multi-select delete (mark messages, delete together) ---- */
.dm-select-btn { margin-left: auto; flex: none; border: 0; background: none; cursor: pointer; color: var(--muted);
  width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.dm-select-btn svg { width: 20px; height: 20px; }
.dm-select-btn:hover { background: rgba(0,0,0,.06); }
.dm-selbar { display: none; align-items: center; gap: 12px; padding: 8px 4px 12px; border-bottom: 1px solid rgba(0,0,0,.07); }
.dm-conv[data-select="1"] .dm-conv-head { display: none; }
.dm-conv[data-select="1"] .dm-selbar { display: flex; }
.dm-sel-count { flex: 1; font-weight: 700; font-size: 15px; }
.dm-sel-x, .dm-sel-del { flex: none; border: 0; width: 38px; height: 38px; border-radius: 50%; cursor: pointer;
  display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.06); color: var(--ink); }
.dm-sel-x svg, .dm-sel-del svg { width: 20px; height: 20px; }
.dm-sel-del { background: rgba(226,59,90,.14); color: #e23b5a; }
.dm-sel-del:disabled { opacity: .4; cursor: default; }
/* In select mode: hide the per-message trash, make rows tappable, mark selected. */
.dm-conv[data-select="1"] .dm-del { display: none; }
.dm-conv[data-select="1"] .dm-msg { cursor: pointer; }
/* A selected message: a white+brand ring that stays visible on ANY bubble colour
   (a plain brand outline vanishes on my own brand-coloured bubble), a tinted row,
   and a checkmark badge so the mark is unmistakable. */
.dm-msg.sel { background: rgba(109,94,252,.12); border-radius: 14px; padding: 4px; }
.dm-msg.sel .dm-bubble, .dm-msg.sel .dm-photo { box-shadow: 0 0 0 2.5px #fff, 0 0 0 5px var(--brand-1); }
.dm-msg.sel::after {
  content: ""; position: absolute; top: -5px; z-index: 3;
  width: 22px; height: 22px; border-radius: 50%; box-shadow: 0 0 0 2px #fff;
  background: var(--brand-1) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 13px 13px no-repeat;
}
.dm-msg.sel.dm-me::after { left: -7px; }
.dm-msg.sel.dm-them::after { right: -7px; }
.dm-photo { display: block; max-width: 220px; border: 0; padding: 0; background: none; border-radius: 14px; overflow: hidden; cursor: pointer; }
.dm-photo img { display: block; width: 100%; height: auto; }
/* While the photo downloads: a fixed shimmer frame so there's no blank gap, plus a
   camera glyph in the middle; on load the class is removed and the image shows. */
.dm-photo.is-loading { width: 200px; height: 150px; position: relative;
  background: linear-gradient(100deg, rgba(130,130,150,.12) 30%, rgba(130,130,150,.24) 50%, rgba(130,130,150,.12) 70%);
  background-size: 200% 100%; animation: dmShine 1.15s ease-in-out infinite; }
.dm-photo.is-loading img { opacity: 0; }
.dm-photo.is-loading::after { content: ""; position: absolute; inset: 0; margin: auto; width: 34px; height: 34px; opacity: .5;
  background: currentColor; color: var(--muted);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.5 4h-5L7 7H4a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-3l-2.5-3z'/%3E%3Ccircle cx='12' cy='13' r='3'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.5 4h-5L7 7H4a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-3l-2.5-3z'/%3E%3Ccircle cx='12' cy='13' r='3'/%3E%3C/svg%3E") center / contain no-repeat; }
.dm-photo.is-error { width: 200px; height: 120px; background: rgba(226,59,90,.10); }
@keyframes dmShine { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
/* Fullscreen photo viewer (in-page lightbox). */
.dm-lightbox { position: fixed; inset: 0; z-index: 2147483600; display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.92); padding: 20px; cursor: zoom-out; }
.dm-lightbox img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 6px; }
.dm-lb-close { position: fixed; top: calc(12px + env(safe-area-inset-top)); right: 14px; width: 42px; height: 42px;
  border: 0; border-radius: 50%; background: rgba(255,255,255,.16); color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center; }
.dm-lb-close svg { width: 22px; height: 22px; }
.dm-time { font-size: 10.5px; color: var(--muted); margin-top: 3px; padding: 0 4px; }
.dm-composer { display: flex; align-items: center; gap: 8px; padding: 10px 4px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid rgba(0,0,0,.07); }
.dm-attach, .dm-send { flex: none; width: 42px; height: 42px; border-radius: 50%; border: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.dm-attach { background: rgba(0,0,0,.06); color: var(--ink); }
.dm-attach svg { width: 20px; height: 20px; }
.dm-send { background: linear-gradient(135deg, var(--brand-1), var(--brand-2)); color: #fff; box-shadow: 0 4px 14px rgba(109,94,252,.35); }
.dm-send svg { width: 19px; height: 19px; }
.dm-input { flex: 1; min-width: 0; border: 1.5px solid rgba(0,0,0,.12); border-radius: 999px; padding: 11px 16px; font: inherit; font-size: 15px; background: var(--card); color: var(--ink); }
.dm-input:focus { outline: none; border-color: var(--brand-1); }
.dm-toast { position: fixed; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom)); transform: translateX(-50%) translateY(8px);
  z-index: 300; max-width: 88%; background: rgba(20,20,28,.96); color: #fff; font-size: 13px; font-weight: 600;
  padding: 11px 16px; border-radius: 12px; opacity: 0; transition: opacity .2s, transform .2s; pointer-events: none; text-align: center; }
.dm-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* Phone / small tablet: single column — list, then the conversation slides over. */
@media (max-width: 767px) {
  .dm-list { display: block; }
  .dm-conv { position: fixed; inset: 0; top: 0; z-index: 60; background: var(--bg); padding: calc(8px + env(safe-area-inset-top)) 14px 0; transform: translateX(100%); transition: transform .22s ease; }
  .dm-conv[data-open="1"] { display: flex; transform: none; }
  .dm-back { display: flex; }
}
/* Tablet / desktop: two columns side by side. */
@media (min-width: 768px) {
  /* Lock the messages page to the viewport so ONLY the thread list and the
     conversation scroll internally — never the whole page. min-height is reset so
     a tablet's browser UI (100dvh < 100vh) can't force a whole-page scroll. */
  body.pg-dm { height: 100vh; height: 100dvh; min-height: 0; overflow: hidden; }
  .dm-wrap { display: flex; flex-direction: row; gap: 16px; }
  .dm-list { flex: 0 0 300px; border-right: 1px solid rgba(0,0,0,.07); padding-right: 8px; }
  .dm-conv { display: flex; flex: 1; }
  .dm-conv[data-open="0"] .dm-conv-head, .dm-conv[data-open="0"] .dm-msgs, .dm-conv[data-open="0"] .dm-composer { display: none; }
  .dm-conv[data-open="1"] .dm-placeholder { display: none; }
}