:root {
  --bg-0: #eef2f6;
  --bg-1: #d7e0e7;
  --ink: #1f2933;
  --panel: #fffaf0;
  --pixel-border: #2f3b45;
  --idle: #7a8794;
  --planning: #d97706;
  --building: #0f766e;
  --review: #0369a1;
  --blocked: #b91c1c;
  --done: #15803d;
  --tile: 8px;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  color: var(--ink);
  font-family: "Courier New", monospace;
  background:
    linear-gradient(90deg, rgba(47, 59, 69, 0.06) 1px, transparent 1px),
    linear-gradient(180deg, rgba(47, 59, 69, 0.06) 1px, transparent 1px),
    linear-gradient(145deg, var(--bg-0), var(--bg-1));
  background-size: 16px 16px, 16px 16px, auto;
  min-height: 100vh;
}

.scanlines {
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.1;
  background-image: repeating-linear-gradient(
    180deg,
    transparent,
    transparent 3px,
    rgba(31, 41, 51, 0.35) 4px
  );
}

.app-shell {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  position: relative;
  z-index: 1;
}

.topbar {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-bottom: 16px;
}

.topbar h1 {
  margin: 0;
  font-size: 28px;
  letter-spacing: 1px;
}

.topbar p {
  margin: 2px 0 0;
  font-size: 14px;
}

.endpoint-form {
  background: var(--panel);
  border: 3px solid var(--pixel-border);
  box-shadow: 6px 6px 0 #88919a;
  padding: 10px;
}

.endpoint-form label {
  font-weight: 700;
  font-size: 12px;
}

.endpoint-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 8px;
  margin-top: 8px;
}

.endpoint-row input,
.endpoint-row button {
  min-height: 36px;
  border: 2px solid var(--pixel-border);
  font-family: inherit;
  font-size: 12px;
}

.endpoint-row input {
  padding: 0 8px;
  background: #fff;
}

.endpoint-row button {
  padding: 0 10px;
  background: #e5e7eb;
  cursor: pointer;
}

.content-grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 14px;
}

.office-room {
  position: relative;
  min-height: 620px;
  overflow: hidden;
  isolation: isolate;
  background: #c8d7e1;
  border: 4px solid var(--pixel-border);
  box-shadow: 8px 8px 0 #707a84;
}

.office-wall,
.office-floor {
  position: absolute;
  inset-inline: 0;
  z-index: 0;
}

.office-wall {
  top: 0;
  height: 36%;
  background:
    linear-gradient(180deg, rgba(248, 250, 252, 0.42), rgba(248, 250, 252, 0.1)),
    url("./assets/vendor/pixel-agents/walls/wall_0.png") repeat;
  background-size: auto, 64px 128px;
  border-bottom: 4px solid rgba(47, 59, 69, 0.45);
}

.office-floor {
  top: 36%;
  bottom: 0;
  background:
    linear-gradient(90deg, rgba(47, 59, 69, 0.12) 1px, transparent 1px),
    linear-gradient(180deg, rgba(47, 59, 69, 0.12) 1px, transparent 1px),
    url("./assets/vendor/pixel-agents/floors/floor_1.png") repeat;
  background-size: 56px 56px, 56px 56px, 16px 16px;
}

.sprite {
  position: absolute;
  display: block;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  pointer-events: none;
  user-select: none;
  z-index: 2;
}

.station {
  position: absolute;
  width: 116px;
  height: 150px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  overflow: visible;
  z-index: 8;
  color: var(--ink);
}

.station h2 {
  position: absolute;
  left: 50%;
  bottom: 17px;
  transform: translateX(-50%);
  min-width: 78px;
  margin: 0;
  padding: 4px 7px;
  border: 2px solid var(--pixel-border);
  background: #fffaf0;
  font-size: 12px;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
  box-shadow: 3px 3px 0 rgba(47, 59, 69, 0.35);
  white-space: nowrap;
}

.agent-sprite {
  left: 50%;
  bottom: 48px;
  width: 84px;
  height: 72px;
  background-image: var(--agent-image);
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: 336px 288px;
  transform: translateX(-50%);
  z-index: 9;
}

