/* --- Base Theme & Fonts --- */
body {
    background-color: #050505;
    color: #e2e8f0;
    font-family: 'Rajdhani', sans-serif;
    font-weight: 500;
    /* Lock the Viewport - No Body Scroll */
    height: 100vh;
    overflow: hidden; 
}

h1, h2, h3, h4, h5, .sidebar-heading, .navbar-brand {
    font-family: 'Orbitron', sans-serif;
    letter-spacing: 1px;
}

/* --- VISIBILITY & CONTRAST OVERRIDES --- */
/* Fixes "illegible grey" issues on dark backgrounds */
.text-muted {
    color: #b0b0b0 !important; /* Lighter Silver for sub-headers */
}

.text-secondary {
    color: #adb5bd !important; /* Lighter Grey for footers/notes */
}

/* --- Background Canvas --- */
#canvas-network {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: -1;
    background: radial-gradient(circle at bottom, #1a1a2e 0%, #000000 100%);
}

/* --- Layout Structure (The "App" Feel) --- */
#wrapper {
    display: flex;
    height: 100vh; /* Full Height */
    width: 100%;
}

#sidebar-wrapper {
    width: 260px;
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(10px);
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    flex-direction: column;
    z-index: 1000;
    transition: transform 0.3s ease-in-out;
}

#page-content-wrapper {
    flex: 1; /* Fill remaining width */
    display: flex;
    flex-direction: column;
    height: 100vh; /* Lock height */
    overflow-y: auto; /* THIS is the only scrollable area */
    scroll-behavior: smooth;
}

/* Custom Scrollbar */
#page-content-wrapper::-webkit-scrollbar { width: 8px; }
#page-content-wrapper::-webkit-scrollbar-track { background: #000; }
#page-content-wrapper::-webkit-scrollbar-thumb { background: #333; border-radius: 4px; }
#page-content-wrapper::-webkit-scrollbar-thumb:hover { background: #0dcaf0; }

/* --- High Contrast Utilities --- */
.text-label {
    color: #c0c0c0 !important; /* Luminous Silver */
    font-size: 0.75rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    display: block;
    margin-bottom: 4px;
    font-weight: 600;
}

.text-value {
    color: #fff;
    font-weight: 700;
    font-size: 1.1rem;
}

/* --- Glass Cards & Data Tiles --- */
.bg-glass {
    background: rgba(20, 20, 20, 0.6);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px; /* Sharper corners for "Command" feel */
}

/* New: Telemetry Data Tiles */
.data-tile {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 10px;
    border-radius: 6px;
    transition: all 0.3s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.data-tile:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(13, 202, 240, 0.5); /* Glow Cyan */
    box-shadow: 0 0 10px rgba(13, 202, 240, 0.2);
    transform: translateY(-2px);
}

/* --- Chat Interface Fixed (LOCKED LAYOUT) --- */
.chat-card {
    /* Hard lock the height so it never grows beyond the viewport */
    height: calc(100vh - 180px); 
    display: flex;
    flex-direction: column;
    overflow: hidden; /* CRITICAL: Stops the card itself from growing */
}

/* New Rule for the Inner Body to handle scrolling */
.chat-card .card-body {
    flex: 1;              /* Fill available space */
    display: flex;        /* Enable Flexbox layout */
    flex-direction: column;
    overflow: hidden;     /* CRITICAL: Forces children to scroll if too big */
    min-height: 0;        /* CRITICAL: Flexbox bug fix for browsers */
}

/* --- Layer 7: Input Bar High Contrast Override --- */
#user-input {
    background: rgba(0, 0, 0, 0.6) !important; /* Dark background to pop against the glass */
    color: #ffffff !important;                 /* Pure White Text for typing */
    border: 1px solid #0dcaf0 !important;      /* Cyan Border to match the theme */
    box-shadow: 0 0 10px rgba(13, 202, 240, 0.1); /* Slight glow */
}

/* This fixes the "Invisible Grey" placeholder text */
#user-input::placeholder {
    color: #d0d0d0 !important;                 /* Bright Silver */
    opacity: 1;
}

#chat-history {
    flex: 1;              /* Take up all space except the input bar */
    overflow-y: auto;     /* Scroll vertically */
    padding: 10px;
    margin-bottom: 15px;
    /* Custom Scrollbar Styles */
    scrollbar-width: thin;
    scrollbar-color: #0dcaf0 #1a1a2e;
}

.ai-message {
    background: rgba(13, 202, 240, 0.15);
    border-left: 3px solid #0dcaf0;
    padding: 12px;
    border-radius: 4px;
    color: #e0e0e0;
    margin-bottom: 15px;
    word-wrap: break-word;
}

.user-message {
    background: rgba(255, 255, 255, 0.1);
    border-right: 3px solid #888;
    padding: 12px;
    border-radius: 4px;
    text-align: right;
    color: #fff;
    margin-bottom: 15px;
    align-self: flex-end;
    max-width: 85%;
    word-wrap: break-word;
}

/* --- Sidebar & Mobile --- */
.sidebar-heading {
    padding: 2rem;
    text-align: center;
    font-weight: bold;
    color: #fff;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.list-group-item {
    background: transparent;
    color: #9ca3af;
    border: none;
    padding: 1.2rem 1.5rem;
    transition: all 0.3s;
    font-weight: 600;
}

.list-group-item:hover, .active-link {
    color: #0dcaf0;
    background: rgba(13, 202, 240, 0.1);
    border-right: 3px solid #0dcaf0;
}

