/* =============================================================================
   SEARCH RESULTS STYLING
   Dedicated styles for search result cards and layout
   ============================================================================= */

/* Enable proper scrolling for welcome screen */
body, html {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

/* Force hide any scrollbars that might appear on main UI elements */
body::-webkit-scrollbar,
html::-webkit-scrollbar,
.browser-container::-webkit-scrollbar,
.web-content::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

/* Show scrollbar on welcome screen */
.welcome-screen::-webkit-scrollbar {
    width: 12px !important;
    display: block !important;
}

.welcome-screen::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.welcome-screen::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #5a0dd6 0%, #7b2fcc 50%, #5a0dd6 100%);
    border-radius: 6px;
    border: 2px solid rgba(255, 255, 255, 0.1);
    box-shadow: inset 0 1px 2px rgba(255,255,255,0.15);
    transition: all 0.2s ease;
}

.welcome-screen::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, #6a1be6 0%, #8b3bdc 50%, #6a1be6 100%);
    transform: scale(1.1);
}

/* Ensure the main container allows proper scrolling */
.browser-container {
    height: 100%;
    width: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    max-height: 100%;
    min-height: 100%;
}

/* Tab Bar */
.tab-bar {
    display: flex;
    height: 28px;
    flex-shrink: 0;
}

/* Top Bar */
.top-bar {
    display: flex !important;
    height: 36px;
    flex-shrink: 0;
}

.web-content {
    height: 100%;
    width: 100%;
    overflow: hidden;
    position: relative;
    flex: 1;
    min-height: 0;
    display: flex;
}

/* CLEAN BOTTOM LAYOUT - NO CONFLICTS */

/* CLEAN BOTTOM LAYOUT - NO CONFLICTS */
.browser-container.bottom-layout .web-content webview,
.browser-container.bottom-layout .web-content #webview {
    top: 0 !important;
    bottom: 0 !important;
    height: 100% !important;
    max-height: 100% !important;
    overflow: hidden !important;
}

/* Search Results Container */
.search-results {
    display: flex;
    flex-direction: column;
    gap: 24px;
    animation: fadeInUp 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
    opacity: 1;
    transform: translateY(0) translateZ(0);
    padding: 30px;
    position: relative;
    background: rgba(20, 20, 20, 0.95);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    overflow: visible;
    margin: 30px;
    margin-bottom: 60px;
    height: auto;
    min-height: auto;
    max-width: calc(100vw - 80px);
    width: auto;
    z-index: auto;
    will-change: opacity, transform;
    contain: layout style;
}

/* Search results scrollbar styling */
.search-results::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

.search-results::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.search-results::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #5a0dd6 0%, #7b2fcc 50%, #5a0dd6 100%);
    border-radius: 6px;
    border: 2px solid rgba(255, 255, 255, 0.1);
    box-shadow: inset 0 1px 2px rgba(255,255,255,0.15);
    transition: all 0.2s ease;
}

.search-results::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, #6b26e6 0%, #8b44e0 50%, #6b26e6 100%);
    border-color: rgba(255, 255, 255, 0.2);
}

.search-results::-webkit-scrollbar-thumb:active {
    background: linear-gradient(135deg, #4b15c8 0%, #6f30d0 50%, #4b15c8 100%);
}

.search-results::-webkit-scrollbar-corner {
    background: rgba(255, 255, 255, 0.08);
}

/* AI overview sits above the engines bar (no flex order overrides) */
.ai-search-answer {
    width: min(1100px, calc(100% - 48px));
    margin: 4px auto 14px;
    padding: 0;
    box-sizing: border-box;
    flex: 0 0 auto;
}

.ai-search-answer[hidden] {
    display: none !important;
}

.ai-search-answer-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(167, 139, 250, 0.28);
    border-radius: 16px;
    padding: 18px 20px 16px;
    backdrop-filter: blur(12px);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22);
}

.ai-search-answer-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    user-select: none;
}

.ai-search-answer-header-main {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    cursor: grab;
}

.ai-search-answer-header-main:active {
    cursor: grabbing;
}

.ai-search-answer-header:active {
    cursor: grabbing;
}

.ai-search-answer-grip {
    color: rgba(255, 255, 255, 0.4);
    font-size: 11px;
    display: inline-flex;
}

.ai-search-answer.is-floating {
    pointer-events: auto;
}

.ai-search-answer-icon {
    width: 22px;
    height: 22px;
    object-fit: contain;
    flex-shrink: 0;
}

.ai-search-answer-title {
    font-size: 15px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.95);
    letter-spacing: 0.01em;
}

.ai-search-answer-meta,
.ai-search-answer-model {
    margin-left: auto;
    font-size: 12px;
    max-width: 55%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ai-search-answer-meta {
    color: rgba(255, 255, 255, 0.55);
}

.ai-search-answer-model {
    appearance: none;
    -webkit-appearance: none;
    flex-shrink: 1;
    min-width: 96px;
    max-width: 220px;
    height: 26px;
    padding: 0 22px 0 10px;
    border-radius: var(--stealth-cut-sm, 8px 2px 2px 2px);
    border: 1px solid rgba(255, 255, 255, 0.14);
    background-color: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.88);
    font-size: 11px;
    line-height: 1.2;
    cursor: pointer;
    outline: none;
    color-scheme: dark;
    background-image: linear-gradient(45deg, transparent 50%, rgba(255, 255, 255, 0.55) 50%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.55) 50%, transparent 50%);
    background-position: calc(100% - 12px) 10px, calc(100% - 8px) 10px;
    background-size: 4px 4px, 4px 4px;
    background-repeat: no-repeat;
}

