/* JC Live Chat Widget v1.2 */
#jclc-chat-widget { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 14px; line-height: 1.5; z-index: 999999; }
#jclc-chat-widget * { box-sizing: border-box; }

/* Trigger */
.jclc-trigger {
    position: fixed !important; bottom: 24px !important; width: 60px !important; height: 60px !important;
    border-radius: 50% !important; background-color: var(--jclc-btn-bg) !important; color: var(--jclc-btn-icon) !important;
    border: none !important; cursor: pointer !important; box-shadow: 0 8px 32px rgba(0,0,0,0.15) !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    transition: transform 0.3s, box-shadow 0.3s !important; z-index: 999999 !important;
    padding: 0 !important; margin: 0 !important; outline: none !important;
    -webkit-appearance: none !important; appearance: none !important;
}
.jclc-trigger.jclc-right { right: 24px !important; }
.jclc-trigger.jclc-left { left: 24px !important; }
.jclc-trigger:hover { transform: scale(1.08) !important; box-shadow: 0 12px 40px rgba(0,0,0,0.2) !important; }
.jclc-trigger .jclc-trigger-icon {
    width: 28px !important; height: 28px !important; display: block !important;
    fill: var(--jclc-btn-icon) !important; flex-shrink: 0 !important; transition: transform 0.3s !important;
}
.jclc-trigger.open .jclc-trigger-icon { transform: rotate(90deg) !important; }
.jclc-trigger .jclc-badge {
    position: absolute !important; top: -4px !important; right: -4px !important;
    background: #e74c3c !important; color: #fff !important; border-radius: 50% !important;
    width: 22px !important; height: 22px !important; font-size: 11px !important;
    font-weight: 700 !important; display: flex !important; align-items: center !important;
    justify-content: center !important; border: 2px solid #fff !important; line-height: 1 !important;
}

/* Window */
.jclc-window {
    position: fixed !important; bottom: 96px !important; width: 380px !important; max-height: 520px !important;
    background: #fff !important; border-radius: 16px !important; box-shadow: 0 8px 32px rgba(0,0,0,0.12) !important;
    display: flex !important; flex-direction: column !important; overflow: hidden !important;
    z-index: 999998 !important; opacity: 0 !important; transform: translateY(20px) scale(0.95) !important;
    transition: opacity 0.3s, transform 0.3s !important; pointer-events: none !important;
}
.jclc-window.jclc-right { right: 24px !important; }
.jclc-window.jclc-left { left: 24px !important; }
.jclc-window.visible { opacity: 1 !important; transform: translateY(0) scale(1) !important; pointer-events: auto !important; }

