/* ════════════════════════════════════════════════════════════
   WAC Agent Office — Monitoring Dashboard
   Clean, readable, functional for Monitor & Admin roles
   ════════════════════════════════════════════════════════════ */
:root {
  --bg:      #f8fafc;
  --bg2:     #ffffff;
  --bg3:     #f1f5f9;
  --border:  #e2e8f0;
  --text:    #0f172a;
  --text-2:  #475569;
  --text-3:  #94a3b8;
  --shadow:  0 1px 3px rgba(0,0,0,.08);
  --shadow-md: 0 4px 12px rgba(0,0,0,.1);

  --green:   #16a34a; --green-bg:  #dcfce7; --green-bd: #86efac;
  --amber:   #d97706; --amber-bg:  #fef3c7; --amber-bd: #fcd34d;
  --red:     #dc2626; --red-bg:    #fee2e2; --red-bd:   #fca5a5;
  --blue:    #2563eb; --blue-bg:   #dbeafe; --blue-bd:  #93c5fd;
  --purple:  #7c3aed; --purple-bg: #ede9fe;
  --indigo:  #4f46e5;
  --slate:   #64748b;

  /* Division colors */
  --apex:#7c3aed; --d1:#0891b2; --d2:#059669; --d3:#dc2626;
  --d4:#d97706;   --d5:#4f46e5; --d6:#0d9488; --d7:#9333ea;
  --d8:#16a34a;   --d9:#ea580c;

  --font:'Inter',system-ui,sans-serif;
  --mono:'JetBrains Mono','Fira Code',monospace;
  --r:8px; --r-sm:5px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden}
body{font-family:var(--font);font-size:14px;color:var(--text);background:var(--bg);display:flex;flex-direction:column;line-height:1.5}

/* ── HEADER ── */
.hdr{
  height:54px;background:var(--bg2);border-bottom:1px solid var(--border);
  display:flex;align-items:center;padding:0 20px;gap:16px;flex-shrink:0;z-index:100;
}
.hdr-brand{display:flex;align-items:center;gap:10px;flex-shrink:0}
.brand-icon{
  width:34px;height:34px;border-radius:9px;
  background:linear-gradient(135deg,var(--purple),var(--blue));
  display:grid;place-items:center;font-weight:800;font-size:18px;color:#fff;flex-shrink:0;
}
.brand-name{font-weight:700;font-size:15px;display:block}
.brand-sub{font-size:11px;color:var(--text-3);display:block}

.hdr-chips{display:flex;gap:8px}
.stat-chip{
  display:flex;align-items:center;gap:6px;
  padding:5px 12px;border-radius:999px;
  font-size:12px;font-weight:600;border:1.5px solid transparent;
  cursor:default;
}
.chip-num{font-size:18px;font-weight:700;line-height:1}
.chip-lbl{font-size:10px;font-weight:500;opacity:.8;text-transform:uppercase;letter-spacing:.05em}
.chip-online  {background:var(--green-bg); color:var(--green); border-color:var(--green-bd)}
.chip-working {background:var(--amber-bg); color:var(--amber); border-color:var(--amber-bd)}
.chip-error   {background:var(--red-bg);   color:var(--red);   border-color:var(--red-bd)}
.chip-total   {background:var(--bg3);      color:var(--text-2);border-color:var(--border)}

.hdr-time{font-family:var(--mono);font-size:11px;color:var(--text-3);flex-shrink:0}
.hdr-right-group{display:flex;align-items:center;gap:12px;flex-shrink:0;margin-left:auto}

.hdr-divider{width:1px;height:24px;background:var(--border);flex-shrink:0}

