:root {
  --bg: #0e1015;
  --panel: #161b22;
  --chat-btn-bg: #1a1d25;
  --chat-list-bg: #161b22;
  --channels-underlist-bg: #0e1015;
  --accent: #5865f2;
  --accent-hover: #4752e0;
  --accent-soft: rgba(88, 101, 242, 0.12);
  --accent2: #7c5cfc;
  --success: #23a55a;
  --danger: #f23f42;
  --text: #e3e5e8;
  --muted: #80848e;
  --border: #2a2d36;
  --nav-bg: #070809;
  --sidebar-bg: #111318;
  --shadow-lg: 0 16px 48px rgba(0,0,0,0.7), 0 4px 12px rgba(0,0,0,0.4);
  --shadow-md: 0 8px 24px rgba(0,0,0,0.5);
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
}

* {
  box-sizing: border-box;
  scrollbar-width: thin;
  scrollbar-color: rgba(88,101,242,0.4) transparent;
}

*::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}

*::-webkit-scrollbar-track {
  background: transparent;
}

*::-webkit-scrollbar-thumb {
  background: rgba(88,101,242,0.35);
  border-radius: 999px;
}

*::-webkit-scrollbar-thumb:hover {
  background: rgba(88,101,242,0.6);
}

*::-webkit-scrollbar-corner {
  background: transparent;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  min-height: 100vh;
}

body.auth-mode {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  overflow: hidden;
}

body.auth-mode #app {
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

body.auth-mode #main {
  display: none;
}

body:not(.auth-mode) #auth-panel,
body:not(.auth-mode) #auth-bg {
  display: none;
}

/* ── Auth Background ── */
.auth-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  background: #0b0c10;
  overflow: hidden;
}

.auth-bg-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  opacity: 0.5;
}

.auth-bg-orb-1 {
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, #4f27a8 0%, transparent 70%);
  top: -15%;
  left: -10%;
  animation: auth-orb-1 12s ease-in-out infinite alternate;
}

.auth-bg-orb-2 {
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, #1a3a8a 0%, transparent 70%);
  bottom: -10%;
  right: -10%;
  animation: auth-orb-2 14s ease-in-out infinite alternate;
}

.auth-bg-orb-3 {
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, #6d28d9 0%, transparent 70%);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: auth-orb-3 10s ease-in-out infinite alternate;
}

@keyframes auth-orb-1 {
  0%   { transform: translate(0, 0) scale(1); opacity: 0.45; }
  50%  { transform: translate(80px, 60px) scale(1.15); opacity: 0.6; }
  100% { transform: translate(-40px, 100px) scale(0.95); opacity: 0.4; }
}

@keyframes auth-orb-2 {
  0%   { transform: translate(0, 0) scale(1); opacity: 0.4; }
  50%  { transform: translate(-60px, -50px) scale(1.1); opacity: 0.55; }
  100% { transform: translate(50px, -80px) scale(0.9); opacity: 0.35; }
}

@keyframes auth-orb-3 {
  0%   { transform: translate(-50%, -50%) scale(0.8); opacity: 0.3; }
  50%  { transform: translate(-40%, -60%) scale(1.1); opacity: 0.5; }
  100% { transform: translate(-60%, -40%) scale(0.9); opacity: 0.35; }
}

a {
  color: var(--accent);
}

input,
textarea,
button {
  border: 1px solid var(--border);
  background: #202226;
  color: var(--text);
  padding: 10px;
  border-radius: 8px;
  font-size: 14px;
}

button {
  background: var(--accent);
  border: none;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

button:hover {
  opacity: 0.9;
}

#app {
  height: 100vh;
}

.panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px;
}

.hidden {
  display: none !important;
}

.muted {
  color: var(--muted);
}

.tiny {
  font-size: 12px;
}

.error {
  color: #ef4444;
  margin-top: 8px;
}

#auth-panel {
  position: relative;
  z-index: 1;
  width: min(420px, 92vw);
  padding: 40px 36px 32px;
  background: rgba(18, 20, 26, 0.75);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 20px;
  box-shadow: 0 16px 64px rgba(0,0,0,0.5), 0 0 0 1px rgba(109,40,217,0.08);
  animation: auth-card-in 0.5s ease-out;
}

@keyframes auth-card-in {
  from { opacity: 0; transform: translateY(24px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

#auth-panel .logo {
  margin-bottom: 4px;
}

.auth-subtitle {
  text-align: center;
  color: var(--muted);
  font-size: 13px;
  margin-bottom: 20px;
}

/* New-design-only chrome (hidden in classic) */
.auth-tagline,
.auth-bg-grid,
.auth-bg-vignette,
.nav-brand,
.nav-brand-version,
.nav-section-label,
.nav-btn-label,
.icon-svg,
.sidebar-nav-tabs,
.sidebar-actions-slot {
  display: none;
}

.icon-emoji {
  display: inline;
}

.composer-tools {
  display: contents;
}

.sidebar-topbar {
  display: contents;
}

/* Keep classic composer button order after markup regrouping */
#btn-voice-record { order: 1; }
#btn-video-circle { order: 2; }
#btn-attach { order: 3; }
#btn-format-text { order: 4; }
.chat-input #attach-file-input { order: 5; }
.chat-input #text-format-menu { order: 5; }
.chat-input #message-input,
.chat-input textarea { order: 6; }
.chat-input .char-count { order: 7; }
#btn-emoji { order: 8; }
#btn-send { order: 9; }

.topbar-actions,
.app-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.admin-design-section {
  margin: 0 0 18px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.02);
}

.admin-user-search {
  width: 100%;
  margin: 0 0 10px;
  padding: 9px 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.04);
  color: var(--text);
  box-sizing: border-box;
}
.admin-users-list {
  max-height: 260px;
  overflow-y: auto;
  margin-bottom: 10px;
}
.admin-selected-user {
  margin: 0 0 10px;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(124, 92, 255, 0.1);
  border: 1px solid rgba(124, 92, 255, 0.25);
  color: #d8dae4;
}
.admin-badge {
  display: inline-block;
  margin-left: 4px;
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  vertical-align: middle;
}
.admin-badge.admin { background: rgba(88,101,242,0.25); color: #a5b4fc; }
.admin-badge.banned { background: rgba(239,68,68,0.25); color: #fca5a5; }
.admin-badge.blocked { background: rgba(245,158,11,0.22); color: #fcd34d; }
.admin-danger-zone {
  margin-top: 14px;
  padding: 12px;
  border-radius: 10px;
  border: 1px solid rgba(239,68,68,0.35);
  background: rgba(239,68,68,0.08);
}
.admin-danger-title {
  font-size: 12px;
  font-weight: 700;
  color: #fca5a5;
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.admin-danger-btn {
  background: rgba(239,68,68,0.25) !important;
  border: 1px solid rgba(239,68,68,0.45) !important;
  color: #fecaca !important;
}
.admin-danger-btn:hover {
  background: rgba(239,68,68,0.4) !important;
}

.admin-design-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}

.admin-design-section h4,
.admin-mod-section h4 {
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 700;
}

.admin-design-hint {
  margin: 0 0 12px;
}

.admin-design-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.admin-design-btn {
  background: #202226;
  border: 1px solid var(--border);
  color: var(--text);
  font-weight: 600;
  padding: 10px 12px;
}

.admin-design-btn.active {
  background: var(--accent);
  border-color: transparent;
  color: #fff;
}

.admin-design-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: var(--accent-soft);
  color: var(--accent);
}

#admin-design-status {
  margin-top: 8px;
  min-height: 16px;
}

.auth-title {
  font-size: 20px;
  font-weight: 700;
  margin: 0 0 20px 0;
  color: #fff;
}

.auth-field {
  margin-bottom: 14px;
}

.auth-field label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #9ca3af;
  margin-bottom: 6px;
}

.auth-field input {
  width: 100%;
  padding: 11px 14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  font-size: 14px;
  color: var(--text);
  transition: border-color 0.2s, box-shadow 0.2s;
  box-sizing: border-box;
}

.auth-field input:focus {
  outline: none;
  border-color: rgba(89,101,242,0.5);
  box-shadow: 0 0 0 3px rgba(89,101,242,0.12);
}

.auth-field input::placeholder {
  color: #555;
}

.auth-btn {
  width: 100%;
  padding: 12px;
  margin-top: 6px;
  border: none;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(135deg, #5965f2, #7c3aed);
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.2s, opacity 0.2s;
  box-shadow: 0 4px 16px rgba(89,101,242,0.25);
}

.auth-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 24px rgba(89,101,242,0.35);
  opacity: 1;
}

.auth-btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(89,101,242,0.2);
}

.auth-switch {
  text-align: center;
  margin-top: 16px;
  font-size: 13px;
  color: var(--muted);
}

.auth-switch .link-btn {
  font-size: 13px;
  font-weight: 600;
  color: #818cf8;
  transition: color 0.15s;
}

.auth-switch .link-btn:hover {
  color: #a5b4fc;
}

.link-btn {
  background: transparent;
  border: none;
  color: var(--accent);
  cursor: pointer;
  padding: 0;
}

.logo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 10px;
  animation: logo-idle-float 2.8s linear infinite alternate;
}

.logo-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: linear-gradient(135deg, #6c7bff, #8f5bff);
  display: grid;
  place-items: center;
  font-weight: 800;
  color: white;
  font-size: 22px;
}

.logo-text {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: 1px;
}

.app-loading-splash {
  position: fixed;
  inset: 0;
  background: #000;
  z-index: 4000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.loading-logo {
  animation: loading-blink 0.5s linear infinite;
}

@keyframes logo-idle-float {
  0% { transform: translateY(-5px); }
  100% { transform: translateY(5px); }
}

@keyframes loading-blink {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.3;
  }
}

#main {
  display: grid;
  grid-template-columns: 72px 300px 1fr;
  height: 100vh;
}

.nav-sidebar {
  background: var(--nav-bg);
  border-right: 1px solid rgba(255,255,255,0.04);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  position: relative;
  overflow: visible;
}

.nav-top,
.nav-bottom {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.nav-bottom {
  align-items: center;
}

.nav-divider {
  width: 28px;
  height: 1px;
  background: #4b5563;
  opacity: 0.8;
  margin: 2px 0;
}

.server-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 220px;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 2px 4px 2px 2px;
}

.server-btn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: none;
  background: #1e2128;
  color: #fff;
  font-size: 18px;
  display: grid;
  place-items: center;
  cursor: pointer;
  overflow: visible;
  padding: 0;
  position: relative;
  isolation: isolate;
  transition: border-radius 0.2s cubic-bezier(0.4,0,0.2,1), background 0.2s, transform 0.15s;
}

.server-btn-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: inherit;
  pointer-events: none;
}

.server-btn-avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  display: block;
}

.server-btn-letter {
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  pointer-events: none;
}

.server-btn-letter.hidden {
  display: none !important;
}

.server-badge {
  position: absolute;
  z-index: 5;
  display: grid;
  place-items: center;
  pointer-events: none;
  box-sizing: border-box;
  width: 15px;
  height: 15px;
  border-radius: 5px;
  border: none;
  box-shadow: 0 0 0 2px var(--nav-bg, #070809);
}

.server-badge svg {
  display: block;
  width: 9px;
  height: 9px;
}

.server-badge.hidden {
  display: none !important;
}

.server-badge-muted {
  left: 0;
  bottom: 0;
  background: rgba(18, 20, 26, 0.96);
  color: #b4bcc8;
}

.server-badge-voice {
  right: 0;
  bottom: 0;
  background: #23a55a;
  color: #fff;
}

.server-badge-unread {
  top: 0;
  right: 0;
  min-width: 15px;
  padding: 0 3px;
  width: auto;
  border-radius: 999px;
  background: #ef4444;
  color: #fff;
  font-size: 8px;
  font-weight: 800;
  line-height: 1;
}

.server-badge-mention {
  top: 0;
  left: 0;
  background: #ef4444;
  color: #fff;
  font-size: 8px;
  font-weight: 800;
}

.server-header-banner img.banner-fallback {
  display: none;
}

.server-btn::before {
  content: '';
  position: absolute;
  left: -16px;
  top: 50%;
  transform: translateY(-50%) scaleY(0);
  width: 4px;
  height: 0px;
  background: #fff;
  border-radius: 0 3px 3px 0;
  transition: transform 0.2s cubic-bezier(0.4,0,0.2,1), height 0.2s cubic-bezier(0.4,0,0.2,1);
  pointer-events: none;
}

.server-btn:hover::before {
  transform: translateY(-50%) scaleY(1);
  height: 20px;
}

.server-btn.active::before {
  transform: translateY(-50%) scaleY(1);
  height: 40px;
}

.server-btn:hover {
  border-radius: 30%;
  background: var(--accent);
  transform: translateY(-1px);
}

.server-btn.active {
  background: var(--accent);
  border-radius: 30%;
}

.server-btn-avatar {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
  display: block;
  transition: border-radius 0.2s cubic-bezier(0.4,0,0.2,1);
}

.nav-btn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: none;
  background: #1a1d25;
  display: grid;
  place-items: center;
  font-size: 18px;
  position: relative;
  cursor: pointer;
  transition: border-radius 0.2s cubic-bezier(0.4,0,0.2,1), background 0.2s, transform 0.15s;
}

.nav-btn::before {
  content: '';
  position: absolute;
  left: -16px;
  top: 50%;
  transform: translateY(-50%) scaleY(0);
  width: 4px;
  height: 0;
  background: #fff;
  border-radius: 0 3px 3px 0;
  transition: transform 0.2s cubic-bezier(0.4,0,0.2,1), height 0.2s cubic-bezier(0.4,0,0.2,1);
  pointer-events: none;
}

.nav-btn:hover::before {
  transform: translateY(-50%) scaleY(1);
  height: 20px;
}

.nav-btn.active::before {
  transform: translateY(-50%) scaleY(1);
  height: 40px;
}

.nav-btn:hover {
  border-radius: 30%;
  background: var(--accent);
  transform: translateY(-1px);
}

.nav-btn.active {
  background: var(--accent);
  border-radius: 30%;
}

.nav-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 16px;
  height: 16px;
  border-radius: 999px;
  background: #ef4444;
  color: #fff;
  font-size: 10px;
  display: grid;
  place-items: center;
  padding: 0 4px;
  font-weight: 700;
}

.server-unread-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 16px;
  height: 16px;
  border-radius: 999px;
  background: #ef4444;
  color: #fff;
  font-size: 10px;
  display: grid;
  place-items: center;
  padding: 0 4px;
  font-weight: 700;
  z-index: 2;
}

.server-voice-badge,
.server-muted-badge {
  display: none;
}

.sidebar {
  background: var(--sidebar-bg);
  border-right: 1px solid rgba(255,255,255,0.04);
  display: flex;
  flex-direction: column;
  padding: 12px 8px;
  gap: 8px;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  overflow-x: hidden;
}

.sidebar-scroll {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.brand {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  gap: 10px;
  font-weight: 800;
  letter-spacing: 0.5px;
  transform-origin: 50% 50%;
  animation: logo-idle-float 2.8s linear infinite alternate;
}

.brand-icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: linear-gradient(135deg, #6c7bff, #8f5bff);
  display: grid;
  place-items: center;
  font-weight: 800;
  color: white;
}

.brand-text {
  font-size: 16px;
  letter-spacing: 0.8px;
}

.sidebar-section {
  background: transparent;
  border: none;
  border-radius: 10px;
  padding: 4px 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.server-header-card {
  margin-bottom: 8px;
}

.server-header-banner {
  position: relative;
  width: 100%;
  height: 106px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: linear-gradient(135deg, #2d1b52, #1f2937);
  cursor: pointer;
}

.server-header-banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0;
  transition: opacity 0.25s ease;
}
.server-header-banner img.loaded { opacity: 0.9; }

/* ── Загрузка при переключении серверов ── */
.server-switch-loading {
  position: fixed; inset: 0; z-index: 6000;
  display: flex; align-items: center; justify-content: center;
  background: rgba(10, 12, 16, 0.45);
  backdrop-filter: blur(1.5px);
  opacity: 0; visibility: hidden;
  transition: opacity 0.15s ease, visibility 0.15s ease;
}
.server-switch-loading.visible { opacity: 1; visibility: visible; }
.server-switch-spinner {
  width: 40px; height: 40px; border-radius: 50%;
  border: 3px solid rgba(255,255,255,0.15);
  border-top-color: var(--music-accent, #8b6dff);
  animation: server-switch-spin 0.7s linear infinite;
}
@keyframes server-switch-spin { to { transform: rotate(360deg); } }

.server-header-overlay {
  position: absolute;
  inset: 0;
  padding: 10px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.62), rgba(0, 0, 0, 0.08));
}

.server-header-name {
  font-size: 15px;
  font-weight: 800;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

.server-header-stats {
  font-size: 11px;
  color: #d1d5db;
}

.server-banner-preview {
  margin-top: 8px;
}

.server-banner-preview img {
  width: 100%;
  height: 80px;
  border-radius: 8px;
  border: 1px solid var(--border);
  object-fit: cover;
}

.sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
  padding: 0 6px;
  font-weight: 600;
}

.tab-buttons {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.tab {
  background: #2f3238;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.tab.active {
  background: var(--accent);
  border-color: var(--accent);
}

.tab-badge {
  min-width: 16px;
  height: 16px;
  border-radius: 999px;
  font-size: 10px;
  padding: 0 4px;
  display: grid;
  place-items: center;
  font-weight: 700;
}

.tab-badge.incoming {
  background: #ef4444;
  color: #fff;
}

.tab-badge.outgoing {
  background: #6b7280;
  color: #fff;
}

.list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-height: 0;
}

.list.small {
  font-size: 13px;
}

.pill {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 10px;
  background: transparent;
  border: none;
  border-radius: 8px;
  transition: background 0.15s;
}

.pill .meta {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.pill .meta .info {
  min-width: 0;
}

.pill .meta .info > div,
.pill .meta .info > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pill img:not(.voice-mini-avatar) {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  background: #111;
  flex-shrink: 0;
}

.pill.friend-item {
  cursor: pointer;
}

.pill.friend-item:hover {
  background: rgba(255,255,255,0.05);
}

.pill.friend-item.selected-chat {
  background: rgba(88,101,242,0.15);
  border-left: 2px solid var(--accent);
  padding-left: 8px;
}

.channel-item {
  cursor: pointer;
  position: relative;
  user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}

.channel-item.drag-armed {
  outline: 1px dashed #6d28d9;
  cursor: grab;
}

.channel-item.dragging-channel {
  cursor: grabbing;
}

.channel-item.drag-over-before::before {
  content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  top: -2px;
  height: 3px;
  border-radius: 999px;
  background: #8b5cf6;
  box-shadow: 0 0 0 1px rgba(139, 92, 246, 0.35);
}

.channel-item.drag-over-after::after {
  content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: -2px;
  height: 3px;
  border-radius: 999px;
  background: #8b5cf6;
  box-shadow: 0 0 0 1px rgba(139, 92, 246, 0.35);
}

.channel-in-category {
  margin-left: 12px;
  max-width: calc(100% - 12px);
  box-sizing: border-box;
}

/* ── Per-channel/category custom colors & font ── */
.channel-item {
  background: var(--ch-bg, transparent);
  color: var(--ch-text, inherit);
  font-family: var(--ch-font, inherit);
  transition: background 0.15s, color 0.15s;
}
.channel-item:hover {
  background: var(--ch-bg-hover, rgba(255,255,255,0.06)) !important;
}
.channel-item.selected-chat {
  background: var(--ch-bg-active, rgba(89,101,242,0.12)) !important;
}

.server-category-header {
  width: 100%;
  text-align: left;
  background: var(--ch-bg, transparent);
  border: none;
  color: var(--ch-text, #9ca3af);
  font-family: var(--ch-font, inherit);
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.server-category-header:hover {
  background: var(--ch-bg-hover, rgba(255,255,255,0.04));
  color: #d1d5db;
}

/* ── Voice channel limit badge ── */
.voice-limit-badge {
  display: inline-flex;
  align-items: center;
  padding: 1px 5px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 700;
  border: 1px solid rgba(165,180,252,0.3);
  color: #a5b4fc;
  background: rgba(89,101,242,0.1);
  margin-left: 4px;
  vertical-align: middle;
  letter-spacing: 0;
  text-transform: none;
}
.voice-limit-badge.voice-limit-full {
  border-color: rgba(239,68,68,0.4);
  color: #f87171;
  background: rgba(239,68,68,0.1);
}

.server-category-header.category-drop-target {
  border-color: #8b5cf6;
  box-shadow: 0 0 0 1px rgba(139, 92, 246, 0.35) inset;
}

#friend-list.channel-root-drop-target {
  outline: 1px dashed #8b5cf6;
  outline-offset: -2px;
  border-radius: 8px;
}

.channel-item .muted {
  font-size: 12px;
}

.voice-mini-avatars {
  margin-top: 5px;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 4px;
  max-width: 100%;
  overflow: hidden;
  line-height: 0;
}

.voice-mini-avatar {
  width: 22px !important;
  height: 22px !important;
  min-width: 22px;
  border-radius: 999px;
  object-fit: cover;
  border: 1px solid #3b3d42;
  background: #111;
  flex-shrink: 0;
}

.voice-mini-more {
  font-size: 11px;
  color: #9ca3af;
  margin-left: 2px;
  line-height: 1;
  flex-shrink: 0;
}

.channel-item {
  align-items: flex-start;
  min-height: 0;
  max-width: 100%;
  overflow: hidden;
  padding: 8px 10px;
}

.channel-item .meta {
  flex: 1;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
}

.channel-item .info {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
}

.channel-item .info > * {
  max-width: 100%;
}

.channel-name-line {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  max-width: 100%;
  font-size: 14px;
  line-height: 1.3;
}

.channel-name-line > span:first-child,
.channel-name-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.channel-type-hint {
  display: none;
}

.channel-side-badges {
  display: flex;
  align-items: center;
  gap: 3px;
  flex-shrink: 0;
  margin-top: 2px;
}

.server-settings-sidebar-title {
  display: none;
}

.ss-tab-ico {
  display: none;
}

.friend-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-left: 8px;
}

.chat-list-avatar-wrap {
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
}

.chat-list-avatar-wrap .status-dot {
  right: -1px;
  bottom: -1px;
  width: 11px;
  height: 11px;
  border-width: 2px;
}

.unread-badge {
  min-width: 20px;
  height: 20px;
  border-radius: 999px;
  background: #ef4444;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  display: grid;
  place-items: center;
  padding: 0 6px;
}

.profile {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: rgba(0,0,0,0.25);
  border-radius: 12px;
  position: relative;
  border: 1px solid rgba(255,255,255,0.04);
  backdrop-filter: blur(8px);
}

.profile-left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}

.profile-main {
  min-width: 0;
  flex: 1;
}

#panel-chats,
#panel-requests {
  min-height: 0;
  display: flex;
  flex-direction: column;
  flex: 1;
}

#friend-list,
#incoming-requests,
#outgoing-requests {
  overflow-x: hidden;
  overflow-y: auto;
  flex: 1;
  min-width: 0;
  max-width: 100%;
}

#friend-list {
  background: transparent;
  border-radius: 8px;
  padding-right: 2px;
}

#panel-chats,
#panel-requests,
.sidebar-section {
  min-width: 0;
  max-width: 100%;
  overflow-x: hidden;
}

.profile img {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  background: #0b0c0f;
}

.profile button {
  width: 32px;
  height: 32px;
  padding: 0;
}

.profile-left.clickable {
  cursor: pointer;
  /* Constant padding/margin so :hover only changes the background and the
     profile bar doesn't visibly grow / slide on hover. */
  border-radius: 6px;
  padding: 4px 6px;
  margin: -4px -6px;
}

.profile-left.clickable:hover {
  background: #1a1b20;
}

.profile-call-info.hidden,
.profile-call-info[hidden] {
  display: none !important;
}

.profile-call-ping,
.profile-call-duration {
  color: #aaa;
}

.profile-call-chat {
  color: #7c3aed;
  cursor: pointer;
  text-decoration: underline;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: auto;
}

