*, *::before, *::after { box-sizing: border-box; }

:root {
    /* Width of the docked image preview. Both the pane and the space the
       results column gives up read this, so they stay in lockstep. */
    --preview-width: 50%;
    --bg: #ffffff;
    --text: #1f1f1f;
    --text-secondary: #70757a;
    --content-bg: #ffffff;
    --input-bg: #f0f4f9;
    --border: #dee2e6;
    --primary: #1a73e8;
    --active-item: #e2e7ed;
    --link: #1a0dab;
    --url-color: #006621;
    --result-desc: #4d5156;
    --card-bg: #ffffff;
    --footer-bg: #f2f2f2;
    --footer-border: #dadce0;
    --badge-wiki: #1a73e8;
    --badge-text: #ffffff;
    --error-text: #b3261e;
}
html.dark, body.dark {
    --bg: #131314;
    --text: #e3e3e3;
    --text-secondary: #9aa0a6;
    --content-bg: #131314;
    --input-bg: #1e1f20;
    --border: #444746;
    --primary: #1a73e8;
    --active-item: #333537;
    --link: #8ab4f8;
    --url-color: #bdc1c6;
    --result-desc: #bdc1c6;
    --card-bg: #1e1f20;
    --footer-bg: #171717;
    --footer-border: #3c4043;
    --badge-wiki: #8ab4f8;
    --badge-text: #131314;
    --error-text: #f2b8b5;
}

body {
    font-family: "Inter", "Segoe UI", Roboto, sans-serif;
    background: var(--bg);
    color: var(--text);
    margin: 0;
    padding: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    transition: background .2s ease, color .2s;
}

a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---- Top Nav ---- */
.top-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 20px;
    font-size: 13px;
    flex-shrink: 0;
}
.top-nav-left, .top-nav-right {
    display: flex;
    align-items: center;
    /* Controls supply their own padding instead of relying on a flex gap. A
       gap is a dead zone: the cursor stops being a pointer over it, which
       made the nav links feel broken. Padding keeps the same visual
       spacing while the entire pill is clickable. */
    gap: 0;
}
.top-nav-right {
    gap: 4px;
}
/* Shared paint for every nav link, including the sub-page logo. This rule
   declares NO geometry on purpose: when two rules set `padding` on the same
   element, the hit box is decided by a specificity tie rather than by
   intent, and the box can end up smaller than the pill that is painted on
   it. */
.top-nav a {
    color: var(--text);
    opacity: 0.85;
    flex-shrink: 0;
    text-decoration: none;
    /* Layout-neutral (no offsets), so the link always hit-tests above any
       later sibling layer and nothing invisible can steal the pointer. */
    position: relative;
    z-index: 1;
}
/* Opacity only, and deliberately not transitioned (see below). Replaces the
   old `.top-nav a:hover` rule, which also carried a `text-decoration:
   underline` that lost a specificity tie and was therefore never rendered. */
.top-nav a:hover {
    opacity: 1;
}
/* Nav links only — the logo carries its own inline sizing and must not shift. */
.top-nav a:not(.results-logo) {
    display: inline-flex;
    align-items: center;
    box-sizing: border-box;
    /* Fixed box, declared once. The hover state only swaps a colour, so it
       can never resize, re-position or re-flow the link or its sibling. */
    height: 36px;
    padding: 0 10px;
    margin: 0;
    border: 0;
    border-radius: 8px;
    background-color: transparent;
    font: inherit;
    line-height: normal;
    white-space: nowrap;
    cursor: pointer;
    /* Paint-only. `opacity` is deliberately NOT transitioned: animating it
       promotes the link to its own composited layer, and two adjacent links
       whose layers share a subpixel edge make the browser's hit test
       alternate between them frame to frame. That is what made the cursor
       blink while the pointer sat still. */
    transition: background-color .15s ease;
}
.top-nav a:not(.results-logo):hover {
    background-color: var(--input-bg);
}
/* The sub-page logo keeps its own plain box and never gets the pill. */
.top-nav a.results-logo {
    display: inline-block;
    padding: 6px 0;
}
.top-nav a:not(.results-logo):focus-visible,
.icon-btn:focus-visible {
    outline: 2px solid var(--text-secondary);
    outline-offset: 1px;
}
/* Fixed 40x40 box for the header buttons. The previous `min-width`/
   `min-height` let the box follow its content, and the theme button's only
   child is swapped (sun <-> moon) on every click, so its hit area was never
   guaranteed to stay put. Fixed sizing makes that swap a pure paint change.
   Scoped to the nav so the smaller settings-modal close button is
   unaffected. */
