/* TFS Chat — Modern Theme
 * Design: Clean, modern chat app aesthetic (Telegram/Element inspired)
 * Colors: TFS-CMMS design system
 * Font: System stack
 */

:root {
  --tfs-primary: #2563eb;
  --tfs-primary-dark: #1d4ed8;
  --tfs-primary-light: rgba(37, 99, 235, 0.08);
  --tfs-primary-glow: rgba(37, 99, 235, 0.15);
  --tfs-success: #16a34a;
  --tfs-warning: #d97706;
  --tfs-danger: #dc2626;
  --tfs-gray-50: #f9fafb;
  --tfs-gray-100: #f3f4f6;
  --tfs-gray-200: #e5e7eb;
  --tfs-gray-300: #d1d5db;
  --tfs-gray-400: #9ca3af;
  --tfs-gray-500: #6b7280;
  --tfs-gray-600: #4b5563;
  --tfs-gray-700: #374151;
  --tfs-gray-800: #1f2937;
  --tfs-gray-900: #111827;
  --tfs-white: #ffffff;
  --tfs-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --tfs-radius: 8px;
  --tfs-radius-lg: 12px;
  --tfs-radius-xl: 16px;
  --tfs-radius-full: 9999px;
  --tfs-shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --tfs-shadow: 0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06);
  --tfs-shadow-md: 0 4px 6px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.06);
  --tfs-shadow-lg: 0 10px 15px rgba(0,0,0,0.1), 0 4px 6px rgba(0,0,0,0.05);
  --tfs-transition: 0.15s ease;
}

/* ============================================================
   BASE / BODY
   ============================================================ */

