@charset "UTF-8";
/* ═══════════════════════════════════════════════════════════════════
   PIPSTER PRO · SaaS — barre d'outils de dessin
   Calquée sur celle de TradingView : rail de 52 px collé au bord
   gauche du graphique, icônes au trait de 24 px, menu déroulant par
   groupe, bascules en pied de rail.

   Cette feuille est injectée AVANT style.css (comme saas-terminal.css),
   d'où les sélecteurs préfixés par `body` là où il faut reprendre la
   main sur la mise en page du graphique.
═══════════════════════════════════════════════════════════════════ */

/* ─── Le rail prend sa place : le graphique ne passe pas dessous ─── */

body #chartStage { display: flex; align-items: stretch; --draw-rail-w: 52px; }
body #chartStage > #chartContainer { flex: 1 1 auto; width: auto; min-width: 0; }

/* Les blocs flottants du graphique sont positionnés sur #chartStage :
   on les décale de la largeur du rail pour qu'ils restent dans le
   graphique et non par-dessus les outils. */
body #chartStage.has-draw-rail #chartDock { left: calc(14px + var(--draw-rail-w, 52px)); }

#drawRail {
  flex: none;
  width: var(--draw-rail-w);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px 0;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
  background: var(--surface, #0D0F14);
  border-right: 1px solid var(--border, rgb(var(--veil) / .07));
  z-index: 24;
}
#drawRail::-webkit-scrollbar { display: none; }
/* `#drawRail` est en `display: flex` : sans cette règle, l'attribut `hidden`
   posé par la bascule du menu compte resterait sans effet. */
#drawRail[hidden] { display: none; }

