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

:root {
  --bg:        rgba(10, 10, 14, 0.92);
  --bg2:       rgba(18, 18, 24, 0.75);
  --bg3:       rgba(28, 28, 34, 0.6);
  --accent:    #888888;
  --accent2:   #666666;
  --text:      #e8e8e8;
  --text-dim:  #808080;
  --danger:    #cc4444;
  --success:   #669966;
  --border:    rgba(255, 255, 255, 0.06);
  --glow:      0 0 10px rgba(255, 255, 255, 0.08);
  --glow-lg:   0 0 28px rgba(0, 0, 0, 0.6);
  --text-glow: 0 0 8px rgba(255, 255, 255, 0.25);
  --radius:    16px;
  --font:      'Inter', system-ui, sans-serif;
  /* Liquid Glass core */
  --lg-shine:  145deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.02) 30%, transparent 50%, rgba(255,255,255,0.03) 70%, rgba(255,255,255,0.06) 100%;
  --lg-bg:     rgba(14, 14, 22, 0.5);
  --lg-border: rgba(255,255,255,0.08);
  --lg-highlight: inset 0 1.5px 0 rgba(255,255,255,0.12);
  --lg-shadow-bottom: inset 0 -1.5px 0 rgba(0,0,0,0.18);
  --lg-glow:   0 8px 32px rgba(0,0,0,0.4);
  --lg-blur:   blur(20px) saturate(1.4);
}

html, body {
  height: 100%;
  background: #050508;
  color: var(--text);
  font-family: var(--font);
  font-size: 15px;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.4;
}

/* Background ambient glow — подсвечивает жидкое стекло снизу */
#app::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse 90% 60% at 15% 5%, rgba(70, 40, 130, 0.2) 0%, transparent 60%),
    radial-gradient(ellipse 70% 50% at 85% 95%, rgba(20, 80, 140, 0.15) 0%, transparent 55%),
    radial-gradient(ellipse 60% 40% at 50% 50%, rgba(90, 30, 120, 0.08) 0%, transparent 45%);
  pointer-events: none;
}

/* ─── Liquid Glass utility ─────────────────────────────────────────────────────── */
.glass {
  background: linear-gradient(var(--lg-shine));
  background-color: var(--lg-bg);
  backdrop-filter: var(--lg-blur);
  -webkit-backdrop-filter: var(--lg-blur);
  border: 1px solid var(--lg-border);
  box-shadow: var(--lg-highlight), var(--lg-shadow-bottom), var(--lg-glow);
}

/* в”Ђв”Ђв”Ђ Stars canvas в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */
#stars-canvas {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* в”Ђв”Ђв”Ђ App shell в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */
#app {
  position: relative;
  z-index: 1;
  height: 100vh;
  max-height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* в”Ђв”Ђв”Ђ Screens в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */
.screen { display: none; flex: 1; min-height: 0; overflow: hidden; }
.screen.active { display: flex; }
#screen-main.active { display: flex; flex-direction: row; }

/* в”Ђв”Ђв”Ђ Auth screen в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */
#screen-auth {
  position: fixed !important;
  inset: 0 !important;
  z-index: 1;
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 16px;
}
#screen-auth.active {
  display: flex !important;
}

/* auth card — убираем синеватый фон */
.auth-card {
  background: linear-gradient(145deg, rgba(255,255,255,0.1) 0%, rgba(14,14,22,0.5) 25%, rgba(10,10,18,0.4) 75%, rgba(255,255,255,0.05) 100%);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: var(--radius);
  padding: 40px 48px;
  width: 100%;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  backdrop-filter: blur(28px) saturate(1.5);
  -webkit-backdrop-filter: blur(28px) saturate(1.5);
  box-shadow: inset 0 1.5px 0 rgba(255,255,255,0.12), inset 0 -1.5px 0 rgba(0,0,0,0.2), 0 16px 64px rgba(0,0,0,0.6);
  animation: cardIn 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes cardIn {
  from { opacity: 0; transform: scale(0.96) translateY(12px); filter: blur(4px); }
  to   { opacity: 1; transform: scale(1)    translateY(0);    filter: blur(0); }
}

.logo {
  text-align: center;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: 4px;
  color: var(--text);
  text-shadow: var(--text-glow);
}
.logo span { color: var(--text-dim); }

.auth-tabs { display: flex; gap: 8px; }

.tab-btn {
  flex: 1;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.2s ease;
  backdrop-filter: blur(4px);
}
.tab-btn:hover { border-color: rgba(255,255,255,0.2); color: var(--text); }
.tab-btn.active {
  background: #2a2a2a;
  border-color: rgba(255,255,255,0.15);
  color: var(--text);
  box-shadow: none;
}

.auth-form { display: flex; flex-direction: column; gap: 14px; }

/* "Use different account" link */
.auth-switch-link {
  text-align: center;
  font-size: 12px;
  color: var(--text-dim);
  cursor: pointer;
  transition: color 0.2s;
}
.auth-switch-link:hover { color: var(--text-dim); }

.input-group { display: flex; flex-direction: column; gap: 6px; }
.input-group label {
  font-size: 11px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 1px;
}

input[type="text"], input[type="password"], textarea, select {
  background: rgba(10, 10, 14, 0.35);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 0 16px;
  height: 48px;
  line-height: 48px;
  color: var(--text);
  font-size: 14px;
  font-family: var(--font);
  outline: none;
  transition: all 0.2s ease;
  width: 100%;
  display: flex;
  align-items: center;
  backdrop-filter: blur(8px) saturate(1.2);
  -webkit-backdrop-filter: blur(8px) saturate(1.2);
}
textarea {
  height: auto;
  line-height: 1.4;
  padding: 12px 16px;
}
select {
  line-height: normal;
  padding: 0 16px;
}
input:focus, textarea:focus, select:focus {
  border-color: var(--text-dim);
  box-shadow: 0 0 10px rgba(255,255,255,0.07);
  background: rgba(255,255,255,0.02);
}

/* в”Ђв”Ђв”Ђ Buttons в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */
.btn {
  padding: 12px 20px;
  border-radius: var(--radius);
  border: none;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  font-family: var(--font);
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.btn-primary {
  background: linear-gradient(145deg, rgba(255,255,255,0.1) 0%, rgba(36,36,44,0.45) 30%, rgba(28,28,36,0.4) 70%, rgba(255,255,255,0.06) 100%);
  color: var(--text);
  border: 1px solid rgba(255,255,255,0.1);
  backdrop-filter: blur(10px) saturate(1.2);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  box-shadow: inset 0 1.5px 0 rgba(255,255,255,0.1);
}
.btn-primary:hover {
  background: linear-gradient(145deg, rgba(255,255,255,0.12) 0%, rgba(48,48,56,0.5) 30%, rgba(40,40,48,0.45) 70%, rgba(255,255,255,0.08) 100%);
  border-color: rgba(255,255,255,0.18);
  transform: translateY(-1px);
}
.btn-primary:active { transform: translateY(0) scale(0.98); }
.btn-ghost {
  background: linear-gradient(145deg, rgba(255,255,255,0.04) 0%, transparent 30%, transparent 70%, rgba(255,255,255,0.02) 100%);
  border: 1px solid var(--border);
  color: var(--text-dim);
  backdrop-filter: blur(4px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
}
.btn-ghost:hover { border-color: rgba(255,255,255,0.2); color: var(--text); box-shadow: 0 0 12px rgba(255,255,255,0.06); }
.btn-danger { background: rgba(255,68,102,0.15); border: 1px solid var(--danger); color: var(--danger); }
.btn-danger:hover { background: rgba(255,68,102,0.25); box-shadow: 0 0 12px rgba(255,68,102,0.3); }
.btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none !important; box-shadow: none !important; }

.status-msg { font-size: 13px; text-align: center; min-height: 18px; color: var(--text-dim); }
.status-msg.error   { color: var(--danger); }
.status-msg.success { color: var(--success); }

/* в”Ђв”Ђв”Ђ Main layout в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */
#screen-main { flex-direction: row; }

/* в”Ђв”Ђв”Ђ Sidebar в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */
/* ─── Telegram-style left rail ─────────────────────────────────────────────── */
.tg-rail {
  width: 66px;
  min-width: 66px;
  flex-shrink: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.08) 0%, rgba(14,14,22,0.45) 15%, rgba(14,14,22,0.35) 85%, rgba(255,255,255,0.04) 100%);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border-right: 1px solid rgba(255,255,255,0.05);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0 12px;
  z-index: 5;
  position: relative;
  box-shadow: inset 0 1.5px 0 rgba(255,255,255,0.1), inset 0 -1.5px 0 rgba(0,0,0,0.2);
}
.tg-rail-top { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 100%; }
.tg-rail-bottom { display: flex; flex-direction: column; align-items: center; gap: 20px; width: 100%; padding-bottom: 2px; }

.tg-logo { display: flex; align-items: center; justify-content: center; padding: 2px 0 8px; }
.tg-logo svg { display: block; filter: drop-shadow(0 0 6px rgba(255,255,255,0.06)); }

.tg-rail-btn {
  width: 52px;
  height: 60px;
  border: none;
  background: transparent;
  color: rgba(255,255,255,0.4);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  transition: all 0.15s ease;
  position: relative;
}
.tg-rail-btn:hover { background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.8); }
.tg-rail-btn.active { background: rgba(255,255,255,0.08); color: #fff; }
.tg-rail-btn svg { width: 22px; height: 22px; }
.tg-rail-btn:first-child { margin-top: 2px; }

.tg-rail-avatar {
  width: 38px; height: 38px; border-radius: 50%;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: 14px; font-weight: 700; color: #fff;
  transition: box-shadow 0.2s; overflow: hidden;
}
.tg-rail-avatar:hover { box-shadow: 0 0 12px rgba(99,102,241,0.3); }

.tg-rail-avatar-wrap { position: relative; width: 38px; height: 38px; cursor: pointer; }

/* ─── Sidebar ──────────────────────────────────────────────────────────────── */
.sidebar {
  width: 320px;
  min-width: 320px;
  background: linear-gradient(145deg, rgba(255,255,255,0.08) 0%, var(--sidebar-bg) 30%, rgba(10,10,18,0.35) 70%, rgba(255,255,255,0.04) 100%);
  backdrop-filter: blur(22px) saturate(1.4);
  -webkit-backdrop-filter: blur(22px) saturate(1.4);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  overflow: hidden;
  box-shadow: inset 0 1.5px 0 rgba(255,255,255,0.08), 1px 0 12px rgba(0,0,0,0.2);
  z-index: 3;
}
.sidebar-tab { display: none; flex-direction: column; flex: 1; min-height: 0; overflow: hidden; }
.sidebar-tab.active { display: flex; }

.sidebar-top { flex-shrink: 0; }

.sidebar-header {
  padding: 12px 12px 6px;
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(14, 14, 20, 0.3);
  backdrop-filter: blur(12px) saturate(1.3);
  -webkit-backdrop-filter: blur(12px) saturate(1.3);
}
.sidebar-logo { font-size: 16px; font-weight: 700; color: var(--text); letter-spacing: 0.5px; }
.sidebar-actions { display: flex; gap: 8px; }

/* ─── Calls list ───────────────────────────────────────────────────────────── */
.calls-list { flex: 1; overflow-y: auto; padding: 8px; scroll-behavior: smooth; }
.calls-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; height: 100%; color: var(--text-dim); font-size: 13px; padding: 40px 20px; text-align: center;
}
.call-history-item {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px;
  border-radius: var(--radius); cursor: pointer; transition: background 0.15s;
  border: 1px solid transparent; margin-bottom: 4px;
}
.call-history-item:hover { background: var(--hover-bg); border-color: var(--active-border); }
.call-history-icon {
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255,255,255,0.05); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.call-history-icon.missed   { color: var(--danger); }
.call-history-icon.incoming { color: var(--success); }
.call-history-icon.outgoing { color: var(--icon-color); }
.call-history-info { flex: 1; min-width: 0; }
.call-history-name { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.call-history-meta { font-size: 11px; color: var(--text-dim); margin-top: 2px; display: flex; align-items: center; gap: 4px; }
.call-history-time { font-size: 11px; color: var(--text-dim); flex-shrink: 0; }

.icon-btn {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  border: none;
  background: var(--icon-bg);
  color: var(--icon-color);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  transition: all 0.2s ease;
  backdrop-filter: blur(4px);
}
.icon-btn:hover {
  background: var(--icon-hover-bg);
  color: var(--icon-color);
  box-shadow: 0 0 12px var(--btn-glow);
  transform: scale(1.05);
}

.search-box { flex: 1; min-width: 0; position: relative; }
.search-box .search-input-wrap { position: relative; }
.search-box input {
  background: var(--bg3);
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 7px 12px 7px 34px;
  color: var(--text);
  font-size: 13px;
  width: 100%;
  outline: none;
  transition: all 0.15s ease;
  height: 34px;
}
.search-box input:focus { border-color: rgba(255,255,255,0.1); background: var(--bg2); }
.search-icon { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--text-dim); pointer-events: none; width: 16px; height: 16px; z-index: 2; }

/* smooth scroll on chat list */
.chat-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 4px 6px;
  scroll-behavior: smooth;
}

/* в”Ђв”Ђв”Ђ Chat items в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */
.chat-item {
  padding: 10px 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: background 0.12s ease, transform 0.1s ease;
  border-radius: 12px;
  margin: 1px 6px;
  border: none;
  position: relative;
}
.chat-item:hover { background: var(--hover-bg); transform: translateX(2px); }
.chat-item:active { transform: scale(0.98); }
.chat-item.active { background: var(--active-bg); }

/* Аватар — крупнее */
.avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #2a2a2a;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
  border: none;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
  transition: transform 0.1s ease;
}
.chat-item:hover .avatar { transform: scale(1.04); }

/* Избранное — фиолетовая иконка закладки */
.fav-avatar { background: linear-gradient(135deg, #6366f1, #8b5cf6) !important; font-size: 0 !important; }
.fav-avatar svg { width: 20px; height: 20px; display: block; }

/* Обёртка аватара с онлайн-точкой */
.chat-item-avatar-wrap {
  position: relative;
  flex-shrink: 0;
}
.online-dot {
  position: absolute;
  bottom: 1px;
  right: 1px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #4cd964;
  border: 2px solid rgba(0,0,0,0.5);
  opacity: 0;
  transition: opacity 0.2s;
  box-shadow: 0 0 4px rgba(0,0,0,0.3);
}
.online-dot.visible { opacity: 1; }

/* Инфо */
.chat-info { flex: 1; min-width: 0; }

.chat-name {
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text);
  line-height: 1.3;
  margin-bottom: 3px;
}

.chat-preview {
  font-size: 13px;
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
  opacity: 0.75;
}
.chat-preview.draft { color: #e8a838; opacity: 1; }

/* Мета справа */
.chat-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
  flex-shrink: 0;
}

.chat-time {
  font-size: 11px;
  color: var(--text-dim);
  opacity: 0.6;
  white-space: nowrap;
}

.unread-badge {
  background: var(--accent, #555);
  color: #fff;
  border-radius: 10px;
  padding: 2px 7px;
  font-size: 11px;
  font-weight: 700;
  min-width: 20px;
  text-align: center;
  line-height: 16px;
}

/* Бейдж типа чата */
.chat-type-badge {
  font-size: 10px;
  color: var(--text-dim);
  background: rgba(255,255,255,0.06);
  border-radius: 4px;
  padding: 1px 5px;
  margin-left: 4px;
  vertical-align: middle;
  font-weight: 500;
}

/* в”Ђв”Ђв”Ђ Chat area в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */
.chat-area {
  flex: 1;
  min-width: 0;
  min-height: 0;
  background: linear-gradient(160deg, rgba(10,10,16,0.85) 0%, rgba(8,8,14,0.9) 100%);
  backdrop-filter: blur(8px) saturate(1.2);
  -webkit-backdrop-filter: blur(8px) saturate(1.2);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.chat-header {
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 14px;
  background: linear-gradient(145deg, rgba(255,255,255,0.08) 0%, rgba(10,10,16,0.4) 25%, rgba(8,8,14,0.35) 75%, rgba(255,255,255,0.04) 100%);
  backdrop-filter: blur(24px) saturate(1.4);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
  position: relative;
  z-index: 10;
  overflow: visible;
  box-shadow: inset 0 1.5px 0 rgba(255,255,255,0.1), inset 0 -1.5px 0 rgba(0,0,0,0.15);
}

.chat-header-info { flex: 1; }
.chat-header-name   { font-size: 15px; font-weight: 600; }
.chat-header-status { font-size: 12px; color: var(--text-dim); margin-top: 2px; }
.chat-header-actions { display: flex; gap: 8px; }

/* smooth scroll on messages */
.messages-container {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 20px 24px;
  gap: 6px;
  display: flex;
  flex-direction: column;
  scroll-behavior: smooth;
}

/* в”Ђв”Ђв”Ђ Message bubbles в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */
.message {
  display: flex;
  flex-direction: column;
  max-width: 62%;
  /* fade + scale on appear */
  animation: msgIn 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes msgIn {
  from { opacity: 0; transform: scale(0.95) translateY(6px); filter: blur(2px); }
  to   { opacity: 1; transform: scale(1)    translateY(0);   filter: blur(0); }
}

.message.outgoing { align-self: flex-end; }
.message.incoming { align-self: flex-start; }

.bubble {
  padding: 10px 16px;
  border-radius: 18px;
  font-size: 14px;
  line-height: 1.5;
  word-break: break-word;
  transition: box-shadow 0.2s ease, transform 0.12s ease;
}

/* outgoing */
.message.outgoing .bubble {
  background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(36,36,44,0.45) 30%, rgba(28,28,36,0.4) 70%, rgba(255,255,255,0.04) 100%);
  border: 1px solid rgba(255,255,255,0.08);
  border-bottom-right-radius: 4px;
  color: var(--text);
  box-shadow: inset 0 1.5px 0 rgba(255,255,255,0.1), inset 0 -1px 0 rgba(0,0,0,0.15), 0 4px 16px rgba(0,0,0,0.25);
  backdrop-filter: blur(10px) saturate(1.2);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
}
.message.outgoing:hover .bubble {
  box-shadow: inset 0 1.5px 0 rgba(255,255,255,0.1), inset 0 -1px 0 rgba(0,0,0,0.15), 0 6px 20px rgba(0,0,0,0.35);
}

/* incoming */
.message.incoming .bubble {
  background: linear-gradient(225deg, rgba(255,255,255,0.06) 0%, rgba(16,16,24,0.4) 30%, rgba(12,12,20,0.35) 70%, rgba(255,255,255,0.03) 100%);
  border: 1px solid var(--border);
  border-bottom-left-radius: 4px;
  box-shadow: inset 0 1.5px 0 rgba(255,255,255,0.08), inset 0 -1px 0 rgba(0,0,0,0.15), 0 4px 16px rgba(0,0,0,0.2);
  backdrop-filter: blur(10px) saturate(1.2);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
}
.message.incoming:hover .bubble {
  box-shadow: inset 0 1.5px 0 rgba(255,255,255,0.08), inset 0 -1px 0 rgba(0,0,0,0.15), 0 6px 20px rgba(0,0,0,0.3);
}

.msg-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  font-size: 11px;
  color: var(--text-dim);
}

.ttl-badge {
  display: flex;
  align-items: center;
  gap: 3px;
  color: var(--text-dim);
  font-size: 11px;
  font-weight: 600;
}
.ttl-badge.urgent { color: var(--danger); animation: pulse 1s infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }

.message.destroyed .bubble {
  opacity: 0.35;
  font-style: italic;
  color: var(--text-dim);
  background: rgba(26,26,26,0.6);
  border-color: rgba(255,68,102,0.2);
}

/* в”Ђв”Ђв”Ђ Input area в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */
.input-area {
  padding: 14px 20px;
  background: transparent;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ttl-selector {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.ttl-label { font-size: 13px; color: var(--text-dim); }

.ttl-chip {
  padding: 4px 12px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: rgba(42,42,48,0.2);
  color: var(--text-dim);
  font-size: 12px;
  font-family: var(--font);
  cursor: pointer;
  transition: all 0.15s ease;
  backdrop-filter: blur(4px);
}
.ttl-chip:hover {
  border-color: var(--text-dim);
  color: var(--text-dim);
}
.ttl-chip.active {
  border-color: var(--text-dim);
  color: var(--text-dim);
  background: rgba(255,255,255,0.05);
  box-shadow: 0 0 10px rgba(255,255,255,0.07);
}

.input-row {
  display: flex;
  gap: 10px;
  align-items: flex-end;
}

/* oval input like Telegram */
.msg-input {
  flex: 1;
  background: rgba(10, 10, 14, 0.3);
  border: 1px solid var(--border);
  border-radius: 40px;
  padding: 12px 20px;
  color: var(--text);
  font-size: 14px;
  font-family: var(--font);
  resize: none;
  outline: none;
  max-height: 120px;
  min-height: 46px;
  transition: all 0.2s ease;
  line-height: 1.4;
  backdrop-filter: blur(8px) saturate(1.2);
  -webkit-backdrop-filter: blur(8px) saturate(1.2);
}
.msg-input:focus {
  border-color: rgba(255,255,255,0.2);
  box-shadow: 0 0 12px rgba(255,255,255,0.06);
  background: rgba(255,255,255,0.02);
}

/* send button */
.send-btn {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.1);
  background: linear-gradient(145deg, rgba(255,255,255,0.08) 0%, rgba(36,36,44,0.45) 20%, rgba(28,28,36,0.4) 80%, rgba(255,255,255,0.04) 100%);
  color: var(--text);
  font-size: 17px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  flex-shrink: 0;
  backdrop-filter: blur(10px) saturate(1.2);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  box-shadow: inset 0 1.5px 0 rgba(255,255,255,0.1);
}
.send-btn:hover {
  transform: scale(1.08);
  background: #383838;
  border-color: rgba(255,255,255,0.2);
}
.send-btn:active { transform: scale(0.94); }
.send-btn:disabled { opacity: 0.3; cursor: not-allowed; transform: none; }

/* C-Type correction button */
.ctype-btn {
  padding: 6px 14px;
  border-radius: 18px;
  border: 1px solid var(--border);
  background: rgba(99,102,241,0.12);
  color: #818cf8;
  font-size: 12px;
  font-weight: 600;
  font-family: var(--font);
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  backdrop-filter: blur(8px) saturate(1.2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
  transition: opacity 0.25s ease, transform 0.25s ease, max-width 0.3s ease, padding 0.3s ease, margin 0.3s ease;
  transform-origin: right center;
}
.ctype-btn.hidden {
  max-width: 0;
  min-width: 0;
  padding: 6px 0;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: scaleX(0.6);
  overflow: hidden;
}
.ctype-btn:hover {
  background: rgba(99,102,241,0.22);
  color: #a5b4fc;
  transform: scale(1.04);
}
.ctype-btn:active { transform: scale(0.96); }
.ctype-btn:disabled { opacity: 0.5; cursor: wait; transform: none; }
.ctype-btn.hidden:hover { transform: scaleX(0.6); }

/* shake animation on send */
@keyframes inputShake {
  0%,100% { transform: translateX(0); }
  20%      { transform: translateX(-3px); }
  40%      { transform: translateX(3px); }
  60%      { transform: translateX(-2px); }
  80%      { transform: translateX(2px); }
}
.msg-input.shake { animation: inputShake 0.3s ease; }

/* в”Ђв”Ђв”Ђ Empty state в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */
.empty-state {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  color: var(--text-dim);
}
.empty-icon  { font-size: 72px; opacity: 0.15; color: var(--text-dim); display: flex; align-items: center; justify-content: center; }
.empty-title { font-size: 22px; font-weight: 600; color: var(--text); }
.empty-sub   { font-size: 14px; }

/* в”Ђв”Ђв”Ђ Modal в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.65);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  /* motion blur on overlay */
  backdrop-filter: blur(6px);
  animation: overlayIn 0.2s ease;
}
@keyframes overlayIn {
  from { opacity: 0; backdrop-filter: blur(0); }
  to   { opacity: 1; backdrop-filter: blur(6px); }
}
.modal-overlay.hidden { display: none; }

.modal {
  background: linear-gradient(145deg, rgba(255,255,255,0.08) 0%, rgba(14,14,22,0.5) 25%, rgba(10,10,18,0.4) 75%, rgba(255,255,255,0.04) 100%);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: var(--radius);
  padding: 32px;
  width: 100%;
  max-width: 400px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  backdrop-filter: blur(28px) saturate(1.5);
  -webkit-backdrop-filter: blur(28px) saturate(1.5);
  box-shadow: inset 0 1.5px 0 rgba(255,255,255,0.1), inset 0 -1.5px 0 rgba(0,0,0,0.18), 0 16px 64px rgba(0,0,0,0.6);
  animation: cardIn 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
.modal-title   { font-size: 18px; font-weight: 700; }
.modal-actions { display: flex; gap: 10px; justify-content: flex-end; }

/* в”Ђв”Ђв”Ђ Settings panel в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */
.settings-panel {
  display: none;
}
.settings-panel.open {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 28px 24px;
  background: linear-gradient(145deg, rgba(255,255,255,0.08) 0%, rgba(14,14,22,0.5) 25%, rgba(10,10,18,0.4) 75%, rgba(255,255,255,0.04) 100%);
  backdrop-filter: blur(28px) saturate(1.5);
  -webkit-backdrop-filter: blur(28px) saturate(1.5);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 20px;
  box-shadow: inset 0 1.5px 0 rgba(255,255,255,0.1), inset 0 -1.5px 0 rgba(0,0,0,0.2), 0 24px 80px rgba(0,0,0,0.7);
  width: 100%;
  max-width: 480px;
  max-height: 90vh;
  overflow-y: auto;
}

.settings-title { font-size: 18px; font-weight: 700; }

.setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}
.setting-label { font-size: 14px; font-weight: 500; }
.setting-sub   { font-size: 12px; color: var(--text-dim); margin-top: 2px; }

/* Toggle */
.toggle { position: relative; width: 44px; height: 24px; }
.toggle input { opacity: 0; width: 0; height: 0; }
.toggle-slider {
  position: absolute;
  inset: 0;
  background: rgba(26,26,26,0.9);
  border-radius: 24px;
  cursor: pointer;
  transition: all 0.2s ease;
  border: 1px solid var(--border);
}
.toggle-slider::before {
  content: '';
  position: absolute;
  width: 18px; height: 18px;
  left: 2px; top: 2px;
  background: var(--text-dim);
  border-radius: 50%;
  transition: all 0.2s ease;
}
.toggle input:checked + .toggle-slider {
  background: rgba(255,255,255,0.05);
  border-color: var(--text-dim);
  box-shadow: 0 0 10px rgba(255,255,255,0.07);
}
.toggle input:checked + .toggle-slider::before {
  transform: translateX(20px);
  background: #444444;
}

/* в”Ђв”Ђв”Ђ Typing indicator в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */
.typing-indicator {
  display: flex;
  gap: 5px;
  align-items: center;
  padding: 10px 16px;
  background: linear-gradient(135deg, rgba(255,255,255,0.06) 0%, rgba(14,14,22,0.4) 30%, rgba(10,10,18,0.35) 70%, rgba(255,255,255,0.03) 100%);
  border-radius: 18px;
  width: fit-content;
  border: 1px solid var(--border);
  backdrop-filter: blur(16px) saturate(1.3);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  box-shadow: inset 0 1.5px 0 rgba(255,255,255,0.08), inset 0 -1px 0 rgba(0,0,0,0.15);
}
.typing-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--text-dim);
  animation: typingBounce 1.2s infinite;
}
.typing-dot:nth-child(2) { animation-delay: 0.2s; }
.typing-dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes typingBounce {
  0%,60%,100% { transform: translateY(0); opacity: 0.6; }
  30%          { transform: translateY(-6px); opacity: 1; }
}

/* в”Ђв”Ђв”Ђ Connection status в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */
.conn-status { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-dim); }
.conn-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-dim); transition: all 0.3s ease; }
.conn-dot.connected    { background: #558855; box-shadow: none; }
.conn-dot.connecting   { background: #886633; animation: pulse 1s infinite; }
.conn-dot.disconnected { background: var(--danger); }

/* в”Ђв”Ђв”Ђ Toast в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */
.toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.toast {
  background: linear-gradient(135deg, rgba(255,255,255,0.08) 0%, rgba(14,14,22,0.5) 25%, rgba(10,10,18,0.4) 75%, rgba(255,255,255,0.04) 100%);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 14px;
  padding: 12px 18px;
  font-size: 13px;
  max-width: 300px;
  backdrop-filter: blur(24px) saturate(1.4);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
  box-shadow: inset 0 1.5px 0 rgba(255,255,255,0.1), inset 0 -1px 0 rgba(0,0,0,0.18), 0 4px 24px rgba(0,0,0,0.4);
  animation: toastIn 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.toast.success { border-color: var(--success); color: var(--success); }
.toast.error   { border-color: var(--danger);  color: var(--danger); }
@keyframes toastIn {
  from { opacity: 0; transform: translateX(16px) scale(0.96); filter: blur(2px); }
  to   { opacity: 1; transform: translateX(0)    scale(1);    filter: blur(0); }
}

/* в”Ђв”Ђв”Ђ Scrollbar в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.3); }
html { scrollbar-color: rgba(255,255,255,0.2) transparent; scrollbar-width: thin; }

/* в”Ђв”Ђв”Ђ Chat open animation в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */
#active-chat {
  animation: chatOpen 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes chatOpen {
  from { opacity: 0; transform: scale(0.98); filter: blur(3px); }
  to   { opacity: 1; transform: scale(1);    filter: blur(0); }
}

/* в”Ђв”Ђв”Ђ Responsive в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */
@media (max-width: 640px) {
  .tg-rail { width: 56px; min-width: 56px; }
  .tg-rail-btn { width: 44px; height: 44px; }
  .sidebar { width: calc(100% - 56px); position: absolute; left: 56px; z-index: 10; height: 100%; }
  .sidebar.hidden { display: none; }
  .chat-area { width: 100%; }
  .auth-card { padding: 28px 24px; }
}

/* в”Ђв”Ђв”Ђ Search dropdown в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */
.search-box { position: relative; padding: 12px 16px; border-bottom: 1px solid var(--border); }
.search-box input {
  background: rgba(10,10,14,0.3);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 9px 14px;
  color: var(--text);
  font-size: 13px;
  width: 100%;
  outline: none;
  transition: all 0.2s ease;
  backdrop-filter: blur(8px) saturate(1.2);
  -webkit-backdrop-filter: blur(8px) saturate(1.2);
}
.search-box input:focus { border-color: rgba(255,255,255,0.2); box-shadow: 0 0 10px rgba(255,255,255,0.06); }

.search-results {
  position: absolute;
  left: 16px; right: 16px;
  top: calc(100% - 4px);
  background: rgba(16, 16, 22, 0.6);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 14px;
  z-index: 20;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.04);
  backdrop-filter: blur(20px) saturate(1.3);
  -webkit-backdrop-filter: blur(20px) saturate(1.3);
  animation: cardIn 0.15s ease;
}
.search-results.hidden { display: none; }

/* ─── Search dropdown (Telegram-style) ──────────────────────────────────── */
.search-dropdown {
  position: absolute;
  left: 0;
  top: 100%;
  width: 100%;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 14px;
  z-index: 50;
  box-shadow: 0 8px 32px rgba(0,0,0,0.3);
  padding: 16px;
  height: auto;
  /* Анимация шторки */
  opacity: 0;
  transform: translateY(-12px);
  transition: opacity 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              visibility 0s 0.25s;
  visibility: hidden;
  pointer-events: none;
  box-sizing: border-box;
}
.search-dropdown.open {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              visibility 0s 0s;
  visibility: visible;
  pointer-events: auto;
}

/* Табы */
.search-dd-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 16px;
}
.search-dd-tab {
  flex: 1;
  background: transparent;
  border: none;
  border-radius: 8px;
  padding: 8px 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-dim);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  font-family: var(--font);
}
.search-dd-tab:hover { background: var(--hover-bg); color: var(--text); }
.search-dd-tab.active { background: var(--active-bg); color: var(--accent); font-weight: 600; }

/* Тело шторки */
.search-dd-body { padding: 0; height: auto; }
.search-dd-section { padding: 0; }
.search-dd-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 12px;
}

/* Частые контакты — сетка как в Telegram */
.search-dd-contacts {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding: 0;
}
.search-dd-contact {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 60px;
  padding: 4px 0;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.12s;
}
.search-dd-contact:hover { background: var(--hover-bg); }
.search-dd-contact span {
  font-size: 11px;
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
  text-align: center;
  display: block;
}
.search-dd-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  flex-shrink: 0;
}

/* Светлая тема */
[data-theme="light"] .search-dropdown {
  background: #ffffff !important;
  border-color: rgba(0,0,0,0.06) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.08) !important;
}

.search-result-item {
  padding: 12px 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: background 0.15s;
  border-bottom: 1px solid var(--border);
}
.search-result-item:last-child { border-bottom: none; }
.search-result-item:hover { background: rgba(255,255,255,0.04); }