html {
  font-family: var(--tfs-font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body.light {
  background: var(--tfs-gray-100) !important;
  color: var(--tfs-gray-900) !important;
  font-family: var(--tfs-font) !important;
}

/* ============================================================
   LOGIN FORM — Centered card with modern styling
   ============================================================ */

body.light .login {
  background: var(--tfs-white) !important;
  color: var(--tfs-gray-900) !important;
  border: none !important;
  border-radius: var(--tfs-radius-xl) !important;
  box-shadow: var(--tfs-shadow-lg) !important;
  font-family: var(--tfs-font) !important;
  padding: 2.5rem !important;
  max-width: 400px !important;
}

.login h1 {
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  color: var(--tfs-gray-900) !important;
  text-align: center !important;
  margin-bottom: 0.25rem !important;
  letter-spacing: -0.025em;
}

.login label {
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  color: var(--tfs-gray-500) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
}

body.light input,
body.light textarea,
body.light select {
  border: 1.5px solid var(--tfs-gray-200) !important;
  border-radius: var(--tfs-radius) !important;
  background: var(--tfs-gray-50) !important;
  color: var(--tfs-gray-900) !important;
  font-family: var(--tfs-font) !important;
  font-size: 0.9rem !important;
  padding: 0.625rem 0.875rem !important;
  transition: border-color var(--tfs-transition), box-shadow var(--tfs-transition), background var(--tfs-transition);
}

body.light input:focus,
body.light textarea:focus,
body.light select:focus {
  outline: none !important;
  border-color: var(--tfs-primary) !important;
  background: var(--tfs-white) !important;
  box-shadow: 0 0 0 3px var(--tfs-primary-glow) !important;
}

body.light input[type=submit],
body.light button {
  background: var(--tfs-primary) !important;
  color: white !important;
  border: none !important;
  border-radius: var(--tfs-radius) !important;
  font-family: var(--tfs-font) !important;
  font-size: 0.9rem !important;
  font-weight: 600 !important;
  padding: 0.625rem 1.25rem !important;
  cursor: pointer !important;
  transition: background var(--tfs-transition), transform var(--tfs-transition), box-shadow var(--tfs-transition);
  box-shadow: 0 1px 2px rgba(37, 99, 235, 0.3) !important;
}

body.light input[type=submit]:hover,
body.light button:hover {
  background: var(--tfs-primary-dark) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.35) !important;
}

body.light input[type=submit]:active,
body.light button:active {
  transform: translateY(0) !important;
}

/* ============================================================
   POPUPS (Settings, About)
   ============================================================ */

body.light .popup {
  background: var(--tfs-white) !important;
  color: var(--tfs-gray-900) !important;
  border: none !important;
  border-radius: var(--tfs-radius-xl) !important;
  box-shadow: var(--tfs-shadow-lg) !important;
  padding: 1.5rem !important;
}

body.light .popup a {
  color: var(--tfs-primary) !important;
}

body.light .popup h3 {
  color: var(--tfs-gray-900) !important;
  font-weight: 700 !important;
}

/* ============================================================
   CHAT LAYOUT — CHANNELS SIDEBAR
   ============================================================ */

body.light .chat .channels,
body.light .chat .users {
  background: var(--tfs-white) !important;
  color: var(--tfs-gray-900) !important;
  border-right: 1px solid var(--tfs-gray-100) !important;
  box-shadow: none !important;
}

body.light .chat .channels h2,
body.light .chat .users h2 {
  border-color: var(--tfs-gray-100) !important;
  background: var(--tfs-white) !important;
  color: var(--tfs-gray-400) !important;
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  padding: 1rem 1rem 0.5rem 1rem !important;
}

body.light .chat .channels .lichat-channel-list,
body.light .chat .channels .lichat-user-list,
body.light .chat .users .lichat-channel-list,
body.light .chat .users .lichat-user-list {
  background: var(--tfs-white) !important;
  padding: 0.25rem 0.5rem !important;
}

body.light .chat .channels .lichat-channel-list a,
body.light .chat .users .lichat-user-list a {
  padding: 0.5rem 0.75rem !important;
  border-radius: var(--tfs-radius) !important;
  margin-bottom: 2px !important;
  transition: background var(--tfs-transition), color var(--tfs-transition) !important;
  font-size: 0.9rem !important;
  color: var(--tfs-gray-700) !important;
}

body.light .chat .channels .lichat-channel-list a:hover,
body.light .chat .users .lichat-user-list a:hover {
  background: var(--tfs-gray-50) !important;
  color: var(--tfs-gray-900) !important;
}

body.light .chat .channels .active {
  background: var(--tfs-primary-light) !important;
  color: var(--tfs-primary) !important;
  font-weight: 600 !important;
  border-left: none !important;
  border-radius: var(--tfs-radius) !important;
}

/* ============================================================
   CHAT LAYOUT — MENU / TOOLBAR
   ============================================================ */

body.light .chat .menu {
  background: var(--tfs-white) !important;
  color: var(--tfs-gray-600) !important;
  border-bottom: 1px solid var(--tfs-gray-100) !important;
  box-shadow: var(--tfs-shadow-sm) !important;
}

body.light .chat .chat-area .menu {
  background: var(--tfs-white) !important;
  border-bottom: 1px solid var(--tfs-gray-100) !important;
  padding: 0 0.5rem !important;
}

body.light .chat .chat-area .menu a {
  color: var(--tfs-gray-500) !important;
  font-size: 0.8rem !important;
  font-weight: 500 !important;
  padding: 0.4rem 0.75rem !important;
  border-radius: var(--tfs-radius-full) !important;
  transition: background var(--tfs-transition), color var(--tfs-transition) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.03em !important;
}

body.light .chat .chat-area .menu a:hover {
  color: var(--tfs-primary) !important;
  background: var(--tfs-primary-light) !important;
}

body.light .chat .chat-area .menu a:active {
  background: var(--tfs-primary-glow) !important;
}

/* ============================================================
   CHAT AREA — MESSAGES (modern bubble-style)
   ============================================================ */

body.light .chat .chat-area {
  background: var(--tfs-gray-50) !important;
}

body.light .chat .chat-area .lichat-topic {
  background: var(--tfs-white) !important;
  border-bottom: 1px solid var(--tfs-gray-100) !important;
  font-size: 0.85rem !important;
  color: var(--tfs-gray-500) !important;
  padding: 0.5rem 1rem !important;
}

body.light .chat .chat-area .lichat-output {
  background: var(--tfs-gray-50) !important;
}

body.light .chat .chat-area .lichat-output .lichat-channel {
  background: var(--tfs-gray-50) !important;
  padding: 0.75rem !important;
}

body.light .chat .chat-area .lichat-output .lichat-channel .update {
  padding: 0.375rem 0.75rem !important;
  margin-bottom: 0.125rem !important;
  border-radius: var(--tfs-radius) !important;
  transition: background var(--tfs-transition) !important;
  line-height: 1.5 !important;
}

body.light .chat .chat-area .lichat-output .lichat-channel .update:hover {
  background: rgba(0,0,0,0.03) !important;
}

body.light .chat .chat-area .lichat-output .lichat-channel .update .time {
  color: var(--tfs-gray-400) !important;
  font-size: 0.7rem !important;
  font-weight: 500 !important;
  min-width: 3rem !important;
}

body.light .chat .chat-area .lichat-output .lichat-channel .update .username {
  font-weight: 700 !important;
  color: var(--tfs-primary) !important;
  font-size: 0.85rem !important;
}

body.light .chat .chat-area .lichat-output .lichat-channel .update span {
  font-size: 0.9rem !important;
  line-height: 1.5 !important;
  color: var(--tfs-gray-800) !important;
}

body.light .chat .chat-area .lichat-output .lichat-channel .join {
  opacity: 0.6 !important;
  font-size: 0.8rem !important;
}

body.light .chat .chat-area .lichat-output .lichat-channel .join span {
  color: var(--tfs-success) !important;
}

body.light .chat .chat-area .lichat-output .lichat-channel .leave {
  opacity: 0.6 !important;
  font-size: 0.8rem !important;
}

body.light .chat .chat-area .lichat-output .lichat-channel .leave span {
  color: var(--tfs-gray-400) !important;
}

body.light .chat .chat-area .lichat-output .lichat-channel .failure span {
  color: var(--tfs-danger) !important;
}

body.light .chat .chat-area .lichat-output .lichat-channel .self a {
  color: var(--tfs-gray-900) !important;
}

body.light .chat .chat-area .lichat-output .lichat-channel .update span label.command,
body.light .chat .chat-area .lichat-output .lichat-channel .update span label.emote {
  color: var(--tfs-primary) !important;
}

body.light .chat .chat-area .lichat-output .lichat-channel .update span a {
  color: var(--tfs-primary) !important;
  text-decoration: none !important;
  font-weight: 500 !important;
}

body.light .chat .chat-area .lichat-output .lichat-channel .update span a:hover {
  color: var(--tfs-primary-dark) !important;
  text-decoration: underline !important;
}

body.light .chat .chat-area .lichat-output .lichat-channel .update span .edit-cancel {
  background: var(--tfs-white) !important;
  border-radius: var(--tfs-radius) !important;
}

body.light .chat .chat-area .lichat-output .lichat-channel .update .actions {
  background: var(--tfs-white) !important;
  color: var(--tfs-gray-500) !important;
  border-radius: var(--tfs-radius) !important;
  box-shadow: var(--tfs-shadow) !important;
  border: 1px solid var(--tfs-gray-100) !important;
}

body.light .chat .chat-area .lichat-output .lichat-channel .update .actions a {
  color: var(--tfs-gray-500) !important;
  padding: 0.2em 0.4em !important;
  border-radius: 4px !important;
}

body.light .chat .chat-area .lichat-output .lichat-channel .update .actions a:hover {
  color: var(--tfs-primary) !important;
  background: var(--tfs-primary-light) !important;
}

body.light .chat .chat-area .lichat-output .lichat-channel .update .reactions .reaction {
  background: var(--tfs-white) !important;
  border: 1px solid var(--tfs-gray-200) !important;
  border-radius: var(--tfs-radius-full) !important;
  padding: 0.15em 0.5em !important;
  font-size: 0.85rem !important;
  transition: background var(--tfs-transition), border-color var(--tfs-transition) !important;
}

body.light .chat .chat-area .lichat-output .lichat-channel .update .reactions .reaction:hover {
  background: var(--tfs-primary-light) !important;
  border-color: var(--tfs-primary) !important;
}

/* ============================================================
   CHAT AREA — INPUT (floating bar style)
   ============================================================ */

body.light .chat .chat-area .input-area {
  background: var(--tfs-white) !important;
  border: none !important;
  border-top: 1px solid var(--tfs-gray-100) !important;
  padding: 0.75rem 1rem !important;
  box-shadow: 0 -2px 8px rgba(0,0,0,0.04) !important;
  gap: 0.5rem !important;
}

body.light .chat .chat-area .input-area textarea.lichat-input {
  background: var(--tfs-gray-50) !important;
  color: var(--tfs-gray-900) !important;
  font-family: var(--tfs-font) !important;
  font-size: 0.9rem !important;
  border: 1.5px solid var(--tfs-gray-200) !important;
  border-radius: var(--tfs-radius-lg) !important;
  caret-color: var(--tfs-primary) !important;
  padding: 0.625rem 0.875rem !important;
  transition: border-color var(--tfs-transition), box-shadow var(--tfs-transition) !important;
  line-height: 1.5 !important;
}

body.light .chat .chat-area .input-area textarea.lichat-input:focus {
  border-color: var(--tfs-primary) !important;
  background: var(--tfs-white) !important;
  box-shadow: 0 0 0 3px var(--tfs-primary-glow) !important;
  outline: none !important;
}

body.light .chat .chat-area .input-area input[type=submit] {
  background: var(--tfs-primary) !important;
  color: white !important;
  border: none !important;
  border-radius: var(--tfs-radius-lg) !important;
  min-width: 70px !important;
  font-weight: 600 !important;
  font-size: 0.85rem !important;
  cursor: pointer !important;
  transition: background var(--tfs-transition), transform var(--tfs-transition), box-shadow var(--tfs-transition) !important;
  box-shadow: 0 1px 3px rgba(37, 99, 235, 0.3) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.03em !important;
}

body.light .chat .chat-area .input-area input[type=submit]:hover {
  background: var(--tfs-primary-dark) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 3px 10px rgba(37, 99, 235, 0.35) !important;
}

body.light .chat .chat-area .input-area .emote-list {
  background: var(--tfs-white) !important;
  border: 1px solid var(--tfs-gray-100) !important;
  border-radius: var(--tfs-radius-lg) !important;
  box-shadow: var(--tfs-shadow-lg) !important;
}

body.light .chat .chat-area .input-area .lichat-extra {
  display: flex !important;
  align-items: center !important;
}

body.light .chat .chat-area .input-area label {
  color: var(--tfs-gray-400) !important;
  transition: color var(--tfs-transition) !important;
  font-size: 1.1rem !important;
}

body.light .chat .chat-area .input-area label:hover {
  color: var(--tfs-primary) !important;
}

/* ============================================================
   SCROLLBARS — Thin, subtle
   ============================================================ */

body.light .chat .chat-area .lichat-channel::-webkit-scrollbar,
body.light .chat .chat-area .menu::-webkit-scrollbar,
body.light .chat .channels::-webkit-scrollbar,
body.light .chat .users::-webkit-scrollbar {
  width: 6px !important;
  height: 6px !important;
}

body.light .chat .chat-area .lichat-channel::-webkit-scrollbar-button,
body.light .chat .chat-area .menu::-webkit-scrollbar-button {
  width: 0 !important;
  height: 0 !important;
}

body.light .chat .chat-area .lichat-channel::-webkit-scrollbar-thumb,
body.light .chat .chat-area .menu::-webkit-scrollbar-thumb,
body.light .chat .channels::-webkit-scrollbar-thumb,
body.light .chat .users::-webkit-scrollbar-thumb {
  background: var(--tfs-gray-300) !important;
  border-radius: var(--tfs-radius-full) !important;
}

body.light .chat .chat-area .lichat-channel::-webkit-scrollbar-thumb:hover,
body.light .chat .chat-area .menu::-webkit-scrollbar-thumb:hover {
  background: var(--tfs-primary) !important;
}

body.light .chat .chat-area .lichat-channel::-webkit-scrollbar-track,
body.light .chat .chat-area .menu::-webkit-scrollbar-track,
body.light .chat .channels::-webkit-scrollbar-track,
body.light .chat .users::-webkit-scrollbar-track {
  background: transparent !important;
}

/* ============================================================
   STATUS BAR
   ============================================================ */

.status {
  font-family: var(--tfs-font) !important;
  font-size: 0.85rem !important;
  color: var(--tfs-gray-500) !important;
  border-radius: var(--tfs-radius) !important;
}

/* ============================================================
   ============================================================
   DARK MODE — TFS CHAT DARK THEME
   ============================================================
   ============================================================ */

body.dark {
  --tfs-dk-bg: #0f172a;
  --tfs-dk-surface: #1e293b;
  --tfs-dk-surface-hover: #334155;
  --tfs-dk-surface-raised: #283548;
  --tfs-dk-border: #334155;
  --tfs-dk-border-subtle: #1e293b;
  --tfs-dk-text: #f1f5f9;
  --tfs-dk-text-muted: #94a3b8;
  --tfs-dk-text-dim: #64748b;
  --tfs-dk-primary: #3b82f6;
  --tfs-dk-primary-dark: #2563eb;
  --tfs-dk-primary-light: rgba(59, 130, 246, 0.12);
  --tfs-dk-primary-glow: rgba(59, 130, 246, 0.2);
  --tfs-dk-success: #22c55e;
  --tfs-dk-danger: #ef4444;
}

/* --- Base --- */

body.dark {
  background: var(--tfs-dk-bg) !important;
  color: var(--tfs-dk-text) !important;
  font-family: var(--tfs-font) !important;
}

/* --- Login --- */

body.dark .login {
  background: var(--tfs-dk-surface) !important;
  color: var(--tfs-dk-text) !important;
  border: 1px solid var(--tfs-dk-border) !important;
  border-radius: var(--tfs-radius-xl) !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.4) !important;
  font-family: var(--tfs-font) !important;
  padding: 2.5rem !important;
  max-width: 400px !important;
}