.profile-call-chat:hover {
  color: #9d5ff0;
}

.chat-drag-over {
  outline: 2px dashed #8b5cf6;
  outline-offset: -6px;
}

.server-avatar-preview {
  margin-top: 10px;
  text-align: center;
}

.server-avatar-preview img {
  width: 80px;
  height: 80px;
  border-radius: 8px;
  object-fit: cover;
}

/* ── Server Create Modal Redesign ──────────────── */
.server-create-card {
  width: min(420px, 92vw);
  padding: 0;
  overflow: hidden;
  position: relative;
  border: none;
  border-radius: 16px;
  background: linear-gradient(170deg, #1f2126 0%, #181a1f 100%);
}

.server-create-close {
  position: absolute;
  top: 14px;
  right: 14px;
  bottom: auto;
  left: auto;
  margin: 0;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.1);
  color: var(--muted);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 10px;
  display: grid;
  place-items: center;
  transition: background 0.2s, color 0.2s;
  z-index: 20;
}

.server-create-close:hover {
  background: rgba(255,255,255,0.14);
  color: var(--text);
}

.server-create-header {
  text-align: center;
  padding: 32px 48px 0;
  position: relative;
}

.server-create-header::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 90px;
  background: linear-gradient(135deg, rgba(89, 101, 242, 0.15), rgba(143, 91, 255, 0.1));
  border-radius: 16px 16px 0 0;
}

.server-create-icon {
  font-size: 40px;
  margin-bottom: 8px;
  position: relative;
  z-index: 1;
  animation: server-create-bounce 2s ease infinite;
}

@keyframes server-create-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

.server-create-header h3 {
  margin: 4px 0 6px;
  font-size: 20px;
  font-weight: 700;
  position: relative;
  z-index: 1;
}

.server-create-header p {
  margin: 0 0 4px;
  line-height: 1.4;
  position: relative;
  z-index: 1;
}

.server-create-avatar-section {
  display: flex;
  justify-content: center;
  padding: 18px 0 8px;
}

.server-create-avatar-circle {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 2px dashed rgba(89, 101, 242, 0.5);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s, transform 0.15s;
  background: rgba(89, 101, 242, 0.06);
  position: relative;
  overflow: hidden;
}

.server-create-avatar-circle:hover {
  border-color: var(--accent);
  background: rgba(89, 101, 242, 0.12);
  transform: scale(1.05);
}

.server-create-avatar-circle img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  position: absolute;
  inset: 0;
}

.server-create-avatar-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.server-create-avatar-icon {
  font-size: 22px;
  opacity: 0.7;
}

.server-create-avatar-text {
  font-size: 10px;
  color: var(--muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.server-create-label {
  display: block;
  padding: 0;
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--muted);
}

.server-create-fields {
  padding: 4px 28px 0;
}

.server-create-fields input,
.server-create-card > input {
  display: block;
  width: 100%;
  margin: 0 0 8px;
  background: #0f1114;
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 15px;
  color: var(--text);
  transition: border-color 0.2s;
}

.server-create-card > input {
  width: calc(100% - 56px);
  margin: 0 28px 8px;
}

.server-create-fields input:focus,
.server-create-card > input:focus {
  border-color: var(--accent);
  outline: none;
}

.server-create-actions {
  padding: 16px 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.server-create-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 12px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: transform 0.12s, box-shadow 0.2s, background 0.2s;
}

.server-create-btn:hover {
  transform: translateY(-1px);
}

.server-create-btn:active {
  transform: translateY(0);
}

.server-create-btn.primary {
  background: linear-gradient(135deg, #5965f2, #7c3aed);
  color: #fff;
  box-shadow: 0 4px 16px rgba(89, 101, 242, 0.3);
}

.server-create-btn.primary:hover {
  box-shadow: 0 6px 24px rgba(89, 101, 242, 0.45);
  background: linear-gradient(135deg, #6370f5, #8b4ff0);
}

.server-create-btn.secondary {
  background: rgba(255,255,255,0.05);
  color: var(--text);
  border: 1px solid rgba(255,255,255,0.08);
}

.server-create-btn.secondary:hover {
  background: rgba(255,255,255,0.09);
  border-color: rgba(255,255,255,0.14);
}

.server-create-btn-icon {
  font-size: 16px;
}

.server-create-divider {
  display: flex;
  align-items: center;
  gap: 12px;
}

.server-create-divider-line {
  flex: 1;
  height: 1px;
  background: rgba(255,255,255,0.06);
}

.server-create-divider-text {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.avatar-wrap {
  position: relative;
}

.status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  position: absolute;
  right: -1px;
  bottom: -1px;
  border: 2px solid #111216;
  background: #22c55e;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 6px;
}

.status-dot.mobile {
  width: 12px;
  height: 12px;
}

.status-dot.mobile::after {
  content: "";
  position: absolute;
  width: 5.5px;
  height: 8px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border: 1.15px solid #fff;
  border-radius: 1.5px;
  background: transparent;
  box-shadow: none;
  filter: none;
}

.status-dot.mobile::before {
  content: "";
  position: absolute;
  width: 2px;
  height: 1px;
  left: 50%;
  bottom: 1.4px;
  transform: translateX(-50%);
  background: #fff;
  border-radius: 1px;
  z-index: 1;
}

.status-online {
  background: #22c55e;
}

.status-away {
  background: #facc15;
}

.status-dnd {
  background: #ef4444;
}

.status-offline {
  background: #9ca3af;
}

/* ── Profile menu card (compact popup above the bar) ─────────────────────── */
.profile-menu {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: calc(100% + 8px);
  background: #1a1d24;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  min-width: 0;
  max-width: none;
  width: auto;
  display: flex;
  flex-direction: column;
  z-index: 120;
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(0,0,0,0.55), 0 2px 8px rgba(0,0,0,0.35);
}

.profile-menu.hidden {
  display: none !important;
}

.pm-banner {
  width: 100%;
  height: 28px;
  background: linear-gradient(135deg, #5965f2 0%, #7c3aed 100%);
  background-size: cover;
  background-position: center;
  flex-shrink: 0;
  border-radius: 14px 14px 0 0;
  overflow: hidden;
}

.pm-body {
  padding: 8px 10px 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: stretch;
}

.pm-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: -18px;
  position: relative;
  z-index: 2;
}

.pm-id {
  min-width: 0;
  flex: 1;
}

.pm-avatar {
  width: 40px !important;
  height: 40px !important;
  border-radius: 12px !important;
  object-fit: cover !important;
  border: 2px solid #1a1d24 !important;
  background: #2a2d35;
  display: block;
}

.pm-avatar-wrap .status-dot {
  bottom: 0;
  right: 0;
  width: 10px;
  height: 10px;
  border: 2px solid #1a1d24;
}

.pm-settings-btn {
  margin-top: 12px;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: #2a2d35;
  border: 1px solid rgba(255,255,255,0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  padding: 0;
  transition: background 0.15s, color 0.15s;
  flex-shrink: 0;
}

.pm-avatar-wrap {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
}

.pm-settings-btn:hover {
  background: #3a3d47;
  color: var(--text);
}

.pm-nickname {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.2;
  margin: 10px 0 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pm-username {
  font-size: 11px;
  margin: 1px 0 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pm-custom-status-row {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  width: 100%;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 8px;
  padding: 4px 8px;
  cursor: pointer;
  text-align: left;
  color: inherit;
}

.pm-custom-status-row:hover {
  background: rgba(255,255,255,0.07);
}

.pm-custom-status-text {
  font-size: 12px;
  color: var(--muted);
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pm-custom-status-text:empty::before {
  content: "Установить статус…";
  opacity: 0.4;
}

.pm-edit-status-btn {
  background: none;
  border: none;
  padding: 0;
  font-size: 13px;
  color: var(--muted);
  border-radius: 5px;
  opacity: 0.55;
  flex-shrink: 0;
  height: auto;
  width: auto;
  display: inline-flex;
}

.pm-custom-status-row:hover .pm-edit-status-btn {
  opacity: 1;
}

.pm-edit-status-btn:hover {
  background: transparent;
  color: var(--text);
}

.pm-custom-status-edit {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.pm-status-input {
  background: #12141a;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  padding: 7px 10px;
  font-size: 13px;
  color: var(--text);
  width: 100%;
  outline: none;
  transition: border-color 0.15s;
}

.pm-status-input:focus {
  border-color: rgba(89,101,242,0.6);
}

.pm-status-edit-actions {
  display: flex;
  gap: 6px;
}

.pm-btn-save {
  flex: 1;
  background: #5965f2;
  color: #fff;
  border: none;
  border-radius: 7px;
  padding: 6px 0;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  height: auto;
  transition: background 0.15s;
}

.pm-btn-save:hover { background: #4752c4; }

.pm-btn-cancel {
  background: rgba(255,255,255,0.06);
  color: var(--muted);
  border: none;
  border-radius: 7px;
  padding: 6px 12px;
  font-size: 13px;
  cursor: pointer;
  height: auto;
  transition: background 0.15s;
}

.pm-btn-cancel:hover { background: rgba(255,255,255,0.1); }

.pm-divider {
  height: 1px;
  background: rgba(255,255,255,0.07);
  margin: 2px 0;
}

.pm-status-grid,
#pm-status-dropdown {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  width: 100%;
  min-width: 0;
  background: transparent;
  border: none;
  box-shadow: none;
  margin: 0;
  padding: 0;
  overflow: visible;
}

.pm-status-option,
#pm-status-dropdown .pm-status-option {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  width: 100% !important;
  padding: 6px 8px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  color: var(--text) !important;
  background: rgba(255,255,255,0.045) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  text-align: left !important;
  height: auto !important;
  min-height: 30px !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
}

.pm-status-option:hover,
#pm-status-dropdown .pm-status-option:hover {
  background: rgba(255,255,255,0.09) !important;
}

.pm-status-option.active,
#pm-status-dropdown .pm-status-option.active {
  background: rgba(89,101,242,0.18) !important;
  border-color: rgba(89,101,242,0.35) !important;
  color: #c5caf8 !important;
}

.pm-pill-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.pm-pill-dot.online  { background: #3ba55d; }
.pm-pill-dot.away    { background: #faa61a; }
.pm-pill-dot.dnd     { background: #ed4245; }
.pm-pill-dot.offline { background: #747f8d; }

.status-selector-wrap {
  position: relative;
  width: 100%;
}

.menu-item {
  width: 100%;
  display: block;
  text-align: left;
  background: transparent;
  border: 1px solid transparent;
  padding: 10px 12px;
  border-radius: 8px;
  height: auto;
}

.profile-menu .menu-item {
  width: 100%;
  height: auto;
  min-height: 40px;
}

.menu-item:hover {
  background: #2a2d33;
}

.menu-settings-body {
  width: 100%;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  margin: 4px 0;
  padding: 8px 4px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.menu-settings-body input,
.menu-settings-body button {
  width: 100%;
  height: auto;
}

.menu-settings-body label {
  font-size: 12px;
  color: var(--muted);
}

.menu-settings-body input[type="range"],
.modal-card input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 8px;
  border-radius: 999px;
  background: #24133f;
  outline: none;
  border: none;
  padding: 0;
}

.menu-settings-body input[type="range"]::-webkit-slider-thumb,
.modal-card input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #8b5cf6;
  border: none;
  margin-top: -4px;
}

.menu-settings-body input[type="range"]::-webkit-slider-runnable-track,
.modal-card input[type="range"]::-webkit-slider-runnable-track {
  height: 8px;
  border-radius: 999px;
  background: #24133f;
}

.menu-settings-body input[type="range"]::-moz-range-track,
.modal-card input[type="range"]::-moz-range-track {
  height: 8px;
  border-radius: 999px;
  background: #24133f;
}

.menu-settings-body input[type="range"]::-moz-range-thumb,
.modal-card input[type="range"]::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #8b5cf6;
  border: none;
}

.content {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.topbar {
  padding: 0 16px;
  height: 52px;
  min-height: 52px;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  background: rgba(14,16,21,0.95);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

#btn-admin-panel {
  position: fixed;
  top: 10px;
  right: 10px;
  z-index: 1300;
}

.admin-user-row {
  cursor: pointer;
}

.admin-user-row.active {
  border-color: #3b82f6;
  background: #1f2f58;
}

.search {
  display: flex;
  gap: 8px;
}

#panel-requests .search input {
  width: 130px;
}

#btn-search {
  background: #22c55e;
  border-color: #16a34a;
  color: #04140a;
  font-weight: 800;
  min-width: 42px;
  padding: 0 10px;
}

#btn-search:hover {
  background: #34d399;
}

.friend-request-feedback {
  min-height: 16px;
  margin: 6px 2px 2px;
}

.friend-request-feedback.success {
  color: #22c55e;
}

.friend-request-feedback.error {
  color: #ef4444;
}

.chip-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.chip {
  background: #23252a;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 6px 10px;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.chip button {
  padding: 4px 8px;
  font-size: 12px;
}

.content-body {
  display: flex;
  flex: 1;
  gap: 10px;
  padding: 10px 12px 12px;
  min-height: 0;
  overflow: hidden;
}

button.nav-brand {
  appearance: none;
  border: none;
  background: transparent;
  cursor: pointer;
  font: inherit;
  color: inherit;
}
button.nav-brand .brand-icon {
  border: 2px solid rgba(159, 232, 212, 0.5);
}
button.nav-brand.active .brand-icon,
html[data-design="new"] button.nav-brand.active .brand-icon {
  border-color: #9fe8d4;
  box-shadow: 0 0 0 3px rgba(31, 191, 154, 0.28), 0 8px 20px rgba(31, 191, 154, 0.32);
}
.nav-brand-version {
  display: none !important;
}
.home-requests-box {
  padding: 10px 12px 4px;
}
.home-requests-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.home-request-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.05);
}
.home-request-ava {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  object-fit: cover;
  flex-shrink: 0;
}
.home-request-meta {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.home-request-name {
  font-size: 13px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.home-request-sub {
  font-size: 11px;
  color: #8b93a1;
}
.home-request-actions {
  display: flex;
  gap: 4px;
}
.home-request-actions button {
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.07);
  color: #eef1f4;
  cursor: pointer;
}

.friends-home {
  flex: 1;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: rgba(12, 16, 22, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 16px;
  overflow: hidden;
}
.friends-home.hidden { display: none !important; }
.friends-home-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  flex-wrap: wrap;
}
.friends-home-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 18px;
  font-weight: 750;
}
.friends-home-add {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 260px;
  flex: 1;
  max-width: 420px;
}
.friends-home-add-input {
  flex: 1;
  min-width: 0;
  height: 38px;
  padding: 0 12px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.25);
  color: #eef1f4;
  font-size: 14px;
}
.friends-home-add-btn {
  height: 38px;
  padding: 0 14px;
  border: none;
  border-radius: 10px;
  background: rgba(31, 191, 154, 0.2);
  color: #9fe8d4;
  font-weight: 700;
  cursor: pointer;
}
.friends-home-add-feedback {
  padding: 0 18px 8px;
  font-size: 13px;
  min-height: 0;
}
.friends-home-add-feedback.success { color: #7ee8cb; }
.friends-home-add-feedback.error { color: #f0a0a0; }
.friends-home-section-title {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8b93a1;
  padding: 4px 2px 2px;
}
.friends-home-tabs {
  display: flex;
  gap: 6px;
}
.friends-home-tab {
  height: 34px;
  padding: 0 12px;
  border: none;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  color: #c5cad6;
  font-size: 13px;
  font-weight: 650;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.friends-home-tab.active {
  background: rgba(31, 191, 154, 0.16);
  color: #e8fff8;
}
.friends-home-badge {
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: #e85d5d;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  display: grid;
  place-items: center;
}
.friends-home-badge.hidden { display: none !important; }
.friends-home-requests {
  flex: 0 0 auto;
  padding: 12px 16px 4px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.friends-home-list {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 12px 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.friends-home-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 64px;
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.03);
  color: inherit;
  text-align: left;
}
.friends-home-row:hover {
  background: rgba(255, 255, 255, 0.055);
}
.friends-home-ava {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  object-fit: cover;
  flex-shrink: 0;
}
.friends-home-meta { flex: 1; min-width: 0; }
.friends-home-name { font-weight: 700; }
.friends-home-sub { font-size: 12px; color: #8b93a1; }
.friends-home-empty {
  padding: 28px 12px;
  text-align: center;
  color: #8b93a1;
}
.friends-home-empty.slim { padding: 8px 4px 4px; text-align: left; }
.friends-home-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.friends-home-act {
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.07);
  color: #eef1f4;
  display: grid;
  place-items: center;
  cursor: pointer;
}
.friends-home-act:hover { background: rgba(31, 191, 154, 0.2); color: #9fe8d4; }
.friends-home-act.ok:hover { background: rgba(34, 197, 94, 0.22); color: #86efac; }
.friends-home-act.danger:hover { background: rgba(232, 93, 93, 0.22); color: #fca5a5; }

.settings {
  height: fit-content;
}

.status-menu {
  position: absolute;
  left: 0;
  right: auto;
  min-width: 320px;
  bottom: calc(100% + 8px);
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px;
  background: #2a2d33;
  border: 1px solid #454a52;
  border-radius: 10px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.38);
  z-index: 40;
}

.status-menu button {
  background: #353b45;
  text-align: left;
  min-height: 46px;
  font-size: 15px;
  border-radius: 8px;
  padding: 10px 12px;
  width: 100%;
  white-space: nowrap;
}

.status-menu button:hover {
  background: #434b58;
}

.custom-status-emoji-row {
  display: flex;
  gap: 8px;
}

.custom-status-emoji-row input {
  width: 80px;
  text-align: center;
}

/* ── Channel Editor Redesign ──────────────── */
.channel-editor-card {
  width: min(960px, 96vw);
  min-width: min(700px, 96vw);
  padding: 0;
  overflow: visible;
  position: relative;
  border: none;
  border-radius: 16px;
  background: linear-gradient(170deg, #1f2126 0%, #181a1f 100%);
}

.channel-editor-close {
  position: absolute;
  top: 14px;
  right: 14px;
  margin: 0;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.1);
  color: var(--muted);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 10px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  z-index: 20;
  transition: background 0.2s, color 0.2s;
}

.channel-editor-close:hover {
  background: rgba(255,255,255,0.14);
  color: var(--text);
}

.channel-editor-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 56px 16px 24px;
  position: relative;
}

.channel-editor-header::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 60px;
  background: linear-gradient(135deg, rgba(89, 101, 242, 0.12), rgba(143, 91, 255, 0.08));
  border-radius: 16px 16px 0 0;
  pointer-events: none;
}

.channel-editor-header-icon {
  font-size: 22px;
  position: relative;
  z-index: 1;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.05);
  flex-shrink: 0;
}

.channel-editor-header h3 {
  margin: 0;
  font-size: 19px;
  font-weight: 700;
  position: relative;
  z-index: 1;
}

.channel-editor-label {
  display: block;
  padding: 8px 0 4px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--muted);
}

/* ── Channel Editor Tabs Layout ── */
.ch-editor-layout {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  min-height: 520px;
  padding: 0;
}
.ch-editor-sidebar {
  border-right: 1px solid rgba(255,255,255,0.06);
  padding: 16px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: rgba(0,0,0,0.08);
}
.ch-editor-sidebar-title {
  margin: 0 8px 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.ch-editor-tab {
  text-align: left;
  border-radius: 8px;
  padding: 9px 12px;
  font-size: 13px;
  font-weight: 500;
  background: transparent;
  color: var(--muted);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: background 0.15s, color 0.15s;
}
.ch-editor-tab-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: rgba(255,255,255,0.04);
  color: inherit;
  flex-shrink: 0;
}
.ch-editor-tab:hover { background: rgba(255,255,255,0.04); color: var(--text); }
.ch-editor-tab.active {
  background: rgba(89,101,242,0.12);
  color: #a5b4fc;
  font-weight: 600;
}
.ch-editor-content {
  padding: 22px 26px;
  overflow-y: auto;
  max-height: 680px;
}
.ch-tab-pane { display: flex; flex-direction: column; gap: 14px; }
.ch-tab-pane.hidden { display: none; }

@media (max-width: 760px) {
  .channel-editor-card {
    width: 94vw;
    min-width: 0;
  }
  .ch-editor-layout {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .ch-editor-sidebar {
    flex-direction: row;
    flex-wrap: wrap;
    border-right: none;
    border-bottom: 1px solid rgba(255,255,255,0.06);
  }
  .ch-editor-sidebar-title {
    width: 100%;
    margin: 0 4px 4px;
  }
  .ch-editor-tab {
    flex: 1;
    justify-content: center;
  }
  .channel-editor-type-buttons {
    flex-direction: column;
  }
}
.ch-roles-hint {
  margin: 0;
  padding: 0 0 4px;
  font-size: 11px;
  color: var(--muted);
  opacity: 0.7;
}
.ch-roles-create-notice {
  padding: 20px;
  text-align: center;
  font-size: 13px;
  color: var(--muted);
  opacity: 0.6;
}
.ch-roles-create-notice.hidden { display: none; }

.channel-editor-type-buttons {
  display: flex;
  gap: 12px;
  padding: 0;
  margin-bottom: 8px;
}

.channel-editor-type-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 18px 14px;
  border-radius: 12px;
  background: rgba(255,255,255,0.03);
  border: 2px solid rgba(255,255,255,0.06);
  color: var(--text);
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s, transform 0.12s;
}

.channel-editor-type-btn:hover {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.12);
  transform: translateY(-1px);
}

.channel-editor-type-btn.active {
  background: rgba(89, 101, 242, 0.1);
  border-color: var(--accent);
  box-shadow: 0 0 12px rgba(89, 101, 242, 0.15);
}

.channel-editor-type-icon {
  font-size: 22px;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,0.04);
}

.channel-editor-type-name {
  font-size: 14px;
  font-weight: 600;
}

.channel-editor-type-desc {
  font-size: 11px;
  text-align: center;
}

.channel-editor-name-row {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 0;
}

.channel-editor-emoji-btn {
  width: 48px;
  height: 48px;
  min-width: 48px;
  border-radius: 12px;
  background: rgba(255,255,255,0.04);
  border: 2px dashed rgba(89, 101, 242, 0.4);
  display: grid;
  place-items: center;
  font-size: 22px;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s, transform 0.12s;
}

.channel-editor-emoji-btn:hover {
  border-color: var(--accent);
  background: rgba(89, 101, 242, 0.08);
  transform: scale(1.05);
}

.channel-editor-name-wrap {
  flex: 1;
  position: relative;
}

.channel-editor-name-wrap input {
  width: 100%;
  background: #0f1114;
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px;
  padding: 12px 48px 12px 14px;
  font-size: 15px;
  color: var(--text);
  transition: border-color 0.2s;
}

.channel-editor-name-wrap input:focus {
  border-color: var(--accent);
  outline: none;
}

.channel-editor-name-count {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 11px;
  pointer-events: none;
}

.channel-editor-actions {
  padding: 16px 24px 22px;
}

.channel-editor-save-btn {
  width: 100%;
  padding: 12px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
  border: none;
  background: linear-gradient(135deg, #5965f2, #7c3aed);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(89, 101, 242, 0.3);
  transition: transform 0.12s, box-shadow 0.2s;
}

.channel-editor-save-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 24px rgba(89, 101, 242, 0.45);
}

.channel-emoji-picker {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 24px;
  z-index: 200;
  width: 320px;
  max-height: 300px;
  border-radius: 12px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.5);
}

.custom-status-emoji-palette {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.custom-status-emoji-palette button {
  width: 40px;
  height: 40px;
  padding: 0;
  font-size: 18px;
  background: #23252a;
}

.app-settings-card {
  width: min(940px, 96vw) !important;
  max-height: 86vh;
  padding: 0;
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  background: #1a1c22;
  border: none;
}

.app-settings-close {
  position: absolute;
  right: 14px;
  top: 14px;
  z-index: 10;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.1);
  color: var(--muted);
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s;
}

.app-settings-close:hover {
  background: rgba(255,255,255,0.14);
  color: var(--text);
}

