/* ═══════════════════════════════════════════════════════════════
   Versionary — Drag-Hover Overlay (direction 1D)
   
   REPLACES in css/v1-main.css:
     .drag-drop-overlay            (last iteration block)
     .drag-drop-overlay .drop-label / .drop-sublabel
   
   DOES NOT TOUCH:
     .ve-blob / children  — loader.css owns these
     Positioning (position:absolute, inset:0, z-index) — set by parent CSS
   
   Values are LITERAL (no var(--th-*)).
   ═══════════════════════════════════════════════════════════════ */


/* ─────────── Overlay surface ─────────── */
.drag-drop-overlay {
    background: rgba(255, 255, 255, 0.35);
    backdrop-filter: blur(20px) saturate(1.2);
    -webkit-backdrop-filter: blur(20px) saturate(1.2);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    border: none;
}
body.dark-mode .drag-drop-overlay {
    /* Bumped from rgba(0,0,0,0.4) — at 0.4 the elements behind the overlay
       stayed too visible in dark mode, so the hover state read as noise
       rather than a real takeover. 0.78 obscures cleanly while the
       backdrop-filter blur still reads through the edges. */
    background: rgba(0, 0, 0, 0.78);
    backdrop-filter: blur(24px) saturate(1.3);
    -webkit-backdrop-filter: blur(24px) saturate(1.3);
}


/* Homepage drag overlay's .drop-content wraps blob + label + sublabel.
   Without this, the fixed-width blob (100x100 block) sits at the natural
   left of the parent while the text below it centers via text-align, so
   the blob appears offset LEFT of the text. Flex column + align-items
   center puts the blob directly above the text where it belongs.

   Console drag overlay does NOT use .drop-content (children are direct
   under #consoleDragOverlay which has its own flex layout), so this
   rule doesn't affect the console overlay. */
.drag-drop-overlay .drop-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-align: center;
    pointer-events: none;
}


/* ─────────── Corner brackets ─────────── */
.drag-corner-bracket {
    position: absolute;
    width: 28px;
    height: 28px;
    border-style: solid;
    border-width: 0;
    border-color: rgba(91, 83, 209, 0.5);
    animation: drag-bracket-pulse 2s ease-in-out infinite;
}
body.dark-mode .drag-corner-bracket {
    border-color: rgba(124, 106, 239, 0.45);
}

@keyframes drag-bracket-pulse {
    0%, 100% { opacity: .3; }
    50%      { opacity: .7; }
}


/* ─────────── Text ─────────── */
.drag-drop-label {
    font-family: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: -0.01em;
    color: rgba(0, 0, 0, 0.72);
}
body.dark-mode .drag-drop-label {
    color: rgba(255, 255, 255, 0.85);
}

.drag-drop-sublabel {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11px;
    letter-spacing: 0.03em;
    color: rgba(0, 0, 0, 0.35);
}
body.dark-mode .drag-drop-sublabel {
    color: rgba(255, 255, 255, 0.35);
}