@property --assistant-rim-spin {
    syntax: '<angle>';
    inherits: false;
    initial-value: 0deg;
}

.assistant-chat {
    position: absolute;
    z-index: 4;
    left: 38vw;
    right: clamp(62px, 7vw, 140px);
    top: 23vh;
    height: min(67vh, 720px);
    pointer-events: none;
}

.assistant-exchange {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    gap: clamp(24px, 3.4vh, 42px);
    opacity: 0;
    pointer-events: none;
}

.assistant-message {
    position: relative;
    box-sizing: border-box;
    margin: 0;
    opacity: 0;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    font: 300 clamp(36px, 2.7vw, 54px)/.96 var(--font-nunito-light-wide);
    font-stretch: 105%;
    font-synthesis: none;
    letter-spacing: 0;
}

.assistant-message p {
    margin: 0
}

.assistant-message__label {
    display: flex;
    align-items: center;
    margin-bottom: clamp(13px, 1.5vh, 18px);
    color: rgba(255, 255, 255, .4);
    font: 500 clamp(13px, .9vw, 16px)/1 var(--font-nunito-medium);
    font-stretch: 100%;
    font-synthesis: none;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.assistant-message--user {
    isolation: isolate;
    overflow: hidden;
    align-self: flex-end;
    transform-origin: right center;
    width: fit-content;
    max-width: min(78%, 900px);
    padding: clamp(28px, 3.1vw, 48px) clamp(32px, 3.6vw, 58px);
    border: 0;
    border-radius: clamp(30px, 2.8vw, 48px) clamp(30px, 2.8vw, 48px) 12px clamp(30px, 2.8vw, 48px);
    color: #fff;
    background: rgba(255, 255, 255, .07);
    box-shadow: 0 28px 76px rgba(0, 0, 0, .28);
}

.assistant-message--user::before {
    content: '';
    position: absolute;
    z-index: -1;
    inset: 0;
    background: transparent;
    transform: scaleX(var(--request-fill, 0));
    transform-origin: left center;
}

.assistant-message--agent {
    --assistant-rim-spin: 0deg;
    align-self: flex-start;
    isolation: isolate;
    overflow: hidden;
    margin-left: clamp(18px, 2vw, 36px);
    transform-origin: left center;
    width: max-content;
    max-width: calc(100% - clamp(18px, 2vw, 36px));
    padding: clamp(30px, 3.35vw, 54px) clamp(34px, 4vw, 66px);
    border: 0;
    border-radius: 12px clamp(32px, 3vw, 52px) clamp(32px, 3vw, 52px) clamp(32px, 3vw, 52px);
    color: #fff;
    background: radial-gradient(circle at 10% 96%, rgba(4, 0, 250, .76), transparent 52%),
    radial-gradient(circle at 92% 8%, rgba(54, 114, 255, .78), transparent 54%),
    radial-gradient(circle at 52% 42%, rgba(105, 102, 255, .40), transparent 46%),
    linear-gradient(135deg, #1C1D1D, #0400FA);
    box-shadow: 0 34px 110px rgba(3, 8, 35, .40),
    0 0 0 1px rgba(174, 190, 255, .10),
    0 0 18px rgba(174, 190, 255, .22),
    0 0 48px rgba(4, 0, 250, .24),
    0 0 92px rgba(62, 112, 255, .22);
}

.assistant-message--agent::after {
    content: '';
    position: absolute;
    z-index: 2;
    inset: 0;
    padding: 2px;
    border-radius: inherit;
    background: conic-gradient(from var(--assistant-rim-spin),
    rgba(4, 0, 250, .18) 0deg,
    #0400FA 58deg,
    #FFFFFF 83deg,
    #AEBEFF 96deg,
    #3439FF 110deg,
    rgba(52, 57, 255, .12) 175deg,
    rgba(4, 0, 250, .12) 252deg,
    #0400FA 318deg,
    rgba(4, 0, 250, .18) 360deg);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    animation: assistantAgentRimRun 4.6s linear infinite;
    animation-play-state: paused;
    pointer-events: none;
}

.assistant-exchange.is-active .assistant-message--agent::after {
    animation-play-state: running
}

@keyframes assistantAgentRimRun {
    to {
        --assistant-rim-spin: 360deg
    }
}

.assistant-message--agent strong {
    display: block;
    font-family: inherit;
    font-weight: inherit;
    font-stretch: inherit;
    font-synthesis: none;
}

@media (max-width: 900px) {
    .assistant-chat {
        left: 20px;
        right: 20px;
        top: 43svh;
        height: 52svh
    }

    .assistant-exchange {
        gap: 20px
    }

    .assistant-message {
        align-self: center;
        max-width: 86%;
        font-size: clamp(21px, 5.2vw, 25px);
        line-height: 1.08;
        transform-origin: center;
    }

    .assistant-message__label {
        margin-bottom: 8px;
        font-size: clamp(10px, 2.6vw, 12px);
        letter-spacing: .12em;
    }

    .assistant-message--user {
        padding: 21px 24px
    }

    .assistant-message--agent {
        margin-left: 0;
        padding: 24px 26px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .assistant-message--agent::after {
        animation: none;
        --assistant-rim-spin: 55deg
    }
}

.hotel-message__signal,
.assistant-message__signal {
    --signal-bloom: 0;
    --signal-bloom-scale: .42;
    --signal-spark-opacity: 0;
    --signal-spark-scale: .35;
    --signal-spark-rotation: 0deg;
    position: relative;
    z-index: 0;
    display: inline-block;
    isolation: isolate;
    color: inherit;
    text-decoration: none;
    text-shadow: none;
}

.hotel-message__signal::before,
.assistant-message__signal::before {
    content: '';
    position: absolute;
    z-index: -1;
    inset: -.58em -.72em;
    border-radius: 999px;
    opacity: var(--signal-bloom);
    background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .96) 0 5%, rgba(194, 214, 255, .62) 18%, rgba(80, 112, 255, .34) 40%, rgba(4, 0, 250, .12) 58%, transparent 76%);
    filter: blur(9px);
    transform: scale(var(--signal-bloom-scale));
    transform-origin: 50% 50%;
    pointer-events: none;
}

.hotel-message__signal::after,
.assistant-message__signal::after {
    content: '';
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 50%;
    width: .1em;
    height: .1em;
    border-radius: 50%;
    opacity: var(--signal-spark-opacity);
    background: #fff;
    box-shadow: -.72em -.34em 0 -.01em rgba(255, 255, 255, .94),
    .7em -.46em 0 -.02em rgba(176, 203, 255, .92),
    -.52em .42em 0 -.025em rgba(128, 161, 255, .86),
    .82em .26em 0 -.02em rgba(255, 255, 255, .90),
    .12em -.7em 0 -.03em rgba(255, 255, 255, .78),
    -.08em .72em 0 -.035em rgba(128, 161, 255, .72);
    transform: translate(-50%, -50%) scale(var(--signal-spark-scale)) rotate(var(--signal-spark-rotation));
    transform-origin: 50% 50%;
    pointer-events: none;
}