.ai-search-answer-model:hover,
.ai-search-answer-model:focus {
    border-color: rgba(157, 78, 221, 0.45);
    background-color: rgba(157, 78, 221, 0.12);
    box-shadow: 0 0 0 1px rgba(90, 13, 214, 0.18);
}

/* Native option popup: keep styling minimal. Heavy option:hover/focus rules
   blank CEF select menus on Windows. */
.ai-search-answer-model option,
.ai-search-answer-model optgroup {
    color: #f3f4f6;
    background-color: #1f2430;
}

.ai-search-answer-model option:checked {
    color: #ffffff;
    background-color: #5a0dd6;
}

.ai-search-answer-body {
    color: rgba(255, 255, 255, 0.88);
    font-size: 14.5px;
    line-height: 1.55;
}

.ai-search-answer-body p {
    margin: 0 0 10px;
}

.ai-search-answer-body p:last-child {
    margin-bottom: 0;
}

.ai-search-answer-body ul {
    margin: 0 0 10px 18px;
    padding: 0;
}

.ai-search-answer-body li {
    margin: 0 0 6px;
}

.ai-search-answer-body.typing::after {
    content: '';
    display: inline-block;
    width: 7px;
    height: 1.05em;
    margin-left: 2px;
    vertical-align: text-bottom;
    background: rgba(167, 139, 250, 0.95);
    animation: ai-caret-blink 0.9s steps(1) infinite;
}

@keyframes ai-caret-blink {
    50% { opacity: 0; }
}

.ai-search-answer-loading {
    display: flex;
    align-items: center;
    gap: 12px;
    color: rgba(255, 255, 255, 0.72);
    font-size: 14px;
}

.ai-search-answer-spinner {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.18);
    border-top-color: rgba(167, 139, 250, 0.95);
    animation: ai-search-spin 0.8s linear infinite;
    flex-shrink: 0;
}

@keyframes ai-search-spin {
    to { transform: rotate(360deg); }
}

.ai-search-answer-error {
    color: rgba(255, 180, 180, 0.9);
    font-size: 13.5px;
}

html[data-theme="light"] .ai-search-answer-card {
    background: rgba(255, 255, 255, 0.82);
    border-color: rgba(0, 0, 0, 0.08);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.08);
}

html[data-theme="light"] .ai-search-answer-title,
html[data-theme="light"] .ai-search-answer-body {
    color: rgba(20, 20, 28, 0.92);
}

html[data-theme="light"] .ai-search-answer-meta,
html[data-theme="light"] .ai-search-answer-loading {
    color: rgba(20, 20, 28, 0.55);
}

html[data-theme="light"] .ai-search-answer-model,
[data-theme="light"] .ai-search-answer-model {
    color-scheme: light;
    color: #1f2937;
    border-color: rgba(0, 0, 0, 0.16);
    background-color: rgba(0, 0, 0, 0.05);
    background-image: linear-gradient(45deg, transparent 50%, rgba(31, 41, 55, 0.55) 50%),
        linear-gradient(135deg, rgba(31, 41, 55, 0.55) 50%, transparent 50%);
}

html[data-theme="light"] .ai-search-answer-model:hover,
html[data-theme="light"] .ai-search-answer-model:focus,
[data-theme="light"] .ai-search-answer-model:hover,
[data-theme="light"] .ai-search-answer-model:focus {
    border-color: rgba(90, 13, 214, 0.45);
    background-color: rgba(90, 13, 214, 0.1);
    box-shadow: 0 0 0 1px rgba(90, 13, 214, 0.16);
}

html[data-theme="light"] .ai-search-answer-model option,
html[data-theme="light"] .ai-search-answer-model optgroup,
[data-theme="light"] .ai-search-answer-model option,
[data-theme="light"] .ai-search-answer-model optgroup {
    color: #1a1a1a;
    background-color: #f4f4f4;
}

html[data-theme="light"] .ai-search-answer-model option:checked,
[data-theme="light"] .ai-search-answer-model option:checked {
    color: #ffffff;
    background-color: #5a0dd6;
}

html[data-theme="stealth"] .ai-search-answer-model,
[data-theme="stealth"] .ai-search-answer-model,
html[data-theme="stealth-glass"] .ai-search-answer-model,
[data-theme="stealth-glass"] .ai-search-answer-model {
    color-scheme: dark;
    color: #e4dcff;
    border-color: rgba(185, 165, 255, 0.34);
    background-color: rgba(150, 118, 255, 0.16);
    background-image: linear-gradient(45deg, transparent 50%, rgba(228, 220, 255, 0.7) 50%),
        linear-gradient(135deg, rgba(228, 220, 255, 0.7) 50%, transparent 50%);
}

html[data-theme="stealth"] .ai-search-answer-model:hover,
html[data-theme="stealth"] .ai-search-answer-model:focus,
[data-theme="stealth"] .ai-search-answer-model:hover,
[data-theme="stealth"] .ai-search-answer-model:focus,
html[data-theme="stealth-glass"] .ai-search-answer-model:hover,
html[data-theme="stealth-glass"] .ai-search-answer-model:focus,
[data-theme="stealth-glass"] .ai-search-answer-model:hover,
[data-theme="stealth-glass"] .ai-search-answer-model:focus {
    border-color: rgba(185, 165, 255, 0.55);
    background-color: rgba(150, 118, 255, 0.24);
    box-shadow: 0 0 0 1px rgba(90, 13, 214, 0.22);
}