.search-result-name  { font-size: 14px; font-weight: 600; color: var(--text); }
.search-result-id    { font-size: 11px; color: var(--text-dim); margin-top: 2px; }
.search-result-badge {
  margin-left: auto;
  font-size: 11px;
  color: var(--text-dim);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 2px 8px;
}
.search-empty {
  padding: 16px;
  text-align: center;
  color: var(--text-dim);
  font-size: 13px;
}

/* в”Ђв”Ђв”Ђ Name availability check в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */
.name-check-msg {
  font-size: 12px;
  min-height: 16px;
  margin-top: 4px;
  transition: all 0.2s ease;
}
.name-check-msg.taken     { color: var(--danger); }
.name-check-msg.available { color: var(--success); }
.name-check-msg.checking  { color: var(--text-dim); }



/* ─── Call overlay ─────────────────────────────────────────────────────────── */
.call-overlay {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(20px) saturate(1.2);
  -webkit-backdrop-filter: blur(20px) saturate(1.2);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: overlayIn 0.25s ease;
}
.call-overlay.hidden { display: none; }

/* ── Voice call card ── */
.call-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 44px 64px 36px;
  background: linear-gradient(145deg, rgba(255,255,255,0.08) 0%, rgba(12,12,20,0.5) 25%, rgba(8,8,16,0.4) 75%, rgba(255,255,255,0.04) 100%);
  backdrop-filter: blur(28px) saturate(1.5);
  -webkit-backdrop-filter: blur(28px) saturate(1.5);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 28px;
  box-shadow: inset 0 1.5px 0 rgba(255,255,255,0.1), inset 0 -1.5px 0 rgba(0,0,0,0.2), 0 32px 80px rgba(0,0,0,0.8);
  animation: cardIn 0.3s cubic-bezier(0.22,1,0.36,1);
  min-width: 320px;
}

/* Avatar */
.call-avatar {
  position: relative;
  z-index: 2;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: #252525;
  border: 2px solid rgba(255,255,255,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
  font-weight: 700;
  color: var(--text);
  flex-shrink: 0;
}

/* Pulsing rings */
.call-rings {
  position: absolute;
  top: 44px;
  left: 50%;
  transform: translateX(-50%);
  width: 96px;
  height: 96px;
  pointer-events: none;
}
.call-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.12);
  animation: callRing 2s ease-out infinite;
}
.call-ring.ring2 { animation-delay: 0.65s; }
.call-ring.ring3 { animation-delay: 1.3s; }
@keyframes callRing {
  0%   { transform: scale(1);   opacity: 0.5; }
  100% { transform: scale(2.6); opacity: 0; }
}
.call-card.connected .call-ring { animation: none; opacity: 0; }
.call-card.connected .call-avatar {
  border-color: rgba(80,180,80,0.5);
  box-shadow: 0 0 24px rgba(80,180,80,0.2);
}

.call-name {
  font-size: 24px;
  font-weight: 700;
  color: var(--text);
  margin-top: 4px;
  letter-spacing: 0.3px;
}
.call-status {
  font-size: 13px;
  color: var(--text-dim);
  letter-spacing: 0.5px;
}
.call-timer {
  font-size: 13px;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
  letter-spacing: 2px;
}
.call-timer.hidden { display: none; }

/* Action buttons */
.call-actions { margin-top: 16px; }
.call-actions-incoming,
.call-actions-active {
  display: flex;
  gap: 20px;
  align-items: center;
  justify-content: center;
}
.call-actions-incoming.hidden,
.call-actions-active.hidden { display: none; }

.call-btn {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: none;
  font-size: 24px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.18s ease;
  flex-shrink: 0;
}
.call-btn:hover  { transform: scale(1.08); }
.call-btn:active { transform: scale(0.94); }

.call-btn-accept {
  background: #2d6e2d;
  box-shadow: 0 0 24px rgba(60,160,60,0.35);
}
.call-btn-accept:hover { background: #3a8a3a; box-shadow: 0 0 32px rgba(60,160,60,0.5); }

.call-btn-reject,
.call-btn-end {
  background: #6e2020;
  box-shadow: 0 0 24px rgba(160,50,50,0.35);
}
.call-btn-reject:hover,
.call-btn-end:hover { background: #8a2a2a; box-shadow: 0 0 32px rgba(160,50,50,0.5); }

.call-btn-mute,
.call-btn-cam {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.1);
}
.call-btn-mute:hover,
.call-btn-cam:hover  { background: rgba(255,255,255,0.14); }
.call-btn-mute.muted { background: rgba(160,50,50,0.3); border-color: rgba(160,50,50,0.4); }
.call-btn-cam.cam-off{ background: rgba(160,50,50,0.3); border-color: rgba(160,50,50,0.4); }

/* ── Video call ── */
.call-card.video-mode {
  padding: 0;
  overflow: hidden;
  min-width: 560px;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(24px) saturate(1.4);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
  gap: 0;
}
.call-video-wrap {
  position: relative;
  width: 560px;
  height: 360px;
  background: #111;
  overflow: hidden;
}
.call-video-wrap.hidden { display: none; }

.call-video-remote {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: #111;
}
.call-video-local {
  position: absolute;
  bottom: 14px;
  right: 14px;
  width: 130px;
  height: 98px;
  object-fit: cover;
  border-radius: 12px;
  border: 2px solid rgba(255,255,255,0.18);
  box-shadow: 0 4px 20px rgba(0,0,0,0.6);
  cursor: pointer;
  transition: transform 0.2s;
  background: #222;
}
.call-video-local:hover { transform: scale(1.04); }

.call-card.video-mode .call-avatar { display: none; }
.call-card.video-mode .call-rings  { display: none; }

.call-card.video-mode .call-name,
.call-card.video-mode .call-status,
.call-card.video-mode .call-timer,
.call-card.video-mode .call-actions {
  padding: 0 24px;
}
.call-card.video-mode .call-name   { padding-top: 16px; }
.call-card.video-mode .call-actions { padding-bottom: 20px; }


/* ─── Voice message button ─────────────────────────────────────────────────── */
.voice-btn {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.1);
  background: linear-gradient(145deg, rgba(255,255,255,0.08) 0%, rgba(36,36,44,0.45) 20%, rgba(28,28,36,0.4) 80%, rgba(255,255,255,0.04) 100%);
  color: var(--text);
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  flex-shrink: 0;
  backdrop-filter: blur(10px) saturate(1.2);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  box-shadow: inset 0 1.5px 0 rgba(255,255,255,0.1);
}
.voice-btn:hover { background: #333; box-shadow: 0 0 12px rgba(255,255,255,0.08); }
.voice-btn.recording {
  background: #7a2a2a;
  border-color: rgba(200,60,60,0.4);
  animation: recPulse 1s infinite;
}
@keyframes recPulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(200,60,60,0.4); }
  50%      { box-shadow: 0 0 0 8px rgba(200,60,60,0); }
}

/* ─── Voice message bubble ─────────────────────────────────────────────────── */
.voice-message {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 4px;
  min-width: 220px;
}

.voice-play-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.15);
  background: #333;
  color: var(--text);
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.15s;
}
.voice-play-btn:hover { background: #444; }

.voice-waveform {
  flex: 1;
  height: 28px;
  display: flex;
  align-items: center;
  gap: 2px;
  cursor: pointer;
  position: relative;
}

.voice-bar {
  width: 3px;
  border-radius: 2px;
  background: rgba(255,255,255,0.25);
  transition: background 0.1s;
  flex-shrink: 0;
}
.voice-bar.played { background: rgba(255,255,255,0.7); }

.voice-duration {
  font-size: 11px;
  color: var(--text-dim);
  white-space: nowrap;
  min-width: 32px;
  text-align: right;
}

/* Recording indicator in input area */
.recording-indicator {
  display: none;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: rgba(120,30,30,0.25);
  border-radius: 12px;
  border: 1px solid rgba(200,60,60,0.15);
  font-size: 13px;
  color: var(--text-dim);
  backdrop-filter: blur(12px) saturate(1.3);
  -webkit-backdrop-filter: blur(12px) saturate(1.3);
}
.recording-indicator.active { display: flex; }
.rec-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #cc4444;
  animation: recPulse 1s infinite;
}

/* ─── Call button glow ─────────────────────────────────────────────────────── */
#btn-call {
  color: rgba(255,255,255,0.7);
  transition: all 0.2s ease;
}
#btn-call:hover {
  color: #fff;
  border-color: rgba(255,255,255,0.25);
  box-shadow: 0 0 14px rgba(255,255,255,0.15), inset 0 0 8px rgba(255,255,255,0.04);
  text-shadow: 0 0 8px rgba(255,255,255,0.6);
}
#btn-call svg {
  filter: drop-shadow(0 0 4px rgba(255,255,255,0.3));
  transition: filter 0.2s ease;
}
#btn-call:hover svg {
  filter: drop-shadow(0 0 8px rgba(255,255,255,0.7));
}

/* ─── Theme switcher ───────────────────────────────────────────────────────── */

/* Smooth transition for theme changes */
body, .sidebar, .chat-area, .chat-header, .input-area,
.auth-card, .settings-overlay, .modal, .bubble,
.chat-item, .msg-input, .search-box input,
.sidebar-header, .messages-container {
  transition: background-color 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease !important;
}

.theme-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.theme-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 8px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(42,42,48,0.2);
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s !important;
  color: var(--text-dim);
  font-size: 11px;
  font-family: var(--font);
  backdrop-filter: blur(4px);
}
.theme-chip:hover { border-color: rgba(255,255,255,0.2); color: var(--text); }
.theme-chip.active {
  border-color: rgba(255,255,255,0.35);
  color: var(--text);
  box-shadow: 0 0 10px rgba(255,255,255,0.08);
}

.theme-preview {
  width: 100%;
  height: 32px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.08);
}

/* ─── Themes ───────────────────────────────────────────────────────────────── */

/* ─── Liquid Glass (default) — глянцевое стекло, тёмная тема ──────────── */
:root, [data-theme="ghost"], [data-theme="dark"] {
  --bg:         rgba(8, 8, 12, 0.9);
  --bg2:        rgba(14, 14, 22, 0.65);
  --bg3:        rgba(22, 22, 30, 0.5);
  --accent:     #888888;
  --border:     rgba(255,255,255,0.05);
  --text-glow:  0 0 8px rgba(255,255,255,0.15);
  --sidebar-bg: rgba(10, 10, 18, 0.45);
  --header-bg:  rgba(8, 8, 14, 0.4);
  --input-bg:   rgba(8,8,12,0.35);
  --bubble-out: rgba(36,36,44,0.45);
  --bubble-in:  rgba(18,18,26,0.4);
  --btn-from:   #3a3a3a;
  --btn-to:     #2a2a2a;
  --btn-glow:   rgba(255,255,255,0.06);
  --btn-hover-from: #484848;
  --btn-hover-to:   #383838;
  --active-bg:  rgba(255,255,255,0.1);
  --active-border: rgba(255,255,255,0.2);
  --hover-bg:   rgba(255,255,255,0.06);
  --icon-color: #e8e8e8;
  --icon-bg:    rgba(255,255,255,0.05);
  --icon-hover-bg: rgba(255,255,255,0.12);
  /* Liquid Glass overrides */
  --lg-bg:      rgba(10, 10, 18, 0.4);
  --lg-shine:   145deg, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0.03) 25%, transparent 45%, rgba(255,255,255,0.02) 65%, rgba(255,255,255,0.08) 100%;
  --lg-highlight: inset 0 1.5px 0 rgba(255,255,255,0.1);
  --lg-shadow-bottom: inset 0 -1.5px 0 rgba(0,0,0,0.2);
}

/* System Dark — тёплое глянцевое стекло */
[data-theme="system"] {
  --bg:         rgba(22, 22, 28, 0.9);
  --bg2:        rgba(34, 34, 40, 0.65);
  --bg3:        rgba(44, 44, 52, 0.5);
  --accent:     #aeaeb2;
  --border:     rgba(255,255,255,0.06);
  --text-glow:  none;
  --sidebar-bg: rgba(22, 22, 28, 0.45);
  --header-bg:  rgba(20, 20, 26, 0.4);
  --input-bg:   rgba(32,32,38,0.35);
  --bubble-out: rgba(44,44,52,0.4);
  --bubble-in:  rgba(32,32,40,0.35);
  --btn-from:   #48484a;
  --btn-to:     #3a3a3c;
  --btn-glow:   rgba(255,255,255,0.05);
  --btn-hover-from: #58585a;
  --btn-hover-to:   #48484a;
  --active-bg:  rgba(255,255,255,0.1);
  --active-border: rgba(255,255,255,0.2);
  --hover-bg:   rgba(255,255,255,0.06);
  --icon-color: #f2f2f7;
  --icon-bg:    rgba(255,255,255,0.08);
  --icon-hover-bg: rgba(255,255,255,0.14);
  --lg-bg:      rgba(22, 22, 28, 0.4);
  --lg-shine:   145deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.02) 25%, transparent 45%, rgba(255,255,255,0.02) 65%, rgba(255,255,255,0.06) 100%;
  --lg-highlight: inset 0 1.5px 0 rgba(255,255,255,0.1);
  --lg-shadow-bottom: inset 0 -1.5px 0 rgba(0,0,0,0.18);
}

/* Midnight — глубокое чёрное глянцевое стекло */
[data-theme="midnight"] {
  --bg:         rgba(0,0,0,0.92);
  --bg2:        rgba(6,6,8,0.65);
  --bg3:        rgba(14,14,16,0.5);
  --accent:     #666666;
  --border:     rgba(255,255,255,0.04);
  --text-glow:  none;
  --sidebar-bg: rgba(0,0,0,0.5);
  --header-bg:  rgba(0,0,0,0.45);
  --input-bg:   rgba(0,0,0,0.4);
  --bubble-out: rgba(20,20,22,0.45);
  --bubble-in:  rgba(10,10,12,0.4);
  --btn-from:   #2a2a2a;
  --btn-to:     #1a1a1a;
  --btn-glow:   rgba(255,255,255,0.04);
  --btn-hover-from: #383838;
  --btn-hover-to:   #282828;
  --active-bg:  rgba(255,255,255,0.08);
  --active-border: rgba(255,255,255,0.16);
  --hover-bg:   rgba(255,255,255,0.04);
  --icon-color: #cccccc;
  --icon-bg:    rgba(255,255,255,0.06);
  --icon-hover-bg: rgba(255,255,255,0.1);
  --lg-bg:      rgba(0,0,0,0.45);
  --lg-shine:   145deg, rgba(255,255,255,0.08) 0%, transparent 25%, transparent 50%, rgba(255,255,255,0.02) 70%, rgba(255,255,255,0.05) 100%;
  --lg-highlight: inset 0 1.5px 0 rgba(255,255,255,0.06);
  --lg-shadow-bottom: inset 0 -1.5px 0 rgba(0,0,0,0.25);
}

/* Light — переменные переопределяются в блоке LIGHT THEME POLISH */
/* Light theme overrides — все в блоке LIGHT THEME POLISH + комплексный блок в конце */

/* Profile panel */
[data-theme="light"] .profile-panel-card { background: #ffffff; border-color: rgba(0,0,0,0.1); box-shadow: 0 -8px 40px rgba(0,0,0,0.1); }
[data-theme="light"] .profile-panel-name { color: #1c1c1e; }
[data-theme="light"] .profile-panel-id { color: #8e8e93; }
[data-theme="light"] .profile-id-row { background: rgba(0,0,0,0.03); border-color: rgba(0,0,0,0.1); color: #8e8e93; }
[data-theme="light"] .profile-id-row:hover { background: rgba(0,0,0,0.06); color: #1c1c1e; }
[data-theme="light"] .profile-panel-close { background: rgba(0,0,0,0.05); border-color: rgba(0,0,0,0.1); color: #8e8e93; }
[data-theme="light"] .profile-panel-close:hover { background: rgba(0,0,0,0.1); color: #1c1c1e; }
[data-theme="light"] .profile-big-avatar { background: #e8e8ed; border-color: rgba(0,0,0,0.15); color: #1c1c1e; }

/* Misc */
[data-theme="light"] .date-separator { color: #8e8e93; }
[data-theme="light"] .date-separator span { background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.08); }
[data-theme="light"] .scroll-down-btn { background: #ffffff; border-color: rgba(0,0,0,0.1); color: #1c1c1e; box-shadow: 0 4px 16px rgba(0,0,0,0.1); }
[data-theme="light"] .reply-bar { background: transparent; border-top: none; }
[data-theme="light"] .reply-bar-name { color: #8e8e93; }
[data-theme="light"] .reply-bar-text { color: #1c1c1e; }
[data-theme="light"] .reply-quote { background: rgba(0,0,0,0.04); border-left-color: #8e8e93; }
[data-theme="light"] .reply-quote:hover { background: rgba(0,0,0,0.07); }
[data-theme="light"] .reply-quote-name { color: #8e8e93; }
[data-theme="light"] .reply-quote-text { color: #8e8e93; }
[data-theme="light"] .msg-search-bar { background: rgba(255,255,255,0.98); border-bottom-color: rgba(0,0,0,0.1); }
[data-theme="light"] .msg-search-bar input { background: #ffffff !important; border-color: rgba(0,0,0,0.1) !important; color: #1c1c1e !important; }
[data-theme="light"] .call-system-msg .call-msg-inner { background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.08); color: #8e8e93; }
[data-theme="light"] .chat-type-badge { border-color: rgba(0,0,0,0.12); color: #8e8e93; }
[data-theme="light"] .channel-join-bar,
[data-theme="light"] .channel-readonly-bar { background: rgba(255,255,255,0.98); border-top-color: rgba(0,0,0,0.1); }
[data-theme="light"] .pin-card { background: #ffffff; border-color: rgba(0,0,0,0.1); box-shadow: 0 8px 32px rgba(0,0,0,0.1); }
[data-theme="light"] .pin-screen { background: #f2f2f7; }
[data-theme="light"] .pin-key { background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.1); color: #1c1c1e; }
[data-theme="light"] .pin-key:hover { background: rgba(0,0,0,0.08); }
[data-theme="light"] .pin-dot { border-color: #8e8e93; }
[data-theme="light"] .pin-dot.filled { background: #1c1c1e; border-color: #1c1c1e; }
[data-theme="light"] #btn-call,
[data-theme="light"] #btn-video-call { color: #1c1c1e; }
[data-theme="light"] #btn-call:hover,
[data-theme="light"] #btn-video-call:hover { color: #1c1c1e; border-color: rgba(0,0,0,0.2); }
[data-theme="light"] .name-check-msg.available { color: #34a853; }
[data-theme="light"] .name-check-msg.taken { color: #cc3333; }
[data-theme="light"] .online-dot { border-color: #f2f2f7; }
[data-theme="light"] .auth-card { background: #ffffff !important; border-color: rgba(0,0,0,0.1); box-shadow: 0 8px 48px rgba(0,0,0,0.1); }

/* ─── Centaura logo SVG icon ───────────────────────────────────────────────── */
.centaura-icon svg { display: block; }
.tg-logo .centaura-icon { display: flex; align-items: center; justify-content: center; }
.empty-icon .centaura-icon svg { width: 72px; height: 72px; opacity: 0.15; }
[data-theme="light"] .centaura-icon svg polygon { }

#btn-video-call {
  color: rgba(255,255,255,0.7);
  transition: all 0.2s ease;
}
#btn-video-call:hover {
  color: #fff;
  border-color: rgba(255,255,255,0.25);
  box-shadow: 0 0 14px rgba(255,255,255,0.15);
}
#btn-video-call svg { filter: drop-shadow(0 0 4px rgba(255,255,255,0.3)); transition: filter 0.2s; }
#btn-video-call:hover svg { filter: drop-shadow(0 0 8px rgba(255,255,255,0.7)); }

/* ─── Call system message ──────────────────────────────────────────────────── */
.call-system-msg {
  display: flex;
  justify-content: center;
  margin: 4px 0;
}

.call-msg-inner {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 14px;
  border-radius: 20px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
  font-size: 12px;
  color: var(--text-dim);
  backdrop-filter: blur(8px) saturate(1.2);
  -webkit-backdrop-filter: blur(8px) saturate(1.2);
}

.call-msg-missed {
  background: rgba(180,50,50,0.08);
  border-color: rgba(180,50,50,0.2);
  color: #cc6666;
}

.call-msg-icon { display: flex; align-items: center; opacity: 0.8; }
.call-msg-text { font-weight: 500; }
.call-msg-time { opacity: 0.5; font-size: 11px; margin-left: 2px; }

/* ─── Emoji trigger button ─────────────────────────────────────────────────── */
.emoji-trigger-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: linear-gradient(145deg, rgba(255,255,255,0.06) 0%, rgba(36,36,44,0.3) 20%, rgba(28,28,36,0.25) 80%, rgba(255,255,255,0.03) 100%);
  color: var(--text-dim);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.2s ease;
  margin-bottom: 4px;
}
.emoji-trigger-btn:hover { color: var(--text); border-color: rgba(255,255,255,0.2); }
.emoji-trigger-btn.active { color: var(--text); border-color: rgba(255,255,255,0.25); background: rgba(255,255,255,0.06); }

.emoji-wrapper { position: relative; }

/* ═══════════════════════════════════════════════════════════════════════════════
   EMOJI PICKER — Telegram Desktop стиль
   ═══════════════════════════════════════════════════════════════════════════════ */
.emoji-picker {
  position: fixed;
  z-index: 9999;
  width: 370px;
  max-height: 450px;
  background: #181818;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.04);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: #e8e8e8;
  opacity: 0;
  transform: scale(0.94) translateY(8px);
  pointer-events: none;
  visibility: hidden;
  transition: opacity 0.25s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
              visibility 0.25s;
}
.emoji-picker.visible {
  opacity: 1;
  transform: scale(1) translateY(0);
  pointer-events: auto;
  visibility: visible;
}

/* Нижняя панель: переключение режимов */
.emoji-footer {
  flex-shrink: 0;
  display: flex;
  border-top: 1px solid rgba(255,255,255,0.06);
  background: #181818;
}
.emoji-footer-mode {
  flex: 1;
  padding: 12px 0;
  border: none;
  background: transparent;
  color: #8e8e93;
  font-size: 14px;
  font-weight: 600;
  font-family: 'Inter', system-ui, sans-serif;
  cursor: pointer;
  transition: color 0.15s;
  text-align: center;
}
.emoji-footer-mode:hover { color: #e8e8e8; }
.emoji-footer-mode.active { color: #6366f1; }

/* Тело */
.emoji-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #181818;
}
.picker-tab-content {
  display: none;
  flex-direction: column;
  flex: 1;
  overflow: hidden;
}
.picker-tab-content.active {
  display: flex;
}
.picker-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: #aeaeb2;
  font-size: 13px;
  padding: 40px 20px;
}
.picker-empty svg { opacity: 0.35; }

/* Строка поиска */
.emoji-search-row {
  flex-shrink: 0;
  padding: 8px 10px 0;
  margin-bottom: 14px;
  background: #181818;
}

.emoji-search-wrap {
  display: flex;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
  padding: 6px 12px;
  background: #242424;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 20px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.emoji-search-wrap:focus-within {
  border-color: #6366f1;
  box-shadow: 0 0 0 2px rgba(99,102,241,0.15);
}
.emoji-search-input-icon {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  color: #8e8e93;
  pointer-events: none;
  line-height: 0;
  margin-right: 6px;
}
.emoji-search-input {
  flex: 1;
  height: auto;
  line-height: normal;
  padding: 0;
  border: none;
  background: transparent;
  outline: none;
  box-shadow: none;
  border-radius: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  color: #e8e8e8;
  font-size: 13px;
  font-family: 'Inter', system-ui, sans-serif;
}
.emoji-search-input::placeholder {
  color: #8e8e93;
  opacity: 1;
}

/* Быстрый доступ к категориям */
.emoji-quick-access {
  display: flex;
  justify-content: space-between;
  width: 100%;
  box-sizing: border-box;
  padding: 4px 16px 8px;
  margin-bottom: 14px;
  background: #181818;
}
.emoji-qa-btn {
  padding: 0;
  border: none;
  background: transparent;
  color: #555;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  transition: color 0.15s;
}
.emoji-qa-btn:hover {
  color: #aaa;
}
.emoji-qa-btn svg {
  width: 24px;
  height: 24px;
  display: block;
}
.emoji-qa-btn.active {
  color: #6366f1;
}

/* Скроллируемая сетка эмодзи */
.emoji-empty-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px 20px;
  color: #666;
  font-size: 13px;
  line-height: 1.6;
}
[data-theme="light"] .emoji-empty-hint { color: #999; }

.emoji-scroll {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 4px 6px 8px;
  scroll-behavior: smooth;
  overscroll-behavior: contain;
  contain: paint;
  scrollbar-width: thin;
}
.emoji-scroll::-webkit-scrollbar { width: 4px; }
.emoji-scroll::-webkit-scrollbar-track { background: transparent; }
.emoji-scroll::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.2);
  border-radius: 6px;
  transition: opacity 0.4s ease;
  opacity: 0;
}
.emoji-scroll::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.3); }
.emoji-scroll::-webkit-scrollbar-button { display: none; height: 0; }
.emoji-scroll.scrollbar-visible::-webkit-scrollbar-thumb { opacity: 1; }

/* Заголовок категории */
.emoji-category-title {
  font-size: 11px;
  font-weight: 600;
  color: #aeaeb2;
  padding: 8px 4px 4px;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

/* Сетка эмодзи */
.emoji-grid {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  gap: 1px;
}
.emoji-item {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 8px;
  border: none;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #e8e8e8;
  transition: background 0.1s ease, transform 0.1s ease;
  padding: 3px;
  overflow: hidden;
  box-sizing: border-box;
}
.emoji-item:hover {
  background: rgba(255,255,255,0.06);
  transform: scale(1.12);
}
.emoji-item:active {
  transform: scale(0.92);
}
.emoji-item img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  pointer-events: none;
  -webkit-user-drag: none;
}

/* Sticker grid in picker */
.sticker-scroll {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 8px;
  scroll-behavior: smooth;
}
.sticker-scroll::-webkit-scrollbar { width: 4px; }
.sticker-scroll::-webkit-scrollbar-track { background: transparent; }
.sticker-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); border-radius: 6px; }

.sticker-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.sticker-item {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 14px;
  border: none;
  background: rgba(255,255,255,0.04);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #e8e8e8;
  transition: background 0.12s ease, transform 0.12s ease;
  padding: 10px;
}
.sticker-item:hover {
  background: rgba(255,255,255,0.08);
  transform: scale(1.04);
}
.sticker-item:active {
  transform: scale(0.94);
}
.sticker-item img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  border-radius: 8px;
}

/* Sticker bubble in chat */
.sticker-bubble {
  width: 160px;
  height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sticker-bubble img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  border-radius: 8px;
}
.message.sticker .bubble {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  max-width: 180px !important;
}

.emoji-bubble {
  width: 120px;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.emoji-bubble img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.message.emoji-msg .bubble {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  max-width: 140px !important;
}

/* Light theme vars for emoji picker (always light) */
[data-theme="light"] .emoji-picker {
  background: #ffffff;
  border-color: rgba(0,0,0,0.08);
  box-shadow: 0 8px 40px rgba(0,0,0,0.15);
  color: #1c1c1e;
}

/* ─── File message ─────────────────────────────────────────────────────────── */
.file-message {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 2px;
  min-width: 200px;
  max-width: 280px;
}

.file-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--text-dim);
}

.file-info { flex: 1; min-width: 0; }
.file-name {
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text);
}
.file-size { font-size: 11px; color: var(--text-dim); margin-top: 2px; }

.file-download-btn {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.12);
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.15s ease;
}
.file-download-btn:hover {
  background: rgba(255,255,255,0.08);
  color: var(--text);
  border-color: rgba(255,255,255,0.2);
}

/* Image preview in chat */
.file-image-preview {
  max-width: 260px;
  max-height: 200px;
  border-radius: 12px;
  object-fit: cover;
  cursor: pointer;
  transition: opacity 0.2s;
  display: block;
}
.file-image-preview:hover { opacity: 0.9; }

/* Upload progress */
.file-uploading {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text-dim);
  padding: 4px 0;
}
.file-progress {
  flex: 1;
  height: 3px;
  background: rgba(255,255,255,0.1);
  border-radius: 2px;
  overflow: hidden;
}
.file-progress-bar {
  height: 100%;
  background: rgba(255,255,255,0.4);
  border-radius: 2px;
  transition: width 0.2s;
}

/* ─── New chat dropdown ────────────────────────────────────────────────────── */
.new-chat-dropdown { position: relative; }

.new-chat-menu {
  position: fixed;
  background: rgba(16, 16, 22, 0.6);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 14px;
  padding: 6px;
  min-width: 180px;
  z-index: 50;
  backdrop-filter: blur(20px) saturate(1.3);
  -webkit-backdrop-filter: blur(20px) saturate(1.3);
  box-shadow: 0 8px 32px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.04);
  animation: cardIn 0.15s ease;
}
.new-chat-menu.hidden { display: none; }

.new-chat-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: var(--text-dim);
  font-size: 13px;
  font-family: var(--font);
  cursor: pointer;
  transition: all 0.15s ease;
  text-align: left;
}
.new-chat-menu-item:hover {
  background: rgba(255,255,255,0.07);
  color: var(--text);
}
.new-chat-menu-item svg { flex-shrink: 0; opacity: 0.7; }
.new-chat-menu-item:hover svg { opacity: 1; }

.beta-badge {
  margin-left: auto;
  font-size: 10px;
  font-weight: 700;
  font-family: var(--font);
  padding: 2px 8px;
  border-radius: 6px;
  background: rgba(255, 180, 0, 0.12);
  border: 1px solid rgba(255, 180, 0, 0.3);
  color: rgba(255, 180, 0, 0.9);
  letter-spacing: 0.3px;
  white-space: nowrap;
}
.menu-item-beta { opacity: 0.75; cursor: not-allowed; }
.menu-item-beta:hover { opacity: 0.9; }

/* Group/channel badge in chat list */
.chat-type-badge {
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 6px;
  border: 1px solid var(--border);
  color: var(--text-dim);
  margin-left: 4px;
  vertical-align: middle;
}

/* ─── Channel join bar ─────────────────────────────────────────────────────── */
.channel-join-bar {
  padding: 12px 20px;
  border-top: 1px solid var(--border);
  background: rgba(10, 10, 16, 0.45);
  backdrop-filter: blur(22px) saturate(1.4);
  -webkit-backdrop-filter: blur(22px) saturate(1.4);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}
.channel-join-bar.hidden { display: none; }

/* Subscribed channel — no input, just empty bottom bar */
.channel-readonly-bar {
  padding: 12px 20px;
  border-top: 1px solid var(--border);
  background: rgba(10, 10, 16, 0.45);
  backdrop-filter: blur(22px) saturate(1.4);
  -webkit-backdrop-filter: blur(22px) saturate(1.4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: var(--text-dim);
  gap: 8px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}
.channel-readonly-bar.hidden { display: none; }

.channel-join-info {
  font-size: 13px;
  color: var(--text-dim);
  margin-right: 16px;
}

#btn-join-channel {
  width: 100%;
  max-width: 320px;
  padding: 13px;
  font-size: 15px;
  border-radius: 12px;
}

/* ─── Channel member row ───────────────────────────────────────────────────── */
.channel-member-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
}
.channel-member-name { flex: 1; font-size: 13px; }
.channel-member-id   { font-size: 11px; color: var(--text-dim); }
.channel-member-badge {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 6px;
  border: 1px solid rgba(100,200,100,0.3);
  color: #6a6;
  background: rgba(100,200,100,0.08);
}
.channel-member-badge.owner { border-color: rgba(200,180,50,0.3); color: #aa8; background: rgba(200,180,50,0.08); }

/* ─── Settings overlay (two-column layout like MAX) ────────────────────────── */
.settings-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: overlayIn 0.2s ease;
}
.settings-overlay.hidden { display: none; }

.settings-layout {
  display: flex;
  width: 860px;
  max-width: calc(100vw - 40px);
  height: 580px;
  max-height: calc(100vh - 60px);
  background: linear-gradient(145deg, rgba(255,255,255,0.08) 0%, rgba(14,14,22,0.5) 25%, rgba(10,10,18,0.4) 75%, rgba(255,255,255,0.04) 100%);
  backdrop-filter: blur(28px) saturate(1.4);
  -webkit-backdrop-filter: blur(28px) saturate(1.4);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: inset 0 1.5px 0 rgba(255,255,255,0.1), inset 0 -1.5px 0 rgba(0,0,0,0.18), 0 24px 80px rgba(0,0,0,0.7);
  animation: cardIn 0.25s cubic-bezier(0.22,1,0.36,1);
}

.settings-nav {
  width: 240px;
  min-width: 240px;
  background: rgba(0,0,0,0.2);
  backdrop-filter: blur(8px) saturate(1.2);
  -webkit-backdrop-filter: blur(8px) saturate(1.2);
  border-right: 1px solid rgba(255,255,255,0.05);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
.settings-nav-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 16px 12px;
}
.settings-nav-title { font-size: 18px; font-weight: 700; color: var(--text); }

.settings-nav-profile {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  margin: 0 8px 8px;
  border-radius: 12px;
  cursor: pointer;
  transition: background 0.15s;
  border: 1px solid var(--border);
}
.settings-nav-profile:hover { background: rgba(255,255,255,0.05); }

.settings-nav-avatar {
  width: 40px; height: 40px; border-radius: 50%;
  background: #2a2a2a; border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 700; flex-shrink: 0;
}
.settings-nav-profile-info { flex: 1; min-width: 0; }
.settings-nav-profile-name {
  font-size: 13px; font-weight: 600; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.settings-nav-profile-id {
  font-size: 10px; color: var(--text-dim);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px;
}

.settings-nav-list { display: flex; flex-direction: column; gap: 2px; padding: 0 8px; flex: 1; }

.settings-nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border: none; border-radius: 10px;
  background: transparent; color: var(--text-dim);
  font-size: 13px; font-family: var(--font);
  cursor: pointer; transition: all 0.15s ease;
  text-align: left; width: 100%;
}
.settings-nav-item:hover { background: rgba(255,255,255,0.06); color: var(--text); }
.settings-nav-item.active { background: rgba(255,255,255,0.1); color: var(--text); }
.settings-nav-item svg:first-child { flex-shrink: 0; opacity: 0.7; }
.settings-nav-item.active svg:first-child { opacity: 1; }
.settings-nav-item span { flex: 1; }
.settings-nav-arrow { opacity: 0.3; flex-shrink: 0; }

.settings-nav-footer { padding: 12px; border-top: 1px solid var(--border); margin-top: 8px; }

.settings-content { flex: 1; overflow-y: auto; padding: 28px 32px; }

.settings-section { display: none; flex-direction: column; gap: 16px; }
.settings-section.active { display: flex; }
.settings-section-title { font-size: 20px; font-weight: 700; color: var(--text); margin-bottom: 4px; }

.settings-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px 18px;
  display: flex; flex-direction: column; gap: 12px;
  backdrop-filter: blur(8px) saturate(1.2);
  -webkit-backdrop-filter: blur(8px) saturate(1.2);
}
.settings-card-label {
  font-size: 11px; font-weight: 600; color: var(--text-dim);
  text-transform: uppercase; letter-spacing: 1px;
}
.settings-card-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.settings-info-row { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-dim); }
.settings-info-row svg { flex-shrink: 0; opacity: 0.6; }

/* ─── Profile panel ────────────────────────────────────────────────────────── */
.profile-panel {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
}
.profile-panel.hidden { display: none; }
.profile-panel.closing .profile-panel-card { animation: profileSlideDown 0.24s cubic-bezier(0.4,0,1,1) forwards; }
.profile-panel.closing .profile-panel-backdrop { animation: overlayOut 0.24s ease forwards; }
@keyframes profileSlideDown {
  from { transform: translateY(0);    opacity: 1; }
  to   { transform: translateY(100%); opacity: 0; }
}
@keyframes overlayOut {
  from { opacity: 1; }
  to   { opacity: 0; }
}

.profile-panel-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(4px);
  animation: overlayIn 0.2s ease;
}

.profile-panel-card {
  position: relative;
  z-index: 1;
  width: 320px;
  margin-left: 68px;
  margin-bottom: 0;
  background: rgba(14, 14, 20, 0.55);
  backdrop-filter: blur(24px) saturate(1.4);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
  border: 1px solid rgba(255,255,255,0.07);
  border-bottom: none;
  border-radius: 20px 20px 0 0;
  padding: 0 0 24px;
  box-shadow: 0 -8px 40px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.05);
  animation: profileSlideUp 0.28s cubic-bezier(0.22,1,0.36,1);
  overflow: hidden;
}
@keyframes profileSlideUp {
  from { transform: translateY(100%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

.profile-panel-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 32px 24px 20px;
  background: transparent;
  border-bottom: 1px solid var(--border);
}

.profile-big-avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--icon-bg, rgba(91,94,244,0.2));
  border: 2px solid var(--active-border, rgba(91,94,244,0.4));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  font-weight: 700;
  color: var(--icon-color, #8b8ef8);
  box-shadow: 0 0 20px var(--btn-glow, rgba(91,94,244,0.3));
  position: relative;
  cursor: pointer;
  overflow: hidden;
}
.profile-big-avatar img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
.avatar-edit-overlay {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: rgba(0,0,0,0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.18s ease;
  color: #fff;
  cursor: pointer;
}
.profile-big-avatar:hover .avatar-edit-overlay { opacity: 1; }

.profile-panel-name {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
}
.profile-panel-id {
  font-size: 11px;
  color: var(--text-dim);
  word-break: break-all;
  text-align: center;
  max-width: 260px;
}

.profile-panel-body {
  padding: 20px 24px 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.profile-field { display: flex; flex-direction: column; gap: 6px; }
.profile-field label {
  font-size: 11px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 1px;
}
.profile-field-row { display: flex; gap: 8px; align-items: center; }
.profile-field-row input { flex: 1; }

.profile-id-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  border-radius: 12px;
  cursor: pointer;
  transition: background 0.15s;
  font-size: 12px;
  color: var(--text-dim);
  word-break: break-all;
}
.profile-id-row:hover { background: rgba(255,255,255,0.06); color: var(--text); }
.profile-id-row svg { flex-shrink: 0; opacity: 0.5; }

.profile-panel-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.05);
  color: var(--text-dim);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}
.profile-panel-close:hover { background: rgba(255,255,255,0.1); color: var(--text); }

/* ═══════════════════════════════════════════════════════════════════════════
   GLOBAL SMOOTH ANIMATIONS
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Button press feedback ─────────────────────────────────────────────────── */
.btn, .icon-btn, .tg-rail-btn, .send-btn, .voice-btn,
.emoji-trigger-btn, .call-btn, .tab-btn, .ttl-chip,
.theme-chip, .settings-nav-item, .new-chat-menu-item,
.chat-item, .search-result-item, .call-history-item,
.profile-panel-close, .file-download-btn {
  transition: transform 0.14s cubic-bezier(0.34,1.56,0.64,1),
              background 0.18s ease,
              box-shadow 0.18s ease,
              border-color 0.18s ease,
              color 0.18s ease,
              opacity 0.18s ease !important;
}

.btn:active, .icon-btn:active, .send-btn:active,
.voice-btn:active, .emoji-trigger-btn:active,
.call-btn:active, .tab-btn:active, .ttl-chip:active,
.theme-chip:active, .settings-nav-item:active,
.new-chat-menu-item:active, .profile-panel-close:active,
.file-download-btn:active {
  transform: scale(0.93) !important;
}

.tg-rail-btn:active { transform: scale(0.88) !important; }
.chat-item:active   { transform: scale(0.985) !important; }

/* ─── Ripple effect ──────────────────────────────────────────────────────────── */
.btn, .icon-btn, .send-btn, .tg-rail-btn {
  position: relative;
  overflow: hidden;
}
.ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,0.18);
  transform: scale(0);
  animation: rippleAnim 0.5s linear;
  pointer-events: none;
}
@keyframes rippleAnim {
  to { transform: scale(4); opacity: 0; }
}

/* ─── Modal open/close animations ───────────────────────────────────────────── */
.modal-overlay {
  transition: opacity 0.22s ease, backdrop-filter 0.22s ease;
}
.modal-overlay.closing {
  opacity: 0;
  backdrop-filter: blur(0px);
  pointer-events: none;
}
.modal-overlay.closing .modal {
  animation: modalOut 0.2s cubic-bezier(0.4,0,1,1) forwards;
}
@keyframes modalOut {
  from { opacity: 1; transform: scale(1)    translateY(0);   filter: blur(0); }
  to   { opacity: 0; transform: scale(0.95) translateY(8px); filter: blur(3px); }
}

/* ─── Settings overlay open/close ───────────────────────────────────────────── */
.settings-overlay {
  transition: opacity 0.22s ease, backdrop-filter 0.22s ease;
}
.settings-overlay.closing {
  opacity: 0;
  backdrop-filter: blur(0px);
  pointer-events: none;
}
.settings-overlay.closing .settings-layout {
  animation: settingsOut 0.22s cubic-bezier(0.4,0,1,1) forwards;
}
@keyframes settingsOut {
  from { opacity: 1; transform: scale(1)    translateY(0);    filter: blur(0); }
  to   { opacity: 0; transform: scale(0.97) translateY(12px); filter: blur(4px); }
}

/* ─── Dropdown menu open/close ───────────────────────────────────────────────── */
.new-chat-menu {
  transform-origin: top left;
  transition: opacity 0.15s ease, transform 0.15s cubic-bezier(0.34,1.56,0.64,1);
}
.new-chat-menu.hidden {
  display: none !important;
}
.new-chat-menu.closing {
  display: block !important;
  opacity: 0;
  transform: scale(0.92) translateY(-6px);
  pointer-events: none;
}
.new-chat-menu:not(.hidden):not(.closing) {
  opacity: 1;
  transform: scale(1) translateY(0);
  animation: dropdownIn 0.18s cubic-bezier(0.34,1.56,0.64,1);
}
@keyframes dropdownIn {
  from { opacity: 0; transform: scale(0.9) translateY(-8px); }
  to   { opacity: 1; transform: scale(1)   translateY(0); }
}

/* ─── Sidebar tab switch ─────────────────────────────────────────────────────── */
.sidebar-tab {
  transition: opacity 0.18s ease;
}
.sidebar-tab.active {
  animation: tabFadeIn 0.2s ease;
}
@keyframes tabFadeIn {
  from { opacity: 0; transform: translateX(-6px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ─── Input focus glow ───────────────────────────────────────────────────────── */
input[type="text"]:focus,
input[type="password"]:focus,
textarea:focus {
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease !important;
}

/* ─── Chat open animation ────────────────────────────────────────────────────── */
#active-chat {
  animation: chatOpen 0.22s cubic-bezier(0.22,1,0.36,1);
}

/* ─── Toast slide-in ─────────────────────────────────────────────────────────── */
.toast {
  animation: toastIn 0.28s cubic-bezier(0.34,1.56,0.64,1);
}

/* ─── Settings profile section ─────────────────────────────────────────────── */
.settings-profile-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--icon-bg);
  border: 2px solid var(--active-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  font-weight: 700;
  color: var(--icon-color);
  box-shadow: 0 0 24px var(--btn-glow);
  position: relative;
  cursor: pointer;
  overflow: hidden;
  flex-shrink: 0;
}
.settings-profile-avatar img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
.settings-profile-avatar:hover .avatar-edit-overlay { opacity: 1; }

/* ═══════════════════════════════════════════════════════════════════════════
   NEW FEATURES — Reactions, Reply, Forward, Read receipts, Search,
                  Notifications, Online dot, Drafts, Fingerprint, PIN
   ═══════════════════════════════════════════════════════════════════════════ */

.message {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
}
.message.outgoing { align-self: flex-end; flex-direction: row-reverse; }
.message.incoming { align-self: flex-start; flex-direction: row; }

.message-body {
  display: flex;
  flex-direction: column;
  max-width: 100%;
}
.message.outgoing .message-body { align-items: flex-end; }
.message.incoming .message-body { align-items: flex-start; }
  backdrop-filter: blur(8px);
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.msg-action-btn:hover {
  color: var(--text);
  background: rgba(255,255,255,0.12);
  transform: scale(1.12);
  box-shadow: 0 0 10px var(--btn-glow);
}

/* ─── Reaction picker ────────────────────────────────────────────────────────── */
.reaction-picker {
  position: fixed;
  z-index: 500;
  background: rgba(16, 16, 22, 0.6);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 24px;
  padding: 8px 12px;
  display: flex;
  gap: 6px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.04);
  backdrop-filter: blur(20px) saturate(1.3);
  -webkit-backdrop-filter: blur(20px) saturate(1.3);
  animation: cardIn 0.15s ease;
}
.reaction-picker.hidden { display: none; }
.reaction-emoji-btn {
  font-size: 20px;
  cursor: pointer;
  padding: 4px;
  border-radius: 8px;
  transition: transform 0.1s, background 0.1s;
  line-height: 1;
}
.reaction-emoji-btn:hover { transform: scale(1.3); background: rgba(255,255,255,0.08); }

/* ─── Reactions display ──────────────────────────────────────────────────────── */
.msg-reactions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
  min-height: 0;
}
.msg-reactions:empty { display: none; margin: 0; }

