:root {
    --bg: #f3f4f2;
    --surface: #ffffff;

    --text: #151515;
    --body: #30312f;
    --muted: #777773;
    --faint: #a3a39f;

    --border: #dfdfdb;
    --border-dark: #ccccca;

    --red: #d71920;

    --content-width: 760px;
    --answer-width: 680px;
}


* {
    box-sizing: border-box;
}


html {
    min-height: 100%;
    scroll-behavior: smooth;
}


body {
    min-height: 100vh;

    margin: 0;

    background: var(--bg);
    color: var(--text);

    font-family:
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}


button,
textarea {
    font: inherit;
}


button {
    -webkit-tap-highlight-color: transparent;
}


.app {
    min-height: 100vh;

    display: flex;
    flex-direction: column;
}


/* =====================================================
   TOP BAR
===================================================== */

.topbar {
    width: 100%;

    height: 62px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding:
        0
        max(22px, calc((100vw - var(--content-width)) / 2));

    border-bottom:
        1px solid
        var(--border);
}


.brand {
    display: inline-flex;
    align-items: center;

    color: var(--text);
    text-decoration: none;

    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.01em;
}


.brand-mark {
    width: 34px;
    height: 23px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    background: var(--text);
    color: white;

    font-size: 9px;
    font-weight: 800;

    letter-spacing: 0.08em;
}


.brand-text {
    letter-spacing: -0.01em;
}


.topbar-note {
    color: var(--faint);

    font-size: 9px;
}


/* =====================================================
   ASK VIEW
===================================================== */

.ask-view {
    width: 100%;

    display: flex;
    justify-content: center;
}


.ask-content {
    width: min(
        calc(100% - 44px),
        900px
    );

    padding-top: clamp(54px, 10vh, 92px);

    padding-bottom: 54px;
}


.ask-view.has-chat .ask-content {
    width: min(
        calc(100% - 44px),
        var(--answer-width)
    );

    padding-top: 16px;
    padding-bottom: 24px;
}


.ask-view.has-chat .intro {
    display: none;
}


.ask-view.has-chat textarea {
    min-height: 32px;
}


.ask-view.has-chat .question-bottom {
    height: 35px;
}


.intro {
    margin-bottom: 26px;
}


.intro h1 {
    margin: 0;

    font-size: clamp(27px, 4vw, 36px);

    line-height: 1.1;

    letter-spacing: -0.035em;

    font-weight: 720;
}


.intro p {
    margin:
        10px
        0
        0;

    color: var(--muted);

    font-size: 12px;

    line-height: 1.55;
}


/* =====================================================
   QUESTION BOX
===================================================== */

.question-form {
    width: 100%;
}


.question-box {
    overflow: hidden;

    background: var(--surface);

    border:
        1px solid
        var(--border-dark);

    border-radius: 8px;

    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.025);

    transition:
        border-color 0.15s ease,
        box-shadow 0.15s ease;
}


.question-box:focus-within {
    border-color: #b5b5b0;

    box-shadow:
        0 0 0 3px
        rgba(225, 6, 0, 0.045);
}


textarea {
    display: block;

    width: 100%;

    min-height: 58px;

    padding:
        16px
        17px
        8px;

    resize: vertical;

    border: 0;
    outline: 0;

    background: transparent;

    color: var(--text);

    font-size: 14px;

    line-height: 1.6;
}


textarea::placeholder {
    color: #a5a5a1;
}


.question-bottom {
    height: 43px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding:
        7px
        8px
        8px
        17px;
}


.character-count {
    color: var(--faint);

    font-size: 10px;
}


#ask-button {
    height: 35px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 9px;

    min-width: 82px;

    padding:
        0
        15px;

    border: 0;
    border-radius: 6px;

    background: var(--text);
    color: white;

    cursor: pointer;

    font-size: 11px;
    font-weight: 650;

    transition:
        background 0.15s ease,
        transform 0.1s ease;
}


#ask-button:hover {
    background: #303030;
}


#ask-button:active {
    transform: translateY(1px);
}


#ask-button:disabled {
    opacity: 0.5;
    cursor: wait;
}


#button-arrow {
    font-size: 15px;
}


/* =====================================================
   SUGGESTIONS
===================================================== */

/* =====================================================
   LOADING
===================================================== */

.loading {
    width: min(
        calc(100% - 44px),
        var(--answer-width)
    );

    margin:
        -35px
        auto
        45px;

    display: flex;
    align-items: center;

    gap: 8px;

    color: var(--muted);

    font-size: 11px;
}


.loader {
    width: 12px;
    height: 12px;

    border:
        2px solid
        var(--border);

    border-top-color: var(--red);

    border-radius: 50%;

    animation:
        spin 0.75s linear infinite;
}


@keyframes spin {

    to {
        transform: rotate(360deg);
    }

}


/* =====================================================
   ERROR
===================================================== */

.error {
    width: min(
        calc(100% - 44px),
        var(--answer-width)
    );

    margin:
        -20px
        auto
        45px;

    display: flex;

    gap: 10px;

    padding:
        12px
        14px;

    border-left:
        2px solid
        var(--red);

    background: white;

    color: var(--muted);

    font-size: 11px;

    line-height: 1.5;
}


.error-mark {
    color: var(--red);
    font-weight: 750;
}


.error strong {
    display: block;

    margin-bottom: 1px;

    color: var(--text);
}


/* =====================================================
   ANSWER VIEW
===================================================== */

.answer-view {
    width: 100%;

    flex: 1;

    padding:
        38px
        22px
        60px;
}


.answer-layout {
    width: min(
        100%,
        var(--answer-width)
    );

    margin: 0 auto;
}


.answer-main {
    width: 100%;
}