html[data-theme="stealth"] .ai-search-answer-model option,
html[data-theme="stealth"] .ai-search-answer-model optgroup,
[data-theme="stealth"] .ai-search-answer-model option,
[data-theme="stealth"] .ai-search-answer-model optgroup,
html[data-theme="stealth-glass"] .ai-search-answer-model option,
html[data-theme="stealth-glass"] .ai-search-answer-model optgroup,
[data-theme="stealth-glass"] .ai-search-answer-model option,
[data-theme="stealth-glass"] .ai-search-answer-model optgroup {
    color: #e4dcff;
    background-color: #190938;
}

html[data-theme="stealth"] .ai-search-answer-model option:checked,
[data-theme="stealth"] .ai-search-answer-model option:checked,
html[data-theme="stealth-glass"] .ai-search-answer-model option:checked,
[data-theme="stealth-glass"] .ai-search-answer-model option:checked {
    color: #ffffff;
    background-color: #5a0dd6;
}

/* Search main content layout */
.search-main-content {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 32px;
    align-items: start;
    min-height: auto;
    height: auto;
    overflow: visible;
    position: relative;
}

@media (max-width: 1200px) {
    .search-main-content {
        grid-template-columns: 1fr;
        gap: 24px;
    }
}

/* Side panel styling */
.side-panel {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 20px;
    backdrop-filter: blur(10px);
    position: sticky;
    top: 20px;
}

/* Search stats styling */
.search-stats {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 20px;
}

.stats-title {
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.stats-info {
    display: flex;
    flex-direction: column;
    gap: 6px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 13px;
}

/* Search filters styling */
.search-filters {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 16px;
}

.filter-title {
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.chip {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 16px;
    padding: 6px 12px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.8);
    cursor: pointer;
    transition: all 0.3s ease;
}

.chip:hover {
    background: rgba(73, 0, 194, 0.3);
    border-color: rgba(73, 0, 194, 0.5);
    color: white;
}

.chip.active {
    background: rgba(73, 0, 194, 0.6);
    border-color: rgba(73, 0, 194, 0.8);
    color: white;
}

/* Pagination controls styling */
.pagination-controls {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 20px;
    margin-top: 20px;
    text-align: center;
}

.pagination-info {
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
    margin-bottom: 16px;
}

.pagination-buttons {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

.page-btn, .load-more-btn {
    background: rgba(73, 0, 194, 0.6);
    border: 1px solid rgba(73, 0, 194, 0.8);
    color: white;
    padding: 8px 16px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 13px;
    font-weight: 500;
}

.page-btn:hover, .load-more-btn:hover {
    background: rgba(73, 0, 194, 0.8);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(73, 0, 194, 0.3);
}

/* Business profile styling */
.business-profile {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 20px;
}

.business-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.business-icon {
    width: 40px;
    height: 40px;
    background: rgba(73, 0, 194, 0.6);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 18px;
}

.business-name {
    color: rgba(255, 255, 255, 0.9);
    font-size: 16px;
    font-weight: 600;
    margin: 0;
}

.business-rating {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
}

.stars {
    color: #fdcb6e;
    font-size: 14px;
}

.rating-text {
    color: rgba(255, 255, 255, 0.7);
    font-size: 13px;
}

.business-details {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.detail-item {
    display: flex;
    align-items: center;
    gap: 8px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 13px;
}

.business-actions {
    display: flex;
    gap: 8px;
    margin-top: 12px;
}

.business-action-btn {
    background: rgba(73, 0, 194, 0.6);
    border: 1px solid rgba(73, 0, 194, 0.8);
    color: white;
    padding: 6px 12px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 12px;
    font-weight: 500;
}

.business-action-btn:hover {
    background: rgba(73, 0, 194, 0.8);
    transform: translateY(-1px);
}

/* Error card styling */
.error-card {
    background: rgba(255, 107, 107, 0.1);
    border: 1px solid rgba(255, 107, 107, 0.3);
    text-align: center;
    padding: 40px;
    grid-column: 1/-1;
}

.error-card .result-title {
    color: #ff6b6b;
    margin-bottom: 12px;
}

.error-card .result-snippet {
    margin-bottom: 12px;
    color: rgba(255, 255, 255, 0.8);
}

.search-results.loading {
    opacity: 0.6;
    transform: translateY(10px);
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px) translateZ(0);
    }
    to {
        opacity: 1;
        transform: translateY(0) translateZ(0);
    }
}

.search-results:empty { 
    display: block !important; 
}

/* Search results empty state */
.search-results:empty::before {
    content: 'No search results yet. Start searching to see results here.';
    display: block;
    text-align: center;
    color: rgba(255, 255, 255, 0.5);
    font-size: 16px;
    padding: 40px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    margin: 20px 0;
}

/* Results List */
.results-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
    gap: 20px;
    margin-bottom: 20px;
    padding-bottom: 20px;
}

