/* ═══════════════════════════════════════════════════════════════════
   Speak With Us – Premium Dark UI
   Refined dark theme with gradient accents, glass morphism,
   micro-animations, and polished typography.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Reset & Variables ─────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
}

:root {
  --bg: #080b14;
  --bg-card: #0f1323;
  --bg-card-hover: #141a30;
  --bg-input: #0a0f1e;
  --bg-elevated: #161d35;
  --border: #1e2744;
  --border-light: #2a3456;
  --border-focus: #6366f1;
  --text: #e8ecf4;
  --text-secondary: #b0b8cc;
  --text-muted: #6b7599;
  --primary: #6366f1;
  --primary-hover: #818cf8;
  --primary-glow: rgba(99, 102, 241, 0.25);
  --secondary: #06b6d4;
  --secondary-hover: #22d3ee;
  --secondary-glow: rgba(6, 182, 212, 0.2);
  --danger: #ef4444;
  --danger-hover: #f87171;
  --success: #10b981;
  --success-glow: rgba(16, 185, 129, 0.2);
  --warning: #f59e0b;
  --accent-gradient: linear-gradient(135deg, #6366f1, #8b5cf6, #06b6d4);
  --card-shadow: 0 4px 24px rgba(0, 0, 0, 0.3), 0 1px 4px rgba(0, 0, 0, 0.2);
  --radius: 14px;
  --radius-sm: 10px;
  --radius-xs: 6px;
  --transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-fast: 0.15s ease;
  --transition-smooth: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

body {
  margin: 0;
  height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family:
    "Inter",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Oxygen,
    Ubuntu,
    Cantarell,
    sans-serif;
  font-size: 14px;
  line-height: 1.55;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.hidden {
  display: none !important;
}

/* ── Global Smooth Transitions ─────────────────────────────────── */
/* Ensure all icons transition smoothly */
.icon {
  transition:
    opacity 0.3s ease,
    transform 0.3s ease,
    color 0.3s ease,
    filter 0.3s ease;
}

/* Smooth class toggles for interactive elements */
.btn,
.channel-btn {
  transition: all var(--transition-smooth);
}

/* Mic icon flip transition (mute/unmute) */
.mic-transition-enter {
  animation: micFlipIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes micFlipIn {
  0% {
    transform: scale(0.6) rotate(-12deg);
    opacity: 0;
  }
  60% {
    transform: scale(1.1) rotate(3deg);
    opacity: 1;
  }
  100% {
    transform: scale(1) rotate(0);
    opacity: 1;
  }
}

/* Smooth opacity and visibility transitions */
.voice-settings,
.voice-network {
  transition:
    opacity 0.3s ease,
    max-height 0.35s ease;
}

/* ── Animated Background ───────────────────────────────────────── */
.bg-aurora {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.bg-aurora::before,
.bg-aurora::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  opacity: 0.4;
  animation: aurora 25s ease-in-out infinite alternate;
}

.bg-aurora::before {
  width: 700px;
  height: 500px;
  top: -10%;
  left: -5%;
  background: radial-gradient(
    ellipse,
    rgba(99, 102, 241, 0.18),
    transparent 70%
  );
}

.bg-aurora::after {
  width: 600px;
  height: 450px;
  bottom: -10%;
  right: -5%;
  background: radial-gradient(
    ellipse,
    rgba(6, 182, 212, 0.12),
    transparent 70%
  );
  animation-delay: -12s;
  animation-direction: alternate-reverse;
}

@keyframes aurora {
  0% {
    transform: translate(0, 0) scale(1) rotate(0deg);
  }
  50% {
    transform: translate(30px, 20px) scale(1.08) rotate(3deg);
  }
  100% {
    transform: translate(-10px, 15px) scale(1.03) rotate(-2deg);
  }
}

/* ── Glass Card ────────────────────────────────────────────────── */
.glass {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--card-shadow);
}

@supports (backdrop-filter: blur(16px)) {
  .glass {
    background: rgba(15, 19, 35, 0.88);
    backdrop-filter: blur(16px) saturate(1.3);
    -webkit-backdrop-filter: blur(16px) saturate(1.3);
  }
}

/* ── Container ─────────────────────────────────────────────────── */
.container {
  position: relative;
  z-index: 1;
  max-width: 920px;
  margin: 0 auto;
  padding: 24px 16px;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── Auth Card ─────────────────────────────────────────────────── */
.auth-card {
  width: 100%;
  max-width: 480px;
  padding: 48px 40px;
  animation: fadeIn 0.6s ease;
  position: relative;
  overflow: hidden;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.auth-card:hover {
  box-shadow:
    0 8px 40px rgba(0, 0, 0, 0.4),
    0 2px 8px rgba(99, 102, 241, 0.12);
}

.auth-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(
    90deg,
    #e30a17 0%,
    #ff4d4d 30%,
    var(--primary) 70%,
    #06b6d4 100%
  );
  border-radius: var(--radius) var(--radius) 0 0;
}

.auth-header {
  text-align: center;
  margin-bottom: 32px;
}

.auth-header h1 {
  margin: 0;
  font-size: 2.3rem;
  font-weight: 800;
  letter-spacing: -0.5px;
  background: var(--accent-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.subtitle {
  color: var(--text-muted);
  margin: 8px 0 0;
  font-size: 15px;
}

.auth-forms {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

.auth-forms .form-group {
  width: 100%;
  max-width: 360px;
}

.auth-hint {
  text-align: center;
  font-size: 12px;
  color: var(--text-muted, #94a3b8);
  margin-top: 10px;
  opacity: 0.7;
}

.divider {
  display: none;
}

@media (max-width: 640px) {
  .auth-forms {
    flex-direction: column;
    align-items: center;
  }
  .auth-card {
    padding: 28px 20px;
  }
}

.form-group h2 {
  margin: 0 0 18px;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text);
}

.input-group {
  margin-bottom: 14px;
}

.input-group label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 5px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

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

.hint strong {
  color: var(--text-secondary);
}

/* ── Forms & Inputs ────────────────────────────────────────────── */
input,
select {
  width: 100%;
  padding: 11px 14px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 14px;
  font-family: inherit;
  outline: none;
  transition:
    border-color var(--transition),
    box-shadow var(--transition),
    background var(--transition);
}

input:hover,
select:hover {
  border-color: var(--border-light);
  background-color: var(--bg-card);
}

input:focus,
select:focus {
  border-color: var(--border-focus);
  box-shadow:
    0 0 0 3px var(--primary-glow),
    0 0 20px rgba(99, 102, 241, 0.1);
  background-color: var(--bg-card);
}

input:focus-visible,
select:focus-visible {
  outline: none;
}

input::placeholder {
  color: #3d4560;
}

select {
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7599' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 32px;
}

/* ── Buttons ───────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 20px;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  letter-spacing: 0.2px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: #fff;
  background: var(--bg-elevated);
  border-color: var(--border);
  transition: all var(--transition);
  white-space: nowrap;
  position: relative;
  overflow: hidden;
  user-select: none;
}

.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(255, 255, 255, 0.08), transparent);
  opacity: 0;
  transition: opacity var(--transition);
  pointer-events: none;
}

.btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.btn:hover::after {
  opacity: 1;
}

.btn:active {
  transform: translateY(0);
  box-shadow: none;
}

.btn:disabled {
  opacity: 0.4;
  pointer-events: none;
  transform: none;
}

.btn-primary {
  background: linear-gradient(135deg, var(--primary), #7c3aed);
  border-color: transparent;
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3);
}

.btn-primary:hover {
  background: linear-gradient(135deg, var(--primary-hover), #8b5cf6);
  box-shadow: 0 4px 16px rgba(99, 102, 241, 0.4);
}

.btn-block {
  display: flex;
  width: 100%;
  margin-top: 6px;
}

.btn-secondary {
  background: linear-gradient(135deg, var(--secondary), #0891b2);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 2px 8px rgba(6, 182, 212, 0.3);
}

.btn-secondary:hover {
  background: linear-gradient(135deg, var(--secondary-hover), #06b6d4);
  box-shadow: 0 4px 16px rgba(6, 182, 212, 0.4);
}

.btn-danger {
  background: linear-gradient(135deg, var(--danger), #dc2626);
  border-color: transparent;
  box-shadow: 0 2px 8px rgba(239, 68, 68, 0.3);
}

.btn-danger:hover {
  background: linear-gradient(135deg, var(--danger-hover), #ef4444);
  box-shadow: 0 4px 16px rgba(239, 68, 68, 0.4);
}

.btn-sm {
  padding: 7px 14px;
  font-size: 12px;
  border-radius: var(--radius-xs);
}

/* ── Status Messages ───────────────────────────────────────────── */
.status-msg {
  text-align: center;
  min-height: 1.4em;
  margin: 10px 0 0;
  font-size: 13px;
  font-weight: 500;
  transition: color var(--transition);
}

.status-msg.error {
  color: var(--danger);
}

.status-msg.success {
  color: var(--success);
}

/* ── Topbar ────────────────────────────────────────────────────── */
.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  height: 56px;
  margin: 0;
  border-radius: 0;
  border-left: none;
  border-right: none;
  border-top: none;
  background: rgba(8, 11, 20, 0.92);
  backdrop-filter: blur(24px) saturate(1.6);
  -webkit-backdrop-filter: blur(24px) saturate(1.6);
  border-image: linear-gradient(
      90deg,
      #e30a17 0%,
      #e30a17 40%,
      rgba(227, 10, 23, 0) 100%
    )
    1;
  border-top: 2px solid;
  box-shadow: 0 1px 20px rgba(0, 0, 0, 0.3);
}

.topbar h2 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.3px;
  background: var(--accent-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.topbar-left,
.topbar-right {
  display: flex;
  align-items: center;
  gap: 14px;
}

.topbar-brand-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  line-height: 1;
  gap: 4px;
}

.topbar-seen-signature {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--primary-glow);
  gap: 0;
}

.topbar-seen-signature .seen-text-sm {
  font-size: 9px;
  letter-spacing: 1.2px;
  color: var(--text-secondary);
}

.user-info {
  font-size: 13px;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 8px;
}

.badge {
  padding: 2px 10px;
  border-radius: 20px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  background: linear-gradient(135deg, var(--primary), #7c3aed);
  color: #fff;
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3);
}

@media (max-width: 980px) {
  .topbar-seen-signature {
    display: none;
  }
}

@media (max-width: 820px) {
  .topbar {
    height: auto;
    min-height: 56px;
    padding: 8px 12px;
    flex-wrap: wrap;
    row-gap: 8px;
  }

  .topbar-right {
    width: 100%;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
  }
}

/* ── App Grid ──────────────────────────────────────────────────── */
.app-grid {
  display: grid;
  grid-template-columns: 250px 1fr 340px;
  gap: 0;
  height: calc(100vh - 56px - 28px);
  overflow: hidden;
  min-height: 0;
}

@media (max-width: 1200px) {
  .app-grid {
    grid-template-columns: 220px 1fr 300px;
  }
}

@media (max-width: 1100px) {
  .app-grid {
    grid-template-columns: 1fr;
    height: auto;
    min-height: calc(100vh - 56px - 28px);
  }
  .sidebar {
    max-height: 300px;
    border-bottom: 1px solid var(--border);
  }
  .voice-panel {
    max-height: 500px;
    border-top: 1px solid var(--border);
  }
}

@media (max-width: 900px) {
  body {
    overflow-y: auto;
    overscroll-behavior-y: contain;
  }

  #appSection {
    height: auto;
    min-height: 100vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .topbar {
    position: sticky;
    top: 0;
    z-index: 30;
  }

  .topbar-left {
    width: 100%;
    justify-content: space-between;
    gap: 8px;
  }

  .topbar h2 {
    font-size: 0.95rem;
  }

  .topbar-right {
    width: 100%;
    justify-content: flex-start;
  }

  .topbar-right .btn-sm {
    padding: 7px 10px;
    min-height: 34px;
  }

  .app-grid {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas:
      "sidebar"
      "chat"
      "voice";
    height: auto;
    min-height: 0;
    overflow: visible;
  }

  .sidebar {
    grid-area: sidebar;
    height: auto;
    max-height: none;
    border-right: none;
    border-bottom: 1px solid var(--border);
    padding: 12px 10px;
  }

  .chat-panel {
    grid-area: chat;
    min-height: 56vh;
    border-top: none;
    border-bottom: 1px solid var(--border);
  }

  .voice-panel {
    grid-area: voice;
    height: auto;
    max-height: none;
    border-top: none;
    border-left: none;
  }

  .panel-header {
    padding: 12px 14px;
    min-height: 48px;
  }

  .messages {
    padding: 12px 12px 10px;
  }

  .message-form {
    padding: 10px 12px;
    gap: 8px;
  }

  .message-form .btn {
    min-width: 68px;
    padding: 10px 14px;
  }

  .voice-controls,
  .voice-settings,
  .voice-network,
  .participants-section {
    padding-left: 12px;
    padding-right: 12px;
  }

  .vs-section-header {
    padding-left: 12px;
    padding-right: 12px;
  }
  .vs-section-body {
    padding-left: 12px;
    padding-right: 12px;
  }

  .voice-controls .btn {
    min-height: 38px;
  }

  .participant-list li {
    padding: 8px 10px;
  }

  .participant-actions {
    width: 100%;
    justify-content: flex-end;
  }

  .users-list-container.inline {
    max-height: 240px;
  }

  #appSection > .status-msg {
    position: sticky;
    left: auto;
    transform: none;
    bottom: auto;
    margin: 6px 12px 10px;
    text-align: left;
  }
}

@media (max-width: 560px) {
  .user-info {
    width: 100%;
    justify-content: space-between;
    font-size: 12px;
  }

  .badge {
    font-size: 9px;
    padding: 2px 8px;
  }

  .channel-btn {
    font-size: 13px;
    padding: 8px 10px;
  }

  .message {
    padding: 8px 10px;
    gap: 9px;
  }

  .msg-avatar,
  .participant-avatar {
    width: 30px;
    height: 30px;
    min-width: 30px;
    font-size: 12px;
  }

  .emoji-picker {
    width: min(96vw, 320px);
    left: 2vw;
  }

  .participants-section {
    padding-bottom: 12px;
  }
}

/* ── Users Drawer (right side overlay) ─────────────────────────── */
.users-drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 90;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.users-drawer-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

.users-drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: 340px;
  max-width: 90vw;
  height: 100vh;
  z-index: 91;
  display: flex;
  flex-direction: column;
  background: #0c1021;
  border-left: 1px solid var(--border);
  box-shadow: -4px 0 24px rgba(0, 0, 0, 0.5);
  transform: translateX(100%);
  transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}

.users-drawer.open {
  transform: translateX(0);
}

.users-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  background: #080b14;
}

.users-drawer-header h3 {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text);
}

.users-drawer-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 16px;
}

.users-drawer-body .users-block + .users-block {
  margin-top: 12px;
}

/* Drawer toggle badge (topbar) */
.topbar-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  background: var(--primary);
  margin-left: 2px;
  vertical-align: middle;
  line-height: 16px;
}

@media (max-width: 560px) {
  .users-drawer {
    width: 100vw;
    max-width: 100vw;
  }
}

/* ── Sidebar ───────────────────────────────────────────────────── */
.sidebar {
  padding: 16px 12px;
  border-radius: 0;
  border-top: none;
  border-left: none;
  border-bottom: none;
  overflow-y: auto;
  height: 100%;
  background: rgba(8, 11, 20, 0.65);
  display: flex;
  flex-direction: column;
  transition: background var(--transition);
}

.sidebar-section {
  margin-bottom: 20px;
}

.sidebar-section h3 {
  margin: 0 0 10px 4px;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1.2px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(99, 102, 241, 0.08);
}

.channel-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.channel-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  width: 100%;
  text-align: left;
  padding: 9px 12px;
  background: transparent;
  border: none;
  border-radius: var(--radius-xs);
  color: var(--text-muted);
  font-size: 13.5px;
  font-family: inherit;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition);
  position: relative;
  line-height: 1.4;
}

.channel-btn:hover {
  background: rgba(99, 102, 241, 0.1);
  color: var(--text-secondary);
  padding-left: 15px;
}

.channel-btn.active {
  background: rgba(99, 102, 241, 0.14);
  color: #fff;
  font-weight: 600;
  box-shadow: inset 0 0 20px rgba(99, 102, 241, 0.06);
}

.channel-btn.active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 65%;
  background: var(--primary);
  border-radius: 0 3px 3px 0;
  box-shadow: 0 0 8px var(--primary-glow);
}

/* ── Connected Voice Channel Badge ─────────────────────────────── */
.channel-btn.connected {
  background: rgba(16, 185, 129, 0.1);
  color: var(--success);
}

.channel-btn.connected.active::before {
  background: var(--success);
}

.connected-badge {
  margin-left: auto;
  padding: 2px 8px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.8px;
  background: var(--success);
  color: #fff;
  border-radius: 10px;
  animation: pulse 2s ease-in-out infinite;
  box-shadow: 0 0 8px var(--success-glow);
  flex-shrink: 0;
}

/* ── Voice Presence (sidebar) ──────────────────────────────────── */
.bitrate-badge {
  margin-left: auto;
  padding: 1px 7px;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  background: rgba(99, 102, 241, 0.08);
  border: 1px solid rgba(99, 102, 241, 0.15);
  border-radius: 8px;
  flex-shrink: 0;
  line-height: 1.6;
}
.bitrate-badge.bitrate-ultra {
  color: #22c55e;
  background: rgba(34, 197, 94, 0.1);
  border-color: rgba(34, 197, 94, 0.25);
}
.bitrate-badge.bitrate-high {
  color: #3b82f6;
  background: rgba(59, 130, 246, 0.1);
  border-color: rgba(59, 130, 246, 0.25);
}
.bitrate-badge.bitrate-normal {
  color: #f59e0b;
  background: rgba(245, 158, 11, 0.1);
  border-color: rgba(245, 158, 11, 0.25);
}
.bitrate-badge.bitrate-low {
  color: #6b7280;
  background: rgba(107, 114, 128, 0.1);
  border-color: rgba(107, 114, 128, 0.25);
}

.voice-channel-item {
  display: flex;
  flex-direction: column;
}

.voice-presence-list {
  list-style: none;
  margin: 0 0 6px 0;
  padding: 2px 0 2px 14px;
}

.voice-presence-user {
  font-size: 12.5px;
  color: var(--text-secondary);
  padding: 5px 8px;
  line-height: 1.4;
  display: flex;
  align-items: center;
  gap: 7px;
  border-radius: var(--radius-xs);
  cursor: pointer;
  user-select: none;
  transition:
    background 0.2s ease,
    color 0.25s ease,
    box-shadow 0.3s ease,
    opacity 0.25s ease;
  position: relative;
}

.voice-presence-user:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.06);
}

/* Speaking state — green glow */
.voice-presence-user.speaking {
  color: var(--success);
  background: rgba(16, 185, 129, 0.08);
  box-shadow: inset 3px 0 0 var(--success);
}

.voice-presence-user.speaking .presence-mic {
  color: var(--success);
  filter: drop-shadow(0 0 4px var(--success-glow));
}

/* Mic icon wrapper */
.presence-mic {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  transition:
    color 0.3s ease,
    filter 0.3s ease,
    transform 0.3s ease;
}

.presence-mic .icon {
  width: 14px;
  height: 14px;
  transition:
    opacity 0.3s ease,
    transform 0.3s ease;
}

.presence-mic.mic-muted {
  color: var(--danger);
  opacity: 0.7;
}

.presence-mic.mic-active {
  color: var(--success);
}

/* Name */
.presence-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  flex: 1;
}

/* Avatar circle in voice presence */
.presence-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 10px;
  color: #fff;
  flex-shrink: 0;
  overflow: hidden;
  box-sizing: border-box;
  border: 2px solid transparent;
  transition:
    border-color 0.3s ease,
    box-shadow 0.3s ease;
}
.presence-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
.voice-presence-user.speaking .presence-avatar {
  border-color: var(--success);
  box-shadow: 0 0 8px var(--success-glow, rgba(16, 185, 129, 0.5));
  animation: speakingRing 1.5s ease-in-out infinite;
}
@keyframes speakingRing {
  0%,
  100% {
    box-shadow: 0 0 4px var(--success-glow, rgba(16, 185, 129, 0.4));
  }
  50% {
    box-shadow: 0 0 12px var(--success-glow, rgba(16, 185, 129, 0.7));
  }
}
.voice-presence-user.muted .presence-avatar {
  opacity: 0.6;
  border-color: transparent;
}

/* Green dot — replaced by avatar circle, hidden */
.voice-presence-user::before {
  display: none;
}

.voice-presence-user.speaking::before {
  display: none;
}

.voice-presence-user.muted {
  color: var(--text-muted);
  opacity: 0.65;
}

.voice-presence-user.muted::before {
  display: none;
}

.voice-presence-user.locally-muted {
  opacity: 0.45;
}

.voice-presence-user.locally-muted::before {
  display: none;
}

/* ── User Popover (Discord-style) ──────────────────────────────── */
.user-popover {
  position: fixed;
  z-index: 9999;
  min-width: 220px;
  max-width: 280px;
  background: #0f1325;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.45),
    0 2px 8px rgba(0, 0, 0, 0.2);
  padding: 0;
  overflow: hidden;
  animation: popoverIn 0.18s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.user-popover.hidden {
  display: none;
}

@keyframes popoverIn {
  from {
    opacity: 0;
    transform: translateY(-6px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.user-popover-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px 10px;
  background: rgba(255, 255, 255, 0.03);
  border-bottom: 1px solid var(--border);
}

.user-popover-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 16px;
  color: #fff;
  background: var(--primary);
  flex-shrink: 0;
}

.user-popover-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.user-popover-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-popover-role {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 500;
}

.user-popover-actions {
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.user-popover-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 12px;
  border: none;
  border-radius: var(--radius-xs);
  background: transparent;
  color: var(--text-secondary);
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  transition:
    background 0.15s ease,
    color 0.15s ease;
  text-align: left;
}

.user-popover-btn .icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.user-popover-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text);
}

.user-popover-btn.active-danger {
  color: var(--success);
}

.user-popover-btn.warn {
  color: var(--warning);
}

.user-popover-btn.warn:hover {
  background: rgba(245, 158, 11, 0.12);
}

.user-popover-btn.danger {
  color: var(--danger);
}

.user-popover-btn.danger:hover {
  background: rgba(239, 68, 68, 0.12);
}

.user-popover-sep {
  height: 1px;
  background: var(--border);
  margin: 4px 0;
}

.user-popover-me-label {
  padding: 8px 12px;
  font-size: 12px;
  color: var(--text-muted);
  text-align: center;
  font-style: italic;
}

/* Popover volume row */
.user-popover-vol-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
}

.popover-vol-icon {
  font-size: 14px;
  flex-shrink: 0;
  user-select: none;
}

.popover-volume-slider {
  -webkit-appearance: none;
  appearance: none;
  flex: 1;
  min-width: 0;
  height: 5px;
  border-radius: 3px;
  outline: none;
  cursor: pointer;
  background: linear-gradient(
    to right,
    var(--primary) 0%,
    var(--primary) var(--vol-pct, 66.6%),
    rgba(255, 255, 255, 0.12) var(--vol-pct, 66.6%),
    rgba(255, 255, 255, 0.12) 100%
  );
}

.popover-volume-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--primary);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  cursor: grab;
}

.popover-volume-slider::-webkit-slider-thumb:active {
  cursor: grabbing;
}

.popover-volume-slider::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--primary);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  cursor: grab;
}

.popover-volume-slider::-moz-range-track {
  height: 5px;
  border-radius: 3px;
  background: transparent;
}

.popover-vol-label {
  min-width: 30px;
  text-align: right;
  font-size: 11px;
  color: var(--text-secondary);
  font-weight: 600;
  flex-shrink: 0;
}

/* ── Admin Panel ───────────────────────────────────────────────── */
.admin-panel {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.admin-panel h4 {
  margin: 0 0 10px 4px;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.admin-panel form {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.admin-panel form + form {
  margin-top: 10px;
}

.form-status {
  min-height: 1.3em;
  margin: 8px 4px 0;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
  transition:
    opacity 0.3s ease,
    color 0.3s ease;
}

.form-status:empty {
  min-height: 0;
  margin: 0;
  opacity: 0;
}

.form-status.error {
  color: var(--danger);
}

.form-status.success {
  color: var(--success);
}

/* ── Chat Panel ────────────────────────────────────────────────── */
.chat-panel {
  display: flex;
  flex-direction: column;
  border-radius: 0;
  border-top: none;
  border-bottom: none;
  height: 100%;
  overflow: hidden;
  background: rgba(10, 14, 26, 0.5);
  position: relative;
}

.panel-header {
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  min-height: 52px;
  background: rgba(15, 19, 35, 0.25);
}

.panel-header h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 6px;
}

.messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.message {
  display: flex;
  gap: 12px;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  background: transparent;
  border: none;
  border-left: 2px solid transparent;
  animation: messageSlide 0.3s ease;
  transition: all var(--transition);
}

.message:hover {
  background: rgba(99, 102, 241, 0.04);
  border-left-color: rgba(99, 102, 241, 0.2);
}

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

.msg-avatar {
  width: 36px;
  height: 36px;
  min-width: 36px;
  border-radius: 50%;
  background: var(--accent-gradient);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  user-select: none;
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.2);
  transition: transform var(--transition-fast);
}

.message:hover .msg-avatar {
  transform: scale(1.05);
}

.msg-content {
  flex: 1;
  min-width: 0;
}

.message .meta {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 2px;
}

.msg-username {
  font-size: 13px;
  font-weight: 700;
  color: var(--primary-hover);
}

.msg-time {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 400;
}

.message .body {
  word-break: break-word;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-secondary);
}

/* ── System Messages (join/leave) ──────────────────────────────── */
.system-message {
  background: transparent !important;
  padding: 4px 14px !important;
  justify-content: center;
}

.system-message-text {
  font-size: 12px;
  color: var(--text-muted);
  font-style: italic;
  text-align: center;
  width: 100%;
}

.message-form-wrap {
  position: relative;
  flex-shrink: 0;
}

.message-form {
  display: flex;
  gap: 10px;
  padding: 14px 20px;
  border-top: 1px solid var(--border);
  background: rgba(8, 11, 20, 0.5);
  flex-shrink: 0;
  z-index: 2;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.message-form input,
.message-form textarea {
  flex: 1;
  border-radius: 22px;
  padding: 10px 20px;
  background: rgba(15, 19, 35, 0.7);
  border: 1px solid var(--border, rgba(99, 102, 241, 0.12));
  color: var(--text, #e8ecf4);
  transition: all var(--transition);
}

.message-form input:focus,
.message-form textarea:focus {
  background: var(--bg-card);
  border-color: var(--primary, #6366f1);
  outline: none;
}

.message-form .btn {
  border-radius: 22px;
  padding: 10px 24px;
  min-width: 80px;
}

/* ── Load More Button ──────────────────────────────────────────── */
.load-more-btn {
  align-self: center;
  margin: 8px auto 12px;
  padding: 6px 18px;
  font-size: 12px;
  opacity: 0.7;
  transition: opacity var(--transition);
}
.load-more-btn:hover {
  opacity: 1;
}

/* ── Voice Panel ───────────────────────────────────────────────── */
.voice-panel {
  padding: 0;
  border-radius: 0;
  border-top: none;
  border-right: none;
  border-bottom: none;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  background: rgba(8, 11, 20, 0.6);
}

.voice-panel .panel-header {
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

.voice-controls {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
  gap: 6px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  background: rgba(15, 19, 35, 0.2);
}

.voice-controls .btn {
  min-width: 0;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  font-size: 11px;
  gap: 4px;
  padding: 6px 8px;
  white-space: nowrap;
  justify-content: center;
}

.voice-controls .btn:active {
  transform: scale(0.94);
}

.voice-controls .btn-active {
  background: var(--danger) !important;
  border-color: var(--danger) !important;
  color: #fff !important;
  box-shadow: 0 0 16px rgba(239, 68, 68, 0.3);
}

.participants-section {
  padding: 12px 20px 20px;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

.voice-users-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.users-block {
  background: rgba(15, 19, 35, 0.3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px;
  animation: slideInUp 0.3s ease both;
  transition:
    border-color 0.3s ease,
    box-shadow 0.3s ease;
}

.users-block.collapsed {
  display: none;
}

.users-block:hover {
  border-color: var(--border-light);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
}
.users-drawer-body .users-block h4 {
  margin: 0 0 10px;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0;
}
.users-drawer-body .users-block h4 .icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}
.users-drawer-body .users-block h4 .mini-count {
  margin-left: auto;
}

.participants-section h4 {
  margin: 0 0 10px;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.mini-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  font-size: 10px;
  color: #fff;
  background: rgba(99, 102, 241, 0.55);
}

.participant-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.participant-list.compact li {
  padding: 8px 10px;
}

.participant-list.compact .participant-avatar {
  width: 28px;
  height: 28px;
  min-width: 28px;
  font-size: 12px;
}

.participant-list.compact .participant-name {
  font-size: 12px;
}

.participant-list.compact .participant-status {
  font-size: 10px;
}

.user-channel-tag {
  flex-shrink: 0;
  max-width: 110px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--border-light);
  background: rgba(99, 102, 241, 0.12);
  color: var(--text-secondary);
  font-size: 10px;
  font-weight: 600;
}

.participant-icon {
  font-size: 13px;
  width: 18px;
  text-align: center;
}

#remoteAudios audio {
  width: 100%;
  margin-top: 4px;
}

/* ── Dev Console ───────────────────────────────────────────────── */
.dev-console {
  position: fixed;
  bottom: 16px;
  right: 16px;
  width: min(600px, calc(100vw - 32px));
  z-index: 100;
  padding: 14px;
  max-height: 50vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6);
  animation: fadeIn 0.2s ease;
  border-color: var(--border-light);
}

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

.dev-header h3 {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-secondary);
}

.dev-logs {
  flex: 1;
  min-height: 80px;
  max-height: 40vh;
  overflow-y: auto;
  background: rgba(4, 6, 12, 0.8);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px;
  font-family:
    "SF Mono", SFMono-Regular, "Cascadia Code", Menlo, Monaco, Consolas,
    monospace;
  font-size: 11px;
  line-height: 1.6;
}

.log-line {
  margin-bottom: 1px;
  color: var(--text-muted);
}

.log-line.warn {
  color: var(--warning);
}

.log-line.error {
  color: var(--danger);
}

.log-line.info {
  color: #6ee7b7;
}

/* ── Animations ────────────────────────────────────────────────── */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

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

@keyframes glow {
  0%,
  100% {
    box-shadow: 0 0 4px var(--success-glow);
  }
  50% {
    box-shadow:
      0 0 12px var(--success-glow),
      0 0 24px rgba(16, 185, 129, 0.1);
  }
}

@keyframes speakingPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4);
  }
  70% {
    box-shadow: 0 0 0 8px rgba(16, 185, 129, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
  }
}

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

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

@keyframes breathe {
  0%,
  100% {
    opacity: 0.6;
  }
  50% {
    opacity: 1;
  }
}

