/* ═══════════════════════════════════════════════════════════════════
   Voxi – 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 {
  --app-font-family:
    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --app-font-size: 14px;
  --bg: #0c1525;
  --bg-card: #111d30;
  --bg-card-hover: #162540;
  --bg-input: #0a1628;
  --bg-elevated: #1a2a42;
  --border: #1e2744;
  --border-light: #2a3456;
  --border-focus: #5d87bf;
  --text: #e8ecf4;
  --text-secondary: #b0b8cc;
  --text-muted: #6b7599;
  --primary: #5d87bf;
  --primary-hover: #7ba3d4;
  --primary-glow: rgba(93, 135, 191, 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, #5d87bf, #536b8a, #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: var(--app-font-family);
  font-size: var(--app-font-size);
  line-height: 1.55;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.hidden {
  display: none !important;
}

/* ── Universal Exit Animations ─────────────────────────────────── */
/* .hiding: applied before .hidden for smooth close transitions */
.hiding {
  pointer-events: none !important;
}

/* Overlay/modal fade out */
.modal-overlay.hiding,
.us-fullscreen.hiding,
.image-lightbox.hiding,
.custom-confirm-overlay.hiding,
.channel-tools-overlay.hiding,
.drop-zone-overlay.hiding {
  animation: overlayFadeOut 0.2s ease forwards;
}
@keyframes overlayFadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

/* Slide-down cards */
.modal-card.hiding,
.modal-content.hiding,
.channel-tools-modal.hiding,
.custom-confirm-card.hiding {
  animation: modalSlideOut 0.2s ease forwards;
}
@keyframes modalSlideOut {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  to {
    opacity: 0;
    transform: translateY(12px) scale(0.97);
  }
}

/* Popover / context menu scale-out */
.user-popover.hiding,
.context-menu.hiding,
.emoji-picker.hiding,
.status-dropdown.hiding {
  animation: popoverOut 0.15s ease forwards;
}
@keyframes popoverOut {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(0.96) translateY(-4px);
  }
}

/* VC settings drawer slide-down */
.vc-settings-drawer.hiding {
  animation: drawerSlideOut 0.2s ease forwards;
}
@keyframes drawerSlideOut {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(12px);
  }
}

/* Soundboard panel */
.soundboard-panel.hiding {
  animation: overlayFadeOut 0.15s ease forwards;
}

/* Call dock */
.call-dock.hiding {
  animation: modalSlideOut 0.2s ease forwards;
}

/* Jump-to-bottom smooth */
.jump-to-bottom.hiding {
  animation: overlayFadeOut 0.15s ease forwards;
}

/* Reply preview */
.reply-preview.hiding {
  animation: overlayFadeOut 0.12s ease forwards;
}

/* Markdown preview */
.markdown-preview.hiding {
  animation: overlayFadeOut 0.12s ease forwards;
}

/* ── Global Smooth Transitions ─────────────────────────────────── */
/* Icon transitions: only color & opacity (lightweight) */
.icon {
  transition:
    opacity 0.2s ease,
    color 0.2s ease;
}

/* Interactive elements: scoped transitions (avoid transition: all) */
.btn,
.channel-btn {
  transition:
    background var(--transition),
    border-color var(--transition),
    color var(--transition),
    box-shadow var(--transition),
    opacity var(--transition),
    transform var(--transition-fast);
}

/* 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 */
.vc-settings-drawer,
.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(80px);
  opacity: 0.35;
  animation: aurora 30s ease-in-out infinite alternate;
  will-change: transform;
  contain: strict;
}

.bg-aurora::before {
  width: 700px;
  height: 500px;
  top: -10%;
  left: -5%;
  background: radial-gradient(
    ellipse,
    rgba(93, 135, 191, 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.82);
    backdrop-filter: blur(20px) saturate(1.4);
    -webkit-backdrop-filter: blur(20px) saturate(1.4);
  }
}

/* ── 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(93, 135, 191, 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;
}

.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(93, 135, 191, 0.1);
  background-color: var(--bg-card);
}

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

input::placeholder {
  color: var(--text-muted);
}

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: var(--text);
  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), var(--primary-hover));
  border-color: transparent;
  color: #fff;
  box-shadow: 0 2px 8px var(--primary-glow);
}

.btn-primary:hover {
  background: linear-gradient(135deg, var(--primary-hover), var(--primary));
  box-shadow: 0 4px 16px var(--primary-glow);
}

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

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

.btn-danger:hover {
  background: linear-gradient(135deg, var(--danger-hover), var(--danger));
  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;
}

.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: var(--accent-gradient);
  color: #fff;
  box-shadow: 0 2px 8px var(--primary-glow);
}

@media (max-width: 980px) {
}

/* ── Download App Button ───────────────────────────────────────── */
.download-app-wrap {
  position: relative;
}
.btn-download-app {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 14px;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.2px;
  color: #fff;
  background: linear-gradient(135deg, var(--primary), var(--primary-hover));
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 10px var(--primary-glow);
  white-space: nowrap;
}
.btn-download-app:hover {
  background: linear-gradient(135deg, var(--primary-hover), var(--primary));
  box-shadow: 0 4px 16px var(--primary-glow);
  transform: translateY(-1px);
}
.btn-download-app:active {
  transform: translateY(0);
  box-shadow: 0 1px 6px var(--primary-glow);
}
.btn-download-app .icon {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}
.download-app-label {
  line-height: 1;
}
.download-app-tooltip {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 220px;
  padding: 12px 16px;
  border-radius: 10px;
  background: var(--bg-card);
  backdrop-filter: blur(16px);
  border: 1px solid var(--border);
  box-shadow: var(--card-shadow);
  z-index: 100;
  font-size: 12.5px;
  color: var(--text-secondary);
  line-height: 1.5;
}
.download-app-tooltip .download-os-info {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
  font-weight: 600;
  color: var(--text);
  font-size: 13px;
}
.download-app-tooltip .download-coming-soon {
  color: #f59e0b;
  font-weight: 500;
}

@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 auto;
  gap: 0;
  height: calc(100vh - 56px - 28px);
  overflow: hidden;
  min-height: 0;
  position: relative;
}

@media (max-width: 1200px) {
  .app-grid {
    grid-template-columns: 220px 1fr auto;
  }
  .users-panel {
    width: clamp(280px, 33vw, 360px);
  }
}

@media (max-width: 1100px) {
  .app-grid {
    grid-template-columns: 1fr;
    height: auto;
    min-height: calc(100vh - 56px - 28px);
  }
  .sidebar {
    max-height: 45vh;
    border-bottom: 1px solid var(--border);
    overflow: hidden;
  }
  .voice-panel,
  .users-panel {
    max-height: 500px;
    border-top: 1px solid var(--border);
    width: auto;
  }
  .users-panel-expand-btn {
    display: none !important;
  }
}

@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"
      "users";
    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);
    overflow: visible;
  }

  .sidebar .sidebar-scroll {
    padding: 12px 10px;
    overflow-y: visible;
  }

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

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

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

  .users-panel-expand-btn {
    display: none !important;
  }

  .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;
  }

  .vc-bottom-bar,
  .vc-settings-drawer,
  .voice-network,
  .vs-section-header {
    padding-left: 12px;
    padding-right: 12px;
  }
  .vs-section-body {
    padding-left: 12px;
    padding-right: 12px;
  }

  .vc-bar-btn {
    width: 36px;
    height: 36px;
  }

  .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;
  }
}

/* ── Inline Voice Users Section (collapsible in voice panel) ──── */
.voice-users-section {
  border-bottom: 1px solid var(--border);
}

.voice-users-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 10px 14px;
  background: rgba(15, 19, 35, 0.3);
  border: none;
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
}

.voice-users-toggle:hover {
  background: rgba(15, 19, 35, 0.5);
}

.voice-users-toggle .mini-count {
  margin-left: auto;
  margin-right: 4px;
}

.voice-users-chevron {
  width: 16px;
  height: 16px;
  opacity: 0.5;
  transition: transform 0.3s ease;
  flex-shrink: 0;
}

.voice-users-section.open .voice-users-chevron {
  transform: rotate(180deg);
}

.voice-users-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.voice-users-section.open .voice-users-content {
  max-height: 60vh;
  overflow-y: auto;
}

.voice-users-content .users-block {
  padding: 8px 14px;
}

.voice-users-content .users-search-inline input {
  width: 100%;
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: rgba(0, 0, 0, 0.25);
  color: var(--text);
  font-size: 12px;
  outline: none;
  margin-bottom: 6px;
}

.voice-users-content .users-search-inline input:focus {
  border-color: var(--primary);
}

.voice-users-content .users-list-container.inline {
  max-height: 30vh;
  overflow-y: auto;
}

.voice-users-content .participant-list.compact {
  max-height: 20vh;
  overflow-y: auto;
}

/* Legacy drawer overlay - kept for backwards compat but hidden */
.users-drawer-overlay {
  display: none;
}
.users-drawer {
  display: none;
}

/* ═══ Voice Center Panel (center column for voice channels) ═══ */
.voice-center-panel {
  padding: 0;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  background: rgba(8, 11, 20, 0.45);
  grid-column: 2;
  grid-row: 1;
  position: relative;
  border-left: 1px solid rgba(255, 255, 255, 0.04);
  border-right: 1px solid rgba(255, 255, 255, 0.04);
}

/* Remove glass border-radius from full-height grid panels */
.app-grid > .glass {
  border-radius: 0;
  border: none;
  box-shadow: none;
}

/* ── Voice Center Header (slim) ──────────────────────────────── */
.vc-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(8, 11, 20, 0.6);
  flex-shrink: 0;
  min-height: 48px;
  box-sizing: border-box;
}
.vc-header-info {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.vc-channel-name {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.vc-header-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.vc-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.2s;
}
.vc-icon-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  color: var(--text);
}
.vc-icon-btn .icon {
  width: 18px;
  height: 18px;
}

/* ── Voice Center Body (fixed layout — NO scroll) ────────────── */
.vc-body {
  flex: 1;
  overflow: hidden;
  padding: 4px 8px 8px;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.voice-participants-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px;
  min-height: 0;
  flex-shrink: 0;
}

/* ── Voice Bottom Control Bar (Discord-style) ────────────────── */
.vc-bottom-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: rgba(4, 6, 14, 0.9);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  flex-shrink: 0;
  gap: 4px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.vc-bar-left,
.vc-bar-right {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.vc-bar-center {
  display: flex;
  align-items: center;
  gap: 4px;
  justify-content: center;
  flex: 1;
}
.vc-bar-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-muted);
  cursor: pointer;
  contain: layout style paint;
  transition: all 0.2s ease;
  position: relative;
}
.vc-bar-btn:hover {
  background: rgba(255, 255, 255, 0.16);
  color: var(--text);
  transform: scale(1.08);
}
.vc-bar-btn:active {
  transform: scale(0.95);
}
.vc-bar-btn .icon {
  width: 20px;
  height: 20px;
}
.vc-bar-btn.btn-active {
  background: rgba(239, 68, 68, 0.25);
  color: #f87171;
  box-shadow: 0 0 12px rgba(239, 68, 68, 0.2);
}
.vc-bar-btn.btn-active:hover {
  background: rgba(239, 68, 68, 0.35);
}
.vc-bar-btn-danger {
  background: rgba(239, 68, 68, 0.2) !important;
  color: #f87171 !important;
}
.vc-bar-btn-danger:hover {
  background: rgba(239, 68, 68, 0.35) !important;
  color: #fca5a5 !important;
  box-shadow: 0 0 16px rgba(239, 68, 68, 0.25);
}
.vc-bar-btn-accent {
  background: linear-gradient(
    135deg,
    rgba(93, 135, 191, 0.3),
    rgba(139, 92, 246, 0.3)
  );
  color: #a5b4fc;
}
.vc-bar-btn-accent:hover {
  background: linear-gradient(
    135deg,
    rgba(93, 135, 191, 0.5),
    rgba(139, 92, 246, 0.5)
  );
  color: #c7d2fe;
  box-shadow: 0 0 16px rgba(93, 135, 191, 0.3);
}
.vc-bar-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22c55e;
  border: 2px solid rgba(4, 6, 14, 0.85);
  animation: pulse-dot 2s ease-in-out infinite;
}

/* ── Voice Settings Drawer (slide-up from bottom bar) ────────── */
.vc-settings-drawer {
  position: absolute;
  bottom: 62px; /* above the bottom bar */
  left: 0;
  right: 0;
  max-height: 60%;
  background: rgba(8, 11, 20, 0.96);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px 12px 0 0;
  display: flex;
  flex-direction: column;
  z-index: 20;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 -6px 28px rgba(0, 0, 0, 0.35);
  animation: slideUpDrawer 0.25s ease;
}
.vc-settings-drawer.hidden {
  display: none;
}
@keyframes slideUpDrawer {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.vc-settings-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.vc-settings-drawer-header span {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text);
}
.vc-settings-drawer-body {
  flex: 1;
  overflow-y: auto;
  padding-bottom: 8px;
}

/* ═══ Users Panel (right column — full-height user list) ═══════ */
.users-panel {
  padding: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  background: rgba(8, 11, 20, 0.55);
  border-radius: 0;
  border: none;
  border-left: 1px solid rgba(255, 255, 255, 0.04);
  margin: 0;
  height: 100%;
  grid-column: 3;
  grid-row: 1;
  width: clamp(300px, 32vw, 420px);
  min-width: 0;
  box-shadow: none;
  transition:
    width 0.22s cubic-bezier(0.4, 0, 0.2, 1),
    min-width 0.22s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.25s ease;
}
.users-panel > * {
  transition: opacity 0.1s linear;
}
.users-panel.is-transitioning > *,
.users-panel.collapsed > * {
  opacity: 0;
  pointer-events: none;
}
.users-panel.collapsed {
  width: 0 !important;
  min-width: 0 !important;
  overflow: hidden;
  opacity: 0;
  padding: 0;
  border: none;
  box-shadow: none;
}

/* ── Panel Header ── */
.users-panel-header {
  padding: 0 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(8, 11, 20, 0.6);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 48px;
  height: 48px;
  box-sizing: border-box;
}
.users-panel-header h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.users-panel-collapse-btn {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.06);
  color: var(--text-muted);
  width: 30px;
  height: 30px;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  flex-shrink: 0;
}
.users-panel-collapse-btn:hover {
  background: rgba(93, 135, 191, 0.15);
  border-color: rgba(93, 135, 191, 0.2);
  color: var(--text);
}
.users-panel-collapse-btn .icon {
  width: 14px;
  height: 14px;
  transition: transform 0.25s ease;
}

/* ── Expand button (floating, when collapsed) ── */
.users-panel-expand-btn {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
  background: rgba(10, 13, 24, 0.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--text-muted);
  width: 22px;
  height: 52px;
  border-radius: 10px 0 0 10px;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  box-shadow: -4px 0 12px rgba(0, 0, 0, 0.2);
}
.users-panel-expand-btn:hover {
  background: rgba(93, 135, 191, 0.25);
  color: #c7d2fe;
  width: 26px;
}
.users-panel-expand-btn .icon {
  width: 14px;
  height: 14px;
}
.users-panel-expand-btn.visible {
  display: flex;
}

/* ── Section wrappers ── */
.users-panel-section {
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  flex-shrink: 0;
}
.users-panel-section-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin: 0 0 8px;
}
.users-panel-section-title .icon {
  width: 14px;
  height: 14px;
}

/* ── All-users section (search + scrollable list) ── */
.users-panel-all {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}
.users-panel-all .users-search-wrap {
  flex-shrink: 0;
  padding: 10px 12px 6px;
}
.users-panel-all .users-search-wrap input {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  font-size: 0.82rem;
  outline: none;
  transition: all 0.2s ease;
}
.users-panel-all .users-search-wrap input::placeholder {
  color: rgba(148, 163, 184, 0.5);
}
.users-panel-all .users-search-wrap input:focus {
  background: rgba(93, 135, 191, 0.06);
  border-color: rgba(93, 135, 191, 0.3);
  box-shadow: 0 0 0 3px rgba(93, 135, 191, 0.08);
}
.users-panel-all .users-list-container {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
  padding: 4px 8px 8px;
}

/* ═══════════════════════════════════════════════════════════════
   UNIFIED MEDIA GRID  (replaces separate participant list,
   camera grid, and screen-share container)
   ═══════════════════════════════════════════════════════════════ */

/* Hide legacy containers – state management still runs */
.vc-body > .participant-list,
.vc-body > .voice-participants-grid,
.vc-body > .camera-grid,
.vc-body > .screen-share-container {
  display: none !important;
}

/* ── Grid wrapper (contains main + sidebar) ── */
.media-grid {
  display: flex;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* ── Main grid area (fills available space, NO scroll) ── */
.media-grid-main {
  display: grid;
  gap: 6px;
  padding: 10px;
  flex: 1;
  overflow: hidden;
  min-height: 0;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
}

/* ── Focus mode: main area takes 70%, sidebar 30% ── */

/* ── Voice Channel Empty State ── */
.vc-empty-state {
  grid-column: 1 / -1;
  grid-row: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 8px;
  padding: 32px 24px;
  user-select: none;
}
.vc-empty-icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.04);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
  animation: vcEmptyPulse 3s ease-in-out infinite;
}
.vc-empty-icon svg {
  width: 36px;
  height: 36px;
  color: var(--text-muted, rgba(255, 255, 255, 0.3));
}
.vc-empty-icon.connected {
  background: rgba(67, 181, 129, 0.1);
  animation: none;
}
.vc-empty-icon.connected svg {
  color: #43b581;
}
@keyframes vcEmptyPulse {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.7;
  }
  50% {
    transform: scale(1.06);
    opacity: 1;
  }
}
.vc-empty-title {
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--text-primary, #fff);
  margin: 0;
}
.vc-empty-desc {
  font-size: 0.85rem;
  color: var(--text-muted, rgba(255, 255, 255, 0.4));
  line-height: 1.55;
  margin: 0;
  max-width: 320px;
}
.vc-empty-join-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding: 10px 28px;
  border-radius: 8px;
  border: none;
  background: var(--accent, #5865f2);
  color: #fff;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition:
    background 0.15s,
    transform 0.1s;
}
.vc-empty-join-btn:hover {
  background: var(--accent-hover, #4752c4);
}
.vc-empty-join-btn:active {
  transform: scale(0.97);
}
.vc-empty-join-btn .icon {
  width: 18px;
  height: 18px;
}

/* ── Focus mode ── */
.media-grid.focus-mode .media-grid-main {
  align-content: stretch;
}
.media-grid.focus-mode .media-grid-main .media-tile.focused {
  width: 100%;
  height: 100%;
}

/* ── Sidebar (visible only in focus mode) ── */
.media-grid-sidebar {
  width: 220px;
  min-width: 220px;
  display: flex;
  flex-direction: column;
  border-left: 1px solid var(--border, rgba(255, 255, 255, 0.08));
  background: var(--bg-card, rgba(15, 18, 30, 0.3));
  overflow: hidden;
}
.media-grid-sidebar.hidden {
  display: none;
}

.media-grid-sidebar-list {
  flex: 1;
  overflow-y: auto;
  padding: 6px;
}

/* ── Sidebar item ── */
.mg-sidebar-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s;
}
.mg-sidebar-item:hover {
  background: rgba(93, 135, 191, 0.15);
}
.mg-sidebar-item.speaking {
  background: rgba(34, 197, 94, 0.1);
  box-shadow: inset 2px 0 0 #22c55e;
}

.mg-sb-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--accent-gradient);
  display: flex;
  align-items: center;
  justify-content: center;
}
.mg-sb-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.mg-sb-initial {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
}
.mg-sb-info {
  flex: 1;
  min-width: 0;
}
.mg-sb-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}
.mg-sb-status {
  font-size: 10px;
  color: var(--text-muted);
  display: block;
}

/* ── Sidebar pager ── */
.media-grid-sidebar-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 6px;
  border-top: 1px solid var(--border, rgba(255, 255, 255, 0.08));
}

/* ── Grid pager (bottom, non-focus mode) ── */
.media-grid-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 6px 12px;
  border-top: 1px solid var(--border, rgba(255, 255, 255, 0.08));
}
.media-grid-pager.hidden {
  display: none;
}

.mg-pager-btn {
  background: rgba(93, 135, 191, 0.15);
  color: var(--text);
  border: 1px solid var(--border, rgba(255, 255, 255, 0.1));
  border-radius: 6px;
  width: 28px;
  height: 28px;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}
.mg-pager-btn:hover {
  background: rgba(93, 135, 191, 0.3);
}
.mg-pager-btn:disabled {
  opacity: 0.3;
  cursor: default;
}
.mg-pager-info {
  font-size: 12px;
  color: var(--text-muted);
}

/* ── Individual tile ── */
.media-tile {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  background: var(--bg-card, rgba(15, 18, 30, 0.5));
  /* NO aspect-ratio — tiles stretch to fill grid cell */
  contain: layout style paint;
  transition:
    box-shadow 0.2s ease,
    border-color 0.2s ease,
    transform 0.15s ease;
  border: 2px solid transparent;
  min-height: 0;
  min-width: 0;
  width: 100%;
  height: 100%;
}
.media-tile:not(.avatar-only) {
  cursor: pointer;
}
.media-tile.avatar-only {
  cursor: default;
}
.media-tile:not(.avatar-only):hover {
  border-color: var(--border-light, rgba(255, 255, 255, 0.12));
  transform: scale(1.02);
}
.media-tile:not(.avatar-only):active {
  transform: scale(0.98);
}

/* Speaking glow */
.media-tile.speaking {
  border-color: #22c55e;
  box-shadow: 0 0 12px rgba(34, 197, 94, 0.35);
  animation: media-tile-speak-pulse 1.5s ease-in-out infinite;
}
@keyframes media-tile-speak-pulse {
  0%,
  100% {
    box-shadow: 0 0 8px rgba(34, 197, 94, 0.25);
  }
  50% {
    box-shadow: 0 0 18px rgba(34, 197, 94, 0.5);
  }
}

/* Muted subtle overlay */
.media-tile.muted::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.08);
  pointer-events: none;
  border-radius: inherit;
}

/* ── Focused tile (in focus-mode, takes full main area) ── */
.media-tile.focused {
  min-height: 0;
  height: 100%;
  border-color: var(--primary);
  transform: none;
}
.media-tile.focused:hover {
  transform: none;
}
.media-tile.focused .media-tile-avatar-img,
.media-tile.focused .media-tile-avatar-initial {
  width: 96px;
  height: 96px;
}
.media-tile.focused .media-tile-avatar-initial {
  font-size: 2.2rem;
}
.media-tile.focused .media-tile-name {
  font-size: 1rem;
}

/* ── TV tile (YouTube player in grid) ── */
.media-tile.tv-tile {
  cursor: pointer;
  background: #000;
}
.media-tile-tv-container {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: auto;
}
.media-tile-tv-container iframe,
.media-tile-tv-container #ytPlayerDiv {
  width: 100% !important;
  height: 100% !important;
  position: absolute;
  top: 0;
  left: 0;
  border: 0;
}
.media-tile.tv-tile .media-tile-overlay {
  z-index: 3;
  pointer-events: none;
}
.tv-open-external {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: rgba(0, 0, 0, 0.85);
  z-index: 5;
  color: #fff;
  text-align: center;
  padding: 20px;
}
.tv-error-icon {
  font-size: 2.5rem;
}
.tv-error-msg {
  font-size: 0.95rem;
  opacity: 0.85;
}
.tv-error-btn {
  font-size: 0.9rem;
  text-decoration: none;
}
.tv-error-close {
  margin-top: 4px;
  opacity: 0.6;
}

/* ── Video inside tile ── */
.media-tile-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: #000;
  z-index: 2;
}
.media-tile-video.hidden {
  display: none;
}

/* ── Avatar (no-video fallback) ── */
.media-tile-avatar-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  flex-direction: column;
  gap: 8px;
}
.media-tile-avatar-wrap.hidden {
  display: none;
}
.media-tile-avatar-img {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid rgba(255, 255, 255, 0.12);
  transition:
    width 0.2s,
    height 0.2s;
}
.media-tile-avatar-initial {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: 700;
  color: #fff;
  background: var(--primary);
  border: 3px solid rgba(255, 255, 255, 0.12);
  transition:
    width 0.2s,
    height 0.2s,
    font-size 0.2s;
}

/* ── Name / status overlay ── */
.media-tile-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 8px 10px;
  z-index: 3;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
  display: flex;
  align-items: center;
  gap: 6px;
  pointer-events: none;
}
.media-tile-name {
  font-size: 0.8rem;
  font-weight: 600;
  color: #fff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}
.media-tile-icons {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.media-tile-icons .icon {
  width: 14px;
  height: 14px;
  color: #fff;
  opacity: 0.85;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
}
.media-tile-icons .icon.ic-red {
  color: #f87171;
  opacity: 1;
}
.media-tile-icons .icon.ic-green {
  color: #4ade80;
  opacity: 1;
}

/* ── Light theme overrides for media grid ── */
:is(
    [data-theme="light"],
    [data-theme="snow"],
    [data-theme="cream"],
    [data-theme="mint"]
  )
  .media-tile {
  background: var(--bg-card, rgba(0, 0, 0, 0.04));
  border-color: rgba(0, 0, 0, 0.06);
}
:is(
    [data-theme="light"],
    [data-theme="snow"],
    [data-theme="cream"],
    [data-theme="mint"]
  )
  .media-tile:hover {
  border-color: rgba(0, 0, 0, 0.15);
}
:is(
    [data-theme="light"],
    [data-theme="snow"],
    [data-theme="cream"],
    [data-theme="mint"]
  )
  .media-tile-avatar-img,
:is(
    [data-theme="light"],
    [data-theme="snow"],
    [data-theme="cream"],
    [data-theme="mint"]
  )
  .media-tile-avatar-initial {
  border-color: rgba(0, 0, 0, 0.1);
}
:is(
    [data-theme="light"],
    [data-theme="snow"],
    [data-theme="cream"],
    [data-theme="mint"]
  )
  .media-grid-sidebar {
  background: rgba(255, 255, 255, 0.5);
  border-left-color: rgba(0, 0, 0, 0.08);
}
:is(
    [data-theme="light"],
    [data-theme="snow"],
    [data-theme="cream"],
    [data-theme="mint"]
  )
  .mg-sidebar-item:hover {
  background: rgba(0, 0, 0, 0.06);
}
:is(
    [data-theme="light"],
    [data-theme="snow"],
    [data-theme="cream"],
    [data-theme="mint"]
  )
  .mg-pager-btn {
  background: rgba(0, 0, 0, 0.06);
  border-color: rgba(0, 0, 0, 0.1);
  color: var(--text);
}

/* ═══ Entertainment Slide-in Panel (body-level) ════════════════ */
.ent-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 8999;
  transition: opacity 0.3s;
  opacity: 1;
}
.ent-overlay.hidden {
  display: none;
}
.entertainment-slide-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 420px;
  max-width: 90vw;
  z-index: 9000;
  background: rgba(12, 15, 28, 0.97);
  backdrop-filter: blur(24px);
  border-left: 1px solid rgba(93, 135, 191, 0.2);
  box-shadow: -8px 0 40px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}
.entertainment-slide-panel.open {
  transform: translateX(0);
}
.ent-slide-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.ent-slide-header h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
}
.ent-slide-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: none;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.2s;
}
.ent-slide-close:hover {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
}
.entertainment-slide-panel .entertainment-tabs {
  flex-shrink: 0;
}
.entertainment-slide-panel .entertainment-body {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}

/* ── Sidebar ───────────────────────────────────────────────────── */
.sidebar {
  padding: 0;
  border-radius: 0;
  border-top: none;
  border-left: none;
  border-bottom: none;
  overflow: hidden;
  height: 100%;
  background: rgba(8, 11, 20, 0.55);
  display: flex;
  flex-direction: column;
  transition: background var(--transition);
  border-right: 1px solid rgba(255, 255, 255, 0.04);
}

/* Scrollable sections wrapper — fills available space */
.sidebar-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 14px 12px 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

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

.sidebar-section:last-of-type {
  margin-bottom: 0;
}

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

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

.channel-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  text-align: left;
  padding: 8px 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;
  contain: layout style;
  transition:
    background 0.2s ease,
    color 0.2s ease,
    box-shadow 0.2s ease;
  position: relative;
  line-height: 1.4;
  overflow: hidden;
  white-space: nowrap;
  min-width: 0;
}

.channel-btn .ch-name {
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}

.channel-btn:hover {
  background: color-mix(in srgb, var(--primary) 10%, transparent);
  color: var(--text-secondary);
}

.channel-btn.active {
  background: color-mix(in srgb, var(--primary) 14%, transparent);
  color: #fff;
  font-weight: 600;
  box-shadow: inset 0 0 20px color-mix(in srgb, var(--primary) 6%, transparent);
}

.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(93, 135, 191, 0.08);
  border: 1px solid rgba(93, 135, 191, 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 4px 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: var(--bg-card);
  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;
  overflow: hidden;
}
.user-popover-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.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 ───────────────────────────────────────────────── */

.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: 12px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  align-items: center;
  min-height: 48px;
  background: rgba(15, 19, 35, 0.3);
  flex-shrink: 0;
  box-sizing: border-box;
}

.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: 8px 14px;
  border-radius: var(--radius-sm);
  background: transparent;
  border: none;
  border-left: 2px solid transparent;
  animation: messageSlide 0.3s ease;
  contain: layout style;
  transition:
    background 0.2s ease,
    border-color 0.2s ease;
}

.message:hover {
  background: color-mix(in srgb, var(--primary) 4%, transparent);
  border-left-color: color-mix(in srgb, var(--primary) 15%, transparent);
}

