/* =============================================
   DR. TOOB — Assistant IA Santé Toobeeb
   Widget CSS Premium v1.0
   ============================================= */

/* ── Variables — palette médicale présentielle ────
   Idée : évoquer une vraie consultation. Le médecin
   (bot) parle en TEAL (blouse/stéthoscope), le
   patient répond en brand. Fond crème chaleureux,
   pas le bleu clinique froid. ───────────────────── */
:root {
  /* V2 — alignement écosystème Toobeeb (palette désaturée + corail terracotta) */
  /* Brand patient + CTA principal : corail (chaleureux, "envie de cliquer") */
  --dt-brand:        #C76B4A;   /* accent V2 corail */
  --dt-brand-dark:   #A85332;   /* accent-deep V2 hover */
  --dt-brand-light:  #F5DDD2;   /* accent-soft V2 halo */

  /* Médical (médecin/header) : navy V2 désaturé */
  --dt-medical:       #1F4459;
  --dt-medical-dark:  #15324A;
  --dt-medical-light: #DDE9F0;

  /* Fond chaleureux (cream V2) */
  --dt-cream:         #FAF7F2;
  --dt-cream-dark:    #F0EAE0;

  --dt-text:          #111827;   /* gray-900 V2 */
  --dt-text-soft:     #4B5563;   /* gray-600 V2 */

  --dt-success:      #2D6A4F;
  --dt-warning:      #D97706;
  --dt-error:        #B23A3A;

  --dt-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --dt-font-serif: 'Fraunces', Georgia, serif;
  --dt-radius: 22px;
  --dt-radius-msg: 20px;
  --dt-z: 900;
  --dt-ease: cubic-bezier(.4,0,.2,1);
  --dt-spring: cubic-bezier(.34,1.56,.64,1);

  /* Fenêtre dimensionnée pour ne JAMAIS empiéter sur la nav sticky en haut
     ni dépasser le bas. Le widget doit toujours afficher header + zone de
     saisie + bouton fermeture sans clip. */
  --dt-w: 420px;
  --dt-h: 540px;
}

/* ── Réinitialisation pour le widget ──────── */
#dt-root * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: var(--dt-font);
  -webkit-font-smoothing: antialiased;
}
#dt-root a { text-decoration: none; color: inherit; }
#dt-root button { cursor: pointer; font-family: var(--dt-font); }

/* ═══════════════════════════════════════════
   BULLE FLOTTANTE
═══════════════════════════════════════════ */
#dt-root {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: var(--dt-z);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
  pointer-events: none;
}

/* Bouton flottant — MASQUÉ (remplacé par popup secrétaire) */
.dt-bubble {
  display: none !important;
}
.dt-bubble--legacy {
  pointer-events: auto;
  min-height: 56px;
  border-radius: 56px;
  background: linear-gradient(145deg, var(--dt-brand) 0%, var(--dt-brand-dark) 100%);
  border: none;
  box-shadow:
    0 6px 24px rgba(4,97,207,.35),
    0 2px 8px rgba(4,97,207,.18),
    inset 0 1px 0 rgba(255,255,255,.18);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 22px 0 18px;
  cursor: pointer;
  position: relative;
  transition: transform 200ms var(--dt-spring), box-shadow 200ms var(--dt-ease);
  flex-shrink: 0;
}
.dt-bubble:hover {
  transform: translateY(-2px);
  box-shadow:
    0 10px 32px rgba(4,97,207,.45),
    0 4px 12px rgba(4,97,207,.22);
}
.dt-bubble:active { transform: scale(.97); }

/* Focus visible pour navigation clavier — anneau 3px */
.dt-bubble:focus-visible {
  outline: 3px solid #60A5FA;
  outline-offset: 3px;
}

/* Contenu ouvert (icône + texte) */
.dt-bubble-content {
  display: flex;
  align-items: center;
  gap: 10px;
  pointer-events: none;
}

