<div class="contenedor prosa" style="max-width:640px">
  <h1>Conversación</h1>
  <p class="u-texto-suave"><%= soyPaciente ? 'Con ' + hilo.cirujano : 'Con ' + hilo.paciente %></p>
  <div class="banner-alerta banner-alerta--informativa"><div>Canal para dudas administrativas y de seguimiento. <strong>Para urgencias llama al 112</strong> o a tu centro; este canal no se monitoriza en tiempo real.</div></div>
  <div class="u-mt-16">
  <% mensajes.forEach(function(m){ %>
    <div class="card u-mt-8" style="<%= m.mio ? 'border-left:4px solid var(--color-electrico)' : '' %>">
      <p style="margin:0"><%= m.cuerpo %></p>
      <p class="card__meta" style="margin:.3em 0 0"><%= new Date(m.created_at).toLocaleString('es-ES') %></p></div>
  <% }) %>
  </div>
  <% if (!soyPaciente || hilo.mensajeria_activada) { %>
  <form method="post" action="/mensajes/<%= hilo.id %>" class="u-mt-16">
    <div class="campo"><textarea name="cuerpo" rows="3" required maxlength="2000"></textarea></div>
    <button class="btn btn--primario">Enviar</button>
  </form>
  <% } else { %><p class="u-texto-suave u-mt-16">El profesional ha desactivado la recepción de nuevos mensajes.</p><% } %>
</div>
