* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: #0f0f1a;
  color: #c8d6e5;
  padding: 20px;
  font-size: 14px;
}

h1 { font-size: 18px; font-weight: 600; color: #fff; }
h2 { font-size: 15px; font-weight: 600; color: #a4b8d4; margin-bottom: 4px; }

.section-desc { font-size: 12px; color: #5a7a8a; margin-bottom: 10px; }
h3 { font-size: 13px; font-weight: 600; color: #7a9ab5; margin-bottom: 6px; }

/* layout */
header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid #1e2a3a;
  gap: 12px;
  flex-wrap: wrap;
}

header .brand { display: flex; align-items: center; }
header .brand img { height: 30px; display: block; }
header .info {
  display: flex;
  gap: 14px;
  font-size: 12px;
  color: #6b8299;
  flex-wrap: wrap;
}

header .info span { display: flex; align-items: center; gap: 4px; }
header .info .label { color: #4a6572; }
header .info .exit-btn {
  color: #4a6572;
  padding: 2px 5px;
  border-radius: 3px;
}
header .info .exit-btn:hover { color: #ff6b8a; background: #2a1a1a; }
header .info .pause-btn {
  color: #4a6572;
  padding: 2px 5px;
  border-radius: 3px;
}
header .info .pause-btn:hover { color: #ffb84d; background: #2a220f; }
header .info .pause-btn.active { color: #ffb84d; background: #2a220f; }
.paused-banner {
  display: none;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  margin-bottom: 14px;
  background: #2a220f;
  border: 1px solid #6b4f1a;
  border-radius: 4px;
  color: #ffb84d;
  font-size: 13px;
  font-weight: 500;
}
.paused-banner.visible { display: flex; }
.paused-banner button { margin-left: auto; }
header .nav { display: flex; gap: 6px; align-items: center; }
header .nav a {
  color: #5a8ab5;
  text-decoration: none;
  font-size: 12px;
  padding: 3px 8px;
  border-radius: 3px;
}

header .nav a:hover { background: #1a2a4d; }

.section { margin-bottom: 20px; }

/* tabs */
.tabs {
  display: flex;
  gap: 2px;
  margin-bottom: 14px;
  /* the rule runs the full width; the active tab's accent sits on top of it */
  border-bottom: 1px solid #1e2a3a;
}

.tab {
  padding: 8px 18px 7px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  color: #5a7a95;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  border-radius: 4px 4px 0 0;
  transition: color .12s, background .12s, border-color .12s;
}

.tab:hover { color: #8fa8bf; background: #14142c; }
.tab.active {
  color: #8ab4ff;
  background: none;
  border-bottom-color: #8ab4ff;
}
.tab-pane { display: none; }
.tab-pane.active { display: block; }

.card {
  background: #16162a;
  border-radius: 8px;
  padding: 16px;
  border: 1px solid #1e2a3a;
  margin-bottom: 14px;
}

.card-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

/* The heading row owns the spacing below it, so the h2 inside contributes
   none. Otherwise a bare <h2> card and a .card-title card sit differently. */
.card-title h2,
.log-controls h2 { margin-bottom: 0; }

/* trickset / model scope bar */
.ts-bar,
.ms-bar {
  padding: 0px 6px;
  margin-bottom: 14px;
}

.ts-pills {
  display: flex;
  gap: 4px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.pill {
  display: inline-block;
  padding: 3px 12px;
  border-radius: 12px;
  font-size: 12px;
  cursor: pointer;
  background: #12122a;
  color: #5a7a95;
  border: 1px solid #1e2a3a;
  transition: background .12s;
}

.pill:hover { background: #1a1a3a; }
.pill.active { background: #1a2a4d; color: #8ab4ff; border-color: #2a4a6a; }
.pill-add {
  background: transparent;
  color: #4a7a5a;
  border: 1px dashed #2a4a3a;
}

.pill-add:hover { background: #1a2a1a; }
.pill-unloaded { opacity: .6; }

.ts-filters {
  display: flex;
  gap: 16px;
  font-size: 12px;
  margin-left: 8px;
  color: #7a9ab5;
}

.ts-filters span {
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
}

.ts-filters span:hover .val { text-decoration-color: #5a8ab5; }

.ts-filters .ts-delete {
  color: #4a6572;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: #2a3a4a;
  text-underline-offset: 3px;
  margin-left: auto;
}
.ts-filters .ts-delete:hover { color: #ff6b8a; }
.ts-filters .val {
  font-family: monospace;
  text-decoration: underline;
  text-decoration-color: #2a3a4a;
  text-underline-offset: 3px;
}

.ts-filters .val input {
  background: #0f0f1a;
  border: 1px solid #2a3a4a;
  border-radius: 3px;
  padding: 2px 6px;
  color: #c8d6e5;
  font-family: monospace;
  font-size: 12px;
  width: 140px;
}

.ts-filters .val input:focus {
  outline: none;
  border-color: #5a8ab5;
}

/* settings */
.settings-group {
  display: grid;
  grid-template-columns: 100px 1fr;
  align-items: center;
  gap: 12px 14px;
  max-width: 640px;
  margin-top: 8px;
}

.setting-row {
  display: contents;
}

.setting-label {
  font-size: 13px;
  color: #7a9ab5;
}

#ts-settings-scope {
  color: #8ab4ff;
  font-family: monospace;
}

.settings-group select {
  justify-self: start;
  background: #0f0f1a;
  color: #c8d6e5;
  border: 1px solid #1e2a3a;
  border-radius: 3px;
  padding: 5px 10px;
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
}

.settings-group select:focus {
  outline: none;
  border-color: #5a8ab5;
}

.settings-group select option {
  background: #12122a;
  color: #c8d6e5;
}

.setting-input-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.setting-input-row input {
  flex: 1;
  min-width: 0;
  background: #0f0f1a;
  border: 1px solid #1e2a3a;
  border-radius: 3px;
  padding: 5px 10px;
  color: #c8d6e5;
  font-size: 12px;
  font-family: monospace;
}

.setting-input-row input::placeholder {
  color: #3a4a5a;
}

.setting-input-row input:focus {
  outline: none;
  border-color: #5a8ab5;
}

/* tricks */
.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.trick-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 10px;
  margin-bottom: 4px;
  border-radius: 4px;
  background: #1a1a33;
}

.trick-item .info { flex: 1; min-width: 0; }
.trick-item .name { font-weight: 500; color: #e0e0e0; font-size: 13px; }
.trick-item .path { font-size: 11px; color: #5a7a95; margin-left: 8px; }
.trick-item .module { font-size: 10px; color: #4a6572; }
.brief { font-size: 11px; color: #6b8299; margin-top: 2px; line-height: 1.3; }

.trick-meta {
  display: flex;
  gap: 4px;
  margin-top: 3px;
  flex-wrap: wrap;
}

.badge {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 500;
}

.badge-kw { background: #1a2a3a; color: #8ab4ff; }
.badge-models { background: #2a1a3a; color: #b48aff; }
.badge-ts { background: #1a2a1a; color: #6bff8a; font-size: 9px; }

.trigger-word { margin-left: auto; font-size: 10px; color: #f5c542; font-weight: 500; cursor: pointer; white-space: nowrap; }
.trigger-word:hover { color: #ffe066; }

.actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.actions .trigger-word { margin-left: 0; }

.btn-gear { padding: 3px 7px; font-size: 13px; line-height: 1; }

/* trick config modal */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(8, 10, 20, .6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
}

.modal {
  background: #14142a;
  border: 1px solid #2a2a55;
  border-radius: 8px;
  width: 460px;
  max-width: 92vw;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid #2a2a55;
  font-weight: 600;
  color: #e0e0e0;
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid #2a2a55;
}

#config-modal-body { padding: 14px 16px; overflow-y: auto; }

.cfg-field { display: block; margin-bottom: 12px; }
.cfg-field[hidden] { display: none; }
.cfg-label { display: block; font-size: 12px; color: #c8d2e0; margin-bottom: 4px; font-weight: 500; }
.cfg-field input[type="text"],
.cfg-field input[type="number"],
.cfg-field input[type="password"],
.cfg-field textarea,
.cfg-field select {
  width: 100%;
  box-sizing: border-box;
  background: #0e0e22;
  color: #e0e0e0;
  border: 1px solid #2a2a55;
  border-radius: 4px;
  padding: 6px 8px;
  font-size: 12px;
  font-family: inherit;
}
.cfg-field input[type="text"]:focus,
.cfg-field input[type="number"]:focus,
.cfg-field input[type="password"]:focus,
.cfg-field textarea:focus,
.cfg-field select:focus { outline: none; border-color: #5a8ab5; }
.cfg-field textarea { resize: vertical; min-height: 70px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.cfg-field input[type="text"]::placeholder,
.cfg-field input[type="password"]::placeholder { color: #3a4a5a; }
.cfg-field code { font-family: monospace; color: #8ab4ff; }
.cfg-desc { font-size: 11px; color: #6b8299; margin-top: 4px; line-height: 1.3; }
/* checkbox and label on one line, the description under the label */
.cfg-bool { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 8px; row-gap: 2px;
            align-items: center; font-size: 12px; color: #c8d2e0; }
.cfg-bool input[type="checkbox"] { accent-color: #5a8ab5; margin: 0; }
.cfg-bool .cfg-desc { grid-column: 2; margin: 0; }

/* toggle */
.toggle {
  width: 36px;
  height: 20px;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  position: relative;
  transition: background .15s;
  font-size: 0;
}

.toggle.on { background: #1a5a2a; }
.toggle.off { background: #3a1a1a; }

.toggle::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #c8d6e5;
  transition: transform .15s;
}

.toggle.on::after { transform: translateX(16px); background: #6bff8a; }
.toggle.off::after { background: #5a3a3a; }

.avail-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 8px;
  border-radius: 3px;
  background: #12122a;
  margin-bottom: 3px;
}

.avail-item .name { font-size: 12px; color: #c8d6e5; }
.avail-item .path { font-size: 11px; color: #4a6572; margin-left: 6px; }
.avail-item .brief { font-size: 11px; color: #6b8299; margin-top: 1px; line-height: 1.3; }
.avail-item .trigger-word { margin-left: 0; }

.avail-category {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #4a6572;
  margin: 12px 0 4px;
  padding-bottom: 2px;
  border-bottom: 1px solid #1e2340;
}
.avail-category:first-child { margin-top: 0; }




/* models */
.models-list { display: grid; gap: 6px; }

.model-entry {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 8px;
  padding: 8px 10px;
  background: #1a1a33;
  border-radius: 4px;
}

.model-entry .key {
  font-weight: 500;
  color: #8ab4ff;
  font-size: 13px;
  font-family: monospace;
  line-height: 48px;
}

.model-entry .model-fields {
  display: grid;
  gap: 6px;
}

.model-entry .model-subrow {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.model-entry input {
  background: #0f0f1a;
  border: 1px solid #1e2a3a;
  border-radius: 3px;
  padding: 4px 7px;
  color: #c8d6e5;
  font-size: 12px;
  font-family: monospace;
}

.model-entry input:disabled {
  background: #0a0a15;
  color: #4a5a6a;
  cursor: pointer;
}

.key-wrap {
  display: flex;
  align-items: center;
  gap: 4px;
}

.key-wrap input {
  flex: 1;
  min-width: 0;
}

.pt-btn {
  background: none;
  border: 1px solid #1e2a3a;
  border-radius: 3px;
  padding: 2px 5px;
  color: #5a7a8a;
  font-size: 12px;
  cursor: pointer;
  line-height: 1;
  flex-shrink: 0;
}

.pt-btn:hover {
  color: #8ab4ff;
  border-color: #2a4a6a;
}

.pt-btn.pt-active {
  color: #6bff8a;
  border-color: #2a5a3a;
  background: #0a1a12;
}

/* provider setup */
.prov-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0 14px;
  align-items: end;
}

.prov-row { display: flex; gap: 6px; align-items: stretch; }
.prov-row input { flex: 1; min-width: 0; }
.prov-row .btn { flex-shrink: 0; align-self: stretch; }

/* the model field lines up with provider / key / url above it: label on top,
   input full width, so all four fields read the same way. */
.prov-pick { margin-top: 2px; }

/* the model-refresh button is an icon now: the circular arrow, centered, and
   tall enough to line up with the input it sits beside. */
.prov-refresh {
  width: 34px;
  justify-content: center;
  font-size: 15px;
  line-height: 1;
  padding: 0;
}

.prov-filter {
  width: 100%;
  box-sizing: border-box;
  background: #0e0e22;
  color: #e0e0e0;
  border: 1px solid #2a2a55;
  border-radius: 4px;
  padding: 6px 8px;
  font-size: 12px;
  font-family: inherit;
}
.prov-filter:focus { outline: none; border-color: #5a8ab5; }

/* A gateway can list hundreds of models, so this scrolls and filters rather
   than asking anyone to pick one out of a very long dropdown. */
.prov-list {
  margin-top: 4px;
  max-height: 190px;
  overflow-y: auto;
  background: #0f0f1a;
  border: 1px solid #1e2a3a;
  border-radius: 4px;
}

.prov-opt {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 4px 8px;
  font-size: 12px;
  color: #c8d6e5;
  cursor: pointer;
  border-bottom: 1px solid #14142a;
}
.prov-opt:last-child { border-bottom: none; }
.prov-opt:hover,
.prov-opt.on { background: #1a1a33; color: #fff; }
.prov-opt .mlabel { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prov-opt .mid { color: #5a7a8a; font-family: monospace; font-size: 11px; white-space: nowrap; }

.prov-none {
  padding: 6px 8px;
  font-size: 11px;
  color: #6b8299;
  line-height: 1.4;
}

/* Empty most of the time, so it must not reserve a line of its own. */
.prov-status { font-size: 11px; color: #ff6b8a; margin-top: 4px; line-height: 1.3; }
.prov-status:empty { display: none; }

.intro-setup {
  margin: 18px 0 4px;
  padding: 14px 16px;
  background: #14142a;
  border: 1px solid #1e2a3a;
  border-radius: 6px;
}
.intro-setup h3 { color: #c8d6e5; font-size: 13px; margin-bottom: 4px; }
.intro-setup-sub { font-size: 12px; color: #6b8299; line-height: 1.4; margin-bottom: 12px; }
.intro-setup-more { margin-top: 2px; }

/* agents */
.agents-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.agent-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: #1a1a33;
  border-radius: 8px;
  border: 1px solid #1e2a3a;
  transition: border-color .12s;
}

.agent-card:hover { border-color: #2a3a4a; }

.agent-card.agent-registered { border-color: #2a9d4a; }

.agent-icon {
  font-size: 32px;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #12122a;
  border-radius: 8px;
  overflow: hidden;
}
.agent-favicon { width: 30px; height: 30px; border-radius: 6px; object-fit: contain; }

.agent-body { flex: 1; min-width: 0; }
.agent-name { font-weight: 600; color: #e0e0e0; font-size: 15px; margin-bottom: 2px; }
.agent-desc { font-size: 12px; color: #6b8299; margin-bottom: 6px; }

.agent-detect {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 12px;
  align-items: center;
}

.agent-detect .status-ready { color: #6bff8a; }
.agent-detect .status-warn { color: #f5c542; }
.agent-detect .status-err { color: #ff6b8a; }

.agent-paths {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin-top: 2px;
}

.agent-path {
  font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
  font-size: 11px;
  color: #4a6572;
}

.agent-missing {
  color: #f5c542;
  font-size: 11px;
  background: #2a2a1a;
  padding: 1px 6px;
  border-radius: 3px;
}

.agent-badge-reg {
  display: inline-block;
  font-size: 10px;
  color: #6bff8a;
  background: #1a3d2a;
  padding: 1px 6px;
  border-radius: 3px;
  margin-top: 2px;
}

.agent-description {
  font-size: 12px;
  color: #6b8299;
  margin-bottom: 14px;
  line-height: 1.5;
  padding: 0 2px;
}

.agent-actions { flex-shrink: 0; }

/* agent toggle switch */
.toggle-switch {
  position: relative;
  display: inline-block;
  width: 36px;
  height: 20px;
  cursor: pointer;
}

.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-slider {
  position: absolute;
  inset: 0;
  background: #3a1a1a;
  border-radius: 10px;
  transition: background .15s;
}

.toggle-slider::before {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #5a3a3a;
  transition: transform .15s, background .15s;
}

.toggle-switch input:checked + .toggle-slider {
  background: #1a5a2a;
}

.toggle-switch input:checked + .toggle-slider::before {
  transform: translateX(16px);
  background: #6bff8a;
}

.toggle-switch input:disabled + .toggle-slider {
  opacity: .35;
  cursor: default;
}

.agent-log-panel {
  background: #0a0a15;
  border: 1px solid #1e2a3a;
  border-radius: 6px;
  margin-bottom: 14px;
  overflow: hidden;
}

.agent-log-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  background: #12122a;
  border-bottom: 1px solid #1e2a3a;
  font-weight: 600;
  font-size: 13px;
  color: #8ab4ff;
}

.agent-log-content {
  height: 200px;
  overflow-y: auto;
  padding: 10px 14px;
  font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
  font-size: 12px;
  line-height: 1.6;
}

.agent-log-entry { padding: 1px 4px; white-space: pre-wrap; word-break: break-all; }
.agent-log-entry.lvl-INFO { color: #8ab4ff; }
.agent-log-entry.lvl-WARNING { color: #f5c542; }
.agent-log-entry.lvl-ERROR { color: #ff6b8a; }
.agent-log-entry .time { color: #4a6572; margin-right: 8px; }

.agent-log-status {
  padding: 8px 14px;
  border-top: 1px solid #1e2a3a;
  font-size: 13px;
  font-weight: 500;
}

.agent-log-status .status-ready { color: #6bff8a; }
.agent-log-status .status-err { color: #ff6b8a; }
.agent-log-status .status-warn { color: #f5c542; }

/* buttongroup */
.btn-group { display: flex; }
.btn-group .btn + .btn { border-radius: 0; margin-left: -1px; }
.btn-group .btn:first-child { border-radius: 4px 0 0 4px; }
.btn-group .btn:last-child { border-radius: 0 4px 4px 0; }

.btn-sort { padding: 4px 7px; background: #0f0f23; color: #4a6572; font-size: 12px; line-height: 1; border: 1px solid #1e2a3a; }
.btn-sort:hover { background: #1a2a4d; color: #8ab4ff; border-color: #2a4a6a; }
.btn-sort.active { background: #1a3a5a; color: #8ab4ff; border-color: #2a4a6a; }

.card-tools { display: flex; align-items: center; gap: 6px; }
.input-sm { padding: 4px 8px; background: #0f0f23; color: #8ab4ff; font-size: 12px; line-height: 1; border: 1px solid #1e2a3a; border-radius: 4px; width: 130px; }
.input-sm:focus { outline: none; border-color: #2a4a6a; background: #1a2a4d; }
.input-sm::placeholder { color: #4a6572; }

/* buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 12px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  transition: background .15s;
}

.btn-sm { padding: 3px 10px; font-size: 11px; }
.btn-danger { background: #3d1a2a; color: #ff6b8a; }
.btn-danger:hover { background: #5a253a; }
.btn-success { background: #1a3d2a; color: #6bff8a; }
.btn-success:hover { background: #255a3a; }
.btn-primary { background: #1a2a4d; color: #8ab4ff; }
.btn-primary:hover { background: #253a6a; }
.btn-secondary { background: #1e2a3a; color: #7a9ab5; }
.btn-secondary:hover { background: #2a3a4a; }
.btn-neutral { background: #1a3a5a; color: #8ab4ff; }
.btn-neutral:hover { background: #2a4a6a; }
.btn-accent { background: #2a5a3a; color: #6bff8a; border: 1px solid #3a7a4a; }
.btn-accent:hover { background: #3a7a4a; }

/* logs */
.log-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.log-controls label {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: #7a9ab5;
  cursor: pointer;
}

.log-controls input[type=checkbox] { accent-color: #5a8ab5; }
.log-controls select {
  background: #12122a;
  color: #c8d6e5;
  border: 1px solid #1e2a3a;
  border-radius: 4px;
  padding: 4px 8px;
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
}
.log-controls select:focus {
  outline: none;
  border-color: #5a8ab5;
}
.log-controls select option {
  background: #12122a;
  color: #c8d6e5;
}

.log-viewer {
  background: #0a0a15;
  border: 1px solid #1e2a3a;
  border-radius: 6px;
  height: 320px;
  overflow-y: auto;
  font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
  font-size: 12px;
  line-height: 1.6;
  padding: 10px;
}

.log-entry {
  padding: 1px 4px;
  border-radius: 2px;
  white-space: pre-wrap;
  word-break: break-all;
}

.log-entry:hover { background: #12122a; }
.log-entry .time { color: #4a6572; margin-right: 8px; }
.log-entry.lvl-INFO { color: #8ab4ff; }
.log-entry.lvl-DEBUG { color: #4a6572; }
.log-entry.lvl-WARNING { color: #f5c542; }
.log-entry.lvl-ERROR { color: #ff6b8a; }
.log-entry.lvl-CRITICAL { color: #ff3b5a; font-weight: 700; }
.log-count { font-size: 12px; color: #4a6572; margin-left: auto; }
.log-file {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  color: #5a7a95;
  padding: 6px 10px;
  border: 1px solid #1e2a3a;
  border-radius: 4px;
  margin-bottom: 8px;
  overflow-x: auto;
  white-space: nowrap;
}
.loader { color: #5a7a95; font-size: 13px; padding: 10px 0; }
.empty { color: #4a6572; font-size: 13px; font-style: italic; padding: 10px 0; }

/* drag reorder */
.trick-item.dragging { opacity: .4; }
.trick-item.drag-over { border-color: #5a8ab5; box-shadow: inset 0 0 0 1px #5a8ab5; }

/* toast */
.toast {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: #1a3d2a;
  color: #6bff8a;
  padding: 10px 20px;
  border-radius: 6px;
  font-size: 13px;
  z-index: 100;
  animation: fadeIn .2s;
}

.toast.error { background: #3d1a2a; color: #ff6b8a; }

/* help content */
#help-content {
  line-height: 1.6;
  overflow-x: auto;
}
#help-content h1,
#help-content h2,
#help-content h3,
#help-content h4 {
  margin: 1.2em 0 0.5em;
  color: #c8d6e5;
}
#help-content h1 { font-size: 1.5em; border-bottom: 1px solid #1e2a3a; padding-bottom: 0.3em; }
#help-content h2 { font-size: 1.3em; border-bottom: 1px solid #1e2a3a; padding-bottom: 0.2em; }
#help-content p { margin: 0.6em 0; }
#help-content ul, #help-content ol { margin: 0.5em 0; padding-left: 2em; }
#help-content li { margin: 0.3em 0; }
#help-content a { color: #8ab4ff; }
#help-content a:hover { text-decoration: underline; }
#help-content .mermaid-diagram {
  margin: 1em 0;
  padding: 1em;
  background: #16161f;
  border: 1px solid #1e2a3a;
  border-radius: 6px;
  overflow-x: auto;
}
#help-content .mermaid-diagram svg { display: block; margin: 0 auto; max-width: 100%; height: auto; }
#help-content pre.mermaid-error { border: 1px solid #5a2b2b; }
#help-content table {
  border-collapse: collapse;
  margin: 0.8em 0;
  width: 100%;
}
#help-content th, #help-content td {
  border: 1px solid #1e2a3a;
  padding: 6px 10px;
  text-align: left;
}
#help-content th {
  background: #0f0f1a;
  color: #8ab4ff;
}
#help-content blockquote {
  border-left: 3px solid #2a4a6a;
  margin: 0.8em 0;
  padding: 4px 12px;
  color: #7a9ab5;
  background: #0a0a15;
}
#help-content hr { border: none; border-top: 1px solid #1e2a3a; margin: 1.5em 0; }
#help-content :not(pre) > code {
  background: #1a1a2e;
  border: 1px solid #2a2a4a;
  border-radius: 3px;
  padding: 1px 5px;
  font-size: 0.9em;
  font-family: monospace;
  color: #c8d6e5;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---- browse (community index) ---- */
.browse-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.avail-item a.path { text-decoration: none; }
.avail-item a.path:hover { color: #6b8299; text-decoration: underline; }
.browse-status {
  margin-top: 10px;
  font-size: 11px;
  color: #4a6572;
}
.browse-source {
  max-height: 60vh;
  overflow: auto;
  margin: 0;
  padding: 10px 12px;
  border-radius: 4px;
  font-size: 11px;
  line-height: 1.45;
}
.source-panel {
  margin-top: 10px;
  padding: 8px 10px 10px;
  border-radius: 4px;
  background: #12122a;
}
.source-panel .section-desc { margin: 6px 0 8px; }
.avail-more {
  padding: 6px 8px;
  margin-top: 2px;
  font-size: 11px;
  color: #6b8299;
  cursor: pointer;
  text-align: center;
  border-radius: 3px;
}
.avail-more:hover { color: #c8d6e5; background: #12122a; }

/* drag affordance for reorderable loaded tricks */
.trick-item .grip {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  align-self: stretch;
  margin: -8px 6px -8px -4px;
  padding: 0 2px;
  cursor: grab;
  color: #3d4f63;
  transition: color .12s ease;
}
.trick-item .grip svg { fill: currentColor; display: block; }
.trick-item:hover .grip { color: #6b8299; }
.trick-item .grip:hover { color: #a8bccf; }
.trick-item .grip:active,
.trick-item.dragging .grip { cursor: grabbing; }

/* ---- playground (docked try-it panel) ---- */
.try-btn { color: #5a7a95; }
.try-btn:hover { color: #8ab4ff; }
.try-btn.open { color: #8ab4ff; }

.pg-panel {
  position: fixed;
  right: 16px;
  bottom: 16px;
  width: 400px;
  max-width: calc(100vw - 32px);
  height: 62vh;
  max-height: 620px;
  display: flex;
  flex-direction: column;
  background: #16162a;
  border: 1px solid #232342;
  border-radius: 8px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .5);
  z-index: 60;
  overflow: hidden;
  resize: both;          /* corner grip; position is persisted on change */
  min-width: 300px;
  min-height: 220px;
}
.pg-panel.dragging { user-select: none; box-shadow: 0 18px 50px rgba(0, 0, 0, .62); }

.pg-head {
  cursor: grab;
  touch-action: none;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-bottom: 1px solid #232342;
  background: #12122a;
}
.pg-title { font-size: 12px; font-weight: 600; color: #c8d6e5; }
.pg-target { font-size: 11px; color: #5a7a95; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pg-head-actions { display: flex; gap: 4px; flex-shrink: 0; cursor: default; }
.pg-panel.dragging .pg-head { cursor: grabbing; }

.pg-log { flex: 1; overflow-y: auto; padding: 10px; }
.pg-hint { font-size: 11px; color: #4a6572; line-height: 1.5; padding: 4px 2px; }

.pg-msg { margin-bottom: 10px; font-size: 12px; line-height: 1.45; }
.pg-msg .pg-role {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #4a6572;
  margin-bottom: 3px;
}
.pg-msg .pg-body {
  white-space: pre-wrap;
  word-wrap: break-word;
  padding: 7px 9px;
  border-radius: 4px;
  background: #1a1a33;
  color: #c8d6e5;
}
.pg-msg.user .pg-body { background: #1a2a4d; color: #d8e4f0; }
.pg-msg .pg-role { display: flex; align-items: center; gap: 8px; }
.pg-replay {
  margin-left: auto;
  background: none;
  border: 1px solid transparent;
  border-radius: 4px;
  color: #5a7a8a;
  font: inherit;
  font-size: 10px;
  letter-spacing: .04em;
  text-transform: none;
  padding: 0 6px;
  cursor: pointer;
  opacity: .5;
  transition: opacity .12s;
}
.pg-msg:hover .pg-replay, .pg-replay:focus-visible { opacity: 1; }
@media (hover: none) { .pg-replay { opacity: 1; } }
.pg-replay:hover { color: #8ab4ff; border-color: #2a4a6a; }

/* Rendered Markdown replies: normal flow instead of pre-wrap. */
.pg-msg .pg-body.md { white-space: normal; }
.pg-body.md > :first-child { margin-top: 0; }
.pg-body.md > :last-child { margin-bottom: 0; }
.pg-body.md p { margin: .45em 0; }
.pg-body.md ul, .pg-body.md ol { margin: .4em 0; padding-left: 1.4em; }
.pg-body.md h1, .pg-body.md h2, .pg-body.md h3 { font-size: 13px; color: #e0e0e0; margin: .7em 0 .3em; }
.pg-body.md code { background: #0f0f23; padding: 1px 4px; border-radius: 3px; font-size: 11px; color: #f5c542; }
.pg-body.md pre { background: #0f0f23; border: 1px solid #1e2a3a; border-radius: 4px; padding: 6px 8px; overflow-x: auto; margin: .5em 0; }
.pg-body.md pre code { background: none; padding: 0; color: inherit; }
.pg-body.md a { color: #8ab4ff; }
.pg-body.md table { border-collapse: collapse; margin: .5em 0; }
.pg-body.md th, .pg-body.md td { border: 1px solid #2a3a4a; padding: 2px 6px; }
.pg-msg.error .pg-body { background: #2e1a1f; color: #ff9b9b; }

.pg-trace { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 5px; }
.pg-trace .pg-pill {
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 8px;
  background: #1e2a3a;
  color: #8ab4ff;
  cursor: default;
}
.pg-trace .pg-pill.dormant { background: #191930; color: #4a6572; }
.pg-trace .pg-pill.meta { background: none; color: #4a6572; padding-left: 2px; }

.pg-input {
  display: flex;
  gap: 6px;
  align-items: flex-end;
  padding: 8px;
  border-top: 1px solid #232342;
  background: #12122a;
}
.pg-input textarea {
  flex: 1;
  resize: none;
  font-family: inherit;
  font-size: 12px;
  line-height: 1.4;
  padding: 6px 8px;
  border-radius: 4px;
  border: 1px solid #232342;
  background: #0e0e20;
  color: #c8d6e5;
}
.pg-input textarea:focus { outline: none; border-color: #3a5a80; }

/* a trick lighting up as it fires */
.trick-item.fired {
  animation: trick-fired 1.4s ease-out;
}
@keyframes trick-fired {
  0%   { box-shadow: inset 0 0 0 1px #8ab4ff; background: #1f2a45; }
  70%  { box-shadow: inset 0 0 0 1px #8ab4ff; background: #1f2a45; }
  100% { box-shadow: inset 0 0 0 1px transparent; background: #1a1a33; }
}

/* ---- responsive: tablet / small screens ---- */
@media (max-width: 768px) {
  body { padding: 12px; }

  header { gap: 8px; padding-bottom: 8px; margin-bottom: 12px; }
  header .info { gap: 8px; }

  .tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .tabs::-webkit-scrollbar { display: none; }
  .tabs { flex-wrap: nowrap; }
  .tab { white-space: nowrap; padding: 8px 14px 7px; }

  .two-col { grid-template-columns: 1fr; }

  .agents-grid { grid-template-columns: repeat(2, 1fr); }

  .model-entry { grid-template-columns: 1fr; gap: 4px 8px; }
  .model-entry .key { line-height: normal; }

  .settings-group { grid-template-columns: 1fr; gap: 8px; }

  .log-viewer { height: 240px; }

  .pg-panel { width: calc(100vw - 24px); min-width: 0; max-width: none; }

  .modal { width: 95vw; }
}

/* ---- responsive: phone ---- */
@media (max-width: 480px) {
  body { padding: 8px; font-size: 13px; }

  header { flex-direction: column; align-items: flex-start; }
  header .nav { width: 100%; justify-content: flex-end; }

  .agents-grid { grid-template-columns: 1fr; }

  .trick-item { flex-wrap: wrap; gap: 6px; }
  .trick-item .info { flex-basis: 100%; }
  .trick-item .actions { flex-basis: 100%; justify-content: flex-end; }

  .avail-item { flex-direction: column; align-items: flex-start; gap: 6px; }
  .avail-item .browse-actions { width: 100%; justify-content: flex-end; }

  .pg-panel {
    width: calc(100vw - 16px);
    height: 50vh;
    right: 8px;
    bottom: 8px;
  }

  .ts-filters { flex-direction: column; gap: 6px; margin-left: 0; }
  .ts-filters .ts-delete { margin-left: 0; }

  .model-entry .model-subrow { grid-template-columns: 1fr; }

  .agent-log-content { height: 140px; }

  .log-viewer { height: 200px; font-size: 11px; }

  .card { padding: 12px; }

  .toast { right: 10px; bottom: 10px; left: 10px; text-align: center; }
}

/* ---- start here ------------------------------------------------------- */
/* The landing tab is the one screen a visitor sees before they know any of
   this vocabulary, so it stays quiet: no trickset chrome, no jargon, and a
   diagram that only animates once real traffic is moving through. */

.intro { max-width: 860px; margin: 0 auto; padding: 8px 0 24px; }

.intro-lead {
  font-size: 22px;
  line-height: 1.38;
  font-weight: 600;
  color: #fff;
  margin-bottom: 12px;
}

.intro-sub {
  font-size: 14px;
  line-height: 1.65;
  color: #8fa6bd;
  max-width: 62ch;
  margin-bottom: 26px;
}

/* same lead/sub treatment, for tabs that open with an intro */
.tab-intro { max-width: 860px; margin: 0 auto 22px; padding: 8px 0 0; }
.tab-intro .intro-lead { margin-bottom: 8px; }
.tab-intro .intro-sub { margin-bottom: 0; }

/* the copy up top sits in a centered column, so the method pills and the cards
   below it share that same width instead of stretching edge to edge. */
.models-body { max-width: 860px; margin: 0 auto; }

/* the three-step onboarding: one row per thing to do, in order */
.onboard { max-width: 860px; margin: 4px auto 30px; }

.onboard-step {
  display: flex;
  gap: 16px;
  background: #141428;
  border: 1px solid #1e2a3a;
  border-radius: 10px;
  padding: 16px 18px;
  margin-bottom: 12px;
}
.onboard-step.next { border-color: #2a4a6a; }
.onboard-step.done { background: #121826; border-color: #1c2a22; }

.ob-badge {
  flex: none;
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 1.5px solid #2a4a6a;
  color: #8ab4ff;
  font-size: 14px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.onboard-step.done .ob-badge { border-color: #2f7d4f; background: #16281f; color: #4ade80; }
.onboard-step.next .ob-badge { background: #16203a; }

.ob-content { flex: 1 1 auto; min-width: 0; }
.ob-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
.ob-title { font-size: 15px; font-weight: 600; color: #e6eef7; }
.onboard-step.done .ob-title { color: #9fb8a6; }
.ob-toggle { flex: none; }
.ob-desc { font-size: 13px; line-height: 1.55; color: #8fa6bd; max-width: 60ch; }
.ob-detail { margin-top: 14px; }

.ob-sum {
  font-size: 12.5px; color: #9fd4b0;
  margin-bottom: 12px;
  padding: 8px 12px;
  background: #12201b;
  border: 1px solid #1c3a2a;
  border-radius: 7px;
}
.onboard-step:not(.done) .ob-sum { color: #8fa6bd; background: #141428; border-color: #1e2a3a; }

.ob-tools { display: flex; flex-direction: column; gap: 8px; max-width: 420px; }
.ob-tool {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 9px 12px;
  background: #16162a;
  border: 1px solid #1e2a3a;
  border-radius: 8px;
}
.ob-tool.on { border-color: #2f7d4f; }
.ob-tool-name { font-size: 13.5px; font-weight: 600; color: #c8d6e5; flex: 1; }
.ob-tool-icon { flex: none; width: 28px; height: 28px; border-radius: 7px; background: #e8edf3; display: flex;
                align-items: center; justify-content: center; }
.ob-tool-icon img { width: 20px; height: 20px; object-fit: contain; border-radius: 4px; }
.ob-tool-none { font-size: 13px; color: #6b8299; }
.ob-tool .btn { flex: none; }
/* step three: the tool-call demo, a placeholder until the pass is wired up */
.ob-demo {
  max-width: 460px;
  padding: 12px 14px;
  background: #141428;
  border: 1px dashed #2a3a52;
  border-radius: 8px;
}
.ob-demo-title { font-size: 13px; font-weight: 600; color: #c8d6e5; margin-bottom: 4px; }
.ob-demo p { font-size: 12px; line-height: 1.5; color: #8fa6bd; margin: 0 0 10px; }
.ob-demo-soon {
  font-size: 11px; letter-spacing: .04em; text-transform: uppercase;
  color: #6b8299;
  padding: 4px 10px;
  background: #191930;
  border: 1px solid #2a3a52;
  border-radius: 20px;
}

/* the "and if you want to go further" divider above the explore cards */
.intro-more { margin: 34px 0 14px; }
.intro-more h3 { font-size: 14px; font-weight: 600; color: #6b8299; letter-spacing: .02em; }

/* the diagram */
.intro-flow {
  display: flex;
  align-items: stretch;
  gap: 0;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.inode {
  flex: 1 1 150px;
  min-width: 0;
  background: #16162a;
  border: 1px solid #1e2a3a;
  border-radius: 8px;
  padding: 12px 14px;
}

.inode-self {
  border-color: #2a4a6a;
  background: #16203a;
}

.inode-name { font-size: 13px; font-weight: 600; color: #c8d6e5; margin-bottom: 3px; }
.inode-self .inode-name { color: #8ab4ff; }

.inode-sub {
  font-size: 11px;
  color: #5a7a8a;
  overflow-wrap: anywhere;
}

/* the connecting wire: three dots that drift only while traffic is live */
.iwire {
  flex: 0 1 52px;
  min-width: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.iwire i {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #24344a;
  display: block;
}

.intro-flow.live .iwire i { animation: iflow 1.4s ease-in-out infinite; }
.intro-flow.live .iwire i:nth-child(2) { animation-delay: .18s; }
.intro-flow.live .iwire i:nth-child(3) { animation-delay: .36s; }

@keyframes iflow {
  0%, 100% { background: #24344a; transform: translateX(-4px); }
  50%      { background: #8ab4ff; transform: translateX(4px); }
}

@media (prefers-reduced-motion: reduce) {
  .intro-flow.live .iwire i { animation: none; background: #8ab4ff; }
}

/* status line */
.intro-status {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: #6b8299;
  margin-bottom: 22px;
  min-height: 18px;
}

.intro-status .idot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #2a3a4a;
  flex: none;
}

.intro-status.live .idot { background: #4ade80; }
.intro-status.live { color: #9fd4b0; }

.intro-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.intro-actions .btn { padding: 7px 14px; font-size: 13px; }

.intro-note {
  font-size: 12.5px;
  line-height: 1.6;
  color: #5a7a8a;
  max-width: 64ch;
  margin-bottom: 28px;
  padding-top: 16px;
  border-top: 1px solid #1a2333;
}

/* the three things it's for */
.intro-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px;
}

.intro-card {
  background: #16162a;
  border: 1px solid #1e2a3a;
  border-radius: 8px;
  padding: 14px 15px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.intro-card h3 { color: #c8d6e5; margin-bottom: 0; font-size: 13px; }
.intro-card p { font-size: 12.5px; line-height: 1.6; color: #7a93aa; margin: 0; flex: 1; }
.intro-card a { color: #8ab4ff; font-size: 12.5px; text-decoration: none; }
.intro-card a:hover { text-decoration: underline; }

@media (max-width: 620px) {
  .intro-lead { font-size: 18px; }
  .iwire { flex-basis: 100%; min-height: 22px; transform: rotate(90deg); }
}

/* The pills stay on the intro so the page doesn't change height when you move
   between tabs -- a landing screen that jumps as soon as you click anything
   reads as broken. The filter bar underneath is trickset vocabulary, so it
   keeps its box but not its contents. */
/* Start here, Help and New channel aren't about any one channel, so the
   channel title bar goes. */
body.no-channel #ts-bar { display: none; }
/* ...and the tabs are a channel's tabs, so they go with it. */
body.no-channel .tabs { display: none; }
.section-desc a { color: #8ab4ff; }

/* the explanation detect() already produced, which the card used to discard */
.agent-why {
  font-size: 11.5px;
  line-height: 1.55;
  color: #5a7a8a;
  margin-top: 4px;
  overflow-wrap: anywhere;
}
.agent-path-label { font-size: 10.5px; color: #4a6572; margin-right: 5px; }

.status-muted { color: #5a7a8a; }
/* paths sit on their own line under a label, so the label needs its own row */
.agent-paths { flex-direction: row; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; }

/* Three across: icon and name on top, the route under them, the buttons at the
   foot. Tools this machine doesn't have sit below, smaller, under "Not found". */
/* as many columns as fit a card wide enough for a connected route on one line */
.agents-grid { grid-template-columns: repeat(auto-fill, minmax(min(310px, 100%), 1fr)); align-items: stretch; }

.agent-card { align-items: flex-start; flex-wrap: wrap; }
.agent-card .agent-icon { margin-top: 1px; }
/* the logos are on a light tile: some are dark marks on transparent */
.agent-icon { width: 44px; height: 44px; background: #e8edf3; border-radius: 10px; flex: none; }
/* rows: icon + name + switch, the route, then details and Configure. One line
   each, and cards in a row match in height, so nothing wraps or juts out. */
.agent-card { flex-direction: column; align-items: stretch; flex-wrap: nowrap; gap: 10px; }
.agent-card .agent-top { display: flex; align-items: center; gap: 12px; min-width: 0; }
.agent-card .agent-icon { margin-top: 0; }
.agent-card .agent-head { flex: 1; flex-wrap: nowrap; align-items: center; min-width: 0; margin: 0; }
.agent-card .agent-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.agent-card .agent-chip { flex: none; white-space: nowrap; }
.agent-card .agent-switch { flex: none; margin-left: auto; }
.agent-card .agent-route { flex-wrap: nowrap; gap: 6px; min-width: 0; margin: 0; }
.agent-card .agent-route .hop { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.agent-card .agent-route .hop-arrow { flex: none; }
.agent-card .agent-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; }
.agent-card .agent-diag { margin: 0; min-width: 0; }
.agent-card:not(.agent-inert) .agent-foot { min-height: 30px; }   /* Configure's height, on or off */
.agents-manual { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
                 margin-top: 4px; font-size: 13px; color: #8fa6bd; }
.agents-manual-link { padding: 4px 12px; border-radius: 5px; border: 1px solid #2f4d75; background: #16203a;
                      color: #a9ccff; font-weight: 600; text-decoration: none; }
.agents-manual-link:hover { background: #1e3054; color: #fff; border-color: #3b82f6; }
.agents-missing-h { grid-column: 1 / -1; margin: 14px 0 0; font-size: 12px; font-weight: 600; letter-spacing: .06em;
                    text-transform: uppercase; color: #5a7a8a; }
.agent-card.agent-inert { padding: 10px 12px; opacity: .75; gap: 7px; }
.agent-card.agent-inert .agent-icon { width: 32px; height: 32px; border-radius: 8px; }
.agent-card.agent-inert .agent-favicon { width: 22px; height: 22px; }
.agent-card.agent-inert .agent-name { font-size: 13.5px; }
.agent-body { min-width: 0; flex: 1; }

/* each path on its own line, under a label of its own */
.agent-paths { flex-direction: column; gap: 2px; align-items: flex-start; }
.agent-path-label { display: block; margin-right: 0; }

/* the card leads with what flipping the switch does, not with status codes */
.agent-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 5px; }
.agent-name { font-size: 14px; font-weight: 600; color: #fff; }

.agent-chip {
  font-size: 10.5px;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 10px;
  background: #16203a;
  border: 1px solid #1e2a3a;
}

.agent-story {
  font-size: 12.5px;
  line-height: 1.62;
  color: #8fa6bd;
  max-width: 68ch;
}

.agent-diag { margin-top: 7px; }
.agent-diag summary {
  font-size: 11px;
  color: #4a6572;
  cursor: pointer;
  list-style: none;
  width: max-content;
}
.agent-diag summary::-webkit-details-marker { display: none; }
.agent-diag summary::before { content: "\25B8  "; }
.agent-diag[open] summary::before { content: "\25BE  "; }
.agent-diag summary:hover { color: #8ab4ff; }
.agent-diag > div {
  font-family: 'SF Mono', 'Fira Code', Consolas, monospace;
  font-size: 11px;
  line-height: 1.6;
  color: #4a6572;
  margin-top: 5px;
  overflow-wrap: anywhere;
}

/* the whole card is the switch */
.agent-clickable { cursor: pointer; }
.agent-clickable:hover { border-color: #2a4a6a; background: #1d1d3d; }
.agent-clickable:focus-visible { outline: 2px solid #8ab4ff; outline-offset: 2px; }
.agent-clickable .agent-diag summary { cursor: pointer; }
/* nothing to connect: don't pretend it is pressable */
.agent-inert { opacity: .72; }

/* the route, not a paragraph about the route */
.agent-route {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  margin-top: 3px;
}

.agent-route .hop {
  font-size: 11.5px;
  padding: 3px 9px;
  border-radius: 4px;
  background: #11112a;
  border: 1px solid #1e2a3a;
  color: #8fa6bd;
  white-space: nowrap;
}

.agent-route .hop-self {
  border-color: #2a4a6a;
  background: #16203a;
  color: #8ab4ff;
  font-weight: 600;
}

.agent-route .hop-arrow { color: #3a4a5a; font-size: 12px; }
.route-on .hop-arrow { color: #8ab4ff; }

/* the card is a button, so hovering previews where petsitter would sit */
.agent-clickable:not(.route-on-card) .agent-route { transition: opacity .12s; }

.agent-note { font-size: 11.5px; color: #6b8299; }
.agent-inert .agent-route .hop { opacity: .65; }

/* Start here needs one action that actually looks like the action. The shared
   .btn-primary / .btn-neutral are both blue-on-blue, so neither reads as
   primary and the pair looks like two of the same thing. */
.btn-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border: none;
  border-radius: 6px;
  background: #1d4ed8;   /* white on #3b82f6 is only 3.7:1 */
  color: #fff;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background .13s, transform .13s;
}
.btn-cta:hover { background: #2563eb; }
.btn-cta:active { transform: translateY(1px); }
.btn-cta:focus-visible { outline: 2px solid #8ab4ff; outline-offset: 3px; }
.btn-cta .cta-arrow { font-size: 15px; line-height: 1; }

.btn-ghost {
  padding: 10px 14px;
  border: none;
  background: none;
  color: #6b8299;
  font-size: 13px;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: #2a3a4a;
}
.btn-ghost:hover { color: #8ab4ff; text-decoration-color: #8ab4ff; }
.btn-ghost:focus-visible { outline: 2px solid #8ab4ff; outline-offset: 2px; border-radius: 4px; }

/* the whole card is the link */
.intro-card { cursor: pointer; transition: border-color .12s, background .12s, transform .12s; }
.intro-card:hover { border-color: #2a4a6a; background: #1b1b34; transform: translateY(-1px); }
.intro-card:focus-visible { outline: 2px solid #8ab4ff; outline-offset: 2px; }
.intro-go { font-size: 12.5px; color: #8ab4ff; font-weight: 500; }
.intro-card:hover .intro-go { text-decoration: underline; }

/* Blue text on a dark card does not read as something you can click. Give the
   card's action a real edge and fill so it is visible without hovering. */
.intro-go {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: max-content;
  padding: 6px 12px;
  border: 1px solid #2f4d75;
  border-radius: 5px;
  background: #16203a;
  color: #a9ccff;
  font-size: 12.5px;
  font-weight: 600;
  transition: background .12s, border-color .12s, color .12s;
}
.intro-card:hover .intro-go,
.intro-card:focus-visible .intro-go {
  background: #1e3054;
  border-color: #3b82f6;
  color: #fff;
  text-decoration: none;
}

/* the diagnostics fold was #4a6572 on #1a1a33 -- effectively invisible */
.agent-diag summary { color: #7a93aa; font-size: 11.5px; }
.agent-diag summary:hover { color: #a9ccff; }

/* A trickset that appeared while you were elsewhere. It pulses a few times to
   catch the eye, then holds a quiet marker so it still reads as new a minute
   later -- an indefinite blink is just noise. Clicking it clears the mark. */
.pill-new {
  position: relative;
  border-color: #3b82f6 !important;
  color: #cfe2ff !important;
  animation: pillNew 1.15s ease-in-out 5;
}

.pill-new::after {
  content: "";
  position: absolute;
  top: -3px;
  right: -3px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #3b82f6;
  box-shadow: 0 0 0 2px #0f0f1a;
}

@keyframes pillNew {
  0%, 100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0); }
  50%      { box-shadow: 0 0 0 4px rgba(59, 130, 246, .35); }
}

@media (prefers-reduced-motion: reduce) {
  .pill-new { animation: none; }
}

/* Start here is the way in, not a peer of the management tabs */

/* A labelled control beats an unlabelled switch: the word says what will
   happen, the switch shows what is true now. */
.agent-btn {
  padding: 6px 14px;
  border-radius: 5px;
  border: 1px solid transparent;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
}
.btn-disconnect { background: none; color: #9fb6cc; border-color: #2f4d75; }
.btn-disconnect:hover { background: #24304a; color: #fff; border-color: #3b82f6; }
.agent-btn:focus-visible { outline: 2px solid #8ab4ff; outline-offset: 2px; }

.agent-actions { display: flex; align-items: center; gap: 10px; }

/* the petsitter hop goes somewhere */
.hop-link { cursor: pointer; }
.hop-link:hover { background: #1e3054; border-color: #3b82f6; color: #cfe2ff; }
.hop-link:focus-visible { outline: 2px solid #8ab4ff; outline-offset: 2px; }

/* the card itself is no longer a button */
.agent-card { cursor: default; }
.btn-configure { background: #16203a; color: #a9ccff; border-color: #2f4d75; }
.btn-configure:hover { background: #1e3054; color: #fff; border-color: #3b82f6; }

/* Arriving from a Connect card lands you in vocabulary you haven't met. */
.tricks-context {
  position: relative;
  background: #16203a;
  border: 1px solid #2f4d75;
  border-radius: 8px;
  padding: 14px 40px 14px 16px;
  margin-bottom: 14px;
}
.tricks-context .tc-head { font-size: 14px; font-weight: 600; color: #cfe2ff; margin-bottom: 6px; }
.tricks-context p { font-size: 12.5px; line-height: 1.62; color: #9fb6cc; margin: 0 0 6px; max-width: 78ch; }
.tricks-context .tc-hint { color: #6b8299; margin-bottom: 0; }
.tricks-context .tc-close {
  position: absolute; top: 8px; right: 10px;
  background: none; border: none; color: #6b8299;
  font-size: 18px; line-height: 1; cursor: pointer; padding: 2px 6px; border-radius: 4px;
}
.tricks-context .tc-close:hover { color: #fff; background: #24304a; }
.tricks-context .tc-close:focus-visible { outline: 2px solid #8ab4ff; outline-offset: 2px; }

/* ---- extensions (the Tricks tab) ----
   A list on the left, one extension's page on the right: the shape people
   already know from their editor's extension panel. */
.ext {
  display: grid;
  grid-template-columns: minmax(260px, 340px) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}
.ext > .card { margin-bottom: 0; }
.ext-side {
  position: sticky;
  top: 12px;
  /* fallback only: fitExtPanes() sets the real height from where it starts */
  max-height: calc(100vh - 24px);
  overflow-y: auto;
  padding: 12px;
}
.ext-search {
  width: 100%;
  padding: 8px 10px;
  background: #0f0f23;
  border: 1px solid #1e2a3a;
  border-radius: 6px;
  color: #e0e0e0;
  font-size: 13px;
  margin-bottom: 12px;
}
.ext-search:focus { outline: none; border-color: #2a4a6a; }
/* Installed and Browse are two different things (what this channel runs,
   what you could add), so they look it: full-width header bars that pin to
   the top of the list while you scroll their section, an inset panel for
   Installed, and quiet category labels inside Browse. */
.ext-sec + .ext-sec { margin-top: 16px; }
.ext-sec-h {
  position: sticky;
  top: -12px;              /* the list's own top padding */
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 8px;
  width: calc(100% + 24px);
  margin: 0 -12px 8px;
  padding: 9px 12px;
  background: #1a1a33;
  border: none;
  border-top: 1px solid #2a3a4a;
  border-bottom: 1px solid #2a3a4a;
  color: #c8d6e5;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-align: left;
  cursor: pointer;
}
.ext-sec-h:hover { background: #1e2240; }
.ext-sec-title { flex: 1; }
.ext-chev { width: 12px; font-size: 10px; color: #6b8299; transition: transform .15s ease; }
.ext-sec.collapsed .ext-chev { transform: rotate(-90deg); }
.ext-sec.collapsed .ext-sec-body { display: none; }
.ext-sec.collapsed .ext-sec-h { margin-bottom: 0; }
.ext-count {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0;
  color: #8ab4ff;
  background: #1a2a4d;
  border-radius: 9px;
  padding: 0 8px;
  line-height: 18px;
}
.ext-count:empty { display: none; }
.ext-sec-desc { font-size: 11px; color: #5a7a8a; margin: 0 2px 8px; }

/* Installed: an inset panel of what's actually running. */
.ext-sec-installed #loaded-tricks {
  background: #12122a;
  border: 1px solid #1e2a3a;
  border-left: 3px solid #2a5aa0;
  border-radius: 8px;
  padding: 4px;
}
.ext-sec-installed #loaded-tricks:has(.ext-empty) { border-left-color: #1e2a3a; }

/* Browse: rows offer an Install button on hover or keyboard focus. */
.ext-add {
  flex: none;
  display: none;
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  color: #fff;
  background: #2a5aa0;
  border: none;
  border-radius: 4px;
  padding: 3px 10px;
  cursor: pointer;
}
.ext-add:hover { background: #3468b8; }
.ext-browse-item:hover .ext-add, .ext-browse-item.selected .ext-add, .ext-add:focus-visible { display: inline-block; }
@media (hover: none) { .ext-add { display: inline-block; } }
.ext-empty { font-size: 12px; color: #5a7a8a; padding: 8px 2px; }
.ext-empty a { color: #8ab4ff; }

.ext-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 8px;
  margin-bottom: 2px;
  border-radius: 6px;
  cursor: pointer;
  background: transparent;
  border: 1px solid transparent;
}
.ext-item:hover { background: #1a1a33; }
.ext-item.selected { background: #1a2a4d; border-color: #2a4a6a; }
.ext-item .info { flex: 1; min-width: 0; }
.ext-item .name { font-size: 13px; font-weight: 500; color: #e0e0e0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ext-item .brief { margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ext-item.is-off .name, .ext-item.is-off .brief, .ext-item.is-off .ext-avatar { opacity: .5; }
.ext-item.trick-item { justify-content: flex-start; }
.ext-got { color: #6bff8a; font-size: 13px; }
/* Categories are sub-groups of Browse, not sections: normal case, dim. */
.ext-side .avail-category {
  margin: 12px 2px 4px;
  padding: 0;
  border: none;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: #5a7a8a;
}
.ext-side .avail-category:first-child { margin-top: 2px; }
.ext-side .avail-more { margin-top: 6px; }

.ext-avatar {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
  color: hsl(var(--h) 85% 80%);
  background: hsl(var(--h) 40% 20%);
  border: 1px solid hsl(var(--h) 40% 30%);
}
.ext-avatar-lg { width: 64px; height: 64px; border-radius: 14px; font-size: 22px; }

/* Sticky and fitted to the window like the list beside it (fitExtPanes()
   sets max-height); long pages scroll inside it, not the whole page. */
.ext-detail { padding: 24px; position: sticky; top: 12px; overflow-y: auto; max-height: calc(100vh - 24px); }
.ext-head { display: flex; gap: 18px; align-items: flex-start; }
.ext-title { flex: 1; min-width: 0; }
.ext-title h2 { font-size: 22px; color: #fff; margin-bottom: 4px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ext-badge { font-size: 11px; font-weight: 600; color: #6bff8a; background: #1a3d2a; padding: 2px 8px; border-radius: 10px; }
.ext-where { font-size: 12px; font-weight: 400; color: #5a7a8a; }
.ext-sub { font-size: 14px; color: #a4b8d4; line-height: 1.4; }
.ext-from { font-size: 12px; color: #5a7a8a; margin-top: 6px; }
.ext-from a { color: #7a9ab5; }
.ext-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; }
.ext-install { padding: 7px 22px; font-size: 13px; font-weight: 600; background: #2a5aa0; color: #fff; }
.ext-install:hover { background: #3468b8; }
.ext-onoff { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: #a4b8d4; margin-right: 6px; }

.ext-tabs { display: flex; gap: 4px; border-bottom: 1px solid #1e2a3a; margin: 22px 0 16px; }
.ext-tab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: #6b8299;
  font: inherit;
  font-size: 13px;
  padding: 8px 12px;
  cursor: pointer;
  margin-bottom: -1px;
}
.ext-tab:hover { color: #c8d6e5; }
.ext-tab.active { color: #fff; border-bottom-color: #8ab4ff; }

.ext-how {
  background: #12122a;
  border: 1px solid #1e2a3a;
  border-radius: 8px;
  padding: 14px 16px;
  margin-bottom: 18px;
}
.ext-how h3 { color: #a4b8d4; margin-bottom: 8px; }
.ext-how dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; font-size: 13px; line-height: 1.45; }
.ext-how dt { color: #5a7a8a; }
.ext-how dd { color: #c8d6e5; }
.ext-how a { color: #8ab4ff; }
.ext-how code, .ext-readme code { background: #1a1a33; padding: 1px 5px; border-radius: 3px; font-size: 12px; color: #f5c542; }
.ext-note { font-size: 12px; color: #5a7a8a; margin-bottom: 10px; }

.ext-readme { font-size: 14px; line-height: 1.6; color: #c8d6e5; max-width: 760px; }
.ext-readme h1, .ext-readme h2, .ext-readme h3 { color: #e0e0e0; margin: 1.2em 0 .4em; }
.ext-readme h1 { font-size: 18px; }
.ext-readme h2 { font-size: 16px; }
.ext-readme h3 { font-size: 14px; }
.ext-readme p { margin: .6em 0; }
.ext-readme ul, .ext-readme ol { margin: .5em 0; padding-left: 1.6em; }
.ext-readme li { margin: .25em 0; }
.ext-readme a { color: #8ab4ff; }
.ext-readme pre { background: #0f0f23; border: 1px solid #1e2a3a; border-radius: 6px; padding: 10px 12px; overflow-x: auto; margin: .8em 0; }
.ext-readme pre code { background: none; padding: 0; color: inherit; }

.ext-welcome { max-width: 640px; }
.ext-welcome h2 { font-size: 22px; color: #fff; margin-bottom: 10px; }
.ext-welcome p { font-size: 14px; line-height: 1.6; color: #a4b8d4; margin-bottom: 8px; }
.ext-welcome .ext-welcome-sub { color: #6b8299; }
.ext-welcome h3 { margin-top: 22px; color: #7a9ab5; }
.ext-starters { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; margin-top: 8px; }
.ext-starter {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  text-align: left;
  background: #1a1a33;
  border: 1px solid #1e2a3a;
  border-radius: 8px;
  padding: 12px;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.ext-starter:hover { border-color: #2a4a6a; background: #1a2a4d; }
.ext-starter b { display: block; color: #e0e0e0; font-size: 13px; font-weight: 600; }
.ext-starter span span { display: block; font-size: 12px; color: #6b8299; margin-top: 2px; line-height: 1.35; }

@media (max-width: 800px) {
  .ext { grid-template-columns: minmax(0, 1fr); }
  .ext-side { position: static; max-height: none; }
  .ext-detail { padding: 16px; position: static; max-height: none; overflow: visible; }
  .ext-head { gap: 12px; }
  .ext-avatar-lg { width: 48px; height: 48px; font-size: 17px; border-radius: 11px; }
}

/* ---- channels (tricksets) ----
   A chat-app style rail on the left lists every channel with its traffic;
   the selected one's name and topic sit above the tabs. */
/* The rail is a real sidebar: pinned to the window's left edge, full height,
   with the whole page (header included) shifted over to make room. */
.app-main { min-width: 0; }
.chan-rail {
  position: fixed;
  z-index: 30;
  top: 0;
  bottom: 0;
  left: 0;
  width: 220px;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  background: #12122a;
  border-right: 1px solid #1e2a3a;
  padding: 22px 10px 12px;
  transition: width .18s ease;
}
@media (min-width: 801px) {
  body { padding-left: 240px; transition: padding-left .18s ease; }
  body.rail-collapsed { padding-left: 84px; }
}
.chan-h {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #6b8299;
  padding: 2px 8px 6px;
}
.chan-h-off { margin-top: 14px; color: #4a6572; }
.chan-top { display: flex; align-items: center; gap: 4px; margin-bottom: 2px; }
.chan-page + .chan-h { border-top: 1px solid #1e2a3a; padding-top: 14px; margin-top: 12px; }
.chan-top .chan-home { flex: 1; margin: 0; }
.chan-home { color: #c8d6e5; font-weight: 600; }
.chan-home .chan-glyph, .chan-page .chan-glyph { display: inline-flex; color: #8ab4ff; }
.chan-page { color: #c8d6e5; font-weight: 600; }
.chan-home.active .chan-glyph { color: #8ab4ff; }
.chan-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex: none;
  background: none;
  border: none;
  border-radius: 5px;
  color: #6b8299;
  cursor: pointer;
}
.chan-toggle:hover { background: #1a2a4d; color: #c8d6e5; }
.chan-abbr { display: none; }

/* Collapsed: a narrow strip of channel initials, counts as a corner badge. */
body.rail-collapsed .chan-rail { width: 64px; padding: 22px 6px 12px; }
body.rail-collapsed .chan-top { flex-direction: column-reverse; gap: 8px; }
body.rail-collapsed .chan-rail .chan-h:not(.chan-h-off),
body.rail-collapsed .chan-name,
body.rail-collapsed .chan-rail .chan-glyph,
body.rail-collapsed .chan-off,
body.rail-collapsed .chan-warn { display: none; }
body.rail-collapsed .chan-h-off { display: block; font-size: 0; height: 1px; padding: 0; margin: 10px 6px; background: #1e2a3a; }
body.rail-collapsed .chan { position: relative; justify-content: center; padding: 4px 0; background: none; }
body.rail-collapsed .chan-abbr {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: #1a1a33;
  border: 1px solid #2a3a4a;
  font-size: 12px;
  font-weight: 700;
  color: #a4b8d4;
}
body.rail-collapsed .chan:hover .chan-abbr { border-color: #3a5a7a; color: #fff; }
body.rail-collapsed .chan.active .chan-abbr { background: #1a2a4d; border-color: #8ab4ff; color: #fff; }
body.rail-collapsed .chan.off .chan-abbr { opacity: .5; }
body.rail-collapsed .chan-add .chan-abbr { background: none; border-style: dashed; color: #4a7a5a; font-size: 16px; }
body.rail-collapsed .chan-count { position: absolute; top: 0; right: 0; font-size: 9px; padding: 0 5px; line-height: 15px; }
.chan {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  border-radius: 5px;
  padding: 6px 8px;
  margin-bottom: 1px;
  color: #8a9ab0;
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}
.chan:hover { background: #1a1a33; color: #c8d6e5; }
.chan.active { background: #1a2a4d; color: #fff; }
.chan.is-new .chan-name { color: #8ab4ff; font-weight: 600; }
.chan.off { color: #4a6572; }
.chan-glyph { width: 14px; flex: none; text-align: center; color: #4a6572; font-weight: 600; }
.chan.active .chan-glyph { color: #8ab4ff; }
.chan-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chan-count {
  flex: none;
  font-size: 11px;
  font-weight: 600;
  color: #7a9ab5;
  background: #1e2a3a;
  border-radius: 9px;
  padding: 1px 7px;
}
.chan-count.live { color: #0f0f1a; background: #6bff8a; }
.chan-off { flex: none; font-size: 10px; color: #4a6572; }
.chan-add { color: #5a7a8a; margin-top: 6px; }
.chan-add .chan-glyph { color: #4a7a5a; }
.chan-warn { font-size: 11px; color: #ffb84d; padding: 4px 8px; line-height: 1.4; }
.chan-warn b { color: #ffd08a; }
/* Help sits at the bottom of the rail */
.chan.chan-settings { margin-top: auto; }   /* Settings and Help, at the bottom */
.help-examples { margin-top: 24px; padding-top: 16px; border-top: 1px solid #1e2a3a; }
/* Help's live answer to "is it working?" */
#help-status:empty { display: none; }
#help-status { display: flex; align-items: baseline; gap: 10px; margin: 0 0 18px; padding: 10px 14px;
  background: #12122a; border: 1px solid #1e2a3a; border-radius: 8px; font-size: 14px; color: #a4b8d4; line-height: 1.5; }
#help-status b { color: #c8d6e5; }
#help-status code { font-size: 13px; }
.hs-dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: #5a7a8a; transform: translateY(-1px); }
.hs-dot.ok { background: #6bff8a; box-shadow: 0 0 6px #6bff8a; }
.hs-dot.bad { background: #ff7a7a; }
#help-content img { max-width: min(100%, 760px); height: auto; border: 1px solid #1e2a3a; border-radius: 6px; margin: 4px 0 8px; }

.rule-bar { position: relative; margin: 0 0 12px; }
.rule-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  min-height: 44px;
  padding: 6px 2px 10px;
  border-bottom: 1px solid #1e2a3a;
}
.chan-title { display: inline-flex; align-items: center; gap: 6px; font-size: 18px; font-weight: 700; color: #fff; }
.chan-title .chan-glyph { color: #6b8299; font-size: 18px; width: auto; }
.rule-sentence { font-size: 13px; color: #8a9ab0; padding-left: 12px; border-left: 1px solid #2a3a4a; }
.rule-sentence b { color: #c8d6e5; font-weight: 600; }
.rule-stats { color: #4a6572; }
.rule-row #rule-edit-btn { margin-left: auto; }

.rule-editor {
  margin-top: 10px;
  background: #16162a;
  border: 1px solid #2a3a4a;
  border-radius: 8px;
  padding: 14px 16px;
  max-width: 760px;
}
.rule-ed-title { font-size: 13px; font-weight: 600; color: #a4b8d4; margin-bottom: 10px; }
.rule-ed-sentence { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14px; color: #a4b8d4; }
.rule-ed-sentence input, .rule-ed-name input {
  background: #0f0f23;
  border: 1px solid #2a3a4a;
  border-radius: 5px;
  color: #e0e0e0;
  font: inherit;
  font-size: 13px;
  padding: 5px 8px;
  width: 170px;
}
.rule-ed-sentence input:focus, .rule-ed-name input:focus { outline: none; border-color: #3a5a7a; }
.rule-ed-then { flex-basis: 100%; color: #6b8299; font-size: 13px; }
.rule-ed-name { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 13px; color: #6b8299; }
.rule-ed-hint { font-size: 11px; color: #4a6572; margin-top: 8px; }
.rule-ed-hint code { color: #f5c542; }
.rule-ed-preview { font-size: 12px; margin-top: 8px; }
.rule-ed-preview.warn { color: #ffb84d; }
.rule-ed-actions { display: flex; gap: 8px; margin-top: 12px; }
.rule-ed-spacer { flex: 1; }
.rule-suggest { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12px; color: #6b8299; margin-bottom: 12px; }
.rule-chip {
  font: inherit;
  font-size: 12px;
  color: #c8d6e5;
  background: #1a1a33;
  border: 1px solid #2a3a4a;
  border-radius: 12px;
  padding: 2px 10px;
  cursor: pointer;
}
.rule-chip:hover { border-color: #3a5a7a; background: #1a2a4d; }
.rule-chip i { font-style: normal; color: #5a7a8a; margin-left: 4px; }

@media (max-width: 800px) {
  /* On a phone the rail stays a sidebar: the narrow badge strip along the
     left edge, and its toggle slides the full sidebar out over the page
     (body.rail-mobile-open) rather than pushing the page aside. JS keeps
     rail-collapsed on while it's shut, without touching the desktop choice. */
  body { padding-left: 74px; padding-right: 12px; }
  body.rail-mobile-open .chan-rail {
    width: 250px;
    padding: 22px 10px 12px;
    box-shadow: 8px 0 32px rgba(0, 0, 0, .55);
  }
  .rail-backdrop {
    position: fixed;
    inset: 0;
    z-index: 29;
    background: rgba(5, 5, 12, .6);
    display: none;
  }
  body.rail-mobile-open .rail-backdrop { display: block; }
}
@media (max-width: 620px) {
  .rule-sentence { flex-basis: 100%; border-left: none; padding-left: 0; }
  .rule-ed-sentence input { width: 100%; }
}

/* Scrollbars, everywhere in the dashboard (page, extension list, logs, code
   blocks, channel rail): a real, full-width scrollbar with a visible track,
   in the dashboard's colours rather than the OS's light grey. Global on
   purpose, so a new scrolling panel can't ship with the default look.
   Chrome ignores ::-webkit-scrollbar as soon as the standard scrollbar-*
   properties are set (and those only offer "thin"), so the standard ones
   are for Firefox alone. */
::-webkit-scrollbar { width: 14px; height: 14px; }
::-webkit-scrollbar-track { background: #0f0f23; border-left: 1px solid #1e2a3a; }
::-webkit-scrollbar-thumb {
  background: #34465a;
  border-radius: 7px;
  border: 2px solid #0f0f23;
  border-left-width: 3px;
  min-height: 40px;
}
::-webkit-scrollbar-thumb:hover { background: #4a6a8a; }
::-webkit-scrollbar-thumb:active { background: #5a82aa; }
::-webkit-scrollbar-corner { background: #0f0f23; }
@supports not selector(::-webkit-scrollbar) {
  * { scrollbar-color: #34465a #0f0f23; }
}

/* Live tab: an extension's own page, in a frame that fills the pane. */
.ext-live {
  display: block;
  width: 100%;
  height: max(320px, calc(100vh - 330px));  /* fallback; fitExtPanes() measures */
  border: 1px solid #1e2a3a;
  border-radius: 8px;
  background: #0f0f1a;
}
.ext-live-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #6bff8a;
  box-shadow: 0 0 6px #6bff8a;
  margin-right: 7px;
  vertical-align: 1px;
}

/* New channel: its own page. */
.newchan { max-width: 760px; padding: 8px 4px; }
.newchan h2 { font-size: 22px; color: #fff; margin-bottom: 8px; }
.newchan-lead { font-size: 14px; line-height: 1.6; color: #a4b8d4; margin-bottom: 18px; max-width: 640px; }
.newchan-form { max-width: none; padding: 20px; }
.newchan-form .rule-suggest { font-size: 13px; margin-bottom: 18px; }
.newchan-form .rule-ed-sentence { font-size: 15px; }
.newchan-form .rule-ed-sentence input, .newchan-form .rule-ed-name input { width: 200px; padding: 7px 10px; font-size: 14px; }
.newchan-form .rule-ed-name { margin-top: 16px; font-size: 14px; }
.newchan-form .rule-ed-actions { margin-top: 18px; }
.newchan-form .rule-ed-actions .btn { padding: 6px 16px; font-size: 13px; }
.chan-add.active { background: #1a2a4d; color: #fff; }

/* Pop out: the Live page in its own browser tab. */
.ext-popout {
  margin-left: auto;
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 5px;
  color: #8a9ab0;
  font-size: 12px;
  text-decoration: none;
}
.ext-popout:hover { color: #fff; background: #1a2a4d; }

/* A channel that isn't running: its page says so, with Turn on, and the
   per-channel tabs (which would show another channel's data) are hidden. */
.chan-off-note {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 14px;
  padding: 14px 16px;
  background: #2a220f;
  border: 1px solid #5a4a1f;
  border-radius: 8px;
  color: #e8d9b0;
  font-size: 13px;
  line-height: 1.5;
}
.chan-off-note b { color: #ffd08a; }
.chan-off-note[hidden] { display: none; }
body.chan-off:not(.no-channel) .tabs,
body.chan-off:not(.no-channel) #tab-tricks,
body.chan-off:not(.no-channel) #tab-logs,
body.chan-off:not(.no-channel) #tab-settings { display: none !important; }

/* Connecting: the base URL, as an information card with copy buttons. */
.connecting { max-width: 780px; padding: 8px 4px; }
.info-card {
  background: #16162a;
  border: 1px solid #1e2a3a;
  border-top: 3px solid #2a5aa0;
  border-radius: 10px;
  padding: 20px 22px 22px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, .25);
}
.info-card-head { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.info-card-icon {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: #1a2a4d;
  border: 1px solid #2a4a6a;
  color: #8ab4ff;
}
.info-card h2 { font-size: 19px; color: #fff; margin: 0; }
.info-card-sub { font-size: 13px; color: #6b8299; margin-top: 1px; }
.info-card p { font-size: 14px; color: #a4b8d4; margin: 12px 0 0; }
.info-card p b { color: #e0e0e0; }
.info-card-divider { height: 1px; background: #1e2a3a; margin: 20px 0 0; }
.info-card .connecting-sub { color: #6b8299; margin-top: 16px; }
.copy-row { display: flex; gap: 10px; align-items: stretch; margin-top: 10px; flex-wrap: wrap; }
.copy-row code {
  flex: 1;
  min-width: 0;
  padding: 12px 14px;
  background: #12122a;
  border: 1px solid #2a3a4a;
  border-radius: 8px;
  color: #8ab4ff;
  font: 15px ui-monospace, "SF Mono", Consolas, monospace;
  overflow-wrap: anywhere;
  user-select: all;
}
.copy-row .btn { padding: 0 18px; font-size: 13px; min-height: 42px; }

/* Header: the base URL, click to copy. */
.base-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #0f1a2a;
  border: 1px solid #1e2a3a;
  border-radius: 5px;
  padding: 3px 8px;
  color: #6b9ac5;
  font: 12px ui-monospace, "SF Mono", Consolas, monospace;
  cursor: pointer;
  max-width: 280px;
}
.base-chip:hover { border-color: #2a4a6a; color: #8ab4ff; }
.base-chip span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* "!" on a channel that has a problem; the reason is in its tooltip. */
.chan-alert {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: #ffb84d;
  color: #1a1206;
  font-size: 11px;
  font-weight: 800;
  cursor: help;
}
body.rail-collapsed .chan-alert { position: absolute; bottom: 2px; right: 2px; width: 14px; height: 14px; font-size: 9px; }

/* Channel editor: labeled fields, not a sentence to fill in. */
.rule-fields { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 12px 14px; align-items: start; max-width: 640px; }
.rule-field { display: contents; }
.rule-label { font-size: 13px; color: #a4b8d4; padding-top: 7px; white-space: nowrap; }
.rule-field input {
  background: #0f0f23;
  border: 1px solid #2a3a4a;
  border-radius: 5px;
  color: #e0e0e0;
  font: 13px ui-monospace, "SF Mono", Consolas, monospace;
  padding: 7px 10px;
  width: 100%;
}
.rule-field input:focus { outline: none; border-color: #3a5a7a; }
.rule-help { grid-column: 2; margin-top: -8px; font-size: 11px; color: #5a7a8a; line-height: 1.45; }
.rule-ed-preview { margin-top: 12px; font-size: 12px; color: #8a9ab0; }
.rule-ed-preview.ok { color: #9be8b0; }
.rule-ed-preview code { background: #1a1a33; padding: 1px 6px; border-radius: 3px; color: #c8d6e5; }
.rule-ed-preview a { color: #8ab4ff; }
@media (max-width: 620px) {
  .rule-fields { grid-template-columns: minmax(0, 1fr); }
  .rule-label { padding-top: 0; }
  .rule-help { grid-column: 1; margin-top: -6px; }
}

/* Discovered programs (Agents page). */
#discovered-card .card-title { justify-content: flex-start; gap: 10px; }
.disc-table { display: grid; grid-template-columns: minmax(160px, 1.2fr) minmax(110px, 1.1fr) minmax(100px, .9fr) 80px max-content; font-size: 13px; }
.disc-dim { font-style: normal; color: #4a6572; }
.disc-row { display: contents; cursor: pointer; }
.disc-row:hover > span { background: #1a1a33; }
.disc-row.open > span { background: #1a1a33; border-bottom-color: transparent; }
.disc-caret { color: #5a7a8a; font-size: 10px; width: 12px; flex: none; }
/* the caret stays beside the name; a long User-Agent is cut to one line
   (all of it is in the tooltip and in the expanded headers) */
.disc-row > span.disc-who { flex-wrap: nowrap; }
.disc-who code { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; overflow-wrap: normal; }
.disc-detail { grid-column: 1 / -1; background: #12122a; border-bottom: 1px solid #1e2a3a; padding: 10px 14px 14px 30px; cursor: default; }
.disc-detail-head { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #6b8299; margin-bottom: 8px; }
.disc-headers { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 3px 16px; font: 12px ui-monospace, "SF Mono", Consolas, monospace; }
.disc-headers .hk { color: #8ab4ff; }
.disc-headers .hv { color: #c8d6e5; overflow-wrap: anywhere; }
.disc-row > span { padding: 9px 8px; border-bottom: 1px solid #1e2a3a; display: flex; align-items: center; flex-wrap: wrap; gap: 4px; min-width: 0; }
.disc-head > span { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #6b8299; padding-top: 2px; }
.disc-table code { background: #1a1a33; padding: 1px 6px; border-radius: 3px; color: #c8d6e5; font-size: 12px; overflow-wrap: anywhere; }
.disc-models code { color: #8a9ab0; }
.disc-chan { color: #8ab4ff; text-decoration: none; font-size: 12px; background: #1a2a4d; padding: 1px 7px; border-radius: 9px; }
.disc-chan:hover { background: #253a6a; }
.disc-n { color: #c8d6e5; font-variant-numeric: tabular-nums; flex-direction: column; align-items: flex-start !important; gap: 0 !important; }
.disc-n i { font-style: normal; font-size: 11px; color: #5a7a8a; }
.disc-actions { justify-content: flex-end; flex-wrap: nowrap !important; }
@media (max-width: 900px) {
  .disc-table { grid-template-columns: minmax(0, 1fr); }
  .disc-head { display: none; }
  .disc-row > span { border-bottom: none; padding: 3px 4px; }
  .disc-row > span:last-child { border-bottom: 1px solid #1e2a3a; padding-bottom: 10px; justify-content: flex-start; }
}


/* Connecting: the last call to the provider failed. */
.upstream-error {
  position: relative;
  background: #2a1a1f;
  border: 1px solid #5a2a35;
  border-left: 3px solid #ff6b8a;
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 16px;
}
.upstream-error-head { display: flex; gap: 12px; align-items: flex-start; }
.upstream-error-head .chan-alert { background: #ff6b8a; color: #1a0a0f; margin-top: 2px; }
.upstream-error b { color: #ffd0d8; font-weight: 600; }
.upstream-error code { color: #ffb0c0; font-size: 13px; overflow-wrap: anywhere; }
.upstream-error-sub { font-size: 12px; color: #c08a96; margin-top: 2px; }
.upstream-error pre {
  margin: 10px 0 0 29px;
  padding: 8px 10px;
  background: #1a0f13;
  border: 1px solid #4a2530;
  border-radius: 6px;
  color: #ffc0cc;
  font: 12px ui-monospace, "SF Mono", Consolas, monospace;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 200px;
  overflow: auto;
}

/* Below the card: the plain-line bypass URL. */

.upstream-dismiss {
  position: absolute;
  top: 8px;
  right: 10px;
  width: 26px;
  height: 26px;
  border: none;
  border-radius: 5px;
  background: none;
  color: #c08a96;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.upstream-dismiss:hover { background: #3a2229; color: #ffd0d8; }

/* At a glance: settings as label / value pairs. */
.glance-settings { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 3px 14px; margin-bottom: 4px; }
.glance-k { color: #8a9ab0; }
.glance-settings code { overflow-wrap: anywhere; }
.glance-dim { color: #5a7a8a; }

/* An installed extension reporting a problem (Trick.problems) */
.ext-item .chan-alert { flex: none; margin-right: 8px; cursor: help; }
.ext-problem { margin: 16px 0 14px; }
.ext-problem-line { font-size: 13px; color: #e8c0c8; margin-top: 4px; line-height: 1.5; }
.ext-problem-line code { font-size: 12px; }

/* Try it: the key/value table the model can use as tools */
.pg-msg.tool .pg-body { background: #12122a; border: 1px solid #1e2a3a; color: #a8c0d8;
  font: 11.5px ui-monospace, "SF Mono", Consolas, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
.pg-table { border-top: 1px solid #1e2a3a; font-size: 12px; }
.pg-thead { display: flex; align-items: center; padding: 0 10px 0 0; }
.pg-thead:hover { background: #1a1a33; }
.pg-topen { display: flex; align-items: center; gap: 6px; flex: 1; background: none; border: none;
  color: #8ab4ff; font: inherit; font-weight: 600; padding: 7px 10px; cursor: pointer; text-align: left; }
.pg-tcaret { color: #5a7a8a; font-size: 10px; width: 10px; }
.pg-tcount { background: #1a2a4d; color: #8ab4ff; border-radius: 9px; padding: 0 7px; font-size: 11px; font-weight: 600; }
.pg-ttools { display: flex; align-items: center; gap: 8px; color: #8a9ab0; font-size: 11px; cursor: help; }
.pg-tbody { padding: 0 10px 8px; max-height: 220px; overflow-y: auto; }
.pg-trow { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr) auto; gap: 6px; align-items: center; padding: 3px 0; border-bottom: 1px solid #161a2a; }
.pg-trow code { font-size: 11.5px; color: #c8d6e5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pg-tdel { background: none; border: none; color: #5a7a8a; font-size: 15px; cursor: pointer; padding: 0 4px; line-height: 1; }
.pg-tdel:hover { color: #ff6b8a; }
.pg-tadd { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr) auto; gap: 6px; margin-top: 6px; }
.pg-tadd input { min-width: 0; background: #0f0f1a; border: 1px solid #1e2a3a; color: #c8d6e5; border-radius: 4px;
  padding: 4px 6px; font: 11.5px ui-monospace, "SF Mono", Consolas, monospace; }
.pg-tadd input:focus { outline: none; border-color: #3a5a80; }

/* Connecting: the sections under the base URL card */
.conn-sec { margin-top: 26px; padding: 0 4px; max-width: 780px; }
.conn-sec + .conn-sec { border-top: 1px solid #1e2a3a; padding-top: 22px; }
.conn-sec-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.conn-sec-icon { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 7px; background: #1a2a4d; color: #8ab4ff; flex: none; }
.conn-sec h3 { font-size: 15px; color: #c8d6e5; margin: 0; }
.conn-sec p { font-size: 13px; line-height: 1.55; color: #8a9ab0; margin: 0 0 10px; }
.conn-sec p b { color: #c8d6e5; }
.conn-sec p code { font-size: 12.5px; color: #a4b8d4; background: transparent; padding: 0; }
.conn-sec .copy-row code { font-size: 14px; color: #8a9ab0; background: transparent; }
.conn-sec .copy-row + .copy-row { margin-top: 6px; }

/* An installed extension's place in the run order */
.trick-item .ext-pos { flex: none; width: 16px; margin-right: 6px; text-align: center; font-size: 11px;
  font-weight: 600; color: #5a7a8a; font-variant-numeric: tabular-nums; }

/* a setting a model changed, on the extension's At a glance */
.glance-by { color: #f0c96b; font-size: 12px; }

/* petsitter's own Settings page */
.setting-help { font-size: 12px; color: #6b8299; margin-top: 4px; max-width: 70ch; line-height: 1.5; }
.setting-help code { font-size: 11.5px; }
.setting-pending { color: #e0b252; }
.setting-error { color: #ff6b8a; }
.setting-unit { font-size: 12.5px; color: #8fa6bd; }
.ps-settings { display: flex; flex-direction: column; gap: 22px; margin-top: 16px; }
.ps-setting { display: grid; grid-template-columns: 150px minmax(0, 1fr); column-gap: 16px; row-gap: 2px; align-items: center; }
.ps-setting > .setting-help { grid-column: 2; }
.ps-label { font-size: 13px; color: #c8d6e5; font-weight: 500; }
.ps-input { display: flex; align-items: center; gap: 8px; }
.ps-input input { background: #11112a; border: 1px solid #2a3a4a; border-radius: 4px; color: #e0e0e0;
                  padding: 6px 9px; font-size: 13px; }
.ps-input input:focus { outline: none; border-color: #3b82f6; }
.ps-num { width: 80px; }
.ps-text { flex: 0 1 280px; min-width: 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
@media (max-width: 640px) { .ps-setting { grid-template-columns: 1fr; } .ps-setting > .setting-help { grid-column: 1; } }
.ps-elsewhere { margin-top: 18px; padding: 0 4px; }
.ps-elsewhere p { font-size: 13px; color: #8fa6bd; line-height: 1.55; max-width: 72ch; margin: 0 0 10px; }
/* a picture of the interface, not more interface: a window frame, a tilt,
   a shadow, muted colors and a caption */
.ps-shot { margin: 6px 0 0; max-width: 664px; transform: rotate(-0.8deg); transform-origin: left top;
           user-select: none; pointer-events: none; }
.ps-shot-frame { display: flex; gap: 6px; padding: 7px 10px; background: #2a3346; border-radius: 8px 8px 0 0;
                 border: 1px solid #3a4560; border-bottom: none; }
.ps-shot-frame span { width: 9px; height: 9px; border-radius: 50%; background: #5a6680; }
.ps-shot img { display: block; width: 100%; height: auto; border: 1px solid #3a4560; border-top: none;
               border-radius: 0 0 8px 8px; filter: saturate(.75) brightness(.9);
               box-shadow: 0 14px 34px rgba(0, 0, 0, .55); }
.ps-shot figcaption { margin-top: 10px; font-size: 11.5px; font-style: italic; color: #6b8299; }