.top-nav .icon-btn {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
}
/* Both icons are taken out of flow, so toggling the theme never reflows the
   button or nudges its neighbour. Scoped to the nav: the settings-modal
   close button sizes itself from its in-flow icon, so it must keep this. */
.top-nav .icon-btn > svg {
    position: absolute;
    inset: 0;
    margin: auto;
}

.icon-btn {
    background-color: transparent;
    border: none;
    cursor: pointer;
    padding: 10px;
    border-radius: 50%;
    color: var(--text);
    opacity: 0.7;
    display: flex;
    align-items: center;
    justify-content: center;
    /* An inline SVG leaves a descender gap in the line box, which pushed the
       50% border-radius circle out of line with the icon drawn inside it. */
    line-height: 0;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    /* Layout-neutral (no offsets), so the button always hit-tests above any
       later sibling layer and nothing invisible can steal the pointer. */
    position: relative;
    z-index: 1;
    /* Paint-only. `opacity` is deliberately NOT transitioned: animating it
       promotes the button to its own composited layer, and two adjacent
       buttons whose layers share a subpixel edge make the browser's hit test
       alternate between them frame to frame. That is what made the cursor
       blink. */
    transition: background-color .2s ease;
}
.icon-btn:hover {
    background-color: rgba(128,128,128,0.1);
    opacity: 1;
}

/* ---- Home Page ---- */
#homeUI {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
}
.home-center {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0 16px;
    margin-top: -80px;
}
.home-logo {
    font-size: 88px;
    font-weight: 700;
    letter-spacing: -0.04em;
    margin-bottom: 28px;
    user-select: none;
    line-height: 1;
}
.home-logo span:nth-child(1) { color: var(--primary); }
.home-logo span:nth-child(2) { color: var(--primary); }
.home-logo span:nth-child(3) { color: var(--primary); }
.home-logo span:nth-child(4) { color: var(--primary); }
.home-logo span:nth-child(5) { color: var(--primary); }
.home-logo span:nth-child(6) { color: var(--primary); }
.home-logo span:nth-child(7) { color: var(--primary); }

.home-tagline {
    font-size: 14px;
    color: var(--text-secondary);
    text-align: center;
    margin-bottom: 24px;
    letter-spacing: 0.01em;
}

/* ---- Search Bar ---- */
.search-section {
    width: 100%;
    max-width: 584px;
    margin: 0 auto;
}
.search-bar-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 24px;
    padding: 0 16px;
    transition: box-shadow .2s, border-color .2s;
    box-shadow: none;
}
.search-bar-wrapper:hover,
.search-bar-wrapper:focus-within {
    box-shadow: 0 1px 6px rgba(32,33,36,0.28);
    border-color: rgba(223,225,229,0);
}
.search-bar-wrapper .search-icon {
    flex-shrink: 0;
    color: #9aa0a6;
    display: flex;
    align-items: center;
    margin-right: 8px;
}
.search-bar-wrapper input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-size: 16px;
    padding: 12px 0;
    color: var(--text);
    font-family: inherit;
    min-width: 0;
}
.search-bar-wrapper input::placeholder {
    color: #9aa0a6;
}
.search-bar-wrapper .clear-btn {
    display: none;
    flex-shrink: 0;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    color: var(--text-secondary);
    border-radius: 50%;
}
.search-bar-wrapper .clear-btn.visible { display: flex; }
.search-bar-wrapper .clear-btn:hover { background: var(--active-item); }
/* Send button: lives inside the bar on the right, uses the same accent and
   surface variables as the rest of the UI so it follows light and dark. */
