/* =============================================================
   Intentfunnel – Frontend CSS
   Version: 3.0.0

   !important auf alle properties die Themes typischerweise
   überschreiben: color, font-size, width, height, border-radius,
   padding, background, border, display, line-height.
   ============================================================= */

:root {
    --if-accent:                    #2563eb;
    --if-accent-hover:              #ffac0b;
    --if-accent-light:              #eff6ff;
    --if-text:                      #1e293b;
    --if-text-muted:                #64748b;
    --if-bg:                        #ffffff;
    --if-shadow:                    0 8px 32px rgba(0,0,0,.12), 0 2px 8px rgba(0,0,0,.08);
    --if-z:                         2147483647;
    --if-font:                      inherit;

    --if-width:                     360px;
    --if-height:                    480px;
    --if-mobile-height:             72vh;
    --if-radius:                    12px;
    --if-widget-border-width:       1px;
    --if-widget-border-color:       #e2e8f0;

    --if-header-bg:                 #2563eb;
    --if-header-text:               #ffffff;

    --if-bubble-system-bg:          #f1f5f9;
    --if-bubble-system-text:        #1e293b;
    --if-bubble-user-bg:            #2563eb;
    --if-bubble-user-text:          #ffffff;
    --if-radius-bubble:             16px;
    --if-font-bubble:               13.5px;

    --if-option-bg:                 #ffffff;
    --if-option-text:               #2563eb;
    --if-option-border-color:       #2563eb;
    --if-option-border-width:       1.5px;
    --if-option-radius:             8px;
    --if-option-font:               13.5px;
    --if-option-font-weight:        500;
    --if-option-hover-bg:           #eff6ff;
    --if-option-hover-text:         #ffac0b;
    --if-option-hover-border:       #ffac0b;

    --if-link-primary-bg:           #2563eb;
    --if-link-primary-text:         #ffffff;
    --if-link-primary-border:       #2563eb;
    --if-link-primary-border-w:     1.5px;
    --if-link-primary-radius:       8px;
    --if-link-primary-font:         13.5px;
    --if-link-primary-weight:       600;
    --if-link-primary-hover-bg:     #ffac0b;
    --if-link-primary-hover-text:   #ffffff;
    --if-link-primary-hover-border: #ffac0b;

    --if-link-sec-bg:               transparent;
    --if-link-sec-text:             #2563eb;
    --if-link-sec-border:           #2563eb;
    --if-link-sec-border-w:         1.5px;
    --if-link-sec-radius:           8px;
    --if-link-sec-font:             13.5px;
    --if-link-sec-weight:           600;
    --if-link-sec-hover-bg:         #eff6ff;
    --if-link-sec-hover-text:       #ffac0b;
    --if-link-sec-hover-border:     #ffac0b;

    --if-input-bg:                  #ffffff;
    --if-input-text:                #1e293b;
    --if-input-border-color:        #e2e8f0;
    --if-input-border-width:        1.5px;
    --if-input-radius:              8px;
    --if-input-font:                13px;
    --if-input-focus-border:        #2563eb;
    --if-send-bg:                   #2563eb;
    --if-send-hover-bg:             #ffac0b;
    --if-send-color:                #ffffff;

    --if-trigger-bg:                #2563eb;
    --if-trigger-text:              #ffffff;
    --if-trigger-radius:            50px;
    --if-trigger-font:              14px;
    --if-trigger-font-weight:       600;
    --if-trigger-hover-bg:          #ffac0b;
    --if-trigger-hover-text:        #ffffff;

    --if-circle-size:               56px;
    --if-circle-bg:                 #2563eb;
    --if-circle-color:              #ffffff;
    --if-circle-hover-bg:           #ffac0b;
    --if-circle-pulse:              rgba(255,172,11,0.35);
}

/* =============================================================
   MOUNT-PUNKT
   ============================================================= */

#intentfunnel-mount {
    position:       fixed !important;
    bottom:         0    !important;
    right:          0    !important;
    z-index:        var(--if-z) !important;
    pointer-events: none !important;
    width:          auto !important;
    height:         auto !important;
    margin:         0    !important;
    padding:        0    !important;
    background:     none !important;
    border:         none !important;
}
#intentfunnel-mount > * { pointer-events: all !important; }

/* =============================================================
   TRIGGER – BUTTON
   ============================================================= */