/* Icône médicale (croix) — conteneur */
.dt-bubble-icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.dt-bubble-icon svg { display: block; }

/* Texte « Assistant Santé » */
.dt-bubble-label {
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  line-height: 1.2;
  letter-spacing: -.1px;
  white-space: nowrap;
}

/* Micro icône secondaire */
.dt-bubble-mic {
  width: 18px;
  height: 18px;
  opacity: .75;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Icône X (quand ouvert) */
.dt-bubble-close-icon {
  display: none;
  color: #fff;
  pointer-events: none;
}

/* ── État ouvert : pill → rond compact ─── */
.dt-bubble.open {
  padding: 0;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  justify-content: center;
}
.dt-bubble.open .dt-bubble-content { display: none; }
.dt-bubble.open .dt-bubble-close-icon { display: flex; }

/* Pulse ring — animation douce, uniquement quand fermé */
.dt-bubble::before {
  content: '';
  position: absolute;
  inset: -5px;
  border-radius: 56px;
  border: 2px solid rgba(4,97,207,.30);
  animation: dt-pulse-ring 3s ease-in-out infinite;
  pointer-events: none;
}
.dt-bubble.open::before { display: none; }

@keyframes dt-pulse-ring {
  0%   { transform: scale(.96); opacity: .6; }
  50%  { transform: scale(1.06); opacity: 0; }
  100% { transform: scale(.96); opacity: .6; }
}

/* Badge notification */
.dt-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 20px;
  height: 20px;
  background: #EF4444;
  color: #fff;
  border-radius: 50px;
  font-size: 11px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
  border: 2px solid #fff;
  box-shadow: 0 2px 6px rgba(239,68,68,.4);
  animation: dt-badge-pop .3s var(--dt-spring);
}
.dt-badge.hidden { display: none; }
@keyframes dt-badge-pop {
  from { transform: scale(0); }
  to   { transform: scale(1); }
}

/* ═══════════════════════════════════════════
   FENÊTRE DE CHAT
═══════════════════════════════════════════ */
.dt-window {
  width: var(--dt-w);
  max-width: 520px;
  height: var(--dt-h);
  min-height: 420px;
  /* Réserve 130px en haut : 72px nav + 58px pour padding visuel — le widget
     démarre TOUJOURS sous la nav sticky, jamais au-dessus */
  max-height: calc(100vh - 130px);
  background: #fff;
  border-radius: var(--dt-radius);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(15,118,110,.08),
    0 18px 52px rgba(15,118,110,.14),
    0 6px 20px rgba(0,0,0,.08),
    0 36px 80px rgba(0,0,0,.10);
  border: 1px solid rgba(255,255,255,.95);

  /* Animation d'entrée */
  transform-origin: bottom right;
  transform: scale(.85) translateY(20px);
  opacity: 0;
  pointer-events: none;
  transition:
    transform 300ms var(--dt-spring),
    opacity 250ms var(--dt-ease);
}
.dt-window.open {
  transform: scale(1) translateY(0);
  opacity: 1;
  pointer-events: all;
}
.dt-window[hidden] {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* ── Header — gradient teal médical → brand ──── */
.dt-header {
  background: linear-gradient(135deg, var(--dt-medical) 0%, var(--dt-medical-dark) 38%, var(--dt-brand) 100%);
  padding: 18px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}
/* Shimmer décoratif */
.dt-header::before {
  content: '';
  position: absolute;
  top: -30px; right: -30px;
  width: 100px; height: 100px;
  border-radius: 50%;
  background: rgba(255,255,255,.07);
  pointer-events: none;
}
.dt-header::after {
  content: '';
  position: absolute;
  bottom: -20px; left: 40px;
  width: 70px; height: 70px;
  border-radius: 50%;
  background: rgba(255,255,255,.05);
  pointer-events: none;
}

.dt-header-avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(255,255,255,.18);
  border: 1.5px solid rgba(255,255,255,.3);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
}
.dt-header-avatar span {
  font-size: 14px;
  font-weight: 900;
  color: #fff;
  letter-spacing: -.3px;
}

