/* Core Layout */
body, html { margin: 0; padding: 0; height: 100%; overflow: hidden; background-color: #010011; }

.hub-container {
    position: relative; width: 100vw; height: 100vh;
    background-image: url('./Screenshot\ 2026-04-11\ at\ 8.44.08\ PM.png');
    background-size: contain; background-repeat: no-repeat; background-position: center;
}

/* Clock */
#clock-overlay {
    position: absolute; top: 17px; left: 70px;
    color: #ffffff; font-family: 'Segoe UI', Roboto, sans-serif; font-size: 22px;
    display: flex; gap: 15px; text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
    pointer-events: none; z-index: 10;
}

/* Hotspots */
.hotspot { position: absolute; cursor: pointer; background: rgba(255, 0, 0, 0.1); border: 1px solid white; z-index: 20; }
#btn-vga { top: 20%; left: 10%; width: 60px; height: 60px; } /* Adjust these to match your image */
#btn-dp { top: 20%; left: 20%; width: 60px; height: 60px; }
#annotate-hotspot { bottom:30%; right: 16%; width: 49px; height: 55px; border-radius: 50%; }

/* Sidebar Triggers */
.side-trigger {
    position: fixed; top: 50%; width: 8px; height: 80px;
    background: rgba(255, 255, 255, 0.4); border-radius: 10px;
    z-index: 3000; touch-action: none; transform: translateY(-50%);
}
.left-bar { left: 5px; }
.right-bar { right: 5px; }

/* Stacked Toolbar */
#side-toolbar {
    position: fixed; left: -80px; top: 50%; width: 65px; 
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.5); border-radius: 0 15px 15px 0;
    z-index: 2000; display: flex; flex-direction: column; gap: 5px; align-items: center;
    transition: left 0.3s ease; padding: 10px 0;
}
#side-toolbar.open { left: 0px; }

.tool-btn { display: block; width: 48px; height: 48px; border: none; background: none; cursor: pointer; }
.tool-btn img { width: 100%; height: 100%; object-fit: contain; }