:root{--accent:#D96A32;--accent2:#C25E2E;--ease:cubic-bezier(.4,0,.2,1)}

.mockup-phone-chat{flex:1;padding:12px;overflow:hidden;display:flex;flex-direction:column;gap:8px}

.chat-msg{padding:10px 14px;border-radius:14px;font-size:.62rem;line-height:1.5;max-width:85%}

.chat-msg--user{background:rgba(22,33,62,.06);border:1px solid rgba(22,33,62,.08);align-self:flex-end;border-bottom-right-radius:4px}

.chat-msg--bot{background:rgba(16,29,58,.12);border:1px solid rgba(16,29,58,.18);align-self:flex-start;border-bottom-left-radius:4px;color:var(--dim2)}

.chat-typing{display:flex;gap:4px;padding:10px 14px;align-self:flex-start;background:rgba(16,29,58,.08);border-radius:14px;border-bottom-left-radius:4px}

.chat-typing span{width:5px;height:5px;border-radius:50%;background:rgba(16,29,58,.5);animation:typingDot 1.2s ease-in-out infinite}

.chat-typing span:nth-child(2){animation-delay:.2s}
.chat-typing span:nth-child(3){animation-delay:.4s}


/* ====== CHATBOT ====== */
.chat-toggle{position:fixed;bottom:1.5rem;right:1.5rem;z-index:9999;width:58px;height:58px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent2));border:none;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 30px rgba(16,29,58,.4);transition:all .3s var(--ease)}

.chat-toggle:hover{transform:scale(1.08);box-shadow:0 8px 40px rgba(16,29,58,.5)}

.chat-toggle.active{background:rgba(22,33,62,.1);box-shadow:0 4px 20px rgba(0,0,0,.3)}

.chat-toggle-icon{transition:opacity .2s,transform .2s}

.chat-toggle-close{position:absolute;opacity:0;transform:rotate(-90deg)}

.chat-toggle.active .chat-toggle-open{opacity:0;transform:rotate(90deg)}

.chat-toggle.active .chat-toggle-close{opacity:1;transform:rotate(0)}


