:root {
    --bg-color: #ffffff;
    --sidebar-bg: #f8fafc;
    --card-bg: #ffffff;
    --primary: #0f172a;
    --primary-hover: #1e293b;
    --text-main: #0f172a;
    --text-muted: #64748b;
    --border-color: #e2e8f0;
    --glass-border: 1px solid rgba(0, 0, 0, 0.05);
}

.mobile-only {
    display: none !important;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Outfit', sans-serif;
}

body {
    background-color: var(--bg-color);
    color: var(--text-main);
    height: 100vh;
    overflow: hidden;
    background-image: none;
}

.app-container {
    display: flex;
    width: 100%;
    height: 100vh;
}

.main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: var(--bg-color);
    overflow-y: auto;
}

/* Topbar and search tabs are pinned together: the tabs are how you switch
   between Search / Agent / Alerts, so they have to stay reachable no matter
   how far the results have been scrolled. .main-content is the scroll
   container, and this is its first child. */
.app-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    flex-shrink: 0;
    background: #ffffff;
}

.topbar {
    /* Kept deliberately shallow: this row and the tabs below it are pinned, so
       every pixel here is a pixel of results that never shows. */
    min-height: 0;
    height: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 2rem;
    gap: 20px;
    background: #ffffff;
    flex-shrink: 0;
    /* Static, not sticky: nested inside the sticky .app-header it would pin
       to that wrapper rather than to the viewport, and the tabs below it
       would scroll away again. */
    position: static;
}

.topbar-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
}

.topbar-brand img {
    height: 48px;
    width: 48px;
    border-radius: 50%;
    object-fit: cover;
}

.topbar-brand span {
    font-weight: 700;
    font-size: 1.5rem;
    letter-spacing: 0.5px;
    color: var(--text-main);
}

.notifications i {
    font-size: 1.2rem;
    color: var(--text-muted);
    cursor: pointer;
}

.topbar-profile {
    cursor: pointer;
    transition: transform 0.2s;
    display: flex;
}

.topbar-profile:hover {
    transform: scale(1.05);
}

.user-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

.avatar {
    width: 35px;
    height: 35px;
    background: var(--primary);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 600;
}

::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.1);
    border-radius: 3px;
    transition: background 0.2s;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.3);
}

.content-area {
    flex: 1;
    padding: 2rem;
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: padding 0.3s ease;
}

.chat-container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding-top: 0;
    padding-bottom: 50px;
    width: 100%;
    max-width: 1600px;
}

.search-interface {
    position: fixed;
    top: 90px;
    bottom: auto;
    left: 50%;
    transform: translateX(-50%);
    max-width: 700px;
    width: 90%;
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding: 10px;
    z-index: 1000;
    transition: all 0.3s ease;
    background: rgba(15, 23, 42, 0.4);
    backdrop-filter: blur(20px);
    border-radius: 20px;
    border: var(--glass-border);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
}

.controls-area {
    display: flex;
    gap: 10px;
    justify-content: center;
}

.input-wrapper {
    position: relative;
    background: transparent;
    border-radius: 16px;
    display: flex;
    gap: 10px;
    padding: 5px;
}

.chat-input {
    flex: 1;
    background: transparent;
    border: none;
    padding: 12px;
    color: var(--text-main);
    font-size: 1rem;
    outline: none;
    resize: none;
    min-height: 48px;
    max-height: 200px;
    line-height: 1.5;
}

.chat-input[readonly] {
    background: rgba(0, 0, 0, 0.02);
    color: var(--text-muted);
    cursor: default;
    font-style: italic;
    border: 1px solid transparent;
    height: 48px !important;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    padding-right: 10px;
}

.message.user {
    display: none !important;
}

.controls-area {
    display: flex;
    gap: 10px;
}

.toggle-btn {
    background: rgba(0, 0, 0, 0.05);
    border: var(--glass-border);
    color: var(--text-muted);
    padding: 7px 14px;
    border-radius: 20px;
    cursor: pointer;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s;
    transform: none !important;
}

.toggle-btn:hover {
    background: rgba(0, 0, 0, 0.1);
}

.toggle-btn.active {
    background: rgba(139, 92, 246, 0.2);
    color: var(--primary);
    border-color: var(--primary);
    box-shadow: 0 0 10px rgba(139, 92, 246, 0.1);
    transform: none !important;
}


.send-btn {
    background: var(--primary);
    border: none;
    width: 45px;
    height: 45px;
    border-radius: 10px;
    color: white;
    cursor: pointer;
    transition: background 0.2s;
}

.send-btn:hover {
    background: var(--primary-hover);
}

.toggle-btn-icon {
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 1.5rem;
    cursor: pointer;
    padding: 8px;
    border-radius: 8px;
    transition: background 0.2s;
}

.toggle-btn-icon:hover {
    background: rgba(0, 0, 0, 0.05);
    color: var(--text-main);
}

/* Reasoning Block (Initial Thinking State) */
.reasoning-block {
    text-align: center;
    width: 100%;
    margin: 10px 0;
}


.reasoning-container {
    background: #f8fafc;
    border-radius: 12px;
    padding: 0.75rem 1.25rem;
    font-size: 0.9rem;
    border: 1px solid #e2e8f0;
    border-left: 3px solid var(--primary);
    width: fit-content;
    max-width: 100%;
    margin: 0 auto 10px auto;
    /* Moved higher as requested */
}

.reasoning-step {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 5px;
    color: var(--text-muted);
    opacity: 0;
    animation: slideIn 0.3s forwards;
}

.reasoning-step::before {
    content: '';
    width: 6px;
    height: 6px;
    background: var(--primary);
    border-radius: 50%;
}

.reasoning-header {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 5px;
    user-select: none;
}

.reasoning-header .toggle-icon {
    font-size: 0.8rem;
    transition: transform 0.3s;
}

.reasoning-content {
    display: none;
    margin-top: 10px;
    padding-left: 10px;
    border-left: 1px solid rgba(0, 0, 0, 0.1);
}

.reasoning-content.show {
    display: block !important;
    animation: fadeIn 0.3s ease;
}

.reasoning-header:has(+ .reasoning-content.show) .toggle-icon {
    transform: rotate(180deg);
}

.products-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-top: 1.5rem;
    width: 100%;
}

@media (min-width: 769px) {
    .products-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 1.5rem;
    }
}

@media (min-width: 1200px) {
    .products-grid {
        grid-template-columns: repeat(6, 1fr);
        max-width: 100%;
    }
}

@media (min-width: 769px) {
    .product-card {
        flex: none;
        width: 100%;
    }
}

.product-card-link {
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.product-card {
    background: rgba(0, 0, 0, 0.05);
    border-radius: 12px;
    overflow: hidden;
    transition: transform 0.3s;
    border: var(--glass-border);
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
}

.product-card:hover {
    transform: translateY(-5px);
    background: rgba(0, 0, 0, 0.08);
}

.product-img {
    height: 140px;
    min-height: 140px;
    background: #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    overflow: hidden;
}

.product-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 10px;
}

