/* ===================================================================
   TEARust v2 — Dynamic dock floating over full-screen map
   =================================================================== */

:root {
  --v2-topbar-h: 44px;
  --v2-dock-radius: 18px;
  --v2-ease: cubic-bezier(0.65, 0, 0.35, 1);
  --v2-dur: 280ms;
}

/* ── Slim topbar ─────────────────────────────────────────────────── */
body.v2 .topbar {
  height: var(--v2-topbar-h);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  background: rgba(11, 13, 16, 0.95);
  border-bottom: 1px solid rgba(217, 107, 62, 0.12);
}

/* ── Layout: map fills entire remaining height ───────────────────── */
body.v2 .layout {
  display: block;
  position: relative;
  height: calc(100dvh - var(--v2-topbar-h));
  overflow: hidden;
}

body.v2 .mapwrap {
  position: absolute;
  inset: 0;
  min-width: 0;
  z-index: 1;
}

/* ── Chat dock panel: flex column so chatBox can grow ────────────── */
body.v2 .v2-dock-panel-chat {
  min-width: 340px;
}

body.v2 .v2-dock-panel-chat .chat {
  min-height: 160px;
  max-height: 260px;
  overflow-y: auto;
}

/* ── Dock container ──────────────────────────────────────────────── */
body.v2 .v2-dock {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 50;

  display: grid;
  grid-template-rows: 0fr auto auto;
  grid-template-columns: minmax(0, 1fr);
  row-gap: 0;
  isolation: isolate;

  /* Glass pill look */
  background: rgba(9, 11, 14, 0.88);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: var(--v2-dock-radius);
  padding: 6px;

  /* Never exceed the viewport — let the tab nav scroll internally (its
     scrollbar is hidden) instead of overflowing the page horizontally. */
  max-width: calc(100vw - 24px);

  /* Expanded background glow — matches example's ::before trick */
  box-shadow:
    0 0 0 1px rgba(217, 107, 62, 0.08),
    0 8px 40px rgba(0, 0, 0, 0.55),
    0 2px 8px rgba(0, 0, 0, 0.4);

  transition:
    box-shadow var(--v2-dur) ease,
    border-color var(--v2-dur) ease;
}

body.v2 .v2-dock.is-open {
  border-color: rgba(217, 107, 62, 0.18);
  box-shadow:
    0 0 0 1px rgba(217, 107, 62, 0.12),
    0 16px 56px rgba(0, 0, 0, 0.65),
    0 4px 16px rgba(0, 0, 0, 0.5);
}

/* ── Panel wrapper: anchored popover card above the pill ─────────────
   The pill (tab bar) NEVER changes size or position. Panels live in their
   own glass card, absolutely anchored above the dock, that fades/slides in.
   No layout shift, nothing moves under the cursor. */
body.v2 .v2-dock-panels-wrap {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  width: min(820px, calc(100vw - 24px));
  transform: translateX(-50%) translateY(10px) scale(0.985);
  transform-origin: bottom center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  background: rgba(9, 11, 14, 0.92);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  border: 1px solid rgba(217, 107, 62, 0.18);
  border-radius: var(--v2-dock-radius);
  padding: 6px;
  box-shadow:
    0 0 0 1px rgba(217, 107, 62, 0.08),
    0 16px 56px rgba(0, 0, 0, 0.65),
    0 4px 16px rgba(0, 0, 0, 0.5);

  overflow: hidden;
  min-height: 0;
  transition:
    opacity 160ms ease,
    transform 200ms var(--v2-ease),
    visibility 0s linear 200ms;
}

body.v2 .v2-dock.is-open .v2-dock-panels-wrap {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0) scale(1);
  transition:
    opacity 160ms ease,
    transform 200ms var(--v2-ease);
}

body.v2 .v2-dock-panels {
  min-height: 0;
  overflow: hidden;
  /* ONE fixed panel area, identical on every resolution. Height is derived from
     the real free space: full viewport minus topbar (44) + bottom gap (20) +
     dock padding/nav/divider (~96) = ~160px of chrome. Capped at 620 on big
     screens so it doesn't get huge. It can never exceed the screen, so the top
     is never cut off; tall tabs scroll inside this box instead. */
  height: min(620px, calc(100dvh - 160px));
}

/* ── Individual panels ───────────────────────────────────────────── */
body.v2 .v2-dock-panel {
  display: none;
  flex-direction: column;
  gap: 4px;
  padding: 4px 6px 8px;
  height: 100%;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
}

body.v2 .v2-dock-panel.is-active {
  display: flex;
  animation: v2-panel-in 200ms ease both;
}

@keyframes v2-panel-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

body.v2 .v2-dock-panel::-webkit-scrollbar { width: 3px; }
body.v2 .v2-dock-panel::-webkit-scrollbar-track { background: transparent; }
body.v2 .v2-dock-panel::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.1);
  border-radius: 2px;
}

body.v2 .v2-dock-panel-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 2px 4px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.28);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  margin-bottom: 4px;
  flex-shrink: 0;
}

/* ── Divider between panels and nav — obsolete since the panel area became
   a floating popover card; keep the element, just never show it. ──── */
body.v2 .v2-dock-divider { display: none; }

/* ── Tab bar ─────────────────────────────────────────────────────── */
body.v2 .v2-dock-nav {
  display: flex;
  flex-wrap: wrap;          /* never clip a tab — wrap to a 2nd row instead */
  align-items: center;
  justify-content: center;
  gap: 2px;
  row-gap: 4px;
  position: relative;
  padding: 2px;
  scrollbar-width: none;
}
body.v2 .v2-dock-nav::-webkit-scrollbar { display: none; }

/* Sliding pill background for active tab */
body.v2 .v2-dock-pill {
  display: none;            /* tabs may wrap to 2 rows; pill (single-row) would mis-place */
  position: absolute;
  top: 2px;
  bottom: 2px;
  left: 2px;
  width: var(--pill-w, 0px);
  transform: translateX(var(--pill-x, 0px));
  background: rgba(217, 107, 62, 0.18);
  border: 1px solid rgba(217, 107, 62, 0.3);
  border-radius: 12px;
  pointer-events: none;
  opacity: 0;
  transition:
    width 220ms cubic-bezier(0.4, 0, 0.2, 1),
    transform 220ms cubic-bezier(0.4, 0, 0.2, 1),
    opacity 150ms ease;
  will-change: width, transform, opacity;
}

