styles.css

/* styles.css */
#ai-nav-bar {
    position: fixed;
    top: 60px;       /* Assuming Gemini header is 60px */
    right: 0px;      /* Flush to the right edge */
    width: 250px; /* Adjust width as needed */
    height: calc(100vh - 60px); /* Full viewport height below the header */
    overflow-y: auto;
    background-color: #202124; /* Dark, neutral background */
    border: none; /* Reset existing border */
    border-left: 1px solid #4a4a4a; /* New border for sidebar look */
    border-radius: 0; /* Sharp corners for a column */
    padding: 10px;
    z-index: 999;     /* High enough, but allows for main content adjustment */
    box-shadow: -2px 0 5px rgba(0,0,0,0.1); /* Shadow on the left side */
    font-family: 'Google Sans', Roboto, Arial, sans-serif; /* Match Gemini's font if possible */
    transition: width 0.3s ease-in-out, padding 0.3s ease-in-out; /* For smooth collapse */
}

#ai-nav-bar h3 {
    display: flex; /* To align title and button */
    justify-content: space-between; /* Pushes button to the right */
    align-items: center;
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 16px;
    color: #e8eaed; /* Light text for dark theme */
    border-bottom: 1px solid #3c4043;
    padding-bottom: 5px;
}

/* Header buttons container */
.header-buttons {
    display: flex;
    gap: 4px;
    align-items: center;
}

/* Header Control Buttons */
#ai-nav-refresh-btn,
#ai-nav-focus-mode-btn {
    background: none;
    border: none;
    color: #bdc1c6;
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease-in-out;
    flex-shrink: 0; /* Prevent button from shrinking */
}

#ai-nav-refresh-btn:hover:not(:disabled),
#ai-nav-focus-mode-btn:hover {
    background-color: #3c4043;
    color: #e8eaed;
}

#ai-nav-refresh-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

#ai-nav-refresh-btn.loading svg {
    animation: refresh-spin 1s linear infinite;
}

/* Focus Mode Button Active State */
#ai-nav-focus-mode-btn.active {
    background-color: #8ab4f8;
    color: #202124;
}

#ai-nav-focus-mode-btn.active:hover {
    background-color: #a8c7fa;
    color: #202124;
}

@keyframes refresh-spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* Search Container */
.search-container {
    position: relative;
    margin-bottom: 15px;
}

.search-input {
    width: 100%;
    padding: 8px 30px 8px 12px;
    background-color: #3c4043;
    border: 1px solid #5f6368;
    border-radius: 20px;
    color: #e8eaed;
    font-size: 13px;
    font-family: inherit;
    outline: none;
    transition: border-color 0.2s ease-in-out, background-color 0.2s ease-in-out;
}

.search-input:focus {
    border-color: #8ab4f8;
    background-color: #282a2d;
}

.search-input::placeholder {
    color: #9aa0a6;
}

.search-clear {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    background-color: #5f6368;
    color: #e8eaed;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 12px;
    line-height: 1;
    transition: background-color 0.2s ease-in-out;
}

.search-clear:hover {
    background-color: #9aa0a6;
}

.nav-item {
    padding: 8px 10px;
    margin-bottom: 6px;
    cursor: pointer;
    border-radius: 6px;
    font-size: 13px;
    line-height: 1.4;
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    border: 1px solid transparent; /* For hover/active state */
}

.nav-item:hover {
    background-color: #3c4043; /* Darker gray on hover */
    border-color: #5f6368;
}

.nav-item.query {
    background-color: #282a2d; /* Darker background for queries */
    color: #e8eaed; /* Lighter text for queries */
    border-left: 3px solid #8ab4f8; /* Lighter blue left border for queries */
}

.nav-item.response {
    background-color: #2f3134; /* Dark background for responses */
    color: #bdc1c6; /* Lighter grey text for responses */
    border-left: 3px solid #81c995; /* Lighter green left border for responses */
    margin-bottom: 12px; /* Add more space after responses */
}

.nav-item.active {
    background-color: #8ab4f8;
    color: #202124;
    font-weight: 500;
}

/* Keyboard navigation highlight */
.nav-item.nav-item-highlighted {
    background-color: #3c4043;
    border: 2px solid #8ab4f8;
    box-shadow: 0 0 8px rgba(138, 180, 248, 0.3);
    transform: translateX(2px);
    transition: all 0.2s ease-in-out;
}

