/* TX Arena: KOL avatars, the trades-table KOL trader cell, the chart's KOL hover card and the chart toolbar's
   "KOLs" toggle (market-a spec §4; the DOM is built by TX.kols.img and the token page). Colours are the base.css
   RGB triplets used as rgb(var(--x) / alpha); every rule carries its own fallback triplet. */

/* Every KOL <img> (TX.kols.img): 16 px unless a more specific rule resizes it. */
.kol-av {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  flex: 0 0 auto;
  display: inline-block;
  vertical-align: middle;
  object-fit: cover;
}

/* ---- Trades table: span.c-trader.kol > img.kol-av (18px) + span.truncate + span.kol-tag ---------------------- */

.c-trader.kol {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  color: rgb(var(--text-primary, 252 252 252));
  font-weight: 600;
}
.c-trader.kol .kol-av {
  width: 18px;
  height: 18px;
  box-shadow: 0 0 0 1.5px rgb(var(--chart-up, 47 227 172) / 0.9), 0 1px 3px rgb(0 0 0 / 0.5);
}
.axt-tr.sell .c-trader.kol .kol-av {
  box-shadow: 0 0 0 1.5px rgb(var(--chart-down, 236 57 122) / 0.9), 0 1px 3px rgb(0 0 0 / 0.5);
}
.kol-tag {
  flex: 0 0 auto;
  padding: 0 4px;
  border-radius: 3px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 14px;
  color: rgb(var(--primary-yellow, 247 196 51));
  background: rgb(var(--primary-yellow, 247 196 51) / 0.12);
}
.axt-tr.kolrow {
  background: rgb(var(--primary-yellow, 247 196 51) / 0.035);
}

/* ---- Chart KOL hover card: div.axt-ktip[role=tooltip](.sell), moved by an inline translate ------------------- */

.axt-ktip {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 6;
  pointer-events: none;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas:
    'av nm ago'
    'av deal deal'
    'av more more';
  column-gap: 9px;
  row-gap: 3px;
  align-items: center;
  min-width: 176px;
  max-width: 300px;
  padding: 8px 11px 8px 8px;
  border-radius: 8px;
  font-size: 11.5px;
  line-height: 1.2;
  white-space: nowrap;
  color: rgb(var(--text-primary, 252 252 252));
  background: rgb(14 15 20 / 0.97);
  border: 1px solid rgb(var(--secondary-stroke, 44 46 58));
  box-shadow: 0 10px 24px rgb(0 0 0 / 0.5), 0 0 0 1px rgb(0 0 0 / 0.25);
}
.axt-ktip.hidden {
  display: none;
}
.axt-ktip .ktip-av {
  grid-area: av;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  box-shadow: 0 0 0 1.5px rgb(var(--chart-up, 47 227 172));
  background: rgb(var(--background-tertiary, 30 32 42));
}
.axt-ktip.sell .ktip-av {
  box-shadow: 0 0 0 1.5px rgb(var(--chart-down, 236 57 122));
}
.axt-ktip .ktip-nm {
  grid-area: nm;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 12.5px;
  font-weight: 700;
}
.axt-ktip .ktip-deal {
  grid-area: deal;
  color: rgb(var(--text-secondary, 119 122 140));
}
.axt-ktip .ktip-side {
  text-transform: capitalize;
  font-weight: 600;
  color: rgb(var(--chart-up, 47 227 172));
}
.axt-ktip.sell .ktip-side {
  color: rgb(var(--chart-down, 236 57 122));
}
.axt-ktip .ktip-amt,
.axt-ktip .ktip-mc {
  font-weight: 600;
  color: rgb(var(--text-primary, 252 252 252));
}
.axt-ktip .ktip-at {
  color: rgb(var(--text-tertiary, 80 83 99));
}
.axt-ktip .ktip-mc::after {
  content: ' MC';
  font-size: 10px;
  font-weight: 500;
  color: rgb(var(--text-secondary, 119 122 140));
}
.axt-ktip .ktip-ago {
  grid-area: ago;
  font-size: 10.5px;
  color: rgb(var(--text-secondary, 119 122 140));
}
.axt-ktip .ktip-sep {
  display: none;
}
.axt-ktip .ktip-more {
  grid-area: more;
  font-size: 10.5px;
  color: rgb(var(--text-secondary, 119 122 140));
}

/* ---- Chart toolbar: button.axt-tbi.txt.kols(.on) > i.ri-vip-crown-2-line + span.lbl "KOLs" -------------------- */

.axt-tbi.kols {
  gap: 4px;
}
.axt-tbi.kols .lbl {
  font-size: 12px;
}
.axt-tbi.kols.on {
  color: rgb(var(--primary-yellow, 247 196 51));
}