/* VOLURR — the Intelligence box's own controls: the edge grip, and the floating panel.
 *
 * A separate stylesheet because chart-plot.css belongs to the chart session. Nothing here overrides
 * one of their rules; it adds a grip that sits over the panel's edge and a float mode the panel does
 * not otherwise have.
 *
 * TOUCH. The grip is 44px wide to the finger and 4px wide to the eye. A resize edge you can see is
 * one you keep missing; a 44px visible bar would eat the panel. The same split applies to the eight
 * float handles: 20px of hit area, 0px of paint.
 *
 * COLOUR. Amber (--pcac) on hover, never green or red — those two mean DIRECTION on a price chart in
 * this product, and a green line down the side of a panel is a statement about the market.
 */

/* ── the resize grip ─────────────────────────────────────────────────────────────────────────── */
.vbc-grip {
  position: absolute;
  z-index: 26;                       /* over the panel's edge, under the mobile full-screen sheet */
  width: 44px;                       /* the WHOLE inner edge is grabbable — «سحب اي منطقه» */
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: col-resize;
  touch-action: none;                /* the grip owns the gesture; the panel keeps its own scrolling */
  background: transparent;
  -webkit-tap-highlight-color: transparent;
}

/* The visible line. It is faint until you approach it, because a permanent bright rule down the
   middle of the chart is furniture nobody asked for. */
.vbc-bar {
  display: block;
  width: 3px;
  height: 46px;
  max-height: 40%;
  border-radius: 3px;
  background: var(--line, rgba(255, 255, 255, .16));
  transition: background .12s, height .12s, width .12s;
  pointer-events: none;
}
.vbc-grip:hover .vbc-bar,
.vbc-grip:focus-visible .vbc-bar,
.vbc-grip.vbc-on .vbc-bar {
  background: var(--vagi, #e8932a);
  width: 4px;
  height: 92px;
}
.vbc-grip:focus-visible { outline: none; }
.vbc-grip:focus-visible .vbc-bar { box-shadow: 0 0 0 3px rgba(232, 147, 42, .28); }

/* While resizing, the pointer must not select text or flicker between cursors anywhere on the page. */
body.vbc-resizing,
body.vbc-resizing * { cursor: col-resize !important; user-select: none !important; }

/* The float / dock button rides the grip, so it survives pcSideRender() replacing the panel's
   subtree — and it is 44px, like everything else a finger has to find. */
.vbc-pop {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  font: inherit;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  border-radius: 9px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--muted, rgba(255, 255, 255, .5));
  /* NOT hover-only. Law D9 (chart-inspector.css:10-11) forbids a hover-revealed affordance outright,
     and §10 of that file promotes every one of them to always-visible — a control that exists only
     under a cursor does not exist for a finger, for a keyboard, or for anyone who never happens to
     pass over that exact strip. Quiet, not hidden. */
  opacity: .5;
  transition: opacity .14s, background .14s, color .14s;
  touch-action: manipulation;
}
.vbc-grip:hover .vbc-pop,
.vbc-grip:focus-within .vbc-pop,
.vbc-pop:focus-visible { opacity: 1; }
.vbc-pop:hover, .vbc-pop:focus-visible {
  background: var(--bg2, rgba(0, 0, 0, .3));
  border-color: var(--line, rgba(255, 255, 255, .14));
  color: var(--vagi, #e8932a);
}
/* A finger has no hover at all, so on a coarse pointer it sits at full strength rather than resting
   at half and never being noticed. */
@media (hover: none) { .vbc-pop { opacity: .9; } }

/* ── the floating panel ──────────────────────────────────────────────────────────────────────── */
#pcSide.vbc-float {
  position: absolute;
  z-index: 27;
  border: 1px solid var(--line, rgba(255, 255, 255, .14));
  border-radius: 13px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, .42), 0 2px 8px rgba(0, 0, 0, .3);
  border-inline-start: 1px solid var(--line, rgba(255, 255, 255, .14));
}
#pcSide.vbc-float .pcside-h { cursor: grab; }
#pcSide.vbc-float:active .pcside-h { cursor: grabbing; }

/* Eight handles: invisible, 20px deep, and OUTSIDE the scrolling content so a resize never fights
   the panel's own scrollbar. */
.vbc-handles { position: absolute; inset: 0; pointer-events: none; }
.vbc-h { position: absolute; pointer-events: auto; touch-action: none; }
.vbc-h-n { top: -6px; left: 14px; right: 14px; height: 20px; cursor: ns-resize; }
.vbc-h-s { bottom: -6px; left: 14px; right: 14px; height: 20px; cursor: ns-resize; }
.vbc-h-w { left: -6px; top: 14px; bottom: 14px; width: 20px; cursor: ew-resize; }
.vbc-h-e { right: -6px; top: 14px; bottom: 14px; width: 20px; cursor: ew-resize; }
.vbc-h-nw { top: -6px; left: -6px; width: 22px; height: 22px; cursor: nwse-resize; }
.vbc-h-se { bottom: -6px; right: -6px; width: 22px; height: 22px; cursor: nwse-resize; }
.vbc-h-ne { top: -6px; right: -6px; width: 22px; height: 22px; cursor: nesw-resize; }
.vbc-h-sw { bottom: -6px; left: -6px; width: 22px; height: 22px; cursor: nesw-resize; }

/* The one corner that is drawn, because a floating panel with no visible way to resize it reads as
   a fixed one. Amber, and only at the bottom-inline-end where the convention already lives. */
.vbc-h-se::after {
  content: '';
  position: absolute;
  right: 7px; bottom: 7px;
  width: 8px; height: 8px;
  border-right: 2px solid var(--line, rgba(255, 255, 255, .3));
  border-bottom: 2px solid var(--line, rgba(255, 255, 255, .3));
  border-radius: 0 0 3px 0;
}
.vbc-h-se:hover::after { border-color: var(--vagi, #e8932a); }

/* On a phone the panel is a full-screen sheet (chart-plot.css:43). There is no edge to drag and no
   space to float into, so every control here is removed rather than shown and made useless. */
@media (max-width: 520px) {
  .vbc-grip { display: none !important; }
  #pcSide.vbc-float { position: absolute; inset: 0; width: 100% !important; height: auto !important;
                      left: 0 !important; top: 0 !important; border-radius: 0; box-shadow: none; }
  .vbc-handles { display: none; }
}