/* ============================================================
   CHATBOT WIDGET — matiereacreation.fr — "Conseil Matière"
   Lot 2 (refonte visuelle, cette révision) — succède au claymorphism 3D
   (2026-07-27) recoloré Éclat Vivant (2026-07-30). Même palette de base
   (corail #FF6B4A / turquoise #0FA3A3 / jaune #FFC94A) mais employée avec
   plus de hiérarchie et de retenue : moins d'animations décoratives, moins
   de gradients systématiques, plus de blanc/air, esprit "artisanat premium"
   plutôt que "chatbot IA générique 2023".
   ============================================================ */

:root {
    --cb-coral       : #FF6B4A;
    --cb-coral-soft  : #FFF0EC;
    --cb-coral-dark  : #C94E31;
    --cb-teal        : #0FA3A3;
    --cb-teal-soft   : #E9F8F7;
    --cb-teal-dark   : #0A7373;
    --cb-yellow      : #FFC94A;
    --cb-yellow-soft : #FFF7DF;
    --cb-yellow-dark : #8A6C0A;
    --cb-text        : #292826;
    --cb-muted       : #706D68;
    --cb-bg          : #FFFFFF;
    --cb-bg-soft     : #F7F7F5;
    --cb-border      : #E8E5E0;
    --cb-radius-panel: 24px;
    --cb-radius-card : 16px;
    --cb-radius-bub  : 16px;
    --cb-shadow-panel: 0 24px 64px rgba(41,40,38,.18), 0 2px 10px rgba(41,40,38,.08);
    --cb-shadow-trig : 0 10px 28px rgba(255,107,74,.30);
    --cb-w           : 430px;
    --cb-h           : min(700px, calc(100dvh - 40px));
    --cb-font        : 'Inter','DM Sans',system-ui,-apple-system,sans-serif;
}

@keyframes cbPulse {
    0%,100% { opacity:1; transform:scale(1); }
    50%      { opacity:.55; transform:scale(1.25); }
}
@keyframes cbBounce {
    0%,60%,100% { transform:translateY(0); opacity:.5; }
    30%          { transform:translateY(-4px); opacity:1; }
}
@keyframes cbFadeUp {
    from { opacity:0; transform:translateY(6px); }
    to   { opacity:1; transform:translateY(0); }
}

/* ── Bouton déclencheur (desktop) ────────────────────────── */
#cb-trigger {
    position    : fixed;
    bottom      : 24px;
    right       : 24px;
    z-index     : 9998;
    display     : flex;
    align-items : center;
    gap         : 10px;
    background  : var(--cb-text);
    color       : var(--cb-bg);
    border      : none;
    border-radius: 50px;
    padding     : 8px 20px 8px 8px;
    cursor      : pointer;
    box-shadow  : var(--cb-shadow-trig);
    font-family : var(--cb-font);
    font-size   : 13.5px;
    font-weight : 700;
    transition  : transform .15s ease, box-shadow .15s ease, background .15s ease;
    user-select : none;
}
#cb-trigger:hover {
    transform   : translateY(-2px);
    box-shadow  : 0 14px 34px rgba(255,107,74,.38);
}
#cb-trigger:focus-visible {
    outline: 2px solid var(--cb-coral);
    outline-offset: 3px;
}
#cb-trigger.cb-open {
    background  : var(--cb-coral-dark);
}

.cb-trigger__avatar,
.cb-trigger__avatar--initials {
    width         : 38px;
    height        : 38px;
    border-radius : 50%;
    object-fit    : cover;
    flex-shrink   : 0;
}
.cb-trigger__avatar--initials {
    display         : flex;
    align-items     : center;
    justify-content : center;
    background      : linear-gradient(135deg,var(--cb-coral),var(--cb-coral-dark));
    color           : #fff;
    font-weight     : 800;
    font-size       : 15px;
}
.cb-trigger__dot {
    width        : 8px;
    height       : 8px;
    border-radius: 50%;
    background   : var(--cb-yellow);
    box-shadow   : 0 0 0 3px rgba(255,201,74,.28);
    flex-shrink  : 0;
    animation    : cbPulse 2.4s infinite;
}
.cb-trigger__label { line-height:1.2; }
.cb-trigger__name  { display:block; font-weight:800; font-size:13.5px; }
.cb-trigger__sub   { display:block; font-size:10.5px; color:rgba(255,255,255,.68); font-weight:600; }

