.h2o-ai-agent {
    --h2o-ai-agent-size: clamp(190px, 22vw, 280px);
    position: fixed;
    left: 50%;
    top: 50%;
    right: auto;
    bottom: auto;
    z-index: 2147483646 !important;
    isolation: isolate;
    width: var(--h2o-ai-agent-size);
    translate: -50% -50%;
    font: inherit;
    line-height: 1.35;
    pointer-events: none;
    touch-action: none;
}

.h2o-ai-agent.is-positioned {
    translate: 0 0;
}

.h2o-ai-agent.is-dismissed {
    display: none !important;
}

.h2o-ai-agent__button {
    appearance: none;
    -webkit-appearance: none;
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    aspect-ratio: 1;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    cursor: grab;
    pointer-events: auto;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.h2o-ai-agent.is-dragging .h2o-ai-agent__button {
    cursor: grabbing;
}

.h2o-ai-agent__button:focus-visible {
    outline: 3px solid currentColor;
    outline-offset: 5px;
    border-radius: 32px;
}

.h2o-ai-agent__lottie,
.h2o-ai-agent__lottie > svg {
    display: block;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.h2o-ai-agent__lottie {
    aspect-ratio: 1;
}

.h2o-ai-agent__dismiss {
    appearance: none;
    -webkit-appearance: none;
    position: absolute;
    z-index: 6;
    top: 10px;
    right: 12px;
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    padding: 0 0 2px;
    border: 2px solid rgba(23, 32, 51, .78);
    border-radius: 50%;
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 5px 15px rgba(15, 23, 42, .12);
    color: #172033;
    font: inherit;
    font-size: 21px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    pointer-events: auto;
    opacity: .72;
    transition: opacity 160ms ease, transform 160ms ease;
}

.h2o-ai-agent__dismiss:hover,
.h2o-ai-agent__dismiss:focus-visible {
    opacity: 1;
    transform: scale(1.06);
}

.h2o-ai-agent__dismiss:focus-visible {
    outline: 3px solid currentColor;
    outline-offset: 2px;
}

.h2o-ai-agent__bubble {
    position: absolute;
    z-index: 3;
    left: 50%;
    bottom: calc(100% - 24px);
    min-width: max-content;
    max-width: min(250px, 76vw);
    padding: 11px 17px 12px;
    border: 3px solid #172033;
    border-radius: 52% 48% 46% 54% / 52% 49% 51% 48%;
    background: #fff;
    box-shadow: 4px 5px 0 rgba(23, 32, 51, .14);
    color: #172033;
    font: inherit;
    font-size: 16px;
    font-weight: 800;
    letter-spacing: .01em;
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, 8px) rotate(-1deg) scale(.94);
    transition: opacity 180ms ease, transform 220ms ease, visibility 180ms ease;
    pointer-events: none;
}

.h2o-ai-agent__bubble::before,
.h2o-ai-agent__bubble::after {
    content: '';
    position: absolute;
    left: 54%;
    transform: translateX(-50%) rotate(12deg);
    transform-origin: top center;
    pointer-events: none;
}

.h2o-ai-agent__bubble::before {
    top: calc(100% - 2px);
    width: 24px;
    height: 25px;
    background: #172033;
    clip-path: polygon(0 0, 100% 0, 28% 100%);
}

.h2o-ai-agent__bubble::after {
    top: calc(100% - 4px);
    width: 17px;
    height: 20px;
    background: #fff;
    clip-path: polygon(0 0, 100% 0, 25% 100%);
}

.h2o-ai-agent__bubble[aria-hidden="false"] {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0) rotate(-1deg) scale(1);
}

.h2o-ai-agent.is-chat-open .h2o-ai-agent__bubble,
.h2o-ai-agent.is-dragging .h2o-ai-agent__bubble {
    opacity: 0;
    visibility: hidden;
}

.h2o-ai-agent[data-state="hidden"] {
    opacity: 0;
    transform: translateY(18px) scale(.96);
}

.h2o-ai-agent[data-state="entering"],
.h2o-ai-agent[data-state="hello"],
.h2o-ai-agent[data-state="idle"] {
    opacity: 1;
    transform: translateY(0) scale(1);
    transition: opacity 240ms ease, transform 320ms cubic-bezier(.2,.8,.2,1);
}

.h2o-ai-agent__chat {
    position: absolute;
    z-index: 4;
    left: calc(100% + 22px);
    top: 50%;
    display: flex;
    flex-direction: column;
    width: min(390px, calc(100vw - 32px));
    max-height: min(520px, calc(100vh - 32px));
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: #172033;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-50%) translateX(10px) scale(.98);
    transform-origin: left center;
    transition: opacity 180ms ease, transform 220ms ease, visibility 180ms ease;
}

.h2o-ai-agent__chat::before {
    content: '';
    position: absolute;
    z-index: -1;
    inset: 0;
    background: #fff;
    pointer-events: none;
    filter: drop-shadow(0 22px 28px rgba(15, 23, 42, .2));
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 560' preserveAspectRatio='none'%3E%3Cpath fill='black' d='M105 12C158-8 220 13 265 28C315 8 370 40 391 92C409 137 389 184 397 225C410 273 385 307 399 352C408 407 374 449 351 480C319 527 268 548 215 541C165 561 106 542 73 512C39 503 20 481 28 425C9 390 16 355 37 330C22 320 9 309 0 292C28 286 50 269 61 244C43 203 30 150 46 112C51 65 74 29 105 12Z'/%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 560' preserveAspectRatio='none'%3E%3Cpath fill='black' d='M105 12C158-8 220 13 265 28C315 8 370 40 391 92C409 137 389 184 397 225C410 273 385 307 399 352C408 407 374 449 351 480C319 527 268 548 215 541C165 561 106 542 73 512C39 503 20 481 28 425C9 390 16 355 37 330C22 320 9 309 0 292C28 286 50 269 61 244C43 203 30 150 46 112C51 65 74 29 105 12Z'/%3E%3C/svg%3E");
    mask-repeat: no-repeat;
    mask-size: 100% 100%;
}

