/* Compass — Context & Memory State of Mind */

.compass-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 16px;
  padding: 20px;
  max-width: 1400px;
  margin: 0 auto;
}

.compass-card {
  background: var(--card-bg, rgba(255,255,255,0.04));
  border: 1px solid var(--border, rgba(255,255,255,0.08));
  border-radius: 12px;
  padding: 16px;
  transition: border-color 0.2s;
}

.compass-card:hover {
  border-color: rgba(255,255,255,0.15);
}

.compass-card h3 {
  margin: 0 0 12px 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary, #fff);
  display: flex;
  align-items: center;
  gap: 6px;
}

.compass-count {
  background: rgba(255,255,255,0.1);
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 500;
  margin-left: auto;
}

/* Context Gauge */
.compass-gauge-card {
  grid-column: 1 / -1;
}

.gauge-bar {
  width: 100%;
  height: 24px;
  background: rgba(255,255,255,0.06);
  border-radius: 12px;
  overflow: hidden;
  position: relative;
}

.gauge-fill {
  height: 100%;
  border-radius: 12px;
  transition: width 0.5s ease, background 0.3s;
  position: relative;
}

.gauge-fill::after {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 40px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2));
  animation: gauge-shine 2s infinite;
}

@keyframes gauge-shine {
  0%, 100% { opacity: 0; }
  50% { opacity: 1; }
}

.gauge-label {
  text-align: center;
  font-size: 12px;
  color: var(--text-secondary, rgba(255,255,255,0.6));
  margin-top: 6px;
}

.gauge-breakdown {
  display: flex;
  gap: 16px;
  margin-top: 8px;
  font-size: 11px;
  color: var(--text-secondary, rgba(255,255,255,0.5));
}

.gauge-item {
  background: rgba(255,255,255,0.04);
  padding: 4px 10px;
  border-radius: 8px;
}

/* Editable fields */
.compass-editable {
  background: rgba(255,255,255,0.03);
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 10px 12px;
  min-height: 40px;
  color: var(--text-primary, #fff);
  font-size: 14px;
  line-height: 1.5;
  transition: border-color 0.2s;
  outline: none;
}

.compass-editable:focus {
  border-color: #54a0ff;
  background: rgba(84,160,255,0.05);
}

.compass-editable .placeholder {
  color: var(--text-secondary, rgba(255,255,255,0.3));
  font-style: italic;
}

/* Lists */
.compass-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 200px;
  overflow-y: auto;
}

.compass-list.scrollable {
  max-height: 250px;
}

.compass-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: rgba(255,255,255,0.03);
  border-radius: 8px;
  font-size: 13px;
  transition: background 0.15s;
}

.compass-item:hover {
  background: rgba(255,255,255,0.06);
}

.compass-item.pinned {
  border-left: 3px solid #ff4757;
}

.compass-item.decision {
  border-left: 3px solid #54a0ff;
}

.compass-pin { font-size: 10px; }

