/*
 * Bailder Brain — dashboard circular único.
 *
 * Usa SEMPRE as vars neon do design system (--neon-cyan/purple/green/amber/
 * red/mint) e os tokens de bg/motion. Animações reusadas de animations.css
 * (.is-pulsing, .is-bumping, .is-glowing, .is-shaking, .is-fading-in).
 */

.brain {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  height: 100%;
  min-height: calc(100vh - 32px);
  color: var(--color-text);
}

/* ============================================================
 * HEADER
 * ============================================================ */
.brain__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-md);
  padding: 0 var(--space-md);
}

.brain__title {
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.brain__title-glyph {
  color: var(--neon-cyan);
  text-shadow: 0 0 12px var(--neon-cyan);
}

.brain__title-tag {
  font-size: 0.7rem;
  background: linear-gradient(90deg, var(--neon-cyan), var(--neon-purple));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  letter-spacing: 0.2em;
  font-weight: 800;
}

.brain__subtitle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.3rem 0 0 0;
  font-size: 0.85rem;
  color: var(--color-text-faded);
  font-family: var(--font-mono, monospace);
}

.brain__status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--neon-amber);
  box-shadow: 0 0 8px var(--neon-amber);
}
.brain__status-dot[data-status="ok"]   { background: var(--neon-green); box-shadow: 0 0 8px var(--neon-green); }
.brain__status-dot[data-status="warn"] { background: var(--neon-amber); box-shadow: 0 0 8px var(--neon-amber); }
.brain__status-dot[data-status="err"]  { background: var(--neon-red);   box-shadow: 0 0 8px var(--neon-red); }

.brain__sep { opacity: 0.4; }

.brain__escape {
  font-size: 0.85rem;
  color: var(--color-text-faded);
  text-decoration: none;
  padding: 0.35rem 0.7rem;
  border: 1px solid rgba(180, 126, 255, 0.3);
  border-radius: 999px;
  transition: all var(--motion-fast) ease;
}
.brain__escape:hover {
  color: var(--neon-purple);
  border-color: var(--neon-purple);
  background: rgba(180, 126, 255, 0.08);
}

/* ============================================================
 * CANVAS — SVG container
 * ============================================================ */
.brain__canvas {
  position: relative;
  flex: 1;
  min-height: 600px;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(ellipse at center, rgba(0, 229, 255, 0.04) 0%, transparent 60%),
    linear-gradient(180deg, var(--bg-deep) 0%, var(--bg-surface) 100%);
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: 16px;
  overflow: hidden;
}

.brain__svg {
  width: 100%;
  height: 100%;
  max-height: calc(100vh - 220px);
  display: block;
}

/* Faint background guides */
.brain-ring-guide {
  fill: none;
  stroke: rgba(255, 255, 255, 0.04);
  stroke-width: 1;
  stroke-dasharray: 2 4;
}
.brain-ring-guide--outer {
  stroke: rgba(255, 255, 255, 0.06);
}

/* ============================================================
 * AVATAR CENTRAL
 * ============================================================ */
.brain-avatar {
  cursor: default;
}

.brain-avatar__halo {
  fill: rgba(0, 229, 255, 0.08);
  stroke: rgba(0, 229, 255, 0.18);
  stroke-width: 1;
}

.brain-avatar__core {
  /* fill setado inline via url(#brain-avatar-grad) */
}

.brain-avatar__rim {
  fill: none;
  stroke: var(--neon-cyan);
  stroke-width: 1.5;
  opacity: 0.6;
}

.brain-avatar[data-mood="spawning"] .brain-avatar__rim { stroke: var(--neon-amber); }
.brain-avatar[data-mood="thinking"] .brain-avatar__rim { stroke: var(--neon-purple); }
.brain-avatar[data-mood="blocked"]  .brain-avatar__rim { stroke: var(--neon-red); }

.brain-avatar__label {
  fill: #fff;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-shadow: 0 0 8px rgba(0, 229, 255, 0.5);
  pointer-events: none;
}

.brain-avatar__status {
  fill: rgba(255, 255, 255, 0.85);
  font-size: 13px;
  font-family: var(--font-mono, monospace);
  letter-spacing: 0.06em;
  text-transform: lowercase;
}

.brain-avatar__count {
  fill: rgba(255, 255, 255, 0.55);
  font-size: 11px;
  font-family: var(--font-mono, monospace);
}

/* Pulse com cor dependente do mood (override --pulse-color) */
.brain-avatar.is-pulsing .brain-avatar__halo {
  animation: brain-avatar-halo-pulse 2.2s ease-in-out infinite;
}
@keyframes brain-avatar-halo-pulse {
  0%, 100% { r: 135; opacity: 0.6; }
  50%      { r: 150; opacity: 1; }
}