@keyframes ripple {
  0% {
    transform: scale(0.8);
    opacity: 0.5;
  }
  100% {
    transform: scale(2.2);
    opacity: 0;
  }
}

/* ── Voice Settings ─────────────────────────────────────────────── */
.voice-settings {
  padding: 0;
  border-bottom: 1px solid var(--border);
  background: rgba(15, 19, 35, 0.35);
  display: none;
}

.voice-settings.visible {
  display: block;
}

/* ── Voice Settings Sections ───────────────────────────────────── */
.vs-section {
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.vs-section:last-child {
  border-bottom: none;
}

.vs-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 20px;
  cursor: pointer;
  user-select: none;
  transition: background 0.2s ease;
}
.vs-section-header:hover {
  background: rgba(99, 102, 241, 0.06);
}
.vs-section-header:active {
  background: rgba(99, 102, 241, 0.1);
}

.vs-section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-muted);
}

.vs-chevron {
  width: 14px;
  height: 14px;
  color: var(--text-muted);
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  flex-shrink: 0;
}
.vs-section-header.collapsed .vs-chevron {
  transform: rotate(-90deg);
}

.vs-section-body {
  padding: 2px 20px 12px;
  animation: vsFadeIn 0.2s ease;
}
.vs-section-body.vs-hidden {
  display: none;
}

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

/* ── Mic Test Card ─────────────────────────────────────────────── */
.mic-test-card {
  background: rgba(8, 11, 20, 0.5);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.mic-test-visual {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  justify-content: center;
}

.mic-test-ring {
  position: relative;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(15, 19, 35, 0.6);
  border: 2px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition:
    border-color 0.3s ease,
    box-shadow 0.3s ease,
    background 0.3s ease;
}
.mic-test-ring.active {
  border-color: var(--success);
  box-shadow:
    0 0 0 4px rgba(16, 185, 129, 0.15),
    0 0 20px rgba(16, 185, 129, 0.1);
  background: rgba(16, 185, 129, 0.08);
}
.mic-test-ring.speaking {
  border-color: var(--success);
  box-shadow:
    0 0 0 6px rgba(16, 185, 129, 0.25),
    0 0 24px rgba(16, 185, 129, 0.15);
  animation: micTestPulse 1.5s ease-in-out infinite;
}

@keyframes micTestPulse {
  0%,
  100% {
    box-shadow:
      0 0 0 4px rgba(16, 185, 129, 0.2),
      0 0 20px rgba(16, 185, 129, 0.1);
  }
  50% {
    box-shadow:
      0 0 0 8px rgba(16, 185, 129, 0.3),
      0 0 28px rgba(16, 185, 129, 0.2);
  }
}

.mic-test-icon {
  width: 24px;
  height: 24px;
  color: var(--text-muted);
  transition: color 0.3s ease;
}
.mic-test-ring.active .mic-test-icon {
  color: var(--success);
}
.mic-test-icon svg {
  width: 100%;
  height: 100%;
}

.mic-test-waveform {
  flex: 1;
  min-width: 0;
  height: 48px;
  border-radius: var(--radius-xs);
  overflow: hidden;
}
.mic-test-waveform canvas {
  width: 100%;
  height: 100%;
  display: block;
}

.mic-test-level-wrap {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
}
.mic-test-level-label {
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
  min-width: 72px;
}

.mic-test-meter {
  flex: 1;
  height: 6px;
  background: rgba(15, 19, 35, 0.6);
  border: 1px solid var(--border);
  border-radius: 3px;
  overflow: hidden;
  position: relative;
}
.mic-test-meter-fill {
  height: 100%;
  width: 0%;
  border-radius: 2px;
  background: linear-gradient(90deg, #34d399, #10b981);
  transition:
    width 0.06s linear,
    background 0.2s ease;
}
.mic-test-meter-peak {
  position: absolute;
  top: 0;
  width: 2px;
  height: 100%;
  background: #fff;
  border-radius: 1px;
  left: 0%;
  transition: left 0.1s ease;
  opacity: 0.7;
}

.mic-test-db {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-muted);
  min-width: 48px;
  text-align: right;
  font-family:
    "SF Mono", SFMono-Regular, "Cascadia Code", Menlo, Monaco, Consolas,
    monospace;
}

.btn-mic-test {
  width: 100%;
  padding: 8px 16px;
  font-size: 12px;
  font-weight: 600;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-light);
  background: rgba(99, 102, 241, 0.12);
  color: var(--text);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 0.2s ease;
}
.btn-mic-test:hover {
  background: rgba(99, 102, 241, 0.2);
  border-color: var(--primary);
}
.btn-mic-test.testing {
  background: rgba(239, 68, 68, 0.15);
  border-color: var(--danger);
  color: #fca5a5;
}
.btn-mic-test.testing:hover {
  background: rgba(239, 68, 68, 0.25);
}

.mic-test-hint {
  font-size: 11px;
  color: var(--text-muted);
  text-align: center;
  margin: 0;
  line-height: 1.4;
  opacity: 0.7;
}

.voice-network {
  padding: 10px 20px 12px;
  border-bottom: 1px solid var(--border);
  background: rgba(15, 19, 35, 0.25);
  display: none;
}

.voice-network.visible {
  display: block;
}

.voice-network-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}

.voice-network-summary {
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 8px;
}

.network-warning {
  margin-bottom: 8px;
  font-size: 11px;
  font-weight: 600;
  color: #fecaca;
  border: 1px solid rgba(239, 68, 68, 0.45);
  background: rgba(239, 68, 68, 0.16);
  border-radius: var(--radius-xs);
  padding: 6px 8px;
}

.network-quality {
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  border: 1px solid transparent;
  transition: all 0.4s ease;
}

.quality-good {
  color: #a7f3d0;
  border-color: rgba(16, 185, 129, 0.5);
  background: rgba(16, 185, 129, 0.15);
  box-shadow: 0 0 8px rgba(16, 185, 129, 0.15);
}

.quality-medium {
  color: #fde68a;
  border-color: rgba(245, 158, 11, 0.5);
  background: rgba(245, 158, 11, 0.16);
  box-shadow: 0 0 8px rgba(245, 158, 11, 0.15);
}

.quality-bad {
  color: #fecaca;
  border-color: rgba(239, 68, 68, 0.5);
  background: rgba(239, 68, 68, 0.18);
  box-shadow: 0 0 8px rgba(239, 68, 68, 0.15);
  animation: pulse 2s ease-in-out infinite;
}

.quality-unknown {
  color: var(--text-muted);
  border-color: var(--border-light);
  background: rgba(15, 19, 35, 0.45);
}

.network-peer-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.network-peer-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 11px;
  color: var(--text-secondary);
  padding: 5px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  background: rgba(8, 11, 20, 0.45);
}

.network-peer-name {
  max-width: 110px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text);
  font-weight: 600;
}

.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 0;
  font-size: 13px;
  color: var(--text-secondary);
}

.settings-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
}

.settings-row select {
  width: auto;
  min-width: 160px;
  padding: 6px 32px 6px 10px;
  font-size: 12px;
  border-radius: var(--radius-xs);
}

/* ── Toggle Switch ─────────────────────────────────────────────── */
.toggle-switch {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 22px;
  flex-shrink: 0;
}

.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

.toggle-slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background: var(--border);
  border-radius: 22px;
  transition:
    background 0.3s,
    box-shadow 0.3s;
}

.toggle-slider::before {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  left: 3px;
  bottom: 3px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.3s cubic-bezier(0.68, -0.2, 0.27, 1.2);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

.toggle-switch input:checked + .toggle-slider {
  background: linear-gradient(135deg, var(--primary), #7c3aed);
  box-shadow: 0 0 8px var(--primary-glow);
}

.toggle-switch input:checked + .toggle-slider::before {
  transform: translateX(18px);
}

/* ── Mikrofon Seviye Göstergesi ────────────────────────────────── */
.mic-level-row {
  padding: 8px 0;
}
.mic-level-bar-container {
  width: 120px;
  height: 8px;
  background: rgba(15, 19, 35, 0.6);
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
  flex-shrink: 0;
}
.mic-level-fill {
  height: 100%;
  width: 0%;
  border-radius: 3px;
  transition:
    width 0.06s linear,
    background 0.2s ease;
}
.mic-level-ok {
  background: linear-gradient(90deg, #34d399, #10b981);
}
.mic-level-warm {
  background: linear-gradient(90deg, #fbbf24, #f59e0b);
}
.mic-level-hot {
  background: linear-gradient(90deg, #f87171, #ef4444);
}

/* ── Slider Kontrolleri ────────────────────────────────────────── */
.slider-row {
  padding: 8px 0;
}
.slider-control {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.setting-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100px;
  height: 6px;
  background: rgba(30, 39, 68, 0.8);
  border-radius: 3px;
  outline: none;
  cursor: pointer;
}
.setting-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--primary);
  border: 2px solid rgba(255, 255, 255, 0.2);
  cursor: pointer;
  transition: box-shadow 0.15s ease;
}
.setting-slider::-webkit-slider-thumb:hover {
  box-shadow: 0 0 8px rgba(99, 102, 241, 0.5);
}
.setting-slider::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--primary);
  border: 2px solid rgba(255, 255, 255, 0.2);
  cursor: pointer;
}
.slider-value {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  min-width: 22px;
  text-align: center;
}

/* ── Participant Card (enhanced) ───────────────────────────────── */
.participant-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  background: rgba(15, 19, 35, 0.45);
  border: 1.5px solid transparent;
  font-size: 14px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  animation: slideInRight 0.35s ease both;
  flex-wrap: wrap;
}

.participant-list li:hover {
  background: #111630;
  transform: translateX(2px);
  border-color: rgba(99, 102, 241, 0.15);
}

.participant-list li.speaking {
  border-color: var(--success);
  background: rgba(16, 185, 129, 0.08);
  box-shadow:
    0 0 12px var(--success-glow),
    inset 0 0 20px rgba(16, 185, 129, 0.03);
}

.participant-list li.speaking .participant-avatar {
  animation: speakingPulse 1.5s ease-in-out infinite;
  box-shadow: 0 0 0 2px var(--success);
}

.participant-list li.speaking .participant-status {
  color: var(--success);
  font-weight: 600;
}

.participant-list li.muted {
  opacity: 0.55;
}

.participant-list li.locally-muted {
  opacity: 0.5;
  border-color: var(--danger);
  background: rgba(239, 68, 68, 0.05);
}

.participant-avatar {
  width: 34px;
  height: 34px;
  min-width: 34px;
  border-radius: 50%;
  background: var(--accent-gradient);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  user-select: none;
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.2);
  transition: all 0.3s ease;
}

.participant-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.participant-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.participant-status {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 500;
}

.participant-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  flex-wrap: wrap;
}

.participant-mute-btn {
  padding: 5px 10px !important;
  font-size: 12px !important;
  border-radius: var(--radius-xs) !important;
  background: transparent !important;
  border-color: var(--border) !important;
  opacity: 0.5;
  transition: all var(--transition);
}

.participant-mute-btn:hover {
  opacity: 1;
  border-color: var(--danger) !important;
  background: rgba(239, 68, 68, 0.08) !important;
}

.participant-mute-btn.active {
  opacity: 1;
  border-color: var(--success) !important;
  background: rgba(16, 185, 129, 0.08) !important;
}

.participant-volume-row {
  flex-basis: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px 2px;
  margin-top: 2px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  min-width: 0;
}

.participant-vol-icon {
  font-size: 14px;
  line-height: 1;
  flex-shrink: 0;
  user-select: none;
}

/* Custom range slider */
.participant-volume-slider {
  -webkit-appearance: none;
  appearance: none;
  flex: 1;
  min-width: 0;
  height: 6px;
  border-radius: 3px;
  outline: none;
  cursor: pointer;
  background: linear-gradient(
    to right,
    var(--primary) 0%,
    var(--primary) var(--vol-pct, 66.6%),
    rgba(255, 255, 255, 0.12) var(--vol-pct, 66.6%),
    rgba(255, 255, 255, 0.12) 100%
  );
}
.participant-volume-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--primary);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  cursor: grab;
}
.participant-volume-slider::-webkit-slider-thumb:active {
  cursor: grabbing;
}
.participant-volume-slider::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--primary);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  cursor: grab;
}
.participant-volume-slider::-moz-range-track {
  height: 6px;
  border-radius: 3px;
  background: transparent;
}

.participant-volume-label {
  min-width: 34px;
  text-align: right;
  font-size: 11px;
  color: var(--text-secondary);
  font-weight: 600;
  flex-shrink: 0;
  user-select: none;
}

.participant-mod-btn {
  padding: 5px 10px !important;
  font-size: 12px !important;
  border-radius: var(--radius-xs) !important;
  border-color: rgba(245, 158, 11, 0.55) !important;
  background: rgba(245, 158, 11, 0.14) !important;
}

.participant-mod-btn:hover {
  border-color: rgba(245, 158, 11, 0.9) !important;
  background: rgba(245, 158, 11, 0.22) !important;
}

.participant-kick-btn {
  padding: 5px 10px !important;
  font-size: 12px !important;
  border-radius: var(--radius-xs) !important;
  border-color: rgba(239, 68, 68, 0.6) !important;
  background: rgba(239, 68, 68, 0.12) !important;
}

.participant-kick-btn:hover {
  border-color: rgba(239, 68, 68, 0.95) !important;
  background: rgba(239, 68, 68, 0.2) !important;
}

/* ── Audio Device Selectors ────────────────────────────────────── */
.device-select-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.device-select {
  flex: 1;
  min-width: 0;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--border);
  background: var(--bg-secondary);
  color: var(--text-primary);
  font-size: 13px;
  font-family: inherit;
  outline: none;
  cursor: pointer;
  transition: border-color var(--transition);
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  padding-right: 28px;
}

.device-select:hover,
.device-select:focus {
  border-color: var(--primary);
}

.device-select option {
  background: var(--bg-primary);
  color: var(--text-primary);
}

/* ── Volume Toggle Button & Popup ──────────────────────────────── */
.participant-vol-btn {
  padding: 5px 8px !important;
  font-size: 14px !important;
  line-height: 1;
  border-radius: var(--radius-xs) !important;
  background: transparent !important;
  border-color: var(--border) !important;
  opacity: 0.5;
  transition: all var(--transition);
  cursor: pointer;
}

.participant-vol-btn:hover {
  opacity: 1;
  border-color: var(--primary) !important;
  background: rgba(99, 102, 241, 0.08) !important;
}

.participant-volume-popup {
  flex-basis: 100%;
  display: none;
  align-items: center;
  gap: 8px;
  padding: 8px 10px 4px;
  margin-top: 4px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  min-width: 0;
  animation: fadeSlideDown 0.2s ease;
}

.participant-volume-popup.open {
  display: flex;
}

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

/* ── Voice Status ──────────────────────────────────────────────────── */
.voice-status {
  font-size: 12px;
  font-weight: 600;
  margin-left: 8px;
  vertical-align: middle;
  transition: color var(--transition);
}

.voice-status.connected {
  color: var(--success);
  font-weight: 600;
  animation: breathe 3s ease-in-out infinite;
  text-shadow: 0 0 8px rgba(16, 185, 129, 0.3);
}

.voice-status.connecting {
  color: var(--warning);
  animation: blink 1s step-end infinite;
}

.voice-status.elsewhere {
  color: var(--warning);
  font-size: 11px;
  font-weight: 500;
}

/* ── Empty States ──────────────────────────────────────────────── */
.messages:empty::after {
  content: "Henüz mesaj yok. İlk mesajı gönder!";
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--text-muted);
  font-size: 14px;
  font-style: italic;
  opacity: 0.7;
  text-align: center;
  padding: 20px;
}

.participant-list:empty::after {
  content: "Bu kanalda kimse yok";
  display: block;
  padding: 20px 0;
  color: var(--text-muted);
  font-size: 13px;
  text-align: center;
  font-style: italic;
  opacity: 0.6;
}

.participant-list.compact:empty::after {
  content: "Aktif kullanıcı yok";
  padding: 14px 0;
}

/* ── Custom Scrollbar ────────────────────────────────────────────────── */
::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

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

::-webkit-scrollbar-thumb {
  background: rgba(99, 102, 241, 0.18);
  border-radius: 4px;
  transition: background 0.2s;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(99, 102, 241, 0.35);
}

* {
  scrollbar-width: thin;
  scrollbar-color: rgba(99, 102, 241, 0.18) transparent;
}

/* ── Selection ─────────────────────────────────────────────────── */
::selection {
  background: rgba(99, 102, 241, 0.35);
  color: #fff;
}

/* ── Focus visible (keyboard nav) ──────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

button:focus:not(:focus-visible) {
  outline: none;
}

/* ═══════════════════════════════════════════════════════════════════
   Role System – Badges, Name Colors, Avatar Styles, Animations
   ═══════════════════════════════════════════════════════════════════ */

/* ── Role CSS Variables ────────────────────────────────────────── */
:root {
  --role-superadmin: #fbbf24;
  --role-superadmin-glow: rgba(251, 191, 36, 0.35);
  --role-superadmin-gradient: linear-gradient(
    135deg,
    #f59e0b,
    #fbbf24,
    #fcd34d
  );
  --role-admin: #ef4444;
  --role-admin-glow: rgba(239, 68, 68, 0.3);
  --role-admin-gradient: linear-gradient(135deg, #dc2626, #ef4444, #f87171);
  --role-moderator: #3b82f6;
  --role-moderator-glow: rgba(59, 130, 246, 0.3);
  --role-moderator-gradient: linear-gradient(135deg, #2563eb, #3b82f6, #60a5fa);
}

/* ── Role Badge (next to name in messages) ─────────────────────── */
.role-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  margin-right: 4px;
  vertical-align: middle;
}

.role-badge-sm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  margin-right: 3px;
  vertical-align: middle;
}

/* ── Topbar Badge Variants ─────────────────────────────────────── */
.badge-superadmin {
  background: transparent !important;
  color: var(--role-superadmin);
  box-shadow: none;
  padding: 0;
  animation: none;
}

.badge-admin {
  background: transparent !important;
  color: var(--role-admin);
  box-shadow: none;
  padding: 0;
}

.badge-moderator {
  background: transparent !important;
  color: var(--role-moderator);
  box-shadow: none;
  padding: 0;
}

.badge-member {
  background: transparent !important;
  color: var(--text-secondary);
  box-shadow: none;
  padding: 0;
}

/* ── Name Colors ───────────────────────────────────────────────── */
.name-superadmin {
  color: var(--role-superadmin) !important;
  font-weight: 800 !important;
  background: linear-gradient(90deg, #f59e0b, #fbbf24, #fcd34d, #f59e0b);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmerName 3s ease-in-out infinite;
  text-shadow: none;
}

.name-admin {
  color: var(--role-admin) !important;
  font-weight: 700 !important;
}

.name-moderator {
  color: var(--role-moderator) !important;
  font-weight: 600 !important;
}

/* ── Avatar Variants ───────────────────────────────────────────── */
.avatar-superadmin {
  background: var(--role-superadmin-gradient) !important;
  color: #1a1a2e !important;
  box-shadow:
    0 0 0 2px rgba(251, 191, 36, 0.5),
    0 2px 12px var(--role-superadmin-glow) !important;
  animation: avatarPulse-gold 3s ease-in-out infinite;
}

.avatar-admin {
  background: var(--role-admin-gradient) !important;
  color: #fff !important;
  box-shadow:
    0 0 0 2px rgba(239, 68, 68, 0.4),
    0 2px 10px var(--role-admin-glow) !important;
}

.avatar-moderator {
  background: var(--role-moderator-gradient) !important;
  color: #fff !important;
  box-shadow:
    0 0 0 2px rgba(59, 130, 246, 0.4),
    0 2px 10px var(--role-moderator-glow) !important;
}

/* ── Sidebar voice presence role names ─────────────────────────── */
.voice-presence-user.name-superadmin {
  color: var(--role-superadmin);
  font-weight: 700;
  background: linear-gradient(90deg, #f59e0b, #fbbf24, #fcd34d, #f59e0b);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmerName 3s ease-in-out infinite;
}

.voice-presence-user.name-admin {
  color: var(--role-admin);
  font-weight: 600;
}

.voice-presence-user.name-moderator {
  color: var(--role-moderator);
  font-weight: 600;
}

/* ── Role Animations ───────────────────────────────────────────── */
@keyframes shimmerName {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@keyframes badgeGlow-gold {
  0%,
  100% {
    box-shadow: 0 2px 10px var(--role-superadmin-glow);
  }
  50% {
    box-shadow:
      0 2px 20px var(--role-superadmin-glow),
      0 0 30px rgba(251, 191, 36, 0.15);
  }
}

@keyframes avatarPulse-gold {
  0%,
  100% {
    box-shadow:
      0 0 0 2px rgba(251, 191, 36, 0.5),
      0 2px 12px var(--role-superadmin-glow);
  }
  50% {
    box-shadow:
      0 0 0 3px rgba(251, 191, 36, 0.7),
      0 2px 20px var(--role-superadmin-glow),
      0 0 30px rgba(251, 191, 36, 0.1);
  }
}

/* ── User Management Panel ─────────────────────────────────────── */
.user-mgmt-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 360px;
  overflow-y: auto;
  padding-right: 4px;
}

.user-mgmt-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 10px;
  background: rgba(15, 19, 35, 0.35);
  border: 1px solid rgba(99, 102, 241, 0.06);
  transition: all 0.2s ease;
}

.user-mgmt-row:hover {
  background: rgba(15, 19, 35, 0.6);
  border-color: rgba(99, 102, 241, 0.18);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.user-mgmt-name {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-mgmt-select {
  width: auto !important;
  min-width: 120px;
  padding: 6px 28px 6px 10px !important;
  font-size: 11px !important;
  border-radius: var(--radius-sm) !important;
}

.user-mgmt-actions {
  display: flex;
  gap: 4px;
  align-items: center;
  flex-shrink: 0;
}

.user-mgmt-btn {
  background: none;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 14px;
  padding: 4px 8px;
  transition: all var(--transition);
  line-height: 1;
}

.user-mgmt-btn:hover {
  background: rgba(99, 102, 241, 0.15);
  border-color: rgba(99, 102, 241, 0.2);
}

.user-mgmt-btn-pass:hover {
  background: rgba(59, 130, 246, 0.15);
  border-color: rgba(59, 130, 246, 0.3);
}

.user-mgmt-btn-del:hover {
  background: rgba(239, 68, 68, 0.15);
  border-color: rgba(239, 68, 68, 0.3);
}

/* ── Modal Overlay ──────────────────────────────────────────── */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  animation: overlayFadeIn 0.2s ease;
}

@keyframes overlayFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.modal-overlay.hidden {
  display: none;
}
.modal-card {
  width: 90%;
  max-width: 420px;
  padding: 2rem 2rem;
  border-radius: var(--radius);
  background: #0f1325;
  border: 1px solid var(--border);
  text-align: center;
  animation: modalSlideUp 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.modal-card h3 {
  margin: 0 0 0.5rem;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text);
  text-align: center;
}
.modal-subtitle {
  margin-bottom: 1.25rem;
  font-size: 0.9rem;
  opacity: 0.7;
  text-align: center;
}
.modal-actions {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  margin-top: 1.25rem;
}
.modal-actions .btn {
  min-width: 100px;
  justify-content: center;
}
.modal-card input[type="password"] {
  width: 100%;
  padding: 0.5rem;
  border-radius: var(--radius-xs);
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-primary);
  font-size: 0.9rem;
}

/* ── Read Info Modal ────────────────────────────────────────── */
.read-info-modal {
  max-width: 380px;
  text-align: center;
}
.read-info-msg-preview {
  background: rgba(99, 102, 241, 0.08);
  border: 1px solid rgba(99, 102, 241, 0.15);
  border-radius: var(--radius-xs);
  padding: 10px 14px;
  margin: 12px 0 16px;
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.5;
  text-align: left;
  word-break: break-word;
  max-height: 80px;
  overflow-y: auto;
}
.read-info-empty {
  color: var(--text-muted);
  font-size: 13px;
  padding: 16px 0;
  opacity: 0.7;
}
.read-info-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 240px;
  overflow-y: auto;
  padding: 4px 0;
  margin: 8px 0;
}
.read-info-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  border-radius: var(--radius-xs);
  background: rgba(15, 19, 35, 0.5);
  border: 1px solid rgba(99, 102, 241, 0.06);
}
.read-info-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
  background: var(--accent-gradient);
}
.read-info-user {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  min-width: 0;
}
.read-info-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}
.read-info-time {
  font-size: 11px;
  color: var(--text-muted);
}
.read-info-count {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 8px;
  opacity: 0.7;
}

/* ── Channel Restricted / Permission Badges ─────────────────── */
.channel-restricted {
  opacity: 0.45;
  font-style: italic;
  pointer-events: none;
  user-select: none;
}

/* ── Checkbox Label ──────────────────────────────────────────── */
.checkbox-label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  cursor: pointer;
}
.checkbox-label input[type="checkbox"] {
  accent-color: var(--accent);
}

/* ── Active Toggle Button ────────────────────────────────────── */
.btn-active {
  background: var(--danger) !important;
  border-color: var(--danger) !important;
  color: #fff !important;
  box-shadow: 0 0 12px rgba(239, 68, 68, 0.25);
  transition: all 0.3s ease !important;
}

/* ── Turkish Flag SVG ────────────────────────────────────────── */
.turkish-flag {
  width: 48px;
  height: 32px;
  filter: drop-shadow(0 2px 8px rgba(227, 10, 23, 0.35));
}
.turkish-flag-sm {
  width: 28px;
  height: 18px;
  flex-shrink: 0;
  filter: drop-shadow(0 1px 4px rgba(227, 10, 23, 0.3));
}
.topbar-flag {
  width: 24px;
  height: 16px;
  vertical-align: middle;
  margin-right: 2px;
  filter: drop-shadow(0 1px 4px rgba(227, 10, 23, 0.35));
}

/* ── Topbar Marquee ──────────────────────────────────────────── */
.topbar-marquee {
  flex: 1;
  overflow: hidden;
  margin: 0 18px;
  position: relative;
  height: 28px;
  display: flex;
  align-items: center;
  mask-image: linear-gradient(
    90deg,
    transparent,
    #000 8%,
    #000 92%,
    transparent
  );
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent,
    #000 8%,
    #000 92%,
    transparent
  );
}
.marquee-text {
  display: inline-block;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: #f59e0b;
  text-shadow: 0 0 8px rgba(245, 158, 11, 0.3);
  animation: marqueeScroll 18s linear infinite;
  padding-left: 100%;
}
@keyframes marqueeScroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}

/* ── SEEN TEKNOLOJİ Signature ────────────────────────────────── */
.seen-signature {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

/* Auth page signature */
.auth-signature {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}
.seen-flag {
  position: relative;
}
.seen-flag::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 8px;
  background: radial-gradient(
    ellipse,
    rgba(227, 10, 23, 0.12) 0%,
    transparent 70%
  );
  pointer-events: none;
}
.seen-text {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 3px;
  background: linear-gradient(
    135deg,
    #e30a17 0%,
    #ff4d4d 40%,
    #ffffff 50%,
    #e30a17 60%,
    #ff4d4d 100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: seenShimmer 4s ease-in-out infinite;
}
.seen-sub {
  font-size: 10px;
  color: var(--text-muted);
  letter-spacing: 1px;
}
@keyframes seenShimmer {
  0%,
  100% {
    background-position: 0% center;
  }
  50% {
    background-position: 200% center;
  }
}

/* Sidebar signature */
.sidebar-signature {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  align-items: center;
  padding: 14px 12px;
  margin-top: auto;
  border-top: 1px solid var(--border);
  opacity: 0.6;
  transition: opacity var(--transition);
  flex-shrink: 0;
}
.sidebar-signature:hover {
  opacity: 1;
}
.seen-text-sm {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--text-muted);
  white-space: nowrap;
}

/* App name abbreviation */
.app-abbr {
  font-weight: 400;
  opacity: 0.65;
  font-size: 0.75em;
}
.app-abbr-sm {
  font-weight: 400;
  opacity: 0.55;
  font-size: 0.7em;
}

/* Auth product tag */
.auth-product-tag {
  font-size: 11px;
  letter-spacing: 1.2px;
  color: var(--text-secondary);
  margin-top: 4px;
}
.auth-product-tag strong {
  background: linear-gradient(135deg, #e30a17, #ff6b6b);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* License badge (auth page) */
.seen-license-badge {
  display: inline-block;
  margin-top: 8px;
  padding: 4px 14px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--primary);
  border: 1px solid var(--primary);
  border-radius: 999px;
  opacity: 0.8;
}

/* License label (topbar/sidebar) */
.seen-license-sm {
  display: inline-block;
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 1px;
  color: var(--text-muted);
  opacity: 0.7;
  margin-left: 6px;
  padding: 1px 6px;
  border: 1px solid var(--border);
  border-radius: 999px;
  white-space: nowrap;
}

/* License footer bar */
.license-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 50;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 4px 16px;
  background: rgba(8, 11, 20, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--border);
  height: 28px;
}
.license-footer-text {
  font-size: 10px;
  letter-spacing: 0.8px;
  color: var(--text-muted);
  text-align: center;
}
.license-footer-text strong {
  color: var(--text-secondary);
  font-weight: 700;
}

/* ═══════════════════════════════════════════════════════════════════
   SVG Icons – Sizing & Color System
   ═══════════════════════════════════════════════════════════════════ */

.icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  vertical-align: -2px;
  display: inline-block;
  transition:
    transform var(--transition-fast),
    color var(--transition-fast),
    opacity var(--transition-fast);
}

.icon.ic-lg {
  width: 28px;
  height: 28px;
  vertical-align: -6px;
}

.btn:hover .icon,
.btn-icon:hover .icon,
.channel-btn:hover .icon,
.management-btn:hover .icon {
  transform: translateY(-1px);
}

.btn:active .icon,
.btn-icon:active .icon,
.channel-btn:active .icon {
  transform: scale(0.96);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* Icon color palette */
.ic-cyan {
  color: #22d3ee;
}
.ic-green {
  color: #34d399;
}
.ic-indigo {
  color: #818cf8;
}
.ic-purple {
  color: #a78bfa;
}
.ic-amber {
  color: #fbbf24;
}
.ic-red {
  color: #f87171;
}
.ic-gold {
  color: #fbbf24;
}
.ic-muted {
  color: var(--text-muted);
}

/* ═══════════════════════════════════════════════════════════════════
   Management Button (sidebar)
   ═══════════════════════════════════════════════════════════════════ */

.management-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: calc(100% - 16px);
  margin: 16px 8px;
  padding: 12px 14px;
  background: rgba(99, 102, 241, 0.06);
  border: 1px dashed rgba(99, 102, 241, 0.22);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.management-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.04), transparent);
  opacity: 0;
  transition: opacity 0.3s;
}

.management-btn:hover {
  background: rgba(99, 102, 241, 0.12);
  border-color: rgba(99, 102, 241, 0.4);
  border-style: solid;
  color: var(--text);
  box-shadow: 0 2px 12px rgba(99, 102, 241, 0.1);
}

.management-btn:hover::after {
  opacity: 1;
}