.compass-text {
  flex: 1;
  color: var(--text-primary, #fff);
  word-break: break-word;
}

.compass-meta {
  font-size: 10px;
  color: var(--text-secondary, rgba(255,255,255,0.4));
  white-space: nowrap;
}

.compass-remove, .compass-resolve {
  background: none;
  border: none;
  color: var(--text-secondary, rgba(255,255,255,0.3));
  cursor: pointer;
  font-size: 14px;
  padding: 2px 6px;
  border-radius: 4px;
  transition: all 0.15s;
}

.compass-remove:hover { color: #ff4757; background: rgba(255,71,87,0.1); }
.compass-resolve:hover { color: #2ed573; background: rgba(46,213,115,0.1); }

.compass-empty {
  text-align: center;
  color: var(--text-secondary, rgba(255,255,255,0.3));
  padding: 12px;
  font-size: 13px;
  font-style: italic;
}

/* Add inputs */
.compass-add {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}

.compass-add input {
  flex: 1;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  padding: 8px 12px;
  color: var(--text-primary, #fff);
  font-size: 13px;
  outline: none;
  transition: border-color 0.2s;
}

.compass-add input:focus {
  border-color: #54a0ff;
}

.compass-add button {
  background: #54a0ff;
  border: none;
  color: #fff;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  font-size: 16px;
  cursor: pointer;
  transition: background 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.compass-add button:hover {
  background: #3d8bfd;
}

.decision-add {
  flex-wrap: wrap;
}

.decision-add input {
  min-width: 120px;
}

/* Health Grid */
.health-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px;
}

.health-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px;
  background: rgba(255,255,255,0.02);
  border-radius: 8px;
}

.health-label {
  font-size: 11px;
  color: var(--text-secondary, rgba(255,255,255,0.5));
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.health-value {
  font-size: 13px;
  font-weight: 600;
}

.health-ok { color: #2ed573; }
.health-warn { color: #ffa502; }

/* Compaction Rules */
.compaction-rules {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.rule-group h4 {
  font-size: 12px;
  margin: 0 0 6px 0;
  font-weight: 500;
}

.rule-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.rule-tag {
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 500;
}

.tag-red { background: rgba(255,71,87,0.15); color: #ff4757; }
.tag-yellow { background: rgba(255,165,2,0.15); color: #ffa502; }
.tag-green { background: rgba(46,213,115,0.15); color: #2ed573; }
.tag-blue { background: rgba(84,160,255,0.15); color: #54a0ff; }

/* Agent Memory Map */
.agent-memory-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 8px;
}

.agent-mem-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 6px;
  background: rgba(255,255,255,0.03);
  border-radius: 10px;
  text-align: center;
  transition: all 0.2s;
  border: 1px solid transparent;
}

.agent-mem-card.has-scratch {
  border-color: rgba(84,160,255,0.3);
  background: rgba(84,160,255,0.05);
}

.agent-mem-icon { font-size: 24px; }
.agent-mem-name { font-size: 12px; font-weight: 600; color: var(--text-primary, #fff); }
.agent-mem-role { font-size: 10px; color: var(--text-secondary, rgba(255,255,255,0.5)); }
.agent-mem-status { font-size: 12px; }

.hierarchy-note {
  margin-top: 12px;
  padding: 10px;
  background: rgba(84,160,255,0.06);
  border-radius: 8px;
  font-size: 12px;
  color: var(--text-secondary, rgba(255,255,255,0.6));
  line-height: 1.6;
}

/* Cache */
.cache-stats {
  display: flex;
  gap: 16px;
  margin-bottom: 10px;
  font-size: 12px;
  color: var(--text-secondary, rgba(255,255,255,0.6));
}

.cache-actions {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}

.btn-small {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  color: var(--text-primary, #fff);
  padding: 5px 12px;
  border-radius: 6px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.15s;
}

.btn-small:hover { background: rgba(255,255,255,0.1); }
.btn-small.btn-danger:hover { background: rgba(255,71,87,0.15); color: #ff4757; }

.cache-keys {
  max-height: 150px;
  overflow-y: auto;
}

.cache-key {
  display: flex;
  justify-content: space-between;
  padding: 4px 8px;
  font-size: 11px;
  font-family: monospace;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}

.cache-key.expired { opacity: 0.4; text-decoration: line-through; }
.cache-key-name { color: var(--text-primary, #fff); }
.cache-key-ttl { color: var(--text-secondary, rgba(255,255,255,0.4)); }

/* Facts */
.facts-search input {
  width: 100%;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  padding: 8px 12px;
  color: var(--text-primary, #fff);
  font-size: 13px;
  margin-bottom: 8px;
  outline: none;
}

.facts-search input:focus { border-color: #54a0ff; }

.fact-item {
  display: grid;
  grid-template-columns: 120px 1fr auto auto;
  gap: 8px;
  align-items: center;
}

.fact-key {
  font-weight: 600;
  font-size: 12px;
  color: #54a0ff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fact-value {
  font-size: 12px;
  color: var(--text-primary, #fff);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fact-confidence {
  font-size: 8px;
  color: #2ed573;
  letter-spacing: 1px;
}

/* Glossary */
.glossary-item strong {
  color: #54a0ff;
  margin-right: 4px;
}

/* Quick Actions */
.quick-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.btn-action {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  color: var(--text-primary, #fff);
  padding: 10px 16px;
  border-radius: 8px;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.15s;
}

.btn-action:hover { background: rgba(255,255,255,0.1); transform: translateY(-1px); }
.btn-action.btn-danger { border-color: rgba(255,71,87,0.3); }
.btn-action.btn-danger:hover { background: rgba(255,71,87,0.15); color: #ff4757; }

/* Event items */
.event-item { font-size: 12px; }
.event-type { font-size: 14px; flex-shrink: 0; }

/* Scrollbar */
.compass-list::-webkit-scrollbar,
.cache-keys::-webkit-scrollbar {
  width: 4px;
}

.compass-list::-webkit-scrollbar-track,
.cache-keys::-webkit-scrollbar-track {
  background: transparent;
}

.compass-list::-webkit-scrollbar-thumb,
.cache-keys::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.1);
  border-radius: 2px;
}

/* Responsive */
@media (max-width: 768px) {
  .compass-grid {
    grid-template-columns: 1fr;
    padding: 12px;
  }
  .compaction-rules {
    grid-template-columns: 1fr;
  }
  .agent-memory-grid {
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  }
  .fact-item {
    grid-template-columns: 80px 1fr auto;
  }
}

/* ─── Compass Badge (Chat Header) ─────────────────── */
.compass-hud-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  padding: 4px 10px;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
  font-size: 12px;
}
.compass-hud-badge:hover { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.2); }

.badge-gauge { font-weight: 700; font-size: 12px; transition: color 0.3s; }
.badge-mode { font-size: 12px; }

.compass-hud-badge.critical-pulse {
  animation: critical-pulse 1.5s ease-in-out infinite;
  border-color: rgba(255,71,87,0.4);
}
.compass-hud-badge.warn-glow {
  border-color: rgba(255,127,80,0.3);
  box-shadow: 0 0 8px rgba(255,127,80,0.15);
}

@keyframes critical-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,71,87,0); }
  50% { box-shadow: 0 0 12px 2px rgba(255,71,87,0.3); }
}

/* ─── Compass Strip (Mobile Top Bar) ─────────────── */
.compass-strip {
  display: none;
  padding: 6px 14px;
  background: var(--bg-secondary, #141425);
  border-bottom: 1px solid var(--border, rgba(255,255,255,0.06));
  font-size: 12px;
  gap: 10px;
  align-items: center;
  cursor: pointer;
  transition: all 0.2s;
}
.compass-strip:hover { background: rgba(255,255,255,0.03); }

.strip-gauge { font-weight: 700; }
.strip-mode { font-size: 12px; }
.strip-goal { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-secondary, rgba(255,255,255,0.6)); }
.strip-constraints { font-size: 11px; color: var(--text-secondary, rgba(255,255,255,0.4)); }

@media (max-width: 900px) {
  .compass-strip { display: flex; }
}

/* Strip expanded (mobile tap) */
.compass-strip.expanded {
  flex-wrap: wrap;
  padding: 10px 14px;
}

/* ─── HUD Toast (pin confirmations) ──────────────── */
.hud-toast {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: rgba(30,30,60,0.95);
  color: #fff;
  padding: 8px 18px;
  border-radius: 8px;
  font-size: 13px;
  z-index: 10000;
  opacity: 0;
  transition: opacity 0.3s, transform 0.3s;
  pointer-events: none;
  box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}
.hud-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ─── Compass HUD (Chat Right Sidebar) ────────────── */
.compass-hud {
  width: 0;
  overflow: hidden;
  background: var(--bg-secondary, #141425);
  border-left: 1px solid var(--border, rgba(255,255,255,0.08));
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  transition: width 0.25s ease;
}

.compass-hud.open {
  width: 280px;
}

.hud-header {
  padding: 10px 14px;
  font-weight: 700;
  font-size: 13px;
  border-bottom: 1px solid var(--border, rgba(255,255,255,0.08));
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
}

.hud-close {
  background: none;
  border: none;
  color: var(--text-secondary, rgba(255,255,255,0.4));
  cursor: pointer;
  font-size: 14px;
  padding: 2px 6px;
  border-radius: 4px;
}
.hud-close:hover { color: #ff4757; background: rgba(255,71,87,0.1); }

.hud-content {
  flex: 1;
  overflow-y: auto;
  padding: 0;
}

.compass-hud-btn {
  background: none;
  border: 1px solid rgba(255,255,255,0.1);
  color: var(--text-primary, #fff);
  cursor: pointer;
  font-size: 16px;
  padding: 4px 8px;
  border-radius: 6px;
  margin-left: auto;
  transition: all 0.15s;
}
.compass-hud-btn:hover { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.2); }

/* HUD Sections */
.hud-section {
  padding: 10px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}

.hud-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary, rgba(255,255,255,0.5));
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.hud-count {
  background: rgba(255,255,255,0.1);
  padding: 1px 6px;
  border-radius: 8px;
  font-size: 10px;
  margin-left: auto;
}

.hud-value {
  font-size: 13px;
  color: var(--text-primary, #fff);
  line-height: 1.4;
}

.hud-editable {
  background: rgba(255,255,255,0.02);
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 6px 8px;
  min-height: 24px;
  outline: none;
  transition: border-color 0.2s;
}
.hud-editable:focus { border-color: #54a0ff; background: rgba(84,160,255,0.04); }
.hud-placeholder { color: rgba(255,255,255,0.25); }

.hud-list { display: flex; flex-direction: column; gap: 4px; }

.hud-item {
  display: flex; align-items: flex-start; gap: 6px;
  padding: 4px 6px; border-radius: 6px;
  font-size: 12px; color: var(--text-primary, #fff);
  background: rgba(255,255,255,0.02);
  line-height: 1.3;
}
.hud-item:hover { background: rgba(255,255,255,0.04); }
.hud-item.pinned { border-left: 2px solid #ff4757; }
.hud-item.decision { border-left: 2px solid #54a0ff; }
.hud-item.pinned-note { border-left: 2px solid #2ed573; font-size: 11px; color: var(--text-secondary, rgba(255,255,255,0.6)); }
.hud-item span:first-child { flex: 1; word-break: break-word; }
.hud-item button {
  background: none; border: none;
  color: var(--text-secondary, rgba(255,255,255,0.3));
  cursor: pointer; font-size: 12px; padding: 0 4px;
  flex-shrink: 0;
}
.hud-item button:hover { color: #ff4757; }

.hud-meta { font-size: 9px; color: var(--text-secondary, rgba(255,255,255,0.3)); white-space: nowrap; flex-shrink: 0; }
.hud-empty { font-size: 11px; color: rgba(255,255,255,0.2); font-style: italic; padding: 2px 0; }

.hud-add-row {
  margin-top: 6px;
}
.hud-add-row input {
  width: 100%;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 6px;
  padding: 6px 8px;
  color: var(--text-primary, #fff);
  font-size: 11px;
  outline: none;
}
.hud-add-row input:focus { border-color: #54a0ff; }
.hud-add-row input::placeholder { color: rgba(255,255,255,0.2); }

/* HUD Gauge */
.hud-battery { padding: 10px 14px 6px; }
.hud-gauge-bar {
  width: 100%; height: 6px;
  background: rgba(255,255,255,0.06);
  border-radius: 3px; overflow: hidden;
}
.hud-gauge-fill { height: 100%; border-radius: 3px; transition: width 0.5s; }
.hud-gauge-info {
  display: flex; justify-content: space-between;
  font-size: 10px; color: var(--text-secondary, rgba(255,255,255,0.5));
  margin-top: 4px;
}

/* HUD Stats Grid */
.hud-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: 10px 14px;
}
.hud-stat {
  display: flex; flex-direction: column; gap: 2px;
  padding: 4px 6px; background: rgba(255,255,255,0.02); border-radius: 6px;
}
.hud-stat-label { font-size: 9px; color: var(--text-secondary, rgba(255,255,255,0.4)); text-transform: uppercase; }
.hud-stat-value { font-size: 12px; font-weight: 600; color: var(--text-primary, #fff); }

/* HUD scrollbar */
.hud-content::-webkit-scrollbar { width: 3px; }
.hud-content::-webkit-scrollbar-track { background: transparent; }
.hud-content::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 2px; }

/* Mobile: hide HUD */
@media (max-width: 768px) {
  .compass-hud.open { width: 240px; }
  .compass-hud-btn { font-size: 14px; padding: 4px 6px; }
}

@media (max-width: 480px) {
  .compass-hud.open {
    position: absolute; right: 0; top: 0; bottom: 0;
    width: 260px; z-index: 100;
    box-shadow: -4px 0 20px rgba(0,0,0,0.3);
  }
}

/* Light theme HUD */
[data-theme="light"] .compass-hud { background: #f8f9fa; border-color: rgba(0,0,0,0.08); }
[data-theme="light"] .hud-item { background: rgba(0,0,0,0.02); }
[data-theme="light"] .hud-editable { background: rgba(0,0,0,0.02); }

/* ─── ARB-036: Battery Mode ────────────────────────── */
.battery-current {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  background: rgba(255,255,255,0.03);
  border-radius: 10px;
  margin-bottom: 12px;
}
.battery-current-icon { font-size: 28px; }
.battery-current-label { font-size: 18px; font-weight: 700; }
.battery-current-pct { margin-left: auto; font-size: 24px; font-weight: 700; opacity: 0.6; }

.battery-levels { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.battery-level {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; border-radius: 8px;
  background: rgba(255,255,255,0.02);
  border: 1px solid transparent;
  transition: all 0.2s;
}
.battery-level.active { background: rgba(255,255,255,0.05); }
.battery-icon { font-size: 16px; }
.battery-info { display: flex; flex-direction: column; gap: 2px; }
.battery-name { font-size: 13px; font-weight: 600; }
.battery-desc { font-size: 11px; color: var(--text-secondary, rgba(255,255,255,0.5)); }
.battery-threshold { font-size: 10px; color: var(--text-secondary, rgba(255,255,255,0.35)); }

.behavior-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 8px; }
.behavior-item { display: flex; flex-direction: column; gap: 2px; padding: 6px 8px; background: rgba(255,255,255,0.02); border-radius: 6px; }
.behavior-label { font-size: 10px; color: var(--text-secondary, rgba(255,255,255,0.5)); text-transform: uppercase; }
.behavior-value { font-size: 12px; color: var(--text-primary, #fff); }

/* ─── ARB-036: Domain Map ─────────────────────────── */
.domain-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; }
.domain-card {
  padding: 10px; border-radius: 8px;
  background: rgba(255,255,255,0.03);
}
.domain-header { display: flex; justify-content: space-between; align-items: center; }
.domain-name { font-size: 13px; font-weight: 600; color: var(--text-primary, #fff); text-transform: capitalize; }
.domain-budget { font-size: 10px; color: var(--text-secondary, rgba(255,255,255,0.4)); }
.domain-file { font-size: 10px; font-family: monospace; color: var(--text-secondary, rgba(255,255,255,0.35)); margin: 4px 0; }
.domain-agents { display: flex; gap: 4px; font-size: 16px; }
.domain-agent { cursor: default; }
.domain-total { margin-top: 10px; font-size: 12px; color: var(--text-secondary, rgba(255,255,255,0.6)); }
.domain-pct { margin-left: 6px; color: #2ed573; }

/* ─── ARB-036: Delta Sync ─────────────────────────── */
.delta-summary { display: flex; gap: 16px; margin-bottom: 12px; }
.delta-stat { display: flex; flex-direction: column; gap: 2px; }
.delta-label { font-size: 10px; color: var(--text-secondary, rgba(255,255,255,0.5)); text-transform: uppercase; }
.delta-value { font-size: 13px; font-weight: 600; }
.delta-value.hot { color: #ff4757; }
.delta-value.cold { color: #54a0ff; }

.delta-chunks { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.delta-section h4 { font-size: 12px; margin: 0 0 6px; }
.delta-chunk {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 8px; border-radius: 6px; font-size: 11px;
  background: rgba(255,255,255,0.03);
}
.delta-chunk.hot { border-left: 2px solid #ff4757; }
.delta-chunk.cold { border-left: 2px solid #54a0ff; }
.chunk-name { font-weight: 600; color: var(--text-primary, #fff); flex: 1; }
.chunk-domain { font-size: 9px; color: var(--text-secondary, rgba(255,255,255,0.4)); }
.chunk-tokens { font-size: 10px; color: var(--text-secondary, rgba(255,255,255,0.5)); }
.chunk-version { font-size: 9px; color: var(--text-secondary, rgba(255,255,255,0.3)); }
.btn-tiny { background: none; border: none; cursor: pointer; font-size: 10px; padding: 2px; }

/* ─── ARB-036: Compression ────────────────────────── */
.compression-savings { margin-bottom: 12px; }
.compression-savings h4, .compression-abbrevs h4, .compression-rules h4 { font-size: 12px; margin: 0 0 8px; font-weight: 500; }
.saving-row { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.saving-technique { font-size: 11px; color: var(--text-primary, #fff); width: 180px; flex-shrink: 0; }
.saving-bar-container { flex: 1; height: 8px; background: rgba(255,255,255,0.06); border-radius: 4px; overflow: hidden; }
.saving-bar { height: 100%; background: linear-gradient(90deg, #2ed573, #54a0ff); border-radius: 4px; }
.saving-pct { font-size: 11px; font-weight: 600; color: #2ed573; width: 50px; text-align: right; }

.abbrev-grid { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 12px; }
.abbrev-item {
  padding: 3px 8px; border-radius: 6px; font-size: 11px;
  background: rgba(84,160,255,0.1); color: #54a0ff; cursor: default;
}

.comp-rule { font-size: 12px; padding: 4px 0; color: var(--text-secondary, rgba(255,255,255,0.6)); }

/* ─── ARB-036: Efficiency ─────────────────────────── */
.efficiency-score { display: flex; flex-direction: column; align-items: center; margin-bottom: 12px; }
.eff-ring {
  width: 80px; height: 80px; border-radius: 50%;
  background: conic-gradient(var(--color) calc(var(--pct) * 1%), rgba(255,255,255,0.06) 0);
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
.eff-ring::before {
  content: ''; position: absolute;
  width: 60px; height: 60px; border-radius: 50%;
  background: var(--card-bg, #1a1a2e);
}
.eff-number { position: relative; z-index: 1; font-size: 18px; font-weight: 700; color: var(--text-primary, #fff); }
.eff-label { font-size: 11px; color: var(--text-secondary, rgba(255,255,255,0.5)); margin-top: 6px; }

.efficiency-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 8px; }
.eff-stat { display: flex; justify-content: space-between; padding: 6px 8px; background: rgba(255,255,255,0.02); border-radius: 6px; font-size: 12px; }
.eff-stat-label { color: var(--text-secondary, rgba(255,255,255,0.5)); }
.eff-stat-value { font-weight: 600; }

.efficiency-tip { font-size: 12px; color: var(--text-secondary, rgba(255,255,255,0.5)); padding: 8px; background: rgba(255,255,255,0.02); border-radius: 8px; }

/* ─── ARB-036: Fleet Protocol ─────────────────────── */
.protocol-section { margin-bottom: 12px; }
.protocol-section h4 { font-size: 12px; margin: 0 0 6px; font-weight: 500; }
.protocol-example {
  font-size: 11px; font-family: monospace;
  background: rgba(0,0,0,0.3); color: #2ed573;
  padding: 10px; border-radius: 8px;
  overflow-x: auto; white-space: pre; margin: 0;
}
.protocol-budget { font-size: 10px; color: var(--text-secondary, rgba(255,255,255,0.4)); margin-top: 4px; text-align: right; }

.flow-diagram { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 10px; background: rgba(255,255,255,0.02); border-radius: 8px; }
.flow-node { padding: 6px 10px; background: rgba(84,160,255,0.1); border-radius: 8px; font-size: 12px; font-weight: 600; }
.flow-arrow { color: var(--text-secondary, rgba(255,255,255,0.3)); font-size: 11px; }

/* ─── ARB-036: Streaming Monitor ──────────────────── */
.stream-rules { margin-bottom: 12px; }
.stream-rule { display: flex; align-items: center; gap: 8px; font-size: 12px; padding: 4px 0; color: var(--text-secondary, rgba(255,255,255,0.6)); }
.rule-icon { font-size: 14px; }

.stream-log h4 { font-size: 12px; margin: 0 0 6px; font-weight: 500; }
.stream-entry { display: flex; align-items: center; gap: 8px; padding: 4px 8px; font-size: 11px; background: rgba(255,255,255,0.02); border-radius: 6px; margin-bottom: 4px; }
.stream-name { flex: 1; color: var(--text-primary, #fff); font-family: monospace; }
.stream-saving { color: #2ed573; font-weight: 600; white-space: nowrap; }

/* ─── Battery Card spans full width ───────────────── */
.compass-battery-card { grid-column: 1 / -1; }
.compass-domains-card { grid-column: 1 / -1; }
.compass-fleet-card { grid-column: 1 / -1; }

/* Light theme */
@media (prefers-color-scheme: light) {
  .compass-card { background: rgba(0,0,0,0.02); border-color: rgba(0,0,0,0.08); }
  .compass-card:hover { border-color: rgba(0,0,0,0.15); }
  .compass-item { background: rgba(0,0,0,0.02); }
  .compass-item:hover { background: rgba(0,0,0,0.04); }
}

[data-theme="light"] .compass-card { background: rgba(0,0,0,0.02); border-color: rgba(0,0,0,0.08); }
[data-theme="light"] .compass-card:hover { border-color: rgba(0,0,0,0.15); }
[data-theme="light"] .compass-item { background: rgba(0,0,0,0.02); }
[data-theme="light"] .compass-editable { background: rgba(0,0,0,0.02); }