/* ── Scoped reset: only inside the agent console ── */
#agent-console *,
#agent-console *::before,
#agent-console *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ── Variables scoped to the wrapper so they don't bleed into the theme ── */
.ai-agent-wrap {
  --ag-bg:        #07080f;
  --ag-bg2:       #0d0f1e;
  --ag-bg3:       #131629;
  --ag-border:    rgba(255,255,255,0.07);
  --ag-border2:   rgba(255,255,255,0.12);
  --ag-purple:    #493290;
  --ag-purple2:   #6b4dcc;
  --ag-purple3:   #9b7ff0;
  --ag-cyan:      #00d4ff;
  --ag-cyan2:     rgba(0,212,255,0.15);
  --ag-green:     #00e5a0;
  --ag-green2:    rgba(0,229,160,0.12);
  --ag-orange:    #ef5f17;
  --ag-pink:      #e825e6;
  --ag-text:      #e8eaf6;
  --ag-text2:     #8892b0;
  --ag-text3:     #7280a3; /* 2026-07-28: lightened from #4a5270 — failed WCAG
                              AA contrast (~2.5:1) against #agent-console's
                              #0d0f1e background; now ~4.8:1. */
  --ag-mono:      'JetBrains Mono', monospace;
  --ag-sans:      'Outfit', sans-serif;
  position: relative;
  z-index: 1;
}

#agent-console {
  width: 100%;
  max-width: 1100px;
  min-height: 560px;
  background: var(--ag-bg2);
  border: 1px solid var(--ag-border2);
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 48px rgba(73,50,144,0.45);
  margin: 0 auto;
  font-family: var(--ag-sans);
  color: var(--ag-text);
}

/* TOP BAR */
#top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 24px;
  background: var(--ag-bg3);
  border-bottom: 1px solid var(--ag-border);
  flex-shrink: 0;
}
.top-bar-left {
  display: flex;
  align-items: center;
  gap: 12px;
}
.agent-badge {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ag-cyan);
}
.pulse-dot {
  width: 7px; height: 7px;
  background: var(--ag-green);
  border-radius: 50%;
  animation: pulse-live 1.6s ease-in-out infinite;
}
@keyframes pulse-live {
  0%,100% { opacity:1; box-shadow: 0 0 0 0 rgba(0,229,160,0.6); }
  50%      { opacity:0.7; box-shadow: 0 0 0 5px rgba(0,229,160,0); }
}
.top-bar-right {
  display: flex;
  align-items: center;
  gap: 20px;
}
.stat-pill {
  font-size: 11px;
  color: var(--ag-text2);
  font-family: var(--ag-mono);
}
.stat-pill span { color: var(--ag-cyan); font-weight: 500; }

/* MAIN LAYOUT */
#main-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  flex: 1;
  min-height: 0;
}

/* SIDEBAR */
#sidebar {
  border-right: 1px solid var(--ag-border);
  padding: 16px 0 16px 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: rgba(0,0,0,0.15);
  overflow-y: auto;
}
.sidebar-label {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ag-text3);
  padding: 0 20px 8px;
  font-weight: 600;
}
.sidebar-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 20px;
  cursor: default;
  transition: background 0.2s;
  border-left: 2px solid transparent;
  font-size: 13px;
  color: var(--ag-text2);
  position: relative;
}
.sidebar-item.active {
  background: rgba(73,50,144,0.2);
  border-left-color: var(--ag-purple3);
  color: var(--ag-text);
}
.sidebar-item.done { color: var(--ag-text3); }
.sidebar-item.done .si-icon { color: var(--ag-green); }
.si-icon {
  font-size: 14px;
  width: 16px;
  text-align: center;
  flex-shrink: 0;
}
.si-status {
  margin-left: auto;
  font-size: 10px;
  font-family: var(--ag-mono);
}
.si-status.running   { color: var(--ag-cyan);  animation: ag-blink 1s step-end infinite; }
.si-status.done-tag  { color: var(--ag-green); }
@keyframes ag-blink { 0%,100%{opacity:1} 50%{opacity:0.3} }

/* CONTENT AREA */
#content-area {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* PROCESS HEADER */
#process-header {
  padding: 16px 28px 12px;
  border-bottom: 1px solid var(--ag-border);
  flex-shrink: 0;
}
#process-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--ag-text);
  margin-bottom: 4px;
}
#process-subtitle {
  font-size: 12px;
  color: var(--ag-text2);
  font-family: var(--ag-mono);
}

