/*
 * SmartChat Widget Styles
 * All rules scoped to #smartchat-root to avoid theme conflicts.
 * CSS custom properties are injected by the JS init() from SmartChatConfig.
 */

#smartchat-root {
    --sc-primary:     #4F46E5;
    --sc-bubble-bg:   #FFFFFF;
    --sc-text:        #111827;
    --sc-text-light:  #6B7280;
    --sc-border:      #E5E7EB;
    --sc-bg:          #F9FAFB;
    --sc-user-bubble: #EEF2FF;
    --sc-bot-bubble:  #FFFFFF;
    --sc-shadow:      0 4px 24px rgba(0,0,0,.14);
    --sc-radius:      12px;
    --sc-font:        -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-family:      var(--sc-font);
    position:         fixed;
    bottom:           24px;
    right:            24px;
    z-index:          999999;
}

/* ── Floating bubble button ─────────────────────────────────────────── */

#smartchat-bubble {
    display:          flex;
    align-items:      center;
    justify-content:  center;
    width:            56px;
    height:           56px;
    border-radius:    50%;
    background:       var(--sc-primary);
    color:            #fff;
    border:           none;
    cursor:           pointer;
    box-shadow:       var(--sc-shadow);
    transition:       transform 0.2s, box-shadow 0.2s;
    outline-offset:   3px;
}

#smartchat-bubble:hover {
    transform:    scale(1.08);
    box-shadow:   0 6px 28px rgba(0,0,0,.2);
}

#smartchat-bubble.sc-active {
    background:   #374151;
}

/* ── Chat panel ─────────────────────────────────────────────────────── */

#smartchat-panel {
    display:          flex;
    flex-direction:   column;
    position:         absolute;
    bottom:           68px;
    right:            0;
    width:            340px;
    max-height:       520px;
    background:       var(--sc-bubble-bg);
    border-radius:    var(--sc-radius);
    box-shadow:       var(--sc-shadow);
    border:           1px solid var(--sc-border);
    overflow:         hidden;

    /* hidden by default */
    opacity:          0;
    pointer-events:   none;
    transform:        translateY(8px);
    transition:       opacity 0.2s, transform 0.2s;
}

#smartchat-panel.sc-open {
    opacity:        1;
    pointer-events: auto;
    transform:      translateY(0);
}

@media (max-width: 400px) {
    #smartchat-panel {
        width:        calc(100vw - 32px);
        right:        -8px;
        bottom:       72px;
        max-height:   70vh;
    }
}

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

#smartchat-header {
    display:          flex;
    align-items:      center;
    justify-content:  space-between;
    padding:          12px 16px;
    background:       var(--sc-primary);
    color:            #fff;
    flex-shrink:      0;
}

#smartchat-header .sc-title {
    font-size:    15px;
    font-weight:  600;
    letter-spacing: .01em;
}

#smartchat-header .sc-close {
    background:   transparent;
    border:       none;
    color:        rgba(255,255,255,.8);
    cursor:       pointer;
    font-size:    22px;
    line-height:  1;
    padding:      0 2px;
    transition:   color 0.15s;
}

#smartchat-header .sc-close:hover {
    color: #fff;
}

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

#smartchat-messages {
    flex:           1;
    overflow-y:     auto;
    padding:        12px 14px;
    display:        flex;
    flex-direction: column;
    gap:            10px;
    background:     var(--sc-bg);
    scroll-behavior: smooth;
}

#smartchat-messages::-webkit-scrollbar { width: 4px; }
#smartchat-messages::-webkit-scrollbar-thumb { background: var(--sc-border); border-radius: 2px; }

/* ── Message bubbles ────────────────────────────────────────────────── */

.sc-message {
    display:    flex;
    max-width:  88%;
}

.sc-message--user {
    align-self: flex-end;
}

.sc-message--assistant {
    align-self: flex-start;
}

.sc-message-content {
    padding:        8px 12px;
    border-radius:  10px;
    font-size:      14px;
    line-height:    1.5;
    color:          var(--sc-text);
    word-break:     break-word;
}

.sc-message--user .sc-message-content {
    background:       var(--sc-primary);
    color:            #fff;
    border-bottom-right-radius: 3px;
}

.sc-message--assistant .sc-message-content {
    background:       var(--sc-bot-bubble);
    border:           1px solid var(--sc-border);
    border-bottom-left-radius: 3px;
}

/* ── Typing indicator ───────────────────────────────────────────────── */

.sc-typing-indicator {
    display:          none;
    align-items:      center;
    gap:              4px;
    padding:          6px 14px 2px;
    background:       var(--sc-bg);
}

.sc-typing-indicator.sc-visible {
    display: flex;
}

.sc-typing-indicator span {
    width:            8px;
    height:           8px;
    border-radius:    50%;
    background:       var(--sc-text-light);
    animation:        sc-bounce 1.2s infinite ease-in-out;
}

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

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

/* ── Input form ─────────────────────────────────────────────────────── */

#smartchat-form {
    display:        flex;
    align-items:    flex-end;
    gap:            8px;
    padding:        10px 12px;
    border-top:     1px solid var(--sc-border);
    background:     var(--sc-bubble-bg);
    flex-shrink:    0;
}

#smartchat-input {
    flex:           1;
    border:         1px solid var(--sc-border);
    border-radius:  8px;
    padding:        8px 10px;
    font-size:      14px;
    font-family:    var(--sc-font);
    color:          var(--sc-text);
    background:     var(--sc-bg);
    resize:         none;
    min-height:     36px;
    max-height:     120px;
    line-height:    1.4;
    outline:        none;
    transition:     border-color 0.15s;
}

#smartchat-input:focus {
    border-color: var(--sc-primary);
}

#smartchat-input:disabled {
    opacity: 0.6;
}

.sc-send {
    flex-shrink:    0;
    width:          36px;
    height:         36px;
    border-radius:  8px;
    background:     var(--sc-primary);
    color:          #fff;
    border:         none;
    cursor:         pointer;
    display:        flex;
    align-items:    center;
    justify-content: center;
    transition:     background 0.15s, opacity 0.15s;
}

.sc-send:hover:not(:disabled) {
    background: color-mix(in srgb, var(--sc-primary) 85%, #000);
}

.sc-send:disabled {
    opacity: 0.5;
    cursor:  not-allowed;
}