/* nav-dock.css — auto-hiding bottom dock navigation (PROTOTYPE, opt-in).
 * Colours via tokens only (passes scripts/ui-theme-check.js). Desktop-only;
 * on <=600px the top bar is restored. See js/core/nav-layout.js (OscarNav). */

/* Hide the top bar and zero out the reserved height → chat + every panel
   (all positioned top:var(--header-h)) reclaim full height automatically. */
html.nav-bottom .header { display: none; }
html.nav-bottom { --header-h: 0px; }

/* ── Dock (any of 4 positions; position via [data-pos]) ───────────────────── */
.nav-dock {
  --dock-icon: 48px;   /* Default size */
  --dock-svg: 26px;
  --dock-gap: 10px;
  position: fixed;
  z-index: 200;
  display: flex;
  gap: var(--dock-gap);
  background: transparent;   /* the visible surface is the masked ::before */
  border: none;
  box-shadow: none;
  transition: transform .28s cubic-bezier(.22,.61,.36,1);
  overflow: visible;
}
.nav-dock.dock-lg { --dock-icon: 62px; --dock-svg: 34px; --dock-gap: 12px; }
.nav-dock #appBar,
.nav-dock #appBarPinned { display: flex; gap: var(--dock-gap); overflow: visible; }
.nav-dock .app-bar-divider { display: none; }   /* no divider clutter in the glyph dock */

/* Position: BOTTOM (row, slides up) */
.nav-dock[data-pos="bottom"] { left: 50%; bottom: 0; max-width: 96vw; flex-direction: row; align-items: flex-end; padding: 34px 20px 12px; transform: translateX(-50%) translateY(calc(100% + 8px)); }
.nav-dock[data-pos="bottom"].revealed { transform: translateX(-50%) translateY(0); }
.nav-dock[data-pos="bottom"] #appBar, .nav-dock[data-pos="bottom"] #appBarPinned { flex-direction: row; align-items: flex-end; }
.nav-dock[data-pos="bottom"] .menu-btn { transform-origin: bottom center; }
/* Position: TOP (row, slides down) */
.nav-dock[data-pos="top"] { left: 50%; top: 0; max-width: 96vw; flex-direction: row; align-items: flex-start; padding: 12px 20px 34px; transform: translateX(-50%) translateY(calc(-100% - 8px)); }
.nav-dock[data-pos="top"].revealed { transform: translateX(-50%) translateY(0); }
.nav-dock[data-pos="top"] #appBar, .nav-dock[data-pos="top"] #appBarPinned { flex-direction: row; align-items: flex-start; }
.nav-dock[data-pos="top"] .menu-btn { transform-origin: top center; }
/* Position: LEFT (column, slides right) */
.nav-dock[data-pos="left"] { top: 50%; left: 0; max-height: 96vh; flex-direction: column; align-items: flex-start; padding: 20px 34px 20px 12px; transform: translateY(-50%) translateX(calc(-100% - 8px)); }
.nav-dock[data-pos="left"].revealed { transform: translateY(-50%) translateX(0); }
.nav-dock[data-pos="left"] #appBar, .nav-dock[data-pos="left"] #appBarPinned { flex-direction: column; align-items: flex-start; }
.nav-dock[data-pos="left"] .menu-btn { transform-origin: left center; }
/* Position: RIGHT (column, slides left) */
.nav-dock[data-pos="right"] { top: 50%; right: 0; max-height: 96vh; flex-direction: column; align-items: flex-end; padding: 20px 12px 20px 34px; transform: translateY(-50%) translateX(calc(100% + 8px)); }
.nav-dock[data-pos="right"].revealed { transform: translateY(-50%) translateX(0); }
.nav-dock[data-pos="right"] #appBar, .nav-dock[data-pos="right"] #appBarPinned { flex-direction: column; align-items: flex-end; }
.nav-dock[data-pos="right"] .menu-btn { transform-origin: right center; }