.reaction-chip {
  display: flex;
  align-items: center;
  gap: 3px;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 3px 8px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
  animation: reactionPop 0.2s cubic-bezier(0.34,1.56,0.64,1);
}
@keyframes reactionPop {
  from { transform: scale(0.6); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}
.reaction-chip:hover { background: rgba(255,255,255,0.12); transform: scale(1.08); }
.reaction-chip.mine  { border-color: var(--active-border); background: var(--active-bg); }
.reaction-chip-count { font-size: 11px; color: var(--text-dim); margin-left: 1px; }

/* ─── Reply quote in bubble ──────────────────────────────────────────────────── */
.reply-quote {
  background: rgba(255,255,255,0.06);
  border-left: 3px solid var(--text-dim);
  border-radius: 8px;
  padding: 6px 10px;
  margin-bottom: 6px;
  cursor: pointer;
  transition: background 0.15s;
}
.reply-quote:hover { background: rgba(255,255,255,0.1); }
.reply-quote-name { font-size: 11px; font-weight: 600; color: var(--text-dim); margin-bottom: 2px; }
.reply-quote-text { font-size: 12px; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ─── Reply bar above input ──────────────────────────────────────────────────── */
.reply-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 20px;
  animation: cardIn 0.15s ease;
}
.reply-bar.hidden { display: none; }
.reply-bar-content { flex: 1; min-width: 0; }
.reply-bar-name { font-size: 12px; font-weight: 600; color: var(--text-dim); }
.reply-bar-text { font-size: 13px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ─── Forwarded label ────────────────────────────────────────────────────────── */
.forwarded-label {
  font-size: 11px;
  color: var(--text-dim);
  font-style: italic;
  margin-bottom: 4px;
}

/* ─── Read receipts ──────────────────────────────────────────────────────────── */
.read-tick {
  font-size: 12px;
  color: var(--text-dim);
  margin-left: 2px;
}
.read-tick.read { color: #4a9eff; }

/* ─── Message search bar ─────────────────────────────────────────────────────── */
.msg-search-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 20px;
  background: rgba(10, 10, 16, 0.45);
  backdrop-filter: blur(22px) saturate(1.4);
  -webkit-backdrop-filter: blur(22px) saturate(1.4);
  border-bottom: 1px solid var(--border);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}
.msg-search-bar.hidden { display: none; }
.msg-search-bar input {
  flex: 1;
  background: rgba(10,10,10,0.8);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 7px 14px;
  color: var(--text);
  font-size: 13px;
  outline: none;
  height: 36px;
}
.msg-search-bar input:focus { border-color: rgba(255,255,255,0.2); }
.msg-highlight { background: rgba(255,220,0,0.3); border-radius: 3px; }
.msg-highlight.current { background: rgba(255,180,0,0.55); }

/* ─── Online dot in chat list ────────────────────────────────────────────────── */
.chat-item-avatar-wrap { position: relative; flex-shrink: 0; }
.online-dot {
  position: absolute;
  bottom: 1px; right: 1px;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: #44bb44;
  border: 2px solid rgba(0,0,0,0.5);
  display: none;
  box-shadow: 0 0 4px rgba(0,0,0,0.3);
}
.online-dot.visible { display: block; }

/* ─── Draft preview ──────────────────────────────────────────────────────────── */

/* ─── Fingerprint modal ──────────────────────────────────────────────────────── */
/* (uses existing .modal styles) */

/* ─── PIN screen ─────────────────────────────────────────────────────────────── */
.pin-screen {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #0e0e0e;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pin-screen.hidden { display: none; }
.pin-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 40px 48px;
  background: rgba(16, 16, 22, 0.55);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: var(--radius);
  backdrop-filter: blur(24px) saturate(1.4);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
  box-shadow: 0 8px 48px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.05);
  min-width: 320px;
}
.pin-dots {
  display: flex;
  gap: 16px;
}
.pin-dot {
  width: 14px; height: 14px;
  border-radius: 50%;
  border: 2px solid var(--text-dim);
  background: transparent;
  transition: background 0.15s;
}
.pin-dot.filled { background: var(--text); border-color: var(--text); }
.pin-keypad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.pin-key {
  width: 64px; height: 64px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.04);
  color: var(--text);
  font-size: 20px;
  font-family: var(--font);
  cursor: pointer;
  transition: all 0.15s;
  display: flex; align-items: center; justify-content: center;
}
.pin-key:hover { background: rgba(255,255,255,0.1); }
.pin-key:active { transform: scale(0.92); }
.pin-key-forgot { font-size: 11px; color: var(--text-dim); }
.pin-key-del { font-size: 18px; }

/* ─── Rail button animations ────────────────────────────────────────────────── */

/* Settings gear spin */
@keyframes gearSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
#btn-settings.active svg,
#btn-settings:hover svg {
  animation: gearSpin 1.8s linear infinite;
  transform-origin: center;
}

/* Chats icon bounce */
@keyframes chatBounce {
  0%,100% { transform: translateY(0) scale(1); }
  30%      { transform: translateY(-4px) scale(1.15); }
  60%      { transform: translateY(1px) scale(0.95); }
}
#rail-btn-chats.active svg {
  animation: chatBounce 0.5s cubic-bezier(0.34,1.56,0.64,1);
}
#rail-btn-chats:hover svg {
  animation: chatBounce 0.5s cubic-bezier(0.34,1.56,0.64,1);
}

/* Calls icon ring pulse */
@keyframes callRingPulse {
  0%   { transform: scale(1) rotate(0deg); }
  20%  { transform: scale(1.2) rotate(-15deg); }
  40%  { transform: scale(1.1) rotate(10deg); }
  60%  { transform: scale(1.15) rotate(-8deg); }
  80%  { transform: scale(1.05) rotate(5deg); }
  100% { transform: scale(1) rotate(0deg); }
}
#rail-btn-calls.active svg,
#rail-btn-calls:hover svg {
  animation: callRingPulse 0.6s ease;
  transform-origin: center;
}

/* Active state glow for all rail buttons */
.tg-rail-btn.active {
  position: relative;
}
.tg-rail-btn.active::after {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 60%;
  background: var(--icon-color);
  border-radius: 0 3px 3px 0;
  box-shadow: 0 0 8px var(--btn-glow);
  animation: indicatorIn 0.2s cubic-bezier(0.34,1.56,0.64,1);
}
@keyframes indicatorIn {
  from { height: 0; opacity: 0; }
  to   { height: 60%; opacity: 1; }
}

/* Send button — pulse on click */
@keyframes sendPulse {
  0%   { box-shadow: 0 0 0 0 var(--btn-glow); }
  70%  { box-shadow: 0 0 0 10px rgba(0,0,0,0); }
  100% { box-shadow: 0 0 0 0 rgba(0,0,0,0); }
}
.send-btn:active {
  animation: sendPulse 0.4s ease;
}

/* Plus button — rotate 45deg on open */
#btn-new-chat svg {
  transition: transform 0.25s cubic-bezier(0.34,1.56,0.64,1);
}
#btn-new-chat.open svg {
  transform: rotate(45deg);
}

/* Voice button — mic wiggle on hover */
@keyframes micWiggle {
  0%,100% { transform: rotate(0deg); }
  25%      { transform: rotate(-8deg); }
  75%      { transform: rotate(8deg); }
}
.voice-btn:hover svg {
  animation: micWiggle 0.4s ease;
}

/* Icon buttons — subtle bounce on hover */
@keyframes iconPop {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.2); }
  100% { transform: scale(1); }
}
.icon-btn:hover svg {
  animation: iconPop 0.3s cubic-bezier(0.34,1.56,0.64,1);
}

/* Emoji button — spin on hover */
@keyframes emojiSpin {
  from { transform: rotate(0deg) scale(1); }
  50%  { transform: rotate(20deg) scale(1.2); }
  to   { transform: rotate(0deg) scale(1); }
}
#btn-emoji:hover svg {
  animation: emojiSpin 0.4s ease;
}

/* Attach button — shake on hover */
@keyframes attachShake {
  0%,100% { transform: rotate(0deg); }
  25%      { transform: rotate(-20deg); }
  75%      { transform: rotate(20deg); }
}
#btn-attach:hover svg {
  animation: attachShake 0.35s ease;
}

/* ─── Search box with icon ──────────────────────────────────────────────────── */
.search-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.search-icon {
  position: absolute;
  left: 12px;
  color: var(--text-dim);
  pointer-events: none;
  flex-shrink: 0;
  transition: color 0.2s ease;
  width: 16px;
  height: 16px;
  z-index: 2;
}
.search-input-wrap input {
  padding-left: 34px !important;
}
.search-input-wrap:focus-within .search-icon {
  color: var(--text);
}

/* ─── Date separator ────────────────────────────────────────────────────────── */
.date-separator {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 12px 0 8px;
  color: var(--text-dim);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  user-select: none;
}
.date-separator::before,
.date-separator::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}
.date-separator span {
  background: rgba(20, 20, 26, 0.35);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 20px;
  padding: 3px 10px;
  white-space: nowrap;
  backdrop-filter: blur(12px) saturate(1.3);
  -webkit-backdrop-filter: blur(12px) saturate(1.3);
}

/* ─── Scroll-to-bottom button ───────────────────────────────────────────────── */
.scroll-down-btn {
  position: absolute;
  bottom: 24px;
  right: 20px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.07);
  background: rgba(16, 16, 22, 0.5);
  color: var(--text);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(20px) saturate(1.3);
  -webkit-backdrop-filter: blur(20px) saturate(1.3);
  box-shadow: 0 4px 16px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.05);
  transition: all 0.2s ease;
  z-index: 20;
}
.scroll-down-btn:hover {
  background: var(--icon-bg);
  color: var(--icon-color);
  box-shadow: 0 0 14px var(--btn-glow);
  transform: translateY(-2px);
}
.scroll-down-btn.hidden { display: none; }

.scroll-down-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  background: var(--btn-from);
  color: #fff;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 5px;
  min-width: 18px;
  text-align: center;
  border: 2px solid var(--bg);
  animation: reactionPop 0.2s ease;
}
.scroll-down-badge.hidden { display: none; }

/* ─── Context menu ──────────────────────────────────────────────────────────── */
.ctx-menu {
  position: fixed;
  z-index: 500;
  background: rgba(14, 14, 20, 0.6);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 14px;
  padding: 6px;
  min-width: 160px;
  backdrop-filter: blur(20px) saturate(1.3);
  -webkit-backdrop-filter: blur(20px) saturate(1.3);
  box-shadow: 0 8px 32px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.04);
  animation: cardIn 0.15s ease;
}
.ctx-menu.hidden { display: none; }

.ctx-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 12px;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: var(--text-dim);
  font-size: 13px;
  font-family: var(--font);
  cursor: pointer;
  transition: all 0.15s ease;
  text-align: left;
}
.ctx-menu-item:hover {
  background: rgba(255,255,255,0.07);
  color: var(--text);
}
.ctx-menu-item svg { flex-shrink: 0; opacity: 0.7; }
.ctx-menu-item:hover svg { opacity: 1; }
.ctx-menu-item-danger { color: var(--danger) !important; }
.ctx-menu-item-danger:hover { background: rgba(255,68,102,0.1) !important; }

/* ─── Messages wrap (for scroll-down button positioning) ────────────────────── */
.messages-wrap {
  flex: 1;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.messages-wrap .messages-container {
  flex: 1;
  overflow-y: auto;
}

/* ─── Appearance section redesign ──────────────────────────────────────────── */

/* Chat preview */
.theme-preview-chat {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 4px;
  min-height: 140px;
  transition: background 0.4s ease;
  position: relative;
  overflow: hidden;
}
.theme-preview-chat::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--bg);
  opacity: 0.6;
  pointer-events: none;
}

.tpc-msg {
  display: flex;
  flex-direction: column;
  max-width: 72%;
  position: relative;
  z-index: 1;
}
.tpc-incoming { align-self: flex-start; align-items: flex-start; }
.tpc-outgoing { align-self: flex-end;   align-items: flex-end; }

.tpc-bubble {
  padding: 8px 14px;
  border-radius: 16px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--text);
}
.tpc-incoming .tpc-bubble {
  background: var(--bubble-in, rgba(30,30,30,0.9));
  border: 1px solid var(--border);
  border-bottom-left-radius: 4px;
}
.tpc-outgoing .tpc-bubble {
  background: linear-gradient(135deg, var(--btn-from), var(--btn-to));
  color: #fff;
  border-bottom-right-radius: 4px;
}
.tpc-time {
  font-size: 10px;
  color: var(--text-dim);
  margin-top: 3px;
  padding: 0 4px;
}

/* Theme cards grid */
.theme-cards {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
}
@media (max-width: 700px) {
  .theme-cards { grid-template-columns: repeat(3, 1fr); }
}

.theme-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  background: transparent;
  border: 2px solid transparent;
  border-radius: 14px;
  padding: 6px 4px 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: var(--font);
}
.theme-card:hover {
  border-color: rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.04);
}
.theme-card.active {
  border-color: var(--icon-color);
  background: var(--icon-bg);
  box-shadow: 0 0 12px var(--btn-glow);
}

.theme-card-preview {
  width: 100%;
  height: 56px;
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px;
  position: relative;
}
.tcp-bar {
  position: absolute;
  inset: 0;
  border-radius: 10px;
}
.tcp-bubble {
  position: relative;
  z-index: 1;
  height: 12px;
  border-radius: 8px;
  opacity: 0.9;
}
.tcp-in  { width: 65%; align-self: flex-start; margin-top: 6px; }
.tcp-out { width: 55%; align-self: flex-end;   margin-top: 4px; }

.theme-card-name {
  font-size: 11px;
  color: var(--text-dim);
  font-weight: 500;
  letter-spacing: 0.2px;
}
.theme-card.active .theme-card-name { color: var(--text); }

/* ─── Language selector ─────────────────────────────────────────────────────── */
.lang-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 11px 12px;
  border: none;
  border-radius: 12px;
  background: transparent;
  cursor: pointer;
  transition: background 0.15s ease;
  text-align: left;
  font-family: var(--font);
}
.lang-item:hover { background: rgba(255,255,255,0.06); }
.lang-item.active { background: var(--active-bg); }

.lang-flag { width: 44px; height: 44px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.lang-flag img {
  width: 44px;
  height: 44px;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.25)) drop-shadow(0 1px 3px rgba(0,0,0,0.15));
}

.lang-info { flex: 1; }
.lang-name   { font-size: 14px; font-weight: 500; color: var(--text); }
.lang-native { font-size: 12px; color: var(--text-dim); margin-top: 1px; }

.lang-check {
  color: var(--icon-color);
  opacity: 0;
  flex-shrink: 0;
  transition: opacity 0.15s ease;
}
.lang-item.active .lang-check { opacity: 1; }

/* ─── Settings nav groups ───────────────────────────────────────────────────── */
.settings-nav-group-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--text-dim);
  padding: 10px 12px 4px;
  opacity: 0.6;
}
.settings-nav-divider {
  height: 1px;
  background: var(--border);
  margin: 8px 8px;
}

/* ─── FAQ accordion ─────────────────────────────────────────────────────────── */
.faq-item {
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  transition: border-color 0.2s ease;
}
.faq-item + .faq-item { margin-top: 8px; }
.faq-item:has(.faq-answer.open) { border-color: var(--active-border); }

.faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: var(--font);
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  text-align: left;
  transition: background 0.15s ease;
}
.faq-question:hover { background: rgba(255,255,255,0.04); }

.faq-arrow {
  flex-shrink: 0;
  color: var(--text-dim);
  transition: transform 0.25s cubic-bezier(0.34,1.56,0.64,1);
}
.faq-answer.open ~ * .faq-arrow,
.faq-question.open .faq-arrow { transform: rotate(180deg); }

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, padding 0.3s ease;
  font-size: 13px;
  color: var(--text-dim);
  line-height: 1.65;
  padding: 0 16px;
}
.faq-answer.open {
  max-height: 200px;
  padding: 0 16px 14px;
}

/* ─── Welcome overlay ───────────────────────────────────────────────────────── */
.welcome-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.8s ease;
}
.welcome-overlay.fade-out {
  opacity: 0;
  pointer-events: none;
}
.welcome-overlay.hidden { display: none; }

.welcome-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  max-width: 520px;
  padding: 40px 32px;
  text-align: center;
}

.welcome-logo {
  font-size: 56px;
  color: #fff;
  opacity: 0;
  animation: welcomeLogoIn 1.2s cubic-bezier(0.22,1,0.36,1) 0.3s forwards;
  text-shadow:
    0 0 20px rgba(255,255,255,0.8),
    0 0 60px rgba(255,255,255,0.4),
    0 0 120px rgba(255,255,255,0.15);
  filter: drop-shadow(0 0 30px rgba(255,255,255,0.6));
}
@keyframes welcomeLogoIn {
  from { opacity: 0; transform: scale(0.6); filter: blur(20px) drop-shadow(0 0 0 rgba(255,255,255,0)); }
  to   { opacity: 1; transform: scale(1);   filter: blur(0)   drop-shadow(0 0 30px rgba(255,255,255,0.6)); }
}

.welcome-text {
  font-size: 22px;
  font-weight: 300;
  color: #fff;
  line-height: 1.6;
  letter-spacing: 0.3px;
  min-height: 80px;
  text-shadow: 0 0 30px rgba(255,255,255,0.5);
}

/* Cursor blink — unused */

.welcome-sub {
  font-size: 13px;
  color: rgba(255,255,255,0.35);
  letter-spacing: 2px;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity 0.6s ease;
}
.welcome-sub.visible { opacity: 1; }

.welcome-btn {
  opacity: 0;
  padding: 12px 40px;
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 40px;
  background: transparent;
  color: rgba(255,255,255,0.7);
  font-size: 14px;
  font-family: var(--font);
  cursor: pointer;
  letter-spacing: 1px;
  transition: all 0.3s ease, opacity 0.6s ease;
  text-shadow: 0 0 10px rgba(255,255,255,0.3);
}
.welcome-btn.visible {
  opacity: 1;
}
.welcome-btn:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.5);
  color: #fff;
  box-shadow: 0 0 20px rgba(255,255,255,0.15);
}

/* Scanline effect */
.welcome-overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(255,255,255,0.012) 2px,
    rgba(255,255,255,0.012) 4px
  );
  pointer-events: none;
  animation: scanMove 8s linear infinite;
}
@keyframes scanMove {
  from { background-position: 0 0; }
  to   { background-position: 0 100px; }
}

/* ─── Centaura VPN power button ─────────────────────────────────────────────── */
.vpn-power-btn {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 1.5px solid #383838;
  background: #161616;
  color: #484848;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.25s ease;
  position: relative;
}
.vpn-power-btn:hover:not(:disabled) {
  border-color: #555;
  color: #888;
  box-shadow: 0 0 16px rgba(255,255,255,0.06);
}
.vpn-power-btn.vpn-on {
  background: #ffffff;
  border-color: #ffffff;
  color: #111111;
  box-shadow: 0 0 24px rgba(255,255,255,0.18), 0 0 8px rgba(255,255,255,0.12);
}
.vpn-power-btn.vpn-on:hover {
  box-shadow: 0 0 32px rgba(255,255,255,0.25);
}
.vpn-power-btn.vpn-busy {
  border-color: #444;
  color: #555;
  cursor: not-allowed;
}
.vpn-power-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* Спиннер для состояния connecting */
@keyframes vpnSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.vpn-spin { animation: vpnSpin 1s linear infinite; }

/* Карточка VPN в настройках */
#vpn-electron-ui { display: flex; }

/* ─── UI Improvements ────────────────────────────────────────────────────────── */

