/* ==========================================================================
   Chat Buddy – front-end widget styles
   Fully isolated from the host WordPress theme. Every property on every
   element inside .wpcb-widget is set explicitly so theme CSS cannot bleed in.
   ========================================================================== */

/* ── 1. Blanket reset for ALL descendants ─────────────────────────────── */
.wpcb-widget,
.wpcb-widget *,
.wpcb-widget *::before,
.wpcb-widget *::after {
    all: unset;                          /* nuclear reset – strip every inherited/cascaded value  */
    box-sizing: border-box !important;   /* re-apply box-model we actually want                  */
}

/* ── 2. Widget root – fixed floating anchor ──────────────────────────── */
.wpcb-widget {
    /* CSS custom properties (re-declared after `all:unset`) */
    --wpcb-accent:        #0ea5e9;
    --wpcb-accent-dark:   #0284c7;
    --wpcb-bg:            #ffffff;
    --wpcb-surface:       #f8fafc;
    --wpcb-border:        #e2e8f0;
    --wpcb-text:          #0f172a;
    --wpcb-text-muted:    #64748b;
    --wpcb-radius-lg:     16px;
    --wpcb-radius-md:     12px;
    --wpcb-radius-sm:     8px;
    --wpcb-shadow:        0 24px 60px rgba(15,23,42,0.25);

    /* Font scale */
    --wpcb-font-base:     15px;
    --wpcb-font-sm:       14px;
    --wpcb-font-header:   16px;
    --wpcb-icon-size:     30px;

    /* Layout */
    display:              block !important;
    position:             fixed !important;
    right:                20px !important;
    bottom:               20px !important;
    z-index:              2147483647 !important;   /* max safe z-index */
    width:                auto !important;
    height:               auto !important;
    margin:               0 !important;
    padding:              0 !important;
    background:           transparent !important;
    border:               none !important;
    font-family:          system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
    font-size:            var(--wpcb-font-base) !important;
    line-height:          1.5 !important;
    color:                var(--wpcb-text) !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align:           left !important;
    direction:            ltr !important;
}

/* ── 3. Frame wrapper ──────────────────────────────────────────────────── */
.wpcb-widget .frame-content {
    display:   block !important;
    position:  relative !important;
    margin:    0 !important;
    padding:   0 !important;
    border:    none !important;
    background: transparent !important;
}

/* ── 4. Floating trigger button ─────────────────────────────────────── */
.wpcb-widget #chat-button.wpcb-float-trigger {
    display:        flex !important;
    align-items:    center !important;
    justify-content: center !important;
    position:       relative !important;
    width:          auto !important;
    height:         auto !important;
    min-width:      0 !important;
    min-height:     0 !important;
    padding:        0 !important;
    margin:         0 !important;
    border:         none !important;
    border-radius:  0 !important;
    background:     transparent !important;
    box-shadow:     none !important;
    cursor:         pointer !important;
    outline:        none !important;
    -webkit-appearance: none !important;
    appearance:     none !important;
    transition:     transform 180ms ease !important;
    text-decoration: none !important;
    line-height:    1 !important;
    font-size:      0 !important;        /* hide any accidental text node */
}
.wpcb-widget #chat-button.wpcb-float-trigger:hover,
.wpcb-widget #chat-button.wpcb-float-trigger:focus-visible {
    transform: translateY(-3px) !important;
}
.wpcb-widget #chat-button.wpcb-float-trigger:focus-visible {
    outline:        2px solid var(--wpcb-accent) !important;
    outline-offset: 3px !important;
    border-radius:  6px !important;
}

/* Trigger image */
.wpcb-widget #chat-button.wpcb-float-trigger img {
    display:        block !important;
    width:          60px !important;
    height:         60px !important;
    max-width:      none !important;
    min-width:      0 !important;
    border-radius:  50% !important;
    object-fit:     cover !important;
    box-shadow:     0 4px 14px rgba(14,165,233,0.45) !important;
    border:         none !important;
    pointer-events: none !important;
    margin:         0 !important;
    padding:        0 !important;
    vertical-align: top !important;
    transition:     box-shadow 180ms ease !important;
}
.wpcb-widget #chat-button.wpcb-float-trigger:hover img {
    box-shadow: 0 6px 20px rgba(14,165,233,0.6) !important;
}