.agent-cto {
  --agent-image: url("./assets/vendor/pixel-agents/characters/char_0.png");
}

.agent-builder {
  --agent-image: url("./assets/vendor/pixel-agents/characters/char_1.png");
}

.agent-reviewer {
  --agent-image: url("./assets/vendor/pixel-agents/characters/char_2.png");
}

.agent-verifier {
  --agent-image: url("./assets/vendor/pixel-agents/characters/char_3.png");
}

.agent-devops {
  --agent-image: url("./assets/vendor/pixel-agents/characters/char_4.png");
}

.agent-qa {
  --agent-image: url("./assets/vendor/pixel-agents/characters/char_5.png");
}

.agent-release {
  --agent-image: url("./assets/vendor/pixel-agents/characters/char_0.png");
}

.station::before {
  content: "";
  position: absolute;
  left: 34px;
  right: 34px;
  bottom: 41px;
  height: 8px;
  border-radius: 50%;
  background: rgba(31, 41, 51, 0.24);
  z-index: 7;
}

.station.selected::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  top: 8px;
  bottom: 14px;
  border: 4px solid #111827;
  pointer-events: none;
  z-index: 12;
}

.station:focus-visible::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  top: 8px;
  bottom: 14px;
  border: 4px solid #111827;
  pointer-events: none;
  z-index: 12;
}

.pixel-rack {
  width: 42px;
  height: 62px;
  background: #111827;
  display: grid;
  gap: 4px;
  padding: 5px;
}

.pixel-rack span {
  display: block;
  background: #22c55e;
  border: 2px solid #334155;
}

.pixel-warning {
  position: absolute;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border: 3px solid var(--pixel-border);
  background: #facc15;
  font-weight: 700;
}

.pixel-box {
  position: absolute;
  width: 42px;
  height: 22px;
  border: 3px solid var(--pixel-border);
  background: #a16207;
}

.office-whiteboard {
  left: 40%;
  top: 8%;
  width: 112px;
}

.office-bookshelf {
  right: 4%;
  top: 13%;
  width: 74px;
}

.office-plant.left {
  left: 3%;
  top: 20%;
  width: 64px;
}

.office-plant.right {
  right: 3%;
  bottom: 7%;
  width: 46px;
  z-index: 5;
}

.office-desk {
  width: 132px;
  z-index: 3;
}

.office-desk.cto {
  left: 8%;
  top: 41%;
}

.office-desk.builder {
  left: 31%;
  top: 40%;
  width: 152px;
}

.office-desk.verifier {
  right: 19%;
  top: 42%;
}

.office-desk.devops {
  right: 8%;
  bottom: 22%;
  width: 96px;
}

.office-pc {
  width: 36px;
  z-index: 4;
}

.office-pc.cto {
  left: 14%;
  top: 37%;
}

.office-pc.builder-a {
  left: 37%;
  top: 36%;
}

.office-pc.builder-b {
  left: 42%;
  top: 37%;
  width: 34px;
}

.office-pc.verifier {
  right: 24%;
  top: 38%;
}

.office-pc.devops {
  right: 12%;
  bottom: 32%;
}

.office-table {
  left: 36%;
  bottom: 26%;
  width: 132px;
  z-index: 3;
}

.office-chair.reviewer {
  left: 43%;
  bottom: 22%;
  width: 58px;
  z-index: 2;
}

.office-sofa {
  left: 10%;
  bottom: 12%;
  width: 132px;
  z-index: 3;
}

.office-coffee-table {
  left: 24%;
  bottom: 13%;
  width: 70px;
  z-index: 5;
}

.office-rack {
  right: 4%;
  bottom: 26%;
  z-index: 3;
}

.office-box {
  left: 55%;
  bottom: 10%;
  z-index: 4;
}

.office-warning {
  left: 25%;
  bottom: 24%;
  z-index: 6;
}

.person-cto {
  left: 8%;
  top: 35%;
}

.person-builder {
  left: 34%;
  top: 34%;
}

.person-reviewer {
  left: 43%;
  bottom: 24%;
}

