/*! 9jaLive video-call UI (VCUI) v1 · mobile-first in-call layout · no dependencies
 *  Brand: green #0B7A4B · yellow #FFC533 · ink #13201A · off-white #FBF7EE · mint #DFF0E5 · Nunito
 *  Everything is scoped under .vc so it can't leak into the rest of the app.
 */
.vc{
  --vc-green:#0B7A4B; --vc-green-2:#0E9159; --vc-yellow:#FFC533; --vc-ink:#13201A; --vc-off:#FBF7EE; --vc-mint:#DFF0E5;
  --vc-red:#D63C3C; --vc-r:22px; --vc-tap:44px;
  --vc-font: Nunito, "Nunito Sans", ui-rounded, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* light theme (default) */
  --vc-glass: rgba(251,247,238,.80); --vc-glass-fg:#13201A; --vc-glass-sub:rgba(19,32,26,.62); --vc-glass-line:rgba(19,32,26,.10);
  --vc-btn: rgba(19,32,26,.06); --vc-btn-on: rgba(19,32,26,.10);
  --vc-sheet:#FBF7EE; --vc-sheet-fg:#13201A; --vc-sheet-sub:#5d6b63; --vc-card:#fff; --vc-line:#e8e0cf;
  --vc-them:#fff; --vc-them-fg:#13201A; --vc-me:#0B7A4B; --vc-me-fg:#fff;
  --vc-sys:rgba(19,32,26,.72); --vc-sys-fg:#fff; --vc-input:#fff; --vc-input-fg:#13201A;
  --vc-shadow: 0 2px 10px rgba(0,0,0,.22), 0 1px 2px rgba(0,0,0,.18);
  --vc-h: 100vh; --vc-top: 0px; --vc-bar-px: 68px; --vc-topbar-px: 60px;
  --sat: env(safe-area-inset-top, 0px); --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px); --sar: env(safe-area-inset-right, 0px);
  position:relative; overflow:hidden; isolation:isolate; background:#0c1611; color:var(--vc-glass-fg);
  font-family:var(--vc-font); font-size:15px; line-height:1.3; -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent; touch-action:manipulation; user-select:none; -webkit-user-select:none;
  width:100%; height:100%;
}
.vc[data-theme="dark"]{
  --vc-glass: rgba(15,26,21,.62); --vc-glass-fg:#fff; --vc-glass-sub:rgba(255,255,255,.70); --vc-glass-line:rgba(255,255,255,.10);
  --vc-btn: rgba(255,255,255,.10); --vc-btn-on: rgba(255,255,255,.18);
  --vc-sheet:#14231c; --vc-sheet-fg:#F3F0E6; --vc-sheet-sub:#a9b8af; --vc-card:#1c3027; --vc-line:#26392f;
  --vc-them:rgba(19,32,26,.88); --vc-them-fg:#fff; --vc-sys:rgba(255,255,255,.88); --vc-sys-fg:#13201A;
  --vc-input:rgba(255,255,255,.12); --vc-input-fg:#fff;
}
/* full-screen mode: pinned to the VISUAL viewport (see JS). 100dvh is the no-JS fallback. */
.vc.vc--fs{ position:fixed; left:0; right:0; top:var(--vc-top); width:auto; max-width:100%; height:100vh; height:100dvh; height:var(--vc-h); z-index:50; }
html.vc-lock, html.vc-lock body{ overflow:hidden; overflow-x:hidden; overscroll-behavior:none; height:100%; max-width:100%; scrollbar-width:none; }
/* no visible scroll tracks anywhere in the call (chat, history, More sheet…); touch/wheel scrolling still works */
.vc, .vc *{ scrollbar-width:none; -ms-overflow-style:none; }
.vc::-webkit-scrollbar, .vc ::-webkit-scrollbar, html.vc-lock::-webkit-scrollbar, html.vc-lock body::-webkit-scrollbar{ display:none; width:0; height:0; }
.vc *, .vc *::before, .vc *::after{ box-sizing:border-box; }
.vc :where(button){ font:inherit; color:inherit; border:0; background:none; padding:0; margin:0; cursor:pointer; -webkit-appearance:none; appearance:none; }
.vc :focus-visible{ outline:3px solid var(--vc-yellow); outline-offset:2px; }
.vc .vc-input:focus-visible{ outline:none; } /* the compose pill shows focus instead */
.vc :where(svg){ width:22px; height:22px; flex:none; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.vc .vc-sr{ position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* ---------- video feeds ---------- */
.vc-feed{ position:absolute; overflow:hidden; background:#1a2a22; z-index:0; transition:border-radius .2s; }
.vc-feed > video, .vc-feed > canvas, .vc-feed > img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.vc-feed.is-main{ inset:0; border-radius:0; }
.vc-feed.is-pip{ z-index:6; width:var(--vc-pip-w,96px); height:var(--vc-pip-h,132px); left:0; top:0; border-radius:16px;
  transform:translate3d(var(--vc-pip-x,0px),var(--vc-pip-y,0px),0); box-shadow:0 6px 22px rgba(0,0,0,.35); border:2px solid rgba(255,255,255,.85);
  touch-action:none; cursor:grab; transition:transform .28s cubic-bezier(.2,.9,.3,1.1), border-radius .2s; }
.vc-feed.is-pip.is-dragging{ transition:none; cursor:grabbing; }
.vc-feed--self.mirror > video, .vc-feed--self.mirror > canvas{ transform:scaleX(-1); }
.vc--blur .vc-feed--remote > *:not(.vc-feed-ph):not(.vc-feed-icons){ filter:blur(26px) saturate(.8); transform:scale(1.1); }
.vc-feed-ph{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
  color:rgba(255,255,255,.82); font-weight:800; font-size:14px; text-align:center; padding:12px; background:radial-gradient(120% 80% at 50% 40%, #1f3a2d, #0c1611); }
.vc-feed > video ~ .vc-feed-ph, .vc-feed > canvas ~ .vc-feed-ph{ display:none; }
.vc-feed.cam-off > .vc-feed-ph{ display:flex; z-index:2; }
.is-pip .vc-feed-ph{ font-size:11px; gap:4px; }
.vc-feed-ph svg{ width:30px; height:30px; opacity:.85; }
.is-pip .vc-feed-ph svg{ width:22px; height:22px; }
.vc-feed-icons{ position:absolute; left:6px; bottom:6px; display:flex; gap:4px; z-index:3; pointer-events:none; }
.vc-feed-icons i{ display:none; width:24px; height:24px; border-radius:50%; background:rgba(214,60,60,.92); color:#fff; align-items:center; justify-content:center; }
.vc-feed-icons i svg{ width:14px; height:14px; stroke-width:2.4; }
.vc-feed.mic-off .vc-ic-mic, .vc-feed.cam-off .vc-ic-cam{ display:flex; }
.vc-feed.is-main .vc-feed-icons{ display:none; }
.vc-pip-hint{ position:absolute; right:6px; top:6px; z-index:3; width:22px; height:22px; border-radius:50%; background:rgba(19,32,26,.55); color:#fff; display:flex; align-items:center; justify-content:center; pointer-events:none; }
.vc-pip-hint svg{ width:13px; height:13px; }
.is-main .vc-pip-hint{ display:none; }
/* scrims keep the top bar and bubbles readable on any video */
.vc-scrim{ position:absolute; left:0; right:0; pointer-events:none; z-index:1; }
.vc-scrim--t{ top:0; height:140px; background:linear-gradient(rgba(0,0,0,.42), rgba(0,0,0,0)); }
.vc-scrim--b{ bottom:0; height:46%; background:linear-gradient(rgba(0,0,0,0), rgba(0,0,0,.40) 60%, rgba(0,0,0,.55)); }

/* ---------- glass ---------- */
.vc-glass{ background:var(--vc-glass); color:var(--vc-glass-fg); -webkit-backdrop-filter:blur(16px) saturate(1.4); backdrop-filter:blur(16px) saturate(1.4);
  border:1px solid var(--vc-glass-line); }

/* ---------- top bar ---------- */
.vc-topbar{ position:absolute; z-index:10; top:calc(var(--sat) + 8px); left:calc(var(--sal) + 8px); right:calc(var(--sar) + 8px);
  height:52px; border-radius:18px; display:flex; align-items:center; gap:6px; padding:0 4px; }
.vc-ibtn{ width:var(--vc-tap); height:var(--vc-tap); min-width:var(--vc-tap); border-radius:14px; display:inline-flex; align-items:center; justify-content:center; position:relative; }
.vc-ibtn:active{ transform:scale(.94); }
.vc-stop{ color:#fff; background:var(--vc-red); border-radius:14px; width:auto; padding:0 12px 0 9px; gap:4px; font-weight:900; font-size:14px; }
.vc-stop svg{ width:18px; height:18px; stroke-width:2.6; }
.vc-chip{ display:inline-flex; align-items:center; gap:4px; height:32px; padding:0 11px; border-radius:999px; background:var(--vc-btn); font-weight:800; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
.vc-live{ display:inline-flex; align-items:center; gap:6px; height:32px; padding:0 4px 0 2px; font-weight:800; font-size:14px; font-variant-numeric:tabular-nums; white-space:nowrap; color:var(--vc-glass-fg); }
.vc-live i{ width:8px; height:8px; border-radius:50%; background:#ff4d4d; box-shadow:0 0 0 3px rgba(255,77,77,.25); animation:vcPulse 1.6s infinite; }
.vc-live[data-state="connecting"] i{ background:var(--vc-yellow); box-shadow:0 0 0 3px rgba(255,197,51,.3); }
.vc-spacer{ flex:1 1 auto; min-width:0; }
@keyframes vcPulse{ 50%{ opacity:.45; } }

/* ---------- system chip ---------- */
.vc-syschip{ position:absolute; z-index:9; left:50%; top:calc(var(--vc-topbar-px) + 160px); transform:translate(-50%,8px); max-width:84%;
  background:var(--vc-sys); color:var(--vc-sys-fg); padding:9px 15px; border-radius:999px; font-weight:800; font-size:14.5px; text-align:center;
  opacity:0; pointer-events:none; transition:opacity .35s, transform .35s; box-shadow:var(--vc-shadow); width:max-content; }
.vc-syschip.on{ opacity:1; transform:translate(-50%,0); }

/* ---------- chat overlay (bubble stream) ---------- */
.vc-chat{ position:absolute; z-index:7; left:calc(var(--sal) + 66px); /* clears the mic/cam rail */ right:calc(var(--sar) + 66px); bottom:calc(var(--vc-bar-px) + 8px);
  max-height:min(40%, 300px); display:flex; flex-direction:column; justify-content:flex-end; pointer-events:none; }
.vc-stream{ list-style:none; margin:0; padding:22px 0 2px; display:flex; flex-direction:column; gap:6px; overflow:hidden; pointer-events:auto; cursor:pointer;
  -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 26px); mask-image:linear-gradient(to bottom, transparent 0, #000 26px); }
.vc-msg{ display:flex; max-width:100%; animation:vcIn .28s cubic-bezier(.2,.9,.3,1.15) both; transition:opacity .4s; }
.vc-msg--me{ justify-content:flex-end; }
.vc-msg--them{ justify-content:flex-start; }
.vc-msg--system{ justify-content:center; }
.vc-bubble{ max-width:84%; padding:8px 13px 9px; border-radius:19px; font-weight:700; font-size:15px; line-height:1.3; white-space:pre-wrap;
  overflow-wrap:anywhere; word-break:break-word; box-shadow:var(--vc-shadow); }
.vc-msg--me .vc-bubble{ background:var(--vc-me); color:var(--vc-me-fg); border-bottom-right-radius:6px; }
.vc-msg--them .vc-bubble{ background:var(--vc-them); color:var(--vc-them-fg); border-bottom-left-radius:6px; }
.vc-msg--system .vc-bubble{ background:var(--vc-sys); color:var(--vc-sys-fg); font-size:13px; font-weight:800; padding:6px 12px; border-radius:999px; }
.vc-stream .vc-msg.vc-age2{ opacity:.9; } .vc-stream .vc-msg.vc-age3{ opacity:.7; } .vc-stream .vc-msg.vc-age4{ opacity:.45; }
.vc-stream .vc-msg.vc-gone{ display:none; }
.vc-stream .vc-msg--system{ display:none; } /* system lines show as the centre chip instead */
.vc-typing .vc-bubble{ display:inline-flex; gap:4px; padding:12px 14px; }
.vc-typing .vc-bubble i{ width:7px; height:7px; border-radius:50%; background:currentColor; opacity:.5; animation:vcDot 1.2s infinite; }
.vc-typing .vc-bubble i:nth-child(2){ animation-delay:.15s; } .vc-typing .vc-bubble i:nth-child(3){ animation-delay:.3s; }
.vc-time{ display:block; font-size:11px; font-weight:700; opacity:.65; margin-top:2px; }
.vc-stream .vc-time{ display:none; }
@keyframes vcIn{ from{ opacity:0; transform:translateY(10px) scale(.96); } }
@keyframes vcDot{ 30%{ opacity:1; transform:translateY(-2px); } }

/* ---------- side rail ---------- */
.vc-rail{ position:absolute; z-index:8; right:calc(var(--sar) + 10px); bottom:calc(var(--vc-bar-px) + 10px); display:flex; flex-direction:column; gap:10px; }
.vc-rbtn{ width:46px; height:46px; border-radius:50%; display:flex; align-items:center; justify-content:center; position:relative; font-size:20px; box-shadow:0 4px 14px rgba(0,0,0,.18); }
.vc-rbtn--more{ background:var(--vc-yellow); color:var(--vc-ink); border:0; }
.vc-badge{ position:absolute; top:-3px; right:-3px; min-width:20px; height:20px; padding:0 5px; border-radius:999px; background:var(--vc-red); color:#fff;
  font-size:11.5px; font-weight:900; display:none; align-items:center; justify-content:center; border:2px solid #fff; }
.vc-badge.on{ display:flex; }

/* ---------- new-messages pill ---------- */
.vc-newpill{ position:absolute; z-index:13; left:calc(50% + 28px); /* centred right of the mic/cam rail */ bottom:calc(var(--vc-bar-px) + 12px); transform:translate(-50%,10px); opacity:0; pointer-events:none;
  display:flex; align-items:center; gap:6px; max-width:calc(100% - 86px); min-height:40px; padding:0 15px; border-radius:999px;
  background:var(--vc-green); color:#fff; font-weight:900; font-size:14px; box-shadow:0 6px 18px rgba(0,0,0,.28); transition:opacity .2s, transform .2s; white-space:nowrap; }
.vc-newpill.on{ opacity:1; transform:translate(-50%,0); pointer-events:auto; }
.vc-newpill b:last-child{ font-size:16px; }
.vc-newpill span{ overflow:hidden; text-overflow:ellipsis; font-weight:700; opacity:.92; }

/* ---------- control bar ---------- */
.vc-bar{ position:absolute; z-index:12; left:0; right:0; bottom:0; display:flex; align-items:center; gap:6px;
  padding:8px calc(var(--sar) + 10px) calc(max(var(--sab), 0px) + 9px) calc(var(--sal) + 10px); border-radius:22px 22px 0 0; border-bottom:0; border-left:0; border-right:0; }
/* mic / cam / flip: vertical rail on the left edge, just above the bar (moves up with the bar when the keyboard opens) */
.vc-tools{ position:absolute; z-index:8; left:calc(var(--sal) + 10px); bottom:calc(var(--vc-bar-px) + 10px); display:flex; flex-direction:column; gap:8px; transition:opacity .18s, visibility .18s; }
.vc-tool{ width:46px; height:46px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex:none; color:var(--vc-glass-fg); box-shadow:0 4px 14px rgba(0,0,0,.18); }
.vc-tool svg{ width:22px; height:22px; }
/* report flag: top of the rail, set apart from mic/cam/flip and tinted red so it isn't hit by mistake */
.vc-tools .vc-flag{ margin-bottom:10px; color:var(--vc-red); background:color-mix(in srgb, var(--vc-red) 16%, var(--vc-glass)); border:2px solid color-mix(in srgb, var(--vc-red) 60%, transparent); }
.vc[data-theme="dark"] .vc-tools .vc-flag{ color:#ff8a8a; }
.vc-tool[aria-pressed="false"]{ background:var(--vc-red); color:#fff; }
.vc-tool:active, .vc-skip:active, .vc-send:active{ transform:scale(.94); }
.vc-compose{ flex:1 1 auto; min-width:0; display:flex; align-items:center; height:48px; border-radius:24px; background:var(--vc-input); color:var(--vc-input-fg);
  border:1.5px solid var(--vc-glass-line); padding:0 2px 0 14px; box-shadow:none; outline:none; }
/* focus = a slightly stronger STATIC border. No glow, no ring, no animation. */
.vc .vc-compose, .vc .vc-compose:focus-within{ box-shadow:none!important; outline:none!important; animation:none!important; transition:none!important; }
.vc .vc-compose:focus-within{ border-color:var(--vc-green); }
/* The message input is hardened against the app's global input styles (iOS zoom, inner box, shadow, focus glow).
   font-size must stay >= 16px or iOS Safari zooms in on focus and stays zoomed after the keyboard closes. */
.vc .vc-input, .vc .vc-input:focus, .vc .vc-input:focus-visible, .vc .vc-input:hover{
  flex:1 1 auto; min-width:0; width:auto; height:44px; margin:0; padding:0; border:0!important; border-radius:0!important; outline:none!important;
  box-shadow:none!important; background:transparent!important; background-image:none!important; color:inherit; caret-color:var(--vc-green);
  font-family:inherit; font-weight:700; font-size:16px!important; line-height:normal; letter-spacing:normal; text-align:left;
  -webkit-appearance:none!important; appearance:none!important; animation:none!important; transition:none!important; transform:none!important;
  -webkit-text-size-adjust:100%; text-size-adjust:100%; user-select:text; -webkit-user-select:text; }
.vc[data-theme="dark"] .vc-input{ caret-color:var(--vc-yellow); }
.vc-input::placeholder{ color:var(--vc-glass-sub); font-weight:700; opacity:1; }
.vc-send{ width:42px; height:42px; min-width:42px; border-radius:50%; background:var(--vc-green); color:#fff; display:flex; align-items:center; justify-content:center; transition:opacity .15s; }
.vc-send::after{ content:""; position:absolute; inset:-2px; } /* 46px hit area */
.vc-send{ position:relative; }
.vc-send:disabled{ opacity:.4; cursor:default; }
.vc-send svg{ width:20px; height:20px; }
.vc-skip{ height:48px; min-width:48px; padding:0 15px; border-radius:16px; background:var(--vc-yellow); color:var(--vc-ink); font-weight:900; font-size:16px;
  display:flex; align-items:center; justify-content:center; gap:5px; white-space:nowrap; flex:none; box-shadow:inset 0 -3px 0 rgba(0,0,0,.12); }
.vc-skip svg{ width:20px; height:20px; stroke-width:2.6; }
/* typing: the rail steps aside (no room on an iPhone SE with the keyboard up) and the bubbles use the full width */
.vc[data-compose="focus"] .vc-tools{ opacity:0; visibility:hidden; pointer-events:none; }
.vc[data-compose="focus"] .vc-chat{ left:calc(var(--sal) + 10px); }
.vc[data-compose="focus"] .vc-skip{ padding:0 12px; }
.vc[data-compose="focus"] .vc-skip-t{ display:none; }

/* ---------- sheets ---------- */
.vc-backdrop{ position:absolute; inset:0; z-index:14; background:rgba(8,14,11,.42); opacity:0; pointer-events:none; transition:opacity .22s; }
.vc[data-sheet="more"] .vc-backdrop, .vc[data-sheet="confirm"] .vc-backdrop{ opacity:1; pointer-events:auto; }
.vc[data-sheet="history"] .vc-backdrop{ opacity:0; pointer-events:auto; background:transparent; z-index:9; }
.vc-sheet{ position:absolute; z-index:15; left:0; right:0; bottom:0; background:var(--vc-sheet); color:var(--vc-sheet-fg);
  border-radius:26px 26px 0 0; box-shadow:0 -10px 40px rgba(0,0,0,.28); transform:translateY(105%); visibility:hidden;
  transition:transform .3s cubic-bezier(.2,.9,.3,1), visibility 0s .3s; user-select:text; -webkit-user-select:text; }
.vc-sheet.open{ transform:none; visibility:visible; transition:transform .3s cubic-bezier(.2,.9,.3,1); }
.vc-grab{ width:42px; height:5px; border-radius:9px; background:var(--vc-line); margin:9px auto 4px; }
.vc-shead{ display:flex; align-items:center; gap:8px; padding:2px 8px 6px 18px; }
.vc-shead h2{ margin:0; font-size:18px; font-weight:900; flex:1; }
.vc-shead small{ font-weight:800; color:var(--vc-sheet-sub); font-size:13px; }
.vc-close{ color:var(--vc-sheet-fg); }

/* history half-sheet: sits ON the control bar so you can keep typing */
.vc-history{ bottom:var(--vc-bar-px); height:min(58%, calc(100% - var(--vc-topbar-px) - var(--vc-bar-px) - 20px)); display:flex; flex-direction:column;
  border-radius:26px 26px 0 0; z-index:11; background:color-mix(in srgb, var(--vc-sheet) 94%, transparent); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); }
.vc-hlist{ list-style:none; margin:0; padding:6px 14px 14px; overflow-y:auto; flex:1; display:flex; flex-direction:column; gap:7px; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; }
.vc-hlist .vc-bubble{ box-shadow:none; }
.vc-hlist .vc-msg--them .vc-bubble{ background:var(--vc-card); color:var(--vc-sheet-fg); border:1px solid var(--vc-line); }
.vc-hlist .vc-msg--system .vc-bubble{ background:var(--vc-mint); color:#0B5C39; }
.vc[data-theme="dark"] .vc-hlist .vc-msg--system .vc-bubble{ background:#1f3a2d; color:#bfe7cf; }
.vc-hlist .vc-time{ text-align:right; }
.vc-hlist .vc-msg--them .vc-time{ text-align:left; }
.vc-empty{ margin:auto; color:var(--vc-sheet-sub); font-weight:800; text-align:center; padding:20px; }

/* More sheet */
.vc-more{ padding-bottom:calc(var(--sab) + 14px); max-height:calc(100% - var(--vc-topbar-px)); overflow-y:auto; }
.vc-grid{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:8px; padding:4px 14px 10px; }
.vc-tile{ min-height:82px; border-radius:18px; background:var(--vc-card); border:1px solid var(--vc-line); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  font-weight:800; font-size:13px; text-align:center; padding:8px 4px; line-height:1.15; color:var(--vc-sheet-fg); }
.vc-tile b{ font-size:25px; line-height:1; font-weight:400; }
.vc-tile[aria-pressed="true"]{ background:var(--vc-mint); border-color:#9fd3b5; color:#0B5C39; }
.vc[data-theme="dark"] .vc-tile[aria-pressed="true"]{ background:#1f3a2d; border-color:#2f6b4c; color:#bfe7cf; }
.vc-tile--report{ grid-column:span 2; flex-direction:row; gap:8px; color:#B22B2B; background:#fdecec; border-color:#f5c7c7; }
.vc[data-theme="dark"] .vc-tile--report{ background:#3a1f1f; border-color:#5a2c2c; color:#ffb4b4; }
.vc-tile--report b{ font-size:21px; }
.vc-row{ display:flex; align-items:center; gap:12px; margin:0 14px 8px; min-height:56px; padding:8px 14px; border-radius:18px; background:var(--vc-card); border:1px solid var(--vc-line);
  font-weight:800; width:calc(100% - 28px); text-align:left; color:var(--vc-sheet-fg); }
.vc-row b{ font-size:22px; font-weight:400; }
.vc-row span{ flex:1; min-width:0; display:flex; flex-direction:column; }
.vc-row small{ color:var(--vc-sheet-sub); font-weight:700; font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.vc-row i{ font-style:normal; font-weight:900; opacity:.5; font-size:20px; }
.vc-row--premium{ background:linear-gradient(90deg, #FFF3CF, #FFE7A3); border-color:#F4D272; color:#13201A; }
.vc-row--premium small{ color:#6a5a2a; }
.vc[data-theme="dark"] .vc-row--premium{ background:linear-gradient(90deg, #3b3216, #4a3d14); border-color:#6b5a22; color:#FFE7A3; }
.vc[data-theme="dark"] .vc-row--premium small{ color:#e6d39a; }

/* confirm Stop */
.vc-confirm{ position:absolute; z-index:16; left:50%; top:50%; width:min(330px, calc(100% - 40px)); transform:translate(-50%,-46%) scale(.96); opacity:0; visibility:hidden;
  background:var(--vc-sheet); color:var(--vc-sheet-fg); border-radius:24px; padding:20px 18px 16px; box-shadow:0 20px 60px rgba(0,0,0,.4); text-align:center;
  transition:opacity .18s, transform .18s, visibility 0s .18s; }
.vc[data-sheet="confirm"] .vc-confirm{ opacity:1; visibility:visible; transform:translate(-50%,-50%); transition:opacity .18s, transform .18s; }
.vc-confirm h2{ margin:4px 0 6px; font-size:20px; font-weight:900; }
.vc-confirm p{ margin:0 0 16px; color:var(--vc-sheet-sub); font-weight:700; font-size:14.5px; }
.vc-confirm .vc-btns{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.vc-btn{ height:50px; border-radius:16px; font-weight:900; font-size:15.5px; background:var(--vc-card); border:1px solid var(--vc-line)!important; color:var(--vc-sheet-fg); }
.vc-btn--danger{ background:var(--vc-red); color:#fff; border-color:var(--vc-red)!important; }

/* toast */
.vc-toast{ position:absolute; z-index:17; left:50%; top:calc(var(--vc-topbar-px) + 10px); transform:translate(-50%,-8px); opacity:0; pointer-events:none; max-width:86%; width:max-content;
  background:var(--vc-ink); color:#fff; padding:10px 15px; border-radius:14px; font-weight:800; font-size:14px; text-align:center; box-shadow:0 8px 24px rgba(0,0,0,.3); transition:opacity .2s, transform .2s; }
.vc-toast.on{ opacity:1; transform:translate(-50%,0); }

/* ---------- overlay slot (Oya Pick & co.) ---------- */
.vc-overlay{ position:absolute; inset:0; z-index:9; pointer-events:none; }
.vc-overlay > *{ pointer-events:auto; }
.vc-card{ position:absolute; left:calc(var(--sal) + 66px); right:calc(var(--sar) + 10px); bottom:calc(var(--vc-bar-px) + 62px); width:auto; /* right of the mic/cam rail */
  background:color-mix(in srgb, var(--vc-sheet) 95%, transparent); color:var(--vc-sheet-fg); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border-radius:24px; padding:10px 12px 12px 16px; box-shadow:0 14px 40px rgba(0,0,0,.35); animation:vcCard .32s cubic-bezier(.2,.9,.3,1.15) both; }
@keyframes vcCard{ from{ opacity:0; transform:translateY(24px) scale(.97); } }
.vc-card-k{ display:flex; align-items:center; gap:8px; font-weight:900; font-size:13px; color:var(--vc-green); text-transform:none; }
.vc[data-theme="dark"] .vc-card-k{ color:#7fd6a5; }
.vc-card-k span{ flex:1; }
.vc-card-k .vc-ibtn{ width:40px; height:40px; min-width:40px; margin:-4px -4px -4px 0; color:var(--vc-sheet-fg); }
.vc-card-k .vc-ibtn::after{ content:""; position:absolute; inset:-3px; }
.vc-card-bar{ height:5px; border-radius:9px; background:var(--vc-line); overflow:hidden; margin:2px 4px 8px 0; }
.vc-card-bar i{ display:block; height:100%; background:var(--vc-yellow); border-radius:9px; transition:width 1s linear; }
.vc-card h3{ margin:0 0 10px; font-size:20px; font-weight:900; line-height:1.2; }
.vc-card-opts{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-right:4px; }
.vc-opt{ min-height:56px; border-radius:16px; background:var(--vc-mint)!important; color:#0B5C39!important; font-weight:900!important; font-size:16px!important; padding:6px 8px!important;
  border:2px solid transparent!important; line-height:1.15; }
.vc[data-theme="dark"] .vc-opt{ background:#1f3a2d!important; color:#d7f3e2!important; }
.vc-opt[aria-pressed="true"]{ background:var(--vc-green)!important; color:#fff!important; border-color:#0a6a41!important; }
.vc-card-note{ margin:9px 4px 0 0; font-size:13px; font-weight:800; color:var(--vc-sheet-sub); display:flex; align-items:center; gap:6px; }
.vc-card-note i{ width:8px; height:8px; border-radius:50%; background:var(--vc-green); flex:none; }

/* game on: chat collapses into the "new messages" pill, rail steps aside */
.vc[data-game="on"] .vc-chat, .vc[data-game="on"] .vc-rail{ display:none; }
/* Oya Pick (oya_pick.js) mounted in the overlay slot: compact card instead of a full sheet.
   The module renders in a Shadow DOM and exposes ::part(op-layer|op-scrim|op-sheet|op-grab|op-fab|op-toast|op-q|op-opt), so these rules reach it. */
.vc-overlay [data-oyapick]::part(op-layer){ pointer-events:none; }
.vc-overlay [data-oyapick]::part(op-scrim){ background:transparent!important; pointer-events:none!important; }
.vc-overlay [data-oyapick]::part(op-sheet){ top:auto!important; bottom:calc(var(--vc-bar-px) + 62px)!important; left:calc(var(--sal) + 66px)!important; right:calc(var(--sar) + 10px)!important;
  width:auto!important; max-width:none!important; transform:none!important; max-height:50%!important;
  border-radius:24px!important; padding:8px 14px 14px!important; box-shadow:0 14px 40px rgba(0,0,0,.35)!important; pointer-events:auto; }
.vc-overlay [data-oyapick]::part(op-grab){ display:none!important; }
/* compact card: smaller question + options so faces stay visible */
.vc-overlay [data-oyapick]::part(op-q){ font-size:21px!important; margin:6px 0 10px!important; }
.vc-overlay [data-oyapick]::part(op-opt){ min-height:84px!important; font-size:17px!important; border-radius:18px!important; padding:10px 8px!important; }
.vc-overlay [data-oyapick]::part(op-fab){ display:none!important; } /* the More sheet has the Oya Pick button */

/* chat hidden */
.vc[data-chat="hidden"] .vc-chat{ display:none; }
/* history open: stream + rail step aside */
.vc[data-sheet="history"] .vc-chat, .vc[data-sheet="history"] .vc-rail, .vc[data-sheet="history"] .vc-tools{ visibility:hidden; }
.vc[data-sheet="history"] .vc-newpill{ bottom:calc(var(--vc-bar-px) + 14px); z-index:13; }

/* keyboard open (visualViewport shrank) */
.vc[data-kb="open"] .vc-bar{ padding-bottom:8px; border-radius:18px 18px 0 0; }
.vc[data-kb="open"] .vc-syschip{ display:none; }
.vc[data-kb="open"] .vc-chat{ max-height:min(34%, 220px); }
.vc[data-kb="open"] .vc-scrim--b{ height:60%; }
.vc[data-kb="open"] .vc-rail{ display:none; }
.vc[data-kb="open"] .vc-chat{ right:calc(var(--sar) + 10px); }

/* ---------- text-only mode: same bubbles, no video ---------- */
.vc[data-mode="text"]{ background:var(--vc-sheet); color:var(--vc-sheet-fg); }
.vc[data-mode="text"] .vc-feed, .vc[data-mode="text"] .vc-scrim, .vc[data-mode="text"] .vc-tools, .vc[data-mode="text"] .vc-rail, .vc[data-mode="text"] .vc-syschip{ display:none; }
.vc[data-mode="text"] .vc-chat{ top:calc(var(--sat) + 70px); bottom:var(--vc-bar-px); left:0; right:0; max-height:none; }
.vc[data-mode="text"] .vc-stream{ overflow-y:auto; padding:8px 12px 12px; -webkit-mask-image:none; mask-image:none; cursor:auto; user-select:text; -webkit-user-select:text; }
.vc[data-mode="text"] .vc-stream .vc-msg.vc-gone{ display:flex; }
.vc[data-mode="text"] .vc-stream .vc-msg{ opacity:1; }
.vc[data-mode="text"] .vc-stream .vc-msg--system{ display:flex; }
.vc[data-mode="text"] .vc-bubble{ box-shadow:none; }
.vc[data-mode="text"] .vc-msg--them .vc-bubble{ background:var(--vc-card); color:var(--vc-sheet-fg); border:1px solid var(--vc-line); }
.vc[data-mode="text"] .vc-msg--system .vc-bubble{ background:var(--vc-mint); color:#0B5C39; }

/* ---------- landscape phone: video left, chat panel right ---------- */
/* landscape phone (JS sets .vc--land when wider than tall and <= 540px high) */

  .vc.vc--land{ --vc-panel:min(40%, 340px); --vc-bar-px:64px; --vc-topbar-px:56px; }
  .vc.vc--land .vc-feed.is-main{ right:var(--vc-panel); }
  .vc.vc--land .vc-scrim{ right:var(--vc-panel); }
  .vc.vc--land .vc-scrim--b{ height:40%; }
  .vc.vc--land .vc-topbar{ top:calc(var(--sat) + 8px); right:calc(var(--vc-panel) + 8px); height:48px; }
  .vc.vc--land .vc-chat{ left:auto; right:0; top:0; bottom:0; width:var(--vc-panel); max-height:none; padding:calc(var(--sat) + 8px) calc(var(--sar) + 10px) calc(var(--sab) + 70px) 10px;
    background:var(--vc-sheet); pointer-events:auto; display:flex !important; border-left:1px solid var(--vc-line); }
  .vc.vc--land .vc-chat::before{ content:attr(data-title); display:block; font-weight:900; font-size:16px; color:var(--vc-sheet-fg); padding:6px 4px 6px; flex:none; }
  .vc.vc--land .vc-stream{ flex:1; overflow-y:auto; -webkit-mask-image:none; mask-image:none; padding:4px 2px 6px; cursor:auto; user-select:text; -webkit-user-select:text; justify-content:flex-start; }
  .vc.vc--land .vc-stream > :first-child{ margin-top:auto; }
  .vc.vc--land .vc-stream .vc-msg, .vc.vc--land .vc-stream .vc-msg.vc-gone{ display:flex; opacity:1; }
  .vc.vc--land .vc-stream .vc-msg--system{ display:flex; }
  .vc.vc--land .vc-stream .vc-bubble{ box-shadow:none; font-size:14.5px; }
  .vc.vc--land .vc-stream .vc-msg--them .vc-bubble{ background:var(--vc-card); color:var(--vc-sheet-fg); border:1px solid var(--vc-line); }
  .vc.vc--land .vc-stream .vc-msg--system .vc-bubble{ background:var(--vc-mint); color:#0B5C39; }
  .vc.vc--land .vc-bar{ display:contents; }
  .vc.vc--land .vc-tools{ gap:6px; }
  .vc.vc--land .vc-tool{ width:44px; height:44px; }
  .vc.vc--land .vc-tools .vc-flag{ margin-bottom:6px; }
  .vc.vc--land .vc-tools{ z-index:12; left:calc(var(--sal) + 10px); bottom:calc(var(--sab) + 10px); opacity:1!important; visibility:visible!important; pointer-events:auto!important; }
  .vc.vc--land .vc-skip{ position:absolute; z-index:12; right:calc(var(--vc-panel) + 10px); bottom:calc(var(--sab) + 12px); }
  .vc.vc--land .vc-skip-t{ display:inline!important; }
  .vc.vc--land .vc-compose{ position:absolute; z-index:12; right:calc(var(--sar) + 10px); bottom:calc(var(--sab) + 10px); width:calc(var(--vc-panel) - 20px - var(--sar)); background:var(--vc-card);
    color:var(--vc-sheet-fg); border-color:var(--vc-line); }
  .vc.vc--land .vc-compose .vc-input::placeholder{ color:var(--vc-sheet-sub); }
  .vc.vc--land .vc-rail{ right:calc(var(--vc-panel) + 10px); bottom:calc(var(--sab) + 72px); }
  .vc.vc--land .vc-rail .vc-rbtn--chat{ display:none; }
  .vc.vc--land .vc-syschip{ left:calc((100% - var(--vc-panel)) / 2); top:calc(var(--sat) + 66px); }
  .vc.vc--land .vc-newpill, .vc.vc--land .vc-history{ display:none; }
  .vc.vc--land .vc-card, .vc.vc--land .vc-overlay [data-oyapick]::part(op-sheet){ right:auto!important; left:calc((100% - var(--vc-panel)) / 2)!important; bottom:auto!important; top:50%!important; transform:translate(-50%,-50%)!important; width:min(330px, calc(100% - var(--vc-panel) - 24px))!important; }
  .vc.vc--land .vc-overlay [data-oyapick]::part(op-sheet){ max-height:calc(100% - 140px)!important; }
  .vc.vc--land .vc-overlay [data-oyapick]::part(op-opt){ min-height:52px!important; padding:6px 8px!important; }
  .vc.vc--land .vc-overlay [data-oyapick]::part(op-q){ font-size:18px!important; margin:4px 0 8px!important; }
  .vc.vc--land .vc-more{ left:50%; right:auto; width:min(520px, 100%); transform:translate(-50%,105%); max-height:92%; }
  .vc.vc--land .vc-more.open{ transform:translate(-50%,0); }
  .vc.vc--land[data-game="on"] .vc-chat{ display:flex !important; }
  .vc.vc--land[data-mode="text"] .vc-chat{ width:auto; left:0; border-left:0; }

/* ---------- motion & contrast ---------- */
@media (prefers-reduced-motion:reduce){
  .vc *, .vc *::before, .vc *::after{ animation:none!important; transition:none!important; }
}
.vc[data-reduced-motion="1"] *, .vc[data-reduced-motion="1"] *::before{ animation:none!important; transition:none!important; }
@media (forced-colors:active){ .vc-bubble, .vc-tool, .vc-skip, .vc-rbtn{ border:1px solid CanvasText; } }
.vc-confirm .vc-emo{ font-size:34px; line-height:1; }
html.vc-lock{ background:#0c1611; }

.vc-sheet:focus, .vc-confirm:focus{ outline:none; }
/* narrow phones (iPhone SE / 360px Androids): tighten the bar so the input keeps room */
@media (max-width:380px){
  .vc .vc-bar{ gap:5px; padding-left:calc(var(--sal) + 8px); padding-right:calc(var(--sar) + 8px); }
  .vc .vc-skip{ padding:0 12px; font-size:15.5px; }
  .vc .vc-compose{ padding-left:12px; }
  .vc .vc-topbar{ gap:4px; }
  .vc .vc-chip{ padding:0 9px; }
}