:root{
  --bg: #f6f7fb;
  --panel: #ffffff;
  --panel2: #fbfcff;
  --text: #0f172a;
  --muted: #64748b;
  --border: #e5e7eb;
  --shadow: 0 1px 2px rgba(0,0,0,0.05);
  --accent: #2563eb;
  --ok-bg: #e7f8ef;
  --ok-fg: #166534;
  --warn-bg:#fff2cc;
  --warn-fg:#92400e;
  --note-bg:#e5e7eb;
  --note-fg:#374151;
  --danger-bg:#fee2e2;
  --danger-fg:#991b1b;
  --radius: 12px;
}

@media (prefers-color-scheme: dark){
  :root{
    --bg:#0b1220;
    --panel:#0f172a;
    --panel2:#111c33;
    --text:#e5e7eb;
    --muted:#94a3b8;
    --border:#22304a;
    --shadow: 0 1px 2px rgba(0,0,0,0.35);
    --accent:#60a5fa;
    --ok-bg:#12321f;
    --ok-fg:#86efac;
    --warn-bg:#3a2a05;
    --warn-fg:#fcd34d;
    --note-bg:#1f2937;
    --note-fg:#cbd5e1;
    --danger-bg:#3b1212;
    --danger-fg:#fca5a5;
  }
}

*{ box-sizing: border-box; }
html, body{ height: 100%; }
body{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  margin: 0;
  color: var(--text);
  background: var(--bg);
}

header{
  position: sticky;
  top: 0;
  z-index: 10;
  background: linear-gradient(180deg, var(--panel) 0%, var(--panel) 65%, rgba(0,0,0,0) 100%);
  border-bottom: 1px solid var(--border);
}

.header-inner{
  display:flex;
  gap: 14px;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
}

.brand{ display:flex; flex-direction: column; gap: 2px; }
.brand h1{ margin:0; font-size: 16px; letter-spacing: 0.2px; }
.brand .sub{ font-size: 12px; color: var(--muted); }

.header-actions{ display:flex; align-items:center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }

.pill{
  display:inline-flex;
  gap: 6px;
  align-items:center;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(255,255,255,0.04);
  font-size: 12px;
  color: var(--muted);
}

.btn{
  border: 1px solid var(--border);
  background: var(--panel2);
  color: var(--text);
  padding: 7px 10px;
  border-radius: 10px;
  font-size: 12px;
  cursor: pointer;
}
.btn.primary{ border-color: color-mix(in oklab, var(--accent), var(--border)); color: var(--text); }
.btn:active{ transform: translateY(1px); }

a{ color: var(--accent); text-decoration: none; }
a:hover{ text-decoration: underline; }

main{ padding: 14px 16px 22px; max-width: 1400px; margin: 0 auto; }

.kpis{ display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; margin-bottom: 12px; }
.kpi{ background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 10px 12px; }
.kpi .label{ font-size: 11px; color: var(--muted); margin-bottom: 6px; }
.kpi .value{ font-size: 18px; font-weight: 700; letter-spacing: 0.2px; }
.kpi .hint{ font-size: 11px; color: var(--muted); margin-top: 4px; }

.tabs{ display:flex; gap: 8px; margin: 12px 0; flex-wrap: wrap; }
.tab{
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text);
  padding: 7px 10px;
  border-radius: 999px;
  font-size: 12px;
  cursor:pointer;
}
.tab.active{ border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in oklab, var(--accent), transparent 80%); }

.card{
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.card-head{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--panel2);
}
.card h2{ margin:0; font-size: 14px; }

.badge{
  background: color-mix(in oklab, var(--accent), transparent 85%);
  color: var(--accent);
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 12px;
  margin-left: 6px;
}

.controls{ display:flex; gap: 10px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.controls label{ font-size: 12px; color: var(--muted); }
.controls select, .controls input{
  margin-left: 6px;
  padding: 6px 8px;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text);
  border-radius: 10px;
  font-size: 12px;
  outline: none;
}

.table-wrap{ padding: 10px 12px; overflow:auto; }

table{ border-collapse: separate; border-spacing: 0; width: 100%; min-width: 820px; }
th, td{ padding: 8px 10px; font-size: 12px; vertical-align: top; border-bottom: 1px solid var(--border); }
th{ text-align: left; font-size: 11px; color: var(--muted); background: transparent; position: sticky; top: 0; }
tr:hover td{ background: color-mix(in oklab, var(--panel2), transparent 70%); }

