/*
=========================================================
Riley AI Platform

Web Interface

BUILD0087A
=========================================================
*/


:root {

    --background:
        #07101c;

    --surface:
        #0d1928;

    --surface-light:
        #122238;

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

    --text:
        #eef6ff;

    --muted:
        #8fa3b8;

    --accent:
        #67d8ff;

    --accent-soft:
        rgba(103, 216, 255, 0.12);

    --healthy:
        #72e5ad;
}


* {

    box-sizing: border-box;

}


html,
body {

    margin: 0;

    min-height: 100%;

}


body {

    min-height: 100vh;

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

    background:
        radial-gradient(
            circle at top,
            #10233a 0%,
            var(--background) 48%
        );

    color: var(--text);

}


.riley-shell {

    width: min(
        1180px,
        calc(100% - 40px)
    );

    margin: 0 auto;

}


/*
=========================================================
Header
=========================================================
*/


.riley-header {

    min-height: 100px;

    display: flex;

    align-items: center;

    justify-content: space-between;

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

}


.riley-name {

    font-size: 24px;

    font-weight: 700;

    letter-spacing: 0.28em;

}


.riley-subtitle {

    margin-top: 5px;

    color: var(--muted);

    font-size: 12px;

    letter-spacing: 0.12em;

    text-transform: uppercase;

}


.online-status {

    display: flex;

    align-items: center;

    gap: 9px;

    color: var(--healthy);

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 0.1em;

}


.status-light {

    width: 9px;

    height: 9px;

    border-radius: 50%;

    background: var(--healthy);

    box-shadow:
        0 0 12px var(--healthy);

}


/*
=========================================================
Welcome
=========================================================
*/


.welcome-panel {

    min-height: 390px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

}


.riley-orb {

    width: 92px;

    height: 92px;

    display: grid;

    place-items: center;

    border:
        1px solid rgba(103, 216, 255, 0.4);

    border-radius: 50%;

    background:
        var(--accent-soft);

    box-shadow:
        0 0 60px
        rgba(103, 216, 255, 0.10);

    color: var(--accent);

    font-size: 34px;

    font-weight: 600;

}


.eyebrow {

    margin:
        26px 0 8px;

    color: var(--accent);

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 0.18em;

}


h1 {

    margin: 0;

    font-size:
        clamp(
            32px,
            5vw,
            52px
        );

    font-weight: 500;

}


.welcome-message {

    max-width: 540px;

    margin:
        18px auto 0;

    color: var(--muted);

    font-size: 17px;

    line-height: 1.7;

}


/*
=========================================================
Dashboard
=========================================================
*/


.dashboard-grid {

    display: grid;

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

    gap: 20px;

    padding-bottom: 40px;

}


.panel {

    overflow: hidden;

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

    border-radius: 18px;

    background:
        rgba(13, 25, 40, 0.82);

    backdrop-filter:
        blur(14px);

}


.panel-heading {

    min-height: 62px;

    padding:
        0 22px;

    display: flex;

    align-items: center;

    justify-content: space-between;

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

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 0.12em;

}


.ready-badge {

    padding:
        6px 9px;

    border-radius: 7px;

    background:
        rgba(114, 229, 173, 0.10);

    color:
        var(--healthy);

    font-size: 10px;

}


.conversation-body {

    min-height: 225px;

    padding: 28px;

}


.conversation-title {

    margin: 0 0 10px;

    font-size: 22px;

}


.conversation-description {

    margin: 0;

    max-width: 390px;

    color: var(--muted);

    line-height: 1.65;

}


.system-list {

    padding:
        10px 22px;

}


.system-row {

    min-height: 43px;

    display: flex;

    align-items: center;

    justify-content: space-between;

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

    color: var(--muted);

    font-size: 14px;

}


.system-row:last-child {

    border-bottom: 0;

}


.system-good {

    color: var(--healthy);

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 0.06em;

}


/*
=========================================================
Footer
=========================================================
*/


footer {

    min-height: 70px;

    display: flex;

    align-items: center;

    justify-content: space-between;

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

    color: var(--muted);

    font-size: 11px;

    letter-spacing: 0.08em;

}


/*
=========================================================
Responsive
=========================================================
*/


@media (
    max-width: 760px
) {

    .riley-shell {

        width:
            min(
                100% - 24px,
                1180px
            );

    }


    .welcome-panel {

        min-height: 330px;

    }


    .dashboard-grid {

        grid-template-columns:
            1fr;

    }

}


