/* ============================================================
   BU Chatbot — Floating Chat Widget Styles
   All classes prefixed with "buchat-" to avoid conflicts.
   ============================================================ */

/* ── Wrapper ──────────────────────────────────────────── */
#buchat-wrap {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 999999;
    /* "Hind Siliguri" is a Latin+Bengali paired typeface (loaded via
       buchat-bengali-font in bu-chatbot.php) so both scripts render with one
       consistent font instead of Bengali silently falling back to whatever
       the visitor's OS happens to ship. Native Bengali system fonts stay as
       fallbacks in case the web font fails to load. */
    font-family: "Hind Siliguri", "Noto Sans Bengali", "Nirmala UI", "Vrinda",
                 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
                 Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
    font-size: 14px;
    /* Bengali conjuncts and vowel signs (matras) need more vertical room than
       Latin text — 1.5 crowds/clips them, especially at the smaller sizes
       used throughout this widget. */
    line-height: 1.7;
}

/* ── Floating Bubble Button ───────────────────────────── */
#buchat-bubble {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    border: none;
    background: #B2040E;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    position: relative;
}

#buchat-bubble:hover {
    transform: scale(1.08);
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.3);
}

#buchat-bubble:active {
    transform: scale(0.96);
}

/* pulse ring on initial load */
#buchat-bubble::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 3px solid #B2040E;
    animation: buchat-pulse 2s ease-out 3;
}

@keyframes buchat-pulse {
    0%   { transform: scale(1);   opacity: 0.7; }
    100% { transform: scale(1.6); opacity: 0; }
}

/* ── Hover Tooltip ────────────────────────────────────── */
.buchat-tooltip {
    position: absolute;
    bottom: 72px;
    right: 0;
    width: 220px;
    background: #111;
    border-top: 3px solid #B2040E;
    border-radius: 10px;
    padding: 12px 15px 11px;
    pointer-events: none;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.22s ease, transform 0.22s ease;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
    text-align: left;
}

/* Down-right arrow */
.buchat-tooltip::after {
    content: "";
    position: absolute;
    bottom: -8px;
    right: 19px;
    border-width: 8px 7px 0;
    border-style: solid;
    border-color: #111 transparent transparent;
}

.buchat-tip-en {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: #B2040E;
    letter-spacing: 0.2px;
    margin-bottom: 6px;
}

.buchat-tip-bn {
    display: block;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.80);
    line-height: 1.55;
}

#buchat-bubble:hover + .buchat-tooltip {
    opacity: 1;
    transform: translateY(0);
}

#buchat-wrap.buchat-is-open .buchat-tooltip {
    display: none;
}

/* ── Chat Panel ───────────────────────────────────────── */
#buchat-panel {
    position: absolute;
    bottom: 72px;
    right: 0;
    width: 380px;
    max-height: 540px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: opacity 0.25s ease, transform 0.25s ease;
    transform-origin: bottom right;
}

#buchat-panel.buchat-hidden {
    opacity: 0;
    transform: scale(0.9) translateY(12px);
    pointer-events: none;
    visibility: hidden;
}

/* ── Header ───────────────────────────────────────────── */
#buchat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    background: #B2040E;
    color: #fff;
    flex-shrink: 0;
}

.buchat-header-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

.buchat-header-avatar {
    font-size: 28px;
    line-height: 1;
}

.buchat-header-info strong {
    display: block;
    font-size: 15px;
}

.buchat-header-info small {
    opacity: 0.85;
    font-size: 12px;
}

.buchat-header-actions {
    display: flex;
    align-items: center;
    gap: 4px;
}

#buchat-minimize,
#buchat-close {
    background: none;
    border: none;
    color: #fff;
    cursor: pointer;
    width: 30px;
    height: 30px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.8;
    transition: opacity 0.15s, background 0.15s;
}

#buchat-minimize:hover,
#buchat-close:hover {
    opacity: 1;
    background: rgba(255, 255, 255, 0.15);
}

#buchat-close:hover {
    background: rgba(255, 255, 255, 0.25);
}

/* ── Messages Area ────────────────────────────────────── */
#buchat-messages {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: #f9f9fb;
}

/* Scrollbar */
#buchat-messages::-webkit-scrollbar {
    width: 5px;
}
#buchat-messages::-webkit-scrollbar-track {
    background: transparent;
}
#buchat-messages::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 4px;
}

/* ── Message Bubbles ──────────────────────────────────── */
.buchat-msg {
    max-width: 85%;
    padding: 10px 14px;
    border-radius: 14px;
    word-wrap: break-word;
    animation: buchat-fade-in 0.25s ease;
}

