/* =====================================================================
   Theme du chatbot France Equipement — palette client.
   Principal : rouge #d21317 · Secondaire : bleu #1a2b4c · Texte : noir.
   Le rouge porte les actions (boutons, bulle, messages utilisateur) ;
   le bleu logo porte les bandeaux de marque (navbar, en-tete, login).
   Prefixe .app-* pour le custom.
   ===================================================================== */

:root {
  --app-primary: #d21317;        /* rouge — couleur principale */
  --app-primary-600: #b41013;    /* survol */
  --app-primary-700: #960d10;    /* actif */

  --app-secondary: #1a2b4c;      /* bleu logo — couleur secondaire */
  --app-secondary-600: #0c1740;  /* survol */

  --app-ink: #000000;            /* texte noir */

  --bs-primary: var(--app-primary);
  --bs-primary-rgb: 210, 19, 23;
  --bs-secondary: var(--app-secondary);
  --bs-secondary-rgb: 18, 32, 83;
  --bs-body-color: var(--app-ink);
  --bs-link-color: var(--app-secondary);
  --bs-link-color-rgb: 18, 32, 83;
  --bs-link-hover-color: var(--app-primary);
  --bs-border-radius: .75rem;
  --bs-body-font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}

body {
  font-family: var(--bs-body-font-family);
  color: var(--app-ink);
}

/* Boutons primaires (rouge) retravailles (padding + poids) */
.btn-primary {
  --bs-btn-bg: var(--app-primary);
  --bs-btn-border-color: var(--app-primary);
  --bs-btn-hover-bg: var(--app-primary-600);
  --bs-btn-hover-border-color: var(--app-primary-600);
  --bs-btn-active-bg: var(--app-primary-700);
  --bs-btn-active-border-color: var(--app-primary-700);
  font-weight: 600;
}

.text-app-primary   { color: var(--app-primary) !important; }
.bg-app-primary     { background-color: var(--app-primary) !important; }
.text-app-secondary { color: var(--app-secondary) !important; }
.bg-app-secondary   { background-color: var(--app-secondary) !important; }

/* ===== Widget chatbot (front iframe) ===== */
html { height: 100%; }
.app-chat-body {
  height: 100%;
  margin: 0;
  overflow: hidden;          /* l'iframe (60x60 ou 400x680) ne doit jamais afficher de scrollbar */
  background: transparent;
}

/* Bouton flottant (etat ferme) — rouge, occupe toute l'iframe 60x60 */
.app-launcher {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: var(--app-primary);
  color: #fff;
  font-size: 1.6rem;
  cursor: pointer;
  transition: background .2s ease, transform .15s ease;
}
.app-launcher:hover { background: var(--app-primary-600); transform: scale(1.05); }
/* Logo (trait blanc, transparent) centre dans la bulle rouge */
.app-launcher-logo { width: 68%; height: 68%; object-fit: contain; }

/* Logo France Equipement en avatar du bot (en-tete + bulles + page d'acces direct) */
.app-bot-logo    { height: 1.5rem; width: auto; object-fit: contain; }
.app-bot-logo-lg { height: 3rem;   width: auto; object-fit: contain; }

/* Panneau de conversation (etat ouvert) — occupe toute l'iframe */
.app-panel {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 1.25rem;
  overflow: hidden;
}

/* En-tete du panneau : bandeau de marque (bleu logo) */
.app-panel-header {
  background: var(--app-secondary);
  color: #fff;
}

/* Bulles : bot = gris neutre (texte noir lisible) ; user = rouge */
.app-msg-bot  { background: #f1f2f4; }
.app-msg-user { background: var(--app-primary); color: #fff; }

.app-bubble {
  border-radius: 1rem;
  padding: .55rem .85rem;
  line-height: 1.5;
  max-width: 85%;
}
.app-bubble p:last-child { margin-bottom: 0; }

/* Avertissement sous la zone de saisie */
.app-disclaimer { font-size: .68rem; line-height: 1.3; }

.app-messages { overflow-y: auto; }
.app-messages::-webkit-scrollbar { width: 8px; }
.app-messages::-webkit-scrollbar-thumb { background: #cdd7dd; border-radius: 8px; }

/* ===== Rendu Markdown (back-office : liste + preview des documents) ===== */
.app-markdown { font-size: .9rem; line-height: 1.6; }
.app-markdown > :first-child { margin-top: 0; }
.app-markdown > :last-child { margin-bottom: 0; }
.app-markdown h1, .app-markdown h2, .app-markdown h3,
.app-markdown h4, .app-markdown h5, .app-markdown h6 { font-weight: 600; margin: 1em 0 .4em; }
.app-markdown h1 { font-size: 1.3rem; }
.app-markdown h2 { font-size: 1.15rem; }
.app-markdown h3 { font-size: 1.02rem; }
.app-markdown h4, .app-markdown h5, .app-markdown h6 { font-size: .95rem; }
.app-markdown ul, .app-markdown ol { padding-left: 1.4em; margin-bottom: .6em; }
.app-markdown blockquote { border-left: 3px solid #dee2e6; padding-left: .8em; color: #6c757d; margin: .6em 0; }
.app-markdown code { background: #f1f3f5; padding: .12em .3em; border-radius: 3px; font-size: .9em; }
.app-markdown pre { background: #f6f8fa; padding: .7em .9em; border-radius: .4rem; overflow: auto; font-size: .85em; }
.app-markdown pre code { background: none; padding: 0; }
.app-markdown table { width: 100%; border-collapse: collapse; margin: .6em 0; font-size: .9em; }
.app-markdown th, .app-markdown td { border: 1px solid #dee2e6; padding: .35em .6em; }
.app-markdown th { background: #f8f9fa; }
.app-markdown img { max-width: 100%; height: auto; }

/* Chevron de l'accordeon des documents (un seul contenu ouvert a la fois) */
.app-md-chevron { transition: transform .15s ease; }
.app-md-toggle:not(.collapsed) .app-md-chevron { transform: rotate(90deg); }

/* ===== Fix EasyMDE x Bootstrap =====
   Le bouton "Insert Table" de la toolbar EasyMDE porte class="table", qui herite
   des styles Bootstrap .table (width:100%, margin-bottom, vertical-align) et casse
   la toolbar. On reinitialise les boutons de la toolbar. */
.editor-toolbar button { width: 30px; margin-bottom: 0; color: inherit; vertical-align: middle; }
.editor-toolbar button.table { display: inline-block; border: 0; background: transparent; }