/* Jaggi Chat Widget 6.5 — Final */
/* All rules use !important to prevent theme overrides */

#jcRoot *{box-sizing:border-box !important;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif !important}

/* ── Launcher ─────────────────────────────────────────────── */
#jcBtn{position:fixed !important;bottom:24px !important;right:24px !important;width:60px !important;height:60px !important;border-radius:50% !important;background:linear-gradient(135deg,#E0370E,#bf2d08) !important;box-shadow:0 6px 22px rgba(230,92,0,.45) !important;cursor:pointer !important;z-index:999998 !important;display:flex !important;align-items:center !important;justify-content:center !important;border:none !important;outline:none !important;transition:transform .25s cubic-bezier(.34,1.56,.64,1),box-shadow .2s !important;padding:0 !important}
#jcBtn:hover{transform:scale(1.09) !important;box-shadow:0 10px 28px rgba(230,92,0,.55) !important}
#jcBtn.open{transform:scale(.88) rotate(90deg) !important}
#jcBtn svg{width:32px !important;height:28px !important;fill:#fff !important;position:absolute !important;transition:opacity .18s !important}
#jcBtn .ic-chat{opacity:1 !important}
#jcBtn .ic-close{opacity:0 !important}
#jcBtn.open .ic-chat{opacity:0 !important}
#jcBtn.open .ic-close{opacity:1 !important}

/* Unread badge */
#jcBadge{position:absolute !important;top:-4px !important;right:-4px !important;min-width:18px !important;height:18px !important;background:#ef4444 !important;border-radius:9px !important;border:2px solid #fff !important;font-size:9px !important;font-weight:700 !important;color:#fff !important;display:none !important;align-items:center !important;justify-content:center !important;padding:0 4px !important;z-index:2 !important;line-height:1 !important}
#jcBtn.notif #jcBadge{display:flex !important}

/* ── Panel ────────────────────────────────────────────────── */
#jcPanel{position:fixed !important;bottom:96px !important;right:24px !important;width:390px !important;height:630px !important;max-height:calc(100vh - 108px) !important;border-radius:18px !important;background:#fff !important;box-shadow:0 24px 60px rgba(0,0,0,.2),0 8px 20px rgba(0,0,0,.12) !important;z-index:999999 !important;display:flex !important;flex-direction:column !important;overflow:hidden !important;opacity:0 !important;transform:translateY(20px) scale(.96) !important;pointer-events:none !important;transition:opacity .22s ease,transform .22s cubic-bezier(.34,1.56,.64,1) !important}
#jcPanel.open{opacity:1 !important;transform:none !important;pointer-events:all !important}

/* ── Header — completely redesigned ──────────────────────── */
#jcHead{background:linear-gradient(135deg,#1a202c 0%,#2d3748 100%) !important;padding:13px 14px 11px !important;display:flex !important;align-items:center !important;gap:10px !important;flex-shrink:0 !important}