.app-settings-layout {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  min-height: 620px;
  max-height: 86vh;
}

.app-settings-sidebar {
  border-right: 1px solid rgba(255,255,255,0.06);
  background: #14151a;
  padding: 24px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow-y: auto;
}

.app-settings-sidebar-section-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  padding: 10px 10px 4px;
  margin-top: 4px;
}

.app-settings-sidebar .settings-tab-btn {
  text-align: left;
  border-radius: 8px;
  padding: 9px 12px;
  font-size: 14px;
  font-weight: 500;
  background: transparent;
  color: var(--muted);
  border: none;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: background 0.15s, color 0.15s;
  width: 100%;
  height: auto;
}

.app-settings-sidebar .settings-tab-btn:hover {
  background: rgba(255,255,255,0.05);
  color: var(--text);
}

.app-settings-sidebar .settings-tab-btn.active {
  background: rgba(89,101,242,0.15);
  color: #818cf8;
}

.settings-sidebar-danger {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,0.06);
}

.settings-danger-btn {
  background: transparent;
  color: #f87171;
  border: none;
  text-align: left;
  border-radius: 8px;
  padding: 9px 12px;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: background 0.15s;
  width: 100%;
  height: auto;
}

.settings-danger-btn:hover {
  background: rgba(239,68,68,0.1);
}

.app-settings-content {
  padding: 28px 36px;
  overflow-y: auto;
  max-height: 86vh;
}

/* ── Settings account profile preview (banner + avatar) ── */
.settings-profile-preview {
  position: relative;
  margin-bottom: 52px;
}

.settings-banner-wrap {
  position: relative;
  height: 120px;
  border-radius: 12px;
  overflow: hidden;
  background: linear-gradient(135deg, #5965f2 0%, #7c3aed 100%);
  margin-bottom: 0;
}

.settings-banner {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
}

.settings-banner-actions {
  position: absolute;
  bottom: 8px;
  right: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.settings-banner-change-btn {
  background: rgba(0,0,0,0.6);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 8px;
  padding: 5px 10px;
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  backdrop-filter: blur(4px);
  height: auto;
  width: auto;
  transition: background 0.15s;
}

.settings-banner-change-btn:hover { background: rgba(0,0,0,0.8); }

.settings-banner-remove-btn {
  background: rgba(220,38,38,0.7);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 5px 9px;
  font-size: 13px;
  cursor: pointer;
  backdrop-filter: blur(4px);
  height: auto;
  width: auto;
  transition: background 0.15s;
}

.settings-banner-remove-btn:hover { background: rgba(220,38,38,0.95); }

.settings-avatar-over-banner {
  position: absolute;
  bottom: -44px;
  left: 16px;
}

.settings-account-avatar-wrap {
  position: relative;
  display: inline-flex;
}

.settings-account-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  border: 5px solid #1a1c22;
  background: #2a2d35;
  display: block;
}

.settings-avatar-change-btn-overlay {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: rgba(0,0,0,0);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: transparent;
  transition: background 0.15s, color 0.15s;
  width: 100%;
  height: 100%;
  padding: 0;
}

.settings-avatar-change-btn-overlay:hover {
  background: rgba(0,0,0,0.55);
  color: #fff;
}

.settings-account-fields-col {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}

.settings-label-hint {
  font-size: 11px;
  color: var(--muted);
  font-weight: 400;
}

.settings-account-actions {
  display: flex;
  gap: 10px;
  margin-top: 20px;
}

.settings-account-actions .btn-primary {
  background: #5965f2;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
  height: auto;
}

.settings-account-actions .btn-primary:hover { background: #4752c4; }

.settings-account-actions .btn-secondary {
  background: rgba(255,255,255,0.06);
  color: var(--muted);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  padding: 10px 18px;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.15s;
  height: auto;
}

.settings-account-actions .btn-secondary:hover {
  background: rgba(255,255,255,0.1);
  color: var(--text);
}

/* ── Banner crop modal ─────────────────────────────────── */
#app-settings-modal {
  z-index: 80; /* settings modal sits above basic modals but below crop modals */
}

#banner-crop-modal {
  z-index: 400 !important; /* must be above everything — settings modal, avatar crop, etc. */
}

.banner-crop-card {
  width: min(640px, 95vw) !important;
  max-height: 90vh;
  overflow-y: auto;
}

/* ── Banner crop canvas: must be a WIDE RECTANGLE, not the 260×260 square ── */
/* Using !important to beat the later .modal-card canvas rule */
#banner-crop-canvas,
#banner-crop-modal .modal-card canvas {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 560 / 200 !important;
  border-radius: 10px !important;
  max-width: 100% !important;
  cursor: grab !important;
  display: block !important;
  margin: 8px 0 !important;
}

#banner-crop-canvas:active,
#banner-crop-modal .modal-card canvas:active {
  cursor: grabbing !important;
}

.banner-crop-gif-preview {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
}

.server-settings-card {
  width: min(1060px, 96vw) !important;
  max-height: 90vh;
  padding: 0;
  overflow: hidden;
  position: relative;
  border: none;
  border-radius: 16px;
  background: linear-gradient(170deg, #1f2126 0%, #181a1f 100%);
}

.server-settings-layout {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  min-height: 580px;
  height: calc(90vh - 0px);
  max-height: 90vh;
}

.server-settings-sidebar {
  border-right: 1px solid rgba(255,255,255,0.06);
  background: rgba(0,0,0,0.15);
  padding: 20px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-radius: 16px 0 0 16px;
}

.server-settings-sidebar .settings-tab-btn {
  text-align: left;
  border-radius: 8px;
  padding: 9px 14px;
  font-size: 14px;
  font-weight: 500;
  background: transparent;
  color: var(--muted);
  border: none;
  transition: background 0.15s, color 0.15s;
}

.server-settings-sidebar .settings-tab-btn:hover:not(:disabled) {
  background: rgba(255,255,255,0.05);
  color: var(--text);
}

.server-settings-sidebar .settings-tab-btn.active {
  background: rgba(89, 101, 242, 0.12);
  color: #a5b4fc;
  font-weight: 600;
}

.server-settings-sidebar .settings-tab-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.server-settings-content {
  padding: 28px 32px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
  height: 100%;
}

.server-settings-content h3 {
  margin: 0 0 4px;
  font-size: 22px;
  font-weight: 700;
}

.server-settings-content label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--muted);
  margin-bottom: -8px;
}

.server-settings-content input[type="text"],
.server-settings-content input:not([type]) {
  background: #0f1114;
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 15px;
  color: var(--text);
  transition: border-color 0.2s;
}

.server-settings-content input:focus {
  border-color: var(--accent);
  outline: none;
}

.server-settings-content button:not(.app-settings-close):not(.settings-tab-btn) {
  border-radius: 8px;
  font-weight: 600;
  font-size: 14px;
  transition: transform 0.12s, box-shadow 0.2s, background 0.2s;
}

.server-settings-content button:not(.app-settings-close):not(.settings-tab-btn):hover {
  transform: translateY(-1px);
}

.server-settings-content .modal-actions {
  margin-top: 8px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,0.06);
}

.server-settings-content .modal-actions button {
  padding: 9px 20px;
  border-radius: 8px;
  font-weight: 600;
}

.server-settings-content .server-avatar-preview {
  margin-top: 4px;
}

.server-settings-content .server-avatar-preview img {
  border-radius: 50%;
  border: 2px solid rgba(89, 101, 242, 0.3);
}

.server-settings-content .server-banner-preview {
  margin-top: 4px;
}

.server-settings-content .server-banner-preview img {
  height: 100px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.06);
  object-fit: cover;
}

/* ── Server Settings Tabs ──────────────── */
.ss-tab-pane { display: flex; flex-direction: column; gap: 14px; }
.ss-tab-pane.hidden { display: none; }

/* ── Roles Tab Layout ──────────────────── */
.roles-layout {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 0;
  height: 100%;
  min-height: 500px;
}
.roles-sidebar {
  border-right: 1px solid rgba(255,255,255,0.06);
  padding: 0 16px 16px 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow-y: auto;
  max-height: calc(90vh - 60px);
}
.roles-sidebar::-webkit-scrollbar { width: 4px; }
.roles-sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 2px; }
.roles-sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--muted);
  padding: 4px 0 10px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.roles-add-btn {
  width: 26px; height: 26px;
  border-radius: 50%;
  border: none;
  background: rgba(89,101,242,0.15);
  color: #a5b4fc;
  font-size: 16px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.18s;
}
.roles-add-btn:hover { background: rgba(89,101,242,0.3); transform: scale(1.1); }
.roles-auto-role {
  display: flex; flex-direction: column; gap: 8px;
  padding: 12px;
  background: rgba(255,255,255,0.02);
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.05);
  position: relative;
}
.roles-auto-role > label {
  font-size: 10px !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--muted) !important;
  margin: 0 !important;
}
.roles-auto-role-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
  width: 100%;
  text-align: left;
}
.roles-auto-role-btn:hover {
  background: rgba(89,101,242,0.1);
  border-color: rgba(89,101,242,0.3);
  box-shadow: 0 0 0 2px rgba(89,101,242,0.1);
}
.roles-auto-role-btn.open {
  background: rgba(89,101,242,0.12);
  border-color: rgba(89,101,242,0.5);
  box-shadow: 0 0 0 3px rgba(89,101,242,0.12);
}
.roles-auto-role-btn span {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.roles-auto-role-chevron {
  flex-shrink: 0;
  color: var(--muted);
  transition: transform 0.2s;
}
.roles-auto-role-btn.open .roles-auto-role-chevron {
  transform: rotate(180deg);
}
.roles-auto-role-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: #1a1c22;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.55);
  z-index: 120;
  overflow: hidden;
  padding: 5px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  animation: ctx-in 0.12s ease-out;
  max-height: 200px;
  overflow-y: auto;
}
.roles-auto-role-menu::-webkit-scrollbar { width: 4px; }
.roles-auto-role-menu::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 2px; }
.roles-auto-role-menu.hidden { display: none; }
.roles-auto-role-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
  color: var(--text);
  transition: background 0.12s;
}
.roles-auto-role-item:hover {
  background: rgba(89,101,242,0.12);
}
.roles-auto-role-item.selected {
  background: rgba(89,101,242,0.18);
  color: #a5b4fc;
  font-weight: 600;
}
.roles-auto-role-item .auto-role-check {
  width: 16px; height: 16px;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  color: #a5b4fc;
}
.roles-auto-role-item .auto-role-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.roles-list {
  display: flex; flex-direction: column; gap: 3px;
  overflow-y: auto; flex: 1;
  padding-right: 2px;
}
.roles-list::-webkit-scrollbar { width: 4px; }
.roles-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 2px; }
.role-list-item {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s;
  font-size: 13px;
  color: #d1d5db;
  border: 1px solid transparent;
  user-select: none;
}
.role-list-item:hover { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.04); }
.role-list-item.active { background: rgba(89,101,242,0.1); border-color: rgba(89,101,242,0.25); color: #a5b4fc; }
.role-list-item.dragging { opacity: 0.35; transform: scale(0.97); }
.role-list-item .role-dot {
  width: 12px; height: 12px;
  border-radius: 50%; flex-shrink: 0;
  box-shadow: 0 0 6px rgba(0,0,0,0.3);
}
.role-list-item .role-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.role-list-icon { width: 16px; height: 16px; border-radius: 4px; object-fit: cover; flex-shrink: 0; }
.role-list-emoji { font-size: 14px; flex-shrink: 0; width: 16px; text-align: center; }
.role-drag-handle {
  font-size: 11px; color: rgba(255,255,255,0.12);
  cursor: grab; user-select: none; flex-shrink: 0;
  letter-spacing: -1px;
  transition: color 0.15s;
}
.role-list-item:hover .role-drag-handle { color: rgba(255,255,255,0.3); }
.role-drag-handle:active { cursor: grabbing; color: rgba(89,101,242,0.6); }
.role-badge-default {
  font-size: 9px;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(89,101,242,0.1);
  color: #a5b4fc;
  font-weight: 600;
}

/* ── Role Editor ───────────────────────── */
.role-editor {
  padding-left: 22px;
  display: flex; flex-direction: column; gap: 16px;
  overflow-y: auto; max-height: calc(90vh - 60px);
}
.role-editor::-webkit-scrollbar { width: 4px; }
.role-editor::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 2px; }
.role-editor.hidden { display: none; }
.role-editor h4 {
  margin: 0; font-size: 18px; font-weight: 700;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  color: var(--text);
}
.role-editor-section {
  display: flex; flex-direction: column; gap: 8px;
  padding: 14px 16px;
  background: rgba(255,255,255,0.02);
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.04);
}
.role-editor-section label {
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.8px;
  color: var(--muted);
}
.role-editor-section input[type="text"],
.role-editor-section input:not([type]) {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  color: var(--text);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 14px;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.role-editor-section input:focus {
  border-color: rgba(89,101,242,0.4);
  box-shadow: 0 0 0 3px rgba(89,101,242,0.08);
}
.role-color-picker {
  display: flex; align-items: center; gap: 12px;
}
.role-color-picker input[type="color"] {
  width: 40px; height: 40px;
  border: 2px solid rgba(255,255,255,0.1);
  border-radius: 10px;
  padding: 2px;
  cursor: pointer;
  background: transparent;
  transition: border-color 0.15s;
}
.role-color-picker input[type="color"]:hover { border-color: rgba(255,255,255,0.2); }
.role-icon-row {
  display: flex; align-items: center; gap: 10px;
}
.role-icon-pick-btn {
  width: 38px; height: 38px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.03);
  font-size: 18px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.15s;
}
.role-icon-pick-btn:hover { background: rgba(89,101,242,0.1); border-color: rgba(89,101,242,0.25); }
.role-icon-preview {
  font-size: 22px;
  display: flex; align-items: center;
}
.role-icon-preview img {
  width: 26px; height: 26px;
  border-radius: 6px; object-fit: contain;
  background: transparent;
}
.role-icon-clear-btn {
  width: 24px; height: 24px;
  border-radius: 50%;
  border: none;
  background: rgba(255,60,60,0.1);
  color: #ff6b6b;
  font-size: 11px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.15s;
}
.role-icon-clear-btn:hover { background: rgba(255,60,60,0.25); transform: scale(1.1); }
.role-icon-emoji-picker {
  position: relative;
  bottom: auto; right: auto;
  margin-top: 4px;
  width: 100%; max-width: 320px;
}

/* ── Permissions Grid ──────────────────── */
.role-perms-grid {
  display: flex; flex-direction: column; gap: 2px;
}
.role-perms-group-title {
  margin: 12px 4px 4px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #8b93a7;
}
.role-perms-group-title:first-child { margin-top: 2px; }

