/* Screen-level components added in the 2026-10-09 gap pass (agent builder,
   playground, deploy, knowledge base sheets, skills, providers, voice, workflow,
   manager canvas, traces). Loaded after clone.css. Keep page-chrome styles in
   clone.css.

   Everything here is on the product's own tokens — black primary, violet only
   where the live app uses violet, borders from --border. No gold. */

/* ======================================================================
   Shared primitives
   ====================================================================== */
.afq-iconbtn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 6px; flex: none;
  border: 0; background: transparent; cursor: pointer;
  color: hsl(var(--muted-foreground));
  transition: background .15s ease, color .15s ease;
}
.afq-iconbtn:hover { background: hsl(var(--accent)); color: hsl(var(--foreground)) }
.afq-iconbtn.is-on { background: hsl(var(--accent)); color: hsl(var(--foreground)) }
.afq-iconbtn:disabled { opacity: .4; cursor: default }

.afq-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .375rem;
  height: 32px; padding: 0 12px; border-radius: 6px; white-space: nowrap;
  font-size: .75rem; font-weight: 500; cursor: pointer; text-decoration: none;
  border: 1px solid transparent; background: transparent; color: inherit;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.afq-btn svg { flex: none }
.afq-btn:disabled { opacity: .5; pointer-events: none }
.afq-btn-primary { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); box-shadow: 0 1px 2px hsl(0 0% 0% / .08) }
.afq-btn-primary:hover { background: hsl(var(--primary) / .9) }
.afq-btn-outline { border-color: hsl(var(--input)); background: hsl(var(--background)); box-shadow: 0 1px 2px hsl(0 0% 0% / .05) }
.afq-btn-outline:hover { background: hsl(var(--accent)) }
.afq-btn-ghost { color: hsl(var(--muted-foreground)) }
.afq-btn-ghost:hover { background: hsl(var(--accent)); color: hsl(var(--foreground)) }
.afq-btn-danger { border-color: hsl(var(--destructive) / .5); color: hsl(var(--destructive)); background: hsl(var(--background)) }
.afq-btn-danger:hover { background: hsl(var(--destructive) / .08) }
.afq-btn-violet { border-color: hsl(var(--ui-violet)); color: hsl(var(--ui-violet)); background: hsl(var(--background)) }
.afq-btn-violet:hover { background: hsl(var(--ui-violet) / .06) }
.afq-btn-lg { height: 36px; padding: 0 16px; font-size: .8125rem }
.afq-btn-sm { height: 28px; padding: 0 10px }

.afq-lbl { display: block; font-size: .8125rem; font-weight: 500; line-height: 1; margin-bottom: 6px }
.afq-lbl em { font-style: normal; color: hsl(var(--destructive)) }
.afq-hint { font-size: .75rem; color: hsl(var(--muted-foreground)); margin-top: 5px }
.afq-eb {
  font-size: .6875rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: hsl(var(--muted-foreground));
}
.afq-sel {
  display: inline-flex; align-items: center; gap: .375rem; height: 32px;
  border: 1px solid hsl(var(--input)); border-radius: 6px; background: hsl(var(--background));
  padding: 0 10px; font-size: .75rem; color: hsl(var(--foreground)); cursor: pointer;
}
.afq-sel svg { color: hsl(var(--muted-foreground)) }

/* floating layers */
.afq-popover {
  position: fixed; z-index: 80; min-width: 180px;
  border: 1px solid hsl(var(--border)); border-radius: 10px;
  background: hsl(var(--popover)); color: hsl(var(--popover-foreground));
  box-shadow: 0 12px 32px -12px hsl(0 0% 0% / .3), 0 2px 6px hsl(0 0% 0% / .08);
}
.afq-menu { padding: 4px; min-width: 200px }
.afq-menu-title { padding: 6px 8px 4px; font-size: .6875rem; font-weight: 600; color: hsl(var(--muted-foreground)) }
.afq-menu-item {
  display: flex; align-items: center; gap: .5rem; width: 100%; text-align: left;
  border: 0; background: transparent; cursor: pointer; color: inherit; text-decoration: none;
  border-radius: 6px; padding: 7px 8px; font-size: .8125rem;
}
.afq-menu-item:hover { background: hsl(var(--accent)) }
.afq-menu-item svg { color: hsl(var(--muted-foreground)) }
.afq-menu-item.is-danger, .afq-menu-item.is-danger svg { color: hsl(var(--destructive)) }
.afq-menu-item.is-danger:hover { background: hsl(var(--destructive) / .08) }
.afq-menu-item.is-disabled { opacity: .5; cursor: default }
.afq-menu-item.is-disabled:hover { background: transparent }
.afq-menu-sub { margin-left: auto; font-size: .6875rem; color: hsl(var(--muted-foreground)) }
.afq-menu-sep { height: 1px; margin: 4px -4px; background: hsl(var(--border)) }

/* sheets (right) and modals (centred) */
.afq-sheet-scrim, .afq-modal-scrim {
  position: fixed; inset: 0; z-index: 90; background: hsl(0 0% 0% / .8);
  display: flex;
}
.afq-sheet-scrim { justify-content: flex-end }
.afq-modal-scrim { align-items: center; justify-content: center; padding: 16px; overflow: auto }
.afq-sheet {
  display: flex; flex-direction: column; height: 100%; width: 100%; max-width: 448px;
  background: hsl(var(--background)); border-left: 1px solid hsl(var(--border));
  box-shadow: -8px 0 32px -16px hsl(0 0% 0% / .4);
  animation: afq-slide .18s ease-out;
}
.afq-sheet.is-wide { max-width: min(1180px, 92vw) }
.afq-sheet.is-mid { max-width: 640px }
.afq-modal {
  display: flex; flex-direction: column; width: 100%; max-width: 560px; max-height: 92vh;
  background: hsl(var(--background)); border: 1px solid hsl(var(--border)); border-radius: 12px;
  box-shadow: 0 24px 48px -16px hsl(0 0% 0% / .4);
}
.afq-modal.is-wide { max-width: 760px }
.afq-modal.is-narrow { max-width: 440px }
.afq-ov-head { display: flex; align-items: flex-start; gap: .75rem; padding: 18px 20px 12px }
.afq-ov-title { margin: 0; font-size: 1rem; font-weight: 600; line-height: 1.3; display: flex; align-items: center; gap: .5rem }
.afq-ov-desc { margin: 4px 0 0; font-size: .8125rem; color: hsl(var(--muted-foreground)) }
.afq-ov-body { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 4px 20px 20px }
.afq-ov-foot {
  display: flex; align-items: center; justify-content: flex-end; gap: .5rem;
  padding: 12px 20px; border-top: 1px solid hsl(var(--border));
}
.afq-ov-foot .afq-left { margin-right: auto; font-size: .75rem; color: hsl(var(--muted-foreground)) }
@keyframes afq-slide { from { transform: translateX(24px); opacity: 0 } to { transform: none; opacity: 1 } }

/* switch */
.afq-switch {
  position: relative; width: 36px; height: 20px; flex: none; border-radius: 999px;
  border: 0; cursor: pointer; background: hsl(var(--input));
  transition: background .15s ease;
}
.afq-switch[aria-checked="true"] { background: hsl(var(--primary)) }
.afq-switch-knob {
  position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 999px;
  background: hsl(var(--background)); box-shadow: 0 1px 2px hsl(0 0% 0% / .2);
  transition: transform .15s ease;
}
.afq-switch[aria-checked="true"] .afq-switch-knob { transform: translateX(16px) }
.afq-switch-sm { width: 30px; height: 16px }
.afq-switch-sm .afq-switch-knob { width: 12px; height: 12px }
.afq-switch-sm[aria-checked="true"] .afq-switch-knob { transform: translateX(14px) }

.afq-range { width: 100%; accent-color: hsl(var(--primary)); height: 18px }
input[type="checkbox"].afq-cb { accent-color: hsl(var(--primary)); width: 15px; height: 15px; border-radius: 4px }
input[type="radio"].afq-rd { accent-color: hsl(var(--primary)) }

/* list page bits */
.afq-skel {
  min-height: 8rem; border-radius: .5rem; background: hsl(var(--muted));
  animation: afq-skel 1.4s ease-in-out infinite;
}
@keyframes afq-skel { 0%, 100% { opacity: 1 } 50% { opacity: .45 } }
.afq-list-foot { padding: 14px 2px 4px; font-size: .75rem; color: hsl(var(--muted-foreground)) }

.afq-tilesq {
  display: inline-grid; place-items: center; flex: none;
  width: 36px; height: 36px; border-radius: 8px;
}
.afq-tilesq.is-lg { width: 44px; height: 44px; border-radius: 10px }
.afq-tilesq.is-lg svg { width: 20px; height: 20px }
.afq-avatar {
  display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 999px;
  background: hsl(var(--agent-card-violet-background)); color: hsl(var(--agent-card-violet));
  font-size: .625rem; font-weight: 600;
}
.afq-chip {
  display: inline-flex; align-items: center; gap: .25rem; height: 20px; padding: 0 7px;
  border-radius: 6px; font-size: .6875rem; font-weight: 500; white-space: nowrap;
  background: hsl(var(--secondary)); color: hsl(var(--secondary-foreground));
}
.afq-chip-dark { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)) }
.afq-chip-outline { background: transparent; border: 1px solid hsl(var(--border)); color: hsl(var(--muted-foreground)) }
.afq-chip-green { background: hsl(var(--status-success-bg)); color: hsl(var(--status-success)); border: 1px solid hsl(var(--status-success-border)) }
.afq-chip-blue { background: hsl(var(--status-info-bg)); color: hsl(var(--status-info)); border: 1px solid hsl(var(--status-info-border)) }
.afq-chip-amber { background: hsl(var(--status-warning-bg)); color: hsl(var(--status-warning)); border: 1px solid hsl(var(--status-warning-border)) }
.afq-chip-brand { background: hsl(var(--ui-violet) / .1); color: hsl(var(--ui-violet)) }