.product-info {
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.product-title {
    font-weight: 600;
    margin-bottom: 8px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 0.95rem;
    line-height: 1.4;
    height: 2.8rem;
}

.product-price-container {
    margin-bottom: 8px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.product-price-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.product-old-price {
    text-decoration: line-through;
    color: var(--text-muted);
    font-size: 0.8rem;
}

.product-discount-tag {
    background: #fee2e2;
    color: #ef4444;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 700;
}

.product-price {
    color: #10b981;
    font-weight: 700;
    font-size: 1.15rem;
}

.product-rating {
    margin-top: auto;
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 4px;
}

.rating-count {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.product-who-by {
    font-size: 0.8rem;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 5px;
}

/* Animations */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateX(-10px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Login/Register Pages */
/* The app shell sets `body { height: 100vh; overflow: hidden }` so the chat
   view can own its own scrolling. On the auth pages that combination clipped
   the card on short laptop screens with no way to scroll to the rest of it,
   so those pages opt out. */
body.auth-page {
    height: auto;
    min-height: 100vh;
    overflow-y: auto;
}

.auth-container {
    display: flex;
    justify-content: center;
    align-items: center;
    /* min-height, not height: the card is free to be taller than the viewport
       (extra fields, validation errors, a flash message) and the page scrolls. */
    min-height: 100vh;
    padding: 2.5rem 1rem;
}

.auth-box {
    background: var(--sidebar-bg);
    padding: 2.5rem;
    border-radius: 16px;
    width: 100%;
    max-width: 400px;
    text-align: center;
    border: var(--glass-border);
}

.auth-field {
    /* Wider than the gap between a field and its own error, so each message
       reads as belonging to the field above it. */
    margin-bottom: 1rem;
    text-align: left;
}

/* The wrapper owns the spacing, so the input must not add its own on top.
   Qualified with .auth-form so it outranks `.auth-form input` regardless of
   which rule the file happens to list first. */
.auth-form .auth-field input {
    margin-bottom: 0;
}

.auth-field-errors {
    margin-top: 6px;
    color: #b91c1c;
    font-size: 0.8rem;
    line-height: 1.35;
}

.auth-field-errors ul {
    margin: 0;
    padding-left: 1.1rem;
}

/* Present for screen readers and the `for`/`id` pairing, invisible on screen —
   the placeholder carries the label. */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.auth-box h2 {
    margin-bottom: 1.5rem;
}

/* Feedback from the Google sign-in flow lands here: the adapter redirects to
   this page with a message rather than letting the error page through. */
.auth-messages {
    list-style: none;
    margin: 0 0 1.25rem;
    padding: 0;
    text-align: left;
}

.auth-message {
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 0.88rem;
    line-height: 1.4;
    border: 1px solid transparent;
}

.auth-message + .auth-message {
    margin-top: 8px;
}

.auth-message.error {
    background: #fef2f2;
    border-color: #fecaca;
    color: #b91c1c;
}

.auth-message.success {
    background: #f0fdf4;
    border-color: #bbf7d0;
    color: #15803d;
}

.auth-message.info,
.auth-message.warning,
.auth-message.debug {
    background: #f1f5f9;
    border-color: #e2e8f0;
    color: var(--text-main);
}

/* The rules either side of the "or" label. */
.auth-divider {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 1.5rem 0;
}

.auth-divider::before,
.auth-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--border-color);
}

.auth-divider span {
    color: var(--text-muted);
    font-size: 0.9rem;
}

.auth-form input {
    /* block, not the default inline-block: an inline input sits on a text line
       and drags a descender gap along under it, which makes the space between
       a field and its error message unpredictable. */
    display: block;
    width: 100%;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    padding: 12px;
    border-radius: 8px;
    color: var(--text-main);
    margin-bottom: 1rem;
    outline: none;
}

.auth-form button {
    width: 100%;
    padding: 12px;
    background: var(--primary);
    border: none;
    border-radius: 8px;
    color: white;
    font-weight: 600;
    cursor: pointer;
}

.google-login-btn {
    width: 100%;
    padding: 12px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    color: var(--text-main);
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.google-login-btn:hover {
    background: rgba(0, 0, 0, 0.1);
    border-color: rgba(0, 0, 0, 0.2);
    transform: translateY(-2px);
}

.google-login-btn i {
    font-size: 1.1rem;
}

/* Mobile Responsiveness */


/* Show desktop toggle on desktop */
@media (min-width: 769px) {
    #sidebar-toggle-btn {
        display: flex !important;
    }
}

.desktop-toggle {
    margin-right: auto;
    /* Push to left */
}

/* Custom Modals */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(5px);
    z-index: 10000;
    /* Much higher than search interface (2000) */
    display: none;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.3s;
}

.modal-overlay.active {
    display: flex !important;
    opacity: 1;
}

.modal-box {
    position: relative;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    padding: 2rem;
    border-radius: 16px;
    width: 90%;
    max-width: 400px;
    text-align: center;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    transform: scale(0.9);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.settings-close-top {
    position: absolute;
    top: 15px;
    right: 15px;
    background: transparent;
    border: none;
    font-size: 1.25rem;
    color: #ef4444;
    cursor: pointer;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s;
    z-index: 20;
}

.settings-close-top:hover {
    background: rgba(239, 68, 68, 0.1);
    transform: scale(1.1);
}

.modal-overlay.active .modal-box {
    transform: scale(1);
}

.modal-box h3 {
    margin-bottom: 1rem;
    color: var(--text-main);
}

.modal-box p {
    color: var(--text-muted);
    margin-bottom: 1.5rem;
}

.modal-box input {
    width: 100%;
    background: #f1f5f9;
    border: 1px solid rgba(0, 0, 0, 0.1);
    padding: 12px;
    border-radius: 8px;
    color: var(--text-main);
    margin-bottom: 1.5rem;
    outline: none;
    font-size: 1rem;
}

.modal-box input:focus {
    border-color: var(--primary);
}

.modal-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
}

.modal-actions button {
    padding: 10px 20px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    font-weight: 500;
    transition: all 0.2s;
}

.btn-cancel {
    background: transparent;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    color: var(--text-muted);
}

.btn-cancel:hover {
    background: rgba(0, 0, 0, 0.05);
    color: var(--text-main);
}

.btn-confirm {
    background: var(--primary);
    color: white;
}

.btn-confirm:hover {
    background: var(--primary-hover);
}

.btn-danger {
    background: #ef4444;
    color: white;
}

.btn-danger:hover {
    background: #dc2626;
}

/* Filter Modal Specifics */
.filter-modal {
    max-width: 500px;
    width: 95%;
    text-align: left;
}

.filter-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-bottom: 20px;
}

.filter-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.filter-group label {
    font-size: 0.85rem;
    color: var(--text-muted);
    font-weight: 500;
}

.range-inputs {
    display: flex;
    gap: 10px;
}

.filter-modal input,
.filter-modal select {
    background: #f1f5f9;
    border: 1px solid rgba(0, 0, 0, 0.1);
    padding: 10px;
    border-radius: 8px;
    color: var(--text-main);
    outline: none;
    width: 100%;
    margin-bottom: 0;
}

.filter-modal input:focus,
.filter-modal select:focus {
    border-color: var(--primary);
    background: rgba(0, 0, 0, 0.08);
}

.filter-modal select option {
    background: #ffffff;
    color: var(--text-main);
}

/* Full width for some fields if needed, or make it responsive */
/* Full width for some fields if needed, or make it responsive */




/* Base style for mobile button (hidden on desktop) */
.mobile-menu-btn {
    display: none;
    cursor: pointer;
}

/* =========================================
   MOBILE REDESIGN (max-width: 768px)
   ========================================= */

/* Base hidden for desktop */
.mobile-menu-btn {
    display: none;
}

@media (max-width: 768px) {
    .mobile-only {
        display: block !important;
    }

    /* 1. Sidebar Drawer */
    .sidebar {
        position: fixed;
        left: -320px;
        /* Fully hidden */
        top: 0;
        bottom: 0;
        width: 280px;
        z-index: 3000;
        transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        background: rgba(15, 23, 42, 0.95);
        /* More solid background */
        border-right: 1px solid rgba(0, 0, 0, 0.1);
    }

    .sidebar.open {
        left: 0;
        width: 280px !important;
        /* Force expansion */
        padding: 1.5rem !important;
        box-shadow: 10px 0 30px rgba(0, 0, 0, 0.5);
    }

    /* Hide internal toggle on mobile */
    .sidebar-header .menu-toggle-btn {
        display: none;
    }

    /* Overlay */
    /* Note: .sidebar-overlay is already in global CSS but hidden.
       In mobile query we ensure it works as expected. */
    .sidebar-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.6);
        backdrop-filter: blur(4px);
        z-index: 2900;
        opacity: 0;
        transition: opacity 0.3s;
    }

    .sidebar-overlay.active {
        display: block;
        opacity: 1;
    }

    .mobile-menu-btn {
        display: flex;
        /* Show hamburger */
        align-items: center;
        justify-content: center;
        font-size: 1.4rem;
        color: var(--text-main);
        cursor: pointer;
        padding: 8px;
        z-index: 20;
        /* Ensure clickable */
    }

    /* 4. Input Area (Search Interface) */
    .search-interface {
        position: fixed;
        bottom: 0;
        top: auto;
        /* Reset top */
        left: 0;
        transform: none;
        width: 100%;
        max-width: 100%;
        border-radius: 20px 20px 0 0;
        background: #ffffff;
        border: none;
        border-top: 1px solid #e2e8f0;
        padding: 15px;
        gap: 12px;
        z-index: 500;
        display: flex;
        flex-direction: column;
        box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.05);
    }

    /* Hide sidebar collapsed search adjustment */
    .sidebar.collapsed+.main-content .search-interface {
        left: 0;
    }

    .input-wrapper {
        background: rgba(0, 0, 0, 0.05);
        border: 1px solid rgba(0, 0, 0, 0.1);
        padding: 4px 8px;
        border-radius: 12px;
    }

    .chat-input {
        min-height: 48px;
        max-height: 100px;
        /* Limit height mobile */
        font-size: 16px;
        /* Prevent zoom on iOS */
    }

    /* Controls Scroll */
    .controls-area {
        justify-content: flex-start;
        overflow-x: auto;
        padding-bottom: 8px;
        column-gap: 8px;
        /* Hide scrollbar */
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .controls-area::-webkit-scrollbar {
        display: none;
    }

    .toggle-btn {
        flex-shrink: 0;
        font-size: 0.85rem;
        padding: 8px 14px;
        background: rgba(0, 0, 0, 0.08);
        /* Slightly more visible */
    }

    .reasoning-container {
        padding: 10px;
        margin-top: -10px !important;
        /* Pull text higher */
    }

    /* Workbench on Mobile - Full Screen + High Z-Index */
    .workbench-panel {
        width: 100% !important;
        height: calc(100vh - 70px) !important;
        top: 70px !important;
        right: 0 !important;
        transform: translateX(100%) !important;
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
        z-index: 5000 !important;
        /* Above search interface (500) */
        border-left: none !important;
        border-top: 1px solid rgba(0, 0, 0, 0.1) !important;
        /* Kept visible rather than toggled with display, so the open/close
           transform can animate. */
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    .workbench-panel.open {
        transform: translateX(0) !important;
    }

    /* Hide desktop-specifics */
    #sidebar-toggle-btn {
        display: none !important;
    }
}

/* Mobile Refinements Round 3 */
.mobile-plus-btn {
    display: none;
}

@media (max-width: 768px) {

    /* 1. Search Interface & Input area adjustments */
    .search-interface {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        max-width: 100%;
        background: #0f172a;
        border-top: 1px solid rgba(0, 0, 0, 0.1);
        padding: 12px;
        display: flex;
        flex-direction: column;
        gap: 8px;
        z-index: 2000;
        /* High enough to be over everything but sidebar */
        transform: none;
    }

    .input-wrapper {
        position: relative;
        /* For absolute popover placement */
        display: flex;
        align-items: center;
        gap: 10px;
        width: 100%;
    }

    .mobile-plus-btn {
        display: flex;
        background: rgba(0, 0, 0, 0.1);
        border: none;
        color: var(--text-main);
        width: 48px;
        height: 48px;
        border-radius: 50%;
        align-items: center;
        justify-content: center;
        font-size: 1.5rem;
        cursor: pointer;
        transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        flex-shrink: 0;
    }

    .mobile-plus-btn.active {
        color: var(--bg-color);
        background: var(--text-main);
        transform: rotate(45deg);
    }

    /* 2. Floating Popover Menu (Above Input) */
    .mobile-actions-popover {
        position: absolute;
        bottom: calc(100% + 15px);
        left: 0;
        width: 220px;
        background: #1e293b;
        border: var(--glass-border);
        border-radius: 16px;
        padding: 8px;
        display: none;
        flex-direction: column;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
        animation: slideUpFadeIn 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
        z-index: 2100;
    }

    .mobile-actions-popover.show {
        display: flex !important;
        animation: slideUpFadeIn 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
    }

    .popover-item {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 12px 16px;
        color: var(--text-main);
        font-size: 0.95rem;
        border-radius: 10px;
        cursor: pointer;
        transition: background 0.2s;
    }

    .popover-item:active {
        background: rgba(0, 0, 0, 0.08);
    }

    .popover-item i {
        width: 20px;
        text-align: center;
        color: var(--primary);
    }

    /* 3. Active Toggles Tag Container (Below Input) */
    .active-toggles-mobile {
        display: flex;
        flex-wrap: nowrap;
        /* Single row */
        overflow-x: auto;
        /* Horizontal scroll */
        gap: 8px;
        padding: 4px 0;
        margin-bottom: 8px;
        scrollbar-width: none;
        -ms-overflow-style: none;
        width: 100%;
    }

    .active-toggles-mobile::-webkit-scrollbar {
        display: none;
    }

    .active-tag {
        display: inline-flex;
        align-items: center;
        background: rgba(139, 92, 246, 0.2);
        color: var(--text-main);
        border: 1px solid rgba(139, 92, 246, 0.4);
        padding: 5px 10px;
        border-radius: 14px;
        font-size: 0.8rem;
        gap: 6px;
        flex-shrink: 0;
        white-space: nowrap;
        animation: fadeInScale 0.2s ease forwards;
        cursor: pointer;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    }

    .active-tag i:first-child {
        color: var(--primary);
        font-size: 0.75rem;
    }

    .active-tag i.fa-xmark {
        font-size: 0.7rem;
        color: var(--text-muted);
        opacity: 0.7;
    }

    /* UI Polishing */
    .controls-area {
        display: none;
    }
}