/* Soft surface: opaque at the screen edge, dissolving to nothing inward — no hard
   container edge for magnified icons to cross. Mask fades the blur too; the icons
   are real children ABOVE this ::before, so they stay crisp/unfaded. */
.nav-dock::before {
  content: ''; position: absolute; z-index: -1;
  background: color-mix(in srgb, var(--surface-2) 90%, transparent);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.nav-dock[data-pos="bottom"]::before { left: 50%; transform: translateX(-50%); width: 100vw; top: 0; bottom: 0;
  -webkit-mask-image: linear-gradient(to top, #000 36%, transparent); mask-image: linear-gradient(to top, #000 36%, transparent); }
.nav-dock[data-pos="top"]::before { left: 50%; transform: translateX(-50%); width: 100vw; top: 0; bottom: 0;
  -webkit-mask-image: linear-gradient(to bottom, #000 36%, transparent); mask-image: linear-gradient(to bottom, #000 36%, transparent); }
.nav-dock[data-pos="left"]::before { top: 50%; transform: translateY(-50%); height: 100vh; left: 0; right: 0;
  -webkit-mask-image: linear-gradient(to right, #000 36%, transparent); mask-image: linear-gradient(to right, #000 36%, transparent); }
.nav-dock[data-pos="right"]::before { top: 50%; transform: translateY(-50%); height: 100vh; left: 0; right: 0;
  -webkit-mask-image: linear-gradient(to left, #000 36%, transparent); mask-image: linear-gradient(to left, #000 36%, transparent); }

/* Glyph-only icons (NO per-icon box) — magnify is the hover feedback; the active
   app gets an accent glyph + a small dot on the edge side, not a filled box. */
.nav-dock .menu-btn {
  width: var(--dock-icon); height: var(--dock-icon);
  background: transparent !important;
  border: none !important;
  border-radius: 0;
  color: var(--text-dim);
  transition: transform .12s ease, color .15s;
  position: relative;
}
.nav-dock .menu-btn:hover { background: transparent !important; border: none !important; color: var(--text); }
.nav-dock .menu-btn.active { background: transparent !important; border: none !important; color: var(--accent); }
.nav-dock .menu-btn.active::after { content: ''; position: absolute; width: 4px; height: 4px; border-radius: 50%; background: var(--accent); }
.nav-dock[data-pos="bottom"] .menu-btn.active::after { left: 50%; bottom: 0; transform: translateX(-50%); }
.nav-dock[data-pos="top"] .menu-btn.active::after { left: 50%; top: 0; transform: translateX(-50%); }
.nav-dock[data-pos="left"] .menu-btn.active::after { top: 50%; left: 0; transform: translateY(-50%); }
.nav-dock[data-pos="right"] .menu-btn.active::after { top: 50%; right: 0; transform: translateY(-50%); }
.nav-dock .menu-btn svg { width: var(--dock-svg); height: var(--dock-svg); }

/* macOS-style app-name label beside the focused (hovered) icon (position set in JS) */
.nav-dock-tip {
  position: fixed;
  z-index: 203;
  padding: 4px 10px;
  border-radius: var(--radius);
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-1);
  font-size: var(--fs-sm);
  font-weight: 600;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity .12s ease;
}
.nav-dock-tip.show { opacity: 1; }
.nav-dock-tip::after { content: ''; position: absolute; border: 5px solid transparent; }
.nav-dock-tip.tip-bottom::after { left: 50%; top: 100%; transform: translateX(-50%); border-top-color: var(--surface-2); }
.nav-dock-tip.tip-top::after { left: 50%; bottom: 100%; transform: translateX(-50%); border-bottom-color: var(--surface-2); }
.nav-dock-tip.tip-left::after { top: 50%; right: 100%; transform: translateY(-50%); border-right-color: var(--surface-2); }
.nav-dock-tip.tip-right::after { top: 50%; left: 100%; transform: translateY(-50%); border-left-color: var(--surface-2); }

/* Always-present edge hot-zone that reveals the dock on hover (32px deep, so the
   dock comes up a bit before the cursor reaches the very edge). z BELOW the dock
   so a revealed dock receives icon clicks. Edge depends on [data-pos]. */
.nav-dock-trigger { position: fixed; z-index: 199; background: transparent; pointer-events: auto; }
.nav-dock-trigger[data-pos="bottom"] { left: 0; right: 0; bottom: 0; height: 32px; }
.nav-dock-trigger[data-pos="top"]    { left: 0; right: 0; top: 0; height: 32px; }
.nav-dock-trigger[data-pos="left"]   { top: 0; bottom: 0; left: 0; width: 32px; }
.nav-dock-trigger[data-pos="right"]  { top: 0; bottom: 0; right: 0; width: 32px; }
/* Faint hint pill so the dock is discoverable */
.nav-dock-trigger::after { content: ''; position: absolute; border-radius: var(--radius-pill); background: var(--overlay-3); }
.nav-dock-trigger[data-pos="bottom"]::after { left: 50%; bottom: 4px; transform: translateX(-50%); width: 64px; height: 4px; }
.nav-dock-trigger[data-pos="top"]::after    { left: 50%; top: 4px; transform: translateX(-50%); width: 64px; height: 4px; }
.nav-dock-trigger[data-pos="left"]::after   { top: 50%; left: 4px; transform: translateY(-50%); width: 4px; height: 64px; }
.nav-dock-trigger[data-pos="right"]::after  { top: 50%; right: 4px; transform: translateY(-50%); width: 4px; height: 64px; }
html:not(.nav-bottom) .nav-dock,
html:not(.nav-bottom) .nav-dock-trigger,
html:not(.nav-bottom) .nav-pod { display: none !important; }

/* ── Floating draggable pod (permanent controls) ──────────────────────────── */
.nav-pod {
  position: fixed;
  top: 10px; right: 12px;
  z-index: 202;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px 5px 4px;
  background: color-mix(in srgb, var(--surface-2) 92%, transparent);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-1);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  user-select: none;
  transition: box-shadow .2s, border-color .2s;
}
.nav-pod.dragging { border-color: var(--accent); box-shadow: 0 6px 24px color-mix(in srgb, var(--accent) 28%, transparent); }
.nav-pod-handle {
  display: flex; align-items: center; justify-content: center;
  width: 18px; height: 28px; flex-shrink: 0;
  color: var(--text-faint); cursor: grab;
  -webkit-tap-highlight-color: transparent;
}
.nav-pod.dragging .nav-pod-handle { cursor: grabbing; }
.nav-pod-controls { display: flex; align-items: center; gap: 8px; }
/* keep the relocated business <select> compact inside the pod */
.nav-pod-controls #globalBusinessSelect { max-width: 160px; }

/* ── Settings → Appearance: Navigation segmented control ──────────────────── */
#navLayoutControl { display: flex; flex-direction: column; gap: var(--space-2); align-items: flex-start; }
.nav-ctl-row { display: flex; gap: var(--space-1); }
.nav-ctl-sublabel { font-size: var(--fs-xs); color: var(--text-dim); }
.nav-layout-btn {
  flex: 0 0 auto; cursor: pointer; padding: var(--space-1) var(--space-3);
  border: 1px solid var(--border); border-radius: var(--radius-pill);
  background: var(--surface); color: var(--text-dim);
  font-size: var(--fs-sm); font-weight: 600;
  transition: border-color .15s, color .15s, background .15s;
}
.nav-layout-btn:hover { border-color: var(--border-strong); color: var(--text); }
.nav-layout-btn.active { border-color: var(--accent); color: var(--text-on-accent); background: var(--accent); }

/* ── Mobile: keep the top bar (the hover dock model needs a pointer) ──────── */
@media (max-width: 600px) {
  html.nav-bottom .header { display: flex; }
  html.nav-bottom { --header-h: 52px; }
  .nav-dock, .nav-dock-trigger, .nav-pod { display: none !important; }
}