/* Base Result Card Styles */
.results-list a {
    display: flex;
    flex-direction: column;
    height: auto;
    min-height: auto;
    max-height: none;
    overflow: visible;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(5px);
    padding: 0;
    text-decoration: none;
    color: inherit;
    transition: all 0.3s ease;
    box-sizing: border-box;
    word-wrap: break-word;
    overflow-wrap: break-word;
    position: relative;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.results-list a:hover {
    transform: translateY(-2px);
    border-color: rgba(73, 0, 194, 0.4);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
    background: rgba(255, 255, 255, 0.08);
}

/* Enhanced Result Card */
.result-card {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 12px;
    padding: 0;
    transition: all 0.3s ease;
    backdrop-filter: blur(5px);
    position: relative;
    overflow: visible;
    cursor: pointer;
    animation: slideInScale 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    animation-fill-mode: both;
    text-decoration: none;
    color: inherit;
    transform: none;
}

/* Result Content */
.result-content {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    height: 100%;
}

/* Result Header with favicon and site info */
.result-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.result-favicon {
    width: 16px;
    height: 16px;
    border-radius: 2px;
    flex-shrink: 0;
}

.result-site-info {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
}

.result-site-name {
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
    font-weight: 500;
}

.engine-badge {
    background: linear-gradient(135deg, #4900c2 0%, #6a1b9a 100%);
    color: white;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-left: auto;
}

/* Result Title */
.result-title {
    color: #ffffff;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Result Snippet */
.result-snippet {
    color: rgba(255, 255, 255, 0.7);
    font-size: 13px;
    line-height: 1.5;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Remove action buttons - keep it clean */

/* Result Thumbnail for images */
.result-thumbnail {
    width: 100%;
    max-height: 200px;
    object-fit: cover;
    border-radius: 8px;
    margin-top: 12px;
}

/* Staggered animation for result cards */
.result-card:nth-child(1) { animation-delay: 0.1s; }
.result-card:nth-child(2) { animation-delay: 0.2s; }
.result-card:nth-child(3) { animation-delay: 0.3s; }
.result-card:nth-child(4) { animation-delay: 0.4s; }
.result-card:nth-child(5) { animation-delay: 0.5s; }
.result-card:nth-child(6) { animation-delay: 0.6s; }
.result-card:nth-child(7) { animation-delay: 0.7s; }
.result-card:nth-child(8) { animation-delay: 0.8s; }
.result-card:nth-child(9) { animation-delay: 0.9s; }
.result-card:nth-child(10) { animation-delay: 1.0s; }

/* Result Content Container */
.result-content {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-top: 40px;
    padding-left: 40px;
    padding-right: 40px;
}

/* Result content spacing */
.result-content > *:not(:first-child) {
    margin-top: 4px;
}

/* Enhanced Source Badges */
.source-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    z-index: 10;
    background: rgba(52, 152, 219, 0.2);
    color: #3498db;
    border: 1px solid rgba(52, 152, 219, 0.3);
    max-width: calc(100% - 24px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: all 0.3s ease;
    box-shadow: none;
}

/* Source badges in search status (sidebar) */
.search-sources {
    overflow: visible;
}

.search-sources .source-badge {
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    display: inline-flex !important;
    margin: 2px 4px;
    padding: 6px 10px;
    font-size: 11px;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    transition: filter 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
    pointer-events: auto !important;
    cursor: pointer !important;
    z-index: 5 !important;
    overflow: visible !important;
}

.search-sources .source-badge:hover {
    transform: none !important;
    filter: brightness(1.15);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* View controls attached above the results frame, left-aligned */
.search-results-frame {
    position: relative;
    width: min(1400px, calc(100% - 48px));
    margin: 0 auto 0;
    box-sizing: border-box;
    flex: 0 0 auto;
    min-height: 180px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.search-view-controls {
    position: static;
    align-self: flex-start;
    z-index: 5;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    margin: 0 0 -1px 0;
    border-radius: 12px 12px 0 0;
    background: rgba(20, 20, 20, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-bottom-color: transparent;
    backdrop-filter: blur(10px);
}

.search-view-controls[hidden] {
    display: none !important;
}

.search-view-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.45);
    padding: 0 6px;
}

.search-view-btn {
    appearance: none;
    border: 1px solid transparent;
    background: transparent;
    color: rgba(255, 255, 255, 0.7);
    font-size: 12px;
    font-weight: 600;
    padding: 6px 10px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.search-view-btn:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.06);
}

.search-view-btn.active {
    color: #fff;
    background: rgba(73, 0, 194, 0.35);
    border-color: rgba(167, 139, 250, 0.35);
}

html[data-theme="light"] .search-results,
html.theme-light .search-results,
html[data-theme="light"] #search-results.search-results,
html.theme-light #search-results.search-results,
html[data-theme="light"] .search-results-frame .search-results,
html.theme-light .search-results-frame .search-results {
    background: #f5f2ec !important;
    border-color: rgba(55, 48, 40, 0.14) !important;
    box-shadow: 0 4px 20px rgba(40, 32, 24, 0.08) !important;
    color: #1c1916 !important;
}

html[data-theme="light"] .search-view-controls,
html.theme-light .search-view-controls {
    background: #f5f2ec !important;
    border-color: rgba(55, 48, 40, 0.14) !important;
    border-bottom-color: transparent !important;
}

html[data-theme="light"] .search-view-label,
html.theme-light .search-view-label {
    color: rgba(28, 25, 22, 0.45) !important;
}

html[data-theme="light"] .search-view-btn,
html.theme-light .search-view-btn {
    color: rgba(28, 25, 22, 0.72) !important;
}

html[data-theme="light"] .search-view-btn:hover,
html.theme-light .search-view-btn:hover {
    color: #1c1916 !important;
    background: rgba(55, 48, 40, 0.06) !important;
}

html[data-theme="light"] .search-view-btn.active,
html.theme-light .search-view-btn.active {
    color: #ffffff !important;
    background: rgba(73, 0, 194, 0.85) !important;
    border-color: rgba(73, 0, 194, 0.65) !important;
}

html[data-theme="light"] .search-results:empty::before,
html.theme-light .search-results:empty::before {
    color: #6b655c !important;
}

/* Engines used: full-size until search completes */
.search-status {
    width: min(1100px, calc(100% - 48px));
    margin: 0 auto 16px;
    background: rgba(22, 22, 30, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    /* Extra pad so badge box-shadows are not squared off at the card edge.
       Do not use backdrop-filter here: Chromium forces overflow clipping with it,
       which cuts the engine glow along a hard line. */
    padding: 18px 20px 22px;
    transition: max-width 0.28s ease, padding 0.28s ease, margin 0.28s ease;
    box-sizing: border-box;
    flex: 0 0 auto;
    overflow: visible;
}

.search-status-indicator {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    color: rgba(255, 255, 255, 0.9);
    font-weight: 600;
    font-size: 13px;
}

.search-status-indicator i {
    color: rgba(167, 139, 250, 0.95);
}

.search-sources {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    overflow: visible;
    padding: 8px 4px 10px;
}

/* After search: dock to the right above the results frame, scale badges, never clip */
.search-status.is-docked {
    width: fit-content;
    max-width: min(1400px, calc(100% - 48px));
    margin-left: auto;
    margin-right: max(24px, calc((100% - min(1400px, 100% - 48px)) / 2));
    padding: 8px 12px;
}

.search-status.is-docked .search-status-indicator {
    margin-bottom: 6px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.62);
}

.search-status.is-docked .search-sources {
    gap: 5px;
    flex-wrap: wrap;
}

.search-status.is-docked .search-sources .source-badge {
    padding: 4px 8px !important;
    height: auto !important;
    min-height: 22px !important;
    max-height: none !important;
    font-size: 10px !important;
    transform: none !important;
}

.search-status.is-docked .source-badge-icon,
.search-status.is-docked .search-sources .source-badge img {
    width: 11px !important;
    height: 11px !important;
    min-width: 11px !important;
    min-height: 11px !important;
    max-width: 11px !important;
    max-height: 11px !important;
}

/* Search loader text styling */
.search-loader-text {
    color: rgba(255, 255, 255, 0.8);
    font-size: 14px;
    font-weight: 500;
    margin-top: 16px;
    text-align: center;
}

.search-stream-status {
    grid-column: 1 / -1;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 12px;
    padding: 10px 14px;
    border-radius: 12px;
    background: rgba(73, 0, 194, 0.18);
    border: 1px solid rgba(124, 58, 237, 0.35);
    color: rgba(255, 255, 255, 0.88);
    font-size: 13px;
    font-weight: 600;
}

.search-stream-status i {
    color: #a78bfa;
}

.search-main-content.images-mode > .search-stream-status {
    grid-column: 1 / -1;
}

.result-favicon.is-fallback {
    object-fit: cover !important;
    background: #2a2a36 !important;
    padding: 0 !important;
}

.source-badge:hover {
    transform: none;
    filter: brightness(1.15);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.source-badge.reddit {
    background: rgba(255, 107, 53, 0.2);
    color: #ff6b35;
    border-color: rgba(255, 107, 53, 0.3);
}

.source-badge.github {
    background: rgba(36, 41, 46, 0.2);
    color: #24292e;
    border-color: rgba(36, 41, 46, 0.3);
}

.source-badge.archive {
    background: rgba(0, 166, 81, 0.2);
    color: #00a651;
    border-color: rgba(0, 166, 81, 0.3);
}

.source-badge.academic {
    background: rgba(142, 68, 173, 0.2);
    color: #8e44ad;
    border-color: rgba(142, 68, 173, 0.3);
}

.source-badge.web {
    background: rgba(52, 152, 219, 0.2);
    color: #3498db;
    border-color: rgba(52, 152, 219, 0.3);
}

.source-badge.google {
    background: rgba(66, 133, 244, 0.2);
    color: #4285f4;
    border-color: rgba(66, 133, 244, 0.3);
}

.source-badge.bing {
    background: rgba(0, 120, 212, 0.2);
    color: #0078d4;
    border-color: rgba(0, 120, 212, 0.3);
}

.source-badge.duckduckgo {
    background: rgba(222, 88, 51, 0.2);
    color: #de5833;
    border-color: rgba(222, 88, 51, 0.3);
}

.source-badge.searxng {
    background: rgba(51, 122, 183, 0.2);
    color: #337ab7;
    border-color: rgba(51, 122, 183, 0.3);
}

.source-badge.yacy {
    background: rgba(40, 167, 69, 0.2);
    color: #28a745;
    border-color: rgba(40, 167, 69, 0.3);
}

.source-badge.scrapers {
    background: rgba(73, 0, 194, 0.22);
    color: #7b5cff;
    border-color: rgba(73, 0, 194, 0.4);
}

/* Relevance Score */
.relevance-score {
    position: absolute;
    top: 12px;
    right: 12px;
    padding: 4px 8px;
    border-radius: 12px;
    background: rgba(231, 76, 60, 0.2);
    color: #e74c3c;
    font-size: 10px;
    font-weight: 600;
    z-index: 10;
    border: 1px solid rgba(231, 76, 60, 0.3);
    max-width: calc(100% - 24px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: all 0.3s ease;
    box-shadow: none;
}

.relevance-score:hover {
    transform: scale(1.05);
    filter: brightness(1.2);
}

.relevance-score.high {
    background: rgba(0, 184, 148, 0.2);
    color: #00b894;
    border-color: rgba(0, 184, 148, 0.3);
}

.relevance-score.good {
    background: rgba(253, 203, 110, 0.2);
    color: #fdcb6e;
    border-color: rgba(253, 203, 110, 0.3);
}

.relevance-score.fair {
    background: rgba(243, 156, 18, 0.2);
    color: #f39c12;
    border-color: rgba(243, 156, 18, 0.3);
}

.relevance-score.low {
    background: rgba(231, 76, 60, 0.2);
    color: #e74c3c;
    border-color: rgba(231, 76, 60, 0.3);
}

/* Enhanced Thumbnails */
.result-thumbnail {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 12px;
    transition: transform 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.result-thumbnail:hover {
    transform: scale(1.02);
}

.result-thumbnail.web-thumbnail {
    height: 120px;
    object-fit: cover;
}

.result-favicon {
    width: 16px;
    height: 16px;
    margin-right: 8px;
    vertical-align: middle;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.1);
    padding: 2px;
    position: relative;
    z-index: 1;
}

/* Result Metadata */
.result-metadata {
    margin-top: 8px;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.6);
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.result-metadata .author,
.result-metadata .subreddit,
.result-metadata .date {
    background: rgba(255, 255, 255, 0.1);
    padding: 2px 6px;
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.result-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(73,0,194,0.05) 0%, rgba(106,27,154,0.05) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

/* Remove underlines from all elements in cards */
.result-card * {
    text-decoration: none !important;
    border-bottom: none !important;
    text-decoration-line: none !important;
}

.result-card a,
.result-card a:hover,
.result-card a:visited,
.result-card a:active {
    text-decoration: none !important;
    border-bottom: none !important;
    color: inherit !important;
}

/* Staggered animation delays */
.result-card:nth-child(1) { animation-delay: 0.1s; }
.result-card:nth-child(2) { animation-delay: 0.2s; }
.result-card:nth-child(3) { animation-delay: 0.3s; }
.result-card:nth-child(4) { animation-delay: 0.4s; }
.result-card:nth-child(5) { animation-delay: 0.5s; }
.result-card:nth-child(6) { animation-delay: 0.6s; }

@keyframes slideInScale {
    from {
        opacity: 0;
        transform: translateY(40px) scale(0.9);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Shimmer effect */
.result-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
    transition: left 0.6s;
}

.result-card:hover::before {
    left: 100%;
}

/* Hover effects */
.result-card:hover {
    transform: translateY(-2px);
    background: rgba(255,255,255,0.08);
    border-color: rgba(73,0,194,0.4);
    box-shadow: 0 8px 25px rgba(0,0,0,0.2);
}

.result-card:active {
    transform: translateY(-1px);
}

/* Result Card Header */
.result-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    position: relative;
}

.result-open-icon {
    position: absolute;
    top: -4px;
    right: -4px;
    width: 24px;
    height: 24px;
    background: rgba(73,0,194,0.9);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    opacity: 0;
    transform: scale(0.8);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.2);
}

.result-card:hover .result-open-icon {
    opacity: 1;
    transform: scale(1);
}

/* Favicon and thumbnails */
.result-fav {
    width: 24px;
    height: 24px;
    border-radius: 8px;
    background: rgba(255,255,255,0.1);
    padding: 4px;
    transition: transform 0.3s ease;
}

.result-card:hover .result-fav {
    transform: rotate(5deg) scale(1.1);
}

.result-favicon {
    width: 20px;
    height: 20px;
    border-radius: 4px;
    object-fit: cover;
    background: rgba(255,255,255,0.1);
}

.result-thumbnail {
    width: 100%;
    height: 200px;
    border-radius: 12px;
    object-fit: cover;
    margin-bottom: 12px;
    transition: transform 0.3s ease;
}

.result-card:hover .result-thumbnail {
    transform: scale(1.02);
}

/* Result Content */
.result-content {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 8px;
}

.result-title {
    font-size: 16px;
    color: #fff;
    margin-bottom: 8px;
    font-weight: 600;
    line-height: 1.4;
    flex: 1;
    margin-top: 0;
}

.result-domain {
    display: inline-block;
    color: rgba(255,255,255,0.5);
    font-size: 12px;
    font-weight: 400;
    background: rgba(255,255,255,0.04);
    padding: 2px 6px;
    border-radius: 4px;
    margin-left: 8px;
    transition: all 0.3s ease;
}

.result-card:hover .result-domain {
    background: rgba(73,0,194,0.15);
    color: rgba(255,255,255,0.8);
}

.result-snippet {
    color: rgba(255,255,255,0.7);
    font-size: 13px;
    line-height: 1.5;
    margin-top: 8px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    letter-spacing: 0.1px;
}

/* Engine Badge - Removed, replaced with source-badge and relevance-score */

/* Loading states */
.search-results.loading .result-card {
    background: rgba(255,255,255,0.04);
    animation: pulse 1.5s infinite alternate;
}

.search-results.loading {
    opacity: 0.6;
    transform: translateY(10px);
}

@keyframes pulse {
    from { opacity: 0.6; }
    to { opacity: 1; }
}

.result-card.loading {
    animation: quickPulse 0.6s ease-out;
}

@keyframes quickPulse {
    0% { opacity: 0.6; transform: scale(0.95); }
    50% { opacity: 0.8; transform: scale(1); }
    100% { opacity: 1; transform: scale(1.02); }
}

/* Focus states for accessibility */
.result-card:focus {
    outline: 2px solid #4900c2;
    outline-offset: 2px;
}

/* Responsive design */
@media (max-width: 1400px) {
    .results-list {
        grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    }
}

@media (max-width: 1200px) {
    .results-list {
        grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    }
    
    .search-main-content {
        grid-template-columns: 1fr;
        gap: 24px;
        overflow: visible;
    }
}

@media (max-width: 900px) {
    .results-list {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        gap: 16px;
    }
}

@media (max-width: 640px) {
    .results-list {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    
    .search-results {
        margin: 20px !important;
        margin-bottom: 60px !important;
        width: calc(100vw - 40px) !important;
        max-width: calc(100vw - 40px) !important;
        padding: 20px !important;
        overflow: visible;
    }
    
    .result-card {
        padding: 16px;
    }
    
    .search-main-content {
        grid-template-columns: 1fr;
        gap: 20px;
        overflow: visible;
    }
    
    /* Ensure mobile scrolling works */
    body, html {
        overflow-y: auto !important;
        overflow-x: hidden;
    }
    
    .browser-container {
        overflow: visible !important;
    }
    
    .web-content {
        overflow: visible !important;
    }
}

/* Ensure proper scrolling for the entire page */
#search-results-frame {
    min-height: auto;
    height: auto;
    overflow: visible;
    position: relative;
    display: block;
}

#search-results {
    min-height: auto;
    height: auto;
    overflow: visible;
    position: relative;
    display: flex;
    flex-direction: column;
}

/* Keep search stack in DOM order: hero, AI, engines, loader, results */
#welcome-screen > #home-vanta-bg { order: 0; flex: none; }
#welcome-screen > .home-hero { order: 1; flex: 0 0 auto; flex-shrink: 0; }
#welcome-screen > #ai-search-answer { order: 2; flex: 0 0 auto; }
#welcome-screen > #search-status { order: 3; flex: 0 0 auto; }
#welcome-screen > #search-loader { order: 4; flex: 0 0 auto; }
#welcome-screen > #search-results-frame { order: 5; flex: 0 0 auto; }

/* Welcome screen fills web-content exactly. web-content is already inset for
   top/bottom chrome via --bottom-chrome-reserve, so do not use 100vh here. */
#welcome-screen,
div#welcome-screen.welcome-screen {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    z-index: 1 !important;
    box-sizing: border-box !important;
    padding-bottom: 24px !important;
    margin: 0 !important;
    flex: none !important;
}

/* Bottom dock: keep home content flush to the tab strip (no dead black pad). */
html.bottom-layout-html #welcome-screen,
html.bottom-layout-html div#welcome-screen.welcome-screen,
body.bottom-layout-body #welcome-screen,
body.bottom-layout-body div#welcome-screen.welcome-screen,
html.welcome-visible.bottom-layout-html #welcome-screen,
body.welcome-visible.bottom-layout-body #welcome-screen {
    padding-bottom: 0 !important;
}

/* Must beat display:flex !important above when navigating away from home. */
body.browsing #welcome-screen,
body.browsing div#welcome-screen.welcome-screen,
#welcome-screen.is-hidden,
div#welcome-screen.welcome-screen.is-hidden,
#welcome-screen[hidden],
div#welcome-screen.welcome-screen[hidden] {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* DISABLE ALL CONFLICTING SCROLL RULES - UI bars must NEVER scroll */
/* All scrolling is now handled within individual content containers only */

/* Allow scrolling for welcome screen while keeping UI bars fixed */
body, html {
    height: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    /* Disable body scroll but allow welcome screen to scroll */
    overflow: hidden !important;
}

/* Ensure title bar is ALWAYS fixed regardless of layout */
.chrome-titlebar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 100003 !important;
    transform: translateZ(0) !important;
    will-change: transform !important;
}

/* CLEAN LAYOUT - NO CONFLICTS */

/* Ensure search results are properly displayed - override styles.css */
#welcome-screen .search-results-frame .search-results,
.welcome-screen .search-results-frame .search-results,
.search-results-frame .search-results,
#search-results.search-results {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    margin-bottom: 0 !important;
    padding: 24px 24px 30px !important;
    box-sizing: border-box !important;
    min-height: 180px !important;
    flex: 0 0 auto !important;
    height: auto !important;
    overflow: visible !important;
    border-top-left-radius: 0 !important;
}

/* Search results work in both layouts */

/* Ensure the main content area is properly sized */
.search-main-content {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 32px;
    align-items: start;
    min-height: auto;
    height: auto;
    overflow: visible;
    position: relative;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
}

/* Result cards: previews, crisp icons, no clipping */
.results-list {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)) !important;
    gap: 18px !important;
}