/* ── Panel principal ─────────────────────────────────────── */
#cb-panel {
    position      : fixed;
    bottom        : 24px;
    right         : 24px;
    z-index       : 9999;
    width         : var(--cb-w);
    height        : var(--cb-h);
    background    : var(--cb-bg);
    border-radius : var(--cb-radius-panel);
    box-shadow    : var(--cb-shadow-panel);
    border        : 1px solid var(--cb-border);
    display       : flex;
    flex-direction: column;
    overflow      : hidden;
    font-family   : var(--cb-font);
    color         : var(--cb-text);
    transform     : translateY(16px) scale(.98);
    opacity       : 0;
    pointer-events: none;
    transition    : transform .18s cubic-bezier(.22,1,.36,1), opacity .14s ease;
}
#cb-panel.cb-visible {
    transform     : translateY(0) scale(1);
    opacity       : 1;
    pointer-events: all;
}

/* ── Header panel ────────────────────────────────────────── */
.cb-header {
    background    : var(--cb-bg);
    border-bottom : 1px solid var(--cb-border);
    color         : var(--cb-text);
    padding       : 14px 14px 14px 16px;
    display       : flex;
    align-items   : center;
    gap           : 12px;
    flex-shrink   : 0;
}
.cb-header__avatar,
.cb-header__avatar--initials {
    width        : 38px;
    height       : 38px;
    border-radius: 50%;
    object-fit   : cover;
    flex-shrink  : 0;
}
.cb-header__avatar--initials {
    display         : flex;
    align-items     : center;
    justify-content : center;
    background      : linear-gradient(135deg,var(--cb-teal),var(--cb-teal-dark));
    color           : #fff;
    font-weight     : 800;
    font-size       : 15px;
}
.cb-header__info { flex:1; min-width:0; }
.cb-header__name {
    font-weight: 800;
    font-size  : 14.5px;
    display    : flex;
    align-items: center;
    gap        : 6px;
}
.cb-header__name::before { content:'✦'; color:var(--cb-coral); font-size:12px; }
.cb-header__status {
    font-size  : 11.5px;
    color      : var(--cb-muted);
    font-weight: 600;
    display    : flex;
    align-items: center;
    gap        : 6px;
    margin-top : 1px;
}
.cb-header__status::before {
    content      : '';
    display      : inline-block;
    width        : 6px;
    height       : 6px;
    border-radius: 50%;
    background   : var(--cb-yellow);
    flex-shrink  : 0;
}
/* États human handoff (voir chatbot-widget.js, setHeaderStatus()) — seuls
   --waiting et --human sont réellement déclenchés par un statut serveur
   confirmé à ce jour (mac_chatbot_session.status). Préparé mais honnête :
   aucune fausse disponibilité n'est jamais affichée. */
.cb-header--waiting .cb-header__status::before { background:var(--cb-yellow); animation:cbPulse 1.6s infinite; }
.cb-header--human .cb-header__status::before   { background:var(--cb-teal); }
.cb-header--ended .cb-header__status::before   { background:var(--cb-muted); }
.cb-header--human .cb-header__status,
.cb-header--waiting .cb-header__status { color:var(--cb-text); }

.cb-header__close,
.cb-header__icon {
    background : var(--cb-bg-soft);
    border     : 1px solid transparent;
    color      : var(--cb-muted);
    cursor     : pointer;
    padding    : 0;
    border-radius: 50%;
    line-height: 1;
    transition : background .15s ease, color .15s ease;
    flex-shrink: 0;
}
.cb-header__close {
    /* Zone tactile 44px (WCAG 2.5.5) — le glyphe reste discret. */
    width      : 40px;
    height     : 40px;
    font-size  : 15px;
}
.cb-header__icon {
    width      : 40px;
    height     : 40px;
    font-size  : 15px;
}
.cb-header__close:hover,
.cb-header__icon:hover { background:var(--cb-coral-soft); color:var(--cb-coral-dark); }
.cb-header__close:focus-visible,
.cb-header__icon:focus-visible {
    outline: 2px solid var(--cb-coral);
    outline-offset: 2px;
}

