/* Chatbot Julia v4.5 — CSS externe */
:root { --cb: #3d8b7a; --cb-light: #d4ede9; }

/* Launcher */
#cb-launcher { position:fixed; bottom:24px; right:24px; z-index:9998; cursor:pointer; }
#cb-launcher-pill { background:#fff; color:#333; font-size:14px; font-weight:600; padding:12px 20px; border-radius:28px; box-shadow:0 4px 20px rgba(0,0,0,.12); display:inline-flex; align-items:center; gap:8px; border:1.5px solid #e0e0e0; font-family:inherit; transition:transform .2s; }
#cb-launcher-pill:hover { transform:scale(1.03); }
#cb-dot { width:8px; height:8px; border-radius:50%; background:#2ecc71; box-shadow:0 0 0 3px rgba(46,204,113,.25); animation:cb-pulse 2s ease-in-out infinite; }
@keyframes cb-pulse { 0%,100%{box-shadow:0 0 0 3px rgba(46,204,113,.25)} 50%{box-shadow:0 0 0 5px rgba(46,204,113,.1)} }
#cb-launcher-pill svg { width:18px; height:18px; fill:var(--cb); flex-shrink:0; }
#cb-launcher.cb-hidden { display:none; }
#cb-launcher-pill { position:relative; }
#cb-badge { position:absolute; top:-4px; right:-4px; background:#e74c3c; color:#fff; border-radius:50%; width:18px; height:18px; font-size:11px; font-weight:700; display:none; align-items:center; justify-content:center; }
#cb-exit-tip { position:fixed; bottom:70px; right:24px; background:#fff; border:1.5px solid #3d8b7a; border-radius:12px; padding:10px 16px; font-size:13px; color:#333; box-shadow:0 4px 16px rgba(0,0,0,0.15); z-index:9997; display:none; max-width:250px; cursor:pointer; }

/* Window */
#cb-window { position:fixed; bottom:0; right:24px; width:420px; max-width:calc(100vw - 32px); height:calc(100vh - 90px); max-height:calc(100vh - 90px); background:#fff; border-radius:16px 16px 0 0; box-shadow:0 8px 40px rgba(0,0,0,.18); z-index:9999; display:none; flex-direction:column; font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; overflow:hidden; border:1.5px solid var(--cb-light); transition:width .4s ease,height .4s ease; }
#cb-window.open { display:flex; }
#cb-window.cb-expanded { width:min(820px,calc(100vw - 32px)); height:min(88vh,1000px); }

/* Header */
.cb-header { background:var(--cb); color:#fff; padding:14px 16px; display:flex; align-items:center; gap:10px; flex-shrink:0; }
.cb-avatar { width:40px; height:40px; border-radius:50%; background:rgba(255,255,255,.15); overflow:hidden; flex-shrink:0; }
.cb-avatar img { width:100%; height:100%; object-fit:cover; border-radius:50%; }
.cb-header-info { flex:1; min-width:0; }
.cb-header-name { font-weight:700; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cb-header-name .cb-live-dot { width:6px; height:6px; border-radius:50%; background:#2ecc71; display:inline-block; margin-right:4px; }
.cb-header-status { font-size:11px; opacity:.7; }
.cb-hdr-btn { background:none; border:none; color:#fff; cursor:pointer; opacity:.6; padding:4px; display:flex; align-items:center; justify-content:center; transition:opacity .2s; }
.cb-hdr-btn:hover { opacity:1; }
.cb-hdr-btn svg { width:17px; height:17px; fill:#fff; }
.cb-close-btn { min-width:36px; min-height:36px; }
.cb-close-btn svg { width:20px; height:20px; }

/* Messages */
#cb-messages { flex:1; overflow-y:auto; padding:14px; display:flex; flex-direction:column; gap:8px; }
.cb-msg { max-width:85%; padding:10px 14px; border-radius:14px; font-size:14px; line-height:1.5; animation:cb-fade 1.2s cubic-bezier(0.25, 0.1, 0.25, 1) both; word-wrap:break-word; }
.cb-options, .cb-opt-row, .cb-starters { animation:cb-fade 1s cubic-bezier(0.25, 0.1, 0.25, 1) both; animation-delay:.2s; }
@keyframes cb-fade { 0%{opacity:0;transform:translateY(-6px)} 40%{opacity:0.6;transform:translateY(-1px)} 100%{opacity:1;transform:translateY(0)} }
.cb-msg.bot { background:#f3f4f6; color:#1a1a1a; border-bottom-left-radius:4px; align-self:flex-start; }
.cb-msg.bot.cb-new { border-left: 3px solid var(--cb); }
.cb-msg.user { background:var(--cb); color:#fff; border-bottom-right-radius:4px; align-self:flex-end; }
.cb-msg.human { background:#fef3c7; color:#78350f; border:1px solid #f59e0b; align-self:flex-start; }
.cb-msg a { color:inherit; text-decoration:underline; }
.cb-msg .cb-cta { display:inline-block; margin-top:6px; padding:8px 14px; background:var(--cb); color:#fff; border-radius:8px; font-size:13px; text-decoration:none; font-weight:600; }

/* Typing */
.cb-typing { display:flex; gap:4px; padding:10px 14px; background:var(--cb-light); border-radius:14px; border-bottom-left-radius:4px; align-self:flex-start; max-width:60px; }
.cb-typing-dot { width:7px; height:7px; background:var(--cb); border-radius:50%; animation:cb-bounce 1.2s infinite; }
.cb-typing-dot:nth-child(2) { animation-delay:.2s; }
.cb-typing-dot:nth-child(3) { animation-delay:.4s; }
@keyframes cb-bounce { 0%,80%,100%{transform:translateY(0)} 40%{transform:translateY(-6px)} }

/* Options */
.cb-options { display:flex; flex-wrap:wrap; gap:6px; margin:8px 0 4px; padding:0 12px; }
.cb-opt-btn { background:#fff; border:1.5px solid var(--cb); color:var(--cb); border-radius:20px; padding:7px 16px; font-size:14px; cursor:pointer; font-family:inherit; transition:background .15s,color .15s; }
.cb-opt-btn:hover { background:var(--cb); color:#fff; }
.cb-opt-btn.selected { background:var(--cb); color:#fff; }
.cb-opt-row { display:flex; gap:6px; align-items:center; padding:6px 12px 4px; }
.cb-opt-autre { display:inline-flex; align-items:center; gap:4px; background:none; border:1.5px dashed #aaa; border-radius:20px; padding:7px 16px; font-size:14px; color:#888; cursor:pointer; font-family:inherit; }
.cb-opt-autre:hover { border-color:var(--cb); color:var(--cb); }
.cb-opt-send { background:var(--cb); color:#fff; border:none; border-radius:10px; padding:8px 16px; font-size:13px; font-weight:600; cursor:pointer; white-space:nowrap; }
.cb-opt-send:disabled { background:#4a4a4a; cursor:not-allowed; }

/* Articles bar */
#cb-articles { border-top:1px solid #e8f0ee; background:#f6fbf9; flex-shrink:0; overflow:hidden; transition:max-height .3s ease; max-height:120px; display:none; }
#cb-articles.collapsed { max-height:22px; overflow:hidden; }
#cb-articles-header { display:flex; align-items:center; gap:4px; padding:4px 12px 2px; font-size:11px; font-weight:700; color:var(--cb); cursor:pointer; user-select:none; text-decoration:underline; text-underline-offset:2px; }
#cb-articles-toggle { font-size:12px; opacity:.8; width:16px; height:16px; background:rgba(61,139,122,.08); border-radius:50%; display:flex; align-items:center; justify-content:center; margin-left:2px; }
#cb-articles-scroll { display:flex; gap:8px; overflow-x:auto; padding:2px 12px 8px; scrollbar-width:none; }
#cb-articles-scroll::-webkit-scrollbar { display:none; }
.cb-article-chip { flex-shrink:0; display:flex; align-items:center; gap:5px; font-size:12px; color:var(--cb); background:#fff; border:1.5px solid var(--cb); border-radius:12px; padding:6px 12px; text-decoration:none; white-space:normal; min-width:140px; max-width:200px; line-height:1.3; }
.cb-article-chip:hover { background:var(--cb-light); }

/* Footer */
.cb-footer { padding:10px 12px 12px; border-top:1px solid #f0f0f0; flex-shrink:0; margin-top:auto; }
.cb-input-row { display:flex; gap:8px; align-items:flex-end; }
#cb-input { flex:1; border:1.5px solid #ddd; border-radius:10px; padding:8px 12px; font-size:15px; resize:none; outline:none; font-family:inherit; line-height:1.4; max-height:100px; min-height:38px; transition:border-color .2s; }
#cb-input:focus { border-color:var(--cb); }
#cb-send { width:38px; height:38px; border-radius:10px; background:var(--cb); border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
#cb-send:disabled { background:#aaa; cursor:not-allowed; }
#cb-send svg { width:18px; height:18px; fill:#fff; }
.cb-disclaimer { font-size:10px; color:#999; text-align:center; margin-top:4px; }

/* Prenom form */
.cb-prenom-form input { flex:1; border:2px solid #8b5cf6; border-radius:10px; padding:9px 12px; font-size:14px; font-family:inherit; outline:none; background:#faf5ff; }
.cb-prenom-send { background:#8b5cf6; color:#fff; border:none; border-radius:10px; padding:9px 16px; font-size:16px; cursor:pointer; }
.cb-prenom-skip { background:#f3f4f6; color:#1a1a1a; border:1px solid #d1d5db; border-radius:10px; padding:9px 16px; font-size:14px; cursor:pointer; font-weight:500; }

/* Starters */
.cb-starters { display:flex; flex-direction:column; gap:6px; padding:6px 12px; }
.cb-starter { background:#fff; border:1.5px solid var(--cb-light); color:#333; border-radius:14px; padding:10px 14px; font-size:13px; cursor:pointer; text-align:left; font-family:inherit; transition:background .15s,border-color .15s; }
.cb-starter:hover { background:var(--cb-light); border-color:var(--cb); }

/* Satisfaction */
.cb-satisfaction { padding:8px 12px; border-top:1px solid #e8f0ee; background:#f6fbf9; text-align:center; font-size:12px; color:#666; }

/* Mobile — tailles agrandies pour confort tactile */
@media (max-width: 768px) {
    #cb-window {
        bottom: 0;
        right: 0;
        left: 0;
        top: 0;
        width: 100vw;
        max-width: 100vw;
        height: 100vh;
        height: 100dvh;
        max-height: 100vh;
        max-height: 100dvh;
        border-radius: 0;
    }
    #cb-window.cb-keyboard {
        height: 100vh;
        height: 100dvh;
        max-height: 100vh;
        max-height: 100dvh;
    }
    #cb-launcher { bottom: 20px; right: 16px; }
    #cb-launcher-pill { font-size: 15px; padding: 14px 22px; gap: 10px; border-radius: 32px; box-shadow: 0 4px 24px rgba(0,0,0,.18); }
    #cb-launcher-pill svg { width: 24px; height: 24px; }
    #cb-dot { width: 11px; height: 11px; }

    /* Header */
    .cb-header { padding: 16px 16px; gap: 12px; }
    .cb-avatar { width: 44px; height: 44px; }
    .cb-header-name { font-size: 16px; }
    .cb-header-status { font-size: 13px; }
    .cb-hdr-btn { padding: 8px; }
    .cb-hdr-btn svg { width: 20px; height: 20px; }
    #cb-trash, #cb-expand { display: none; }
    .cb-close-btn { min-width: 48px; min-height: 48px; }
    .cb-close-btn svg { display: none; }
    .cb-close-btn::before { content: '\2715'; font-size: 22px; font-weight: 400; color: #fff; }

    /* Messages */
    #cb-messages { padding: 16px; gap: 10px; }
    .cb-msg { font-size: 16px; padding: 12px 16px; border-radius: 16px; line-height: 1.55; }
    .cb-msg .cb-cta { padding: 10px 18px; font-size: 15px; border-radius: 10px; }

    /* Options — zones tactiles larges */
    .cb-options { gap: 8px; padding: 0 14px; margin: 10px 0 6px; }
    .cb-opt-btn { font-size: 16px; padding: 10px 20px; border-radius: 22px; min-height: 44px; }
    .cb-opt-row { gap: 8px; padding: 8px 14px 6px; }
    .cb-opt-autre { font-size: 16px; padding: 10px 20px; border-radius: 22px; min-height: 44px; }
    .cb-opt-send { padding: 10px 20px; font-size: 15px; border-radius: 12px; min-height: 44px; }

    /* Input */
    .cb-footer { padding: 12px 14px 14px; }
    .cb-input-row { gap: 10px; }
    #cb-input { font-size: 16px; padding: 10px 14px; min-height: 44px; border-radius: 12px; }
    #cb-send { width: 44px; height: 44px; border-radius: 12px; }
    #cb-send svg { width: 20px; height: 20px; }

    /* Starters */
    .cb-starters { gap: 8px; padding: 8px 14px; }
    .cb-starter { font-size: 16px; padding: 14px 18px; border-radius: 16px; min-height: 44px; }

    /* Articles */
    #cb-articles-header { font-size: 13px; padding: 6px 14px 4px; }
    .cb-article-chip { font-size: 14px; padding: 8px 14px; min-width: 150px; max-width: 220px; border-radius: 14px; min-height: 44px; }

    /* Prenom form */
    .cb-prenom-form input { font-size: 16px; padding: 12px 14px; min-height: 44px; }
    .cb-prenom-send { padding: 12px 20px; font-size: 18px; min-height: 44px; }
    .cb-prenom-skip { padding: 12px 20px; font-size: 16px; min-height: 44px; }

    .cb-disclaimer { font-size: 12px; }
}

/* Dark mode */
.mode-nocturne #cb-launcher-pill { background:#2a2a3e; color:#e0e0e0; border-color:#444; }
.mode-nocturne #cb-window { background:#1a1a2e !important; border-color:#333 !important; }
.mode-nocturne .cb-header { background:linear-gradient(135deg,#1a3a30,#2d5a4a) !important; }
.mode-nocturne #cb-messages { background:#1a1a2e !important; }
.mode-nocturne .cb-msg.bot { background:#2a2a3e !important; color:#e0e0e0 !important; }
.mode-nocturne .cb-msg.user { background:#2d6b5e !important; color:#fff !important; }
.mode-nocturne .cb-footer { background:#1e1e32 !important; border-top-color:#333 !important; }
.mode-nocturne #cb-input { background:#2a2a3e !important; color:#e0e0e0 !important; border-color:#444 !important; }
.mode-nocturne #cb-input::placeholder { color:#888 !important; }
.mode-nocturne .cb-opt-btn { background:#2a2a3e; color:#e0e0e0; border-color:#555; }
.mode-nocturne .cb-opt-btn:hover,.mode-nocturne .cb-opt-btn.selected { background:var(--cb); color:#fff; }
.mode-nocturne #cb-articles { background:#1e1e32 !important; border-top-color:#333 !important; }
.mode-nocturne .cb-article-chip { background:#2a2a3e; color:var(--cb-light); border-color:#555; }
.mode-nocturne .cb-starter { background:#2a2a3e; color:#e0e0e0; border-color:#444; }
.mode-nocturne .cb-starter:hover { background:#333; }