/*!*****************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[3]!./src/app/globals.css ***!
  \*****************************************************************************************************************************************************************************************************************************************************************/
/* Theme lifted from MedFlowAI_Mockup.html — light, Inter, #2f6bff accent. */
:root {
  --bg: #f5f7fb;
  --panel: #ffffff;
  --panel2: #f8fafc;
  --border: #e9edf4;
  --text: #1b2438;
  --muted: #7b8699;
  --muted2: #a7b0c2;
  --blue: #2f6bff;
  --blue-soft: #eaf0ff;
  --blue-hover: #255ce0;
  --green: #1fbf75;
  --green-soft: #e7f8f0;
  --amber: #f5a524;
  --amber-soft: #fdf4e1;
  --red: #f04868;
  --red-soft: #fdebef;
  --purple: #7c5cff;
  --purple-soft: #efeaff;
  --teal: #12b5b0;
  --teal-soft: #e2f6f5;
  --shadow-sm: 0 2px 8px rgba(30, 50, 110, 0.05);
  --shadow: 0 8px 28px rgba(30, 50, 110, 0.08);
}

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

html,
body {
  background: var(--bg);
  color: var(--text);
  font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  min-height: 100vh;
}

a {
  color: var(--blue);
}

code {
  background: var(--panel2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 1px 6px;
  font-size: 0.85em;
}

/* --- brand --------------------------------------------------------------- */
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.logo {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  object-fit: contain;
  box-shadow: 0 4px 10px rgba(47, 107, 255, 0.3);
  flex-shrink: 0;
}

.brand-logo {
  height: 37px;
  width: auto;
  display: block;
}

/* --- app shell / sidebar (from MedFlowAI_Mockup.html) -------------------- */
.app {
  display: grid;
  grid-template-columns: 230px 1fr;
  min-height: 100vh;
}

.sidebar {
  background: var(--panel);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  padding: 0 0 18px;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  height: 100vh;
  align-self: start;
}

.sidebar .brand {
  padding: 12px 20px;
}

.nav {
  flex: 1 1;
  padding: 6px 12px;
  overflow: auto;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 13px;
  border-radius: 9px;
  color: var(--muted);
  cursor: pointer;
  font-size: 13.5px;
  font-weight: 500;
  margin-bottom: 2px;
  text-decoration: none;
  transition: 0.12s;
}

.nav-item:hover {
  background: var(--panel2);
  color: var(--text);
}

.nav-item.active {
  background: var(--blue-soft);
  color: var(--blue);
  font-weight: 600;
}

.nav-item svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.nav-item.soon {
  cursor: default;
  color: var(--muted2);
}

.nav-item.soon:hover {
  background: transparent;
  color: var(--muted2);
}

.nav-soon {
  margin-left: auto;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--muted2);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 1px 5px;
}

.u-foot {
  margin: 8px 14px 0;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 10px;
}

.u-ava {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, #2f6bff, #7c5cff);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 600;
  font-size: 12px;
  flex-shrink: 0;
}

.u-name {
  font-size: 13px;
  font-weight: 600;
}

.u-role {
  font-size: 11.5px;
  color: var(--muted);
  text-transform: capitalize;
}

.u-signout {
  margin-left: auto;
  color: var(--muted);
  cursor: pointer;
  background: none;
  border: none;
  display: flex;
  align-items: center;
  padding: 6px;
  border-radius: 8px;
}

.u-signout:hover {
  background: var(--panel2);
  color: var(--text);
}

.main {
  min-width: 0;
}

/* --- top bar ------------------------------------------------------------- */
.topbar {
  position: relative;
  height: 62px;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 26px;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
}

/* Global top-loading progress line: absolutely positioned against .topbar
   (never adds layout height / shifts content) and overlays its top edge, so
   it reads as part of the header itself. Driven by lib/topLoader.tsx via
   components/TopProgressBar.tsx. */
.top-loader {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 5px;
  pointer-events: none;
  z-index: 5;
}

.top-loader-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--blue), var(--teal));
  box-shadow: 0 0 8px var(--blue);
  transition: width 0.2s ease-out, opacity 0.25s ease-out;
  opacity: 0;
}

.top-loader-bar.visible {
  opacity: 1;
}

.top-loader-bar.fading {
  opacity: 0;
}

.topbar h2 {
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.4px;
}

.search {
  margin-left: 26px;
  flex: 1 1;
  max-width: 380px;
  position: relative;
}

.search input {
  width: 100%;
  background: var(--panel2);
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 8px 13px 8px 34px;
  font-size: 13px;
  color: var(--text);
  font-family: inherit;
}

.search input:focus {
  outline: none;
  border-color: var(--blue);
}

.search svg {
  position: absolute;
  left: 11px;
  top: 50%;
  transform: translateY(-50%);
  width: 15px;
  height: 15px;
  color: var(--muted2);
}

.top-r {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 12px;
}

.icon-btn {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  border: 1px solid var(--border);
  background: var(--panel);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--muted);
  position: relative;
  padding: 0;
}

.icon-btn:hover {
  background: var(--panel2);
}

.icon-btn svg {
  width: 17px;
  height: 17px;
}

.icon-btn .dot {
  position: absolute;
  top: 8px;
  right: 9px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--red);
  border: 2px solid #fff;
}

.top-user-menu {
  position: relative;
}

.top-ava {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, #2f6bff, #7c5cff);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 600;
  font-size: 12px;
  cursor: pointer;
  border: none;
  padding: 0;
}

.top-ava:hover {
  filter: brightness(1.05);
}

.top-user-pop {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 160px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 11px;
  box-shadow: var(--shadow);
  z-index: 30;
  padding: 6px;
}

.top-user-item {
  display: block;
  width: 100%;
  border: none;
  background: none;
  font: inherit;
  text-align: left;
  padding: 9px 11px;
  border-radius: 8px;
  cursor: pointer;
  color: var(--text);
  font-size: 13px;
  text-decoration: none;
  box-sizing: border-box;
}

.top-user-item:hover:not(:disabled) {
  background: var(--panel2);
}

.top-user-item:disabled {
  opacity: 0.45;
  cursor: default;
}

.top-user-item.danger {
  color: var(--red);
}

.identity {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
}

.identity .who {
  text-align: right;
  line-height: 1.2;
}

.identity .u-name {
  font-size: 13px;
  font-weight: 600;
}

.identity .u-role {
  font-size: 11.5px;
  color: var(--muted);
}

.avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, #2f6bff, #7c5cff);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 600;
  font-size: 12px;
  flex-shrink: 0;
}

/* --- layout -------------------------------------------------------------- */
.container {
  max-width: 960px;
  margin: 0 auto;
  padding: 22px 26px;
}

.page-title {
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.4px;
  margin-bottom: 16px;
}

/* --- buttons ------------------------------------------------------------- */
.btn {
  background: var(--blue);
  color: #fff;
  border: none;
  padding: 9px 17px;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: 0.12s;
  font-family: inherit;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

.btn svg {
  width: 15px;
  height: 15px;
}

.btn:hover {
  background: var(--blue-hover);
}

.btn.ghost {
  background: var(--panel);
  border: 1px solid var(--border);
  color: var(--text);
}

.btn.ghost:hover {
  background: var(--panel2);
}

/* --- floating "back to top" button (Executions list) ---------------------- */
.back-to-top {
  position: fixed;
  right: 28px;
  bottom: 28px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--muted);
  box-shadow: var(--shadow-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 30;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity 0.15s, transform 0.15s, background 0.12s, color 0.12s;
}

.back-to-top.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.back-to-top:hover {
  background: var(--blue);
  color: #fff;
  border-color: var(--blue);
}

.back-to-top svg {
  width: 18px;
  height: 18px;
}

/* --- cards --------------------------------------------------------------- */
.card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
  padding: 16px 18px;
  margin-bottom: 12px;
}

.card > h3 {
  font-size: 15.5px;
  font-weight: 700;
  margin-bottom: 4px;
}

/* --- badges / pills ------------------------------------------------------ */
.badge {
  font-size: 11px;
  font-weight: 600;
  background: var(--panel2);
  border: 1px solid var(--border);
  color: var(--muted);
  padding: 3px 9px;
  border-radius: 6px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.pill {
  font-size: 11.5px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 20px;
}

.pill.ok {
  background: var(--green-soft);
  color: #0e7a4a;
}

.pill.fail {
  background: var(--red-soft);
  color: #c62a48;
}

.pill.muted {
  background: var(--panel2);
  color: var(--muted);
  border: 1px solid var(--border);
}

.pill.warn {
  background: var(--amber-soft);
  color: #9a6a00;
}

/* --- helpers ------------------------------------------------------------- */
.muted {
  color: var(--muted);
}

.error {
  color: var(--red);
}

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

.spread {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.stack-sm > * + * {
  margin-top: 8px;
}

.btn.sm {
  padding: 6px 12px;
  font-size: 12.5px;
}

.btn.danger {
  background: var(--red);
}

.btn.danger:hover {
  filter: brightness(0.94);
}

/* --- confirm modal ------------------------------------------------------- */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(20, 30, 60, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: modal-fade 0.12s ease-out;
}

.modal {
  width: 100%;
  max-width: 420px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow);
  padding: 22px 24px;
  animation: modal-pop 0.12s ease-out;
}

/* Start-run inputs dialog (squad / workflow) — ~50% larger than the default
   confirm/agent modal so multi-field schemas have room to breathe. .modal has
   no max-height of its own, and .modal-overlay doesn't scroll, so unbounded
   content here grows the modal past the viewport with nothing able to reach
   the cropped part -- cap it and let the modal itself scroll instead. */
.modal.modal-lg {
  max-width: 630px;
  max-height: 85vh;
  overflow-y: auto;
  padding: 28px 32px;
}

/* Data Lake catalog table-detail modal -- wider than modal-lg so a sample-rows
   table with several columns doesn't immediately hit horizontal scroll.
   Deliberately its own variant rather than widening modal-lg, which is a
   form (start-run inputs) that doesn't want to stretch that far. */
.modal.modal-xl {
  max-width: 960px;
  max-height: 85vh;
  overflow-y: auto;
  padding: 28px 32px;
}

.modal h3 {
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 8px;
}

.modal-body {
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.5;
}

.modal-body b {
  color: var(--text);
  font-weight: 600;
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 22px;
}

@keyframes modal-fade {
  from {
    opacity: 0;
  }
}

@keyframes modal-pop {
  from {
    opacity: 0;
    transform: translateY(6px) scale(0.98);
  }
}

/* --- skeleton loaders ------------------------------------------------------
   A single shimmering primitive (.skel) that takes its size entirely from
   width/height/border-radius passed inline or via the small modifier
   classes below, so it can be dropped into any existing card/grid class
   without new layout CSS — see components/Skeleton.tsx. */
.skel {
  display: inline-block;
  border-radius: 6px;
  background: linear-gradient(
    100deg,
    var(--panel2) 30%,
    #eef1f6 50%,
    var(--panel2) 70%
  );
  background-size: 200% 100%;
  animation: skel-shimmer 1.4s ease-in-out infinite;
}

.skel-circle {
  border-radius: 50%;
  flex-shrink: 0;
}

.skel-chip {
  border-radius: 999px;
}

@keyframes skel-shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .skel {
    animation: none;
    background: var(--panel2);
  }
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.link-btn {
  background: none;
  border: none;
  color: var(--blue);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
  text-decoration: none;
}

/* --- forms --------------------------------------------------------------- */
.fld {
  margin-bottom: 16px;
}

.fld label {
  display: block;
  font-size: 12px;
  font-weight: 650;
  color: var(--muted);
  margin-bottom: 6px;
}

.ctl {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 9px 12px;
  font-size: 13px;
  color: var(--text);
  background: var(--panel);
  font-family: inherit;
}

.ctl:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px var(--blue-soft);
}

.ctl:disabled,
.ctl[readonly] {
  background: var(--panel2);
  color: var(--muted);
  cursor: not-allowed;
  opacity: 0.85;
}

textarea.ctl {
  resize: vertical;
  min-height: 64px;
}

select.ctl {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  cursor: pointer;
  padding-right: 36px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%237b8699' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
}

select.ctl:hover {
  border-color: var(--muted2);
}