body.v2 .v2-dock-tab {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 16px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 12px;
  color: rgba(180, 186, 194, 0.7);
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.03em;
  white-space: nowrap;
  transition:
    color 180ms ease,
    background 180ms ease;
}

body.v2 .v2-dock-tab:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.05);
}

body.v2 .v2-dock-tab.is-active {
  color: var(--accent-hi);
  background: rgba(217, 107, 62, 0.18);
  border-color: rgba(217, 107, 62, 0.3);
}

body.v2 .v2-dock-tab-chat {
  color: rgba(180, 186, 194, 0.55);
}

body.v2 .v2-dock-tab-chat.is-active {
  color: var(--accent-hi);
}

/* Separator between main tabs and chat */
body.v2 .v2-dock-sep {
  width: 1px;
  height: 20px;
  background: rgba(255, 255, 255, 0.09);
  border-radius: 1px;
  flex-shrink: 0;
  margin: 0 4px;
}

/* ── Panel inner element styles ──────────────────────────────────── */
body.v2 .v2-dock-panel .panel {
  background: transparent;
  border: none;
  box-shadow: none;
  margin: 0;
}
body.v2 .v2-dock-panel .panel h3 { display: none; }

/* Team list inside dock: compact */
body.v2 .v2-dock-panel .team { min-width: 320px; }

/* Tool grid: use full width */
body.v2 .v2-dock-panel .tool-grid { min-width: 300px; }

/* Layers: compact columns */
body.v2 .v2-dock-panel .layers {
  min-width: 280px;
  columns: 2;
  column-gap: 8px;
}
body.v2 .v2-dock-panel .layers li { break-inside: avoid; }

/* ── Hide topbar Tools button (moved into dock) ──────────────────── */
body.v2 #btnTools { display: none !important; }

/* ── Map FABs: keep above dock ───────────────────────────────────── */
body.v2 .mapHud,
body.v2 .zoomctl,
body.v2 .shop-search-fab,
body.v2 .shop-search-panel,
body.v2 .notepad-fab,
body.v2 .notepad-popup,
body.v2 .drops-overlay {
  z-index: 10;
}


/* ── Chat corner widget ──────────────────────────────────────────── */
body.v2 .v2-chat-widget {
  position: absolute;
  bottom: 12px;
  right: 60px; /* left of zoom controls (40px wide) + 8px gap */
  z-index: 60;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  pointer-events: none;
}

body.v2 .v2-chat-fab {
  position: relative;
  pointer-events: all;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  padding: 4px;
  background: rgba(9,11,14,0.88);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,0.09);
  box-shadow: 0 4px 20px rgba(0,0,0,0.4);
  color: rgba(180,186,194,0.7);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 130ms ease, border-color 130ms ease, color 130ms ease;
  flex-shrink: 0;
}

body.v2 .v2-chat-fab:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.1);
  color: var(--text);
}

body.v2 .v2-chat-widget.is-open .v2-chat-fab {
  background: rgba(255,255,255,0.08);
  border-color: rgba(217,107,62,0.3);
  color: var(--accent-hi);
}

body.v2 .v2-chat-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 9px;
  background: #dc2626;
  border: 2px solid rgba(9, 11, 14, 0.9);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 14px;
  text-align: center;
  box-shadow: 0 0 8px rgba(220, 38, 38, 0.6);
  animation: v2-badge-pop 250ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes v2-badge-pop {
  from { transform: scale(0.5); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}

body.v2 .v2-chat-win {
  display: none;
  pointer-events: all;
  width: 380px;
  flex-direction: column;
  background: rgba(9, 11, 14, 0.92);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  border: 1px solid rgba(217, 107, 62, 0.18);
  border-radius: 16px;
  box-shadow:
    0 0 0 1px rgba(217, 107, 62, 0.08),
    0 16px 56px rgba(0, 0, 0, 0.65);
  overflow: hidden;
}

body.v2 .v2-chat-widget.is-open .v2-chat-win {
  display: flex;
  animation: v2-chat-rise 220ms cubic-bezier(0.34, 1.1, 0.64, 1) both;
}

@keyframes v2-chat-rise {
  from { opacity: 0; transform: translateY(12px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}

/* ── Chat window header ──────────────────────────────────────────── */
body.v2 .v2-chat-win-head {
  display: flex;
  align-items: center;
  padding: 6px 8px 6px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  flex-shrink: 0;
  gap: 4px;
}

body.v2 .v2-chat-win-head .chat-tabs {
  flex: 1;
  display: flex;
  gap: 2px;
  margin-bottom: 0;
}

/* Tab pills */
body.v2 .v2-chat-widget .chat-tab {
  flex: none;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  color: rgba(180, 186, 194, 0.45);
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease;
  display: flex;
  align-items: center;
  gap: 4px;
}

body.v2 .v2-chat-widget .chat-tab:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
}

body.v2 .v2-chat-widget .chat-tab-active {
  background: rgba(217, 107, 62, 0.14);
  border-color: rgba(217, 107, 62, 0.2);
  color: var(--accent-hi);
}

/* Close button */
body.v2 .v2-chat-close {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: rgba(180, 186, 194, 0.35);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 140ms ease, color 140ms ease;
  flex-shrink: 0;
}

body.v2 .v2-chat-close:hover {
  background: rgba(255, 255, 255, 0.07);
  color: rgba(255, 255, 255, 0.7);
}

/* ── Message area ────────────────────────────────────────────────── */
body.v2 .v2-chat-box {
  flex: 1;
  min-height: 200px;
  max-height: 320px;
  overflow-y: auto;

  /* strip the base .chat box */
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 10px 14px 6px;
  gap: 2px;
}

body.v2 .v2-chat-box::-webkit-scrollbar { width: 3px; }
body.v2 .v2-chat-box::-webkit-scrollbar-track { background: transparent; }
body.v2 .v2-chat-box::-webkit-scrollbar-thumb { background: rgba(255,255,255,.08); border-radius: 2px; }

/* Tighter message rows */
body.v2 .v2-chat-widget .msg {
  padding: 3px 6px;
  border-radius: 6px;
  gap: 8px;
}

body.v2 .v2-chat-widget .msg:hover { background: rgba(255,255,255,.04); }

body.v2 .v2-chat-widget .msg-avatar {
  width: 28px;
  height: 28px;
  font-size: 10px;
}

/* img IS the .msg-avatar — base rule gives it display:flex which breaks rendering */
body.v2 .v2-chat-widget img.msg-avatar {
  display: block;
  object-fit: cover;
  flex-shrink: 0;
}

body.v2 .v2-chat-widget .msg-header .auth { font-size: 12px; }
body.v2 .v2-chat-widget .msg-header .t    { font-size: 10px; }
body.v2 .v2-chat-widget .msg-body         { font-size: 12.5px; }

/* ── Input area ──────────────────────────────────────────────────── */
body.v2 .v2-chat-form {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 8px 10px 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  flex-shrink: 0;
  margin: 0;
}

body.v2 .v2-chat-widget .chat-input-row {
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 0 4px 0 12px;
  gap: 4px;
  transition: border-color 150ms ease, background 150ms ease;
}

body.v2 .v2-chat-widget .chat-input-row:focus-within {
  border-color: rgba(217, 107, 62, 0.4);
  background: rgba(255, 255, 255, 0.07);
}

body.v2 .v2-chat-widget .chatform input[type="text"],
body.v2 .v2-chat-widget .chatform input:not([type]) {
  flex: 1;
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 8px 0;
  font-size: 12.5px;
  color: var(--text);
  outline: none;
}

body.v2 .v2-chat-widget .chatform input::placeholder {
  color: rgba(180, 186, 194, 0.3);
}

body.v2 .v2-chat-widget .chatform button[type="submit"] {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: rgba(217, 107, 62, 0.2);
  border: 1px solid rgba(217, 107, 62, 0.25);
  color: var(--accent-hi);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 140ms ease, border-color 140ms ease;
}

body.v2 .v2-chat-widget .chatform button[type="submit"]:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

/* Bridge toggle — pill switch */
body.v2 .v2-chat-widget .bridgechk {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 500;
  color: rgba(180, 186, 194, 0.45);
  padding: 0 2px;
  cursor: pointer;
  user-select: none;
  margin: 0;
  transition: color 140ms ease;
}

body.v2 .v2-chat-widget .bridgechk:hover { color: rgba(180, 186, 194, 0.75); }

/* Hide native checkbox */
body.v2 .v2-chat-widget .bridgechk input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  width: 28px;
  height: 16px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.12);
  cursor: pointer;
  flex-shrink: 0;
  transition: background 200ms ease, border-color 200ms ease;
}

