/* eineurohilft Chatbot Widget v2.0 – Vollständig eigenständig */
#eeh-chat-root { all: initial; }
#eeh-chat-root *, #eeh-chat-root *::before, #eeh-chat-root *::after {
    box-sizing: border-box;
    font-family: 'Nunito', 'Segoe UI', system-ui, sans-serif;
}

/* ── TOGGLE ── */
#eeh-toggle {
    position: fixed !important; bottom: 28px !important; z-index: 2147483647 !important;
    width: 64px !important; height: 64px !important; border-radius: 50% !important;
    background: linear-gradient(135deg,#b01020,#e21627) !important;
    border: none !important; cursor: pointer !important;
    box-shadow: 0 4px 24px rgba(226,22,39,.55) !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    padding: 0 !important; transition: transform .2s, box-shadow .2s !important;
}
#eeh-toggle.pos-right { right: 28px !important; left: auto !important; }
#eeh-toggle.pos-left  { left: 28px !important; right: auto !important; }
#eeh-toggle:hover { transform: scale(1.09) !important; }
#eeh-toggle svg { width: 28px; height: 28px; fill: #fff; display: block; transition: transform .25s; }
#eeh-toggle.open svg { transform: rotate(45deg); }
#eeh-badge {
    position: absolute; top: 2px; right: 2px; width: 14px; height: 14px;
    border-radius: 50%; background: #22c55e; border: 2px solid #fff; display: none;
    animation: eeh-pulse 1.4s ease-in-out infinite;
}
#eeh-badge.show { display: block; }
@keyframes eeh-pulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.3)} }

/* ── WINDOW ── */
#eeh-window {
    position: fixed !important; z-index: 2147483646 !important;
    bottom: 104px !important;
    width: 380px !important; max-width: calc(100vw - 20px) !important;
    height: 600px !important; max-height: calc(100dvh - 124px) !important;
    background: #ffffff !important; border-radius: 20px !important;
    box-shadow: 0 24px 64px rgba(0,0,0,.2), 0 0 0 1px rgba(0,0,0,.07) !important;
    display: flex !important; flex-direction: column !important;
    overflow: hidden !important;
    opacity: 0 !important; pointer-events: none !important;
    transform: translateY(18px) scale(.96) !important;
    transition: opacity .22s, transform .22s !important;
}
#eeh-window.pos-right { right: 28px !important; left: auto !important; }
#eeh-window.pos-left  { left: 28px !important; right: auto !important; }
#eeh-window.open { opacity: 1 !important; pointer-events: all !important; transform: translateY(0) scale(1) !important; }