.intentfunnel-trigger-button {
    position:       fixed !important;
    bottom:         24px !important;
    right:          24px !important;
    z-index:        var(--if-z) !important;
    display:        flex !important;
    align-items:    center !important;
    gap:            8px !important;
    padding:        12px 20px !important;
    background:     var(--if-trigger-bg) !important;
    color:          var(--if-trigger-text) !important;
    border:         none !important;
    border-radius:  var(--if-trigger-radius) !important;
    cursor:         pointer !important;
    font-family:    var(--if-font) !important;
    font-size:      var(--if-trigger-font) !important;
    font-weight:    var(--if-trigger-font-weight) !important;
    line-height:    1 !important;
    box-shadow:     0 4px 16px rgba(0,0,0,.15) !important;
    transition:     background .18s, color .18s, transform .18s !important;
    white-space:    nowrap !important;
    user-select:    none !important;
    text-decoration: none !important;
    margin:         0 !important;
    width:          auto !important;
    height:         auto !important;
    box-sizing:     border-box !important;
    outline:        none !important;
}
.intentfunnel-trigger-button:hover {
    background: var(--if-trigger-hover-bg) !important;
    color:      var(--if-trigger-hover-text) !important;
    transform:  translateY(-2px) !important;
}
.intentfunnel-trigger-button:active  { transform: translateY(0) !important; }

/* Icon im Button */
.intentfunnel-trigger-button .bi {
    font-size:   1em !important;
    line-height: 1   !important;
    color:       inherit !important;
    display:     inline-block !important;
    width:       auto !important;
    height:      auto !important;
    background:  none !important;
    border:      none !important;
    padding:     0    !important;
    margin:      0    !important;
}

/* =============================================================
   TRIGGER – CIRCLE
   ============================================================= */

.intentfunnel-trigger-circle {
    position:        fixed !important;
    bottom:          24px !important;
    right:           24px !important;
    z-index:         var(--if-z) !important;
    width:           var(--if-circle-size) !important;
    height:          var(--if-circle-size) !important;
    min-width:       var(--if-circle-size) !important;
    min-height:      var(--if-circle-size) !important;
    max-width:       var(--if-circle-size) !important;
    max-height:      var(--if-circle-size) !important;
    border-radius:   50% !important;
    background:      var(--if-circle-bg) !important;
    color:           var(--if-circle-color) !important;
    border:          none !important;
    cursor:          pointer !important;
    display:         flex !important;
    align-items:     center !important;
    justify-content: center !important;
    box-shadow:      0 4px 16px var(--if-circle-pulse) !important;
    transition:      background .18s, transform .18s !important;
    font-size:       22px !important;
    padding:         0 !important;
    margin:          0 !important;
    box-sizing:      content-box !important;
    overflow:        visible !important;
    text-decoration: none !important;
    outline:         none !important;
    /* Kein aspect-ratio vom Theme übernehmen */
    aspect-ratio:    1 / 1 !important;
}
.intentfunnel-trigger-circle:hover {
    background: var(--if-circle-hover-bg) !important;
    transform:  scale(1.08) !important;
}

/* Icon im Kreis */
.intentfunnel-trigger-circle .bi {
    font-size:   22px !important;
    line-height: 1    !important;
    color:       inherit !important;
    display:     inline-block !important;
    width:       auto !important;
    height:      auto !important;
    background:  none !important;
    border:      none !important;
    padding:     0    !important;
    margin:      0    !important;
    position:    relative !important;
    z-index:     1 !important;
}

/* Puls-Ring */
.intentfunnel-circle-pulse {
    position:       absolute !important;
    inset:          0 !important;
    border-radius:  50% !important;
    background:     var(--if-circle-pulse) !important;
    animation:      if-pulse 2.2s ease-out infinite !important;
    pointer-events: none !important;
    z-index:        0 !important;
    width:          100% !important;
    height:         100% !important;
    display:        block !important;
}
@keyframes if-pulse {
    0%   { transform: scale(1);    opacity: .7; }
    70%  { transform: scale(1.55); opacity: 0;  }
    100% { transform: scale(1.55); opacity: 0;  }
}
.intentfunnel-trigger-active .intentfunnel-circle-pulse {
    animation: none !important;
    opacity:   0    !important;
}

/* Desktop / Mobil Sichtbarkeit */
.intentfunnel-trigger-button.if-desktop-only { display: flex !important; }
.intentfunnel-trigger-circle.if-desktop-only { display: flex !important; }
.intentfunnel-trigger-button.if-mobile-only  { display: none !important; }
.intentfunnel-trigger-circle.if-mobile-only  { display: none !important; }

@media (max-width: 767px) {
    .intentfunnel-trigger-button.if-desktop-only { display: none !important; }
    .intentfunnel-trigger-circle.if-desktop-only { display: none !important; }
    .intentfunnel-trigger-button.if-mobile-only  { display: flex !important; }
    .intentfunnel-trigger-circle.if-mobile-only  { display: flex !important; }
}