/* Аватары — цветные градиенты по первой букве */
.avatar[data-letter="A"], .avatar[data-letter="Б"], .avatar[data-letter="B"] { background: linear-gradient(135deg, #667eea, #764ba2); }
.avatar[data-letter="В"], .avatar[data-letter="C"], .avatar[data-letter="Г"] { background: linear-gradient(135deg, #f093fb, #f5576c); }
.avatar[data-letter="Д"], .avatar[data-letter="D"], .avatar[data-letter="Е"] { background: linear-gradient(135deg, #4facfe, #00f2fe); }
.avatar[data-letter="Ж"], .avatar[data-letter="E"], .avatar[data-letter="З"] { background: linear-gradient(135deg, #43e97b, #38f9d7); }
.avatar[data-letter="И"], .avatar[data-letter="F"], .avatar[data-letter="К"] { background: linear-gradient(135deg, #fa709a, #fee140); }
.avatar[data-letter="Л"], .avatar[data-letter="G"], .avatar[data-letter="М"] { background: linear-gradient(135deg, #a18cd1, #fbc2eb); }
.avatar[data-letter="Н"], .avatar[data-letter="H"], .avatar[data-letter="О"] { background: linear-gradient(135deg, #ffecd2, #fcb69f); }
.avatar[data-letter="П"], .avatar[data-letter="I"], .avatar[data-letter="Р"] { background: linear-gradient(135deg, #a1c4fd, #c2e9fb); }
.avatar[data-letter="С"], .avatar[data-letter="J"], .avatar[data-letter="Т"] { background: linear-gradient(135deg, #fd7043, #ff8a65); }
.avatar[data-letter="У"], .avatar[data-letter="K"], .avatar[data-letter="Ф"] { background: linear-gradient(135deg, #26c6da, #00acc1); }
.avatar[data-letter="Х"], .avatar[data-letter="L"], .avatar[data-letter="Ц"] { background: linear-gradient(135deg, #ab47bc, #8e24aa); }
.avatar[data-letter="Ч"], .avatar[data-letter="M"], .avatar[data-letter="Ш"] { background: linear-gradient(135deg, #66bb6a, #43a047); }
.avatar[data-letter="Щ"], .avatar[data-letter="N"], .avatar[data-letter="Э"] { background: linear-gradient(135deg, #ef5350, #e53935); }
.avatar[data-letter="Ю"], .avatar[data-letter="O"], .avatar[data-letter="Я"] { background: linear-gradient(135deg, #ffa726, #fb8c00); }

/* Все аватары — убираем border, добавляем тень */
.avatar {
  border: none !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
  color: #fff !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}
.chat-item:hover .avatar, .chat-item.active .avatar {
  box-shadow: 0 4px 12px rgba(0,0,0,0.4) !important;
  transform: scale(1.04);
}

/* Пустой экран — красивее */
.empty-state {
  gap: 12px;
}
.empty-title {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 0.5px;
}
.empty-sub {
  font-size: 14px;
  opacity: 0.5;
}

/* Поиск — иконка внутри */
.search-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.search-icon {
  position: absolute;
  left: 12px;
  color: var(--text-dim);
  pointer-events: none;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  z-index: 2;
}
#search-input {
  padding-left: 36px !important;
}

/* Chat header — чуть выше и красивее */
.chat-header {
  padding: 12px 20px;
  min-height: 60px;
}
.chat-header-name {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.1px;
}

/* Sidebar header */
.sidebar-logo {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: 0.5px;
}

/* Статус-бар внизу сайдбара */
#tab-chats > div:last-child {
  padding: 8px 14px;
}

/* Кнопка + в сайдбаре */
.icon-btn {
  border-radius: 12px;
  transition: all 0.15s ease;
}

/* Плавное появление chat-item */
.chat-item {
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}
.chat-item:active {
  transform: scale(0.98) !important;
}



/* Сайдбар — чуть шире */
.sidebar {
  width: 310px;
  min-width: 270px;
}

/* Тень у активного rail-btn */
.tg-rail-btn.active {
  box-shadow: 0 2px 12px rgba(0,0,0,0.3);
}

/* ─── About section ──────────────────────────────────────────────────────────── */

.about-hero-card {
  align-items: center !important;
  text-align: center !important;
  gap: 10px !important;
  padding: 32px 24px !important;
  background: linear-gradient(160deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.01) 100%) !important;
  position: relative;
  overflow: hidden;
}
.about-hero-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 0%, rgba(255,255,255,0.06) 0%, transparent 70%);
  pointer-events: none;
}

.about-logo-wrap {
  width: 80px;
  height: 80px;
  border-radius: 22px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.1);
}

.about-app-name {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: 4px;
  color: var(--text);
  text-shadow: 0 0 20px rgba(255,255,255,0.15);
}

.about-version-badge {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: var(--text-dim);
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 3px 12px;
}

.about-tagline {
  font-size: 12px;
  color: var(--text-dim);
  letter-spacing: 0.3px;
  opacity: 0.7;
}

/* Tech rows */
.about-tech-title {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--text-dim);
  padding: 14px 18px 10px;
  opacity: 0.6;
}

.about-tech-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--border);
  transition: background 0.15s;
}
.about-tech-row:hover { background: rgba(255,255,255,0.03); }

.about-tech-icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  color: var(--text-dim);
}

.about-tech-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}
.about-tech-sub {
  font-size: 11px;
  color: var(--text-dim);
  margin-top: 1px;
}

/* Principle rows */
.about-principle-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 11px 18px;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1.5;
}
.about-principle-row:hover { background: rgba(255,255,255,0.02); }

.about-principle-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 4px;
  box-shadow: 0 0 6px currentColor;
}

/* Light theme overrides */
[data-theme="light"] .about-hero-card {
  background: linear-gradient(160deg, rgba(0,0,0,0.03) 0%, rgba(0,0,0,0.01) 100%) !important;
}
[data-theme="light"] .about-hero-card::before {
  background: radial-gradient(ellipse at 50% 0%, rgba(0,0,0,0.04) 0%, transparent 70%);
}
[data-theme="light"] .about-logo-wrap {
  background: rgba(0,0,0,0.05);
  border-color: rgba(0,0,0,0.1);
  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
}
[data-theme="light"] .about-app-name { text-shadow: none; }
[data-theme="light"] .about-tech-row:hover { background: rgba(0,0,0,0.02); }
[data-theme="light"] .about-principle-row:hover { background: rgba(0,0,0,0.02); }

/* About icon light theme */
[data-theme="light"] .about-tech-icon {
  background: rgba(0,0,0,0.05);
  border-color: rgba(0,0,0,0.08);
  color: #555;
}
/* Логотип в about — точное центрирование */
.about-logo-wrap > div {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
}
.about-logo-wrap > div > * {
  display: block !important;
}

/* Rail avatar wrap — light theme border fix */
[data-theme="light"] .tg-rail-avatar-wrap .conn-dot {
  border-color: rgba(255,255,255,0.98);
}
[data-theme="light"] .tg-rail-avatar {
  background: #e8e8ed;
  border-color: rgba(0,0,0,0.1);
  color: #1c1c1e;
}

/* ─── Lightbox ───────────────────────────────────────────────────────────────── */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.22s ease;
  pointer-events: none;
}
.lightbox.hidden { display: none; }
.lightbox.visible { opacity: 1; pointer-events: all; }

.lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.88);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  cursor: zoom-out;
}

.lightbox-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  max-width: calc(100vw - 80px);
  max-height: calc(100vh - 80px);
  transform: scale(0.94);
  transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}
.lightbox.visible .lightbox-content {
  transform: scale(1);
}

.lightbox-img {
  max-width: 100%;
  max-height: calc(100vh - 140px);
  object-fit: contain;
  border-radius: 12px;
  box-shadow: 0 24px 80px rgba(0,0,0,0.7);
  display: block;
  cursor: default;
  user-select: none;
}

.lightbox-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0 4px;
  gap: 12px;
}

.lightbox-filename {
  font-size: 12px;
  color: rgba(255,255,255,0.5);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}

.lightbox-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.lightbox-btn {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.8);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
  backdrop-filter: blur(8px);
}
.lightbox-btn:hover {
  background: rgba(255,255,255,0.15);
  color: #fff;
  transform: scale(1.06);
}
.lightbox-btn:active { transform: scale(0.94); }

/* ─── Chat header more menu ──────────────────────────────────────────────────── */
.chat-header-more-wrap {
  position: relative;
}

.chat-more-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background: rgba(14, 14, 20, 0.6);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 14px;
  padding: 6px;
  min-width: 190px;
  z-index: 1000;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.04);
  backdrop-filter: blur(20px) saturate(1.3);
  -webkit-backdrop-filter: blur(20px) saturate(1.3);
  animation: cardIn 0.15s ease;
}
.chat-more-menu.hidden { display: none; }

.chat-more-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 12px;
  border: none;
  background: transparent;
  color: var(--text);
  font-size: 13px;
  font-family: var(--font);
  font-weight: 400;
  cursor: pointer;
  border-radius: 10px;
  text-align: left;
  transition: background 0.12s ease;
  white-space: nowrap;
}
.chat-more-item:hover { background: rgba(255,255,255,0.07); }
.chat-more-item svg { flex-shrink: 0; opacity: 0.7; width: 14px; height: 14px; }

.chat-more-danger { color: var(--danger) !important; }
.chat-more-danger svg { opacity: 1; }
.chat-more-danger:hover { background: rgba(204,68,68,0.12) !important; }

.chat-more-divider {
  height: 1px;
  background: var(--border);
  margin: 4px 6px;
}

/* Обёртка должна быть поверх всего */
.chat-header-more-wrap {
  position: relative;
  z-index: 1000;
}

/* Light theme */
[data-theme="light"] .chat-more-menu {
  background: rgba(248, 248, 250, 0.65);
  backdrop-filter: blur(20px) saturate(1.3);
  box-shadow: 0 8px 32px rgba(0,0,0,0.12), inset 0 1px 0 rgba(255,255,255,0.8);
}
[data-theme="light"] .chat-more-item:hover { background: rgba(0,0,0,0.05); }

/* ─── Chat header — иконки без фона ─────────────────────────────────────────── */
.chat-header-actions .icon-btn {
  background: transparent;
  border: none;
  color: var(--text-dim);
  box-shadow: none;
  width: 40px;
  height: 40px;
  border-radius: 10px;
}
.chat-header-actions .icon-btn:hover {
  background: rgba(255,255,255,0.08);
  color: var(--text);
  box-shadow: none;
  transform: none;
}
.chat-header-actions .icon-btn svg {
  width: 20px;
  height: 20px;
}
[data-theme="light"] .chat-header-actions .icon-btn {
  background: transparent;
  color: #8e8e93;
}
[data-theme="light"] .chat-header-actions .icon-btn:hover {
  background: rgba(0,0,0,0.06);
  color: #1c1c1e;
}

/* ─── Custom confirm dialog ──────────────────────────────────────────────────── */
.modal-confirm-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: rgba(204,68,68,0.1);
  border: 1px solid rgba(204,68,68,0.2);
  margin: 0 auto 4px;
}
.modal-confirm-icon:empty { display: none; }

/* ─── Auth screen redesign ───────────────────────────────────────────────────── */
.auth-logo {
  text-align: center;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 4px;
  color: var(--text);
  text-shadow: var(--text-glow);
  margin-bottom: 4px;
}
.auth-logo-dim { color: var(--text-dim); }

/* Кнопка генерации пароля */
.auth-gen-btn {
  width: 100%;
  height: 48px;
  border-radius: 14px;
  border: 1px dashed rgba(255,255,255,0.2);
  background: rgba(255,255,255,0.03);
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  font-family: var(--font);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.2s ease;
}
.auth-gen-btn:hover {
  border-color: rgba(255,255,255,0.35);
  background: rgba(255,255,255,0.06);
}

/* Строка с паролем + иконки */
.auth-pass-row {
  display: flex;
  gap: 6px;
  align-items: center;
}
.auth-icon-btn {
  width: 44px;
  height: 48px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.04);
  color: var(--text-dim);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.15s ease;
}
.auth-icon-btn:hover { background: rgba(255,255,255,0.08); color: var(--text); }
.auth-icon-btn.copied { color: var(--success, #68d391); border-color: var(--success, #68d391); }

/* Предупреждение */
.auth-warning {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: rgba(204,136,0,0.08);
  border: 1px solid rgba(204,136,0,0.2);
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 12px;
  color: #cc8800;
  line-height: 1.6;
}
[data-theme="light"] .auth-warning { background: rgba(204,136,0,0.06); }

/* Чекбокс подтверждения */
.auth-confirm-row {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: 13px;
  color: var(--text-dim);
  user-select: none;
}
.auth-confirm-row input[type="checkbox"] { display: none; }
.auth-confirm-check {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  border: 1.5px solid var(--border);
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.15s ease;
  color: transparent;
}
.auth-confirm-row input:checked ~ .auth-confirm-check {
  background: rgba(104,211,145,0.15);
  border-color: rgba(104,211,145,0.6);
  color: #68d391;
}
.auth-confirm-row input:checked ~ span:last-child { color: var(--text); }

/* Сохранённый аккаунт на вкладке входа */
.auth-saved-user {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 12px 14px;
  margin-bottom: 4px;
}
.auth-saved-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  flex-shrink: 0;
}
.auth-saved-label {
  font-size: 9px;
  color: var(--text-dim);
  letter-spacing: 1.5px;
  margin-bottom: 3px;
}
.auth-saved-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}

/* Light theme */
[data-theme="light"] .auth-gen-btn { border-color: rgba(0,0,0,0.15); background: rgba(0,0,0,0.03); color: #1c1c1e; }
[data-theme="light"] .auth-gen-btn:hover { border-color: rgba(0,0,0,0.3); background: rgba(0,0,0,0.06); }
[data-theme="light"] .auth-icon-btn { background: rgba(0,0,0,0.04); }
[data-theme="light"] .auth-icon-btn:hover { background: rgba(0,0,0,0.08); }
[data-theme="light"] .auth-saved-user { background: rgba(0,0,0,0.03); }
[data-theme="light"] .auth-saved-avatar { background: rgba(0,0,0,0.06); }

/* ─── File caption ───────────────────────────────────────────────────────────── */
.file-caption {
  font-size: 13px;
  color: var(--text);
  line-height: 1.5;
  padding: 8px 12px 4px;
  word-break: break-word;
  background: rgba(255,255,255,0.03);
  border-radius: 0 0 12px 12px;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.file-caption-inline {
  font-size: 12px;
  color: var(--text-dim);
  margin-top: 3px;
  line-height: 1.4;
}
[data-theme="light"] .file-caption {
  background: rgba(0,0,0,0.03);
  border-top-color: rgba(0,0,0,0.06);
}

/* ═══ Holiday banner ═══ */
.holiday-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0 14px;
  background: transparent;
  border: none;
  border-radius: 0;
  cursor: pointer;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  transition: max-height 0.4s cubic-bezier(0.22,1,0.36,1), opacity 0.35s ease, margin 0.35s ease, padding 0.35s ease;
}
.holiday-banner.visible {
  max-height: 60px;
  opacity: 1;
  margin: 0 14px 6px;
  padding: 8px 0;
  pointer-events: auto;
  border-bottom: 1px solid var(--border);
}
.holiday-banner:hover {
  background: linear-gradient(135deg, rgba(99,102,241,0.18), rgba(168,85,247,0.15));
  transform: translateY(-1px);
}
.holiday-banner:active { transform: scale(0.98); }
.holiday-banner-icon { font-size: 22px; line-height: 1; flex-shrink: 0; }
.holiday-banner-body { flex: 1; min-width: 0; }
.holiday-banner-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.holiday-banner-sub {
  font-size: 11px;
  color: var(--text-dim);
  margin-top: 2px;
}

/* ═══ Holiday detail panel ═══ */
.holiday-overlay {
  position: fixed;
  inset: 0;
  z-index: 99998;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: opacity 0.3s cubic-bezier(0.22,1,0.36,1), visibility 0.3s;
}
.holiday-overlay.visible {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
}
.holiday-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(4px);
}
.holiday-panel {
  position: relative;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 32px 28px 24px;
  max-width: 420px;
  width: 90vw;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 24px 80px rgba(0,0,0,0.35);
  transform: scale(0.92) translateY(16px);
  transition: transform 0.35s cubic-bezier(0.34,1.56,0.64,1);
  text-align: center;
}
.holiday-overlay.visible .holiday-panel {
  transform: scale(1) translateY(0);
}
.holiday-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.08);
  color: var(--text-dim);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}
.holiday-close:hover { background: rgba(255,255,255,0.14); color: var(--text); }
.holiday-panel-icon { font-size: 48px; margin-bottom: 12px; }
.holiday-panel-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 4px;
}
.holiday-panel-date {
  font-size: 12px;
  color: var(--text-dim);
  margin-bottom: 10px;
}

/* Holiday lang toggle */
.holiday-lang-toggle {
  display: flex;
  justify-content: center;
  margin-bottom: 14px;
}
.holiday-toggle-track {
  position: relative;
  display: inline-flex;
  align-items: center;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 2px;
  gap: 0;
  cursor: pointer;
  user-select: none;
}
.holiday-toggle-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: calc(50% - 2px);
  height: calc(100% - 4px);
  background: var(--accent-color);
  border-radius: 18px;
  transition: left 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  z-index: 1;
  pointer-events: none;
}
.holiday-toggle-track.en .holiday-toggle-thumb {
  left: calc(50%);
}
.holiday-toggle-label {
  position: relative;
  z-index: 2;
  padding: 5px 18px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-dim);
  transition: color 0.2s;
  pointer-events: none;
}
.holiday-toggle-label.active { color: #fff; }
.holiday-panel-desc {
  font-size: 14px;
  color: var(--text);
  line-height: 1.6;
  text-align: left;
  margin-bottom: 12px;
}
.holiday-panel-wiki {
  font-size: 11px;
  color: var(--text-dim);
  margin-bottom: 20px;
}
.holiday-panel-wiki a {
  color: var(--accent-color);
  text-decoration: none;
}
.holiday-panel-wiki a:hover { text-decoration: underline; }
.holiday-congrat-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 24px;
  border: none;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--btn-from), var(--btn-to));
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
  box-shadow: 0 4px 16px var(--btn-glow);
}
.holiday-congrat-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 24px var(--btn-glow); }
.holiday-congrat-btn:active { transform: scale(0.97); }

/* ═══ Holiday contact picker ═══ */
.holiday-picker-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: opacity 0.25s cubic-bezier(0.22,1,0.36,1), visibility 0.25s;
  background: rgba(0,0,0,0.45);
  backdrop-filter: blur(6px);
}
.holiday-picker-overlay.visible {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
}
.holiday-picker-panel {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 18px;
  width: 340px;
  max-height: 400px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
  transform: scale(0.94);
  transition: transform 0.25s cubic-bezier(0.34,1.56,0.64,1);
}
.holiday-picker-overlay.visible .holiday-picker-panel {
  transform: scale(1);
}
.holiday-picker-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  border-bottom: 1px solid var(--border);
}
.holiday-picker-close {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.holiday-picker-close:hover { background: rgba(255,255,255,0.08); color: var(--text); }
.holiday-picker-list {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
}
.holiday-picker-list::-webkit-scrollbar { width: 4px; }
.holiday-picker-list::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.15); border-radius: 4px; }
.holiday-contact-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border: none;
  background: transparent;
  color: var(--text);
  font-size: 14px;
  border-radius: 12px;
  cursor: pointer;
  text-align: left;
  transition: background 0.12s;
}
.holiday-contact-item:hover { background: var(--hover-bg); }
.holiday-contact-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-color), #764ba2);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* ═══ Hamburger menu ═══ */
.ham-overlay {
  position: fixed;
  inset: 0;
  z-index: 99990;
  background: rgba(0,0,0,0.4);
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s;
}
.ham-overlay.visible {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
}
.ham-menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 280px;
  height: 100vh;
  z-index: 99991;
  background: var(--bg2);
  border-right: 1px solid var(--border);
  box-shadow: 2px 0 20px rgba(0,0,0,0.25);
  display: flex;
  flex-direction: column;
  transform: translateX(-100%);
  transition: transform 0.22s cubic-bezier(0.22,1,0.36,1);
}
.ham-menu.open { transform: translateX(0); }
.ham-header { padding: 20px 16px 16px; flex-shrink: 0; }
.ham-profile-row { display: flex; align-items: center; gap: 12px; cursor: pointer; border-radius: 12px; padding: 8px; margin: -8px; transition: background 0.12s; }
.ham-profile-row:hover { background: var(--hover-bg); }
.ham-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-color), #8b5cf6);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  font-weight: 700;
  flex-shrink: 0;
}
.ham-profile-info { flex: 1; min-width: 0; }
.ham-name { font-size: 15px; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ham-id { font-size: 12px; color: var(--text-dim); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ham-chevron { color: var(--text-dim); flex-shrink: 0; }
.ham-divider { height: 1px; background: var(--border); flex-shrink: 0; margin: 0 12px; }
.ham-list { flex: 1; overflow-y: auto; padding: 6px 8px; }
.ham-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 0 12px;
  height: 44px;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: var(--text);
  font-size: 14px;
  font-family: inherit;
  cursor: pointer;
  text-align: left;
  transition: background 0.1s;
}
.ham-item:hover { background: var(--hover-bg); }
.ham-item:active { background: var(--active-bg); }
.ham-icon {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--text-dim);
}
.ham-icon svg { width: 18px; height: 18px; }
.ham-item-label-row {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex: 1;
  min-width: 0;
}
.ham-item-note {
  font-size: 10px;
  color: var(--text-dim);
  opacity: 0.55;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ham-footer { flex-shrink: 0; padding: 4px 8px; }
.ham-toggle { position: relative; display: inline-flex; width: 36px; height: 20px; margin-left: auto; flex-shrink: 0; cursor: pointer; }
.ham-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.ham-toggle-slider {
  position: absolute;
  inset: 0;
  background: var(--bg3);
  border-radius: 10px;
  transition: background 0.2s;
  cursor: pointer;
}
.ham-toggle-slider::before {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--text);
  transition: transform 0.2s, background 0.2s;
}
.ham-toggle input:checked + .ham-toggle-slider { background: var(--accent-color); }
.ham-toggle input:checked + .ham-toggle-slider::before { transform: translateX(16px); background: #fff; }
.ham-version {
  flex-shrink: 0;
  padding: 10px 16px 14px;
  font-size: 11px;
  color: var(--text-dim);
  opacity: 0.5;
  text-align: center;
  line-height: 1.4;
}

/* ═══ Contacts modal ═══ */
.contacts-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 100010;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.45);
  backdrop-filter: blur(4px);
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s;
}
.contacts-modal-overlay.visible {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
}
.contacts-modal {
  width: 400px;
  height: 560px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 16px 48px rgba(0,0,0,0.3);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: scale(0.96);
  transition: transform 0.22s cubic-bezier(0.34,1.56,0.64,1);
}
.contacts-modal-overlay.visible .contacts-modal {
  transform: scale(1);
}
.contacts-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 20px 0;
  flex-shrink: 0;
}
.contacts-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
}
.contacts-sort-btn {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.12s, color 0.12s;
}
.contacts-sort-btn:hover { background: var(--hover-bg); color: var(--text); }
#contacts-search-input { background: #262626; color: #ffffff; border: 1px solid transparent; }
.search-container input::placeholder { color: #aaaaaa; opacity: 0.6; }
.modal-footer .btn-add:hover,
.modal-footer .btn-close:hover { opacity: 0.7; }
.contacts-search-input:focus { background: var(--bg2); border: 1px solid var(--border); }
.contacts-search-input::placeholder { color: var(--text-dim); }
.contacts-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 4px 12px;
}
.contacts-list::-webkit-scrollbar { width: 3px; }
.contacts-list::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.12); border-radius: 3px; }
.contacts-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  height: 60px;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.1s;
  border: none;
  background: transparent;
  width: 100%;
  text-align: left;
  color: var(--text);
  font-family: inherit;
}
.contacts-item:hover { background: var(--hover-bg); }
.contacts-item:active { background: var(--active-bg); }
.contacts-item-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-color), #8b5cf6);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 700;
  flex-shrink: 0;
}
.contacts-item-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.contacts-item-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.contacts-item-status {
  font-size: 12px;
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.contacts-item-badge {
  display: inline-flex;
  font-size: 10px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 4px;
  margin-left: 6px;
  vertical-align: middle;
}
.contacts-item-badge.group { background: rgba(99,102,241,0.12); color: var(--accent-color); }
.contacts-item-badge.channel { background: rgba(34,211,238,0.12); color: #22d3ee; }
.contacts-item-badge.fav { background: rgba(251,191,36,0.12); color: #fbbf24; }
/* ═══ Settings modal (Telegram-style) ═══ */
.set-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 100010;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s;
}
.set-modal-overlay.visible {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
}
.set-modal {
  width: 420px;
  height: 580px;
  background: linear-gradient(145deg, rgba(255,255,255,0.08) 0%, rgba(14,14,22,0.5) 25%, rgba(10,10,18,0.4) 75%, rgba(255,255,255,0.04) 100%);
  backdrop-filter: blur(28px) saturate(1.5);
  -webkit-backdrop-filter: blur(28px) saturate(1.5);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 20px;
  box-shadow: inset 0 1.5px 0 rgba(255,255,255,0.1), inset 0 -1.5px 0 rgba(0,0,0,0.2), 0 24px 80px rgba(0,0,0,0.5);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: scale(0.95) translateY(8px);
  transition: transform 0.25s cubic-bezier(0.34,1.56,0.64,1);
}
.set-modal-overlay.visible .set-modal {
  transform: scale(1) translateY(0);
}
.set-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 20px 0;
  flex-shrink: 0;
}
.set-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
}
.set-header-actions {
  display: flex;
  gap: 12px;
  margin-left: 12px;
}

.set-icon-btn {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.12s, color 0.12s;
}
.set-icon-btn svg { width: 20px; height: 20px; }
.set-icon-btn:hover { background: rgba(255,255,255,0.08); color: var(--text); }
.set-profile {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  flex-shrink: 0;
  cursor: pointer;
  border-radius: 12px;
  margin: 8px 12px 0;
  transition: background 0.12s;
  background: rgba(255,255,255,0.04);
}
.set-profile:hover { background: rgba(255,255,255,0.08); }
.set-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 700;
  flex-shrink: 0;
}
.set-profile-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.set-profile-name { font-size: 15px; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.set-profile-nick { font-size: 13px; color: #6366f1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.set-divider { height: 1px; background: var(--border); flex-shrink: 0; margin: 0 20px; }
.set-content { flex: 1; min-height: 0; position: relative; overflow: hidden; display: flex; }
.set-list, .set-page { position: absolute; inset: 0; overflow-y: auto; transition: transform 0.25s cubic-bezier(0.22,1,0.36,1), opacity 0.2s ease; }
.set-page { transform: translateX(100%); opacity: 0; z-index: 2; }
.set-page.active { transform: translateX(0); opacity: 1; }
.set-list.hidden { transform: translateX(-20%); opacity: 0; pointer-events: none; }
.set-list::-webkit-scrollbar { width: 3px; }
.set-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 3px; }
.set-page::-webkit-scrollbar { width: 3px; }
.set-page::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.1); border-radius: 3px; }
.set-list { padding: 4px 12px 12px; }
.set-page { padding: 4px 16px 20px; }
.set-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 8px 12px;
  border: none;
  background: transparent;
  color: #6366f1;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: opacity 0.12s;
}
.set-back-btn:hover { opacity: 0.7; }
.set-page-body { padding: 0 4px; }
.set-item {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  height: 48px;
  padding: 0 12px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  font-size: 14px;
  font-family: inherit;
  cursor: pointer;
  text-align: left;
  transition: background 0.1s;
}
.set-item:hover { background: var(--hover-bg); }
.set-item:active { background: var(--active-bg); }
.set-item-icon {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #6366f1;
}
.set-item-icon svg { width: 18px; height: 18px; }
.set-item-label { flex: 1; }
.set-item-value {
  font-size: 13px;
  color: #6366f1;
  flex-shrink: 0;
}

/* ═══ Set page form elements ═══ */
.sp-section { display: flex; flex-direction: column; gap: 10px; }
.sp-label { font-size: 13px; font-weight: 600; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 2px; }
.sp-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 36px; }
.sp-row-label { font-size: 14px; color: var(--text); flex-shrink: 0; }
.sp-value { font-size: 13px; color: var(--text-dim); }
.sp-value.mono { font-family: monospace; font-size: 11px; word-break: break-all; text-align: right; }
.sp-input {
  flex: 1; max-width: 200px; height: 32px; padding: 0 10px; border: 1px solid var(--border);
  border-radius: 8px; background: var(--input-bg); color: var(--text); font-size: 13px;
  font-family: inherit; outline: none; text-align: right; transition: border-color 0.12s;
}
.sp-input:focus { border-color: #6366f1; }
.cd-trigger { background: var(--input-bg); color: var(--text); border-color: var(--border); }
.cd-list { background: var(--bg2); border-color: var(--border); }
.cd-opt { color: var(--text); }
.cd-opt:hover { background: var(--hover-bg); }
.cd-opt.selected { background: rgba(99,102,241,0.08); color: #6366f1; }
.sp-btn {
  align-self: flex-start; padding: 8px 20px; border: none; border-radius: 8px;
  background: #6366f1; color: #fff; font-size: 13px; font-weight: 600;
  font-family: inherit; cursor: pointer; transition: opacity 0.12s;
}
.sp-btn:hover { opacity: 0.85; }
.sp-btn-danger { background: rgba(239,68,68,0.8); }
.sp-desc { font-size: 12px; color: var(--text-dim); line-height: 1.5; margin-bottom: 4px; }
.sp-divider { height: 1px; background: var(--border); margin: 8px 0; }

/* ═══ Profile page (set-modal) ═══ */
.sp-profile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  height: 100%;
  padding: 4px 0 0;
}
.sp-profile-avatar-wrap {
  position: relative;
  margin: 16px 0 12px;
}
.sp-profile-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  font-weight: 700;
  box-shadow: 0 0 0 3px rgba(99,102,241,0.25), 0 8px 24px rgba(0,0,0,0.3);
  transition: box-shadow 0.2s;
  overflow: hidden;
}
.sp-profile-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
.sp-profile-avatar-wrap {
  cursor: pointer;
}
.sp-profile-avatar:hover {
  box-shadow: 0 0 0 3px rgba(99,102,241,0.4), 0 8px 32px rgba(0,0,0,0.4);
}
.sp-profile-avatar-edit {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--bg2);
  border: 2px solid var(--border);
  color: var(--text-dim);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s;
  backdrop-filter: blur(8px);
}
.sp-profile-avatar-edit:hover {
  background: var(--hover-bg);
  color: var(--text);
  transform: scale(1.1);
}
.sp-profile-name {
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  text-align: center;
  margin-bottom: 4px;
  text-shadow: 0 1px 6px rgba(0,0,0,0.5);
}
.sp-profile-id {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 20px;
}
.sp-profile-id-text {
  font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
  font-size: 13px;
  color: rgba(255,255,255,0.8);
  letter-spacing: 0.2px;
  text-shadow: 0 1px 4px rgba(0,0,0,0.4);
}
.sp-profile-id-badge {
  font-size: 11px;
  font-weight: 500;
  color: rgba(255,255,255,0.7);
  opacity: 1;
  letter-spacing: 0.3px;
  background: rgba(0,0,0,0.2);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 4px;
  padding: 1px 5px;
  line-height: 1.4;
}
.cid-bold {
  font-weight: 700;
}
.sp-profile-id-copy {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  border: none;
  background: rgba(0,0,0,0.15);
  color: rgba(255,255,255,0.75);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.12s;
}
.sp-profile-id-copy:hover {
  background: rgba(0,0,0,0.25);
  color: var(--text);
}
.sp-profile-fields {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0 4px;
}
.sp-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sp-field-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.sp-field-input {
  width: 100%;
  height: 44px;
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(255,255,255,0.05);
  color: var(--text);
  font-size: 14px;
  font-family: inherit;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.sp-field-input:focus {
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99,102,241,0.12);
}
.sp-field-input::placeholder {
  color: var(--text-dim);
  opacity: 0.6;
}
.sp-field-id-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  height: 44px;
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(255,255,255,0.03);
}
.sp-field-id-value {
  flex: 1;
  font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
  font-size: 12px;
  color: var(--text-dim);
  word-break: break-all;
  line-height: 1.4;
}
.sp-copy-btn {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.12s;
}
.sp-copy-btn:hover {
  background: var(--hover-bg);
  color: var(--text);
}
.sp-profile-actions {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: auto;
  padding: 12px 0 4px;
}
.sp-btn-primary {
  width: 100%;
  height: 44px;
  border: none;
  border-radius: 10px;
  background: linear-gradient(145deg, rgba(255,255,255,0.1) 0%, rgba(99,102,241,0.9) 30%, rgba(99,102,241,0.8) 100%);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: opacity 0.15s, transform 0.1s;
}
.sp-btn-primary:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}
.sp-btn-primary:active {
  transform: scale(0.98);
}
.sp-btn-logout {
  width: 100%;
  height: 40px;
  border: 1px solid rgba(239,68,68,0.25);
  border-radius: 10px;
  background: rgba(239,68,68,0.06);
  color: rgba(239,68,68,0.7);
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.15s;
}
.sp-btn-logout:hover {
  background: rgba(239,68,68,0.12);
  color: rgba(239,68,68,0.9);
  border-color: rgba(239,68,68,0.4);
}

/* ═══ Profile banner (background) ═══ */
.sp-profile-banner {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 28px 20px 20px;
  margin-bottom: 16px;
  border-radius: 16px;
  position: relative;
  overflow: hidden;
  background: rgba(0,0,0,0.06);
  transition: background 0.3s ease;
  background-size: 400% 400%;
  isolation: isolate;
}
.sp-profile-banner > * { position: relative; z-index: 10; }
.sp-profile-banner > .sp-bg-pattern { z-index: 0; }
.sp-profile-banner > .sp-profile-banner-video-wrap { z-index: 1; }

/* Emoji pattern overlay */
.sp-bg-pattern {
  position: absolute;
  inset: -1px;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  border-radius: inherit;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 72px;
  padding: 28px 36px;
  font-size: 26px;
  line-height: 1;
  user-select: none;
  mix-blend-mode: soft-light;
  opacity: 0.09;
  mask-image: radial-gradient(ellipse 85% 75% at center, black 25%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 85% 75% at center, black 25%, transparent 100%);
}
.sp-bg-pattern span {
  flex: 0 0 auto;
  filter: grayscale(1) brightness(0) invert(1);
  font-size: inherit;
}