/*
=========================================================
Conversation Interface

BUILD0087B
=========================================================
*/


.conversation-body {

    min-height: 320px;

    padding: 0;

    display: flex;

    flex-direction: column;

}


.conversation-history {

    height: 260px;

    padding: 22px;

    overflow-y: auto;

    scroll-behavior: smooth;

}


.conversation-welcome {

    padding: 6px;

}


.conversation-message {

    display: flex;

    flex-direction: column;

    margin-bottom: 18px;

}


.conversation-message.dad {

    align-items: flex-end;

}


.conversation-message.riley {

    align-items: flex-start;

}


.message-speaker {

    margin-bottom: 6px;

    color: var(--muted);

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 0.10em;

    text-transform: uppercase;

}


.message-bubble {

    max-width: 86%;

    padding: 12px 15px;

    border-radius: 14px;

    line-height: 1.55;

    font-size: 14px;

    white-space: pre-wrap;

    overflow-wrap: anywhere;

}


.conversation-message.dad
.message-bubble {

    border:
        1px solid
        rgba(103, 216, 255, 0.22);

    background:
        rgba(103, 216, 255, 0.12);

    color: var(--text);

}


.conversation-message.riley
.message-bubble {

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

    background:
        var(--surface-light);

    color: var(--text);

}


.conversation-status {

    min-height: 34px;

    padding:
        8px 22px;

    display: flex;

    align-items: center;

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

    color: var(--muted);

    font-size: 11px;

    letter-spacing: 0.05em;

}


.conversation-status.processing {

    color: var(--accent);

}


.conversation-status.error {

    color: #ff9b9b;

}


.conversation-form {

    padding:
        14px 16px 16px;

    display: grid;

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

    gap: 10px;

    align-items: end;

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

}


.conversation-input {

    width: 100%;

    min-height: 48px;

    max-height: 140px;

    resize: vertical;

    padding:
        12px 14px;

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

    border-radius: 12px;

    outline: none;

    background:
        rgba(7, 16, 28, 0.78);

    color: var(--text);

    font: inherit;

    font-size: 14px;

    line-height: 1.45;

}


.conversation-input::placeholder {

    color: var(--muted);

}


.conversation-input:focus {

    border-color:
        rgba(103, 216, 255, 0.45);

    box-shadow:
        0 0 0 3px
        rgba(103, 216, 255, 0.07);

}


.conversation-input:disabled {

    opacity: 0.65;

}


.conversation-send {

    min-width: 82px;

    min-height: 48px;

    padding:
        0 18px;

    border:
        1px solid
        rgba(103, 216, 255, 0.34);

    border-radius: 12px;

    background:
        var(--accent-soft);

    color: var(--accent);

    font: inherit;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 0.06em;

    cursor: pointer;

}


.conversation-send:hover {

    background:
        rgba(103, 216, 255, 0.18);

}


.conversation-send:disabled {

    opacity: 0.45;

    cursor: wait;

}


.sr-only {

    position: absolute;

    width: 1px;

    height: 1px;

    padding: 0;

    margin: -1px;

    overflow: hidden;

    clip: rect(0, 0, 0, 0);

    white-space: nowrap;

    border: 0;

}


/*
=========================================================
Conversation Responsive

BUILD0087B
=========================================================
*/


@media (
    max-width: 560px
) {

    .conversation-history {

        height: 300px;

        padding: 16px;

    }


    .conversation-form {

        grid-template-columns:
            1fr;

    }


    .conversation-send {

        width: 100%;

    }


    .message-bubble {

        max-width: 94%;

    }

}


/*
=========================================================
Browser Microphone

BUILD0087C
=========================================================
*/


.conversation-form {

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

}


.conversation-microphone {

    min-width: 92px;

    min-height: 48px;

    padding:
        0 15px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 7px;

    border:
        1px solid
        rgba(103, 216, 255, 0.34);

    border-radius: 12px;

    background:
        rgba(103, 216, 255, 0.08);

    color: var(--accent);

    font: inherit;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 0.04em;

    cursor: pointer;

    transition:
        background 160ms ease,
        border-color 160ms ease,
        box-shadow 160ms ease,
        color 160ms ease;

}