@keyframes buchat-fade-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Bot bubble — left */
.buchat-msg.buchat-bot {
    align-self: flex-start;
    background: #fff;
    color: #333;
    border: 1px solid #e8e8e8;
    border-bottom-left-radius: 4px;
}

/* ── Bot message typography ──────────────────────────── */
.buchat-msg.buchat-bot p {
    margin: 0 0 10px;
    line-height: 1.7;
}
.buchat-msg.buchat-bot p:last-child {
    margin-bottom: 0;
}

/* Section headings (bold paragraphs used as labels) */
.buchat-msg.buchat-bot p > strong:only-child {
    display: block;
    font-size: 13.5px;
    color: #B2040E;
    margin-top: 4px;
    padding-bottom: 3px;
    border-bottom: 1px solid #f0e0e0;
}

.buchat-msg.buchat-bot ul {
    margin: 6px 0 10px 4px;
    padding: 0 0 0 16px;
    list-style: none;
}
.buchat-msg.buchat-bot ul:last-child {
    margin-bottom: 0;
}

.buchat-msg.buchat-bot li {
    margin-bottom: 6px;
    padding: 4px 0;
    line-height: 1.7;
    position: relative;
    padding-left: 14px;
}
.buchat-msg.buchat-bot li::before {
    content: "\2022";
    color: #B2040E;
    font-weight: bold;
    font-size: 14px;
    position: absolute;
    left: 0;
    top: 4px;
}
.buchat-msg.buchat-bot li:last-child {
    margin-bottom: 0;
}

/* Key-value inside list items */
.buchat-msg.buchat-bot li strong {
    color: #333;
    margin-right: 3px;
}

.buchat-msg.buchat-bot a {
    color: #B2040E;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.buchat-msg.buchat-bot a:hover {
    color: #8e0310;
}

.buchat-msg.buchat-bot strong {
    color: #222;
}

.buchat-msg.buchat-bot small {
    color: #777;
}

.buchat-msg.buchat-bot br + br {
    display: block;
    content: "";
    margin-top: 6px;
}

/* User bubble — right */
.buchat-msg.buchat-user {
    align-self: flex-end;
    background: #B2040E;
    color: #fff;
    border-bottom-right-radius: 4px;
}

/* Brief highlight when the pre-processor rewrites a user bubble in place.
   The class is added on AJAX success and removed ~1.5s later. */
.buchat-msg.buchat-user.buchat-corrected {
    animation: buchat-correct-flash 1.5s ease-out;
    box-shadow: 0 0 0 2px #ffd54f, 0 0 12px rgba(255, 213, 79, 0.6);
}
@keyframes buchat-correct-flash {
    0%   { background: #ffd54f; color: #222; }
    40%  { background: #ffd54f; color: #222; }
    100% { background: #B2040E; color: #fff; }
}

/* ── Typing Indicator ─────────────────────────────────── */
.buchat-typing {
    align-self: flex-start;
    display: flex;
    gap: 5px;
    padding: 12px 18px;
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 14px;
    border-bottom-left-radius: 4px;
}

.buchat-typing span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #aaa;
    animation: buchat-bounce 1.4s infinite ease-in-out both;
}

.buchat-typing span:nth-child(1) { animation-delay: 0s; }
.buchat-typing span:nth-child(2) { animation-delay: 0.2s; }
.buchat-typing span:nth-child(3) { animation-delay: 0.4s; }

@keyframes buchat-bounce {
    0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
    40%           { transform: scale(1);   opacity: 1; }
}

/* ── Suggestion Chips ─────────────────────────────────── */
#buchat-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px 16px;
    background: #f9f9fb;
    border-top: 1px solid #eee;
    flex-shrink: 0;
}

.buchat-chip {
    background: #fff;
    border: 1px solid #d0d0d0;
    border-radius: 20px;
    padding: 5px 14px;
    font-size: 12px;
    color: #444;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.15s ease;
}

.buchat-chip:hover {
    background: #B2040E;
    color: #fff;
    border-color: #B2040E;
}

/* ── Input Area ───────────────────────────────────────── */
#buchat-form {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    border-top: 1px solid #e8e8e8;
    background: #fff;
    flex-shrink: 0;
    gap: 8px;
}

#buchat-input {
    flex: 1 1 0;
    min-width: 0;          /* critical — stops the input's implicit min-width from pushing siblings out */
    border: 1px solid #ddd;
    border-radius: 24px;
    padding: 9px 16px;
    font-size: 14px;
    outline: none;
    transition: border-color 0.2s;
    font-family: inherit;
}

#buchat-input:focus {
    border-color: #B2040E;
}

