:root {
    --bg: #ffffff;
    --panel: #f7f7f8;
    --panel-strong: #efeff1;

    --surface: #ffffff;
    --surface-soft: #f7f7f8;
    --surface-hover: #ececef;

    --text: #171717;
    --text-soft: #62626a;
    --text-faint: #919198;

    --border: rgba(15, 15, 20, 0.09);
    --border-strong: rgba(15, 15, 20, 0.15);

    --accent: #171717;
    --accent-text: #ffffff;

    --danger: #d44242;
    --success: #2ca36b;
    --warning: #d49a28;

    --shadow:
        0 18px 55px
        rgba(0, 0, 0, 0.08);

    --composer-shadow:
        0 8px 30px
        rgba(0, 0, 0, 0.08);

    --sidebar-width: 278px;

    font-family:
        Inter,
        ui-sans-serif,
        -apple-system,
        BlinkMacSystemFont,
        "SF Pro Text",
        "Segoe UI",
        sans-serif;

    color-scheme: light;
}


html[data-theme="dark"] {
    --bg: #212121;
    --panel: #171717;
    --panel-strong: #202020;

    --surface: #2b2b2b;
    --surface-soft: #262626;
    --surface-hover: #303030;

    --text: #ececec;
    --text-soft: #b4b4bb;
    --text-faint: #82828a;

    --border: rgba(255, 255, 255, 0.08);
    --border-strong: rgba(255, 255, 255, 0.15);

    --accent: #f2f2f2;
    --accent-text: #171717;

    --danger: #ff7070;
    --success: #4bc58a;
    --warning: #eab14a;

    --shadow:
        0 22px 60px
        rgba(0, 0, 0, 0.35);

    --composer-shadow:
        0 9px 34px
        rgba(0, 0, 0, 0.28);

    color-scheme: dark;
}


* {
    box-sizing: border-box;
}


html,
body {
    margin: 0;
    width: 100%;
    min-height: 100%;
    background: var(--bg);
    color: var(--text);
}


button,
input,
textarea {
    font: inherit;
}


button {
    color: inherit;
}


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


button:focus-visible,
input:focus-visible,
textarea:focus-visible {
    outline:
        2px solid
        rgba(115, 115, 255, 0.55);

    outline-offset: 2px;
}


[hidden] {
    display: none !important;
}


.auth-page {
    min-height: 100vh;

    background:
        radial-gradient(
            circle at 50% -20%,
            rgba(115, 99, 255, 0.12),
            transparent 42%
        ),
        var(--bg);
}


.auth-shell {
    min-height: 100vh;

    display: grid;
    place-items: center;

    padding: 28px;
}


.auth-card {
    width: min(
        440px,
        100%
    );

    padding:
        34px 34px 30px;

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

    border-radius: 26px;

    background:
        color-mix(
            in srgb,
            var(--surface) 94%,
            transparent
        );

    box-shadow:
        var(--shadow);
}


.auth-brand {
    display: flex;
    align-items: center;
    gap: 13px;

    margin-bottom: 40px;
}


.auth-logo {
    width: 45px;
    height: 45px;
}


.auth-brand h1 {
    margin: 0;

    font-size: 19px;
    letter-spacing: 0.08em;
}


.auth-brand p {
    margin: 4px 0 0;

    color:
        var(--text-soft);

    font-size: 12px;
}


.auth-heading h2 {
    margin: 0 0 8px;

    font-size: 28px;
    letter-spacing: -0.035em;
}


.auth-heading p {
    margin: 0 0 28px;

    color:
        var(--text-soft);

    font-size: 14px;
    line-height: 1.55;
}


.auth-error {
    margin-bottom: 18px;

    padding: 12px 14px;

    border:
        1px solid
        color-mix(
            in srgb,
            var(--danger) 30%,
            transparent
        );

    border-radius: 12px;

    color:
        var(--danger);

    background:
        color-mix(
            in srgb,
            var(--danger) 8%,
            transparent
        );

    font-size: 13px;
}


