/* Silliman Bot — widget.css */

.sillimanbot-widget {
    --sb-bg:             #ffffff;
    --sb-surface:        #f7f7f8;
    --sb-border:         #e6e6e8;
    --sb-text:           #111827;
    --sb-muted:          #6b7280;
    --sb-brand:          #7a0019;
    --sb-brand-contrast: #ffffff;
    --sb-user-bubble:    #111827;
    --sb-bot-bubble:     #f3f4f6;
    --sb-radius:         14px;
    --sb-shadow:         0 4px 24px rgba(0,0,0,0.13);
    --sb-font:           -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    font-family:         var(--sb-font);
    font-size:           15px;
    line-height:         1.5;
    box-sizing:          border-box;
}

.sillimanbot-widget *,
.sillimanbot-widget *::before,
.sillimanbot-widget *::after {
    box-sizing: inherit;
}

/* ── FAB (Floating Action Button) ─────────────────────────────────────── */

.sb-fab {
    position:        fixed;
    bottom:          24px;
    right:           24px;
    width:           56px;
    height:          56px;
    border-radius:   50%;
    background:      var(--sb-brand);
    color:           var(--sb-brand-contrast);
    border:          none;
    cursor:          pointer;
    display:         flex;
    align-items:     center;
    justify-content: center;
    box-shadow:      var(--sb-shadow);
    z-index:         99998;
    transition:      transform 0.18s ease, box-shadow 0.18s ease;
    outline:         none;
}

.sb-fab.sb-pos-bl {
    right: auto;
    left:  24px;
}

.sb-fab:hover {
    transform:  scale(1.05);
    box-shadow: 0 6px 28px rgba(0,0,0,0.20);
}

.sb-fab:focus-visible {
    outline: 3px solid var(--sb-brand);
    outline-offset: 3px;
}

.sb-fab svg {
    width:  26px;
    height: 26px;
    fill:   currentColor;
}

.sb-fab-badge {
    position:         absolute;
    top:              6px;
    right:            6px;
    width:            10px;
    height:           10px;
    border-radius:    50%;
    background:       #ef4444;
    border:           2px solid #fff;
    display:          none;
}

.sb-fab-badge.sb-visible {
    display: block;
}

/* ── Chat Panel ───────────────────────────────────────────────────────── */

.sb-panel {
    position:      fixed;
    bottom:        92px;
    right:         24px;
    width:         380px;
    max-width:     calc(100vw - 32px);
    height:        580px;
    max-height:    calc(100vh - 110px);
    background:    var(--sb-bg);
    border:        1px solid var(--sb-border);
    border-radius: var(--sb-radius);
    box-shadow:    var(--sb-shadow);
    display:       flex;
    flex-direction: column;
    z-index:       99999;
    overflow:      hidden;
    transform:     translateY(16px) scale(0.97);
    opacity:       0;
    pointer-events: none;
    transition:    transform 0.22s ease, opacity 0.22s ease;
}

.sb-panel.sb-pos-bl {
    right: auto;
    left:  24px;
}

.sb-panel.sb-open {
    transform:     translateY(0) scale(1);
    opacity:       1;
    pointer-events: all;
}

/* ── Header ───────────────────────────────────────────────────────────── */

.sb-header {
    display:         flex;
    align-items:     center;
    gap:             10px;
    padding:         14px 16px;
    background:      var(--sb-brand);
    color:           var(--sb-brand-contrast);
    flex-shrink:     0;
}

.sb-header-icon {
    width:           36px;
    height:          36px;
    border-radius:   50%;
    background:      rgba(255,255,255,0.18);
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-size:       18px;
    flex-shrink:     0;
}

