/* ============================================================
 * Widget embarquable — styles dédiés (générique chatbot_base)
 * Self-contained. Optimisé pour iframe (bottom-right embed) et standalone.
 * Pas de wasted space, hauteur capée sur viewport, indicateur de
 * réflexion animé.
 * ============================================================ */

:root {
    --w-bg: #faf8f5;
    --w-bg-alt: #f0ebe4;
    --w-text: #2c1810;
    --w-text-soft: #5a4a3e;
    --w-text-muted: #8a7a6e;
    --w-border: #e0d5c8;
    --w-shadow: rgba(44, 24, 16, 0.12);
    --accent: #8b1a2b;
    --accent-hover: #a32e44;
    --w-radius: 12px;
    --w-radius-sm: 8px;
}

@media (prefers-color-scheme: dark) {
    :root {
        --w-bg: #1a1510;
        --w-bg-alt: #241e17;
        --w-text: #e8ddd0;
        --w-text-soft: #b8a898;
        --w-text-muted: #9a8a7e;
        --w-border: #3a3025;
        --w-shadow: rgba(0, 0, 0, 0.4);
        --accent: #d4475a;
        --accent-hover: #e05a6c;
    }
}

* { box-sizing: border-box; }

/* Respecte l'attribut HTML `hidden` même si une règle plus spécifique
   met un display:flex/inline-flex sur l'élément. */
[hidden] { display: none !important; }

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    color: var(--w-text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 14px;
    line-height: 1.45;
    -webkit-text-size-adjust: 100%;
}

body {
    background: var(--w-bg);
    display: flex;
    justify-content: center;
    overflow: hidden;  /* le scroll interne se passe dans .widget-response */
}

/* === Mode iframe : body transparent, widget fill 100% de l'iframe === */

body.in-iframe {
    background: transparent;
    align-items: stretch;
}

body.in-iframe .widget-root {
    max-width: none;
    margin: 0;
    border: none;
    border-radius: 0;
    box-shadow: none;
    height: 100%;
    overflow: hidden;
}

/* Mode preview (?preview=1) — utilisé par la page /promouvoir pour que
   l'aperçu épouse le fond hôte EN DARK MODE (sinon le widget garde son
   --w-bg sombre qui détonne sur le fond noir/charbon de la page). En
   light mode, on laisse le widget rendre sa carte beige naturelle (qui
   s'harmonise déjà bien avec le fond clair de la page). N'affecte PAS
   les intégrations tierces. */
@media (prefers-color-scheme: dark) {
    body.in-iframe.preview-mode .widget-root,
    body.in-iframe.preview-mode .widget-header,
    body.in-iframe.preview-mode .widget-response,
    body.in-iframe.preview-mode .widget-form {
        background: transparent;
    }
}

/* === Mode standalone : carte shrink-to-fit, capée au viewport === */

body:not(.in-iframe) {
    padding: 16px;
    align-items: center;  /* centre vertical, pas de stretch → shrink-to-fit */
}

body:not(.in-iframe) .widget-root {
    max-width: 420px;
    max-height: 100%;          /* cap à 100vh - 32px (padding body) */
    border: 1px solid var(--w-border);
    border-radius: var(--w-radius);
    box-shadow: 0 8px 32px var(--w-shadow);
    overflow: hidden;
    /* PAS de height:100% — le widget grandit avec son contenu jusqu'au cap */
}

/* === Racine commune === */

.widget-root {
    display: flex;
    flex-direction: column;
    width: 100%;
    background: var(--w-bg);
    min-height: 0;
}

/* Collapsed : pas de zone réponse, widget aussi compact que possible. */
body.widget-collapsed .widget-root {
    height: auto;
}

body.widget-expanded .widget-root {
    height: 100%;
}

/* === Header (logo + titre + repli) === */

.widget-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--w-border);
    background: var(--w-bg-alt);
    flex-shrink: 0;
    min-height: 44px;
}

.widget-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: var(--w-text);
    min-width: 0;
    flex: 1;
    transition: opacity 0.15s;
}

.widget-brand:hover { opacity: 0.75; }

.widget-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    color: var(--accent);
    flex-shrink: 0;
}

.widget-logo svg {
    width: 100%;
    height: 100%;
}

.widget-title {
    font-weight: 600;
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    line-height: 1.3;
}

.widget-tagline {
    font-weight: 400;
    color: var(--w-text-soft);
    font-size: 12px;
}

@media (max-width: 380px) {
    .widget-tagline { display: none; }
}