.nav-item.nav-item-highlighted:hover {
    background-color: #3c4043; /* Maintain highlight background on hover */
}

/* Ensure highlighted state takes precedence over active state */
.nav-item.nav-item-highlighted.active {
    background-color: #5a7db8; /* Darker blue blend for both highlighted and active */
    color: #e8eaed;
    border-color: #8ab4f8;
}

/* Scrollbar styling for webkit browsers */
#ai-nav-bar::-webkit-scrollbar {
    width: 8px;
}

#ai-nav-bar::-webkit-scrollbar-track {
    background: #202124;
    border-radius: 8px;
}

#ai-nav-bar::-webkit-scrollbar-thumb {
    background: #5f6368;
    border-radius: 8px;
}

#ai-nav-bar::-webkit-scrollbar-thumb:hover {
    background: #9aa0a6;
}

/* Collapse Button (within Navbar) */
#ai-nav-collapse-btn {
    cursor: pointer;
    font-size: 20px;
    padding: 0 5px;
    margin-left: 10px;
    line-height: 1;
    color: #bdc1c6; /* Light grey to match other text */
    transition: color 0.2s ease-in-out;
}

#ai-nav-collapse-btn:hover {
    color: #e8eaed; /* Brighter on hover */
}

/* Expand Button (Fixed to edge) */
#ai-nav-expand-btn {
    position: fixed;
    top: 70px; /* Align with where navbar top would be */
    right: 10px;
    z-index: 1000; /* Above everything when navbar is collapsed */
    background-color: #2f3134; /* Dark background */
    color: #e8eaed; /* Light text */
    border: 1px solid #5f6368;
    border-radius: 50%; /* Circular button */
    width: 36px;
    height: 36px;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    display: none; /* Hidden by default */
    transition: background-color 0.2s ease-in-out;
}

#ai-nav-expand-btn:hover {
    background-color: #3c4043;
}

/* Styles for when the navbar is collapsed */
#ai-nav-bar.collapsed {
    width: 0;
    padding-left: 0;
    padding-right: 0;
    overflow: hidden;
    border-left: none;
}

#ai-nav-bar.collapsed h3,
#ai-nav-bar.collapsed .search-container,
#ai-nav-bar.collapsed .nav-item,
#ai-nav-bar.collapsed::-webkit-scrollbar {
    display: none; /* Hide content when collapsed */
}

/* Show expand button when navbar is collapsed */
body.ai-nav-collapsed #ai-nav-expand-btn {
    display: block;
}

/* Initial glow animation for expand button */
@keyframes gentle-glow {
    0%, 100% {
        box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    }
    50% {
        box-shadow: 0 0 20px rgba(138, 180, 248, 0.6), 0 0 30px rgba(138, 180, 248, 0.4);
    }
}

#ai-nav-expand-btn.initial-glow {
    animation: gentle-glow 2s ease-in-out 3;
    animation-delay: 0.5s;
}

/* Loading state styles */
.nav-loading-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    text-align: center;
}

.nav-loading-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid #3c4043;
    border-top: 3px solid #8ab4f8;
    border-radius: 50%;
    animation: nav-loading-spin 1s linear infinite;
    margin-bottom: 12px;
}

.nav-loading-text {
    color: #9aa0a6;
    font-size: 13px;
    line-height: 1.4;
}

@keyframes nav-loading-spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* Placeholder item styles (for virtual scrolling) */
.nav-item.placeholder {
    opacity: 0.6;
    font-style: italic;
    border-left-color: #5f6368 !important; /* Dimmed border */
}

.nav-item.placeholder::after {
    content: " (scroll to view)";
    font-size: 11px;
    color: #5f6368;
    font-style: normal;
}
/* === tweak the clear-button size & centering === */
.search-input {
    /* increase right-side padding so text doesn’t overlap the larger “x” */
    padding: 8px 36px 8px 12px;          /* was 30px */
}

.search-clear {
    /* bigger, perfectly centred circle */
    width: 24px;                         /* was 18px */
    height: 24px;                        /* was 18px */
    font-size: 18px;                     /* was 12px – ensures the “×” fills the circle */
    line-height: 24px;                   /* match height for perfect vertical centering */
    font-weight: bold;                   /* make × more prominent */
    text-align: center;                  /* ensure horizontal centering */
}