/* ======================================================
c060-rail.css — LEFT ICON RAIL (ChatGPT-style) + POP PANEL
FULL REPLACE
====================================================== */

/* ======================================================
BASE RAIL CARD
====================================================== */
.bm-rail{
  border: 1px solid var(--line);
  background: var(--panel);
  border-radius: var(--radius);
  overflow: hidden;

  min-width: 0;
  width: 100%;

  position: relative;
  z-index: 10;
}

.bm-rail__title{
  margin: 0;
  font-size: 14px;
}

/* Lists */
.bm-list{
  display: grid;
  gap: 8px;
}

.bm-listItem{
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.05);
  border-radius: var(--radius-sm);
  padding: 10px 10px;
}


/* ======================================================
LEFT ICON RAIL
====================================================== */
#bmLeftRail.bm-rail{
  border: 0;
  background: transparent;
  border-radius: 0;
  overflow: visible;

  position: sticky;
  top: calc(var(--headerH, 56px));
  align-self: start;
  height: calc(100vh - var(--headerH, 56px));

  width: 72px;
  min-width: 72px;
  max-width: 72px;

  display: flex;
  flex-direction: column;

  padding: 10px 8px;
  padding-top: 76px;

  z-index: 10;
}

#bmLeftRail .bm-rail__iconStack{
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 0;
}

#bmLeftRail .bm-rail__top,
#bmLeftRail .bm-rail__bottom{
  display: none;
}


/* Icon buttons */
.bm-railIconBtn{
  width: 56px;
  height: 56px;
  border-radius: 16px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border: 1px solid var(--line);
  background: var(--panel);
  cursor: pointer;
  user-select: none;

  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease, background .12s ease;
}

.bm-railIconBtn:hover{
  transform: translateY(-1px);
  border-color: rgba(37,99,235,0.25);
  box-shadow: 0 10px 24px rgba(0,0,0,0.08);
  background: var(--panel2);
}

.bm-railIconBtn:active{ transform: translateY(0); }

.bm-railIcon{
  width: 22px;
  height: 22px;
  fill: currentColor;
  opacity: 0.9;
}

.bm-railIconBtn__logo{
  width: 28px;
  height: 28px;
  border-radius: 10px;
  display: block;
}


/* ======================================================
TOGGLE BUTTON (UNSTUCK + PERFECT CENTER)
NOTE:
- Your JS (305-rail-toggle.js) sets top/left inline.
- To make CSS actually move it, we override with !important.
- We DO NOT use transform on the button anymore (that was moving the whole button).
- We nudge the glyph up by using padding-bottom (moves content up, button stays put).
====================================================== */
#bmRailToggle{
  position: fixed;
  left: 10px !important;
  top: calc(var(--headerH, 56px) + 10px) !important;

  z-index: 60;

  width: 56px;
  height: 56px;
  border-radius: 16px;

  display: grid;
  place-items: center;

  border: 1px solid var(--line);
  background: var(--panel);
  cursor: pointer;
  user-select: none;

  transition: box-shadow .12s ease, border-color .12s ease, background .12s ease;

  font-size: 24px;
  font-weight: 600;

  /* kill baseline drift */
  line-height: 1;
  padding: 0;
  margin: 0;

  /* ✅ optical nudge UP (content moves up, button does NOT) */
  padding-bottom: 2px;

  -webkit-tap-highlight-color: transparent;
}

#bmRailToggle:hover{
  border-color: rgba(37,99,235,0.25);
  box-shadow: 0 10px 24px rgba(0,0,0,0.08);
  background: var(--panel2);
}

/* ✅ do NOT move the button on press */
#bmRailToggle:active{
  box-shadow: 0 6px 14px rgba(0,0,0,0.08);
}

/* remove accidental glyph spacing */
#bmRailToggle::before,
#bmRailToggle::after{
  content: none !important;
}

#bmRailToggle svg{
  display:none !important;
}


/* ======================================================
COLLAPSE
====================================================== */
#bmLeftRail.bm-rail--collapsed{
  width: 0;
  min-width: 0;
  max-width: 0;
  padding: 0;
}

#bmLeftRail.bm-rail--collapsed .bm-rail__iconStack{
  display: none;
}


/* ======================================================
POP PANEL
====================================================== */
.bm-popPanel{
  position: sticky;
  top: calc(var(--headerH, 56px));
  align-self: start;
  max-height: calc(100vh - var(--headerH, 56px));
  overflow: hidden;

  z-index: 20;
}

.bm-popPanel__top{
  padding: 12px 12px 10px 12px;
  border-bottom: 1px solid var(--line);
  background: var(--panel2);
}

.bm-popPanel__topRow{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.bm-popPanel__panel{
  padding: 12px;
  display: grid;
  gap: 10px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}


/* ======================================================
MOBILE
====================================================== */
@media (max-width: 980px){
  #bmLeftRail.bm-rail{
    position: static;
    top: auto;
    height: auto;
    width: 72px;
    min-width: 72px;
    max-width: 72px;
    padding-top: 76px;
  }

  .bm-popPanel{
    position: static;
    top: auto;
    max-height: none;
  }
}