/* ChatbotHandzOn — base layout.
 * Colours come from the 13 CSS variables below; a theme file in assets/themes/<name>.css
 * overrides exactly these variables on .cbc-scope and nothing else. The .cbc-scope wrapper
 * carries the variables for BOTH the inline widget and the floating launcher/panel, and keeps
 * them out of the host WordPress theme.
 * On top of that, the Design settings in wp-admin emit a wp_add_inline_style block that may
 * set the style variables used below via var(--…, fallback) — every fallback equals today's
 * value, so with no overrides all four presets render unchanged. */

.cbc-scope {
    --accent-color: #c4d600;
    --accent-hover: #a8b800;
    --accent-rgb: 196, 214, 0;
    --on-accent: #000000;
    --bg-color: #0a0a0a;
    --chat-bg: #000000;
    --sidebar-bg: #1a1a1a;
    --message-user-bg: #2a2a2a;
    --message-assistant-bg: #1a1a1a;
    --qr-text: #000000;
    --quick-reply-bg: #c4d600;
    --border-color: #333333;
    --text-color: #ffffff;
    --text-light: #b0b0b0;
}

/* ---- the chat box itself (used inline AND inside the floating panel) ---- */
.cbc-widget {
    display: flex;
    flex-direction: column;
    background: var(--chat-bg);
    color: var(--text-color);
    font-family: var(--font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif), "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji";
    font-size: var(--font-size, 18px);
    overflow: hidden;
}

.cbc-messages {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    /* Firefox scrollbar (webkit rules below): thumb colour, track = chat background. */
    scrollbar-color: var(--sb-thumb, color-mix(in srgb, var(--text-light) 50%, transparent)) var(--chat-bg);
}
/* Scrollbar (Design → Scrollbalken): width, colour and transparency configurable;
   the track always matches the widget background. */
.cbc-messages::-webkit-scrollbar { width: var(--sb-width, 8px); }
.cbc-messages::-webkit-scrollbar-track { background: var(--chat-bg); }
.cbc-messages::-webkit-scrollbar-thumb {
    background: var(--sb-thumb, color-mix(in srgb, var(--text-light) 50%, transparent));
    border-radius: 8px;
}

.cbc-message { display: flex; gap: 8px; }
.cbc-message.cbc-user { justify-content: flex-end; }

/* The avatar inside the input box, left of the placeholder text
   (Design → Avatar-Bild; optional — rendered only when an image is uploaded). */
.cbc-avatar {
    width: var(--input-avatar-size, 55px);
    height: var(--input-avatar-size, 55px);
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    align-self: flex-end;
    margin-bottom: 3px;
}

/* Per-message avatar (assistant only), top-left next to the bubble. */
.cbc-msg-avatar {
    width: var(--msg-avatar-size, 80px);
    height: var(--msg-avatar-size, 80px);
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    align-self: flex-start;
}

/* Label + bubble stack; the sender name ("Tony" / "Du") sits above the bubble. */
.cbc-msg-col { display: flex; flex-direction: column; max-width: 80%; }
.cbc-user .cbc-msg-col { align-items: flex-end; }
.cbc-msg-label {
    font-size: var(--label-size, 14px);
    font-style: var(--label-style, italic);
    color: var(--label-color, var(--accent-color));
    margin: 0 4px 2px;
}
/* The visitor label ("Du"): plain text colour by default; only the bot name is accented. */
.cbc-user .cbc-msg-label { color: var(--user-label-color, var(--text-color)); }

/* Bubbles carry no visible Rahmen — the border matches their own background. */
.cbc-bubble {
    padding: 10px 14px;
    border-radius: var(--radius, 24px);
    line-height: 1.45;
    white-space: pre-wrap;
    word-wrap: break-word;
    background: var(--message-assistant-bg);
    border: none;
}
/* Assistant bubbles render formatted HTML (markdown → <br> etc.), so raw-newline
   preservation is not needed there. User bubbles stay plain text + pre-wrap. */