.search-bar-wrapper .send-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    margin-left: 4px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    cursor: pointer;
    transition: background .2s, opacity .2s, transform .1s, box-shadow .2s;
}
.search-bar-wrapper .send-btn:not(:disabled):hover {
    box-shadow: 0 1px 4px rgba(26,115,232,.4);
    filter: brightness(1.07);
}
.search-bar-wrapper .send-btn:not(:disabled):active { transform: scale(.92); }
.search-bar-wrapper .send-btn:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}
.search-bar-wrapper .send-btn:disabled {
    background: var(--active-item);
    color: var(--text-secondary);
    cursor: default;
    opacity: .75;
}
html.dark .search-bar-wrapper .send-btn { color: #fff; }

/* Autocomplete */
.search-bar-wrapper.dd-open {
    border-radius: 24px 24px 0 0 !important;
    border-bottom-color: transparent;
}
.autocomplete-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--bg);
    border: 1px solid var(--border);
    border-top: none;
    border-radius: 0 0 24px 24px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
    z-index: 1000;
    max-height: 360px;
    overflow-y: auto;
    display: none;
}
.autocomplete-dropdown.show { display: block; }
.autocomplete-item {
    padding: 8px 16px;
    cursor: pointer;
    font-size: 14px;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 12px;
    transition: background .1s;
}
.autocomplete-item:hover,
.autocomplete-item.highlighted {
    background: var(--active-item);
}
.autocomplete-item .autocomplete-icon {
    color: #9aa0a6;
    flex-shrink: 0;
}
.autocomplete-item .match {
    font-weight: 600;
}

/* ---- Search Buttons ---- */
.search-buttons {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 28px;
    flex-wrap: wrap;
}
.search-btn {
    background: var(--input-bg);
    border: 1px solid transparent;
    border-radius: 4px;
    color: var(--text);
    font-size: 14px;
    padding: 0 16px;
    height: 36px;
    line-height: 36px;
    text-align: center;
    cursor: pointer;
    user-select: none;
    font-family: inherit;
    transition: border-color .2s, box-shadow .2s;
}
.search-btn:hover {
    border-color: var(--border);
    box-shadow: 0 1px 1px rgba(0,0,0,0.08);
}

.quick-wiki-teaser {
    width: 100%;
    margin-top: 24px;
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--card-bg);
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 10px 12px;
    text-align: left;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.quick-wiki-teaser-mark {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: var(--primary);
    font-weight: 700;
    font-family: Georgia, serif;
    font-size: 19px;
}
.quick-wiki-teaser-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.quick-wiki-teaser-copy strong { font-size: 14px; }
.quick-wiki-teaser-copy span {
    color: var(--text-secondary);
    font-size: 12px;
    line-height: 1.35;
}
.quick-wiki-example {
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 7px 12px;
    color: var(--link);
    background: var(--input-bg);
    font: inherit;
    font-size: 12px;
    cursor: pointer;
    white-space: nowrap;
}
.quick-wiki-example:hover {
    border-color: var(--primary);
    background: var(--active-item);
}
.index-stats {
    grid-column: 2 / 4;
    color: var(--text-secondary);
    font-size: 11px;
}

/* ---- Footer ---- */
.footer {
    background: var(--footer-bg);
    border-top: 1px solid var(--footer-border);
    flex-shrink: 0;
    font-size: 14px;
    color: var(--text-secondary);
}
.footer-country {
    padding: 12px 28px;
    border-bottom: 1px solid var(--footer-border);
    font-size: 15px;
}
.footer-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 12px 28px;
    gap: 8px 16px;
}
.footer-links .links-group {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
}
.footer-links a {
    color: var(--text-secondary);
    white-space: nowrap;
}
.footer-links a:hover { text-decoration: underline; }
.footer-brand {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--text-secondary);
    opacity: 0.7;
}
.footer-brand img { width: 16px; height: 16px; border-radius: 3px; }

/* ---- Results Page ---- */
#resultsUI {
    display: none;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
}
#resultsUI.visible { display: flex; }

/* When the preview pane is open it reserves the right half of the viewport.
   The results column shrinks by the same amount instead of sliding underneath
   the pane, so no image or result is ever covered. Both sides read the same
   custom property so the pane edge and the reflow line cannot drift apart. */