/* Animated gradient presets */
@keyframes auroraFlow {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes neonPulse {
  0%   { background-position: 0% 0%; }
  25%  { background-position: 100% 0%; }
  50%  { background-position: 100% 100%; }
  75%  { background-position: 0% 100%; }
  100% { background-position: 0% 0%; }
}
@keyframes duskGlow {
  0%   { background-position: 50% 0%; }
  50%  { background-position: 50% 100%; }
  100% { background-position: 50% 0%; }
}

.bg-aurora {
  background: linear-gradient(135deg, #0a1628, #1a0a3e, #2d1b5e, #1a0533, #0a1628);
  background-size: 400% 400%;
  animation: auroraFlow 10s ease infinite;
}
.bg-neon {
  background: linear-gradient(135deg, #0a0020, #1a003a, #2d0050, #1a003a, #0a0020);
  background-size: 400% 400%;
  animation: neonPulse 8s ease infinite;
}
.bg-dusk {
  background: linear-gradient(135deg, #1a0800, #2d0a00, #4a1508, #2d0a00, #1a0800);
  background-size: 400% 400%;
  animation: duskGlow 12s ease infinite;
}

/* Custom image/video banner */
.bg-custom-image { background-size: cover; background-position: center; background-repeat: no-repeat; }
.bg-custom-video { background: #0a0a12; }
.sp-profile-banner-video-wrap {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  border-radius: inherit;
}
.sp-profile-banner-video-wrap video,
.sp-profile-banner-video-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ═══ Profile background section ═══ */
.sp-bg-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}
.sp-bg-scroll {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 2px 0 4px;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}
.sp-bg-scroll::-webkit-scrollbar { height: 2px; }
.sp-bg-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 2px; }
.sp-bg-card {
  flex-shrink: 0;
  width: 72px;
  height: 56px;
  border-radius: 8px;
  border: 1.5px solid var(--border);
  background: transparent;
  cursor: pointer;
  padding: 0;
  overflow: hidden;
  transition: border-color 0.15s, transform 0.1s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sp-bg-card:hover {
  border-color: rgba(255,255,255,0.2);
  transform: translateY(-1px);
}
.sp-bg-card.active {
  border-color: #6366f1;
  box-shadow: 0 0 0 2px rgba(99,102,241,0.25);
}
.sp-bg-preview {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 6px;
  transition: filter 0.2s;
}
.sp-bg-card:hover .sp-bg-preview {
  filter: brightness(1.15);
}
.sp-bg-upload {
  border-style: dashed;
  border-color: var(--border);
  background:
    radial-gradient(circle at 30% 40%, rgba(255,255,255,0.03) 0%, transparent 50%),
    radial-gradient(circle at 70% 60%, rgba(255,255,255,0.02) 0%, transparent 40%),
    repeating-linear-gradient(
      45deg,
      transparent,
      transparent 4px,
      rgba(255,255,255,0.015) 4px,
      rgba(255,255,255,0.015) 5px
    );
  transition: border-color 0.15s, background 0.3s;
}
.sp-bg-upload-icon {
  font-size: 20px;
  font-weight: 300;
  color: var(--text-dim);
  line-height: 1;
  transition: color 0.15s, transform 0.3s;
  position: relative;
  z-index: 1;
}
.sp-bg-upload::after {
  content: 'GIF';
  position: absolute;
  bottom: 4px;
  right: 6px;
  font-size: 7px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--text-dim);
  opacity: 0.3;
  transition: opacity 0.2s;
}
.sp-bg-upload:hover {
  border-color: rgba(255,255,255,0.25);
  background:
    radial-gradient(circle at 30% 40%, rgba(255,255,255,0.05) 0%, transparent 50%),
    radial-gradient(circle at 70% 60%, rgba(255,255,255,0.03) 0%, transparent 40%),
    repeating-linear-gradient(
      45deg,
      transparent,
      transparent 4px,
      rgba(255,255,255,0.025) 4px,
      rgba(255,255,255,0.025) 5px
    );
}
.sp-bg-upload:hover .sp-bg-upload-icon {
  color: var(--text);
  transform: scale(1.15);
}
.sp-bg-upload:hover::after {
  opacity: 0.6;
}

/* Light theme overrides for bg section */
[data-theme="light"] .sp-bg-card { border-color: rgba(0,0,0,0.1); }
[data-theme="light"] .sp-bg-card:hover { border-color: rgba(0,0,0,0.25); }
[data-theme="light"] .sp-bg-card.active { border-color: #6366f1; }
[data-theme="light"] .sp-bg-scroll::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.12); }
[data-theme="light"] .sp-bg-upload {
  background:
    radial-gradient(circle at 30% 40%, rgba(0,0,0,0.02) 0%, transparent 50%),
    radial-gradient(circle at 70% 60%, rgba(0,0,0,0.015) 0%, transparent 40%),
    repeating-linear-gradient(45deg, transparent, transparent 4px, rgba(0,0,0,0.015) 4px, rgba(0,0,0,0.015) 5px);
}
[data-theme="light"] .sp-bg-upload:hover {
  background:
    radial-gradient(circle at 30% 40%, rgba(0,0,0,0.04) 0%, transparent 50%),
    radial-gradient(circle at 70% 60%, rgba(0,0,0,0.025) 0%, transparent 40%),
    repeating-linear-gradient(45deg, transparent, transparent 4px, rgba(0,0,0,0.025) 4px, rgba(0,0,0,0.025) 5px);
}

/* Fix sp-scroll to allow flexbox for profile page */
.sp-scroll:has(.sp-profile) {
  display: flex;
  flex-direction: column;
  padding: 0 16px 16px;
}

/* Settings page default header */
.sp-header {
  display: flex; align-items: center;
  padding: 12px 4px 8px; flex-shrink: 0; background: transparent;
  border-bottom: 1px solid var(--border);
  position: relative;
}
.sp-header-title {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
}
.sp-close-btn {
  width: 36px; height: 36px; border-radius: 8px; border: none;
  background: rgba(255,255,255,0.05); color: var(--text-dim); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.12s;
  margin-left: auto;
}
.sp-close-btn:hover { background: rgba(255,255,255,0.1); color: var(--text); }
.sp-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 8px 12px;
  border: none;
  background: transparent;
  color: #6366f1;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: opacity 0.12s;
}
.sp-back-btn:hover { opacity: 0.7; }
.sp-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 12px 16px 24px; background: transparent; }
.sp-scroll::-webkit-scrollbar { width: 3px; }
.sp-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 3px; }

.sp-avatar {
  width: 56px; height: 56px; border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-color), #8b5cf6); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; font-weight: 700; margin-bottom: 8px;
}
.sp-lang-item {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px;
  border: 1px solid var(--border); border-radius: 10px;
  background: transparent; color: var(--text); font-size: 14px; font-family: inherit;
  cursor: pointer; text-align: left; transition: all 0.12s;
}
.sp-lang-item:hover { background: var(--hover-bg); border-color: #6366f1; }
.sp-lang-item.active { border-color: #6366f1; background: rgba(99,102,241,0.06); }
.sp-lang-flag { font-size: 22px; line-height: 1; }

/* ═══ Chat Settings page (cs-) ═══ */
.cs-header {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 16px 8px; flex-shrink: 0; background: transparent;
  border-bottom: 1px solid var(--border);
}
.cs-title { flex: 1; font-size: 16px; font-weight: 700; color: var(--text); text-align: center; }
.cs-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 12px 16px 32px; background: transparent; }
.cs-scroll::-webkit-scrollbar { width: 3px; }
.cs-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 3px; }
.cs-section { margin-bottom: 24px; }
.cs-label {
  font-size: 12px; font-weight: 600; color: var(--text-dim);
  text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 12px;
}
.cs-themes { display: flex; gap: 10px; }
.cs-theme-card {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px;
  cursor: pointer; padding: 6px; border-radius: 10px; transition: background 0.12s;
  position: relative;
}
.cs-theme-card:hover { background: var(--hover-bg); }
.cs-theme-card.active { background: rgba(99,102,241,0.1); }
.cs-theme-preview {
  width: 100%; aspect-ratio: 3/4; border-radius: 8px; overflow: hidden;
  display: flex; flex-direction: column; border: 1px solid var(--border);
  background: rgba(255,255,255,0.05);
  box-shadow: 0 2px 6px rgba(0,0,0,0.06);
}
.cs-tp-bar { height: 12px; background: rgba(255,255,255,0.08); border-bottom: 1px solid var(--border); flex-shrink: 0; }
.cs-tp-body { flex: 1; padding: 4px; display: flex; flex-direction: column; gap: 4px; }
.cs-tp-bubble { height: 8px; border-radius: 4px; flex-shrink: 0; }
.cs-tp-bubble.out { background: #6366f1; width: 55%; align-self: flex-end; opacity: 0.6; }
.cs-tp-bubble.in { background: #999999; width: 45%; align-self: flex-start; opacity: 0.35; }
.cs-theme-label { font-size: 11px; color: var(--text); font-weight: 500; }
.cs-theme-check {
  position: absolute; bottom: 18px; width: 16px; height: 16px; border-radius: 50%;
  background: #6366f1; color: #fff; display: flex; align-items: center; justify-content: center;
}
.cs-accent-row { display: flex; gap: 10px; flex-wrap: wrap; }
.cs-accent-dot {
  width: 24px; height: 24px; border-radius: 50%; border: 2px solid transparent;
  background: var(--ca); cursor: pointer; transition: border-color 0.15s, transform 0.1s; padding: 0; flex-shrink: 0;
}
.cs-accent-dot:hover { transform: scale(1.15); }
.cs-accent-dot.active { border-color: #333333; transform: scale(1.15); }
.cs-accent-multi { border: none !important; }
.cs-opt {
  display: flex; align-items: center; gap: 12px; height: 44px; padding: 0 12px;
  border-radius: 8px; cursor: pointer; transition: background 0.1s;
}
.cs-opt:hover { background: var(--hover-bg); }
.cs-opt-icon { width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--text-dim); }
.cs-opt-icon svg { width: 18px; height: 18px; }
.cs-opt-label { flex: 1; font-size: 14px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-opt-value { font-size: 13px; color: var(--text-dim); flex-shrink: 0; }
.cs-opt-value.accent { color: #6366f1; }
.cs-id-pill {
  display: inline-flex; font-size: 11px; font-weight: 600; padding: 2px 8px;
  border-radius: 4px; background: rgba(99,102,241,0.12); color: #6366f1;
}
.cs-custom-row { display: flex; gap: 10px; }
.cs-custom-btn {
  width: 48px; height: 48px; border-radius: 10px; border: 1px dashed var(--border);
  background: transparent; color: var(--text-dim); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.12s;
}
.cs-custom-btn:hover { border-color: #6366f1; color: #6366f1; background: rgba(99,102,241,0.1); }

/* ═══ Link confirmation modal ═══ */
.link-confirm-overlay {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: opacity 0.3s cubic-bezier(0.22,1,0.36,1), visibility 0.3s;
}
.link-confirm-overlay.visible {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
}
.link-confirm-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(6px);
}
.link-confirm-panel {
  position: relative;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 32px 28px 24px;
  max-width: 380px;
  width: 90vw;
  box-shadow: 0 24px 80px rgba(0,0,0,0.35);
  text-align: center;
  transform: scale(0.92) translateY(16px);
  transition: transform 0.35s cubic-bezier(0.34,1.56,0.64,1);
}
.link-confirm-overlay.visible .link-confirm-panel {
  transform: scale(1) translateY(0);
}
.link-confirm-icon {
  display: flex;
  justify-content: center;
  margin-bottom: 12px;
  color: var(--accent-color);
  opacity: 0.7;
}
.link-confirm-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 8px;
}
.link-confirm-desc {
  font-size: 13px;
  color: var(--text-dim);
  margin-bottom: 8px;
}
.link-confirm-url {
  font-size: 12px;
  font-family: monospace;
  color: var(--accent-color);
  background: rgba(0,0,0,0.06);
  padding: 8px 12px;
  border-radius: 10px;
  margin-bottom: 12px;
  word-break: break-all;
}
.link-confirm-warn {
  font-size: 12px;
  color: var(--danger);
  opacity: 0.8;
  margin-bottom: 20px;
  line-height: 1.5;
}
.link-confirm-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
}

/* ═══ Accent text readability — гарантирует контраст в любой теме ═══ */
.msg-link,
.chip.active,
.ttl-chip.active,
.camera-shape-btn.active,
.tg-rail-btn.active,
.tg-rail-btn:hover {
  text-shadow: 0 0 3px rgba(0,0,0,0.45), 0 0 10px rgba(0,0,0,0.2);
}
[data-theme="light"] .msg-link {
  text-shadow: none;
  background: var(--accent-soft);
  border-radius: 3px;
  padding: 0 2px;
}
[data-theme="light"] .chip.active,
[data-theme="light"] .ttl-chip.active {
  text-shadow: none;
  font-weight: 700;
}
[data-theme="light"] .tg-rail-btn.active,
[data-theme="light"] .tg-rail-btn:hover {
  text-shadow: none;
}
/* Accent-colored btn text — boost contrast in all themes */
.btn-primary { font-weight: 600; }
.btn-ghost { font-weight: 500; }
.btn-primary, .btn-ghost { letter-spacing: 0.02em; }
/* Outgoing bubble text — ensure readability on accent-darkened bubble */
.message.outgoing .bubble,
.message.outgoing .msg-time,
.message.outgoing .read-tick {
  text-shadow: 0 0 2px rgba(0,0,0,0.3);
}
[data-theme="light"] .message.outgoing .bubble,
[data-theme="light"] .message.outgoing .msg-time,
[data-theme="light"] .message.outgoing .read-tick {
  text-shadow: 0 0 2px rgba(0,0,0,0.15);
}

/* ═══ Message link styling ═══ */
.msg-link {
  color: var(--accent-color);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(99,102,241,0.3);
  transition: color 0.15s, text-decoration-color 0.15s;
  cursor: pointer;
}
.msg-link:hover {
  color: hsl(238, 84%, 70%);
  text-decoration-color: rgba(99,102,241,0.7);
}

/* ─── Sidebar profile (bottom) ──────────────────────────────────────────────── */
.sidebar-profile {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-top: 1px solid var(--border);
  background: rgba(10, 10, 16, 0.35);
  backdrop-filter: blur(12px) saturate(1.3);
  -webkit-backdrop-filter: blur(12px) saturate(1.3);
  margin-top: auto;
}
.sidebar-profile-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-color), #764ba2);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  flex-shrink: 0;
}
.sidebar-profile-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.sidebar-profile-id {
  font-size: 12px;
  color: var(--text);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}
.sidebar-profile-status {
  display: flex;
  align-items: center;
  gap: 5px;
}
.sidebar-profile-status .conn-dot { width: 6px; height: 6px; border-radius: 50%; background: #666; flex-shrink: 0; }
.sidebar-profile-status .conn-dot.connected { background: #22c55e; }
.sidebar-profile-status .conn-dot.connecting { background: #f59e0b; }
.sidebar-profile-status .conn-dot.disconnected { background: #ef4444; }
.sidebar-profile #main-conn-label {
  font-size: 11px;
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ─── Contact Profile Panel ──────────────────────────────────────────────────── */
.contact-profile-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: stretch;
  justify-content: flex-end;
  pointer-events: none;
}
.contact-profile-overlay.hidden { display: none; }
.contact-profile-overlay.visible { pointer-events: all; }

.contact-profile-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.4);
  backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity 0.25s ease;
  cursor: pointer;
}
.contact-profile-overlay.visible .contact-profile-backdrop { opacity: 1; }

.contact-profile-panel {
  position: relative;
  width: 320px;
  max-width: 90vw;
  height: 100%;
  background: var(--bg2);
  border-left: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  transform: translateX(100%);
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 1;
}
.contact-profile-overlay.visible .contact-profile-panel {
  transform: translateX(0);
}

/* Закрыть */
.contact-profile-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.07);
  color: var(--text-dim);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
  z-index: 2;
}
.contact-profile-close:hover { background: rgba(255,255,255,0.12); color: var(--text); }

/* Hero */
.cp-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40px 24px 24px;
  gap: 8px;
  background: linear-gradient(180deg, rgba(255,255,255,0.03) 0%, transparent 100%);
}

.cp-avatar-wrap {
  position: relative;
  margin-bottom: 4px;
}
.cp-avatar {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: #2a2a2a;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 2px 4px rgba(0,0,0,0.3);
  box-shadow: 0 4px 20px rgba(0,0,0,0.4);
  overflow: hidden;
}
.cp-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }

.cp-online-dot {
  position: absolute;
  bottom: 4px;
  right: 4px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #4cd964;
  border: 3px solid var(--bg2);
  display: none;
}
.cp-online-dot.visible { display: block; }

.cp-name {
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
  text-align: center;
}
.cp-status {
  font-size: 13px;
  color: var(--text-dim);
  text-align: center;
}

/* Кнопки действий */
.cp-actions {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  padding: 0 16px 16px;
}
.cp-action-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 8px;
  border: none;
  border-radius: 14px;
  background: rgba(255,255,255,0.05);
  color: var(--text);
  cursor: pointer;
  font-size: 11px;
  font-family: var(--font);
  font-weight: 500;
  transition: all 0.15s ease;
}
.cp-action-btn:hover { background: rgba(255,255,255,0.1); transform: scale(1.04); }
.cp-action-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(255,255,255,0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-dim);
}

/* Инфо */
.cp-info-section {
  margin: 0 12px 8px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
}
.cp-info-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--border);
  transition: background 0.12s;
}
.cp-info-row:last-child { border-bottom: none; }
.cp-info-row:hover { background: rgba(255,255,255,0.03); }
.cp-info-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(255,255,255,0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-dim);
  flex-shrink: 0;
}
.cp-info-value {
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  word-break: break-all;
}
.cp-info-label {
  font-size: 11px;
  color: var(--text-dim);
  margin-top: 2px;
}
.cp-copy-btn {
  margin-left: auto;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.15s;
}
.cp-copy-btn:hover { background: rgba(255,255,255,0.08); color: var(--text); }

/* Статистика */
.cp-stats {
  margin: 0 12px 8px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
}
.cp-stat-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
  color: var(--text);
  cursor: pointer;
  transition: background 0.12s;
}
.cp-stat-item:last-child { border-bottom: none; }
.cp-stat-item:hover { background: rgba(255,255,255,0.03); }
.cp-stat-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(255,255,255,0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-dim);
  flex-shrink: 0;
}

/* Опасная зона */
.cp-danger-section {
  padding: 8px 12px 24px;
}
.cp-danger-btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 16px;
  border: none;
  border-radius: 14px;
  background: rgba(204,68,68,0.08);
  color: var(--danger);
  font-size: 14px;
  font-family: var(--font);
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
}
.cp-danger-btn:hover { background: rgba(204,68,68,0.15); }

/* Light theme */
[data-theme="light"] .contact-profile-panel { background: #f2f2f7; border-left-color: rgba(0,0,0,0.1); }
[data-theme="light"] .cp-action-btn { background: rgba(0,0,0,0.05); }
[data-theme="light"] .cp-action-btn:hover { background: rgba(0,0,0,0.1); }
[data-theme="light"] .cp-info-section,
[data-theme="light"] .cp-stats { background: #fff; border-color: rgba(0,0,0,0.08); }
[data-theme="light"] .cp-info-row:hover,
[data-theme="light"] .cp-stat-item:hover { background: rgba(0,0,0,0.03); }
[data-theme="light"] .cp-danger-section .cp-danger-btn { background: rgba(204,68,68,0.06); }

/* ─── Contact Profile Media Gallery ─────────────────────────────────────────── */
.cp-stat-item { cursor: pointer; }
.cp-stat-item:hover .cp-stat-icon { background: rgba(255,255,255,0.1); }

.cp-media-section {
  margin: 0 12px 8px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: visible;
  animation: cardIn 0.2s ease;
}
.cp-media-section.hidden { display: none; }

/* Табы */
.cp-media-tabs {
  display: flex;
  border-bottom: 1px solid var(--border);
  padding: 0 4px;
}
.cp-media-tab {
  flex: 1;
  padding: 10px;
  border: none;
  background: transparent;
  color: var(--text-dim);
  font-size: 13px;
  font-weight: 600;
  font-family: var(--font);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: all 0.15s;
}
.cp-media-tab.active { color: var(--text); border-bottom-color: var(--text); }
.cp-media-tab:hover:not(.active) { color: var(--text); }

/* Сетка фото 3 колонки */
.cp-media-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  padding: 2px;
  /* Убираем max-height — панель профиля сама скроллится */
}
.cp-media-grid.hidden { display: none; }

.cp-media-thumb {
  aspect-ratio: 1;
  overflow: hidden;
  cursor: pointer;
  position: relative;
  background: rgba(255,255,255,0.04);
}
.cp-media-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.2s ease;
  display: block;
}
.cp-media-thumb:hover img { transform: scale(1.06); }
.cp-media-thumb-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-dim);
  font-size: 12px;
  padding: 20px;
  grid-column: 1 / -1;
  opacity: 0.5;
}

/* Список файлов */
.cp-files-list {
  /* Убираем max-height — панель профиля сама скроллится */
  overflow-y: visible;
}
.cp-files-list.hidden { display: none; }

.cp-file-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background 0.12s;
}
.cp-file-row:last-child { border-bottom: none; }
.cp-file-row:hover { background: rgba(255,255,255,0.04); }

.cp-file-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(255,255,255,0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-dim);
  flex-shrink: 0;
}
.cp-file-info { flex: 1; min-width: 0; }
.cp-file-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cp-file-meta {
  font-size: 11px;
  color: var(--text-dim);
  margin-top: 2px;
}
.cp-file-dl {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.15s;
}
.cp-file-dl:hover { background: rgba(255,255,255,0.08); color: var(--text); }

.cp-media-empty {
  padding: 24px;
  text-align: center;
  font-size: 13px;
  color: var(--text-dim);
  opacity: 0.5;
}

[data-theme="light"] .cp-media-section { background: #fff; }
[data-theme="light"] .cp-media-thumb { background: rgba(0,0,0,0.04); }
[data-theme="light"] .cp-file-row:hover { background: rgba(0,0,0,0.03); }

/* ─── File ext badge override ────────────────────────────────────────────────── */
.file-icon { flex-shrink: 0; }
.file-icon > div { display: flex !important; }
.cp-file-icon { flex-shrink: 0; }
.cp-file-icon > div { display: flex !important; }

/* ─── Devices section ────────────────────────────────────────────────────────── */
.devices-loading,
.devices-empty {
  padding: 20px;
  text-align: center;
  font-size: 13px;
  color: var(--text-dim);
  opacity: 0.6;
}

.device-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  transition: background 0.12s;
}
.device-row:last-child { border-bottom: none; }
.device-row:hover { background: rgba(255,255,255,0.02); }
.device-current { background: rgba(104,211,145,0.04); }

/* Иконка устройства */
.device-icon-wrap {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-dim);
  flex-shrink: 0;
  transition: all 0.15s;
}
.device-icon-wrap.online {
  background: rgba(104,211,145,0.1);
  border-color: rgba(104,211,145,0.2);
  color: #68d391;
}

/* Инфо */
.device-info { flex: 1; min-width: 0; }

.device-name-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
  flex-wrap: wrap;
}
.device-name-text {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}
.device-badge-current {
  font-size: 10px;
  font-weight: 700;
  color: #68d391;
  background: rgba(104,211,145,0.12);
  border: 1px solid rgba(104,211,145,0.25);
  border-radius: 6px;
  padding: 1px 7px;
  letter-spacing: 0.3px;
  white-space: nowrap;
}

.device-geo-row {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--text-dim);
  flex-wrap: wrap;
}
.device-geo-row svg { flex-shrink: 0; opacity: 0.5; }
.device-dot-sep { opacity: 0.35; }