.management-btn .icon {
  transition: transform 0.3s ease;
}

.management-btn:hover .icon {
  transform: rotate(90deg);
}

/* ═══════════════════════════════════════════════════════════════════
   Management Modal – Tabs & Content
   ═══════════════════════════════════════════════════════════════════ */

.management-modal {
  width: 96%;
  max-width: 960px;
  max-height: 90vh;
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: modalSlideUp 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  text-align: left;
  border: 1px solid rgba(99, 102, 241, 0.25);
  box-shadow:
    0 24px 80px rgba(0, 0, 0, 0.45),
    0 0 60px rgba(99, 102, 241, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  border-radius: 16px;
}

@keyframes modalSlideUp {
  from {
    opacity: 0;
    transform: translateY(24px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.mgmt-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px 16px;
  border-bottom: 1px solid rgba(99, 102, 241, 0.12);
  background: linear-gradient(
    180deg,
    rgba(99, 102, 241, 0.1) 0%,
    rgba(99, 102, 241, 0.02) 100%
  );
}

.mgmt-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  background: var(--accent-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: -0.3px;
}

.mgmt-header h3 .icon {
  -webkit-text-fill-color: initial;
}

.btn-icon {
  background: transparent;
  border: 1px solid transparent;
  font-size: 22px;
  color: var(--text-muted);
  cursor: pointer;
  padding: 6px 10px;
  line-height: 1;
  transition: all var(--transition);
  border-radius: var(--radius-sm);
}

.btn-icon:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--border-light);
}

.mgmt-tabs {
  display: flex;
  gap: 4px;
  padding: 10px 16px 0;
  border-bottom: 1px solid rgba(99, 102, 241, 0.08);
  overflow-x: auto;
  background: transparent;
  scrollbar-width: none;
}
.mgmt-tabs::-webkit-scrollbar {
  display: none;
}

.mgmt-tab {
  padding: 8px 16px 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  font-family: inherit;
  letter-spacing: 0.3px;
  position: relative;
}

.mgmt-tab:hover {
  color: var(--text-secondary);
  border-bottom-color: rgba(99, 102, 241, 0.25);
}

.mgmt-tab.active {
  color: var(--primary, #6366f1);
  border-bottom-color: var(--primary, #6366f1);
  background: none;
  box-shadow: none;
}

.mgmt-body {
  padding: 24px;
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}
.us-main-content.mgmt-body {
  padding: 24px 32px 32px;
}

.mgmt-tab-content {
  display: none;
}

.mgmt-tab-content.active {
  display: block;
  animation: mgmtTabFadeIn 0.3s ease;
}

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

.mgmt-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-field label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  transition: color var(--transition);
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.mgmt-status {
  margin: 0;
  padding: 10px 24px 18px;
  text-align: left;
  transition: opacity 0.3s ease;
}

.mgmt-status:empty {
  padding: 0;
  min-height: 0;
}

/* ── Management form button styling ────────────────────────────── */
.mgmt-form .btn {
  align-self: flex-start;
  min-width: 140px;
  margin-top: 6px;
  font-weight: 600;
  letter-spacing: 0.3px;
}

.mgmt-form .btn-primary {
  position: relative;
  overflow: hidden;
  background: var(--accent-gradient);
  border: none;
  color: #fff;
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.25);
}

.mgmt-form .btn-primary::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.12), transparent);
  opacity: 0;
  transition: opacity 0.2s;
}

.mgmt-form .btn-primary:hover {
  box-shadow: 0 4px 16px rgba(99, 102, 241, 0.35);
  transform: translateY(-1px);
}

.mgmt-form .btn-primary:hover::after {
  opacity: 1;
}

.mgmt-form .btn-danger {
  background: linear-gradient(
    135deg,
    rgba(239, 68, 68, 0.2),
    rgba(239, 68, 68, 0.1)
  ) !important;
  border-color: rgba(239, 68, 68, 0.4) !important;
  color: #fca5a5 !important;
}

.mgmt-form .btn-danger:hover {
  background: linear-gradient(
    135deg,
    rgba(239, 68, 68, 0.3),
    rgba(239, 68, 68, 0.2)
  ) !important;
  border-color: rgba(239, 68, 68, 0.6) !important;
  color: #fff !important;
  box-shadow: 0 2px 12px rgba(239, 68, 68, 0.2);
  transform: translateY(-1px);
}

/* ── Smooth section transitions ────────────────────────────────── */
.sidebar-section h3 {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* ── Panel header icon alignment ───────────────────────────────── */
.panel-header h3 .icon {
  flex-shrink: 0;
}

/* ── Voice button icon alignment ───────────────────────────────── */
.voice-controls .btn .icon {
  width: 14px;
  height: 14px;
  vertical-align: -1px;
}

/* ── Settings row icon alignment ───────────────────────────────── */
.settings-label .icon {
  width: 15px;
  height: 15px;
}
/* ═══════════════════════════════════════════════════════════════════
   Additional UI Polish & Micro-Interactions
   ═══════════════════════════════════════════════════════════════════ */

/* ── Button press ripple effect ────────────────────────────────── */
.btn {
  -webkit-tap-highlight-color: transparent;
}

.btn-primary:active {
  box-shadow: 0 1px 4px rgba(99, 102, 241, 0.2);
}

/* ── Topbar user info polish ───────────────────────────────────── */
.user-info {
  background: rgba(15, 19, 35, 0.5);
  padding: 4px 12px 4px 8px;
  border-radius: 20px;
  border: 1px solid var(--border);
  transition: border-color var(--transition);
}

.user-info:hover {
  border-color: var(--border-light);
}

/* ── Topbar buttons polish ─────────────────────────────────────── */
.topbar-right .btn-sm {
  border-radius: 8px;
  font-size: 11.5px;
  padding: 6px 14px;
  letter-spacing: 0.2px;
}

/* ── Chat panel smooth transitions ─────────────────────────────── */
.chat-panel {
  transition: background var(--transition);
}

/* ── Message username hover ────────────────────────────────────── */
.msg-username {
  transition: opacity var(--transition-fast);
  cursor: default;
}

.msg-username:hover {
  opacity: 0.85;
}

/* ── Better message time format ────────────────────────────────── */
.msg-time {
  opacity: 0.6;
  transition: opacity var(--transition-fast);
}

.message:hover .msg-time {
  opacity: 1;
}

/* ── Voice panel header label ──────────────────────────────────── */
.voice-panel .panel-header h3 {
  font-size: 14px;
  gap: 8px;
  flex-wrap: wrap;
}

/* ── Better toggle switch ──────────────────────────────────────── */
.toggle-switch:hover .toggle-slider {
  background: var(--border-light);
}

.toggle-switch input:checked:hover + .toggle-slider {
  filter: brightness(1.1);
}

/* ── Network stats polish ──────────────────────────────────────── */
.voice-network-summary {
  font-size: 11.5px;
  font-family: "SF Mono", SFMono-Regular, "Cascadia Code", Menlo, monospace;
  letter-spacing: 0.2px;
}

/* ── Load more button polish ───────────────────────────────────── */
.load-more-btn {
  align-self: center;
  margin: 8px auto 12px;
  padding: 6px 20px;
  font-size: 11.5px;
  opacity: 0.6;
  transition: all var(--transition);
  border-radius: 16px;
}
.load-more-btn:hover {
  opacity: 1;
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.15);
}

/* ── Lazy Load Sentinel & Spinner ──────────────────────────────── */
.load-more-sentinel {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 12px 0;
  min-height: 40px;
}
.load-more-spinner {
  display: flex;
  gap: 6px;
  align-items: center;
}
.load-more-spinner .spinner-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--primary, #6366f1);
  opacity: 0.5;
  animation: spinnerBounce 1.2s infinite ease-in-out;
}
.load-more-spinner .spinner-dot:nth-child(2) {
  animation-delay: 0.2s;
}
.load-more-spinner .spinner-dot:nth-child(3) {
  animation-delay: 0.4s;
}
@keyframes spinnerBounce {
  0%,
  80%,
  100% {
    transform: scale(0.6);
    opacity: 0.3;
  }
  40% {
    transform: scale(1);
    opacity: 0.8;
  }
}

/* ── Channel badge icons alignment ─────────────────────────────── */
.channel-btn .icon {
  flex-shrink: 0;
  opacity: 0.8;
  transition: opacity var(--transition-fast);
}

.channel-btn:hover .icon,
.channel-btn.active .icon {
  opacity: 1;
}

\n/* ── Form field focus-within highlight ─────────────────────────── */
.form-field:focus-within label {
  color: var(--primary-hover);
  transition: color var(--transition);
}

/* ── Dev console improvements ──────────────────────────────────── */
.dev-console {
  border: 1px solid rgba(99, 102, 241, 0.15);
}

.dev-logs {
  font-size: 10.5px;
  line-height: 1.7;
}

/* ── Smooth page transition for auth/app ───────────────────────── */
#appSection {
  animation: fadeIn 0.3s ease;
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

#appSection > .status-msg {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 34px;
  margin: 0;
  z-index: 55;
  pointer-events: none;
}

#authSection {
  animation: fadeIn 0.4s ease;
}

/* ── Checkbox label polish ─────────────────────────────────────── */
.checkbox-label {
  padding: 4px 0;
  transition: color var(--transition);
}

.checkbox-label:hover {
  color: var(--text);
}

.checkbox-label input[type="checkbox"] {
  accent-color: var(--primary);
  width: 16px;
  height: 16px;
}

/* ── System message polish ─────────────────────────────────────── */
.system-message-text {
  font-size: 11.5px;
  opacity: 0.6;
  padding: 2px 12px;
  border-radius: 10px;
  background: rgba(99, 102, 241, 0.04);
  display: inline-block;
}

/* ── Kick button polish ────────────────────────────────────────── */
.participant-kick-btn {
  font-size: 11px !important;
  padding: 4px 8px !important;
}

/* ── Mini count badge polish ───────────────────────────────────── */
.mini-count {
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.3px;
  background: rgba(99, 102, 241, 0.5);
  box-shadow: 0 1px 4px rgba(99, 102, 241, 0.15);
}

/* ── Password modal input improve ──────────────────────────────── */
.modal-card input[type="password"] {
  background: var(--bg-input);
  border-color: var(--border);
  color: var(--text);
  padding: 10px 14px;
  font-family: inherit;
  transition: all var(--transition);
}

.modal-card input[type="password"]:focus {
  border-color: var(--border-focus);
  box-shadow: 0 0 0 3px var(--primary-glow);
}

/* ── Seen signature polish ─────────────────────────────────────── */
.sidebar-signature {
  opacity: 0.5;
  padding: 12px 10px;
  flex-shrink: 0;
}

.sidebar-signature:hover {
  opacity: 0.85;
}

/* ── Smooth hover for sidebar sections ─────────────────────────── */
.sidebar-section h3 .icon {
  transition: transform 0.3s ease;
}

.sidebar-section:hover h3 .icon {
  transform: scale(1.1);
}

/* ── Better settings row ───────────────────────────────────────── */
.settings-row {
  padding: 7px 0;
  border-bottom: 1px solid rgba(30, 39, 68, 0.3);
}

.settings-row:last-child {
  border-bottom: none;
}

/* ── Voice status badge polish ─────────────────────────────────── */
.voice-status {
  font-size: 11.5px;
  padding: 2px 0;
}

.voice-status.connected {
  text-shadow: 0 0 10px rgba(16, 185, 129, 0.4);
}

/* ═══════════════════════════════════════════════════════════
   DM CONVERSATIONS & USER LIST & PRIVATE CALLS
   ═══════════════════════════════════════════════════════════ */

/* ── Sidebar DM Section ─────────────────────────────────────── */
.ic-pink {
  color: #ec4899;
}

.dm-conv-list {
  max-height: 200px;
  overflow-y: auto;
}

.dm-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 28px 16px;
  text-align: center;
  opacity: 0.5;
}

.dm-empty-state .dm-empty-icon {
  font-size: 32px;
  margin-bottom: 4px;
}

.dm-empty-state .dm-empty-text {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  line-height: 1.4;
}

.dm-empty-state .dm-empty-hint {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.4;
  opacity: 0.7;
}

.dm-conv-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.2s;
  position: relative;
}

.dm-conv-item:hover {
  background: rgba(99, 102, 241, 0.12);
}

.dm-conv-item.active {
  background: rgba(99, 102, 241, 0.2);
}

.dm-conv-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  flex-shrink: 0;
  position: relative;
}

.dm-conv-avatar.online::after {
  content: "";
  position: absolute;
  bottom: -1px;
  right: -1px;
  width: 10px;
  height: 10px;
  background: #10b981;
  border-radius: 50%;
  border: 2px solid var(--bg-primary, #0f172a);
}

.dm-conv-info {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.dm-conv-name {
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #e0e7ff;
}

.dm-conv-preview {
  font-size: 10.5px;
  color: #94a3b8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dm-conv-unread {
  background: #ec4899;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  min-width: 18px;
  height: 18px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
  flex-shrink: 0;
}

.dm-unread-badge {
  background: #ec4899 !important;
  color: #fff !important;
}

/* ── DM Panel ───────────────────────────────────────────────── */
.dm-panel {
  display: flex;
  flex-direction: column;
}

.dm-header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.dm-header h3 {
  flex: 1;
}

.dm-back-btn {
  background: rgba(99, 102, 241, 0.15);
  border: none;
  color: #a5b4fc;
  border-radius: 8px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s;
}

.dm-back-btn:hover {
  background: rgba(99, 102, 241, 0.3);
}

.dm-online-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #475569;
  margin-left: 6px;
  transition: background 0.3s;
}

.dm-online-dot.online {
  background: #10b981;
  box-shadow: 0 0 8px rgba(16, 185, 129, 0.5);
}

.btn-call {
  background: linear-gradient(135deg, #10b981, #059669) !important;
  color: #fff !important;
  border: none;
  gap: 4px;
}

.btn-call:hover {
  background: linear-gradient(135deg, #059669, #047857) !important;
  transform: scale(1.05);
}

.dm-messages {
  flex: 1;
}

.dm-msg {
  display: flex;
  gap: 8px;
  padding: 6px 12px;
  margin: 2px 0;
  animation: msgSlideIn 0.3s ease;
}

.dm-msg.sent {
  flex-direction: row-reverse;
}

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

.dm-msg.received .dm-msg-bubble {
  background: rgba(30, 41, 82, 0.7);
  border-bottom-left-radius: 4px;
  color: #e0e7ff;
}

.dm-msg.sent .dm-msg-bubble {
  background: linear-gradient(
    135deg,
    rgba(99, 102, 241, 0.4),
    rgba(139, 92, 246, 0.4)
  );
  border-bottom-right-radius: 4px;
  color: #fff;
}

.dm-msg-time {
  font-size: 10px;
  color: #64748b;
  margin-top: 4px;
  text-align: right;
}

.dm-msg.received .dm-msg-time {
  text-align: left;
}

.dm-msg-system {
  text-align: center;
  padding: 8px 0;
}

.dm-msg-system .dm-msg-bubble {
  display: inline-block;
  max-width: 90%;
  background: rgba(99, 102, 241, 0.1);
  border: 1px solid rgba(99, 102, 241, 0.2);
  border-radius: 12px;
  color: #94a3b8;
  font-size: 12px;
  padding: 6px 16px;
}

.dm-typing {
  padding: 4px 16px 8px;
  font-size: 12px;
  color: #94a3b8;
  display: flex;
  align-items: center;
  gap: 4px;
}

.typing-dots span {
  animation: typingBounce 1.4s infinite both;
  font-size: 18px;
  line-height: 1;
}
.typing-dots span:nth-child(2) {
  animation-delay: 0.2s;
}
.typing-dots span:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes typingBounce {
  0%,
  80%,
  100% {
    opacity: 0.3;
    transform: translateY(0);
  }
  40% {
    opacity: 1;
    transform: translateY(-4px);
  }
}

/* ── Users Modal ────────────────────────────────────────────── */
.users-modal {
  width: min(480px, 95vw);
  max-height: 80vh;
  display: flex;
  flex-direction: column;
}

.users-search-wrap {
  padding: 0 16px 12px;
}

.users-search-inline {
  padding: 0 0 10px;
}

.users-search-wrap input {
  width: 100%;
  padding: 8px 14px;
  border-radius: 10px;
  border: 1px solid rgba(99, 102, 241, 0.2);
  background: rgba(15, 23, 42, 0.5);
  color: #e0e7ff;
  font-size: 13px;
  outline: none;
  transition: border-color 0.2s;
}

.users-search-wrap input:focus {
  border-color: rgba(99, 102, 241, 0.5);
}

.users-list-container {
  flex: 1;
  overflow-y: auto;
  padding: 0 16px 16px;
}

.users-list-container.inline {
  max-height: 280px;
  padding: 0;
}

.users-list-container.inline .user-row {
  padding-left: 0;
  padding-right: 0;
}

.users-group-label {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #64748b;
  padding: 10px 0 4px;
  font-weight: 700;
}

.user-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.2s;
}

.user-row:hover {
  background: rgba(99, 102, 241, 0.15);
}

.user-row:hover .user-actions {
  opacity: 1;
}

.user-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
  color: #fff;
  flex-shrink: 0;
  position: relative;
}

.user-avatar.avatar-superadmin {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  box-shadow: 0 0 12px rgba(245, 158, 11, 0.3);
}
.user-avatar.avatar-admin {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  box-shadow: 0 0 12px rgba(59, 130, 246, 0.3);
}
.user-avatar.avatar-moderator {
  background: linear-gradient(135deg, #8b5cf6, #7c3aed);
  box-shadow: 0 0 10px rgba(139, 92, 246, 0.25);
}
.user-avatar.avatar-member {
  background: linear-gradient(135deg, #6366f1, #4f46e5);
}

.user-avatar .online-dot {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 11px;
  height: 11px;
  background: #10b981;
  border-radius: 50%;
  border: 2.5px solid var(--bg, #080b14);
  box-shadow: 0 0 6px rgba(16, 185, 129, 0.5);
}

.user-avatar .offline-dot {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 11px;
  height: 11px;
  background: #475569;
  border-radius: 50%;
  border: 2.5px solid var(--bg, #080b14);
}

.user-info-col {
  flex: 1;
  min-width: 0;
}

.user-info-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text, #e0e7ff);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.user-info-role {
  font-size: 11px;
  color: var(--text-muted, #94a3b8);
}

/* user-status-chip removed — not displayed in user list */

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

.user-action-btn {
  background: rgba(99, 102, 241, 0.2);
  border: 1px solid rgba(99, 102, 241, 0.15);
  color: #a5b4fc;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
}

.user-action-btn:hover {
  background: rgba(99, 102, 241, 0.4);
  border-color: rgba(99, 102, 241, 0.4);
  color: #c7d2fe;
  transform: scale(1.1);
}

.user-action-btn.call-btn:hover {
  background: rgba(16, 185, 129, 0.35);
  border-color: rgba(16, 185, 129, 0.3);
  color: #34d399;
}

.user-self-label {
  font-size: 10px;
  color: #64748b;
  padding: 2px 8px;
  border: 1px solid rgba(100, 116, 139, 0.3);
  border-radius: 6px;
}

/* ── Call Modals ────────────────────────────────────────────── */
.call-modal-overlay {
  z-index: 10000;
  backdrop-filter: blur(8px);
  background: rgba(0, 0, 0, 0.6);
}

.call-modal {
  width: min(360px, 90vw);
  text-align: center;
  padding: 32px 24px !important;
}

.call-modal-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.call-avatar-ring {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: conic-gradient(#6366f1, #8b5cf6, #ec4899, #6366f1);
  animation: callRingSpin 3s linear infinite;
  padding: 3px;
}

.call-avatar-ring.active-ring {
  background: conic-gradient(#10b981, #059669, #10b981);
  animation: callRingSpin 2s linear infinite;
}

@keyframes callRingSpin {
  to {
    transform: rotate(360deg);
  }
}

.call-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1e293b, #334155);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  font-weight: 700;
  color: #e0e7ff;
}

.call-modal h3 {
  font-size: 18px;
  color: #e0e7ff;
  margin: 0;
}

.call-subtitle {
  color: #94a3b8;
  font-size: 13px;
  margin: 0;
}

.call-timer {
  font-size: 24px;
  font-weight: 700;
  color: #10b981;
  font-variant-numeric: tabular-nums;
  margin: 0;
  text-shadow: 0 0 20px rgba(16, 185, 129, 0.3);
}

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

.btn-call-accept {
  background: linear-gradient(135deg, #10b981, #059669) !important;
  color: #fff !important;
  border: none;
  padding: 12px 24px;
  border-radius: 14px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s;
  font-size: 13px;
}

.btn-call-accept:hover {
  transform: scale(1.05);
  box-shadow: 0 0 20px rgba(16, 185, 129, 0.4);
}

.btn-call-reject {
  background: linear-gradient(135deg, #ef4444, #dc2626) !important;
  color: #fff !important;
  border: none;
  padding: 12px 24px;
  border-radius: 14px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s;
  font-size: 13px;
}

.btn-call-reject:hover {
  transform: scale(1.05);
  box-shadow: 0 0 20px rgba(239, 68, 68, 0.4);
}

.call-mute-btn {
  background: rgba(99, 102, 241, 0.2) !important;
  color: #a5b4fc !important;
  border: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
}

.call-mute-btn:hover {
  background: rgba(99, 102, 241, 0.35) !important;
}

.call-mute-btn.muted {
  background: rgba(239, 68, 68, 0.3) !important;
  color: #f87171 !important;
}

/* ── Incoming call ring animation ───────────────────────────── */
@keyframes callPulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4);
  }
  50% {
    box-shadow: 0 0 0 20px rgba(16, 185, 129, 0);
  }
}

.call-modal-overlay:not(.hidden) .call-avatar-ring:not(.active-ring) {
  animation:
    callRingSpin 3s linear infinite,
    callPulse 1.5s ease infinite;
}

/* ── Call Minimize Button ───────────────────────────────────── */
.call-min-btn {
  background: rgba(99, 102, 241, 0.2) !important;
  color: #a5b4fc !important;
  border: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
}
.call-min-btn:hover {
  background: rgba(99, 102, 241, 0.35) !important;
  transform: scale(1.1);
}

/* ── Call Screen Share (DM calls) ───────────────────────────── */
.call-screen-share-btn {
  background: rgba(16, 185, 129, 0.2) !important;
  color: #6ee7b7 !important;
  border: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
}
.call-screen-share-btn:hover {
  background: rgba(16, 185, 129, 0.35) !important;
  transform: scale(1.1);
}
.call-screen-share-btn.sharing {
  background: rgba(239, 68, 68, 0.3) !important;
  color: #f87171 !important;
}
.call-screen-share-wrap {
  width: 100%;
  max-width: 640px;
  margin: 12px auto 0;
  border-radius: 12px;
  overflow: hidden;
  background: #0a0c14;
  border: 1px solid rgba(99, 102, 241, 0.2);
}
.call-screen-share-wrap.hidden {
  display: none;
}
.call-screen-share-video {
  width: 100%;
  max-height: 360px;
  object-fit: contain;
  background: #000;
  display: block;
}

/* ── Call Dock (minimized floating bar) ─────────────────────── */
.call-dock {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9998;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 18px;
  background: linear-gradient(
    135deg,
    rgba(15, 19, 35, 0.95),
    rgba(30, 40, 65, 0.95)
  );
  border: 1px solid rgba(99, 102, 241, 0.3);
  border-radius: 16px;
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.5),
    0 0 20px rgba(99, 102, 241, 0.1);
  backdrop-filter: blur(16px);
  animation: callDockIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.call-dock.hidden {
  display: none;
}

@keyframes callDockIn {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(20px) scale(0.9);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
  }
}

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

.call-dock-pulse {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 8px rgba(16, 185, 129, 0.5);
  animation: callPulse 1.5s ease infinite;
  flex-shrink: 0;
}

.call-dock-name {
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.call-dock-timer {
  color: #10b981;
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 12px rgba(16, 185, 129, 0.3);
}

.call-dock-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.call-dock-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.07);
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
  padding: 0;
}
.call-dock-btn .icon {
  width: 16px;
  height: 16px;
}
.call-dock-btn:hover {
  background: rgba(255, 255, 255, 0.14);
  color: var(--text);
  transform: scale(1.1);
}
.call-dock-btn.muted {
  background: rgba(239, 68, 68, 0.25);
  color: #f87171;
}
.call-dock-restore {
  background: rgba(99, 102, 241, 0.2);
  color: #a5b4fc;
}
.call-dock-restore:hover {
  background: rgba(99, 102, 241, 0.35);
}
.call-dock-end {
  background: rgba(239, 68, 68, 0.25);
  color: #f87171;
}
.call-dock-end:hover {
  background: rgba(239, 68, 68, 0.45);
  color: #fff;
}

/* ── Online count badge in sidebar ──────────────────────────── */
#showUsersBtn {
  margin-top: 8px;
}

#showUsersBtn .mini-count {
  background: rgba(16, 185, 129, 0.2);
  color: #10b981;
}

/* ═══════════════════════════════════════════════════════════════════
   NEW FEATURES – Typing, Emoji, Theme, Status, Message Actions
   ═══════════════════════════════════════════════════════════════════ */

/* ── Channel Typing Indicator ──────────────────────────────────── */
.channel-typing {
  padding: 4px 16px 4px;
  font-size: 12px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 22px;
}

/* ── Emoji Picker ──────────────────────────────────────────────── */
.emoji-trigger {
  flex-shrink: 0;
  width: 36px !important;
  height: 36px !important;
  border-radius: 8px !important;
  color: var(--text-muted);
  transition: color 0.2s;
}
.emoji-trigger:hover {
  color: var(--accent, #f59e0b);
}
.emoji-picker {
  position: absolute;
  bottom: 56px;
  left: 12px;
  width: 320px;
  max-height: 340px;
  border-radius: 14px;
  border: 1px solid var(--border-light);
  background: var(--bg-card);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
  animation: fadeScaleIn 0.15s ease;
}
.emoji-picker-header {
  padding: 8px;
  border-bottom: 1px solid var(--border);
}
.emoji-picker-header input {
  width: 100%;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 10px;
  color: var(--text);
  font-size: 13px;
  outline: none;
}
.emoji-picker-header input:focus {
  border-color: var(--border-focus);
}
.emoji-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 2px;
  padding: 8px;
  overflow-y: auto;
  max-height: 270px;
}
.emoji-grid button {
  all: unset;
  font-size: 22px;
  line-height: 1;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s;
}
.emoji-grid button:hover {
  background: var(--bg-elevated);
}

/* ── Message Actions (edit, delete, react) ─────────────────────── */
.msg-actions {
  position: absolute;
  top: -32px;
  right: 8px;
  display: none;
  gap: 2px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 2px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  z-index: 10;
}
.msg-bubble:hover .msg-actions {
  display: flex;
}
.msg-action-btn {
  all: unset;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 14px;
  transition:
    background 0.15s,
    color 0.15s;
}
.msg-action-btn:hover {
  background: var(--bg-elevated);
  color: var(--text);
}
.msg-action-btn.delete:hover {
  color: var(--danger);
}

/* ── Soft-Deleted Message ──────────────────────────────────────── */
.msg-soft-deleted {
  opacity: 0.55;
}
.msg-soft-deleted .msg-bubble {
  border-left: 2px solid var(--text-muted);
  padding-left: 10px;
}
.msg-deleted-text {
  font-style: italic;
  color: var(--text-muted);
  font-size: 13px;
}
/* ── Delete Menu Popover ───────────────────────────────────────── */
.delete-menu-popover {
  background: var(--bg-elevated, #161d35);
  border: 1px solid var(--border, #2a2f4a);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  padding: 4px;
  min-width: 180px;
  backdrop-filter: blur(12px);
}
.delete-menu-item {
  display: block;
  width: 100%;
  padding: 8px 12px;
  background: none;
  border: none;
  border-radius: 6px;
  color: var(--text-secondary);
  font-size: 13px;
  cursor: pointer;
  text-align: left;
  transition: background 0.15s;
}
.delete-menu-item:hover {
  background: rgba(99, 102, 241, 0.1);
  color: var(--text);
}
.delete-menu-hard {
  color: var(--danger);
}
.delete-menu-hard:hover {
  background: rgba(239, 68, 68, 0.12);
  color: var(--danger);
}

/* ── Message Reactions ─────────────────────────────────────────── */
.msg-reactions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
}
.reaction-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--bg-input);
  font-size: 13px;
  cursor: pointer;
  transition:
    border-color 0.2s,
    background 0.2s;
  user-select: none;
}
.reaction-badge:hover {
  border-color: var(--primary);
  background: var(--primary-glow);
}
.reaction-badge.mine {
  border-color: var(--primary);
  background: rgba(99, 102, 241, 0.15);
}
.reaction-badge .r-count {
  font-size: 11px;
  color: var(--text-muted);
}
.msg-edited-tag {
  font-size: 10px;
  color: var(--text-muted);
  margin-left: 4px;
  font-style: italic;
}

/* @mention highlighting */
.mention {
  color: var(--secondary);
  background: rgba(6, 182, 212, 0.12);
  padding: 1px 4px;
  border-radius: 4px;
  font-weight: 600;
  cursor: default;
}
.mention.mention-me {
  color: #fff;
  background: rgba(99, 102, 241, 0.3);
  border: 1px solid rgba(99, 102, 241, 0.4);
}

.msg-bubble {
  position: relative;
}

/* Message read receipts */
.msg-receipt {
  display: flex;
  justify-content: flex-end;
  padding: 1px 4px 0 0;
  font-size: 11px;
  line-height: 1;
  user-select: none;
}

.msg-receipt .receipt-sent {
  color: rgba(156, 163, 175, 0.6);
  font-weight: 700;
  letter-spacing: -1px;
}

.msg-receipt .receipt-partial {
  color: rgba(99, 102, 241, 0.7);
  font-weight: 700;
  letter-spacing: -1px;
}

.msg-receipt .receipt-read {
  color: #34d399;
  font-weight: 700;
  letter-spacing: -1px;
}

.msg-receipt:hover span {
  opacity: 0.8;
}

.msg-edit-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}

.msg-edit-input {
  width: 100%;
  border-radius: 10px;
  border: 1px solid var(--border-light);
  background: var(--bg-input);
  color: var(--text);
  padding: 8px 10px;
  font-size: 13px;
  outline: none;
  transition:
    border-color var(--transition),
    box-shadow var(--transition);
}

.msg-edit-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-glow);
}

.msg-edit-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

/* ── Reaction Picker (mini inline emoji selector) ──────────────── */
.reaction-picker {
  position: absolute;
  bottom: 100%;
  right: 8px;
  display: flex;
  gap: 2px;
  padding: 4px 6px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
  z-index: 20;
  animation: fadeScaleIn 0.12s ease;
}
.reaction-picker button {
  all: unset;
  font-size: 18px;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.12s;
}
.reaction-picker button:hover {
  background: var(--bg-elevated);
}

