/* =========================================================
   styles for /video/index.html ONLY (the call room screen).
   Base reset + design tokens are kept because the call page
   depends on them; every rule for other pages (nav, hero,
   articles, legal, start-chat category picker, etc.) has
   been removed.
   ========================================================= */

:root{
  --bg:#0D0E14;
  --surface:#161822;
  --surface-alt:#1E212D;
  --border:#2A2D3B;
  --text:#F4F3F7;
  --muted:#9A97AC;
  --pink:#FF4D7A;
  --pink-dim:#B93A5C;
  --teal:#33E0C2;
  --radius-sm:10px;
  --radius-md:16px;
  --radius-lg:28px;
}

/* ---------- base reset ---------- */
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:'Inter',sans-serif; font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:'Unbounded',sans-serif; line-height:1.15; margin:0; font-weight:600;}
p{margin:0;}
a{color:inherit; text-decoration:none;}
img,svg{display:block; max-width:100%;}
ul,ol{margin:0; padding:0; list-style:none;}
button{font-family:inherit;}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{
  outline:2px solid var(--teal); outline-offset:3px; border-radius:4px;
}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important;}
}

@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(51,224,194,0.5);} 50%{box-shadow:0 0 0 7px rgba(51,224,194,0);}}
@keyframes radarPing{0%{transform:scale(0.4); opacity:0.6;} 100%{transform:scale(1); opacity:0;}}