body.dark .login h1 {
  color: var(--tfs-dk-text) !important;
  font-weight: 700 !important;
  font-size: 1.5rem !important;
  letter-spacing: -0.025em !important;
}

body.dark .login label {
  color: var(--tfs-dk-text-dim) !important;
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
}

/* --- Inputs --- */

body.dark input,
body.dark textarea,
body.dark select {
  background: var(--tfs-dk-bg) !important;
  border: 1.5px solid var(--tfs-dk-border) !important;
  border-radius: var(--tfs-radius) !important;
  color: var(--tfs-dk-text) !important;
  font-family: var(--tfs-font) !important;
  font-size: 0.9rem !important;
  padding: 0.625rem 0.875rem !important;
  transition: border-color var(--tfs-transition), box-shadow var(--tfs-transition) !important;
}

body.dark input:focus,
body.dark textarea:focus,
body.dark select:focus {
  outline: none !important;
  border-color: var(--tfs-dk-primary) !important;
  box-shadow: 0 0 0 3px var(--tfs-dk-primary-glow) !important;
}

body.dark input[type=submit],
body.dark button {
  background: var(--tfs-dk-primary) !important;
  color: white !important;
  border: none !important;
  border-radius: var(--tfs-radius) !important;
  font-family: var(--tfs-font) !important;
  font-size: 0.9rem !important;
  font-weight: 600 !important;
  padding: 0.625rem 1.25rem !important;
  cursor: pointer !important;
  transition: background var(--tfs-transition), transform var(--tfs-transition), box-shadow var(--tfs-transition) !important;
  box-shadow: 0 1px 3px rgba(59, 130, 246, 0.3) !important;
}