/* ── Bannière RGPD ────────────────────────────────────────── */
.cb-rgpd {
    display      : flex;
    align-items  : center;
    gap          : 10px;
    padding      : 9px 14px;
    background   : var(--cb-yellow-soft);
    font-size    : 11px;
    color        : var(--cb-yellow-dark);
    flex-shrink  : 0;
    border-bottom: 1px solid var(--cb-border);
}
.cb-rgpd span { flex:1; line-height:1.4; }
.cb-rgpd button {
    background   : var(--cb-text);
    color        : #fff;
    border       : none;
    border-radius: 20px;
    padding      : 6px 13px;
    font-size    : 10.5px;
    font-weight  : 700;
    cursor       : pointer;
    flex-shrink  : 0;
}
.cb-rgpd button:focus-visible { outline:2px solid var(--cb-coral); outline-offset:2px; }

/* ── Formulaire email transcript ──────────────────────────── */
.cb-email-form {
    display      : flex;
    align-items  : center;
    gap          : 6px;
    padding      : 10px 14px;
    background   : var(--cb-bg-soft);
    border-bottom: 1px solid var(--cb-border);
    flex-shrink  : 0;
}
.cb-email-form input {
    flex         : 1;
    border       : 1px solid var(--cb-border);
    background   : var(--cb-bg);
    border-radius: 20px;
    padding      : 8px 13px;
    font-size    : 12.5px;
    font-family  : inherit;
    color        : var(--cb-text);
}
.cb-email-form input:focus-visible {
    outline: 2px solid var(--cb-teal);
    outline-offset: 1px;
}
.cb-email-form button {
    background   : var(--cb-teal);
    color        : #fff;
    border       : none;
    border-radius: 20px;
    padding      : 8px 14px;
    font-size    : 12px;
    font-weight  : 700;
    cursor       : pointer;
    flex-shrink  : 0;
}
.cb-email-form button:focus-visible { outline:2px solid var(--cb-teal-dark); outline-offset:2px; }
.cb-email-cancel { background:transparent !important; color:var(--cb-muted) !important; padding:6px 8px !important; }

/* ── Bouton pièce jointe (composer "+") ───────────────────── */
.cb-attach {
    background   : var(--cb-bg-soft);
    border       : 1px solid transparent;
    color        : var(--cb-muted);
    cursor       : pointer;
    border-radius: 50%;
    /* Zone tactile 44px min (Lot 1, point 4). */
    width        : 44px;
    height       : 44px;
    display      : flex;
    align-items  : center;
    justify-content: center;
    flex-shrink  : 0;
    transition   : color .15s ease, background .15s ease;
}
.cb-attach:hover { color:var(--cb-coral); background:var(--cb-coral-soft); }
.cb-attach svg { width:18px; height:18px; }

/* ── Image envoyée dans une bulle ─────────────────────────── */
.cb-msg__img {
    max-width    : 200px;
    max-height   : 200px;
    border-radius: 14px;
    cursor       : pointer;
    display      : block;
}

/* ── Marqueur "réponse interrompue" (Lot 1, point 5) ──────── */
.cb-msg__interrupted {
    font-size  : 10.5px;
    color      : var(--cb-muted);
    margin-top : 4px;
    font-style : italic;
}

