/* ============================================================
   Roxaz - Design System / Component Layer
   Loaded after the base inline stylesheet so tokens & components
   override and unify the whole UI under one Roxaz theme.
   ============================================================ */

/* ---- Design tokens ---- */
:root{
  --bg:#070a12; --bg-2:#0b1020;
  --panel:#0f1524; --panel2:#161d30; --panel3:#1c2438;
  --border:rgba(255,255,255,.08); --border-strong:rgba(255,255,255,.14);
  --text:#f5f8ff; --muted:#9aa6bd; --muted-2:#6b7689;
  --primary:#7c3aed; --primary-strong:#6d28d9; --primary-soft:#c4b5fd;
  --secondary:#3b82f6; --accent:#22d3ee; --accent-2:#34d399;
  --grad:linear-gradient(135deg,#7c3aed 0%,#3b82f6 55%,#22d3ee 100%);
  --success:#22c55e; --warning:#f59e0b; --error:#ef4444; --danger:#ef4444;
  --pink:#ec4899; --purple:#8b5cf6; --green:var(--success); --red:var(--error);
  --accent-strong:var(--primary-strong); --accent-soft:var(--primary-soft);
  --radius:16px; --radius-sm:10px; --radius-lg:22px; --radius-xl:28px; --radius-pill:999px;
  --shadow-sm:0 2px 8px rgba(0,0,0,.25);
  --shadow:0 12px 32px rgba(2,6,20,.45);
  --shadow-lg:0 24px 70px rgba(2,6,20,.55);
  --ring:0 0 0 3px rgba(124,58,237,.45);
  --dur:.2s; --ease:cubic-bezier(.4,0,.2,1);
  --font:'Inter',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}

/* ---- Base ---- */
html{ -webkit-text-size-adjust:100%; }
body{
  font-family:var(--font);
  min-height:100dvh;
  background:
    radial-gradient(60% 50% at 12% 8%,rgba(124,58,237,.18),transparent 60%),
    radial-gradient(50% 45% at 88% 14%,rgba(34,211,238,.14),transparent 55%),
    radial-gradient(60% 60% at 70% 100%,rgba(52,211,153,.10),transparent 60%),
    var(--bg);
  color:var(--text);
}
h1,h2,h3{ letter-spacing:-.02em; }
::selection{ background:rgba(124,58,237,.35); color:#fff; }

/* ---- Accessibility: focus ---- */
:focus-visible{ outline:2px solid var(--primary-soft); outline-offset:2px; }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--primary-soft); outline-offset:2px; box-shadow:none;
}
button{ font-family:var(--font); }

/* ---- Header / brand ---- */
header{
  height:64px;
  padding:0 max(18px,env(safe-area-inset-right)) 0 max(18px,env(safe-area-inset-left));
  background:rgba(7,10,18,.72);
}
.logo,.landing-logo{ gap:11px; }
.logo-word{ letter-spacing:-.03em; }
.brand-mark{ width:30px; height:30px; border-radius:11px; box-shadow:0 8px 22px rgba(124,58,237,.35); }
.landing-logo .brand-mark{ width:38px; height:38px; }