/* =============================================================
   WIDGET
   ============================================================= */

.intentfunnel-widget {
    position:       fixed !important;
    bottom:         90px !important;
    right:          24px !important;
    z-index:        var(--if-z) !important;
    width:          var(--if-width) !important;
    max-width:      calc(100vw - 32px) !important;
    display:        flex !important;
    flex-direction: column !important;
    background:     var(--if-bg) !important;
    border:         var(--if-widget-border-width) solid var(--if-widget-border-color) !important;
    border-radius:  var(--if-radius) !important;
    box-shadow:     var(--if-shadow) !important;
    font-family:    var(--if-font) !important;
    color:          var(--if-text) !important;
    overflow:       hidden !important;
    transform-origin: bottom right;
    margin:         0 !important;
    padding:        0 !important;
    box-sizing:     border-box !important;
    /* Standardmäßig unsichtbar */
    visibility:     hidden !important;
    opacity:        0 !important;
    transform:      scale(.92) translateY(8px) !important;
    pointer-events: none !important;
    transition:     opacity .2s ease, transform .2s ease, visibility 0s linear .2s !important;
}
.intentfunnel-widget.intentfunnel-hidden {
    visibility:     hidden !important;
    opacity:        0 !important;
    transform:      scale(.92) translateY(8px) !important;
    pointer-events: none !important;
    transition:     opacity .2s ease, transform .2s ease, visibility 0s linear .2s !important;
}
.intentfunnel-widget.intentfunnel-visible {
    visibility:     visible !important;
    opacity:        1 !important;
    transform:      scale(1) translateY(0) !important;
    pointer-events: all !important;
    transition:     opacity .2s ease, transform .2s ease, visibility 0s linear 0s !important;
}

/* =============================================================
   HEADER
   ============================================================= */

.intentfunnel-header {
    display:         flex !important;
    align-items:     center !important;
    justify-content: space-between !important;
    padding:         14px 16px !important;
    background:      var(--if-header-bg) !important;
    color:           var(--if-header-text) !important;
    flex-shrink:     0 !important;
    margin:          0 !important;
    border:          none !important;
    border-radius:   0 !important;
}
.intentfunnel-header-title {
    font-weight:    700 !important;
    font-size:      14px !important;
    letter-spacing: .01em !important;
    color:          inherit !important;
    background:     none !important;
    padding:        0 !important;
    margin:         0 !important;
    border:         none !important;
}

/* X-Close-Button */
.intentfunnel-close {
    background:    transparent !important;
    border:        none !important;
    color:         rgba(255,255,255,.85) !important;
    cursor:        pointer !important;
    padding:       4px 6px !important;
    border-radius: 6px !important;
    display:       flex !important;
    align-items:   center !important;
    justify-content: center !important;
    line-height:   1 !important;
    transition:    color .15s, background .15s !important;
    margin:        0 !important;
    width:         auto !important;
    height:        auto !important;
    outline:       none !important;
    box-shadow:    none !important;
}
.intentfunnel-close:hover {
    color:      var(--if-header-text) !important;
    background: rgba(255,255,255,.15) !important;
}

/* Icon im Close-Button */
.intentfunnel-close .bi {
    font-size:   18px !important;
    line-height: 1    !important;
    color:       inherit !important;
    display:     inline-block !important;
    width:       auto !important;
    height:      auto !important;
    background:  none !important;
    border:      none !important;
    padding:     0    !important;
    margin:      0    !important;
}

/* =============================================================
   CHATBOX
   ============================================================= */

.intentfunnel-chatbox {
    flex:            1 !important;
    padding:         16px 14px !important;
    overflow-y:      auto !important;
    max-height:      var(--if-height) !important;
    scroll-behavior: smooth !important;
    display:         flex !important;
    flex-direction:  column !important;
    gap:             10px !important;
    background:      var(--if-bg) !important;
    margin:          0 !important;
    border:          none !important;
    box-sizing:      border-box !important;
}
.intentfunnel-chatbox::-webkit-scrollbar       { width: 4px !important; }
.intentfunnel-chatbox::-webkit-scrollbar-track { background: transparent !important; }
.intentfunnel-chatbox::-webkit-scrollbar-thumb { background: var(--if-widget-border-color) !important; border-radius: 2px !important; }

/* =============================================================
   BUBBLES
   ============================================================= */