.login-form {
    display: grid;
    gap: 17px;
}


.login-form label {
    display: grid;
    gap: 8px;
}


.login-form label span {
    font-size: 13px;
    font-weight: 600;
}


.login-form input {
    width: 100%;

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

    border-radius: 13px;

    padding:
        13px 14px;

    color:
        var(--text);

    background:
        var(--surface-soft);
}


.login-form input::placeholder {
    color:
        var(--text-faint);
}


.login-form input:focus {
    border-color:
        rgba(115, 115, 255, 0.55);
}


.primary-login-button {
    margin-top: 4px;

    border: 0;

    border-radius: 13px;

    padding: 13px 16px;

    cursor: pointer;

    background:
        var(--accent);

    color:
        var(--accent-text);

    font-weight: 650;
}


.primary-login-button:hover {
    opacity: 0.9;
}


.auth-footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;

    gap: 7px;

    margin-top: 26px;

    color:
        var(--text-faint);

    font-size: 11px;
}


.secure-dot {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background:
        var(--success);

    box-shadow:
        0 0 0 4px
        color-mix(
            in srgb,
            var(--success) 12%,
            transparent
        );
}


.theme-button {
    display: grid;
    place-items: center;

    width: 38px;
    height: 38px;

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

    border-radius: 12px;

    cursor: pointer;

    background:
        var(--surface-soft);
}


.theme-button:hover {
    background:
        var(--surface-hover);
}


.auth-theme-button {
    position: fixed;

    top: 20px;
    right: 20px;
}


.app-page {
    height: 100vh;
    overflow: hidden;
}


.app-shell {
    display: grid;

    grid-template-columns:
        var(--sidebar-width)
        minmax(0, 1fr);

    height: 100vh;
}


.sidebar {
    display: flex;
    flex-direction: column;

    min-width: 0;

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

    background:
        var(--panel);

    padding:
        14px 11px 12px;
}


.sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding:
        3px 8px 14px;
}


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

    gap: 10px;
}


.brand img {
    width: 35px;
    height: 35px;
}


.brand-copy {
    display: grid;

    gap: 1px;
}


.brand-copy strong {
    font-size: 14px;

    letter-spacing:
        0.07em;
}


.brand-copy span {
    color:
        var(--text-faint);

    font-size: 10px;
}


.icon-button {
    display: grid;
    place-items: center;

    width: 34px;
    height: 34px;

    border: 0;

    border-radius: 10px;

    cursor: pointer;

    background:
        transparent;
}


.icon-button:hover {
    background:
        var(--surface-hover);
}


