/* ── Chapter Nav Bar ── */
#chapterNav {
  position:fixed; bottom:48px; left:27.5%; transform:translateX(-50%);
  z-index:9999; display:flex; gap:8px; align-items:center; flex-wrap:wrap; justify-content:center;
  background:rgba(0,0,0,.85); border-radius:12px;
  padding:10px 20px; backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.2);
  box-shadow:0 0 24px rgba(0,0,0,.6), 0 0 8px rgba(255,255,255,.05);
}
#chapterNav a, #chapterNav button {
  font-family:'Share Tech Mono',monospace; font-size:clamp(11px,1.1vw,14px);
  letter-spacing:2px; text-transform:uppercase; text-decoration:none;
  color:rgba(255,255,255,.9); background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.3);
  padding:8px 16px; border-radius:6px; cursor:pointer;
  transition:all .3s ease;
  text-shadow:0 0 10px rgba(255,255,255,.5), 0 0 20px rgba(255,255,255,.2);
}
#chapterNav a:hover, #chapterNav button:hover {
  color:#fff; border-color:rgba(255,255,255,.6);
  background:rgba(255,255,255,.15);
  text-shadow:0 0 14px rgba(255,255,255,.8), 0 0 28px rgba(200,220,255,.4);
  box-shadow:0 0 16px rgba(255,255,255,.25);
}

/* ── Speed control buttons ── */
.speed-btn {
  font-size:14px !important;
  padding:4px 8px !important;
  letter-spacing:0 !important;
  border:1px solid rgba(255,255,255,.1) !important;
  opacity:.5;
  transition:all .3s ease;
}
.speed-btn.speed-active {
  opacity:1;
  border-color:rgba(255,255,255,.4) !important;
  box-shadow:0 0 8px rgba(255,255,255,.2);
  text-shadow:0 0 8px rgba(255,255,255,.5);
}
.speed-btn:hover { opacity:.8; }

/* ── MOBILE nav bar ── */
@media (max-width:768px) {
  #chapterNav {
    /* Centre across full screen — not just the animation side */
    left:50%;
    transform:translateX(-50%);
    /* Sit above progress bar but close to bottom */
    bottom:10px;
    max-width:calc(100vw - 20px);
    width:auto;
    padding:6px 10px;
    gap:4px;
    flex-wrap:nowrap;
    /* Semi-transparent so content behind is slightly visible */
    background:rgba(0,0,0,.75);
    border-radius:20px;
  }
  #chapterNav a, #chapterNav button {
    padding:5px 9px;
    font-size:9px;
    letter-spacing:.5px;
    border-radius:12px;
  }
  /* Hide speed controls on mobile — reduce clutter */
  #speedControl {
    display:none !important;
  }

  /* ── Push commentary panel text above nav bar ── */
  #commentary-panel #panel-content,
  #panel-content {
    padding-bottom:80px !important;
  }

  /* ── Push vidbar (progress bar) above nav bar ── */
  #vidbar {
    padding-bottom:56px !important;
  }

  /* ── Push brain-label above nav bar ── */
  #brain-label {
    padding-bottom:80px !important;
  }

  /* ── Push neuro-annotation down from top to clear UC banner ── */
  #neuro-annotation {
    top:3.5rem !important;
  }
}

@media (max-width:480px) {
  #chapterNav {
    bottom:8px;
    padding:5px 8px;
    gap:3px;
    max-width:calc(100vw - 12px);
  }
  #chapterNav a, #chapterNav button {
    padding:4px 7px;
    font-size:8px;
  }
  #panel-content {
    padding-bottom:70px !important;
  }
  #vidbar {
    padding-bottom:50px !important;
  }
  #brain-label {
    padding-bottom:70px !important;
  }
}