/*
 * FxVPSPRO — left-edge support dock.
 *
 * Fixed over the WebGL canvas, so: transform and opacity only, and no
 * backdrop-filter. The panel is translated, never resized; the dot pulses on
 * opacity; the handle's sheen is a translated gradient.
 */

.fxvps-globe-page .fx-dock{
  position:fixed;left:0;top:50%;transform:translateY(-50%);
  z-index:70;display:flex;align-items:center;
  font-family:inherit;
}

/* ── the handle ───────────────────────────────────────────────────────── */
.fxvps-globe-page .fx-dock-tab{
  position:relative;z-index:2;flex:0 0 auto;
  display:flex;flex-direction:column;align-items:center;gap:10px;
  padding:16px 9px;cursor:pointer;overflow:hidden;
  border:1px solid var(--line-strong);border-left:0;
  border-radius:0 14px 14px 0;
  background:linear-gradient(180deg,rgba(18,26,50,.97),rgba(9,13,28,.98));
  box-shadow:6px 0 26px -10px rgba(0,0,0,.8);
  transition:border-color .22s ease,transform .25s cubic-bezier(.22,.7,.2,1);
}
.fxvps-globe-page .fx-dock-tab:hover{border-color:rgba(var(--accent-rgb),.45);transform:translateX(2px)}
.fxvps-globe-page .fx-dock-tab:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* a slow light travelling down the handle */
.fxvps-globe-page .fx-dock-tab::after{
  content:"";position:absolute;inset:-40% 0;pointer-events:none;
  background:linear-gradient(180deg,transparent 40%,rgba(var(--accent-rgb),.16) 50%,transparent 60%);
  animation:fx-dock-sheen 5.5s ease-in-out infinite;
}
@keyframes fx-dock-sheen{
  0%,100%{transform:translateY(-55%)}
  50%    {transform:translateY(55%)}
}

.fxvps-globe-page .fx-dock-tab-text{
  writing-mode:vertical-rl;transform:rotate(180deg);
  font-size:11px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted);transition:color .22s ease;
}
.fxvps-globe-page .fx-dock-tab:hover .fx-dock-tab-text{color:var(--ink)}
.fxvps-globe-page .fx-dock.is-open .fx-dock-tab-text{color:var(--accent)}

.fxvps-globe-page .fx-dock-pulse{
  position:relative;width:8px;height:8px;border-radius:50%;flex:0 0 auto;
  background:var(--accent);box-shadow:0 0 0 4px rgba(var(--accent-rgb),.14);
}
.fxvps-globe-page .fx-dock-pulse::after{
  content:"";position:absolute;inset:-5px;border-radius:50%;
  border:1px solid var(--accent);opacity:0;
  animation:fx-dock-ping 2.6s cubic-bezier(.22,.7,.2,1) infinite;
}
@keyframes fx-dock-ping{
  0%  {transform:scale(.6);opacity:.9}
  70% {transform:scale(1.5);opacity:0}
  100%{transform:scale(1.5);opacity:0}
}

/* ── the panel ────────────────────────────────────────────────────────── */
/* It is laid out beside the handle and slid out of sight, so opening is one
   transform — no width or height animation, nothing to reflow. */
.fxvps-globe-page .fx-dock-panel{
  position:absolute;left:100%;top:50%;margin-left:10px;
  width:320px;max-width:calc(100vw - 72px);
  transform:translate(-115%,-50%);opacity:0;visibility:hidden;pointer-events:none;
  border-radius:16px;overflow:hidden;
  background:linear-gradient(168deg,rgba(18,26,50,.98),rgba(9,13,28,.99));
  border:1px solid var(--line-strong);
  box-shadow:0 30px 80px -24px rgba(0,0,0,.9);
  transition:transform .34s cubic-bezier(.22,.7,.2,1),opacity .26s ease,visibility 0s linear .34s;
}
.fxvps-globe-page .fx-dock-panel[hidden]{display:block} /* animated, not removed */
.fxvps-globe-page .fx-dock.is-open .fx-dock-panel{
  transform:translate(0,-50%);opacity:1;visibility:visible;pointer-events:auto;
  transition:transform .34s cubic-bezier(.22,.7,.2,1),opacity .26s ease,visibility 0s;
}