body.dark input[type=submit]:hover,
body.dark button:hover {
  background: var(--tfs-dk-primary-dark) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 3px 10px rgba(59, 130, 246, 0.35) !important;
}

/* --- Popups --- */

body.dark .popup {
  background: var(--tfs-dk-surface) !important;
  color: var(--tfs-dk-text) !important;
  border: 1px solid var(--tfs-dk-border) !important;
  border-radius: var(--tfs-radius-xl) !important;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5) !important;
}

body.dark .popup a {
  color: var(--tfs-dk-primary) !important;
}

body.dark .popup h3 {
  color: var(--tfs-dk-text) !important;
  font-weight: 700 !important;
}

/* --- Channels / Users Sidebar --- */

body.dark .chat .channels,
body.dark .chat .users {
  background: var(--tfs-dk-surface) !important;
  color: var(--tfs-dk-text) !important;
  border-right: 1px solid var(--tfs-dk-border-subtle) !important;
}

body.dark .chat .channels h2,
body.dark .chat .users h2 {
  border-color: var(--tfs-dk-border) !important;
  background: var(--tfs-dk-surface) !important;
  color: var(--tfs-dk-text-dim) !important;
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  padding: 1rem 1rem 0.5rem 1rem !important;
}

body.dark .chat .channels .lichat-channel-list,
body.dark .chat .channels .lichat-user-list,
body.dark .chat .users .lichat-channel-list,
body.dark .chat .users .lichat-user-list {
  background: var(--tfs-dk-surface) !important;
  padding: 0.25rem 0.5rem !important;
}