/* the registry / knowledge / skills card */
.afq-card {
  position: relative; display: flex; flex-direction: column; gap: 10px;
  min-height: 8rem; padding: 14px; border-radius: 10px; text-decoration: none; color: inherit;
  border: 1px solid hsl(var(--border)); background: hsl(var(--card));
  transition: border-color .15s ease, box-shadow .15s ease;
}
.afq-card:hover { border-color: hsl(var(--foreground) / .25); box-shadow: 0 4px 14px -8px hsl(0 0% 0% / .25) }
.afq-card-name { font-size: .875rem; font-weight: 600; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.afq-card-desc {
  font-size: .75rem; line-height: 1.45; color: hsl(var(--muted-foreground));
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.afq-card-chips { display: flex; align-items: center; gap: 6px; margin-top: auto; font-size: .6875rem; color: hsl(var(--muted-foreground)) }
.afq-card-dots { position: absolute; top: 10px; right: 10px }
.afq-card-dots .afq-iconbtn { width: 24px; height: 24px }

/* empty states */
.afq-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 56px 16px;
}
.afq-empty-ic {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 999px;
  background: hsl(var(--muted)); color: hsl(var(--muted-foreground)); margin-bottom: 12px;
}
.afq-empty-t { font-size: .875rem; font-weight: 600 }
.afq-empty-d { margin-top: 4px; max-width: 24rem; font-size: .8125rem; color: hsl(var(--muted-foreground)) }
.afq-empty-illus { width: 180px; height: auto; margin-bottom: 14px; color: hsl(var(--muted-foreground)) }

/* a dark code block with a header */
.afq-code2 {
  position: relative; border-radius: 10px; overflow: hidden;
  background: hsl(240 10% 8%); color: hsl(0 0% 90%); border: 1px solid hsl(240 6% 18%);
}
.afq-code2-head {
  display: flex; align-items: center; gap: .5rem; padding: 7px 12px;
  border-bottom: 1px solid hsl(240 6% 18%); font-size: .6875rem; color: hsl(0 0% 62%);
}
.afq-code2-head .afq-iconbtn { color: hsl(0 0% 70%) } .afq-code2-head .afq-iconbtn:hover { background: hsl(0 0% 100% / .08); color: #fff }
.afq-code2 pre {
  margin: 0; padding: 14px; overflow: auto;
  font-family: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .75rem; line-height: 1.6; white-space: pre;
}
.afq-code2 .k { color: hsl(200 80% 72%) } .afq-code2 .s { color: hsl(95 50% 70%) } .afq-code2 .n { color: hsl(30 90% 70%) }
.afq-monof { font-family: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace }

/* full-bleed pages: the sidebar hides, and reopens as an overlay drawer */
body.afq-fullbleed > div > aside[aria-label="Main"] { display: none }
body.afq-fullbleed.afq-drawer > div > aside[aria-label="Main"] {
  display: flex; position: fixed; left: 0; top: 0; z-index: 95; height: 100vh;
  border-right: 1px solid hsl(var(--border)); box-shadow: 12px 0 40px -20px hsl(0 0% 0% / .5);
}
body.afq-fullbleed.afq-drawer::after { content: ''; position: fixed; inset: 0; z-index: 94; background: hsl(0 0% 0% / .25) }
body.afq-fullbleed main > div > div { inset: 0; border-radius: 0; box-shadow: none }
body.afq-fullbleed main .afq-bhead-wrap { padding: 0 }

/* builder header: crumb | segmented | actions — 64px (review iteration 2):
   sidebar toggle, a divider, "Agents › Name" with the name 18px/600, the
   segmented tabs in the centre, 18px muted icons and the black Update. */
.afq-bhead {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .75rem;
  min-height: 64px; padding: 8px 16px;
}
.afq-bhead-l { display: flex; align-items: center; gap: .5rem; min-width: 0 }
.afq-bhead-r { display: flex; align-items: center; justify-content: flex-end; gap: .25rem }
.afq-bhead-c { display: flex; justify-content: center }
.afq-bhead-div { width: 1px; height: 20px; flex: none; background: hsl(var(--border)) }
.afq-bhead .afq-iconbtn { width: 32px; height: 32px }
.afq-bhead .afq-iconbtn svg { width: 18px; height: 18px }
.afq-bhead-r .afq-btn-primary { height: 36px; padding: 0 16px; font-size: .8125rem; margin-left: 6px }
.afq-bhead .afq-seg2 { padding: 4px; border-radius: 10px }
.afq-bhead .afq-seg2 button { padding: 6px 14px; font-size: .8125rem; border-radius: 7px }
.afq-crumb2 { display: inline-flex; align-items: center; gap: .4rem; min-width: 0; font-size: .9375rem }
.afq-crumb2 a { color: hsl(var(--muted-foreground)); text-decoration: none }
.afq-crumb2 a:hover { color: hsl(var(--foreground)) }
.afq-crumb2 > span { color: hsl(var(--muted-foreground)) }
.afq-crumb2 button {
  display: inline-flex; align-items: center; gap: .35rem; max-width: 26ch;
  border: 0; background: transparent; cursor: pointer; padding: 2px 6px; border-radius: 6px;
  font: inherit; font-weight: 600; color: hsl(var(--foreground));
}
.afq-crumb2 button b { font-size: 1.125rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.afq-crumb2 button:hover { background: hsl(var(--accent)) }
.afq-crumb2 button svg { color: hsl(var(--muted-foreground)); flex: none; opacity: 0; transition: opacity .15s }
.afq-crumb2 button:hover svg { opacity: 1 }
.afq-seg2 {
  display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: 8px;
  background: hsl(var(--muted));
}
.afq-seg2 button {
  display: inline-flex; align-items: center; gap: .375rem; border: 0; background: transparent; cursor: pointer;
  border-radius: 6px; padding: 5px 12px; font-size: .75rem; font-weight: 500; color: hsl(var(--muted-foreground));
  transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}
.afq-seg2 button:hover { color: hsl(var(--foreground)) }
.afq-seg2 button[aria-selected="true"] { background: hsl(var(--background)); color: hsl(var(--foreground)); box-shadow: 0 1px 2px hsl(0 0% 0% / .08) }

/* ======================================================================
   Agent builder — Build tab
   ====================================================================== */
/* Measured live (review iteration 2): 32px padding, labels 16px/600 with 8px
   below, inputs 52px tall / 18px text / 16px side padding / 10px radius, the
   instructions textarea 280px, the Manager strip 64px, the rail ≈ 500px. */
.afq-b { display: grid; gap: 32px; padding: 20px 20px 32px }
@media (min-width: 1024px) { .afq-b { grid-template-columns: minmax(0, 1fr) minmax(380px, 500px); align-items: start } }
.afq-b-h { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: 20px }
.afq-b-h b { font-size: .8125rem; font-weight: 500; color: hsl(var(--muted-foreground)) }
.afq-b-ai {
  display: inline-flex; align-items: center; gap: .35rem; height: 32px; padding: 0 10px; border-radius: 6px;
  border: 0; background: transparent; cursor: pointer;
  font-size: .8125rem; font-weight: 500; color: hsl(var(--foreground));
}
.afq-b-ai svg { color: hsl(var(--ui-violet)) }
.afq-b-ai:hover { background: hsl(var(--accent)) }
.afq-b-ai:disabled { opacity: .6; cursor: default }
.afq-b .afq-lbl { font-size: 1rem; font-weight: 600; margin-bottom: 8px }
.afq-b-fields { display: flex; flex-direction: column; gap: 24px }
.afq-b .afq-b-in {
  height: 52px; padding: 0 16px; border-radius: 10px; font-size: 1.125rem; line-height: 1.4;
  border: 1px solid hsl(var(--input)); background: hsl(var(--background)); box-shadow: none;
}
.afq-b textarea.afq-b-in { height: auto; min-height: 280px; padding: 14px 16px 48px; line-height: 1.55; resize: vertical }
.afq-b-ta { position: relative }
.afq-b-tafoot {
  position: absolute; left: 16px; right: 12px; bottom: 12px;
  display: flex; align-items: center; gap: .25rem; font-size: .875rem; color: hsl(var(--muted-foreground));
  pointer-events: none;
}
.afq-b-tafoot .afq-iconbtn { width: 28px; height: 28px; pointer-events: auto }
.afq-b-tafoot .afq-iconbtn svg { width: 16px; height: 16px }
.afq-b-mgr {
  display: flex; align-items: center; gap: .625rem; margin-top: 24px; min-height: 64px; padding: 0 16px 0 20px;
  border: 1px solid hsl(var(--border)); border-radius: 12px; background: hsl(var(--card));
  font-size: 1.125rem; font-weight: 600;
}
.afq-b-mgr > svg { width: 18px; height: 18px }
.afq-b-mgr .afq-btn { margin-left: auto; height: 32px; font-size: .8125rem }
.afq-b-mgr .afq-btn + .afq-btn { margin-left: 0 }

.afq-b-rail { border: 1px solid hsl(var(--border)); border-radius: 12px; background: hsl(var(--card)); overflow: hidden }
/* rail: 64px section rows, 18px/600 titles, a divider between sections */
.afq-b-row {
  display: flex; align-items: center; gap: .5rem; min-height: 64px;
  padding: 8px 14px 8px 20px; border-top: 1px solid hsl(var(--border));
  font-size: 1.125rem; font-weight: 600;
}
.afq-b-row:first-child { border-top: 0 }
.afq-b-row-t { flex: 1 1 auto; min-width: 0; display: inline-flex; align-items: center; gap: .5rem }
.afq-b-row-t .afq-n {
  display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px;
  background: hsl(var(--ui-violet) / .12); color: hsl(var(--ui-violet)); font-size: .75rem; font-weight: 600;
}
.afq-b-add {
  display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex: none;
  border-radius: 6px; border: 0; background: transparent; cursor: pointer;
  color: hsl(var(--muted-foreground));
}
.afq-b-add svg { width: 18px; height: 18px }
.afq-b-add:hover { background: hsl(var(--accent)); color: hsl(var(--foreground)) }
.afq-b-link {
  display: inline-flex; align-items: center; gap: .25rem; border: 0; background: transparent; cursor: pointer; padding: 0;
  font-size: .75rem; font-weight: 500; color: hsl(var(--muted-foreground));
}
.afq-b-link:hover { color: hsl(var(--foreground)) }
.afq-b-link + .afq-b-link { margin-left: 10px }
/* on the rail the links are ghost buttons ("+ Schedule", "View all ›") */
.afq-b-row .afq-b-link { height: 32px; padding: 0 10px; border-radius: 6px; font-size: .8125rem; gap: .3rem }
.afq-b-row .afq-b-link:hover { background: hsl(var(--accent)) }
.afq-b-row .afq-b-link + .afq-b-link { margin-left: 2px }
.afq-b-model {
  display: flex; align-items: center; gap: .5rem; margin: 0 14px 16px 20px;
}
.afq-b-model-combo {
  display: inline-flex; align-items: center; gap: .625rem; flex: 1 1 auto; min-width: 0; height: 52px;
  border: 1px solid hsl(var(--input)); border-radius: 10px; padding: 0 14px; background: hsl(var(--background));
  cursor: pointer; font-size: 1rem; color: inherit; text-align: left;
}
.afq-b-model-combo:hover { background: hsl(var(--accent)) }
.afq-b-model-combo b { font-weight: 600 }
.afq-b-model-combo .afq-sep { color: hsl(var(--muted-foreground)) }
.afq-b-model-combo .afq-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: hsl(var(--muted-foreground)) }
.afq-b-model-icons { display: inline-flex; gap: 2px }
.afq-b-model-icons .afq-iconbtn { width: 30px; height: 30px }
.afq-b-model-icons .afq-iconbtn svg { width: 16px; height: 16px }
.afq-b-out { padding: 0 20px 16px; display: flex; flex-direction: column; gap: 8px }
.afq-b-outrow { display: flex; align-items: center; gap: .75rem; padding: 10px 12px; border: 1px solid hsl(var(--border)); border-radius: 10px }
.afq-b-outrow .afq-t { font-size: .875rem; font-weight: 500 }
.afq-b-outrow .afq-d { font-size: .75rem; color: hsl(var(--muted-foreground)); line-height: 1.4 }
.afq-b-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 20px 16px }
.afq-b-chip {
  display: inline-flex; align-items: center; gap: .4rem; border-radius: 8px; padding: 5px 10px; font-size: .8125rem;
  border: 1px solid hsl(var(--border)); background: hsl(var(--muted) / .5);
}
.afq-b-chip button { border: 0; background: transparent; cursor: pointer; color: hsl(var(--muted-foreground)); line-height: 1; padding: 0; display: inline-flex }
.afq-b-chip button:hover { color: hsl(var(--destructive)) }
/* feature cards: the enabled one has a dashed violet border and no "+ Add" */
.afq-b-feats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 0 20px 20px }
.afq-b-feat {
  display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 14px;
  border: 1px solid hsl(var(--border)); border-radius: 12px; background: hsl(var(--background));
}
.afq-b-feat.is-on { border: 1px dashed hsl(var(--ui-violet) / .7); background: hsl(var(--ui-violet) / .04) }
.afq-b-feat-h { display: flex; align-items: center; justify-content: space-between; gap: .25rem; font-size: .875rem; font-weight: 600 }
.afq-b-feat-d {
  font-size: .8125rem; line-height: 1.4; color: hsl(var(--muted-foreground));
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.afq-b-feat-add {
  margin-top: auto; align-self: flex-start; display: inline-flex; align-items: center; gap: .25rem;
  border: 0; background: transparent; cursor: pointer; padding: 6px 0 0;
  font-size: .8125rem; font-weight: 600; color: hsl(var(--foreground));
}
.afq-b-feat-add:hover { text-decoration: underline }

/* picker popover */
.afq-pk { width: 300px; padding: 0; overflow: hidden }
.afq-pk-search { display: flex; align-items: center; gap: .5rem; padding: 9px 11px; border-bottom: 1px solid hsl(var(--border)) }
.afq-pk-search input { flex: 1 1 auto; min-width: 0; border: 0; background: transparent; outline: none; font-size: .8125rem; color: hsl(var(--foreground)) }
.afq-pk-search input::placeholder { color: hsl(var(--muted-foreground)) }
.afq-pk-chips { display: flex; gap: 4px; padding: 8px 10px 0 }
.afq-pk-chip {
  border: 0; cursor: pointer; border-radius: 6px; padding: 3px 8px; font-size: .6875rem; font-weight: 500;
  background: transparent; color: hsl(var(--muted-foreground));
}
.afq-pk-chip[aria-selected="true"] { background: hsl(var(--accent)); color: hsl(var(--foreground)); font-weight: 600 }
.afq-pk-list { max-height: 280px; overflow-y: auto; padding: 6px }
.afq-pk-row {
  display: flex; align-items: center; gap: .5rem; width: 100%; border: 0; background: transparent; cursor: pointer;
  text-align: left; border-radius: 7px; padding: 7px 8px; color: inherit;
}
.afq-pk-row:hover { background: hsl(var(--accent)) }
.afq-pk-row-t { font-size: .8125rem; font-weight: 500; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.afq-pk-row-d { font-size: .6875rem; color: hsl(var(--muted-foreground)); display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.afq-pk-tick, .afq-pk-chev { margin-left: auto; color: hsl(var(--muted-foreground)); flex: none; display: inline-flex }
.afq-pk-tick { color: hsl(var(--foreground)) }
.afq-pk-chev svg { transition: transform .15s ease }
.afq-pk-row[aria-expanded="true"] .afq-pk-chev svg { transform: rotate(90deg) }
.afq-pk-sub { padding-left: 14px }
.afq-pk-suggest {
  display: flex; align-items: center; gap: .4rem; width: 100%; border: 0; cursor: pointer; text-align: left;
  border-radius: 7px; padding: 7px 8px; margin-bottom: 2px;
  background: hsl(var(--ui-violet) / .08); color: hsl(var(--ui-violet)); font-size: .8125rem; font-weight: 500;
}
.afq-pk-suggest:hover { background: hsl(var(--ui-violet) / .14) }
.afq-pk-foot { border-top: 1px solid hsl(var(--border)); padding: 8px 11px; font-size: .75rem }
.afq-pk-foot a, .afq-pk-foot button { display: inline-flex; align-items: center; gap: .3rem; color: hsl(var(--muted-foreground)); text-decoration: none; border: 0; background: transparent; cursor: pointer; padding: 0; font: inherit }
.afq-pk-foot a:hover, .afq-pk-foot button:hover { color: hsl(var(--foreground)) }
.afq-pk-empty { padding: 16px 10px; text-align: center; font-size: .75rem; color: hsl(var(--muted-foreground)) }

/* advanced settings / name / version popovers */
.afq-adv { width: 320px; padding: 6px 0 }
.afq-adv-h { padding: 8px 14px 6px; font-size: .8125rem; font-weight: 600 }
.afq-adv-row { display: flex; align-items: center; gap: .75rem; padding: 8px 14px }
.afq-adv-row .afq-t { flex: 1 1 auto; font-size: .8125rem; font-weight: 500 }
.afq-adv-row .afq-d { font-size: .6875rem; color: hsl(var(--muted-foreground)) }
.afq-adv-row .afq-v { font-size: .75rem; color: hsl(var(--muted-foreground)); font-variant-numeric: tabular-nums }
.afq-adv-field { padding: 6px 14px 8px }
.afq-pop-form { width: 320px; padding: 14px }
.afq-pop-form .afq-row { display: flex; align-items: center; gap: .5rem; margin-top: 10px }
.afq-ver { width: 300px; padding: 6px }
.afq-ver-h { padding: 6px 8px 8px; font-size: .8125rem; font-weight: 600 }
.afq-ver-row {
  display: flex; align-items: center; gap: .5rem; padding: 7px 8px; border-radius: 7px; font-size: .75rem;
}
.afq-ver-row:hover { background: hsl(var(--accent)) }
.afq-ver-row b { font-weight: 600 }
.afq-ver-row .afq-when { margin-left: auto; color: hsl(var(--muted-foreground)) }

/* ======================================================================
   Playground
   ====================================================================== */
/* Three flat panes (no card borders) separated by 1px dividers that carry a
   six-dot grip; sessions rail ≈ 260px, right pane ≈ 350px (review iteration 2). */
.afq-p { display: grid; grid-template-columns: 260px 1px minmax(0, 1fr) 1px 350px; gap: 0; height: calc(100vh - 88px); min-height: 440px }
.afq-p.is-collapsed { grid-template-columns: 260px 1px minmax(0, 1fr) 1px 48px }
.afq-p-div { position: relative; background: hsl(var(--border)) }
.afq-p-div i {
  position: absolute; left: 50%; top: 50%; width: 7px; height: 16px; transform: translate(-50%, -50%);
  background: radial-gradient(circle, hsl(var(--muted-foreground) / .7) 1.1px, transparent 1.5px) 0 0 / 4px 5px;
}
@media (max-width: 1100px) { .afq-p, .afq-p.is-collapsed { grid-template-columns: minmax(0, 1fr); height: auto } .afq-p-div { display: none } }
.afq-p-pane { display: flex; flex-direction: column; min-height: 0; min-width: 0; background: transparent; overflow: hidden }
.afq-p-sessions { padding: 20px 16px 20px 4px }
.afq-p-new {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem; width: 100%; height: 40px;
  border: 0; border-radius: 8px; background: hsl(var(--muted)); cursor: pointer;
  font-size: .875rem; font-weight: 500; color: hsl(var(--foreground));
}
.afq-p-new:hover { background: hsl(var(--accent)) }
.afq-p-slabel { padding: 20px 8px 8px; font-size: .875rem; color: hsl(var(--muted-foreground)) }
.afq-p-srow {
  display: flex; align-items: center; gap: .5rem; width: 100%; text-align: left; border: 0; background: transparent;
  cursor: pointer; border-radius: 8px; padding: 8px 10px; font-size: 1.0625rem; color: inherit;
}
.afq-p-srow:hover { background: hsl(var(--accent)) }
.afq-p-srow.is-active { background: hsl(var(--accent)); font-weight: 500 }
.afq-p-srow span { min-width: 0; flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.afq-p-srow svg { display: none }
.afq-p-snone { padding: 8px 10px; font-size: .875rem; color: hsl(var(--muted-foreground)) }
.afq-p-log { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 24px 32px; display: flex; flex-direction: column; gap: 16px }
/* the welcome block sits left-aligned in the upper third */
.afq-p-welcome { margin: 0 0 auto; padding-top: 14vh; text-align: left; max-width: 40rem }
.afq-p-welcome h3 { margin: 0; font-size: 2rem; font-weight: 700; letter-spacing: -.01em }
.afq-p-welcome p { margin: 10px 0 0; font-size: 1.25rem; line-height: 1.4; color: hsl(var(--muted-foreground)) }
.afq-p-turn { display: flex; flex-direction: column; gap: 4px; max-width: 78%; align-self: flex-start; align-items: flex-start }
.afq-p-turn.mine { align-self: flex-end; align-items: flex-end }
.afq-p-bubble {
  border-radius: 12px; padding: 9px 13px; font-size: .875rem; line-height: 1.55;
  background: hsl(var(--muted)); color: hsl(var(--foreground)); white-space: pre-wrap;
}
.afq-p-turn.mine .afq-p-bubble { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)) }
.afq-p-acts { display: flex; align-items: center; gap: 2px; padding: 0 2px }
.afq-p-acts button {
  display: inline-flex; align-items: center; gap: .25rem; border: 0; background: transparent; cursor: pointer;
  border-radius: 5px; padding: 3px 5px; font-size: .6875rem; color: hsl(var(--muted-foreground));
}
.afq-p-acts button:hover { background: hsl(var(--accent)); color: hsl(var(--foreground)) }
.afq-p-acts button.is-on { color: hsl(var(--foreground)) }
/* composer: a bordered ≈160px box — the text line on top, paperclip and a
   grey square send button on the bottom row */
.afq-p-form {
  display: flex; flex-direction: column; gap: .5rem; margin: 8px 32px 24px; padding: 16px 16px 12px;
  min-height: 160px; border: 1px solid hsl(var(--input)); border-radius: 14px; background: hsl(var(--background));
}
.afq-p-form:focus-within { border-color: hsl(var(--ring)) }
.afq-p-input {
  flex: 1 1 auto; min-width: 0; min-height: 56px; max-height: 240px; resize: none; padding: 0;
  border: 0; border-radius: 0; background: transparent;
  font: inherit; font-size: 1.125rem; line-height: 1.5; color: hsl(var(--foreground)); outline: none;
}
.afq-p-input::placeholder { color: hsl(var(--muted-foreground)) }
.afq-p-formrow { display: flex; align-items: center; gap: .5rem }
.afq-p-formrow .afq-iconbtn { width: 36px; height: 36px }
.afq-p-formrow .afq-iconbtn svg { width: 18px; height: 18px }
.afq-p-send {
  display: inline-grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 10px;
  border: 0; cursor: pointer; background: hsl(var(--muted)); color: hsl(var(--foreground));
}
.afq-p-send svg { width: 18px; height: 18px }
.afq-p-send:hover { background: hsl(var(--accent)) }
.afq-p-send:disabled { opacity: .5; cursor: default }
.afq-p-typing span { display: inline-block; width: 5px; height: 5px; margin-right: 3px; border-radius: 999px; background: hsl(var(--muted-foreground)); animation: afq-blink2 1.2s infinite }
.afq-p-typing span:nth-child(2) { animation-delay: .18s } .afq-p-typing span:nth-child(3) { animation-delay: .36s }
@keyframes afq-blink2 { 0%,60%,100% { opacity: .25 } 30% { opacity: 1 } }
/* right pane: a bordered 44px segmented control + the panel toggle */
.afq-p-side-h { display: flex; align-items: center; gap: .5rem; padding: 20px 8px 12px 16px }
.afq-p-tabs { display: inline-flex; gap: 2px; height: 44px; padding: 4px; border: 1px solid hsl(var(--border)); border-radius: 10px; background: hsl(var(--muted)); flex: 1 1 auto }
.afq-p-tabs button { flex: 1 1 0; border: 0; background: transparent; cursor: pointer; border-radius: 7px; padding: 0 10px; font-size: .875rem; font-weight: 500; color: hsl(var(--muted-foreground)) }
.afq-p-tabs button[aria-selected="true"] { background: hsl(var(--background)); color: hsl(var(--foreground)); box-shadow: 0 1px 2px hsl(0 0% 0% / .08) }
.afq-p-side-h .afq-iconbtn { width: 32px; height: 32px }
.afq-p-side-h .afq-iconbtn svg { width: 18px; height: 18px }
.afq-p-events { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 8px 16px 16px; display: flex; flex-direction: column; gap: 8px }
.afq-p-events .afq-empty { padding: 72px 8px }
.afq-p-events .afq-empty-ic { width: 48px; height: 48px; border-radius: 12px; margin-bottom: 16px }
.afq-p-events .afq-empty-ic svg { width: 20px; height: 20px }
.afq-p-events .afq-empty-t { font-size: 1.125rem }
.afq-p-events .afq-empty-d { margin-top: 6px; max-width: 14ch; font-size: .875rem; line-height: 1.45 }
.afq-p-ev { border: 1px solid hsl(var(--border)); border-radius: 9px; background: hsl(var(--background)); overflow: hidden }
.afq-p-ev-h { display: flex; align-items: center; gap: .5rem; padding: 7px 10px; font-size: .75rem; font-weight: 600; cursor: pointer; border: 0; background: transparent; width: 100%; text-align: left; color: inherit }
.afq-p-ev-h .afq-dotc { width: 7px; height: 7px; border-radius: 999px; background: hsl(var(--status-success)); flex: none }
.afq-p-ev-h .afq-when { margin-left: auto; font-weight: 400; color: hsl(var(--muted-foreground)); font-variant-numeric: tabular-nums }
.afq-p-ev-b { padding: 0 10px 9px; font-size: .6875rem; color: hsl(var(--muted-foreground)) }
.afq-p-ev-b pre { margin: 0; padding: 8px; border-radius: 6px; background: hsl(var(--muted)); font-family: "Geist Mono", ui-monospace, Menlo, monospace; font-size: .625rem; line-height: 1.5; white-space: pre-wrap; word-break: break-all; color: hsl(var(--foreground)) }
.afq-p-side.is-collapsed .afq-p-side-h { padding: 20px 8px }
.afq-p-side.is-collapsed .afq-p-tabs, .afq-p-side.is-collapsed .afq-p-events { display: none }

/* ======================================================================
   Deploy
   ====================================================================== */
/* Full width, 32px padding (review iteration 2); step cards carry an icon
   top-left and the number top-right; the code block is light with no header. */
.afq-d { padding: 20px 20px 32px }
.afq-d-live { display: inline-flex; align-items: center; gap: .4rem; font-size: .8125rem; font-weight: 600; color: hsl(var(--status-success)) }
.afq-d-live i { width: 8px; height: 8px; border-radius: 999px; background: currentColor }
.afq-d h2 { margin: 10px 0 0; font-size: 1.375rem; font-weight: 600; letter-spacing: -.01em }
.afq-d-lede { margin: 6px 0 0; max-width: 48rem; font-size: .875rem; line-height: 1.5; color: hsl(var(--muted-foreground)) }
.afq-d-steps { display: grid; gap: 16px; margin-top: 24px }
@media (min-width: 768px) { .afq-d-steps { grid-template-columns: repeat(3, minmax(0, 1fr)) } }
.afq-d-step { position: relative; padding: 20px; border: 1px solid hsl(var(--border)); border-radius: 12px; background: hsl(var(--card)) }
.afq-d-step-h { display: flex; align-items: flex-start; justify-content: space-between; gap: .5rem; margin-bottom: 14px }
.afq-d-step-ic { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: hsl(var(--muted)); color: hsl(var(--foreground)) }
.afq-d-step-ic svg { width: 18px; height: 18px }
.afq-d-step-n { font-size: .75rem; font-weight: 600; letter-spacing: .08em; color: hsl(var(--muted-foreground)) }
.afq-d-step-t { font-size: 1rem; font-weight: 600 }
.afq-d-step-n + .afq-d-step-t { margin-top: 8px }   /* cards without the icon header (voice builder) */
.afq-d-step-d { margin-top: 4px; font-size: .875rem; line-height: 1.5; color: hsl(var(--muted-foreground)) }
.afq-d-banner {
  display: flex; align-items: center; gap: .75rem; margin-top: 20px; padding: 14px 18px;
  border: 1px solid hsl(var(--ui-violet) / .25); border-radius: 12px; background: hsl(var(--ui-violet) / .06);
  font-size: .875rem;
}
.afq-d-banner > svg { color: hsl(var(--ui-violet)); flex: none; width: 18px; height: 18px }
.afq-d-banner span a { color: hsl(var(--ui-violet)); font-weight: 500; text-decoration: none }
.afq-d-banner span a:hover { text-decoration: underline }
.afq-d-banner > a { margin-left: auto; display: inline-flex; align-items: center; gap: .2rem; color: hsl(var(--ui-violet)); font-weight: 500; text-decoration: none; white-space: nowrap }
.afq-d-banner > a:hover { text-decoration: underline }
.afq-d-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px; margin-top: 24px; padding: 4px; border-radius: 10px; background: hsl(var(--muted)) }
.afq-d-tabs button { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; height: 36px; border: 0; background: transparent; cursor: pointer; border-radius: 7px; padding: 0 12px; font-size: .875rem; font-weight: 500; color: hsl(var(--muted-foreground)) }
.afq-d-tabs button svg { width: 16px; height: 16px }
.afq-d-tabs button[aria-selected="true"] { background: hsl(var(--background)); color: hsl(var(--foreground)); box-shadow: 0 1px 2px hsl(0 0% 0% / .08) }
.afq-d-panel { margin-top: 20px }
.afq-d-sub { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: 12px; font-size: .875rem; color: hsl(var(--muted-foreground)) }
.afq-d-sub b { font-size: 1rem; font-weight: 600; color: hsl(var(--foreground)) }
/* the light code block: bg-muted, 13px mono, the key masked inline + an eye */
.afq-d-code { position: relative; border-radius: 10px; background: hsl(var(--muted)); border: 1px solid hsl(var(--border)) }
.afq-d-code pre {
  margin: 0; padding: 16px 18px; overflow: auto;
  font-family: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .8125rem; line-height: 1.65; white-space: pre; color: hsl(var(--foreground));
}
.afq-d-code .afq-d-eye {
  display: inline-grid; place-items: center; vertical-align: middle; width: 22px; height: 22px; margin: -4px 0 0 6px;
  border: 0; border-radius: 5px; background: transparent; cursor: pointer; color: hsl(var(--muted-foreground));
}
.afq-d-code .afq-d-eye:hover { background: hsl(var(--accent)); color: hsl(var(--foreground)) }
.afq-d-code .afq-d-eye svg { width: 15px; height: 15px }
.afq-d-card { border: 1px solid hsl(var(--border)); border-radius: 10px; background: hsl(var(--card)); padding: 14px 16px }
.afq-d-card + .afq-d-card { margin-top: 12px }
.afq-d-card-h { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: 10px }
.afq-d-card-h b { font-size: .875rem; font-weight: 600 }
.afq-d-card-h p { margin: 2px 0 0; font-size: .75rem; color: hsl(var(--muted-foreground)) }
.afq-d-grid2 { display: grid; gap: 12px }
@media (min-width: 768px) { .afq-d-grid2 { grid-template-columns: repeat(2, minmax(0, 1fr)) } }
.afq-d-qs { display: flex; flex-direction: column; gap: 8px }
.afq-d-qs-row { display: flex; align-items: flex-start; gap: .75rem; padding: 10px 12px; border: 1px solid hsl(var(--border)); border-radius: 9px }
.afq-d-qs-n { display: grid; place-items: center; width: 24px; height: 24px; flex: none; border-radius: 999px; background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); font-size: .6875rem; font-weight: 600 }
.afq-d-qs-row svg { flex: none; color: hsl(var(--muted-foreground)); margin-top: 3px }
.afq-d-qs-row .afq-t { font-size: .8125rem; font-weight: 600 }
.afq-d-qs-row .afq-d2 { font-size: .75rem; color: hsl(var(--muted-foreground)); margin-top: 2px }
.afq-d-sess { padding: 12px 14px; border: 1px solid hsl(var(--border)); border-radius: 9px }
.afq-d-sess .afq-t { display: flex; align-items: center; gap: .5rem; font-size: .8125rem; font-weight: 600 }
.afq-d-sess p { margin: 6px 0 0; font-size: .75rem; line-height: 1.5; color: hsl(var(--muted-foreground)) }
.afq-d-table { width: 100%; border-collapse: collapse; font-size: .75rem }
.afq-d-table th { text-align: left; padding: 8px 10px; border-bottom: 1px solid hsl(var(--border)); font-weight: 500; color: hsl(var(--muted-foreground)) }
.afq-d-table td { padding: 9px 10px; border-bottom: 1px solid hsl(var(--border)); vertical-align: top }
.afq-d-table tr:last-child td { border-bottom: 0 }
.afq-d-table code { font-family: "Geist Mono", ui-monospace, Menlo, monospace; font-size: .6875rem }
.afq-d-url { display: flex; align-items: center; gap: .5rem; margin-top: 12px; padding: 9px 12px; border-radius: 8px; background: hsl(var(--muted)); font-size: .75rem }
.afq-d-url code { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: "Geist Mono", ui-monospace, Menlo, monospace }
.afq-d-ex { display: flex; flex-direction: column; gap: 6px }
.afq-d-ex-row { display: flex; gap: .5rem }
.afq-d-ex-row input { flex: 1 1 auto }
.afq-d-disc { display: flex; align-items: center; gap: .4rem; width: 100%; border: 0; background: transparent; cursor: pointer; padding: 8px 0; font-size: .8125rem; font-weight: 500; color: inherit; text-align: left }
.afq-d-disc svg { transition: transform .15s ease; color: hsl(var(--muted-foreground)) }
.afq-d-disc[aria-expanded="true"] svg { transform: rotate(90deg) }

