/* Chart watermark (bottom-left). Sized small so a high-res pvp.png
   doesn't render at native resolution and cover the chart. Originally
   lived in navbar.css, which isn't loaded by pop-out windows — moved
   here next to the chart it belongs to. */
.chart-logo {
  height: 30px;
  padding: 6px;
}

.chart-controls-container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  border: 1px solid var(--border);
  padding: 4px;
  border-radius: 5px;
  margin-top: 5px;
}

.chart-buttons {
  display: flex;
  gap: 1px;
  user-select: none;
}

.chart-button {
  display: inline-block;
  cursor: pointer;
  background-color: var(--bg-alt);
  border-radius: 5px;
  border: none;
  color: var(--text);
  line-height: 30px;
  font-family: 'Inter';
  font-weight: 550;
  padding: 0 8px;
  transition:
    background-color 0.3s,
    color 0.3s;
}

.chart-button.selected {
  background-color: lightblue;
  font-weight: 600;
  color: #000;
}

.chart-button:hover {
  background-color: #ffffffe0;
  color: black;
}

.react-resizable-handle.react-resizable-handle-se::after {
  content: '';
  display: block;
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid white;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-45deg);
}
.react-resizable-handle-se {
  cursor: se-resize;
}
.react-resizable-handle.react-resizable-handle-sw::after {
  content: '';
  display: block;
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid white;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-45deg);
}

.react-resizable-handle-sw {
  cursor: sw-resize;
}

.open-menu {
  position: absolute;
  right: 0;
  width: 160px;
  background-color: rgba(46, 46, 46, 0.95);
  border: 1px solid var(--border-light);
  z-index: 1000;
  padding: 3px;
  border-radius: 3px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  font-family: 'Fira Code', monospace;
  font-size: 13px;
  display: flex;
  flex-direction: column;
  user-select: none;
}
.close-menu {
  position: absolute;
  right: 0;
  width: 180px;
  background-color: rgba(46, 46, 46, 0.95);
  border: 1px solid var(--border-light);
  z-index: 1000;
  padding: 3px;
  border-radius: 3px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  font-family: 'Fira Code', monospace;
  font-size: 13px;
  display: flex;
  flex-direction: column;
  user-select: none;
}

.skew-wrapper {
  flex: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.skew-input {
  -webkit-appearance: none;
  width: 70%;
  appearance: none;
  background: var(--bg-input);
  height: 6px;
}

.skew-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: rgba(72, 128, 224, 1);
  cursor: pointer;
}

.skew-buttons {
  display: flex;
  width: 30%;
  justify-content: space-between;
}

.skew-button {
  flex: 1;
  text-align: center;
  padding: 2px;
  cursor: pointer;
  background-color: var(--bg-button);
  color: var(--text);
  border-radius: 2px;
  margin: 0 2px;
  font-size: 13px;
  background-color: var(--bg-input);
}

.skew-button:hover {
  background-color: var(--bg-button-hover);
}
.skew-button.active {
  background-color: rgba(72, 128, 224, 0.5);
  color: white;
}

.hidden-skew-row {
  display: none;
}

.menu-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.close-menu-item {
  cursor: pointer;
  padding: 3px;
  background-color: var(--bg-button);
  margin: 2px 0;
  color: var(--text);
  text-align: center;
  flex: 1;
  border-radius: 2px;
  position: relative;
  font-family: 'Fira Code', monospace;
}

.close-menu-item.header {
  font-size: 13px;
  background-color: var(--bg-deep);
  cursor: default;
}

.close-menu-item:hover:not(.header) {
  background-color: var(--bg-button-hover);
}

.buy-button {
  background-color: rgba(0, 255, 136, 0.5);
}
.tp-button {
  background-color: rgba(72, 128, 224, 0.5);
}
.sell-button {
  background-color: rgba(255, 72, 0, 0.5);
}
.sl-button {
  background-color: rgba(255, 165, 0, 0.5);
}

.disabled-button {
  opacity: 0.4;
  pointer-events: none;
}

.spread-split-input {
  height: 90%;
  font-size: 13px;
  background-color: var(--bg-input);
  color: var(--text);
  border: 1px solid var(--border-light);
  border-radius: 4px;
  font-family: 'Fira Code', monospace;
  width: 50%;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  box-sizing: border-box;
}

.spread-split-input::-webkit-outer-spin-button,
.spread-split-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.market-bar {
  font-size: 13px;
  height: 15px;
}

/* Seconds menu styling */
.seconds-button-container {
  position: relative;
  display: inline-block;
}

.seconds-menu {
  position: absolute;
  bottom: 100%;
  left: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
  background-color: rgba(0, 38, 72, 0.9);
  border-radius: 5px;
  padding: 2px;
  z-index: 10;
  margin-bottom: 2px;
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.3);
}

.seconds-menu .chart-button {
  width: 100%;
  text-align: center;
  margin: 1px 0;
}

.indicators {
  display: flex;
  gap: 1px;
}

.size-options-chart {
  display: flex;
  justify-content: space-between;
  margin-bottom: 5px;
}
.size-options-chart span {
  cursor: pointer;
  padding: 2px;
  background-color: var(--bg-button);
  flex-grow: 1;
  text-align: center;
  border-left: 1px solid var(--border);
  border-radius: 0;
  font-size: 13px;
}
.size-options-chart span:hover {
  background-color: var(--bg-button-hover);
  color: var(--text);
}

.size-options-chart span:first-child {
  border-left: none;
  border-top-left-radius: 2px;
  border-bottom-left-radius: 2px;
}
.size-options-chart span:last-child {
  border-top-right-radius: 2px;
  border-bottom-right-radius: 2px;
}

.size-options-chart span.selected {
  background: linear-gradient(to right, #6a3093, #a044ff);
  color: #fff;
}

.action-buttons-container {
  display: flex;
  gap: 1px;
}

/* Dark theme styles */
.dark-theme .chart-button {
  background-color: var(--bg-deep);
  color: var(--text);
}

.dark-theme .chart-button.selected {
  background-color: var(--border-light);
  border-color: #6a6a6a;
  color: var(--text);
}

.dark-theme .chart-button:hover {
  background-color: var(--bg-alt);
  color: var(--text);
}
.dark-theme .chart-button:hover .dark-theme .chart-button:active {
  background-color: var(--bg-alt);
  color: var(--text);
}

.dark-theme .seconds-menu {
  background-color: rgba(26, 26, 26, 0.95);
}

.boxes-container {
  max-height: 85vh;
  padding: 2%;
  border: 1px solid var(--border);
  box-sizing: border-box;
}

.dark-theme .sticky-container {
  background: var(--bg-deep);
}
.tabbed-menu-container {
  font-weight: normal;
  font-style: normal;
  user-select: none;
  height: 100%;
}

.tabs-and-toggle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: var(--bg-alt);
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}

