body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #232428; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #35373c; }

.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

.rail-pill {
  position: absolute; left: 0; width: 4px; height: 8px;
  background-color: white; border-radius: 0 4px 4px 0;
  transition: all 0.2s ease; opacity: 0;
}
.rail-pill.active { height: 40px; opacity: 1; }
.group:hover .rail-pill:not(.active) { height: 20px; opacity: 1; }

.rail-tooltip {
  position: absolute; left: 80px; background-color: #111214; color: white;
  padding: 6px 12px; border-radius: 8px; font-size: 12px; font-weight: 700;
  white-space: nowrap; box-shadow: 0 8px 16px rgba(0,0,0,0.4); pointer-events: none;
  opacity: 0; transform: scale(0.9); transition: all 0.15s ease; z-index: 100;
}
.group:hover .rail-tooltip { opacity: 1; transform: scale(1); }

.speaking-ring {
  outline: 3px solid #23a55a !important;
  box-shadow: 0 0 16px #23a55a !important;
  animation: pulse-ring 1.2s infinite ease-in-out;
}
@keyframes pulse-ring {
  0% { transform: scale(1); box-shadow: 0 0 8px #23a55a; }
  50% { transform: scale(1.03); box-shadow: 0 0 20px #23a55a; }
  100% { transform: scale(1); box-shadow: 0 0 8px #23a55a; }
}

.dm-folder-pill {
  padding: 4px 10px; border-radius: 8px; color: #8e959b; transition: all 0.15s ease;
}
.dm-folder-pill:hover { color: white; background-color: #35373c; }
.dm-folder-pill.active { color: white; background-color: #5865f2; }

.video-circle-note {
  width: 190px; height: 190px; border-radius: 50%;
  overflow: hidden; position: relative; box-shadow: 0 4px 14px rgba(0,0,0,0.5);
  border: 2px solid #5865f2;
}
.video-circle-note video { width: 100%; height: 100%; object-fit: cover; }

.reaction-chip {
  display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px;
  background-color: #2b2d31; border: 1px solid #383a40; border-radius: 8px;
  font-size: 12px; cursor: pointer; transition: all 0.15s ease;
}
.reaction-chip:hover { background-color: #383a40; border-color: #5865f2; }
.reaction-chip.active { background-color: rgba(88, 101, 242, 0.2); border-color: #5865f2; }