/* ================================================
   AI Chatbot Plugin v3.1
   Full customization: desktop + mobile responsive
   Style 1: Floating widget | Style 2: Search bar
   ================================================ */

:root {
    /* --- Brand --- */
    --wh-primary: #1A3D6D;
    --wh-primary-light: #2B5EA7;
    --wh-primary-pale: #E8F0FA;

    /* --- Surfaces --- */
    --wh-bg: #FAFCFF;
    --wh-msg-bot: #EDF2FA;
    --wh-msg-user: #1A3D6D;
    --wh-msg-user-text: #ffffff;
    --wh-text: #1A2A3A;
    --wh-text-light: #6B7F99;

    /* --- Typography --- */
    --wh-font-size: 14px;
    --wh-font-family: inherit;

    /* --- Style 1: Widget (Desktop) --- */
    --wh-widget-width: 400px;
    --wh-widget-height: 540px;
    --wh-border-radius: 16px;
    --wh-shadow: 0 8px 40px rgba(26,61,109,.14), 0 1px 3px rgba(26,61,109,.06);

    /* --- Style 1: Widget (Mobile) --- */
    --wh-widget-width-mobile: 100%;
    --wh-widget-height-mobile: 85vh;
    --wh-font-size-mobile: 14px;

    /* --- Style 1: Header --- */
    --wh-header-bg: linear-gradient(135deg, var(--wh-primary) 0%, #0F2847 100%);
    --wh-header-text: #ffffff;
    --wh-header-padding: 14px 16px;

    /* --- Style 1: Toggle Button --- */
    --wh-toggle-size: 60px;
    --wh-toggle-size-mobile: 52px;
    --wh-toggle-icon-size: 28px;

    /* --- Style 1: Input Bar --- */
    --wh-input-border: rgba(26,61,109,.18);
    --wh-input-focus-border: var(--wh-primary);
    --wh-input-radius: 24px;
    --wh-input-padding: 10px 14px;

    /* --- Style 1: Send Button --- */
    --wh-send-size: 40px;
    --wh-send-bg: var(--wh-primary);
    --wh-send-hover-bg: var(--wh-primary-light);

    /* --- Style 1: Quick Action Chips --- */
    --wh-chip-bg: #ffffff;
    --wh-chip-text: var(--wh-text);
    --wh-chip-border: rgba(26,61,109,.15);
    --wh-chip-radius: 20px;
    --wh-chip-padding: 6px 12px;
    --wh-chip-font-size: 12px;
    --wh-chip-hover-bg: var(--wh-primary);
    --wh-chip-hover-text: #ffffff;

    /* --- Style 2: Search Bar (Desktop) --- */
    --wh-searchbar-width: 640px;
    --wh-searchbar-height: 56px;
    --wh-searchbar-radius: 28px;
    --wh-searchbar-font-size: 16px;
    --wh-searchbar-border: rgba(26,61,109,.18);
    --wh-searchbar-shadow: 0 2px 12px rgba(26,61,109,.06);
    --wh-searchbar-focus-shadow: 0 4px 24px rgba(26,61,109,.12);

    /* --- Style 2: Search Bar (Mobile) --- */
    --wh-searchbar-width-mobile: 100%;
    --wh-searchbar-height-mobile: 48px;
    --wh-searchbar-font-size-mobile: 14px;
    --wh-searchbar-radius-mobile: 24px;

    /* --- Style 2: Logo --- */
    --wh-logo-max-height: 60px;
    --wh-logo-max-width: 200px;
    --wh-logo-max-height-mobile: 44px;
    --wh-logo-max-width-mobile: 150px;
    --wh-logo-margin-bottom: 18px;

    /* --- Style 2: Tagline --- */
    --wh-tagline-font-size: 14px;
    --wh-tagline-color: var(--wh-text-light);
    --wh-tagline-margin-bottom: 16px;

    /* --- Style 2: Chat Panel --- */
    --wh-chat-panel-radius: 16px;
    --wh-chat-panel-max-height: 500px;
    --wh-chat-panel-shadow: 0 4px 24px rgba(26,61,109,.08);

    /* --- Style 2: Chips --- */
    --wh-searchbar-chip-bg: var(--wh-primary-pale);
    --wh-searchbar-chip-text: var(--wh-primary);
    --wh-searchbar-chip-border: rgba(26,61,109,.1);
    --wh-searchbar-chip-radius: 20px;
    --wh-searchbar-chip-padding: 7px 16px;
    --wh-searchbar-chip-font-size: 13px;
    --wh-searchbar-chip-hover-bg: var(--wh-primary);
    --wh-searchbar-chip-hover-text: #ffffff;

    /* --- Messages --- */
    --wh-msg-radius: 14px;
    --wh-msg-padding: 10px 14px;
    --wh-msg-max-width: 85%;
}

/* ========== STYLE 1 — Classic Widget ========== */

.wh-chatbot-widget {
    width: var(--wh-widget-width);
    height: var(--wh-widget-height);
    background: var(--wh-bg);
    border-radius: var(--wh-border-radius);
    box-shadow: var(--wh-shadow);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    font-family: var(--wh-font-family);
    font-size: var(--wh-font-size);
    color: var(--wh-text);
    border: 1px solid rgba(26,61,109,.08);
}

/* Header */
.wh-chatbot-header {
    background: var(--wh-header-bg);
    color: var(--wh-header-text);
    padding: var(--wh-header-padding);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}
.wh-chatbot-header-info { display:flex; align-items:center; gap:10px; }
.wh-chatbot-logo { width:42px; height:42px; border-radius:10px; object-fit:contain; background:rgba(255,255,255,.15); padding:4px; flex-shrink:0; }
.wh-chatbot-avatar { font-size:28px; line-height:1; display:flex; align-items:center; }
.wh-chatbot-avatar svg { width:28px; height:28px; }
.wh-chatbot-name { font-weight:700; font-size:calc(var(--wh-font-size) + 1px); display:block; letter-spacing:.3px; }
.wh-chatbot-status { font-size:calc(var(--wh-font-size) - 3px); opacity:.8; display:flex; align-items:center; gap:4px; }
.wh-chatbot-status::before { content:''; width:6px; height:6px; background:#4ade80; border-radius:50%; display:inline-block; animation:wh-pulse 2s ease infinite; }
@keyframes wh-pulse { 0%,100%{opacity:1} 50%{opacity:.4} }
.wh-chatbot-close { background:rgba(255,255,255,.12); border:none; color:#fff; width:32px; height:32px; border-radius:50%; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .2s; flex-shrink:0; padding:0; }
.wh-chatbot-close:hover { background:rgba(255,255,255,.25); }

/* Messages */
.wh-chatbot-messages { flex:1; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:10px; scroll-behavior:smooth; }
.wh-chatbot-messages::-webkit-scrollbar { width:5px; }
.wh-chatbot-messages::-webkit-scrollbar-thumb { background:rgba(26,61,109,.18); border-radius:3px; }
.wh-msg { max-width:var(--wh-msg-max-width); padding:var(--wh-msg-padding); border-radius:var(--wh-msg-radius); line-height:1.55; animation:wh-fadeIn .3s ease; word-wrap:break-word; }
@keyframes wh-fadeIn { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }
.wh-msg-bot { background:var(--wh-msg-bot); color:var(--wh-text); align-self:flex-start; border-bottom-left-radius:4px; }
.wh-msg-user { background:var(--wh-msg-user); color:var(--wh-msg-user-text); align-self:flex-end; border-bottom-right-radius:4px; }

/* Typing */
.wh-typing { display:flex; gap:4px; padding:12px 16px; align-self:flex-start; background:var(--wh-msg-bot); border-radius:var(--wh-msg-radius); border-bottom-left-radius:4px; }
.wh-typing-dot { width:7px; height:7px; background:var(--wh-text-light); border-radius:50%; animation:wh-bounce 1.4s ease infinite; }
.wh-typing-dot:nth-child(2){animation-delay:.15s}.wh-typing-dot:nth-child(3){animation-delay:.3s}
@keyframes wh-bounce { 0%,60%,100%{transform:translateY(0)} 30%{transform:translateY(-6px)} }

/* Quick Actions */
.wh-chatbot-quick-actions { display:flex; gap:6px; padding:8px 12px; overflow-x:auto; flex-shrink:0; scrollbar-width:none; }
.wh-chatbot-quick-actions::-webkit-scrollbar{display:none}
.wh-quick-btn { flex-shrink:0; padding:var(--wh-chip-padding); background:var(--wh-chip-bg); border:1px solid var(--wh-chip-border); border-radius:var(--wh-chip-radius); font-size:var(--wh-chip-font-size); color:var(--wh-chip-text); cursor:pointer; transition:all .2s; font-family:var(--wh-font-family); white-space:nowrap; }
.wh-quick-btn:hover { background:var(--wh-chip-hover-bg); color:var(--wh-chip-hover-text); border-color:var(--wh-chip-hover-bg); transform:translateY(-1px); }

/* Input */
.wh-chatbot-input-area { display:flex; align-items:center; gap:8px; padding:12px; border-top:1px solid rgba(26,61,109,.08); background:#fff; flex-shrink:0; }
.wh-chatbot-input { flex:1; padding:var(--wh-input-padding); border:1px solid var(--wh-input-border); border-radius:var(--wh-input-radius); font-size:var(--wh-font-size); font-family:var(--wh-font-family); color:var(--wh-text); background:var(--wh-bg); outline:none; transition:border-color .2s,box-shadow .2s; }
.wh-chatbot-input:focus { border-color:var(--wh-input-focus-border); box-shadow:0 0 0 3px rgba(26,61,109,.1); }
.wh-chatbot-input::placeholder { color:var(--wh-text-light); }

/* Send button */
.wh-chatbot-send { width:var(--wh-send-size) !important; height:var(--wh-send-size) !important; min-width:var(--wh-send-size) !important; min-height:var(--wh-send-size) !important; max-width:var(--wh-send-size) !important; max-height:var(--wh-send-size) !important; border-radius:50% !important; background:var(--wh-send-bg) !important; border:none !important; color:#fff !important; cursor:pointer; display:flex !important; align-items:center !important; justify-content:center !important; transition:all .2s; flex-shrink:0; box-sizing:border-box !important; padding:0 !important; margin:0 !important; overflow:hidden; line-height:1; }
.wh-chatbot-send svg { width:18px !important; height:18px !important; flex-shrink:0; display:block; }
.wh-chatbot-send:hover { background:var(--wh-send-hover-bg) !important; transform:scale(1.05); }
.wh-chatbot-send:disabled { opacity:.5; cursor:not-allowed; transform:none; }

/* Floating */
.wh-chatbot-floating { position:fixed; bottom:20px; z-index:99999; }
.wh-position-right { right:20px; }
.wh-position-left { left:20px; }
.wh-chatbot-toggle { width:var(--wh-toggle-size); height:var(--wh-toggle-size); border-radius:50%; background:linear-gradient(135deg,var(--wh-primary),var(--wh-primary-light)); border:none; cursor:pointer; box-shadow:0 4px 20px rgba(0,0,0,.25); display:flex; align-items:center; justify-content:center; transition:all .3s cubic-bezier(.4,0,.2,1); overflow:hidden; }
.wh-chatbot-toggle:hover { transform:scale(1.08); box-shadow:0 6px 28px rgba(26,61,109,.45); }
.wh-chatbot-toggle .wh-toggle-icon-open svg { width:var(--wh-toggle-icon-size); height:var(--wh-toggle-icon-size); }
.wh-chatbot-floating-window { position:absolute; bottom:calc(var(--wh-toggle-size) + 12px); }
.wh-position-right .wh-chatbot-floating-window { right:0; }
.wh-position-left .wh-chatbot-floating-window { left:0; }
.wh-chatbot-floating-window[style*="display: flex"] { animation:wh-slideUp .3s cubic-bezier(.4,0,.2,1); }
@keyframes wh-slideUp { from{opacity:0;transform:translateY(16px) scale(.95)} to{opacity:1;transform:translateY(0) scale(1)} }
.wh-chatbot-shortcode-wrapper { display:flex; justify-content:center; padding:16px 0; }

/* ========== STYLE 2 — Search Bar Hero ========== */

.wh-searchbar-wrapper { width:100%; display:flex; flex-direction:column; align-items:center; padding:0 16px; box-sizing:border-box; }
.wh-searchbar { width:var(--wh-searchbar-width); max-width:100%; position:relative; display:flex; flex-direction:column; align-items:var(--wh-logo-align, center); }

.wh-searchbar-logo {
    display:var(--wh-logo-display, block);
    align-self:var(--wh-logo-align, center);
    margin-bottom:var(--wh-logo-margin-bottom);
    max-height:var(--wh-logo-max-height);
    max-width:var(--wh-logo-max-width);
    width:auto; height:auto;
    object-fit:contain;
}
.wh-searchbar-tagline { align-self:var(--wh-logo-align, center); color:var(--wh-tagline-color); font-size:var(--wh-tagline-font-size); margin-bottom:var(--wh-tagline-margin-bottom); font-family:var(--wh-font-family); letter-spacing:.3px; }

.wh-searchbar-field {
    display:flex; align-items:center; gap:8px; width:100%; align-self:stretch;
    height:var(--wh-searchbar-height); max-height:var(--wh-searchbar-height);
    padding:0 8px 0 20px;
    background:#fff;
    border:2px solid var(--wh-searchbar-border);
    border-radius:var(--wh-searchbar-radius);
    box-shadow:var(--wh-searchbar-shadow);
    transition:all .25s ease;
    font-family:var(--wh-font-family);
    overflow:hidden; box-sizing:border-box;
}
.wh-searchbar-field:focus-within { border-color:var(--wh-primary); box-shadow:var(--wh-searchbar-focus-shadow); transform:translateY(-1px); }
.wh-searchbar-icon { flex-shrink:0; color:var(--wh-text-light); display:flex; align-items:center; }
.wh-searchbar-icon svg { width:20px; height:20px; }
.wh-searchbar-input { flex:1; height:100%; border:none; outline:none; font-size:var(--wh-searchbar-font-size); font-family:var(--wh-font-family); color:var(--wh-text); background:transparent; }
.wh-searchbar-input::placeholder { color:var(--wh-text-light); }

.wh-searchbar-send { width:var(--wh-send-size) !important; height:var(--wh-send-size) !important; min-width:var(--wh-send-size) !important; min-height:var(--wh-send-size) !important; max-width:var(--wh-send-size) !important; max-height:var(--wh-send-size) !important; border-radius:50% !important; background:var(--wh-send-bg) !important; border:none !important; color:#fff !important; cursor:pointer; display:flex !important; align-items:center !important; justify-content:center !important; transition:all .2s; flex-shrink:0; box-sizing:border-box !important; padding:0 !important; margin:0 !important; overflow:hidden; line-height:1; }
.wh-searchbar-send svg { width:18px !important; height:18px !important; flex-shrink:0; display:block; }
.wh-searchbar-send:hover { background:var(--wh-send-hover-bg) !important; transform:scale(1.05); }
.wh-searchbar-send:disabled { opacity:.4; cursor:not-allowed; transform:none; }

.wh-searchbar-chips { display:flex; justify-content:center; flex-wrap:wrap; gap:8px; margin-top:14px; align-self:stretch; }
.wh-searchbar-chip { padding:var(--wh-searchbar-chip-padding); background:var(--wh-searchbar-chip-bg); border:1px solid var(--wh-searchbar-chip-border); border-radius:var(--wh-searchbar-chip-radius); font-size:var(--wh-searchbar-chip-font-size); color:var(--wh-searchbar-chip-text); cursor:pointer; transition:all .2s; font-family:var(--wh-font-family); white-space:nowrap; }
.wh-searchbar-chip:hover { background:var(--wh-searchbar-chip-hover-bg); color:var(--wh-searchbar-chip-hover-text); border-color:var(--wh-searchbar-chip-hover-bg); transform:translateY(-1px); }

.wh-searchbar-chat { width:100%; max-width:var(--wh-searchbar-width); margin-top:16px; background:#fff; border-radius:var(--wh-chat-panel-radius); box-shadow:var(--wh-chat-panel-shadow); border:1px solid rgba(26,61,109,.06); overflow:hidden; max-height:0; opacity:0; transition:max-height .4s cubic-bezier(.4,0,.2,1),opacity .3s; }
.wh-searchbar-chat.wh-chat-open { max-height:var(--wh-chat-panel-max-height); opacity:1; }
.wh-searchbar-chat .wh-chatbot-messages { max-height:400px; min-height:80px; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:10px; }
.wh-searchbar-footer { text-align:center; padding:8px; font-size:11px; color:var(--wh-text-light); opacity:.5; border-top:1px solid rgba(26,61,109,.06); }

/* Markdown */
.wh-msg-bot p{margin:0 0 6px 0}.wh-msg-bot p:last-child{margin-bottom:0}.wh-msg-bot strong{font-weight:700}.wh-msg-bot em{font-style:italic}.wh-msg-bot ul,.wh-msg-bot ol{margin:4px 0;padding-left:18px}.wh-msg-bot li{margin-bottom:2px}

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

@media (max-width: 768px) {
    /* Style 1 */
    .wh-chatbot-widget {
        width: var(--wh-widget-width-mobile) !important;
        height: var(--wh-widget-height-mobile) !important;
        max-height: 90vh;
        font-size: var(--wh-font-size-mobile);
    }
    .wh-chatbot-floating-window {
        right: -8px !important;
        left: auto !important;
        bottom: calc(var(--wh-toggle-size-mobile) + 10px);
        width: calc(100vw - 24px) !important;
    }
    .wh-position-left .wh-chatbot-floating-window {
        left: -8px !important;
        right: auto !important;
    }
    .wh-chatbot-toggle {
        width: var(--wh-toggle-size-mobile);
        height: var(--wh-toggle-size-mobile);
    }
    .wh-chatbot-input { font-size: var(--wh-font-size-mobile); }

    /* Style 2 */
    .wh-searchbar {
        width: var(--wh-searchbar-width-mobile) !important;
    }
    .wh-searchbar-field {
        height: var(--wh-searchbar-height-mobile);
        max-height: var(--wh-searchbar-height-mobile);
        border-radius: var(--wh-searchbar-radius-mobile);
    }
    .wh-searchbar-input {
        font-size: var(--wh-searchbar-font-size-mobile);
    }
    .wh-searchbar-logo {
        max-height: var(--wh-logo-max-height-mobile);
        max-width: var(--wh-logo-max-width-mobile);
    }
    .wh-searchbar-chip {
        font-size: calc(var(--wh-searchbar-chip-font-size) - 1px);
        padding: 5px 12px;
    }
}

@media (max-width: 400px) {
    .wh-chatbot-widget {
        border-radius: 12px !important;
    }
    .wh-chatbot-header {
        padding: 10px 12px;
    }
    .wh-chatbot-messages {
        padding: 12px;
    }
}