/* ── ROOM AVATARS (server icons) ───────── */
.server-icon-wrap {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 0;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}
.server-icon-wrap::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 4px; height: 0;
  background: #fff;
  border-radius: 0 4px 4px 0;
  /* Sin transición: aparece/desaparece al instante, solo el icono anima */
}
/* Solo ".active" (servidor realmente seleccionado) muestra la pastilla.
   Antes también aparecía en ":hover", y en móvil el propio :hover
   "fantasma" que algunos navegadores simulan al tocar/mantener pulsado
   (p. ej. al abrir el desplegable de configuración con pulsación larga)
   hacía que la pastilla apareciera como si ese fuera el servidor activo
   sin serlo. */
.server-icon-wrap.active::before { height: 28px; }

.server-icon {
  width: 48px; height: 48px;
  background: var(--bg-sidebar);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.8rem; font-weight: 700; color: #fff;
  cursor: pointer;
  /* Curva con un pequeño "overshoot" para que el círculo -> cuadrado
     redondeado se sienta como si se abriera, en vez de un cambio plano. */
  transition: border-radius 0.22s cubic-bezier(0.34, 1.56, 0.64, 1),
              background 0.18s ease;
  overflow: hidden;
  user-select: none;
  flex-shrink: 0;
  /* Sin esto, Android/iOS pintan un "flash" gris/blanco (la "pastilla"
     dentro del círculo) al tocar, y permiten seleccionar texto/imagen
     con el dedo. El menú nativo de "descargar imagen" al mantener
     pulsado ya no aparece porque el icono es un div con
     background-image, no un <img> real (ver server-icon-img). */
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-drag: none;
}
.server-icon-img,
.server-icon img {
  width: 100%; height: 100%;
  object-fit: cover;
  pointer-events: none;
  -webkit-touch-callout: none;
  -webkit-user-drag: none;
}
.server-icon-wrap:hover .server-icon,
.server-icon-wrap.active .server-icon {
  border-radius: 30%;
}
/* Con icono propio: el fondo siempre es oscuro (#191B20), para que un
   icono con transparencia nunca deje ver el morado de "seleccionado". */
.server-icon.has-icon { background: #191B20; }
/* Solo texto/iniciales (sin icono): gris oscuro por defecto, morado
   (var(--accent)) cuando el servidor está activo o en hover. */
.server-icon.text-only { background: #282C34; }
.server-icon-wrap:hover .server-icon.text-only,
.server-icon-wrap.active .server-icon.text-only {
  background: var(--accent);
}