.chat-turn {
    margin-bottom: 38px;
}


.chat-turn:last-child {
    margin-bottom: 0;
}


/* =====================================================
   USER QUESTION
===================================================== */

.result-question {
    margin-bottom: 12px;
}


.result-label {
    display: block;

    margin-bottom: 4px;

    color: #9b3336;

    font-size: 8px;
    font-weight: 700;

    letter-spacing: 0.09em;

    text-transform: uppercase;
}


.message {
    width: fit-content;
    max-width: 88%;
    padding: 11px 14px;
    border-radius: 10px;
    font-size: 13px;
    line-height: 1.6;
}


.user-message {
    margin-left: auto;
    background: #d0e0e9;
    color: #021720;
}


.assistant-message .result-label {
    color: var(--muted);
}


/* =====================================================
   ANSWER
===================================================== */

.answer {
    max-width: 92%;

    margin-right: auto;

    background: #8ee7a0;
    border: 1px solid var(--border);
    border-top-left-radius: 3px;

    color: var(--body);
}


.answer p {
    margin:
        0
        0
        13px;
}


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


.answer strong {
    color: var(--text);

    font-weight: 720;
}


.answer ul {
    margin:
        3px
        0
        14px;

    padding-left: 25px;
}


.answer li {
    margin-bottom: 6px;

    padding-left: 4px;
}


.answer-note {
    max-width: 92%;
    margin: 10px 0 0;
    color: var(--faint);
    font-size: 9px;
    line-height: 1.5;
}


.answer li:last-child {
    margin-bottom: 0;
}


/* =====================================================
   SOURCES
===================================================== */

.sources {
    max-width: 92%;

    margin-top: 24px;

    border-top:
        1px solid
        var(--border);
}


.sources summary {
    min-height: 48px;

    display: flex;
    align-items: center;

    cursor: pointer;

    list-style: none;

    color: #555551;

    font-size: 11px;
    font-weight: 620;
}


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


.source-chevron {
    width: 17px;

    color: var(--red);

    font-size: 17px;

    transition:
        transform 0.15s ease;
}


.sources[open] .source-chevron {
    transform: rotate(90deg);
}


.sources-title {
    margin-right: 6px;
}


.source-count {
    color: var(--faint);

    font-size: 10px;
    font-weight: 400;
}


.references {
    border-top:
        1px solid
        var(--border);
}


.reference-card {
    min-height: 55px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 16px;

    padding:
        10px
        3px;

    border-bottom:
        1px solid
        var(--border);

    color: inherit;

    text-decoration: none;
}


.reference-card:hover {
    background: rgba(
        255,
        255,
        255,
        0.55
    );
}


.reference-name {
    color: #3d3d39;

    font-size: 11px;
    font-weight: 600;

    line-height: 1.4;
}


.reference-meta {
    margin-top: 3px;

    color: var(--faint);

    font-size: 9px;

    line-height: 1.4;
}


.reference-arrow {
    color: var(--faint);

    font-size: 13px;
}


/* =====================================================
   NEW QUESTION
===================================================== */

.new-question {
    margin-top: 22px;

    padding: 9px 13px;

    border: 1px solid var(--border-dark);
    border-radius: 6px;

    background: var(--text);

    color: white;

    cursor: pointer;

    font-size: 11px;
    font-weight: 700;

    transition:
        background 0.15s ease,
        transform 0.1s ease;
}


.new-question:hover {
    background: #303030;
}


.new-question:active {
    transform: translateY(1px);
}


/* =====================================================
   FOOTER
===================================================== */

.footer {
    width: min(
        calc(100% - 44px),
        var(--content-width)
    );

    margin:
        auto
        auto
        0;

    padding:
        18px
        0
        24px;

    border-top:
        1px solid
        var(--border);

    display: flex;
    justify-content: space-between;

    gap: 25px;

    color: #111111;

    font-size: 10px;

    line-height: 1.5;
}


/* =====================================================
   HIDDEN
===================================================== */

.hidden {
    display: none !important;
}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 700px) {

    .topbar {
        height: 62px;

        padding:
            0
            15px;
    }


    .topbar-note {
        display: none;
    }


    .ask-content {
        width:
            calc(100% - 30px);

        padding-top: 58px;
        padding-bottom: 55px;
    }


    .intro {
        margin-bottom: 27px;
    }


    .eyebrow {
        margin-bottom: 11px;

        font-size: 9px;
    }


    .intro h1 {
        font-size: 40px;

        line-height: 1.01;
    }


    .intro p {
        margin-top: 15px;

        font-size: 13px;
    }


    textarea {
        min-height: 70px;

        padding:
            17px
            17px
            7px;

        font-size: 15px;
    }


    .question-bottom {
        height: 42px;

        padding-left: 17px;
    }


    #ask-button {
        height: 38px;

        min-width: 96px;
    }


    .suggestions {
        align-items: flex-start;
    }


    .suggestions-label {
        width: 100%;
    }


    .answer-view {
        padding:
            38px
            15px
            60px;
    }


    .answer-layout {
        width: 100%;
    }


    .result-question {
        margin-bottom: 25px;

        font-size: 13px;
    }


    .answer {
        font-size: 16px;

        line-height: 1.72;
    }


    .sources {
        margin-top: 34px;
    }


    .footer {
        width:
            calc(100% - 30px);

        margin-top: auto;

        display: block;

        color: #111111;

        font-size: 10px;
    }


    .footer span {
        display: block;

        margin-bottom: 3px;
    }

}


@media (max-width: 420px) {

    .intro h1 {
        font-size: 36px;
    }


    .suggestion {
        padding:
            4px
            6px;

        font-size: 9px;
    }

}