/* =============================================
   VIBEUIN v2.0 — GLOBAL STYLES
   Glassmorphism · Multi-theme · Telegram-like
   ============================================= */

@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;500;600;700;800&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;1,9..40,300&display=swap');

/* ── CSS Variables (Dark Theme) ─────────────── */
:root {
  --bg-deep:      #050b18;
  --bg-mid:       #0a1428;
  --bg-card:      rgba(255,255,255,0.04);
  --bg-card-hov:  rgba(255,255,255,0.07);
  --glass:        rgba(255,255,255,0.06);
  --glass-border: rgba(255,255,255,0.10);
  --glass-strong: rgba(255,255,255,0.12);

  --cyan:    #00e5ff;
  --green:   #00ff88;
  --purple:  #a855f7;
  --pink:    #f472b6;
  --blue:    #3b82f6;

  --grad-main:    linear-gradient(135deg, #00e5ff 0%, #00ff88 50%, #a855f7 100%);
  --grad-btn:     linear-gradient(135deg, #00e5ff, #00ff88);
  --grad-msg-in:  linear-gradient(135deg, rgba(0,229,255,0.15), rgba(0,255,136,0.08));
  --grad-msg-out: linear-gradient(135deg, rgba(168,85,247,0.20), rgba(59,130,246,0.15));

  --text-primary:   #f0f6ff;
  --text-secondary: rgba(240,246,255,0.55);
  --text-muted:     rgba(240,246,255,0.30);

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-xl: 32px;

  --shadow-glow: 0 0 24px rgba(0,229,255,0.18);
  --shadow-card: 0 8px 32px rgba(0,0,0,0.40);

  --nav-h: 64px;
  --header-h: 60px;

  --font-head: 'Syne', sans-serif;
  --font-body: 'DM Sans', sans-serif;

  --anim-fast: 150ms cubic-bezier(0.4,0,0.2,1);
  --anim-med:  280ms cubic-bezier(0.4,0,0.2,1);
  --anim-slow: 500ms cubic-bezier(0.4,0,0.2,1);
}

/* ── LIGHT THEME ─────────────────────────────── */
body.theme-light {
  --bg-deep:      #f0f4fc;
  --bg-mid:       #ffffff;
  --bg-card:      rgba(0,0,0,0.03);
  --bg-card-hov:  rgba(0,0,0,0.06);
  --glass:        rgba(255,255,255,0.80);
  --glass-border: rgba(0,0,0,0.08);
  --glass-strong: rgba(255,255,255,0.92);

  --grad-msg-in:  linear-gradient(135deg, rgba(0,186,207,0.12), rgba(0,200,100,0.08));
  --grad-msg-out: linear-gradient(135deg, rgba(139,60,220,0.14), rgba(40,110,230,0.10));

  --text-primary:   #0f172a;
  --text-secondary: rgba(15,23,42,0.60);
  --text-muted:     rgba(15,23,42,0.38);

  --shadow-card: 0 4px 24px rgba(0,0,0,0.12);
}

body.theme-light .bg-mesh {
  background:
    radial-gradient(ellipse 80% 60% at 20% 10%, rgba(0,229,255,0.06) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 80% 80%, rgba(168,85,247,0.05) 0%, transparent 60%),
    #f0f4fc;
}

body.theme-light .chat-room {
  background: var(--bg-deep);
}

/* ── Theme Transition ────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box; margin: 0; padding: 0;
  -webkit-tap-highlight-color: transparent;
}
html {
  height: 100%; font-size: 16px; -webkit-text-size-adjust: 100%;
  touch-action: pan-y;
}
body {
  font-family: var(--font-body);
  background: var(--bg-deep);
  color: var(--text-primary);
  min-height: 100%;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
  transition: background-color 300ms ease, color 300ms ease;
}
a { color: var(--cyan); text-decoration: none; }
button { font-family: var(--font-body); cursor: pointer; border: none; outline: none; touch-action: manipulation; }
input, textarea { font-family: var(--font-body); outline: none; border: none; }
img, video { max-width: 100%; display: block; }
ul, ol { list-style: none; }

/* ── Background Mesh ───────────────────────── */
.bg-mesh {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 80% 60% at 20% 10%, rgba(0,229,255,0.07) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 80% 80%, rgba(168,85,247,0.08) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 50% 50%, rgba(0,255,136,0.04) 0%, transparent 70%),
    var(--bg-deep);
  transition: background 300ms ease;
}

/* ── Layout ────────────────────────────────── */
.app-container {
  position: relative; z-index: 1; max-width: 480px; margin: 0 auto;
  height: 100dvh; display: flex; flex-direction: column; overflow: hidden;
}

/* ── Glass Utilities ───────────────────────── */
.glass {
  background: var(--glass);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
}
.glass-strong {
  background: var(--glass-strong);
  border: 1px solid rgba(255,255,255,0.14);
  backdrop-filter: blur(28px) saturate(1.6);
  -webkit-backdrop-filter: blur(28px) saturate(1.6);
}
body.theme-light .glass-strong {
  border-color: rgba(0,0,0,0.10);
}

/* ── Scrollbar ─────────────────────────────── */
::-webkit-scrollbar { width: 3px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(0,229,255,0.3); border-radius: 99px; }

/* ══════════════════════════════════════════════
   LOGIN PAGE
   ══════════════════════════════════════════════ */
.login-page {
  min-height: 100dvh;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.login-card {
  width: 100%; max-width: 380px;
  border-radius: var(--radius-xl);
  padding: 40px 32px;
  position: relative; overflow: hidden;
  animation: fadeInUp 400ms ease;
}
.login-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: var(--grad-main);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}
.login-logo { text-align: center; margin-bottom: 32px; }
.login-logo-mark {
  width: 72px; height: 72px; border-radius: 22px;
  background: var(--grad-main);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-head); font-size: 28px; font-weight: 800;
  color: var(--bg-deep); margin-bottom: 16px;
  box-shadow: 0 8px 32px rgba(0,229,255,0.3);
}
.login-logo h1 { font-family: var(--font-head); font-size: 28px; font-weight: 800; letter-spacing: -0.5px; }
.login-logo h1 span { background: var(--grad-main); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.login-logo p { color: var(--text-secondary); font-size: 14px; margin-top: 6px; }

.login-divider { display: flex; align-items: center; gap: 12px; margin: 24px 0; }
.login-divider span { color: var(--text-muted); font-size: 12px; white-space: nowrap; }
.login-divider::before, .login-divider::after { content: ''; flex: 1; height: 1px; background: var(--glass-border); }

.btn-google {
  width: 100%; padding: 14px; border-radius: var(--radius-md);
  background: var(--glass); border: 1px solid var(--glass-border);
  color: var(--text-primary); font-size: 15px; font-weight: 500;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  transition: all var(--anim-med);
}
.btn-google:hover { background: var(--glass-strong); border-color: rgba(255,255,255,0.2); transform: translateY(-1px); }
.btn-google:active { transform: translateY(0); }
.btn-google:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }
.btn-google svg { width: 20px; height: 20px; flex-shrink: 0; }
.btn-guest {
  width: 100%; padding: 14px; border-radius: var(--radius-md);
  background: transparent; border: 1px solid var(--glass-border);
  color: var(--text-secondary); font-size: 14px;
  transition: all var(--anim-med);
}
.btn-guest:hover { border-color: var(--cyan); color: var(--cyan); }
.btn-guest:disabled { opacity: 0.6; cursor: not-allowed; }
.login-error {
  background: rgba(248,113,113,0.12); border: 1px solid rgba(248,113,113,0.3);
  border-radius: var(--radius-md); padding: 10px 14px;
  font-size: 13px; color: #fca5a5; margin-top: 10px; text-align: center;
}
.login-footer { text-align: center; margin-top: 24px; }
.login-footer p { font-size: 12px; color: var(--text-muted); }
.login-footer a { color: var(--cyan); }
.guest-banner {
  background: linear-gradient(135deg, rgba(248,113,113,0.15), rgba(251,146,60,0.10));
  border: 1px solid rgba(248,113,113,0.25);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  display: flex; align-items: center; gap: 10px;
  margin-top: 16px; font-size: 13px; color: #fca5a5;
}
.guest-timer-val { font-weight: 700; font-variant-numeric: tabular-nums; }

/* ══════════════════════════════════════════════
   APP HEADER
   ══════════════════════════════════════════════ */
.app-header {
  height: var(--header-h); flex-shrink: 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 16px; border-bottom: 1px solid var(--glass-border);
  position: relative; z-index: 10;
}
.header-left { display: flex; align-items: center; gap: 10px; }
.header-brand {
  font-family: var(--font-head); font-size: 20px; font-weight: 800;
  background: var(--grad-main); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.header-actions { display: flex; align-items: center; gap: 4px; }

.theme-toggle-btn {
  background: var(--glass); border: 1px solid var(--glass-border);
  border-radius: 99px; padding: 4px 10px;
  font-size: 15px; cursor: pointer;
  transition: all var(--anim-fast);
  display: flex; align-items: center; gap: 0;
}
.theme-toggle-btn:hover { background: var(--glass-strong); transform: scale(1.05); }
.theme-icon-light { display: none; }
body.theme-light .theme-icon-dark { display: none; }
body.theme-light .theme-icon-light { display: inline-flex; }

/* ══════════════════════════════════════════════
   ICON BUTTONS
   ══════════════════════════════════════════════ */
.icon-btn {
  /* 44px minimum for accessibility (Apple HIG / WCAG) */
  width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: transparent; color: var(--text-secondary);
  transition: background 80ms ease, color 80ms ease, transform 80ms ease;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  flex-shrink: 0;
}
.icon-btn:hover  { background: var(--glass); color: var(--text-primary); }
.icon-btn:active { transform: scale(0.88) !important; background: var(--glass-strong); transition-duration: 50ms !important; }
.icon-btn svg { width: 20px; height: 20px; pointer-events: none; }
.call-btn { color: var(--green) !important; }
.call-btn:hover { background: rgba(0,255,136,0.1) !important; }

/* ══════════════════════════════════════════════
   BOTTOM NAV
   ══════════════════════════════════════════════ */
.bottom-nav {
  height: var(--nav-h); flex-shrink: 0;
  display: flex; align-items: center; justify-content: space-around;
  border-top: 1px solid var(--glass-border); position: relative; z-index: 10;
}
.nav-item {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  /* Minimum 48px for accessibility */
  gap: 4px; padding: 8px 0; background: transparent;
  color: var(--text-muted); font-size: 11px; font-weight: 500; position: relative;
  transition: color var(--anim-fast), transform var(--anim-fast);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  min-height: 56px;
  border: none; cursor: pointer;
}
.nav-item svg { width: 22px; height: 22px; transition: transform var(--anim-fast); pointer-events: none; }
.nav-item.active { color: var(--cyan); }
.nav-item.active svg { transform: scale(1.1); }
.nav-item:active { opacity: 0.7; transform: scale(0.94); transition-duration: 60ms; }
.nav-badge {
  position: absolute; top: 6px; right: calc(50% - 24px);
  background: var(--cyan); color: var(--bg-deep); font-size: 9px;
  font-weight: 800; min-width: 16px; height: 16px; border-radius: 99px;
  display: flex; align-items: center; justify-content: center; padding: 0 3px;
  pointer-events: none;
}

/* ══════════════════════════════════════════════
   SCREENS
   ══════════════════════════════════════════════ */
.screen {
  flex: 1; overflow-y: auto; display: none;
  flex-direction: column; padding-bottom: 8px;
}
.screen.active { display: flex; animation: screenIn 200ms ease; }
@keyframes screenIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.profile-screen { overflow-y: auto; }

/* ══════════════════════════════════════════════
   SEARCH BAR + MARK ALL READ
   ══════════════════════════════════════════════ */
.search-bar-wrap {
  padding: 12px 16px 4px; flex-shrink: 0;
  display: flex; align-items: center; gap: 8px;
}
.search-bar {
  flex: 1; display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; border-radius: var(--radius-lg);
}
.search-bar svg { width: 18px; height: 18px; color: var(--text-muted); flex-shrink: 0; }
.search-bar input { flex: 1; background: transparent; color: var(--text-primary); font-size: 14px; }
.search-bar input::placeholder { color: var(--text-muted); }

.mark-all-read-btn {
  width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
  background: rgba(0,229,255,0.1); border: 1px solid rgba(0,229,255,0.2);
  color: var(--cyan); display: flex; align-items: center; justify-content: center;
  transition: all var(--anim-fast);
}
.mark-all-read-btn:hover { background: rgba(0,229,255,0.2); transform: scale(1.05); }
.mark-all-read-btn:active { transform: scale(0.92); }

/* ══════════════════════════════════════════════
   SKELETON LOADING
   ══════════════════════════════════════════════ */
.skeleton-list { padding: 8px 0; transition: opacity 200ms ease; }
.skeleton-list.fade-out { opacity: 0; }
.skeleton-item { display: flex; align-items: center; gap: 12px; padding: 12px 16px; }
.skeleton-av {
  width: 50px; height: 50px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(90deg, var(--glass) 25%, var(--glass-strong) 50%, var(--glass) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}
.skeleton-lines { flex: 1; display: flex; flex-direction: column; gap: 9px; }
.skeleton-line {
  height: 12px; border-radius: 6px;
  background: linear-gradient(90deg, var(--glass) 25%, var(--glass-strong) 50%, var(--glass) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}
.skeleton-line.w70 { width: 70%; }
.skeleton-line.w45 { width: 45%; }
.skeleton-line.w55 { width: 55%; }
.skeleton-line.w80 { width: 80%; }
.skeleton-line.w35 { width: 35%; }
@keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }

/* ══════════════════════════════════════════════
   CHAT LIST
   ══════════════════════════════════════════════ */
.chat-list { flex: 1; overflow-y: auto; }
.chat-list-item {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; cursor: pointer; transition: background var(--anim-fast);
  animation: fadeInUp 200ms ease;
}
.chat-list-item:hover { background: var(--bg-card-hov); }
.chat-list-item:active { background: var(--glass); transform: scale(0.99); }
.cl-avatar {
  width: 50px; height: 50px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, var(--cyan), var(--green));
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: 700; color: var(--bg-deep);
  position: relative; overflow: hidden;
}
.cl-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.cl-avatar.group {
  background: linear-gradient(135deg, var(--purple), var(--blue));
  font-size: 22px; color: white;
}
.cl-avatar.saved {
  background: linear-gradient(135deg, #a855f7, #6366f1);
  font-size: 22px;
}
.cl-online {
  position: absolute; bottom: 2px; right: 2px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--green); border: 2px solid var(--bg-mid);
  animation: onlinePulse 3s ease infinite;
}
@keyframes onlinePulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(0,255,136,0.4); }
  50% { box-shadow: 0 0 0 4px rgba(0,255,136,0); }
}
.cl-info { flex: 1; min-width: 0; }
.cl-name { font-size: 15px; font-weight: 600; display: flex; align-items: center; gap: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cl-preview { font-size: 13px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.cl-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; }
.cl-time { font-size: 11px; color: var(--text-muted); }
.cl-unread {
  background: var(--cyan); color: var(--bg-deep);
  font-size: 10px; font-weight: 800; min-width: 18px; height: 18px;
  border-radius: 99px; display: flex; align-items: center; justify-content: center; padding: 0 4px;
}
.vibe-badge {
  font-size: 9px; background: rgba(0,229,255,0.15); color: var(--cyan);
  border: 1px solid rgba(0,229,255,0.3); border-radius: 4px; padding: 1px 4px; font-weight: 700;
}

/* ══════════════════════════════════════════════
   GROUPS SCREEN
   ══════════════════════════════════════════════ */
.section-header {
  padding: 16px 16px 8px; font-family: var(--font-head);
  font-size: 18px; font-weight: 700; color: var(--text-primary);
}
.group-actions-bar { display: flex; gap: 10px; padding: 4px 16px 12px; }
.group-actions-bar .flex-1 { flex: 1; }
.group-actions-bar .btn-primary,
.group-actions-bar .btn-secondary { padding: 12px 16px; font-size: 14px; border-radius: var(--radius-md); }
.group-find-wrap { margin: 0 16px 12px; padding: 14px 16px; border-radius: var(--radius-md); animation: fadeInUp 200ms ease; }
.groups-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 0 16px 16px; }
.group-card {
  border-radius: var(--radius-lg); overflow: hidden;
  padding: 16px; cursor: pointer; position: relative;
  transition: transform var(--anim-med), box-shadow var(--anim-med);
}
.group-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-card); }
.group-card:active { transform: scale(0.97); }
.group-card-bg { position: absolute; inset: 0; opacity: 0.12; }
.group-card-icon { font-size: 32px; margin-bottom: 8px; position: relative; z-index: 1; }
.group-card-name { font-size: 14px; font-weight: 700; position: relative; z-index: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.group-card-members { font-size: 12px; color: var(--text-muted); position: relative; z-index: 1; margin-top: 2px; }
.group-id-badge {
  font-size: 10px; color: var(--cyan); background: rgba(0,229,255,0.1);
  border-radius: 4px; padding: 2px 6px; display: inline-block; margin-top: 6px; position: relative; z-index: 1;
}

/* ══════════════════════════════════════════════
   PROFILE SCREEN
   ══════════════════════════════════════════════ */
.profile-hero { padding: 32px 20px 16px; text-align: center; }
.profile-avatar-wrap { position: relative; display: inline-block; margin-bottom: 14px; }
.profile-avatar {
  width: 96px; height: 96px; border-radius: 50%;
  background: var(--grad-main);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 38px; font-weight: 800; color: var(--bg-deep);
  box-shadow: 0 0 0 3px var(--bg-deep), 0 0 0 5px rgba(0,229,255,0.35), 0 8px 32px rgba(0,229,255,0.25);
  overflow: hidden;
}
.profile-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.avatar-edit-btn {
  position: absolute; bottom: 0; right: 0;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--glass-strong); border: 2px solid var(--bg-deep);
  font-size: 12px; display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: transform var(--anim-fast); color: var(--cyan);
}
.avatar-edit-btn:hover { transform: scale(1.12); background: rgba(0,229,255,0.15); }
.profile-name-wrap { display: flex; align-items: center; justify-content: center; gap: 8px; }
.profile-name { font-family: var(--font-head); font-size: 24px; font-weight: 800; }
.edit-inline-btn {
  background: transparent; border: none; font-size: 14px; cursor: pointer;
  opacity: 0.5; transition: opacity var(--anim-fast); padding: 4px; color: var(--cyan);
}
.edit-inline-btn:hover { opacity: 1; }
.edit-inline-btn.small { font-size: 12px; }
.profile-email { font-size: 13px; color: var(--text-muted); margin: 4px 0 8px; }

/* Bio & Status */
.profile-bio-wrap {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  margin: 6px 0 4px;
}
.profile-bio {
  font-size: 13px; color: var(--text-secondary); font-style: italic;
  max-width: 260px; text-align: center; line-height: 1.5; cursor: pointer;
}
.profile-status-badge {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--glass); border: 1px solid var(--glass-border);
  border-radius: 99px; padding: 4px 12px; font-size: 12px; font-weight: 600;
  margin: 6px 0 12px;
}

/* Status Options Grid */
.status-options-grid { display: flex; flex-direction: column; gap: 4px; }
.status-opt {
  padding: 12px 16px; border-radius: var(--radius-md);
  cursor: pointer; font-size: 14px; font-weight: 500;
  background: var(--glass); border: 1px solid var(--glass-border);
  transition: all var(--anim-fast);
}
.status-opt:hover { background: var(--glass-strong); border-color: var(--cyan); }
.status-opt.active { background: rgba(0,229,255,0.1); border-color: var(--cyan); color: var(--cyan); }