/* ── Grouped Messages (consecutive same user) ────────── */
.message-grouped {
  padding-top: 2px;
  padding-bottom: 2px;
  margin-top: -4px;
}
.message-grouped .meta {
  display: none;
}
.message-grouped .msg-avatar-hidden {
  visibility: hidden;
  position: relative;
}
.message-grouped .msg-hover-time {
  opacity: 0;
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: var(--text-secondary, var(--text-muted, #72839a));
  font-weight: 500;
  letter-spacing: 0.01em;
  background: none;
  border: none;
  border-radius: 0;
  padding: 0;
  z-index: 1;
  transition: opacity 0.15s ease;
  pointer-events: none;
  text-shadow: 0 0 6px var(--bg, rgba(0, 0, 0, 0.5));
}
.message-grouped:hover .msg-hover-time {
  opacity: 1;
}

@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(93, 135, 191, 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;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  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);
  position: relative;
}

.message-form input,
.message-form textarea {
  flex: 1;
  border-radius: 20px;
  padding: 8px 16px;
  min-height: 38px;
  box-sizing: border-box;
  line-height: 1.4;
  background: rgba(15, 19, 35, 0.7);
  border: 1px solid var(--border, rgba(93, 135, 191, 0.12));
  color: var(--text);
  transition: all var(--transition);
}

.message-form input:focus,
.message-form textarea:focus {
  background: var(--bg-card);
  border-color: var(--primary);
  outline: none;
  box-shadow: 0 0 0 3px rgba(93, 135, 191, 0.1);
}

.message-form .btn {
  border-radius: 22px;
  padding: 0;
  width: 38px;
  height: 38px;
  min-width: 38px;
  flex-shrink: 0;
}

.message-form > .btn-icon {
  width: 38px;
  height: 38px;
  min-width: 38px;
  padding: 0;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}

.message-form > .btn-icon .icon {
  width: 18px;
  height: 18px;
}

/* ── Action Tray ───────────────────────────────────────────────── */
.action-tray {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 14px;
  display: flex;
  gap: 4px;
  padding: 6px 8px;
  border-radius: 14px;
  background: var(--bg-card, rgba(17, 29, 48, 0.95));
  border: 1px solid var(--border-light, rgba(42, 52, 86, 0.6));
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  z-index: 100;
  animation: actionTrayIn 0.18s ease;
}
.action-tray.hidden {
  display: none;
}
@keyframes actionTrayIn {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
.action-tray-item {
  all: unset;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 8px 12px;
  border-radius: 10px;
  cursor: pointer;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted, #6b7599);
  transition:
    background 0.15s,
    color 0.15s,
    transform 0.1s;
}
.action-tray-item:hover {
  background: rgba(93, 135, 191, 0.12);
  color: var(--text, #e8ecf4);
  transform: translateY(-1px);
}
.action-tray-item:active {
  transform: scale(0.95);
}
.action-tray-item .icon {
  width: 20px;
  height: 20px;
}
.action-tray-toggle {
  width: 38px;
  height: 38px;
  min-width: 38px;
  padding: 0;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(93, 135, 191, 0.1);
  border: 1px solid transparent;
  color: var(--text-muted, #6b7599);
  transition: all 0.25s ease;
  flex-shrink: 0;
}
.action-tray-toggle:hover {
  background: rgba(93, 135, 191, 0.2);
  color: var(--primary, #5d87bf);
}
.action-tray-toggle .icon {
  width: 18px;
  height: 18px;
  transition: transform 0.25s ease;
}
.action-tray-toggle.active {
  background: var(--primary, #5d87bf);
  color: #fff;
  border-color: var(--primary, #5d87bf);
}
.action-tray-toggle.active .icon {
  transform: rotate(45deg);
}

/* ── Send Button ───────────────────────────────────────────────── */
.btn-send {
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  padding: 0 !important;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 13px;
  transition: all 0.2s ease;
}
.btn-send .icon {
  width: 16px;
  height: 16px;
}
.btn-send:active {
  transform: scale(0.95);
}

/* ── GIF Picker ────────────────────────────────────────────────── */
.gif-picker {
  position: absolute;
  bottom: calc(100% + 4px);
  left: 14px;
  width: 360px;
  max-height: 420px;
  border-radius: 14px;
  border: 1px solid var(--border-light, rgba(42, 52, 86, 0.6));
  background: var(--bg-card, rgba(17, 29, 48, 0.97));
  z-index: 1001;
  display: flex;
  flex-direction: column;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  animation: fadeScaleIn 0.15s ease;
  overflow: hidden;
}
.gif-picker.hidden {
  display: none;
}
.gif-picker-header {
  padding: 10px;
  border-bottom: 1px solid var(--border, rgba(30, 39, 68, 0.8));
  flex-shrink: 0;
}
.gif-picker-header input {
  width: 100%;
  background: var(--bg-input, rgba(10, 22, 40, 0.7));
  border: 1px solid var(--border, rgba(30, 39, 68, 0.8));
  border-radius: 10px;
  padding: 8px 12px;
  color: var(--text, #e8ecf4);
  font-size: 13px;
  outline: none;
  transition: border-color 0.2s;
  box-sizing: border-box;
}
.gif-picker-header input:focus {
  border-color: var(--primary, #5d87bf);
}
.gif-grid {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
  min-height: 120px;
}
.gif-grid-item {
  width: 100%;
  border-radius: 8px;
  cursor: pointer;
  transition:
    transform 0.15s,
    box-shadow 0.15s;
  object-fit: cover;
  aspect-ratio: 16/10;
  background: rgba(93, 135, 191, 0.06);
}
.gif-grid-item:hover {
  transform: scale(1.04);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}
.gif-grid-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 36px 12px;
  color: var(--text-muted, #6b7599);
  font-size: 13px;
}

/* ── Profile Display ID ───────────────────────────────────────── */
.profile-display-id {
  font-size: 12px;
  color: var(--text-muted, #6b7599);
  font-family: "SF Mono", "Fira Code", "Consolas", monospace;
  letter-spacing: 0.5px;
  user-select: all;
  padding: 2px 10px;
  background: rgba(93, 135, 191, 0.08);
  border-radius: 8px;
  margin-top: -6px;
}

/* ── Load More Button ──────────────────────────────────────────── */

/* ── 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 grid removed — now using .vc-bottom-bar) */

.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;
}

.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(93, 135, 191, 0.55);
}

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

.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(93, 135, 191, 0.12);
  color: var(--text-secondary);
  font-size: 10px;
  font-weight: 600;
}

#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 (now inside .vc-settings-drawer) ─────────── */
.voice-settings,
.vc-settings-drawer .vs-section {
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.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(93, 135, 191, 0.06);
}
.vs-section-header:active {
  background: rgba(93, 135, 191, 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;
  }
  to {
    opacity: 1;
  }
}

/* ── 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(93, 135, 191, 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(93, 135, 191, 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 14px 12px;
  background: transparent;
  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;
  gap: 16px;
  padding: 10px 12px;
  font-size: 13px;
  color: var(--text-secondary);
  border-radius: 8px;
  transition: background 0.15s;
  min-height: 40px;
}
.settings-row:hover {
  background: rgba(93, 135, 191, 0.04);
}

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

.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), #3b4f6a);
  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(93, 135, 191, 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 (Discord-style enhanced) ─────────────────── */
.participant-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  margin: 0 8px;
  border-radius: 8px;
  background: transparent;
  border: 1.5px solid transparent;
  font-size: 14px;
  transition: all 0.2s ease;
  animation: slideInRight 0.35s ease both;
  flex-wrap: wrap;
}

.participant-list li:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(93, 135, 191, 0.1);
}

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

.participant-list li.speaking .participant-avatar {
  animation: speakingPulse 1.5s ease-in-out infinite;
  box-shadow: 0 0 0 2.5px 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: 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: 14px;
  font-weight: 700;
  user-select: none;
  box-shadow: 0 2px 8px rgba(93, 135, 191, 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-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-input);
  color: var(--text);
  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-card);
  color: var(--text);
}

/* ── 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(93, 135, 191, 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: 6px;
  height: 6px;
}

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

::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--primary) 22%, transparent);
  border-radius: 6px;
  transition: background 0.2s;
}

::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--primary) 45%, transparent);
}

::-webkit-scrollbar-thumb:active {
  background: color-mix(in srgb, var(--primary) 60%, transparent);
}

* {
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--primary) 22%, transparent)
    transparent;
}

/* ── Selection ─────────────────────────────────────────────────── */
::selection {
  background: color-mix(in srgb, var(--primary) 35%, transparent);
  color: var(--text);
}

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

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

/* Buttons get a ring shadow instead of outline for smoother look */
.btn:focus-visible,
.vc-bar-btn:focus-visible,
.channel-btn:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 2px var(--bg),
    0 0 0 4px var(--primary);
}

/* ═══════════════════════════════════════════════════════════════════
   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-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0 10px;
}
.user-mgmt-search {
  flex: 1;
  background: var(--bg-input, rgba(10, 22, 40, 0.7));
  border: 1px solid var(--border, rgba(30, 39, 68, 0.8));
  border-radius: 10px;
  padding: 8px 12px;
  color: var(--text, #e8ecf4);
  font-size: 13px;
  outline: none;
  transition: border-color 0.2s;
}
.user-mgmt-search:focus {
  border-color: var(--primary, #5d87bf);
}
.user-mgmt-count {
  font-size: 12px;
  color: var(--text-muted, #6b7599);
  white-space: nowrap;
  flex-shrink: 0;
}
.user-mgmt-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 8px 0 4px;
}
.mgmt-page-btn {
  all: unset;
  min-width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted, #6b7599);
  cursor: pointer;
  transition: all 0.15s;
}
.mgmt-page-btn:hover {
  background: rgba(93, 135, 191, 0.12);
  color: var(--text, #e8ecf4);
}
.mgmt-page-btn.active {
  background: var(--primary, #5d87bf);
  color: #fff;
  font-weight: 600;
}

.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(93, 135, 191, 0.06);
  transition: all 0.2s ease;
}

.user-mgmt-row:hover {
  background: rgba(15, 19, 35, 0.6);
  border-color: rgba(93, 135, 191, 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(93, 135, 191, 0.15);
  border-color: rgba(93, 135, 191, 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: var(--bg-card);
  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 var(--border);
  background: var(--bg-input);
  color: var(--text);
  font-size: 0.9rem;
}

/* ── Read Info Modal ────────────────────────────────────────── */
.read-info-modal {
  max-width: 380px;
  text-align: center;
}
.read-info-msg-preview {
  background: rgba(93, 135, 191, 0.08);
  border: 1px solid rgba(93, 135, 191, 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(93, 135, 191, 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);
  overflow: hidden;
}
.read-info-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
.read-info-user {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  min-width: 0;
}
.read-info-name-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.read-info-name-row .role-badge {
  font-size: 9px;
  padding: 1px 5px;
}
.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: rgba(239, 68, 68, 0.2) !important;
  border-color: rgba(239, 68, 68, 0.4) !important;
  color: #f87171 !important;
  box-shadow: 0 0 8px rgba(239, 68, 68, 0.15);
  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 — pinned at bottom of sidebar */
.sidebar-signature {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  align-items: center;
  padding: 10px 12px;
  border-top: 1px solid var(--border);
  opacity: 0.5;
  transition: opacity var(--transition);
  flex-shrink: 0;
}
.sidebar-signature:hover {
  opacity: 0.85;
}
.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 */

/* License badge (auth page) */

/* License label (topbar/sidebar) */

/* 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);
}

.btn:hover .icon,
.btn-icon:hover .icon,
.channel-btn:hover .icon,
.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;
  }
}

/* ── App-wide animation preference (user toggle) ──────────────── */
body.reduced-motion *,
body.reduced-motion *::before,
body.reduced-motion *::after {
  animation-duration: 0s !important;
  animation-delay: 0s !important;
  transition-duration: 0s !important;
  transition-delay: 0s !important;
  scroll-behavior: auto !important;
}

/* ── Center-panel crossfade transitions ──────────────────────── */
.chat-panel,
.voice-center-panel,
.welcome-screen,
.dm-panel {
  will-change: opacity, filter;
}

/* Enter animation — applied explicitly by switchCenterPanel() */
body.voxi-animate .panel-enter {
  animation: centerPanelEnter var(--panel-anim-dur, 0.22s)
    cubic-bezier(0.4, 0, 0.2, 1) both;
}

@keyframes centerPanelEnter {
  from {
    opacity: 0;
    filter: blur(1.6px);
  }
  to {
    opacity: 1;
    filter: blur(0);
  }
}

/* ── Sidebar channel item transitions ────────────────────────── */
body.voxi-animate .channel-item {
  transition:
    background 0.15s ease,
    transform 0.1s ease,
    box-shadow 0.15s ease;
}
body.voxi-animate .channel-item:active {
  transform: scale(0.985);
}

/* ── Message appear animation ────────────────────────────────── */
body.voxi-animate .msg-row {
  animation: msgSlideIn var(--panel-anim-dur, 0.22s)
    cubic-bezier(0.4, 0, 0.2, 1) both;
}
@keyframes msgSlideIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ── Users panel list item appear ────────────────────────────── */
body.voxi-animate .user-row {
  transition:
    background 0.15s ease,
    transform 0.1s ease;
}
body.voxi-animate .user-row:active {
  transform: scale(0.985);
}

/* ── Tooltip & popover enter ─────────────────────────────────── */
body.voxi-animate .user-popover,
body.voxi-animate .context-menu,
body.voxi-animate .emoji-picker {
  animation: popoverIn 0.15s cubic-bezier(0.4, 0, 0.2, 1) both;
}
@keyframes popoverIn {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(-4px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* ── Voice participant tile appear ───────────────────────────── */
body.voxi-animate .media-tile {
  animation: tileIn var(--panel-anim-dur, 0.22s) cubic-bezier(0.4, 0, 0.2, 1)
    both;
}
@keyframes tileIn {
  from {
    opacity: 0;
    transform: scale(0.96);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* ── Settings tab content fade ───────────────────────────────── */
body.voxi-animate .us-tab-content.active {
  animation: centerPanelEnter var(--panel-anim-dur, 0.22s)
    cubic-bezier(0.4, 0, 0.2, 1) both;
}

/* ── Header / toolbar subtle transitions ─────────────────────── */
body.voxi-animate .vc-header,
body.voxi-animate .chat-header,
body.voxi-animate .dm-header {
  transition:
    background 0.2s ease,
    box-shadow 0.2s ease;
}

/* ── Scroll-to-bottom button ─────────────────────────────────── */
body.voxi-animate .jump-to-bottom {
  transition:
    opacity 0.15s ease,
    transform 0.15s ease;
}

/* ── Toggle switch smooth (already has transition but reinforce) ── */
body.voxi-animate .toggle-slider {
  transition: background 0.2s ease;
}
body.voxi-animate .toggle-slider::before {
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Icon color palette */
.ic-cyan {
  color: #22d3ee;
}
.ic-green {
  color: #34d399;
}
.ic-indigo {
  color: #7ba3d4;
}
.ic-purple {
  color: #8badc8;
}
.ic-amber {
  color: #fbbf24;
}
.ic-red {
  color: #f87171;
}
.ic-muted {
  color: var(--text-muted);
}

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

.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-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(93, 135, 191, 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(93, 135, 191, 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 bar button icon alignment ────────────────────────── */
.vc-bar-btn .icon {
  width: 20px;
  height: 20px;
  vertical-align: middle;
}

/* ── 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(93, 135, 191, 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 ───────────────────────────────────── */

/* ── 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);
  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(93, 135, 191, 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(93, 135, 191, 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(93, 135, 191, 0.5);
  box-shadow: 0 1px 4px rgba(93, 135, 191, 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 base styles defined above) */

/* ── 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 {
  border-bottom: none;
  margin-bottom: 2px;
}

.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 {
  overflow-y: auto;
}

.dm-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 40px 20px;
  text-align: center;
  animation: fadeIn 0.4s ease;
}

.dm-empty-state .dm-empty-icon {
  font-size: 42px;
  margin-bottom: 4px;
  filter: grayscale(0.1);
  opacity: 0.85;
}

.dm-empty-state .dm-empty-text {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
  opacity: 0.85;
  line-height: 1.5;
}

.dm-empty-state .dm-empty-hint {
  font-size: 11.5px;
  color: var(--text-muted);
  line-height: 1.5;
  max-width: 240px;
  opacity: 0.7;
}

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

.dm-conv-item:hover {
  background: rgba(93, 135, 191, 0.1);
  border-color: rgba(93, 135, 191, 0.08);
}

.dm-conv-item.active {
  background: rgba(93, 135, 191, 0.15);
  border-color: rgba(93, 135, 191, 0.12);
}

.dm-conv-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, #5d87bf, #7c5abf);
  flex-shrink: 0;
  position: relative;
  box-shadow: 0 2px 6px rgba(93, 135, 191, 0.15);
  transition: transform 0.15s ease;
}

.dm-conv-item:hover .dm-conv-avatar {
  transform: scale(1.05);
}

.dm-conv-avatar.online::after {
  content: "";
  position: absolute;
  bottom: 0px;
  right: 0px;
  width: 10px;
  height: 10px;
  background: #10b981;
  border-radius: 50%;
  border: 2px solid var(--bg-card);
  box-shadow: 0 0 4px rgba(16, 185, 129, 0.4);
}

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

.dm-conv-name {
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text);
  transition: color 0.15s ease;
}

.dm-conv-item:hover .dm-conv-name {
  color: #e0e7ff;
}

.dm-conv-preview {
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 1px;
}

.dm-conv-unread {
  background: linear-gradient(135deg, #ec4899, #db2777);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  min-width: 20px;
  height: 20px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 6px;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(236, 72, 153, 0.3);
  animation: unreadBounce 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes unreadBounce {
  0% {
    transform: scale(0);
  }
  60% {
    transform: scale(1.15);
  }
  100% {
    transform: scale(1);
  }
}

.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: 10px;
  padding: 10px 16px;
  min-height: 52px;
  background: linear-gradient(
    180deg,
    rgba(15, 19, 35, 0.55) 0%,
    rgba(15, 19, 35, 0.3) 100%
  );
  border-bottom: 1px solid rgba(93, 135, 191, 0.1);
}

.dm-header h3 {
  flex: 1;
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.dm-header h3 .icon {
  width: 18px;
  height: 18px;
  opacity: 0.7;
}

#dmTargetName {
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
  vertical-align: middle;
}

#dmTargetRole {
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 6px;
  vertical-align: middle;
}

.dm-back-btn {
  background: rgba(93, 135, 191, 0.1);
  border: 1px solid rgba(93, 135, 191, 0.1);
  color: #a5b4fc;
  border-radius: 10px;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.dm-back-btn:hover {
  background: rgba(93, 135, 191, 0.22);
  border-color: rgba(93, 135, 191, 0.2);
  transform: translateX(-1px);
}

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

.dm-online-dot.online {
  background: #10b981;
  box-shadow:
    0 0 6px rgba(16, 185, 129, 0.45),
    0 0 12px rgba(16, 185, 129, 0.2);
  animation: onlinePulse 2.5s ease-in-out infinite;
}

@keyframes onlinePulse {
  0%,
  100% {
    box-shadow: 0 0 6px rgba(16, 185, 129, 0.45);
  }
  50% {
    box-shadow:
      0 0 10px rgba(16, 185, 129, 0.65),
      0 0 18px rgba(16, 185, 129, 0.2);
  }
}

.btn-call {
  background: linear-gradient(135deg, #10b981, #059669) !important;
  color: #fff !important;
  border: none;
  gap: 5px;
  padding: 6px 14px !important;
  border-radius: 10px !important;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.25);
  transition: all 0.2s ease;
}

.btn-call:hover {
  background: linear-gradient(135deg, #059669, #047857) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.35);
}

.btn-call:active {
  transform: translateY(0);
  box-shadow: 0 1px 4px rgba(16, 185, 129, 0.2);
}

.btn-call .icon {
  width: 15px;
  height: 15px;
}

.dm-messages {
  flex: 1;
  padding: 12px 14px 8px;
  scrollbar-width: thin;
  scrollbar-color: rgba(93, 135, 191, 0.15) transparent;
}

.dm-messages::-webkit-scrollbar {
  width: 5px;
}

.dm-messages::-webkit-scrollbar-track {
  background: transparent;
}

.dm-messages::-webkit-scrollbar-thumb {
  background: rgba(93, 135, 191, 0.15);
  border-radius: 10px;
}

.dm-messages::-webkit-scrollbar-thumb:hover {
  background: rgba(93, 135, 191, 0.3);
}

.dm-msg {
  display: flex;
  gap: 8px;
  padding: 4px 8px;
  margin: 3px 0;
  animation: dmMsgIn 0.35s cubic-bezier(0.4, 0, 0.2, 1) both;
  border-radius: 12px;
  transition: background 0.15s ease;
  position: relative;
}

.dm-msg:hover {
  background: rgba(93, 135, 191, 0.04);
}

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

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

.dm-msg-delete-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(239, 68, 68, 0.08);
  border: none;
  cursor: pointer;
  font-size: 13px;
  opacity: 0;
  transition: all 0.2s ease;
  padding: 4px 6px;
  border-radius: 6px;
  z-index: 1;
}
.dm-msg.sent .dm-msg-delete-btn {
  left: 4px;
}
.dm-msg:hover .dm-msg-delete-btn {
  opacity: 0.6;
}
.dm-msg-delete-btn:hover {
  opacity: 1 !important;
  background: rgba(239, 68, 68, 0.15);
}
.dm-msg-deleted {
  opacity: 0.5;
}

.dm-msg-bubble {
  max-width: 72%;
  padding: 10px 16px;
  border-radius: 18px;
  font-size: 13.5px;
  line-height: 1.55;
  word-break: break-word;
  position: relative;
  transition: transform 0.15s ease;
}

.dm-msg:hover .dm-msg-bubble {
  transform: scale(1.005);
}

.dm-msg.received .dm-msg-bubble {
  background: rgba(30, 41, 82, 0.65);
  border: 1px solid rgba(93, 135, 191, 0.08);
  border-bottom-left-radius: 6px;
  color: #e0e7ff;
}

.dm-msg.sent .dm-msg-bubble {
  background: linear-gradient(
    135deg,
    rgba(93, 135, 191, 0.35),
    rgba(120, 90, 220, 0.35)
  );
  border: 1px solid rgba(139, 92, 246, 0.1);
  border-bottom-right-radius: 6px;
  color: #fff;
}

.dm-msg-time {
  font-size: 10px;
  color: rgba(100, 116, 139, 0.8);
  margin-top: 5px;
  text-align: right;
  letter-spacing: 0.02em;
}

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

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

.dm-msg-system .dm-msg-bubble {
  display: inline-block;
  max-width: 85%;
  background: rgba(93, 135, 191, 0.08);
  border: 1px solid rgba(93, 135, 191, 0.12);
  border-radius: 20px;
  color: #94a3b8;
  font-size: 11.5px;
  padding: 6px 18px;
  letter-spacing: 0.01em;
}

.dm-typing {
  padding: 6px 18px 10px;
  font-size: 12px;
  color: #8b9dc3;
  display: flex;
  align-items: center;
  gap: 6px;
  animation: fadeIn 0.2s ease;
}

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

.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-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(93, 135, 191, 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(93, 135, 191, 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;
}

/* ── Group Labels (ÇEVRİMİÇİ / ÇEVRİMDIŞI) ── */
.users-group-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(148, 163, 184, 0.65);
  padding: 14px 6px 6px;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 8px;
}
.users-group-label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(148, 163, 184, 0.12), transparent);
}

/* ── User Row ── */
.user-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 8px;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.18s ease;
  position: relative;
}
.user-row:hover {
  background: rgba(93, 135, 191, 0.08);
}
.user-row:active {
  background: rgba(93, 135, 191, 0.14);
  transform: scale(0.99);
}
.user-row:hover .user-actions {
  opacity: 1;
  transform: translateX(0);
}

/* ── User Avatar ── */
.user-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 13px;
  color: #fff;
  flex-shrink: 0;
  position: relative;
  transition: transform 0.2s ease;
}
.user-row:hover .user-avatar {
  transform: scale(1.05);
}
.user-avatar.avatar-superadmin {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  box-shadow: 0 2px 10px rgba(245, 158, 11, 0.25);
}
.user-avatar.avatar-admin {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  box-shadow: 0 2px 10px rgba(59, 130, 246, 0.25);
}
.user-avatar.avatar-moderator {
  background: linear-gradient(135deg, #536b8a, #3b4f6a);
  box-shadow: 0 2px 10px rgba(139, 92, 246, 0.2);
}
.user-avatar.avatar-member {
  background: linear-gradient(135deg, #5d87bf, #456b8f);
  box-shadow: 0 2px 8px rgba(93, 135, 191, 0.15);
}

/* Status dots */
.user-avatar .online-dot {
  position: absolute;
  bottom: -1px;
  right: -1px;
  width: 11px;
  height: 11px;
  background: #22c55e;
  border-radius: 50%;
  border: 2.5px solid rgba(10, 13, 24, 0.9);
  box-shadow: 0 0 6px rgba(34, 197, 94, 0.5);
}
.user-avatar .offline-dot {
  position: absolute;
  bottom: -1px;
  right: -1px;
  width: 11px;
  height: 11px;
  background: rgba(71, 85, 105, 0.7);
  border-radius: 50%;
  border: 2.5px solid rgba(10, 13, 24, 0.9);
}

/* ── User Info Column ── */
.user-info-col {
  flex: 1;
  min-width: 0;
}
.user-info-name {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}
.user-info-role {
  font-size: 10.5px;
  color: var(--text-muted);
  opacity: 0.7;
  line-height: 1.3;
}
.user-info-voice {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 10px;
  font-weight: 600;
  color: #4ade80;
  margin-top: 2px;
  background: rgba(34, 197, 94, 0.08);
  padding: 1px 6px 1px 4px;
  border-radius: 6px;
}
.user-info-voice .icon {
  width: 11px;
  height: 11px;
  flex-shrink: 0;
}

/* ── Platform Badge ── */
.user-info-platform {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 9.5px;
  font-weight: 600;
  color: var(--text-muted);
  margin-top: 2px;
  background: rgba(93, 135, 191, 0.06);
  padding: 1px 6px 1px 4px;
  border-radius: 6px;
  opacity: 0.7;
}
.user-info-platform .icon {
  width: 10px;
  height: 10px;
  flex-shrink: 0;
}
.user-info-platform.platform-desktop {
  color: #7ba3d4;
}
.user-info-platform.platform-web {
  color: #94a3b8;
}

/* ── Action Buttons ── */
.user-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
  opacity: 0;
  transform: translateX(4px);
  transition: all 0.2s ease;
}
.user-action-btn {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.06);
  color: var(--text-muted);
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}
.user-action-btn .icon {
  width: 14px;
  height: 14px;
}
.user-action-btn:hover {
  background: rgba(93, 135, 191, 0.2);
  border-color: rgba(93, 135, 191, 0.25);
  color: #c7d2fe;
  transform: scale(1.1);
}
.user-action-btn.call-btn:hover {
  background: rgba(34, 197, 94, 0.15);
  border-color: rgba(34, 197, 94, 0.2);
  color: #4ade80;
}

/* ── Self Label ── */
.user-self-label {
  font-size: 9px;
  font-weight: 600;
  color: rgba(148, 163, 184, 0.6);
  padding: 2px 7px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 6px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ── 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(#5d87bf, #536b8a, #7ba3d4, #5d87bf);
  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: var(--accent-gradient);
  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(93, 135, 191, 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(93, 135, 191, 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(93, 135, 191, 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(93, 135, 191, 0.35) !important;
  transform: scale(1.1);
}

/* ── Call Screen Share (DM calls) ───────────────────────────── */
.call-screen-share-wrap {
  width: 100%;
  max-width: 640px;
  margin: 12px auto 0;
  border-radius: 12px;
  overflow: hidden;
  background: var(--bg-input);
  border: 1px solid var(--border);
}
.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(93, 135, 191, 0.3);
  border-radius: 16px;
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.5),
    0 0 20px rgba(93, 135, 191, 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(93, 135, 191, 0.2);
  color: #a5b4fc;
}
.call-dock-restore:hover {
  background: rgba(93, 135, 191, 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: calc(100% + 4px);
  left: 14px;
  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: flex;
  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;
  opacity: 0;
  pointer-events: none;
  transform: translateY(4px);
  transition:
    opacity 0.15s ease,
    transform 0.15s ease;
}
.msg-bubble:hover .msg-actions {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.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(93, 135, 191, 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(93, 135, 191, 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(93, 135, 191, 0.3);
  border: 1px solid rgba(93, 135, 191, 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(93, 135, 191, 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: #0c1525;
  --bg-card: #111d30;
  --bg-card-hover: #162540;
  --bg-input: #0a1628;
  --bg-elevated: #1a2a42;
  --border: #1e2744;
  --border-light: #2a3456;
  --border-focus: #5d87bf;
  --text: #e8ecf4;
  --text-secondary: #b0b8cc;
  --text-muted: #6b7599;
  --primary: #5d87bf;
  --primary-hover: #7ba3d4;
  --primary-glow: rgba(93, 135, 191, 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, #5d87bf, #536b8a, #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: #ebeef2;
  --bg-card: #ffffff;
  --bg-card-hover: #f3f4f8;
  --bg-input: #e0e3ea;
  --bg-elevated: #f8f9fb;
  --border: #c8cdd6;
  --border-light: #dfe2e8;
  --border-focus: #5b5fc7;
  --text: #1a1d24;
  --text-secondary: #4a4f5e;
  --text-muted: #7a7f8e;
  --primary: #5b5fc7;
  --primary-hover: #4a4eb8;
  --primary-glow: rgba(91, 95, 199, 0.15);
  --secondary: #0d8faa;
  --secondary-hover: #0b7a92;
  --secondary-glow: rgba(13, 143, 170, 0.12);
  --danger: #d32f2f;
  --danger-hover: #b71c1c;
  --success: #2e7d32;
  --success-glow: rgba(46, 125, 50, 0.12);
  --warning: #e65100;
  --accent-gradient: linear-gradient(135deg, #5b5fc7, #7c4dff, #0d8faa);
  --card-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 4px 14px rgba(0, 0, 0, 0.04);
}
[data-theme="light"] .bg-aurora::before {
  background: radial-gradient(
    ellipse,
    rgba(91, 95, 199, 0.07),
    transparent 70%
  );
}
[data-theme="light"] .bg-aurora::after {
  background: radial-gradient(
    ellipse,
    rgba(13, 143, 170, 0.05),
    transparent 70%
  );
}
[data-theme="light"] .glass {
  background: rgba(255, 255, 255, 0.88);
}
[data-theme="light"] body {
  background: #ebeef2;
}

/* Ocean Depths */
[data-theme="ocean"] {
  --bg: #071222;
  --bg-card: #0c1d36;
  --bg-card-hover: #12294a;
  --bg-input: #060e1a;
  --bg-elevated: #173456;
  --border: #1a3d6e;
  --border-light: #22508a;
  --border-focus: #38bdf8;
  --text: #e4f0fc;
  --text-secondary: #8ab8de;
  --text-muted: #5889b5;
  --primary: #38bdf8;
  --primary-hover: #5ecbfa;
  --primary-glow: rgba(56, 189, 248, 0.22);
  --secondary: #06b6d4;
  --secondary-hover: #22d3ee;
  --secondary-glow: rgba(6, 182, 212, 0.18);
  --danger: #fb7185;
  --danger-hover: #f43f5e;
  --success: #2dd4bf;
  --success-glow: rgba(45, 212, 191, 0.18);
  --warning: #fbbf24;
  --accent-gradient: linear-gradient(135deg, #38bdf8, #06b6d4, #2dd4bf);
  --card-shadow: 0 4px 24px rgba(0, 8, 24, 0.45), 0 1px 4px rgba(0, 8, 24, 0.3);
}
[data-theme="ocean"] .bg-aurora::before {
  background: radial-gradient(
    ellipse,
    rgba(56, 189, 248, 0.14),
    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: #081210;
  --bg-card: #0e1f1a;
  --bg-card-hover: #152e26;
  --bg-input: #060f0c;
  --bg-elevated: #1a3a30;
  --border: #1e5040;
  --border-light: #286850;
  --border-focus: #34d399;
  --text: #e2f5ee;
  --text-secondary: #82c8a8;
  --text-muted: #58a080;
  --primary: #34d399;
  --primary-hover: #4eeab0;
  --primary-glow: rgba(52, 211, 153, 0.22);
  --secondary: #2dd4bf;
  --secondary-hover: #5eead4;
  --secondary-glow: rgba(45, 212, 191, 0.18);
  --danger: #f87171;
  --danger-hover: #ef4444;
  --success: #4ade80;
  --success-glow: rgba(74, 222, 128, 0.2);
  --warning: #fbbf24;
  --accent-gradient: linear-gradient(135deg, #34d399, #2dd4bf, #4ade80);
  --card-shadow: 0 4px 24px rgba(0, 12, 8, 0.45), 0 1px 4px rgba(0, 12, 8, 0.3);
}
[data-theme="forest"] .bg-aurora::before {
  background: radial-gradient(
    ellipse,
    rgba(52, 211, 153, 0.14),
    transparent 70%
  );
}
[data-theme="forest"] .bg-aurora::after {
  background: radial-gradient(
    ellipse,
    rgba(74, 222, 128, 0.08),
    transparent 70%
  );
}

/* Sunset Ember */
[data-theme="sunset"] {
  --bg: #160b08;
  --bg-card: #221410;
  --bg-card-hover: #30201a;
  --bg-input: #120906;
  --bg-elevated: #3a2820;
  --border: #5c3528;
  --border-light: #744838;
  --border-focus: #fb923c;
  --text: #fef0e6;
  --text-secondary: #d4a898;
  --text-muted: #a07060;
  --primary: #fb923c;
  --primary-hover: #fdae5c;
  --primary-glow: rgba(251, 146, 60, 0.22);
  --secondary: #f87171;
  --secondary-hover: #fca5a5;
  --secondary-glow: rgba(248, 113, 113, 0.18);
  --danger: #ef4444;
  --danger-hover: #dc2626;
  --success: #4ade80;
  --success-glow: rgba(74, 222, 128, 0.18);
  --warning: #fbbf24;
  --accent-gradient: linear-gradient(135deg, #fb923c, #f87171, #f472b6);
  --card-shadow: 0 4px 24px rgba(16, 4, 0, 0.5), 0 1px 4px rgba(16, 4, 0, 0.3);
}
[data-theme="sunset"] .bg-aurora::before {
  background: radial-gradient(
    ellipse,
    rgba(251, 146, 60, 0.14),
    transparent 70%
  );
}
[data-theme="sunset"] .bg-aurora::after {
  background: radial-gradient(
    ellipse,
    rgba(248, 113, 113, 0.1),
    transparent 70%
  );
}

/* Sakura (Cherry Blossom) */
[data-theme="sakura"] {
  --bg: #140a16;
  --bg-card: #1e1228;
  --bg-card-hover: #2a1a38;
  --bg-input: #100812;
  --bg-elevated: #321e44;
  --border: #4e2e60;
  --border-light: #653c7a;
  --border-focus: #f472b6;
  --text: #fce8f4;
  --text-secondary: #d4a0c2;
  --text-muted: #a87098;
  --primary: #f472b6;
  --primary-hover: #f9a8d4;
  --primary-glow: rgba(244, 114, 182, 0.22);
  --secondary: #7ba3d4;
  --secondary-hover: #d8b4fe;
  --secondary-glow: rgba(192, 132, 252, 0.18);
  --danger: #fb7185;
  --danger-hover: #f43f5e;
  --success: #34d399;
  --success-glow: rgba(52, 211, 153, 0.18);
  --warning: #fbbf24;
  --accent-gradient: linear-gradient(135deg, #f472b6, #7ba3d4, #8badc8);
  --card-shadow:
    0 4px 24px rgba(16, 0, 12, 0.5), 0 1px 4px rgba(16, 0, 12, 0.3);
}
[data-theme="sakura"] .bg-aurora::before {
  background: radial-gradient(
    ellipse,
    rgba(244, 114, 182, 0.14),
    transparent 70%
  );
}
[data-theme="sakura"] .bg-aurora::after {
  background: radial-gradient(
    ellipse,
    rgba(192, 132, 252, 0.1),
    transparent 70%
  );
}

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

/* Abyss (Derin Uçurum) — ultra-deep blue-black, cyan accent */
[data-theme="abyss"] {
  --bg: #010306;
  --bg-card: #050b16;
  --bg-card-hover: #0a1424;
  --bg-input: #020610;
  --bg-elevated: #0e1c32;
  --border: #122344;
  --border-light: #183058;
  --border-focus: #22d3ee;
  --text: #d4e8f8;
  --text-secondary: #78aad0;
  --text-muted: #4a80aa;
  --primary: #22d3ee;
  --primary-hover: #4ee0f2;
  --primary-glow: rgba(34, 211, 238, 0.2);
  --secondary: #0ea5e9;
  --secondary-hover: #38bdf8;
  --secondary-glow: rgba(14, 165, 233, 0.15);
  --danger: #fb7185;
  --danger-hover: #f43f5e;
  --success: #2dd4bf;
  --success-glow: rgba(45, 212, 191, 0.15);
  --warning: #fbbf24;
  --accent-gradient: linear-gradient(135deg, #22d3ee, #0ea5e9, #0369a1);
  --card-shadow: 0 4px 24px rgba(0, 0, 0, 0.7), 0 1px 4px rgba(0, 0, 0, 0.5);
}
[data-theme="abyss"] .bg-aurora::before {
  background: radial-gradient(
    ellipse,
    rgba(34, 211, 238, 0.1),
    transparent 70%
  );
}
[data-theme="abyss"] .bg-aurora::after {
  background: radial-gradient(
    ellipse,
    rgba(14, 165, 233, 0.06),
    transparent 70%
  );
}

/* Void (Boşluk) — pure black, neon green accent */
[data-theme="void"] {
  --bg: #000000;
  --bg-card: #0a0a0a;
  --bg-card-hover: #141414;
  --bg-input: #060606;
  --bg-elevated: #1a1a1a;
  --border: #222222;
  --border-light: #2e2e2e;
  --border-focus: #4ade80;
  --text: #e8e8ea;
  --text-secondary: #a1a1a8;
  --text-muted: #6e6e78;
  --primary: #4ade80;
  --primary-hover: #6ee7a0;
  --primary-glow: rgba(74, 222, 128, 0.2);
  --secondary: #34d399;
  --secondary-hover: #5eead4;
  --secondary-glow: rgba(52, 211, 153, 0.15);
  --danger: #f87171;
  --danger-hover: #ef4444;
  --success: #4ade80;
  --success-glow: rgba(74, 222, 128, 0.2);
  --warning: #facc15;
  --accent-gradient: linear-gradient(135deg, #4ade80, #34d399, #22c55e);
  --card-shadow: 0 4px 20px rgba(0, 0, 0, 0.85), 0 1px 4px rgba(0, 0, 0, 0.6);
}
[data-theme="void"] .bg-aurora::before {
  background: radial-gradient(
    ellipse,
    rgba(74, 222, 128, 0.08),
    transparent 70%
  );
}
[data-theme="void"] .bg-aurora::after {
  background: radial-gradient(
    ellipse,
    rgba(52, 211, 153, 0.05),
    transparent 70%
  );
}

/* Obsidian (Obsidyen) — volcanic dark, amber/gold accent */
[data-theme="obsidian"] {
  --bg: #090704;
  --bg-card: #14100a;
  --bg-card-hover: #201a12;
  --bg-input: #0b0906;
  --bg-elevated: #282014;
  --border: #3a2e1e;
  --border-light: #4e3e2a;
  --border-focus: #fbbf24;
  --text: #f5f0e6;
  --text-secondary: #c0aa88;
  --text-muted: #8a7860;
  --primary: #fbbf24;
  --primary-hover: #fcd34d;
  --primary-glow: rgba(251, 191, 36, 0.2);
  --secondary: #f59e0b;
  --secondary-hover: #fbbf24;
  --secondary-glow: rgba(245, 158, 11, 0.15);
  --danger: #f87171;
  --danger-hover: #ef4444;
  --success: #34d399;
  --success-glow: rgba(52, 211, 153, 0.18);
  --warning: #fb923c;
  --accent-gradient: linear-gradient(135deg, #fbbf24, #f59e0b, #d97706);
  --card-shadow: 0 4px 24px rgba(4, 2, 0, 0.55), 0 1px 4px rgba(4, 2, 0, 0.35);
}
[data-theme="obsidian"] .bg-aurora::before {
  background: radial-gradient(
    ellipse,
    rgba(251, 191, 36, 0.1),
    transparent 70%
  );
}
[data-theme="obsidian"] .bg-aurora::after {
  background: radial-gradient(
    ellipse,
    rgba(245, 158, 11, 0.06),
    transparent 70%
  );
}

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

/* Nord (Kuzey) — Nordic steel blue palette */
[data-theme="nord"] {
  --bg: #242933;
  --bg-card: #2e3440;
  --bg-card-hover: #3b4252;
  --bg-input: #20242e;
  --bg-elevated: #434c5e;
  --border: #3b4252;
  --border-light: #4c566a;
  --border-focus: #88c0d0;
  --text: #eceff4;
  --text-secondary: #d8dee9;
  --text-muted: #7b88a1;
  --primary: #88c0d0;
  --primary-hover: #a3d4e0;
  --primary-glow: rgba(136, 192, 208, 0.2);
  --secondary: #81a1c1;
  --secondary-hover: #a3bdd4;
  --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, #b48ead);
  --card-shadow: 0 4px 24px rgba(0, 0, 0, 0.35), 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(180, 142, 173, 0.08),
    transparent 70%
  );
}

/* Ember (Kor Ateşi) — dark with rich red/amber */
[data-theme="ember"] {
  --bg: #12060a;
  --bg-card: #1e0e14;
  --bg-card-hover: #2c161e;
  --bg-input: #0e0408;
  --bg-elevated: #381c24;
  --border: #502830;
  --border-light: #683640;
  --border-focus: #f87171;
  --text: #fce8ec;
  --text-secondary: #e0a0aa;
  --text-muted: #a06872;
  --primary: #f87171;
  --primary-hover: #fca5a5;
  --primary-glow: rgba(248, 113, 113, 0.22);
  --secondary: #fb923c;
  --secondary-hover: #fdae5c;
  --secondary-glow: rgba(251, 146, 60, 0.18);
  --danger: #ef4444;
  --danger-hover: #dc2626;
  --success: #4ade80;
  --success-glow: rgba(74, 222, 128, 0.18);
  --warning: #fbbf24;
  --accent-gradient: linear-gradient(135deg, #f87171, #fb923c, #fbbf24);
  --card-shadow:
    0 4px 24px rgba(12, 0, 2, 0.55), 0 1px 4px rgba(12, 0, 2, 0.35);
}
[data-theme="ember"] .bg-aurora::before {
  background: radial-gradient(
    ellipse,
    rgba(248, 113, 113, 0.12),
    transparent 70%
  );
}
[data-theme="ember"] .bg-aurora::after {
  background: radial-gradient(
    ellipse,
    rgba(251, 146, 60, 0.08),
    transparent 70%
  );
}

/* Amethyst (Ametist) — dark with deep purple/violet */
[data-theme="amethyst"] {
  --bg: #0c0616;
  --bg-card: #150e24;
  --bg-card-hover: #1e1636;
  --bg-input: #0a0512;
  --bg-elevated: #261c42;
  --border: #362660;
  --border-light: #46347a;
  --border-focus: #7ba3d4;
  --text: #f4eaff;
  --text-secondary: #c4a0e0;
  --text-muted: #8a68b0;
  --primary: #7ba3d4;
  --primary-hover: #d8b4fe;
  --primary-glow: rgba(192, 132, 252, 0.22);
  --secondary: #8badc8;
  --secondary-hover: #a3c1e0;
  --secondary-glow: rgba(167, 139, 250, 0.18);
  --danger: #fb7185;
  --danger-hover: #f43f5e;
  --success: #34d399;
  --success-glow: rgba(52, 211, 153, 0.18);
  --warning: #fbbf24;
  --accent-gradient: linear-gradient(135deg, #7ba3d4, #8badc8, #7ba3d4);
  --card-shadow:
    0 4px 24px rgba(8, 0, 18, 0.55), 0 1px 4px rgba(8, 0, 18, 0.35);
}
[data-theme="amethyst"] .bg-aurora::before {
  background: radial-gradient(
    ellipse,
    rgba(192, 132, 252, 0.12),
    transparent 70%
  );
}
[data-theme="amethyst"] .bg-aurora::after {
  background: radial-gradient(
    ellipse,
    rgba(167, 139, 250, 0.08),
    transparent 70%
  );
}

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

/* Slate (Kayrak Taşı) — medium blue-gray */
[data-theme="slate"] {
  --bg: #283040;
  --bg-card: #334155;
  --bg-card-hover: #3e5068;
  --bg-input: #222a38;
  --bg-elevated: #475a72;
  --border: #4a5e78;
  --border-light: #5a7090;
  --border-focus: #60a5fa;
  --text: #f1f5f9;
  --text-secondary: #c4d0de;
  --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: #ef4444;
  --success: #4ade80;
  --success-glow: rgba(74, 222, 128, 0.18);
  --warning: #fbbf24;
  --accent-gradient: linear-gradient(135deg, #60a5fa, #38bdf8, #7ba3d4);
  --card-shadow: 0 4px 20px rgba(0, 0, 8, 0.3), 0 1px 4px rgba(0, 0, 8, 0.18);
}
[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: #2a2220;
  --bg-card: #382e2a;
  --bg-card-hover: #463a34;
  --bg-input: #241e1a;
  --bg-elevated: #524440;
  --border: #5e4e46;
  --border-light: #705e54;
  --border-focus: #fbbf24;
  --text: #faf4ee;
  --text-secondary: #d0b898;
  --text-muted: #9a7e64;
  --primary: #fbbf24;
  --primary-hover: #fcd34d;
  --primary-glow: rgba(251, 191, 36, 0.2);
  --secondary: #f59e0b;
  --secondary-hover: #fbbf24;
  --secondary-glow: rgba(245, 158, 11, 0.15);
  --danger: #f87171;
  --danger-hover: #ef4444;
  --success: #4ade80;
  --success-glow: rgba(74, 222, 128, 0.18);
  --warning: #fb923c;
  --accent-gradient: linear-gradient(135deg, #fbbf24, #f59e0b, #ea580c);
  --card-shadow: 0 4px 20px rgba(15, 8, 2, 0.35), 0 1px 4px rgba(15, 8, 2, 0.2);
}
[data-theme="copper"] .bg-aurora::before {
  background: radial-gradient(
    ellipse,
    rgba(251, 191, 36, 0.1),
    transparent 70%
  );
}
[data-theme="copper"] .bg-aurora::after {
  background: radial-gradient(
    ellipse,
    rgba(245, 158, 11, 0.06),
    transparent 70%
  );
}

/* Storm (Fırtına) — medium gray-purple */
[data-theme="storm"] {
  --bg: #222030;
  --bg-card: #2e2c40;
  --bg-card-hover: #3a3852;
  --bg-input: #1c1a28;
  --bg-elevated: #44425e;
  --border: #4a4866;
  --border-light: #5c5a7a;
  --border-focus: #8badc8;
  --text: #f0edf8;
  --text-secondary: #bcb4d4;
  --text-muted: #807898;
  --primary: #8badc8;
  --primary-hover: #a3c1e0;
  --primary-glow: rgba(167, 139, 250, 0.2);
  --secondary: #7ba3d4;
  --secondary-hover: #a5b4fc;
  --secondary-glow: rgba(129, 140, 248, 0.15);
  --danger: #f87171;
  --danger-hover: #ef4444;
  --success: #4ade80;
  --success-glow: rgba(74, 222, 128, 0.18);
  --warning: #fbbf24;
  --accent-gradient: linear-gradient(135deg, #8badc8, #7ba3d4, #5d87bf);
  --card-shadow: 0 4px 20px rgba(0, 0, 8, 0.35), 0 1px 4px rgba(0, 0, 8, 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: #e8edf4;
  --bg-card: #f8f9fc;
  --bg-card-hover: #eff2f8;
  --bg-input: #dce2ee;
  --bg-elevated: #f4f6fa;
  --border: #c0c8d8;
  --border-light: #d6dce8;
  --border-focus: #3b82f6;
  --text: #1a2438;
  --text-secondary: #44546e;
  --text-muted: #6b7d9a;
  --primary: #3b82f6;
  --primary-hover: #2563eb;
  --primary-glow: rgba(59, 130, 246, 0.14);
  --secondary: #0ea5e9;
  --secondary-hover: #0284c7;
  --secondary-glow: rgba(14, 165, 233, 0.1);
  --danger: #dc2626;
  --danger-hover: #b91c1c;
  --success: #16a34a;
  --success-glow: rgba(22, 163, 74, 0.12);
  --warning: #d97706;
  --accent-gradient: linear-gradient(135deg, #3b82f6, #0ea5e9, #06b6d4);
  --card-shadow:
    0 1px 3px rgba(0, 10, 30, 0.06), 0 4px 16px rgba(0, 10, 30, 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(248, 249, 252, 0.9);
}
[data-theme="snow"] body {
  background: #e8edf4;
}

/* Cream (Krem) — warm light, golden accent */
[data-theme="cream"] {
  --bg: #f2ede4;
  --bg-card: #faf8f4;
  --bg-card-hover: #f2ede6;
  --bg-input: #e8e2d6;
  --bg-elevated: #f7f4ef;
  --border: #d4c8b8;
  --border-light: #e2d8ca;
  --border-focus: #b45309;
  --text: #2a2214;
  --text-secondary: #5c4e3a;
  --text-muted: #7e6e58;
  --primary: #b45309;
  --primary-hover: #92400e;
  --primary-glow: rgba(180, 83, 9, 0.14);
  --secondary: #d97706;
  --secondary-hover: #b45309;
  --secondary-glow: rgba(217, 119, 6, 0.1);
  --danger: #dc2626;
  --danger-hover: #b91c1c;
  --success: #16a34a;
  --success-glow: rgba(22, 163, 74, 0.12);
  --warning: #d97706;
  --accent-gradient: linear-gradient(135deg, #b45309, #d97706, #ea580c);
  --card-shadow:
    0 1px 3px rgba(30, 20, 0, 0.06), 0 4px 16px rgba(30, 20, 0, 0.03);
}
[data-theme="cream"] .bg-aurora::before {
  background: radial-gradient(ellipse, rgba(180, 83, 9, 0.06), transparent 70%);
}
[data-theme="cream"] .bg-aurora::after {
  background: radial-gradient(
    ellipse,
    rgba(217, 119, 6, 0.04),
    transparent 70%
  );
}
[data-theme="cream"] .glass {
  background: rgba(250, 248, 244, 0.9);
}
[data-theme="cream"] body {
  background: #f2ede4;
}

/* Mint (Nane) — fresh light green */
[data-theme="mint"] {
  --bg: #e4f2ec;
  --bg-card: #f4faf7;
  --bg-card-hover: #e8f3ed;
  --bg-input: #d6e8de;
  --bg-elevated: #eef7f2;
  --border: #b0d4c2;
  --border-light: #c8e2d6;
  --border-focus: #047857;
  --text: #142820;
  --text-secondary: #34584a;
  --text-muted: #4e7264;
  --primary: #047857;
  --primary-hover: #065f46;
  --primary-glow: rgba(4, 120, 87, 0.15);
  --secondary: #0d9488;
  --secondary-hover: #0f766e;
  --secondary-glow: rgba(13, 148, 136, 0.12);
  --danger: #dc2626;
  --danger-hover: #b91c1c;
  --success: #059669;
  --success-glow: rgba(5, 150, 105, 0.12);
  --warning: #d97706;
  --accent-gradient: linear-gradient(135deg, #047857, #0d9488, #059669);
  --card-shadow:
    0 1px 3px rgba(0, 15, 5, 0.06), 0 4px 16px rgba(0, 15, 5, 0.03);
}
[data-theme="mint"] .bg-aurora::before {
  background: radial-gradient(ellipse, rgba(4, 120, 87, 0.06), transparent 70%);
}
[data-theme="mint"] .bg-aurora::after {
  background: radial-gradient(
    ellipse,
    rgba(13, 148, 136, 0.04),
    transparent 70%
  );
}
[data-theme="mint"] .glass {
  background: rgba(244, 250, 247, 0.9);
}
[data-theme="mint"] body {
  background: #e4f2ec;
}

/* ── Charcoal (Kömür) ─────────────────────────────────────────── */
[data-theme="charcoal"] {
  --bg: #141416;
  --bg-card: #222226;
  --bg-card-hover: #2e2e32;
  --bg-input: #0e0e10;
  --bg-elevated: #2a2a2e;
  --border: #3c3c40;
  --border-light: #4a4a4e;
  --border-focus: #7c8aff;
  --text: #ededf0;
  --text-secondary: #a0a0a8;
  --text-muted: #6e6e78;
  --primary: #7c8aff;
  --primary-hover: #9ba5ff;
  --primary-glow: rgba(124, 138, 255, 0.2);
  --secondary: #64d2ff;
  --secondary-hover: #8adfff;
  --secondary-glow: rgba(100, 210, 255, 0.15);
  --danger: #ff453a;
  --danger-hover: #ff6961;
  --success: #30d158;
  --success-glow: rgba(48, 209, 88, 0.2);
  --warning: #ffd60a;
  --accent-gradient: linear-gradient(135deg, #7c8aff, #64d2ff, #5e5ce6);
  --card-shadow: 0 4px 24px rgba(0, 0, 0, 0.55), 0 1px 4px rgba(0, 0, 0, 0.35);
}
[data-theme="charcoal"] .bg-aurora::before {
  background: radial-gradient(
    ellipse,
    rgba(124, 138, 255, 0.08),
    transparent 70%
  );
}
[data-theme="charcoal"] .bg-aurora::after {
  background: radial-gradient(
    ellipse,
    rgba(100, 210, 255, 0.06),
    transparent 70%
  );
}
[data-theme="charcoal"] .glass {
  background: rgba(34, 34, 38, 0.88);
}

/* ── Mocha ────────────────────────────────────────────────────── */
[data-theme="mocha"] {
  --bg: #171310;
  --bg-card: #272018;
  --bg-card-hover: #352b20;
  --bg-input: #100d0a;
  --bg-elevated: #302820;
  --border: #443828;
  --border-light: #584838;
  --border-focus: #ddb892;
  --text: #f2e8da;
  --text-secondary: #c8b8a0;
  --text-muted: #9a8a74;
  --primary: #ddb892;
  --primary-hover: #eacba8;
  --primary-glow: rgba(221, 184, 146, 0.22);
  --secondary: #bf8a52;
  --secondary-hover: #d4a06a;
  --secondary-glow: rgba(191, 138, 82, 0.18);
  --danger: #e85d4a;
  --danger-hover: #f07b6b;
  --success: #7ab648;
  --success-glow: rgba(122, 182, 72, 0.2);
  --warning: #e8a830;
  --accent-gradient: linear-gradient(135deg, #ddb892, #bf8a52, #8b5e34);
  --card-shadow:
    0 4px 24px rgba(10, 6, 2, 0.55), 0 1px 4px rgba(10, 6, 2, 0.35);
}
[data-theme="mocha"] .bg-aurora::before {
  background: radial-gradient(
    ellipse,
    rgba(221, 184, 146, 0.12),
    transparent 70%
  );
}
[data-theme="mocha"] .bg-aurora::after {
  background: radial-gradient(
    ellipse,
    rgba(191, 138, 82, 0.08),
    transparent 70%
  );
}
[data-theme="mocha"] .glass {
  background: rgba(39, 32, 24, 0.88);
}

/* ── Aurora (Kutup Işığı) ─────────────────────────────────────── */
[data-theme="aurora"] {
  --bg: #080b12;
  --bg-card: #101420;
  --bg-card-hover: #181e30;
  --bg-input: #060810;
  --bg-elevated: #141a2a;
  --border: #1e2440;
  --border-light: #283050;
  --border-focus: #5eead4;
  --text: #e8f0f8;
  --text-secondary: #98b4cc;
  --text-muted: #6882a4;
  --primary: #5eead4;
  --primary-hover: #7df2e0;
  --primary-glow: rgba(94, 234, 212, 0.22);
  --secondary: #7ba3d4;
  --secondary-hover: #d4a5fd;
  --secondary-glow: rgba(192, 132, 252, 0.18);
  --danger: #f87171;
  --danger-hover: #fca5a5;
  --success: #34d399;
  --success-glow: rgba(52, 211, 153, 0.2);
  --warning: #fbbf24;
  --accent-gradient: linear-gradient(135deg, #5eead4, #7ba3d4, #f472b6);
  --card-shadow: 0 4px 24px rgba(2, 2, 10, 0.6), 0 1px 4px rgba(2, 2, 10, 0.35);
}
[data-theme="aurora"] .bg-aurora::before {
  background: radial-gradient(
    ellipse,
    rgba(94, 234, 212, 0.14),
    transparent 70%
  );
}
[data-theme="aurora"] .bg-aurora::after {
  background: radial-gradient(
    ellipse,
    rgba(192, 132, 252, 0.1),
    transparent 70%
  );
}
[data-theme="aurora"] .glass {
  background: rgba(16, 20, 32, 0.9);
}

/* ── Dracula ──────────────────────────────────────────────────── */
[data-theme="dracula"] {
  --bg: #1e1f29;
  --bg-card: #2a2c3a;
  --bg-card-hover: #353848;
  --bg-input: #181920;
  --bg-elevated: #383a4e;
  --border: #3a3d52;
  --border-light: #4a4d68;
  --border-focus: #bd93f9;
  --text: #f8f8f2;
  --text-secondary: #bfbdb8;
  --text-muted: #6272a4;
  --primary: #bd93f9;
  --primary-hover: #d4b4fc;
  --primary-glow: rgba(189, 147, 249, 0.24);
  --secondary: #ff79c6;
  --secondary-hover: #ff9cd6;
  --secondary-glow: rgba(255, 121, 198, 0.2);
  --danger: #ff5555;
  --danger-hover: #ff7777;
  --success: #50fa7b;
  --success-glow: rgba(80, 250, 123, 0.22);
  --warning: #f1fa8c;
  --accent-gradient: linear-gradient(135deg, #bd93f9, #ff79c6, #8be9fd);
  --card-shadow:
    0 4px 24px rgba(8, 8, 16, 0.55), 0 1px 4px rgba(8, 8, 16, 0.35);
}
[data-theme="dracula"] .bg-aurora::before {
  background: radial-gradient(
    ellipse,
    rgba(189, 147, 249, 0.14),
    transparent 70%
  );
}
[data-theme="dracula"] .bg-aurora::after {
  background: radial-gradient(
    ellipse,
    rgba(255, 121, 198, 0.1),
    transparent 70%
  );
}
[data-theme="dracula"] .glass {
  background: rgba(42, 44, 58, 0.9);
}

/* ── Rose Gold ────────────────────────────────────────────────── */
[data-theme="rosegold"] {
  --bg: #1a1216;
  --bg-card: #261c22;
  --bg-card-hover: #322530;
  --bg-input: #140e12;
  --bg-elevated: #2c2228;
  --border: #442e38;
  --border-light: #5a3c4a;
  --border-focus: #e8a4b8;
  --text: #f4e8ec;
  --text-secondary: #ccb0ba;
  --text-muted: #9a7e8a;
  --primary: #e8a4b8;
  --primary-hover: #f0bcc8;
  --primary-glow: rgba(232, 164, 184, 0.22);
  --secondary: #d4789a;
  --secondary-hover: #e090aa;
  --secondary-glow: rgba(212, 120, 154, 0.18);
  --danger: #ef5350;
  --danger-hover: #f47673;
  --success: #66bb6a;
  --success-glow: rgba(102, 187, 106, 0.2);
  --warning: #ffb74d;
  --accent-gradient: linear-gradient(135deg, #e8a4b8, #d4789a, #b0506e);
  --card-shadow:
    0 4px 24px rgba(10, 4, 6, 0.55), 0 1px 4px rgba(10, 4, 6, 0.35);
}
[data-theme="rosegold"] .bg-aurora::before {
  background: radial-gradient(
    ellipse,
    rgba(232, 164, 184, 0.12),
    transparent 70%
  );
}
[data-theme="rosegold"] .bg-aurora::after {
  background: radial-gradient(
    ellipse,
    rgba(212, 120, 154, 0.08),
    transparent 70%
  );
}
[data-theme="rosegold"] .glass {
  background: rgba(38, 28, 34, 0.9);
}

/* ── Cyberpunk ────────────────────────────────────────────────── */
[data-theme="cyberpunk"] {
  --bg: #0a0a14;
  --bg-card: #141428;
  --bg-card-hover: #1e1e3a;
  --bg-input: #08080e;
  --bg-elevated: #1a1a30;
  --border: #2a2a50;
  --border-light: #3a3a66;
  --border-focus: #00f0ff;
  --text: #e0f4f8;
  --text-secondary: #a0c8d4;
  --text-muted: #607888;
  --primary: #00f0ff;
  --primary-hover: #40f8ff;
  --primary-glow: rgba(0, 240, 255, 0.25);
  --secondary: #ff00aa;
  --secondary-hover: #ff44cc;
  --secondary-glow: rgba(255, 0, 170, 0.2);
  --danger: #ff3333;
  --danger-hover: #ff6666;
  --success: #00ff88;
  --success-glow: rgba(0, 255, 136, 0.2);
  --warning: #ffe600;
  --accent-gradient: linear-gradient(135deg, #00f0ff, #ff00aa, #ffe600);
  --card-shadow: 0 4px 24px rgba(0, 0, 10, 0.65), 0 1px 4px rgba(0, 0, 10, 0.4);
}
[data-theme="cyberpunk"] .bg-aurora::before {
  background: radial-gradient(
    ellipse,
    rgba(0, 240, 255, 0.14),
    transparent 70%
  );
}
[data-theme="cyberpunk"] .bg-aurora::after {
  background: radial-gradient(ellipse, rgba(255, 0, 170, 0.1), transparent 70%);
}
[data-theme="cyberpunk"] .glass {
  background: rgba(20, 20, 40, 0.92);
}

/* ── Lavender ─────────────────────────────────────────────────── */
[data-theme="lavender"] {
  --bg: #f0ecf6;
  --bg-card: #faf8fc;
  --bg-card-hover: #f0ecf6;
  --bg-input: #e4dced;
  --bg-elevated: #f4f0f8;
  --border: #cfc4dc;
  --border-light: #ded4ea;
  --border-focus: #7c4dff;
  --text: #1e1430;
  --text-secondary: #4a3868;
  --text-muted: #7a6898;
  --primary: #7c4dff;
  --primary-hover: #6234cc;
  --primary-glow: rgba(124, 77, 255, 0.14);
  --secondary: #ba68c8;
  --secondary-hover: #a050b0;
  --secondary-glow: rgba(186, 104, 200, 0.12);
  --danger: #e53935;
  --danger-hover: #c62828;
  --success: #43a047;
  --success-glow: rgba(67, 160, 71, 0.12);
  --warning: #fb8c00;
  --accent-gradient: linear-gradient(135deg, #7c4dff, #ba68c8, #e040fb);
  --card-shadow:
    0 1px 3px rgba(20, 10, 40, 0.06), 0 4px 16px rgba(20, 10, 40, 0.04);
}
[data-theme="lavender"] .bg-aurora::before {
  background: radial-gradient(
    ellipse,
    rgba(124, 77, 255, 0.06),
    transparent 70%
  );
}
[data-theme="lavender"] .bg-aurora::after {
  background: radial-gradient(
    ellipse,
    rgba(186, 104, 200, 0.04),
    transparent 70%
  );
}
[data-theme="lavender"] .glass {
  background: rgba(250, 248, 252, 0.92);
}
[data-theme="lavender"] body {
  background: #e4dced;
}

/* ── Emerald ──────────────────────────────────────────────────── */
[data-theme="emerald"] {
  --bg: #081210;
  --bg-card: #0e1e1a;
  --bg-card-hover: #162a24;
  --bg-input: #060e0c;
  --bg-elevated: #1a2e28;
  --border: #1e3830;
  --border-light: #2a4a40;
  --border-focus: #34d399;
  --text: #e0f4ee;
  --text-secondary: #a0c8ba;
  --text-muted: #6a9888;
  --primary: #34d399;
  --primary-hover: #4de8aa;
  --primary-glow: rgba(52, 211, 153, 0.22);
  --secondary: #2dd4bf;
  --secondary-hover: #5eead4;
  --secondary-glow: rgba(45, 212, 191, 0.18);
  --danger: #f87171;
  --danger-hover: #fca5a5;
  --success: #4ade80;
  --success-glow: rgba(74, 222, 128, 0.2);
  --warning: #fbbf24;
  --accent-gradient: linear-gradient(135deg, #34d399, #2dd4bf, #06b6d4);
  --card-shadow: 0 4px 24px rgba(2, 6, 4, 0.55), 0 1px 4px rgba(2, 6, 4, 0.35);
}
[data-theme="emerald"] .bg-aurora::before {
  background: radial-gradient(
    ellipse,
    rgba(52, 211, 153, 0.14),
    transparent 70%
  );
}
[data-theme="emerald"] .bg-aurora::after {
  background: radial-gradient(
    ellipse,
    rgba(45, 212, 191, 0.1),
    transparent 70%
  );
}
[data-theme="emerald"] .glass {
  background: rgba(14, 30, 26, 0.9);
}

/* ── Honey ────────────────────────────────────────────────────── */
[data-theme="honey"] {
  --bg: #161208;
  --bg-card: #241e10;
  --bg-card-hover: #30281a;
  --bg-input: #100c06;
  --bg-elevated: #2a2214;
  --border: #443818;
  --border-light: #584a28;
  --border-focus: #f59e0b;
  --text: #f8f0e0;
  --text-secondary: #d0c0a0;
  --text-muted: #9a8a6a;
  --primary: #f59e0b;
  --primary-hover: #fbbf24;
  --primary-glow: rgba(245, 158, 11, 0.22);
  --secondary: #d97706;
  --secondary-hover: #ea8f1a;
  --secondary-glow: rgba(217, 119, 6, 0.18);
  --danger: #ef4444;
  --danger-hover: #f87171;
  --success: #65a30d;
  --success-glow: rgba(101, 163, 13, 0.2);
  --warning: #fbbf24;
  --accent-gradient: linear-gradient(135deg, #f59e0b, #d97706, #b45309);
  --card-shadow: 0 4px 24px rgba(8, 6, 2, 0.55), 0 1px 4px rgba(8, 6, 2, 0.35);
}
[data-theme="honey"] .bg-aurora::before {
  background: radial-gradient(
    ellipse,
    rgba(245, 158, 11, 0.14),
    transparent 70%
  );
}
[data-theme="honey"] .bg-aurora::after {
  background: radial-gradient(
    ellipse,
    rgba(217, 119, 6, 0.08),
    transparent 70%
  );
}
[data-theme="honey"] .glass {
  background: rgba(36, 30, 16, 0.9);
}

/* ── Ice ──────────────────────────────────────────────────────── */
[data-theme="ice"] {
  --bg: #f0f6fa;
  --bg-card: #f8fbfd;
  --bg-card-hover: #eef4f9;
  --bg-input: #e2edf6;
  --bg-elevated: #f2f7fc;
  --border: #c8d8e8;
  --border-light: #dae6f0;
  --border-focus: #2196f3;
  --text: #0d2840;
  --text-secondary: #3a5a78;
  --text-muted: #6888a8;
  --primary: #2196f3;
  --primary-hover: #1976d2;
  --primary-glow: rgba(33, 150, 243, 0.14);
  --secondary: #00bcd4;
  --secondary-hover: #0097a7;
  --secondary-glow: rgba(0, 188, 212, 0.12);
  --danger: #e53935;
  --danger-hover: #c62828;
  --success: #43a047;
  --success-glow: rgba(67, 160, 71, 0.12);
  --warning: #ff9800;
  --accent-gradient: linear-gradient(135deg, #2196f3, #00bcd4, #26c6da);
  --card-shadow:
    0 1px 3px rgba(0, 20, 50, 0.06), 0 4px 16px rgba(0, 20, 50, 0.04);
}
[data-theme="ice"] .bg-aurora::before {
  background: radial-gradient(
    ellipse,
    rgba(33, 150, 243, 0.06),
    transparent 70%
  );
}
[data-theme="ice"] .bg-aurora::after {
  background: radial-gradient(
    ellipse,
    rgba(0, 188, 212, 0.04),
    transparent 70%
  );
}
[data-theme="ice"] .glass {
  background: rgba(248, 251, 253, 0.92);
}
[data-theme="ice"] body {
  background: #e2edf6;
}

/* ── 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;
}
/* Harden panels against background image bleed-through */
body[data-theme-bg] .users-panel {
  background: rgba(8, 11, 20, 0.75);
  border-left-color: rgba(255, 255, 255, 0.06);
}
body[data-theme-bg] .users-panel-header {
  background: rgba(0, 0, 0, 0.15);
}
body[data-theme-bg] .user-avatar .online-dot,
body[data-theme-bg] .user-avatar .offline-dot,
body[data-theme-bg] .user-avatar .status-dot {
  border-color: rgba(8, 11, 20, 0.95);
}

/* ── 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-fullscreen .theme-picker-body {
  padding: 0;
}
.theme-picker-fullscreen .us-main-content {
  max-width: none;
}

/* ── Theme Preview Panel ───────────────────────── */
.theme-preview-panel {
  width: 320px;
  flex-shrink: 0;
  background: rgba(8, 11, 22, 0.96);
  border-left: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.theme-preview-header {
  padding: 22px 20px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.theme-preview-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.4px;
  color: rgba(255, 255, 255, 0.35);
}
.theme-preview-content {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
}

/* Preview mock components */
.tp-mock-section {
  margin-bottom: 16px;
}
.tp-mock-section-label {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-muted, rgba(255, 255, 255, 0.35));
  margin-bottom: 8px;
}
.tp-mock-card {
  background: var(--bg-card, #0f1323);
  border: 1px solid var(--border, rgba(255, 255, 255, 0.08));
  border-radius: 10px;
  padding: 12px;
  margin-bottom: 8px;
  transition:
    background 0.2s,
    border-color 0.2s;
}
.tp-mock-card:hover {
  background: var(--bg-card-hover, #131834);
  border-color: var(--border-light, rgba(255, 255, 255, 0.12));
}
.tp-mock-msg {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.tp-mock-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  flex-shrink: 0;
}
.tp-mock-msg-body {
  min-width: 0;
  flex: 1;
}
.tp-mock-username {
  font-size: 12px;
  font-weight: 700;
  color: var(--primary, #5d87bf);
}
.tp-mock-time {
  font-size: 10px;
  color: var(--text-muted, rgba(255, 255, 255, 0.35));
  margin-left: 6px;
}
.tp-mock-text {
  font-size: 12px;
  color: var(--text, #e2e8f0);
  margin-top: 2px;
  line-height: 1.4;
}
.tp-mock-input {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-input, #0a0e1a);
  border: 1px solid var(--border, rgba(255, 255, 255, 0.08));
  border-radius: 8px;
  padding: 8px 12px;
  margin-top: 8px;
}
.tp-mock-input-text {
  font-size: 12px;
  color: var(--text-muted, rgba(255, 255, 255, 0.35));
  flex: 1;
}
.tp-mock-btn-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.tp-mock-btn {
  padding: 6px 14px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  border: none;
  cursor: default;
  pointer-events: none;
  transition:
    background 0.2s,
    color 0.2s;
}
.tp-mock-btn.primary {
  background: var(--primary, #5d87bf);
  color: #fff;
}
.tp-mock-btn.secondary {
  background: var(--secondary, #3b4f6a);
  color: #fff;
}
.tp-mock-btn.danger {
  background: var(--danger, #ef4444);
  color: #fff;
}
.tp-mock-btn.success {
  background: var(--success, #22c55e);
  color: #fff;
}
.tp-mock-btn.warning {
  background: var(--warning, #f59e0b);
  color: #000;
}
.tp-mock-btn.outline {
  background: transparent;
  color: var(--text-secondary, rgba(255, 255, 255, 0.6));
  border: 1px solid var(--border, rgba(255, 255, 255, 0.08));
}
.tp-mock-sidebar {
  background: var(--bg, #0c1525);
  border: 1px solid var(--border, rgba(255, 255, 255, 0.08));
  border-radius: 10px;
  padding: 10px;
}
.tp-mock-channel {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 6px;
  font-size: 12px;
  color: var(--text-secondary, rgba(255, 255, 255, 0.6));
  transition: background 0.15s;
}
.tp-mock-channel.active {
  background: rgba(93, 135, 191, 0.13);
  color: var(--text, #e2e8f0);
}
.tp-mock-channel-icon {
  width: 16px;
  height: 16px;
  opacity: 0.5;
}
.tp-mock-channel.active .tp-mock-channel-icon {
  opacity: 1;
  color: var(--primary, #5d87bf);
}
.tp-mock-elevated {
  background: var(--bg-elevated, #111631);
  border: 1px solid var(--border, rgba(255, 255, 255, 0.08));
  border-radius: 10px;
  padding: 12px;
}
.tp-mock-toast {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 600;
}
.tp-mock-toast.success {
  background: rgba(34, 197, 94, 0.15);
  color: var(--success, #22c55e);
  border: 1px solid rgba(34, 197, 94, 0.25);
}
.tp-mock-toast.danger {
  background: rgba(239, 68, 68, 0.15);
  color: var(--danger, #ef4444);
  border: 1px solid rgba(239, 68, 68, 0.25);
}
.tp-mock-toast.warning {
  background: rgba(245, 158, 11, 0.15);
  color: var(--warning, #f59e0b);
  border: 1px solid rgba(245, 158, 11, 0.25);
}
.tp-mock-color-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.tp-mock-color-swatch {
  width: 20px;
  height: 20px;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  flex-shrink: 0;
}
.tp-mock-color-label {
  font-size: 10px;
  color: var(--text-muted, rgba(255, 255, 255, 0.35));
}
.tp-mock-color-value {
  font-size: 10px;
  font-family: monospace;
  color: var(--text-secondary, rgba(255, 255, 255, 0.55));
  margin-left: auto;
}

/* Hide preview on small screens */
@media (max-width: 1000px) {
  .theme-preview-panel {
    display: none;
  }
}

.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;
  z-index: 2;
}
.theme-card-badge-new {
  background: linear-gradient(135deg, #22c55e, #16a34a);
  right: auto;
  left: 6px;
}
.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;
}

/* ── 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);
  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);
}
.toast-message {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.4;
  word-break: break-word;
}
.toast-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  background: var(--primary);
  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%;
  }
}

/* ── Error report toast with action buttons ────────────────────── */
.toast.toast-with-action {
  cursor: default;
  max-width: 400px;
}
.toast.toast-with-action:hover {
  transform: none;
}
.toast-actions {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}
.toast-report-btn {
  background: var(--primary, #5d87bf);
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 5px 14px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
}
.toast-report-btn:hover {
  background: var(--primary-hover, #456b8f);
}
.toast-dismiss-btn {
  background: transparent;
  color: var(--text-muted, #94a3b8);
  border: 1px solid var(--border-light, rgba(255, 255, 255, 0.1));
  border-radius: 6px;
  padding: 5px 14px;
  font-size: 12px;
  cursor: pointer;
  transition:
    background 0.2s,
    color 0.2s;
}
.toast-dismiss-btn:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text, #e2e8f0);
}

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

/* ── User status indicator in user lists ───────────────────────── */

/* ── 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 ───────────────── */

/* ── Voice controls conditional ────────────────────────────────── */

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

/* Sidebar scroll area — thin scrollbar */
.sidebar-scroll::-webkit-scrollbar {
  width: 3px;
}
.sidebar-scroll::-webkit-scrollbar-track {
  background: transparent;
}
.sidebar-scroll::-webkit-scrollbar-thumb {
  background: rgba(93, 135, 191, 0.15);
  border-radius: 3px;
}
.sidebar-scroll::-webkit-scrollbar-thumb:hover {
  background: rgba(93, 135, 191, 0.3);
}
.sidebar-scroll {
  scrollbar-width: thin;
  scrollbar-color: rgba(93, 135, 191, 0.15) transparent;
}

/* ── 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);
  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);
}
.welcome-feature-card p {
  font-size: 11.5px;
  color: var(--text-muted);
  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 rgba(10, 13, 24, 0.9);
  border-radius: 50%;
}
.user-avatar {
  position: relative;
}

/* ── DM Read Receipt indicators ────────────────────────────────── */
.dm-msg-time.dm-sent {
  color: var(--text-muted);
}
.dm-msg-time.dm-read {
  color: #60a5fa;
  text-shadow: 0 0 8px rgba(96, 165, 250, 0.2);
}

/* ── Sound Settings Dropdown ───────────────────────────────────── */
.sound-toggle-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 8px 12px;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
  user-select: none;
  border-radius: 8px;
  min-height: 36px;
  transition: background 0.15s;
}
.sound-toggle-label {
  color: var(--text-secondary);
  font-weight: 500;
}
.sound-toggle-row:hover {
  background: rgba(255, 255, 255, 0.03);
}
.sound-toggle-row input[type="checkbox"] {
  accent-color: var(--primary);
  width: 16px;
  height: 16px;
  cursor: pointer;
  flex-shrink: 0;
}

/* ── 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(93, 135, 191, 0.15);
}
.emoji-ac-emoji {
  font-size: 20px;
  width: 28px;
  text-align: center;
  flex-shrink: 0;
}
.emoji-ac-lottie {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 24px;
  font-size: 14px;
}
.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(93, 135, 191, 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(93, 135, 191, 0.1);
  color: var(--primary);
}
.command-ac-info {
  flex: 1;
  min-width: 0;
}
.command-ac-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}
.command-ac-name .cmd-slash {
  color: var(--primary);
  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 */
[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);
  color: var(--primary);
}
@keyframes ptt-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(93, 135, 191, 0.4);
  }
  50% {
    box-shadow: 0 0 0 6px rgba(93, 135, 191, 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: 200;
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.3);
  pointer-events: auto;
}
.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(93, 135, 191, 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;
}

/* ── Entertainment Panel (Tabs: Müzik / TV / Bağlantı) ─────────── */
.entertainment-panel {
  border-top: 1px solid var(--border);
}

.entertainment-tabs {
  display: flex;
  gap: 0;
  background: rgba(8, 11, 20, 0.5);
  border-bottom: 1px solid var(--border);
}

.ent-tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 6px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  border-bottom: 2px solid transparent;
  position: relative;
}

.ent-tab .icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.ent-tab:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.04);
}

.ent-tab.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
}

.ent-tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--primary);
}

.ent-tab-badge.active-dot {
  background: #4caf50;
  animation: pulse-dot 2s infinite;
}

@keyframes pulse-dot {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.4;
  }
}

.entertainment-body {
  position: relative;
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}

.ent-tab-content {
  display: none;
  padding: 0;
}

.ent-tab-content.active {
  display: block;
}

/* ── Müzik Botu (inside entertainment tab) ────────────────────── */
.music-bot-panel-inner {
  padding: 12px;
}

.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);
}

/* ── TV Panel (inside entertainment tab) ──────────────────────── */
.tv-panel-inner {
  padding: 12px;
}
.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(93, 135, 191, 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(93, 135, 191, 0.08);
  border: 1px solid rgba(93, 135, 191, 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(93, 135, 191, 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);
  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);
  border: 2px solid var(--bg-card);
  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);
  border: 2px solid var(--bg-card);
  cursor: pointer;
}
.music-volume-value {
  font-size: 0.72rem;
  color: var(--text-muted);
  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(93, 135, 191, 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;
}

/* ══════════════════════════════════════════════════════════════════
   TV (YouTube Ortak İzleme) Paneli
   ══════════════════════════════════════════════════════════════════ */
.tv-panel {
  margin: 10px 12px 12px;
  padding: 16px;
  background: rgba(15, 19, 37, 0.7);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.tv-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 10px;
}
.tv-viewer-badge,
.ss-viewer-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 10px;
  background: rgba(93, 135, 191, 0.2);
  color: var(--primary);
  font-size: 11px;
  font-weight: 600;
  margin-left: auto;
}
.tv-search-row {
  display: flex;
  gap: 6px;
  margin-bottom: 8px;
}
.tv-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;
}
.tv-search-row input:focus {
  border-color: var(--primary);
}
.tv-search-results {
  max-height: 220px;
  overflow-y: auto;
  margin-bottom: 8px;
}
.tv-results-header {
  padding: 8px 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
}
.tv-result-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 6px;
  border-radius: var(--radius-sm);
  transition: background 0.15s;
}
.tv-result-item:hover {
  background: rgba(93, 135, 191, 0.1);
}
.tv-result-thumb {
  width: 64px;
  height: 48px;
  border-radius: 4px;
  object-fit: cover;
  flex-shrink: 0;
  background: #1a1e36;
}
.tv-result-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.tv-result-title {
  font-size: 13px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tv-result-meta {
  font-size: 11px;
  color: var(--text-muted);
}
.tv-play-btn {
  font-size: 12px;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: var(--radius-sm);
  background: #ef4444;
  color: #fff;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition:
    background 0.15s,
    transform 0.1s;
}
.tv-play-btn:hover {
  background: #dc2626;
  transform: scale(1.05);
}
.tv-loading {
  padding: 12px;
  text-align: center;
  font-size: 13px;
  color: var(--text-muted);
}
/* TV Now Playing */
.tv-now-playing {
  padding: 10px;
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.2);
  border-radius: var(--radius-sm);
  margin-bottom: 8px;
}
.tv-np-info {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.tv-np-thumb {
  width: 80px;
  height: 60px;
  border-radius: 4px;
  object-fit: cover;
  flex-shrink: 0;
  background: #1a1e36;
  cursor: pointer;
  transition: opacity 0.2s;
}
.tv-np-thumb:hover {
  opacity: 0.8;
}
.tv-np-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.tv-np-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tv-controls {
  display: flex;
  gap: 6px;
  margin-top: 4px;
}
.tv-controls .btn {
  font-size: 12px;
}

/* TV Fullscreen Player Overlay — body-level */
.tv-player-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  animation: tvOverlayIn 0.3s ease;
}
.tv-player-overlay.hidden {
  display: none;
}
.tv-player-overlay.minimized {
  top: auto;
  left: auto;
  right: 24px;
  bottom: 80px;
  width: 400px;
  height: 225px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.7);
  border: 1px solid rgba(93, 135, 191, 0.3);
  animation: tvMinimizeIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.tv-player-overlay.minimized .tv-player-container {
  width: 100%;
  height: 100%;
  max-width: 100%;
  aspect-ratio: auto;
  border-radius: 0;
}
.tv-player-overlay.minimized .media-dock {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  transform: none;
  border-radius: 0;
  padding: 6px 12px;
  opacity: 0;
  transition: opacity 0.2s;
}
.tv-player-overlay.minimized:hover .media-dock {
  opacity: 1;
}
@keyframes tvOverlayIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes tvMinimizeIn {
  from {
    opacity: 0;
    transform: scale(0.7) translateY(40px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}
.tv-player-container {
  position: relative;
  width: 90vw;
  max-width: 1200px;
  aspect-ratio: 16/9;
  border-radius: 12px;
  overflow: hidden;
  background: #000;
  flex: 1;
  max-height: calc(100vh - 100px);
}
.tv-player-overlay.minimized .tv-player-container {
  border-radius: 0;
}
.tv-player-iframe {
  width: 100%;
  height: 100%;
  border: none;
}

/* ── Media Dock (shared TV + Screen Share) ─────────────────── */
.media-dock {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10000;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 20px;
  background: linear-gradient(
    135deg,
    rgba(15, 19, 35, 0.95),
    rgba(30, 40, 65, 0.95)
  );
  border: 1px solid rgba(93, 135, 191, 0.3);
  border-radius: 16px;
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.5),
    0 0 20px rgba(93, 135, 191, 0.1);
  backdrop-filter: blur(16px);
  animation: mediaDockIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes mediaDockIn {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(20px) scale(0.9);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
  }
}
.media-dock-info {
  display: flex;
  align-items: center;
  gap: 10px;
}
.media-dock-info .icon {
  width: 16px;
  height: 16px;
}
.media-dock-pulse {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ef4444;
  box-shadow: 0 0 8px rgba(239, 68, 68, 0.5);
  animation: callPulse 1.5s ease infinite;
  flex-shrink: 0;
}
.media-dock-pulse.ss-pulse {
  background: #06b6d4;
  box-shadow: 0 0 8px rgba(6, 182, 212, 0.5);
}
.media-dock-name {
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.media-dock-viewers {
  color: rgba(255, 255, 255, 0.6);
  font-size: 12px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.08);
}
.media-dock-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}
.media-dock-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
  padding: 0;
}
.media-dock-btn .icon {
  width: 16px;
  height: 16px;
}
.media-dock-btn:hover {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  transform: scale(1.1);
}
.media-dock-btn.active-muted {
  background: rgba(239, 68, 68, 0.25);
  color: #f87171;
}
.media-dock-btn.active-camera {
  background: rgba(16, 185, 129, 0.25);
  color: #34d399;
}
.media-dock-end {
  background: rgba(239, 68, 68, 0.25);
  color: #f87171;
}
.media-dock-end:hover {
  background: rgba(239, 68, 68, 0.45);
  color: #fff;
}

/* ── Media Overlay removed — CSS cleaned up ── */

/* Screen Share Watch Button & Viewer Badge */
.ss-viewer-badge {
  margin-left: 8px;
}

/* ══════════════════════════════════════════════════════════════════
   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(93, 135, 191, 0.06);
  border-bottom: 1px solid rgba(93, 135, 191, 0.1);
}
.search-bar input {
  flex: 1;
  background: rgba(15, 18, 30, 0.6);
  border: 1px solid rgba(93, 135, 191, 0.15);
  border-radius: var(--radius-sm, 8px);
  padding: 6px 12px;
  color: var(--text);
  font-size: 13px;
  outline: none;
  transition: border-color 0.2s;
}
.search-bar input:focus {
  border-color: rgba(93, 135, 191, 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(93, 135, 191, 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(93, 135, 191, 0.06);
}
.search-result-item:hover {
  background: rgba(93, 135, 191, 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);
}
.search-result-content {
  font-size: 13px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.search-result-content mark {
  background: rgba(93, 135, 191, 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-list {
  padding: 4px 0;
}

/* ── Channel Info Panel ───────────────────────────────────────── */
/* ── Channel Info Panel ─ Modern ──────────────────────────────── */
.channel-info-body {
  padding: 4px 0;
}
.channel-info-section {
  padding: 16px 20px;
}

/* Hero name with icon */
.channel-info-name {
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.ci-hero-icon {
  font-size: 26px;
  line-height: 1;
  filter: drop-shadow(0 2px 6px rgba(93, 135, 191, 0.35));
}

/* Type badge & tags row */
.channel-info-type {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.ci-type-badge {
  font-size: 11px;
  font-weight: 600;
  color: var(--primary);
  background: rgba(93, 135, 191, 0.12);
  padding: 3px 10px;
  border-radius: 20px;
  letter-spacing: 0.3px;
}
.ci-tag {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 20px;
  letter-spacing: 0.2px;
}
.ci-tag-private {
  background: rgba(239, 68, 68, 0.12);
  color: #f87171;
}
.ci-tag-password {
  background: rgba(234, 179, 8, 0.12);
  color: #facc15;
}

/* Divider */
.channel-info-divider {
  height: 1px;
  background: rgba(93, 135, 191, 0.08);
  margin: 0 20px;
}

/* Section label */
.channel-info-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-muted);
  margin: 0 0 10px 0;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* ── Detail Cards ────────────────────────────────────────────── */
.channel-info-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

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

.ci-detail-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 13px;
  border-radius: 12px;
  background: rgba(93, 135, 191, 0.05);
  border: 1px solid rgba(93, 135, 191, 0.06);
  transition:
    background 0.2s,
    border-color 0.2s,
    transform 0.18s;
  animation: ciCardIn 0.35s ease both;
}
.ci-detail-card:hover {
  background: rgba(93, 135, 191, 0.1);
  border-color: rgba(93, 135, 191, 0.15);
  transform: translateY(-1px);
}

/* Accent variants */
.ci-detail-user {
  background: rgba(93, 135, 191, 0.06);
  border-color: rgba(93, 135, 191, 0.1);
}
.ci-detail-date {
  background: rgba(59, 130, 246, 0.06);
  border-color: rgba(59, 130, 246, 0.1);
}
.ci-detail-role {
  background: rgba(168, 85, 247, 0.06);
  border-color: rgba(168, 85, 247, 0.1);
}
.ci-detail-slow {
  background: rgba(234, 179, 8, 0.06);
  border-color: rgba(234, 179, 8, 0.1);
}
.ci-detail-capacity {
  background: rgba(16, 185, 129, 0.06);
  border-color: rgba(16, 185, 129, 0.1);
}

.ci-detail-user:hover {
  background: rgba(93, 135, 191, 0.12);
  border-color: rgba(93, 135, 191, 0.18);
}
.ci-detail-date:hover {
  background: rgba(59, 130, 246, 0.12);
  border-color: rgba(59, 130, 246, 0.18);
}
.ci-detail-role:hover {
  background: rgba(168, 85, 247, 0.12);
  border-color: rgba(168, 85, 247, 0.18);
}
.ci-detail-slow:hover {
  background: rgba(234, 179, 8, 0.12);
  border-color: rgba(234, 179, 8, 0.18);
}
.ci-detail-capacity:hover {
  background: rgba(16, 185, 129, 0.12);
  border-color: rgba(16, 185, 129, 0.18);
}

.ci-detail-icon {
  font-size: 18px;
  flex-shrink: 0;
  line-height: 1;
}
.ci-detail-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 1px;
}
.ci-detail-label {
  font-size: 10px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  font-weight: 500;
}
.ci-detail-value {
  font-size: 13px;
  color: var(--text);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Member List – Modern ────────────────────────────────────── */
.channel-info-members {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 240px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(93, 135, 191, 0.15) transparent;
}

@keyframes ciMemberIn {
  from {
    opacity: 0;
    transform: translateX(-6px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.ci-member {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  border-radius: 10px;
  cursor: pointer;
  transition:
    background 0.18s,
    transform 0.15s;
  margin-bottom: 2px;
  animation: ciMemberIn 0.3s ease both;
}
.ci-member:hover {
  background: rgba(93, 135, 191, 0.1);
  transform: translateX(2px);
}
.ci-member-online {
  background: rgba(34, 197, 94, 0.04);
}
.ci-member-avatar-wrap {
  position: relative;
  flex-shrink: 0;
}
.ci-member-avatar-wrap .avatar,
.ci-member-avatar-wrap .ci-member-avatar {
  width: 34px;
  height: 34px;
  font-size: 13px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.ci-member-avatar-wrap .ci-member-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
.ci-member-dot {
  position: absolute;
  bottom: -1px;
  right: -1px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid var(--bg-card, #161d35);
  background: #4b5563;
  transition: background 0.2s;
}
.ci-member-dot.online {
  background: #22c55e;
  box-shadow: 0 0 6px rgba(34, 197, 94, 0.4);
}
.ci-member-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  flex: 1;
}
.ci-member-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ci-member-role {
  font-size: 10px;
  font-weight: 500;
  opacity: 0.7;
}
.ci-member-status-text {
  font-size: 10px;
  color: #22c55e;
  font-weight: 500;
  margin-left: auto;
  flex-shrink: 0;
}
.channel-info-loading,
.channel-info-empty {
  padding: 16px;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
  list-style: none;
}

/* ── Reply Preview ────────────────────────────────────────────── */
.reply-preview {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: rgba(93, 135, 191, 0.08);
  border-left: 3px solid var(--primary);
  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);
}
.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(93, 135, 191, 0.05);
  border-left: 2px solid rgba(93, 135, 191, 0.3);
  border-radius: 0 4px 4px 0;
  cursor: pointer;
  transition: background 0.15s;
}
.msg-reply-ref:hover {
  background: rgba(93, 135, 191, 0.1);
}
.msg-reply-ref::before {
  content: "↩";
  color: var(--primary);
}
.msg-reply-user {
  font-weight: 600;
  color: var(--primary);
}

/* ── 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(93, 135, 191, 0.06);
  border: 1px solid rgba(93, 135, 191, 0.1);
  border-radius: var(--radius-sm, 8px);
  transition: background 0.15s;
}
.msg-attachment:hover {
  background: rgba(93, 135, 191, 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);
  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(93, 135, 191, 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(93, 135, 191, 0.06);
}
.shortcut-row:last-child {
  border-bottom: none;
}
kbd {
  display: inline-block;
  padding: 2px 8px;
  background: rgba(93, 135, 191, 0.12);
  border: 1px solid rgba(93, 135, 191, 0.2);
  border-radius: 4px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--primary);
  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);
  white-space: nowrap;
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 4px;
  background: rgba(93, 135, 191, 0.1);
}
.audit-actor {
  color: rgba(196, 181, 253, 0.7);
  font-weight: 500;
}
.audit-details {
  flex: 1;
  color: var(--text);
  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(93, 135, 191, 0.06);
  border: 1px solid rgba(93, 135, 191, 0.1);
  border-radius: 12px;
  padding: 18px 14px;
  text-align: center;
  transition: all 0.2s ease;
}
.stat-card:hover {
  background: rgba(93, 135, 191, 0.1);
  border-color: rgba(93, 135, 191, 0.2);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(93, 135, 191, 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);
  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);
  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);
  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(93, 135, 191, 0.2);
  transition: border-color 0.2s;
}
.profile-avatar:hover {
  border-color: rgba(93, 135, 191, 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(93, 135, 191, 0.15);
  color: var(--primary);
  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(93, 135, 191, 0.06);
  border-radius: var(--radius-sm, 8px);
  border: 1px solid rgba(93, 135, 191, 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);
  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(93, 135, 191, 0.15);
  border-radius: var(--radius-sm, 8px);
  padding: 8px 12px;
  color: var(--text);
  font-size: 13px;
  resize: vertical;
  outline: none;
  font-family: inherit;
}
#profileBioSection textarea:focus {
  border-color: rgba(93, 135, 191, 0.4);
}

/* ── Avatar Image Support ─────────────────────────────────────── */
/* Unified avatar fallback pattern across all contexts */
.avatar-pattern {
  background: var(--accent-gradient);
  color: #fff;
}

/* Shared: all avatar elements can contain an <img> instead of letter text */
.avatar-pattern img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}
/* Animated avatar (GIF/APNG/WebP) — no filtering */
.avatar-pattern.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(93, 135, 191, 0.04);
  border: 1px solid rgba(93, 135, 191, 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(93, 135, 191, 0.15);
  border-radius: var(--radius-sm, 8px);
  padding: 10px 14px;
  color: var(--text);
  font-size: 13px;
  outline: none;
  font-family: inherit;
  transition: border-color 0.2s;
}
/* Password change section */
.us-password-change {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.us-password-change .profile-edit-group {
  padding: 10px 14px;
}
.us-password-change input[type="password"] {
  width: 100%;
  background: rgba(15, 18, 30, 0.6);
  border: 1px solid rgba(93, 135, 191, 0.15);
  border-radius: var(--radius-sm, 8px);
  padding: 10px 14px;
  color: var(--text);
  font-size: 13px;
  outline: none;
  font-family: inherit;
  transition: border-color 0.2s;
  box-sizing: border-box;
}
.us-password-change input[type="password"]:focus {
  border-color: rgba(93, 135, 191, 0.45);
  box-shadow: 0 0 0 3px rgba(93, 135, 191, 0.08);
}
.us-password-change .btn {
  align-self: flex-start;
  margin-top: 4px;
}
.profile-edit-row input:focus {
  border-color: rgba(93, 135, 191, 0.45);
  box-shadow: 0 0 0 3px rgba(93, 135, 191, 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(93, 135, 191, 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(93, 135, 191, 0.08);
  color: var(--text-muted);
  cursor: pointer;
  border: 1px solid transparent;
  transition: all 0.2s;
}
.avatar-source-tab:hover {
  background: rgba(93, 135, 191, 0.15);
}
.avatar-source-tab.active {
  background: rgba(93, 135, 191, 0.2);
  color: var(--primary);
  border-color: rgba(93, 135, 191, 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;
  z-index: 1;
  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(93, 135, 191, 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(93, 135, 191, 0.15);
  color: var(--primary);
  cursor: pointer;
  font-size: 11px;
  transition: background 0.15s;
}
.msg-code-copy:hover {
  background: rgba(93, 135, 191, 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: #a3c1e0;
}
.msg-code-block code {
  font-family:
    "JetBrains Mono", "Fira Code", "Cascadia Code", "Source Code Pro", monospace;
}
.msg-inline-code {
  background: rgba(93, 135, 191, 0.12);
  padding: 1px 6px;
  border-radius: 4px;
  font-family: "JetBrains Mono", "Fira Code", monospace;
  font-size: 0.9em;
  color: #a3c1e0;
}

/* ── 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(93, 135, 191, 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);
}
.code-share-tab.active {
  background: var(--primary);
  color: #fff;
}
.code-share-tab-content {
  display: none;
}
.code-share-tab-content.active {
  display: block;
}

/* Drop zone */
.code-share-dropzone {
  border: 2px dashed rgba(93, 135, 191, 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);
  background: rgba(93, 135, 191, 0.05);
}
.code-share-dropzone.drag-over {
  background: rgba(93, 135, 191, 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(93, 135, 191, 0.5);
}
.code-share-dropzone-inner p {
  margin: 0;
  font-size: 14px;
  color: var(--text);
  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(93, 135, 191, 0.08);
  border-radius: var(--radius-sm, 8px);
  font-size: 13px;
}
.code-share-filename {
  color: var(--primary);
  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(93, 135, 191, 0.15));
  border-radius: var(--radius-sm, 8px);
  background: rgba(8, 11, 20, 0.6);
  color: #a3c1e0;
  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);
  box-shadow: 0 0 0 2px rgba(93, 135, 191, 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(93, 135, 191, 0.15));
  border-radius: 6px;
  background: rgba(8, 11, 20, 0.6);
  color: var(--text);
  font-size: 13px;
  cursor: pointer;
}
.code-share-lang-select:focus {
  outline: none;
  border-color: var(--primary);
}

/* Preview */
.code-share-preview {
  margin-top: 8px;
  border-radius: var(--radius-sm, 8px);
  overflow: hidden;
  border: 1px solid var(--border, rgba(93, 135, 191, 0.12));
}
.code-share-preview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 12px;
  background: rgba(93, 135, 191, 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: #a3c1e0;
}
.code-share-preview-pre code {
  font-family: "JetBrains Mono", "Fira Code", "Cascadia Code", monospace;
  white-space: pre;
}

/* ── URL Preview (continued) ─────────────────────────────────── */
.msg-url-preview {
  display: none; /* replaced by msg-link-preview */
}

/* ── Rich Link Preview Card ──────────────────────────────────── */
.msg-link-preview {
  position: relative;
  display: flex;
  gap: 12px;
  padding: 10px 12px;
  margin-top: 8px;
  max-width: 480px;
  background: rgba(93, 135, 191, 0.06);
  border-left: 3px solid var(--primary);
  border-radius: 0 var(--radius-sm, 8px) var(--radius-sm, 8px) 0;
  transition: background 0.15s;
  cursor: pointer;
}
.msg-link-preview:hover {
  background: rgba(93, 135, 191, 0.12);
}
.msg-link-preview.loading {
  min-height: 40px;
}
.msg-link-preview.loading::after {
  content: "";
  width: 16px;
  height: 16px;
  border: 2px solid var(--text-muted);
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}
.link-preview-dismiss {
  position: absolute;
  top: 4px;
  right: 4px;
  all: unset;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 12px;
  opacity: 0;
  transition:
    opacity 0.15s,
    background 0.15s;
  z-index: 2;
}
.msg-link-preview:hover .link-preview-dismiss {
  opacity: 1;
}
.link-preview-dismiss:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text-primary);
}
.link-preview-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.link-preview-site {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.link-preview-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--primary);
  text-decoration: none;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.link-preview-title:hover {
  text-decoration: underline;
}
.link-preview-desc {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.link-preview-domain {
  font-size: 11px;
  color: rgba(196, 181, 253, 0.5);
}
.link-preview-img {
  width: 80px;
  height: 80px;
  border-radius: 6px;
  object-fit: cover;
  flex-shrink: 0;
}

.msg-url-domain {
  font-size: 11px;
  color: rgba(196, 181, 253, 0.5);
}
.msg-url-text {
  font-size: 13px;
  color: var(--primary);
  word-break: break-all;
}

/* ── Inline GIF Embed ──────────────────────────────────────────── */
.msg-gif-embed {
  display: block;
  max-width: 320px;
  max-height: 280px;
  border-radius: 10px;
  margin: 6px 0 2px;
  cursor: pointer;
  transition: transform 0.15s;
  object-fit: contain;
  background: rgba(93, 135, 191, 0.04);
}
.msg-gif-embed:hover {
  transform: scale(1.02);
}

/* ── 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 ──────────────────────────────────────── */

/* ── 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);
}

/* ── Dark / Light theme overrides for new features ────────────── */
[data-theme="light"] .search-bar {
  background: rgba(93, 135, 191, 0.04);
}
[data-theme="light"] .search-bar input {
  background: rgba(255, 255, 255, 0.8);
  border-color: rgba(93, 135, 191, 0.2);
  color: var(--text);
}
[data-theme="light"] .search-results {
  background: rgba(255, 255, 255, 0.97);
}
[data-theme="light"] .reply-preview {
  background: rgba(93, 135, 191, 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(93, 135, 191, 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(93, 135, 191, 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 .channel-item:hover {
  background: rgba(93, 135, 191, 0.08);
}
[data-theme="light"] .sidebar .channel-item.active {
  background: rgba(93, 135, 191, 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(93, 135, 191, 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,
[data-theme="light"] .voice-center-panel,
[data-theme="light"] .users-panel {
  background: rgba(255, 255, 255, 0.75);
  color: var(--text);
}
[data-theme="light"] .vc-header {
  background: rgba(255, 255, 255, 0.6);
}
[data-theme="light"] .vc-bottom-bar {
  background: rgba(255, 255, 255, 0.85);
}
[data-theme="light"] .vc-bar-btn {
  background: rgba(0, 0, 0, 0.06);
  color: var(--text-secondary);
}
[data-theme="light"] .vc-bar-btn:hover {
  background: rgba(0, 0, 0, 0.1);
  color: var(--text);
}
[data-theme="light"] .vc-settings-drawer {
  background: rgba(255, 255, 255, 0.95);
}
[data-theme="light"] .vc-bar-badge {
  border-color: rgba(255, 255, 255, 0.85);
}
[data-theme="light"] .voice-panel .participant-name,
[data-theme="light"] .voice-panel .voice-status,
[data-theme="light"] .voice-center-panel .participant-name,
[data-theme="light"] .voice-center-panel .voice-status,
[data-theme="light"] .users-panel .participant-name {
  color: var(--text);
}
[data-theme="light"] .users-panel-header {
  background: rgba(255, 255, 255, 0.6);
  border-bottom-color: rgba(0, 0, 0, 0.08);
}
[data-theme="light"] .users-panel-collapse-btn {
  background: rgba(0, 0, 0, 0.05);
  border-color: rgba(0, 0, 0, 0.1);
  color: var(--text-muted);
}
[data-theme="light"] .users-panel-collapse-btn:hover {
  background: rgba(0, 0, 0, 0.1);
  color: var(--text);
}
[data-theme="light"] .users-panel-expand-btn {
  background: rgba(255, 255, 255, 0.9);
  border-color: rgba(0, 0, 0, 0.1);
  color: var(--text-muted);
}
[data-theme="light"] .users-panel-expand-btn:hover {
  background: rgba(93, 135, 191, 0.1);
  color: var(--text);
}
[data-theme="light"] .users-panel {
  background: rgba(255, 255, 255, 0.78);
  border-left-color: rgba(0, 0, 0, 0.08);
  box-shadow: none;
}
[data-theme="light"] .users-panel-header {
  background: rgba(255, 255, 255, 0.3);
  border-bottom-color: rgba(0, 0, 0, 0.06);
}
[data-theme="light"] .users-panel-section {
  border-bottom-color: rgba(0, 0, 0, 0.06);
}
[data-theme="light"] .users-panel-all .users-search-wrap input {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.08);
}
[data-theme="light"] .users-panel-all .users-search-wrap input:focus {
  background: rgba(93, 135, 191, 0.04);
  border-color: rgba(93, 135, 191, 0.3);
}
[data-theme="light"] .users-group-label {
  color: rgba(71, 85, 105, 0.7);
}
[data-theme="light"] .users-group-label::after {
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.06), transparent);
}
[data-theme="light"] .user-row:hover {
  background: rgba(93, 135, 191, 0.06);
}
[data-theme="light"] .user-avatar .online-dot,
[data-theme="light"] .user-avatar .offline-dot,
[data-theme="light"] .user-avatar .status-dot {
  border-color: rgba(255, 255, 255, 0.9);
}
[data-theme="light"] .user-action-btn {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.06);
}
[data-theme="light"] .user-self-label {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.08);
  color: rgba(71, 85, 105, 0.7);
}
[data-theme="light"] .vc-header {
  border-bottom-color: rgba(0, 0, 0, 0.08);
}
[data-theme="light"] .vc-bottom-bar {
  border-top-color: rgba(0, 0, 0, 0.08);
}
[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-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(93, 135, 191, 0.06);
}
[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);
  border-color: rgba(0, 0, 0, 0.1);
}
[data-theme="light"] .input-highlight-wrap textarea {
  color: transparent;
  caret-color: var(--text);
}
[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-name {
  color: var(--text);
}
[data-theme="light"] .channel-info-type,
[data-theme="light"] .channel-info-member:hover {
  background: rgba(93, 135, 191, 0.08);
}
[data-theme="light"] .channel-info-divider {
  border-color: rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .user-mgmt-row,
:is(
    [data-theme="snow"],
    [data-theme="cream"],
    [data-theme="mint"],
    [data-theme="lavender"],
    [data-theme="ice"]
  )
  .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"],
    [data-theme="lavender"],
    [data-theme="ice"]
  )
  .user-mgmt-row:hover {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(93, 135, 191, 0.15);
}
[data-theme="light"] .stat-card,
:is(
    [data-theme="snow"],
    [data-theme="cream"],
    [data-theme="mint"],
    [data-theme="lavender"],
    [data-theme="ice"]
  )
  .stat-card {
  background: rgba(93, 135, 191, 0.04);
  border-color: rgba(93, 135, 191, 0.08);
}
[data-theme="light"] .audit-row,
:is(
    [data-theme="snow"],
    [data-theme="cream"],
    [data-theme="mint"],
    [data-theme="lavender"],
    [data-theme="ice"]
  )
  .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"],
    [data-theme="lavender"],
    [data-theme="ice"]
  )
  .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"],
    [data-theme="lavender"],
    [data-theme="ice"]
  )
  .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(93, 135, 191, 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(93, 135, 191, 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(93, 135, 191, 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"] .music-bot-panel,
[data-theme="light"] .music-bot-panel-inner {
  background: rgba(255, 255, 255, 0.9);
  color: var(--text);
}
[data-theme="light"] .tv-panel,
[data-theme="light"] .tv-panel-inner {
  background: rgba(255, 255, 255, 0.9);
  color: var(--text);
}
[data-theme="light"] .entertainment-panel {
  background: rgba(255, 255, 255, 0.8);
}
[data-theme="light"] .tv-viewer-badge,
[data-theme="light"] .ss-viewer-badge {
  background: rgba(93, 135, 191, 0.12);
}
[data-theme="light"] .tv-now-playing {
  background: rgba(239, 68, 68, 0.06);
}
[data-theme="light"] .tv-result-thumb,
[data-theme="light"] .tv-np-thumb {
  background: #e5e7eb;
}
[data-theme="light"] .settings-label {
  color: var(--text);
}
[data-theme="light"] .slider-value {
  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"] .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"],
    [data-theme="lavender"],
    [data-theme="ice"]
  )
  .search-bar {
  background: rgba(93, 135, 191, 0.04);
}
:is(
    [data-theme="snow"],
    [data-theme="cream"],
    [data-theme="mint"],
    [data-theme="lavender"],
    [data-theme="ice"]
  )
  .search-bar
  input {
  background: rgba(255, 255, 255, 0.8);
  border-color: rgba(93, 135, 191, 0.2);
  color: var(--text);
}
:is(
    [data-theme="snow"],
    [data-theme="cream"],
    [data-theme="mint"],
    [data-theme="lavender"],
    [data-theme="ice"]
  )
  .search-results {
  background: rgba(255, 255, 255, 0.97);
}
:is(
    [data-theme="snow"],
    [data-theme="cream"],
    [data-theme="mint"],
    [data-theme="lavender"],
    [data-theme="ice"]
  )
  :is(
    [data-theme="snow"],
    [data-theme="cream"],
    [data-theme="mint"],
    [data-theme="lavender"],
    [data-theme="ice"]
  )
  .reply-preview {
  background: rgba(93, 135, 191, 0.06);
}
:is(
    [data-theme="snow"],
    [data-theme="cream"],
    [data-theme="mint"],
    [data-theme="lavender"],
    [data-theme="ice"]
  )
  .file-preview {
  background: rgba(16, 185, 129, 0.06);
}
:is(
    [data-theme="snow"],
    [data-theme="cream"],
    [data-theme="mint"],
    [data-theme="lavender"],
    [data-theme="ice"]
  )
  .msg-code-block
  pre {
  background: rgba(243, 244, 246, 0.9);
  color: #4338ca;
}
:is(
    [data-theme="snow"],
    [data-theme="cream"],
    [data-theme="mint"],
    [data-theme="lavender"],
    [data-theme="ice"]
  )
  .msg-inline-code {
  background: rgba(93, 135, 191, 0.08);
}
/* ── Snow/Cream/Mint: Channel Info Panel ── */
:is(
    [data-theme="snow"],
    [data-theme="cream"],
    [data-theme="mint"],
    [data-theme="lavender"],
    [data-theme="ice"]
  )
  :is(
    [data-theme="snow"],
    [data-theme="cream"],
    [data-theme="mint"],
    [data-theme="lavender"],
    [data-theme="ice"]
  )
  :is(
    [data-theme="snow"],
    [data-theme="cream"],
    [data-theme="mint"],
    [data-theme="lavender"],
    [data-theme="ice"]
  )
  .channel-info-name {
  color: var(--text);
}
:is(
    [data-theme="snow"],
    [data-theme="cream"],
    [data-theme="mint"],
    [data-theme="lavender"],
    [data-theme="ice"]
  )
  :is(
    [data-theme="snow"],
    [data-theme="cream"],
    [data-theme="mint"],
    [data-theme="lavender"],
    [data-theme="ice"]
  )
  .channel-info-member:hover {
  background: rgba(0, 0, 0, 0.04);
}
:is(
    [data-theme="snow"],
    [data-theme="cream"],
    [data-theme="mint"],
    [data-theme="lavender"],
    [data-theme="ice"]
  )
  .modal-content {
  background: rgba(255, 255, 255, 0.95);
  color: var(--text);
}
:is(
    [data-theme="snow"],
    [data-theme="cream"],
    [data-theme="mint"],
    [data-theme="lavender"],
    [data-theme="ice"]
  )
  kbd {
  background: rgba(93, 135, 191, 0.08);
}
:is(
    [data-theme="snow"],
    [data-theme="cream"],
    [data-theme="mint"],
    [data-theme="lavender"],
    [data-theme="ice"]
  )
  .sidebar {
  background: rgba(255, 255, 255, 0.7);
  color: var(--text);
}
:is(
    [data-theme="snow"],
    [data-theme="cream"],
    [data-theme="mint"],
    [data-theme="lavender"],
    [data-theme="ice"]
  )
  .sidebar
  .channel-item,
:is(
    [data-theme="snow"],
    [data-theme="cream"],
    [data-theme="mint"],
    [data-theme="lavender"],
    [data-theme="ice"]
  )
  .sidebar
  .sidebar-heading,
:is(
    [data-theme="snow"],
    [data-theme="cream"],
    [data-theme="mint"],
    [data-theme="lavender"],
    [data-theme="ice"]
  )
  :is(
    [data-theme="snow"],
    [data-theme="cream"],
    [data-theme="mint"],
    [data-theme="lavender"],
    [data-theme="ice"]
  )
  .sidebar
  .channel-item:hover {
  background: rgba(93, 135, 191, 0.08);
}
:is(
    [data-theme="snow"],
    [data-theme="cream"],
    [data-theme="mint"],
    [data-theme="lavender"],
    [data-theme="ice"]
  )
  .sidebar
  .channel-item.active {
  background: rgba(93, 135, 191, 0.12);
}
:is(
    [data-theme="snow"],
    [data-theme="cream"],
    [data-theme="mint"],
    [data-theme="lavender"],
    [data-theme="ice"]
  )
  .message
  .msg-username {
  color: var(--text);
}
:is(
    [data-theme="snow"],
    [data-theme="cream"],
    [data-theme="mint"],
    [data-theme="lavender"],
    [data-theme="ice"]
  )
  .message
  .msg-time,
:is(
    [data-theme="snow"],
    [data-theme="cream"],
    [data-theme="mint"],
    [data-theme="lavender"],
    [data-theme="ice"]
  )
  .message
  .msg-edited-tag {
  color: var(--text-muted);
}
:is(
    [data-theme="snow"],
    [data-theme="cream"],
    [data-theme="mint"],
    [data-theme="lavender"],
    [data-theme="ice"]
  )
  .message
  .body {
  color: var(--text);
}
:is(
    [data-theme="snow"],
    [data-theme="cream"],
    [data-theme="mint"],
    [data-theme="lavender"],
    [data-theme="ice"]
  )
  .message
  .msg-bubble {
  color: var(--text);
}
:is(
    [data-theme="snow"],
    [data-theme="cream"],
    [data-theme="mint"],
    [data-theme="lavender"],
    [data-theme="ice"]
  )
  .msg-reply-ref {
  background: rgba(93, 135, 191, 0.06);
  color: var(--text-secondary);
}
:is(
    [data-theme="snow"],
    [data-theme="cream"],
    [data-theme="mint"],
    [data-theme="lavender"],
    [data-theme="ice"]
  )
  .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"],
    [data-theme="lavender"],
    [data-theme="ice"]
  )
  .meta {
  color: var(--text-secondary);
}
:is(
    [data-theme="snow"],
    [data-theme="cream"],
    [data-theme="mint"],
    [data-theme="lavender"],
    [data-theme="ice"]
  )
  .voice-panel {
  background: rgba(255, 255, 255, 0.75);
  color: var(--text);
}
:is(
    [data-theme="snow"],
    [data-theme="cream"],
    [data-theme="mint"],
    [data-theme="lavender"],
    [data-theme="ice"]
  )
  .voice-panel
  .participant-name,
:is(
    [data-theme="snow"],
    [data-theme="cream"],
    [data-theme="mint"],
    [data-theme="lavender"],
    [data-theme="ice"]
  )
  .voice-panel
  .voice-status {
  color: var(--text);
}
:is(
    [data-theme="snow"],
    [data-theme="cream"],
    [data-theme="mint"],
    [data-theme="lavender"],
    [data-theme="ice"]
  )
  .voice-btn {
  color: var(--text);
  border-color: rgba(0, 0, 0, 0.12);
}
:is(
    [data-theme="snow"],
    [data-theme="cream"],
    [data-theme="mint"],
    [data-theme="lavender"],
    [data-theme="ice"]
  )
  :is(
    [data-theme="snow"],
    [data-theme="cream"],
    [data-theme="mint"],
    [data-theme="lavender"],
    [data-theme="ice"]
  )
  .topbar {
  background: rgba(255, 255, 255, 0.85);
  color: var(--text);
}
:is(
    [data-theme="snow"],
    [data-theme="cream"],
    [data-theme="mint"],
    [data-theme="lavender"],
    [data-theme="ice"]
  )
  .topbar
  .btn {
  color: var(--text);
}
:is(
    [data-theme="snow"],
    [data-theme="cream"],
    [data-theme="mint"],
    [data-theme="lavender"],
    [data-theme="ice"]
  )
  .dm-panel,
:is(
    [data-theme="snow"],
    [data-theme="cream"],
    [data-theme="mint"],
    [data-theme="lavender"],
    [data-theme="ice"]
  )
  :is(
    [data-theme="snow"],
    [data-theme="cream"],
    [data-theme="mint"],
    [data-theme="lavender"],
    [data-theme="ice"]
  )
  :is(
    [data-theme="snow"],
    [data-theme="cream"],
    [data-theme="mint"],
    [data-theme="lavender"],
    [data-theme="ice"]
  )
  :is(
    [data-theme="snow"],
    [data-theme="cream"],
    [data-theme="mint"],
    [data-theme="lavender"],
    [data-theme="ice"]
  )
  .dm-message {
  color: var(--text);
}
:is(
    [data-theme="snow"],
    [data-theme="cream"],
    [data-theme="mint"],
    [data-theme="lavender"],
    [data-theme="ice"]
  )
  .users-drawer {
  background: rgba(255, 255, 255, 0.95);
  color: var(--text);
}
:is(
    [data-theme="snow"],
    [data-theme="cream"],
    [data-theme="mint"],
    [data-theme="lavender"],
    [data-theme="ice"]
  )
  .users-drawer
  .user-row {
  color: var(--text);
}
:is(
    [data-theme="snow"],
    [data-theme="cream"],
    [data-theme="mint"],
    [data-theme="lavender"],
    [data-theme="ice"]
  )
  .users-drawer
  .user-row:hover {
  background: rgba(93, 135, 191, 0.06);
}
:is(
    [data-theme="snow"],
    [data-theme="cream"],
    [data-theme="mint"],
    [data-theme="lavender"],
    [data-theme="ice"]
  )
  :is(
    [data-theme="snow"],
    [data-theme="cream"],
    [data-theme="mint"],
    [data-theme="lavender"],
    [data-theme="ice"]
  )
  .chat-input-area
  input,
:is(
    [data-theme="snow"],
    [data-theme="cream"],
    [data-theme="mint"],
    [data-theme="lavender"],
    [data-theme="ice"]
  )
  .chat-input-area
  textarea,
:is(
    [data-theme="snow"],
    [data-theme="cream"],
    [data-theme="mint"],
    [data-theme="lavender"],
    [data-theme="ice"]
  )
  #messageInput {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.1);
}
:is(
    [data-theme="snow"],
    [data-theme="cream"],
    [data-theme="mint"],
    [data-theme="lavender"],
    [data-theme="ice"]
  )
  .input-highlight-wrap
  textarea {
  color: transparent;
  caret-color: var(--text);
}
:is(
    [data-theme="snow"],
    [data-theme="cream"],
    [data-theme="mint"],
    [data-theme="lavender"],
    [data-theme="ice"]
  )
  #messageInput::placeholder {
  color: var(--text-muted);
}
:is(
    [data-theme="snow"],
    [data-theme="cream"],
    [data-theme="mint"],
    [data-theme="lavender"],
    [data-theme="ice"]
  )
  .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"],
    [data-theme="lavender"],
    [data-theme="ice"]
  )
  .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"],
    [data-theme="lavender"],
    [data-theme="ice"]
  )
  .emoji-picker {
  background: rgba(255, 255, 255, 0.97);
  color: var(--text);
}
:is(
    [data-theme="snow"],
    [data-theme="cream"],
    [data-theme="mint"],
    [data-theme="lavender"],
    [data-theme="ice"]
  )
  .profile-card {
  color: var(--text);
}
:is(
    [data-theme="snow"],
    [data-theme="cream"],
    [data-theme="mint"],
    [data-theme="lavender"],
    [data-theme="ice"]
  )
  .profile-card
  .profile-username {
  color: var(--text);
}
:is(
    [data-theme="snow"],
    [data-theme="cream"],
    [data-theme="mint"],
    [data-theme="lavender"],
    [data-theme="ice"]
  )
  .profile-card
  .profile-bio,
:is(
    [data-theme="snow"],
    [data-theme="cream"],
    [data-theme="mint"],
    [data-theme="lavender"],
    [data-theme="ice"]
  )
  .profile-card
  .profile-meta {
  color: var(--text-secondary);
}
:is(
    [data-theme="snow"],
    [data-theme="cream"],
    [data-theme="mint"],
    [data-theme="lavender"],
    [data-theme="ice"]
  )
  .profile-online-stats {
  color: var(--text);
}
:is(
    [data-theme="snow"],
    [data-theme="cream"],
    [data-theme="mint"],
    [data-theme="lavender"],
    [data-theme="ice"]
  )
  .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"],
    [data-theme="lavender"],
    [data-theme="ice"]
  )
  .profile-dd-user-section {
  background: rgba(93, 135, 191, 0.06);
}
:is(
    [data-theme="snow"],
    [data-theme="cream"],
    [data-theme="mint"],
    [data-theme="lavender"],
    [data-theme="ice"]
  )
  .profile-dd-name {
  color: var(--text);
}
:is(
    [data-theme="snow"],
    [data-theme="cream"],
    [data-theme="mint"],
    [data-theme="lavender"],
    [data-theme="ice"]
  )
  .profile-dd-divider {
  background: rgba(0, 0, 0, 0.08);
}
:is(
    [data-theme="snow"],
    [data-theme="cream"],
    [data-theme="mint"],
    [data-theme="lavender"],
    [data-theme="ice"]
  )
  .profile-dd-item {
  color: var(--text-secondary);
}
:is(
    [data-theme="snow"],
    [data-theme="cream"],
    [data-theme="mint"],
    [data-theme="lavender"],
    [data-theme="ice"]
  )
  .profile-dd-item:hover {
  background: rgba(93, 135, 191, 0.08);
  color: var(--text);
}
:is(
    [data-theme="snow"],
    [data-theme="cream"],
    [data-theme="mint"],
    [data-theme="lavender"],
    [data-theme="ice"]
  )
  .profile-dd-danger {
  color: var(--danger);
}
:is(
    [data-theme="snow"],
    [data-theme="cream"],
    [data-theme="mint"],
    [data-theme="lavender"],
    [data-theme="ice"]
  )
  .profile-dd-danger:hover {
  background: rgba(220, 38, 38, 0.08);
  color: var(--danger);
}
:is(
    [data-theme="snow"],
    [data-theme="cream"],
    [data-theme="mint"],
    [data-theme="lavender"],
    [data-theme="ice"]
  )
  .profile-dd-label {
  color: var(--text-muted);
}
:is(
    [data-theme="snow"],
    [data-theme="cream"],
    [data-theme="mint"],
    [data-theme="lavender"],
    [data-theme="ice"]
  )
  .profile-dd-status-option {
  color: var(--text-secondary);
}
:is(
    [data-theme="snow"],
    [data-theme="cream"],
    [data-theme="mint"],
    [data-theme="lavender"],
    [data-theme="ice"]
  )
  .profile-dd-status-option:hover {
  background: rgba(93, 135, 191, 0.06);
  color: var(--text);
}
:is(
    [data-theme="snow"],
    [data-theme="cream"],
    [data-theme="mint"],
    [data-theme="lavender"],
    [data-theme="ice"]
  )
  .modal-header
  h3 {
  color: var(--text);
}
:is(
    [data-theme="snow"],
    [data-theme="cream"],
    [data-theme="mint"],
    [data-theme="lavender"],
    [data-theme="ice"]
  )
  .welcome-screen {
  color: var(--text);
}
:is(
    [data-theme="snow"],
    [data-theme="cream"],
    [data-theme="mint"],
    [data-theme="lavender"],
    [data-theme="ice"]
  )
  .welcome-screen
  h1,
:is(
    [data-theme="snow"],
    [data-theme="cream"],
    [data-theme="mint"],
    [data-theme="lavender"],
    [data-theme="ice"]
  )
  .welcome-screen
  h2,
:is(
    [data-theme="snow"],
    [data-theme="cream"],
    [data-theme="mint"],
    [data-theme="lavender"],
    [data-theme="ice"]
  )
  .welcome-screen
  p {
  color: var(--text);
}
:is(
    [data-theme="snow"],
    [data-theme="cream"],
    [data-theme="mint"],
    [data-theme="lavender"],
    [data-theme="ice"]
  )
  .music-bot-panel,
:is(
    [data-theme="snow"],
    [data-theme="cream"],
    [data-theme="mint"],
    [data-theme="lavender"],
    [data-theme="ice"]
  )
  .music-bot-panel-inner {
  background: rgba(255, 255, 255, 0.9);
  color: var(--text);
}
:is(
    [data-theme="snow"],
    [data-theme="cream"],
    [data-theme="mint"],
    [data-theme="lavender"],
    [data-theme="ice"]
  )
  .tv-panel,
:is(
    [data-theme="snow"],
    [data-theme="cream"],
    [data-theme="mint"],
    [data-theme="lavender"],
    [data-theme="ice"]
  )
  .tv-panel-inner {
  background: rgba(255, 255, 255, 0.9);
  color: var(--text);
}
:is(
    [data-theme="snow"],
    [data-theme="cream"],
    [data-theme="mint"],
    [data-theme="lavender"],
    [data-theme="ice"]
  )
  .entertainment-panel {
  background: rgba(255, 255, 255, 0.8);
}
:is(
    [data-theme="snow"],
    [data-theme="cream"],
    [data-theme="mint"],
    [data-theme="lavender"],
    [data-theme="ice"]
  )
  .settings-label {
  color: var(--text);
}
:is(
    [data-theme="snow"],
    [data-theme="cream"],
    [data-theme="mint"],
    [data-theme="lavender"],
    [data-theme="ice"]
  )
  .slider-value {
  color: var(--text-secondary);
}
:is(
    [data-theme="snow"],
    [data-theme="cream"],
    [data-theme="mint"],
    [data-theme="lavender"],
    [data-theme="ice"]
  )
  input[type="text"],
:is(
    [data-theme="snow"],
    [data-theme="cream"],
    [data-theme="mint"],
    [data-theme="lavender"],
    [data-theme="ice"]
  )
  input[type="email"],
:is(
    [data-theme="snow"],
    [data-theme="cream"],
    [data-theme="mint"],
    [data-theme="lavender"],
    [data-theme="ice"]
  )
  input[type="url"],
:is(
    [data-theme="snow"],
    [data-theme="cream"],
    [data-theme="mint"],
    [data-theme="lavender"],
    [data-theme="ice"]
  )
  input[type="password"],
:is(
    [data-theme="snow"],
    [data-theme="cream"],
    [data-theme="mint"],
    [data-theme="lavender"],
    [data-theme="ice"]
  )
  textarea,
:is(
    [data-theme="snow"],
    [data-theme="cream"],
    [data-theme="mint"],
    [data-theme="lavender"],
    [data-theme="ice"]
  )
  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"],
    [data-theme="lavender"],
    [data-theme="ice"]
  )
  .device-select {
  color: var(--text);
  background: rgba(0, 0, 0, 0.04);
}
:is(
    [data-theme="snow"],
    [data-theme="cream"],
    [data-theme="mint"],
    [data-theme="lavender"],
    [data-theme="ice"]
  )
  .search-result-item {
  color: var(--text);
}
:is(
    [data-theme="snow"],
    [data-theme="cream"],
    [data-theme="mint"],
    [data-theme="lavender"],
    [data-theme="ice"]
  )
  :is(
    [data-theme="snow"],
    [data-theme="cream"],
    [data-theme="mint"],
    [data-theme="lavender"],
    [data-theme="ice"]
  )
  .mic-test-card {
  background: rgba(0, 0, 0, 0.02);
  color: var(--text);
}
:is(
    [data-theme="snow"],
    [data-theme="cream"],
    [data-theme="mint"],
    [data-theme="lavender"],
    [data-theme="ice"]
  )
  .mic-test-hint {
  color: var(--text-secondary);
}
:is(
    [data-theme="snow"],
    [data-theme="cream"],
    [data-theme="mint"],
    [data-theme="lavender"],
    [data-theme="ice"]
  )
  .mic-test-db {
  color: var(--text);
}
:is(
    [data-theme="snow"],
    [data-theme="cream"],
    [data-theme="mint"],
    [data-theme="lavender"],
    [data-theme="ice"]
  )
  .user-popover {
  background: rgba(255, 255, 255, 0.97);
  color: var(--text);
}
:is(
    [data-theme="snow"],
    [data-theme="cream"],
    [data-theme="mint"],
    [data-theme="lavender"],
    [data-theme="ice"]
  )
  .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"],
    [data-theme="lavender"],
    [data-theme="ice"]
  )
  .welcome-feature-card:hover {
  background: rgba(0, 0, 0, 0.07);
}
:is(
    [data-theme="snow"],
    [data-theme="cream"],
    [data-theme="mint"],
    [data-theme="lavender"],
    [data-theme="ice"]
  )
  .welcome-feature-card
  code {
  background: rgba(0, 0, 0, 0.08);
}
:is(
    [data-theme="snow"],
    [data-theme="cream"],
    [data-theme="mint"],
    [data-theme="lavender"],
    [data-theme="ice"]
  )
  .command-autocomplete {
  background: rgba(255, 255, 255, 0.98);
}
:is(
    [data-theme="snow"],
    [data-theme="cream"],
    [data-theme="mint"],
    [data-theme="lavender"],
    [data-theme="ice"]
  )
  .command-ac-desc {
  color: rgba(0, 0, 0, 0.45);
}
:is(
    [data-theme="snow"],
    [data-theme="cream"],
    [data-theme="mint"],
    [data-theme="lavender"],
    [data-theme="ice"]
  )
  .command-ac-name {
  color: var(--text);
}

/* ── Light Theme Variants: Settings Panel ── */
:is(
    [data-theme="snow"],
    [data-theme="cream"],
    [data-theme="mint"],
    [data-theme="lavender"],
    [data-theme="ice"]
  )
  .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"],
    [data-theme="lavender"],
    [data-theme="ice"]
  )
  .us-sidebar-title {
  color: rgba(0, 0, 0, 0.35);
}
:is(
    [data-theme="snow"],
    [data-theme="cream"],
    [data-theme="mint"],
    [data-theme="lavender"],
    [data-theme="ice"]
  )
  .us-nav-item {
  color: rgba(0, 0, 0, 0.55);
}
:is(
    [data-theme="snow"],
    [data-theme="cream"],
    [data-theme="mint"],
    [data-theme="lavender"],
    [data-theme="ice"]
  )
  .us-nav-item
  .icon {
  opacity: 0.5;
}
:is(
    [data-theme="snow"],
    [data-theme="cream"],
    [data-theme="mint"],
    [data-theme="lavender"],
    [data-theme="ice"]
  )
  .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"],
    [data-theme="lavender"],
    [data-theme="ice"]
  )
  .us-nav-item.active {
  background: rgba(93, 135, 191, 0.1);
  color: var(--primary);
}
:is(
    [data-theme="snow"],
    [data-theme="cream"],
    [data-theme="mint"],
    [data-theme="lavender"],
    [data-theme="ice"]
  )
  .us-nav-item.active
  .icon {
  color: var(--primary);
}
:is(
    [data-theme="snow"],
    [data-theme="cream"],
    [data-theme="mint"],
    [data-theme="lavender"],
    [data-theme="ice"]
  )
  .us-sidebar-footer {
  border-top-color: rgba(0, 0, 0, 0.06);
}
:is(
    [data-theme="snow"],
    [data-theme="cream"],
    [data-theme="mint"],
    [data-theme="lavender"],
    [data-theme="ice"]
  )
  .us-sidebar-user {
  background: rgba(0, 0, 0, 0.03);
}
:is(
    [data-theme="snow"],
    [data-theme="cream"],
    [data-theme="mint"],
    [data-theme="lavender"],
    [data-theme="ice"]
  )
  .us-sidebar-username {
  color: var(--text);
}
:is(
    [data-theme="snow"],
    [data-theme="cream"],
    [data-theme="mint"],
    [data-theme="lavender"],
    [data-theme="ice"]
  )
  .us-main {
  background: rgba(255, 255, 255, 0.99);
}
:is(
    [data-theme="snow"],
    [data-theme="cream"],
    [data-theme="mint"],
    [data-theme="lavender"],
    [data-theme="ice"]
  )
  .us-main-header {
  border-bottom-color: rgba(0, 0, 0, 0.08);
}
:is(
    [data-theme="snow"],
    [data-theme="cream"],
    [data-theme="mint"],
    [data-theme="lavender"],
    [data-theme="ice"]
  )
  .us-main-title {
  color: var(--text);
}
:is(
    [data-theme="snow"],
    [data-theme="cream"],
    [data-theme="mint"],
    [data-theme="lavender"],
    [data-theme="ice"]
  )
  .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"],
    [data-theme="lavender"],
    [data-theme="ice"]
  )
  .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"],
    [data-theme="lavender"],
    [data-theme="ice"]
  )
  .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"],
    [data-theme="lavender"],
    [data-theme="ice"]
  )
  .us-group-title {
  color: rgba(0, 0, 0, 0.6);
}
:is(
    [data-theme="snow"],
    [data-theme="cream"],
    [data-theme="mint"],
    [data-theme="lavender"],
    [data-theme="ice"]
  )
  .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"],
    [data-theme="lavender"],
    [data-theme="ice"]
  )
  .us-status-option:hover {
  background: rgba(0, 0, 0, 0.06);
  color: #000;
}
:is(
    [data-theme="snow"],
    [data-theme="cream"],
    [data-theme="mint"],
    [data-theme="lavender"],
    [data-theme="ice"]
  )
  .us-status-option.active {
  background: rgba(93, 135, 191, 0.1);
  border-color: rgba(93, 135, 191, 0.35);
  color: var(--primary);
}
:is(
    [data-theme="snow"],
    [data-theme="cream"],
    [data-theme="mint"],
    [data-theme="lavender"],
    [data-theme="ice"]
  )
  .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"],
    [data-theme="lavender"],
    [data-theme="ice"]
  )
  .us-profile-hero {
  background: linear-gradient(
    135deg,
    rgba(93, 135, 191, 0.06),
    rgba(139, 92, 246, 0.04)
  );
  border-color: rgba(93, 135, 191, 0.1);
}
:is(
    [data-theme="snow"],
    [data-theme="cream"],
    [data-theme="mint"],
    [data-theme="lavender"],
    [data-theme="ice"]
  )
  .us-hero-name {
  color: var(--text);
}
:is(
    [data-theme="snow"],
    [data-theme="cream"],
    [data-theme="mint"],
    [data-theme="lavender"],
    [data-theme="ice"]
  )
  .us-hero-bio {
  color: rgba(0, 0, 0, 0.55);
}
:is(
    [data-theme="snow"],
    [data-theme="cream"],
    [data-theme="mint"],
    [data-theme="lavender"],
    [data-theme="ice"]
  )
  .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"],
    [data-theme="lavender"],
    [data-theme="ice"]
  )
  .us-stat-value {
  color: var(--text);
}
:is(
    [data-theme="snow"],
    [data-theme="cream"],
    [data-theme="mint"],
    [data-theme="lavender"],
    [data-theme="ice"]
  )
  .us-stat-label {
  color: rgba(0, 0, 0, 0.4);
}
:is(
    [data-theme="snow"],
    [data-theme="cream"],
    [data-theme="mint"],
    [data-theme="lavender"],
    [data-theme="ice"]
  )
  .us-section-title {
  color: rgba(0, 0, 0, 0.5);
}
:is(
    [data-theme="snow"],
    [data-theme="cream"],
    [data-theme="mint"],
    [data-theme="lavender"],
    [data-theme="ice"]
  )
  .us-profile-editor
  .profile-edit-group
  label {
  color: rgba(0, 0, 0, 0.6);
}
:is(
    [data-theme="snow"],
    [data-theme="cream"],
    [data-theme="mint"],
    [data-theme="lavender"],
    [data-theme="ice"]
  )
  .us-profile-editor
  input[type="text"],
:is(
    [data-theme="snow"],
    [data-theme="cream"],
    [data-theme="mint"],
    [data-theme="lavender"],
    [data-theme="ice"]
  )
  .us-profile-editor
  input[type="email"],
:is(
    [data-theme="snow"],
    [data-theme="cream"],
    [data-theme="mint"],
    [data-theme="lavender"],
    [data-theme="ice"]
  )
  .us-profile-editor
  input[type="url"] {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.1);
  color: #000;
}

/* ── Snow/Cream/Mint: Voice Center & Users Panel critical overrides ── */
:is(
    [data-theme="snow"],
    [data-theme="cream"],
    [data-theme="mint"],
    [data-theme="lavender"],
    [data-theme="ice"]
  )
  .voice-center-panel {
  background: rgba(255, 255, 255, 0.75);
  color: var(--text);
}
:is(
    [data-theme="snow"],
    [data-theme="cream"],
    [data-theme="mint"],
    [data-theme="lavender"],
    [data-theme="ice"]
  )
  .users-panel {
  background: rgba(255, 255, 255, 0.75);
  color: var(--text);
}
:is(
    [data-theme="snow"],
    [data-theme="cream"],
    [data-theme="mint"],
    [data-theme="lavender"],
    [data-theme="ice"]
  )
  .vc-header {
  background: rgba(255, 255, 255, 0.6);
  border-bottom-color: rgba(0, 0, 0, 0.08);
}
:is(
    [data-theme="snow"],
    [data-theme="cream"],
    [data-theme="mint"],
    [data-theme="lavender"],
    [data-theme="ice"]
  )
  .vc-bottom-bar {
  background: rgba(255, 255, 255, 0.85);
  border-top-color: rgba(0, 0, 0, 0.08);
}
:is(
    [data-theme="snow"],
    [data-theme="cream"],
    [data-theme="mint"],
    [data-theme="lavender"],
    [data-theme="ice"]
  )
  .vc-bar-btn {
  background: rgba(0, 0, 0, 0.06);
  color: var(--text-secondary);
}
:is(
    [data-theme="snow"],
    [data-theme="cream"],
    [data-theme="mint"],
    [data-theme="lavender"],
    [data-theme="ice"]
  )
  .vc-bar-btn:hover {
  background: rgba(0, 0, 0, 0.1);
  color: var(--text);
}
:is(
    [data-theme="snow"],
    [data-theme="cream"],
    [data-theme="mint"],
    [data-theme="lavender"],
    [data-theme="ice"]
  )
  .vc-bar-badge {
  border-color: rgba(255, 255, 255, 0.85);
}
:is(
    [data-theme="snow"],
    [data-theme="cream"],
    [data-theme="mint"],
    [data-theme="lavender"],
    [data-theme="ice"]
  )
  .vc-settings-drawer {
  background: rgba(255, 255, 255, 0.95);
}
:is(
    [data-theme="snow"],
    [data-theme="cream"],
    [data-theme="mint"],
    [data-theme="lavender"],
    [data-theme="ice"]
  )
  .voice-center-panel
  .participant-name,
:is(
    [data-theme="snow"],
    [data-theme="cream"],
    [data-theme="mint"],
    [data-theme="lavender"],
    [data-theme="ice"]
  )
  .voice-center-panel
  .voice-status,
:is(
    [data-theme="snow"],
    [data-theme="cream"],
    [data-theme="mint"],
    [data-theme="lavender"],
    [data-theme="ice"]
  )
  .users-panel
  .participant-name {
  color: var(--text);
}
:is(
    [data-theme="snow"],
    [data-theme="cream"],
    [data-theme="mint"],
    [data-theme="lavender"],
    [data-theme="ice"]
  )
  .users-panel-header {
  background: rgba(255, 255, 255, 0.6);
  border-bottom-color: rgba(0, 0, 0, 0.08);
}
:is(
    [data-theme="snow"],
    [data-theme="cream"],
    [data-theme="mint"],
    [data-theme="lavender"],
    [data-theme="ice"]
  )
  .users-panel-collapse-btn {
  background: rgba(0, 0, 0, 0.05);
  border-color: rgba(0, 0, 0, 0.1);
  color: var(--text-muted);
}
:is(
    [data-theme="snow"],
    [data-theme="cream"],
    [data-theme="mint"],
    [data-theme="lavender"],
    [data-theme="ice"]
  )
  .users-panel-collapse-btn:hover {
  background: rgba(0, 0, 0, 0.1);
  color: var(--text);
}
:is(
    [data-theme="snow"],
    [data-theme="cream"],
    [data-theme="mint"],
    [data-theme="lavender"],
    [data-theme="ice"]
  )
  .users-panel-expand-btn {
  background: rgba(255, 255, 255, 0.9);
  border-color: rgba(0, 0, 0, 0.1);
  color: var(--text-muted);
}
:is(
    [data-theme="snow"],
    [data-theme="cream"],
    [data-theme="mint"],
    [data-theme="lavender"],
    [data-theme="ice"]
  )
  .users-panel-expand-btn:hover {
  background: rgba(93, 135, 191, 0.1);
  color: var(--text);
}
:is(
    [data-theme="snow"],
    [data-theme="cream"],
    [data-theme="mint"],
    [data-theme="lavender"],
    [data-theme="ice"]
  )
  .users-panel-section {
  border-bottom-color: rgba(0, 0, 0, 0.06);
}
:is(
    [data-theme="snow"],
    [data-theme="cream"],
    [data-theme="mint"],
    [data-theme="lavender"],
    [data-theme="ice"]
  )
  .users-panel-all
  .users-search-wrap
  input {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.1);
}
:is(
    [data-theme="snow"],
    [data-theme="cream"],
    [data-theme="mint"],
    [data-theme="lavender"],
    [data-theme="ice"]
  )
  .tv-viewer-badge,
:is(
    [data-theme="snow"],
    [data-theme="cream"],
    [data-theme="mint"],
    [data-theme="lavender"],
    [data-theme="ice"]
  )
  .ss-viewer-badge {
  background: rgba(93, 135, 191, 0.12);
}
:is(
    [data-theme="snow"],
    [data-theme="cream"],
    [data-theme="mint"],
    [data-theme="lavender"],
    [data-theme="ice"]
  )
  .tv-now-playing {
  background: rgba(239, 68, 68, 0.06);
}
:is(
    [data-theme="snow"],
    [data-theme="cream"],
    [data-theme="mint"],
    [data-theme="lavender"],
    [data-theme="ice"]
  )
  .tv-result-thumb,
:is(
    [data-theme="snow"],
    [data-theme="cream"],
    [data-theme="mint"],
    [data-theme="lavender"],
    [data-theme="ice"]
  )
  .tv-np-thumb {
  background: #e5e7eb;
}

/* ═══════════════════════════════════════════════════════════════ */
/* ═══ 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(93, 135, 191, 0.13);
  color: #fff;
}
.us-nav-item.active .icon {
  opacity: 1;
  color: var(--primary);
}
.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);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.us-sidebar-role {
  font-size: 10px;
}
.us-sidebar-version {
  text-align: center;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.25);
  padding-top: 8px;
  user-select: text;
}

/* ── 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);
  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;
  animation: usTabFadeIn 0.22s ease;
}
.us-tab-content.active {
  display: block;
}
@keyframes usTabFadeIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 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;
}

/* ── Settings Row (unified) ── */
.us-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 12px;
  border-radius: 8px;
  transition: background 0.15s;
  min-height: 40px;
}
.us-row:hover {
  background: rgba(255, 255, 255, 0.03);
}
.us-row-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  flex: 1;
  min-width: 0;
}

/* ── 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);
}

/* ── Update Tab ── */
.update-info-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.update-version-row {
  display: flex;
  align-items: center;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}
.update-version-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 100px;
}
.update-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
}
.update-version {
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
  font-family: monospace;
}
.update-arrow {
  font-size: 20px;
  color: var(--text-muted);
  opacity: 0.5;
}
.update-status-text {
  text-align: center;
  font-size: 13px;
  color: var(--text-muted);
  padding: 4px 0;
}
.update-status-text.success {
  color: var(--success);
}
.update-status-text.available {
  color: var(--primary);
  font-weight: 600;
}
.update-release-notes {
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--text-secondary);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  padding: 12px 14px;
  max-height: 150px;
  overflow-y: auto;
  white-space: pre-wrap;
}
.update-progress-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
}
.update-progress-bar {
  flex: 1;
  height: 8px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  overflow: hidden;
}
.update-progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--primary), #536b8a);
  border-radius: 4px;
  transition: width 0.3s ease;
}
.update-progress-text {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
  min-width: 36px;
  text-align: right;
}
.update-actions {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
}
.update-actions .btn .icon {
  width: 14px;
  height: 14px;
  vertical-align: -2px;
  margin-right: 4px;
}
.update-nav-badge {
  width: 8px;
  height: 8px;
  background: #ef4444;
  border-radius: 50%;
  margin-left: 4px;
  flex-shrink: 0;
  animation: pulse 2s ease-in-out infinite;
}

/* Settings gear button update badge */
#unifiedSettingsBtn {
  position: relative;
}
.settings-update-dot {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 9px;
  height: 9px;
  background: #ef4444;
  border-radius: 50%;
  border: 2px solid var(--bg-primary, #0d1121);
  pointer-events: none;
  animation: pulse 2s ease-in-out infinite;
}

/* ── Update Overlay ── */
/* ── Update Overlay ── */
/* Base container */
.update-overlay {
  position: fixed;
  z-index: 100000;
}
.update-overlay.hidden {
  display: none !important;
}
/* Non-locked: compact floating card in bottom-right corner */
.update-overlay:not(.locked) {
  bottom: 24px;
  right: 24px;
  animation: updateSlideIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* Locked: full-screen backdrop for install/restart phase */
.update-overlay.locked {
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  pointer-events: auto;
  cursor: default;
  animation: updateOverlayFadeIn 0.35s ease;
}
@keyframes updateSlideIn {
  0% {
    opacity: 0;
    transform: translateX(40px) translateY(20px) scale(0.95);
  }
  100% {
    opacity: 1;
    transform: translateX(0) translateY(0) scale(1);
  }
}
@keyframes updateOverlayFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Card */
.update-overlay-card {
  position: relative;
  background: var(--bg-secondary, #151929);
  border: 1px solid rgba(93, 135, 191, 0.12);
  border-radius: 16px;
  overflow: hidden;
  box-shadow:
    0 16px 48px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(93, 135, 191, 0.06);
}
.update-overlay:not(.locked) .update-overlay-card {
  width: 380px;
  max-width: 92vw;
  padding: 20px 22px 18px;
}
.update-overlay.locked .update-overlay-card {
  width: 440px;
  max-width: 92vw;
  padding: 44px 48px 36px;
  text-align: center;
  animation: updateCardScaleIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes updateCardScaleIn {
  0% {
    opacity: 0;
    transform: scale(0.92) translateY(20px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* Decorative gradient accent at top */
.update-overlay-accent {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #7c3aed, #5d87bf, #06b6d4, #10b981);
  background-size: 200% 100%;
  animation: updateAccentShift 3s ease infinite;
}
@keyframes updateAccentShift {
  0%,
  100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

/* Header */
.update-overlay-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}
.update-overlay.locked .update-overlay-header {
  flex-direction: column;
  justify-content: center;
  gap: 12px;
  margin-bottom: 16px;
}

/* Icon */
.update-overlay-icon {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: linear-gradient(
    135deg,
    rgba(93, 135, 191, 0.18),
    rgba(124, 58, 237, 0.12)
  );
  color: #7ba3d4;
  transition: background 0.3s;
}
.update-overlay.locked .update-overlay-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto;
  border-radius: 16px;
}
.update-overlay-icon svg {
  width: 22px;
  height: 22px;
}
.update-overlay.locked .update-overlay-icon svg {
  width: 28px;
  height: 28px;
}
.update-overlay:not(.locked) .update-overlay-icon {
  animation: updateIconFloat 3s ease-in-out infinite;
}
@keyframes updateIconFloat {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-3px);
  }
}
.update-overlay-icon.spin svg {
  animation: updateIconSpin 1.2s linear infinite;
}
.update-overlay-icon.pulse {
  animation: updateIconPulse 2s ease-in-out infinite;
}
@keyframes updateIconSpin {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes updateIconPulse {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.7;
    transform: scale(1.06);
  }
}

/* Header text */
.update-overlay-htext {
  flex: 1;
  min-width: 0;
}
.update-overlay.locked .update-overlay-htext {
  text-align: center;
}
.update-overlay-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary, #e2e8f0);
  margin: 0 0 4px;
  line-height: 1.3;
}
.update-overlay.locked .update-overlay-title {
  font-size: 20px;
  margin: 0 0 8px;
}
.update-overlay-versions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.update-overlay.locked .update-overlay-versions {
  justify-content: center;
  margin-bottom: 10px;
}
.update-overlay-ver {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-muted, #94a3b8);
}
.update-overlay.locked .update-overlay-ver {
  font-size: 13px;
  padding: 4px 12px;
  border-radius: 8px;
}
.update-overlay-ver-new {
  background: rgba(93, 135, 191, 0.15);
  color: #7ba3d4;
}
.update-overlay-arrow {
  color: var(--text-muted, #94a3b8);
  font-size: 12px;
}
.update-overlay.locked .update-overlay-arrow {
  font-size: 15px;
}

/* Steps (hidden in compact mode, shown in locked mode) */
.update-overlay:not(.locked) .update-overlay-steps {
  display: none;
}
.update-overlay-steps {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  margin-bottom: 22px;
}
.update-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  opacity: 0.35;
  transition: opacity 0.35s ease;
}
.update-step.active,
.update-step.done {
  opacity: 1;
}
.update-step-dot {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.35s ease;
  color: var(--text-muted, #94a3b8);
}
.update-step-dot svg {
  width: 14px;
  height: 14px;
}
.update-step.active .update-step-dot {
  background: rgba(93, 135, 191, 0.2);
  color: #7ba3d4;
  box-shadow: 0 0 0 3px rgba(93, 135, 191, 0.15);
}
.update-step.done .update-step-dot {
  background: rgba(34, 197, 94, 0.2);
  color: #22c55e;
}
.update-step span {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted, #94a3b8);
}
.update-step.active span {
  color: #7ba3d4;
}
.update-step.done span {
  color: #22c55e;
}
.update-step-line {
  height: 2px;
  width: 36px;
  background: rgba(255, 255, 255, 0.08);
  margin: 15px 10px 0;
  border-radius: 1px;
  transition: background 0.35s ease;
}
.update-step-line.active {
  background: rgba(93, 135, 191, 0.5);
}
.update-step-line.done {
  background: rgba(34, 197, 94, 0.5);
}

/* Status */
.update-overlay-status {
  font-size: 13px;
  color: var(--text-muted, #94a3b8);
  margin: 0 0 12px;
  min-height: 18px;
}
.update-overlay.locked .update-overlay-status {
  font-size: 14px;
  margin: 0 0 20px;
}

/* Release notes */
.update-overlay-notes {
  font-size: 12px;
  color: var(--text-muted, #94a3b8);
  background: rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 14px;
  max-height: 80px;
  overflow-y: auto;
  text-align: left;
  line-height: 1.5;
}
.update-overlay.locked .update-overlay-notes {
  max-height: 120px;
  padding: 12px 14px;
  margin-bottom: 18px;
}
.update-overlay-notes.hidden {
  display: none;
}

/* Progress */
.update-overlay-progress {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}
.update-overlay.locked .update-overlay-progress {
  width: 85%;
  margin-left: auto;
  margin-right: auto;
  gap: 12px;
  margin-bottom: 24px;
}
.update-overlay-progress-track {
  flex: 1;
  height: 8px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 4px;
  overflow: hidden;
}
.update-overlay.locked .update-overlay-progress-track {
  height: 10px;
  border-radius: 6px;
}
.update-overlay-progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #7c3aed, #5d87bf, #06b6d4);
  border-radius: inherit;
  transition: width 0.3s ease;
  box-shadow: 0 0 8px rgba(93, 135, 191, 0.3);
}
.update-overlay-progress-fill.indeterminate {
  width: 30% !important;
  animation: updateIndeterminate 1.4s ease-in-out infinite;
}
.update-overlay-progress-fill.install-anim {
  width: 100% !important;
  background: linear-gradient(90deg, #7c3aed, #5d87bf, #06b6d4, #7c3aed);
  background-size: 200% 100%;
  animation: updateInstallShimmer 1.5s ease-in-out infinite;
}
@keyframes updateIndeterminate {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(400%);
  }
}
@keyframes updateInstallShimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}
.update-overlay-progress-text {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted, #94a3b8);
  min-width: 32px;
  text-align: right;
}
.update-overlay-progress-text:empty {
  display: none;
}

/* Action buttons */
.update-overlay-actions {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
}
.update-overlay.locked .update-overlay-actions {
  gap: 10px;
}
.update-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
  line-height: 1;
}
.update-overlay.locked .update-btn {
  padding: 10px 20px;
  font-size: 14px;
  border-radius: 12px;
}
.update-btn-icon {
  width: 16px;
  height: 16px;
}
.update-btn-primary {
  background: linear-gradient(135deg, #5d87bf, #7c3aed);
  color: #fff;
  box-shadow: 0 4px 12px rgba(93, 135, 191, 0.3);
}
.update-btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(93, 135, 191, 0.4);
}
.update-btn-primary:active {
  transform: translateY(0);
}
.update-btn-secondary {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-primary, #e2e8f0);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.update-btn-secondary:hover {
  background: rgba(255, 255, 255, 0.1);
}
.update-btn-dismiss {
  background: transparent;
  color: var(--text-muted, #94a3b8);
  padding: 8px 12px;
}
.update-btn-dismiss:hover {
  color: var(--text-primary, #e2e8f0);
  background: rgba(255, 255, 255, 0.04);
}

.electron-only-setting {
  display: none;
}

/* ── Profile Hero Card ── */
.us-profile-hero {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 20px;
  background: linear-gradient(
    135deg,
    rgba(93, 135, 191, 0.08),
    rgba(139, 92, 246, 0.06)
  );
  border: 1px solid rgba(93, 135, 191, 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(93, 135, 191, 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);
  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);
}
.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);
}

/* ── 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(93, 135, 191, 0.15);
  border-color: rgba(93, 135, 191, 0.4);
  color: #fff;
}

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

/* Theme grid in unified settings */

/* 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(93, 135, 191, 0.08);
  border: 1px solid rgba(93, 135, 191, 0.12);
  transition: all 0.2s;
  position: relative;
}
.btn-profile-header:hover {
  background: rgba(93, 135, 191, 0.15);
  border-color: rgba(93, 135, 191, 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);
  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: var(--accent-gradient);
}
.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(93, 135, 191, 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(93, 135, 191, 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);
  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(93, 135, 191, 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);
  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(93, 135, 191, 0.1);
  color: var(--text);
}
.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);
}
.profile-dd-management:hover {
  background: rgba(93, 135, 191, 0.1);
  color: var(--primary);
}
.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);
  font-size: 12.5px;
  cursor: pointer;
  transition: background 0.15s;
  text-align: left;
}
.profile-dd-status-option:hover {
  background: rgba(93, 135, 191, 0.08);
  color: var(--text);
}
.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(93, 135, 191, 0.1);
  color: var(--primary);
}
[data-theme="light"] .us-nav-item.active .icon {
  color: var(--primary);
}
[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(93, 135, 191, 0.1);
  border-color: rgba(93, 135, 191, 0.35);
  color: var(--primary);
}
[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(93, 135, 191, 0.06),
    rgba(139, 92, 246, 0.04)
  );
  border-color: rgba(93, 135, 191, 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;
}

/* ── 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-elevated, 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-elevated, 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-card);
  border-radius: var(--radius-lg, 16px);
  padding: 28px 32px 20px;
  min-width: 320px;
  max-width: 440px;
  border: 1px solid var(--border);
  box-shadow: var(--card-shadow);
  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);
  text-align: center;
  line-height: 1.5;
  white-space: pre-wrap;
}
/* Custom prompt input */
.custom-prompt-input {
  width: 100%;
  background: rgba(15, 18, 30, 0.6);
  border: 1px solid rgba(93, 135, 191, 0.2);
  border-radius: var(--radius-sm, 8px);
  padding: 10px 14px;
  color: var(--text);
  font-size: 14px;
  outline: none;
  font-family: inherit;
  margin-top: 10px;
  box-sizing: border-box;
  transition: border-color 0.2s;
}
.custom-prompt-input:focus {
  border-color: rgba(93, 135, 191, 0.5);
  box-shadow: 0 0 0 3px rgba(93, 135, 191, 0.1);
}
.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);
}

/* ── Context Menu ───────────────────────────────────────────── */
.context-menu {
  position: fixed;
  z-index: 9999;
  min-width: 180px;
  max-width: 260px;
  background: var(--bg-card);
  border-radius: 8px;
  padding: 4px 0;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  border: 1px solid var(--border);
  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);
  }
}

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

/* ── Mention Highlight Mirror (styled @mentions inside textarea) ── */
.input-highlight-wrap {
  position: relative;
  flex: 1;
  min-width: 0;
}

.input-highlight-wrap textarea {
  width: 100%;
  color: transparent;
  caret-color: var(--text);
}

.input-highlight-wrap textarea::selection {
  background: rgba(93, 135, 191, 0.35);
}

.input-highlight-mirror {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 1;
  /* Must match textarea styles exactly */
  padding: 8px 16px;
  border: 1px solid transparent;
  border-radius: 20px;
  font-family: inherit;
  font-size: inherit;
  line-height: 1.4;
  overflow: hidden;
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow-wrap: break-word;
  color: var(--text);
}

.input-highlight-mirror .mention {
  color: var(--secondary);
  background: rgba(6, 182, 212, 0.12);
  padding: 0;
  border-radius: 4px;
  font-weight: 600;
  box-shadow: inset 0 0 0 999px rgba(6, 182, 212, 0.12);
}

.input-highlight-mirror .mention-role {
  color: #fbbf24;
  box-shadow: inset 0 0 0 999px rgba(251, 191, 36, 0.15);
}

/* ── 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.25s cubic-bezier(0.4, 0, 0.2, 1);
  flex-shrink: 0;
  opacity: 0.45;
}
.sidebar-section-header:hover .collapse-arrow {
  opacity: 0.7;
}
.sidebar-section.collapsed .collapse-arrow {
  transform: rotate(-90deg);
}
.sidebar-section.collapsed .channel-list {
  max-height: 0 !important;
  overflow: hidden;
  transition: max-height 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.sidebar-section .channel-list {
  transition: max-height 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Mobile Bottom Nav ──────────────────────────────────────── */
.mobile-bottom-nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: var(--bg-card);
  border-top: 1px solid var(--border);
  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);
  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-card);
  border-radius: var(--radius-lg, 16px);
  border: 1px solid var(--border);
  box-shadow: var(--card-shadow);
  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-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"],
    [data-theme="lavender"],
    [data-theme="ice"]
  )
  .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"],
    [data-theme="lavender"],
    [data-theme="ice"]
  )
  .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"],
    [data-theme="lavender"],
    [data-theme="ice"]
  )
  [data-theme="light"]
  .confirm-cancel-btn:hover,
:is(
    [data-theme="snow"],
    [data-theme="cream"],
    [data-theme="mint"],
    [data-theme="lavender"],
    [data-theme="ice"]
  )
  [data-theme="light"]
  .context-menu,
:is(
    [data-theme="snow"],
    [data-theme="cream"],
    [data-theme="mint"],
    [data-theme="lavender"],
    [data-theme="ice"]
  )
  .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"] .message:hover,
:is(
    [data-theme="snow"],
    [data-theme="cream"],
    [data-theme="mint"],
    [data-theme="lavender"],
    [data-theme="ice"]
  )
  .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"],
    [data-theme="lavender"],
    [data-theme="ice"]
  )
  .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"],
    [data-theme="lavender"],
    [data-theme="ice"]
  )
  .skeleton-avatar,
:is(
    [data-theme="snow"],
    [data-theme="cream"],
    [data-theme="mint"],
    [data-theme="lavender"],
    [data-theme="ice"]
  )
  .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"],
    [data-theme="lavender"],
    [data-theme="ice"]
  )
  .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"],
    [data-theme="lavender"],
    [data-theme="ice"]
  )
  .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"],
    [data-theme="lavender"],
    [data-theme="ice"]
  )
  .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(93, 135, 191, 0.3);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.3),
    0 0 0 1px rgba(93, 135, 191, 0.1);
  backdrop-filter: blur(16px);
  font-size: 13px;
  color: var(--text);
}
.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-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 in message */
.msg-poll {
  position: relative;
  z-index: 1;
  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);
  margin-bottom: 4px;
}
.poll-info {
  font-size: 0.75rem;
  color: var(--text-muted);
  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;
  z-index: 1;
}
.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-count {
  font-size: 0.75rem;
  color: var(--text-muted);
  z-index: 1;
  position: relative;
  min-width: 30px;
  text-align: right;
}
.poll-option-label {
  position: relative;
  z-index: 1;
  flex: 1;
  font-size: 0.85rem;
}

/* ── Bookmarks Panel ─────────────────────────────────────────── */
.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 button in message actions */
.msg-action-btn.bookmark-action {
  color: var(--text-muted);
}
.msg-action-btn.bookmark-action.bookmarked {
  color: #fbbf24;
}
.msg-action-btn.bookmark-action:hover {
  color: #fbbf24;
}

/* ── 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-card);
  border: 1px solid var(--border);
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: var(--card-shadow);
  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(93, 135, 191, 0.12);
  background: rgba(93, 135, 191, 0.04);
  flex-shrink: 0;
}
.channel-tools-tabs {
  display: flex;
  gap: 0;
  flex: 1;
  overflow-x: auto;
  position: relative;
}
.channel-tools-tab {
  padding: 12px 18px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition:
    color 0.25s ease,
    background 0.25s ease,
    border-color 0.3s ease;
  white-space: nowrap;
  position: relative;
}
.channel-tools-tab:hover {
  color: var(--text);
  background: rgba(93, 135, 191, 0.06);
}
.channel-tools-tab.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
  font-weight: 600;
}
.channel-tools-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 0;
}
.ct-tab-content {
  display: none;
  animation: ctTabFadeIn 0.25s ease;
}
.ct-tab-content.active {
  display: block;
}
@keyframes ctTabFadeIn {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.channel-tools-body .channel-info-body {
  padding: 0;
}
.channel-tools-body .pinned-list {
  padding: 8px;
}
.channel-tools-body .bookmarks-list {
  padding: 8px;
}

/* ── Unified Card & Empty-State System (Channel Tools) ───────── */
@keyframes ctCardFadeIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.ct-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  text-align: center;
  gap: 6px;
}
.ct-empty-icon {
  font-size: 36px;
  line-height: 1;
  margin-bottom: 4px;
  opacity: 0.7;
  filter: grayscale(0.2);
}
.ct-empty-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  opacity: 0.8;
}
.ct-empty-desc {
  font-size: 12px;
  color: var(--text-muted);
  max-width: 260px;
  line-height: 1.5;
}

.ct-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 14px;
  background: rgba(93, 135, 191, 0.04);
  border: 1px solid rgba(93, 135, 191, 0.08);
  border-radius: 12px;
  margin-bottom: 6px;
  cursor: pointer;
  transition:
    background 0.2s,
    border-color 0.2s,
    transform 0.15s;
  animation: ctCardFadeIn 0.3s ease both;
}
.ct-card:hover {
  background: rgba(93, 135, 191, 0.09);
  border-color: rgba(93, 135, 191, 0.15);
  transform: translateY(-1px);
}
.ct-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.ct-card-author {
  font-size: 12px;
  font-weight: 600;
  color: var(--primary);
}
.ct-card-time {
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
}
.ct-card-channel {
  font-size: 11px;
  color: var(--text-muted);
  background: rgba(93, 135, 191, 0.08);
  padding: 1px 6px;
  border-radius: 6px;
}
.ct-card-body {
  font-size: 13px;
  color: var(--text, rgba(226, 224, 240, 0.85));
  line-height: 1.5;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.ct-card-actions {
  display: flex;
  gap: 6px;
  margin-top: 2px;
}
.ct-card-btn {
  padding: 4px 12px;
  border: none;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
}
.ct-card-btn-primary {
  background: rgba(93, 135, 191, 0.15);
  color: var(--primary);
}
.ct-card-btn-primary:hover {
  background: rgba(93, 135, 191, 0.25);
}
.ct-card-btn-danger {
  background: rgba(239, 68, 68, 0.1);
  color: #f87171;
}
.ct-card-btn-danger:hover {
  background: rgba(239, 68, 68, 0.2);
}

/* ── Recommended Tag ── */
.recommended-tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 8px;
  background: rgba(34, 197, 94, 0.18);
  color: #22c55e;
  letter-spacing: 0.3px;
  vertical-align: middle;
  margin-left: 6px;
}

/* ── Resource Stats Grid ── */
.resource-stat-box {
  background: rgba(139, 92, 246, 0.08);
  border: 1px solid rgba(139, 92, 246, 0.15);
  border-radius: 8px;
  padding: 8px 10px;
  text-align: center;
}
.resource-stat-box .stat-label {
  display: block;
  font-size: 10px;
  color: var(--text-muted);
  margin-bottom: 2px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.resource-stat-box .stat-value {
  display: block;
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
}
.resource-stat-box .stat-value.good {
  color: #22c55e;
}
.resource-stat-box .stat-value.medium {
  color: #eab308;
}
.resource-stat-box .stat-value.bad {
  color: #ef4444;
}

/* ── 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);
  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);
  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-card);
  border-color: var(--border);
}
[data-theme="light"] .channel-tools-header {
  background: rgba(93, 135, 191, 0.06);
  border-bottom-color: rgba(93, 135, 191, 0.1);
}
[data-theme="light"] .channel-tools-tab.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
}

@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: rgba(10, 8, 20, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  padding: 8px;
  margin: 8px 0;
}
.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);
}
.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);
  text-align: center;
  line-height: 1.2;
}

/* ── Screen Share ─────────────────────────────────────────────── */
.screen-share-container {
  display: none;
  background: rgba(6, 5, 14, 0.85);
  border: 1px solid rgba(93, 135, 191, 0.1);
  border-radius: 10px;
  overflow: hidden;
  margin: 4px 0;
  position: relative;
  flex: 1;
  min-height: 0;
}
/* Show header-only when container is visible but not active (not watching yet) */
.screen-share-container:not(.hidden) {
  display: flex;
  flex-direction: column;
}
.screen-share-container:not(.hidden):not(.active) .screen-share-video {
  display: none;
}
.screen-share-container:not(.hidden):not(.active) .screen-share-fullscreen-btn {
  display: none;
}
.screen-share-container.active {
  display: flex;
  flex-direction: column;
}
.screen-share-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: linear-gradient(
    135deg,
    rgba(93, 135, 191, 0.08),
    rgba(139, 92, 246, 0.05)
  );
  border-bottom: 1px solid rgba(93, 135, 191, 0.1);
  font-size: 0.82rem;
}
.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: 180px;
  max-height: calc(100vh - 280px);
  object-fit: contain;
  background: #000;
  display: block;
  flex: 1;
}
/* 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);
}
/* Fullscreen state for screen share container */
.screen-share-container:fullscreen,
.screen-share-container:-webkit-full-screen {
  background: #000;
  border: none;
  border-radius: 0;
  margin: 0;
}
.screen-share-container:fullscreen .screen-share-video,
.screen-share-container:-webkit-full-screen .screen-share-video {
  max-height: 100vh;
  min-height: 0;
  flex: 1;
}

/* ── 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: #3b4f6a;
}
[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);
  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);
}

/* ── Toolbar Buttons (GIF, Poll, Code Snippet) ────────────────── */

/* ── Responsive adjustments for new features ──────────────────── */
@media (max-width: 768px) {
  .soundboard-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .msg-poll {
    max-width: 100%;
  }
  .tv-player-container {
    width: 96vw;
  }
}

/* ── 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-elevated, rgba(255, 255, 255, 0.06));
  color: var(--text-secondary);
  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, #3b4f6a);
  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);
  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;
  overflow: hidden;
}

/* 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-elevated, 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;
}

/* ── Error Reports Panel ─────────────────────────────────────── */
.reports-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 65vh;
  overflow-y: auto;
}
.report-card {
  background: var(--bg-elevated, rgba(255, 255, 255, 0.04));
  border: 1px solid var(--border, rgba(255, 255, 255, 0.08));
  border-radius: 8px;
  padding: 12px 14px;
}
.report-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}
.report-user {
  font-weight: 600;
  color: var(--text-primary);
}
.report-date {
  font-size: 12px;
  color: var(--text-muted);
  margin-left: auto;
}
.report-header .report-delete-btn {
  padding: 2px 6px;
  font-size: 11px;
  line-height: 1;
  flex-shrink: 0;
}
.report-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.report-message {
  background: rgba(0, 0, 0, 0.15);
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 13px;
  color: var(--text-primary);
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 120px;
  overflow-y: auto;
}
.report-details {
  margin-top: 6px;
}
.report-details summary {
  cursor: pointer;
  font-size: 12px;
  color: var(--accent, #5d87bf);
  user-select: none;
}
.report-details pre {
  margin-top: 4px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 11px;
  color: var(--text-muted);
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 200px;
  overflow-y: auto;
}

/* ─────────────────────────────────────────────────────────────── */
/* Bug Report Form                                                  */
/* ─────────────────────────────────────────────────────────────── */
.bugreport-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.bugreport-form .form-field label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 4px;
}
.bugreport-form .form-field label .text-muted {
  font-weight: 400;
}
.bugreport-form select,
.bugreport-form textarea {
  width: 100%;
  padding: 8px 10px;
  border-radius: 6px;
  border: 1px solid var(--border, rgba(255, 255, 255, 0.1));
  background: var(--bg-input, rgba(0, 0, 0, 0.2));
  color: var(--text-primary);
  font-size: 13px;
  font-family: inherit;
  resize: vertical;
  transition: border-color 0.2s;
}
.bugreport-form select:focus,
.bugreport-form textarea:focus {
  outline: none;
  border-color: var(--primary, #5d87bf);
}
.bugreport-form textarea {
  min-height: 60px;
}
.bugreport-context-preview,
.bugreport-recent-errors {
  margin-top: 4px;
}
.bugreport-context-preview summary,
.bugreport-recent-errors summary {
  cursor: pointer;
  font-size: 12px;
  color: var(--accent, #5d87bf);
  user-select: none;
  font-weight: 500;
}
.bugreport-context-preview pre,
.bugreport-recent-errors pre {
  margin-top: 4px;
  background: rgba(0, 0, 0, 0.15);
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 11px;
  color: var(--text-muted);
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 160px;
  overflow-y: auto;
}
.bugreport-status {
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 13px;
  margin-top: 6px;
}
.bugreport-status-success {
  background: rgba(34, 197, 94, 0.12);
  color: #22c55e;
  border: 1px solid rgba(34, 197, 94, 0.2);
}
.bugreport-status-error {
  background: rgba(239, 68, 68, 0.12);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.2);
}

/* Report card enhancements for category badge */
.report-category-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--primary, #5d87bf);
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.report-category-badge[data-cat="voice"] {
  background: #8b5cf6;
}
.report-category-badge[data-cat="video"] {
  background: #ec4899;
}
.report-category-badge[data-cat="chat"] {
  background: #06b6d4;
}
.report-category-badge[data-cat="connection"] {
  background: #f59e0b;
}
.report-category-badge[data-cat="ui"] {
  background: #10b981;
}
.report-category-badge[data-cat="performance"] {
  background: #ef4444;
}
.report-category-badge[data-cat="login"] {
  background: #6366f1;
}
.report-category-badge[data-cat="other"] {
  background: #64748b;
}

/* Reports filter bar */
.reports-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 12px;
}
.reports-filter-bar select,
.reports-filter-bar input {
  padding: 5px 8px;
  border-radius: 6px;
  border: 1px solid var(--border, rgba(255, 255, 255, 0.1));
  background: var(--bg-input, rgba(0, 0, 0, 0.2));
  color: var(--text-primary);
  font-size: 12px;
}
.reports-filter-bar select:focus,
.reports-filter-bar input:focus {
  outline: none;
  border-color: var(--primary, #5d87bf);
}
.reports-stats-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 12px;
  padding: 10px 12px;
  background: var(--bg-elevated, rgba(255, 255, 255, 0.04));
  border-radius: 8px;
  border: 1px solid var(--border, rgba(255, 255, 255, 0.08));
}
.reports-stat-item {
  font-size: 12px;
  color: var(--text-muted);
}
.reports-stat-item strong {
  color: var(--text-primary);
  font-size: 16px;
  margin-right: 4px;
}
.reports-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 12px;
}
.reports-pagination button {
  padding: 4px 10px;
  font-size: 12px;
}
.reports-pagination span {
  font-size: 12px;
  color: var(--text-muted);
}

/* ─────────────────────────────────────────────────────────────── */
/* Light Theme Comprehensive Fixes                                 */
/* ─────────────────────────────────────────────────────────────── */
:is(
    [data-theme="light"],
    [data-theme="snow"],
    [data-theme="cream"],
    [data-theme="mint"]
  )
  .message-form {
  background: rgba(255, 255, 255, 0.85);
  border-top-color: var(--border);
}

:is(
    [data-theme="light"],
    [data-theme="snow"],
    [data-theme="cream"],
    [data-theme="mint"]
  )
  .message-form
  input,
:is(
    [data-theme="light"],
    [data-theme="snow"],
    [data-theme="cream"],
    [data-theme="mint"]
  )
  .message-form
  textarea {
  background: var(--bg-input);
  border-color: var(--border);
  color: var(--text);
}

:is(
    [data-theme="light"],
    [data-theme="snow"],
    [data-theme="cream"],
    [data-theme="mint"]
  )
  .input-highlight-wrap
  textarea {
  color: transparent;
  caret-color: var(--text);
}

:is(
    [data-theme="light"],
    [data-theme="snow"],
    [data-theme="cream"],
    [data-theme="mint"]
  )
  .message-form
  input:focus,
:is(
    [data-theme="light"],
    [data-theme="snow"],
    [data-theme="cream"],
    [data-theme="mint"]
  )
  .message-form
  textarea:focus {
  background: var(--bg-card);
  border-color: var(--primary);
}

:is(
    [data-theme="light"],
    [data-theme="snow"],
    [data-theme="cream"],
    [data-theme="mint"]
  )
  .message-form-wrap {
  background: transparent;
}

:is(
    [data-theme="light"],
    [data-theme="snow"],
    [data-theme="cream"],
    [data-theme="mint"]
  )
  .glass {
  background: rgba(255, 255, 255, 0.88);
  border-color: var(--border);
}

:is(
    [data-theme="light"],
    [data-theme="snow"],
    [data-theme="cream"],
    [data-theme="mint"]
  )
  .sidebar {
  background: var(--bg-card);
  border-right-color: var(--border);
}

:is(
    [data-theme="light"],
    [data-theme="snow"],
    [data-theme="cream"],
    [data-theme="mint"]
  )
  .voice-panel {
  background: var(--bg-card);
}

:is(
    [data-theme="light"],
    [data-theme="snow"],
    [data-theme="cream"],
    [data-theme="mint"]
  )
  .msg-poll
  .poll-option {
  background: var(--bg-input);
  border-color: var(--border);
}

:is(
    [data-theme="light"],
    [data-theme="snow"],
    [data-theme="cream"],
    [data-theme="mint"]
  )
  .msg-poll
  .poll-option.voted {
  border-color: var(--primary);
  background: rgba(93, 135, 191, 0.08);
}

:is(
    [data-theme="light"],
    [data-theme="snow"],
    [data-theme="cream"],
    [data-theme="mint"]
  )
  .msg-poll
  .poll-option-bar {
  background: rgba(93, 135, 191, 0.15);
}

:is(
    [data-theme="light"],
    [data-theme="snow"],
    [data-theme="cream"],
    [data-theme="mint"]
  )
  .channel-info-member:hover {
  background: rgba(93, 135, 191, 0.08);
}

:is(
    [data-theme="light"],
    [data-theme="snow"],
    [data-theme="cream"],
    [data-theme="mint"]
  )
  .modal-card,
:is(
    [data-theme="light"],
    [data-theme="snow"],
    [data-theme="cream"],
    [data-theme="mint"]
  )
  .modal-content {
  background: var(--bg-card);
  border-color: var(--border);
  color: var(--text);
}

:is(
    [data-theme="light"],
    [data-theme="snow"],
    [data-theme="cream"],
    [data-theme="mint"]
  )
  .dm-panel {
  background: var(--bg-card);
}

:is(
    [data-theme="light"],
    [data-theme="snow"],
    [data-theme="cream"],
    [data-theme="mint"]
  )
  .shortcut-row
  kbd {
  background: var(--bg-input);
  color: var(--text);
  border-color: var(--border);
}

:is(
    [data-theme="light"],
    [data-theme="snow"],
    [data-theme="cream"],
    [data-theme="mint"]
  )
  .settings-row {
  border-bottom-color: var(--border-light);
}

:is(
    [data-theme="light"],
    [data-theme="snow"],
    [data-theme="cream"],
    [data-theme="mint"]
  )
  .us-group {
  background: var(--bg-card);
  border-color: var(--border-light);
}

:is(
    [data-theme="light"],
    [data-theme="snow"],
    [data-theme="cream"],
    [data-theme="mint"]
  )
  .screen-share-container {
  background: rgba(255, 255, 255, 0.95);
  border-color: var(--border);
}
:is(
    [data-theme="light"],
    [data-theme="snow"],
    [data-theme="cream"],
    [data-theme="mint"]
  )
  .camera-grid {
  background: rgba(255, 255, 255, 0.95);
  border-color: var(--border);
}
:is(
    [data-theme="light"],
    [data-theme="snow"],
    [data-theme="cream"],
    [data-theme="mint"]
  )
  .camera-tile {
  background: #f1f5f9;
}
:is(
    [data-theme="light"],
    [data-theme="snow"],
    [data-theme="cream"],
    [data-theme="mint"]
  )
  .camera-tile-name {
  color: #1e293b;
  text-shadow: none;
}

/* ══════════════════════════════════════════════════════════════ */
/* ══ Screen Share Control Buttons + State Classes ════════════ */
/* ══════════════════════════════════════════════════════════════ */
.active-muted {
  background: rgba(239, 68, 68, 0.25) !important;
  color: #f87171 !important;
}
.active-camera {
  background: rgba(16, 185, 129, 0.25) !important;
  color: #34d399 !important;
}
.active-share {
  background: rgba(59, 130, 246, 0.25) !important;
  border-color: rgba(59, 130, 246, 0.4) !important;
  color: #60a5fa !important;
  box-shadow: 0 0 10px rgba(59, 130, 246, 0.15);
}

/* ══════════════════════════════════════════════════════════════ */
/* ══ Camera Video Grid (Inline in vc-body) ══════════════════ */
/* ══════════════════════════════════════════════════════════════ */
.camera-grid {
  position: relative;
  z-index: 1;
  width: 100%;
  border: 1px solid rgba(16, 185, 129, 0.1);
  border-radius: 10px;
  overflow: hidden;
  background: rgba(6, 5, 14, 0.85);
  margin: 4px 0;
}
.camera-grid-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: linear-gradient(
    135deg,
    rgba(16, 185, 129, 0.1),
    rgba(52, 211, 153, 0.06)
  );
  border-bottom: 1px solid rgba(16, 185, 129, 0.12);
  font-size: 0.82rem;
  color: var(--text);
  font-weight: 500;
}
.camera-grid-header .icon {
  width: 16px;
  height: 16px;
}
.camera-grid-count {
  background: rgba(16, 185, 129, 0.2);
  color: #34d399;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 10px;
}
#cameraWatchBtn {
  margin-left: auto;
  font-size: 0.75rem;
  padding: 3px 10px;
  white-space: nowrap;
}
.camera-grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 4px;
  padding: 4px;
  max-height: 50vh;
  overflow-y: auto;
}
/* 1 user: full width, 2 users: 50/50, 3+: auto grid */
.camera-grid-container:has(.camera-tile:nth-child(2):last-child) {
  grid-template-columns: repeat(2, 1fr);
}
.camera-grid-container:has(.camera-tile:only-child) {
  grid-template-columns: 1fr;
}
.camera-tile {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  background: #111;
  aspect-ratio: 16 / 9;
  min-height: 140px;
}
.camera-tile-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: #000;
}
.camera-tile-local .camera-tile-video {
  /* Camera shows as others see it — no mirror */
  transform: none;
}
.camera-tile-label {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 6px 10px;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.75));
  display: flex;
  align-items: center;
  gap: 6px;
}
.camera-tile-name {
  font-size: 0.78rem;
  color: #fff;
  font-weight: 500;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}
