.hp-chatbot {
    --chat-blue: var(--municipality-primary, #006be6);
    --chat-on-primary: var(--municipality-on-primary, #fff);
    --chat-link: var(--municipality-link, #06467e);
    --chat-muted: color-mix(in srgb, var(--chat-link) 70%, #526579);
    --chat-ink: color-mix(in srgb, var(--municipality-secondary, #063571) 55%, #182433);
    --chat-soft: color-mix(in srgb, var(--chat-blue) 10%, #fff);
    --chat-surface: color-mix(in srgb, var(--chat-blue) 3%, #fff);
    --chat-border: color-mix(in srgb, var(--chat-blue) 25%, #fff);
    --chat-shadow: color-mix(in srgb, var(--chat-blue) 20%, transparent);
    --chat-landscape-back: color-mix(in srgb, var(--chat-blue) 15%, #fff);
    --chat-landscape-middle: color-mix(in srgb, var(--chat-blue) 35%, #fff);
    --chat-landscape-buildings: color-mix(in srgb, var(--chat-blue) 65%, #fff);
    font: 400 1rem/1.5 var(--municipality-font, sans-serif);
    color: var(--chat-ink);
}
.hp-chatbot *, .hp-chatbot *::before, .hp-chatbot *::after { box-sizing: border-box; }
.hp-chatbot [hidden], .hp-chatbot-dialog:not([open]), .hp-chatbot-symbols { display: none !important; }
.hp-chatbot button, .hp-chatbot textarea { font: inherit; }
.hp-chatbot button { cursor: pointer; }
.hp-chatbot button:disabled { cursor: wait; opacity: .6; }
.hp-chatbot svg:not(.hp-chatbot-robot, .hp-chatbot-landscape-art) { width: 1.5rem; height: 1.5rem; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hp-chatbot svg:not(.hp-chatbot-robot, .hp-chatbot-landscape-art) { color: var(--chat-link); }
.hp-chatbot :is(.hp-chatbot-primary, .hp-chatbot-send) svg { color: var(--chat-on-primary); }
.hp-chatbot-robot { width: 3.5rem; height: 3.5rem; flex-shrink: 0; }
.hp-chatbot :is(button, a, textarea, summary, [data-hp-chat-scroll]):focus-visible { outline: 3px solid var(--chat-link); outline-offset: 3px; }
.hp-chatbot [data-hp-chat-scroll]:focus-visible { outline-offset: -3px; }
.hp-chatbot-launcher { position: fixed; right: max(1.5rem, env(safe-area-inset-right)); bottom: max(1.5rem, env(safe-area-inset-bottom)); z-index: 1034; display: grid; place-items: center; width: 5rem; height: 5rem; border: 3px solid #fff; border-radius: 50%; background: linear-gradient(145deg,color-mix(in srgb, var(--chat-blue) 80%, #fff),var(--chat-blue)); box-shadow: 0 0 0 2px var(--chat-blue), 0 8px 28px var(--chat-shadow); }
.hp-chatbot-launcher .hp-chatbot-robot { width: 3.8rem; height: 3.8rem; }
.hp-chatbot-intro { position: fixed; right: max(1.5rem, env(safe-area-inset-right)); bottom: calc(max(1.5rem, env(safe-area-inset-bottom)) + 6.25rem); z-index: 1034; width: min(22rem, calc(100vw - 3rem)); padding: 1.25rem; border: 2px solid var(--chat-blue); border-radius: 1.5rem; background: var(--chat-surface); box-shadow: 0 6px 28px var(--chat-shadow); }
.hp-chatbot-intro::after { content: ''; position: absolute; right: 1.8rem; bottom: -.65rem; width: 1.1rem; height: 1.1rem; background: var(--chat-surface); border-right: 2px solid var(--chat-blue); border-bottom: 2px solid var(--chat-blue); transform: rotate(45deg); }
.hp-chatbot-intro-heading { display: flex; gap: .8rem; align-items: center; padding-right: 1rem; margin-bottom: 1rem; }
.hp-chatbot-intro-heading strong { font-size: 1.1rem; }
.hp-chatbot-intro-heading p { margin: .2rem 0 0; }
.hp-chatbot-primary { display: flex; align-items: center; justify-content: center; gap: .6rem; width: 100%; min-height: 3rem; padding: .5rem 1rem; border: 0; border-radius: .85rem; background: var(--chat-blue); color: var(--chat-on-primary); font-weight: 700 !important; }
.hp-chatbot-icon-button { display: grid; place-items: center; flex-shrink: 0; width: 2.75rem; height: 2.75rem; padding: .4rem; border: 2px solid var(--chat-border); border-radius: .75rem; background: var(--chat-surface); color: var(--chat-link); }
.hp-chatbot-intro-close { position: absolute; right: .35rem; top: .3rem; border: none; background: transparent; }
.hp-chatbot-dialog { position: fixed; inset: auto 1.5rem 1.5rem auto; margin: 0; width: min(30rem, calc(100vw - 3rem)); height: min(56rem, calc(100dvh - 3rem)); max-width: none; max-height: none; padding: 0; border: 2px solid var(--chat-blue); border-radius: 1.5rem; overflow: hidden; background: linear-gradient(120deg,var(--chat-surface),var(--chat-soft)); color: var(--chat-ink); box-shadow: 0 0 0 4px var(--chat-shadow), 0 14px 60px var(--chat-shadow); }
.hp-chatbot-dialog[open] { display: grid; grid-template-rows: auto minmax(0,1fr) auto auto; }
.hp-chatbot-dialog > * { min-width: 0; }
.hp-chatbot-dialog::backdrop { background: color-mix(in srgb, var(--chat-ink) 17%, transparent); }
.hp-chatbot-header { display: flex; align-items: center; gap: .6rem; padding: 1rem; border-bottom: 1px solid var(--chat-border); }
.hp-chatbot-title { flex: 1; min-width: 0; }
.hp-chatbot-title h2 { margin: 0; font-size: 1.2rem; line-height: 1.3; font-weight: 800; overflow-wrap: anywhere; color: var(--chat-ink); }
.hp-chatbot-title p { margin: .15rem 0 0; font-size: max(14px, .875rem); line-height: 1.4; overflow-wrap: anywhere; }
.hp-chatbot-conversation { min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; padding: 1rem; scrollbar-gutter: stable; }
.hp-chatbot-messages { display: flex; flex-direction: column; gap: 1rem; padding: 0; margin: 0; list-style: none; }
.hp-chatbot-message { display: flex; gap: .55rem; align-items: flex-start; }
.hp-chatbot-message > .hp-chatbot-robot { width: 2.4rem; height: 2.4rem; }
.hp-chatbot-message-content { min-width: 0; max-width: calc(100% - 2.95rem); }
.hp-chatbot-message--user { justify-content: flex-end; }
.hp-chatbot-message--user .hp-chatbot-message-content { max-width: 85%; }
.hp-chatbot-bubble { padding: .85rem 1rem; border-radius: 1rem; background: var(--chat-soft); overflow-wrap: anywhere; }
.hp-chatbot-bubble p { margin: 0 0 .65rem; white-space: pre-wrap; }
.hp-chatbot-bubble p:last-child { margin-bottom: 0; }
.hp-chatbot-message--user .hp-chatbot-bubble { background: var(--chat-blue); color: var(--chat-on-primary); }
.hp-chatbot-time { display: block; margin: .2rem .2rem 0; font-size: max(14px, .875rem); color: var(--chat-muted); }
.hp-chatbot-message--user .hp-chatbot-time { text-align: right; }
.hp-chatbot-source-link { font-weight: 650; margin-left: .35rem; white-space: nowrap; }
.hp-chatbot a { color: var(--chat-link); text-decoration: underline; text-underline-offset: .15em; }
.hp-chatbot-sources { margin-top: .7rem; font-size: max(14px, .875rem); }
.hp-chatbot-sources ol { padding-left: 1.25rem; margin: .2rem 0 0; }
.hp-chatbot-sources li + li { margin-top: .25rem; }
.hp-chatbot-evidence { margin-top: .6rem; font-size: max(14px, .875rem); }
.hp-chatbot-evidence summary { cursor: pointer; min-height: 2.75rem; display: flex; align-items: center; }
.hp-chatbot-evidence blockquote { margin: .25rem 0 .5rem; border-left: 2px solid var(--chat-blue); padding-left: .6rem; }
.hp-chatbot-actions { display: grid; gap: .55rem; margin-top: .7rem; }
.hp-chatbot-action { display: flex; align-items: center; gap: .65rem; min-height: 3.25rem; padding: .65rem; border-radius: .9rem; background: var(--chat-surface); text-decoration: none !important; }
.hp-chatbot-action-icon { display: grid; place-items: center; flex-shrink: 0; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--chat-soft); color: var(--chat-link); }
.hp-chatbot-action-copy { flex: 1; min-width: 0; font-size: .9rem; line-height: 1.4; }
.hp-chatbot-action-copy strong { display: block; }
.hp-chatbot-action-copy small { color: var(--chat-muted); }
.hp-chatbot-feedback { display: flex; align-items: center; flex-wrap: wrap; gap: .45rem; margin-top: .65rem; padding: .65rem; border-radius: .8rem; background: var(--chat-soft); font-size: max(14px, .875rem); }
.hp-chatbot-feedback-label { flex: 1 1 100%; }
.hp-chatbot-feedback button { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-height: 2.75rem; border: 1px solid var(--chat-border); border-radius: .6rem; background: var(--chat-surface); color: var(--chat-link); padding: .4rem .65rem; font-weight: 700; }
.hp-chatbot-compose { min-height: 0; padding: .25rem 1rem .5rem; border-top: 1px solid var(--chat-border); max-height: min(60dvh, 28rem); overflow-y: auto; overscroll-behavior: contain; }
.hp-chatbot-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .25rem; }
.hp-chatbot-text-button { display: inline-flex; align-items: center; gap: .35rem; border: none; background: transparent; min-height: 2.75rem; padding: .25rem .1rem; color: var(--chat-link); font-size: max(14px, .875rem) !important; }
.hp-chatbot-text-button svg { width: 1.1rem !important; height: 1.1rem !important; }
.hp-chatbot-progress { color: var(--chat-muted); font-size: max(14px, .875rem); }
.hp-chatbot-starters { display: flex; flex-wrap: wrap; gap: .4rem; padding: .2rem .2rem .75rem; }
.hp-chatbot-starter { min-width: 0; max-width: min(20rem, 100%); min-height: 2.75rem; padding: .4rem .65rem; border: 2px solid var(--chat-border); border-radius: 2rem; background: var(--chat-surface); color: var(--chat-ink); font-size: max(14px, .875rem) !important; font-weight: 650 !important; white-space: normal; text-align: left; overflow-wrap: anywhere; }
.hp-chatbot-form { display: flex; align-items: flex-end; gap: .5rem; }
.hp-chatbot-form textarea { width: 100%; min-width: 0; min-height: 3.25rem; max-height: 6rem; resize: none; padding: .8rem; border: 2px solid var(--chat-border); border-radius: .7rem; background: var(--chat-surface); color: var(--chat-ink); }
.hp-chatbot-form textarea::placeholder { color: var(--chat-muted); opacity: 1; }
/* Scroll only where needed; retain keyboard, wheel and touch navigation. */
.hp-chatbot :is(.hp-chatbot-conversation, .hp-chatbot-compose, textarea) {
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--chat-blue) 38%, var(--chat-surface)) transparent;
}
.hp-chatbot :is(.hp-chatbot-conversation, .hp-chatbot-compose, textarea)::-webkit-scrollbar { width: 7px; height: 7px; }
.hp-chatbot :is(.hp-chatbot-conversation, .hp-chatbot-compose, textarea)::-webkit-scrollbar-track { background: transparent; }
.hp-chatbot :is(.hp-chatbot-conversation, .hp-chatbot-compose, textarea)::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
.hp-chatbot :is(.hp-chatbot-conversation, .hp-chatbot-compose, textarea)::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--chat-blue) 38%, var(--chat-surface)); border: 2px solid transparent; background-clip: padding-box; border-radius: 999px; }
.hp-chatbot :is(.hp-chatbot-conversation, .hp-chatbot-compose, textarea)::-webkit-scrollbar-thumb:hover { background-color: var(--chat-link); }
@media (forced-colors: active) {
    .hp-chatbot :is(.hp-chatbot-conversation, .hp-chatbot-compose, textarea) { scrollbar-color: auto; }
}
.hp-chatbot-send { display: grid; place-items: center; flex-shrink: 0; width: 3.25rem; height: 3.25rem; padding: .5rem; border: 0; border-radius: .7rem; background: var(--chat-blue); color: var(--chat-on-primary); }
.hp-chatbot-status { margin: .3rem 0 0; min-height: 0; font-size: max(14px, .875rem); color: var(--chat-muted); }
.hp-chatbot-status:empty { display: none; }
.hp-chatbot-privacy { margin-top: .3rem; font-size: max(14px, .875rem); color: var(--chat-muted); }
.hp-chatbot-privacy summary { display: flex; align-items: center; gap: .35rem; cursor: pointer; min-height: 2.75rem; }
.hp-chatbot-privacy svg { width: 1rem !important; height: 1rem !important; }
.hp-chatbot-privacy p { margin: .25rem 0 .5rem; }
.hp-chatbot-landscape { position: relative; width: 100%; height: 5.5rem; margin: 0; padding: 0; overflow: hidden; pointer-events: none; }
.hp-chatbot-landscape-art, .hp-chatbot-landscape img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; margin: 0; padding: 0; object-fit: cover; display: block; }
.hp-chatbot-landscape span { position: absolute; top: 0; right: 1.4rem; color: var(--chat-link); font: italic 1.3rem var(--municipality-font, sans-serif); transform: rotate(-7deg); z-index: 1; }
.hp-chatbot-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.hp-chatbot-noscript { margin: 1rem; }
.hp-embedded .hp-chatbot { display: none; }
.hp-chatbot--focus-obscured :is(.hp-chatbot-launcher,.hp-chatbot-intro) { visibility: hidden; }
.hp-chatbot-open { overflow: hidden; }
.hp-chatbot--keyboard .hp-chatbot-dialog { bottom: calc(var(--chat-viewport-bottom, 0px) + .5rem); height: calc(var(--chat-viewport-height, 100dvh) - 1rem); }
.hp-chatbot--keyboard .hp-chatbot-landscape { display: none; }
.hp-chatbot--keyboard .hp-chatbot-compose { max-height: calc(var(--chat-viewport-height, 100dvh) * .65); }
.hp-site.hp-aid-contrast .hp-chatbot :is(.hp-chatbot-dialog,.hp-chatbot-header,.hp-chatbot-bubble,.hp-chatbot-action,.hp-chatbot-feedback,.hp-chatbot-compose,.hp-chatbot-intro,button,textarea) { background: #fff !important; color: #000 !important; border-color: #000 !important; }
.hp-site.hp-aid-contrast .hp-chatbot svg:not(.hp-chatbot-robot, .hp-chatbot-landscape-art) { color: #000 !important; }
@media (max-width: 540px) {
    .hp-chatbot-launcher { width: 4.25rem; height: 4.25rem; right: max(1rem,env(safe-area-inset-right)); bottom: max(1rem,env(safe-area-inset-bottom)); }
    .hp-chatbot-intro { right: 1rem; bottom: calc(max(1rem,env(safe-area-inset-bottom)) + 5.25rem); width: min(22rem,calc(100vw - 2rem)); }
    .hp-chatbot-dialog { inset: auto .5rem max(.5rem,env(safe-area-inset-bottom)) auto; width: calc(100vw - 1rem); height: calc(100dvh - 1rem - env(safe-area-inset-bottom)); border-radius: 1.15rem; }
    .hp-chatbot-header { padding: .75rem; gap: .35rem; }
    .hp-chatbot-header .hp-chatbot-robot { width: 2.65rem; height: 2.65rem; }
    .hp-chatbot-title h2 { font-size: 1.05rem; }
    .hp-chatbot-title p { font-size: max(14px, .875rem); }
    .hp-chatbot-conversation { padding: .8rem .65rem; }
    .hp-chatbot-message > .hp-chatbot-robot { width: 2rem; height: 2rem; }
    .hp-chatbot-message-content { max-width: calc(100% - 2.55rem); }
    .hp-chatbot-compose { padding-inline: .7rem; }
    .hp-chatbot-landscape { height: 4rem; }
}
@media (max-height: 600px) {
    .hp-chatbot-landscape { display: none; }
    .hp-chatbot-privacy:not([open]) summary { min-height: 1.8rem; }
    .hp-chatbot-header { padding-block: .5rem; }
}
