:root {
  --bg:      #04040d;
  --bg2:     #08091a;
  --bg3:     #0e1028;
  --bg4:     #131530;
  --accent:  #d42828;
  --accent2: #ff4455;
  --text:    #dde0f5;
  --text2:   #7880a8;
  --border:  #1c1f40;
  --card:    #090b1e;
  --glow:    rgba(212,40,40,0.22);
  --nebula1: rgba(80,40,160,0.10);
  --nebula2: rgba(30,60,160,0.08);
  --star-glow: rgba(160,180,255,0.12);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Segoe UI', sans-serif;
  min-height: 100vh;
  overflow-x: hidden;
}
body::before {
  content: '';
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 80% 50% at 15% 20%, rgba(80,30,160,0.13) 0%, transparent 60%),
    radial-gradient(ellipse 60% 40% at 85% 75%, rgba(20,50,180,0.10) 0%, transparent 55%),
    radial-gradient(ellipse 50% 60% at 50% 100%, rgba(140,20,80,0.08) 0%, transparent 50%);
}
a { color: inherit; text-decoration: none; }

/* ── SCROLLBAR ── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg2); }
::-webkit-scrollbar-thumb { background: #333355; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }

/* ── PARTICLES ── */
#particles-canvas { position: fixed; inset: 0; z-index: 0; pointer-events: none; }

/* ── NAV ── */
nav {
  background: rgba(4,4,13,0.88);
  border-bottom: 1px solid rgba(100,100,220,0.12);
  backdrop-filter: blur(16px);

  position: sticky; top: 0; z-index: 200;
  padding: 0 36px;
  display: flex; align-items: center; height: 62px; gap: 16px;
}
.nav-logo {
  font-size: 20px; font-weight: 900;
  color: var(--accent2); letter-spacing: 0.5px;
  margin-right: 44px;
  text-shadow: 0 0 24px rgba(255,68,68,0.45);
  cursor: pointer;
  transition: opacity 0.2s;
}
.nav-logo:hover { opacity: 0.8; }
.nav-links { display: flex; gap: 2px; flex: 1; }
.nav-links a {
  padding: 8px 16px; border-radius: 7px;
  color: var(--text2); font-size: 14px; font-weight: 500;
  transition: all 0.2s;
}
.nav-links a:hover, .nav-links a.active { background: rgba(255,255,255,0.06); color: var(--text); }
.nav-right { display: flex; gap: 10px; align-items: center; }

/* ── BUTTONS ── */
.btn {
  padding: 8px 18px; border-radius: 8px;
  font-size: 14px; font-weight: 600;
  cursor: pointer; border: none;
  transition: all 0.22s; display: inline-flex; align-items: center; justify-content: center; gap: 6px; text-align: center;
}
.btn-outline {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text2);
}
.btn-outline:hover { border-color: var(--accent); color: var(--accent2); }
.btn-red {
  background: linear-gradient(135deg, var(--accent) 0%, #c02020 100%);
  color: #fff; position: relative; overflow: hidden;
}
.btn-red::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, transparent 60%);
  opacity: 0; transition: opacity 0.22s;
}
.btn-red:hover::after { opacity: 1; }
.btn-red:hover { background: linear-gradient(135deg, var(--accent2) 0%, var(--accent) 100%); transform: translateY(-2px); box-shadow: 0 6px 24px rgba(224,48,48,0.5); }
.btn-red:active { transform: translateY(0); box-shadow: 0 2px 10px rgba(224,48,48,0.3); }
.btn-lg { padding: 13px 30px; font-size: 15px; border-radius: 10px; }

/* ── HERO ── */
.hero {
  min-height: calc(100vh - 62px);
  display: flex; align-items: center; justify-content: center;
  text-align: center; position: relative; overflow: hidden; padding: 80px 32px;
  z-index: 1;
}
.hero-glow {
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(ellipse 70% 50% at 50% 40%, rgba(224,48,48,0.09) 0%, transparent 70%),
    radial-gradient(ellipse 35% 35% at 20% 85%, rgba(80,40,180,0.07) 0%, transparent 60%);
}
.hero-content { position: relative; z-index: 1; max-width: 720px; }

.hero-badge {
  display: inline-flex; align-items: center; gap: 7px;
  background: rgba(224,48,48,0.12);
  border: 1px solid rgba(224,48,48,0.28);
  color: var(--accent2);
  padding: 6px 18px; border-radius: 24px;
  font-size: 12px; font-weight: 700; letter-spacing: 1.5px;
  text-transform: uppercase; margin-bottom: 28px;
  animation: fadeSlideDown 0.6s ease both;
}
.badge-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent2);
  animation: pulse-dot 2s infinite;
}
@keyframes pulse-dot { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.5;transform:scale(0.7)} }

.hero h1 {
  font-size: clamp(52px, 9vw, 88px); font-weight: 900; line-height: 0.95;
  margin-bottom: 22px;
  animation: fadeSlideUp 0.7s 0.1s ease both;
}
.hero h1 .red { color: var(--accent2); }
.hero p {
  font-size: 17px; color: var(--text2); margin-bottom: 40px; line-height: 1.65;
  animation: fadeSlideUp 0.7s 0.2s ease both;
}
.hero-btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; animation: fadeSlideUp 0.7s 0.3s ease both; }

@keyframes fadeSlideDown { from{opacity:0;transform:translateY(-16px)} to{opacity:1;transform:translateY(0)} }
@keyframes fadeSlideUp { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }

/* ── REVEAL ON SCROLL ── */
.reveal {
  opacity: 0; transform: translateY(32px);
  transition: opacity 0.65s ease, transform 0.65s ease;
}
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }

/* ── SECTIONS ── */
.section { padding: 80px 32px; max-width: 1200px; margin: 0 auto; position: relative; z-index: 1; }
.section-title { font-size: 30px; font-weight: 800; margin-bottom: 6px; }
.section-sub { color: var(--text2); margin-bottom: 44px; font-size: 15px; }

/* ── STATS ── */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 16px; margin: 56px 0; }
.stat {
  text-align: center; padding: 28px 16px;
  background: var(--card); border: 1px solid var(--border); border-radius: 14px;
  transition: border-color 0.3s, transform 0.3s;
}
.stat:hover { border-color: rgba(224,48,48,0.35); transform: translateY(-3px); }
.stat-num {
  font-size: 38px; font-weight: 900; color: var(--accent2); display: block;
  text-shadow: 0 0 16px rgba(255,68,68,0.35);
}
.stat-label { color: var(--text2); font-size: 13px; margin-top: 5px; }

/* ── CARDS ── */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; }
.card {
  background: var(--card); border: 1px solid var(--border); border-radius: 14px;
  padding: 26px; transition: all 0.3s;
}
.card:hover { border-color: rgba(224,48,48,0.38); transform: translateY(-4px); box-shadow: 0 8px 28px rgba(224,48,48,0.09); }
.card-icon { font-size: 30px; margin-bottom: 14px; }
.card h3 { font-size: 17px; font-weight: 700; margin-bottom: 8px; }
.card p { color: var(--text2); font-size: 14px; line-height: 1.6; }

/* ── DIVIDER ── */
.divider { height: 1px; background: linear-gradient(90deg, transparent, var(--border), transparent); margin: 0 32px; position: relative; z-index: 1; }

/* ── FOOTER ── */
footer {
  padding: 48px 36px 32px; border-top: 1px solid var(--border);
  position: relative; z-index: 1;
}
.footer-top {
  display: flex; justify-content: space-between; align-items: flex-start;
  flex-wrap: wrap; gap: 32px; margin-bottom: 32px;
}
.footer-brand .footer-logo { font-size: 22px; font-weight: 900; color: var(--accent2); margin-bottom: 8px; }
.footer-brand p { color: var(--text2); font-size: 13px; max-width: 280px; line-height: 1.6; }
.footer-links-group h4 { font-size: 12px; font-weight: 700; color: var(--text2); text-transform: uppercase; letter-spacing: 1.2px; margin-bottom: 12px; }
.footer-links-group a { display: block; color: var(--text2); font-size: 14px; margin-bottom: 8px; transition: color 0.2s; }
.footer-links-group a:hover { color: var(--accent2); }
.footer-social { display: flex; gap: 10px; margin-top: 12px; }
.social-btn {
  width: 38px; height: 38px; border-radius: 9px;
  background: var(--bg3); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; transition: all 0.2s; cursor: pointer;
}
.social-btn:hover { border-color: var(--accent); transform: translateY(-2px); }
.footer-bottom {
  border-top: 1px solid var(--border); padding-top: 20px;
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 12px; color: var(--text2); font-size: 13px;
}
.footer-support-links { display: flex; gap: 20px; }
.footer-support-links a { color: var(--text2); font-size: 13px; transition: color 0.2s; }
.footer-support-links a:hover { color: var(--accent2); }

/* ── AUTH MODAL ── */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.85); backdrop-filter: blur(10px);
  z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity 0.22s;
  padding: 16px;
}
.modal-overlay.open { opacity: 1; pointer-events: all; }

@keyframes modal-glow-pulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(224,48,48,0), 0 32px 80px rgba(0,0,0,0.6); }
  50%      { box-shadow: 0 0 0 2px rgba(224,48,48,0.18), 0 32px 80px rgba(0,0,0,0.6); }
}
@keyframes modal-shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}
@keyframes logo-float {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-3px); }
}

.modal {
  background: var(--bg2);
  border: 1px solid rgba(224,48,48,0.2);
  border-radius: 20px;
  width: 100%; max-width: 420px; position: relative;
  transform: translateY(32px) scale(0.94);
  transition: transform 0.32s cubic-bezier(0.34,1.56,0.64,1), opacity 0.22s;
  overflow: hidden;
  animation: modal-glow-pulse 3s ease-in-out infinite;
}
.modal-overlay.open .modal { transform: translateY(0) scale(1); }

/* тонкая светящаяся линия сверху */
.modal::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(224,48,48,0.8), rgba(255,100,100,1), rgba(224,48,48,0.8), transparent);
  background-size: 400px 2px;
  animation: modal-shimmer 2.5s linear infinite;
}

.modal-header {
  background: linear-gradient(135deg, rgba(224,48,48,0.15) 0%, rgba(80,40,180,0.1) 50%, rgba(224,48,48,0.08) 100%);
  border-bottom: 1px solid rgba(224,48,48,0.15);
  padding: 28px 28px 22px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
/* Блики в хедере */
.modal-header::after {
  content: '';
  position: absolute; top: -60px; left: 50%; transform: translateX(-50%);
  width: 200px; height: 120px;
  background: radial-gradient(ellipse, rgba(224,48,48,0.12) 0%, transparent 70%);
  pointer-events: none;
}
.modal-header-logo {
  font-size: 24px; font-weight: 900; color: var(--accent2);
  letter-spacing: 1px; margin-bottom: 6px;
  text-shadow: 0 0 30px rgba(255,68,68,0.6), 0 0 60px rgba(255,68,68,0.2);
  animation: logo-float 3s ease-in-out infinite;
  display: inline-block;
}
.modal-header-sub { font-size: 12px; color: var(--text2); letter-spacing: 0.3px; }

.modal-body { padding: 24px 28px 28px; }
.modal-forms-wrap {
  overflow: hidden;
  transition: height 0.32s cubic-bezier(0.4,0,0.2,1);
}
.modal-form-slide {
  transition: opacity 0.2s, transform 0.28s cubic-bezier(0.4,0,0.2,1);
}
.modal-form-slide.hidden {
  opacity: 0; pointer-events: none;
  transform: translateY(8px);
  position: absolute; width: 100%;
}

.modal-tabs {
  display: flex; gap: 0; margin-bottom: 22px; width: 100%;
  background: var(--bg3); border-radius: 10px; padding: 3px;
  position: relative;
}
.modal-tab-indicator {
  position: absolute; top: 3px; bottom: 3px;
  width: calc(50% - 3px);
  background: var(--bg2);
  border-radius: 8px;
  box-shadow: 0 1px 6px rgba(0,0,0,0.5);
  transition: transform 0.28s cubic-bezier(0.34,1.4,0.64,1);
  pointer-events: none;
  left: 3px;
}
.modal-tab-indicator.right { transform: translateX(calc(100% + 0px)); }
.modal-tab {
  flex: 1; padding: 9px; cursor: pointer; font-size: 13px; font-weight: 600;
  color: var(--text2); border-radius: 8px; text-align: center;
  transition: color 0.22s; border: none; background: none;
  user-select: none; position: relative; z-index: 1;
}
.modal-tab:hover:not(.active) { color: var(--text); }
.modal-tab.active { color: var(--text); }

.form-group { margin-bottom: 14px; }
.form-group label {
  display: block; font-size: 11px; color: var(--text2);
  margin-bottom: 6px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase;
}
.form-group input {
  width: 100%; background: var(--bg3); border: 1px solid var(--border);
  border-radius: 10px; padding: 11px 14px; color: var(--text); font-size: 14px; outline: none;
  transition: border-color 0.22s, box-shadow 0.22s, background 0.22s;
  box-sizing: border-box;
}
.form-group input:hover { border-color: rgba(224,48,48,0.3); }
.form-group input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(224,48,48,0.14);
  background: rgba(224,48,48,0.04);
}

.form-error { color: #ff6060; font-size: 12px; margin-bottom: 10px; display: none; padding: 8px 12px; background: rgba(255,60,60,0.08); border-radius: 7px; border: 1px solid rgba(255,60,60,0.2); }
.form-error.show { display: block; animation: shake 0.35s ease; }
@keyframes shake {
  0%,100% { transform: translateX(0); }
  20%     { transform: translateX(-5px); }
  40%     { transform: translateX(5px); }
  60%     { transform: translateX(-4px); }
  80%     { transform: translateX(4px); }
}

.modal-close {
  position: absolute; top: 14px; right: 16px; z-index: 10;
  background: rgba(255,255,255,0.06); border: 1px solid var(--border);
  color: var(--text2); font-size: 16px; cursor: pointer;
  width: 28px; height: 28px; border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.2s; line-height: 1;
}
.modal-close:hover { background: rgba(224,48,48,0.15); border-color: rgba(224,48,48,0.4); color: #ff6060; transform: rotate(90deg); }
.modal-switch { text-align: center; margin-top: 14px; font-size: 13px; color: var(--text2); }
.modal-switch a { color: var(--accent2); cursor: pointer; transition: all 0.2s; }
.modal-switch a:hover { opacity: 0.8; text-decoration: underline; }
.modal-divider {
  display: flex; align-items: center; gap: 10px; margin: 16px 0;
  color: var(--text2); font-size: 11px;
}
.modal-divider::before, .modal-divider::after {
  content: ''; flex: 1; height: 1px; background: var(--border);
}

/* ── USER NAV ── */
.user-btn {
  display: flex; align-items: center; gap: 9px;
  padding: 6px 12px; background: var(--bg3); border: 1px solid var(--border);
  border-radius: 9px; cursor: pointer; transition: border-color 0.2s; text-decoration: none;
}
.user-btn:hover { border-color: var(--accent); }
.user-avatar {
  width: 30px; height: 30px; border-radius: 50%; background: var(--accent);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; color: #fff; overflow: hidden; flex-shrink: 0;
}
.user-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 50%; }
.rubins-badge { font-size: 12px; color: #ffcc44; font-weight: 700; }

/* ── ПОИСК В НАВБАРЕ ── */
.nav-search {
  position: relative;
  flex: 0 1 220px;
}
.nav-search input {
  width: 100%; background: var(--bg3); border: 1px solid var(--border);
  border-radius: 9px; color: var(--text); padding: 7px 13px;
  font-size: 13px; outline: none; transition: border-color 0.2s;
  box-sizing: border-box;
}
.nav-search input:focus { border-color: var(--accent); }
.nav-search input::placeholder { color: var(--text2); }
.nav-search-results {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0;
  background: var(--bg2); border: 1px solid var(--border); border-radius: 12px;
  overflow: hidden; z-index: 200; display: none; box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
.nav-search-results.open { display: block; }
.search-result-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; text-decoration: none; color: var(--text);
  transition: background 0.15s;
}
.search-result-item:hover { background: var(--bg3); }
.search-result-ava {
  width: 34px; height: 34px; border-radius: 50%; background: var(--accent);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; color: #fff; overflow: hidden; flex-shrink: 0;
}
.search-result-ava img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
.search-result-name { font-size: 14px; font-weight: 600; }
.search-result-role { font-size: 11px; color: var(--text2); margin-top: 2px; }
.search-empty { padding: 12px 14px; color: var(--text2); font-size: 13px; }
.search-history-label { padding: 8px 14px 4px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; color: var(--text2); }

/* ── ROLE BADGES ── */
.role-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px; border-radius: 6px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.4px;
  white-space: nowrap; transition: filter 0.2s;
}
.role-badge:hover { filter: brightness(1.15); }
.role-icon { font-size: 12px; }

/* ♛ Основатель — золото с блеском */
.role-founder {
  background: linear-gradient(135deg, rgba(255,210,0,0.2), rgba(255,160,0,0.12));
  border: 1px solid rgba(255,200,0,0.5);
  color: #ffd700;
  text-shadow: 0 0 8px rgba(255,200,0,0.4);
  box-shadow: 0 0 8px rgba(255,200,0,0.1);
}
/* ⚙ Спец. Администратор — красный */
.role-spec_admin {
  background: linear-gradient(135deg, rgba(224,48,48,0.2), rgba(180,0,0,0.1));
  border: 1px solid rgba(224,48,48,0.5);
  color: #ff6060;
  text-shadow: 0 0 6px rgba(224,48,48,0.3);
}
/* ✦ Хелпер — синий */
.role-helper {
  background: linear-gradient(135deg, rgba(0,180,255,0.15), rgba(0,100,200,0.1));
  border: 1px solid rgba(0,180,255,0.4);
  color: #40c8ff;
}
/* ⚗ Тестировщик — фиолетовый */
.role-tester {
  background: linear-gradient(135deg, rgba(180,60,255,0.15), rgba(120,0,200,0.1));
  border: 1px solid rgba(180,60,255,0.4);
  color: #c060ff;
}
/* 🎬 Медиа — розово-пурпурный */
.role-media {
  background: linear-gradient(135deg, rgba(255,60,180,0.15), rgba(180,0,140,0.1));
  border: 1px solid rgba(255,60,180,0.4);
  color: #ff60c8;
}
/* 💎 Спонсор — янтарный */
.role-sponsor {
  background: linear-gradient(135deg, rgba(255,160,0,0.15), rgba(200,100,0,0.1));
  border: 1px solid rgba(255,160,0,0.4);
  color: #ffaa30;
}
/* ◈ Пользователь — серый */
.role-user {
  background: rgba(120,120,160,0.1);
  border: 1px solid rgba(120,120,160,0.2);
  color: #7878a0;
}

/* ── TOPIC STATUS ── */
.topic-status {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px; border-radius: 6px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.3px; white-space: nowrap;
}
.status-pending  { background: rgba(255,180,0,0.12); border: 1px solid rgba(255,180,0,0.35); color: #ffbb30; }
.status-reviewed { background: rgba(0,180,255,0.1);  border: 1px solid rgba(0,180,255,0.3);  color: #40c8ff; }
.status-approved { background: rgba(0,200,80,0.12);  border: 1px solid rgba(0,200,80,0.3);   color: #30dd70; }
.status-rejected { background: rgba(224,48,48,0.12); border: 1px solid rgba(224,48,48,0.3);  color: #ff6060; }
.status-info     { background: rgba(180,60,255,0.1); border: 1px solid rgba(180,60,255,0.3); color: #c060ff; }
.status-closed   { background: rgba(120,120,160,0.1); border: 1px solid rgba(120,120,160,0.2); color: #888; }

/* ── STATUS PICKER (в модалке создания темы) ── */
.status-picker {
  display: flex; flex-wrap: wrap; gap: 8px;
}
.status-option {
  padding: 6px 12px; border-radius: 8px; cursor: pointer;
  border: 2px solid transparent; background: var(--bg3);
  transition: all 0.18s;
}
.status-option:hover { border-color: rgba(224,48,48,0.3); }
.status-option.selected { border-color: var(--accent); background: rgba(224,48,48,0.08); }

/* ── RICH TEXT EDITOR ── */
.rte-wrap {
  border: 1px solid var(--border); border-radius: 10px; overflow: hidden;
  background: var(--bg3); transition: border-color 0.2s;
}
.rte-wrap:focus-within { border-color: var(--accent); }
.rte-toolbar {
  display: flex; align-items: center; gap: 2px; flex-wrap: wrap;
  padding: 8px 10px; border-bottom: 1px solid var(--border);
  background: rgba(0,0,0,0.2);
}
.rte-toolbar button {
  min-width: 30px; height: 28px; padding: 0 6px;
  background: transparent; border: 1px solid transparent;
  border-radius: 5px; color: var(--text2); cursor: pointer;
  font-size: 13px; transition: all 0.15s; display: inline-flex; align-items: center; justify-content: center;
}
.rte-toolbar button:hover { background: rgba(255,255,255,0.08); border-color: var(--border); color: var(--text); }
.rte-toolbar button:active { background: rgba(224,48,48,0.15); }
.rte-sel {
  height: 28px; padding: 0 6px; font-size: 12px;
  background: rgba(0,0,0,0.3); border: 1px solid var(--border);
  border-radius: 5px; color: var(--text2); cursor: pointer;
  outline: none;
}
.rte-sep { width: 1px; height: 20px; background: var(--border); margin: 0 3px; }
.rte-color-btn {
  min-width: 30px; height: 28px; padding: 0 6px;
  background: transparent; border: 1px solid transparent;
  border-radius: 5px; color: var(--text2); cursor: pointer;
  font-size: 13px; display: inline-flex; align-items: center; justify-content: center;
  position: relative; transition: all 0.15s;
}
.rte-color-btn:hover { background: rgba(255,255,255,0.08); border-color: var(--border); }
.rte-editor {
  min-height: 180px; padding: 14px 16px;
  color: var(--text); font-size: 14px; line-height: 1.6;
  outline: none;
}
.rte-editor:empty::before {
  content: 'Напиши что-нибудь...';
  color: var(--text2); pointer-events: none;
}
/* Стили контента в постах */
.rte-content { line-height: 1.7; font-size: 14px; }
.rte-content h2 { font-size: 20px; font-weight: 700; margin: 12px 0 6px; }
.rte-content h3 { font-size: 16px; font-weight: 700; margin: 10px 0 4px; }
.rte-content blockquote {
  border-left: 3px solid var(--accent); margin: 10px 0;
  padding: 8px 14px; background: rgba(224,48,48,0.05); border-radius: 0 6px 6px 0;
  color: var(--text2);
}
.rte-content a { color: var(--accent2); text-decoration: underline; }

/* ── AVATAR ── */
.post-avatar-img {
  width: 56px; height: 56px; border-radius: 50%; object-fit: cover;
  border: 2px solid var(--border);
}
.topics-section-label {
  font-size: 12px; color: var(--text2); font-weight: 700;
  text-transform: uppercase; letter-spacing: 1px;
  margin-bottom: 8px; margin-left: 2px;
}

/* ── FORUM ── */
.forum-wrap { max-width: 1000px; margin: 0 auto; padding: 40px 32px; position: relative; z-index: 1; }
.page-title { font-size: 26px; font-weight: 800; margin-bottom: 24px; }

.forum-category {
  background: var(--card); border: 1px solid var(--border); border-radius: 14px;
  margin-bottom: 14px; overflow: hidden; transition: border-color 0.2s;
}
.forum-category:hover { border-color: rgba(224,48,48,0.28); }
.category-header {
  display: flex; align-items: center; gap: 16px;
  padding: 20px 24px; cursor: pointer;
}
.category-icon { font-size: 26px; min-width: 36px; text-align: center; }
.category-info { flex: 1; }
.category-name { font-size: 16px; font-weight: 700; margin-bottom: 3px; }
.category-desc { font-size: 13px; color: var(--text2); }
.category-stats { text-align: right; }
.category-stats span { display: block; font-size: 12px; color: var(--text2); }
.category-stats strong { color: var(--text); font-size: 15px; }

/* topics list */
.topics-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; gap: 14px; flex-wrap: wrap; }

.topics-divider {
  display: flex; align-items: center; gap: 12px; margin: 18px 0 8px;
}
.topics-divider::before,.topics-divider::after {
  content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--border), transparent);
}
.pinned-divider::before,.pinned-divider::after { background: linear-gradient(90deg, transparent, rgba(255,200,60,0.25), transparent); }
.divider-label {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px;
  color: var(--text2); white-space: nowrap; padding: 3px 10px;
  background: var(--bg3); border: 1px solid var(--border); border-radius: 20px;
}
.pinned-divider .divider-label { color: #ffd060; border-color: rgba(255,200,60,0.25); }

.topics-block {
  background: var(--card); border: 1px solid var(--border); border-radius: 14px;
  overflow: hidden; margin-bottom: 8px;
}
.pinned-block { border-color: rgba(255,200,60,0.18); }

.topic-row {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 20px; border-bottom: 1px solid var(--border);
  cursor: pointer; transition: background 0.15s;
  position: relative;
}
.topic-row:last-child { border-bottom: none; }
.topic-row:hover { background: rgba(224,48,48,0.04); }

.topic-row-icon { font-size: 18px; opacity: 0.55; flex-shrink: 0; }
.topic-left { flex: 1; min-width: 0; }
.topic-title-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.topic-title { font-size: 14px; font-weight: 600; color: var(--text); }
.topic-author { font-weight: 600; color: var(--accent2); }
.topic-dot { opacity: 0.4; margin: 0 1px; }
.topic-meta { font-size: 12px; color: var(--text2); display: flex; align-items: center; gap: 4px; }
.topic-right { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; min-width: 65px; flex-shrink: 0; }
.reply-count { text-align: right; }
.reply-num { font-size: 17px; font-weight: 800; color: var(--text); }
.reply-lbl { display: block; font-size: 10px; color: var(--text2); }
.locked-icon { font-size: 14px; opacity: 0.45; }
.pin-mark { font-size: 13px; }
.forum-empty { padding: 48px; text-align: center; color: var(--text2); font-size: 15px; }

/* topic view header */
.topic-view-header { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 20px; flex-wrap: wrap; }

/* posts */
.post-card {
  background: var(--card); border: 1px solid var(--border); border-radius: 13px;
  margin-bottom: 14px; display: flex; overflow: hidden;
  transition: border-color 0.2s;
}
.post-card:hover { border-color: rgba(224,48,48,0.2); }
.post-sidebar {
  width: 140px; background: rgba(255,255,255,0.02);
  border-right: 1px solid var(--border); padding: 20px 14px;
  text-align: center; flex-shrink: 0;
}
.post-avatar {
  width: 56px; height: 56px; border-radius: 50%; background: var(--accent);
  margin: 0 auto 10px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; font-weight: 800; color: #fff;
}
.post-avatar-img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; display: block; margin: 0 auto 10px; }
.post-username { font-size: 13px; font-weight: 700; margin-bottom: 5px; }
.post-body { flex: 1; padding: 18px 22px; min-width: 0; }
.post-date-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.post-date { font-size: 11px; color: var(--text2); }
.post-content { font-size: 14px; line-height: 1.7; word-break: break-word; }

/* edit/icon buttons */
.btn-icon {
  background: none; border: 1px solid var(--border); border-radius: 8px;
  color: var(--text2); cursor: pointer; font-size: 15px;
  padding: 6px 10px; transition: all 0.2s; display: flex; align-items: center;
}
.btn-icon:hover { border-color: var(--accent); color: var(--accent2); background: rgba(224,48,48,0.07); }
.btn-icon-sm {
  background: none; border: none; color: var(--text2); cursor: pointer;
  font-size: 14px; padding: 2px 6px; border-radius: 6px; transition: all 0.2s;
}
.btn-icon-sm:hover { color: var(--accent2); background: rgba(224,48,48,0.08); }

/* reply box */
.reply-box { background: var(--card); border: 1px solid var(--border); border-radius: 13px; padding: 22px; margin-top: 22px; }
.reply-box h3 { font-size: 15px; font-weight: 700; margin-bottom: 14px; }

/* checkbox */
.checkbox-label { display: flex; align-items: center; gap: 9px; font-size: 14px; cursor: pointer; }

/* breadcrumb */
.breadcrumb { font-size: 13px; color: var(--text2); margin-bottom: 18px; }
.breadcrumb a { transition: color 0.2s; }
.breadcrumb a:hover { color: var(--accent2); }
.breadcrumb span { margin: 0 5px; }

/* ── PROFILE ── */
.profile-wrap { max-width: 900px; margin: 0 auto; padding: 40px 32px; position: relative; z-index: 1; }
.profile-header {
  background: var(--card); border: 1px solid var(--border); border-radius: 16px;
  padding: 30px; display: flex; gap: 26px; align-items: flex-start; margin-bottom: 20px;
}
.profile-skin {
  width: 80px; height: 120px; background: var(--bg3); border-radius: 9px;
  border: 1px solid var(--border); display: flex; align-items: center; justify-content: center;
  font-size: 36px; flex-shrink: 0;
}
.profile-info h1 { font-size: 24px; font-weight: 800; margin-bottom: 8px; }
.profile-stats-row { display: flex; gap: 22px; margin-top: 14px; }
.profile-stat { text-align: center; }
.profile-stat strong { display: block; font-size: 20px; font-weight: 800; color: var(--accent2); }
.profile-stat span { font-size: 12px; color: var(--text2); }
.rubins-block {
  background: rgba(255,180,0,0.07); border: 1px solid rgba(255,180,0,0.2);
  border-radius: 10px; padding: 12px 18px;
  display: flex; align-items: center; gap: 10px; margin-top: 14px;
}
.rubins-amount { font-size: 20px; font-weight: 800; color: #ffcc44; }
.rubins-label { font-size: 12px; color: var(--text2); }

/* inventory */
.inv-grid {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; max-width: 320px;
}
.inv-slot {
  aspect-ratio: 1; background: var(--bg3); border: 1px solid var(--border);
  border-radius: 7px; display: flex; align-items: center; justify-content: center;
  font-size: 20px; transition: border-color 0.2s; cursor: default;
}
.inv-slot:hover { border-color: rgba(224,48,48,0.35); }

/* ── DOWNLOAD ── */
.download-wrap { max-width: 800px; margin: 60px auto; padding: 0 32px; text-align: center; position: relative; z-index: 1; }
.download-card {
  background: var(--card); border: 1px solid var(--border); border-radius: 18px;
  padding: 48px; margin-top: 40px;
}

/* ── DONATE ── */
.donate-wrap { max-width: 1000px; margin: 0 auto; padding: 60px 32px; position: relative; z-index: 1; }
.donate-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; margin-top: 36px; }
.donate-card {
  background: var(--card); border: 1px solid var(--border); border-radius: 15px;
  padding: 28px; text-align: center; transition: all 0.3s; position: relative;
}
.donate-card:hover { border-color: var(--accent); transform: translateY(-5px); box-shadow: 0 10px 32px rgba(224,48,48,0.1); }
.donate-card.featured { border-color: rgba(224,48,48,0.45); }
.donate-badge {
  position: absolute; top: -11px; left: 50%; transform: translateX(-50%);
  background: var(--accent); color: #fff; font-size: 11px; font-weight: 700;
  padding: 4px 16px; border-radius: 20px; text-transform: uppercase; letter-spacing: 1px;
  white-space: nowrap;
}
.donate-tier { font-size: 12px; color: var(--text2); text-transform: uppercase; font-weight: 700; letter-spacing: 2px; margin-bottom: 10px; }
.donate-price { font-size: 38px; font-weight: 900; margin-bottom: 4px; }
.donate-price span { font-size: 16px; color: var(--text2); }
.donate-period { font-size: 12px; color: var(--text2); margin-bottom: 18px; }
.donate-features { text-align: left; margin-bottom: 22px; }
.donate-features li { font-size: 13px; color: var(--text2); padding: 4px 0; list-style: none; }
.donate-features li::before { content: '✓ '; color: var(--accent2); font-weight: 700; }

/* ── СОЦИАЛЬНАЯ ПАНЕЛЬ ── */
.social-panel-toggle {
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 8px;
  padding: 7px 11px;
  font-size: 16px;
  cursor: pointer;
  transition: background 0.2s;
  line-height: 1;
  position: relative;
  flex-shrink: 0;
}
.social-panel-toggle:hover { background: rgba(255,255,255,0.12); }
.social-panel-toggle[data-count]::after {
  content: attr(data-count);
  position: absolute;
  top: -5px; right: -5px;
  background: var(--accent);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  border-radius: 50%;
  width: 16px; height: 16px;
  display: flex; align-items: center; justify-content: center;
}

.social-overlay {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 999;
}
.social-overlay.open { display: block; }

.social-panel {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: 320px;
  background: var(--card);
  border-left: 1px solid var(--border);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.4,0,0.2,1);
}
.social-panel.open { transform: translateX(0); }

.social-panel-header {
  padding: 16px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.social-panel-title {
  font-size: 13px;
  font-weight: 800;
  color: var(--text2);
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.social-tabs {
  display: flex;
  gap: 0;
  background: rgba(255,255,255,0.04);
  border-radius: 12px;
  padding: 4px;
  position: relative;
}
.social-tab {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--text2);
  border-radius: 9px;
  padding: 8px 6px;
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease;
  white-space: nowrap;
  letter-spacing: 0.2px;
}
.social-tab:hover:not(.active) {
  background: rgba(255,255,255,0.07);
  color: var(--text);
}
.social-tab.active {
  background: linear-gradient(135deg, rgba(224,48,48,0.28), rgba(180,0,0,0.18));
  box-shadow: inset 0 0 0 1px rgba(224,48,48,0.35);
  color: #ff7070;
}

.social-badge {
  background: var(--accent);
  color: #fff;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 5px;
  margin-left: 4px;
  vertical-align: middle;
}

.social-panel-body {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 8px;
}

.social-loading, .social-empty {
  text-align: center;
  color: var(--text2);
  font-size: 13px;
  padding: 40px 20px;
  line-height: 1.7;
}
.social-empty-icon {
  font-size: 32px;
  display: block;
  margin-bottom: 8px;
  opacity: 0.4;
  filter: grayscale(1);
}
.social-empty-face {
  font-size: 22px;
  font-family: monospace;
  color: var(--text2);
  opacity: 0.5;
  margin-bottom: 12px;
  letter-spacing: 1px;
}
.social-empty-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 6px;
}
.social-empty-sub {
  font-size: 12px;
  color: var(--text2);
  line-height: 1.6;
}

.social-user-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 8px;
  border-radius: 10px;
  transition: background 0.15s;
  gap: 8px;
}
.social-user-card:hover { background: rgba(255,255,255,0.05); }
.social-user-info {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: inherit;
  flex: 1;
  min-width: 0;
}
.social-user-ava {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--accent);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; color: #fff;
  flex-shrink: 0;
  overflow: hidden;
  position: relative;
}
.social-user-ava img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
/* Обёртка для аватарки + точки */
.social-ava-wrap {
  position: relative;
  flex-shrink: 0;
  width: 38px; height: 38px;
}
.social-user-name {
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.social-actions { display: flex; gap: 5px; flex-shrink: 0; }
.social-action-btn {
  width: 30px; height: 30px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.18s;
}
.social-accept  { background: rgba(48,221,112,0.15); color: #30dd70; }
.social-accept:hover  { background: #30dd70; color: #000; }
.social-decline, .social-remove { background: rgba(224,48,48,0.15); color: #ff6060; }
.social-decline:hover, .social-remove:hover { background: var(--accent); color: #fff; }
.social-unblock { background: rgba(255,255,255,0.08); color: var(--text2); }
.social-unblock:hover { background: rgba(255,255,255,0.15); color: var(--text); }

/* ── ТОСТ УВЕДОМЛЕНИЯ ── */
#toast-wrap {
  position: fixed;
  top: 72px;
  right: 16px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}
.nl-toast {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 12px 14px 18px;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  width: 280px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
  opacity: 0;
  transform: translateX(30px);
  transition: opacity 0.3s, transform 0.3s;
  position: relative;
  overflow: hidden;
  pointer-events: all;
}
.nl-toast.show { opacity: 1; transform: translateX(0); }
.nl-toast-ava {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--accent);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; color: #fff;
  flex-shrink: 0; overflow: hidden;
}
.nl-toast-body { flex: 1; min-width: 0; }
.nl-toast-name { font-size: 13px; font-weight: 700; margin-bottom: 2px; }
.nl-toast-text { font-size: 12px; color: var(--text2); line-height: 1.4; }
.nl-toast-bar {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 3px;
  background: rgba(255,255,255,0.08);
}
.nl-toast-progress {
  height: 100%;
  width: 100%;
  background: var(--accent);
  border-radius: 0 0 14px 14px;
}

/* ── КНОПКА УВЕДОМЛЕНИЙ ── */
.notif-btn {
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 8px;
  padding: 7px 11px;
  font-size: 16px;
  cursor: pointer;
  transition: background 0.2s;
  position: relative;
  flex-shrink: 0;
}
.notif-btn:hover { background: rgba(255,255,255,0.12); }
.notif-badge {
  position: absolute;
  top: -5px; right: -5px;
  background: var(--accent);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  border-radius: 50%;
  width: 16px; height: 16px;
  display: flex; align-items: center; justify-content: center;
}

/* ── ПАНЕЛЬ УВЕДОМЛЕНИЙ ── */
.notif-overlay {
  display: none; position: fixed; inset: 0; z-index: 998;
}
.notif-overlay.open { display: block; }
.notif-panel {
  position: fixed;
  top: 60px; right: 16px;
  width: 300px;
  max-height: 420px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
  z-index: 999;
  display: none;
  flex-direction: column;
  overflow: hidden;
  transform: translateY(-8px);
  opacity: 0;
  transition: opacity 0.2s, transform 0.2s;
}
.notif-panel.open {
  display: flex;
  opacity: 1;
  transform: translateY(0);
}
.notif-panel-header {
  padding: 12px 16px;
  font-size: 13px;
  font-weight: 800;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.notif-clear-btn {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.12);
  color: var(--text2);
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.notif-clear-btn:hover { background: rgba(224,48,48,0.15); color: #ff7070; border-color: rgba(224,48,48,0.3); }
.notif-panel-body { overflow-y: auto; flex: 1; }
.notif-empty { text-align: center; color: var(--text2); font-size: 13px; padding: 30px 16px; }
.notif-item {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  transition: background 0.15s;
}
.notif-item:hover { background: rgba(255,255,255,0.04); }
.notif-ava {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--accent);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; color: #fff;
  flex-shrink: 0; overflow: hidden;
}
.notif-from { font-size: 13px; font-weight: 700; margin-bottom: 2px; }
.notif-text { font-size: 12px; color: var(--text2); margin-bottom: 3px; }
.notif-time { font-size: 11px; color: var(--text2); opacity: 0.6; }

/* ── ЧАТ ── */
.chat-modal {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 1100;
  align-items: center;
  justify-content: center;
}
.chat-modal.open { display: flex; }
.chat-window {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 18px;
  width: 860px;
  max-width: 95vw;
  height: 640px;
  max-height: 90vh;
  display: flex;
  flex-direction: row;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
  overflow: hidden;
}

/* Сайдбар */
.chat-sidebar {
  width: 220px;
  flex-shrink: 0;
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  background: rgba(0,0,0,0.15);
}
.chat-sidebar-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 14px;
  border-bottom: 1px solid var(--border);
  font-size: 13px; font-weight: 800;
  flex-shrink: 0;
}
.chat-sidebar-list { flex: 1; overflow-y: auto; padding: 6px; }
.chat-sidebar-empty { text-align: center; color: var(--text2); font-size: 12px; padding: 20px 8px; }
.chat-sidebar-item {
  display: flex; gap: 9px; align-items: center;
  padding: 9px 10px; border-radius: 10px; cursor: pointer;
  transition: background 0.15s;
}
.chat-sidebar-item:hover { background: rgba(255,255,255,0.06); }
.chat-sidebar-item.active { background: rgba(224,48,48,0.12); }
.chat-sidebar-ava {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--accent);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; color: #fff;
  flex-shrink: 0; overflow: hidden;
  position: relative;
}
.chat-sidebar-ava img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
.chat-ava-wrap {
  position: relative;
  flex-shrink: 0;
  width: 36px; height: 36px;
}
.chat-sidebar-info { flex: 1; min-width: 0; }
.chat-sidebar-name {
  font-size: 13px; font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  display: flex; align-items: center; gap: 5px;
}
.chat-sidebar-preview {
  font-size: 11px; color: var(--text2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin-top: 2px;
}
.chat-sidebar-unread {
  background: var(--accent); color: #fff;
  border-radius: 10px; font-size: 10px; font-weight: 700;
  padding: 1px 5px; flex-shrink: 0;
}

/* Основная часть */
.chat-main {
  flex: 1; display: flex; flex-direction: column; min-width: 0;
}
.chat-no-dialog {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  color: var(--text2); font-size: 13px; gap: 10px;
}
.chat-no-dialog-icon { font-size: 36px; opacity: 0.3; }
.chat-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.chat-header-left { display: flex; align-items: center; gap: 10px; }
.chat-partner-ava {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--accent);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; color: #fff;
  flex-shrink: 0; overflow: hidden;
}
.chat-partner-name { font-size: 15px; font-weight: 700; }
.chat-close {
  background: transparent; border: none;
  color: var(--text2); font-size: 18px; cursor: pointer;
  padding: 4px 8px; border-radius: 6px;
  transition: background 0.15s, color 0.15s;
}
.chat-close:hover { background: rgba(255,255,255,0.08); color: var(--text); }
.chat-messages {
  flex: 1; overflow-y: auto;
  padding: 16px;
  display: flex; flex-direction: column; gap: 6px;
}
.chat-loading, .chat-empty {
  text-align: center; color: var(--text2);
  font-size: 13px; margin: auto;
}
.chat-msg { display: flex; flex-direction: column; align-items: flex-start; max-width: 75%; }
.chat-msg-mine { align-self: flex-end; align-items: flex-end; }
.chat-bubble {
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px 16px 16px 4px;
  padding: 8px 12px;
  font-size: 14px; line-height: 1.45; word-break: break-word;
}
.chat-msg-mine .chat-bubble {
  background: linear-gradient(135deg, rgba(224,48,48,0.3), rgba(180,0,0,0.2));
  border-color: rgba(224,48,48,0.25);
  border-radius: 16px 16px 4px 16px;
}
.chat-time { font-size: 10px; color: var(--text2); margin-top: 3px; opacity: 0.6; padding: 0 4px; }
.chat-footer { position: relative; overflow: visible;
  display: flex; gap: 8px; align-items: center;
  padding: 12px 14px; border-top: 1px solid var(--border); flex-shrink: 0;
}
.chat-input {
  flex: 1; background: rgba(255,255,255,0.06);
  border: 1px solid var(--border); border-radius: 22px;
  color: var(--text); font-size: 14px; padding: 10px 16px;
  outline: none; transition: border-color 0.2s;
}
.chat-input:focus { border-color: rgba(224,48,48,0.5); }
.chat-input::placeholder { color: var(--text2); }
.chat-send-btn {
  background: var(--accent); border: none; color: #fff;
  width: 38px; height: 38px; border-radius: 50%; font-size: 16px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.2s; flex-shrink: 0;
}
.chat-send-btn:hover { background: #c02020; }

/* Кнопка чата в друзьях */
.social-chat { background: rgba(48,160,255,0.15); color: #40a8ff; }
.social-chat:hover { background: #40a8ff; color: #fff; }

/* ── CHAT NOT FRIENDS BLOCK ── */
.chat-not-friends {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px 24px;
  text-align: center;
  gap: 6px;
  width: 100%;
  box-sizing: border-box;
}
.chat-not-friends-icon {
  font-size: 28px;
  margin-bottom: 4px;
  opacity: 0.7;
}
.chat-not-friends-text {
  font-size: 14px;
  font-weight: 700;
  color: var(--text1);
}
.chat-not-friends-sub {
  font-size: 12px;
  color: var(--text2);
  line-height: 1.5;
}
.chat-not-friends-pending {
  font-size: 12px;
  color: var(--accent);
  margin-top: 6px;
  font-weight: 600;
}
.chat-add-friend-btn {
  margin-top: 10px;
  background: rgba(224,48,48,0.12);
  border: 1px solid rgba(224,48,48,0.3);
  color: var(--accent);
  font-size: 13px;
  font-weight: 600;
  padding: 8px 20px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.2s;
}
.chat-add-friend-btn:hover {
  background: rgba(224,48,48,0.22);
}

/* ── CUSTOM CONFIRM MODAL ── */
.nl-confirm-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(2,2,10,0.75);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity 0.25s;
  backdrop-filter: blur(8px);
}
.nl-confirm-overlay.open { opacity: 1; }
.nl-confirm-box {
  background: linear-gradient(160deg, #0c0e22 0%, #080a1c 100%);
  border: 1px solid rgba(120,100,220,0.25);
  border-radius: 18px;
  padding: 34px 30px 26px;
  min-width: 290px; max-width: 370px;
  text-align: center;
  box-shadow: 0 0 0 1px rgba(80,60,180,0.10), 0 24px 70px rgba(0,0,10,0.7), 0 0 40px rgba(80,40,160,0.12);
  transform: translateY(-14px) scale(0.97);
  transition: transform 0.25s cubic-bezier(.34,1.4,.64,1), opacity 0.25s;
}
.nl-confirm-overlay.open .nl-confirm-box { transform: translateY(0) scale(1); }
.nl-confirm-icon {
  font-size: 34px; margin-bottom: 14px;
  filter: drop-shadow(0 0 10px rgba(255,180,80,0.4));
}
.nl-confirm-msg {
  font-size: 15px; font-weight: 700; color: var(--text);
  margin-bottom: 26px; line-height: 1.55;
}
.nl-confirm-btns { display: flex; gap: 10px; justify-content: center; }
.nl-confirm-btn {
  padding: 10px 30px; border-radius: 10px;
  font-size: 14px; font-weight: 600; cursor: pointer;
  border: 1px solid transparent; transition: all 0.18s;
  letter-spacing: 0.02em;
}
.nl-confirm-yes {
  background: rgba(212,40,40,0.18);
  border-color: rgba(212,40,40,0.40);
  color: #ff5566;
  box-shadow: 0 0 14px rgba(212,40,40,0.10);
}
.nl-confirm-yes:hover {
  background: rgba(212,40,40,0.32);
  color: #ff7788;
  box-shadow: 0 0 22px rgba(212,40,40,0.25);
  transform: translateY(-1px);
}
.nl-confirm-no {
  background: rgba(255,255,255,0.04);
  border-color: rgba(120,120,200,0.18);
  color: var(--text2);
}
.nl-confirm-no:hover {
  background: rgba(255,255,255,0.08);
  color: var(--text);
  transform: translateY(-1px);
}

/* ── COSMIC CARD GLOW ── */
.card, .feature-card, .forum-card, .topic-item, .social-panel, .chat-modal-inner, .notif-panel {
  box-shadow: 0 0 0 1px rgba(80,60,200,0.08), 0 8px 32px rgba(0,0,10,0.5) !important;
  transition: box-shadow 0.3s, border-color 0.3s, transform 0.3s;
}
.card:hover, .feature-card:hover {
  box-shadow: 0 0 0 1px rgba(100,80,220,0.18), 0 12px 40px rgba(0,0,10,0.6), 0 0 30px rgba(80,40,160,0.10) !important;
  border-color: rgba(100,80,220,0.22) !important;
}

/* ── HERO NEBULA ACCENT ── */
.hero::before {
  content: '';
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 70% 60% at 60% 40%, rgba(100,30,180,0.10) 0%, transparent 70%),
    radial-gradient(ellipse 50% 40% at 20% 60%, rgba(20,40,160,0.08) 0%, transparent 60%);
}

/* ── SCROLLBAR COSMIC ── */
::-webkit-scrollbar-thumb { background: #2a2a55; }
::-webkit-scrollbar-thumb:hover { background: rgba(180,80,80,0.6); }

/* ── ONLINE DOT ── */
.online-dot {
  position: absolute;
  width: 11px; height: 11px;
  background: #3ddc84;
  border: 2px solid var(--bg2);
  border-radius: 50%;
  bottom: 1px; right: 1px;
  box-shadow: 0 0 6px rgba(61,220,132,0.6);
  animation: pulse-online 2.5s ease-in-out infinite;
}
@keyframes pulse-online {
  0%, 100% { box-shadow: 0 0 6px rgba(61,220,132,0.5); }
  50%       { box-shadow: 0 0 12px rgba(61,220,132,0.9); }
}
/* В панели друзей */
.social-user-ava { position: relative; display: inline-block; }
/* В чат-сайдбаре */
.chat-sidebar-ava { position: relative; }

/* ── NAV MESSENGER BTN ── */
.nav-messenger-btn {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  color: var(--text2);
  font-size: 13px; font-weight: 600;
  padding: 7px 14px; border-radius: 8px;
  cursor: pointer; transition: all 0.2s;
  white-space: nowrap;
}
.nav-messenger-btn:hover {
  background: rgba(255,255,255,0.09);
  border-color: rgba(255,255,255,0.15);
  color: var(--text);
}

/* ── CHAT PLACEHOLDER ── */
.chat-placeholder {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  height: 100%; gap: 10px; color: var(--text2);
}
.chat-placeholder-icon { font-size: 40px; opacity: 0.4; }
.chat-placeholder-text { font-size: 14px; }

/* ── SOCIAL ONLINE / LASTSEEN ── */
.social-online-label {
  font-size: 10px; font-weight: 600;
  color: #3ddc84;
  letter-spacing: 0.02em;
}
.social-lastseen {
  font-size: 10px;
  color: var(--text2);
}

/* ── CHAT ATTACHMENTS ── */
.chat-attach-btn, .chat-voice-btn {
  width: 34px; height: 34px; border-radius: 50%;
  border: none; cursor: pointer;
  background: rgba(255,255,255,0.06);
  color: var(--text2); font-size: 16px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; transition: background 0.18s, color 0.18s;
}
.chat-attach-btn:hover { background: rgba(255,255,255,0.12); color: var(--text); }
.chat-voice-btn:hover  { background: rgba(61,220,132,0.15); color: #3ddc84; }
.chat-voice-btn.recording {
  background: rgba(220,61,61,0.25);
  color: #ff5555;
  animation: pulse-rec 1s ease-in-out infinite;
}
@keyframes pulse-rec {
  0%,100% { box-shadow: 0 0 0 0 rgba(220,61,61,0.4); }
  50%      { box-shadow: 0 0 0 6px rgba(220,61,61,0); }
}

/* Вложения в пузырях */
.chat-attach-img img {
  max-width: 240px; max-height: 220px;
  border-radius: 10px; display: block;
  object-fit: cover;
  transition: opacity 0.2s;
}
.chat-attach-img img:hover { opacity: 0.9; }
.chat-attach-video video {
  max-width: 260px; border-radius: 10px; display: block;
}
.chat-attach-audio audio {
  width: 220px; accent-color: var(--accent);
}
.chat-attach-file {
  display: inline-flex; align-items: center; gap: 7px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 9px; padding: 8px 13px;
  font-size: 13px; color: var(--text);
  text-decoration: none; transition: background 0.18s;
}
.chat-attach-file:hover { background: rgba(255,255,255,0.12); }

/* Прогресс загрузки */
.chat-upload-preview {
  padding: 6px 14px;
  border-top: 1px solid var(--border);
}
.chat-upload-progress { font-size: 12px; color: var(--text2); }
.chat-upload-error { font-size: 12px; color: #ff5555; }

/* ── Voice hint ─────────────────────────────────────────────── */
.chat-voice-hint {
  display: none;
  align-items: center;
  gap: 10px;
  position: absolute;
  bottom: 54px;
  left: 10px; right: 10px;
  background: rgba(10,10,30,0.95);
  border: 1px solid rgba(130,80,255,0.4);
  border-radius: 10px;
  padding: 8px 14px;
  font-size: 13px;
  z-index: 10;
  backdrop-filter: blur(8px);
}
.vhint-time {
  color: var(--accent);
  font-weight: 700;
  min-width: 34px;
}
.vhint-cancel {
  color: var(--text2);
  flex: 1;
  text-align: right;
  font-size: 12px;
}

/* ── Lightbox ───────────────────────────────────────────────── */
#nl-lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0,0,0,0.85);
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
}
.nl-lb-media {
  max-width: 92vw;
  max-height: 88vh;
  border-radius: 10px;
  box-shadow: 0 0 60px rgba(0,0,0,0.8);
  object-fit: contain;
}
.nl-lb-close {
  position: absolute;
  top: 18px; right: 24px;
  background: rgba(255,255,255,0.1);
  border: none;
  color: #fff;
  font-size: 28px;
  width: 40px; height: 40px;
  border-radius: 50%;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.2s;
}
.nl-lb-close:hover { background: rgba(255,255,255,0.22); }

/* ── Voice recording UI ─────────────────────────────────────── */
.chat-voice-hint {
  display: none;
  align-items: center;
  gap: 8px;
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: linear-gradient(135deg, rgba(8,8,28,0.97), rgba(20,10,40,0.97));
  border-top: 1px solid rgba(180,80,255,0.3);
  border-radius: 0 0 0 0;
  padding: 10px 14px;
  font-size: 13px;
  z-index: 20;
  backdrop-filter: blur(10px);
  user-select: none;
}
.vhint-rec-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: #ff3b3b;
  box-shadow: 0 0 8px #ff3b3b;
  animation: rec-blink 1s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes rec-blink {
  0%,100% { opacity: 1; } 50% { opacity: 0.2; }
}
.vhint-label { color: #ff6b6b; font-weight: 600; font-size: 12px; }
.vhint-time { color: #fff; font-weight: 700; font-size: 14px; min-width: 34px; }
.vhint-waves {
  display: flex; align-items: center; gap: 3px; flex: 1;
}
.vhint-waves span {
  display: block; width: 3px; border-radius: 3px;
  background: rgba(150,80,255,0.8);
  animation: wave-anim 0.8s ease-in-out infinite;
}
.vhint-waves span:nth-child(1) { height: 8px; animation-delay: 0s; }
.vhint-waves span:nth-child(2) { height: 16px; animation-delay: 0.1s; }
.vhint-waves span:nth-child(3) { height: 22px; animation-delay: 0.2s; }
.vhint-waves span:nth-child(4) { height: 14px; animation-delay: 0.3s; }
.vhint-waves span:nth-child(5) { height: 9px; animation-delay: 0.4s; }
@keyframes wave-anim {
  0%,100% { transform: scaleY(1); opacity: 0.6; }
  50% { transform: scaleY(1.8); opacity: 1; }
}
.vhint-cancel { color: var(--text2); font-size: 11px; cursor: pointer; white-space: nowrap; }
.chat-voice-btn.recording {
  background: rgba(255,60,60,0.2) !important;
  border-color: rgba(255,60,60,0.6) !important;
  color: #ff4444 !important;
  box-shadow: 0 0 12px rgba(255,60,60,0.4);
  animation: voice-pulse 1s ease-in-out infinite;
}
@keyframes voice-pulse {
  0%,100% { box-shadow: 0 0 8px rgba(255,60,60,0.4); }
  50% { box-shadow: 0 0 18px rgba(255,60,60,0.7); }
}

/* ── File send preview ──────────────────────────────────────── */
.chat-file-preview-wrap {
  padding: 10px 12px 0;
}
.fp-inner {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  padding: 10px 12px;
}
.fp-thumb {
  width: 56px; height: 56px;
  object-fit: cover;
  border-radius: 8px;
  flex-shrink: 0;
}
.fp-audio-icon {
  width: 56px; height: 56px;
  display: flex; align-items: center; justify-content: center;
  font-size: 28px;
  background: rgba(255,255,255,0.06);
  border-radius: 8px;
  flex-shrink: 0;
}
.fp-info { flex: 1; min-width: 0; }
.fp-name { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fp-size { font-size: 11px; color: var(--text2); margin-top: 2px; }
.fp-btns { display: flex; gap: 6px; flex-shrink: 0; }
.fp-cancel {
  background: rgba(255,255,255,0.08);
  border: none; color: var(--text2);
  width: 30px; height: 30px; border-radius: 50%;
  cursor: pointer; font-size: 14px;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.2s;
}
.fp-cancel:hover { background: rgba(255,60,60,0.2); color: #ff6b6b; }
.fp-send {
  background: var(--accent);
  border: none; color: #fff;
  padding: 7px 14px; border-radius: 8px;
  cursor: pointer; font-size: 13px; font-weight: 600;
  transition: opacity 0.2s;
}
.fp-send:hover { opacity: 0.85; }

/* ── Voice/Music player ─────────────────────────────────────── */
.chat-voice-msg, .chat-music-msg {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 16px;
  min-width: 220px;
  max-width: 320px;
  margin: 2px 0;
}
.chat-voice-msg {
  background: linear-gradient(135deg, rgba(120,40,200,0.25), rgba(60,20,120,0.3));
  border: 1px solid rgba(150,80,255,0.3);
}
.chat-music-msg {
  background: linear-gradient(135deg, rgba(224,48,48,0.15), rgba(120,20,40,0.25));
  border: 1px solid rgba(224,48,48,0.3);
}
.cau-play-btn {
  width: 36px; height: 36px; border-radius: 50%; border: none;
  background: rgba(255,255,255,0.15);
  color: #fff; cursor: pointer; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.2s, transform 0.1s;
}
.cau-play-btn:hover { background: rgba(255,255,255,0.25); transform: scale(1.08); }
.cau-body { flex: 1; min-width: 0; }
.cau-label { font-size: 11px; color: rgba(255,255,255,0.6); margin-bottom: 5px; display: flex; align-items: center; gap: 4px; }
.cau-bar-wrap { display: flex; align-items: center; gap: 8px; }
.cau-bar {
  flex: 1; height: 4px; border-radius: 4px;
  background: rgba(255,255,255,0.15);
  cursor: pointer; position: relative; overflow: hidden;
}
.cau-progress {
  height: 100%; border-radius: 4px; width: 0%;
  background: linear-gradient(90deg, #9b50ff, #e030ff);
  transition: width 0.1s linear;
}
.chat-music-msg .cau-progress {
  background: linear-gradient(90deg, #e03030, #ff6b6b);
}
.cau-time { font-size: 11px; color: rgba(255,255,255,0.5); min-width: 28px; }

/* ── Voice recording hint (replaces footer) ─────────────────── */
.chat-voice-hint {
  display: none;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-top: 1px solid rgba(150,60,255,0.4);
  background: linear-gradient(135deg, rgba(12,6,30,0.98), rgba(25,10,50,0.98));
  flex-shrink: 0;
  user-select: none;
  z-index: 5;
}
.vhint-cancel-btn {
  width: 28px; height: 28px; border-radius: 50%; border: none;
  background: rgba(255,255,255,0.1); color: var(--text2);
  cursor: pointer; font-size: 13px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.2s;
}
.vhint-cancel-btn:hover { background: rgba(255,60,60,0.3); color: #ff6b6b; }
.vhint-rec-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: #ff3b3b; box-shadow: 0 0 8px #ff3b3b;
  animation: rec-blink 0.9s ease-in-out infinite; flex-shrink: 0;
}
.vhint-label { font-size: 11px; font-weight: 700; color: #ff6060; letter-spacing: 1px; }
.vhint-time { font-size: 15px; font-weight: 700; color: #fff; min-width: 36px; }
.vhint-waves {
  display: flex; align-items: center; gap: 2px; flex: 1;
}
.vhint-waves span {
  display: block; width: 3px; border-radius: 3px;
  background: rgba(160,80,255,0.8);
  animation: wave-anim 0.7s ease-in-out infinite;
}
.vhint-waves span:nth-child(1){height:6px;animation-delay:0s}
.vhint-waves span:nth-child(2){height:14px;animation-delay:.08s}
.vhint-waves span:nth-child(3){height:20px;animation-delay:.16s}
.vhint-waves span:nth-child(4){height:24px;animation-delay:.24s}
.vhint-waves span:nth-child(5){height:18px;animation-delay:.32s}
.vhint-waves span:nth-child(6){height:12px;animation-delay:.40s}
.vhint-waves span:nth-child(7){height:7px;animation-delay:.48s}
.vhint-swipe { font-size: 11px; color: rgba(255,255,255,0.3); white-space: nowrap; }

/* ── File preview (compact) ─────────────────────────────────── */
.chat-file-preview-wrap { padding: 6px 12px 0; }
.fp-inner {
  display: flex; align-items: center; gap: 10px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px; padding: 8px 10px;
  position: relative;
}
.fp-thumb { width: 40px; height: 40px; object-fit: cover; border-radius: 6px; flex-shrink: 0; }
.fp-audio-icon {
  width: 40px; height: 40px; font-size: 20px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.07); border-radius: 6px; flex-shrink: 0;
}
.fp-info { flex: 1; min-width: 0; }
.fp-name { font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text); }
.fp-size { font-size: 10px; color: var(--text2); margin-top: 1px; }
.fp-cancel {
  background: rgba(255,255,255,0.08); border: none; color: var(--text2);
  width: 24px; height: 24px; border-radius: 50%; cursor: pointer; font-size: 11px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; transition: background 0.2s;
}
.fp-cancel:hover { background: rgba(255,60,60,0.25); color: #ff6b6b; }

/* ── Audio/Voice player polish ──────────────────────────────── */
.chat-voice-msg, .chat-music-msg {
  min-width: 200px; max-width: 280px;
}
.cau-play-btn {
  width: 38px; height: 38px;
  background: rgba(255,255,255,0.18);
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.chat-voice-msg .cau-play-btn { background: rgba(160,80,255,0.35); }
.chat-music-msg .cau-play-btn { background: rgba(224,48,48,0.35); }
.cau-bar { height: 3px; }

/* ══════════════════════════════════════════════════════════════
   VOICE RECORDING ROW — replaces input row in-place
   ══════════════════════════════════════════════════════════════ */
.chat-input-row {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
}
.chat-voice-row {
  display: none;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 12px;
  background: linear-gradient(135deg, rgba(14,6,32,0.97), rgba(28,10,55,0.98));
  border-top: 1px solid rgba(140,60,255,0.35);
  user-select: none;
  position: relative;
  overflow: hidden;
  transition: background 0.25s ease, border-top-color 0.25s ease;
}
.chat-voice-row::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(140,60,255,0.04), transparent);
  animation: vr-shimmer 2.5s linear infinite;
}
@keyframes vr-shimmer {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}
.chat-voice-row.active {
  display: flex;
  animation: vr-slide-in 0.22s cubic-bezier(0.22,1,0.36,1);
}
@keyframes vr-slide-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.chat-voice-row.cancelling {
  animation: vr-cancel-flash 0.38s ease forwards;
}
@keyframes vr-cancel-flash {
  0%   { background: linear-gradient(135deg,rgba(14,6,32,0.97),rgba(28,10,55,0.98)); }
  40%  { background: linear-gradient(135deg,rgba(120,8,18,0.97),rgba(70,4,12,0.98)); }
  100% { background: linear-gradient(135deg,rgba(14,6,32,0.97),rgba(28,10,55,0.98)); opacity: 0; }
}
.cvr-cancel {
  width: 28px; height: 28px; border-radius: 50%; border: none;
  background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.5);
  cursor: pointer; font-size: 12px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.2s, color 0.2s;
  z-index: 1;
}
.cvr-cancel:hover { background: rgba(255,50,50,0.3); color: #ff7070; }
.cvr-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #ff3b3b; box-shadow: 0 0 7px #ff3b3b88;
  animation: rec-blink 0.9s ease-in-out infinite;
  flex-shrink: 0; z-index: 1;
}
.cvr-waves {
  display: flex; align-items: center; gap: 2.5px; flex: 1;
  height: 30px; z-index: 1;
}
.cvr-waves span {
  display: block; width: 3px; border-radius: 3px;
  background: linear-gradient(180deg, #c060ff, #7020cc);
  transform-origin: center;
  animation: wave-anim 0.65s ease-in-out infinite;
}
.cvr-waves span:nth-child(1){height:7px;animation-delay:0s}
.cvr-waves span:nth-child(2){height:13px;animation-delay:.07s}
.cvr-waves span:nth-child(3){height:21px;animation-delay:.14s}
.cvr-waves span:nth-child(4){height:26px;animation-delay:.21s}
.cvr-waves span:nth-child(5){height:21px;animation-delay:.28s}
.cvr-waves span:nth-child(6){height:13px;animation-delay:.35s}
.cvr-waves span:nth-child(7){height:7px;animation-delay:.42s}
.cvr-timer {
  font-size: 14px; font-weight: 700; color: #fff; font-variant-numeric: tabular-nums;
  min-width: 34px; z-index: 1;
}
.cvr-hint { font-size: 11px; color: rgba(255,255,255,0.22); white-space: nowrap; z-index: 1; }

/* ══════════════════════════════════════════════════════════════
   AUDIO PLAYER — voice & music redesign
   ══════════════════════════════════════════════════════════════ */
.chat-voice-msg, .chat-music-msg {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 18px;
  min-width: 230px;
  max-width: 310px;
  margin: 2px 0;
  position: relative;
  overflow: hidden;
}
.chat-voice-msg {
  background: linear-gradient(135deg, rgba(80,20,160,0.5) 0%, rgba(30,8,80,0.6) 100%);
  border: 1px solid rgba(160,80,255,0.35);
  box-shadow: 0 2px 12px rgba(100,30,200,0.2);
}
.chat-music-msg {
  background: linear-gradient(135deg, rgba(160,20,40,0.45) 0%, rgba(70,8,20,0.6) 100%);
  border: 1px solid rgba(220,50,80,0.35);
  box-shadow: 0 2px 12px rgba(180,20,50,0.2);
}
/* Subtle inner glow */
.chat-voice-msg::before {
  content:''; position:absolute; inset:0; border-radius:inherit;
  background: radial-gradient(ellipse at 10% 50%, rgba(160,80,255,0.1), transparent 70%);
  pointer-events:none;
}
.chat-music-msg::before {
  content:''; position:absolute; inset:0; border-radius:inherit;
  background: radial-gradient(ellipse at 10% 50%, rgba(255,80,100,0.1), transparent 70%);
  pointer-events:none;
}
/* Avatar circle */
.cau-avatar {
  width: 36px; height: 36px; border-radius: 50%; object-fit: cover;
  flex-shrink: 0; border: 1px solid rgba(255,255,255,0.15);
  position: relative; z-index: 1;
}
.cau-avatar-ph {
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 700; color: #fff;
}
.chat-voice-msg .cau-avatar-ph { background: rgba(140,60,255,0.45); }
.chat-music-msg .cau-avatar-ph { background: rgba(200,40,60,0.45); }
/* Main content */
.cau-main {
  display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; position: relative; z-index: 1;
}
.cau-play-btn {
  width: 34px; height: 34px; border-radius: 50%; border: none;
  color: #fff; cursor: pointer; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.12s, box-shadow 0.15s;
}
.chat-voice-msg .cau-play-btn {
  background: linear-gradient(135deg, rgba(180,80,255,0.7), rgba(100,30,200,0.8));
  box-shadow: 0 2px 8px rgba(140,50,255,0.4);
}
.chat-music-msg .cau-play-btn {
  background: linear-gradient(135deg, rgba(230,60,80,0.7), rgba(140,20,40,0.8));
  box-shadow: 0 2px 8px rgba(200,40,60,0.4);
}
.cau-play-btn:hover { transform: scale(1.1); }
.cau-play-btn:active { transform: scale(0.95); }
.cau-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
/* Mini waveform (decorative) */
.cau-waveform {
  display: flex; align-items: flex-end; gap: 2px; height: 18px; opacity: 0.45;
}
.cau-waveform span {
  display: block; width: 2.5px; border-radius: 2px;
  background: rgba(255,255,255,0.8);
}
.cau-waveform span:nth-child(1){height:6px}
.cau-waveform span:nth-child(2){height:11px}
.cau-waveform span:nth-child(3){height:16px}
.cau-waveform span:nth-child(4){height:18px}
.cau-waveform span:nth-child(5){height:14px}
.cau-waveform span:nth-child(6){height:18px}
.cau-waveform span:nth-child(7){height:12px}
.cau-waveform span:nth-child(8){height:8px}
.cau-waveform span:nth-child(9){height:15px}
.cau-waveform span:nth-child(10){height:18px}
.cau-waveform span:nth-child(11){height:11px}
.cau-waveform span:nth-child(12){height:16px}
.cau-waveform span:nth-child(13){height:9px}
.cau-waveform span:nth-child(14){height:14px}
.cau-waveform span:nth-child(15){height:7px}
/* Progress bar */
.cau-bar-wrap { display: flex; align-items: center; }
.cau-bar {
  flex: 1; height: 3px; border-radius: 3px;
  background: rgba(255,255,255,0.12);
  cursor: pointer; position: relative; overflow: hidden;
}
.cau-progress {
  height: 100%; border-radius: 3px; width: 0%;
  transition: width 0.1s linear;
}
.chat-voice-msg .cau-progress { background: linear-gradient(90deg, #a040ff, #d080ff); }
.chat-music-msg .cau-progress { background: linear-gradient(90deg, #e03050, #ff7090); }
/* Info row: label + time */
.cau-info-row {
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
}
.cau-label { font-size: 10.5px; color: rgba(255,255,255,0.5); display: flex; align-items: center; gap: 4px; }
.cau-time { font-size: 10.5px; color: rgba(255,255,255,0.4); white-space: nowrap; font-variant-numeric: tabular-nums; }


/* ══════════════════════════════════════════════════════════════
   CHAT — bigger window + avatars + delete + clear + polish
   ══════════════════════════════════════════════════════════════ */

/* Bigger window */
.chat-window {
  width: 1020px !important;
  max-width: 96vw !important;
  height: 700px !important;
  max-height: 92vh !important;
  background: linear-gradient(160deg, rgba(14,8,36,0.99) 0%, rgba(8,4,22,1) 100%) !important;
  border: 1px solid rgba(120,60,255,0.2) !important;
  box-shadow: 0 30px 80px rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,255,255,0.05) !important;
}

/* Sidebar */
.chat-sidebar { width: 240px !important; }
.chat-sidebar-header { font-size: 14px !important; font-weight: 700 !important; }

/* Header */
.chat-header {
  padding: 12px 18px !important;
  background: rgba(255,255,255,0.025) !important;
  border-bottom: 1px solid rgba(255,255,255,0.07) !important;
}
.chat-header-left { display: flex; align-items: center; gap: 10px; }
.chat-header-actions { display: flex; align-items: center; gap: 6px; }
.chat-partner-ava {
  border: 2px solid rgba(120,60,255,0.4) !important;
  box-shadow: 0 0 8px rgba(100,40,200,0.3) !important;
}
.chat-partner-name { font-size: 14px !important; font-weight: 700 !important; }
.chat-clear-btn {
  background: rgba(255,255,255,0.06); border: none; color: rgba(255,255,255,0.4);
  width: 30px; height: 30px; border-radius: 8px; cursor: pointer; font-size: 14px;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.2s, color 0.2s;
}
.chat-clear-btn:hover { background: rgba(255,60,60,0.2); color: #ff7070; }

/* Footer */
.chat-footer {
  background: rgba(255,255,255,0.025) !important;
  border-top: 1px solid rgba(255,255,255,0.07) !important;
}
.chat-input-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}
.chat-input {
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  border-radius: 14px !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
}
.chat-input:focus {
  border-color: rgba(120,60,255,0.5) !important;
  box-shadow: 0 0 0 3px rgba(100,40,200,0.12) !important;
  outline: none !important;
}

/* ── Message rows with avatar (OTHER person only) ─────────────── */
.chat-messages .chat-msg {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-end !important;
  gap: 7px !important;
  width: 76% !important;
  max-width: 76% !important;
  min-width: 0 !important;
}
.chat-messages .chat-msg-mine {
  flex-direction: row-reverse !important;
  align-self: flex-end !important;
}
.chat-msg-body {
  width: 0 !important;
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  min-width: 0 !important;
  overflow: hidden !important;
}
.chat-msg-mine .chat-msg-body { align-items: flex-end !important; }

/* Avatars */
.chat-msg-avatar {
  width: 28px; height: 28px; border-radius: 50%;
  object-fit: cover; flex-shrink: 0;
  border: 1px solid rgba(255,255,255,0.12);
  align-self: flex-end;
}
.chat-msg-avatar-ph {
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, rgba(100,40,200,0.7), rgba(50,15,100,0.8));
  width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0; align-self: flex-end;
}
.chat-msg-mine .chat-msg-avatar,
.chat-msg-mine .chat-msg-avatar-ph { display: none; }

/* Bubble polish */
.chat-messages .chat-msg:not(.chat-msg-mine) .chat-bubble {
  border-radius: 4px 16px 16px 16px !important;
  background: rgba(255,255,255,0.07) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
}
.chat-messages .chat-msg-mine .chat-bubble {
  border-radius: 16px 4px 16px 16px !important;
  background: linear-gradient(135deg, rgba(100,40,210,0.75), rgba(65,15,160,0.8)) !important;
  border: 1px solid rgba(140,70,255,0.3) !important;
}

/* Delete btn on hover */
.chat-del-btn {
  background: none; border: none; color: rgba(255,255,255,0.2);
  font-size: 14px; cursor: pointer; padding: 0 3px; margin-left: 3px;
  border-radius: 4px; opacity: 0; transition: opacity 0.15s, color 0.15s;
  vertical-align: middle;
}
.chat-msg-mine:hover .chat-del-btn { opacity: 1; }
.chat-del-btn:hover { color: #ff6b6b !important; background: rgba(255,60,60,0.15); }

/* Message context menu */
.nl-msg-menu {
  position: fixed; z-index: 9999;
  background: rgba(20,10,45,0.97);
  border: 1px solid rgba(120,60,255,0.3);
  border-radius: 10px; padding: 4px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
  min-width: 160px;
}
.nl-msg-menu button {
  display: block; width: 100%; text-align: left;
  background: none; border: none; color: var(--text);
  padding: 8px 12px; font-size: 13px; cursor: pointer; border-radius: 7px;
}
.nl-msg-menu button:hover { background: rgba(255,255,255,0.08); }
.nl-msg-menu button:last-child:hover { background: rgba(255,50,50,0.15); color: #ff7070; }

/* Clear chat popup */
.nl-clear-menu {
  position: absolute; top: 44px; right: 0;
  background: rgba(18,8,40,0.98);
  border: 1px solid rgba(120,60,255,0.3);
  border-radius: 12px; padding: 14px 16px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.5);
  z-index: 100; min-width: 200px;
}
.nl-cm-title { font-size: 11px; font-weight: 700; color: rgba(255,255,255,0.45); margin-bottom: 10px; letter-spacing: 0.5px; text-transform: uppercase; }
.nl-cm-opt { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text); cursor: pointer; padding: 5px 0; }
.nl-cm-opt input { accent-color: var(--accent); }
.nl-cm-btns { display: flex; gap: 8px; margin-top: 12px; }
.nl-cm-cancel, .nl-cm-confirm {
  flex: 1; padding: 7px; border-radius: 8px; border: none; cursor: pointer; font-size: 12px; font-weight: 600;
}
.nl-cm-cancel { background: rgba(255,255,255,0.08); color: var(--text2); }
.nl-cm-confirm { background: rgba(200,35,55,0.7); color: #fff; }
.nl-cm-cancel:hover { background: rgba(255,255,255,0.14); }
.nl-cm-confirm:hover { background: rgba(200,35,55,0.9); }

/* ══ OVERRIDE: fix audio player width + chat-window decoration ══ */
/* Audio players fill the body properly */
.chat-voice-msg, .chat-music-msg {
  min-width: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Bigger window with proper layout */
.chat-window {
  width: 1020px !important;
  max-width: 96vw !important;
  height: 700px !important;
  max-height: 92vh !important;
  background: linear-gradient(160deg, rgba(14,8,36,0.99) 0%, rgba(8,4,22,1) 100%) !important;
  border: 1px solid rgba(120,60,255,0.25) !important;
  box-shadow: 0 30px 80px rgba(0,0,0,0.7), 0 0 0 1px rgba(120,60,255,0.08), inset 0 1px 0 rgba(255,255,255,0.05) !important;
}
/* Ambient corner glows via outline trick */
.chat-window::before {
  content: '' !important;
  position: absolute !important; top: -100px !important; left: -100px !important;
  width: 350px !important; height: 350px !important;
  background: radial-gradient(circle, rgba(100,40,220,0.12) 0%, transparent 70%) !important;
  pointer-events: none !important; z-index: 0 !important;
}
.chat-window::after {
  content: '' !important;
  position: absolute !important; bottom: -80px !important; right: -80px !important;
  width: 300px !important; height: 300px !important;
  background: radial-gradient(circle, rgba(200,40,120,0.08) 0%, transparent 70%) !important;
  pointer-events: none !important; z-index: 0 !important;
}

/* Sidebar decoration */
.chat-sidebar {
  background: rgba(0,0,0,0.25) !important;
  border-right: 1px solid rgba(255,255,255,0.06) !important;
}
.chat-sidebar-header {
  background: rgba(255,255,255,0.02) !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
}
.chat-sidebar-item {
  border-radius: 10px !important;
  transition: background 0.15s !important;
}
.chat-sidebar-item:hover { background: rgba(255,255,255,0.06) !important; }
.chat-sidebar-item.active { background: rgba(120,60,255,0.18) !important; border: 1px solid rgba(120,60,255,0.25) !important; }

/* Chat main grid overlay */
.chat-main {
  background-image: linear-gradient(rgba(120,60,255,0.015) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(120,60,255,0.015) 1px, transparent 1px) !important;
  background-size: 40px 40px !important;
}

/* Header decoration */
.chat-header {
  background: rgba(255,255,255,0.02) !important;
  border-bottom: 1px solid rgba(255,255,255,0.07) !important;
  backdrop-filter: blur(4px) !important;
}
.chat-partner-ava {
  border: 2px solid rgba(120,60,255,0.45) !important;
  box-shadow: 0 0 10px rgba(100,40,200,0.35) !important;
}
.chat-partner-name { font-size: 14px !important; font-weight: 700 !important; letter-spacing: 0.2px !important; }

/* Messages scroll — subtle scrollbar */
.chat-messages::-webkit-scrollbar { width: 4px !important; }
.chat-messages::-webkit-scrollbar-track { background: transparent !important; }
.chat-messages::-webkit-scrollbar-thumb { background: rgba(120,60,255,0.3) !important; border-radius: 4px !important; }

/* Footer decoration */
.chat-footer {
  background: rgba(255,255,255,0.02) !important;
  border-top: 1px solid rgba(255,255,255,0.07) !important;
}
.chat-input {
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  border-radius: 14px !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
}
.chat-input:focus {
  border-color: rgba(120,60,255,0.5) !important;
  box-shadow: 0 0 0 3px rgba(100,40,200,0.12) !important;
  outline: none !important;
  background: rgba(255,255,255,0.09) !important;
}
.chat-send-btn {
  background: linear-gradient(135deg, rgba(100,40,210,0.85), rgba(65,15,160,0.9)) !important;
  border: 1px solid rgba(140,70,255,0.4) !important;
  border-radius: 12px !important;
  box-shadow: 0 2px 12px rgba(100,30,200,0.3) !important;
  transition: transform 0.1s, box-shadow 0.2s !important;
}
.chat-send-btn:hover {
  transform: scale(1.06) !important;
  box-shadow: 0 4px 18px rgba(100,30,200,0.5) !important;
}
.chat-voice-btn, .chat-attach-btn {
  color: rgba(255,255,255,0.5) !important;
  transition: color 0.15s !important;
}
.chat-voice-btn:hover, .chat-attach-btn:hover { color: rgba(180,100,255,0.9) !important; }

/* Bubble polish */
.chat-bubble {
  box-shadow: 0 2px 10px rgba(0,0,0,0.25) !important;
  line-height: 1.5 !important;
}
.chat-time { opacity: 0.55 !important; font-size: 10px !important; }

/* ══════════════════════════════════════════════════════════════
   CHAT — VISUAL FX: animations, glows, particles
   ══════════════════════════════════════════════════════════════ */

/* Window appear animation */
@keyframes chatWindowIn {
  from { opacity: 0; transform: scale(0.94) translateY(16px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
.chat-window { animation: chatWindowIn 0.32s cubic-bezier(0.34,1.1,0.64,1) both !important; }

/* Message appear animation */
@keyframes msgSlideIn {
  from { opacity: 0; transform: translateY(10px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.chat-msg { animation: msgSlideIn 0.22s cubic-bezier(0.34,1.2,0.64,1) both !important; }

/* Bubble hover glow */
.chat-msg:not(.chat-msg-mine) .chat-bubble:hover {
  background: rgba(255,255,255,0.11) !important;
  border-color: rgba(120,60,255,0.3) !important;
  box-shadow: 0 4px 20px rgba(100,30,200,0.15) !important;
  transition: all 0.2s !important;
}
.chat-msg-mine .chat-bubble:hover {
  box-shadow: 0 4px 24px rgba(100,30,200,0.45) !important;
  filter: brightness(1.08) !important;
  transition: all 0.2s !important;
}

/* Send button pulse glow */
@keyframes sendPulse {
  0%,100% { box-shadow: 0 2px 12px rgba(100,30,200,0.3); }
  50%      { box-shadow: 0 2px 22px rgba(120,50,255,0.65), 0 0 0 4px rgba(100,40,200,0.12); }
}
.chat-send-btn { animation: sendPulse 2.8s ease-in-out infinite !important; }

/* Active sidebar item pulsing border */
@keyframes sidebarActivePulse {
  0%,100% { border-color: rgba(120,60,255,0.25); box-shadow: none; }
  50%      { border-color: rgba(140,80,255,0.55); box-shadow: 0 0 12px rgba(120,60,255,0.2); }
}
.chat-sidebar-item.active {
  animation: sidebarActivePulse 2.5s ease-in-out infinite !important;
}

/* Header shimmer line */
@keyframes headerShimmer {
  from { background-position: -200% center; }
  to   { background-position: 200% center; }
}
.chat-header::after {
  content: '' !important;
  position: absolute !important; bottom: 0 !important; left: 0 !important;
  width: 100% !important; height: 1px !important;
  background: linear-gradient(90deg, transparent, rgba(120,60,255,0.6), rgba(200,80,255,0.4), transparent) !important;
  background-size: 200% 100% !important;
  animation: headerShimmer 3s linear infinite !important;
  pointer-events: none !important;
}

/* Input focus ring animation */
@keyframes focusRing {
  0%   { box-shadow: 0 0 0 0px rgba(100,40,200,0.4); }
  100% { box-shadow: 0 0 0 4px rgba(100,40,200,0.08); }
}
.chat-input:focus { animation: focusRing 0.25s ease forwards !important; }

/* Voice button mic glow when active */
@keyframes micGlow {
  0%,100% { color: rgba(255,80,100,0.9); filter: drop-shadow(0 0 4px rgba(255,50,80,0.6)); }
  50%     { color: rgba(255,120,140,1);   filter: drop-shadow(0 0 9px rgba(255,50,80,0.9)); }
}
.chat-voice-btn.recording { animation: micGlow 0.9s ease-in-out infinite !important; }

/* Avatar ring pulse on message */
.chat-msg-avatar, .chat-msg-avatar-ph {
  transition: box-shadow 0.2s !important;
}
.chat-msg:hover .chat-msg-avatar,
.chat-msg:hover .chat-msg-avatar-ph {
  box-shadow: 0 0 0 2px rgba(120,60,255,0.5), 0 0 12px rgba(100,40,200,0.3) !important;
}

/* Sidebar item shimmer on hover */
.chat-sidebar-item {
  position: relative !important;
  overflow: hidden !important;
}
.chat-sidebar-item::after {
  content: '' !important;
  position: absolute !important; top: 0 !important; left: -100% !important;
  width: 60% !important; height: 100% !important;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.05), transparent) !important;
  transition: left 0.4s !important;
  pointer-events: none !important;
}
.chat-sidebar-item:hover::after { left: 150% !important; }

/* Close button hover */
.chat-close {
  transition: color 0.15s, transform 0.15s, text-shadow 0.15s !important;
}
.chat-close:hover {
  color: #ff6b6b !important;
  transform: rotate(90deg) scale(1.2) !important;
  text-shadow: 0 0 8px rgba(255,80,80,0.6) !important;
}

/* Modal overlay vignette */
.chat-modal {
  background: radial-gradient(ellipse at center, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.75) 100%) !important;
}

/* ══ Sidebar clear button ══ */
.chat-sidebar-item { position: relative !important; }
.chat-sidebar-clear-btn {
  display: none;
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  background: none; border: none; color: rgba(255,255,255,0.3);
  font-size: 13px; cursor: pointer; padding: 4px 5px; border-radius: 6px;
  transition: color 0.15s, background 0.15s;
  z-index: 2;
}
.chat-sidebar-item:hover .chat-sidebar-clear-btn,
.chat-sidebar-item.active .chat-sidebar-clear-btn { display: block; }
.chat-sidebar-clear-btn:hover { color: #ff6b6b !important; background: rgba(255,60,60,0.15); }

/* ══ Clear chat popup — fixed, solid background ══ */
#nl-clear-menu {
  background: rgba(14,8,36,0.99) !important;
  border: 1px solid rgba(120,60,255,0.4) !important;
  border-radius: 14px !important;
  padding: 16px !important;
  box-shadow: 0 16px 48px rgba(0,0,0,0.7), 0 0 0 1px rgba(120,60,255,0.1) !important;
  z-index: 99999 !important;
  min-width: 210px !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  animation: menuPopIn 0.18s cubic-bezier(0.34,1.3,0.64,1) both;
}
@keyframes menuPopIn {
  from { opacity: 0; transform: scale(0.92) translateY(-6px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
#nl-clear-menu .nl-cm-title {
  font-size: 12px; font-weight: 700; color: rgba(255,255,255,0.5);
  letter-spacing: 0.8px; text-transform: uppercase; margin-bottom: 12px;
}
#nl-clear-menu .nl-cm-opt {
  display: flex; align-items: center; gap: 9px;
  font-size: 13px; color: rgba(255,255,255,0.85);
  cursor: pointer; padding: 6px 2px; border-radius: 7px;
  transition: background 0.15s;
}
#nl-clear-menu .nl-cm-opt:hover { background: rgba(255,255,255,0.05); padding-left: 6px; }
#nl-clear-menu .nl-cm-opt input { accent-color: #9b50ff; width: 15px; height: 15px; }
#nl-clear-menu .nl-cm-btns { display: flex; gap: 8px; margin-top: 14px; }
#nl-clear-menu .nl-cm-cancel {
  flex: 1; padding: 8px; border-radius: 9px; border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.07); color: rgba(255,255,255,0.7);
  cursor: pointer; font-size: 12px; font-weight: 600; transition: background 0.15s;
}
#nl-clear-menu .nl-cm-cancel:hover { background: rgba(255,255,255,0.13); }
#nl-clear-menu .nl-cm-confirm {
  flex: 1; padding: 8px; border-radius: 9px; border: none;
  background: linear-gradient(135deg, rgba(200,35,55,0.85), rgba(140,15,35,0.9));
  color: #fff; cursor: pointer; font-size: 12px; font-weight: 600;
  box-shadow: 0 2px 10px rgba(200,30,50,0.3);
  transition: filter 0.15s, box-shadow 0.15s;
}
#nl-clear-menu .nl-cm-confirm:hover { filter: brightness(1.15); box-shadow: 0 4px 16px rgba(200,30,50,0.5); }

/* ══ Extra visual polish ══ */
/* Chat modal blur vignette */
.chat-modal::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 30% 60%, rgba(60,10,120,0.15) 0%, transparent 60%),
              radial-gradient(ellipse at 70% 20%, rgba(120,10,80,0.1) 0%, transparent 50%);
  pointer-events: none; z-index: 0;
}

/* Sidebar scrollbar */
.chat-sidebar-list::-webkit-scrollbar { width: 3px; }
.chat-sidebar-list::-webkit-scrollbar-track { background: transparent; }
.chat-sidebar-list::-webkit-scrollbar-thumb { background: rgba(120,60,255,0.25); border-radius: 3px; }

/* Partner avatar ring spin on open */
@keyframes avatarRingIn {
  from { box-shadow: 0 0 0 0px rgba(120,60,255,0); }
  to   { box-shadow: 0 0 0 3px rgba(120,60,255,0.35), 0 0 16px rgba(100,40,200,0.4); }
}
.chat-partner-ava { animation: avatarRingIn 0.4s 0.2s ease both !important; }

/* Unread badge pulse */
@keyframes unreadPing {
  0%,100% { transform: scale(1); }
  50%     { transform: scale(1.18); }
}
.chat-sidebar-unread { animation: unreadPing 1.5s ease-in-out infinite; }

/* Loading dots animation */
@keyframes loadDot {
  0%,80%,100% { opacity: 0.2; transform: scale(0.8); }
  40%         { opacity: 1;   transform: scale(1); }
}
.chat-loading::after {
  content: ' ●●●';
  display: inline-block;
  animation: loadDot 1.2s ease-in-out infinite;
  letter-spacing: 2px; font-size: 10px; opacity: 0.6;
}

/* Chat no-dialog subtle float */
@keyframes floatIcon {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-8px); }
}
.chat-no-dialog-icon { animation: floatIcon 3s ease-in-out infinite; }

/* Message time fade in on hover */
.chat-time { transition: opacity 0.2s !important; opacity: 0 !important; }
.chat-msg:hover .chat-time { opacity: 0.6 !important; }

/* ══ SCROLL ISOLATION ══ */
.chat-messages { overscroll-behavior: contain !important; }

/* ══ UNREAD DIVIDER ══ */
.chat-unread-divider {
  display: flex; align-items: center; gap: 12px;
  margin: 10px 0; color: rgba(255,180,80,0.75);
  font-size: 11px; font-weight: 700; letter-spacing: 0.8px; text-transform: uppercase;
  animation: msgSlideIn 0.3s ease both;
}
.chat-unread-divider::before, .chat-unread-divider::after {
  content: ''; flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,160,50,0.35), transparent);
}
.chat-unread-divider span {
  padding: 3px 10px; border-radius: 20px;
  background: rgba(255,140,30,0.12); border: 1px solid rgba(255,140,30,0.25);
  white-space: nowrap;
}

/* ══ CLEAR CHAT POPUP — proper size ══ */
#nl-clear-menu {
  width: 240px !important;
  max-width: 90vw !important;
  transform-origin: top right !important;
}

/* ══ PARTICLES BOOST ══ */
#chat-particles-cv { opacity: 0.6 !important; }

/* ══ GLOW HALOS on messages ══ */
@keyframes haloBreath {
  0%,100% { opacity: 0; }
  50%      { opacity: 1; }
}
.chat-msg-mine .chat-bubble::after {
  content: '';
  position: absolute; inset: -4px; border-radius: inherit;
  background: radial-gradient(ellipse, rgba(120,50,255,0.12), transparent 70%);
  opacity: 0; pointer-events: none;
  transition: opacity 0.3s;
}
.chat-msg-mine:hover .chat-bubble::after { opacity: 1; }
.chat-bubble { position: relative !important; }

/* ══ SIDEBAR item glow on active ══ */
.chat-sidebar-item.active {
  background: rgba(100,40,220,0.2) !important;
  box-shadow: inset 2px 0 0 rgba(140,80,255,0.7) !important;
}

/* ══ FOOTER send glow ══ */
.chat-footer {
  position: relative !important;
}
.chat-footer::before {
  content: '';
  position: absolute; top: 0; left: 10%; right: 10%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(120,60,255,0.5), rgba(200,80,255,0.4), transparent);
  animation: headerShimmer 3s linear infinite;
}

/* ══ WINDOW border glow pulse ══ */
@keyframes borderGlow {
  0%,100% { border-color: rgba(120,60,255,0.25); box-shadow: 0 30px 80px rgba(0,0,0,0.7), 0 0 0 1px rgba(120,60,255,0.08); }
  50%      { border-color: rgba(140,80,255,0.45); box-shadow: 0 30px 80px rgba(0,0,0,0.7), 0 0 30px rgba(100,40,200,0.2), 0 0 0 1px rgba(140,80,255,0.15); }
}
.chat-window { animation: chatWindowIn 0.32s cubic-bezier(0.34,1.1,0.64,1) both, borderGlow 4s 0.4s ease-in-out infinite !important; }

/* ══ MESSAGE HOVER — subtle lift ══ */
.chat-msg {
  transition: transform 0.15s ease !important;
}
.chat-msg:hover { transform: translateY(-1px) !important; }

/* ══ SEND BUTTON ripple ══ */
@keyframes rippleSend {
  0%   { transform: scale(0); opacity: 0.6; }
  100% { transform: scale(2.5); opacity: 0; }
}
.chat-send-btn {
  position: relative !important;
  overflow: hidden !important;
}
.chat-send-btn::after {
  content: '';
  position: absolute; inset: 0; border-radius: inherit;
  background: rgba(255,255,255,0.3);
  transform: scale(0); opacity: 0;
  pointer-events: none;
}
.chat-send-btn:active::after {
  animation: rippleSend 0.4s ease-out forwards;
}

/* ══ INPUT typing glow ══ */
@keyframes typingPulse {
  0%,100% { border-color: rgba(120,60,255,0.5); box-shadow: 0 0 0 3px rgba(100,40,200,0.12); }
  50%     { border-color: rgba(160,90,255,0.7);  box-shadow: 0 0 0 4px rgba(120,50,220,0.18), 0 0 12px rgba(100,40,200,0.15); }
}
.chat-input:focus { animation: typingPulse 2s ease-in-out infinite !important; }

/* ══ SIDEBAR avatar online dot pulse ══ */
@keyframes onlineDotPulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(80,220,80,0.5); }
  50%     { box-shadow: 0 0 0 4px rgba(80,220,80,0); }
}
.chat-sidebar-ava .online-dot { animation: onlineDotPulse 2s ease-in-out infinite; }

/* ══ SCROLLBAR glow ══ */
.chat-messages::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(140,70,255,0.5), rgba(100,30,200,0.3)) !important;
  box-shadow: 0 0 4px rgba(120,60,255,0.3) !important;
}

/* ══════════════════════════════════════════════════
   CHAT v3 — teal/indigo redesign, fixed layout
   ══════════════════════════════════════════════════ */
.chat-modal {
  display: none !important; position: fixed !important; inset: 0 !important;
  z-index: 9000 !important; align-items: center !important; justify-content: center !important;
  background: radial-gradient(ellipse at 40% 50%, rgba(5,10,30,0.78) 0%, rgba(0,0,0,0.85) 100%) !important;
  backdrop-filter: blur(4px) !important;
}
.chat-modal.open { display: flex !important; }

.chat-window {
  position: relative !important; display: flex !important; flex-direction: row !important;
  width: min(1020px, 96vw) !important; height: min(680px, 90vh) !important;
  border-radius: 20px !important; overflow: hidden !important;
  border: 1px solid rgba(60,190,230,0.16) !important;
  box-shadow: 0 0 0 1px rgba(60,190,230,0.05), 0 8px 32px rgba(0,0,0,0.6),
              0 32px 80px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.05) !important;
  background: linear-gradient(145deg, rgba(5,8,24,0.99) 0%, rgba(4,10,28,0.99) 50%, rgba(6,4,20,0.99) 100%) !important;
  animation: chatWindowIn 0.35s cubic-bezier(0.34,1.1,0.64,1) both,
             borderGlowTeal 4s 0.5s ease-in-out infinite !important;
}
@keyframes borderGlowTeal {
  0%,100% { border-color: rgba(60,190,230,0.16); }
  50%      { border-color: rgba(60,210,250,0.32); box-shadow: 0 0 0 1px rgba(60,210,250,0.1), 0 8px 32px rgba(0,0,0,0.6), 0 0 40px rgba(30,160,210,0.14), 0 32px 80px rgba(0,0,0,0.5); }
}
.chat-window::before {
  content: "" !important; position: absolute !important; top: -100px !important; left: -80px !important;
  width: 380px !important; height: 380px !important; pointer-events: none !important; z-index: 0 !important;
  background: radial-gradient(circle, rgba(30,150,200,0.08) 0%, transparent 65%) !important;
}
.chat-window::after {
  content: "" !important; position: absolute !important; bottom: -80px !important; right: -60px !important;
  width: 300px !important; height: 300px !important; pointer-events: none !important; z-index: 0 !important;
  background: radial-gradient(circle, rgba(120,30,220,0.07) 0%, transparent 65%) !important;
}

/* Sidebar */
.chat-sidebar {
  width: 230px !important; flex-shrink: 0 !important; display: flex !important;
  flex-direction: column !important; position: relative !important; z-index: 1 !important;
  background: rgba(4,14,32,0.97) !important; border-right: 1px solid rgba(40,170,220,0.1) !important;
}
.chat-sidebar-header {
  padding: 16px 14px !important; flex-shrink: 0 !important;
  font-size: 13px !important; font-weight: 800 !important; letter-spacing: 0.5px !important;
  border-bottom: 1px solid rgba(40,170,220,0.1) !important;
  background: rgba(6,20,44,0.6) !important;
  display: flex !important; align-items: center !important; justify-content: space-between !important;
  color: rgba(120,200,240,0.9) !important;
}
.chat-close {
  background: none !important; border: none !important;
  color: rgba(255,255,255,0.3) !important; cursor: pointer !important;
  font-size: 16px !important; transition: color 0.15s, transform 0.2s !important;
}
.chat-close:hover { color: #ff6b6b !important; transform: rotate(90deg) scale(1.2) !important; }
.chat-sidebar-list { flex: 1 !important; overflow-y: auto !important; padding: 8px 6px !important; }
.chat-sidebar-list::-webkit-scrollbar { width: 3px !important; }
.chat-sidebar-list::-webkit-scrollbar-thumb { background: rgba(50,180,220,0.2) !important; border-radius: 3px !important; }
.chat-sidebar-item {
  position: relative !important; overflow: hidden !important;
  display: flex !important; gap: 10px !important; align-items: center !important;
  padding: 9px 10px !important; border-radius: 12px !important;
  cursor: pointer !important; transition: background 0.15s !important;
  border: 1px solid transparent !important;
}
.chat-sidebar-item:hover { background: rgba(40,160,220,0.08) !important; }
.chat-sidebar-item.active {
  background: rgba(25,120,190,0.16) !important; border-color: rgba(50,170,220,0.2) !important;
  box-shadow: inset 3px 0 0 rgba(50,200,240,0.65) !important;
  animation: sidebarActivePulse 2.5s ease-in-out infinite !important;
}
@keyframes sidebarActivePulse {
  0%,100% { box-shadow: inset 3px 0 0 rgba(50,200,240,0.65); }
  50%      { box-shadow: inset 3px 0 0 rgba(70,230,255,0.9), 0 0 12px rgba(40,170,220,0.12); }
}
.chat-sidebar-item::after {
  content: "" !important; position: absolute !important; top: 0 !important; left: -100% !important;
  width: 60% !important; height: 100% !important; pointer-events: none !important;
  background: linear-gradient(90deg, transparent, rgba(60,200,240,0.04), transparent) !important;
  transition: left 0.4s !important;
}
.chat-sidebar-item:hover::after { left: 150% !important; }
.chat-sidebar-name { font-size: 13px !important; font-weight: 600 !important; color: rgba(210,235,255,0.9) !important; }
.chat-sidebar-preview { font-size: 11px !important; color: rgba(120,160,200,0.5) !important; }
.chat-sidebar-clear-btn {
  display: none !important; position: absolute !important; right: 8px !important;
  top: 50% !important; transform: translateY(-50%) !important;
  background: none !important; border: none !important;
  color: rgba(255,255,255,0.25) !important; cursor: pointer !important;
  font-size: 13px !important; padding: 4px 5px !important; border-radius: 6px !important;
  z-index: 2 !important; transition: color 0.15s, background 0.15s !important;
}
.chat-sidebar-item:hover .chat-sidebar-clear-btn,
.chat-sidebar-item.active .chat-sidebar-clear-btn { display: block !important; }
.chat-sidebar-clear-btn:hover { color: #ff6b6b !important; background: rgba(255,50,50,0.12) !important; }

/* Chat main */
.chat-main {
  flex: 1 !important; display: flex !important; flex-direction: column !important;
  min-width: 0 !important; overflow: hidden !important;
  position: relative !important; z-index: 1 !important;
  background-image: linear-gradient(rgba(40,160,220,0.012) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(40,160,220,0.012) 1px, transparent 1px) !important;
  background-size: 36px 36px !important;
}

/* Header */
.chat-header {
  display: flex !important; align-items: center !important; justify-content: space-between !important;
  padding: 12px 18px !important; flex-shrink: 0 !important;
  background: rgba(5,16,38,0.8) !important;
  border-bottom: 1px solid rgba(40,170,220,0.1) !important;
  position: relative !important; z-index: 2 !important;
}
.chat-header::after {
  content: "" !important; position: absolute !important;
  bottom: 0 !important; left: 5% !important; right: 5% !important; height: 1px !important;
  background: linear-gradient(90deg, transparent, rgba(60,200,240,0.55), rgba(140,80,255,0.4), transparent) !important;
  animation: headerShimmer 4s linear infinite !important;
}
.chat-header-left { display: flex !important; align-items: center !important; gap: 12px !important; }
.chat-header-actions { display: flex !important; align-items: center !important; gap: 6px !important; }
.chat-partner-ava {
  width: 36px !important; height: 36px !important; border-radius: 50% !important;
  overflow: hidden !important; flex-shrink: 0 !important;
  border: 2px solid rgba(50,190,240,0.4) !important;
  box-shadow: 0 0 14px rgba(30,170,220,0.35), 0 0 0 4px rgba(30,170,220,0.08) !important;
  animation: avatarRingIn 0.5s 0.2s ease both !important;
}
.chat-partner-name { font-size: 14px !important; font-weight: 700 !important; color: rgba(200,235,255,0.95) !important; }

/* Messages */
.chat-messages {
  flex: 1 !important; overflow-y: auto !important; min-height: 0 !important;
  padding: 16px 16px 8px !important; display: flex !important; flex-direction: column !important;
  gap: 4px !important; position: relative !important; z-index: 1 !important;
  overscroll-behavior: contain !important;
}
.chat-messages::-webkit-scrollbar { width: 4px !important; }
.chat-messages::-webkit-scrollbar-track { background: transparent !important; }
.chat-messages::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(60,200,240,0.4), rgba(80,40,200,0.3)) !important;
  border-radius: 4px !important;
}
.chat-messages .chat-msg {
  display: flex !important; flex-direction: row !important;
  align-items: flex-end !important; gap: 7px !important;
  width: 74% !important; max-width: 74% !important;
  animation: msgSlideIn 0.2s cubic-bezier(0.34,1.2,0.64,1) both !important;
  transition: transform 0.15s !important;
}
.chat-messages .chat-msg:hover { transform: translateY(-1px) !important; }
.chat-messages .chat-msg-mine { align-self: flex-end !important; flex-direction: row-reverse !important; }
.chat-msg-body {
  width: 0 !important; flex: 1 !important; display: flex !important;
  flex-direction: column !important; align-items: flex-start !important;
  min-width: 0 !important; overflow: hidden !important;
}
.chat-msg-mine .chat-msg-body { align-items: flex-end !important; }
.chat-bubble {
  border-radius: 16px !important; padding: 9px 13px !important;
  font-size: 13.5px !important; line-height: 1.5 !important;
  word-break: break-word !important; position: relative !important;
}
.chat-messages .chat-msg:not(.chat-msg-mine) .chat-bubble {
  background: rgba(12,45,75,0.7) !important;
  border: 1px solid rgba(45,165,215,0.18) !important;
  border-radius: 4px 16px 16px 16px !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.2), inset 0 1px 0 rgba(60,200,240,0.06) !important;
  color: rgba(205,235,255,0.92) !important;
}
.chat-messages .chat-msg-mine .chat-bubble {
  background: linear-gradient(135deg, rgba(28,65,175,0.75), rgba(65,18,172,0.82)) !important;
  border: 1px solid rgba(65,125,255,0.28) !important;
  border-radius: 16px 4px 16px 16px !important;
  box-shadow: 0 2px 14px rgba(28,48,200,0.28), inset 0 1px 0 rgba(120,160,255,0.1) !important;
  color: rgba(220,235,255,0.95) !important;
}
.chat-time {
  font-size: 10px !important; color: rgba(100,160,210,0.45) !important;
  padding: 2px 4px !important; opacity: 0 !important; transition: opacity 0.2s !important;
}
.chat-msg:hover .chat-time { opacity: 1 !important; }
.chat-msg-avatar, .chat-msg-avatar-ph {
  width: 28px !important; height: 28px !important; border-radius: 50% !important;
  flex-shrink: 0 !important; align-self: flex-end !important;
  border: 1px solid rgba(50,180,230,0.22) !important; transition: box-shadow 0.2s !important;
}
.chat-msg:hover .chat-msg-avatar, .chat-msg:hover .chat-msg-avatar-ph {
  box-shadow: 0 0 0 2px rgba(50,200,240,0.4), 0 0 10px rgba(30,170,220,0.3) !important;
}
.chat-msg-mine .chat-msg-avatar, .chat-msg-mine .chat-msg-avatar-ph { display: none !important; }
.chat-msg-avatar-ph {
  display: flex !important; align-items: center !important; justify-content: center !important;
  font-size: 11px !important; font-weight: 700 !important; color: #fff !important;
  background: linear-gradient(135deg, rgba(18,100,160,0.9), rgba(8,65,125,0.95)) !important;
}

/* Footer */
.chat-footer {
  display: flex !important; align-items: center !important;
  padding: 10px 14px !important; flex-shrink: 0 !important;
  background: rgba(4,12,30,0.88) !important;
  border-top: 1px solid rgba(40,170,220,0.1) !important;
  position: relative !important; z-index: 2 !important; gap: 0 !important;
}
.chat-footer::before {
  content: "" !important; position: absolute !important;
  top: 0 !important; left: 8% !important; right: 8% !important; height: 1px !important;
  background: linear-gradient(90deg, transparent, rgba(50,190,240,0.4), rgba(100,60,240,0.3), transparent) !important;
  animation: headerShimmer 4s 2s linear infinite !important;
}
.chat-input-row { display: flex !important; align-items: center !important; gap: 8px !important; flex: 1 !important; min-width: 0 !important; }
.chat-input {
  flex: 1 !important; min-width: 0 !important;
  background: rgba(8,20,46,0.8) !important;
  border: 1px solid rgba(45,145,200,0.2) !important;
  border-radius: 14px !important; padding: 10px 14px !important;
  font-size: 13.5px !important; color: rgba(205,235,255,0.9) !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
}
.chat-input::placeholder { color: rgba(80,140,190,0.4) !important; }
.chat-input:focus {
  border-color: rgba(50,190,235,0.5) !important;
  box-shadow: 0 0 0 3px rgba(30,160,220,0.12), 0 0 16px rgba(30,160,220,0.07) !important;
  outline: none !important; background: rgba(8,26,56,0.9) !important;
  animation: typingPulse 2s ease-in-out infinite !important;
}
@keyframes typingPulse {
  0%,100% { border-color: rgba(50,190,235,0.5); box-shadow: 0 0 0 3px rgba(30,160,220,0.12); }
  50%      { border-color: rgba(70,220,255,0.65); box-shadow: 0 0 0 4px rgba(40,180,240,0.18), 0 0 14px rgba(30,160,220,0.12); }
}
.chat-send-btn {
  width: 40px !important; height: 40px !important;
  background: linear-gradient(135deg, rgba(18,105,200,0.92), rgba(48,28,200,0.9)) !important;
  border: 1px solid rgba(50,165,255,0.32) !important;
  border-radius: 12px !important; color: #fff !important; cursor: pointer !important;
  position: relative !important; overflow: hidden !important;
  transition: transform 0.1s, box-shadow 0.2s !important;
  animation: sendPulseTeal 3s ease-in-out infinite !important;
}
@keyframes sendPulseTeal {
  0%,100% { box-shadow: 0 2px 14px rgba(18,96,200,0.38); }
  50%      { box-shadow: 0 2px 24px rgba(28,140,255,0.62), 0 0 0 3px rgba(20,115,220,0.12); }
}
.chat-send-btn:hover { transform: scale(1.06) !important; box-shadow: 0 4px 24px rgba(20,128,245,0.58) !important; }
.chat-send-btn:active::after {
  content: "" !important; position: absolute !important; inset: 0 !important;
  background: rgba(255,255,255,0.3) !important; border-radius: inherit !important;
  animation: rippleSend 0.4s ease-out forwards !important;
}
.chat-voice-btn, .chat-attach-btn {
  background: none !important; border: none !important;
  color: rgba(60,150,210,0.5) !important; cursor: pointer !important;
  font-size: 17px !important; padding: 6px !important;
  transition: color 0.15s, transform 0.15s !important;
}
.chat-voice-btn:hover, .chat-attach-btn:hover { color: rgba(60,210,250,0.9) !important; transform: scale(1.1) !important; }

/* Audio players */
.chat-voice-msg, .chat-music-msg {
  min-width: 0 !important; max-width: 100% !important; width: 100% !important;
  box-sizing: border-box !important;
}
.chat-voice-msg {
  background: linear-gradient(135deg, rgba(12,55,105,0.6), rgba(6,32,72,0.75)) !important;
  border: 1px solid rgba(38,148,215,0.28) !important;
  box-shadow: 0 2px 14px rgba(8,55,155,0.22) !important;
}
.chat-msg-mine .chat-voice-msg {
  background: linear-gradient(135deg, rgba(22,52,152,0.65), rgba(42,14,152,0.75)) !important;
  border-color: rgba(68,108,255,0.28) !important;
}
.chat-music-msg {
  background: linear-gradient(135deg, rgba(88,14,35,0.6), rgba(52,7,22,0.75)) !important;
  border: 1px solid rgba(185,42,72,0.28) !important;
}

/* Misc */
.chat-not-friends { text-align: center; padding: 30px 20px; color: rgba(100,160,210,0.6); }
.chat-no-dialog { color: rgba(80,150,210,0.45) !important; }
.chat-no-dialog-icon { font-size: 40px !important; animation: floatIcon 3s ease-in-out infinite !important; opacity: 0.35 !important; }
.chat-del-btn {
  opacity: 0 !important; transition: opacity 0.15s !important; background: none !important;
  border: none !important; font-size: 14px !important; cursor: pointer !important;
  padding: 0 3px !important; border-radius: 4px !important; color: rgba(255,255,255,0.3) !important;
}
.chat-msg-mine:hover .chat-del-btn { opacity: 1 !important; }
.chat-del-btn:hover { color: #ff6b6b !important; background: rgba(255,50,50,0.15) !important; }
#nl-clear-menu {
  width: 240px !important; max-width: 90vw !important;
  background: rgba(4,12,28,0.99) !important;
  border: 1px solid rgba(45,170,220,0.28) !important;
  border-radius: 16px !important; padding: 18px !important;
  box-shadow: 0 20px 60px rgba(0,0,0,0.75), 0 0 0 1px rgba(45,170,220,0.06) !important;
  z-index: 99999 !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  animation: menuPopIn 0.2s cubic-bezier(0.34,1.2,0.64,1) both !important;
}
.chat-unread-divider {
  display: flex !important; align-items: center !important; gap: 12px !important;
  margin: 10px 0 !important; color: rgba(255,170,60,0.75) !important;
  font-size: 11px !important; font-weight: 700 !important;
  letter-spacing: 0.8px !important; text-transform: uppercase !important;
}
.chat-unread-divider::before, .chat-unread-divider::after {
  content: "" !important; flex: 1 !important; height: 1px !important;
  background: linear-gradient(90deg, transparent, rgba(255,150,40,0.3), transparent) !important;
}
.chat-unread-divider span {
  padding: 3px 10px !important; border-radius: 20px !important;
  background: rgba(255,130,20,0.1) !important; border: 1px solid rgba(255,130,20,0.22) !important;
  white-space: nowrap !important;
}
.chat-modal::before {
  content: "" !important; position: absolute !important; inset: 0 !important;
  background: radial-gradient(ellipse at 25% 60%, rgba(20,80,160,0.1) 0%, transparent 55%),
              radial-gradient(ellipse at 75% 20%, rgba(100,20,180,0.07) 0%, transparent 50%) !important;
  pointer-events: none !important; z-index: 0 !important;
}

/* ══════════════════════════════════════════════════
   CHAT v4 — read receipts + deep indigo polish
   ══════════════════════════════════════════════════ */

/* Read receipt ticks */
.chat-tick {
  display: inline-block;
  font-size: 11px;
  color: rgba(120,180,240,0.55);
  margin-left: 4px;
  vertical-align: middle;
  line-height: 1;
  letter-spacing: -1px;
  transition: color 0.4s, text-shadow 0.4s;
  position: relative;
}
.chat-tick::after {
  content: "✓";
  position: absolute;
  left: 4px;
  top: 0;
  opacity: 0;
  color: inherit;
  transition: opacity 0.4s;
}
.chat-tick-read {
  color: rgba(60,210,255,0.9) !important;
  text-shadow: 0 0 8px rgba(40,200,255,0.5) !important;
}
.chat-tick-read::after { opacity: 1 !important; }

/* ── Enhanced particles canvas ── */
#chat-particles-cv { opacity: 0.7 !important; }

/* ── Deep indigo window glow ── */
.chat-window {
  box-shadow:
    0 0 0 1px rgba(60,190,230,0.07),
    0 0 60px rgba(20,80,200,0.12),
    0 8px 32px rgba(0,0,0,0.65),
    0 32px 80px rgba(0,0,0,0.55),
    inset 0 1px 0 rgba(100,180,255,0.06) !important;
}

/* ── Sidebar gradient stripe ── */
.chat-sidebar::before {
  content: "";
  position: absolute; top: 0; left: 0; bottom: 0; width: 1px;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(60,200,240,0.4) 30%,
    rgba(120,80,255,0.3) 70%,
    transparent 100%);
  pointer-events: none; z-index: 2;
}

/* ── Message bubble glow on hover ── */
.chat-msg:not(.chat-msg-mine):hover .chat-bubble {
  background: rgba(16,56,88,0.75) !important;
  border-color: rgba(55,175,225,0.28) !important;
  box-shadow: 0 4px 20px rgba(20,100,180,0.2), inset 0 1px 0 rgba(60,200,240,0.08) !important;
}
.chat-msg-mine:hover .chat-bubble {
  filter: brightness(1.1) !important;
  box-shadow: 0 4px 22px rgba(40,60,210,0.38), inset 0 1px 0 rgba(140,180,255,0.12) !important;
}

/* ── Scan line effect on messages area ── */
.chat-messages::after {
  content: "";
  position: sticky; bottom: 0; left: 0; right: 0;
  height: 40px; pointer-events: none;
  background: linear-gradient(transparent, rgba(4,10,28,0.6));
}

/* ── Header partner status dot ── */
.chat-partner-status {
  width: 8px; height: 8px; border-radius: 50%;
  background: #4ade80; flex-shrink: 0;
  box-shadow: 0 0 6px rgba(74,222,128,0.7);
  animation: statusPulse 2s ease-in-out infinite;
}
@keyframes statusPulse {
  0%,100% { box-shadow: 0 0 6px rgba(74,222,128,0.7); }
  50%      { box-shadow: 0 0 12px rgba(74,222,128,0.9), 0 0 0 3px rgba(74,222,128,0.15); }
}

/* ── Sidebar avatar glow ring ── */
.chat-sidebar-ava {
  position: relative;
  transition: filter 0.2s;
}
.chat-sidebar-item.active .chat-sidebar-ava,
.chat-sidebar-item:hover .chat-sidebar-ava {
  filter: drop-shadow(0 0 4px rgba(50,200,240,0.5));
}

/* ── Chat window inner top glow ── */
.chat-main::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 80px;
  background: linear-gradient(rgba(30,100,200,0.04), transparent);
  pointer-events: none; z-index: 0;
}

/* ── Loading animation ── */
.chat-loading {
  display: flex; align-items: center; gap: 6px;
  margin: auto; color: rgba(80,160,220,0.5); font-size: 13px;
}
.chat-loading::before {
  content: "";
  width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid rgba(60,190,240,0.2);
  border-top-color: rgba(60,190,240,0.8);
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Message timestamp line ── */
.chat-date-sep {
  text-align: center; font-size: 10px;
  color: rgba(80,140,200,0.4); margin: 8px 0;
  letter-spacing: 0.5px;
}

/* ── Voice row indigo style ── */
.chat-voice-row {
  background: rgba(8,18,50,0.95) !important;
  border-top: 1px solid rgba(40,160,220,0.15) !important;
}
.cvr-cancel { color: rgba(80,160,220,0.6) !important; }
.cvr-timer { color: rgba(60,200,240,0.8) !important; }
.cvr-dot { background: rgba(60,200,240,0.9) !important; box-shadow: 0 0 8px rgba(40,180,220,0.6) !important; }
.cvr-waves span { background: rgba(60,200,240,0.7) !important; }

/* ── "Not friends" state ── */
.chat-not-friends {
  display: flex; flex-direction: column; align-items: center;
  gap: 10px; margin: auto; text-align: center; padding: 30px;
}
.chat-not-friends-icon { font-size: 36px; opacity: 0.4; animation: floatIcon 3s ease-in-out infinite; }
.chat-not-friends-text { font-size: 15px; font-weight: 700; color: rgba(150,200,240,0.7); }
.chat-not-friends-sub { font-size: 12px; color: rgba(80,140,200,0.45); line-height: 1.5; }
.chat-add-friend-btn {
  margin-top: 6px; padding: 8px 20px; border-radius: 10px; border: none; cursor: pointer;
  background: linear-gradient(135deg, rgba(30,100,200,0.8), rgba(60,30,200,0.8));
  color: #fff; font-size: 12px; font-weight: 600;
  border: 1px solid rgba(60,160,255,0.3);
  box-shadow: 0 2px 12px rgba(30,80,200,0.3);
  transition: filter 0.15s, box-shadow 0.15s;
}
.chat-add-friend-btn:hover { filter: brightness(1.15); box-shadow: 0 4px 18px rgba(30,100,240,0.5); }

/* ── Notification badge on sidebar ── */
.chat-sidebar-unread {
  background: linear-gradient(135deg, rgba(30,120,210,0.9), rgba(60,40,210,0.9)) !important;
  border: 1px solid rgba(60,170,255,0.4) !important;
  box-shadow: 0 0 8px rgba(40,140,255,0.4) !important;
}

/* ── Window appear keyframe (override with better spring) ── */
@keyframes chatWindowIn {
  0%   { opacity: 0; transform: scale(0.92) translateY(20px); }
  60%  { opacity: 1; transform: scale(1.01) translateY(-3px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

/* ── Message stagger animation ── */
.chat-msg:nth-child(1) { animation-delay: 0ms !important; }
.chat-msg:nth-child(2) { animation-delay: 30ms !important; }
.chat-msg:nth-child(3) { animation-delay: 60ms !important; }
.chat-msg:nth-child(4) { animation-delay: 90ms !important; }
.chat-msg:nth-child(5) { animation-delay: 120ms !important; }

/* ── Time and ticks always visible ── */
.chat-time { opacity: 0.65 !important; transition: none !important; }
.chat-msg:hover .chat-time { opacity: 0.65 !important; }
.chat-tick { opacity: 1 !important; }