/* Vehi Chatbot — Widget-Styles (theme-neutral, eigene Klassen-Präfixe vc-) */
#vehi-chatbot-root { position: fixed; right: 20px; bottom: 20px; z-index: 99990; }

.vc-launcher {
    width: 100px; height: 100px; border-radius: 50%; border: 3px solid #fff; cursor: pointer;
    background-color: #7a5b3a;
    background-image: url(../img/avatar.png);
    background-size: cover; background-position: center; background-repeat: no-repeat;
    font-size: 0; color: transparent; line-height: 0;
    box-shadow: 0 4px 14px rgba(0,0,0,.28); transition: transform .15s ease; position: relative;
}
.vc-launcher:hover { transform: scale(1.07); }
/* Dezentes „Funkeln": goldener Glanz-Puls alle ~4,5 s (per Pseudo-Element, stört den Hover-Transform nicht). */
.vc-launcher::after {
    content: ''; position: absolute; inset: -3px; border-radius: 50%; pointer-events: none;
    animation: vc-launcher-funkel 4.5s ease-in-out infinite;
}
@keyframes vc-launcher-funkel {
    0%, 84%, 100% { box-shadow: 0 0 0 0 rgba(232,197,120,0); }
    89%           { box-shadow: 0 0 18px 5px rgba(232,197,120,.85); }
    95%           { box-shadow: 0 0 7px 1px rgba(232,197,120,.35); }
}