.vibe-id-card {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--glass); border: 1px solid var(--glass-border);
  border-radius: var(--radius-md); padding: 14px 16px; text-align: left;
  transition: border-color var(--anim-fast);
}
.vibe-id-card:hover { border-color: rgba(0,229,255,0.25); }
.vibe-id-label { font-size: 11px; color: var(--text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; display: flex; align-items: center; gap: 6px; }
.id-badge {
  font-size: 9px; background: rgba(168,85,247,0.15); color: var(--purple);
  border: 1px solid rgba(168,85,247,0.25); border-radius: 4px; padding: 1px 5px;
  font-weight: 600; text-transform: uppercase;
}
.vibe-id-value { font-family: var(--font-head); font-size: 22px; font-weight: 800; color: var(--cyan); letter-spacing: 1px; margin-top: 2px; }
.vibe-id-actions { display: flex; flex-direction: column; gap: 6px; flex-shrink: 0; }
.vibe-id-btn {
  display: flex; align-items: center; gap: 5px;
  padding: 7px 10px; border-radius: var(--radius-sm);
  background: var(--glass); border: 1px solid var(--glass-border);
  color: var(--text-secondary); font-size: 12px; font-weight: 600;
  transition: all var(--anim-fast); white-space: nowrap;
}
.vibe-id-btn:hover { background: var(--glass-strong); color: var(--text-primary); }
.vibe-id-btn:active { transform: scale(0.95); }
.vibe-id-btn svg { width: 14px; height: 14px; }

.social-row { display: flex; gap: 10px; flex-wrap: wrap; }
.social-input-row {
  display: flex; align-items: center; gap: 10px;
  background: var(--glass); border: 1px solid var(--glass-border);
  border-radius: var(--radius-md); padding: 12px 14px;
}
.social-icon-wrap { width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.social-icon-wrap.instagram { background: linear-gradient(135deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); }
.social-btn {
  padding: 12px 16px; border-radius: var(--radius-md);
  display: flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 600; transition: all var(--anim-fast);
}
.social-btn.instagram {
  background: linear-gradient(135deg, rgba(240,148,51,0.15), rgba(188,24,136,0.15));
  border: 1px solid rgba(240,148,51,0.3); color: #f09433;
}
.social-btn.instagram:hover { transform: translateY(-1px); box-shadow: 0 4px 16px rgba(240,148,51,0.2); }
.social-btn svg { width: 18px; height: 18px; }

.profile-section { padding: 0 20px 8px; }
.profile-section-title { font-size: 11px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; padding: 14px 0 8px; }
.profile-item {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 0; cursor: pointer; border-bottom: 1px solid rgba(255,255,255,0.04);
  transition: all var(--anim-fast);
}
.profile-item:last-child { border-bottom: none; }
.profile-item:hover { background: rgba(255,255,255,0.03); margin: 0 -8px; padding: 12px 8px; border-radius: var(--radius-sm); }
.profile-item:active { opacity: 0.8; }
.profile-item-icon { width: 40px; height: 40px; border-radius: var(--radius-sm); flex-shrink: 0; display: flex; align-items: center; justify-content: center; transition: transform var(--anim-fast); }
.profile-item:hover .profile-item-icon { transform: scale(1.05); }
.profile-item-icon svg { width: 20px; height: 20px; }
.profile-item-text { flex: 1; }
.profile-item-label { font-size: 15px; font-weight: 600; }
.profile-item-sub { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.profile-item-chevron { color: var(--text-muted); }
.profile-item-chevron svg { width: 16px; height: 16px; }

#accountLinkStatusWrap { padding: 0 0 8px; }

/* ══════════════════════════════════════════════
   CHAT ROOM
   ══════════════════════════════════════════════ */
.chat-room {
  position: fixed; inset: 0; z-index: 100;
  background: var(--bg-deep);
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform var(--anim-med);
}
.chat-room.open { transform: translateX(0); }

.chat-header {
  height: var(--header-h); flex-shrink: 0;
  display: flex; align-items: center; gap: 10px;
  padding: 0 8px; border-bottom: 1px solid var(--glass-border);
  position: relative; z-index: 10;
}
.chat-header-back { color: var(--text-secondary); flex-shrink: 0; }
.chat-header-avatar {
  width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, var(--cyan), var(--green));
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 700; color: var(--bg-deep); position: relative;
  overflow: hidden;
}
.chat-header-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.online-dot {
  position: absolute; bottom: 0; right: 0;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--green); border: 2px solid var(--bg-deep);
}
.chat-header-info { flex: 1; min-width: 0; overflow: hidden; }
.chat-header-name { font-size: 15px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-header-status { font-size: 12px; color: var(--green); }
.chat-header-status.offline { color: var(--text-muted); }
.chat-header-status.typing { color: var(--cyan); }

.messages-area {
  flex: 1; overflow-y: auto;
  padding: 14px 14px 10px;
  display: flex; flex-direction: column; gap: 0;
  overscroll-behavior: contain;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

/* Date separator */
.date-sep { display: flex; align-items: center; margin: 12px 0; gap: 10px; }
.date-sep::before, .date-sep::after { content: ''; flex: 1; height: 1px; background: var(--glass-border); }
.date-sep span { font-size: 11px; color: var(--text-muted); white-space: nowrap; padding: 3px 10px; background: var(--glass); border-radius: 99px; border: 1px solid var(--glass-border); }

/* Message rows */
.msg-row {
  display: flex; align-items: flex-end; gap: 8px;
  margin: 2px 0;
  animation: msgIn 200ms cubic-bezier(0.4,0,0.2,1);
  /* Prevent layout thrash */
  contain: layout;
}
@keyframes msgIn { from { opacity: 0; transform: translateY(8px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } }
.msg-row.out { flex-direction: row-reverse; }
/* Continuation rows — tighter spacing */
.msg-row.cont-in  { margin-top: 1px; }
.msg-row.cont-out { margin-top: 1px; }

.msg-avatar {
  width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, var(--purple), var(--blue));
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; overflow: hidden;
}
.msg-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }

.msg-bubble {
  max-width: min(72%, 320px);
  background: var(--grad-msg-in);
  border: 1px solid rgba(0,229,255,0.12);
  border-radius: 18px 18px 18px 4px;
  padding: 9px 13px;
  position: relative;
  /* Critical: proper word wrapping for all content */
  word-break: break-word;
  overflow-wrap: anywhere;
  hyphens: auto;
  /* Ensure no overflow on narrow screens */
  min-width: 0;
}
.msg-row.out .msg-bubble {
  background: var(--grad-msg-out);
  border-color: rgba(168,85,247,0.15);
  border-radius: 18px 18px 4px 18px;
}

/* Double-tap like animation */
.msg-bubble.liked { animation: heartPop 400ms ease; }
@keyframes heartPop {
  0% { transform: scale(1); }
  30% { transform: scale(1.08); }
  60% { transform: scale(0.95); }
  100% { transform: scale(1); }
}

.msg-sender-name { font-size: 11px; font-weight: 700; color: var(--cyan); margin-bottom: 4px; }
.msg-text {
  font-size: 14.5px;
  line-height: 1.55;
  /* Ensure URLs and long words don't overflow */
  word-break: break-word;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}
.msg-meta { display: flex; align-items: center; justify-content: flex-end; gap: 4px; margin-top: 5px; }
.msg-time { font-size: 10.5px; color: var(--text-muted); white-space: nowrap; }
.msg-time.relative { cursor: default; }
.msg-status svg { width: 12px; height: 12px; color: var(--text-muted); }
.msg-status.delivered svg { color: rgba(0,229,255,0.5); }
.msg-status.seen svg { color: var(--cyan); }

.msg-media { border-radius: var(--radius-sm); overflow: hidden; max-width: 220px; margin-bottom: 4px; cursor: pointer; }
.msg-media img, .msg-media video { width: 100%; border-radius: var(--radius-sm); }

/* Reply quote */
.reply-quote {
  background: rgba(255,255,255,0.06); border-left: 3px solid var(--cyan);
  border-radius: 4px; padding: 6px 8px; margin-bottom: 6px; font-size: 12px;
  cursor: pointer; transition: background var(--anim-fast);
}
.reply-quote:hover { background: rgba(255,255,255,0.10); }
.rq-name { color: var(--cyan); font-weight: 700; font-size: 11px; margin-bottom: 2px; }

/* Emoji Reactions on messages */
.msg-reactions {
  display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px;
}
.msg-reaction {
  display: inline-flex; align-items: center; gap: 3px;
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12);
  border-radius: 99px; padding: 2px 6px; font-size: 12px; cursor: pointer;
  transition: all var(--anim-fast);
}
.msg-reaction:hover { background: rgba(0,229,255,0.12); border-color: rgba(0,229,255,0.3); }
.msg-reaction.mine { background: rgba(0,229,255,0.12); border-color: rgba(0,229,255,0.3); }
.msg-reaction span.count { font-size: 10px; color: var(--text-secondary); }

/* Typing indicator (new animated) */
.typing-indicator-wrap {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 16px 2px; flex-shrink: 0;
}
.typing-bubble {
  display: flex; align-items: center; gap: 4px;
  background: var(--grad-msg-in); border: 1px solid rgba(0,229,255,0.12);
  border-radius: 18px 18px 18px 4px;
  padding: 8px 12px;
}
.typing-bubble span {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--cyan); display: inline-block;
}
.typing-bubble span:nth-child(1) { animation: typingDot 1.2s ease infinite; }
.typing-bubble span:nth-child(2) { animation: typingDot 1.2s ease 0.2s infinite; }
.typing-bubble span:nth-child(3) { animation: typingDot 1.2s ease 0.4s infinite; }
@keyframes typingDot {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30% { transform: translateY(-5px); opacity: 1; }
}
.typing-text { font-size: 11px; color: var(--text-muted); font-style: italic; }

/* Reply bar */
.reply-bar {
  display: none; flex-direction: row; align-items: center; gap: 10px;
  padding: 10px 14px; background: var(--glass); border-top: 1px solid var(--glass-border);
  flex-shrink: 0; animation: fadeInUp 150ms ease;
}
.reply-bar.show { display: flex; }
.reply-bar-accent { width: 3px; height: 36px; background: var(--grad-btn); border-radius: 99px; flex-shrink: 0; }
.reply-bar-content { flex: 1; }
.reply-bar-name { font-size: 12px; font-weight: 700; color: var(--cyan); }
.reply-bar-text { font-size: 12px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px; }
.reply-close { color: var(--text-muted); }

/* Media preview */
.media-preview-wrap {
  display: none; align-items: center; gap: 10px;
  padding: 10px 14px; background: var(--glass); border-top: 1px solid var(--glass-border); flex-shrink: 0;
}
.media-preview-wrap.show { display: flex; }
.media-preview-thumb { width: 48px; height: 48px; border-radius: var(--radius-sm); object-fit: cover; }
.media-preview-remove { color: var(--text-muted); margin-left: auto; }
.media-preview-remove svg { width: 16px; height: 16px; }

/* Upload progress */
.upload-progress-bar { height: 3px; background: var(--glass-border); flex-shrink: 0; display: none; }
.upload-progress-bar.show { display: block; }
.upload-progress-inner { height: 100%; background: var(--grad-btn); border-radius: 99px; transition: width 200ms linear; }

/* Message input area */
.msg-input-area {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px 12px; flex-shrink: 0;
  border-top: 1px solid var(--glass-border);
}
.msg-input-wrap {
  flex: 1; display: flex; align-items: center; gap: 8px;
  background: var(--glass); border: 1px solid var(--glass-border);
  border-radius: var(--radius-xl); padding: 6px 10px;
  transition: border-color var(--anim-fast);
}
.msg-input-wrap:focus-within { border-color: rgba(0,229,255,0.35); }
.msg-input {
  flex: 1; background: transparent; color: var(--text-primary);
  font-size: 15px; resize: none; max-height: 120px; overflow-y: auto;
  line-height: 1.4;
}
.msg-input::placeholder { color: var(--text-muted); }
.emoji-btn, .attach-btn {
  background: transparent; color: var(--text-muted); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%;
  transition: color var(--anim-fast), transform var(--anim-fast);
}
.emoji-btn:hover, .attach-btn:hover { color: var(--cyan); }
.emoji-btn:active, .attach-btn:active { transform: scale(0.9); }
.emoji-btn svg, .attach-btn svg { width: 20px; height: 20px; }
.send-btn {
  width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0;
  background: var(--grad-btn);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 16px rgba(0,229,255,0.3);
  transition: all var(--anim-fast);
}
.send-btn:hover { transform: scale(1.06); box-shadow: 0 6px 20px rgba(0,229,255,0.4); }
.send-btn:active { transform: scale(0.93); }
.send-btn:disabled { opacity: 0.5; transform: none; }
.send-btn svg { width: 20px; height: 20px; color: var(--bg-deep); }

/* ══════════════════════════════════════════════
   MODALS
   ══════════════════════════════════════════════ */
.modal-overlay {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(0,0,0,0.6); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  display: none; align-items: flex-end; justify-content: center;
  /* Fade for backdrop */
  opacity: 0;
  transition: opacity 220ms ease;
}
.modal-overlay.open {
  display: flex;
  animation: modalOverlayIn 220ms ease forwards;
}
@keyframes modalOverlayIn { from { opacity: 0; } to { opacity: 1; } }

.modal-sheet {
  width: 100%; max-width: 480px;
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  overflow: hidden;
  animation: sheetUp var(--anim-med) cubic-bezier(0.34,1.26,0.64,1);
}
@keyframes sheetUp {
  from { transform: translateY(100%) scale(0.97); opacity: 0.6; }
  to   { transform: translateY(0) scale(1); opacity: 1; }
}
.modal-handle {
  width: 40px; height: 4px; border-radius: 99px;
  background: var(--glass-border); margin: 12px auto 4px; flex-shrink: 0;
}
.modal-title {
  font-family: var(--font-head); font-size: 18px; font-weight: 700;
  padding: 8px 20px 0;
}
.modal-footer { padding: 16px 20px 32px; display: flex; flex-direction: column; gap: 8px; }
.field-label {
  font-size: 12px; font-weight: 700; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px;
}

.glass-input {
  background: var(--glass); border: 1px solid var(--glass-border);
  border-radius: var(--radius-md); padding: 12px 14px;
  color: var(--text-primary); font-size: 15px;
  transition: border-color var(--anim-fast);
}
.glass-input:focus { border-color: rgba(0,229,255,0.4); }
.glass-input::placeholder { color: var(--text-muted); }

/* btn-spinner — used in buttons during loading state */
.btn-spinner {
  width: 17px; height: 17px; flex-shrink: 0;
  border: 2.5px solid rgba(255,255,255,0.25);
  border-top-color: currentColor;
  border-radius: 50%;
  animation: spin 0.65s linear infinite;
}
/* btn-primary uses dark text — spinner should be dark too */
.btn-primary .btn-spinner { border-color: rgba(5,11,24,0.25); border-top-color: var(--bg-deep); }

.btn-primary {
  width: 100%;
  padding: 14px 20px; border-radius: var(--radius-md);
  background: var(--grad-btn); color: var(--bg-deep); font-size: 15px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  transition: all var(--anim-fast);
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 4px 20px rgba(0,229,255,0.3); }
.btn-primary:active { transform: scale(0.97); }
.btn-secondary {
  width: 100%; padding: 14px 20px; border-radius: var(--radius-md);
  background: var(--glass); border: 1px solid var(--glass-border);
  color: var(--text-secondary); font-size: 15px; font-weight: 600;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  transition: all var(--anim-fast);
}
.btn-secondary:hover { background: var(--glass-strong); color: var(--text-primary); }
.btn-danger {
  width: 100%; padding: 13px 18px; border-radius: var(--radius-md);
  background: rgba(248,113,113,0.10); border: 1px solid rgba(248,113,113,0.25);
  color: #f87171; font-size: 15px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  transition: all var(--anim-fast);
}
.btn-danger:hover { background: rgba(248,113,113,0.2); border-color: rgba(248,113,113,0.4); transform: translateY(-1px); }
.btn-danger:active { transform: scale(0.97); }
.btn-danger svg { width: 16px; height: 16px; flex-shrink: 0; }

/* ══════════════════════════════════════════════
   ANONYMOUS CHAT
   ══════════════════════════════════════════════ */
.anon-status { padding: 14px 16px; border-radius: var(--radius-md); display: flex; align-items: center; gap: 12px; }
.anon-searching { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--text-secondary); }
.anon-pulse {
  width: 12px; height: 12px; border-radius: 50%; background: var(--cyan); flex-shrink: 0;
  animation: anonPulse 1.2s ease-in-out infinite;
}
@keyframes anonPulse {
  0%,100% { transform: scale(1); opacity: 1; box-shadow: 0 0 0 0 rgba(0,229,255,0.4); }
  50%      { transform: scale(1.25); opacity: 0.7; box-shadow: 0 0 0 8px rgba(0,229,255,0); }
}

/* ══════════════════════════════════════════════
   CALL OVERLAY  v3  — full-screen, proper layout
   ══════════════════════════════════════════════ */
.call-overlay {
  position: fixed; inset: 0; z-index: 9500;
  background: #050b18;
  display: none; flex-direction: column;
  align-items: center; justify-content: flex-start;
}
/* video-call mode: background becomes the video feed */
.call-overlay.video-call { background: #000; }

/* ── Avatar / info area ─────────────────────── */
.call-screen {
  position: relative; z-index: 5;
  display: flex; flex-direction: column; align-items: center;
  padding-top: max(52px, env(safe-area-inset-top, 28px));
  padding-bottom: 16px;
  width: 100%; text-align: center;
  /* Semi-transparent so video shows behind in video-call mode */
  background: linear-gradient(to bottom, rgba(5,11,24,0.85) 0%, transparent 100%);
}
.call-overlay:not(.video-call) .call-screen {
  background: transparent;
  padding-top: max(72px, env(safe-area-inset-top, 48px));
  flex: 1; justify-content: center;
}

.call-avatar {
  width: 96px; height: 96px; border-radius: 50%;
  background: var(--grad-main);
  display: flex; align-items: center; justify-content: center;
  font-size: 38px; font-weight: 800; color: var(--bg-deep);
  box-shadow: 0 0 0 12px rgba(0,229,255,0.08), 0 0 0 24px rgba(0,229,255,0.04);
  margin-bottom: 18px;
  animation: callPulse 2s ease infinite;
}
.call-overlay.video-call .call-avatar { width: 64px; height: 64px; font-size: 26px; margin-bottom: 10px; }

@keyframes callPulse {
  0%,100% { box-shadow: 0 0 0 12px rgba(0,229,255,0.08), 0 0 0 24px rgba(0,229,255,0.04); }
  50%      { box-shadow: 0 0 0 16px rgba(0,229,255,0.14), 0 0 0 32px rgba(0,229,255,0.06); }
}

.call-name {
  font-family: var(--font-head); font-size: 22px; font-weight: 800;
  color: var(--text-primary); text-shadow: 0 2px 8px rgba(0,0,0,0.6);
  margin-bottom: 6px;
}
.call-status {
  font-size: 14px; color: var(--text-secondary);
  min-height: 20px; font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 4px rgba(0,0,0,0.6);
}

/* ── Video wrap ─────────────────────────────── */
.call-video-wrap {
  position: absolute; inset: 0; z-index: 1;
  background: #000;
  display: none; /* shown by JS for video calls */
}

/* ── Call Actions Bar ───────────────────────── */
.call-actions {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 10;
  display: flex; align-items: center; justify-content: center;
  gap: 16px; flex-wrap: wrap;
  padding: 20px 24px max(24px, env(safe-area-inset-bottom));
  background: linear-gradient(to top, rgba(5,11,24,0.96) 40%, transparent 100%);
}
.call-action-btn {
  width: 58px; height: 58px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: none; cursor: pointer; color: white;
  background: rgba(255,255,255,0.13);
  transition: transform 120ms ease, opacity 120ms ease, background 150ms ease;
  -webkit-tap-highlight-color: transparent;
}
.call-action-btn svg { width: 24px; height: 24px; }
.call-action-btn:active { transform: scale(0.88); }
.call-action-btn:hover  { opacity: 0.85; }

/* End call button — larger, red */
.call-action-btn.end {
  width: 68px; height: 68px;
  background: linear-gradient(135deg, #ef4444, #dc2626);
  box-shadow: 0 4px 20px rgba(239,68,68,0.4);
}
.call-action-btn.end svg { width: 28px; height: 28px; }

/* Muted / cam-off state */
.call-action-btn.active {
  background: rgba(248,113,113,0.22);
  color: #f87171;
  box-shadow: inset 0 0 0 1px rgba(248,113,113,0.35);
}

/* Camera toggle */
.call-action-btn.cam-toggle { background: rgba(168,85,247,0.15); color: var(--purple); }
.call-action-btn.cam-toggle.active { background: rgba(248,113,113,0.22); color: #f87171; }

/* Switch camera */
.call-action-btn.switch-cam { background: rgba(0,229,255,0.13); color: var(--cyan); }

/* Speaker */
.call-action-btn.speaker { }
.call-action-btn.speaker.active { background: rgba(0,229,255,0.15); color: var(--cyan); }

/* ── Mobile video layout ────────────────────── */
@media (max-width: 480px) {
  .call-actions { gap: 12px; padding: 16px 16px max(20px, env(safe-area-inset-bottom)); }
  .call-action-btn      { width: 52px; height: 52px; }
  .call-action-btn svg  { width: 22px; height: 22px; }
  .call-action-btn.end  { width: 62px; height: 62px; }
}
@media (min-width: 600px) {
  /* Desktop: local video pip larger */
  #localVideo {
    width: 140px !important;
    bottom: 130px !important; right: 24px !important;
  }
}

/* ── Anon action buttons (Next / Disconnect) ── */
.icon-btn#btnNextAnon:hover      { background: rgba(0,229,255,0.1) !important; color: var(--cyan) !important; }
.icon-btn#btnDisconnectAnon:hover{ background: rgba(248,113,113,0.1) !important; color: #f87171 !important; }

/* ── Cancel search button ───────────────────── */
.btn-cancel-search {
  background: rgba(248,113,113,0.08) !important;
  color: #f87171 !important;
  border-color: rgba(248,113,113,0.2) !important;
}

/* ── Group card icon ────────────────────────── */
.group-card-icon {
  width: 48px; height: 48px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; margin-bottom: 8px;
}

/* ── Context menu pop ───────────────────────── */
@keyframes ctxPop {
  from { opacity: 0; transform: scale(0.88) translateY(4px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* ── Animations ─────────────────────────────── */
@keyframes fadeIn    { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeInUp  { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes pulse     { 0%,100% { opacity: 1; } 50% { opacity: 0.5; } }
@keyframes spin      { to { transform: rotate(360deg); } }
.spinner { width: 20px; height: 20px; border: 2px solid rgba(0,229,255,0.2); border-top-color: var(--cyan); border-radius: 50%; animation: spin 0.7s linear infinite; }

/* ── Safe areas (iPhone) ────────────────────── */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .bottom-nav   { padding-bottom: env(safe-area-inset-bottom); height: calc(var(--nav-h) + env(safe-area-inset-bottom)); }
  .msg-input-area { padding-bottom: max(12px, env(safe-area-inset-bottom)); }
  .modal-footer { padding-bottom: max(32px, env(safe-area-inset-bottom)); }
}

/* ── Mobile-specific ────────────────────────── */
@media (max-width: 480px) {
  .btn-primary, .btn-secondary { font-size: 14px; }
  .chat-room { width: 100%; }
}

/* ── Touch feedback ─────────────────────────── */
@media (hover: none) {
  .icon-btn:hover      { background: transparent; }
  .chat-list-item:hover{ background: transparent; }
  .profile-item:hover  { background: transparent; margin: 0; padding: 12px 0; }
}

/* ══════════════════════════════════════════════
   CONTEXT MENU
   ══════════════════════════════════════════════ */
.context-menu {
  position: fixed; z-index: 400; min-width: 170px;
  background: var(--bg-mid); border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card); overflow: hidden;
  animation: ctxPop 120ms ease;
  display: none;
}
.context-menu.show { display: block; }
@keyframes ctxPop { from { transform: scale(0.88); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.ctx-item { padding: 11px 16px; font-size: 14px; cursor: pointer; display: flex; align-items: center; gap: 10px; transition: background var(--anim-fast); }
.ctx-item:hover { background: var(--glass); }
.ctx-item:active { background: var(--glass-strong); }
.ctx-item svg { width: 16px; height: 16px; color: var(--text-muted); }
.ctx-item.danger { color: #f87171; }
.ctx-item.danger svg { color: #f87171; }

/* Emoji Reaction Picker */
.reaction-picker {
  position: fixed; z-index: 401; display: none;
  background: var(--bg-mid); border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg); padding: 8px 12px;
  box-shadow: var(--shadow-card);
  flex-direction: row; gap: 4px;
  animation: ctxPop 150ms ease;
}
.reaction-picker.show { display: flex; }
.reaction-emoji {
  font-size: 22px; cursor: pointer; padding: 4px;
  border-radius: 50%; transition: transform var(--anim-fast), background var(--anim-fast);
  display: flex; align-items: center; justify-content: center; width: 38px; height: 38px;
}
.reaction-emoji:hover { transform: scale(1.3); background: var(--glass); }
.reaction-emoji:active { transform: scale(1.1); }

/* ══════════════════════════════════════════════
   TOAST
   ══════════════════════════════════════════════ */
.toast-container {
  position: fixed; top: 20px; left: 50%; transform: translateX(-50%);
  z-index: 99999; display: flex; flex-direction: column; gap: 8px;
  align-items: center; pointer-events: none; width: calc(100% - 32px); max-width: 400px;
}
.toast {
  display: flex; align-items: center; gap: 10px;
  background: var(--bg-mid); border: 1px solid var(--glass-border);
  border-radius: var(--radius-md); padding: 12px 16px;
  font-size: 14px; box-shadow: var(--shadow-card); pointer-events: all;
  animation: toastIn 300ms ease;
  max-width: 100%;
}
@keyframes toastIn { from { transform: translateY(-16px) scale(0.95); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } }
@keyframes toastOut { from { transform: translateY(0) scale(1); opacity: 1; } to { transform: translateY(-8px) scale(0.95); opacity: 0; } }
.toast svg { width: 18px; height: 18px; flex-shrink: 0; }
.toast.success { border-color: rgba(0,255,136,0.3); }
.toast.success svg { color: var(--green); }
.toast.error { border-color: rgba(248,113,113,0.3); }
.toast.error svg { color: #f87171; }
.toast.warning { border-color: rgba(251,146,60,0.3); }
.toast.warning svg { color: #fb923c; }
.toast.info svg { color: var(--cyan); }

/* ══════════════════════════════════════════════
   FABs
   ══════════════════════════════════════════════ */
.fab-ai {
  position: fixed; bottom: 90px; right: 20px;
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--glass-strong); border: 1px solid var(--glass-border);
  font-size: 18px; cursor: pointer; color: var(--purple);
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-card); z-index: 50;
  transition: all var(--anim-med);
}
.fab-ai:hover { transform: scale(1.08); }
.fab-new {
  position: fixed; bottom: 90px; right: 76px;
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--grad-btn);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 16px rgba(0,229,255,0.3); z-index: 50;
  transition: all var(--anim-med); border: none;
}
.fab-new:hover { transform: scale(1.08); }
.fab-new:active { transform: scale(0.94); }
.fab-new svg { width: 20px; height: 20px; color: var(--bg-deep); }

/* AI Modal */
.ai-modal-overlay {
  position: fixed; inset: 0; z-index: 500;
  background: rgba(0,0,0,0.75); backdrop-filter: blur(10px);
  display: none; align-items: flex-end;
}
.ai-modal-overlay.open { display: flex; }
.ai-panel {
  width: 100%; max-width: 480px; margin: 0 auto;
  height: 85dvh; background: var(--bg-mid);
  border-top: 1px solid var(--glass-border);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  overflow: hidden; display: flex; flex-direction: column;
  animation: sheetUp var(--anim-med) ease;
}
.ai-panel-header {
  padding: 12px 16px; display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid var(--glass-border); flex-shrink: 0;
}
.ai-panel-title { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 16px; }
.ai-panel-title span { font-size: 20px; }
.ai-iframe { flex: 1; border: none; width: 100%; }

/* Lightbox */
.lightbox {
  position: fixed; inset: 0; z-index: 600;
  background: rgba(0,0,0,0.92);
  display: none; align-items: center; justify-content: center;
}
.lightbox.open { display: flex; }
.lightbox img, .lightbox video { max-width: 95vw; max-height: 90dvh; border-radius: var(--radius-md); object-fit: contain; }
.lightbox-close {
  position: absolute; top: 20px; right: 20px; color: white;
  background: rgba(255,255,255,0.15); border-radius: 50%;
  width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border: none;
  transition: background var(--anim-fast);
}
.lightbox-close:hover { background: rgba(255,255,255,0.25); }

/* ══════════════════════════════════════════════
   CHAT PROFILE SIDE PANEL
   ══════════════════════════════════════════════ */
.side-panel-overlay {
  position: fixed; inset: 0; z-index: 400;
  background: rgba(0,0,0,0.5);
  display: none;
}
.side-panel-overlay.open { display: block; }
.side-panel {
  position: absolute; top: 0; right: -100%; bottom: 0;
  width: min(360px, 100%);
  display: flex; flex-direction: column;
  overflow-y: auto;
  transition: right 280ms cubic-bezier(0.4,0,0.2,1);
}
.side-panel-overlay.open .side-panel { right: 0; }
.side-panel-header {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; border-bottom: 1px solid var(--glass-border);
  position: sticky; top: 0; background: var(--bg-mid); z-index: 1;
}
.cp-avatar-hero {
  display: flex; flex-direction: column; align-items: center;
  padding: 28px 16px 16px; gap: 8px;
}
.cp-big-avatar {
  width: 96px; height: 96px; border-radius: 50%;
  background: var(--grad-main); display: flex; align-items: center;
  justify-content: center; font-size: 38px; font-weight: 700; color: #050b18;
  overflow: hidden;
  box-shadow: 0 0 0 3px var(--bg-deep), 0 0 0 5px rgba(0,229,255,0.25), 0 8px 32px rgba(0,0,0,0.4);
  transition: box-shadow var(--anim-med);
}
.cp-big-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.cp-hero-name { font-size: 20px; font-weight: 700; font-family: var(--font-head); }
.cp-hero-status { font-size: 13px; color: var(--text-muted); }
.cp-hero-status.online { color: var(--green); }
.cp-bio-val {
  font-size: 13px; font-weight: 400; color: var(--text-secondary);
  line-height: 1.55; white-space: pre-wrap; word-break: break-word;
}
.cp-info-section { padding: 0 0 8px; }
.cp-info-row {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 20px; border-bottom: 1px solid var(--glass-border);
}
.cp-info-icon { flex-shrink: 0; }
.cp-info-text { flex: 1; }
.cp-info-label { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.cp-info-val { font-size: 15px; font-weight: 600; margin-top: 2px; }
.cp-actions {
  display: flex; gap: 10px; padding: 14px 20px;
  border-bottom: 1px solid var(--glass-border);
}
.cp-action-btn {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 12px 8px; border-radius: var(--radius-md);
  background: rgba(255,255,255,0.06); border: 1px solid var(--glass-border);
  color: var(--cyan); font-size: 12px; font-weight: 600;
  cursor: pointer; transition: all var(--anim-fast);
}
.cp-action-btn svg { width: 20px; height: 20px; }
.cp-action-btn:hover { background: rgba(0,229,255,0.12); }
.cp-section { padding: 8px 0; border-bottom: 1px solid var(--glass-border); }
.cp-section-title { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; padding: 6px 20px; }
.cp-menu-item {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 20px; font-size: 14px; color: var(--text-primary);
  cursor: pointer; transition: background var(--anim-fast);
}
.cp-menu-item:hover { background: rgba(255,255,255,0.06); }
.cp-menu-item.danger { color: #f87171; }
.cp-menu-item.danger svg { color: #f87171; }

/* Chat header profile button */
.chat-header-profile-btn {
  display: flex; align-items: center; gap: 10px; flex: 1;
  cursor: pointer; min-width: 0; padding: 4px 0;
  border-radius: var(--radius-sm);
  transition: background var(--anim-fast);
}
.chat-header-profile-btn:active { background: rgba(255,255,255,0.06); }

/* ══════════════════════════════════════════════
   SETTINGS OVERLAY
   ══════════════════════════════════════════════ */
.settings-overlay {
  position: fixed; inset: 0; z-index: 500;
  display: none;
}
.settings-overlay.open { display: block; }
.settings-panel {
  position: absolute; inset: 0;
  background: var(--bg-deep);
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform 280ms cubic-bezier(0.4,0,0.2,1);
}
.settings-overlay.open .settings-panel { transform: translateX(0); }
.settings-header {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; border-bottom: 1px solid var(--glass-border);
  position: sticky; top: 0; z-index: 1;
  background: var(--bg-deep);
}
.settings-profile-card {
  display: flex; align-items: center; gap: 14px;
  margin: 16px; padding: 16px; border-radius: var(--radius-lg);
}
.settings-prof-avatar {
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--grad-main); display: flex; align-items: center;
  justify-content: center; font-size: 22px; font-weight: 700; color: #050b18;
  flex-shrink: 0; overflow: hidden;
}
.settings-prof-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.settings-prof-name { font-size: 16px; font-weight: 700; font-family: var(--font-head); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 180px; }
.settings-prof-sub { font-size: 12px; color: var(--text-muted); margin-top: 3px; }
.settings-section { margin-bottom: 8px; }
.settings-section-title { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; padding: 8px 20px 4px; }
.settings-item {
  display: flex; align-items: center; gap: 14px;
  padding: 13px 20px; cursor: pointer;
  transition: background var(--anim-fast);
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.settings-item:hover { background: rgba(255,255,255,0.04); }
.settings-item:active { background: rgba(255,255,255,0.07); }
.settings-item-icon { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.settings-item-text { flex: 1; }
.settings-item-label { font-size: 15px; font-weight: 500; }
.settings-item-sub { font-size: 12px; color: var(--text-muted); margin-top: 2px; }

/* Toggle switch */
.toggle-switch { position: relative; display: inline-flex; align-items: center; flex-shrink: 0; }
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-slider {
  width: 44px; height: 24px; background: rgba(255,255,255,0.15); border-radius: 12px;
  cursor: pointer; transition: background 200ms;
  position: relative;
}
.toggle-slider::before {
  content: ''; position: absolute; width: 18px; height: 18px; border-radius: 50%;
  background: white; top: 3px; left: 3px; transition: transform 200ms;
}
.toggle-switch input:checked + .toggle-slider { background: var(--green); }
.toggle-switch input:checked + .toggle-slider::before { transform: translateX(20px); }

/* Incoming call banner */
.incoming-call-banner {
  position: fixed; top: -90px; left: 50%; transform: translateX(-50%);
  width: calc(100% - 32px); max-width: 448px;
  background: linear-gradient(135deg, rgba(0,229,255,0.2), rgba(0,255,136,0.15));
  border: 1px solid rgba(0,229,255,0.3);
  border-radius: var(--radius-lg); padding: 12px 16px;
  display: flex; align-items: center; justify-content: space-between;
  z-index: 9100; backdrop-filter: blur(24px);
  box-shadow: 0 8px 32px rgba(0,229,255,0.2);
  transition: top 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.incoming-call-banner.show { top: 16px; }
.incoming-call-info { display: flex; align-items: center; gap: 12px; }
.incoming-call-avatar {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--grad-main); display: flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: 700; color: #050b18;
}
.incoming-call-name { font-size: 15px; font-weight: 700; }
.incoming-call-type { font-size: 12px; color: var(--text-secondary); }
.incoming-call-btns { display: flex; gap: 10px; }
.call-reject-btn, .call-accept-btn {
  width: 44px; height: 44px; border-radius: 50%; display: flex;
  align-items: center; justify-content: center; flex-shrink: 0;
  border: none; cursor: pointer; transition: transform var(--anim-fast);
}
.call-reject-btn { background: #ef4444; color: white; }
.call-accept-btn { background: #22c55e; color: white; animation: pulse-green 1s infinite; }
.call-reject-btn:active, .call-accept-btn:active { transform: scale(0.92); }
@keyframes pulse-green {
  0%, 100% { box-shadow: 0 0 0 0 rgba(34,197,94,0.4); }
  50% { box-shadow: 0 0 0 8px rgba(34,197,94,0); }
}

/* Avatar grid */
.avatar-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.avatar-option {
  aspect-ratio: 1; border-radius: 50%; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 28px; transition: transform 150ms, box-shadow 150ms;
  border: 2px solid transparent; background: rgba(255,255,255,0.06);
}
.avatar-option:hover { transform: scale(1.1); }
.avatar-option:active { transform: scale(0.95); }
.avatar-option.selected { border-color: var(--cyan); box-shadow: 0 0 12px rgba(0,229,255,0.4); }

/* Call history */
#screenCalls { overflow-y: auto; }
.call-history-list { flex: 1; overflow-y: auto; padding: 8px 0; }
.call-history-item {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; cursor: pointer;
  transition: background var(--anim-fast);
}
.call-history-item:hover { background: var(--bg-card-hov); }
.call-hist-avatar {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--grad-main); display: flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: 700; color: #050b18; flex-shrink: 0;
}
.call-hist-info { flex: 1; }
.call-hist-name { font-size: 15px; font-weight: 600; color: var(--text-primary); }
.call-hist-meta { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.call-hist-icon { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.call-hist-icon.outgoing { background: rgba(0,255,136,0.12); color: var(--green); }
.call-hist-icon.incoming { background: rgba(0,229,255,0.12); color: var(--cyan); }
.call-hist-icon.missed { background: rgba(248,113,113,0.12); color: #f87171; }

/* Plus dropdown */
.plus-dropdown-wrap { position: relative; }
.plus-dropdown {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 200;
  min-width: 210px; border-radius: var(--radius-md); padding: 6px 0;
  /* Use visibility+opacity for smooth animate-in AND animate-out */
  opacity: 0; visibility: hidden; pointer-events: none;
  display: flex; flex-direction: column;
  box-shadow: 0 16px 48px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.06);
  transform: translateY(-6px) scale(0.97);
  transform-origin: top right;
  transition: opacity 180ms cubic-bezier(0.4,0,0.2,1),
              transform 180ms cubic-bezier(0.4,0,0.2,1),
              visibility 180ms;
  will-change: opacity, transform;
}
.plus-dropdown.open {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateY(0) scale(1);
}
.plus-dropdown-item {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; font-size: 14px; color: var(--text-primary);
  cursor: pointer; transition: background var(--anim-fast);
  border-radius: 0;
  /* Bigger click target */
  min-height: 46px;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.plus-dropdown-item:first-child { border-radius: var(--radius-md) var(--radius-md) 0 0; }
.plus-dropdown-item:last-child  { border-radius: 0 0 var(--radius-md) var(--radius-md); }
.plus-dropdown-item svg { width: 17px; height: 17px; flex-shrink: 0; color: var(--cyan); }
.plus-dropdown-item:hover  { background: rgba(255,255,255,0.08); }
.plus-dropdown-item:active { background: rgba(255,255,255,0.14); transform: scale(0.99); }

/* Upgrade banner */
.upgrade-banner {
  margin: 8px 16px; padding: 14px 16px;
  background: linear-gradient(135deg, rgba(168,85,247,0.15), rgba(59,130,246,0.10));
  border: 1px solid rgba(168,85,247,0.25);
  border-radius: var(--radius-md);
  display: none; align-items: flex-start; gap: 12px;
}
.upgrade-banner.show { display: flex; }
.upgrade-banner-text h4 { font-size: 14px; font-weight: 700; margin-bottom: 2px; }
.upgrade-banner-text p { font-size: 12px; color: var(--text-secondary); }
.upgrade-banner-btn {
  white-space: nowrap; padding: 7px 12px; background: var(--grad-btn);
  border-radius: var(--radius-sm); color: var(--bg-deep); font-size: 12px; font-weight: 700;
  border: none; cursor: pointer; flex-shrink: 0; margin-left: auto;
}

/* Static pages */
.static-page { padding: 24px 20px; }
.static-page h1 { font-family: var(--font-head); font-size: 24px; font-weight: 800; margin-bottom: 8px; }
.static-page .subtitle { color: var(--text-secondary); font-size: 14px; margin-bottom: 28px; }
.static-page h2 { font-size: 16px; font-weight: 700; margin: 20px 0 8px; color: var(--cyan); }
.static-page p { font-size: 14px; color: var(--text-secondary); line-height: 1.7; margin-bottom: 12px; }
.static-page ul { padding-left: 16px; margin-bottom: 12px; }
.static-page ul li { font-size: 14px; color: var(--text-secondary); line-height: 1.7; list-style: disc; }

.feedback-form { padding: 24px 20px; }
.feedback-form textarea {
  width: 100%; min-height: 120px; padding: 12px 14px;
  background: var(--glass); border: 1px solid var(--glass-border);
  border-radius: var(--radius-md); color: var(--text-primary); font-size: 14px; resize: vertical;
}
.feedback-form textarea:focus { border-color: rgba(0,229,255,0.4); }
.feedback-form textarea::placeholder { color: var(--text-muted); }

.empty-state {
  flex: 1; display: none; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; padding: 40px 24px; text-align: center;
  animation: fadeInUp 280ms ease;
  /* Prevent flicker - only show via flex (set by JS) */
}
.empty-state-icon { font-size: 48px; opacity: 0.45; line-height: 1; }
.empty-state-icon i { font-size: 48px; }
.empty-state h3 { font-size: 18px; font-weight: 700; color: var(--text-secondary); }
.empty-state p  { font-size: 14px; color: var(--text-muted); line-height: 1.6; max-width: 220px; }

/* Helpers */
.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-1 { flex: 1; }
.gap-8 { gap: 8px; }
.gap-12 { gap: 12px; }
.mt-8 { margin-top: 8px; }
.mt-12 { margin-top: 12px; }
.mt-16 { margin-top: 16px; }
.p-16 { padding: 16px; }
.p-20 { padding: 20px; }
.text-muted { color: var(--text-muted); }
.text-sm { font-size: 13px; }
.font-bold { font-weight: 700; }
.text-cyan { color: var(--cyan); }
.text-center { text-align: center; }
.hidden { display: none !important; }
.w-full { width: 100%; }
.divider { height: 1px; background: var(--glass-border); margin: 8px 0; }

/* ══════════════════════════════════════════════
   UI POLISH v3 — HELPLINE + OFFICIAL ACCOUNT
   ══════════════════════════════════════════════ */

/* ── Improved tap/click response ─────────────── */
button, [role="button"], .chat-list-item, .profile-item,
.nav-item, .plus-dropdown-item, .cp-menu-item, .settings-item {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}
button:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }

/* Ripple effect on primary buttons */
.btn-primary, .btn-secondary, .btn-danger, .btn-google {
  position: relative;
  overflow: hidden;
}
.btn-primary::after, .btn-secondary::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.15);
  opacity: 0;
  transition: opacity 80ms ease;
  border-radius: inherit;
}
.btn-primary:active::after, .btn-secondary:active::after { opacity: 1; }

/* Faster icon-btn active response */
.icon-btn { transition: background 80ms ease, transform 80ms ease; }
.icon-btn:active { transform: scale(0.88); transition-duration: 60ms; }

/* Nav item press effect */
.nav-item:active { transform: scale(0.94); transition-duration: 60ms; }

/* Chat list item press feedback */
.chat-list-item:active { background: var(--glass-strong) !important; transform: scale(0.99); transition-duration: 60ms; }

/* ── Improved Send Button ────────────────────── */
.send-btn {
  will-change: transform;
  transition: transform 80ms ease, box-shadow 80ms ease;
}
.send-btn:active { transform: scale(0.88) !important; transition-duration: 60ms !important; }

/* ── Bottom nav active indicator (pill) ──────── */
.nav-item { position: relative; }
.nav-item.active::after {
  content: '';
  position: absolute;
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--cyan);
}

/* ── Message input focus glow ────────────────── */
.msg-input-wrap:focus-within {
  border-color: rgba(0,229,255,0.45);
  box-shadow: 0 0 0 3px rgba(0,229,255,0.07);
}

/* ── Smooth screen transitions ───────────────── */
@keyframes screenIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.screen.active { animation: screenIn 180ms cubic-bezier(0.4,0,0.2,1); }

/* ── Profile section spacing ─────────────────── */
.profile-section {
  margin-bottom: 4px;
}
.profile-section:last-child {
  margin-bottom: 24px;
}

/* ══════════════════════════════════════════════
   OFFICIAL ACCOUNT — VibeUin Official
   ══════════════════════════════════════════════ */

/* Special chat list item for official accounts */
.chat-list-item.official-account {
  background: linear-gradient(135deg, rgba(0,229,255,0.06), rgba(168,85,247,0.05));
  border-left: 3px solid var(--cyan);
  position: relative;
}
.chat-list-item.official-account::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(0,229,255,0.03), transparent);
  pointer-events: none;
}
.chat-list-item.official-account:hover {
  background: linear-gradient(135deg, rgba(0,229,255,0.10), rgba(168,85,247,0.08));
}

/* Official avatar — cyan ring glow */
.cl-avatar.official-av {
  background: linear-gradient(135deg, #00e5ff, #a855f7) !important;
  box-shadow: 0 0 0 2px var(--bg-deep), 0 0 0 4px var(--cyan), 0 0 16px rgba(0,229,255,0.35);
}

/* Verified badge inline */
.verified-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--cyan);
  flex-shrink: 0;
  vertical-align: middle;
  margin-left: 4px;
}
.verified-badge svg {
  width: 10px;
  height: 10px;
  color: var(--bg-deep);
}

/* Official name row */
.official-name-row {
  display: flex;
  align-items: center;
  gap: 0;
}

/* Official label pill */
.official-tag {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: linear-gradient(135deg, rgba(0,229,255,0.18), rgba(168,85,247,0.14));
  border: 1px solid rgba(0,229,255,0.3);
  border-radius: 99px;
  padding: 2px 7px;
  font-size: 10px;
  font-weight: 700;
  color: var(--cyan);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  flex-shrink: 0;
}
.official-tag svg { width: 10px; height: 10px; }

/* Official account in chat header */
.chat-header-name.official-name { display: flex; align-items: center; gap: 4px; }

/* Side panel official card */
.official-hero-card {
  margin: 12px 16px;
  padding: 16px;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, rgba(0,229,255,0.10), rgba(168,85,247,0.08));
  border: 1px solid rgba(0,229,255,0.25);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}
.official-hero-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--cyan);
  text-transform: uppercase;
  letter-spacing: 0.07em;
}
.official-hero-desc {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.5;
}

/* ══════════════════════════════════════════════
   HELP & REPORTS SCREEN
   ══════════════════════════════════════════════ */

/* Modal overlay for full-screen helpline */
#helplineOverlay {
  position: fixed;
  inset: 0;
  z-index: 450;
  background: var(--bg-deep);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 280ms cubic-bezier(0.4,0,0.2,1);
  visibility: hidden;
}
#helplineOverlay.open {
  transform: translateX(0);
  visibility: visible;
}

.helpline-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--glass-border);
  background: var(--bg-deep);
  flex-shrink: 0;
  position: sticky;
  top: 0;
  z-index: 1;
}
.helpline-header-info { flex: 1; }
.helpline-header-title {
  font-family: var(--font-head);
  font-size: 17px;
  font-weight: 700;
}
.helpline-header-sub {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 1px;
}

.helpline-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Report card */
.report-card {
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  animation: fadeInUp 200ms ease;
  transition: background var(--anim-fast);
}
.report-card:hover { background: var(--bg-card-hov); }

/* Status-specific left border */
.report-card.status-pending   { border-left: 3px solid #fbbf24; }
.report-card.status-reviewed  { border-left: 3px solid #3b82f6; }
.report-card.status-action_taken { border-left: 3px solid #22c55e; }
.report-card.status-dismissed { border-left: 3px solid rgba(255,255,255,0.2); }

.report-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.report-id {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  font-family: monospace;
  letter-spacing: 0.03em;
}
.report-type-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 99px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: rgba(255,255,255,0.07);
  color: var(--text-muted);
  border: 1px solid rgba(255,255,255,0.08);
}
.report-type-badge.type-private   { background: rgba(0,229,255,0.10);  color: var(--cyan);   border-color: rgba(0,229,255,0.2); }
.report-type-badge.type-group     { background: rgba(168,85,247,0.10); color: var(--purple); border-color: rgba(168,85,247,0.2); }
.report-type-badge.type-anonymous { background: rgba(251,146,60,0.10); color: #fb923c;       border-color: rgba(251,146,60,0.2); }

.report-user-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.report-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--grad-main);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  color: var(--bg-deep);
  flex-shrink: 0;
}
.report-user-info { flex: 1; min-width: 0; }
.report-user-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.report-user-id {
  font-size: 11px;
  color: var(--text-muted);
  font-family: monospace;
}
.report-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
}
.report-status-pill.pending {
  background: rgba(251,191,36,0.15);
  color: #fbbf24;
  border: 1px solid rgba(251,191,36,0.3);
}
.report-status-pill.reviewed {
  background: rgba(59,130,246,0.15);
  color: #60a5fa;
  border: 1px solid rgba(59,130,246,0.3);
}
.report-status-pill.action_taken {
  background: rgba(34,197,94,0.15);
  color: #4ade80;
  border: 1px solid rgba(34,197,94,0.3);
}
.report-status-pill.dismissed {
  background: rgba(255,255,255,0.06);
  color: var(--text-muted);
  border: 1px solid rgba(255,255,255,0.08);
}
.report-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.report-reason {
  font-size: 13px;
  color: var(--text-secondary);
  padding: 8px 12px;
  background: rgba(255,255,255,0.04);
  border-radius: var(--radius-sm);
  border-left: 2px solid rgba(255,255,255,0.1);
  line-height: 1.5;
}
.report-reason-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 3px;
}