.tabs {
  display: flex;
  position: relative;
  flex-grow: 1;
}

.tab {
  padding: 5px 10px;
  cursor: pointer;
  color: var(--text);
  font-size: 13px;
  border-bottom: 3px solid transparent;
  transition:
    border-color 0.3s ease,
    background-color 0.3s ease;
}

.tab:hover {
  background-color: var(--bg-hover);
}

.tab.active {
  background-color: var(--bg-deep);
  border-bottom-style: solid;
  border-color: var(--accent);
  border-radius: 4px;
}

.tabs .tab.active:first-child {
  border-top-left-radius: 4px;
}

.tab-content {
  color: #333;
}

.underline {
  position: absolute;
  bottom: 0;
  height: 2px;
  width: 0;
  background-color: var(--accent);
  transition:
    left 0.3s ease,
    width 0.3s ease;
}

.tab-right-icon {
  cursor: pointer;
  flex-shrink: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.privacy-toggle:hover {
  background-color: var(--bg-hover);
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.refresh-icon-rotate {
  animation: rotate 1s linear infinite;
}

.tab-right-icon img {
  width: 21px;
  height: auto;
  filter: invert(0.85);
}
.symbol-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  user-select: none;
  cursor: pointer;
  background-color: var(--bg-alt);
  border-radius: 0.1rem;
  border: 1.5px solid #ffffffa4;
  color: #fff;
  line-height: 25px;
  position: relative;
}

.symbol-button-content {
  display: flex;
  align-items: center;
  flex-grow: 1;
  padding-left: 8px;
}

.symbol-button-content-short {
  display: flex;
  align-items: center;
  flex-grow: 1;
  padding-left: 4px;
}

.symbol-text {
  display: inline-block;
  line-height: 1;
  flex-grow: 1;
}

.symbol-icon {
  max-width: 14px;
  max-height: 14px;
  vertical-align: middle;
  border-radius: 60%;
  overflow: hidden;
  margin-left: 2px;
  margin-right: 2px;
}

.symbol-icon img {
  width: 100%;
  height: auto;
}

.new-trade-button-base {
  display: inline-block;
  cursor: pointer;
  padding: 0 5px;
  background-color: var(--bg-alt);
  border-radius: 0.1rem;
  color: #ffffff;
  border: 1.5px solid transparent;
}

.long-button {
  border-color: var(--profit);
}

.short-button {
  border-color: var(--loss);
}

.symbol-button:hover,
.long-button:hover,
.short-button:hover {
  background-color: #1d4d6a;
  color: #ffffff;
  border-color: #5a92af;
}

.price-change {
  font-family: 'Fira Code', monospace;
  text-align: right;
  font-size: 13.5px;
  font-weight: 500;
  flex-shrink: 0;
  margin-right: 4px;
}

.symbol-button .bybit-cap {
  background-color: #ff6600;
  height: 100%;
  width: 5px;
  position: absolute;
  left: 0px;
}

.symbol-button .binance-cap {
  background-color: #ffd700;
  height: 100%;
  width: 5px;
  position: absolute;
  left: 0px;
}

.symbol-button .hyperliquid-cap {
  background-color: #00c853;
  height: 100%;
  width: 5px;
  position: absolute;
  left: 0px;
}

/* Dark theme styles */
.dark-theme .symbol-button {
  background-color: var(--bg-alt);
  border: 1.5px solid #4a4a4a;
  color: var(--text);
}

.dark-theme .symbol-button:hover {
  background-color: var(--border-light);
  color: var(--text);
  border-color: #6a6a6a;
}

.dark-theme .new-trade-button-base {
  background-color: var(--bg-alt);
  border: 1.5px solid transparent;
}

.dark-theme .new-trade-button-base:hover {
  background-color: var(--border-light);
  border-color: #6a6a6a;
}

.dark-theme .long-button {
  border-color: var(--profit);
}

.dark-theme .short-button {
  border-color: var(--loss);
}

.dark-theme .symbol-button .bybit-cap {
  background-color: #ff6600;
}

.dark-theme .symbol-button .binance-cap {
  background-color: #ffd700;
}

.dark-theme .symbol-button .hyperliquid-cap {
  background-color: #00c853;
}

/* User-picked Crypto/TradFi chip color (Settings > Trade > Symbol Display). */
.symbol-button.has-asset-color,
.dark-theme .symbol-button.has-asset-color {
  background-color: var(--symbol-asset-bg);
}

.symbol-button.has-asset-color:hover,
.dark-theme .symbol-button.has-asset-color:hover {
  background-color: var(--symbol-asset-bg);
  filter: brightness(1.25);
}

.main-symbol.with-shorthand {
  display: block;
  transform: translateY(-0.25em);
}

.symbol-shorthand {
  display: block;
  color: rgb(238, 238, 238);
  opacity: 0.8;
  font-weight: 400;
  margin: 0;
}
/* News panel header chrome — search bar + clear button + (transitively)
   the gear icon. Previously lived in styles/main.css (only loaded by
   cli/notification entries), so the pop-out News header rendered
   unstyled. Moved here so they ship with the News component. */
.search-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 5px;
  font-size: 13.5px;
  font-weight: 600;
  border-radius: 8px;
}

#search-input {
  flex: 1;
  /* Let the field shrink below its intrinsic width when the header also
     holds the optional clock + mute button. */
  min-width: 60px;
  padding: 5px;
  border-radius: 5px;
  border: none;
  font-size: 13.5px;
  font-weight: 300;
  background: rgba(255, 255, 255, 0.199);
  color: var(--text);
}

#search-input::placeholder {
  color: var(--text);
}

#search-button {
  padding: 5px 10px;
  border-radius: 5px;
  border: white;
  background: rgba(255, 255, 255, 0.199);
  color: var(--text);
  cursor: pointer;
  font-size: 13.5px;
  font-weight: 300;
}

#clear-button {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

#clear-button img {
  height: 100%;
  vertical-align: middle;
}

/* Optional header clock (Sources & alerts → Panel display → Show clock).
   Button so it's keyboard-reachable; click cycles UTC / LOCAL / EST. */