/* ── 5. Chat panel container ─────────────────────────────────────────── */
.wpcb-widget #chatContainer {
    display:        flex !important;
    flex-direction: column !important;
    position:       absolute !important;
    right:          0 !important;
    bottom:         76px !important;
    width:          360px !important;
    max-width:      calc(100vw - 32px) !important;
    max-height:     70vh !important;
    min-height:     300px !important;
    background:     var(--wpcb-bg) !important;
    border-radius:  var(--wpcb-radius-lg) !important;
    overflow:       hidden !important;
    box-shadow:     var(--wpcb-shadow) !important;
    border:         1px solid var(--wpcb-border) !important;
    margin:         0 !important;
    padding:        0 !important;

    /* hidden by default */
    opacity:          0 !important;
    pointer-events:   none !important;
    transform:        scale(0.95) translateY(12px) !important;
    transform-origin: bottom right !important;
    transition:       transform 220ms cubic-bezier(.34,1.56,.64,1),
                      opacity   180ms ease !important;
}
.wpcb-widget #chatContainer.open {
    opacity:        1 !important;
    pointer-events: auto !important;
    transform:      scale(1) translateY(0) !important;
}

/* Inner .chat wrapper */
.wpcb-widget #chatContainer .chat {
    display:        flex !important;
    flex-direction: column !important;
    flex:           1 1 auto !important;
    min-height:     0 !important;
    overflow:       hidden !important;
    margin:         0 !important;
    padding:        0 !important;
    background:     transparent !important;
    border:         none !important;
}

/* ── 6. Header ───────────────────────────────────────────────────────── */
.wpcb-widget .overheader {
    display:    block !important;
    margin:     0 !important;
    padding:    0 !important;
    border:     none !important;
    background: transparent !important;
}
.wpcb-widget .chat-header {
    display:         flex !important;
    align-items:     center !important;
    justify-content: space-between !important;
    padding:         13px 14px !important;
    margin:          0 !important;
    border:          none !important;
    border-radius:   0 !important;
    flex-shrink:     0 !important;
    /* background + color set inline by PHP (user-configured) */
}

/* Header title – h2 reset */
.wpcb-widget .chat-header h2,
.wpcb-widget .chat-header h2.oneline {
    display:     block !important;
    font-size:   var(--wpcb-font-header) !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    margin:      0 !important;
    padding:     0 !important;
    border:      none !important;
    background:  transparent !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    font-family: inherit !important;
    /* color set via inline style from PHP */
}
.wpcb-widget .chat-header h2 .chatbot_name {
    display:    inline !important;
    font-size:  inherit !important;
    font-weight: inherit !important;
    line-height: inherit !important;
    /* color from inline style */
}

/* Header right-hand icons */
.wpcb-widget .chat-header .righthead {
    display:        flex !important;
    gap:            6px !important;
    align-items:    center !important;
    margin:         0 !important;
    padding:        0 !important;
    border:         none !important;
    background:     transparent !important;
    flex-shrink:    0 !important;
}
.wpcb-widget .chat-header .righthead a,
.wpcb-widget .chat-header .righthead button {
    display:         inline-flex !important;
    align-items:     center !important;
    justify-content: center !important;
    background:      transparent !important;
    border:          none !important;
    padding:         5px !important;
    margin:          0 !important;
    border-radius:   6px !important;
    cursor:          pointer !important;
    line-height:     1 !important;
    outline:         none !important;
    text-decoration: none !important;
    -webkit-appearance: none !important;
    appearance:      none !important;
    min-width:       0 !important;
    min-height:      0 !important;
    width:           auto !important;
    height:          auto !important;
    transition:      background 140ms ease !important;
}
.wpcb-widget .chat-header .righthead a:hover,
.wpcb-widget .chat-header .righthead button:hover {
    background: rgba(255,255,255,0.2) !important;
}

/* SVG inside header buttons */
.wpcb-widget .chat-header .righthead a svg,
.wpcb-widget .chat-header .righthead button svg {
    display:        block !important;
    width:          20px !important;
    height:         20px !important;
    overflow:       visible !important;
    fill:           none !important;
    flex-shrink:    0 !important;
}

/* ── 7. Message list ─────────────────────────────────────────────────── */
.wpcb-widget #conversation-group {
    display:        flex !important;
    flex-direction: column !important;
    flex:           1 1 auto !important;
    overflow-y:     auto !important;
    overflow-x:     hidden !important;
    padding:        14px 12px !important;
    margin:         0 !important;
    gap:            10px !important;
    background:     var(--wpcb-surface) !important;
    border:         none !important;
    min-height:     0 !important;
    /* custom scrollbar */
    scrollbar-width: thin !important;
    scrollbar-color: #cbd5e1 transparent !important;
}
.wpcb-widget #conversation-group::-webkit-scrollbar {
    width: 4px !important;
}
.wpcb-widget #conversation-group::-webkit-scrollbar-track {
    background: transparent !important;
}
.wpcb-widget #conversation-group::-webkit-scrollbar-thumb {
    background: #cbd5e1 !important;
    border-radius: 4px !important;
}