.chat-badge{position:absolute;top:-2px;right:-2px;width:20px;height:20px;border-radius:50%;background:#ef4444;color:#fff;font-size:.6rem;font-weight:700;display:flex;align-items:center;justify-content:center;font-family:var(--font);box-shadow:0 2px 8px rgba(239,68,68,.4);animation:chatBadgePulse 2s ease infinite}

.chat-hint{position:fixed;bottom:1.8rem;right:6.5rem;z-index:9998;display:flex;align-items:center;gap:.6rem;animation:chatHintSlide 1s cubic-bezier(.16,1,.3,1) both;cursor:pointer;transition:opacity .4s}

.chat-hint-text{font-family:var(--display);font-size:clamp(1.4rem,3vw,2.2rem);font-weight:700;color:#fff;letter-spacing:.02em;text-transform:uppercase;text-shadow:0 0 30px rgba(16,29,58,.3)}

.chat-hint-arrow{font-size:clamp(1.4rem,3vw,2rem);color:var(--accent);font-weight:900;display:inline-block;animation:chatArrowBounce 1.5s ease-in-out infinite}

.chat-hint--hidden{opacity:0;pointer-events:none}

@keyframes chatHintSlide{from{opacity:0;transform:translateX(-30px)}to{opacity:1;transform:translateX(0)}}

@keyframes chatArrowBounce{0%,100%{transform:translateX(0)}50%{transform:translateX(6px)}}

@keyframes chatBadgePulse{0%,100%{transform:scale(1)}50%{transform:scale(1.15)}}


/* Panel */
.chat-panel{position:fixed;bottom:6rem;right:1.5rem;z-index:9998;width:380px;max-height:520px;border-radius:20px;background:rgba(255,255,255,.92);border:1px solid rgba(22,33,62,.08);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);box-shadow:0 25px 80px rgba(0,0,0,.5),0 0 60px rgba(16,29,58,.08);display:flex;flex-direction:column;overflow:hidden;opacity:0;visibility:hidden;transform:translateY(20px) scale(.95);transition:all .35s var(--ease)}

.chat-panel.active{opacity:1;visibility:visible;transform:translateY(0) scale(1)}


/* Header */
.chat-header{display:flex;align-items:center;justify-content:space-between;padding:.85rem 1rem;border-bottom:1px solid rgba(22,33,62,.06);flex-shrink:0}

.chat-header-left{display:flex;align-items:center;gap:.65rem}

.chat-avatar{width:36px;height:36px;border-radius:10px;background:linear-gradient(135deg,#0a0a1a,#1a1a3a);display:flex;align-items:center;justify-content:center;overflow:hidden;box-shadow:0 4px 15px rgba(16,29,58,.3)}

.chat-avatar-img{width:100%;height:100%;object-fit:cover}

.chat-header-name{font-family:var(--display);font-size:.82rem;font-weight:700;color:#16213E}

.chat-header-status{display:flex;align-items:center;gap:.3rem;font-size:.55rem;color:var(--dim)}

.chat-status-dot{width:6px;height:6px;border-radius:50%;background:#22C55E;box-shadow:0 0 8px rgba(34,197,94,.55);animation:statusPulse 2s ease infinite}

.chat-minimize{color:var(--dim);padding:.25rem;border-radius:8px;transition:all .2s}

.chat-minimize:hover{color:#fff;background:rgba(22,33,62,.05)}


/* Body */
.chat-body{flex:1;overflow-y:auto;padding:1rem;display:flex;flex-direction:column;gap:.75rem;min-height:200px;max-height:320px;scrollbar-width:thin;scrollbar-color:rgba(22,33,62,.08) transparent}

.chat-body::-webkit-scrollbar{width:4px}

.chat-body::-webkit-scrollbar-track{background:transparent}

.chat-body::-webkit-scrollbar-thumb{background:rgba(22,33,62,.1);border-radius:2px}


/* Messages */
.chat-msg-row{display:flex}

.chat-msg-row--user{justify-content:flex-end}

.chat-msg-row--assistant{justify-content:flex-start}


.chat-bubble{max-width:85%;padding:.65rem .9rem;border-radius:14px;font-family:var(--font);font-size:.76rem;line-height:1.65;word-wrap:break-word;white-space:pre-wrap}

.chat-bubble--user{background:#16213E;color:#F4F1EA;border-bottom-right-radius:4px}

.chat-bubble--assistant{background:rgba(22,33,62,.05);color:rgba(22,33,62,.85);border:1px solid rgba(22,33,62,.06);border-bottom-left-radius:4px}


/* Typing dots */
.chat-typing-dots{display:inline-flex;align-items:center;gap:4px;padding:2px 0}

.chat-typing-dots span{width:6px;height:6px;border-radius:50%;background:rgba(22,33,62,.3);animation:typingBounce 1.2s ease infinite}

.chat-typing-dots span:nth-child(2){animation-delay:.15s}

.chat-typing-dots span:nth-child(3){animation-delay:.3s}


/* Quick questions */
.chat-quick{display:flex;flex-wrap:wrap;gap:.4rem;padding:0 1rem .75rem;flex-shrink:0}

.chat-quick-btn{font-family:var(--font);font-size:.6rem;padding:.4rem .75rem;border-radius:50px;background:rgba(22,33,62,.04);border:1px solid rgba(22,33,62,.08);color:var(--dim2);cursor:pointer;transition:all .2s;white-space:nowrap}

.chat-quick-btn:hover{background:#16213E;border-color:#16213E;color:#fff}

.chat-date-input{font-family:var(--font);font-size:.8rem;padding:.45rem .6rem;border-radius:10px;background:#fff;border:1px solid rgba(22,33,62,.25);color:#16213E;cursor:pointer;outline:none}
.chat-date-input:focus{border-color:#D96A32}


/* Footer */
.chat-footer{display:flex;align-items:center;gap:.5rem;padding:.75rem 1rem;border-top:1px solid rgba(22,33,62,.06);flex-shrink:0}

.chat-input{flex:1;background:rgba(22,33,62,.04);border:1px solid rgba(22,33,62,.08);border-radius:12px;padding:.6rem .85rem;font-family:var(--font);font-size:.75rem;color:#16213E;outline:none;transition:border-color .2s,background .2s}

.chat-input::placeholder{color:rgba(22,33,62,.2)}

.chat-input:focus{border-color:rgba(16,29,58,.3);background:rgba(16,29,58,.04)}

.chat-send{width:38px;height:38px;border-radius:10px;background:linear-gradient(135deg,var(--accent),var(--accent2));border:none;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .2s;box-shadow:0 4px 15px rgba(16,29,58,.25)}

.chat-send:hover{transform:scale(1.05);box-shadow:0 6px 20px rgba(16,29,58,.35)}

.chat-send:disabled{opacity:.5;cursor:not-allowed;transform:none}


/* ====== CHATBOT MOBILE — must be AFTER desktop chatbot styles ====== */
@media(max-width:768px){
    .chat-panel{position:fixed;top:0;left:0;right:0;bottom:0;width:100vw;height:100vh;height:100dvh;max-height:none;max-width:none;border-radius:0;z-index:10000;background:#EFE9DC;display:flex;flex-direction:column;border:none;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none;transform:none;opacity:0;visibility:hidden;transition:opacity .25s;overflow:hidden}
    .chat-panel.active{opacity:1;visibility:visible;transform:none}
    .chat-panel .chat-body{flex:1;padding:.8rem;overflow-y:auto;min-height:0;max-height:none;-webkit-overflow-scrolling:touch}
    .chat-panel .chat-header{padding:.8rem 1rem;border-bottom:1px solid rgba(22,33,62,.08);flex-shrink:0}
    .chat-panel .chat-footer{padding:.6rem .8rem;border-top:1px solid rgba(22,33,62,.06);padding-bottom:env(safe-area-inset-bottom,.6rem);flex-shrink:0}
    .chat-panel .chat-input{font-size:16px;padding:.7rem 1rem;border-radius:12px}
    .chat-panel .chat-bubble--assistant{font-size:.85rem;line-height:1.6}
    .chat-panel .chat-bubble--user{font-size:.85rem;line-height:1.6}
    .chat-panel .chat-quick-btn{font-size:.72rem;padding:.5rem .85rem}
    .chat-toggle{width:50px;height:50px;bottom:1rem;right:.75rem}
    .chat-hint{bottom:1.4rem;right:4.5rem}
    .chat-hint-text{font-size:clamp(1.1rem,3.5vw,1.5rem)}
}

.chat-toggle{background:linear-gradient(135deg,#D96A32,#C25E2E)!important;box-shadow:0 6px 30px rgba(217,106,50,.4)!important}

.chat-hint-text{text-shadow:0 0 30px rgba(246,244,239,.25)!important}

.chat-hint-arrow{color:#D96A32!important}

.chat-hint-text{color:#16213E!important;text-shadow:none!important}


.chat-avatar-img{object-fit:contain!important;padding:5px!important}


/* chatbot : panneau legerement agrandi (audit interactif) */
@media(min-width:1100px){
 .chat-panel{width:400px!important;height:560px!important}
 .chat-bubble--bot,.chat-bubble--user{font-size:.92rem!important}
 .chat-quick-btn{font-size:.8rem!important}
 .chat-input-field, .chat-panel input{font-size:.95rem!important}
}
/* hint ESSAYEZ-MOI : pastille autonome, lisible sur tous fonds */
.chat-hint{bottom:1.7rem!important;right:5.8rem!important;z-index:9999!important}
.chat-hint-text{font-size:.95rem!important;font-weight:600!important;letter-spacing:.06em!important;
  background:rgba(16,29,58,.94)!important;color:#F4F1EA!important;padding:.6rem 1.1rem!important;
  border-radius:99px!important;border:1px solid rgba(244,241,234,.2)!important;
  box-shadow:0 10px 28px rgba(0,0,0,.35)!important;text-shadow:none!important}
.chat-hint-arrow{display:none!important}