.camera-tile-badge {
  font-size: 0.65rem;
  background: rgba(16, 185, 129, 0.3);
  color: #34d399;
  padding: 1px 6px;
  border-radius: 6px;
  font-weight: 600;
}

/* ══════════════════════════════════════════════════════════════ */
/* ══ TV Error / Open External Overlay ═══════════════════════ */
/* ══════════════════════════════════════════════════════════════ */
.tv-open-external {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  background: rgba(10, 8, 20, 0.92);
  z-index: 5;
  padding: 24px;
  text-align: center;
}
.tv-error-icon {
  font-size: 3rem;
}
.tv-error-msg {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.95rem;
  max-width: 360px;
  line-height: 1.5;
}
.tv-error-btn {
  padding: 10px 24px !important;
  font-size: 0.9rem !important;
  border-radius: 10px !important;
  text-decoration: none !important;
}
.tv-error-close {
  background: transparent !important;
  color: rgba(255, 255, 255, 0.4) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  font-size: 0.8rem !important;
}
.tv-error-close:hover {
  color: #fff !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
}

/* Responsive camera grid */
@media (max-width: 600px) {
  .camera-grid-container {
    grid-template-columns: 1fr;
  }
  .camera-tile {
    min-height: 120px;
  }
}

/* ══════════════════════════════════════════════════════════════ */
/* ══ Screen Share Resolution Picker — Modern UI ═════════════ */
/* ══════════════════════════════════════════════════════════════ */
.ss-picker-overlay {
  z-index: 10050;
}
.ss-picker-overlay.active .ss-picker-card {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.ss-picker-card {
  max-width: 480px;
  width: 90vw;
  padding: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(16px) scale(0.96);
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.ss-picker-header {
  text-align: center;
  padding: 28px 24px 16px;
  background: linear-gradient(
    135deg,
    rgba(93, 135, 191, 0.12),
    rgba(139, 92, 246, 0.08)
  );
  border-bottom: 1px solid rgba(93, 135, 191, 0.1);
}
.ss-picker-icon {
  font-size: 2.2rem;
  margin-bottom: 8px;
}
.ss-picker-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 4px;
}
.ss-picker-subtitle {
  font-size: 0.82rem;
  color: var(--text-muted);
}
.ss-picker-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  padding: 20px;
}
.ss-picker-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 20px 12px 16px;
  border-radius: 14px;
  border: 2px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.03);
  cursor: pointer;
  transition: all 0.25s;
  overflow: hidden;
}
.ss-picker-item::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 14px;
  background: linear-gradient(
    135deg,
    var(--item-color, #5d87bf) 0%,
    transparent 60%
  );
  opacity: 0;
  transition: opacity 0.25s;
}
.ss-picker-item:hover::before {
  opacity: 0.08;
}
.ss-picker-item:hover {
  border-color: var(--item-color, rgba(93, 135, 191, 0.4));
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}
.ss-picker-item.disabled {
  opacity: 0.35;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}
