/* YOLO COMMAND CENTER V2 DESIGN */
body { 
    background-color: #0d101a; 
    color: #c9d1d9; 
    background: linear-gradient(-45deg, #0d101a, #1a0f2e, #0d101a, #0f162e);
    background-size: 400% 400%;
    animation: aurora 20s ease infinite;
    position: relative;
    z-index: 1;
}

body::before {
    content: "";
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-image: 
        linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 30px 30px;
    z-index: -1;
    pointer-events: none;
}

@keyframes aurora {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* The new glassmorphic glass panel for chat */
.glass-panel {
    background: linear-gradient(135deg, rgba(16, 20, 36, 0.8), rgba(9, 11, 20, 0.9)) !important;
    backdrop-filter: blur(16px) !important;
    border-left: 2px solid #00d2ff !important;
    border-bottom: 1px solid rgba(0, 210, 255, 0.2) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: 0 8px 32px rgba(0, 210, 255, 0.15) !important;
}

/* User Message Glass */
.bg-blue-600 {
    background: linear-gradient(135deg, rgba(0, 210, 255, 0.15), rgba(0, 210, 255, 0.05)) !important;
    border-right: 2px solid #00d2ff !important;
    backdrop-filter: blur(10px);
    color: #e2e8f0 !important;
}
.bg-blue-600.w-8 { background: transparent !important; border:none!important; } /* Restore avatar icon */

/* Input bar wrapper */
.input-wrapper { background-color: #171b2d; border: 1px solid rgba(255,255,255,0.1); }

/* Right Pane Data backgrounds */
.bg-\[\#050608\] { background-color: #0d101a !important; background-image: radial-gradient(circle at top right, rgba(0, 210, 255, 0.05), transparent 40%), radial-gradient(circle at bottom left, rgba(255, 0, 127, 0.05), transparent 40%) !important;}
.bg-\[\#161b22\] { background-color: #171b2d !important; border-color: rgba(255,255,255,0.05)!important; }
.bg-\[\#0a0c10\] { background-color: transparent !important; }

/* Custom Scrollbar */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: #0d101a; }
::-webkit-scrollbar-thumb { background: #2d3748; border-radius: 5px; }

/* Existing essential functionality */
.break-absolute { overflow-wrap: anywhere; word-break: break-all; }
.scrollbar-hide::-webkit-scrollbar { display: none; }
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }
.loader { border: 2px solid #30363d; border-top: 2px solid #ec4899; border-radius: 50%; width: 16px; height: 16px; animation: spin 1s linear infinite; }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
.tool-bubble { background: #171b2d; border-left: 4px solid #00d2ff; }

/* YOLO CAM */
.cam-tab { padding: 4px 10px; border-radius: 6px; font-size: 11px; font-weight: 700; cursor: pointer; transition: all 0.2s; border: 1px solid transparent; background: transparent; color: #6e7681; }
.cam-tab:hover { color: #c9d1d9; background: rgba(255,255,255,0.04); }
.cam-panel { display: none; }
.cam-panel.active { display: flex; flex-direction: column; }
.active { color: #f0abfc !important; }

/* Feed / Activities */
.feed-entry { padding: 8px 12px; border-left: 3px solid #30363d; margin-bottom: 2px; }
.feed-entry.feed-tool { border-left-color: #00d2ff; }
.feed-entry.feed-result { border-left-color: #00ff87; }
.feed-entry.feed-error { border-left-color: #ff007f; }

/* UI Fixes */
#yolo-toggle:checked ~ .block-bg { background-color: #ec4899; border-color: #ec4899; }
#yolo-toggle:checked ~ .dot { transform: translateX(16px); background-color: #ffffff; }