@media (max-width: 768px) {
    #sidebar-wrapper {
        position: fixed; /* Overlay on mobile */
        left: -260px;
    }
    #wrapper.toggled #sidebar-wrapper {
        left: 0;
    }
    .chat-card {
        height: 75vh; /* Mobile chat height */
    }
}

/* Utilities */
.content-section { padding: 30px; flex: 1; }
.d-none { display: none !important; }
.fade-in { animation: fadeIn 0.6s ease-out; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

.btn-login-glow {
    background: transparent; color: #0dcaf0; border: 1px solid #0dcaf0;
    box-shadow: 0 0 10px rgba(13, 202, 240, 0.2); border-radius: 20px;
    padding: 6px 18px; transition: 0.3s; font-family: 'Rajdhani', sans-serif; font-weight: 700;
}
.btn-login-glow:hover { background: #0dcaf0; color: #000; box-shadow: 0 0 20px rgba(13, 202, 240, 0.6); }

/* --- CUSTOM M.G.I. TOOLTIPS --- */
[title] {
    position: relative;
    cursor: help;
}

[title]:hover::after {
    content: attr(title);
    position: absolute;
    bottom: 120%; /* Show above element */
    left: 50%;
    transform: translateX(-50%);
    width: 200px;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    color: #0dcaf0; /* Cyan Text */
    border: 1px solid #0dcaf0;
    padding: 8px 12px;
    border-radius: 4px;
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.8rem;
    font-weight: 500;
    text-align: center;
    z-index: 1000;
    pointer-events: none;
    box-shadow: 0 0 15px rgba(13, 202, 240, 0.3);
    animation: fadeIn 0.3s ease-out;
}

[title]:hover::before {
    content: '';
    position: absolute;
    bottom: 110%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 6px;
    border-style: solid;
    border-color: #0dcaf0 transparent transparent transparent;
    z-index: 1000;
}

/* --- MEDIA PORTFOLIO STYLES (ENHANCED) --- */

/* 1. The Wrapper (Created by JS) */
/* This holds the carousel and the ghost buttons together */
.carousel-wrapper {
    position: relative;
    margin-bottom: 20px;
}

/* 2. The Carousel Tunnel */
.video-carousel {
    display: flex;
    overflow-x: auto;
    padding-bottom: 20px;
    gap: 15px;
    
    /* Netflix-Style Physics */
    scroll-snap-type: x mandatory; 
    scroll-behavior: smooth;       
    -webkit-overflow-scrolling: touch;

    /* Visuals */
    scrollbar-width: thin; 
    scrollbar-color: #0dcaf0 #212529;
    background: rgba(0, 0, 0, 0.4); 
    padding: 15px;                   
    border-radius: 12px;             
    border: 1px solid rgba(255, 255, 255, 0.05); 
}

/* Scrollbar Styling */
.video-carousel::-webkit-scrollbar { height: 8px; }
.video-carousel::-webkit-scrollbar-track { background: rgba(255,255,255,0.05); border-radius: 4px; }
.video-carousel::-webkit-scrollbar-thumb { background-color: #0dcaf0; border-radius: 4px; }

/* 3. Ghost Buttons (The Arrows) */
.scroll-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 50px;
    height: 80%; /* Takes up most of the height */
    border: none;
    background: rgba(0, 0, 0, 0.6);
    color: #0dcaf0;
    font-size: 1.5rem;
    cursor: pointer;
    
    /* The Ghost Effect */
    opacity: 0;
    transition: all 0.3s ease;
    backdrop-filter: blur(4px);
    
    /* Centering the icon */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Reveal buttons when mouse enters the wrapper */
.carousel-wrapper:hover .scroll-btn {
    opacity: 1;
}

/* Button Locations & Shapes */
.scroll-btn-left {
    left: 0;
    border-top-right-radius: 12px;
    border-bottom-right-radius: 12px;
    background: linear-gradient(to right, rgba(0,0,0,0.9), transparent);
}

.scroll-btn-right {
    right: 0;
    border-top-left-radius: 12px;
    border-bottom-left-radius: 12px;
    background: linear-gradient(to left, rgba(0,0,0,0.9), transparent);
}

/* Hover effects for the buttons themselves */
.scroll-btn:hover {
    background: rgba(13, 202, 240, 0.2); /* Cyan Glow */
    color: #fff;
    box-shadow: 0 0 15px rgba(13, 202, 240, 0.3);
}

/* Hide button if disabled (at start/end of list) */
.scroll-btn.hidden {
    opacity: 0 !important;
    pointer-events: none;
}

/* 4. Video Cards */
.video-card {
    background: rgba(25, 30, 35, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.video-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(13, 202, 240, 0.2);
    border-color: #0dcaf0;
}

.video-card .ratio {
    position: relative;
    width: 100%;
    background-color: #000;
}

.video-card .ratio iframe {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border: none !important;
    object-fit: cover !important;
}

.carousel-item-short {
    width: 200px;
    flex-shrink: 0;
    scroll-snap-align: start; /* Locks the item to the grid */
}

.ratio-9x16 { --bs-aspect-ratio: 177.78%; }
.video-hidden { display: none !important; }

/* Make project cards feel interactive */
.project-card-hover {
    transition: transform 0.2s, box-shadow 0.2s;
}
.project-card-hover:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0, 255, 136, 0.2);
    border-color: rgba(0, 255, 136, 0.4);
}