.ss-picker-item.disabled::before {
  display: none;
}
.ss-picker-item.recommended {
  border-color: rgba(93, 135, 191, 0.35);
  background: rgba(93, 135, 191, 0.06);
}
.ss-picker-badge {
  position: absolute;
  top: 6px;
  right: 6px;
  font-size: 0.65rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 6px;
  background: var(--primary);
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  z-index: 1;
}
.ss-picker-badge-locked {
  background: rgba(239, 68, 68, 0.6);
}
.ss-picker-item-icon {
  font-size: 1.6rem;
  z-index: 1;
  position: relative;
}
.ss-picker-item-label {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  z-index: 1;
  position: relative;
}
.ss-picker-item-sub {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--item-color, var(--primary));
  z-index: 1;
  position: relative;
}
.ss-picker-item-dim {
  font-size: 0.7rem;
  color: var(--text-muted);
  z-index: 1;
  position: relative;
}
.ss-picker-fps {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.ss-picker-fps-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text);
}
.ss-picker-fps-options {
  display: flex;
  gap: 6px;
}
.ss-picker-fps-btn {
  padding: 6px 16px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-muted);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}
.ss-picker-fps-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text);
}
.ss-picker-fps-btn.active {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}
.ss-picker-fps-btn.disabled {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}
.ss-picker-actions {
  display: flex;
  justify-content: center;
  padding: 12px 20px 20px;
}
.ss-picker-cancel {
  padding: 8px 32px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-muted);
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.2s;
}
.ss-picker-cancel:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text);
}

