/* --- Core Variables & Theming --- */
.dynamic-bubble-wrapper {
    position: relative;
    width: 100%;
    height: calc(100vh - 160px); 
    min-height: 600px;
    overflow: hidden;
    font-family: 'Inter', sans-serif;
    background: #fdfafb;
    --modal-bg: rgba(0, 0, 0, 0.9);
}

/* Theme: Glass */
.dynamic-bubble-wrapper.theme-glass {
    background: radial-gradient(circle at 50% 50%, #ffffff 0%, rgba(202, 147, 150, 0.29) 100%);
    --bubble-bg: rgba(255, 255, 255, 0.5);
    --bubble-border: rgba(255, 255, 255, 0.8);
    --bubble-text: #4a4a4a;
    --bubble-blur: blur(16px);
}

/* Theme: Solid */
.dynamic-bubble-wrapper.theme-solid {
    background: #111827;
    --bubble-bg: #fb7185;
    --bubble-border: #fda4af;
    --bubble-text: #ffffff;
    --bubble-blur: none;
}

/* --- UI & Search --- */
.bubble-ui-layer {
    position: absolute;
    top: 25px; left: 0; width: 100%;
    display: flex; justify-content: center;
    z-index: 30; pointer-events: none;
}
.bubble-search {
    pointer-events: auto;
    width: 90%; max-width: 28rem;
    padding: 1rem 2rem;
    border-radius: 9999px;
    text-align: center; font-weight: 700; text-transform: uppercase;
    background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(10px);
    border: 1px solid rgba(251, 113, 133, 0.3);
    transition: all 0.3s;
}
.bubble-search:focus { outline: none; box-shadow: 0 10px 30px rgba(251, 113, 133, 0.3); }

/* --- The Canvas & Bubbles --- */
.bubble-canvas {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none; z-index: 10;
}
.bubble-item {
    position: absolute;
    width: 110px; height: 110px;
    margin-top: -55px; margin-left: -55px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    background: var(--bubble-bg);
    border: 1px solid var(--bubble-border);
    backdrop-filter: var(--bubble-blur);
    border-radius: 50%;
    cursor: pointer; pointer-events: auto;
    color: var(--bubble-text);
    text-align: center; padding: 10px; box-sizing: border-box;
    transition: transform 0.3s ease, opacity 0.4s ease;
    will-change: transform;
    opacity: 0; transform: scale(0);
}
.bubble-item.spawned { opacity: 1; transform: scale(1); }
.bubble-item.hidden { opacity: 0; pointer-events: none; transform: scale(0.5) !important; }
.bubble-item:hover { transform: scale(1.15) !important; z-index: 50; }

.bubble-item svg { width: 24px; height: 24px; margin-bottom: 5px; }
.bubble-item span { font-size: 0.65rem; font-weight: 700; text-transform: uppercase; line-height: 1.1; pointer-events: none; }

/* --- Video Modal --- */
.bubble-video-modal {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: var(--modal-bg); backdrop-filter: blur(10px);
    z-index: 999999; display: none; align-items: center; justify-content: center;
    opacity: 0; transition: opacity 0.3s ease;
}
.bubble-video-modal.active { display: flex; opacity: 1; }
.bubble-video-container {
    position: relative; width: 90%; max-width: 900px; aspect-ratio: 16/9;
    background: #000; border-radius: 15px; overflow: hidden;
}
.bubble-iframe-wrapper iframe { width: 100%; height: 100%; border: none; position: absolute; top:0; left:0; }
.bubble-close-modal {
    position: absolute; top: -40px; right: 0;
    background: none; border: none; color: white; font-size: 35px; cursor: pointer;
}