/* RAG Chatbot – Frontend Styles */

.rag-chatbot-widget {
    --rag-primary:   #2563eb;
    --rag-bg:        #ffffff;
    --rag-user-bg:   #2563eb;
    --rag-user-fg:   #ffffff;
    --rag-bot-bg:    #f1f5f9;
    --rag-bot-fg:    #1e293b;
    --rag-border:    #e2e8f0;
    --rag-header-bg: #1e3a8a;
    --rag-header-fg: #ffffff;
    --rag-radius:    16px;
    --rag-height:    480px;

    display:        flex;
    flex-direction: column;
    width:          100%;
    max-width:      680px;
    height:         var(--rag-height);
    border:         1px solid var(--rag-border);
    border-radius:  var(--rag-radius);
    overflow:       hidden;
    box-shadow:     0 4px 24px rgba(0,0,0,.08);
    background:     var(--rag-bg);
    font-family:    -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size:      15px;
    line-height:    1.6;
    margin:         0 auto 2em;
}

/* ---- Header ---- */
.rag-chat-header {
    display:         flex;
    align-items:     center;
    gap:             8px;
    padding:         14px 18px;
    background:      var(--rag-header-bg);
    color:           var(--rag-header-fg);
    flex-shrink:     0;
}

.rag-chat-icon  { font-size: 20px; }
.rag-chat-title { font-weight: 600; flex: 1; }

.rag-chat-status {
    width:         10px;
    height:        10px;
    border-radius: 50%;
    background:    #4ade80;
    flex-shrink:   0;
    transition:    background .3s;
}

.rag-chat-status.rag-status-busy { background: #fbbf24; animation: rag-pulse 1s infinite; }

@keyframes rag-pulse { 0%,100%{opacity:1} 50%{opacity:.4} }

/* ---- Messages area ---- */
.rag-chat-messages {
    flex:       1;
    overflow-y: auto;
    padding:    16px;
    display:    flex;
    flex-direction: column;
    gap:        10px;
    scroll-behavior: smooth;
}

.rag-chat-messages::-webkit-scrollbar       { width: 4px; }
.rag-chat-messages::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }

/* ---- Message bubbles ---- */
.rag-message {
    display:   flex;
    max-width: 80%;
}

.rag-message.rag-user      { align-self: flex-end; }
.rag-message.rag-assistant { align-self: flex-start; }

.rag-bubble {
    padding:       10px 14px;
    border-radius: 14px;
    word-break:    break-word;
}

.rag-user .rag-bubble {
    background:    var(--rag-user-bg);
    color:         var(--rag-user-fg);
    border-bottom-right-radius: 4px;
}

.rag-assistant .rag-bubble {
    background:    var(--rag-bot-bg);
    color:         var(--rag-bot-fg);
    border-bottom-left-radius: 4px;
}

/* Formatting inside assistant bubbles */
.rag-assistant .rag-bubble p  { margin: 0 0 8px; }
.rag-assistant .rag-bubble p:last-child { margin-bottom: 0; }
.rag-assistant .rag-bubble ul,
.rag-assistant .rag-bubble ol { margin: 4px 0 8px 18px; padding: 0; }
.rag-assistant .rag-bubble li { margin-bottom: 3px; }
.rag-assistant .rag-bubble code {
    background:    #e2e8f0;
    border-radius: 4px;
    padding:       1px 5px;
    font-size:     13px;
    font-family:   "Fira Code", monospace;
}
.rag-assistant .rag-bubble strong { font-weight: 700; }

.rag-error { color: #dc2626; }

/* ---- Typing indicator ---- */
.rag-typing { display: inline-flex; gap: 4px; align-items: center; height: 18px; }
.rag-typing span {
    width:         7px;
    height:        7px;
    border-radius: 50%;
    background:    #94a3b8;
    animation:     rag-bounce 1.2s infinite;
}
.rag-typing span:nth-child(2) { animation-delay: .2s; }
.rag-typing span:nth-child(3) { animation-delay: .4s; }

@keyframes rag-bounce { 0%,60%,100%{transform:translateY(0)} 30%{transform:translateY(-5px)} }

/* ---- Input area ---- */
.rag-chat-input-area {
    display:     flex;
    align-items: flex-end;
    gap:         8px;
    padding:     10px 12px;
    border-top:  1px solid var(--rag-border);
    background:  var(--rag-bg);
    flex-shrink: 0;
}

.rag-input {
    flex:        1;
    resize:      none;
    border:      1px solid var(--rag-border);
    border-radius: 10px;
    padding:     8px 12px;
    font-size:   14px;
    line-height: 1.5;
    min-height:  40px;
    max-height:  120px;
    overflow-y:  auto;
    outline:     none;
    font-family: inherit;
    background:  #f8fafc;
    color:       var(--rag-bot-fg);
    transition:  border-color .2s;
}

.rag-input:focus { border-color: var(--rag-primary); background: #fff; }

.rag-send-btn {
    flex-shrink:   0;
    width:         40px;
    height:        40px;
    border-radius: 10px;
    border:        none;
    background:    var(--rag-primary);
    color:         #fff;
    cursor:        pointer;
    display:       flex;
    align-items:   center;
    justify-content: center;
    transition:    background .2s, opacity .2s;
    padding:       0;
}

.rag-send-btn svg      { width: 18px; height: 18px; }
.rag-send-btn:hover    { background: #1d4ed8; }
.rag-send-btn:disabled { opacity: .5; cursor: default; }

/* ---- Responsive ---- */
@media (max-width: 480px) {
    .rag-chatbot-widget { border-radius: 10px; font-size: 14px; }
    .rag-message        { max-width: 92%; }
}