/* P25X Live -- Recent messages tab (js/tab-messages.js).
   Builds on app.css (.panel, .ph-row, .ph, .ph-meta, .empty, .log, .log-scroll).

   ANIMATION AUDIT: .msg-new = one-shot 2.6 s background fade on a newly
   delivered row (never repeats; the class is removed after it plays; not added
   at all under reduced motion, and app.css kills animations under
   prefers-reduced-motion / body.rm anyway). Nothing loops. */

.msg-panel { max-width: 1100px; margin: 0 auto; }
.msg-intro { margin: 0 0 12px; color: var(--muted); font-size: 0.86rem; }
.msg-meta-bad { color: var(--warn); }
.msg-err { color: var(--warn); }

.msg-scroll { max-height: none; }
.msg-table td { vertical-align: top; }
.msg-time { color: var(--muted); font-size: 0.8rem; }
.msg-time time { white-space: nowrap; }
.msg-table .msg-party { font-size: 0.86rem; }
.msg-table .msg-gw { color: var(--cyan); }
.msg-prev { white-space: normal !important; overflow-wrap: anywhere; min-width: 18ch; width: 100%; color: var(--ink); }
.msg-none { color: var(--dim); font-style: italic; }

.msg-badge {
  display: inline-block; padding: 3px 8px; border-radius: 999px;
  font: 700 0.68rem/1.2 var(--mono); letter-spacing: 0.08em; white-space: nowrap;
  border: 1px solid currentColor; background: rgba(255, 255, 255, 0.04);
}
.msg-k-p25 { color: var(--cyan); }
.msg-k-aprs_in, .msg-k-aprs_out { color: var(--teal); }
.msg-k-bbs { color: var(--violet); }
.msg-k-wx { color: var(--gold); }
.msg-k-ping { color: var(--amber); }
.msg-k-echo { color: var(--pink); }

/* one-shot highlight for a newly delivered row */
.msg-new td { animation: msgnew 2.6s ease-out 1 both; }
@keyframes msgnew {
  0% { background: rgba(77, 232, 255, 0.22); }
  100% { background: transparent; }
}

/* narrow screens: the table becomes a stack of cards */
@media (max-width: 640px) {
  .msg-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .msg-table, .msg-table tbody { display: block; }
  .msg-table tr {
    display: grid; grid-template-columns: auto 1fr; gap: 4px 12px;
    padding: 10px 12px; margin: 0 0 10px; border: 1px solid var(--panel-b); border-radius: 10px;
    background: rgba(6, 12, 30, 0.55);
  }
  .msg-table td { display: contents; border: 0; padding: 0; white-space: normal; }
  .msg-table td::before {
    content: attr(data-label); color: var(--dim);
    font: 700 0.66rem/1.6 var(--mono); letter-spacing: 0.14em; text-transform: uppercase;
  }
  .msg-new { animation: msgnew 2.6s ease-out 1 both; }
  .msg-new td { animation: none; }
  .msg-prev { min-width: 0; }
  .msg-table .msg-badge { justify-self: start; }
}