.search-stream-page {
    padding-bottom: 2rem;
}

.search-input-wrap {
    margin: 2rem 0 1rem 0;
    display: flex;
    gap: 0.75rem;
    align-items: center;
}

#query{
    padding:6px;
    max-height:40px;
    max-width:800px;
    border:solid 1px;
    border-color: silver;
}
.search-input-wrap #query {
    margin: 0;
}

.search-examples {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.search-examples-label {
    font-size: 0.95rem;
    color: #666;
}

.search-example-pill {
    border: 1px solid #d8d8d8;
    background: #fff;
    color: #3a3a3a;
    border-radius: 999px;
    padding: 0.3rem 0.75rem;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 120ms ease-in-out;
}

.search-example-pill:hover,
.search-example-pill:focus-visible {
    outline: none;
    border-color: #1b3b72;
    background: #f4f7ff;
    color: #1b3b72;
}

.status-bar {
    margin: 0.75rem 0 1.25rem 0;
    padding: 0.75rem 1rem;
    background: #f0f4ff;
    border-left: 3px solid #1b3b72;
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.status-spinner {
    display: inline-block;
    flex: 0 0 auto;
    width: 0.95rem;
    height: 0.95rem;
    border: 2px solid #c6d3f2;
    border-top-color: #1b3b72;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

.result-chips {
    display: grid;
    gap: 0.75rem;
    margin-top: 0.75rem;
}

.result-chips a {
    display: block;
    padding: 0.85rem 1rem;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    color: inherit;
    text-decoration: none;
    background: #fff;
}

.result-chips a:hover {
    border-color: #c4d2ee;
    background: #f9fbff;
}

.answer-box {
    margin: 0.5rem 0 1.5rem;
}

.answer-box-slide {
    animation: answer-slide-in 240ms ease-out;
}

.answer-stream {
    margin-top: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #444;
}

.dot-loader::after {
    content: "...";
    display: inline-block;
    width: 1.2em;
    overflow: hidden;
    vertical-align: bottom;
    animation: dots 1.3s steps(4, end) infinite;
}

@keyframes dots {
    0% {
        width: 0;
    }

    100% {
        width: 1.2em;
    }
}

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

@keyframes answer-slide-in {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }

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

.answer-formatted {
    margin-top: 0.75rem;
    line-height: 1.55;
}

.answer-formatted a {
    color: #1b3b72;
    text-decoration: underline;
}

@media (prefers-color-scheme: dark) {
    .search-stream-page {
        color: #e6eaf2;
    }

    #query {
        background: #121722;
        color: #e6eaf2;
        border-color: #4a556d;
    }

    #query::placeholder {
        color: #9aa6bf;
    }

    .search-examples-label {
        color: #aeb8ca;
    }

    .search-example-pill {
        background: #1a2232;
        color: #dbe3f2;
        border-color: #4a556d;
    }

    .search-example-pill:hover,
    .search-example-pill:focus-visible {
        background: #25324b;
        color: #e6eeff;
        border-color: #5f7cb8;
    }

    .status-bar {
        background: #1a2232;
        border-left-color: #6f8fcf;
        color: #dbe3f2;
    }

    .status-spinner {
        border-color: #3f4f73;
        border-top-color: #9fb8ea;
    }

    .result-chips a {
        background: #161d2b;
        border-color: #3e4c68;
        color: #e6eaf2;
    }

    .result-chips a:hover {
        background: #202a3f;
        border-color: #5b74a5;
    }

    .answer-stream {
        color: #c9d3e6;
    }

    .answer-formatted {
        color: #e6eaf2;
    }

    .answer-formatted a {
        color: #9ec0ff;
    }
}

:is(html.theme-dark, body.theme-dark, html[data-theme="dark"], body[data-theme="dark"], html[data-color-scheme="dark"], body[data-color-scheme="dark"]) .search-stream-page {
    color: #e6eaf2;
}

:is(html.theme-dark, body.theme-dark, html[data-theme="dark"], body[data-theme="dark"], html[data-color-scheme="dark"], body[data-color-scheme="dark"]) #query {
    background: #121722;
    color: #e6eaf2;
    border-color: #4a556d;
}

:is(html.theme-dark, body.theme-dark, html[data-theme="dark"], body[data-theme="dark"], html[data-color-scheme="dark"], body[data-color-scheme="dark"]) #query::placeholder {
    color: #9aa6bf;
}

:is(html.theme-dark, body.theme-dark, html[data-theme="dark"], body[data-theme="dark"], html[data-color-scheme="dark"], body[data-color-scheme="dark"]) .search-examples-label {
    color: #aeb8ca;
}

:is(html.theme-dark, body.theme-dark, html[data-theme="dark"], body[data-theme="dark"], html[data-color-scheme="dark"], body[data-color-scheme="dark"]) .search-example-pill {
    background: #1a2232;
    color: #dbe3f2;
    border-color: #4a556d;
}

:is(html.theme-dark, body.theme-dark, html[data-theme="dark"], body[data-theme="dark"], html[data-color-scheme="dark"], body[data-color-scheme="dark"]) .search-example-pill:hover,
:is(html.theme-dark, body.theme-dark, html[data-theme="dark"], body[data-theme="dark"], html[data-color-scheme="dark"], body[data-color-scheme="dark"]) .search-example-pill:focus-visible {
    background: #25324b;
    color: #e6eeff;
    border-color: #5f7cb8;
}

:is(html.theme-dark, body.theme-dark, html[data-theme="dark"], body[data-theme="dark"], html[data-color-scheme="dark"], body[data-color-scheme="dark"]) .status-bar {
    background: #1a2232;
    border-left-color: #6f8fcf;
    color: #dbe3f2;
}

:is(html.theme-dark, body.theme-dark, html[data-theme="dark"], body[data-theme="dark"], html[data-color-scheme="dark"], body[data-color-scheme="dark"]) .status-spinner {
    border-color: #3f4f73;
    border-top-color: #9fb8ea;
}

:is(html.theme-dark, body.theme-dark, html[data-theme="dark"], body[data-theme="dark"], html[data-color-scheme="dark"], body[data-color-scheme="dark"]) .result-chips a {
    background: #161d2b;
    border-color: #3e4c68;
    color: #e6eaf2;
}

:is(html.theme-dark, body.theme-dark, html[data-theme="dark"], body[data-theme="dark"], html[data-color-scheme="dark"], body[data-color-scheme="dark"]) .result-chips a:hover {
    background: #202a3f;
    border-color: #5b74a5;
}

:is(html.theme-dark, body.theme-dark, html[data-theme="dark"], body[data-theme="dark"], html[data-color-scheme="dark"], body[data-color-scheme="dark"]) .answer-stream {
    color: #c9d3e6;
}

:is(html.theme-dark, body.theme-dark, html[data-theme="dark"], body[data-theme="dark"], html[data-color-scheme="dark"], body[data-color-scheme="dark"]) .answer-formatted {
    color: #e6eaf2;
}

:is(html.theme-dark, body.theme-dark, html[data-theme="dark"], body[data-theme="dark"], html[data-color-scheme="dark"], body[data-color-scheme="dark"]) .answer-formatted a {
    color: #9ec0ff;
}