.news-clock {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  flex-shrink: 0;
  height: 28px;
  padding: 0 5px;
  /* Same left offset as the Filter/Handles/gear chips so the header
     spacing is uniform (container gap + chip margin). */
  margin-left: 4px;
  background-color: var(--bg-alt);
  color: var(--text-dim);
  border: 1px solid var(--border-light);
  border-radius: 4px;
  cursor: pointer;
  font-family: 'Fira Code', monospace;
  font-size: 12.5px;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.news-clock:hover {
  background-color: var(--bg-button-hover);
}

.news-clock-zone {
  font-size: 10px;
  color: var(--text-muted);
  letter-spacing: 0.4px;
}

/* Header mute toggle — shares the icon-button chrome of the gear button
   but narrower, with no extra chip margin, so it costs little width.
   Triple-class selector outranks `.news-source-settings-button.is-icon`. */
.news-source-settings-button.is-icon.news-mute-button {
  flex-shrink: 0;
  width: 20px;
  margin-left: 0;
  color: var(--text-dim);
}

.news-mute-button.is-muted {
  color: var(--text-muted);
  opacity: 0.6;
}

.news-mute-button.is-muted:hover {
  opacity: 1;
}

/* News loading state. Previously lived in styles/main.css (which only
   loads in cli/notification entries). Moved here so it ships with the
   News component and works in pop-out windows too. */
.loading-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
}

.loading-indicator {
  width: 200px;
  height: 200px;
}

.news-wrapper {
  background: rgba(0, 10, 26, 0.25);
  padding: 8px;
  border-radius: 5px;
  border: 1px solid #fdd1d128;
  white-space: pre-line;
}
.news-wrapper:hover {
  border: 1px solid #ffffff7c;
  background: rgba(255, 255, 255, 0.05);
  cursor: pointer;
}
.disable-hover .news-wrapper:hover {
  cursor: default;
  opacity: 1;
  box-shadow: none;
  background-color: inherit;
  border: inherit;
}

.news-wrapper-upvoted {
  background: rgba(0, 80, 40, 0.9);
  padding: 10px;
  border-radius: 8px;
  border: 3px solid #3b913f80;
  white-space: pre-line;
  font-size: 1.2em;
  box-shadow: 0px 0px 10px rgba(66, 209, 150, 0.637);
}
.news-wrapper-upvoted:hover {
  background: rgba(0, 80, 40, 0.7);
  border: 3px solid #ffffff7c;
  cursor: pointer;
  opacity: 0.9;
  box-shadow: 0px 0px 10px rgba(0, 110, 64, 0.966);
}
.disable-hover .news-wrapper-upvoted:hover {
  background: rgba(0, 80, 40, 0.7);
  border: 3px solid #ffffff7c;
  cursor: pointer;
  opacity: 0.9;
  box-shadow: 0px 0px 10px rgba(0, 110, 64, 0.966);
}

.news-wrapper-critical {
  background-color: #23313f;
  color: #fff;
  padding: 10px;
  border-radius: 8px;
  border: 3px solid #3498db;
  white-space: pre-line;
  font-size: 1.2em;
  box-shadow: 0px 0px 20px #3498db;
}
.news-wrapper-critical:hover {
  background-color: #27384a;
  border: 3px solid #ffffff7c;
  cursor: pointer;
  /* opacity: 0.8; */
  box-shadow: 0px 0px 20px #3498db;
}
.disable-hover .news-wrapper-critical:hover {
  background-color: #2d3e50;
  border: 3px solid #3498db;
  box-shadow: 0px 0px 20px #3498db;
  cursor: default;
}

.critical-no-text-color .critical-hl {
  color: inherit !important;
}

.news-wrapper-price-alert {
  background-color: #411f59;
  color: #fff;
  padding: 10px;
  border-radius: 8px;
  border: 3px solid #9c56d4;
  white-space: pre-line;
  font-size: 1.2em;
  box-shadow: 0px 0px 20px #9c56d4;
}
.news-wrapper-price-alert:hover {
  background-color: #58287a;
  border: 3px solid #ffffff7c;
  cursor: pointer;
  opacity: 0.8;
  box-shadow: 0px 0px 20px #9c56d4;
}
.disable-hover .news-wrapper-price-alert:hover {
  background-color: #58287a;
  border: 3px solid #ffffff7c;
  cursor: pointer;
  opacity: 0.8;
  box-shadow: 0px 0px 20px #9c56d4;
}

.news-wrapper-pinned {
  border: 2px solid white;
  box-shadow: 0px 0px 10px #ffffff;
}
.news-wrapper-pinned:hover {
  border: 2px solid #ffffff7c;
}
.disable-hover .news-wrapper-pinned:hover {
  border: 2px solid #ffffff7c;
}

.news-wrapper-delayed-border {
  border: 2px solid #ff6a6a;
  box-shadow: 0px 0px 10px #ff6a6a;
}
.news-wrapper-delayed-border:hover {
  border: 2px solid #ff6a6a7c;
}
.disable-hover .news-wrapper-delayed-border:hover {
  border: 2px solid #ff6a6a;
  box-shadow: 0px 0px 10px #ff6a6a;
}

.news-category {
  font-family: 'Inter';
  font-size: 12px;
  font-weight: 300;
  color: var(--text-dim);
  overflow: hidden;
  user-select: none;
}
.news-title {
  font-family: 'Inter';
  overflow: hidden;
  width: auto;
  max-width: 100%;
  display: block;
}
.timestamp {
  font-family: 'Inter';
  font-size: 12px;
  font-weight: 300;
  color: var(--text-dim);
  user-select: none;
}

.tweet-indicator {
  width: 42px;
  border-radius: 5px;
  border: 1px solid #2c3e50;
  box-shadow: 0 0 4px rgba(255, 255, 255, 0.3);
  background-color: #34495e;
  color: white;
  display: flex;
  justify-content: center;
  font-size: 10px;
  font-weight: bold;
}

.news-icon {
  display: flex;
  flex-direction: column;
  align-items: 'center';
  user-select: none;
}

.vote-button {
  background-color: #00000010;
  border-radius: 0.5rem;
  border: thin solid #00000015;
  padding: 0.2rem 0.2rem;
  font-size: 12px;
  color: var(--colorColorfulPrimary);
  cursor: pointer;
  margin-top: 0.25rem;
  user-select: none;
}

