@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@300;400;500;700&display=swap');

html, body, #root {
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: 'Roboto Mono', monospace;
  background: #0a0a0a;
  color: #e0e0e0;
}

body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: repeating-linear-gradient(
    0deg,
    rgba(0, 0, 0, 0.15),
    rgba(0, 0, 0, 0.15) 1px,
    transparent 1px,
    transparent 2px
  );
  pointer-events: none;
  z-index: 1000;
}

.connect-container {
  height: 100vh;
  display: flex;
}

.server-icon, .user-avatar, .member-avatar-small {
  background: rgba(26,26,26,0.85);
  backdrop-filter: blur(6px);
}

.channel-item.active, .channel-item:hover, .member-item:hover {
  background: rgba(26,26,26,0.85);
  backdrop-filter: blur(4px);
}

.message-input, .message-input-container {
  background: rgba(15,15,15,0.95);
  backdrop-filter: blur(4px);
}

::-webkit-scrollbar {
  width: 8px;
  background: #111;
}
::-webkit-scrollbar-thumb {
  background: #222;
  border-radius: 4px;
}