.results-list a.result-card,
.result-card {
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 0 !important;
    border-radius: 14px !important;
}

.result-card .result-content {
    display: grid !important;
    grid-template-columns: 112px minmax(0, 1fr) !important;
    gap: 14px !important;
    padding: 14px !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    position: relative !important;
    width: 100% !important;
}

.result-preview {
    width: 112px;
    height: 112px;
    border-radius: 12px;
    overflow: hidden;
    background: linear-gradient(145deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02));
    border: 1px solid rgba(255,255,255,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.result-preview-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}

.result-preview.is-icon-fallback {
    background:
        radial-gradient(circle at 30% 30%, rgba(73,0,194,0.28), transparent 55%),
        linear-gradient(160deg, rgba(36,36,48,0.98), rgba(16,16,22,0.98));
}

.result-preview.is-empty-preview::after {
    content: '';
    width: 34px;
    height: 34px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.14);
    background:
        linear-gradient(135deg, rgba(255,255,255,0.12), rgba(255,255,255,0.02));
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.2);
    opacity: 0.7;
}

.result-preview.is-icon-fallback .result-preview-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    image-rendering: auto;
    border-radius: 0;
    background: transparent;
    padding: 0;
    box-sizing: border-box;
}

.result-preview.is-icon-fallback:not(.is-empty-preview) .result-preview-image {
    display: block;
}