.dt-status-dot {
  position: absolute;
  bottom: 0; right: 0;
  width: 11px; height: 11px;
  border-radius: 50%;
  background: var(--dt-success);
  border: 2px solid var(--dt-medical);
  animation: dt-pulse-dot 2s ease-in-out infinite;
}
@keyframes dt-pulse-dot {
  0%, 100% { box-shadow: 0 0 0 0 rgba(16,185,129,.55); }
  50% { box-shadow: 0 0 0 5px rgba(16,185,129,0); }
}

.dt-header-info { flex: 1; min-width: 0; }
.dt-header-name {
  font-size: 14.5px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -.2px;
  line-height: 1.2;
}
.dt-header-status {
  font-size: 12px;
  color: rgba(255,255,255,.78);
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 2px;
  font-weight: 500;
}
.dt-header-status::before {
  content: '';
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #34D399;
}

.dt-header-actions {
  display: flex;
  gap: 6px;
  position: relative;
  z-index: 1;
}
.dt-header-btn {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: rgba(255,255,255,.28);
  border: 1px solid rgba(255,255,255,.4);
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 150ms ease;
  cursor: pointer;
}
.dt-header-btn:hover { background: rgba(255,255,255,.4); border-color: rgba(255,255,255,.6); }

/* ── Disclaimer ──────────────────────────── */
.dt-disclaimer {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: #FFFBEB;
  border-bottom: 1px solid #FDE68A;
  font-size: 11px;
  color: #92400E;
  font-weight: 500;
  line-height: 1.4;
  flex-shrink: 0;
}
.dt-disclaimer svg { flex-shrink: 0; color: #D97706; }
.dt-disclaimer strong { font-weight: 700; }

/* ── Zone messages — fond crème médical chaleureux */
.dt-messages {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 22px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: var(--dt-cream);
}
.dt-messages::-webkit-scrollbar { width: 5px; }
.dt-messages::-webkit-scrollbar-track { background: transparent; }
.dt-messages::-webkit-scrollbar-thumb {
  background: rgba(15,118,110,.22);
  border-radius: 4px;
}
.dt-messages::-webkit-scrollbar-thumb:hover { background: rgba(15,118,110,.38); }

/* Séparateur de session */
.dt-session-start {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: #8A99AB;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .8px;
  margin: 4px 0;
}
.dt-session-start::before, .dt-session-start::after {
  content: '';
  flex: 1;
  height: 1px;
  background: #EEF1F7;
}

/* ── Bulles de message ───────────────────── */
/* Préfixe #dt-root pour battre la spécificité du reset #dt-root * */
#dt-root .dt-msg {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  animation: dt-msg-in .25s var(--dt-ease);
  max-width: 100%;
}
@keyframes dt-msg-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

#dt-root .dt-msg.user { flex-direction: row-reverse; }

/* Avatar Dr. Toobeeb (bot IA) — teal médical, évoque la blouse */
#dt-root .dt-msg-avatar {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--dt-medical) 0%, var(--dt-medical-dark) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 900;
  color: #fff;
  flex-shrink: 0;
  align-self: flex-end;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.22),
    0 3px 10px rgba(15,118,110,0.30);
}
/* Avatar patient — brand (garde l'identité Toobeeb) */
#dt-root .dt-msg.user .dt-msg-avatar {
  background: linear-gradient(135deg, var(--dt-brand) 0%, var(--dt-brand-dark) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.22),
    0 3px 10px rgba(4,97,207,0.30);
}

#dt-root .dt-msg-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: 75%;
}
#dt-root .dt-msg.user .dt-msg-body { align-items: flex-end; }