.report-admin-note {
  font-size: 12px;
  color: var(--text-secondary);
  padding: 8px 12px;
  background: rgba(0,229,255,0.05);
  border-radius: var(--radius-sm);
  border-left: 2px solid rgba(0,229,255,0.3);
  line-height: 1.5;
}
.report-admin-note-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--cyan);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 3px;
}

.report-date {
  font-size: 11px;
  color: var(--text-muted);
  text-align: right;
}

/* Empty state for reports */
.helpline-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 60px 32px;
  text-align: center;
}
.helpline-empty-icon {
  width: 72px;
  height: 72px;
  border-radius: 22px;
  background: rgba(0,229,255,0.08);
  border: 1px solid rgba(0,229,255,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  color: var(--cyan);
}
.helpline-empty h3 {
  font-family: var(--font-head);
  font-size: 18px;
  font-weight: 700;
  color: var(--text-secondary);
}
.helpline-empty p {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.6;
  max-width: 240px;
}

/* Loading spinner in helpline */
.helpline-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px;
  gap: 10px;
  color: var(--text-muted);
  font-size: 13px;
}

/* ── Profile menu item for helpline ──────────── */
.profile-item-icon.helpline-icon {
  background: rgba(251,191,36,0.10);
}

/* ── Quick Stats Bar on Helpline ─────────────── */
.helpline-stats {
  display: flex;
  gap: 8px;
  margin-bottom: 4px;
}
.helpline-stat-card {
  flex: 1;
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.helpline-stat-num {
  font-family: var(--font-head);
  font-size: 20px;
  font-weight: 800;
}
.helpline-stat-label {
  font-size: 10px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
}
.helpline-stat-card.pending-stat   .helpline-stat-num { color: #fbbf24; }
.helpline-stat-card.reviewed-stat  .helpline-stat-num { color: #60a5fa; }
.helpline-stat-card.resolved-stat  .helpline-stat-num { color: #4ade80; }

/* ── Official Account Profile Overlay Tweaks ──── */
.official-profile-banner {
  margin: 0 16px 12px;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, rgba(0,229,255,0.10), rgba(168,85,247,0.08));
  border: 1px solid rgba(0,229,255,0.2);
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: var(--text-secondary);
}
.official-profile-banner svg {
  width: 18px;
  height: 18px;
  color: var(--cyan);
  flex-shrink: 0;
}

/* Desktop tweaks */
@media (min-width: 600px) {
  #helplineOverlay {
    max-width: 480px;
    left: 50%;
    transform: translateX(calc(-50% + 100%));
    right: auto;
    width: 100%;
  }
  #helplineOverlay.open {
    transform: translateX(-50%);
  }
  .helpline-body { padding: 20px; }
}

/* Light theme adjustments */
body.theme-light .report-card {
  background: rgba(0,0,0,0.02);
  border-color: rgba(0,0,0,0.08);
}
body.theme-light .report-card:hover { background: rgba(0,0,0,0.04); }
body.theme-light .report-reason { background: rgba(0,0,0,0.03); }
body.theme-light .report-admin-note { background: rgba(0,186,207,0.05); }
body.theme-light .helpline-stat-card { background: rgba(255,255,255,0.8); }


/* ══════════════════════════════════════════════
   GROUPED MENU — 3-DOT NAVIGATION
   ══════════════════════════════════════════════ */

/* Menu level system */
.menu-level {
  display: none;
  flex-direction: column;
  animation: menuSlideIn 220ms cubic-bezier(0.4,0,0.2,1);
  max-height: 65vh;
  overflow-y: auto;
}
.menu-level.active {
  display: flex;
}
@keyframes menuSlideIn {
  from { opacity: 0; transform: translateX(18px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Menu group items (top level categories) */
.menu-group-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 20px;
  cursor: pointer;
  transition: background var(--anim-fast);
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.menu-group-item:last-child { border-bottom: none; }
.menu-group-item:hover { background: rgba(255,255,255,0.04); }
.menu-group-item:active { background: rgba(255,255,255,0.08); }

.menu-group-icon {
  width: 42px; height: 42px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 17px; flex-shrink: 0;
  transition: transform var(--anim-fast);
}
.menu-group-item:hover .menu-group-icon { transform: scale(1.06); }

.menu-group-text { flex: 1; }
.menu-group-label { font-size: 15px; font-weight: 600; color: var(--text-primary); }
.menu-group-sub   { font-size: 12px; color: var(--text-muted); margin-top: 2px; }

.menu-group-arrow {
  color: var(--text-muted);
  font-size: 12px;
  flex-shrink: 0;
  transition: transform var(--anim-fast);
}
.menu-group-item:hover .menu-group-arrow { transform: translateX(3px); }

/* Sub-level back header */
.menu-level-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px 8px;
  cursor: pointer;
  color: var(--cyan);
  font-size: 14px;
  font-weight: 600;
  border-bottom: 1px solid var(--glass-border);
  margin-bottom: 4px;
  transition: opacity var(--anim-fast);
  flex-shrink: 0;
  position: sticky;
  top: 0;
  background: var(--glass-strong);
  backdrop-filter: blur(20px);
  z-index: 1;
}
.menu-level-header:hover { opacity: 0.8; }
.menu-level-header i { font-size: 13px; }

/* Profile items in sub-menus: add left padding */
.menu-level .profile-item {
  padding: 11px 20px;
}
.menu-level .profile-item:hover {
  margin: 0;
  padding: 11px 20px;
  border-radius: 0;
  background: rgba(255,255,255,0.04);
}
.menu-level .profile-item-icon {
  width: 36px; height: 36px;
  border-radius: 10px;
  font-size: 15px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

/* Main menu sheet — enforce max height + scroll safety */
#mainMenuSheet {
  max-height: 90dvh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
#mainMenuSheet > div:last-child {
  flex-shrink: 0;
}


/* ══════════════════════════════════════════════
   DESKTOP LAYOUT — PROPER 3-COLUMN GRID
   Mobile: flex column | Desktop: sidebar + panel + chat
   ══════════════════════════════════════════════ */

/* ── Sidebar panel wrapper (col 2 on desktop) ── */
.sidebar-panel {
  display: contents; /* transparent on mobile — children render in normal flow */
}

@media (min-width: 768px) {
  body {
    display: flex;
    align-items: stretch;
    justify-content: center;
    min-height: 100dvh;
    background:
      radial-gradient(ellipse 80% 60% at 20% 10%, rgba(0,229,255,0.06) 0%, transparent 60%),
      radial-gradient(ellipse 60% 50% at 80% 80%, rgba(168,85,247,0.07) 0%, transparent 60%),
      var(--bg-deep);
  }

  /* ── App container: true 3-column grid ── */
  .app-container {
    max-width: 1280px;
    width: 100%;
    margin: 0 auto;
    height: 100dvh;
    overflow: hidden;
    display: grid;
    grid-template-columns: 72px 340px 1fr;
    grid-template-rows: 1fr;
    border-left: 1px solid var(--glass-border);
    border-right: 1px solid var(--glass-border);
    box-shadow: 0 0 120px rgba(0,0,0,0.6);
    position: relative;
  }

  /* ── Column 1: Vertical icon nav ── */
  .bottom-nav {
    grid-column: 1;
    grid-row: 1;
    width: 72px;
    height: 100dvh;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding: 16px 0;
    gap: 4px;
    border-top: none;
    border-right: 1px solid var(--glass-border);
    border-bottom: none;
    background: var(--bg-mid);
    backdrop-filter: blur(28px);
    -webkit-backdrop-filter: blur(28px);
    position: relative;
    z-index: 10;
    overflow: visible;
  }

  /* Logo mark at top of sidebar */
  .bottom-nav::before {
    content: '';
    display: block;
    width: 42px; height: 42px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--cyan), var(--purple));
    background-image: url('logo.png');
    background-size: cover;
    background-position: center;
    margin-bottom: 20px;
    flex-shrink: 0;
    box-shadow: 0 4px 16px rgba(0,229,255,0.3);
  }

  /* Nav items in vertical sidebar */
  .nav-item {
    width: 52px; height: 52px;
    border-radius: 16px;
    flex: none;
    padding: 0; gap: 0;
    font-size: 0; /* hide label text */
    justify-content: center;
    position: relative;
    transition: all var(--anim-med);
  }
  .nav-item:hover { background: var(--glass); }
  .nav-item.active {
    background: linear-gradient(135deg, rgba(0,229,255,0.2), rgba(0,255,136,0.1));
    color: var(--cyan);
  }

  /* Tooltip on hover */
  .nav-item::after {
    content: attr(data-tooltip);
    position: absolute;
    left: calc(100% + 12px);
    top: 50%; transform: translateY(-50%);
    background: var(--bg-mid);
    border: 1px solid var(--glass-border);
    color: var(--text-primary);
    font-size: 12px; font-weight: 600;
    padding: 6px 10px; border-radius: 8px;
    white-space: nowrap;
    opacity: 0; pointer-events: none;
    transition: opacity 150ms;
    z-index: 200;
    box-shadow: 0 4px 16px rgba(0,0,0,0.3);
  }
  .nav-item:hover::after { opacity: 1; }

  /* Active left bar indicator */
  .nav-item.active::before {
    content: '';
    position: absolute;
    left: -1px; top: 50%; transform: translateY(-50%);
    width: 3px; height: 24px;
    background: var(--cyan);
    border-radius: 0 3px 3px 0;
  }
  .nav-item.active::after { display: none; }

  /* Nav badge in sidebar */
  .nav-badge {
    position: absolute;
    top: 6px; right: 6px;
    left: auto;
    min-width: 16px; height: 16px;
    font-size: 9px;
  }

  /* ── Column 2: Sidebar panel (header + tabs + list) ── */
  .sidebar-panel {
    display: flex;       /* NOT display:contents on desktop */
    flex-direction: column;
    grid-column: 2;
    grid-row: 1;
    height: 100dvh;
    overflow: hidden;
    border-right: 1px solid var(--glass-border);
    background: var(--bg-mid);
    position: relative;
    z-index: 5;
  }

  /* ── App header lives in sidebar-panel on desktop ── */
  .app-header {
    display: flex !important;
    height: 60px;
    flex-shrink: 0;
    padding: 0 16px;
    background: var(--bg-mid);
    border-bottom: 1px solid var(--glass-border);
  }

  /* Upgrade banner inside sidebar-panel */
  .upgrade-banner {
    margin: 8px 12px;
    flex-shrink: 0;
  }

  /* Swipe tabs inside sidebar-panel */
  .swipe-tabs {
    flex-shrink: 0;
  }

  /* Swipe viewport fills remaining sidebar space */
  .swipe-viewport {
    flex: 1;
    min-height: 0;
    overflow: hidden;
  }

  /* Profile screen also in sidebar-panel */
  .profile-screen {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
  }

  /* Desktop sidebar header — hidden (app-header takes its role) */
  .desktop-sidebar-header {
    display: none !important;
  }

  /* Screens in swipe track — no special grid placement needed */
  .screen.swipe-screen {
    /* inherits from swipe-track layout */
  }

  /* ── Column 3: Chat room ── */
  .chat-room {
    grid-column: 3 !important;
    grid-row: 1 !important;
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    width: 100%;
    height: 100dvh;
    display: flex !important;
    flex-direction: column;
    background: var(--bg-deep);
    transition: none;
    border-radius: 0;
    z-index: 1;
  }
  /* When no chat open — show placeholder */
  .chat-room:not(.open) .chat-header,
  .chat-room:not(.open) .messages-area,
  .chat-room:not(.open) .msg-input-area,
  .chat-room:not(.open) .reply-bar,
  .chat-room:not(.open) .media-preview-wrap,
  .chat-room:not(.open) .upload-progress-bar,
  .chat-room:not(.open) .typing-indicator-wrap {
    display: none !important;
  }
  .chat-room:not(.open) .chat-room-empty-desktop {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    gap: 16px;
    opacity: 1;
    pointer-events: none;
  }
  .chat-room.open .chat-room-empty-desktop {
    display: none !important;
  }

  /* Better message spacing on desktop */
  .messages-area { padding: 16px 20px 10px; }
  .msg-input-area { padding: 12px 16px 14px; }

  /* Bubble max width on wide screens */
  .msg-bubble { max-width: min(65%, 400px); }

  /* Modal centering */
  .modal-overlay { align-items: center; }
  .modal-sheet {
    border-radius: var(--radius-xl);
    max-width: 440px;
    margin: 0 auto;
    animation: modalFadeScale 220ms cubic-bezier(0.4,0,0.2,1);
  }
  @keyframes modalFadeScale {
    from { opacity: 0; transform: scale(0.96) translateY(8px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
  }

  /* Side panels — overlay over chat area */
  .side-panel-overlay {
    left: 0;
    z-index: 500;
  }

  /* FABs */
  .fab-ai  { bottom: 24px; right: 24px; }
  .fab-new { bottom: 24px; right: 80px; }

  /* Profile section padding */
  .profile-section { padding: 0 24px 8px; }
  .profile-hero { padding: 32px 24px 20px; }

  /* Search bar */
  .search-bar-wrap { padding: 12px 16px 6px; }
  .search-bar { padding: 11px 16px; }

  /* Chat list items */
  .chat-list-item { padding: 11px 16px; }
  .cl-avatar { width: 50px; height: 50px; }

  /* Section header */
  .section-header { padding: 18px 16px 8px; font-size: 20px; }
  .group-actions-bar { padding: 4px 16px 12px; }

  /* Plus dropdown z-index */
  .plus-dropdown { z-index: 600; }
}

/* Narrow desktop (768px–1023px) — tighter columns */
@media (min-width: 768px) and (max-width: 1023px) {
  .app-container {
    grid-template-columns: 64px 300px 1fr;
    max-width: 960px;
  }
  .bottom-nav {
    width: 64px;
  }
  .nav-item { width: 46px; height: 46px; }
}

/* Wide desktop (≥1280px) — more breathing room */
@media (min-width: 1280px) {
  .app-container {
    grid-template-columns: 80px 360px 1fr;
    max-width: 1400px;
  }
  .bottom-nav { width: 80px; }
  .nav-item { width: 56px; height: 56px; }
}


/* ══════════════════════════════════════════════
   MICRO INTERACTIONS
   ══════════════════════════════════════════════ */

/* Button press feedback with scale */
.btn-primary, .btn-secondary, .btn-danger, .btn-google,
.vb-btn-primary, .vb-btn-secondary, .vb-btn-outline, .vb-btn-danger {
  transition: transform 100ms ease, box-shadow 150ms ease, background 150ms ease, opacity 150ms ease;
  will-change: transform;
}

/* Modal open/close animations */
.modal-overlay.open .modal-sheet {
  animation: sheetUp var(--anim-med) cubic-bezier(0.34,1.56,0.64,1);
}
@keyframes sheetUp {
  from { transform: translateY(100%) scale(0.97); opacity: 0; }
  to   { transform: translateY(0) scale(1); opacity: 1; }
}

/* Side panel slide in */
.side-panel-overlay.open .side-panel {
  transition: right 260ms cubic-bezier(0.34,1.2,0.64,1);
}

/* Chat room slide in on mobile */
@media (max-width: 767px) {
  .chat-room.open {
    animation: chatSlideIn 260ms cubic-bezier(0.4,0,0.2,1);
  }
  @keyframes chatSlideIn {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
  }
}

/* Smooth message appearance */
.msg-row {
  animation: msgIn 180ms cubic-bezier(0.4,0,0.2,1);
}
@keyframes msgIn {
  from { opacity: 0; transform: translateY(8px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Chat list item hover — subtle lift */
.chat-list-item {
  transition: background 100ms ease, transform 80ms ease;
}
@media (hover: hover) {
  .chat-list-item:hover {
    transform: translateX(2px);
  }
}

/* Icon buttons — bouncy active */
.icon-btn:active, .vb-icon-btn:active {
  transform: scale(0.85) !important;
  transition-duration: 60ms !important;
}

/* Settings / profile items */
.settings-item, .profile-item, .cp-menu-item {
  transition: background 100ms ease, padding 80ms ease;
}

/* Send button pulse on hover */
.send-btn:hover {
  box-shadow: 0 4px 24px rgba(0,229,255,0.5) !important;
  animation: sendBtnPulse 1.5s ease infinite;
}
@keyframes sendBtnPulse {
  0%,100% { box-shadow: 0 4px 20px rgba(0,229,255,0.35); }
  50% { box-shadow: 0 4px 28px rgba(0,229,255,0.55); }
}

/* Toast animations */
.toast {
  animation: toastBounceIn 300ms cubic-bezier(0.34,1.56,0.64,1) !important;
}
@keyframes toastBounceIn {
  from { opacity: 0; transform: translateY(-20px) scale(0.9); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Reaction picker scale-in */
.reaction-picker.show {
  animation: reactionIn 200ms cubic-bezier(0.34,1.56,0.64,1);
}
@keyframes reactionIn {
  from { opacity: 0; transform: scale(0.7) translateY(10px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}
.reaction-emoji:hover {
  animation: emojiWiggle 200ms ease;
}
@keyframes emojiWiggle {
  0% { transform: scale(1.3) rotate(0deg); }
  30% { transform: scale(1.4) rotate(-8deg); }
  60% { transform: scale(1.35) rotate(6deg); }
  100% { transform: scale(1.3) rotate(0deg); }
}

/* Incoming call banner — springy */
.incoming-call-banner.show {
  animation: callBannerDrop 400ms cubic-bezier(0.34,1.56,0.64,1);
}
@keyframes callBannerDrop {
  from { top: -90px; }
  to { top: 16px; }
}

/* Avatar picker option hover */
.avatar-option:hover {
  animation: avatarBounce 200ms ease;
}
@keyframes avatarBounce {
  0%,100% { transform: scale(1.1); }
  50% { transform: scale(1.2); }
}

/* Nav item active indicator animation */
.nav-item.active::after {
  animation: navDotAppear 200ms cubic-bezier(0.34,1.56,0.64,1);
}
@keyframes navDotAppear {
  from { transform: translateX(-50%) scale(0); }
  to { transform: translateX(-50%) scale(1); }
}

/* Profile avatar ring pulse */
.profile-avatar {
  animation: avatarRing 4s ease infinite;
}
@keyframes avatarRing {
  0%,100% { box-shadow: 0 0 0 3px var(--bg-deep), 0 0 0 5px rgba(0,229,255,0.35), 0 8px 32px rgba(0,229,255,0.2); }
  50% { box-shadow: 0 0 0 3px var(--bg-deep), 0 0 0 7px rgba(0,229,255,0.2), 0 8px 40px rgba(0,229,255,0.3); }
}

/* Focus-within for inputs — glow */
.glass-input:focus {
  box-shadow: 0 0 0 3px rgba(0,229,255,0.12);
  transition: border-color 150ms, box-shadow 150ms;
}
textarea.glass-input:focus {
  box-shadow: 0 0 0 3px rgba(0,229,255,0.12);
}

/* Smooth vibe-id card border hover */
.vibe-id-card {
  transition: border-color 200ms, box-shadow 200ms;
}
.vibe-id-card:hover {
  box-shadow: 0 0 0 1px rgba(0,229,255,0.15);
}

/* Group card hover lift */
.group-card:hover {
  box-shadow: 0 8px 32px rgba(0,229,255,0.15), var(--shadow-card);
}

/* Typing dots bounce */
.typing-bubble span:nth-child(1) { animation: typingDot 1s ease infinite; }
.typing-bubble span:nth-child(2) { animation: typingDot 1s ease 0.15s infinite; }
.typing-bubble span:nth-child(3) { animation: typingDot 1s ease 0.3s infinite; }

/* Scrollbar smooth for messages */
.messages-area {
  scroll-behavior: smooth;
}

/* ── Desktop sidebar header (JS-injected) ────── */
.desktop-sidebar-header {
  display: none;
}
@media (min-width: 768px) {
  .desktop-sidebar-header {
    display: flex;
  }
  /* Hide the old ::before placeholder */
  .screen.active::before {
    display: none;
  }
}


/* ══════════════════════════════════════════════
   MOBILE UI POLISH
   ══════════════════════════════════════════════ */

/* Improved mobile touch targets */
@media (max-width: 480px) {
  .btn-primary, .btn-secondary, .btn-danger {
    padding: 14px 18px;
    font-size: 15px;
    min-height: 48px;
  }

  /* Chat list — better spacing */
  .chat-list-item { gap: 11px; }
  .cl-name { font-size: 14.5px; }

  /* Input area mobile */
  .msg-input-area { padding: 8px 10px 12px; gap: 6px; }
  .msg-input-wrap { padding: 7px 10px; }
  .msg-input { font-size: 15px; }
  .send-btn { width: 42px; height: 42px; }

  /* Modal sheets better on mobile */
  .modal-sheet { border-radius: 24px 24px 0 0; }
  .modal-title { font-size: 17px; }

  /* Reduce clutter in chat header */
  .chat-header { padding: 0 6px; gap: 6px; }
  .chat-header-name { font-size: 14px; }
  .chat-header-status { font-size: 11px; }

  /* Bottom nav bigger hit targets */
  .nav-item { padding: 10px 0 8px; min-height: 56px; }

  /* Cleaner profile */
  .profile-name { font-size: 21px; }

  /* Group grid single col on tiny screens */
}
@media (max-width: 360px) {
  .groups-grid { grid-template-columns: 1fr; }
  .group-card { padding: 14px; }
}

/* Prevent body scroll when modals open */
body.modal-open { overflow: hidden; }

/* Better scrolling on iOS */
.messages-area, .chat-list, .profile-screen,
.screen, .side-panel, #helplineOverlay {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}


/* ══════════════════════════════════════════════
   FAVICON & BRANDING FIXES
   ══════════════════════════════════════════════ */

/* Loading logo uses actual logo.png */
.loading-logo-img {
  width: 68px; height: 68px;
  border-radius: 18px;
  object-fit: cover;
  box-shadow: 0 0 36px rgba(0,229,255,0.4);
  animation: logoPulse 2.2s ease infinite;
}
@keyframes logoPulse {
  0%,100% { box-shadow: 0 0 36px rgba(0,229,255,0.38); }
  50%      { box-shadow: 0 0 54px rgba(0,229,255,0.65); }
}

/* Sidebar logo */
.sidebar-logo-img {
  width: 42px; height: 42px;
  border-radius: 12px; object-fit: cover;
  box-shadow: 0 4px 16px rgba(0,229,255,0.3);
  flex-shrink: 0; cursor: default;
}

/* Default avatar uses logo when no avatar set */
.default-avatar-logo {
  background-image: url('logo.png');
  background-size: cover;
  background-position: center;
}

/* ══════════════════════════════════════════════
   SWIPE NAVIGATION — TABS + TRACK
   ══════════════════════════════════════════════ */

/* Swipe tabs bar */
.swipe-tabs {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  position: relative;
  padding: 0 4px;
  border-bottom: 1px solid var(--glass-border);
  background: var(--glass);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  z-index: 9;
  height: 50px; /* +2px taller for better tap */
}
.swipe-tabs.hidden { display: none; }

.swipe-tab {
  flex: 1;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 8px 4px;
  background: transparent;
  color: var(--text-muted);
  font-size: 12.5px;
  font-weight: 600;
  font-family: var(--font-body);
  letter-spacing: 0.01em;
  position: relative;
  transition: color 200ms ease;
  -webkit-tap-highlight-color: transparent;
  /* Bigger touch target */
  min-height: 50px;
  border: none;
  cursor: pointer;
  user-select: none;
}
.swipe-tab svg { width: 16px; height: 16px; flex-shrink: 0; transition: transform 200ms ease, color 200ms ease; }
.swipe-tab.active { color: var(--cyan); }
.swipe-tab.active svg { transform: scale(1.15); }
.swipe-tab:active { opacity: 0.65; }

/* Sliding indicator pill */
.swipe-tab-indicator {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--cyan), var(--green));
  border-radius: 99px 99px 0 0;
  /* Use transform for GPU acceleration — zero layout thrash */
  transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1),
              width 250ms cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform, width;
  transform-origin: left center;
  box-shadow: 0 0 10px rgba(0, 229, 255, 0.7);
}

/* Badge inside swipe tab */
.swipe-tab-badge {
  background: var(--cyan);
  color: var(--bg-deep);
  font-size: 9px;
  font-weight: 800;
  min-width: 15px;
  height: 15px;
  border-radius: 99px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
  margin-left: 2px;
}
.swipe-tab-badge.hidden { display: none; }

/* Swipe viewport & track */
.swipe-viewport {
  flex: 1;
  overflow: hidden;
  position: relative;
  min-height: 0;
}

.swipe-track {
  display: flex;
  flex-direction: row;
  height: 100%;
  width: 300%; /* 3 screens */
  transform: translateX(0);
  transition: transform 320ms cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}

/* Each swipe screen takes 1/3 of track = full viewport width */
.screen.swipe-screen {
  flex: 0 0 calc(100% / 3);
  width: calc(100% / 3);
  min-width: calc(100% / 3);
  max-width: calc(100% / 3);
  display: flex !important; /* always rendered for swipe */
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  padding-bottom: 8px;
  animation: none; /* disable old screenIn, we handle transitions */
}

/* Profile screen stays separate — not in swipe track */
.screen:not(.swipe-screen) {
  flex: 1;
  overflow-y: auto;
  display: none;
  flex-direction: column;
  padding-bottom: 8px;
}
.screen:not(.swipe-screen).active { display: flex; animation: screenIn 200ms ease; }

/* When profile screen is active, hide swipe area */
.swipe-viewport.profile-active,
.swipe-tabs.profile-active {
  display: none;
}

/* Dragging state — no transition */
.swipe-track.is-dragging {
  transition: none;
}

/* ── Bottom nav simplified (2 items) ─────────── */
.bottom-nav {
  justify-content: space-around;
}

/* ══════════════════════════════════════════════
   ANON BRANDING — "Powered by Anon"
   ══════════════════════════════════════════════ */
.anon-powered-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  padding: 8px 14px;
  background: rgba(0, 229, 255, 0.06);
  border: 1px solid rgba(0, 229, 255, 0.18);
  border-radius: 99px;
  font-size: 12px;
  color: var(--text-muted);
  text-decoration: none;
  transition: all var(--anim-fast);
  cursor: pointer;
  width: 100%;
  justify-content: center;
}
.anon-powered-badge:hover {
  background: rgba(0, 229, 255, 0.12);
  border-color: rgba(0, 229, 255, 0.35);
  color: var(--cyan);
  transform: translateY(-1px);
}
.anon-powered-badge strong {
  color: var(--cyan);
  font-weight: 700;
}
.anon-powered-icon {
  display: flex;
  align-items: center;
  color: var(--cyan);
  opacity: 0.75;
}
.anon-powered-arrow {
  font-size: 11px;
  opacity: 0.5;
  margin-left: 2px;
}

/* Anon branding in contact panel */
.cp-anon-branding {
  padding: 4px 20px 16px;
}
.cp-anon-branding .anon-powered-badge {
  margin-top: 0;
}


/* ══════════════════════════════════════════════
   MEDIA PICKER BOTTOM SHEET
   ══════════════════════════════════════════════ */
.media-picker-overlay {
  position: fixed;
  inset: 0;
  z-index: 400;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: none;
  align-items: flex-end;
  justify-content: center;
  padding: 0;
}
.media-picker-overlay.open {
  display: flex;
  animation: mpFadeIn 220ms ease forwards;
}
@keyframes mpFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.media-picker-sheet {
  width: 100%;
  max-width: 480px;
  border-radius: 26px 26px 0 0;
  padding: 0 0 env(safe-area-inset-bottom, 20px);
  animation: mpSheetUp 280ms cubic-bezier(0.32, 0.72, 0, 1) forwards;
  overflow: hidden;
}
.media-picker-sheet.closing {
  animation: mpSheetDown 280ms cubic-bezier(0.4, 0, 1, 1) forwards;
}
@keyframes mpSheetUp   { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes mpSheetDown { from { transform: translateY(0); }   to { transform: translateY(110%); } }

.media-picker-handle {
  width: 40px; height: 4px;
  background: var(--glass-border);
  border-radius: 99px;
  margin: 14px auto 0;
}

.media-picker-title {
  font-family: var(--font-head);
  font-size: 15px;
  font-weight: 700;
  color: var(--text-muted);
  text-align: center;
  padding: 10px 20px 6px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 11px;
}

.media-picker-options {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 12px;
  padding: 12px 20px 8px;
}

.media-picker-opt {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px 10px 14px;
  background: var(--bg-card);
  border: 1px solid var(--glass-border);
  border-radius: 20px;
  cursor: pointer;
  transition: all 180ms cubic-bezier(0.4, 0, 0.2, 1);
  -webkit-tap-highlight-color: transparent;
  max-width: 110px;
}
.media-picker-opt:hover {
  background: var(--bg-card-hov);
  transform: translateY(-2px);
  border-color: rgba(255,255,255,0.14);
}
.media-picker-opt:active {
  transform: scale(0.94) translateY(0);
  transition-duration: 80ms;
}

.mp-opt-icon {
  width: 52px; height: 52px;
  border-radius: 16px;
  border: 1px solid transparent;
  display: flex; align-items: center; justify-content: center;
  transition: transform 180ms ease;
}
.media-picker-opt:hover .mp-opt-icon { transform: scale(1.08); }
.mp-opt-icon svg {
  width: 24px; height: 24px;
  color: var(--text-primary);
  stroke-width: 1.8;
}

.mp-opt-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  font-family: var(--font-body);
  letter-spacing: -0.01em;
}
.mp-opt-sub {
  font-size: 10.5px;
  color: var(--text-muted);
  text-align: center;
  line-height: 1.3;
}

.media-picker-cancel {
  width: calc(100% - 40px);
  margin: 8px 20px 16px;
  padding: 14px;
  border-radius: var(--radius-md);
  background: var(--glass);
  border: 1px solid var(--glass-border);
  color: var(--text-secondary);
  font-size: 15px;
  font-weight: 600;
  font-family: var(--font-body);
  transition: all var(--anim-fast);
  -webkit-tap-highlight-color: transparent;
}
.media-picker-cancel:hover {
  background: var(--glass-strong);
  color: var(--text-primary);
}
.media-picker-cancel:active {
  transform: scale(0.97);
  transition-duration: 60ms;
}

/* ── Attach btn active glow when picker open ─ */
.media-picker-overlay.open ~ * .attach-btn,
#chatRoom .attach-btn.active {
  color: var(--cyan);
}

/* ══════════════════════════════════════════════
   CHAT UI POLISH — SPACING & ALIGNMENT FIXES
   ══════════════════════════════════════════════ */

/* Fix empty overlay z-stacking */
.chat-room-empty-desktop {
  pointer-events: none;
}

/* Tighter msg-input on mobile — better vertical rhythm */
@media (max-width: 480px) {
  .msg-input-area {
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px)) 10px;
    gap: 7px;
    align-items: flex-end;
    /* Prevent input from being covered by virtual keyboard */
    position: sticky;
    bottom: 0;
  }
  .msg-input-wrap {
    padding: 7px 8px 7px 10px;
    gap: 6px;
    align-items: flex-end;
  }
  .msg-input {
    font-size: 16px; /* Prevent iOS zoom on focus */
    padding-top: 2px;
    padding-bottom: 2px;
  }
  .send-btn {
    width: 42px; height: 42px;
    flex-shrink: 0;
    align-self: flex-end;
  }
  .emoji-btn, .attach-btn {
    align-self: flex-end;
    margin-bottom: 1px;
  }
}

/* Fix typing indicator spacing */
.typing-indicator-wrap {
  padding: 4px 14px 4px;
  min-height: 0;
}

/* Messages area — fix bottom padding so last msg clears input */
.messages-area {
  padding-bottom: 6px;
}

/* Cleaner reply bar on mobile */
@media (max-width: 480px) {
  .reply-bar { padding: 8px 12px; }
  .reply-bar-text { max-width: 170px; }
}

/* ══════════════════════════════════════════════
   STATIC PAGES v2 — Modern redesign
   ══════════════════════════════════════════════ */
.static-page-v2 {
  padding: 0 20px 40px;
}

/* Hero block */
.sp-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 28px 0 32px;
}
.sp-logo-mark {
  width: 76px; height: 76px;
  border-radius: 22px;
  background: var(--grad-main);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-head);
  font-size: 30px;
  font-weight: 800;
  color: var(--bg-deep);
  margin-bottom: 16px;
  box-shadow: 0 8px 32px rgba(0,229,255,0.28), 0 0 0 1px rgba(255,255,255,0.08);
}
.sp-hero-title {
  font-family: var(--font-head);
  font-size: 26px;
  font-weight: 800;
  background: var(--grad-main);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 6px;
  letter-spacing: -0.5px;
}
.sp-hero-sub {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.5;
}

/* Section cards */
.sp-card {
  background: var(--bg-card);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  padding: 18px 18px;
  margin-bottom: 12px;
  transition: border-color var(--anim-fast);
}
.sp-card:hover { border-color: rgba(0,229,255,0.15); }

.sp-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.sp-card-icon {
  width: 34px; height: 34px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  font-size: 17px;
}
.sp-card-title {
  font-family: var(--font-head);
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
}
.sp-card p {
  font-size: 13.5px;
  color: var(--text-secondary);
  line-height: 1.7;
  margin: 0;
}
.sp-card ul {
  padding-left: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sp-card ul li {
  font-size: 13.5px;
  color: var(--text-secondary);
  line-height: 1.6;
  list-style: none;
  padding-left: 18px;
  position: relative;
}
.sp-card ul li::before {
  content: '›';
  position: absolute; left: 4px;
  color: var(--cyan);
  font-weight: 700;
}

/* Feature pills row */
.sp-features-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}
.sp-feature-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  background: var(--bg-card);
  border: 1px solid var(--glass-border);
  border-radius: 99px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-secondary);
  transition: all var(--anim-fast);
}
.sp-feature-pill .pill-dot {
  width: 6px; height: 6px; border-radius: 50%;
  flex-shrink: 0;
}