/* ── CSAT (étoiles à la fermeture) ────────────────────────── */
.cb-csat-overlay {
    position        : absolute;
    inset            : 0;
    background       : rgba(41,40,38,.5);
    z-index          : 5;
    align-items      : center;
    justify-content  : center;
}
.cb-csat-card {
    background    : var(--cb-bg);
    border-radius : var(--cb-radius-card);
    padding       : 22px 20px;
    width         : 84%;
    text-align    : center;
    box-shadow    : var(--cb-shadow-panel);
    border        : 1px solid var(--cb-border);
}
.cb-csat-title {
    font-size  : 13.5px;
    color      : var(--cb-text);
    margin     : 0 0 14px;
    font-weight: 700;
}
.cb-csat-stars {
    display        : flex;
    justify-content: center;
    gap            : 4px;
    margin-bottom  : 14px;
}
.cb-csat-stars button {
    background : none;
    border     : none;
    font-size  : 25px;
    color      : var(--cb-border);
    cursor     : pointer;
    transition : color .15s, transform .1s;
    line-height: 1;
    padding    : 4px;
}
.cb-csat-stars button:hover,
.cb-csat-stars button:focus-visible { color:var(--cb-yellow-dark); transform:scale(1.12); }
.cb-csat-stars button:focus-visible { outline:2px solid var(--cb-coral); outline-offset:2px; border-radius:6px; }
.cb-csat-skip {
    background : none;
    border     : none;
    color      : var(--cb-muted);
    font-size  : 11.5px;
    cursor     : pointer;
    text-decoration: underline;
}
.cb-csat-skip:focus-visible { outline:2px solid var(--cb-coral); outline-offset:2px; }

/* ── Accueil ──────────────────────────────────────────────── */
.cb-welcome { flex-shrink:0; overflow-y:auto; }
.cb-welcome__intro {
    padding    : 20px 20px 4px;
}
.cb-welcome__title {
    font-size  : 16px;
    font-weight: 800;
    color      : var(--cb-text);
    margin     : 0 0 4px;
    line-height: 1.35;
}
.cb-welcome__title strong { color:var(--cb-coral-dark); }
.cb-welcome__sub {
    font-size  : 12.5px;
    color      : var(--cb-muted);
    font-weight: 500;
    margin     : 0;
    line-height: 1.5;
}

/* Grille de cartes d'action — 2 colonnes desktop, 1 colonne mobile */
.cb-cards {
    display               : grid;
    grid-template-columns : 1fr 1fr;
    gap                   : 10px;
    padding               : 14px 20px 6px;
}
@media (max-width: 420px) {
    .cb-cards { grid-template-columns: 1fr; }
}

/* ── Infrastructure de carte générique ────────────────────── */
.cb-card {
    background   : var(--cb-bg-soft);
    border       : 1px solid var(--cb-border);
    border-radius: var(--cb-radius-card);
    padding      : 12px 13px;
    text-align   : left;
    font-family  : inherit;
    color        : var(--cb-text);
}
.cb-card__title {
    font-size  : 12.5px;
    font-weight: 700;
    margin     : 0 0 2px;
    display    : flex;
    align-items: center;
    gap        : 6px;
}
.cb-card__meta {
    font-size  : 10.5px;
    color      : var(--cb-muted);
    font-weight: 600;
    margin     : 0 0 4px;
}
.cb-card__body {
    font-size  : 11.5px;
    color      : var(--cb-muted);
    line-height: 1.45;
    margin     : 0;
}
.cb-card__actions {
    display    : flex;
    gap        : 6px;
    margin-top : 8px;
    flex-wrap  : wrap;
}

/* Carte d'action de l'accueil (bouton cliquable) */
.cb-card--action {
    cursor      : pointer;
    display     : flex;
    flex-direction: column;
    gap         : 6px;
    transition  : transform .12s ease, box-shadow .12s ease, border-color .12s ease;
    appearance  : none;
    width       : 100%;
}
.cb-card--action:hover,
.cb-card--action:focus-visible {
    border-color: var(--cb-coral);
    box-shadow  : 0 6px 18px rgba(255,107,74,.14);
    transform   : translateY(-1px);
}
.cb-card--action:focus-visible { outline:2px solid var(--cb-coral); outline-offset:2px; }
.cb-card--action:active { transform:translateY(0); }
.cb-card__icon {
    width          : 32px;
    height         : 32px;
    border-radius  : 10px;
    display        : flex;
    align-items    : center;
    justify-content: center;
    font-size      : 16px;
    flex-shrink    : 0;
    background     : var(--cb-coral-soft);
}
.cb-card--action:nth-child(1) .cb-card__icon { background:var(--cb-coral-soft); }
.cb-card--action:nth-child(2) .cb-card__icon { background:var(--cb-teal-soft); }
.cb-card--action:nth-child(3) .cb-card__icon { background:var(--cb-yellow-soft); }
.cb-card--action:nth-child(4) .cb-card__icon { background:var(--cb-coral-soft); }
.cb-card__label {
    font-size  : 12.5px;
    font-weight: 700;
    color      : var(--cb-text);
}
.cb-card__desc {
    font-size  : 10.5px;
    color      : var(--cb-muted);
    font-weight: 500;
    line-height: 1.35;
}