/* Compact control for dense contexts (e.g. per-row selects in tables): sizes to
   content and keeps the arrow gutter so the chevron never overlaps the text. */
.ctl.sm {
  width: auto;
  padding: 6px 10px;
  font-size: 12.5px;
}

select.ctl.sm {
  padding: 6px 30px 6px 10px;
  background-position: right 10px center;
}

select.ctl option {
  color: var(--text);
  background: var(--panel);
  padding: 8px;
}

select.ctl optgroup {
  color: var(--muted);
  font-weight: 700;
  font-style: normal;
}

/* --- themed custom dropdown (ModelSelect) -------------------------------- */
.select {
  position: relative;
}

.select-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 9px 12px;
  font-size: 13px;
  font-family: inherit;
  color: var(--text);
  background: var(--panel);
  cursor: pointer;
}

.select-trigger:hover {
  border-color: var(--muted2);
}

.select.open .select-trigger {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px var(--blue-soft);
}

/* Compact variant for dense contexts (per-row selects). */
.select.sm {
  width: auto;
  display: inline-block;
}

.select.sm .select-trigger {
  width: auto;
  padding: 6px 10px;
  font-size: 12.5px;
  gap: 6px;
}

.select.sm .select-panel {
  min-width: 140px;
}

.select-trigger:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.select-trigger svg {
  width: 14px;
  height: 14px;
  color: var(--muted2);
  flex-shrink: 0;
  transition: transform 0.15s;
}

.select.open .select-trigger svg {
  transform: rotate(180deg);
}

.select-panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 30;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 11px;
  box-shadow: var(--shadow);
  padding: 6px;
  max-height: 300px;
  overflow: auto;
}

.select-group {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--muted2);
  padding: 8px 10px 4px;
}

.select-opt {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border: none;
  background: none;
  font: inherit;
  font-size: 13px;
  color: var(--text);
  text-align: left;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
}

.select-opt:hover {
  background: var(--panel2);
}

.select-opt.sel {
  background: var(--blue-soft);
  color: var(--blue-hover);
  font-weight: 600;
}

.select-opt .check {
  color: var(--blue);
  font-weight: 700;
}

/* Remove button on a row inside a manageable dropdown (e.g. the Local
   provider's Models picker) -- same look/feel as `.chip .x`, scoped to
   `.select-opt` instead since these rows aren't chips. */
.select-opt .x {
  cursor: pointer;
  opacity: 0.6;
  font-weight: 700;
  border: none;
  background: none;
  color: inherit;
  padding: 0;
  font-size: 12px;
  line-height: 1;
}

.select-opt .x:hover {
  opacity: 1;
}

.select-opt-add-row {
  display: flex;
  gap: 6px;
  padding: 0 10px 8px;
}

.select-opt-add-row .ctl {
  padding: 6px 8px;
  font-size: 12.5px;
}

.sub-card {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 10px;
  background: var(--panel2);
}

/* --- markdown body (run outputs, etc.) ----------------------------------- */
.md-content {
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--text);
  word-wrap: break-word;
  overflow-wrap: anywhere;
}

.md-content > :first-child {
  margin-top: 0;
}

.md-content > :last-child {
  margin-bottom: 0;
}

.md-content h1,
.md-content h2,
.md-content h3,
.md-content h4,
.md-content h5,
.md-content h6 {
  color: var(--text);
  font-weight: 700;
  line-height: 1.3;
  margin: 1.1em 0 0.45em;
  letter-spacing: -0.02em;
}

.md-content h1 {
  font-size: 1.55em;
  border-bottom: 1px solid var(--border);
  padding-bottom: 0.3em;
}

.md-content h2 {
  font-size: 1.3em;
  border-bottom: 1px solid var(--border);
  padding-bottom: 0.25em;
}

.md-content h3 {
  font-size: 1.15em;
}

.md-content h4 {
  font-size: 1.05em;
}

.md-content h5,
.md-content h6 {
  font-size: 1em;
  color: var(--muted);
}

.md-content p {
  margin: 0.65em 0;
}

.md-content strong {
  font-weight: 700;
  color: var(--text);
}

.md-content em {
  font-style: italic;
}

.md-content a {
  color: var(--blue);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.md-content a:hover {
  color: var(--blue-hover);
}

.md-content ul,
.md-content ol {
  margin: 0.65em 0;
  padding-left: 1.4em;
}

.md-content li {
  margin: 0.25em 0;
}

.md-content li > p {
  margin: 0.25em 0;
}

.md-content blockquote {
  margin: 0.8em 0;
  padding: 0.35em 0 0.35em 0.9em;
  border-left: 3px solid var(--blue);
  color: var(--muted);
  background: var(--panel);
  border-radius: 0 6px 6px 0;
}

.md-content hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: 1.2em 0;
}

.md-content code {
  font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, monospace);
  font-size: 0.9em;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 1px 5px;
}

.md-content pre {
  margin: 0.8em 0;
  padding: 12px 14px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow-x: auto;
}

.md-content pre code {
  background: none;
  border: none;
  padding: 0;
  font-size: 12.5px;
  line-height: 1.5;
}

.md-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 0.8em 0;
  font-size: 13px;
  display: block;
  overflow-x: auto;
}

.md-content th,
.md-content td {
  border: 1px solid var(--border);
  padding: 7px 10px;
  text-align: left;
  vertical-align: top;
}

.md-content th {
  background: var(--panel);
  font-weight: 600;
}

.md-content tr:nth-child(even) td {
  background: rgba(255, 255, 255, 0.45);
}

.md-content img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
}

/* --- agent form: grouped sections + live preview ------------------------- */
.agent-split {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  grid-gap: 20px;
  gap: 20px;
  align-items: start;
}

@media (max-width: 860px) {
  .agent-split {
    grid-template-columns: 1fr;
  }
}

/* no preview column (e.g. embedded in the squad roster drawer, which is too
   narrow for a 1.5fr/1fr split) — just the grouped-sections form, full width. */
.agent-split.single {
  grid-template-columns: 1fr;
}

.sec {
  padding: 16px 20px;
  border-top: 1px solid var(--border);
}

.sec:first-child {
  border-top: none;
}

.sec-t {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 3px;
}

.sec-ic {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.sec-ic svg {
  width: 16px;
  height: 16px;
}

.sec-t h3 {
  font-size: 14.5px;
  font-weight: 700;
  margin: 0;
}

.sec-t .count {
  font-size: 11.5px;
  color: var(--muted);
  font-weight: 500;
}

.sec-sub {
  font-size: 12px;
  color: var(--muted);
  margin: 0 0 14px 40px;
}

.sec-body {
  padding-left: 40px;
}

.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 14px;
  gap: 14px;
}

.three-col {
  display: grid;
  grid-template-columns: 1.6fr 0.8fr 1.5fr;
  grid-gap: 14px;
  gap: 14px;
  align-items: start;
}

@media (max-width: 700px) {
  .two-col,
  .three-col {
    grid-template-columns: 1fr;
  }
}

.hint {
  font-size: 11.5px;
  color: var(--muted2);
  margin-top: 5px;
}

/* segmented control (e.g. collaboration mode) */
.seg {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: 9px;
  overflow: hidden;
  background: var(--panel2);
}

.seg button {
  border: none;
  background: none;
  padding: 8px 15px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  font-family: inherit;
}

.seg button.active {
  background: var(--blue);
  color: #fff;
}

/* --- Settings page ------------------------------------------------------- */
/* key/value summary (account, system snapshot) */
.set-kv {
  display: grid;
  grid-template-columns: 150px 1fr;
  grid-gap: 10px 16px;
  gap: 10px 16px;
  align-items: center;
  font-size: 13.5px;
}

.set-kv > .muted {
  font-size: 12.5px;
}

/* usage stat tiles */
.set-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  grid-gap: 12px;
  gap: 12px;
}

.set-stat {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--panel2);
  padding: 12px 14px;
}

.set-stat-val {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.set-stat-lbl {
  font-size: 12px;
  margin-top: 2px;
}

/* feature-flag grid */
.feat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  grid-gap: 8px 16px;
  gap: 8px 16px;
}

.feat-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
}

.feat-row .pill {
  min-width: 34px;
  text-align: center;
}

/* roster chips (agents on a squad) — a neat grid so short/long role names line
   up in even rows instead of ragged flex-wrap. */
.roster {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-gap: 8px;
  gap: 8px;
}

.achip {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  background: var(--panel2);
  border: 1px solid var(--border);
  border-radius: 22px;
  padding: 4px 12px 4px 5px;
  font-size: 12.5px;
  font-weight: 600;
}

.achip-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.av {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #2f6bff, #7c5cff);
}

.roster-row .av {
  width: 32px;
  height: 32px;
  font-size: 11.5px;
}

/* agents library grid */
.agents-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  grid-gap: 16px;
  gap: 16px;
}

.agent-card-foot {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

/* uniform library cards: equal height per row, footer pinned to the bottom */
.agents-grid {
  align-items: stretch;
}

.agent-lib-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.agent-lib-card .agent-card-foot {
  margin-top: auto;
}

.agent-goal {
  font-size: 12.5px;
  margin-top: 10px;
  min-height: 38px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.agent-card {
  cursor: pointer;
  transition: border-color 0.12s, box-shadow 0.12s;
}

.agent-card:hover {
  border-color: #c9d6f5;
  box-shadow: var(--shadow);
}

.btn.danger-ghost {
  background: var(--panel);
  border: 1px solid #f4c2cd;
  color: var(--red);
}

.btn.danger-ghost:hover {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
}

.btn.accent-ghost {
  background: var(--panel);
  border: 1px solid #bcd0ff;
  color: var(--blue);
}

.btn.accent-ghost:hover {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
}

/* preview */
.preview-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--muted2);
  margin-bottom: 10px;
}

/* Workflow list card header icon (workflows/page.tsx) — same footprint as
   .agent-ava but a distinct teal→blue gradient + the shared sidebar
   "workflow" glyph (NavIcons.tsx) instead of initials, so a workflow card
   reads at a glance as a different resource type from an agent card. */
.wf-card-ava {
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: linear-gradient(135deg, #12b5b0, #2f6bff);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}

.wf-card-ava svg {
  width: 22px;
  height: 22px;
}

/* Node-kind chips on a workflow card — colored per KIND_META (same palette
   the canvas node cards use) with a matching mini icon, instead of a bare
   grey pill, so the card carries some of the same visual richness as the
   agent card's colored tool chips. */
.wf-kind-row {
  margin-top: 12px;
}

.wf-kind-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 20px;
  padding: 5px 11px 5px 6px;
  font-size: 12px;
  font-weight: 600;
}

.wf-kind-chip-ic {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.wf-kind-chip-ic svg {
  width: 12px;
  height: 12px;
}

.agent-ava {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: linear-gradient(135deg, #2f6bff, #7c5cff);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: 16px;
  flex-shrink: 0;
}

/* tool chips */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--blue-soft);
  color: var(--blue-hover);
  border-radius: 20px;
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 600;
}

.chip .x {
  cursor: pointer;
  opacity: 0.6;
  font-weight: 700;
  border: none;
  background: none;
  color: inherit;
  padding: 0;
  font-size: 12px;
}

.chip .x:hover {
  opacity: 1;
}

.chip.teal {
  background: var(--teal-soft);
  color: #0c6f6b;
}

.chip.more {
  background: var(--panel2);
  color: var(--muted);
  /* --panel2 sits almost flush against --panel (the card background this
     chip is usually shown on), so without a boundary the "pill" reads as
     floating text rather than a visible chip. */
  border: 1px solid var(--border);
}

/* Agent/squad card tool rows: keep to a single line — overflow tools collapse
   into a "+N" chip (see MAX_VISIBLE_TOOLS) rather than wrapping the card
   tall and throwing off the grid's equal-height rows. Each chip gets its own
   max-width + ellipsis instead of flex-shrinking every chip proportionally
   (which squeezed short labels down to almost nothing) — a normal label
   ("Send email") shows in full; only a genuinely long one truncates. */
.chips.tools-row {
  flex-wrap: nowrap;
  overflow: hidden;
}

.chips.tools-row .chip {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex-shrink: 0;
  max-width: 128px;
}

.chips.tools-row .chip.more {
  flex-shrink: 0;
  max-width: none;
}

/* toggle switch */
.switch {
  width: 38px;
  height: 22px;
  border-radius: 12px;
  background: var(--blue);
  position: relative;
  cursor: pointer;
  flex-shrink: 0;
  border: none;
  padding: 0;
}

.switch::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 18px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  transition: 0.15s;
}