/* Auth page mobile rules now live in mobile_responsive.css, which login.html
   and register.html load alongside this file. */

/* Right Controls (Desktop Only) */
.right-controls {
    display: flex;
    align-items: center;
    gap: 15px;
    flex: 1;
    justify-content: flex-end;
}

.icon-btn {
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 1.4rem;
    cursor: pointer;
    padding: 8px;
    border-radius: 8px;
    transition: all 0.2s;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
}

.icon-btn:hover,
.icon-btn.active {
    background: rgba(0, 0, 0, 0.1);
    color: var(--text-main);
}

.notification-dot {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 8px;
    height: 8px;
    background: #ef4444;
    border-radius: 50%;
    border: 1px solid var(--bg-color);
}

/* Workbench Panel */
.workbench-panel {
    position: fixed;
    top: 70px;
    /* Below Topbar initial position */
    right: 0;
    width: 400px;
    /* Default width */
    height: calc(100vh - 70px);
    background: var(--sidebar-bg);
    /* Use sidebar background for consistency */
    backdrop-filter: blur(15px);
    border-left: var(--glass-border);
    transform: translateX(100%);
    /* Hidden by default */
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), width 0.3s ease;
    z-index: 90;
    /* below overlay but above content */
    display: flex;
    flex-direction: column;
}

.workbench-panel.open {
    transform: translateX(0);
    box-shadow: -5px 0 20px rgba(0, 0, 0, 0.3);
}

.workbench-panel.maximized {
    width: 80%;
    /* Takes up most of the screen */
}

.workbench-header {
    padding: 1rem 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: var(--glass-border);
    height: 60px;
}

.workbench-header h3 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-main);
    display: flex;
    align-items: center;
    gap: 10px;
}

.workbench-actions {
    display: flex;
    gap: 5px;
}

.workbench-actions button {
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 6px;
    border-radius: 6px;
    transition: all 0.2s;
}

.workbench-actions button:hover {
    background: rgba(0, 0, 0, 0.1);
    color: var(--text-main);
}

.workbench-content {
    flex: 1;
    overflow-y: auto;
    padding: 1.5rem;
}

/* Workbench Content Styles */
.empty-state {
    text-align: center;
    color: var(--text-muted);
    padding: 3rem 1rem;
}

.notification-item {
    background: rgba(0, 0, 0, 0.03);
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 12px;
    padding: 1rem;
    margin-bottom: 1rem;
    display: flex;
    gap: 15px;
    transition: background 0.2s;
}

.notification-item:hover {
    background: rgba(0, 0, 0, 0.06);
}

.notification-item.unread {
    border-left: 3px solid var(--primary);
    background: rgba(139, 92, 246, 0.05);
    /* Slight tint */
}

.notif-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.1);
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--text-main);
}

.notif-text {
    flex: 1;
}

.notif-text strong {
    display: block;
    margin-bottom: 4px;
    color: var(--text-main);
    font-size: 0.95rem;
}

.notif-text p {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-bottom: 6px;
    line-height: 1.4;
}

.notif-text .time {
    font-size: 0.75rem;
    color: var(--text-muted);
    opacity: 0.7;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .mobile-hidden {
        display: none !important;
    }

    .maximize-btn {
        display: none !important;
    }

    .close-workbench-btn {
        font-size: 1.5rem !important;
    }

    .close-workbench-btn i {
        font-size: 1.5rem !important;
    }

}

/* Interaction between Workbench and Search Interface */
.workbench-panel {
    z-index: 1100;
    /* Higher than search interface (1000) */
}

/* Interaction between Workbench and Search Interface is handled inside media queries to prevent mobile breakage. */


/* Let's refine the selector logic */

/* Default State (Sidebar Expanded 300px) */
/* Search interface is normally at left: calc(50% + 150px) effectively.
   Current CSS says: left: calc(50% + 130px); which assumes somewhat expanded.
*/

@media (min-width: 769px) {
    body.workbench-open .search-interface {
        left: calc(50% - 200px);
        width: 50%;
        max-width: 600px;
    }
}

@media (min-width: 769px) {
    body.workbench-open .content-area {
        padding-right: 400px;
    }
}

/* Topbar Search Integration */
.topbar-search-container {
    position: relative;
    flex: 0 1 720px;
    /* The topbar centres its children; the old 12px top margin pushed this one
       off that centre line and made the whole pinned header taller. */
    margin: 0 auto;
    z-index: 100;
    display: flex;
    flex-direction: column;
}

/* Search Tabs Container (Sticky Navigation) */
.topbar-search-tabs-container {
    position: relative;
    background: #ffffff;
    border-bottom: 1px solid #e2e8f0;
    z-index: 95;
    padding: 0 2rem;
    display: flex;
    justify-content: center;
}

/* The landing hero reuses this container inside its centred search block,
   where it must not pick up the pinned header's background or border. */
.landing-search-wrapper .topbar-search-tabs-container {
    border-bottom: none;
}

/* Search Tabs (Google Style) */
.topbar-search-tabs {
    display: flex;
    justify-content: center;
    gap: 20px;
    width: 100%;
    max-width: 720px;
}

.search-tab {
    display: flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    color: var(--text-muted);
    font-size: 0.9rem;
    padding: 9px 0;
    border-bottom: 3px solid transparent;
    transition: all 0.2s;
    font-weight: 500;
}

.search-tab:hover {
    color: var(--text-main);
}

.search-tab.active {
    color: var(--primary);
    border-bottom-color: var(--primary);
}

.search-tab i {
    font-size: 0.85rem;
}

.search-input-wrapper {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    background: #f1f5f9;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 24px;
    padding: 6px 12px;
    transition: all 0.3s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    /* Subtle shadow */
    gap: 2px 5px;
}

.search-input-wrapper:focus-within,
.search-input-wrapper:hover {
    background: #ffffff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border-color: rgba(0, 0, 0, 0.1);
}

/* Plus Button */
.search-plus-btn {
    background: transparent;
    border: none;
    color: var(--text-muted);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1rem;
    margin-right: 8px;
    transition: background 0.2s, color 0.2s;
    flex-shrink: 0;
}

.search-plus-btn:hover {
    background: rgba(0, 0, 0, 0.05);
    color: var(--text-main);
    transform: none;
    box-shadow: none;
}

.search-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
    width: 100%;
    margin-top: 0;
    /* Reduced to 0 as requested */
    padding-top: 4px;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    /* Optional: clear separation */
}

.search-tags:empty {
    display: none;
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

.search-tag {
    display: flex;
    align-items: center;
    background: #e2e8f0;
    color: var(--text-main);
    padding: 4px 10px;
    border-radius: 16px;
    font-size: 0.9rem;
    white-space: nowrap;
    gap: 6px;
    cursor: default;
    animation: fadeIn 0.2s ease;
}

.search-tag i {
    cursor: pointer;
    font-size: 0.8rem;
    color: var(--text-muted);
    border-radius: 50%;
    padding: 2px;
    transition: all 0.2s;
}

.search-tag i:hover {
    background: rgba(0, 0, 0, 0.1);
    color: var(--text-main);
}

/* Search Input */
.topbar-search-input {
    flex: 1;
    background: transparent;
    border: none;
    color: var(--text-main);
    font-size: 1.05rem;
    outline: none;
    padding: 10px 0 0 0;
    min-width: 0;
    /* Multiline Support */
    resize: none;
    /* Hide scrollbar initially, let it grow */
    font-family: inherit;
    line-height: 1.5;
    max-height: 140px;
    min-height: 48px;
    /* Allow more growth */
}

.topbar-search-input::placeholder {
    color: var(--text-muted);
    font-weight: 300;
}

/* Search Icon Button */
.search-icon-btn {
    background: transparent;
    border: none;
    color: var(--text-muted);
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 8px;
    transition: all 0.2s;
    flex-shrink: 0;
}

.search-icon-btn:hover {
    background: rgba(0, 0, 0, 0.05);
    color: var(--text-main);
}

/* Dropdown Options */
.search-options-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    left: 0;
    width: 260px;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 16px;
    padding: 8px;
    display: none;
    /* Hidden by default */
    flex-direction: column;
    gap: 4px;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5), 0 8px 10px -6px rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(20px);
    opacity: 0;
    transform: translateY(-10px);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 200;
}

.search-options-dropdown.show {
    display: flex;
    opacity: 1;
    transform: translateY(0);
}

.dropdown-option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s;
    color: var(--text-muted);
    font-weight: 500;
    font-size: 0.9rem;
}

.dropdown-option:hover {
    background: rgba(0, 0, 0, 0.04);
    color: var(--text-main);
    transform: translateX(4px);
}

.option-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.04);
    transition: background 0.2s;
}

.dropdown-option:hover .option-icon {
    background: rgba(0, 0, 0, 0.06);
}

.dropdown-option:hover .option-icon.attach-icon {
    background: rgba(59, 130, 246, 0.2);
    color: #60a5fa;
}


.dropdown-option:hover .option-icon.filter-icon {
    background: rgba(16, 185, 129, 0.2);
    color: #34d399;
}