.sb-header-title {
    flex:        1;
    font-size:   16px;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.sb-header-subtitle {
    font-size:  11px;
    opacity:    0.78;
    margin-top: 1px;
}

.sb-header-actions {
    display:    flex;
    gap:        4px;
    flex-shrink: 0;
}

.sb-icon-btn {
    background:      transparent;
    border:          none;
    color:           var(--sb-brand-contrast);
    cursor:          pointer;
    width:           32px;
    height:          32px;
    border-radius:   8px;
    display:         flex;
    align-items:     center;
    justify-content: center;
    opacity:         0.85;
    transition:      opacity 0.15s, background 0.15s;
}

.sb-icon-btn:hover {
    opacity:    1;
    background: rgba(255,255,255,0.15);
}

.sb-icon-btn svg {
    width:  18px;
    height: 18px;
    fill:   currentColor;
}

/* ── Messages ─────────────────────────────────────────────────────────── */

.sb-messages {
    flex:       1;
    overflow-y: auto;
    padding:    16px 14px;
    display:    flex;
    flex-direction: column;
    gap:        10px;
    scroll-behavior: smooth;
}

.sb-messages::-webkit-scrollbar {
    width: 4px;
}
.sb-messages::-webkit-scrollbar-track {
    background: transparent;
}
.sb-messages::-webkit-scrollbar-thumb {
    background:    var(--sb-border);
    border-radius: 4px;
}

/* ── Bubbles ──────────────────────────────────────────────────────────── */

.sb-msg {
    display:        flex;
    flex-direction: column;
    max-width:      85%;
    animation:      sb-fade-in 0.2s ease;
}

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

.sb-msg.sb-bot {
    align-self:     flex-start;
    align-items:    flex-start;
}

.sb-msg.sb-user {
    align-self:     flex-end;
    align-items:    flex-end;
}

.sb-bubble {
    padding:       10px 14px;
    border-radius: 14px;
    font-size:     14px;
    line-height:   1.5;
    word-break:    break-word;
}

.sb-msg.sb-bot .sb-bubble {
    background:           var(--sb-bot-bubble);
    color:                var(--sb-text);
    border-bottom-left-radius: 4px;
}

.sb-msg.sb-user .sb-bubble {
    background:            var(--sb-user-bubble);
    color:                 #ffffff;
    border-bottom-right-radius: 4px;
}

.sb-bubble a {
    color:           var(--sb-brand);
    text-decoration: underline;
    word-break:      break-all;
}

.sb-msg.sb-user .sb-bubble a {
    color: #93c5fd;
}

.sb-bubble a:hover {
    opacity: 0.82;
}

.sb-bubble p {
    margin: 0 0 8px 0;
}

.sb-bubble p:last-child {
    margin-bottom: 0;
}

.sb-bubble ul,
.sb-bubble ol {
    margin:      6px 0 8px 0;
    padding-left: 20px;
}

.sb-bubble ul {
    list-style-type: disc;
}

.sb-bubble ol {
    list-style-type: decimal;
}

.sb-bubble li {
    margin-bottom: 4px;
    line-height:   1.5;
}

.sb-bubble li:last-child {
    margin-bottom: 0;
}

.sb-bubble strong {
    font-weight: 700;
}

.sb-bubble em {
    font-style: italic;
}

.sb-bubble code {
    font-family:      monospace;
    font-size:        12px;
    background:       rgba(0,0,0,0.07);
    border-radius:    4px;
    padding:          1px 5px;
}

.sb-bubble h2,
.sb-bubble h3,
.sb-bubble h4 {
    font-weight:  700;
    margin:       10px 0 4px 0;
    line-height:  1.3;
}

.sb-bubble h2 { font-size: 15px; }
.sb-bubble h3 { font-size: 14px; }
.sb-bubble h4 { font-size: 13px; }

/* ── Sources ──────────────────────────────────────────────────────────── */

.sb-sources {
    margin-top: 6px;
    font-size:  12px;
}

.sb-sources-toggle {
    background:  none;
    border:      none;
    color:       var(--sb-muted);
    cursor:      pointer;
    font-size:   12px;
    padding:     0;
    text-decoration: underline;
    font-family: var(--sb-font);
}

.sb-sources-toggle:hover {
    color: var(--sb-brand);
}

.sb-sources-list {
    margin-top:  4px;
    padding:     8px 10px;
    background:  var(--sb-surface);
    border:      1px solid var(--sb-border);
    border-radius: 8px;
    display:     none;
    flex-direction: column;
    gap:         4px;
}

.sb-sources-list.sb-open {
    display: flex;
}

.sb-sources-list a {
    color:           var(--sb-brand);
    font-size:       12px;
    text-decoration: none;
    word-break:      break-all;
}

.sb-sources-list a:hover {
    text-decoration: underline;
}

/* ── Typing Indicator ─────────────────────────────────────────────────── */

.sb-typing {
    display:    flex;
    align-items: center;
    gap:        5px;
    padding:    10px 14px;
    background: var(--sb-bot-bubble);
    border-radius: 14px;
    border-bottom-left-radius: 4px;
    align-self: flex-start;
    animation:  sb-fade-in 0.2s ease;
}

.sb-typing span {
    width:         7px;
    height:        7px;
    border-radius: 50%;
    background:    var(--sb-muted);
    animation:     sb-bounce 1.2s infinite;
}

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

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

/* ── Quick Prompts ────────────────────────────────────────────────────── */

.sb-quick-prompts {
    display:    flex;
    flex-wrap:  wrap;
    gap:        6px;
    padding:    0 14px 10px;
}

.sb-quick-btn {
    background:    var(--sb-surface);
    border:        1px solid var(--sb-border);
    border-radius: 20px;
    padding:       5px 12px;
    font-size:     12px;
    color:         var(--sb-text);
    cursor:        pointer;
    font-family:   var(--sb-font);
    transition:    background 0.15s, border-color 0.15s;
}

.sb-quick-btn:hover {
    background:    var(--sb-brand);
    border-color:  var(--sb-brand);
    color:         var(--sb-brand-contrast);
}

/* ── Composer ─────────────────────────────────────────────────────────── */

.sb-composer {
    display:      flex;
    align-items:  flex-end;
    gap:          8px;
    padding:      10px 12px;
    border-top:   1px solid var(--sb-border);
    background:   var(--sb-bg);
    flex-shrink:  0;
}

.sb-input {
    flex:          1;
    border:        1px solid var(--sb-border);
    border-radius: 10px;
    padding:       9px 12px;
    font-size:     14px;
    font-family:   var(--sb-font);
    color:         var(--sb-text);
    background:    var(--sb-surface);
    resize:        none;
    outline:       none;
    min-height:    40px;
    max-height:    120px;
    line-height:   1.4;
    transition:    border-color 0.15s;
}

.sb-input:focus {
    border-color: var(--sb-brand);
}

.sb-input::placeholder {
    color: var(--sb-muted);
}

.sb-send-btn {
    width:           40px;
    height:          40px;
    border-radius:   10px;
    background:      var(--sb-brand);
    color:           var(--sb-brand-contrast);
    border:          none;
    cursor:          pointer;
    display:         flex;
    align-items:     center;
    justify-content: center;
    flex-shrink:     0;
    transition:      opacity 0.15s, transform 0.12s;
}

.sb-send-btn:hover:not(:disabled) {
    opacity:   0.88;
    transform: scale(1.04);
}

.sb-send-btn:disabled {
    opacity: 0.45;
    cursor:  not-allowed;
}

.sb-send-btn svg {
    width:  18px;
    height: 18px;
    fill:   currentColor;
}

/* ── Mobile ───────────────────────────────────────────────────────────── */

@media (max-width: 480px) {
    .sb-panel {
        bottom:        0;
        right:         0;
        left:          0;
        width:         100%;
        max-width:     100%;
        height:        70vh;
        border-radius: var(--sb-radius) var(--sb-radius) 0 0;
    }

    .sb-panel.sb-pos-bl {
        left: 0;
    }

    .sb-fab {
        bottom: 16px;
        right:  16px;
    }

    .sb-fab.sb-pos-bl {
        right: auto;
        left:  16px;
    }
}