/* =====================================================
   Insight chart tooltip — shared across all charts
   ===================================================== */
.insight-tooltip {
  position: fixed;
  z-index: 200;
  background: var(--ink-0);
  color: var(--bg-0);
  border-radius: 14px;
  padding: 14px 16px 12px;
  min-width: 260px;
  max-width: 360px;
  box-shadow:
    0 22px 60px rgba(33, 45, 53, 0.4),
    0 6px 16px rgba(33, 45, 53, 0.18);
  pointer-events: none;
  animation: tipIn 0.16s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes tipIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.insight-tooltip::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 12px; height: 12px;
  background: var(--ink-0);
  transform: translateX(-50%) rotate(45deg);
}
.insight-tooltip.side-above::after { bottom: -5px; }
.insight-tooltip.side-below::after { top: -5px; }

.insight-tooltip-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(236, 232, 233, 0.16);
}
.insight-tooltip-title {
  font-size: 12px; font-weight: 600; color: var(--bg-0);
  letter-spacing: 0.01em;
}
.insight-tooltip-count {
  font-family: var(--font-en); font-size: 10px;
  color: var(--accent); letter-spacing: 0.16em;
  font-weight: 600; text-transform: uppercase;
  white-space: nowrap;
}

.insight-tooltip-list {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.insight-tooltip-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px 4px 4px;
  border-radius: 99px;
  background: rgba(236, 232, 233, 0.08);
  border: 1px solid rgba(236, 232, 233, 0.14);
  font-size: 11.5px;
  color: var(--bg-0);
  font-weight: 500;
}
.insight-tooltip-chip img {
  width: 18px; height: 18px;
  border-radius: 99px;
  object-fit: cover; object-position: center top;
  background: rgba(236, 232, 233, 0.1);
}
.insight-tooltip-chip:not(:has(img)) {
  padding-left: 10px;
}