.dropdown-option.active {
    background: rgba(0, 0, 0, 0.1);
    color: var(--text-main);
    border: 1px solid rgba(139, 92, 246, 0.4);
}

.dropdown-option.active .option-icon {
    background: rgba(139, 92, 246, 0.2);
    color: #a78bfa;
}

.dropdown-option.active .remove-icon {
    margin-left: auto;
    /* Push X to the right */
    color: var(--text-muted);
    font-size: 0.8rem;
}

/* Chat Message Styling for Light Mode */
.message {
    width: 100%;
    margin-bottom: 0;
    opacity: 0;
    animation: fadeIn 0.4s ease forwards;
}

.message.assistant {
    background: #f8fafc;
    border: 1px solid #f1f5f9;
    border-radius: 20px;
    padding: 1.5rem;
}

.message-content {
    line-height: 1.6;
    font-size: 1.05rem;
    color: var(--text-main);
}

.message-avatar {
    margin-bottom: 0.5rem;
    color: var(--primary);
    font-size: 1.2rem;
}

/* Scrollbar styling for Light Mode */
::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.1);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.2);
}

/* Profile Dropdown */
.profile-dropdown {
    position: absolute;
    /* 100% of .app-header, so the menu clears the whole pinned header instead
       of the fixed 70px it used to assume — the topbar is taller than that on
       desktop and is two rows tall on mobile. */
    top: calc(100% + 8px);
    right: 20px;
    width: 250px;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    padding: 10px;
    display: none;
    flex-direction: column;
    z-index: 2000;
    transform-origin: top right;
    animation: scaleIn 0.2s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.profile-dropdown.show {
    display: flex;
}

.profile-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px;
    border-radius: 8px;
    background: #f8fafc;
    margin-bottom: 8px;
}

.avatar-large {
    width: 48px;
    height: 48px;
    background: var(--primary);
    color: white;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.2rem;
    font-weight: 700;
}

.profile-info {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.profile-username {
    font-weight: 600;
    font-size: 1rem;
    color: var(--text-main);
}

.profile-email {
    font-size: 0.8rem;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.profile-dropdown hr {
    border: none;
    border-top: 1px solid #e2e8f0;
    margin: 5px 0;
}

.profile-dropdown .dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    color: var(--text-main);
    text-decoration: none;
    border-radius: 8px;
    font-size: 0.95rem;
    transition: background 0.2s;
}

.profile-dropdown .dropdown-item:hover {
    background: #f1f5f9;
}

.profile-dropdown .dropdown-item i {
    width: 20px;
    color: var(--text-muted);
}

.profile-dropdown .dropdown-item.logout {
    color: #ef4444;
}

.profile-dropdown .dropdown-item.logout:hover {
    background: #fee2e2;
}

.profile-dropdown .dropdown-item.logout i {
    color: #ef4444;
}

/* Avatar Small */
.avatar-small {
    width: 36px;
    height: 36px;
    background: var(--primary);
    color: #ffffff;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 700;
    font-size: 0.9rem;
}

/* Topbar Auth Buttons (for non-logged-in users) */
.topbar-auth-btn {
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    padding: 8px 20px;
    border-radius: 20px;
    transition: all 0.2s ease;
    font-family: 'Outfit', sans-serif;
}

.topbar-signin-btn {
    color: var(--text-main);
    background: transparent;
    border: 1px solid #e2e8f0;
}

.topbar-signin-btn:hover {
    background: #f8fafc;
    border-color: #cbd5e1;
}

.topbar-signup-btn {
    color: #ffffff;
    background: var(--primary);
    border: 1px solid var(--primary);
}

.topbar-signup-btn:hover {
    background: var(--primary-hover);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.25);
}

/* Settings Modal Specifics */
.settings-modal {
    max-width: 800px;
    width: 90%;
    height: 500px;
    padding: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    text-align: left;
}

.settings-container {
    display: flex;
    flex: 1;
    overflow: hidden;
}

.settings-sidebar {
    width: 200px;
    background: #f8fafc;
    border-right: 1px solid #e2e8f0;
    padding: 20px 0;
}

.settings-nav-item {
    padding: 12px 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--text-muted);
    font-weight: 500;
    transition: all 0.2s;
}

.settings-nav-item:hover {
    background: rgba(0, 0, 0, 0.03);
    color: var(--text-main);
}

.settings-nav-item.active {
    background: #ffffff;
    color: var(--primary);
    border-right: 3px solid var(--primary);
}

.settings-content {
    flex: 1;
    padding: 30px;
    overflow-y: auto;
}

.settings-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 20px;
    border-top: 1px solid var(--border-color);
    flex-shrink: 0;
}

.settings-section {
    display: none;
}

.settings-section.active {
    display: block;
    animation: fadeIn 0.3s ease;
}

.settings-section h3 {
    margin-bottom: 5px;
    font-size: 1.25rem;
}

.section-desc {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin-bottom: 25px;
}

.setting-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 0;
    border-bottom: 1px solid #f1f5f9;
}

.setting-info {
    flex: 1;
}

.setting-label {
    font-weight: 600;
    margin-bottom: 2px;
}

.setting-hint {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.setting-control {
    margin-left: 20px;
}

/* Switch Styles */
.switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #e2e8f0;
    transition: .4s;
}

.slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: .4s;
}

input:checked+.slider {
    background-color: var(--primary);
}

input:checked+.slider:before {
    transform: translateX(20px);
}

.slider.round {
    border-radius: 34px;
}

.slider.round:before {
    border-radius: 50%;
}

.color-presets {
    display: flex;
    gap: 10px;
}

.color-dot {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid transparent;
    transition: transform 0.2s;
}

.color-dot:hover {
    transform: scale(1.1);
}

.color-dot.active {
    border-color: #000;
    transform: scale(1.1);
}

.settings-select {
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    background: white;
    font-family: inherit;
    outline: none;
}

.account-form {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.form-group label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-muted);
}

.form-group input {
    padding: 10px;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
}


/* Dark Mode Overrides */
body.dark-mode {
    --bg-color: #0f172a;
    --sidebar-bg: #1e293b;
    --card-bg: #1e293b;
    --text-main: #f1f5f9;
    --text-muted: #94a3b8;
    --border-color: #334155;
    --primary: #ffffff;
    --primary-hover: #e2e8f0;
    --glass-border: 1px solid rgba(255, 255, 255, 0.08);
}

/* --- Topbar --- */
body.dark-mode .app-header {
    background: #0f172a;
}

body.dark-mode .topbar {
    background: #0f172a;
    border-bottom: 1px solid #1e293b;
}

/* --- Search Input Wrapper --- */
body.dark-mode .search-input-wrapper {
    background: #1e293b;
    border-color: #334155;
}

body.dark-mode .search-input-wrapper:focus-within,
body.dark-mode .search-input-wrapper:hover {
    background: #0f172a;
    border-color: #475569;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

body.dark-mode .topbar-search-input {
    color: #f1f5f9;
}

body.dark-mode .topbar-search-input::placeholder {
    color: #64748b;
}

body.dark-mode .search-plus-btn {
    color: #94a3b8;
}

body.dark-mode .search-plus-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #f1f5f9;
}

body.dark-mode .search-icon-btn {
    color: #94a3b8;
}

body.dark-mode .search-icon-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #f1f5f9;
}

/* --- Search Tags --- */
body.dark-mode .search-tag {
    background: #334155;
    color: #f1f5f9;
}

body.dark-mode .search-tag i {
    color: #94a3b8;
}

body.dark-mode .search-tag i:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #f1f5f9;
}

body.dark-mode .search-tags {
    border-top-color: rgba(255, 255, 255, 0.08);
}

/* --- Search Tabs --- */
body.dark-mode .topbar-search-tabs-container {
    background: #0f172a;
    border-bottom-color: #1e293b;
}

body.dark-mode .search-tab {
    color: #94a3b8;
}

body.dark-mode .search-tab:hover {
    color: #f1f5f9;
}

body.dark-mode .search-tab.active {
    color: #ffffff;
    border-bottom-color: #ffffff;
}

/* --- Search Dropdown (Plus menu) --- */
body.dark-mode .search-options-dropdown {
    background: #1e293b;
    border-color: #334155;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.6), 0 8px 10px -6px rgba(0, 0, 0, 0.5);
}

body.dark-mode .search-options-dropdown hr {
    border-top-color: #334155 !important;
}

body.dark-mode .dropdown-option {
    color: #94a3b8;
}

body.dark-mode .dropdown-option:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #f1f5f9;
}

body.dark-mode .option-icon {
    background: rgba(255, 255, 255, 0.06);
}

body.dark-mode .dropdown-option.active {
    background: rgba(255, 255, 255, 0.1);
    color: #f1f5f9;
    border-color: rgba(148, 163, 184, 0.3);
}