/* Footer card */
.sp-footer-card {
  background: linear-gradient(135deg, rgba(0,229,255,0.07), rgba(168,85,247,0.06));
  border: 1px solid rgba(0,229,255,0.14);
  border-radius: var(--radius-lg);
  padding: 22px 20px;
  text-align: center;
  margin-top: 4px;
}
.sp-footer-emoji { font-size: 28px; margin-bottom: 8px; }
.sp-footer-tagline {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.5;
}
.sp-footer-copy {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 6px;
  opacity: 0.7;
}

/* Contact links */
.sp-contact-links {
  display: flex;
  gap: 10px;
  margin-top: 10px;
  flex-wrap: wrap;
}
.sp-contact-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 16px;
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-primary);
  text-decoration: none;
  transition: all var(--anim-fast);
  flex: 1;
  justify-content: center;
}
.sp-contact-link:hover {
  background: var(--glass-strong);
  border-color: rgba(0,229,255,0.25);
  transform: translateY(-1px);
}

/* Feedback form v2 */
.feedback-v2 {
  padding: 20px 20px 40px;
}
.feedback-v2-hero {
  margin-bottom: 24px;
}
.feedback-v2-hero h1 {
  font-family: var(--font-head);
  font-size: 22px;
  font-weight: 800;
  margin-bottom: 6px;
  background: var(--grad-main);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.feedback-v2-hero p {
  font-size: 13.5px;
  color: var(--text-secondary);
  line-height: 1.6;
}

/* Rating row polished */
.rating-row-v2 {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
  justify-content: flex-start;
}
.rating-btn-v2 {
  font-size: 30px;
  background: var(--bg-card);
  border: 2px solid transparent;
  border-radius: 14px;
  width: 52px; height: 52px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  opacity: 0.45;
  transition: all 180ms ease;
  -webkit-tap-highlight-color: transparent;
}
.rating-btn-v2:hover {
  opacity: 0.8;
  transform: translateY(-2px) scale(1.06);
  border-color: var(--glass-border);
}
.rating-btn-v2.active {
  opacity: 1;
  transform: scale(1.18);
  border-color: var(--cyan);
  background: rgba(0,229,255,0.08);
  box-shadow: 0 0 0 4px rgba(0,229,255,0.1);
}

/* Form field group */
.fb-field-group {
  margin-bottom: 16px;
}
.fb-label {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-bottom: 7px;
  display: block;
}

/* Category chips */
.fb-category-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}
.fb-chip {
  padding: 7px 14px;
  border-radius: 99px;
  background: var(--bg-card);
  border: 1px solid var(--glass-border);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 150ms ease;
  -webkit-tap-highlight-color: transparent;
  font-family: var(--font-body);
}
.fb-chip:hover { background: var(--bg-card-hov); color: var(--text-primary); }
.fb-chip.active {
  background: rgba(0,229,255,0.12);
  border-color: rgba(0,229,255,0.35);
  color: var(--cyan);
}


/* ══════════════════════════════════════════════
   UI POLISH v4 — COMPREHENSIVE FIX PACK
   Dropdown·Tabs·EmptyState·ChatUI·Mobile·A11y
   ══════════════════════════════════════════════ */

/* ── 1. Chat room slide — smoother open on mobile ─── */
@media (max-width: 767px) {
  .chat-room {
    transform: translateX(100%);
    transition: transform 280ms cubic-bezier(0.32,0.72,0,1);
    will-change: transform;
  }
  .chat-room.open {
    transform: translateX(0);
    animation: none; /* disable old chatSlideIn — use transform only */
  }
}

/* ── 2. Chat list item — no horizontal shift on hover (mobile jarring) ─ */
@media (hover: none) {
  .chat-list-item:hover { transform: none !important; }
}
@media (hover: hover) {
  .chat-list-item:hover { transform: translateX(1px); }
}

/* ── 3. Messages area — better bottom padding so last msg clears input ── */
.messages-area { padding-bottom: 10px; }

/* ── 4. Date separator — cleaner spacing ─────────── */
.date-sep { display: flex; align-items: center; margin: 14px 0 10px; gap: 10px; }
.date-sep::before, .date-sep::after { content: ''; flex: 1; height: 1px; background: var(--glass-border); }
.date-sep span {
  font-size: 11px; color: var(--text-muted); white-space: nowrap;
  padding: 3px 10px; background: var(--glass); border-radius: 99px;
  border: 1px solid var(--glass-border); font-weight: 500;
}

/* ── 5. Empty chat hint ───────────────────────────── */
.empty-chat-hint {
  display: flex; align-items: center; justify-content: center;
  flex: 1; font-size: 14px; color: var(--text-muted);
  font-style: italic; padding: 40px 24px; text-align: center;
  animation: fadeIn 300ms ease;
}

/* ── 6. Message loading skeleton ─────────────────── */
.msgs-loading-wrap {
  display: flex; flex-direction: column; gap: 14px;
  padding: 16px; flex: 1;
  animation: fadeIn 200ms ease;
}
.msgs-skeleton {
  height: 44px; border-radius: 18px; width: 60%;
  background: linear-gradient(90deg, var(--glass) 25%, var(--glass-strong) 50%, var(--glass) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}
.msgs-skeleton.short { width: 38%; align-self: flex-end; height: 36px; }

/* ── 7. Reply bar text — avoid truncation on small screens ─── */
@media (max-width: 380px) {
  .reply-bar-text { max-width: 130px; }
}

/* ── 8. Consistent btn hover — remove double-transform conflicts ─── */
.btn-primary:active,
.btn-secondary:active,
.btn-danger:active {
  transform: scale(0.96) !important;
  transition-duration: 60ms !important;
}

/* ── 9. Chat header — fix gap on very small screens ─── */
@media (max-width: 360px) {
  .chat-header { gap: 6px; padding: 0 4px; }
  .chat-header-name { font-size: 13px; }
}

/* ── 10. Plus dropdown — ensure proper stacking on desktop ─── */
@media (min-width: 768px) {
  .plus-dropdown { right: 0; min-width: 220px; z-index: 500; }
}

/* ── 11. Swipe track — hardware-accelerated, prevent blurry rendering ─── */
.swipe-track {
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* ── 12. Focus styles for accessibility ─────────── */
:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
  border-radius: 4px;
}
button:focus-visible, a:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
}
/* Remove default outline — replaced by focus-visible above */
:focus:not(:focus-visible) { outline: none; }

/* ── 13. Glass input — accessibility focus glow ─── */
.glass-input:focus {
  border-color: rgba(0,229,255,0.5);
  box-shadow: 0 0 0 3px rgba(0,229,255,0.10);
  outline: none;
}

