/*
 * Widget chatbot IA — styles RGAA 4.1 compliant (design v2, planche Claude Design 2026-07).
 *
 * Toutes les couleurs/dimensions clés sont des custom properties (--ccb-*) pour
 * que chaque thème mairie puisse override sans toucher à ce fichier. La feuille
 * du thème est chargée AVANT celle du plugin (link en dur dans head.twig, puis
 * wp_head) : à spécificité égale le plugin gagnerait, donc l'override côté thème
 * doit doubler la classe :
 *
 *   .creasit-chatbot-ia.creasit-chatbot-ia { --ccb-color-primary: #112244; }
 *
 * Tokens overridables : --ccb-color-primary / -primary-hover / -on-primary /
 * -on-primary-soft / -bg / -surface / -surface-alt / -text / -text-muted /
 * -border / -border-soft / -border-strong / -link / -link-hover / -focus /
 * -error / -error-bg / -error-border ; --ccb-radius-sm/-md/-lg/-pill ;
 * --ccb-space-xs/-sm/-md/-lg ;
 * --ccb-shadow-launcher/-launcher-hover/-dialog/-tooltip ; --ccb-dialog-width /
 * -max-height ; --ccb-focus-outline ; --ccb-z-launcher/-dialog.
 *
 * Contrat de spécificité (ne pas « simplifier » les sélecteurs) : les thèmes du
 * parc stylent les <button> nus jusqu'à `button:focus` (0,1,1) — background,
 * color, border-radius. Nos composants sont donc TOUS préfixés
 * `.creasit-chatbot-ia .ccb-*` (0,2,0 et plus) pour les dominer, et le reset
 * d'isolation (0,1,1) reste en dessous des composants. Les tokens du thème
 * (classe doublée, 0,2,0) ne rivalisent qu'entre déclarations de custom
 * properties, jamais avec les propriétés des composants.
 *
 * Defaults : palette navy/cream sobre qui se marie bien avec les sites mairies
 * (design validé sur le pilote Grasse). Contrastes vérifiés AA/AAA — voir la
 * table de la planche. La police est héritée du site hôte.
 */

/* ───── Isolation vs thème hôte ─────
 * Beaucoup de thèmes WP (Grasse, Twenty*, etc.) appliquent des styles agressifs
 * à TOUS les <button>, <a>, <input> via des sélecteurs génériques (margin,
 * letter-spacing, text-transform, ::before / ::after décoratifs). Sans reset,
 * notre widget hérite de tout ça et casse visuellement.
 *
 * On reset ICI les propriétés communément polluées, scoped à .creasit-chatbot-ia.
 * Les règles spécifiques (.ccb-launcher, .ccb-icon-btn, etc.) ré-appliquent
 * juste après ce qu'on veut.
 */