/* ======================================================================
   Knowledge base
   ====================================================================== */
.afq-kb-types { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px }
.afq-kb-type {
  display: flex; flex-direction: column; gap: 6px; text-align: left; cursor: pointer; padding: 11px 12px;
  border: 1px solid hsl(var(--border)); border-radius: 9px; background: hsl(var(--background)); color: inherit;
}
.afq-kb-type:hover { background: hsl(var(--accent)) }
.afq-kb-type.is-on { border-color: hsl(var(--primary)); box-shadow: 0 0 0 1px hsl(var(--primary)) }
.afq-kb-type .afq-t { display: flex; align-items: center; gap: .4rem; font-size: .8125rem; font-weight: 600 }
.afq-kb-type .afq-d { font-size: .6875rem; line-height: 1.4; color: hsl(var(--muted-foreground)) }
/* Detail sheet (observed 2026-10-09): 75% of the viewport, a 64px header with
   an 18px title and a bordered square close, then a 55/45 split with a 1px
   divider. The source tabs are a pill group with a BLACK active chip; search,
   refresh and "+ Add source" sit on a second row under them, left-aligned. */
.afq-sheet.afq-kb-sheet { max-width: 75vw }
.afq-kb-sheet .afq-ov-head { align-items: center; gap: .5rem; min-height: 64px; padding: 0 20px; border-bottom: 1px solid hsl(var(--border)) }
.afq-kb-sheet .afq-ov-title { font-size: 1.125rem }
.afq-kb-sheet .afq-ov-head > .afq-iconbtn { width: 32px; height: 32px; margin-left: .25rem; border: 1px solid hsl(var(--input)); border-radius: 6px; background: hsl(var(--background)) }
.afq-kb-sheet .afq-ov-body { padding: 0 }
.afq-kb-detail { display: grid; grid-template-columns: minmax(0, 55fr) minmax(0, 45fr); gap: 0; height: 100%; min-height: 0 }
@media (max-width: 1000px) { .afq-kb-detail { grid-template-columns: minmax(0, 1fr) } }
.afq-kb-left { display: flex; flex-direction: column; min-height: 0; overflow: auto; padding: 16px 20px 20px; border-right: 1px solid hsl(var(--border)) }
.afq-kb-right { display: flex; flex-direction: column; min-height: 0; padding: 16px 20px 20px }
.afq-kb-right-h { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: 10px; font-size: 1rem; font-weight: 600 }
.afq-kb-right .afq-empty-t { font-size: 1rem }
.afq-kb-stabs { display: flex; align-items: center; margin-bottom: 10px }
.afq-kb-stabs [role="tab"][data-state="active"] { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); box-shadow: none }
.afq-kb-stabs [role="tab"][data-state="active"] .afq-kb-count { color: hsl(var(--primary-foreground) / .7) }
.afq-kb-tools { display: flex; align-items: center; gap: .25rem; margin: 0 0 12px }
.afq-kb-tools .afq-grow { flex: 1 1 auto }
.afq-kb-table { width: 100%; border-collapse: collapse; font-size: .8125rem }
.afq-kb-table th { text-align: left; padding: 8px 10px; border-bottom: 1px solid hsl(var(--border)); font-size: .75rem; font-weight: 500; color: hsl(var(--muted-foreground)) }
.afq-kb-table td { padding: 10px; border-bottom: 1px solid hsl(var(--border)) }
.afq-kb-table .afq-w0 { width: 1% }
.afq-kb-res { flex: 1 1 auto; min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: 10px }
.afq-kb-res-h { display: flex; align-items: center; gap: .5rem; font-size: .6875rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: hsl(var(--muted-foreground)) }
.afq-kb-hit { border: 1px solid hsl(var(--border)); border-radius: 9px; padding: 10px 12px; background: hsl(var(--card)) }
.afq-kb-hit-h { display: flex; align-items: center; gap: .5rem; font-size: .75rem; font-weight: 600 }
.afq-kb-hit-h svg { color: hsl(var(--muted-foreground)) }
.afq-kb-hit-h .afq-right { margin-left: auto; display: inline-flex; align-items: center; gap: .375rem }
.afq-kb-hit-h .afq-rank { font-size: .6875rem; color: hsl(var(--muted-foreground)) }
.afq-kb-hit p { margin: 6px 0 0; font-size: .75rem; line-height: 1.5; color: hsl(var(--muted-foreground)); white-space: pre-wrap }
.afq-kb-q { margin-top: 10px; border: 1px solid hsl(var(--input)); border-radius: 10px; background: hsl(var(--background)); overflow: hidden }
.afq-kb-q textarea { display: block; width: 100%; min-height: 60px; resize: none; border: 0; outline: none; padding: 10px 12px; font: inherit; font-size: .8125rem; background: transparent; color: hsl(var(--foreground)) }
.afq-kb-q textarea::placeholder { color: hsl(var(--muted-foreground)) }
.afq-kb-q .afq-foot { display: flex; justify-content: flex-end; padding: 0 8px 8px }
/* The grey "Retrieve" button that sits inside the query box, bottom-right. */
.afq-kb-retrieve { background: hsl(var(--muted)); color: hsl(var(--foreground)); border-color: transparent }
.afq-kb-retrieve:hover { background: hsl(var(--accent)) }
.afq-kb-infobox { margin-top: 12px; padding: 10px 12px; border-radius: 8px; background: hsl(var(--muted)); font-size: .75rem }
.afq-kb-infobox b { display: block; margin-bottom: 4px; font-weight: 600 }
.afq-kb-infobox ul { margin: 0; padding-left: 16px; color: hsl(var(--muted-foreground)); line-height: 1.5 }
.afq-kb-legal { margin-top: 10px; font-size: .6875rem; line-height: 1.5; color: hsl(var(--muted-foreground)) }
.afq-kb-review { display: flex; align-items: center; gap: .75rem; padding: 12px 14px; border: 1px solid hsl(var(--border)); border-radius: 10px }
.afq-kb-review .afq-t { font-size: .8125rem; font-weight: 600 }
.afq-kb-review .afq-d { font-size: .75rem; color: hsl(var(--muted-foreground)) }
.afq-kb-review .afq-ok { margin-left: auto; color: hsl(var(--status-success)) }
.afq-kb-cfg { width: 320px; padding: 14px }
.afq-kb-cfg .afq-lbl { margin-top: 12px }
.afq-kb-cfg .afq-lbl:first-child { margin-top: 0 }
.afq-kb-cfg .afq-rowv { display: flex; align-items: center; justify-content: space-between; font-size: .75rem; color: hsl(var(--muted-foreground)) }
.afq-kb-count { margin-left: 4px; font-size: .6875rem; color: hsl(var(--muted-foreground)) }
.afq-kb-drop { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 26px 12px; border: 1px dashed hsl(var(--border)); border-radius: 10px; text-align: center; color: hsl(var(--muted-foreground)); font-size: .75rem; cursor: pointer }
.afq-kb-drop:hover { background: hsl(var(--accent)) }
.afq-kb-drop b { font-size: .8125rem; font-weight: 500; color: hsl(var(--foreground)) }