.device-status-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-dim);
  opacity: 0.4;
  flex-shrink: 0;
}
.device-status-dot.online { background: #68d391; opacity: 1; }
.device-status-text { font-size: 12px; color: var(--text-dim); }
.device-status-text.online { color: #68d391; }

.device-ip-row {
  font-size: 11px;
  color: var(--text-dim);
  opacity: 0.35;
  margin-top: 2px;
  font-family: monospace;
  letter-spacing: 0.3px;
}

/* Кнопка завершения */
.device-end-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: 10px;
  border: 1px solid rgba(204,68,68,0.25);
  background: rgba(204,68,68,0.06);
  color: var(--danger);
  font-size: 12px;
  font-weight: 500;
  font-family: var(--font);
  cursor: pointer;
  flex-shrink: 0;
  white-space: nowrap;
  transition: all 0.15s;
}
.device-end-btn:hover {
  background: rgba(204,68,68,0.14);
  border-color: rgba(204,68,68,0.4);
}

/* Light theme */
[data-theme="light"] .device-row:hover { background: rgba(0,0,0,0.02); }
[data-theme="light"] .device-current { background: rgba(39,174,96,0.04); }
[data-theme="light"] .device-icon-wrap { background: rgba(0,0,0,0.05); border-color: rgba(0,0,0,0.08); }
[data-theme="light"] .device-icon-wrap.online { background: rgba(39,174,96,0.08); border-color: rgba(39,174,96,0.2); }

.device-sub-name {
  font-size: 11px;
  color: var(--text-dim);
  opacity: 0.6;
  margin-bottom: 3px;
}

/* ─── Light theme redesign ───────────────────────────────────────────────────── */

/* Базовые переменные */
[data-theme="light"] {
  --bg:           #f5f7fa;
  --bg2:          #ffffff;
  --bg3:          #eef1f5;
  --accent:       #6366f1;
  --accent2:      #4f46e5;
  --text:         #1e1b4b;
  --text-dim:     #64748b;
  --danger:       #ef4444;
  --success:      #22c55e;
  --border:       rgba(0,0,0,0.06);
  --hover-bg:     rgba(99,102,241,0.06);
  --active-bg:    rgba(99,102,241,0.08);
  --active-border:rgba(99,102,241,0.2);
  --icon-bg:      rgba(99,102,241,0.08);
  --icon-color:   #6366f1;
  --icon-hover-bg:rgba(99,102,241,0.12);
  --btn-glow:     rgba(99,102,241,0.2);
  --sidebar-bg:   #ffffff;
  --header-bg:    rgba(255,255,255,0.9);
}

/* Фон */
[data-theme="light"] body,
[data-theme="light"] html {
  background: #f5f7fa !important;
  color: #1e1b4b !important;
}
[data-theme="light"] #stars-canvas { display: none; }

/* Рельса — белая с мягкой тенью */
[data-theme="light"] .tg-rail {
  width: 64px;
  min-width: 64px;
  background: #ffffff !important;
  border-right: 1px solid rgba(0,0,0,0.04) !important;
  box-shadow: 1px 0 20px rgba(0,0,0,0.04) !important;
}
[data-theme="light"] .tg-rail-btn { color: #94a3b8; }
[data-theme="light"] .tg-rail-btn:hover {
  background: rgba(99,102,241,0.08) !important;
  color: #6366f1 !important;
}
[data-theme="light"] .tg-rail-btn.active {
  background: rgba(99,102,241,0.12) !important;
  color: #6366f1 !important;
  box-shadow: none !important;
}
[data-theme="light"] .tg-logo svg { filter: drop-shadow(0 0 8px rgba(99,102,241,0.15)); }
[data-theme="light"] .tg-rail-avatar {
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  border: none;
  color: #fff;
  box-shadow: 0 2px 10px rgba(99,102,241,0.3);
}
[data-theme="light"] .tg-rail-avatar-wrap .conn-dot {
  border-color: #ffffff;
}

/* Сайдбар */
[data-theme="light"] .sidebar {
  background: #ffffff !important;
  border-right: 1px solid rgba(0,0,0,0.04) !important;
}
[data-theme="light"] .sidebar-header {
  border-bottom: 1px solid rgba(0,0,0,0.04) !important;
  background: transparent;
  padding: 18px 16px;
}
[data-theme="light"] .sidebar-logo { color: #1e1b4b; font-weight: 700; font-size: 17px; }

/* Кнопка нового чата */
[data-theme="light"] #btn-new-chat {
  background: linear-gradient(135deg, #6366f1, #8b5cf6) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 2px 8px rgba(99,102,241,0.3) !important;
}
[data-theme="light"] #btn-new-chat:hover {
  box-shadow: 0 4px 14px rgba(99,102,241,0.4) !important;
  transform: scale(1.05) !important;
}

/* Поиск */
[data-theme="light"] .sidebar-header .search-box { background: transparent; padding: 0; }
[data-theme="light"] .search-box input {
  background: rgba(0,0,0,0.04) !important;
  border-color: transparent !important;
  color: #1e1b4b !important;
  border-radius: 10px !important;
  height: 32px !important;
  font-size: 13px;
}
[data-theme="light"] .search-box input::placeholder { color: #6b7280; }
[data-theme="light"] .search-icon { color: #475569 !important; stroke: #475569 !important; }
[data-theme="light"] .search-box input:focus {
  background: #ffffff !important;
  border-color: rgba(99,102,241,0.3) !important;
  box-shadow: 0 0 0 3px rgba(99,102,241,0.08) !important;
}
[data-theme="light"] .search-input-wrap:focus-within .search-icon { color: #6366f1 !important; stroke: #6366f1 !important; }
[data-theme="light"] .search-container svg { color: #475569 !important; stroke: #475569 !important; }
[data-theme="light"] .search-container input { background: #f1f5f9 !important; color: #1e293b !important; border-color: transparent !important; }
[data-theme="light"] .search-container input::placeholder { color: #64748b !important; }
[data-theme="light"] .emoji-search-input-icon { color: #475569 !important; stroke: #475569 !important; }
[data-theme="light"] .chat-more-item svg { color: #475569 !important; stroke: #475569 !important; opacity: 0.9 !important; }

/* Список чатов */
[data-theme="light"] .chat-list { background: #ffffff; padding: 6px 8px; }
[data-theme="light"] .chat-item {
  border: none !important;
  border-radius: 16px !important;
  margin: 2px 4px !important;
  padding: 12px 14px !important;
}
[data-theme="light"] .chat-item:hover {
  background: rgba(99,102,241,0.05) !important;
}
[data-theme="light"] .chat-item.active {
  background: rgba(99,102,241,0.08) !important;
  box-shadow: 0 2px 10px rgba(99,102,241,0.1) !important;
}
[data-theme="light"] .chat-name { color: #1e1b4b; font-weight: 600; font-size: 15px; }
[data-theme="light"] .chat-preview { color: #64748b; font-size: 13px; }
[data-theme="light"] .chat-time { color: #94a3b8; }
[data-theme="light"] .unread-badge {
  background: linear-gradient(135deg, #6366f1, #8b5cf6) !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(99,102,241,0.35);
  font-weight: 700;
}

/* Аватары */
[data-theme="light"] .avatar {
  background: linear-gradient(135deg, #6366f1, #8b5cf6) !important;
  box-shadow: 0 2px 10px rgba(99,102,241,0.25) !important;
  color: #fff !important;
  font-weight: 700;
}

/* Статус-бар */
[data-theme="light"] .sidebar-profile { background: transparent; border-top-color: rgba(0,0,0,0.05); }
[data-theme="light"] .sidebar-profile #main-conn-label { color: #64748b; }

/* Область чата — светлая */
[data-theme="light"] .chat-area { background: #111111 !important; }

/* Хедер чата */
[data-theme="light"] .chat-header {
  background: rgba(255,255,255,0.95) !important;
  border-bottom: 1px solid rgba(0,0,0,0.04) !important;
  box-shadow: 0 1px 10px rgba(0,0,0,0.04) !important;
  padding: 16px 20px;
}
[data-theme="light"] .chat-header-name { color: #1e1b4b; font-weight: 700; }
[data-theme="light"] .chat-header-status { color: #64748b; }
[data-theme="light"] .chat-header-actions .icon-btn {
  color: #64748b;
  background: rgba(0,0,0,0.04);
  border-radius: 12px;
}
[data-theme="light"] .chat-header-actions .icon-btn:hover {
  background: rgba(99,102,241,0.1) !important;
  color: #6366f1 !important;
}

/* Сообщения */
[data-theme="light"] .messages-container { background: transparent; padding: 20px 24px; }

[data-theme="light"] .message.outgoing .bubble {
  background: linear-gradient(135deg, #6366f1, #7c3aed) !important;
  border: none !important;
  color: #ffffff !important;
  box-shadow: 0 2px 14px rgba(99,102,241,0.25) !important;
  border-radius: 20px 20px 6px 20px !important;
}
[data-theme="light"] .message.outgoing .msg-time { color: rgba(255,255,255,0.65) !important; }
[data-theme="light"] .message.outgoing .read-tick { color: rgba(255,255,255,0.75) !important; }

[data-theme="light"] .message.incoming .bubble {
  background: #ffffff !important;
  border: 1px solid rgba(0,0,0,0.05) !important;
  color: #1e1b4b !important;
  box-shadow: 0 1px 8px rgba(0,0,0,0.06) !important;
  border-radius: 20px 20px 20px 6px !important;
}
[data-theme="light"] .message.incoming .msg-time { color: #94a3b8 !important; }

/* Дата разделитель */
[data-theme="light"] .date-separator span {
  background: rgba(255,255,255,0.9) !important;
  color: #64748b !important;
  border: 1px solid rgba(0,0,0,0.06) !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}

/* Поле ввода */
[data-theme="light"] .input-area {
  background: transparent !important;
  border-top: none !important;
  padding: 16px 20px;
}
[data-theme="light"] .msg-input {
  background: #f1f5f9 !important;
  border: 1px solid transparent !important;
  color: #1e1b4b !important;
  border-radius: 24px !important;
  font-size: 15px;
}
[data-theme="light"] .msg-input::placeholder { color: #94a3b8; }
[data-theme="light"] .msg-input:focus {
  border-color: rgba(99,102,241,0.3) !important;
  box-shadow: 0 0 0 3px rgba(99,102,241,0.08) !important;
  background: #ffffff !important;
}
[data-theme="light"] .ctype-btn {
  background: rgba(99,102,241,0.08) !important;
  border-color: rgba(99,102,241,0.2) !important;
  color: #6366f1 !important;
  backdrop-filter: none !important;
}
[data-theme="light"] .ctype-btn:hover {
  background: rgba(99,102,241,0.16) !important;
  color: #4f46e5 !important;
}
[data-theme="light"] .send-btn {
  background: linear-gradient(135deg, #6366f1, #7c3aed) !important;
  border: none !important;
  color: #ffffff !important;
  box-shadow: 0 3px 12px rgba(99,102,241,0.35) !important;
  border-radius: 50% !important;
}
[data-theme="light"] .send-btn:hover {
  box-shadow: 0 5px 18px rgba(99,102,241,0.45) !important;
  transform: scale(1.08) !important;
}
[data-theme="light"] .voice-btn {
  background: #f1f5f9 !important;
  border: 1px solid transparent !important;
  color: #64748b !important;
  border-radius: 50% !important;
}
[data-theme="light"] .voice-btn:hover { color: #6366f1 !important; background: rgba(99,102,241,0.08) !important; }

/* Кнопки эмодзи и скрепки */
[data-theme="light"] .emoji-trigger-btn {
  color: #64748b !important;
  border: 1px solid transparent !important;
  background: #f1f5f9 !important;
  border-radius: 50% !important;
}
[data-theme="light"] .emoji-trigger-btn:hover {
  color: #6366f1 !important;
  background: rgba(99,102,241,0.08) !important;
}
[data-theme="light"] .emoji-trigger-btn.active {
  color: #6366f1 !important;
  background: rgba(99,102,241,0.12) !important;
}

/* TTL chips */
[data-theme="light"] .ttl-chip {
  border-color: rgba(0,0,0,0.08) !important;
  color: #64748b !important;
  background: #f1f5f9 !important;
  border-radius: 20px !important;
  font-size: 13px;
  padding: 5px 14px;
}
[data-theme="light"] .ttl-chip:hover {
  border-color: rgba(99,102,241,0.3) !important;
  color: #6366f1 !important;
}
[data-theme="light"] .ttl-chip.active {
  background: rgba(99,102,241,0.1) !important;
  border-color: rgba(99,102,241,0.3) !important;
  color: #6366f1 !important;
  font-weight: 600;
}

/* Пустое состояние */
[data-theme="light"] .empty-state { background: transparent; }
[data-theme="light"] .empty-title { color: #1e1b4b; }
[data-theme="light"] .empty-sub { color: #64748b; }

/* Модалки */
[data-theme="light"] .modal {
  background: linear-gradient(145deg, rgba(255,255,255,0.9) 0%, rgba(248,248,250,0.45) 25%, rgba(240,240,245,0.35) 75%, rgba(255,255,255,0.5) 100%) !important;
  backdrop-filter: blur(28px) saturate(1.5) !important;
  border: 1px solid rgba(0,0,0,0.06) !important;
  box-shadow: inset 0 1.5px 0 rgba(255,255,255,0.9), inset 0 -1px 0 rgba(0,0,0,0.06), 0 20px 60px rgba(0,0,0,0.12) !important;
}
[data-theme="light"] .modal-title { color: #1e1b4b; }
[data-theme="light"] .modal-overlay {
  background: rgba(0,0,0,0.4) !important;
  backdrop-filter: blur(8px);
}

/* Настройки */
[data-theme="light"] .settings-overlay .settings-layout {
  background: #ffffff !important;
}
[data-theme="light"] .settings-nav {
  background: #f8fafc !important;
  border-right: 1px solid rgba(0,0,0,0.05);
}
[data-theme="light"] .settings-nav-item { color: #475569; }
[data-theme="light"] .settings-nav-item:hover { background: rgba(99,102,241,0.06); color: #6366f1; }
[data-theme="light"] .settings-nav-item.active {
  background: rgba(99,102,241,0.1) !important;
  color: #6366f1 !important;
  font-weight: 600;
}
[data-theme="light"] .settings-section-title { color: #1e1b4b; }
[data-theme="light"] .settings-card {
  background: #f8fafc !important;
  border: 1px solid rgba(0,0,0,0.05) !important;
  border-radius: 16px !important;
}
[data-theme="light"] .settings-card-label { color: #1e1b4b; font-weight: 600; }

/* Тогглы */
[data-theme="light"] .toggle-slider {
  background: #e2e8f0 !important;
  border: 1px solid rgba(0,0,0,0.08) !important;
}
[data-theme="light"] .toggle input:checked + .toggle-slider {
  background: #6366f1 !important;
  border-color: #6366f1 !important;
}

/* Кнопки */
[data-theme="light"] .btn-primary {
  background: linear-gradient(135deg, #6366f1, #7c3aed) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 2px 10px rgba(99,102,241,0.3) !important;
}
[data-theme="light"] .btn-primary:hover {
  box-shadow: 0 4px 16px rgba(99,102,241,0.4) !important;
  transform: translateY(-1px) !important;
}
[data-theme="light"] .btn-ghost {
  background: #f1f5f9 !important;
  border: 1px solid rgba(0,0,0,0.06) !important;
  color: #475569 !important;
}
[data-theme="light"] .btn-ghost:hover {
  background: rgba(99,102,241,0.08) !important;
  color: #6366f1 !important;
  border-color: rgba(99,102,241,0.2) !important;
}

/* Инпуты */
[data-theme="light"] input[type="text"],
[data-theme="light"] input[type="password"],
[data-theme="light"] textarea,
[data-theme="light"] select {
  background: #f1f5f9 !important;
  border: 1px solid rgba(0,0,0,0.08) !important;
  color: #1e1b4b !important;
  border-radius: 14px !important;
}
[data-theme="light"] input:focus,
[data-theme="light"] textarea:focus,
[data-theme="light"] select:focus {
  border-color: rgba(99,102,241,0.4) !important;
  box-shadow: 0 0 0 3px rgba(99,102,241,0.08) !important;
  background: #ffffff !important;
}

/* Тосты */
[data-theme="light"] .toast {
  background: #ffffff !important;
  border: 1px solid rgba(0,0,0,0.08) !important;
  box-shadow: 0 8px 30px rgba(0,0,0,0.1) !important;
  color: #1e1b4b !important;
}

/* Скроллбар */
[data-theme="light"] ::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.12); border-radius: 6px; }
[data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.2); }
[data-theme="light"] html { scrollbar-color: rgba(0,0,0,0.12) transparent; }
[data-theme="light"] .ttl-chip.active {
  border-color: #5b5ef4;
  color: #5b5ef4;
  background: rgba(91,94,244,0.08);
  box-shadow: none;
}

/* Кнопки */
[data-theme="light"] .btn-primary {
  background: linear-gradient(135deg, #5b5ef4, #7c3aed) !important;
  border: none !important;
  color: #ffffff !important;
  box-shadow: 0 2px 10px rgba(91,94,244,0.3) !important;
}
[data-theme="light"] .btn-primary:hover {
  box-shadow: 0 4px 16px rgba(91,94,244,0.4) !important;
  transform: translateY(-1px) !important;
}
[data-theme="light"] .btn-ghost {
  border-color: rgba(0,0,0,0.12) !important;
  color: #6b7280 !important;
  background: transparent !important;
}
[data-theme="light"] .btn-ghost:hover {
  border-color: #5b5ef4 !important;
  color: #5b5ef4 !important;
  background: rgba(91,94,244,0.06) !important;
  box-shadow: none !important;
}
[data-theme="light"] .icon-btn {
  background: rgba(0,0,0,0.05) !important;
  color: #6b7280 !important;
}
[data-theme="light"] .icon-btn:hover {
  background: rgba(91,94,244,0.1) !important;
  color: #5b5ef4 !important;
  box-shadow: none !important;
}

/* Пустой экран */
[data-theme="light"] .empty-state { background: #f0f2f5; }
[data-theme="light"] .empty-icon { color: #c7d2fe; }
[data-theme="light"] .empty-title { color: #1a1a2e; }
[data-theme="light"] .empty-sub { color: #9ca3af; }

/* Модалки */
[data-theme="light"] .modal {
  background: linear-gradient(145deg, rgba(255,255,255,0.9) 0%, rgba(248,248,250,0.45) 25%, rgba(240,240,245,0.35) 75%, rgba(255,255,255,0.5) 100%) !important;
  backdrop-filter: blur(28px) saturate(1.5) !important;
  box-shadow: inset 0 1.5px 0 rgba(255,255,255,0.9), inset 0 -1px 0 rgba(0,0,0,0.06), 0 20px 60px rgba(0,0,0,0.15) !important;
  border: 1px solid rgba(0,0,0,0.06) !important;
}
[data-theme="light"] .modal-title { color: #1a1a2e; }
[data-theme="light"] .modal-overlay { background: rgba(0,0,0,0.3) !important; }

/* Настройки */
[data-theme="light"] .settings-overlay { background: rgba(0,0,0,0.35) !important; }
[data-theme="light"] .settings-layout {
  background: #ffffff !important;
  box-shadow: 0 20px 60px rgba(0,0,0,0.15) !important;
}
[data-theme="light"] .settings-nav {
  background: rgba(0,0,0,0.03) !important;
  border-right: 1px solid rgba(0,0,0,0.06) !important;
}
[data-theme="light"] .settings-nav-item { color: #4b5563; }
[data-theme="light"] .settings-nav-item:hover { background: rgba(91,94,244,0.06) !important; color: #5b5ef4 !important; }
[data-theme="light"] .settings-nav-item.active { background: rgba(91,94,244,0.1) !important; color: #5b5ef4 !important; }
[data-theme="light"] .settings-content { background: transparent !important; }
[data-theme="light"] .settings-section-title { color: #5b5ef4 !important; }
[data-theme="light"] .settings-card {
  background: #ffffff !important;
  border: 1px solid rgba(0,0,0,0.06) !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06) !important;
}
[data-theme="light"] .settings-card-label { color: #9ca3af !important; }
[data-theme="light"] .settings-card-row { border-bottom-color: rgba(0,0,0,0.06) !important; }
[data-theme="light"] .setting-label { color: #1a1a2e !important; }
[data-theme="light"] .setting-sub { color: #9ca3af !important; }

/* Профиль в настройках */
[data-theme="light"] .settings-nav-profile {
  background: rgba(91,94,244,0.06) !important;
  border-radius: 12px !important;
}
[data-theme="light"] .settings-nav-avatar {
  background: linear-gradient(135deg, #5b5ef4, #7c3aed) !important;
  color: #fff !important;
}
[data-theme="light"] .settings-nav-profile-name { color: #1a1a2e !important; }
[data-theme="light"] .settings-nav-profile-id { color: #9ca3af !important; }

/* Разделитель дат */
[data-theme="light"] .date-separator span {
  background: rgba(91,94,244,0.08) !important;
  color: #5b5ef4 !important;
  border: none !important;
}

/* Индикатор набора */
[data-theme="light"] .typing-indicator {
  background: #ffffff !important;
  border: 1px solid rgba(0,0,0,0.06) !important;
  box-shadow: 0 1px 6px rgba(0,0,0,0.08) !important;
}
[data-theme="light"] .typing-dot { background: #5b5ef4 !important; }

/* Тост */
[data-theme="light"] .toast {
  background: #1a1a2e !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.2) !important;
}
[data-theme="light"] .toast.success { background: #22c55e !important; }
[data-theme="light"] .toast.error { background: #ef4444 !important; }

/* Контекстное меню */
[data-theme="light"] #ctx-menu {
  background: #ffffff !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.15) !important;
  border: 1px solid rgba(0,0,0,0.06) !important;
}
[data-theme="light"] .ctx-item:hover { background: rgba(91,94,244,0.06) !important; color: #5b5ef4 !important; }

/* Меню ⋯ в хедере */
[data-theme="light"] .chat-more-menu {
  background: rgba(248, 248, 250, 0.65) !important;
  backdrop-filter: blur(20px) saturate(1.3) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.12) !important;
  border: 1px solid rgba(0,0,0,0.06) !important;
}
[data-theme="light"] .chat-more-item:hover { background: rgba(91,94,244,0.06) !important; color: #5b5ef4 !important; }

/* Панель профиля контакта */
[data-theme="light"] .contact-profile-panel {
  background: #f0f2f5 !important;
  border-left: 1px solid rgba(0,0,0,0.06) !important;
  box-shadow: -4px 0 20px rgba(0,0,0,0.1) !important;
}
[data-theme="light"] .cp-hero { background: linear-gradient(180deg, rgba(91,94,244,0.06) 0%, transparent 100%) !important; }
[data-theme="light"] .cp-avatar { background: linear-gradient(135deg, #5b5ef4, #7c3aed) !important; color: #fff !important; }
[data-theme="light"] .cp-action-btn { background: #ffffff !important; box-shadow: 0 1px 4px rgba(0,0,0,0.08) !important; }
[data-theme="light"] .cp-action-btn:hover { background: rgba(91,94,244,0.08) !important; }
[data-theme="light"] .cp-action-icon { background: rgba(91,94,244,0.08) !important; color: #5b5ef4 !important; }
[data-theme="light"] .cp-info-section,
[data-theme="light"] .cp-stats { background: #ffffff !important; box-shadow: 0 1px 4px rgba(0,0,0,0.06) !important; border-color: rgba(0,0,0,0.06) !important; }

/* Файловые карточки */
[data-theme="light"] .file-message { background: #ffffff !important; border-color: rgba(0,0,0,0.08) !important; box-shadow: 0 1px 4px rgba(0,0,0,0.06) !important; }
[data-theme="light"] .file-caption { background: rgba(0,0,0,0.03) !important; border-top-color: rgba(0,0,0,0.06) !important; color: #1a1a2e !important; }

/* Поиск в чате */
[data-theme="light"] .msg-search-bar { background: rgba(255,255,255,0.95) !important; border-top-color: rgba(0,0,0,0.06) !important; }

/* Кнопка + в сайдбаре */
[data-theme="light"] #btn-new-chat {
  background: linear-gradient(135deg, #5b5ef4, #7c3aed) !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: 0 2px 8px rgba(91,94,244,0.3) !important;
}
[data-theme="light"] #btn-new-chat:hover { box-shadow: 0 4px 14px rgba(91,94,244,0.4) !important; }

/* Онлайн-точка */
[data-theme="light"] .online-dot.visible { background: #22c55e !important; border-color: #ffffff !important; }
[data-theme="light"] .conn-dot.connected { background: #22c55e !important; }
[data-theme="light"] .conn-dot.connecting { background: #f59e0b !important; }
[data-theme="light"] .conn-dot.disconnected { background: #ef4444 !important; }

/* ─── Accent color system ────────────────────────────────────────────────────── */

/* Дефолтный акцент — фиолетовый */
:root {
  --accent-h: 258;
  --accent-s: 90%;
  --accent-l: 58%;
  --accent-color: hsl(var(--accent-h), var(--accent-s), var(--accent-l));
  --accent-dim:   hsl(var(--accent-h), var(--accent-s), calc(var(--accent-l) + 10%));
  --accent-glow:  hsla(var(--accent-h), var(--accent-s), var(--accent-l), 0.18);
  --accent-soft:  hsla(var(--accent-h), var(--accent-s), var(--accent-l), 0.1);
}

/* Применяем акцент везде */
.tg-rail-btn.active,
[data-theme="light"] .tg-rail-btn.active {
  background: var(--accent-soft) !important;
  color: var(--accent-color) !important;
  box-shadow: 0 0 0 1px var(--accent-glow) !important;
}
.tg-rail-btn:hover,
[data-theme="light"] .tg-rail-btn:hover {
  color: var(--accent-color) !important;
}

/* Исходящие сообщения — тёмный акцентный градиент */
.message.outgoing .bubble {
  background: linear-gradient(
    135deg,
    hsl(var(--accent-h), calc(var(--accent-s) - 10%), calc(var(--accent-l) - 18%)) 0%,
    hsl(var(--accent-h), var(--accent-s), calc(var(--accent-l) - 10%)) 100%
  ) !important;
  border-color: transparent !important;
  box-shadow: 0 2px 10px var(--accent-glow) !important;
}
[data-theme="light"] .message.outgoing .bubble {
  background: linear-gradient(
    135deg,
    hsl(var(--accent-h), calc(var(--accent-s) - 5%), calc(var(--accent-l) - 12%)) 0%,
    hsl(var(--accent-h), var(--accent-s), calc(var(--accent-l) - 4%)) 100%
  ) !important;
  box-shadow: 0 2px 12px var(--accent-glow) !important;
}

/* Кнопка отправки */
.send-btn {
  background: linear-gradient(
    135deg,
    hsl(var(--accent-h), calc(var(--accent-s) - 8%), calc(var(--accent-l) - 14%)) 0%,
    hsl(var(--accent-h), var(--accent-s), calc(var(--accent-l) - 6%)) 100%
  ) !important;
  border-color: transparent !important;
  box-shadow: 0 2px 8px var(--accent-glow) !important;
}
.send-btn:hover {
  box-shadow: 0 3px 14px var(--accent-glow) !important;
  filter: brightness(1.08);
}
[data-theme="light"] .send-btn {
  background: linear-gradient(
    135deg,
    hsl(var(--accent-h), calc(var(--accent-s) - 5%), calc(var(--accent-l) - 10%)) 0%,
    hsl(var(--accent-h), var(--accent-s), calc(var(--accent-l) - 3%)) 100%
  ) !important;
  box-shadow: 0 2px 10px var(--accent-glow) !important;
}

/* Кнопка + */
#btn-new-chat {
  background: var(--accent-color) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 2px 8px var(--accent-glow) !important;
}
[data-theme="light"] #btn-new-chat {
  background: var(--accent-color) !important;
  box-shadow: 0 2px 8px var(--accent-glow) !important;
}

/* Btn primary */
.btn-primary {
  background: linear-gradient(
    135deg,
    hsl(var(--accent-h), calc(var(--accent-s) - 8%), calc(var(--accent-l) - 14%)) 0%,
    hsl(var(--accent-h), var(--accent-s), calc(var(--accent-l) - 6%)) 100%
  ) !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: 0 2px 8px var(--accent-glow) !important;
}
.btn-primary:hover {
  filter: brightness(1.08);
  box-shadow: 0 3px 14px var(--accent-glow) !important;
}
[data-theme="light"] .btn-primary {
  background: linear-gradient(
    135deg,
    hsl(var(--accent-h), calc(var(--accent-s) - 5%), calc(var(--accent-l) - 10%)) 0%,
    hsl(var(--accent-h), var(--accent-s), calc(var(--accent-l) - 3%)) 100%
  ) !important;
  box-shadow: 0 2px 8px var(--accent-glow) !important;
}

/* Unread badge */
.unread-badge {
  background: var(--accent-color) !important;
  box-shadow: 0 1px 4px var(--accent-glow) !important;
}
[data-theme="light"] .unread-badge {
  background: var(--accent-color) !important;
  box-shadow: 0 1px 4px var(--accent-glow) !important;
}

/* Active chat item */
.chat-item.active {
  box-shadow: 0 0 0 1px var(--accent-glow) !important;
}

/* TTL chip active */
.ttl-chip.active {
  border-color: var(--accent-color) !important;
  color: var(--accent-color) !important;
}

/* Typing dots */
.typing-dot { background: var(--accent-color) !important; }

/* Conn dot connected */
.conn-dot.connected { background: var(--success, #22c55e) !important; }

/* Пикер акцентных цветов */
.accent-colors {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  padding: 4px 0;
}
.accent-dot {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--c);
  border: 2.5px solid transparent;
  cursor: pointer;
  transition: all 0.15s ease;
  position: relative;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}
.accent-dot:hover { transform: scale(1.12); }
.accent-dot.active {
  border-color: var(--text, #e8e8e8);
  box-shadow: 0 0 0 3px rgba(255,255,255,0.15), 0 2px 8px rgba(0,0,0,0.2);
  transform: scale(1.08);
}
[data-theme="light"] .accent-dot.active {
  border-color: #1a1a2e;
  box-shadow: 0 0 0 3px rgba(0,0,0,0.1), 0 2px 8px rgba(0,0,0,0.15);
}

/* ─── Remove browser focus outline on rail buttons ──────────────────────────── */
.tg-rail-btn:focus,
.tg-rail-btn:focus-visible,
.icon-btn:focus,
.icon-btn:focus-visible,
.send-btn:focus,
.send-btn:focus-visible,
.btn:focus,
.btn:focus-visible,
.accent-dot:focus,
.accent-dot:focus-visible,
.theme-card:focus,
.theme-card:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}
/* Только для клавиатурной навигации оставляем тонкий акцентный outline */
.tg-rail-btn:focus-visible {
  box-shadow: 0 0 0 2px var(--accent-color) !important;
}

/* ─── Global smooth animations ───────────────────────────────────────────────── */

/* Плавные переходы для всех интерактивных элементов */
*, *::before, *::after {
  transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Кнопки — пружинный эффект нажатия */
.btn, .icon-btn, .send-btn, .voice-btn,
.tg-rail-btn, .call-btn, .tab-btn,
.ttl-chip, .theme-card, .accent-dot,
.chat-item, .settings-nav-item,
.cp-action-btn, .ahs-action-card,
.device-row, .cp-stat-item {
  transition: background 0.15s ease, color 0.15s ease,
              border-color 0.15s ease, box-shadow 0.2s ease,
              transform 0.12s cubic-bezier(0.34, 1.56, 0.64, 1),
              opacity 0.15s ease !important;
}

.btn:active, .icon-btn:active, .send-btn:active,
.tg-rail-btn:active, .call-btn:active {
  transform: scale(0.93) !important;
  transition-duration: 0.08s !important;
}

/* Кнопки с hover-подъёмом */
.btn-primary:hover, .send-btn:hover {
  transform: translateY(-1px) scale(1.02) !important;
}
.btn-primary:active, .send-btn:active {
  transform: translateY(0) scale(0.97) !important;
}

/* ─── Settings panel animations ─────────────────────────────────────────────── */

/* Открытие панели настроек */
.settings-overlay {
  transition: opacity 0.25s ease !important;
}
.settings-overlay.hidden { opacity: 0; pointer-events: none; }
.settings-overlay:not(.hidden) { opacity: 1; }

.settings-layout {
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
              opacity 0.3s ease !important;
}
.settings-overlay.hidden .settings-layout {
  transform: scale(0.96) translateY(8px);
  opacity: 0;
}
.settings-overlay:not(.hidden) .settings-layout {
  transform: scale(1) translateY(0);
  opacity: 1;
}

/* Переключение секций настроек — slide + fade */
.settings-section {
  display: none;
  animation: settingsSectionIn 0.22s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.settings-section.active { display: flex; }

@keyframes settingsSectionIn {
  from { opacity: 0; transform: translateX(12px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Карточки настроек — появление с задержкой */
.settings-card {
  animation: settingsCardIn 0.2s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.settings-card:nth-child(1) { animation-delay: 0.02s; }
.settings-card:nth-child(2) { animation-delay: 0.05s; }
.settings-card:nth-child(3) { animation-delay: 0.08s; }
.settings-card:nth-child(4) { animation-delay: 0.11s; }
.settings-card:nth-child(5) { animation-delay: 0.14s; }

@keyframes settingsCardIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Nav items hover */
.settings-nav-item {
  transition: background 0.15s ease, color 0.15s ease,
              transform 0.12s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}
.settings-nav-item:hover { transform: translateX(3px) !important; }
.settings-nav-item.active { transform: translateX(0) !important; }

/* ─── Chat list animations ───────────────────────────────────────────────────── */

/* Появление чатов */
.chat-item {
  animation: chatItemIn 0.18s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes chatItemIn {
  from { opacity: 0; transform: translateX(-8px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Hover на чат — лёгкий сдвиг */
.chat-item:hover { transform: translateX(2px) !important; }
.chat-item.active { transform: translateX(0) !important; }

/* ─── Message animations ─────────────────────────────────────────────────────── */

/* Входящие — слева */
.message.incoming {
  animation: msgIncoming 0.25s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes msgIncoming {
  from { opacity: 0; transform: translateX(-12px) scale(0.96); }
  to   { opacity: 1; transform: translateX(0) scale(1); }
}

/* Исходящие — справа */
.message.outgoing {
  animation: msgOutgoing 0.25s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes msgOutgoing {
  from { opacity: 0; transform: translateX(12px) scale(0.96); }
  to   { opacity: 1; transform: translateX(0) scale(1); }
}

/* ─── Modal animations ───────────────────────────────────────────────────────── */

.modal-overlay {
  transition: opacity 0.2s ease, backdrop-filter 0.2s ease !important;
}
.modal-overlay.hidden { opacity: 0 !important; pointer-events: none; }

.modal {
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
              opacity 0.2s ease !important;
}
.modal-overlay.hidden .modal {
  transform: scale(0.94) translateY(10px) !important;
  opacity: 0 !important;
}
.modal-overlay:not(.hidden) .modal {
  transform: scale(1) translateY(0) !important;
  opacity: 1 !important;
}

/* ─── Contact profile panel ──────────────────────────────────────────────────── */

.contact-profile-panel {
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

/* ─── Rail buttons ───────────────────────────────────────────────────────────── */

.tg-rail-btn {
  transition: background 0.15s ease, color 0.15s ease,
              transform 0.12s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.2s ease !important;
}
.tg-rail-btn:hover { transform: scale(1.08) !important; }
.tg-rail-btn.active { transform: scale(1) !important; }

/* ─── Search box ─────────────────────────────────────────────────────────────── */

.search-box input {
  transition: border-color 0.2s ease, box-shadow 0.2s ease,
              background 0.2s ease !important;
}

/* ─── Scroll-down button ─────────────────────────────────────────────────────── */

.scroll-down-btn {
  transition: opacity 0.2s ease, transform 0.2s cubic-bezier(0.22, 1, 0.36, 1),
              background 0.15s ease !important;
}
.scroll-down-btn:not(.hidden) { animation: scrollBtnIn 0.2s cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes scrollBtnIn {
  from { opacity: 0; transform: translateY(8px) scale(0.9); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ─── Toast ──────────────────────────────────────────────────────────────────── */

.toast {
  animation: toastSlideIn 0.3s cubic-bezier(0.22, 1, 0.36, 1) !important;
}
@keyframes toastSlideIn {
  from { opacity: 0; transform: translateX(20px) scale(0.95); }
  to   { opacity: 1; transform: translateX(0) scale(1); }
}

/* ─── Avatar hover ───────────────────────────────────────────────────────────── */

.avatar {
  transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.2s ease !important;
}
.chat-item:hover .avatar { transform: scale(1.06) !important; }

/* ─── Dropdown menus ─────────────────────────────────────────────────────────── */

.chat-more-menu:not(.hidden),
.new-chat-menu:not(.hidden) {
  animation: dropdownIn 0.18s cubic-bezier(0.22, 1, 0.36, 1) !important;
}
@keyframes dropdownIn {
  from { opacity: 0; transform: translateY(-6px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ─── Lightbox ───────────────────────────────────────────────────────────────── */

.lightbox-content {
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
              opacity 0.2s ease !important;
}

/* ─── Theme cards ────────────────────────────────────────────────────────────── */

.theme-card {
  transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1),
              border-color 0.2s ease, box-shadow 0.2s ease !important;
}
.theme-card:hover { transform: translateY(-3px) scale(1.03) !important; }
.theme-card.active { transform: translateY(-2px) scale(1.02) !important; }

/* ─── Accent dots ────────────────────────────────────────────────────────────── */

.accent-dot {
  transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.2s ease, border-color 0.15s ease !important;
}
.accent-dot:hover { transform: scale(1.18) !important; }
.accent-dot.active { transform: scale(1.1) !important; }

/* ─── Input area ─────────────────────────────────────────────────────────────── */

.msg-input {
  transition: border-color 0.2s ease, box-shadow 0.2s ease,
              background 0.2s ease, height 0.15s ease !important;
}

/* ─── Conn dot ───────────────────────────────────────────────────────────────── */

.conn-dot {
  transition: background 0.4s ease, box-shadow 0.4s ease !important;
}

/* ─── Reduce motion ──────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ─── Modal open/close states ────────────────────────────────────────────────── */
.modal-overlay.open .modal {
  transform: scale(1) translateY(0) !important;
  opacity: 1 !important;
}
.modal-overlay.closing {
  opacity: 0 !important;
  pointer-events: none;
}
.modal-overlay.closing .modal {
  transform: scale(0.95) translateY(6px) !important;
  opacity: 0 !important;
}

/* Settings panel open state */
.settings-overlay.open {
  opacity: 1 !important;
  pointer-events: all;
}
.settings-overlay.open .settings-layout {
  transform: scale(1) translateY(0) !important;
  opacity: 1 !important;
}
.settings-overlay.closing {
  opacity: 0 !important;
  pointer-events: none;
}
.settings-overlay.closing .settings-layout {
  transform: scale(0.97) translateY(6px) !important;
  opacity: 0 !important;
}

/* ─── File Viewer ────────────────────────────────────────────────────────────── */

.file-viewer-overlay {
  position: fixed;
  inset: 0;
  z-index: 600;
  background: rgba(0,0,0,0.85);
  backdrop-filter: blur(20px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
}
.file-viewer-overlay.hidden { display: none; }
.file-viewer-overlay.visible {
  opacity: 1;
  pointer-events: all;
}

.file-viewer {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 680px;
  max-height: 90vh;
  background: var(--bg2);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 24px 80px rgba(0,0,0,0.5);
  transform: scale(0.94) translateY(12px);
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
              opacity 0.25s ease;
  opacity: 0;
}
.file-viewer-overlay.visible .file-viewer {
  transform: scale(1) translateY(0);
  opacity: 1;
}

/* Шапка */
.fv-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.fv-close-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.08);
  color: var(--text-dim);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.15s ease;
}
.fv-close-btn:hover { background: rgba(255,255,255,0.14); color: var(--text); }

.fv-title-wrap { flex: 1; min-width: 0; }
.fv-filename {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fv-counter {
  font-size: 11px;
  color: var(--text-dim);
  margin-top: 1px;
}

.fv-header-actions { display: flex; gap: 6px; flex-shrink: 0; }
.fv-action-btn {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}
.fv-action-btn:hover { background: rgba(255,255,255,0.08); color: var(--text); }

/* Область превью */
.fv-preview-area {
  flex: 1;
  min-height: 200px;
  max-height: 420px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: rgba(0,0,0,0.2);
  position: relative;
}

.fv-preview-img {
  max-width: 100%;
  max-height: 420px;
  object-fit: contain;
  display: block;
  border-radius: 0;
  cursor: zoom-in;
  transition: transform 0.2s ease;
}
.fv-preview-img:hover { transform: scale(1.01); }

.fv-preview-video {
  max-width: 100%;
  max-height: 420px;
  display: block;
  outline: none;
}

.fv-preview-file {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 40px 24px;
  color: var(--text-dim);
}
.fv-preview-file-ext {
  width: 72px;
  height: 72px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 800;
  color: #fff;
  letter-spacing: 0.5px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.25);
}
.fv-preview-file-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  text-align: center;
  word-break: break-all;
  max-width: 300px;
}
.fv-preview-file-size {
  font-size: 12px;
  color: var(--text-dim);
}

/* Миниатюры */
.fv-thumbs-wrap {
  padding: 10px 16px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}
.fv-thumbs-wrap.hidden { display: none; }
.fv-thumbs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 2px;
}
.fv-thumb {
  width: 52px;
  height: 52px;
  border-radius: 10px;
  overflow: hidden;
  flex-shrink: 0;
  cursor: pointer;
  border: 2px solid transparent;
  transition: all 0.15s ease;
  background: rgba(255,255,255,0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.fv-thumb.active { border-color: var(--accent-color); }
.fv-thumb:hover { border-color: rgba(255,255,255,0.3); }
.fv-thumb img { width: 100%; height: 100%; object-fit: cover; }
.fv-thumb-ext {
  font-size: 9px;
  font-weight: 800;
  color: #fff;
  text-align: center;
  padding: 2px;
}
.fv-thumb-del {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(0,0,0,0.6);
  color: #fff;
  border: none;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  line-height: 1;
}
.fv-thumb:hover .fv-thumb-del { display: flex; }

/* Нижняя панель */
.fv-footer {
  padding: 12px 16px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}
.fv-file-info {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.fv-file-ext {
  font-size: 10px;
  font-weight: 800;
  color: #fff;
  padding: 2px 7px;
  border-radius: 6px;
  letter-spacing: 0.3px;
}
.fv-file-meta {
  font-size: 12px;
  color: var(--text-dim);
}

.fv-input-row {
  display: flex;
  gap: 10px;
  align-items: flex-end;
}
.fv-caption-input {
  flex: 1;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 10px 16px;
  color: var(--text);
  font-size: 14px;
  font-family: var(--font);
  resize: none;
  outline: none;
  max-height: 80px;
  min-height: 40px;
  line-height: 1.4;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.fv-caption-input:focus {
  border-color: var(--accent-color);
  background: rgba(255,255,255,0.08);
}
.fv-caption-input::placeholder { color: var(--text-dim); }

.fv-send-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: var(--accent-color);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 10px var(--accent-glow);
  transition: all 0.15s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.fv-send-btn:hover { transform: scale(1.08); box-shadow: 0 4px 16px var(--accent-glow); }
.fv-send-btn:active { transform: scale(0.94); }

/* Light theme */
[data-theme="light"] .file-viewer { background: #ffffff; }
[data-theme="light"] .fv-preview-area { background: #f0f2f5; }
[data-theme="light"] .fv-close-btn { background: rgba(0,0,0,0.06); }
[data-theme="light"] .fv-close-btn:hover { background: rgba(0,0,0,0.1); }
[data-theme="light"] .fv-caption-input { background: #f5f6f8; border-color: rgba(0,0,0,0.1); color: #1a1a2e; }
[data-theme="light"] .fv-caption-input:focus { background: #fff; }
[data-theme="light"] .fv-thumb { background: rgba(0,0,0,0.06); }

/* ─── Attach menu ────────────────────────────────────────────────────────────── */
.attach-wrapper { position: relative; z-index: 1; }

.attach-menu {
  position: fixed;
  background: rgba(14, 14, 20, 0.6);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 18px;
  padding: 8px;
  min-width: 200px;
  z-index: 9999;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.04);
  backdrop-filter: blur(24px) saturate(1.3);
  -webkit-backdrop-filter: blur(24px) saturate(1.3);
  opacity: 0;
  transform: translateY(8px) scale(0.96);
  pointer-events: none;
  visibility: hidden;
  transition: opacity 0.25s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
              visibility 0.25s;
}
.attach-menu.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
  visibility: visible;
}

.attach-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 12px;
  border: none;
  background: transparent;
  color: var(--text);
  font-size: 14px;
  font-family: var(--font);
  font-weight: 500;
  cursor: pointer;
  border-radius: 12px;
  text-align: left;
  transition: background 0.12s ease, transform 0.1s ease;
}
.attach-item:hover {
  background: rgba(255,255,255,0.12);
  transform: translateX(3px);
}
.attach-item:active { transform: scale(0.97); }

.attach-item-icon {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  pointer-events: none;
  color: var(--text-dim);
  opacity: 0.8;
}

.attach-item-icon svg,
.attach-item-icon svg *,
.attach-item span { pointer-events: none; }

/* Light theme */
[data-theme="light"] .attach-menu {
  background: rgba(248, 248, 250, 0.65);
  backdrop-filter: blur(24px) saturate(1.3);
  box-shadow: 0 8px 32px rgba(0,0,0,0.12), inset 0 1px 0 rgba(255,255,255,0.8);
}
[data-theme="light"] .attach-item:hover { background: rgba(0,0,0,0.04); }


/* ═══ Camera overlay ═══ */
.camera-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: opacity 0.25s cubic-bezier(0.22,1,0.36,1), visibility 0.25s;
}
.camera-overlay.visible {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
}
.camera-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.camera-mask {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.camera-shape-svg {
  width: min(80vw, 80vh, 320px);
  height: min(80vw, 80vh, 320px);
}
.camera-ui {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  pointer-events: none;
}
.camera-top-bar {
  display: flex;
  justify-content: flex-end;
  padding: 16px;
  pointer-events: auto;
}
.camera-bottom-bar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 16px 16px 32px;
  pointer-events: auto;
}
.camera-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.12);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(8px);
  transition: background 0.15s, transform 0.1s;
}
.camera-btn:hover { background: rgba(255,255,255,0.22); transform: scale(1.05); }
.camera-btn:active { transform: scale(0.93); }
.camera-btn-close:hover { background: rgba(255,60,60,0.35); }
.camera-shape-picker {
  display: flex;
  gap: 16px;
  align-items: center;
  background: rgba(0,0,0,0.5);
  padding: 8px 16px;
  border-radius: 30px;
  backdrop-filter: blur(12px);
  pointer-events: auto;
}
.camera-shape-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.3);
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.15s, transform 0.1s;
  padding: 4px;
}
.camera-shape-btn:hover { border-color: rgba(255,255,255,0.7); transform: scale(1.1); }
.camera-shape-btn.active { border-color: #fff; }
.camera-shape-preview {
  display: block;
  width: 100%;
  height: 100%;
  background: #fff;
}
.camera-shape-star {
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
.camera-actions {
  display: flex;
  align-items: center;
  gap: 24px;
  pointer-events: auto;
}
.camera-shutter {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  border: 4px solid rgba(255,255,255,0.8);
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.1s;
}
.camera-shutter:hover { transform: scale(1.04); }
.camera-shutter:active { transform: scale(0.94); }
.camera-shutter-inner {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #fff;
  transition: background 0.1s;
}
.camera-shutter:active .camera-shutter-inner { background: #ddd; }

/* ═══════════════════════════════════════════════════════════════════════════════
   CHAT WALLPAPERS
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Фон чата — применяется к chat-area */
.chat-area {
  position: relative;
  overflow: hidden;
}
.messages-wrap {
  position: relative;
}
.chat-area.has-wallpaper .messages-wrap,
.chat-area.has-wallpaper .messages-container {
  background: transparent !important;
}
.chat-area.has-wallpaper {
  background: none !important;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Затемняющий оверлей поверх фона */
.messages-wrap.has-wallpaper::before,
.chat-area.has-wallpaper::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--wp-overlay, rgba(0,0,0,0.4));
  pointer-events: none;
  z-index: 0;
}
.messages-wrap.has-wallpaper .messages-container,
.chat-area.has-wallpaper .messages-container {
  position: relative;
  z-index: 1;
}
.messages-wrap.has-wallpaper .scroll-down-btn,
.chat-area.has-wallpaper .scroll-down-btn {
  z-index: 2;
}

/* Паттерн: точки */
.messages-wrap.wp-dots,
.chat-area.wp-dots {
  background-image: radial-gradient(circle, rgba(255,255,255,0.12) 1px, transparent 1px);
  background-size: 24px 24px;
}
/* Паттерн: сетка */
.messages-wrap.wp-grid-pat,
.chat-area.wp-grid-pat {
  background-image:
    linear-gradient(rgba(255,255,255,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px);
  background-size: 32px 32px;
}
/* Паттерн: волны */
.messages-wrap.wp-waves,
.chat-area.wp-waves {
  background-image: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 8px,
    rgba(255,255,255,0.04) 8px,
    rgba(255,255,255,0.04) 16px
  );
}
/* Паттерн: соты (SVG inline) */
.messages-wrap.wp-hexagon,
.chat-area.wp-hexagon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100'%3E%3Cpath d='M28 66L0 50V16L28 0l28 16v34L28 66zm0 0v34M0 50l28 16 28-16' fill='none' stroke='rgba(255,255,255,0.07)' stroke-width='1'/%3E%3C/svg%3E");
  background-size: 56px 100px;
}
/* Паттерн: звёзды */
.messages-wrap.wp-stars,
.chat-area.wp-stars {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Ccircle cx='10' cy='10' r='1' fill='rgba(255,255,255,0.15)'/%3E%3Ccircle cx='35' cy='25' r='1.5' fill='rgba(255,255,255,0.1)'/%3E%3Ccircle cx='55' cy='8' r='0.8' fill='rgba(255,255,255,0.2)'/%3E%3Ccircle cx='20' cy='50' r='1.2' fill='rgba(255,255,255,0.12)'/%3E%3Ccircle cx='48' cy='45' r='1' fill='rgba(255,255,255,0.18)'/%3E%3C/svg%3E");
  background-size: 60px 60px;
}
/* Паттерн: схема */
.messages-wrap.wp-circuit,
.chat-area.wp-circuit {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cpath d='M10 10h20v20H10zM50 50h20v20H50z' fill='none' stroke='rgba(255,255,255,0.06)' stroke-width='1'/%3E%3Cpath d='M30 20h20M20 30v20M60 50V30M50 60H30' stroke='rgba(255,255,255,0.05)' stroke-width='1'/%3E%3Ccircle cx='30' cy='20' r='2' fill='rgba(255,255,255,0.08)'/%3E%3Ccircle cx='50' cy='20' r='2' fill='rgba(255,255,255,0.08)'/%3E%3Ccircle cx='20' cy='30' r='2' fill='rgba(255,255,255,0.08)'/%3E%3Ccircle cx='20' cy='50' r='2' fill='rgba(255,255,255,0.08)'/%3E%3C/svg%3E");
  background-size: 80px 80px;
}
/* Градиент: аура */
.messages-wrap.wp-grad-purple,
.chat-area.wp-grad-purple {
  background-image: linear-gradient(135deg, #1a0533 0%, #2d1b69 50%, #0f0f23 100%);
}
/* Градиент: океан */
.messages-wrap.wp-grad-ocean,
.chat-area.wp-grad-ocean {
  background-image: linear-gradient(135deg, #0c1445 0%, #1a3a5c 50%, #0d2137 100%);
}
/* Градиент: лес */
.messages-wrap.wp-grad-forest,
.chat-area.wp-grad-forest {
  background-image: linear-gradient(135deg, #0a1f0a 0%, #1a3a1a 50%, #0d1f0d 100%);
}
/* Градиент: закат */
.messages-wrap.wp-grad-sunset,
.chat-area.wp-grad-sunset {
  background-image: linear-gradient(135deg, #1f0a0a 0%, #3a1a0a 50%, #1f0d0d 100%);
}

/* Пузыри поверх фона — лёгкое матовое стекло */
.messages-wrap.has-wallpaper .bubble,
.chat-area.has-wallpaper .bubble {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.messages-wrap.has-wallpaper .message.incoming .bubble,
.chat-area.has-wallpaper .message.incoming .bubble {
  background: rgba(30,30,40,0.72) !important;
  border: 1px solid rgba(255,255,255,0.08);
}
.messages-wrap.has-wallpaper .message.outgoing .bubble {
  background: rgba(var(--accent-h), 60%, 30%, 0.72) !important;
  border: 1px solid rgba(255,255,255,0.1);
}

/* ─── Wallpaper picker grid ──────────────────────────────────────────────────── */
.wallpaper-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 10px;
}
.wp-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  font-family: var(--font);
}
.wp-card span {
  font-size: 10px;
  color: var(--text-dim);
  transition: color 0.15s;
}
.wp-card.active span { color: var(--accent-color); }

.wp-preview {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 10px;
  border: 2px solid transparent;
  overflow: hidden;
  transition: border-color 0.15s, transform 0.15s cubic-bezier(0.34,1.56,0.64,1);
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.04);
  color: var(--text-dim);
}
.wp-card:hover .wp-preview { transform: scale(1.06); }
.wp-card.active .wp-preview { border-color: var(--accent-color); box-shadow: 0 0 0 2px var(--accent-glow); }

.wp-none { background: rgba(255,255,255,0.03); }
.wp-dots {
  background-image: radial-gradient(circle, rgba(255,255,255,0.25) 1px, transparent 1px);
  background-size: 8px 8px;
  background-color: #111;
}
.wp-grid-pat {
  background-image:
    linear-gradient(rgba(255,255,255,0.15) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.15) 1px, transparent 1px);
  background-size: 10px 10px;
  background-color: #111;
}
.wp-waves {
  background-image: repeating-linear-gradient(-45deg, transparent, transparent 3px, rgba(255,255,255,0.12) 3px, rgba(255,255,255,0.12) 6px);
  background-color: #111;
}
.wp-hexagon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='50'%3E%3Cpath d='M14 33L0 25V8L14 0l14 8v17L14 33zm0 0v17M0 25l14 8 14-8' fill='none' stroke='rgba(255,255,255,0.2)' stroke-width='1'/%3E%3C/svg%3E");
  background-size: 28px 50px;
  background-color: #111;
}
.wp-stars {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30'%3E%3Ccircle cx='5' cy='5' r='1' fill='rgba(255,255,255,0.4)'/%3E%3Ccircle cx='18' cy='12' r='1.5' fill='rgba(255,255,255,0.25)'/%3E%3Ccircle cx='27' cy='4' r='0.8' fill='rgba(255,255,255,0.5)'/%3E%3Ccircle cx='10' cy='25' r='1.2' fill='rgba(255,255,255,0.3)'/%3E%3Ccircle cx='24' cy='22' r='1' fill='rgba(255,255,255,0.4)'/%3E%3C/svg%3E");
  background-size: 30px 30px;
  background-color: #0a0a14;
}
.wp-circuit {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cpath d='M5 5h10v10H5zM25 25h10v10H25z' fill='none' stroke='rgba(255,255,255,0.15)' stroke-width='1'/%3E%3Cpath d='M15 10h10M10 15v10M30 25V15M25 30H15' stroke='rgba(255,255,255,0.12)' stroke-width='1'/%3E%3Ccircle cx='15' cy='10' r='1.5' fill='rgba(255,255,255,0.2)'/%3E%3C/svg%3E");
  background-size: 40px 40px;
  background-color: #0a0f0a;
}
.wp-custom-preview {
  background: rgba(255,255,255,0.04);
  background-size: cover;
  background-position: center;
}

/* Слайдер затемнения */
.wp-opacity-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  padding: 10px 12px;
  background: rgba(255,255,255,0.03);
  border-radius: 12px;
  border: 1px solid var(--border);
}
.wp-opacity-label { font-size: 12px; color: var(--text-dim); white-space: nowrap; }
.wp-opacity-val { font-size: 12px; color: var(--text-dim); white-space: nowrap; min-width: 32px; text-align: right; }
.wp-slider {
  flex: 1;
  -webkit-appearance: none;
  height: 4px;
  border-radius: 2px;
  background: var(--border);
  outline: none;
  cursor: pointer;
}
.wp-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--accent-color);
  cursor: pointer;
  box-shadow: 0 0 6px var(--accent-glow);
  transition: transform 0.15s;
}
.wp-slider::-webkit-slider-thumb:hover { transform: scale(1.2); }

/* Light theme */
[data-theme="light"] .wp-preview { background: rgba(0,0,0,0.04); }
[data-theme="light"] .wp-none { background: rgba(0,0,0,0.04); }
[data-theme="light"] .wp-opacity-row { background: rgba(0,0,0,0.03); }

/* ═══════════════════════════════════════════════════════════════════════════════
   FLYING EMOJI REACTIONS
   ═══════════════════════════════════════════════════════════════════════════════ */

.reactions-fly-container {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 10;
  overflow: hidden;
}

.fly-emoji {
  position: absolute;
  font-size: 32px;
  line-height: 1;
  pointer-events: none;
  user-select: none;
  animation: flyUp 1.4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.4));
}

@keyframes flyUp {
  0%   { opacity: 1; transform: scale(0.4) translateY(0) rotate(0deg) translateX(0); }
  20%  { opacity: 1; transform: scale(1.3) translateY(-30px) rotate(-8deg) translateX(calc(var(--drift, 0px) * 0.3)); }
  60%  { opacity: 0.9; transform: scale(1.0) translateY(-120px) rotate(6deg) translateX(calc(var(--drift, 0px) * 0.7)); }
  100% { opacity: 0; transform: scale(0.7) translateY(-220px) rotate(-4deg) translateX(var(--drift, 0px)); }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   PARTICLES CANVAS (empty state)
   ═══════════════════════════════════════════════════════════════════════════════ */

.empty-state {
  position: relative;
  overflow: hidden;
}

.particles-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

.empty-state .empty-icon,
.empty-state .empty-title,
.empty-state .empty-sub {
  position: relative;
  z-index: 1;
}

/* ─── Chat particles canvas ──────────────────────────────────────────────────── */

.chat-particles-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  opacity: 0.55;
}

/* Контент чата поверх частиц */
.messages-wrap .messages-container {
  position: relative;
  z-index: 1;
}

.messages-wrap .reactions-fly-container {
  z-index: 10;
}

.messages-wrap .scroll-down-btn {
  z-index: 20;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   HOVER ACTION BUTTONS ON MESSAGES
   ═══════════════════════════════════════════════════════════════════════════════ */

.message-body {
  position: relative;
}

.msg-hover-actions {
  position: absolute;
  top: -14px;
  display: flex;
  gap: 2px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 3px 4px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.25);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s cubic-bezier(0.34,1.56,0.64,1);
  transform: translateY(4px) scale(0.95);
  z-index: 10;
  white-space: nowrap;
}

/* Входящие — панель слева */
.message.incoming .msg-hover-actions {
  left: 0;
}
/* Исходящие — панель справа */
.message.outgoing .msg-hover-actions {
  right: 0;
}

.message:hover .msg-hover-actions {
  opacity: 1;
  pointer-events: all;
  transform: translateY(0) scale(1);
}

/* Sticker messages — панель действий остаётся в зоне ховера */
.message.sticker {
  padding-top: 20px;
}
.message.sticker .msg-hover-actions {
  top: 6px;
}

.msg-action-btn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.12s ease, color 0.12s ease, transform 0.1s ease;
  flex-shrink: 0;
}
.msg-action-btn:hover {
  background: rgba(255,255,255,0.1);
  color: var(--text);
  transform: scale(1.15);
}
.msg-action-btn:active { transform: scale(0.9); }

[data-theme="light"] .msg-hover-actions {
  background: #ffffff;
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
}
[data-theme="light"] .msg-action-btn:hover { background: rgba(0,0,0,0.06); }

/* ═══════════════════════════════════════════════════════════════════════════════
   PINNED MESSAGE BAR
   ═══════════════════════════════════════════════════════════════════════════════ */

.pinned-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  background: rgba(14, 14, 20, 0.45);
  backdrop-filter: blur(16px) saturate(1.3);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  border-bottom: 1px solid var(--border);
  border-left: 3px solid var(--accent-color);
  animation: pinnedIn 0.2s cubic-bezier(0.22,1,0.36,1);
  flex-shrink: 0;
}
.pinned-bar.hidden { display: none; }

@keyframes pinnedIn {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.pinned-bar-icon {
  color: var(--accent-color);
  flex-shrink: 0;
  opacity: 0.8;
}

.pinned-bar-content {
  flex: 1;
  min-width: 0;
}
.pinned-bar-label {
  font-size: 11px;
  color: var(--accent-color);
  font-weight: 600;
  margin-bottom: 1px;
  opacity: 0.9;
}
.pinned-bar-text {
  font-size: 13px;
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pinned-bar-close {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.12s, color 0.12s;
}
.pinned-bar-close:hover { background: rgba(255,255,255,0.08); color: var(--text); }

[data-theme="light"] .pinned-bar { background: rgba(255,255,255,0.95); }
[data-theme="light"] .pinned-bar-close:hover { background: rgba(0,0,0,0.06); }

/* ═══════════════════════════════════════════════════════════════════════════════
   TYPING INDICATOR IN HEADER
   ═══════════════════════════════════════════════════════════════════════════════ */

.chat-header-status.typing-active {
  color: var(--accent-color) !important;
  display: flex;
  align-items: center;
  gap: 4px;
}

.typing-header-dots {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
.typing-header-dots span {
  display: inline-block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--accent-color);
  animation: typingBounce 1.2s infinite ease-in-out;
}
.typing-header-dots span:nth-child(1) { animation-delay: 0s; }
.typing-header-dots span:nth-child(2) { animation-delay: 0.2s; }
.typing-header-dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes typingBounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
  30%            { transform: translateY(-4px); opacity: 1; }
}

/* ─── Context menu divider ───────────────────────────────────────────────────── */
.ctx-menu-divider {
  height: 1px;
  background: var(--border);
  margin: 4px 8px;
}

/* ─── Phase 1 UI polish ─────────────────────────────────────────────────────── */
.auth-logo-mark { display: inline-flex; vertical-align: middle; margin-right: 10px; }
.reg-pass-block { display: none; flex-direction: column; gap: 10px; }
.reg-password-display { flex: 1; font-family: monospace; letter-spacing: 2px; font-size: 13px; }
.auth-warning-icon { flex-shrink: 0; margin-top: 1px; }
.auth-conn-status-row { justify-content: center; gap: 8px; flex-wrap: wrap; }
.spacer { flex: 1; }
.auth-server-btn {
  background: none;
  border: 1px solid var(--border);
  cursor: pointer;
  font-size: 11px;
  color: var(--text-dim);
  padding: 2px 6px;
  border-radius: 6px;
}
.auth-server-btn:hover { color: var(--text); border-color: rgba(255,255,255,0.2); }
.auth-server-row { display: none; flex-direction: column; gap: 6px; margin-top: -4px; }
.input-group.compact { gap: 4px; }
.auth-server-input-row { display: flex; gap: 6px; }
.flex-1 { flex: 1; }
.auth-server-save-btn { padding: 0 14px; flex-shrink: 0; }
.calls-empty-icon { opacity: 0.2; }
.game-title { display: flex; align-items: center; gap: 8px; }
.game-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  padding: 24px;
  gap: 12px;
  text-align: center;
}
.game-placeholder-icon {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-dim);
}
.game-placeholder-title { font-size: 13px; font-weight: 600; color: var(--text); opacity: 0.6; }
.game-placeholder-subtitle { font-size: 11px; color: var(--text-dim); opacity: 0.5; line-height: 1.5; }
.proxy-status-bar {
  display: none;
  padding: 4px 16px;
  font-size: 11px;
  color: var(--text-dim);
  background: rgba(10, 10, 16, 0.35);
  backdrop-filter: blur(12px) saturate(1.3);
  -webkit-backdrop-filter: blur(12px) saturate(1.3);
  border-top: 1px solid rgba(255,255,255,0.04);
  text-align: center;
}

button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
.icon-btn:focus-visible,
.send-btn:focus-visible,
.ttl-chip:focus-visible,
.tg-rail-btn:focus-visible {
  outline: 2px solid rgba(255,255,255,0.28) !important;
  outline-offset: 2px;
  box-shadow: 0 0 0 2px rgba(255,255,255,0.06);
}

@media (max-width: 900px) {
  .settings-layout {
    width: min(96vw, 680px);
    max-height: min(88vh, 680px);
    grid-template-columns: 1fr;
  }
  .settings-sidebar {
    border-right: 0;
    border-bottom: 1px solid var(--border);
    max-height: 180px;
    overflow-y: auto;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   CHAT AREA ALWAYS DARK — переопределяем light тему для области чата
   Чат, хедер, инпут, баблы остаются тёмными независимо от темы
   ═══════════════════════════════════════════════════════════════════════════════ */
[data-theme="light"] .chat-area {
  background: #111111 !important;
}
[data-theme="light"] .chat-area .messages-container {
  background: transparent !important;
}
[data-theme="light"] .chat-header {
  background: rgba(255,255,255,0.96) !important;
  border-bottom: 1px solid rgba(0,0,0,0.06) !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04) !important;
}
[data-theme="light"] .chat-header-name {
  color: #1e1b4b !important;
}
[data-theme="light"] .chat-header-status {
  color: #64748b !important;
}
[data-theme="light"] .chat-header-actions .icon-btn {
  background: rgba(0,0,0,0.04) !important;
  color: #64748b !important;
}
[data-theme="light"] .chat-header-actions .icon-btn:hover {
  background: rgba(99,102,241,0.08) !important;
  color: #6366f1 !important;
}
[data-theme="light"] #btn-call,
[data-theme="light"] #btn-video-call {
  color: #64748b !important;
  background: rgba(0,0,0,0.04) !important;
  border-radius: 12px !important;
  border: none !important;
}
[data-theme="light"] #btn-call:hover,
[data-theme="light"] #btn-video-call:hover {
  color: #6366f1 !important;
  background: rgba(99,102,241,0.08) !important;
  box-shadow: none !important;
  text-shadow: none !important;
}
[data-theme="light"] #btn-call svg,
[data-theme="light"] #btn-video-call svg {
  filter: none !important;
}
[data-theme="light"] .input-area {
  background: transparent !important;
  border-top: none !important;
}
[data-theme="light"] .ttl-label {
  color: #64748b !important;
}
[data-theme="light"] .ttl-chip {
  background: rgba(0,0,0,0.04) !important;
  border-color: rgba(0,0,0,0.08) !important;
  color: #64748b !important;
}
[data-theme="light"] .ttl-chip:hover {
  border-color: rgba(99,102,241,0.3) !important;
  color: #6366f1 !important;
}
[data-theme="light"] .ttl-chip.active {
  border-color: var(--accent-color) !important;
  color: var(--accent-color) !important;
  background: var(--accent-soft) !important;
}
[data-theme="light"] .msg-input {
  background: #f1f5f9 !important;
  border: 1px solid transparent !important;
  color: #1e1b4b !important;
  box-shadow: none !important;
}
[data-theme="light"] .msg-input::placeholder {
  color: #808080 !important;
}
[data-theme="light"] .msg-input:focus {
  border-color: #6366f1 !important;
  background: #ffffff !important;
  box-shadow: 0 0 0 3px rgba(99,102,241,0.1) !important;
}
[data-theme="light"] .send-btn {
  background: linear-gradient(135deg, hsl(var(--accent-h), calc(var(--accent-s) - 8%), calc(var(--accent-l) - 14%)) 0%, hsl(var(--accent-h), var(--accent-s), calc(var(--accent-l) - 6%)) 100%) !important;
  border: none !important;
  box-shadow: 0 2px 8px var(--accent-glow) !important;
  color: #fff !important;
}
[data-theme="light"] .send-btn:hover {
  box-shadow: 0 4px 16px var(--accent-glow) !important;
  filter: brightness(1.1);
  transform: scale(1.08) !important;
}
[data-theme="light"] .voice-btn {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: #808080 !important;
}
[data-theme="light"] .voice-btn:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  color: #e8e8e8 !important;
}
[data-theme="light"] .emoji-trigger-btn {
  background: transparent !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  color: #808080 !important;
}
[data-theme="light"] .emoji-trigger-btn:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #e8e8e8 !important;
}
[data-theme="light"] .emoji-trigger-btn.active {
  background: rgba(255, 255, 255, 0.1) !important;
  color: var(--accent-color) !important;
}

/* Бублики сообщений — всегда тёмные */
[data-theme="light"] .message.outgoing .bubble {
  background: linear-gradient(135deg, hsl(var(--accent-h), calc(var(--accent-s) - 10%), calc(var(--accent-l) - 18%)) 0%, hsl(var(--accent-h), var(--accent-s), calc(var(--accent-l) - 10%)) 100%) !important;
  border: none !important;
  box-shadow: 0 2px 10px var(--accent-glow) !important;
  color: #fff !important;
}
[data-theme="light"] .message.outgoing .msg-time {
  color: rgba(255, 255, 255, 0.5) !important;
}
[data-theme="light"] .message.outgoing .read-tick {
  color: rgba(255, 255, 255, 0.6) !important;
}
[data-theme="light"] .message.incoming .bubble {
  background: #1e1e1e !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.3) !important;
  color: #e8e8e8 !important;
}
[data-theme="light"] .message.incoming .msg-time {
  color: #808080 !important;
}
[data-theme="light"] .msg-meta {
  color: #808080 !important;
}
[data-theme="light"] .ttl-badge {
  color: #808080 !important;
}
[data-theme="light"] .ttl-badge.urgent {
  color: #cc4444 !important;
}
[data-theme="light"] .message.destroyed .bubble {
  background: rgba(26, 26, 26, 0.6) !important;
  color: #808080 !important;
}

/* Дата-разделитель — тёмный */
[data-theme="light"] .date-separator span {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: #808080 !important;
  box-shadow: none !important;
}

/* Ввод голоса */
[data-theme="light"] .recording-indicator {
  background: rgba(120, 30, 30, 0.3) !important;
  border-color: rgba(200, 60, 60, 0.2) !important;
}

/* Плитка канала */
[data-theme="light"] .channel-join-bar {
  background: rgba(17, 17, 17, 0.98) !important;
  border-top-color: rgba(255, 255, 255, 0.06) !important;
}
[data-theme="light"] .channel-readonly-bar {
  background: rgba(17, 17, 17, 0.98) !important;
  border-top-color: rgba(255, 255, 255, 0.06) !important;
  color: #808080 !important;
}
[data-theme="light"] .channel-join-info {
  color: #808080 !important;
}

/* Бар ответа */
[data-theme="light"] .reply-bar {
  background: transparent !important;
  border-top: none !important;
}
[data-theme="light"] .reply-bar-name {
  color: #808080 !important;
}
[data-theme="light"] .reply-bar-text {
  color: #e8e8e8 !important;
}

/* Пустое состояние */
[data-theme="light"] .empty-state {
  background: #111111 !important;
}
[data-theme="light"] .empty-title {
  color: #e8e8e8 !important;
}
[data-theme="light"] .empty-sub {
  color: #808080 !important;
}
[data-theme="light"] .empty-icon {
  color: #808080 !important;
}

/* Поиск в чате */
[data-theme="light"] .msg-search-bar {
  background: rgba(17, 17, 17, 0.98) !important;
  border-bottom-color: rgba(255, 255, 255, 0.06) !important;
}
[data-theme="light"] .msg-search-bar input {
  background: rgba(10, 10, 10, 0.8) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  color: #e8e8e8 !important;
}

/* Индикатор печатанья */
[data-theme="light"] .typing-indicator {
  background: rgba(26, 26, 26, 0.95) !important;
  border-color: rgba(255, 255, 255, 0.06) !important;
  box-shadow: none !important;
}
[data-theme="light"] .typing-dot {
  background: var(--accent-color) !important;
}

/* Закреплённое сообщение */
[data-theme="light"] .pinned-bar {
  background: rgba(14, 14, 20, 0.45) !important;
  backdrop-filter: blur(16px) saturate(1.3) !important;
  border-bottom-color: rgba(255, 255, 255, 0.06) !important;
}
[data-theme="light"] .pinned-bar-text {
  color: #808080 !important;
}
[data-theme="light"] .pinned-bar-close:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #e8e8e8 !important;
}

/* Кнопка скролла вниз */
[data-theme="light"] .scroll-down-btn {
  background: rgba(26, 26, 26, 0.98) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  color: #e8e8e8 !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4) !important;
}

/* Ховер-действия над сообщениями */
[data-theme="light"] .msg-hover-actions {
  background: rgba(26, 26, 26, 0.98) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4) !important;
}
[data-theme="light"] .msg-action-btn {
  color: #808080 !important;
}
[data-theme="light"] .msg-action-btn:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  color: #e8e8e8 !important;
}

/* Онлайн-точка в области чата (только в хедере) */
[data-theme="light"] .chat-area .online-dot.visible,
[data-theme="light"] .chat-header .online-dot.visible {
  border-color: #111111 !important;
}
/* Онлайн-точка в сайдбаре — остаётся белый бордер */
[data-theme="light"] .sidebar .online-dot.visible,
[data-theme="light"] .chat-item .online-dot.visible {
  border-color: #ffffff !important;
}

/* Аватар в чате */
[data-theme="light"] .chat-area .avatar {
  background: linear-gradient(135deg, #667eea, #764ba2) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

/* ─── Скрываем звёзды в чате в light теме */
[data-theme="light"] .chat-area .chat-particles-canvas {
  opacity: 0.3;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   LIGHT THEME POLISH — делаем светлую тему стильной и современной
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Чистим конфликтующие дубликаты — убираем переменные старой light темы */
[data-theme="light"] {
  --bg:           #f5f7fa;
  --bg2:          #ffffff;
  --bg3:          #eef1f5;
  --accent:       #6366f1;
  --accent2:      #4f46e5;
  --text:         #1e1b4b;
  --text-dim:     #64748b;
  --danger:       #ef4444;
  --success:      #22c55e;
  --border:       rgba(0,0,0,0.06);
  --sidebar-bg:   #ffffff;
  --header-bg:    rgba(255,255,255,0.9);
  --input-bg:     #f1f5f9;
  --bubble-out:   #6366f1;
  --bubble-in:    #ffffff;
  --hover-bg:     rgba(99,102,241,0.06);
  --active-bg:    rgba(99,102,241,0.08);
  --active-border:rgba(99,102,241,0.2);
  --icon-bg:      rgba(99,102,241,0.08);
  --icon-color:   #6366f1;
  --icon-hover-bg:rgba(99,102,241,0.12);
  --btn-glow:     rgba(99,102,241,0.2);
  --btn-from:     #6366f1;
  --btn-to:       #7c3aed;
  --btn-hover-from: #7c3aed;
  --btn-hover-to:   #6366f1;
}

/* ═════════════════════════════════════════════════════════════════════════
   NEW AUTH FLOW — White theme, clean design, no glass
   ═════════════════════════════════════════════════════════════════════════ */

#screen-auth.screen.active {
  display: flex !important;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  position: fixed;
  inset: 0;
  z-index: 10;
  background: #ffffff;
  color: #1c1c1e;
  overflow-y: auto;
  gap: 0;
}
#screen-auth .auth-step {
  display: none !important;
  flex: 1;
  min-height: 0;
}
#screen-auth .auth-step.active {
  display: flex !important;
  animation: authFadeIn 0.35s ease;
}
@keyframes authFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─── Welcome screen ─────────────────────────────────────────────────── */
.auth-step.active .auth-welcome {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}
.auth-welcome-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 50% at 30% 20%, rgba(99,102,241,0.06) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 80% 80%, rgba(139,92,246,0.04) 0%, transparent 50%);
  pointer-events: none;
}
.auth-welcome-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
  max-width: 380px;
  padding: 40px 24px;
}
.auth-welcome-logo,
.auth-welcome-logo-img {
  margin-bottom: 8px;
}
.auth-welcome-logo-img {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
  transition: box-shadow 0.3s;
}
.auth-welcome-content:hover .auth-welcome-logo-img {
  box-shadow: 0 4px 24px rgba(99,102,241,0.2);
}
.auth-welcome-title {
  font-size: 32px;
  font-weight: 700;
  color: #1c1c1e;
  line-height: 1.2;
  margin: 0;
  letter-spacing: -0.5px;
}
.auth-welcome-sub {
  font-size: 15px;
  color: #8e8e93;
  margin: 0 0 12px;
}

/* ─── Auth Buttons ────────────────────────────────────────────────────── */
.auth-btn-primary {
  width: 100%;
  max-width: 320px;
  height: 48px;
  border: none;
  border-radius: 12px;
  background: #6366f1;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.auth-btn-primary:hover {
  background: #4f46e5;
  box-shadow: 0 4px 20px rgba(99,102,241,0.35);
}
.auth-btn-primary:active {
  transform: scale(0.98);
  box-shadow: 0 2px 10px rgba(99,102,241,0.2);
}
.auth-btn-primary:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none;
}
.auth-btn-ghost {
  width: 100%;
  max-width: 320px;
  height: 44px;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: #8e8e93;
  font-size: 14px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: color 0.15s;
}
.auth-btn-ghost:hover {
  color: #1c1c1e;
  text-shadow: 0 0 10px rgba(99,102,241,0.15);
}
.auth-btn-link {
  border: none;
  background: none;
  color: #6366f1;
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  padding: 8px;
  transition: opacity 0.15s, text-shadow 0.2s;
}
.auth-btn-link:hover {
  opacity: 0.7;
  text-shadow: 0 0 12px rgba(99,102,241,0.3);
}
.auth-btn-full {
  max-width: 100%;
}

/* ─── Features slider ──────────────────────────────────────────────────── */
.auth-features {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 40px 20px;
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
}
.auth-features-slider {
  position: relative;
  width: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.auth-feature-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  padding: 32px 20px;
  width: 100%;
  max-width: 420px;
  animation: cardFade 0.35s ease;
}
@keyframes cardFade {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.auth-feature-card h3 {
  font-size: 20px;
  font-weight: 700;
  color: #1c1c1e;
  margin: 0;
}
.auth-feature-card p {
  font-size: 14px;
  color: #8e8e93;
  line-height: 1.6;
  margin: 0;
  max-width: 320px;
}
.auth-feature-icon {
  width: 64px;
  height: 64px;
  border-radius: 18px;
  background: rgba(99,102,241,0.08);
  color: #6366f1;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
  box-shadow: 0 0 40px 8px rgba(99,102,241,0.12);
  transition: box-shadow 0.3s;
}
.auth-feature-icon svg {
  width: 30px;
  height: 30px;
}

/* Dots */
.auth-features-dots {
  display: flex;
  gap: 6px;
  padding: 8px 0;
  justify-content: center;
  width: 100%;
}
.auth-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #d1d5db;
  transition: background 0.2s, transform 0.2s;
  cursor: pointer;
}
.auth-dot.active {
  background: #6366f1;
  width: 20px;
  border-radius: 3px;
  transform: none;
}
.auth-dot:hover {
  background: #9ca3af;
}
.auth-dot.active:hover {
  background: #6366f1;
}

/* Nav buttons row */
.auth-features-nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
  max-width: 320px;
  margin: 0 auto;
}
.auth-features-nav .auth-btn-ghost {
  height: 36px;
  font-size: 13px;
}

/* ─── Registration form ─────────────────────────────────────────────────── */
.auth-register {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
.auth-register-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  flex-shrink: 0;
  border-bottom: 1px solid rgba(0,0,0,0.06);
}
.auth-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 8px 8px 0;
  border: none;
  background: transparent;
  color: #6366f1;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: opacity 0.12s;
}
.auth-back-btn:hover { opacity: 0.7; text-shadow: 0 0 10px rgba(99,102,241,0.25); }
.auth-reg-logo {
  display: inline-flex;
  align-items: center;
  opacity: 0.5;
}
.auth-register-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 32px 24px 24px;
  max-width: 420px;
  width: 100%;
  margin: 0 auto;
}
.auth-register-title {
  font-size: 24px;
  font-weight: 700;
  color: #1c1c1e;
  margin: 0;
}
.auth-register-desc {
  font-size: 14px;
  color: #8e8e93;
  margin: 0 0 8px;
  line-height: 1.5;
}
.auth-reg-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.auth-reg-field label {
  font-size: 12px;
  font-weight: 600;
  color: #8e8e93;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.auth-reg-field input[type="text"],
.auth-reg-field input[type="password"] {
  width: 100%;
  height: 48px;
  padding: 0 14px;
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: 10px;
  background: rgba(0,0,0,0.03);
  color: #1c1c1e;
  font-size: 14px;
  font-family: inherit;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.auth-reg-field input:focus {
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99,102,241,0.1);
}
.auth-reg-field input::placeholder {
  color: #aeaeb2;
}
.auth-register-footer {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}

/* Password block */
.auth-gen-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border: 1px dashed rgba(0,0,0,0.12);
  border-radius: 10px;
  background: transparent;
  color: #6366f1;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.15s;
}
.auth-gen-btn:hover {
  border-color: #6366f1;
  background: rgba(99,102,241,0.04);
  box-shadow: 0 0 16px rgba(99,102,241,0.15);
}
.reg-pass-block {
  display: none;
  flex-direction: column;
  gap: 10px;
}
.reg-pass-block.show { display: flex; }
.auth-pass-row {
  display: flex;
  gap: 6px;
  align-items: center;
}
.reg-password-display {
  flex: 1;
  height: 44px;
  padding: 0 14px;
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: 10px;
  background: rgba(0,0,0,0.03);
  color: #1c1c1e;
  font-size: 13px;
  font-family: 'SF Mono', 'Fira Code', monospace;
  outline: none;
}
.auth-icon-btn {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: #8e8e93;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.12s;
}
.auth-icon-btn:hover {
  background: rgba(0,0,0,0.05);
  color: #1c1c1e;
}
.auth-warning {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px;
  border-radius: 10px;
  background: rgba(239,68,68,0.06);
  border: 1px solid rgba(239,68,68,0.15);
  font-size: 12px;
  color: #c0392b;
  line-height: 1.5;
}
.auth-warning svg {
  flex-shrink: 0;
  margin-top: 2px;
  stroke: #c0392b;
  opacity: 0.7;
}
.auth-confirm-row {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 13px;
  color: #8e8e93;
}
.auth-confirm-row input { display: none; }
.auth-confirm-check {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  border: 1px solid rgba(0,0,0,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.15s;
  color: transparent;
}
.auth-confirm-row input:checked + .auth-confirm-check {
  background: #6366f1;
  border-color: #6366f1;
  color: #fff;
}

/* Saved user */
.auth-saved-user {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 10px;
  background: rgba(0,0,0,0.03);
}
.auth-saved-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 700;
  flex-shrink: 0;
}
.auth-saved-label {
  font-size: 10px;
  color: #8e8e93;
  letter-spacing: 1px;
  font-weight: 600;
}
.auth-saved-name {
  font-size: 14px;
  font-weight: 600;
  color: #1c1c1e;
  margin-top: 2px;
}

/* Connection bar */
.auth-conn-bar {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #8e8e93;
}
.auth-server-btn {
  border: none;
  background: rgba(0,0,0,0.05);
  color: #8e8e93;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 11px;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.12s;
}
.auth-server-btn:hover {
  background: rgba(0,0,0,0.08);
}
.auth-server-dropdown {
  display: none;
  position: absolute;
  bottom: 48px;
  left: 50%;
  transform: translateX(-50%);
  background: #fff;
  border: 1px solid rgba(0,0,0,0.1);
  border-radius: 12px;
  padding: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.1);
  z-index: 20;
}
.auth-server-dropdown.show { display: block; }
.auth-server-input-row {
  display: flex;
  gap: 8px;
  align-items: center;
}
.auth-server-input-row input {
  flex: 1;
  height: 36px;
  padding: 0 12px;
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: 8px;
  font-size: 13px;
  font-family: inherit;
  outline: none;
  min-width: 200px;
}
.auth-server-input-row input:focus {
  border-color: #6366f1;
}
.auth-server-save-btn {
  max-width: 60px;
  height: 36px;
  font-size: 13px;
}

/* Spacer */
.spacer { flex: 1; }

/* ═════════════════════════════════════════════════════════════════════════
   LIQUID GLASS TOGGLE — flat mode when data-lg is not "on"
   ═════════════════════════════════════════════════════════════════════════ */
:root:not([data-lg="on"]):not([data-theme="light"]) body                { background-color: #0e0e0e !important; }
:root:not([data-lg="on"]):not([data-theme="light"]) .tg-rail            { background: #1a1a2e !important; backdrop-filter: none !important; box-shadow: none !important; }
:root:not([data-lg="on"]):not([data-theme="light"]) .sidebar            { background: #1a1a1a !important; backdrop-filter: none !important; box-shadow: 1px 0 8px rgba(0,0,0,0.15) !important; }
:root:not([data-lg="on"]):not([data-theme="light"]) .chat-area          { background: #111111 !important; backdrop-filter: none !important; }
:root:not([data-lg="on"]):not([data-theme="light"]) .chat-header        { background: rgba(17,17,17,0.95) !important; backdrop-filter: none !important; box-shadow: none !important; }
:root:not([data-lg="on"]):not([data-theme="light"]) .input-area         { background: transparent !important; backdrop-filter: none !important; box-shadow: none !important; border-top: none !important; }
:root:not([data-lg="on"]):not([data-theme="light"]) .auth-card          { background: rgba(26,26,26,0.98) !important; backdrop-filter: none !important; box-shadow: 0 8px 48px rgba(0,0,0,0.6) !important; }
:root:not([data-lg="on"]):not([data-theme="light"]) .modal              { background: rgba(26,26,26,0.98) !important; backdrop-filter: none !important; box-shadow: 0 16px 64px rgba(0,0,0,0.6) !important; }
:root:not([data-lg="on"]):not([data-theme="light"]) .settings-layout    { background: #1a1a1a !important; backdrop-filter: none !important; box-shadow: 0 24px 80px rgba(0,0,0,0.7) !important; }
:root:not([data-lg="on"]):not([data-theme="light"]) .settings-nav       { background: rgba(0,0,0,0.3) !important; backdrop-filter: none !important; }
:root:not([data-lg="on"]):not([data-theme="light"]) .settings-panel.open { background: #1a1a1a !important; backdrop-filter: none !important; box-shadow: 0 24px 80px rgba(0,0,0,0.7) !important; }
:root:not([data-lg="on"]):not([data-theme="light"]) .call-card          { background: rgba(18,18,18,0.97) !important; backdrop-filter: none !important; }
:root:not([data-lg="on"]):not([data-theme="light"]) .toast              { background: rgba(26,26,26,0.98) !important; backdrop-filter: none !important; }
:root:not([data-lg="on"]):not([data-theme="light"]) .search-results     { background: rgba(26,26,26,0.99) !important; backdrop-filter: none !important; }
:root:not([data-lg="on"]):not([data-theme="light"]) .ctx-menu           { background: rgba(26,26,26,0.99) !important; backdrop-filter: none !important; }
:root:not([data-lg="on"]):not([data-theme="light"]) .reaction-picker    { background: rgba(26,26,26,0.99) !important; backdrop-filter: none !important; }
:root:not([data-lg="on"]):not([data-theme="light"]) .new-chat-menu      { background: rgba(26,26,26,0.99) !important; backdrop-filter: none !important; }
:root:not([data-lg="on"]):not([data-theme="light"]) .chat-more-menu     { background: rgba(26,26,26,0.99) !important; backdrop-filter: none !important; }
:root:not([data-lg="on"]):not([data-theme="light"]) .attach-menu        { background: rgba(26,26,26,0.99) !important; backdrop-filter: none !important; }
:root:not([data-lg="on"]):not([data-theme="light"]) .profile-panel-card { background: #1a1a1a !important; backdrop-filter: none !important; }
:root:not([data-lg="on"]):not([data-theme="light"]) .pin-card           { background: rgba(26,26,26,0.98) !important; backdrop-filter: none !important; }
:root:not([data-lg="on"]):not([data-theme="light"]) .set-modal          { background: rgba(26,26,26,0.98) !important; backdrop-filter: none !important; }
:root:not([data-lg="on"]):not([data-theme="light"]) .sp-btn-primary     { background: #6366f1 !important; }
:root:not([data-lg="on"]):not([data-theme="light"]) .msg-input          { backdrop-filter: none !important; }
:root:not([data-lg="on"]):not([data-theme="light"]) .ctype-btn          { backdrop-filter: none !important; box-shadow: none !important; }
:root:not([data-lg="on"]):not([data-theme="light"]) .typing-indicator   { backdrop-filter: none !important; box-shadow: none !important; }


/* ═════════════════════════════════════════════════════════════════════════
   LIGHT THEME — comprehensive override block
   ═════════════════════════════════════════════════════════════════════════ */

[data-theme="light"] {
  --bg:           #f5f7fa;
  --bg2:          #ffffff;
  --bg3:          #eef1f5;
  --accent:       #6366f1;
  --accent2:      #818cf8;
  --text:         #1e1b4b;
  --text-dim:     #475569;
  --danger:       #dc2626;
  --success:      #16a34a;
  --border:       rgba(0,0,0,0.07);
  --glow:         none;
  --glow-lg:      0 8px 32px rgba(0,0,0,0.08);
  --text-glow:    none;
  --sidebar-bg:   #ffffff;
  --header-bg:    #ffffff;
  --input-bg:     #f1f5f9;
  --bubble-out:   #eef2ff;
  --bubble-in:    #ffffff;
  --btn-from:     #f1f5f9;
  --btn-to:       #e2e8f0;
  --btn-glow:     rgba(0,0,0,0.04);
  --btn-hover-from: #e2e8f0;
  --btn-hover-to:   #cbd5e1;
  --active-bg:    rgba(99,102,241,0.08);
  --active-border: rgba(99,102,241,0.2);
  --hover-bg:     rgba(99,102,241,0.04);
  --icon-color:   #1e1b4b;
  --icon-bg:      rgba(0,0,0,0.04);
  --icon-hover-bg: rgba(0,0,0,0.08);
}

/* ── Shell & Sidebar ───────────────────────────────────────────── */
[data-theme="light"] body,
[data-theme="light"] html { background: #f5f7fa !important; color: #1e1b4b !important; }
[data-theme="light"] #app::before { display: none; }
[data-theme="light"] #particles-canvas,
[data-theme="light"] #stars-canvas { opacity: 0; }

[data-theme="light"] .sidebar { background: #ffffff !important; backdrop-filter: none !important; box-shadow: 1px 0 8px rgba(0,0,0,0.04) !important; }
[data-theme="light"] .tg-rail { background: #ffffff !important; backdrop-filter: none !important; border-right: 1px solid rgba(0,0,0,0.04) !important; }
[data-theme="light"] .sidebar-header { background: #ffffff !important; border-bottom: 1px solid rgba(0,0,0,0.04); }
[data-theme="light"] .sidebar-top { background: #ffffff; }
[data-theme="light"] .sidebar-profile { background: #ffffff; border-top: 1px solid rgba(0,0,0,0.04); }
[data-theme="light"] .sidebar-status-bar { background: #ffffff; border-top: 1px solid rgba(0,0,0,0.04); }

/* ── Search ────────────────────────────────────────────────────── */
[data-theme="light"] .search-box { background: transparent; }
[data-theme="light"] .search-box input {
  background: #f1f5f9 !important;
  border-color: transparent !important;
  color: #1e1b4b !important;
  border-radius: 12px !important;
  height: 36px !important;
  font-size: 14px;
  padding-left: 38px !important;
}
[data-theme="light"] .search-box input::placeholder { color: #64748b; }
[data-theme="light"] .search-box input:focus {
  background: #ffffff !important;
  border-color: rgba(99,102,241,0.3) !important;
  box-shadow: 0 0 0 3px rgba(99,102,241,0.08) !important;
}
[data-theme="light"] .search-icon { color: #475569 !important; stroke: #475569 !important; }
[data-theme="light"] .search-input-wrap:focus-within .search-icon { color: #6366f1 !important; stroke: #6366f1 !important; }
[data-theme="light"] .search-results { background: #ffffff !important; backdrop-filter: none !important; box-shadow: 0 8px 32px rgba(0,0,0,0.08) !important; }
[data-theme="light"] .search-empty { color: #64748b; }

/* ── Chat List ─────────────────────────────────────────────────── */
[data-theme="light"] .chat-list { background: #ffffff; }
[data-theme="light"] .chat-item {
  border-radius: 12px !important;
  margin: 1px 6px !important;
  background: transparent !important;
  color: #1e1b4b !important;
}
[data-theme="light"] .chat-item:hover { background: rgba(99,102,241,0.05) !important; }
[data-theme="light"] .chat-item.active {
  background: rgba(99,102,241,0.08) !important;
  box-shadow: 0 0 0 1px rgba(99,102,241,0.15) !important;
}
[data-theme="light"] .chat-item .chat-name { color: #1e1b4b; }
[data-theme="light"] .chat-item .chat-last-msg { color: #475569; }
[data-theme="light"] .chat-item .chat-time { color: #64748b; }
[data-theme="light"] .chat-item .unread-badge { background: #6366f1; color: #ffffff; }

/* ── Chat Area ─────────────────────────────────────────────────── */
[data-theme="light"] .chat-area { background: #f5f7fa !important; backdrop-filter: none !important; }
[data-theme="light"] .chat-header {
  background: rgba(255,255,255,0.95) !important;
  backdrop-filter: none !important;
  border-bottom: 1px solid rgba(0,0,0,0.04);
  color: #1e1b4b !important;
}
[data-theme="light"] .chat-header .chat-title { color: #1e1b4b; }
[data-theme="light"] .chat-header .chat-status { color: #64748b; }

/* ── Messages ──────────────────────────────────────────────────── */
[data-theme="light"] .messages-container { background: transparent; }
[data-theme="light"] .message .bubble { box-shadow: 0 1px 3px rgba(0,0,0,0.04); }
[data-theme="light"] .message.outgoing .bubble {
  background: #eef2ff !important;
  color: #1e1b4b !important;
}
[data-theme="light"] .message.incoming .bubble {
  background: #ffffff !important;
  color: #1e1b4b !important;
}
[data-theme="light"] .message .msg-time { color: #64748b; }
[data-theme="light"] .message .msg-sender { color: #6366f1; }
[data-theme="light"] .date-separator span {
  background: rgba(0,0,0,0.04) !important;
  color: #475569 !important;
  backdrop-filter: none !important;
}

/* ── Input Area ────────────────────────────────────────────────── */
[data-theme="light"] .input-area {
  background: transparent !important;
  backdrop-filter: none !important;
  border-top: 1px solid #e5e5ea !important;
}
[data-theme="light"] .msg-input {
  background: #f1f5f9 !important;
  color: #1e1b4b !important;
  backdrop-filter: none !important;
}
[data-theme="light"] .msg-input:focus { background: #ffffff !important; border-color: rgba(99,102,241,0.3) !important; }
[data-theme="light"] .msg-input::placeholder { color: #8e8e93; }
[data-theme="light"] .input-row { background: transparent; }
[data-theme="light"] .reply-bar { background: transparent !important; border-bottom: none; }
[data-theme="light"] .msg-search-bar { background: #ffffff !important; border-bottom: 1px solid rgba(0,0,0,0.04); }
[data-theme="light"] .msg-search-bar input { background: #f1f5f9; color: #1e1b4b; }
[data-theme="light"] .pinned-bar { background: #ffffff !important; border-bottom: 1px solid rgba(0,0,0,0.04); }
[data-theme="light"] .recording-indicator { background: rgba(239,68,68,0.06) !important; }

[data-theme="light"] .ttl-chip {
  background: #e9e9eb !important;
  color: #636366 !important;
  border: none !important;
}
[data-theme="light"] .ttl-chip:hover { background: #dddde1 !important; }
[data-theme="light"] .ttl-chip.active {
  background: #6366f1 !important;
  color: #ffffff !important;
}

/* ── Modals & Overlays ─────────────────────────────────────────── */
[data-theme="light"] .modal {
  background: #ffffff !important;
  backdrop-filter: none !important;
  box-shadow: 0 24px 80px rgba(0,0,0,0.12) !important;
  border: 1px solid rgba(0,0,0,0.06);
}
[data-theme="light"] .modal-overlay { background: rgba(0,0,0,0.2) !important; backdrop-filter: none !important; }
[data-theme="light"] .modal-header { border-bottom: 1px solid rgba(0,0,0,0.04); color: #1e1b4b; }
[data-theme="light"] .modal-footer { border-top: 1px solid rgba(0,0,0,0.04); }

/* ── Settings ──────────────────────────────────────────────────── */
[data-theme="light"] .settings-overlay { background: rgba(0,0,0,0.2) !important; backdrop-filter: none !important; }
[data-theme="light"] .settings-layout { background: #ffffff !important; backdrop-filter: none !important; }
[data-theme="light"] .settings-nav {
  background: rgba(0,0,0,0.03) !important;
  backdrop-filter: none !important;
  border-right: 1px solid rgba(0,0,0,0.04);
}
[data-theme="light"] .settings-panel { background: #ffffff !important; backdrop-filter: none !important; }
[data-theme="light"] .settings-panel.open { background: #ffffff !important; backdrop-filter: none !important; }
[data-theme="light"] .settings-card { background: #f8fafc !important; }
[data-theme="light"] .set-modal { background: #ffffff !important; backdrop-filter: none !important; }
[data-theme="light"] .setting-label { color: #1e1b4b; }
[data-theme="light"] .setting-sub { color: #64748b; }

/* ── Auth ──────────────────────────────────────────────────────── */
[data-theme="light"] .auth-card {
  background: #ffffff !important;
  backdrop-filter: none !important;
  box-shadow: 0 8px 48px rgba(0,0,0,0.06) !important;
}

/* ── Profile & Sp-field ────────────────────────────────────────── */
[data-theme="light"] .profile-panel-card { background: #ffffff !important; backdrop-filter: none !important; }
[data-theme="light"] .sp-field-input { background: #f8fafc !important; }
[data-theme="light"] .sp-field-id-row { background: #f8fafc !important; }

/* ── Buttons & Icons ───────────────────────────────────────────── */
[data-theme="light"] .icon-btn { color: #1e1b4b !important; }
[data-theme="light"] .icon-btn:hover { background: rgba(0,0,0,0.06) !important; }
[data-theme="light"] .btn { color: #1e1b4b; }
[data-theme="light"] .btn-primary { background: #6366f1; color: #ffffff; }

/* ── Menus ─────────────────────────────────────────────────────── */
[data-theme="light"] .chat-more-menu { background: #ffffff !important; backdrop-filter: none !important; }
[data-theme="light"] .ctx-menu { background: #ffffff !important; backdrop-filter: none !important; }
[data-theme="light"] .attach-menu { background: #ffffff !important; backdrop-filter: none !important; }
[data-theme="light"] .new-chat-menu { background: #ffffff !important; backdrop-filter: none !important; }
[data-theme="light"] .reaction-picker { background: #ffffff !important; backdrop-filter: none !important; }
[data-theme="light"] .pin-card { background: #ffffff !important; backdrop-filter: none !important; }
[data-theme="light"] .chat-more-item { color: #1e1b4b; }
[data-theme="light"] .chat-more-item:hover { background: rgba(99,102,241,0.06) !important; }
[data-theme="light"] .chat-more-item svg { color: #475569 !important; stroke: #475569 !important; opacity: 0.9 !important; }

/* ── Search containers (contacts, emoji) ───────────────────────── */
[data-theme="light"] .search-container svg { color: #475569 !important; stroke: #475569 !important; }
[data-theme="light"] .search-container input { background: #f1f5f9 !important; color: #1e1b4b !important; border-color: transparent !important; }
[data-theme="light"] .search-container input::placeholder { color: #64748b !important; }
[data-theme="light"] .emoji-search-input-icon { color: #475569 !important; stroke: #475569 !important; }

/* ── Scroll & Toast ────────────────────────────────────────────── */
[data-theme="light"] .scroll-down-btn {
  background: #ffffff !important;
  backdrop-filter: none !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.1) !important;
}
[data-theme="light"] .toast { background: #ffffff !important; backdrop-filter: none !important; color: #1e1b4b !important; }

/* ── Typing ────────────────────────────────────────────────────── */
[data-theme="light"] .typing-indicator { background: #f1f5f9 !important; backdrop-filter: none !important; }

/* ── Emoji picker ──────────────────────────────────────────────── */
[data-theme="light"] .emoji-picker { background: #ffffff !important; border-color: rgba(0,0,0,0.08) !important; color: #1c1c1e !important; box-shadow: 0 8px 40px rgba(0,0,0,0.15) !important; }
[data-theme="light"] .emoji-body { background: #ffffff !important; }
[data-theme="light"] .emoji-footer { background: #ffffff !important; border-top-color: rgba(0,0,0,0.06) !important; }
[data-theme="light"] .emoji-footer-mode { color: #8e8e93 !important; }
[data-theme="light"] .emoji-footer-mode:hover { color: #1c1c1e !important; }
[data-theme="light"] .emoji-footer-mode.active { color: #6366f1 !important; }
[data-theme="light"] .emoji-search-row { background: #ffffff !important; margin-bottom: 14px !important; }
[data-theme="light"] .emoji-search-wrap { background: #f1f5f9 !important; border-color: transparent !important; }
[data-theme="light"] .emoji-search-input { color: #1c1c1e !important; }
[data-theme="light"] .emoji-search-input::placeholder { color: #8e8e93 !important; }
[data-theme="light"] .emoji-quick-access { background: #ffffff !important; padding: 4px 16px 8px !important; margin-bottom: 14px !important; }
[data-theme="light"] .emoji-qa-btn { color: #bbb !important; }
[data-theme="light"] .emoji-qa-btn { color: #bbb !important; }
[data-theme="light"] .emoji-qa-btn:hover { color: #666 !important; }
[data-theme="light"] .emoji-qa-btn.active { color: #6366f1 !important; }
[data-theme="light"] .emoji-category-title { color: #8e8e93 !important; }
[data-theme="light"] .emoji-item { color: #1c1c1e !important; }
[data-theme="light"] .emoji-item:hover { background: rgba(0,0,0,0.06) !important; }
[data-theme="light"] .sticker-item { background: rgba(0,0,0,0.03) !important; color: #1c1c1e !important; }
[data-theme="light"] .sticker-item:hover { background: rgba(0,0,0,0.06) !important; }
[data-theme="light"] .emoji-scroll::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.15) !important; border-radius: 6px !important; }
[data-theme="light"] .emoji-scroll::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.25) !important; }
[data-theme="light"] .sticker-scroll::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.15) !important; border-radius: 6px !important; }

/* ── Channel bars ──────────────────────────────────────────────── */
[data-theme="light"] .channel-join-bar,
[data-theme="light"] .channel-readonly-bar { background: #ffffff !important; }

/* ── Empty states ──────────────────────────────────────────────── */
[data-theme="light"] .empty-state { color: #475569; }
[data-theme="light"] .empty-state .empty-title { color: #1e1b4b; }
[data-theme="light"] .empty-state .empty-sub { color: #64748b; }

/* ── Misc ──────────────────────────────────────────────────────── */
[data-theme="light"] .call-msg-inner { background: rgba(0,0,0,0.04) !important; }
[data-theme="light"] .file-viewer { box-shadow: 0 24px 80px rgba(0,0,0,0.15); }
[data-theme="light"] .lang-item:hover { background: rgba(99,102,241,0.06) !important; }
[data-theme="light"] .device-row:hover { background: rgba(99,102,241,0.03) !important; }

/* ── Remaining scattered overrides (kill old dark colors) ─────── */
[data-theme="light"] .msg-hover-actions { background: rgba(255,255,255,0.98) !important; border-color: rgba(0,0,0,0.06) !important; box-shadow: 0 4px 20px rgba(0,0,0,0.08) !important; }
[data-theme="light"] .msg-action-btn { color: #64748b !important; }
[data-theme="light"] .msg-action-btn:hover { background: rgba(0,0,0,0.05) !important; color: #1e1b4b !important; }
[data-theme="light"] .chat-area .online-dot.visible,
[data-theme="light"] .chat-header .online-dot.visible { border-color: #ffffff !important; }
[data-theme="light"] .chat-area .avatar { background: linear-gradient(135deg, #6366f1, #8b5cf6) !important; }
[data-theme="light"] .chat-area .chat-particles-canvas { opacity: 0.05 !important; }
[data-theme="light"] .reply-bar-name { color: #475569 !important; }
[data-theme="light"] .reply-bar-text { color: #1e1b4b !important; }
[data-theme="light"] .channel-join-info { color: #64748b !important; }
[data-theme="light"] .typing-dot { background: #94a3b8 !important; }
[data-theme="light"] .pinned-bar-text { color: #475569 !important; }
[data-theme="light"] .pinned-bar-close { color: #64748b !important; }
[data-theme="light"] .pinned-bar-close:hover { background: rgba(0,0,0,0.06) !important; color: #1e1b4b !important; }
[data-theme="light"] .empty-state { background: transparent !important; }
[data-theme="light"] .empty-icon { color: #94a3b8 !important; }
[data-theme="light"] .empty-title { color: #1e1b4b !important; }
[data-theme="light"] .empty-sub { color: #64748b !important; }

/* ── Transitions ──────────────────────────────────────────────── */
[data-theme="light"] body,
[data-theme="light"] .sidebar,
[data-theme="light"] .chat-area,
[data-theme="light"] .chat-header,
[data-theme="light"] .input-area,
[data-theme="light"] .auth-card,
[data-theme="light"] .modal,
[data-theme="light"] .chat-item,
[data-theme="light"] .msg-input,
[data-theme="light"] .search-box input,
[data-theme="light"] .sidebar-top,
[data-theme="light"] .sidebar-header,
[data-theme="light"] .sidebar-profile,
[data-theme="light"] .tg-rail,
[data-theme="light"] .reply-bar,
[data-theme="light"] .msg-search-bar,
[data-theme="light"] .pinned-bar {
  transition: background-color 0.35s ease, border-color 0.35s ease, color 0.35s ease !important;
}

/* ── Light theme: message bubbles contrast ──────────────────────── */
[data-theme="light"] .message.outgoing .bubble {
  background: linear-gradient(135deg, #6366f1, #7c3aed) !important;
  border: none !important;
  color: #ffffff !important;
  box-shadow: 0 2px 14px rgba(99,102,241,0.25) !important;
  border-radius: 20px 20px 6px 20px !important;
}
[data-theme="light"] .message.incoming .bubble {
  background: #f1f1f4 !important;
  border: 1px solid rgba(0,0,0,0.04) !important;
  color: #1c1c1e !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04) !important;
  border-radius: 20px 20px 20px 6px !important;
}

[data-theme="light"] .message.outgoing .msg-time,
[data-theme="light"] .message.outgoing .read-tick {
  color: rgba(255,255,255,0.65) !important;
}
[data-theme="light"] .message.incoming .msg-time,
[data-theme="light"] .message.incoming .read-tick {
  color: #8e8e93 !important;
}

[data-theme="light"] .message.outgoing .voice-play-btn {
  background: rgba(255,255,255,0.15) !important;
  border-color: rgba(255,255,255,0.2) !important;
  color: #ffffff !important;
}
[data-theme="light"] .message.outgoing .voice-play-btn:hover {
  background: rgba(255,255,255,0.25) !important;
}
[data-theme="light"] .message.outgoing .voice-bar {
  background: rgba(255,255,255,0.3) !important;
}
[data-theme="light"] .message.outgoing .voice-bar.played {
  background: rgba(255,255,255,0.7) !important;
}
[data-theme="light"] .message.outgoing .voice-duration {
  color: rgba(255,255,255,0.5) !important;
}

[data-theme="light"] .message.incoming .voice-play-btn {
  background: #e5e5ea !important;
  border-color: rgba(0,0,0,0.06) !important;
  color: #1c1c1e !important;
}
[data-theme="light"] .message.incoming .voice-play-btn:hover {
  background: #d8d8dd !important;
}
[data-theme="light"] .message.incoming .voice-bar {
  background: rgba(0,0,0,0.12) !important;
}
[data-theme="light"] .message.incoming .voice-bar.played {
  background: #6366f1 !important;
}
[data-theme="light"] .message.incoming .voice-duration {
  color: #8e8e93 !important;
}

/* ── Light theme: ice doodle background ─────────────────────────── */
[data-theme="light"] .chat-area {
  background-image: url('themes/desktop_themes/ice.png') !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-color: #f5f7fa !important;
}
[data-theme="light"] .empty-state {
  background: #f5f7fa !important;
}

/* ── Light theme: minimal icon buttons (no circular bg) ────────── */
[data-theme="light"] .emoji-trigger-btn,
[data-theme="light"] .voice-btn {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  color: #64748b !important;
  width: 40px !important;
  height: 40px !important;
}
[data-theme="light"] .emoji-trigger-btn:hover,
[data-theme="light"] .voice-btn:hover {
  background: transparent !important;
  color: #6366f1 !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
[data-theme="light"] .emoji-trigger-btn.active {
  background: transparent !important;
  color: #6366f1 !important;
  border-color: transparent !important;
}
[data-theme="light"] .voice-btn.recording {
  background: transparent !important;
  color: #ef4444 !important;
  border-color: transparent !important;
  animation: none !important;
  box-shadow: none !important;
}