/* ── User Status ───────────────────────────────────────────────── */
.status-selector-wrap {
  position: relative;
}
.status-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  padding: 4px 10px !important;
}
.status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-block;
}
.status-online {
  background: #10b981;
  box-shadow: 0 0 6px #10b98166;
}
.status-busy {
  background: #ef4444;
  box-shadow: 0 0 6px #ef444466;
}
.status-away {
  background: #f59e0b;
  box-shadow: 0 0 6px #f59e0b66;
}
.status-dnd {
  background: #ef4444;
  box-shadow: 0 0 6px #ef444466;
  position: relative;
}
.status-dnd::after {
  content: "";
  position: absolute;
  width: 60%;
  height: 2px;
  background: #fff;
  top: 50%;
  left: 20%;
  transform: translateY(-50%);
  border-radius: 1px;
}
.status-invisible {
  background: #6b7599;
  border: 2px solid var(--text-muted);
  box-sizing: border-box;
}

.status-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 6px;
  min-width: 180px;
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: 12px;
  padding: 6px;
  z-index: 1000;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
  animation: fadeScaleIn 0.12s ease;
}
.status-option {
  all: unset;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 12px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
  color: var(--text);
  transition: background 0.15s;
  box-sizing: border-box;
}
.status-option:hover {
  background: var(--bg-elevated);
}

/* ── Theme: Dark Only ───────────────────────────────────────────── */
/* Light theme removed — app is dark-only */

/* ── Built-in Themes ───────────────────────────────────────────── */