.cbc-assistant .cbc-bubble { white-space: normal; }
/* Divider the chat API streams before a farewell message ("\n\n---\n\n" on the wire). */
.cbc-farewell-separator { border-top: 1px solid var(--border-color); margin: 12px 0; }
.cbc-bubble a { color: var(--accent-color); text-decoration: underline; }
.cbc-user .cbc-bubble { background: var(--message-user-bg); }

/* Waiting animations (Design → Nachrichten → Warte-Animation), shown in the assistant
   bubble until the first character arrives. Pure CSS, respects reduced-motion. */
.cbc-typing { display: inline-flex; align-items: center; gap: 5px; min-height: 1em; }
.cbc-typing-dots span {
    width: calc(var(--typing-size, 18px) * 0.44);
    height: calc(var(--typing-size, 18px) * 0.44);
    border-radius: 50%;
    background: var(--text-light);
    animation: cbc-bounce 1.2s ease-in-out infinite;
}
.cbc-typing-dots span:nth-child(2) { animation-delay: 0.15s; }
.cbc-typing-dots span:nth-child(3) { animation-delay: 0.3s; }
@keyframes cbc-bounce {
    0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
    30% { transform: translateY(-5px); opacity: 1; }
}
.cbc-typing-spinner {
    width: var(--typing-size, 18px);
    height: var(--typing-size, 18px);
    border-radius: 50%;
    border: 2px solid var(--text-light);
    border-top-color: var(--accent-color);
    animation: cbc-spin 0.8s linear infinite;
}
@keyframes cbc-spin { to { transform: rotate(360deg); } }
.cbc-typing-pulse {
    width: calc(var(--typing-size, 18px) * 0.66);
    height: calc(var(--typing-size, 18px) * 0.66);
    border-radius: 50%;
    background: var(--accent-color);
    animation: cbc-pulse 1s ease-in-out infinite;
}
@keyframes cbc-pulse {
    0%, 100% { transform: scale(0.7); opacity: 0.5; }
    50% { transform: scale(1.1); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .cbc-typing *, .cbc-typing { animation: none !important; }
}

/* Quick replies sit BELOW the input box. */
.cbc-quick-replies { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 16px 12px; }
.cbc-quick-replies:empty { padding: 0; }

.cbc-scope button.cbc-qr.cbc-qr {
    padding: 10px 16px;
    margin: 0;
    line-height: 1.3;
    box-shadow: none;
    border-radius: var(--qr-radius, 20px);
    border: var(--qr-border-width, 1px) solid var(--qr-border-color, var(--accent-color));
    /* Hosted-widget look: subtle theme background, accent border, normal text colour. */
    background: var(--qr-bg, var(--quick-reply-bg)) !important;
    color: var(--qr-text-color, var(--qr-text, var(--text-color))) !important;
    cursor: pointer;
    font-size: var(--qr-text-size, 18px);
}
.cbc-scope button.cbc-qr.cbc-qr:hover {
    background: var(--qr-bg, var(--quick-reply-bg)) !important;
    color: var(--qr-text-color, var(--qr-text, var(--text-color))) !important;
    filter: brightness(1.12);
}

/* The "Eingabefeld": ONE box holding avatar + textarea + send button AND the
   Nutzungsbedingungen line. It sits on the chat background and is outlined in the accent
   colour — always, not only on focus. */
.cbc-input-box {
    margin: 12px 16px;
    padding: 6px 8px;
    border-radius: var(--radius, 32px);
    border: var(--input-border-width, 3px) solid var(--input-border-color, var(--accent-color));
    background: var(--chat-bg);
}

/* "powered by handz.on" — branded plugin variant only (the image ships only in
   chatbothandzon_branded.zip; without the file no markup is rendered at all).
   Sits top-right, directly above the Eingabefeld. */
.cbc-branding {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 7px;
    margin: 0 34px 0;
    font-size: 12px;
    color: var(--text-light);
}
.cbc-branding img { height: 22px; width: auto; display: block; margin-top: -6px; }
/* Pull the Eingabefeld up under the badge (its default top margin is 12px). */
.cbc-branding + .cbc-input-box { margin-top: 2px; }
/* Inline-Widget-v2: the badge gets the same centered breakout as the prompt bar below it,
   so it hugs the bar's top-right corner. */
.cbc-prompt > .cbc-branding {
    width: min(var(--prompt-width, 896px), 94vw);
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    margin: 0 0 2px;
    padding-right: 12px;
}
.cbc-input-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Extra specificity (.cbc-scope + element) on purpose: WordPress themes style bare
   `textarea` (background, border, colour, dotted focus outline) with selectors like
   `.site textarea` that would beat a lone class — these rules must win on ANY theme. */
.cbc-scope textarea.cbc-input,
.cbc-scope textarea.cbc-prompt-input {
    flex: 1;
    min-width: 0;
    resize: none;
    height: 38px;
    padding: 8px 4px;
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: var(--text-color);
    font: inherit;
    /* Single line that extends to the right while typing — never a scroll box.
       (wrap="off" in the markup; the browser keeps the caret in view.) */
    white-space: nowrap;
    overflow: hidden;
}
.cbc-scope textarea.cbc-input:focus,
.cbc-scope textarea.cbc-prompt-input:focus {
    outline: none;
    box-shadow: none;
    border: none;
    background: transparent;
    color: var(--text-color);
}
/* Placeholder ("Ich bin dein KI-Chatbot…"): italic, in the normal text colour. */
.cbc-scope textarea.cbc-input::placeholder,
.cbc-scope textarea.cbc-prompt-input::placeholder {
    color: var(--text-color);
    opacity: 0.85;
    font-style: italic;
    font-size: var(--placeholder-size, 18px);
}

/* Send button — extra specificity (.cbc-scope button.…) on purpose, like the textarea
   rules above: theme button styles (grey background, own text colour, padding) must never
   bleed in, in ANY of the three widgets. Background follows the Eingabefeld-Rahmenfarbe;
   the arrow/text is black by default (Design → Senden-Button: Pfeil-/Textfarbe). */
.cbc-scope button.cbc-send.cbc-send,
.cbc-scope button.cbc-prompt-send.cbc-prompt-send {
    padding: 9px 18px;
    margin: 0;
    border: none;
    border-radius: var(--send-radius, 999px);
    background: var(--send-bg, var(--input-border-color, var(--accent-color))) !important;
    color: var(--send-fg, var(--on-accent)) !important;
    font-weight: 600;
    font-size: var(--font-size, 18px);
    line-height: 1;
    min-height: var(--send-size, 40px);
    text-transform: none;
    box-shadow: none;
    cursor: pointer;
    flex-shrink: 0;
}
.cbc-scope button.cbc-send.cbc-send:hover,
.cbc-scope button.cbc-prompt-send.cbc-prompt-send:hover {
    background: var(--send-bg, var(--input-border-color, var(--accent-color))) !important;
    color: var(--send-fg, var(--on-accent)) !important;
    filter: brightness(0.88);
}

/* Icon variant (default, Design → Senden-Button: Stil): a circle with an arrow-up.
   Fixed size in every widget — identical in v1, v2 and the floating panel. */
.cbc-scope button.cbc-send--icon.cbc-send--icon {
    padding: 0;
    width: var(--send-size, 40px);
    height: var(--send-size, 40px);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.cbc-scope button.cbc-send--icon.cbc-send--icon svg { width: calc(var(--send-size, 40px) * 0.57); height: calc(var(--send-size, 40px) * 0.57); display: block; }

/* The Nutzungsbedingungen line — INSIDE the Eingabefeld box, below the input row. */
.cbc-legal {
    padding: var(--legal-gap, 4px) 8px 4px;
    font-size: var(--font-size-small, 10px);
    color: var(--text-light);
    text-align: center;
}
/* Link colour defaults to the normal text colour (white on handz.on), configurable. */
.cbc-legal a { color: var(--legal-link-color, var(--text-color)); text-decoration: underline; }

/* ---- INLINE mode: a box in the page content ---- */
/* The "Widget-Rahmen": size and frame configurable (Design → II). The breakout (left 50% +
   translateX) lets the configured Breite EXCEED the theme's content column — without it,
   every WordPress theme would silently cap the widget at its text-column width. It still
   never exceeds the viewport (94vw) and stays centered. */
.cbc-inline .cbc-widget {
    width: min(var(--widget-width, 900px), 94vw);
    max-width: none;
    height: var(--widget-height, 889px);
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    border: var(--widget-border-width, 5px) solid var(--widget-border-color, var(--accent-color));
    border-radius: 24px;
}

/* ---- FLOATING mode: launcher bubble + panel, bottom-right ---- */
.cbc-scope button.cbc-launcher.cbc-launcher {
    position: fixed;
    width: var(--launcher-size, 80px);
    height: var(--launcher-size, 80px);
    border: none;
    border-radius: 50%;
    background: var(--float-color, var(--chat-bg)) !important;
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
    z-index: 2147483000;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 0;
}
/* Avatar image inside the launcher (Design → Symbol). Size = percent of the circle:
   100% fills it, smaller values show the circle colour as a ring. */
.cbc-launcher img.cbc-launcher-open {
    width: var(--float-avatar-size, 100%);
    height: var(--float-avatar-size, 100%);
    border-radius: 50%;
    object-fit: cover;
}
/* Speech-bubble icon (no avatar): SVG with currentColor, so "Farbe der Sprechblase"
   (Design → Schwebendes Symbol; default: Akzentfarbe) actually applies — an emoji would
   ignore CSS colours. Size = percent of the circle. */
.cbc-launcher svg.cbc-launcher-open {
    width: var(--float-bubble-size, 45%);
    height: var(--float-bubble-size, 45%);
    color: var(--float-bubble-color, var(--accent-color));
}
/* While the chat window is open the launcher circle vanishes and the window takes its
   place (rules below) — closing happens via the window's own ×. */
.cbc-launcher.cbc-is-open { display: none; }

.cbc-float {
    position: fixed;
    width: min(var(--float-width, 520px), calc(100vw - 44px));
    height: min(var(--float-height, 620px), calc(100vh - 130px));
    display: flex;
    flex-direction: column;
    background: var(--chat-bg);
    border: var(--widget-border-width, 5px) solid var(--widget-border-color, var(--accent-color));
    border-radius: 24px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
    overflow: hidden;
    z-index: 2147483000;
}
.cbc-float[hidden] { display: none; }

.cbc-float .cbc-widget { flex: 1; min-height: 0; }

/* Bubble position (launcher + its panel) — chosen in wp-admin. The panel offset follows
   the configurable launcher size (launcher edge + 34px gap = the old 94px at 60px). */
.cbc-pos-br .cbc-launcher { right: 22px; bottom: 22px; }
.cbc-pos-br .cbc-float    { right: 22px; bottom: calc(var(--launcher-size, 80px) + 34px); }
.cbc-pos-bl .cbc-launcher { left: 22px;  bottom: 22px; }
.cbc-pos-bl .cbc-float    { left: 22px;  bottom: calc(var(--launcher-size, 80px) + 34px); }
.cbc-pos-bc .cbc-launcher { left: 50%; bottom: 22px; transform: translateX(-50%); }
.cbc-pos-bc .cbc-float    { left: 50%; bottom: calc(var(--launcher-size, 80px) + 34px); transform: translateX(-50%); }
.cbc-pos-tr .cbc-launcher { right: 22px; top: 22px; }
.cbc-pos-tr .cbc-float    { right: 22px; top: calc(var(--launcher-size, 80px) + 34px); }
.cbc-pos-tl .cbc-launcher { left: 22px;  top: 22px; }
.cbc-pos-tl .cbc-float    { left: 22px;  top: calc(var(--launcher-size, 80px) + 34px); }

/* Open state: the hidden launcher's spot (22px edge offset) is taken by the window —
   no gap where the circle was, and the circle can never peek out beside the window. */
.cbc-pos-br .cbc-launcher.cbc-is-open ~ .cbc-float,
.cbc-pos-bl .cbc-launcher.cbc-is-open ~ .cbc-float,
.cbc-pos-bc .cbc-launcher.cbc-is-open ~ .cbc-float { bottom: 22px; }
.cbc-pos-tr .cbc-launcher.cbc-is-open ~ .cbc-float,
.cbc-pos-tl .cbc-launcher.cbc-is-open ~ .cbc-float { top: 22px; }

/* Fullscreen panel on small screens — the norm for chat bubbles on mobile. */
@media (max-width: 480px) {
    .cbc-float {
        right: 0; bottom: 0; left: 0; top: 0;
        width: auto; height: auto;
        border: none; border-radius: 0;
    }
}

/* ---- PROMPT mode: a compact input bar that opens a chat OVERLAY on first message ---- */
/* Same "Eingabefeld" box as .cbc-input-box: avatar + textarea + send (+ legal line) in one
   accent-outlined box. */
.cbc-prompt-bar {
    /* Same breakout as the v1 widget: the configured Breite may exceed the theme's text
       column. Height: automatic (grows with content) unless a Mindest-Höhe is set. */
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: var(--prompt-height, 100px);
    width: min(var(--prompt-width, 896px), 94vw);
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    padding: 6px 8px;
    font-family: var(--font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif), "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji";
    font-size: var(--font-size, 18px);
    background: var(--chat-bg);
    border: var(--input-border-width, 3px) solid var(--input-border-color, var(--accent-color));
    border-radius: var(--radius, 32px);
}
.cbc-prompt-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
/* (.cbc-prompt-input itself is styled by the theme-override-proof rules near .cbc-input.) */
.cbc-prompt-send {
    padding: 9px 18px;
    border: none;
    border-radius: var(--send-radius, 999px);
    background: var(--send-bg, var(--input-border-color, var(--accent-color)));
    color: var(--on-accent);
    font-weight: 600;
    cursor: pointer;
    flex-shrink: 0;
}

/* The overlay: a centered chat card. The backdrop passes clicks/scroll through (pointer-events:
   none) so the page stays usable behind it — only the card and its × are interactive. */
.cbc-overlay {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2147483000;
    pointer-events: none;
}
/* Popup-Hintergrund (wp-admin): darken the page behind the card; the backdrop then catches
   clicks (a click beside the card closes the chat — wired in chat.js). */
.cbc-has-backdrop .cbc-overlay {
    background: rgba(0, 0, 0, 0.55);
    pointer-events: auto;
}
.cbc-overlay[hidden] { display: none; }
.cbc-overlay-card {
    position: relative;
    width: min(var(--overlay-width, 995px), 92vw);
    height: min(var(--overlay-height, 892px), 88vh);
    display: flex;
    flex-direction: column;
    background: var(--chat-bg);
    border: var(--widget-border-width, 5px) solid var(--widget-border-color, var(--accent-color));
    border-radius: 24px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
    overflow: hidden;
    pointer-events: auto;
}
.cbc-overlay-card .cbc-widget { flex: 1; min-height: 0; }
/* v2 special case: the overlay starts with the VISITOR's message (no Begrüßung), whose
   right-aligned "Du" label would sit behind the absolute Schließen-Button — clear it. */
.cbc-overlay-card .cbc-messages { padding-top: calc(var(--close-size, 30px) + 16px); }
/* Schließen-Button (×): top-right in the v2 overlay AND the floating window.
   Round, accent background, black × — size configurable (Design → Schließen-Button). */
.cbc-scope button.cbc-overlay-x.cbc-overlay-x,
.cbc-scope button.cbc-float-x.cbc-float-x {
    position: absolute;
    top: 10px;
    right: 12px;
    z-index: 1;
    width: var(--close-size, 30px);
    height: var(--close-size, 30px);
    padding: 0;
    border: none;
    border-radius: 50%;
    background: var(--accent-color) !important;
    color: var(--on-accent) !important;
    font-size: calc(var(--close-size, 30px) * 0.6);
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: none;
    cursor: pointer;
}
.cbc-scope button.cbc-overlay-x.cbc-overlay-x:hover,
.cbc-scope button.cbc-float-x.cbc-float-x:hover { background: var(--accent-color) !important; color: var(--on-accent) !important; filter: brightness(0.88); }