/* ==========================================================
   VALRYN HEADQUARTERS — KAIROS
   kairos.css — Clean Production Replacement
   PART 1 OF 4
   ========================================================== */

:root {
    --kr-bg: #05070d;

    --kr-panel:
        rgba(
            10,
            15,
            25,
            0.78
        );

    --kr-panel-strong:
        rgba(
            7,
            11,
            19,
            0.94
        );

    --kr-text: #ffffff;

    --kr-muted:
        rgba(
            255,
            255,
            255,
            0.68
        );

    --kr-border:
        rgba(
            255,
            255,
            255,
            0.13
        );

    --kr-border-hover:
        rgba(
            255,
            255,
            255,
            0.24
        );

    --kr-green: #42ff87;
    --kr-blue: #35b7ff;
    --kr-violet: #7257ff;

    --kr-radius: 28px;

    --kr-shadow:
        0 24px 70px
        rgba(
            0,
            0,
            0,
            0.4
        );
}

/* ==========================================================
   RESET
   ========================================================== */

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

html {
    width: 100%;
    min-width: 320px;
    min-height: 100%;

    scroll-behavior: smooth;

    background:
        var(--kr-bg);
}

body {
    width: 100%;
    min-width: 320px;
    min-height: 100vh;
    min-height: 100dvh;

    margin: 0;

    overflow-x: hidden;

    color:
        var(--kr-text);

    background:
        linear-gradient(
            180deg,
            rgba(
                0,
                0,
                0,
                0.12
            ),
            rgba(
                0,
                0,
                0,
                0.34
            )
        ),
        url("../assets/images/V-HQ.jpg")
        center center /
        cover
        no-repeat
        fixed;

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

    -webkit-font-smoothing:
        antialiased;

    text-rendering:
        optimizeLegibility;
}

body,
h1,
h2,
p {
    margin: 0;
}

a {
    color: inherit;

    text-decoration: none;
}

button,
input,
textarea {
    font: inherit;
}

button {
    cursor: pointer;
}