.brain-avatar[data-mood="spawning"].is-pulsing .brain-avatar__halo { fill: rgba(255, 199, 59, 0.12); stroke: rgba(255, 199, 59, 0.3); }
.brain-avatar[data-mood="thinking"].is-pulsing .brain-avatar__halo { fill: rgba(180, 126, 255, 0.12); stroke: rgba(180, 126, 255, 0.3); }
.brain-avatar[data-mood="blocked"]                  .brain-avatar__halo { fill: rgba(255, 61, 92, 0.12); stroke: rgba(255, 61, 92, 0.3); }

/* ============================================================
 * ANEL 1 — WORKERS (rotaciona)
 * ============================================================ */
/*
 * O spinner gira ao redor do centro do viewBox (500,500). Usamos
 * transform-origin no centro do SVG. Quando is-spinning, anima
 * por 60s — lento o suficiente pra ler labels mas perceber movimento.
 */
.brain-ring__spinner {
  transform-origin: 500px 500px;
}
.brain-ring__spinner.is-spinning {
  animation: brain-spinner-rotate 60s linear infinite;
}
@keyframes brain-spinner-rotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.brain-worker__orb {
  stroke-width: 2;
  stroke: rgba(255, 255, 255, 0.2);
  cursor: pointer;
}
.brain-worker__orb--cheap   { fill: var(--neon-cyan); }
.brain-worker__orb--default { fill: var(--neon-purple); }
.brain-worker__orb--premium { fill: var(--neon-amber); }

.brain-worker__pulse {
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
  opacity: 0.4;
  color: var(--neon-cyan);
  animation: brain-worker-pulse 2s ease-out infinite;
}
.brain-worker__orb--default + .brain-worker__pulse,
.brain-worker .brain-worker__orb--default ~ .brain-worker__pulse { color: var(--neon-purple); }
@keyframes brain-worker-pulse {
  0%   { r: 16; opacity: 0.5; }
  100% { r: 30; opacity: 0; }
}

.brain-worker__label {
  fill: rgba(255, 255, 255, 0.7);
  font-size: 10px;
  font-family: var(--font-mono, monospace);
  pointer-events: none;
}

/* Contra-rotação do conteúdo do orb pra texto não virar de cabeça pra baixo:
 * spinner gira CW; inner aplica rotação CCW na mesma velocidade. Como
 * a posição radial é definida no `g.brain-worker` (translate), só o
 * conteúdo de inner gira em torno do próprio orb — preservando upright. */
.brain-ring__spinner.is-spinning .brain-worker__inner {
  animation: brain-spinner-counter 60s linear infinite;
  transform-origin: 0 0;
}
@keyframes brain-spinner-counter {
  from { transform: rotate(0deg); }
  to   { transform: rotate(-360deg); }
}

/* ============================================================
 * ANEL 2 — MODELS HOT
 * ============================================================ */
.brain-model__orb {
  stroke: rgba(255, 255, 255, 0.15);
  stroke-width: 1;
}
.brain-model__orb--purple { fill: var(--neon-purple); }
.brain-model__orb--cyan   { fill: var(--neon-cyan); }
.brain-model__orb--green  { fill: var(--neon-green); }
.brain-model__orb--amber  { fill: var(--neon-amber); }
.brain-model__orb--mint   { fill: var(--neon-mint); }
.brain-model__orb--red    { fill: var(--neon-red); }

.brain-model__name {
  fill: rgba(255, 255, 255, 0.85);
  font-size: 10px;
  font-family: var(--font-mono, monospace);
}
.brain-model__cost {
  fill: rgba(255, 255, 255, 0.55);
  font-size: 9px;
  font-family: var(--font-mono, monospace);
}

/* ============================================================
 * ANEL 3 — PROJECTS
 * ============================================================ */
.brain-project__orb {
  fill: rgba(0, 229, 255, 0.08);
  stroke: var(--neon-cyan);
  stroke-width: 1.5;
  --pulse-color: var(--neon-cyan);
}
.brain-project.is-pulsing .brain-project__orb {
  fill: rgba(0, 229, 255, 0.2);
}
.brain-project__slug {
  fill: rgba(255, 255, 255, 0.9);
  font-size: 11px;
  font-family: var(--font-mono, monospace);
  letter-spacing: 0.04em;
}
.brain-project__count {
  fill: rgba(255, 255, 255, 0.45);
  font-size: 9px;
  font-family: var(--font-mono, monospace);
}

/* ============================================================
 * COST GAUGE
 * ============================================================ */
.brain-cost__dial {
  fill: rgba(255, 255, 255, 0.02);
  stroke: rgba(255, 199, 59, 0.3);
  stroke-width: 1.5;
}
.brain-cost__ticks line {
  stroke: rgba(255, 199, 59, 0.5);
  stroke-width: 1.5;
}
.brain-cost__tick-label {
  fill: rgba(255, 255, 255, 0.45);
  font-size: 10px;
  font-family: var(--font-mono, monospace);
}
.brain-cost__needle {
  stroke: var(--neon-amber);
  stroke-width: 3;
  stroke-linecap: round;
  transform-origin: 0 0;
  filter: drop-shadow(0 0 6px var(--neon-amber));
  transition: transform var(--motion-slow) ease;
}
.brain-cost__pivot {
  fill: var(--neon-amber);
}
.brain-cost__label {
  fill: rgba(255, 199, 59, 0.7);
  font-size: 11px;
  letter-spacing: 0.16em;
  font-weight: 700;
}
.brain-cost__value {
  fill: #fff;
  font-size: 22px;
  font-weight: 700;
  font-family: var(--font-mono, monospace);
}
.brain-cost__rate {
  fill: rgba(255, 255, 255, 0.55);
  font-size: 10px;
  font-family: var(--font-mono, monospace);
}