.vote-button:hover {
  background-color: #00000030;
  border-color: #ffffff;
}

.vote-icon {
  width: 14px;
  height: auto;
  margin-right: 5px;
  vertical-align: middle;
}
.news-content {
  display: flex;
  flex-direction: column;
  width: 100%;
  word-wrap: break-word;
  overflow-wrap: break-word;
  overflow-x: auto;
}

.news-wrapper-timestamp-text {
  cursor: pointer;
}
.news-wrapper-timestamp-text:hover {
  color: var(--news-marker);
  cursor: pointer;
  font-weight: 600;
}

.news-wrapper-buttons {
  padding: 5px 5px 0 5px;
  user-select: none;
}
.news-wrapper-buttons img {
  transition: all 0.3s ease;
}
.news-wrapper-buttons:hover img {
  opacity: 0.7;
  transform: scale(1.2);
}
.trade-button-container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  align-items: flex-start;
  width: 100%;
  gap: 5px;
}
.trade-buttons-wrapper {
  display: flex;
  flex: 1;
  flex-wrap: wrap;
  align-items: center;
}

.custom-link {
  color: var(--accent);
  text-decoration: none;
  transition: color 0.1s;
}

.custom-link:hover {
  color: #9fd2f3;
  text-decoration: underline;
}

.emoji {
  height: 1.1em;
  width: 1.1em;
  vertical-align: -0.1em;
}

.single-source-container::-webkit-scrollbar {
  display: none;
}

.notes-container {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 2px;
}

.note-badge {
  font-family: 'Inter';
  padding: 2px 6px;
  border-radius: 5px;
  font-size: 11px;
  background: rgba(59, 130, 246, 0.1);
  border: 1px solid rgba(59, 130, 246, 0.2);
  color: #d7e9ff;
}

/* Original text shown under the translation ("Keep Original Text").
   Deliberately quiet: the translation is the primary text, so the original
   reads as a secondary block rather than competing with it. Inherits the
   item's font/size so it lines up with the body it follows, and the border
   uses theme vars so it tracks light/dark. */
.news-original-appended {
  margin-top: 4px;
  padding-left: 8px;
  border-left: 2px solid var(--border-light);
  color: var(--text-dim);
}
.chart-menu-container {
  position: relative;
  display: inline-block;
  font-family: 'Fira Code', monospace;
  font-size: 14px;
}

/* Scoped to the gear dropdown -- a bare `button` selector here bled into
   every button on the page (ported chart popups included). */
.dropdown-chart-menu button {
  padding: 6px 12px;
  background-color: var(--bg-button);
  color: var(--text);
  border: none;
  cursor: pointer;
  border-radius: 4px;
}

.category-label {
  background-color: var(--bg-alt);
  padding: 5px 0;
  text-align: center;
  margin: 10px 0;
}

/* Same panel styling as the ported .chart-popup (indicators/drawing menus)
   so the three toolbar popups look like one family. */
.dropdown-chart-menu {
  position: absolute;
  right: 0;
  width: 220px;
  margin-bottom: 5px;
  background-color: var(--bg-panel, #1a1d24);
  border: 1px solid var(--border, rgba(255, 255, 255, 0.08));
  /* Must clear lightweight-charts' internal canvases (z-index 2-3), which
     share the page stacking context -- z-index 1 made the popup
     clickthrough wherever it overlapped the chart. */
  z-index: 1000;
  padding: 6px;
  border-radius: 6px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  gap: 6px;
  display: flex;
  flex-direction: column;
  /* Match the ported .chart-popup typography (11px, app font) instead of
     inheriting the container's 14px Fira Code. */
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  user-select: none;
  /* The menu opens upward from the chart footer and at ~636px has outgrown
     short panels. It doesn't overlap the panel header — `.pvp-panel-body` is
     a scroll container, so anything past its top edge is silently sliced off
     and unreachable. ChartMenu measures the room between this menu's (fixed)
     bottom edge and the tightest clipping ancestor, then sets an inline
     max-height; this scrolls whatever doesn't fit. `contain` stops a scroll
     that reaches the end from bubbling out and panning the chart behind. */
  overflow-y: auto;
  overscroll-behavior: contain;
  /* So the measured max-height means the OUTER height. Under the default
     content-box it excluded the 6px padding and the border, and the menu
     overshot its budget by ~14px straight into the panel header. */
  box-sizing: border-box;
}

.chart-menu-label {
  font-size: 10px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
  padding: 2px 4px 0;
  display: block;
}

.intervals-options {
  display: flex;
  justify-content: space-between;
  font-weight: 550;
}

.intervals-options span {
  cursor: pointer;
  padding: 4px 3px;
  font-size: 11px;
  background-color: var(--bg-button);
  flex-grow: 1;
  text-align: center;
  border-radius: 0;
  transition:
    background-color 0.3s,
    color 0.3s;
  margin-left: -1px;
}

.intervals-options span:hover {
  background-color: var(--bg-button-hover);
  color: var(--text);
}

.intervals-options span:first-child {
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
  margin-left: 0;
}

.intervals-options span:last-child {
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}
.intervals-options span.selected {
  background-color: lightblue;
  /* color: #fff; */
  color: #000;
}

.chart-menu-container.upwards .dropdown-chart-menu {
  top: auto;
  bottom: 100%;
}

.chart-menu-options {
  display: flex;
  align-items: center;
  align-content: center;
  gap: 5px;
}

.chart-menu-end-options {
  display: flex;
  flex-grow: 1;
  justify-content: end;
  align-items: center;
  align-content: center;
  gap: 5px;
}

.indicator-toggle-button {
  display: inline-block;
  cursor: pointer;
  background-color: var(--bg-button);
  border-radius: 5px;
  border: 1px solid transparent;
  color: var(--text);
  padding: 5px 8px;
  font-family: 'Inter';
  font-weight: 550;
  transition:
    background-color 0.3s,
    color 0.3s,
    box-shadow 0.3s;
  user-select: none;
}

.indicator-toggle-button:hover,
.indicator-toggle-button.active {
  background-color: lightblue;
  border-color: var(--bg-alt);
  color: #000;
}

/* Dark theme styles */
.dark-theme .indicator-toggle-button {
  background-color: var(--bg-deep);
  color: var(--text);
}

.dark-theme .indicator-toggle-button:hover,
.dark-theme .indicator-toggle-button.active {
  background-color: var(--border-light);
  color: var(--text);
}
/* Price alerts — chart "+" button, edit modal, and Alerts panel buttons.
   Ported from stock-terminal's chart-alerts.css; CSS vars come from
   styles/common.css. */

/* Alert "+" button — matches price label height, TradingView style */
.alert-plus-button {
  position: absolute;
  width: 17px;
  height: 17px;
  border-radius: 3px;
  background: rgba(60, 60, 60, 0.95);
  color: #aaa;
  font-size: 14px;
  font-weight: 300;
  display: none;
  align-items: center;
  justify-content: center;
  text-align: center;
  cursor: pointer;
  user-select: none;
  pointer-events: auto;
  line-height: 17px;
  z-index: 10000;
  border: 1px solid rgba(100, 100, 100, 0.5);
  padding: 0;
  box-sizing: border-box;
}

.alert-plus-button:hover {
  background: rgba(80, 80, 80, 1);
  color: #ddd;
  border-color: rgba(140, 140, 140, 0.6);
}

/* Alert Edit Modal */
.alert-edit-modal {
  position: absolute;
  z-index: 10001;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 6px 8px;
  width: 210px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  font-size: 11px;
  color: var(--text);
  user-select: none;
  pointer-events: auto;
}

.alert-edit-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--border);
  cursor: grab;
}