/* generic primary button (used inside the terms overlay) */
.btn-primary{
  background:var(--pink); color:#fff; font-weight:600; font-size:16px; padding:16px 30px;
  border-radius:999px; border:none; cursor:pointer;
  box-shadow:0 12px 30px -10px rgba(255,77,122,0.55);
  transition:transform .15s ease, background .15s ease;
}
.btn-primary:hover{background:#ff6690; transform:translateY(-1px);}

/* =================== CALL ROOM SHELL ===================
   Everything (header, controls, filters) is an ABSOLUTE
   OVERLAY on top of the video area — the shell always equals
   exactly one viewport, so there is nothing to scroll. */

body.call-page{
  height:100vh; height:100dvh; height:var(--app-vh, 100vh);
  overflow:hidden; margin:0; position:fixed; inset:0; width:100%;
}
.call-shell{position:absolute; inset:0; background:var(--bg); overflow:hidden;}
.call-main{position:absolute; inset:0; display:grid; grid-template-columns:1fr 360px;}
.video-col{position:relative; background:var(--bg); overflow:hidden;}

.stranger-panel{
  position:absolute; inset:0; background:linear-gradient(160deg,#171a25,#0D0E14);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}

/* ---- top overlay bar: exit + centered uhmingle brand + report ---- */
.call-topbar{
  position:absolute; top:0; left:0; right:0; z-index:8;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:16px 16px 40px;
  background:linear-gradient(180deg, rgba(9,10,15,0.8), rgba(9,10,15,0));
  pointer-events:none;
}
.call-topbar > *{pointer-events:auto;}
.call-exit{
  display:flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:50%; flex:none;
  color:#fff; background:rgba(255,255,255,0.1); border:1px solid rgba(255,255,255,0.14);
}
.call-exit:hover{background:rgba(255,255,255,0.18);}
.topbar-brand{
  position:absolute; left:50%; top:16px; transform:translateX(-50%);
  display:flex; align-items:center; gap:8px;
  font-family:'Unbounded',sans-serif; font-weight:700; font-size:17px; color:#fff;
  text-shadow:0 2px 10px rgba(0,0,0,0.5); white-space:nowrap;
}
.topbar-brand .dot{width:8px; height:8px; border-radius:50%; background:var(--teal); box-shadow:0 0 0 3px rgba(51,224,194,0.25);}

.report-btn{
  display:flex; align-items:center; gap:7px;
  background:rgba(255,77,122,0.2); backdrop-filter:blur(4px);
  border:1px solid rgba(255,77,122,0.5);
  color:#ff6690; font-size:13px; font-weight:600; padding:9px 15px; border-radius:999px; cursor:pointer;
}
.report-btn:hover{background:rgba(255,77,122,0.36); border-color:var(--pink); color:#fff;}
.report-btn svg{width:16px; height:16px;}

/* ---- consolidated "Filters" launcher: gender / country / mic / cam /
   speaker all live in one panel now, anchored top-left under the exit
   button so it never collides with the brand (center) or report (right) */
.options-btn{
  position:absolute; left:14px; top:64px; z-index:9;
  display:flex; align-items:center; gap:7px;
  background:rgba(255,255,255,0.1); border:1px solid rgba(255,255,255,0.16);
  color:#fff; font-size:12.5px; font-weight:600;
  padding:8px 14px; border-radius:999px; cursor:pointer;
}
.options-btn svg{width:15px; height:15px;}
.options-btn:hover{background:rgba(255,255,255,0.18);}

.options-panel{
  position:absolute; left:14px; top:108px; z-index:10;
  width:220px; max-width:calc(100vw - 28px);
  background:var(--surface); border:1px solid var(--border); border-radius:16px;
  padding:16px; display:none; flex-direction:column; gap:14px;
  box-shadow:0 20px 40px -18px rgba(0,0,0,0.6);
}
.options-panel.show{display:flex;}
.options-section label{display:block; font-size:11.5px; color:var(--muted); margin-bottom:6px; text-transform:uppercase; letter-spacing:0.03em;}
.options-section .filter-select{
  width:100%; background:var(--bg); color:var(--text); border:1px solid var(--border);
  border-radius:10px; padding:9px 10px; font-size:13.5px; font-family:'Inter',sans-serif;
}
.options-section .filter-select option{color:#0D0E14;}

/* ---- report picker panel: current partner + last 5 recent matches ---- */
.report-panel{
  position:absolute; right:14px; top:64px; z-index:10;
  width:250px; max-width:calc(100vw - 28px);
  background:var(--surface); border:1px solid var(--border); border-radius:16px;
  padding:14px; display:none; flex-direction:column; gap:10px;
  box-shadow:0 20px 40px -18px rgba(0,0,0,0.6);
}
.report-panel.show{display:flex;}
.report-panel-head{display:flex; align-items:center; justify-content:space-between;}
.report-panel-head h4{font-family:'Unbounded',sans-serif; font-size:13.5px; color:var(--text); margin:0;}
.report-panel-head button{background:none; border:none; color:var(--muted); font-size:18px; cursor:pointer; line-height:1;}
.report-list{display:flex; flex-direction:column; gap:6px; max-height:220px; overflow-y:auto;}
.report-row{
  display:flex; align-items:center; gap:10px;
  background:var(--surface-alt); border:1px solid var(--border); color:var(--text);
  font-size:12.5px; padding:8px 10px; border-radius:10px; cursor:pointer; text-align:left; width:100%;
}
.report-row:hover{border-color:var(--pink); color:#ff6690;}
.report-thumb{
  width:44px; height:33px; border-radius:6px; object-fit:cover; flex:none;
  background:#0a0b10; border:1px solid var(--border);
}
.report-thumb-empty{display:block;}
.report-row-info{display:flex; flex-direction:column; gap:2px; min-width:0;}
.report-row-id{font-weight:600; color:var(--text); font-size:12.5px;}
.report-row-sub{color:var(--muted); font-size:11px;}
.report-reason-row{justify-content:flex-start; font-weight:500;}
.report-back{
  background:none; border:none; color:var(--muted); font-size:12px; cursor:pointer;
  text-align:left; padding:6px 2px 0;
}
.report-back:hover{color:var(--text);}
.report-row-time{color:var(--muted); font-size:11px; flex:none;}
.report-empty{color:var(--muted); font-size:12.5px; text-align:center; padding:10px 0; margin:0;}

.panel-label{
  display:flex; align-items:center; gap:8px;
  background:rgba(13,14,20,0.55); backdrop-filter:blur(4px);
  padding:7px 14px; border-radius:999px;
  font-size:13px; font-weight:600; color:var(--text);
}
.panel-label .flag-chip{background:rgba(255,255,255,0.1); font-weight:500; font-size:12px; padding:2px 9px; border-radius:999px;}
/* the top-level "Stranger" chip — mirrors .options-btn on the opposite
   side, and sits ABOVE the self-video PiP below it (see .you-panel) so
   the two never overlap, on any screen size */
.panel-label-right{position:absolute; top:64px; right:14px; z-index:5;}

/* ---- transient branded "connecting" message, shown on every match ---- */
.connecting-banner{
  position:absolute; inset:0; z-index:16;
  display:flex; align-items:center; justify-content:center; text-align:center; padding:0 30px;
  background:rgba(9,10,15,0.6); opacity:0; pointer-events:none; transition:opacity .45s ease;
}
.connecting-banner.show{opacity:1;}
.connecting-banner .msg{
  font-family:'Unbounded',sans-serif; font-weight:700; font-size:clamp(18px,3vw,26px); color:#fff;
  display:flex; align-items:center; gap:10px; justify-content:center;
}
.connecting-banner .dot{width:9px; height:9px; border-radius:50%; background:var(--teal); animation:pulse 1.2s ease-in-out infinite;}

/* ---- idle / cooldown / searching / no-face / connected states ---- */
.stranger-state{display:none; flex-direction:column; align-items:center; gap:16px; text-align:center; padding:20px;}
.stranger-state.active{display:flex;}
.idle-glyph{
  width:76px; height:76px; border-radius:26px; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, var(--pink-dim), #6B2FA8 140%); cursor:pointer;
  box-shadow:0 16px 34px -14px rgba(255,77,122,0.55); transition:transform .15s ease;
}
.idle-glyph:hover{transform:scale(1.05);}
.idle-glyph svg{width:28px; height:28px; color:#fff;}
.stranger-state h3{font-family:'Unbounded',sans-serif; font-size:16.5px; color:var(--text);}
.stranger-state p{color:var(--muted); font-size:13px; max-width:30ch;}
.stranger-state.warning .idle-glyph{background:linear-gradient(135deg, #ff6690, #B93AC8 140%);}
.stranger-state.warning h3{color:#ff8fae;}

/* idle-state terms reminder — shown every time this screen is visible */
.tos-reminder{font-size:11.5px !important; color:var(--muted); max-width:34ch; margin-top:6px;}
.tos-reminder a{color:var(--teal); text-decoration:underline;}

.stranger-avatar{
  width:100px; height:100px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  filter:blur(24px); transition:filter 4s linear;
}
.stranger-avatar.revealed{filter:blur(0);}
.stranger-avatar svg{width:46px; height:46px; color:#fff; opacity:0.92;}

#remoteVideo{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  filter:blur(24px); transition:filter 4s linear;
}
#remoteVideo.revealed{filter:blur(0);}

.radar-loader{position:relative; width:90px; height:90px; margin:0 auto;}
.radar-loader .core{position:absolute; inset:30px; border-radius:50%; background:linear-gradient(135deg, var(--pink), #7A3CFF);}
.radar-loader .ring{position:absolute; inset:0; border-radius:50%; border:2px solid var(--teal); opacity:0; animation:radarPing 1.8s ease-out infinite;}
.radar-loader .ring.r2{animation-delay:0.6s;}
.radar-loader .ring.r3{animation-delay:1.2s;}
.radar-loader.small{width:52px; height:52px;}
.radar-loader.small .core{inset:16px;}

/* ---- self video (PiP) ---- */
/* Sits BELOW .panel-label-right (the "Stranger" chip) with a fixed gap, so
   it only ever appears once that chip's row has ended — no overlap even
   when both are visible at once during a call. */
.you-panel{
  position:absolute; right:14px; top:108px; z-index:6;
  width:118px; height:88px; border-radius:14px; overflow:hidden;
  border:2px solid rgba(255,255,255,0.15); background:#0a0b10;
  box-shadow:0 10px 24px -12px rgba(0,0,0,0.6);
}
.you-panel video{width:100%; height:100%; object-fit:cover; transform:scaleX(-1);}
.you-panel .panel-label{position:absolute; top:5px; left:5px; padding:3px 8px; font-size:9.5px;}
.cam-off-state{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:4px; background:var(--surface); color:var(--muted); font-size:10px; text-align:center; padding:6px;}
.cam-off-state svg{width:18px; height:18px;}

/* ---- bottom bar: media controls row + main actions row, always two
   distinct rows on narrow screens so nothing can ever overlap; on wide
   screens there's room so they sit side by side on one line ---- */
.call-bottombar{
  position:absolute; left:0; right:0; bottom:0; z-index:8;
  display:flex; flex-direction:column; align-items:center; gap:10px;
  padding:10px 12px 14px;
  background:linear-gradient(0deg, rgba(9,10,15,0.85), rgba(9,10,15,0));
}
.action-group{display:flex; align-items:center; gap:9px; flex-wrap:wrap; justify-content:center;}
.control-btn{
  display:flex; align-items:center; gap:7px; border:none; border-radius:999px;
  font-family:'Inter',sans-serif; font-weight:600; font-size:13.5px; padding:11px 20px; cursor:pointer;
  transition:transform .12s ease, opacity .12s ease;
}
.control-btn:active{transform:scale(0.97);}
.control-btn:disabled{opacity:0.35; cursor:not-allowed;}
.control-btn svg{width:15px; height:15px;}
.control-btn.primary{background:linear-gradient(100deg, var(--pink), #7A3CFF); color:#fff; box-shadow:0 10px 22px -10px rgba(255,77,122,0.55);}
.control-btn.accent{background:var(--teal); color:#08201c;}
.control-btn.danger{background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.16); color:#fff;}
.control-btn.danger:hover{border-color:#ff6690; color:#ff6690;}

.media-group{display:flex; align-items:center; gap:10px; justify-content:center; flex-wrap:wrap;}
.media-btn{
  width:40px; height:40px; border-radius:50%; flex:none;
  background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.14); color:#fff;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.media-btn svg{width:17px; height:17px;}
.media-btn:hover{border-color:rgba(255,255,255,0.3);}
.media-btn.muted{background:rgba(255,77,122,0.24); border-color:rgba(255,77,122,0.55); color:#ff6690;}
.media-btn:disabled{opacity:0.35; cursor:not-allowed;}

/* ---- chat column (desktop: real side-by-side; mobile: sliding drawer) ---- */
.chat-col{
  position:relative; display:flex; flex-direction:column; background:var(--surface);
  border-left:1px solid var(--border);
}
.chat-drawer-head{display:none; align-items:center; justify-content:space-between; padding:14px 18px; border-bottom:1px solid var(--border); flex:none;}
.chat-drawer-head h4{font-family:'Unbounded',sans-serif; font-size:15px; margin:0;}
.chat-drawer-head button{background:none; border:none; color:var(--muted); cursor:pointer;}
.chat-drawer-head button svg{width:20px; height:20px;}
.chat-drag-handle{display:none;}

.chat-log{flex:1; min-height:0; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:12px;}
.chat-empty{color:var(--muted); font-size:13px; text-align:center; margin:auto; max-width:22ch;}
.msg{max-width:82%; padding:9px 13px; border-radius:16px; font-size:13.5px; line-height:1.45;}
.msg.sent{align-self:flex-end; background:linear-gradient(100deg, var(--pink), #7A3CFF); color:#fff; border-bottom-right-radius:4px;}
.msg.received{align-self:flex-start; background:var(--surface-alt); border:1px solid var(--border); color:var(--text); border-bottom-left-radius:4px;}
.msg.system{align-self:center; color:var(--muted); font-size:12px; background:none; padding:4px 0;}

.chat-input-row{flex:none; display:flex; gap:8px; padding:12px 14px; border-top:1px solid var(--border);}
.chat-input-row input{
  flex:1; background:var(--bg); border:1px solid var(--border); border-radius:999px;
  color:var(--text); font-family:'Inter',sans-serif; font-size:14px; padding:10px 16px;
}
.chat-input-row input:disabled{opacity:0.5;}
.chat-input-row button{
  background:var(--pink); color:#fff; border:none; border-radius:999px; width:40px; height:40px;
  display:flex; align-items:center; justify-content:center; cursor:pointer; flex:none;
}
.chat-input-row button:disabled{opacity:0.4; cursor:not-allowed;}
.chat-input-row button svg{width:16px; height:16px;}

.chat-toggle-btn{
  position:absolute; right:14px; z-index:9; bottom:160px; /* clears the taller two-row bottom bar (media row + action row) */
  width:50px; height:50px; border-radius:50%; background:var(--pink); color:#fff; border:none;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 24px -8px rgba(255,77,122,0.6); cursor:pointer;
}
.chat-toggle-btn svg{width:21px; height:21px;}
.chat-toggle-btn .badge{
  position:absolute; top:-4px; right:-4px; background:var(--teal); color:#08201c; font-size:11px; font-weight:700;
  width:19px; height:19px; border-radius:50%; display:none; align-items:center; justify-content:center;
}
.chat-toggle-btn .badge.show{display:flex;}

/* ---- blocking first-visit terms overlay ---- */
.tos-overlay{
  position:fixed; inset:0; z-index:500; background:rgba(9,10,15,0.9);
  display:none; align-items:center; justify-content:center; padding:20px;
}
.tos-overlay.show{display:flex;}
.tos-card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:32px; max-width:420px; width:100%;
}
.tos-card h3{font-family:'Unbounded',sans-serif; font-size:19px; margin-bottom:16px; color:var(--text);}
.tos-card ul{list-style:disc; padding-left:20px; color:var(--muted); font-size:13.5px; display:flex; flex-direction:column; gap:8px;}
.tos-card .tos-fullink{margin-top:16px; font-size:12.5px; color:var(--muted);}
.tos-card .tos-fullink a{color:var(--teal);}
.tos-card .btn-primary{width:100%; margin-top:20px; text-align:center;}

/* ---- report screenshot toast + generic toast ---- */
.shot-toast{
  position:fixed; left:50%; bottom:28px; transform:translate(-50%, 20px);
  display:flex; align-items:center; gap:12px;
  background:var(--surface); border:1px solid var(--border); color:var(--text);
  padding:10px 16px 10px 10px; border-radius:16px; font-size:13px; z-index:200;
  opacity:0; transition:all .25s ease; pointer-events:none; box-shadow:0 12px 28px -12px rgba(0,0,0,0.5);
}
.shot-toast.show{opacity:1; transform:translate(-50%, 0);}
.shot-toast canvas{width:44px; height:33px; border-radius:8px; background:#000; flex:none;}

.call-toast{
  position:fixed; left:50%; bottom:28px; transform:translate(-50%, 20px);
  background:var(--surface); border:1px solid var(--border); color:var(--text);
  padding:12px 20px; border-radius:999px; font-size:13.5px; z-index:200;
  opacity:0; transition:all .25s ease; pointer-events:none; box-shadow:0 12px 28px -12px rgba(0,0,0,0.5);
}
.call-toast.show{opacity:1; transform:translate(-50%, 0);}

/* ---- desktop (≥901px): real side-by-side chat column, media/filter
   controls rail on the right, action bar bottom-center ---- */
@media (min-width:901px){
  .chat-toggle-btn{display:none !important;}
  .chat-col{height:100%;}
  .you-panel{top:108px; right:16px;} /* stays below .panel-label-right — never overlaps it */
}

/* ---- mobile / tablet (≤900px): video fills everything, chat becomes a
   drawer that slides up from the bottom ---- */
@media (max-width:900px){
  .call-main{display:block;}
  .video-col{position:absolute; inset:0;}
  .chat-col{
    position:absolute; left:0; right:0; bottom:0; top:auto; height:78%;
    border-top-left-radius:22px; border-top-right-radius:22px; border-left:none;
    transform:translateY(105%); transition:transform .28s ease; box-shadow:0 -16px 34px rgba(0,0,0,0.45);
    z-index:30;
  }
  .chat-col.open{transform:translateY(0);}
  .chat-drawer-head{display:flex;}
  .chat-drag-handle{display:block; width:40px; height:4px; border-radius:99px; background:var(--border); margin:8px auto 0; position:absolute; left:50%; top:6px; transform:translateX(-50%);}
}

@media (max-width:640px){
  .call-topbar{padding:12px 12px 30px;}
  .you-panel{width:96px; height:72px; right:10px; top:96px;}
  .panel-label-right{top:58px;}
  .topbar-brand{font-size:15px;}
  .control-btn{padding:10px 16px; font-size:12.5px;}
  .media-btn{width:38px; height:38px;}
  .chat-toggle-btn{bottom:150px; right:12px; width:46px; height:46px;}
  .options-btn{top:58px; padding:7px 12px; font-size:11.5px;}
  .options-panel{top:98px; width:calc(100vw - 28px);}
  .report-panel{top:58px; width:calc(100vw - 28px);}
}