/* ── Integrations tab ───────────────────── */
.integration-card {
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  background: rgba(255,255,255,0.02);
  overflow: hidden;
}
.integration-card-head {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px;
}
.integration-card-icon { font-size: 24px; line-height: 1; }
.integration-card-info { flex: 1; min-width: 0; }
.integration-card-title { font-size: 14px; font-weight: 600; color: #e6e8ef; }
.integration-card-body {
  padding: 4px 16px 16px;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.integration-channels-label { margin: 12px 0 8px; }
.integration-channels-list { display: flex; flex-direction: column; gap: 2px; }
.integration-channel-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 12px; border-radius: 8px;
  background: rgba(255,255,255,0.015);
}
.integration-channel-row:hover { background: rgba(255,255,255,0.04); }
.integration-channel-name { font-size: 13px; color: #d1d5db; }
.role-perm-toggle.disabled { opacity: 0.4; cursor: not-allowed; }

/* ── Music channel tag in channel list ──── */
.channel-music-tag,
.pill .meta .info > .channel-music-tag {
  display: flex !important;
  align-items: center;
  gap: 5px;
  margin-top: 3px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  font-size: 11px;
  font-weight: 600;
  color: #c7b3ff;
  opacity: 1;
  white-space: nowrap;
  overflow: hidden;
  line-height: 1.25;
}
.channel-music-note {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border-radius: 4px;
  background: rgba(139, 109, 255, 0.16);
  color: #c4b5ff;
  flex-shrink: 0;
}
.channel-music-note svg {
  display: block;
}
.channel-music-tag.idle .channel-music-title,
.channel-music-tag:not(.playing) .channel-music-title,
.channel-music-title {
  display: block !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  flex: 1;
}
.channel-music-tag.playing {
  color: #8b6dff;
}
.channel-music-tag.playing .channel-music-note {
  background: rgba(139, 109, 255, 0.28);
}
.channel-music-tag.playing .channel-music-note {
  animation: music-note-pulse 1s ease-in-out infinite;
}
@keyframes music-note-pulse {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

/* ── Music player window ─────────────────── */
:root { --music-accent: #8b6dff; }
.music-player {
  position: fixed;
  z-index: 5000;
  width: 330px;
  height: 470px;
  min-width: 300px;
  display: flex;
  flex-direction: column;
  background: #16181f;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.55);
  overflow: hidden;
  user-select: none;
  transform-origin: top right;
}
/* Открытие */
.music-player.opening { animation: music-pop 0.24s cubic-bezier(0.34,1.4,0.64,1) both; }
@keyframes music-pop {
  0% { opacity: 0; transform: scale(0.9) translateY(-6px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}
/* Сворачивание */
.music-player-body {
  flex: 1; overflow-y: auto; padding: 14px;
  display: flex; flex-direction: column; gap: 12px;
  transition: max-height 0.26s ease, opacity 0.2s ease, padding 0.26s ease;
  max-height: 1200px;
}
.music-player.collapsed { height: auto !important; }
.music-player.collapsed .music-player-body {
  max-height: 0; opacity: 0; padding-top: 0; padding-bottom: 0; overflow: hidden;
}
.music-player.collapsed .music-resize-handle { display: none; }
.music-player.collapsed .music-player-icon-btn svg { transform: rotate(180deg); }
.music-player-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px;
  background: linear-gradient(90deg, rgba(139,109,255,0.25), rgba(139,109,255,0.04));
  cursor: grab;
  touch-action: none;
  flex-shrink: 0;
}
.music-player-header:active { cursor: grabbing; }
.music-player-title {
  font-size: 13px; font-weight: 700; color: #eef0f6;
  display: inline-flex; align-items: center; gap: 6px;
}
.music-player-dot { color: var(--music-accent); font-size: 15px; }
.music-player-icon-btn {
  width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center;
  border: none; border-radius: 7px;
  background: rgba(255,255,255,0.06);
  color: #cfd3e0; cursor: pointer;
}
.music-player-icon-btn svg { transition: transform 0.26s ease; }
.music-player-icon-btn:hover { background: rgba(255,255,255,0.14); color: #fff; }

.music-main { display: flex; flex-direction: column; gap: 12px; }
.music-now { display: flex; align-items: center; gap: 12px; }
.music-artwork-wrap {
  width: 56px; height: 56px; border-radius: 10px; flex-shrink: 0; overflow: hidden;
  background: linear-gradient(135deg, rgba(139,109,255,0.35), rgba(139,109,255,0.1));
  display: flex; align-items: center; justify-content: center;
}
.music-artwork { width: 100%; height: 100%; object-fit: cover; display: block; }
.music-artwork-wrap.empty img { display: none; }
.music-artwork-wrap.empty::after { content: "♪"; color: rgba(255,255,255,0.55); font-size: 22px; }
.music-now-info { min-width: 0; flex: 1; }
.music-track-title {
  font-size: 14px; font-weight: 600; color: #eef0f6;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.music-track-artist {
  font-size: 12px; color: #9aa1b3; margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Sliders (общие для прогресса и громкости) */
.music-slider {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 6px; border-radius: 999px; margin: 0;
  background: linear-gradient(to right, var(--music-accent) 0%, var(--music-accent) var(--val, 0%), rgba(255,255,255,0.12) var(--val, 0%), rgba(255,255,255,0.12) 100%);
  cursor: pointer; outline: none;
}
.music-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 13px; height: 13px; border-radius: 50%;
  background: #fff; border: none; box-shadow: 0 1px 4px rgba(0,0,0,0.5);
  transition: transform 0.12s;
}
.music-slider::-webkit-slider-thumb:hover { transform: scale(1.2); }
.music-slider::-moz-range-thumb {
  width: 13px; height: 13px; border-radius: 50%; border: none;
  background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,0.5);
}
.music-slider::-moz-range-track { height: 6px; border-radius: 999px; background: transparent; }
.music-slider:disabled { opacity: 0.5; cursor: not-allowed; }

.music-progress-row { display: flex; align-items: center; gap: 8px; }
.music-progress { flex: 1; }
.music-time { font-size: 11px; color: #8b93a7; min-width: 32px; font-variant-numeric: tabular-nums; }
.music-time:last-child { text-align: right; }

.music-controls {
  display: flex; align-items: center; justify-content: center; gap: 8px;
}
.music-ctrl-btn {
  width: 38px; height: 34px; border: none; border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.05); color: #d8dae4; cursor: pointer;
  transition: background 0.14s, color 0.14s, transform 0.1s;
}
.music-ctrl-btn:hover:not(:disabled) { background: rgba(255,255,255,0.13); color: #fff; }
.music-ctrl-btn:active:not(:disabled) { transform: scale(0.93); }
.music-ctrl-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.music-ctrl-btn.active { color: var(--music-accent); background: rgba(139,109,255,0.16); }
.music-ctrl-btn.loop-one { position: relative; }
.music-ctrl-btn.loop-one::after {
  content: "1"; position: absolute; font-size: 8px; font-weight: 700;
  background: var(--music-accent); color: #fff; border-radius: 50%;
  width: 11px; height: 11px; display: flex; align-items: center; justify-content: center;
  right: 5px; bottom: 4px;
}
.music-ctrl-play {
  width: 44px; height: 40px; background: var(--music-accent); color: #fff;
}
.music-ctrl-play:hover:not(:disabled) { background: #9c82ff; }

.music-vol-row { display: flex; align-items: center; gap: 10px; }
.music-vol-ico { font-size: 14px; width: 18px; text-align: center; flex-shrink: 0; opacity: 0.85; }
.music-vol-row .music-slider { flex: 1; }
.music-vol-val {
  font-size: 11px; color: #9aa1b3; min-width: 34px; text-align: right;
  font-variant-numeric: tabular-nums; flex-shrink: 0;
}

.music-add-row { display: flex; gap: 6px; align-items: center; }
.music-add-input {
  flex: 1; min-width: 0; padding: 8px 11px; font-size: 12px;
  border: 1px solid rgba(255,255,255,0.1); border-radius: 9px;
  background: rgba(255,255,255,0.04); color: #e6e8ef; outline: none;
}
.music-add-input:focus { border-color: rgba(139,109,255,0.6); }
.music-add-input.hidden { display: none; }
.music-add-btn {
  width: 36px; height: 36px; flex-shrink: 0; border: none; border-radius: 9px;
  background: var(--music-accent); color: #fff; cursor: pointer; font-size: 18px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
}
.music-add-btn:hover { background: #9c82ff; }
.music-add-btn.music-add-req { background: rgba(255,255,255,0.06); }
.music-add-btn.music-add-req:hover { background: rgba(255,255,255,0.14); }
.music-add-btn.hidden { display: none; }

.music-error { font-size: 12px; color: #ff8b8b; padding: 2px 0; }
.music-error.hidden { display: none; }
.music-queue-title {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.05em; color: #8b93a7; margin-top: 2px;
  display: flex; align-items: center; gap: 6px;
}
.music-count {
  background: rgba(255,255,255,0.08); color: #cfd3e0; border-radius: 6px;
  padding: 1px 6px; font-size: 10px; letter-spacing: 0;
}
.music-requests, .music-queue { display: flex; flex-direction: column; gap: 4px; }
.music-track-row {
  display: flex; align-items: center; gap: 9px;
  padding: 6px 8px; border-radius: 9px; background: rgba(255,255,255,0.025);
  transition: background 0.12s;
}
.music-track-row:hover { background: rgba(255,255,255,0.05); }
.music-track-row.draggable { cursor: grab; }
.music-track-row.dragging { opacity: 0.5; }
.music-request-row { background: rgba(139,109,255,0.08); }
.music-thumb {
  width: 34px; height: 34px; border-radius: 7px; flex-shrink: 0; overflow: hidden;
  background: linear-gradient(135deg, rgba(139,109,255,0.3), rgba(139,109,255,0.08));
  display: flex; align-items: center; justify-content: center;
}
.music-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.music-thumb.empty span { color: rgba(255,255,255,0.5); font-size: 15px; }
.music-track-meta { min-width: 0; flex: 1; }
.music-track-name {
  font-size: 12px; color: #e0e2ec; font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.music-track-sub {
  font-size: 10px; color: #8b93a7; margin-top: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.music-track-actions { display: flex; gap: 4px; flex-shrink: 0; }
.music-mini-btn {
  width: 26px; height: 26px; border: none; border-radius: 7px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.06); color: #cfd3e0; cursor: pointer; font-size: 12px;
}
.music-mini-btn:hover { background: rgba(255,255,255,0.16); color: #fff; }
.music-mini-btn.music-approve:hover { background: rgba(76,175,80,0.4); }
.music-mini-btn.music-reject:hover { background: rgba(244,67,54,0.4); }
.music-resize-handle {
  position: absolute; right: 2px; bottom: 2px; width: 16px; height: 16px;
  cursor: nwse-resize; opacity: 0.4;
  background: radial-gradient(circle at 70% 70%, rgba(255,255,255,0.5) 1.5px, transparent 1.6px) 0 0/5px 5px;
}
.music-resize-handle:hover { opacity: 0.7; }
.role-perm-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 12px;
  border-radius: 8px;
  background: rgba(255,255,255,0.015);
  transition: background 0.12s;
}
.role-perm-row:hover { background: rgba(255,255,255,0.04); }
.role-perm-label { font-size: 13px; color: #d1d5db; }
.role-perm-toggle {
  position: relative;
  width: 42px; height: 24px;
  border-radius: 12px;
  background: rgba(255,255,255,0.08);
  border: none;
  cursor: pointer;
  transition: background 0.25s;
  flex-shrink: 0;
}
.role-perm-toggle::after {
  content: "";
  position: absolute;
  top: 3px; left: 3px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: #555;
  transition: transform 0.25s cubic-bezier(0.4,0,0.2,1), background 0.25s;
}
.role-perm-toggle.on { background: rgba(89,101,242,0.35); }
.role-perm-toggle.on::after { transform: translateX(18px); background: #5865f2; }

/* ── Role Editor Actions ───────────────── */
.role-editor-actions {
  display: flex; gap: 10px; margin-top: 6px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.role-editor-save-btn {
  padding: 10px 28px;
  border-radius: 8px;
  border: none;
  background: #5865f2;
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s, box-shadow 0.15s;
}
.role-editor-save-btn:hover { background: #4752c4; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(88,101,242,0.3); }
.role-editor-save-btn:hover { background: #4752c4; }
.role-editor-save-btn:active { transform: scale(0.97); }
.role-editor-delete-btn {
  padding: 9px 18px;
  border-radius: 8px;
  border: 1px solid rgba(255,60,60,0.25);
  background: rgba(255,60,60,0.08);
  color: #ff6b6b;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.15s;
}
.role-editor-delete-btn:hover { background: rgba(255,60,60,0.18); }
.role-editor-delete-btn.hidden { display: none; }

/* ── Channel Role Overrides (in channel editor) ── */
.channel-role-overrides-section {
  display: flex; flex-direction: column; gap: 10px;
}
.channel-role-overrides-section.hidden { display: none; }
.channel-role-overrides-list {
  display: flex; flex-direction: column; gap: 4px;
  max-height: 480px; overflow-y: auto;
}
.channel-role-overrides-list::-webkit-scrollbar { width: 4px; }
.channel-role-overrides-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 2px; }
.ch-role-override-row {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.03);
  transition: background 0.12s, border-color 0.12s;
}
.ch-role-override-row:hover { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.06); }
.ch-role-ovr-dot {
  width: 10px; height: 10px;
  border-radius: 50%; flex-shrink: 0;
  box-shadow: 0 0 4px rgba(0,0,0,0.3);
}
.ch-role-ovr-name {
  flex: 0 0 auto;
  min-width: 60px;
  max-width: 140px;
  font-size: 13px; color: #d1d5db;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-weight: 500;
}
.ch-role-ovr-btns { display: flex; gap: 4px; flex-wrap: wrap; flex: 1; min-width: 0; }
.ch-role-ovr-btn {
  padding: 5px 9px;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.06);
  background: rgba(255,255,255,0.03);
  color: var(--muted);
  font-size: 11px;
  cursor: pointer;
  transition: all 0.15s;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  white-space: nowrap;
}
.ch-role-ovr-btn:hover { background: rgba(255,255,255,0.06); }
.ch-role-ovr-btn.ovr-allow {
  background: rgba(67,181,129,0.15);
  color: #43b581;
  border-color: rgba(67,181,129,0.3);
}
.ch-role-ovr-btn.ovr-deny {
  background: rgba(255,60,60,0.15);
  color: #ff6b6b;
  border-color: rgba(255,60,60,0.3);
}
.channel-sync-category-btn {
  padding: 8px 16px;
  border-radius: 8px;
  border: 1px solid rgba(89,101,242,0.2);
  background: rgba(89,101,242,0.08);
  color: #a5adff;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  align-self: flex-start;
}
.channel-sync-category-btn:hover { background: rgba(89,101,242,0.18); }
.channel-sync-category-btn.hidden { display: none; }

/* ── Channel color picker UI ── */
.ch-color-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  padding: 4px 0;
}
.ch-color-item {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  cursor: pointer;
  padding: 6px 8px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.04);
  transition: border-color 0.15s, background 0.15s;
}
.ch-color-item:hover { background: rgba(255,255,255,0.04); }
.ch-color-item.ch-color-active { border-color: rgba(89,101,242,0.5); background: rgba(89,101,242,0.08); }
.ch-color-input {
  width: 36px; height: 36px;
  padding: 2px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.1);
  background: transparent; cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.ch-color-input::-webkit-color-swatch-wrapper { padding: 0; border-radius: 50%; }
.ch-color-input::-webkit-color-swatch { border: none; border-radius: 50%; }
.ch-color-label {
  font-size: 10px; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.4px;
  white-space: nowrap;
}
.ch-color-reset-btn {
  margin-left: auto;
  padding: 5px 10px; border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.06);
  background: rgba(255,255,255,0.03);
  color: var(--muted); font-size: 11px; cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.ch-color-reset-btn:hover { background: rgba(255,60,60,0.12); color: #f87171; border-color: rgba(255,60,60,0.3); }

/* ── Channel color presets ── */
.ch-color-presets {
  display: flex; flex-wrap: wrap; gap: 8px;
  padding: 4px 0;
}
.ch-preset-slot {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 10px; border-radius: 8px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.05);
  transition: background 0.15s;
}
.ch-preset-slot:hover { background: rgba(255,255,255,0.05); }
.ch-preset-circle {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  flex-shrink: 0;
}
.ch-preset-label { font-size: 11px; }
.ch-preset-btn {
  background: transparent; border: none;
  cursor: pointer; font-size: 14px; padding: 0 2px;
  line-height: 1; transition: transform 0.1s;
}
.ch-preset-btn:hover { transform: scale(1.25); }

/* ── Voice limit slider in channel editor ── */
.ch-voice-limit-section { display: flex; flex-direction: column; gap: 6px; }
.ch-voice-limit-section.hidden { display: none; }
.ch-voice-limit-row {
  display: flex; align-items: center; gap: 10px;
}
.ch-voice-limit-range { flex: 1; }
.ch-voice-limit-display {
  min-width: 100px; font-size: 13px; font-weight: 600;
  color: #a5b4fc; text-align: right;
}
.ch-voice-limit-reset-btn {
  width: 26px; height: 26px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.03);
  color: var(--muted); font-size: 12px; cursor: pointer;
  display: grid; place-items: center; flex-shrink: 0;
  transition: background 0.15s, color 0.15s;
}
.ch-voice-limit-reset-btn:hover { background: rgba(255,60,60,0.12); color: #f87171; }

/* ── Channel font selector ── */
.ch-font-row {
  display: flex; flex-wrap: wrap; gap: 8px;
  padding: 4px 0;
}
.ch-font-btn {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 8px 14px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.06);
  background: rgba(255,255,255,0.02);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  min-width: 90px;
}
.ch-font-btn:hover { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.12); }
.ch-font-btn.active {
  border-color: rgba(89,101,242,0.6);
  background: rgba(89,101,242,0.12);
}
.ch-font-sample {
  font-size: 20px;
  font-weight: 600;
  color: var(--text);
  line-height: 1;
}
.ch-font-name {
  font-size: 10px;
  color: var(--muted);
  text-transform: none;
  letter-spacing: 0;
  font-family: inherit !important;
}

/* ── Member role badge in list ─────────── (kept for message headers) */
.member-role-badge {
  display: inline-flex; align-items: center;
  font-size: 12px; vertical-align: middle;
  margin-left: 3px;
}
.member-role-badge img {
  width: 14px; height: 14px;
  border-radius: 3px; object-fit: contain;
  vertical-align: middle;
  background: transparent;
}

/* ── Role Chip (for profile popup) ─────── */
.role-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px 2px 4px;
  border-radius: 12px;
  font-size: 11px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.04);
  color: #d1d5db;
}
.role-chip .role-chip-dot {
  width: 10px; height: 10px;
  border-radius: 50%; flex-shrink: 0;
}
.role-chip .role-chip-icon { font-size: 13px; }
.role-chip .role-chip-icon img { width: 14px; height: 14px; border-radius: 3px; object-fit: cover; }
.role-chip .role-chip-remove {
  margin-left: 2px;
  width: 14px; height: 14px;
  border-radius: 50%;
  border: none;
  background: rgba(255,60,60,0.15);
  color: #ff6b6b;
  font-size: 9px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.role-chip-add-btn {
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 1px dashed rgba(255,255,255,0.15);
  background: transparent;
  color: var(--muted);
  font-size: 14px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.12s;
}
.role-chip-add-btn:hover { background: rgba(255,255,255,0.06); }
.role-add-dropdown {
  position: absolute;
  z-index: 120;
  background: #1e2025;
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
  padding: 4px;
  max-height: 180px;
  overflow-y: auto;
  min-width: 140px;
}
.role-add-dropdown-item {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 12px;
  color: #d1d5db;
  cursor: pointer;
  border: none;
  background: transparent;
  width: 100%;
  text-align: left;
  transition: background 0.12s;
}
.role-add-dropdown-item:hover { background: rgba(255,255,255,0.06); }

/* ── Role icon in chat messages ────────── */
.msg-role-icon {
  display: inline-flex; align-items: center;
  margin-left: 4px;
  vertical-align: middle;
  font-size: 14px;
}
.msg-role-icon img {
  width: 16px; height: 16px;
  border-radius: 3px; object-fit: contain;
  vertical-align: middle;
  background: transparent;
}

.settings-pane {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.settings-pane h3 {
  margin: 0 0 6px;
  font-size: 24px;
}

/* old layout — replaced by settings-profile-preview */
.settings-account-layout { display: contents; }
.settings-account-avatar-col { display: none; }
.settings-avatar-change-btn { display: none; }

.settings-divider {
  width: 100%;
  height: 1px;
  background: #4b5563;
  opacity: 0.7;
  margin: 4px 0 2px;
}

.settings-inline-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.settings-inline-row .menu-check {
  margin-left: auto;
}

/* Discord-like audio toggles */
.settings-audio-toggles {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 10px 0;
}

.settings-audio-toggle {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.05);
  cursor: pointer;
  transition: background 0.15s;
}

.settings-audio-toggle:hover {
  background: rgba(255,255,255,0.05);
}

.settings-audio-toggle-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.settings-audio-toggle-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}

.settings-audio-toggle-desc {
  font-size: 12px;
  color: var(--muted);
}

/* Toggle switch */
.settings-switch {
  appearance: none;
  -webkit-appearance: none;
  width: 42px;
  height: 24px;
  border-radius: 999px;
  background: #3a3d44;
  position: relative;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.2s;
  margin: 0;
}

.settings-switch::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.2s;
}

.settings-switch:checked {
  background: #8b5cf6;
}

.settings-switch:checked::after {
  transform: translateX(18px);
}

#theme-palette-buttons {
  gap: 8px;
}

.theme-palette-btn {
  min-height: 30px;
  font-size: 13px;
  background: #2a2d33;
  border: 1px solid var(--border);
}

.theme-palette-btn.active {
  background: #4f46e5;
  border-color: #6366f1;
}

.settings-pane label {
  font-size: 15px;
}

.settings-pane input,
.settings-pane select,
.settings-pane button {
  font-size: 16px;
}

.settings-pane input[type="color"] {
  width: 62px;
  height: 40px;
  padding: 4px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: #202226;
}

.chat {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  flex: 1;
  width: 100%;
  position: relative;
}

.chat-call-loading-overlay {
  position: absolute;
  inset: 0;
  z-index: 40;
  background: rgba(17, 18, 22, 0.82);
  backdrop-filter: blur(1px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.members-panel {
  width: 240px;
  min-width: 240px;
  height: 100%;
  overflow-y: auto;
  padding: 10px 8px;
}

.members-title {
  font-weight: 700;
  margin-bottom: 8px;
  font-size: 13px;
  padding: 0 6px;
}

.members-panel .pill {
  background: transparent;
  border: none;
  border-radius: 6px;
  padding: 5px 8px;
  cursor: pointer;
  transition: background 0.15s;
}

.members-panel .pill:hover {
  background: rgba(255,255,255,0.06);
}

.members-panel .pill img {
  width: 32px;
  height: 32px;
}

.member-section-divider {
  height: 1px;
  background: rgba(255,255,255,0.06);
  margin: 8px 6px;
}

.member-section-header {
  display: flex; align-items: center; gap: 5px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #6b7280;
  font-weight: 700;
  margin: 4px 6px 4px;
}
.member-section-header-icon {
  width: 14px; height: 14px;
  border-radius: 3px; object-fit: contain;
  flex-shrink: 0;
  text-transform: none;
}
.member-section-header-icon-emoji {
  font-size: 14px; line-height: 1;
  flex-shrink: 0;
  text-transform: none;
}

/* ── Member Profile Popup ──────────────── */
.member-profile-popup {
  position: fixed;
  z-index: 100;
  width: 280px;
  border-radius: 14px;
  background: #1a1c20;
  box-shadow: 0 8px 32px rgba(0,0,0,0.55);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.06);
  animation: member-profile-in 0.15s ease-out;
}

.member-profile-popup.server-mode {
  width: 300px;
}

@keyframes member-profile-in {
  from { opacity: 0; transform: scale(0.95) translateY(4px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

.member-profile-banner {
  height: 60px;
  background: linear-gradient(135deg, rgba(89,101,242,0.3), rgba(124,58,237,0.2));
}

.member-profile-body {
  padding: 0 14px 14px;
  position: relative;
}

.member-profile-avatar-wrap {
  position: relative;
  width: 56px;
  height: 56px;
  margin-top: -28px;
  margin-bottom: 6px;
}

.member-profile-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid #1a1c20;
  background: #111;
}

.member-profile-avatar-wrap .status-dot {
  bottom: 1px;
  right: 1px;
  width: 14px;
  height: 14px;
  border: 2px solid #1a1c20;
}

.member-profile-nickname {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
}

.member-profile-username {
  font-size: 12px;
  margin-bottom: 2px;
}

.member-profile-custom-status {
  font-size: 12px;
  font-style: italic;
  margin-bottom: 4px;
  min-height: 16px;
}

.member-profile-section {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(255,255,255,0.06);
}

.member-profile-section-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--muted);
  margin-bottom: 6px;
}

.member-profile-avatars-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.member-profile-avatars-row .mutual-item {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px 3px 3px;
  border-radius: 16px;
  background: rgba(255,255,255,0.04);
  font-size: 12px;
  color: #d1d5db;
}

.member-profile-avatars-row .mutual-item img {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  object-fit: cover;
  background: #111;
}

.member-profile-avatars-row .mutual-more {
  font-size: 11px;
  color: #8b95ff;
  padding: 3px 8px;
  cursor: pointer;
  border-radius: 10px;
  transition: background 0.15s, color 0.15s;
}
.member-profile-avatars-row .mutual-more:hover {
  background: rgba(89,101,242,0.15);
  color: #a5adff;
}

.mutual-expandable {
  cursor: pointer;
  transition: color 0.15s;
}
.mutual-expandable:hover {
  color: #d1d5db;
}

/* ── Mutual Expand Menu ──────────────── */
.mutual-expand-menu {
  position: fixed;
  z-index: 110;
  width: 220px;
  max-height: 320px;
  border-radius: 12px;
  background: #1e2025;
  box-shadow: 0 8px 28px rgba(0,0,0,0.55);
  border: 1px solid rgba(255,255,255,0.07);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: member-profile-in 0.15s ease-out;
}
.mutual-expand-header {
  padding: 10px 14px 8px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--muted);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  flex-shrink: 0;
}
.mutual-expand-list {
  overflow-y: auto;
  padding: 6px;
  flex: 1;
}
.mutual-expand-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 8px;
  font-size: 13px;
  color: #d1d5db;
  transition: background 0.12s;
}
.mutual-expand-item:hover {
  background: rgba(255,255,255,0.06);
}
.mutual-expand-item img {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  background: #111;
  flex-shrink: 0;
}
.mutual-expand-item span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.mutual-expand-list::-webkit-scrollbar {
  width: 4px;
}
.mutual-expand-list::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.1);
  border-radius: 4px;
}

.member-profile-roles-list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.member-profile-role-placeholder {
  font-style: italic;
}

.member-profile-top-actions {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 2;
  display: flex;
  gap: 4px;
}

.member-profile-top-btn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  background: rgba(0,0,0,0.45);
  color: #d1d5db;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s, transform 0.12s;
  backdrop-filter: blur(4px);
}

.member-profile-top-btn:hover {
  background: rgba(255,255,255,0.18);
  color: #fff;
  transform: scale(1.1);
}

.member-profile-top-btn.friend-remove {
  color: #ef4444;
}

.member-profile-top-btn.friend-remove:hover {
  background: rgba(239,68,68,0.25);
  color: #ff6b6b;
}

.member-profile-top-btn.friend-pending {
  color: #f59e0b;
}

.member-profile-top-btn.friend-pending:hover {
  background: rgba(245,158,11,0.2);
}

.chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.mobile-back-btn {
  display: none;
  background: none;
  border: none;
  color: #fff;
  font-size: 24px;
  cursor: pointer;
  padding: 4px 8px;
  margin-right: 8px;
  border-radius: 6px;
  transition: background 0.15s;
}

.mobile-back-btn:hover {
  background: rgba(255,255,255,0.1);
}

.mobile-only {
  display: none;
}

.chat-header-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.chat-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  background: #111;
}

.chat-header-right {
  display: flex;
  align-items: center;
  gap: 8px;
  position: relative;
  z-index: 3;
}

/* ── Oval pill buttons in the chat header ── */
.chat-header-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 36px;
  padding: 0 16px;
  border: none;
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  color: #fff;
  transition: transform 0.12s ease, filter 0.15s ease, box-shadow 0.15s ease;
}
.chat-header-btn:hover { transform: translateY(-1px); filter: brightness(1.08); }
.chat-header-btn:active { transform: translateY(0); }
.chat-header-btn:disabled { opacity: 0.5; cursor: default; transform: none; filter: none; }
.chat-header-btn-icon { flex-shrink: 0; }

