/* Container (desktop middle-left) */
#float-index {
  position: fixed;
  top: 50%;
  left: 10px;
  transform: translateY(-50%);
  z-index: 9999;
  width: 220px;
  max-height: 70vh;
  overflow: auto;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  padding: 10px;
  scrollbar-width: thin;
}

/* Toggle (hidden on desktop) */
#float-index-toggle {
  display: none;
  border: 0;
  border-radius: 10px;
  padding: 6px 10px;
  margin-bottom: 8px;
  background: var(--fsi-color, #0EB2E7);
  color: #fff;
  cursor: pointer;
}

/* List */
#float-index-list { list-style: none; margin:0; padding:0; }
#float-index-list li { margin:6px 0; line-height:1.3; }
#float-index-list a { text-decoration:none; color:#111827; border-left:3px solid transparent; padding-left:8px; display:block; }
#float-index-list a:hover { color:var(--fsi-color,#0EB2E7); }
#float-index-list a.is-active { border-left-color:var(--fsi-color,#0EB2E7); color:var(--fsi-color,#0EB2E7); font-weight:600; }

/* Mobile: top-left collapsed transparent button */
@media (max-width: 768px) {
  #float-index {
    top: 33%;
    left: 10px;
    transform: none;
    width: auto;
    padding: 8px;
    max-width: 70vw;
    max-height: 60vh;
    border-radius: 8px;
  }

  #float-index-toggle {
    display: inline-block;
    background: rgba(255,255,255,0.7);
    color: #000;
    padding: 6px 8px;
    border-radius: 6px;
    border: 1px solid rgba(0,0,0,0.08);
    font-weight:600;
  }

  /* collapsed state: only show small transparent button and hide list */
  #float-index.collapsed {
    background: rgba(255,255,255,0.4);
    padding: 6px;
  }
  #float-index.collapsed #float-index-list { display: none; }
  #float-index.collapsed #float-index-toggle { display: inline-block; }

  /* expanded */
  #float-index[aria-expanded="true"] { background: #fff; }
  #float-index[aria-expanded="true"] #float-index-list { display: block; }
}