/* ── 8. Message bubbles ──────────────────────────────────────────────── */
.wpcb-widget .message,
.wpcb-widget .botText,
.wpcb-widget .sentText,
.wpcb-widget .message-operator {
    display:       block !important;
    max-width:     88% !important;
    line-height:   1.55 !important;
    font-size:     var(--wpcb-font-base) !important;
    font-family:   inherit !important;
    font-weight:   400 !important;
    border-radius: 14px !important;
    padding:       10px 13px !important;
    margin:        0 !important;
    word-wrap:     break-word !important;
    overflow-wrap: anywhere !important;
    white-space:   normal !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    border:        none !important;
    box-shadow:    none !important;
}

/* Bot bubble */
.wpcb-widget .botText,
.wpcb-widget .message-operator {
    background:  var(--wpcb-bg) !important;
    color:       var(--wpcb-text) !important;
    border:      1px solid var(--wpcb-border) !important;
    align-self:  flex-start !important;
    display:     flex !important;
    align-items: flex-start !important;
    gap:         8px !important;
}

/* User bubble */
.wpcb-widget .sentText {
    background:  linear-gradient(135deg, var(--wpcb-accent), var(--wpcb-accent-dark)) !important;
    color:       #ffffff !important;
    align-self:  flex-end !important;
}

/* Links inside bot bubbles */
.wpcb-widget .botText a,
.wpcb-widget .message-operator a {
    color:           var(--wpcb-accent-dark) !important;
    text-decoration: underline !important;
    cursor:          pointer !important;
}
.wpcb-widget .botText a:hover,
.wpcb-widget .message-operator a:hover {
    color: var(--wpcb-accent) !important;
}

/* Bold inside messages */
.wpcb-widget .botText strong,
.wpcb-widget .botText b,
.wpcb-widget .message-operator strong,
.wpcb-widget .message-operator b,
.wpcb-widget .sentText strong,
.wpcb-widget .sentText b {
    font-weight: 700 !important;
}

/* ── 9. Bot avatar icon ──────────────────────────────────────────────── */
.wpcb-widget .wpcb-bot-icon {
    display:     block !important;
    width:       var(--wpcb-icon-size) !important;
    height:      var(--wpcb-icon-size) !important;
    min-width:   var(--wpcb-icon-size) !important;
    border-radius: var(--wpcb-radius-sm) !important;
    object-fit:  cover !important;
    vertical-align: top !important;
    margin:      0 !important;
    padding:     0 !important;
    border:      none !important;
    background:  #fff !important;
    flex-shrink: 0 !important;
    box-shadow:  none !important;
}

/* ── 10. Typing indicator ────────────────────────────────────────────── */
.wpcb-widget .wpcb-typing {
    display:     inline-flex !important;
    align-items: center !important;
    gap:         4px !important;
    padding:     2px 4px !important;
    margin:      0 !important;
    border:      none !important;
    background:  transparent !important;
}
.wpcb-widget .wpcb-typing span {
    display:       block !important;
    width:         6px !important;
    height:        6px !important;
    border-radius: 50% !important;
    background:    #94a3b8 !important;
    margin:        0 !important;
    padding:       0 !important;
    animation:     wpcb-blink 1.2s infinite ease-in-out both !important;
}
.wpcb-widget .wpcb-typing span:nth-child(2) { animation-delay: 0.2s !important; }
.wpcb-widget .wpcb-typing span:nth-child(3) { animation-delay: 0.4s !important; }

@keyframes wpcb-blink {
    0%, 80%, 100% { opacity: 0.2; transform: translateY(0); }
    40%            { opacity: 1;   transform: translateY(-3px); }
}

/* ── 11. Error text ──────────────────────────────────────────────────── */
.wpcb-widget .wpcb-error {
    display:     inline !important;
    color:       #dc2626 !important;
    font-size:   var(--wpcb-font-sm) !important;
    font-weight: 400 !important;
    background:  transparent !important;
    border:      none !important;
    padding:     0 !important;
    margin:      0 !important;
}

/* ── 12. Input area ──────────────────────────────────────────────────── */
.wpcb-widget .input-group {
    display:     block !important;
    flex-shrink: 0 !important;
    border-top:  1px solid var(--wpcb-border) !important;
    padding:     10px 10px !important;
    margin:      0 !important;
    background:  var(--wpcb-bg) !important;
    border-radius: 0 0 var(--wpcb-radius-lg) var(--wpcb-radius-lg) !important;
}

/* Kill the <hr> that lives in the markup */
.wpcb-widget .input-group hr {
    display: none !important;
}