body.dark .chat .channels .lichat-channel-list a,
body.dark .chat .users .lichat-user-list a {
  padding: 0.5rem 0.75rem !important;
  border-radius: var(--tfs-radius) !important;
  margin-bottom: 2px !important;
  transition: background var(--tfs-transition), color var(--tfs-transition) !important;
  font-size: 0.9rem !important;
  color: var(--tfs-dk-text-muted) !important;
}

body.dark .chat .channels .lichat-channel-list a:hover,
body.dark .chat .users .lichat-user-list a:hover {
  background: var(--tfs-dk-surface-hover) !important;
  color: var(--tfs-dk-text) !important;
}

body.dark .chat .channels .active {
  background: var(--tfs-dk-primary-light) !important;
  color: var(--tfs-dk-primary) !important;
  font-weight: 600 !important;
  border-left: none !important;
  border-radius: var(--tfs-radius) !important;
}

/* --- Menu Bar --- */

body.dark .chat .menu {
  background: var(--tfs-dk-surface) !important;
  color: var(--tfs-dk-text-muted) !important;
}

body.dark .chat .chat-area .menu {
  background: var(--tfs-dk-surface) !important;
  border-bottom: 1px solid var(--tfs-dk-border) !important;
  padding: 0 0.5rem !important;
}

