/* ═══════════════════════════════════════════════════════════════════════════
   flexONCall — Main Stylesheet
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── CSS Variables ──────────────────────────────────────────────────────── */
:root {
  --bg-dark:    #0d0d1a;
  --bg-card:    #13131f;
  --bg-card2:   #1a1a2e;
  --bg-input:   #1e1e30;
  --border:     rgba(255,255,255,.08);
  --accent:     #6C63FF;
  --accent-hover:#5a52e0;
  --accent-red: #ff4757;
  --accent-green:#2ed573;
  --text-primary:  #f0f0ff;
  --text-secondary:#c4c4d8;
  --text-muted:    #6b6b8a;
}

/* ── Reset & Base ───────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }

html { font-size:16px; }

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
  background: var(--bg-dark);
  color: var(--text-secondary);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color:var(--accent); text-decoration:none; }
a:hover { text-decoration:underline; }

/* ── Scrollbar ──────────────────────────────────────────────────────────── */
::-webkit-scrollbar       { width:5px; height:5px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:rgba(108,99,255,.3); border-radius:4px; }
::-webkit-scrollbar-thumb:hover { background:rgba(108,99,255,.6); }

/* ── Auth Pages ─────────────────────────────────────────────────────────── */
.auth-page   { min-height:100vh; overflow:hidden; position:relative; }
.auth-bg     { position:fixed; inset:0; pointer-events:none; z-index:0; overflow:hidden; }
.auth-wrapper{ position:relative; z-index:1; display:flex; align-items:center;
               justify-content:center; min-height:100vh; padding:24px; }
.auth-card   { background:var(--bg-card); border:1px solid var(--border); border-radius:24px;
               padding:40px 36px; width:100%; max-width:440px;
               box-shadow:0 24px 80px rgba(0,0,0,.5); }

/* Animated orbs */
.orb { position:absolute; border-radius:50%; filter:blur(60px); pointer-events:none; }
.orb1 { width:400px; height:400px; background:rgba(108,99,255,.18); top:-100px; left:-100px; }
.orb2 { width:300px; height:300px; background:rgba(255,101,132,.12); bottom:-50px; right:-50px; }
.orb3 { width:200px; height:200px; background:rgba(67,203,255,.1); top:50%; left:50%; transform:translate(-50%,-50%); }

/* ── Logo ───────────────────────────────────────────────────────────────── */
.logo { text-align:center; margin-bottom:28px; }
.logo-icon { font-size:42px; margin-bottom:8px; }
.logo-text  { font-size:28px; font-weight:800; color:var(--text-primary); letter-spacing:-0.5px; }
.logo-text span { color:var(--accent); }
.logo-sub   { color:var(--text-muted); font-size:14px; margin-top:4px; }

/* ── Forms ──────────────────────────────────────────────────────────────── */
.form-group  { margin-bottom:18px; }
.form-group label { display:block; font-size:13px; font-weight:600; color:var(--text-secondary);
                    margin-bottom:7px; }
.form-input  { width:100%; background:var(--bg-input); border:1.5px solid var(--border);
               border-radius:12px; padding:12px 16px; color:var(--text-primary);
               font-size:14px; outline:none; transition:border-color .2s, box-shadow .2s;
               font-family:inherit; }
.form-input:focus  { border-color:var(--accent); box-shadow:0 0 0 3px rgba(108,99,255,.15); }
.form-input::placeholder { color:var(--text-muted); }
.form-row    { display:grid; grid-template-columns:1fr 1fr; gap:14px; }

.input-pw    { position:relative; }
.input-pw .form-input { padding-right:44px; }
.pw-toggle   { position:absolute; right:14px; top:50%; transform:translateY(-50%);
               cursor:pointer; font-size:16px; opacity:.6; user-select:none; }
.pw-toggle:hover { opacity:1; }

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.btn-primary { display:block; width:100%; background:var(--accent); color:#fff;
               border:none; border-radius:12px; padding:13px 24px; font-size:15px;
               font-weight:700; cursor:pointer; transition:all .2s; text-align:center;
               font-family:inherit; letter-spacing:.2px; }
.btn-primary:hover  { background:var(--accent-hover); transform:translateY(-1px);
                      box-shadow:0 6px 24px rgba(108,99,255,.4); }
.btn-primary:active { transform:translateY(0); }
.w-full { width:100%; }