/* ======================================================================
   Skills
   ====================================================================== */
.afq-sk-kv { display: grid; grid-template-columns: 100px minmax(0, 1fr); gap: 8px 12px; font-size: .8125rem; margin-top: 14px }
.afq-sk-kv dt { color: hsl(var(--muted-foreground)) }
.afq-sk-kv dd { margin: 0; min-width: 0; overflow-wrap: anywhere }
.afq-sk-desc { margin-top: 16px }
.afq-sk-desc .afq-box { margin-top: 6px; padding: 12px; border-radius: 8px; background: hsl(var(--muted)); font-size: .8125rem; line-height: 1.5; color: hsl(var(--muted-foreground)) }
.afq-sk-drop {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 30px 12px;
  border: 1px dashed hsl(var(--border)); border-radius: 10px; text-align: center; cursor: pointer;
  color: hsl(var(--muted-foreground)); font-size: .75rem;
}
.afq-sk-drop:hover { background: hsl(var(--accent)) }
.afq-sk-drop b { font-size: .8125rem; font-weight: 500; color: hsl(var(--foreground)) }
.afq-sk-or { display: flex; align-items: center; gap: .75rem; margin: 16px 0; font-size: .6875rem; color: hsl(var(--muted-foreground)) }
.afq-sk-or::before, .afq-sk-or::after { content: ''; flex: 1 1 auto; height: 1px; background: hsl(var(--border)) }

