/* ==========================================================================
   CONSTELLATE DRAWER MODALS - STYLESHEET
   ========================================================================== */
:root {
    --bg-modal: rgba(18, 21, 38, 0.95);
    --border-color: #242b54;
    --content-w: 320px;
    /* Variáveis injetadas pelo JS Config */
    --tag-w: 100px;
    --tag-h: 40px;
    --tag-protrusion: 50px;
}

body {
    /* Mantenha o body do seu site como preferir, os modais vão se adaptar */
    overflow-x: hidden; 
}

/* Container Estrutural */
.c-drawer {
    position: fixed;
    z-index: 999;
    transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), top 0.4s ease, left 0.4s ease;
}

.c-drawer.is-open {
    z-index: 10000;
}

/* Conteúdo da Gaveta */
.drawer-content {
    width: var(--content-w);
    background-color: var(--bg-modal);
    border: 1px solid var(--neon-color);
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.8), inset 0 0 20px rgba(0,0,0,0.5);
    box-sizing: border-box;
    backdrop-filter: blur(10px);
    position: relative;
    z-index: 2;
    color: #e2e8f0;
}

.drawer-content h3 { margin: 0 0 10px 0; font-size: 16px; color: var(--neon-color); text-shadow: 0 0 8px var(--neon-color); }
.drawer-content p { margin: 0; font-size: 13px; color: #a5b4fc; line-height: 1.5; }

/* Etiqueta (Clipe) */
.drawer-tag {
    position: absolute;
    cursor: grab;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: top 0.4s ease, left 0.4s ease;
    z-index: 1;
    user-select: none;
    -webkit-user-select: none;
}
.drawer-tag:active { cursor: grabbing; }

/* O SVG do Clipe Vazio */
.neon-svg {
    position: absolute;
    top: 50%; left: 50%;
    width: var(--tag-w); height: var(--tag-h);
    margin-top: calc(var(--tag-h) / -2); 
    margin-left: calc(var(--tag-w) / -2);
    pointer-events: none;
    transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
    filter: drop-shadow(0 0 4px var(--neon-color));
}

.neon-path {
    fill: none;
    stroke: var(--neon-color);
    stroke-width: 2.5;
    vector-effect: non-scaling-stroke;
}

/* Ícone */
.drawer-tag .icon {
    z-index: 2;
    position: relative;
    color: #fff;
    font-size: 18px;
    pointer-events: none;
    text-shadow: 0 0 5px rgba(255,255,255,0.8);
}

.drawer-tag:hover .neon-svg { filter: drop-shadow(0 0 8px var(--neon-color)); }

/* Tooltip nativa */
.drawer-tag::after {
    content: attr(data-title);
    position: absolute;
    background: rgba(18, 21, 38, 0.95);
    border: 1px solid var(--neon-color);
    color: #fff;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease 0.1s;
    box-shadow: 0 4px 15px rgba(0,0,0,0.8);
    z-index: 10;
}

.drawer-tag:hover::after { opacity: 1; }
.c-drawer.is-open .drawer-tag::after,
.c-drawer.is-dragging .drawer-tag::after { opacity: 0 !important; transition: none; }

/* ==========================================================================
   POSICIONAMENTOS POR BORDA (Com offsets dinâmicos)
   ========================================================================== */

/* BORDA DIREITA */
.c-drawer[data-edge="right"] { transform: translateX(100%); }
.c-drawer[data-edge="right"].is-open { transform: translateX(0); }
.c-drawer[data-edge="right"] .drawer-tag { 
    left: calc((var(--tag-protrusion) + var(--out-right)) * -1); 
    width: var(--tag-w); height: var(--tag-h); 
    transform: translateY(var(--shift-right));
}
.c-drawer[data-edge="right"] .neon-svg { transform: rotate(0deg); }
.c-drawer[data-edge="right"] .icon { transform: translateX(-22px); }
.c-drawer[data-edge="right"] .drawer-tag::after { right: 110%; top: 50%; transform: translateY(-50%); }

/* BORDA ESQUERDA */
.c-drawer[data-edge="left"] { transform: translateX(-100%); }
.c-drawer[data-edge="left"].is-open { transform: translateX(0); }
.c-drawer[data-edge="left"] .drawer-tag { 
    right: calc((var(--tag-protrusion) + var(--out-left)) * -1); 
    width: var(--tag-w); height: var(--tag-h); 
    transform: translateY(var(--shift-left));
}
.c-drawer[data-edge="left"] .neon-svg { transform: rotate(180deg); }
.c-drawer[data-edge="left"] .icon { transform: translateX(22px); }
.c-drawer[data-edge="left"] .drawer-tag::after { left: 110%; top: 50%; transform: translateY(-50%); }

/* BORDA SUPERIOR */
.c-drawer[data-edge="top"] { transform: translateY(-100%); }
.c-drawer[data-edge="top"].is-open { transform: translateY(0); }
.c-drawer[data-edge="top"] .drawer-tag { 
    bottom: calc((var(--tag-protrusion) + var(--out-top)) * -1); 
    width: var(--tag-h); height: var(--tag-w); 
    transform: translateX(var(--shift-top));
}
.c-drawer[data-edge="top"] .neon-svg { transform: rotate(-90deg); }
.c-drawer[data-edge="top"] .icon { transform: translateY(22px); }
.c-drawer[data-edge="top"] .drawer-tag::after { top: 110%; left: 50%; transform: translateX(-50%); }

/* BORDA INFERIOR */
.c-drawer[data-edge="bottom"] { transform: translateY(100%); }
.c-drawer[data-edge="bottom"].is-open { transform: translateY(0); }
.c-drawer[data-edge="bottom"] .drawer-tag { 
    top: calc((var(--tag-protrusion) + var(--out-bottom)) * -1); 
    width: var(--tag-h); height: var(--tag-w); 
    transform: translateX(var(--shift-bottom));
}
.c-drawer[data-edge="bottom"] .neon-svg { transform: rotate(90deg); }
.c-drawer[data-edge="bottom"] .icon { transform: translateY(-22px); }
.c-drawer[data-edge="bottom"] .drawer-tag::after { bottom: 110%; left: 50%; transform: translateX(-50%); }

/* ESTADO DE DRAG */
.c-drawer.is-dragging {
    transition: none !important;
    transform: none !important;
    z-index: 10001;
    width: 0 !important; height: 0 !important;
}
.c-drawer.is-dragging .drawer-content { display: none !important; }
.c-drawer.is-dragging .drawer-tag {
    top: 0 !important; left: 0 !important;
    right: auto !important; bottom: auto !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
}