/* ════════════════════════════════════════════════════════════════════
   VIVUCAP SOCIAL · NATIVE · BASE + HOME
   ════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500;600;700;800&family=Inter:wght@400;500;600;700;800;900&family=Outfit:wght@500;600;700;800;900&display=swap');

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--vc-font);
  color: var(--vc-text);
  background: var(--vc-grad-bg) fixed, var(--vc-night);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  padding-bottom: calc(var(--vc-nav-h) + env(safe-area-inset-bottom, 0px) + 18px);
}
img, video, svg { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
a { color: inherit; text-decoration: none; }
input, textarea, select { font-family: inherit; }
::selection { background: rgba(34,211,238,.32); }

/* Scrollbars */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,.12); border-radius: 99px; }
::-webkit-scrollbar-track { background: transparent; }

.vcs-app {
  width: 100%;
  max-width: 720px;
  margin-inline: auto;
  padding-inline: var(--vc-gutter);
}

/* Utility */
.vcs-hidden { display: none !important; }
.sr-only { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0; }

/* Brand wordmark helpers */
.vc-vivu { color: var(--vc-text); }
.vc-social, .vc-cap { color: var(--vc-gold-400); }

/* ═══════════════════════════════ TOPBAR ═══════════════════════════════ */
.vcs-topbar {
  position: sticky; top: 0; z-index: 60;
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; height: var(--vc-nav-h);
  width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
  padding: 0 var(--vc-gutter);
  background: rgba(6,10,24,.72);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  border-bottom: 1px solid var(--vc-line);
}
.vcs-topbar-brand { display: flex; align-items: center; gap: 10px; font-family: var(--vc-brand); font-weight: 800; font-size: 1.18rem; letter-spacing: -.02em; }
.vcs-topbar-brand .mark { width: 30px; height: 30px; border-radius: 9px; }
.vcs-topbar-actions { display: flex; align-items: center; gap: 6px; }
.vcs-icon-btn {
  position: relative; width: 42px; height: 42px; display: grid; place-items: center;
  border-radius: var(--vc-r-pill); color: var(--vc-text-soft);
  background: var(--vc-glass-1); border: 1px solid var(--vc-line);
  transition: .2s var(--vc-ease);
}
.vcs-icon-btn:hover { background: var(--vc-glass-2); color: var(--vc-cyan-300); border-color: var(--vc-cyan-400); transform: translateY(-1px); }
.vcs-badge {
  position: absolute; top: -3px; right: -3px; min-width: 18px; height: 18px; padding: 0 5px;
  display: grid; place-items: center; font-size: .68rem; font-weight: 800; color: #04102b;
  background: var(--vc-grad-gold); border-radius: 99px; border: 2px solid var(--vc-night);
}
.vcs-badge.is-bump { animation: vc-bump .5s var(--vc-ease-spring); }
@keyframes vc-bump { 0%{transform:scale(1)} 40%{transform:scale(1.4)} 100%{transform:scale(1)} }

/* ═══════════════════════════ WELCOME ORB ═══════════════════════════ */
.vcs-welcome { text-align: center; padding: 26px 0 8px; }
.vcs-welcome-quote { font-family: var(--vc-display); font-style: italic; font-size: clamp(1rem,3.6vw,1.22rem); color: var(--vc-text-soft); margin: 0 0 22px; }

/* Floating avatar orb */
.vcs-orb {
  position: relative; width: clamp(150px, 42vw, 196px); aspect-ratio: 1; margin: 0 auto 16px;
  animation: vc-orb-float 6s var(--vc-ease) infinite;
}
@keyframes vc-orb-float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-12px)} }
.vcs-orb-aura {
  position: absolute; inset: -22%; border-radius: 50%;
  background: radial-gradient(circle, rgba(34,211,238,.34), rgba(59,130,246,.12) 50%, transparent 70%);
  filter: blur(8px); animation: vc-pulse 4s ease-in-out infinite;
}
@keyframes vc-pulse { 0%,100%{opacity:.6;transform:scale(1)} 50%{opacity:1;transform:scale(1.06)} }
.vcs-orb-ring {
  position: absolute; inset: -6%; border-radius: 50%;
  background: conic-gradient(from 0deg, #1f3d7a, #e0a526, #1f3d7a, #e0a526, #1f3d7a);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
  animation: vc-spin 9s linear infinite;
}
@keyframes vc-spin { to { transform: rotate(360deg); } }
.vcs-orb-bg {
  position: absolute; inset: 6%; border-radius: 50%; overflow: hidden;
  background: radial-gradient(circle at 50% 35%, #1f3f8a, #0d1b3e 60%, #050912);
  box-shadow: var(--vc-shadow-float);
}
.vcs-orb-bg video, .vcs-orb-bg img.loop { width: 100%; height: 100%; object-fit: cover; opacity: .9; }
/* Floating profile photo (avatar sits above the loop, gently floating) */
.vcs-orb-photo {
  position: absolute; inset: 28%; border-radius: 50%; overflow: hidden;
  border: 3px solid rgba(255,255,255,.85);
  box-shadow: 0 14px 36px rgba(0,0,0,.55), 0 0 0 6px rgba(34,211,238,.18);
  animation: vc-orb-photo-float 5s var(--vc-ease) infinite;
}
@keyframes vc-orb-photo-float { 0%,100%{transform:translateY(0) scale(1)} 50%{transform:translateY(-6px) scale(1.015)} }
.vcs-orb-photo img { width: 100%; height: 100%; object-fit: cover; }
.vcs-orb-initials { width:100%;height:100%;display:grid;place-items:center;font-family:var(--vc-brand);font-weight:900;font-size:2rem;background:var(--vc-grad-capsule); }
.vcs-orb-badge { position:absolute; bottom:14%; right:14%; width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--vc-green);border:3px solid var(--vc-night);box-shadow:0 4px 12px rgba(0,0,0,.4); }

.vcs-welcome-name { font-family: var(--vc-display); font-weight: 800; font-size: clamp(1.5rem,6vw,2.1rem); margin: 6px 0 2px; letter-spacing: -.01em; }
.vcs-welcome-sub { color: var(--vc-text-mute); margin: 0 0 16px; font-size: .95rem; }
.vcs-wordmark { font-family: var(--vc-brand); font-weight: 900; font-size: clamp(2.4rem,10vw,3.6rem); letter-spacing: -.04em; line-height: 1; opacity: .96; margin: 4px 0 18px; }
.vcs-wordmark .v { color: var(--vc-text); }
.vcs-wordmark .c { background: var(--vc-grad-gold); -webkit-background-clip: text; background-clip: text; color: transparent; }

.vcs-cta-primary {
  display: inline-block; padding: 15px 34px; border-radius: var(--vc-r-pill);
  font-weight: 800; font-size: 1.02rem; color: #fff; letter-spacing: .01em;
  background: var(--vc-grad-capsule); box-shadow: var(--vc-shadow-cta);
  transition: .2s var(--vc-ease);
}
.vcs-cta-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 40px -10px rgba(59,130,246,.6); }
.vcs-cta-sub { color: var(--vc-text-mute); font-size: clamp(.78rem,2.6vw,.9rem); margin: 12px 0 0; }

/* ═══════════════════════════ CAROUSELS / RAILS ═══════════════════════════ */
.vcs-rail { margin: 26px 0 6px; }
.vcs-rail-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.vcs-rail-title { display: flex; align-items: center; gap: 9px; font-family: var(--vc-brand); font-weight: 700; font-size: 1.05rem; margin: 0; }
.vcs-rail-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--vc-cyan-400); box-shadow: 0 0 12px var(--vc-cyan-400); }
.vcs-rail-dot.gold { background: var(--vc-gold-400); box-shadow: 0 0 12px var(--vc-gold-400); }
.vcs-rail-dot.rose { background: var(--vc-rose-hot); box-shadow: 0 0 12px var(--vc-rose-hot); }
.vcs-rail-cta { font-size: .85rem; font-weight: 600; color: var(--vc-cyan-300); padding: 6px 12px; border-radius: 99px; background: var(--vc-glass-1); border: 1px solid var(--vc-line); transition: .2s; }
.vcs-rail-cta:hover { background: var(--vc-glass-2); border-color: var(--vc-cyan-400); }
.vcs-rail-meta { color: var(--vc-text-mute); font-size: .82rem; }