.new-chat-button {
    width: 100%;

    display: flex;
    align-items: center;

    gap: 10px;

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

    border-radius: 13px;

    padding:
        10px 11px;

    cursor: pointer;

    background:
        var(--surface);

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

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


.new-chat-button:hover {
    background:
        var(--surface-hover);
}


.new-chat-button.disabled {
    opacity: 0.65;
}


.plus-icon {
    display: grid;
    place-items: center;

    width: 24px;
    height: 24px;

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

    border-radius: 8px;

    font-size: 18px;
    line-height: 1;
}


.history-heading {
    padding:
        23px 10px 8px;

    color:
        var(--text-faint);

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

    text-transform:
        uppercase;

    letter-spacing:
        0.07em;
}


.chat-list {
    display: grid;

    gap: 2px;

    min-height: 0;

    overflow-y: auto;

    scrollbar-width: thin;
}


.chat-row {
    position: relative;

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        auto;

    align-items: center;

    min-height: 40px;

    border-radius: 10px;
}


.chat-row:hover,
.chat-row.active {
    background:
        var(--surface-hover);
}


.chat-title-button {
    min-width: 0;

    overflow: hidden;

    border: 0;
    background: transparent;

    padding:
        10px 9px;

    cursor: pointer;

    color:
        var(--text);

    text-align: left;

    white-space: nowrap;
    text-overflow: ellipsis;

    font-size: 12.5px;
}


.chat-actions {
    display: flex;

    opacity: 0;

    padding-right: 5px;
}


.chat-row:hover
.chat-actions,
.chat-row.active
.chat-actions {
    opacity: 1;
}


.chat-action-button {
    width: 26px;
    height: 26px;

    display: grid;
    place-items: center;

    border: 0;

    border-radius: 7px;

    cursor: pointer;

    color:
        var(--text-soft);

    background:
        transparent;
}


.chat-action-button:hover {
    color:
        var(--text);

    background:
        var(--surface);
}


.chat-action-button.delete:hover {
    color:
        var(--danger);
}


.chat-rename-input {
    min-width: 0;

    width: calc(
        100% - 8px
    );

    margin-left: 4px;

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

    border-radius: 8px;

    padding:
        7px 7px;

    color:
        var(--text);

    background:
        var(--surface);
}


.history-empty {
    padding:
        14px 10px;

    color:
        var(--text-faint);

    font-size: 12px;
}


.sidebar-spacer {
    flex: 1;
}


.sidebar-footer {
    display: grid;

    gap: 5px;

    padding-top: 10px;

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


.sidebar-control {
    display: flex;
    align-items: center;

    gap: 10px;

    width: 100%;

    border: 0;

    border-radius: 10px;

    padding:
        9px 10px;

    cursor: pointer;

    background:
        transparent;

    font-size: 12px;
}


.sidebar-control:hover {
    background:
        var(--surface-hover);
}


.sidebar-control-icon {
    width: 22px;

    color:
        var(--text-soft);
}


.user-row {
    display: flex;
    align-items: center;

    gap: 9px;

    padding:
        7px 6px;
}


.user-avatar,
.user-message-avatar {
    display: grid;
    place-items: center;

    flex: 0 0 auto;

    border-radius: 50%;

    color:
        #ffffff;

    background:
        linear-gradient(
            145deg,
            #7367ff,
            #5a46d8
        );

    font-weight: 700;
}


.user-avatar {
    width: 31px;
    height: 31px;

    font-size: 12px;
}


.user-info {
    min-width: 0;

    display: grid;

    flex: 1;

    gap: 1px;
}


.user-info strong {
    overflow: hidden;

    font-size: 12px;

    white-space: nowrap;
    text-overflow: ellipsis;
}


.user-info span {
    color:
        var(--text-faint);

    font-size: 10px;
}


.main-panel {
    position: relative;

    min-width: 0;

    height: 100vh;

    display: flex;
    flex-direction: column;

    background:
        var(--bg);
}


.topbar {
    flex: 0 0 auto;

    height: 63px;

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

    padding:
        0 21px;

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

    background:
        color-mix(
            in srgb,
            var(--bg) 92%,
            transparent
        );

    backdrop-filter:
        blur(18px);
}


.topbar-left {
    min-width: 0;

    display: flex;
    align-items: center;

    gap: 11px;
}


.conversation-title {
    max-width: 500px;

    overflow: hidden;

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

    white-space: nowrap;
    text-overflow: ellipsis;
}


.model-status {
    display: flex;
    align-items: center;

    gap: 6px;

    margin-top: 3px;

    color:
        var(--text-faint);

    font-size: 10.5px;
}


.status-dot {
    display: block;

    width: 6px;
    height: 6px;

    border-radius: 50%;

    background:
        var(--text-faint);
}


.status-dot.online {
    background:
        var(--success);
}


.status-dot.warning {
    background:
        var(--warning);
}


.status-dot.offline {
    background:
        var(--danger);
}


.topbar-right {
    display: flex;
    align-items: center;

    gap: 10px;
}


.version-badge {
    padding:
        5px 9px;

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

    border-radius: 999px;

    color:
        var(--text-faint);

    background:
        var(--surface-soft);

    font-size: 10px;
}


.conversation-viewport {
    flex: 1;

    min-height: 0;

    overflow-y: auto;

    scroll-behavior:
        smooth;
}


.empty-state {
    width: min(
        820px,
        calc(100% - 40px)
    );

    min-height:
        calc(
            100vh
            - 220px
        );

    margin:
        0 auto;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    padding:
        70px 0 55px;

    text-align: center;
}


.empty-logo {
    width: 66px;
    height: 66px;

    margin-bottom: 19px;

    filter:
        drop-shadow(
            0 9px 18px
            rgba(91, 76, 220, 0.15)
        );
}


.empty-state h1 {
    margin: 0;

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

    letter-spacing:
        -0.045em;
}


.empty-state > p {
    max-width: 550px;

    margin:
        11px auto 32px;

    color:
        var(--text-soft);

    font-size: 14px;
    line-height: 1.55;
}


.prompt-grid {
    width: 100%;

    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap: 10px;
}


.prompt-card {
    min-height: 91px;

    display: flex;
    flex-direction: column;
    align-items: flex-start;

    gap: 6px;

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

    border-radius: 16px;

    padding: 15px;

    cursor: pointer;

    background:
        var(--surface-soft);

    text-align: left;
}


.prompt-card:hover {
    border-color:
        var(--border-strong);

    background:
        var(--surface-hover);

    transform:
        translateY(-1px);
}


.prompt-card strong {
    font-size: 12.5px;
}


.prompt-card span {
    color:
        var(--text-faint);

    font-size: 11.5px;
    line-height: 1.4;
}


.message-list {
    width: 100%;

    padding:
        25px 0 42px;
}


.message {
    width: 100%;

    padding:
        19px 24px;
}


.message-inner {
    width: min(
        820px,
        100%
    );

    margin:
        0 auto;

    display: grid;

    grid-template-columns:
        32px
        minmax(0, 1fr);

    gap: 13px;
}


.message-avatar {
    width: 31px;
    height: 31px;
}


.assistant-avatar {
    border-radius: 10px;
}


.user-message-avatar {
    font-size: 12px;
}


.message-column {
    min-width: 0;
}


.message-name {
    margin:
        1px 0 7px;

    font-size: 12px;
    font-weight: 700;
}


.message-content {
    color:
        var(--text);

    font-size: 14px;
    line-height: 1.72;

    overflow-wrap: anywhere;
}


.message-content h1,
.message-content h2,
.message-content h3 {
    margin:
        20px 0 9px;

    line-height: 1.35;
}


.message-content h1 {
    font-size: 20px;
}


.message-content h2 {
    font-size: 17px;
}


.message-content h3 {
    font-size: 15px;
}


.inline-code {
    border:
        1px solid
        var(--border);

    border-radius: 6px;

    padding:
        2px 5px;

    background:
        var(--surface-soft);

    font-family:
        "SFMono-Regular",
        Consolas,
        monospace;

    font-size: 0.9em;
}


.code-block {
    margin:
        14px 0;

    overflow: hidden;

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

    border-radius: 13px;

    background:
        var(--panel);
}


.code-language {
    padding:
        8px 12px;

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

    color:
        var(--text-faint);

    font-family:
        "SFMono-Regular",
        Consolas,
        monospace;

    font-size: 10px;
}


.code-block pre {
    margin: 0;

    padding:
        14px;

    overflow-x: auto;
}


.code-block code {
    font-family:
        "SFMono-Regular",
        Consolas,
        monospace;

    font-size: 12px;
    line-height: 1.6;
}


.message-actions {
    height: 26px;

    display: flex;

    align-items: center;

    gap: 5px;

    margin-top: 9px;

    opacity: 0;
}


.message:hover
.message-actions {
    opacity: 1;
}


.message-action {
    border: 0;

    border-radius: 7px;

    padding:
        5px 7px;

    cursor: pointer;

    color:
        var(--text-faint);

    background:
        transparent;

    font-size: 10px;
}


.message-action:hover {
    color:
        var(--text);

    background:
        var(--surface-hover);
}


.message.streaming
.message-content::after {
    content: "";

    display: inline-block;

    width: 6px;
    height: 15px;

    margin-left: 3px;

    vertical-align: -2px;

    border-radius: 2px;

    background:
        var(--text);

    animation:
        blink 1s
        infinite;
}


@keyframes blink {
    0%,
    45% {
        opacity: 0.95;
    }

    50%,
    100% {
        opacity: 0.15;
    }
}


.composer-shell {
    flex: 0 0 auto;

    padding:
        8px 20px 13px;

    background:
        linear-gradient(
            to bottom,
            transparent,
            var(--bg) 22%
        );
}


.composer {
    width: min(
        820px,
        100%
    );

    margin:
        0 auto;

    display: flex;
    align-items: flex-end;

    gap: 10px;

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

    border-radius: 22px;

    padding:
        10px 10px 10px 17px;

    background:
        var(--surface);

    box-shadow:
        var(--composer-shadow);
}


.composer:focus-within {
    border-color:
        color-mix(
            in srgb,
            var(--text) 22%,
            transparent
        );
}


.composer textarea {
    flex: 1;

    min-width: 0;

    min-height: 24px;
    max-height: 200px;

    resize: none;

    overflow-y: auto;

    border: 0;
    outline: 0;

    padding:
        3px 0;

    color:
        var(--text);

    background:
        transparent;

    font-size: 14px;
    line-height: 1.5;
}


.composer textarea::placeholder {
    color:
        var(--text-faint);
}


.composer-actions {
    display: flex;
    align-items: center;

    gap: 7px;
}


.composer-hint {
    color:
        var(--text-faint);

    font-size: 9px;

    white-space: nowrap;
}


.send-button,
.stop-button {
    flex: 0 0 auto;

    width: 34px;
    height: 34px;

    display: grid;
    place-items: center;

    border: 0;

    border-radius: 11px;

    cursor: pointer;

    background:
        var(--accent);

    color:
        var(--accent-text);

    font-weight: 700;
}


.send-button:hover,
.stop-button:hover {
    opacity: 0.88;
}


.stop-button {
    font-size: 10px;
}


.composer-footer {
    width: min(
        820px,
        100%
    );

    margin:
        8px auto 0;

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

    gap: 6px;

    color:
        var(--text-faint);

    font-size: 9.5px;
}


.toast-container {
    position: fixed;

    z-index: 1000;

    right: 20px;
    bottom: 22px;

    display: grid;

    gap: 8px;
}


.toast {
    max-width: 340px;

    padding:
        11px 14px;

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

    border-radius: 12px;

    color:
        var(--text);

    background:
        var(--surface);

    box-shadow:
        var(--shadow);

    font-size: 12px;

    opacity: 0;

    transform:
        translateY(8px);

    transition:
        opacity 0.2s ease,
        transform 0.2s ease;
}


.toast.show {
    opacity: 1;

    transform:
        translateY(0);
}


.mobile-menu,
.mobile-only {
    display: none;
}


.mobile-overlay {
    display: none;
}


@media (
    max-width: 820px
) {

    .app-shell {
        grid-template-columns:
            minmax(0, 1fr);
    }


    .sidebar {
        position: fixed;

        z-index: 300;

        inset:
            0 auto 0 0;

        width:
            min(
                310px,
                88vw
            );

        transform:
            translateX(-102%);

        transition:
            transform
            0.22s ease;

        box-shadow:
            var(--shadow);
    }


    .sidebar.open {
        transform:
            translateX(0);
    }


    .mobile-overlay {
        position: fixed;

        z-index: 250;

        inset: 0;

        background:
            rgba(0, 0, 0, 0.42);

        backdrop-filter:
            blur(2px);
    }


    .mobile-overlay.visible {
        display: block;
    }


    .mobile-menu,
    .mobile-only {
        display: grid;
    }


    .version-badge {
        display: none;
    }


    .topbar {
        padding:
            0 13px;
    }


    .message {
        padding:
            17px 14px;
    }


    .message-inner {
        grid-template-columns:
            29px
            minmax(0, 1fr);

        gap: 10px;
    }


    .message-avatar {
        width: 29px;
        height: 29px;
    }


    .composer-shell {
        padding:
            7px 10px 11px;
    }


    .composer-hint {
        display: none;
    }


    .prompt-grid {
        grid-template-columns:
            1fr;
    }


    .empty-state {
        min-height:
            calc(
                100vh
                - 190px
            );

        padding:
            45px 0;
    }

}


@media (
    max-width: 480px
) {

    .auth-shell {
        padding: 16px;
    }


    .auth-card {
        padding:
            29px 22px 25px;

        border-radius: 22px;
    }


    .composer-footer {
        gap: 4px;

        font-size: 8.5px;
    }


    .top-theme-button {
        display: none;
    }

}


/* ==========================================================
   ANDREA WEB v0.2.1
   ========================================================== */

.history-search-shell {
    position: relative;

    display: flex;
    align-items: center;

    margin:
        0 2px 8px;
}


.history-search-icon {
    position: absolute;

    left: 11px;

    z-index: 2;

    pointer-events: none;

    color:
        var(--text-faint);

    font-size: 15px;
}


.history-search {
    width: 100%;

    min-width: 0;

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

    border-radius: 10px;

    padding:
        8px 10px 8px 31px;

    outline: 0;

    color:
        var(--text);

    background:
        var(--surface-soft);

    font-size: 11.5px;
}


.history-search:focus {
    border-color:
        var(--border-strong);

    background:
        var(--surface);
}


.history-search::placeholder {
    color:
        var(--text-faint);
}


.top-action-button {
    height: 33px;

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

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

    border-radius: 10px;

    padding:
        0 10px;

    cursor: pointer;

    color:
        var(--text-soft);

    background:
        var(--surface-soft);

    font-size: 10.5px;
    font-weight: 600;
}


.top-action-button:hover {
    color:
        var(--text);

    border-color:
        var(--border-strong);

    background:
        var(--surface-hover);
}


.top-action-button:disabled {
    opacity: 0.55;

    cursor: wait;
}


.modal-open {
    overflow: hidden;
}


.modal-overlay {
    position: fixed;

    z-index: 1500;

    inset: 0;

    display: grid;
    place-items: center;

    padding: 22px;

    background:
        rgba(0, 0, 0, 0.42);

    backdrop-filter:
        blur(5px);
}


.modal-card {
    width:
        min(
            440px,
            100%
        );

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

    border-radius: 22px;

    padding:
        24px;

    background:
        var(--surface);

    box-shadow:
        var(--shadow);
}


.modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 20px;

    margin-bottom: 22px;
}


.modal-header h2 {
    margin: 0;

    font-size: 19px;

    letter-spacing:
        -0.025em;
}


.modal-header p {
    margin:
        7px 0 0;

    color:
        var(--text-soft);

    font-size: 12px;
    line-height: 1.5;
}


.modal-close {
    width: 33px;
    height: 33px;

    flex: 0 0 auto;

    display: grid;
    place-items: center;

    border: 0;

    border-radius: 9px;

    cursor: pointer;

    color:
        var(--text-soft);

    background:
        transparent;

    font-size: 21px;
}


.modal-close:hover {
    color:
        var(--text);

    background:
        var(--surface-hover);
}


.settings-form {
    display: grid;

    gap: 15px;
}


.settings-form label {
    display: grid;

    gap: 7px;
}


.settings-form label span {
    font-size: 11.5px;

    font-weight: 650;
}


.settings-form input {
    width: 100%;

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

    border-radius: 11px;

    outline: 0;

    padding:
        11px 12px;

    color:
        var(--text);

    background:
        var(--surface-soft);

    font-size: 13px;
}


.settings-form input:focus {
    border-color:
        rgba(115, 115, 255, 0.55);
}


.settings-status {
    min-height: 17px;

    color:
        var(--text-soft);

    font-size: 11px;
}


.settings-status.error {
    color:
        var(--danger);
}


.settings-status.success {
    color:
        var(--success);
}


.settings-save {
    border: 0;

    border-radius: 11px;

    padding:
        11px 14px;

    cursor: pointer;

    color:
        var(--accent-text);

    background:
        var(--accent);

    font-size: 12px;
    font-weight: 650;
}


.settings-save:disabled {
    opacity: 0.55;
}


.v021-toast.v021-error {
    border-color:
        color-mix(
            in srgb,
            var(--danger) 32%,
            var(--border)
        );
}


@media (
    max-width: 1050px
) {

    .top-action-button {
        padding:
            0 7px;

        font-size: 9.5px;
    }

}


@media (
    max-width: 900px
) {

    #editLastButton,
    #regenerateButton {
        display: none;
    }

}