.result-body {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow: visible;
}

.result-card .result-header {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 0 !important;
    flex-wrap: wrap;
    position: static !important;
}

.result-card .result-favicon {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px;
    min-height: 28px;
    border-radius: 8px !important;
    object-fit: contain !important;
    background: rgba(255,255,255,0.1) !important;
    padding: 3px !important;
    margin: 0 !important;
    image-rendering: -webkit-optimize-contrast;
    flex-shrink: 0;
}

.engine-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    background: rgba(255,255,255,0.08) !important;
    color: #fff !important;
    border: 1px solid rgba(255,255,255,0.14) !important;
    padding: 4px 8px 4px 6px !important;
    border-radius: 999px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0.2px !important;
    text-transform: none !important;
    margin: 0 !important;
    max-width: 100%;
    line-height: 1.2;
    height: 24px;
    box-sizing: border-box;
}

.engine-badge-icon {
    width: 14px !important;
    height: 14px !important;
    min-width: 14px !important;
    min-height: 14px !important;
    max-width: 14px !important;
    max-height: 14px !important;
    border-radius: 0 !important;
    object-fit: contain !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    flex-shrink: 0 !important;
    display: block !important;
    image-rendering: auto;
}

.engine-badge-label {
    white-space: nowrap;
}

.result-card .result-site-name {
    color: rgba(255,255,255,0.72) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.result-card .result-title {
    color: #fff !important;
    font-size: 16px !important;
    font-weight: 650 !important;
    line-height: 1.35 !important;
    margin: 0 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    flex: 0 0 auto !important;
}

.result-card .result-snippet {
    color: rgba(255,255,255,0.74) !important;
    font-size: 13px !important;
    line-height: 1.45 !important;
    margin: 0 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    flex: 0 0 auto !important;
}

.result-url {
    color: rgba(170, 190, 255, 0.82);
    font-size: 12px;
    line-height: 1.35;
    word-break: break-all;
    overflow-wrap: anywhere;
    margin: 0;
    opacity: 0.95;
}

.search-sources .source-badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 5px 10px !important;
    position: static !important;
    height: 28px !important;
    min-height: 28px !important;
    max-height: 28px !important;
    box-sizing: border-box !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    cursor: pointer !important;
    font-family: inherit !important;
}

