/* Onion AI Workspace module — all selectors scoped under .oaiw-root
   so the module can mount inside the OnionAI.oc Agents & Bots tab
   without touching the host page's styles. */
.oaiw-root {
  background: radial-gradient(1200px 600px at 85% -10%,
      rgba(139, 92, 246, .16), transparent 60%),
    radial-gradient(900px 500px at -10% 0%,
      rgba(0, 229, 255, .10), transparent 55%),
    var(--oaiw-bg);
  color: var(--oaiw-text);
  font-family: var(--oaiw-font);
  font-size: var(--oaiw-size-m);
  line-height: 1.45;
  padding: var(--oaiw-space-4);
  box-sizing: border-box;
}
.oaiw-root *, .oaiw-root *::before, .oaiw-root *::after {
  box-sizing: inherit;
}
.oaiw-head { display: flex; align-items: center; gap: var(--oaiw-space-3);
  flex-wrap: wrap; margin-bottom: var(--oaiw-space-4); }
.oaiw-logo { width: 40px; height: 40px; border-radius: var(--oaiw-radius-m);
  background: linear-gradient(135deg, var(--oaiw-violet), var(--oaiw-cyan));
  display: grid; place-items: center; box-shadow: var(--oaiw-glow-violet); }
.oaiw-logo svg { width: 24px; height: 24px; }
.oaiw-title { font-size: var(--oaiw-size-xl); font-weight: 700;
  letter-spacing: .2px; }
.oaiw-subtitle { color: var(--oaiw-dim); font-size: var(--oaiw-size-s); }
.oaiw-pill { margin-left: auto; display: inline-flex; align-items: center;
  gap: var(--oaiw-space-2); padding: var(--oaiw-space-1) var(--oaiw-space-3);
  border: 1px solid var(--oaiw-line); border-radius: var(--oaiw-radius-pill);
  background: var(--oaiw-panel); font-size: var(--oaiw-size-s);
  color: var(--oaiw-dim); }
.oaiw-grid { display: grid; gap: var(--oaiw-space-4);
  grid-template-columns: 1fr; }
@media (min-width: 880px) {
  .oaiw-grid { grid-template-columns: 1fr 1fr; }
  .oaiw-span2 { grid-column: span 2; }
}
.oaiw-card { background: linear-gradient(180deg, var(--oaiw-panel-2),
    var(--oaiw-panel)); border: 1px solid var(--oaiw-line-soft);
  border-radius: var(--oaiw-radius-l); padding: var(--oaiw-space-4);
  box-shadow: var(--oaiw-shadow-1); }
.oaiw-card h3 { margin: 0 0 var(--oaiw-space-2); font-size:
  var(--oaiw-size-l); display: flex; align-items: center;
  gap: var(--oaiw-space-2); }
.oaiw-card h3 svg { width: 19px; height: 19px; flex: none; }
.oaiw-card .oaiw-note { color: var(--oaiw-dim);
  font-size: var(--oaiw-size-s); margin: var(--oaiw-space-2) 0; }
.oaiw-dot { width: 9px; height: 9px; border-radius: 50%; flex: none;
  display: inline-block; }
.oaiw-dot.live { background: var(--oaiw-live);
  box-shadow: 0 0 8px var(--oaiw-live); }
.oaiw-dot.stale { background: var(--oaiw-stale);
  box-shadow: 0 0 8px var(--oaiw-stale); }
.oaiw-dot.offline, .oaiw-dot.unknown { background: var(--oaiw-off);
  box-shadow: 0 0 8px var(--oaiw-off); }
.oaiw-row { display: flex; align-items: center; gap: var(--oaiw-space-2);
  padding: var(--oaiw-space-2) 0; border-bottom: 1px solid
  var(--oaiw-line-soft); flex-wrap: wrap; }
.oaiw-row:last-child { border-bottom: none; }
.oaiw-row .oaiw-grow { flex: 1; min-width: 140px; }
.oaiw-name { font-weight: 600; }
.oaiw-meta { color: var(--oaiw-dim); font-size: var(--oaiw-size-s); }
.oaiw-badge { font-size: var(--oaiw-size-xs); padding: 2px var(--oaiw-space-2);
  border-radius: var(--oaiw-radius-pill); border: 1px solid var(--oaiw-line);
  color: var(--oaiw-dim); font-family: var(--oaiw-font-mono); }
.oaiw-badge.cloud { color: var(--oaiw-cyan); border-color:
  var(--oaiw-cyan-dim); }
.oaiw-badge.local { color: var(--oaiw-violet); border-color:
  var(--oaiw-violet-soft); }
