<!-- Resultado de laboratorio con valor fuera de rango -->
<article id="lab-tsh" class="abnormal">
  <h3>TSH (Tirotropina)</h3>
  <p class="value">4.5 mIU/L</p>
  <p class="range">Rango: 0.4 – 4.0</p>
</article>

<!-- Trigger nativo del panel -->
<button popovertarget="explain">
  Explicámelo en palabras simples
</button>

<!-- Top Layer del navegador -->
<div id="explain" popover="auto">
  <output id="ai-out"></output>
</div>

/* 1. El resultado anormal expone un ancla */
#lab-tsh { anchor-name: --lab; }

/* 2. El popover se acopla al ancla */
#explain {
  position: fixed;
  position-anchor: --lab;
  position-area: right span-block;
  margin-inline-start: 16px;
  view-transition-name: explain;
}

/* 3. Animación nativa entrada/salida */
::view-transition-old(explain),
::view-transition-new(explain) {
  animation-duration: 260ms;
}

// 1. Feature detection estricto
if (!('Summarizer' in self)) return;
const status = await Summarizer.availability();
if (status !== 'available') return;

// 2. Sesión con contexto clínico
const sum = await Summarizer.create({
  type: 'key-points',
  length: 'short',
  sharedContext: 'Explica resultados de laboratorio en lenguaje claro. No emite diagnósticos.',
});

// 3. Abrir el panel + stream del resumen
document.startViewTransition(() => explain.showPopover());
for await (const c of sum.summarizeStreaming(labResult.innerText)) {
  out.textContent += c;
}

// Sesión conversacional · follow-ups del paciente
const session = await LanguageModel.create({
  initialPrompts: [
    { role: 'system',
      content: 'Asistente médico. Lenguaje simple. Nunca diagnostiques.' },
    { role: 'user',
      content: `Contexto: ${labResult.innerText}` },
  ],
});

form.addEventListener('submit', async (e) => {
  e.preventDefault();
  document.startViewTransition(() => out.textContent = '');
  for await (const c of session.promptStreaming(input.value)) {
    out.textContent += c;
  }
});

// Privacidad: datos médicos jamás salen del navegador
explain.addEventListener('toggle', (e) => {
  if (e.newState === 'closed') session.destroy();
});