/* ===== Ribbon Navigation — 48px vertical strip ===== */

/* Hamburger (mobile only) + drawer backdrop default to hidden on desktop. */
.mobile-menu-btn { display: none; }
.ribbon-backdrop { display: none; }

/* The ribbon host is a plain div in the markup; make it a full-height flex column
   so the nav inside it is bounded by the cockpit body height instead of growing
   with its content. Without this the middle tray can never overflow → no scroll. */
#ribbonContainer {
  display: flex;
  flex-direction: column;
  align-self: stretch;
  min-height: 0;
  flex-shrink: 0;
}

.ribbon-nav {
  width: 48px;
  min-width: 48px;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--bg-secondary);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  box-shadow: var(--panel-shadow);
  padding: 8px 0;
  gap: 2px;
  z-index: 50;
  transition: width 200ms cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
  position: relative;
  flex-shrink: 0;
}

.ribbon-nav::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--glass-highlight);
  pointer-events: none;
  border-radius: var(--radius-md);
}

/* Expanded state — reached two ways: transiently by hover, or held open by the pin.
   Every expanded-state rule below names both selectors; a rule that only knows about
   :hover silently un-expands the pinned rail the moment the pointer leaves. */
.ribbon-nav:hover,
.ribbon-nav.ribbon-pinned {
  width: 160px;
}

.ribbon-nav:hover .ribbon-label,
.ribbon-nav.ribbon-pinned .ribbon-label {
  opacity: 1;
  transform: translateX(0);
}

/* The pin — sits in the top-right corner, appears with the labels (there is nothing to
   pin while the rail is collapsed), and stays visible while pinned so it can be unpinned. */
.ribbon-pin {
  position: absolute;
  top: 5px;
  right: 5px;
  z-index: 2;
  width: 22px;
  height: 22px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 150ms ease, background 150ms ease;
}
.ribbon-nav:hover .ribbon-pin,
.ribbon-nav.ribbon-pinned .ribbon-pin {
  opacity: 1;
  pointer-events: auto;
}
.ribbon-pin:hover { background: var(--glass-bg-heavy); color: var(--text-primary); }
/* Pinned reads as "engaged": accent colour + the classic tilted pin. */
.ribbon-nav.ribbon-pinned .ribbon-pin { color: var(--accent-primary); }
.ribbon-nav.ribbon-pinned .ribbon-pin i { transform: rotate(-45deg); }

/* Ribbon sections */
.ribbon-top {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  flex: 1;
  width: 100%;
}

/* Pinned front-door tray (e.g. Jarvis) — stays at the top, never scrolls.
   Tinted with --bg-tertiary (like the pinned bottom tray) so the un-tinted
   middle visually reads as a separate, scrollable region — without the tint
   the tiny middle tray gave no hint that it scrolls at all. The negative
   top margin bleeds the band through the nav's own padding to the top edge
   (the nav's overflow:hidden clips it to the rounded corner). */
.ribbon-home {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  width: 100%;
  flex-shrink: 0;
  margin-top: -8px;
  padding-top: 8px;
  padding-bottom: 6px;
  margin-bottom: 2px;
  border-bottom: 1px solid var(--border-color);
  background: var(--bg-tertiary);
}

/* Scrollable middle tray — grouped app surfaces. Takes the slack between the
   pinned home tray and the pinned bottom tray, and scrolls (mouse wheel /
   trackpad) when the grouped list is taller than the rail. A thin themed
   scrollbar stays visible as the affordance — a fully hidden scrollbar made
   the (often short) middle tray look static; min-height:0 lets it actually
   overflow inside the flex column instead of pushing the bottom tray
   off-screen. */
.ribbon-scroll {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;                            /* Firefox */
  scrollbar-color: var(--border-color) transparent; /* Firefox */
  overscroll-behavior: contain; /* don't chain the wheel to the page */
}
.ribbon-scroll::-webkit-scrollbar { width: 4px; height: 0; } /* WebKit/Blink */
.ribbon-scroll::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 2px; }
.ribbon-scroll::-webkit-scrollbar-track { background: transparent; }

/* Group header inside the scrollable tray. Collapsed rail: the header shrinks
   to a thin divider (its top border + a sliver of spacing) — it used to keep
   its full text height with transparent text, which read as random blank
   holes between the icons. On hover-expand it grows back to full height and
   the text fades in. The text is hidden via transparent colour, not opacity,
   because opacity would fade the border (the separator) away too. */
.ribbon-group-label {
  width: calc(100% - 8px);
  box-sizing: border-box;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: transparent;
  max-height: 5px;
  padding: 0 12px;
  margin-top: 4px;
  border-top: 1px solid var(--border-color);
  white-space: nowrap;
  overflow: hidden;
  transition: color 200ms cubic-bezier(0.16, 1, 0.3, 1),
              max-height 200ms cubic-bezier(0.16, 1, 0.3, 1),
              padding 200ms cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
  flex-shrink: 0;
}
.ribbon-nav:hover .ribbon-group-label,
.ribbon-nav.ribbon-pinned .ribbon-group-label {
  color: var(--text-secondary);
  max-height: 28px;
  padding: 8px 12px 4px;
}
/* No double divider directly under the pinned home tray. */
.ribbon-scroll > .ribbon-group-label:first-child { border-top: none; margin-top: 0; }

/* Pinned base-essentials tray. Same --bg-tertiary tint as the home tray so
   both fixed regions read as one system and the scrollable middle stands out
   between them; the negative bottom margin bleeds the band to the nav's
   bottom edge. */