.creasit-chatbot-ia button {
    margin: 0;
    text-transform: none;
    letter-spacing: normal;
    text-decoration: none;
    text-shadow: none;
    font-family: inherit;
}
.creasit-chatbot-ia button::before,
.creasit-chatbot-ia button::after,
.creasit-chatbot-ia header::before,
.creasit-chatbot-ia header::after,
.creasit-chatbot-ia footer::before,
.creasit-chatbot-ia footer::after,
.creasit-chatbot-ia form::before,
.creasit-chatbot-ia form::after,
.creasit-chatbot-ia h2::before,
.creasit-chatbot-ia h2::after,
.creasit-chatbot-ia h3::before,
.creasit-chatbot-ia h3::after,
.creasit-chatbot-ia h4::before,
.creasit-chatbot-ia h4::after,
.creasit-chatbot-ia h5::before,
.creasit-chatbot-ia h5::after {
    /* Tue les pseudo-éléments décoratifs des thèmes (lignes, soulignements
       animés au hover, ornements de titres — vu : la virgule dorée h2::before
       de Grasse dans le header du widget, et le voile header:before d'Orly
       qui peignait PAR-DESSUS les boutons statiques du header) qui
       interceptent parfois les clics et masquent l'état réel des boutons. */
    content: none !important;
    background: none !important;
    border: none !important;
    width: 0 !important;
    height: 0 !important;
    display: none !important;
}
.creasit-chatbot-ia *,
.creasit-chatbot-ia *::before,
.creasit-chatbot-ia *::after {
    box-sizing: border-box;
}
.creasit-chatbot-ia header,
.creasit-chatbot-ia footer,
.creasit-chatbot-ia form {
    /* Les thèmes du parc stylent aussi les éléments SÉMANTIQUES nus (vu :
       orly `header { height: 120px; z-index: 15; border-radius; position:
       relative }`, demosaisie `header { padding: 40px 0; border-bottom }`)
       → boîte du widget déformée et contextes d'empilement parasites.
       Reset complet en (0,1,1) ; les composants .ccb-* en (0,2,0)
       redéclarent ce dont ils ont besoin. */
    position: static;
    z-index: auto;
    height: auto;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
}
.creasit-chatbot-ia h2,
.creasit-chatbot-ia h3,
.creasit-chatbot-ia h4,
.creasit-chatbot-ia h5,
.creasit-chatbot-ia p {
    /* Les thèmes décorent leurs titres (letter-spacing, uppercase, filets,
       fonds). Reset sobre — les composants .ccb-* redéclarent tailles et
       graisses à spécificité supérieure. */
    letter-spacing: normal;
    text-transform: none;
    text-shadow: none;
    background: none;
    border: none;
}
.creasit-chatbot-ia svg {
    /* Icônes SVG inline stroke="currentColor" fill="none" : le fill:none CSS est
       nécessaire car les thèmes posent des fill génériques qui rempliraient les
       tracés (un disque plein à la place du cercle ⓘ). width/height:auto rend la
       main aux attributs width="18" etc. des icônes. */
    display: block;
    flex: none;
    fill: none;
    width: auto;
    height: auto;
}
.creasit-chatbot-ia button svg,
.creasit-chatbot-ia button:hover svg,
.creasit-chatbot-ia button:focus svg,
.creasit-chatbot-ia button:active svg {
    /* Les thèmes du parc déclarent `button svg { fill:…; width:26px; height:26px }`
       et `button:hover/:focus/:active svg { fill:… }` (0,1,2) : on les neutralise
       à spécificité supérieure, états compris. */
    fill: none;
    width: auto;
    height: auto;
}
.creasit-chatbot-ia svg path,
.creasit-chatbot-ia svg circle,
.creasit-chatbot-ia svg rect,
.creasit-chatbot-ia svg line {
    /* Certains thèmes stylent les tracés eux-mêmes (fill, effets de dessin
       stroke-dasharray animés) : on restaure le rendu stroke de nos icônes. */
    fill: none;
    stroke: currentColor;
    stroke-dasharray: none;
    stroke-dashoffset: 0;
    animation: none;
}

/* ───── Tokens (valeurs par défaut, surchargées par thème commune) ───── */