/* --- Profile Dropdown --- */
body.dark-mode .profile-dropdown {
    background: #1e293b;
    border-color: #334155;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

body.dark-mode .profile-header {
    background: #0f172a;
}

body.dark-mode .profile-dropdown hr {
    border-top-color: #334155;
}

body.dark-mode .profile-dropdown .dropdown-item {
    color: #f1f5f9;
}

body.dark-mode .profile-dropdown .dropdown-item:hover {
    background: rgba(255, 255, 255, 0.06);
}

body.dark-mode .profile-dropdown .dropdown-item i {
    color: #94a3b8;
}

body.dark-mode .profile-dropdown .dropdown-item.logout {
    color: #f87171;
}

body.dark-mode .profile-dropdown .dropdown-item.logout:hover {
    background: rgba(239, 68, 68, 0.15);
}

body.dark-mode .profile-dropdown .dropdown-item.logout i {
    color: #f87171;
}

/* --- Modals (general) --- */
body.dark-mode .modal-box {
    background: #1e293b;
    border-color: #334155;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
}

body.dark-mode .modal-box h3 {
    color: #f1f5f9;
}

body.dark-mode .modal-box p {
    color: #94a3b8;
}

body.dark-mode .btn-cancel {
    background: #334155;
    color: #f1f5f9;
}

body.dark-mode .btn-cancel:hover {
    background: #475569;
}

body.dark-mode .btn-confirm {
    background: #f1f5f9;
    color: #0f172a;
}

body.dark-mode .btn-confirm:hover {
    background: #e2e8f0;
}

body.dark-mode .modal-box input[type="text"],
body.dark-mode .modal-box input[type="email"],
body.dark-mode .modal-box input[type="number"] {
    background: #0f172a;
    border-color: #334155;
    color: #f1f5f9;
}

/* --- Auth Modal --- */
body.dark-mode .auth-modal i.fa-lock {
    color: #f1f5f9 !important;
}

/* --- Filter Modal --- */
body.dark-mode .filter-modal input,
body.dark-mode .filter-modal select {
    background: #0f172a;
    border-color: #334155;
    color: #f1f5f9;
}

body.dark-mode .filter-modal input:focus,
body.dark-mode .filter-modal select:focus {
    border-color: #64748b;
    background: #0f172a;
}

body.dark-mode .filter-modal select option {
    background: #1e293b;
    color: #f1f5f9;
}

/* --- Settings Modal --- */
body.dark-mode .settings-modal,
body.dark-mode .settings-sidebar {
    background: #1e293b;
    border-color: #334155;
}

body.dark-mode .settings-footer {
    border-top-color: #334155;
}

body.dark-mode .settings-nav-item.active {
    background: #0f172a;
    color: white;
    border-color: white;
}

body.dark-mode .settings-nav-item:hover {
    background: rgba(255, 255, 255, 0.05);
}

body.dark-mode .setting-item {
    border-color: #334155;
}

body.dark-mode .settings-select,
body.dark-mode .form-group input {
    background: #0f172a;
    border-color: #334155;
    color: white;
}


body.dark-mode .slider {
    background-color: #475569;
}

/* --- Content Area & Chat --- */
body.dark-mode .content-area {
    background: #0f172a;
}

body.dark-mode .chat-container {
    background: #0f172a;
}

body.dark-mode .message.assistant {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding-left: 0;
    padding-right: 0;
    padding-top: 0;
    padding-bottom: 0;
}

body.dark-mode .reasoning-block {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0;
}

body.dark-mode .reasoning-container {
    background: #1e293b !important;
    border-color: #334155 !important;
    color: #cbd5e1;
}

body.dark-mode .reasoning-step {
    color: #cbd5e1;
}


/* --- Product Cards --- */
body.dark-mode .product-card {
    background: #1e293b;
    border-color: #334155;
}

body.dark-mode .product-card:hover {
    border-color: #475569;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

body.dark-mode .product-title {
    color: #f1f5f9;
}

body.dark-mode .product-price {
    color: #4ade80;
}

body.dark-mode .product-discount-tag {
    background: rgba(239, 68, 68, 0.2);
    color: #f87171;
}

body.dark-mode .product-img {
    background: #0f172a;
    color: #64748b;
}

/* --- Welcome Screen --- */
body.dark-mode .welcome-screen h1 {
    color: #f1f5f9;
}

/* --- Google Login Button --- */
body.dark-mode .google-login-btn {
    background: #1e293b;
    border-color: #334155;
    color: #f1f5f9;
}

body.dark-mode .google-login-btn:hover {
    background: #334155;
    border-color: #475569;
}

/* --- Topbar Auth Buttons --- */
body.dark-mode .topbar-signin-btn {
    color: #f1f5f9;
    border-color: #334155;
}

body.dark-mode .topbar-signin-btn:hover {
    background: #1e293b;
    border-color: #475569;
}

/* --- Right controls icon buttons --- */
body.dark-mode .icon-btn:hover,
body.dark-mode .icon-btn.active {
    background: rgba(255, 255, 255, 0.1);
}

/* --- Workbench Panel --- */
body.dark-mode .workbench-panel {
    background: #1e293b;
    border-left-color: #334155;
}

body.dark-mode .workbench-header {
    border-bottom-color: #334155;
}

body.dark-mode .workbench-actions button:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #f1f5f9;
}

body.dark-mode .notification-item {
    background: rgba(255, 255, 255, 0.03);
    border-color: #334155;
}

body.dark-mode .notification-item:hover {
    background: rgba(255, 255, 255, 0.06);
}

body.dark-mode .notification-item.unread {
    background: rgba(255, 255, 255, 0.05);
}

body.dark-mode .notif-icon {
    background: rgba(255, 255, 255, 0.08);
    color: #f1f5f9;
}

/* --- Scrollbar --- */
body.dark-mode ::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
}

body.dark-mode ::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* --- Mobile search interface --- */
@media (max-width: 768px) {
    body.dark-mode .search-interface {
        background: #0f172a;
        border-top-color: #1e293b;
        box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.3);
    }
}

/* --- Alert Delete Modal --- */
body.dark-mode .alert-modal-box {
    background: #1e293b;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

body.dark-mode .alert-modal-title {
    color: #f1f5f9;
}

body.dark-mode .alert-modal-text {
    color: #94a3b8;
}

body.dark-mode .alert-modal-btn-cancel {
    background: #334155;
    color: #f1f5f9;
}

body.dark-mode .alert-modal-btn-cancel:hover {
    background: #475569;
}

/* =============================================
   SEARCH RESULTS LAYOUT
   ============================================= */

.search-results-layout {
    display: flex;
    gap: 40px;
    width: 100%;
    max-width: 1400px;
    align-items: flex-start;
}

.search-results-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.search-results-sidebar {
    width: 380px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 28px;
}

/* --- AI Summary Block --- */
.sr-ai-summary {
    padding: 10px 0 0 0;
}

.sr-ai-summary-text {
    font-size: 0.95rem;
    line-height: 1.75;
    color: var(--text-main);
}

.sr-ai-action-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 8px;
    border-bottom: 1px solid #e2e8f0;
    padding-bottom: 12px;
    margin-bottom: 4px;
}

/* --- Result header (Search tab) --- */
.sr-result-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding-bottom: 12px;
    margin-bottom: 4px;
    border-bottom: 1px solid #e2e8f0;
}

.sr-result-headline {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.sr-result-time {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-main);
}

/* Always visible under the headline, never behind a click. */
.sr-search-answer {
    flex: 0 0 100%;
    margin-top: 10px;
    font-size: 0.88rem;
    line-height: 1.65;
    color: var(--text-main);
}

.sr-mode-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(99, 102, 241, 0.12);
    color: #4f46e5;
    font-size: 0.75rem;
    font-weight: 600;
}


/* --- Product grid: every card the same width, a little taller --- */
.sr-products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
    gap: 16px;
    align-items: stretch;
}

.sr-grid-card {
    display: flex;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    overflow: hidden;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.sr-grid-card:hover {
    border-color: #cbd5e1;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.07);
    transform: translateY(-2px);
}

.sr-grid-card-link {
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    width: 100%;
    min-width: 0;
}

.sr-grid-card-img {
    position: relative;
    height: 175px;
    flex-shrink: 0;
    background: #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.sr-grid-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sr-grid-card-noimg {
    color: #cbd5e1;
    font-size: 1.8rem;
}

/* Accuracy sits on the image so every card body starts at the same height */

.sr-grid-card-body {
    padding: 12px 14px 14px;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    gap: 6px;
}

.sr-grid-card-title {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text-main);
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    /* Reserve two lines so single-line titles don't shorten the card */
    min-height: 2.7em;
}

.sr-grid-card-specs {
    font-size: 0.76rem;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sr-grid-card-price-row {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
}

.sr-grid-card-price {
    font-size: 1.05rem;
    font-weight: 700;
    color: #10b981;
}

.sr-grid-card-price.muted {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-muted);
}

.sr-grid-card-old-price {
    font-size: 0.72rem;
    color: var(--text-muted);
    text-decoration: line-through;
}

.sr-grid-card-footer {
    margin-top: auto;
    padding-top: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    border-top: 1px solid #f1f5f9;
}

.sr-grid-card-seller {
    font-size: 0.72rem;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sr-grid-card-site {
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--text-muted);
    background: #f1f5f9;
    padding: 2px 8px;
    border-radius: 999px;
    flex-shrink: 0;
}

/* --- Grid skeleton --- */
.sr-grid-card-skeleton {
    flex-direction: column;
    pointer-events: none;
}

.sr-grid-card-skeleton .sr-grid-card-body {
    gap: 8px;
}

.sr-skeleton-img {
    height: 175px;
    border-radius: 0;
}

.sr-loading-note {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    color: var(--text-muted);
    padding-bottom: 8px;
}

/* --- Empty / error states --- */
.sr-empty,
.sr-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 48px 20px;
    color: var(--text-muted);
    font-size: 0.9rem;
    text-align: center;
}

.sr-empty i {
    font-size: 2rem;
    color: #cbd5e1;
}

.sr-error {
    flex-direction: row;
    justify-content: center;
    color: #ef4444;
}

/* --- Sidebar: Price Visualization --- */
.sr-price-viz {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 20px;
}

/* Title on the left, the legend the currency lines read against on the right. */
.sr-price-viz-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.sr-price-viz-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-main);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.sr-price-legend {
    font-size: 0.68rem;
    color: var(--text-muted);
    white-space: nowrap;
}

.sr-price-stats {
    display: flex;
    justify-content: space-between;
    margin-bottom: 16px;
    gap: 8px;
}

/* One currency per line. Min/average/max stay unbroken, but the row itself may
   wrap inside the panel — so'm figures run long and used to spill past its edge. */
.sr-price-stats-inline {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 8px;
    background: rgba(241, 245, 249, 0.6);
    padding: 10px 12px;
    border-radius: 8px;
    margin-bottom: 10px;
    font-size: 0.8rem;
    color: var(--text-main);
    white-space: nowrap;
}

/* One line per currency — the last one closes the panel, so it drops the gap. */
.sr-price-stats-inline:last-child {
    margin-bottom: 0;
}

.sr-price-stat-item strong {
    color: var(--text-muted);
    font-weight: 600;
    margin-right: 4px;
}

.sr-price-stat-divider {
    color: #cbd5e1;
    font-size: 0.75rem;
}