.alert-edit-header:active {
  cursor: grabbing;
}

.alert-edit-symbol {
  font-weight: 700;
  font-size: 11px;
  color: var(--text);
  margin-right: 4px;
}

.alert-edit-label {
  color: var(--text-muted);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.alert-edit-close {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 13px;
  padding: 0;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
  line-height: 1;
}

.alert-edit-close:hover {
  color: var(--text);
  background: var(--bg-hover);
}

.alert-edit-field {
  margin-bottom: 5px;
}

.alert-edit-field label {
  display: block;
  font-size: 9px;
  color: var(--text-muted);
  margin-bottom: 2px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.alert-edit-input {
  width: 100%;
  padding: 4px 6px;
  background: var(--bg-input);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 3px;
  font-size: 11px;
  outline: none;
  box-sizing: border-box;
  user-select: text;
}

.alert-edit-input:focus {
  border-color: var(--border-light);
}

.alert-edit-select {
  width: 100%;
  padding: 4px 6px;
  background: var(--bg-input);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 3px;
  font-size: 11px;
  outline: none;
  cursor: pointer;
  box-sizing: border-box;
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5'%3E%3Cpath d='M0 0l4 5 4-5z' fill='%23666'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 6px center;
  padding-right: 18px;
}

.alert-edit-select:focus {
  border-color: var(--border-light);
}

.alert-edit-select option {
  background: var(--bg-alt);
  color: var(--text);
}

/* Checkbox rows ("Push notification") — override the uppercase field-label
   styling for an inline check + text. */
.alert-edit-check {
  display: flex !important;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-size: 11px !important;
  color: var(--text) !important;
}

.alert-edit-check input[type='checkbox'] {
  cursor: pointer;
  margin: 0;
}

.alert-edit-actions {
  display: flex;
  gap: 3px;
  margin-top: 6px;
}

.alert-edit-save {
  flex: 1;
  padding: 4px 0;
  background: var(--bg-button);
  color: var(--text);
  border: none;
  border-radius: 3px;
  cursor: pointer;
  font-size: 10px;
  font-weight: 600;
  transition: background 0.1s;
}

.alert-edit-save:hover {
  background: var(--bg-hover);
}

.alert-edit-delete {
  padding: 4px 8px;
  background: rgba(255, 72, 0, 0.1);
  color: #ff4800;
  border: none;
  border-radius: 3px;
  cursor: pointer;
  font-size: 10px;
  transition: background 0.1s;
}

.alert-edit-delete:hover {
  background: rgba(255, 72, 0, 0.2);
}

/* Alerts panel buttons */
.alert-panel-btn {
  padding: 3px 8px;
  border-radius: 3px;
  cursor: pointer;
  font-size: 11px;
  transition: background 0.15s;
}

.alert-panel-btn-add {
  background: rgba(150, 150, 150, 0.15);
  color: var(--text, #ddd);
  border: 1px solid rgba(150, 150, 150, 0.3);
}

.alert-panel-btn-add:hover {
  background: rgba(150, 150, 150, 0.25);
}

.alert-panel-btn-delete {
  background: rgba(255, 72, 0, 0.1);
  color: #ff4800;
  border: 1px solid rgba(255, 72, 0, 0.25);
  padding: 2px 6px;
  font-size: 10px;
}

.alert-panel-btn-delete:hover {
  background: rgba(255, 72, 0, 0.2);
}

.alert-panel-btn-clear {
  background: none;
  color: var(--text-muted, #888);
  border: 1px solid var(--border, #333);
  font-size: 10px;
  padding: 2px 6px;
}

.alert-panel-btn-clear:hover {
  color: var(--text, #ddd);
  border-color: #555;
}

/* "Alert" row appended to the chart's ctrl+right-click open menu */
.trade-menu-alert-row {
  display: flex;
  gap: 4px;
  align-items: center;
  border-top: 1px solid var(--border, #333);
  margin-top: 4px;
  padding-top: 4px;
}

.trade-menu-alert-button {
  flex: 1;
  padding: 3px 6px;
  background: rgba(150, 150, 150, 0.12);
  color: var(--text, #ddd);
  border: 1px solid rgba(150, 150, 150, 0.3);
  border-radius: 3px;
  cursor: pointer;
  font-size: 11px;
  text-align: center;
}

.trade-menu-alert-button:hover {
  background: rgba(150, 150, 150, 0.25);
}
/* Styles for the ported chart drawing/indicator subsystem.
   Rules copied from stock-terminal-web src/styles/chart.css +
   src/styles/drawings.css, and stock-terminal desktop
   src/styles/chart-alerts.css (alert-edit-* rules used by
   IndicatorSettings). Only the rules referenced by the ported
   components are included. */

/* ── From web chart.css ────────────────────────────────────────────── */

/* Transparent wrapper -- flatten so the IND button is a direct child of
   the footer flex row, sized identically to the bare settings button. */
.chart-indicators {
  display: contents;
}

/* IND + ruler + settings buttons share one box so they render identically
   (same boxed style as stock-terminal's footer tools). */
.chart-indicators-btn,
.chart-settings-btn,
.chart-ruler-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  cursor: pointer;
  background: var(--bg-input, rgba(255, 255, 255, 0.05));
  border: 1px solid var(--border, rgba(255, 255, 255, 0.1));
  border-radius: 3px;
  color: var(--text);
  flex: 0 0 auto;
  width: 32px;
  min-width: 32px;
  max-width: 32px;
  height: 30px;
  min-height: 30px;
  max-height: 30px;
  padding: 0;
  margin: 0;
  font-size: 13px;
  line-height: 1;
  transition: all 0.15s ease;
}
.chart-indicators-btn img,
.chart-settings-btn img,
.chart-ruler-btn img,
.chart-indicators-btn svg,
.chart-settings-btn svg,
.chart-ruler-btn svg {
  width: 14px;
  height: 14px;
  opacity: 0.85;
  display: block;
}
/* Right-aligned slot in the interval row that PriceChart portals its
   footer tools (ruler/pencil/indicators/gear) into. */
.chart-footer-tools {
  display: flex;
  gap: 4px;
  align-items: center;
  margin-left: auto;
}
.chart-indicators-btn:hover img,
.chart-settings-btn:hover img,
.chart-ruler-btn:hover img,
.chart-indicators-btn:hover svg,
.chart-settings-btn:hover svg,
.chart-ruler-btn:hover svg {
  opacity: 1;
}
.chart-indicators-btn.active,
.chart-settings-btn.active,
.chart-ruler-btn.active {
  background: #228b22;
  color: white;
}
.chart-indicators-btn.active img,
.chart-settings-btn.active img,
.chart-ruler-btn.active img {
  opacity: 1;
}

/* Shared chart popup (indicators + settings) -- fixed, panel-style box. */
.chart-popup {
  user-select: none;
  background: var(--bg-panel, #1a1d24);
  border: 1px solid var(--border, rgba(255, 255, 255, 0.08));
  border-radius: 6px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  padding: 6px;
  font-size: 11px;
  color: var(--text);
  z-index: 1000;
}

.chart-popup-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 6px;
}
.chart-popup-row > span {
  flex: 1;
  color: var(--text);
  white-space: nowrap;
}
.indicator-input {
  width: 56px;
  padding: 3px 6px;
  background: var(--bg-input, rgba(255, 255, 255, 0.05));
  border: 1px solid var(--border, rgba(255, 255, 255, 0.1));
  color: var(--text);
  border-radius: 3px;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  outline: none;
}
.indicator-plus {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 22px;
  padding: 0;
  border: 1px solid var(--border, rgba(255, 255, 255, 0.1));
  border-radius: 3px;
  background: var(--bg-input, rgba(255, 255, 255, 0.08));
  color: var(--text);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}
.indicator-plus:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.16);
}
.indicator-plus:disabled {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-muted);
  cursor: not-allowed;
}

/* ── From web drawings.css ─────────────────────────────────────────── */

/* Drawing Style Settings -- unified with chart-position-menu & alert-edit */
.drawing-style-modal {
  position: absolute;
  z-index: 10001;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 6px 8px;
  min-width: 210px;
  box-shadow: 0 4px 12px var(--shadow, rgba(0, 0, 0, 0.5));
  font-family: 'Quantico', sans-serif;
  font-size: 11px;
  color: var(--text);
  user-select: none;
  pointer-events: auto;
}

.drawing-style-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--border);
  cursor: grab;
}

.drawing-style-header:active {
  cursor: grabbing;
}

.drawing-style-title {
  font-weight: 700;
  font-size: 11px;
  color: var(--text);
}

.drawing-style-close {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 13px;
  padding: 0;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
  font-family: 'Quantico', sans-serif;
  line-height: 1;
}

.drawing-style-close:hover {
  color: var(--text);
  background: var(--bg-hover);
}

.drawing-style-field {
  margin-bottom: 5px;
}

.drawing-style-field label {
  display: block;
  font-size: 9px;
  color: var(--text-muted);
  margin-bottom: 2px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.drawing-style-swatches {
  display: flex;
  gap: 3px;
  flex-wrap: wrap;
}

.drawing-style-swatch {
  width: 16px;
  height: 16px;
  border: 1px solid var(--border-light);
  border-radius: 2px;
  cursor: pointer;
  padding: 0;
}

.drawing-style-swatch.active {
  border: 2px solid #fff;
}

.drawing-style-swatch:hover {
  border-color: var(--text-dim);
}

.drawing-style-range-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.drawing-style-range-row input[type='range'] {
  flex: 1;
  height: 3px;
  -webkit-appearance: none;
  appearance: none;
  background: var(--border);
  border-radius: 2px;
  outline: none;
}

.drawing-style-range-row input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--text-dim);
  cursor: pointer;
}

.drawing-style-range-val {
  font-size: 10px;
  color: var(--text-dim);
  min-width: 28px;
  text-align: right;
}

.drawing-style-select {
  width: 100%;
  padding: 4px 6px;
  background: var(--bg-input);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 3px;
  font-size: 11px;
  font-family: 'Quantico', sans-serif;
  outline: none;
  cursor: pointer;
  box-sizing: border-box;
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5'%3E%3Cpath d='M0 0l4 5 4-5z' fill='%23666'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 6px center;
  padding-right: 18px;
}

.drawing-style-select:focus {
  border-color: var(--border-light);
}

.drawing-style-select option {
  background: var(--bg-alt);
  color: var(--text);
}

/* Tabs (Style / Text / Coords) */
.drawing-style-tabs {
  display: flex;
  gap: 2px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--border);
}