.vcs-rail-scroll {
  display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 4px 2px 14px; margin-inline: -2px; -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.vcs-rail-scroll::-webkit-scrollbar { display: none; }
.vcs-rail-scroll > * { scroll-snap-align: start; flex: 0 0 auto; }

/* Friend story chips */
.vcs-friend {
  width: 92px; text-align: center;
}
.vcs-friend-ring {
  width: 76px; height: 76px; margin: 0 auto 8px; border-radius: 50%; padding: 3px;
  background: conic-gradient(from 210deg, var(--vc-cyan-400), var(--vc-blue-500), var(--vc-gold-400), var(--vc-rose-hot), var(--vc-cyan-400));
  position: relative; transition: transform .2s var(--vc-ease);
}
.vcs-friend:hover .vcs-friend-ring { transform: scale(1.05); }
.vcs-friend-ring img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 3px solid var(--vc-night); }
.vcs-friend-name { font-size: .8rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vcs-friend-add {
  margin-top: 6px; width: 100%; padding: 5px 0; font-size: .74rem; font-weight: 700;
  border-radius: 99px; color: #fff; background: var(--vc-grad-cta); transition: .2s;
}
.vcs-friend-add.is-added { background: var(--vc-glass-2); color: var(--vc-text-mute); border: 1px solid var(--vc-line); }

/* Add-Friends rail: solid navy ring to distinguish from Stories */
.vcs-rail-dot.navy { background: var(--vc-blue-700); box-shadow: 0 0 12px var(--vc-blue-500); }
.vcs-rail--friends .vcs-friend-ring {
  background: linear-gradient(160deg, var(--vc-blue-700), #15265e);
}
.vcs-rail--friends .vcs-friend-ring img { border-color: var(--vc-night); }

/* ── STORIES carousel (Instagram-style) ───────────────────────────── */
.vcs-story { width: 92px; text-align: center; }
.vcs-story-ring {
  width: 76px; height: 76px; margin: 0 auto 8px; border-radius: 50%; padding: 3px; position: relative;
  background: conic-gradient(from 210deg, var(--vc-cyan-400), var(--vc-blue-500), var(--vc-gold-400), var(--vc-rose-hot), var(--vc-cyan-400));
  transition: transform .2s var(--vc-ease); cursor: pointer;
}
.vcs-story:hover .vcs-story-ring { transform: scale(1.05); }
.vcs-story-ring.is-me { background: var(--vc-glass-2); border: 2px dashed var(--vc-line-strong); padding: 3px; }
.vcs-story-av-btn { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; border-radius: 50%; cursor: pointer; }
.vcs-story-ring.is-seen { background: var(--vc-line-strong); }
.vcs-story-av { display: block; width: 100%; height: 100%; border-radius: 50%; overflow: hidden; border: 3px solid var(--vc-night); background: var(--vc-night-3); }
.vcs-story-av img { width: 100%; height: 100%; object-fit: cover; }
.vcs-story-av .vc-photo-ph svg { width: 40%; height: 40%; }
.vcs-story-cam {
  position: absolute; right: -2px; bottom: -2px; width: 26px; height: 26px; border-radius: 50%;
  background: var(--vc-grad-cta); display: grid; place-items: center; border: 2.5px solid var(--vc-night);
  box-shadow: var(--vc-shadow-cta);
}
.vcs-story-cam svg { width: 14px; height: 14px; }

/* ── STORY VIEWER (full screen) ───────────────────────────────────── */
.vcs-overlay-story.open { align-items: stretch; }
.vcs-story-viewer {
  position: relative; width: 100%; max-width: 460px; margin: 0 auto; height: 100dvh;
  background: #000; display: flex; flex-direction: column; overflow: hidden;
}
.vcs-sv-bars { position: absolute; top: 0; left: 0; right: 0; z-index: 4; display: flex; gap: 4px; padding: 10px 12px calc(10px + env(safe-area-inset-top,0px)); }
.vcs-sv-bar { flex: 1; height: 3px; border-radius: 99px; background: rgba(255,255,255,.32); overflow: hidden; }
.vcs-sv-bar > i { display: block; height: 100%; width: 0; background: #fff; border-radius: 99px; }
.vcs-sv-bar.done > i { width: 100%; }
.vcs-sv-bar.active > i { animation: vc-sv-fill linear forwards; }
@keyframes vc-sv-fill { from { width: 0; } to { width: 100%; } }
.vcs-sv-head { position: absolute; top: 26px; left: 12px; right: 12px; z-index: 4; display: flex; align-items: center; gap: 10px; padding-top: env(safe-area-inset-top,0px); }
/* The lettered avatar was missing from this rule. It is width:100% by design,
   so with no photo to show it stretched the whole width of the header and the
   initial sat inside a long flat oval. Everything that can stand in for a
   photo here gets the same 36px circle. */
.vcs-sv-head img,
.vcs-sv-head .vc-photo-ph,
.vcs-sv-head .vc-initial {
  width: 36px; height: 36px; flex: 0 0 auto; border-radius: 50%;
  object-fit: cover; border: 2px solid rgba(255,255,255,.85); box-sizing: border-box;
}
.vcs-sv-head .vc-initial { display: grid; place-items: center; font-size: .95rem; }
.vcs-sv-who { color: #fff; font-weight: 700; font-size: .92rem; text-shadow: 0 1px 6px rgba(0,0,0,.6); }
.vcs-sv-time { color: rgba(255,255,255,.8); font-size: .76rem; margin-left: 2px; }
.vcs-sv-close { margin-left: auto; width: 38px; height: 38px; border-radius: 50%; background: rgba(0,0,0,.35); color: #fff; font-size: 1.1rem; display: grid; place-items: center; }
.vcs-sv-stage { flex: 1; display: grid; place-items: center; position: relative; }
.vcs-sv-stage img, .vcs-sv-stage video { max-width: 100%; max-height: 100%; width: 100%; height: 100%; object-fit: contain; }
.vcs-sv-link { padding: 28px; text-align: center; color: #fff; }
.vcs-sv-link .ic { width: 64px; height: 64px; margin: 0 auto 16px; border-radius: 50%; background: var(--vc-grad-cta); display: grid; place-items: center; }
.vcs-sv-link a { display: inline-block; margin-top: 18px; padding: 12px 22px; border-radius: 99px; background: #fff; color: #060A18; font-weight: 800; text-decoration: none; word-break: break-all; }
.vcs-sv-cap { position: absolute; bottom: 0; left: 0; right: 0; padding: 16px 18px calc(28px + env(safe-area-inset-bottom,0px)); background: linear-gradient(transparent, rgba(0,0,0,.7)); color: #fff; font-size: .95rem; z-index: 3; }
.vcs-sv-nav { position: absolute; inset: 0; z-index: 2; display: flex; }
.vcs-sv-nav button { flex: 1; background: transparent; border: 0; }

/* ── STORY composer sheet ─────────────────────────────────────────── */
.vcs-story-opts { display: flex; flex-direction: column; gap: 10px; padding: 4px 2px 8px; }
.vcs-story-opt {
  display: flex; align-items: center; gap: 14px; width: 100%; padding: 16px; border-radius: var(--vc-r-md);
  background: var(--vc-glass-1); border: 1px solid var(--vc-line); color: var(--vc-text); text-align: left; transition: .2s;
}
.vcs-story-opt:hover { background: var(--vc-glass-2); border-color: var(--vc-cyan-400); }
.vcs-story-opt .ic { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--vc-grad-cta); flex: 0 0 auto; }
.vcs-story-opt .ic svg { width: 22px; height: 22px; }
.vcs-story-opt b { display: block; font-size: 1rem; }
.vcs-story-opt small { color: var(--vc-text-mute); font-size: .8rem; }

/* Video carousel cards
   Two browser defaults were showing through here. A <button> keeps a small
   padding of its own even after border and background are cleared, and that
   padding was the blue edge down both sides. And a <video> is an inline box,
   so it sits on a text baseline and leaves a pale sliver underneath — the
   line along the bottom. Zero the padding, take the video out of the text
   flow entirely, and the picture fills the frame corner to corner. */
.vcs-vidcard {
  width: 150px; aspect-ratio: 9/14; border-radius: var(--vc-r-md); overflow: hidden; position: relative;
  padding: 0; border: 0; margin: 0; line-height: 0; display: block; -webkit-appearance: none; appearance: none;
  background: #000; box-shadow: var(--vc-shadow-card);
  /* A card 150px wide at 9/14 is 233.33px tall. The card is painted to whole
     pixels, its children are clipped at the fraction, and the third of a pixel
     left over along the bottom edge is the pale hairline. Its own layer and a
     black backdrop leave nothing lighter for that sliver to reveal. */
  transform: translateZ(0); isolation: isolate;
}
/* Direct children only. Written as a descendant rule, this also caught the
   uploader's little avatar down in the overlay: it inherited the absolute
   position and the -1px offsets, then got resized to 24px, and ended up
   pinned to the top-left corner, hanging off the card. The picture that
   fills the frame is a child of the card; the avatar is not. */
.vcs-vidcard > video, .vcs-vidcard > img {
  /* Overshoot every edge by a pixel. object-fit still crops to fill, and the
     picture now runs past the clip instead of stopping a fraction short. */
  position: absolute; top: -1px; right: -1px; bottom: -1px; left: -1px; display: block;
  width: calc(100% + 2px); height: calc(100% + 2px); object-fit: cover; object-position: center;
  z-index: 0; background: #000; border-radius: inherit;
}
/* Two jobs, and they were being confused for one. Covering the pale foot is
   a rendering problem — the card's own black backdrop and the overshooting
   video already solve it. Reading the name over the picture is a legibility
   problem, and it only needs a light shade behind the words. Painting the
   whole lower half near-black to chase the hairline is what made these cards
   look heavy. So the shade is now light and short, and the foot is covered
   by the layers underneath rather than by a black wall on top. */
.vcs-vidcard-overlay {
  /* Hangs a pixel past the bottom for the same reason, and rides in its own
     layer above the video — on iOS a <video> is composited and can otherwise
     paint over a plain sibling that sits on top of it in the markup. */
  position: absolute; top: 0; left: 0; right: 0; bottom: -1px;
  z-index: 1; transform: translateZ(0);
  background:
    linear-gradient(180deg, rgba(0,0,0,.26) 0%, rgba(0,0,0,.07) 12%, rgba(0,0,0,0) 22%),
    linear-gradient(0deg,
      rgba(0,0,0,.82) 0%, rgba(0,0,0,.70) 8%, rgba(0,0,0,.46) 20%,
      rgba(0,0,0,.24) 32%, rgba(0,0,0,.09) 40%, rgba(0,0,0,0) 47%);
  display: flex; flex-direction: column; justify-content: flex-end; padding: 10px 10px 11px; line-height: 1.3;
}
/* The foot, still covered, but no longer a black band. It carries the very
   same tone the gradient reaches at its lowest point, so there is no edge to
   see — and it sits over a black card and a video that overshoots the clip,
   so whatever survives the rounding still lands on something dark. */
.vcs-vidcard-overlay::after {
  content: ""; position: absolute; left: -1px; right: -1px; bottom: -1px; height: 2px;
  background: rgba(0,0,0,.82); pointer-events: none;
}
.vcs-vidcard-play { position: absolute; top: 10px; right: 10px; width: 30px; height: 30px; border-radius: 50%; background: rgba(0,0,0,.45); backdrop-filter: blur(6px); display: grid; place-items: center; }
.vcs-vidcard-user { display: flex; align-items: center; gap: 7px; min-width: 0; }
/* Sits in the row where it belongs, and says so outright, so no rule further
   up can lift it out of the flow again. */
.vcs-vidcard-user img, .vcs-vidcard-user .vc-initial {
  position: static; inset: auto; flex: 0 0 auto;
  width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid #fff;
  box-sizing: border-box;
}
/* Only the photo becomes a block. The lettered fallback keeps its grid, which
   is what centres the initial inside the circle. */
.vcs-vidcard-user img { display: block; object-fit: cover; }
.vcs-vidcard-user span { font-size: .78rem; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vcs-vidcard-likes { font-size: .72rem; color: rgba(255,255,255,.85); margin-top: 4px; }

/* Sponsored business cards */
.vcs-bizcard {
  width: 230px; border-radius: var(--vc-r-md); overflow: hidden; position: relative;
  background: var(--vc-night-4); border: 1px solid var(--vc-line); box-shadow: var(--vc-shadow-card);
}
.vcs-bizcard-img { aspect-ratio: 16/9; }
.vcs-bizcard-img img { width: 100%; height: 100%; object-fit: cover; }
.vcs-bizcard-pill { position: absolute; top: 9px; left: 9px; font-size: .64rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; padding: 3px 8px; border-radius: 99px; background: var(--vc-grad-gold); color: #04102b; }
.vcs-bizcard-body { padding: 11px 13px 13px; }
.vcs-bizcard-name { font-weight: 700; font-size: .96rem; }
.vcs-bizcard-desc { font-size: .82rem; color: var(--vc-text-mute); margin: 4px 0 9px; line-height: 1.4; }
.vcs-bizcard-cta { display: inline-block; font-size: .8rem; font-weight: 700; color: var(--vc-gold-400); }

/* ═══════════════════════════ TABS + CHIPS ═══════════════════════════ */
.vcs-tabs { display: flex; gap: 8px; border-bottom: 1px solid var(--vc-line); margin: 24px 0 14px; }
.vcs-tab { padding: 11px 4px; font-weight: 700; color: var(--vc-text-mute); position: relative; transition: .2s; }
.vcs-tab.active { color: var(--vc-text); }
.vcs-tab.active::after { content:''; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; border-radius: 99px 99px 0 0; background: var(--vc-grad-cta); }

.vcs-chips { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 12px; scrollbar-width: none; }
.vcs-chips::-webkit-scrollbar { display: none; }
.vcs-chip {
  flex: 0 0 auto; padding: 8px 15px; border-radius: 99px; font-size: .84rem; font-weight: 600;
  color: var(--vc-text-soft); background: var(--vc-glass-1); border: 1px solid var(--vc-line); transition: .2s var(--vc-ease);
}
.vcs-chip:hover { background: var(--vc-glass-2); }
.vcs-chip.active { color: #fff; background: var(--vc-grad-cta); border-color: transparent; box-shadow: var(--vc-shadow-cta); }

/* ═══════════════════════════ COMPOSER ═══════════════════════════ */
.vcs-composer { background: var(--vc-glass-1); border: 1px solid var(--vc-line); border-radius: var(--vc-r-lg); padding: 14px; margin-bottom: 18px; box-shadow: var(--vc-shadow-card); }
.vcs-composer-main { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 4px; }
.vcs-composer-avatar { width: 44px; height: 44px; border-radius: 50%; overflow: hidden; flex: 0 0 auto; display: grid; place-items: center; background: var(--vc-grad-capsule); font-weight: 800; }
.vcs-composer-avatar img { width: 100%; height: 100%; object-fit: cover; }
.vcs-composer-main > span:last-child { color: var(--vc-text-mute); font-size: .95rem; }
.vcs-composer-actions { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--vc-line); }
.vcs-composer-actions button { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 9px; border-radius: var(--vc-r-sm); font-size: .82rem; font-weight: 600; color: var(--vc-text-soft); background: var(--vc-glass-1); border: 1px solid var(--vc-line); transition: .2s; }
.vcs-composer-actions button:hover { background: var(--vc-glass-2); color: var(--vc-cyan-300); transform: translateY(-1px); }
.vcs-composer-actions svg { width: 17px; height: 17px; }

/* Business / wockie promo strips */
.vcs-strip { display: flex; align-items: center; gap: 14px; padding: 15px; border-radius: var(--vc-r-lg); margin-bottom: 16px; border: 1px solid var(--vc-line); background: linear-gradient(120deg, rgba(34,211,238,.06), rgba(212,160,23,.05)); }
.vcs-strip.gold { background: linear-gradient(120deg, rgba(212,160,23,.12), rgba(232,184,48,.04)); }
.vcs-strip-icon { width: 50px; height: 50px; border-radius: 14px; display: grid; place-items: center; flex: 0 0 auto; background: var(--vc-glass-2); color: var(--vc-cyan-300); }
.vcs-strip.gold .vcs-strip-icon { color: var(--vc-gold-400); }
.vcs-strip-copy { flex: 1; min-width: 0; }
.vcs-strip-kicker { font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--vc-cyan-300); }
.vcs-strip.gold .vcs-strip-kicker { color: var(--vc-gold-400); }
.vcs-strip-copy strong { display: block; font-size: 1rem; margin: 2px 0; }
.vcs-strip-copy span { font-size: .83rem; color: var(--vc-text-mute); }
.vcs-strip-btn { flex: 0 0 auto; padding: 10px 18px; border-radius: 99px; font-weight: 700; font-size: .85rem; color: #fff; background: var(--vc-grad-cta); box-shadow: var(--vc-shadow-cta); transition: .2s; }
.vcs-strip.gold .vcs-strip-btn { background: var(--vc-grad-gold); color: #04102b; box-shadow: var(--vc-shadow-gold); }
.vcs-strip-btn:hover { transform: translateY(-2px); }

/* Compact promo strip (Have a business?) */
.vcs-strip--compact { padding: 9px 12px; gap: 10px; margin-bottom: 14px; }
.vcs-strip--compact .vcs-strip-icon { width: 36px; height: 36px; border-radius: 10px; }
.vcs-strip--compact .vcs-strip-icon svg { width: 20px; height: 20px; }
.vcs-strip--compact .vcs-strip-kicker { font-size: .62rem; letter-spacing: .06em; }
.vcs-strip--compact .vcs-strip-copy strong { font-size: .9rem; margin: 1px 0; }
.vcs-strip--compact .vcs-strip-copy span { font-size: .75rem; }
.vcs-strip--compact .vcs-strip-btn { padding: 8px 14px; font-size: .8rem; }

/* WhatsApp + promo actions */
.vcs-wa-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 14px; border-radius: 99px; font-weight: 700; font-size: .82rem; color: #fff; background: #25D366; box-shadow: 0 6px 16px -6px rgba(37,211,102,.6); transition: .2s; }
.vcs-wa-btn:hover { filter: brightness(1.05); transform: translateY(-1px); }
.vcs-wa-btn.sm { padding: 7px; border-radius: 50%; flex: 0 0 auto; }
/* Four controls will not fit across a phone. Crammed onto one line they ran
   off the edge of the card. So the row breaks the way a designer would break
   it, not the way the browser would: the offer itself gets the full width on
   top, and the three secondary actions share the line below in equal parts.
   One primary, then a row of equals — everything on the same grid, the same
   height, the same corner. */
.vcs-promo-actions { display: flex; flex-wrap: wrap; align-items: stretch; gap: 9px; padding: 0 15px 14px; }
.vcs-promo-actions > * {
  min-height: 48px; border-radius: 14px; font-family: inherit; font-weight: 700;
  font-size: .92rem; letter-spacing: -.01em; line-height: 1.1;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 0 14px; margin: 0; text-align: center; text-decoration: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  -webkit-tap-highlight-color: transparent;
  transition: transform .16s var(--vc-ease), filter .16s, background .18s, border-color .18s;
}
.vcs-promo-actions > *:active { transform: scale(.975); }
/* The offer: full width, on its own line, unmistakably the main action. */
.vcs-promo-actions .vcp-main { flex: 1 1 100%; font-size: 1rem; }
/* Share and WhatsApp split what is left, exactly in half. */
.vcs-promo-actions .vcp-sec { flex: 1 1 0; min-width: 0; }
.vcs-promo-actions .vcp-sec svg { width: 18px; height: 18px; flex: 0 0 auto; }
.vcs-promo-actions .vcp-sec span { overflow: hidden; text-overflow: ellipsis; }
.vcs-promo-actions .vcs-act-share {
  color: #241A02; border: 0;
  background: linear-gradient(150deg,#FBE49B,#F6D268 42%,#E8B830 74%,#D4A017);
  box-shadow: 0 10px 22px -12px rgba(232,184,48,.8), inset 0 1px 1px rgba(255,255,255,.7);
}
.vcs-promo-actions .vcs-act-share:hover { filter: brightness(1.04); }
/* Delete keeps a fixed square so the two labelled buttons stay equal. */
.vcs-promo-actions .vcs-act-del {
  flex: 0 0 52px; width: 52px; padding: 0; color: #FF8FA3;
  background: rgba(244,63,94,.12); border: 1px solid rgba(244,63,94,.42);
}
.vcs-promo-actions .vcs-act-del svg { width: 21px; height: 21px; }
.vcs-promo-actions .vcs-act-del:hover { color: #fff; background: rgba(244,63,94,.9); border-color: rgba(244,63,94,.9); }
/* Below 340px even two labels are tight, so the words step aside and the
   icons carry the meaning. Nothing ever leaves the card. */
@media (max-width: 340px) {
  .vcs-promo-actions .vcp-sec span { display: none; }
  .vcs-promo-actions .vcp-sec { gap: 0; }
}
.vcs-bizcard-actions { display: flex; align-items: center; gap: 8px; margin-top: 9px; }
.vcs-bizcard-actions .vcs-bizcard-cta { margin: 0; }

/* ═══════════════════════════ FEED CARDS ═══════════════════════════ */
.vcs-feed { display: flex; flex-direction: column; gap: 18px; }
.vcs-post {
  background: var(--vc-glass-1); border: 1px solid var(--vc-line); border-radius: var(--vc-r-lg);
  overflow: hidden; box-shadow: var(--vc-shadow-card); animation: vc-fade-up .5s var(--vc-ease) both;
}
@keyframes vc-fade-up { from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:none} }
.vcs-post-head { display: flex; align-items: center; gap: 11px; padding: 14px 15px 0; }
.vcs-post-avatar { width: 44px; height: 44px; border-radius: 50%; overflow: hidden; flex: 0 0 auto; border: 2px solid var(--vc-line-strong); }
.vcs-post-avatar img { width: 100%; height: 100%; object-fit: cover; }
.vcs-post-meta { flex: 1; min-width: 0; }
.vcs-post-name { font-weight: 700; font-size: .96rem; display: flex; align-items: center; gap: 6px; }
.vcs-verified { width: 15px; height: 15px; color: var(--vc-cyan-400); }
.vcs-post-sub { font-size: .78rem; color: var(--vc-text-dim); }
.vcs-post-cat { font-size: .72rem; font-weight: 700; padding: 4px 10px; border-radius: 99px; background: var(--vc-glass-2); color: var(--vc-cyan-300); border: 1px solid var(--vc-line); white-space: nowrap; }
.vcs-post-body { padding: 12px 15px; font-size: .98rem; line-height: 1.55; color: var(--vc-text-soft); }
.vcs-post-media { width: 100%; background: #000; }
.vcs-post-media img, .vcs-post-media video { width: 100%; max-height: 540px; object-fit: cover; }

/* Media gallery (carousel inside post) */
.vcs-gallery { position: relative; }
.vcs-gallery-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.vcs-gallery-track::-webkit-scrollbar { display: none; }
.vcs-gallery-track > * { flex: 0 0 100%; scroll-snap-align: center; }
.vcs-gallery-dots { position: absolute; bottom: 10px; left: 0; right: 0; display: flex; justify-content: center; gap: 6px; }
.vcs-gallery-dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.5); transition: .2s; }
.vcs-gallery-dots i.active { background: #fff; width: 18px; border-radius: 99px; }
.vcs-gallery-count { position: absolute; top: 10px; right: 10px; font-size: .72rem; font-weight: 700; padding: 3px 9px; border-radius: 99px; background: rgba(0,0,0,.55); backdrop-filter: blur(6px); }

/* Audio post player */
.vcs-audiopost { display: flex; align-items: center; gap: 13px; margin: 0 15px 12px; padding: 13px; border-radius: var(--vc-r-md); background: linear-gradient(120deg, rgba(59,130,246,.12), rgba(34,211,238,.06)); border: 1px solid var(--vc-line); }
.vcs-audiopost-btn { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; flex: 0 0 auto; background: var(--vc-grad-cta); color: #fff; box-shadow: var(--vc-shadow-cta); }
.vcs-audiopost-wave { flex: 1; display: flex; align-items: center; gap: 2px; height: 34px; }
.vcs-audiopost-wave i { flex: 1; background: var(--vc-cyan-400); border-radius: 99px; opacity: .55; min-width: 2px; }
.vcs-audiopost-time { font-size: .8rem; font-weight: 600; color: var(--vc-text-mute); flex: 0 0 auto; }

/* A finger is about 44px wide. These are the controls people use most, so
   they are sized to be hit without aiming, and read without leaning in. */
.vcs-post-actions { display: flex; align-items: center; gap: 2px; padding: 8px 10px 14px; }
.vcs-act { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px 13px; border-radius: 99px; font-size: .95rem; font-weight: 700; color: var(--vc-text-mute); transition: .15s var(--vc-ease); }
.vcs-act:hover { background: var(--vc-glass-2); color: var(--vc-text); }
.vcs-act svg { width: 23px; height: 23px; }
@media (max-width: 380px) {
  .vcs-post-actions { padding-left: 6px; padding-right: 6px; }
  .vcs-act { padding: 10px 9px; font-size: .9rem; gap: 6px; }
  .vcs-act svg { width: 21px; height: 21px; }
}
.vcs-act.is-liked { color: var(--vc-rose-hot); }
.vcs-act.is-liked svg { fill: var(--vc-rose-hot); stroke: var(--vc-rose-hot); }
.vcs-act.is-local-pop svg { animation: vc-heart 0.5s var(--vc-ease-spring); }
@keyframes vc-heart { 0%{transform:scale(1)} 35%{transform:scale(1.5)} 100%{transform:scale(1)} }
.vcs-act-share { margin-left: auto; }

/* ── How the row under a post is arranged ─────────────────────────────
   The order in the markup grew by accretion: react, then the owner's eye,
   then comment, then share pushed to the far right by itself, then the
   bin. So the three things everyone uses were split apart by a tool only
   the author can see, and Share floated alone against the edge.

   Rearranged, without touching the markup, into the two groups that
   actually exist: what any reader does — react, comment, share — together
   on the left, and the author's own tools — who liked it, delete — set
   apart on the right. Same sizes as before; only the placing changes. */
.vcs-post-actions { justify-content: flex-start; gap: 4px; }
/* Packing the row to the left made it tighter, and a flex item shrinks
   whatever it can — which turned out to be the icons, squeezed down to
   nothing. The Share arrow vanished. An icon is never the thing that
   should give way: it is fixed, the words shrink instead. */
.vcs-post-actions .vcs-act { flex: 0 1 auto; min-width: 0; white-space: nowrap; }
.vcs-post-actions .vcs-act svg { flex: 0 0 auto; }
.vcs-post-actions .vc-rx-glyph,
.vcs-post-actions .vc-rx-glyph > *,
.vcs-post-actions .vc-rx-more svg { flex: 0 0 auto; }
/* If the row still runs short of room, the words step aside before any
   icon does — the arrow stays, "Share" is what goes. */
@media (max-width: 360px) {
  .vcs-post-actions .vcs-act-share { font-size: 0; gap: 0; }
  .vcs-post-actions .vcs-act-share svg { font-size: 1rem; }
  .vcs-post-actions .vc-rx-lb { display: none; }
}
.vcs-post-actions .vc-rx        { order: 1; }
.vcs-post-actions .vc-rx-more   { order: 1; }
.vcs-post-actions [data-comments] { order: 2; }
.vcs-post-actions .vcs-act-share  { order: 3; margin-left: 0; }
/* The author's tools begin here — the gap in front of them is what says
   they are a different kind of thing. */
.vcs-post-actions .vcs-act-likers { order: 4; margin-left: auto; }
.vcs-post-actions .vcs-act-del    { order: 5; }
/* Icon-only controls read best as squares rather than wide pills. */
.vcs-post-actions .vcs-act-likers,
.vcs-post-actions .vcs-act-del { padding-left: 11px; padding-right: 11px; }

/* Load more / empty */
.vcs-loadmore-wrap { text-align: center; padding: 20px 0; }
.vcs-loadmore { padding: 12px 28px; border-radius: 99px; font-weight: 700; color: var(--vc-text); background: var(--vc-glass-2); border: 1px solid var(--vc-line-strong); transition: .2s; }
.vcs-loadmore:hover { background: var(--vc-glass-3); border-color: var(--vc-cyan-400); }
.vcs-empty { text-align: center; padding: 40px 20px; color: var(--vc-text-mute); }
.vcs-spinner { width: 38px; height: 38px; border: 3px solid var(--vc-line); border-top-color: var(--vc-cyan-400); border-radius: 50%; margin: 30px auto; animation: vc-spin .8s linear infinite; }

/* ═══════════════════════════ FOOTER ═══════════════════════════ */
.vcs-footer { text-align: center; padding: 34px 0 14px; color: var(--vc-text-dim); font-size: .82rem; line-height: 1.7; }
.vcs-footer .brand { font-family: var(--vc-brand); font-weight: 800; font-size: 1.05rem; color: var(--vc-text); }
.vcs-footer a { color: var(--vc-cyan-300); }

/* ═══════════════════════════ BOTTOM NAV ═══════════════════════════ */
.vcs-bottom-nav {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 0; z-index: 70;
  width: 100%; max-width: 720px;
  display: flex; align-items: stretch; justify-content: space-around;
  padding: 8px var(--vc-gutter) calc(8px + env(safe-area-inset-bottom, 0px));
  background: rgba(6,10,24,.86); backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  border-top: 1px solid var(--vc-line);
}
.vcs-bn-btn { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 2px; color: var(--vc-text-dim); font-size: .64rem; font-weight: 600; transition: .2s var(--vc-ease); }
.vcs-bn-btn svg { width: 22px; height: 22px; }
.vcs-bn-btn.active, .vcs-bn-btn:hover { color: var(--vc-cyan-300); }
.vcs-bn-btn.active::before { content:''; position: absolute; top: 0; width: 24px; height: 3px; border-radius: 99px; background: var(--vc-grad-cta); }
.vcs-bn-create svg { color: #04102b; }
.vcs-bn-create .ic { width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center; background: var(--vc-grad-cta); box-shadow: var(--vc-shadow-cta); margin-bottom: 1px; }
.vcs-bn-create { color: var(--vc-cyan-300); }
.vcs-bn-live.active, .vcs-bn-live:hover { color: var(--vc-rose-hot); }
.vcs-bn-dot { position: absolute; top: 4px; right: 50%; transform: translateX(16px); width: 8px; height: 8px; border-radius: 50%; background: var(--vc-green); border: 2px solid var(--vc-night); }
.vcs-bn-avatar { width: 24px; height: 24px; border-radius: 50%; overflow: hidden; border: 1.5px solid currentColor; }
.vcs-bn-avatar img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 480px) {
  .vcs-bn-btn span { font-size: .58rem; }
}


/* Compact Stories on phones */
@media (max-width: 480px) {
  .vcs-friend, .vcs-story { width: 78px; }
  .vcs-friend-ring, .vcs-story-ring { width: 64px; height: 64px; }
  .vcs-story-cam { width: 22px; height: 22px; }
  .vcs-story-cam svg { width: 12px; height: 12px; }
}

/* Delete (owner only) + audio playing state */
.vcs-act-del { color: var(--vc-text-mute); }
.vcs-act-del:hover { color: var(--vc-rose-hot); background: rgba(244,63,94,.1); }
.vcs-audiopost.is-playing { border-color: var(--vc-cyan-400); }
.vcs-audiopost.is-playing .vcs-audiopost-btn { box-shadow: 0 0 0 4px rgba(34,211,238,.25); }
/* Audio upload option in composer */
.vcs-rec-or { text-align: center; color: var(--vc-text-dim); font-size: .76rem; margin: 10px 0 6px; }
.vcs-rec-upload { width: 100%; padding: 11px; border-radius: var(--vc-r-md); font-weight: 700; color: var(--vc-text); background: var(--vc-glass-2); border: 1px solid var(--vc-line-strong); transition: .2s; }
.vcs-rec-upload:hover { background: var(--vc-glass-3); border-color: var(--vc-cyan-400); }

/* Delete button on owned ads (Sponsored cards) */
.vcs-bizcard-del { position: absolute; top: 9px; right: 9px; z-index: 2; width: 30px; height: 30px; border-radius: 50%; background: rgba(0,0,0,.55); color: #fff; display: grid; place-items: center; backdrop-filter: blur(6px); transition: .2s; }
.vcs-bizcard-del svg { width: 15px; height: 15px; }
.vcs-bizcard-del:hover { background: var(--vc-rose-hot); }

/* ── Vivu Wockie Tockie (live voice call) ── */
.vcs-rtc-ov { align-items: center !important; justify-content: center; z-index: 200; overflow-y: auto; padding: 10px; }
.vcs-rtc-card { background: linear-gradient(160deg, var(--vc-night-3), var(--vc-night-2)); border: 1px solid var(--vc-line-strong); border-radius: var(--vc-r-xl); padding: 20px 18px; width: 94%; max-width: 400px; max-height: 94dvh; box-sizing: border-box; text-align: center; box-shadow: var(--vc-shadow-float); animation: vc-fade-up .3s var(--vc-ease) both; display: flex; flex-direction: column; align-items: center; }
.vcs-rtc-av { width: 120px; height: 120px; border-radius: 50%; overflow: hidden; margin: 16px auto; border: 3px solid var(--vc-cyan-400); flex: 0 0 auto; }
.vcs-rtc-av img { width: 100%; height: 100%; object-fit: cover; }
.vcs-rtc-av.ring { animation: vc-pulse 1.2s ease-in-out infinite; }
.vcs-rtc-av.live { border-color: var(--vc-green); }
.vcs-rtc-name { font-family: var(--vc-display); font-weight: 800; font-size: 1.4rem; margin-bottom: 4px; flex: 0 0 auto; }
.vcs-rtc-sub { color: var(--vc-text-mute); font-size: .9rem; margin-bottom: 16px; flex: 0 0 auto; }
.vcs-rtc-actions { display: flex; gap: 10px; justify-content: center; flex: 0 0 auto; width: 100%; }
.vcs-rtc-btn { flex: 1; max-width: 160px; padding: 14px 16px; border-radius: 99px; font-weight: 800; font-size: .95rem; letter-spacing: .01em; color: #fff;
  background: linear-gradient(160deg, rgba(255,255,255,.10), rgba(255,255,255,.03)); border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2);
  box-shadow: 0 6px 20px -10px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.12);
  transition: transform .14s var(--vc-ease), box-shadow .2s, background .2s; cursor: pointer; }
.vcs-rtc-btn:hover { background: linear-gradient(160deg, rgba(255,255,255,.17), rgba(255,255,255,.06)); transform: translateY(-1px); }
.vcs-rtc-btn:active { transform: scale(.95); }
.vcs-rtc-btn.accept { color: #04130b; border: 0; background: linear-gradient(135deg, #2BF5A0, #16C77E);
  box-shadow: 0 10px 28px -8px rgba(22,224,138,.65), inset 0 1px 0 rgba(255,255,255,.45); animation: vc-acc-glow 1.7s ease-in-out infinite; }
.vcs-rtc-btn.decline { color: #fff; border: 0; background: linear-gradient(135deg, #FF6A8B, #F4365E);
  box-shadow: 0 10px 28px -8px rgba(244,63,94,.6), inset 0 1px 0 rgba(255,255,255,.25); }
.vcs-rtc-btn.accept:active, .vcs-rtc-btn.decline:active { transform: scale(.95); }
@keyframes vc-acc-glow { 0%,100% { box-shadow: 0 10px 28px -8px rgba(22,224,138,.5), inset 0 1px 0 rgba(255,255,255,.45); }
  50% { box-shadow: 0 14px 38px -6px rgba(22,224,138,.92), inset 0 1px 0 rgba(255,255,255,.55); } }

/* ── WhatsApp-style round call controls ── */
.vcs-rtc-actions { display: flex; gap: 16px 18px; justify-content: center; align-items: flex-start; flex-wrap: wrap; flex: 0 0 auto; width: 100%; }
.vcs-rtc-cwrap { display: flex; flex-direction: column; align-items: center; gap: 7px; }
.vcs-rtc-cwrap em { font-style: normal; font-size: .72rem; font-weight: 600; color: rgba(255,255,255,.82); letter-spacing: .01em; }
.vcs-rtc-cbtn { width: 58px; height: 58px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; padding: 0;
  background: linear-gradient(160deg, rgba(255,255,255,.18), rgba(255,255,255,.05)); border: 1px solid rgba(255,255,255,.16);
  -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2);
  box-shadow: 0 8px 22px -10px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.18);
  transition: transform .14s var(--vc-ease), background .2s, box-shadow .2s; cursor: pointer; }
.vcs-rtc-cbtn svg { width: 24px; height: 24px; display: block; }
.vcs-rtc-cbtn:hover { transform: translateY(-2px); }
.vcs-rtc-cbtn:active { transform: scale(.92); }
.vcs-rtc-cbtn.on { background: #fff; color: #0b1020; border-color: #fff; box-shadow: 0 10px 26px -10px rgba(255,255,255,.5), inset 0 1px 0 rgba(255,255,255,.6); }
.vcs-rtc-cbtn.accept { width: 66px; height: 66px; color: #04130b; border: 0; background: linear-gradient(135deg, #2BF5A0, #16C77E);
  box-shadow: 0 12px 30px -8px rgba(22,224,138,.7), inset 0 1px 0 rgba(255,255,255,.5); animation: vc-acc-glow 1.7s ease-in-out infinite; }
.vcs-rtc-cbtn.accept svg { width: 28px; height: 28px; }
.vcs-rtc-cbtn.decline { width: 66px; height: 66px; color: #fff; border: 0; background: linear-gradient(135deg, #FF6A8B, #F4365E);
  box-shadow: 0 12px 30px -8px rgba(244,63,94,.65), inset 0 1px 0 rgba(255,255,255,.25); }
.vcs-rtc-cbtn.decline svg { width: 28px; height: 28px; }
.vcs-rtc-fs .vcs-rtc-cwrap em { color: rgba(255,255,255,.92); text-shadow: 0 1px 4px rgba(0,0,0,.5); }
.vcs-wock-row { display: flex; align-items: center; gap: 12px; padding: 11px 4px; border-bottom: 1px solid var(--vc-line); }
.vcs-wock-av { width: 46px; height: 46px; border-radius: 50%; overflow: hidden; flex: 0 0 auto; background: var(--vc-night-3); }
.vcs-wock-av img { width: 100%; height: 100%; object-fit: cover; }
.vcs-wock-name { flex: 1; font-weight: 700; display: flex; flex-direction: column; min-width: 0; }
.vcs-wock-name small { color: var(--vc-green); font-weight: 600; font-size: .74rem; }
.vcs-wock-call { padding: 10px 24px; border-radius: 99px; font-weight: 800; color: #fff; background: var(--vc-grad-cta); box-shadow: 0 8px 22px -8px rgba(99,102,241,.6), inset 0 1px 0 rgba(255,255,255,.3); border: 0; flex: 0 0 auto; transition: transform .14s var(--vc-ease), box-shadow .2s; cursor: pointer; }
.vcs-wock-call:hover { transform: translateY(-1px); }
.vcs-wock-call:active { transform: scale(.96); }

/* Push-to-talk button inside a live call */
.vcs-rtc-actions { flex-wrap: wrap; }
.vcs-rtc-ptt { flex-basis: 100%; padding: 18px; border-radius: var(--vc-r-pill); font-weight: 800; font-size: 1.06rem; color: #fff; background: var(--vc-grad-cta); box-shadow: 0 12px 30px -10px rgba(99,102,241,.6), inset 0 1px 0 rgba(255,255,255,.3); border: 0; user-select: none; -webkit-user-select: none; touch-action: none; transition: transform .1s, box-shadow .2s, background .15s; }
.vcs-rtc-ptt:active { transform: scale(.98); }
.vcs-rtc-ptt.talking { background: var(--vc-rose-hot); box-shadow: 0 0 0 6px rgba(244,63,94,.25); }

/* ── Podcast live room (Amazon IVS) ── */
.vcs-pod-live { display: inline-flex; align-items: center; gap: 7px; font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--vc-rose-hot); margin-bottom: 6px; }
.vcs-pod-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--vc-rose-hot); box-shadow: 0 0 10px var(--vc-rose-hot); animation: vc-pulse 1.4s ease-in-out infinite; }
.vcs-pod-title { font-family: var(--vc-display); font-weight: 800; font-size: 1.35rem; margin-bottom: 16px; }
.vcs-pod-stage { display: flex; flex-wrap: wrap; gap: 16px 18px; }
.vcs-pod-spk { width: 84px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.vcs-pod-spk b { font-size: .85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 84px; }
.vcs-pod-spk small { color: var(--vc-gold-400); font-weight: 700; font-size: .68rem; text-transform: uppercase; letter-spacing: .04em; }
.vcs-wock-av.big { width: 72px; height: 72px; border: 3px solid var(--vc-cyan-400); }

/* Live podcast card shared to the feed */
.vcs-pod-feedcard { background: linear-gradient(160deg, rgba(244,63,94,.12), rgba(34,211,238,.06)); border: 1px solid rgba(244,63,94,.3); border-radius: var(--vc-r-md); padding: 16px; }
.vcs-pod-feedcard-live { display: inline-flex; align-items: center; gap: 7px; font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--vc-rose-hot); }
.vcs-pod-feedcard-title { font-family: var(--vc-display); font-weight: 800; font-size: 1.1rem; margin-top: 6px; }

.vcs-pod-feedcard.ended { background: var(--vc-glass-1); border-color: var(--vc-line); opacity: .85; }
.vcs-pod-feedcard.ended .vcs-pod-feedcard-live { color: var(--vc-text-mute); }

/* Live video tiles (IVS) */
.vcs-live-stage { display: flex !important; flex-wrap: wrap; gap: 6px; align-content: flex-start; padding: 6px; overflow-y: auto; background: #000; }
.vcs-lv-tile { position: relative; flex: 1 1 260px; min-width: 200px; max-width: 430px; aspect-ratio: 9/16; background: #0b1020; border-radius: 18px; overflow: hidden; box-shadow: 0 12px 40px -16px rgba(34,211,238,.45); }
.vcs-lv-tile video { width: 100%; height: 100%; object-fit: cover; }
.vcs-lv-tile.self { outline: 2px solid var(--vc-cyan-400); outline-offset: -2px; }
.vcs-lv-name { position: absolute; bottom: 6px; left: 6px; font-size: .74rem; font-weight: 700; color: #fff; background: rgba(0,0,0,.5); padding: 2px 8px; border-radius: 99px; }

/* ── Games: Trivia + Tap Stars ── */
.vcs-trivia-q { font-family: var(--vc-display); font-weight: 700; font-size: 1.15rem; line-height: 1.35; margin: 6px 0 18px; }
.vcs-trivia-opts { display: flex; flex-direction: column; gap: 10px; }
.vcs-trivia-opt { padding: 15px; border-radius: var(--vc-r-md); font-weight: 700; text-align: left; color: var(--vc-text); background: var(--vc-glass-1); border: 1px solid var(--vc-line-strong); transition: .15s; }
.vcs-trivia-opt:hover:not(:disabled) { background: var(--vc-glass-2); border-color: var(--vc-cyan-400); }
.vcs-trivia-opt.correct { background: var(--vc-green); color: #04102b; border: 0; }
.vcs-trivia-opt.wrong { background: var(--vc-rose-hot); color: #fff; border: 0; }
.vcs-tap-board { position: relative; height: 360px; border-radius: var(--vc-r-md); overflow: hidden; background: radial-gradient(circle at 50% 30%, rgba(34,211,238,.12), transparent 60%), var(--vc-night-3); border: 1px solid var(--vc-line); }
.vcs-tap-star { position: absolute; font-size: 2rem; background: none; border: 0; animation: vc-tap-pop .15s var(--vc-ease-spring); cursor: pointer; }
@keyframes vc-tap-pop { from { transform: scale(.3); } to { transform: scale(1); } }
.vcs-game-card.trivia .emoji, .vcs-game-card.tap .emoji { filter: none; }

/* Vivu Elly · send-a-capsule payment */
.vcs-elly-pay { text-align: center; padding: 12px 14px; border-top: 1px solid var(--vc-line); }
.vcs-elly-pay > span { display: block; font-size: .8rem; font-weight: 700; color: var(--vc-text-soft); margin-bottom: 8px; }

/* VivuProfile · your posts */
.vcs-profile-mine-label { font-family: var(--vc-brand); font-weight: 800; font-size: 1rem; margin: 20px 0 10px; }
.vcs-profile-mine { display: flex; flex-direction: column; gap: 12px; }
.vcs-vp-post { background: var(--vc-glass-1); border: 1px solid var(--vc-line); border-radius: var(--vc-r-md); overflow: hidden; }
.vcs-vp-thumb { width: 100%; max-height: 320px; object-fit: cover; display: block; background: #000; }
.vcs-vp-text { padding: 12px 14px; font-size: .95rem; color: var(--vc-text-soft); line-height: 1.5; }
.vcs-vp-row { display: flex; align-items: center; justify-content: space-between; padding: 8px 14px 12px; }
.vcs-vp-time { font-size: .78rem; color: var(--vc-text-mute); }
.vcs-vp-del { color: var(--vc-text-mute); font-size: 1rem; padding: 4px 8px; border-radius: 8px; }
.vcs-vp-del:hover { color: var(--vc-rose-hot); background: rgba(244,63,94,.1); }

/* ═══════════ VivuProfile · premium compact actions + Friends panel ═══════════ */
/* kill horizontal jitter while swiping the profile sheet */
.vcs-sheet-profile { overflow-x: hidden; }
.vcs-profile-bio, .vcs-vp-text, .vcs-fr-meta b, .vcs-fr-meta small { overflow-wrap: anywhere; word-break: break-word; }

/* horizontal pill carousel of actions (smaller, premium) */
.vcs-profile-actions {
  display: flex; flex-wrap: nowrap; gap: 8px; margin: 16px 0 4px;
  overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch; padding-bottom: 4px; scrollbar-width: none;
}
.vcs-profile-actions::-webkit-scrollbar { display: none; }
.vcs-pa-btn {
  flex: 0 0 auto; scroll-snap-align: start; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 15px; border-radius: var(--vc-r-pill);
  font-family: var(--vc-font); font-weight: 700; font-size: .82rem; line-height: 1;
  color: var(--vc-text); background: var(--vc-glass-2); border: 1px solid var(--vc-line-strong);
  transition: .18s var(--vc-ease); cursor: pointer;
}
.vcs-pa-btn:hover { background: var(--vc-glass-3); border-color: var(--vc-cyan-400); transform: translateY(-1px); }
.vcs-pa-btn.is-primary { color: #fff; background: var(--vc-grad-cta); border-color: transparent; box-shadow: var(--vc-shadow-cta); }
.vcs-pa-btn.is-danger { color: #ffd9d9; }
.vcs-pa-btn.is-danger:hover { color: #fff; background: rgba(244,63,94,.18); border-color: var(--vc-rose-hot); }
.vcs-pa-btn.sm { padding: 7px 12px; font-size: .76rem; }

/* request count chip */
.vcs-fr-c { min-width: 17px; height: 17px; padding: 0 5px; display: inline-grid; place-items: center;
  font-size: .64rem; font-weight: 800; color: #04102b; background: var(--vc-grad-gold); border-radius: 99px; }

/* Friends panel */
.vcs-fr-back { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%;
  font-size: 1.5rem; line-height: 1; color: var(--vc-text-soft); background: var(--vc-glass-1); border: 1px solid var(--vc-line); }
.vcs-fr-back:hover { background: var(--vc-glass-2); color: var(--vc-text); }
.vcs-fr-tabs { display: flex; gap: 6px; margin: 14px 0 6px; }
.vcs-fr-tab { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 10px; border-radius: var(--vc-r-md); font-weight: 700; font-size: .85rem;
  color: var(--vc-text-mute); background: var(--vc-glass-1); border: 1px solid var(--vc-line); transition: .18s var(--vc-ease); }
.vcs-fr-tab.active { color: var(--vc-text); background: var(--vc-glass-3); border-color: var(--vc-cyan-400); }
.vcs-fr-body { margin-top: 8px; display: flex; flex-direction: column; gap: 8px; min-height: 120px; }
.vcs-fr-empty { text-align: center; color: var(--vc-text-mute); padding: 26px 10px; font-size: .9rem; }
.vcs-fr-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px;
  background: var(--vc-glass-1); border: 1px solid var(--vc-line); border-radius: var(--vc-r-md); }
.vcs-fr-av { width: 46px; height: 46px; flex: 0 0 auto; border-radius: 50%; overflow: hidden; cursor: pointer;
  border: 2px solid var(--vc-line-strong); background: var(--vc-night-3); }
.vcs-fr-av img { width: 100%; height: 100%; object-fit: cover; }
.vcs-fr-meta { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.vcs-fr-meta b { font-size: .92rem; font-weight: 700; }
.vcs-fr-meta small { font-size: .76rem; color: var(--vc-text-mute); }
.vcs-fr-acts { flex: 0 0 auto; display: flex; gap: 6px; }

/* ═══════════ Footer (legal) + Legal viewer ═══════════ */
.vcs-footer { margin: 34px 0 10px; padding: 22px 16px; border-top: 1px solid var(--vc-line); text-align: center; }
.vcs-footer-brand { font-family: var(--vc-brand); font-weight: 800; font-size: 1.05rem; margin-bottom: 12px; }
.vcs-footer-links { display: flex; flex-wrap: wrap; gap: 8px 16px; justify-content: center; margin-bottom: 14px; }
.vcs-footer-links button { background: none; border: 0; color: var(--vc-text-soft); font-size: .82rem; font-weight: 600; cursor: pointer; padding: 4px 2px; transition: .15s; }
.vcs-footer-links button:hover { color: var(--vc-cyan-300); text-decoration: underline; }
.vcs-footer-contact { font-size: .8rem; color: var(--vc-text-mute); margin-bottom: 10px; }
.vcs-footer-contact a { color: var(--vc-cyan-300); }
.vcs-footer-legal { font-size: .72rem; color: var(--vc-text-dim); line-height: 1.55; max-width: 620px; margin: 0 auto; }

.vcs-legal-sheet { max-height: 86vh; display: flex; flex-direction: column; }
.vcs-legal-body { overflow-y: auto; padding-right: 4px; font-size: .9rem; line-height: 1.65; color: var(--vc-text-soft); }
.vcs-legal-body h4 { font-family: var(--vc-brand); font-weight: 700; color: var(--vc-text); font-size: .98rem; margin: 18px 0 6px; }
.vcs-legal-body p { margin: 0 0 10px; }
.vcs-legal-body ul { margin: 0 0 10px; padding-left: 20px; }
.vcs-legal-body li { margin: 3px 0; }
.vcs-legal-body a { color: var(--vc-cyan-300); }
.vcs-legal-body .lg-meta { font-size: .78rem; color: var(--vc-text-mute); }
.vcs-legal-foot { margin: 14px 0 0; font-size: .74rem; color: var(--vc-text-dim); font-style: italic; }

/* ═══════════ Age gate note (register) ═══════════ */
.vcs-age-note { font-size: .82rem; line-height: 1.5; border-radius: var(--vc-r-md); padding: 10px 12px; margin: -4px 0 12px; }
.vcs-age-note.warn { color: #ffe8b0; background: rgba(224,165,38,.12); border: 1px solid rgba(224,165,38,.4); }
.vcs-age-note.bad { color: #ffd9d9; background: rgba(244,63,94,.12); border: 1px solid var(--vc-rose-hot); }
.vcs-age-note .vcs-guard { display: flex; gap: 8px; align-items: flex-start; margin-top: 10px; font-weight: 600; cursor: pointer; }
.vcs-age-note .vcs-guard input { margin-top: 2px; flex: 0 0 auto; }

/* ═══════════ Initial-letter avatar (no real photo) ═══════════ */
.vc-initial { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%;
  background: var(--vc-grad-capsule); color: #fff; font-family: var(--vc-brand); font-weight: 800;
  font-size: 1.05rem; text-transform: uppercase; line-height: 1; overflow: hidden; }
.vcs-profile-avatar img, .vcs-profile-avatar .vc-initial { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.vcs-profile-avatar .vc-initial { font-size: 2.8rem; }
.vcs-orb-photo .vc-initial { font-size: 2.4rem; }
.vcs-post-avatar .vc-initial { font-size: 1.15rem; }

/* ═══════════ Story "who viewed" ═══════════ */
.vcs-sv-seen { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 6;
  display: inline-flex; align-items: center; gap: 7px; padding: 9px 18px; border-radius: 99px;
  background: rgba(0,0,0,.5); color: #fff; font-size: .82rem; font-weight: 700;
  border: 1px solid rgba(255,255,255,.25); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); cursor: pointer; }
.vcs-sv-seenlist { position: absolute; left: 0; right: 0; bottom: 0; max-height: 62%; z-index: 12;
  background: rgba(10,16,36,.98); border-top-left-radius: 20px; border-top-right-radius: 20px;
  display: flex; flex-direction: column; box-shadow: 0 -12px 44px rgba(0,0,0,.55); }
.vcs-sv-seenhead { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--vc-line); }
.vcs-sv-seenhead b { font-size: 1rem; }
.vcs-sv-seenclose { background: none; border: 0; color: var(--vc-text-soft); font-size: 1.15rem; cursor: pointer; padding: 4px 8px; }
.vcs-sv-seenbody { overflow-y: auto; padding: 6px 0 14px; }
.vcs-seen-row { display: flex; align-items: center; gap: 12px; padding: 9px 18px; }
.vcs-seen-av { width: 40px; height: 40px; flex: 0 0 auto; border-radius: 50%; overflow: hidden; }
.vcs-seen-row b { flex: 1; min-width: 0; font-weight: 600; font-size: .92rem; }
.vcs-seen-row time { font-size: .75rem; color: var(--vc-text-mute); flex: 0 0 auto; }
.vcs-seen-empty { text-align: center; color: var(--vc-text-mute); padding: 26px; }

/* ═══════════ Delete-account exit survey ═══════════ */
.vcs-del-reasons { display: flex; flex-direction: column; gap: 8px; margin: 0 0 14px; }
.vcs-del-opt { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: var(--vc-r-md);
  background: var(--vc-glass-1); border: 1px solid var(--vc-line); font-size: .9rem; cursor: pointer; transition: .15s var(--vc-ease); }
.vcs-del-opt:hover { background: var(--vc-glass-2); border-color: var(--vc-cyan-400); }
.vcs-del-opt input { flex: 0 0 auto; accent-color: var(--vc-rose-hot); }
#del-confirm { background: linear-gradient(135deg,#f43f5e,#b91c4a) !important; box-shadow: 0 10px 26px -8px rgba(244,63,94,.6) !important; }

/* Wockie friend list online/offline */
.vcs-wock-name small.on { color: var(--vc-green); }
.vcs-wock-name small.off { color: var(--vc-text-dim); }

/* ═══════════ Time Capsule · premium multi-step ═══════════
   One colour, mustard gold, and it is the brand's own. The pink was a
   second accent that belonged to nothing else in the app, and next to the
   gold it read as decoration rather than meaning. On an Apple screen the
   accent is the thing you are meant to touch — everything else is grey.

   So: gold marks progress and the next step. Grey carries the rest. No
   letterspaced capitals, no serif headings, tightened tracking, and hit
   targets a thumb can find without looking. */
.vc-cap { --m:#E8B830; --mg:#F6D268; --mu:#D4A017; --mul:#F6D268; --mdim:rgba(232,184,48,.16); }
.vc-cap-hero { text-align:center; margin: 4px 0 20px; }
/* A photograph instead of a symbol. Somebody about to write a letter to the
   future should first see the moment it is for — a family opening it years
   from now. It fades into the card at the bottom so it reads as part of the
   page rather than a picture pasted on top of it. */
.vc-cap-photo { position:relative; margin:0 0 16px; border-radius:20px; overflow:hidden;
  aspect-ratio:16/9; background:var(--vc-night-4);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 18px 40px -22px rgba(0,0,0,.9); }
.vc-cap-photo img { width:100%; height:100%; object-fit:cover; object-position:center 38%; display:block; }
.vc-cap-photo::after { content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(0,0,0,.16) 0%, rgba(0,0,0,0) 34%, rgba(0,0,0,.34) 82%, rgba(0,0,0,.62) 100%); }
@media (max-width:380px){ .vc-cap-photo { border-radius:16px; margin-bottom:14px; } }
.vc-cap-spark { font-size:1.7rem; color: var(--mul); }
.vc-cap-spark.big { font-size:3rem; display:block; margin-bottom:8px; }
.vc-cap-hero h3 { font-family: var(--vc-brand); font-weight:600; font-size:1.5rem; letter-spacing:-.022em; margin:8px 0 5px; color:#fff; }
.vc-cap-hero p { color: var(--vc-text-mute); font-size:.94rem; line-height:1.55; margin:0 auto; max-width:34ch; }

/* Progress: filled bars behind you, one lit bar for where you are. */
.vc-cap-dots { display:flex; justify-content:center; gap:7px; margin:0 0 22px; }
.vc-cap-dots i { width:38px; height:4px; border-radius:99px; background:rgba(255,255,255,.09); transition:background .35s var(--vc-ease), box-shadow .35s; }
.vc-cap-dots i.on { background: var(--m); box-shadow:0 0 14px rgba(232,184,48,.55); }
.vc-cap-dots i.done { background: rgba(232,184,48,.5); }

.vc-cap-step { display:none; animation: vc-fade-up .4s var(--vc-ease) both; }
.vc-cap-step.on { display:block; }
.vc-cap-stitle { text-transform:none; letter-spacing:-.01em; font-size:1.02rem; font-weight:600; color:#F2F5FA; text-align:center; margin:0 0 18px; }
.vc-cap-hint { font-size:.78rem; line-height:1.5; color:var(--vc-text-mute); margin-top:6px; }
.vc-cap .vcs-field label small { color:var(--vc-text-mute); font-weight:400; text-transform:none; letter-spacing:0; }
.vc-cap-err { background:rgba(244,63,94,.1); border:1px solid rgba(244,63,94,.42); color:#FFC9D2; border-radius:14px; padding:12px 14px; margin-bottom:14px; font-size:.88rem; line-height:1.5; text-align:center; }

/* The one button you are meant to press. Brushed gold, a real bevel, and
   the same 54px height as every other primary action in the app. */
.vc-cap-next { width:100%; min-height:54px; padding:0 20px; border:0; border-radius:16px; font-family:inherit;
  font-weight:600; font-size:1.02rem; letter-spacing:-.01em; color:#241A02; cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:9px;
  background:linear-gradient(150deg,#FBE49B,#F6D268 42%,#E8B830 74%,#D4A017);
  box-shadow:0 14px 30px -12px rgba(232,184,48,.6), inset 0 1px 1px rgba(255,255,255,.7);
  -webkit-tap-highlight-color:transparent; transition:transform .16s var(--vc-ease), box-shadow .16s, opacity .16s; }
.vc-cap-next:hover { transform:translateY(-1px); box-shadow:0 18px 38px -14px rgba(232,184,48,.7), inset 0 1px 1px rgba(255,255,255,.75); }
.vc-cap-next:active { transform:scale(.985); }
.vc-cap-next:disabled { opacity:.55; pointer-events:none; }
.vc-cap-back { min-height:54px; padding:0 20px; border-radius:16px; background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.12); color:var(--vc-text-soft); font-family:inherit; font-weight:600;
  font-size:1.02rem; letter-spacing:-.01em; cursor:pointer; display:flex; align-items:center; justify-content:center;
  -webkit-tap-highlight-color:transparent; transition:background .18s, border-color .18s, transform .16s var(--vc-ease); }
.vc-cap-back:hover { background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.2); }
.vc-cap-back:active { transform:scale(.985); }
.vc-cap-nav { display:flex; gap:10px; margin-top:20px; }
.vc-cap-nav .vc-cap-back { flex:1; } .vc-cap-nav .vc-cap-next { flex:2; }

/* Fields pick up the gold only when you are actually in them. */
.vc-cap .vcs-input:focus, .vc-cap textarea:focus, .vc-cap select:focus, .vc-cap input:focus {
  border-color:var(--m) !important; box-shadow:0 0 0 4px var(--mdim) !important; outline:none; }

.vc-cap-rec { display:flex; flex-direction:column; align-items:center; gap:12px; padding:20px; border:1px solid var(--vc-line); border-radius:20px; background:var(--vc-glass-1); }
.vc-cap-recbtn { width:64px; height:64px; border-radius:50%; border:3px solid var(--m); background:transparent; cursor:pointer; position:relative; -webkit-tap-highlight-color:transparent; transition:transform .16s var(--vc-ease); }
.vc-cap-recbtn:active { transform:scale(.94); }
.vc-cap-recbtn::after { content:''; position:absolute; inset:0; margin:auto; width:24px; height:24px; background:var(--m); border-radius:50%; transition:.3s var(--vc-ease); }
.vc-cap-recbtn.rec { border-color:#FF453A; animation: vc-pulse 1.4s infinite; }
.vc-cap-recbtn.rec::after { background:#FF453A; border-radius:6px; width:20px; height:20px; }

.vc-cap-paytext { color:var(--vc-text-soft); font-size:.94rem; line-height:1.65; text-align:center; margin:0 auto 18px; max-width:36ch; }
.vc-cap-paywrap { display:flex; justify-content:center; min-height:54px; }
.vc-cap-foot { text-align:center; font-size:.76rem; line-height:1.6; color:var(--vc-text-dim); margin-top:20px; }
.vc-cap-done { text-align:center; padding:20px 6px; }
.vc-cap-done h3 { font-family:var(--vc-brand); font-weight:600; font-size:1.5rem; letter-spacing:-.022em; color:#fff; margin:6px 0 10px; }
.vc-cap-done p { color:var(--vc-text-mute); font-size:.94rem; line-height:1.6; margin:6px 0; }
/* The access code is the one thing they must keep. It gets the weight. */
.vc-cap-code { font-family:ui-monospace,SFMono-Regular,"SF Mono",Menlo,monospace; font-weight:600; font-size:1.5rem;
  letter-spacing:.16em; color:#F6D268; background:rgba(232,184,48,.09);
  border:1px solid rgba(232,184,48,.28); border-radius:16px; padding:16px 12px; margin:14px 0;
  user-select:all; -webkit-user-select:all; }
@media (max-width:380px){ .vc-cap-code { font-size:1.24rem; letter-spacing:.1em; } }
@media (prefers-reduced-motion:reduce){ .vc-cap-next,.vc-cap-back,.vc-cap-recbtn,.vc-cap-dots i { transition:none; } }

/* ═══════════ Premium games polish ═══════════ */
.vcs-games-grid { gap: 14px; }
.vcs-game-card { min-height: 142px; border-radius: 20px; border-color: var(--vc-line-strong); box-shadow: 0 6px 22px -12px rgba(0,0,0,.55); }
.vcs-game-card::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 82% 0%, rgba(255,255,255,.10), transparent 52%); pointer-events: none; }
.vcs-game-card:hover { transform: translateY(-4px) scale(1.015); box-shadow: 0 14px 34px -14px rgba(0,0,0,.6); }
.vcs-game-card .emoji { font-size: 2.5rem; filter: drop-shadow(0 4px 10px rgba(0,0,0,.45)); }
.vcs-game-card b { font-size: 1.14rem; }
.vcs-game-card .play { background: linear-gradient(135deg, #E91E8C, var(--vc-gold-400)); color: #fff; letter-spacing: 1px; box-shadow: 0 4px 12px -4px rgba(0,0,0,.5); }
.vcs-game-card.war { background: linear-gradient(150deg, rgba(239,68,68,.36), rgba(11,18,40,.55)); }
.vcs-game-card.memory { background: linear-gradient(150deg, rgba(34,211,238,.26), rgba(29,78,216,.3)); }

.vcs-mem-board { gap: 10px; }
.vcs-mem-card { border-radius: 14px; border-color: var(--vc-line-strong); }
.vcs-mem-card .back { background: linear-gradient(145deg, #1b3a73, #0b1733); border: 1px solid rgba(34,211,238,.3); }
.vcs-mem-card .back svg { width: 40%; height: 40%; opacity: .85; }
.vcs-mem-card .front { background: linear-gradient(160deg, #16224a, #0a1430); border: 1px solid var(--vc-cyan-400); }
.vcs-mem-card:hover { box-shadow: 0 0 18px -6px var(--vc-cyan-400); }
.vcs-mem-card.matched .front { box-shadow: 0 0 0 2px var(--vc-gold-400) inset, 0 0 18px -2px var(--vc-gold-400); }

.vcs-trivia-q { font-size: 1.25rem; }
.vcs-trivia-opt { border-radius: 16px; padding: 16px 18px; }
.vcs-trivia-opt:hover:not(:disabled) { transform: translateX(3px); }

.vcs-war-hud { background: var(--vc-glass-1); border: 1px solid var(--vc-line); border-radius: 14px; padding: 10px 14px; font-weight: 700; }
.vcs-war-wrap canvas { border: 1px solid var(--vc-line-strong); box-shadow: 0 10px 30px -14px rgba(34,211,238,.45); }

/* ═══════════ Media filters (composer) ═══════════ */
.vcs-filters { margin-top: 10px; }
.vcs-filters-label { font-size: .8rem; color: var(--vc-text-mute); margin: 0 0 8px; font-weight: 600; }
.vcs-filters-row { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: none; }
.vcs-filters-row::-webkit-scrollbar { display: none; }
.vcs-filter-chip { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 5px; background: none; border: 0; cursor: pointer; padding: 0; }
.vcs-filter-prev { width: 56px; height: 56px; border-radius: 12px; overflow: hidden; border: 2px solid var(--vc-line); background: var(--vc-night-3); }
.vcs-filter-prev img, .vcs-filter-swatch { width: 100%; height: 100%; object-fit: cover; display: block; }
.vcs-filter-swatch { background: linear-gradient(135deg, #3b82f6, #22d3ee 50%, #e0a526); }
.vcs-filter-chip.active .vcs-filter-prev { border-color: var(--vc-cyan-400); box-shadow: 0 0 12px -2px var(--vc-cyan-400); }
.vcs-filter-chip small { font-size: .68rem; color: var(--vc-text-soft); }
.vcs-filter-chip.active small { color: var(--vc-cyan-300); font-weight: 700; }

/* ═══════════ Wockie video call ═══════════ */
.vcs-rtc-video { position: relative; width: 100%; aspect-ratio: 3/4; max-height: 56vh; flex: 0 1 auto; border-radius: 18px; overflow: hidden; background: #000; margin: 0 0 14px; box-shadow: 0 16px 44px -18px rgba(34,211,238,.5); }
.vcs-rtc-video > video { width: 100%; height: 100%; object-fit: cover; display: block; }
.vcs-rtc-video .pip { position: absolute; bottom: 10px; right: 10px; width: 86px; aspect-ratio: 9/16; border-radius: 12px; border: 2px solid rgba(255,255,255,.85); box-shadow: 0 4px 14px rgba(0,0,0,.5); }

/* Audio recorder: clear delete button */
.vcs-rec-trash { background: rgba(244,63,94,.14); border: 1px solid var(--vc-rose-hot); color: #ffd9d9; border-radius: var(--vc-r-pill); padding: 12px 16px; font-weight: 700; flex: 1; }
.vcs-rec-trash:hover { background: rgba(244,63,94,.24); color: #fff; }
.vcs-rec-send { flex: 1; }

/* ── Video call: fullscreen WhatsApp-style (fixes "a mitad" on desktop & mobile) ── */
.vcs-rtc-card.vcs-rtc-fs {
  position: fixed; inset: 0; width: 100vw; max-width: none; height: 100dvh; max-height: none;
  border: 0; border-radius: 0; padding: 0; margin: 0; background: #000; display: block; animation: vc-fade-up .25s var(--vc-ease) both;
}
.vcs-rtc-fs .vcs-rtc-stage { position: absolute; inset: 0; background: #000; }
.vcs-rtc-fs .vcs-rtc-stage > video { width: 100%; height: 100%; object-fit: cover; display: block; }
.vcs-rtc-fs .vcs-rtc-stage > .pip {
  position: absolute; top: calc(16px + env(safe-area-inset-top)); right: 16px;
  width: 28vw; max-width: 120px; aspect-ratio: 9/16; z-index: 3;
  border-radius: 14px; overflow: hidden; cursor: pointer;
  border: 2px solid rgba(255,255,255,.85); box-shadow: 0 6px 18px rgba(0,0,0,.55);
  transition: transform .15s;
}
.vcs-rtc-fs .vcs-rtc-stage > .pip:hover { transform: scale(1.04); }
.vcs-rtc-fs .vcs-rtc-stage > .pip > video { width: 100%; height: 100%; object-fit: cover; display: block; }
.vcs-rtc-fs .vcs-rtc-stage > .pip .pip-exp {
  position: absolute; bottom: 4px; right: 4px; z-index: 2;
  background: rgba(0,0,0,.6); color: #fff; font-size: .85rem; line-height: 1;
  padding: 3px 6px; border-radius: 8px; pointer-events: none;
}
.vcs-rtc-fs .vcs-rtc-top {
  position: absolute; top: 0; left: 0; right: 0; z-index: 2; text-align: center;
  padding: calc(22px + env(safe-area-inset-top)) 16px 26px;
  background: linear-gradient(180deg, rgba(0,0,0,.6), transparent); pointer-events: none;
}
.vcs-rtc-fs .vcs-rtc-top .vcs-rtc-name { margin: 0 0 2px; text-shadow: 0 2px 8px rgba(0,0,0,.6); }
.vcs-rtc-fs .vcs-rtc-top .vcs-rtc-sub { margin: 0; color: rgba(255,255,255,.85); }
.vcs-rtc-fs .vcs-rtc-bar {
  position: absolute; bottom: 0; left: 0; right: 0; z-index: 2; width: 100%; box-sizing: border-box;
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; align-items: center;
  padding: 22px 14px calc(20px + env(safe-area-inset-bottom));
  background: linear-gradient(0deg, rgba(0,0,0,.7), transparent);
}
.vcs-rtc-fs .vcs-rtc-bar .vcs-rtc-ptt { flex-basis: 100%; order: -1; }

/* ── Music (Jamendo) picker + chips ─────────────────────────────── */
.vcs-music-ov { align-items: flex-end; justify-content: center; z-index: 260; }
.vcs-music-sheet { width: 100%; max-width: 560px; max-height: 88dvh; display: flex; flex-direction: column; }
.vcs-music-search { width: 100%; box-sizing: border-box; padding: 12px 14px; border-radius: var(--vc-r-pill); border: 1px solid var(--vc-line-strong); background: var(--vc-glass-2); color: #fff; font-size: .95rem; margin: 4px 0 10px; }
.vcs-music-search:focus { outline: none; border-color: var(--vc-cyan-400); }
.vcs-music-cats { display: flex; align-items: center; gap: 8px; overflow-x: auto; overflow-y: hidden; flex: 0 0 auto; padding: 2px 0 10px; -webkit-overflow-scrolling: touch; }
.vcs-music-cats::-webkit-scrollbar { display: none; }
.vcs-music-cat { flex: 0 0 auto; line-height: 1.2; padding: 9px 15px; border-radius: var(--vc-r-pill); border: 1px solid var(--vc-line-strong); background: var(--vc-glass-2); color: var(--vc-text-soft); font-weight: 700; font-size: .85rem; white-space: nowrap; }
.vcs-music-cat.active { background: var(--vc-grad-cta); color: #fff; border-color: transparent; }
.vcs-music-list { flex: 1 1 auto; overflow-y: auto; margin-top: 8px; min-height: 120px; }
.vcs-music-row { display: flex; align-items: center; gap: 12px; padding: 9px 4px; border-bottom: 1px solid var(--vc-line); }
.vcs-music-play { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; background: var(--vc-glass-3); border: 1px solid var(--vc-line-strong); color: #fff; font-size: .9rem; }
.vcs-music-cover { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 10px; object-fit: cover; background: var(--vc-glass-2); display: inline-block; }
.vcs-music-meta { flex: 1 1 auto; min-width: 0; }
.vcs-music-meta b { display: block; font-size: .92rem; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vcs-music-meta small { color: var(--vc-text-mute); font-size: .8rem; }
.vcs-music-use { flex: 0 0 auto; padding: 8px 16px; border-radius: var(--vc-r-pill); background: var(--vc-grad-cta); color: #fff; font-weight: 800; border: 0; }
.vcs-music-credit { text-align: center; color: var(--vc-text-mute); font-size: .72rem; margin: 8px 0 2px; }

/* Composer / story music button + selected chip */
.vcs-music-add { margin-top: 12px; }
.vcs-music-addbtn { width: 100%; padding: 13px; border-radius: var(--vc-r-md); border: 1px dashed var(--vc-line-strong); background: var(--vc-glass-2); color: #fff; font-weight: 700; }
.vcs-music-rm { width: 100%; padding: 9px; margin-top: 8px; border-radius: var(--vc-r-md); border: 1px solid var(--vc-rose-hot); background: rgba(244,63,94,.12); color: #ffd9d9; font-weight: 700; }
.vcs-music-sel { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding: 10px 12px; border-radius: var(--vc-r-md); background: rgba(34,211,238,.1); border: 1px solid var(--vc-cyan-400); color: #fff; font-size: .9rem; }
.vcs-music-sel b { font-weight: 800; }
.vcs-music-sel button { margin-left: auto; background: transparent; border: 0; color: #fff; font-size: 1rem; }
.vcs-story-review { width: 100%; max-height: 46dvh; border-radius: 16px; overflow: hidden; background: #000; margin: 6px 0; }
.vcs-story-review img, .vcs-story-review video { width: 100%; height: 100%; max-height: 46dvh; object-fit: contain; display: block; }

/* Feed post music chip */
.vcs-mchip { display: inline-flex; align-items: center; gap: 10px; margin: 0 15px 12px; padding: 8px 14px 8px 10px; border-radius: var(--vc-r-pill); background: var(--vc-glass-2); border: 1px solid var(--vc-line-strong); cursor: pointer; max-width: calc(100% - 30px); }
.vcs-mchip.playing { background: rgba(34,211,238,.14); border-color: var(--vc-cyan-400); }
.vcs-mchip-ic { font-size: 1rem; }
.vcs-mchip-txt { min-width: 0; line-height: 1.15; }
.vcs-mchip-txt b { display: block; font-size: .86rem; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vcs-mchip-txt small { color: var(--vc-text-mute); font-size: .76rem; }
.vcs-mchip-play { margin-left: auto; width: 30px; height: 30px; border-radius: 50%; background: var(--vc-grad-cta); color: #fff; display: flex; align-items: center; justify-content: center; font-size: .8rem; flex: 0 0 auto; }

/* VivuElly · Create Capsule pay button */
.vcs-elly-paybtn { padding: 11px 18px; border: 0; border-radius: var(--vc-r-pill); background: var(--vc-grad-cta); color: #fff; font-weight: 800; font-size: .92rem; box-shadow: var(--vc-shadow-cta); white-space: nowrap; }
.vcs-elly-paybtn:hover { transform: translateY(-1px); }

/* ── Wallet / VivuCoins ─────────────────────────────────────────── */
.vcs-wallet-ov { align-items: flex-end; justify-content: center; z-index: 260; }
.vcs-wallet-sheet { width: 100%; max-width: 520px; max-height: 90dvh; display: flex; flex-direction: column; overflow-y: auto; }
.vcs-wallet-bal { display: flex; gap: 12px; margin: 6px 0 4px; }
.vcs-wallet-card { flex: 1; background: var(--vc-glass-2); border: 1px solid var(--vc-line-strong); border-radius: var(--vc-r-lg); padding: 14px 16px; position: relative; }
.vcs-wallet-card small { display: block; color: var(--vc-text-mute); font-size: .76rem; text-transform: uppercase; letter-spacing: .5px; }
.vcs-wallet-card b { font-size: 1.4rem; font-weight: 800; color: #fff; }
.vcs-wallet-card b { font-size: 1.55rem; }
.vcs-wallet-card:not(.earn) b { color: #FFD24A; text-shadow: 0 0 14px rgba(255,210,74,.35); }
.vcs-wallet-card.earn { background: linear-gradient(155deg, rgba(22,199,132,.18), rgba(0,176,118,.08)); border-color: rgba(24,224,138,.55); box-shadow: 0 0 0 1px rgba(24,224,138,.15), 0 10px 30px -14px rgba(24,224,138,.5); }
.vcs-wallet-card.earn b { color: #16E08A; text-shadow: 0 0 16px rgba(22,224,138,.5); }
.vcs-wallet-cash { display: inline-block; margin-top: 8px; padding: 7px 14px; border-radius: var(--vc-r-pill); font-size: .8rem; font-weight: 800; color: #042b1c; background: linear-gradient(135deg, #2BE38B, #12B673); box-shadow: 0 6px 18px -6px rgba(22,224,138,.7); cursor: pointer; }
.vcs-wallet-cash:hover { transform: translateY(-1px); }
.vcs-wallet-label { margin: 16px 0 8px; font-weight: 800; color: #fff; }
.vcs-coinpacks { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.vcs-coinpack { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 16px 10px; border-radius: var(--vc-r-lg); border: 1px solid var(--vc-line-strong); background: var(--vc-glass-2); transition: .15s; }
.vcs-coinpack:hover { border-color: var(--vc-cyan-400); transform: translateY(-2px); }
.vcs-coinpack-amt { font-size: 1.1rem; font-weight: 800; color: #fff; }
.vcs-coinpack-price { font-size: .92rem; color: var(--vc-text-soft); background: var(--vc-grad-cta); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; font-weight: 800; }
.vcs-coinpack.has-img { position: relative; aspect-ratio: 1 / 1; padding: 0; overflow: hidden; display: block; background-size: cover; background-position: center; border: 1px solid var(--vc-line-strong); border-radius: var(--vc-r-lg); cursor: pointer; transition: transform .15s var(--vc-ease), box-shadow .2s, border-color .2s; }
.vcs-coinpack.has-img:hover { border-color: var(--vc-cyan-400); transform: translateY(-2px); box-shadow: 0 14px 32px -12px rgba(34,211,238,.5); }
.vcs-coinpack.has-img:active { transform: scale(.97); }
.vcs-coinpack.has-img::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 46%; background: linear-gradient(transparent, rgba(3,7,18,.6)); pointer-events: none; }
.vcs-coinpack-buy { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); z-index: 1; padding: 9px 22px; border-radius: 99px; font-weight: 900; font-size: 1rem; color: #2a1a02; white-space: nowrap;
  background: linear-gradient(135deg, #FFE07A, #F1A916); box-shadow: 0 8px 18px -6px rgba(241,169,22,.75), inset 0 1px 0 rgba(255,255,255,.6); }


/* ── LIVE gifts ─────────────────────────────────────────────────── */
.vcs-live-cbtn.gift { background: linear-gradient(135deg,#E91E8C,#D4A017); color:#fff; border:0; font-weight:800; }
.vcs-gift-layer { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 6; }
.vcs-gift-fly { position: absolute; bottom: 12%; display: flex; flex-direction: column; align-items: center; animation: vc-giftup 3.3s ease-out forwards; }
.vcs-gift-fly .ge { font-size: 2.6rem; filter: drop-shadow(0 4px 10px rgba(0,0,0,.5)); }
.vcs-gift-fly .gw { font-size: .72rem; color: #fff; background: rgba(0,0,0,.45); padding: 1px 8px; border-radius: 99px; margin-top: 2px; }
@keyframes vc-giftup { 0%{ transform: translateY(0) scale(.4); opacity:0; } 12%{ transform: translateY(-10px) scale(1.15); opacity:1; } 30%{ transform: translateY(-60px) scale(1); } 100%{ transform: translateY(-220px) scale(.9); opacity:0; } }
.vcs-gift-sheet { position: absolute; left: 0; right: 0; bottom: 0; z-index: 8; background: linear-gradient(180deg, rgba(11,29,58,.97), rgba(6,12,24,.99)); border-top: 1px solid var(--vc-line-strong); border-radius: 20px 20px 0 0; padding: 14px 16px calc(16px + env(safe-area-inset-bottom)); transform: translateY(110%); transition: transform .25s var(--vc-ease); }
.vcs-gift-sheet.open { transform: translateY(0); }
.vcs-gift-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; color: #fff; font-weight: 700; }
.vcs-gift-head button { background: transparent; border: 0; color: #fff; font-size: 1.1rem; }
.vcs-gift-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.vcs-giftpick { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 10px 4px; border-radius: 14px; border: 1px solid var(--vc-line-strong); background: var(--vc-glass-2); }
.vcs-giftpick:hover { border-color: var(--vc-rose-hot); transform: translateY(-2px); }
.vcs-giftpick .ge { font-size: 1.7rem; }
.vcs-giftpick .gn { font-size: .7rem; color: var(--vc-text-soft); }
.vcs-giftpick .gc { font-size: .74rem; font-weight: 800; color: #FFD24A; }
.vcs-gift-buy { display: block; text-align: center; margin-top: 12px; font-weight: 800; color: #16E08A; }

/* ── Instagram-style full-width feed + stable (no-jump) layout ── */
.vcs-feed { gap: 10px; }
.vcs-post { margin-inline: calc(-1 * var(--vc-gutter)); border-radius: 0; border-left: 0; border-right: 0; box-shadow: none; }
.vcs-post-media { width: 100%; aspect-ratio: 4 / 5; background: #000; overflow: hidden; }
.vcs-post-media img, .vcs-post-media video { width: 100%; height: 100%; max-height: none; object-fit: cover; }
.vcs-gallery .vcs-gallery-track { height: 100%; }
.vcs-gallery .vcs-gallery-track > * { height: 100%; }
/* Single photo/video: Instagram fit — full width, real height, no crop, no black.
   Carousels (.vcs-gallery) stay exactly as they were. */
.vcs-post-media:not(.vcs-gallery) { aspect-ratio: auto; background: transparent; display: block; }
.vcs-post-media:not(.vcs-gallery) img, .vcs-post-media:not(.vcs-gallery) video {
  display: block; width: 100%; height: auto; max-height: none;
  aspect-ratio: auto 4 / 5;   /* real ratio once loaded; 4:5 reserved before, so the feed never jumps */
  object-fit: contain; margin-inline: auto;
}
html, body { overscroll-behavior-y: contain; overflow-x: clip; max-width: 100%; }