/* ChatConvert — Widget frontend */
#chatconvert-root {
    --cc-primary:#4f46e5; --cc-secondary:#06b6d4; --cc-header:#4f46e5;
    --cc-chat-bg:#fff; --cc-user-bubble:#4f46e5; --cc-agent-text:#1f2937;
    --cc-radius:16px; --cc-font-size:14px; --cc-width:380px; --cc-height:600px;
    --cc-font:inherit; --cc-btn-color:#4f46e5; --cc-btn-size:56px;
    --cc-offset-x:24px; --cc-offset-y:24px;
    position:fixed; z-index:2147483000; font-family:var(--cc-font);
}
#chatconvert-root.cc-pos-bottom-right { right:var(--cc-offset-x); bottom:var(--cc-offset-y); }
#chatconvert-root.cc-pos-bottom-left  { left:var(--cc-offset-x);  bottom:var(--cc-offset-y); }
#chatconvert-root.cc-pos-middle-right { right:var(--cc-offset-x); top:50%; transform:translateY(-50%); }
#chatconvert-root.cc-pos-middle-left  { left:var(--cc-offset-x);  top:50%; transform:translateY(-50%); }

/* Bouton */
.cc-toggle {
    width:var(--cc-btn-size); height:var(--cc-btn-size); border-radius:50%; border:none;
    background:var(--cc-btn-color); color:#fff; cursor:pointer; display:flex; align-items:center;
    justify-content:center; box-shadow:0 8px 24px rgba(0,0,0,.22); position:relative; transition:transform .2s;
}
.cc-toggle:hover { transform:scale(1.06); }
.cc-toggle svg { width:46%; height:46%; fill:#fff; }
.cc-toggle .cc-ic-avatar { width:100%; height:100%; border-radius:50%; object-fit:cover; }
.cc-toggle-text { width:auto; border-radius:999px; padding:0 22px; gap:8px; }
.cc-toggle-text .cc-btn-label { font-weight:600; font-size:15px; white-space:nowrap; }
.cc-badge { position:absolute; top:-4px; right:-4px; background:#ef4444; color:#fff; font-size:11px; font-weight:700; width:20px; height:20px; border-radius:50%; display:flex; align-items:center; justify-content:center; }

/* Pop-up proactive */
.cc-popup { position:absolute; bottom:calc(var(--cc-btn-size) + 14px); right:0; background:#fff; color:#1f2937; padding:12px 36px 12px 14px; border-radius:14px; box-shadow:0 10px 30px rgba(0,0,0,.18); max-width:240px; font-size:13px; cursor:pointer; animation:cc-fade-in .3s ease; }
#chatconvert-root.cc-pos-bottom-left .cc-popup, #chatconvert-root.cc-pos-middle-left .cc-popup { right:auto; left:0; }
.cc-popup-x { position:absolute; top:6px; right:8px; background:none; border:none; cursor:pointer; font-size:16px; color:#9ca3af; }

/* Fenêtre */
.cc-window {
    position:absolute; bottom:calc(var(--cc-btn-size) + 16px); right:0; width:var(--cc-width); height:var(--cc-height);
    max-height:calc(100vh - 110px); background:var(--cc-chat-bg); border-radius:18px; overflow:hidden;
    display:none; flex-direction:column; opacity:0; transform:translateY(16px) scale(.98); transition:opacity .25s, transform .25s;
}
#chatconvert-root.cc-pos-bottom-left .cc-window, #chatconvert-root.cc-pos-middle-left .cc-window { right:auto; left:0; }
#chatconvert-root.cc-shadow .cc-window { box-shadow:0 24px 70px rgba(0,0,0,.28); }
#chatconvert-root.cc-border .cc-window { border:1px solid #e5e7eb; }
#chatconvert-root.cc-open .cc-window { display:flex; opacity:1; transform:translateY(0) scale(1); }
#chatconvert-root.cc-size-compact { --cc-width:320px; --cc-height:480px; }
#chatconvert-root.cc-size-large   { --cc-width:440px; --cc-height:680px; }

/* Header */
.cc-header { background:var(--cc-header); color:#fff; padding:14px 16px; display:flex; align-items:center; gap:10px; }
.cc-avatar { width:40px; height:40px; border-radius:50%; background:rgba(255,255,255,.22); display:flex; align-items:center; justify-content:center; font-size:20px; overflow:hidden; }
.cc-avatar img { width:100%; height:100%; object-fit:cover; }
.cc-avatar svg { width:22px; height:22px; fill:#fff; }
.cc-tts svg { width:18px; height:18px; fill:#fff; }
.cc-head-info { flex:1; }
.cc-agent-name { font-weight:600; font-size:15px; }
.cc-status { font-size:11px; opacity:.85; }
.cc-status::before { content:"●"; color:#4ade80; margin-right:5px; }
.cc-close, .cc-tts { background:none; border:none; color:#fff; cursor:pointer; font-size:16px; opacity:.85; }
.cc-tts.cc-active { opacity:1; transform:scale(1.15); }

/* Messages */
.cc-messages { flex:1; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:10px; background:var(--cc-chat-bg); }
.cc-msg { max-width:84%; }
.cc-msg-user { align-self:flex-end; }
.cc-bubble { padding:10px 14px; border-radius:var(--cc-radius); font-size:var(--cc-font-size); line-height:1.45; word-wrap:break-word; }
.cc-msg-assistant .cc-bubble { background:#f1f5f9; color:var(--cc-agent-text); border-bottom-left-radius:4px; }
.cc-msg-user .cc-bubble { background:var(--cc-user-bubble); color:#fff; border-bottom-right-radius:4px; }
.cc-bubble a { color:inherit; text-decoration:underline; }
.cc-msg-assistant .cc-bubble a { color:var(--cc-primary); }

.cc-typing { display:flex; gap:4px; padding:10px 14px; background:#f1f5f9; border-radius:var(--cc-radius); width:fit-content; }
.cc-typing span { width:7px; height:7px; border-radius:50%; background:#94a3b8; animation:cc-bounce 1.2s infinite; }
.cc-typing span:nth-child(2){ animation-delay:.2s; } .cc-typing span:nth-child(3){ animation-delay:.4s; }

/* Suggestions & chips */
.cc-suggestions { display:flex; flex-wrap:wrap; gap:6px; }
.cc-sugg { background:#fff; border:1px solid var(--cc-primary); color:var(--cc-primary); border-radius:999px; padding:6px 12px; font-size:12px; cursor:pointer; transition:.15s; }
.cc-sugg:hover { background:var(--cc-primary); color:#fff; }
.cc-quick { display:flex; flex-wrap:wrap; gap:6px; padding:0 16px; }
.cc-quick:empty { padding:0; }
.cc-chip { display:inline-flex; align-items:center; gap:5px; background:#f3f4f6; color:#1f2937; border-radius:999px; padding:6px 12px; font-size:12px; text-decoration:none; font-weight:600; }
.cc-chip svg { width:15px; height:15px; fill:currentColor; flex-shrink:0; }
.cc-chip-cta { background:var(--cc-primary); color:#fff; }
.cc-chip-wa { background:#25d366; color:#fff; }
.cc-chip-phone { background:#eef2ff; color:var(--cc-primary); }
.cc-escalation { display:flex; flex-wrap:wrap; gap:6px; }

/* Capture */
.cc-capture { background:#f8fafc; border:1px solid #e5e7eb; border-radius:12px; padding:14px; display:flex; flex-direction:column; gap:8px; }
.cc-capture h4 { margin:0 0 4px; font-size:14px; }
.cc-capture input { padding:9px 11px; border:1px solid #d1d5db; border-radius:8px; font-size:13px; }
.cc-capture-submit, .cc-consent-ok { background:var(--cc-primary); color:#fff; border:none; border-radius:8px; padding:10px; font-weight:600; cursor:pointer; }
.cc-thanks { color:#16a34a; text-align:center; margin:0; font-size:13px; }
.cc-thanks svg { width:16px; height:16px; fill:#16a34a; vertical-align:-3px; }

/* Saisie */
.cc-input-area { display:flex; align-items:flex-end; gap:8px; padding:12px 14px; border-top:1px solid #eef0f3; background:var(--cc-chat-bg); }
.cc-input { flex:1; border:1px solid #d1d5db; border-radius:20px; padding:9px 14px; font-size:var(--cc-font-size); resize:none; max-height:100px; font-family:inherit; outline:none; }
.cc-input:focus { border-color:var(--cc-primary); }
.cc-send, .cc-mic { width:40px; height:40px; border-radius:50%; border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.cc-send { background:var(--cc-primary); color:#fff; }
.cc-send svg { width:20px; height:20px; fill:#fff; }
.cc-mic { background:#f1f5f9; color:#475569; }
.cc-mic svg { width:20px; height:20px; fill:#475569; }
.cc-mic.cc-rec { background:#ef4444; animation:cc-pulse 1s infinite; }
.cc-mic.cc-rec svg { fill:#fff; }

.cc-footer { text-align:center; padding:6px; font-size:11px; color:#9ca3af; background:var(--cc-chat-bg); }

.cc-consent { position:absolute; bottom:calc(var(--cc-btn-size) + 16px); right:0; width:280px; background:#fff; border-radius:14px; box-shadow:0 16px 40px rgba(0,0,0,.2); padding:16px; }
.cc-consent p { font-size:13px; margin:0 0 12px; }
.cc-consent-ok { width:100%; }

/* Animations bouton */
.cc-anim-pulse { animation:cc-pulse 2s infinite; }
.cc-anim-bounce { animation:cc-bounce-btn 2s infinite; }
.cc-anim-shake { animation:cc-shake 3s infinite; }
.cc-anim-glow { animation:cc-glow 2s infinite; }
.cc-anim-blink { animation:cc-blink 2.5s infinite; }

@keyframes cc-pulse { 0%{ box-shadow:0 0 0 0 rgba(79,70,229,.5);} 70%{ box-shadow:0 0 0 16px rgba(79,70,229,0);} 100%{ box-shadow:0 0 0 0 rgba(79,70,229,0);} }
@keyframes cc-bounce-btn { 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-8px);} }
@keyframes cc-shake { 0%,90%,100%{ transform:translateX(0);} 92%{ transform:translateX(-4px);} 94%{ transform:translateX(4px);} 96%{ transform:translateX(-4px);} 98%{ transform:translateX(4px);} }
@keyframes cc-glow { 0%,100%{ filter:brightness(1);} 50%{ filter:brightness(1.25); box-shadow:0 0 24px var(--cc-btn-color);} }
@keyframes cc-blink { 0%,100%{ opacity:1;} 50%{ opacity:.55;} }
@keyframes cc-bounce { 0%,60%,100%{ transform:translateY(0);} 30%{ transform:translateY(-6px);} }
@keyframes cc-fade-in { from{ opacity:0; transform:translateY(8px);} to{ opacity:1; transform:translateY(0);} }

/* Responsive mobile : plein écran */
@media (max-width:480px) {
    .cc-window { width:100vw; height:100vh; max-height:100vh; bottom:0; right:0; left:0; border-radius:0; }
    #chatconvert-root.cc-open .cc-toggle { display:none; }
}

@media (prefers-reduced-motion: reduce) {
    .cc-toggle, .cc-window, .cc-anim-pulse, .cc-anim-bounce, .cc-anim-shake, .cc-anim-glow, .cc-anim-blink { animation:none; transition:none; }
}