/* RAG Chatbot — Widget v3 */

#rag-chatbot-widget {
    --rag-primary: #4F46E5; --rag-header-text: #ffffff;
    --rag-bot-bubble: #f1f5f9; --rag-bot-text: #1e293b;
    --rag-user-bubble: #4F46E5; --rag-user-text: #ffffff;
    --rag-bg: #ffffff; --rag-width: 380px; --rag-height: 520px;
    --rag-radius: 16px; --rag-font-size: 15px; --rag-font-family: inherit;
    font-family: var(--rag-font-family); font-size: var(--rag-font-size);
    position: fixed; z-index: 99999; bottom: 24px; line-height: 1.5; box-sizing: border-box;
}
#rag-chatbot-widget *, #rag-chatbot-widget *::before, #rag-chatbot-widget *::after { box-sizing: border-box; }

#rag-chatbot-widget.rag-position-bottom-right { right: 24px; }
#rag-chatbot-widget.rag-position-bottom-left  { left: 24px; }

/* Toggle */
#rag-chatbot-toggle {
    width: 56px; height: 56px; border-radius: 50%; background: var(--rag-primary);
    color: var(--rag-header-text); border: none; cursor: pointer; display: flex;
    align-items: center; justify-content: center; box-shadow: 0 4px 20px rgba(0,0,0,.2);
    transition: transform .2s, box-shadow .2s; position: relative; z-index: 2; padding: 0; outline: none;
}
#rag-chatbot-toggle:hover { transform: translateY(-2px); box-shadow: 0 6px 24px rgba(0,0,0,.28); }
#rag-chatbot-toggle:focus-visible { outline: 3px solid var(--rag-primary); outline-offset: 3px; }
#rag-chatbot-toggle svg { width: 24px; height: 24px; position: absolute; transition: opacity .2s, transform .2s; }
#rag-chatbot-toggle .rag-icon-close { opacity: 0; transform: rotate(-90deg); }
#rag-chatbot-widget.rag-open #rag-chatbot-toggle .rag-icon-open  { opacity: 0; transform: rotate(90deg); }
#rag-chatbot-widget.rag-open #rag-chatbot-toggle .rag-icon-close { opacity: 1; transform: rotate(0deg); }

/* Window */
#rag-chatbot-window {
    position: absolute; bottom: 70px; width: var(--rag-width); height: var(--rag-height);
    max-height: calc(100vh - 100px); background: var(--rag-bg); border-radius: 16px;
    box-shadow: 0 8px 40px rgba(0,0,0,.18); display: flex; flex-direction: column; overflow: hidden;
    opacity: 0; pointer-events: none; transform: translateY(12px) scale(.97); transition: opacity .25s, transform .25s;
}
.rag-position-bottom-right #rag-chatbot-window { right: 0; }
.rag-position-bottom-left  #rag-chatbot-window { left: 0; }
#rag-chatbot-widget.rag-anim-fade #rag-chatbot-window { transform: translateY(0) scale(1); }
#rag-chatbot-widget.rag-anim-pop #rag-chatbot-window { transform: translateY(20px) scale(.88); }
#rag-chatbot-widget.rag-open #rag-chatbot-window { opacity: 1; pointer-events: all; transform: translateY(0) scale(1); }

/* Header */
#rag-chatbot-header {
    background: var(--rag-primary); color: var(--rag-header-text); padding: 14px 16px;
    flex-shrink: 0; display: flex; align-items: center; justify-content: space-between;
}
.rag-header-info { display: flex; align-items: center; gap: 10px; }
.rag-avatar { font-size: 22px; line-height: 1; }
.rag-bot-name { font-weight: 600; }
.rag-status { font-size: .78em; opacity: .8; }
.rag-status::before { content: '● '; color: #4ade80; }
#rag-chatbot-close { background: transparent; border: none; color: var(--rag-header-text); cursor: pointer; padding: 4px; border-radius: 4px; opacity: .7; transition: opacity .15s; display: flex; }
#rag-chatbot-close:hover { opacity: 1; }

/* Messages */
#rag-chatbot-messages {
    flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; scroll-behavior: smooth;
}
#rag-chatbot-messages::-webkit-scrollbar { width: 4px; }
#rag-chatbot-messages::-webkit-scrollbar-thumb { background: rgba(0,0,0,.12); border-radius: 4px; }

