/* ============================================================
   BB BiBi Chat — chatbot conversationnel glassmorphism
   Bulles rgb(255 255 255 / 25%) · fond transparent (aucun bg section)
   DA Agence BB : Roboto Flex, accents rose/vert/bleu
   ============================================================ */

.bb-bibi {
    --bb-bubble: rgba(255, 255, 255, 0.25);
    --bb-bubble-user: rgba(255, 255, 255, 0.16);
    --bb-text: #ffffff;
    --bb-muted: rgba(255, 255, 255, 0.55);
    --bb-radius: 24px;
    --bb-rose: #F31B8C;
    --bb-vert: #E1ED63;
    --bb-bleu: #3B83DD;
    --bb-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --bb-ease: cubic-bezier(0.22, 1, 0.36, 1);

    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: var(--bb-bibi-height, 560px);
    max-height: var(--bb-bibi-height, 560px);
    background: transparent;           /* aucun bg de section */
    font-family: "Roboto Flex", sans-serif;
    color: var(--bb-text);
    overflow: hidden;
    isolation: isolate;
}
.bb-bibi *, .bb-bibi *::before, .bb-bibi *::after { box-sizing: border-box; }

/* ─── zone scrollable, ancrée en bas ─── */
.bb-bibi__scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;        /* bulles ancrées en HAUT au départ */
    padding: clamp(16px, 3vw, 32px) clamp(16px, 4vw, 56px) clamp(20px, 3vw, 32px);
    scroll-behavior: smooth;
    /* scrollbar masquée */
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.bb-bibi__scroll::-webkit-scrollbar { width: 0; height: 0; display: none; }

.bb-bibi__thread {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
}

/* ─── groupes (BiBi / user) ─── */
.bb-bibi__group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 14px;
}
.bb-bibi__group--bot  { align-items: flex-start; }
.bb-bibi__group--user { align-items: flex-end; }

.bb-bibi__sender {
    font-size: 14px;
    font-weight: 500;
    color: var(--bb-text);
    margin: 0 6px 4px;
    opacity: 0;
    animation: bb-fade .4s var(--bb-ease) forwards;
}
.bb-bibi__sender small {
    color: var(--bb-muted);
    font-weight: 400;
    margin-left: 8px;
}

/* ─── bulles ─── */
.bb-bibi__bubble {
    position: relative;
    max-width: min(560px, 78%);
    padding: 16px 22px;
    border-radius: var(--bb-radius);
    background: var(--bb-bubble);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    font-size: clamp(14px, 1.05vw, 16px);
    line-height: 1.5;
    letter-spacing: -0.005em;
    color: var(--bb-text);
    word-wrap: break-word;
    white-space: pre-wrap;             /* préserve les retours à la ligne saisis */
    transform-origin: bottom var(--bb-origin, left);
    will-change: transform, opacity;
    animation: bb-pop .7s var(--bb-ease) forwards;
    box-shadow: 0 8px 30px rgba(0,0,0,0.12);
}
.bb-bibi__group--bot  .bb-bibi__bubble { --bb-origin: left;  border-bottom-left-radius: 8px; }
.bb-bibi__group--user .bb-bibi__bubble { --bb-origin: right; background: var(--bb-bubble-user); border-bottom-right-radius: 8px; }

/* bulle emoji-only : plus grande, sans fond presque */
.bb-bibi__bubble--emoji {
    font-size: 32px;
    padding: 8px 16px;
    line-height: 1;
}

/* ─── avatar ─── */
.bb-bibi__avatar {
    width: 72px;
    height: 72px;
    object-fit: contain;
    margin: 4px 6px 0;
    background: none;                  /* pas de fond/cercle */
    border-radius: 0;
    box-shadow: none;
    opacity: 0;
    transform: scaleX(-1);             /* image retournée (miroir) */
    animation: bb-avatar-in .7s var(--bb-ease) forwards;
}

/* ─── indicateur de frappe ─── */
.bb-bibi__typing {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 18px 22px;
    border-radius: var(--bb-radius);
    border-bottom-left-radius: 8px;
    background: var(--bb-bubble);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    animation: bb-pop .6s var(--bb-ease) forwards;
}
.bb-bibi__typing span {
    width: 8px; height: 8px; border-radius: 50%;
    background: rgba(255,255,255,0.7);
    animation: bb-typing 1.5s infinite ease-in-out;
}
.bb-bibi__typing span:nth-child(2) { animation-delay: .18s; }
.bb-bibi__typing span:nth-child(3) { animation-delay: .36s; }

/* ─── ligne d'input DANS le fil (défile avec la conversation) ─── */
.bb-bibi__inputRow {
    display: flex;
    justify-content: flex-end;         /* aligné à droite comme "Vous" */
    width: 100%;
    margin-top: 14px;
}
.bb-bibi__inputCard {
    width: 100%;
    max-width: min(460px, 100%);       /* façon bulle, aligné à droite */
    margin-left: auto;
    background: var(--bb-bubble);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    border-radius: var(--bb-radius);
    border-bottom-right-radius: 10px;
    padding: 16px 18px 14px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.18);
    animation: bb-pop .85s var(--bb-ease) forwards;
    transform-origin: bottom right;
}
/* carte de choix (chips) : plus large pour éviter les retours à la ligne moches */
.bb-bibi__inputCard--choices { max-width: min(640px, 100%); }
.bb-bibi__inputLabel {
    display: block;
    font-size: 13px;
    color: var(--bb-muted);
    font-weight: 500;
    letter-spacing: 0.01em;
    margin-bottom: 10px;
}

