/* ============================================================
ASTRA v3.2 — BATTLE BOARD CSS
============================================================
INJECT INTO: RAT_CHAT/templates/index.html
LOCATION: Inside the existing )
OR: Add as a separate file:
RAT_CHAT/static/css/battle_board.css
and add
after the flagship.css link.
============================================================ */
/* ── CLS SHIELD [BB-LOCK03] ──────────────────────────────── */
#response-area {
min-height: 600px;
overflow-y: auto;
position: relative;
}
/* ── BATTLE BOARD ROOT ───────────────────────────────────── */
.astra-battleboard {
font-family: 'Courier New', 'Consolas', monospace;
background: #0a0c10;
border: 1px solid #1e2a3a;
border-radius: 8px;
overflow: hidden;
color: #c9d1d9;
}
/* ── METRIC STRIP (Top Row: DELTA / DEPTH / RISK) ────────── */
.astra-metric-strip {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
border-bottom: 2px solid #1e2a3a;
}
.astra-metric-card {
padding: 16px 20px;
border-right: 1px solid #1e2a3a;
text-align: center;
background: #0d1117;
transition: background 0.3s;
}
.astra-metric-card:last-child { border-right: none; }
.astra-metric-card:hover { background: #161b22; }
.astra-metric-label {
font-size: 0.65rem;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
color: #8b949e;
margin-bottom: 6px;
}
.astra-metric-value {
font-size: 2rem;
font-weight: 900;
line-height: 1;
margin-bottom: 4px;
font-variant-numeric: tabular-nums;
}
.astra-metric-sublabel {
font-size: 0.6rem;
color: #6e7681;
text-transform: uppercase;
letter-spacing: 1px;
}
/* Delta — electric cyan */
.astra-metric-delta .astra-metric-value {
color: #00d4ff;
text-shadow: 0 0 20px rgba(0, 212, 255, 0.6);
}
/* Depth — electric green */
.astra-metric-depth .astra-metric-value {
color: #39d353;
text-shadow: 0 0 20px rgba(57, 211, 83, 0.5);
}
/* Risk badge — dynamic color based on level */
.astra-risk-badge {
font-size: 1.1rem;
font-weight: 900;
padding: 6px 16px;
border-radius: 4px;
display: inline-block;
letter-spacing: 1px;
}
.risk-low .astra-risk-badge { background: #0d3321; color: #39d353; border: 1px solid #39d353; }
.risk-med .astra-risk-badge { background: #2d2000; color: #ffc107; border: 1px solid #ffc107; }
.risk-high .astra-risk-badge { background: #2d1200; color: #ff7b00; border: 1px solid #ff7b00; }
.risk-critical .astra-risk-badge { background: #2d0000; color: #ff4444; border: 1px solid #ff4444; }
.risk-unknown .astra-risk-badge { background: #1c1c1c; color: #8b949e; border: 1px solid #30363d; }
/* Pulse animation for HIGH and CRITICAL */
.astra-pulse {
animation: astra-risk-pulse 1.5s ease-in-out infinite;
}
@keyframes astra-risk-pulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(255, 68, 68, 0.6); }
50% { box-shadow: 0 0 0 8px rgba(255, 68, 68, 0); }
}
.risk-high .astra-pulse {
animation: astra-risk-pulse-orange 1.5s ease-in-out infinite;
}
@keyframes astra-risk-pulse-orange {
0%, 100% { box-shadow: 0 0 0 0 rgba(255, 123, 0, 0.6); }
50% { box-shadow: 0 0 0 8px rgba(255, 123, 0, 0); }
}
/* ── FOUR PILLAR GRID ────────────────────────────────────── */
.astra-pillar-grid {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: auto auto;
gap: 0;
}
/* Pillar base */
.astra-pillar {
border-right: 1px solid #1e2a3a;
border-bottom: 1px solid #1e2a3a;
display: flex;
flex-direction: column;
}
.astra-pillar:nth-child(2n) { border-right: none; }
.astra-pillar:nth-child(3),
.astra-pillar:nth-child(4) { border-bottom: none; }
/* Pillar header */
.astra-pillar-header {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 16px;
border-bottom: 1px solid #1e2a3a;
background: #0d1117;
position: sticky;
top: 0;
z-index: 2;
}
.astra-pillar-icon { font-size: 1rem; }
.astra-pillar-title {
font-size: 0.7rem;
font-weight: 800;
letter-spacing: 2px;
text-transform: uppercase;
color: #e6edf3;
flex: 1;
}
.astra-pillar-tag {
font-size: 0.55rem;
font-weight: 600;
letter-spacing: 1.5px;
text-transform: uppercase;
color: #6e7681;
border: 1px solid #30363d;
padding: 2px 6px;
border-radius: 3px;
}
/* Pillar body */
.astra-pillar-body {
padding: 16px;
flex: 1;
overflow-y: auto;
max-height: 420px;
font-size: 0.875rem;
line-height: 1.6;
}
.astra-pillar-empty {
color: #6e7681;
font-style: italic;
font-size: 0.8rem;
padding: 8px 0;
}
/* Pillar 1 — Tactical Briefing (wide, high contrast) */
.astra-pillar-briefing .astra-pillar-header { border-left: 3px solid #00d4ff; }
.astra-pillar-briefing .astra-pillar-title { color: #00d4ff; }
.astra-pillar-briefing .astra-pillar-body {
background: #0d1117;
color: #e6edf3;
font-size: 0.9rem;
}
/* Make briefing span full width on large screens */
@media (min-width: 992px) {
.astra-pillar-briefing {
grid-column: 1 / -1;
}
.astra-pillar-grid {
grid-template-columns: 1fr 1fr;
grid-template-rows: auto auto auto;
}
.astra-pillar-briefing { grid-row: 1; grid-column: 1 / -1; border-right: none; }
.astra-pillar-schematics{ grid-row: 2; grid-column: 1; }
.astra-pillar-ceiling { grid-row: 2; grid-column: 2; }
.astra-pillar-forensic { grid-row: 3; grid-column: 1 / -1; border-right: none; border-bottom: none; }
}
/* Pillar 2 — Schematics (dark/black math boxes) */
.astra-pillar-schematics .astra-pillar-header { border-left: 3px solid #58a6ff; }
.astra-pillar-schematics .astra-pillar-title { color: #58a6ff; }
.astra-pillar-schematics .astra-pillar-body { background: #010409; }
.astra-schematic-block {
background: #0d1117;
border: 1px solid #21262d;
border-radius: 6px;
margin-bottom: 12px;
overflow: hidden;
}
.astra-schematic-header {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 12px;
background: #161b22;
border-bottom: 1px solid #21262d;
}
.astra-schematic-index {
font-size: 0.6rem;
font-weight: 700;
color: #58a6ff;
letter-spacing: 1px;
}
.astra-schematic-label {
font-size: 0.7rem;
color: #8b949e;
flex: 1;
}
.astra-schematic-math {
padding: 12px 16px;
overflow-x: auto;
font-size: 1rem;
color: #e6edf3;
background: #010409;
}
.astra-schematic-translation {
padding: 8px 12px;
background: #0d1117;
border-top: 1px solid #21262d;
font-size: 0.75rem;
}
.astra-grind-label {
color: #39d353;
font-weight: 700;
margin-right: 6px;
font-size: 0.65rem;
letter-spacing: 1px;
}
.astra-grind-text { color: #8b949e; }
/* Pillar 3 — The Ceiling (metric-heavy) */
.astra-pillar-ceiling .astra-pillar-header { border-left: 3px solid #ffc107; }
.astra-pillar-ceiling .astra-pillar-title { color: #ffc107; }
.astra-pillar-ceiling .astra-pillar-body { background: #0d1117; }
.astra-ceiling-list { display: flex; flex-direction: column; gap: 8px; }
.astra-ceiling-item {
display: flex;
gap: 8px;
padding: 8px 10px;
background: #161b22;
border-left: 3px solid #ffc107;
border-radius: 0 4px 4px 0;
font-size: 0.8rem;
color: #c9d1d9;
}
.astra-ceiling-bullet {
color: #ffc107;
font-weight: 900;
flex-shrink: 0;
}
/* Pillar 4 — Forensic Dissection (red-bordered) */
.astra-pillar-forensic .astra-pillar-header { border-left: 3px solid #ff4444; }
.astra-pillar-forensic .astra-pillar-title { color: #ff4444; }
.astra-pillar-forensic .astra-pillar-body {
background: #0d0808;
border-top: 1px solid #3d0000;
}
.astra-forensic-list { display: flex; flex-direction: column; gap: 8px; }
.astra-forensic-item {
display: flex;
gap: 10px;
padding: 10px 12px;
border-radius: 4px;
font-size: 0.82rem;
line-height: 1.5;
}
.astra-forensic-item.forensic-standard { background: #1a0a0a; border-left: 3px solid #6e2020; }
.astra-forensic-item.forensic-high { background: #200a0a; border-left: 3px solid #cc2200; }
.astra-forensic-item.forensic-critical {
background: #2d0000;
border-left: 3px solid #ff4444;
animation: forensic-critical-flash 2s ease-in-out infinite;
}
@keyframes forensic-critical-flash {
0%, 100% { border-left-color: #ff4444; }
50% { border-left-color: #ff8888; }
}
.astra-forensic-bullet {
color: #ff4444;
font-weight: 900;
flex-shrink: 0;
font-size: 1rem;
}
.astra-forensic-text { color: #c9d1d9; }
.astra-forensic-text p { margin: 0; }
/* ── SWARM ATTRIBUTION FOOTER ────────────────────────────── */
.astra-swarm-footer {
background: #0d1117;
border-top: 2px solid #1e2a3a;
padding: 16px 20px;
}
.astra-swarm-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 12px;
}
.astra-swarm-title {
font-size: 0.65rem;
font-weight: 800;
letter-spacing: 2px;
text-transform: uppercase;
color: #8b949e;
}
.astra-swarm-meta {
font-size: 0.65rem;
color: #6e7681;
font-family: monospace;
}
.astra-swarm-pills {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 10px;
}
.astra-agent-pill {
display: flex;
flex-direction: column;
gap: 2px;
padding: 8px 12px;
border-radius: 6px;
border: 1px solid;
min-width: 160px;
flex: 1;
max-width: 220px;
}
/* Agent pill colors */
.pill-commander { background: #0d1a2e; border-color: #1f6feb; }
.pill-engineer { background: #0d2010; border-color: #2ea043; }
.pill-librarian { background: #1a0d2e; border-color: #8957e5; }
.pill-eye { background: #1a1a0d; border-color: #d29922; }
.pill-role {
font-size: 0.55rem;
font-weight: 700;
letter-spacing: 1.5px;
text-transform: uppercase;
color: #8b949e;
}
.pill-model {
font-size: 0.8rem;
font-weight: 700;
color: #e6edf3;
}
.pill-node {
font-size: 0.6rem;
color: #6e7681;
font-family: monospace;
}
.pill-status {
font-size: 0.55rem;
font-weight: 800;
letter-spacing: 1.5px;
text-transform: uppercase;
padding: 2px 6px;
border-radius: 3px;
align-self: flex-start;
margin-top: 2px;
}
.pill-active { background: #0d3321; color: #39d353; }
.pill-standby { background: #1c1c1c; color: #6e7681; }
.pill-skipped { background: #1a1000; color: #8b7000; }
.pill-skipped-agent { opacity: 0.6; }
.astra-swarm-timestamp {
font-size: 0.6rem;
color: #6e7681;
font-family: monospace;
text-align: right;
}
/* ── MARKDOWN CONTENT INSIDE PILLARS ─────────────────────── */
.astra-pillar-body h1,
.astra-pillar-body h2,
.astra-pillar-body h3,
.astra-pillar-body h4 {
color: #e6edf3;
font-size: 0.9rem;
font-weight: 700;
margin-top: 12px;
margin-bottom: 6px;
border-bottom: 1px solid #21262d;
padding-bottom: 4px;
}
.astra-pillar-body p { margin-bottom: 8px; color: #c9d1d9; }
.astra-pillar-body ul,
.astra-pillar-body ol { padding-left: 18px; margin-bottom: 8px; }
.astra-pillar-body li { margin-bottom: 4px; color: #c9d1d9; }
.astra-pillar-body code {
background: #161b22;
padding: 1px 5px;
border-radius: 3px;
font-size: 0.8rem;
color: #79c0ff;
}
.astra-pillar-body pre {
background: #010409;
border: 1px solid #21262d;
border-radius: 6px;
padding: 12px;
overflow-x: auto;
font-size: 0.8rem;
}
.astra-pillar-body blockquote {
border-left: 3px solid #30363d;
padding-left: 12px;
color: #8b949e;
margin: 8px 0;
}
.astra-pillar-body strong { color: #e6edf3; font-weight: 700; }
.astra-pillar-body em { color: #a5d6ff; }
.astra-pillar-body a { color: #58a6ff; }
/* ── RESPONSIVE BREAKPOINTS ──────────────────────────────── */
@media (max-width: 768px) {
.astra-metric-strip { grid-template-columns: 1fr; }
.astra-metric-card { border-right: none; border-bottom: 1px solid #1e2a3a; }
.astra-pillar-grid { grid-template-columns: 1fr; }
.astra-pillar { border-right: none; }
.astra-pillar-briefing { grid-column: 1; }
.astra-pillar-forensic { grid-column: 1; }
.astra-agent-pill { max-width: 100%; }
.astra-metric-value { font-size: 1.5rem; }
}
/* ── RAW TEXT FALLBACK ───────────────────────────────────── */
.astra-raw-text {
white-space: pre-wrap;
word-break: break-word;
font-size: 0.8rem;
color: #c9d1d9;
background: transparent;
border: none;
padding: 0;
margin: 0;
}