/* ==========================================================================
   css/components/server-rail.css
   Split from app.html (build 2026.10.08.9-beta), original lines 335-375.
   Rules are in their ORIGINAL order; load order is defined in index.html.
   ========================================================================== */
/* ═══════════════════════════════════════
   SERVER RAIL (far left, 72px)
═══════════════════════════════════════ */
/* Rail geometry, derived rather than hand-tuned - the reference computes every folder offset
   from its two size tokens, which is why its folders and avatars cannot drift apart.
     pitch    = avatar + item margin + rail gap = 48 + 2 + 2 = 52px, and the INSIDE of a
                folder must use the same pitch or the block needs a nudge to line up.
     sub-icon = (folder box - padding*2 - gap)/2 = (48 - 10 - 2)/2 = 18px, an INTEGER.
                It was 15.5px, and half-pixel boxes render soft and visibly misaligned. */
:root {
  --rail-avatar: 48px;   /* server icon / folder box - the two MUST match */
  --rail-pad: 8px;       /* space either side of an icon inside the rail */
  --rail-width: calc(var(--rail-avatar) + var(--rail-pad) * 2);   /* = 64px */
  --rail-pitch-gap: 4px; /* total vertical space between two icons */
  --folder-pad: 5px;     /* inside the folder box */
  --folder-gap: 2px;     /* between the 2x2 preview icons */
}
.server-rail {
  width: var(--rail-width);
  flex-shrink: 0;
  background: var(--bg-deep);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 0 8px;
  /* Reserve the panel's height as MARGIN, not scrollable padding: this ends the rail's
     box at the panel top, so overflow CLIPS icons there. Padding kept them clear only at
     rest - mid-scroll they still transited the bottom zone and showed through a
     translucent (glass / custom-bg) user panel. Tracks the live bottom-bar height so the
     rail also clears the VOICE BAR in a call (else it hides the Admin Panel button). */
  margin-bottom: var(--bottom-bar-h, 66px);
  /* ...and repaint the rail's rung INTO that reserved strip. The margin ends the rail's
     background at the panel's top edge, but the user panel floats 6px inset, so the strip
     around it showed raw un-scrimmed wallpaper - measured 3-16% scrim against the rail's 41%,
     which is the bright magenta edge down the window's bottom-left corner.
     An outer box-shadow is clipped to OUTSIDE the border box, so this fills exactly the strip
     and can never stack a second scrim on the rail itself. Same offset as the margin, so the
     two cannot drift - including when a call makes the voice bar taller. */
  box-shadow: 0 var(--bottom-bar-h, 66px) 0 var(--bg-deep); /* This is that black box on the server rail and the user panel. */
  gap: 2px;
  overflow-y: auto;
  overflow-x: hidden;
}
/* Rail items must never compress when the rail overflows - without this the
   add/discovery/admin buttons squash into ovals. */
.server-rail > *, .folder-secondary-rail > * { flex-shrink: 0; }

.server-rail::-webkit-scrollbar { display: none; }