/* WC Zuka Chat Widget — Black & Red Theme */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');

:root {
    --wcz-primary:   #CC0000;
    --wcz-secondary: #111111;
    --wcz-bg:        #1a1a1a;
    --wcz-surface:   #222222;
    --wcz-border:    #333333;
    --wcz-text:      #f0f0f0;
    --wcz-muted:     #888888;
    --wcz-user-bg:   var(--wcz-primary);
    --wcz-bot-bg:    var(--wcz-surface);
    --wcz-radius:    16px;
    --wcz-shadow:    0 8px 32px rgba(0,0,0,.55);
    --wcz-z:         999999;
    --wcz-transition: .22s cubic-bezier(.4,0,.2,1);
}

/* ── Launcher button ─────────────────────────────────────────────────────── */
#wcz-launcher {
    position:        fixed;
    bottom:          20px;
    width:           58px;
    height:          58px;
    border-radius:   50%;
    background:      var(--wcz-primary);
    color:           #fff;
    border:          none;
    cursor:          pointer;
    z-index:         var(--wcz-z);
    display:         flex;
    align-items:     center;
    justify-content: center;
    box-shadow:      0 4px 18px rgba(204,0,0,.55);
    transition:      transform var(--wcz-transition), box-shadow var(--wcz-transition);
    font-family:     'Inter', sans-serif;
}
#wcz-launcher:hover  { transform: scale(1.1); box-shadow: 0 6px 24px rgba(204,0,0,.7); }
#wcz-launcher:active { transform: scale(0.96); }

#wcz-notif-dot {
    position:      absolute;
    top:           6px;
    right:         6px;
    width:         10px;
    height:        10px;
    border-radius: 50%;
    background:    #ff4d4d;
    border:        2px solid #fff;
    display:       none;
}
#wcz-notif-dot.show { display: block; }

/* ── Widget container ────────────────────────────────────────────────────── */
#wcz-widget {
    position:      fixed;
    bottom:        88px;
    width:         370px;
    max-height:    580px;
    background:    var(--wcz-bg);
    border:        1px solid var(--wcz-border);
    border-radius: var(--wcz-radius);
    box-shadow:    var(--wcz-shadow);
    display:       flex;
    flex-direction: column;
    z-index:       var(--wcz-z);
    font-family:   'Inter', sans-serif;
    font-size:     14px;
    color:         var(--wcz-text);
    overflow:      hidden;
    opacity:       0;
    transform:     translateY(12px) scale(.97);
    pointer-events: none;
    transition:    opacity var(--wcz-transition), transform var(--wcz-transition);
}
#wcz-widget.open {
    opacity:        1;
    transform:      translateY(0) scale(1);
    pointer-events: all;
}

/* ── Header ──────────────────────────────────────────────────────────────── */
#wcz-header {
    background:    linear-gradient(135deg, var(--wcz-primary), #8b0000);
    padding:       14px 16px;
    display:       flex;
    align-items:   center;
    gap:           10px;
    flex-shrink:   0;
}
#wcz-avatar {
    width:         38px;
    height:        38px;
    border-radius: 50%;
    background:    rgba(255,255,255,.15);
    display:       flex;
    align-items:   center;
    justify-content: center;
    font-size:     20px;
    flex-shrink:   0;
}
#wcz-header-info { flex:1; }
#wcz-header-info strong { display:block; font-size:15px; font-weight:600; }
#wcz-header-info small  { font-size:11px; opacity:.8; }

#wcz-close {
    background:    transparent;
    border:        none;
    color:         rgba(255,255,255,.8);
    cursor:        pointer;
    font-size:     18px;
    line-height:   1;
    padding:       4px;
    border-radius: 4px;
    transition:    color var(--wcz-transition);
}
#wcz-close:hover { color:#fff; }

/* ── Messages ────────────────────────────────────────────────────────────── */
#wcz-messages {
    flex:      1;
    overflow-y: auto;
    padding:   16px;
    display:   flex;
    flex-direction: column;
    gap:       10px;
    scrollbar-width: thin;
    scrollbar-color: var(--wcz-border) transparent;
}
#wcz-messages::-webkit-scrollbar       { width:5px; }
#wcz-messages::-webkit-scrollbar-thumb { background:var(--wcz-border); border-radius:3px; }

.wcz-msg {
    max-width:     82%;
    padding:       10px 14px;
    border-radius: 14px;
    line-height:   1.5;
    word-break:    break-word;
    animation:     wcz-pop .18s ease;
}
@keyframes wcz-pop { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }

.wcz-msg.user {
    background:    var(--wcz-user-bg);
    color:         #fff;
    align-self:    flex-end;
    border-bottom-right-radius: 4px;
}
.wcz-msg.bot {
    background:    var(--wcz-bot-bg);
    color:         var(--wcz-text);
    align-self:    flex-start;
    border-bottom-left-radius: 4px;
    border:        1px solid var(--wcz-border);
}