@media (
    max-width: 620px
) {

    #exportChatButton,
    #settingsButton {
        display: none;
    }

}


/* ==========================================================
   ANDREA WEB v0.2.2 — LOCAL KNOWLEDGE
   ========================================================== */

.knowledge-modal-card {
    width:
        min(
            560px,
            100%
        );

    max-height:
        min(
            760px,
            calc(100vh - 44px)
        );

    overflow-y: auto;
}


.knowledge-upload-form {
    display: grid;

    gap: 11px;
}


.knowledge-drop-zone {
    display: grid;

    gap: 5px;

    border:
        1px dashed
        var(--border-strong);

    border-radius: 14px;

    padding:
        16px;

    cursor: pointer;

    background:
        var(--surface-soft);
}


.knowledge-drop-zone:hover {
    background:
        var(--surface-hover);
}


.knowledge-drop-zone strong {
    font-size: 12.5px;
}


.knowledge-drop-zone span {
    color:
        var(--text-faint);

    font-size: 10.5px;
}


.knowledge-drop-zone input {
    margin-top: 7px;

    width: 100%;

    color:
        var(--text-soft);

    font-size: 11px;
}


.knowledge-divider {
    height: 1px;

    margin:
        22px 0 17px;

    background:
        var(--border);
}


.knowledge-list-heading {
    margin-bottom: 9px;

    color:
        var(--text-faint);

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

    letter-spacing:
        0.06em;

    text-transform:
        uppercase;
}