.drawing-style-tab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-muted);
  font-family: 'Quantico', sans-serif;
  font-size: 11px;
  padding: 3px 8px 5px;
  cursor: pointer;
}

.drawing-style-tab:hover {
  color: var(--text);
}

.drawing-style-tab.active {
  color: var(--text);
  border-bottom-color: var(--accent, #b4b4f9);
}

/* Button rows (thickness / line style / bold-italic) */
.drawing-style-btnrow {
  display: flex;
  gap: 4px;
  align-items: center;
}

.drawing-style-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 22px;
  padding: 3px 6px;
  background: var(--bg-input);
  color: var(--text-dim);
  border: 1px solid var(--border);
  border-radius: 3px;
  cursor: pointer;
  font-family: 'Quantico', sans-serif;
  font-size: 11px;
}

.drawing-style-btn:hover {
  color: var(--text);
  border-color: var(--border-light);
}

.drawing-style-btn.active {
  color: var(--text);
  background: var(--bg-hover);
  border-color: var(--accent, #b4b4f9);
}

.drawing-style-btn-square {
  flex: 0 0 26px;
}

/* Custom color "+" swatch */
.drawing-style-swatch-custom {
  background: linear-gradient(
    135deg,
    #f23645 0%,
    #ffeb3b 35%,
    #4caf50 65%,
    #2962ff 100%
  );
  color: #fff;
  font-weight: 700;
  font-size: 11px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Inline expanding color picker */
.drawing-style-picker {
  margin-top: 6px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.drawing-style-picker .react-colorful {
  width: 100%;
  height: 140px;
}

/* Text inputs / textarea */
.drawing-style-textinput {
  width: 100%;
  padding: 4px 6px;
  background: var(--bg-input);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 3px;
  font-size: 11px;
  font-family: 'Quantico', sans-serif;
  outline: none;
  box-sizing: border-box;
}

.drawing-style-textinput:focus {
  border-color: var(--border-light);
}

.drawing-style-textarea {
  width: 100%;
  padding: 4px 6px;
  background: var(--bg-input);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 3px;
  font-size: 11px;
  font-family: 'Quantico', sans-serif;
  outline: none;
  box-sizing: border-box;
  resize: vertical;
  user-select: text;
  -webkit-user-select: text;
}

.drawing-style-textarea:focus {
  border-color: var(--border-light);
}

.drawing-style-check {
  display: flex !important;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  text-transform: none !important;
}

.drawing-style-check input[type='checkbox'] {
  accent-color: var(--accent, #b4b4f9);
  cursor: pointer;
}

.chart-popup-tool-btn {
  background: var(--bg-button);
  border: 1px solid var(--border-light);
  border-radius: 4px;
  padding: 2px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    background 0.15s,
    border-color 0.15s;
  min-width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.chart-popup-tool-btn:hover {
  background: var(--scrollbar);
  border-color: #777;
}

.chart-popup-tool-btn.selected {
  background: #007acc;
  border-color: #0098ff;
}

.chart-popup-tool-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── From desktop chart-alerts.css (used by IndicatorSettings) ─────── */

.alert-edit-modal {
  position: absolute;
  z-index: 10001;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 6px 8px;
  width: 210px;
  box-shadow: 0 4px 12px var(--shadow, rgba(0, 0, 0, 0.5));
  font-family: 'Quantico', sans-serif;
  font-size: 11px;
  color: var(--text);
  user-select: none;
  pointer-events: auto;
}

.alert-edit-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--border);
  cursor: grab;
}

.alert-edit-header:active {
  cursor: grabbing;
}

.alert-edit-symbol {
  font-weight: 700;
  font-size: 11px;
  color: var(--text);
  margin-right: 4px;
}

.alert-edit-close {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 13px;
  padding: 0;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
  font-family: 'Quantico', sans-serif;
  line-height: 1;
}

.alert-edit-close:hover {
  color: var(--text);
  background: var(--bg-hover);
}

.alert-edit-input {
  width: 100%;
  padding: 4px 6px;
  background: var(--bg-input);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 3px;
  font-size: 11px;
  font-family: 'Quantico', sans-serif;
  outline: none;
  box-sizing: border-box;
  user-select: text;
}

.alert-edit-input:focus {
  border-color: var(--border-light);
}

.alert-edit-select {
  width: 100%;
  padding: 4px 6px;
  background: var(--bg-input);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 3px;
  font-size: 11px;
  font-family: 'Quantico', sans-serif;
  outline: none;
  cursor: pointer;
  box-sizing: border-box;
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5'%3E%3Cpath d='M0 0l4 5 4-5z' fill='%23666'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 6px center;
  padding-right: 18px;
}

.alert-edit-select:focus {
  border-color: var(--border-light);
}

.alert-edit-select option {
  background: var(--bg-alt);
  color: var(--text);
}

.alert-edit-actions {
  display: flex;
  gap: 3px;
  margin-top: 6px;
}

.alert-edit-save {
  flex: 1;
  padding: 4px 0;
  background: var(--bg-button);
  color: var(--text);
  border: none;
  border-radius: 3px;
  cursor: pointer;
  font-family: 'Quantico', sans-serif;
  font-size: 10px;
  font-weight: 600;
  transition: background 0.1s;
}

.alert-edit-save:hover {
  background: var(--bg-button-hover);
}

.alert-edit-delete {
  padding: 4px 8px;
  background: rgba(255, 72, 0, 0.1);
  color: var(--loss, #ff4800);
  border: none;
  border-radius: 3px;
  cursor: pointer;
  font-family: 'Quantico', sans-serif;
  font-size: 10px;
  transition: background 0.1s;
}

.alert-edit-delete:hover {
  background: rgba(255, 72, 0, 0.2);
}

/* Active-indicator chips (IndicatorChips.tsx) -- from web chart.css */
.chart-title-indicators {
  display: flex;
  flex-direction: column;
  /* Shrink each row to its chip instead of stretching it across the chart:
     a full-width row swallows the mousemove and the chart loses its
     crosshair / ruler anywhere on that band. */
  align-items: flex-start;
  gap: 2px;
  margin-top: 4px;
  font-size: 11px;
  /* Click-through container; only the chips themselves opt back in. */
  pointer-events: none;
}
.chart-title-indicator {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--text-dim);
  pointer-events: auto;
}
.chart-title-indicator-swatch {
  width: 8px;
  height: 8px;
  border-radius: 1px;
  flex-shrink: 0;
}
.chart-title-indicator-name {
  letter-spacing: 0.2px;
}
.chart-title-indicator.hidden {
  opacity: 0.45;
}
.chart-title-indicator-toggle,
.chart-title-indicator-remove {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 11px;
  line-height: 1;
  padding: 0 2px;
}
.chart-title-indicator-toggle:hover,
.chart-title-indicator-remove:hover {
  color: var(--text);
}

/* Collapse caret for the chip row (compact, matches web) */
.chart-title-indicators-toggle {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  color: var(--text-muted);
  font-size: inherit;
  line-height: 1;
}
.chart-title-indicators-toggle:hover {
  color: var(--text);
}

/* iOS-style switch for the gear menu toggle rows (stock-terminal pattern) */
.chart-settings-toggle {
  position: relative;
  width: 28px;
  height: 14px;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.15);
  flex-shrink: 0;
  transition: background 0.15s ease;
}
.chart-settings-toggle::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #fff;
  transition: left 0.15s ease;
}
.chart-settings-toggle.active {
  background: #2f81f7;
}
.chart-settings-toggle.active::after {
  left: 16px;
}
@font-face {
  font-family: 'Fira Code';
  src: url('./fira-code-DParIw5o-g2.ttf') format('truetype');
}
@font-face {
  font-family: 'Kanit';
  src: url('./kanit-bWYhieLo-g2.ttf') format('truetype');
}
@font-face {
  font-family: 'Roboto';
  src: url('./roboto-BHeBnKzs-g2.ttf') format('truetype');
}
@font-face {
  font-family: 'Open Sans';
  src: url('./open-sans-DxJTClRG-g2.ttf') format('truetype');
}
@font-face {
  font-family: 'Quantico';
  src: url('./quantico-BXatNHwx-g2.ttf') format('truetype');
}
@font-face {
  font-family: 'Inter';
  src: url('./inter-DYjygwQm-g2.ttf') format('truetype');
}
@font-face {
  font-family: 'Lato';
  src: url('./lato-BwLIet1C-g2.ttf') format('truetype');
}
@font-face {
  font-family: 'Montserrat';
  src: url('./montserrat-BQsUpcHj-g2.ttf') format('truetype');
}
@font-face {
  font-family: 'Poppins';
  src: url('./poppins-CTKNfV9P-g2.ttf') format('truetype');
}
@font-face {
  font-family: 'Roboto Slab';
  src: url('./roboto-slab-CaPjmv_A-g2.ttf') format('truetype');
}
@font-face {
  font-family: 'Jetbrains Mono';
  src: url('./jetbrains-mono-C9V-2EBK-g2.ttf') format('truetype');
}
@font-face {
  font-family: 'Cascadia Code';
  src: url('./cascadia-code-CoBxJFka-g2.ttf') format('truetype');
}
/* Theme tokens — default (pvp blue) palette. These are the static fallback
   values; useTheme() overwrites them on :root at runtime when the active
   theme changes. Keep in sync with the `default-theme` entry in
   src/shared/themes.ts. */
:root {
  --bg-base: #131d29;
  --bg-alt: #1a2735;
  --bg-deep: #0e1926;
  --bg-navbar: #0c151e;
  --bg-hover: #1f2f3f;
  --bg-input: #1a2735;
  --bg-button: #28384a;
  --bg-button-hover: #34465a;
  --border: #24323f;
  --border-light: #36485a;

  --text: #ffffff;
  --text-dim: #c5c5c5;
  --text-muted: #8aa0b0;

  --profit: #00ff88;
  --loss: #ff4800;
  --accent: #6082b6;

  --chart-bg: #0e1926;
  --candle-up: #26a69a;
  --candle-down: #ef5350;
  --volume-up: #26a69a;
  --volume-down: #ef5350;
  --news-marker: #fffa9f;

  --scrollbar: #6082b6;
  --shadow: rgba(0, 0, 0, 0.5);
}

body {
  margin: 0;
  padding: 0;
}

/* Kill the default focus outline/ring app-wide — including pop-out windows.
   main.css has the same reset, but it only loads via <Styles/> inside <App/>;
   pop-outs render <PopoutPanel/> instead, so the orange focus highlight leaked
   there. common.css is imported by the shared entry (index.tsx) for EVERY
   window, so putting it here covers main, settings, and pop-outs alike. */
*:focus,
*:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

/* The app shell is locked to viewport size by .app-container (100vh/100vw).
   Children that overflow scroll inside themselves; the page itself never
   scrolls. Modeled exactly on stock-terminal's layout. */
.app-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100vw;
  box-sizing: border-box;
  overflow: hidden;
}