#dt-root .dt-msg-bubble {
  padding: 14px 18px;
  border-radius: var(--dt-radius-msg);
  font-family: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.55;
  color: var(--dt-text);
  word-break: break-word;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 46px;
}
/* Bot bubble — blanc pur avec accent teal subtil à gauche */
#dt-root .dt-msg.bot .dt-msg-bubble {
  background-color: #fff !important;
  font-family: 'Figtree', sans-serif !important;
  font-weight: 500 !important;
  font-size: 14.5px !important;
  line-height: 1.55 !important;
  padding: 14px 18px !important;
  border-radius: var(--dt-radius-msg) !important;
  border-bottom-left-radius: 6px !important;
  border: 1px solid rgba(15,118,110,.12);
  border-left: 2.5px solid var(--dt-medical);
  box-shadow: 0 2px 8px rgba(15,118,110,.08);
  color: var(--dt-text);
}
/* User bubble — brand, contraste fort avec crème + bulle médecin */
#dt-root .dt-msg.user .dt-msg-bubble {
  background: linear-gradient(135deg, #FF8E5A 0%, var(--dt-brand) 60%, var(--dt-brand-dark) 100%);
  color: #fff;
  border-radius: var(--dt-radius-msg) var(--dt-radius-msg) 6px var(--dt-radius-msg);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.35),
    0 4px 14px rgba(4,97,207,.30);
}

/* Paragraphes à l'intérieur des bulles bot (générés par formatMedicalText) */
#dt-root .dt-msg-bubble p {
  margin: 0;
  padding: 0;
}
#dt-root .dt-msg-bubble p + p {
  margin-top: 6px;
}

#dt-root .dt-msg-time {
  font-size: 10.5px;
  color: #8A99AB;
  padding: 0 4px;
}

/* ── Badge de sévérité ───────────────────── */
.dt-severity {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 50px;
  font-size: 12px;
  font-weight: 700;
  width: fit-content;
  margin-top: 2px;
  letter-spacing: .1px;
}
.dt-severity-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

.dt-severity.benin {
  background: #ECFDF5;
  color: #065F46;
  border: 1px solid rgba(11,175,107,.2);
}
.dt-severity.benin .dt-severity-dot { background: var(--dt-success); }

.dt-severity.consulter {
  background: #FFFBEB;
  color: #92400E;
  border: 1px solid rgba(217,119,6,.2);
}
.dt-severity.consulter .dt-severity-dot {
  background: var(--dt-warning);
  animation: dt-pulse-dot 1.5s infinite;
}

.dt-severity.urgence {
  background: #FEF2F2;
  color: #991B1B;
  border: 1px solid rgba(220,38,38,.2);
}
.dt-severity.urgence .dt-severity-dot {
  background: var(--dt-error);
  animation: dt-pulse-dot 1s infinite;
}

/* ── Alerte urgence vitale ───────────────── */
.dt-emergency-alert {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  background: linear-gradient(135deg, #FEF2F2, #FEE2E2);
  border: 1.5px solid rgba(220,38,38,.3);
  border-radius: 14px;
  margin-top: 4px;
  animation: dt-emergency-pulse 2s ease-in-out infinite;
}
@keyframes dt-emergency-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(220,38,38,.2); }
  50% { box-shadow: 0 0 0 6px rgba(220,38,38,0); }
}
.dt-emergency-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 800;
  color: #991B1B;
}
.dt-emergency-number {
  display: flex;
  gap: 8px;
}
.dt-emergency-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px;
  background: #DC2626;
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 900;
  cursor: pointer;
  transition: background 150ms ease, transform 150ms ease;
  font-family: var(--dt-font);
  letter-spacing: -.2px;
}
.dt-emergency-btn:hover { background: #B91C1C; transform: translateY(-1px); }
.dt-emergency-btn small { font-size: 10px; font-weight: 600; opacity: .85; }

/* ── Bouton CTA consultation (corail V2 — invite à cliquer) ──── */
.dt-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 22px;
  background: linear-gradient(135deg, #FF8E5A 0%, var(--dt-brand) 100%);
  color: #FFFFFF;
  border: none;
  border-radius: 14px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 150ms var(--dt-spring), box-shadow 150ms ease, filter 150ms ease;
  font-family: var(--dt-font);
  letter-spacing: -.1px;
  box-shadow:
    0 6px 16px rgba(199,107,74,.32),
    inset 0 1px 0 rgba(255,255,255,.25);
  margin-top: 8px;
  text-decoration: none;
  position: relative;
  overflow: hidden;
}
.dt-cta-btn::before {
  /* shine subtle au hover */
  content: "";
  position: absolute;
  top: 0; left: -100%;
  width: 50%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.32), transparent);
  transition: left .6s ease;
}
.dt-cta-btn:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 10px 24px rgba(199,107,74,.45), inset 0 1px 0 rgba(255,255,255,.3);
  filter: brightness(1.05);
}
.dt-cta-btn:hover::before { left: 120%; }
.dt-cta-btn:active { transform: translateY(0) scale(.99); }

