/* Shared chart UI: toolbar, canvas overlays, bubbles, tooltip, modal, rail. */

.chartbar {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 10px 20px; border-bottom: 1px solid var(--line);
}
.chartbar .sym { font-weight: 800; font-size: 15px; letter-spacing: -.01em; }
.chartbar .stats { display: flex; gap: 14px; font-family: var(--mono); font-size: 12.5px; color: var(--mut); }
.chartbar .stats b { color: var(--txt); font-weight: 700; }
.seg { display: flex; border: 1px solid var(--line-strong); border-radius: 8px; overflow: hidden; }
.seg button {
  background: transparent; border: 0; color: var(--mut); padding: 6px 12px;
  font-size: 12px; font-weight: 700; cursor: pointer; font-family: var(--mono);
  border-right: 1px solid var(--line);
}
.seg button:last-child { border-right: 0; }
.seg button:hover { color: var(--txt); }
.seg button[aria-pressed="true"] { background: #fff; color: #000; }
.seg button[hidden] { display: none; }

.chart-wrap { position: relative; }
#chart { position: relative; min-width: 0; }
#overlay { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 3; }
#legend {
  position: absolute; top: 10px; left: 12px; z-index: 5; pointer-events: none;
  font-family: var(--mono); font-size: 11.5px; color: var(--mut);
}
#legend b { color: var(--txt); font-weight: 700; }
#legend span { margin-left: 10px; }
#legend-extra {
  position: absolute; top: 30px; left: 12px; z-index: 5; pointer-events: none;
  font-family: var(--mono); font-size: 11px; color: var(--dim);
}

.bub {
  position: absolute; width: 24px; height: 24px; border-radius: 50%;
  border: 1.5px solid #fff; cursor: pointer; pointer-events: auto;
  background: #000; box-shadow: 0 2px 10px rgba(0,0,0,.7);
  transition: transform .1s ease;
}
.bub img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; filter: grayscale(1); }
.bub:hover { transform: scale(1.3); z-index: 6; }
.bub:hover img { filter: none; }
.bub .dot { position: absolute; inset: 7px; border-radius: 50%; background: #fff; }
.bub .cnt {
  position: absolute; right: -7px; top: -7px; background: #fff; color: #000;
  font-size: 9px; font-weight: 800; border-radius: 9px; min-width: 15px;
  text-align: center; padding: 0 3px; line-height: 15px; font-family: var(--mono);
}
#tip {
  position: absolute; pointer-events: none; z-index: 9; max-width: 310px; display: none;
  background: rgba(8,8,8,.96); border: 1px solid var(--line-strong); border-radius: 10px;
  padding: 10px 12px; box-shadow: 0 10px 34px rgba(0,0,0,.8);
}
#tip .meta { font-size: 11px; color: var(--mut); margin-bottom: 5px; font-family: var(--mono); }
#tip .meta b { color: var(--txt); }
#tip .body { font-size: 12.5px; line-height: 1.45; }

#modal {
  position: fixed; inset: 0; z-index: 50; background: rgba(0,0,0,.8);
  backdrop-filter: blur(4px); display: none; align-items: center; justify-content: center; padding: 24px;
}
#modal.on { display: flex; }
#modal .card {
  width: min(540px, 94vw); max-height: 82vh; display: flex; flex-direction: column;
  background: var(--panel); border: 1px solid var(--line-strong); border-radius: 14px; overflow: hidden; padding: 0;
}
#modal .mhead { display: flex; align-items: center; justify-content: space-between; padding: 13px 18px; border-bottom: 1px solid var(--line); }
#modal .x { background: none; border: 1px solid var(--line-strong); border-radius: 7px; color: var(--mut); padding: 3px 9px; cursor: pointer; }
#modal .x:hover { color: var(--txt); }
#modal .mlist { overflow-y: auto; }
#modal .row { padding: 13px 18px; border-bottom: 1px solid var(--line); }
#modal .rmeta { font-size: 11px; color: var(--mut); font-family: var(--mono); margin-bottom: 5px; }
#modal .rmeta b { color: var(--txt); }
#modal .rbody { font-size: 13.5px; line-height: 1.5; }
#modal .rlink { display: inline-block; margin-top: 7px; font-size: 12px; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