/* Markdown-like bold */
.wcz-msg strong { font-weight:600; }
.wcz-msg a      { color: #ff6b6b; }

/* Typing indicator */
#wcz-typing {
    align-self:    flex-start;
    background:    var(--wcz-bot-bg);
    border:        1px solid var(--wcz-border);
    border-radius: 14px;
    border-bottom-left-radius: 4px;
    padding:       10px 14px;
    display:       none;
}
#wcz-typing.show { display:flex; gap:5px; align-items:center; }
#wcz-typing span {
    width:8px; height:8px; border-radius:50%;
    background:var(--wcz-muted);
    animation: wcz-bounce 1.2s infinite;
}
#wcz-typing span:nth-child(2) { animation-delay:.2s; }
#wcz-typing span:nth-child(3) { animation-delay:.4s; }
@keyframes wcz-bounce {
    0%,60%,100% { transform:translateY(0); }
    30%          { transform:translateY(-6px); }
}

/* ── Quick Replies ────────────────────────────────────────────────────────── */
#wcz-quick-replies {
    display:    flex;
    flex-wrap:  wrap;
    gap:        6px;
    padding:    8px 14px;
    border-top: 1px solid var(--wcz-border);
    flex-shrink: 0;
}
.wcz-qr {
    background:    transparent;
    border:        1px solid var(--wcz-border);
    color:         var(--wcz-muted);
    border-radius: 20px;
    padding:       5px 11px;
    font-size:     12px;
    cursor:        pointer;
    font-family:   inherit;
    transition:    border-color var(--wcz-transition), color var(--wcz-transition), background var(--wcz-transition);
}
.wcz-qr:hover {
    border-color: var(--wcz-primary);
    color:        var(--wcz-primary);
    background:   rgba(204,0,0,.07);
}

/* ── Input area ──────────────────────────────────────────────────────────── */
#wcz-input-area {
    display:     flex;
    align-items: flex-end;
    gap:         8px;
    padding:     10px 14px;
    border-top:  1px solid var(--wcz-border);
    flex-shrink: 0;
}
#wcz-input {
    flex:          1;
    background:    var(--wcz-surface);
    border:        1px solid var(--wcz-border);
    border-radius: 10px;
    color:         var(--wcz-text);
    font-family:   inherit;
    font-size:     14px;
    padding:       9px 12px;
    resize:        none;
    outline:       none;
    max-height:    100px;
    transition:    border-color var(--wcz-transition);
}
#wcz-input::placeholder { color: var(--wcz-muted); }
#wcz-input:focus        { border-color: var(--wcz-primary); }

#wcz-send {
    width:         38px;
    height:        38px;
    border-radius: 50%;
    background:    var(--wcz-primary);
    border:        none;
    color:         #fff;
    cursor:        pointer;
    display:       flex;
    align-items:   center;
    justify-content: center;
    flex-shrink:   0;
    transition:    background var(--wcz-transition), transform var(--wcz-transition);
}
#wcz-send:hover  { background:#aa0000; }
#wcz-send:active { transform:scale(.93); }
#wcz-send:disabled { opacity:.4; cursor:default; }

/* ── Footer ──────────────────────────────────────────────────────────────── */
#wcz-footer {
    text-align:  center;
    font-size:   11px;
    color:       var(--wcz-muted);
    padding:     6px;
    border-top:  1px solid var(--wcz-border);
    flex-shrink: 0;
}
#wcz-footer strong { color: var(--wcz-primary); }

/* ── Mobile ──────────────────────────────────────────────────────────────── */
@media (max-width: 420px) {
    #wcz-widget {
        width:         100vw !important;
        left:          0 !important;
        right:         0 !important;
        bottom:        0 !important;
        max-height:    90vh;
        border-radius: var(--wcz-radius) var(--wcz-radius) 0 0;
    }
    #wcz-launcher { bottom:16px; }
}

/* ── WhatsApp specialist button ─────────────────────────────────────────── */
.wcz-qr-wa {
    background:   #25D366 !important;
    border-color: #25D366 !important;
    color:        #fff !important;
    font-weight:  600;
}
.wcz-qr-wa:hover {
    background:   #1ebe5d !important;
    border-color: #1ebe5d !important;
    color:        #fff !important;
}

/* ── Online status dot in header ─────────────────────────────────────────── */
#wcz-header-status {
    font-size:   11px;
    color:       rgba(255,255,255,.85);
    display:     flex;
    align-items: center;
    gap:         5px;
    margin-left: auto;
    margin-right: 8px;
}
.wcz-dot {
    width:         8px;
    height:        8px;
    border-radius: 50%;
    background:    #4ade80;
    display:       inline-block;
    animation:     wcz-pulse 2s infinite;
}
@keyframes wcz-pulse {
    0%,100% { opacity:1; }
    50%      { opacity:.4; }
}