body.v2 .v2-chat-widget .bridgechk input[type="checkbox"]::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(180, 186, 194, 0.5);
  transition: transform 200ms cubic-bezier(0.34, 1.2, 0.64, 1), background 200ms ease;
}

body.v2 .v2-chat-widget .bridgechk input[type="checkbox"]:checked {
  background: rgba(217, 107, 62, 0.35);
  border-color: rgba(217, 107, 62, 0.5);
}

body.v2 .v2-chat-widget .bridgechk input[type="checkbox"]:checked::after {
  transform: translateX(12px);
  background: var(--accent-hi);
}

/* ── Commands collapsible ────────────────────────────────────────── */
body.v2 .v2-chat-widget .cmds-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0;
  padding: 6px 12px;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(180, 186, 194, 0.28);
  border-top: 1px solid rgba(255, 255, 255, 0.04);
  cursor: pointer;
  user-select: none;
  transition: color 140ms ease;
}

body.v2 .v2-chat-widget .cmds-heading:hover { color: rgba(180, 186, 194, 0.55); }

body.v2 .v2-chat-widget .cmds-toggle-icon {
  font-size: 8px;
  opacity: 0.7;
}

body.v2 .v2-chat-widget .cmds-panel {
  margin: 0;
  padding: 0 12px 10px;
  max-height: 160px;
  overflow-y: auto;
}

body.v2 .v2-chat-widget .cmds-table { font-size: 10.5px; }

body.v2 .v2-chat-widget .cmds-table td { padding: 2px 4px; }

body.v2 .v2-chat-widget .cmds-table td:last-child { color: rgba(180,186,194,0.45); }

/* ── Medium screens (<1200px): hide tab labels, compact dock ─────── */
@media (max-width: 1199px) {
  body.v2 .v2-dock-tab span { display: none; }
  body.v2 .v2-dock-tab { padding: 9px 12px; gap: 0; }
}

/* ── Mobile (<600px): dock goes full width, no columns ───────────── */
@media (max-width: 599px) {
  body.v2 .v2-dock {
    left: 12px;
    right: 12px;
    bottom: 12px;
    transform: none;
  }
  body.v2 .v2-dock-tab span { display: none; }
  body.v2 .v2-dock-tab { padding: 9px 12px; gap: 0; }
  body.v2 .v2-dock-panel .layers { columns: 1; }
  body.v2 .v2-chat-widget { right: 60px; bottom: 12px; }
  body.v2 .v2-chat-win { width: calc(100vw - 32px); }
}

/* ── Topbar v2 — logo image only, base CSS handles the rest ─────── */
body.v2 .topbar { height: var(--v2-topbar-h); }

body.v2 .tb-logo-img {
  width: 24px;
  height: 24px;
  object-fit: contain;
  image-rendering: pixelated;
  flex-shrink: 0;
}

body.v2 .tb-logo-mark { display: none; }

/* ── Zoom controls glass style ───────────────────────────────────── */
body.v2 .zoomctl {
  background: rgba(9,11,14,0.88);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 12px;
  padding: 4px;
  gap: 3px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.4);
}

body.v2 .zoomctl button {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: transparent;
  border: 1px solid transparent;
  color: rgba(180,186,194,0.7);
  font-size: 15px;
  font-weight: 500;
  transition: background 130ms ease, color 130ms ease, border-color 130ms ease;
}

body.v2 .zoomctl button:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.1);
  color: var(--text);
}

/* ── Notepad FAB ─────────────────────────────────────────────────── */
body.v2 .notepad-fab {
  background: rgba(9,11,14,0.88);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px;
  width: auto;
  height: auto;
  padding: 7px 12px 7px 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  box-shadow: 0 4px 20px rgba(0,0,0,0.45);
  color: rgba(180,186,194,0.75);
  transition: border-color 130ms ease, color 130ms ease, background 130ms ease;
}

