:root {
    /* Нейтральный чёрный — тот же фикс, что у KsyAlert/KsyModal: было захардкожено slate-900,
       тултип (всегда тёмный, в любой теме) синил рядом с нейтральной графитовой палитрой. */
    --ksy-tooltip-bg:         rgba(0, 0, 0, 0.85);
    --ksy-tooltip-text:       #ffffff;
    --ksy-tooltip-border:     rgba(255, 255, 255, 0.1);
    --ksy-tooltip-shadow:     0 4px 16px rgba(0, 0, 0, 0.18);
    --ksy-tooltip-radius:     var(--ksy-radius, 6px);
    --ksy-tooltip-padding:    6px 12px;
    --ksy-tooltip-font-size:  12px;
    --ksy-tooltip-font-weight:600;
    --ksy-tooltip-z-index:    1000000;
    --ksy-tooltip-offset:     8px;
    --ksy-tooltip-arrow-size: 5px;
    --ksy-tooltip-max-width:  260px;
}

/* Базовый тултип */
.ksy-tooltip {
    position: fixed;
    z-index: var(--ksy-tooltip-z-index);
    padding: var(--ksy-tooltip-padding);
    background: var(--ksy-tooltip-bg);
    color: var(--ksy-tooltip-text);
    font-family: var(--ksy-font, 'Manrope', sans-serif);
    font-size: var(--ksy-tooltip-font-size);
    font-weight: var(--ksy-tooltip-font-weight);
    line-height: 1.4;
    border-radius: var(--ksy-tooltip-radius);
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    box-shadow: var(--ksy-tooltip-shadow);
    /* normal, а не nowrap: с nowrap текст шире max-width не переносился, а вылезал за подложку —
       обрезанным выглядел любой тултип длиннее 260px, но короче 60 символов (порог is-multiline
       в tooltip.js). Абсолютно позиционированный блок и так сжимается по содержимому, поэтому
       короткие подсказки остаются в одну строку, а длинные переносятся. */
    white-space: normal;
    max-width: var(--ksy-tooltip-max-width);
    transition: opacity .15s ease, transform .15s cubic-bezier(.175,.885,.32,1.275);
}

/* Явно многострочный (или длинный) — центрируем текст и даём воздуха между строк */
.ksy-tooltip.is-multiline {
    text-align: center;
    line-height: 1.5;
}

/* Явно однострочный — когда перенос нежелателен (узкие ячейки, бейджи) */
.ksy-tooltip.is-nowrap {
    white-space: nowrap;
    max-width: none;
}

/* Стрелочка */
.ksy-tooltip::after {
    content: '';
    position: absolute;
    border: var(--ksy-tooltip-arrow-size) solid transparent;
}

/* Позиции стрелочки */
.ksy-tooltip[data-pos="top"]::after    { top: 100%; left: 50%; transform: translateX(-50%); border-top-color: var(--ksy-tooltip-bg); }
.ksy-tooltip[data-pos="bottom"]::after { bottom: 100%; left: 50%; transform: translateX(-50%); border-bottom-color: var(--ksy-tooltip-bg); }
.ksy-tooltip[data-pos="left"]::after   { left: 100%; top: 50%; transform: translateY(-50%); border-left-color: var(--ksy-tooltip-bg); }
.ksy-tooltip[data-pos="right"]::after  { right: 100%; top: 50%; transform: translateY(-50%); border-right-color: var(--ksy-tooltip-bg); }

/* Начальные transform по позиции (появляется со стороны цели) */
.ksy-tooltip[data-pos="top"]    { transform: translateY(6px)  scale(.95); }
.ksy-tooltip[data-pos="bottom"] { transform: translateY(-6px) scale(.95); }
.ksy-tooltip[data-pos="left"]   { transform: translateX(6px)  scale(.95); }
.ksy-tooltip[data-pos="right"]  { transform: translateX(-6px) scale(.95); }

/* Видимое состояние */
.ksy-tooltip.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translate(0) scale(1);
}

/* ── Варианты ─────────────────────────────────────────────── */

/* Light — белый фон с рамкой */
.ksy-tooltip--light {
    --ksy-tooltip-bg:   var(--ksy-card, #fff);
    --ksy-tooltip-text: var(--ksy-text, #1e293b);
    border: 1px solid var(--ksy-border, #e2e8f0);
    box-shadow: 0 4px 16px rgba(0, 0, 0, .08);
}

/* Цветные варианты */
.ksy-tooltip--blue   { --ksy-tooltip-bg: var(--ksy-blue,   #007aff); }
.ksy-tooltip--green  { --ksy-tooltip-bg: var(--ksy-green,  #27ae60); }
.ksy-tooltip--red    { --ksy-tooltip-bg: var(--ksy-red,    #e74c3c); }
.ksy-tooltip--orange { --ksy-tooltip-bg: var(--ksy-orange, #e67e22); }
.ksy-tooltip--purple { --ksy-tooltip-bg: var(--ksy-purple, #9b59b6); }

/* ── Мобайл — скрываем ────────────────────────────────────── */
@media (pointer: coarse) {
    .ksy-tooltip { display: none !important; }
}

/* ── Темная тема ──────────────────────────────────────────── */
[data-theme-dark="true"] .ksy-tooltip--light {
    --ksy-tooltip-bg:   var(--ksy-card);
    --ksy-tooltip-text: var(--ksy-text);
    border-color: var(--ksy-border);
    box-shadow: 0 4px 16px rgba(0, 0, 0, .3);
}