/* CoreScope Live Messages panel — matches MeshBuddy tactical theme. */
.cs-live-panel {
  position: fixed;
  right: 12px;
  bottom: 72px;
  z-index: 6000;
  width: 320px;
  max-width: calc(100vw - 24px);
  background: linear-gradient(180deg, rgba(17,21,19,.97), rgba(12,14,13,.97));
  border: 1px solid #2a322c;
  border-left: 2px solid #38d9ff;
  color: #d7e0d9;
  font: 12px/1.4 "IBM Plex Mono", ui-monospace, Consolas, monospace;
  box-shadow: 0 10px 30px rgba(0,0,0,.4);
}
.cs-live-head {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px;
  border-bottom: 1px solid #2a322c;
  background: #0c0e0d;
}
.cs-live-head strong {
  font: 700 12px "Saira Condensed", "Arial Narrow", sans-serif;
  letter-spacing: .12em; text-transform: uppercase; color: #eff5f0;
}
.cs-live-status { margin-left: auto; color: #8ca394; text-transform: uppercase; font-size: 10px; letter-spacing: .08em; }
.cs-live-collapse {
  background: none; border: 1px solid #2a322c; color: #8ca394;
  width: 22px; height: 22px; cursor: pointer; line-height: 1;
}
.cs-live-dot { width: 9px; height: 9px; border-radius: 50%; background: #555; box-shadow: 0 0 6px currentColor; }
.cs-live-dot[data-state="connected"]   { background: #4be38a; color: #4be38a; }
.cs-live-dot[data-state="reconnecting"] { background: #ffc24b; color: #ffc24b; animation: cs-blink 1s infinite; }
.cs-live-dot[data-state="disconnected"] { background: #6b7a70; color: #6b7a70; }
.cs-live-dot[data-state="error"]        { background: #ff5f67; color: #ff5f67; }
@keyframes cs-blink { 50% { opacity: .3; } }

.cs-live-panel.is-collapsed .cs-live-body { display: none; }
.cs-live-panel.is-collapsed .cs-live-collapse { transform: rotate(-90deg); }

.cs-live-body { padding: 10px; display: grid; gap: 10px; }
.cs-live-controls { display: flex; gap: 6px; }
.cs-live-btn {
  flex: 1; padding: 6px 8px; cursor: pointer;
  background: #161b18; border: 1px solid #2a322c; color: #d7e0d9;
  font: 600 10px "Saira Condensed", sans-serif; letter-spacing: .08em; text-transform: uppercase;
}
.cs-live-btn:hover { border-color: #38d9ff; color: #eff5f0; }
.cs-live-primary { background: #07100a; border-color: #2ea043; color: #46e06b; }

.cs-live-stats { display: flex; justify-content: space-between; gap: 6px; color: #8ca394; font-size: 11px; }
.cs-live-stats b { color: #6cb2ff; font-variant-numeric: tabular-nums; }

.cs-live-filters, .cs-live-tuning { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.cs-live-filters label, .cs-live-tuning label { display: grid; gap: 2px; font-size: 10px; color: #8ca394; text-transform: uppercase; letter-spacing: .06em; }
.cs-live-filters select, .cs-live-filters input, .cs-live-tuning input[type="range"] {
  background: #080d0a; border: 1px solid #2a322c; color: #d7e0d9; padding: 4px; font: 11px "IBM Plex Mono", monospace;
}
.cs-live-tuning label { flex-direction: row; align-items: center; grid-template-columns: auto 1fr auto; }
.cs-live-check { display: flex !important; flex-direction: row !important; align-items: center; gap: 6px; }
.cs-live-note { font-size: 10px; color: #6b7a70; border-top: 1px dashed #2a322c; padding-top: 6px; }

.cs-live-feed { max-height: 240px; overflow-y: auto; display: grid; gap: 6px; }
.cs-live-row { border: 1px solid #1e2621; background: #0b0f0c; padding: 6px 8px; }
.cs-live-meta { display: flex; flex-wrap: wrap; gap: 4px 8px; }
.cs-live-meta span { color: #a9c0b2; font-size: 10.5px; }
.cs-live-meta b { color: #eff5f0; }
.cs-live-unknown { color: #ffc24b !important; }
.cs-live-text { margin-top: 4px; color: #d7e0d9; word-break: break-word; }
.cs-live-hidden { color: #6b7a70; font-style: italic; }
.cs-live-time { margin-top: 3px; color: #6b7a70; font-size: 10px; text-align: right; }

@media (max-width: 640px) {
  .cs-live-panel { right: 8px; left: 8px; width: auto; bottom: 64px; }
  .cs-live-feed { max-height: 180px; }
}