body.dark .chat .chat-area .menu a {
  color: var(--tfs-dk-text-dim) !important;
  font-size: 0.8rem !important;
  font-weight: 500 !important;
  padding: 0.4rem 0.75rem !important;
  border-radius: var(--tfs-radius-full) !important;
  transition: background var(--tfs-transition), color var(--tfs-transition) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.03em !important;
}

body.dark .chat .chat-area .menu a:hover {
  color: var(--tfs-dk-primary) !important;
  background: var(--tfs-dk-primary-light) !important;
}

body.dark .chat .chat-area .menu a:active {
  background: var(--tfs-dk-primary-glow) !important;
}

/* --- Chat Area --- */

body.dark .chat .chat-area {
  background: var(--tfs-dk-bg) !important;
}

body.dark .chat .chat-area .lichat-topic {
  background: var(--tfs-dk-surface) !important;
  border-bottom: 1px solid var(--tfs-dk-border) !important;
  color: var(--tfs-dk-text-dim) !important;
  font-size: 0.85rem !important;
  padding: 0.5rem 1rem !important;
}

body.dark .chat .chat-area .lichat-output {
  background: var(--tfs-dk-bg) !important;
}

body.dark .chat .chat-area .lichat-output .lichat-channel {
  background: var(--tfs-dk-bg) !important;
  padding: 0.75rem !important;
}