.sr-price-bars {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.sr-price-bar-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.sr-price-bar-label {
    font-size: 0.7rem;
    color: var(--text-muted);
    width: 80px;
    flex-shrink: 0;
    text-align: right;
}

.sr-price-bar-track {
    flex: 1;
    height: 8px;
    background: #e2e8f0;
    border-radius: 4px;
    overflow: hidden;
}

.sr-price-bar-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.sr-price-bar-fill.low { background: #10b981; }
.sr-price-bar-fill.mid { background: #f59e0b; }
.sr-price-bar-fill.high { background: #ef4444; }

.sr-price-bar-count {
    font-size: 0.7rem;
    color: var(--text-muted);
    width: 24px;
    text-align: right;
}

/* --- Sidebar: Coverage panel — sites/districts/pages/results, below Prices --- */
.sr-coverage-panel {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 20px;
    margin-top: 16px;
}

.sr-coverage-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-main);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 14px;
}

.sr-coverage-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    background: rgba(241, 245, 249, 0.6);
    padding: 10px 12px;
    border-radius: 8px;
    margin-bottom: 8px;
    font-size: 0.8rem;
}

.sr-coverage-row:last-child {
    margin-bottom: 0;
}

.sr-coverage-row-label {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-muted);
}

.sr-coverage-row-label i {
    width: 14px;
    text-align: center;
}

.sr-coverage-row-value {
    font-weight: 600;
    color: var(--text-main);
}

/* --- Sidebar: Links List --- */
.sr-links-section {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 20px;
}

.sr-links-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-main);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.sr-links-collapse-btn {
    display: none;
    cursor: pointer;
    font-size: 1rem;
    color: var(--text-muted);
    transition: color 0.2s;
    line-height: 1;
    margin-left: auto;
}

.sr-links-collapse-btn:hover {
    color: #ef4444;
}

.sr-links-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    max-height: none;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.sr-links-list.collapsed {
    max-height: 500px;
}

.sr-link-item {
    display: flex;
    flex-direction: column;
    padding: 10px 0;
    border-bottom: 1px solid #cbd5e1;
    gap: 3px;
}

.sr-link-item:last-child {
    border-bottom: none;
}

