/* ═══ Holodeck Pill — Unified Nav Widget ═══ */

/* Nav container */
.hd-pill-wrap { position: relative; display: flex; align-items: center; }

/* The pill button in nav */
.hd-pill {
  display: flex; align-items: center; gap: .4rem;
  padding: .35rem .8rem; cursor: pointer;
  background: rgba(10,10,15,0.6); backdrop-filter: blur(8px);
  border: 1px solid rgba(0,240,255,0.12); border-radius: 20px;
  transition: all .3s;
}
.hd-pill:hover { border-color: rgba(0,240,255,0.3); box-shadow: 0 0 12px rgba(0,240,255,0.1); }

/* Status dot */
.hd-pill .hp-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--muted); transition: all .4s; flex-shrink: 0;
}
.hd-pill-wrap.active .hp-dot {
  background: var(--cyan); box-shadow: 0 0 8px var(--cyan);
  animation: hpDotPulse 2s ease-in-out infinite;
}
@keyframes hpDotPulse { 0%,100% { box-shadow: 0 0 6px var(--cyan); } 50% { box-shadow: 0 0 12px var(--cyan), 0 0 20px rgba(0,240,255,0.2); } }

/* Label */
.hd-pill .hp-label {
  font-family: 'Orbitron', sans-serif; font-size: .55rem; font-weight: 700;
  letter-spacing: .08em; color: var(--muted); transition: color .3s;
  max-width: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hd-pill-wrap.active .hp-label { color: var(--cyan); }

/* User count badge */
.hd-pill .hp-count {
  font-family: 'Orbitron', sans-serif; font-size: .5rem; font-weight: 700;
  background: rgba(0,240,255,0.1); color: var(--cyan);
  padding: 1px 5px; border-radius: 8px; display: none;
}
.hd-pill-wrap.active .hp-count { display: inline; }

/* Mute indicator */
.hd-pill .hp-mute { font-size: .65rem; opacity: 0; transition: opacity .2s; }
.hd-pill-wrap.muted .hp-mute { opacity: 1; color: var(--orange); }


/* Dismiss button */
.hp-dismiss{font-size:.7rem;color:rgba(255,255,255,0.2);cursor:pointer;padding:0 2px;margin-left:.1rem;transition:color .2s;line-height:1}
.hp-dismiss:hover{color:rgba(255,255,255,0.6)}
/* ═══ Dropdown Panel ═══ */
.hp-panel {
  position: absolute; bottom: 100%; right: 0; margin-bottom: .6rem;
  width: 280px; background: rgba(10,10,15,0.95); backdrop-filter: blur(16px);
  border: 1px solid rgba(0,240,255,0.12); border-radius: 12px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.5); overflow: hidden;
  display: none; z-index: 1001;
}
.hp-panel.open { display: block; }

/* Hologram open/close animation */
.hp-panel.holo-in {
  display: block;
  animation: holoIn .6s ease-out forwards;
}
.hp-panel.holo-out {
  animation: holoOut .4s ease-in forwards;
}
@keyframes holoIn {
  0% { opacity:0; transform:translateY(10px) scaleY(0.3); filter:brightness(3) saturate(0) blur(4px); }
  15% { opacity:.6; transform:translateY(5px) scaleY(0.7); filter:brightness(2.5) saturate(0.2) blur(2px); }
  35% { opacity:.8; filter:brightness(2) saturate(0.3) blur(1px); }
  50% { opacity:.5; transform:translateY(2px) scaleY(0.95); filter:brightness(1.5) saturate(0.7) blur(0); }
  100% { opacity:1; transform:translateY(0) scaleY(1); filter:brightness(1) saturate(1) blur(0); }
}
@keyframes holoOut {
  0% { opacity:1; transform:translateY(0) scaleY(1); }
  50% { opacity:.4; transform:translateY(5px) scaleY(0.6); filter:brightness(2) saturate(0.2) blur(2px); }
  100% { opacity:0; transform:translateY(10px) scaleY(0.1); filter:brightness(3) saturate(0) blur(6px); }
}

/* Scanline overlay */
.hp-panel::before {
  content:''; position:absolute; inset:0; z-index:10; pointer-events:none;
  background: repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,240,255,0.02) 2px,rgba(0,240,255,0.02) 4px);
  opacity:0;
}
.hp-panel.holo-in::before { animation: hpScanlines .6s ease-out forwards; }
@keyframes hpScanlines { 0%{opacity:.8} 50%{opacity:.4} 100%{opacity:0} }

/* Panel header */
.hp-head {
  display:flex; align-items:center; gap:.5rem; padding:.7rem .8rem;
  border-bottom:1px solid rgba(0,240,255,0.08);
}
.hp-head-icon { font-size:.9rem; }
.hp-head-title {
  flex:1; font-family:'Orbitron',sans-serif; font-size:.65rem; font-weight:700;
  letter-spacing:.1em; color:var(--cyan);
}
.hp-head-close {
  background:none; border:none; color:var(--muted); cursor:pointer;
  font-size:.9rem; padding:2px; transition:color .2s;
}
.hp-head-close:hover { color:var(--white); }