.person-verifier {
  right: 19%;
  top: 36%;
}

.person-devops {
  right: 6%;
  bottom: 23%;
}

.person-qa {
  left: 10%;
  bottom: 15%;
}

.person-release {
  left: 57%;
  bottom: 10%;
}

.agent-release {
  filter: hue-rotate(96deg) saturate(1.15);
}

.station-state {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  margin: 0;
  padding: 3px 6px;
  border: 2px solid currentColor;
  background: #f8fafc;
  color: var(--idle);
  font-size: 11px;
  line-height: 1;
  font-weight: 700;
  text-transform: uppercase;
  white-space: nowrap;
}

.station-task {
  position: absolute;
  left: 50%;
  bottom: -34px;
  transform: translateX(-50%);
  width: min(180px, 42vw);
  margin: 0;
  padding: 5px 6px;
  border: 2px solid var(--pixel-border);
  background: #fff;
  font-size: 11px;
  line-height: 1.2;
  opacity: 0;
  pointer-events: none;
  text-align: center;
  box-shadow: 3px 3px 0 rgba(47, 59, 69, 0.3);
  transition: opacity 120ms ease;
}

.station:hover .station-task,
.station:focus-visible .station-task,
.station.selected .station-task,
.station.has-task .station-task {
  opacity: 1;
  z-index: 13;
}

.station.state-idle .station-state {
  color: var(--idle);
}

.station.state-planning .station-state {
  color: var(--planning);
  background: #ffedd5;
}

.station.state-building .station-state {
  color: var(--building);
  background: #ccfbf1;
}

.station.state-review .station-state {
  color: var(--review);
  background: #dbeafe;
}

.station.state-blocked .station-state {
  color: var(--blocked);
  background: #fee2e2;
}

.station.state-done .station-state {
  color: var(--done);
  background: #dcfce7;
}

.station.state-planning .agent-sprite,
.station.state-building .agent-sprite,
.station.state-review .agent-sprite {
  filter: drop-shadow(0 0 0 #facc15) drop-shadow(0 -5px 0 rgba(250, 204, 21, 0.8));
}

.station.has-task .agent-sprite {
  animation: bob 1.2s steps(2, end) infinite;
}

@keyframes bob {
  0%, 100% { transform: translate(-50%, 0); }
  50% { transform: translate(-50%, -3px); }
}

.status-panel {
  display: grid;
  gap: 10px;
}

.panel-block {
  background: var(--panel);
  border: 3px solid var(--pixel-border);
  box-shadow: 6px 6px 0 #88919a;
  padding: 10px;
}

.panel-block h2 {
  margin: 0 0 8px;
  font-size: 12px;
  text-transform: uppercase;
}

.kv-list,
.data-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}

.kv-list li,
.data-list li {
  display: grid;
  gap: 2px;
  border: 1px dashed #a3acb5;
  padding: 6px;
  font-size: 11px;
  background: #fff;
}

.kv-list span {
  opacity: 0.8;
}

.kv-list strong {
  font-size: 12px;
}

.data-list .item-main {
  font-weight: 700;
}

.data-list .item-sub {
  opacity: 0.75;
}

.notice {
  color: var(--blocked);
}

.station-detail {
  display: grid;
  gap: 8px;
  font-size: 11px;
}

.detail-title {
  font-weight: 700;
  text-transform: uppercase;
}

.detail-meta,
.detail-section span {
  opacity: 0.75;
}

.detail-section {
  display: grid;
  gap: 4px;
  border: 1px dashed #a3acb5;
  background: #fff;
  padding: 8px;
}

.detail-section p {
  margin: 0;
}

.detail-section pre {
  margin: 4px 0 0;
  max-height: 220px;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
  background: #111827;
  color: #f9fafb;
  border: 2px solid var(--pixel-border);
  padding: 8px;
  font-family: inherit;
  font-size: 11px;
}

@media (max-width: 900px) {
  .content-grid {
    grid-template-columns: 1fr;
  }

  .office-room {
    min-height: 720px;
  }

  .endpoint-row {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 901px) and (max-width: 1100px) {
  .office-room {
    min-height: 680px;
  }
}