.switch.off {
  background: var(--border);
}

.switch.off::after {
  left: 2px;
}

.switch.sm {
  width: 32px;
  height: 19px;
}

.switch.sm::after {
  width: 15px;
  height: 15px;
  top: 2px;
  left: 15px;
}

.switch.sm.off::after {
  left: 2px;
}

.switch:disabled {
  cursor: default;
  opacity: 0.55;
}

.toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.toggle-row .tl {
  font-size: 13px;
  font-weight: 500;
}

/* slider */
input[type="range"] {
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
  width: 100%;
  height: 5px;
  border-radius: 5px;
  background: var(--border);
  outline: none;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: var(--blue);
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(47, 107, 255, 0.5);
}

input[type="range"]::-moz-range-thumb {
  width: 17px;
  height: 17px;
  border: none;
  border-radius: 50%;
  background: var(--blue);
  cursor: pointer;
}

.slider-row {
  display: flex;
  align-items: center;
  gap: 14px;
}

.slider-row input[type="range"]:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.slider-val {
  font-size: 13px;
  font-weight: 700;
  min-width: 34px;
  text-align: right;
}

/* --- run-state badges ---------------------------------------------------- */
.state {
  font-size: 11.5px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 20px;
  text-transform: capitalize;
}

.state.queued {
  background: var(--panel2);
  color: var(--muted);
}

.state.running {
  background: var(--blue-soft);
  color: var(--blue-hover);
  box-shadow:
    0 0 0 1px rgba(47, 107, 255, 0.35),
    0 0 10px 2px rgba(47, 107, 255, 0.45),
    0 0 18px 6px rgba(47, 107, 255, 0.22);
  animation: state-running-glow 1.3s ease-in-out infinite;
}

@keyframes state-running-glow {
  0%,
  100% {
    box-shadow:
      0 0 0 1px rgba(47, 107, 255, 0.3),
      0 0 8px 2px rgba(47, 107, 255, 0.4),
      0 0 14px 4px rgba(47, 107, 255, 0.18);
  }
  50% {
    box-shadow:
      0 0 0 1px rgba(47, 107, 255, 0.55),
      0 0 14px 4px rgba(47, 107, 255, 0.7),
      0 0 24px 8px rgba(47, 107, 255, 0.35);
  }
}

.state.succeeded {
  background: var(--green-soft);
  color: #0e7a4a;
}

.state.failed {
  background: var(--red-soft);
  color: #c62a48;
}

.state.cancelled {
  background: var(--amber-soft);
  color: #8a6d2a;
}

.state.waiting_approval {
  background: var(--amber-soft);
  color: #9a6b00;
}

/* --- metric cards --------------------------------------------------------- */
.metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  grid-gap: 12px;
  gap: 12px;
  margin-bottom: 16px;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--bg);
  padding-top: 10px;
  padding-bottom: 10px;
  margin-top: -10px;
}

.metric {
  background: var(--panel);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  border-radius: 10px;
  padding: 14px 16px;
}

.metric .label {
  font-size: 12px;
  color: var(--muted);
  font-weight: 500;
}

.metric .val {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.5px;
  margin-top: 6px;
}

/* --- event trace --------------------------------------------------------- */
.trace {
  font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, monospace);
}

.evt {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 7px 0;
  border-top: 1px solid var(--border);
  font-size: 12.5px;
}

.evt .etime {
  color: var(--muted2);
  font-size: 11px;
  width: 66px;
  flex-shrink: 0;
}

.evt .etype {
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 6px;
  white-space: nowrap;
  flex-shrink: 0;
}

.evt .emsg {
  color: var(--text);
  word-break: break-word;
}

.etype.blue {
  background: var(--blue-soft);
  color: var(--blue-hover);
}
.etype.purple {
  background: var(--purple-soft);
  color: #4a3aa8;
}
.etype.teal {
  background: var(--teal-soft);
  color: #0c6f6b;
}
.etype.amber {
  background: var(--amber-soft);
  color: #8a6d2a;
}
.etype.gray {
  background: var(--panel2);
  color: var(--muted);
}
.etype.red {
  background: var(--red-soft);
  color: #c62a48;
}

.center-screen {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
}

.login-card {
  width: 100%;
  max-width: 380px;
  text-align: center;
  padding: 32px 28px;
  box-shadow: var(--shadow);
}

.login-card .brand {
  justify-content: center;
  margin-bottom: 14px;
}

/* "or" divider between the local login form and the SSO button. */
.login-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 14px 0;
  color: var(--muted);
  font-size: 12px;
}

.login-divider::before,
.login-divider::after {
  content: "";
  flex: 1 1;
  height: 1px;
  background: var(--border);
}

/* Informational login notice (e.g. "awaiting admin approval") — distinct from
   the red error style: a calm blue info box. */
.login-notice {
  text-align: left;
  font-size: 13px;
  line-height: 1.45;
  color: var(--blue);
  background: var(--blue-soft);
  border: 1px solid #bcd0ff;
  border-radius: 9px;
  padding: 10px 12px;
}

/* Live password-strength checklist under a new-password field (registration,
   self-service reset). Each rule starts muted/unmet and turns green + checked
   as the typed password satisfies it. */
.pw-checklist {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  display: grid;
  grid-gap: 4px;
  gap: 4px;
}

.pw-checklist li {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  color: var(--muted);
  transition: color 0.15s ease;
}

.pw-checklist li.ok {
  color: var(--green);
}

.pw-check-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  flex: none;
  color: var(--border);
}

.pw-checklist li.ok .pw-check-icon {
  color: var(--green);
}

/* --- Overview page (MedFlowAI_Mockup.html "Overview") --------------------
   Class names/layout ported from the mockup; the KPI/exec-row/chart/agent
   pieces are new here (the mockup's own `.agents-grid` collides with the
   4-column agent-library grid already used on /agents and /, so the Overview
   variant is named `.top-agents-grid` instead). */
.kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 16px;
  gap: 16px;
  margin-bottom: 18px;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--bg);
  padding-top: 10px;
  padding-bottom: 10px;
  margin-top: -10px;
}

.kpi {
  padding: 18px 18px;
}

.kpi .top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.kpi .label {
  font-size: 13px;
  color: var(--muted);
  font-weight: 500;
}

.kpi .kico {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.kpi .val {
  font-size: 29px;
  font-weight: 750;
  margin-top: 12px;
  letter-spacing: -1px;
}

.ov-two {
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  grid-gap: 16px;
  gap: 16px;
  margin-bottom: 18px;
  align-items: stretch;
}

.ov-two > .card {
  display: flex;
  flex-direction: column;
}

.sec-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px 8px;
}

.sec-head h3 {
  font-size: 15.5px;
  font-weight: 700;
}

.link {
  color: var(--blue);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
}

.link:hover {
  text-decoration: underline;
}

.exec-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 18px;
  border-top: 1px solid var(--border);
  text-decoration: none;
  color: inherit;
}

.exec-row:hover {
  background: var(--panel2);
}

.ex-ic {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--blue-soft);
  color: var(--blue);
}

.ex-name {
  font-size: 13.5px;
  font-weight: 600;
  flex: 1 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ex-time {
  font-size: 12px;
  color: var(--muted2);
  width: 64px;
  text-align: right;
  flex-shrink: 0;
}

.chart-wrap {
  padding: 6px 12px 14px;
  flex: 1 1;
  min-height: 210px;
  display: flex;
}

/* days-range dropdown next to "Execution Overview" */
.dd-wrap {
  position: relative;
  display: inline-block;
}

.dd {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 5px 10px;
  font-size: 12px;
  font-family: inherit;
  color: var(--muted);
  background: var(--panel);
  cursor: pointer;
}

.dd:hover {
  background: var(--panel2);
}

.dd-wrap.open .dd {
  border-color: var(--blue);
  color: var(--text);
}

.dd svg {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  transition: transform 0.15s;
}

.dd-wrap.open .dd svg {
  transform: rotate(180deg);
}

.dd-panel {
  left: auto;
  right: 0;
  min-width: 150px;
  width: max-content;
}

.top-agents-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 16px;
  gap: 16px;
  padding: 6px 18px 18px;
}

.ag-card {
  border-radius: 14px;
  padding: 18px 16px;
  border: 1px solid var(--border);
  background: var(--panel2);
  text-decoration: none;
  color: inherit;
  display: block;
}

.ag-ic {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-sm);
  margin-bottom: 12px;
}

.ag-name {
  font-size: 14px;
  font-weight: 700;
}

.ag-sub {
  font-size: 12.5px;
  color: var(--muted);
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 1100px) {
  .kpis {
    grid-template-columns: repeat(2, 1fr);
  }
  .top-agents-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 900px) {
  .ov-two {
    grid-template-columns: 1fr;
  }
}

/* --- Executions grid table ------------------------------------------------ */
.runs-grid-wrap {
  overflow-x: auto;
}

.rg-head,
.rg-row {
  display: grid;
  grid-template-columns: 2.2fr 110px 90px 110px 90px 110px;
  grid-gap: 12px;
  gap: 12px;
  align-items: center;
  padding: 12px 18px;
  min-width: 640px;
}

.rg-head {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--muted2);
  border-bottom: 1px solid var(--border);
}

.rg-row {
  border-top: 1px solid var(--border);
  text-decoration: none;
  color: inherit;
}

.rg-row:first-of-type {
  border-top: none;
}

.rg-row:hover {
  background: var(--panel2);
}

.rg-squad {
  min-width: 0;
}

.rg-squad-name {
  font-size: 13.5px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rg-run-id {
  font-size: 11.5px;
  color: var(--muted2);
  font-family: var(--font-mono, monospace);
  margin-top: 1px;
}

.rg-num {
  font-size: 13px;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  text-align: center;
}

/* keep the status pill a consistent size, centered, instead of stretching to
   fill the grid column (a bare .state span is inline and would otherwise get
   blockified + stretched by the grid, making it a lopsided full-width box). */
.rg-row .state {
  justify-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 84px;
}

/* --- squad roster (list rows + drawer) ------------------------------------- */
.roster-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.roster-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--panel);
  cursor: pointer;
  transition: 0.12s;
}

.roster-row:hover {
  border-color: #c9d6f5;
  background: var(--blue-soft);
}

.roster-row .txt {
  flex: 1 1;
  min-width: 0;
}

.roster-row .nm {
  font-size: 13.5px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
}

.roster-row .sub {
  font-size: 11.5px;
  color: var(--muted);
  margin-top: 1px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.row-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}

.row-icon-btn {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  border: none;
  background: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted2);
  cursor: pointer;
}

.row-icon-btn svg {
  width: 16px;
  height: 16px;
}

.row-icon-btn:hover {
  background: var(--panel2);
  color: var(--text);
}

.row-icon-btn.star.on {
  color: var(--amber);
}

.row-icon-btn.danger:hover {
  color: var(--red);
  background: var(--red-soft);
}

.row-icon-btn.accent:hover {
  color: var(--blue);
  background: var(--blue-soft);
}

.row-icon-btn.success:hover {
  color: var(--green);
  background: var(--green-soft);
}

/* --- dynamic run-input schema editor ---------------------------------- */
.isf-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 10px;
}

.isf-card {
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--panel);
}

.isf-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.isf-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: var(--blue-soft);
  color: var(--blue);
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
}