/* Midnight Indigo (Default — matches :root) */
[data-theme="midnight"] {
  --bg: #080b14;
  --bg-card: #0f1323;
  --bg-card-hover: #141a30;
  --bg-input: #0a0f1e;
  --bg-elevated: #161d35;
  --border: #1e2744;
  --border-light: #2a3456;
  --border-focus: #6366f1;
  --text: #e8ecf4;
  --text-secondary: #b0b8cc;
  --text-muted: #6b7599;
  --primary: #6366f1;
  --primary-hover: #818cf8;
  --primary-glow: rgba(99, 102, 241, 0.25);
  --secondary: #06b6d4;
  --secondary-hover: #22d3ee;
  --secondary-glow: rgba(6, 182, 212, 0.2);
  --danger: #ef4444;
  --danger-hover: #f87171;
  --success: #10b981;
  --success-glow: rgba(16, 185, 129, 0.2);
  --warning: #f59e0b;
  --accent-gradient: linear-gradient(135deg, #6366f1, #8b5cf6, #06b6d4);
  --card-shadow: 0 4px 24px rgba(0, 0, 0, 0.3), 0 1px 4px rgba(0, 0, 0, 0.2);
}

/* Light Breeze */
[data-theme="light"] {
  --bg: #f0f2f5;
  --bg-card: #ffffff;
  --bg-card-hover: #f5f6fa;
  --bg-input: #e8eaef;
  --bg-elevated: #ffffff;
  --border: #d1d5db;
  --border-light: #e5e7eb;
  --border-focus: #6366f1;
  --text: #1a1d23;
  --text-secondary: #4b5563;
  --text-muted: #6b7280;
  --primary: #6366f1;
  --primary-hover: #4f46e5;
  --primary-glow: rgba(99, 102, 241, 0.15);
  --secondary: #0891b2;
  --secondary-hover: #0e7490;
  --secondary-glow: rgba(8, 145, 178, 0.12);
  --danger: #dc2626;
  --danger-hover: #b91c1c;
  --success: #059669;
  --success-glow: rgba(5, 150, 105, 0.12);
  --warning: #d97706;
  --accent-gradient: linear-gradient(135deg, #6366f1, #8b5cf6, #0891b2);
  --card-shadow: 0 2px 12px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.06);
}
[data-theme="light"] .bg-aurora::before {
  background: radial-gradient(
    ellipse,
    rgba(99, 102, 241, 0.08),
    transparent 70%
  );
}
[data-theme="light"] .bg-aurora::after {
  background: radial-gradient(
    ellipse,
    rgba(6, 182, 212, 0.06),
    transparent 70%
  );
}
[data-theme="light"] .glass {
  background: rgba(255, 255, 255, 0.85);
}
[data-theme="light"] body {
  background: #f0f2f5;
}

/* Ocean Depths */
[data-theme="ocean"] {
  --bg: #0a1628;
  --bg-card: #0f2035;
  --bg-card-hover: #142a42;
  --bg-input: #081420;
  --bg-elevated: #162d48;
  --border: #1e3a5f;
  --border-light: #264a73;
  --border-focus: #0ea5e9;
  --text: #e0f0ff;
  --text-secondary: #93c5e8;
  --text-muted: #5a8ab5;
  --primary: #0ea5e9;
  --primary-hover: #38bdf8;
  --primary-glow: rgba(14, 165, 233, 0.25);
  --secondary: #06b6d4;
  --secondary-hover: #22d3ee;
  --secondary-glow: rgba(6, 182, 212, 0.2);
  --danger: #f43f5e;
  --danger-hover: #fb7185;
  --success: #14b8a6;
  --success-glow: rgba(20, 184, 166, 0.2);
  --warning: #f59e0b;
  --accent-gradient: linear-gradient(135deg, #0ea5e9, #06b6d4, #14b8a6);
  --card-shadow:
    0 4px 24px rgba(0, 10, 30, 0.4), 0 1px 4px rgba(0, 10, 30, 0.25);
}
[data-theme="ocean"] .bg-aurora::before {
  background: radial-gradient(
    ellipse,
    rgba(14, 165, 233, 0.15),
    transparent 70%
  );
}
[data-theme="ocean"] .bg-aurora::after {
  background: radial-gradient(ellipse, rgba(6, 182, 212, 0.1), transparent 70%);
}

/* Forest Emerald */
[data-theme="forest"] {
  --bg: #0a1410;
  --bg-card: #0f1f18;
  --bg-card-hover: #142a20;
  --bg-input: #081610;
  --bg-elevated: #163028;
  --border: #1e4a38;
  --border-light: #265a45;
  --border-focus: #10b981;
  --text: #e0f5ec;
  --text-secondary: #8cc5aa;
  --text-muted: #5a9577;
  --primary: #10b981;
  --primary-hover: #34d399;
  --primary-glow: rgba(16, 185, 129, 0.25);
  --secondary: #14b8a6;
  --secondary-hover: #2dd4bf;
  --secondary-glow: rgba(20, 184, 166, 0.2);
  --danger: #ef4444;
  --danger-hover: #f87171;
  --success: #22c55e;
  --success-glow: rgba(34, 197, 94, 0.2);
  --warning: #eab308;
  --accent-gradient: linear-gradient(135deg, #10b981, #14b8a6, #22c55e);
  --card-shadow:
    0 4px 24px rgba(0, 15, 10, 0.4), 0 1px 4px rgba(0, 15, 10, 0.25);
}
[data-theme="forest"] .bg-aurora::before {
  background: radial-gradient(
    ellipse,
    rgba(16, 185, 129, 0.15),
    transparent 70%
  );
}
[data-theme="forest"] .bg-aurora::after {
  background: radial-gradient(ellipse, rgba(34, 197, 94, 0.1), transparent 70%);
}

/* Sunset Ember */
[data-theme="sunset"] {
  --bg: #1a0e0a;
  --bg-card: #251410;
  --bg-card-hover: #301a14;
  --bg-input: #140c08;
  --bg-elevated: #35201a;
  --border: #5a3028;
  --border-light: #6e3e34;
  --border-focus: #f97316;
  --text: #fff0e8;
  --text-secondary: #d4a899;
  --text-muted: #996b5a;
  --primary: #f97316;
  --primary-hover: #fb923c;
  --primary-glow: rgba(249, 115, 22, 0.25);
  --secondary: #ef4444;
  --secondary-hover: #f87171;
  --secondary-glow: rgba(239, 68, 68, 0.2);
  --danger: #dc2626;
  --danger-hover: #ef4444;
  --success: #22c55e;
  --success-glow: rgba(34, 197, 94, 0.2);
  --warning: #fbbf24;
  --accent-gradient: linear-gradient(135deg, #f97316, #ef4444, #ec4899);
  --card-shadow: 0 4px 24px rgba(20, 5, 0, 0.4), 0 1px 4px rgba(20, 5, 0, 0.25);
}
[data-theme="sunset"] .bg-aurora::before {
  background: radial-gradient(
    ellipse,
    rgba(249, 115, 22, 0.15),
    transparent 70%
  );
}
[data-theme="sunset"] .bg-aurora::after {
  background: radial-gradient(ellipse, rgba(239, 68, 68, 0.1), transparent 70%);
}

/* Sakura (Cherry Blossom) */
[data-theme="sakura"] {
  --bg: #1a0c18;
  --bg-card: #25122a;
  --bg-card-hover: #301838;
  --bg-input: #140a14;
  --bg-elevated: #351e40;
  --border: #5a2e60;
  --border-light: #6e3a75;
  --border-focus: #ec4899;
  --text: #fce7f3;
  --text-secondary: #d4a0c0;
  --text-muted: #996b88;
  --primary: #ec4899;
  --primary-hover: #f472b6;
  --primary-glow: rgba(236, 72, 153, 0.25);
  --secondary: #a855f7;
  --secondary-hover: #c084fc;
  --secondary-glow: rgba(168, 85, 247, 0.2);
  --danger: #ef4444;
  --danger-hover: #f87171;
  --success: #10b981;
  --success-glow: rgba(16, 185, 129, 0.2);
  --warning: #f59e0b;
  --accent-gradient: linear-gradient(135deg, #ec4899, #a855f7, #8b5cf6);
  --card-shadow:
    0 4px 24px rgba(20, 0, 15, 0.4), 0 1px 4px rgba(20, 0, 15, 0.25);
}
[data-theme="sakura"] .bg-aurora::before {
  background: radial-gradient(
    ellipse,
    rgba(236, 72, 153, 0.15),
    transparent 70%
  );
}
[data-theme="sakura"] .bg-aurora::after {
  background: radial-gradient(
    ellipse,
    rgba(168, 85, 247, 0.1),
    transparent 70%
  );
}

/* ═══════════════════════════════════════════════════════════════
   VERY DARK THEMES
   ═══════════════════════════════════════════════════════════════ */

/* Abyss (Derin Uçurum) — ultra-deep blue-black, cyan accent */
[data-theme="abyss"] {
  --bg: #020408;
  --bg-card: #060a14;
  --bg-card-hover: #0a1020;
  --bg-input: #030610;
  --bg-elevated: #0c1424;
  --border: #0e1a30;
  --border-light: #142240;
  --border-focus: #06b6d4;
  --text: #d0e8f8;
  --text-secondary: #7ab0d4;
  --text-muted: #3a6888;
  --primary: #06b6d4;
  --primary-hover: #22d3ee;
  --primary-glow: rgba(6, 182, 212, 0.2);
  --secondary: #0284c7;
  --secondary-hover: #0ea5e9;
  --secondary-glow: rgba(2, 132, 199, 0.15);
  --danger: #f43f5e;
  --danger-hover: #fb7185;
  --success: #14b8a6;
  --success-glow: rgba(20, 184, 166, 0.15);
  --warning: #f59e0b;
  --accent-gradient: linear-gradient(135deg, #06b6d4, #0284c7, #0369a1);
  --card-shadow: 0 4px 24px rgba(0, 0, 0, 0.6), 0 1px 4px rgba(0, 0, 0, 0.4);
}
[data-theme="abyss"] .bg-aurora::before {
  background: radial-gradient(ellipse, rgba(6, 182, 212, 0.1), transparent 70%);
}
[data-theme="abyss"] .bg-aurora::after {
  background: radial-gradient(
    ellipse,
    rgba(2, 132, 199, 0.06),
    transparent 70%
  );
}

/* Void (Boşluk) — pure black, neon green accent */
[data-theme="void"] {
  --bg: #000000;
  --bg-card: #080808;
  --bg-card-hover: #111111;
  --bg-input: #050505;
  --bg-elevated: #141414;
  --border: #1a1a1a;
  --border-light: #252525;
  --border-focus: #22c55e;
  --text: #e4e4e7;
  --text-secondary: #a1a1aa;
  --text-muted: #52525b;
  --primary: #22c55e;
  --primary-hover: #4ade80;
  --primary-glow: rgba(34, 197, 94, 0.2);
  --secondary: #10b981;
  --secondary-hover: #34d399;
  --secondary-glow: rgba(16, 185, 129, 0.15);
  --danger: #ef4444;
  --danger-hover: #f87171;
  --success: #22c55e;
  --success-glow: rgba(34, 197, 94, 0.2);
  --warning: #eab308;
  --accent-gradient: linear-gradient(135deg, #22c55e, #10b981, #059669);
  --card-shadow: 0 4px 20px rgba(0, 0, 0, 0.8), 0 1px 4px rgba(0, 0, 0, 0.5);
}
[data-theme="void"] .bg-aurora::before {
  background: radial-gradient(
    ellipse,
    rgba(34, 197, 94, 0.08),
    transparent 70%
  );
}
[data-theme="void"] .bg-aurora::after {
  background: radial-gradient(
    ellipse,
    rgba(16, 185, 129, 0.05),
    transparent 70%
  );
}

/* Obsidian (Obsidyen) — volcanic dark, amber/gold accent */
[data-theme="obsidian"] {
  --bg: #0a0806;
  --bg-card: #141008;
  --bg-card-hover: #1e1810;
  --bg-input: #0c0a06;
  --bg-elevated: #201a10;
  --border: #2e2418;
  --border-light: #3a3020;
  --border-focus: #f59e0b;
  --text: #f5efe6;
  --text-secondary: #c4b090;
  --text-muted: #7a6a50;
  --primary: #f59e0b;
  --primary-hover: #fbbf24;
  --primary-glow: rgba(245, 158, 11, 0.2);
  --secondary: #d97706;
  --secondary-hover: #f59e0b;
  --secondary-glow: rgba(217, 119, 6, 0.15);
  --danger: #ef4444;
  --danger-hover: #f87171;
  --success: #10b981;
  --success-glow: rgba(16, 185, 129, 0.2);
  --warning: #fbbf24;
  --accent-gradient: linear-gradient(135deg, #f59e0b, #d97706, #b45309);
  --card-shadow: 0 4px 24px rgba(5, 3, 0, 0.5), 0 1px 4px rgba(5, 3, 0, 0.3);
}
[data-theme="obsidian"] .bg-aurora::before {
  background: radial-gradient(
    ellipse,
    rgba(245, 158, 11, 0.1),
    transparent 70%
  );
}
[data-theme="obsidian"] .bg-aurora::after {
  background: radial-gradient(
    ellipse,
    rgba(217, 119, 6, 0.06),
    transparent 70%
  );
}

/* ═══════════════════════════════════════════════════════════════
   DARK THEMES
   ═══════════════════════════════════════════════════════════════ */

/* Nord (Kuzey) — Nordic steel blue palette */
[data-theme="nord"] {
  --bg: #2e3440;
  --bg-card: #3b4252;
  --bg-card-hover: #434c5e;
  --bg-input: #2e3440;
  --bg-elevated: #4c566a;
  --border: #4c566a;
  --border-light: #5a657a;
  --border-focus: #88c0d0;
  --text: #eceff4;
  --text-secondary: #d8dee9;
  --text-muted: #7b88a1;
  --primary: #88c0d0;
  --primary-hover: #8fbcbb;
  --primary-glow: rgba(136, 192, 208, 0.2);
  --secondary: #81a1c1;
  --secondary-hover: #5e81ac;
  --secondary-glow: rgba(129, 161, 193, 0.15);
  --danger: #bf616a;
  --danger-hover: #d08770;
  --success: #a3be8c;
  --success-glow: rgba(163, 190, 140, 0.2);
  --warning: #ebcb8b;
  --accent-gradient: linear-gradient(135deg, #88c0d0, #81a1c1, #5e81ac);
  --card-shadow: 0 4px 24px rgba(0, 0, 0, 0.3), 0 1px 4px rgba(0, 0, 0, 0.2);
}
[data-theme="nord"] .bg-aurora::before {
  background: radial-gradient(
    ellipse,
    rgba(136, 192, 208, 0.12),
    transparent 70%
  );
}
[data-theme="nord"] .bg-aurora::after {
  background: radial-gradient(
    ellipse,
    rgba(129, 161, 193, 0.08),
    transparent 70%
  );
}

/* Ember (Kor Ateşi) — dark with rich red/amber */
[data-theme="ember"] {
  --bg: #1a0a0a;
  --bg-card: #241212;
  --bg-card-hover: #2e1818;
  --bg-input: #160808;
  --bg-elevated: #341c1c;
  --border: #4a2828;
  --border-light: #5a3434;
  --border-focus: #ef4444;
  --text: #fce8e8;
  --text-secondary: #d4a0a0;
  --text-muted: #8a5555;
  --primary: #ef4444;
  --primary-hover: #f87171;
  --primary-glow: rgba(239, 68, 68, 0.25);
  --secondary: #f97316;
  --secondary-hover: #fb923c;
  --secondary-glow: rgba(249, 115, 22, 0.2);
  --danger: #dc2626;
  --danger-hover: #ef4444;
  --success: #22c55e;
  --success-glow: rgba(34, 197, 94, 0.2);
  --warning: #fbbf24;
  --accent-gradient: linear-gradient(135deg, #ef4444, #f97316, #fbbf24);
  --card-shadow: 0 4px 24px rgba(15, 0, 0, 0.5), 0 1px 4px rgba(15, 0, 0, 0.3);
}
[data-theme="ember"] .bg-aurora::before {
  background: radial-gradient(
    ellipse,
    rgba(239, 68, 68, 0.12),
    transparent 70%
  );
}
[data-theme="ember"] .bg-aurora::after {
  background: radial-gradient(
    ellipse,
    rgba(249, 115, 22, 0.08),
    transparent 70%
  );
}

/* Amethyst (Ametist) — dark with deep purple/violet */
[data-theme="amethyst"] {
  --bg: #110a1a;
  --bg-card: #1a1228;
  --bg-card-hover: #221838;
  --bg-input: #0e0816;
  --bg-elevated: #281e40;
  --border: #3a2860;
  --border-light: #4a3475;
  --border-focus: #a855f7;
  --text: #f3e8ff;
  --text-secondary: #c4a0e0;
  --text-muted: #7a5598;
  --primary: #a855f7;
  --primary-hover: #c084fc;
  --primary-glow: rgba(168, 85, 247, 0.25);
  --secondary: #8b5cf6;
  --secondary-hover: #a78bfa;
  --secondary-glow: rgba(139, 92, 246, 0.2);
  --danger: #f43f5e;
  --danger-hover: #fb7185;
  --success: #10b981;
  --success-glow: rgba(16, 185, 129, 0.2);
  --warning: #f59e0b;
  --accent-gradient: linear-gradient(135deg, #a855f7, #8b5cf6, #7c3aed);
  --card-shadow:
    0 4px 24px rgba(10, 0, 20, 0.5), 0 1px 4px rgba(10, 0, 20, 0.3);
}
[data-theme="amethyst"] .bg-aurora::before {
  background: radial-gradient(
    ellipse,
    rgba(168, 85, 247, 0.12),
    transparent 70%
  );
}
[data-theme="amethyst"] .bg-aurora::after {
  background: radial-gradient(
    ellipse,
    rgba(139, 92, 246, 0.08),
    transparent 70%
  );
}

/* ═══════════════════════════════════════════════════════════════
   MEDIUM THEMES
   ═══════════════════════════════════════════════════════════════ */

/* Slate (Kayrak Taşı) — medium blue-gray */
[data-theme="slate"] {
  --bg: #334155;
  --bg-card: #3d4f66;
  --bg-card-hover: #475a72;
  --bg-input: #2c3a4d;
  --bg-elevated: #516580;
  --border: #5a7090;
  --border-light: #6880a0;
  --border-focus: #60a5fa;
  --text: #f1f5f9;
  --text-secondary: #cbd5e1;
  --text-muted: #8094b0;
  --primary: #60a5fa;
  --primary-hover: #93c5fd;
  --primary-glow: rgba(96, 165, 250, 0.2);
  --secondary: #38bdf8;
  --secondary-hover: #7dd3fc;
  --secondary-glow: rgba(56, 189, 248, 0.15);
  --danger: #f87171;
  --danger-hover: #fca5a5;
  --success: #34d399;
  --success-glow: rgba(52, 211, 153, 0.2);
  --warning: #fbbf24;
  --accent-gradient: linear-gradient(135deg, #60a5fa, #38bdf8, #818cf8);
  --card-shadow: 0 4px 20px rgba(0, 0, 0, 0.25), 0 1px 4px rgba(0, 0, 0, 0.15);
}
[data-theme="slate"] .bg-aurora::before {
  background: radial-gradient(
    ellipse,
    rgba(96, 165, 250, 0.1),
    transparent 70%
  );
}
[data-theme="slate"] .bg-aurora::after {
  background: radial-gradient(
    ellipse,
    rgba(56, 189, 248, 0.06),
    transparent 70%
  );
}

/* Copper (Bakır) — warm earthy mid-tones */
[data-theme="copper"] {
  --bg: #3a2e28;
  --bg-card: #4a3a32;
  --bg-card-hover: #56443a;
  --bg-input: #322822;
  --bg-elevated: #5e4c42;
  --border: #6e5a4e;
  --border-light: #806a5c;
  --border-focus: #f59e0b;
  --text: #faf5f0;
  --text-secondary: #d4c0aa;
  --text-muted: #9a8068;
  --primary: #f59e0b;
  --primary-hover: #fbbf24;
  --primary-glow: rgba(245, 158, 11, 0.2);
  --secondary: #d97706;
  --secondary-hover: #f59e0b;
  --secondary-glow: rgba(217, 119, 6, 0.15);
  --danger: #ef4444;
  --danger-hover: #f87171;
  --success: #34d399;
  --success-glow: rgba(52, 211, 153, 0.2);
  --warning: #fbbf24;
  --accent-gradient: linear-gradient(135deg, #f59e0b, #d97706, #ea580c);
  --card-shadow:
    0 4px 20px rgba(20, 10, 0, 0.3), 0 1px 4px rgba(20, 10, 0, 0.2);
}
[data-theme="copper"] .bg-aurora::before {
  background: radial-gradient(
    ellipse,
    rgba(245, 158, 11, 0.1),
    transparent 70%
  );
}
[data-theme="copper"] .bg-aurora::after {
  background: radial-gradient(
    ellipse,
    rgba(217, 119, 6, 0.06),
    transparent 70%
  );
}

/* Storm (Fırtına) — medium gray-purple */
[data-theme="storm"] {
  --bg: #2d2b3a;
  --bg-card: #383548;
  --bg-card-hover: #423e55;
  --bg-input: #262435;
  --bg-elevated: #4a4660;
  --border: #5a5570;
  --border-light: #6a6580;
  --border-focus: #a78bfa;
  --text: #f0ecf8;
  --text-secondary: #c0b8d8;
  --text-muted: #8078a0;
  --primary: #a78bfa;
  --primary-hover: #c4b5fd;
  --primary-glow: rgba(167, 139, 250, 0.2);
  --secondary: #818cf8;
  --secondary-hover: #a5b4fc;
  --secondary-glow: rgba(129, 140, 248, 0.15);
  --danger: #f87171;
  --danger-hover: #fca5a5;
  --success: #34d399;
  --success-glow: rgba(52, 211, 153, 0.2);
  --warning: #fbbf24;
  --accent-gradient: linear-gradient(135deg, #a78bfa, #818cf8, #6366f1);
  --card-shadow: 0 4px 20px rgba(0, 0, 10, 0.3), 0 1px 4px rgba(0, 0, 10, 0.2);
}
[data-theme="storm"] .bg-aurora::before {
  background: radial-gradient(
    ellipse,
    rgba(167, 139, 250, 0.1),
    transparent 70%
  );
}
[data-theme="storm"] .bg-aurora::after {
  background: radial-gradient(
    ellipse,
    rgba(129, 140, 248, 0.06),
    transparent 70%
  );
}

/* ═══════════════════════════════════════════════════════════════
   LIGHT THEMES
   ═══════════════════════════════════════════════════════════════ */

/* Snow (Kar) — cool light, blue accent */
[data-theme="snow"] {
  --bg: #f0f4f8;
  --bg-card: #ffffff;
  --bg-card-hover: #edf2f7;
  --bg-input: #e2e8f0;
  --bg-elevated: #ffffff;
  --border: #cbd5e1;
  --border-light: #e2e8f0;
  --border-focus: #3b82f6;
  --text: #1e293b;
  --text-secondary: #475569;
  --text-muted: #64748b;
  --primary: #3b82f6;
  --primary-hover: #2563eb;
  --primary-glow: rgba(59, 130, 246, 0.15);
  --secondary: #0ea5e9;
  --secondary-hover: #0284c7;
  --secondary-glow: rgba(14, 165, 233, 0.12);
  --danger: #dc2626;
  --danger-hover: #b91c1c;
  --success: #059669;
  --success-glow: rgba(5, 150, 105, 0.12);
  --warning: #d97706;
  --accent-gradient: linear-gradient(135deg, #3b82f6, #0ea5e9, #06b6d4);
  --card-shadow: 0 2px 12px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04);
}
[data-theme="snow"] .bg-aurora::before {
  background: radial-gradient(
    ellipse,
    rgba(59, 130, 246, 0.06),
    transparent 70%
  );
}
[data-theme="snow"] .bg-aurora::after {
  background: radial-gradient(
    ellipse,
    rgba(14, 165, 233, 0.04),
    transparent 70%
  );
}
[data-theme="snow"] .glass {
  background: rgba(255, 255, 255, 0.88);
}
[data-theme="snow"] body {
  background: #f0f4f8;
}

/* Cream (Krem) — warm light, golden accent */
[data-theme="cream"] {
  --bg: #faf7f2;
  --bg-card: #ffffff;
  --bg-card-hover: #f7f2ea;
  --bg-input: #f0ebe0;
  --bg-elevated: #ffffff;
  --border: #ddd5c8;
  --border-light: #ebe4d8;
  --border-focus: #d97706;
  --text: #292218;
  --text-secondary: #5a4e3e;
  --text-muted: #9a8e7e;
  --primary: #d97706;
  --primary-hover: #b45309;
  --primary-glow: rgba(217, 119, 6, 0.15);
  --secondary: #ea580c;
  --secondary-hover: #c2410c;
  --secondary-glow: rgba(234, 88, 12, 0.12);
  --danger: #dc2626;
  --danger-hover: #b91c1c;
  --success: #059669;
  --success-glow: rgba(5, 150, 105, 0.12);
  --warning: #d97706;
  --accent-gradient: linear-gradient(135deg, #d97706, #ea580c, #b45309);
  --card-shadow:
    0 2px 12px rgba(30, 20, 0, 0.06), 0 1px 3px rgba(30, 20, 0, 0.04);
}
[data-theme="cream"] .bg-aurora::before {
  background: radial-gradient(
    ellipse,
    rgba(217, 119, 6, 0.06),
    transparent 70%
  );
}
[data-theme="cream"] .bg-aurora::after {
  background: radial-gradient(
    ellipse,
    rgba(234, 88, 12, 0.04),
    transparent 70%
  );
}
[data-theme="cream"] .glass {
  background: rgba(255, 255, 255, 0.88);
}
[data-theme="cream"] body {
  background: #faf7f2;
}

/* Mint (Nane) — fresh light green */
[data-theme="mint"] {
  --bg: #f0faf6;
  --bg-card: #ffffff;
  --bg-card-hover: #e8f5ef;
  --bg-input: #dff0e8;
  --bg-elevated: #ffffff;
  --border: #c0ddd0;
  --border-light: #d5ebe0;
  --border-focus: #059669;
  --text: #1a2e24;
  --text-secondary: #3d5a4a;
  --text-muted: #7a9a8a;
  --primary: #059669;
  --primary-hover: #047857;
  --primary-glow: rgba(5, 150, 105, 0.15);
  --secondary: #14b8a6;
  --secondary-hover: #0d9488;
  --secondary-glow: rgba(20, 184, 166, 0.12);
  --danger: #dc2626;
  --danger-hover: #b91c1c;
  --success: #059669;
  --success-glow: rgba(5, 150, 105, 0.12);
  --warning: #d97706;
  --accent-gradient: linear-gradient(135deg, #059669, #14b8a6, #10b981);
  --card-shadow:
    0 2px 12px rgba(0, 15, 5, 0.06), 0 1px 3px rgba(0, 15, 5, 0.04);
}
[data-theme="mint"] .bg-aurora::before {
  background: radial-gradient(
    ellipse,
    rgba(5, 150, 105, 0.06),
    transparent 70%
  );
}
[data-theme="mint"] .bg-aurora::after {
  background: radial-gradient(
    ellipse,
    rgba(20, 184, 166, 0.04),
    transparent 70%
  );
}
[data-theme="mint"] .glass {
  background: rgba(255, 255, 255, 0.88);
}
[data-theme="mint"] body {
  background: #f0faf6;
}

/* ── Custom Theme Background ──────────────────────────────────── */
body[data-theme-bg] {
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-attachment: fixed !important;
}
body[data-theme-bg] .bg-aurora {
  opacity: 0.3;
}

/* ── Theme Picker Modal ───────────────────────────────────────── */
.theme-picker-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.theme-picker-card {
  width: 640px;
  max-width: 95vw;
  max-height: 85vh;
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.theme-picker-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}
.theme-picker-header h3 {
  margin: 0;
  font-size: 1.1rem;
}
.theme-picker-body {
  padding: 16px 20px;
  overflow-y: auto;
  flex: 1;
}
.theme-picker-section {
  margin-bottom: 20px;
}
.theme-picker-section h4 {
  margin: 0 0 10px;
  font-size: 0.85rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Theme grid cards */
.theme-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
}
.theme-card {
  border-radius: var(--radius-sm);
  border: 2px solid var(--border);
  padding: 12px;
  cursor: pointer;
  transition: var(--transition);
  position: relative;
  overflow: hidden;
}
.theme-card:hover {
  border-color: var(--border-focus);
  transform: translateY(-2px);
}
.theme-card.active {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px var(--primary-glow);
}
.theme-card-preview {
  height: 48px;
  border-radius: var(--radius-xs);
  margin-bottom: 8px;
  display: flex;
  gap: 4px;
  overflow: hidden;
}
.theme-card-preview .tp-bar {
  flex: 1;
  border-radius: 3px;
}
.theme-card-name {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text);
}
.theme-card-badge {
  position: absolute;
  top: 6px;
  right: 6px;
  font-size: 0.65rem;
  padding: 2px 6px;
  border-radius: 10px;
  background: var(--primary);
  color: #fff;
  font-weight: 600;
}
.theme-card-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0.15;
  border-radius: inherit;
}

/* Custom theme editor */
.custom-theme-editor {
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin-top: 12px;
}
.custom-theme-editor h4 {
  margin: 0 0 12px;
  font-size: 0.9rem;
  color: var(--text);
}
.cte-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.cte-row label {
  flex: 0 0 140px;
  font-size: 0.8rem;
  color: var(--text-secondary);
}
.cte-row input[type="color"] {
  width: 36px;
  height: 28px;
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  padding: 2px;
  cursor: pointer;
  background: var(--bg-input);
}
.cte-row input[type="text"] {
  flex: 1;
  font-size: 0.78rem;
  padding: 4px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  background: var(--bg-input);
  color: var(--text);
}
.cte-actions {
  display: flex;
  gap: 8px;
  margin-top: 14px;
  flex-wrap: wrap;
}
.cte-bg-preview {
  width: 100%;
  max-height: 80px;
  object-fit: cover;
  border-radius: var(--radius-xs);
  margin-top: 8px;
}

/* Admin theme management */
.admin-theme-section {
  border: 1.5px solid rgba(59, 130, 246, 0.3);
  border-radius: var(--radius-md);
  padding: 16px;
  background: rgba(59, 130, 246, 0.05);
  margin-top: 16px;
}
.admin-section-banner {
  display: inline-block;
  padding: 4px 12px;
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  border-radius: 6px;
  margin-bottom: 10px;
  letter-spacing: 0.3px;
}
.admin-theme-form {
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin-top: 12px;
}
.admin-theme-form .form-field {
  margin-bottom: 12px;
}
.admin-theme-form .form-field label {
  display: block;
  font-size: 0.8rem;
  color: var(--text-secondary);
  margin-bottom: 4px;
}
.admin-theme-form .form-field input[type="text"],
.admin-theme-form .form-field textarea {
  width: 100%;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  background: var(--bg-input);
  color: var(--text);
  font-size: 0.85rem;
}
.admin-theme-form .form-field textarea {
  min-height: 80px;
  font-family: monospace;
  resize: vertical;
}
.admin-theme-list {
  margin-top: 12px;
}
.admin-theme-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  margin-bottom: 8px;
  background: var(--bg-card);
}
.admin-theme-item .ati-name {
  font-weight: 600;
  font-size: 0.88rem;
}
.admin-theme-item .ati-default {
  font-size: 0.72rem;
  background: var(--success);
  color: #fff;
  padding: 2px 8px;
  border-radius: 10px;
  margin-left: 8px;
}
.admin-theme-item .ati-actions {
  display: flex;
  gap: 6px;
}

/* Theme button in topbar */
.theme-btn-topbar {
  position: relative;
}
.theme-btn-topbar .theme-indicator {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--primary);
  margin-left: 4px;
  vertical-align: middle;
}

/* ── Toast Notifications ───────────────────────────────────────── */
.toast-container {
  position: fixed;
  top: 16px;
  left: 16px;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
  max-height: 80vh;
  overflow: hidden;
}
.toast {
  pointer-events: auto;
  background: var(--bg-card, #1e293b);
  border: 1px solid var(--border-light, rgba(255, 255, 255, 0.06));
  border-radius: 12px;
  padding: 0;
  color: var(--text, #e0e7ff);
  font-size: 13px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: stretch;
  max-width: 360px;
  min-width: 280px;
  animation: toastIn 0.3s ease forwards;
  backdrop-filter: blur(12px);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  border-left: 4px solid var(--border-light, rgba(255, 255, 255, 0.06));
  transition:
    opacity 0.3s ease,
    transform 0.3s ease;
}
.toast.toast-removing {
  animation: toastOut 0.3s ease forwards;
}
.toast:hover {
  transform: translateX(2px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
}
.toast-icon {
  font-size: 20px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 0 12px 14px;
}
.toast-body {
  flex: 1;
  padding: 10px 14px 10px 10px;
  min-width: 0;
}
.toast-title {
  font-weight: 600;
  font-size: 13px;
  margin-bottom: 2px;
  color: var(--text, #e0e7ff);
}
.toast-message {
  font-size: 12px;
  color: var(--text-muted, #94a3b8);
  line-height: 1.4;
  word-break: break-word;
}
.toast-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  background: var(--primary, #6366f1);
  border-radius: 0 0 0 12px;
  animation: toastProgress linear forwards;
  opacity: 0.7;
}

/* Toast type variants */
.toast.toast-success {
  border-left-color: #22c55e;
}
.toast.toast-success .toast-progress {
  background: #22c55e;
}
.toast.toast-error {
  border-left-color: #ef4444;
}
.toast.toast-error .toast-progress {
  background: #ef4444;
}
.toast.toast-warning {
  border-left-color: #f59e0b;
}
.toast.toast-warning .toast-progress {
  background: #f59e0b;
}
.toast.toast-info {
  border-left-color: #3b82f6;
}
.toast.toast-info .toast-progress {
  background: #3b82f6;
}

@keyframes toastIn {
  from {
    opacity: 0;
    transform: translateX(-40px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}
@keyframes toastOut {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(-40px);
  }
}
@keyframes toastProgress {
  from {
    width: 100%;
  }
  to {
    width: 0%;
  }
}

@keyframes fadeScaleIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* ── User status indicator in user lists ───────────────────────── */
.user-status-ind {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* ── Voice quality info-only display ───────────────────────────── */
.quality-info-display {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text-secondary);
  background: rgba(15, 19, 35, 0.5);
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  padding: 5px 10px;
  min-width: 160px;
}

.quality-info-display .quality-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--primary);
  flex-shrink: 0;
}

/* ── Management modal success/loading indicators ───────────────── */
.mgmt-form .btn {
  position: relative;
  transition: all 0.3s;
}

.mgmt-form .btn.loading {
  opacity: 0.7;
  pointer-events: none;
}

.mgmt-form .btn.loading::after {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
  margin-left: 8px;
}

/* ── User management row polish ────────────────────────────────── */
.user-mgmt-row {
  transition: background 0.2s;
}

.user-mgmt-row.role-changed {
  background: rgba(16, 185, 129, 0.1);
  border-color: rgba(16, 185, 129, 0.3);
}

/* ── Participants section conditional visibility ───────────────── */
.participants-section .users-block[data-panel="participants"].no-voice {
  border: 1px dashed var(--border);
  opacity: 0.5;
}

.participants-section
  .users-block[data-panel="participants"].no-voice
  .participant-list {
  display: none;
}

/* ── Voice controls conditional ────────────────────────────────── */
.voice-controls.no-channel {
  opacity: 0.5;
  pointer-events: none;
}

/* ── Sidebar flex fix ──────────────────────────────────────────── */
.sidebar {
  min-height: 0;
}

/* ── Chat panel flex fix ───────────────────────────────────────── */
.chat-panel {
  min-height: 0;
}

/* ── Focus-visible for interactive elements ────────────────────── */
.emoji-grid button:focus-visible,
.reaction-picker button:focus-visible,
.msg-action-btn:focus-visible,
.status-option:focus-visible,
.dm-back-btn:focus-visible,
.user-action-btn:focus-visible,
.call-mute-btn:focus-visible,
.emoji-trigger:focus-visible {
  outline: 2px solid var(--primary, #6366f1);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ── DM empty state — defined above, no duplicate needed ────── */

/* ── Welcome Screen ────────────────────────────────────────────── */
.welcome-screen {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-direction: column;
  min-height: 0;
  overflow-y: auto;
  padding-top: 24px;
  padding-bottom: 24px;
}
.welcome-screen.hidden {
  display: none;
}
.welcome-content {
  text-align: center;
  animation: fadeScaleIn 0.4s ease;
}
.welcome-flag {
  width: 120px;
  height: 80px;
  margin-bottom: 24px;
  filter: drop-shadow(0 4px 20px rgba(227, 10, 23, 0.3));
  animation: pulse 3s ease-in-out infinite;
}
.welcome-title {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: 2px;
  color: var(--text);
  margin: 0 0 8px 0;
  background: linear-gradient(135deg, #e30a17, #f59e0b);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.welcome-subtitle {
  font-size: 16px;
  color: var(--text-secondary);
  margin: 0 0 16px 0;
  font-weight: 500;
}
/* Welcome feature cards */
.welcome-features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 20px;
  max-width: 780px;
  text-align: left;
}
.welcome-feature-card {
  padding: 14px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: background 0.2s;
}
.welcome-feature-card:hover {
  background: rgba(255, 255, 255, 0.1);
}
.welcome-feature-icon {
  font-size: 22px;
  margin-bottom: 2px;
}
.welcome-feature-card strong {
  font-size: 13px;
  color: var(--text-primary, #fff);
}
.welcome-feature-card p {
  font-size: 11.5px;
  color: var(--text-muted, rgba(255, 255, 255, 0.55));
  margin: 0;
  line-height: 1.4;
}
.welcome-feature-card code {
  background: rgba(0, 0, 0, 0.25);
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 11px;
}
[data-theme="light"] .welcome-feature-card {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.08);
}
[data-theme="light"] .welcome-feature-card:hover {
  background: rgba(0, 0, 0, 0.07);
}
[data-theme="light"] .welcome-feature-card code {
  background: rgba(0, 0, 0, 0.08);
}
@media (max-width: 900px) {
  .welcome-features {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 600px) {
  .welcome-features {
    grid-template-columns: 1fr;
  }
}

/* ── Panel close button ────────────────────────────────────────── */
.panel-close-btn {
  margin-left: auto;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.2s;
  flex-shrink: 0;
}
.panel-close-btn:hover {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
}

/* ── DM avatar status overlay ──────────────────────────────────── */
.dm-conv-avatar {
  position: relative;
}
.dm-avatar-status {
  position: absolute;
  bottom: -1px;
  right: -1px;
  width: 10px;
  height: 10px;
  border: 2px solid var(--bg-card, #1a1e2e);
  border-radius: 50%;
}

/* ── User row status dot sizing ────────────────────────────────── */
.user-avatar .status-dot {
  position: absolute;
  bottom: -1px;
  right: -1px;
  width: 10px;
  height: 10px;
  border: 2px solid var(--bg-card, #1a1e2e);
  border-radius: 50%;
}
.user-avatar {
  position: relative;
}

/* ── DM Read Receipt indicators ────────────────────────────────── */
.dm-msg-time.dm-sent {
  color: var(--text-muted, #64748b);
}
.dm-msg-time.dm-read {
  color: #3b82f6;
}

/* ── Sound Settings Dropdown ───────────────────────────────────── */
.sound-settings-wrap {
  position: relative;
}
.sound-settings-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 6px;
  min-width: 200px;
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: 12px;
  padding: 10px 12px;
  z-index: 1000;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
  animation: fadeScaleIn 0.12s ease;
}
.sound-settings-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.sound-toggle-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
  user-select: none;
}
.sound-toggle-row input[type="checkbox"] {
  accent-color: var(--primary, #6366f1);
  width: 16px;
  height: 16px;
  cursor: pointer;
}

/* ── Emoji Autocomplete ────────────────────────────────────────── */
.emoji-autocomplete {
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  max-height: 260px;
  overflow-y: auto;
  background: var(--bg-card, #0f1325);
  border: 1px solid var(--border);
  border-bottom: none;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  z-index: 100;
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.3);
}
.emoji-ac-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  cursor: pointer;
  transition: background 0.1s ease;
}
.emoji-ac-item:hover,
.emoji-ac-item.selected {
  background: rgba(99, 102, 241, 0.15);
}
.emoji-ac-emoji {
  font-size: 20px;
  width: 28px;
  text-align: center;
  flex-shrink: 0;
}
.emoji-ac-name {
  font-size: 13px;
  color: var(--text-secondary);
}

/* ── Slash Command Autocomplete ────────────────────────────────── */
.command-autocomplete {
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  max-height: 320px;
  overflow-y: auto;
  background: var(--bg-card, #0f1325);
  border: 1px solid var(--border);
  border-bottom: none;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  z-index: 100;
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.3);
  padding: 6px 0;
}
.command-ac-header {
  padding: 6px 14px 4px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: rgba(255, 255, 255, 0.35);
}
.command-ac-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 14px;
  cursor: pointer;
  transition: background 0.1s ease;
}
.command-ac-item:hover,
.command-ac-item.selected {
  background: rgba(99, 102, 241, 0.15);
}
.command-ac-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
  background: rgba(99, 102, 241, 0.1);
  color: var(--primary, #6366f1);
}
.command-ac-info {
  flex: 1;
  min-width: 0;
}
.command-ac-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text, #e8ecf4);
}
.command-ac-name .cmd-slash {
  color: var(--primary, #6366f1);
  font-weight: 700;
}
.command-ac-desc {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.45);
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Slash command messages in chat */
.msg-command {
  background: linear-gradient(
    135deg,
    rgba(99, 102, 241, 0.08),
    rgba(139, 92, 246, 0.06)
  );
  border-left: 3px solid var(--primary, #6366f1);
  border-radius: 4px;
  padding: 2px 6px;
  margin: -2px 0;
}
[data-theme="light"] .command-autocomplete {
  background: rgba(255, 255, 255, 0.98);
}
[data-theme="light"] .command-ac-desc {
  color: rgba(0, 0, 0, 0.45);
}
[data-theme="light"] .command-ac-name {
  color: var(--text);
}

/* ── PTT Settings ──────────────────────────────────────────────── */
.ptt-key-capture {
  min-width: 80px;
  font-family: var(--font-mono, monospace);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: capitalize;
  transition: all 0.2s;
}
.ptt-key-capture.capturing {
  animation: ptt-pulse 1s ease infinite;
  border-color: var(--primary, #6366f1);
  color: var(--primary, #6366f1);
}
@keyframes ptt-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.4);
  }
  50% {
    box-shadow: 0 0 0 6px rgba(99, 102, 241, 0);
  }
}
.settings-hint {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.35);
  margin-top: 4px;
  padding: 0 2px;
  line-height: 1.4;
}
.ptt-key-row {
  transition:
    opacity 0.2s,
    max-height 0.2s;
}

/* ── @ Mention Autocomplete ────────────────────────────────────── */
.mention-autocomplete {
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  max-height: 260px;
  overflow-y: auto;
  background: var(--bg-card, #0f1325);
  border: 1px solid var(--border);
  border-bottom: none;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  z-index: 100;
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.3);
}
.mention-ac-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  cursor: pointer;
  transition: background 0.1s ease;
}
.mention-ac-item:hover,
.mention-ac-item.selected {
  background: rgba(99, 102, 241, 0.15);
}
.mention-ac-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}
.mention-ac-name {
  font-size: 13px;
  color: var(--text);
  font-weight: 600;
}
.mention-ac-role {
  font-size: 11px;
  color: var(--text-muted);
  margin-left: auto;
}

/* ── Müzik Botu ────────────────────────────────────────────────── */
.music-bot-panel {
  margin: 16px 12px 12px;
  padding: 16px;
  background: rgba(15, 19, 37, 0.7);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.music-bot-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 10px;
}
.music-bot-header .icon {
  width: 18px;
  height: 18px;
}
.ic-pink {
  color: #ec4899;
}
.music-search-row {
  display: flex;
  gap: 6px;
  margin-bottom: 8px;
}
.music-search-row input {
  flex: 1;
  padding: 7px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font-size: 13px;
  outline: none;
  transition: border-color 0.2s;
}
.music-search-row input:focus {
  border-color: var(--primary);
}
.music-search-results {
  max-height: 220px;
  overflow-y: auto;
  margin-bottom: 8px;
}
.music-results-header {
  padding: 8px 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
}
.music-result-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 6px;
  border-radius: var(--radius-sm);
  transition: background 0.15s;
}
.music-result-item:hover {
  background: rgba(99, 102, 241, 0.1);
}
.music-result-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.music-pick-btn {
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  background: var(--primary);
  color: #fff;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  transition:
    background 0.15s,
    transform 0.1s;
}
.music-pick-btn:hover {
  background: var(--primary-hover);
  transform: scale(1.05);
}
.music-queue-add-btn {
  opacity: 0.5;
  transition: opacity 0.15s;
}
.music-queue-add-btn:hover {
  opacity: 1;
}
.music-result-thumb {
  width: 48px;
  height: 36px;
  border-radius: 4px;
  object-fit: cover;
  flex-shrink: 0;
  background: #1a1e36;
}
.music-result-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.music-result-title {
  font-size: 13px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.music-result-meta {
  font-size: 11px;
  color: var(--text-muted);
}

.music-loading {
  padding: 12px;
  text-align: center;
  font-size: 13px;
  color: var(--text-muted);
}
/* Now playing */
.music-now-playing {
  padding: 10px;
  background: rgba(99, 102, 241, 0.08);
  border: 1px solid rgba(99, 102, 241, 0.2);
  border-radius: var(--radius-sm);
  margin-bottom: 8px;
}
.music-np-info {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.music-np-thumb {
  width: 56px;
  height: 42px;
  border-radius: 4px;
  object-fit: cover;
  flex-shrink: 0;
  background: #1a1e36;
}
.music-np-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.music-np-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.music-np-channel {
  font-size: 11px;
  color: var(--text-muted);
}
.music-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.music-controls .btn-icon {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    background 0.15s,
    transform 0.1s;
}
.music-controls .btn-icon:hover {
  background: rgba(99, 102, 241, 0.2);
  transform: scale(1.1);
}
.music-play-btn {
  width: 40px !important;
  height: 40px !important;
  background: var(--primary) !important;
  color: #fff;
}
.music-play-btn:hover {
  background: var(--primary-hover) !important;
}

/* Music Volume */
.music-volume-section {
  padding: 8px 12px 4px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  margin-top: 8px;
}
.music-volume-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.music-volume-label {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.72rem;
  color: var(--text-muted, rgba(196, 181, 253, 0.5));
  white-space: nowrap;
  min-width: 95px;
}
.music-volume-label .icon {
  width: 14px;
  height: 14px;
  opacity: 0.6;
}
.music-volume-slider {
  flex: 1;
  height: 4px;
  -webkit-appearance: none;
  appearance: none;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
  outline: none;
  cursor: pointer;
}
.music-volume-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--primary, #7c3aed);
  border: 2px solid var(--bg-secondary, #1e1b2e);
  cursor: pointer;
  transition: transform 0.15s;
}
.music-volume-slider::-webkit-slider-thumb:hover {
  transform: scale(1.2);
}
.music-volume-slider::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--primary, #7c3aed);
  border: 2px solid var(--bg-secondary, #1e1b2e);
  cursor: pointer;
}
.music-volume-value {
  font-size: 0.72rem;
  color: var(--text-muted, rgba(196, 181, 253, 0.5));
  min-width: 32px;
  text-align: right;
}
.music-global-volume-row .music-volume-label {
  color: #fbbf24;
}
.music-global-volume-row .music-volume-slider::-webkit-slider-thumb {
  background: #fbbf24;
}
.music-global-volume-row .music-volume-slider::-moz-range-thumb {
  background: #fbbf24;
}

/* Queue */
.music-queue-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.music-queue-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.music-queue-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 4px;
  font-size: 13px;
  color: var(--text-secondary);
  border-radius: var(--radius-sm);
  transition: background 0.1s;
}
.music-queue-item:hover {
  background: rgba(99, 102, 241, 0.08);
}
.music-q-num {
  width: 20px;
  text-align: center;
  font-size: 11px;
  color: var(--text-muted);
  flex-shrink: 0;
}
.music-q-title {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.music-q-dur {
  font-size: 11px;
  color: var(--text-muted);
  flex-shrink: 0;
}
.music-q-remove {
  font-size: 16px;
  color: var(--text-muted);
  cursor: pointer;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition:
    background 0.15s,
    color 0.15s;
}
.music-q-remove:hover {
  background: rgba(239, 68, 68, 0.2);
  color: #ef4444;
}

/* ══════════════════════════════════════════════════════════════════
   NEW FEATURES — Search, Pin, Reply, File, Profile, Shortcuts,
   Stats, Audit, Code Blocks, URL Preview, Unread Badges, Slow Mode
   ══════════════════════════════════════════════════════════════════ */

/* ── Panel Header Actions ─────────────────────────────────────── */
.panel-header-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}
.panel-header-actions .btn-icon {
  position: relative;
}
.panel-header-actions .topbar-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: #ef4444;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  margin-left: 0;
}

/* ── Search Bar ───────────────────────────────────────────────── */
.search-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: rgba(99, 102, 241, 0.06);
  border-bottom: 1px solid rgba(99, 102, 241, 0.1);
}
.search-bar input {
  flex: 1;
  background: rgba(15, 18, 30, 0.6);
  border: 1px solid rgba(99, 102, 241, 0.15);
  border-radius: var(--radius-sm, 8px);
  padding: 6px 12px;
  color: var(--text, #e8ecf4);
  font-size: 13px;
  outline: none;
  transition: border-color 0.2s;
}
.search-bar input:focus {
  border-color: rgba(99, 102, 241, 0.4);
}
.search-results {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  max-height: 320px;
  overflow-y: auto;
  background: rgba(15, 18, 30, 0.97);
  border: 1px solid rgba(99, 102, 241, 0.12);
  border-radius: 0 0 var(--radius-sm, 8px) var(--radius-sm, 8px);
  z-index: 100;
  backdrop-filter: blur(12px);
}
.search-bar {
  position: relative;
}
.search-result-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 14px;
  cursor: pointer;
  transition: background 0.15s;
  border-bottom: 1px solid rgba(99, 102, 241, 0.06);
}
.search-result-item:hover {
  background: rgba(99, 102, 241, 0.08);
}
.search-result-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: rgba(196, 181, 253, 0.6);
}
.search-result-meta .search-user {
  font-weight: 600;
  color: var(--primary, #6366f1);
}
.search-result-content {
  font-size: 13px;
  color: var(--text, #e8ecf4);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.search-result-content mark {
  background: rgba(99, 102, 241, 0.3);
  color: #fff;
  border-radius: 2px;
  padding: 0 2px;
}
.search-no-results {
  padding: 16px;
  text-align: center;
  color: rgba(196, 181, 253, 0.5);
  font-size: 13px;
}

/* ── Pinned Messages Panel ────────────────────────────────────── */
.pinned-panel {
  border-bottom: 1px solid rgba(99, 102, 241, 0.1);
  background: rgba(99, 102, 241, 0.04);
  max-height: 300px;
  overflow-y: auto;
}
.pinned-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 14px;
  font-weight: 600;
  font-size: 13px;
  color: var(--primary, #6366f1);
  border-bottom: 1px solid rgba(99, 102, 241, 0.08);
  position: sticky;
  top: 0;
  background: inherit;
  z-index: 1;
}
.pinned-list {
  padding: 4px 0;
}
.pinned-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 14px;
  cursor: pointer;
  transition: background 0.15s;
  border-bottom: 1px solid rgba(99, 102, 241, 0.04);
}
.pinned-item:hover {
  background: rgba(99, 102, 241, 0.06);
}
.pinned-item-content {
  flex: 1;
  min-width: 0;
}
.pinned-item-user {
  font-weight: 600;
  font-size: 12px;
  color: var(--primary, #6366f1);
}
.pinned-item-text {
  font-size: 13px;
  color: var(--text, #e8ecf4);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
}
.pinned-item-time {
  font-size: 11px;
  color: rgba(196, 181, 253, 0.5);
  white-space: nowrap;
}
.pinned-empty {
  padding: 16px;
  text-align: center;
  color: rgba(196, 181, 253, 0.5);
  font-size: 13px;
}

/* ── Channel Info Panel ───────────────────────────────────────── */
.channel-info-panel {
  border-bottom: 1px solid rgba(99, 102, 241, 0.12);
  background: rgba(99, 102, 241, 0.04);
  max-height: 400px;
  overflow-y: auto;
}
.channel-info-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  font-weight: 600;
  font-size: 13px;
  color: var(--primary, #6366f1);
  border-bottom: 1px solid rgba(99, 102, 241, 0.08);
  position: sticky;
  top: 0;
  background: var(--bg-card, #161d35);
  z-index: 1;
}
.channel-info-body {
  padding: 0;
}
.channel-info-section {
  padding: 12px 16px;
}
.channel-info-name {
  font-size: 16px;
  font-weight: 700;
  color: var(--text, #e8ecf4);
  margin-bottom: 2px;
}
.channel-info-type {
  font-size: 12px;
  color: var(--text-muted, #9ca3af);
}
.channel-info-divider {
  height: 1px;
  background: rgba(99, 102, 241, 0.08);
  margin: 0 16px;
}
.channel-info-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted, #9ca3af);
  margin: 0 0 8px 0;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
}
.channel-info-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.channel-info-detail-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 6px;
  background: rgba(99, 102, 241, 0.04);
}
.channel-info-detail-icon {
  font-size: 14px;
  flex-shrink: 0;
}
.channel-info-detail-content {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.channel-info-detail-label {
  font-size: 10px;
  color: var(--text-muted, #9ca3af);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.channel-info-detail-value {
  font-size: 13px;
  color: var(--text, #e8ecf4);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.channel-info-members {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 200px;
  overflow-y: auto;
}
.channel-info-member {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s;
}
.channel-info-member:hover {
  background: rgba(99, 102, 241, 0.08);
}
.channel-info-member-avatar-wrap {
  position: relative;
  flex-shrink: 0;
}
.channel-info-member-avatar-wrap .avatar,
.channel-info-member-avatar-wrap .channel-info-member-avatar {
  width: 28px;
  height: 28px;
  font-size: 12px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.channel-info-member-avatar-wrap .channel-info-member-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
.channel-info-member-status {
  position: absolute;
  bottom: -1px;
  right: -1px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid var(--bg-card, #161d35);
  background: #6b7280;
}
.channel-info-member-status.online {
  background: #22c55e;
}
.channel-info-member-info {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.channel-info-member-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--text, #e8ecf4);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.channel-info-loading,
.channel-info-empty {
  padding: 12px;
  text-align: center;
  color: var(--text-muted, #9ca3af);
  font-size: 13px;
  list-style: none;
}

/* ── Reply Preview ────────────────────────────────────────────── */
.reply-preview {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: rgba(99, 102, 241, 0.08);
  border-left: 3px solid var(--primary, #6366f1);
  border-radius: 0 var(--radius-sm, 8px) var(--radius-sm, 8px) 0;
  font-size: 13px;
  color: rgba(196, 181, 253, 0.8);
  margin: 0 8px;
}
.reply-preview::before {
  content: "↩";
  font-size: 14px;
  color: var(--primary, #6366f1);
}
.reply-preview span {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.msg-reply-ref {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  margin-bottom: 4px;
  font-size: 12px;
  color: rgba(196, 181, 253, 0.6);
  background: rgba(99, 102, 241, 0.05);
  border-left: 2px solid rgba(99, 102, 241, 0.3);
  border-radius: 0 4px 4px 0;
  cursor: pointer;
  transition: background 0.15s;
}
.msg-reply-ref:hover {
  background: rgba(99, 102, 241, 0.1);
}
.msg-reply-ref::before {
  content: "↩";
  color: var(--primary, #6366f1);
}
.msg-reply-user {
  font-weight: 600;
  color: var(--primary, #6366f1);
}

/* ── File Upload Preview ──────────────────────────────────────── */
.file-preview {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: rgba(16, 185, 129, 0.08);
  border-left: 3px solid #10b981;
  border-radius: 0 var(--radius-sm, 8px) var(--radius-sm, 8px) 0;
  font-size: 13px;
  color: rgba(196, 181, 253, 0.8);
  margin: 0 8px;
}
.file-preview::before {
  content: "📎";
  font-size: 14px;
}
.file-preview span {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── File Attachment in Message ────────────────────────────────── */
.msg-attachment {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  margin-top: 6px;
  background: rgba(99, 102, 241, 0.06);
  border: 1px solid rgba(99, 102, 241, 0.1);
  border-radius: var(--radius-sm, 8px);
  transition: background 0.15s;
}
.msg-attachment:hover {
  background: rgba(99, 102, 241, 0.1);
}
.msg-attachment-icon {
  font-size: 20px;
  flex-shrink: 0;
}
.msg-attachment-info {
  flex: 1;
  min-width: 0;
}
.msg-attachment-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--primary, #6366f1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  text-decoration: none;
}
.msg-attachment-name:hover {
  text-decoration: underline;
}
.msg-attachment-size {
  font-size: 11px;
  color: rgba(196, 181, 253, 0.5);
}
.msg-attachment-img {
  max-width: 100%;
  max-height: 300px;
  border-radius: var(--radius-sm, 8px);
  margin-top: 6px;
  cursor: pointer;
}

/* ── Image Lightbox ────────────────────────────────────────────── */
.image-lightbox {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(0, 0, 0, 0.88);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  cursor: zoom-out;
  animation: fadeIn 0.2s ease;
}
.image-lightbox.hidden {
  display: none;
}
.lightbox-img {
  max-width: 90vw;
  max-height: 90vh;
  border-radius: 8px;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.6);
  object-fit: contain;
  cursor: default;
  background: rgba(255, 255, 255, 0.05);
  min-width: 80px;
  min-height: 80px;
}
.lightbox-close {
  position: absolute;
  top: 16px;
  right: 24px;
  background: rgba(255, 255, 255, 0.1);
  border: none;
  color: #fff;
  font-size: 28px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
  z-index: 2;
}
.lightbox-close:hover {
  background: rgba(255, 255, 255, 0.2);
}

/* ── Modal Styles (New modals: profile, shortcuts, stats, audit) ─ */
.modal-content {
  width: 90%;
  max-width: 480px;
  max-height: 80vh;
  padding: 0;
  border-radius: var(--radius, 16px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: modalSlide 0.25s ease;
}
@keyframes modalSlide {
  from {
    opacity: 0;
    transform: translateY(16px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(99, 102, 241, 0.1);
}
.modal-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
}
.modal-body {
  padding: 16px 20px;
  overflow-y: auto;
  flex: 1;
}

/* ── Keyboard Shortcuts ───────────────────────────────────────── */
.shortcuts-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.shortcut-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid rgba(99, 102, 241, 0.06);
}
.shortcut-row:last-child {
  border-bottom: none;
}
kbd {
  display: inline-block;
  padding: 2px 8px;
  background: rgba(99, 102, 241, 0.12);
  border: 1px solid rgba(99, 102, 241, 0.2);
  border-radius: 4px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--primary, #6366f1);
  line-height: 1.4;
}

/* ── Audit Log ────────────────────────────────────────────────── */
.audit-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
  max-height: 400px;
  overflow-y: auto;
}
.audit-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  background: rgba(15, 19, 35, 0.25);
  transition: background 0.15s;
}
.audit-row:hover {
  background: rgba(15, 19, 35, 0.45);
}
.audit-action {
  font-weight: 600;
  color: var(--primary, #6366f1);
  white-space: nowrap;
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 4px;
  background: rgba(99, 102, 241, 0.1);
}
.audit-actor {
  color: rgba(196, 181, 253, 0.7);
  font-weight: 500;
}
.audit-details {
  flex: 1;
  color: var(--text, #e8ecf4);
  word-break: break-word;
}
.audit-time {
  font-size: 11px;
  color: rgba(196, 181, 253, 0.4);
  white-space: nowrap;
}

/* ── Stats Modal ──────────────────────────────────────────────── */
.stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.stat-card {
  background: rgba(99, 102, 241, 0.06);
  border: 1px solid rgba(99, 102, 241, 0.1);
  border-radius: 12px;
  padding: 18px 14px;
  text-align: center;
  transition: all 0.2s ease;
}
.stat-card:hover {
  background: rgba(99, 102, 241, 0.1);
  border-color: rgba(99, 102, 241, 0.2);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.08);
}
.stat-value {
  font-size: 28px;
  font-weight: 800;
  background: var(--accent-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1.2;
}
.stat-label {
  font-size: 12px;
  color: var(--text-muted, rgba(196, 181, 253, 0.6));
  margin-top: 6px;
  font-weight: 500;
  letter-spacing: 0.3px;
}

/* ── Admin Files Browser ── */
.admin-files-table {
  width: 100%;
  font-size: 13px;
}
.admin-files-row {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 0.7fr 0.8fr 0.5fr;
  gap: 8px;
  padding: 8px 6px;
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.admin-files-header {
  font-weight: 600;
  color: var(--text-secondary, rgba(196, 181, 253, 0.7));
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.admin-files-row:hover:not(.admin-files-header) {
  background: rgba(255, 255, 255, 0.02);
  border-radius: 4px;
}
.afc-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.afc-name a {
  color: var(--primary, #6366f1);
  text-decoration: none;
}
.afc-name a:hover {
  text-decoration: underline;
}
.afc-channel,
.afc-user {
  color: var(--text-secondary, rgba(196, 181, 253, 0.7));
}
.afc-size,
.afc-date {
  color: var(--text-muted, rgba(196, 181, 253, 0.4));
  font-size: 12px;
}
.afc-action .btn-xs {
  font-size: 11px;
  padding: 2px 8px;
}

/* ── Profile Modal ────────────────────────────────────────────── */
.profile-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 24px 20px 16px;
  text-align: center;
}
.profile-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  font-weight: 700;
  color: #fff;
  border: 3px solid rgba(99, 102, 241, 0.2);
  transition: border-color 0.2s;
}
.profile-avatar:hover {
  border-color: rgba(99, 102, 241, 0.4);
}
.profile-username {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.3px;
}
.profile-role {
  font-size: 13px;
  padding: 3px 14px;
  border-radius: 16px;
  background: rgba(99, 102, 241, 0.15);
  color: var(--primary, #6366f1);
  font-weight: 600;
}
.profile-bio {
  font-size: 13px;
  color: rgba(196, 181, 253, 0.7);
  text-align: center;
  max-width: 320px;
  word-break: break-word;
  line-height: 1.5;
}
.profile-meta {
  font-size: 12px;
  color: rgba(196, 181, 253, 0.5);
}
.profile-actions {
  margin-top: 4px;
  display: flex;
  gap: 8px;
  justify-content: center;
}
.profile-dm-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 20px;
  font-size: 13px;
  font-weight: 600;
  border-radius: 20px;
  transition:
    filter 0.15s,
    transform 0.1s;
}
.profile-dm-btn:hover {
  filter: brightness(1.15);
  transform: none;
}
.profile-dm-btn:active {
  transform: scale(0.97);
}

/* ── Online Time Stats ─────────────────────────────────────────── */
.profile-online-stats {
  margin-top: 10px;
  padding: 10px 12px;
  background: rgba(99, 102, 241, 0.06);
  border-radius: var(--radius-sm, 8px);
  border: 1px solid rgba(99, 102, 241, 0.1);
  width: 100%;
  max-width: 320px;
}
.profile-online-stats-title {
  font-size: 12px;
  font-weight: 600;
  color: rgba(196, 181, 253, 0.7);
  margin-bottom: 6px;
}
.profile-online-stats-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 3px 0;
  font-size: 12.5px;
}
.profile-stat-label {
  color: rgba(196, 181, 253, 0.5);
}
.profile-stat-value {
  color: var(--text, #e8ecf4);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

#profileBioSection {
  width: 100%;
  margin-top: 12px;
}
#profileBioSection label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 4px;
  color: rgba(196, 181, 253, 0.7);
}
#profileBioSection textarea {
  width: 100%;
  background: rgba(15, 18, 30, 0.6);
  border: 1px solid rgba(99, 102, 241, 0.15);
  border-radius: var(--radius-sm, 8px);
  padding: 8px 12px;
  color: var(--text, #e8ecf4);
  font-size: 13px;
  resize: vertical;
  outline: none;
  font-family: inherit;
}
#profileBioSection textarea:focus {
  border-color: rgba(99, 102, 241, 0.4);
}

/* ── Avatar Image Support ─────────────────────────────────────── */
/* Shared: all avatar elements can contain an <img> instead of letter text */
.msg-avatar img,
.participant-avatar img,
.user-avatar img,
.user-popover-avatar img,
.profile-avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}
/* Animated avatar (GIF/APNG/WebP) — no filtering */
.msg-avatar.has-avatar,
.participant-avatar.has-avatar,
.user-avatar.has-avatar,
.user-popover-avatar.has-avatar,
.profile-avatar.has-avatar {
  background: none;
  overflow: hidden;
  padding: 0;
}
/* User-list avatar: keep overflow visible so status dots aren't clipped */
.user-avatar.has-avatar {
  overflow: visible;
}

/* Voice channel: animated avatar pulse when speaking */
.participant-list li.speaking .participant-avatar.has-avatar img {
  animation: avatarSpeakingGlow 1.5s ease-in-out infinite;
}
@keyframes avatarSpeakingGlow {
  0%,
  100% {
    box-shadow: 0 0 0 2px var(--success);
  }
  50% {
    box-shadow: 0 0 8px 3px var(--success-glow, rgba(16, 185, 129, 0.5));
  }
}

/* ── Profile Editor (in profile modal) ────────────────────────── */
.profile-edit-section {
  width: 100%;
  max-width: 400px;
  margin: 16px auto 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.profile-edit-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 16px;
  background: rgba(99, 102, 241, 0.04);
  border: 1px solid rgba(99, 102, 241, 0.08);
  border-radius: 10px;
}
.profile-edit-group label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: 2px;
}
.profile-edit-row {
  display: flex;
  gap: 8px;
  align-items: center;
}
.profile-edit-row input[type="text"],
.profile-edit-row input[type="email"],
.profile-edit-row input[type="url"] {
  flex: 1;
  background: rgba(15, 18, 30, 0.6);
  border: 1px solid rgba(99, 102, 241, 0.15);
  border-radius: var(--radius-sm, 8px);
  padding: 10px 14px;
  color: var(--text, #e8ecf4);
  font-size: 13px;
  outline: none;
  font-family: inherit;
  transition: border-color 0.2s;
}
.profile-edit-row input:focus {
  border-color: rgba(99, 102, 241, 0.45);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.08);
}
.profile-edit-row .btn {
  flex-shrink: 0;
}
/* Avatar preview in editor */
.avatar-edit-preview {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid rgba(99, 102, 241, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 34px;
  font-weight: 700;
  color: #fff;
  background: transparent;
  margin: 0 auto 14px;
  position: relative;
  cursor: pointer;
  transition: border-color 0.2s;
}
.avatar-edit-preview:hover {
  border-color: var(--primary);
}
.avatar-edit-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
.avatar-edit-preview > span:not(.avatar-edit-overlay) {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}
.avatar-edit-preview .avatar-edit-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  opacity: 0;
  transition: opacity 0.2s;
  border-radius: 50%;
}
.avatar-edit-preview:hover .avatar-edit-overlay {
  opacity: 1;
}
/* Avatar source tabs */
.avatar-source-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 10px;
}
.avatar-source-tab {
  flex: 1;
  padding: 6px 8px;
  font-size: 11px;
  font-weight: 600;
  text-align: center;
  border-radius: 6px;
  background: rgba(99, 102, 241, 0.08);
  color: var(--text-muted);
  cursor: pointer;
  border: 1px solid transparent;
  transition: all 0.2s;
}
.avatar-source-tab:hover {
  background: rgba(99, 102, 241, 0.15);
}
.avatar-source-tab.active {
  background: rgba(99, 102, 241, 0.2);
  color: var(--primary);
  border-color: rgba(99, 102, 241, 0.3);
}
.avatar-tab-content {
  display: none;
}
.avatar-tab-content.active {
  display: block;
}
/* Username uniqueness indicator */
.username-status {
  font-size: 11px;
  margin-top: 2px;
}
.username-status.available {
  color: var(--success);
}
.username-status.taken {
  color: var(--danger);
}
.username-status.checking {
  color: var(--text-muted);
}

/* ── Code blocks in messages ──────────────────────────────────── */
.msg-code-block {
  position: relative;
  margin-top: 6px;
  border-radius: var(--radius-sm, 8px);
  overflow: hidden;
}
.msg-code-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 12px;
  background: rgba(99, 102, 241, 0.12);
  font-size: 11px;
  color: rgba(196, 181, 253, 0.6);
}
.msg-code-copy {
  padding: 2px 8px;
  border: none;
  border-radius: 4px;
  background: rgba(99, 102, 241, 0.15);
  color: var(--primary, #6366f1);
  cursor: pointer;
  font-size: 11px;
  transition: background 0.15s;
}
.msg-code-copy:hover {
  background: rgba(99, 102, 241, 0.25);
}
.msg-code-block pre {
  margin: 0;
  padding: 12px;
  background: rgba(8, 11, 20, 0.8);
  overflow-x: auto;
  font-size: 13px;
  line-height: 1.5;
  color: #c4b5fd;
}
.msg-code-block code {
  font-family:
    "JetBrains Mono", "Fira Code", "Cascadia Code", "Source Code Pro", monospace;
}
.msg-inline-code {
  background: rgba(99, 102, 241, 0.12);
  padding: 1px 6px;
  border-radius: 4px;
  font-family: "JetBrains Mono", "Fira Code", monospace;
  font-size: 0.9em;
  color: #c4b5fd;
}

/* ── URL Preview ──────────────────────────────────────────────── */

/* ── Code Share Modal ─────────────────────────────────────────── */
.code-share-modal-card {
  max-width: 600px;
  width: 95%;
  text-align: left;
}
.code-share-modal-card h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 1rem;
  text-align: left;
}
.code-share-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 1rem;
  background: rgba(99, 102, 241, 0.06);
  border-radius: var(--radius-sm, 8px);
  padding: 4px;
}
.code-share-tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 12px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--muted, #8b92a5);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}
.code-share-tab:hover {
  color: var(--text, #e8ecf4);
}
.code-share-tab.active {
  background: var(--primary, #6366f1);
  color: #fff;
}
.code-share-tab-content {
  display: none;
}
.code-share-tab-content.active {
  display: block;
}

/* Drop zone */
.code-share-dropzone {
  border: 2px dashed rgba(99, 102, 241, 0.3);
  border-radius: var(--radius-sm, 8px);
  padding: 2rem 1rem;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s;
}
.code-share-dropzone:hover,
.code-share-dropzone.drag-over {
  border-color: var(--primary, #6366f1);
  background: rgba(99, 102, 241, 0.05);
}
.code-share-dropzone.drag-over {
  background: rgba(99, 102, 241, 0.1);
  transform: scale(1.01);
}
.code-share-dropzone-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.code-share-dropzone-inner .icon-lg {
  width: 40px;
  height: 40px;
  color: rgba(99, 102, 241, 0.5);
}
.code-share-dropzone-inner p {
  margin: 0;
  font-size: 14px;
  color: var(--text, #e8ecf4);
  font-weight: 500;
}
.code-share-dropzone-inner span {
  font-size: 12px;
  color: var(--muted, #8b92a5);
}

/* File info */
.code-share-file-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  margin-top: 8px;
  background: rgba(99, 102, 241, 0.08);
  border-radius: var(--radius-sm, 8px);
  font-size: 13px;
}
.code-share-filename {
  color: var(--primary, #6366f1);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Paste textarea */
.code-share-textarea {
  width: 100%;
  min-height: 160px;
  max-height: 300px;
  padding: 12px;
  border: 1px solid var(--border, rgba(99, 102, 241, 0.15));
  border-radius: var(--radius-sm, 8px);
  background: rgba(8, 11, 20, 0.6);
  color: #c4b5fd;
  font-family: "JetBrains Mono", "Fira Code", "Cascadia Code", monospace;
  font-size: 13px;
  line-height: 1.5;
  resize: vertical;
  tab-size: 2;
}
.code-share-textarea:focus {
  outline: none;
  border-color: var(--primary, #6366f1);
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.15);
}

/* Language selector */
.code-share-lang-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 12px 0;
}
.code-share-lang-row label {
  font-size: 13px;
  color: var(--muted, #8b92a5);
  font-weight: 500;
  white-space: nowrap;
}
.code-share-lang-select {
  flex: 1;
  padding: 6px 10px;
  border: 1px solid var(--border, rgba(99, 102, 241, 0.15));
  border-radius: 6px;
  background: rgba(8, 11, 20, 0.6);
  color: var(--text, #e8ecf4);
  font-size: 13px;
  cursor: pointer;
}
.code-share-lang-select:focus {
  outline: none;
  border-color: var(--primary, #6366f1);
}

/* Preview */
.code-share-preview {
  margin-top: 8px;
  border-radius: var(--radius-sm, 8px);
  overflow: hidden;
  border: 1px solid var(--border, rgba(99, 102, 241, 0.12));
}
.code-share-preview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 12px;
  background: rgba(99, 102, 241, 0.1);
  font-size: 11px;
  color: rgba(196, 181, 253, 0.6);
}
.code-share-line-count {
  font-size: 11px;
  color: rgba(196, 181, 253, 0.45);
}
.code-share-preview-pre {
  margin: 0;
  padding: 12px;
  background: rgba(8, 11, 20, 0.85);
  max-height: 220px;
  overflow: auto;
  font-size: 12px;
  line-height: 1.5;
  color: #c4b5fd;
}
.code-share-preview-pre code {
  font-family: "JetBrains Mono", "Fira Code", "Cascadia Code", monospace;
  white-space: pre;
}

/* ── URL Preview (continued) ─────────────────────────────────── */
.msg-url-preview {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  margin-top: 6px;
  background: rgba(99, 102, 241, 0.05);
  border-left: 3px solid var(--primary, #6366f1);
  border-radius: 0 var(--radius-sm, 8px) var(--radius-sm, 8px) 0;
  text-decoration: none;
  transition: background 0.15s;
}
.msg-url-preview:hover {
  background: rgba(99, 102, 241, 0.1);
}
.msg-url-domain {
  font-size: 11px;
  color: rgba(196, 181, 253, 0.5);
}
.msg-url-text {
  font-size: 13px;
  color: var(--primary, #6366f1);
  word-break: break-all;
}

/* ── Unread Badge on Channels ─────────────────────────────────── */
.channel-unread-badge {
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: #ef4444;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  margin-left: auto;
  flex-shrink: 0;
}
.channel-item.has-unread {
  font-weight: 700;
}

/* ── Slow Mode Indicator ──────────────────────────────────────── */
.slow-mode-indicator {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  font-size: 12px;
  color: rgba(251, 191, 36, 0.8);
  background: rgba(251, 191, 36, 0.06);
  border-bottom: 1px solid rgba(251, 191, 36, 0.1);
}
.slow-mode-indicator::before {
  content: "🐌";
}
.slow-mode-cooldown {
  color: #fbbf24;
  font-weight: 600;
}

/* ── Pin Toggle on Message Actions ────────────────────────────── */
.msg-action-btn.pin-action {
  color: #fbbf24;
}
.message.is-pinned {
  border-left-color: rgba(251, 191, 36, 0.4);
  background: rgba(251, 191, 36, 0.03);
}
.message.is-pinned::after {
  content: "📌";
  position: absolute;
  top: 4px;
  right: 8px;
  font-size: 12px;
  opacity: 0.5;
}
.message {
  position: relative;
}

/* ── Reply action button ──────────────────────────────────────── */
.msg-action-btn.reply-action {
  color: var(--primary, #6366f1);
}

/* ── Dark / Light theme overrides for new features ────────────── */
[data-theme="light"] .search-bar {
  background: rgba(99, 102, 241, 0.04);
}
[data-theme="light"] .search-bar input {
  background: rgba(255, 255, 255, 0.8);
  border-color: rgba(99, 102, 241, 0.2);
  color: var(--text);
}
[data-theme="light"] .search-results {
  background: rgba(255, 255, 255, 0.97);
}
[data-theme="light"] .pinned-panel {
  background: rgba(99, 102, 241, 0.03);
}
[data-theme="light"] .reply-preview {
  background: rgba(99, 102, 241, 0.06);
}
[data-theme="light"] .file-preview {
  background: rgba(16, 185, 129, 0.06);
}
[data-theme="light"] .msg-code-block pre {
  background: rgba(243, 244, 246, 0.9);
  color: #4338ca;
}
[data-theme="light"] .msg-inline-code {
  background: rgba(99, 102, 241, 0.08);
  color: #4338ca;
}
[data-theme="light"] .modal-content {
  background: rgba(255, 255, 255, 0.95);
  color: var(--text);
}
[data-theme="light"] kbd {
  background: rgba(99, 102, 241, 0.08);
}

/* ── Comprehensive light theme text & background fixes ───────── */
[data-theme="light"] .sidebar {
  background: rgba(255, 255, 255, 0.7);
  color: var(--text);
}
[data-theme="light"] .sidebar .channel-item,
[data-theme="light"] .sidebar .sidebar-heading,
[data-theme="light"] .sidebar .channel-name {
  color: var(--text);
}
[data-theme="light"] .sidebar .channel-item:hover {
  background: rgba(99, 102, 241, 0.08);
}
[data-theme="light"] .sidebar .channel-item.active {
  background: rgba(99, 102, 241, 0.12);
}
[data-theme="light"] .message .msg-username {
  color: var(--text);
}
[data-theme="light"] .message .msg-time,
[data-theme="light"] .message .msg-edited-tag {
  color: var(--text-muted);
}
[data-theme="light"] .message .body {
  color: var(--text);
}
[data-theme="light"] .message .msg-bubble {
  color: var(--text);
}
[data-theme="light"] .msg-reply-ref {
  background: rgba(99, 102, 241, 0.06);
  color: var(--text-secondary);
}
[data-theme="light"] .msg-attachment {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.08);
}
[data-theme="light"] .meta {
  color: var(--text-secondary);
}
[data-theme="light"] .voice-panel {
  background: rgba(255, 255, 255, 0.75);
  color: var(--text);
}
[data-theme="light"] .voice-panel .participant-name,
[data-theme="light"] .voice-panel .voice-status {
  color: var(--text);
}
[data-theme="light"] .voice-btn {
  color: var(--text);
  border-color: rgba(0, 0, 0, 0.12);
}
[data-theme="light"] .voice-btn:hover {
  background: rgba(99, 102, 241, 0.1);
}
[data-theme="light"] .topbar {
  background: rgba(255, 255, 255, 0.85);
  color: var(--text);
}
[data-theme="light"] .topbar .btn {
  color: var(--text);
}
[data-theme="light"] .dm-panel,
[data-theme="light"] .dm-sidebar {
  background: rgba(255, 255, 255, 0.8);
  color: var(--text);
}
[data-theme="light"] .dm-conversation-item {
  color: var(--text);
}
[data-theme="light"] .dm-conversation-item:hover {
  background: rgba(99, 102, 241, 0.06);
}
[data-theme="light"] .dm-message {
  color: var(--text);
}
[data-theme="light"] .users-drawer {
  background: rgba(255, 255, 255, 0.95);
  color: var(--text);
}
[data-theme="light"] .users-drawer .user-row {
  color: var(--text);
}
[data-theme="light"] .users-drawer .user-row:hover {
  background: rgba(99, 102, 241, 0.06);
}
[data-theme="light"] .chat-input-area {
  background: rgba(255, 255, 255, 0.85);
}
[data-theme="light"] .chat-input-area input,
[data-theme="light"] .chat-input-area textarea,
[data-theme="light"] #messageInput {
  background: rgba(0, 0, 0, 0.04);
  color: var(--text);
  border-color: rgba(0, 0, 0, 0.1);
}
[data-theme="light"] #messageInput::placeholder {
  color: var(--text-muted);
}
[data-theme="light"] .emoji-autocomplete {
  background: rgba(255, 255, 255, 0.98);
  border-color: rgba(0, 0, 0, 0.1);
  color: var(--text);
}
[data-theme="light"] .mention-autocomplete {
  background: rgba(255, 255, 255, 0.98);
  border-color: rgba(0, 0, 0, 0.1);
  color: var(--text);
}
[data-theme="light"] .emoji-picker {
  background: rgba(255, 255, 255, 0.97);
  color: var(--text);
}
[data-theme="light"] .profile-card {
  color: var(--text);
}
[data-theme="light"] .profile-card .profile-username {
  color: var(--text);
}
[data-theme="light"] .profile-card .profile-bio,
[data-theme="light"] .profile-card .profile-meta {
  color: var(--text-secondary);
}
[data-theme="light"] .profile-online-stats {
  color: var(--text);
}
/* ── Light Theme: Channel Info Panel ── */
[data-theme="light"] .channel-info-panel {
  background: rgba(255, 255, 255, 0.85);
  border-bottom-color: rgba(0, 0, 0, 0.08);
}
[data-theme="light"] .channel-info-header {
  background: rgba(255, 255, 255, 0.95);
  color: var(--primary);
  border-bottom-color: rgba(0, 0, 0, 0.06);
}
[data-theme="light"] .channel-info-name {
  color: var(--text);
}
[data-theme="light"] .channel-info-type,
[data-theme="light"] .channel-info-topic {
  color: var(--text-secondary);
}
[data-theme="light"] .channel-info-member-name {
  color: var(--text);
}
[data-theme="light"] .channel-info-member:hover {
  background: rgba(99, 102, 241, 0.08);
}
[data-theme="light"] .channel-info-divider {
  border-color: rgba(0, 0, 0, 0.06);
}
/* ── Light Theme: Management Modal ── */
[data-theme="light"] .management-modal,
:is([data-theme="snow"], [data-theme="cream"], [data-theme="mint"])
  .management-modal {
  border-color: rgba(0, 0, 0, 0.08);
  box-shadow:
    0 24px 80px rgba(0, 0, 0, 0.12),
    0 0 0 1px rgba(0, 0, 0, 0.04);
}
[data-theme="light"] .mgmt-header,
:is([data-theme="snow"], [data-theme="cream"], [data-theme="mint"])
  .mgmt-header {
  background: linear-gradient(
    180deg,
    rgba(99, 102, 241, 0.06) 0%,
    transparent 100%
  );
  border-bottom-color: rgba(0, 0, 0, 0.06);
}
[data-theme="light"] .mgmt-tabs,
:is([data-theme="snow"], [data-theme="cream"], [data-theme="mint"]) .mgmt-tabs {
  border-bottom-color: rgba(0, 0, 0, 0.06);
}
[data-theme="light"] .mgmt-tab,
:is([data-theme="snow"], [data-theme="cream"], [data-theme="mint"]) .mgmt-tab {
  color: var(--text-muted);
}
[data-theme="light"] .mgmt-tab.active,
:is([data-theme="snow"], [data-theme="cream"], [data-theme="mint"])
  .mgmt-tab.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
}
[data-theme="light"] .user-mgmt-row,
:is([data-theme="snow"], [data-theme="cream"], [data-theme="mint"])
  .user-mgmt-row {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.06);
}
[data-theme="light"] .user-mgmt-row:hover,
:is([data-theme="snow"], [data-theme="cream"], [data-theme="mint"])
  .user-mgmt-row:hover {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(99, 102, 241, 0.15);
}
[data-theme="light"] .stat-card,
:is([data-theme="snow"], [data-theme="cream"], [data-theme="mint"]) .stat-card {
  background: rgba(99, 102, 241, 0.04);
  border-color: rgba(99, 102, 241, 0.08);
}
[data-theme="light"] .audit-row,
:is([data-theme="snow"], [data-theme="cream"], [data-theme="mint"]) .audit-row {
  background: rgba(0, 0, 0, 0.02);
}
[data-theme="light"] .audit-row:hover,
:is([data-theme="snow"], [data-theme="cream"], [data-theme="mint"])
  .audit-row:hover {
  background: rgba(0, 0, 0, 0.04);
}
[data-theme="light"] .notification-permission-banner,
:is([data-theme="snow"], [data-theme="cream"], [data-theme="mint"])
  .notification-permission-banner {
  background: rgba(255, 255, 255, 0.95);
  border-color: rgba(0, 0, 0, 0.08);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}
/* ── Light Theme: Profile Dropdown ── */
[data-theme="light"] .profile-dropdown {
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.12),
    0 0 0 1px rgba(0, 0, 0, 0.04);
}
[data-theme="light"] .profile-dd-user-section {
  background: rgba(99, 102, 241, 0.06);
}
[data-theme="light"] .profile-dd-name {
  color: var(--text);
}
[data-theme="light"] .profile-dd-divider {
  background: rgba(0, 0, 0, 0.08);
}
[data-theme="light"] .profile-dd-item {
  color: var(--text-secondary);
}
[data-theme="light"] .profile-dd-item:hover {
  background: rgba(99, 102, 241, 0.08);
  color: var(--text);
}
[data-theme="light"] .profile-dd-danger {
  color: var(--danger);
}
[data-theme="light"] .profile-dd-danger:hover {
  background: rgba(220, 38, 38, 0.08);
  color: var(--danger);
}
[data-theme="light"] .profile-dd-label {
  color: var(--text-muted);
}
[data-theme="light"] .profile-dd-status-option {
  color: var(--text-secondary);
}
[data-theme="light"] .profile-dd-status-option:hover {
  background: rgba(99, 102, 241, 0.06);
  color: var(--text);
}
[data-theme="light"] .modal-header h3 {
  color: var(--text);
}
[data-theme="light"] .welcome-screen {
  color: var(--text);
}
[data-theme="light"] .welcome-screen h1,
[data-theme="light"] .welcome-screen h2,
[data-theme="light"] .welcome-screen p {
  color: var(--text);
}
[data-theme="light"] .typing-indicator {
  color: var(--text-secondary);
}
[data-theme="light"] .music-bot-panel {
  background: rgba(255, 255, 255, 0.9);
  color: var(--text);
}
[data-theme="light"] .settings-label {
  color: var(--text);
}
[data-theme="light"] .slider-value {
  color: var(--text-secondary);
}
[data-theme="light"] .quality-info-display {
  color: var(--text-secondary);
}
[data-theme="light"] input[type="text"],
[data-theme="light"] input[type="email"],
[data-theme="light"] input[type="url"],
[data-theme="light"] input[type="password"],
[data-theme="light"] textarea,
[data-theme="light"] select {
  color: var(--text);
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.12);
}
[data-theme="light"] .device-select {
  color: var(--text);
  background: rgba(0, 0, 0, 0.04);
}
[data-theme="light"] .search-result-item {
  color: var(--text);
}
[data-theme="light"] .pinned-item {
  color: var(--text);
}
[data-theme="light"] .mic-test-card {
  background: rgba(0, 0, 0, 0.02);
  color: var(--text);
}
[data-theme="light"] .mic-test-hint {
  color: var(--text-secondary);
}
[data-theme="light"] .mic-test-db {
  color: var(--text);
}
[data-theme="light"] .user-popover {
  background: rgba(255, 255, 255, 0.97);
  color: var(--text);
}

/* ═══════════════════════════════════════════════════════════════ */
/* ═══ Light Theme Variants: Snow / Cream / Mint ═══              */
/* ═══ Share the same component overrides as "light" theme ═══    */
/* ═══════════════════════════════════════════════════════════════ */
:is([data-theme="snow"], [data-theme="cream"], [data-theme="mint"])
  .search-bar {
  background: rgba(99, 102, 241, 0.04);
}
:is([data-theme="snow"], [data-theme="cream"], [data-theme="mint"])
  .search-bar
  input {
  background: rgba(255, 255, 255, 0.8);
  border-color: rgba(99, 102, 241, 0.2);
  color: var(--text);
}
:is([data-theme="snow"], [data-theme="cream"], [data-theme="mint"])
  .search-results {
  background: rgba(255, 255, 255, 0.97);
}
:is([data-theme="snow"], [data-theme="cream"], [data-theme="mint"])
  .pinned-panel {
  background: rgba(99, 102, 241, 0.03);
}
:is([data-theme="snow"], [data-theme="cream"], [data-theme="mint"])
  .reply-preview {
  background: rgba(99, 102, 241, 0.06);
}
:is([data-theme="snow"], [data-theme="cream"], [data-theme="mint"])
  .file-preview {
  background: rgba(16, 185, 129, 0.06);
}
:is([data-theme="snow"], [data-theme="cream"], [data-theme="mint"])
  .msg-code-block
  pre {
  background: rgba(243, 244, 246, 0.9);
  color: #4338ca;
}
:is([data-theme="snow"], [data-theme="cream"], [data-theme="mint"])
  .msg-inline-code {
  background: rgba(99, 102, 241, 0.08);
}
/* ── Snow/Cream/Mint: Channel Info Panel ── */
:is([data-theme="snow"], [data-theme="cream"], [data-theme="mint"])
  .channel-info-panel {
  background: rgba(255, 255, 255, 0.85);
  border-bottom-color: rgba(0, 0, 0, 0.08);
}
:is([data-theme="snow"], [data-theme="cream"], [data-theme="mint"])
  .channel-info-header {
  background: rgba(255, 255, 255, 0.95);
  border-bottom-color: rgba(0, 0, 0, 0.06);
}
:is([data-theme="snow"], [data-theme="cream"], [data-theme="mint"])
  .channel-info-name {
  color: var(--text);
}
:is([data-theme="snow"], [data-theme="cream"], [data-theme="mint"])
  .channel-info-member-name {
  color: var(--text);
}
:is([data-theme="snow"], [data-theme="cream"], [data-theme="mint"])
  .channel-info-member:hover {
  background: rgba(0, 0, 0, 0.04);
}
:is([data-theme="snow"], [data-theme="cream"], [data-theme="mint"])
  .modal-content {
  background: rgba(255, 255, 255, 0.95);
  color: var(--text);
}
:is([data-theme="snow"], [data-theme="cream"], [data-theme="mint"]) kbd {
  background: rgba(99, 102, 241, 0.08);
}
:is([data-theme="snow"], [data-theme="cream"], [data-theme="mint"]) .sidebar {
  background: rgba(255, 255, 255, 0.7);
  color: var(--text);
}
:is([data-theme="snow"], [data-theme="cream"], [data-theme="mint"])
  .sidebar
  .channel-item,
:is([data-theme="snow"], [data-theme="cream"], [data-theme="mint"])
  .sidebar
  .sidebar-heading,
:is([data-theme="snow"], [data-theme="cream"], [data-theme="mint"])
  .sidebar
  .channel-name {
  color: var(--text);
}
:is([data-theme="snow"], [data-theme="cream"], [data-theme="mint"])
  .sidebar
  .channel-item:hover {
  background: rgba(99, 102, 241, 0.08);
}
:is([data-theme="snow"], [data-theme="cream"], [data-theme="mint"])
  .sidebar
  .channel-item.active {
  background: rgba(99, 102, 241, 0.12);
}
:is([data-theme="snow"], [data-theme="cream"], [data-theme="mint"])
  .message
  .msg-username {
  color: var(--text);
}
:is([data-theme="snow"], [data-theme="cream"], [data-theme="mint"])
  .message
  .msg-time,
:is([data-theme="snow"], [data-theme="cream"], [data-theme="mint"])
  .message
  .msg-edited-tag {
  color: var(--text-muted);
}
:is([data-theme="snow"], [data-theme="cream"], [data-theme="mint"])
  .message
  .body {
  color: var(--text);
}
:is([data-theme="snow"], [data-theme="cream"], [data-theme="mint"])
  .message
  .msg-bubble {
  color: var(--text);
}
:is([data-theme="snow"], [data-theme="cream"], [data-theme="mint"])
  .msg-reply-ref {
  background: rgba(99, 102, 241, 0.06);
  color: var(--text-secondary);
}
:is([data-theme="snow"], [data-theme="cream"], [data-theme="mint"])
  .msg-attachment {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.08);
}
:is([data-theme="snow"], [data-theme="cream"], [data-theme="mint"]) .meta {
  color: var(--text-secondary);
}
:is([data-theme="snow"], [data-theme="cream"], [data-theme="mint"])
  .voice-panel {
  background: rgba(255, 255, 255, 0.75);
  color: var(--text);
}
:is([data-theme="snow"], [data-theme="cream"], [data-theme="mint"])
  .voice-panel
  .participant-name,
:is([data-theme="snow"], [data-theme="cream"], [data-theme="mint"])
  .voice-panel
  .voice-status {
  color: var(--text);
}
:is([data-theme="snow"], [data-theme="cream"], [data-theme="mint"]) .voice-btn {
  color: var(--text);
  border-color: rgba(0, 0, 0, 0.12);
}
:is([data-theme="snow"], [data-theme="cream"], [data-theme="mint"])
  .voice-btn:hover {
  background: rgba(99, 102, 241, 0.1);
}
:is([data-theme="snow"], [data-theme="cream"], [data-theme="mint"]) .topbar {
  background: rgba(255, 255, 255, 0.85);
  color: var(--text);
}
:is([data-theme="snow"], [data-theme="cream"], [data-theme="mint"])
  .topbar
  .btn {
  color: var(--text);
}
:is([data-theme="snow"], [data-theme="cream"], [data-theme="mint"]) .dm-panel,
:is([data-theme="snow"], [data-theme="cream"], [data-theme="mint"])
  .dm-sidebar {
  background: rgba(255, 255, 255, 0.8);
  color: var(--text);
}
:is([data-theme="snow"], [data-theme="cream"], [data-theme="mint"])
  .dm-conversation-item {
  color: var(--text);
}
:is([data-theme="snow"], [data-theme="cream"], [data-theme="mint"])
  .dm-conversation-item:hover {
  background: rgba(99, 102, 241, 0.06);
}
:is([data-theme="snow"], [data-theme="cream"], [data-theme="mint"])
  .dm-message {
  color: var(--text);
}
:is([data-theme="snow"], [data-theme="cream"], [data-theme="mint"])
  .users-drawer {
  background: rgba(255, 255, 255, 0.95);
  color: var(--text);
}
:is([data-theme="snow"], [data-theme="cream"], [data-theme="mint"])
  .users-drawer
  .user-row {
  color: var(--text);
}
:is([data-theme="snow"], [data-theme="cream"], [data-theme="mint"])
  .users-drawer
  .user-row:hover {
  background: rgba(99, 102, 241, 0.06);
}
:is([data-theme="snow"], [data-theme="cream"], [data-theme="mint"])
  .chat-input-area {
  background: rgba(255, 255, 255, 0.85);
}
:is([data-theme="snow"], [data-theme="cream"], [data-theme="mint"])
  .chat-input-area
  input,
:is([data-theme="snow"], [data-theme="cream"], [data-theme="mint"])
  .chat-input-area
  textarea,
:is([data-theme="snow"], [data-theme="cream"], [data-theme="mint"])
  #messageInput {
  background: rgba(0, 0, 0, 0.04);
  color: var(--text);
  border-color: rgba(0, 0, 0, 0.1);
}
:is([data-theme="snow"], [data-theme="cream"], [data-theme="mint"])
  #messageInput::placeholder {
  color: var(--text-muted);
}
:is([data-theme="snow"], [data-theme="cream"], [data-theme="mint"])
  .emoji-autocomplete {
  background: rgba(255, 255, 255, 0.98);
  border-color: rgba(0, 0, 0, 0.1);
  color: var(--text);
}
:is([data-theme="snow"], [data-theme="cream"], [data-theme="mint"])
  .mention-autocomplete {
  background: rgba(255, 255, 255, 0.98);
  border-color: rgba(0, 0, 0, 0.1);
  color: var(--text);
}
:is([data-theme="snow"], [data-theme="cream"], [data-theme="mint"])
  .emoji-picker {
  background: rgba(255, 255, 255, 0.97);
  color: var(--text);
}
:is([data-theme="snow"], [data-theme="cream"], [data-theme="mint"])
  .profile-card {
  color: var(--text);
}
:is([data-theme="snow"], [data-theme="cream"], [data-theme="mint"])
  .profile-card
  .profile-username {
  color: var(--text);
}
:is([data-theme="snow"], [data-theme="cream"], [data-theme="mint"])
  .profile-card
  .profile-bio,
:is([data-theme="snow"], [data-theme="cream"], [data-theme="mint"])
  .profile-card
  .profile-meta {
  color: var(--text-secondary);
}
:is([data-theme="snow"], [data-theme="cream"], [data-theme="mint"])
  .profile-online-stats {
  color: var(--text);
}
:is([data-theme="snow"], [data-theme="cream"], [data-theme="mint"])
  .profile-dropdown {
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.12),
    0 0 0 1px rgba(0, 0, 0, 0.04);
}
:is([data-theme="snow"], [data-theme="cream"], [data-theme="mint"])
  .profile-dd-user-section {
  background: rgba(99, 102, 241, 0.06);
}
:is([data-theme="snow"], [data-theme="cream"], [data-theme="mint"])
  .profile-dd-name {
  color: var(--text);
}
:is([data-theme="snow"], [data-theme="cream"], [data-theme="mint"])
  .profile-dd-divider {
  background: rgba(0, 0, 0, 0.08);
}
:is([data-theme="snow"], [data-theme="cream"], [data-theme="mint"])
  .profile-dd-item {
  color: var(--text-secondary);
}
:is([data-theme="snow"], [data-theme="cream"], [data-theme="mint"])
  .profile-dd-item:hover {
  background: rgba(99, 102, 241, 0.08);
  color: var(--text);
}
:is([data-theme="snow"], [data-theme="cream"], [data-theme="mint"])
  .profile-dd-danger {
  color: var(--danger);
}
:is([data-theme="snow"], [data-theme="cream"], [data-theme="mint"])
  .profile-dd-danger:hover {
  background: rgba(220, 38, 38, 0.08);
  color: var(--danger);
}
:is([data-theme="snow"], [data-theme="cream"], [data-theme="mint"])
  .profile-dd-label {
  color: var(--text-muted);
}
:is([data-theme="snow"], [data-theme="cream"], [data-theme="mint"])
  .profile-dd-status-option {
  color: var(--text-secondary);
}
:is([data-theme="snow"], [data-theme="cream"], [data-theme="mint"])
  .profile-dd-status-option:hover {
  background: rgba(99, 102, 241, 0.06);
  color: var(--text);
}
:is([data-theme="snow"], [data-theme="cream"], [data-theme="mint"])
  .modal-header
  h3 {
  color: var(--text);
}
:is([data-theme="snow"], [data-theme="cream"], [data-theme="mint"])
  .welcome-screen {
  color: var(--text);
}
:is([data-theme="snow"], [data-theme="cream"], [data-theme="mint"])
  .welcome-screen
  h1,
:is([data-theme="snow"], [data-theme="cream"], [data-theme="mint"])
  .welcome-screen
  h2,
:is([data-theme="snow"], [data-theme="cream"], [data-theme="mint"])
  .welcome-screen
  p {
  color: var(--text);
}
:is([data-theme="snow"], [data-theme="cream"], [data-theme="mint"])
  .typing-indicator {
  color: var(--text-secondary);
}
:is([data-theme="snow"], [data-theme="cream"], [data-theme="mint"])
  .music-bot-panel {
  background: rgba(255, 255, 255, 0.9);
  color: var(--text);
}
:is([data-theme="snow"], [data-theme="cream"], [data-theme="mint"])
  .settings-label {
  color: var(--text);
}
:is([data-theme="snow"], [data-theme="cream"], [data-theme="mint"])
  .slider-value {
  color: var(--text-secondary);
}
:is([data-theme="snow"], [data-theme="cream"], [data-theme="mint"])
  .quality-info-display {
  color: var(--text-secondary);
}
:is([data-theme="snow"], [data-theme="cream"], [data-theme="mint"])
  input[type="text"],
:is([data-theme="snow"], [data-theme="cream"], [data-theme="mint"])
  input[type="email"],
:is([data-theme="snow"], [data-theme="cream"], [data-theme="mint"])
  input[type="url"],
:is([data-theme="snow"], [data-theme="cream"], [data-theme="mint"])
  input[type="password"],
:is([data-theme="snow"], [data-theme="cream"], [data-theme="mint"]) textarea,
:is([data-theme="snow"], [data-theme="cream"], [data-theme="mint"]) select {
  color: var(--text);
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.12);
}
:is([data-theme="snow"], [data-theme="cream"], [data-theme="mint"])
  .device-select {
  color: var(--text);
  background: rgba(0, 0, 0, 0.04);
}
:is([data-theme="snow"], [data-theme="cream"], [data-theme="mint"])
  .search-result-item {
  color: var(--text);
}
:is([data-theme="snow"], [data-theme="cream"], [data-theme="mint"])
  .pinned-item {
  color: var(--text);
}
:is([data-theme="snow"], [data-theme="cream"], [data-theme="mint"])
  .mic-test-card {
  background: rgba(0, 0, 0, 0.02);
  color: var(--text);
}
:is([data-theme="snow"], [data-theme="cream"], [data-theme="mint"])
  .mic-test-hint {
  color: var(--text-secondary);
}
:is([data-theme="snow"], [data-theme="cream"], [data-theme="mint"])
  .mic-test-db {
  color: var(--text);
}
:is([data-theme="snow"], [data-theme="cream"], [data-theme="mint"])
  .user-popover {
  background: rgba(255, 255, 255, 0.97);
  color: var(--text);
}
:is([data-theme="snow"], [data-theme="cream"], [data-theme="mint"])
  .welcome-feature-card {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.08);
}
:is([data-theme="snow"], [data-theme="cream"], [data-theme="mint"])
  .welcome-feature-card:hover {
  background: rgba(0, 0, 0, 0.07);
}
:is([data-theme="snow"], [data-theme="cream"], [data-theme="mint"])
  .welcome-feature-card
  code {
  background: rgba(0, 0, 0, 0.08);
}
:is([data-theme="snow"], [data-theme="cream"], [data-theme="mint"])
  .command-autocomplete {
  background: rgba(255, 255, 255, 0.98);
}
:is([data-theme="snow"], [data-theme="cream"], [data-theme="mint"])
  .command-ac-desc {
  color: rgba(0, 0, 0, 0.45);
}
:is([data-theme="snow"], [data-theme="cream"], [data-theme="mint"])
  .command-ac-name {
  color: var(--text);
}

/* ── Light Theme Variants: Settings Panel ── */
:is([data-theme="snow"], [data-theme="cream"], [data-theme="mint"])
  .us-sidebar {
  background: rgba(245, 246, 250, 0.99);
  border-right-color: rgba(0, 0, 0, 0.08);
}
:is([data-theme="snow"], [data-theme="cream"], [data-theme="mint"])
  .us-sidebar-title {
  color: rgba(0, 0, 0, 0.35);
}
:is([data-theme="snow"], [data-theme="cream"], [data-theme="mint"])
  .us-nav-item {
  color: rgba(0, 0, 0, 0.55);
}
:is([data-theme="snow"], [data-theme="cream"], [data-theme="mint"])
  .us-nav-item
  .icon {
  opacity: 0.5;
}
:is([data-theme="snow"], [data-theme="cream"], [data-theme="mint"])
  .us-nav-item:hover {
  background: rgba(0, 0, 0, 0.05);
  color: rgba(0, 0, 0, 0.85);
}
:is([data-theme="snow"], [data-theme="cream"], [data-theme="mint"])
  .us-nav-item.active {
  background: rgba(99, 102, 241, 0.1);
  color: var(--primary, #6366f1);
}
:is([data-theme="snow"], [data-theme="cream"], [data-theme="mint"])
  .us-nav-item.active
  .icon {
  color: var(--primary, #6366f1);
}
:is([data-theme="snow"], [data-theme="cream"], [data-theme="mint"])
  .us-sidebar-footer {
  border-top-color: rgba(0, 0, 0, 0.06);
}
:is([data-theme="snow"], [data-theme="cream"], [data-theme="mint"])
  .us-sidebar-user {
  background: rgba(0, 0, 0, 0.03);
}
:is([data-theme="snow"], [data-theme="cream"], [data-theme="mint"])
  .us-sidebar-username {
  color: var(--text);
}
:is([data-theme="snow"], [data-theme="cream"], [data-theme="mint"]) .us-main {
  background: rgba(255, 255, 255, 0.99);
}
:is([data-theme="snow"], [data-theme="cream"], [data-theme="mint"])
  .us-main-header {
  border-bottom-color: rgba(0, 0, 0, 0.08);
}
:is([data-theme="snow"], [data-theme="cream"], [data-theme="mint"])
  .us-main-title {
  color: var(--text);
}
:is([data-theme="snow"], [data-theme="cream"], [data-theme="mint"])
  .us-close-btn {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.1);
  color: rgba(0, 0, 0, 0.5);
}
:is([data-theme="snow"], [data-theme="cream"], [data-theme="mint"])
  .us-close-btn:hover {
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.25);
  color: var(--danger, #ef4444);
}
:is([data-theme="snow"], [data-theme="cream"], [data-theme="mint"]) .us-group {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.06);
}
:is([data-theme="snow"], [data-theme="cream"], [data-theme="mint"])
  .us-group-title {
  color: rgba(0, 0, 0, 0.6);
}
:is([data-theme="snow"], [data-theme="cream"], [data-theme="mint"])
  .us-status-option {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.08);
  color: rgba(0, 0, 0, 0.65);
}
:is([data-theme="snow"], [data-theme="cream"], [data-theme="mint"])
  .us-status-option:hover {
  background: rgba(0, 0, 0, 0.06);
  color: #000;
}
:is([data-theme="snow"], [data-theme="cream"], [data-theme="mint"])
  .us-status-option.active {
  background: rgba(99, 102, 241, 0.1);
  border-color: rgba(99, 102, 241, 0.35);
  color: var(--primary, #6366f1);
}
:is([data-theme="snow"], [data-theme="cream"], [data-theme="mint"])
  .us-bio-wrap
  textarea {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.1);
  color: #000;
}
:is([data-theme="snow"], [data-theme="cream"], [data-theme="mint"])
  .us-profile-hero {
  background: linear-gradient(
    135deg,
    rgba(99, 102, 241, 0.06),
    rgba(139, 92, 246, 0.04)
  );
  border-color: rgba(99, 102, 241, 0.1);
}
:is([data-theme="snow"], [data-theme="cream"], [data-theme="mint"])
  .us-hero-name {
  color: var(--text);
}
:is([data-theme="snow"], [data-theme="cream"], [data-theme="mint"])
  .us-hero-bio {
  color: rgba(0, 0, 0, 0.55);
}
:is([data-theme="snow"], [data-theme="cream"], [data-theme="mint"])
  .us-stat-item {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.06);
}
:is([data-theme="snow"], [data-theme="cream"], [data-theme="mint"])
  .us-stat-value {
  color: var(--text);
}
:is([data-theme="snow"], [data-theme="cream"], [data-theme="mint"])
  .us-stat-label {
  color: rgba(0, 0, 0, 0.4);
}
:is([data-theme="snow"], [data-theme="cream"], [data-theme="mint"])
  .us-section-title {
  color: rgba(0, 0, 0, 0.5);
}
:is([data-theme="snow"], [data-theme="cream"], [data-theme="mint"])
  .us-profile-editor
  .profile-edit-group
  label {
  color: rgba(0, 0, 0, 0.6);
}
:is([data-theme="snow"], [data-theme="cream"], [data-theme="mint"])
  .us-profile-editor
  input[type="text"],
:is([data-theme="snow"], [data-theme="cream"], [data-theme="mint"])
  .us-profile-editor
  input[type="email"],
:is([data-theme="snow"], [data-theme="cream"], [data-theme="mint"])
  .us-profile-editor
  input[type="url"] {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.1);
  color: #000;
}

/* ═══════════════════════════════════════════════════════════════ */
/* ═══ Full-screen Settings Panel ═══ */
/* ═══════════════════════════════════════════════════════════════ */

.us-fullscreen {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.18s ease;
}
.us-fullscreen.hidden {
  display: none;
}

.us-layout {
  display: flex;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* ── Sidebar ───────────────────────────── */
.us-sidebar {
  width: 240px;
  flex-shrink: 0;
  background: rgba(8, 11, 22, 0.98);
  display: flex;
  flex-direction: column;
  border-right: 1px solid rgba(255, 255, 255, 0.06);
}
.us-sidebar-header {
  padding: 28px 20px 14px;
}
.us-sidebar-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.4px;
  color: rgba(255, 255, 255, 0.35);
}
.us-sidebar-nav {
  flex: 1;
  padding: 4px 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.us-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: rgba(255, 255, 255, 0.55);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition:
    background 0.15s,
    color 0.15s;
  text-align: left;
  width: 100%;
}
.us-nav-item .icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  opacity: 0.55;
}
.us-nav-item:hover {
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.9);
}
.us-nav-item:hover .icon {
  opacity: 0.8;
}
.us-nav-item.active {
  background: rgba(99, 102, 241, 0.13);
  color: #fff;
}
.us-nav-item.active .icon {
  opacity: 1;
  color: var(--primary, #6366f1);
}
.us-sidebar-footer {
  padding: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.us-sidebar-user {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
}
.us-sidebar-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  flex-shrink: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
  color: #fff;
}
.us-sidebar-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
.us-sidebar-user-info {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.us-sidebar-username {
  font-size: 13px;
  font-weight: 600;
  color: var(--text, #e8ecf4);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.us-sidebar-role {
  font-size: 10px;
}

/* ── Main Area ─────────────────────────── */
.us-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: rgba(13, 17, 33, 0.98);
  min-width: 0;
  overflow: hidden;
}
.us-main-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 32px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  flex-shrink: 0;
}
.us-main-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--text, #e8ecf4);
  margin: 0;
}
.us-close-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
  flex-shrink: 0;
}
.us-close-btn .icon {
  width: 18px;
  height: 18px;
}
.us-close-btn:hover {
  background: rgba(239, 68, 68, 0.15);
  border-color: rgba(239, 68, 68, 0.3);
  color: var(--danger, #ef4444);
}
.us-main-content {
  flex: 1;
  overflow-y: auto;
  padding: 24px 32px 32px;
  max-width: 680px;
}
.us-tab-content {
  display: none;
}
.us-tab-content.active {
  display: block;
}

/* Groups */
.us-group {
  margin-bottom: 20px;
  padding: 14px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.us-group:last-child {
  margin-bottom: 0;
}
.us-group-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px 0;
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.7);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.us-group-title .icon {
  width: 16px;
  height: 16px;
}

/* ── Keyboard Shortcuts Tab ── */
.us-shortcut-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 4px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  font-size: 13px;
  color: rgba(255, 255, 255, 0.8);
}
.us-shortcut-row:last-child {
  border-bottom: none;
}
.us-shortcut-keys {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
}
.us-shortcut-keys kbd {
  display: inline-block;
  padding: 2px 7px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 4px;
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  min-width: 20px;
  text-align: center;
}
[data-theme="light"] .us-shortcut-row {
  color: rgba(0, 0, 0, 0.75);
  border-bottom-color: rgba(0, 0, 0, 0.06);
}
[data-theme="light"] .us-shortcut-keys kbd {
  background: rgba(0, 0, 0, 0.06);
  border-color: rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.85);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

/* ── Profile Hero Card ── */
.us-profile-hero {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 20px;
  background: linear-gradient(
    135deg,
    rgba(99, 102, 241, 0.08),
    rgba(139, 92, 246, 0.06)
  );
  border: 1px solid rgba(99, 102, 241, 0.12);
  border-radius: 14px;
  margin-bottom: 16px;
}
.us-hero-avatar-img {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  flex-shrink: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 28px;
  color: #fff;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.25);
}
.us-hero-avatar-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
.us-hero-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.us-hero-name {
  font-size: 20px;
  font-weight: 700;
  color: var(--text, #e8ecf4);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.us-hero-bio {
  margin: 4px 0 0;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.4;
}

/* ── Profile Stats Bar ── */
.us-profile-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 20px;
}
.us-stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 8px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  gap: 4px;
}
.us-stat-value {
  font-size: 15px;
  font-weight: 700;
  color: var(--text, #e8ecf4);
}
.us-stat-label {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.4);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* ── Profile Sections ── */
.us-section {
  margin-bottom: 20px;
}
.us-section:last-child {
  margin-bottom: 0;
}
.us-section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px 0;
  font-size: 12px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  letter-spacing: 0.8px;
}
.us-section-title .icon {
  width: 16px;
  height: 16px;
}

.us-bio-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.us-bio-wrap textarea {
  width: 100%;
  padding: 10px 12px;
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  color: #fff;
  font-size: 13px;
  resize: vertical;
  transition: border-color 0.15s;
}
.us-bio-wrap textarea:focus {
  outline: none;
  border-color: var(--primary, #6366f1);
}

/* ── Status Grid ── */
.us-status-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 8px;
}
.us-status-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: rgba(0, 0, 0, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  color: rgba(255, 255, 255, 0.65);
  font-size: 13px;
  cursor: pointer;
  transition: all 0.15s;
}
.us-status-option:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.1);
}
.us-status-option.active {
  background: rgba(99, 102, 241, 0.15);
  border-color: rgba(99, 102, 241, 0.4);
  color: #fff;
}

/* ── Profile Editor ── */
.us-profile-editor {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Theme grid in unified settings */
.us-theme-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
}

/* Mic test inside unified settings */
.us-mic-test-card {
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
}

/* Profile header button */
.btn-profile-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px 4px 12px;
  border-radius: 24px;
  min-width: 0;
  background: rgba(99, 102, 241, 0.08);
  border: 1px solid rgba(99, 102, 241, 0.12);
  transition: all 0.2s;
  position: relative;
}
.btn-profile-header:hover {
  background: rgba(99, 102, 241, 0.15);
  border-color: rgba(99, 102, 241, 0.25);
}
.header-user-info {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 160px;
}
.header-username {
  font-size: 13px;
  font-weight: 600;
  color: var(--text, #e8ecf4);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.header-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
  color: #fff;
  overflow: hidden;
  flex-shrink: 0;
  transition: box-shadow 0.2s;
  background: none;
}
.header-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
.btn-profile-header:hover .header-avatar {
  box-shadow: 0 0 0 2px var(--primary);
}
.status-dot-mini {
  position: absolute;
  bottom: 2px;
  right: 6px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid rgba(8, 11, 20, 0.92);
  z-index: 2;
}
.btn-icon-only {
  padding: 6px 8px;
}
.btn-icon-only .icon {
  margin: 0;
}

/* Profile Dropdown */
.profile-dropdown-wrap {
  position: relative;
}
.profile-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 260px;
  background: rgba(15, 19, 37, 0.98);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(99, 102, 241, 0.15);
  border-radius: 12px;
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(255, 255, 255, 0.04);
  z-index: 999;
  padding: 6px;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-8px) scale(0.96);
  transition:
    opacity 0.2s ease,
    transform 0.2s ease,
    visibility 0.2s;
}
.profile-dropdown.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}
.profile-dd-user-section {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border-radius: 8px;
  background: rgba(99, 102, 241, 0.06);
}
.profile-dd-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 16px;
  color: #fff;
  overflow: hidden;
  flex-shrink: 0;
  background: none;
}
.profile-dd-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
.profile-dd-user-info {
  flex: 1;
  min-width: 0;
}
.profile-dd-name {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--text, #e8ecf4);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.profile-dd-role {
  display: block;
  font-size: 11px;
  color: var(--text-muted);
}
.profile-dd-divider {
  height: 1px;
  background: rgba(99, 102, 241, 0.1);
  margin: 4px 6px;
}
.profile-dd-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 12px;
  background: none;
  border: none;
  border-radius: 8px;
  color: var(--text-secondary, #c4b5fd);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition:
    background 0.15s,
    color 0.15s;
  text-align: left;
}
.profile-dd-item .icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  opacity: 0.7;
}
.profile-dd-item:hover {
  background: rgba(99, 102, 241, 0.1);
  color: var(--text, #e8ecf4);
}
.profile-dd-item:hover .icon {
  opacity: 1;
}
.profile-dd-danger {
  color: var(--danger, #ef4444);
}
.profile-dd-danger:hover {
  background: rgba(239, 68, 68, 0.1);
  color: var(--danger, #ef4444);
}
.profile-dd-management {
  color: var(--primary, #6366f1);
}
.profile-dd-management:hover {
  background: rgba(99, 102, 241, 0.1);
  color: var(--primary, #6366f1);
}
.profile-dd-status-group {
  padding: 4px 6px;
}
.profile-dd-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-muted);
  padding: 4px 6px 6px;
}
.profile-dd-status-option {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 7px 10px;
  background: none;
  border: none;
  border-radius: 6px;
  color: var(--text-secondary, #c4b5fd);
  font-size: 12.5px;
  cursor: pointer;
  transition: background 0.15s;
  text-align: left;
}
.profile-dd-status-option:hover {
  background: rgba(99, 102, 241, 0.08);
  color: var(--text, #e8ecf4);
}
.profile-dd-status-option .status-dot {
  width: 10px;
  height: 10px;
  flex-shrink: 0;
}

/* Profile dropdown mobile */
@media (max-width: 480px) {
  .profile-dropdown {
    width: calc(100vw - 24px);
    right: -8px;
  }
}
@media (max-width: 640px) {
  .btn-profile-header .header-user-info {
    display: none;
  }
  .btn-profile-header {
    padding: 4px;
    gap: 0;
  }
}

/* Responsive - Settings panel */
@media (max-width: 768px) {
  .us-layout {
    flex-direction: column;
  }
  .us-sidebar {
    width: 100%;
    flex-shrink: 0;
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  }
  .us-sidebar-header {
    display: none;
  }
  .us-sidebar-nav {
    flex-direction: row;
    padding: 6px 8px;
    gap: 4px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .us-sidebar-nav::-webkit-scrollbar {
    display: none;
  }
  .us-nav-item {
    padding: 8px 12px;
    font-size: 13px;
    white-space: nowrap;
    flex-shrink: 0;
  }
  .us-sidebar-footer {
    display: none;
  }
  .us-main-content {
    padding: 16px;
  }
  .us-main-header {
    padding: 16px 16px 12px;
  }
  .us-group {
    padding: 10px;
  }
  .us-status-grid {
    grid-template-columns: 1fr;
  }
  .us-profile-hero {
    flex-direction: column;
    text-align: center;
    gap: 12px;
  }
  .us-profile-stats {
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
  }
  .us-stat-item {
    padding: 8px 4px;
  }
  .us-stat-value {
    font-size: 13px;
  }
}

/* Light theme overrides for settings panel */
[data-theme="light"] .us-sidebar {
  background: rgba(245, 246, 250, 0.99);
  border-right-color: rgba(0, 0, 0, 0.08);
}
[data-theme="light"] .us-sidebar-title {
  color: rgba(0, 0, 0, 0.35);
}
[data-theme="light"] .us-nav-item {
  color: rgba(0, 0, 0, 0.55);
}
[data-theme="light"] .us-nav-item .icon {
  opacity: 0.5;
}
[data-theme="light"] .us-nav-item:hover {
  background: rgba(0, 0, 0, 0.05);
  color: rgba(0, 0, 0, 0.85);
}
[data-theme="light"] .us-nav-item.active {
  background: rgba(99, 102, 241, 0.1);
  color: var(--primary, #6366f1);
}
[data-theme="light"] .us-nav-item.active .icon {
  color: var(--primary, #6366f1);
}
[data-theme="light"] .us-sidebar-footer {
  border-top-color: rgba(0, 0, 0, 0.06);
}
[data-theme="light"] .us-sidebar-user {
  background: rgba(0, 0, 0, 0.03);
}
[data-theme="light"] .us-sidebar-username {
  color: var(--text);
}
[data-theme="light"] .us-main {
  background: rgba(255, 255, 255, 0.99);
}
[data-theme="light"] .us-main-header {
  border-bottom-color: rgba(0, 0, 0, 0.08);
}
[data-theme="light"] .us-main-title {
  color: var(--text);
}
[data-theme="light"] .us-close-btn {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.1);
  color: rgba(0, 0, 0, 0.5);
}
[data-theme="light"] .us-close-btn:hover {
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.25);
  color: var(--danger, #ef4444);
}
[data-theme="light"] .us-group {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.06);
}
[data-theme="light"] .us-group-title {
  color: rgba(0, 0, 0, 0.6);
}
[data-theme="light"] .us-status-option {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.08);
  color: rgba(0, 0, 0, 0.65);
}
[data-theme="light"] .us-status-option:hover {
  background: rgba(0, 0, 0, 0.06);
  color: #000;
}
[data-theme="light"] .us-status-option.active {
  background: rgba(99, 102, 241, 0.1);
  border-color: rgba(99, 102, 241, 0.35);
  color: var(--primary, #6366f1);
}
[data-theme="light"] .us-bio-wrap textarea {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.1);
  color: #000;
}
[data-theme="light"] .us-profile-hero {
  background: linear-gradient(
    135deg,
    rgba(99, 102, 241, 0.06),
    rgba(139, 92, 246, 0.04)
  );
  border-color: rgba(99, 102, 241, 0.1);
}
[data-theme="light"] .us-hero-name {
  color: var(--text);
}
[data-theme="light"] .us-hero-bio {
  color: rgba(0, 0, 0, 0.55);
}
[data-theme="light"] .us-stat-item {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.06);
}
[data-theme="light"] .us-stat-value {
  color: var(--text);
}
[data-theme="light"] .us-stat-label {
  color: rgba(0, 0, 0, 0.4);
}
[data-theme="light"] .us-section-title {
  color: rgba(0, 0, 0, 0.5);
}
[data-theme="light"] .us-profile-editor .profile-edit-group label {
  color: rgba(0, 0, 0, 0.6);
}
[data-theme="light"] .us-profile-editor input[type="text"],
[data-theme="light"] .us-profile-editor input[type="email"],
[data-theme="light"] .us-profile-editor input[type="url"] {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.1);
  color: #000;
}

/* ═══════════════════════════════════════════════════════════════
   NEW UI/UX FEATURES – CSS
   ═══════════════════════════════════════════════════════════════ */

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

/* ── Jump to Bottom Button ──────────────────────────────────── */
.jump-to-bottom {
  position: absolute;
  bottom: 80px;
  right: 24px;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
  transition:
    transform 0.2s,
    opacity 0.2s,
    box-shadow 0.2s;
  opacity: 1;
}
.jump-to-bottom:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}
.jump-to-bottom.hidden {
  display: none;
}
.jump-to-bottom svg {
  width: 20px;
  height: 20px;
}
.jump-to-bottom-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  border-radius: 9px;
  background: var(--danger);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  line-height: 1;
}
.jump-to-bottom-badge.hidden {
  display: none;
}

/* ── Skeleton Loading ───────────────────────────────────────── */
.message-skeleton {
  display: flex;
  gap: 12px;
  padding: 12px 16px;
  animation: skeleton-pulse 1.2s ease-in-out infinite;
}
.skeleton-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--bg-secondary, rgba(255, 255, 255, 0.06));
  flex-shrink: 0;
}
.skeleton-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.skeleton-line {
  height: 12px;
  border-radius: 6px;
  background: var(--bg-secondary, rgba(255, 255, 255, 0.06));
}
.skeleton-line.skeleton-name {
  width: 30%;
  height: 14px;
}
.skeleton-line.skeleton-text {
  width: 80%;
}
.skeleton-line.skeleton-text.short {
  width: 50%;
}
@keyframes skeleton-pulse {
  0%,
  100% {
    opacity: 0.4;
  }
  50% {
    opacity: 1;
  }
}

/* ── Drop Zone Overlay ──────────────────────────────────────── */
.drop-zone-overlay {
  position: absolute;
  inset: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: rgba(88, 101, 242, 0.85);
  backdrop-filter: blur(4px);
  border: 3px dashed rgba(255, 255, 255, 0.5);
  border-radius: var(--radius-lg, 16px);
  transition: opacity 0.2s;
}
.drop-zone-overlay.hidden {
  display: none;
}
.drop-zone-overlay svg {
  width: 48px;
  height: 48px;
  stroke: #fff;
  opacity: 0.9;
}
.drop-zone-overlay span {
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  opacity: 0.95;
}

/* ── Custom Confirm Dialog ──────────────────────────────────── */
.custom-confirm-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  animation: fadeIn 0.15s ease;
}
.custom-confirm-overlay.hidden {
  display: none;
}
.custom-confirm-card {
  background: var(--bg-secondary, #2b2d31);
  border-radius: var(--radius-lg, 16px);
  padding: 28px 32px 20px;
  min-width: 320px;
  max-width: 440px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.4);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.custom-confirm-icon {
  font-size: 32px;
  line-height: 1;
}
.custom-confirm-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  text-align: center;
}
.custom-confirm-message {
  font-size: 14px;
  color: var(--text-muted, #b5bac1);
  text-align: center;
  line-height: 1.5;
  white-space: pre-wrap;
}
.custom-confirm-actions {
  display: flex;
  gap: 12px;
  margin-top: 8px;
  width: 100%;
  justify-content: flex-end;
}
.custom-confirm-actions button {
  padding: 8px 20px;
  border-radius: 8px;
  border: none;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition:
    background 0.15s,
    transform 0.1s;
}
.custom-confirm-actions button:active {
  transform: scale(0.97);
}
.confirm-cancel-btn {
  background: transparent;
  color: var(--text-muted, #b5bac1);
}
.confirm-cancel-btn:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
}
.confirm-ok-btn {
  background: var(--accent);
  color: #fff;
}
.confirm-ok-btn:hover {
  filter: brightness(1.1);
}
.confirm-ok-btn.danger {
  background: var(--danger, #ed4245);
}
.confirm-ok-btn.danger:hover {
  background: #c73a3d;
}

/* ── Context Menu ───────────────────────────────────────────── */
.context-menu {
  position: fixed;
  z-index: 9999;
  min-width: 180px;
  max-width: 260px;
  background: var(--bg-secondary, #2b2d31);
  border-radius: 8px;
  padding: 4px 0;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.06);
  animation: ctxMenuIn 0.12s ease;
}
.context-menu.hidden {
  display: none;
}
@keyframes ctxMenuIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
.ctx-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  width: 100%;
  border: none;
  background: none;
  color: var(--text);
  font-size: 13px;
  cursor: pointer;
  transition: background 0.1s;
}
.ctx-item:hover {
  background: var(--accent);
  color: #fff;
}
.ctx-item .ctx-icon {
  font-size: 16px;
  width: 20px;
  text-align: center;
  flex-shrink: 0;
}
.ctx-item .ctx-shortcut {
  margin-left: auto;
  font-size: 11px;
  opacity: 0.5;
}
.ctx-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.06);
  margin: 4px 8px;
}

/* ── Textarea auto-resize style ─────────────────────────────── */
#messageInput,
#dmInput {
  resize: none;
  min-height: 40px;
  max-height: 160px;
  line-height: 1.4;
  overflow-y: hidden;
  transition: height 0.1s ease;
  font-family: inherit;
  font-size: inherit;
}

/* ── Collapsible Sidebar Sections ───────────────────────────── */
.sidebar-section-header {
  display: flex;
  align-items: center;
  gap: 6px;
  user-select: none;
  cursor: pointer;
  transition: opacity 0.15s;
}
.sidebar-section-header:hover {
  opacity: 0.8;
}
.collapse-arrow {
  width: 16px;
  height: 16px;
  margin-left: auto;
  transition: transform 0.2s ease;
  flex-shrink: 0;
  opacity: 0.5;
}
.sidebar-section.collapsed .collapse-arrow {
  transform: rotate(-90deg);
}
.sidebar-section.collapsed .channel-list {
  max-height: 0 !important;
  overflow: hidden;
  transition: max-height 0.25s ease;
}
.sidebar-section .channel-list {
  transition: max-height 0.25s ease;
}

/* ── Mobile Bottom Nav ──────────────────────────────────────── */
.mobile-bottom-nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: var(--bg-secondary, #1e1f22);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding: 4px 0;
  padding-bottom: env(safe-area-inset-bottom, 0);
}
@media (max-width: 768px) {
  .mobile-bottom-nav {
    display: flex;
    justify-content: space-around;
    align-items: center;
  }
  .app-grid {
    padding-bottom: 64px;
  }
  .mobile-hidden {
    display: none !important;
  }
}
.mobile-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px 12px;
  border: none;
  background: none;
  color: var(--text-muted, #b5bac1);
  font-size: 10px;
  cursor: pointer;
  transition: color 0.15s;
  position: relative;
}
.mobile-nav-item .icon {
  width: 22px;
  height: 22px;
}
.mobile-nav-item.active {
  color: var(--accent);
}
.mobile-nav-item:hover {
  color: var(--text);
}
.mobile-nav-badge {
  position: absolute;
  top: 0;
  right: 2px;
  min-width: 16px;
  height: 16px;
  border-radius: 8px;
  background: var(--danger, #ed4245);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
}
.mobile-nav-badge.hidden {
  display: none;
}

/* ── Markdown Preview ───────────────────────────────────────── */
.markdown-preview {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  background: var(--bg-secondary, #2b2d31);
  border-radius: var(--radius-lg, 16px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  padding: 16px;
  min-width: 300px;
  max-width: 500px;
  max-height: 200px;
  overflow-y: auto;
}
.markdown-preview.hidden {
  display: none;
}
.markdown-preview-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 600;
  text-transform: uppercase;
}
.markdown-preview-close {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 16px;
}
.markdown-preview-content {
  color: var(--text);
  font-size: 14px;
  line-height: 1.6;
}
.markdown-preview-content code {
  background: rgba(255, 255, 255, 0.06);
  padding: 2px 6px;
  border-radius: 4px;
  font-family: "Fira Code", monospace;
  font-size: 13px;
}

/* ── Improved message hover actions ─────────────────────────── */
.message {
  transition: background 0.15s ease;
}
.message:hover {
  background: rgba(255, 255, 255, 0.02);
}
.msg-actions {
  transition:
    opacity 0.15s ease,
    transform 0.15s ease;
  transform: translateY(2px);
}
.message:hover .msg-actions {
  opacity: 1;
  transform: translateY(0);
}

/* ── Color contrast fix for muted text ──────────────────────── */
[data-theme="midnight"] {
  --text-muted: #a0a4ab;
}

/* ── Touch target sizes for mobile ──────────────────────────── */
@media (max-width: 768px) {
  .msg-action-btn,
  .emoji-action-btn,
  .channel-list button,
  .dm-conv-list button {
    min-height: 44px;
    min-width: 44px;
  }
  .sidebar-section-header {
    min-height: 44px;
  }
}

/* ── Light theme overrides for new components ───────────────── */
[data-theme="light"] .custom-confirm-card,
:is([data-theme="snow"], [data-theme="cream"], [data-theme="mint"])
  .custom-confirm-card {
  background: #fff;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.12);
}
[data-theme="light"] .custom-confirm-message,
:is([data-theme="snow"], [data-theme="cream"], [data-theme="mint"])
  .custom-confirm-message {
  color: rgba(0, 0, 0, 0.55);
}
[data-theme="light"] .confirm-cancel-btn,
:is([data-theme="snow"], [data-theme="cream"], [data-theme="mint"])
  .confirm-cancel-btn {
  color: rgba(0, 0, 0, 0.5);
}
[data-theme="light"] .confirm-cancel-btn:hover,
:is([data-theme="snow"], [data-theme="cream"], [data-theme="mint"])
  .confirm-cancel-btn:hover {
  background: rgba(0, 0, 0, 0.05);
  color: #000;
}
[data-theme="light"] .context-menu,
:is([data-theme="snow"], [data-theme="cream"], [data-theme="mint"])
  .context-menu {
  background: #fff;
  border-color: rgba(0, 0, 0, 0.08);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}
[data-theme="light"] .ctx-item,
:is([data-theme="snow"], [data-theme="cream"], [data-theme="mint"]) .ctx-item {
  color: #333;
}
[data-theme="light"] .ctx-divider,
:is([data-theme="snow"], [data-theme="cream"], [data-theme="mint"])
  .ctx-divider {
  background: rgba(0, 0, 0, 0.06);
}
[data-theme="light"] .message:hover,
:is([data-theme="snow"], [data-theme="cream"], [data-theme="mint"])
  .message:hover {
  background: rgba(0, 0, 0, 0.02);
}
[data-theme="light"] .mobile-bottom-nav,
:is([data-theme="snow"], [data-theme="cream"], [data-theme="mint"])
  .mobile-bottom-nav {
  background: #fff;
  border-top-color: rgba(0, 0, 0, 0.08);
}
[data-theme="light"] .skeleton-avatar,
[data-theme="light"] .skeleton-line,
:is([data-theme="snow"], [data-theme="cream"], [data-theme="mint"])
  .skeleton-avatar,
:is([data-theme="snow"], [data-theme="cream"], [data-theme="mint"])
  .skeleton-line {
  background: rgba(0, 0, 0, 0.06);
}
[data-theme="light"] .jump-to-bottom,
:is([data-theme="snow"], [data-theme="cream"], [data-theme="mint"])
  .jump-to-bottom {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}
[data-theme="light"] .markdown-preview,
:is([data-theme="snow"], [data-theme="cream"], [data-theme="mint"])
  .markdown-preview {
  background: #fff;
  border-color: rgba(0, 0, 0, 0.08);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}
[data-theme="light"] .markdown-preview-content code,
:is([data-theme="snow"], [data-theme="cream"], [data-theme="mint"])
  .markdown-preview-content
  code {
  background: rgba(0, 0, 0, 0.04);
}

/* ── Notification Permission Banner ────────────────────────────── */
.notification-permission-banner {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10000;
  animation: npbSlideDown 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.npb-content {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  border-radius: 12px;
  background: var(--bg-elevated, #161d35);
  border: 1px solid rgba(99, 102, 241, 0.3);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.3),
    0 0 0 1px rgba(99, 102, 241, 0.1);
  backdrop-filter: blur(16px);
  font-size: 13px;
  color: var(--text, #e8ecf4);
}
.npb-icon {
  font-size: 20px;
}
.npb-text {
  flex: 1;
  white-space: nowrap;
}
.npb-allow {
  padding: 6px 14px !important;
  font-size: 12px !important;
}
.npb-dismiss {
  padding: 6px 10px !important;
  font-size: 12px !important;
  background: transparent !important;
  color: var(--text-muted) !important;
  border: 1px solid var(--border-light) !important;
}
.npb-dismiss:hover {
  color: var(--text) !important;
  background: rgba(255, 255, 255, 0.06) !important;
}
@keyframes npbSlideDown {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}
@media (max-width: 640px) {
  .notification-permission-banner {
    top: 8px;
    left: 8px;
    right: 8px;
    transform: none;
  }
  .npb-content {
    flex-wrap: wrap;
    gap: 8px;
  }
  .npb-text {
    white-space: normal;
  }
  @keyframes npbSlideDown {
    from {
      opacity: 0;
      transform: translateY(-20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
}

/* ═══════════════════════════════════════════════════════════════
   BATCH 3 — New Feature Styles
   ═══════════════════════════════════════════════════════════════ */

/* ── Role Mentions ──────────────────────────────────────────── */
.mention.mention-role {
  color: #fbbf24;
  background: rgba(251, 191, 36, 0.15);
  border: 1px solid rgba(251, 191, 36, 0.3);
  cursor: default;
}

/* ── Poll System ──────────────────────────────────────────────── */
.poll-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 2100;
  background: rgba(0, 0, 0, 0.55);
  align-items: center;
  justify-content: center;
}
.poll-modal.open {
  display: flex;
}
.poll-modal-content {
  background: var(--bg-secondary, #1e1b2e);
  border: 1px solid var(--border, rgba(255, 255, 255, 0.1));
  border-radius: 16px;
  padding: 24px;
  width: 420px;
  max-width: 90vw;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.5);
}
.poll-modal-content h3 {
  margin: 0 0 16px;
  font-size: 1.1rem;
  color: var(--text, #e2e0f0);
}
.poll-modal-content label {
  display: block;
  margin-bottom: 4px;
  font-size: 0.8rem;
  color: var(--text-muted, rgba(196, 181, 253, 0.6));
}
.poll-modal-content input[type="text"] {
  width: 100%;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid var(--border, rgba(255, 255, 255, 0.1));
  background: var(--bg-tertiary, rgba(255, 255, 255, 0.04));
  color: var(--text, #e2e0f0);
  font-size: 0.9rem;
  margin-bottom: 8px;
  outline: none;
  box-sizing: border-box;
}
.poll-modal-content input[type="text"]:focus {
  border-color: var(--primary, #7c3aed);
}
.poll-options-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 8px 0 12px;
  max-height: 200px;
  overflow-y: auto;
}
.poll-option-input {
  display: flex;
  align-items: center;
  gap: 6px;
}
.poll-option-input input {
  flex: 1;
}
.poll-option-remove {
  background: none;
  border: none;
  color: #f87171;
  cursor: pointer;
  font-size: 1.1rem;
  padding: 4px;
  line-height: 1;
}
.poll-option-remove:hover {
  color: #ef4444;
}
.poll-add-option {
  background: rgba(255, 255, 255, 0.05);
  border: 1px dashed rgba(255, 255, 255, 0.15);
  color: var(--text-muted, rgba(196, 181, 253, 0.6));
  padding: 6px 12px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.82rem;
  transition: all 0.2s;
  width: 100%;
}
.poll-add-option:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text, #e2e0f0);
}
.poll-checkboxes {
  display: flex;
  gap: 16px;
  margin: 12px 0 16px;
}
.poll-checkboxes label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  color: var(--text-muted, rgba(196, 181, 253, 0.6));
  cursor: pointer;
}
.poll-modal-buttons {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.poll-modal-buttons button {
  padding: 8px 18px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 500;
}
.poll-cancel-btn {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-muted, rgba(196, 181, 253, 0.6));
}
.poll-cancel-btn:hover {
  background: rgba(255, 255, 255, 0.1);
}
.poll-submit-btn {
  background: var(--primary, #7c3aed);
  color: #fff;
}
.poll-submit-btn:hover {
  background: var(--primary-hover, #6d28d9);
}

/* Poll in message */
.msg-poll {
  background: var(--bg-tertiary, rgba(255, 255, 255, 0.03));
  border: 1px solid var(--border, rgba(255, 255, 255, 0.08));
  border-radius: 12px;
  padding: 14px 16px;
  margin-top: 8px;
  max-width: 420px;
}
.poll-question {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--text, #e2e0f0);
  margin-bottom: 4px;
}
.poll-info {
  font-size: 0.75rem;
  color: var(--text-muted, rgba(196, 181, 253, 0.4));
  margin-bottom: 10px;
}
.poll-option {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
  padding: 6px 10px;
  border-radius: 8px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  transition: all 0.2s;
}
.poll-option:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.1);
}
.poll-option.voted {
  border-color: var(--primary, rgba(124, 58, 237, 0.4));
  background: rgba(124, 58, 237, 0.08);
}
.poll-option-bar {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  background: rgba(124, 58, 237, 0.15);
  border-radius: 8px;
  transition: width 0.4s ease;
  pointer-events: none;
}
.poll-option.voted .poll-option-bar {
  background: rgba(124, 58, 237, 0.25);
}
.poll-option-text {
  flex: 1;
  font-size: 0.85rem;
  color: var(--text, #e2e0f0);
  z-index: 1;
  position: relative;
}
.poll-option-count {
  font-size: 0.75rem;
  color: var(--text-muted, rgba(196, 181, 253, 0.5));
  z-index: 1;
  position: relative;
  min-width: 30px;
  text-align: right;
}
.poll-total {
  font-size: 0.75rem;
  color: var(--text-muted, rgba(196, 181, 253, 0.4));
  margin-top: 8px;
  text-align: right;
}

/* ── Bookmarks Panel ─────────────────────────────────────────── */
.bookmarks-panel {
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 340px;
  max-width: 90vw;
  background: var(--bg-secondary, #1e1b2e);
  border-left: 1px solid var(--border, rgba(255, 255, 255, 0.08));
  z-index: 800;
  flex-direction: column;
  box-shadow: -4px 0 24px rgba(0, 0, 0, 0.3);
}
.bookmarks-panel.open {
  display: flex;
}
.bookmarks-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border, rgba(255, 255, 255, 0.08));
}
.bookmarks-header h3 {
  margin: 0;
  font-size: 1rem;
  color: var(--text, #e2e0f0);
}
.bookmarks-close {
  background: none;
  border: none;
  color: var(--text-muted, rgba(196, 181, 253, 0.5));
  cursor: pointer;
  font-size: 1.3rem;
  padding: 4px;
  line-height: 1;
}
.bookmarks-close:hover {
  color: var(--text, #e2e0f0);
}
.bookmarks-list {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
}
.bookmarks-list::-webkit-scrollbar {
  width: 6px;
}
.bookmarks-list::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
}
.bookmark-item {
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 10px;
  margin-bottom: 6px;
  cursor: pointer;
  transition: all 0.2s;
}
.bookmark-item:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.1);
}
.bookmark-item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}
.bookmark-item-author {
  font-weight: 600;
  font-size: 0.82rem;
  color: var(--secondary, #06b6d4);
}
.bookmark-item-channel {
  font-size: 0.72rem;
  color: var(--text-muted, rgba(196, 181, 253, 0.4));
  background: rgba(255, 255, 255, 0.05);
  padding: 2px 6px;
  border-radius: 4px;
}
.bookmark-item-content {
  font-size: 0.82rem;
  color: var(--text, rgba(226, 224, 240, 0.8));
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bookmark-item-time {
  font-size: 0.7rem;
  color: var(--text-muted, rgba(196, 181, 253, 0.35));
  margin-top: 3px;
}
.bookmark-remove {
  background: none;
  border: none;
  font-size: 0.7rem;
  color: #f87171;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
  margin-top: 4px;
  display: inline-block;
}
.bookmark-remove:hover {
  background: rgba(248, 113, 113, 0.1);
}
.bookmarks-empty {
  text-align: center;
  padding: 40px 20px;
  color: var(--text-muted, rgba(196, 181, 253, 0.4));
  font-size: 0.85rem;
}
/* Bookmark button in message actions */
.msg-action-btn.bookmark-action {
  color: var(--text-muted, rgba(196, 181, 253, 0.4));
}
.msg-action-btn.bookmark-action.bookmarked {
  color: #fbbf24;
}
.msg-action-btn.bookmark-action:hover {
  color: #fbbf24;
}
.bookmarks-toggle-btn {
  background: none;
  border: none;
  color: var(--text-muted, rgba(196, 181, 253, 0.5));
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: all 0.2s;
}
.bookmarks-toggle-btn:hover {
  color: var(--text, #e2e0f0);
  background: rgba(255, 255, 255, 0.06);
}

/* ── Channel Tools Modal ─────────────────────────────────────── */
.channel-tools-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(6px);
  animation: ctFadeIn 0.2s ease;
}
.channel-tools-overlay.hidden {
  display: none;
}
@keyframes ctFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.channel-tools-modal {
  width: 640px;
  max-width: 94vw;
  max-height: 80vh;
  background: var(--bg-secondary, #1a1730);
  border: 1px solid rgba(99, 102, 241, 0.18);
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(99, 102, 241, 0.08);
  animation: ctSlideIn 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes ctSlideIn {
  from {
    transform: translateY(24px) scale(0.96);
    opacity: 0;
  }
  to {
    transform: none;
    opacity: 1;
  }
}

.channel-tools-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px 0 0;
  border-bottom: 1px solid rgba(99, 102, 241, 0.12);
  background: rgba(99, 102, 241, 0.04);
  flex-shrink: 0;
}
.channel-tools-tabs {
  display: flex;
  gap: 0;
  flex: 1;
  overflow-x: auto;
}
.channel-tools-tab {
  padding: 12px 18px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-muted, rgba(196, 181, 253, 0.5));
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}
.channel-tools-tab:hover {
  color: var(--text, #e2e0f0);
  background: rgba(99, 102, 241, 0.06);
}
.channel-tools-tab.active {
  color: var(--primary, #6366f1);
  border-bottom-color: var(--primary, #6366f1);
}
.channel-tools-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 0;
}
.ct-tab-content {
  display: none;
}
.ct-tab-content.active {
  display: block;
}

.channel-tools-body .channel-info-body {
  padding: 0;
}
.channel-tools-body .pinned-list {
  padding: 8px;
}
.channel-tools-body .bookmarks-list {
  padding: 8px;
}
.channel-tools-body .pinned-item {
  cursor: pointer;
}
.channel-tools-body .bookmark-item {
  cursor: default;
}
.channel-tools-body .bookmark-actions {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}
.channel-tools-body .bookmark-header {
  margin-bottom: 4px;
  font-size: 13px;
}
.channel-tools-body .bookmark-header strong {
  color: var(--secondary, #06b6d4);
}
.channel-tools-body .bookmark-channel {
  font-size: 11px;
  color: var(--text-muted, rgba(196, 181, 253, 0.4));
  margin-left: 6px;
}
.channel-tools-body .bookmark-content {
  font-size: 13px;
  color: var(--text, rgba(226, 224, 240, 0.8));
  line-height: 1.5;
}

/* ── Channel Files List ── */
.channel-files-list {
  padding: 8px;
  overflow-y: auto;
  max-height: 65vh;
}
.channel-file-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  transition: background 0.15s;
}
.channel-file-item:hover {
  background: rgba(255, 255, 255, 0.03);
  border-radius: 6px;
}
.channel-file-icon {
  font-size: 22px;
  flex-shrink: 0;
  width: 32px;
  text-align: center;
}
.channel-file-info {
  flex: 1;
  min-width: 0;
}
.channel-file-name {
  display: block;
  color: var(--primary, #6366f1);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.channel-file-name:hover {
  text-decoration: underline;
}
.channel-file-meta {
  display: flex;
  gap: 8px;
  font-size: 11px;
  color: var(--text-muted, rgba(196, 181, 253, 0.4));
  margin-top: 2px;
}
.channel-file-thumb {
  width: 48px;
  height: 48px;
  border-radius: 6px;
  object-fit: cover;
  flex-shrink: 0;
  cursor: pointer;
}

/* Light theme overrides */
[data-theme="light"] .channel-tools-modal {
  background: var(--bg-secondary, #f3f2f8);
  border-color: rgba(99, 102, 241, 0.15);
}
[data-theme="light"] .channel-tools-header {
  background: rgba(99, 102, 241, 0.06);
  border-bottom-color: rgba(99, 102, 241, 0.1);
}
[data-theme="light"] .channel-tools-tab.active {
  color: var(--primary, #4f46e5);
  border-bottom-color: var(--primary, #4f46e5);
}

@media (max-width: 600px) {
  .channel-tools-modal {
    max-width: 100vw;
    max-height: 90vh;
    border-radius: 12px 12px 0 0;
  }
  .channel-tools-tab {
    padding: 10px 12px;
    font-size: 12px;
  }
}

/* ── Soundboard ──────────────────────────────────────────────── */
.soundboard-panel {
  display: none;
  background: var(--bg-secondary, #1e1b2e);
  border: 1px solid var(--border, rgba(255, 255, 255, 0.08));
  border-radius: 12px;
  padding: 10px;
  margin-top: 8px;
}
.soundboard-panel.open,
.soundboard-panel:not(.hidden) {
  display: block;
}
.soundboard-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}
.soundboard-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 8px 4px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
  color: var(--text, #e2e0f0);
}
.soundboard-btn:hover {
  background: rgba(124, 58, 237, 0.15);
  border-color: rgba(124, 58, 237, 0.3);
  transform: scale(1.05);
}
.soundboard-btn:active {
  transform: scale(0.95);
}
.sb-emoji {
  font-size: 1.3rem;
  margin-bottom: 2px;
}
.sb-name {
  font-size: 0.65rem;
  color: var(--text-muted, rgba(196, 181, 253, 0.5));
  text-align: center;
  line-height: 1.2;
}
.soundboard-toggle-btn {
  display: none;
}

/* ── Screen Share ─────────────────────────────────────────────── */
.screen-share-container {
  display: none;
  background: #0a0814;
  border: 1px solid var(--border, rgba(99, 102, 241, 0.15));
  border-radius: 16px;
  overflow: hidden;
  margin: 8px 8px 0;
  position: relative;
  box-shadow:
    0 8px 40px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(99, 102, 241, 0.08);
}
.screen-share-container.active {
  display: flex;
  flex-direction: column;
}
.screen-share-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  background: linear-gradient(
    135deg,
    rgba(99, 102, 241, 0.1),
    rgba(139, 92, 246, 0.08)
  );
  border-bottom: 1px solid rgba(99, 102, 241, 0.12);
}
.screen-share-label {
  font-size: 0.85rem;
  color: var(--text, #e8ecf4);
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
}
.screen-share-label::before {
  content: "🖥️";
  font-size: 1.1rem;
}
.screen-share-stop {
  background: #ef4444;
  color: #fff;
  border: none;
  padding: 6px 16px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 600;
  transition: background 0.15s;
}
.screen-share-stop:hover {
  background: #dc2626;
}
.screen-share-video {
  width: 100%;
  min-height: 240px;
  max-height: calc(100vh - 320px);
  object-fit: contain;
  background: #000;
  display: block;
  flex: 1;
}
.screen-share-btn {
  display: none;
}
/* Fullscreen toggle for screen share */
.screen-share-fullscreen-btn {
  background: rgba(255, 255, 255, 0.1);
  border: none;
  color: #fff;
  padding: 4px 8px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: background 0.15s;
}
.screen-share-fullscreen-btn:hover {
  background: rgba(255, 255, 255, 0.2);
}

/* ── Code Share Modal Responsive ── */
@media (max-width: 600px) {
  .code-share-modal-card {
    width: 98%;
    padding: 1rem;
  }
  .code-share-textarea {
    min-height: 120px;
  }
  .code-share-preview-pre {
    max-height: 150px;
  }
}

/* ── Code Syntax Highlighting ─────────────────────────────────── */
.token-keyword {
  color: #c792ea;
  font-weight: 500;
}
.token-string {
  color: #c3e88d;
}
.token-comment {
  color: #546e7a;
  font-style: italic;
}
.token-number {
  color: #f78c6c;
}

[data-theme="light"] .token-keyword {
  color: #7c3aed;
}
[data-theme="light"] .token-string {
  color: #16a34a;
}
[data-theme="light"] .token-comment {
  color: #9ca3af;
}
[data-theme="light"] .token-number {
  color: #ea580c;
}

/* ── Audit Log Filter ─────────────────────────────────────────── */
.audit-filter-bar {
  display: flex;
  align-items: center;
  padding: 8px 0 12px;
  margin-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.audit-filter-select {
  padding: 5px 10px;
  background: var(--bg-tertiary, rgba(255, 255, 255, 0.04));
  color: var(--text, #e2e0f0);
  border: 1px solid var(--border, rgba(255, 255, 255, 0.1));
  border-radius: 6px;
  font-size: 0.82rem;
  outline: none;
  cursor: pointer;
}
.audit-filter-select:focus {
  border-color: var(--primary, #7c3aed);
}

/* ── Toolbar Buttons (GIF, Poll, Code Snippet) ────────────────── */
.msg-toolbar-btn {
  background: none;
  border: none;
  color: var(--text-muted, rgba(196, 181, 253, 0.5));
  cursor: pointer;
  padding: 6px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}
.msg-toolbar-btn:hover {
  color: var(--text, #e2e0f0);
  background: rgba(255, 255, 255, 0.06);
}
.msg-toolbar-btn svg {
  width: 20px;
  height: 20px;
}

/* ── Responsive adjustments for new features ──────────────────── */
@media (max-width: 768px) {
  .poll-modal-content {
    width: 90vw;
    padding: 18px;
  }
  .bookmarks-panel {
    width: 100%;
  }
  .soundboard-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .msg-gif-preview {
    max-width: 200px;
  }
  .msg-poll {
    max-width: 100%;
  }
}

/* ── Custom Emoji Styles ──────────────────────────────────── */
.emoji-picker-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 8px;
}
.emoji-tab-btn {
  flex: 1;
  padding: 6px 8px;
  border: none;
  border-radius: 6px;
  background: var(--bg-secondary, rgba(255,255,255,0.06));
  color: var(--text-secondary, #ccc);
  cursor: pointer;
  font-size: 12px;
  transition: background 0.15s, color 0.15s;
}
.emoji-tab-btn:hover {
  background: var(--bg-tertiary, rgba(255,255,255,0.1));
}
.emoji-tab-btn.active {
  background: var(--accent, #7c3aed);
  color: #fff;
}

.custom-emoji-btn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 6px;
  border: none;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
  transition: background 0.15s;
  min-width: 56px;
}
.custom-emoji-btn:hover {
  background: var(--bg-tertiary, rgba(255,255,255,0.1));
}
.custom-emoji-preview {
  pointer-events: none;
}
.custom-emoji-name {
  font-size: 9px;
  color: var(--text-muted, #888);
  margin-top: 2px;
  max-width: 56px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Inline Lottie emoji in messages */
.inline-lottie-emoji {
  display: inline-block;
  width: 24px;
  height: 24px;
  vertical-align: middle;
  margin: 0 2px;
}

/* Admin emoji management */
.admin-emoji-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.admin-emoji-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  background: var(--bg-secondary, rgba(255,255,255,0.04));
  border-radius: 8px;
}
.admin-emoji-preview {
  flex-shrink: 0;
}
.admin-emoji-info {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
}
.admin-emoji-row .btn-sm {
  padding: 4px 10px;
  font-size: 12px;
  flex-shrink: 0;
}