.sr-link-item-title {
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--text-main);
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.sr-link-item-url {
    font-size: 0.72rem;
    color: #3b82f6;
    text-decoration: none;
    word-break: break-all;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.sr-link-item-url:hover {
    text-decoration: underline;
}

.sr-link-item-meta {
    font-size: 0.68rem;
    color: var(--text-muted);
}

.sr-links-show-all {
    margin-top: 12px;
    padding: 8px 0;
    background: transparent;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    color: var(--text-muted);
    font-size: 0.82rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    width: 100%;
    font-family: 'Outfit', sans-serif;
}

.sr-links-show-all:hover {
    background: #f1f5f9;
    color: var(--text-main);
}

/* --- Loading skeleton --- */
.sr-skeleton {
    animation: srPulse 1.5s ease-in-out infinite;
    background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
    background-size: 200% 100%;
    border-radius: 6px;
}

@keyframes srPulse {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.sr-skeleton-text {
    height: 14px;
    margin-bottom: 8px;
    border-radius: 4px;
}

.sr-skeleton-text.w75 { width: 75%; }
.sr-skeleton-text.w90 { width: 90%; }
.sr-skeleton-text.w60 { width: 60%; }

/* --- Responsive --- */
@media (max-width: 1024px) {
    .search-results-layout {
        flex-direction: column;
        gap: 24px;
    }

    .search-results-sidebar {
        width: 100%;
        position: static;
        max-height: none;
        flex-direction: row;
        flex-wrap: wrap;
    }

    .sr-price-viz {
        flex: 1;
        min-width: 280px;
    }

    .sr-products-grid {
        grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    }
}

@media (max-width: 768px) {
    .search-results-layout {
        gap: 16px;
    }

    .sr-products-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .sr-grid-card-img,
    .sr-skeleton-img {
        height: 140px;
    }

    .sr-grid-card-title {
        font-size: 0.82rem;
    }

    .sr-result-header {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    .search-results-sidebar {
        flex-direction: column;
    }

    .sr-price-viz {
        min-width: 100%;
    }

    .sr-coverage-panel {
        min-width: 100%;
    }

    .sr-ai-action-row {
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
    }
}

@media (max-width: 480px) {
    /* Two columns stay down to ~360px: one full-bleed listing per screen is
       too little to compare against. The card shrinks instead of the grid. */
    .sr-products-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .sr-grid-card-img,
    .sr-skeleton-img {
        height: 118px;
    }

    .sr-grid-card-body {
        padding: 10px 10px 12px;
        gap: 4px;
    }

    .sr-grid-card-title {
        font-size: 0.78rem;
    }

    .sr-grid-card-specs {
        font-size: 0.7rem;
    }

    .sr-grid-card-price {
        font-size: 0.88rem;
    }

    .sr-grid-card-footer {
        font-size: 0.68rem;
        gap: 4px;
    }

}

/* Below ~360px two columns stop being legible, so fall back to one. */
@media (max-width: 359px) {
    .sr-products-grid {
        grid-template-columns: 1fr;
    }

    .sr-grid-card-img,
    .sr-skeleton-img {
        height: 170px;
    }

    .sr-grid-card-title {
        font-size: 0.85rem;
    }
}

/* =============================================
   SEARCH RESULTS — DARK MODE
   ============================================= */

body.dark-mode .sr-ai-summary {
    border-bottom: none;
}


body.dark-mode .sr-ai-action-row {
    border-bottom-color: #334155;
}

body.dark-mode .sr-result-header {
    border-bottom-color: #334155;
}

body.dark-mode .sr-coverage-panel {
    background: #1e293b;
    border-color: #334155;
}

body.dark-mode .sr-coverage-row {
    background: rgba(15, 23, 42, 0.6);
}

body.dark-mode .sr-mode-chip {
    background: rgba(129, 140, 248, 0.18);
    color: #a5b4fc;
}

body.dark-mode .sr-grid-card {
    background: #1e293b;
    border-color: #334155;
}

body.dark-mode .sr-grid-card:hover {
    border-color: #475569;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}

body.dark-mode .sr-grid-card-img {
    background: #0f172a;
}

body.dark-mode .sr-grid-card-noimg {
    color: #475569;
}


body.dark-mode .sr-grid-card-price {
    color: #4ade80;
}

body.dark-mode .sr-grid-card-footer {
    border-top-color: #334155;
}

body.dark-mode .sr-grid-card-site {
    background: #0f172a;
}

body.dark-mode .sr-price-viz {
    background: #1e293b;
    border-color: #334155;
}

body.dark-mode .sr-price-bar-track {
    background: #334155;
}

body.dark-mode .sr-links-section {
    background: #1e293b;
    border-color: #334155;
}

body.dark-mode .sr-link-item {
    border-bottom-color: #475569;
}

body.dark-mode .sr-link-item-url {
    color: #60a5fa;
}

body.dark-mode .sr-links-show-all {
    border-color: #334155;
}

body.dark-mode .sr-links-show-all:hover {
    background: #334155;
}

body.dark-mode .sr-skeleton {
    background: linear-gradient(90deg, #1e293b 25%, #334155 50%, #1e293b 75%);
    background-size: 200% 100%;
}

/* Bottom Chat Interface */
.bottom-chat-container {
    position: fixed;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    max-width: 650px;
    z-index: 2000;
    display: none; /* Hidden by default */
    flex-direction: column;
    align-items: center;
    animation: slideUp 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.bottom-chat-container.active {
    display: flex;
}

.chat-input-wrapper {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 20px;
    padding: 8px 15px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
    width: 100%;
}

.dark-mode .chat-input-wrapper {
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
}

.chat-plus-btn, .chat-send-btn, .chat-clear-btn {
    background: transparent;
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    color: var(--text-muted);
    flex-shrink: 0;
}

/* Sits beside send, and only appears once there is a conversation to clear.
   [hidden] needs the explicit none here to beat the display:flex above. */
.chat-clear-btn[hidden] {
    display: none;
}

.chat-clear-btn:hover {
    background: rgba(220, 38, 38, 0.08);
    color: #dc2626;
}

.chat-clear-btn:disabled {
    opacity: 0.5;
    cursor: default;
}

body.dark-mode .chat-clear-btn:hover {
    background: rgba(248, 113, 113, 0.12);
    color: #f87171;
}

.chat-plus-btn:hover {
    background: rgba(0, 0, 0, 0.05);
    color: var(--primary);
}

.chat-send-btn {
    color: var(--primary);
}

.chat-send-btn:hover {
    background: var(--primary);
    color: white;
}

#chat-bottom-input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    padding: 10px 0;
    font-size: 1rem;
    color: var(--text-main);
    resize: none;
    max-height: 200px;
}

/* Visibility Toggles */
.topbar-search-container.hidden {
    display: none !important;
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translate(-50%, 20px);
    }
    to {
        opacity: 1;
        transform: translate(-50%, 0);
    }
}

/* Specific adjustment for Ask AI tab content */
.ask-ai-mode .content-area {
    padding-bottom: 150px;
}

/* Dropdown positioning for bottom chat */
#bottom-chat-container .search-options-dropdown {
    bottom: calc(100% + 15px);
    top: auto;
    left: 0;
}
/* Chatbot Specific Styles */
.chatbot-welcome {
    animation: fadeIn 0.8s ease-out;
}

.chatbot-icon {
    animation: pulse 2s infinite ease-in-out;
}

@keyframes pulse {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.1); opacity: 0.8; }
    100% { transform: scale(1); opacity: 1; }
}

.sr-ai-summary-text {
    line-height: 1.6;
    font-size: 1.05rem;
}

.sr-ai-summary-text ul {
    margin: 15px 0;
    padding-left: 20px;
}

.sr-ai-summary-text li {
    margin-bottom: 8px;
}

.sr-ai-summary-text strong {
    color: var(--primary);
    font-weight: 600;
}


/* .bottom-chat-container is a centred, floating wrapper (90% wide, max 650px),
   not a bar docked across the viewport. Styling it as a bar — opaque fill,
   border-top, upward shadow — painted a square panel directly behind the
   rounded input, and its corners and top edge stuck out around the pill.
   The surface belongs to .chat-input-wrapper, which already has the fill,
   border, 20px radius, blur and shadow. */
.ask-ai-mode .bottom-chat-container {
    background: transparent;
    border-top: none;
    box-shadow: none;
}

/* The fill the container used to provide, moved onto the pill so it masks the
   messages passing behind it while keeping the rounded shape. Nearly opaque:
   at 0.8 the text underneath still read through the blur. */
.ask-ai-mode .chat-input-wrapper {
    background: rgba(255, 255, 255, 0.97);
}

/* Higher specificity than `.dark-mode .chat-input-wrapper`, which would
   otherwise be overridden by the light rule above purely on source order. */
.ask-ai-mode.dark-mode .chat-input-wrapper {
    /* Light text on a dark field reads through more than the reverse, so this
       sits a little higher than the light-mode value. */
    background: rgba(15, 23, 42, 0.98);
}

/* Chatbot Mode refinements */
.chatbot-mode {
    max-width: 1000px;
    margin: 0 auto;
}

.chatbot-mode .sr-ai-summary {
    width: 100%;
    font-size: 1.1rem;
    padding: 2.5rem;
    border-color: var(--primary);
    background: linear-gradient(135deg, #ffffff 0%, #f1f5f9 100%);
}

.chatbot-sidebar {
    display: none; /* Hide sidebar in chatbot mode to focus on conversation */
}

@media (max-width: 1200px) {
    .chatbot-mode {
        grid-template-columns: 1fr;
    }
}

/* AI Chat Mode Styles */
.ai-chat-mode-container {
    max-width: 650px !important;
    margin: 0 auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
}

.ai-chat-messages {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding-bottom: 100px;
}

.ai-msg {
    display: flex;
    max-width: 80%;
    animation: fadeIn 0.3s ease-out;
}

.user-msg {
    align-self: flex-end;
}

.ai-response-msg {
    align-self: flex-start;
}

.msg-content {
    padding: 14px 20px;
    border-radius: 20px;
    font-size: 1.05rem;
    line-height: 1.6;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.user-msg .msg-content {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    color: white;
    border-bottom-right-radius: 4px;
}

.ai-response-msg .msg-content {
    background: white;
    color: #1e293b;
    border-bottom-left-radius: 4px;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.ai-chat-welcome {
    text-align: center;
    padding: 60px 20px;
    color: #64748b;
}

.ai-chat-welcome i {
    font-size: 4rem;
    color: #0f172a;
    margin-bottom: 20px;
    opacity: 0.8;
}

.ai-chat-welcome h2 {
    font-size: 2rem;
    color: #0f172a;
    margin-bottom: 10px;
}

.ai-chat-welcome p {
    font-size: 1.1rem;
    max-width: 500px;
    margin: 0 auto;
}

.thinking .msg-content {
    color: #94a3b8;
    font-style: italic;
    background: rgba(255, 255, 255, 0.5);
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Scrollbar for chat */
.ai-chat-mode-container {
    scrollbar-width: thin;
}

/* AI Chat Mode Sticky Tabs */
body.ask-ai-mode .topbar-search-tabs-container {
    position: sticky;
    top: 90px;
    z-index: 999;
    background: #ffffff;
    box-shadow: 0 4px 10px rgba(0,0,0,0.03);
    margin-bottom: 0;
    padding-bottom: 5px;
    border-top: 1px solid rgba(0,0,0,0.02); /* Added slight border to separate */
}

body.ask-ai-mode .topbar {
    border-bottom: none;
    box-shadow: none;
}

body.dark-mode.ask-ai-mode .topbar-search-tabs-container {
    background: #0f172a;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

/* Centered Input for first AI Chat entry */
.bottom-chat-container.centered {
    top: 70%;
    bottom: auto;
    transform: translate(-50%, -50%);
    max-width: 650px;
    transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.bottom-chat-container.centered .chat-input-wrapper {
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.05);
}

.bottom-chat-container {
    transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Welcome title styling */
.ai-welcome-title {
    display: none;
    font-size: 2.2rem;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 30px;
    text-align: center;
}

.bottom-chat-container.centered .ai-welcome-title {
    display: block;
    animation: fadeIn 0.5s ease;
}

/* Disable scroll in initial AI state */
body.initial-state .main-content {
    overflow-y: hidden !important;
}

/* Disable scroll in initial chat state */
body.chat-initial-state .main-content {
    overflow-y: hidden !important;
}

body.chat-initial-state {
    overflow: hidden !important;
}

/* Align AI chat messages with the input width */
.ai-chat-messages {
    max-width: 650px;
    margin: 0 auto;
    width: 100%;
}

.ai-chat-mode-container {
    padding-top: 40px;
}

/* Adjust message alignment */
.ai-msg .msg-content {
    max-width: 100%;
}

.user-msg {
    align-self: flex-end;
    text-align: right;
}

.ai-response-msg {
    align-self: flex-start;
    text-align: left;
}

/* Product Mention Popup */
.product-mention-popup {
    position: absolute;
    bottom: calc(100% + 10px);
    left: 0;
    width: 100%;
    max-height: 300px;
    background: white;
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.1);
    border: 1px solid rgba(0,0,0,0.05);
    overflow-y: auto;
    display: none;
    z-index: 2001;
}

.product-mention-popup.active {
    display: block;
}

.mention-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 15px;
    cursor: pointer;
    transition: background 0.2s;
    border-bottom: 1px solid rgba(0,0,0,0.02);
}

.mention-item:hover {
    background: #f8fafc;
}

.mention-item img {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    object-fit: cover;
}

.mention-info {
    flex: 1;
    overflow: hidden;
}

.mention-title {
    font-size: 0.9rem;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mention-price {
    font-size: 0.8rem;
    color: #10b981;
    font-weight: 600;
}

/* Chat Reply Context */
.chat-reply-context {
    display: none;
    background: #f1f5f9;
    border-left: 4px solid #0f172a;
    padding: 8px 12px;
    border-radius: 8px;
    margin-bottom: 10px;
    align-self: stretch;
    position: relative;
    max-width: 100%;
}

.chat-reply-context.active {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.reply-content {
    font-size: 0.85rem;
    color: #475569;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.reply-close {
    cursor: pointer;
    color: #94a3b8;
    padding: 2px 5px;
}

.reply-close:hover {
    color: #ef4444;
}

body.dark-mode .product-mention-popup {
    background: #1e293b;
    border-color: rgba(255,255,255,0.05);
}

body.dark-mode .mention-item:hover {
    background: #334155;
}

body.dark-mode .chat-reply-context {
    background: #1e293b;
    border-left-color: #3b82f6;
}

/* Reply Reference inside Message Bubble */
.msg-reply-reference {
    background: rgba(255, 255, 255, 0.1);
    border-left: 2px solid rgba(255, 255, 255, 0.5);
    padding: 6px 10px;
    border-radius: 6px;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8rem;
}

.msg-reply-reference img {
    width: 24px;
    height: 24px;
    border-radius: 4px;
    object-fit: cover;
}

.reply-ref-title {
    opacity: 0.9;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
}

/* Product Tags Style */
.search-tag.product-tag {
    background: rgba(59, 132, 246, 0.1);
    color: #3b82f6;
    border: 1px solid rgba(59, 132, 246, 0.2);
    font-weight: 500;
}

.search-tag.product-tag:hover {
    background: rgba(59, 132, 246, 0.2);
}

.search-tag.product-tag i {
    font-size: 0.75rem;
}

body.dark-mode .search-tag.product-tag {
    background: rgba(59, 132, 246, 0.2);
    border-color: rgba(59, 132, 246, 0.3);
}

/* Inline Input Tags */
.chat-input-wrapper {
    display: flex;
    align-items: center;
    flex-wrap: wrap; /* Allow tags to wrap or push input */
    min-height: 48px;
}

.chat-input-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    padding-left: 5px;
}

.chat-input-tags .search-tag {
    margin-bottom: 0;
    font-size: 0.8rem;
    padding: 2px 8px;
    border-radius: 6px;
}

#chat-bottom-input {
    flex: 1;
    min-width: 100px;
}

/* Contenteditable Chat Input */
.chat-bottom-input {
    flex: 1;
    min-height: 48px;
    max-height: 200px;
    padding: 12px;
    outline: none;
    overflow-y: auto;
    font-size: 1rem;
    line-height: 1.5;
    background: transparent;
    cursor: text;
    white-space: pre-wrap;
    word-break: break-word;
    display: block;
}

.chat-bottom-input:empty:before {
    content: attr(data-placeholder);
    color: #94a3b8;
    font-style: italic;
}

.chat-bottom-input .product-tag {
    display: inline-flex;
    align-items: center;
    background: rgba(59, 132, 246, 0.1);
    color: #3b82f6;
    border: 1px solid rgba(59, 132, 246, 0.2);
    border-radius: 6px;
    padding: 2px 8px;
    margin: 0 4px;
    font-size: 0.85rem;
    font-weight: 500;
    user-select: none;
    vertical-align: middle;
}

.chat-bottom-input .product-tag i {
    margin-right: 4px;
}

/* Hide the separate tags container as we are now inline */
#chat-input-tags {
    display: none !important;
}

body.dark-mode .chat-bottom-input .product-tag {
    background: rgba(59, 132, 246, 0.2);
    border-color: rgba(59, 132, 246, 0.3);
}



/* Currency label inside price */
.sr-price-currency {
    font-size: 0.78em;
    font-weight: 500;
    opacity: 0.75;
    letter-spacing: 0.02em;
}

/* Currency label next to "Prices" title in price viz panel */
.sr-price-currency-label {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 5px;
    background: rgba(99, 102, 241, 0.12);
    color: #6366f1;
    margin-left: 4px;
    vertical-align: middle;
}

body.dark-mode .sr-price-currency-label {
    background: rgba(99, 102, 241, 0.22);
    color: #818cf8;
}


/* =============================================
   ASK AI TAB — assist answers & deep-research reports
   ============================================= */

.dropdown-option:hover .option-icon.research-icon {
    background: rgba(99, 102, 241, 0.2);
    color: #818cf8;
}

/* Unread dot on the Ask AI tab when an answer is waiting there */
.search-tab.has-unread {
    position: relative;
}

.search-tab.has-unread::after {
    content: '';
    position: absolute;
    top: 4px;
    right: 0;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #6366f1;
    box-shadow: 0 0 0 2px var(--bg-main, #fff);
}

.sr-answer-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    margin-bottom: 10px;
    border-radius: 999px;
    background: rgba(99, 102, 241, 0.12);
    color: #4f46e5;
    font-size: 0.72rem;
    font-weight: 600;
}

.sr-answer-goal {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-main);
    padding: 10px 12px;
    margin-bottom: 10px;
    border-left: 3px solid #6366f1;
    background: rgba(99, 102, 241, 0.06);
    border-radius: 0 8px 8px 0;
}

.sr-answer-subtitle {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--text-muted);
    margin: 14px 0 6px;
}

.sr-answer-list {
    margin: 6px 0 0;
    padding-left: 20px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.sr-answer-list li {
    font-size: 0.88rem;
    line-height: 1.55;
    color: var(--text-main);
}

.sr-answer-steps {
    margin-top: 14px;
    font-size: 0.83rem;
}

.sr-answer-steps summary {
    cursor: pointer;
    color: var(--text-muted);
    font-weight: 600;
    user-select: none;
}

.sr-answer-steps ol {
    margin: 8px 0 0;
    padding-left: 20px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    color: var(--text-muted);
}

.sr-step-count {
    font-size: 0.72rem;
    background: #f1f5f9;
    color: var(--text-muted);
    padding: 1px 7px;
    border-radius: 999px;
}

.sr-answer-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 16px;
    padding: 8px 16px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: transparent;
    color: var(--text-muted);
    font-family: 'Outfit', sans-serif;
    font-size: 0.83rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.sr-answer-link:hover {
    background: #f1f5f9;
    color: var(--text-main);
}

/* Citations: numbered links from a claim to the listing it stands on */
.sr-cites {
    display: inline-flex;
    gap: 3px;
    margin-left: 5px;
    vertical-align: super;
}

.sr-cite {
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border: 1px solid rgba(99, 102, 241, 0.3);
    border-radius: 5px;
    background: rgba(99, 102, 241, 0.1);
    color: #4f46e5;
    font-family: 'Outfit', sans-serif;
    font-size: 0.65rem;
    font-weight: 600;
    line-height: 15px;
    cursor: pointer;
    transition: all 0.15s;
}

.sr-cite:hover {
    background: #4f46e5;
    border-color: #4f46e5;
    color: #fff;
}

/* Where a citation lands: the cited card pulses once so the eye finds it */
@keyframes sr-card-flash {
    0%, 100% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0); }
    15% { box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.45); }
    55% { box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.2); }
}

