/* === WarcraftCN Fantasy Theme — The Obulus Console === */

:root {
  /* Base */
  --bg:         #0a0c10;
  --card-bg:    hsl(220 15% 10%);
  --border:     hsl(45 40% 25%);
  --border-dim: hsl(45 20% 16%);
  --text:       #e4e6ef;
  --muted:      #7a7f99;
  --radius:     4px;

  /* Gold (default / Obulus) */
  --gold:       hsl(45 60% 35%);
  --gold-glow:  hsl(45 70% 45%);
  --gold-dim:   hsl(45 30% 18%);

  /* Faction colors */
  --elf:        hsl(170 35% 18%);
  --elf-text:   hsl(170 50% 55%);
  --human:      hsl(220 40% 20%);
  --human-text: hsl(220 60% 60%);
  --orc:        hsl(0 30% 18%);
  --orc-text:   hsl(0 50% 55%);
  --undead:     hsl(270 25% 15%);
  --undead-text:hsl(270 40% 55%);
  --default-text: var(--gold-glow);

  /* Event severity */
  --severity-normal:  var(--gold);
  --severity-error:   hsl(280 40% 42%);
  --severity-alert:   hsl(30 70% 40%);

  /* Status */
  --status-idle:    var(--muted);
  --status-running: hsl(140 50% 40%);
  --status-error:   hsl(0 60% 45%);
  --status-unknown: hsl(45 20% 25%);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Inter', sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

.fantasy {
  font-family: 'Cinzel', serif;
  font-weight: 600;
}

.app {
  max-width: 1280px;
  margin: 0 auto;
  padding: 1.25rem 1rem;
}

/* --- WarcraftCN Card Frame --- */
.wc-card {
  background: var(--card-bg);
  border: 2px solid var(--border-dim);
  border-image: url('https://warcraftcn.com/warcraftcn/card-bg.webp') 24 fill / 24px;
  padding: 1rem;
  border-radius: var(--radius);
}

.wc-btn {
  background: none;
  border: 2px solid var(--border-dim);
  border-image: url('https://warcraftcn.com/warcraftcn/button-bg.webp') 16 fill / 5px;
  color: var(--gold-glow);
  font-family: 'Cinzel', serif;
  font-size: 0.75rem;
  padding: 0.3rem 0.8rem;
  cursor: pointer;
}
.wc-btn:hover { filter: brightness(1.2); }

/* --- Header --- */
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--border-dim);
}

.header h1 {
  font-size: 1.35rem;
  color: var(--gold-glow);
  text-shadow: 0 0 12px hsla(45, 60%, 40%, 0.3);
}

.header-right {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.last-event {
  font-size: 0.8rem;
  color: var(--muted);
}

.status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--status-unknown);
  display: inline-block;
  transition: background 0.3s;
}
.status-dot.connected { background: var(--status-running); }
.status-dot.error     { background: var(--status-error); }

/* --- Section Titles --- */
.section-title {
  font-size: 0.9rem;
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 0.75rem;
}

/* --- Activity Feed --- */
.feed-section {
  margin-bottom: 1.25rem;
  max-height: 280px;
  overflow-y: auto;
}

.feed-line {
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 0.78rem;
  line-height: 1.6;
  padding: 0.15rem 0;
  display: flex;
  gap: 0.5rem;
  border-bottom: 1px solid hsla(45, 20%, 16%, 0.3);
}

.feed-time {
  color: var(--muted);
  white-space: nowrap;
  min-width: 3.5rem;
}

.feed-agent {
  white-space: nowrap;
  font-weight: 500;
}

.feed-msg { color: var(--text); flex: 1; }

.feed-line.error { border-left: 2px solid var(--severity-error); padding-left: 0.4rem; }
.feed-line.alert { border-left: 2px solid var(--severity-alert); padding-left: 0.4rem; }

.feed-empty {
  color: var(--muted);
  font-style: italic;
  font-size: 0.8rem;
  text-align: center;
  padding: 1.5rem 0;
}

/* --- Bottom Grid --- */
.grid-bottom {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 1.25rem;
}

/* --- Agent Cards --- */
.agent-cards {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.agent-card {
  background: var(--card-bg);
  border: 1px solid var(--border-dim);
  border-left: 3px solid var(--gold-dim);
  padding: 0.75rem 0.9rem;
  transition: border-left-color 0.2s;
}

.agent-card.faction-elf     { border-left-color: var(--elf-text); }
.agent-card.faction-human   { border-left-color: var(--human-text); }
.agent-card.faction-orc     { border-left-color: var(--orc-text); }
.agent-card.faction-undead  { border-left-color: var(--undead-text); }
.agent-card.faction-default { border-left-color: var(--gold-glow); }

.agent-card-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.3rem;
}

.agent-emoji { font-size: 1.1rem; }

.agent-name {
  font-family: 'Cinzel', serif;
  font-size: 0.85rem;
  font-weight: 600;
}

.agent-card.faction-elf .agent-name     { color: var(--elf-text); }
.agent-card.faction-human .agent-name   { color: var(--human-text); }
.agent-card.faction-orc .agent-name     { color: var(--orc-text); }
.agent-card.faction-undead .agent-name  { color: var(--undead-text); }
.agent-card.faction-default .agent-name { color: var(--default-text); }

.agent-status {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.75rem;
  color: var(--muted);
}

.status-indicator {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  display: inline-block;
}

.status-indicator.idle    { background: var(--status-idle); }
.status-indicator.running { background: var(--status-running); animation: pulse 1.5s infinite; }
.status-indicator.error   { background: var(--status-error); }
.status-indicator.unknown { background: var(--status-unknown); }

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.4; }
}

.agent-detail {
  font-size: 0.72rem;
  color: var(--muted);
  margin-top: 0.15rem;
}

/* --- Right Column --- */
.right-column {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

/* --- Metrics Grid --- */
.metrics-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.6rem;
}

.metric-card {
  text-align: center;
  padding: 0.75rem 0.5rem;
}

.metric-label {
  font-size: 0.72rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 0.3rem;
}

.metric-value {
  font-family: 'Cinzel', serif;
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--gold-glow);
}

/* --- Recent Outputs --- */
.outputs-card {
  max-height: 200px;
  overflow-y: auto;
}

.output-item {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.78rem;
  padding: 0.35rem 0;
  border-bottom: 1px solid hsla(45, 20%, 16%, 0.3);
}

.output-item:last-child { border-bottom: none; }

.output-emoji { flex-shrink: 0; }
.output-text  { color: var(--text); }

/* --- Skeleton --- */
.skeleton {
  background: linear-gradient(90deg, var(--card-bg) 25%, hsl(220 15% 14%) 50%, var(--card-bg) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--radius);
}

@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* --- Scrollbar --- */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--border-dim);
  border-radius: 3px;
}

/* --- Mobile --- */
@media (max-width: 768px) {
  .header h1 { font-size: 1.1rem; }

  .grid-bottom {
    grid-template-columns: 1fr;
  }

  .metrics-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .feed-section { max-height: 200px; }
  .metric-value { font-size: 1.1rem; }
}

@media (max-width: 480px) {
  .app { padding: 0.75rem 0.5rem; }
  .metrics-grid { grid-template-columns: 1fr 1fr; }
}