/* ======================================================================
   Provider pages (models, voice providers, memory, guardrails)
   ====================================================================== */
.afq-pv-grid { display: grid; gap: 12px; grid-template-columns: repeat(1, minmax(0, 1fr)) }
@media (min-width: 640px) { .afq-pv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) } }
@media (min-width: 1024px) { .afq-pv-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) } }
@media (min-width: 1280px) { .afq-pv-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) } }
.afq-pv-card {
  position: relative; display: flex; flex-direction: column; gap: 8px; min-height: 8.5rem; padding: 14px 15px;
  border: 1px solid hsl(var(--border)); border-radius: 10px; background: hsl(var(--card));
}
.afq-pv-card .afq-brand { width: 36px; height: 36px }
.afq-pv-plus { position: absolute; top: 10px; right: 10px }
.afq-pv-name { font-size: .875rem; font-weight: 600 }
.afq-pv-desc { font-size: .75rem; line-height: 1.45; color: hsl(var(--muted-foreground)) }
.afq-pv-foot { margin-top: auto; display: flex; align-items: center; gap: .5rem; font-size: .6875rem; color: hsl(var(--muted-foreground)) }
.afq-pv-sec { margin-top: 26px; margin-bottom: 10px }
.afq-pv-sec b { display: block; font-size: .9375rem; font-weight: 600 }
.afq-pv-sec p { margin: 2px 0 0; font-size: .8125rem; color: hsl(var(--muted-foreground)) }
.afq-pv-cred { display: flex; align-items: center; gap: .5rem; padding: 9px 10px; border: 1px solid hsl(var(--border)); border-radius: 8px; font-size: .75rem }
.afq-pv-cred + .afq-pv-cred { margin-top: 6px }
.afq-pv-cred .afq-name { font-family: "Geist Mono", ui-monospace, Menlo, monospace; flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.afq-pv-cred .afq-dotg { width: 7px; height: 7px; border-radius: 999px; background: hsl(var(--status-success)); flex: none }

/* ======================================================================
   Voice
   ====================================================================== */
.afq-v-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 14px 0 }
.afq-v-chip { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 999px; border: 1px solid hsl(var(--border)); font-size: .625rem; font-weight: 600; letter-spacing: .08em; color: hsl(var(--muted-foreground)) }
.afq-v-stats { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)) }
@media (min-width: 1024px) { .afq-v-stats { grid-template-columns: repeat(4, minmax(0, 1fr)) } }
.afq-v-stat { padding: 14px 15px; border: 1px solid hsl(var(--border)); border-radius: 10px; background: hsl(var(--card)) }
.afq-v-stat .afq-l { font-size: .75rem; font-weight: 500; color: hsl(var(--muted-foreground)) }
.afq-v-stat .afq-v { margin-top: 6px; font-size: 1.5rem; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums }
.afq-v-stat .afq-s { margin-top: 4px; font-size: .6875rem; color: hsl(var(--muted-foreground)) }
.afq-v-radios { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 16px }
.afq-v-radio {
  display: flex; align-items: flex-start; gap: .6rem; text-align: left; cursor: pointer; padding: 11px 12px;
  border: 1px solid hsl(var(--border)); border-radius: 9px; background: hsl(var(--background)); color: inherit;
}
.afq-v-radio:hover { background: hsl(var(--accent)) }
.afq-v-radio.is-on { border-color: hsl(var(--primary)); box-shadow: 0 0 0 1px hsl(var(--primary)) }
.afq-v-radio .afq-rb { width: 14px; height: 14px; flex: none; margin-top: 2px; border-radius: 999px; border: 1.5px solid hsl(var(--muted-foreground)); position: relative }
.afq-v-radio.is-on .afq-rb { border-color: hsl(var(--primary)) }
.afq-v-radio.is-on .afq-rb::after { content: ''; position: absolute; inset: 2.5px; border-radius: 999px; background: hsl(var(--primary)) }
.afq-v-radio .afq-t { font-size: .8125rem; font-weight: 600 }
.afq-v-radio .afq-d { font-size: .6875rem; color: hsl(var(--muted-foreground)); margin-top: 2px }
.afq-v-engines { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 0 14px 12px }
.afq-v-engine {
  display: flex; flex-direction: column; gap: 4px; text-align: left; cursor: pointer; padding: 10px 11px;
  border: 1px solid hsl(var(--border)); border-radius: 9px; background: hsl(var(--background)); color: inherit;
}
.afq-v-engine.is-on { border-color: hsl(var(--primary)); box-shadow: 0 0 0 1px hsl(var(--primary)) }
.afq-v-engine .afq-t { font-size: .8125rem; font-weight: 600 }
.afq-v-engine .afq-d { font-size: .6875rem; color: hsl(var(--muted-foreground)) }
.afq-v-engine .afq-tags { display: flex; gap: 4px; margin-top: 2px }
.afq-v-engine .afq-tags span { font-size: .5625rem; font-weight: 600; letter-spacing: .06em; padding: 1px 5px; border-radius: 4px; background: hsl(var(--muted)); color: hsl(var(--muted-foreground)) }
.afq-v-kv { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: 7px 14px; font-size: .8125rem }
.afq-v-kv .afq-l { color: hsl(var(--muted-foreground)) }
.afq-v-kv .afq-sel { height: 30px }
.afq-v-sub { padding: 2px 14px 10px; display: flex; flex-direction: column; gap: 4px }