/* width */
::-webkit-scrollbar {
  width: 5px;
}

/* Track */
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px #a9a9a9;
  border-radius: 10px;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: var(--scrollbar);
  border-radius: 10px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar);
  opacity: 0.8;
}

.w-100 {
  width: 100%;
}

.w-80 {
  width: 100%;
}

.w-90 {
  width: 90%;
}

.w-60 {
  width: 60%;
}

.w-50 {
  width: 50%;
}

.w-45 {
  width: 45%;
}

.w-40 {
  width: 40%;
}

.h-100 {
  height: 100%;
}

.flex {
  display: flex;
}

.item-center {
  align-items: center;
}

.justify-center {
  justify-content: center;
}

.flex-col {
  flex-direction: column;
}

.justify-between {
  justify-content: space-between;
}

.align-center {
  align-items: center;
}

.mb-20 {
  margin-bottom: 20px;
}

.mb-15 {
  margin-bottom: 15px;
}

.mb-40 {
  margin-bottom: 40px;
}

.mt-20 {
  margin-top: 20px;
}

.mt-10 {
  margin-top: 10px;
}

.mb-10 {
  margin-bottom: 10px;
}

.mt-30 {
  margin-top: 30px;
}

.mt-40 {
  margin-top: 40px;
}

.mt-65 {
  margin-top: 65px;
}