.creasit-chatbot-ia {
    /* === Palette === */
    --ccb-color-primary:         #000f37;
    --ccb-color-primary-hover:   #001b5c;
    --ccb-color-on-primary:      #ffffff;
    --ccb-color-on-primary-soft: rgba(255, 255, 255, 0.14); /* hover boutons sur fond navy */
    --ccb-color-bg:              #fefaf6;
    --ccb-color-surface:         #ffffff;
    --ccb-color-surface-alt:     #f4efe6; /* code inline, états désactivés, hover chips */
    --ccb-color-text:            #000f37;
    --ccb-color-text-muted:      #4a5568;
    --ccb-color-border:          #e2d9c8;
    --ccb-color-border-soft:     #eee7d8;
    /* Bordure des composants d'interface (champ, chips) : ≥ 3:1 sur blanc ET
       crème (WCAG 1.4.11 / RGAA 3.3) — les bordures douces restent décoratives */
    --ccb-color-border-strong:   #8a8375;
    --ccb-color-link:            #0a58ca;
    --ccb-color-link-hover:      #0847a0;
    --ccb-color-focus:           #0a58ca;
    --ccb-color-error:           #991b1b;
    --ccb-color-error-bg:        #fef2f2;
    --ccb-color-error-border:    #fecaca;

    /* === Géométrie === */
    --ccb-radius-sm:             0.375rem;
    --ccb-radius-md:             0.625rem;
    --ccb-radius-lg:             1rem;
    --ccb-radius-pill:           999px;
    --ccb-space-xs:              0.375rem;
    --ccb-space-sm:              0.625rem;
    --ccb-space-md:              1rem;
    --ccb-space-lg:              1.25rem;
    --ccb-shadow-launcher:       0 1px 2px rgba(0, 15, 55, 0.18), 0 6px 20px rgba(0, 15, 55, 0.22);
    --ccb-shadow-launcher-hover: 0 2px 4px rgba(0, 15, 55, 0.2), 0 10px 28px rgba(0, 15, 55, 0.3);
    --ccb-shadow-dialog:         0 2px 8px rgba(0, 15, 55, 0.08), 0 16px 48px rgba(0, 15, 55, 0.22);
    --ccb-shadow-tooltip:        0 2px 6px rgba(0, 15, 55, 0.08), 0 10px 28px rgba(0, 15, 55, 0.18);

    /* === Dimensions === */
    /* 29.5rem et non 26 : mesuré sur test-mig, « Cette réponse vous a-t-elle
       aidé ? » réclame 268 px sans coupure, plus 78 px de pouces et
       d'espacements — soit 346 px de ligne utile là où 26rem n'en offrait
       que 296. La borne `calc(100vw - 2rem)` protège le mobile. */
    --ccb-dialog-width:          29.5rem;
    --ccb-dialog-max-height:     40rem;

    /* === Accessibilité / plan === */
    --ccb-focus-outline:         2px solid var(--ccb-color-focus);
    --ccb-z-launcher:            999990;
    --ccb-z-dialog:              999991;

    font-family: inherit;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--ccb-color-text);
}

.creasit-chatbot-ia :focus-visible {
    outline: var(--ccb-focus-outline);
    outline-offset: 2px;
}

/* ───── Launcher (bouton flottant) ───── */

.creasit-chatbot-ia .ccb-launcher {
    position: fixed;
    bottom: var(--ccb-space-lg);
    z-index: var(--ccb-z-launcher);
    display: inline-flex;
    align-items: center;
    gap: var(--ccb-space-sm);
    min-height: 3.5rem;
    height: auto;
    width: auto;
    padding: 0.875rem 1.5rem 0.875rem 1.25rem;
    background: var(--ccb-color-primary);
    color: var(--ccb-color-on-primary);
    border: none;
    border-radius: var(--ccb-radius-pill);
    font-size: 1.0625rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 1.2;
    cursor: pointer;
    box-shadow: var(--ccb-shadow-launcher);
    transition: background-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.creasit-chatbot-ia .ccb-launcher.ccb--bottom-right { right: var(--ccb-space-lg); }
.creasit-chatbot-ia .ccb-launcher.ccb--bottom-left  { left: var(--ccb-space-lg); }

.creasit-chatbot-ia .ccb-launcher:hover,
.creasit-chatbot-ia .ccb-launcher:focus,
.creasit-chatbot-ia .ccb-launcher:active {
    /* :focus/:active listés exprès : les thèmes posent des button:focus/:active
       génériques (fond transparent, couleur d'accent) qu'il faut neutraliser. */
    background: var(--ccb-color-primary-hover);
    color: var(--ccb-color-on-primary);
    border: none;
}

.creasit-chatbot-ia .ccb-launcher:hover {
    box-shadow: var(--ccb-shadow-launcher-hover);
    transform: translateY(-0.125rem);
}

.creasit-chatbot-ia .ccb-launcher:focus-visible {
    outline: var(--ccb-focus-outline);
    outline-offset: 3px;
}

.creasit-chatbot-ia .ccb-launcher[aria-expanded="true"] {
    /* Caché quand le dialog est ouvert (évite double affichage) */
    display: none;
}

.creasit-chatbot-ia .ccb-launcher-icon {
    display: inline-flex;
}

.creasit-chatbot-ia .ccb-launcher-text {
    white-space: nowrap;
}

/* ───── Dialog (boîte de conversation) ───── */

.creasit-chatbot-ia .ccb-dialog {
    position: fixed;
    bottom: var(--ccb-space-md);
    z-index: var(--ccb-z-dialog);
    display: flex;
    flex-direction: column;
    width: min(var(--ccb-dialog-width), calc(100vw - 2rem));
    height: min(var(--ccb-dialog-max-height), calc(100vh - 3rem));
    background: var(--ccb-color-bg);
    border-radius: var(--ccb-radius-lg);
    box-shadow: var(--ccb-shadow-dialog);
    overflow: hidden;
}

.creasit-chatbot-ia .ccb-dialog.ccb--bottom-right { right: var(--ccb-space-md); }
.creasit-chatbot-ia .ccb-dialog.ccb--bottom-left  { left: var(--ccb-space-md); }

/* ───── Header ───── */

.creasit-chatbot-ia .ccb-header {
    display: flex;
    align-items: center;
    gap: var(--ccb-space-sm);
    padding: 0.75rem 0.75rem 0.75rem var(--ccb-space-md);
    background: var(--ccb-color-primary);
    color: var(--ccb-color-on-primary);
}

.creasit-chatbot-ia .ccb-header-main {
    display: flex;
    align-items: center;
    gap: var(--ccb-space-sm);
    flex: 1;
    min-width: 0;
}

.creasit-chatbot-ia .ccb-avatar {
    /* Décoratif (aria-hidden) : ancre visuelle institutionnelle du header */
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--ccb-radius-pill);
    background: var(--ccb-color-on-primary-soft);
    color: var(--ccb-color-on-primary);
}