/* ── Indicateur de frappe ────────────────── */
.dt-typing {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
}
.dt-typing-dots {
  display: flex;
  gap: 4px;
  align-items: center;
  background: #F0F0F0;
  padding: 12px 16px;
  border-radius: 20px 20px 20px 4px;
  border: none;
  box-shadow: none;
}
.dt-typing-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #C4CEDC;
  animation: dt-bounce 1.4s ease-in-out infinite;
}
.dt-typing-dot:nth-child(2) { animation-delay: .18s; }
.dt-typing-dot:nth-child(3) { animation-delay: .36s; }
@keyframes dt-bounce {
  0%, 80%, 100% { transform: scale(.75); opacity: .5; }
  40% { transform: scale(1.05); opacity: 1; }
}
.dt-typing.hidden { display: none; }

/* ── Suggestions rapides — masquées (chat libre, pas de raccourcis) ─── */
.dt-quick-suggestions {
  display: none !important;
}
.dt-quick-suggestions--visible {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  padding: 4px 0 8px;
}
.dt-suggestion-chip {
  padding: 8px 14px;
  background: var(--dt-cream);
  border: 1.5px solid var(--dt-cream-dark);
  border-radius: 50px;
  font-size: 14px;
  font-weight: 600;
  color: var(--dt-text);
  cursor: pointer;
  transition: background 150ms ease, border-color 150ms ease, transform 150ms ease, color 150ms ease;
  font-family: var(--dt-font);
}
.dt-suggestion-chip:hover {
  background: var(--dt-brand-light);
  border-color: var(--dt-brand);
  color: var(--dt-brand-dark);
  transform: translateY(-1px);
}

/* ── Zone de saisie — bulle large, arrondie, centrée ── */
.dt-input-area {
  padding: 18px 22px 20px;
  border-top: 1px solid rgba(15,118,110,.10);
  background: #fff;
  display: flex;
  gap: 12px;
  align-items: center;
  flex-shrink: 0;
}
.dt-input-wrap {
  flex: 1;
  position: relative;
  background: var(--dt-cream);
  border: 1.5px solid rgba(15,118,110,.14);
  border-radius: 28px;
  transition: border-color 200ms ease, box-shadow 200ms ease, background 200ms ease;
  min-height: 60px;
  display: flex;
  align-items: center;
}
.dt-input-wrap:focus-within {
  border-color: var(--dt-medical);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(15,118,110,.14);
}
.dt-input {
  width: 100%;
  padding: 18px 24px;
  background: transparent;
  border: none;
  outline: none;
  font-size: 15.5px;
  font-weight: 500;
  font-family: var(--dt-font);
  color: var(--dt-text);
  resize: none;
  max-height: 140px;
  min-height: 28px;
  line-height: 1.45;
  display: block;
  text-align: center;
}
.dt-input::placeholder {
  color: #94A3B8;
  text-align: center;
  font-weight: 400;
}
.dt-input::-webkit-scrollbar { width: 4px; }
.dt-input::-webkit-scrollbar-thumb {
  background: rgba(15,118,110,.25);
  border-radius: 4px;
}