.knowledge-list {
    display: grid;

    gap: 5px;
}


.knowledge-row {
    display: grid;

    grid-template-columns:
        34px
        minmax(0, 1fr)
        31px;

    align-items: center;

    gap: 10px;

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

    border-radius: 12px;

    padding:
        9px 9px 9px 10px;

    background:
        var(--surface-soft);
}


.knowledge-file-icon {
    width: 32px;
    height: 32px;

    display: grid;
    place-items: center;

    border-radius: 9px;

    color:
        #ffffff;

    background:
        linear-gradient(
            145deg,
            #7569ff,
            #5040c8
        );

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


.knowledge-file-body {
    min-width: 0;

    display: grid;

    gap: 3px;
}


.knowledge-file-body strong {
    overflow: hidden;

    white-space: nowrap;
    text-overflow: ellipsis;

    font-size: 11.5px;
}


.knowledge-file-body span {
    color:
        var(--text-faint);

    font-size: 9.5px;
}


.knowledge-delete {
    width: 29px;
    height: 29px;

    display: grid;
    place-items: center;

    border: 0;

    border-radius: 8px;

    cursor: pointer;

    color:
        var(--text-soft);

    background:
        transparent;

    font-size: 18px;
}


.knowledge-delete:hover {
    color:
        var(--danger);

    background:
        var(--surface-hover);
}


.knowledge-delete:disabled {
    opacity: 0.45;
}


.knowledge-empty {
    padding:
        17px 10px;

    border:
        1px dashed
        var(--border);

    border-radius: 11px;

    color:
        var(--text-faint);

    text-align: center;

    font-size: 11px;
}


@media (
    max-width: 700px
) {

    #knowledgeButton {
        display: none;
    }

}