/* ══════════════════════════════════════════════════════════════ */
/* ══ Custom Screen Picker — Ekran/Pencere Seçici ════════════ */
/* ══════════════════════════════════════════════════════════════ */
.scr-picker-overlay {
  position: fixed;
  inset: 0;
  z-index: 10100;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.25s ease;
}
.scr-picker-overlay.active {
  opacity: 1;
}
.scr-picker-overlay.active .scr-picker-card {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.scr-picker-card {
  width: 680px;
  max-width: 94vw;
  max-height: 82vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  opacity: 0;
  transform: translateY(20px) scale(0.95);
  transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  border-radius: 18px;
  box-shadow:
    0 24px 80px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(255, 255, 255, 0.06);
}

/* Header */
.scr-picker-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  flex-shrink: 0;
}
.scr-picker-header-left {
  display: flex;
  align-items: center;
  gap: 10px;
}
.scr-picker-header-icon {
  width: 22px;
  height: 22px;
  color: var(--primary, #5d87bf);
}
.scr-picker-header h3 {
  font-size: 1rem;
  font-weight: 700;
  margin: 0;
  color: var(--text);
}
.scr-picker-close {
  background: rgba(255, 255, 255, 0.06);
  border: none;
  color: var(--text-muted);
  width: 32px;
  height: 32px;
  border-radius: 8px;
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}
.scr-picker-close:hover {
  background: rgba(239, 68, 68, 0.15);
  color: #f87171;
}

/* Tabs */
.scr-picker-tabs {
  display: flex;
  gap: 2px;
  padding: 10px 20px 0;
  flex-shrink: 0;
}
.scr-picker-tab {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border: none;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--text-muted);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  border-radius: 8px 8px 0 0;
}
.scr-picker-tab .icon {
  width: 16px;
  height: 16px;
}
.scr-picker-tab:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.04);
}
.scr-picker-tab.active {
  color: var(--primary, #5d87bf);
  border-bottom-color: var(--primary, #5d87bf);
  background: rgba(93, 135, 191, 0.06);
}
.scr-picker-tab-count {
  font-size: 0.7rem;
  font-weight: 700;
  background: rgba(93, 135, 191, 0.2);
  color: var(--primary, #a5b4fc);
  padding: 1px 6px;
  border-radius: 6px;
  min-width: 18px;
  text-align: center;
}

/* Source grid */
.scr-picker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
  padding: 16px 20px;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}
.scr-picker-grid.hidden {
  display: none;
}
.scr-picker-grid-windows {
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
}

/* Source item */
.scr-picker-source {
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.03);
  border: 2px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.2s ease;
  padding: 0;
}
.scr-picker-source:hover {
  border-color: rgba(93, 135, 191, 0.5);
  background: rgba(93, 135, 191, 0.06);
  transform: translateY(-2px);
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.25),
    0 0 0 1px rgba(93, 135, 191, 0.2);
}
.scr-picker-source:active {
  transform: translateY(0) scale(0.98);
}