/* Color variants */
.chat-header-btn.call {
  background: linear-gradient(135deg, #4f8cff, #2563eb);
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.35);
}
.chat-header-btn.join {
  background: linear-gradient(135deg, #34d977, #16a34a);
  box-shadow: 0 4px 14px rgba(22, 163, 74, 0.38);
}
.chat-header-btn.add-friend {
  background: linear-gradient(135deg, #a3e635, #65a30d);
  box-shadow: 0 4px 14px rgba(101, 163, 13, 0.35);
  color: #14250a;
}
.chat-header-btn.remove-friend,
.chat-header-btn.leave {
  background: linear-gradient(135deg, #f87171, #dc2626);
  box-shadow: 0 4px 14px rgba(220, 38, 38, 0.32);
}
.chat-header-btn.neutral {
  background: rgba(255, 255, 255, 0.08);
  color: #d1d5db;
  box-shadow: none;
}
.chat-header-btn.neutral:hover { background: rgba(255, 255, 255, 0.14); color: #fff; }

/* On narrow screens collapse pills to icon-only circles */
@media (max-width: 760px) {
  .chat-header-btn {
    padding: 0;
    width: 36px;
    justify-content: center;
    gap: 0;
  }
  .chat-header-btn-label { display: none; }
}

.icon-btn {
  width: 34px;
  height: 34px;
  padding: 0;
  display: grid;
  place-items: center;
  pointer-events: auto;
  background: transparent;
  border: none;
  border-radius: 8px;
  color: var(--muted);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.icon-btn:hover {
  background: rgba(255,255,255,0.07);
  color: var(--text);
  opacity: 1;
}

.chat-messages {
  background: var(--bg);
  border: 1px solid rgba(255,255,255,0.04);
  border-radius: 12px;
  padding: 16px 12px;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.chat-messages-loading {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.chat-messages-spinner {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.12);
  border-top-color: var(--accent, #6366f1);
  animation: chat-spin 0.7s linear infinite;
}

@keyframes chat-spin {
  to { transform: rotate(360deg); }
}

.msg-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: relative;
}

.msg-item {
  will-change: transform;
}

.msg-item.me .msg-author {
  align-self: flex-end;
}

.msg-author {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--muted);
  padding: 0 2px;
  cursor: pointer;
  width: fit-content;
}

.msg-author:hover span:first-of-type {
  text-decoration: underline;
}

.msg-author img {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  object-fit: cover;
  background: #111;
}

.system-message {
  text-align: center;
  font-size: 12px;
  color: var(--muted);
  margin: 4px 0;
}

.system-message-call {
  text-align: center;
  margin: 8px auto;
  max-width: 320px;
}

.system-message-call-card {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 12px;
  background: rgba(89, 101, 242, 0.08);
  border: 1px solid rgba(89, 101, 242, 0.15);
  font-size: 13px;
  color: #a5b4fc;
}

.system-message-call-card.call-ended {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.06);
  color: var(--muted);
}

.system-message-call-icon {
  font-size: 16px;
}

.system-message-call-text {
  line-height: 1.3;
}

.system-message-call-time {
  font-size: 11px;
  opacity: 0.7;
  margin-left: 4px;
}

.call-panel {
  margin-bottom: 10px;
  padding: 12px 16px;
  border-radius: 12px;
  background: #18191d;
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.call-panel.hidden {
  display: none;
}

.call-info {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
}

.call-avatar-large {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
  background: #111;
}

.call-name {
  font-weight: 600;
  margin-bottom: 2px;
}

.call-status {
  font-size: 13px;
  color: var(--muted);
}

.call-actions {
  display: flex;
  gap: 8px;
  justify-content: center;
  align-items: center;
}

.screen-share-audio-option {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

#screen-share-menu {
  min-width: 248px;
  max-height: min(80vh, 560px);
  overflow: auto;
  z-index: 1300;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
}

.ssm-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.ssm-icon { font-size: 16px; }
.ssm-title { font-size: 14px; font-weight: 600; color: #f1f5f9; }

.ssm-label {
  font-size: 12px;
  color: #94a3b8;
  margin-bottom: -2px;
}

.ssm-quality {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}
#screen-fps-group.ssm-quality {
  grid-template-columns: repeat(3, 1fr);
}
.ssm-q {
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.03);
  color: #cbd5e1;
  border-radius: 8px;
  padding: 7px 0;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.ssm-q:hover { background: rgba(255, 255, 255, 0.08); }
.ssm-q-active {
  background: var(--accent, #5865f2);
  border-color: var(--accent, #5865f2);
  color: #fff;
  font-weight: 600;
}
.ssm-hidden-select { display: none; }

.ssm-check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #e2e8f0;
  cursor: pointer;
  user-select: none;
}
.ssm-check input { display: none; }
.ssm-switch {
  position: relative;
  width: 34px;
  height: 18px;
  border-radius: 999px;
  background: #3a3d44;
  transition: background 0.15s;
  flex: 0 0 auto;
}
.ssm-switch::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.15s;
}
.ssm-check input:checked + .ssm-switch { background: var(--accent, #5865f2); }
.ssm-check input:checked + .ssm-switch::after { transform: translateX(16px); }

.ssm-start {
  margin-top: 2px;
  border: none;
  border-radius: 8px;
  background: var(--accent, #5865f2);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  padding: 9px 0;
  cursor: pointer;
  transition: filter 0.12s;
}
.ssm-start:hover { filter: brightness(1.1); }

.menu-item-static {
  font-size: 12px;
  color: var(--muted);
  padding: 2px 4px;
}

.menu-input {
  width: 100%;
  height: 34px;
  background: #24133f;
  color: #8b5cf6;
  border: 1px solid #3b1f5f;
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 13px;
  cursor: pointer;
  outline: none;
}

.menu-input:hover {
  background: #2d1a4f;
  border-color: #4a2a6f;
}

.menu-input:focus {
  border-color: #8b5cf6;
  box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.2);
}

.menu-input option {
  background: #24133f;
  color: #8b5cf6;
}

.menu-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text);
}

.menu-check input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 2px solid #1d2b58;
  background: #111827;
  display: grid;
  place-items: center;
  cursor: pointer;
  margin: 0;
  padding: 0;
}

.menu-check input[type="checkbox"]::after {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #3b82f6;
  transform: scale(0);
  transition: transform 0.15s ease;
}

.menu-check input[type="checkbox"]:checked::after {
  transform: scale(1);
}

.screen-share-strip {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-start;
  align-items: flex-start;
  overflow: visible;
  padding: 0;
}

/* ── Camera (webcam) strip in active call ── */
.camera-strip {
  width: 100%;
  display: flex;
  gap: 8px;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: wrap;
  padding: 4px 0;
}
/* ── Media loading spinner (camera / screen share) ── */
.media-loader {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: rgba(15, 17, 22, 0.7);
  backdrop-filter: blur(2px);
  color: #cbd5e1;
  font-size: 12px;
  z-index: 3;
  border-radius: inherit;
}
.media-loader-error { background: rgba(20, 10, 12, 0.82); color: #fecaca; }
.screen-retry-btn {
  margin-top: 4px;
  padding: 6px 12px;
  border: none;
  border-radius: 8px;
  background: #7c5cff;
  color: #fff;
  cursor: pointer;
  font-size: 12px;
}
.screen-retry-btn:hover { background: #8b6dff; }
.media-spinner {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.15);
  border-top-color: #8b5cf6;
  animation: media-spin 0.8s linear infinite;
}
@keyframes media-spin { to { transform: rotate(360deg); } }

.camera-item {
  position: relative;
  width: 200px;
  max-width: 32%;
  aspect-ratio: 4 / 3;
  border-radius: 10px;
  overflow: hidden;
  background: #000;
  border: 1px solid var(--border);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}
.camera-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: #000;
}
.camera-item.self .camera-video {
  /* Mirror your own preview like every other video app. */
  transform: scaleX(-1);
}
.camera-item.self.rear .camera-video {
  transform: none;
}
.camera-flip-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  display: grid;
  place-items: center;
  z-index: 4;
  cursor: pointer;
  backdrop-filter: blur(6px);
}
.camera-flip-btn svg {
  width: 18px;
  height: 18px;
}
.camera-label {
  position: absolute;
  left: 6px;
  bottom: 6px;
  right: 6px;
  font-size: 11px;
  color: #fff;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 6px;
  padding: 2px 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}
.call-btn.camera.active-share {
  background: var(--accent, #5865f2);
  border-color: var(--accent, #5865f2);
  color: #fff;
}

.screen-share-item {
  position: relative;
  flex: 0 0 280px;
  width: 280px;
  max-width: 100%;
  min-width: 0;
  display: flex;
}

.screen-share-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  min-height: 0;
  border-radius: 12px;
  overflow: hidden;
  background: #05060a;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.screen-share-video {
  width: 100%;
  height: 100%;
  min-height: 0;
  max-height: 158px;
  object-fit: contain;
  display: block;
  border: none;
  border-radius: 0;
  background: #05060a;
  cursor: zoom-in;
}

.screen-watch-btn {
  display: none;
}

.screen-share-strip.has-focus {
  flex-wrap: wrap;
  align-items: stretch;
}

.screen-share-item.is-focused {
  flex: 0 0 480px;
  width: min(100%, 480px);
  max-width: 480px;
}

.screen-share-item.is-focused .screen-share-video {
  max-height: 270px;
  min-height: 0;
  object-fit: contain;
  background: #05060a;
}

.screen-live-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  left: auto;
  z-index: 3;
  padding: 2px 6px;
  border-radius: 4px;
  background: #e11d48;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  line-height: 1.3;
  pointer-events: none;
}

.screen-share-tools {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 8px;
  display: flex;
  gap: 6px;
  z-index: 4;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.screen-share-frame:hover .screen-share-tools,
.screen-share-frame:focus-within .screen-share-tools {
  opacity: 1;
}

.screen-control-btn {
  position: static;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  padding: 0;
  display: grid;
  place-items: center;
  background: rgba(17, 18, 22, 0.92);
  border: 1px solid #4b5563;
  color: #e5e7eb;
  font-size: 11px;
  cursor: pointer;
}

.screen-control-btn.pip {
  width: 32px;
  padding: 0;
}

.call-user-screen {
  position: absolute;
  left: -4px;
  bottom: -2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #7c5cff;
  border: 1px solid #c4b5fd;
  display: grid;
  place-items: center;
  color: #fff;
  line-height: 1;
}

.screen-share-label {
  position: absolute;
  top: 8px;
  left: 8px;
  max-width: calc(100% - 72px);
  z-index: 3;
  font-size: 12px;
  color: #fff;
  background: rgba(0, 0, 0, 0.55);
  border-radius: 6px;
  padding: 3px 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}

/* ── Custom screen-share video player ───────────────────────────────────── */
.screen-viewer-wrap {
  position: relative;
  width: min(92vw, 1280px);
  max-height: 90vh;
  border-radius: 12px;
  overflow: hidden;
  background: #0a0a0a;
  box-shadow: 0 24px 64px rgba(0,0,0,0.8);
  cursor: none;
}

.screen-viewer-wrap:hover,
.screen-viewer-wrap.controls-visible {
  cursor: default;
}

#screen-view-video {
  width: 100%;
  max-height: 90vh;
  display: block;
  background: #0a0a0a;
  border-radius: 12px;
}

.screen-player-controls {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: linear-gradient(
    180deg,
    rgba(0,0,0,0.55) 0%,
    transparent 30%,
    transparent 65%,
    rgba(0,0,0,0.7) 100%
  );
  opacity: 0;
  transition: opacity 0.22s ease;
  pointer-events: none;
}

.screen-viewer-wrap:hover .screen-player-controls,
.screen-viewer-wrap.controls-visible .screen-player-controls {
  opacity: 1;
  pointer-events: auto;
}

.screen-player-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px 8px;
}

.screen-player-label {
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  text-shadow: 0 1px 4px rgba(0,0,0,0.8);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 60%;
}

.screen-player-top-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.screen-player-live-badge {
  background: #ed4245;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  padding: 2px 7px;
  border-radius: 4px;
  text-transform: uppercase;
}

.screen-player-btn {
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.15);
  color: #fff;
  border-radius: 8px;
  width: 32px;
  height: 32px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
  backdrop-filter: blur(6px);
}

.screen-player-btn:hover {
  background: rgba(255,255,255,0.22);
  transform: scale(1.08);
}

.screen-player-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 14px 14px;
  gap: 10px;
}

.screen-player-left,
.screen-player-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.screen-player-vol-group {
  display: flex;
  align-items: center;
  gap: 6px;
}

.screen-player-volume-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 80px;
  height: 4px;
  border-radius: 999px;
  background: rgba(255,255,255,0.3);
  outline: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

.screen-player-volume-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
  box-shadow: 0 0 4px rgba(0,0,0,0.4);
}

.screen-player-volume-slider::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  border: none;
  cursor: pointer;
}

/* Loading badge for remote screen before first frame */
.screen-loading-badge {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: var(--muted);
  pointer-events: none;
  background: rgba(0,0,0,0.4);
  border-radius: 8px;
}

.call-participants {
  width: 100%;
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

.call-user {
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  user-select: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  -webkit-user-select: none;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
}
/* All children pass clicks through to .call-user */
.call-user > * {
  pointer-events: none;
}

.call-user-avatar {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid transparent;
  transition: border-color 0.1s ease, box-shadow 0.1s ease;
  -webkit-user-drag: none;
  pointer-events: none;
}

.call-user-avatar-wrap {
  position: relative;
  width: 58px;
  height: 58px;
  pointer-events: none;
}


.call-user-avatar-wrap.ringing .call-user-avatar {
  filter: grayscale(85%) brightness(0.75);
}

.call-ringing-dots {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  gap: 4px;
  pointer-events: none;
}

.call-ringing-dots span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fff;
  opacity: 0.35;
  animation: call-dots 1.1s infinite ease-in-out;
}

.call-ringing-dots span:nth-child(2) {
  animation-delay: 0.15s;
}

.call-ringing-dots span:nth-child(3) {
  animation-delay: 0.3s;
}

.call-user-muted {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(12, 12, 15, 0.9);
  border: 1px solid #374151;
  display: grid;
  place-items: center;
  font-size: 11px;
  line-height: 1;
}

.call-user-headphones {
  position: absolute;
  right: -6px;
  top: -6px;
  min-width: 24px;
  height: 18px;
  padding: 0 3px;
  border-radius: 50%;
  background: rgba(12, 12, 15, 0.9);
  border: 1px solid #991b1b;
  display: grid;
  place-items: center;
  font-size: 9px;
  color: #fca5a5;
  font-weight: 700;
  line-height: 1;
}

@keyframes call-dots {
  0%, 80%, 100% { transform: translateY(0); opacity: 0.35; }
  40% { transform: translateY(-3px); opacity: 1; }
}

/* ─── Connecting overlay (signal bars) ─── */
.call-user-avatar-wrap.connecting .call-user-avatar {
  filter: grayscale(50%) brightness(0.7);
}

.call-connecting-icon {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 28px;
  height: 28px;
  pointer-events: none;
  color: #fff;
  filter: drop-shadow(0 0 3px rgba(0,0,0,0.7));
}

.call-connecting-icon svg {
  width: 100%;
  height: 100%;
}

.call-connecting-icon .bar {
  animation: call-connecting-blink 1.4s infinite ease-in-out;
}

.call-connecting-icon .bar1 { animation-delay: 0s; }
.call-connecting-icon .bar2 { animation-delay: 0.15s; }
.call-connecting-icon .bar3 { animation-delay: 0.3s; }
.call-connecting-icon .bar4 { animation-delay: 0.45s; }

@keyframes call-connecting-blink {
  0%, 100% { opacity: 0.2; }
  50% { opacity: 1; }
}

.call-user.speaking .call-user-avatar {
  border-color: #22c55e;
  box-shadow: 0 0 8px 2px rgba(34, 197, 94, 0.5);
}

.call-user.ringing .call-user-avatar {
  filter: grayscale(70%) brightness(0.85);
  animation: call-ring-pulse 1s infinite ease-in-out;
  box-shadow: 0 0 0 0 rgba(148, 163, 184, 0.65);
}

@keyframes call-ring-pulse {
  0% { transform: scale(1); opacity: 0.74; box-shadow: 0 0 0 0 rgba(148, 163, 184, 0.55); }
  50% { transform: scale(1.12); opacity: 1; box-shadow: 0 0 0 10px rgba(148, 163, 184, 0.08); }
  100% { transform: scale(1); opacity: 0.74; box-shadow: 0 0 0 0 rgba(148, 163, 184, 0); }
}

.icon-btn.join-active {
  background: #16a34a;
  border-color: #15803d;
}

.call-user-name {
  font-size: 12px;
  color: var(--muted);
  pointer-events: none;
  user-select: none;
}

/* Connecting loader inside the call panel */
.call-connecting {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 6px 0 2px;
  color: var(--text-muted, #aab0c0);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.3px;
}
.call-connecting.hidden { display: none; }
.call-connecting-spinner {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.18);
  border-top-color: var(--accent, #5865f2);
  animation: call-connecting-spin 0.8s linear infinite;
  flex-shrink: 0;
}
@keyframes call-connecting-spin { to { transform: rotate(360deg); } }
.call-connecting-text { display: inline-flex; align-items: baseline; }
.call-connecting-dots { display: inline-flex; }
.call-connecting-dots i {
  font-style: normal;
  opacity: 0.25;
  animation: call-connecting-dot 1.2s infinite;
}
.call-connecting-dots i:nth-child(2) { animation-delay: 0.2s; }
.call-connecting-dots i:nth-child(3) { animation-delay: 0.4s; }
@keyframes call-connecting-dot {
  0%, 100% { opacity: 0.25; }
  40% { opacity: 1; }
}

/* Join/leave animations for call participants */
@keyframes call-user-in {
  from { opacity: 0; transform: scale(0.6) translateY(8px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
.call-user.entering {
  animation: call-user-in 0.28s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.call-user.leaving {
  opacity: 0;
  transform: scale(0.6) translateY(8px);
  pointer-events: none;
}

.call-user-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.call-user-meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  font-size: 10px;
  color: #aaa;
}

.call-user-ping {
  color: #aaa;
}

.call-user-duration {
  color: #aaa;
}

.call-user-chat {
  color: #7c3aed;
  cursor: pointer;
  text-decoration: underline;
}

.call-user-chat:hover {
  color: #9d5ff0;
}

.call-btn {
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  flex: 0 0 auto;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  color: #fff;
  padding: 0;
  line-height: 0;
  box-sizing: border-box;
}
.call-btn svg {
  display: block;
  width: 20px;
  height: 20px;
  pointer-events: none;
}

.call-btn.accept {
  background: #22c55e;
}

.call-btn.reject,
.call-btn.hangup {
  background: #ef4444;
}

.call-btn.mic {
  background: #3b3d42;
}
/* Микрофон выключен — красный */
.call-btn.mic.active {
  background: #991b1b;
}

.call-btn.headphones {
  background: #3b3d42;
}
/* Звук выключен (deafen) — красный */
.call-btn.headphones.active {
  background: #991b1b;
}

.call-btn.camera {
  background: #3b3d42;
}
.call-btn.camera.active-share {
  background: #5865f2;
}
.call-btn.camera-flip {
  background: #3b3d42;
}

.call-btn.screen {
  background: #3b3d42;
}

.call-btn.screen.active-share {
  background: #5865f2;
}

.call-btn.lobby-join {
  background: #22c55e;
  box-shadow: 0 4px 16px rgba(34,197,94,0.4);
}

.call-btn:disabled {
  opacity: 0.55;
  cursor: default;
}

.bubble {
  max-width: 70%;
  padding: 9px 14px;
  border-radius: 16px;
  line-height: 1.5;
  word-break: break-word;
  font-size: 14px;
}

.bubble.me {
  margin-left: auto;
  background: linear-gradient(135deg, #5865f2 0%, #7c5cfc 100%);
  color: white;
  border-radius: 18px 18px 6px 18px;
  box-shadow: 0 4px 12px rgba(88,101,242,0.25);
}

.bubble.them {
  background: #1e2230;
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 18px 18px 18px 6px;
  color: var(--text);
}

.bubble .time {
  display: block;
  font-size: 11px;
  color: var(--muted);
  margin-top: 6px;
}

.msg-text {
  white-space: normal;
  word-break: break-word;
}

.msg-text.emoji-only {
  font-size: 2.4rem;
  line-height: 1.3;
}

.msg-text.emoji-only .custom-emoji-inline {
  width: 2.8em;
  height: 2.8em;
}

.msg-code-inline {
  background: #111216;
  border: 1px solid #3f3f46;
  border-radius: 6px;
  padding: 1px 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 12px;
}

.msg-code-block {
  margin: 6px 0;
  padding: 8px;
  background: #0b0c0f;
  border: 1px solid #3f3f46;
  border-radius: 8px;
  overflow-x: auto;
  white-space: pre-wrap;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 12px;
}

.msg-quote {
  margin: 4px 0;
  border-left: 3px solid #4b5563;
  padding-left: 8px;
  color: #d1d5db;
}

.msg-spoiler {
  display: inline-block;
  background: #4b5563;
  color: transparent;
  border-radius: 4px;
  padding: 0 4px;
  cursor: pointer;
  user-select: none;
}

.msg-spoiler.revealed {
  color: inherit;
  background: rgba(75, 85, 99, 0.25);
}

.chat-input {
  margin-top: 8px;
  display: flex;
  gap: 6px;
  align-items: center;
  position: relative;
  background: #1a1d26;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.06);
  padding: 4px 4px 4px 8px;
  transition: border-color 0.2s;
}

.chat-input:focus-within {
  border-color: rgba(88,101,242,0.35);
}

.chat-input #message-input {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 9px 4px;
  box-shadow: none;
}

.chat-input #message-input:focus {
  box-shadow: none;
  border-color: transparent;
}

#upload-progress {
  margin-top: 6px;
}

.chat-send-warning {
  margin-top: 4px;
  color: #ef4444;
}

.chat-input input,
.chat-input textarea {
  flex: 1;
  padding-right: 62px;
}

#message-input {
  min-height: 44px;
  max-height: 360px;
  resize: none;
  line-height: 1.45;
  padding-top: 11px;
  background: #1a1d26;
  color: var(--text);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px;
  transition: border-color 0.2s, box-shadow 0.2s;
  font-family: inherit;
}

#message-input:focus {
  outline: none;
  border-color: rgba(88,101,242,0.4);
  box-shadow: 0 0 0 3px rgba(88,101,242,0.08);
}

#message-input::placeholder {
  color: #4a4f5e;
}

#text-format-menu {
  min-width: 170px;
  z-index: 1300;
  padding: 4px;
  gap: 2px;
}

#text-format-menu .menu-item {
  font-size: 13px;
  padding: 6px 8px;
  border-radius: 7px;
  line-height: 1.2;
}

/* Запрещаем перетаскивание изображений со страницы (аватарок, сообщений и т.п.),
   чтобы их нельзя было «уронить»/скопировать в чат. Загрузка файлов из ОС не затрагивается. */
img {
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  user-select: none;
}

.composer-attachment-preview {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.composer-attachment-card {
  position: relative;
  width: 140px;
  max-width: 100%;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  background: #111216;
}

.composer-attachment-card img {
  width: 100%;
  height: 110px;
  object-fit: cover;
  display: block;
}

.composer-attachment-file {
  padding: 10px;
  font-size: 12px;
  color: #d1d5db;
}

/* Action buttons grouped at the top-right of each attachment card */
.composer-attachment-actions {
  position: absolute;
  top: 5px;
  right: 5px;
  z-index: 2;
  display: flex;
  gap: 4px;
}

.composer-attachment-action {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(15, 17, 22, 0.7);
  backdrop-filter: blur(2px);
  padding: 0;
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
  color: #fff;
  display: grid;
  place-items: center;
  transition: background 0.15s;
}
.composer-attachment-action:hover { background: rgba(15, 17, 22, 0.95); }
.composer-attachment-action.remove:hover { background: rgba(220, 38, 38, 0.85); }

.composer-attachment-card.spoiler::after {
  content: "СПОЙЛЕР";
  position: absolute;
  inset: 0;
  background: rgba(55, 65, 81, 0.68);
  color: #e5e7eb;
  font-weight: 700;
  display: grid;
  place-items: center;
  font-size: 12px;
  letter-spacing: 0.04em;
}

.char-count {
  position: absolute;
  right: 90px;
  bottom: 9px;
  font-size: 11px;
  color: var(--muted);
}

/* ── Emoji panel redesigned ─────────────────────── */
.emoji-panel {
  position: absolute;
  right: 60px;
  bottom: 68px;
  padding: 0;
  background: #111216;
  border-radius: 10px;
  border: 1px solid var(--border);
  width: 370px;
  max-height: 300px;
  overflow: hidden;
  display: flex;
  z-index: 25;
}

.emoji-panel-sidebar {
  width: 44px;
  min-width: 44px;
  background: #0d0e12;
  border-right: 1px solid var(--border);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 6px 0;
  gap: 4px;
  scrollbar-width: none;
}
.emoji-panel-sidebar::-webkit-scrollbar {
  display: none;
}

.emoji-panel-sidebar button {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  padding: 0;
  border-radius: 6px;
  font-size: 15px;
  background: transparent;
  border: none;
  cursor: pointer;
  color: #fff;
  opacity: 0.6;
  transition: opacity 0.15s, background 0.15s;
}

.emoji-panel-sidebar button:hover,
.emoji-panel-sidebar button.active {
  opacity: 1;
  background: rgba(255,255,255,0.08);
}

.emoji-panel-main {
  flex: 1;
  overflow-y: auto;
  padding: 6px;
}

.emoji-category-title {
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 6px 0 4px 4px;
  font-weight: 600;
}

.emoji-category-title:first-child {
  margin-top: 2px;
}

.emoji-category-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, 32px);
  gap: 2px;
}

.emoji-category-grid button {
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 6px;
  font-size: 19px;
  line-height: 1;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: background 0.12s;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.emoji-category-grid button:hover {
  background: rgba(255,255,255,0.1);
}

.emoji-category-divider {
  height: 1px;
  background: var(--border);
  margin: 6px 0;
}

/* ── Reaction emoji picker (from context menu) ──── */
.reaction-emoji-picker {
  position: fixed;
  bottom: auto;
  right: auto;
}

/* ── Mention picker ────────────────────────────── */
.mention-picker {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 68px;
  max-height: 200px;
  overflow-y: auto;
  background: #1a1b20;
  border: 1px solid var(--border);
  border-radius: 10px;
  z-index: 30;
  padding: 4px 0;
}

.mention-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 12px;
  cursor: pointer;
  transition: background 0.12s;
}

.mention-item:hover, .mention-item.active {
  background: rgba(109, 40, 217, 0.18);
}

.mention-item img {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
}

.mention-item-info {
  display: flex;
  flex-direction: column;
}

.mention-item-name {
  font-size: 13px;
  font-weight: 600;
  color: #e2e8f0;
}

.mention-item-username {
  font-size: 11px;
  color: var(--muted);
}

.mention-divider {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px 2px;
}
.mention-divider span {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--muted);
}
.mention-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(255,255,255,0.06);
}
.mention-role-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 4px rgba(0,0,0,0.3);
}
/* ── Mention highlight inside messages ─────────── */
.msg-mention {
  background: rgba(109, 40, 217, 0.25);
  color: #a78bfa;
  border-radius: 3px;
  padding: 0 4px;
  font-weight: 600;
  cursor: pointer;
  display: inline;
}

.msg-mention:hover {
  background: rgba(109, 40, 217, 0.4);
}

/* Role mention: same base shape as user mention, role color accents */
.msg-role-mention {
  border-radius: 4px;
  padding: 0 4px;
  font-weight: 700;
  cursor: pointer;
  display: inline;
  text-decoration: underline dotted;
  text-underline-offset: 2px;
}

.msg-role-mention:hover {
  filter: brightness(1.2);
}

/* Message that contains a mention of the current user */
.msg-item.mentioned .bubble {
  border-left: 3px solid #facc15;
  background: rgba(250, 204, 21, 0.06);
}

/* ── Role mention highlight pulse on member rows ── */
@keyframes role-mention-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(165, 180, 252, 0.5); background: rgba(165, 180, 252, 0.12); }
  50%  { box-shadow: 0 0 0 6px rgba(165, 180, 252, 0); background: rgba(165, 180, 252, 0.18); }
  100% { box-shadow: 0 0 0 0 rgba(165, 180, 252, 0); background: transparent; }
}