/* ==========================================================
   ANDREA WEB v0.2.3 — LIVE WEB + TRACEABLE SOURCES
   ========================================================== */

.web-mode-button[data-mode="on"] {
    border-color:
        color-mix(
            in srgb,
            var(--success) 48%,
            var(--border)
        );
}


.web-mode-button[data-mode="off"] {
    opacity: 0.68;
}


.web-mode-button.web-unavailable {
    color:
        var(--text-faint);

    opacity: 0.72;
}


.message-sources {
    margin-top: 14px;
}


.source-heading {
    margin-bottom: 7px;

    color:
        var(--text-faint);

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

    text-transform:
        uppercase;

    letter-spacing:
        0.065em;
}


.source-row {
    display: flex;
    flex-wrap: wrap;

    gap: 6px;
}


.source-chip {
    max-width: 255px;

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

    gap: 6px;

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

    border-radius: 999px;

    padding:
        6px 9px;

    color:
        var(--text-soft);

    background:
        var(--surface-soft);

    text-decoration: none;

    font-size: 9.5px;

    overflow: hidden;
}


.source-chip:hover {
    border-color:
        var(--border-strong);

    color:
        var(--text);

    background:
        var(--surface-hover);
}


.source-chip strong {
    flex: 0 0 auto;

    font-size: 9px;
}