.widget-collapse-btn {
    background: transparent;
    border: none;
    color: var(--w-text-soft);
    width: 26px;
    height: 26px;
    border-radius: var(--w-radius-sm);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, color 0.15s;
    flex-shrink: 0;
    padding: 0;
}

.widget-collapse-btn:hover {
    background: var(--w-border);
    color: var(--w-text);
}

/* === Zone réponse (scroll interne uniquement) === */

.widget-response {
    /* Standalone : flex:0 → la zone grandit avec le contenu jusqu'au cap
       du widget, puis scrolle internement. Pas de "wasted space". */
    flex: 0 1 auto;
    min-height: 0;             /* critical for flex children to shrink */
    overflow-y: auto;
    overflow-x: hidden;
    padding: 10px 12px;
    background: var(--w-bg);
    overscroll-behavior: contain;
}

/* Iframe : le conteneur est imposé par l'embedder, on remplit son espace. */
body.in-iframe .widget-response {
    flex: 1 1 auto;
}

.widget-messages {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* === Messages === */

.wmsg {
    max-width: 100%;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.wmsg-user {
    align-self: flex-end;
    background: var(--accent);
    color: white;
    padding: 7px 11px;
    border-radius: var(--w-radius-sm);
    border-bottom-right-radius: 3px;
    font-size: 13px;
    line-height: 1.4;
    max-width: 90%;
}

.wmsg-assistant {
    align-self: stretch;
    color: var(--w-text);
    padding: 0;
    width: 100%;
}

.wmsg-content {
    font-size: 14px;
    line-height: 1.55;
}

.wmsg-content > *:first-child { margin-top: 0; }
.wmsg-content > *:last-child { margin-bottom: 0; }

.wmsg-content p { margin: 0 0 8px 0; }

.wmsg-content h1, .wmsg-content h2, .wmsg-content h3 {
    margin: 12px 0 6px 0;
    font-weight: 600;
}
.wmsg-content h1 { font-size: 15px; }
.wmsg-content h2 { font-size: 14px; }
.wmsg-content h3 { font-size: 14px; }

.wmsg-content ul, .wmsg-content ol {
    margin: 6px 0 8px 0;
    padding-left: 20px;
}

.wmsg-content li { margin-bottom: 3px; }

.wmsg-content blockquote {
    margin: 8px 0;
    padding: 4px 12px;
    border-left: 3px solid var(--accent);
    color: var(--w-text-soft);
    font-style: italic;
}

.wmsg-content code {
    background: var(--w-bg-alt);
    padding: 1px 5px;
    border-radius: 4px;
    font-size: 0.92em;
    font-family: "SF Mono", Menlo, monospace;
}

.wmsg-content a {
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* === Notice IA (au 1er message, dismissible) === */

.widget-notice {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 8px 10px;
    margin-bottom: 10px;
    background: var(--w-bg-alt);
    border: 1px solid var(--w-border);
    border-left: 3px solid var(--accent);
    border-radius: var(--w-radius-sm);
    font-size: 12px;
    line-height: 1.4;
    color: var(--w-text-soft);
    font-style: italic;
}

.widget-notice-close {
    background: transparent;
    border: none;
    color: var(--w-text-muted);
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    padding: 0;
    margin-left: auto;
    flex-shrink: 0;
}

.widget-notice-close:hover {
    color: var(--w-text);
}

/* === Carte CTA inscription (apparait après N réponses) === */

.widget-signup-cta {
    margin-top: 8px;
    padding: 12px 14px;
    background: var(--w-bg-alt);
    border: 1px solid var(--accent);
    border-radius: var(--w-radius-sm);
    text-align: center;
}

.widget-signup-cta-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--w-text);
    margin: 0 0 4px 0;
}

.widget-signup-cta-text {
    font-size: 12px;
    color: var(--w-text-soft);
    margin: 0 0 10px 0;
    line-height: 1.4;
}

.widget-signup-cta-actions {
    display: flex;
    gap: 6px;
    justify-content: center;
    flex-wrap: wrap;
}

.widget-signup-cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 12px;
    border-radius: var(--w-radius-sm);
    font-size: 12px;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    border: 1px solid var(--accent);
    background: var(--accent);
    color: white;
    transition: background 0.15s;
    font-family: inherit;
}

.widget-signup-cta-btn:hover {
    background: var(--accent-hover);
}

.widget-signup-cta-btn.is-secondary {
    background: transparent;
    color: var(--accent);
}

.widget-signup-cta-btn.is-secondary:hover {
    background: var(--w-bg);
}

/* Override : .wmsg-content a force color:accent + underline (cf. l. 289)
   et écrase color:white de mon bouton CTA (cas 429 + card signup). On
   restaure explicitement pour les boutons internes à une card CTA. */
