/* ---------- pane: user's RIGHT ---------- */

/* The outer shell clips instead of scrolling. Scrolling and rounding used to
   live on the same element, and a native scrollbar is a straight-edged track
   that does not know the box it's in has curved corners -- it ran right past
   them at the top and bottom. Standard fix: the element that rounds the
   corners only clips (overflow:hidden), and a plain-rectangle child inside it
   does the actual scrolling. The child's scrollbar still reaches the very top
   and bottom of that rectangle, but the parent's clip trims exactly the sliver
   that would have overrun the curve, so the bar now stops where the curve
   starts instead of drawing through it. */
#panel{position:fixed;top:24px;bottom:24px;right:24px;z-index:20;
  width:var(--panel-w, clamp(390px,37vw,560px));
  background:var(--panel-bg);background-image:var(--panel-img);
  -webkit-backdrop-filter:var(--panel-blur);backdrop-filter:var(--panel-blur);
  border:.5px solid var(--panel-line);border-radius:var(--panel-radius);
  box-shadow:var(--panel-shadow),inset 0 1px 0 var(--glass-top),
             inset 0 -1px 0 var(--glass-bot),inset -1px 0 0 var(--glass-bot);
  overflow:hidden;
  transform:translateX(calc(100% + 44px)) scale(.97);opacity:0;
  transition:transform .82s cubic-bezier(.32,.72,0,1),opacity .5s ease,
             background .9s ease,border-radius .9s ease,box-shadow .9s ease,
             width .28s cubic-bezier(.32,.72,0,1)}
#panel.on{transform:translateX(0) scale(1);opacity:1}
/* No width transition while actively dragging -- it would lag a whole frame
   behind the pointer, which reads as sluggish rather than smooth. */
#panel.resizing{transition:opacity .5s ease,background .9s ease,box-shadow .9s ease}

/* Close and edit sit above the scrolling body. Splitting the panel gave
   #panelBody a z-index and left .ctl on the default `auto`, so the body -- a
   later sibling, covering the whole panel via inset:0 -- painted over both
   buttons and swallowed every click on them. They looked fine and did nothing.
   Anything absolutely positioned inside #panel that is meant to be *on* the
   content rather than in it needs to clear this. */
.ctl{z-index:3}
#panelBody{position:absolute;inset:0;z-index:1;overflow-y:auto;padding:46px 42px 40px}
#panelBody::-webkit-scrollbar{width:5px}
#panelBody::-webkit-scrollbar-track{background:transparent}
#panelBody::-webkit-scrollbar-thumb{background:var(--chip-line);border-radius:4px}
#panelBody{scrollbar-width:thin;scrollbar-color:var(--chip-line) transparent}

/* ---------- resize handle ----------
   A hit strip inside the left edge rather than straddling it: #panel now clips
   its own overflow, so anything hanging outside that box (a handle centred on
   the border, the usual way to build one of these) would be half-invisible. */
#panelResize{position:absolute;top:0;bottom:0;left:0;width:10px;z-index:2;
  cursor:ew-resize}
#panelResize::after{content:'';position:absolute;top:50%;left:3px;
  width:3px;height:44px;border-radius:3px;background:var(--panel-line);
  transform:translateY(-50%);opacity:0;
  transition:opacity .25s ease,background .25s ease}
#panelResize:hover::after,#panel.resizing #panelResize::after{
  opacity:1;background:var(--accent)}