.sr-grid-card.sr-card-flash {
    animation: sr-card-flash 1.6s ease-out;
    border-color: #6366f1;
}

/* Follow-up questions the chat API offers after an answer */
.sr-suggestions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.sr-suggestion {
    padding: 7px 14px;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    background: transparent;
    color: var(--text-muted);
    font-family: 'Outfit', sans-serif;
    font-size: 0.82rem;
    text-align: left;
    cursor: pointer;
    transition: all 0.2s;
}

.sr-suggestion:hover {
    background: #f1f5f9;
    color: var(--text-main);
}

/* Search tab pager — the ranked list is paged server-side */
.sr-pager {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 6px;
    margin: 24px 0 8px;
}

.sr-pager-btn,
.sr-pager-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: transparent;
    color: var(--text-main);
    font-family: 'Outfit', sans-serif;
    font-size: 0.85rem;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    transition: all 0.2s;
}

.sr-pager-btn:hover:not(:disabled),
.sr-pager-num:hover:not(.active) {
    background: #f1f5f9;
}

.sr-pager-btn:disabled {
    opacity: 0.4;
    cursor: default;
}

.sr-pager-num.active {
    background: #4f46e5;
    border-color: #4f46e5;
    color: #fff;
    cursor: default;
}

.sr-pager-gap {
    padding: 0 2px;
    color: var(--text-muted);
    font-size: 0.85rem;
}

body.dark-mode .sr-suggestion,
body.dark-mode .sr-pager-btn,
body.dark-mode .sr-pager-num {
    border-color: #334155;
}

body.dark-mode .sr-pager-num.active {
    background: #818cf8;
    border-color: #818cf8;
    color: #0f172a;
}

body.dark-mode .sr-cite {
    background: rgba(129, 140, 248, 0.18);
    border-color: rgba(129, 140, 248, 0.4);
    color: #a5b4fc;
}

body.dark-mode .sr-cite:hover {
    background: #818cf8;
    border-color: #818cf8;
    color: #0f172a;
}

body.dark-mode .sr-suggestion:hover,
body.dark-mode .sr-pager-btn:hover:not(:disabled),
body.dark-mode .sr-pager-num:hover:not(.active) {
    background: #334155;
    color: #f1f5f9;
}

body.dark-mode .sr-answer-badge {
    background: rgba(129, 140, 248, 0.18);
    color: #a5b4fc;
}

body.dark-mode .sr-answer-goal {
    background: rgba(129, 140, 248, 0.1);
    border-left-color: #818cf8;
}

body.dark-mode .sr-step-count {
    background: #0f172a;
}

body.dark-mode .sr-answer-link {
    border-color: #334155;
}

body.dark-mode .sr-answer-link:hover {
    background: #334155;
    color: #f1f5f9;
}

body.dark-mode .search-tab.has-unread::after {
    box-shadow: 0 0 0 2px #0f172a;
}

/* --- Dark mode fixes --- */

/* --primary is #ffffff in dark mode, so the signup button was white text on white */
body.dark-mode .topbar-signup-btn {
    background: #f1f5f9;
    border-color: #f1f5f9;
    color: #0f172a;
}

body.dark-mode .topbar-signup-btn:hover {
    background: #ffffff;
    border-color: #ffffff;
    color: #0f172a;
}

/* The price strip kept its light background, hiding the Min/Average/Max labels */
body.dark-mode .sr-price-stats-inline {
    background: rgba(15, 23, 42, 0.6);
}

body.dark-mode .sr-price-stat-divider {
    color: #475569;
}

/* =====================================================
   Citations, streaming progress and the research log
   ===================================================== */

/* An inline [n] marker, rendered as a superscript link to the listing it cites. */
.sr-ref {
    display: inline-block;
    min-width: 16px;
    padding: 0 4px;
    margin: 0 1px;
    border: none;
    border-radius: 5px;
    background: #eef2f7;
    color: #334155;
    font-family: inherit;
    font-size: 0.68em;
    font-weight: 600;
    line-height: 1.5;
    text-align: center;
    text-decoration: none;
    vertical-align: super;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.sr-ref:hover {
    background: #0f172a;
    color: #ffffff;
}

/* A telegram listing has no public page, so its marker reveals the card instead
   of opening a link — dotted to say the destination is different. */
.sr-ref-nolink {
    border-bottom: 1px dotted #94a3b8;
}

.sr-sources {
    margin-top: 12px;
    font-size: 0.85rem;
}

.sr-sources > summary {
    cursor: pointer;
    color: var(--text-muted);
    font-weight: 500;
    list-style: none;
}

.sr-sources > summary::-webkit-details-marker {
    display: none;
}

.sr-sources > summary::before {
    content: "▸";
    display: inline-block;
    margin-right: 6px;
    transition: transform 0.15s ease;
}

.sr-sources[open] > summary::before {
    transform: rotate(90deg);
}

.sr-source-list {
    margin: 8px 0 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sr-source-list li a,
.sr-source-list li .sr-source-offsite {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 8px;
    text-decoration: none;
    color: var(--text-main);
}

.sr-source-list li a:hover {
    background: #f1f5f9;
}

.sr-source-list li .sr-source-offsite {
    color: var(--text-muted);
    cursor: default;
}

.sr-source-num {
    flex-shrink: 0;
    min-width: 18px;
    color: var(--text-muted);
    font-size: 0.78rem;
    font-weight: 600;
}

.sr-source-title {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sr-source-meta {
    flex-shrink: 0;
    color: var(--text-muted);
    font-size: 0.76rem;
}

/* The stage line under the skeleton, rewritten as each stage of the search lands. */
.sr-stage-count {
    margin-left: 6px;
    padding: 1px 6px;
    border-radius: 20px;
    background: #f1f5f9;
    color: var(--text-muted);
    font-size: 0.82em;
}

/* Deep research: the thinking bubble becomes a live log of the plan's steps. */
.sr-research-live {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.sr-research-head {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
}

.sr-research-progress {
    margin-left: auto;
    padding: 1px 8px;
    border-radius: 20px;
    background: #f1f5f9;
    color: var(--text-muted);
    font-size: 0.8rem;
    font-variant-numeric: tabular-nums;
}

/* Indeterminate "still working" line — deep research and the Agent turn it
   logs give no real progress fraction, so this sweeps rather than fills. */
.sr-research-loadbar {
    position: relative;
    height: 3px;
    border-radius: 3px;
    background: #e2e8f0;
    overflow: hidden;
}

.sr-research-loadbar::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 40%;
    border-radius: 3px;
    background: linear-gradient(90deg, transparent, #10b981, transparent);
    animation: sr-loadbar-sweep 1.3s ease-in-out infinite;
}

@keyframes sr-loadbar-sweep {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(350%); }
}

/* Shared step timeline — a dot before each step's text, a line connecting it
   down to the next one. Used by deep research's live log and by the Agent
   chat's "Thoughts for" panel (which intent/tool ran). */
.sr-step-timeline {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
}

.sr-step-timeline li {
    position: relative;
    padding: 0 0 14px 20px;
    font-size: 0.9rem;
    color: var(--text-muted);
    animation: fadeIn 0.25s ease;
}

.sr-step-timeline li:last-child {
    padding-bottom: 0;
}

.sr-step-timeline li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 6px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #10b981;
}

.sr-step-timeline li::after {
    content: '';
    position: absolute;
    left: 3px;
    top: 15px;
    bottom: 2px;
    width: 1px;
    background: #e2e8f0;
}

.sr-step-timeline li:last-child::after {
    display: none;
}

/* Dark mode */
body.dark-mode .sr-ref {
    background: #334155;
    color: #e2e8f0;
}

body.dark-mode .sr-ref:hover {
    background: #f1f5f9;
    color: #0f172a;
}

body.dark-mode .sr-source-list li a:hover {
    background: #1e293b;
}

body.dark-mode .sr-stage-count,
body.dark-mode .sr-research-progress {
    background: #1e293b;
}

body.dark-mode .sr-research-loadbar {
    background: #334155;
}

body.dark-mode .sr-step-timeline li::after {
    background: #334155;
}