/* Champ : glass translucide, texte blanc — overrides forcés contre le BB Theme
   (qui repassait l'input en fond noir/gris). */
.bb-bibi input.bb-bibi__field,
.bb-bibi textarea.bb-bibi__field {
    width: 100% !important;
    box-sizing: border-box !important;
    background: rgba(255,255,255,0.10) !important;
    border: 1.5px solid rgba(255,255,255,0.28) !important;
    border-radius: 14px !important;
    padding: 13px 16px !important;
    margin: 0 !important;
    font-family: "Roboto Flex", sans-serif !important;
    font-size: 16px !important;
    line-height: 1.4 !important;
    color: #ffffff !important;
    box-shadow: none !important;
    outline: none !important;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    transition: border-color .3s var(--bb-ease), background .3s var(--bb-ease) !important;
}
.bb-bibi .bb-bibi__field::placeholder { color: rgba(255,255,255,0.42) !important; }
.bb-bibi .bb-bibi__field:focus {
    border-color: rgba(255,255,255,0.85) !important;
    background: rgba(255,255,255,0.16) !important;
}
.bb-bibi textarea.bb-bibi__field { resize: vertical; min-height: 84px; }
.bb-bibi .bb-bibi__field.is-error { border-color: #ff7a80 !important; background: rgba(255,91,99,0.12) !important; }

.bb-bibi__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-top: 12px;
    flex-wrap: wrap;
}
.bb-bibi__err { color: #ffb3b6; font-size: 12px; min-height: 14px; }

/* bouton OK : ghost discret (translucide), pas de gros pill blanc */
.bb-bibi button.bb-bibi__ok {
    appearance: none !important;
    -webkit-appearance: none !important;
    cursor: pointer;
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 16px !important;
    border-radius: 12px !important;
    border: 1.5px solid rgba(255,255,255,0.3) !important;
    background: rgba(255,255,255,0.08) !important;
    color: #ffffff !important;
    font-family: "Roboto Flex", sans-serif !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    text-transform: none !important;
    box-shadow: none !important;
    transition: background .25s var(--bb-ease), border-color .25s var(--bb-ease), opacity .25s !important;
}
.bb-bibi button.bb-bibi__ok:hover {
    background: rgba(255,255,255,0.2) !important;
    border-color: rgba(255,255,255,0.7) !important;
}
.bb-bibi button.bb-bibi__ok:disabled { opacity: .4; cursor: not-allowed; }
.bb-bibi__ok .bb-bibi__kbd { font-size: 12px; opacity: .55; }

/* ─── choix (chips) ─── */
.bb-bibi__choices {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 4px;
}
/* Chips : bordure FORCÉE (box-sizing + !important) pour empêcher le BB Theme
   d'ajouter/modifier la bordure au hover (qui faisait "sauter" la largeur). */
.bb-bibi button.bb-bibi__chip {
    box-sizing: border-box !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    cursor: pointer;
    border: 1.5px solid rgba(255,255,255,0.35) !important;
    background: rgba(255,255,255,0.08) !important;
    color: #ffffff !important;
    font-family: "Roboto Flex", sans-serif !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;
    padding: 10px 18px !important;
    border-radius: 999px !important;
    text-transform: none !important;
    box-shadow: none !important;
    transition: background .25s var(--bb-ease), border-color .25s var(--bb-ease), color .25s var(--bb-ease) !important;
}
.bb-bibi button.bb-bibi__chip:hover {
    border-color: rgba(255,255,255,0.9) !important;
    background: rgba(255,255,255,0.16) !important;
}
.bb-bibi button.bb-bibi__chip.is-selected {
    background: #ffffff !important;
    color: #1F2022 !important;
    border-color: #ffffff !important;
}

/* greeting wave bubble */
.bb-bibi__group--user .bb-bibi__bubble.bb-bibi__bubble--wave { animation: bb-wave-in .6s var(--bb-spring) forwards; }

/* ─── keyframes ─── */
@keyframes bb-pop {
    from { opacity: 0; transform: translateY(16px) scale(.92); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
/* avatar : même pop mais on conserve le miroir scaleX(-1) en état final */
@keyframes bb-avatar-in {
    from { opacity: 0; transform: translateY(16px) scale(.92) scaleX(-1); }
    to   { opacity: 1; transform: translateY(0) scale(1) scaleX(-1); }
}
@keyframes bb-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes bb-wave-in {
    0%   { opacity: 0; transform: translateY(16px) scale(.6) rotate(-12deg); }
    60%  { opacity: 1; transform: translateY(0) scale(1.05) rotate(8deg); }
    100% { opacity: 1; transform: translateY(0) scale(1) rotate(0); }
}
@keyframes bb-typing {
    0%, 60%, 100% { transform: translateY(0); opacity: .5; }
    30% { transform: translateY(-6px); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .bb-bibi__bubble, .bb-bibi__avatar, .bb-bibi__typing, .bb-bibi__inputCard, .bb-bibi__sender {
        animation: none !important; opacity: 1 !important; transform: none !important;
    }
    .bb-bibi__avatar { transform: scaleX(-1) !important; } /* garde le miroir */
}

/* honeypot */
.bb-bibi__hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }

@media (max-width: 640px) {
    .bb-bibi__bubble { max-width: 86%; }
    .bb-bibi__avatar { width: 48px; height: 48px; }
}