/* ── 14. Screen reader only utility ─────────────── */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ── 15. Swipe screen — overflow fix ─────────────── */
.screen.swipe-screen {
  /* Prevent content from bleeding horizontally during swipe */
  overflow-x: hidden;
  /* Smooth scrolling for iOS */
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* ── 16. Group actions bar — full-width on very small screens ─── */
@media (max-width: 360px) {
  .group-actions-bar { flex-direction: column; }
  .group-actions-bar .flex-1 { width: 100%; }
}

/* ── 17. Modal overlay — close button position ───── */
.modal-overlay > .modal-sheet {
  /* Ensure it doesn't overflow screen height */
  max-height: 92dvh;
  overflow-y: auto;
}

/* ── 18. Chat list — smoother item animation ─────── */
.chat-list-item {
  animation: fadeInItem 220ms cubic-bezier(0.4,0,0.2,1) both;
}
@keyframes fadeInItem {
  from { opacity: 0; transform: translateX(-6px); }
  to   { opacity: 1; transform: translateX(0); }
}
/* Stagger first few items */
.chat-list-item:nth-child(1) { animation-delay: 0ms; }
.chat-list-item:nth-child(2) { animation-delay: 30ms; }
.chat-list-item:nth-child(3) { animation-delay: 60ms; }
.chat-list-item:nth-child(4) { animation-delay: 90ms; }
.chat-list-item:nth-child(n+5) { animation-delay: 0ms; }

/* ── 19. Chat room open/close body lock ──────────── */
body.chat-open {
  overflow: hidden;
  /* Prevent scroll bounce on iOS when chat is open */
  position: fixed;
  width: 100%;
}

/* ── 20. Reaction picker — ensure it doesn't overflow viewport ─── */
.reaction-picker {
  max-width: calc(100vw - 24px);
  /* Clamp position to screen on small devices */
}

/* ── 21. Message media — better aspect ratio for images ─── */
.msg-media img {
  max-height: 260px;
  width: 100%;
  object-fit: cover;
  display: block;
}
.msg-media video {
  max-height: 260px;
  width: 100%;
  display: block;
}

/* ── 22. Toast — safe-area top offset on notch devices ─── */
@supports (padding-top: env(safe-area-inset-top)) {
  .toast-container {
    top: calc(16px + env(safe-area-inset-top, 0px));
  }
}

/* ── 23. Smooth context menu — improved animation ─── */
.context-menu.show {
  animation: ctxPopSmooth 140ms cubic-bezier(0.34,1.4,0.64,1);
}
@keyframes ctxPopSmooth {
  from { opacity: 0; transform: scale(0.85) translateY(6px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* ── 24. Chat header profile btn — better tap area ─── */
.chat-header-profile-btn {
  padding: 6px 4px;
  border-radius: var(--radius-sm);
  min-height: 44px;
  display: flex; align-items: center; gap: 10px;
  cursor: pointer; flex: 1; min-width: 0;
  transition: background 100ms ease;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.chat-header-profile-btn:active { background: rgba(255,255,255,0.06); transform: scale(0.99); }

/* ── 25. Confirm dialog — prevent overflow on small screens ─── */
.confirm-dialog {
  margin: 0 16px;
  max-width: calc(100vw - 32px);
}

/* ── 26. Swipe track animation — disable during tab-click navigation ─── */
.swipe-track.tab-navigating {
  transition: transform 260ms cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* ── 27. App header — ensure no overflow on small screens ─── */
.app-header {
  min-height: var(--header-h);
  overflow: visible; /* Allow dropdown to overflow */
}
.header-left { flex: 1; min-width: 0; }
.header-brand { white-space: nowrap; }
.header-actions { flex-shrink: 0; gap: 2px; }

/* ── 28. Swipe tab text — capitalize consistently ─── */
.swipe-tab { text-transform: capitalize; }

/* ── 29. Chat list avatar — prevent shrink on long names ─── */
.cl-avatar { flex-shrink: 0; }
.cl-info    { flex: 1; min-width: 0; overflow: hidden; }
.cl-name    {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 100%;
}
.cl-preview {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 100%;
}

/* ── 30. Prevent layout shift from emoji picker popup ─── */
#emojiPop {
  overscroll-behavior: contain;
  max-height: 220px;
  overflow-y: auto;
}

/* ── 31. Smooth scrollbars everywhere ───────────── */
.chat-list, .messages-area, .profile-screen,
.side-panel, #helplineOverlay, .swipe-screen {
  scrollbar-width: thin;
  scrollbar-color: rgba(0,229,255,0.2) transparent;
}

/* ── 32. Desktop: dropdown in sidebar uses correct z-index ─── */
@media (min-width: 768px) {
  /* Plus dropdown needs to clear the sidebar panel */
  .desktop-sidebar-actions .plus-dropdown {
    top: calc(100% + 6px);
    right: 0;
    z-index: 600;
  }
}

/* ── 33. Swipe tab badge — prevent overflow ─────── */
.swipe-tab-badge {
  flex-shrink: 0;
  max-width: 28px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── 34. Message input — prevent iOS font-size zoom ─── */
@media (max-width: 767px) {
  .msg-input { font-size: max(16px, 1rem); }
  .glass-input { font-size: max(16px, 1rem); }
}

/* ── 35. Empty state show class (set by JS) ───── */
.empty-state.visible { display: flex !important; }

/* ── 36. Chat room empty desktop — light theme ─── */
body.theme-light .chat-room-empty-desktop h3 { color: rgba(15,23,42,0.4); }
body.theme-light .chat-room-empty-desktop p  { color: rgba(15,23,42,0.3); }

/* ── 37. Mic button (future-proofing) ───────────── */
.mic-btn {
  background: transparent; color: var(--text-muted);
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%;
  transition: all var(--anim-fast);
  -webkit-tap-highlight-color: transparent;
}
.mic-btn:active { transform: scale(0.88); color: var(--cyan); }

/* ── 38. Screen active transition override for swipe screens ─── */
.screen.swipe-screen.active { animation: none !important; }

/* ── 39. Groups grid — responsive gap ───────────── */
@media (max-width: 340px) {
  .groups-grid { grid-template-columns: 1fr; gap: 8px; padding: 0 12px 12px; }
}

/* ── 40. Upgrade banner flex-wrap for tiny screens ─── */
@media (max-width: 380px) {
  .upgrade-banner { flex-wrap: wrap; }
  .upgrade-banner-btn { margin-left: 0; width: 100%; justify-content: center; padding: 10px; }
}

/* ════════════════════════════════════════════════
   41. PROFILE OVERLAY POPUP
   ════════════════════════════════════════════════ */

/* Backdrop */
.prof-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 16px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms cubic-bezier(0.4, 0, 0.2, 1);
  will-change: opacity;
}
.prof-overlay.open {
  opacity: 1;
  pointer-events: all;
}

/* Card */
.prof-card {
  background: var(--bg-mid);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 28px;
  padding: 32px 24px 24px;
  width: 100%;
  max-width: 340px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  position: relative;
  box-shadow:
    0 24px 64px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(255, 255, 255, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transform: scale(0.88) translateY(10px);
  transition: transform 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
  will-change: transform;
  overflow: hidden;
}
/* Subtle top glow bar */
.prof-card::before {
  content: '';
  position: absolute;
  top: 0; left: 20%; right: 20%;
  height: 2px;
  background: var(--grad-main);
  border-radius: 0 0 4px 4px;
  opacity: 0.6;
}
.prof-overlay.open .prof-card {
  transform: scale(1) translateY(0);
}

/* Close button */
.prof-close-btn {
  position: absolute;
  top: 14px;
  right: 14px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.10);
  color: var(--text-muted);
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--anim-fast);
  -webkit-tap-highlight-color: transparent;
}
.prof-close-btn:hover {
  background: rgba(255, 255, 255, 0.14);
  color: var(--text-primary);
  transform: scale(1.08);
}
.prof-close-btn:active { transform: scale(0.92); }

/* Avatar ring */
.prof-avatar-ring {
  position: relative;
  margin-top: 4px;
  margin-bottom: 8px;
}
.prof-big-avatar {
  width: 92px;
  height: 92px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(0, 229, 255, 0.15), rgba(168, 85, 247, 0.15));
  border: 3px solid rgba(0, 229, 255, 0.40);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  font-weight: 700;
  font-family: var(--font-head);
  color: var(--cyan);
  box-shadow:
    0 0 0 6px rgba(0, 229, 255, 0.08),
    0 8px 24px rgba(0, 0, 0, 0.30);
  overflow: hidden;
  cursor: default;
}
.prof-online-dot {
  position: absolute;
  bottom: 4px;
  right: 4px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--green);
  border: 3px solid var(--bg-mid);
  box-shadow: 0 0 10px rgba(0, 255, 136, 0.55);
  transition: opacity 200ms;
}
.prof-online-dot.hidden {
  display: none;
}

/* Name */
.prof-card-name {
  font-family: var(--font-head);
  font-size: 20px;
  font-weight: 800;
  color: var(--text-primary);
  text-align: center;
  letter-spacing: -0.3px;
  line-height: 1.2;
}

/* Status */
.prof-card-status {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1.2px;
  font-weight: 600;
}
.prof-card-status.online {
  color: var(--green);
}

/* Bio */
.prof-card-bio {
  font-size: 13px;
  color: var(--text-secondary);
  text-align: center;
  line-height: 1.55;
  max-width: 270px;
  margin-top: 2px;
}

/* VYN ID chip */
.prof-card-vyn {
  font-size: 11px;
  color: var(--cyan);
  background: rgba(0, 229, 255, 0.09);
  border: 1px solid rgba(0, 229, 255, 0.18);
  border-radius: 20px;
  padding: 4px 14px;
  font-family: var(--font-head);
  letter-spacing: 0.5px;
  opacity: 0.85;
}

/* Action buttons row */
.prof-actions {
  display: flex;
  gap: 8px;
  margin-top: 14px;
  width: 100%;
  justify-content: center;
}
.prof-action-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  flex: 1;
  padding: 12px 6px 10px;
  border-radius: 16px;
  border: 1px solid var(--glass-border);
  background: var(--bg-card);
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2px;
  font-family: var(--font-body);
  transition: all var(--anim-fast);
  -webkit-tap-highlight-color: transparent;
  position: relative;
  overflow: hidden;
}
.prof-action-btn svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}
.prof-action-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
}
.prof-action-btn:active {
  transform: scale(0.94) translateY(0);
}

/* Per-button colors */
.prof-action-btn.prof-chat {
  color: var(--cyan);
  border-color: rgba(0, 229, 255, 0.22);
}
.prof-action-btn.prof-chat:hover {
  background: rgba(0, 229, 255, 0.10);
  border-color: rgba(0, 229, 255, 0.38);
}

.prof-action-btn.prof-voice {
  color: var(--green);
  border-color: rgba(0, 255, 136, 0.22);
}
.prof-action-btn.prof-voice:hover {
  background: rgba(0, 255, 136, 0.10);
  border-color: rgba(0, 255, 136, 0.38);
}

.prof-action-btn.prof-video {
  color: var(--purple);
  border-color: rgba(168, 85, 247, 0.22);
}
.prof-action-btn.prof-video:hover {
  background: rgba(168, 85, 247, 0.10);
  border-color: rgba(168, 85, 247, 0.38);
}

.prof-action-btn.prof-info {
  color: #fb923c;
  border-color: rgba(251, 146, 60, 0.22);
}
.prof-action-btn.prof-info:hover {
  background: rgba(251, 146, 60, 0.10);
  border-color: rgba(251, 146, 60, 0.38);
}

/* Make avatars look clickable */
.cl-avatar {
  cursor: pointer;
  transition: transform var(--anim-fast), box-shadow var(--anim-fast);
}
.cl-avatar:hover {
  transform: scale(1.08);
  box-shadow: 0 0 0 2px var(--cyan);
}
.cl-avatar:active { transform: scale(0.94); }

#chatHeaderAvatar {
  cursor: pointer;
  transition: transform var(--anim-fast);
}
#chatHeaderAvatar:hover { transform: scale(1.06); }
#chatHeaderAvatar:active { transform: scale(0.94); }

/* Light theme */
body.theme-light .prof-card {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.08);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.16);
}
body.theme-light .prof-online-dot { border-color: #ffffff; }
body.theme-light .prof-close-btn {
  background: rgba(0, 0, 0, 0.05);
  border-color: rgba(0, 0, 0, 0.10);
  color: rgba(15, 23, 42, 0.50);
}
body.theme-light .prof-close-btn:hover {
  background: rgba(0, 0, 0, 0.10);
  color: rgba(15, 23, 42, 0.90);
}
body.theme-light .prof-action-btn {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.08);
}

/* Mobile — full width */
@media (max-width: 400px) {
  .prof-card {
    max-width: 100%;
    border-radius: 22px;
    padding: 28px 16px 20px;
  }
  .prof-action-btn {
    padding: 10px 4px 8px;
    font-size: 10px;
    border-radius: 14px;
  }
  .prof-big-avatar { width: 80px; height: 80px; font-size: 30px; }
}


/* ══════════════════════════════════════════════
   CALL HISTORY — DELETE BUTTON + CLEAR ALL
   ══════════════════════════════════════════════ */

.call-history-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 16px 4px;
  flex-shrink: 0;
}
.call-history-header .section-title {
  font-family: var(--font-head);
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
}
.btn-clear-calls {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  background: rgba(248,113,113,0.08);
  border: 1px solid rgba(248,113,113,0.2);
  color: #f87171;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--anim-fast);
  font-family: var(--font-body);
}
.btn-clear-calls:hover {
  background: rgba(248,113,113,0.16);
  border-color: rgba(248,113,113,0.35);
  transform: translateY(-1px);
}
.btn-clear-calls:active { transform: scale(0.95); }
.btn-clear-calls svg { width: 13px; height: 13px; }

/* Call history item — updated layout with delete btn */
.call-history-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  cursor: pointer;
  transition: background var(--anim-fast);
  position: relative;
}
.call-history-item:hover { background: var(--bg-card-hov); }
.call-history-item:hover .call-hist-delete { opacity: 1; }

.call-hist-avatar {
  width: 46px; height: 46px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--cyan), var(--green));
  display: flex; align-items: center; justify-content: center;
  font-size: 17px; font-weight: 700; color: #050b18;
  flex-shrink: 0;
  overflow: hidden;
}
.call-hist-avatar img {
  width: 100%; height: 100%; object-fit: cover; border-radius: 50%;
}

.call-hist-info { flex: 1; min-width: 0; }
.call-hist-name {
  font-size: 15px; font-weight: 600; color: var(--text-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.call-hist-meta {
  font-size: 12px; color: var(--text-muted); margin-top: 3px;
  display: flex; align-items: center; gap: 5px;
}
.call-hist-meta i { font-size: 11px; }

.call-hist-icon {
  width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.call-hist-icon.outgoing { background: rgba(0,255,136,0.12); color: var(--green); }
.call-hist-icon.incoming { background: rgba(0,229,255,0.12); color: var(--cyan); }
.call-hist-icon.missed   { background: rgba(248,113,113,0.12); color: #f87171; }
.call-hist-icon svg { width: 16px; height: 16px; }

/* Delete button — appears on hover */
.call-hist-delete {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: rgba(248,113,113,0.08);
  border: 1px solid rgba(248,113,113,0.18);
  color: #f87171;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  opacity: 0;
  transition: all var(--anim-fast);
  flex-shrink: 0;
  font-family: var(--font-body);
}
.call-hist-delete:hover {
  background: rgba(248,113,113,0.2);
  border-color: rgba(248,113,113,0.4);
  transform: scale(1.08);
}
.call-hist-delete:active { transform: scale(0.9); }
.call-hist-delete svg { width: 14px; height: 14px; pointer-events: none; }

/* Always show delete on touch devices */
@media (hover: none) {
  .call-hist-delete { opacity: 1; }
}

/* Desktop sidebar — adjust screen section header */
@media (min-width: 768px) {
  .call-history-header { padding: 16px 16px 6px; }
}


/* ══════════════════════════════════════════════
   CHAT CONTEXT MENU (long-press / right-click on chat items)
   ══════════════════════════════════════════════ */
.chat-ctx-menu {
  position: fixed;
  z-index: 9000;
  min-width: 210px;
  background: var(--bg-mid);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 32px rgba(0,0,0,0.5), 0 2px 8px rgba(0,0,0,0.3);
  overflow: hidden;
  display: none;
  animation: ctxPop 140ms cubic-bezier(0.34,1.4,0.64,1);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}
.chat-ctx-menu.open { display: block; }
@keyframes ctxPop {
  from { opacity: 0; transform: scale(0.88); }
  to   { opacity: 1; transform: scale(1); }
}
.chat-ctx-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px 10px;
  border-bottom: 1px solid var(--glass-border);
  background: rgba(255,255,255,0.03);
}
.chat-ctx-avatar {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--cyan), var(--green));
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 700; color: var(--bg-deep);
  flex-shrink: 0;
}
.chat-ctx-name {
  font-size: 13px; font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.chat-ctx-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  font-size: 14px;
  color: var(--text-primary);
  cursor: pointer;
  transition: background var(--anim-fast);
}
.chat-ctx-item svg { width: 17px; height: 17px; color: var(--text-muted); flex-shrink: 0; }
.chat-ctx-item:hover  { background: var(--glass); }
.chat-ctx-item:active { background: var(--glass-strong); }
.chat-ctx-item.danger { color: #f87171; }
.chat-ctx-item.danger svg { color: #f87171; }
.chat-ctx-item.archive-action svg { color: var(--cyan); }

/* ══════════════════════════════════════════════
   CONFIRM DIALOG OVERLAY
   ══════════════════════════════════════════════ */
.confirm-dialog-overlay {
  position: fixed;
  inset: 0;
  z-index: 9500;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.confirm-dialog-overlay.open { display: flex; }
.confirm-dialog {
  background: var(--bg-mid);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-xl);
  padding: 28px 24px 24px;
  max-width: 320px;
  width: 100%;
  text-align: center;
  animation: ctxPop 200ms cubic-bezier(0.34,1.3,0.64,1);
  box-shadow: 0 24px 64px rgba(0,0,0,0.6);
}
.confirm-dialog-icon {
  font-size: 32px;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fbbf24;
}
.confirm-dialog-title {
  font-family: var(--font-head);
  font-size: 18px;
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 8px;
}
.confirm-dialog-desc {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.6;
  margin-bottom: 20px;
}
.confirm-dialog-btns {
  display: flex;
  gap: 10px;
}
.confirm-dialog-btns .btn-secondary,
.confirm-dialog-btns .btn-danger { flex: 1; }

/* ══════════════════════════════════════════════
   ARCHIVED CHAT SECTION HEADER
   ══════════════════════════════════════════════ */
.archived-section-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  background: rgba(0,229,255,0.04);
  border-top: 1px solid var(--glass-border);
  border-bottom: 1px solid var(--glass-border);
  transition: background var(--anim-fast);
}
.archived-section-header:hover { background: rgba(0,229,255,0.08); color: var(--cyan); }
.archived-section-header svg { width: 15px; height: 15px; flex-shrink: 0; }
.archived-count {
  background: rgba(0,229,255,0.15);
  color: var(--cyan);
  font-size: 10px; font-weight: 800;
  min-width: 18px; height: 18px;
  border-radius: 99px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 4px;
  margin-left: 4px;
}
.cl-archived-chip {
  font-size: 9px; font-weight: 700;
  background: rgba(0,229,255,0.12);
  color: var(--cyan);
  border: 1px solid rgba(0,229,255,0.2);
  border-radius: 4px;
  padding: 1px 5px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

/* ══════════════════════════════════════════════
   DESKTOP LAYOUT — ADDITIONAL FIXES
   ══════════════════════════════════════════════ */
@media (min-width: 768px) {
  /* Confirm dialog centered in viewport */
  .confirm-dialog-overlay { position: fixed; }

  /* Chat ctx menu — higher z-index on desktop */
  .chat-ctx-menu { z-index: 9000; }

  /* Side panels cover full viewport on desktop */
  .side-panel-overlay {
    position: fixed;
    inset: 0;
    z-index: 500;
    background: rgba(0,0,0,0.5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
  }
  .side-panel {
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: min(420px, 100vw);
  }

  /* Helpline overlay fixed */
  #helplineOverlay {
    position: fixed;
    inset: 0;
    z-index: 400;
  }

  /* Profile overlay on desktop — max width constrained */
  .prof-overlay {
    position: fixed;
    inset: 0;
    z-index: 9000;
  }
  .prof-card {
    max-width: 360px;
    width: 90%;
  }

  /* Chat header alignment fixes */
  .chat-header {
    padding: 0 12px;
    gap: 8px;
  }
  .chat-header-profile-btn {
    gap: 10px;
    flex: 1;
    min-width: 0;
  }
  .chat-header-name {
    font-size: 16px;
  }

  /* Message area better padding on desktop */
  .messages-area {
    padding: 20px 24px 12px;
    max-width: 900px;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
  }
  .msg-input-area {
    max-width: 900px;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
  }
}

/* ══════════════════════════════════════════════
   PROFILE OVERLAY IMPROVEMENTS
   ══════════════════════════════════════════════ */
.prof-avatar-ring {
  position: relative;
  display: inline-block;
  margin-bottom: 14px;
}
.prof-overlay {
  /* Ensure ESC-close works cleanly */
  transition: opacity 200ms ease;
}

/* ══════════════════════════════════════════════
   MISC BUG FIXES
   ══════════════════════════════════════════════ */
/* Report modal title icon fix */
.modal-title i.fa-solid { margin-right: 6px; }

/* Dropdown ESC + outside click visual fix */
.plus-dropdown:not(.open) { pointer-events: none; }
.plus-dropdown.open { pointer-events: all; }

/* Msg-row avatar - apply real images */
.msg-avatar {
  overflow: hidden;
}
.msg-avatar img {
  width: 100%; height: 100%;
  object-fit: cover; border-radius: 50%;
}

/* Chat list item — smoother delete animation */
.chat-list-item {
  will-change: opacity, transform;
}

/* Group create emoji input */
#groupEmoji {
  text-align: center;
  font-size: 24px;
}

/* Light theme fixes for ctx menu */
body.theme-light .chat-ctx-menu {
  background: #ffffff;
  border-color: rgba(0,0,0,0.1);
  box-shadow: 0 8px 32px rgba(0,0,0,0.15);
}
body.theme-light .confirm-dialog {
  background: #ffffff;
  border-color: rgba(0,0,0,0.1);
}
body.theme-light .archived-section-header {
  background: rgba(0,186,207,0.05);
}

/* ══════════════════════════════════════════════
   GROUP CALL OVERLAY — LiveKit  v1
   Full-screen, participant grid, controls bar
   ══════════════════════════════════════════════ */

.group-call-overlay {
  position: fixed; inset: 0; z-index: 9600;
  background: #050b18;
  display: none; flex-direction: column;
  opacity: 0;
  transition: opacity 250ms ease;
}
.group-call-overlay.open {
  display: flex;
  animation: gcFadeIn 250ms ease forwards;
}
@keyframes gcFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ── Header ────────────────────────────────── */
.gc-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: max(16px, env(safe-area-inset-top, 16px)) 20px 12px;
  background: linear-gradient(to bottom, rgba(5,11,24,0.98) 0%, rgba(5,11,24,0.7) 100%);
  flex-shrink: 0; z-index: 2;
  gap: 12px;
}
.gc-header-left {
  display: flex; flex-direction: column; gap: 2px; min-width: 0;
}
.gc-group-name {
  font-family: var(--font-head); font-size: 18px; font-weight: 800;
  color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.gc-call-type {
  font-size: 12px; color: var(--text-secondary);
}
.gc-header-right {
  display: flex; align-items: center; gap: 10px; flex-shrink: 0;
}
.gc-participant-pill {
  display: flex; align-items: center; gap: 5px;
  background: rgba(0,229,255,0.12); border: 1px solid rgba(0,229,255,0.25);
  border-radius: 20px; padding: 4px 10px;
  font-size: 13px; font-weight: 600; color: var(--cyan);
}
.gc-participant-pill i { font-size: 11px; }
.gc-status {
  font-size: 12px; color: var(--text-secondary);
  min-width: 60px; text-align: right;
}

/* ── Participant Grid ────────────────────────── */
.gc-participant-grid {
  flex: 1; overflow-y: auto; overflow-x: hidden;
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 8px;
  padding: 8px 10px;
  align-content: start;
}

/* ── Participant Tile ────────────────────────── */
.gc-tile {
  position: relative;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 4/3;
  display: flex; align-items: center; justify-content: center;
  flex-direction: column;
  transition: border-color 200ms ease, box-shadow 200ms ease,
              opacity 240ms ease, transform 240ms ease;
  min-height: 100px;
}
.gc-tile.local-tile {
  border-color: rgba(0,229,255,0.3);
}
.gc-tile.active-speaker {
  border-color: var(--green);
  box-shadow: 0 0 0 2px rgba(0,255,136,0.35), inset 0 0 12px rgba(0,255,136,0.06);
}
.gc-tile.has-video .gc-avatar { display: none; }

/* Full-size video inside tile */
.gc-tile .gc-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; border-radius: 16px;
  background: #000;
  display: none; /* shown when track attached */
  z-index: 0;
}

/* Avatar fallback */
.gc-tile .gc-avatar {
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--grad-main);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; font-weight: 800; color: var(--bg-deep);
  z-index: 1; flex-shrink: 0;
  box-shadow: 0 0 0 6px rgba(0,229,255,0.08);
}

