/* Copyright (C) Josef A. Puckl | eComStyle.de - All rights reserved - Alle Rechte vorbehalten */
/* Farben, Rundungen und Schrift werden per CSS-Variablen aus den Moduleinstellungen gesetzt (siehe ecs-chatbot.js). */
.ecsbot {
    --ecsbot-accent: #04b431; --ecsbot-on-accent: #ffffff; --ecsbot-bg: #f4f6f9; --ecsbot-surface: #ffffff; --ecsbot-text: #1f2937;
    --ecsbot-radius: 4px; --ecsbot-btn-radius: 4px; --ecsbot-border: rgba(127, 127, 127, .35);
    position: fixed; bottom: 20px; z-index: 99990; font-family: inherit; font-size: 14px; line-height: 1.45; color: var(--ecsbot-text);
}
.ecsbot.ecsbot-font-system { font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
.ecsbot[data-ecsbot-theme="dark"] { color-scheme: dark; }
.ecsbot[data-ecsbot-theme="light"] { color-scheme: light; }
.ecsbot, .ecsbot * { box-sizing: border-box; }
.ecsbot-right { right: 20px; }
.ecsbot-left { left: 20px; }
.ecsbot [hidden] { display: none !important; }
.ecsbot button, .ecsbot textarea, .ecsbot input { font-family: inherit; }
.ecsbot-launcher { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; border: 0; border-radius: var(--ecsbot-btn-radius); background: var(--ecsbot-accent); color: var(--ecsbot-on-accent); cursor: pointer; box-shadow: 0 3px 12px rgba(0, 0, 0, .3); padding: 0; }
.ecsbot-launcher:hover { filter: brightness(1.1); }
.ecsbot-launcher:focus-visible, .ecsbot button:focus-visible, .ecsbot textarea:focus-visible, .ecsbot-link-button:focus-visible { outline: 2px solid var(--ecsbot-accent); outline-offset: 2px; }
.ecsbot-launcher-area { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; max-width: calc(100vw - 40px); }
.ecsbot-launcher.ecsbot-launcher-robot { flex: none; width: 72px; height: 78px; background: transparent; color: var(--ecsbot-text); box-shadow: none; }
.ecsbot-launcher-robot:hover { filter: none; }
.ecsbot-launcher-bubble { position: relative; display: block; width: 240px; max-width: 100%; padding: 12px 44px 12px 14px; border: 1px solid var(--ecsbot-border); border-radius: var(--ecsbot-radius); background: var(--ecsbot-surface); color: var(--ecsbot-text); white-space: pre-wrap; overflow-wrap: anywhere; box-shadow: 0 3px 12px rgba(0, 0, 0, .15); }
.ecsbot-launcher-bubble-close { position: absolute; top: 4px; right: 4px; }
.ecsbot-launcher-bubble-close:hover { opacity: .7; }
.ecsbot-launcher-bubble-text { display: block; max-height: calc(100vh - 160px); overflow-y: auto; overscroll-behavior: contain; }
.ecsbot-launcher-bubble::after { content: ''; position: absolute; right: 28px; bottom: -6px; width: 10px; height: 10px; background: var(--ecsbot-surface); border-right: 1px solid var(--ecsbot-border); border-bottom: 1px solid var(--ecsbot-border); transform: rotate(45deg); }
.ecsbot-robot { display: block; flex: none; width: 72px; height: 78px; filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .2)); }
.ecsbot-robot svg { display: block; width: 100%; height: 100%; }
.ecsbot-robot-shell { fill: var(--ecsbot-accent); stroke: rgba(0, 0, 0, .2); stroke-width: 1.5; }
.ecsbot-left .ecsbot-launcher-area { align-items: flex-start; }
.ecsbot-left .ecsbot-launcher-bubble::after { right: auto; left: 28px; }
.ecsbot-right .ecsbot-launcher { margin-left: auto; }
.ecsbot-is-open .ecsbot-launcher-area { display: none; }
.ecsbot-is-open .ecsbot-launcher { display: none; }
.ecsbot-panel { display: flex; flex-direction: column; width: var(--ecsbot-width, 480px); max-width: calc(100vw - 40px); height: var(--ecsbot-height, 720px); max-height: calc(100vh - 40px); background: var(--ecsbot-bg); color: var(--ecsbot-text); border: 1px solid var(--ecsbot-border); border-radius: var(--ecsbot-radius); overflow: hidden; box-shadow: 0 8px 28px rgba(0, 0, 0, .35); }
.ecsbot-header { display: flex; align-items: center; gap: 6px; padding: 11px 14px; background: var(--ecsbot-accent); color: var(--ecsbot-on-accent); }
.ecsbot-title { flex: 1; font-weight: 600; font-size: 15px; }
.ecsbot-hbtn { display: inline-flex; align-items: center; justify-content: center; flex: none; background: transparent; color: inherit; border: 0; width: 32px; height: 32px; border-radius: var(--ecsbot-btn-radius); cursor: pointer; line-height: 1; padding: 0; }
.ecsbot-notice { padding: 6px 12px; background: var(--ecsbot-surface); color: var(--ecsbot-text); opacity: .85; font-size: 12px; border-bottom: 1px solid var(--ecsbot-border); }
.ecsbot-messages { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 6px; overscroll-behavior: contain; }
.ecsbot-msg { max-width: 84%; padding: 7px 10px 4px; border-radius: var(--ecsbot-radius); word-wrap: break-word; overflow-wrap: anywhere; }
.ecsbot-text { white-space: pre-wrap; }
.ecsbot-text a { color: inherit; text-decoration: underline; }
.ecsbot-text a.ecsbot-link-button { display: inline; margin: 0; padding: 0 3px; border: 1px solid var(--ecsbot-border); border-radius: var(--ecsbot-radius); background: transparent; color: var(--ecsbot-accent) !important; font-size: inherit; line-height: inherit; text-decoration: none; white-space: normal; vertical-align: baseline; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.ecsbot-text a.ecsbot-link-button:hover { border-color: var(--ecsbot-accent); text-decoration: none; }
.ecsbot-link-button svg { display: inline-block; width: 12px; height: 12px; margin-right: 3px; vertical-align: -1px; }
.ecsbot-link-button .ecsbot-link-label { display: inline; overflow-wrap: anywhere; color: inherit !important; }
.ecsbot-time { font-size: 10px; opacity: .65; text-align: right; margin-top: 2px; }
.ecsbot-bot { align-self: flex-start; background: var(--ecsbot-surface); color: var(--ecsbot-text); border: 1px solid var(--ecsbot-border); }
.ecsbot-visitor { align-self: flex-end; background: var(--ecsbot-accent); color: var(--ecsbot-on-accent); }
.ecsbot-system { align-self: center; background: transparent; color: var(--ecsbot-text); opacity: .75; font-size: 12px; text-align: center; max-width: 92%; padding: 2px 6px 6px; font-style: italic; }
.ecsbot-typing { display: flex; align-items: center; gap: 8px; padding: 2px 12px 8px; font-size: 12px; }
.ecsbot-typing-label { opacity: .75; }
.ecsbot-dots { display: inline-flex; align-items: center; gap: 4px; padding: 8px 10px; background: var(--ecsbot-surface); border: 1px solid var(--ecsbot-border); border-radius: var(--ecsbot-radius); }
.ecsbot-dots i { display: block; width: 6px; height: 6px; border-radius: 50%; background: var(--ecsbot-text); opacity: .45; }
.ecsbot-status { padding: 6px 12px; background: var(--ecsbot-surface); border-top: 1px solid var(--ecsbot-border); font-size: 12px; }
.ecsbot-newchat { margin: 8px 12px; padding: 9px; border: 0; border-radius: var(--ecsbot-btn-radius); background: var(--ecsbot-accent); color: var(--ecsbot-on-accent); cursor: pointer; font-size: 14px; }
.ecsbot-form { display: flex; align-items: flex-end; gap: 8px; padding: 8px; background: var(--ecsbot-surface); border-top: 1px solid var(--ecsbot-border); }
.ecsbot-input { flex: 1; resize: none; border: 1px solid var(--ecsbot-border); border-radius: var(--ecsbot-radius); padding: 8px 10px; font-size: 14px; max-height: 110px; background: var(--ecsbot-bg); color: var(--ecsbot-text); line-height: 1.35; }
.ecsbot-input::placeholder { color: var(--ecsbot-text); opacity: .55; }
.ecsbot-input:disabled { opacity: .55; cursor: not-allowed; }
.ecsbot-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }
.ecsbot-send { flex: none; display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border: 0; border-radius: var(--ecsbot-btn-radius); background: var(--ecsbot-accent); color: var(--ecsbot-on-accent); cursor: pointer; padding: 0; }
.ecsbot-send:disabled { opacity: .45; cursor: not-allowed; }
.ecsbot-footer { padding: 5px 10px 7px; background: var(--ecsbot-surface); font-size: 11px; opacity: .8; text-align: center; border-top: 1px solid var(--ecsbot-border); }
.ecsbot-footer a { color: inherit; text-decoration: underline; }
@media (max-width: 480px) {
    .ecsbot { bottom: 12px; }
    .ecsbot-right { right: 12px; }
    .ecsbot-left { left: 12px; }
    .ecsbot-is-open { top: 0; bottom: 0; left: 0; right: 0; }
    .ecsbot-is-open .ecsbot-panel { width: 100vw; max-width: 100vw; height: 100%; max-height: 100%; border-radius: 0; border: 0; }
    .ecsbot-input { font-size: 16px; }
    /* Tastatur offen: kurze Verläufe unten anordnen, damit die letzte Nachricht über dem Eingabefeld steht */
    .ecsbot-kb .ecsbot-messages > :first-child { margin-top: auto; }
}
@media (prefers-reduced-motion: no-preference) {
    .ecsbot-panel { animation: ecsbot-in .16s ease-out; }
    .ecsbot-dots i { animation: ecsbot-dot 1.2s infinite ease-in-out; }
    .ecsbot-dots i:nth-child(2) { animation-delay: .18s; }
    .ecsbot-dots i:nth-child(3) { animation-delay: .36s; }
}
@keyframes ecsbot-dot { 0%, 60%, 100% { transform: translateY(0); opacity: .35; } 30% { transform: translateY(-4px); opacity: 1; } }
@keyframes ecsbot-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }