/* ═══ AgentsTown Pixel — retro game design system ═══ */
:root {
  --bg0: #0b0b1e;
  --bg1: #12122b;
  --panel: #1a1a38;
  --panel2: #23234a;
  --line: #3d3d6b;
  --hi: #6b6bb0;
  --text: #eeeefc;
  --muted: #9a9ecb;
  --green: #00e436;
  --blue: #29adff;
  --yellow: #ffec27;
  --red: #ff004d;
  --orange: #ffa300;
  --pink: #ff77a8;
  --cyan: #00ffcc;
  --gray: #c2c3c7;
  --px-font: 'Press Start 2P', 'Chakra Petch', monospace;
  --th-font: 'Chakra Petch', sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--th-font);
  color: var(--text);
  background:
    radial-gradient(1px 1px at 15% 20%, #ffffff55 50%, transparent 51%),
    radial-gradient(1px 1px at 65% 8%, #ffffff44 50%, transparent 51%),
    radial-gradient(2px 2px at 85% 30%, #ffec2733 50%, transparent 51%),
    radial-gradient(1px 1px at 35% 55%, #ffffff33 50%, transparent 51%),
    radial-gradient(1px 1px at 92% 70%, #29adff33 50%, transparent 51%),
    radial-gradient(1px 1px at 8% 82%, #ffffff2e 50%, transparent 51%),
    linear-gradient(180deg, var(--bg0) 0%, var(--bg1) 60%, #171735 100%);
  background-attachment: fixed;
  image-rendering: pixelated;
}

/* CRT scanlines */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.14) 0 1px, transparent 1px 3px);
  z-index: 9999;
}

.container { max-width: 1280px; margin: 0 auto; padding: 16px 16px 80px; }

/* ── sticky jump navbar ── */
.navbar {
  position: sticky;
  top: 0;
  z-index: 500;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  padding: 10px 12px;
  margin: 0 -16px 18px;
  background: #08081aee;
  border-bottom: 3px solid #000;
  box-shadow: 0 3px 0 var(--line);
  backdrop-filter: blur(2px);
}
.navbar .nav-brand {
  font-family: var(--px-font);
  font-size: 11px;
  color: var(--yellow);
  text-shadow: 2px 2px 0 var(--red);
  margin-right: 6px;
}
.navbar a.jump {
  font-family: var(--px-font);
  font-size: 8px;
  color: var(--cyan);
  text-decoration: none;
  padding: 6px 8px;
  border: 2px solid #000;
  background: var(--panel2);
  box-shadow: 2px 2px 0 #000;
}
.navbar a.jump:hover { background: var(--cyan); color: #052; }
.navbar .spacer { flex: 1; }

/* ── department tab chips ── */
.tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.tab {
  font-family: var(--px-font);
  font-size: 8px;
  letter-spacing: .5px;
  padding: 7px 9px;
  border: 2px solid #000;
  background: #0a0a20;
  color: var(--muted);
  box-shadow: 2px 2px 0 #000;
  cursor: pointer;
  text-transform: uppercase;
  user-select: none;
}
.tab:hover { color: var(--text); }
.tab.on { background: var(--yellow); color: #221; box-shadow: 2px 2px 0 var(--red); }

/* ── pixel title ── */
.px-logo {
  font-family: var(--px-font);
  font-size: clamp(18px, 4vw, 30px);
  color: var(--yellow);
  text-shadow: 3px 3px 0 var(--red), 6px 6px 0 #00000088;
  letter-spacing: 2px;
  margin: 0;
  line-height: 1.4;
}
.px-sub {
  font-family: var(--px-font);
  font-size: 9px;
  color: var(--cyan);
  letter-spacing: 1px;
  margin: 10px 0 0;
}
.px-sub-th { color: var(--muted); font-size: 14px; margin: 8px 0 0; }

/* town skyline divider */
.skyline {
  height: 42px;
  margin: 18px 0 26px;
  background:
    linear-gradient(0deg, #000 0 6px, transparent 6px),
    repeating-linear-gradient(90deg,
      #1f1f42 0 26px, #2a2a55 26px 30px,
      #16163a 30px 58px, #2a2a55 58px 62px,
      #23234a 62px 96px, #2a2a55 96px 100px),
    repeating-linear-gradient(90deg,
      transparent 0 8px, #ffec2722 8px 12px, transparent 12px 34px,
      #29adff22 34px 38px, transparent 38px 60px);
  border-bottom: 3px solid #000;
  box-shadow: 0 3px 0 var(--line);
  clip-path: polygon(0 40%, 6% 40%, 6% 12%, 14% 12%, 14% 32%, 22% 32%, 22% 0, 31% 0, 31% 24%, 40% 24%, 40% 10%, 50% 10%, 50% 36%, 58% 36%, 58% 18%, 67% 18%, 67% 4%, 76% 4%, 76% 28%, 85% 28%, 85% 14%, 93% 14%, 93% 38%, 100% 38%, 100% 100%, 0 100%);
}

/* ── game window ── */
.win {
  background: var(--panel);
  border: 3px solid #000;
  box-shadow: 0 0 0 3px var(--line), 8px 8px 0 rgba(0, 0, 0, .45);
  margin-bottom: 26px;
  scroll-margin-top: 64px;
}
.win-title {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: linear-gradient(180deg, var(--panel2), var(--panel));
  border-bottom: 3px solid #000;
  font-family: var(--px-font);
  font-size: 11px;
  letter-spacing: 1px;
  color: var(--yellow);
  text-shadow: 2px 2px 0 #000;
}
.win-title .dots { margin-left: auto; display: flex; gap: 6px; }
.win-title .dots i {
  width: 10px; height: 10px; display: block;
  border: 2px solid #000;
}
.win-title .dots i:nth-child(1) { background: var(--green); }
.win-title .dots i:nth-child(2) { background: var(--yellow); }
.win-title .dots i:nth-child(3) { background: var(--red); }
.win-body { padding: 18px 16px; }

/* ── grid / cards ── */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }

.item {
  background: var(--bg1);
  border: 3px solid #000;
  box-shadow: 0 0 0 2px var(--line);
  padding: 11px;
  position: relative;
  transition: transform .08s steps(2);
}
.item:hover { transform: translate(-2px, -2px); box-shadow: 0 0 0 2px var(--hi), 4px 4px 0 #000; }
.item h3 {
  margin: 6px 0 2px;
  font-family: var(--px-font);
  font-size: 9px;
  color: var(--text);
  letter-spacing: .3px;
  line-height: 1.5;
}
.item .role { font-family: var(--px-font); font-size: 7px; color: var(--muted); margin: 0 0 4px; }
.item .tagline { font-size: 12px; color: var(--muted); margin: 5px 0; line-height: 1.45; }

.card-head { display: flex; align-items: flex-start; gap: 9px; }
.card-head .who { flex: 1; min-width: 0; }

/* pixel avatar */
canvas.avatar {
  width: 42px; height: 42px;
  image-rendering: pixelated;
  border: 3px solid #000;
  box-shadow: 0 0 0 2px var(--line);
  background: var(--panel2);
  flex-shrink: 0;
}
canvas.avatar.working { animation: hop .5s steps(2) infinite; }
@keyframes hop { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }

/* ── dept badge ── */
.badge {
  display: inline-block;
  font-family: var(--px-font);
  font-size: 8px;
  padding: 4px 7px;
  border: 2px solid #000;
  color: #08081a;
  letter-spacing: 1px;
  text-transform: uppercase;
  box-shadow: 2px 2px 0 #00000066;
}
.badge.exec { background: var(--red); color: #fff; }
.badge.dev { background: var(--blue); }
.badge.design { background: var(--pink); }
.badge.marketing { background: var(--orange); }
.badge.social { background: var(--cyan); }
.badge.finance { background: var(--yellow); }
.badge.ops { background: var(--green); }
.badge.legal { background: var(--gray); }

/* ── status LED ── */
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--px-font);
  font-size: 8px;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 5px 8px;
  border: 2px solid #000;
  background: #0a0a20;
  margin: 8px 0;
}
.status-pill::before {
  content: '';
  width: 8px; height: 8px;
  border: 1px solid #000;
}
.status-pill.active   { color: var(--green); }  .status-pill.active::before   { background: var(--green); }
.status-pill.working  { color: var(--blue); }   .status-pill.working::before  { background: var(--blue); animation: blink .5s steps(1) infinite; }
.status-pill.running  { color: var(--blue); }   .status-pill.running::before  { background: var(--blue); animation: blink .5s steps(1) infinite; }
.status-pill.standby  { color: var(--muted); }  .status-pill.standby::before  { background: var(--muted); }
.status-pill.queued   { color: var(--muted); }  .status-pill.queued::before   { background: var(--muted); animation: blink 1s steps(1) infinite; }
.status-pill.paused   { color: var(--orange); } .status-pill.paused::before   { background: var(--orange); }
.status-pill.error    { color: var(--red); }    .status-pill.error::before    { background: var(--red); animation: blink .3s steps(1) infinite; }
.status-pill.done     { color: var(--green); }  .status-pill.done::before     { background: var(--green); }
.status-pill.offboarded { color: #666; }        .status-pill.offboarded::before { background: #666; }
@keyframes blink { 50% { opacity: .15; } }

/* capabilities chip */
.caps {
  font-size: 11px;
  color: var(--cyan);
  background: #0a2028;
  border: 2px solid #000;
  box-shadow: 0 0 0 1px #0e4a5a;
  padding: 5px 7px;
  margin: 6px 0;
  line-height: 1.7;
  word-break: break-all;
}

/* ── buttons / inputs ── */
button, .btn {
  font-family: var(--px-font);
  font-size: 9px;
  letter-spacing: 1px;
  padding: 9px 12px 8px;
  color: #06230d;
  background: var(--green);
  border: 3px solid #000;
  box-shadow: 3px 3px 0 #000, inset -3px -3px 0 #00000033;
  cursor: pointer;
  text-transform: uppercase;
}
button:hover { filter: brightness(1.12); }
button:active { transform: translate(3px, 3px); box-shadow: 0 0 0 #000, inset -3px -3px 0 #00000033; }
button.secondary { background: var(--blue); color: #05192b; }
button.danger { background: var(--red); color: #fff; }

select, input[type="text"], textarea {
  font-family: var(--th-font);
  font-size: 14px;
  padding: 10px;
  background: #12142a; /* พื้นเข้มเรียบ สบายตา — ไม่โดนลาย scanline เพราะกลืนกับโทนหน้า */
  color: var(--text);
  border: 3px solid #000;
  box-shadow: 0 0 0 2px var(--line);
  outline: none;
}
textarea { line-height: 1.7; resize: vertical; }
input[type="text"]:focus, select:focus, textarea:focus { box-shadow: 0 0 0 2px var(--cyan); background: #161936; }

.controls { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; align-items: center; }
.controls input[type="text"] { flex: 1; min-width: 120px; }

/* ── ช่องมอบงาน ── */
.assign { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.assign button { align-self: flex-start; }

/* ── arcade stats ── */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; }
.stat {
  background: #0a0a20;
  border: 3px solid #000;
  box-shadow: 0 0 0 2px var(--line);
  padding: 14px 10px 12px;
  text-align: center;
}
.stat .num {
  font-family: var(--px-font);
  font-size: 26px;
  color: var(--yellow);
  text-shadow: 2px 2px 0 var(--red);
}
.stat .label { font-size: 12px; color: var(--muted); margin-top: 8px; }

/* ── tables ── */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th {
  font-family: var(--px-font);
  font-size: 8px;
  letter-spacing: 1px;
  color: var(--cyan);
  text-transform: uppercase;
  padding: 8px 10px;
  border-bottom: 3px solid #000;
  text-align: left;
}
td { padding: 9px 10px; border-bottom: 2px solid #22224a; }

/* ── tasks ── */
.task-item {
  background: var(--bg1);
  border: 3px solid #000;
  box-shadow: 0 0 0 2px var(--line);
  padding: 12px 14px;
  margin-bottom: 14px;
}
.task-item summary { cursor: pointer; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; list-style: none; }
.task-item summary::-webkit-details-marker { display: none; }
.task-item summary::after { content: '▼'; font-size: 10px; color: var(--muted); margin-left: auto; }
.task-item[open] summary::after { content: '▲'; }
.task-name { font-family: var(--px-font); font-size: 9px; color: var(--text); }
.task-result {
  margin-top: 12px;
  padding: 12px;
  background: #050510;
  border: 2px solid #000;
  box-shadow: 0 0 0 1px #1c3a1c;
  white-space: pre-wrap;
  font-size: 13px;
  line-height: 1.65;
  max-height: 420px;
  overflow-y: auto;
  color: #b8f5c0;
}
.task-error { color: #ff9caf; box-shadow: 0 0 0 1px #5a1c28; }

/* ── console log feed ── */
.feed {
  list-style: none;
  padding: 12px;
  margin: 0;
  background: #050510;
  border: 3px solid #000;
  box-shadow: 0 0 0 2px var(--line);
  font-family: 'Courier New', monospace;
  font-size: 12.5px;
  max-height: 380px;
  overflow-y: auto;
}
.feed li { padding: 6px 0; border-bottom: 1px dashed #1e1e40; color: #9de8a8; }
.feed li strong { color: var(--cyan); }
.feed .time { color: #4a4a7a; font-size: 11px; }
.feed li::before { content: '> '; color: var(--green); }

.muted { color: var(--muted); font-size: 13px; }
.topbar { display: flex; justify-content: space-between; align-items: flex-end; gap: 14px; flex-wrap: wrap; }
.topbar a {
  font-family: var(--px-font);
  font-size: 9px;
  color: var(--cyan);
  text-decoration: none;
  border-bottom: 2px solid var(--cyan);
  padding-bottom: 2px;
}
.topbar a:hover { color: var(--yellow); border-color: var(--yellow); }
.filter-row { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }

.hire-status { margin-top: 10px; font-size: 13px; color: var(--green); min-height: 18px; }
.tier { font-family: var(--px-font); font-size: 8px; color: var(--orange); letter-spacing: 1px; }

/* footer coin */
.coin-footer {
  text-align: center;
  font-family: var(--px-font);
  font-size: 9px;
  color: var(--muted);
  padding: 20px 0 6px;
  letter-spacing: 1px;
}
.coin-footer .coin { color: var(--yellow); animation: blink 1s steps(1) infinite; }

/* ── agent tooltip ── */
#agent-tip {
  display: none;
  position: fixed;
  z-index: 3000;
  max-width: 320px;
  padding: 12px 14px;
  background: #12142a;
  color: var(--text);
  border: 3px solid #000;
  box-shadow: 0 0 0 2px var(--cyan), 6px 6px 0 #000a;
  font-family: var(--th-font);
  font-size: 13px;
  line-height: 1.55;
  pointer-events: none;
}
#agent-tip .tip-title { font-family: var(--px-font); font-size: 10px; color: var(--yellow); margin-bottom: 7px; letter-spacing: 1px; }
#agent-tip .tip-role { color: var(--muted); font-family: var(--th-font); font-size: 12px; letter-spacing: 0; }
#agent-tip .tip-desc { color: var(--text); margin-bottom: 6px; }
#agent-tip .tip-line { color: var(--muted); font-size: 12px; }
#agent-tip .tip-cap-head { color: var(--green, #00e436); margin-top: 6px; }
#agent-tip .tip-tools { display: flex; flex-direction: column; gap: 2px; margin-top: 3px; }
#agent-tip .tip-tools span { color: #9fe8c8; font-size: 12px; }
#agent-tip .tip-ok { color: #00e436; margin-top: 6px; }
#agent-tip .tip-warn { color: var(--yellow); margin-top: 6px; }
.card-head { cursor: help; }

/* ── ไกด์ประจำเมือง (มุมขวาล่าง) ── */
#guide-fab {
  position: fixed; right: 18px; bottom: 18px; z-index: 2500;
  width: 54px; height: 54px; font-size: 24px; padding: 0;
  background: var(--yellow); color: #221;
  border: 3px solid #000; box-shadow: 0 0 0 2px var(--red), 4px 4px 0 #000a;
  animation: guide-idle 3s ease-in-out infinite;
}
@keyframes guide-idle { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
#guide-panel {
  position: fixed; right: 18px; bottom: 84px; z-index: 2500;
  width: min(390px, calc(100vw - 36px));
}
#guide-log {
  max-height: min(46vh, 420px); overflow-y: auto;
  display: flex; flex-direction: column; gap: 8px; padding-right: 4px;
}
.guide-msg { font-size: 13px; line-height: 1.55; padding: 8px 11px; border: 2px solid #000; max-width: 95%; }
.guide-msg.assistant { background: #12142a; color: var(--text); align-self: flex-start; box-shadow: 2px 2px 0 #0008; }
.guide-msg.user { background: var(--blue); color: #05192b; align-self: flex-end; box-shadow: 2px 2px 0 #0008; }
.guide-suggest {
  border: 2px solid #000; box-shadow: 0 0 0 2px var(--line);
  background: #10122a; padding: 9px 11px; font-size: 13px;
}
.guide-suggest .gs-head { color: var(--yellow); }
.guide-suggest .gs-reason { color: var(--muted); margin: 3px 0; }
.guide-suggest .gs-task { color: #9fe8c8; background: #0a0a20; border: 2px solid #000; padding: 6px 8px; margin: 6px 0; }
.guide-suggest .gs-actions { display: flex; gap: 8px; align-items: center; margin-top: 6px; }
.guide-suggest .gs-hired { color: var(--green); font-size: 12px; }
#guide-quick { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.guide-qbtn { font-size: 8px !important; padding: 7px 9px !important; }
#guide-bubble {
  position: fixed; right: 18px; bottom: 84px; z-index: 2499;
  max-width: 290px; padding: 11px 13px; cursor: pointer;
  background: var(--yellow); color: #221; font-size: 13px; line-height: 1.5;
  border: 3px solid #000; box-shadow: 4px 4px 0 #000a;
  font-family: var(--th-font);
}
#guide-bubble .gb-arrow {
  position: absolute; right: 18px; bottom: -12px;
  border: 6px solid transparent; border-top-color: #000;
}
#guide-input { font-size: 13px; }

/* ── FLOW: โหนดต่อเส้น (สายพานงาน) ── */
.flow-chain {
  display: flex; align-items: center; gap: 0;
  overflow-x: auto; padding: 14px 6px;
}
.flow-node {
  flex-shrink: 0; width: 118px; text-align: center;
  border: 3px solid #000; box-shadow: 0 0 0 2px var(--line);
  background: #10122a; padding: 10px 8px;
}
.flow-node canvas.avatar { width: 36px; height: 36px; }
.flow-node .fn-name { font-family: var(--px-font); font-size: 7px; color: var(--text); margin-top: 6px; line-height: 1.6; word-break: break-word; }
.flow-node .fn-step { font-size: 11px; color: var(--muted); margin-top: 3px; }
.flow-node.running { box-shadow: 0 0 0 2px var(--yellow); animation: flow-blink 0.8s steps(2) infinite; }
.flow-node.done { box-shadow: 0 0 0 2px var(--green); }
.flow-node.error { box-shadow: 0 0 0 2px var(--red); }
@keyframes flow-blink { 50% { box-shadow: 0 0 0 2px var(--orange); } }
.flow-link {
  flex-shrink: 0; width: 42px; height: 4px; position: relative; margin: 0 2px;
  background: repeating-linear-gradient(90deg, var(--line) 0 6px, transparent 6px 10px);
}
.flow-link::after {
  content: '▶'; position: absolute; right: -4px; top: -8px;
  font-size: 10px; color: var(--line);
}
.flow-link.live { background: repeating-linear-gradient(90deg, var(--cyan) 0 6px, transparent 6px 10px); animation: flow-dash 0.5s linear infinite; }
.flow-link.live::after { color: var(--cyan); }
@keyframes flow-dash { from { background-position-x: 0; } to { background-position-x: 10px; } }