/* ── Alerts ─────────────────────────────────────────────────────────────── */
.alert { padding:12px 16px; border-radius:10px; font-size:13px; margin-bottom:18px; line-height:1.5; }
.alert-error   { background:rgba(255,71,87,.12); border:1px solid rgba(255,71,87,.25); color:#ff6b7a; }
.alert-success { background:rgba(46,213,115,.12); border:1px solid rgba(46,213,115,.25); color:#2ed573; }

/* ── Auth Footer ─────────────────────────────────────────────────────────── */
.auth-footer { text-align:center; margin-top:24px; font-size:13px; color:var(--text-muted); }
.auth-footer p + p { margin-top:8px; }

/* ── Spinner ─────────────────────────────────────────────────────────────── */
.spinner { display:inline-block; width:16px; height:16px; border:2px solid rgba(255,255,255,.3);
           border-top-color:#fff; border-radius:50%; animation:spin .7s linear infinite; vertical-align:middle; }
@keyframes spin { to { transform:rotate(360deg); } }

/* ── Password Strength ───────────────────────────────────────────────────── */
.pw-strength { height:4px; border-radius:2px; margin-top:6px; background:var(--border); overflow:hidden; }
.pw-strength-bar { height:100%; width:0; border-radius:2px; transition:all .4s; }
.strength-weak   { background:#ff4d4d; width:30%; }
.strength-fair   { background:#ffa040; width:60%; }
.strength-strong { background:#40c057; width:100%; }

/* ── Admin Panel ─────────────────────────────────────────────────────────── */
@media (max-width:768px) {
  .form-row        { grid-template-columns:1fr; }
  .stats-row       { grid-template-columns:1fr 1fr; gap:10px; }
  .admin-sidebar   { display:none; }
  .admin-content   { padding:16px; }
  .user-table th:nth-child(3),
  .user-table td:nth-child(3) { display:none; } /* hide "Registered" col on mobile */
}

@media (max-width:480px) {
  /* Auth cards: full-bleed on tiny screens */
  .auth-wrapper  { padding:0; align-items:flex-end; }
  .auth-card     {
    border-radius:24px 24px 0 0; padding:32px 20px 28px;
    padding-bottom:max(28px, env(safe-area-inset-bottom));
    max-width:100%;
  }
  /* Prevent iOS input zoom — all inputs must be 16px */
  .form-input    { font-size:16px !important; }
  .logo-text     { font-size:24px; }
  .logo-icon     { font-size:36px; }
  .btn-primary   { padding:14px 24px; font-size:16px; }
  .stats-row     { grid-template-columns:1fr; }
  .captcha-row   { flex-direction:column; align-items:stretch; }
  .captcha-row canvas { width:100% !important; height:52px !important; }

  /* Admin table: stack actions */
  .btn-approve, .btn-reject { padding:8px 12px; font-size:13px; }
}

/* Ensure safe area on all auth pages */
.auth-wrapper {
  padding-top: max(24px, env(safe-area-inset-top));
  padding-left: max(16px, env(safe-area-inset-left));
  padding-right: max(16px, env(safe-area-inset-right));
}

/* ── Utility ─────────────────────────────────────────────────────────────── */
.text-accent  { color:var(--accent); }
.text-muted   { color:var(--text-muted); }
.text-danger  { color:var(--accent-red); }
.mt-1  { margin-top:4px; }
.mt-2  { margin-top:8px; }
.mt-4  { margin-top:16px; }

/* ── Pulse animation for call ────────────────────────────────────────────── */
@keyframes pulse {
  0%   { box-shadow:0 0 0 0 rgba(108,99,255,.6); }
  70%  { box-shadow:0 0 0 16px rgba(108,99,255,0); }
  100% { box-shadow:0 0 0 0 rgba(108,99,255,0); }
}
.call-avatar { animation:pulse 1.8s infinite; }

/* ── Message Bubble animation ─────────────────────────────────────────────── */
.bubble { animation:bubblePop .2s ease-out; }
@keyframes bubblePop {
  from { transform:scale(0.88); opacity:0; }
  to   { transform:scale(1);    opacity:1; }
}

/* ── Glow focus ──────────────────────────────────────────────────────────── */
textarea:focus, input:focus { outline:none; }

/* ── Typing indicator ────────────────────────────────────────────────────── */
.typing-indicator { display:flex; align-items:center; gap:4px; padding:8px 14px;
                    background:var(--bg-card2); border-radius:18px; border-bottom-left-radius:4px;
                    width:fit-content; }
.typing-indicator span { width:6px; height:6px; background:var(--text-muted); border-radius:50%;
                          animation:typingBounce 1.2s infinite; }
.typing-indicator span:nth-child(2) { animation-delay:.2s; }
.typing-indicator span:nth-child(3) { animation-delay:.4s; }
@keyframes typingBounce { 0%,60%,100%{transform:translateY(0)} 30%{transform:translateY(-5px)} }

/* ── Empty State ──────────────────────────────────────────────────────────── */
.empty-chat { display:flex; flex-direction:column; align-items:center; justify-content:center;
              height:100%; text-align:center; padding:24px; }
.empty-chat h3 { color:var(--text-primary); font-size:20px; margin-bottom:8px; }
.empty-chat p  { font-size:14px; max-width:280px; }