.role-mention-highlighted {
  animation: role-mention-pulse 1.6s ease-out forwards;
  border-radius: 8px;
}

/* ── Mention badge (@ icon) next to unread badge ── */
.mention-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #dc2626;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  margin-right: 2px;
  flex-shrink: 0;
}

.server-btn {
  position: relative;
}

.server-mention-badge {
  position: absolute;
  top: -2px;
  left: -2px;
  z-index: 2;
  margin: 0;
}

/* ── Reactions bar in context menu ─────────────── */
.msg-reactions-bar {
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 4px 6px;
  border-bottom: 1px solid var(--border);
  flex-wrap: nowrap;
}

.msg-reactions-bar button {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  font-size: 18px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  transition: background 0.12s;
}

.msg-reactions-bar button:hover {
  background: rgba(255,255,255,0.1);
}

.msg-reactions-bar .reaction-more-btn {
  font-size: 14px;
  color: var(--muted);
}

/* ── Reaction buttons under messages ───────────── */
.msg-reactions {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 6px;
}

.msg-item.me .msg-reactions {
  justify-content: flex-end;
}

.msg-reaction-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.04);
  cursor: pointer;
  font-size: 15px;
  color: #d1d5db;
  transition: background 0.18s, border-color 0.18s, transform 0.15s, box-shadow 0.18s;
  line-height: 1;
}

.msg-reaction-btn:hover {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.15);
  transform: scale(1.08);
}

.msg-reaction-btn:active {
  transform: scale(0.95);
}

.msg-reaction-btn.reacted {
  border-color: rgba(124, 58, 237, 0.5);
  background: rgba(109, 40, 217, 0.18);
  box-shadow: 0 0 8px rgba(124, 58, 237, 0.15);
}

.msg-reaction-btn.reacted:hover {
  background: rgba(109, 40, 217, 0.28);
  box-shadow: 0 0 12px rgba(124, 58, 237, 0.25);
}

.msg-reaction-btn .reaction-emoji {
  font-size: 16px;
  line-height: 1;
}

.msg-reaction-btn .reaction-count {
  font-size: 12px;
  font-weight: 700;
  min-width: 8px;
  text-align: center;
  display: inline-block;
  overflow: hidden;
  position: relative;
}

.reaction-count-animate-up {
  animation: reaction-count-up 0.3s ease-out;
}

.reaction-count-animate-down {
  animation: reaction-count-down 0.3s ease-out;
}

@keyframes reaction-count-up {
  0% { transform: translateY(100%); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}

@keyframes reaction-count-down {
  0% { transform: translateY(-100%); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}

.attachment-wrap {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px;
  background: rgba(255, 255, 255, 0.03);
}

.attachment-spoiler {
  position: relative;
}

.attachment-spoiler-cover {
  position: absolute;
  inset: 0;
  z-index: 2;
  border: none;
  background: #4b5563;
  color: #fff;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.attachment-spoiler.revealed .attachment-spoiler-cover {
  display: none;
}

.attachment-preview {
  max-width: 320px;
  max-height: 220px;
  border-radius: 8px;
  display: block;
}

.attachment-preview.image {
  cursor: zoom-in;
}

.attachment-file-link {
  color: #93c5fd;
  text-decoration: underline;
  word-break: break-all;
}

.attachment-expire {
  margin-top: 6px;
  font-size: 11px;
  color: #fca5a5;
}

.link-preview-widget {
  display: flex;
  gap: 10px;
  align-items: stretch;
  width: min(520px, 100%);
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.03);
  border-radius: 10px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
}

.link-preview-widget:hover {
  border-color: #4b5563;
  background: rgba(255, 255, 255, 0.05);
}

.link-preview-thumb-wrap {
  width: 140px;
  min-width: 140px;
  background: #0f1116;
  display: flex;
  align-items: center;
  justify-content: center;
}

.link-preview-thumb {
  width: 100%;
  height: 100%;
  min-height: 88px;
  object-fit: cover;
}

.link-preview-meta {
  padding: 10px 10px 10px 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  min-width: 0;
}

.link-preview-site-row {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.link-preview-favicon {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  flex: 0 0 auto;
}

.link-preview-title {
  font-size: 14px;
  font-weight: 700;
  color: #e5e7eb;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.link-preview-site {
  font-size: 12px;
  color: #9ca3af;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.message-context-menu {
  position: fixed;
  z-index: 1200;
  min-width: 200px;
  max-width: 280px;
  max-height: calc(100vh - 12px);
  overflow-y: auto;
  background: #13151d;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.7), 0 4px 16px rgba(0,0,0,0.4), 0 0 0 0.5px rgba(255,255,255,0.04);
  animation: ctx-pop 0.15s cubic-bezier(0.34,1.4,0.64,1) both;
  transform-origin: top left;
}
@keyframes ctx-pop {
  from { opacity: 0; transform: scale(0.88) translateY(-4px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

.message-context-menu .menu-item {
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 13.5px;
  font-weight: 500;
  color: #c5cad6;
  cursor: pointer;
  transition: background 0.1s, color 0.1s;
  display: flex;
  align-items: center;
  gap: 10px;
  letter-spacing: 0.01em;
  line-height: 1.3;
  min-height: 34px;
}

.message-context-menu .menu-item:hover:not(:disabled) {
  background: rgba(255,255,255,0.06);
  color: #fff;
}

#member-call-volume-wrap {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px;
}

#member-call-volume-wrap label {
  display: block;
  font-size: 12px;
  color: #cbd5e1;
  margin-bottom: 6px;
}

#member-call-volume {
  width: 100%;
}

#member-menu-disconnect {
  color: #f87171;
}

/* Unified custom slider style for call/screen mixers */
.app-range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 8px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
}

.app-range::-webkit-slider-runnable-track {
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, #4f46e5, #7c3aed);
  border: 1px solid #3b3d42;
}

.app-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  margin-top: -5px;
  border-radius: 50%;
  border: 1px solid #a78bfa;
  background: #f5f3ff;
  box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.35);
}

.app-range::-moz-range-track {
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, #4f46e5, #7c3aed);
  border: 1px solid #3b3d42;
}

.app-range::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid #a78bfa;
  background: #f5f3ff;
  box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.35);
}

.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  z-index: 130;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.lightbox img {
  max-width: 95vw;
  max-height: 95vh;
  object-fit: contain;
  border-radius: 10px;
}

#remote-audio {
  display: none;
}

.incoming-call-popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 230px;
  background: #1f2126;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px;
  z-index: 80;
  user-select: none;
}

.incoming-call-drag {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 8px;
  cursor: move;
}

.incoming-call-popup img {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  margin: 0 auto;
}

.incoming-call-name {
  margin-top: 8px;
  text-align: center;
  font-weight: 700;
}

.incoming-call-sub {
  text-align: center;
  font-size: 12px;
  color: var(--muted);
}

.incoming-call-actions {
  margin-top: 10px;
  display: flex;
  gap: 8px;
}

.incoming-call-actions .call-btn {
  flex: 1;
  width: auto;
  height: auto;
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 13px;
}

.modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
}

#avatar-crop-modal {
  z-index: 120;
}

#avatar-crop-modal .modal-card {
  width: min(680px, 94vw);
  max-height: 90vh;
  overflow-y: auto;
}

.modal-card {
  width: 340px;
  background: #1f2126;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px;
}

.modal-card canvas {
  width: 260px;
  height: 260px;
  border-radius: 10px;
  border: 1px solid var(--border);
  display: block;
  margin: 8px auto;
  background: #0f1114;
  object-fit: contain;
  max-width: 100%;
}

.modal-card canvas[width="640"] {
  width: 100%;
  max-width: 640px;
  height: auto;
  aspect-ratio: 640 / 220;
  border-radius: 10px;
}

.crop-gif-wrap {
  width: 260px;
  height: 260px;
  max-width: 100%;
  border-radius: 50%;
  border: 1px solid var(--border);
  overflow: hidden;
  display: block;
  margin: 8px auto;
  background:
    repeating-conic-gradient(#2a2d31 0% 25%, #1a1d21 0% 50%) 0 0 / 16px 16px;
  position: relative;
}

.crop-gif-preview {
  width: 100%;
  height: 100%;
  object-fit: contain;
  position: absolute;
  left: 0;
  top: 0;
}

.modal-row {
  display: flex;
  gap: 12px;
  margin: 8px 0;
}

.modal-actions {
  margin-top: 10px;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.group-friends-list {
  margin-top: 10px;
  max-height: 240px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px;
}

.group-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px;
}

.group-option input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 2px solid #1d2b58;
  background: #111827;
  display: grid;
  place-items: center;
  cursor: pointer;
  margin: 0;
  padding: 0;
}

.group-option input[type="checkbox"]::after {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #3b82f6;
  transform: scale(0);
  transition: transform 0.15s ease;
}

.group-option input[type="checkbox"]:checked::after {
  transform: scale(1);
}

.message-context-menu .menu-item:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

/* Context menu extras */
.ctx-icon {
  font-size: 14px;
  width: 18px;
  text-align: center;
  flex-shrink: 0;
  line-height: 1;
}

.ctx-divider {
  height: 1px;
  background: rgba(255,255,255,0.07);
  margin: 3px 0;
}

.message-context-menu .menu-item.ctx-danger {
  color: #f87171;
}
.message-context-menu .menu-item.ctx-danger:hover:not(:disabled) {
  background: rgba(242,63,66,0.12);
  color: #ff8585;
}

/* Context menu item icon slot */
.message-context-menu .menu-item svg,
.message-context-menu .menu-item .ctx-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  opacity: 0.7;
}

.message-context-menu .menu-item.has-submenu::after {
  content: "▸";
  margin-left: auto;
  font-size: 12px;
  opacity: 0.5;
}

.server-mute-submenu {
  min-width: 220px;
}

.mute-submenu-title {
  font-size: 11px;
  color: rgba(255,255,255,0.4);
  padding: 6px 10px 4px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  user-select: none;
}

.mute-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  color: #d1d5db;
  transition: background 0.1s;
  user-select: none;
}

.mute-option:hover {
  background: rgba(255,255,255,0.07);
}

.mute-option input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  border: 2px solid rgba(255,255,255,0.2);
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  margin: 0;
  padding: 0;
  flex-shrink: 0;
  transition: border-color 0.15s;
}

.mute-option input[type="checkbox"]::after {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #8b5cf6;
  transform: scale(0);
  transition: transform 0.15s ease;
}

.mute-option input[type="checkbox"]:checked {
  border-color: #8b5cf6;
}

.mute-option input[type="checkbox"]:checked::after {
  transform: scale(1);
}

.mute-all-btn {
  color: #fbbf24 !important;
}

.mute-all-btn.unmute-mode {
  color: #34d399 !important;
}

/* Audit Log Modal */
.audit-log-card {
  width: 600px;
  max-width: 95vw;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
  position: relative;
}

.audit-log-title {
  padding: 18px 20px 12px;
  margin: 0;
  font-size: 18px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  flex-shrink: 0;
}

.audit-log-entries {
  flex: 1;
  overflow-y: auto;
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.audit-entry {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  transition: background 0.1s;
}

.audit-entry:hover {
  background: rgba(255,255,255,0.04);
}

.audit-entry-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.audit-entry-body {
  flex: 1;
  min-width: 0;
}

.audit-entry-text {
  font-size: 13px;
  color: #d1d5db;
  line-height: 1.4;
}

.audit-entry-text strong {
  color: #fff;
  font-weight: 600;
}

.audit-entry-action {
  color: #8b5cf6;
  font-weight: 500;
}

.audit-entry-target {
  color: #60a5fa;
}

.audit-entry-details {
  font-size: 12px;
  color: #6b7280;
  margin-top: 2px;
}

.audit-entry-time {
  font-size: 11px;
  color: #6b7280;
  flex-shrink: 0;
  margin-top: 2px;
}

.audit-log-empty {
  text-align: center;
  color: #6b7280;
  padding: 40px 20px;
  font-size: 14px;
}

.audit-log-load-more {
  display: block;
  width: calc(100% - 24px);
  margin: 8px 12px 12px;
  padding: 10px;
  background: rgba(139, 92, 246, 0.1);
  border: 1px solid rgba(139, 92, 246, 0.2);
  border-radius: 8px;
  color: #c4b5fd;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.15s;
  flex-shrink: 0;
}

.audit-log-load-more:hover {
  background: rgba(139, 92, 246, 0.2);
}

.audit-log-load-more.hidden {
  display: none;
}

.message-context-menu .menu-item-static {
  font-size: 11px;
  color: rgba(255,255,255,0.35);
  padding: 4px 10px 2px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  user-select: none;
}

/* ── Reactions Info Popup ─── */
.reactions-info-popup {
  position: fixed;
  z-index: 130;
  min-width: 220px;
  max-width: 320px;
  max-height: 340px;
  overflow-y: auto;
  background: #1a1c22;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.55);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  animation: ctx-in 0.12s ease-out;
}
.reactions-info-popup.hidden { display: none; }
.reactions-info-popup::-webkit-scrollbar { width: 4px; }
.reactions-info-popup::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 2px; }
.reactions-info-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.reactions-info-header {
  font-size: 16px;
  padding: 4px 8px 2px;
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text);
  font-weight: 600;
}
.reactions-info-header .ri-count {
  font-size: 11px;
  color: var(--muted);
  font-weight: 400;
}
.reactions-info-user {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  border-radius: 8px;
  transition: background 0.12s;
}
.reactions-info-user:hover { background: rgba(255,255,255,0.04); }
.reactions-info-user img {
  width: 24px; height: 24px;
  border-radius: 50%;
  object-fit: cover;
}
.reactions-info-user span {
  font-size: 13px;
  color: #d1d5db;
}
.reactions-info-divider {
  height: 1px;
  background: rgba(255,255,255,0.06);
  margin: 4px 0;
}

.reply-preview {
  margin-top: 8px;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.reply-quote {
  margin-bottom: 6px;
  padding: 6px 8px;
  border-left: 2px solid #60a5fa;
  background: rgba(96, 165, 250, 0.12);
  border-radius: 6px;
  font-size: 12px;
  color: #bfdbfe;
  cursor: pointer;
}

.invite-widget {
  margin-top: 8px;
  border: 1px solid #3f3f46;
  border-radius: 12px;
  background: #18181b;
  padding: 10px;
}

.invite-widget-head {
  font-size: 11px;
  text-transform: uppercase;
  color: #a1a1aa;
  margin-bottom: 6px;
}

.invite-widget-body {
  display: flex;
  align-items: center;
  gap: 10px;
}

.invite-widget-avatar {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  object-fit: cover;
  border: 1px solid #3f3f46;
  background: #27272a;
}

.invite-widget-name {
  font-weight: 600;
  color: #f4f4f5;
}

.invite-widget-meta {
  font-size: 12px;
  color: #a1a1aa;
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
}

.invite-widget-online {
  color: #86efac;
}

.invite-widget-actions {
  margin-top: 8px;
}

.invite-join-btn {
  background: #4f46e5;
  border-color: #6366f1;
}

.invite-join-btn:hover {
  background: #6366f1;
}

@media (max-width: 1024px) {
  #main {
    grid-template-columns: 52px minmax(190px, 40vw) 1fr;
  }
  .sidebar {
    padding: 8px;
    gap: 8px;
  }
  .content-body {
    padding: 8px;
    gap: 8px;
  }
  .members-panel {
    display: none;
  }
  .profile {
    margin-top: 0;
  }
}

@media (max-width: 760px) {
  #main {
    display: flex;
    flex-direction: column;
    height: 100dvh;
    overflow: hidden;
  }
  
  /* Mobile: show back button in chat header */
  .mobile-back-btn {
    display: block;
  }
  
  /* Mobile: show members toggle button */
  .mobile-only {
    display: block;
  }
  
  /* Mobile: hide sidebar when chat is active */
  #main.mobile-chat-active .sidebar {
    display: none;
  }
  
  /* Mobile: hide content when sidebar is active */
  #main:not(.mobile-chat-active) .content {
    display: none;
  }
  
  /* Mobile: sidebar takes full height when chat is not active */
  #main:not(.mobile-chat-active) .sidebar {
    flex: 1;
    max-height: none;
  }
  
  .nav-sidebar {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 4px 6px;
    border-right: none;
    border-bottom: 1px solid var(--border);
    min-height: 44px;
    max-height: 44px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
  }
  .nav-top,
  .nav-bottom {
    flex-direction: row;
    align-items: center;
  }
  .nav-btn {
    width: 36px;
    height: 36px;
    font-size: 16px;
  }
  .nav-divider {
    display: none;
  }
  .server-list {
    flex-direction: row;
    gap: 4px;
  }
  .server-btn {
    width: 34px;
    height: 34px;
    min-width: 34px;
  }
  .server-btn-avatar {
    width: 34px;
    height: 34px;
    min-width: 34px;
  }
  .sidebar {
    border-right: none;
    border-bottom: none;
    min-height: 0;
    padding: 6px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    flex: 1;
    display: flex;
    flex-direction: column;
  }
  .sidebar-scroll {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    flex: 1;
    min-height: 0;
  }
  .brand {
    display: none;
  }
  .server-header-card {
    margin-bottom: 8px;
  }
  .sidebar-section {
    flex-shrink: 0;
  }
  .sidebar-header {
    padding: 4px 2px;
    font-size: 13px;
  }
  .sidebar-header span {
    font-size: 13px;
  }
  .sidebar-section {
    margin-bottom: 8px;
  }
  .tab-buttons {
    gap: 4px;
  }
  .tab {
    padding: 4px 8px;
    font-size: 12px;
  }
  .search input {
    font-size: 13px;
    padding: 6px 8px;
  }
  .list .item {
    padding: 6px 8px;
    gap: 8px;
    min-height: 48px;
  }
  .list .item .avatar {
    width: 32px;
    height: 32px;
  }
  .list .item-main {
    font-size: 14px;
  }
  .list .item-secondary {
    font-size: 12px;
  }
  .channel-item,
  .category-item {
    padding: 8px;
    min-height: 36px;
  }
  .channel-item .channel-name {
    font-size: 14px;
  }
  .profile {
    margin-top: 0;
    padding: 6px 8px;
    flex-shrink: 0;
    border-top: 1px solid var(--border);
    position: relative;
    z-index: 100;
  }
  .profile-menu {
    z-index: 1100;
  }
  .profile-left .avatar-wrap img {
    width: 30px;
    height: 30px;
  }
  .profile-main {
    font-size: 12px;
  }
  .content {
    min-height: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  .topbar {
    display: none;
  }
  .content-body {
    padding: 0;
    flex: 1;
    overflow: hidden;
    position: relative;
  }
  
  /* Mobile members panel - slide in from right */
  .members-panel {
    display: block;
    position: fixed;
    top: 0;
    right: -100%;
    width: 80%;
    max-width: 300px;
    height: 100vh;
    background: #16181d;
    border-left: 1px solid var(--border);
    z-index: 1000;
    transition: right 0.3s ease;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 12px;
  }
  
  .members-panel.mobile-visible {
    right: 0;
  }
  
  .members-panel .members-title {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 12px;
    padding: 8px 4px;
    border-bottom: 1px solid var(--border);
  }
  
  .members-panel .list {
    padding: 0;
  }
  
  .members-panel .list .item {
    padding: 8px 4px;
    min-height: 44px;
  }
  
  /* Overlay when members panel is open */
  .members-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999;
  }
  
  .members-overlay.visible {
    display: block;
  }
  
  .chat.panel {
    border-radius: 0;
    border: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    height: 100%;
  }
  .chat-header {
    padding: 6px 10px;
    min-height: 40px;
    gap: 0;
  }
  .mobile-back-btn {
    font-size: 20px;
    padding: 4px 6px;
    margin-right: 6px;
  }
  .chat-header-left img {
    width: 30px;
    height: 30px;
  }
  .chat-header-left div {
    font-size: 13px;
  }
  .chat-header-right {
    gap: 4px;
  }
  .chat-header-right .icon-btn {
    width: 30px;
    height: 30px;
    font-size: 14px;
    min-width: 30px;
    min-height: 30px;
  }
  .msg-item {
    padding: 6px 8px;
    margin-bottom: 4px;
  }
  .msg-sender {
    font-size: 13px;
    margin-bottom: 2px;
  }
  .msg-text {
    font-size: 14px;
    line-height: 1.5;
  }
  .msg-time {
    font-size: 10px;
  }
  .chat-messages {
    padding: 6px;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .chat-input {
    padding: 4px 6px;
    gap: 4px;
  }
  .chat-input .icon-btn {
    width: 30px;
    height: 30px;
    font-size: 14px;
    min-width: 30px;
    min-height: 30px;
  }
  .chat-input textarea {
    font-size: 14px;
    padding: 6px 8px;
    min-height: 32px;
    max-height: 220px;
  }
  .chat-input button[type="submit"] {
    min-width: 36px;
    min-height: 36px;
  }
  .char-count {
    font-size: 10px;
  }
  .call-panel {
    padding: 8px;
  }
  .call-participants {
    gap: 8px;
  }
  .call-user {
    width: 60px;
  }
  .call-user-avatar {
    width: 48px;
    height: 48px;
  }
  .call-actions {
    gap: 6px;
    padding: 6px 0;
  }
  .call-btn {
    width: 40px;
    height: 40px;
    font-size: 14px;
    min-width: 40px;
    min-height: 40px;
  }
  .modal-card {
    width: 94vw;
    max-width: 94vw;
    max-height: 90vh;
    overflow-y: auto;
    padding: 12px;
    margin: 0 auto;
  }
  .modal-overlay {
    padding: 8px;
  }
  .emoji-picker {
    width: 94vw;
    max-width: 94vw;
    height: 60vh;
    max-height: 60vh;
  }
  .emoji-main {
    font-size: 24px;
  }
  .context-menu,
  .message-context-menu {
    max-width: 90vw;
    font-size: 14px;
  }
  .context-menu button,
  .message-context-menu button {
    padding: 10px 12px;
    min-height: 40px;
  }
  .server-create-card {
    width: 94vw;
  }
  .server-create-header {
    padding: 36px 44px 0;
  }
  .server-create-actions {
    padding: 12px 16px 18px;
  }
  .server-create-fields {
    padding: 4px 16px 0;
  }
  .server-create-card > input {
    width: calc(100% - 32px);
    margin: 0 16px 8px;
  }
  .server-create-label {
    padding: 0;
  }
  .app-settings-card {
    width: 96vw;
    max-height: 92vh;
  }
  .app-settings-layout {
    flex-direction: column;
  }
  .app-settings-sidebar {
    flex-direction: row;
    overflow-x: auto;
    border-right: none;
    border-bottom: 1px solid var(--border);
    padding: 6px;
    gap: 4px;
  }
  .settings-tab-btn {
    white-space: nowrap;
    font-size: 13px;
    padding: 6px 10px;
  }
  .settings-sidebar-danger {
    flex-direction: row;
    gap: 4px;
  }
  .settings-danger-btn {
    font-size: 12px;
    padding: 6px 8px;
    white-space: nowrap;
  }
  .emoji-panel {
    width: 280px;
    max-height: 260px;
  }
  .message-context-menu {
    max-width: 90vw;
  }
  .msg-reactions-bar {
    flex-wrap: wrap;
  }
  .incoming-call-popup {
    width: 90vw;
    max-width: 300px;
  }
  .server-settings-card {
    width: 96vw !important;
  }
  .server-settings-layout {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  .server-settings-sidebar {
    flex-direction: row;
    overflow-x: auto;
    border-right: none;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    border-radius: 16px 16px 0 0;
    padding: 10px;
  }
  .server-settings-sidebar .settings-tab-btn {
    white-space: nowrap;
    font-size: 13px;
  }
  .server-settings-content {
    padding: 16px;
  }
  #avatar-crop-modal .modal-card {
    width: 94vw;
  }
}

/* ═══════════════════════════════════════════════════════
   Custom Server Emojis
   ═══════════════════════════════════════════════════════ */

