/* ---------- Chatbot widget ---------- */
.chatbot-toggle{
    position:fixed;
    bottom:24px;
    right:24px;
    width:58px;
    height:58px;
    border-radius:50%;
    background:var(--orange);
    color:#fff;
    border:none;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    box-shadow:0 6px 20px rgba(8,47,102,0.35);
    z-index:1000;
    transition:transform 0.2s cubic-bezier(0.25, 0.8, 0.25, 1), background 0.2s ease;
}
/* Correction de l'effet de survol : passage au vert corporate au lieu du bleu roi électrique */
.chatbot-toggle:hover{
    background: #2AA362;
    transform: translateY(-2px) scale(1.04);
}
.chatbot-toggle:focus-visible{outline:3px solid var(--sand); outline-offset:3px;}
.chatbot-toggle svg{width:26px; height:26px;}

.chatbot-panel{
    position:fixed;
    bottom:95px;
    right:24px;
    width:360px;
    max-width:calc(100vw - 32px);
    height:min(520px, calc(100vh - 140px));
    background:var(--paper);
    border-radius:12px; /* Coins légèrement plus arrondis pour un aspect plus applicatif */
    box-shadow:0 12px 40px rgba(8,47,102,0.22);
    flex-direction:column;
    overflow:hidden;
    z-index:1000;
    display:none;
}
.chatbot-panel:not([hidden]){
    display:flex;
}

.chatbot-header{
    background:var(--navy-deep);
    color:var(--paper);
    padding:16px 18px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-shrink:0;
    border-bottom: 1px solid rgba(247, 244, 238, 0.08);
}
.chatbot-header-info{display:flex; align-items:center; gap:12px;}

.chatbot-avatar{
    width:36px; height:36px;
    border-radius:50%;
    /* L'avatar s'habille de vert corporate pour symboliser l'assistance officielle SITRACOM */
    background: #2AA362;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:0.7rem;
    font-weight:700;
    flex-shrink:0;
    letter-spacing: 0.05em;
    box-shadow: 0 2px 8px rgba(42, 163, 98, 0.25);
}
.chatbot-title{
    font-family:'Oswald', sans-serif;
    text-transform:uppercase;
    font-size:0.92rem;
    letter-spacing:0.02em;
    color: #FFFFFF;
}
.chatbot-subtitle{font-size:0.7rem; color:var(--sand); opacity:0.85; margin-top:2px;}
.chatbot-close{
    background:none;
    border:none;
    color:var(--paper);
    font-size:1rem;
    cursor:pointer;
    width:28px; height:28px;
    border-radius:50%;
    flex-shrink:0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease;
}
.chatbot-close:hover{background:rgba(255,255,255,0.15);}

.chatbot-messages{
    flex:1;
    overflow-y:auto;
    padding:18px;
    display:flex;
    flex-direction:column;
    gap:12px;
    background:#F8FAFC; /* Fond de discussion gris-bleu épuré et moderne */
}
.chatbot-msg{display:flex;}
.chatbot-msg.user{justify-content:flex-end;}
.chatbot-msg.bot{justify-content:flex-start;}

.chatbot-bubble{
    max-width:80%;
    padding:10px 14px;
    border-radius:14px;
    font-size:0.88rem;
    line-height:1.5;
    box-shadow: 0 1px 2px rgba(18, 24, 31, 0.03);
}
/* Style de la bulle de l'assistant */
.chatbot-msg.bot .chatbot-bubble{
    background: #FFFFFF; /* Bulle blanche épurée, ultra-lisible */
    color:var(--ink);
    border-bottom-left-radius:3px;
    border: 1px solid rgba(18, 24, 31, 0.05);
}
/* Style de la bulle de l'utilisateur */
.chatbot-msg.user .chatbot-bubble{
    background:var(--orange-dim);
    color:#fff;
    border-bottom-right-radius:3px;
}
.chatbot-msg.error .chatbot-bubble{
    background:#fde8e8;
    color:#a33;
}
.chatbot-typing{
    gap:4px;
    padding: 0 18px 14px;
    flex-shrink:0;
    display:none;
    background: #F8FAFC;
}
.chatbot-typing:not([hidden]){
    display:flex;
}
.chatbot-typing span{
    width:6px; height:6px;
    border-radius:50%;
    background:var(--steel);
    opacity:0.5;
    animation:chatbotBounce 1.2s infinite ease-in-out;
}
.chatbot-typing span:nth-child(2){animation-delay:0.15s;}
.chatbot-typing span:nth-child(3){animation-delay:0.3s;}
@keyframes chatbotBounce{
    0%, 60%, 100%{transform:translateY(0); opacity:0.5;}
    30%{transform:translateY(-4px); opacity:1;}
}

.chatbot-input-row{
    display:flex;
    gap:8px;
    padding:14px;
    border-top:1px solid rgba(18,24,31,0.08);
    flex-shrink:0;
    background:var(--paper);
}
.chatbot-input{
    flex:1;
    font-family:'Inter', sans-serif;
    font-size:0.88rem;
    padding:10px 16px;
    border:1px solid rgba(18,24,31,0.15);
    border-radius:20px;
    background:#fff;
    color:var(--ink);
    outline: none;
    transition: border-color 0.2s ease;
}
.chatbot-input:focus{
    border-color: var(--orange);
}
.chatbot-input:focus-visible{outline: none;}

.chatbot-send{
    width:38px; height:38px;
    border-radius:50%;
    background:var(--orange);
    color:#fff;
    border:none;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    flex-shrink:0;
    transition:background 0.2s ease, transform 0.2s ease;
}
/* Le bouton d'envoi s'accorde au survol avec la couleur verte de validation */
.chatbot-send:hover{
    background: #2AA362;
}
.chatbot-send:disabled{opacity:0.5; cursor:not-allowed;}
.chatbot-send svg{width:18px; height:18px;}

@media (max-width:480px){
    .chatbot-panel{
        right:16px;
        left:16px;
        width:auto;
        bottom:88px;
    }
    .chatbot-toggle{right:16px; bottom:16px;}
}

/* Badge d'alerte notifications */
.chatbot-badge{
    position:absolute;
    top:-4px;
    right:-4px;
    min-width:20px;
    height:20px;
    padding:0 5px;
    border-radius:10px;
    background:#D64545;
    color:#fff;
    font-family:'IBM Plex Mono', monospace;
    font-size:0.68rem;
    font-weight:700;
    align-items:center;
    justify-content:center;
    box-shadow:0 0 0 2px var(--paper);
    display:none;
}
/* ---------- Correctif d'affichage du Badge ---------- */
.chatbot-badge {
    display: none;
}
/* S'affiche uniquement en flex s'il n'a pas l'attribut hidden */
.chatbot-badge:not([hidden]) {
    display: flex;
}