/* ====================== 16-DRAG-REORDER.CSS ====================== */
/* Все стили и анимации для режима перетаскивания узлов дерева */
/* v58 — полностью согласовано с tree-drag-handlers.js + ghostNode */

body.reorder-enabled .node {
    cursor: grab !important;
}

/* ====================== DRAG START ====================== */
.node.dragging {
    opacity: 0.35;
    transform: scale(0.92) rotate(3deg) translateY(-4px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    z-index: 1000;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ====================== DRAG OVER (цель) ====================== */
.node.drag-over {
    transform: scale(1.05);
    background: linear-gradient(90deg, #a5d6ff, #e3f2fd) !important;
    box-shadow: 0 0 0 4px #3498db;
    border-radius: 12px;
}

/* ====================== DROP АНИМАЦИЯ ====================== */
.node-dropped {
    animation: nodeDropPop 420ms cubic-bezier(0.68, -0.55, 0.27, 1.55) forwards;
}

@keyframes nodeDropPop {
    0%   { transform: scale(0.75) translateY(-18px); opacity: 0.4; }
    45%  { transform: scale(1.15) translateY(6px); }
    70%  { transform: scale(0.95) translateY(-3px); }
    100% { transform: scale(1) translateY(0); opacity: 1; }
}

/* ====================== TOUCH DRAG — GHOST ЭЛЕМЕНТ ====================== */
/* Это основной элемент, который следует за пальцем */
.dragging-touch-ghost {
    opacity: 0.85;
    transform: scale(1.05);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);
    pointer-events: none;
    z-index: 10000;
    border-radius: 10px;
    /* небольшая тень + лёгкий подъём */
    filter: drop-shadow(0 10px 25px rgba(0, 0, 0, 0.35));
}

/* ====================== TOUCH PULSE (если вдруг используется) ====================== */
.node.dragging-touch {
    animation: touchPulse 900ms infinite alternate ease-in-out;
}

@keyframes touchPulse {
    from {
        box-shadow: 0 0 0 0 rgba(52, 152, 219, 0.7);
        transform: scale(1);
    }
    to {
        box-shadow: 0 0 0 22px rgba(52, 152, 219, 0);
        transform: scale(1.03);
    }
}

/* ====================== РЕЖИМ ПЕРЕТАСКИВАНИЯ — ГЛОБАЛЬНЫЕ ПРАВИЛА ====================== */

/* Скрываем меню узлов в режиме reorder */
body.reorder-enabled .node-menu-btn,
body.reorder-enabled .node-menu {
    display: none !important;
}

/* Защита главного меню и кнопки ⋮ */
body.reorder-enabled .header-menu-btn,
body.reorder-enabled .header-menu,
body.reorder-enabled #controlPanel,
body.reorder-enabled .control-btn {
    pointer-events: auto !important;
    z-index: 10000 !important;
}

/* Улучшенный hover в режиме reorder */
body.reorder-enabled .node:hover:not(.dragging) {
    background-color: var(--bg-surface) !important;
    transform: translateY(-1px);
}

/* ====================== ТЁМНАЯ ТЕМА ====================== */
body.theme-dark .node.dragging {
    opacity: 0.4;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
}

body.theme-dark .node.drag-over {
    background: linear-gradient(90deg, #25334a, #33476e) !important;
    box-shadow: 0 0 0 4px #60a5fa;
}

body.theme-dark .node-dropped {
    animation: nodeDropPopDark 420ms cubic-bezier(0.68, -0.55, 0.27, 1.55) forwards;
}

@keyframes nodeDropPopDark {
    0%   { transform: scale(0.75) translateY(-18px); opacity: 0.4; }
    45%  { transform: scale(1.15) translateY(6px); }
    70%  { transform: scale(0.95) translateY(-3px); }
    100% { transform: scale(1) translateY(0); opacity: 1; }
}

body.theme-dark .dragging-touch-ghost {
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.6);
    filter: drop-shadow(0 10px 25px rgba(0, 0, 0, 0.55));
}

body.theme-dark .node.dragging-touch {
    animation: touchPulseDark 900ms infinite alternate ease-in-out;
}

@keyframes touchPulseDark {
    from { box-shadow: 0 0 0 0 rgba(96, 165, 250, 0.7); }
    to   { box-shadow: 0 0 0 22px rgba(96, 165, 250, 0); }
}

/* ====================== ДОПОЛНИТЕЛЬНАЯ ЗАЩИТА ====================== */
.node.dragging,
.dragging-touch-ghost {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}