.fxvps-globe-page .fx-dock-head{
  display:flex;align-items:center;gap:10px;padding:15px 16px;
  background:rgba(255,255,255,.028);border-bottom:1px solid var(--line);
}
.fxvps-globe-page .fx-dock-head h3{
  margin:0;margin-right:auto;font-size:14.5px;font-weight:700;color:var(--ink);
}
.fxvps-globe-page .fx-dock-online{
  display:inline-flex;align-items:center;gap:6px;padding:4px 9px;border-radius:999px;
  font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:var(--accent);background:rgba(var(--accent-rgb),.12);border:1px solid rgba(var(--accent-rgb),.26);
}
.fxvps-globe-page .fx-dock-online i{
  width:6px;height:6px;border-radius:50%;background:var(--accent);
  animation:fx-dock-blink 2.4s ease-in-out infinite;
}
@keyframes fx-dock-blink{0%,100%{opacity:1}50%{opacity:.35}}
.fxvps-globe-page .fx-dock-close{
  flex:0 0 auto;width:26px;height:26px;border-radius:8px;cursor:pointer;
  border:1px solid var(--line);background:none;color:var(--muted-2);
  font-size:17px;line-height:1;
  transition:color .2s ease,border-color .2s ease;
}
.fxvps-globe-page .fx-dock-close:hover{color:var(--ink);border-color:var(--line-strong)}

/* ── rows ─────────────────────────────────────────────────────────────── */
.fxvps-globe-page .fx-dock-rows{padding:8px}
.fxvps-globe-page .fx-dock-row{
  position:relative;display:flex;align-items:center;gap:11px;
  padding:11px 12px;border-radius:11px;text-decoration:none;overflow:hidden;
  transition:background .2s ease;
}
.fxvps-globe-page .fx-dock-row:hover{background:rgba(var(--accent-rgb),.07)}
/* a green edge that grows in from the left on hover */
.fxvps-globe-page .fx-dock-row::before{
  content:"";position:absolute;left:0;top:8px;bottom:8px;width:2px;border-radius:0 2px 2px 0;
  background:var(--accent);transform:scaleY(0);
  transition:transform .24s cubic-bezier(.22,.7,.2,1);
}
.fxvps-globe-page .fx-dock-row:hover::before{transform:scaleY(1)}

.fxvps-globe-page .fx-dock-i{
  display:grid;place-items:center;width:34px;height:34px;border-radius:10px;flex:0 0 auto;
  color:var(--accent);background:rgba(var(--accent-rgb),.1);border:1px solid rgba(var(--accent-rgb),.2);
  transition:background .2s ease,transform .24s cubic-bezier(.22,.7,.2,1);
}
.fxvps-globe-page .fx-dock-row:hover .fx-dock-i{background:rgba(var(--accent-rgb),.18);transform:translateY(-1px)}
.fxvps-globe-page .fx-dock-t{display:flex;flex-direction:column;gap:2px;min-width:0;margin-right:auto}
.fxvps-globe-page .fx-dock-t b{font-size:13.5px;font-weight:700;color:var(--ink)}
.fxvps-globe-page .fx-dock-t em{font-style:normal;font-size:11.5px;line-height:1.4;color:var(--muted-2)}
.fxvps-globe-page .fx-dock-tag{
  flex:0 0 auto;writing-mode:vertical-rl;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:8.5px;font-weight:700;letter-spacing:.14em;color:var(--muted-2);
  transition:color .2s ease;
}
.fxvps-globe-page .fx-dock-row:hover .fx-dock-tag{color:var(--accent)}

.fxvps-globe-page .fx-dock-foot{
  margin:0;padding:12px 16px;border-top:1px solid var(--line);
  background:rgba(255,255,255,.02);
  font-size:11.5px;line-height:1.55;color:var(--muted-2);
}
.fxvps-globe-page .fx-dock-foot strong{color:var(--ink);font-weight:700}

/* ── small screens ────────────────────────────────────────────────────── */
/* Below this the handle would sit on top of the content and fight the chat
   bubble, and the same links are a tap away in the menu. */
@media (max-width:900px){
  .fxvps-globe-page .fx-dock{display:none}
}

@media (prefers-reduced-motion:reduce){
  .fxvps-globe-page .fx-dock-tab::after,
  .fxvps-globe-page .fx-dock-pulse::after,
  .fxvps-globe-page .fx-dock-online i{animation:none}
  .fxvps-globe-page .fx-dock-panel{transition:opacity .15s linear,visibility 0s}
  .fxvps-globe-page .fx-dock-panel,
  .fxvps-globe-page .fx-dock.is-open .fx-dock-panel{transform:translate(0,-50%)}
}