/* ── HEADER ACTION BUTTONS ── */
.hbtn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font);
  font-size: 13px;
  font-weight: 500;
  padding: 6px 14px;
  border-radius: var(--r-sm);
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: background .15s, border-color .15s;
  outline: none;
  white-space: nowrap;
  line-height: 1;
}
.hbtn-primary {
  background: #1e293b;
  color: #ffffff;
  border-color: #1e293b;
}
.hbtn-primary:hover { background: #0f172a; }
.hbtn-primary:active { transform: scale(.97); }
.hbtn-ghost {
  background: transparent;
  color: var(--text-2);
  border-color: var(--border);
}
.hbtn-ghost:hover { background: var(--bg3); border-color: var(--text-3); }
.hbtn.active { background: var(--blue-bg); border-color: var(--blue); color: var(--blue); }

/* ── NAV TABS ── */
.nav-tabs{
  display:flex;gap:0;padding:0 20px;
  background:var(--bg2);border-bottom:2px solid var(--border);
  flex-shrink:0;overflow-x:auto;scrollbar-width:none;
}
.nav-tabs::-webkit-scrollbar{display:none}
.ntab{
  display:flex;align-items:center;gap:6px;
  padding:10px 16px;font-size:13px;font-weight:500;
  color:var(--text-2);cursor:pointer;white-space:nowrap;
  background:none;border:none;border-bottom:2px solid transparent;
  margin-bottom:-2px;outline:none;font-family:var(--font);
  transition:color .15s,border-color .15s;
}
.ntab svg{flex-shrink:0;opacity:.7}
.ntab:hover{color:var(--text)}
.ntab.active{color:var(--blue);border-bottom-color:var(--blue)}
.ntab.active svg{opacity:1}
.ntab-badge{
  background:var(--bg3);color:var(--text-2);
  border-radius:999px;padding:1px 7px;font-size:10px;font-weight:600;
  border:1px solid var(--border);min-width:18px;text-align:center;
}
.ntab-badge-pulse{background:var(--blue-bg);color:var(--blue);border-color:var(--blue-bd)}

/* ── APP BODY: sidebar + content ── */
.app-body{display:flex;flex:1;min-height:0;overflow:hidden}
.app-side{
  width:210px;flex-shrink:0;background:var(--bg2);border-right:1px solid var(--border);
  display:flex;flex-direction:column;padding:10px 8px;gap:2px;overflow-y:auto;scrollbar-width:none;
}
.app-side::-webkit-scrollbar{display:none}
.side-item{
  display:flex;align-items:center;gap:10px;width:100%;
  padding:9px 12px;font-size:13px;font-weight:500;border-radius:var(--r-sm,6px);
  color:var(--text-2);cursor:pointer;background:none;border:none;text-align:left;
  font-family:var(--font);transition:background .15s,color .15s;
}
.side-item svg{flex-shrink:0;opacity:.7}
.side-item>span[data-i18n]{flex:1}
.side-item:hover{background:var(--bg3);color:var(--text)}
.side-item.active{background:var(--green-bg);color:var(--green)}
.side-item.active svg{opacity:1}
.side-badge{background:var(--bg3);color:var(--text-2);border-radius:999px;padding:1px 7px;
  font-size:10px;font-weight:600;border:1px solid var(--border);min-width:18px;text-align:center}
.side-badge-pulse{background:var(--blue-bg);color:var(--blue);border-color:var(--blue-bd)}
.side-spacer{flex:1;min-height:10px}
.side-lang{display:flex;gap:4px;padding:8px 6px 4px;border-top:1px solid var(--border)}
.lang-btn{flex:1;padding:6px 0;font-size:11px;font-weight:600;border-radius:var(--r-sm,6px);
  border:1px solid var(--border);background:var(--bg3);color:var(--text-2);cursor:pointer;font-family:var(--font)}
.lang-btn.active{background:var(--green);color:#fff;border-color:var(--green)}
@media(max-width:760px){
  .app-side{width:54px}
  .side-item>span[data-i18n],.side-badge,.side-lang .lang-btn span{display:none}
}

/* ── DAILY SUMMARY ── */
.daily-date{max-width:160px;display:inline-block}
.daily-rollup{margin:0 0 14px;border-left:3px solid var(--green)}
.daily-rollup .roll-text{font-size:13px;line-height:1.6}
.daily-rollup .roll-meta{display:flex;gap:18px;flex-wrap:wrap;margin-top:10px}
.daily-rollup .roll-meta div{text-align:center}
.daily-rollup .roll-meta b{font-size:19px;font-weight:700;display:block}
.daily-rollup .roll-meta span{font-size:10px;color:var(--text-3)}
.daily-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:10px}
.daily-card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r,10px);padding:12px 14px}
.daily-card .dc-hdr{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.daily-card .dc-icon{font-size:18px}
.daily-card .dc-name{font-weight:600;font-size:13px}
.daily-card .dc-div{font-size:10px;color:var(--text-3);margin-left:auto;white-space:nowrap}
.daily-card .dc-text{font-size:12px;color:var(--text-2);line-height:1.55}
.daily-card .dc-stats{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap}
.dc-work{font-size:11px;color:var(--text-2);margin-top:8px;border-top:1px dashed var(--border);padding-top:7px;line-height:1.5}
.dc-work b{color:var(--text);font-weight:600}
.dc-samples{margin:4px 0 0 16px;padding:0}
.dc-samples li{margin:2px 0;color:var(--text-2);font-size:11px}
.dc-chk{font-weight:700;font-size:10px;padding:0 5px;border-radius:4px}
.dc-chk.pass{color:var(--green);background:var(--green-bg)}
.dc-chk.fail{color:var(--red);background:var(--red-bg)}
.dc-chk.unknown{color:var(--text-3);background:var(--bg3)}
.dc-pill{font-size:10px;font-weight:600;padding:1px 7px;border-radius:999px;background:var(--bg3);color:var(--text-2);border:1px solid var(--border)}
.dc-pill.ok{background:var(--green-bg);color:var(--green)}
.dc-pill.warn{background:var(--amber-bg);color:var(--amber)}
.dc-pill.bad{background:var(--red-bg);color:var(--red)}
/* daily view toggle */
/* sticky so the view switch stays reachable above the long per-agent list */
.daily-toolbar{position:sticky;top:0;z-index:6;background:var(--bg);padding:10px 0;margin-bottom:6px}
.daily-views{display:inline-flex;gap:0;border:1px solid var(--border);border-radius:var(--r-sm,6px);overflow:hidden}
.dv-btn{padding:7px 16px;font-size:12px;font-weight:600;background:var(--bg2);color:var(--text-2);
  border:none;cursor:pointer;font-family:var(--font);transition:background .15s,color .15s}
.dv-btn+.dv-btn{border-left:1px solid var(--border)}
.dv-btn:hover:not(.active){background:var(--bg3);color:var(--text)}
.dv-btn.active{background:var(--green);color:#fff}
/* team overview */
.ov-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px;margin-bottom:14px}
.ov-kpi{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r,10px);padding:12px 14px;text-align:center}
.ov-kpi b{font-size:22px;font-weight:700;display:block}
.ov-kpi span{font-size:10px;color:var(--text-3)}
.ov-kpi .delta{font-size:10px;font-weight:600}
.ov-kpi .delta.up{color:var(--green)}.ov-kpi .delta.down{color:var(--red)}
.ov-sect{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r,10px);padding:14px 16px;margin-bottom:12px}
.ov-sect h4{font-size:12px;font-weight:700;margin-bottom:10px;color:var(--text)}
.ov-row{display:flex;align-items:center;gap:8px;padding:4px 0;font-size:12px}
.ov-row .ov-lbl{min-width:130px;color:var(--text-2)}
.ov-bar{flex:1;height:8px;background:var(--bg3);border-radius:4px;overflow:hidden}
.ov-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--green),var(--green-2,#34d399));border-radius:4px}
.ov-row .ov-val{min-width:42px;text-align:right;font-weight:600;font-family:var(--mono)}
.ov-att{display:flex;align-items:center;gap:8px;padding:6px 0;font-size:12px;border-top:1px solid var(--border)}
.ov-att:first-child{border-top:none}
.ov-att .ov-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.ov-att .ov-dot.warn{background:var(--amber)}.ov-att .ov-dot.bad{background:var(--red)}
.ov-empty{font-size:12px;color:var(--text-3);padding:6px 0}

/* ── CONTENT ── */
.content{flex:1;overflow:hidden;display:flex;flex-direction:column}
.tab-pane{display:none;flex:1;overflow-y:auto;padding:20px;scrollbar-width:thin;scrollbar-color:var(--border) transparent}
.tab-pane.active{display:flex;flex-direction:column}
#tab-dashboard{flex-direction:row;gap:0;padding:0}
#tab-activity,#tab-report{display:none;flex:1;overflow-y:auto}
#tab-activity.active,#tab-report.active{display:flex;flex-direction:column;padding:20px}
#tab-agents.active{display:flex;flex-direction:column;padding:20px}
#tab-config.active{display:flex;flex-direction:row;gap:0;padding:0;overflow-y:auto}

/* ── SECTION HEADER ── */
.section-hdr{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:12px;
}
.section-hdr h2{font-size:15px;font-weight:600;color:var(--text)}
.section-hdr h3{font-size:14px;font-weight:600;color:var(--text)}
.section-hdr h4{font-size:13px;font-weight:600;color:var(--text)}
.section-sub{font-size:11px;color:var(--text-3)}
.hdr-actions{display:flex;gap:6px;align-items:center}

/* ── CARD ── */
.card{
  background:var(--bg2);border:1px solid var(--border);
  border-radius:var(--r);padding:16px;box-shadow:var(--shadow);
}

/* ── DASHBOARD LAYOUT ── */
.dash-layout{display:flex;flex:1;overflow:hidden}
.dash-main{flex:1;overflow-y:auto;padding:16px 20px;border-right:1px solid var(--border);display:flex;flex-direction:column;gap:0}
.dash-side{width:360px;flex-shrink:0;overflow:hidden;display:flex;flex-direction:column;border-left:1px solid var(--border)}

/* ── DEPARTMENT STRIP TABS ── */
.dept-strip{
  display:flex;gap:1px;padding:0 0 12px 0;
  overflow-x:auto;flex-shrink:0;
  scrollbar-width:none;
}
.dept-strip::-webkit-scrollbar{display:none}
.dstab{
  padding:5px 12px;font-size:12px;font-weight:500;
  color:var(--text-2);cursor:pointer;white-space:nowrap;
  background:var(--bg3);border:1px solid var(--border);
  border-radius:999px;outline:none;font-family:var(--font);
  transition:color .12s,background .12s,border-color .12s;
}
.dstab:hover{color:var(--text);background:var(--bg2)}
.dstab.active{background:var(--blue);color:#fff;border-color:var(--blue)}

/* ── STATUS FILTER PILLS ── */
.status-filter-row{
  display:flex;gap:6px;margin-bottom:10px;flex-wrap:wrap;flex-shrink:0;
}
.sfpill{
  display:flex;align-items:center;gap:4px;
  padding:4px 10px;border-radius:999px;font-size:11px;font-weight:500;
  border:1.5px solid var(--border);background:var(--bg2);color:var(--text-2);
  cursor:pointer;font-family:var(--font);transition:.12s;
}
.sfpill:hover{background:var(--bg3)}
.sfpill.active{background:var(--blue);color:#fff;border-color:var(--blue)}
.sfpill-cnt{
  background:rgba(0,0,0,.12);border-radius:999px;
  padding:0 5px;font-size:10px;min-width:16px;text-align:center;
}
.sfpill.active .sfpill-cnt{background:rgba(255,255,255,.25)}
.sfpill-online  { border-color:var(--green-bd) }
.sfpill-online.active  { background:var(--green);border-color:var(--green) }
.sfpill-deploy  { border-color:var(--blue-bd) }
.sfpill-deploy.active  { background:var(--blue);border-color:var(--blue) }
.sfpill-waiting { border-color:var(--amber-bd) }
.sfpill-waiting.active { background:var(--amber);border-color:var(--amber) }
.sfpill-error   { border-color:var(--red-bd) }
.sfpill-error.active   { background:var(--red);border-color:var(--red) }

/* ── MINI AGENT CARD GRID (matches screenshot) ── */
.mini-grid{
  display:flex;flex-wrap:wrap;gap:8px;
  flex:1;overflow-y:auto;padding-bottom:12px;
  align-content:flex-start;
  scrollbar-width:thin;scrollbar-color:var(--border) transparent;
}
.mc{
  background:var(--bg2);border:1px solid var(--border);
  border-radius:var(--r);padding:12px 12px 10px;
  width:148px;cursor:pointer;
  transition:border-color .12s,box-shadow .12s;
  box-shadow:var(--shadow);
  display:flex;flex-direction:column;gap:4px;
  position:relative;
}
.mc:hover{border-color:var(--text-3);box-shadow:var(--shadow-md)}
.mc.mc-online {border-left:3px solid var(--green)}
.mc.mc-working{border-left:3px solid var(--amber)}
.mc.mc-error  {border-left:3px solid var(--red)}
.mc.mc-selected{border-color:var(--blue);box-shadow:0 0 0 2px var(--blue-bg)}

.mc-top{display:flex;align-items:center;gap:8px}
.mc-icon{
  width:34px;height:34px;border-radius:9px;
  display:grid;place-items:center;font-size:18px;flex-shrink:0;
}
.mc-info{flex:1;overflow:hidden}
.mc-name{font-size:12px;font-weight:700;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mc-role{font-size:10px;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mc-status{display:flex;align-items:center;gap:4px;font-size:10px;font-weight:500;margin-top:2px}
.mc-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.mc-dot-online {background:var(--green);animation:pulse 2s infinite}
.mc-dot-working{background:var(--amber);animation:pulse .7s infinite}
.mc-dot-error  {background:var(--red)}
.mc-dot-offline{background:var(--text-3)}
.mc-txt-online {color:var(--green)}
.mc-txt-working{color:var(--amber)}
.mc-txt-nd     {color:var(--text-3)}
.mc-hb{
  font-size:10px;color:var(--text-2);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  line-height:1.3;margin-top:2px;
}
/* Deploy CTA on waiting cards */
.mc-deploy-btn{
  margin-top:6px;padding:4px 0;width:100%;
  background:var(--amber-bg);color:var(--amber);
  border:1px solid var(--amber-bd);border-radius:var(--r-sm);
  font-size:10px;font-weight:600;cursor:pointer;
  font-family:var(--font);letter-spacing:.02em;
  transition:background .12s;display:flex;align-items:center;justify-content:center;gap:4px;
}
.mc-deploy-btn:hover{background:#fde68a}
/* Waiting deploy style */
.mc.mc-waiting{border-style:dashed;border-color:var(--amber-bd);background:var(--amber-bg)}
.mc.mc-waiting .mc-name{color:var(--amber)}
/* Tooltip on truncated heartbeat */
.mc-hb[title]{cursor:help}

/* ── QUICK COMMAND BAR ── */
.qcmd-bar{
  display:flex;gap:6px;align-items:center;
  padding:10px 0 8px;flex-shrink:0;
  border-top:1px solid var(--border);
  margin-top:8px;
}

/* ── LIVE CHAT PANEL v2 ── */
.chat-panel-hdr{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 14px;border-bottom:1px solid var(--border);
  flex-shrink:0;gap:8px;min-height:54px;
}
.chat-hdr-left{display:flex;align-items:center;gap:9px;min-width:0;flex:1}
.chat-av{
  width:34px;height:34px;border-radius:50%;flex-shrink:0;
  background:#1D9E75;display:grid;place-items:center;
  font-size:15px;color:#E1F5EE;
}
.chat-hdr-info{min-width:0;flex:1}
.chat-hdr-name{font-size:13px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-hdr-status{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--text-3);margin-top:1px}
.chat-pulse{width:7px;height:7px;border-radius:50%;background:#1D9E75;animation:pulse 1.5s ease-in-out infinite;flex-shrink:0}
.chat-count{color:#1D9E75;font-weight:500}
.chat-hdr-right{display:flex;gap:4px;align-items:center;flex-shrink:0}
.chat-mode-btn{
  font-size:10px;padding:3px 9px;border-radius:999px;
  border:1px solid var(--border);background:var(--bg3);color:var(--text-3);
  cursor:pointer;transition:.15s;white-space:nowrap;font-family:var(--font);
}
.chat-mode-btn.active{background:#085041;color:#E1F5EE;border-color:#085041}
.chat-mode-btn:hover:not(.active){background:var(--bg2);color:var(--text);border-color:var(--border)}

/* Agent selector row (1-to-1 mode) */
.chat-agent-sel-row{
  padding:6px 12px;border-bottom:1px solid var(--border);
  flex-shrink:0;background:var(--bg2);
}

/* Chat messages area */
.chat-area{
  flex:1;overflow-y:auto;padding:12px 12px;
  display:flex;flex-direction:column;gap:10px;
  scrollbar-width:thin;scrollbar-color:var(--border) transparent;
}
.chat-area::-webkit-scrollbar{width:3px}
.chat-area::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}
.chat-empty{
  text-align:center;padding:40px 20px;color:var(--text-3);font-size:13px;
  display:flex;flex-direction:column;align-items:center;gap:8px;
}
.chat-empty-icon{font-size:32px}

/* ── MESSAGE ROWS (bubble layout) ── */
.chat-msg-row{display:flex;gap:8px;align-items:flex-end;animation:msg-in .2s ease-out}
.chat-msg-row.msg-user{flex-direction:row-reverse}
@keyframes msg-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}

.msg-av{
  width:28px;height:28px;border-radius:50%;flex-shrink:0;
  display:grid;place-items:center;font-size:13px;
  background:#1D9E75;color:#E1F5EE;
}
.chat-msg-row.msg-user .msg-av{
  background:var(--blue-bg);color:var(--blue);font-size:11px;font-weight:700;
}

.chat-bubble{
  max-width:78%;padding:9px 13px;font-size:13px;
  line-height:1.55;word-break:break-word;
}
/* Agent bubble */
.chat-msg-row.msg-agent .chat-bubble{
  background:var(--bg3);border:1px solid var(--border);
  border-radius:4px 14px 14px 14px;color:var(--text);
}
.chat-msg-row.msg-agent.msg-command .chat-bubble{background:var(--amber-bg);border-color:var(--amber-bd)}
.chat-msg-row.msg-agent.msg-talk    .chat-bubble{background:var(--purple-bg);border-color:#c4b5fd}
.chat-msg-row.msg-agent.msg-error   .chat-bubble{background:var(--red-bg);   border-color:var(--red-bd)}
.chat-msg-row.msg-agent.msg-boot    .chat-bubble{background:var(--blue-bg);  border-color:var(--blue-bd)}
/* User bubble */
.chat-msg-row.msg-user .chat-bubble{
  background:#085041;color:#E1F5EE;
  border-radius:14px 4px 14px 14px;
}
.bubble-name{font-size:10px;font-weight:600;margin-bottom:3px;opacity:.7}
.chat-msg-row.msg-user .bubble-name{text-align:right;color:#5DCAA5}
.bubble-ts{font-size:10px;margin-top:4px;display:block;opacity:.55}
.chat-msg-row.msg-user .bubble-ts{text-align:right}

/* Typing indicator */
.typing-row{display:flex;gap:8px;align-items:flex-end;animation:msg-in .2s ease-out}
.typing-bubble{
  background:var(--bg3);border:1px solid var(--border);
  border-radius:4px 14px 14px 14px;padding:10px 14px;
  display:flex;gap:4px;align-items:center;
}
.typing-dot{width:6px;height:6px;border-radius:50%;background:var(--text-3);animation:typing-blink 1.2s infinite}
.typing-dot:nth-child(2){animation-delay:.2s}
.typing-dot:nth-child(3){animation-delay:.4s}
@keyframes typing-blink{0%,80%,100%{opacity:.3;transform:scale(.9)}40%{opacity:1;transform:scale(1.1)}}

/* ── CHAT INPUT BAR ── */
.chat-input-bar{
  padding:10px 12px 12px;border-top:1px solid var(--border);
  flex-shrink:0;background:var(--bg);
}
.chat-input-row{display:flex;gap:8px;align-items:flex-end}
.chat-input-ta{
  flex:1;background:var(--bg3);border:1px solid var(--border);
  border-radius:var(--r);color:var(--text);font-family:var(--font);
  font-size:13px;padding:8px 12px;resize:none;outline:none;
  transition:border-color .15s;line-height:1.5;max-height:100px;min-height:36px;
}
.chat-input-ta:focus{border-color:#1D9E75}
.chat-input-ta::placeholder{color:var(--text-3)}
.chat-send-btn{
  width:36px;height:36px;border-radius:50%;border:none;
  background:#085041;color:#E1F5EE;cursor:pointer;
  display:grid;place-items:center;flex-shrink:0;
  transition:background .15s,transform .1s;
}
.chat-send-btn:hover{background:#0F6E56}
.chat-send-btn:active{transform:scale(.93)}
.chat-send-btn:disabled{background:var(--border);cursor:not-allowed;color:var(--text-3)}

/* ── AGENT CARDS (dashboard) ── */
.agent-cards{display:flex;flex-direction:column;gap:10px}
.acard{
  background:var(--bg2);border:1px solid var(--border);
  border-radius:var(--r);padding:14px 16px;
  box-shadow:var(--shadow);transition:box-shadow .15s;
}
.acard:hover{box-shadow:var(--shadow-md)}
.acard.online {border-left:4px solid var(--green)}
.acard.working{border-left:4px solid var(--amber)}
.acard.error  {border-left:4px solid var(--red)}
.acard.offline{border-left:4px solid var(--border);opacity:.7}

.acard-hdr{display:flex;align-items:flex-start;gap:12px;margin-bottom:10px}
.acard-icon{
  width:38px;height:38px;border-radius:10px;flex-shrink:0;
  display:grid;place-items:center;font-size:20px;
}
.acard-meta{flex:1}
.acard-name{font-weight:700;font-size:14px;color:var(--text)}
.acard-role{font-size:11px;color:var(--text-3);margin-top:1px}
.acard-badges{display:flex;gap:5px;margin-top:4px;flex-wrap:wrap}
.badge{
  font-size:10px;font-weight:600;padding:1px 7px;border-radius:999px;
  border:1px solid transparent;
}
.badge-online {background:var(--green-bg); color:var(--green); border-color:var(--green-bd)}
.badge-working{background:var(--amber-bg); color:var(--amber); border-color:var(--amber-bd)}
.badge-error  {background:var(--red-bg);   color:var(--red);   border-color:var(--red-bd)}
.badge-offline{background:var(--bg3);      color:var(--text-3);border-color:var(--border)}
.badge-div    {background:var(--bg3);      color:var(--text-2);border-color:var(--border)}
.badge-model  {background:var(--purple-bg);color:var(--purple);font-family:var(--mono)}

.acard-body{display:grid;grid-template-columns:1fr 1fr;gap:8px;font-size:12px}
.acard-field label{display:block;font-size:10px;font-weight:600;color:var(--text-3);text-transform:uppercase;letter-spacing:.05em;margin-bottom:2px}
.acard-field .val{color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acard-field .val.task{color:var(--indigo);font-weight:500}
.acard-field .val.thought{color:var(--text-2);font-size:11px;white-space:normal;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.acard-field.full{grid-column:1/-1}

.acard-footer{
  display:flex;justify-content:space-between;align-items:center;
  margin-top:10px;padding-top:10px;border-top:1px solid var(--border);
  font-size:11px;color:var(--text-3);
}
.acard-actions{display:flex;gap:5px}

/* ── LIVE FEED ── */
.live-feed{
  display:flex;flex-direction:column;gap:4px;
  max-height:340px;overflow-y:auto;
  scrollbar-width:thin;scrollbar-color:var(--border) transparent;
}
.feed-empty{font-size:12px;color:var(--text-3);text-align:center;padding:20px}
.feed-item{
  display:flex;align-items:flex-start;gap:8px;
  padding:7px 10px;border-radius:var(--r-sm);
  background:var(--bg3);font-size:12px;
}
.feed-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;margin-top:3px}
.feed-dot-hb   {background:var(--text-3)}
.feed-dot-cmd  {background:var(--amber)}
.feed-dot-talk {background:var(--purple)}
.feed-dot-boot {background:var(--blue)}
.feed-dot-err  {background:var(--red)}
.feed-meta{flex:1}
.feed-agent{font-weight:600;color:var(--text)}
.feed-content{color:var(--text-2);margin-top:1px;line-height:1.4}
.feed-ts{font-family:var(--mono);font-size:10px;color:var(--text-3);flex-shrink:0}

/* ── PEER FORM ── */
.peer-form{display:flex;flex-direction:column;gap:6px}

/* ── AGENTS TABLE ── */
.agents-table-wrap{overflow:auto;border:1px solid var(--border);border-radius:var(--r);background:var(--bg2)}
.agents-table{width:100%;border-collapse:collapse;font-size:13px}
.agents-table th{
  padding:10px 14px;text-align:left;font-size:11px;font-weight:600;
  color:var(--text-3);text-transform:uppercase;letter-spacing:.05em;
  background:var(--bg3);border-bottom:1px solid var(--border);
  position:sticky;top:0;
}
.agents-table td{
  padding:12px 14px;border-bottom:1px solid var(--border);
  vertical-align:middle;
}
.agents-table tr:last-child td{border-bottom:none}
.agents-table tr:hover td{background:var(--bg3)}
.td-name{font-weight:600}
.td-div{font-size:11px;font-weight:600;padding:2px 8px;border-radius:999px;display:inline-block}
.td-status{display:flex;align-items:center;gap:5px}
.td-dot{width:8px;height:8px;border-radius:50%}
.td-task{max-width:280px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text-2)}
.td-model{font-family:var(--mono);font-size:11px;color:var(--purple)}
.td-hb{font-family:var(--mono);font-size:11px;color:var(--text-3)}
.td-actions{display:flex;gap:4px;white-space:nowrap}

/* Agent drawer */
.agent-drawer{
  margin-top:16px;background:var(--bg2);border:1px solid var(--border);
  border-radius:var(--r);padding:16px;box-shadow:var(--shadow-md);
}
.drawer-hdr{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.drawer-hdr h3{font-size:14px;font-weight:600}
.drawer-body{display:grid;grid-template-columns:1fr 1fr;gap:12px;font-size:13px}
.dr{display:flex;flex-direction:column;gap:2px}
.dr label{font-size:10px;font-weight:600;color:var(--text-3);text-transform:uppercase;letter-spacing:.05em}
.dr .dv{color:var(--text)}
.dr.full{grid-column:1/-1}

/* ── LOG TABLE ── */
.log-table-wrap{overflow:auto;border:1px solid var(--border);border-radius:var(--r);background:var(--bg2);flex:1}
.log-table{width:100%;border-collapse:collapse;font-size:12px}
.log-table th{padding:9px 14px;text-align:left;font-size:10px;font-weight:600;color:var(--text-3);text-transform:uppercase;letter-spacing:.05em;background:var(--bg3);border-bottom:1px solid var(--border);position:sticky;top:0}
.log-table td{padding:9px 14px;border-bottom:1px solid var(--border);vertical-align:top}
.log-table tr:last-child td{border-bottom:none}
.log-table tr:hover td{background:var(--bg3)}
.lt-time{font-family:var(--mono);color:var(--text-3);white-space:nowrap}
.lt-agent{font-weight:600;white-space:nowrap}
.lt-type{display:inline-block;padding:1px 7px;border-radius:999px;font-size:10px;font-weight:600}
.ltype-heartbeat  {background:var(--bg3);color:var(--text-3)}
.ltype-command    {background:var(--amber-bg);color:var(--amber)}
.ltype-agent_talk {background:var(--purple-bg);color:var(--purple)}
.ltype-template_update{background:var(--blue-bg);color:var(--blue)}
.ltype-error      {background:var(--red-bg);color:var(--red)}
.ltype-boot       {background:var(--blue-bg);color:var(--blue)}
.ltype-online     {background:var(--green-bg);color:var(--green)}
.lt-content{color:var(--text-2);line-height:1.45;max-width:500px}

/* ── Session Log Feed Cards ────────────────────── */
.log-feed-wrap{overflow-y:auto;flex:1;padding:4px 0}
.log-feed{display:flex;flex-direction:column;gap:8px;padding:0 2px}
.log-card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);padding:10px 14px;position:relative;border-left:3px solid var(--border)}
.lcard-heartbeat  {border-left-color:var(--blue)}
.lcard-command    {border-left-color:var(--amber)}
.lcard-agent_talk {border-left-color:var(--purple, #9333ea)}
.lcard-error      {border-left-color:var(--red);background:var(--red-bg)}
.lcard-boot       {border-left-color:var(--green)}
.lcard-online     {border-left-color:var(--green)}
.lcard-template_update{border-left-color:var(--blue)}
.log-card-meta{display:flex;align-items:center;gap:8px;margin-bottom:8px;flex-wrap:wrap}
.log-card-time{font-family:var(--mono);font-size:11px;color:var(--text-3);white-space:nowrap}
.log-card-agent{font-size:11px;font-weight:600;padding:2px 8px;border-radius:999px;white-space:nowrap}
.log-card-body{font-size:12px;line-height:1.6;color:var(--text-2)}
.log-card-body.log-collapsed{max-height:100px;overflow:hidden;mask-image:linear-gradient(to bottom,black 60%,transparent 100%);-webkit-mask-image:linear-gradient(to bottom,black 60%,transparent 100%)}
.log-expand-btn{display:block;width:100%;text-align:center;background:none;border:none;color:var(--text-3);font-size:11px;cursor:pointer;padding:4px 0 0;margin-top:2px}
.log-expand-btn:hover{color:var(--text)}
.log-thought{white-space:pre-wrap;word-break:break-word;color:var(--text-2)}
.log-meta-line{font-size:11px;color:var(--text-3);margin-top:4px;font-style:italic}
.log-cmd-header{font-size:10px;font-weight:700;letter-spacing:.08em;color:var(--amber);margin-bottom:2px}
.log-cmd-text{white-space:pre-wrap;word-break:break-word;font-family:var(--mono);font-size:11px;background:var(--bg3);padding:6px 10px;border-radius:4px;margin:0 0 8px;color:var(--text)}
.log-result-header{font-size:10px;font-weight:700;letter-spacing:.08em;color:var(--green,#1D9E75);margin-bottom:2px}
.log-result-text{white-space:pre-wrap;word-break:break-word;font-family:var(--mono);font-size:11px;background:var(--bg3);padding:6px 10px;border-radius:4px;margin:0;color:var(--text)}
.log-talk-send,.log-talk-recv{padding:6px 10px;border-radius:6px;margin-bottom:4px}
.log-talk-send{background:rgba(147,51,234,0.08)}
.log-talk-recv{background:rgba(147,51,234,0.04)}
.log-talk-dir{font-size:11px;font-weight:700;color:var(--purple,#9333ea);display:block;margin-bottom:2px}
.log-talk-msg{white-space:pre-wrap;word-break:break-word;color:var(--text-2)}
.log-error-text{color:var(--red);white-space:pre-wrap;word-break:break-word}

/* ── REPORT ── */
.report-section{margin-bottom:20px}
.qa-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px}
.qa-item{
  display:flex;align-items:flex-start;gap:10px;
  padding:10px 12px;background:var(--bg2);border:1px solid var(--border);
  border-radius:var(--r-sm);font-size:13px;
}
.qa-check{
  width:20px;height:20px;border-radius:5px;flex-shrink:0;
  display:grid;place-items:center;font-size:11px;font-weight:700;
}
.qa-check.pass{background:var(--green-bg);color:var(--green);border:1.5px solid var(--green-bd)}
.qa-check.fail{background:var(--red-bg);  color:var(--red);  border:1.5px solid var(--red-bd)}
.qa-check.na  {background:var(--bg3);     color:var(--text-3);border:1.5px solid var(--border)}
.qa-lbl{flex:1;color:var(--text);line-height:1.4}
.qa-score{
  padding:14px 16px;border-radius:var(--r);font-size:14px;font-weight:600;
  display:flex;align-items:center;justify-content:space-between;
}
.qa-score.pass{background:var(--green-bg);color:var(--green)}
.qa-score.fail{background:var(--amber-bg);color:var(--amber)}
.report-text{
  background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);
  padding:16px;font-family:var(--mono);font-size:12px;line-height:1.7;
  color:var(--text-2);white-space:pre-wrap;min-height:200px;overflow-y:auto;
  max-height:400px;
}

/* ── CONFIG LAYOUT (sidebar + panes) ── */
.config-layout{display:flex;flex-direction:column;gap:0;flex:1;overflow-y:auto;padding:20px}
.config-shell{display:flex;flex:1;overflow:hidden}
.config-sidebar{width:210px;flex-shrink:0;border-right:1px solid var(--border);
  padding:16px 10px;display:flex;flex-direction:column;gap:4px;background:var(--bg2);overflow-y:auto}
.cfg-nav{display:flex;align-items:center;gap:9px;width:100%;text-align:left;
  padding:9px 12px;border:none;background:transparent;color:var(--text-2);
  font-size:13px;font-weight:500;border-radius:var(--r-sm);cursor:pointer;transition:all .15s}
.cfg-nav:hover{background:var(--bg3);color:var(--text)}
.cfg-nav.active{background:var(--green-bg);color:var(--green);font-weight:600}
.cfg-nav-ic{font-size:15px;width:18px;text-align:center}
.config-main{flex:1;overflow-y:auto;padding:20px 24px}
.config-section{margin-bottom:24px}
.config-pane{display:none}
.config-pane.active{display:block}
.cfg-hint{font-size:12px;color:var(--text-3);margin:0 0 12px}

/* Provider card */
.provider-card{
  display:flex;align-items:flex-start;gap:12px;
  padding:12px 14px;background:var(--bg2);border:1px solid var(--border);
  border-radius:var(--r);margin-bottom:8px;box-shadow:var(--shadow);
}
.provider-card.has-key{border-color:var(--green)}
.pcard-icon{width:36px;height:36px;border-radius:8px;background:var(--bg3);display:grid;place-items:center;font-size:18px;flex-shrink:0}
.pcard-info{flex:1}
.pcard-body{flex:1;min-width:0}
.pcard-top{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.pcard-name{font-weight:600;font-size:14px}
.pcard-tag{font-size:10px;background:var(--bg3);color:var(--text-3);padding:1px 6px;border-radius:10px;font-weight:500;margin-left:4px}
.pcard-url{font-size:11px;color:var(--text-3);font-family:var(--mono);margin:2px 0 8px}
.pcard-status{font-size:11px;white-space:nowrap}
.pcard-actions{display:flex;gap:5px}
.pcard-keyrow{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.pcard-key{flex:1;min-width:200px}
.pcard-test{margin-top:8px;font-size:11px;padding:6px 9px;border-radius:var(--r-sm);
  background:var(--bg3);font-family:var(--mono)}
.pcard-test.test-ok{color:var(--green);background:var(--green-bg)}
.pcard-test.test-err{color:var(--red);background:var(--red-bg)}

.provider-form{padding:16px;background:var(--bg3);border:1px solid var(--border);border-radius:var(--r);margin-top:8px}
.provider-form h3{font-size:14px;font-weight:600;margin-bottom:14px}

.model-select-list{
  display:flex;flex-wrap:wrap;gap:6px;max-height:160px;
  overflow-y:auto;padding:10px;background:var(--bg2);
  border:1px solid var(--border);border-radius:var(--r-sm);
}
.model-item{
  padding:4px 10px;border-radius:999px;font-size:12px;font-family:var(--mono);
  background:var(--bg3);border:1px solid var(--border);cursor:pointer;
  transition:background .1s,border-color .1s;
}
.model-item:hover,.model-item.sel{background:var(--blue-bg);border-color:var(--blue-bd);color:var(--blue)}

.test-result{
  margin-top:10px;padding:10px 12px;border-radius:var(--r-sm);
  font-size:12px;font-family:var(--mono);
}
.test-ok {background:var(--green-bg);color:var(--green)}
.test-err{background:var(--red-bg);  color:var(--red)}

/* Per-agent model table */
.pam-row{
  display:flex;align-items:center;gap:10px;padding:10px 0;
  border-bottom:1px solid var(--border);font-size:13px;
}
.pam-row:last-child{border-bottom:none}
.pam-name{min-width:120px;font-weight:600}
.pam-cur{font-family:var(--mono);font-size:11px;color:var(--purple);flex:1}
.pam-sel{flex:1}
.pam-btn{flex-shrink:0}

/* Bulk form */
.form-row-inline{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.form-row-inline .sel{flex:1;min-width:160px}
.bulk-result{margin-top:8px;padding:8px 12px;border-radius:var(--r-sm);font-size:12px}

/* ── FORMS ── */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px}
.fg{display:flex;flex-direction:column;gap:4px}
.fg label{font-size:12px;font-weight:500;color:var(--text-2)}
.fi{background:var(--bg3);border:1px solid var(--border);border-radius:var(--r-sm);color:var(--text);font-family:var(--font);font-size:13px;padding:7px 10px;outline:none;width:100%;transition:border-color .15s}
.fi:focus{border-color:var(--blue)}
.sel{background:var(--bg3);border:1px solid var(--border);border-radius:var(--r-sm);color:var(--text);font-family:var(--font);font-size:13px;padding:6px 9px;outline:none;transition:border-color .15s}
.sel:focus{border-color:var(--blue)}
.sel-sm{font-size:12px;padding:4px 7px}
.ta{width:100%;background:var(--bg3);border:1px solid var(--border);border-radius:var(--r-sm);color:var(--text);font-family:var(--font);font-size:13px;padding:8px 10px;resize:vertical;outline:none;transition:border-color .15s;line-height:1.5}
.ta:focus{border-color:var(--blue)}
.btn-row{display:flex;gap:6px;margin-top:8px}
.out-hdr{font-size:11px;font-weight:600;color:var(--text-3);text-transform:uppercase;letter-spacing:.05em;margin-bottom:6px}
.cmd-out{margin-top:10px;background:var(--bg3);border:1px solid var(--border);border-radius:var(--r-sm);padding:10px}
.cmd-out pre{font-family:var(--mono);font-size:11px;color:var(--indigo);white-space:pre-wrap;word-break:break-all;max-height:150px;overflow-y:auto;line-height:1.6}
.quick-cmd{display:flex;flex-direction:column;gap:8px}

/* ── BUTTONS ── */
.btn{display:inline-flex;align-items:center;gap:6px;font-family:var(--font);font-size:13px;font-weight:500;border-radius:var(--r-sm);border:1px solid transparent;padding:6px 14px;cursor:pointer;outline:none;transition:.15s;white-space:nowrap}
.btn:active{transform:scale(.97)}
.btn-primary{background:#1e293b;color:#fff;border-color:#1e293b}
.btn-primary:hover{background:#0f172a}
.btn-accent{background:var(--indigo);color:#fff;border-color:var(--indigo)}
.btn-accent:hover{background:#4338ca}
.btn-success{background:var(--green);color:#fff;border-color:var(--green)}
.btn-danger{background:var(--red);color:#fff;border-color:var(--red)}
.btn-ghost{background:transparent;color:var(--text-2);border-color:var(--border)}
.btn-ghost:hover{background:var(--bg3)}
.btn-sm{font-size:12px;padding:4px 10px}

/* ── ANIMATIONS ── */
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.5}}
.pulse{animation:pulse 2s ease-in-out infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.spin{animation:spin 1s linear infinite}

/* ══════════════════════════════════════════════════════════════
   AUTH OVERLAY — Login screen
   ══════════════════════════════════════════════════════════════ */
.auth-overlay {
  position: fixed;
  inset: 0;
  background: linear-gradient(135deg, #0f172a 0%, #1e3a5f 50%, #0f172a 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}
.auth-loading-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.auth-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid rgba(255,255,255,.2);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
.auth-loading-msg { color: rgba(255,255,255,.7); font-size: 14px; }

.auth-login-box {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 18px;
  padding: 40px 44px;
  width: 420px;
  max-width: 96vw;
  backdrop-filter: blur(24px);
  box-shadow: 0 28px 64px rgba(0,0,0,.5);
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.auth-logo { display: flex; align-items: center; gap: 14px; }
.auth-logo-icon {
  width: 48px; height: 48px;
  background: linear-gradient(135deg, #0ea5e9, #0284c7);
  border-radius: 12px;
  display: grid; place-items: center;
  font-weight: 800; font-size: 22px; color: #fff;
  flex-shrink: 0;
  box-shadow: 0 4px 14px rgba(14,165,233,.4);
}
.auth-title    { font-size: 20px; font-weight: 700; color: #fff; }
.auth-subtitle { font-size: 12px; color: rgba(255,255,255,.5); margin-top: 2px; }

.auth-realm-badge {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  font-size: 11px; color: rgba(255,255,255,.4);
  padding: 0;
  border: none; background: none;
}
.auth-realm-badge strong { color: rgba(255,255,255,.85); }

.auth-error {
  background: rgba(220,38,38,.15);
  border: 1px solid rgba(220,38,38,.4);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 12px;
  color: #fca5a5;
  display: flex; flex-direction: column; gap: 3px;
}
.auth-error strong { font-weight: 700; }

.auth-btn {
  display: flex; align-items: center; gap: 9px;
  padding: 14px 20px;
  background: linear-gradient(135deg, #0ea5e9, #0284c7);
  color: #fff; border: none;
  border-radius: 10px;
  font-size: 14px; font-weight: 600;
  cursor: pointer; font-family: var(--font);
  transition: opacity .15s, transform .1s;
  box-shadow: 0 4px 16px rgba(14,165,233,.35);
  width: 100%;
}
.auth-btn:hover  { opacity: .92; transform: translateY(-1px); box-shadow: 0 6px 20px rgba(14,165,233,.45); }
.auth-btn:active { transform: scale(.98); }

.auth-accounts { display: flex; flex-direction: column; gap: 8px; }
.auth-acct-title { font-size: 10px; font-weight: 600; color: rgba(255,255,255,.35); text-transform: uppercase; letter-spacing: .08em; }
.auth-acct-row { display: flex; flex-direction: column; gap: 6px; }
.auth-acct {
  display: flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 7px; padding: 7px 10px;
}
.auth-acct-role {
  font-size: 10px; font-weight: 700; padding: 2px 8px;
  border-radius: 4px; text-transform: uppercase; flex-shrink: 0;
}
.auth-acct-role.admin   { background: rgba(124,58,237,.3); color: #c4b5fd; }
.auth-acct-role.monitor { background: rgba(37,99,235,.3);  color: #93c5fd; }
.auth-acct-cred { font-size: 12px; color: rgba(255,255,255,.5); font-family: var(--mono); }

.auth-footer {
  font-size: 11px; color: rgba(255,255,255,.25);
  text-align: center; line-height: 1.6;
}
.auth-footer code { font-family: var(--mono); color: rgba(255,255,255,.4); }

/* ── HEADER USER INFO ───────────────────────────────────────────── */
.hdr-user {
  display: flex; align-items: center; gap: 7px;
}
.hdr-user-avatar {
  width: 28px; height: 28px;
  background: var(--bg3); border: 1px solid var(--border);
  border-radius: 50%; display: grid; place-items: center;
  color: var(--text-2); flex-shrink: 0;
}
.hdr-user-info { display: flex; flex-direction: column; gap: 1px; }
.hdr-user-name { font-size: 12px; font-weight: 600; color: var(--text); line-height: 1; }
.hdr-role-badge {
  font-size: 9px; font-weight: 700; padding: 1px 6px;
  border-radius: 3px; text-transform: uppercase;
  letter-spacing: .05em; line-height: 1;
}
.hdr-role-badge.admin   { background: var(--purple-bg); color: var(--purple); }
.hdr-role-badge.monitor { background: var(--blue-bg);   color: var(--blue);   }
.hbtn-sm { padding: 4px 8px; font-size: 11px; }

/* ── MODAL OVERLAY ─────────────────────────────────────────────── */
.modal-bg {
  position: fixed;
  inset: 0;
  background: rgba(15,23,42,.6);
  backdrop-filter: blur(3px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9000;   /* above everything */
}
.modal {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 14px;
  width: 440px;
  max-width: 96vw;
  max-height: 92vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0,0,0,.3);
  animation: modal-in .18s ease-out;
}
@keyframes modal-in {
  from { opacity:0; transform: scale(.95) translateY(-8px); }
  to   { opacity:1; transform: scale(1)   translateY(0); }
}
.modal-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px;
  border-bottom: 1px solid var(--border);
  font-weight: 700;
  font-size: 16px;
}
.modal-x {
  background: none;
  border: none;
  font-size: 18px;
  cursor: pointer;
  color: var(--text-3);
  width: 28px;
  height: 28px;
  border-radius: 6px;
  display: grid;
  place-items: center;
  transition: background .1s, color .1s;
}
.modal-x:hover { background: var(--bg3); color: var(--text); }
.modal-body { padding: 22px; display: flex; flex-direction: column; gap: 16px; }
.modal-footer {
  padding: 14px 22px;
  border-top: 1px solid var(--border);
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

/* ── FORM ELEMENTS (modal + config) ─────────────────────────────── */
.fg  { display: flex; flex-direction: column; gap: 5px; }
.fg label { font-size: 12px; font-weight: 600; color: var(--text-2); }
.frow { display: grid; grid-template-columns: 1fr 90px; gap: 14px; }
.fi {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  color: var(--text);
  font-family: var(--font);
  font-size: 13px;
  padding: 8px 10px;
  outline: none;
  width: 100%;
  transition: border-color .15s, box-shadow .15s;
}
.fi:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px var(--blue-bg);
}
.fi::placeholder { color: var(--text-3); }

/* ── AGENT PROFILE MODAL ──────────────────────────────────────── */
.modal-wide { width: 680px; max-width: 96vw; }

.prof-modal-title {
  display: flex;
  align-items: center;
  gap: 12px;
}
.pm-badge {
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
}
.pm-badge.online  { background: var(--green-bg); color: var(--green); }
.pm-badge.offline { background: var(--bg3); color: var(--text-3); }
.pm-badge.working { background: var(--amber-bg); color: var(--amber); }

/* Profile tabs */
.pm-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--border);
  padding: 0 22px;
  background: var(--bg3);
  overflow-x: auto;
  scrollbar-width: none;
}
.pm-tabs::-webkit-scrollbar { display: none; }
.pm-tab {
  padding: 9px 14px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-2);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  background: none;
  border-top: none;
  border-left: none;
  border-right: none;
  outline: none;
  font-family: var(--font);
  transition: color .12s, border-color .12s;
  white-space: nowrap;
}
.pm-tab:hover { color: var(--text); }
.pm-tab.active { color: var(--blue); border-bottom-color: var(--blue); }

/* Profile body */
.pm-body { padding: 18px 22px; min-height: 320px; max-height: 55vh; overflow-y: auto; }
.pm-pane { display: none; }
.pm-pane.active { display: block; }

/* Overview KV grid */
.pm-kv-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 14px;
}
.pm-kv {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 10px 12px;
}
.pm-kv-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: 3px;
}
.pm-kv-value {
  font-size: 13px;
  color: var(--text);
  font-weight: 500;
  word-break: break-all;
}
.pm-kv-value.mono { font-family: var(--mono); font-size: 11px; }
.pm-kv-value.green { color: var(--green); }
.pm-kv-value.purple { color: var(--purple); }
.pm-kv-value.div { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 4px; }

.pm-summary-box {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 12px 14px;
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.65;
}

/* Doc view (markdown-like) */
.pm-doc-view {
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.7;
}
.pm-doc-view h1,
.pm-doc-view h2 {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  margin: 14px 0 6px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--border);
}
.pm-doc-view h3 {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin: 12px 0 4px;
}
.pm-doc-view p { margin-bottom: 8px; }
.pm-doc-view ul, .pm-doc-view ol {
  padding-left: 20px;
  margin-bottom: 8px;
}
.pm-doc-view li { margin-bottom: 3px; }
.pm-doc-view code {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 1px 5px;
  font-family: var(--mono);
  font-size: 11px;
}
.pm-doc-view strong { color: var(--text); font-weight: 600; }
.pm-doc-view .doc-empty {
  color: var(--text-3);
  text-align: center;
  padding: 30px;
  font-style: italic;
}
.pm-doc-view pre {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 10px;
  font-family: var(--mono);
  font-size: 11px;
  overflow-x: auto;
  white-space: pre-wrap;
}
.pm-doc-loading {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-3);
  font-size: 13px;
  padding: 20px;
}

/* Live status grid in profile */
.pm-live-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pm-live-item {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 10px 14px;
}
.pm-live-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: 4px;
}
.pm-live-value {
  font-size: 13px;
  color: var(--text);
  line-height: 1.5;
}
.pm-live-value.task { color: var(--indigo); font-weight: 500; }
.pm-live-value.thought {
  color: var(--text-2);
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* "View Profile" mini button on agent cards */
.mc-profile-btn {
  font-size: 9px;
  color: var(--blue);
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px 0;
  font-family: var(--font);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 2px;
  opacity: 0;
  transition: opacity .15s;
}
.mc:hover .mc-profile-btn { opacity: 1; }

/* ── SCROLLBAR ── */
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:999px}

/* ── AUDIT LOG SUB-TABS ──────────────────────────────────────── */
.audit-subtabs {
  display: flex;
  gap: 0;
  border-bottom: 2px solid var(--border);
  padding: 0 2px;
  flex-shrink: 0;
}
.audit-stab {
  padding: 9px 16px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-2);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  background: none;
  border-top: none;
  border-left: none;
  border-right: none;
  outline: none;
  font-family: var(--font);
  transition: color .12s, border-color .12s;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 6px;
}
.audit-stab:hover { color: var(--text); }
.audit-stab.active { color: var(--blue); border-bottom-color: var(--blue); }
.audit-stab-cnt {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 1px 6px;
  font-size: 10px;
  font-weight: 600;
  color: var(--text-3);
}
.audit-pane { display: none; flex: 1; flex-direction: column; overflow: hidden; }
.audit-pane.active { display: flex; }

.audit-meta {
  font-size: 12px;
  color: var(--text-3);
  padding: 6px 0;
  display: flex;
  gap: 16px;
  flex-shrink: 0;
}
.audit-meta span { color: var(--text-2); }
.audit-meta strong { color: var(--text); }

/* Summary content */
.summary-content {
  flex: 1;
  overflow-y: auto;
  padding: 4px 0;
}
.sum-section {
  margin-bottom: 20px;
}
.sum-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 8px;
}
.sum-kv-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}
.sum-kv {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 10px 12px;
}
.sum-kv-label { font-size: 10px; font-weight: 600; color: var(--text-3); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 3px; }
.sum-kv-value { font-size: 15px; font-weight: 700; color: var(--text); }
.sum-kv-value.green  { color: var(--green); }
.sum-kv-value.purple { color: var(--purple); }
.sum-kv-value.amber  { color: var(--amber); }
.sum-talk-item {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-left: 3px solid var(--purple);
  border-radius: var(--r-sm);
  padding: 10px 12px;
  margin-bottom: 6px;
  font-size: 12px;
}
.sum-talk-hdr {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 4px;
  font-weight: 600;
  color: var(--text);
}
.sum-talk-ts { font-family: var(--mono); font-size: 10px; color: var(--text-3); }
.sum-talk-arrow { color: var(--purple); }
.sum-talk-msg { color: var(--text-2); }
.sum-talk-resp { color: var(--text-3); font-size: 11px; margin-top: 3px; }

.audit-tag {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
}
.audit-tag-boot      { background: var(--blue-bg);   color: var(--blue); }
.audit-tag-heartbeat { background: var(--bg3);        color: var(--text-3); }
.audit-tag-command   { background: var(--amber-bg);   color: var(--amber); }
.audit-tag-agent_talk{ background: var(--purple-bg);  color: var(--purple); }
.audit-tag-template_update { background: var(--blue-bg); color: var(--indigo); }
.audit-tag-error     { background: var(--red-bg);     color: var(--red); }

/* ── RESPONSIVE ── */
@media (max-width:1000px) {
  .layout { grid-template-columns: 1fr }
  .rpanel, .dash-side { display: none }
  .dash-main { border-right: none }
  .dept-strip { gap: 4px }
  .dstab { padding: 4px 8px; font-size: 11px }
  .mini-grid { gap: 6px }
  .mc { width: 130px }
}
@media (max-width:640px) {
  :root { --floor-h: 45vh }
  .hdr-chips .stat-chip { padding: 3px 8px }
  .chip-num { font-size: 14px }
  .nav-tabs { padding: 0 8px }
  .ntab { padding: 8px 10px; font-size: 12px }
  .mini-grid { gap: 5px }
  .mc { width: 120px; padding: 9px 8px }
}

/* ── P1.4 observability chips (mini-card): LLM provider + heartbeat staleness ── */
.mc-obs { display:flex; gap:4px; flex-wrap:wrap; margin-top:4px; }
.mc-chip {
  font-size:9.5px; line-height:1; font-weight:600;
  padding:2px 6px; border-radius:999px; white-space:nowrap;
}
.mc-chip-live { background:#dcfce7; color:#15803d; }
.mc-chip-warn { background:#fef3c7; color:#b45309; }

/* ── P1.4/P1.5 fleet rollup header chips: LLM-local + stale ── */
.chip-llmlocal .chip-num, .chip-stale .chip-num { color:#b45309; }
.chip-llmlocal .chip-lbl, .chip-stale .chip-lbl { color:#b45309; }
.stat-chip.chip-zero { opacity:.45; }
.stat-chip.chip-zero .chip-num, .stat-chip.chip-zero .chip-lbl { color:var(--text-3); }

/* ── P1.5 Agent Interaction Network tab ── */
.net-summary { font-size:11px; color:var(--text-3); margin-right:8px; font-family:var(--mono,monospace); }
.net-wrap { display:flex; gap:16px; align-items:flex-start; flex-wrap:wrap; }
.net-graph { flex:1 1 460px; min-width:320px; background:var(--bg2,#fff); border:1px solid var(--border,#e2e8f0);
  border-radius:12px; padding:8px; min-height:420px; display:flex; align-items:center; justify-content:center; }
.net-svg { width:100%; max-width:600px; height:auto; }
.net-empty { color:var(--text-3,#94a3b8); font-size:13px; text-align:center; padding:40px 16px; }
.net-side { flex:0 0 300px; max-width:340px; }
.net-stats { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:12px; }
.net-stats > div { background:var(--bg2,#fff); border:1px solid var(--border,#e2e8f0); border-radius:10px; padding:10px 12px; }
.net-stats b { display:block; font-size:18px; color:var(--text,#0f172a); font-family:var(--mono,monospace); }
.net-stats span { font-size:10.5px; color:var(--text-3,#94a3b8); }
.net-top-hdr { font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.04em; color:var(--text-3); margin:4px 0 6px; }
.net-top { display:flex; flex-direction:column; gap:4px; max-height:420px; overflow:auto; }
.net-edge { display:flex; align-items:center; gap:6px; font-size:11.5px; background:var(--bg2,#fff);
  border:1px solid var(--border,#e2e8f0); border-radius:8px; padding:5px 8px; color:var(--text-2,#475569); }
.net-edge > span { flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.net-edge-arrow { flex:0 0 auto !important; color:var(--text-3); }
.net-edge b { flex:0 0 auto; color:var(--green,#16a34a); font-family:var(--mono,monospace); }
.net-edge-click { cursor:pointer; transition:all .12s; }
.net-edge-click:hover { border-color:var(--green); background:var(--green-bg); }

/* Network animation + zoom */
.net-graph { position:relative; }
.net-svg { touch-action:none; }
.net-dot { filter:drop-shadow(0 0 2px #5b8def); }
.net-pulse { opacity:0; transform-box:fill-box; transform-origin:center;
  animation:netpulse 2.6s ease-out infinite; }
@keyframes netpulse { 0%{opacity:.5;transform:scale(1)} 70%{opacity:0;transform:scale(2.2)} 100%{opacity:0;transform:scale(2.2)} }
@media (prefers-reduced-motion: reduce){ .net-dot,.net-pulse{animation:none;display:none} }
.net-zoom-ctrl { position:absolute; top:10px; right:10px; z-index:2; display:flex; flex-direction:column; gap:4px; }
.net-zoom-ctrl button { width:30px; height:30px; border-radius:8px; border:1px solid var(--border);
  background:var(--bg2); color:var(--text); font-size:16px; cursor:pointer; line-height:1;
  box-shadow:var(--shadow); transition:all .12s; }
.net-zoom-ctrl button:hover { background:var(--green-bg); color:var(--green); border-color:var(--green); }

/* Network detail / message-flow panel */
.net-back { margin-bottom:10px; }
.net-detail-hdr { font-size:13.5px; font-weight:600; display:flex; align-items:center; gap:6px; }
.net-detail-sub { font-size:11px; color:var(--text-3); margin:3px 0 10px; }
.net-msgs { display:flex; flex-direction:column; gap:8px; max-height:520px; overflow:auto; }
.net-msg { background:var(--bg2,#fff); border:1px solid var(--border); border-radius:8px; padding:8px 10px; }
.net-msg-route { font-size:11px; font-weight:600; color:var(--text-2); margin-bottom:2px; }
.net-msg-ts { font-size:10px; color:var(--text-3); font-family:var(--mono); margin-bottom:5px; }
.net-msg-q, .net-msg-a { font-size:12px; line-height:1.45; margin-top:4px; padding-left:38px; position:relative; word-break:break-word; }
.net-msg-q span, .net-msg-a span { position:absolute; left:0; top:0; font-size:9px; font-weight:600;
  padding:1px 5px; border-radius:8px; text-transform:uppercase; letter-spacing:.03em; }
.net-msg-q { color:var(--text); }
.net-msg-q span { background:var(--blue-bg,#e0edff); color:var(--blue,#2563eb); }
.net-msg-a { color:var(--text-2); }
.net-msg-a span { background:var(--green-bg); color:var(--green); }

/* ══ Telegram Router admin panel ══════════════════════════════════ */
.tg-chip{font-size:11px;padding:3px 10px;border-radius:20px;background:var(--bg3);
  color:var(--text-2);border:1px solid var(--border);font-family:var(--mono)}
.tg-chip-ok{color:var(--green);background:var(--green-bg);border-color:var(--green)}
.tg-chip-err{color:var(--red);background:var(--red-bg);border-color:var(--red)}
.tg-count{display:inline-block;min-width:20px;text-align:center;background:var(--green);
  color:#fff;border-radius:20px;font-size:11px;padding:1px 7px;margin-left:4px}
.tg-empty{color:var(--text-3);font-size:13px;padding:10px 0}
.tg-mono{font-family:var(--mono);font-size:11px;color:var(--text-3)}
.tg-code{font-family:var(--mono);font-size:11px;background:var(--amber-bg);color:var(--amber);
  padding:1px 6px;border-radius:var(--r-sm);margin-left:6px}
.tg-user-row{display:flex;justify-content:space-between;align-items:center;gap:10px;
  padding:8px 0;border-bottom:1px solid var(--border)}
.tg-user-row:last-child{border-bottom:none}
.tg-user-id{font-size:13px}
.tg-actions{display:flex;gap:6px;flex-shrink:0}
.tg-user-card{padding:10px 0;border-bottom:1px solid var(--border)}
.tg-user-card:last-child{border-bottom:none}
.tg-user-hdr{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:8px;font-size:13px}
.tg-agchips{display:flex;flex-wrap:wrap;gap:6px}
.tg-agchip{display:inline-flex;align-items:center;gap:4px;font-size:11px;padding:4px 9px;
  border-radius:20px;border:1px solid var(--border);background:var(--bg3);color:var(--text-2);
  cursor:pointer;user-select:none;transition:all .15s}
.tg-agchip.on{background:var(--green-bg);color:var(--green);border-color:var(--green)}
.tg-agchip input{display:none}
.tg-topic-row{margin-bottom:8px}

/* ══ Agent Accountability (ดูแลระบบ) ══════════════════════════════ */
#tab-ops { padding:18px 22px; overflow-y:auto; }
.ops-form { margin:10px 0 16px; }
.ops-form h3 { font-size:14px; font-weight:600; margin-bottom:12px; }
.ops-card { background:var(--bg2); border:1px solid var(--border); border-left:3px solid var(--border);
  border-radius:var(--r); padding:12px 14px; margin-bottom:10px; }
.ops-card.ops-ok   { border-left-color:var(--green); }
.ops-card.ops-warn { border-left-color:var(--amber,#d97706); }
.ops-card.ops-bad  { border-left-color:var(--red,#dc2626); opacity:.92; }
.ops-card-hdr { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }
.ops-agent { display:flex; gap:10px; align-items:center; }
.ops-ic { width:34px; height:34px; border-radius:9px; display:grid; place-items:center; font-size:17px; flex-shrink:0; }
.ops-name { font-weight:600; font-size:13.5px; }
.ops-role { font-size:11px; color:var(--text-3); }
.ops-live { text-align:right; flex-shrink:0; }
.ops-status { display:inline-block; font-size:11px; font-weight:600; padding:2px 9px; border-radius:20px; }
.ops-status-ok   { background:var(--green-bg); color:var(--green); }
.ops-status-warn { background:var(--amber-bg,#fef3c7); color:var(--amber,#b45309); }
.ops-status-bad  { background:var(--red-bg,#fee2e2); color:var(--red,#dc2626); }
.ops-age { display:block; font-size:10px; color:var(--text-3); font-family:var(--mono); margin-top:3px; }
.ops-task { font-size:11.5px; color:var(--text-2); margin:8px 0; padding:5px 8px; background:var(--bg3); border-radius:6px; }
.ops-task b { color:var(--text); font-weight:500; }
.ops-duties { display:flex; flex-direction:column; gap:6px; }
.ops-duty { border:1px solid var(--border); border-radius:8px; padding:7px 9px; }
.ops-duty-main { display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.ops-duty-title { font-size:12.5px; font-weight:500; flex:1; min-width:160px; }
.ops-pri { font-size:10px; font-weight:700; padding:1px 6px; border-radius:5px; font-family:var(--mono); }
.ops-pri-P1 { background:var(--red-bg,#fee2e2); color:var(--red,#dc2626); }
.ops-pri-P2 { background:var(--amber-bg,#fef3c7); color:var(--amber,#b45309); }
.ops-pri-P3 { background:var(--bg3); color:var(--text-3); }
.ops-tag { font-size:10px; padding:1px 7px; border-radius:10px; background:var(--bg3); color:var(--text-3); }
.ops-duty-meta { display:flex; align-items:center; gap:10px; margin-top:5px; flex-wrap:wrap; }
.ops-sig { font-size:11px; font-weight:600; }
.ops-sig-ok { color:var(--green); } .ops-sig-warn { color:var(--amber,#b45309); } .ops-sig-bad { color:var(--red,#dc2626); }
.ops-kpi { font-size:10.5px; color:var(--text-3); }
.ops-duty-act { margin-left:auto; display:flex; gap:3px; }
.ops-noduty { font-size:11.5px; color:var(--text-3); padding:4px 2px; }
.ops-add { margin-top:8px; }

/* Phase 2 probe additions */
.ops-tag-probe { background:#1e293b; color:#7dd3fc; }
.ops-sig-idle { color:var(--text-3); }
.ops-pdetail { font-size:10.5px; color:var(--text-3); font-family:var(--mono); }

/* ══ Telegram Forum-topic auto-create ══════════════════════════════ */
.tg-steps{margin:6px 0 14px;padding:12px 14px 12px 30px;background:var(--bg3);border:1px solid var(--border);
  border-radius:var(--r);font-size:12.5px;line-height:1.7;color:var(--text-2)}
.tg-steps li{margin:5px 0}
.kbd{font-family:var(--mono);font-size:11px;border:1px solid var(--border);border-bottom-width:2px;
  border-radius:5px;padding:0 5px;background:var(--bg2);color:var(--text)}
.tg-auto{border:1px dashed var(--border);border-radius:var(--r);padding:12px;margin-bottom:14px}
.tg-grp-status{margin:10px 0;padding:10px 12px;border-radius:var(--r-sm);font-size:12.5px;
  background:var(--bg3);border:1px solid var(--border)}
.tg-grp-status.ok{border-color:var(--green);background:var(--green-bg)}
.tg-grp-status.no{border-color:var(--red);background:var(--red-bg)}
.tg-chk-title{font-weight:600;margin-bottom:6px;color:var(--text)}
.tg-chk{font-size:12px;margin:2px 0}
.tg-chk.ok{color:var(--green)} .tg-chk.no{color:var(--red)}
.tg-chk-err{margin-top:6px;font-size:11.5px;color:var(--red)}
.tg-pick-hdr{display:flex;justify-content:space-between;align-items:center;margin:8px 0 8px;font-size:12.5px;font-weight:600}
.tg-pick-actions{display:flex;gap:6px}
.tg-agchip.has{opacity:.6}
.tg-agchip.has input{accent-color:var(--text-3)}
.tg-map-hdr{display:flex;justify-content:space-between;align-items:center;margin:14px 0 6px;
  font-size:12.5px;font-weight:600;border-top:1px solid var(--border);padding-top:12px}
.tg-map-head,.tg-map-row{display:grid;grid-template-columns:160px 120px 1fr 34px;gap:8px;align-items:center}
.tg-map-head{font-size:10px;text-transform:uppercase;letter-spacing:.04em;color:var(--text-3);margin-bottom:4px;padding:0 2px}
.tg-map-row{margin-bottom:6px}

/* Auto-notify rules list */
.nr-row{display:flex;justify-content:space-between;align-items:center;gap:10px;
  padding:8px 0;border-bottom:1px solid var(--border)}
.nr-row:last-child{border-bottom:none}
.nr-main{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12.5px}
.nr-agent{font-weight:600}
.nr-state{font-size:11px;font-weight:700}
.nr-state.on{color:var(--green)} .nr-state.off{color:var(--text-3)}

/* Auto-notify bulk bar */
.nr-bulkbar{display:flex;justify-content:space-between;align-items:center;gap:10px;
  padding:8px 0;margin-bottom:4px;border-bottom:1px dashed var(--border);flex-wrap:wrap}
.nr-bulk-all{font-size:12px;color:var(--text-2);display:flex;align-items:center;gap:6px;cursor:pointer}
.nr-pick{accent-color:var(--green);margin-right:2px}
.nr-main{display:flex;align-items:center;gap:8px;flex-wrap:wrap}

/* ══ Phase 3 console ══════════════════════════════════════════════ */
.p3-badge{font-size:10px;font-weight:700;background:var(--amber-bg,#fef3c7);color:var(--amber,#b45309);
  padding:2px 9px;border-radius:20px;margin-left:8px;vertical-align:middle}
.p3-badge-live{background:var(--red-bg,#fee2e2);color:var(--red,#dc2626);
  animation:p3-live-pulse 1.6s ease-in-out infinite}
@keyframes p3-live-pulse{0%,100%{opacity:1}50%{opacity:.55}}
.p3-status .p3-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
@media(max-width:760px){.p3-status .p3-grid{grid-template-columns:repeat(3,1fr)}}
.p3-grid > div{background:var(--bg3);border:1px solid var(--border);border-radius:8px;padding:8px 10px}
.p3-grid b{display:block;font-size:14px;font-family:var(--mono)}
.p3-grid span{font-size:10px;color:var(--text-3)}
.p3-act{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:7px 0;border-bottom:1px solid var(--border)}
.p3-act:last-child{border-bottom:none}
.p3-act-main{display:flex;align-items:center;gap:7px;flex-wrap:wrap;font-size:12.5px}
.p3-tool{margin:2px}
.p3-actrow{display:flex;align-items:center;gap:7px;font-size:12px;padding:4px 0;border-bottom:1px solid var(--border)}
.p3-actrow:last-child{border-bottom:none}
.p3-actres{color:var(--text-3);font-family:var(--mono);font-size:11px}

/* Per-agent model persist badge */
.pam-persist{font-size:10.5px;padding:1px 7px;border-radius:10px;white-space:nowrap;flex-shrink:0}
.pam-persist.ok{background:var(--green-bg);color:var(--green)}
.pam-persist.sync{background:var(--amber-bg,#fef3c7);color:var(--amber,#b45309)}
.pam-persist.warn{background:var(--bg3);color:var(--text-3)}

/* gateway test result */
.gw-testres{font-size:11px;padding:5px 9px;border-radius:var(--r-sm);margin:2px 0 8px;background:var(--bg3)}
.gw-testres.ok{color:var(--green);background:var(--green-bg)}
.gw-testres.warn{color:var(--amber,#b45309);background:var(--amber-bg,#fef3c7)}
.gw-testres.err{color:var(--red);background:var(--red-bg)}