{% if not results %}
<p style="color: var(--muted); text-align: center; padding: 2rem 0; font-size: 0.82rem;">
    📡 &nbsp; No signals matched "<em>{{ query }}</em>" — try a different fragment.
</p>
{% else %}
<p style="color: var(--muted); margin-bottom: 1rem; font-size: 0.78rem; letter-spacing: 0.05em;">
    📡 &nbsp; TOP <strong style="color: var(--accent);">{{ results|length }}</strong>
    NEAREST SIGNALS for "<em style="color: var(--text);">{{ query }}</em>"
    &nbsp;·&nbsp; ranked by cosine similarity &nbsp;·&nbsp;
    <span style="color: var(--success);">≥ 0.7 = same emergency</span> &nbsp;
    <span style="color: var(--noise);">≤ 0.3 = ECHO-NULL noise</span>
</p>

{% for item in results %}
{% set score_pct = (item.score * 100) | int %}
{% set is_critical = item.signal.threat_level == "CRITICAL" %}
{% set is_noise = item.signal.threat_level == "NOISE" %}
<div style="
    background: var(--surface);
    border: 1px solid {% if is_critical %}rgba(248,113,113,0.3){% elif is_noise %}rgba(107,114,128,0.3){% else %}var(--border){% endif %};
    border-radius: var(--radius-lg);
    padding: 0.9rem 1.1rem;
    margin-bottom: 0.65rem;
    display: flex;
    align-items: flex-start;
    gap: 0.9rem;
    position: relative;
    overflow: hidden;
    transition: border-color 0.2s;
"
onmouseover="this.style.borderColor='var(--border-glow)'"
onmouseout="this.style.borderColor='{% if is_critical %}rgba(248,113,113,0.3){% elif is_noise %}rgba(107,114,128,0.3){% else %}var(--border){% endif %}'"
>
    <div style="
        position: absolute; top: 0; left: 0; right: 0; height: 1px;
        background: linear-gradient(90deg, transparent,
            {% if item.score >= 0.7 %}rgba(52,211,153,0.4){% elif item.score >= 0.4 %}rgba(251,191,36,0.3){% else %}rgba(107,114,128,0.2){% endif %},
            transparent);
    "></div>

    <div style="
        min-width: 64px; text-align: center;
        padding: 0.4rem 0.5rem;
        background: {% if item.score >= 0.7 %}rgba(52,211,153,0.1){% elif item.score >= 0.4 %}rgba(251,191,36,0.1){% else %}rgba(107,114,128,0.08){% endif %};
        border: 1px solid {% if item.score >= 0.7 %}rgba(52,211,153,0.4){% elif item.score >= 0.4 %}rgba(251,191,36,0.4){% else %}rgba(107,114,128,0.3){% endif %};
        border-radius: var(--radius);
        font-weight: 700;
        font-size: 1rem;
        color: {% if item.score >= 0.7 %}var(--success){% elif item.score >= 0.4 %}var(--warning){% else %}var(--noise){% endif %};
        flex-shrink: 0;
    ">
        {{ "%.0f"|format(item.score * 100) }}<span style="font-size:0.6rem; font-weight:400;">%</span>
        <div style="font-size: 0.55rem; font-weight: 400; color: var(--muted); margin-top: 2px;">
            {% if item.score >= 0.7 %}MATCH{% elif item.score >= 0.4 %}SIMILAR{% else %}NOISE{% endif %}
        </div>
    </div>

    <div style="flex: 1; min-width: 0;">
        <div style="display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.25rem; flex-wrap: wrap;">
            <span style="font-weight: 700; color: var(--accent); font-size: 0.85rem; font-family: monospace;">
                {{ item.signal.callsign }}
            </span>
            <span style="
                font-size: 0.62rem; font-weight: 700; letter-spacing: 0.1em;
                padding: 1px 6px; border-radius: 99px;
                background: {% if is_critical %}rgba(248,113,113,0.15){% elif item.signal.threat_level == 'HIGH' %}rgba(251,191,36,0.12){% elif item.signal.threat_level == 'MEDIUM' %}rgba(56,189,248,0.1){% elif is_noise %}rgba(107,114,128,0.1){% else %}rgba(52,211,153,0.1){% endif %};
                color: {% if is_critical %}var(--critical){% elif item.signal.threat_level == 'HIGH' %}var(--warning){% elif item.signal.threat_level == 'MEDIUM' %}var(--accent){% elif is_noise %}var(--noise){% else %}var(--success){% endif %};
                border: 1px solid {% if is_critical %}rgba(248,113,113,0.3){% elif item.signal.threat_level == 'HIGH' %}rgba(251,191,36,0.3){% elif item.signal.threat_level == 'MEDIUM' %}rgba(56,189,248,0.2){% elif is_noise %}rgba(107,114,128,0.2){% else %}rgba(52,211,153,0.2){% endif %};
            ">{{ item.signal.threat_level }}</span>
            <span style="
                font-size: 0.62rem; padding: 1px 6px; border-radius: 99px;
                background: rgba(56,189,248,0.08); color: var(--muted);
                border: 1px solid var(--border);
            ">{{ item.signal.category | replace("_", " ") }}</span>
        </div>
        <div style="font-size: 0.82rem; color: var(--text); margin-bottom: 0.3rem; line-height: 1.5;
            {% if is_noise %}color: var(--muted); font-style: italic;{% endif %}">
            {{ item.signal.signal_text }}
        </div>
        <div style="font-size: 0.68rem; color: var(--muted);">
            origin: <span style="color: var(--dim);">{{ item.signal.origin }}</span>
        </div>
    </div>
</div>
{% endfor %}
{% endif %}