aside.rail {
  width: 280px; border-left: 1px solid var(--line); background: var(--panel);
  display: flex; flex-direction: column; overflow-y: auto;
}
.rail .head {
  padding: 12px 16px; font-size: 11px; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; color: var(--mut); border-bottom: 1px solid var(--line);
  position: sticky; top: 0; background: var(--panel); z-index: 2;
}
.ds { display: flex; align-items: center; gap: 10px; padding: 11px 16px; border-bottom: 1px solid var(--line); cursor: pointer; text-transform: none; letter-spacing: normal; }
.ds:hover { background: var(--panel-2); }
.ds input { accent-color: #fff; width: 15px; height: 15px; flex: 0 0 auto; }
.ds-name { font-size: 13px; font-weight: 600; flex: 1; color: var(--txt); }
.ds-meta { font-size: 10.5px; color: var(--dim); font-family: var(--mono); text-align: right; max-width: 110px; }
.ds-sep { padding: 12px 16px 6px; font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--dim); }
.ds-empty { padding: 20px 16px; font-size: 12.5px; color: var(--mut); line-height: 1.8; }
.ds-empty a { color: var(--txt); text-decoration: underline; text-underline-offset: 3px; }

.boards-bar { display: flex; gap: 8px; flex-wrap: wrap; padding: 10px 20px; border-bottom: 1px solid var(--line); align-items: center; }
.board-chip {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--panel); border: 1px solid var(--line-strong); border-radius: 999px;
  color: var(--txt); padding: 5px 13px; font-size: 12px; font-weight: 700; cursor: pointer;
}
.board-chip:hover { border-color: #555; }
.board-chip .bx { color: var(--dim); font-size: 10px; }
.board-chip .bx:hover { color: var(--txt); }
.board-chip.add { color: var(--mut); border-style: dashed; }
.board-chip.add:hover { color: var(--txt); }

.custom-inline { display: flex; gap: 8px; align-items: center; }
.custom-inline input { width: 170px; padding: 6px 10px; font-size: 12.5px; font-family: var(--mono); }

.chart-error {
  display: flex; align-items: center; justify-content: center; height: 100%;
  color: var(--mut); text-align: center; font-size: 14px; line-height: 2;
}

/* coin search results dropdown */
.custom-inline { position: relative; }
#coin-results {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 60;
  width: min(560px, 92vw); max-height: 420px; overflow-y: auto;
  background: rgba(8,8,8,.98); border: 1px solid var(--line-strong);
  border-radius: 12px; box-shadow: 0 16px 50px rgba(0,0,0,.8);
}
.cr-row {
  display: grid; grid-template-columns: 110px 1fr 110px 90px 60px 80px;
  gap: 8px; align-items: center; width: 100%; text-align: left;
  background: none; border: 0; border-bottom: 1px solid var(--line);
  padding: 10px 14px; cursor: pointer; color: var(--txt);
  font-family: var(--mono); font-size: 12px;
}
.cr-row:hover { background: var(--panel-2); }
.cr-row:last-child { border-bottom: 0; }
.cr-sym { font-weight: 800; font-size: 13px; }
.cr-quote { color: var(--dim); font-weight: 400; }
.cr-name { color: var(--mut); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font); font-size: 12.5px; }
.cr-chain { color: var(--dim); font-size: 10.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cr-price { text-align: right; }
.cr-chg { text-align: right; font-weight: 700; }
.cr-liq { text-align: right; color: var(--mut); }
.cr-empty { padding: 16px; color: var(--mut); font-family: var(--mono); font-size: 12.5px; }
@media (max-width: 700px) {
  .cr-row { grid-template-columns: 90px 1fr 70px; }
  .cr-chain, .cr-chg, .cr-liq { display: none; }
}