.isf-title {
  flex: 1 1;
  min-width: 0;
  font-size: 13px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.isf-grid {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.isf-key-row {
  margin-top: 8px;
}

.isf-key-hint {
  margin: 0;
}

.isf-key-hint code {
  font-size: 11px;
}

.linklike {
  border: none;
  background: none;
  padding: 0;
  font: inherit;
  font-size: inherit;
  color: var(--blue);
  cursor: pointer;
  text-decoration: underline;
}

.linklike:hover {
  color: var(--blue-dark, var(--blue));
}

.row-icon-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.row-icon-btn:disabled:hover {
  background: none;
  color: var(--muted2);
}

.badge.mgr {
  background: var(--amber-soft);
  color: #8a6d2a;
  border-color: transparent;
}

/* import-from-library popover */
.import-pop {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  width: 280px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 11px;
  box-shadow: var(--shadow);
  z-index: 20;
  padding: 6px;
  max-height: 280px;
  overflow: auto;
}

.import-item {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  border: none;
  background: none;
  font: inherit;
  text-align: left;
  padding: 8px 9px;
  border-radius: 8px;
  cursor: pointer;
}

.import-item:hover {
  background: var(--panel2);
}

.import-item.selected {
  background: var(--blue-soft);
}

/* Multi-select checkbox in the Resource Access user picker (UserPicker). */
.access-chk {
  width: 15px;
  height: 15px;
  border-radius: 4px;
  border: 1.5px solid var(--border);
  background: var(--panel);
  flex-shrink: 0;
  position: relative;
}

.access-chk.on {
  background: var(--blue);
  border-color: var(--blue);
}

.access-chk.on::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 1px;
  width: 4px;
  height: 8px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.access-picker-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 9px;
  border-top: 1px solid var(--border);
}

.import-item .txt {
  flex: 1 1;
  min-width: 0;
}

.import-item .nm {
  font-size: 12.5px;
  font-weight: 600;
  display: block;
}

.import-item .rl {
  font-size: 11px;
  color: var(--muted);
  display: block;
}

/* add/edit-agent drawer, reusing the real AgentForm component */
.drawer-scrim {
  position: fixed;
  inset: 0;
  background: rgba(20, 28, 48, 0.32);
  z-index: 40;
}

.drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 640px;
  max-width: 94vw;
  background: var(--panel);
  box-shadow: -14px 0 30px rgba(30, 50, 110, 0.18);
  z-index: 41;
  display: flex;
  flex-direction: column;
}

.drawer-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.drawer-head h3 {
  font-size: 14.5px;
  font-weight: 700;
  flex: 1 1;
}

.drawer-close {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  cursor: pointer;
  background: none;
  font-size: 13px;
}

.drawer-close:hover {
  background: var(--panel2);
}

.drawer-body {
  padding: 18px 20px;
  overflow: auto;
  flex: 1 1;
}

/* --- MedFlowAI Studio (chat + live draft split) --------------------------- */
.studio-split {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  grid-gap: 20px;
  gap: 20px;
  align-items: stretch;
  /* fill the viewport under the 62px topbar and the container's 22px top+bottom
     padding (62 + 44 = 106) so the columns reach the bottom with no dead space. */
  height: calc(100vh - 106px);
  min-height: 460px;
}

@media (max-width: 900px) {
  .studio-split {
    grid-template-columns: 1fr;
    height: auto;
  }
}

.chat-col {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
}

.chat-scroll {
  flex: 1 1;
  overflow-y: auto;
  padding: 20px;
}

.chat-welcome {
  max-width: 520px;
  margin: 24px auto 0;
  text-align: center;
}

.chat-welcome h2 {
  font-size: 20px;
  font-weight: 800;
  margin-bottom: 8px;
}

.suggestions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 10px;
  gap: 10px;
  margin-top: 22px;
  text-align: left;
}

@media (max-width: 620px) {
  .suggestions {
    grid-template-columns: 1fr;
  }
}

.suggest-card {
  border: 1px solid var(--border);
  background: var(--panel);
  border-radius: 11px;
  padding: 13px 14px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition: 0.12s;
}

.suggest-card:hover {
  border-color: #c9d6f5;
  background: var(--blue-soft);
}

.suggest-card:disabled {
  opacity: 0.5;
  cursor: default;
}

.chat-thread {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.bubble {
  max-width: 85%;
  padding: 10px 13px;
  border-radius: 13px;
  font-size: 13.5px;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
}

.bubble.user {
  align-self: flex-end;
  background: var(--blue);
  color: #fff;
  border-bottom-right-radius: 4px;
}

.bubble.assistant {
  align-self: flex-start;
  background: var(--panel2);
  border: 1px solid var(--border);
  border-bottom-left-radius: 4px;
}

.bubble.thinking {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
}

/* Three bouncing dots instead of static "Thinking…" text — a live chat
   feels alive while waiting on the synthesizer, same idea as Slack/iMessage
   typing indicators. */
.thinking-dots {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.thinking-dots span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--muted2);
  animation: thinking-bounce 1.2s ease-in-out infinite;
}

.thinking-dots span:nth-child(2) {
  animation-delay: 0.15s;
}

.thinking-dots span:nth-child(3) {
  animation-delay: 0.3s;
}

@keyframes thinking-bounce {
  0%,
  60%,
  100% {
    transform: translateY(0);
    opacity: 0.5;
  }
  30% {
    transform: translateY(-4px);
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .thinking-dots span {
    animation: none;
  }
}

.q-list {
  align-self: flex-start;
  max-width: 85%;
  margin: 2px 0 2px 6px;
  padding-left: 20px;
  font-size: 13px;
  color: var(--text);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Studio's in-chat "connect this tool" prompt (page.tsx's `connectPrompt`) —
   a local-only card, styled like QuestionForm's `.qform` (its own standalone
   card rather than nested inside `.bubble`) wrapping the same `ToolkitCard`
   the Tools page uses so the connect UI looks identical in both places. */
.connect-prompt {
  align-self: flex-start;
  width: 320px;
  background: var(--panel2);
  border: 1px solid var(--border);
  border-radius: 13px;
  padding: 12px;
}

.connect-prompt .toolkit-card {
  min-height: 0;
}

/* Studio clarifying-question widgets (QuestionForm) — one inline pseudo-form
   per need_info turn, rendered like an assistant bubble but with interactive
   controls per question instead of plain text. */
.qform {
  align-self: flex-start;
  /* Fixed width (not just a max) plus a minimum height so the card doesn't
     visibly jump size as you move between a 2-option boolean question and a
     6-option multi-select one — short questions just leave the extra space
     empty above the actions row instead of the whole card shrinking. */
  width: 92%;
  min-height: 190px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--panel2);
  border: 1px solid var(--border);
  border-radius: 13px;
  border-bottom-left-radius: 4px;
  padding: 12px 14px;
  transition: min-height 0.15s ease;
}

.qform-progress {
  display: flex;
  align-items: center;
  gap: 8px;
}

.qform-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text);
  border-radius: 50%;
  padding: 0;
  cursor: pointer;
  flex-shrink: 0;
  transition: 0.12s;
}

.qform-arrow svg {
  width: 14px;
  height: 14px;
}

.qform-arrow:hover:not(:disabled) {
  border-color: #c9d6f5;
  background: var(--blue-soft);
}

.qform-arrow:disabled {
  opacity: 0.35;
  cursor: default;
}

.qform-count {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.qform-dots {
  display: flex;
  gap: 6px;
  margin-left: auto;
}

.qform-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: none;
  padding: 0;
  background: var(--border);
  cursor: pointer;
  transition: 0.12s;
}

.qform-dot.done {
  background: var(--blue-hover);
}

.qform-dot.active {
  width: 16px;
  border-radius: 4px;
  background: var(--blue);
}

.qform-q {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.qform-q-text {
  font-size: 13.5px;
  font-weight: 500;
}

/* One option per full-width row (not wrapped pills) so each choice reads as
   its own line, like a short list rather than a chip cloud. */
.qform-options {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.qopt {
  display: block;
  width: 100%;
  text-align: left;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text);
  border-radius: 10px;
  padding: 9px 13px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: 0.12s;
}

.qopt:hover:not(:disabled) {
  border-color: #c9d6f5;
  background: var(--blue-soft);
}

.qopt.selected {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
}

.qopt-other-input {
  width: 100%;
  border-radius: 10px;
  padding: 9px 13px;
  font-size: 13px;
}

.qopt-other-input.selected {
  border-color: var(--blue);
  background: var(--blue-soft);
}

.qform-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* ToolQuestionForm — the same `.qform` wizard shell as clarifying questions
   (QuestionForm), applied to tool_suggestions: one capability per card, its
   resolved candidates as full-width option rows instead of a plain chip
   cloud so the recommended pick and each source (toolkit/MCP/built-in)
   read clearly, plus a "Skip this tool" action. */
.toolq-reason {
  font-size: 12px;
  color: var(--muted);
  margin: -3px 0 2px;
}

.toolq-options {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.toolq-option {
  display: flex;
  flex-direction: column;
  gap: 3px;
  width: 100%;
  text-align: left;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text);
  border-radius: 10px;
  padding: 9px 13px;
  font: inherit;
  cursor: pointer;
  transition: 0.12s;
}

.toolq-option:hover:not(:disabled) {
  border-color: #c9d6f5;
  background: var(--blue-soft);
}

.toolq-option:disabled {
  opacity: 0.55;
  cursor: default;
}

.toolq-option.awaiting {
  border-color: var(--blue);
  background: var(--blue-soft);
  opacity: 1;
}

.toolq-option-main {
  display: flex;
  align-items: center;
  gap: 8px;
}

.toolq-option-label {
  font-size: 13px;
  font-weight: 600;
}

.toolq-recommended {
  background: var(--blue);
  color: #fff;
  font-size: 10px;
  padding: 2px 7px;
}

.toolq-connected {
  background: var(--green-soft);
  color: var(--green);
  font-size: 10px;
  padding: 2px 7px;
}

.toolq-option-desc {
  font-size: 12px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.toolq-option-meta {
  font-size: 11px;
  color: var(--muted2);
  text-transform: capitalize;
}

/* Trailing "Other…" row — a live search box over the full builtin/Composio/
   MCP catalog rather than a resolved candidate, for when none of the 3-4
   suggested tools fit. Deliberately not a `.toolq-option` (that class is
   styled as a clickable button, and this row's click surface is its input
   child, not the row itself); matching results render below as their own
   `.toolq-option.toolq-option-searched` buttons. */
.toolq-option-other {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  border: 1px dashed var(--border);
  background: var(--panel);
  border-radius: 10px;
  padding: 6px 6px 6px 13px;
}

.toolq-other-input {
  flex: 1 1;
  min-width: 0;
  border-radius: 8px;
  padding: 7px 11px;
  font-size: 12px;
}

.toolq-other-status {
  font-size: 11px;
  color: var(--muted2);
  padding: 0 4px;
}

.toolq-other-error {
  font-size: 11px;
  color: var(--danger, #d92d20);
  margin: 0;
  padding: 0 4px;
}

.toolq-option-searched {
  border-style: dashed;
}

.chat-input-row {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  padding: 12px 16px;
  border-top: 1px solid var(--border);
}

.chat-input-row .ctl {
  flex: 1 1;
  resize: none;
}

.draft-col {
  /* stretch to the full split height (like the chat column); the header and the
     action footer stay put while only the middle scrolls, so Create/Run squad is
     always visible without scrolling. */
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
}

.draft-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 18px 20px 12px;
  flex-shrink: 0;
}

.draft-scroll {
  flex: 1 1;
  min-height: 0;
  overflow-y: auto;
  padding: 0 20px 8px;
}

.draft-foot {
  flex-shrink: 0;
  padding: 12px 20px 16px;
  border-top: 1px solid var(--border);
}

.kind-tag {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--blue-hover);
  background: var(--blue-soft);
  padding: 3px 9px;
  border-radius: 20px;
}

.kind-tag.warn {
  color: #8a6d2a;
  background: var(--amber-soft);
}

.draft-created .created-check {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--green-soft);
  color: var(--green);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 800;
  margin-bottom: 10px;
}

/* draft panel scrolls independently when the detailed draft is tall */
@media (max-width: 900px) {
  /* stacked layout: let the panel grow with content instead of internal scroll */
  .draft-col {
    overflow: visible;
  }
  .draft-scroll {
    overflow-y: visible;
  }
}

.draft-field {
  margin-top: 16px;
}

.draft-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted2);
  margin-bottom: 5px;
}

.draft-field > p {
  font-size: 13px;
  line-height: 1.5;
  color: var(--text);
}

.draft-input-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.draft-input-list li {
  font-size: 13px;
  color: var(--text);
}

.draft-roster {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.draft-agent {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--panel2);
}

.draft-agent.open {
  border-color: #c9d6f5;
}