.oaiw-btn { appearance: none; border: 1px solid var(--oaiw-line);
  background: var(--oaiw-panel-3); color: var(--oaiw-text);
  border-radius: var(--oaiw-radius-m); padding: var(--oaiw-space-2)
  var(--oaiw-space-3); font: inherit; font-size: var(--oaiw-size-s);
  cursor: pointer; display: inline-flex; align-items: center;
  gap: var(--oaiw-space-2); min-height: 38px; }
.oaiw-btn:hover { border-color: var(--oaiw-cyan-dim);
  box-shadow: var(--oaiw-glow-cyan); }
.oaiw-btn.primary { background: linear-gradient(135deg,
    var(--oaiw-violet-soft), var(--oaiw-cyan-dim)); border: none;
  font-weight: 600; }
.oaiw-btn.danger { border-color: var(--oaiw-off); color: var(--oaiw-off);
  background: transparent; }
.oaiw-btn[disabled] { opacity: .45; cursor: not-allowed;
  box-shadow: none; }
.oaiw-btn svg { width: 15px; height: 15px; }
.oaiw-input, .oaiw-select, .oaiw-textarea {
  width: 100%; background: var(--oaiw-bg-2); color: var(--oaiw-text);
  border: 1px solid var(--oaiw-line); border-radius: var(--oaiw-radius-m);
  padding: var(--oaiw-space-2) var(--oaiw-space-3); font: inherit;
  font-size: var(--oaiw-size-m); min-height: 40px; }
.oaiw-textarea { min-height: 74px; resize: vertical; }
.oaiw-input:focus, .oaiw-select:focus, .oaiw-textarea:focus {
  outline: 2px solid var(--oaiw-cyan-dim); outline-offset: 1px; }
.oaiw-form { display: grid; gap: var(--oaiw-space-2);
  margin-top: var(--oaiw-space-3); }
.oaiw-formrow { display: flex; gap: var(--oaiw-space-2); flex-wrap: wrap; }
.oaiw-formrow > * { flex: 1; min-width: 130px; }
.oaiw-formrow > .oaiw-btn { flex: 0 0 auto; }
.oaiw-output { background: var(--oaiw-bg-2); border: 1px solid
  var(--oaiw-line-soft); border-radius: var(--oaiw-radius-m);
  padding: var(--oaiw-space-3); font-size: var(--oaiw-size-s);
  white-space: pre-wrap; word-break: break-word; margin-top:
  var(--oaiw-space-3); max-height: 320px; overflow: auto; }
.oaiw-output:empty { display: none; }
.oaiw-mono { font-family: var(--oaiw-font-mono);
  font-size: var(--oaiw-size-xs); }
.oaiw-feed { max-height: 260px; overflow: auto; }
.oaiw-feed .oaiw-row { padding: var(--oaiw-space-1) 0; }
.oaiw-chips { display: flex; gap: var(--oaiw-space-1); flex-wrap: wrap; }
.oaiw-chip { font-size: var(--oaiw-size-xs); background: var(--oaiw-panel-3);
  border-radius: var(--oaiw-radius-pill); padding: 2px var(--oaiw-space-2);
  color: var(--oaiw-dim); }
.oaiw-chip.on { color: var(--oaiw-live); }
.oaiw-stat { display: inline-block; margin-right: var(--oaiw-space-4); }
.oaiw-stat b { font-size: var(--oaiw-size-l); display: block; }
.oaiw-stat span { color: var(--oaiw-dim); font-size: var(--oaiw-size-xs);
  text-transform: uppercase; letter-spacing: .6px; }
.oaiw-offline-banner { border: 1px solid var(--oaiw-off);
  color: var(--oaiw-off); border-radius: var(--oaiw-radius-m);
  padding: var(--oaiw-space-3); margin-bottom: var(--oaiw-space-4);
  background: rgba(255, 84, 112, .07); font-size: var(--oaiw-size-s); }
.oaiw-tabs { display: flex; gap: var(--oaiw-space-1); flex-wrap: wrap;
  margin-bottom: var(--oaiw-space-3); }
.oaiw-tab { border: 1px solid var(--oaiw-line); background: transparent;
  color: var(--oaiw-dim); border-radius: var(--oaiw-radius-pill);
  padding: var(--oaiw-space-1) var(--oaiw-space-3); cursor: pointer;
  font: inherit; font-size: var(--oaiw-size-s); min-height: 34px; }
.oaiw-tab.on { color: var(--oaiw-text); border-color: var(--oaiw-cyan-dim);
  background: var(--oaiw-panel-3); }
a.oaiw-link { color: var(--oaiw-cyan); text-decoration: none; }
a.oaiw-link:hover { text-decoration: underline; }