/*!*****************************************************************************************************************************************************************************************************************************************************************!*\
  !*** 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;
  background: linear-gradient(135deg, #2f6bff, #5aa0ff);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(47, 107, 255, 0.3);
  flex-shrink: 0;
}

.logo svg {
  width: 18px;
  height: 18px;
}

.brand-name {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.3px;
}

.brand-name b {
  color: var(--blue);
}

/* --- 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: 18px 0;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  height: 100vh;
  align-self: start;
}

.sidebar .brand {
  padding: 0 20px 18px;
}

.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 {
  height: 62px;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 26px;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
}

.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);
}

/* --- 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;
}

.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);
  }
}

.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;
}

/* Truncate a long option label with an ellipsis instead of wrapping/growing
   the button — matters once a caller pins a fixed width via the `style`
   prop (e.g. a table-cell select where every row must stay the same size
   regardless of which option's label is longest). */
.select-trigger span:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.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;
}

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

/* --- 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);
}

/* 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);
}

.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;
}

.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;
}

.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);
}

.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 {
  color: var(--muted);
  font-style: italic;
}

.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;
}

.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-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;
}

/* --- 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 {
  width: 22px;
  height: 22px;
  border-radius: 7px;
}

.access-mbrand .logo svg {
  width: 13px;
  height: 13px;
}

.access-mbrand b {
  font-size: 13px;
  font-weight: 800;
}

.access-mbrand b span {
  color: var(--blue);
}

.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: 18px 0;
}

.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-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);
}

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

.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;
}

.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-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 auto;
  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;
  }
}