/* ======================================================================
   Workflow
   ====================================================================== */
.afq-wf-tabs { display: flex; gap: 0; border-bottom: 1px solid hsl(var(--border)) }
.afq-wf-tabs button { border: 0; background: transparent; cursor: pointer; padding: 8px 14px; margin-bottom: -1px; border-bottom: 2px solid transparent; font-size: .8125rem; color: hsl(var(--muted-foreground)) }
.afq-wf-tabs button:hover { color: hsl(var(--foreground)) }
.afq-wf-tabs button[aria-selected="true"] { color: hsl(var(--foreground)); font-weight: 600; border-bottom-color: hsl(var(--primary)) }
.afq-wf-table { border: 1px solid hsl(var(--border)); border-radius: 10px; background: hsl(var(--card)); overflow: hidden }
.afq-wf-table .afq-hd, .afq-wf-table .afq-r { display: grid; grid-template-columns: minmax(0, 1fr) 160px 90px; gap: 12px; align-items: center; padding: 9px 14px }
.afq-wf-table .afq-hd { border-bottom: 1px solid hsl(var(--border)); background: hsl(var(--muted) / .5); font-size: .75rem; font-weight: 500; color: hsl(var(--muted-foreground)) }
.afq-wf-table .afq-r { border-bottom: 1px solid hsl(var(--border)); font-size: .8125rem }
.afq-wf-table .afq-r:last-child { border-bottom: 0 }
.afq-wf-table .afq-r:hover { background: hsl(var(--muted) / .4) }
.afq-wf-group { margin: 16px 0 8px; font-size: .625rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: hsl(var(--muted-foreground)) }
.afq-wf-grid { display: grid; gap: 8px; grid-template-columns: repeat(2, minmax(0, 1fr)) }
.afq-wf-tpl {
  position: relative; display: flex; flex-direction: column; gap: 5px; width: 100%; text-align: left; cursor: pointer;
  padding: 11px 12px; border: 1px solid hsl(var(--border)); border-radius: 9px; background: hsl(var(--card)); color: inherit;
  transition: border-color .15s ease, background .15s ease;
}
.afq-wf-tpl:hover { background: hsl(var(--accent)) }
.afq-wf-tpl.is-picked { border-color: hsl(var(--primary)); box-shadow: 0 0 0 1px hsl(var(--primary)) }
.afq-wf-tpl-h { display: flex; align-items: center; gap: .5rem }
.afq-wf-tpl-ic { display: grid; place-items: center; width: 26px; height: 26px; flex: none; border-radius: 7px; background: hsl(var(--muted)); color: hsl(var(--foreground)) }
.afq-wf-tpl-n { font-size: .8125rem; font-weight: 600 }
.afq-wf-tpl-d { font-size: .6875rem; line-height: 1.45; color: hsl(var(--muted-foreground)) }
.afq-wf-tpl-f { display: flex; align-items: center; gap: 4px; margin-top: 2px }
.afq-wf-tag { border-radius: 4px; padding: 1px 6px; font-size: .5625rem; font-weight: 600; letter-spacing: .04em; background: hsl(var(--muted)); color: hsl(var(--muted-foreground)) }
.afq-wf-cost { margin-left: auto; font-size: .625rem; color: hsl(var(--muted-foreground)) }

