/* Поповер «🔗» для ссылок на item'ах мудборда. */

.mb-link-pop {
    position: fixed;
    z-index: 1100;
    min-width: 260px;
    max-width: 340px;
    padding: 10px;
    background: var(--surface, #1f1f24);
    color: var(--fg, #e6e6ea);
    border: 1px solid var(--accent-border, rgba(255, 255, 255, 0.12));
    border-radius: 10px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
    font-size: 13px;
    user-select: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.mb-link-pop__seg {
    display: flex;
    gap: 4px;
    background: var(--accent-subtle, rgba(255, 255, 255, 0.04));
    padding: 3px;
    border-radius: 8px;
}

.mb-link-pop__seg button {
    flex: 1;
    padding: 5px 8px;
    background: transparent;
    border: 0;
    color: var(--fg, #e6e6ea);
    border-radius: 5px;
    cursor: pointer;
    font-size: 12px;
    transition: background 0.12s;
}
.mb-link-pop__seg button:hover { background: var(--accent-subtle-2, rgba(255, 255, 255, 0.08)); }
.mb-link-pop__seg button.is-active {
    background: var(--accent, #eac42c);
    color: var(--accent-fg, #111);
}

.mb-link-pop__body {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.mb-link-pop__url,
.mb-link-pop__select,
.mb-link-pop__label-input {
    width: 100%;
    box-sizing: border-box;
    padding: 6px 8px;
    background: var(--accent-subtle, rgba(255, 255, 255, 0.04));
    border: 1px solid var(--accent-border, rgba(255, 255, 255, 0.12));
    border-radius: 6px;
    color: var(--fg, #e6e6ea);
    font-size: 13px;
    outline: none;
}

/* Native <select> dropdown в темной теме: без color-scheme браузер
   рендерит option светлым шрифтом на светлом фоне → нечитаемо. */
.mb-link-pop__select {
    color-scheme: dark;
}
.mb-link-pop__select option {
    background: #1f1f24;
    color: #e6e6ea;
}
html.light .mb-link-pop__select {
    color-scheme: light;
}
html.light .mb-link-pop__select option {
    background: #ffffff;
    color: #1f1f24;
}
.mb-link-pop__url:focus,
.mb-link-pop__select:focus,
.mb-link-pop__label-input:focus {
    border-color: var(--accent-border-strong, var(--accent, #eac42c));
}
.mb-link-pop__url.is-invalid {
    border-color: #d65a5a;
}

.mb-link-pop__loading,
.mb-link-pop__empty {
    padding: 8px 4px;
    color: var(--accent-muted, rgba(255, 255, 255, 0.6));
    font-size: 12px;
    text-align: center;
}

.mb-link-pop__label-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--accent-muted, rgba(255, 255, 255, 0.6));
}
.mb-link-pop__label-row > span {
    flex: 0 0 auto;
}
.mb-link-pop__label-row input {
    flex: 1 1 auto;
}

.mb-link-pop__actions {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 2px;
}
.mb-link-pop__spacer { flex: 1 1 auto; }

.mb-link-pop__actions button {
    padding: 5px 10px;
    border: 1px solid var(--accent-border, rgba(255, 255, 255, 0.12));
    background: transparent;
    color: var(--fg, #e6e6ea);
    border-radius: 6px;
    cursor: pointer;
    font-size: 12px;
}
.mb-link-pop__actions button:hover {
    background: var(--accent-subtle-2, rgba(255, 255, 255, 0.08));
}
.mb-link-pop__save {
    background: var(--accent, #eac42c) !important;
    color: var(--accent-fg, #111) !important;
    border-color: var(--accent, #eac42c) !important;
}
.mb-link-pop__remove {
    color: #d65a5a;
    border-color: rgba(214, 90, 90, 0.4);
}
.mb-link-pop__remove:hover {
    background: rgba(214, 90, 90, 0.12);
}

/* Кнопка-якорь «🔗» в тулбарах — единый стиль активного состояния */
.moodboard-toolbar [data-act="link"].is-active,
.moodboard-text-toolbar [data-act="link"].is-active {
    background: var(--accent-subtle-2, rgba(255, 255, 255, 0.08));
    color: var(--accent, #eac42c);
}

/* ── Бэйдж «🔗» поверх item'а с заданной ссылкой ────────────────── */
/* Контейнер .mb-link-badges остаётся pointer-events: none через inline-style
   из MoodboardLinkBadgesLayer — клики ловят сами бэйджи. */

.mb-link-badge {
    position: absolute;
    left: 0; top: 0;            /* реальная позиция через transform */
    width: 22px;
    height: 22px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--surface, #1f1f24);
    color: var(--accent, #eac42c);
    border: 1px solid var(--accent-border, rgba(255, 255, 255, 0.18));
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
    cursor: pointer;
    pointer-events: auto;
    z-index: 4;
    /* НИКАКОЙ transition на transform: бэйдж синхронно следует за canvas во
       время pan/zoom; CSS-плавность даёт видимое отставание. */
    transition: box-shadow 0.12s, background 0.12s, color 0.12s;
}

.mb-link-badge:hover {
    background: var(--accent, #eac42c);
    color: var(--accent-fg, #111);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.5);
}

.mb-link-badge i,
.mb-link-badge svg {
    width: 12px;
    height: 12px;
    pointer-events: none;
}

html.light .mb-link-badge {
    background: #ffffff;
    border-color: rgba(0, 0, 0, 0.14);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}

/* Видимость элементов «только при одиночном выделении» в тулбарах. */
.moodboard-toolbar [data-show="single"] { display: none; }
.moodboard-toolbar.is-single [data-show="single"] { display: inline-flex; }
.moodboard-toolbar.is-single .moodboard-toolbar-sep[data-show="single"] { display: inline-block; }
/* В режиме conn (связь с текстом) ссылка не нужна — связь сама ведёт куда-то. */
.moodboard-toolbar[data-mode="conn"] [data-show="single"] { display: none !important; }