/* LOG + VIZ SPLIT */
#split-view {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* LOG PANEL */
#log-panel {
  border-right: 1px solid var(--ag-border);
  padding: 14px 20px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-family: var(--ag-mono);
  font-size: 11.5px;
}
.log-line {
  display: flex;
  gap: 10px;
  line-height: 1.6;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.3s, transform 0.3s;
}
.log-line.show { opacity: 1; transform: none; }
.log-ts  { color: var(--ag-text3); flex-shrink: 0; }
.log-msg { color: var(--ag-text2); }
.log-msg.highlight { color: var(--ag-cyan); }
.log-msg.success   { color: var(--ag-green);   font-weight: 500; }
.log-msg.warn      { color: var(--ag-orange); }
.log-msg.result    { color: var(--ag-purple3); font-weight: 500; }

/* VIZ PANEL */
#viz-panel {
  padding: 16px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow: hidden;
}

/* RESULT STATS ROW */
#result-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  flex-shrink: 0;
}
.stat-card {
  background: var(--ag-bg3);
  border: 1px solid var(--ag-border);
  border-radius: 10px;
  padding: 15px 18px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.4s, transform 0.4s;
}
.stat-card.show { opacity: 1; transform: none; }
.stat-card-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ag-text3);
  margin-bottom: 4px;
}
.stat-card-value {
  font-size: 20px;
  font-weight: 700;
  color: var(--ag-cyan);
  line-height: 1;
}
.stat-card-value.green  { color: var(--ag-green); }
.stat-card-value.orange { color: var(--ag-orange); }
.stat-card-value.purple { color: var(--ag-purple3); }
.stat-card-sub {
  font-size: 10px;
  color: var(--ag-text3);
  margin-top: 3px;
}

/* VIZ CANVAS AREA */
#viz-canvas {
  flex: 1;
  background: var(--ag-bg3);
  border: 1px solid var(--ag-border);
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  min-height: 200px;
}
#viz-canvas canvas {
  position: absolute;
  top: 32px;
  left: 0;
  right: 0;
  bottom: 0;
}
.viz-label {
  position: absolute;
  top: 0;
  left: 0;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ag-text3);
  font-family: var(--ag-mono);
  background: var(--ag-bg3);
  z-index: 5;
  padding: 8px 14px;
  border-bottom: 1px solid var(--ag-border);
  width: 100%;
}

/* BOTTOM BAR */
#bottom-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 24px;
  border-top: 1px solid var(--ag-border);
  background: var(--ag-bg3);
  flex-shrink: 0;
}
#progress-track {
  flex: 1;
  max-width: 300px;
  height: 3px;
  background: rgba(255,255,255,0.06);
  border-radius: 99px;
  overflow: hidden;
  margin-right: 20px;
}
#progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--ag-purple2), var(--ag-cyan));
  border-radius: 99px;
  width: 0%;
  transition: width 0.4s ease;
}
#cycle-label {
  font-size: 11px;
  color: var(--ag-text3);
  font-family: var(--ag-mono);
}
#cycle-label span { color: var(--ag-purple3); }
#next-label {
  font-size: 11px;
  color: var(--ag-text3);
  font-family: var(--ag-mono);
}
#next-label span { color: var(--ag-text2); }

/* ── Overflow wrapper: scrollable on screens that can't fit the console ── */
.ai-agent-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ── Tablet (≤ 960px): drop sidebar, stack log above viz ── */
@media (max-width: 960px) {
  #agent-console { min-height: 460px; }

  #main-layout { grid-template-columns: 1fr; }
  #sidebar      { display: none; }

  #split-view {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
  }
  #log-panel {
    max-height: 130px;
    border-right: none;
    border-bottom: 1px solid var(--ag-border);
  }
  #viz-canvas { min-height: 180px; }

  #top-bar          { padding: 12px 18px; }
  #process-header   { padding: 14px 18px 12px; }
  #process-title    { font-size: 15px; }
  #bottom-bar       { padding: 10px 18px; }
}

/* ── Mobile (≤ 600px): hide log panel, tighten everything ── */
@media (max-width: 600px) {
  #agent-console { min-height: 0; border-radius: 10px; }

  #log-panel      { display: none; }
  #split-view     { grid-template-columns: 1fr; }

  #viz-panel      { padding: 12px; gap: 10px; }
  #viz-canvas     { min-height: 200px; }

  #result-stats        { grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .stat-card           { padding: 8px 10px; }
  .stat-card-value     { font-size: 15px; }
  .stat-card-label     { font-size: 9px; }

  #top-bar             { flex-wrap: wrap; gap: 8px; padding: 10px 12px; }
  .top-bar-right       { gap: 10px; flex-wrap: wrap; }
  .stat-pill           { font-size: 10px; }

  #process-header      { padding: 12px 14px 10px; }
  #process-title       { font-size: 13px; }
  #process-subtitle    { font-size: 11px; }

  #bottom-bar          { padding: 8px 12px; gap: 8px; flex-wrap: wrap; }
  #progress-track      { max-width: 100%; margin-right: 0; order: -1; flex-basis: 100%; }
  #next-label          { display: none; }
}