/* ── HEADER ── */
#eeh-header {
    background: #e21627 !important; padding: 12px 14px !important;
    display: flex !important; align-items: center !important; gap: 10px !important; flex-shrink: 0 !important;
}
#eeh-avatar {
    width: 46px !important; height: 46px !important; border-radius: 50% !important;
    background: rgba(255,255,255,.18) !important; border: 2px solid rgba(255,255,255,.45) !important;
    overflow: hidden !important; flex-shrink: 0 !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
}
#eeh-avatar img { width: 100% !important; height: 100% !important; object-fit: cover !important; border-radius: 50% !important; display: block !important; }
#eeh-header-info { flex: 1 !important; min-width: 0 !important; }
#eeh-bot-name { font-size: 15px !important; font-weight: 800 !important; color: #fff !important; display: block !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }
#eeh-status { font-size: 11px !important; color: rgba(255,255,255,.82) !important; font-weight: 600 !important; display: flex !important; align-items: center !important; gap: 4px !important; margin-top: 2px !important; }
#eeh-status-dot { width: 7px !important; height: 7px !important; border-radius: 50% !important; background: #22c55e !important; flex-shrink: 0 !important; display: inline-block !important; }
.eeh-hbtn {
    background: rgba(255,255,255,.18) !important; border: none !important; color: #fff !important;
    width: 30px !important; height: 30px !important; border-radius: 50% !important; cursor: pointer !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    font-size: 14px !important; flex-shrink: 0 !important; transition: background .15s !important;
}
.eeh-hbtn:hover { background: rgba(255,255,255,.32) !important; }
.eeh-hbtn svg { width: 16px; height: 16px; fill: #fff; display: block; }

/* ── MODE CHOOSER ── */
#eeh-mode-chooser {
    background: #f8f9fa !important; border-bottom: 1px solid #e0e2ea !important;
    padding: 12px 14px !important; flex-shrink: 0 !important;
}
#eeh-mode-chooser p { font-size: 13px !important; color: #555 !important; font-weight: 600 !important; margin: 0 0 10px !important; }
#eeh-mode-btns { display: flex !important; gap: 8px !important; }
.eeh-mode-btn {
    flex: 1 !important; background: #fff !important; border: 1.5px solid #e0e2ea !important;
    color: #444 !important; padding: 9px 12px !important; border-radius: 10px !important;
    cursor: pointer !important; font-size: 13px !important; font-weight: 700 !important;
    font-family: inherit !important; transition: all .15s !important;
    display: flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important;
}
.eeh-mode-btn:hover { border-color: #e21627 !important; color: #e21627 !important; }
.eeh-mode-btn.active { background: #e21627 !important; border-color: #e21627 !important; color: #fff !important; }

/* ── MESSAGES ── */
#eeh-messages {
    flex: 1 !important; overflow-y: auto !important; padding: 14px !important;
    background: #fff !important; display: flex !important; flex-direction: column !important;
    gap: 10px !important; scroll-behavior: smooth !important;
}
#eeh-messages::-webkit-scrollbar { width: 4px; }
#eeh-messages::-webkit-scrollbar-thumb { background: #e0e2ea; border-radius: 2px; }

.eeh-msg {
    max-width: 84% !important; padding: 10px 14px !important; border-radius: 18px !important;
    font-size: 14px !important; line-height: 1.6 !important; font-weight: 500 !important;
    word-break: break-word !important; animation: eeh-in .18s ease; display: block !important;
}
@keyframes eeh-in { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:none} }
.eeh-bot  { background: #f4f5f8 !important; color: #1a1a1a !important; border-bottom-left-radius: 4px !important; align-self: flex-start !important; }
.eeh-user { background: #e21627 !important; color: #fff !important; border-bottom-right-radius: 4px !important; align-self: flex-end !important; font-weight: 600 !important; }
.eeh-bot a { color: #e21627 !important; font-weight: 700 !important; }
.eeh-bot strong { color: #111 !important; font-weight: 800 !important; }
.eeh-typing { display: flex !important; gap: 5px !important; padding: 12px 16px !important; background: #f4f5f8 !important; border-radius: 18px !important; border-bottom-left-radius: 4px !important; align-self: flex-start !important; align-items: center !important; }
.eeh-dot { width: 8px !important; height: 8px !important; border-radius: 50% !important; background: #bbb !important; display: block !important; animation: eeh-bounce .9s ease-in-out infinite !important; }
.eeh-dot:nth-child(2){animation-delay:.15s!important}.eeh-dot:nth-child(3){animation-delay:.3s!important}
@keyframes eeh-bounce{0%,80%,100%{transform:translateY(0)}40%{transform:translateY(-7px)}}

/* ── QUICK REPLIES ── */
#eeh-quick {
    background: #fff !important; border-top: 1px solid #eee !important;
    padding: 10px 14px 8px !important; display: flex !important; flex-wrap: wrap !important;
    gap: 7px !important; flex-shrink: 0 !important;
}
.eeh-qbtn {
    font-size: 12px !important; font-weight: 700 !important; padding: 6px 13px !important;
    border-radius: 50px !important; background: #fff !important;
    border: 1.5px solid #e21627 !important; color: #e21627 !important;
    cursor: pointer !important; font-family: inherit !important; transition: all .15s !important; display: inline-block !important;
}
.eeh-qbtn:hover { background: #e21627 !important; color: #fff !important; }
.eeh-wa-divider { width: 100% !important; text-align: center !important; font-size: 12px !important; color: #bbb !important; font-weight: 600 !important; margin: 2px 0 !important; }
.eeh-wa-btn {
    display: inline-flex !important; align-items: center !important; gap: 6px !important;
    background: #25d366 !important; color: #fff !important; border: none !important;
    border-radius: 50px !important; padding: 7px 14px !important; font-size: 12px !important;
    font-weight: 700 !important; cursor: pointer !important; text-decoration: none !important;
    font-family: inherit !important; transition: background .15s !important;
}
.eeh-wa-btn:hover { background: #1da851 !important; }
.eeh-wa-btn svg { width: 15px !important; height: 15px !important; fill: #fff !important; display: block !important; }

/* ── TEXT INPUT ── */
#eeh-input-row {
    display: flex !important; align-items: flex-end !important; gap: 8px !important;
    padding: 10px 12px 12px !important; border-top: 1px solid #eee !important;
    background: #fff !important; flex-shrink: 0 !important;
}
#eeh-input {
    flex: 1 !important; background: #f4f5f8 !important; border: 1.5px solid #e0e2ea !important;
    border-radius: 12px !important; padding: 10px 14px !important; color: #1a1a1a !important;
    font-size: 14px !important; font-family: inherit !important; resize: none !important;
    min-height: 44px !important; max-height: 110px !important; line-height: 1.5 !important;
    outline: none !important; display: block !important; transition: border-color .15s !important;
}
#eeh-input:focus { border-color: #e21627 !important; background: #fff !important; }
#eeh-input::placeholder { color: #aaa !important; }
#eeh-send {
    width: 44px !important; height: 44px !important; border-radius: 12px !important;
    background: #e21627 !important; border: none !important; color: #fff !important;
    cursor: pointer !important; display: flex !important; align-items: center !important;
    justify-content: center !important; flex-shrink: 0 !important;
    box-shadow: 0 2px 12px rgba(226,22,39,.3) !important; transition: all .15s !important;
}
#eeh-send:hover { background: #b01020 !important; transform: scale(1.05) !important; }
#eeh-send:disabled { opacity: .4 !important; transform: none !important; cursor: default !important; }
#eeh-send svg { width: 20px !important; height: 20px !important; fill: #fff !important; display: block !important; }

/* ── VOICE INPUT ── */
#eeh-voice-row {
    display: none; flex-direction: column !important; align-items: center !important;
    gap: 10px !important; padding: 16px !important; border-top: 1px solid #eee !important;
    background: #fff !important; flex-shrink: 0 !important;
}
#eeh-voice-status { font-size: 13px !important; color: #666 !important; font-weight: 600 !important; }
#eeh-mic-btn {
    width: 64px !important; height: 64px !important; border-radius: 50% !important;
    background: #f4f5f8 !important; border: 2px solid #e0e2ea !important;
    cursor: pointer !important; display: flex !important; align-items: center !important;
    justify-content: center !important; transition: all .15s !important;
}
#eeh-mic-btn:hover { border-color: #e21627 !important; }
#eeh-mic-btn.recording { background: #fef2f2 !important; border-color: #e21627 !important; animation: eeh-pulse 1.2s ease-in-out infinite !important; }
#eeh-mic-btn svg { width: 28px !important; height: 28px !important; fill: #666 !important; display: block !important; }
#eeh-mic-btn.recording svg { fill: #e21627 !important; }
#eeh-switch-text { background: none !important; border: none !important; color: #e21627 !important; font-size: 12px !important; font-weight: 700 !important; cursor: pointer !important; font-family: inherit !important; text-decoration: underline !important; }

/* ── DISCLAIMER ── */
#eeh-disclaimer {
    font-size: 11px !important; text-align: center !important; color: #888 !important;
    background: #fef2f2 !important; padding: 6px 14px !important;
    border-top: 1px solid #fecaca !important; flex-shrink: 0 !important;
    font-weight: 500 !important; display: block !important;
}

/* ── MOBILE ── */
@media(max-width:500px) {
    #eeh-window {
        left: 20px !important;
        right: 20px !important;
        bottom: 78px !important;
        width: calc(100vw - 40px) !important;
        max-width: calc(100vw - 40px) !important;
        height: 68vh !important;
        max-height: 68vh !important;
        border-radius: 16px !important;
        overflow: hidden !important;
    }
    #eeh-toggle {
        bottom: 14px !important;
        width: 50px !important;
        height: 50px !important;
    }
    #eeh-toggle.pos-right { right: 16px !important; }
    #eeh-toggle.pos-left  { left: 16px !important; }
    #eeh-toggle svg { width: 22px !important; height: 22px !important; }

    /* Header kompakt */
    #eeh-header { padding: 8px 12px !important; }
    #eeh-avatar { width: 32px !important; height: 32px !important; }
    #eeh-bot-name { font-size: 13px !important; }
    #eeh-status { font-size: 10px !important; }
    .eeh-hbtn { width: 26px !important; height: 26px !important; font-size: 12px !important; }

    /* Mode-Chooser sehr kompakt */
    #eeh-mode-chooser { padding: 6px 12px !important; }
    #eeh-mode-chooser p { font-size: 11px !important; margin-bottom: 5px !important; }
    .eeh-mode-btn { padding: 6px 8px !important; font-size: 11px !important; }

    /* Messages: bekommt mehr Platz */
    #eeh-messages { padding: 10px !important; gap: 8px !important; }
    .eeh-msg { font-size: 13px !important; padding: 8px 11px !important; max-width: 90% !important; }
    .eeh-typing { padding: 8px 12px !important; }

    /* Quick-Replies sehr kompakt */
    #eeh-quick { padding: 6px 10px 4px !important; gap: 4px !important; }
    .eeh-qbtn { font-size: 10px !important; padding: 4px 9px !important; }
    .eeh-wa-btn { font-size: 10px !important; padding: 5px 10px !important; }
    .eeh-wa-divider { font-size: 10px !important; margin: 1px 0 !important; }

    /* Input kompakt */
    #eeh-input-row { padding: 6px 10px 7px !important; gap: 6px !important; }
    #eeh-input { font-size: 13px !important; min-height: 36px !important; padding: 7px 10px !important; }
    #eeh-send { width: 36px !important; height: 36px !important; border-radius: 9px !important; }
    #eeh-send svg { width: 16px !important; height: 16px !important; }

    /* Voice Row */
    #eeh-voice-row { padding: 10px !important; gap: 8px !important; }
    #eeh-voice-status { font-size: 12px !important; }
    #eeh-mic-btn { width: 52px !important; height: 52px !important; }

    /* Disclaimer */
    #eeh-disclaimer { font-size: 10px !important; padding: 3px 10px !important; line-height: 1.4 !important; }
}