/* ── CHANNEL PANEL ─────────────────────── */
.channel-panel {
  width: var(--panel-w);
  min-width: var(--panel-w);
  height: 100%;
  background: var(--bg-sidebar);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  overflow: hidden;
  padding-bottom: 56px;
  box-sizing: border-box;
}

/* La barra de perfil ahora es fija y cruza también el rail de servidores,
   así que ese rail necesita el mismo hueco abajo para no quedar tapado */
.sidebar {
  padding-bottom: 56px;
  box-sizing: border-box;
}

#homeSidebar {
  padding-bottom: 56px;
  box-sizing: border-box;
}

.channel-panel-header {
  height: var(--header-h);
  padding: 0 16px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--text-header);
  flex-shrink: 0;
}
.panel-options-btn {
  background: none; border: none; color: var(--text-muted);
  font-size: 1.1rem; cursor: pointer; padding: 4px;
}

/* Header superpuesto sobre el banner del servidor (esquina inferior),
   en vez de ir en una barra aparte con degradado de corte duro */
.channel-panel-header.on-banner {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: auto;
  padding: 8px 12px;
  border-bottom: none;
  background: none;
  color: #fff;
}
.channel-panel-header.on-banner #serverName {
  text-shadow: 0 1px 3px rgba(0,0,0,0.9), 0 2px 10px rgba(0,0,0,0.7);
}
.channel-panel-header.on-banner .panel-options-btn {
  color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,0.9), 0 2px 10px rgba(0,0,0,0.7);
}

/* Sections */
.channel-section { flex-shrink: 0; }

/* ── Zona con scroll de la lista de canales ──────────────────────
   Antes .channel-panel tenía overflow:hidden y esta zona no tenía
   flex:1/overflow propio, así que en servidores con muchos canales
   el contenido simplemente se cortaba (sin scrollbar, sin forma de
   bajar). Ahora es la ÚNICA parte que hace scroll: la cabecera/banner
   de arriba y la barra de usuario de abajo ("los topes") se quedan
   fijas siempre, nunca se tapan ni se desplazan. */
.channel-scroll-area {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain; /* no arrastra el scroll fuera de este panel al llegar al final */
  -webkit-overflow-scrolling: touch; /* scroll con inercia en iOS/Android */
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.18) transparent;
}
.channel-scroll-area::-webkit-scrollbar { width: 8px; }
.channel-scroll-area::-webkit-scrollbar-track { background: transparent; }
.channel-scroll-area::-webkit-scrollbar-thumb {
  background-color: rgba(255,255,255,0.18);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
.channel-scroll-area:hover::-webkit-scrollbar-thumb,
.channel-scroll-area::-webkit-scrollbar-thumb:hover {
  background-color: rgba(255,255,255,0.32);
  background-clip: padding-box;
}
/* Un pelín de aire al final para que el último canal no quede pegado
   al borde inferior del scroll */
.channel-scroll-area { padding-bottom: 8px; }

.channel-section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 8px 4px 16px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-muted);
  cursor: pointer;
  user-select: none;
}
.channel-section-title:hover { color: var(--text); }
.section-arrow { display:inline-flex; align-items:center; }

.channel-list { list-style: none; padding: 2px 8px; }

.channel-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  border-radius: 4px;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 0.9rem;
  transition: background var(--transition), color var(--transition);
  position: relative;
  touch-action: manipulation;
  /* Evita que Android/iOS interpongan su propio menú nativo de selección
     de texto (la lupa/callout para copiar) a mitad de la pulsación larga,
     lo que cancelaba nuestra detección antes de que abriera el menú de
     ajustes y hacía que el toque terminara comportándose como uno normal. */
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.voice-limit-badge {
  margin-left: auto;
  flex-shrink: 0;
  display: inline-flex;
  align-items: stretch;
  font-size: 0.78rem;
  font-weight: 700;
  font-family: monospace;
  letter-spacing: 0.02em;
}
.voice-limit-current,
.voice-limit-max {
  display: flex;
  align-items: center;
  padding: 4px 9px;
}
.voice-limit-current {
  color: #949ba4;
  background: #191B20;
  border-radius: 8px 0 0 8px;
}
.voice-limit-max {
  color: #dbdee1;
  background: #303236;
  border-radius: 0 8px 8px 0;
  clip-path: polygon(12% 0, 100% 0, 100% 100%, 0% 100%);
  margin-left: -6px;
  padding-left: 14px;
}
.channel-item.active { background: #303237; color: #fff; }
.channel-item.active .ch-name-text { color: #fff; }
.channel-item.active .channel-hash svg { stroke: #fff; }
.channel-item.press-highlight { background: #25272B; }
.channel-hash { display:inline-flex; align-items:center; opacity: .85; flex-shrink:0; }
.ch-name-text { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ch-gear-btn {
  display: inline-flex;
  visibility: hidden;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  background: none;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  color: #C0C5CF;
  flex-shrink: 0;
  padding: 0;
  transition: background .15s, color .15s;
  margin-left: auto;
}
.channel-item:hover  { background: var(--bg-hover); color: var(--text); }
.channel-item:hover .ch-gear-btn { visibility: visible; }
.ch-gear-btn:hover { background: rgba(255,255,255,0.1); color: var(--text); }
/* En móvil el :hover no debe existir: al tocar, algunos navegadores
   simulan un "mouseenter" que se queda pegado en el canal tocado
   anteriormente (encima de la marca real .active del canal nuevo),
   dando la sensación de que hay 2 canales seleccionados a la vez. */
html.lock-mobile-layout .channel-item:hover { background: transparent; color: var(--text-muted); }
html.lock-mobile-layout .channel-item.press-highlight,
html.lock-mobile-layout .channel-item.press-highlight:hover { background: #25272B; color: var(--text); }
html.lock-mobile-layout .channel-item.active { background: transparent; color: #fff; }
html.lock-mobile-layout .channel-item.active:hover { background: var(--bg-hover); color: var(--text-header); }
/* El engranaje de ajustes del canal es solo para PC (hover con ratón).
   En móvil no debe aparecer nunca: tocar el canal debe entrar directo
   al chat, sin ningún paso de "selección" previo. */
html.lock-mobile-layout .ch-gear-btn { display: none !important; visibility: hidden !important; }
.voice-icon   { font-size: 0.9rem; }
.voice-item   { color: var(--text-muted); }

/* User bar */
.user-bar {
  position: fixed;
  left: 0;
  bottom: 0;
  width: calc(var(--sidebar-w) + var(--panel-w));
  max-width: 100vw;
  box-sizing: border-box;
  height: 56px;
  background: var(--bg-input);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  padding: 0 16px 0 20px;
  flex-shrink: 0;
  z-index: 25;
}
.user-bar-avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--accent);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.75rem; font-weight: 700; color: #fff;
  position: relative;
  overflow: visible;
  flex-shrink: 0;
}
.user-bar-avatar > span,
.user-bar-avatar > img[id="userBarImg"] {
  width: 32px; height: 32px;
  border-radius: 50%;
  overflow: hidden;
  position: relative;
  z-index: 1;
}
.user-bar-avatar img[id="userBarImg"] {
  object-fit: cover;
  display: block;
}
.user-bar-status {
  position: absolute;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: #26292F;
  border: 2px solid #26292F;
  bottom: -2px; right: -2px;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  z-index: 2;
}
.user-bar-info { flex: 1; overflow: hidden; }
.user-bar-name {
  font-size: 0.82rem; font-weight: 600;
  color: var(--text-header);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.user-bar-tag { font-size: 0.72rem; color: var(--text-muted); }
.user-bar-settings {
  background: none; border: none; font-size: 1rem;
  cursor: pointer; padding: 4px; border-radius: 4px;
  color: #C0C5CF;
  transition: background var(--transition);
}
.user-bar-settings:hover { background: var(--bg-hover); }

/* ── Usuarios conectados al canal de voz ── */
.vc-connected-users {
  list-style: none;
  margin: 0;
  padding: 2px 0 6px 12px;
}
.vc-connected-user {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 3px 4px;
  border-radius: 4px;
  cursor: default;
}
.vc-connected-user:hover { background: var(--bg-hover); }
.vc-user-avatar-mini {
  width: 22px; height: 22px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.6rem; font-weight: 700; color: #fff;
  flex-shrink: 0;
  overflow: hidden;
  position: relative;
}
.vc-user-avatar-mini img {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
.vc-user-name-mini {
  font-size: 0.78rem;
  color: #949ba4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}
.vc-user-incall-icon {
  width: 14px; height: 14px;
  flex-shrink: 0;
  opacity: 0.8;
}

.vc-user-mic-icon {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  margin-left: 2px;
}