.creasit-chatbot-ia .ccb-title {
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 650;
    line-height: 1.3;
    color: inherit;
}

.creasit-chatbot-ia .ccb-info-wrap {
    position: relative;
    display: flex;
}

.creasit-chatbot-ia .ccb-actions {
    display: flex;
    gap: 0.25rem;
}

.creasit-chatbot-ia .ccb-icon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    min-height: 0;
    padding: 0;
    flex: none;
    background: transparent;
    color: var(--ccb-color-on-primary);
    border: none;
    border-radius: var(--ccb-radius-md);
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.creasit-chatbot-ia .ccb-icon-btn:hover:not(:disabled),
.creasit-chatbot-ia .ccb-icon-btn:focus,
.creasit-chatbot-ia .ccb-icon-btn:active {
    background: var(--ccb-color-on-primary-soft);
    color: var(--ccb-color-on-primary);
    border: none;
}

.creasit-chatbot-ia .ccb-header .ccb-icon-btn:focus-visible {
    /* Sur fond navy, l'anneau bleu serait illisible : on passe en blanc (18,7:1) */
    outline-color: var(--ccb-color-on-primary);
    outline-offset: 1px;
}

.creasit-chatbot-ia .ccb-icon-btn:disabled {
    background: transparent;
    opacity: 0.5;
    cursor: not-allowed;
}

.creasit-chatbot-ia .ccb-icon-btn[aria-expanded="true"] {
    /* Toggletip info ouverte (aria-expanded, pattern disclosure) */
    background: var(--ccb-color-on-primary-soft);
}

/* ───── Tooltip RGPD (déclenchée par bouton info dans le header) ───── */

.creasit-chatbot-ia .ccb-tooltip {
    position: absolute;
    top: calc(100% + 0.625rem);
    left: 50%;
    transform: translateX(-50%);
    width: 17.5rem;
    /* Borné aussi au viewport : sur 320 px, le calc() seul (24rem) déborderait
       du dialog (overflow:hidden) et tronquerait le texte — RGAA 10.11 reflow */
    max-width: min(calc(var(--ccb-dialog-width) - 2rem), calc(100vw - 2rem));
    padding: 0.75rem 0.875rem;
    z-index: 3;
    background: var(--ccb-color-surface);
    color: var(--ccb-color-text);
    border: 1px solid var(--ccb-color-border);
    border-radius: var(--ccb-radius-md);
    box-shadow: var(--ccb-shadow-tooltip);
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.55;
    text-align: left;
}

/* ───── Messages ───── */

.creasit-chatbot-ia .ccb-messages {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--ccb-space-sm);
    padding: var(--ccb-space-md);
    overflow-y: auto;
    /* Empêche la molette qui scrolle dans le widget de propager à la page hôte
       quand on atteint le haut/bas de la zone messages. */
    overscroll-behavior: contain;
}