/* compact clickable header — the whole collapsed row */
.draft-agent-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
}

.draft-agent-header[role="button"] {
  cursor: pointer;
}

.draft-agent-header[role="button"]:hover {
  background: var(--blue-soft);
  border-radius: 10px;
}

.draft-agent .av {
  width: 28px;
  height: 28px;
  font-size: 10.5px;
  flex-shrink: 0;
}

.draft-agent-body {
  flex: 1 1;
  min-width: 0;
}

.draft-agent-top {
  display: flex;
  align-items: center;
  gap: 8px;
}

.draft-agent-name {
  font-size: 13px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.draft-agent-chev {
  font-size: 9px;
  color: var(--muted2);
  flex-shrink: 0;
}

.draft-agent-role {
  font-size: 11.5px;
  color: var(--muted);
  margin-top: 1px;
}

.draft-agent-goal {
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--text);
  margin-top: 5px;
}

.draft-agent-meta {
  font-size: 11px;
  color: var(--muted2);
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* expanded body under the header */
.draft-agent-expand {
  padding: 0 12px 12px;
}

/* inline quick-edit controls for a draft agent — one field per line
   (Model, Allow delegation, Temperature, Tools). */
.draft-agent-edit {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--border);
}

.mini-field {
  min-width: 0;
}

.mini-field > label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 4px;
}

/* Studio's per-agent tool suggestions (see DraftCards.tsx) — one capability
   per row with its resolved candidate chips underneath. Sits directly below
   the draft-agent header, always visible whether the row is collapsed or
   expanded, so a recommended tool never requires an extra click to surface. */
.suggested-tools {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0 10px 10px;
}

.suggested-tool-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.chip-suggest {
  border: 1px dashed var(--blue-hover);
  background: transparent;
  color: var(--blue-hover);
  border-radius: 20px;
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.chip-suggest:hover:not(:disabled) {
  background: var(--blue-soft);
}

.chip-suggest:disabled {
  opacity: 0.6;
  cursor: default;
  border-style: solid;
}

/* --- Resource Access (subject-centric visibility builder) ----------------
   Mirrors MedFlowAI_ResourceAccess_Designs.html: pick a role or a user, toggle
   whole groups or single items, see a live nav preview of the exact result. */

.access-switchbar {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

/* A plain dropdown, not a two-button segmented control — scales cleanly if a
   role is added later without needing to redesign the switcher. Built on the
   same themed custom trigger/panel/option pattern as `ModelSelect`
   (`.select`/`.select-trigger`/`.select-panel`/`.select-opt`) rather than a
   native `<select>`, whose open options list is rendered by the OS/browser
   and can't be restyled to match the app's theme. */
/* Chains all three of the wrapper's own classes so this reliably out-ranks
   `.select.sm .select-trigger`'s padding/font-size (same trap as `.ctl` —
   more classes on one shared ancestor beats fewer, regardless of source
   order), matching the height of `.access-userpick` next to it. */
.select.sm.access-roleselect .select-trigger {
  font-weight: 700;
  min-width: 130px;
  padding: 9px 14px;
  border-radius: 12px;
  font-size: 13px;
  gap: 8px;
}

.access-roleselect-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.rdot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--muted2);
  flex: none;
}

.rdot.viewer {
  background: var(--teal);
}

.rdot.editor {
  background: var(--blue);
}

.access-or {
  color: var(--muted2);
  font-weight: 700;
  font-size: 12.5px;
}

.access-savebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 11px 16px;
  margin-bottom: 18px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--panel);
}

.access-savebar-status {
  font-size: 12.5px;
  color: var(--muted);
}

.access-savebar-status.dirty {
  color: var(--blue);
  font-weight: 700;
}

.access-savebar-actions {
  display: flex;
  gap: 8px;
}

.access-userpick {
  display: flex;
  align-items: center;
  gap: 9px;
  background: var(--panel);
  border: 1px dashed var(--border);
  border-radius: 12px;
  padding: 9px 14px;
  color: var(--muted);
  font-weight: 600;
  cursor: pointer;
  position: relative;
}

.access-userpick.picked {
  border-style: solid;
  background: var(--teal-soft);
  color: #0c6f6b;
  border-color: #bfe9e2;
}

.access-userpick .pick-av {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  color: var(--teal);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 10px;
  flex-shrink: 0;
}

.access-hint {
  color: var(--muted);
  font-size: 12px;
}

.access-grid {
  display: grid;
  grid-template-columns: 1fr 360px;
  grid-gap: 20px;
  gap: 20px;
  align-items: start;
}

@media (max-width: 980px) {
  .access-grid {
    grid-template-columns: 1fr;
  }
}

.access-groups {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

.access-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.access-card.dim {
  opacity: 0.86;
}

.access-card-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px 16px;
}

.access-tico {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--panel2);
  color: var(--muted);
}

.access-tico svg {
  width: 18px;
  height: 18px;
}

.access-tico.agent {
  background: var(--purple-soft);
  color: var(--purple);
}

.access-tico.squad {
  background: var(--blue-soft);
  color: var(--blue);
}

.access-tico.workflow {
  background: var(--teal-soft);
  color: var(--teal);
}

.access-tico.overview {
  background: var(--green-soft);
  color: var(--green);
}

.access-tico.studio {
  background: var(--purple-soft);
  color: var(--purple);
}

.access-tico.tools {
  background: var(--amber-soft);
  color: var(--amber);
}

.access-tico.knowledge {
  background: var(--red-soft);
  color: var(--red);
}

.access-tico.executions {
  background: var(--blue-soft);
  color: var(--blue);
}

.access-tico.analytics {
  background: var(--teal-soft);
  color: var(--teal);
}

.access-card-head .tt {
  font-weight: 800;
  font-size: 15px;
}

.access-card-head .st {
  color: var(--muted2);
  font-size: 12px;
  margin-top: 1px;
}

.access-card-head .right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 12px;
}

.access-allpill {
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 8px;
}

.access-rows {
  border-top: 1px solid var(--border);
  padding: 6px;
}

.access-rows-bulk {
  display: flex;
  justify-content: flex-end;
  padding: 4px 8px 6px;
}

.access-linkbtn {
  border: none;
  background: none;
  font: inherit;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--blue);
  cursor: pointer;
  padding: 2px 4px;
}

.access-linkbtn:hover {
  text-decoration: underline;
}

.access-linkbtn:disabled {
  color: var(--muted2);
  cursor: default;
  text-decoration: none;
}

.access-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 10px;
  border-radius: 10px;
  cursor: pointer;
  width: 100%;
  border: none;
  background: none;
  font: inherit;
  text-align: left;
}

.access-item:hover {
  background: var(--panel2);
}

.access-item.on {
  background: var(--blue-soft);
}

.access-item .iav {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: var(--panel2);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 11px;
  color: var(--muted);
  flex-shrink: 0;
}

.access-item.on .iav {
  background: #fff;
  border-color: #cfe0ff;
  color: var(--blue);
}

.access-item .iname {
  font-weight: 700;
  font-size: 13px;
}

.access-item .isub {
  color: var(--muted2);
  font-size: 11px;
  font-family: ui-monospace, Menlo, monospace;
}

.access-item .right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
}

.access-lockchip {
  font-size: 10px;
  font-weight: 800;
  color: var(--muted);
  background: #eef1f6;
  padding: 3px 8px;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.access-extrachip {
  font-size: 10px;
  font-weight: 800;
  color: var(--teal);
  background: var(--teal-soft);
  padding: 3px 8px;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

/* An explicit per-user denial that overrides an inherited role grant — see
   the "user preference beats role" override in settings/access/page.tsx. */
.access-denychip {
  font-size: 10px;
  font-weight: 800;
  color: var(--red);
  background: var(--red-soft);
  padding: 3px 8px;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.access-hiddenbar {
  padding: 12px 16px;
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  background: repeating-linear-gradient(
    45deg,
    #fafbfd,
    #fafbfd 8px,
    #f4f6fa 8px,
    #f4f6fa 16px
  );
}

.access-hiddenbar b {
  color: var(--text);
}

/* Per-resource-type create/edit/delete/run permissions — a role-level
   concept, distinct from the visibility item picker below it in the same
   card (shown above the item list so "what this role can do" reads before
   "which items are visible"). */
.access-perms {
  padding: 12px 16px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  background: var(--panel2);
}

.access-perms-label {
  font-size: 11px;
  font-weight: 800;
  color: var(--muted2);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.access-perms-row {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

.access-perm-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--muted);
  font-weight: 650;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 7px 13px 7px 10px;
  transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.access-perm-check:hover {
  border-color: var(--muted2);
}

.access-perm-check.on {
  background: var(--blue-soft);
  border-color: var(--blue);
  color: var(--blue);
}

/* Custom check box (not the browser default) so the checked state can match
   the app's blue accent and the checkmark render consistently across
   browsers. */
.access-perm-check input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  position: relative;
  width: 16px;
  height: 16px;
  margin: 0;
  flex: none;
  border-radius: 5px;
  border: 1.5px solid var(--border);
  background: #fff;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.access-perm-check:hover input[type="checkbox"] {
  border-color: var(--muted2);
}

.access-perm-check input[type="checkbox"]:checked {
  background: var(--blue);
  border-color: var(--blue);
}

.access-perm-check input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 4.5px;
  top: 1.5px;
  width: 4px;
  height: 8px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(40deg);
}

.access-perm-check input[type="checkbox"]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--blue-soft);
}

.access-perm-check input[type="checkbox"]:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.access-perm-check:has(input:disabled) {
  cursor: not-allowed;
}

.access-perms-hint {
  font-size: 12px;
  color: var(--muted);
}

/* live preview */
.access-preview {
  position: -webkit-sticky;
  position: sticky;
  top: 20px;
  min-width: 0;
}

.access-pv-title {
  font-size: 11px;
  font-weight: 800;
  color: var(--muted2);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin: 0 0 10px 2px;
}

.access-device {
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--shadow);
  background: var(--panel);
}

.access-device .bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 11px 14px;
  background: var(--panel2);
  border-bottom: 1px solid var(--border);
}

.access-device .bar .d {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #e0e5ee;
}

.access-device .bar .who {
  margin-left: auto;
  font-size: 11px;
  font-weight: 800;
  color: var(--teal);
  background: var(--teal-soft);
  padding: 3px 10px;
  border-radius: 20px;
}

.access-mininav {
  padding: 12px;
}

.access-mbrand {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px 12px;
}

.access-mbrand-logo {
  height: 20px;
  width: auto;
  display: block;
}

.access-mitem {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 9px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 12px;
  color: var(--text);
}

.access-mitem .cnt {
  margin-left: auto;
  font-size: 10px;
  font-weight: 800;
  background: var(--blue-soft);
  color: var(--blue);
  padding: 1px 8px;
  border-radius: 20px;
}

.access-mitem.hid {
  color: var(--muted2);
  opacity: 0.55;
}

.access-mitem.hid .tagx {
  margin-left: auto;
  font-size: 10px;
  font-weight: 700;
}

/* overrides list */
.access-overrides {
  margin-top: 14px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.access-overrides .oh {
  padding: 12px 15px;
  font-weight: 800;
  font-size: 12.5px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 8px;
}

.access-ovrow {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 15px;
  width: 100%;
  border: none;
  background: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.access-ovrow:hover {
  background: var(--panel2);
}

.access-ovrow + .access-ovrow {
  border-top: 1px solid var(--border);
}

.access-ovrow .cav {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--teal-soft);
  color: var(--teal);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 11px;
  flex-shrink: 0;
}

.access-ovrow .nm {
  font-weight: 700;
  font-size: 12.5px;
}

.access-ovrow .rl {
  color: var(--muted2);
  font-size: 11px;
}

.access-ovrow .delta {
  margin-left: auto;
  font-size: 11px;
  font-weight: 800;
  color: var(--teal);
  background: var(--teal-soft);
  padding: 3px 9px;
  border-radius: 20px;
  white-space: nowrap;
}

.access-userlist {
  padding: 6px;
  max-height: 320px;
  overflow: auto;
}

.access-search {
  width: 100%;
  border: none;
  border-bottom: 1px solid var(--border);
  padding: 10px 12px;
  font: inherit;
  font-size: 12.5px;
  background: none;
  color: var(--text);
}

.access-search:focus {
  outline: none;
}

/* --- Tools / Composio toolkit catalog ------------------------------------ */
.toolkit-section {
  margin-bottom: 28px;
}

.toolkit-section-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.toolkit-section-head h2 {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text);
}