/* Reaction custom emoji */
.custom-emoji-reaction {
  width: 18px;
  height: 18px;
  vertical-align: middle;
  object-fit: contain;
  border-radius: 2px;
  display: inline-block;
}

/* Inline in messages */
.custom-emoji-inline {
  width: 1.4em;
  height: 1.4em;
  vertical-align: middle;
  object-fit: contain;
  border-radius: 3px;
  display: inline-block;
  margin: 0 1px;
}

/* Emoji picker button */
.custom-emoji-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.custom-emoji-btn:hover { background: rgba(255,255,255,0.1); }

.custom-emoji-picker {
  width: 28px;
  height: 28px;
  object-fit: contain;
  border-radius: 4px;
}

/* Server emoji sidebar button */
.emoji-sidebar-server-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px;
  border-radius: 6px;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  color: var(--text);
  overflow: hidden;
}
.emoji-sidebar-server-btn:hover { background: rgba(255,255,255,0.12); }

.emoji-sidebar-server-icon {
  width: 22px;
  height: 22px;
  border-radius: 5px;
  object-fit: cover;
}

.emoji-sidebar-sep {
  width: 20px;
  height: 1px;
  background: rgba(255,255,255,0.12);
  margin: 3px auto;
}

/* ── Emoji Manager (Server Settings) ─────────────────── */

#ss-tab-emojis {
  gap: 0;
}

.emoji-mgr-upload-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-bottom: 16px;
}

.emoji-mgr-upload-row {
  display: flex;
  gap: 8px;
  align-items: center;
}

.emoji-mgr-upload-btn {
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 8px 16px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  transition: background 0.18s;
}
.emoji-mgr-upload-btn:hover { background: var(--accent-hover, #5865f2cc); }

.emoji-mgr-name-row {
  display: flex;
  align-items: center;
  gap: 4px;
}
.emoji-mgr-colon {
  font-size: 20px;
  font-weight: 700;
  color: #8b5cf6;
  line-height: 1;
}
.emoji-mgr-name-input {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  color: var(--text);
  font-size: 15px;
  padding: 8px 12px;
  width: 220px;
  outline: none;
  transition: border-color 0.2s;
}
.emoji-mgr-name-input:focus { border-color: #8b5cf6; }

.emoji-mgr-preview-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
}
.emoji-mgr-preview-img {
  width: 72px;
  height: 72px;
  object-fit: contain;
  border-radius: 12px;
  background: rgba(139,92,246,0.08);
  border: 2px solid rgba(139,92,246,0.2);
  padding: 4px;
}

.emoji-mgr-slot-counter {
  font-size: 13px;
  color: var(--muted);
  background: rgba(255,255,255,0.04);
  padding: 6px 12px;
  border-radius: 8px;
}

.emoji-mgr-add-btn {
  background: #8b5cf6;
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 10px 24px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  align-self: flex-start;
  transition: background 0.18s, transform 0.1s;
}
.emoji-mgr-add-btn:hover { background: #7c3aed; transform: translateY(-1px); }
.emoji-mgr-add-btn:active { transform: translateY(0); }

.emoji-mgr-error {
  color: #f04747;
  font-size: 13px;
  background: rgba(240,71,71,0.1);
  border-radius: 8px;
  padding: 8px 12px;
  border-left: 3px solid #f04747;
}

.emoji-mgr-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(139,92,246,0.3), transparent);
  margin: 8px 0 16px;
}

.emoji-mgr-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 8px;
}

.emoji-mgr-empty {
  color: var(--muted);
  font-size: 15px;
  text-align: center;
  padding: 40px 0;
  grid-column: 1 / -1;
}

.emoji-mgr-row {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(255,255,255,0.03);
  border-radius: 12px;
  padding: 10px 14px;
  border: 1px solid rgba(255,255,255,0.06);
  transition: background 0.15s, border-color 0.15s;
}
.emoji-mgr-row:hover {
  background: rgba(139,92,246,0.06);
  border-color: rgba(139,92,246,0.15);
}

.emoji-mgr-row-img-wrap {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(139,92,246,0.08);
  border-radius: 10px;
}
.emoji-mgr-row-img {
  width: 36px;
  height: 36px;
  object-fit: contain;
  border-radius: 4px;
}

.emoji-mgr-row-info {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  min-width: 0;
}

.emoji-mgr-row-name-wrap {
  display: flex;
  align-items: center;
  gap: 2px;
}
.emoji-mgr-row-colon {
  font-size: 15px;
  color: #8b5cf6;
  font-weight: 700;
}
.emoji-mgr-row-name {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 6px;
  color: var(--text);
  font-size: 13px;
  padding: 5px 8px;
  width: 120px;
  outline: none;
  transition: border-color 0.2s;
}
.emoji-mgr-row-name:focus { border-color: #8b5cf6; }

.emoji-mgr-row-save {
  background: rgba(139,92,246,0.12);
  border: none;
  border-radius: 6px;
  color: #c4b5fd;
  font-size: 12px;
  padding: 4px 12px;
  cursor: pointer;
  align-self: flex-start;
  transition: background 0.15s;
  font-weight: 500;
}
.emoji-mgr-row-save:hover { background: rgba(139,92,246,0.25); color: #fff; }

.emoji-mgr-row-delete {
  flex-shrink: 0;
  background: rgba(240,71,71,0.08);
  border: none;
  border-radius: 8px;
  color: #f04747;
  font-size: 14px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
}
.emoji-mgr-row-delete:hover { background: rgba(240,71,71,0.2); transform: scale(1.1); }

@media (max-width: 480px) {
  .list .item {
    min-height: 52px;
    padding: 8px;
  }
  .channel-item,
  .category-item {
    min-height: 40px;
    padding: 10px 8px;
  }
  .channel-item .channel-name {
    font-size: 15px;
  }
  .list .item-main {
    font-size: 15px;
  }
  .members-panel {
    width: 85%;
    max-width: 320px;
  }
  .members-panel .list .item {
    min-height: 48px;
    padding: 10px 6px;
  }
  .chat-input textarea {
    font-size: 16px;
    padding: 8px 10px;
    /* Prevent iOS zoom on focus */
  }
  .search input {
    font-size: 16px;
  }
  .chat-input .icon-btn {
    width: 34px;
    height: 34px;
    min-width: 34px;
    min-height: 34px;
  }
  .chat-input button[type="submit"] {
    min-width: 40px;
    min-height: 40px;
  }
  .nav-btn {
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
  }
  .server-btn,
  .server-btn-avatar {
    width: 38px;
    height: 38px;
    min-width: 38px;
    min-height: 38px;
  }
  .server-create-avatar-circle {
    width: 64px;
    height: 64px;
  }
  .server-create-header h3 {
    font-size: 17px;
  }
  .server-create-btn {
    padding: 10px;
    font-size: 14px;
  }
  .chat-header-left div {
    font-size: 12px;
  }
  #chat-title {
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .profile-call-info {
    display: none;
  }
  .mobile-back-btn {
    font-size: 22px;
    padding: 6px 8px;
    margin-right: 8px;
  }
  .channel-item,
  .category-item {
    min-height: 40px;
    padding: 8px;
  }
  .voice-participants {
    gap: 4px;
  }
  .voice-participant-avatar {
    width: 20px;
    height: 20px;
  }
  #auth-panel {
    padding: 28px 20px 24px;
    border-radius: 16px;
  }
  .auth-title {
    font-size: 18px;
  }
  .auth-bg-orb { filter: blur(80px); }
  
  /* Prevent text selection on buttons for better mobile UX */
  button, .nav-btn, .icon-btn, .call-btn {
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    -webkit-user-select: none;
  }
  
  /* Better scrolling on iOS */
  .list, .chat-messages, .sidebar-scroll, .nav-sidebar {
    -webkit-overflow-scrolling: touch;
  }
}

/* ═══════════════════════════════════════════════════════
   VOISIO PREMIUM REDESIGN — Override & Enhancement Layer
   ═══════════════════════════════════════════════════════ */

/* ── Global body background ── */
body {
  background: #08090c;
}

/* ── App loading splash ── */
.app-loading-splash {
  background: #0a0b0f;
}

/* ── Auth background upgrade ── */
.auth-bg {
  background: radial-gradient(ellipse at 20% 20%, #1a0a3e 0%, #0a0b0f 60%);
}

/* ── Sidebar brand logo ── */
.brand {
  padding: 4px 8px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  margin-bottom: 4px;
  width: 100%;
  justify-content: flex-start;
  animation: none;
}

.brand-icon {
  background: linear-gradient(135deg, #5865f2, #7c5cfc);
  box-shadow: 0 4px 12px rgba(88,101,242,0.35);
}

.brand-text {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.5px;
  background: linear-gradient(135deg, #e3e5e8, #a0a6b8);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Sidebar header sections ── */
.sidebar-header {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  padding: 4px 8px;
}

/* ── Nav divider ── */
.nav-divider {
  width: 32px;
  height: 1px;
  background: rgba(255,255,255,0.08);
  margin: 4px 0;
}

/* ── Server list container ── */
.server-list {
  max-height: none;
  flex: 1;
  overflow-y: auto;
  overflow-x: visible;
  padding: 0;
  scrollbar-width: none;
}

.server-list::-webkit-scrollbar { display: none; }

/* ── Nav top / bottom groups ── */
.nav-top, .nav-bottom {
  gap: 6px;
  overflow: visible;
}

.nav-bottom {
  gap: 6px;
}

/* ── Pill item (friend/channel row) ── */
.pill {
  border-radius: 10px;
  transition: background 0.12s;
}

.pill img:not(.voice-mini-avatar) {
  border-radius: 50%;
  width: 38px;
  height: 38px;
}

/* ── Chat header redesign ── */
.chat-header {
  padding: 0 0 8px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  margin-bottom: 0;
  min-height: 44px;
  align-items: center;
}

.chat-header-left {
  gap: 12px;
}

#chat-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
}

#chat-subtitle {
  font-size: 12px;
}

.chat-avatar {
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.06);
}

/* ── Content section ── */
.content {
  background: var(--bg);
}

/* ── Members panel ── */
.members-panel {
  background: var(--sidebar-bg);
  border: 1px solid rgba(255,255,255,0.04);
  border-radius: 12px;
  padding: 12px 8px;
}

.members-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  padding: 0 8px;
  margin-bottom: 12px;
}

/* ── Modal overlay ── */
.modal-overlay {
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* ── Modal card ── */
.modal-card {
  background: #13151d;
  border: 1px solid rgba(255,255,255,0.06);
  box-shadow: 0 24px 80px rgba(0,0,0,0.8), 0 0 0 0.5px rgba(255,255,255,0.04);
  border-radius: 16px;
}

/* ── Call panel redesign ── */
.call-panel {
  background: #12151f;
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 16px;
}

/* ── Call buttons ── */
.call-btn {
  border-radius: 50%;
  transition: transform 0.15s, box-shadow 0.15s, filter 0.15s;
}

.call-btn:hover {
  transform: scale(1.08);
  opacity: 1;
}

.call-btn.accept {
  background: #23a55a;
  box-shadow: 0 4px 16px rgba(35,165,90,0.35);
}

.call-btn.reject,
.call-btn.hangup {
  background: #f23f42;
  box-shadow: 0 4px 16px rgba(242,63,66,0.35);
}

/* ── Incoming call popup redesign ── */
.incoming-call-popup {
  background: #13151d !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 20px !important;
  box-shadow: 0 24px 64px rgba(0,0,0,0.8) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

/* ── Member profile popup ── */
.member-profile-popup {
  background: #13151d;
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.75), 0 0 0 0.5px rgba(255,255,255,0.04);
}

.member-profile-banner {
  background: linear-gradient(135deg, rgba(88,101,242,0.4), rgba(124,92,252,0.3));
  border-radius: 16px 16px 0 0;
}

.member-profile-avatar {
  border-color: #13151d;
}

.member-profile-avatar-wrap .status-dot {
  border-color: #13151d;
}

/* ── Reaction bar ── */
.msg-reactions-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}

.msg-reaction {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 20px;
  font-size: 12px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  user-select: none;
}

.msg-reaction:hover {
  background: rgba(255,255,255,0.09);
  border-color: rgba(255,255,255,0.12);
}

.msg-reaction.reacted-by-me {
  background: rgba(88,101,242,0.15);
  border-color: rgba(88,101,242,0.3);
}

/* ── Reply preview ── */
.reply-preview {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 12px;
  background: rgba(255,255,255,0.04);
  border-left: 3px solid var(--accent);
  border-radius: 0 8px 8px 0;
  margin-bottom: 4px;
  font-size: 12px;
  color: var(--muted);
}

/* ── Status dots ── */
.status-dot {
  border-color: var(--sidebar-bg);
}

.profile .status-dot {
  border-color: var(--nav-bg);
}

/* ── Unread badge ── */
.unread-badge {
  background: var(--danger);
  font-size: 11px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
}

/* ── Nav/server badge ── */
.nav-badge,
.server-unread-badge {
  background: var(--danger);
  font-size: 9px;
  min-width: 14px;
  height: 14px;
  border: 2px solid var(--nav-bg);
}

/* ── Profile menu card ── */
.profile-menu {
  background: #13151d;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  box-shadow: 0 24px 64px rgba(0,0,0,0.75), 0 0 0 0.5px rgba(255,255,255,0.03);
}

.pm-banner {
  border-radius: 14px 14px 0 0;
}

.pm-avatar {
  border-color: #13151d !important;
}

.pm-avatar-wrap .status-dot {
  border-color: #13151d !important;
}

.pm-settings-btn {
  background: rgba(255,255,255,0.07) !important;
  border-radius: 8px !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  transition: background 0.15s, transform 0.15s !important;
}

.pm-settings-btn:hover {
  background: rgba(255,255,255,0.12) !important;
  transform: rotate(30deg) !important;
}

/* ── App settings modal ── */
.app-settings-card {
  background: #12141b !important;
}

.app-settings-sidebar {
  background: #0d0f15 !important;
}

/* ── Server settings ── */
.server-settings-card {
  background: #12141b !important;
}

/* ── Pill/Channel items hover glow ── */
.channel-item:hover,
.server-category-header:hover {
  background: rgba(255,255,255,0.04) !important;
}

.channel-item.selected-chat {
  background: rgba(88,101,242,0.12) !important;
}

/* ── Chat panel block ── */
#chat-panel.panel {
  background: transparent;
  border: none;
  padding: 0;
  border-radius: 0;
}

/* ── Server header card ── */
.server-header-banner {
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.05);
}

/* ── Auth panel glass ── */
#auth-panel {
  background: rgba(15,17,24,0.8) !important;
  box-shadow: 0 20px 80px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.06), inset 0 1px 0 rgba(255,255,255,0.06) !important;
}

/* ── Auth title gradient ── */
.logo-icon {
  background: linear-gradient(135deg, #5865f2, #7c5cfc) !important;
  box-shadow: 0 6px 20px rgba(88,101,242,0.4);
}

/* ── Tabs in requests panel ── */
.tab {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px;
  transition: background 0.15s, border-color 0.15s;
}

.tab.active {
  background: var(--accent);
  border-color: var(--accent);
}

/* ── Search input in requests ── */
#search-input {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 10px;
  transition: border-color 0.2s;
}

#search-input:focus {
  outline: none;
  border-color: rgba(88,101,242,0.4);
  box-shadow: 0 0 0 3px rgba(88,101,242,0.08);
}

/* ── Profile call info strip ── */
.profile-call-info:not(.hidden) {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  background: rgba(35,165,90,0.1);
  border-radius: 8px;
  padding: 3px 8px;
  border: 1px solid rgba(35,165,90,0.2);
  position: relative;
  gap: 6px;
  outline: none;
  font-size: 10px;
  color: #aaa;
  margin-left: auto;
  white-space: nowrap;
  pointer-events: auto;
  cursor: pointer;
}

.profile-call-duration {
  color: #23a55a !important;
  font-weight: 600;
}

