#kp-retail-chat {
    --kpch-ink: #162a42;
    --kpch-muted: #506478;
    --kpch-brand: #305b99;
    --kpch-brand-dark: #234779;
    --kpch-surface: #fff;
    --kpch-base: #f4f7fb;
    --kpch-border: #d8e2ef;
    --kpch-user: #e0ebfa;
    --kpch-keyboard-offset: 0px;
    --kpch-view-height: 100vh;
    position: fixed;
    z-index: 10000;
    right: max(1.25rem, env(safe-area-inset-right));
    bottom: calc(max(1.25rem, env(safe-area-inset-bottom)) + var(--kpch-keyboard-offset));
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: .65rem;
    max-width: calc(100% - 2.5rem);
    color: var(--kpch-ink);
    font-family: inherit;
    font-size: .9375rem;
    line-height: 1.5;
    text-align: left;
    color-scheme: light;
}

@supports (height: 100dvh) {
    #kp-retail-chat { --kpch-view-height: 100dvh; }
}

#kp-retail-chat *,
#kp-retail-chat *::before,
#kp-retail-chat *::after { box-sizing: border-box; }

#kp-retail-chat [hidden] { display: none !important; }

#kp-retail-chat .kpch-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

#kp-retail-chat button {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    margin: 0;
    min-width: 0;
    max-width: 100%;
    border: 0;
    font: inherit;
    font-weight: 600;
    letter-spacing: normal;
    text-transform: none;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}

#kp-retail-chat button:focus-visible,
#kp-retail-chat input:focus-visible,
#kp-retail-chat a:focus-visible {
    outline: 2px solid #b95720;
    outline-offset: 2px;
}

#kp-retail-chat [data-kpch-open] {
    min-height: 3rem;
    padding: .75rem 1.1rem;
    border-radius: 99rem;
    background: var(--kpch-brand);
    color: #fff;
    box-shadow: 0 4px 14px #142d2a35;
    white-space: nowrap;
}

#kp-retail-chat [data-kpch-open]:hover,
#kp-retail-chat [data-kpch-form] button[type="submit"]:hover {
    background: var(--kpch-brand-dark);
    color: #fff;
}

#kp-retail-chat [data-kpch-open] svg { width: 1.2rem; height: 1.2rem; }

#kp-retail-chat [data-kpch-panel] {
    order: -1;
    display: flex;
    flex-direction: column;
    width: 24rem;
    max-width: 100%;
    height: min(35rem, calc(var(--kpch-view-height) - 6.25rem));
    min-height: 0;
    overflow: hidden;
    background: var(--kpch-surface);
    border: 1px solid var(--kpch-border);
    border-radius: 1.15rem;
    box-shadow: 0 9px 34px #142d2a28;
}

#kp-retail-chat [data-kpch-header] {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: space-between;
    gap: .7rem;
    padding: .7rem .85rem .7rem 1rem;
    background: var(--kpch-brand-dark);
    color: #fff;
}

#kp-retail-chat [data-kpch-header] :is(h2, h3, strong) {
    display: block;
    margin: 0;
    color: #fff;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: normal;
    line-height: 1.25;
}

#kp-retail-chat [data-kpch-context] {
    display: block;
    margin: .16rem 0 0;
    color: inherit;
    font-size: .8rem;
    font-weight: 400;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

#kp-retail-chat [data-kpch-close] {
    flex: 0 0 2.75rem;
    width: 2.75rem;
    min-height: 2.75rem;
    padding: 0;
    border-radius: .55rem;
    background: #ffffff1b;
    color: #fff;
    font-size: 1.35rem;
    line-height: 1;
}

#kp-retail-chat [data-kpch-close]:hover { background: #ffffff31; }
#kp-retail-chat [data-kpch-close]:focus-visible { outline-color: #ffd8b7; }