/* Variantes sémantiques (infra prête — voir cartes info/erreur/kit à venir) */
.cb-card--project  { border-left:3px solid var(--cb-teal); }
.cb-card--product   { border-left:3px solid var(--cb-coral); }
.cb-card--info      { background:var(--cb-teal-soft); border-color:transparent; }
.cb-card--warning   { background:var(--cb-yellow-soft); border-color:transparent; }
.cb-card--warning .cb-card__title,
.cb-card--warning .cb-card__body { color:var(--cb-yellow-dark); }
.cb-card--human     { background:var(--cb-teal-soft); border-color:transparent; }

/* ── Lot 3 "Orchestration conversationnelle" (2026-09-10) — composants
   structurés (product/project_result/clarification/source_info/status)
   injectés dans le fil de conversation. Réutilise entièrement l'infra de
   carte ci-dessus (.cb-card/.cb-card__title/__meta/__body/__actions) —
   ajouts strictement additifs, aucune règle existante modifiée. ──────────── */
.cb-struct-card {
    width      : 100%;
    max-width  : 320px;
    margin-top : 4px;
}
.cb-card__image {
    width        : 100%;
    max-height   : 140px;
    object-fit   : cover;
    border-radius: 8px;
    margin-bottom: 8px;
    display      : block;
}
.cb-card__link {
    display      : inline-flex;
    align-items  : center;
    gap          : 4px;
    font-size    : 11.5px;
    font-weight  : 700;
    color        : var(--cb-coral-dark);
    text-decoration: none;
}
.cb-card__link:hover,
.cb-card__link:focus-visible { text-decoration:underline; }

/* Chips de clarification — mêmes styles que .cb-chip (raccourcis d'accueil)
   mais en grille qui s'enroule (contrairement à .cb-chips, scroll horizontal
   pensé pour l'accueil) — un jeu d'options fermées doit rester entièrement
   visible sans défilement caché. */
.cb-card__chips {
    display  : flex;
    flex-wrap: wrap;
    gap      : 6px;
    margin-top: 8px;
}
.cb-clarify-chip {
    background   : var(--cb-bg);
    border       : 1px solid var(--cb-border);
    border-radius: 20px;
    padding      : 6px 12px;
    font-size    : 11.5px;
    font-weight  : 600;
    color        : var(--cb-text);
    cursor       : pointer;
    transition   : border-color .12s ease, background .12s ease, opacity .12s ease;
}
.cb-clarify-chip:hover:not(:disabled) { border-color:var(--cb-coral); background:var(--cb-coral-soft); }
.cb-clarify-chip:focus-visible { outline:2px solid var(--cb-coral); outline-offset:2px; }
.cb-clarify-chip:disabled { opacity:.45; cursor:default; }
.cb-clarify-chip--picked {
    background   : var(--cb-coral);
    color        : #fff;
    border-color : var(--cb-coral);
    opacity      : 1;
}

/* Badge de provenance — discret, jamais un composant .cb-card complet
   (mission Lot 3, point 6 : indication de source, pas un détail interne). */
.cb-source-badge {
    display      : inline-flex;
    align-items  : center;
    gap          : 4px;
    font-size    : 10px;
    font-weight  : 600;
    color        : var(--cb-muted);
    margin-top   : 2px;
    padding      : 0 2px;
}