img {
    display: block;

    max-width: 100%;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible {
    outline:
        3px solid
        rgba(
            53,
            183,
            255,
            0.82
        );

    outline-offset: 3px;
}

/* ==========================================================
   BACKGROUND LAYERS
   ========================================================== */

.kr-background,
.kr-overlay {
    position: fixed;

    inset: 0;

    pointer-events: none;
}

.kr-background {
    z-index: 0;

    background:
        radial-gradient(
            circle at 50% 14%,
            rgba(
                255,
                213,
                110,
                0.06
            ),
            transparent 32%
        ),
        radial-gradient(
            circle at 50% 42%,
            rgba(
                53,
                183,
                255,
                0.04
            ),
            transparent 46%
        );
}

.kr-overlay {
    z-index: 1;

    background:
        radial-gradient(
            circle at 50% 18%,
            rgba(
                53,
                183,
                255,
                0.055
            ),
            transparent 34%
        ),
        linear-gradient(
            180deg,
            rgba(
                0,
                0,
                0,
                0.025
            ),
            rgba(
                0,
                0,
                0,
                0.3
            )
        );

    -webkit-backdrop-filter:
        blur(1px);

    backdrop-filter:
        blur(1px);
}

/* ==========================================================
   PAGE LAYOUT
   ========================================================== */

.kr-main {
    position: relative;

    z-index: 5;

    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;

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

    padding:
        max(
            18px,
            env(safe-area-inset-top)
        )
        clamp(
            14px,
            3vw,
            34px
        )
        max(
            24px,
            env(safe-area-inset-bottom)
        );
}

/* ==========================================================
   HEADER
   ========================================================== */

.kr-header {
    position: relative;

    z-index: 10;

    width:
        min(
            1500px,
            100%
        );

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

    gap: 18px;
}

.kr-back {
    min-height: 48px;

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

    padding:
        0
        22px;

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

    border-radius: 16px;

    color:
        var(--kr-text);

    background:
        rgba(
            255,
            255,
            255,
            0.06
        );

    font-size: 0.9rem;
    font-weight: 700;

    -webkit-backdrop-filter:
        blur(14px);

    backdrop-filter:
        blur(14px);

    box-shadow:
        inset
        0
        1px
        0
        rgba(
            255,
            255,
            255,
            0.035
        );

    transition:
        transform 0.22s ease,
        background-color 0.22s ease,
        border-color 0.22s ease,
        box-shadow 0.22s ease;
}

.kr-back:hover {
    transform:
        translateY(-2px);

    border-color:
        var(--kr-border-hover);

    background:
        rgba(
            255,
            255,
            255,
            0.1
        );

    box-shadow:
        0
        12px
        26px
        rgba(
            0,
            0,
            0,
            0.18
        );
}

.kr-clock {
    color:
        var(--kr-text);

    font-size:
        clamp(
            1.05rem,
            2vw,
            2rem
        );

    font-weight: 700;

    line-height: 1;

    letter-spacing:
        0.04em;

    font-variant-numeric:
        tabular-nums;

    text-shadow:
        0
        3px
        16px
        rgba(
            0,
            0,
            0,
            0.48
        );
}

/* ==========================================================
   HERO
   ========================================================== */

.kr-hero {
    position: relative;

    z-index: 5;

    width: 100%;

    margin-top:
        clamp(
            12px,
            2vh,
            22px
        );

    text-align: center;
}

/* ==========================================================
   KAIROS ORB
   ========================================================== */

.kr-orb {
    position: relative;

    width:
        clamp(
            112px,
            13vw,
            168px
        );

    height:
        clamp(
            112px,
            13vw,
            168px
        );

    margin:
        0
        auto;

    display: grid;
    place-items: center;

    isolation: isolate;

    overflow: visible;

    border:
        1px solid
        rgba(
            215,
            229,
            255,
            0.2
        );

    border-radius: 50%;

    background:
        radial-gradient(
            circle at 37% 28%,
            rgba(
                255,
                255,
                255,
                0.15
            ),
            rgba(
                53,
                183,
                255,
                0.05
            )
            38%,
            rgba(
                8,
                12,
                22,
                0.18
            )
            68%,
            rgba(
                5,
                7,
                13,
                0.32
            )
            100%
        );

    box-shadow:
        0
        0
        30px
        rgba(
            53,
            183,
            255,
            0.13
        ),

        0
        0
        68px
        rgba(
            114,
            87,
            255,
            0.08
        ),

        inset
        0
        0
        28px
        rgba(
            255,
            255,
            255,
            0.045
        );

    -webkit-backdrop-filter:
        blur(8px);

    backdrop-filter:
        blur(8px);

    animation:
        krOrbPulse
        6s
        ease-in-out
        infinite;
}

.kr-orb::before {
    content: "";

    position: absolute;

    inset: -7%;

    z-index: 0;

    border:
        1px solid
        rgba(
            63,
            164,
            255,
            0.3
        );

    border-radius: 50%;

    pointer-events: none;

    box-shadow:
        0
        0
        14px
        rgba(
            53,
            183,
            255,
            0.12
        );

    transform:
        rotateX(67deg)
        rotateZ(-18deg);

    animation:
        krOrbitRing
        24s
        linear
        infinite;
}

.kr-orb::after {
    content: "";

    position: absolute;

    top: 14%;
    left: 22%;

    z-index: 1;

    width: 31%;
    height: 17%;

    border-radius: 50%;

    pointer-events: none;

    background:
        linear-gradient(
            135deg,
            rgba(
                255,
                255,
                255,
                0.18
            ),
            transparent
        );

    filter:
        blur(5px);

    opacity: 0.68;

    transform:
        rotate(-24deg);
}






/* ==========================================================
   CENTERED KAIROS LOGO
   Restores the original natural centering behavior
   ========================================================== */

.kr-orb img {
    position: relative;

    z-index: 2;

    display: block;

    width:
        clamp(
            188px,
            25vw,
            310px
        );

    max-width: none;
    height: auto;

    object-fit: contain;

    transform:
        translateX(-26%)
        scale(1.04);

    transform-origin: center;

    filter:
        drop-shadow(
            0
            6px
            10px
            rgba(
                0,
                0,
                0,
                0.34
            )
        )
        drop-shadow(
            0
            0
            8px
            rgba(
                53,
                183,
                255,
                0.11
            )
        );
}

















/* ==========================================================
   HERO TYPOGRAPHY
   ========================================================== */

.kr-hero h1 {
    margin-top:
        clamp(
            12px,
            1.8vh,
            19px
        );

    font-family:
        "Orbitron",
        "Inter",
        sans-serif;

    font-size:
        clamp(
            2.4rem,
            7vw,
            4.5rem
        );

    font-weight: 700;

    line-height: 1;

    letter-spacing:
        clamp(
            0.2rem,
            1vw,
            0.62rem
        );

    text-indent:
        clamp(
            0.2rem,
            1vw,
            0.62rem
        );

    text-shadow:
        0
        5px
        24px
        rgba(
            0,
            0,
            0,
            0.48
        );
}

.kr-subtitle {
    margin-top: 10px;

    color:
        rgba(
            255,
            255,
            255,
            0.74
        );

    font-size:
        clamp(
            0.66rem,
            1.7vw,
            0.9rem
        );

    font-weight: 700;

    line-height: 1.3;

    letter-spacing:
        clamp(
            0.15rem,
            0.6vw,
            0.38rem
        );

    text-transform: uppercase;

    text-shadow:
        0
        3px
        14px
        rgba(
            0,
            0,
            0,
            0.45
        );
}

.kr-hero h2 {
    margin-top: 12px;

    color:
        rgba(
            255,
            255,
            255,
            0.96
        );

    font-size:
        clamp(
            1.2rem,
            2.5vw,
            2.15rem
        );

    font-weight: 700;

    line-height: 1.2;

    letter-spacing:
        -0.025em;

    text-shadow:
        0
        4px
        20px
        rgba(
            0,
            0,
            0,
            0.38
        );
}

/* ==========================================================
   ORB ANIMATIONS
   ========================================================== */

@keyframes krOrbPulse {
    0%,
    100% {
        box-shadow:
            0
            0
            30px
            rgba(
                53,
                183,
                255,
                0.13
            ),

            0
            0
            68px
            rgba(
                114,
                87,
                255,
                0.08
            ),

            inset
            0
            0
            28px
            rgba(
                255,
                255,
                255,
                0.045
            );
    }

    50% {
        box-shadow:
            0
            0
            40px
            rgba(
                53,
                183,
                255,
                0.2
            ),

            0
            0
            82px
            rgba(
                114,
                87,
                255,
                0.12
            ),

            inset
            0
            0
            34px
            rgba(
                255,
                255,
                255,
                0.065
            );
    }
}

@keyframes krOrbitRing {
    from {
        transform:
            rotateX(67deg)
            rotateZ(-18deg);
    }

    to {
        transform:
            rotateX(67deg)
            rotateZ(342deg);
    }
}
/* ==========================================================
   CHAT WINDOW
   ========================================================== */

.kr-chat {
    width:
        min(
            1500px,
            100%
        );

    height:
        clamp(
            420px,
            54vh,
            650px
        );

    min-height: 420px;

    margin-top:
        clamp(
            18px,
            2.8vh,
            30px
        );

    display: flex;
    flex-direction: column;

    overflow: hidden;

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

    border-radius:
        var(--kr-radius);

    background:
        linear-gradient(
            180deg,
            rgba(
                15,
                20,
                31,
                0.84
            ),
            rgba(
                7,
                11,
                19,
                0.8
            )
        );

    box-shadow:
        var(--kr-shadow),

        0
        0
        0
        1px
        rgba(
            53,
            183,
            255,
            0.025
        ),

        inset
        0
        1px
        0
        rgba(
            255,
            255,
            255,
            0.04
        );

    -webkit-backdrop-filter:
        blur(18px);

    backdrop-filter:
        blur(18px);
}

/* ==========================================================
   CHAT HEADER
   ========================================================== */

.kr-chat-header {
    min-height: 72px;

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

    gap: 18px;

    padding:
        12px
        24px;

    flex-shrink: 0;

    border-bottom:
        1px solid
        rgba(
            255,
            255,
            255,
            0.1
        );

    background:
        linear-gradient(
            180deg,
            rgba(
                255,
                255,
                255,
                0.028
            ),
            rgba(
                255,
                255,
                255,
                0.008
            )
        );
}

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

    display: flex;
    align-items: center;

    gap: 14px;
}

