/* =============================================
   PRODUCTIVEAPP - STYLE-DRAGDROP.CSS v2
   Styles épurés pour le Drag & Drop
   ============================================= */

/* === TÂCHES DRAGGABLES === */
.bubble[draggable="true"] {
    cursor: grab;
    user-select: none;
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s ease;
}

.bubble[draggable="true"]:active {
    cursor: grabbing;
}

/* Tâche en cours de drag - opacité maintenue, fluidité maximale */
.bubble.dragging {
    opacity: 0.95 !important;
    transform: scale(1.02) !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3) !important;
    z-index: 1000;
    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1) !important;
    cursor: grabbing !important;
}

/* Zone de drop active - subtile */
.task-list.drag-over,
.bubbles-list.drag-over {
    background: rgba(224, 120, 64, 0.05);
    border-radius: 12px;
    min-height: 80px;
    transition: all 0.2s ease;
}

/* === INDICATEURS D'INSERTION ÉPURÉS === */

/* Ligne élégante au-dessus */
.bubble.drag-insert-above {
    position: relative;
}

.bubble.drag-insert-above::before {
    content: '';
    position: absolute;
    top: -6px;
    left: 10%;
    right: 10%;
    height: 3px;
    background: var(--accent, #e07840);
    border-radius: 3px;
    box-shadow: 0 0 8px var(--accent, #e07840);
}

/* Ligne élégante en-dessous */
.bubble.drag-insert-below {
    position: relative;
}

.bubble.drag-insert-below::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 10%;
    right: 10%;
    height: 3px;
    background: var(--accent, #e07840);
    border-radius: 3px;
    box-shadow: 0 0 8px var(--accent, #e07840);
}

/* === PROJETS DRAGGABLES === */
.project-chip[draggable="true"] {
    cursor: grab;
    user-select: none;
    transition: all 0.2s ease;
}

.project-chip[draggable="true"]:active {
    cursor: grabbing;
}

/* Projet en cours de drag */
.project-chip.dragging-project {
    opacity: 0.95 !important;
    transform: scale(1.02) !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.25) !important;
    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1) !important;
    cursor: grabbing !important;
}

/* Indicateur insertion à gauche - ligne verticale */
.project-chip.drag-over-project-left {
    position: relative;
}

.project-chip.drag-over-project-left::before {
    content: '';
    position: absolute;
    left: -4px;
    top: 20%;
    bottom: 20%;
    width: 3px;
    background: var(--accent, #e07840);
    border-radius: 3px;
    box-shadow: 0 0 6px var(--accent, #e07840);
}

/* Indicateur insertion à droite - ligne verticale */
.project-chip.drag-over-project-right {
    position: relative;
}

.project-chip.drag-over-project-right::after {
    content: '';
    position: absolute;
    right: -4px;
    top: 20%;
    bottom: 20%;
    width: 3px;
    background: var(--accent, #e07840);
    border-radius: 3px;
    box-shadow: 0 0 6px var(--accent, #e07840);
}

/* === THÈMES SOMBRES === */
[data-theme="matrix"] .task-list.drag-over,
[data-theme="matrix"] .bubbles-list.drag-over {
    background: rgba(0, 255, 102, 0.05);
}

[data-theme="matrix"] .bubble.drag-insert-above::before,
[data-theme="matrix"] .bubble.drag-insert-below::after,
[data-theme="matrix"] .project-chip.drag-over-project-left::before,
[data-theme="matrix"] .project-chip.drag-over-project-right::after {
    background: #00ff66;
    box-shadow: 0 0 8px #00ff66;
}

[data-theme="midnight"] .bubble.drag-insert-above::before,
[data-theme="midnight"] .bubble.drag-insert-below::after,
[data-theme="midnight"] .project-chip.drag-over-project-left::before,
[data-theme="midnight"] .project-chip.drag-over-project-right::after {
    background: #6482ff;
    box-shadow: 0 0 8px #6482ff;
}

[data-theme="hacker"] .bubble.drag-insert-above::before,
[data-theme="hacker"] .bubble.drag-insert-below::after,
[data-theme="hacker"] .project-chip.drag-over-project-left::before,
[data-theme="hacker"] .project-chip.drag-over-project-right::after {
    background: #00ff00;
    box-shadow: 0 0 8px #00ff00;
}

[data-theme="fantasy"] .bubble.drag-insert-above::before,
[data-theme="fantasy"] .bubble.drag-insert-below::after,
[data-theme="fantasy"] .project-chip.drag-over-project-left::before,
[data-theme="fantasy"] .project-chip.drag-over-project-right::after {
    background: #bf6bff;
    box-shadow: 0 0 8px #bf6bff;
}

/* === RESPONSIVE === */
@media (max-width: 768px) {
    .bubble.drag-insert-above::before,
    .bubble.drag-insert-below::after {
        height: 4px;
        left: 5%;
        right: 5%;
    }
}