/* ── Chatbot Webhook – Widget flottant ─────────────────────────────────
   Palette Groupe Écho :
     Noir    #1a1a1a
     Blanc   #ffffff
     Taupe   #8c7b6b  (+ variantes claires/foncées)
     Police  Montserrat
──────────────────────────────────────────────────────────────────── */

/* ── Tokens ───────────────────────────────────────────────────────── */

.chatbot-widget {
    --echo-black:      #1a1a1a;
    --echo-taupe:      #8c7b6b;
    --echo-taupe-dk:   #6e5f52;
    --echo-taupe-lt:   #f2ede8;   /* fond zone messages        */
    --echo-taupe-mid:  #c4b5a5;   /* bordures, séparateurs     */
    --echo-taupe-hint: rgba(140, 123, 107, 0.12);
    --echo-white:      #ffffff;
    --echo-subtle:     #a09080;   /* texte secondaire          */
    --echo-font:       "Montserrat", Helvetica, Arial, sans-serif;
}

/* ── Widget flottant ─────────────────────────────────────────────── */

.chatbot-widget {
    position:       fixed;
    bottom:         24px;
    right:          24px;
    z-index:        99999;
    display:        flex;
    flex-direction: column;
    align-items:    flex-end;
    font-family:    var(--echo-font);
    font-size:      0.9rem;
}

/* ── Panneau de conversation ─────────────────────────────────────── */

.chatbot-panel {
    display:          flex;
    flex-direction:   column;
    width:            min(400px, calc(100vw - 32px));
    height:           min(520px, calc(100dvh - 100px));
    background:       var(--echo-white);
    border-radius:    14px;
    overflow:         hidden;
    box-shadow:       0 12px 48px rgba(0, 0, 0, 0.18),
                      0 2px  8px  rgba(0, 0, 0, 0.07);
    margin-bottom:    14px;
    /* Fermé par défaut */
    transform-origin: bottom right;
    transform:        scale(0.85) translateY(16px);
    opacity:          0;
    pointer-events:   none;
    transition:       transform 0.24s cubic-bezier(0.34, 1.56, 0.64, 1),
                      opacity   0.18s ease;
}

.chatbot-widget.is-open .chatbot-panel {
    transform:      scale(1) translateY(0);
    opacity:        1;
    pointer-events: auto;
}

/* ── En-tête ──────────────────────────────────────────────────────── */

.chatbot-header {
    display:       flex;
    align-items:   center;
    gap:           10px;
    padding:       14px 16px 13px;
    background:    var(--echo-black);
    border-bottom: 3px solid var(--echo-taupe);
    flex-shrink:   0;
}

.chatbot-header__dot {
    display:       inline-block;
    width:         8px;
    height:        8px;
    border-radius: 50%;
    background:    var(--echo-taupe);
    flex-shrink:   0;
}

.chatbot-header__title {
    font-size:   0.82rem;
    font-weight: 700;
    color:       var(--echo-white);
    line-height: 1.2;
    letter-spacing: 0.02em;
}

.chatbot-header__sub {
    font-size:   0.67rem;
    font-weight: 400;
    color:       rgba(255, 255, 255, 0.45);
    margin-left: 2px;
    white-space: nowrap;
}

/* Bouton × */
.chatbot-close {
    margin-left:   auto;
    background:    transparent;
    border:        none;
    padding:       5px;
    cursor:        pointer;
    color:         rgba(255, 255, 255, 0.5);
    display:       flex;
    align-items:   center;
    border-radius: 4px;
    transition:    color 0.15s ease, background 0.15s ease;
    flex-shrink:   0;
    line-height:   0;
}

.chatbot-close:hover {
    color:      var(--echo-white);
    background: rgba(255, 255, 255, 0.10);
}

/* ── Zone de messages ─────────────────────────────────────────────── */

.chatbot-messages {
    display:         flex;
    flex-direction:  column;
    gap:             10px;
    padding:         16px;
    flex:            1;
    overflow-y:      auto;
    background:      var(--echo-taupe-lt);
    scroll-behavior: smooth;
}

.chatbot-messages::-webkit-scrollbar { width: 4px; }
.chatbot-messages::-webkit-scrollbar-track { background: transparent; }
.chatbot-messages::-webkit-scrollbar-thumb {
    background:    var(--echo-taupe-mid);
    border-radius: 2px;
}

/* ── Bulles ───────────────────────────────────────────────────────── */

.chatbot-message {
    max-width:   78%;
    padding:     10px 14px;
    line-height: 1.55;
    word-break:  break-word;
    font-size:   0.855rem;
}

/* Question utilisateur — noir, droite */
.chatbot-message--user {
    align-self:    flex-end;
    background:    var(--echo-black);
    color:         var(--echo-white);
    border-radius: 18px 18px 4px 18px;
}