.kr-chat-logo {
    width: 48px;
    height: 48px;

    flex-shrink: 0;

    display: block;

    object-fit: contain;

    filter:
        drop-shadow(
            0
            3px
            8px
            rgba(
                0,
                0,
                0,
                0.32
            )
        );
}

.kr-chat-title > div {
    min-width: 0;
}

.kr-chat-title strong {
    display: block;

    overflow: hidden;

    color:
        #ffffff;

    font-size: 1rem;
    font-weight: 800;

    line-height: 1.2;

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

.kr-chat-title span {
    display: block;

    margin-top: 3px;

    overflow: hidden;

    color:
        var(--kr-muted);

    font-size: 0.78rem;

    line-height: 1.3;

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

/* ==========================================================
   ONLINE STATUS
   ========================================================== */

.kr-online {
    display: inline-flex;
    align-items: center;

    gap: 9px;

    flex-shrink: 0;

    color:
        rgba(
            255,
            255,
            255,
            0.82
        );

    font-size: 0.74rem;
    font-weight: 800;

    line-height: 1;

    letter-spacing:
        0.12em;

    text-transform:
        uppercase;
    flex-wrap: wrap;
    justify-content: flex-end;
    max-width: 310px;
}

.kr-online small {
    display: block;
    font-size: .62rem;
    font-weight: 500;
    margin-top: 3px;
    opacity: .72;
    text-transform: none;
}

.kr-dot {
    width: 9px;
    height: 9px;

    flex-shrink: 0;

    border-radius: 50%;

    background:
        var(--kr-green);

    box-shadow:
        0
        0
        12px
        rgba(
            66,
            255,
            135,
            0.9
        );

    animation:
        krOnlinePulse
        2.4s
        ease-in-out
        infinite;
}

@keyframes krOnlinePulse {
    0%,
    100% {
        opacity: 0.78;

        transform:
            scale(0.92);

        box-shadow:
            0
            0
            8px
            rgba(
                66,
                255,
                135,
                0.68
            );
    }

    50% {
        opacity: 1;

        transform:
            scale(1.08);

        box-shadow:
            0
            0
            15px
            rgba(
                66,
                255,
                135,
                0.95
            );
    }
}

/* ==========================================================
   CHAT HISTORY
   ========================================================== */

.kr-messages {
    min-height: 0;

    flex: 1;

    display: flex;
    flex-direction: column;

    gap: 20px;

    overflow-y: auto;
    overscroll-behavior: contain;

    padding:
        clamp(
            18px,
            3vw,
            28px
        );

    scrollbar-width: thin;

    scrollbar-color:
        rgba(
            255,
            255,
            255,
            0.2
        )
        transparent;
}

.kr-messages::-webkit-scrollbar {
    width: 8px;
}

.kr-messages::-webkit-scrollbar-track {
    background:
        transparent;
}

.kr-messages::-webkit-scrollbar-thumb {
    border-radius: 20px;

    background:
        rgba(
            255,
            255,
            255,
            0.18
        );
}

.kr-messages::-webkit-scrollbar-thumb:hover {
    background:
        rgba(
            255,
            255,
            255,
            0.28
        );
}

/* ==========================================================
   MESSAGE ROWS
   ========================================================== */

.kr-message {
    width: 100%;

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

    gap: 16px;

    animation:
        krMessageEnter
        0.34s
        ease-out
        both;
}

.kr-avatar {
    width: 50px;
    height: 50px;

    flex-shrink: 0;

    display: grid;
    place-items: center;

    overflow: hidden;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.12
        );

    border-radius: 50%;

    background:
        radial-gradient(
            circle at 38% 28%,
            rgba(
                255,
                255,
                255,
                0.08
            ),
            rgba(
                255,
                255,
                255,
                0.035
            )
        );

    box-shadow:
        inset
        0
        1px
        0
        rgba(
            255,
            255,
            255,
            0.04
        );
}

.kr-avatar img {
    width: 34px;
    max-width: none;
    height: auto;

    object-fit: contain;

    transform:
        translate(
            -2%,
            2%
        );

    filter:
        drop-shadow(
            0
            2px
            4px
            rgba(
                0,
                0,
                0,
                0.32
            )
        );
}

.kr-bubble {
    width: fit-content;

    max-width:
        min(
            760px,
            calc(
                100% -
                70px
            )
        );

    padding:
        17px
        21px;

    overflow-wrap: anywhere;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.08
        );

    border-radius: 22px;

    background:
        linear-gradient(
            145deg,
            rgba(
                255,
                255,
                255,
                0.065
            ),
            rgba(
                255,
                255,
                255,
                0.035
            )
        );

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

.kr-bubble strong {
    display: block;

    margin-bottom: 9px;

    color:
        #ffffff;

    font-size: 0.92rem;
    font-weight: 800;

    line-height: 1.2;
}

.kr-bubble p {
    color:
        rgba(
            255,
            255,
            255,
            0.9
        );

    font-size: 0.95rem;

    line-height: 1.7;
}

.kr-message-content pre {
    background: rgba(0, 0, 0, .48);
    border: 1px solid rgba(120, 160, 255, .22);
    border-radius: 8px;
    margin: 10px 0 0;
    max-width: 100%;
    overflow-x: auto;
    padding: 12px;
    white-space: pre-wrap;
}

.kr-message-content code {
    color: #d9e5ff;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.kr-message-content h3,
.kr-message-content h4,
.kr-message-content h5,
.kr-message-content h6 {
    margin: 12px 0 6px;
    line-height: 1.35;
}

.kr-code-shell {
    position: relative;
}

.kr-copy-code {
    position: absolute;
    z-index: 1;
    top: 16px;
    right: 7px;
    min-height: 34px;
    padding: 0 10px;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 8px;
    background: rgba(8, 12, 22, .92);
    color: var(--kr-text);
    font-size: .72rem;
}

.kr-bubble time {
    display: block;
    margin-top: 8px;
    color: var(--kr-muted);
    font-size: .68rem;
    text-align: right;
}

.kr-retry {
    min-height: 38px;
    margin-top: 10px;
    padding: 0 14px;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 10px;
    background: transparent;
    color: var(--kr-text);
    font-weight: 700;
}

/* ==========================================================
   MESSAGE VARIANTS
   ========================================================== */

.kr-message.is-user {
    justify-content: flex-end;
}

.kr-message.is-user .kr-avatar {
    order: 2;

    border-color:
        rgba(
            53,
            183,
            255,
            0.22
        );

    background:
        linear-gradient(
            145deg,
            rgba(
                53,
                183,
                255,
                0.16
            ),
            rgba(
                114,
                87,
                255,
                0.12
            )
        );
}

.kr-message.is-user .kr-bubble {
    order: 1;

    border-color:
        rgba(
            53,
            183,
            255,
            0.18
        );

    background:
        linear-gradient(
            145deg,
            rgba(
                53,
                183,
                255,
                0.14
            ),
            rgba(
                114,
                87,
                255,
                0.1
            )
        );
}

.kr-message.is-system .kr-bubble {
    border-color:
        rgba(
            66,
            255,
            135,
            0.14
        );

    background:
        linear-gradient(
            145deg,
            rgba(
                66,
                255,
                135,
                0.07
            ),
            rgba(
                255,
                255,
                255,
                0.03
            )
        );
}

.kr-message.is-error .kr-bubble {
    border-color:
        rgba(
            255,
            104,
            104,
            0.2
        );

    background:
        linear-gradient(
            145deg,
            rgba(
                255,
                104,
                104,
                0.09
            ),
            rgba(
                255,
                255,
                255,
                0.025
            )
        );
}

.kr-message.is-error .kr-bubble strong {
    color:
        #ffb0b0;
}

/* ==========================================================
   MESSAGE ENTRY
   ========================================================== */

@keyframes krMessageEnter {
    from {
        opacity: 0;

        transform:
            translateY(10px);
    }

    to {
        opacity: 1;

        transform:
            translateY(0);
    }
}
/* ==========================================================
   INPUT BAR
   ========================================================== */

.kr-input-bar {
    display: grid;

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

    gap: 12px;

    padding: 16px;

    flex-shrink: 0;

    border-top:
        1px solid
        rgba(
            255,
            255,
            255,
            0.1
        );

    background:
        linear-gradient(
            180deg,
            rgba(
                5,
                8,
                14,
                0.28
            ),
            rgba(
                5,
                8,
                14,
                0.46
            )
        );
}

.kr-input-bar textarea {
    width: 100%;
    min-width: 0;
    height: 56px;
    max-height: 132px;
    resize: vertical;

    padding:
        15px
        20px;

    border:
        1px solid
        transparent;

    border-radius: 17px;

    outline: none;

    color:
        var(--kr-text);

    background:
        rgba(
            255,
            255,
            255,
            0.065
        );

    font-size: 1rem;

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

    transition:
        border-color 0.2s ease,
        background-color 0.2s ease,
        box-shadow 0.2s ease,
        opacity 0.2s ease;
}

.kr-input-bar textarea::placeholder {
    color:
        rgba(
            255,
            255,
            255,
            0.5
        );
}

.kr-input-bar textarea:hover {
    background:
        rgba(
            255,
            255,
            255,
            0.08
        );
}

.kr-input-bar textarea:focus {
    border-color:
        rgba(
            53,
            183,
            255,
            0.52
        );

    background:
        rgba(
            255,
            255,
            255,
            0.095
        );

    box-shadow:
        0
        0
        0
        4px
        rgba(
            53,
            183,
            255,
            0.1
        ),

        inset
        0
        1px
        0
        rgba(
            255,
            255,
            255,
            0.035
        );
}

.kr-input-bar textarea:disabled {
    opacity: 0.58;

    cursor: not-allowed;
}

/* ==========================================================
   SEND BUTTON
   ========================================================== */

.kr-input-bar button {
    position: relative;

    min-width: 0;
    min-height: 56px;

    padding:
        0
        18px;

    overflow: hidden;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.12
        );

    border-radius: 17px;

    color:
        var(--kr-text);

    background:
        linear-gradient(
            135deg,
            rgba(
                53,
                183,
                255,
                0.82
            ),
            rgba(
                114,
                87,
                255,
                0.88
            )
        );

    font-size: 0.95rem;
    font-weight: 800;

    box-shadow:
        inset
        0
        1px
        0
        rgba(
            255,
            255,
            255,
            0.12
        );

    transition:
        transform 0.22s ease,
        filter 0.22s ease,
        box-shadow 0.22s ease,
        opacity 0.22s ease;
}

.kr-input-bar button::before {
    content: "";

    position: absolute;

    top: 0;
    left: -120%;

    width: 74%;
    height: 100%;

    pointer-events: none;

    background:
        linear-gradient(
            110deg,
            transparent,
            rgba(
                255,
                255,
                255,
                0.24
            ),
            transparent
        );

    transform:
        skewX(-18deg);

    transition:
        left
        0.6s
        ease;
}

.kr-input-bar button:hover {
    transform:
        translateY(-2px);

    filter:
        brightness(1.08);

    box-shadow:
        0
        14px
        30px
        rgba(
            53,
            183,
            255,
            0.16
        ),

        inset
        0
        1px
        0
        rgba(
            255,
            255,
            255,
            0.16
        );
}

.kr-input-bar button:hover::before {
    left: 145%;
}

.kr-input-bar button:active {
    transform:
        translateY(0)
        scale(0.985);
}

.kr-input-bar button:disabled {
    opacity: 0.54;

    cursor: not-allowed;

    transform: none;

    filter: none;

    box-shadow:
        inset
        0
        1px
        0
        rgba(
            255,
            255,
            255,
            0.06
        );
}

.kr-input-bar button:disabled::before {
    display: none;
}

/* ==========================================================
   THINKING STATE
   ========================================================== */

.kr-message.is-thinking .kr-bubble {
    min-width: 118px;
}

.kr-thinking-dots {
    display: inline-flex;
    align-items: center;

    gap: 6px;
}

.kr-thinking-dots span {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background:
        rgba(
            255,
            255,
            255,
            0.72
        );

    animation:
        krThinkingDot
        1.25s
        ease-in-out
        infinite;
}

.kr-thinking-dots span:nth-child(2) {
    animation-delay:
        0.15s;
}

.kr-thinking-dots span:nth-child(3) {
    animation-delay:
        0.3s;
}

@keyframes krThinkingDot {
    0%,
    60%,
    100% {
        opacity: 0.34;

        transform:
            translateY(0)
            scale(0.86);
    }

    30% {
        opacity: 1;

        transform:
            translateY(-4px)
            scale(1);
    }
}

/* ==========================================================
   KAIROS ACTIVE STATES
   Optional classes for kairos.js:
   body.kr-is-thinking
   body.kr-is-responding
   ========================================================== */

body.kr-is-thinking .kr-orb {
    animation-duration:
        3.2s;

    box-shadow:
        0
        0
        46px
        rgba(
            53,
            183,
            255,
            0.24
        ),

        0
        0
        92px
        rgba(
            114,
            87,
            255,
            0.15
        ),

        inset
        0
        0
        38px
        rgba(
            255,
            255,
            255,
            0.07
        );
}

body.kr-is-thinking .kr-orb::before {
    animation-duration:
        9s;
}

body.kr-is-responding .kr-orb {
    animation-duration:
        2.4s;
}

body.kr-is-responding .kr-orb::before {
    animation-duration:
        13s;
}

body.kr-is-responding .kr-dot {
    animation-duration:
        1.2s;
}

/* ==========================================================
   TABLET
   ========================================================== */

@media (max-width: 900px) {
    body {
        background-attachment:
            scroll;
    }

    .kr-main {
        justify-content:
            flex-start;
    }

    .kr-chat {
        height:
            clamp(
                430px,
                57vh,
                620px
            );
    }

    .kr-chat-header {
        padding-inline:
            18px;
    }

    .kr-bubble {
        max-width:
            min(
                680px,
                calc(
                    100% -
                    66px
                )
            );
    }
}

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

@media (max-width: 600px) {
    body {
        min-height:
            100dvh;

        background:
            linear-gradient(
                180deg,
                rgba(
                    0,
                    0,
                    0,
                    0.22
                ),
                rgba(
                    0,
                    0,
                    0,
                    0.42
                )
            ),
            url("../assets/images/V-HQ.jpg")
            center center /
            cover
            no-repeat;
    }

    .kr-main {
        min-height:
            100dvh;

        padding:
            max(
                12px,
                env(safe-area-inset-top)
            )
            10px
            max(
                12px,
                env(safe-area-inset-bottom)
            );
    }

    .kr-header {
        gap: 10px;
    }

    .kr-back {
        min-height: 42px;

        padding:
            0
            14px;

        border-radius: 13px;

        font-size: 0.78rem;
    }

    .kr-clock {
        font-size: 1rem;
    }

    .kr-hero {
        margin-top: 12px;
    }

    .kr-orb {
        width: 94px;
        height: 94px;
    }

    .kr-orb img {
        width: 178px;

        transform:
            translateX(-26%)
            scale(1.04);
    }

    .kr-hero h1 {
        margin-top: 12px;

        font-size:
            clamp(
                2rem,
                12vw,
                3rem
            );

        letter-spacing:
            0.22rem;

        text-indent:
            0.22rem;
    }

    .kr-subtitle {
        margin-top: 7px;

        font-size: 0.62rem;

        letter-spacing:
            0.18rem;
    }

    .kr-hero h2 {
        margin-top: 10px;

        font-size:
            clamp(
                1.05rem,
                5vw,
                1.35rem
            );
    }

    .kr-chat {
        width: 100%;
        height: auto;

        min-height: 0;
        max-height: none;

        flex: 1;

        margin-top: 16px;

        border-radius: 20px;
    }

    .kr-chat-header {
        min-height: 62px;

        padding:
            10px
            14px;

        gap: 10px;
    }

    .kr-chat-logo {
        width: 40px;
        height: 40px;
    }

    .kr-chat-title {
        gap: 10px;
    }

    .kr-chat-title strong {
        font-size: 0.9rem;
    }

    .kr-chat-title span {
        font-size: 0.7rem;
    }

    .kr-online {
        gap: 6px;

        font-size: 0.62rem;

        letter-spacing:
            0.08em;
    }

    .kr-dot {
        width: 8px;
        height: 8px;
    }

    .kr-messages {
        min-height: 210px;

        gap: 14px;

        padding: 14px;
    }

    .kr-message {
        gap: 10px;
    }

    .kr-avatar {
        width: 38px;
        height: 38px;
    }

    .kr-avatar img {
        width: 26px;
    }

    .kr-bubble {
        max-width:
            calc(
                100% -
                48px
            );

        padding:
            13px
            15px;

        border-radius: 17px;
    }

    .kr-bubble strong {
        margin-bottom: 6px;

        font-size: 0.82rem;
    }

    .kr-bubble p {
        font-size: 0.86rem;

        line-height: 1.6;
    }

    .kr-input-bar {
        grid-template-columns:
            minmax(
                0,
                1fr
            )
            auto;

        gap: 8px;

        padding: 10px;
    }

    .kr-input-bar textarea {
        height: 50px;

        padding:
            12px
            14px;

        border-radius: 14px;

        font-size: 0.9rem;
    }

    .kr-input-bar button {
        min-width: 54px;
        min-height: 50px;

        padding:
            0
            14px;

        border-radius: 14px;

        font-size: 0.82rem;
    }
}
/* ==========================================================
   SHORT SCREENS
   ========================================================== */

@media (max-height: 760px) {
    .kr-main {
        justify-content: flex-start;
    }

    .kr-hero {
        margin-top: 8px;
    }

    .kr-orb {
        width: 88px;
        height: 88px;
    }

    .kr-orb img {
        width: 170px;

        transform:
            translateX(-26%)
            scale(1.03);
    }

    .kr-hero h1 {
        margin-top: 8px;

        font-size:
            clamp(
                2rem,
                5vw,
                3.2rem
            );
    }

    .kr-subtitle {
        margin-top: 6px;
    }

    .kr-hero h2 {
        margin-top: 8px;

        font-size:
            clamp(
                1rem,
                2vw,
                1.6rem
            );
    }

    .kr-chat {
        margin-top: 14px;

        height:
            clamp(
                360px,
                48vh,
                520px
            );
    }
}

/* ==========================================================
   TOUCH DEVICES
   ========================================================== */

@media (hover: none) {
    .kr-back:hover,
    .kr-input-bar button:hover {
        transform: none;

        filter: none;
    }

    .kr-input-bar button::before {
        display: none;
    }
}

/* ==========================================================
   REDUCED MOTION
   ========================================================== */

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation: none !important;

        transition-duration:
            0.01ms !important;

        animation-duration:
            0.01ms !important;

        animation-iteration-count:
            1 !important;

        scroll-behavior:
            auto !important;
    }
}