#kp-retail-chat [data-kpch-log] {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
    flex-direction: column;
    gap: .6rem;
    padding: .9rem;
    overflow: auto;
    overscroll-behavior: contain;
    background: var(--kpch-base);
    scrollbar-width: thin;
}

#kp-retail-chat .kpch-message,
#kp-retail-chat [data-kpch-intro] {
    flex: 0 0 auto;
    align-self: flex-start;
    max-width: 93%;
    margin: 0;
    padding: .55rem .72rem;
    border: 1px solid var(--kpch-border);
    border-radius: .85rem .85rem .85rem .25rem;
    background: var(--kpch-surface);
    color: var(--kpch-ink);
    overflow-wrap: anywhere;
}

#kp-retail-chat .kpch-message p,
#kp-retail-chat [data-kpch-intro] p { margin: 0; white-space: pre-line; }

#kp-retail-chat .kpch-message--user {
    align-self: flex-end;
    border-color: transparent;
    border-radius: .85rem .85rem .25rem .85rem;
    background: var(--kpch-user);
}

#kp-retail-chat .kpch-message-links,
#kp-retail-chat [data-kpch-handoff] {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem .8rem;
}

#kp-retail-chat .kpch-message-links { margin-top: .38rem; }

#kp-retail-chat a {
    color: var(--kpch-brand-dark);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: .17em;
}

#kp-retail-chat [data-kpch-handoff] {
    align-items: center;
    padding: .35rem .85rem;
    border-top: 1px solid var(--kpch-border);
    font-size: .8rem;
    line-height: 1.5;
}

#kp-retail-chat [data-kpch-starters] {
    display: flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    gap: .35rem;
    padding: .55rem .85rem 0;
}

#kp-retail-chat [data-kpch-question] {
    min-height: 2.15rem;
    padding: .25rem .58rem;
    border: 1px solid #b9cbe1;
    border-radius: .5rem;
    background: var(--kpch-surface);
    color: var(--kpch-brand-dark);
    font-size: .8rem;
    line-height: 1.25;
    text-align: left;
}

#kp-retail-chat [data-kpch-question]:hover { background: var(--kpch-user); }

#kp-retail-chat [data-kpch-form] {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: .45rem;
    margin: 0;
    padding: .65rem .85rem;
}

#kp-retail-chat [data-kpch-form] [name="question"] {
    flex: 1 1 0;
    min-width: 0;
    width: 100%;
    min-height: 2.75rem;
    margin: 0;
    padding: .55rem .65rem;
    border: 1px solid #a6bdb1;
    border-radius: .55rem;
    background: #fff;
    color: var(--kpch-ink);
    font: inherit;
    font-size: 16px;
    line-height: 1.25;
}

#kp-retail-chat [data-kpch-form] [name="question"]::placeholder { color: var(--kpch-muted); }

#kp-retail-chat [data-kpch-form] button[type="submit"] {
    flex: 0 0 auto;
    min-height: 2.75rem;
    padding: .55rem .72rem;
    border-radius: .55rem;
    background: var(--kpch-brand);
    color: #fff;
}

@media (max-width: 35rem), (max-height: 34rem) {
    #kp-retail-chat {
        right: max(.65rem, env(safe-area-inset-right));
        bottom: calc(max(.65rem, env(safe-area-inset-bottom)) + var(--kpch-keyboard-offset));
        max-width: calc(100% - max(.65rem, env(safe-area-inset-right)) - max(.65rem, env(safe-area-inset-left)));
    }

    #kp-retail-chat[data-kpch-expanded="true"] [data-kpch-open] { display: none; }

    #kp-retail-chat [data-kpch-panel] {
        height: min(35rem, calc(var(--kpch-view-height) - 2rem));
    }
}

@media (max-width: 35rem) {
    #kp-retail-chat [data-kpch-question] { min-height: 2.5rem; }
}

@media (prefers-reduced-motion: reduce) {
    #kp-retail-chat button { transition: none; }
}