.draw-btn {
  position: relative;
  flex: none;
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border: 0; border-radius: 7px;
  background: none; color: var(--text-2, #9AA3B5);
  cursor: pointer;
  transition: color .12s, background .12s;
}
.draw-btn svg { width: 22px; height: 22px; }
.draw-btn:hover { color: var(--text, #EEF1F6); background: rgb(var(--veil) / .06); }
.draw-btn.active {
  color: var(--accent, #4E7FFF);
  background: rgba(78, 127, 255, .14);
}
.draw-btn.open { color: var(--text, #EEF1F6); background: rgb(var(--veil) / .08); }

/* Chevron discret sur les groupes qui ouvrent un menu, comme TradingView. */
.draw-caret { display: none; }
.draw-btn.has-menu .draw-caret {
  display: block;
  position: absolute; right: 3px; bottom: 3px;
  width: 0; height: 0;
  border-left: 3.5px solid transparent;
  border-bottom: 3.5px solid currentColor;
  opacity: .45;
}
.draw-btn.has-menu:hover .draw-caret,
.draw-btn.has-menu.active .draw-caret { opacity: .9; }

/* Œil barré quand les dessins sont masqués. */
.draw-btn.struck::after {
  content: ''; position: absolute;
  left: 8px; right: 8px; top: 50%;
  height: 1.5px; background: currentColor;
  transform: rotate(-40deg); border-radius: 1px;
}

.draw-sep {
  flex: none;
  width: 22px; height: 1px;
  margin: 5px 0;
  background: var(--border, rgb(var(--veil) / .09));
}

/* ─── Menu déroulant d'un groupe ──────────────────────────────────── */

.draw-menu {
  position: absolute;
  left: var(--draw-rail-w, 52px);
  z-index: 40;
  min-width: 232px;
  max-height: min(70vh, 460px);
  overflow-y: auto;
  padding: 6px;
  background: var(--surface, #12151C);
  border: 1px solid var(--border-strong, rgb(var(--veil) / .12));
  border-radius: var(--r-md, 10px);
  box-shadow: var(--shadow-lg, 0 18px 44px rgb(var(--shade) / calc(.55 * var(--shade-k))));
}

.draw-menu-item {
  width: 100%;
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  border: 0; border-radius: 7px;
  background: none; color: var(--text-2, #9AA3B5);
  font-size: 12.5px; font-family: inherit; text-align: left;
  cursor: pointer;
}
.draw-menu-item > span { flex: 1; }
.draw-menu-item svg { width: 17px; height: 17px; flex: none; }
.draw-menu-item svg:last-child { width: 14px; height: 14px; color: var(--accent, #4E7FFF); }
.draw-menu-blank { width: 17px; flex: none; }
.draw-menu-item:hover { background: rgb(var(--veil) / .06); color: var(--text, #EEF1F6); }
.draw-menu-item.on { color: var(--text, #EEF1F6); }

.draw-stamps {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px;
  min-width: 180px;
}
.draw-stamps button {
  height: 38px; border: 0; border-radius: 7px;
  background: none; cursor: pointer;
  display: grid; place-items: center;
  color: var(--text-2);
}
.draw-stamps button svg { width: 19px; height: 19px; }
.draw-stamps button:hover { background: rgb(var(--veil) / .07); color: var(--text); }
.draw-stamps button.on { background: rgba(78, 127, 255, .18); color: var(--accent); }

/* ─── Curseurs sur le graphique ───────────────────────────────────── */

#chartContainer[data-draw-cursor="cross"]  { cursor: crosshair; }
#chartContainer[data-draw-cursor="arrow"]  { cursor: default; }
#chartContainer[data-draw-cursor="dot"]    { cursor: cell; }
#chartContainer[data-draw-cursor="eraser"] { cursor: not-allowed; }
#chartContainer.draw-hover:not(.draw-armed) { cursor: move; }

/* ─── Éditeur de style du dessin sélectionné ──────────────────────
   Barre flottante au-dessus du tracé, comme celle de TradingView. */

#drawStyle {
  position: absolute; z-index: 42;
  display: flex; align-items: center; gap: 2px;
  padding: 4px;
  background: var(--surface, #12151C);
  border: 1px solid var(--border-strong, rgb(var(--veil) / .12));
  border-radius: 9px;
  box-shadow: var(--shadow-lg, 0 14px 34px rgb(var(--shade) / calc(.5 * var(--shade-k))));
}
#drawStyle > button {
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border: 0; border-radius: 6px;
  background: none; color: var(--text-2, #9AA3B5); cursor: pointer;
}
#drawStyle > button:hover,
#drawStyle > button.open { background: rgb(var(--veil) / .08); color: var(--text, #EEF1F6); }
#drawStyle > button.active { color: var(--accent, #4E7FFF); }
#drawStyle svg { width: 16px; height: 16px; }

.draw-swatch {
  width: 16px; height: 16px; border-radius: 4px;
  border: 1px solid rgb(var(--veil) / .22);
  display: block; cursor: pointer; padding: 0;
}
.draw-swatch.soft { opacity: .4; }
.draw-swatch.on { outline: 2px solid var(--text, #EEF1F6); outline-offset: 1px; }

.draw-wline {
  display: block; width: 18px; height: 1px; flex: none;
  background: currentColor; border-radius: 2px;
}
.draw-wline.dashed {
  height: 0; background: none;
  border-top: 2px dashed currentColor;
}
.draw-wline.dotted {
  height: 0; background: none;
  border-top: 2px dotted currentColor;
}

.draw-style-sep {
  width: 1px; height: 18px; margin: 0 3px;
  background: var(--border, rgb(var(--veil) / .12));
}

.draw-style-pop {
  position: absolute; top: calc(100% + 6px); left: 0;
  padding: 6px;
  background: var(--surface, #12151C);
  border: 1px solid var(--border-strong, rgb(var(--veil) / .12));
  border-radius: 9px;
  box-shadow: var(--shadow-lg, 0 14px 34px rgb(var(--shade) / calc(.5 * var(--shade-k))));
}
.draw-style-pop.grid {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 5px;
}
.draw-style-row {
  width: 100%;
  display: flex; align-items: center; gap: 10px;
  padding: 7px 10px;
  border: 0; border-radius: 6px;
  background: none; color: var(--text-2, #9AA3B5);
  font-size: 12px; font-family: inherit; white-space: nowrap;
  cursor: pointer;
}
.draw-style-row:hover { background: rgb(var(--veil) / .06); color: var(--text, #EEF1F6); }
.draw-style-row.on { color: var(--accent, #4E7FFF); }

/* ─── Saisie d'un texte posé sur le graphique ─────────────────────── */

.draw-text-input {
  position: absolute; z-index: 30;
  min-width: 160px; height: 28px; padding: 0 9px;
  background: var(--surface, #12151C);
  border: 1px solid var(--accent, #4E7FFF);
  border-radius: 6px;
  color: var(--text, #EEF1F6);
  font: 500 12px Inter, system-ui, sans-serif;
  outline: none;
}

/* ─── Droite à gauche : le rail passe à droite ────────────────────── */

/* Le rail est le premier enfant de la scène : en RTL l'axe flex part de la
   droite, il s'y place donc tout seul. Seule la bordure change de côté. */
[dir="rtl"] #drawRail {
  border-right: 0;
  border-left: 1px solid var(--border, rgb(var(--veil) / .07));
}
/* Le dock reste à gauche en arabe, comme en anglais et en français : le
   graphique garde sa lecture gauche-à-droite, donc son échelle de prix ne
   quitte pas le bord droit, et un dock renvoyé là-dessus masquait la colonne
   des prix sur toute la hauteur.

   Il n'a pas à s'écarter du rail non plus : celui-ci est le premier enfant
   d'une scène en flex, il part donc tout seul à droite en RTL. À gauche, le
   dock n'a rien devant lui — la marge de base suffit. */
[dir="rtl"] body #chartStage.has-draw-rail #chartDock {
  left: 14px;
  right: auto;
}
[dir="rtl"] .draw-menu { left: auto; right: var(--draw-rail-w, 52px); }
[dir="rtl"] .draw-menu-item { text-align: right; }
[dir="rtl"] .draw-btn.has-menu .draw-caret {
  right: auto; left: 3px;
  border-left: 0; border-right: 3.5px solid transparent;
}

/* En « Bougies nues » on éteint l'INDICATEUR, pas le travail de
   l'utilisateur : ses tracés restent. Le rail a sa propre bascule
   « Masquer tous les dessins » pour ça, comme sur TradingView. */

/* ─── Écrans étroits ──────────────────────────────────────────────── */

@media (max-width: 900px) {
  body #chartStage { --draw-rail-w: 44px; }
  .draw-btn { width: 34px; height: 34px; }
  .draw-btn svg { width: 20px; height: 20px; }
}

@media (max-width: 640px) {
  body #chartStage { --draw-rail-w: 0px; }
  #drawRail { display: none; }
}