.tag{ display:inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11px; border:1px solid var(--border); }
.tag.ok{ background: var(--ok-bg); color: var(--ok-fg); border-color: color-mix(in oklab, var(--ok-fg), var(--border) 80%); }
.tag.warn{ background: var(--warn-bg); color: var(--warn-fg); border-color: color-mix(in oklab, var(--warn-fg), var(--border) 80%); }
.tag.note{ background: var(--note-bg); color: var(--note-fg); }
.tag.danger{ background: var(--danger-bg); color: var(--danger-fg); border-color: color-mix(in oklab, var(--danger-fg), var(--border) 80%); }

.mono{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 11px; white-space: pre-wrap; word-break: break-word; color: var(--muted); }

.hidden{ display:none !important; }

@media (max-width: 980px){
  .kpis{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  table{ min-width: 740px; }
}
@media (max-width: 520px){
  .kpis{ grid-template-columns: 1fr; }
}

/* No Limit view layout */
.subgrid{ display:grid; grid-template-columns: 1.2fr 0.8fr; gap: 12px; }
.stack{ display:grid; gap: 12px; }
@media (max-width: 980px){
  .subgrid{ grid-template-columns: 1fr; }
}

/* ── JAOS Command Center ────────────────────────────────────────── */

/* Sub-tabs */
.cc-tabs{ display:flex; align-items:center; gap:4px; flex-wrap:wrap; margin:.75rem 0 1rem; border-bottom:2px solid var(--border); padding-bottom:0; }
.cc-tab{ padding:.45rem .9rem; border:none; background:none; cursor:pointer; font-size:.83rem; font-weight:500; color:var(--muted); border-radius:6px 6px 0 0; border-bottom:2px solid transparent; margin-bottom:-2px; transition:color .15s, border-color .15s; }
.cc-tab:hover{ color:var(--text); }
.cc-tab.active{ color:var(--accent); border-bottom-color:var(--accent); background:var(--panel); }
.cc-panel{ padding:.25rem 0 2rem; }
.cc-section-title{ font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); margin: 1.25rem 0 .5rem; padding-bottom:.25rem; border-bottom:1px solid var(--border); }
.cc-section-subtitle{ font-size:.78rem; color:var(--muted); margin:-.25rem 0 .75rem; }