/* Thumbnail */
.scr-picker-thumb {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: rgba(0, 0, 0, 0.3);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.scr-picker-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Source info */
.scr-picker-source-info {
  padding: 8px 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.scr-picker-source-name {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}

/* Footer */
.scr-picker-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  flex-shrink: 0;
}
.scr-picker-hint {
  font-size: 0.78rem;
  color: var(--text-muted);
}
.scr-picker-cancel-btn {
  padding: 7px 24px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-muted);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}
.scr-picker-cancel-btn:hover {
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.2);
  color: #f87171;
}

/* ══════════════════════════════════════════════════════════════ */
/* ══ Poll Voters Button + Modal — Modern UI ═════════════════ */
/* ══════════════════════════════════════════════════════════════ */
.poll-voters-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 8px;
  border: none;
  background: rgba(124, 58, 237, 0.1);
  color: var(--primary);
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  z-index: 1;
  position: relative;
  margin-top: 2px;
}
.poll-voters-btn:hover {
  background: rgba(124, 58, 237, 0.2);
  transform: scale(1.03);
}
.poll-option .poll-voters-btn {
  margin-left: auto;
  flex-shrink: 0;
}
.poll-voters-overlay {
  z-index: 10010;
}
.poll-voters-overlay.active .poll-voters-card {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.poll-voters-card {
  max-width: 380px;
  width: 90vw;
  padding: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(16px) scale(0.96);
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.poll-voters-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  background: linear-gradient(
    135deg,
    rgba(124, 58, 237, 0.12),
    rgba(93, 135, 191, 0.08)
  );
  border-bottom: 1px solid rgba(124, 58, 237, 0.1);
}
.poll-voters-title {
  display: flex;
  align-items: center;
  gap: 12px;
}
.poll-voters-icon {
  font-size: 1.4rem;
}
.poll-voters-label {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text);
}
.poll-voters-count {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: 2px;
}
.poll-voters-close {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  transition: all 0.2s;
}
.poll-voters-close:hover {
  background: rgba(255, 255, 255, 0.15);
  color: var(--text);
}
.poll-voters-list {
  max-height: 360px;
  overflow-y: auto;
  padding: 8px 0;
}
.poll-voter-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 20px;
  transition: background 0.15s;
}
.poll-voter-item:hover {
  background: rgba(255, 255, 255, 0.04);
}
.poll-voter-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), #536b8a);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.82rem;
  font-weight: 700;
  flex-shrink: 0;
}
.poll-voter-name {
  flex: 1;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--text);
}
.poll-voter-index {
  font-size: 0.72rem;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.poll-voters-more-btn {
  display: block;
  width: calc(100% - 40px);
  margin: 8px 20px;
  padding: 10px;
  border-radius: 10px;
  border: 1px dashed rgba(124, 58, 237, 0.25);
  background: rgba(124, 58, 237, 0.06);
  color: var(--primary);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  transition: all 0.2s;
}
.poll-voters-more-btn:hover {
  background: rgba(124, 58, 237, 0.12);
  border-color: rgba(124, 58, 237, 0.4);
}

/* ── Poll expired state ──────────────────────────────────────── */
.poll-option.poll-expired {
  opacity: 0.6;
  cursor: default;
}
.poll-option.poll-expired:hover {
  background: rgba(255, 255, 255, 0.02);
  border-color: rgba(255, 255, 255, 0.06);
}

/* ── Collapsible Long Messages ───────────────────────────────── */
.msg-collapsible {
  position: relative;
}
.msg-collapsible.msg-collapsed {
  max-height: 200px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 60%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 60%, transparent 100%);
}
.msg-collapse-toggle {
  display: block;
  width: 100%;
  padding: 6px 12px;
  margin-top: 4px;
  border: 1px solid rgba(93, 135, 191, 0.2);
  border-radius: 6px;
  background: rgba(93, 135, 191, 0.08);
  color: var(--primary);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  text-align: center;
  transition: all 0.2s;
}
.msg-collapse-toggle:hover {
  background: rgba(93, 135, 191, 0.15);
  border-color: rgba(93, 135, 191, 0.35);
}

