:root { --fond: #0f1620; --texte: #e8edf3; --gris: #7b8794; --bleu: #3b82f6; --orange: #f59e0b; --vert: #22c55e; --rouge: #ef4444; --panneau: rgba(17, 24, 33, 0.94); }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--fond); color: var(--texte); font: 15px/1.4 -apple-system, "Segoe UI", Roboto, sans-serif; overflow: hidden; }
#scene { position: fixed; inset: 0; }
#scene canvas { display: block; width: 100%; height: 100%; }
#bandeau { position: fixed; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: 16px; padding: 10px 16px; background: linear-gradient(rgba(0,0,0,.55), rgba(0,0,0,0)); z-index: 5; }
#patient { font-weight: 600; font-size: 17px; padding: 6px 12px; border-radius: 8px; background: rgba(255,255,255,.08); }
#patient.aucun { color: #fff; background: var(--rouge); }
#ecoute { display: flex; align-items: center; gap: 8px; color: var(--gris); }
#ecoute .point { width: 12px; height: 12px; border-radius: 50%; background: var(--gris); }
#ecoute.vert { color: var(--vert); } #ecoute.vert .point { background: var(--vert); animation: pulse 1.2s infinite; }
#ecoute.orange { color: var(--orange); } #ecoute.orange .point { background: var(--orange); }
@keyframes pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.5); opacity: .5; } }
.actions { margin-left: auto; display: flex; gap: 8px; }
button { background: var(--bleu); color: #fff; border: 0; border-radius: 8px; padding: 8px 14px; font: inherit; cursor: pointer; }
button.secondaire { background: rgba(255,255,255,.12); }
button:disabled { opacity: .5; cursor: default; }
#commande[hidden], #bulle[hidden], #panneau section[hidden] { display: none; }
#commande { position: fixed; left: 50%; bottom: 40px; transform: translateX(-50%); display: flex; gap: 8px; z-index: 6; background: var(--panneau); padding: 10px; border-radius: 12px; width: min(640px, 90vw); }
#commande input { flex: 1; font: inherit; padding: 8px 10px; border-radius: 8px; border: 1px solid #334; background: #0b111a; color: var(--texte); }
#bulle { position: fixed; left: 50%; bottom: 110px; transform: translateX(-50%); max-width: min(640px, 90vw); background: rgba(255,255,255,.95); color: #111; padding: 12px 16px; border-radius: 14px; z-index: 6; font-size: 16px; }
#panneau { position: fixed; top: 0; right: 0; bottom: 0; width: min(420px, 100vw); background: var(--panneau); overflow-y: auto; padding: 64px 16px 16px; z-index: 4; transform: translateX(0); transition: transform .2s; }
#panneau.replie { transform: translateX(100%); }
#panneau h2 { font-size: 14px; text-transform: uppercase; letter-spacing: .06em; color: var(--gris); margin: 18px 0 8px; }
#panneau input { width: 100%; margin-bottom: 8px; font: inherit; padding: 8px 10px; border-radius: 8px; border: 1px solid #334; background: #0b111a; color: var(--texte); }
#panneau ul, #panneau ol { list-style: none; margin: 0; padding: 0; }
#resultats-patients li { padding: 8px 10px; border-radius: 8px; cursor: pointer; }
#resultats-patients li:hover { background: rgba(255,255,255,.08); }
#liste-modeles li { padding: 4px 0; color: var(--gris); font-size: 13px; }
#apercu { width: 100%; height: 300px; border: 1px solid #334; border-radius: 8px; background: #fff; }
.champ { margin: 10px 0; }
.champ label { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--gris); margin-bottom: 4px; }
.champ textarea { width: 100%; min-height: 48px; font: inherit; padding: 8px; border-radius: 8px; border: 1px solid #334; background: #0b111a; color: var(--texte); }
.badge { font-size: 11px; padding: 2px 8px; border-radius: 999px; text-transform: uppercase; letter-spacing: .04em; }
.badge.dossier { background: var(--gris); color: #fff; }
.badge.dicte { background: var(--bleu); color: #fff; }
.badge.infere { background: var(--orange); color: #111; }
.ligne { display: flex; gap: 8px; margin-top: 8px; }
.msg { min-height: 1.4em; color: var(--gris); }
.msg.ok { color: var(--vert); }
.msg.erreur { color: var(--rouge); }
.avert { color: var(--orange); }
#transcript li { padding: 3px 0; font-size: 13px; color: var(--gris); }
#transcript li.medecin { color: var(--texte); }
#transcript li.patient::before { content: "Patient · "; color: var(--orange); }

/* Boutons Télécharger / Imprimer sous l'aperçu, dans le panneau latéral */
.apercu-actions { margin-top: 8px; }
.apercu-btn {
  font: 600 12px/1 system-ui, sans-serif; color: #fff; background: var(--bleu, #2563eb);
  border: 0; border-radius: 8px; padding: 8px 12px; cursor: pointer; white-space: nowrap;
}
.apercu-btn:hover { filter: brightness(1.08); }