/* The settings tray now lives INSIDE the scrollable area rather than pinned beneath it.
   Pinned, it carried `flex-shrink: 0` and simply never yielded: every icon it held came out
   of the application's tray, and on a laptop that left the app four icons of usable rail with
   a dozen settings icons below the divider. A navigation whose own chrome crowds out the
   product is not navigation. Scrolling as one list means the app's screens always come first
   and can never be squeezed — the settings entries just follow them. */
.ribbon-bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  width: 100%;
  flex-shrink: 0;
  border-top: 1px solid var(--border-color);
  padding-top: 8px;
  margin-top: 4px;
  padding-bottom: 4px;
}

/* Ribbon button. Collapsed padding is 8px, NOT 12px, and the difference is the icon-clipping
   bug: a collapsed button is 40px wide (48px rail − 8px), and when the middle tray's scrollbar
   appears it takes layout space, squeezing the button to ~32px. With 12px side padding a 24px
   icon starts at x=12 and ends at x=36 — past the 32px edge, so overflow:hidden ate its right
   side ("icons look cut off by the scroll bar"). At 8px the icon spans 8..32: perfectly centred
   in the 40px case and exactly fitting the squeezed one. Expanded rails restore 12px below. */
.ribbon-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: calc(100% - 8px);
  height: 40px;
  min-height: 40px;
  padding: 0 8px;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
  position: relative;
  white-space: nowrap;
  overflow: hidden;
}

.ribbon-nav:hover .ribbon-btn,
.ribbon-nav.ribbon-pinned .ribbon-btn {
  padding: 0 12px;
}

.ribbon-btn:hover {
  background: var(--glass-bg-heavy);
  color: var(--text-primary);
}

.ribbon-btn.active {
  background: var(--glass-bg-heavy);
  color: var(--accent-primary);
}

.ribbon-btn.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 3px;
  background: var(--accent-primary);
  border-radius: 0 2px 2px 0;
}

.ribbon-btn i {
  font-size: 20px;
  min-width: 24px;
  text-align: center;
  flex-shrink: 0;
}

.ribbon-label {
  font-size: 12px;
  font-weight: 500;
  opacity: 0;
  transform: translateX(-8px);
  transition: all 200ms cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

/* Ribbon tooltip (for non-hover expand mode) */
.ribbon-btn[title]::after {
  content: none; /* Rely on hover expand labels */
}

/* Notification badge on ribbon button */
.ribbon-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  min-width: 16px;
  height: 16px;
  border-radius: 8px;
  background: var(--status-error);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

/* ===== Mobile: ribbon becomes a slide-in drawer behind a hamburger ===== */
@media (max-width: 640px) {
  .mobile-menu-btn { display: inline-flex; }

  /* The drawer is ONE scrolling menu, not the desktop three-tray rail. Keeping
     the home/bottom trays pinned (flex-shrink:0) here let the pinned bottom
     tray — base essentials + the appended platform pins — eat most of a
     portrait phone's height, starving the scrollable app tray down to a
     single visible row. On a phone the whole drawer scrolls instead. */
  .ribbon-nav {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 240px;
    min-width: 240px;
    transform: translateX(-110%);
    transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 300;
    border-radius: 0;
    align-items: stretch;
    padding-top: 16px;
    padding-bottom: 0;
    box-shadow: 8px 0 30px rgba(0, 0, 0, 0.45);
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain; /* don't chain the drawer's scroll to the page */
  }
  .ribbon-nav.mobile-open { transform: translateX(0); }
  /* The decorative glass highlight is anchored to the scroll origin, so once
     the drawer scrolls it ends in a visible seam — drop it on the phone. */
  .ribbon-nav::before { content: none; }
  /* No hover-expand on touch; keep full width + always-visible labels. */
  .ribbon-nav:hover { width: 240px; }
  .ribbon-nav .ribbon-label {
    opacity: 1 !important;
    transform: none !important;
    font-size: 14px;
  }
  /* The drawer is always full-width; a pin has nothing to hold open. */
  .ribbon-pin { display: none; }
  /* Beats the desktop expanded-state padding rules (.ribbon-nav:hover/.ribbon-pinned .ribbon-btn),
     which otherwise outrank a bare .ribbon-btn and shrink the drawer's touch targets to 12px. */
  .ribbon-btn,
  .ribbon-nav:hover .ribbon-btn,
  .ribbon-nav.ribbon-pinned .ribbon-btn { width: 100%; height: 46px; min-height: 46px; padding: 0 18px; }
  /* All three trays flow in the one scrolling column: the middle tray stops
     being its own scroll region and contributes its full height instead. */
  .ribbon-scroll {
    flex: 0 0 auto;
    min-height: auto;
    overflow: visible;
  }
  /* Drawer uses 16px top padding — bleed the pinned home tray's tint to match. */
  .ribbon-home { margin-top: -16px; padding-top: 16px; }
  /* Clears the home-indicator safe area at the true bottom edge, since the nav no longer pads.
     (The tray carried a tint when it was a pinned band; inside the scrolling column it is just
     the last group in the list, so the separator border alone marks it.) */
  .ribbon-bottom {
    margin-bottom: 0;
    padding-bottom: calc(8px + env(safe-area-inset-bottom));
  }
  /* No hover on touch: keep group headers at full height with visible text
     (they'd otherwise stay stuck in the collapsed thin-divider state). */
  .ribbon-group-label {
    color: var(--text-secondary);
    max-height: 28px;
    padding: 8px 18px 4px;
    font-size: 11px;
  }

  .ribbon-backdrop.show {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 290;
  }
}