/* ═══════════════════════════════════════════════════════════════
   Audio Processing Engine Selector (BETA)
   ═══════════════════════════════════════════════════════════════ */
.audio-engine-selector {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.audio-engine-option {
  display: block;
  cursor: pointer;
}
.audio-engine-option input[type="radio"] {
  display: none;
}
.audio-engine-card {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 14px;
  border: 1.5px solid rgba(93, 135, 191, 0.12);
  border-radius: 8px;
  background: rgba(93, 135, 191, 0.04);
  transition: all 0.2s ease;
}
.audio-engine-card:hover {
  background: rgba(93, 135, 191, 0.08);
  border-color: rgba(93, 135, 191, 0.25);
}
.audio-engine-option input[type="radio"]:checked + .audio-engine-card {
  border-color: var(--primary);
  background: rgba(93, 135, 191, 0.12);
  box-shadow: 0 0 0 1px rgba(93, 135, 191, 0.3);
}
.audio-engine-option input[type="radio"]:disabled + .audio-engine-card {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}
.audio-engine-option input[type="radio"]:disabled + .audio-engine-card:hover {
  background: rgba(93, 135, 191, 0.04);
  border-color: rgba(93, 135, 191, 0.12);
}
.audio-engine-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 6px;
}
.audio-engine-desc {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.4;
}
.badge-beta {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: #fb923c;
  background: rgba(251, 146, 60, 0.12);
  border: 1px solid rgba(251, 146, 60, 0.25);
  border-radius: 4px;
  padding: 1px 5px;
  vertical-align: middle;
}
.badge-soon {
  display: inline-block;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.3px;
  color: var(--text-muted);
  background: rgba(156, 163, 175, 0.1);
  border: 1px solid rgba(156, 163, 175, 0.2);
  border-radius: 4px;
  padding: 1px 5px;
  vertical-align: middle;
}
.audio-engine-status {
  font-size: 11px;
  padding: 6px 10px;
  margin-top: 6px;
  border-radius: 6px;
  background: rgba(251, 146, 60, 0.08);
  border: 1px solid rgba(251, 146, 60, 0.2);
  color: #fb923c;
}
.audio-engine-status.status-ok {
  background: rgba(34, 197, 94, 0.08);
  border-color: rgba(34, 197, 94, 0.2);
  color: #22c55e;
}
.audio-engine-status.status-error {
  background: rgba(248, 113, 113, 0.08);
  border-color: rgba(248, 113, 113, 0.2);
  color: #f87171;
}