/* ======================================================================
   Manager canvas
   ====================================================================== */
.afq-mg { display: grid; grid-template-columns: 280px minmax(0, 1fr); height: calc(100vh - 50px); min-height: 480px }
.afq-mg.is-lib-closed { grid-template-columns: 0 minmax(0, 1fr) }
.afq-mg-lib { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid hsl(var(--border)); background: hsl(var(--card)); overflow: hidden }
.afq-mg-lib-h { display: flex; align-items: center; gap: .5rem; padding: 10px 12px; font-size: .875rem; font-weight: 600 }
.afq-mg-lib-h .afq-iconbtn { margin-left: auto }
.afq-mg-tabs { display: flex; gap: 2px; margin: 0 12px; padding: 2px; border-radius: 7px; background: hsl(var(--muted)) }
.afq-mg-tabs button { flex: 1 1 0; border: 0; background: transparent; cursor: pointer; border-radius: 5px; padding: 4px 8px; font-size: .75rem; font-weight: 500; color: hsl(var(--muted-foreground)) }
.afq-mg-tabs button[aria-selected="true"] { background: hsl(var(--background)); color: hsl(var(--foreground)); box-shadow: 0 1px 2px hsl(0 0% 0% / .08) }
.afq-mg-lib-t { display: flex; align-items: center; gap: 2px; padding: 10px 12px 6px; font-size: .75rem; color: hsl(var(--muted-foreground)) }
.afq-mg-lib-t .afq-grow { flex: 1 1 auto }
.afq-mg-search { margin: 0 12px 8px; display: flex; align-items: center; gap: .4rem; height: 32px; padding: 0 9px; border: 1px solid hsl(var(--input)); border-radius: 7px }
.afq-mg-search input { flex: 1 1 auto; min-width: 0; border: 0; background: transparent; outline: none; font-size: .75rem; color: hsl(var(--foreground)) }
.afq-mg-search svg { color: hsl(var(--muted-foreground)) }
.afq-mg-rows { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 0 8px }
.afq-mg-row {
  display: flex; align-items: center; gap: .5rem; width: 100%; text-align: left; border: 0; background: transparent;
  cursor: grab; border-radius: 7px; padding: 7px 8px; color: inherit;
}
.afq-mg-row:hover { background: hsl(var(--accent)) }
.afq-mg-row .afq-t { font-size: .75rem; font-weight: 500; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.afq-mg-row .afq-d { font-size: .625rem; color: hsl(var(--muted-foreground)); display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.afq-mg-lib-f { padding: 8px 12px; border-top: 1px solid hsl(var(--border)); font-size: .6875rem; color: hsl(var(--muted-foreground)) }
.afq-mg-canvas {
  position: relative; overflow: hidden;
  background-color: hsl(var(--background));
  background-image: radial-gradient(hsl(var(--muted-foreground) / .35) 1px, transparent 1px);
  background-size: 18px 18px;
}
.afq-mg-ctrls { position: absolute; top: 10px; right: 10px; display: flex; gap: 2px; padding: 3px; border-radius: 8px; border: 1px solid hsl(var(--border)); background: hsl(var(--card)); box-shadow: 0 2px 8px hsl(0 0% 0% / .08) }
.afq-mg-open { position: absolute; top: 10px; left: 10px; border: 1px solid hsl(var(--border)); background: hsl(var(--card)) }
/* The empty canvas's hint sits low on the canvas, clear of the orchestrator node at the top. */
.afq-mg-hint { position: absolute; left: 50%; bottom: 64px; transform: translateX(-50%); width: min(40rem, calc(100% - 48px)); text-align: center; color: hsl(var(--muted-foreground)); font-size: .8125rem; line-height: 1.5; pointer-events: none;
  padding: 10px 14px; border: 1px dashed hsl(var(--border)); border-radius: 10px; background: hsl(var(--card) / .85) }
.afq-mg-node {
  position: absolute; width: 240px; padding: 12px 12px 10px; border-radius: 10px;
  border: 1px solid hsl(var(--border)); background: hsl(var(--card)); box-shadow: 0 6px 18px -10px hsl(0 0% 0% / .35);
  cursor: grab; user-select: none;
}
.afq-mg-node.is-active { border-color: hsl(var(--primary)); box-shadow: 0 0 0 1px hsl(var(--primary)) }
.afq-mg-node-h { display: flex; align-items: center; gap: .5rem }
.afq-mg-node-h .afq-t { font-size: .8125rem; font-weight: 600; flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.afq-mg-node .afq-d { margin-top: 6px; font-size: .6875rem; line-height: 1.4; color: hsl(var(--muted-foreground)); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden }
.afq-mg-node .afq-p { margin-top: 6px; font-size: .6875rem; color: hsl(var(--muted-foreground)) }
.afq-mg-node .afq-f { display: flex; align-items: center; justify-content: space-between; margin-top: 8px }
.afq-mg-play { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 999px; border: 0; cursor: pointer; background: hsl(var(--afq-accent)); color: hsl(var(--primary-foreground)) }
.afq-mg-handle { position: absolute; left: 50%; width: 9px; height: 9px; border-radius: 999px; background: hsl(var(--foreground)); border: 2px solid hsl(var(--card)); transform: translateX(-50%) }
.afq-mg-handle.is-top { top: -5px } .afq-mg-handle.is-bot { bottom: -5px }
.afq-mg-status { position: absolute; left: 12px; bottom: 10px; display: inline-flex; align-items: center; gap: .5rem; padding: 5px 10px; border-radius: 7px; border: 1px solid hsl(var(--border)); background: hsl(var(--card)); font-size: .6875rem; color: hsl(var(--muted-foreground)) }
.afq-mg-status i { width: 7px; height: 7px; border-radius: 999px; background: hsl(var(--muted-foreground) / .6) }
.afq-mg-head-links { display: inline-flex; align-items: center; gap: .25rem }
.afq-mg-head-links a { display: inline-flex; align-items: center; gap: .3rem; padding: 4px 8px; border-radius: 6px; font-size: .75rem; color: hsl(var(--muted-foreground)); text-decoration: none }
.afq-mg-head-links a:hover { background: hsl(var(--accent)); color: hsl(var(--foreground)) }

/* ======================================================================
   Traces
   ====================================================================== */
.afq-tr-table { border: 1px solid hsl(var(--border)); border-radius: 10px; background: hsl(var(--card)); overflow: hidden }
.afq-tr-table table { width: 100%; border-collapse: collapse; font-size: .8125rem }
.afq-tr-table th { text-align: left; padding: 9px 12px; border-bottom: 1px solid hsl(var(--border)); background: hsl(var(--muted) / .5); font-size: .75rem; font-weight: 500; color: hsl(var(--muted-foreground)); white-space: nowrap }
.afq-tr-table td { padding: 10px 12px; border-bottom: 1px solid hsl(var(--border)); white-space: nowrap }
.afq-tr-table tr:last-child td { border-bottom: 0 }
.afq-tr-table tbody tr { cursor: pointer }
.afq-tr-table tbody tr:hover { background: hsl(var(--muted) / .4) }
/* Tokens read "450 / 34" with only the slash muted; the footer puts "Rows per
   page: 10 ⌄" on the left and "Page 1 ‹ ›" on the right (observed 2026-10-09). */
.afq-tr-slash { margin: 0 .35em; color: hsl(var(--muted-foreground)) }
.afq-tr-foot { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 10px 2px; font-size: .75rem; color: hsl(var(--muted-foreground)) }
.afq-tr-foot .afq-pg { display: inline-flex; align-items: center; gap: .25rem }
.afq-tr-head { display: flex; align-items: center; gap: .5rem; padding-top: 6px }
.afq-tr-head h2 { margin: 0; font-size: 1rem; font-weight: 600 }
.afq-tr-head p { margin: 0; font-size: .75rem; color: hsl(var(--muted-foreground)) }
.afq-tr-head .afq-right { margin-left: auto; display: inline-flex; align-items: center; gap: .5rem; font-size: .75rem; color: hsl(var(--muted-foreground)) }
.afq-tr-card { margin-top: 14px; border: 1px solid hsl(var(--border)); border-radius: 12px; background: hsl(var(--card)); padding: 16px 18px }
.afq-tr-card .afq-top { display: flex; align-items: center; gap: .5rem; font-size: .75rem; color: hsl(var(--muted-foreground)) }
.afq-tr-card h2 { margin: 10px 0 0; font-size: 1.125rem; font-weight: 600 }
.afq-tr-card .afq-model { margin-top: 2px; font-size: .75rem; color: hsl(var(--muted-foreground)); font-family: "Geist Mono", ui-monospace, Menlo, monospace }
.afq-tr-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 14px }
@media (min-width: 900px) { .afq-tr-stats { grid-template-columns: repeat(4, minmax(0, 1fr)) } }
.afq-tr-stat { padding: 10px 12px; border-radius: 9px; background: hsl(var(--muted) / .6) }
.afq-tr-stat .afq-l { font-size: .6875rem; color: hsl(var(--muted-foreground)) }
.afq-tr-stat .afq-v { margin-top: 2px; font-size: 1.125rem; font-weight: 600; font-variant-numeric: tabular-nums }
.afq-tr-io { display: grid; gap: 12px; margin-top: 12px }
@media (min-width: 900px) { .afq-tr-io { grid-template-columns: repeat(2, minmax(0, 1fr)) } }
.afq-tr-panel { border: 1px solid hsl(var(--border)); border-radius: 10px; background: hsl(var(--card)); padding: 12px 14px }
.afq-tr-panel .afq-h { display: flex; align-items: center; gap: .4rem; font-size: .75rem; font-weight: 600 }
.afq-tr-panel .afq-h span { font-weight: 400; color: hsl(var(--muted-foreground)) }
.afq-tr-panel p { margin: 8px 0 0; font-size: .8125rem; line-height: 1.55; white-space: pre-wrap }
.afq-tr-tl { margin-top: 12px; border: 1px solid hsl(var(--border)); border-radius: 12px; background: hsl(var(--card)); overflow: hidden }
.afq-tr-tl-h { display: flex; align-items: center; gap: .5rem; padding: 12px 14px; border-bottom: 1px solid hsl(var(--border)) }
.afq-tr-tl-h b { font-size: .875rem; font-weight: 600 }
.afq-tr-tl-h span { font-size: .75rem; color: hsl(var(--muted-foreground)) }
.afq-tr-tl-h .afq-right { margin-left: auto; display: inline-flex; gap: .375rem }
.afq-tr-gantt { display: grid; grid-template-columns: 300px minmax(0, 1fr); font-size: .75rem }
.afq-tr-gantt .afq-ops-h, .afq-tr-gantt .afq-ruler { padding: 6px 12px; border-bottom: 1px solid hsl(var(--border)); font-size: .625rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: hsl(var(--muted-foreground)) }
.afq-tr-gantt .afq-ruler { position: relative; letter-spacing: 0; text-transform: none; font-weight: 400 }
.afq-tr-gantt .afq-ruler span { position: absolute; top: 6px; transform: translateX(-50%); font-variant-numeric: tabular-nums }
.afq-tr-op { display: flex; align-items: center; gap: .4rem; min-height: 34px; padding: 4px 12px; border-bottom: 1px solid hsl(var(--border)) }
.afq-tr-op.is-child { padding-left: 34px }
.afq-tr-op .afq-n { font-weight: 500; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.afq-tr-op .afq-iconbtn { width: 20px; height: 20px }
.afq-tr-op svg.afq-ic { color: hsl(var(--muted-foreground)); flex: none }
.afq-tr-lane { position: relative; min-height: 34px; border-bottom: 1px solid hsl(var(--border)); background-image: linear-gradient(90deg, hsl(var(--border)) 1px, transparent 1px); background-size: 20% 100% }
.afq-tr-bar { position: absolute; top: 9px; height: 16px; border-radius: 4px; background: hsl(var(--status-info)); opacity: .85; min-width: 3px }
.afq-tr-bar.is-root { background: hsl(var(--primary)); opacity: .9 }
.afq-tr-bar span { position: absolute; left: calc(100% + 6px); top: 0; line-height: 16px; font-size: .625rem; color: hsl(var(--muted-foreground)); white-space: nowrap }
.afq-tr-complete { display: inline-flex; align-items: center; gap: .3rem; height: 20px; padding: 0 8px; border-radius: 999px; font-size: .625rem; font-weight: 700; letter-spacing: .06em; background: hsl(var(--status-success-bg)); color: hsl(var(--status-success)); border: 1px solid hsl(var(--status-success-border)) }

/* ======================================================================
   Blueprints additions
   ====================================================================== */
.afq-bp-card { position: relative }
.afq-bp-dots { position: absolute; top: 8px; right: 8px; z-index: 2 }
.afq-bp-dots .afq-iconbtn { width: 24px; height: 24px; background: hsl(var(--card)); border: 1px solid hsl(var(--border)) }
.afq-bp-intro { text-align: center; padding: 8px 4px 4px }
.afq-bp-intro-video { display: grid; place-items: center; aspect-ratio: 16 / 9; border-radius: 10px; background: hsl(var(--muted)); color: hsl(var(--muted-foreground)); margin-bottom: 14px }
.afq-bp-intro h2 { margin: 0; font-size: 1.125rem; font-weight: 600 }
.afq-bp-intro p { margin: 6px auto 0; max-width: 26rem; font-size: .8125rem; color: hsl(var(--muted-foreground)) }

/* Product language: status chips read as words (Live, Draft, Published, Ready),
   never as shouted codes or lowercase data values. */
.afq-wf-status, .afq-kb-chip, .afq-tool-src, .afq-status { text-transform: capitalize }

/* ---- Workflow runs and the steps editor (frontend/src/features/workflows) ---- */
.afq-wf-run-pre { margin: 0; padding: 8px 10px; border: 1px solid hsl(var(--border)); border-radius: 8px; background: hsl(var(--muted) / .4); font: inherit; font-size: .75rem; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 180px; overflow: auto }
.afq-wf-run-steps { display: flex; flex-direction: column; gap: 6px }
.afq-wf-run-step { border: 1px solid hsl(var(--border)); border-radius: 8px; background: hsl(var(--card)); overflow: hidden }
.afq-wf-run-step[data-status="failed"], .afq-wf-run-step[data-status="rejected"] { border-color: hsl(var(--status-warning-border)) }
.afq-wf-run-step[data-status="waiting_approval"] { border-color: hsl(var(--status-warning-border)); background: hsl(var(--status-warning-bg) / .35) }
.afq-wf-run-step[data-status="skipped"] { opacity: .6 }
.afq-wf-run-step-h { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 10px; border: 0; background: transparent; font: inherit; font-size: .8125rem; text-align: left; cursor: pointer; color: inherit }
.afq-wf-run-step-h:hover { background: hsl(var(--muted) / .4) }
.afq-wf-run-n { display: inline-grid; place-items: center; width: 20px; height: 20px; flex: none; border-radius: 999px; background: hsl(var(--muted)); font-size: .6875rem; font-weight: 600; color: hsl(var(--muted-foreground)) }
.afq-wf-run-step-b { padding: 2px 10px 10px 38px; border-top: 1px solid hsl(var(--border)) }
.afq-wf-run-step-b pre { margin: 0 0 4px; padding: 6px 8px; border-radius: 6px; background: hsl(var(--muted) / .4); font: inherit; font-size: .75rem; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 220px; overflow: auto }
.afq-wf-run-step-b .afq-lbl { margin-top: 8px }
.afq-wf-step { border: 1px solid hsl(var(--border)); border-radius: 8px; background: hsl(var(--card)); margin-bottom: 8px }
.afq-wf-step-h { display: flex; align-items: center; gap: 6px; padding: 8px 10px; border-bottom: 1px solid hsl(var(--border)) }
.afq-wf-step-h .afq-sel { height: 32px; flex: none }
.afq-wf-step-b { padding: 4px 10px 10px; display: flex; flex-direction: column; gap: 6px }
.afq-wf-step-b .afq-lbl { margin-bottom: 4px }
.afq-wf-table button.afq-r { border: 0; border-bottom: 1px solid hsl(var(--border)); background: transparent; font: inherit; color: inherit; cursor: pointer }
.afq-wf-table button.afq-r:last-child { border-bottom: 0 }
.afq-wf-tabs .afq-chip { height: 16px; padding: 0 5px; font-size: .625rem; vertical-align: middle }
/* Tool sheet: the Test panel (frontend/src/features/integrations/Tools.tsx) */
.afq-tool-test { margin-top: 16px; border: 1px solid hsl(var(--border)); border-radius: 10px; padding: 12px }
.afq-tool-test-h { display: flex; align-items: center; gap: 8px; font-size: .8125rem; font-weight: 600 }
.afq-tool-test-h .afq-chip { margin-left: auto }
.afq-tool-test pre { margin: 8px 0 0; padding: 8px 10px; border-radius: 8px; background: hsl(var(--muted) / .4); font: inherit; font-size: .75rem; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 260px; overflow: auto }