/* =========================================================================
   ALYO — dialogue-zesto.css
   Habillage du panneau « appel en direct » (.call) calé sur le dashboard :
   indigo #0B7C57, bulles lavande « ALYO », carte blanche, contrôles indigo.
   N'ajoute aucune règle d'animation — l'animation de call.js est conservée.
   ========================================================================= */

/* ---- Carte du dialogue --------------------------------------------------- */
.call {
  --dlg-accent: #0B7C57;
  --dlg-ink:    #241f4d;
  --dlg-ink-2:  #5b6070;
  --dlg-ink-3:  #9094a6;
  --dlg-line:   #eeedf6;
  --dlg-lav:    #E7F7F0;
  --dlg-grey:   #f4f5f8;

  font-family: "Plus Jakarta Sans", var(--font);
  background: #ffffff;
  border: 1px solid #f0f0f6;
  border-radius: 28px;
  padding: 14px;
  color: var(--dlg-ink);
  box-shadow: 0 1px 2px rgba(28,27,58,.05), 0 30px 64px -34px rgba(60,55,140,.34);
}
.call::before {
  background: radial-gradient(72% 60% at 82% 0%, rgba(15, 158, 110,.20), transparent 62%);
  filter: blur(26px);
  opacity: .7;
}

/* ---- En-tête ------------------------------------------------------------- */
.call-head { padding: 11px 12px 14px; border-bottom: 1px solid var(--dlg-line); }
.call-live { color: var(--dlg-accent); font-weight: 750; }
.call-live .pdot { background: var(--dlg-accent); }
.call-live .pdot::after { box-shadow: 0 0 0 0 rgba(15, 158, 110,.55); }
.call-meta { color: var(--dlg-ink-3); font-weight: 600; }
.call-meta span:first-child { color: var(--dlg-ink-2); font-weight: 700; }

/* ---- Transcription ------------------------------------------------------- */
.call-body { padding: 17px 8px 6px; gap: 12px; }
.bubble {
  font-size: .95rem; font-weight: 500; line-height: 1.46;
  border-radius: 16px; padding: 10px 14px;
}
.bubble small { font-size: .6rem; font-weight: 750; letter-spacing: .06em; opacity: 1; margin-bottom: 4px; }
.bubble.ai {
  align-self: flex-start;
  background: var(--dlg-lav); border: none; color: #0A5238;
  border-bottom-left-radius: 5px;
}
.bubble.ai small { color: var(--dlg-accent); }
.bubble.user {
  align-self: flex-end;
  background: var(--dlg-grey); border: none; color: #3b4050; font-weight: 500;
  border-bottom-right-radius: 5px;
}
.bubble.user small { color: var(--dlg-ink-3); opacity: 1; }

/* ---- Indicateur de saisie ------------------------------------------------ */
.typing {
  background: var(--dlg-lav); border: none;
  border-radius: 16px; border-bottom-left-radius: 5px;
}
.typing i { background: #5ED9AE; }

/* ---- Panneau « Pendant ce temps, Alyo agit » ---------------------------- */
.call-actions {
  margin-top: 12px; padding: 13px 15px;
  background: #F2FBF7; border: 1px solid var(--dlg-line); border-radius: 18px;
}
.call-actions .ttl { color: var(--dlg-accent); font-weight: 750; }
.act-row { color: var(--dlg-ink); font-weight: 550; }
.act-row + .act-row { border-top: 1px solid var(--dlg-line); }
.act-row b { color: var(--dlg-ink); font-weight: 750; }
.act-row .tick { background: #D6F3E7; color: #5ED9AE; }
.act-row.done .tick { background: var(--dlg-accent); color: #fff; }

/* ---- Contrôles de lecture ------------------------------------------------ */
.call-controls { padding: 14px 4px 4px; }
.call-controls .scrub { background: #ecebf5; }
.call-controls .scrub i { background: var(--dlg-accent); }
.cbtn { background: #f3f2fb; color: var(--dlg-accent); }
.cbtn:hover { background: var(--dlg-accent); color: #fff; }
.call-hint { color: var(--dlg-ink-3); }