/* ==========================================================================
   css/components/pinned-server-rail.css
   The horizontal strip of pinned servers, directly under the native title bar.
   ========================================================================== */

/* It STOPS BEFORE THE SERVER RAIL, so the rail itself runs all the way up to the title bar
   instead of starting 42px lower. That means it cannot be a row in the body column - a row
   would span the rail too - so it is taken out of flow and the columns that DO sit under it
   are pushed down by `body.has-pinned-rail` below. #app stays where it is either way, which is
   what lets the rail grow into this row.
   Offsets are the shared tokens, not numbers: --titlebar-h from native-titlebar.css and
   --rail-width from server-rail.css, so the three cannot drift apart. */
/* Its height is a token because three other things have to agree with it: the columns it
   pushes down, and the sidebar's rounded-corner patch in channel-rail.css. */
:root { --pinrail-h: 42px; }
#pinnedServerRail {
  position: absolute;
  top: var(--titlebar-h, 32px);
  left: var(--rail-width, 64px);
  right: 0;
  z-index: 3;
  display: none;
  align-items: center;
  gap: 6px;
  height: var(--pinrail-h);
  /* No left padding: Gavin wants the first card FLUSH with the strip's own left edge, which is
     the sidebar's left edge (both start after the server rail). It used to be 6px, lining the
     card up with a channel row instead - `.ch-item` carries `margin: 1px 6px` - but flush with
     the edge is the call. The right side keeps its 6px so the last card does not jam the
     window edge. */
  padding: 0 6px 0 0;
  background: var(--bg-deep);
  /* NO border-bottom. Each column under the strip draws its own top edge already - the sidebar
     as the top of its rounded L, .channel-area and .tray-area as a plain border-top - so a
     border here lands 1px above all three and reads as a doubled separator. Worse, the
     sidebar's line turns a corner and a full-width border cannot, so the two never met. */
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-app-region: no-drag;   /* it sits in the drag region's neighbourhood; clicks win */
}
/* No pins, no strip - and nothing is pushed down either, so the feature costs nothing at all
   until you use it. `:empty` would not have done: it still reserves the border and padding. */
#pinnedServerRail.has-pins { display: flex; }

/* Everything the strip sits over moves down by its height. The SERVER RAIL is deliberately not
   on this list: it keeps its top at the title bar, which is the whole point. The folder
   secondary rail is on it - the strip starts after the main rail only, so a second left rail
   would be underneath it. */
body.has-pinned-rail #folderSecondaryRail,
body.has-pinned-rail #channelRail,
body.has-pinned-rail .channel-area,
body.has-pinned-rail #trayArea,
body.has-pinned-rail #dmProfilePanel { margin-top: var(--pinrail-h); }
#pinnedServerRail::-webkit-scrollbar { display: none; }

.psr-card {
  display: flex; align-items: center; gap: 7px; flex-shrink: 0;
  /* 9px + the 1px border = the 10px left padding a channel row has, so the card's ICON lands
     in the same column as the channel icons and the server name (all three at x=80 on a
     default-width sidebar) rather than one pixel off it, which just reads as broken. */
  padding: 3px 11px 3px 9px; border-radius: 10px; max-width: 200px;
  background: transparent; border: 1px solid var(--border-strong);
  cursor: pointer; font-family: inherit;
  transition: border-color .12s, background .12s;
}
.psr-card:hover { background: color-mix(in srgb, var(--text-primary) 6%, transparent); }
.psr-card.active { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }

/* The icon box carries the fallback colour (set inline from colorFromId when there is no
   uploaded icon), so the radius has to clip it - but NOT overflow:hidden, because the unread
   badge is positioned outside the box on purpose. The inner span does the clipping instead. */
.psr-icon {
  position: relative; width: 28px; height: 28px; border-radius: 8px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background-clip: padding-box;
}
.psr-inner {
  width: 100%; height: 100%; border-radius: 8px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700; font-size: 11px;
}
.psr-inner img { width: 100%; height: 100%; object-fit: cover; display: block; }
.psr-badge {
  position: absolute; bottom: -3px; right: -3px; min-width: 15px; height: 15px;
  padding: 0 3px; border-radius: 8px; background: var(--red, #ed4245); color: #fff;
  font-size: 9px; font-weight: 700; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--bg-deep); z-index: 2;
}
.psr-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; text-align: left; }
/* The verified/official badge rides inline with the name, so the name is the part that
   ellipsises and the badge is never the thing that gets cut off. */
.psr-name {
  font-weight: 700; font-size: 11px; color: var(--text-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 140px;
  display: flex; align-items: center; gap: 3px;
}
.psr-name svg, .psr-name > span { flex-shrink: 0; }
/* Online (green) then offline (grey), the same two-segment readout the revamped strip used. */
.psr-count { font-size: 9px; font-weight: 600; color: var(--text-muted); display: flex; align-items: center; gap: 7px; white-space: nowrap; }
.psr-count:empty { display: none; }
.psr-seg { display: flex; align-items: center; gap: 4px; }
.psr-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green, #3ba55d); flex-shrink: 0; }
.psr-dot.off { background: var(--text-muted); opacity: .6; }

/* Themed with the title bar it hangs from, in GlobalRiftCss.css next to that rule
   (`[data-bg="gradient"] #pinnedServerRail`), at the same rung as the bar and the server rail.
   It used to carry its own copy of the wallpaper at the FLOAT rung, which read brighter than
   the bar it touches - that was the "doesn't follow the theme" case. */

/* The customize-theme panel and the docked DM popout do not float over the app, they NARROW
   it (mobile-base.css). #app and the title bar are given the width back; the strip is measured
   against the viewport instead, so it has to be told separately or it is left stranded across
   whichever panel just opened. Same easing, so the three edges move together.
   This matters more now that the tray panel has a button that opens the theme panel. */
#pinnedServerRail { transition: right .25s ease; }
body.ctp-open #pinnedServerRail { right: 300px; }
body.dmpop-open #pinnedServerRail { right: var(--dmp-w); }

/* The phone shell has its own navigation; a second server strip is just lost height. And on a
   narrow screen the rails are transformed in and out, which `position: absolute` against the
   viewport cannot follow - so the strip is off there, offsets and all. */
body.mobile-shell #pinnedServerRail { display: none !important; }
@media (max-width: 768px) {
  #pinnedServerRail, #pinnedServerRail.has-pins { display: none !important; }
  body.ctp-open #pinnedServerRail { right: 0; }   /* the panel overlays instead of docking */
  body.has-pinned-rail #folderSecondaryRail,
  body.has-pinned-rail #channelRail,
  body.has-pinned-rail .channel-area,
  body.has-pinned-rail #trayArea,
  body.has-pinned-rail #dmProfilePanel { margin-top: 0; }
}