.search-sources .source-badge.deselected {
    opacity: 0.35 !important;
    filter: grayscale(0.55) !important;
    box-shadow: none !important;
}

.source-badge-icon,
.search-sources .source-badge-icon,
.search-sources .source-badge img {
    width: 14px !important;
    height: 14px !important;
    min-width: 14px !important;
    min-height: 14px !important;
    max-width: 14px !important;
    max-height: 14px !important;
    border-radius: 0 !important;
    object-fit: contain !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    flex-shrink: 0 !important;
    display: block !important;
    image-rendering: auto !important;
}

.search-sources .source-badge > span {
    line-height: 1 !important;
    font-size: 11px !important;
}

.source-badge.success .source-badge-icon,
.source-badge.searching .source-badge-icon {
    opacity: 1;
}

.source-badge.failed .source-badge-icon {
    opacity: 0.55;
    filter: grayscale(0.35);
}

@media (max-width: 700px) {
    .results-list {
        grid-template-columns: 1fr !important;
    }

    .result-card .result-content {
        grid-template-columns: 84px minmax(0, 1fr) !important;
        gap: 12px !important;
        padding: 12px !important;
    }

    .result-preview {
        width: 84px;
        height: 84px;
    }

    .result-preview.is-icon-fallback:not(.is-empty-preview) .result-preview-image {
        width: 100%;
        height: 100%;
        padding: 0;
    }
}

