/* BloomTech Chatbot Widget - tokeny i klasy w jednym miejscu.
 * JS (widget.js) ustawia wartości zmiennych na hoście (#btcb-root lub :host)
 * na podstawie BTCB_DEFAULTS + danych z DB przekazanych przez BTChatbot.
 */

#btcb-root,
:host {
    /* Fonty i podstawowe rozmiary */
    --btcb-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif;
    --btcb-font-size-base: 14px;
    --btcb-font-size-header-title: 18px;
    --btcb-font-size-header-subtitle: 12px;
    --btcb-font-size-message: 14px;
    --btcb-font-size-input: 14px;
    --btcb-font-size-button: 14px;

    /* Szerokości ramek (nowa nazwa + aliasy) */
    --btcb-bw: 1px;
    --btcb-border-width: var(--btcb-bw);
    --btcb-input-bw: var(--btcb-bw);

           /* Promienie/opacity/shadow (domyślne - mogą być nadpisane z JS) */
           --btcb-panel-radius: 16px;
           --btcb-bubble-radius: 10px;
           --btcb-input-radius: 10px;
           --btcb-panel-shadow: 0 6px 14px rgba(0,0,0,.08);
           --btcb-panel-opacity: 0.9;
           --btcb-log-opacity: 1;
           --btcb-input-opacity: 1;
           --btcb-bot-bubble-opacity: 1;
           --btcb-user-bubble-opacity: 1;
           --btcb-scale: 1;

    /* Kolory domyślne (JS nadpisze z DB) */
    --btcb-panel-border: #e5e7eb;
    --btcb-container-border: var(--btcb-panel-border);
    --btcb-button-border: #d1d5db;
    --btcb-input-border: #d1d5db;
    --btcb-input-border-focus: #a7aaaf;
    --btcb-panel-bg: #ffffff;
    --btcb-under-header-text: #111111;
    --btcb-button-bg: #0ea5a5;
    --btcb-button-text: #ffffff;
    --btcb-bot-bubble-bg: #ffffff;
    --btcb-bot-text: #111111;
    --btcb-user-bubble-bg: #0ea5a5;
    --btcb-user-text: #ffffff;
    --btcb-input-bg: #ffffff;
    --btcb-input-text: #111111;
    --btcb-footer-text: #6b7280;
    --btcb-log-bg: #ffffff;
    --btcb-header-bg: #0ea5a5;
    --btcb-header-text: #ffffff;
}

/* Klasy zamiast inline borderów */
#btcb-root .btcb-border,
:host .btcb-border {
    border: var(--btcb-bw) solid var(--btcb-panel-border, transparent);
}

#btcb-root .btcb-divider-top,
:host .btcb-divider-top {
    border-top: var(--btcb-bw) solid var(--btcb-panel-border, transparent);
}

#btcb-root .btcb-divider-bottom,
:host .btcb-divider-bottom {
    border-bottom: var(--btcb-bw) solid var(--btcb-panel-border, transparent);
}

#btcb-root .btcb-input,
:host .btcb-input {
    border: var(--btcb-input-bw) solid var(--btcb-input-border, transparent);
}

#btcb-root .btcb-btn,
:host .btcb-btn {
    border: 0px solid transparent;
}

/* Focus styles */
#btcb-root textarea:focus,
#btcb-root input[type="text"]:focus,
:host textarea:focus,
:host input[type="text"]:focus {
    border-color: var(--btcb-input-border-focus, var(--btcb-input-border, transparent)) !important;
    outline: none;
    box-shadow: none;
}

/* Bezpiecznik przeciw globalnym regułom border-width */
#btcb-root,
:host {
    border: none !important;
    border-style: none !important;
}

#btcb-root[style*="--btcb-border-width"],
#btcb-root[style*="--btcb-bw"],
:host([style*="--btcb-border-width"]),
:host([style*="--btcb-bw"]) {
    border-style: none !important;
}

@keyframes btcb-bounce {
    0%, 80%, 100% { transform: translateY(0); opacity: .6; }
    40% { transform: translateY(-4px); opacity: 1; }
}