.creasit-chatbot-ia .ccb-msg {
    max-width: 85%;
    padding: 0.625rem 0.875rem;
    font-size: 1rem;
    line-height: 1.55;
    overflow-wrap: break-word;
}

.creasit-chatbot-ia .ccb-msg--user {
    align-self: flex-end;
    background: var(--ccb-color-primary);
    color: var(--ccb-color-on-primary);
    border-radius: var(--ccb-radius-lg) var(--ccb-radius-lg) var(--ccb-radius-sm) var(--ccb-radius-lg);
    /* Le message user est du texte brut : on préserve ses sauts de ligne */
    white-space: pre-wrap;
}

.creasit-chatbot-ia .ccb-msg--user a {
    color: var(--ccb-color-on-primary);
}

.creasit-chatbot-ia .ccb-msg--assistant {
    align-self: flex-start;
    background: var(--ccb-color-surface);
    border: 1px solid var(--ccb-color-border-soft);
    border-radius: var(--ccb-radius-lg) var(--ccb-radius-lg) var(--ccb-radius-lg) var(--ccb-radius-sm);
}

/* Markdown rendu en HTML dans les réponses assistant */
.creasit-chatbot-ia .ccb-msg-content p { margin: 0.4em 0; }
.creasit-chatbot-ia .ccb-msg-content p:first-child,
.creasit-chatbot-ia .ccb-msg-content h3:first-child { margin-top: 0; }
.creasit-chatbot-ia .ccb-msg-content p:last-child,
.creasit-chatbot-ia .ccb-msg-content ul:last-child,
.creasit-chatbot-ia .ccb-msg-content ol:last-child { margin-bottom: 0; }

.creasit-chatbot-ia .ccb-msg-content ul,
.creasit-chatbot-ia .ccb-msg-content ol {
    margin: 0.4em 0;
    padding-left: 1.25rem;
    list-style-position: outside;
}
.creasit-chatbot-ia .ccb-msg-content ul { list-style-type: disc; }
.creasit-chatbot-ia .ccb-msg-content ol { list-style-type: decimal; }

.creasit-chatbot-ia .ccb-msg-content hr {
    /* Séparateur de sections émis par le LLM (---). Boîte entièrement
       redéclarée : les thèmes décorent aussi les hr nus. */
    height: 0;
    margin: var(--ccb-space-sm) 0;
    border: none;
    border-top: 1px solid var(--ccb-color-border-soft);
    background: none;
}
.creasit-chatbot-ia .ccb-msg-content hr:last-child { margin-bottom: 0; }
.creasit-chatbot-ia .ccb-msg-content li { margin: 0.25em 0; }
.creasit-chatbot-ia .ccb-msg-content li > p { margin: 0; }

.creasit-chatbot-ia .ccb-msg-content h3 { font-size: 1rem;      margin: 0.8em 0 0.3em; }
.creasit-chatbot-ia .ccb-msg-content h4 { font-size: 0.9375rem; margin: 0.8em 0 0.3em; }
.creasit-chatbot-ia .ccb-msg-content h5 { font-size: 0.875rem;  margin: 0.8em 0 0.3em; }

.creasit-chatbot-ia .ccb-msg-content strong { font-weight: 600; }
.creasit-chatbot-ia .ccb-msg-content em     { font-style: italic; }

.creasit-chatbot-ia .ccb-msg-content a,
.creasit-chatbot-ia .ccb-dialog a {
    /* .ccb-dialog a (0,2,1) et non .creasit-chatbot-ia a (0,1,1) : ce dernier ne
       battrait les a:hover des thèmes que par ordre de chargement — fragile */
    color: var(--ccb-color-link);
    text-decoration: underline;
    text-underline-offset: 0.15em;
}
.creasit-chatbot-ia .ccb-msg-content a:hover,
.creasit-chatbot-ia .ccb-dialog a:hover {
    color: var(--ccb-color-link-hover);
}

/* Le texte d'un lien nu EST une URL. Sans coupure autorisée elle occupe sa
   ligne entière et pousse la flèche « nouvel onglet » seule à la ligne
   suivante — un pictogramme orphelin, constaté sur test-mig le 31/08. En
   autorisant la coupure, la flèche reste collée au dernier fragment. */
