/* ============================================================
   MASTER VORTEX — drawing tools UI (companion to drawings.js)
   The toolbar is DOCKED: a 37px layout-flow column at the left
   edge of every chart (main price pane + each multi-chart pane);
   the chart starts at its right edge and it never overlays the
   canvas. The style bar floats over the chart area only while a
   tool/selection is active. Uses the app palette tokens.
   ============================================================ */

.mv-tools{
  /* LAYOUT COMPACTION 2026-10-28: toolbar column 37px -> 33px. */
  position:relative; z-index:2;
  flex:0 0 33px; width:33px; align-self:stretch;
  display:flex; flex-direction:column; gap:1px;
  background:#0a1322; border-right:1px solid var(--edge);
  padding:3px 2px;
  overflow-y:auto; overflow-x:hidden;
}
.mv-tools::-webkit-scrollbar{width:4px;}
.mv-tools::-webkit-scrollbar-thumb{background:#1b3a5f; border-radius:2px;}
.mv-tool{
  width:25px; height:25px; flex:0 0 auto;
  display:flex; align-items:center; justify-content:center;
  background:transparent; border:1px solid transparent; border-radius:6px;
  color:#8fa8c4; cursor:pointer; padding:0; font-family:inherit;
}
.mv-tool svg{width:16px; height:16px; display:block;}
.mv-tool:hover{color:#fff; border-color:rgba(30,227,8,.45);}
.mv-tool.active{background:var(--green); color:#03140a;
  box-shadow:0 0 10px rgba(30,227,8,.4);}
.mv-tool.on{background:rgba(30,227,8,.16); color:var(--green);
  border-color:rgba(30,227,8,.5);}
.mv-tool .mv-ticon{font-size:15px; font-weight:400; line-height:1;}
.mv-sep{height:1px; background:var(--edge); margin:3px 2px;}

.mv-stylebar{
  position:absolute; left:8px; top:6px; z-index:11;
  display:flex; align-items:center; gap:6px; flex-wrap:wrap;
  max-width:calc(100% - 48px);
  background:rgba(7,13,24,.94); border:1px solid var(--edge);
  border-radius:9px; padding:4px 7px;
  box-shadow:0 4px 18px rgba(0,0,0,.5);
  font-size:11px; color:#8fa8c4;
}
.mv-sb-label{font-weight:400; letter-spacing:.6px; text-transform:uppercase; font-size:10px;}
.mv-swatch{
  width:16px; height:16px; border-radius:50%; cursor:pointer; padding:0;
  border:2px solid rgba(255,255,255,.18);
}
.mv-swatch:hover{border-color:rgba(255,255,255,.6);}
.mv-swatch.active{border-color:#fff; box-shadow:0 0 0 1px rgba(0,0,0,.6);}
.mv-widths{display:inline-flex; gap:3px;}
.mv-widths button{
  min-width:20px; height:20px; padding:0 4px; cursor:pointer;
  background:#101823; color:#dfe9f5; border:1px solid #1d2c42; border-radius:5px;
  font-size:11px; font-weight:400; font-family:inherit;
}
.mv-widths button.active{background:var(--green); color:#03140a; border-color:var(--green);}
.mv-glyphs{display:inline-flex; align-items:center; gap:3px;}
.mv-glyph{
  width:22px; height:22px; cursor:pointer; padding:0;
  background:#101823; color:#dfe9f5; border:1px solid #1d2c42; border-radius:5px;
  font-size:12px; line-height:1; font-family:inherit;
}
.mv-glyph.active{background:var(--green); color:#03140a; border-color:var(--green);}
.mv-sb-hint{color:#8fa8c4; font-size:11px; font-weight:400; margin-left:2px; white-space:nowrap;}
.mv-sb-del{
  width:24px; height:24px; margin-left:auto;
  align-items:center; justify-content:center;
  background:transparent; border:1px solid transparent; border-radius:6px;
  color:#ff8a92; cursor:pointer; padding:0;
}
.mv-sb-del svg{width:15px; height:15px; display:block;}
.mv-sb-del:hover{border-color:rgba(255,59,71,.55); color:var(--red);}

.mv-text-input{
  position:absolute; z-index:12; width:210px;
  background:#0a1524; color:#e8f4ff;
  border:1.5px solid rgba(30,227,8,.7); border-radius:7px;
  padding:6px 8px; font-size:12.5px; font-weight:400; font-family:inherit;
  box-shadow:0 6px 20px rgba(0,0,0,.55);
}
.mv-text-input:focus{outline:none; border-color:var(--green);}

.mv-draw-canvas{z-index:6;}

@media (max-width: 900px){
  /* narrow screens: the toolbar stays DOCKED in flow, just slimmer */
  .mv-tools{flex-basis:32px; width:32px; padding:3px;}
  .mv-tool{width:24px; height:24px;}
  .mv-tool svg{width:16px; height:16px;}
  .mv-stylebar{left:6px; top:6px; max-width:calc(100% - 12px); padding:4px 6px;}
  .mv-sb-hint{display:none;}
}