*{box-sizing:border-box;margin:0;padding:0}
body{font-family:"Courier New",monospace;background:#0f172a;color:#e2e8f0;height:100vh;overflow:hidden}
.layout{display:flex;height:100vh}
.sidebar{width:200px;background:#0d1b2e;border-right:1px solid #1e3a5f;display:flex;flex-direction:column;padding:20px 0}
.logo{display:flex;align-items:center;gap:8px;padding:0 20px 24px;border-bottom:1px solid #1e3a5f;font-size:14px;font-weight:bold;color:#38bdf8}
.logo-icon{font-size:20px}
.nav-item{display:block;padding:10px 20px;color:#94a3b8;text-decoration:none;font-size:13px;transition:all .2s}
.nav-item:hover,.nav-item.active{color:#38bdf8;background:#1e3a5f22}
.nav-item.disabled{opacity:.4;pointer-events:none}
.sidebar-footer{margin-top:auto;padding:20px}
.badge{font-size:11px;padding:4px 8px;border-radius:4px}
.badge.online{color:#4ade80}
.badge.offline{color:#f87171}
.main{flex:1;overflow-y:auto;padding:24px}
.main-header{margin-bottom:24px}
.main-header h1{font-size:22px;color:#f1f5f9}
.subtitle{color:#64748b;font-size:12px;margin-top:4px}
.metrics-row{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:20px}
.metric-card{background:#1e293b;border:1px solid #1e3a5f;border-radius:8px;padding:16px;display:flex;flex-direction:column;gap:4px}
.metric-label{font-size:11px;color:#64748b;text-transform:uppercase}
.metric-value{font-size:28px;font-weight:bold;color:#38bdf8}
.metric-value.small{font-size:13px;margin-top:4px}
.metric-sub{font-size:11px;color:#475569}
.content-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.office-card,.activity-card{background:#1e293b;border:1px solid #1e3a5f;border-radius:8px;padding:16px}
.office-card h2,.activity-card h2{font-size:13px;color:#94a3b8;margin-bottom:12px;text-transform:uppercase;letter-spacing:1px}

/* ===== OFFICE ROOM ===== */
.office-room{
  position:relative;
  width:100%;height:260px;
  border-radius:6px;overflow:hidden;
  background-color:#c8b89a;
  background-image:
    linear-gradient(rgba(0,0,0,0.07) 1px,transparent 1px),
    linear-gradient(90deg,rgba(0,0,0,0.07) 1px,transparent 1px);
  background-size:20px 20px;
  border:3px solid #8B7355;
  image-rendering:pixelated;
}
.office-room::after{
  content:"";position:absolute;inset:0;
  border:5px solid #6b8f5e;
  border-bottom-color:#4a6b42;border-right-color:#4a6b42;
  pointer-events:none;z-index:1;border-radius:3px;
}

/* ===== FURNITURE ===== */
.furn{position:absolute;z-index:2}

/* Bookshelf top-left */
.furn-shelf{
  top:12px;left:12px;width:54px;height:80px;
  background:#8B6914;border:3px solid #5C4410;border-radius:2px;
}
.furn-shelf::before{content:"📁";position:absolute;top:4px;left:8px;font-size:11px}
.furn-shelf::after{
  content:"";position:absolute;
  top:28px;left:4px;right:4px;height:3px;
  background:#5C4410;
  box-shadow:0 20px 0 #5C4410,0 40px 0 #5C4410;
}

/* Desks */
.furn-desk{width:88px;height:64px}
#furn-desk-pepe{top:16px;right:16px}
.furn-desk-2{top:118px;right:16px}
.furn-desk-3{bottom:22px;left:88px}

.desk-top{
  position:absolute;bottom:0;left:0;right:0;height:36px;
  background:#A0522D;border:3px solid #6B3A1F;border-radius:2px;
}
.desk-chair{
  position:absolute;bottom:-16px;left:50%;transform:translateX(-50%);
  width:24px;height:24px;
  background:#DC2626;border:3px solid #991B1B;border-radius:50%;
}
.chair-empty{background:#475569;border-color:#334155}
.desk-monitor{
  position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:30px;height:24px;
  background:#38bdf8;border:3px solid #0284c7;border-radius:2px;
  box-shadow:0 0 8px #38bdf880;
  animation:monitor-glow 2s ease-in-out infinite;
}
.desk-monitor.off{background:#1e293b;border-color:#334155;box-shadow:none;animation:none}
.desk-empty-badge{
  position:absolute;top:44%;left:50%;transform:translate(-50%,-50%);
  font-size:20px;color:#64748b;font-weight:bold;
  animation:blink 1.5s step-end infinite;z-index:3;
}
.furn-desk-2 .desk-empty-badge,.furn-desk-3 .desk-empty-badge{display:block}

/* Coffee */
.furn-coffee{
  bottom:16px;right:16px;width:40px;height:40px;
  background:#334155;border:2px solid #475569;border-radius:4px;
  font-size:22px;display:flex;align-items:center;justify-content:center;
}

/* Plants */
.furn-plant{font-size:22px;line-height:1}
.furn-pl1{bottom:10px;left:10px}
.furn-pl2{top:98px;left:10px}
.furn-pl3{bottom:10px;right:62px}

/* ===== CHARACTER ===== */
.agent-char{
  position:absolute;top:0;left:0;
  display:flex;flex-direction:column;align-items:center;
  z-index:20;pointer-events:none;
}
.char-name{
  font-size:9px;color:#38bdf8;
  background:rgba(15,23,42,0.9);
  padding:2px 6px;border-radius:3px;
  white-space:nowrap;margin-bottom:2px;
  font-family:"Courier New",monospace;
  border:1px solid #38bdf840;letter-spacing:.5px;
}
.char-figure{
  display:flex;flex-direction:column;align-items:center;
  image-rendering:pixelated;
}
.char-head{
  width:14px;height:14px;
  background:#fbbf24;border:2px solid #78350f;border-radius:2px;
  position:relative;
}
.char-head::after{
  content:"";position:absolute;
  top:5px;left:3px;
  width:2px;height:2px;background:#78350f;
  box-shadow:4px 0 0 #78350f,1px 5px 0 #78350f,2px 5px 0 #78350f;
}
.char-body{
  width:16px;height:10px;
  background:#1d4ed8;border:2px solid #1e3a8a;
  margin-top:1px;border-radius:1px;
}
.char-legs{
  width:16px;height:8px;
  background:#1f2937;border:2px solid #111827;margin-top:1px;
}
.char-dot{
  width:7px;height:7px;border-radius:50%;
  background:#4ade80;margin-top:3px;
  animation:pulse 2s infinite;
}
.char-dot.offline{background:#f87171;animation:none}

/* ===== ANIMATIONS ===== */

/* Walk path through center of room */
@keyframes walk-idle{
  0%  {transform:translate(125px,125px)}
  12% {transform:translate(170px,100px)}
  25% {transform:translate(205px,120px)}
  37% {transform:translate(185px,165px)}
  50% {transform:translate(128px,180px)}
  62% {transform:translate(82px,162px)}
  75% {transform:translate(74px,118px)}
  87% {transform:translate(102px,95px)}
  100%{transform:translate(125px,125px)}
}
@keyframes walk-bob{
  0%,100%{transform:translateY(0) scaleX(1)}
  50%{transform:translateY(-3px) scaleX(1)}
}
@keyframes typing-bob{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-1px)}
}
@keyframes monitor-glow{
  0%,100%{box-shadow:0 0 6px #38bdf880}
  50%{box-shadow:0 0 18px #38bdf8cc}
}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}

.agent-char[data-state="idle"]{
  animation:walk-idle 20s ease-in-out infinite;
}
.agent-char[data-state="idle"] .char-figure{
  animation:walk-bob 0.45s steps(2) infinite;
}
.agent-char[data-state="working"] .char-figure{
  animation:typing-bob 0.35s steps(2) infinite;
}

/* ===== ACTIVITY FEED ===== */
.activity-feed{display:flex;flex-direction:column;gap:8px}
.activity-item{
  display:flex;align-items:center;gap:10px;
  padding:8px 10px;background:#0f172a;
  border-radius:6px;border-left:3px solid #1e3a5f;font-size:12px;
}
.activity-item.heartbeat{border-left-color:#38bdf8}
.activity-item.message{border-left-color:#4ade80}
.activity-item.error{border-left-color:#f87171}
.activity-icon{font-size:16px}
.activity-text{flex:1;color:#cbd5e1}
.activity-ago{font-size:10px;color:#475569;white-space:nowrap}
.activity-loading{color:#475569;font-size:12px;text-align:center;padding:20px}
.updated-at{font-size:10px;color:#334155;margin-top:12px;text-align:right}