#buchat-send {
    width: 38px;
    height: 38px;
    border: none;
    border-radius: 50%;
    background: #B2040E;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.15s;
}

#buchat-send:hover {
    background: #8e0310;
}

/* ── Bot message links (program detail pages) ─────────── */
.buchat-msg.buchat-bot a {
    color: #B2040E;
    text-decoration: underline;
    word-break: break-word;
}
.buchat-msg.buchat-bot a:hover {
    color: #8e0310;
}

/* ── Voice Language Toggle ────────────────────────────── */
#buchat-lang {
    min-width: 40px;
    height: 38px;
    padding: 0 10px;
    border: 1px solid #d9d9d9;
    border-radius: 19px;
    background: #f0f0f0;
    color: #444;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.3px;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

#buchat-lang:hover {
    background: #e0e0e0;
    color: #111;
}

#buchat-lang.is-bn {
    background: #fff4f5;
    color: #B2040E;
    border-color: #f2c3c6;
}

#buchat-lang:focus-visible {
    outline: 2px solid #B2040E;
    outline-offset: 2px;
}

/* ── Mic Button ───────────────────────────────────────── */
#buchat-mic {
    width: 38px;
    height: 38px;
    border: none;
    border-radius: 50%;
    background: #f0f0f0;
    color: #555;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}

#buchat-mic:hover {
    background: #e0e0e0;
    color: #222;
}

/* Recording state — pulsing red ring */
#buchat-mic.recording {
    background: #B2040E;
    color: #fff;
    animation: buchat-mic-pulse 1s ease-in-out infinite;
}

@keyframes buchat-mic-pulse {
    0%, 100% { box-shadow: 0 0 0 0   rgba(178, 4, 14, 0.55); }
    50%       { box-shadow: 0 0 0 8px rgba(178, 4, 14, 0);    }
}

/* ── Mobile Responsive ────────────────────────────────── */
@media (max-width: 768px) {
    #buchat-wrap {
        bottom: 16px;
        right: 16px;
        left: auto;
        overflow: visible;
    }

    /* Full-screen panel on mobile */
    #buchat-panel {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        max-width: 100vw !important;
        height: 100% !important;
        max-height: 100% !important;
        border-radius: 0 !important;
        transform: none !important;
        overflow-x: hidden !important;
    }

    /* Messages area fills all remaining space */
    #buchat-messages {
        flex: 1 1 auto;
        max-height: none;
        min-height: 0;
        overflow-x: hidden;
    }

    #buchat-bubble {
        width: 52px;
        height: 52px;
    }

    #buchat-form {
        padding: 10px;
        gap: 6px;
    }

    #buchat-input {
        padding: 9px 14px;
        font-size: 16px;
    }

    #buchat-lang {
        min-width: 36px;
        height: 36px;
        padding: 0 8px;
        font-size: 14px;
    }

    #buchat-mic,
    #buchat-send {
        width: 36px;
        height: 36px;
    }

    .buchat-chip {
        font-size: 13px;
        padding: 5px 11px;
    }

    .buchat-msg {
        font-size: 15px;
    }

    /* Mic toast — full width, clean 2-line layout */
    #buchat-mic-toast {
        left: 8px !important;
        right: 8px !important;
        font-size: 12px !important;
        line-height: 1.5 !important;
        bottom: 64px !important;
    }
}

/* ── Email Wall (mid-conversation, after 2nd Q&A) ─────── */
#buchat-email-wall {
    border-top: 2px solid #B2040E;
    background: #fff8f8;
    padding: 16px;
    flex-shrink: 0;
    overflow-y: auto;
    max-height: 340px;
}

#buchat-email-wall.buchat-hidden { display: none; }

.buchat-email-wall-inner {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.buchat-email-wall-msg {
    font-size: 13px;
    line-height: 1.6;
    color: #222;
    margin: 0;
    background: #fff;
    border-left: 3px solid #B2040E;
    padding: 10px 12px;
    border-radius: 0 6px 6px 0;
}

#buchat-email-wall-form {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#buchat-email-wall-input {
    width: 100%;
    padding: 9px 13px;
    border: 1.5px solid #d0d0d0;
    border-radius: 7px;
    font-size: 14px;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.2s;
}

#buchat-email-wall-input:focus { border-color: #B2040E; }

#buchat-email-wall-submit {
    width: 100%;
    padding: 10px;
    background: #B2040E;
    color: #fff;
    border: none;
    border-radius: 7px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}

#buchat-email-wall-submit:hover { background: #8e0310; }

.buchat-email-err {
    margin: 0;
    font-size: 12px;
    color: #B2040E;
}

.buchat-email-err.buchat-hidden { display: none; }