/* Header */
.jclc-header {
    background-color: var(--jclc-header-bg) !important; color: var(--jclc-header-text) !important;
    padding: 14px 16px !important; display: flex !important; align-items: center !important;
    gap: 10px !important; flex-shrink: 0 !important;
}
.jclc-header-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.jclc-header-dot.online { background: #4ade80; box-shadow: 0 0 6px rgba(74,222,128,0.6); }
.jclc-header-dot.offline { background: #fbbf24; }
.jclc-header-info { flex: 1; }
.jclc-header-title { font-weight: 600; font-size: 15px; color: inherit; }
.jclc-header-status { font-size: 12px; opacity: 0.85; color: inherit; }
.jclc-close-btn {
    background: none !important; border: none !important; color: var(--jclc-header-text) !important;
    cursor: pointer !important; padding: 4px !important; margin: 0 !important; opacity: 0.8 !important;
    transition: opacity 0.2s !important; display: flex !important; align-items: center !important;
    justify-content: center !important; width: 28px !important; height: 28px !important;
    border-radius: 50% !important; flex-shrink: 0 !important;
}
.jclc-close-btn:hover { opacity: 1 !important; background: rgba(255,255,255,0.15) !important; }
.jclc-close-btn svg { width: 18px; height: 18px; fill: currentColor; }

/* Messages */
.jclc-messages {
    flex: 1; overflow-y: auto; padding: 16px; display: flex;
    flex-direction: column; gap: 8px; min-height: 200px; max-height: 340px; background: #f8f9fa;
}
.jclc-msg { max-width: 82%; padding: 10px 14px; border-radius: 14px; word-break: break-word; animation: jclcFadeIn 0.3s; }
.jclc-msg-visitor {
    background-color: var(--jclc-visitor-bg); color: var(--jclc-visitor-text);
    align-self: flex-end; border-bottom-right-radius: 4px;
}
.jclc-msg-agent, .jclc-msg-system {
    background-color: var(--jclc-agent-bg); color: var(--jclc-agent-text);
    align-self: flex-start; border-bottom-left-radius: 4px; box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.jclc-msg-name { font-size: 11px; font-weight: 600; margin-bottom: 2px; opacity: 0.7; }
.jclc-msg-time { font-size: 10px; opacity: 0.5; margin-top: 4px; text-align: right; }
.jclc-typing { font-style: italic; color: #999; padding: 8px 14px; font-size: 13px; }

/* Input */
.jclc-input-area {
    padding: 12px 16px; border-top: 1px solid #eee; background: #fff;
    display: flex; gap: 8px; align-items: flex-end; flex-shrink: 0;
}
.jclc-input-area textarea {
    flex: 1; border: 1px solid #e2e8f0; border-radius: 12px; padding: 10px 14px;
    resize: none; font-size: 14px; font-family: inherit; outline: none;
    max-height: 80px; min-height: 40px; line-height: 1.4; transition: border-color 0.2s;
}
.jclc-input-area textarea:focus { border-color: var(--jclc-btn-bg); }
.jclc-send-btn {
    background-color: var(--jclc-send-bg) !important; color: var(--jclc-send-icon) !important;
    border: none !important; border-radius: 50% !important; width: 40px !important; height: 40px !important;
    cursor: pointer !important; display: flex !important; align-items: center !important;
    justify-content: center !important; flex-shrink: 0 !important; transition: opacity 0.2s !important; padding: 0 !important;
}
.jclc-send-btn:hover { opacity: 0.85 !important; }
.jclc-send-btn svg { width: 18px; height: 18px; fill: currentColor; }

/* Pre-chat form */
.jclc-prechat { padding: 20px; display: flex; flex-direction: column; gap: 12px; background: #f8f9fa; flex: 1; }
.jclc-prechat p { margin: 0; color: #666; font-size: 13px; }
.jclc-prechat input {
    border: 1px solid #e2e8f0; border-radius: 10px; padding: 10px 14px;
    font-size: 14px; font-family: inherit; outline: none; transition: border-color 0.2s;
}
.jclc-prechat input:focus { border-color: var(--jclc-btn-bg); }
.jclc-prechat button {
    background-color: var(--jclc-offline-btn-bg) !important; color: var(--jclc-offline-btn-text) !important; border: none !important;
    border-radius: 10px; padding: 12px; cursor: pointer; font-size: 14px; font-weight: 600;
}
.jclc-prechat button:hover { opacity: 0.85; }

/* Offline */
.jclc-offline { padding: 20px; display: flex; flex-direction: column; gap: 10px; background: #f8f9fa; flex: 1; }
.jclc-offline p { margin: 0; color: #666; font-size: 13px; }
.jclc-offline input, .jclc-offline textarea {
    border: 1px solid #e2e8f0; border-radius: 10px; padding: 10px 14px;
    font-size: 14px; font-family: inherit; outline: none; transition: border-color 0.2s;
}
.jclc-offline textarea { min-height: 80px; resize: vertical; }
.jclc-offline input:focus, .jclc-offline textarea:focus { border-color: var(--jclc-btn-bg); }
.jclc-offline button {
    background-color: var(--jclc-offline-btn-bg) !important; color: var(--jclc-offline-btn-text) !important; border: none !important;
    border-radius: 10px; padding: 12px; cursor: pointer; font-size: 14px; font-weight: 600;
}
.jclc-offline button:hover { opacity: 0.85; }
.jclc-success { text-align: center; padding: 40px 20px; color: #333; }
.jclc-success .jclc-check { font-size: 48px; margin-bottom: 12px; }

@keyframes jclcFadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 480px) {
    .jclc-window { width: calc(100vw - 16px) !important; right: 8px !important; left: 8px !important; bottom: 80px !important; max-height: 70vh !important; }
    .jclc-trigger { bottom: 16px !important; }
    .jclc-trigger.jclc-right { right: 16px !important; }
    .jclc-trigger.jclc-left { left: 16px !important; }
}