.creasit-chatbot-ia .ccb-msg-content a[target="_blank"] {
    overflow-wrap: anywhere;
}

/* Ouverture dans un nouvel onglet. Le pictogramme reprend la flèche des puces
   « Sources » (ICONS.external), pour un seul vocabulaire visuel.
   En MASQUE et non en contenu généré : certains lecteurs d'écran vocalisent le
   `content` d'un ::after, or l'information leur est déjà donnée — proprement —
   par le texte masqué posé DANS le lien. `currentColor` le fait suivre la
   couleur du lien, survol compris, sans seconde déclaration. */
.creasit-chatbot-ia .ccb-msg-content a[target="_blank"]::after {
    content: "";
    display: inline-block;
    width: 0.7em;
    height: 0.7em;
    margin-left: 0.2em;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7'/%3E%3Cpath d='M9 7h8v8'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7'/%3E%3Cpath d='M9 7h8v8'/%3E%3C/svg%3E") no-repeat center / contain;
}

.creasit-chatbot-ia .ccb-msg-content code {
    background: var(--ccb-color-surface-alt);
    border-radius: var(--ccb-radius-sm);
    padding: 0.1em 0.35em;
    font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
    font-size: 0.875em;
}

.creasit-chatbot-ia .ccb-msg-content pre {
    margin: 0.5rem 0;
    padding: 0.5rem 0.625rem;
    background: var(--ccb-color-surface-alt);
    border-radius: var(--ccb-radius-sm);
    overflow-x: auto;
}
.creasit-chatbot-ia .ccb-msg-content pre code {
    padding: 0;
    background: transparent;
}

/* ───── Welcome (état vide) ───── */

.creasit-chatbot-ia .ccb-welcome {
    margin: auto var(--ccb-space-sm);
    padding: var(--ccb-space-lg) var(--ccb-space-md);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--ccb-space-sm);
    text-align: center;
}

.creasit-chatbot-ia .ccb-welcome-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: var(--ccb-radius-pill);
    background: var(--ccb-color-primary);
    color: var(--ccb-color-on-primary);
}

.creasit-chatbot-ia .ccb-welcome-title {
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 650;
    /* Les thèmes colorent leurs headings (h3) : on garde la couleur du widget */
    color: var(--ccb-color-text);
}

.creasit-chatbot-ia .ccb-welcome-text {
    margin: 0;
    color: var(--ccb-color-text-muted);
    font-size: 0.9375rem;
    line-height: 1.55;
}

.creasit-chatbot-ia .ccb-suggestions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--ccb-space-xs);
    margin-top: var(--ccb-space-xs);
}

.creasit-chatbot-ia .ccb-suggestion {
    /* Question d'amorce : envoie son libellé comme message */
    min-height: 2.25rem;
    height: auto;
    width: auto;
    padding: 0.375rem 0.875rem;
    cursor: pointer;
    background: var(--ccb-color-surface);
    color: var(--ccb-color-text);
    border: 1px solid var(--ccb-color-border-strong);
    border-radius: var(--ccb-radius-pill);
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.4;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.creasit-chatbot-ia .ccb-suggestion:hover,
.creasit-chatbot-ia .ccb-suggestion:focus,
.creasit-chatbot-ia .ccb-suggestion:active {
    background: var(--ccb-color-surface-alt);
    color: var(--ccb-color-text);
    border: 1px solid var(--ccb-color-text-muted);
}

/* ───── Sources (chips) ───── */

.creasit-chatbot-ia .ccb-sources {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ccb-space-xs);
    margin-top: 0.625rem;
    padding-top: 0.625rem;
    border-top: 1px dashed var(--ccb-color-border);
}

.creasit-chatbot-ia .ccb-sources-label {
    flex-basis: 100%;
    font-size: 0.75rem;
    font-weight: 650;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--ccb-color-text-muted);
}

