html, body { height: 100%; }

body {
  background-color: #121212;
  color: #e0e0e0;
  font-family: 'Inter', sans-serif;
}

:root {
  --accent-color: #0d6efd;
}

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

.topbar {
  height: 48px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.5);
  background-color: #1a1a1a;
}

.sidebar {
  width: 20%;
  min-width: 220px;
  background-color: #181818;
}

@media (max-width: 768px) {
  .sidebar { width: 100%; }
}

.message-feed {
  overflow-y: auto;
  flex-grow: 1;
}

.composer { height: 64px; }

.list-group-item {
  background-color: #1f1f1f;
  color: #e0e0e0;
  border-color: #333;
}

.form-control {
  background-color: #222;
  border-color: #333;
  color: #e0e0e0;
}

.form-control::placeholder {
  color: #aaaaaa;
}

.form-control:focus {
  background-color: #222;
  color: #e0e0e0;
}

.dropdown-menu {
  background-color: #1f1f1f;
  color: #e0e0e0;
}

.dropdown-menu .dropdown-item {
  color: #e0e0e0;
}

.dropdown-menu .dropdown-item:hover {
  background-color: var(--accent-color);
  color: #fff;
}

.bg-light {
  background-color: #2a2a2a !important;
  color: #e0e0e0 !important;
}

.message {
  padding: 0.5rem;
  border-radius: 1rem;
  max-width: 75%;
}

.message.me {
  background-color: var(--accent-color);
  color: #fff;
}

.message.other {
  background-color: #2a2a2a;
  color: #e0e0e0;
}

.list-group-item.active {
  background-color: var(--accent-color);
  border-color: var(--accent-color);
  color: #fff;
}

.btn-primary {
  background-color: var(--accent-color);
  border-color: var(--accent-color);
  color: #fff;
}

.btn-primary:hover {
  background-color: #0b5ed7;
  border-color: #0b5ed7;
  color: #fff;
}

/* Ensure inline video attachments display above overlapping elements */
.message video {
  position: relative;
  z-index: 1;
}

.mentioned {
  background-color: #fffd7f;
}

.twemoji {
  width: 20px;
  height: 20px;
  vertical-align: text-bottom;
}

.sticker {
  width: 64px;
  height: 64px;
  vertical-align: middle;
}

body.light {
  background-color: #f8f9fa;
  color: #212529;
}

body.light .topbar,
body.light .sidebar,
body.light .dropdown-menu {
  background-color: #fff;
  color: #212529;
}