/* Name overlay */
.gc-tile .gc-name {
  position: absolute; bottom: 8px; left: 10px; right: 10px;
  font-size: 12px; font-weight: 600; color: #fff;
  text-shadow: 0 1px 4px rgba(0,0,0,0.8);
  z-index: 2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Mic icon overlay */
.gc-tile .gc-mic-icon {
  position: absolute; top: 8px; right: 8px;
  width: 24px; height: 24px; border-radius: 50%;
  background: rgba(0,0,0,0.55);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; color: #fff; z-index: 2;
}

/* ── Controls Bar ────────────────────────────── */
.gc-controls {
  display: flex; align-items: center; justify-content: center;
  gap: 16px; flex-wrap: wrap;
  padding: 16px 20px max(24px, env(safe-area-inset-bottom));
  background: linear-gradient(to top, rgba(5,11,24,0.97) 50%, transparent 100%);
  flex-shrink: 0;
}
.gc-ctrl-btn {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  width: 64px; min-height: 64px; border-radius: 18px;
  background: rgba(255,255,255,0.11);
  border: none; cursor: pointer; color: #fff;
  font-size: 11px; font-weight: 600;
  transition: background 140ms ease, transform 100ms ease, box-shadow 140ms ease;
  -webkit-tap-highlight-color: transparent;
  padding: 10px 4px 8px;
}
.gc-ctrl-btn i {
  font-size: 20px; display: block;
}
.gc-ctrl-btn:active { transform: scale(0.9); }
.gc-ctrl-btn:hover  { background: rgba(255,255,255,0.17); }

/* Muted / cam-off state */
.gc-ctrl-btn.active {
  background: rgba(248,113,113,0.22);
  color: #f87171;
  box-shadow: inset 0 0 0 1px rgba(248,113,113,0.35);
}

/* Leave button */
.gc-ctrl-btn.gc-ctrl-leave {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  box-shadow: 0 4px 16px rgba(239,68,68,0.4);
}
.gc-ctrl-btn.gc-ctrl-leave:hover { opacity: 0.88; }

/* ── Mobile adjustments ─────────────────────── */
@media (max-width: 480px) {
  .gc-ctrl-btn { width: 56px; min-height: 56px; font-size: 10px; }
  .gc-ctrl-btn i { font-size: 18px; }
  .gc-group-name { font-size: 16px; }
  .gc-participant-grid { padding: 6px 8px; gap: 6px; }
}

/* ── Desktop ─────────────────────────────────── */
@media (min-width: 600px) {
  .gc-tile { border-radius: 18px; }
  .gc-tile .gc-avatar { width: 64px; height: 64px; font-size: 26px; }
  .gc-ctrl-btn { width: 72px; min-height: 72px; font-size: 12px; }
  .gc-ctrl-btn i { font-size: 24px; }
}

/* ── Body lock when group call open ─────────── */
body.gc-open { overflow: hidden; }

/* ── Light theme adjustments ────────────────── */
body.theme-light .group-call-overlay { background: #f0f4fc; }
body.theme-light .gc-tile { background: rgba(0,0,0,0.05); border-color: rgba(0,0,0,0.1); }
body.theme-light .gc-tile.active-speaker { border-color: #00b070; box-shadow: 0 0 0 2px rgba(0,176,112,0.35); }
body.theme-light .gc-header { background: linear-gradient(to bottom, rgba(240,244,252,0.98) 0%, rgba(240,244,252,0.7) 100%); }
body.theme-light .gc-controls { background: linear-gradient(to top, rgba(240,244,252,0.97) 50%, transparent 100%); }
body.theme-light .gc-ctrl-btn { background: rgba(0,0,0,0.08); color: #0f172a; }
body.theme-light .gc-ctrl-btn:hover { background: rgba(0,0,0,0.13); }
body.theme-light .gc-group-name { color: #0f172a; }


/* ══════════════════════════════════════════════
   FINAL CALL UX v8 — Premium Production Styles
   ══════════════════════════════════════════════ */

/* ── 1. INCOMING CALL UI (FULL SCREEN) ─────── */

/* Remove old compact banner behavior, add full-screen mode */
.incoming-call-banner {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 9200;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  background: linear-gradient(160deg, #050b18 0%, #0a1428 40%, #060d1e 100%);
  backdrop-filter: blur(32px);
  opacity: 0;
  pointer-events: none;
  transform: scale(1.04);
  transition: opacity 320ms cubic-bezier(0.4,0,0.2,1),
              transform 320ms cubic-bezier(0.4,0,0.2,1),
              pointer-events 0ms 320ms;
}
.incoming-call-banner::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 70% 50% at 50% 20%, rgba(0,229,255,0.12) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 80% 80%, rgba(168,85,247,0.08) 0%, transparent 60%);
  pointer-events: none;
}
.incoming-call-banner.show {
  opacity: 1;
  pointer-events: auto;
  transform: scale(1);
  transition: opacity 320ms cubic-bezier(0.34,1.56,0.64,1),
              transform 320ms cubic-bezier(0.34,1.56,0.64,1);
}

/* Animated background rings */
.ic-rings {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -60%);
  width: 280px; height: 280px;
  pointer-events: none;
}
.ic-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(0,229,255,0.15);
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) scale(0.6);
  animation: icRingPulse 2.4s ease infinite;
}
.ic-ring:nth-child(1) { width: 140px; height: 140px; animation-delay: 0s; }
.ic-ring:nth-child(2) { width: 200px; height: 200px; animation-delay: 0.4s; border-color: rgba(0,229,255,0.10); }
.ic-ring:nth-child(3) { width: 260px; height: 260px; animation-delay: 0.8s; border-color: rgba(0,229,255,0.06); }
@keyframes icRingPulse {
  0%   { transform: translate(-50%,-50%) scale(0.6); opacity: 0.8; }
  100% { transform: translate(-50%,-50%) scale(1.4); opacity: 0; }
}

/* Caller avatar */
.ic-avatar-wrap {
  position: relative; z-index: 2;
  margin-bottom: 28px;
}
.ic-avatar {
  width: 112px; height: 112px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 44px; font-weight: 800; color: #050b18;
  background: var(--grad-main);
  box-shadow:
    0 0 0 6px rgba(0,229,255,0.12),
    0 0 0 14px rgba(0,229,255,0.06),
    0 8px 40px rgba(0,229,255,0.25);
  animation: icAvatarPulse 2s ease infinite;
  overflow: hidden;
  flex-shrink: 0;
}
.ic-avatar img {
  width: 100%; height: 100%; object-fit: cover; border-radius: 50%;
}
@keyframes icAvatarPulse {
  0%,100% { box-shadow: 0 0 0 6px rgba(0,229,255,0.12), 0 0 0 14px rgba(0,229,255,0.06), 0 8px 40px rgba(0,229,255,0.25); }
  50%     { box-shadow: 0 0 0 10px rgba(0,229,255,0.18), 0 0 0 22px rgba(0,229,255,0.08), 0 8px 48px rgba(0,229,255,0.35); }
}

/* Caller info */
.ic-info { text-align: center; z-index: 2; margin-bottom: 16px; }
.ic-caller-label {
  font-size: 13px; color: var(--text-secondary); letter-spacing: 0.08em;
  text-transform: uppercase; margin-bottom: 8px;
}
.ic-caller-name {
  font-family: var(--font-head);
  font-size: 30px; font-weight: 800;
  color: var(--text-primary);
  text-shadow: 0 2px 12px rgba(0,0,0,0.5);
  margin-bottom: 10px;
}
.ic-call-type-badge {
  display: inline-flex; align-items: center; gap: 7px;
  background: rgba(0,229,255,0.10);
  border: 1px solid rgba(0,229,255,0.25);
  border-radius: 20px; padding: 6px 16px;
  font-size: 13px; font-weight: 600; color: var(--cyan);
}
.ic-call-type-badge.video-type {
  background: rgba(168,85,247,0.10);
  border-color: rgba(168,85,247,0.25);
  color: var(--purple);
}

/* Accept/Reject buttons */
.ic-actions {
  display: flex; align-items: center; gap: 44px;
  z-index: 2; margin-top: 40px;
}
.ic-btn {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  background: none; border: none; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.ic-btn-circle {
  width: 72px; height: 72px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  transition: transform 140ms ease, box-shadow 140ms ease;
}
.ic-btn:active .ic-btn-circle { transform: scale(0.88); }
.ic-btn-label {
  font-size: 13px; font-weight: 600; color: var(--text-secondary);
}

.ic-btn.reject .ic-btn-circle {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  box-shadow: 0 4px 20px rgba(239,68,68,0.45);
}
.ic-btn.reject .ic-btn-label { color: #f87171; }

.ic-btn.accept .ic-btn-circle {
  background: linear-gradient(135deg, #22c55e, #16a34a);
  box-shadow: 0 4px 20px rgba(34,197,94,0.45);
  animation: icAcceptPulse 1.2s ease infinite;
}
.ic-btn.accept .ic-btn-label { color: #4ade80; }
@keyframes icAcceptPulse {
  0%,100% { box-shadow: 0 4px 20px rgba(34,197,94,0.45); }
  50%     { box-shadow: 0 4px 30px rgba(34,197,94,0.65), 0 0 0 10px rgba(34,197,94,0.08); }
}

.ic-btn-circle svg { width: 30px; height: 30px; }
.ic-btn-circle i { font-size: 26px; color: white; }

/* ── 2. MINI CALL WINDOW (FLOATING) ────────── */

.mini-call-window {
  position: fixed;
  bottom: 90px; right: 16px;
  width: 160px;
  z-index: 9400;
  border-radius: 20px;
  overflow: hidden;
  background: rgba(10,20,40,0.92);
  border: 1.5px solid rgba(0,229,255,0.25);
  box-shadow: 0 8px 32px rgba(0,0,0,0.6), 0 0 0 1px rgba(0,229,255,0.06);
  backdrop-filter: blur(20px);
  display: none;
  cursor: grab;
  touch-action: none;
  user-select: none;
  transition: box-shadow 150ms ease;
}
.mini-call-window.visible { display: block; }
.mini-call-window:active { cursor: grabbing; }
.mini-call-window:hover {
  box-shadow: 0 12px 40px rgba(0,0,0,0.7), 0 0 0 1px rgba(0,229,255,0.2), 0 0 20px rgba(0,229,255,0.1);
}

.mini-call-video-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 3/4;
  background: #050b18;
  overflow: hidden;
}
.mini-call-video {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.mini-call-avatar-fallback {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 36px; font-weight: 800; color: #050b18;
  background: var(--grad-main);
}

.mini-call-bar {
  padding: 8px 10px;
  display: flex; align-items: center; justify-content: space-between;
}
.mini-call-info { flex: 1; min-width: 0; }
.mini-call-name {
  font-size: 12px; font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mini-call-status {
  font-size: 10px; color: var(--cyan);
  font-variant-numeric: tabular-nums;
}
.mini-call-expand {
  width: 28px; height: 28px; border-radius: 50%;
  background: rgba(0,229,255,0.15);
  border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: var(--cyan);
  transition: background 140ms ease;
  flex-shrink: 0;
}
.mini-call-expand:hover { background: rgba(0,229,255,0.25); }
.mini-call-expand i { font-size: 12px; }

/* Pulse indicator when mini window is active */
.mini-call-dot {
  position: absolute; top: 8px; right: 8px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 2px rgba(0,255,136,0.3);
  animation: miniDotPulse 1.5s ease infinite;
}
@keyframes miniDotPulse {
  0%,100% { opacity: 1; transform: scale(1); }
  50%     { opacity: 0.6; transform: scale(1.3); }
}

/* ── 3. CALL STATUS PILLS ────────────────────── */

.call-status-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 12px; border-radius: 20px;
  font-size: 13px; font-weight: 600;
  transition: all 250ms ease;
}
.call-status-pill.pill-calling {
  background: rgba(251,191,36,0.12);
  border: 1px solid rgba(251,191,36,0.25);
  color: #fbbf24;
}
.call-status-pill.pill-ringing {
  background: rgba(0,229,255,0.10);
  border: 1px solid rgba(0,229,255,0.25);
  color: var(--cyan);
}
.call-status-pill.pill-connecting {
  background: rgba(168,85,247,0.10);
  border: 1px solid rgba(168,85,247,0.25);
  color: var(--purple);
}
.call-status-pill.pill-connected {
  background: rgba(0,255,136,0.10);
  border: 1px solid rgba(0,255,136,0.25);
  color: var(--green);
}
.call-status-pill.pill-reconnecting {
  background: rgba(251,146,60,0.10);
  border: 1px solid rgba(251,146,60,0.25);
  color: #fb923c;
  animation: pillBlink 1s ease infinite;
}
.call-status-pill.pill-busy,
.call-status-pill.pill-ended {
  background: rgba(248,113,113,0.10);
  border: 1px solid rgba(248,113,113,0.25);
  color: #f87171;
}
@keyframes pillBlink {
  0%,100% { opacity: 1; }
  50%     { opacity: 0.6; }
}

/* Spinning dot for ringing/calling */
.call-status-pill .status-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: currentColor; flex-shrink: 0;
}
.call-status-pill.pill-calling .status-dot,
.call-status-pill.pill-ringing .status-dot {
  animation: dotBounce 1s ease infinite;
}
@keyframes dotBounce {
  0%,100% { transform: scale(1); opacity: 1; }
  50%     { transform: scale(0.5); opacity: 0.5; }
}

/* ── 4. IMPROVED CALL HISTORY ITEMS ─────────── */

.call-history-item.missed-item .call-hist-name { color: #f87171; }
.call-history-item.missed-item { border-left: 3px solid rgba(248,113,113,0.4); }

/* Missed badge */
.call-hist-missed-badge {
  display: inline-flex; align-items: center; gap: 4px;
  background: rgba(248,113,113,0.10);
  border: 1px solid rgba(248,113,113,0.20);
  border-radius: 8px;
  padding: 2px 7px;
  font-size: 10px; font-weight: 600; color: #f87171;
  margin-left: 4px;
}

/* Call-again button */
.call-hist-call-again {
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(0,255,136,0.10);
  border: 1px solid rgba(0,255,136,0.20);
  color: var(--green);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: all var(--anim-fast);
  flex-shrink: 0;
  margin-right: 4px;
}
.call-hist-call-again:hover {
  background: rgba(0,255,136,0.20);
  border-color: rgba(0,255,136,0.40);
  transform: scale(1.08);
}
.call-hist-call-again:active { transform: scale(0.9); }
.call-hist-call-again svg { width: 15px; height: 15px; }

/* Missed calls badge on tab */
.swipe-tab-badge.missed { background: #ef4444; }

/* ── 5. CALL OVERLAY — ENHANCED BACKGROUNDS ── */

/* State-based overlay tints */
.call-overlay.state-calling {
  background: linear-gradient(160deg, #050d1f 0%, #071020 100%);
}
.call-overlay.state-connected {
  background: linear-gradient(160deg, #041509 0%, #050b18 100%);
}
.call-overlay.state-reconnecting {
  background: linear-gradient(160deg, #130a00 0%, #050b18 100%);
}
.call-overlay.state-ended {
  background: linear-gradient(160deg, #130005 0%, #050b18 100%);
}

/* Status display in call overlay */
.call-status {
  display: flex; align-items: center; justify-content: center;
  gap: 8px; min-height: 28px;
}

/* ── 6. GROUP CALL — IMPROVED TILES ────────── */

/* Active speaker indicator bar at bottom */
.gc-tile.active-speaker::after {
  content: '';
  position: absolute; bottom: 0; left: 0; right: 0;
  height: 3px;
  background: var(--green);
  animation: speakerBar 0.3s ease;
}
@keyframes speakerBar {
  from { transform: scaleX(0.3); }
  to   { transform: scaleX(1); }
}

/* Tile entrance animation */
.gc-tile {
  animation: tileIn 280ms cubic-bezier(0.34,1.56,0.64,1) both;
}
@keyframes tileIn {
  from { opacity: 0; transform: scale(0.85); }
  to   { opacity: 1; transform: scale(1); }
}

/* Participant count badge updated style */
.gc-participant-pill {
  position: relative;
  overflow: hidden;
}
.gc-participant-pill::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.06), transparent);
  animation: shimmer 2s ease infinite;
}
@keyframes shimmer {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* Mini group call window */
.mini-gc-window {
  position: fixed;
  bottom: 90px; right: 16px;
  width: 160px;
  z-index: 9400;
  border-radius: 20px;
  overflow: hidden;
  background: rgba(10,20,40,0.92);
  border: 1.5px solid rgba(168,85,247,0.25);
  box-shadow: 0 8px 32px rgba(0,0,0,0.6);
  backdrop-filter: blur(20px);
  display: none;
  cursor: grab;
  touch-action: none;
  user-select: none;
}
.mini-gc-window.visible { display: block; }
.mini-gc-bar {
  padding: 8px 10px;
  display: flex; align-items: center; justify-content: space-between;
  background: rgba(168,85,247,0.08);
}
.mini-gc-name {
  font-size: 11px; font-weight: 700; color: var(--text-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  flex: 1;
}
.mini-gc-count {
  font-size: 10px; color: var(--purple); font-weight: 600;
  margin: 0 6px;
}
.mini-gc-expand {
  width: 24px; height: 24px; border-radius: 50%;
  background: rgba(168,85,247,0.15);
  border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: var(--purple);
}

/* ── 7. CALL SOUND WAVE ANIMATION ────────────── */
.call-sound-wave {
  display: flex; align-items: flex-end; justify-content: center;
  gap: 4px; height: 24px; margin-top: 12px;
}
.call-sound-bar {
  width: 4px; border-radius: 2px;
  background: var(--cyan); opacity: 0.7;
  animation: soundBar 0.8s ease infinite alternate;
}
.call-sound-bar:nth-child(1) { height: 8px;  animation-delay: 0s; }
.call-sound-bar:nth-child(2) { height: 16px; animation-delay: 0.1s; }
.call-sound-bar:nth-child(3) { height: 12px; animation-delay: 0.2s; }
.call-sound-bar:nth-child(4) { height: 20px; animation-delay: 0.15s; }
.call-sound-bar:nth-child(5) { height: 8px;  animation-delay: 0.05s; }
@keyframes soundBar {
  from { transform: scaleY(0.4); }
  to   { transform: scaleY(1); }
}
.call-sound-wave.hidden { display: none; }

/* ── 8. OVERLAY TRANSITION IMPROVEMENTS ──────── */
.call-overlay {
  transition: background 500ms ease;
}
.call-overlay[style*="flex"] {
  animation: callOverlayIn 300ms cubic-bezier(0.4,0,0.2,1);
}
@keyframes callOverlayIn {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Call avatar — photo support */
.call-avatar img {
  width: 100%; height: 100%; object-fit: cover; border-radius: 50%;
}
.call-avatar.has-photo {
  padding: 0; overflow: hidden;
  background: transparent;
}

/* ── 9. LIGHT THEME FIXES ────────────────────── */
body.theme-light .incoming-call-banner {
  background: linear-gradient(160deg, #e8f0fe 0%, #f0f4fc 40%, #eef2fb 100%);
}
body.theme-light .incoming-call-banner::before {
  background:
    radial-gradient(ellipse 70% 50% at 50% 20%, rgba(0,186,207,0.08) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 80% 80%, rgba(139,92,246,0.05) 0%, transparent 60%);
}
body.theme-light .ic-caller-name { color: #0f172a; }
body.theme-light .ic-caller-label { color: rgba(15,23,42,0.55); }
body.theme-light .mini-call-window {
  background: rgba(240,244,252,0.94);
  border-color: rgba(0,186,207,0.3);
}
body.theme-light .mini-call-name { color: #0f172a; }

/* ── 10. MOBILE OPTIMIZATIONS ─────────────────── */
@media (max-width: 480px) {
  .ic-avatar { width: 96px; height: 96px; font-size: 38px; }
  .ic-caller-name { font-size: 26px; }
  .ic-btn-circle { width: 64px; height: 64px; }
  .ic-btn-circle svg { width: 26px; height: 26px; }
  .ic-btn-circle i { font-size: 22px; }
  .ic-actions { gap: 36px; }
  .mini-call-window { bottom: 80px; }
}


/* ══════════════════════════════════════════════
   ENHANCED UI FIXES — v2.1 PATCH
   Better transitions, hover effects, animations
   ══════════════════════════════════════════════ */

/* ── Global 0.3s transitions on interactive elements ── */
.chat-list-item,
.nav-item,
.swipe-tab,
.btn-google,
.btn-guest,
.icon-btn,
.send-btn,
.plus-dropdown-item,
.settings-item,
.profile-item {
  transition-duration: 0.3s !important;
  transition-timing-function: ease !important;
}

/* ── Stronger gradient header brand ── */
.header-brand {
  background: linear-gradient(135deg, #00e5ff 0%, #00ff88 45%, #a855f7 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-size: 21px;
  letter-spacing: -0.3px;
}

/* ── Header button active state animation ── */
.icon-btn {
  transition: background 0.3s ease, color 0.3s ease, transform 0.2s cubic-bezier(0.34,1.56,0.64,1) !important;
}
.icon-btn:hover {
  background: rgba(0, 229, 255, 0.1) !important;
  color: var(--cyan) !important;
  transform: scale(1.05);
}
.icon-btn:active {
  transform: scale(0.88) !important;
  transition-duration: 0.08s !important;
}

/* ── Plus dropdown — smoother open animation ── */
.plus-dropdown {
  transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.34,1.56,0.64,1), visibility 0.3s ease !important;
}
.plus-dropdown.open {
  transform: translateY(0) scale(1) !important;
}

/* ── Plus dropdown item gradient on hover ── */
.plus-dropdown-item {
  transition: background 0.3s ease, transform 0.2s ease !important;
}
.plus-dropdown-item:hover {
  background: linear-gradient(90deg, rgba(0,229,255,0.08), rgba(0,255,136,0.05)) !important;
  transform: translateX(3px);
}
.plus-dropdown-item:active {
  transform: translateX(3px) scale(0.98) !important;
}
.plus-dropdown-item svg {
  transition: transform 0.3s ease, color 0.3s ease !important;
}
.plus-dropdown-item:hover svg {
  transform: scale(1.15);
  color: var(--green) !important;
}

/* ── Chat list items — enhanced hover ── */
.chat-list-item {
  transition: background 0.3s ease, transform 0.25s ease !important;
  border-radius: 12px;
  margin: 1px 8px;
  padding: 10px 10px !important;
}
.chat-list-item:hover {
  background: linear-gradient(90deg, rgba(0,229,255,0.06), rgba(168,85,247,0.04)) !important;
  transform: translateX(2px) !important;
}
.chat-list-item:active {
  transform: scale(0.98) !important;
}

/* ── Swipe tabs — smoother active ── */
.swipe-tab {
  transition: color 0.3s ease, background 0.3s ease !important;
}
.swipe-tab.active {
  color: var(--cyan) !important;
}
.swipe-tab-indicator {
  transition: transform 0.3s cubic-bezier(0.4,0,0.2,1), width 0.3s cubic-bezier(0.4,0,0.2,1) !important;
  background: linear-gradient(90deg, var(--cyan), var(--green)) !important;
  height: 3px !important;
  border-radius: 99px !important;
}

/* ── Chat room slide-in — smoother ── */
.chat-room {
  transition: transform 0.3s cubic-bezier(0.4,0,0.2,1) !important;
}

/* ── Message bubbles — pop-in animation ── */
@keyframes bubbleIn {
  from { opacity: 0; transform: translateY(10px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.msg-row {
  animation: bubbleIn 0.25s cubic-bezier(0.34,1.56,0.64,1) !important;
}

/* ── Send button pulse on hover ── */
.send-btn {
  background: linear-gradient(135deg, #00e5ff, #00ff88) !important;
  transition: transform 0.25s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.3s ease !important;
}
.send-btn:hover {
  transform: scale(1.1) !important;
  box-shadow: 0 8px 28px rgba(0,229,255,0.45) !important;
}
.send-btn:active {
  transform: scale(0.93) !important;
}

/* ── Message input focus ring ── */
.msg-input-wrap {
  transition: border-color 0.3s ease, box-shadow 0.3s ease !important;
}
.msg-input-wrap:focus-within {
  border-color: rgba(0,229,255,0.5) !important;
  box-shadow: 0 0 0 3px rgba(0,229,255,0.08) !important;
}

/* ── Search bar focus ── */
.search-bar {
  transition: border-color 0.3s ease, box-shadow 0.3s ease !important;
}
.search-bar:focus-within {
  border-color: rgba(0,229,255,0.4) !important;
  box-shadow: 0 0 0 3px rgba(0,229,255,0.07) !important;
}

/* ── Modal overlay smooth entry ── */
.modal-overlay {
  transition: opacity 0.3s ease !important;
}
.modal, .modal-sheet {
  transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1), opacity 0.3s ease !important;
}

/* ── Upgrade banner gradient ── */
.upgrade-banner {
  background: linear-gradient(135deg, rgba(168,85,247,0.18), rgba(0,229,255,0.10), rgba(0,255,136,0.08)) !important;
  border: 1px solid rgba(168,85,247,0.3) !important;
  transition: all 0.3s ease !important;
}

/* ── Theme toggle button ── */
.theme-toggle-btn {
  transition: background 0.3s ease, transform 0.3s cubic-bezier(0.34,1.56,0.64,1) !important;
}
.theme-toggle-btn:hover {
  background: rgba(0,229,255,0.1) !important;
  transform: rotate(20deg) scale(1.1) !important;
}

/* ── FAB buttons enhanced ── */
.fab {
  transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.3s ease !important;
}
.fab:hover {
  transform: scale(1.1) translateY(-2px) !important;
}
.fab:active {
  transform: scale(0.93) !important;
}

/* ── Bottom nav items ── */
.nav-item {
  transition: background 0.3s ease, color 0.3s ease, transform 0.25s cubic-bezier(0.34,1.56,0.64,1) !important;
}
.nav-item:hover {
  transform: translateY(-2px) scale(1.05) !important;
}
.nav-item:active {
  transform: scale(0.92) !important;
}

/* ── Screen transitions ── */
.screen {
  transition: opacity 0.3s ease !important;
}

/* ── Unread badge pulse ── */
@keyframes badgePulse {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(1.12); }
}
.cl-unread {
  animation: badgePulse 2s ease infinite !important;
  background: linear-gradient(135deg, var(--cyan), var(--purple)) !important;
}

/* ── Toast improved ── */
.toast {
  transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1), opacity 0.3s ease !important;
}

/* ── Gradient border on chat room header ── */
.chat-header {
  background: var(--bg-mid) !important;
  border-bottom: 1px solid var(--glass-border) !important;
}

/* ── Online dot pulse ── */
@keyframes onlinePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0,255,136,0.4); }
  50%       { box-shadow: 0 0 0 4px rgba(0,255,136,0); }
}
.online-dot:not(.hidden) {
  animation: onlinePulse 2.5s ease infinite !important;
}
.cl-online:not(.hidden) {
  animation: onlinePulse 2.5s ease infinite !important;
}

/* ── Desktop layout improvements ── */
@media (min-width: 768px) {
  .app-container {
    border-radius: 0 !important;
    box-shadow: 0 0 80px rgba(0,0,0,0.5) !important;
  }
  .chat-list-item {
    margin: 1px 6px !important;
  }
  .msg-bubble {
    max-width: min(65%, 420px) !important;
  }
}

/* ── Mobile WhatsApp-like input area ── */
@media (max-width: 767px) {
  .msg-input-area {
    padding: 8px 10px max(10px, env(safe-area-inset-bottom)) !important;
  }
  .chat-list-item {
    margin: 1px 4px !important;
    border-radius: 10px !important;
  }
}

/* ══════════════════════════════════════════════
   VIBEUIN v2.1 — ENHANCEMENTS
   VC Button · Media Modal · E2E · Call Fix · Layout
   ══════════════════════════════════════════════ */

/* ── VC - Vibe Connect Button ─────────────── */
.vc-vibe-connect-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 28px;
  border-radius: 99px;
  background: linear-gradient(135deg, #00e5ff 0%, #a855f7 100%);
  color: var(--bg-deep);
  font-size: 14px;
  font-weight: 800;
  font-family: var(--font-head);
  letter-spacing: 0.3px;
  border: none;
  cursor: pointer;
  margin-top: 16px;
  box-shadow: 0 6px 28px rgba(0,229,255,0.35), 0 2px 8px rgba(168,85,247,0.2);
  transition: all 200ms cubic-bezier(0.34,1.2,0.64,1);
  position: relative;
  overflow: hidden;
}
.vc-vibe-connect-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.2), transparent);
  opacity: 0;
  transition: opacity 150ms;
}
.vc-vibe-connect-btn:hover {
  transform: scale(1.06) translateY(-1px);
  box-shadow: 0 10px 36px rgba(0,229,255,0.5), 0 4px 14px rgba(168,85,247,0.3);
}
.vc-vibe-connect-btn:hover::before { opacity: 1; }
.vc-vibe-connect-btn:active { transform: scale(0.96); transition-duration: 80ms; }
.vc-vibe-connect-btn svg { flex-shrink: 0; }

/* ── E2E Encrypted Label ──────────────────── */
.e2e-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 11px;
  color: var(--text-muted);
  padding: 7px 12px;
  border-bottom: 1px solid var(--glass-border);
  flex-shrink: 0;
  background: rgba(0,255,136,0.02);
  letter-spacing: 0.2px;
  user-select: none;
}
.e2e-label i {
  color: var(--green);
  font-size: 9px;
}
body.theme-light .e2e-label {
  background: rgba(0,180,100,0.03);
}

/* ── Custom Media Modal ───────────────────── */
.media-modal {
  position: fixed;
  inset: 0;
  z-index: 9200;
  display: none;
  align-items: center;
  justify-content: center;
}
.media-modal.open {
  display: flex;
  animation: mediaModalFadeIn 200ms ease forwards;
}
@keyframes mediaModalFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.media-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.96);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  cursor: zoom-out;
}
.media-modal-content {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 96vw;
  max-height: 92dvh;
  animation: mediaContentIn 280ms cubic-bezier(0.34,1.2,0.64,1);
}
@keyframes mediaContentIn {
  from { transform: scale(0.82); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}
.media-modal-content img {
  max-width: 92vw;
  max-height: 86dvh;
  border-radius: 14px;
  object-fit: contain;
  box-shadow: 0 24px 80px rgba(0,0,0,0.7);
  display: block;
}
.media-modal-video-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  max-width: 92vw;
}
.media-modal-video-wrap video {
  max-width: 92vw;
  max-height: 78dvh;
  border-radius: 14px;
  background: #000;
  box-shadow: 0 24px 80px rgba(0,0,0,0.7);
  outline: none;
}
.media-modal-close,
.media-modal-download {
  position: fixed;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(20,20,30,0.85);
  border: 1px solid rgba(255,255,255,0.15);
  color: white;
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: all 150ms ease;
  z-index: 9300;
  box-shadow: 0 4px 20px rgba(0,0,0,0.5);
}
.media-modal-close  { top: 18px; right: 18px; }
.media-modal-download { top: 18px; right: 72px; color: var(--cyan); border-color: rgba(0,229,255,0.3); }
.media-modal-close:hover { background: rgba(248,113,113,0.3); color: #f87171; transform: scale(1.1); }
.media-modal-download:hover { background: rgba(0,229,255,0.2); transform: scale(1.1); }
.media-modal-close:active, .media-modal-download:active { transform: scale(0.92); }

/* Custom video controls overlay */
.custom-video-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: 92vw;
  padding: 8px 14px;
  background: rgba(0,0,0,0.6);
  border-radius: 12px;
  backdrop-filter: blur(8px);
}
.vid-ctrl-btn {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
  border: none;
  color: white;
  font-size: 14px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 120ms, transform 120ms;
}
.vid-ctrl-btn:hover { background: rgba(255,255,255,0.25); }
.vid-ctrl-btn:active { transform: scale(0.9); }
.vid-progress-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
}
.vid-progress-bar {
  flex: 1;
  height: 4px;
  background: rgba(255,255,255,0.2);
  border-radius: 99px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.vid-progress-fill {
  height: 100%;
  background: var(--grad-btn);
  border-radius: 99px;
  width: 0%;
  transition: width 100ms linear;
}
.vid-time {
  font-size: 11px;
  color: rgba(255,255,255,0.7);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ── Profile Hero Enhanced ────────────────── */
.profile-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 28px 20px 20px;
  text-align: center;
  position: relative;
}
.profile-hero::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 120px;
  background: linear-gradient(180deg, rgba(0,229,255,0.06) 0%, transparent 100%);
  pointer-events: none;
  border-radius: 0;
}
.profile-avatar-wrap {
  position: relative;
  margin-bottom: 14px;
}
.profile-avatar {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: var(--grad-main);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 34px;
  font-weight: 800;
  color: var(--bg-deep);
  overflow: hidden;
  box-shadow:
    0 0 0 3px var(--bg-deep),
    0 0 0 5px rgba(0,229,255,0.3),
    0 8px 32px rgba(0,0,0,0.4);
  transition: box-shadow var(--anim-med);
}
.profile-avatar:hover {
  box-shadow:
    0 0 0 3px var(--bg-deep),
    0 0 0 5px rgba(0,229,255,0.5),
    0 12px 40px rgba(0,229,255,0.2);
}
.profile-avatar img {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
.avatar-edit-btn {
  position: absolute;
  bottom: 0; right: 0;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--grad-btn);
  border: 2px solid var(--bg-deep);
  color: var(--bg-deep);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px;
  cursor: pointer;
  transition: transform var(--anim-fast);
  box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}
.avatar-edit-btn:hover { transform: scale(1.15); }

.profile-name-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}
.profile-name {
  font-family: var(--font-head);
  font-size: 22px;
  font-weight: 800;
  color: var(--text-primary);
}
.edit-inline-btn {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--glass);
  border: 1px solid var(--glass-border);
  color: var(--text-muted);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  font-size: 10px;
  transition: all var(--anim-fast);
  flex-shrink: 0;
}
.edit-inline-btn:hover { background: rgba(0,229,255,0.12); color: var(--cyan); border-color: rgba(0,229,255,0.3); }
.edit-inline-btn.small { width: 22px; height: 22px; }

.profile-email {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.profile-bio-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  max-width: 260px;
  margin-bottom: 8px;
}
.profile-bio {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.5;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 6px;
  transition: background var(--anim-fast);
}
.profile-bio:hover { background: var(--glass); }
.profile-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: 99px;
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 4px;
}

/* ── Fix desktop msg input overlap ───────── */
@media (min-width: 768px) {
  .msg-input-area {
    padding: 12px 20px 14px;
    gap: 10px;
    align-items: flex-end;
  }
  .msg-input-wrap {
    padding: 8px 14px;
    min-height: 46px;
  }
  .send-btn {
    width: 46px;
    height: 46px;
    flex-shrink: 0;
    margin-bottom: 0;
    align-self: flex-end;
  }
  .emoji-btn, .attach-btn {
    width: 34px;
    height: 34px;
  }
}

/* ── Message bubble entrance animation ────── */
.msg-item {
  animation: bubbleIn 220ms cubic-bezier(0.34,1.1,0.64,1);
  animation-fill-mode: both;
}
@keyframes bubbleIn {
  from { opacity: 0; transform: translateY(10px) scale(0.94); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── Delete message animation ─────────────── */
.msg-item.deleting {
  animation: msgDelete 320ms ease forwards;
  pointer-events: none;
  overflow: hidden;
}
@keyframes msgDelete {
  0%   { opacity: 1; transform: scale(1) translateX(0); max-height: 300px; }
  35%  { opacity: 0; transform: scale(0.88) translateX(16px); }
  100% { opacity: 0; max-height: 0; margin: 0; padding: 0; }
}

/* ── Reply bar improved ───────────────────── */
.reply-bar {
  border-left: 3px solid var(--cyan);
  border-radius: 0;
  animation: replyBarIn 160ms cubic-bezier(0.34,1.2,0.64,1);
}
@keyframes replyBarIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.reply-bar-name { letter-spacing: 0.3px; }
.reply-bar-text {
  max-width: 240px;
  font-size: 12.5px;
}

/* ── Archive smooth interaction ──────────── */
.chat-list-item.archiving {
  animation: archiveOut 350ms cubic-bezier(0.4,0,1,1) forwards;
}
@keyframes archiveOut {
  0%   { opacity: 1; transform: translateX(0); max-height: 80px; }
  50%  { opacity: 0; transform: translateX(-24px); }
  100% { opacity: 0; max-height: 0; margin: 0; padding: 0; overflow: hidden; }
}

/* ── Incoming call banner persistent fix ─── */
.incoming-call-banner {
  /* Ensure always on top and pointer events work */
  z-index: 9800 !important;
  pointer-events: none;
}
.incoming-call-banner.show {
  pointer-events: all !important;
}
.incoming-call-banner .ic-actions {
  pointer-events: all !important;
}
.ic-btn.accept, .ic-btn.reject {
  pointer-events: all !important;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* ── Theme icon fix — only show correct icon ── */
/* (These rules reinforce the existing correct behavior) */
.theme-icon-light { display: none !important; }
body.theme-light .theme-icon-dark { display: none !important; }
body.theme-light .theme-icon-light { display: inline-flex !important; }

/* ── Chat header E2E awareness ─────────────── */
.chat-header.e2e-active {
  border-bottom-color: rgba(0,255,136,0.12);
}

/* ── Smooth transitions ───────────────────── */
.chat-list-item {
  transition: background var(--anim-fast), transform 80ms ease, opacity var(--anim-med);
}
.msg-bubble {
  transition: opacity var(--anim-fast);
}

/* ── Mobile improvements ──────────────────── */
@media (max-width: 480px) {
  .media-modal-close  { top: 14px; right: 14px; width: 42px; height: 42px; font-size: 16px; }
  .media-modal-download { top: 14px; right: 64px; width: 42px; height: 42px; }
  .vc-vibe-connect-btn { padding: 12px 22px; font-size: 13px; }
}

/* ── Desktop chat input — no overlap fix ──── */
@media (min-width: 768px) {
  .chat-room .msg-input-area {
    position: relative;
    z-index: 2;
  }
  .msg-input-wrap {
    position: relative;
    z-index: 1;
  }
  /* Fix: ensure send btn never overlaps attach btn */
  .attach-btn {
    order: 2;
  }
  .emoji-btn {
    order: 0;
  }
  .msg-input {
    order: 1;
  }
}

/* ── VYN ID card improvements ─────────────── */
.vibe-id-card {
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: border-color var(--anim-fast), box-shadow var(--anim-fast);
}
.vibe-id-card:hover {
  border-color: rgba(0,229,255,0.2);
  box-shadow: 0 4px 16px rgba(0,0,0,0.2);
}
.vibe-id-label {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 700;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.id-badge {
  font-size: 9px;
  padding: 2px 6px;
  background: rgba(0,229,255,0.12);
  color: var(--cyan);
  border-radius: 99px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.vibe-id-value {
  font-family: var(--font-head);
  font-size: 22px;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: 0.5px;
}
.vibe-id-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}
.vibe-id-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 7px 12px;
  border-radius: var(--radius-sm);
  background: var(--glass);
  border: 1px solid var(--glass-border);
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--anim-fast);
  white-space: nowrap;
}
.vibe-id-btn svg { width: 14px; height: 14px; }
.vibe-id-btn:hover { background: var(--glass-strong); color: var(--cyan); border-color: rgba(0,229,255,0.3); }
.vibe-id-btn:active { transform: scale(0.94); }

/* ══════════════════════════════════════════════
   VIBEUIN v2.2 — VC SCANNER SYSTEM
   VC - Vibe Connect overlay, frame, animations
   ══════════════════════════════════════════════ */

/* ── VC Scanner Overlay ───────────────────────── */
.vc-scan-overlay {
  position: fixed;
  inset: 0;
  z-index: 9600;
  display: none;
  align-items: center;
  justify-content: center;
}
.vc-scan-overlay.open {
  display: flex;
  animation: vcOverlayIn 220ms ease forwards;
}
@keyframes vcOverlayIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ── Backdrop ─────────────────────────────────── */
.vc-scan-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(5, 11, 24, 0.97);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

/* ── Container ────────────────────────────────── */
.vc-scan-container {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 440px;
  padding: 0 0 env(safe-area-inset-bottom, 0);
  animation: vcContainerIn 280ms cubic-bezier(0.34, 1.2, 0.64, 1) forwards;
}
@keyframes vcContainerIn {
  from { transform: translateY(24px) scale(0.96); opacity: 0; }
  to   { transform: translateY(0) scale(1);       opacity: 1; }
}

/* ── Header ───────────────────────────────────── */
.vc-scan-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 20px 20px 16px;
}
.vc-scan-logo {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-head);
  font-size: 16px;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: 0.2px;
}
.vc-scan-logo svg {
  color: var(--cyan);
}
.vc-scan-close {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 150ms ease;
  flex-shrink: 0;
}
.vc-scan-close:hover  { background: rgba(248,113,113,0.2); color: #f87171; border-color: rgba(248,113,113,0.3); }
.vc-scan-close:active { transform: scale(0.9); }

/* ── Camera View Wrapper ──────────────────────── */
.vc-scan-view-wrap {
  position: relative;
  width: min(88vw, 360px);
  aspect-ratio: 1 / 1;
  border-radius: 20px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 0 0 2px rgba(0,229,255,0.15), 0 24px 80px rgba(0,0,0,0.7);
}
.vc-scan-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.vc-scan-canvas-hidden {
  display: none;
}

/* ── Scan Frame Overlay ───────────────────────── */
.vc-scan-frame-wrap {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  background: radial-gradient(
    ellipse 64% 64% at 50% 50%,
    transparent 40%,
    rgba(5,11,24,0.55) 100%
  );
}
.vc-scan-frame {
  position: relative;
  width: 62%;
  aspect-ratio: 1 / 1;
  border-radius: 6px;
  transition: box-shadow 300ms ease;
}
.vc-scan-frame.detected {
  box-shadow: 0 0 0 3px var(--green), 0 0 32px rgba(0,255,136,0.4);
}

/* Corner markers */
.vc-corner {
  position: absolute;
  width: 22px;
  height: 22px;
  border-color: var(--cyan);
  border-style: solid;
}
.vc-corner.tl { top: 0; left: 0;  border-width: 3px 0 0 3px; border-radius: 4px 0 0 0; }
.vc-corner.tr { top: 0; right: 0; border-width: 3px 3px 0 0; border-radius: 0 4px 0 0; }
.vc-corner.bl { bottom: 0; left: 0;  border-width: 0 0 3px 3px; border-radius: 0 0 0 4px; }
.vc-corner.br { bottom: 0; right: 0; border-width: 0 3px 3px 0; border-radius: 0 0 4px 0; }

/* Scan line */
.vc-scan-line {
  position: absolute;
  left: 4%;
  right: 4%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--cyan), var(--green), var(--cyan), transparent);
  border-radius: 99px;
  animation: vcScanLineMove 2s ease-in-out infinite;
  box-shadow: 0 0 8px rgba(0,229,255,0.6);
}
@keyframes vcScanLineMove {
  0%   { top: 8%;  opacity: 1; }
  50%  { top: 88%; opacity: 0.85; }
  100% { top: 8%;  opacity: 1; }
}

