/* Registros do histórico: lista, linha, detalhe (JSON / campos / bruto). */

.live-pill { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px 0 8px; border-radius: var(--radius-pill); font-size: 12px; font-weight: 600; background: var(--tint-green); color: var(--green); border: 0; }
.live-pill.paused { background: var(--tint-orange); color: var(--orange); }

.records { display: flex; flex-direction: column; }
.rec { border-bottom: 1px solid var(--separator); }
.rec:last-child { border-bottom: 0; }
.rec-row { display: grid; grid-template-columns: 96px 78px 86px 1fr auto; gap: 10px; align-items: center; padding: 7px 12px; cursor: pointer; transition: background .12s; }
.rec-row:hover { background: var(--bg-hover); }
.rec.open .rec-row { background: var(--bg-selected); }
.rec-row .time { font-family: var(--mono); font-size: 12px; color: var(--label-2); font-variant-numeric: tabular-nums; }
.rec-row .note { font-size: 13px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rec-row .size { font-size: 11.5px; color: var(--label-3); font-variant-numeric: tabular-nums; }
.rec.warn .note { color: var(--orange); }
.rec.error .note { color: var(--red); }
.rec.sys .note { color: var(--label-2); font-style: italic; }
.rec.sys.warn .note, .rec.sys.error .note { font-style: normal; }

.dir { display: inline-flex; align-items: center; gap: 5px; height: 20px; padding: 0 8px; border-radius: 6px; font-size: 11px; font-weight: 700; letter-spacing: .03em; }
.dir.rx { background: var(--tint-blue); color: var(--blue); }
.dir.tx { background: var(--tint-green); color: var(--green); }
.dir.fwd { background: var(--tint-purple); color: var(--purple); }
.dir.resp { background: var(--tint-teal); color: var(--teal); }
.dir.sys { background: var(--tint-gray); color: var(--label-2); }

.rec-detail { padding: 6px 12px 14px 12px; background: var(--bg-inset); border-top: 1px solid var(--separator); }
.rec-detail .tabs { display: flex; gap: 12px; align-items: center; margin-bottom: 10px; flex-wrap: wrap; }
.rec-detail .kv { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 12px; color: var(--label-2); }
.rec-detail .kv b { color: var(--label); font-weight: 500; }

pre.code { margin: 0; padding: 12px 14px; background: var(--bg-elev); border-radius: var(--radius-sm); border: 1px solid var(--separator); font-family: var(--mono); font-size: 12.5px; line-height: 1.5; overflow: auto; max-height: 520px; white-space: pre-wrap; word-break: break-word; }
pre.code .k { color: var(--code-key); }
pre.code .s { color: var(--code-str); }
pre.code .n { color: var(--code-num); }
pre.code .b { color: var(--code-bool); }
pre.code.hex { white-space: pre; }
.warnings { margin: 0 0 10px; padding: 8px 12px; border-radius: var(--radius-sm); background: var(--tint-orange); color: var(--orange); font-size: 12.5px; }
.warnings li { margin-left: 14px; }
.more { padding: 12px; text-align: center; }
.new-pill { position: sticky; bottom: 12px; display: flex; justify-content: center; pointer-events: none; }
.new-pill button { pointer-events: auto; box-shadow: var(--shadow); }

@media (max-width: 900px) {
  .rec-row { grid-template-columns: 74px 64px 1fr auto; }
  .rec-row .kind { display: none; }
}