/* AgentX Web Shell — design primitives: the one vocabulary every page uses.
   Brand wordmark, buttons, form fields, meta-labels, badges, live dots.
   Page stylesheets (shell/console/settings/public) do layout only — if a
   rule here needs a per-page variant, that's a design fork; don't. */

/* ---------- brand wordmark (serif, theme-aware) ---------- */
.brand{display:flex;align-items:center;gap:10px;font-family:var(--serif);
  font-size:22px;letter-spacing:.3px;text-decoration:none;color:inherit}
.brand .dot{width:9px;height:9px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 0 3px var(--accent-soft)}
.brand b{font-weight:400}
.brand b i{font-style:italic;color:var(--accent)}

/* ---------- buttons: flat rounded-rect, one family ---------- */
.btn-primary,.btn-ghost,.btn-danger{display:inline-flex;align-items:center;
  justify-content:center;gap:7px;border-radius:9px;font-size:13px;cursor:pointer;
  text-decoration:none;font-family:var(--sans)}
.btn-primary{padding:9px 18px;border:0;background:var(--accent);
  color:var(--accent-ink);font-weight:600}
.btn-primary:hover{filter:brightness(1.07)}
.btn-primary svg{width:15px;height:15px}
.btn-ghost{padding:9px 16px;border:1px solid var(--border);background:transparent;
  color:var(--txt-dim)}
.btn-ghost:hover{color:var(--txt);border-color:var(--border-strong)}
.btn-danger{padding:9px 18px;border:0;background:var(--danger);color:#fff;font-weight:600}
.btn-danger:hover{filter:brightness(.92)}
.btn-lg{padding:12px 26px;font-size:15px;border-radius:11px}
.btn-block{width:100%}
.ghostbtn{font-size:12.5px;color:var(--txt-dim);background:transparent;
  border:1px solid var(--border);padding:6px 12px;border-radius:8px;cursor:pointer}
.ghostbtn:hover{color:var(--txt);border-color:var(--border-strong)}

/* ---------- meta-label: the "~ LABEL" signature ---------- */
.meta-label{font-family:var(--mono);font-size:12px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--accent);display:flex;align-items:center;gap:7px}
.meta-label::before{content:"~"}
.meta-label.dim{color:var(--txt-faint)}

/* ---------- form fields: mono-uppercase labels, one input style ---------- */
.fld > label{display:block;font-family:var(--mono);font-size:11.5px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--txt-faint);
  margin-bottom:7px;font-weight:400}
.fld input[type=text],.fld input[type=email],.fld input[type=password]{
  width:100%;background:var(--bg-2);border:1px solid var(--border);border-radius:10px;
  padding:10px 12px;color:var(--txt);font-family:var(--sans);font-size:14px;outline:none}
.fld input:focus{border-color:var(--focus)}
.fld input::placeholder{color:var(--txt-faint)}
.fld textarea{width:100%;background:var(--bg-2);border:1px solid var(--border);
  border-radius:10px;padding:10px 12px;color:var(--txt);font-family:var(--sans);
  font-size:14px;outline:none;resize:none;min-height:64px}
.fld textarea:focus{border-color:var(--focus)}
.fld select{width:100%;background:var(--bg-2);border:1px solid var(--border);
  border-radius:10px;padding:10px 12px;color:var(--txt);font-family:var(--sans);
  font-size:14px;outline:none}
.fld select:focus{border-color:var(--focus)}
.select-sm{background:var(--panel-2);border:1px solid var(--border);border-radius:8px;
  padding:5px 9px;color:var(--txt-dim);font-family:var(--sans);font-size:12.5px;
  outline:none;cursor:pointer}
.select-sm:focus{border-color:var(--focus)}
.select-sm:disabled{opacity:.45;cursor:default}
.fld label .opt{font-size:10px;color:var(--txt-faint);letter-spacing:.06em;
  margin-left:6px}

/* ---------- composer box (transcript composer + modal kick-off) ---------- */
.composer-box{border:1px solid var(--border);background:var(--panel);border-radius:14px;
  padding:12px 14px;display:flex;flex-direction:column;gap:10px}
.composer-box:focus-within{border-color:var(--focus)}
.composer-box textarea{width:100%;border:0;background:transparent;color:var(--txt);resize:none;
  font-family:var(--sans);font-size:14px;outline:none;min-height:24px}
.composer-box textarea::placeholder{color:var(--txt-faint)}
.composer-row{display:flex;align-items:center;gap:9px}
.composer-row .left{display:flex;gap:7px;color:var(--txt-faint)}
.composer-row .sp{flex:1}
.agent-tag{font-size:12px;color:var(--txt-dim);display:flex;align-items:center;gap:6px;
  white-space:nowrap}
.agent-tag .mini{width:7px;height:7px;border-radius:50%;background:var(--busy)}
.send{width:32px;height:32px;border-radius:9px;border:0;background:var(--accent);color:var(--accent-ink);
  display:grid;place-items:center;cursor:pointer}