/* ── Footer ───────────────────────────────────── */
.vc-scan-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 20px 20px 24px;
  width: 100%;
}
.vc-scan-status {
  font-family: var(--font-head);
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  text-align: center;
  min-height: 22px;
  transition: color 200ms ease;
}
.vc-scan-status.error {
  color: #f87171;
}
.vc-scan-hint {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-muted);
  text-align: center;
}
.vc-scan-hint svg {
  flex-shrink: 0;
  color: var(--cyan);
  opacity: 0.7;
}
.vc-scan-show-mine {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 22px;
  border-radius: 99px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 180ms ease;
  margin-top: 4px;
}
.vc-scan-show-mine:hover {
  background: rgba(0,229,255,0.1);
  color: var(--cyan);
  border-color: rgba(0,229,255,0.3);
}
.vc-scan-show-mine:active { transform: scale(0.96); }

/* ── Mobile full-screen on small screens ───────── */
@media (max-width: 480px) {
  .vc-scan-container {
    max-width: 100%;
    padding-bottom: max(16px, env(safe-area-inset-bottom));
  }
  .vc-scan-view-wrap {
    width: 92vw;
  }
}

/* ── CP action VC button ─────────────────────── */
.cp-action-vc {
  color: var(--purple) !important;
}
.cp-action-vc svg {
  stroke: var(--purple);
}
.cp-action-vc:hover {
  background: rgba(168,85,247,0.12) !important;
  border-color: rgba(168,85,247,0.3) !important;
}