/* Quality dot */
.profile-call-quality-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  background: #6b7280;
}
.profile-call-quality-dot.q-good { background: #23a55a; box-shadow: 0 0 6px rgba(35,165,90,0.6); }
.profile-call-quality-dot.q-ok   { background: #84cc16; }
.profile-call-quality-dot.q-mid  { background: #f59e0b; }
.profile-call-quality-dot.q-bad  { background: #ef4444; box-shadow: 0 0 6px rgba(239,68,68,0.6); }

/* Detailed tooltip on hover/focus */
.profile-call-tooltip {
  position: absolute;
  bottom: calc(100% + 8px);
  right: 0;
  width: 240px;
  background: #16181d;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  padding: 12px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.6);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity 0.15s, transform 0.15s, visibility 0.15s;
  z-index: 200;
  pointer-events: none;
}
.profile-call-info:hover .profile-call-tooltip,
.profile-call-info:focus .profile-call-tooltip,
.profile-call-info:focus-within .profile-call-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.pct-title {
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.pct-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: #9ca3af;
  padding: 3px 0;
}
.pct-row b { color: #e5e7eb; font-weight: 600; }
.pct-row b.q-good { color: #23a55a; }
.pct-row b.q-ok   { color: #84cc16; }
.pct-row b.q-mid  { color: #f59e0b; }
.pct-row b.q-bad  { color: #ef4444; }

.pct-graph {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 30px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.pct-bar {
  flex: 1;
  min-width: 2px;
  border-radius: 1px;
  background: #6b7280;
}
.pct-bar.q-good { background: #23a55a; }
.pct-bar.q-ok   { background: #84cc16; }
.pct-bar.q-mid  { background: #f59e0b; }
.pct-bar.q-bad  { background: #ef4444; }

/* ── Message code blocks ── */
.msg-code-block {
  background: rgba(0,0,0,0.4);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 8px;
  padding: 12px 14px;
}

.msg-code-inline {
  background: rgba(0,0,0,0.4);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 5px;
  padding: 2px 6px;
  font-size: 13px;
}

/* ── System message cards ── */
.system-message-call-card {
  background: rgba(88,101,242,0.08);
  border: 1px solid rgba(88,101,242,0.12);
  border-radius: 12px;
  color: #9ba5ff;
}

/* ── Attachment card ── */
.composer-attachment-card {
  background: #1a1d26;
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px;
}

/* ── Upload progress ── */
#upload-progress {
  color: var(--muted);
  font-size: 12px;
}

/* ── Voice channel members in sidebar ── */
.voice-mini-avatar {
  border: 1.5px solid var(--sidebar-bg);
  border-radius: 50%;
}

/* ── Category header ── */
.server-category-header {
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--muted);
  border-radius: 8px;
  transition: color 0.15s;
}

/* ── Admin panel button positioning ── */
#btn-admin-panel {
  background: rgba(88,101,242,0.15);
  border: 1px solid rgba(88,101,242,0.25);
  border-radius: 10px;
  color: #a5b4fc;
  transition: background 0.15s;
}

#btn-admin-panel:hover {
  background: rgba(88,101,242,0.25);
}

/* ── Emoji panel ── */
.emoji-panel {
  background: #13151d;
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 14px;
  box-shadow: 0 16px 48px rgba(0,0,0,0.65);
}

.emoji-panel-sidebar {
  background: #0d0f15;
  border-right: 1px solid rgba(255,255,255,0.05);
  border-radius: 14px 0 0 14px;
}

/* ── Quick reactions bar ── */
.msg-quick-react-bar {
  display: none;
  position: absolute;
  right: 0;
  top: -36px;
  background: #13151d;
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 10px;
  padding: 3px 4px;
  gap: 2px;
  align-items: center;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
  z-index: 10;
}

.msg-item:hover .msg-quick-react-bar {
  display: flex;
}

/* ── Smooth transitions for all interactive elements ── */
.pill,
.channel-item,
.server-category-header,
.role-list-item,
.menu-item,
.settings-tab-btn,
.app-settings-sidebar .settings-tab-btn,
.server-settings-sidebar .settings-tab-btn {
  transition: background 0.12s, color 0.12s;
}

/* ── Chat header icon buttons (override) ── */
.chat-header-right .icon-btn {
  color: var(--muted);
  background: transparent;
  border-radius: 8px;
  transition: background 0.15s, color 0.15s;
}

.chat-header-right .icon-btn:hover {
  background: rgba(255,255,255,0.06);
  color: var(--text);
}

/* ── Message author line ── */
.msg-author img {
  border-radius: 50%;
  width: 18px;
  height: 18px;
}

/* ── Mention picker ── */
.mention-picker {
  background: #13151d;
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.6);
  padding: 5px;
  margin-bottom: 6px;
}

/* ── Sidebar scroll area ── */
.sidebar-scroll {
  border-radius: 8px;
}

/* ── Panel chat area ── */
#panel-chats,
#panel-requests {
  gap: 4px;
}

/* ── Text format menu ── */
#text-format-menu {
  background: #13151d;
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.6);
  padding: 5px;
}

/* ── Status selector leftovers ── */
.pm-status-change-btn {
  display: none !important;
}

/* ── Input globally ── */
input:not([type="range"]):not([type="checkbox"]):not([type="color"]):not([type="file"]),
textarea,
select {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 10px;
  color: var(--text);
  transition: border-color 0.2s, box-shadow 0.2s;
}

input:not([type="range"]):not([type="checkbox"]):not([type="color"]):not([type="file"]):focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: rgba(88,101,242,0.45);
  box-shadow: 0 0 0 3px rgba(88,101,242,0.08);
}

/* ── Button base ── */
button {
  font-family: inherit;
}

/* ── Primary action buttons ── */
.auth-btn,
.btn-primary,
.server-create-btn.primary,
.channel-editor-save-btn,
.role-editor-save-btn,
.pm-btn-save {
  background: linear-gradient(135deg, #5865f2, #7c5cfc) !important;
  box-shadow: 0 4px 16px rgba(88,101,242,0.3) !important;
  transition: transform 0.15s, box-shadow 0.2s, filter 0.15s !important;
}

.auth-btn:hover,
.btn-primary:hover,
.server-create-btn.primary:hover,
.channel-editor-save-btn:hover,
.role-editor-save-btn:hover,
.pm-btn-save:hover {
  filter: brightness(1.1);
  box-shadow: 0 6px 24px rgba(88,101,242,0.45) !important;
  transform: translateY(-1px);
  opacity: 1;
}

/* ── Context menu separator ── */
.ctx-separator {
  height: 1px;
  background: rgba(255,255,255,0.06);
  margin: 4px 8px;
  flex-shrink: 0;
}

/* ── Server category collapse arrow ── */
.server-category-header::before {
  opacity: 0.5;
  transition: opacity 0.15s;
}
.server-category-header:hover::before {
  opacity: 0.8;
}

/* ── Tooltip-like hover titles ── */
[title] {
  position: relative;
}

/* ── Scrollbar for messages ── */
.chat-messages::-webkit-scrollbar { width: 3px; }
.chat-messages::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.08);
  border-radius: 999px;
}
.chat-messages::-webkit-scrollbar-thumb:hover {
  background: rgba(255,255,255,0.15);
}

/* ── Profile trigger hover improvement ── */
.profile-left.clickable {
  transition: background 0.15s;
}

.profile-left.clickable:hover {
  /* Background only — geometry stays fixed (see base rule for padding/margin). */
  background: rgba(255,255,255,0.06) !important;
}

/* ── Recording overlay ── */
.recording-overlay {
  background: rgba(8,9,12,0.95) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

/* ── Group option (checkboxes) ── */
.group-option {
  border-radius: 10px;
  padding: 8px 10px;
  transition: background 0.12s;
}

.group-option:hover {
  background: rgba(255,255,255,0.04);
}

/* ── Toggle switches (role perms) ── */
.role-perm-toggle {
  background: rgba(255,255,255,0.1) !important;
}

.role-perm-toggle.on {
  background: rgba(88,101,242,0.4) !important;
}

.role-perm-toggle.on::after {
  background: #5865f2 !important;
}

/* ── Ban/kick modal ── */
.modal-card {
  animation: modal-in 0.2s cubic-bezier(0.34,1.4,0.64,1) both;
}

@keyframes modal-in {
  from { opacity: 0; transform: scale(0.94) translateY(8px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* ── Role editor ── */
.role-editor-section {
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.04);
  border-radius: 12px;
}

/* ── Tablet sidebar shrink ── */
@media (max-width: 1100px) and (min-width: 761px) {
  #main {
    grid-template-columns: 72px 260px 1fr;
  }
}

/* ── App version badge (corner) ── */
#voisio-version-badge {
  position: fixed;
  right: 8px;
  bottom: 6px;
  z-index: 99999;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.28);
  pointer-events: none;
  user-select: none;
  font-family: "Inter", system-ui, -apple-system, sans-serif;
}

/* ── Download client button + modal ── */
/* Hidden automatically inside the desktop app (body.is-desktop) */
body.is-desktop .desktop-hide { display: none !important; }

/* Download button in the topbar (next to the admin shield) */
.topbar-download-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  border: none;
  border-radius: 999px;
  background: linear-gradient(135deg, #8b5cf6, #6d28d9);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(139, 92, 246, 0.4);
  transition: transform 0.15s, filter 0.15s;
}
.topbar-download-btn:hover { transform: translateY(-1px); filter: brightness(1.08); }
.topbar-download-btn:active { transform: translateY(0); }

/* Version next to the "Voisio" brand text */
.brand-version {
  font-size: 11px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.35);
  margin-left: 6px;
  letter-spacing: 0;
}

.download-android-auth-btn,
.download-client-auth-btn {
  margin-top: 14px;
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 16px;
  border: 1px solid rgba(139, 92, 246, 0.4);
  border-radius: 10px;
  background: rgba(139, 92, 246, 0.12);
  color: #c4b5fd;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  box-sizing: border-box;
}
.download-android-auth-btn {
  margin-top: 8px;
  border-color: rgba(31, 191, 154, 0.4);
  background: rgba(31, 191, 154, 0.12);
  color: #9fe8d4;
}
.download-android-auth-btn.disabled {
  opacity: 0.5;
  pointer-events: none;
}
.download-android-auth-btn:hover {
  background: rgba(31, 191, 154, 0.2);
}

.download-client-auth-btn {
  transition: background 0.15s, color 0.15s;
}
.download-client-auth-btn:hover {
  background: rgba(139, 92, 246, 0.22);
  color: #fff;
}

.download-client-card {
  width: 420px;
  max-width: 94vw;
  padding: 0;
  overflow: hidden;
  position: relative;
  text-align: center;
}

.download-client-hero {
  padding: 32px 24px 16px;
  background: linear-gradient(160deg, rgba(139, 92, 246, 0.25), rgba(109, 40, 217, 0.05));
}
.download-client-logo {
  width: 64px;
  height: 64px;
  margin: 0 auto 14px;
  border-radius: 18px;
  background: linear-gradient(135deg, #8b5cf6, #6d28d9);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 34px;
  font-weight: 800;
  color: #fff;
  box-shadow: 0 8px 24px rgba(139, 92, 246, 0.5);
}
.download-client-hero h3 {
  margin: 0 0 6px;
  font-size: 20px;
  color: #fff;
}
.download-client-sub {
  margin: 0;
  font-size: 13px;
  color: #9ca3af;
  line-height: 1.5;
}

.download-client-features {
  list-style: none;
  margin: 0;
  padding: 16px 28px 4px;
  text-align: left;
}
.download-client-features li {
  font-size: 13.5px;
  color: #d1d5db;
  padding: 6px 0;
}

.download-client-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 14px 24px 8px;
  width: calc(100% - 48px);
  padding: 13px;
  border: none;
  border-radius: 12px;
  background: linear-gradient(135deg, #8b5cf6, #6d28d9);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.15s, filter 0.15s;
}
.download-client-btn:hover { transform: translateY(-1px); filter: brightness(1.08); }
.download-client-btn.disabled { opacity: 0.5; pointer-events: none; }

.download-client-version {
  font-size: 12px;
  color: #6b7280;
  padding: 0 24px 22px;
}

@media (max-width: 760px) {
  .download-client-fab span { display: none; }
  .download-client-fab { padding: 10px; }
}


/* Typing indicator above composer */
.typing-indicator {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 0;
  padding: 0 16px;
  overflow: hidden;
  opacity: 0;
  transform: translateY(4px);
  font-size: 12px;
  color: var(--muted, #9aa0a6);
  transition: height .18s ease, opacity .18s ease, transform .18s ease;
  pointer-events: none;
}
.typing-indicator.visible { height: 22px; opacity: 1; transform: none; }
.typing-indicator b { color: var(--text, #e6e6e6); font-weight: 600; }
.typing-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.typing-dots { display: inline-flex; gap: 3px; flex-shrink: 0; }
.typing-dots i {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--accent, #5865f2);
  animation: typing-bounce 1.2s infinite ease-in-out;
}
.typing-dots i:nth-child(2) { animation-delay: .15s; }
.typing-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes typing-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: .45; }
  30% { transform: translateY(-4px); opacity: 1; }
}

/* ===== SVG icons ===== */
.vi-icon { display: inline-block; vertical-align: middle; flex-shrink: 0; }
.ctx-icon .vi-icon, .icon-emoji .vi-icon { vertical-align: -3px; }
.channel-default-icon { display: inline-flex; opacity: .7; vertical-align: -2px; }
.owner-crown { color: #f0b232; display: inline-flex; vertical-align: -1px; }
.call-user-muted .vi-icon, .call-user-headphones .vi-icon { color: #fff; }

/* ===== Toasts ===== */
.ui-toasts { position: fixed; right: 20px; bottom: 20px; z-index: 100000; display: flex; flex-direction: column; gap: 8px; max-width: min(380px, calc(100vw - 40px)); pointer-events: none; }
.ui-toast { pointer-events: auto; display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: 10px; background: #1e1f22; color: #e6e6e6; box-shadow: 0 8px 24px rgba(0,0,0,.35); border-left: 3px solid #5865f2; font-size: 14px; line-height: 1.35; animation: ui-toast-in .22s ease; }
.ui-toast.success { border-left-color: #23a55a; } .ui-toast.success .ui-toast-icon { color: #23a55a; }
.ui-toast.error { border-left-color: #f23f43; } .ui-toast.error .ui-toast-icon { color: #f23f43; }
.ui-toast.warning { border-left-color: #f0b232; } .ui-toast.warning .ui-toast-icon { color: #f0b232; }
.ui-toast.info .ui-toast-icon { color: #5865f2; }
.ui-toast-icon { display: inline-flex; margin-top: 1px; }
.ui-toast-text { flex: 1; word-break: break-word; }
.ui-toast-close { background: none; border: 0; color: #949ba4; cursor: pointer; font-size: 12px; padding: 2px; }
.ui-toast-close:hover { color: #fff; }
.ui-toast.leaving { opacity: 0; transform: translateX(16px); transition: .2s; }
@keyframes ui-toast-in { from { opacity: 0; transform: translateY(10px); } }

/* ===== Dialogs ===== */
.ui-dialog-backdrop { position: fixed; inset: 0; z-index: 100001; background: rgba(0,0,0,.55); display: flex; align-items: center; justify-content: center; animation: ui-fade .15s ease; }
.ui-dialog-backdrop.leaving { opacity: 0; transition: opacity .15s; }
.ui-dialog { width: min(420px, calc(100vw - 32px)); background: #313338; color: #e6e6e6; border-radius: 12px; padding: 20px; box-shadow: 0 16px 48px rgba(0,0,0,.5); animation: ui-pop .18s ease; }
.ui-dialog-title { font-size: 17px; font-weight: 700; margin-bottom: 8px; }
.ui-dialog-message { font-size: 14px; color: #b5bac1; line-height: 1.45; margin-bottom: 16px; }
.ui-dialog-input { width: 100%; box-sizing: border-box; padding: 10px 12px; margin-bottom: 16px; border-radius: 8px; border: 1px solid #1e1f22; background: #1e1f22; color: #fff; font-size: 14px; outline: none; }
.ui-dialog-input:focus { border-color: #5865f2; }
.ui-dialog-actions { display: flex; justify-content: flex-end; gap: 8px; }
.ui-dialog-btn { padding: 9px 16px; border-radius: 8px; border: 0; cursor: pointer; font-size: 14px; font-weight: 600; }
.ui-dialog-btn.cancel { background: transparent; color: #dbdee1; }
.ui-dialog-btn.cancel:hover { text-decoration: underline; }
.ui-dialog-btn.ok { background: #5865f2; color: #fff; }
.ui-dialog-btn.ok:hover { background: #4752c4; }
.ui-dialog-btn.ok.danger { background: #da373c; }
.ui-dialog-btn.ok.danger:hover { background: #a12828; }
@keyframes ui-fade { from { opacity: 0; } }
@keyframes ui-pop { from { opacity: 0; transform: scale(.95); } }

/* ===== Unread separator ===== */
.unread-separator { display: flex; align-items: center; gap: 8px; margin: 10px 0; color: #f23f43; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
.unread-separator::before, .unread-separator::after { content: ""; flex: 1; height: 1px; background: #f23f43; opacity: .6; }

/* ===== Jump to new messages ===== */
.new-messages-jump { position: absolute; left: 50%; bottom: 96px; transform: translate(-50%, 12px); opacity: 0; pointer-events: none; z-index: 30; display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 999px; border: 0; background: #2b2d31; color: #dbdee1; font-size: 13px; font-weight: 600; box-shadow: 0 6px 18px rgba(0,0,0,.35); cursor: pointer; transition: opacity .18s, transform .18s; }
.new-messages-jump.visible { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.new-messages-jump.has-new { background: #5865f2; color: #fff; }

/* ===== Hover actions on messages ===== */
.msg-item { position: relative; }
.msg-hover-actions { position: absolute; top: -14px; right: 12px; display: none; gap: 2px; padding: 2px; border-radius: 8px; background: #2b2d31; border: 1px solid rgba(255,255,255,.06); box-shadow: 0 4px 12px rgba(0,0,0,.3); z-index: 5; }
.msg-item:hover .msg-hover-actions { display: flex; }
.mha-btn { width: 30px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 6px; background: transparent; color: #b5bac1; cursor: pointer; font-size: 16px; }
.mha-btn:hover { background: rgba(255,255,255,.08); color: #fff; }
.mha-btn img { width: 18px; height: 18px; object-fit: contain; }
@media (hover: none) { .msg-hover-actions { display: none !important; } }

/* ===== Editing ===== */
.msg-item.editing .bubble { outline: 2px solid #5865f2; outline-offset: 2px; }
.msg-edited { font-size: 11px; color: #949ba4; margin: 0 4px; }
.edit-banner { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.edit-banner kbd { background: rgba(255,255,255,.08); border-radius: 4px; padding: 0 4px; font-size: 11px; }

/* ===== Jump highlight ===== */
.msg-item.jump-highlight { animation: jump-flash 2s ease; border-radius: 8px; }
@keyframes jump-flash { 0%, 30% { background: rgba(88,101,242,.28); } 100% { background: transparent; } }

/* ===== Voice channel users in sidebar ===== */
.voice-user-list { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; }
.voice-user-row { display: flex; align-items: center; gap: 6px; padding: 2px 4px; border-radius: 6px; font-size: 13px; color: #b5bac1; }
.voice-user-avatar { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px transparent; transition: box-shadow .12s; }
.voice-user-row.speaking .voice-user-avatar { box-shadow: 0 0 0 2px #23a55a; }
.voice-user-row.speaking .voice-user-name { color: #fff; }
.voice-user-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.voice-row-flags { margin-left: auto; display: inline-flex; align-items: center; gap: 3px; flex-shrink: 0; }
.voice-row-flag { display: inline-flex; color: #f23f43; }
.voice-row-flag svg { display: block; }
.voice-row-live { font-size: 9px; font-weight: 800; letter-spacing: 0.04em; color: #fff; background: #ed4245; border-radius: 3px; padding: 0 4px; line-height: 14px; }
.voice-user-more { font-size: 12px; color: #949ba4; padding-left: 30px; }

/* ===== Unread state ===== */
.channel-item.has-unread .channel-name-text { color: #fff; font-weight: 700; }
.server-btn { position: relative; }
.server-unread-pill { position: absolute; left: -10px; top: 50%; width: 4px; height: 0; border-radius: 0 4px 4px 0; background: #fff; transform: translateY(-50%); transition: height .15s; }
.server-btn.has-unread .server-unread-pill { height: 8px; }
.server-btn.has-unread:hover .server-unread-pill { height: 20px; }

/* ===== Call quality ===== */
.call-quality { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; font-size: 12px; color: #b5bac1; cursor: default; }
.cq-bars { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; }
.cq-bars i { width: 3px; background: #4e5058; border-radius: 1px; }
.cq-bars i:nth-child(1) { height: 4px; } .cq-bars i:nth-child(2) { height: 8px; } .cq-bars i:nth-child(3) { height: 12px; }
.call-quality.good .cq-bars i { background: #23a55a; }
.call-quality.ok .cq-bars i:nth-child(-n+2) { background: #f0b232; }
.call-quality.bad .cq-bars i:nth-child(1) { background: #f23f43; }

/* ===== Connection banner ===== */
.connection-banner { position: fixed; top: 0; left: 50%; transform: translate(-50%, -100%); z-index: 99999; display: flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 0 0 10px 10px; background: #f0b232; color: #1e1f22; font-size: 13px; font-weight: 600; transition: transform .2s; }
.connection-banner.visible { transform: translate(-50%, 0); }
.connection-banner.restored { transform: translate(-50%, 0); background: #23a55a; color: #fff; }

.chat-header-btn.icon-only { padding-left: 8px; padding-right: 8px; }

/* ===== Chat search (side panel) ===== */
.chat-search-panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(400px, 100%); display: flex; flex-direction: column; background: #2b2d31; border-left: 1px solid rgba(255,255,255,.06); box-shadow: -12px 0 32px rgba(0,0,0,.35); z-index: 40; transform: translateX(105%); visibility: hidden; transition: transform .22s cubic-bezier(.2,.8,.2,1), visibility .22s; }
.chat-search-panel.visible { transform: none; visibility: visible; }
.cs-top { display: flex; align-items: center; gap: 8px; padding: 12px; }
.cs-input-wrap { flex: 1; display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 10px; background: #1e1f22; border-radius: 8px; border: 1px solid transparent; transition: border-color .15s; }
.cs-input-wrap:focus-within { border-color: #5865f2; }
.cs-input-wrap input { flex: 1; min-width: 0; background: transparent; border: 0; outline: none; color: #f2f3f5; font-size: 14px; }
.cs-icon { color: #949ba4; display: inline-flex; }
.cs-clear, .cs-close, .cs-nav button { display: inline-flex; align-items: center; justify-content: center; border: 0; background: transparent; color: #949ba4; cursor: pointer; border-radius: 6px; }
.cs-clear { width: 22px; height: 22px; background: rgba(255,255,255,.08); border-radius: 50%; }
.cs-close { width: 32px; height: 32px; }
.cs-clear:hover, .cs-close:hover, .cs-nav button:hover { color: #fff; background: rgba(255,255,255,.1); }
.cs-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 12px 8px; }
.cs-chip { display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 10px; border-radius: 999px; border: 1px solid rgba(255,255,255,.08); background: transparent; color: #b5bac1; font-size: 12px; font-weight: 600; cursor: pointer; transition: .12s; }
.cs-chip:hover { background: rgba(255,255,255,.06); color: #fff; }
.cs-chip.active { background: #5865f2; border-color: #5865f2; color: #fff; }
.cs-filters { display: flex; gap: 6px; padding: 0 12px 10px; flex-wrap: wrap; }
.cs-select { flex: 1; min-width: 120px; display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 8px; border-radius: 6px; background: #1e1f22; color: #949ba4; }
.cs-select select, .cs-select input { flex: 1; min-width: 0; background: transparent; border: 0; outline: none; color: #dbdee1; font-size: 12px; color-scheme: dark; }
.cs-select select option { background: #1e1f22; }
.cs-sort { height: 30px; padding: 0 10px; border-radius: 6px; border: 0; background: #1e1f22; color: #b5bac1; font-size: 12px; cursor: pointer; }
.cs-sort:hover { color: #fff; }
.cs-status { display: flex; align-items: center; justify-content: space-between; min-height: 28px; padding: 0 12px 6px; border-bottom: 1px solid rgba(255,255,255,.06); font-size: 12px; color: #949ba4; font-weight: 600; }
.cs-nav { display: inline-flex; gap: 2px; }
.cs-nav button { width: 26px; height: 26px; }
.cs-prev .vi-icon { transform: rotate(180deg); }
.cs-results { flex: 1; overflow-y: auto; padding: 6px 8px 12px; }
.cs-day { position: sticky; top: -6px; z-index: 1; padding: 10px 6px 4px; background: #2b2d31; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #949ba4; }
.cs-result { display: flex; gap: 10px; padding: 8px; margin-bottom: 4px; border-radius: 8px; background: #313338; cursor: pointer; border: 1px solid transparent; transition: background .12s, border-color .12s; }
.cs-result:hover { background: #383a40; }
.cs-result.active { border-color: #5865f2; background: #383a40; }
.cs-avatar { width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0; object-fit: cover; }
.cs-body { min-width: 0; flex: 1; }
.cs-meta { display: flex; align-items: baseline; gap: 8px; font-size: 12px; color: #949ba4; margin-bottom: 2px; }
.cs-meta b { color: #f2f3f5; font-size: 14px; font-weight: 600; }
.cs-text { font-size: 14px; line-height: 1.4; color: #dbdee1; word-break: break-word; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.cs-text mark, .cs-file mark { background: rgba(240,178,50,.4); color: #fff; border-radius: 3px; padding: 0 1px; }
.cs-file { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; padding: 3px 8px; border-radius: 6px; background: rgba(0,168,252,.1); color: #00a8fc; font-size: 12px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-thumb { display: block; margin-top: 6px; max-width: 160px; max-height: 100px; border-radius: 6px; object-fit: cover; }
.cs-empty { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 48px 16px; text-align: center; color: #b5bac1; font-size: 14px; font-weight: 600; }
.cs-empty .vi-icon { color: #4e5058; }
.cs-empty span { font-size: 12px; color: #949ba4; font-weight: 400; }
.cs-hint { padding: 8px 12px; border-top: 1px solid rgba(255,255,255,.06); font-size: 11px; color: #949ba4; }
.cs-hint kbd, .settings-pane-desc kbd { display: inline-block; min-width: 16px; padding: 0 4px; margin: 0 1px; border-radius: 4px; background: #1e1f22; border-bottom: 2px solid #111214; color: #dbdee1; font-size: 11px; text-align: center; font-family: inherit; }
.msg-item.search-hit .bubble { box-shadow: 0 0 0 2px rgba(240,178,50,.7); }
#btn-chat-search.active { background: rgba(88,101,242,.2); color: #fff; }
@media (max-width: 700px) { .chat-search-panel { width: 100%; } }

/* ===== Keybinds settings ===== */
.settings-pane-desc { font-size: 13px; color: #b5bac1; margin: 0 0 14px; line-height: 1.5; }
.keybinds-list { display: flex; flex-direction: column; margin-top: 12px; }
.keybinds-group-title { margin: 16px 0 6px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #949ba4; }
.keybind-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 8px; background: rgba(255,255,255,.03); margin-bottom: 4px; }
.keybind-row:hover { background: rgba(255,255,255,.06); }
.keybind-label { flex: 1; font-size: 14px; color: #dbdee1; }
.keybind-btn { min-width: 150px; height: 32px; display: inline-flex; align-items: center; justify-content: center; gap: 4px; padding: 0 10px; border-radius: 6px; border: 1px solid rgba(255,255,255,.1); background: #1e1f22; color: #949ba4; font-size: 12px; cursor: pointer; transition: border-color .12s; }
.keybind-btn:hover { border-color: #5865f2; }
.keybind-btn kbd { padding: 2px 6px; border-radius: 4px; background: #2b2d31; border-bottom: 2px solid #111214; color: #f2f3f5; font-family: inherit; font-size: 12px; font-weight: 600; }
.keybind-btn.unset { color: #6d6f78; font-style: italic; }
.keybind-btn.capturing { border-color: #f23f43; color: #f2f3f5; animation: keybind-pulse 1s infinite; }
@keyframes keybind-pulse { 50% { box-shadow: 0 0 0 3px rgba(242,63,67,.25); } }
.keybind-reset { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 6px; background: transparent; color: #949ba4; cursor: pointer; }
.keybind-reset:hover { color: #fff; background: rgba(255,255,255,.08); }
.keybind-reset.invisible { visibility: hidden; }

/* ===== Chat prefs ===== */
html.pref-no-hover-actions .msg-hover-actions { display: none !important; }
html.pref-compact .msg-item { margin-top: 0 !important; margin-bottom: 0 !important; }
html.pref-compact .msg-item .bubble { padding-top: 4px; padding-bottom: 4px; }
html.pref-compact .msg-author { margin-top: 6px; }
html.pref-reduce-motion *, html.pref-reduce-motion *::before, html.pref-reduce-motion *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
html.pref-reduce-motion .typing-dots i { animation: none !important; opacity: .8; }

/* Voice channel users — compact + round */
.channel-item .voice-user-list { gap: 0 !important; margin-top: 2px !important; padding-left: 2px; }
.channel-item .voice-user-row { gap: 6px !important; padding: 1px 4px !important; font-size: 12px !important; line-height: 18px; }
.channel-item .voice-user-row .voice-user-avatar { width: 16px !important; height: 16px !important; min-width: 16px; border-radius: 50% !important; outline: none !important; border: 0 !important; box-shadow: 0 0 0 1.5px transparent; }
.channel-item .voice-user-row.speaking .voice-user-avatar { box-shadow: 0 0 0 1.5px #23a55a, 0 0 0 3px rgba(35,165,90,.25) !important; border-radius: 50% !important; }
.channel-item .voice-user-name { font-size: 12px !important; font-weight: 500; }

/* Admin: servers */
.admin-modal-card { max-height: 90vh; overflow-y: auto; }
.admin-servers-section { margin-top: 16px; }
.admin-servers-list { display: flex; flex-direction: column; gap: 4px; max-height: 280px; overflow-y: auto; margin-top: 8px; }
.admin-server-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; background: rgba(255,255,255,.03); }
.admin-server-row:hover { background: rgba(255,255,255,.06); }
.admin-server-avatar { width: 36px; height: 36px; flex-shrink: 0; border-radius: 50%; overflow: hidden; display: flex; align-items: center; justify-content: center; background: #5865f2; color: #fff; font-weight: 700; }
.admin-server-avatar img { width: 100%; height: 100%; object-fit: cover; }
.admin-server-info { flex: 1; min-width: 0; }
.admin-server-name { font-size: 14px; font-weight: 600; color: #f2f3f5; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-server-meta { font-size: 12px; color: #949ba4; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.admin-server-delete { display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; }
.admin-servers-empty { padding: 16px; text-align: center; font-size: 13px; color: #949ba4; }

.call-panel.is-collapsed {
  padding: 8px 10px;
  gap: 0;
}
.call-panel.is-channel .call-info,
.call-panel.is-collapsed .call-info,
.call-panel.is-collapsed #screen-share-strip,
.call-panel.is-collapsed #camera-strip,
.call-panel.is-collapsed #call-participants,
.call-panel.is-collapsed #call-connecting {
  display: none;
}
.call-btn.stage {
  background: transparent;
}
@media (hover: none) {
  .screen-share-tools { opacity: 1; }
}

.header-more,
.composer-more {
  position: relative;
}
#composer-more { order: 0; }
.shell-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 80;
  min-width: 210px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px;
  background: #16181f;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
}
.shell-menu.hidden { display: none; }
.shell-menu .chat-header-btn {
  width: 100%;
  justify-content: flex-start;
  border-radius: 8px;
}
.composer-menu-item {
  width: 100%;
  height: 36px;
  justify-content: flex-start;
  gap: 8px;
  padding: 0 10px;
  border-radius: 8px;
  color: #e5e7eb;
}
.voice-auto-toggle {
  width: auto;
  margin-left: 8px;
  padding: 0;
  background: transparent;
  gap: 8px;
}