/* Bubbles */
.rag-message { display: flex; flex-direction: column; max-width: 85%; animation: ragFadeIn .2s ease; }
.rag-message.bot  { align-self: flex-start; }
.rag-message.user { align-self: flex-end; }
.rag-bubble { padding: 10px 14px; line-height: 1.55; word-break: break-word; }
.rag-message.bot .rag-bubble { background: var(--rag-bot-bubble); color: var(--rag-bot-text); border-radius: var(--rag-radius) var(--rag-radius) var(--rag-radius) 4px; }
.rag-message.user .rag-bubble { background: var(--rag-user-bubble); color: var(--rag-user-text); border-radius: var(--rag-radius) var(--rag-radius) 4px var(--rag-radius); }

/* Markdown in bubbles */
.rag-bubble p { margin: 0 0 8px 0; }
.rag-bubble p:last-child { margin-bottom: 0; }
.rag-bubble strong { font-weight: 600; }
.rag-bubble code { background: rgba(0,0,0,.07); padding: 1px 5px; border-radius: 3px; font-size: .9em; }
.rag-bubble ul, .rag-bubble ol { margin: 4px 0 8px 0; padding-left: 20px; }
.rag-bubble li { margin-bottom: 3px; }
.rag-bubble a { color: var(--rag-primary); text-decoration: underline; }

/* ── SOURCES ── */
.rag-sources {
    margin-top: 6px;
    padding: 8px 12px;
    background: rgba(0,0,0,.03);
    border-radius: 0 0 var(--rag-radius) 4px;
    border-top: 1px solid rgba(0,0,0,.06);
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.rag-sources-label {
    font-size: .78em;
    color: var(--rag-bot-text);
    opacity: .6;
    font-weight: 500;
}
.rag-source-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: .82em;
    color: var(--rag-primary);
    text-decoration: none;
    padding: 3px 8px;
    background: rgba(79, 70, 229, .08);
    border-radius: 6px;
    transition: background .15s;
    word-break: break-word;
    line-height: 1.3;
}
.rag-source-link:hover {
    background: rgba(79, 70, 229, .15);
    text-decoration: underline;
}
.rag-source-link::before {
    content: '→';
    font-size: .85em;
    opacity: .6;
}

/* Typing */
.rag-typing .rag-bubble { display: flex; align-items: center; gap: 5px; padding: 12px 16px; }
.rag-typing .rag-bubble span { width: 7px; height: 7px; border-radius: 50%; background: var(--rag-bot-text); opacity: .4; animation: ragTyping 1s infinite; }
.rag-typing .rag-bubble span:nth-child(2) { animation-delay: .15s; }
.rag-typing .rag-bubble span:nth-child(3) { animation-delay: .3s; }

/* Input */
#rag-chatbot-input-area { display: flex; align-items: flex-end; gap: 8px; padding: 12px; border-top: 1px solid rgba(0,0,0,.08); flex-shrink: 0; background: var(--rag-bg); }
#rag-chatbot-input { flex: 1; border: 1px solid rgba(0,0,0,.15); border-radius: 10px; padding: 9px 12px; font-size: var(--rag-font-size); font-family: var(--rag-font-family); resize: none; max-height: 100px; overflow-y: auto; line-height: 1.45; outline: none; transition: border-color .15s; background: transparent; color: inherit; }
#rag-chatbot-input:focus { border-color: var(--rag-primary); }
#rag-chatbot-input::placeholder { color: rgba(0,0,0,.4); }
#rag-chatbot-send { width: 38px; height: 38px; min-width: 38px; background: var(--rag-primary); color: var(--rag-header-text); border: none; border-radius: 10px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: opacity .15s, transform .15s; flex-shrink: 0; padding: 0; }
#rag-chatbot-send:hover { opacity: .88; }
#rag-chatbot-send:active { transform: scale(.94); }
#rag-chatbot-send:disabled { opacity: .45; cursor: not-allowed; }
#rag-chatbot-send svg { width: 18px; height: 18px; }

/* Footer */
#rag-chatbot-footer { text-align: center; font-size: .7em; padding: 6px 12px; color: rgba(0,0,0,.35); border-top: 1px solid rgba(0,0,0,.04); flex-shrink: 0; }

@keyframes ragFadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@keyframes ragTyping { 0%, 80%, 100% { transform: scale(1); opacity: .4; } 40% { transform: scale(1.4); opacity: 1; } }

/* Mobile */
@media (max-width: 600px) {
    #rag-chatbot-widget { bottom: 16px; }
    #rag-chatbot-widget.rag-position-bottom-right { right: 16px; }
    #rag-chatbot-widget.rag-position-bottom-left  { left: 16px; }
    #rag-chatbot-window { position: fixed; bottom: 0 !important; left: 0 !important; right: 0 !important; width: 100% !important; height: 100% !important; max-height: 100vh; border-radius: 0; }
    #rag-chatbot-widget.rag-open #rag-chatbot-toggle { display: none; }
}