.cb-welcome__hint {
    padding    : 6px 20px 4px;
    font-size  : 10.5px;
    color      : var(--cb-muted);
    font-weight: 500;
}

/* ── Chips de suggestions (raccourcis configurés en cockpit) ─ */
.cb-chips {
    display        : flex;
    flex-wrap      : nowrap;
    gap            : 8px;
    padding        : 6px 20px 18px;
    overflow-x     : auto;
    scrollbar-width: none;
}
.cb-chips::-webkit-scrollbar { display:none; }
.cb-chip {
    background   : var(--cb-bg);
    border       : 1px solid var(--cb-border);
    border-radius: 20px;
    padding      : 7px 13px;
    font-size    : 11.5px;
    font-weight  : 600;
    color        : var(--cb-text);
    cursor       : pointer;
    white-space  : nowrap;
    flex-shrink  : 0;
    display      : inline-flex;
    align-items  : center;
    gap          : 6px;
    transition   : border-color .12s ease, background .12s ease;
}
.cb-chip:hover { border-color:var(--cb-coral); background:var(--cb-coral-soft); }
.cb-chip:focus-visible { outline:2px solid var(--cb-coral); outline-offset:2px; }
.cb-chip__icon { font-size:12px; line-height:1; }

/* ── Messages ────────────────────────────────────────────── */
.cb-messages {
    flex       : 1;
    overflow-y : auto;
    padding    : 14px 16px 6px;
    display    : flex;
    flex-direction: column;
    gap        : 10px;
    scroll-behavior: smooth;
}
.cb-messages::-webkit-scrollbar { width:4px; }
.cb-messages::-webkit-scrollbar-track { background:transparent; }
.cb-messages::-webkit-scrollbar-thumb { background:var(--cb-border); border-radius:4px; }

.cb-msg {
    display       : flex;
    flex-direction: column;
    max-width     : 84%;
    animation     : cbFadeUp .18s ease;
}
.cb-msg--user   { align-self:flex-end; align-items:flex-end; }
.cb-msg--bot    { align-self:flex-start; align-items:flex-start; }
.cb-msg--employee { align-self:flex-start; align-items:flex-start; }

.cb-msg__bubble {
    padding      : 11px 14px;
    border-radius: var(--cb-radius-bub);
    font-size    : 13.5px;
    font-weight  : 500;
    line-height  : 1.5;
    word-break   : break-word;
    position     : relative;
}
.cb-msg--user .cb-msg__bubble {
    background   : var(--cb-coral);
    color        : #fff;
    border-radius: var(--cb-radius-bub) 4px var(--cb-radius-bub) var(--cb-radius-bub);
}
.cb-msg--bot .cb-msg__bubble {
    background   : var(--cb-bg-soft);
    color        : var(--cb-text);
    border       : 1px solid var(--cb-border);
    border-radius: 4px var(--cb-radius-bub) var(--cb-radius-bub) var(--cb-radius-bub);
}
.cb-msg--employee .cb-msg__bubble {
    background   : var(--cb-teal-soft);
    color        : var(--cb-teal-dark);
    border-radius: 4px var(--cb-radius-bub) var(--cb-radius-bub) var(--cb-radius-bub);
    border       : 1px solid rgba(15,163,163,.25);
}
.cb-msg__label {
    font-size  : 10.5px;
    color      : var(--cb-muted);
    margin-top : 3px;
    padding    : 0 2px;
    font-weight: 700;
    display    : flex;
    align-items: center;
    gap        : 4px;
}
.cb-msg__label::before { content:'👤'; font-size:9px; }

/* ── Cartes d'erreur/statut injectées dans le fil (Lot 2) ─── */
.cb-msg--status .cb-card {
    max-width: 100%;
}