/* Kleines X am Button zum temporären Ausblenden des Beraters (oben rechts). */
.vc-dismiss {
    position: absolute; top: -2px; right: -2px; z-index: 99992;
    width: 24px; height: 24px; border-radius: 50%; border: 2px solid #fff;
    background: #7a5b3a; color: #fff; font-size: 15px; line-height: 1; cursor: pointer;
    display: flex; align-items: center; justify-content: center; padding: 0;
    box-shadow: 0 2px 6px rgba(0,0,0,.35);
}
.vc-dismiss:hover { background: #5a4226; }

.vc-panel {
    position: fixed; right: 20px; bottom: 128px; width: 360px; height: 645px;
    background: url(../img/chat-bg.jpg) center / 100% 100% no-repeat;
    box-shadow: 0 12px 40px rgba(0,0,0,.35); display: none; overflow: hidden;
    transform-origin: bottom right;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.vc-panel.vc-open { display: block; }

/* WebP für unterstützende Browser (Klasse vc-webp von chatbot.js), sonst PNG/JPG-Fallback */
.vc-webp .vc-launcher { background-image: url(../img/avatar.webp); }
.vc-webp .vc-avatar   { background-image: url(../img/avatar.webp); }
.vc-webp .vc-panel    { background-image: url(../img/chat-bg.webp); }

/* Kopf über dem Leder-Banner (5–17 % Höhe) */
.vc-header {
    position: absolute; top: 4%; left: 0; right: 0; height: 12.5%; background: none; z-index: 4;
}
/* left = Avatar-Position (kleiner = weiter links). Regler zum Ausmitteln zwischen den Riemen. */
.vc-header-id {
    position: absolute; left: 9%; top: 50%; transform: translateY(-50%);
    display: flex; align-items: center; gap: 12px; transition: transform .14s ease;
}
/* Wenn die Tastatur den Kopf verdeckt: Avatar rutscht herunter, dunkles Pill für Lesbarkeit. */
.vc-header-id.vc-floating {
    background: rgba(58,42,24,.88); border-radius: 34px; padding: 4px 16px 4px 5px;
    box-shadow: 0 4px 14px rgba(0,0,0,.45);
}
.vc-avatar {
    width: 78px; height: 78px; flex: 0 0 78px; border-radius: 50%;
    background-image: url(../img/avatar.png); background-size: cover; background-position: center;
    border: 2px solid rgba(245,236,220,.85); box-shadow: 0 1px 3px rgba(0,0,0,.4);
}
.vc-header-text { display: flex; flex-direction: column; line-height: 1.12; color: #f6ecd8; text-shadow: 0 1px 2px rgba(0,0,0,.55); }
.vc-title { font-weight: 700; font-size: 15px; }
.vc-subtitle { font-size: 11px; opacity: .9; }
/* right = Position des Schließen-X (größer = weiter links, weg vom Knotenmuster). */
.vc-close {
    position: absolute; right: 14%; top: 50%; transform: translateY(-50%);
    background: none; border: none; color: #f6ecd8; font-size: 23px; line-height: 1;
    cursor: pointer; padding: 2px 6px; text-shadow: 0 1px 4px rgba(0,0,0,.85);
}

/* Nachrichten auf dem Pergament (18–78 % Höhe, 10–90 % Breite) */
.vc-messages {
    position: absolute; top: 18%; bottom: 22%; left: 10%; right: 10%;
    overflow-y: auto; background: none; padding: 6px 2px;
}

.vc-feedback { display: flex; align-items: center; gap: 6px; margin: -2px 0 12px 2px; }
.vc-fb {
    background: #fff; border: 1px solid #c2b08c; border-radius: 14px; cursor: pointer;
    font-size: 15px; line-height: 1; padding: 4px 11px; opacity: 1;
    box-shadow: 0 1px 2px rgba(0,0,0,.08); transition: background .15s, border-color .15s, transform .1s;
}
.vc-fb:hover { background: #f3ece0; border-color: #7a5b3a; transform: translateY(-1px); }
.vc-fb:disabled { cursor: default; transform: none; }
.vc-fb-active { background: #e9dcc1; border-color: #7a5b3a; }
.vc-fb-done { font-size: 12px; color: #6f8a5a; }

.vc-cats { margin: 0 0 12px; }
.vc-cats-title { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: #4a3520 !important; font-weight: 700; margin-bottom: 6px; }
.vc-cat {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 8px 12px; margin-bottom: 6px; border: 1px solid #d8cfba; border-radius: 10px;
    background: #fff; text-decoration: none; color: #5a4226; font-size: 14px; transition: background .15s;
}
.vc-cat:hover { background: #efe7d2; }
.vc-cat-name { font-weight: 600; }
.vc-cat-arrow { color: #b08a55; font-size: 18px; line-height: 1; }

.vc-bubble {
    max-width: 85%; padding: 9px 12px; border-radius: 12px; margin-bottom: 10px;
    font-size: 14px; line-height: 1.45; white-space: pre-wrap; word-wrap: break-word;
}
.vc-user { background: #7a5b3a; color: #fff; margin-left: auto; border-bottom-right-radius: 4px; }
.vc-assistant { background: rgba(255,253,247,.94); color: #2a2a2a; border: 1px solid #d9cdb5; border-bottom-left-radius: 4px; }

.vc-typing span {
    display: inline-block; width: 6px; height: 6px; margin: 0 2px; border-radius: 50%;
    background: #b3a692; animation: vc-blink 1.2s infinite both;
}
.vc-typing span:nth-child(2) { animation-delay: .2s; }
.vc-typing span:nth-child(3) { animation-delay: .4s; }
@keyframes vc-blink { 0%, 80%, 100% { opacity: .3; } 40% { opacity: 1; } }

.vc-cards { display: flex; flex-direction: column; gap: 10px; margin-bottom: 10px; }
.vc-card {
    display: flex; gap: 10px; background: #fff; border: 1px solid #e6e0d6; border-radius: 10px;
    padding: 8px; align-items: center;
}
.vc-card-img { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; flex: 0 0 auto; background: #efeae1; }
.vc-card-body { flex: 1 1 auto; min-width: 0; }
.vc-card-title { font-size: 13px; font-weight: 600; color: #2a2a2a; margin-bottom: 2px; }
.vc-badge {
    display: inline-block; font-size: 10px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .03em; color: #7a5b3a; background: #efe6d6; border-radius: 4px; padding: 1px 6px; margin-bottom: 3px;
}
.vc-card-price { font-size: 13px; color: #444; margin-bottom: 4px; }
.vc-card-link {
    display: inline-block; font-size: 12px; font-weight: 600; color: #fff !important; background: #7a5b3a;
    border-radius: 6px; padding: 4px 10px; text-decoration: none;
}
.vc-card-link:hover { background: #654a2e; color: #fff !important; }

/* Eingabezeile über der Aussparung (Feld 9–72 %, Button 73–91 % Breite, 82–88 % Höhe) */
.vc-input {
    position: absolute; top: 81%; height: 5.5%; left: 8%; right: 7%;
    display: flex; align-items: center; gap: 1.2%; background: none; padding: 0; border: none;
}
.vc-input textarea {
    flex: 1 1 auto; height: 26px; line-height: 26px; resize: none; background: none; border: none;
    padding: 0 12px; font-size: 14px; font-family: inherit;
    color: #3a2a18; outline: none; overflow: hidden;
}
.vc-input textarea::placeholder { color: #5a4626; opacity: 1; }
.vc-send {
    flex: 0 0 25%; height: 100%; display: flex; align-items: center; justify-content: center;
    padding: 0 0 0 12px; border: none; background: none; color: #f6ecd8;
    font-size: 13px; font-weight: 700; cursor: pointer; text-shadow: 0 1px 2px rgba(0,0,0,.5);
}
.vc-send:hover { color: #fff; }

@media (max-width: 420px) {
    .vc-panel { right: 8px; }
    #vehi-chatbot-root { right: 12px; bottom: 12px; }
}

/* --- Barrierefreiheit: sichtbarer Tastatur-Fokus (überschreibt outline:none) --- */
.vc-launcher:focus-visible,
.vc-panel button:focus-visible,
.vc-panel a:focus-visible,
.vc-input textarea:focus-visible,
.vc-fb:focus-visible,
.vc-card-link:focus-visible,
.vc-cat:focus-visible {
    outline: 3px solid #1a6fd6;
    outline-offset: 2px;
    border-radius: 4px;
}
/* Fallback für Browser ohne :focus-visible: Textarea zeigt beim Fokus immer einen Ring */
.vc-input textarea:focus { outline: 2px solid #1a6fd6; }

/* --- Bewegung reduzieren, wenn vom Nutzer gewünscht --- */
@media (prefers-reduced-motion: reduce) {
    .vc-launcher, .vc-header, .vc-cat, .vc-card-link, .vc-card, .vc-panel, .vc-send { transition: none !important; }
    .vc-typing span, .vc-launcher::after { animation: none !important; }
}

/* --- Kundenservice-Eskalation (erscheint nur, wenn der Bot eskaliert) --- */
.vc-esc-offer { margin: 8px 0 12px; }
.vc-esc-btn { display: block; width: 100%; background: #7a5b3a; color: #fff; border: 1px solid #644a2e; border-radius: 10px; padding: 10px 14px; font-size: 13px; font-weight: 600; text-align: left; cursor: pointer; box-shadow: 0 1px 4px rgba(0,0,0,.14); }
.vc-esc-btn:hover { background: #6a4e30; }
.vc-esc { background: #fff; border: 1px solid #e2dccd; border-radius: 12px; padding: 12px; margin: 6px 0 10px; display: flex; flex-direction: column; gap: 7px; }
.vc-esc-title { font-weight: 700; color: #5a4226; }
.vc-esc-hint { font-size: 12px; color: #7a6a50; line-height: 1.35; }
.vc-esc input, .vc-esc textarea { width: 100%; padding: 7px 9px; border: 1px solid #cdbfa3; border-radius: 7px; font-family: inherit; font-size: 14px; box-sizing: border-box; }
.vc-esc-consent { display: flex; gap: 7px; align-items: flex-start; font-size: 12px; color: #5a4a2a; line-height: 1.35; cursor: pointer; }
.vc-esc-consent input { width: auto; margin-top: 2px; flex: 0 0 auto; }
.vc-esc-send { background: #2c6e2a; color: #fff; border: none; border-radius: 8px; padding: 8px 12px; font-size: 14px; font-weight: 600; cursor: pointer; }
.vc-esc-send:hover { background: #245c22; }
.vc-esc-send:disabled { opacity: .6; cursor: default; }
.vc-esc-note { font-size: 12px; color: #a33; min-height: 14px; }
.vc-esc-ok { color: #2c6e2a; font-size: 14px; }
/* Honeypot: für Menschen unsichtbar (off-screen), von Bots ausgefüllt → serverseitig verworfen */
.vc-hp { position: absolute !important; left: -9999px !important; top: auto; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }