{% extends "base.html" %}
{% block theme %}light{% endblock %}

{% block css %}
<style>
body:has(#chat-container) { height:100dvh; display:flex; flex-direction:column; overflow:hidden; }
body:has(#chat-container) .mesh-header { flex-shrink:0; }
body:has(#chat-container) .mesh-content { display:flex; flex:1; min-height:0; width:100%; max-width:none; padding:0; }
body:has(#chat-container) .mesh-footer { display:none; }
body:has(#chat-container) .mesh-announcement { flex-shrink:0; }
#chat-container { display:flex; flex-direction:column; flex:1; min-width:0; min-height:0; background:var(--mesh-stripe); }
.chat-toolbar { display:flex; flex-wrap:wrap; align-items:center; gap:12px; padding:12px 24px; border-bottom:1px solid var(--mesh-border); background:var(--mesh-surface); flex-shrink:0; }
.chat-heading { display:flex; align-items:center; gap:8px; margin:0 6px 0 0; font-size:15px; font-weight:650; }
.chat-heading span:first-child { color:var(--mesh-primary); }
.chat-channel-control { display:flex; align-items:center; gap:6px; color:var(--mesh-muted); }
.chat-filter { width:170px; font-size:12px; border-color:var(--mesh-border); }
.chat-search { width:210px; font-size:12px; border-color:var(--mesh-border); }
.chat-actions { display:flex; align-items:center; gap:8px; margin-left:auto; }
.chat-status { border-radius:20px; padding:4px 9px; background:#e8f5ee; color:#187346; font-size:11px; white-space:nowrap; }
.chat-status[data-state="error"] { background:#fff0ed; color:#b23d2f; }
.chat-status[data-state="paused"],.chat-status[data-state="loading"] { background:#eef2f7; color:var(--mesh-muted); }
.chat-control { font-size:12px; background:var(--mesh-surface); border:1px solid var(--mesh-border); border-radius:5px; padding:5px 9px; color:var(--mesh-text); }
.chat-control:hover { background:var(--mesh-soft); }
.chat-messages { flex:1; min-height:0; overflow-y:auto; overflow-anchor:none; padding:12px 0; font-family:ui-monospace,"SFMono-Regular",Consolas,monospace; font-size:13px; line-height:1.6; scrollbar-gutter:stable; }
.chat-date-sep { display:flex; align-items:center; gap:14px; margin:12px 24px; color:var(--mesh-muted); font:600 10px system-ui,sans-serif; letter-spacing:.7px; text-transform:uppercase; }
.chat-date-sep::before,.chat-date-sep::after { content:""; flex:1; height:1px; background:var(--mesh-border); }
.chat-line { display:grid; grid-template-columns:64px 165px minmax(0,1fr) auto; gap:12px; align-items:baseline; padding:5px 24px; --chat-row-bg:var(--mesh-surface); background:var(--chat-row-bg); border-bottom:1px solid var(--mesh-border); }
.chat-line:nth-of-type(even) { --chat-row-bg:var(--mesh-chat-stripe); }
.chat-line:hover,.chat-line:focus-within { background:var(--mesh-hover); }
.chat-time { color:var(--mesh-muted); font-size:11px; text-align:right; white-space:nowrap; }
.chat-nick { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:600; font-size:12px; text-decoration:none; text-align:right; }
.chat-nick:hover { text-decoration:underline; }
.chat-message { min-width:0; color:var(--mesh-text); overflow-wrap:anywhere; white-space:pre-wrap; }
.chat-meta { display:flex; align-items:center; gap:10px; font:11px system-ui,sans-serif; }
.chat-channel { background:#edf1f7; color:var(--mesh-muted); border-radius:4px; padding:2px 6px; max-width:130px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.chat-details { display:inline-flex; align-items:center; padding:4px 8px; border:1px solid #9dceb0; border-radius:5px; background:#e8f5ee; color:#187346; font-weight:600; text-decoration:none; white-space:nowrap; }
.chat-details:hover { color:#0f5132; background:#d1e7dd; border-color:#69aa85; }
.chat-details:focus-visible { outline:2px solid #198754; outline-offset:2px; }
.replying-to { display:block; border-left:2px solid var(--mesh-border); margin:4px 0; padding:2px 9px; color:var(--mesh-muted); font-size:11px; white-space:normal; }
.chat-empty { text-align:center; color:var(--mesh-muted); padding:48px 20px; font:13px system-ui,sans-serif; }
.chat-bottom { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:8px 24px; border-top:1px solid var(--mesh-border); color:var(--mesh-muted); background:var(--mesh-surface); font-size:11px; flex-shrink:0; }
.chat-bottom p { margin:0; }
.chat-line.flash { animation:chat-flash 2s ease-out; }
@keyframes chat-flash { from { background:var(--mesh-hover); } to { background:var(--chat-row-bg); } }
@media(prefers-reduced-motion:reduce) { .chat-line.flash { animation:none; } }
@media(max-width:700px) {
    .chat-toolbar { padding:10px 14px; gap:8px; }
    .chat-heading { width:100%; }
    .chat-filter { width:140px; }
    .chat-search { flex:1; width:120px; min-width:0; }
    .chat-actions { width:100%; margin-left:0; }
    #chat-count { margin-right:auto; }
    .chat-line { grid-template-columns:50px minmax(0,1fr) auto; gap:2px 8px; padding:7px 14px; }
    .chat-time { grid-column:1; grid-row:1; }
    .chat-nick { grid-column:2; grid-row:1; text-align:left; }
    .chat-meta { grid-column:3; grid-row:1; gap:5px; }
    .chat-channel { max-width:85px; }
    .chat-message { grid-column:2 / 4; grid-row:2; }
    .chat-date-sep { margin:12px 14px; }
    .chat-bottom { padding:8px 14px; }
}
</style>
{% endblock %}

{% block body %}
<section id="chat-container" aria-label="Mesh chat">
    <div class="chat-toolbar">
        <h1 class="chat-heading"><span aria-hidden="true">#</span> <span data-chat-translate="chat_title">Mesh chat</span></h1>
        <div class="chat-channel-control">
            <label for="channel-filter" class="visually-hidden" data-chat-translate="channel">Channel</label>
            <span aria-hidden="true">#</span>
            <select id="channel-filter" class="form-select form-select-sm chat-filter"><option value="" data-chat-translate="all_channels">All channels</option></select>
        </div>
        <label for="chat-search" class="visually-hidden">Search messages or nodes</label>
        <input id="chat-search" class="form-control form-control-sm chat-search" type="search" placeholder="Search messages or nodes…" autocomplete="off">
        <div class="chat-actions">
            <span id="chat-count" class="text-secondary small">0 messages</span>
            <span id="chat-status" class="chat-status" data-state="loading" role="status">Connecting…</span>
            <button id="chat-pause" class="chat-control" type="button" aria-pressed="false">Pause</button>
            <button id="chat-latest" class="chat-control" type="button">↓ Latest</button>
        </div>
    </div>
    <div id="chat-log" class="chat-messages" role="region" aria-label="Messages, oldest to newest" tabindex="0"><p class="chat-empty">Loading messages…</p></div>
    <div class="chat-bottom"><p>Received text messages · updates every 5 seconds</p><span id="chat-updated" role="status"></span></div>
</section>
<script src="/static/chat-dashboard.js"></script>
{% endblock %}