.wpcb-widget .footer-input-wrapper,
.wpcb-widget .drag-active-wrapper {
    display:     flex !important;
    align-items: flex-end !important;
    gap:         8px !important;
    margin:      0 !important;
    padding:     0 !important;
    border:      none !important;
    background:  transparent !important;
}

/* Textarea */
.wpcb-widget #chat-input {
    display:        block !important;
    flex:           1 1 auto !important;
    min-width:      0 !important;
    width:          100% !important;
    border:         1px solid #cbd5e1 !important;
    border-radius:  var(--wpcb-radius-md) !important;
    padding:        10px 13px !important;
    margin:         0 !important;
    font-size:      var(--wpcb-font-sm) !important;
    font-family:    inherit !important;
    font-weight:    400 !important;
    line-height:    1.45 !important;
    color:          var(--wpcb-text) !important;
    background:     var(--wpcb-surface) !important;
    resize:         none !important;
    overflow-y:     hidden !important;
    max-height:     140px !important;
    min-height:     40px !important;
    outline:        none !important;
    box-shadow:     none !important;
    -webkit-appearance: none !important;
    appearance:     none !important;
    transition:     border-color 120ms ease, background 120ms ease !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    white-space:    pre-wrap !important;
    word-break:     break-word !important;
}
.wpcb-widget #chat-input:focus {
    border-color: var(--wpcb-accent) !important;
    background:   var(--wpcb-bg) !important;
    outline:      none !important;
    box-shadow:   0 0 0 3px rgba(14,165,233,0.12) !important;
}
.wpcb-widget #chat-input::placeholder {
    color:   #94a3b8 !important;
    opacity: 1 !important;
}

/* Send button */
.wpcb-widget #SentButton.send-icon {
    display:         inline-flex !important;
    align-items:     center !important;
    justify-content: center !important;
    flex-shrink:     0 !important;
    width:           42px !important;
    height:          42px !important;
    min-width:       42px !important;
    border:          none !important;
    border-radius:   var(--wpcb-radius-md) !important;
    background:      var(--wpcb-accent) !important;
    color:           #ffffff !important;
    cursor:          pointer !important;
    padding:         0 !important;
    margin:          0 !important;
    outline:         none !important;
    box-shadow:      none !important;
    -webkit-appearance: none !important;
    appearance:      none !important;
    transition:      background 140ms ease, transform 120ms ease !important;
    line-height:     1 !important;
    font-size:       0 !important;
}
.wpcb-widget #SentButton.send-icon:hover {
    background: var(--wpcb-accent-dark) !important;
    transform:  translateY(-1px) !important;
}
.wpcb-widget #SentButton.send-icon:active {
    transform: translateY(0) !important;
}
.wpcb-widget #SentButton.send-icon:focus-visible {
    outline:        2px solid var(--wpcb-accent) !important;
    outline-offset: 2px !important;
}
.wpcb-widget #SentButton.send-icon:disabled,
.wpcb-widget #SentButton.send-icon.is-disabled {
    opacity:    0.55 !important;
    cursor:     not-allowed !important;
    background: #94a3b8 !important;
    transform:  none !important;
}

/* SVG inside send button */
.wpcb-widget #SentButton.send-icon svg {
    display:     block !important;
    width:       17px !important;
    height:      17px !important;
    fill:        currentColor !important;
    flex-shrink: 0 !important;
    overflow:    visible !important;
    margin:      0 !important;
    padding:     0 !important;
}

/* ── 13. Hidden thread-uid field ─────────────────────────────────────── */
#thread_uid {
    display: none !important;
}

/* ── 14. Responsive: shrink panel on small viewports ─────────────────── */
@media (max-width: 420px) {
    .wpcb-widget {
        right:  12px !important;
        bottom: 12px !important;
    }
    .wpcb-widget #chatContainer {
        width:     calc(100vw - 24px) !important;
        max-width: calc(100vw - 24px) !important;
        right:     0 !important;
        bottom:    72px !important;
    }
    .wpcb-widget #chat-button.wpcb-float-trigger img {
        width:  52px !important;
        height: 52px !important;
    }
}

/* ── 15. Support check: if all:unset is unsupported (old browsers) ─── */
@supports not (all: unset) {
    /* Fallback: replicate the critical resets manually */
    .wpcb-widget * {
        box-sizing:    border-box;
        margin:        0;
        padding:       0;
        border:        none;
        background:    transparent;
        font-family:   system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
        font-size:     15px;
        font-weight:   400;
        line-height:   1.5;
        color:         #0f172a;
        text-decoration: none;
        list-style:    none;
        float:         none;
        clear:         none;
        vertical-align: baseline;
        outline:       none;
    }
}