body.v2 .notepad-fab:hover {
  background: rgba(20,23,28,0.96);
  border-color: rgba(255,255,255,0.18);
  color: var(--text);
}

body.v2 .notepad-fab svg { width: 13px; height: 13px; flex-shrink: 0; }

/* ── Shop search FAB glass style ─────────────────────────────────── */
body.v2 .shop-search-fab {
  background: rgba(9,11,14,0.88) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,0.11) !important;
  border-radius: 22px !important;
  width: auto !important;
  height: auto !important;
  padding: 7px 14px 7px 10px !important;
  display: flex !important;
  align-items: center;
  gap: 7px;
  color: rgba(180,186,194,0.38) !important;
  box-shadow: 0 2px 16px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.05);
  transition: border-color 130ms ease, color 130ms ease, background 130ms ease, box-shadow 130ms ease;
  cursor: text;
  font-size: 12px;
  font-weight: 400;
  white-space: nowrap;
}

body.v2 .shop-search-fab span { display: inline !important; }
body.v2 .shop-search-fab .ssf-text { font-style: italic; }

body.v2 .shop-search-fab:hover {
  background: rgba(20,24,30,0.95) !important;
  border-color: rgba(255,255,255,0.2) !important;
  color: rgba(180,186,194,0.65) !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.65), inset 0 1px 0 rgba(255,255,255,0.07) !important;
}

body.v2 .shop-search-fab.active {
  border-color: rgba(217,107,62,0.5) !important;
  color: var(--accent-hi, #f08550) !important;
  background: rgba(217,107,62,0.08) !important;
  cursor: pointer;
}

/* ── Dock tab badges ─────────────────────────────────────────────── */
body.v2 .v2-tab-badge {
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: #dc2626;
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  margin-left: 2px;
  animation: v2-badge-pop 250ms cubic-bezier(0.34,1.56,0.64,1) both;
}

body.v2 .v2-tab-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #f97316;
  margin-left: 2px;
  animation: v2-badge-pop 250ms cubic-bezier(0.34,1.56,0.64,1) both;
}

/* ── Dock tab hover tooltip ──────────────────────────────────────── */
body.v2 .v2-dock-tab[data-tip] {
  position: relative;
}

body.v2 .v2-dock-tab[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: rgba(12,14,18,0.95);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 120ms ease;
  z-index: 100;
}

body.v2 .v2-dock-tab[data-tip]:hover::after {
  opacity: 1;
}

/* ── Toast notifications ─────────────────────────────────────────── */
body.v2 .v2-toasts {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 80;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  pointer-events: none;
}

body.v2 .v2-toast {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px 8px 10px;
  background: rgba(9,11,14,0.92);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.5);
  font-size: 12.5px;
  color: var(--text);
  white-space: nowrap;
  animation: v2-toast-in 240ms cubic-bezier(0.34,1.1,0.64,1) both;
}

body.v2 .v2-toast.is-out {
  animation: v2-toast-out 220ms ease forwards;
}

body.v2 .v2-toast-icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
body.v2 .v2-toast-icon img { display: block; }