/* Avatar */
.jc-av{width:40px !important;height:40px !important;border-radius:50% !important;background:#E0370E !important;display:flex !important;align-items:center !important;justify-content:center !important;flex-shrink:0 !important;border:2px solid rgba(255,255,255,.2) !important;overflow:hidden !important;padding:8px !important}
.jc-av svg{width:100% !important;height:100% !important;display:block !important}

/* Bot info */
.jc-hi{flex:1 !important;min-width:0 !important}
.jc-ht{color:#fff !important;font-size:14px !important;font-weight:700 !important;margin:0 !important;line-height:1.3 !important;white-space:nowrap !important;overflow:hidden !important;text-overflow:ellipsis !important}
.jc-hs{color:rgba(255,255,255,.55) !important;font-size:11px !important;display:flex !important;align-items:center !important;gap:5px !important;margin-top:3px !important;line-height:1 !important}
.jc-dot{width:7px !important;height:7px !important;border-radius:50% !important;background:#4ade80 !important;flex-shrink:0 !important;animation:jcPulse 2s infinite !important;transition:background .3s !important}
@keyframes jcPulse{0%,100%{box-shadow:0 0 0 2px rgba(74,222,128,.3) !important}50%{box-shadow:0 0 0 5px rgba(74,222,128,.08) !important}}

/* Header right side — icon buttons only, WA moved to its own row */
.jc-head-actions{display:flex !important;align-items:center !important;gap:6px !important;flex-shrink:0 !important}

/* Icon buttons — 🔔 and 🗑️ */
.jc-icon-btn{background:rgba(255,255,255,.15) !important;border:1px solid rgba(255,255,255,.15) !important;border-radius:8px !important;width:32px !important;height:32px !important;display:inline-flex !important;align-items:center !important;justify-content:center !important;cursor:pointer !important;font-size:14px !important;transition:background .15s !important;padding:0 !important;line-height:1 !important;color:#fff !important}
.jc-icon-btn:hover{background:rgba(255,255,255,.28) !important}

/* WhatsApp button */
#jcWA{display:inline-flex !important;align-items:center !important;gap:5px !important;background:#25D366 !important;color:#fff !important;border:none !important;border-radius:8px !important;padding:6px 10px !important;font-size:11px !important;font-weight:700 !important;cursor:pointer !important;text-decoration:none !important;transition:background .15s !important;white-space:nowrap !important;flex-shrink:0 !important;line-height:1 !important}
#jcWA:hover{background:#20b858 !important;color:#fff !important}
#jcWA svg{width:13px !important;height:13px !important;fill:#fff !important;flex-shrink:0 !important;display:block !important}

/* ── Agent joined banner ───────────────────────────────────── */
#jcAgentBanner{background:linear-gradient(90deg,#1a202c,#2d3748) !important;color:#4ade80 !important;text-align:center !important;padding:8px 14px !important;font-size:12px !important;font-weight:600 !important;display:none !important;flex-shrink:0 !important;letter-spacing:.3px !important}
#jcAgentBanner.show{display:block !important}

/* ── Messages ─────────────────────────────────────────────── */
#jcMsgs{flex:1 !important;overflow-y:auto !important;padding:14px 14px 8px !important;display:flex !important;flex-direction:column !important;gap:10px !important;scroll-behavior:smooth !important}
#jcMsgs::-webkit-scrollbar{width:4px !important}
#jcMsgs::-webkit-scrollbar-thumb{background:#d1d5db !important;border-radius:4px !important}

/* Message row */
.jcMsg{display:flex !important;width:100% !important;animation:jcIn .2s ease !important}
@keyframes jcIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.jcMsg.user{justify-content:flex-end !important}
.jcMsg.bot,.jcMsg.agent{justify-content:flex-start !important}
.jcMsg.sys{justify-content:center !important}

/* Avatar beside bot/agent messages */
.jc-mav{width:30px !important;height:30px !important;border-radius:50% !important;background:linear-gradient(135deg,#E0370E,#bf2d08) !important;display:flex !important;align-items:center !important;justify-content:center !important;flex-shrink:0 !important;align-self:flex-end !important;margin-right:7px !important;padding:5px !important;overflow:hidden !important}
.jc-mav svg{width:100% !important;height:100% !important;display:block !important}
.jc-mav.agent{background:linear-gradient(135deg,#2d3748,#4a5568) !important}

/* Message body */
.jc-mbody{display:flex !important;flex-direction:column !important;max-width:74% !important}
.jcMsg.user .jc-mbody{align-items:flex-end !important}
.jcMsg.bot .jc-mbody,.jcMsg.agent .jc-mbody{align-items:flex-start !important}

/* Bubble */
.jc-bubble{padding:10px 14px !important;border-radius:16px !important;font-size:13px !important;line-height:1.65 !important;white-space:normal !important;word-wrap:break-word !important;overflow-wrap:break-word !important;word-break:normal !important;min-width:44px !important;position:relative !important}
.jcMsg.user .jc-bubble{background:linear-gradient(135deg,#E0370E,#bf2d08) !important;color:#fff !important;border-bottom-right-radius:3px !important}
.jcMsg.bot .jc-bubble{background:#f4f6f8 !important;border:1px solid #e8ecf0 !important;border-bottom-left-radius:3px !important;color:#1a202c !important}
.jcMsg.agent .jc-bubble{background:linear-gradient(135deg,#1a202c,#2d3748) !important;color:#fff !important;border-bottom-left-radius:3px !important}
.jcMsg.sys .jc-bubble{background:#ede9fe !important;color:#5b21b6 !important;border-radius:20px !important;padding:5px 14px !important;font-size:11px !important;font-style:italic !important;text-align:center !important}

.jc-bubble strong{font-weight:700 !important}
.jc-bubble em{font-style:italic !important}
.jc-bubble code{background:rgba(0,0,0,.07) !important;padding:1px 5px !important;border-radius:3px !important;font-size:12px !important;font-family:monospace !important}
.jc-bubble a{color:#E0370E !important;word-break:break-all !important}
.jcMsg.user .jc-bubble a,.jcMsg.agent .jc-bubble a{color:#fcd9bd !important}

/* Timestamp */
.jc-mtime{font-size:10px !important;color:#9ca3af !important;margin-top:4px !important;padding:0 2px !important}
.jcMsg.user .jc-mtime{text-align:right !important}

/* List items */
.jc-li{display:block !important;padding-left:2px !important;margin:2px 0 !important}

/* System divider */
.jc-sysmsg{text-align:center !important;padding:4px 12px !important;font-size:11px !important;color:#9ca3af !important;font-style:italic !important;align-self:center !important}

/* ── CTA button — "Talk to an Expert" ─────────────────────── */
/* This is the most important interactive element — must be very visible */
.jc-ctas{display:flex !important;flex-wrap:wrap !important;gap:7px !important;margin-top:10px !important}
.jc-cta{display:inline-flex !important;align-items:center !important;justify-content:center !important;gap:5px !important;padding:9px 16px !important;border-radius:10px !important;font-size:12px !important;font-weight:700 !important;cursor:pointer !important;border:none !important;text-decoration:none !important;transition:all .15s !important;letter-spacing:.2px !important}
.jc-cta.pri{background:linear-gradient(135deg,#E0370E,#bf2d08) !important;color:#fff !important;box-shadow:0 3px 10px rgba(230,92,0,.35) !important}
.jc-cta.pri:hover{background:linear-gradient(135deg,#bf2d08,#9e2506) !important;transform:translateY(-1px) !important;box-shadow:0 5px 14px rgba(230,92,0,.45) !important}

/* ── Typing indicator ─────────────────────────────────────── */
.jc-typing{display:flex !important;gap:5px !important;padding:11px 15px !important;background:#f4f6f8 !important;border:1px solid #e8ecf0 !important;border-radius:16px !important;border-bottom-left-radius:3px !important;width:fit-content !important;align-items:center !important}
.jc-td{width:7px !important;height:7px !important;border-radius:50% !important;background:#9ca3af !important;animation:jcBounce 1.2s infinite !important}
.jc-td:nth-child(2){animation-delay:.18s !important}
.jc-td:nth-child(3){animation-delay:.36s !important}
@keyframes jcBounce{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(-6px)}}

/* ── Lead / Agent forms ────────────────────────────────────── */
.jc-form{margin:4px 0 !important;background:#eff6ff !important;border-radius:14px !important;padding:14px !important;border:1.5px solid #bfdbfe !important;flex-shrink:0 !important;width:100% !important}
.jc-form h4{margin:0 0 12px !important;font-size:13px !important;font-weight:700 !important;color:#1a202c !important}
.jc-fi{margin-bottom:9px !important}
.jc-fi input,.jc-fi textarea{width:100% !important;padding:9px 11px !important;border:1.5px solid #bfdbfe !important;border-radius:8px !important;font-size:13px !important;outline:none !important;transition:border .15s,box-shadow .15s !important;font-family:inherit !important;background:#fff !important;color:#1a202c !important}
.jc-fi input:focus,.jc-fi textarea:focus{border-color:#E0370E !important;box-shadow:0 0 0 3px rgba(230,92,0,.1) !important}
.jc-fi textarea{resize:none !important;height:60px !important}
.jc-fa{display:flex !important;gap:8px !important}
.jc-fb{flex:1 !important;padding:9px !important;border:none !important;border-radius:8px !important;font-size:13px !important;font-weight:600 !important;cursor:pointer !important;transition:all .15s !important}
.jc-fb.sub{background:#E0370E !important;color:#fff !important}
.jc-fb.sub:hover{background:#bf2d08 !important}
.jc-fb.sub:disabled{background:#d1d5db !important;cursor:default !important}
.jc-fb.can{background:#f3f4f6 !important;color:#6b7280 !important;border:1px solid #e5e7eb !important}
.jc-fb.can:hover{background:#e5e7eb !important}

/* ── Topic chips ──────────────────────────────────────────── */
#jcTopics{display:flex !important;flex-wrap:wrap !important;gap:7px !important;padding:0 0 6px !important}
.jc-suggest-btn{background:#fff !important;border:1.5px solid #E0370E !important;color:#E0370E !important;border-radius:20px !important;padding:6px 13px !important;font-size:12px !important;font-weight:600 !important;cursor:pointer !important;white-space:nowrap !important;transition:all .15s !important;line-height:1.3 !important}
.jc-suggest-btn:hover{background:#E0370E !important;color:#fff !important;transform:translateY(-1px) !important}

/* ── Input area ───────────────────────────────────────────── */
#jcInputArea{padding:10px 12px 12px !important;border-top:1.5px solid #f0f2f4 !important;background:#fff !important;flex-shrink:0 !important}
#jcWrap{display:flex !important;gap:8px !important;align-items:flex-end !important;background:#f7f8fa !important;border:1.5px solid #e8ecf0 !important;border-radius:14px !important;padding:8px 8px 8px 13px !important;transition:border .15s,box-shadow .15s !important}
#jcWrap:focus-within{border-color:#E0370E !important;background:#fff !important;box-shadow:0 0 0 3px rgba(230,92,0,.08) !important}
#jcIn{flex:1 !important;border:none !important;background:transparent !important;font-size:13px !important;line-height:1.5 !important;resize:none !important;min-height:22px !important;max-height:100px !important;overflow-y:auto !important;font-family:inherit !important;color:#1a202c !important;outline:none !important}
#jcIn::placeholder{color:#b0b7c3 !important}
#jcIn:disabled{opacity:.5 !important}

/* Send button */
#jcSend{width:36px !important;height:36px !important;min-width:36px !important;background:#E0370E !important;border:none !important;border-radius:10px !important;cursor:pointer !important;display:flex !important;align-items:center !important;justify-content:center !important;transition:all .15s !important;flex-shrink:0 !important;padding:0 !important}
#jcSend:hover:not(:disabled){background:#bf2d08 !important;transform:scale(1.06) !important}
#jcSend:disabled{background:#d1d5db !important;cursor:default !important;transform:none !important}
#jcSend svg{width:16px !important;height:16px !important;fill:#fff !important;display:block !important}

/* Input meta */
#jcInputMeta{display:flex !important;justify-content:space-between !important;align-items:center !important;padding:5px 2px 0 !important}
.jc-char-count{font-size:10px !important;color:#E0370E !important;font-weight:600 !important}
#jcBrand{font-size:10px !important;color:#b0b7c3 !important}
#jcBrand a{color:#E0370E !important;text-decoration:none !important;font-weight:600 !important}

/* ── Mobile ───────────────────────────────────────────────── */
@media(max-width:480px){
    #jcPanel{bottom:0 !important;right:0 !important;left:0 !important;width:100% !important;height:92vh !important;max-height:92vh !important;border-radius:18px 18px 0 0 !important}
    #jcBtn{bottom:18px !important;right:18px !important}
    .jc-mbody{max-width:80% !important}
    #jcHead{padding:11px 12px !important}
}

/* ── Persistent "Talk to Expert" button ─────────────────────── */
.jc-expert-btn{
    background:linear-gradient(135deg,#E0370E,#bf2d08) !important;
    color:#fff !important;
    border:none !important;
    border-radius:22px !important;
    padding:10px 22px !important;
    font-size:13px !important;
    font-weight:700 !important;
    cursor:pointer !important;
    box-shadow:0 4px 14px rgba(230,92,0,.35) !important;
    transition:all .2s !important;
    letter-spacing:.2px !important;
    display:inline-flex !important;
    align-items:center !important;
    gap:6px !important;
}
.jc-expert-btn:hover{
    transform:translateY(-2px) !important;
    box-shadow:0 6px 20px rgba(230,92,0,.5) !important;
    background:linear-gradient(135deg,#bf2d08,#9e2506) !important;
}

/* ── Close button in header ─────────────────────────────────── */
#jcCloseBtn{background:rgba(255,255,255,.15) !important;border:1px solid rgba(255,255,255,.15) !important;border-radius:8px !important;width:32px !important;height:32px !important;display:inline-flex !important;align-items:center !important;justify-content:center !important;cursor:pointer !important;transition:background .15s !important;padding:0 !important}
#jcCloseBtn:hover{background:rgba(255,255,255,.3) !important}
#jcCloseBtn svg{display:block !important;flex-shrink:0 !important}

/* ── Rightmost close button ──────────────────────────────────── */
.jc-close-btn{background:rgba(255,255,255,.15) !important;border:1px solid rgba(255,255,255,.2) !important;border-radius:8px !important;width:32px !important;height:32px !important;display:inline-flex !important;align-items:center !important;justify-content:center !important;cursor:pointer !important;padding:0 !important;flex-shrink:0 !important}
.jc-close-btn:hover{background:rgba(255,255,255,.32) !important}
.jc-close-btn svg{width:16px !important;height:16px !important;display:block !important}

/* ── Agent avatar — same Jaggi SVG as bot ───────────────────── */
.jc-mav.agent{background:#E0370E !important;padding:5px !important;overflow:hidden !important}
.jc-mav.agent svg{width:100% !important;height:100% !important;display:block !important}

/* ── Fix: avatar size consistent ───────────────────────────── */
.jc-mav{width:30px !important;height:30px !important;border-radius:50% !important;background:#E0370E !important;display:flex !important;align-items:center !important;justify-content:center !important;flex-shrink:0 !important;align-self:flex-end !important;margin-right:7px !important;padding:5px !important;overflow:hidden !important}
.jc-mav svg{width:100% !important;height:100% !important;display:block !important}