.creasit-chatbot-ia .ccb-source {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    max-width: 100%;
    min-height: 1.875rem;
    padding: 0.25rem 0.75rem;
    background: var(--ccb-color-bg);
    border: 1px solid var(--ccb-color-border);
    border-radius: var(--ccb-radius-pill);
    font-size: 0.875rem;
    line-height: 1.3;
    /* !important : certains thèmes soulignent tous les <a> avec !important */
    text-decoration: none !important;
    color: var(--ccb-color-link);
    border-color: var(--ccb-color-border-strong);
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.creasit-chatbot-ia .ccb-source span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.creasit-chatbot-ia .ccb-source svg {
    color: var(--ccb-color-text-muted);
}

.creasit-chatbot-ia .ccb-source:hover {
    border-color: var(--ccb-color-link-hover);
    background: var(--ccb-color-surface-alt);
    color: var(--ccb-color-link-hover);
}

.creasit-chatbot-ia .ccb-source:hover span {
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

/* ───── Streaming ───── */

.creasit-chatbot-ia .ccb-typing {
    align-self: flex-start;
    display: flex;
    align-items: baseline;
    gap: 0.375rem;
    padding: 0.25rem 0.25rem;
    color: var(--ccb-color-text-muted);
    font-style: italic;
    font-size: 0.9375rem;
}

.creasit-chatbot-ia .ccb-typing-dots {
    display: inline-flex;
    gap: 0.2rem;
}

.creasit-chatbot-ia .ccb-typing-dots i {
    width: 0.3125rem;
    height: 0.3125rem;
    border-radius: 50%;
    background: currentColor;
    animation: ccb-dot 1.2s ease-in-out infinite;
}
.creasit-chatbot-ia .ccb-typing-dots i:nth-child(2) { animation-delay: 0.2s; }
.creasit-chatbot-ia .ccb-typing-dots i:nth-child(3) { animation-delay: 0.4s; }

.creasit-chatbot-ia .ccb-cursor {
    /* Curseur de streaming dessiné en CSS (span vide côté JS) */
    display: inline-block;
    width: 0.5ch;
    height: 1.05em;
    margin-left: 0.1ch;
    vertical-align: text-bottom;
    background: currentColor;
    animation: ccb-blink 1s steps(2, start) infinite;
}

/* ───── Erreur ───── */

.creasit-chatbot-ia .ccb-msg--error {
    align-self: center;
    display: flex;
    align-items: flex-start;
    gap: var(--ccb-space-xs);
    max-width: 95%;
    background: var(--ccb-color-error-bg);
    color: var(--ccb-color-error);
    border: 1px solid var(--ccb-color-error-border);
    border-radius: var(--ccb-radius-md);
    font-size: 0.9375rem;
}

.creasit-chatbot-ia .ccb-msg--error svg {
    /* L'information ne repose pas sur la couleur seule : icône + bordure */
    margin-top: 0.15em;
}

/* ───── Formulaire ───── */

.creasit-chatbot-ia .ccb-form {
    display: flex;
    /* Bouton envoyer calé en bas, aligné sur la dernière ligne de saisie
       (un seul bouton depuis l'abandon de la dictée : centré, il flottait) */
    align-items: flex-end;
    gap: var(--ccb-space-xs);
    margin: 0;
    padding: var(--ccb-space-sm);
    background: var(--ccb-color-surface);
    border-top: 1px solid var(--ccb-color-border-soft);
}

.creasit-chatbot-ia .ccb-input {
    flex: 1;
    min-width: 0;
    min-height: 2.75rem;
    height: auto;
    margin: 0;
    padding: 0.625rem 0.75rem;
    resize: none;
    background: var(--ccb-color-surface);
    color: var(--ccb-color-text);
    border: 1px solid var(--ccb-color-border-strong);
    border-radius: var(--ccb-radius-md);
    font-family: inherit;
    font-size: 1rem;
    line-height: 1.4;
}

.creasit-chatbot-ia .ccb-input::placeholder {
    color: var(--ccb-color-text-muted);
    opacity: 1;
}

.creasit-chatbot-ia .ccb-input:disabled {
    background: var(--ccb-color-surface-alt);
    color: var(--ccb-color-text-muted);
    cursor: wait;
}

.creasit-chatbot-ia .ccb-send {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    /* Même hauteur que la min-height de l'input : bord à bord avec la saisie */
    width: 2.75rem;
    height: 2.75rem;
    min-height: 0;
    padding: 0;
    cursor: pointer;
    background: var(--ccb-color-primary);
    color: var(--ccb-color-on-primary);
    border: none;
    border-radius: var(--ccb-radius-md);
    transition: background-color 0.15s ease;
}

.creasit-chatbot-ia .ccb-send:hover:not(:disabled),
.creasit-chatbot-ia .ccb-send:focus:not(:disabled),
.creasit-chatbot-ia .ccb-send:active:not(:disabled) {
    background: var(--ccb-color-primary-hover);
    color: var(--ccb-color-on-primary);
    border: none;
}

.creasit-chatbot-ia .ccb-send:disabled {
    background: var(--ccb-color-surface-alt);
    color: var(--ccb-color-text-muted);
    border: 1px solid var(--ccb-color-border);
    cursor: not-allowed;
}

.creasit-chatbot-ia .ccb-disclaimer {
    /* Mention IA sous le formulaire : transparence attendue d'un service public */
    margin: 0;
    padding: 0 var(--ccb-space-md) var(--ccb-space-xs);
    background: var(--ccb-color-surface);
    text-align: center;
    font-size: 0.75rem;
    color: var(--ccb-color-text-muted);
}

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

.creasit-chatbot-ia .ccb-visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ───── Mobile ≤ 640px : bottom-sheet ───── */

@media (max-width: 640px) {
    .creasit-chatbot-ia .ccb-dialog,
    .creasit-chatbot-ia .ccb-dialog.ccb--bottom-right,
    .creasit-chatbot-ia .ccb-dialog.ccb--bottom-left {
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        max-width: none;
        height: calc(100vh - 2.5rem);
        height: calc(100dvh - 2.5rem);
        border-radius: var(--ccb-radius-lg) var(--ccb-radius-lg) 0 0;
    }
}

/* Petites hauteurs (paysage téléphone, clavier virtuel ouvert) */
@media (max-height: 480px) {
    .creasit-chatbot-ia .ccb-welcome {
        padding: var(--ccb-space-sm);
    }
    .creasit-chatbot-ia .ccb-welcome-icon {
        display: none;
    }
    .creasit-chatbot-ia .ccb-header {
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
    }
}

/* ───── Reduced motion ───── */

@media (prefers-reduced-motion: reduce) {
    .creasit-chatbot-ia *,
    .creasit-chatbot-ia *::before,
    .creasit-chatbot-ia *::after {
        animation: none !important;
        transition: none !important;
    }
    .creasit-chatbot-ia .ccb-launcher:hover {
        transform: none;
    }
    .creasit-chatbot-ia .ccb-cursor {
        /* Curseur statique semi-transparent plutôt que clignotant */
        opacity: 0.65;
    }
}

@keyframes ccb-blink {
    0%   { opacity: 1; }
    50%  { opacity: 0; }
    100% { opacity: 1; }
}

@keyframes ccb-dot {
    0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
    30%           { opacity: 1;   transform: translateY(-0.125rem); }
}

/* ── Avis du visiteur sur une réponse ────────────────────────────────────── */

.creasit-chatbot-ia .ccb-feedback {
    display: flex;
    align-items: center;
    gap: var(--ccb-space-xs);
    margin-top: var(--ccb-space-sm);
    font-size: 13px;
    color: var(--ccb-color-text-muted);
}

.creasit-chatbot-ia .ccb-feedback-label { margin-right: var(--ccb-space-xs); }

.creasit-chatbot-ia .ccb-feedback-btn {
    border: 1px solid var(--ccb-color-border);
    background: var(--ccb-color-surface);
    border-radius: var(--ccb-radius-sm);
    padding: 2px 8px;
    font-size: 15px;
    line-height: 1.4;
    cursor: pointer;
}

.creasit-chatbot-ia .ccb-feedback-btn:hover {
    background: var(--ccb-color-surface-alt);
    border-color: var(--ccb-color-border-strong);
}

.creasit-chatbot-ia .ccb-feedback-btn:focus-visible {
    outline: var(--ccb-focus-outline);
    outline-offset: 2px;
}

/* Après le clic : le remerciement remplace les boutons — reproposer un vote
   déjà donné inviterait à cliquer deux fois pour rien. */
.creasit-chatbot-ia .ccb-feedback--done {
    font-style: italic;
}