body.v2 .v2-toast-icon.c-amber { background: rgba(245,158,11,0.15); color: #f59e0b; }
body.v2 .v2-toast-icon.c-red   { background: rgba(220,38,38,0.15);  color: #f87171; }
body.v2 .v2-toast-icon.c-blue  { background: rgba(59,130,246,0.15); color: #60a5fa; }
body.v2 .v2-toast-icon.c-orange { background: rgba(249,115,22,0.15); color: #fb923c; }
body.v2 .v2-toast-icon.c-green { background: rgba(34,197,94,0.15);  color: #4ade80; }
body.v2 .v2-toast-icon.c-muted { background: rgba(255,255,255,0.06); color: rgba(180,186,194,0.6); }
body.v2 .v2-toast-icon.c-accent { background: rgba(217,107,62,0.15); color: var(--accent-hi); }

body.v2 .v2-toast-label {
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.01em;
}

body.v2 .v2-toast-msg {
  font-size: 11.5px;
  color: rgba(180,186,194,0.7);
  margin-left: 2px;
}

@keyframes v2-toast-in {
  from { opacity: 0; transform: translateY(-8px) scale(0.95); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes v2-toast-out {
  from { opacity: 1; transform: translateY(0) scale(1); max-height: 60px; margin-bottom: 0; }
  to   { opacity: 0; transform: translateY(-6px) scale(0.96); max-height: 0; margin-bottom: -6px; }
}

/* ── Team list dock improvements ─────────────────────────────────── */
body.v2 .v2-dock-panel .team .member {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 6px;
  border-radius: 8px;
  transition: background 120ms ease;
}

body.v2 .v2-dock-panel .team .member:hover {
  background: rgba(255,255,255,0.04);
}

body.v2 .v2-dock-panel .team .team-avatar-wrap {
  position: relative;
  flex-shrink: 0;
}

body.v2 .v2-dock-panel .team .online-dot {
  position: absolute;
  bottom: -1px;
  right: -1px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1.5px solid rgba(9,11,14,0.9);
  background: #6b7280;
}

body.v2 .v2-dock-panel .team .member.is-online .online-dot {
  background: #4ade80;
}

body.v2 .v2-dock-panel .team .member.is-dead .online-dot {
  background: #f87171;
}

body.v2 .v2-dock-panel .member-name {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.v2 .v2-dock-panel .member-status {
  font-size: 10px;
  color: rgba(180,186,194,0.4);
  font-weight: 500;
}

body.v2 .v2-dock-panel .member.is-dead .member-name {
  opacity: 0.45;
}

body.v2 .v2-dock-panel .member.is-dead .member-status {
  color: #f87171;
}

/* ── Voice / Sound Alerts panel ─────────────────────────────────── */
/* ── Events panel ───────────────────────────────────────────────── */
body.v2 [data-panel="events"] { overflow-y: auto; }

body.v2 .ev-sec-label {
  display: flex; align-items: center; gap: 6px;
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: rgba(180,186,194,0.35);
  padding: 10px 14px 5px;
}
body.v2 .ev-sec-label + .ev-sec-label { padding-top: 6px; }

/* Status board — 2-col grid */
body.v2 .status-board {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: 4px 10px 10px;
}

body.v2 .sb-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-top: 2px solid var(--sb-accent, var(--accent));
  border-radius: 10px;
  overflow: hidden;
  transition: background 150ms, box-shadow 150ms;
  position: relative;
}
body.v2 .sb-card:hover {
  background: rgba(255,255,255,0.065);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.1);
}

body.v2 .sb-head {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 12px 8px 8px;
  text-align: center;
}
body.v2 .sb-icon-img {
  width: 22px; height: 22px;
  opacity: 0.85;
  filter: brightness(0) invert(0.85);
}
body.v2 .sb-emoji { font-size: 18px; }
body.v2 .sb-name {
  font-size: 10.5px; font-weight: 700;
  color: rgba(210,205,198,0.9);
  text-align: center; line-height: 1.2;
}
body.v2 .sb-badge {
  font-size: 8px; font-weight: 800;
  letter-spacing: 0.07em; padding: 2px 7px;
  border-radius: 10px;
}
body.v2 .sb-on {
  background: rgba(109,199,123,0.15);
  color: #6dc77b;
  border: 1px solid rgba(109,199,123,0.3);
}
body.v2 .sb-off { display: none; }

body.v2 .sb-rows {
  padding: 0 9px 9px;
  gap: 3px;
  border-top: 1px solid rgba(255,255,255,0.05);
  padding-top: 7px;
}
body.v2 .sb-row { font-size: 10px; gap: 6px; }
body.v2 .sb-key {
  color: rgba(180,186,194,0.38);
  min-width: 0; font-size: 9.5px;
  white-space: nowrap;
}
body.v2 .sb-val { color: rgba(180,186,194,0.8); font-size: 9.5px; }
body.v2 .sb-none { font-size: 9.5px; color: rgba(180,186,194,0.25); text-align: center; padding: 2px 0 4px; }
body.v2 .sb-timer { color: #ffb169; font-weight: 700; }
body.v2 .sb-unlocked { color: rgba(180,186,194,0.4); font-style: italic; }

body.v2 .sb-reset-btn {
  position: absolute; top: 7px; right: 7px;
  background: none; border: 1px solid rgba(255,255,255,0.08); border-radius: 4px;
  color: rgba(180,186,194,0.25); font-size: 10px; cursor: pointer;
  padding: 1px 5px; transition: background 120ms, color 120ms, border-color 120ms;
}
body.v2 .sb-reset-btn:hover { background: rgba(255,255,255,0.07); color: var(--muted); border-color: rgba(255,255,255,0.18); }

/* Events feed */
body.v2 .events {
  list-style: none; margin: 0; padding: 0 10px 10px;
  display: flex; flex-direction: column; gap: 3px; max-height: none;
}
body.v2 .events li {
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: center;
  gap: 7px;
  padding: 6px 10px;
  border-radius: 7px;
  border: 1px solid rgba(255,255,255,0.05);
  background: rgba(255,255,255,0.025);
  font-size: 11px;
  color: rgba(180,186,194,0.7);
  transition: background 100ms;
}
body.v2 .events li:hover { background: rgba(255,255,255,0.06); }
body.v2 .events li[style*="cursor"] { cursor: pointer; }
body.v2 .events li .t {
  font-size: 9px; color: rgba(180,186,194,0.3);
  font-family: ui-monospace, monospace; font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
body.v2 .events li b {
  font-size: 9.5px; font-weight: 800; letter-spacing: 0.06em;
  text-transform: uppercase; font-style: normal; flex-shrink: 0;
}
body.v2 .events li span:last-child { color: rgba(180,186,194,0.6); font-size: 10.5px; }

/* ── Events sub-tabs (Events / Vendors) ─────────────────────────── */
body.v2 .evt-subtabs {
  display: flex; gap: 4px; padding: 8px 10px 6px; flex-shrink: 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
body.v2 .evt-subtab {
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.09);
  color: rgba(180,186,194,0.55); padding: 4px 12px; border-radius: 5px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  cursor: pointer; font-family: inherit; transition: all 100ms;
}
body.v2 .evt-subtab:hover { color: rgba(180,186,194,0.9); background: rgba(255,255,255,0.08); }
body.v2 .evt-subtab--active {
  background: rgba(146,205,44,0.15); border-color: rgba(146,205,44,0.35); color: #92cd2c;
}

/* ── Vending history cards ──────────────────────────────────────── */
body.v2 .vending-history {
  display: flex; flex-direction: column; gap: 0;
  padding: 8px 10px; overflow-y: auto; flex: 1;
}
body.v2 .vend-card {
  padding: 9px 11px; border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.07);
  background: rgba(255,255,255,0.025); margin-bottom: 5px; transition: background 100ms;
}
body.v2 .vend-card:hover { background: rgba(255,255,255,0.05); }
body.v2 .vend-card-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
body.v2 .vend-name { font-size: 11px; font-weight: 700; color: #92cd2c; }
body.v2 .vend-grid {
  font-size: 9.5px; font-family: ui-monospace, monospace;
  color: rgba(180,186,194,0.45); margin-left: auto;
}
body.v2 .vend-times {
  display: flex; gap: 12px; font-size: 9.5px; color: rgba(180,186,194,0.4);
  margin-bottom: 6px; font-family: ui-monospace, monospace; flex-wrap: wrap;
}
body.v2 .vend-orders { display: flex; flex-direction: column; gap: 2px; }
body.v2 .vend-order {
  display: flex; align-items: center; gap: 6px; padding: 3px 0;
  border-top: 1px solid rgba(255,255,255,0.04); font-size: 10.5px;
  color: rgba(180,186,194,0.7);
}
body.v2 .vend-order img { border-radius: 3px; flex-shrink: 0; }
body.v2 .vend-item { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.v2 .vend-cost { color: rgba(180,186,194,0.4); white-space: nowrap; font-size: 10px; }
body.v2 .vend-stock { font-size: 9.5px; white-space: nowrap; }
body.v2 .vend-empty { padding: 16px 12px; color: rgba(180,186,194,0.35); font-size: 11px; }

/* ── Devices panel ──────────────────────────────────────────────── */
body.v2 .dev-cam-btn {
  display: flex; align-items: center; gap: 5px;
  padding: 4px 9px; border-radius: 6px; font-size: 11px; font-weight: 600;
  font-family: inherit; cursor: pointer;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.09);
  color: rgba(180,186,194,0.7);
  transition: background 120ms, border-color 120ms, color 120ms;
}
body.v2 .dev-cam-btn:hover {
  background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.16); color: var(--text);
}

body.v2 #entList { padding: 8px 10px; gap: 6px; }

body.v2 .ent-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; padding: 28px 16px; text-align: center;
  font-size: 11px; color: rgba(180,186,194,0.4); line-height: 1.6;
}

body.v2 .ent-card {
  padding: 10px 12px; border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.07);
  background: rgba(255,255,255,0.03);
  transition: border-color 150ms, background 150ms;
}
body.v2 .ent-card:hover { background: rgba(255,255,255,0.05); }
body.v2 .ent-card-on { border-color: rgba(109,199,123,0.25); background: rgba(109,199,123,0.04); }
body.v2 .ent-card-alert { border-color: rgba(248,113,113,0.3); background: rgba(248,113,113,0.05); }

body.v2 .ent-card-icon { width: 32px; height: 32px; border-radius: 8px; }
body.v2 .ent-card-name { font-size: 12.5px; max-width: 130px; }
body.v2 .ent-card-type { font-size: 10px; margin-top: 2px; opacity: 0.6; }

body.v2 .ent-pill {
  font-size: 10px; font-weight: 700; padding: 3px 8px; border-radius: 20px; letter-spacing: 0.04em;
}

body.v2 .ent-pill-toggle {
  gap: 7px; padding: 2px 0;
}
body.v2 .ent-pill-track {
  width: 32px; height: 18px; border-radius: 9px;
}
body.v2 .ent-pill-thumb {
  width: 13px; height: 13px;
}
body.v2 .ent-pill-toggle.on .ent-pill-thumb { left: 17px; }

body.v2 .ent-bar-wrap { width: 80px; height: 3px; border-radius: 2px; }

body.v2 .ent-del {
  width: 22px; height: 22px; border-radius: 5px;
  color: rgba(255,255,255,0.18);
  transition: background 120ms, color 120ms;
}
body.v2 .ent-del:hover { background: rgba(248,113,113,0.15); color: #f87171; }

body.v2 .ent-icon-edit {
  display: flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 5px;
  background: none; border: none; cursor: pointer;
  color: rgba(255,255,255,0.18);
  transition: background 120ms, color 120ms;
}
body.v2 .ent-icon-edit:hover { background: rgba(255,255,255,0.08); color: var(--text); }

/* ── Layers panel ───────────────────────────────────────────────── */
body.v2 .lyr-section { padding: 10px 12px 4px; }
body.v2 .lyr-section + .lyr-section { border-top: 1px solid rgba(255,255,255,0.05); }

body.v2 .lyr-sec-label {
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: rgba(180,186,194,0.35);
  margin-bottom: 7px;
}

body.v2 .lyr-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
}

body.v2 .lyr-card {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 5px; padding: 9px 6px 8px;
  border-radius: 8px; cursor: pointer; user-select: none;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
  color: rgba(180,186,194,0.45);
  transition: background 120ms, border-color 120ms, color 120ms;
  font-size: 10px; font-weight: 500; text-align: center; line-height: 1.2;
}
body.v2 .lyr-card input { display: none; }
body.v2 .lyr-card:hover { background: rgba(255,255,255,0.07); color: rgba(180,186,194,0.7); }
body.v2 .lyr-card:has(input:checked) {
  background: rgba(217,107,62,0.12);
  border-color: rgba(217,107,62,0.35);
  color: var(--accent-hi, #f0894a);
}
body.v2 .lyr-card-wide { grid-column: span 2; flex-direction: row; gap: 8px; padding: 8px 12px; justify-content: flex-start; }
body.v2 .lyr-card-alliance:has(input:checked) { background: rgba(249,115,22,0.12); border-color: rgba(249,115,22,0.35); color: #fb923c; }

body.v2 .lyr-heat-bar {
  display: flex; align-items: center; gap: 5px;
}
body.v2 .lyr-heat-bar .lyr-card-wide { flex: 1; }
body.v2 .lyr-heat-clear {
  flex-shrink: 0; width: 32px; height: 32px;
  border-radius: 7px; cursor: pointer;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.07);
  color: rgba(180,186,194,0.4); display: flex; align-items: center; justify-content: center;
  transition: background 120ms, color 120ms;
}
body.v2 .lyr-heat-clear:hover { background: rgba(220,38,38,0.15); border-color: rgba(220,38,38,0.3); color: #f87171; }

body.v2 .heat-filter-hdr {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; background: none; border: none; cursor: pointer;
  color: var(--muted); font-size: 11px; font-family: inherit;
  padding: 6px 0 4px; gap: 6px;
}
body.v2 .heat-filter-hdr:hover { color: var(--text); }
body.v2 .heat-filter-chevron { flex-shrink: 0; transition: transform 200ms; }
body.v2 .heat-filter-hdr.is-open .heat-filter-chevron { transform: rotate(180deg); }

/* ── Voice panel ─────────────────────────────────────────────────── */
body.v2 #voicePanel { display: flex; flex-direction: column; }

/* shared toggle pill */
body.v2 .vp-tgl { position: relative; cursor: pointer; flex-shrink: 0; }
body.v2 .vp-tgl input,
body.v2 .vp-master-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
body.v2 .vp-tgl-track {
  display: block; width: 30px; height: 17px; border-radius: 9px;
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.1);
  transition: background 150ms, border-color 150ms; position: relative;
}
body.v2 .vp-tgl-thumb {
  position: absolute; top: 2px; left: 2px;
  width: 11px; height: 11px; border-radius: 50%;
  background: rgba(180,186,194,0.5);
  transition: transform 150ms, background 150ms;
}
body.v2 .vp-tgl input:checked + .vp-tgl-track,
body.v2 .vp-master-toggle input:checked ~ .vp-tgl-track {
  background: var(--accent,#d96b3e); border-color: var(--accent,#d96b3e);
}
body.v2 .vp-tgl input:checked + .vp-tgl-track .vp-tgl-thumb,
body.v2 .vp-master-toggle input:checked ~ .vp-tgl-track .vp-tgl-thumb {
  transform: translateX(13px); background: #fff;
}

/* head */
body.v2 .vp-head {
  padding: 10px 14px 8px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  display: flex; flex-direction: column; gap: 10px;
}
body.v2 .vp-head-row {
  display: flex; align-items: center; justify-content: space-between;
}
body.v2 .vp-master-toggle {
  display: flex; align-items: center; gap: 8px; cursor: pointer;
}
body.v2 .vp-master-label {
  font-size: 12px; font-weight: 700; color: var(--text);
}
body.v2 .vp-status {
  font-size: 10px; font-weight: 600; letter-spacing: 0.04em;
  padding: 2px 7px; border-radius: 4px;
  background: rgba(255,255,255,0.05); color: var(--muted);
}
body.v2 .vp-status[data-ok="1"] {
  background: rgba(74,222,128,0.1); color: #4ade80;
}

/* global sliders */
body.v2 .vp-global-sliders { display: flex; flex-direction: column; gap: 6px; }
body.v2 .vp-gslider { display: flex; align-items: center; gap: 8px; }
body.v2 .vp-gslider-ico { color: var(--muted); display: flex; align-items: center; flex-shrink: 0; }
body.v2 .vp-gval { font-size: 10px; color: var(--muted); width: 28px; text-align: right; flex-shrink: 0; }

/* range shared */
body.v2 .vp-range,
body.v2 .vp-vol-range {
  -webkit-appearance: none; appearance: none;
  height: 3px; border-radius: 2px;
  background: rgba(255,255,255,0.1); outline: none; cursor: pointer;
}
body.v2 .vp-range { flex: 1; }
body.v2 .vp-range::-webkit-slider-thumb,
body.v2 .vp-vol-range::-webkit-slider-thumb {
  -webkit-appearance: none; width: 12px; height: 12px; border-radius: 50%;
  background: var(--accent,#d96b3e); cursor: pointer; border: 2px solid rgba(0,0,0,0.5);
}
body.v2 .vp-range::-moz-range-thumb,
body.v2 .vp-vol-range::-moz-range-thumb {
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--accent,#d96b3e); cursor: pointer; border: 2px solid rgba(0,0,0,0.5);
}

/* groups */
body.v2 .vp-groups { flex: 1; overflow-y: auto; padding: 6px 0; }
body.v2 .vp-group { margin-bottom: 2px; }
body.v2 .vp-group-label {
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: rgba(180,186,194,0.35);
  padding: 6px 14px 3px;
}

/* event rows */
body.v2 .vp-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 5px 14px;
  transition: background 100ms;
}
body.v2 .vp-row:hover { background: rgba(255,255,255,0.03); }
body.v2 .vp-row-off { opacity: 0.38; }
body.v2 .vp-row-label {
  font-size: 11.5px; color: var(--text); font-weight: 500;
}
body.v2 .vp-vol-wrap { display: flex; align-items: center; gap: 6px; }
body.v2 .vp-vol-range { width: 72px; }
body.v2 .vp-vol-val {
  font-size: 10px; color: var(--muted);
  width: 28px; text-align: right; flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}

/* actions */
body.v2 .vp-actions {
  display: flex; gap: 6px;
  padding: 8px 14px 10px;
  border-top: 1px solid rgba(255,255,255,0.06);
}
body.v2 .vp-btn {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 5px;
  padding: 6px 10px; border-radius: 7px;
  font-size: 11px; font-weight: 600; cursor: pointer; font-family: inherit;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08);
  color: rgba(180,186,194,0.75);
  transition: background 120ms, border-color 120ms, color 120ms;
}
body.v2 .vp-btn:hover {
  background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.15); color: var(--text);
}

/* ── Reduced motion ──────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  body.v2 .v2-dock,
  body.v2 .v2-dock-divider,
  body.v2 .v2-dock-pill,
  body.v2 .v2-dock-tab,
  body.v2 .v2-chat-panel {
    transition: none;
  }
  body.v2 .v2-dock-panel.is-active { animation: none; }
}

/* ── Floating pinned panel ───────────────────────────────────────── */
body.v2 .panel-float {
  position: absolute;
  z-index: 50;
  display: flex;
  flex-direction: column;
  width: 280px;
  max-height: calc(100vh - 120px);
  background: rgba(14,18,24,0.92);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  backdrop-filter: blur(18px);
  box-shadow: 0 8px 40px rgba(0,0,0,0.65), inset 0 1px 0 rgba(255,255,255,0.07);
  overflow: hidden;
}

body.v2 .pf-handle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 10px 9px 13px;
  cursor: grab;
  background: rgba(255,255,255,0.04);
  border-bottom: 1px solid rgba(255,255,255,0.07);
  flex-shrink: 0;
  user-select: none;
}
body.v2 .pf-handle:active { cursor: grabbing; }

body.v2 .pf-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: rgba(210,205,198,0.85);
  text-transform: uppercase;
}

body.v2 .pf-unpin {
  display: flex; align-items: center; justify-content: center;
  width: 20px; height: 20px;
  border-radius: 5px;
  background: none;
  border: 1px solid rgba(255,255,255,0.08);
  color: rgba(180,186,194,0.5);
  cursor: pointer;
  transition: background 120ms, color 120ms;
  flex-shrink: 0;
}
body.v2 .pf-unpin:hover { background: rgba(255,255,255,0.08); color: rgba(210,205,198,0.9); }

body.v2 .pf-body {
  overflow-y: auto;
  flex: 1;
  overscroll-behavior: contain;
}
body.v2 .pf-body .v2-dock-panel {
  display: block !important;
  position: static !important;
  width: 100% !important;
  max-height: none;
  height: auto !important;
}

/* Pin button in panel heads */
body.v2 .pf-pin-btn {
  display: flex; align-items: center; justify-content: center;
  width: 24px; height: 24px;
  border-radius: 6px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.14);
  color: rgba(200,196,190,0.75);
  cursor: pointer;
  margin-left: auto;
  flex-shrink: 0;
  transition: background 120ms, color 120ms, border-color 120ms, box-shadow 120ms;
}
body.v2 .pf-pin-btn:hover {
  background: rgba(255,255,255,0.13);
  color: #fff;
  border-color: rgba(255,255,255,0.25);
}
body.v2 .pf-pin-btn.is-pinned {
  color: #ff8b3d;
  border-color: rgba(255,139,61,0.5);
  background: rgba(255,139,61,0.15);
  box-shadow: 0 0 8px rgba(255,139,61,0.2);
}

/* Abs-positioned pin btn for panels without a head */
body.v2 .pf-pin-btn--abs {
  position: absolute;
  top: 9px;
  right: 11px;
  z-index: 5;
}
body.v2 .v2-dock-panel { position: relative; }

/* ── Live Status Indicator ───────────────────────────────────────── */
body.v2 .live-status {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 40;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 6px;
  pointer-events: none;
  max-width: 480px;
}

body.v2 .ls-pill {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 9px 6px 6px;
  background: rgba(10,13,18,0.87);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 8px;
  backdrop-filter: blur(14px);
  box-shadow:
    0 4px 16px rgba(0,0,0,0.55),
    inset 0 1px 0 rgba(255,255,255,0.07);
}

body.v2 .ls-icon-box {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--ls-c, #d96b3e) 18%, transparent);
  border: 1px solid color-mix(in srgb, var(--ls-c, #d96b3e) 30%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

body.v2 .ls-icon {
  width: 12px;
  height: 12px;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: 0.85;
}

body.v2 .ls-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

body.v2 .ls-label {
  font-size: 7.5px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ls-c, #d96b3e);
  white-space: nowrap;
}

body.v2 .ls-sub {
  font-size: 10.5px;
  font-weight: 700;
  color: rgba(225,220,212,0.92);
  font-family: ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  line-height: 1;
}

/* ══ Map Event Panel — v2 redesign ═════════════════════════════════ */

/* Vertical stack of individual pills, no shared container background */
body.v2 .map-ev-panel {
  flex-direction: column;
  align-items: flex-start;
  background: transparent;
  border: none;
  box-shadow: none;
  backdrop-filter: none;
  overflow: visible;
  gap: 5px;
}

/* Hide inactive events — only show what's actually happening */
body.v2 .mev-chip:not(.mev-on) {
  display: none;
}

/* Hide panel entirely when nothing active */
body.v2 .map-ev-panel:not(:has(.mev-on)) {
  display: none;
}

/* Pop-in animation when event first becomes active */
@keyframes mev-chip-pop {
  0%   { opacity: 0; transform: scale(0.72) translateX(-10px); }
  60%  { opacity: 1; transform: scale(1.04) translateX(2px); }
  100% { opacity: 1; transform: scale(1)    translateX(0); }
}

/* Each active event = its own pill */
body.v2 .mev-chip.mev-on {
  animation: mev-chip-pop 300ms cubic-bezier(0.34, 1.2, 0.64, 1) both;
  background: rgba(8, 12, 20, 0.88);
  border: 1px solid color-mix(in srgb, var(--c) 40%, transparent);
  border-radius: 10px;
  backdrop-filter: blur(18px);
  box-shadow:
    0 2px 16px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(255,255,255,.07),
    0 0 0 1px color-mix(in srgb, var(--c) 10%, transparent);
  padding: 6px 11px;
}

/* Remove column dividers (only made sense in horizontal row) */
body.v2 .mev-chip + .mev-chip::before {
  display: none;
}

/* ══ Responsive — topbar & dock ════════════════════════════════════ */

/* Tablet: hide username chip to free up ~130px */
@media (max-width: 860px) {
  body.v2 .tb-me { display: none; }
}

/* Small screens: icon-only topbar buttons */
@media (max-width: 660px) {
  body.v2 .tb-logo { padding: 0 10px; }
  body.v2 .tb-logo-node { display: none; }
  body.v2 .tb-right { gap: 2px; padding: 0 6px; }
  body.v2 .tb-right .tb-divider { display: none; }
  body.v2 .tb-right .tb-nav-group { padding: 2px; gap: 1px; }
  /* Hide button labels — SVGs keep explicit width/height so they're unaffected */
  body.v2 .tb-right .tb-nav-group .tb-btn {
    padding: 6px 8px;
    font-size: 0;
    gap: 0;
  }
  body.v2 .tb-right .tb-nav-group .tb-btn svg {
    width: 15px;
    height: 15px;
  }
  body.v2 .tb-right .tb-nav-group .tb-btn span { display: none; }
  /* Menu button: hide chevron arrow */
  body.v2 .tb-btn-menu svg:last-child { display: none; }
}

/* Phone portrait: hide Servers link (reachable via Menu dropdown) */
@media (max-width: 440px) {
  body.v2 .tb-right a[href="/server-select"] { display: none; }
}

/* Dock: remove hard min-widths that force the dock wider than the viewport */
@media (max-width: 1024px) {
  body.v2 .v2-dock-panel .team      { min-width: 0; }
  body.v2 .v2-dock-panel .tool-grid { min-width: 0; }
}

/* Constrain dock width at mid-sizes to stay clear of chat FAB + zoom controls */
@media (max-width: 900px) {
  body.v2 .v2-dock { max-width: calc(100vw - 130px); }
}

/* At phone sizes the dock is already left/right pinned — drop the max-width cap */
@media (max-width: 599px) {
  body.v2 .v2-dock { max-width: none; }

  /* Chat widget: move above dock (closed dock ≈ 48px + 12px bottom = 60px) */
  body.v2 .v2-chat-widget {
    right: 12px;
    bottom: 74px;
  }
  /* Chat window: widget at right:12px → window extends left to 20px — no overflow */
  body.v2 .v2-chat-win { width: calc(100vw - 32px); }

  /* Map event panel: constrain pill width on small screens */
  body.v2 .mev-chip.mev-on {
    max-width: calc(100vw - 80px);
  }

  /* Shop search FAB: icon-only on mobile, text takes too much space */
  body.v2 .shop-search-fab .ssf-text { display: none !important; }
  body.v2 .shop-search-fab {
    padding: 8px 10px !important;
    width: auto !important;
    border-radius: 10px !important;
  }

  /* mapHud: hide coord/zoom display behind dock — no point showing it */
  body.v2 .mapHud { display: none; }
}

@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:0.6;transform:scale(1.2)}}