.ml-5 {
  margin-left: 5px;
}

.mr-2 {
  margin-right: 2px;
}

.mr-5 {
  margin-right: 5px;
}

.mr-20 {
  margin-right: 20px;
}

.m-10 {
  margin: 10px;
}

.p-10 {
  padding: 10px;
}

.p-20 {
  padding: 20px;
}

.pt-15 {
  padding-top: 15px;
}

.p-r,
.relative {
  position: relative;
}

.p-a,
.absolute {
  position: absolute;
}

.common-color {
  color: #ff7a00;
}

.rare-color {
  color: #52d5ff;
}

.epic-color {
  color: #de5aff;
}

.legendary-color {
  color: #ffbc0f;
}

.mythic-color {
  color: #ff6969;
}

.idle-color {
  color: #ffffff;
  opacity: 0.3;
}

.searching-color {
  color: #ffbc0f;
}

.success-color {
  color: #37db78;
}

.error-color {
  color: #ff2929;
}

.purchasing-color {
  color: #52d5ff;
}

.dead-idle-color {
  color: #ff6969;
}

.cursor-pointer {
  cursor: pointer;
}

.cursor-pointer:hover {
  opacity: 0.6;
}

.gap-5 {
  gap: 5px;
}

.gap-10 {
  gap: 10px;
}

.gap-15 {
  gap: 15px;
}

.gap-20 {
  gap: 20px;
}

.gap-25 {
  gap: 25px;
}

.scrollable {
  overflow-y: auto;
  max-height: 100vh;
}
.full-height {
  height: 100vh;
}