.conversation-microphone:hover {

    background:
        rgba(103, 216, 255, 0.16);

}


.microphone-icon {

    font-size: 17px;

    line-height: 1;

}


.microphone-label {

    line-height: 1;

}


/*
Listening State
*/

.conversation-microphone.listening {

    border-color:
        rgba(255, 105, 105, 0.72);

    background:
        rgba(255, 105, 105, 0.14);

    color:
        #ff9b9b;

    box-shadow:
        0 0 0 3px
        rgba(255, 105, 105, 0.08);

}


/*
Processing State
*/

.conversation-microphone.processing {

    border-color:
        rgba(103, 216, 255, 0.48);

    background:
        rgba(103, 216, 255, 0.14);

    color:
        var(--accent);

    cursor: wait;

}


.conversation-microphone:disabled {

    opacity: 0.55;

    cursor: wait;

}


/*
Small Screens
*/

@media (max-width: 620px) {

    .conversation-form {

        grid-template-columns:
            1fr 1fr;

    }

    .conversation-input {

        grid-column:
            1 / -1;

    }

    .conversation-microphone,
    .conversation-send {

        width: 100%;

    }

}


/*
=========================================================
Riley Web Authentication

BUILD0087D
=========================================================
*/


.login-page {

    display: grid;

    place-items: center;

    padding: 24px;

}


.login-shell {

    width: min(
        100%,
        440px
    );

}


.login-card {

    padding:
        42px 38px 30px;

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

    border-radius: 22px;

    background:
        rgba(13, 25, 40, 0.90);

    backdrop-filter:
        blur(18px);

    box-shadow:
        0 30px 90px
        rgba(0, 0, 0, 0.28);

}


.login-orb {

    width: 68px;

    height: 68px;

    margin:
        0 auto 24px;

    display: grid;

    place-items: center;

    border:
        1px solid
        rgba(103, 216, 255, 0.4);

    border-radius: 50%;

    background:
        var(--accent-soft);

    box-shadow:
        0 0 45px
        rgba(103, 216, 255, 0.10);

    color:
        var(--accent);

    font-size: 27px;

    font-weight: 600;

}


.login-eyebrow {

    margin:
        0 0 8px;

    text-align: center;

    color:
        var(--accent);

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 0.18em;

}


.login-title {

    margin: 0;

    text-align: center;

    font-size: 34px;

    font-weight: 500;

}


.login-description {

    margin:
        12px 0 30px;

    text-align: center;

    color:
        var(--muted);

    font-size: 14px;

    line-height: 1.6;

}


.login-alert {

    margin-bottom: 20px;

    padding:
        12px 14px;

    border:
        1px solid
        rgba(255, 155, 155, 0.25);

    border-radius: 10px;

    background:
        rgba(255, 105, 105, 0.08);

    color:
        #ffb0b0;

    font-size: 13px;

    line-height: 1.5;

}


.login-form {

    display: grid;

    gap: 18px;

}


.login-field {

    display: grid;

    gap: 8px;

}


.login-field label {

    color:
        var(--muted);

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 0.06em;

    text-transform: uppercase;

}


.login-field input {

    width: 100%;

    min-height: 50px;

    padding:
        0 14px;

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

    border-radius: 11px;

    outline: none;

    background:
        rgba(7, 16, 28, 0.82);

    color:
        var(--text);

    font: inherit;

    font-size: 15px;

}


.login-field input:focus {

    border-color:
        rgba(103, 216, 255, 0.48);

    box-shadow:
        0 0 0 3px
        rgba(103, 216, 255, 0.07);

}


.login-submit {

    min-height: 52px;

    margin-top: 4px;

    border:
        1px solid
        rgba(103, 216, 255, 0.36);

    border-radius: 11px;

    background:
        rgba(103, 216, 255, 0.13);

    color:
        var(--accent);

    font: inherit;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 0.08em;

    text-transform: uppercase;

    cursor: pointer;

}


.login-submit:hover {

    background:
        rgba(103, 216, 255, 0.20);

}


.login-footer {

    margin-top: 30px;

    padding-top: 20px;

    display: flex;

    justify-content: space-between;

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

    color:
        var(--muted);

    font-size: 10px;

    letter-spacing: 0.06em;

}


@media (
    max-width: 520px
) {

    .login-page {

        padding: 14px;

    }


    .login-card {

        padding:
            34px 22px 24px;

    }

}