stylesheet.css

/* =====================================================================
 * 1. BASE STYLES (Light Mode)
 * ===================================================================== */

.spotlight-container {
    width: 600px;
    border-radius: 30px; /* Reverted to your exact design specification */

    /* UX MINIMALISM: Tightened the outer bounds significantly */
    padding: 6px 12px;

    background-color: rgba(250, 250, 250, 0.90);
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0px 16px 32px rgba(0, 0, 0, 0.08);
}

.spotlight-input-row {
    /* UX MINIMALISM: Pushes the magnifying glass right up against the text */
    spacing: 6px;
}

.spotlight-icon {
    icon-size: 24px;
    color: rgba(0, 0, 0, 0.5);
}

.spotlight-entry {
    color: rgba(0, 0, 0, 0.9);
    font-family: "Inter", "Ubuntu", "Cantarell", sans-serif;
    font-size: 22pt;
    font-weight: 300;
    caret-color: #007aff;
    caret-size: 2px;
}

.spotlight-entry, .spotlight-entry:focus {
    background-color: transparent;
    border: none;
    box-shadow: none;
}

.spotlight-entry:selected {
    background-color: rgba(0, 122, 255, 0.2);
    color: black;
}

/* =====================================================================
 * 2. RESULTS AREA (Layout & Rows)
 * ===================================================================== */

.spotlight-results-box {
    spacing: 2px;
    /* UX MINIMALISM: Minimal internal gap before the results start */
    padding: 4px;
}

.spotlight-result-row {
    border-radius: 12px;

    /* UX MINIMALISM: Shaved down to the absolute minimum needed so text doesn't hit the edges */
    padding: 6px 10px;

    background-color: transparent;
    border: 1px solid transparent;
    transition: none;
}

/* Hover effects completely removed per your request */

.spotlight-result-row.selected {
    /* A soft, borderless black overlay */
    background-color: rgba(0, 0, 0, 0.08);
    border: 1px solid transparent; /* Keep transparent to prevent layout shifting */
}

.spotlight-result-row.inactive-selection {
    background-color: rgba(0, 0, 0, 0.04);
    border: 1px solid transparent;
}

.spotlight-result-icon {
    /* UX MINIMALISM: Tighter spacing between icon and text in the list */
    margin-right: 10px;
}

.spotlight-result-label {
    font-size: 14px;
    font-weight: 400;
}

/* --- Prominent Answer Style --- */
.spotlight-result-row.answer {
    /* UX MINIMALISM: Reduced vertical padding, but kept enough to signify importance */
    padding: 12px 10px;
}

.spotlight-result-row.answer .spotlight-result-label {
    font-size: 22pt;
    font-weight: 500;
    color: #007aff;
}

.spotlight-result-row.answer .spotlight-result-icon {
    icon-size: 32px;
}

/* =====================================================================
 * 3. DARK MODE OVERRIDES
 * ===================================================================== */

.dark-mode.spotlight-container {
    background-color: rgba(30, 30, 30, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0px 24px 48px rgba(0, 0, 0, 0.4);
}

.dark-mode .spotlight-icon {
    color: rgba(255, 255, 255, 0.6);
}

.dark-mode .spotlight-entry {
    color: rgba(255, 255, 255, 0.95);
}

.dark-mode .spotlight-entry:selected {
    background-color: rgba(0, 122, 255, 0.4);
    color: white;
}

.dark-mode .spotlight-result-row.inactive-selection {
    background-color: rgba(255, 255, 255, 0.06);
    border: 1px solid transparent;
}

.dark-mode .spotlight-result-row.selected {
    /* A soft, borderless white overlay */
    background-color: rgba(255, 255, 255, 0.12);
    border: 1px solid transparent;
}

.dark-mode .spotlight-result-row.answer .spotlight-result-label {
    color: #58a6ff;
}

/* =====================================================================
 * 4. WEATHER CARD
 * ===================================================================== */

.spotlight-result-row.weather-card {
    padding: 12px 10px;
}

.weather-card-icon {
    icon-size: 40px;
    margin-right: 12px;
}

.weather-temp {
    font-size: 28pt;
    font-weight: 300;
    margin-right: 14px;
}

.weather-desc {
    font-size: 14px;
    font-weight: 500;
}

.weather-city {
    font-size: 12px;
    color: rgba(0, 0, 0, 0.5);
}

.weather-details {
    font-size: 12px;
    color: rgba(0, 0, 0, 0.5);
    margin-top: 8px;
}

.dark-mode .weather-city,
.dark-mode .weather-details {
    color: rgba(255, 255, 255, 0.45);
}

/* =====================================================================
 * 5. SCROLLBAR REFINEMENTS
 * ===================================================================== */

/* The invisible track the scrollbar slides on */
.spotlight-results-scroll StScrollBar {
    /* UX MINIMALISM: Pull the track away from the rounded corners */
    margin-right: 8px;   /* Keep it off the right wall */
    margin-top: 4px;     /* Keep it off the search bar divider */
    margin-bottom: 24px; /* Crucial: Stops the bar before it hits the bottom 38px curve! */
}

/* The actual draggable pill (Light Mode) */
.spotlight-results-scroll StScrollBar .v-handle {
    background-color: rgba(0, 0, 0, 0.2); /* Soft transparent black */
    border-radius: 6px; /* Full pill shape */
    min-width: 6px;     /* Thin, sleek width */
    border: none;       /* Strip default GNOME chunky borders */
}

/* The draggable pill (Dark Mode) */
.dark-mode .spotlight-results-scroll StScrollBar .v-handle {
    background-color: rgba(255, 255, 255, 0.25); /* Soft transparent white */
}