#jewechwi-chat-box.jewechwi-pro-theme-root {
    --jewechwi-primary: #2271b1;
    --jewechwi-pro-surface: #ffffff;
    --jewechwi-pro-text: #111827;
    --jewechwi-pro-radius: 20px;
    --jewechwi-pro-shadow: 0 10px 30px rgba(15, 23, 42, 0.12);
    --jewechwi-pro-border: rgba(15, 23, 42, 0.08);
    --jewechwi-pro-muted: #f8fafc;

    color: var(--jewechwi-pro-text);
}

#jewechwi-chat-box.jewechwi-pro-theme-root,
#jewechwi-chat-box.jewechwi-pro-theme-root * {
    box-sizing: border-box;
}

/* Conteneur principal du widget free.
   Sert à appliquer le fond, le texte, les coins arrondis et l’ombre générale. */
#jewechwi-chat-box.jewechwi-pro-theme-root {
    background: var(--jewechwi-pro-surface);
    color: var(--jewechwi-pro-text);
    border-radius: var(--jewechwi-pro-radius);
    box-shadow: var(--jewechwi-pro-shadow);
    border: 1px solid var(--jewechwi-pro-border);
    overflow: hidden;
}

/* État minimisé du widget.
   Évite d’afficher une boîte complète quand seul le header réduit est visible. */
#jewechwi-chat-box.jewechwi-pro-theme-root.minimized {
    background: transparent;
    box-shadow: none;
    border: none;
}

/* Header réel du widget free.
   Sert à styliser la barre supérieure du chat avec la couleur principale. */
#jewechwi-chat-box.jewechwi-pro-theme-root #jewechwi-chat-header {
    background: var(--jewechwi-primary);
    color: #ffffff;
    border-top-left-radius: var(--jewechwi-pro-radius);
    border-top-right-radius: var(--jewechwi-pro-radius);
}

/* Quand le widget est ouvert, le header reste arrondi en haut seulement.
   Cela garde une finition propre avec la zone messages en dessous. */
#jewechwi-chat-box.jewechwi-pro-theme-root:not(.minimized) #jewechwi-chat-header {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

/* Zone des messages du widget free.
   Sert à distinguer visuellement la conversation du header et de la zone d’entrée. */
#jewechwi-chat-box.jewechwi-pro-theme-root #jewechwi-chat-messages {
    background: var(--jewechwi-pro-muted);
    color: var(--jewechwi-pro-text);
}

/* Zone d’entrée du widget free.
   Sert à séparer proprement la saisie utilisateur de l’historique des messages. */
#jewechwi-chat-box.jewechwi-pro-theme-root #jewechwi-chat-input {
    background: var(--jewechwi-pro-surface);
    border-top: 1px solid var(--jewechwi-pro-border);
    padding: 12px;
    gap: 10px;
    align-items: center;
}

/* Champ de saisie réel du widget free.
   Sert à harmoniser l’input avec le thème choisi et améliorer la lisibilité. */
#jewechwi-chat-box.jewechwi-pro-theme-root #jewechwi-chat-input input {
    color: var(--jewechwi-pro-text);
    background: #ffffff;
    border: 1px solid var(--jewechwi-pro-border);
    border-radius: 999px;
    min-height: 46px;
    padding: 12px 18px;
}

/* Bouton d’envoi réel du widget free.
   Utilise la couleur principale pour garder une cohérence visuelle avec le header. */
#jewechwi-chat-box.jewechwi-pro-theme-root #jewechwi-chat-input button {
    background: var(--jewechwi-primary);
    color: #ffffff;
    border-radius: 999px;
    border: none;
}

/* Messages agent du widget free.
   Sert à donner un aspect carte/bulle propre aux réponses de l’assistant. */
#jewechwi-chat-box.jewechwi-pro-theme-root .jewechwi-agent-message {
    background: #ffffff;
    color: var(--jewechwi-pro-text);
    border: 1px solid var(--jewechwi-pro-border);
    border-radius: 10px;
}

/* Messages utilisateur.
   Garde la lisibilité générale du texte envoyé par le visiteur. */
#jewechwi-chat-box.jewechwi-pro-theme-root .jewechwi-user-message {
    color: var(--jewechwi-pro-text);
}

/* Bouton ou lien WhatsApp du widget free.
   Reste lisible sur le header coloré. */
#jewechwi-chat-box.jewechwi-pro-theme-root #jewechwi-chat-wa {
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.65);
}

/* =========================
   THÈME DEFAULT
   Sert de style équilibré standard.
   ========================= */
#jewechwi-chat-box.jewechwi-pro-theme-default {
    --jewechwi-pro-shadow: 0 10px 30px rgba(15, 23, 42, 0.12);
}

/* =========================
   THÈME MODERN
   Sert à donner un rendu plus premium, plus doux et plus profond.
   ========================= */
#jewechwi-chat-box.jewechwi-pro-theme-modern {
    --jewechwi-pro-shadow: 0 18px 45px rgba(15, 23, 42, 0.16);
    --jewechwi-pro-border: rgba(15, 23, 42, 0.06);
}

#jewechwi-chat-box.jewechwi-pro-theme-modern #jewechwi-chat-header {
    padding: 14px 18px;
}

#jewechwi-chat-box.jewechwi-pro-theme-modern .jewechwi-agent-message {
    border-radius: 14px;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06);
}

/* =========================
   THÈME MINIMAL
   Sert à obtenir un rendu plus léger, plus sobre et moins ombré.
   ========================= */
#jewechwi-chat-box.jewechwi-pro-theme-minimal {
    --jewechwi-pro-shadow: none;
    --jewechwi-pro-border: rgba(15, 23, 42, 0.12);
    --jewechwi-pro-muted: #ffffff;
}

#jewechwi-chat-box.jewechwi-pro-theme-minimal {
    box-shadow: none;
}

#jewechwi-chat-box.jewechwi-pro-theme-minimal .jewechwi-agent-message {
    background: #f9fafb;
    border-radius: 8px;
    box-shadow: none;
}

/* =========================
   MODE COMPACT
   Sert à réduire les espaces internes pour un widget plus dense et plus discret.
   ========================= */
#jewechwi-chat-box.jewechwi-pro-theme-compact #jewechwi-chat-header {
    padding: 10px 12px;
    gap: 8px;
}

#jewechwi-chat-box.jewechwi-pro-theme-compact #jewechwi-chat-messages {
    padding: 10px;
    max-height: 260px;
}

#jewechwi-chat-box.jewechwi-pro-theme-compact #jewechwi-chat-input {
    padding: 8px;
    gap: 6px;
}

#jewechwi-chat-box.jewechwi-pro-theme-compact #jewechwi-chat-input input {
    min-height: 40px;
    padding: 8px 14px;
    border-radius: 999px;
}

#jewechwi-chat-box.jewechwi-pro-theme-compact #jewechwi-chat-input button {
    width: 38px;
    height: 38px;
    border-radius: 999px;
}