.h2o-ai-agent__chat[aria-hidden="false"] {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(-50%) translateX(0) scale(1);
}

.h2o-ai-agent__chat-header,
.h2o-ai-agent__messages,
.h2o-ai-agent__chat-status,
.h2o-ai-agent__form {
    position: relative;
    z-index: 1;
}

.h2o-ai-agent__chat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 34px 30px 13px 48px;
    border-bottom: 1px solid rgba(15, 23, 42, .08);
}

.h2o-ai-agent__chat-close {
    appearance: none;
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
    font: inherit;
    font-size: 26px;
    line-height: 1;
    padding: 2px 4px;
}

.h2o-ai-agent__messages {
    flex: 1 1 auto;
    min-height: 150px;
    max-height: 330px;
    overflow-y: auto;
    padding: 16px 30px 16px 48px;
    overscroll-behavior: contain;
}

.h2o-ai-agent__message {
    width: fit-content;
    max-width: 86%;
    margin: 0 0 10px;
    padding: 10px 12px;
    border-radius: 14px;
    font-size: 14px;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.h2o-ai-agent__message--assistant {
    background: #f1f5f9;
}

.h2o-ai-agent__message--user {
    margin-left: auto;
    background: #172033;
    color: #fff;
}

.h2o-ai-agent__chat-status {
    min-height: 18px;
    padding: 0 30px 4px 48px;
    color: #64748b;
    font-size: 12px;
}

.h2o-ai-agent__form {
    display: flex;
    gap: 8px;
    padding: 12px 30px 34px 48px;
    border-top: 1px solid rgba(15, 23, 42, .08);
}

.h2o-ai-agent__input {
    min-width: 0;
    flex: 1 1 auto;
    padding: 10px 12px;
    border: 1px solid rgba(15, 23, 42, .18);
    border-radius: 12px;
    background: #fff;
    color: inherit;
    font: inherit;
    font-size: 14px;
}

.h2o-ai-agent__input:focus {
    outline: 2px solid rgba(59, 130, 246, .35);
    outline-offset: 1px;
}

.h2o-ai-agent__send {
    appearance: none;
    border: 0;
    border-radius: 12px;
    padding: 10px 14px;
    background: #172033;
    color: #fff;
    cursor: pointer;
    font: inherit;
    font-size: 14px;
    font-weight: 700;
}

.h2o-ai-agent__send:disabled,
.h2o-ai-agent__input:disabled {
    opacity: .65;
    cursor: wait;
}

.h2o-ai-agent__sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

@media (max-width: 760px) {
    .h2o-ai-agent {
        --h2o-ai-agent-size: clamp(160px, 44vw, 220px);
    }

    .h2o-ai-agent__dismiss {
        top: 6px;
        right: 7px;
        width: 28px;
        height: 28px;
    }

    .h2o-ai-agent__bubble {
        bottom: calc(100% - 18px);
        font-size: 15px;
    }

    .h2o-ai-agent__chat {
        position: fixed;
        left: 12px;
        right: 12px;
        top: auto;
        bottom: 12px;
        width: auto;
        max-height: min(58vh, 520px);
        border-radius: 0;
        transform: translateY(10px) scale(.98);
        transform-origin: center bottom;
    }

    .h2o-ai-agent__chat::before {
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 560' preserveAspectRatio='none'%3E%3Cpath fill='black' d='M82 12C142-5 216 8 270 24C325 7 375 39 391 94C407 145 387 193 396 242C408 299 392 352 399 401C402 439 384 472 356 493C350 512 362 537 394 552C361 548 337 535 319 514C271 546 211 557 154 541C96 545 49 520 31 481C9 442 20 399 11 360C1 317 13 277 39 250C27 211 29 163 44 123C52 71 75 31 82 12Z'/%3E%3C/svg%3E");
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 560' preserveAspectRatio='none'%3E%3Cpath fill='black' d='M82 12C142-5 216 8 270 24C325 7 375 39 391 94C407 145 387 193 396 242C408 299 392 352 399 401C402 439 384 472 356 493C350 512 362 537 394 552C361 548 337 535 319 514C271 546 211 557 154 541C96 545 49 520 31 481C9 442 20 399 11 360C1 317 13 277 39 250C27 211 29 163 44 123C52 71 75 31 82 12Z'/%3E%3C/svg%3E");
    }

    .h2o-ai-agent__chat[aria-hidden="false"] {
        transform: translateY(0) scale(1);
    }

    .h2o-ai-agent__chat-header {
        padding: 30px 28px 12px 40px;
    }

    .h2o-ai-agent__messages {
        padding: 14px 28px 14px 40px;
    }

    .h2o-ai-agent__chat-status {
        padding-left: 40px;
        padding-right: 28px;
    }

    .h2o-ai-agent__form {
        padding: 11px 28px 34px 40px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .h2o-ai-agent,
    .h2o-ai-agent *,
    .h2o-ai-agent *::before,
    .h2o-ai-agent *::after {
        animation-duration: 1ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 1ms !important;
        scroll-behavior: auto !important;
    }
}