/* Réponse bot — blanc, gauche */
.chatbot-message--bot {
    align-self:    flex-start;
    background:    var(--echo-white);
    color:         var(--echo-black);
    border-radius: 18px 18px 18px 4px;
    box-shadow:    0 1px 4px rgba(0, 0, 0, 0.07);
}

/* Thinking */
.chatbot-message--bot.thinking {
    background:  transparent;
    color:       var(--echo-subtle);
    font-style:  italic;
    box-shadow:  none;
}

/* Erreur */
.chatbot-message--bot.error {
    background: #fdf0f0;
    color:      #a03030;
}

/* ── Zone de saisie ───────────────────────────────────────────────── */

.chatbot-form {
    display:     flex;
    border-top:  1px solid var(--echo-taupe-mid);
    background:  var(--echo-white);
    flex-shrink: 0;
}

.chatbot-input {
    flex:        1;
    padding:     13px 14px;
    border:      none;
    outline:     none;
    font-family: var(--echo-font);
    font-size:   0.875rem;
    color:       var(--echo-black);
    background:  transparent;
    min-width:   0;
}

.chatbot-input::placeholder { color: var(--echo-subtle); }

.chatbot-input:disabled {
    opacity: 0.5;
    cursor:  not-allowed;
}

.chatbot-submit {
    padding:        13px 18px;
    border:         none;
    border-left:    1px solid var(--echo-taupe-mid);
    background:     var(--echo-taupe);
    color:          var(--echo-white);
    font-family:    var(--echo-font);
    font-size:      0.72rem;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    cursor:         pointer;
    transition:     background 0.15s ease;
    white-space:    nowrap;
}

.chatbot-submit:hover:not(:disabled) { background: var(--echo-taupe-dk); }

.chatbot-submit:focus-visible {
    outline:        2px solid var(--echo-taupe);
    outline-offset: -2px;
}

.chatbot-submit:disabled {
    background: rgba(140, 123, 107, 0.35);
    cursor:     not-allowed;
}

/* ── Bouton toggle flottant ──────────────────────────────────────── */

.chatbot-toggle {
    position:        relative;
    width:           56px;
    height:          56px;
    border-radius:   50%;
    background:      var(--echo-black);
    border:          none;
    cursor:          pointer;
    display:         flex;
    align-items:     center;
    justify-content: center;
    box-shadow:      0 4px 20px rgba(0, 0, 0, 0.30),
                     0 2px  6px rgba(0, 0, 0, 0.15);
    transition:      background 0.15s ease, transform 0.2s ease, box-shadow 0.15s ease;
    flex-shrink:     0;
    color:           var(--echo-white);
}

.chatbot-toggle:hover {
    background: var(--echo-taupe-dk);
    transform:  scale(1.07);
    box-shadow: 0 6px 26px rgba(0, 0, 0, 0.35),
                0 2px  8px rgba(0, 0, 0, 0.18);
}

.chatbot-toggle:focus-visible {
    outline:        2px solid var(--echo-taupe);
    outline-offset: 3px;
}

/* Icônes */
.chatbot-toggle__icon {
    width:      24px;
    height:     24px;
    position:   absolute;
    transition: transform 0.22s ease, opacity 0.18s ease;
}

.chatbot-toggle__icon--chat {
    opacity:   1;
    transform: scale(1) rotate(0deg);
}

.chatbot-toggle__icon--close {
    opacity:   0;
    transform: scale(0.6) rotate(-90deg);
}

.chatbot-widget.is-open .chatbot-toggle__icon--chat {
    opacity:   0;
    transform: scale(0.6) rotate(90deg);
}

.chatbot-widget.is-open .chatbot-toggle__icon--close {
    opacity:   1;
    transform: scale(1) rotate(0deg);
}

/* ── Accessibilité ────────────────────────────────────────────────── */

.screen-reader-text {
    position:    absolute;
    width:       1px;
    height:      1px;
    padding:     0;
    margin:      -1px;
    overflow:    hidden;
    clip:        rect(0, 0, 0, 0);
    white-space: nowrap;
    border:      0;
}

/* ── Responsive mobile ────────────────────────────────────────────── */

@media (max-width: 480px) {
    .chatbot-widget {
        bottom: 0;
        right:  0;
        left:   0;
    }

    .chatbot-panel {
        width:         100vw;
        height:        calc(100dvh - 80px);
        max-height:    none;
        border-radius: 14px 14px 0 0;
        margin-bottom: 0;
    }

    .chatbot-toggle {
        margin-right: 16px;
        margin-bottom: 16px;
    }

    .chatbot-message { max-width: 88%; }

    .chatbot-submit {
        padding:   13px 12px;
        font-size: 0.68rem;
    }
}