/* Chatbot (app/Modules/Chatbot): button and chat window, in the site's Akzentfarbe (--accent). Everything under .kc-chat. */
.kc-chat {
    --kc-accent: var(--accent, #2453ff);
    --kc-bg: #fff;
    --kc-text: #1c1e22;
    --kc-muted: #6b6f78;
    --kc-soft: #f3f4f6;
    position: fixed;
    bottom: 20px;
    z-index: 9990;
    font-size: 15px;
    line-height: 1.5;
    color: var(--kc-text);
}
.kc-chat *, .kc-chat *::before, .kc-chat *::after { box-sizing: border-box; }
.kc-chat.kc-right { right: 20px; }
.kc-chat.kc-left { left: 20px; }

.kc-launcher {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-left: auto;
    padding: 13px 20px 13px 16px;
    border: 0;
    border-radius: 999px;
    background: var(--kc-accent);
    color: #fff;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 10px 28px rgba(0,0,0,.22), 0 2px 6px rgba(0,0,0,.12);
    transition: transform .2s ease, box-shadow .2s ease;
}
.kc-left .kc-launcher { margin-left: 0; }
.kc-launcher:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(0,0,0,.26); }
.kc-launcher:focus-visible, .kc-chat button:focus-visible, .kc-chat textarea:focus-visible { outline: 3px solid color-mix(in srgb, var(--kc-accent) 45%, transparent); outline-offset: 2px; }
.kc-chat.is-open .kc-launcher span { display: none; }
.kc-chat.is-open .kc-launcher { padding: 13px; }

.kc-panel {
    display: flex;
    flex-direction: column;
    width: 370px;
    height: min(560px, calc(100vh - 110px));
    margin-bottom: 14px;
    background: var(--kc-bg);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(0,0,0,.25), 0 0 0 1px rgba(0,0,0,.05);
    animation: kc-in .22s ease-out;
}
.kc-panel[hidden] { display: none; }
@keyframes kc-in { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }

.kc-head { display: flex; align-items: center; gap: 11px; padding: 14px 14px 14px 16px; background: var(--kc-accent); color: #fff; }
.kc-avatar { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,.2); flex: none; }
.kc-head-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.kc-head-text strong { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kc-head-text small { font-size: 12px; opacity: .85; }
.kc-close { display: grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 50%; background: transparent; color: #fff; cursor: pointer; }
.kc-close:hover { background: rgba(255,255,255,.18); }

.kc-messages { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; background: #fafafb; }
.kc-msg { max-width: 85%; padding: 10px 13px; border-radius: 16px; word-wrap: break-word; }
.kc-msg p { margin: 0 0 6px; }
.kc-msg p:last-child, .kc-msg ul:last-child { margin-bottom: 0; }
.kc-msg ul { margin: 0 0 6px; padding-left: 18px; }
.kc-msg a { color: inherit; text-decoration: underline; }
.kc-bot { align-self: flex-start; background: #fff; border: 1px solid #ebecef; border-bottom-left-radius: 5px; }
.kc-bot a { color: var(--kc-accent); }
.kc-user { align-self: flex-end; background: var(--kc-accent); color: #fff; border-bottom-right-radius: 5px; }
.kc-info { background: var(--kc-soft); border-color: transparent; color: var(--kc-muted); font-size: 14px; }
.kc-typing { display: flex; gap: 4px; padding: 13px 14px; }
.kc-typing span { width: 7px; height: 7px; border-radius: 50%; background: #b5b8c0; animation: kc-dot 1.2s infinite ease-in-out; }
.kc-typing span:nth-child(2) { animation-delay: .15s; }
.kc-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes kc-dot { 0%, 80%, 100% { transform: translateY(0); opacity: .5; } 40% { transform: translateY(-4px); opacity: 1; } }

.kc-form { display: flex; align-items: flex-end; gap: 8px; padding: 10px 12px; border-top: 1px solid #ebecef; background: #fff; }
.kc-form textarea { flex: 1; resize: none; min-height: 42px; max-height: 120px; padding: 10px 12px; border: 1px solid #dfe1e6; border-radius: 12px; font: inherit; color: inherit; background: #fff; }
.kc-form textarea:focus { border-color: var(--kc-accent); outline: none; }
.kc-send { display: grid; place-items: center; width: 42px; height: 42px; flex: none; border: 0; border-radius: 12px; background: var(--kc-accent); color: #fff; cursor: pointer; }
.kc-send:disabled, .kc-form textarea:disabled { opacity: .5; cursor: not-allowed; }
.kc-note { margin: 0; padding: 0 14px 10px; background: #fff; font-size: 11.5px; color: var(--kc-muted); }
.kc-note a { color: inherit; }

@media (max-width: 520px) {
    .kc-chat { bottom: 14px; }
    .kc-chat.kc-right { right: 14px; }
    .kc-chat.kc-left { left: 14px; }
    .kc-chat.is-open { left: 8px; right: 8px; bottom: 8px; }
    .kc-chat.is-open .kc-launcher { display: none; }
    .kc-panel { width: 100%; height: calc(100dvh - 16px); margin: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .kc-panel, .kc-typing span { animation: none; }
    .kc-launcher { transition: none; }
}
@media print { .kc-chat { display: none; } }

/* the consent question before the first message */
.kc-consent { max-width: 92%; border-color: color-mix(in srgb, var(--kc-accent) 35%, #ebecef); }
.kc-consent-buttons { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.kc-consent-buttons button { padding: 8px 14px; border-radius: 999px; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.kc-yes { border: 0; background: var(--kc-accent); color: #fff; }
.kc-no { border: 1px solid #dfe1e6; background: #fff; color: var(--kc-text); }
.kc-link, .kc-revoke { padding: 0; border: 0; background: none; font: inherit; color: inherit; text-decoration: underline; cursor: pointer; }
.kc-link { color: var(--kc-accent); }