/* ---- Video controls ---- */
.controls{
  gap:10px; margin:14px 0;
  padding:10px max(10px,env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left));
}
.control{
  min-width:52px; height:52px; border-radius:var(--radius);
  border:1px solid var(--border-strong);
  background:linear-gradient(180deg,rgba(28,36,56,.96),rgba(18,24,40,.96));
  font-size:18px;
  transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease),border-color var(--dur) var(--ease),filter var(--dur) var(--ease);
}
.control:hover{ transform:translateY(-2px); border-color:rgba(255,255,255,.22); box-shadow:var(--shadow); filter:brightness(1.06); }
.control:active{ transform:translateY(0) scale(.97); }
.control[disabled]{ opacity:.45; filter:grayscale(.3); cursor:not-allowed; }
.start-btn{ background:var(--grad); padding:0 30px; font-weight:800; box-shadow:0 12px 30px rgba(124,58,237,.4); }
.next-btn{ background:linear-gradient(180deg,#f8fafc,#e2e8f0); color:#0f1524; font-weight:800; }
.stop-btn{ background:linear-gradient(180deg,#f87171,#b91c1c); }
#callTimer{ color:#cbd5e1; font-size:14px; }

/* ---- Cards / dialogs / surfaces ---- */
.video-card,.dialog,.auth-card,.menu{ border-radius:var(--radius-lg); border:1px solid var(--border); background:var(--panel); box-shadow:var(--shadow); }
.video-card{ overflow:hidden; }
.dialog,.auth-card{ border-color:var(--border-strong); }
.menu{ border-radius:var(--radius); }

/* ---- Inputs ---- */
input,select,textarea{ font-family:var(--font); border-radius:var(--radius-sm); border:1px solid var(--border-strong); background:var(--panel2); color:var(--text); }
input:focus,select:focus,textarea:focus{ border-color:var(--primary); box-shadow:var(--ring); outline:none; }

/* ---- Pills / status ---- */
.online-dot{ background:var(--success); box-shadow:0 0 0 3px rgba(34,197,94,.25); }
.status,.chat-status,.preview-pill{ border-radius:var(--radius-pill); }
.matching-loader{ color:var(--primary-soft); }

/* ---- Toasts ---- */
.vchat-toast{ border-radius:var(--radius); border:1px solid var(--border-strong); background:var(--panel3); box-shadow:var(--shadow); animation:rxz-toast .25s var(--ease); }
@keyframes rxz-toast{ from{ opacity:0; transform:translateY(8px) } to{ opacity:1; transform:none } }

/* ---- Modal entrance ---- */
.dialog-backdrop{ animation:rxz-fade .2s var(--ease); }
.dialog,.auth-card{ animation:rxz-pop .26s var(--ease); }
@keyframes rxz-fade{ from{opacity:0} to{opacity:1} }
@keyframes rxz-pop{ from{opacity:0; transform:translateY(10px) scale(.98)} to{opacity:1; transform:none} }

/* ---- Matching / loading spinner ---- */
.matching-loader[hidden]{ display:none !important; }
.matching-loader:not([hidden]){ display:inline-flex; gap:8px; align-items:center; }
.matching-loader:not([hidden])::before{
  content:""; width:14px; height:14px; border-radius:50%;
  border:2px solid var(--primary-soft); border-top-color:transparent;
  animation:rxz-spin .8s linear infinite;
}
@keyframes rxz-spin{ to{ transform:rotate(360deg) } }

/* ---- Empty / placeholder ---- */
.placeholder{ background:radial-gradient(60% 60% at 50% 40%,rgba(124,58,237,.12),transparent 70%); }

/* ---- Landing CTA ---- */
.primary-cta{ background:var(--grad); border-radius:var(--radius-pill); box-shadow:0 16px 40px rgba(124,58,237,.42);
  transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease),filter var(--dur) var(--ease); }
.primary-cta:hover{ transform:translateY(-2px); box-shadow:0 22px 52px rgba(124,58,237,.5); filter:brightness(1.05); }
.primary-cta:active{ transform:translateY(0) scale(.98); }

/* ---- Layout / safe areas ---- */
.app,.landing-shell{ min-height:100dvh; }
.main{ padding:0 16px 8px; }
footer{ padding:22px 16px calc(22px + env(safe-area-inset-bottom)); }
.offline-banner{ padding-top:calc(12px + env(safe-area-inset-top)); }

/* ---- Responsive ---- */
@media(max-width:1024px){ .feature-bar{ grid-template-columns:repeat(3,1fr); } }
@media(max-width:768px){
  .feature-bar{ grid-template-columns:repeat(2,1fr); }
  header{ height:58px; }
  .logo{ font-size:24px; }
  .control{ min-width:48px; height:48px; font-size:17px; }
}
@media(max-width:414px){
  .controls{ gap:8px; }
  .control{ min-width:46px; height:46px; padding:0 12px; }
  .start-btn{ padding:0 22px; }
  .main{ padding:0 12px 6px; }
}
@media(max-width:360px){ .controls{ flex-wrap:wrap; } }

/* ---- Light theme ---- */
body.theme-light{
  --bg:#f6f8ff; --bg-2:#eef2fb; --panel:#ffffff; --panel2:#f1f5fb; --panel3:#e7edf7;
  --border:rgba(15,23,42,.10); --border-strong:rgba(15,23,42,.16);
  --text:#0f1524; --muted:#5b6678; --muted-2:#8b95a7;
  background:
    radial-gradient(60% 50% at 12% 8%,rgba(124,58,237,.12),transparent 60%),
    radial-gradient(50% 45% at 88% 14%,rgba(34,211,238,.12),transparent 55%),
    var(--bg);
}
body.theme-light .control{ background:linear-gradient(180deg,#ffffff,#eef2fb); color:#0f1524; }
body.theme-light .next-btn{ background:linear-gradient(180deg,#7c3aed,#6d28d9); color:#fff; }
body.theme-light .vchat-toast{ background:#fff; }
body.theme-light input,body.theme-light select,body.theme-light textarea{ background:#fff; }

/* ---- Ocean theme ---- */
body.theme-ocean{
  --bg:#04181f; --bg-2:#062029; --panel:#07222b; --panel2:#0a2c37; --panel3:#0e3845;
  --border:rgba(255,255,255,.10); --border-strong:rgba(255,255,255,.16);
  background:
    radial-gradient(60% 50% at 12% 8%,rgba(34,211,238,.16),transparent 60%),
    radial-gradient(50% 45% at 88% 14%,rgba(52,211,153,.12),transparent 55%),
    var(--bg);
}

/* ---- Scrollbar ---- */
*{ scrollbar-width:thin; scrollbar-color:var(--panel3) transparent; }
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{ background:var(--panel3); border-radius:var(--radius-pill); border:2px solid transparent; background-clip:padding-box; }
::-webkit-scrollbar-thumb:hover{ background:var(--muted-2); }

/* ---- Reduced motion ---- */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
  .matching-loader:not([hidden])::before{ animation:none; }
}