/* --- Messages --- */

body.dark .chat .chat-area .lichat-output .lichat-channel .update {
  padding: 0.375rem 0.75rem !important;
  margin-bottom: 0.125rem !important;
  border-radius: var(--tfs-radius) !important;
  transition: background var(--tfs-transition) !important;
  line-height: 1.5 !important;
}

body.dark .chat .chat-area .lichat-output .lichat-channel .update:hover {
  background: rgba(255,255,255,0.03) !important;
}

body.dark .chat .chat-area .lichat-output .lichat-channel .update .time {
  color: var(--tfs-dk-text-dim) !important;
  font-size: 0.7rem !important;
  font-weight: 500 !important;
}

body.dark .chat .chat-area .lichat-output .lichat-channel .update .username {
  font-weight: 700 !important;
  color: var(--tfs-dk-primary) !important;
  font-size: 0.85rem !important;
}

body.dark .chat .chat-area .lichat-output .lichat-channel .update span {
  font-size: 0.9rem !important;
  line-height: 1.5 !important;
  color: var(--tfs-dk-text) !important;
}

body.dark .chat .chat-area .lichat-output .lichat-channel .join {
  opacity: 0.5 !important;
  font-size: 0.8rem !important;
}

body.dark .chat .chat-area .lichat-output .lichat-channel .join span {
  color: var(--tfs-dk-success) !important;
}

body.dark .chat .chat-area .lichat-output .lichat-channel .leave {
  opacity: 0.5 !important;
  font-size: 0.8rem !important;
}

body.dark .chat .chat-area .lichat-output .lichat-channel .leave span {
  color: var(--tfs-dk-text-dim) !important;
}

body.dark .chat .chat-area .lichat-output .lichat-channel .failure span {
  color: var(--tfs-dk-danger) !important;
}

body.dark .chat .chat-area .lichat-output .lichat-channel .self a {
  color: var(--tfs-dk-text) !important;
}

body.dark .chat .chat-area .lichat-output .lichat-channel .update span label.command,
body.dark .chat .chat-area .lichat-output .lichat-channel .update span label.emote {
  color: var(--tfs-dk-primary) !important;
}

body.dark .chat .chat-area .lichat-output .lichat-channel .update span a {
  color: var(--tfs-dk-primary) !important;
  font-weight: 500 !important;
}

body.dark .chat .chat-area .lichat-output .lichat-channel .update span a:hover {
  color: #93c5fd !important;
}

body.dark .chat .chat-area .lichat-output .lichat-channel .update span .edit-cancel {
  background: var(--tfs-dk-surface) !important;
  border-radius: var(--tfs-radius) !important;
}

body.dark .chat .chat-area .lichat-output .lichat-channel .update .actions {
  background: var(--tfs-dk-surface-raised) !important;
  color: var(--tfs-dk-text-dim) !important;
  border-radius: var(--tfs-radius) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important;
  border: 1px solid var(--tfs-dk-border) !important;
}

body.dark .chat .chat-area .lichat-output .lichat-channel .update .actions a:hover {
  color: var(--tfs-dk-primary) !important;
}

body.dark .chat .chat-area .lichat-output .lichat-channel .update .reactions .reaction {
  background: var(--tfs-dk-surface-hover) !important;
  border: 1px solid var(--tfs-dk-border) !important;
  border-radius: var(--tfs-radius-full) !important;
  padding: 0.15em 0.5em !important;
  font-size: 0.85rem !important;
}

