/**
 * Danguard Nexus AI — Chat Widget Styles
 * Uses CSS custom properties for dynamic color theming
 */

:root {
    --nexus-color:       #1A56DB;
    --nexus-color-dark:  #1447b8;
    --nexus-bg:          #ffffff;
    --nexus-text:        #1a1a1a;
    --nexus-border:      #e5e7eb;
    --nexus-radius:      12px;
    --nexus-shadow:      0 8px 32px rgba(0,0,0,0.15);
    --nexus-font:        -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --nexus-z:           9999;
}

/* ── Chat Bubble Button ───────────────────────────────────────────────────── */
#nexus-chat-bubble {
    position:        fixed;
    bottom:          24px;
    right:           24px;
    width:           56px;
    height:          56px;
    border-radius:   50%;
    background:      var(--nexus-color);
    color:           #fff;
    border:          none;
    cursor:          pointer;
    font-size:       24px;
    display:         flex;
    align-items:     center;
    justify-content: center;
    box-shadow:      var(--nexus-shadow);
    z-index:         var(--nexus-z);
    transition:      transform 0.2s ease, background 0.2s ease;
}

#nexus-chat-bubble:hover {
    background:  var(--nexus-color-dark);
    transform:   scale(1.08);
}

#nexus-chat-bubble.bottom-left {
    right: auto;
    left:  24px;
}

/* ── Chat Panel ──────────────────────────────────────────────────────────── */
#nexus-chat-panel {
    position:      fixed;
    bottom:        90px;
    right:         24px;
    width:         360px;
    max-height:    540px;
    background:    var(--nexus-bg);
    border:        1px solid var(--nexus-border);
    border-radius: var(--nexus-radius);
    box-shadow:    var(--nexus-shadow);
    z-index:       var(--nexus-z);
    display:       flex;
    flex-direction:column;
    overflow:      hidden;
    font-family:   var(--nexus-font);
    transition:    opacity 0.2s ease, transform 0.2s ease;
}

#nexus-chat-panel.nexus-hidden {
    opacity:   0;
    transform: translateY(12px) scale(0.97);
    pointer-events: none;
}

#nexus-chat-panel.bottom-left {
    right: auto;
    left:  24px;
}

/* RTL support for Arabic */
#nexus-chat-panel.nexus-rtl {
    direction: rtl;
    text-align: right;
}

/* ── Panel Header ─────────────────────────────────────────────────────────── */
.nexus-chat-header {
    background:     var(--nexus-color);
    color:          #fff;
    padding:        14px 16px;
    display:        flex;
    align-items:    center;
    justify-content:space-between;
    font-weight:    600;
    font-size:      15px;
}

.nexus-chat-header-title {
    display:     flex;
    align-items: center;
    gap:         8px;
}

.nexus-chat-avatar {
    width:           32px;
    height:          32px;
    border-radius:   50%;
    background:      rgba(255,255,255,0.2);
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-size:       16px;
}

.nexus-chat-close {
    background: none;
    border:     none;
    color:      #fff;
    cursor:     pointer;
    font-size:  20px;
    padding:    0;
    line-height:1;
    opacity:    0.8;
}
.nexus-chat-close:hover { opacity: 1; }

/* ── Messages Area ───────────────────────────────────────────────────────── */
.nexus-chat-messages {
    flex:       1;
    overflow-y: auto;
    padding:    16px;
    display:    flex;
    flex-direction: column;
    gap:        12px;
    min-height: 200px;
    max-height: 340px;
}

.nexus-message {
    max-width:     82%;
    padding:       10px 14px;
    border-radius: 14px;
    font-size:     14px;
    line-height:   1.5;
    word-break:    break-word;
}

.nexus-message.user {
    align-self:       flex-end;
    background:       var(--nexus-color);
    color:            #fff;
    border-bottom-right-radius: 4px;
}

.nexus-message.bot {
    align-self:       flex-start;
    background:       #f3f4f6;
    color:            var(--nexus-text);
    border-bottom-left-radius: 4px;
}

.nexus-message.bot.error {
    background: #fef2f2;
    color:      #991b1b;
}