.source-chip span {
    min-width: 0;

    overflow: hidden;

    white-space: nowrap;

    text-overflow: ellipsis;
}


.source-chip.web strong {
    color:
        var(--success);
}


.source-chip.document strong {
    color:
        #7569ff;
}


@media (
    max-width: 760px
) {

    #webModeButton {
        display: none;
    }

}


/* ==========================================================
   ANDREA WEB v0.2.5 — SEARXNG
   ========================================================== */

.web-mode-button[data-mode="on"] {
    border-color:
        color-mix(
            in srgb,
            var(--success) 50%,
            var(--border)
        );
}


.web-mode-button[data-mode="off"] {
    opacity: 0.68;
}


.web-mode-button.web-unavailable {
    opacity: 0.60;

    color:
        var(--text-faint);
}


.message-sources {
    margin-top: 14px;
}


.source-heading {
    margin-bottom: 7px;

    color:
        var(--text-faint);

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

    text-transform:
        uppercase;

    letter-spacing:
        0.065em;
}


.source-row {
    display: flex;

    flex-wrap: wrap;

    gap: 6px;
}


.source-chip {
    max-width: 260px;

    display: inline-flex;

    align-items: center;

    gap: 6px;

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

    border-radius: 999px;

    padding:
        6px 9px;

    overflow: hidden;

    color:
        var(--text-soft);

    background:
        var(--surface-soft);

    text-decoration: none;

    font-size: 9.5px;
}


.source-chip:hover {
    border-color:
        var(--border-strong);

    color:
        var(--text);

    background:
        var(--surface-hover);
}


.source-chip strong {
    flex: 0 0 auto;

    font-size: 9px;
}


.source-chip.web strong {
    color:
        var(--success);
}


.source-chip.document strong {
    color:
        #7569ff;
}


.source-chip span {
    min-width: 0;

    overflow: hidden;

    white-space: nowrap;

    text-overflow: ellipsis;
}


@media (
    max-width: 760px
) {

    #webModeButton {
        display: none;
    }

}