/* Overview KPIs */
.cc-overview-kpis{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:1.25rem; }
.cc-kpi{ background:var(--panel); border:1.5px solid var(--border); border-radius:10px; padding:.65rem 1rem; min-width:110px; }
.cc-kpi .label{ font-size:.72rem; color:var(--muted); font-weight:500; }
.cc-kpi .value{ font-size:1.5rem; font-weight:700; margin-top:2px; }
.cc-kpi-ok{ border-color:#22c55e; }
.cc-kpi-ok .value{ color:#22c55e; }
.cc-kpi-warn{ border-color:#f59e0b; }
.cc-kpi-warn .value{ color:#f59e0b; }
.cc-kpi-danger{ border-color:#dc2626; }
.cc-kpi-danger .value{ color:#dc2626; }

/* JAOS Agent Cards */
.jaos-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap:10px; }
.jaos-card{ background:var(--panel); border:1.5px solid var(--border); border-radius:var(--radius); padding:.85rem 1rem; cursor:pointer; transition:border-color .15s, box-shadow .15s; }
.jaos-card:hover{ border-color:var(--accent); box-shadow:0 0 0 2px color-mix(in srgb, var(--accent) 12%, transparent); }
.jaos-card.expanded{ border-color:var(--accent); }
.jaos-card.jaos-escalated{ border-left:4px solid #dc2626; }
.jaos-card-header{ display:flex; align-items:flex-start; gap:.75rem; }
.jaos-icon{ font-size:1.6rem; line-height:1.1; flex-shrink:0; }
.jaos-card-meta{ flex:1; min-width:0; }
.jaos-name{ font-weight:700; font-size:.95rem; display:flex; align-items:center; gap:.4rem; flex-wrap:wrap; }
.jaos-tier{ font-size:.65rem; background:var(--note-bg); color:var(--note-fg); border-radius:4px; padding:1px 5px; font-weight:600; }
.jaos-sub{ font-size:.75rem; color:var(--muted); margin-top:2px; }
.jaos-right{ display:flex; flex-direction:column; align-items:flex-end; gap:4px; flex-shrink:0; }
.jaos-queue{ font-size:.72rem; color:var(--muted); }
.jaos-last-action{ font-size:.78rem; color:var(--muted); margin-top:.45rem; padding-top:.45rem; border-top:1px solid var(--border); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.jaos-la-label{ font-weight:600; color:var(--text); }
.jaos-la-ts{ margin-left:.5rem; font-size:.7rem; }
.jaos-la-audit{ margin-left:.75rem; font-size:.7rem; background:var(--note-bg); color:var(--note-fg); border-radius:4px; padding:1px 5px; }

/* JAOS Detail panel */
.jaos-detail{ margin-top:.75rem; padding-top:.75rem; border-top:1px dashed var(--border); }
.jaos-detail-grid{ display:grid; grid-template-columns:1fr 1fr; gap:.75rem; font-size:.82rem; }
@media(max-width:700px){ .jaos-detail-grid{ grid-template-columns:1fr; } }
.jaos-detail-head{ font-weight:700; font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); margin-bottom:.2rem; margin-top:.5rem; }
.jaos-list{ margin:.25rem 0; padding-left:1.2rem; }
.jaos-list li{ margin-bottom:.2rem; }
.jaos-paused-reason{ margin-top:.6rem; padding:.4rem .75rem; background:var(--warn-bg); color:var(--warn-fg); border-radius:6px; font-size:.8rem; }

/* ── Command Center ─────────────────────────────────────────────── */
.agents-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 12px;
  padding: .5rem 0 2rem;
}
.agent-card{
  background: var(--panel);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
  box-shadow: var(--shadow);
}
.agent-card:hover{ border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 15%, transparent); }
.agent-card.agent-active{ border-left: 4px solid #22c55e; }
.agent-card-header{ display:flex; align-items:flex-start; gap:.75rem; margin-bottom:.5rem; }
.agent-icon{ font-size:1.6rem; line-height:1; flex-shrink:0; }
.agent-card-meta{ flex:1; min-width:0; }
.agent-name{ font-weight:600; font-size:.95rem; display:flex; align-items:center; gap:.4rem; flex-wrap:wrap; }
.agent-channel{ background:var(--note-bg); color:var(--note-fg); border-radius:4px; padding:1px 6px; font-size:.72rem; font-family:monospace; }
.agent-sub{ font-size:.78rem; color:var(--muted); margin-top:2px; }
.agent-badge{ font-size:.7rem; padding:2px 8px; border-radius:20px; white-space:nowrap; font-weight:600; flex-shrink:0; }
.badge-active{ background:var(--ok-bg); color:var(--ok-fg); }
.badge-recent{ background:var(--warn-bg); color:var(--warn-fg); }
.badge-idle{ background:var(--note-bg); color:var(--note-fg); }
.agent-last-msg{ font-size:.82rem; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; padding:.3rem 0 0; }
.agent-role{ margin-right:.3em; }
.muted-text{ font-style:italic; }

/* Agent Chat Panel */
.agent-chat-panel{ margin-top:.75rem; border-top:1px solid var(--border); padding-top:.75rem; }
.agent-chat-history{ display:flex; flex-direction:column; gap:.5rem; max-height:280px; overflow-y:auto; margin-bottom:.6rem; }
.chat-bubble{ background:var(--panel2); border:1px solid var(--border); border-radius:8px; padding:.5rem .75rem; font-size:.82rem; }
.chat-bubble.user{ background: color-mix(in srgb, var(--accent) 8%, var(--panel2)); }
.chat-bubble.assistant{ background: color-mix(in srgb, #22c55e 8%, var(--panel2)); }
.chat-bubble.system{ background:var(--note-bg); color:var(--note-fg); }
.chat-bubble.error{ background:var(--danger-bg); color:var(--danger-fg); }
.chat-role{ font-weight:600; margin-right:.4em; }
.chat-ts{ font-size:.7rem; color:var(--muted); margin-top:.2rem; }
.agent-chat-input-row{ display:flex; gap:.5rem; }
.agent-chat-input{ flex:1; padding:.4rem .7rem; border:1px solid var(--border); border-radius:8px; background:var(--panel); color:var(--text); font-size:.85rem; }
.agent-chat-input:focus{ outline:none; border-color:var(--accent); }
.agent-chat-reply{ margin-top:.5rem; }