/* Typing indicator */
.nexus-typing {
    align-self:  flex-start;
    background:  #f3f4f6;
    padding:     10px 16px;
    border-radius: 14px;
    border-bottom-left-radius: 4px;
    display:     flex;
    gap:         4px;
    align-items: center;
}
.nexus-typing span {
    width:            7px;
    height:           7px;
    background:       #9ca3af;
    border-radius:    50%;
    animation:        nexus-bounce 1.2s infinite;
}
.nexus-typing span:nth-child(2) { animation-delay: 0.2s; }
.nexus-typing span:nth-child(3) { animation-delay: 0.4s; }

@keyframes nexus-bounce {
    0%, 80%, 100% { transform: translateY(0); }
    40%           { transform: translateY(-5px); }
}

/* Confidence badge */
.nexus-confidence {
    font-size:  11px;
    color:      #6b7280;
    margin-top: 4px;
    text-align: right;
}

/* ── Contact Button ──────────────────────────────────────────────────────── */
.nexus-contact-btn {
    display:       inline-block;
    margin-top:    8px;
    padding:       8px 14px;
    background:    var(--nexus-color);
    color:         #fff;
    border:        none;
    border-radius: 8px;
    cursor:        pointer;
    font-size:     13px;
    font-weight:   600;
    transition:    background 0.2s;
}
.nexus-contact-btn:hover { background: var(--nexus-color-dark); }

/* ── Contact Form ────────────────────────────────────────────────────────── */
.nexus-contact-form {
    background:    #f9fafb;
    border:        1px solid var(--nexus-border);
    border-radius: 10px;
    padding:       14px;
    margin-top:    8px;
    align-self:    stretch;
}

.nexus-contact-form h4 {
    margin:      0 0 12px;
    font-size:   14px;
    font-weight: 600;
    color:       var(--nexus-text);
}

.nexus-contact-form input,
.nexus-contact-form textarea {
    width:         100%;
    padding:       8px 10px;
    border:        1px solid var(--nexus-border);
    border-radius: 6px;
    font-size:     13px;
    margin-bottom: 8px;
    font-family:   var(--nexus-font);
    box-sizing:    border-box;
    background:    #fff;
}

.nexus-contact-form textarea {
    min-height: 70px;
    resize:     vertical;
}

.nexus-contact-form button {
    width:         100%;
    padding:       9px;
    background:    var(--nexus-color);
    color:         #fff;
    border:        none;
    border-radius: 6px;
    cursor:        pointer;
    font-size:     13px;
    font-weight:   600;
}

/* ── Input Area ──────────────────────────────────────────────────────────── */
.nexus-chat-input-area {
    padding:     12px;
    border-top:  1px solid var(--nexus-border);
    display:     flex;
    gap:         8px;
    align-items: flex-end;
}

.nexus-chat-input {
    flex:          1;
    padding:       9px 12px;
    border:        1px solid var(--nexus-border);
    border-radius: 8px;
    font-size:     14px;
    font-family:   var(--nexus-font);
    resize:        none;
    min-height:    38px;
    max-height:    100px;
    outline:       none;
    transition:    border-color 0.2s;
}
.nexus-chat-input:focus { border-color: var(--nexus-color); }

.nexus-chat-send {
    padding:       9px 14px;
    background:    var(--nexus-color);
    color:         #fff;
    border:        none;
    border-radius: 8px;
    cursor:        pointer;
    font-size:     14px;
    font-weight:   600;
    transition:    background 0.2s;
    white-space:   nowrap;
}
.nexus-chat-send:hover    { background: var(--nexus-color-dark); }
.nexus-chat-send:disabled { opacity: 0.6; cursor: not-allowed; }

/* ── Inline embed (shortcode) ─────────────────────────────────────────────── */
.nexus-ai-inline-chat #nexus-chat-panel {
    position:   relative;
    bottom:     auto;
    right:      auto;
    width:      100%;
    max-height: 480px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

/* ── Mobile ───────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
    #nexus-chat-panel {
        width:         calc(100vw - 24px);
        right:         12px;
        bottom:        80px;
    }
}