body.preview-open #resultsUI {
    padding-right: var(--preview-width, 50%);
    transition: padding-right 180ms ease;
}
#resultsUI {
    transition: padding-right 180ms ease;
}

.results-header {
    position: sticky;
    top: 0;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    z-index: 1000;
    flex-shrink: 0;
}
.results-top-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 20px;
    gap: 20px;
    max-width: 900px;
    margin: 0 auto;
}
.results-logo {
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.03em;
    cursor: pointer;
    flex-shrink: 0;
    user-select: none;
    line-height: 1;
}
.results-logo span:nth-child(1) { color: var(--primary); }
.results-logo span:nth-child(2) { color: var(--primary); }
.results-logo span:nth-child(3) { color: var(--primary); }
.results-logo span:nth-child(4) { color: var(--primary); }
.results-logo span:nth-child(5) { color: var(--primary); }
.results-logo span:nth-child(6) { color: var(--primary); }
.results-logo span:nth-child(7) { color: var(--primary); }

.results-search-area {
    width: 480px;
    max-width: 60vw;
    position: relative;
}
.results-search-area .search-bar-wrapper {
    border-radius: 24px;
    padding: 0 8px 0 16px;
}
.results-search-area .search-bar-wrapper input {
    padding: 8px 0;
    font-size: 16px;
}

.results-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

/* ---- Search Tabs ---- */
/* Fixed, pre-sized pill. The hover state changes colour only, so moving the
   pointer across a tab never resizes or re-positions it. */