.toolkit-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: 0 0 auto;
}

.toolkit-dot.connected {
  background: var(--green);
  box-shadow: 0 0 0 3px var(--green-soft);
}

.toolkit-dot.available {
  background: var(--muted2);
}

.toolkit-count {
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  background: var(--panel2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 2px 8px;
}

.toolkit-rule {
  flex: 1 1;
  height: 1px;
  background: var(--border);
}

.toolkit-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  grid-gap: 14px;
  gap: 14px;
}

.toolkit-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
  padding: 16px;
  min-height: 168px;
}

.toolkit-card.is-connected {
  border-color: color-mix(in srgb, var(--green) 55%, var(--border));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--green) 18%, transparent),
    var(--shadow-sm);
}

.toolkit-card.is-connected:has(.toolkit-status.pending) {
  border-color: color-mix(in srgb, var(--amber) 55%, var(--border));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--amber) 18%, transparent),
    var(--shadow-sm);
}

.toolkit-card-top {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.toolkit-logo {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  object-fit: contain;
  background: var(--panel2);
  border: 1px solid var(--border);
  flex: 0 0 auto;
}

.toolkit-logo.fallback {
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 800;
  color: var(--blue);
  background: var(--blue-soft);
}

.toolkit-title-wrap {
  flex: 1 1;
  min-width: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.toolkit-title {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.25;
  word-break: break-word;
}

.toolkit-status {
  flex: 0 0 auto;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #0f8a52;
  background: var(--green-soft);
  border-radius: 999px;
  padding: 4px 9px;
}

.toolkit-status.pending {
  color: #b45309;
  background: var(--amber-soft);
}

.toolkit-status.failed {
  color: #b91c3c;
  background: var(--red-soft);
}

.mcp-card-error {
  font-size: 12px;
  color: var(--red);
  background: var(--red-soft);
  border-radius: 8px;
  padding: 6px 10px;
  line-height: 1.4;
  word-break: break-word;
}

.mcp-readonly-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}

.mcp-copy-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.mcp-copy-row .dl-mono {
  flex: 1 1;
  min-width: 0;
  overflow-wrap: anywhere;
}

.toolkit-desc {
  flex: 1 1;
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.toolkit-meta {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.toolkit-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 8px;
  gap: 8px;
  margin-top: auto;
}

.toolkit-connect {
  width: 100%;
  margin-top: auto;
  background: var(--blue);
  color: #fff;
  border: none;
  font-weight: 700;
}

.toolkit-connect:hover {
  background: var(--blue-hover);
}

.tools-empty {
  padding: 8px 2px 4px;
}

/* Agent form — visible tool catalog picker */
.tool-picker {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tool-picker-list {
  max-height: 280px;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: var(--panel2);
  padding: 6px;
}

.tool-picker-empty {
  margin: 0;
  padding: 14px 10px;
  font-size: 12.5px;
  text-align: center;
}

.tool-picker-group + .tool-picker-group {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}

.tool-picker-group-label {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 4px 8px 6px;
}

.tool-picker-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
  border: none;
  background: transparent;
  text-align: left;
  font: inherit;
  padding: 8px 9px;
  border-radius: 8px;
  cursor: pointer;
  color: var(--text);
}

.tool-picker-item:hover {
  background: var(--panel);
}

.tool-picker-item.on {
  background: var(--blue-soft);
}

.tool-picker-check {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  margin-top: 1px;
  border-radius: 4px;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--blue);
  font-size: 11px;
  font-weight: 800;
  display: grid;
  place-items: center;
  line-height: 1;
}

.tool-picker-item.on .tool-picker-check {
  border-color: var(--blue);
  background: var(--blue);
  color: #fff;
}

.tool-picker-body {
  flex: 1 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.tool-picker-name {
  font-size: 12.5px;
  font-weight: 650;
  word-break: break-word;
}

.tool-picker-desc {
  font-size: 11.5px;
  color: var(--muted);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.tool-picker-slug {
  font-size: 10.5px;
  color: var(--muted2);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  word-break: break-all;
}

.tool-picker-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.tool-suggest {
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--muted);
  font: inherit;
  font-size: 11.5px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  cursor: pointer;
}

.tool-suggest:hover {
  color: var(--text);
  border-color: color-mix(in srgb, var(--blue) 40%, var(--border));
  background: var(--blue-soft);
}

/* --- Data Lake (RATIFAI layout, MedFlowAI light theme) ------------------- */
.dl-page {
  padding: 22px 26px 32px;
  max-width: 1280px;
}

.dl-head h1 {
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.4px;
}

.dl-head p {
  margin-top: 6px;
  font-size: 13px;
  color: var(--muted);
  max-width: 760px;
  line-height: 1.6;
}

.dl-kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 12px;
  gap: 12px;
  margin-top: 8px;
  margin-bottom: 18px;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--bg);
  padding-top: 10px;
  padding-bottom: 10px;
}

.dl-kpi {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
  box-shadow: var(--shadow-sm);
}

.dl-kpi .label {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.dl-kpi .val {
  margin-top: 6px;
  font-size: 26px;
  font-weight: 750;
  letter-spacing: -0.5px;
}

.dl-kpi.ok .val {
  color: var(--green);
}

.dl-kpi.warn .val {
  color: var(--amber);
}

.dl-kpi.bad .val {
  color: var(--red);
}

.dl-actions-bar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 12px;
}

.dl-catalog-meta {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 12px;
}

.dl-toolbar {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 10px;
}

.dl-search-wrap {
  position: relative;
  flex: 1 1;
  max-width: 420px;
}

.dl-search-wrap svg {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--muted);
}

.dl-search {
  width: 100%;
  padding: 8px 10px 8px 32px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel);
  font: inherit;
  font-size: 13px;
}

.dl-search:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px var(--blue-soft);
}

.dl-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 16px;
  align-items: center;
}

.dl-chip {
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--muted);
  font: inherit;
  font-size: 11.5px;
  font-weight: 600;
  padding: 5px 10px;
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.dl-chip.active {
  border-color: var(--teal);
  background: var(--teal-soft);
  color: var(--teal);
}

.dl-chip .count {
  font-size: 10px;
  opacity: 0.75;
}

.dl-chip-sep {
  width: 1px;
  align-self: stretch;
  background: var(--border);
  margin: 0 4px;
}

.dl-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  grid-gap: 14px;
  gap: 14px;
}

.dl-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-sm);
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.dl-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
  border-color: color-mix(in srgb, var(--teal) 35%, var(--border));
}

.dl-card.disabled {
  opacity: 0.7;
}

.dl-card-clickable {
  cursor: pointer;
}

.dl-card-clickable:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

.dl-detail-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}

.dl-detail-table th,
.dl-detail-table td {
  text-align: left;
  padding: 6px 10px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.dl-detail-table thead th {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  background: var(--panel);
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.dl-detail-table tbody tr:last-child td {
  border-bottom: none;
}

.dl-detail-table tbody tr:nth-child(even) {
  background: var(--panel2);
}

.dl-detail-table td.truncate {
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: default;
}

.dl-type-pill {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--panel2);
  color: var(--muted);
}

.dl-type-pill.numeric {
  background: var(--blue-soft);
  color: var(--blue);
}

.dl-type-pill.text {
  background: var(--teal-soft);
  color: var(--teal);
}

.dl-type-pill.datetime {
  background: var(--amber-soft);
  color: var(--amber);
}

.dl-type-pill.boolean {
  background: var(--green-soft);
  color: var(--green);
}

.dl-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 12px;
}

.dl-tab {
  padding: 8px 4px 10px;
  margin-right: 16px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--muted);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  margin-bottom: -1px;
}

.dl-tab:hover {
  color: var(--text);
}

.dl-tab.active {
  color: var(--text);
  border-bottom-color: var(--blue);
}

/* Analytics: KPI row is shared across the Usage/Audit trail tabs and stays
   pinned to the top of the scroll as the tab-specific content below it
   scrolls (e.g. a long audit trail). */
.analytics-kpi-sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 4;
  background: var(--bg);
  padding-top: 4px;
}

.dl-card-head {
  padding: 14px 16px 10px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.dl-avatar {
  width: 38px;
  height: 38px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
}

.dl-card-title {
  font-size: 15px;
  font-weight: 700;
}

.dl-card-meta {
  margin-top: 4px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.dl-badge {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--panel2);
  color: var(--muted);
}

/* Dead-letter failure-reason badge (Config error / System error / Expired /
   Budget cap). */
.dl-reason {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 4px;
  border: 1px solid var(--border);
  background: var(--panel2);
  color: var(--muted);
}
.dl-reason.red {
  color: #f87171;
  border-color: rgba(248, 113, 113, 0.35);
  background: rgba(248, 113, 113, 0.1);
}
.dl-reason.orange {
  color: #fb923c;
  border-color: rgba(251, 146, 60, 0.35);
  background: rgba(251, 146, 60, 0.1);
}
.dl-reason.amber {
  color: #fbbf24;
  border-color: rgba(251, 191, 36, 0.35);
  background: rgba(251, 191, 36, 0.1);
}
.dl-reason.gray {
  color: var(--muted);
}
.dl-reason.purple {
  color: #a78bfa;
  border-color: rgba(139, 92, 246, 0.35);
  background: rgba(139, 92, 246, 0.1);
}

.dl-badge.teal {
  background: var(--teal-soft);
  color: var(--teal);
}

.dl-badge.blue {
  background: var(--blue-soft);
  color: var(--blue);
}

.dl-badge.green {
  background: var(--green-soft);
  color: var(--green);
}

.dl-badge.amber {
  background: var(--amber-soft);
  color: var(--amber);
}

.dl-card-body {
  padding: 0 16px 12px;
  flex: 1 1;
}

.dl-card-body .desc {
  font-size: 12.5px;
  line-height: 1.5;
  margin-bottom: 8px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.dl-mono {
  font-size: 11px;
  color: var(--muted);
  word-break: break-all;
  line-height: 1.55;
}

.dl-card-foot {
  border-top: 1px solid var(--border);
  padding: 10px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.dl-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.dl-empty {
  background: var(--panel);
  border: 1px dashed var(--border);
  border-radius: 12px;
  padding: 40px;
  text-align: center;
  color: var(--muted);
}

.dl-empty h3 {
  color: var(--text);
  font-size: 15px;
  margin-bottom: 6px;
}

.dl-wizard-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: modal-fade 0.12s ease-out;
}

.dl-wizard {
  width: min(720px, 100%);
  max-height: min(88vh, 900px);
  overflow: auto;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow);
  padding: 20px 22px;
  animation: modal-pop 0.12s ease-out;
}

.dl-wizard-steps {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}

.dl-wizard-step {
  flex: 1 1;
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  padding-bottom: 8px;
  border-bottom: 2px solid var(--border);
}

.dl-wizard-step.active {
  color: var(--blue);
  border-bottom-color: var(--blue);
}

.dl-adapter-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 10px;
  gap: 10px;
}

.dl-adapter-opt {
  border: 1.5px solid var(--border);
  background: var(--panel2);
  border-radius: 10px;
  padding: 16px 12px;
  cursor: pointer;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.dl-adapter-opt.selected {
  border-color: var(--teal);
  background: var(--teal-soft);
}

.dl-adapter-opt .icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 13px;
}

.dl-wizard-form {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.dl-wizard-adapter-pill {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--panel2);
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-bottom: 8px;
}

.dl-wizard-hr {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 16px 0 10px;
}

.dl-wizard-hr span {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}

.dl-wizard-hr div {
  flex: 1 1;
  height: 1px;
  background: var(--border);
}

.dl-wizard-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.dl-wizard-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.dl-wizard-hint {
  font-size: 11px;
  color: var(--muted);
  line-height: 1.4;
}