/* ── Bouton micro (corail V2 + halo invitant pulsant) ─────── */
.dt-mic {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, #FF8E5A 0%, var(--dt-brand) 100%);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  cursor: pointer;
  position: relative;
  transition: transform 150ms var(--dt-spring), box-shadow 150ms ease, filter 150ms ease;
  flex-shrink: 0;
  box-shadow:
    0 4px 14px rgba(199,107,74,.35),
    inset 0 1px 0 rgba(255,255,255,.25);
}
.dt-mic::before {
  /* halo pulsant permanent — incite à cliquer */
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid var(--dt-brand);
  opacity: 0;
  animation: dt-mic-invite 2.4s ease-in-out infinite;
  pointer-events: none;
}
@keyframes dt-mic-invite {
  0%   { transform: scale(.92); opacity: .55; }
  60%  { transform: scale(1.18); opacity: 0; }
  100% { transform: scale(1.18); opacity: 0; }
}
.dt-mic:hover {
  transform: scale(1.1);
  box-shadow: 0 8px 22px rgba(199,107,74,.5);
  filter: brightness(1.05);
}
.dt-mic:active { transform: scale(.95); }

/* Pulse ring — hidden by default, shown when recording */
.dt-mic-pulse {
  display: none;
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 2.5px solid #EF4444;
  animation: dt-mic-pulse-ring 1.2s ease-in-out infinite;
  pointer-events: none;
}

/* Recording state */
.dt-mic.recording {
  background: #FEE2E2;
  border-color: #EF4444;
  color: #DC2626;
  box-shadow: 0 0 0 4px rgba(239,68,68,.12), 0 4px 14px rgba(239,68,68,.25);
}
.dt-mic.recording:hover {
  background: #FECACA;
  border-color: #DC2626;
}
.dt-mic.recording .dt-mic-pulse { display: block; }
.dt-mic.recording .dt-mic-icon { animation: dt-mic-throb 1s ease-in-out infinite; }

@keyframes dt-mic-pulse-ring {
  0%   { transform: scale(.92); opacity: 1; }
  50%  { transform: scale(1.15); opacity: 0; }
  100% { transform: scale(.92); opacity: 1; }
}
@keyframes dt-mic-throb {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.12); }
}

/* ── Bouton envoyer ─────────────────────── */
.dt-send {
  width: 44px; height: 44px;
  border-radius: 14px;
  background: var(--dt-brand);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  transition: background 150ms ease, transform 150ms ease, box-shadow 150ms ease;
  flex-shrink: 0;
}
.dt-send:hover:not(:disabled) {
  background: var(--dt-brand-dark);
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(4,97,207,.3);
}
.dt-send:disabled { opacity: .45; cursor: not-allowed; }
.dt-send svg { transition: transform 150ms ease; }
.dt-send:hover:not(:disabled) svg { transform: translateX(1px) translateY(-1px); }

/* ── Footer input hint ───────────────────── */
.dt-input-hint {
  font-size: 10.5px;
  color: #8A99AB;
  padding: 0 4px 4px;
  text-align: center;
  flex-shrink: 0;
  line-height: 1.4;
  display: none;
}

/* ── État chargement ─────────────────────── */
.dt-send.loading {
  background: var(--dt-brand);
  opacity: .7;
  cursor: not-allowed;
}
.dt-send.loading svg { animation: dt-spin .8s linear infinite; }
@keyframes dt-spin { to { transform: rotate(360deg); } }

/* ── Erreur API ──────────────────────────── */
.dt-error-msg {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 12px;
  background: #FEF2F2;
  border: 1px solid rgba(220,38,38,.2);
  border-radius: 12px;
  font-size: 12.5px;
  color: #991B1B;
  line-height: 1.5;
  width: 100%;
}
.dt-error-msg svg { flex-shrink: 0; margin-top: 1px; }