/* ==========================================================
   HIGH CONTRAST
   ========================================================== */

@media (prefers-contrast: more) {
    .kr-back,
    .kr-chat,
    .kr-avatar,
    .kr-bubble,
    .kr-input-bar textarea,
    .kr-input-bar button {
        border-color:
            rgba(
                255,
                255,
                255,
                0.42
            );
    }

    .kr-chat-title span,
    .kr-subtitle,
    .kr-bubble p {
        color:
            rgba(
                255,
                255,
                255,
                0.92
            );
    }
}

/* ==========================================================
   PRINT
   ========================================================== */

@media print {
    body {
        color: #000;

        background: #fff;
    }

    .kr-background,
    .kr-overlay,
    .kr-header,
    .kr-input-bar {
        display: none !important;
    }

    .kr-main {
        padding: 0;

        min-height: auto;
    }

    .kr-chat {
        height: auto;

        margin-top: 24px;

        border:
            1px solid
            #cccccc;

        color: #000;

        background: #fff;

        box-shadow: none;

        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }

    .kr-chat-header,
    .kr-avatar,
    .kr-bubble {
        color: #000;

        background: #fff;

        border-color: #cccccc;

        box-shadow: none;
    }

    .kr-chat-title span,
    .kr-bubble p {
        color: #333;
    }

    .kr-messages {
        overflow: visible;
    }
}