/* ── Indicateur "en train d'écrire" ──────────────────────── */
.cb-typing {
    display    : flex;
    gap        : 5px;
    padding    : 12px 14px;
    background : var(--cb-bg-soft);
    border     : 1px solid var(--cb-border);
    border-radius: 4px 16px 16px 16px;
    align-self : flex-start;
}
.cb-typing span {
    width        : 6px;
    height       : 6px;
    border-radius: 50%;
    background   : var(--cb-coral);
    animation    : cbBounce .9s infinite;
}
.cb-typing span:nth-child(2) { animation-delay:.15s; }
.cb-typing span:nth-child(3) { animation-delay:.30s; }

/* ── Feedback 👍/👎 ──────────────────────────────────────── */
.cb-feedback {
    display : flex;
    gap     : 4px;
    margin-top: 4px;
    padding : 0 2px;
}
.cb-feedback__btn {
    background   : none;
    border       : none;
    cursor       : pointer;
    font-size    : 13px;
    line-height  : 1;
    padding      : 5px 6px;
    border-radius: 8px;
    opacity      : .45;
    transition   : opacity .15s, background .15s;
}
.cb-feedback__btn:hover { opacity:.85; background:var(--cb-bg-soft); }
.cb-feedback__btn:focus-visible { outline:2px solid var(--cb-coral); outline-offset:1px; opacity:1; }
.cb-feedback--sent .cb-feedback__btn:not(.cb-feedback__btn--active) { opacity:.2; pointer-events:none; }
.cb-feedback__btn--active { opacity:1; background:var(--cb-coral-soft); pointer-events:none; }

/* ── Notice de clôture (session close par inactivité) ─────── */
.cb-closed-badge {
    align-self   : center;
    display      : flex;
    align-items  : center;
    gap          : 10px;
    max-width    : 94%;
    margin       : 4px 0 8px;
    padding      : 11px 14px;
    background   : var(--cb-bg-soft);
    border       : 1px solid var(--cb-border);
    border-radius: 16px;
    font-size    : 11.5px;
    font-weight  : 600;
    line-height  : 1.5;
    color        : var(--cb-muted);
    text-align   : left;
}
.cb-closed-badge__icon {
    width        : 28px;
    height       : 28px;
    flex-shrink  : 0;
    border-radius: 50%;
    background   : var(--cb-yellow-soft);
    display      : flex;
    align-items  : center;
    justify-content: center;
    font-size    : 14px;
}

/* ── Indicateur humain (badge inline dans le fil) ─────────── */
.cb-human-badge {
    text-align : center;
    font-size  : 11px;
    color      : var(--cb-teal-dark);
    padding    : 4px 10px;
    font-weight: 700;
    align-self : center;
    background : var(--cb-teal-soft);
    border-radius: 20px;
}

/* ── États human handoff préparatoires (Lot 2, §"états préparatoires")
   Non tous déclenchés par le backend actuel — voir commentaires JS. ────── */
.cb-human-offer,
.cb-human-waiting,
.cb-human-connected,
.cb-human-left,
.cb-ai-resumed {
    align-self    : center;
    max-width     : 94%;
    margin        : 2px 0;
    padding       : 8px 14px;
    border-radius : 20px;
    font-size     : 11px;
    font-weight   : 700;
    text-align    : center;
}
.cb-human-offer     { background:var(--cb-yellow-soft); color:var(--cb-yellow-dark); }
.cb-human-waiting   { background:var(--cb-yellow-soft); color:var(--cb-yellow-dark); }
.cb-human-connected { background:var(--cb-teal-soft); color:var(--cb-teal-dark); }
.cb-human-left       { background:var(--cb-bg-soft); color:var(--cb-muted); }
/* Lot 4 "Continuité IA ↔ conseiller humain" (2026-09-10) — bandeau "l'IA
   reprend la main" (transition human/waiting_human → ai en direct). */
.cb-ai-resumed       { background:var(--cb-bg-soft); color:var(--cb-muted); }

