/* ═══ THE GRAPEVINE LINE, DOCKED TO THE BOTTOM OF EVERY PORTAL PAGE ═════════
 *
 * Dom 2026-09-09: "show the communicator audio / video / text on the bottom of
 * their profile as an expandable window — we had this menu bar on the bottom of
 * the screen before — use it for that."
 *
 * WHAT THIS SHEET IS AND IS NOT. It is a HOST, not a second communicator. The
 * chat, the calls, the presence line, the unread badge and the three buttons all
 * belong to components/gv-line.js and are unchanged — this sheet takes the dock
 * and the chat panel that component already builds and re-seats them inside one
 * persistent bottom bar (components/gv-dock.js), so an agent meets ONE
 * floating-bar idea on this product instead of a corner blob that only existed
 * on two screens.
 *
 * THE BAR'S ANATOMY IS THE ORDER PAGE'S SMART BOTTOM BAR (.co5 .bbar,
 * cs-order-v5.css:637): fixed to the bottom edge, full width inside the rail,
 * 1px top line, translucent ground over a 12px backdrop blur, one row of
 * controls. Same anatomy, same numbers, nothing new invented. The one thing
 * added is the Grapevine accent on the top edge, because this bar belongs to a
 * GV tenant and to nothing else.
 *
 * EVERY VALUE IS A TOKEN. --brand is grape on a Grapevine session (tokens.css,
 * html.is-gv) so the accent needs no literal of its own; the #642eba fallbacks
 * exist only so a sheet that somehow loads without tokens.css still paints
 * Grapevine rather than nothing. NO RED ANYWHERE — that law is absolute on GV
 * surfaces, and the only red in the whole feature is gv-line's own Hang up,
 * which is danger and is not ours to repaint.
 *
 * WHY EVERY OVERRIDE IS PREFIXED WITH #gv-dock. gv-line.js injects its skin as a
 * <style> element at runtime, which lands AFTER this <link> in the head — so on
 * equal specificity ITS declaration wins, and the re-seated panel would keep the
 * fixed-position offsets it no longer has any use for. The id prefix puts every
 * override a whole specificity class above anything that file can write, so the
 * two sheets can never argue. gv-line.js is not edited by this lane.
 */

:root { --gvd-h: 48px; }

/* The bar is inside the rail, never under it — same insets the topbar and the
   shell already use (main.css:7603, property-rail.css:713). */
#gv-dock {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 9000;
  display: flex; flex-direction: column-reverse;   /* bar at the bottom edge, panel above it */
  font-family: var(--font-sans, Geist, Inter, system-ui, sans-serif);
}
#gv-dock[hidden] { display: none !important; }
body:has(#app-nav.ag-chrome) #gv-dock { left: 238px; }
html.has-agent-rail-mini body:has(#app-nav.ag-chrome) #gv-dock { left: 58px; }
@media (max-width: 900px) {
  body:has(#app-nav.ag-chrome) #gv-dock { left: 58px; }
}

/* ── COLLAPSED: one slim bar ───────────────────────────────────────────────── */
#gv-dock .gvd-bar {
  flex: none; height: var(--gvd-h);
  display: flex; align-items: center; gap: 12px;
  padding: 0 12px 0 16px;
  background: color-mix(in srgb, var(--bg-elevated, #1d1826) 92%, transparent);
  backdrop-filter: blur(12px);
  border-top: 2px solid var(--brand, #642eba);
}
/* The bar's own name. A LABEL, not a control, and the only text this sheet adds:
   who is on the line and the three ways to reach them are gv-line's words, in
   gv-line's elements, and are not restated here (no duplicate controls). */
#gv-dock .gvd-label {
  flex: none; min-width: 0;
  font-size: calc(12.5px * var(--text-scale, 1)); font-weight: 600; letter-spacing: -.01em;
  color: var(--brand, #642eba); white-space: nowrap;
}
#gv-dock .gvd-slot { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; }

/* gv-line's dock, re-seated. It arrives as a floating pill with its own ground,
   border, radius and shadow — inside a bar that already has all four, those are
   the bar drawn twice, so they come off and the row it holds is kept. */
#gv-dock .gvd-slot > .gvl-dock {
  position: static; left: auto; right: auto; bottom: auto; transform: none;
  flex: 1 1 auto; width: 100%; min-width: 0; max-width: none;
  padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none;
  transition: none;
}
/* Identity and presence to the left, the three buttons to the right. */
#gv-dock .gvd-slot > .gvl-dock .gvl-dock-live { margin-right: auto; }

/* ── EXPANDED: the panel gv-line already builds ─────────────────────────────
   Opened by the bar's own Chat button (gv-line's), remembered in
   localStorage cs.ui.gvdock by components/gv-dock.js. */
#gv-dock .gvd-body {
  flex: 0 1 auto; display: none; min-height: 0;
  height: min(480px, 56vh); max-height: 480px;
  border-top: 1px solid var(--line, rgba(255,255,255,.09));
  background: var(--bg-elevated, #1d1826);
  box-shadow: var(--shadow-3, 0 -18px 60px rgba(0,0,0,.44));
}
#gv-dock.is-open .gvd-body { display: flex; }
/* NOTE: no `display` here. gv-line's panel is display:none until it carries
   .is-open, and that is the one behaviour this host wants to keep — the bar's
   Chat button stays the single switch for the whole dock. */
#gv-dock .gvd-body > .gvl-panel {
  position: static; left: auto; right: auto; bottom: auto;
  width: auto; height: auto; max-height: none;
  flex: 1 1 auto; min-width: 0; min-height: 0;
  border: 0; border-radius: 0; box-shadow: none; transition: none;
  background: var(--bg-elevated, #1d1826);
}
/* The panel's head named the room and carried a close X. Docked, the bar above
   it already names the room (gvl-who) and the Chat button already closes it, so
   the head is the same two things a second time (minimalist law, no duplicate
   controls). */
#gv-dock .gvd-body > .gvl-panel .gvl-head { display: none; }
/* gv-line fades the panel out under a gallery drag because, floating, it could
   eat the drop. Docked below the page it can no longer be over anything, so the
   fade is a flicker with nothing to fix. */
#gv-dock .gvd-body > .gvl-panel.is-dragfade { opacity: 1; pointer-events: auto; }

/* ── ONE BOTTOM SYSTEM (the doctrine is gv-line.js:54, kept) ────────────────
   Two floating bars in one place is the failure. The delivery page's transient
   "Download selected (n)" pill keeps its thumb position and steps up over this
   bar; the call box steps up over the open panel. Neither is ever drawn under
   the other, and neither of those two elements is edited to make it happen. */
body:has(#gv-dock:not([hidden])) .app-shell { padding-bottom: var(--gvd-h); }
body:has(#gv-dock:not([hidden])) .dlt-pill { bottom: calc(var(--gvd-h) + 14px); }
body:has(#gv-dock:not([hidden])) .gvl-callbox { bottom: calc(var(--gvd-h) + 12px); }
body:has(#gv-dock.is-open) .gvl-callbox { bottom: calc(var(--gvd-h) + min(480px, 56vh) + 12px); }

@media (prefers-reduced-motion: reduce) {
  #gv-dock, #gv-dock .gvd-body { transition: none; }
}
/* Narrow: the label is the first thing to go — the presence line beside it says
   the same thing in more useful words, and the three 44px targets are the point
   of the bar. */
@media (max-width: 560px) {
  #gv-dock .gvd-label { display: none; }
  #gv-dock .gvd-bar { padding-left: 12px; }
}