.intentfunnel-bubble {
    max-width:     85% !important;
    padding:       10px 14px !important;
    border-radius: var(--if-radius-bubble) !important;
    line-height:   1.5 !important;
    font-size:     var(--if-font-bubble) !important;
    font-family:   var(--if-font) !important;
    animation:     if-bubble-in .18s ease !important;
    margin:        0 !important;
    box-sizing:    border-box !important;
}
@keyframes if-bubble-in {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0);   }
}
.intentfunnel-bubble-system {
    background:                var(--if-bubble-system-bg) !important;
    color:                     var(--if-bubble-system-text) !important;
    border-bottom-left-radius: 4px !important;
    align-self:                flex-start !important;
    border:                    none !important;
}
.intentfunnel-bubble-user {
    background:                 var(--if-bubble-user-bg) !important;
    color:                      var(--if-bubble-user-text) !important;
    border-bottom-right-radius: 4px !important;
    align-self:                 flex-end !important;
    margin-left:                auto !important;
    border:                     none !important;
}

/* =============================================================
   OPTIONS
   ============================================================= */

.intentfunnel-options {
    display:        flex !important;
    flex-direction: column !important;
    gap:            6px !important;
    align-self:     stretch !important;
    margin:         0 !important;
    padding:        0 !important;
    border:         none !important;
    background:     none !important;
    list-style:     none !important;
}
.intentfunnel-option {
    background:      var(--if-option-bg) !important;
    border:          var(--if-option-border-width) solid var(--if-option-border-color) !important;
    color:           var(--if-option-text) !important;
    border-radius:   var(--if-option-radius) !important;
    padding:         9px 14px !important;
    font-size:       var(--if-option-font) !important;
    font-family:     var(--if-font) !important;
    font-weight:     var(--if-option-font-weight) !important;
    text-align:      left !important;
    cursor:          pointer !important;
    transition:      background .15s, color .15s, border-color .15s !important;
    line-height:     1.4 !important;
    display:         block !important;
    width:           100% !important;
    margin:          0 !important;
    box-sizing:      border-box !important;
    text-decoration: none !important;
    outline:         none !important;
    box-shadow:      none !important;
}
.intentfunnel-option:hover:not(:disabled) {
    background:   var(--if-option-hover-bg) !important;
    color:        var(--if-option-hover-text) !important;
    border-color: var(--if-option-hover-border) !important;
}
.intentfunnel-options-locked .intentfunnel-option {
    opacity:      .45 !important;
    cursor:       default !important;
    border-color: var(--if-widget-border-color) !important;
    color:        var(--if-text-muted) !important;
}

/* =============================================================
   ERGEBNIS-LINKS
   ============================================================= */

.intentfunnel-result {
    display:        flex !important;
    flex-direction: column !important;
    gap:            8px !important;
    align-self:     stretch !important;
    padding-top:    4px !important;
    margin:         0 !important;
}
.intentfunnel-link-primary,
.intentfunnel-link-secondary {
    display:         block !important;
    padding:         11px 16px !important;
    font-family:     var(--if-font) !important;
    text-align:      center !important;
    text-decoration: none !important;
    transition:      background .15s, color .15s, border-color .15s !important;
    line-height:     1.4 !important;
    margin:          0 !important;
    box-sizing:      border-box !important;
    width:           100% !important;
    cursor:          pointer !important;
}
.intentfunnel-link-primary {
    background:    var(--if-link-primary-bg) !important;
    color:         var(--if-link-primary-text) !important;
    border:        var(--if-link-primary-border-w) solid var(--if-link-primary-border) !important;
    border-radius: var(--if-link-primary-radius) !important;
    font-size:     var(--if-link-primary-font) !important;
    font-weight:   var(--if-link-primary-weight) !important;
}
.intentfunnel-link-primary:hover {
    background:   var(--if-link-primary-hover-bg) !important;
    color:        var(--if-link-primary-hover-text) !important;
    border-color: var(--if-link-primary-hover-border) !important;
}
.intentfunnel-link-secondary {
    background:    var(--if-link-sec-bg) !important;
    color:         var(--if-link-sec-text) !important;
    border:        var(--if-link-sec-border-w) solid var(--if-link-sec-border) !important;
    border-radius: var(--if-link-sec-radius) !important;
    font-size:     var(--if-link-sec-font) !important;
    font-weight:   var(--if-link-sec-weight) !important;
}
.intentfunnel-link-secondary:hover {
    background:   var(--if-link-sec-hover-bg) !important;
    color:        var(--if-link-sec-hover-text) !important;
    border-color: var(--if-link-sec-hover-border) !important;
}