/* ═══════════════════════════════════════════════════════════════
   Game Activity & Enhanced Notifications
   ═══════════════════════════════════════════════════════════════ */

/* Game activity tag in user list */
.user-info-game {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 10px;
  color: #a3c1e0;
  margin-top: 2px;
  line-height: 1.3;
  background: rgba(139, 92, 246, 0.08);
  padding: 1px 6px 1px 2px;
  border-radius: 6px;
}

/* Game activity status in settings */
.game-activity-status {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  margin-top: 8px;
  border-radius: 8px;
  background: rgba(167, 139, 250, 0.1);
  border: 1px solid rgba(167, 139, 250, 0.25);
  color: #8badc8;
  font-size: 13px;
  font-weight: 500;
}

.game-activity-status.hidden {
  display: none;
}

/* ── Game Library Tab ── */
.game-lib-title {
  display: flex;
  align-items: center;
  gap: 8px;
}
.game-lib-count {
  font-size: 13px;
  color: var(--text-muted);
  font-weight: 400;
}
.game-lib-scan-btn {
  margin-left: auto;
  background: rgba(93, 135, 191, 0.15);
  border: 1px solid rgba(93, 135, 191, 0.3);
  border-radius: 6px;
  padding: 4px 8px;
  cursor: pointer;
  color: var(--primary-text);
  display: flex;
  align-items: center;
  transition:
    background 0.2s,
    transform 0.2s;
}
.game-lib-scan-btn:hover {
  background: rgba(93, 135, 191, 0.25);
}
.game-lib-scan-btn .icon {
  width: 16px;
  height: 16px;
}
.game-lib-scan-btn.scanning .icon {
  animation: spin 0.8s linear infinite;
}
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.game-lib-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}
.game-filter-btn {
  padding: 5px 12px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-muted);
  font-size: 12px;
  cursor: pointer;
  transition:
    background 0.2s,
    border-color 0.2s,
    color 0.2s;
}
.game-filter-btn:hover {
  background: rgba(93, 135, 191, 0.1);
  border-color: rgba(93, 135, 191, 0.3);
}
.game-filter-btn.active {
  background: rgba(93, 135, 191, 0.2);
  border-color: rgba(93, 135, 191, 0.5);
  color: #fff;
}
.game-lib-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
}
.game-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition:
    background 0.2s,
    border-color 0.2s,
    transform 0.15s;
  cursor: default;
}
.game-card:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.1);
  transform: translateY(-1px);
}
.game-card.playing {
  border-color: rgba(16, 185, 129, 0.4);
  background: rgba(16, 185, 129, 0.06);
}
.game-card-badge {
  display: inline-flex;
  align-self: flex-start;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 600;
  color: #fff;
}
.game-card-name {
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  line-height: 1.3;
}
.game-card-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
}
.game-card-source {
  color: var(--text-muted);
}
.game-card-playing {
  color: #10b981;
  font-weight: 600;
  animation: pulse-green 2s infinite;
}
@keyframes pulse-green {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}
.game-lib-empty {
  text-align: center;
  padding: 32px 16px;
  color: var(--text-muted);
}
.game-lib-empty.hidden {
  display: none;
}
.game-lib-empty-icon {
  font-size: 48px;
  margin-bottom: 12px;
}
.game-lib-empty-hint {
  font-size: 12px;
  opacity: 0.6;
  margin-top: 4px;
}

/* Now playing section */
.game-live-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  background: #10b981;
  border-radius: 50%;
  animation: pulse-green 2s infinite;
}
.game-now-playing {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.game-now-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: rgba(16, 185, 129, 0.06);
  border: 1px solid rgba(16, 185, 129, 0.2);
  border-radius: 10px;
}
.game-now-icon {
  font-size: 28px;
  flex-shrink: 0;
}
.game-now-info {
  flex: 1;
  min-width: 0;
}
.game-now-name {
  font-size: 15px;
  font-weight: 600;
  color: #fff;
}
.game-now-cat {
  font-size: 12px;
  color: var(--text-muted);
}
.game-now-live {
  color: #10b981;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
  animation: pulse-green 2s infinite;
}
/* Active game picker — when multiple games detected */
.game-now-item.game-now-active {
  background: rgba(16, 185, 129, 0.12);
  border-color: rgba(16, 185, 129, 0.35);
  box-shadow: 0 0 12px rgba(16, 185, 129, 0.08);
}
.game-now-badge-active {
  color: #10b981;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
  letter-spacing: 0.3px;
  animation: pulse-green 2s infinite;
}
.game-now-pick-btn {
  flex-shrink: 0;
  padding: 5px 14px;
  border: 1px solid rgba(93, 135, 191, 0.4);
  border-radius: 8px;
  background: rgba(93, 135, 191, 0.12);
  color: #7ba3d4;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}
.game-now-pick-btn:hover {
  background: rgba(93, 135, 191, 0.25);
  border-color: rgba(93, 135, 191, 0.6);
  color: #a5b4fc;
  transform: scale(1.04);
}
.game-now-pick-btn:active {
  transform: scale(0.97);
}
.game-now-hint {
  text-align: center;
  font-size: 11px;
  color: var(--text-muted);
  padding: 6px 0 2px;
  opacity: 0.7;
}
.game-no-activity {
  padding: 16px;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
}

/* Friends playing */
.game-friends-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.game-friend-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
}
.game-friend-name {
  font-size: 13px;
  font-weight: 600;
  color: #fff;
}
.game-friend-game {
  font-size: 12px;
  font-weight: 500;
}

/* Settings hint inline */
.settings-hint-inline {
  display: block;
  font-size: 11px;
  color: var(--text-muted);
  margin-top: -2px;
  flex: 1;
}

/* Settings row with hint */
.settings-row {
  flex-wrap: wrap;
}

.settings-row .settings-hint-inline {
  width: 100%;
  order: 3;
  margin-top: 2px;
  margin-bottom: 4px;
}

/* User popover game activity */
.user-popover-game {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  margin-top: 4px;
  border-radius: 6px;
  background: rgba(167, 139, 250, 0.08);
  border: 1px solid rgba(167, 139, 250, 0.15);
  font-size: 12px;
  color: #8badc8;
}

/* Notification permission banner enhancement */
.notification-permission-banner {
  animation: slideInFromTop 0.3s ease-out;
}

@keyframes slideInFromTop {
  from {
    transform: translateY(-100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* ── Permission Management ───────────────────────────────── */
.perm-role-section {
  margin-bottom: 20px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.perm-role-title {
  font-size: 14px;
  font-weight: 600;
  color: #e2e8f0;
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.perm-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 8px;
}
.perm-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
}
.perm-label {
  font-size: 13px;
  color: #94a3b8;
}

/* ── Global Shortcut Card UI ──────────────────────────────── */
.shortcut-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 12px 16px;
  margin-bottom: 8px;
  transition:
    background 0.2s,
    border-color 0.2s;
}
.shortcut-card:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.14);
}
.shortcut-card-info {
  display: flex;
  align-items: center;
  gap: 12px;
}
.shortcut-card-icon {
  font-size: 20px;
  width: 32px;
  text-align: center;
  flex-shrink: 0;
}
.shortcut-card-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #e2e8f0;
}
.shortcut-card-desc {
  display: block;
  font-size: 11px;
  color: #94a3b8;
  margin-top: 2px;
}
.shortcut-card-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.shortcut-reset-row {
  display: flex;
  justify-content: flex-end;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.us-group-hint {
  font-size: 12px;
  color: #64748b;
  margin: -4px 0 10px;
}
.shortcut-key-display {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 13px;
  color: #e2e8f0;
  min-width: 120px;
  text-align: center;
  font-family: monospace;
  transition: all 0.2s;
}
.shortcut-key-display.recording {
  background: rgba(59, 130, 246, 0.15);
  border-color: #3b82f6;
  color: #93c5fd;
  animation: pulse-border 1s infinite;
}
@keyframes pulse-border {
  0%,
  100% {
    border-color: #3b82f6;
  }
  50% {
    border-color: rgba(59, 130, 246, 0.4);
  }
}
.shortcut-bind-btn,
.shortcut-clear-btn {
  font-size: 12px;
  padding: 3px 8px;
}
.btn-ghost {
  background: transparent;
  color: #94a3b8;
  border: none;
  cursor: pointer;
}
.btn-ghost:hover {
  color: #e2e8f0;
}
.btn-outline {
  background: transparent;
  color: #93c5fd;
  border: 1px solid rgba(59, 130, 246, 0.3);
  border-radius: 4px;
  cursor: pointer;
}
.btn-outline:hover {
  background: rgba(59, 130, 246, 0.1);
}
/* Light theme shortcut cards */
[data-theme="light"] .shortcut-card {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.08);
}
[data-theme="light"] .shortcut-card:hover {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.14);
}
[data-theme="light"] .shortcut-card-label {
  color: #1e293b;
}
[data-theme="light"] .shortcut-card-desc {
  color: #64748b;
}
[data-theme="light"] .shortcut-key-display {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.12);
  color: #1e293b;
}
[data-theme="light"] .shortcut-reset-row {
  border-top-color: rgba(0, 0, 0, 0.06);
}
[data-theme="light"] .us-group-hint {
  color: #94a3b8;
}

/* ═══════════════════════════════════════════════════════════════
   LIGHT THEME – Universal contrast & role fixes
   Applies to all light themes (light, snow, cream, mint)
   ═══════════════════════════════════════════════════════════════ */
:is(
  [data-theme="light"],
  [data-theme="snow"],
  [data-theme="cream"],
  [data-theme="mint"]
) {
  --role-superadmin: #b45309;
  --role-superadmin-glow: rgba(180, 83, 9, 0.25);
  --role-superadmin-gradient: linear-gradient(
    135deg,
    #92400e,
    #b45309,
    #d97706
  );
  --role-admin: #dc2626;
  --role-admin-glow: rgba(220, 38, 38, 0.2);
  --role-admin-gradient: linear-gradient(135deg, #b91c1c, #dc2626, #ef4444);
  --role-moderator: #2563eb;
  --role-moderator-glow: rgba(37, 99, 235, 0.2);
  --role-moderator-gradient: linear-gradient(135deg, #1d4ed8, #2563eb, #3b82f6);
}

/* Superadmin name shimmer — darker gold for light themes */
:is(
    [data-theme="light"],
    [data-theme="snow"],
    [data-theme="cream"],
    [data-theme="mint"]
  )
  .name-superadmin {
  background: linear-gradient(90deg, #92400e, #b45309, #d97706, #92400e);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Avatar badges — ensure white text on light bg gradients */
:is(
    [data-theme="light"],
    [data-theme="snow"],
    [data-theme="cream"],
    [data-theme="mint"]
  )
  .avatar-superadmin {
  color: #fff !important;
}

/* Modal card shadow — softer for light themes */
:is(
    [data-theme="light"],
    [data-theme="snow"],
    [data-theme="cream"],
    [data-theme="mint"]
  )
  .modal-card {
  background: var(--bg-card);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.12),
    0 2px 8px rgba(0, 0, 0, 0.06);
}

/* Context menu — light theme shadow */
:is(
    [data-theme="light"],
    [data-theme="snow"],
    [data-theme="cream"],
    [data-theme="mint"]
  )
  .context-menu {
  background: var(--bg-card);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.12),
    0 2px 8px rgba(0, 0, 0, 0.06);
  border-color: var(--border);
}

/* Download tooltip — adapt to theme */
:is(
    [data-theme="light"],
    [data-theme="snow"],
    [data-theme="cream"],
    [data-theme="mint"]
  )
  .download-app-tooltip {
  background: rgba(255, 255, 255, 0.97);
  border-color: var(--border);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
  color: var(--text-secondary);
}
:is(
    [data-theme="light"],
    [data-theme="snow"],
    [data-theme="cream"],
    [data-theme="mint"]
  )
  .download-app-tooltip
  .download-os-info {
  color: var(--text);
}

/* ── Emoji-only messages: scaled sizes ─────────────────────────── */
.emoji-only {
  line-height: 1.2;
  background: transparent !important;
}
.emoji-only-1 {
  font-size: 58px;
}
.emoji-only-2 {
  font-size: 46px;
}
.emoji-only-3 {
  font-size: 36px;
}
.emoji-only-4plus {
  font-size: 30px;
}

/* DM emoji-only */
.dm-msg-bubble.emoji-only {
  background: transparent !important;
  box-shadow: none !important;
  padding: 4px 0 !important;
}

/* ── Animated Emoji System ─────────────────────────────────────── */

/* Lottie animated emoji containers */
.anim-emoji-lottie {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5em;
  height: 1.5em;
  vertical-align: -0.25em;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  line-height: 1;
}
.anim-emoji-lottie svg {
  display: block;
  width: 100% !important;
  height: 100% !important;
}

/* Large Lottie emoji in emoji-only messages */
.emoji-only-1 .anim-emoji-lottie {
  width: 5.2rem;
  height: 5.2rem;
  vertical-align: -0.5em;
}
.emoji-only-2 .anim-emoji-lottie {
  width: 3.8rem;
  height: 3.8rem;
  vertical-align: -0.4em;
}
.emoji-only-3 .anim-emoji-lottie {
  width: 3.1rem;
  height: 3.1rem;
  vertical-align: -0.35em;
}
.emoji-only-4plus .anim-emoji-lottie {
  width: 2.5rem;
  height: 2.5rem;
  vertical-align: -0.3em;
}

/* Legacy animated emoji images (Google Noto Animated Emoji) */
.anim-emoji-img {
  display: inline-block;
  height: 1.4em;
  width: 1.4em;
  vertical-align: -0.3em;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}

/* Large animated emoji in emoji-only messages */
.emoji-only-1 .anim-emoji-img {
  height: 3.8em;
  width: 3.8em;
  vertical-align: -0.5em;
}
.emoji-only-2 .anim-emoji-img {
  height: 3em;
  width: 3em;
  vertical-align: -0.4em;
}
.emoji-only-3 .anim-emoji-img {
  height: 2.4em;
  width: 2.4em;
  vertical-align: -0.35em;
}
.emoji-only-4plus .anim-emoji-img {
  height: 2em;
  width: 2em;
  vertical-align: -0.3em;
}

.anim-emoji {
  display: inline-block;
  animation-fill-mode: both;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  will-change: transform;
}

/* Default gentle float for emojis without a specific animation */
.anim-emoji.anim-default {
  animation: anim-gentle-float 3s ease-in-out infinite;
}

/* ─ Laugh: shake side-to-side ─ */
.anim-emoji.anim-laugh {
  animation: anim-laugh-shake 0.4s ease-in-out infinite;
}
@keyframes anim-laugh-shake {
  0%,
  100% {
    transform: rotate(0deg);
  }
  15% {
    transform: rotate(-12deg) scale(1.1);
  }
  30% {
    transform: rotate(10deg) scale(1.15);
  }
  45% {
    transform: rotate(-8deg) scale(1.1);
  }
  60% {
    transform: rotate(6deg) scale(1.05);
  }
  75% {
    transform: rotate(-3deg);
  }
}

/* ─ Heartbeat: pulse like a real heart ─ */
.anim-emoji.anim-heartbeat {
  animation: anim-heartbeat 1s ease-in-out infinite;
}
@keyframes anim-heartbeat {
  0%,
  100% {
    transform: scale(1);
  }
  15% {
    transform: scale(1.25);
  }
  30% {
    transform: scale(1);
  }
  45% {
    transform: scale(1.15);
  }
  60% {
    transform: scale(1);
  }
}

/* ─ Fire: flicker ─ */
.anim-emoji.anim-fire {
  animation: anim-fire-flicker 0.5s ease-in-out infinite alternate;
}
@keyframes anim-fire-flicker {
  0% {
    transform: scale(1) rotate(-2deg);
    filter: brightness(1);
  }
  33% {
    transform: scale(1.08) rotate(1deg);
    filter: brightness(1.15);
  }
  66% {
    transform: scale(0.96) rotate(-1deg);
    filter: brightness(0.95);
  }
  100% {
    transform: scale(1.05) rotate(2deg);
    filter: brightness(1.1);
  }
}

/* ─ Wave: hand waving ─ */
.anim-emoji.anim-wave {
  transform-origin: 70% 70%;
  animation: anim-wave 1s ease-in-out infinite;
}
@keyframes anim-wave {
  0%,
  100% {
    transform: rotate(0deg);
  }
  10% {
    transform: rotate(14deg);
  }
  20% {
    transform: rotate(-8deg);
  }
  30% {
    transform: rotate(14deg);
  }
  40% {
    transform: rotate(-4deg);
  }
  50% {
    transform: rotate(10deg);
  }
  60% {
    transform: rotate(0deg);
  }
}

/* ─ Thumbs up: pop up ─ */
.anim-emoji.anim-thumbsup {
  animation: anim-thumbsup 1.5s ease-in-out infinite;
}
@keyframes anim-thumbsup {
  0%,
  100% {
    transform: translateY(0) scale(1);
  }
  30% {
    transform: translateY(-6px) scale(1.15);
  }
  60% {
    transform: translateY(0) scale(1);
  }
}

/* ─ Clap: squeeze together ─ */
.anim-emoji.anim-clap {
  animation: anim-clap 0.6s ease-in-out infinite;
}
@keyframes anim-clap {
  0%,
  100% {
    transform: scale(1);
  }
  25% {
    transform: scaleX(0.85) scaleY(1.1);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scaleX(0.9) scaleY(1.05);
  }
}

/* ─ Party: bounce and rotate ─ */
.anim-emoji.anim-party {
  animation: anim-party 0.8s ease-in-out infinite;
}
@keyframes anim-party {
  0%,
  100% {
    transform: translateY(0) rotate(0deg);
  }
  25% {
    transform: translateY(-8px) rotate(-10deg);
  }
  50% {
    transform: translateY(0) rotate(5deg);
  }
  75% {
    transform: translateY(-4px) rotate(-5deg);
  }
}

/* ─ Cry: slow droop ─ */
.anim-emoji.anim-cry {
  animation: anim-cry 2s ease-in-out infinite;
}
@keyframes anim-cry {
  0%,
  100% {
    transform: translateY(0) scale(1);
  }
  25% {
    transform: translateY(2px) scale(0.96);
  }
  50% {
    transform: translateY(4px) scale(0.94);
  }
  75% {
    transform: translateY(2px) scale(0.96);
  }
}

/* ─ Think: tilt side to side slowly ─ */
.anim-emoji.anim-think {
  animation: anim-think 3s ease-in-out infinite;
}
@keyframes anim-think {
  0%,
  100% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(8deg);
  }
  75% {
    transform: rotate(-8deg);
  }
}

/* ─ Rocket: fly upward ─ */
.anim-emoji.anim-rocket {
  animation: anim-rocket 1.5s ease-in-out infinite;
}
@keyframes anim-rocket {
  0%,
  100% {
    transform: translateY(0) rotate(-15deg);
  }
  50% {
    transform: translateY(-10px) rotate(-15deg) scale(1.1);
  }
}

/* ─ Star: twinkle/sparkle ─ */
.anim-emoji.anim-star {
  animation: anim-star-twinkle 1.5s ease-in-out infinite;
}
@keyframes anim-star-twinkle {
  0%,
  100% {
    transform: scale(1);
    filter: brightness(1);
  }
  50% {
    transform: scale(1.15) rotate(15deg);
    filter: brightness(1.3);
  }
}

/* ─ Shake: rapid vibration ─ */
.anim-emoji.anim-shake {
  animation: anim-shake 0.4s ease-in-out infinite;
}
@keyframes anim-shake {
  0%,
  100% {
    transform: translateX(0);
  }
  20% {
    transform: translateX(-3px) rotate(-3deg);
  }
  40% {
    transform: translateX(3px) rotate(3deg);
  }
  60% {
    transform: translateX(-2px) rotate(-2deg);
  }
  80% {
    transform: translateX(2px) rotate(2deg);
  }
}

/* ─ Peek: eyes look around ─ */
.anim-emoji.anim-peek {
  animation: anim-peek 2.5s ease-in-out infinite;
}
@keyframes anim-peek {
  0%,
  100% {
    transform: translateX(0);
  }
  20% {
    transform: translateX(-4px);
  }
  40% {
    transform: translateX(4px);
  }
  60% {
    transform: translateX(-2px);
  }
  80% {
    transform: translateX(0);
  }
}

/* ─ Sad: slow sink ─ */
.anim-emoji.anim-sad {
  animation: anim-sad 3s ease-in-out infinite;
}
@keyframes anim-sad {
  0%,
  100% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(3px) rotate(-5deg) scale(0.95);
  }
}

/* ─ Pop: burst in ─ */
.anim-emoji.anim-pop {
  animation: anim-pop 1.2s ease-in-out infinite;
}
@keyframes anim-pop {
  0%,
  100% {
    transform: scale(1);
  }
  20% {
    transform: scale(1.3);
  }
  40% {
    transform: scale(0.95);
  }
  60% {
    transform: scale(1.1);
  }
  80% {
    transform: scale(1);
  }
}

/* ─ Sparkle: shimmer ─ */
.anim-emoji.anim-sparkle {
  animation: anim-sparkle 1.5s ease-in-out infinite;
}
@keyframes anim-sparkle {
  0%,
  100% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
  25% {
    transform: scale(1.2) rotate(10deg);
    opacity: 0.8;
  }
  50% {
    transform: scale(0.9) rotate(-5deg);
    opacity: 1;
  }
  75% {
    transform: scale(1.15) rotate(5deg);
    opacity: 0.85;
  }
}

/* ─ Float: gentle hover ─ */
.anim-emoji.anim-float {
  animation: anim-float 2.5s ease-in-out infinite;
}
@keyframes anim-float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
}

/* ─ Cool: subtle lean back ─ */
.anim-emoji.anim-cool {
  animation: anim-cool 3s ease-in-out infinite;
}
@keyframes anim-cool {
  0%,
  100% {
    transform: rotate(0deg) scale(1);
  }
  50% {
    transform: rotate(-5deg) scale(1.05);
  }
}

/* ─ Wink: quick squish ─ */
.anim-emoji.anim-wink {
  animation: anim-wink 2s ease-in-out infinite;
}
@keyframes anim-wink {
  0%,
  100% {
    transform: scale(1);
  }
  45% {
    transform: scale(1);
  }
  50% {
    transform: scaleY(0.85) scaleX(1.1);
  }
  55% {
    transform: scale(1.05);
  }
  60% {
    transform: scale(1);
  }
}

/* ─ Pray: gentle bow ─ */
.anim-emoji.anim-pray {
  animation: anim-pray 2s ease-in-out infinite;
}
@keyframes anim-pray {
  0%,
  100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-4px) scale(1.08);
  }
}

/* ─ Flex: pump ─ */
.anim-emoji.anim-flex {
  animation: anim-flex 1s ease-in-out infinite;
}
@keyframes anim-flex {
  0%,
  100% {
    transform: scale(1) rotate(0deg);
  }
  25% {
    transform: scale(1.15) rotate(-5deg);
  }
  50% {
    transform: scale(1.05) rotate(0deg);
  }
  75% {
    transform: scale(1.15) rotate(5deg);
  }
}

/* ─ Gentle float: default fallback ─ */
@keyframes anim-gentle-float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-3px);
  }
}

/* Reduced motion: respect user preference */
@media (prefers-reduced-motion: reduce) {
  .anim-emoji {
    animation: none !important;
  }
  .anim-emoji-img {
    display: none !important;
  }
  .anim-emoji-lottie {
    display: none !important;
  }
}