/* Channel info */
.hp-chan {
  padding:.5rem .8rem; border-bottom:1px solid rgba(0,240,255,0.06);
}
.hp-chan-name {
  font-family:'Orbitron',sans-serif; font-size:.6rem; font-weight:700;
  letter-spacing:.08em; color:var(--gold);
}
.hp-chan-desc { font-size:.68rem; color:var(--muted); margin-top:.1rem; }

/* User list */
.hp-users { padding:.4rem .8rem; border-bottom:1px solid rgba(0,240,255,0.06); max-height:130px; overflow-y:auto; }
.hp-user {
  display:flex; align-items:center; gap:.4rem; padding:.25rem 0;
  font-size:.72rem; color:var(--white);
}
.hp-user-dot { width:5px; height:5px; border-radius:50%; background:var(--cyan); flex-shrink:0; }
.hp-user.muted .hp-user-dot { background:var(--muted); }
.hp-user-name { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hp-user-badge {
  font-family:'Orbitron',sans-serif; font-size:.4rem; font-weight:700;
  padding:1px 4px; border-radius:2px; letter-spacing:.05em;
}
.hp-user-badge.muted-badge { color:var(--muted); }
.hp-user-badge.tx-badge { color:var(--gold); background:rgba(245,185,66,0.1); }

/* Controls */
.hp-controls {
  display:grid; grid-template-columns:1fr 1fr; gap:.3rem; padding:.5rem .8rem;
  border-bottom:1px solid rgba(0,240,255,0.06);
}
.hp-ctrl {
  display:flex; align-items:center; justify-content:center; gap:.25rem;
  padding:.4rem; background:rgba(0,240,255,0.04);
  border:1px solid rgba(0,240,255,0.1); border-radius:5px;
  cursor:pointer; transition:all .2s;
  font-family:'Orbitron',sans-serif; font-size:.48rem; font-weight:700;
  letter-spacing:.05em; color:var(--muted);
}
.hp-ctrl:hover { border-color:var(--cyan); color:var(--cyan); }
.hp-ctrl.active { background:rgba(255,106,0,0.1); border-color:rgba(255,106,0,0.3); color:var(--orange); }
.hp-ctrl.danger { border-color:rgba(255,60,60,0.2); color:#ff4444; }
.hp-ctrl.danger:hover { background:rgba(255,60,60,0.08); }
.hp-ctrl-icon { font-size:.8rem; }

/* Stream indicator */
.hp-streams {
  padding:.4rem .8rem; border-bottom:1px solid rgba(0,240,255,0.06);
}
.hp-stream-item {
  display:flex; align-items:center; gap:.3rem; padding:.2rem 0;
  font-size:.65rem; color:var(--gold);
}
.hp-stream-dot {
  width:5px; height:5px; border-radius:50%; background:var(--gold);
  box-shadow:0 0 4px rgba(245,185,66,0.4);
  animation: hpDotPulse 1.5s ease-in-out infinite;
}

/* Open holodeck link */
.hp-link {
  display:block; padding:.6rem .8rem; text-align:center;
  font-family:'Orbitron',sans-serif; font-size:.55rem; font-weight:700;
  letter-spacing:.1em; color:var(--cyan); text-decoration:none;
  transition:background .2s, color .2s;
}
.hp-link:hover { background:rgba(0,240,255,0.04); color:var(--gold); }

/* Empty state */
.hp-empty {
  padding:1rem .8rem; text-align:center;
}
.hp-empty p { font-size:.75rem; color:var(--muted); margin-bottom:.4rem; }
.hp-empty a {
  font-family:'Orbitron',sans-serif; font-size:.55rem; font-weight:700;
  letter-spacing:.08em; color:var(--cyan); text-decoration:none;
}
.hp-empty a:hover { color:var(--gold); }

/* ═══ Light Theme ═══ */
[data-theme="light"] .hd-pill { background:rgba(242,244,247,0.7); border-color:rgba(0,80,160,0.12); }
[data-theme="light"] .hd-pill:hover { border-color:rgba(0,80,160,0.3); }
[data-theme="light"] .hp-panel { background:rgba(255,255,255,0.97); border-color:rgba(0,80,160,0.12); box-shadow:0 8px 30px rgba(0,0,0,0.12); }
[data-theme="light"] .hd-pill-wrap.active .hp-dot { background:#0066aa; box-shadow:0 0 6px rgba(0,100,180,0.4); }
[data-theme="light"] .hd-pill-wrap.active .hp-label { color:#0066aa; }

@media(max-width:480px){.hd-pill{padding:.25rem .5rem}.hd-pill .hp-label{font-size:.45rem;max-width:60px}.hd-pill .hp-count{font-size:.4rem;padding:1px 3px}.hp-panel{min-width:240px;width:260px}}