/* Glow on the whole cost block when over $5 */
.brain-cost.is-glowing { --glow-color: var(--neon-red); }
.brain-cost.is-glowing .brain-cost__needle { stroke: var(--neon-red); filter: drop-shadow(0 0 8px var(--neon-red)); }

/* ============================================================
 * HEALTH
 * ============================================================ */
.brain-health__label {
  fill: rgba(123, 255, 212, 0.7);
  font-size: 11px;
  letter-spacing: 0.16em;
  font-weight: 700;
}

.brain-health__bg {
  fill: rgba(255, 255, 255, 0.02);
  stroke: rgba(255, 255, 255, 0.15);
  stroke-width: 1.5;
}

.brain-health__item[data-state="ok"]       .brain-health__bg { stroke: var(--neon-green); fill: rgba(0, 255, 157, 0.08); }
.brain-health__item[data-state="degraded"] .brain-health__bg { stroke: var(--neon-amber); fill: rgba(255, 199, 59, 0.08); }
.brain-health__item[data-state="down"]     .brain-health__bg { stroke: var(--neon-red);   fill: rgba(255, 61, 92, 0.12); }
.brain-health__item[data-state="unknown"]  .brain-health__bg { stroke: rgba(255, 255, 255, 0.18); }

.brain-health__icon {
  fill: rgba(255, 255, 255, 0.9);
  font-size: 18px;
  font-family: var(--font-mono, monospace);
}
.brain-health__name {
  fill: rgba(255, 255, 255, 0.55);
  font-size: 10px;
  font-family: var(--font-mono, monospace);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.brain-health__breaker {
  fill: rgba(255, 255, 255, 0.5);
  font-size: 10px;
  font-family: var(--font-mono, monospace);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.brain-health__breaker[data-state="open"]      { fill: var(--neon-red); }
.brain-health__breaker[data-state="half_open"] { fill: var(--neon-amber); }
.brain-health__breaker[data-state="closed"]    { fill: var(--neon-green); }

/* ============================================================
 * RECENT STRIP
 * ============================================================ */
.brain__recent {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  background: var(--bg-elevated);
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: 12px;
  overflow: hidden;
}

.brain__recent-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--color-text-faded);
  font-weight: 700;
  flex-shrink: 0;
}

.brain__recent-list {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1;
  scrollbar-width: thin;
}

.brain-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.75rem;
  font-family: var(--font-mono, monospace);
  white-space: nowrap;
  flex-shrink: 0;
}

.brain-chip--green  { border-color: rgba(0, 255, 157, 0.3); }
.brain-chip--yellow { border-color: rgba(255, 199, 59, 0.4); background: rgba(255, 199, 59, 0.06); }
.brain-chip--red    { border-color: rgba(255, 61, 92, 0.4);  background: rgba(255, 61, 92, 0.08); }

.brain-chip__action { color: rgba(255, 255, 255, 0.9); font-weight: 600; }
.brain-chip__tier   {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.05rem 0.4rem;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.06);
}
.brain-chip--yellow .brain-chip__tier { color: var(--neon-amber); }
.brain-chip--red    .brain-chip__tier { color: var(--neon-red); }
.brain-chip--green  .brain-chip__tier { color: var(--neon-green); }
.brain-chip__target { color: var(--color-text-faded); }

/* ============================================================
 * TOOLTIP (HTML overlay sobre o SVG)
 * ============================================================ */
.brain-tooltip {
  position: absolute;
  pointer-events: none;
  background: var(--bg-elevated);
  color: var(--color-text);
  font-size: 0.78rem;
  font-family: var(--font-mono, monospace);
  padding: 0.4rem 0.7rem;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
  z-index: 10;
}

/* ============================================================
 * MOBILE FALLBACK — simplifica pra 3 anéis visíveis
 * ============================================================ */
@media (max-width: 768px) {
  .brain__canvas {
    min-height: 480px;
  }
  /* Esconde modelos hot e projetos pra deixar avatar+workers+cost mais legíveis. */
  .brain-ring--models,
  .brain-ring--projects,
  .brain-health {
    display: none;
  }
  .brain-cost {
    /* recentra cost mais perto do centro do SVG mobile */
    transform: translate(180px, 200px);
  }
  .brain-ring-guide:nth-child(2),
  .brain-ring-guide:nth-child(3) {
    display: none;
  }
}