.send svg{width:16px;height:16px}
.fld .hint{font-size:12.5px;color:var(--txt-faint);margin-top:7px}
.fld .hint a{color:var(--accent);text-decoration:none}
.fld .hint a:hover{text-decoration:underline}
.checks{display:flex;flex-wrap:wrap;gap:8px}
.checks label{display:inline-flex;align-items:center;gap:7px;margin:0;
  font-family:var(--sans);font-size:13.5px;letter-spacing:0;text-transform:none;
  color:var(--txt-dim);border:1px solid var(--border);border-radius:999px;
  padding:7px 13px;background:var(--bg-2);cursor:pointer}
.checks label:hover{border-color:var(--border-strong)}
.checks input{accent-color:var(--accent)}
.form-error{background:var(--danger-soft);color:var(--danger-text);
  border:1px solid color-mix(in srgb,var(--danger) 40%,transparent);
  border-radius:9px;padding:10px 13px;font-size:13.5px}

/* ---------- tabs + panels ---------- */
.tabs{display:flex;border-bottom:1px solid var(--border);margin-bottom:20px}
.tabs .tab{flex:1;padding:10px;background:none;border:0;cursor:pointer;
  font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--txt-faint);border-bottom:2px solid transparent;margin-bottom:-1px;
  white-space:nowrap}
.tabs .tab:hover{color:var(--txt-dim)}
.tabs .tab.active{color:var(--accent);border-bottom-color:var(--accent)}
.tabs.fit .tab{flex:0 0 auto;padding:10px 16px}
.panel{display:none}
.panel.active{display:block}

/* ---------- segmented control: pill group of mutually-exclusive buttons ---------- */
/* Used by the console view switcher and the /agents roster filter; page CSS
   adds only layout/responsive tweaks on top of this base chrome. */
.seg{display:flex;background:var(--panel);border:1px solid var(--border);
  border-radius:10px;padding:3px}
/* The console view toggle renders as <a> permalinks (#28, no-JS navigable); the
   /agents roster filter still uses <button>. Both share this segmented chrome. */
.seg button,.seg a{display:flex;align-items:center;gap:7px;padding:6px 13px;border-radius:7px;
  font-size:13px;color:var(--txt-dim);cursor:pointer;user-select:none;white-space:nowrap;
  background:none;border:0;text-decoration:none}
.seg button svg,.seg a svg{width:15px;height:15px}
.seg button:hover,.seg a:hover{color:var(--txt)}
.seg button.active,.seg a.active{background:var(--accent);color:var(--accent-ink);font-weight:600}

/* ---------- badges ---------- */
.badge{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;padding:2px 7px;
  border-radius:5px;font-family:var(--sans);font-weight:600}
.badge.busy{background:var(--busy-soft);color:var(--busy)}
.badge.idle{background:var(--ok-soft);color:var(--ok)}
.badge.waiting{background:var(--wait-soft);color:var(--wait)}
.badge.starting{background:var(--start-soft);color:var(--start)}
.badge.stopped{background:var(--panel-2);color:var(--txt-faint)}
.badge-success{background:var(--ok-soft);color:var(--ok);font-size:11px;padding:2px 8px;
  border-radius:999px;font-weight:600}
.badge-muted{background:var(--panel-2);color:var(--txt-faint);font-size:11px;padding:2px 8px;
  border-radius:999px;font-weight:600}

/* ---------- row lists: stacked item rows inside cards ---------- */
.row-list .item{display:flex;gap:12px;align-items:center;padding:12px 0;
  border-top:1px solid var(--border-soft)}
.row-list .item:first-child{border-top:0;padding-top:0}
.row-list .it-main{min-width:0;flex:1}
.row-list .it-name{font-size:13.5px;font-weight:600}
.row-list .it-desc{font-size:12px;color:var(--txt-faint);margin-top:2px}
.row-list .it-meta{font-family:var(--mono);font-size:11.5px;color:var(--txt-faint);
  white-space:nowrap}
.row-list .item.off .it-name,.row-list .item.off .it-desc{color:var(--txt-faint)}

/* ---------- live dot: pulsing state indicator ---------- */
.live-dot{width:7px;height:7px;border-radius:50%;background:var(--ok);flex:none;
  animation:pulse 1.4s ease-in-out infinite}
.live-dot.busy{background:var(--busy)}

/* ---------- run LED: one per terminal, reflects the session RunState ---------- */
.run-led{width:9px;height:9px;border-radius:50%;flex:none}
.run-led.busy{background:var(--busy);animation:pulse 1.4s ease-in-out infinite}
.run-led.idle{background:var(--ok)}
.run-led.waiting{background:var(--wait);animation:pulse 2.4s ease-in-out infinite}
.run-led.starting{background:var(--start);animation:pulse .9s ease-in-out infinite}