{% if env.kind.value == 'grounded' %}
<article class="pp-card pp-fade overflow-hidden">
  <!-- Question echo + confidence -->
  <div class="flex flex-wrap items-center justify-between gap-3 border-b border-slate-200/70 px-6 py-4 dark:border-slate-800/70">
    <div class="flex items-center gap-2 text-sm font-medium text-slate-500 dark:text-slate-400">
      <svg class="h-4 w-4 text-brand-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>
      <span class="truncate">{{ env.question }}</span>
    </div>
    <div class="flex items-center gap-2">
      <span class="text-[11px] font-semibold uppercase tracking-wider text-slate-400">Confidence</span>
      <div class="pp-meter w-24"><span style="width: {{ (env.confidence * 100)|round|int }}%"></span></div>
      <span class="text-xs font-semibold text-slate-600 dark:text-slate-300">{{ (env.confidence * 100)|round|int }}%</span>
    </div>
  </div>

  <!-- Grounded answer with inline citations -->
  <div class="px-6 py-5">
    <span class="inline-flex items-center gap-1.5 rounded-full bg-emerald-50 px-2.5 py-0.5 text-[11px] font-semibold text-emerald-700 ring-1 ring-inset ring-emerald-200 dark:bg-emerald-500/10 dark:text-emerald-300 dark:ring-emerald-500/20">
      <svg class="h-3 w-3" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
      Grounded answer
    </span>
    <p class="mt-3 text-[15px] leading-7 text-slate-800 dark:text-slate-100">{{ env.answer|linkify_citations(env.citations)|safe }}</p>
  </div>

  <!-- Citations -->
  {% if env.citations %}
  <div class="border-t border-slate-200/70 bg-slate-50/50 px-6 py-4 dark:border-slate-800/70 dark:bg-slate-900/40">
    <h3 class="text-[11px] font-semibold uppercase tracking-wider text-slate-400">Sources</h3>
    <ol class="mt-2 space-y-2">
      {% for c in env.citations %}
      <li class="flex items-start gap-2.5 text-sm">
        <span class="pp-cite mt-0.5 !static !align-baseline">{{ c.marker }}</span>
        <a href="{{ c.url }}" target="_blank" rel="noopener" class="group min-w-0">
          <span class="font-medium text-slate-700 group-hover:text-brand-600 dark:text-slate-200 dark:group-hover:text-brand-400">{{ c.publisher }}</span>
          <span class="text-slate-400"> · {{ c.title }}</span>
          <span class="block truncate text-xs text-slate-400">{{ c.snippet }}</span>
          <span class="text-[10px] text-slate-400">Retrieved {{ c.retrieved }}</span>
        </a>
      </li>
      {% endfor %}
    </ol>
  </div>
  {% endif %}

  <!-- Disclaimer -->
  <div class="flex items-start gap-2 border-t border-slate-200/70 px-6 py-3 text-xs text-slate-500 dark:border-slate-800/70 dark:text-slate-400">
    <svg class="mt-0.5 h-3.5 w-3.5 shrink-0 text-amber-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>
    <span><strong>Legal information, not legal advice.</strong> {{ env.disclaimer }}</span>
  </div>
</article>

{% else %}
<!-- Refusal / escalation card -->
<article class="pp-card pp-fade overflow-hidden border-amber-300/60 dark:border-amber-500/30">
  <div class="flex items-start gap-3 border-b border-amber-200/60 bg-amber-50/60 px-6 py-4 dark:border-amber-500/20 dark:bg-amber-500/5">
    <span class="grid h-9 w-9 shrink-0 place-items-center rounded-lg bg-amber-100 text-amber-600 dark:bg-amber-500/15 dark:text-amber-300">
      <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
    </span>
    <div>
      <h3 class="font-semibold text-slate-900 dark:text-slate-50">
        {% if env.kind.value == 'refusal_advice' %}I can't give legal advice
        {% elif env.kind.value == 'refusal_scope' %}That's outside ParaPilot's scope
        {% else %}I don't have a grounded answer{% endif %}
      </h3>
      <p class="text-sm text-slate-500 dark:text-slate-400">{{ env.question }}</p>
    </div>
  </div>

  <div class="px-6 py-5">
    <p class="text-[15px] leading-7 text-slate-700 dark:text-slate-200">{{ env.answer }}</p>
  </div>

  <!-- Escalation -->
  <div class="border-t border-slate-200/70 bg-slate-50/50 px-6 py-4 dark:border-slate-800/70 dark:bg-slate-900/40">
    <h3 class="flex items-center gap-1.5 text-sm font-semibold text-slate-700 dark:text-slate-200">
      <svg class="h-4 w-4 text-emerald-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg>
      Get real legal help
    </h3>
    <p class="mt-1 text-sm text-slate-500 dark:text-slate-400">{{ env.escalation.message }}</p>
    <div class="mt-3 flex flex-wrap gap-2">
      <a href="{{ env.escalation.legal_aid_url }}" target="_blank" rel="noopener"
         class="inline-flex items-center gap-1.5 rounded-lg bg-brand-600 px-3.5 py-2 text-sm font-semibold text-white shadow-sm transition hover:bg-brand-700">
        {{ env.escalation.legal_aid_name }}
        <svg class="h-3.5 w-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/></svg>
      </a>
      <a href="{{ env.escalation.lawyer_finder_url }}" target="_blank" rel="noopener"
         class="inline-flex items-center gap-1.5 rounded-lg border border-slate-300 px-3.5 py-2 text-sm font-semibold text-slate-700 transition hover:bg-slate-50 dark:border-slate-700 dark:text-slate-200 dark:hover:bg-slate-800">
        {{ env.escalation.lawyer_finder_name }}
      </a>
    </div>
  </div>

  <div class="flex items-start gap-2 border-t border-slate-200/70 px-6 py-3 text-xs text-slate-500 dark:border-slate-800/70 dark:text-slate-400">
    <svg class="mt-0.5 h-3.5 w-3.5 shrink-0 text-amber-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>
    <span><strong>Legal information, not legal advice.</strong> {{ env.disclaimer }}</span>
  </div>
</article>
{% endif %}