.search-tabs {
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 0 0 12px;
    border-bottom: 1px solid var(--border);
    padding-bottom: 0;
    /* Long translations must be able to scroll rather than squash the tabs or
       push the border wider than the page. */
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.search-tabs::-webkit-scrollbar { display: none; }
.search-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    box-sizing: border-box;
    height: 36px;
    padding: 0 16px;
    margin-bottom: -1px;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 8px 8px 0 0;
    background: transparent;
    color: var(--text-secondary);
    font: inherit;
    font-size: 13px;
    cursor: pointer;
    white-space: nowrap;
    /* `border-bottom-color` is included so the active underline can fade
       without the element's box ever changing height. */
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.search-tab-icon { font-size: 11px; line-height: 1; }
.search-tab:hover {
    background-color: var(--input-bg);
    color: var(--text);
}
.search-tab.is-active {
    color: var(--primary);
    border-bottom-color: var(--primary);
}
.search-tab:focus-visible {
    outline: 2px solid var(--text-secondary);
    outline-offset: -2px;
}
.tab-panel[hidden] { display: none; }

/* ---- Images Tab ---- */
/* Justified rows via flex: each tile is sized by its own aspect ratio, so the
   grid is as dense as Google Images without a fixed column count. */
.image-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    /* No negative side margin here: the results column already has padding, and
       pulling the grid past it made the document wider than the viewport, which
       showed up as a stray horizontal scrollbar on every screen size. */
    margin: 0;
    /* Tiles carry their own inline aspect-ratio, which would otherwise let a
       tall portrait image push the row taller than the results column allows. */
    align-items: flex-start;
}
.image-tile {
    position: relative;
    display: block;
    flex: 1 1 200px;
    min-width: 0;
    max-width: 240px;
    height: 170px;
    padding: 0;
    border: 0;
    border-radius: 10px;
    overflow: hidden;
    background: var(--input-bg);
    cursor: pointer;
    /* No transition at all on the tile: the caption is a child that is always
       present, and only its opacity animates on hover. */
}
.image-tile-media {
    position: absolute;
    inset: 0;
    display: block;
}
.image-tile-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.image-tile-media img.ratio-pending { opacity: 0; }
.image-tile-caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 20px 8px 7px;
    text-align: left;
    color: #ffffff;
    background: linear-gradient(to top, rgba(0,0,0,0.78), rgba(0,0,0,0));
    /* Opacity only: the caption is always laid out, so revealing it cannot
       move the image or reflow the grid. */
    opacity: 0;
    transition: opacity .15s ease;
    pointer-events: none;
}
.image-tile:hover .image-tile-caption,
.image-tile:focus-visible .image-tile-caption { opacity: 1; }
.image-tile:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}
.image-tile-title {
    font-size: 12px;
    line-height: 1.3;
    font-weight: 500;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.image-tile-source {
    font-size: 11px;
    line-height: 1.3;
    opacity: 0.85;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.image-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 48px 16px;
    color: var(--text-secondary);
}
.image-empty svg {
    width: 64px;
    height: 64px;
    margin: 0 auto 16px;
    opacity: 0.4;
}
.image-empty p { margin: 4px 0; }
.image-empty .title { font-size: 16px; }
.image-empty .sub { font-size: 13px; }

/* ---- Touch devices ----
   A tile caption is revealed on hover, which never happens on touch, so it has
   to be visible by default or the source and licence are unreachable there. */
@media (hover: none) {
    .image-tile-caption { opacity: 1; }
}
/* Respect the OS "reduce motion" setting for the two animated surfaces: the
   preview slide-in and the results reflow. */
@media (prefers-reduced-motion: reduce) {
    .lightbox { animation: none; }
    body.preview-open #resultsUI,
    #resultsUI { transition: none; }
    .image-tile-caption,
    .search-tab { transition: none; }
}

/* ---- Image Preview Pane ----
   The preview docks to the right half of the viewport and the results keep
   scrolling on the left, so choosing an image never hides the list it came
   from. The left half is not covered by a scrim, so the page underneath
   stays visible and interactive. */
.lightbox {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: var(--preview-width, 50%);
    min-width: 320px;
    max-width: 100%;
    z-index: 20000;
    display: flex;
    flex-direction: column;
    gap: 0;
    background: var(--bg);
    border-left: 1px solid var(--border, rgba(0,0,0,0.12));
    box-shadow: -8px 0 28px rgba(0,0,0,0.18);
    animation: previewIn 160ms ease-out;
}
.lightbox[hidden] { display: none; }
@keyframes previewIn {
    from { transform: translateX(24px); opacity: 0; }
    to   { transform: translateX(0);    opacity: 1; }
}
/* The figure owns the flexible space; the image shrinks to fit inside it
   rather than the pane growing past the viewport. */
.lightbox-figure {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    gap: 12px;
    margin: 0;
    padding: 52px 20px 12px;
}
.lightbox-image {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    object-fit: contain;
    border-radius: 6px;
    background: var(--input-bg);
}
.lightbox-caption {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 12px 20px 20px;
    border-top: 1px solid var(--border, rgba(0,0,0,0.12));
    color: var(--text, #202124);
    text-align: left;
}
.lightbox-title {
    color: var(--text, #202124);
    font-size: 15px;
    text-decoration: none;
}
.lightbox-title:hover { text-decoration: underline; }
.lightbox-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--text-secondary, #5f6368);
    flex-wrap: wrap;
    justify-content: flex-start;
}
.lightbox-source, .lightbox-license { white-space: nowrap; }
.lightbox-open {
    font-size: 12px;
    color: var(--link, #1a0dab);
    text-decoration: none;
}
.lightbox-open:hover { text-decoration: underline; }
.lightbox-close,
.lightbox-nav {
    position: absolute;
    z-index: 1;
    color: inherit;
    background: transparent;
}
.lightbox-close:hover,
.lightbox-nav:hover { background: rgba(127,127,127,0.16); }
.lightbox-close {
    top: 12px;
    right: 12px;
    width: 40px;
    height: 40px;
}
.lightbox-close > svg,
.lightbox-nav > svg {
    position: static;
    inset: auto;
    margin: auto;
}
.lightbox-nav {
    top: 50%;
    margin-top: -22px;
    width: 44px;
    height: 44px;
    color: var(--text, #202124);
}
.lightbox-prev { left: 12px; }
.lightbox-next { right: 12px; }

/* Below this width a 50/50 split leaves the image too small to judge, so the
   preview takes the whole screen and behaves like a normal overlay again. */
/* A tablet held upright cannot spare half its width for the preview and still
   show the grid the image was picked from, so below 1024px the preview goes
   full-screen and overlays instead of splitting. The results keep the whole
   viewport rather than being squeezed to nothing. */
@media (max-width: 1024px) {
    :root { --preview-width: 100%; }
    .lightbox {
        /* Left-anchored and full-bleed rather than right-anchored at 100%: a
           vertical scrollbar makes a 100%-wide right-anchored box overhang the
           viewport and produce a horizontal scrollbar. */
        left: 0;
        right: 0;
        width: auto;
        max-width: none;
        min-width: 0;
        border-left: 0;
        box-shadow: none;
    }
    body.preview-open #resultsUI { padding-right: 0; }
}

/* ---- Results Content ---- */
/* Both tabs share one measure, so the header above them never appears to
   change width or position when the active tab changes. */
.results-content {
    flex: 1;
    max-width: 1100px;
    width: 100%;
    margin: 0 auto;
    padding: 12px 20px 60px;
}
.result-stats {
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 4px;
}
.did-you-mean {
    font-size: 14px;
    color: var(--text-secondary);
    padding: 6px 0;
}
.did-you-mean a {
    color: var(--link);
    font-weight: 600;
    cursor: pointer;
}
.did-you-mean a:hover { text-decoration: underline; }

/* ---- Result Items (Google style) ---- */
.result-item {
    margin-bottom: 28px;
    content-visibility: auto;
    contain-intrinsic-size: auto 120px;
}
.result-item-url {
    font-size: 14px;
    color: var(--url-color);
    line-height: 1.5;
    margin-bottom: 2px;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.result-item-url > span:first-child {
    overflow: hidden;
    text-overflow: ellipsis;
}
.result-favicon-wrap {
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--input-bg);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.result-favicon {
    width: 16px;
    height: 16px;
    border-radius: 3px;
    display: block;
}
.favicon-letter {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-secondary);
    line-height: 1;
}
.answer-link-wrap {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}
.answer-link-wrap .result-favicon-wrap {
    width: 20px;
    height: 20px;
}
.answer-link-wrap .result-favicon { width: 12px; height: 12px; }
.result-item-url .result-source {
    flex-shrink: 0;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 1px 6px;
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--text-secondary);
    background: var(--input-bg);
    font-size: 10px;
    line-height: 1.5;
}
.result-item-title {
    font-size: 20px;
    color: var(--link);
    font-weight: 400;
    line-height: 1.3;
    margin-bottom: 3px;
    display: block;
    cursor: pointer;
}
.result-item-title:hover { text-decoration: underline; }
.result-item-desc {
    font-size: 14px;
    color: var(--result-desc);
    line-height: 1.58;
    word-break: break-word;
}

/* ---- Load More ---- */
.load-more-area {
    display: flex;
    justify-content: center;
    padding: 32px 0 48px;
}
.load-more-btn {
    background: var(--input-bg);
    border: 1px solid var(--border);
    border-radius: 24px;
    color: var(--text);
    font-size: 14px;
    font-weight: 500;
    padding: 10px 40px;
    cursor: pointer;
    font-family: inherit;
    transition: background .2s, box-shadow .2s;
}
.load-more-btn:hover {
    background: var(--active-item);
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.load-more-btn:disabled {
    opacity: 0.4;
    cursor: default;
}

/* ---- Answer Box ---- */
.answer-box {
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 16px 20px;
    margin-bottom: 28px;
    background: var(--card-bg);
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.quick-wiki-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}
.quick-wiki-mark {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: var(--primary);
    font-family: Georgia, serif;
    font-size: 18px;
    font-weight: 700;
}
.quick-wiki-header h2 {
    margin: 0;
    line-height: 1.2;
}
.quick-wiki-label {
    display: block;
    margin-top: 2px;
    color: var(--text-secondary);
    font-size: 11px;
}
.no-ai-badge {
    margin-left: auto;
    padding: 3px 8px;
    border-radius: 12px;
    color: #137333;
    background: #e6f4ea;
    font-size: 10px;
    font-weight: 600;
    white-space: nowrap;
}
html.dark .no-ai-badge {
    color: #81c995;
    background: #17351f;
}
.quick-wiki-answer {
    color: var(--text);
    font-size: 23px;
    line-height: 1.32;
    font-weight: 600;
    letter-spacing: -0.015em;
}
.quick-wiki-body {
    display: block;
}
.quick-wiki-body::after {
    content: "";
    display: table;
    clear: both;
}
/* Text wraps around the floated image and continues underneath it,
   instead of sitting in a narrow column on the left. */
.quick-wiki-text { min-width: 0; overflow: visible; }
.quick-wiki-figure {
    margin: 2px 0 12px 16px;
    float: right;
    width: 180px;
    max-width: 40%;
}
.quick-wiki-image {
    width: 100%;
    height: auto;
    max-height: 220px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--input-bg);
    display: block;
}
.quick-wiki-caption {
    margin-top: 6px;
    font-size: 11px;
    line-height: 1.4;
    color: var(--text-secondary);
}
.quick-wiki-context {
    color: var(--result-desc);
}
.answer-property {
    padding: 1px 5px;
    border-radius: 4px;
    color: var(--text-secondary);
    background: var(--input-bg);
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 10px;
}
.quick-wiki-loading {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--text-secondary);
}
.quick-wiki-loading .spinner {
    width: 24px;
    height: 24px;
    border-width: 3px;
}
.quick-wiki-loading strong,
.quick-wiki-loading span { display: block; }
.quick-wiki-loading strong {
    color: var(--text);
    font-size: 14px;
    margin-bottom: 2px;
}
.quick-wiki-loading span { font-size: 12px; }
.answer-box h2 {
    font-size: 16px;
    font-weight: 500;
    margin: 0 0 6px;
}
.answer-box p {
    margin: 0;
    font-size: 14px;
    line-height: 1.58;
    color: var(--result-desc);
}
.answer-box .answer-meta {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 12px;
}
.answer-box .answer-meta .badge {
    font-size: 10px;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 3px;
    color: var(--badge-text);
    background: var(--badge-wiki);
}
.answer-box .answer-meta a { font-size: 12px; }
.answer-box .answer-meta .answer-link {
    color: var(--link);
    text-decoration: none;
    font-size: 12px;
    white-space: nowrap;
}
.answer-box .answer-meta .answer-link:hover { text-decoration: underline; }
.answer-box .answer-meta .answer-sep {
    color: var(--text-secondary);
    font-weight: 700;
    margin: 0 2px;
}

/* ---- Spinner ---- */
.spinner {
    width: 32px;
    height: 32px;
    border: 4px solid var(--border);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: gw-spin .8s linear infinite;
}
@keyframes gw-spin { to { transform: rotate(360deg); } }

/* ---- Loading & Empty ---- */
.loading-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 48px 0;
    gap: 16px;
}
.loading-state p {
    font-size: 13px;
    color: var(--text-secondary);
    margin: 0;
}
.connection-error {
    color: var(--error-text);
    text-align: center;
    padding: 32px 16px;
    margin: 0;
}
.empty-state {
    text-align: center;
    padding: 48px 16px;
    color: var(--text-secondary);
}
.empty-state svg {
    width: 64px;
    height: 64px;
    margin: 0 auto 16px;
    opacity: 0.4;
}
.empty-state p { margin: 4px 0; }
.empty-state .title { font-size: 16px; }
.empty-state .sub { font-size: 13px; }

/* ---- Responsive ---- */
@media (orientation: landscape) and (max-height: 500px) {
    .home-center { margin-top: -40px; }
    .home-logo { font-size: 48px; margin-bottom: 12px; }
    .search-buttons { margin-top: 16px; }
    .results-content { padding-top: 4px; }
}
@media (max-width: 768px) {
    .quick-wiki-figure { float: none; width: 100%; max-width: 100%; margin: 0 0 12px; }
    .quick-wiki-image { max-height: 260px; }
    .home-logo { font-size: 56px; margin-bottom: 20px; }
    .search-section { max-width: 100%; padding: 0 4px; }
    .search-buttons { gap: 4px; }
    .search-btn { font-size: 13px; padding: 0 12px; }
    .top-nav { padding: 6px 12px; gap: 8px; font-size: 12px; }
    .top-nav a:not(.results-logo) { padding: 0 8px; }
    .top-nav-right { gap: 2px; }

    .results-top-bar { padding: 8px 12px; gap: 10px; }
    .results-logo { font-size: 22px; }
    .results-search-area { width: auto; max-width: none; flex: 1; min-width: 0; }
    .results-search-area .search-bar-wrapper input { font-size: 16px; }
    .results-content { padding: 8px 12px 40px; }
    .image-grid { gap: 8px; }
    .image-tile { flex-basis: 150px; max-width: 100%; height: 130px; }
    /* The docked pane keeps its own internal padding, so only the arrows move. */
    .lightbox-prev { left: 4px; }
    .lightbox-next { right: 4px; }
    .result-item-title { font-size: 18px; }
    .result-item-thumb { width: 80px; height: 56px; }
    .footer-country { padding: 10px 16px; font-size: 13px; }
    .footer-links { padding: 10px 16px; font-size: 13px; flex-direction: column; align-items: center; }
    .footer-links .links-group { justify-content: center; }
}
@media (max-width: 480px) {
    .settings-panel { padding: 20px 16px; }
    .settings-row { align-items: flex-start; flex-wrap: wrap; gap: 8px; }
    .settings-row select { min-width: 0; max-width: 100%; flex: 1; }
    #indexUpload { width: 100%; max-width: 100%; }
    .home-logo { font-size: 40px; }
    .search-bar-wrapper input { font-size: 16px; padding: 10px 0; }
    .search-tab { padding: 0 12px; }
    .image-grid { gap: 6px; }
    .image-tile { flex-basis: 130px; height: 112px; border-radius: 8px; }
    /* Full-screen preview on a phone: the figure owns the space, so the image
       needs no extra max-height and is free to use all of it. */
    .lightbox-figure { padding: 48px 8px 8px; }
    .lightbox-caption { padding: 10px 12px 14px; }
    .lightbox-image { border-radius: 4px; }
    .quick-wiki-teaser {
        grid-template-columns: auto 1fr;
        padding: 12px;
    }
    .quick-wiki-example {
        grid-column: 1 / 3;
        width: 100%;
    }
    .index-stats { grid-column: 1 / 3; }
    .no-ai-badge { display: none; }
    .quick-wiki-answer { font-size: 20px; }
    .results-top-bar { flex-wrap: wrap; gap: 6px; }
    .results-logo { font-size: 18px; }
    .results-search-area { order: 3; width: 100%; max-width: 100%; margin-top: 4px; }
}

/* ---- Settings Overlay ---- */
.settings-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    backdrop-filter: blur(4px);
    z-index: 10000;
    align-items: center;
    justify-content: center;
}
.settings-overlay.show { display: flex; }
.settings-panel {
    background: var(--modal-bg, var(--bg));
    border-radius: 28px;
    padding: 24px;
    width: min(420px, calc(100vw - 24px));
    min-width: 0;
    max-height: calc(100vh - 24px);
    max-height: calc(100dvh - 24px);
    overflow-y: auto;
    box-shadow: 0 8px 30px rgba(0,0,0,0.3);
}
.settings-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}
.settings-header h2 {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    color: var(--text);
}
.settings-close {
    padding: 6px !important;
}
.settings-body {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.settings-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}
.settings-row label {
    font-size: 14px;
    color: var(--text);
    font-weight: 500;
    white-space: nowrap;
}
.settings-row select {
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--input-bg);
    color: var(--text);
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
    outline: none;
    min-width: 180px;
}
.settings-row select:focus {
    border-color: var(--primary);
}

/* ---- Toggle Switch (reused from design.md) ---- */
.toggle {
    position: relative;
    display: inline-block;
    width: 48px;
    height: 24px;
    flex-shrink: 0;
}
.toggle input { opacity: 0; width: 0; height: 0; }
.slider {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background-color: #ccc;
    border-radius: 24px;
    transition: .3s;
}
.slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    border-radius: 50%;
    transition: .3s;
}
.toggle input:checked + .slider { background-color: var(--primary); }
.toggle input:checked + .slider:before { transform: translateX(24px); }

.settings-btn { position: relative; }