/* ── Zone de saisie ──────────────────────────────────────── */
.cb-input-area {
    padding    : 10px 14px 14px;
    flex-shrink: 0;
    border-top : 1px solid var(--cb-border);
}
.cb-input-wrap {
    display       : flex;
    align-items   : flex-end;
    gap           : 6px;
    background    : var(--cb-bg-soft);
    border        : 1px solid var(--cb-border);
    border-radius : 24px;
    padding       : 6px 6px 6px 6px;
    transition    : border-color .15s, box-shadow .15s;
}
.cb-input-wrap:focus-within {
    border-color: var(--cb-coral);
    box-shadow  : 0 0 0 3px var(--cb-coral-soft);
}
.cb-input {
    flex      : 1;
    border    : none;
    background: transparent;
    resize    : none;
    font-size : 13.5px;
    font-family: inherit;
    font-weight: 500;
    color     : var(--cb-text);
    outline   : none;
    max-height: 100px;
    min-height: 22px;
    line-height: 1.45;
    padding   : 7px 6px;
}
.cb-input::placeholder { color:var(--cb-muted); }
.cb-input:disabled { opacity:.55; }
.cb-send {
    background   : var(--cb-coral);
    border       : none;
    border-radius: 50%;
    /* Zone tactile 44px min (Lot 1, point 4). */
    width        : 44px;
    height       : 44px;
    display      : flex;
    align-items  : center;
    justify-content: center;
    cursor       : pointer;
    color        : #fff;
    flex-shrink  : 0;
    transition   : transform .1s ease, background .12s ease;
}
.cb-send:hover:not(:disabled)  { background:var(--cb-coral-dark); }
.cb-send:active:not(:disabled) { transform:scale(.93); }
.cb-send:disabled { opacity:.5; cursor:default; }
.cb-send svg    { width:16px; height:16px; fill:currentColor; }

.cb-footer {
    text-align : center;
    font-size  : 10px;
    color      : var(--cb-muted);
    font-weight: 500;
    padding    : 8px 4px 0;
    line-height: 1.4;
}

/* ── Focus visible — remplace les outline:none aveugles ────
   (Lot 1 avait neutralisé le halo natif sur toute la zone de saisie ;
   on rétablit ici un vrai style :focus-visible cohérent pour le
   composer, le bouton pièce jointe et le bouton d'envoi.) ────────── */
.cb-attach:focus-visible,
.cb-send:focus-visible {
    outline: 2px solid var(--cb-coral);
    outline-offset: 2px;
}
.cb-input:focus-visible { outline:none; } /* le liseré du wrapper suffit */

/* ── Mobile ──────────────────────────────────────────────── */
@media (max-width: 480px) {
    :root { --cb-w:100vw; --cb-h:100dvh; }
    #cb-panel {
        bottom       : 0;
        right        : 0;
        border-radius: 0;
        border       : none;
        padding-bottom: env(safe-area-inset-bottom, 0);
    }
    .cb-input-area {
        padding-bottom: calc(14px + env(safe-area-inset-bottom, 0));
    }
    #cb-trigger {
        bottom : 16px;
        right  : 16px;
        padding: 6px 16px 6px 6px;
    }
    .cb-cards { grid-template-columns: 1fr; }
}

/* ── Accessibilité — région live masquée visuellement ──────
   Annonce un résumé (jamais token par token) — voir chatbot-widget.js,
   section ACCESSIBILITY. (Lot 1, point 4). ─────────────────────────── */
.cb-sr-only {
    position : absolute !important;
    width    : 1px !important;
    height   : 1px !important;
    padding  : 0 !important;
    margin   : -1px !important;
    overflow : hidden !important;
    clip     : rect(0,0,0,0) !important;
    white-space: nowrap !important;
    border   : 0 !important;
}

/* ── prefers-reduced-motion (Lot 1, point 4) — neutralise les
   animations décoratives et raccourcit la transition d'ouverture
   du panneau, pour les visiteurs ayant demandé de réduire les
   animations au niveau OS/navigateur. ──────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .cb-trigger__dot,
    .cb-typing span,
    .cb-msg {
        animation: none !important;
    }
    #cb-panel {
        transition: opacity .12s linear !important;
    }
    #cb-trigger,
    .cb-send,
    .cb-card--action,
    .cb-send:hover,
    .cb-send:active {
        transition: none !important;
        transform : none !important;
    }
}