body.dark .chat .chat-area .lichat-output .lichat-channel .update .reactions .reaction:hover {
  background: var(--tfs-dk-primary-light) !important;
  border-color: var(--tfs-dk-primary) !important;
}

/* --- Input Area --- */

body.dark .chat .chat-area .input-area {
  background: var(--tfs-dk-surface) !important;
  border: none !important;
  border-top: 1px solid var(--tfs-dk-border) !important;
  padding: 0.75rem 1rem !important;
  box-shadow: 0 -2px 8px rgba(0,0,0,0.15) !important;
  gap: 0.5rem !important;
}

body.dark .chat .chat-area .input-area textarea.lichat-input {
  background: var(--tfs-dk-bg) !important;
  color: var(--tfs-dk-text) !important;
  font-family: var(--tfs-font) !important;
  font-size: 0.9rem !important;
  border: 1.5px solid var(--tfs-dk-border) !important;
  border-radius: var(--tfs-radius-lg) !important;
  caret-color: var(--tfs-dk-primary) !important;
  padding: 0.625rem 0.875rem !important;
  line-height: 1.5 !important;
}

body.dark .chat .chat-area .input-area textarea.lichat-input:focus {
  border-color: var(--tfs-dk-primary) !important;
  box-shadow: 0 0 0 3px var(--tfs-dk-primary-glow) !important;
  outline: none !important;
}

body.dark .chat .chat-area .input-area input[type=submit] {
  background: var(--tfs-dk-primary) !important;
  color: white !important;
  border: none !important;
  border-radius: var(--tfs-radius-lg) !important;
  min-width: 70px !important;
  font-weight: 600 !important;
  font-size: 0.85rem !important;
  cursor: pointer !important;
  box-shadow: 0 1px 3px rgba(59, 130, 246, 0.3) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.03em !important;
}

body.dark .chat .chat-area .input-area input[type=submit]:hover {
  background: var(--tfs-dk-primary-dark) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 3px 10px rgba(59, 130, 246, 0.35) !important;
}

body.dark .chat .chat-area .input-area .emote-list {
  background: var(--tfs-dk-surface) !important;
  border: 1px solid var(--tfs-dk-border) !important;
  border-radius: var(--tfs-radius-lg) !important;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5) !important;
}

body.dark .chat .chat-area .input-area label {
  color: var(--tfs-dk-text-dim) !important;
  font-size: 1.1rem !important;
}

body.dark .chat .chat-area .input-area label:hover {
  color: var(--tfs-dk-primary) !important;
}

/* --- Scrollbars (dark) --- */

body.dark .chat .chat-area .lichat-channel::-webkit-scrollbar,
body.dark .chat .chat-area .menu::-webkit-scrollbar,
body.dark .chat .channels::-webkit-scrollbar,
body.dark .chat .users::-webkit-scrollbar {
  width: 6px !important;
  height: 6px !important;
}

body.dark .chat .chat-area .lichat-channel::-webkit-scrollbar-thumb,
body.dark .chat .chat-area .menu::-webkit-scrollbar-thumb,
body.dark .chat .channels::-webkit-scrollbar-thumb,
body.dark .chat .users::-webkit-scrollbar-thumb {
  background: var(--tfs-dk-border) !important;
  border-radius: var(--tfs-radius-full) !important;
}

body.dark .chat .chat-area .lichat-channel::-webkit-scrollbar-thumb:hover,
body.dark .chat .chat-area .menu::-webkit-scrollbar-thumb:hover {
  background: var(--tfs-dk-primary) !important;
}

body.dark .chat .chat-area .lichat-channel::-webkit-scrollbar-track,
body.dark .chat .chat-area .menu::-webkit-scrollbar-track,
body.dark .chat .channels::-webkit-scrollbar-track,
body.dark .chat .users::-webkit-scrollbar-track {
  background: transparent !important;
}

/* ============================================================
   CHANNEL SIDEBAR — Wider to show full channel names
   ============================================================ */

body .chat .channels,
body .chat .users {
  min-width: 150px !important;
  width: 160px !important;
}