/* Result view modes: list (classic), cards (stack), grid (current) */
#search-results.view-list .results-list,
.search-results.view-list .results-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 28px !important;
    max-width: 720px;
}

#search-results.view-list .result-card,
.search-results.view-list .result-card {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

#search-results.view-list .result-card .result-content,
.search-results.view-list .result-card .result-content {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
    gap: 4px !important;
    padding: 0 !important;
}

#search-results.view-list .result-preview,
.search-results.view-list .result-preview {
    display: none !important;
}

#search-results.view-list .result-title,
.search-results.view-list .result-title {
    font-size: 18px !important;
    color: #8ab4f8 !important;
    -webkit-line-clamp: 2 !important;
}

#search-results.view-list .result-url,
.search-results.view-list .result-url {
    color: #81c995 !important;
    order: -1;
    font-size: 13px;
}

#search-results.view-list .result-snippet,
.search-results.view-list .result-snippet {
    -webkit-line-clamp: 3 !important;
    font-size: 14px !important;
}

#search-results.view-list .engine-badge,
.search-results.view-list .engine-badge {
    opacity: 0.85;
}

#search-results.view-cards .results-list,
.search-results.view-cards .results-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    max-width: 860px;
}

#search-results.view-cards .result-card .result-content,
.search-results.view-cards .result-card .result-content {
    grid-template-columns: 140px minmax(0, 1fr) !important;
}

#search-results.view-cards .result-preview,
.search-results.view-cards .result-preview {
    width: 140px;
    height: 140px;
}

#search-results.view-grid .results-list,
.search-results.view-grid .results-list {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)) !important;
    gap: 18px !important;
    max-width: none;
}