/* Shared price-chart widget (chart.js). Loaded by Market Context + Watchlist. */

.pl-chart { width: 100%; }

.pl-chart-tabs {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.pl-chart-tab {
  appearance: none;
  border: 1px solid rgba(34, 48, 94, 0.85);
  background: rgba(255, 255, 255, 0.02);
  color: var(--muted, #aab6e6);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 9px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.pl-chart-tab:hover { color: var(--text, #eaf0ff); background: rgba(43, 92, 255, 0.08); }
.pl-chart-tab.active {
  border-color: rgba(43, 92, 255, 0.7);
  background: rgba(43, 92, 255, 0.15);
  color: var(--accent2, #9db4ff);
}

.pl-chart-body { width: 100%; }

.pl-chart-plot { position: relative; width: 100%; touch-action: pan-y; }

.pl-chart-svg {
  width: 100%;
  height: 96px;
  display: block;
}

/* Hover crosshair */
.pl-cross-x {
  position: absolute; top: 0; bottom: 0; width: 1px;
  background: rgba(234, 240, 255, 0.35);
  opacity: 0; pointer-events: none; transition: opacity 0.1s;
}
.pl-cross-dot {
  position: absolute; width: 8px; height: 8px; border-radius: 50%;
  transform: translate(-50%, -50%);
  opacity: 0; pointer-events: none; transition: opacity 0.1s;
  box-shadow: 0 0 0 3px rgba(11, 16, 32, 0.6);
}
.pl-cross-dot.up { background: #34d399; }
.pl-cross-dot.down { background: #f87171; }
.pl-chart-tip {
  position: absolute; transform: translateX(-50%);
  background: rgba(11, 16, 32, 0.95);
  border: 1px solid rgba(34, 48, 94, 0.9);
  color: var(--text, #eaf0ff);
  font-size: 11px; font-weight: 600;
  padding: 3px 7px; border-radius: 6px; white-space: nowrap;
  opacity: 0; pointer-events: none; transition: opacity 0.1s; z-index: 2;
}
.pl-chart-line {
  fill: none;
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.pl-chart-area { stroke: none; opacity: 0.14; }

/* Extended-hours (post/pre-market) tail on 1D — dashed + dimmer, with a divider at the close */
.pl-chart-line-ah { stroke-dasharray: 3 3; opacity: 0.65; }
.pl-chart-divider {
  stroke: rgba(234, 240, 255, 0.25);
  stroke-width: 1;
  stroke-dasharray: 2 3;
  vector-effect: non-scaling-stroke;
}

.pl-chart-svg.up   .pl-chart-line { stroke: #34d399; }
.pl-chart-svg.up   .pl-chart-area { fill: #34d399; }
.pl-chart-svg.down .pl-chart-line { stroke: #f87171; }
.pl-chart-svg.down .pl-chart-area { fill: #f87171; }

.pl-chart-foot {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  margin-top: 8px;
  font-size: 12px;
}
.pl-chart-change { font-weight: 700; }
.pl-chart-change.up { color: #34d399; }
.pl-chart-change.down { color: #f87171; }
.pl-chart-lohi { color: var(--muted, #aab6e6); }

.pl-chart-msg {
  height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted, #aab6e6);
  font-size: 13px;
}