.dl-graph-config {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

@media (max-width: 900px) {
  .dl-kpis {
    grid-template-columns: repeat(2, 1fr);
  }

  .dl-adapter-grid {
    grid-template-columns: 1fr;
  }
}

/* --- Workflow canvas builder (React Flow) --------------------------------
   Adapted from MedFlowAI_Mockup.html's .wf-head/.wf-body/.palette/.pal-item/
   .canvas/.node/.diamond/.inspector/.fld/.insp-sec chrome, fitted around React
   Flow's own pane/viewport/handle rendering (edges, panning, zoom, and the
   minimap are React Flow's own — no manual SVG line-drawing needed here). */
.wf-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  margin-bottom: 12px;
}

.wf-head-lbl {
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-bottom: 4px;
}

.wf-head-title {
  display: flex;
  align-items: center;
  gap: 10px;
}

.wf-name-input {
  border: 1px solid var(--border);
  background: var(--panel2);
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  padding: 9px 14px;
  border-radius: 8px;
  min-width: 420px;
  font-family: inherit;
}

.wf-name-input:hover {
  border-color: #c9d6f5;
}

.wf-name-input:focus {
  outline: none;
  background: var(--panel);
  border-color: var(--blue);
  box-shadow: 0 0 0 3px var(--blue-soft);
}

.wf-body {
  display: grid;
  grid-template-columns: 210px 1fr 300px;
  grid-gap: 12px;
  gap: 12px;
  height: calc(100vh - 190px);
  min-height: 540px;
  transition: grid-template-columns 0.15s ease;
}

.wf-body.palette-collapsed {
  grid-template-columns: 44px 1fr 300px;
}

.wf-body.inspector-collapsed {
  grid-template-columns: 210px 1fr 44px;
}

.wf-body.palette-collapsed.inspector-collapsed {
  grid-template-columns: 44px 1fr 44px;
}

@media (max-width: 1100px) {
  .wf-body {
    grid-template-columns: 180px 1fr 260px;
  }

  .wf-body.palette-collapsed {
    grid-template-columns: 44px 1fr 260px;
  }

  .wf-body.inspector-collapsed {
    grid-template-columns: 180px 1fr 44px;
  }

  .wf-body.palette-collapsed.inspector-collapsed {
    grid-template-columns: 44px 1fr 44px;
  }
}

/* collapse toggle, shared by the palette + inspector rails */
.wf-collapse-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 7px;
  border: 1px solid transparent;
  background: none;
  color: var(--muted);
  cursor: pointer;
  flex-shrink: 0;
}

.wf-collapse-btn:hover {
  background: var(--panel2);
  color: var(--text);
  border-color: var(--border);
}

.wf-collapse-btn svg {
  width: 15px;
  height: 15px;
}

/* palette */
.wf-palette {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
  padding: 16px 12px;
  overflow: auto;
}

.wf-palette.wf-rail-collapsed,
.wf-inspector.wf-rail-collapsed {
  padding: 12px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  overflow: visible;
}

/* icon-only rail shown in the node palette once it's collapsed — still
   draggable, so collapsing doesn't lose the ability to add nodes */
.wf-pal-rail-icons {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
}

.wf-pal-ic-rail {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: -webkit-grab;
  cursor: grab;
  flex-shrink: 0;
}

.wf-pal-ic-rail:active {
  cursor: -webkit-grabbing;
  cursor: grabbing;
}

.wf-pal-ic-rail svg {
  width: 15px;
  height: 15px;
}

/* the collapsed inspector rail is one clickable surface (see
   NodeConfigPanel.tsx) rather than just its tiny chevron button, so it never
   reads as a dead/blank strip */
.wf-inspector.wf-rail-collapsed {
  cursor: pointer;
}

.wf-inspector.wf-rail-collapsed:hover {
  background: var(--panel2);
}

.wf-inspector.wf-rail-collapsed:hover .wf-collapse-btn {
  color: var(--text);
}

.wf-inspector.wf-rail-collapsed:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: -2px;
}

.wf-rail-node-badge {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 14px;
  flex-shrink: 0;
}

.wf-rail-node-badge svg {
  width: 15px;
  height: 15px;
}

.wf-rail-node-badge-empty {
  background: var(--panel2);
  color: var(--muted2);
  border: 1px dashed var(--border);
}

.wf-palette-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 10px;
  padding: 0 4px;
}

.wf-palette-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--muted2);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 0 4px;
}

.wf-palette-head .wf-palette-title {
  margin-bottom: 0;
  padding: 0;
}

.wf-pal-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 9px;
  border: 1px solid var(--border);
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 500;
  cursor: -webkit-grab;
  cursor: grab;
  background: var(--panel);
  color: var(--text);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.wf-pal-item:hover {
  border-color: #c9d6f5;
  background: var(--blue-soft);
}

.wf-pal-item:active {
  cursor: -webkit-grabbing;
  cursor: grabbing;
}

.wf-pal-ic {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.wf-pal-ic svg {
  width: 15px;
  height: 15px;
}

/* canvas */
.wf-canvas {
  position: relative;
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  background-color: #fbfcfe;
}

/* Studio's embedded read-only preview (DraftWorkflowCard.tsx) renders
   WorkflowCanvas outside the full canvas builder's CSS-grid layout (where
   .wf-canvas is a grid item that stretches to its row's height for free via
   grid's default `align-items: stretch`). Here .wf-canvas is just a plain
   block child of a fixed-height wrapper div, and a block element's height
   never auto-inherits its ancestor's pixel height — .wf-canvas stayed at its
   auto (0) content height, so React Flow had no box to lay out into
   ("parent container needs a width and a height", error#004). Stretching it
   to 100% of the wrapper's explicit height fixes that without touching the
   builder's own layout (scoped to this one ancestor).  */
.wf-mini-canvas .wf-canvas {
  height: 100%;
}

.wf-canvas .react-flow__renderer,
.wf-canvas .react-flow__pane {
  background-color: #fbfcfe;
}

.wf-canvas .react-flow__controls {
  box-shadow: var(--shadow-sm);
  border-radius: 9px;
  overflow: hidden;
}

.wf-canvas .react-flow__controls-button {
  border: none;
  border-bottom: 1px solid var(--border);
  background: var(--panel);
}

.wf-canvas .react-flow__controls-button svg {
  fill: var(--muted);
}

.wf-canvas .react-flow__minimap {
  border-radius: 9px;
  box-shadow: var(--shadow-sm);
}

.wf-canvas .react-flow__edge-path {
  stroke: #c3cee2;
  stroke-width: 2;
}

.wf-canvas .react-flow__edge.selected .react-flow__edge-path {
  stroke: var(--blue);
}

/* nodes */
.wfnode {
  position: relative;
  width: 190px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 11px;
  padding: 11px 13px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 9px;
  cursor: pointer;
}

.wfnode-row {
  display: flex;
  align-items: center;
  gap: 11px;
}

.wfnode.selected {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px var(--blue-soft);
}

.wfnode-trigger {
  border-color: #cfe0ff;
}

.wfnode-condition {
  width: 172px;
}

.wfnode-ic {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.wfnode-ic svg {
  width: 16px;
  height: 16px;
}

.wfnode-txt {
  min-width: 0;
  flex: 1 1;
}

.wfnode-title {
  font-size: 13px;
  font-weight: 650;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wfnode-sub {
  font-size: 11px;
  color: var(--muted);
  margin-top: 1px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wfnode-handle.react-flow__handle {
  width: 9px;
  height: 9px;
  background: var(--panel);
  border: 2px solid var(--muted2);
}

.wfnode-handle-yes.react-flow__handle {
  border-color: var(--green);
}

.wfnode-handle-no.react-flow__handle {
  border-color: var(--red);
}

.wfnode-branch-lbl {
  position: absolute;
  bottom: -18px;
  font-size: 9.5px;
  font-weight: 700;
  pointer-events: none;
}

.wfnode-branch-lbl.yes {
  left: 24%;
  color: #0e7a4a;
}

.wfnode-branch-lbl.no {
  left: 60%;
  color: #c62a48;
}

/* live run-status decoration (WorkflowCanvasPage's run mode) — a real
   colored glow (blurred, saturated box-shadow), not just a ring, so the
   currently-active node reads clearly at a glance. */
.wfnode-run-running {
  border-color: var(--blue);
  box-shadow:
    0 0 0 2px var(--blue),
    0 0 14px 4px rgba(47, 107, 255, 0.55),
    0 0 28px 10px rgba(47, 107, 255, 0.28);
  animation: wfnode-glow-blue 1.3s ease-in-out infinite;
}

.wfnode-run-waiting_approval {
  border-color: var(--amber);
  box-shadow:
    0 0 0 2px var(--amber),
    0 0 14px 4px rgba(245, 165, 36, 0.6),
    0 0 28px 10px rgba(245, 165, 36, 0.3);
  animation: wfnode-glow-amber 1.1s ease-in-out infinite;
}

.wfnode-run-completed {
  border-color: var(--green);
  box-shadow: 0 0 0 2px var(--green), 0 0 10px 2px rgba(31, 191, 117, 0.35);
}

.wfnode-run-failed {
  border-color: var(--red);
  box-shadow:
    0 0 0 2px var(--red),
    0 0 14px 4px rgba(240, 72, 104, 0.55),
    0 0 24px 8px rgba(240, 72, 104, 0.25);
}

@keyframes wfnode-glow-blue {
  0%,
  100% {
    box-shadow:
      0 0 0 2px var(--blue),
      0 0 14px 4px rgba(47, 107, 255, 0.5),
      0 0 26px 8px rgba(47, 107, 255, 0.24);
  }
  50% {
    box-shadow:
      0 0 0 2px var(--blue),
      0 0 22px 8px rgba(47, 107, 255, 0.75),
      0 0 40px 16px rgba(47, 107, 255, 0.4);
  }
}

@keyframes wfnode-glow-amber {
  0%,
  100% {
    box-shadow:
      0 0 0 2px var(--amber),
      0 0 14px 4px rgba(245, 165, 36, 0.55),
      0 0 26px 8px rgba(245, 165, 36, 0.26);
  }
  50% {
    box-shadow:
      0 0 0 2px var(--amber),
      0 0 22px 8px rgba(245, 165, 36, 0.8),
      0 0 40px 16px rgba(245, 165, 36, 0.42);
  }
}

.wfnode-status-badge {
  position: absolute;
  top: -10px;
  right: -8px;
  font-size: 9.5px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--panel);
  box-shadow: var(--shadow-sm);
  pointer-events: none;
  white-space: nowrap;
}

.wfnode-status-running {
  color: var(--blue);
  border-color: var(--blue);
}

.wfnode-status-waiting_approval {
  color: #8a5a00;
  border-color: var(--amber);
  background: var(--amber-soft);
}

.wfnode-status-completed {
  color: var(--green);
  border-color: var(--green);
}

.wfnode-status-failed {
  color: var(--red);
  border-color: var(--red);
}

/* Approve/Deny directly on the parked node — decide right on the canvas
   instead of needing the run-bar strip or the Executions page. */
.wfnode-approve-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-top: 8px;
  border-top: 1px dashed rgba(245, 165, 36, 0.5);
  cursor: default;
}

.wfnode-approve-tool {
  font-size: 10px;
  font-weight: 650;
  color: #8a5a00;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1 1;
  min-width: 0;
}

.wfnode-approve-btn {
  font-size: 10.5px;
  font-weight: 700;
  padding: 4px 9px;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  flex-shrink: 0;
}

.wfnode-approve-btn:disabled {
  opacity: 0.6;
  cursor: default;
}

.wfnode-approve-btn.approve {
  background: var(--amber);
  color: #fff;
}

.wfnode-approve-btn.approve:hover:not(:disabled) {
  filter: brightness(1.06);
}

.wfnode-approve-btn.deny {
  background: transparent;
  border-color: var(--muted2);
  color: var(--muted);
}

.wfnode-approve-btn.deny:hover:not(:disabled) {
  border-color: var(--red);
  color: var(--red);
}

/* live-run edge glow: the connector(s) feeding into the node currently
   executing (or paused on approval) light up + flow, so the active path
   through the graph is obvious, not just the node itself. */
.wf-canvas .react-flow__edge.wf-edge-active .react-flow__edge-path {
  stroke: var(--blue);
  stroke-width: 3px;
  stroke-dasharray: 6 4;
  filter: drop-shadow(0 0 5px rgba(47, 107, 255, 0.9)) drop-shadow(0 0 12px rgba(47, 107, 255, 0.55));
  animation: wf-edge-dash 0.6s linear infinite, wf-edge-glow-blue 1.3s ease-in-out infinite;
}

.wf-canvas .react-flow__edge.wf-edge-approval .react-flow__edge-path {
  stroke: var(--amber);
  stroke-width: 3px;
  stroke-dasharray: 6 4;
  filter: drop-shadow(0 0 5px rgba(245, 165, 36, 0.95)) drop-shadow(0 0 12px rgba(245, 165, 36, 0.6));
  animation: wf-edge-dash 0.6s linear infinite, wf-edge-glow-amber 1.1s ease-in-out infinite;
}

.wf-canvas .react-flow__edge.wf-edge-done .react-flow__edge-path {
  stroke: var(--green);
  stroke-width: 2.5px;
}

.wf-canvas .react-flow__edge.wf-edge-failed .react-flow__edge-path {
  stroke: var(--red);
  stroke-width: 3px;
  filter: drop-shadow(0 0 5px rgba(220, 60, 60, 0.9)) drop-shadow(0 0 12px rgba(220, 60, 60, 0.55));
}

@keyframes wf-edge-dash {
  to {
    stroke-dashoffset: -20;
  }
}

@keyframes wf-edge-glow-blue {
  0%,
  100% {
    filter: drop-shadow(0 0 4px rgba(47, 107, 255, 0.7)) drop-shadow(0 0 9px rgba(47, 107, 255, 0.4));
  }
  50% {
    filter: drop-shadow(0 0 8px rgba(47, 107, 255, 1)) drop-shadow(0 0 18px rgba(47, 107, 255, 0.7));
  }
}

@keyframes wf-edge-glow-amber {
  0%,
  100% {
    filter: drop-shadow(0 0 4px rgba(245, 165, 36, 0.75)) drop-shadow(0 0 9px rgba(245, 165, 36, 0.45));
  }
  50% {
    filter: drop-shadow(0 0 8px rgba(245, 165, 36, 1)) drop-shadow(0 0 18px rgba(245, 165, 36, 0.75));
  }
}

/* in-canvas approval request panel (WorkflowCanvasPage run bar) — mirrors
   the run monitor page's approval card so a reviewer isn't forced to leave
   the builder to approve/deny a paused high-risk tool call. */
.wf-approval-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 8px 12px;
  border-radius: 9px;
  border: 1px solid var(--amber);
  background: var(--amber-soft);
  margin: 8px 0 12px;
}

.wf-approval-bar .wf-approval-text {
  font-size: 12.5px;
  color: #6b4a00;
  min-width: 0;
}

.wf-approval-bar .wf-approval-text b {
  font-weight: 700;
}

/* inspector */
.wf-inspector {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
  overflow: auto;
  display: flex;
  flex-direction: column;
}

.wf-inspector-empty {
  flex: 1 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  text-align: center;
}

.wf-inspector-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}