/* ─────────────────────────────────────────
   RTL (Arabe)
───────────────────────────────────────── */
#dt-root.dt-rtl .dt-msg.bot { flex-direction: row-reverse; }
#dt-root.dt-rtl .dt-msg.user { flex-direction: row; }
#dt-root.dt-rtl .dt-msg.bot .dt-msg-bubble { border-radius: 18px 18px 4px 18px; }
#dt-root.dt-rtl .dt-msg.user .dt-msg-bubble { border-radius: 18px 18px 18px 4px; }
#dt-root.dt-rtl .dt-msg-body { align-items: flex-start; }
#dt-root.dt-rtl .dt-msg.user .dt-msg-body { align-items: flex-end; }
#dt-root.dt-rtl .dt-input { direction: rtl; text-align: right; }

/* ─────────────────────────────────────────
   RESPONSIVE MOBILE
───────────────────────────────────────── */
@media (max-width: 480px) {
  #dt-root {
    bottom: 12px;
    right: 12px;
    align-items: flex-end;
  }
  .dt-window {
    width: calc(100vw - 24px);
    max-width: 400px;
    height: calc(100vh - 80px);
    min-height: 400px;
  }
  .dt-bubble {
    min-height: 52px;
    padding: 0 18px 0 14px;
    gap: 8px;
  }
  .dt-bubble-label { font-size: 15px; }
  .dt-bubble.open {
    width: 52px;
    height: 52px;
    padding: 0;
  }
}

/* ═══════════════════════════════════════════
   SECRETARY POPUP
═══════════════════════════════════════════ */
#dt-secretary {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 310px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0,0,0,.12), 0 2px 8px rgba(0,0,0,.06);
  padding: 18px;
  z-index: 9999;
  opacity: 0;
  transform: translateY(16px) scale(.96);
  transition: opacity .3s ease, transform .3s ease;
  font-family: 'Figtree', -apple-system, sans-serif;
}
#dt-secretary.open {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.dt-sec-close {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 24px; height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: #94a3b8;
  cursor: pointer;
  border-radius: 50%;
  transition: background .15s, color .15s;
}
.dt-sec-close:hover { background: #f1f5f9; color: #475569; }
.dt-sec-avatar {
  width: 36px; height: 36px;
  background: linear-gradient(135deg, #dbeafe, #bfdbfe);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
}
.dt-sec-text {
  font-size: 13.5px;
  line-height: 1.55;
  color: #1e293b;
  font-weight: 500;
  margin: 0 0 14px 0;
}
.dt-sec-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.dt-sec-btn {
  flex: 1 1 calc(50% - 3px);
  padding: 8px 6px;
  border: 1.5px solid #e2e8f0;
  border-radius: 10px;
  background: #fff;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: #334155;
  cursor: pointer;
  transition: all .15s;
  text-align: center;
  white-space: nowrap;
}
.dt-sec-btn:hover { background: var(--dt-brand-light); border-color: var(--dt-brand); color: var(--dt-brand-dark); }
.dt-sec-urgent { border-color: #fecaca; color: #dc2626; }
.dt-sec-urgent:hover { background: #fef2f2; border-color: #ef4444; color: #dc2626; }
.dt-sec-medecin { border-color: #bbf7d0; color: #16a34a; }
.dt-sec-medecin:hover { background: #f0fdf4; border-color: #22c55e; color: #16a34a; }

@media (max-width: 480px) {
  #dt-secretary {
    right: 12px;
    left: 12px;
    width: auto;
    bottom: 90px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dt-bubble::before,
  .dt-status-dot,
  .dt-severity.urgence .dt-severity-dot,
  .dt-severity.consulter .dt-severity-dot,
  .dt-emergency-alert,
  .dt-typing-dot,
  .dt-mic-pulse,
  .dt-mic-icon { animation: none; }
  .dt-window,
  .dt-msg { transition-duration: .01ms; animation-duration: .01ms; }
  #dt-secretary { transition-duration: .01ms; }
}