.intentfunnel-restart {
    background:            transparent !important;
    border:                none !important;
    color:                 var(--if-text-muted) !important;
    font-size:             12px !important;
    font-family:           var(--if-font) !important;
    cursor:                pointer !important;
    padding:               4px 0 !important;
    text-align:            left !important;
    text-decoration:       underline !important;
    text-underline-offset: 2px !important;
    transition:            color .15s !important;
    display:               inline-block !important;
    background-image:      none !important;
    box-shadow:            none !important;
    margin:                0 !important;
    width:                 auto !important;
}
.intentfunnel-restart:hover { color: var(--if-text) !important; }

/* =============================================================
   FREITEXT INPUT + SENDEN-BUTTON
   ============================================================= */

.intentfunnel-freitext-wrap {
    display:    flex !important;
    gap:        6px !important;
    align-self: stretch !important;
    margin:     0 !important;
    padding:    0 !important;
    border:     none !important;
    background: none !important;
    align-items: stretch !important;
}

/* Input – Theme setzt oft große font-size und padding auf inputs */
.intentfunnel-freitext-input {
    flex:          1 !important;
    border:        var(--if-input-border-width) solid var(--if-input-border-color) !important;
    border-radius: var(--if-input-radius) !important;
    padding:       8px 10px !important;
    font-size:     var(--if-input-font) !important;
    font-family:   var(--if-font) !important;
    color:         var(--if-input-text) !important;
    background:    var(--if-input-bg) !important;
    outline:       none !important;
    transition:    border-color .15s !important;
    min-width:     0 !important;
    height:        36px !important;
    max-height:    36px !important;
    line-height:   1.2 !important;
    margin:        0 !important;
    box-shadow:    none !important;
    box-sizing:    border-box !important;
    width:         100% !important;
    /* kein transform vom Theme */
    transform:     none !important;
}
.intentfunnel-freitext-input:focus {
    border-color: var(--if-input-focus-border) !important;
    box-shadow:   none !important;
    outline:      none !important;
}
.intentfunnel-freitext-input::placeholder {
    color:     var(--if-text-muted) !important;
    font-size: var(--if-input-font) !important;
    opacity:   1 !important;
}

/* Senden-Button exakt gleich hoch wie Input */
.intentfunnel-freitext-btn {
    flex-shrink:     0 !important;
    width:           36px !important;
    height:          36px !important;
    min-width:       36px !important;
    min-height:      36px !important;
    max-width:       36px !important;
    max-height:      36px !important;
    border:          none !important;
    border-radius:   var(--if-input-radius) !important;
    background:      var(--if-send-bg) !important;
    color:           var(--if-send-color) !important;
    cursor:          pointer !important;
    display:         flex !important;
    align-items:     center !important;
    justify-content: center !important;
    font-size:       15px !important;
    line-height:     1 !important;
    padding:         0 !important;
    margin:          0 !important;
    box-sizing:      border-box !important;
    transition:      background .15s !important;
    outline:         none !important;
    box-shadow:      none !important;
}
.intentfunnel-freitext-btn:hover:not(:disabled) { background: var(--if-send-hover-bg) !important; }
.intentfunnel-freitext-btn:disabled             { opacity: .5 !important; cursor: default !important; }

/* Icon im Senden-Button */
.intentfunnel-freitext-btn .bi {
    font-size:   15px !important;
    line-height: 1    !important;
    color:       inherit !important;
    display:     inline-block !important;
    width:       auto !important;
    height:      auto !important;
    background:  none !important;
    border:      none !important;
    padding:     0    !important;
    margin:      0    !important;
}

.intentfunnel-freitext-locked .intentfunnel-freitext-input { opacity: .5 !important; }

/* Trenner über erster Options-Gruppe */
.intentfunnel-options:first-of-type {
    padding-top: 10px !important;
    border-top:  1px solid var(--if-widget-border-color) !important;
    margin-top:  2px !important;
}

/* =============================================================
   RESPONSIVE
   ============================================================= */

@media (max-width: 480px) {
    .intentfunnel-widget {
        bottom:        0 !important;
        right:         0 !important;
        left:          0 !important;
        width:         100% !important;
        max-width:     100% !important;
        border-radius: var(--if-radius) var(--if-radius) 0 0 !important;
        border-bottom: none !important;
        max-height:    var(--if-mobile-height) !important;
    }
    .intentfunnel-chatbox {
        min-height: 0 !important;
        max-height: none !important;
    }
    .intentfunnel-trigger-button,
    .intentfunnel-trigger-circle {
        bottom: 16px !important;
        right:  16px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .intentfunnel-widget,
    .intentfunnel-bubble,
    .intentfunnel-trigger-button,
    .intentfunnel-trigger-circle { transition: none !important; animation: none !important; }
    .intentfunnel-circle-pulse   { animation: none !important; }
}