.wf-inspector-head-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}

.wf-inspector-body {
  padding: 16px;
  overflow: auto;
}

.wf-inspector-section {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.wf-inspector-section-t {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin: 0 0 8px;
}

.wf-picked-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--panel2);
}

.wf-picked-row .txt {
  flex: 1 1;
  min-width: 0;
}

.wf-picked-row .nm {
  font-size: 12.5px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wf-picked-row .sub {
  font-size: 11px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── In-app documentation (/docs) — Mintlify-style hub ───────────────── */
.docs-root {
  min-height: 100vh;
  background: #fafafa;
  color: var(--text);
}
.docs-top {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}
.docs-top-inner {
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: 1280px;
  margin: 0 auto;
  padding: 10px 20px;
}
.docs-top-brand {
  text-decoration: none;
  color: inherit;
  flex-shrink: 0;
}
.docs-top-search {
  position: relative;
  flex: 1 1;
  max-width: 420px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
  color: var(--muted);
}
.docs-top-search:focus-within {
  border-color: color-mix(in srgb, var(--blue) 45%, var(--border));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 16%, transparent);
}
.docs-top-search svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.docs-top-search input {
  flex: 1 1;
  border: none;
  outline: none;
  background: transparent;
  font: inherit;
  font-size: 13.5px;
  color: var(--text);
  min-width: 0;
}
.docs-top-search input::-webkit-search-cancel-button {
  -webkit-appearance: none;
}
.docs-top-search kbd {
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 5px;
  border: 1px solid var(--border);
  background: var(--panel2);
  color: var(--muted);
}
.docs-search-panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 30;
  max-height: min(360px, 60vh);
  overflow: auto;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.12);
}
.docs-search-empty {
  padding: 12px 10px;
  font-size: 13px;
  color: var(--muted);
}
.docs-search-hit {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 10px;
  border-radius: 8px;
  text-decoration: none;
  color: inherit;
}
.docs-search-hit:hover,
.docs-search-hit.active {
  background: var(--blue-soft);
}
.docs-search-hit-title {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
}
.docs-search-hit-group {
  font-size: 11.5px;
  color: var(--muted);
  white-space: nowrap;
}
.docs-top-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.docs-top-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 9px;
  border: 1px solid transparent;
  background: var(--blue);
  color: #fff;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
.docs-top-btn:hover {
  filter: brightness(1.05);
}
.docs-top-btn.ghost {
  background: #fff;
  color: var(--text);
  border-color: var(--border);
}
.docs-top-btn.ghost:hover {
  background: var(--panel2);
  filter: none;
}
.docs-tabs {
  display: flex;
  gap: 4px;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 20px;
  overflow-x: auto;
}
.docs-tab {
  padding: 10px 12px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--muted);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.docs-tab:hover {
  color: var(--text);
}
.docs-tab.active {
  color: var(--blue);
  border-bottom-color: var(--blue);
  font-weight: 600;
}
.docs-shell {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  max-width: 1280px;
  margin: 0 auto;
  min-height: calc(100vh - 100px);
}
.docs-side {
  border-right: 1px solid var(--border);
  background: transparent;
  padding: 20px 12px 32px;
  position: -webkit-sticky;
  position: sticky;
  top: 100px;
  height: calc(100vh - 100px);
  overflow: auto;
}
.docs-nav {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.docs-nav-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin: 0 0 6px 10px;
}
.docs-nav-link {
  display: block;
  padding: 7px 10px;
  border-radius: 8px;
  color: var(--text);
  text-decoration: none;
  font-size: 13.5px;
}
.docs-nav-link:hover {
  background: #fff;
}
.docs-nav-link.active {
  background: var(--blue-soft);
  color: var(--blue);
  font-weight: 600;
}
.docs-main {
  max-width: 760px;
  padding: 32px 40px 72px;
}
.docs-main.hub {
  max-width: 920px;
}
.docs-eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  color: var(--blue);
  margin-bottom: 8px;
  letter-spacing: 0.02em;
}
.docs-head h1 {
  margin: 0 0 8px;
  font-size: 32px;
  letter-spacing: -0.03em;
  line-height: 1.15;
}
.docs-lead {
  margin: 0 0 28px;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.55;
  max-width: 52ch;
}
.docs-body {
  font-size: 14.5px;
  line-height: 1.6;
}
.docs-body h2,
.docs-section-title {
  margin: 32px 0 14px;
  font-size: 18px;
  letter-spacing: -0.01em;
}
.docs-section-title {
  margin-top: 36px;
}
.docs-body p,
.docs-body ul,
.docs-body ol {
  margin: 0 0 14px;
}
.docs-body a:not(.docs-top-btn):not(.docs-card) {
  color: var(--blue);
}
.docs-body .docs-top-btn {
  color: #fff;
}
.docs-body .docs-top-btn.ghost {
  color: var(--text);
}
.docs-body code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 5px;
}
.docs-hero {
  margin: 0 0 8px;
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--blue) 18%, var(--border));
  background:
    radial-gradient(120% 80% at 0% 0%, color-mix(in srgb, var(--blue) 14%, transparent), transparent 55%),
    linear-gradient(180deg, #fff 0%, color-mix(in srgb, var(--blue) 6%, #fff) 100%);
  overflow: hidden;
}
.docs-hero-inner {
  padding: 28px 28px 26px;
}
.docs-hero-mark {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--blue), #60a5fa);
  color: #fff;
  margin-bottom: 14px;
}
.docs-hero-mark svg {
  width: 22px;
  height: 22px;
}
.docs-hero h2 {
  margin: 0 0 8px;
  font-size: 22px;
  letter-spacing: -0.02em;
}
.docs-hero p {
  margin: 0 0 18px;
  color: var(--muted);
  max-width: 54ch;
  font-size: 14.5px;
}
.docs-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.docs-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-gap: 12px;
  gap: 12px;
  margin: 0 0 8px;
}
.docs-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: #fff;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.docs-card:hover {
  border-color: color-mix(in srgb, var(--blue) 35%, var(--border));
  background: color-mix(in srgb, var(--blue) 4%, #fff);
}
.docs-card-title {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--text);
}
.docs-card-body {
  font-size: 13px;
  line-height: 1.45;
  color: var(--muted);
}
.docs-figure {
  margin: 16px 0 22px;
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
}
.docs-figure img {
  display: block;
  width: 100%;
  height: auto;
}
.docs-code {
  margin: 0 0 18px;
  padding: 14px 16px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: #0f172a;
  color: #e2e8f0;
  overflow: auto;
  font-size: 12.5px;
  line-height: 1.5;
}
.docs-code code {
  background: none;
  border: none;
  padding: 0;
  color: inherit;
  font-size: inherit;
}
.docs-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 18px;
  font-size: 13.5px;
  background: #fff;
}
.docs-table th,
.docs-table td {
  border: 1px solid var(--border);
  padding: 8px 10px;
  text-align: left;
}
.docs-table th {
  background: var(--panel2);
}
.docs-table tbody th {
  font-weight: 600;
  white-space: nowrap;
  vertical-align: top;
  width: 28%;
  background: color-mix(in srgb, var(--panel2) 55%, #fff);
}
@media (max-width: 960px) {
  .docs-cards {
    grid-template-columns: 1fr;
  }
  .docs-top-search kbd {
    display: none;
  }
}
@media (max-width: 860px) {
  .docs-shell {
    grid-template-columns: 1fr;
  }
  .docs-side {
    position: static;
    height: auto;
    border-right: none;
    border-bottom: 1px solid var(--border);
  }
  .docs-main {
    padding: 24px 18px 48px;
  }
  .docs-top-actions .docs-top-btn.ghost {
    display: none;
  }
}

/* --- Schedules page ------------------------------------------------------ */
.sched-form-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px;
}

.sched-form-row > .fld {
  margin-bottom: 0;
  min-width: 120px;
}

.sched-form-row > .fld.sched-form-grow {
  flex: 1 1 180px;
  min-width: 160px;
}

.sched-form-row > .fld > label,
.sched-form-row > .fld > span {
  display: block;
  font-size: 12px;
  font-weight: 650;
  color: var(--muted);
  margin-bottom: 6px;
}

.sched-form-action {
  display: flex;
  align-items: flex-end;
  padding-bottom: 1px;
}

.sched-list {
  overflow: hidden;
  padding: 0;
}

.sched-list-head,
.sched-list-row {
  display: grid;
  grid-template-columns: 90px minmax(140px, 1.4fr) minmax(160px, 1.3fr) 110px 70px 230px;
  grid-gap: 12px;
  gap: 12px;
  align-items: center;
  padding: 12px 16px;
}

.sched-list-head {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--panel) 70%, transparent);
}

.sched-list-row {
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}

.sched-list-row:last-child {
  border-bottom: none;
}

.sched-list-row:hover {
  background: color-mix(in srgb, var(--blue-soft) 35%, transparent);
}

.sched-list-name {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.sched-list-name a {
  font-weight: 650;
  color: var(--text);
  text-decoration: none;
}

.sched-list-name a:hover {
  color: var(--blue);
}

.sched-list-task {
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sched-list-when {
  font-size: 13px;
}

.sched-list-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}

@media (max-width: 860px) {
  .sched-list-head {
    display: none;
  }
  .sched-list-row {
    grid-template-columns: 1fr 1fr;
    gap: 8px 12px;
  }
  .sched-list-actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }
}