.wmsg-content .widget-signup-cta-btn {
    color: white;
    text-decoration: none;
}
.wmsg-content .widget-signup-cta-btn.is-secondary {
    color: var(--accent);
}

/* === Bandeau "connectez-vous" (persistant, au-dessus de l'input) === */

.widget-guest-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 12px;
    background: var(--w-bg-alt);
    border-top: 1px solid var(--w-border);
    font-size: 12px;
    color: var(--w-text-soft);
    flex-shrink: 0;
}

.widget-guest-link {
    color: var(--accent);
    text-decoration: none;
    font-weight: 500;
    flex-shrink: 0;
}

.widget-guest-link:hover {
    text-decoration: underline;
}

@media (max-width: 380px) {
    .widget-guest-banner span {
        font-size: 11px;
    }
}

/* === Indicateur "réflexion en cours" (3 dots animés en cascade) === */

.wmsg-thinking {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 0;
}

.wmsg-thinking span {
    display: block;
    width: 7px;
    height: 7px;
    background: var(--accent);
    border-radius: 50%;
    animation: wmsg-bounce 1.2s infinite ease-in-out;
}

.wmsg-thinking span:nth-child(2) { animation-delay: 0.15s; }
.wmsg-thinking span:nth-child(3) { animation-delay: 0.3s; }

@keyframes wmsg-bounce {
    0%, 80%, 100% {
        transform: scale(0.55);
        opacity: 0.45;
    }
    40% {
        transform: scale(1);
        opacity: 1;
    }
}

/* === Input area === */

.widget-form {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    padding: 8px 10px;
    border-top: 1px solid var(--w-border);
    background: var(--w-bg-alt);
    flex-shrink: 0;
    /* Défense en profondeur : empêche le form de hériter d'une min-width
       intrinsèque de son contenu, qui pousserait .widget-root hors viewport. */
    min-width: 0;
}

.widget-input {
    flex: 1;
    /* width: 0 + min-width: 0 indispensables sur iOS Safari : le textarea
       hérite d'un attribut HTML `cols=20` par défaut qui lui donne une
       largeur intrinsèque ~160-200px. min-width: 0 seul ne suffit pas
       toujours à neutraliser ça sur iOS (Chrome OK). Sans ces deux règles,
       au focus du textarea sur iPhone SE, le contenu déborde à droite et
       le bouton .widget-send sort de l'écran, obligeant à pincer-dézoomer.
       (Même fix appliqué historiquement sur #chat-input cf. styles.css.) */
    width: 0;
    min-width: 0;
    min-height: 36px;
    max-height: 100px;
    padding: 7px 11px;
    background: var(--w-bg);
    border: 1px solid var(--w-border);
    border-radius: var(--w-radius-sm);
    color: var(--w-text);
    font-family: inherit;
    /* 16px minimum REQUIS : iOS Safari déclenche un auto-zoom au focus de tout
       input dont font-size < 16px, ce qui rend le widget inutilisable sur
       iPhone (le bouton envoi sort de l'écran, oblige à pincer-dézoomer).
       SOTA 2026 — pas d'alternative propre (viewport maximum-scale=1 casse
       l'accessibilité WCAG 2.1). Cf. CSS-Tricks "16px prevents iOS form zoom". */
    font-size: 16px;
    line-height: 1.4;
    resize: none;
    outline: none;
    transition: border-color 0.15s;
}

.widget-input:focus {
    border-color: var(--accent);
}

.widget-input::placeholder {
    color: var(--w-text-muted);
}

.widget-send {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: var(--w-radius-sm);
    border: none;
    background: var(--accent);
    color: white;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, opacity 0.15s;
    padding: 0;
}

.widget-send:hover:not(:disabled) {
    background: var(--accent-hover);
}

.widget-send:disabled {
    opacity: 0.5;
    cursor: wait;
}

.widget-send.is-streaming svg {
    animation: wmsg-spin 1s linear infinite;
}

@keyframes wmsg-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* === Scrollbar discrète === */

.widget-response::-webkit-scrollbar {
    width: 5px;
}

.widget-response::-webkit-scrollbar-track {
    background: transparent;
}

.widget-response::-webkit-scrollbar-thumb {
    background: var(--w-border);
    border-radius: 3px;
}

.widget-response::-webkit-scrollbar-thumb:hover {
    background: var(--w-text-muted);
}

/* Firefox */
.widget-response {
    scrollbar-width: thin;
    scrollbar-color: var(--w-border) transparent;
}