/* ============================================================
   Agent Hub — Design System
   Adapted from Alfagomma Pricing Tool (pixel-exact match)
   ============================================================ */

/* --- Reset & Base ------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* Author display rules (e.g. .btn-secondary { display:inline-flex }) would
   otherwise override the UA's [hidden] { display:none }. */
[hidden] { display: none !important; }

html, body {
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  font-size: 14px;
  color: #1a1a2e;
  background: #fff;
  -webkit-font-smoothing: antialiased;
}

/* --- App Shell --------------------------------------------- */
.app {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.main {
  flex: 1;
  display: flex;
  overflow: hidden;
}

/* --- Header ------------------------------------------------ */
.header {
  display: flex;
  align-items: center;
  height: 64px;
  padding: 0 32px;
  background: #fff;
  border-bottom: 1px solid #e8e8e8;
  z-index: 10;
}

.header-logo img { height: 18px; }
.header-logo svg { display: block; }

/* --- Sidebar ----------------------------------------------- */
.sidebar {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  width: 200px;
  background: #fff;
  border-right: 1px solid #e8e8e8;
}

.sidebar nav {
  flex: 1;
  padding: 16px 0;
}

.sidebar nav a {
  display: block;
  padding: 10px 24px;
  font-size: 14px;
  color: #555;
  text-decoration: none;
  border-left: 3px solid transparent;
  cursor: pointer;
  transition: all 0.15s;
}

.sidebar nav a:hover {
  color: #333;
  background: #fafafa;
}

.sidebar nav a.active {
  color: #333;
  background: #f0f0f0;
  border-left-color: #1c6ce5;
  font-weight: 600;
}

.sidebar-section {
  margin-top: 8px;
}

.sidebar-section-label {
  color: #999;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 8px 24px;
}

/* Sidebar user footer */
.user-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid #f0f0f0;
}

.user-footer .avatar,
.avatar {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #e8e8e8;
  color: #888;
  font-size: 12px;
  font-weight: 600;
}

.user-footer .user-info {
  flex: 1;
  min-width: 0;
}

.user-name {
  font-size: 13px;
  font-weight: 600;
  color: #333;
}

.user-role {
  font-size: 11px;
  color: #999;
}

.btn-logout {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: #999;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.btn-logout:hover {
  background: #f0f0f0;
  color: #555;
}

/* --- Content ----------------------------------------------- */
.content {
  flex: 1;
  padding: 32px 40px;
  background: #fff;
  overflow: clip auto;
  scrollbar-gutter: stable;
}

.screen { display: none; }
.screen.active { display: block; }

/* --- Typography -------------------------------------------- */
.page-title {
  font-size: 28px;
  font-weight: 700;
  color: #1a1a2e;
  margin: 0 0 12px 0;
  line-height: 1.2;
}

/* Prominent badges that sit inline with the page title (status + version).
 * Larger than stat-pills; visually part of the title, not a caption. */
.title-badge {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  border-radius: 14px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: none;
  white-space: nowrap;
}

/* Standalone back-link (not inside a breadcrumb wrapper) */
.back-link {
  display: inline-block;
  color: #1c6ce5;
  text-decoration: none;
  font-size: 13px;
  margin-bottom: 16px;
}
.back-link:hover { text-decoration: underline; }

/* Detail-page header block: back link → title → pills */
.page-header {
  margin-bottom: 28px;
}

.page-subtitle {
  font-size: 14px;
  color: #888;
  margin-bottom: 24px;
}

.dashboard-greeting {
  font-size: 26px;
  font-weight: 700;
  color: #1a1a2e;
  margin-bottom: 4px;
}

.dashboard-subtext {
  font-size: 14px;
  color: #888;
  margin-bottom: 24px;
}

/* Section labels (reusable) */
.section-label {
  color: #999;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 12px;
}

/* --- Breadcrumb -------------------------------------------- */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  font-size: 13px;
}

.breadcrumb .back-link {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #333;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
}

.breadcrumb .back-link:hover { color: #000; }

.breadcrumb .separator { color: #ccc; }

.breadcrumb .current { color: #888; }

/* --- Buttons ----------------------------------------------- */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 24px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  background: #1c6ce5;
  border: none;
  border-radius: 24px;
  cursor: pointer;
  transition: background 0.15s;
}

.btn-primary:hover { background: #1557b8; }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 24px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  color: #333;
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 24px;
  cursor: pointer;
  transition: all 0.15s;
}

.btn-secondary:hover {
  background: #fafafa;
  border-color: #ccc;
}

.btn-secondary:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-secondary:disabled:hover { background: #fff; border-color: #e0e0e0; }

.btn-danger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 24px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: #d32f2f;
  background: #fff;
  border: 1px solid #d32f2f;
  border-radius: 24px;
  cursor: pointer;
  transition: background 0.15s;
}

.btn-danger:hover { background: #ffebee; }

.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 50%;
  color: #555;
  cursor: pointer;
  transition: all 0.15s;
}

.btn-icon:hover {
  background: #fafafa;
  border-color: #ccc;
}

/* --- Data Table -------------------------------------------- */
.data-table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
}

.data-table thead {
  background: #f1f0f3;
}

.data-table thead th {
  text-align: left;
  padding: 16px;
  font-size: 16px;
  font-weight: 700;
  color: #000;
  white-space: nowrap;
  border-bottom: 1px solid #000;
}

.data-table tbody td {
  padding: 16px;
  font-size: 14px;
  color: #454554;
  border-bottom: 1px solid #dedce4;
}

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

.data-table tbody tr:hover {
  background: #f8f8f8;
}

.data-table tbody tr.clickable {
  cursor: pointer;
}

.sortable {
  cursor: pointer;
  user-select: none;
}

.sortable:hover { color: #333; }

.sort-icon {
  color: #999;
  margin-left: 4px;
  font-size: 12px;
}

.sort-icon.active { color: #E51431; }

/* --- Cards ------------------------------------------------- */
.card {
  background: #fff;
  border: 1px solid #e8e8e8;
  border-radius: 12px;
}

/* --- KPI Grid & Cards -------------------------------------- */
/* --- Radio row (wizard option groups) ---------------------- */
.radio-row {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 14px;
  border: 1px solid #e8e8e8;
  border-radius: 10px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.radio-row:hover { border-color: #ccc; background: #fafafa; }
.radio-row input[type="radio"] {
  margin-top: 3px;
  flex-shrink: 0;
}
.radio-row:has(input[type="radio"]:checked) {
  border-color: #1c6ce5;
  background: #f4f8fd;
}

/* --- Property card (tool schema editor) -------------------- */
.prop-card {
  background: #fff;
  border: 1px solid #e8e8e8;
  border-radius: 10px;
  padding: 12px 16px;
  margin-bottom: 10px;
}
.prop-card-header {
  display: grid;
  grid-template-columns: 2fr 1fr auto auto;
  gap: 10px;
  align-items: center;
}
.prop-card-header .prop-name {
  font-family: monospace;
  font-weight: 500;
}
.prop-card-header .prop-required {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #555;
  white-space: nowrap;
}
.btn-icon-danger {
  background: transparent;
  border: none;
  color: #d32f2f;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
}
.btn-icon-danger:hover { background: #fee; }

/* --- Global loading bar (top of page) ----------------------- */
.global-loading-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: transparent;
  z-index: 9999;
  pointer-events: none;
  overflow: hidden;
}
.global-loading-bar::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 40%;
  background: linear-gradient(90deg, transparent, #1c6ce5 45%, #1c6ce5 55%, transparent);
  opacity: 0;
  transition: opacity 0.15s;
}
.global-loading-bar.active::before {
  opacity: 1;
  animation: global-loading-slide 1.2s linear infinite;
}
@keyframes global-loading-slide {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(350%); }
}

/* --- View-level spinner (inside a container) ----------------- */
.view-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 48px 20px;
  color: #888;
  min-height: 160px;
}
.view-loading-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid #e8e8e8;
  border-top-color: #1c6ce5;
  border-radius: 50%;
  animation: view-loading-spin 0.9s linear infinite;
}
.view-loading-text {
  font-size: 13px;
}
@keyframes view-loading-spin {
  to { transform: rotate(360deg); }
}

/* --- Dropdown Menu ----------------------------------------- */
.dropdown-wrapper { position: relative; }
.dropdown-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 200px;
  background: #fff;
  border: 1px solid #e8e8e8;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  padding: 4px;
  z-index: 100;
}
.dropdown-item {
  display: block;
  width: 100%;
  padding: 8px 12px;
  background: transparent;
  border: none;
  text-align: left;
  font-size: 14px;
  color: #1a1a2e;
  cursor: pointer;
  border-radius: 6px;
  font-family: inherit;
}
.dropdown-item:hover { background: #f5f5f5; }
.dropdown-item-danger { color: #d32f2f; }
.dropdown-item-danger:hover { background: #fee; }

/* --- Segmented Control (tab bar) ----------------------------
   THE one segmented style for the whole app — visually identical to
   .tab-group (the token chart's Last-90-Days controls). If you change one,
   change both. The old 28px bottom margin is gone: layout owns spacing,
   components don't. */
.segmented-control {
  display: inline-flex;
  background: #f0f0f0;
  border-radius: 9999px;
  padding: 3px;
  margin: 0;
  gap: 4px;
}

/* Detail-page layouts: the gap between the tab navigation and the pane
   content lives HERE — the segmented component carries no margins, so every
   layout that hosts one must own its spacing. Covers all project and agent
   panes at once (Overview KPIs, tables, config cards, sandbox, …). */
#project-tab-content,
#agent-tab-content {
  margin-top: 24px;
}

/* --- Data view toolbar: search + filters share the same 40px height --- */
.data-view-toolbar {
  align-items: center;
}
.data-view-toolbar .form-input,
.data-view-toolbar .form-select {
  height: 40px;
  padding: 0 14px;
  margin: 0;
}
.data-view-toolbar .segmented-control {
  margin: 0;
  align-items: center;
}

.segmented-btn {
  background: transparent;
  border: none;
  padding: 6px 18px;
  font-size: 13px;
  font-weight: 500;
  color: #666;
  cursor: pointer;
  border-radius: 9999px;
  transition: all 0.15s;
  font-family: inherit;
}

.segmented-btn:hover:not(.active) {
  color: #333;
}

.segmented-btn.active {
  background: #fff;
  color: #333;
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* --- Markdown viewer --------------------------------------- */
.md-viewer {
  background: #fff;
  border: 1px solid #e8e8e8;
  border-radius: 12px;
  padding: 24px 32px;
  line-height: 1.6;
  color: #1a1a2e;
}
.md-viewer h1, .md-viewer h2, .md-viewer h3 {
  margin-top: 24px;
  margin-bottom: 12px;
  color: #1a1a2e;
}
.md-viewer h1 { font-size: 22px; }
.md-viewer h2 { font-size: 18px; }
.md-viewer h3 { font-size: 16px; }
.md-viewer p { margin: 8px 0; }
.md-viewer ul, .md-viewer ol { padding-left: 24px; margin: 8px 0; }
.md-viewer li { margin: 4px 0; }
.md-viewer code {
  background: #f5f5f5;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 13px;
}
.md-viewer strong { font-weight: 600; }
/* Wide markdown content (tables, code blocks) scrolls inside its own box —
   the pane itself must never scroll horizontally. */
.md-viewer table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
  margin: 8px 0;
}
.md-viewer th, .md-viewer td {
  padding: 6px 10px;
  border-bottom: 1px solid #ececec;
  text-align: left;
  vertical-align: top;
}
.md-viewer pre { max-width: 100%; overflow-x: auto; }

/* Chat-bubble variant: markdown formatting without the card chrome */
.md-viewer--chat {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  font-size: 14px;
}
.md-viewer--chat h1, .md-viewer--chat h2, .md-viewer--chat h3 {
  margin-top: 12px;
  margin-bottom: 6px;
  font-size: 14px;
}
.md-viewer--chat p:first-child { margin-top: 0; }
.md-viewer--chat p:last-child { margin-bottom: 0; }

/* --- Details field list (label + value rows) --------------- */
.detail-list {
  background: #fff;
  border: 1px solid #e8e8e8;
  border-radius: 12px;
  padding: 8px 20px;
}
.detail-row {
  display: flex;
  padding: 12px 0;
  border-bottom: 1px solid #f0f0f0;
}
.detail-row:last-child { border-bottom: none; }
.detail-label {
  width: 200px;
  font-weight: 500;
  color: #555;
  flex-shrink: 0;
}
.detail-value {
  color: #1a1a2e;
  flex: 1;
}
.detail-value.empty { color: #999; }

.kpi-grid {
  display: grid;
  /* auto-fit (not auto-fill): empty tracks collapse, so the cards stretch
     to fill the full row width instead of leaving dead space right.
     minmax 190px = all six KPIs fit one row on a regular (~1280px) screen;
     narrower viewports wrap naturally. */
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
  margin-bottom: 24px;
}

.kpi-card {
  background: #fff;
  border: 1px solid #e8e8e8;
  border-radius: 12px;
  padding: 14px 16px;
}

.kpi-card.selectable {
  cursor: pointer;
  transition: all 0.15s;
}

.kpi-card.selectable:hover {
  border-color: #ccc;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.kpi-card.selectable.active {
  border-color: #1c6ce5;
  box-shadow: 0 0 0 1px #1c6ce5;
}

.kpi-label {
  color: #888;
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 8px;
}

.kpi-value {
  font-size: 24px;
  font-weight: 700;
  color: #1a1a2e;
}

/* --- Badge / Pill ------------------------------------------ */
.badge {
  display: inline-block;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 500;
  border-radius: 16px;
  background: transparent;
  border: 1px solid #e0e0e0;
  color: #666;
  /* A badge is one token — it never wraps; the table scrolls instead. */
  white-space: nowrap;
}

.badge.success {
  color: #069855;
  border-color: #069855;
}

.badge.error {
  color: #d32f2f;
  border-color: #d32f2f;
}

.badge.warning {
  color: #e65100;
  border-color: #e65100;
}

.badge.info {
  color: #1c6ce5;
  border-color: #1c6ce5;
}

.badge.filled {
  color: #fff;
}

.badge.filled.success { background: #069855; border-color: #069855; }
.badge.filled.error   { background: #d32f2f; border-color: #d32f2f; }
.badge.filled.warning { background: #e65100; border-color: #e65100; }
.badge.filled.info    { background: #1c6ce5; border-color: #1c6ce5; }

/* --- Pill Tabs (filter toggle) ----------------------------- */
.tab-group {
  display: inline-flex;
  gap: 4px;
  padding: 3px;
  background: #f0f0f0;
  border-radius: 9999px;
}

.tab-group .tab {
  padding: 6px 18px;
  font-size: 13px;
  font-weight: 500;
  color: #666;
  background: transparent;
  border: none;
  border-radius: 9999px;
  cursor: pointer;
  transition: all 0.15s;
}

.tab-group .tab.active {
  color: #333;
  background: #fff;
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* --- Filter Dropdown --------------------------------------- */
.filter-dropdown {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 16px;
  font-size: 13px;
  color: #555;
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 20px;
  cursor: pointer;
}

.filter-dropdown:hover { border-color: #ccc; }

.chevron {
  color: #999;
  font-size: 10px;
}

/* --- Multi-Select Dropdown --------------------------------- */
.multi-select {
  display: inline-block;
  position: relative;
}

.multi-select-trigger {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  box-sizing: border-box;
  padding: 0 16px;
  font-size: 13px;
  color: #555;
  white-space: nowrap;
  user-select: none;
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 20px;
  cursor: pointer;
}

.multi-select-trigger:hover { border-color: #ccc; }

.multi-select-trigger.has-filter { border-color: #1c6ce5; color: #1c6ce5; }

.multi-select-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 100;
  min-width: 220px;
  padding: 8px 0;
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Scroll only the options list, keep search + select-all pinned */
.multi-select-options {
  max-height: 260px;
  overflow-y: auto;
}

.multi-select-all {
  border-bottom: 1px solid #eee;
  padding-bottom: 8px;
  margin-bottom: 4px;
  font-weight: 600;
}

.multi-select.open .multi-select-dropdown { display: block; }

.multi-select-search {
  padding: 4px 12px 8px;
}

.multi-select-search input {
  width: 100%;
  padding: 6px 10px;
  font-size: 13px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  outline: none;
  box-sizing: border-box;
}

.multi-select-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  font-size: 13px;
  color: #333;
  cursor: pointer;
}

.multi-select-item:hover { background: #f5f5f5; }

.multi-select-item input[type="checkbox"] {
  accent-color: #1c6ce5;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

/* --- Form Elements ----------------------------------------- */
.form-group {
  margin-bottom: 16px;
}

.form-group.hidden { display: none; }

.form-label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 600;
  color: #333;
}

.form-input,
.form-select {
  width: 100%;
  padding: 10px 14px;
  font-family: inherit;
  font-size: 14px;
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  outline: none;
  box-sizing: border-box;
}

.form-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%23999' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
}

.form-input:focus,
.form-select:focus {
  border-color: #bbb;
}

.form-input.invalid,
.form-select.invalid {
  border-color: #d32f2f;
}

.form-error {
  display: none;
  margin-top: 4px;
  font-size: 12px;
  color: #d32f2f;
}

.form-error.visible { display: block; }

.form-hint {
  margin-top: 4px;
  font-size: 12px;
  color: #999;
}

.form-row {
  display: flex;
  gap: 16px;
}

/* --- Wizard Steps ----------------------------------------- */
.wizard-steps {
  display: flex;
  padding: 0 32px;
  border-bottom: 1px solid #f0f0f0;
}

.wizard-step-tab {
  flex: 1;
  text-align: center;
  padding: 12px 0;
  font-size: 13px;
  font-weight: 500;
  color: #999;
  border-bottom: 2px solid transparent;
  cursor: default;
  transition: color 0.15s, border-color 0.15s;
}

.wizard-step-tab.active {
  color: #1c6ce5;
  border-bottom-color: #1c6ce5;
  font-weight: 600;
}

.wizard-step-tab.done {
  color: #069855;
  border-bottom-color: #069855;
}

.step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #e8e8e8;
  color: #999;
  font-size: 11px;
  font-weight: 700;
  margin-right: 6px;
}

.wizard-step-tab.active .step-num {
  background: #1c6ce5;
  color: #fff;
}

.wizard-step-tab.done .step-num {
  background: #069855;
  color: #fff;
}

.wizard-step-panel {
  display: none;
}

.wizard-step-panel.active {
  display: block;
}

/* --- Toggle Switch ----------------------------------------- */
.toggle-switch {
  position: relative;
  flex-shrink: 0;
  width: 40px;
  height: 22px;
}

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

.toggle-track {
  position: absolute;
  inset: 0;
  background: #ccc;
  border-radius: 11px;
  cursor: pointer;
  transition: background 0.2s;
}

.toggle-track::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.2s;
}

.toggle-switch input:checked + .toggle-track {
  background: #1c6ce5;
}

.toggle-switch input:checked + .toggle-track::after {
  transform: translateX(18px);
}

/* --- Search Bar -------------------------------------------- */
.search-bar {
  position: relative;
  margin-bottom: 16px;
}

.search-bar .search-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: #999;
  display: flex;
}

.search-bar input {
  width: 100%;
  padding: 12px 16px 12px 40px;
  font-size: 14px;
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  outline: none;
}

.search-bar input:focus { border-color: #bbb; }

/* --- Toolbar Row ------------------------------------------- */
.toolbar-row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}

.toolbar-row .search-bar {
  flex: 1;
  margin-bottom: 0;
}

/* --- Wizard ------------------------------------------------ */
.wizard-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(0, 0, 0, 0.35);
  justify-content: center;
  align-items: center;
}

.wizard-overlay.active { display: flex; }

.wizard {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 740px;
  max-height: 88vh;
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.15);
}

.wizard.narrow  { width: 520px; }
.wizard.extra-narrow { width: 480px; }

.wizard-close {
  position: absolute;
  top: 16px;
  right: 20px;
  z-index: 2;
  background: transparent;
  border: none;
  font-size: 24px;
  color: #999;
  cursor: pointer;
}

.wizard-close:hover { color: #333; }

.wizard-header {
  padding: 24px 32px 0;
}

.wizard-header h2 {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 16px;
}

.wizard-progress-wrap { margin-bottom: 8px; }

.wizard-progress {
  height: 4px;
  background: #e8e8e8;
  border-radius: 2px;
  overflow: hidden;
}

.wizard-progress-bar {
  height: 100%;
  background: #1c6ce5;
  border-radius: 2px;
  transition: width 0.3s;
}

.wizard-step-label {
  margin-top: 6px;
  margin-bottom: 4px;
  font-size: 13px;
  color: #999;
}

.wizard-subtitle {
  font-size: 14px;
  color: #555;
  margin-bottom: 0;
}

.wizard-body {
  flex: 1;
  padding: 28px 32px;
  overflow-y: auto;
}

.wizard-step-panel { display: none; }
.wizard-step-panel.active { display: block; }

.wizard-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 32px;
  border-top: 1px solid #f0f0f0;
}

/* --- Modal ------------------------------------------------- */
.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(0, 0, 0, 0.3);
  justify-content: center;
  align-items: center;
}

.modal-overlay.active { display: flex; }

.modal {
  position: relative;
  width: 90%;
  max-width: 480px;
  max-height: 90vh;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
  display: flex;
  flex-direction: column;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px 0;
  flex-shrink: 0;
}

.modal-header h2,
.modal-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: #1a1a2e;
}

.modal-close {
  background: transparent;
  border: none;
  font-size: 22px;
  color: #999;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
}

.modal-close:hover { color: #333; }

/* Keeps the minimise control tied to the close button. The header is
   space-between, so an ungrouped third child lands in the middle of the bar
   and reads as a stray glyph. */
.modal-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Park-in-background control. A labelled pill rather than a bare glyph: the
   action is unfamiliar, so it has to say what it does. Quiet by default so it
   never competes with the modal's real actions. */
.modal-minimise {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 1px solid #e0e0e0;
  border-radius: 16px;
  font-size: 12px;
  font-weight: 500;
  color: #666;
  cursor: pointer;
  padding: 5px 12px;
  line-height: 1.2;
  white-space: nowrap;
}

.modal-minimise:hover {
  color: #1c6ce5;
  border-color: #1c6ce5;
  background: #f4f8ff;
}

.modal-minimise-icon {
  font-size: 13px;
  line-height: 1;
}

.modal-body {
  padding: 20px 24px;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 16px 24px;
  border-top: 1px solid #f0f0f0;
  flex-shrink: 0;
}

.modal-error {
  display: none;
  padding: 10px 14px;
  margin-bottom: 16px;
  font-size: 13px;
  color: #d32f2f;
  background: #fef2f2;
  border-radius: 8px;
}

.modal-error.visible { display: block; }

.modal-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 20px 24px;
  border-top: 1px solid #f0f0f0;
}

.modal-loading-spinner {
  width: 20px;
  height: 20px;
  border: 2px solid #e0e0e0;
  border-top-color: #333;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

.modal-loading-text {
  font-size: 13px;
  color: #666;
}

.selected-user-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: #f8f9fa;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
}

.selected-user-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.btn-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: #999;
  font-size: 18px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.btn-icon:hover { background: #e8e8e8; color: #333; }


/* --- Confirm Modal ----------------------------------------- */
.confirm-modal {
  width: 440px;
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.15);
}

.confirm-modal .confirm-body {
  padding: 28px 28px 20px;
}

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

.confirm-modal .confirm-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 16px 28px;
  border-top: 1px solid #f0f0f0;
}

/* --- Toast ------------------------------------------------- */
.toast-notification {
  display: none;
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translate(-50%);
  z-index: 200;
  padding: 12px 24px;
  font-size: 14px;
  color: #fff;
  background: #069855;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.toast-notification.show {
  display: block;
  animation: toastIn 0.3s;
}

.toast-notification.error { background: #d32f2f; }
.toast-notification.info  { background: #1c6ce5; }

@keyframes toastIn {
  0%   { opacity: 0; transform: translate(-50%) translateY(20px); }
  100% { opacity: 1; transform: translate(-50%) translateY(0); }
}

/* --- Type Cards (wizard selection) ------------------------- */
.type-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 8px;
}

.type-card {
  padding: 20px;
  border: 2px solid #e0e0e0;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.15s;
}

.type-card:hover { border-color: #ccc; }

.type-card.selected {
  border-color: #1c6ce5;
  box-shadow: 0 0 0 1px #1c6ce5;
}

.type-card-title {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 4px;
}

.type-card-desc {
  font-size: 13px;
  color: #888;
}

/* --- Status Radio Group ------------------------------------ */
.status-radio-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.status-radio {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid #e8e8e8;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s;
}

/* --- Manage Section ---------------------------------------- */
.manage-section {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid #eee;
}

.manage-section-title {
  color: #999;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 12px;
}

/* --- Danger Zone ------------------------------------------- */
.danger-zone {
  margin-top: 20px;
  padding: 16px;
  background: #fff5f5;
  border: 1px solid #ffcdd2;
  border-radius: 8px;
}

.danger-zone .btn-danger {
  padding: 8px 16px;
  font-size: 13px;
  border-radius: 8px;
  border: 1px solid #ffcdd2;
}

.danger-zone .btn-danger:hover { background: #ffebee; }

.danger-zone-hint {
  margin-top: 8px;
  font-size: 12px;
  color: #999;
}

/* --- Source Banner ------------------------------------------ */
.source-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  margin-bottom: 20px;
  background: #f0f4ff;
  border: 1px solid #d0ddf7;
  border-radius: 10px;
}

.source-banner .icon { font-size: 20px; }

/* --- Drop Zone --------------------------------------------- */
.drop-zone {
  padding: 32px;
  text-align: center;
  color: #888;
  border: 2px dashed #d0d0d0;
  border-radius: 12px;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
}

.drop-zone:hover,
.drop-zone.dragover {
  color: #1c6ce5;
  border-color: #1c6ce5;
}

/* --- Import Summary ---------------------------------------- */
.import-summary {
  display: flex;
  gap: 16px;
  margin-bottom: 12px;
  font-size: 13px;
}

/* --- Autocomplete Dropdown --------------------------------- */
.autocomplete-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 50;
  max-height: 200px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.autocomplete-item {
  padding: 10px 14px;
  font-size: 13px;
  cursor: pointer;
}

.autocomplete-item:hover { background: #f5f5f5; }

/* --- Loading / Empty State --------------------------------- */
.loading-state {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  padding: 48px 20px;
  font-size: 14px;
  color: #999;
}

.spinner {
  display: inline-block;
  width: 28px;
  height: 28px;
  border: 3px solid #e0e0e0;
  border-top-color: #1c6ce5;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}

.spinner--sm {
  width: 18px;
  height: 18px;
  border-width: 2px;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.empty-state {
  text-align: center;
  padding: 60px 20px;
  font-size: 14px;
  color: #888;
}

/* --- Pending Bar ------------------------------------------- */
.pending-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  bottom: 0;
  left: 240px;
  right: 0;
  z-index: 150;
  padding: 12px 24px;
  color: #fff;
  background: #1a1a2e;
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.15);
  transform: translateY(100%);
  transition: transform 0.25s;
}

.pending-bar.visible { transform: translateY(0); }

.pending-bar .summary {
  font-size: 13px;
  font-weight: 500;
}

/* --- Pagination -------------------------------------------- */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  margin-top: 20px;
}

.pagination button {
  padding: 6px 12px;
  font-size: 13px;
  font-family: inherit;
  color: #555;
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  cursor: pointer;
}

.pagination button.active {
  color: #fff;
  background: #1c6ce5;
  border-color: #1c6ce5;
}

.pagination button:hover:not(.active) {
  background: #fafafa;
}

/* --- Responsive -------------------------------------------- */
@media (max-width: 900px) {
  .main {
    flex-direction: column;
  }

  .sidebar {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid #e8e8e8;
  }

  .sidebar nav {
    display: flex;
    overflow-x: auto;
    padding: 0;
  }

  .sidebar nav a {
    border-left: none;
    border-bottom: 3px solid transparent;
    white-space: nowrap;
  }

  .sidebar nav a.active {
    border-left-color: transparent;
    border-bottom-color: #1c6ce5;
  }

  .sidebar-section { margin-top: 0; }

  .user-footer { display: none; }

  .content {
    padding: 24px 16px;
  }

  .pending-bar {
    left: 0;
  }
}

/* --- Chat Component --------------------------------------- */
.chat-container {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.chat-messages {
  flex: 1;
  overflow-y: auto;
  /* The chat column NEVER scrolls horizontally — long content wraps. */
  overflow-x: hidden;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.chat-bubble {
  max-width: 80%;
  /* Long unbroken runs (code spans, URLs, field names) wrap instead of
     pushing the bubble past the pane. */
  overflow-wrap: anywhere;
  padding: 10px 14px;
  border-radius: 12px;
  font-size: 14px;
  line-height: 1.5;
  white-space: pre-wrap;
}

.chat-bubble.user {
  align-self: flex-end;
  background: #e3f2fd;
  color: #333;
  border-bottom-right-radius: 4px;
}

.chat-bubble.assistant {
  align-self: flex-start;
  background: #f5f5f5;
  color: #333;
  border-bottom-left-radius: 4px;
}

.chat-input-bar {
  display: flex;
  padding: 12px;
  border-top: 1px solid #e0e0e0;
}

/* Two-row composer bubble: the message row grows with content, the controls
   row underneath holds new-conversation, effort and send. */
.chat-composer {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  border: 1px solid #d5d9e0;
  border-radius: 14px;
  background: #fff;
  padding: 8px 10px;
}
.chat-composer:focus-within { border-color: #1c6ce5; }
.chat-composer-input {
  border: none;
  outline: none;
  background: transparent;
  resize: none;
  overflow-y: auto;
  max-height: 140px;
  line-height: 1.45;
  width: 100%;
  font-size: 14px;
  font-family: inherit;
  padding: 4px 6px;
}
.chat-composer-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}
.chat-composer-controls .chat-send {
  border-radius: 18px;
  padding: 7px 14px;
}
.chat-composer-controls .chat-send:disabled {
  opacity: 0.45;
  cursor: default;
}
.composer-chip {
  border: 1px solid #d5d9e0;
  background: #fff;
  color: #666;
  border-radius: 18px;
  font-size: 12px;
  padding: 8px 12px;
  cursor: pointer;
  white-space: nowrap;
}
.composer-chip:hover { background: #f7f8fa; }

/* --- App header: row 1 of the two-row shell ---------------------------- */
.app-header {
  position: sticky;
  top: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 12px;
  height: 56px;
  padding: 0 16px;
  background: #fff;
  border-bottom: 1px solid #e0e0e0;
}
.app-header .ks-header {
  padding-top: 0;
  padding-bottom: 0;
  align-self: stretch;
}
.app-header .org-logo {
  height: 32px;
  max-width: 260px;
  object-fit: contain;
  object-position: left center;
}
/* Pre-paint: when the brand hint says an org logo exists, the default
   lockup never flashes — hidden before the API answers. */
html[data-org-logo] .app-header :is(.ks-header__mark, .ks-header__gap, .ks-header__rule) {
  display: none;
}
html[data-org-logo] .app-header .org-logo { margin-right: 4px; }
.ks-shell { min-height: calc(100vh - 56px); }
.ks-shell__side {
  position: sticky;
  top: 56px;
  height: calc(100vh - 56px);
  overflow-y: auto;
}

/* --- Effort picker (in the composer, like a model picker) ------------- */
.effort-picker { position: relative; flex-shrink: 0; }
.effort-trigger {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 1px solid #d5d9e0;
  background: #fff;
  color: #555;
  border-radius: 18px;
  font-size: 12px;
  padding: 8px 12px;
  cursor: pointer;
  white-space: nowrap;
}
.effort-trigger:hover { background: #f7f8fa; }
.effort-trigger .chevron { color: #999; font-size: 10px; }
.effort-menu {
  position: absolute;
  bottom: calc(100% + 8px);
  right: 0;
  width: 320px;
  background: #fff;
  border: 1px solid #e3e6ea;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(20, 24, 40, 0.14);
  padding: 6px;
  z-index: 40;
}
.effort-option {
  display: block;
  width: 100%;
  text-align: left;
  border: none;
  background: none;
  border-radius: 8px;
  padding: 8px 12px;
  cursor: pointer;
}
.effort-option:hover { background: #f4f6f8; }
.effort-option .eo-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13.5px;
  font-weight: 500;
  color: #1a1a2e;
}
.effort-option .eo-check { color: #2563eb; font-size: 13px; }
.effort-option .eo-desc {
  display: block;
  font-size: 12px;
  color: #888;
  margin-top: 1px;
}

.chat-input-bar button {
  flex-shrink: 0;
}

/* EU AI Act Art. 50 transparency notice — rendered once inside the shared
   chat component so every AI chat surface carries the disclosure. */
.chat-ai-notice {
  padding: 6px 12px 10px;
  font-size: 11px;
  line-height: 1.4;
  color: #999;
  text-align: center;
}

.chat-typing {
  align-self: flex-start;
  padding: 10px 14px;
  color: #999;
  font-size: 13px;
}

/* Dots trail the activity label (first line) — never a line of their own,
   even when the sub-step checklist renders below. Shared by every surface
   rendering ui/run-progress.js: the chat bubble and the sandbox result pane. */
.chat-typing-label::after,
.run-progress-dots::after {
  content: '';
  animation: chatDots 1.2s steps(4, end) infinite;
}

@keyframes chatDots {
  0%   { content: ''; }
  25%  { content: '.'; }
  50%  { content: '..'; }
  75%  { content: '...'; }
}

/* --- Refinement Split Layout ------------------------------ */
.refinement-split {
  display: flex;
  gap: 1px;
  background: #e0e0e0;
  /* Grows with the viewport instead of sitting at a fixed 400px slab; the
     wizard step has tabs and a footer to leave room for, hence the lower
     ceiling than the modal variant. */
  height: clamp(400px, 52vh, 620px);
  border-radius: 8px;
  overflow: hidden;
}

/* Modal-sized variant — Refine Scope / Prompt / Skills, opened post-creation.
   FILLS the modal body rather than declaring its own viewport-relative height:
   a fixed calc knows nothing about the header, footer and any cards stacked
   below it, so it either overflowed the body on short screens or left space
   unused on tall ones. Clamped at both ends so it is never a cramped box on a
   laptop and never taller than the space it actually has. */
.refinement-split.refinement-split--modal {
  flex: 1 1 auto;
  height: auto;
  min-height: clamp(320px, 45vh, 520px);
  max-height: 100%;
}

/* Refinement modals are the densest dialogs on the platform — give them the
   extra sliver, and let the body lay its children out in a column so the split
   above can flex. */
/* height, not just max-height: the modal is otherwise sized by its content, so
   a flexing split collapses to its floor and the dialog shrinks instead of the
   panel filling the screen. */
.modal.refinement-modal {
  height: 92vh;
  max-height: 92vh;
}
.modal.refinement-modal .modal-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
/* The panel mounts into a host div, so the flex chain has to pass THROUGH it —
   otherwise the split has no flexible parent and falls back to its floor while
   the dialog stretches around it. */
.modal.refinement-modal .modal-body > *:has(.refinement-split--modal) {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* Cards below the split (tool / contract proposals) must cost nothing when
   they hold nothing — an empty div with a margin still eats the split's room. */
.modal.refinement-modal .modal-body > *:empty {
  display: none;
}

.refinement-chat {
  flex: 1;
  background: #fff;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.refinement-preview {
  flex: 1;
  background: #fafafa;
  padding: 20px;
  font-size: 14px;
  line-height: 1.6;
  min-width: 0;
  /* Two STACKED areas: the content scrolls in its own box, the pill strip
     sits below it as a separate region — content never scrolls behind it. */
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* The ONLY scroll region of the pane — vertical only; wide content
   (tables, code) scrolls inside its own element instead. */
.refinement-preview-content {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
}

/* Stretch chain: the main draft/diff block fills the pane down to the pill
   strip instead of ending mid-air. Panes are flex columns; whatever carries
   .pane-fill takes the remaining height. */
.refinement-preview-content > [id*="-pane-"] {
  display: flex;
  flex-direction: column;
  flex: 1 0 auto;
}
.pane-fill {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
}
.pane-fill > * { flex: 1 0 auto; }

/* Compact icon buttons for view toggles (the `{ }` idiom from run details):
   monospace glyph, dark when active. */
.view-icon-btn {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 4px 8px;
  font-size: 11.5px;
  cursor: pointer;
  color: #666;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  line-height: 1.2;
}
.view-icon-btn.active { background: #333; color: #fff; border-color: #333; }

/* A status STRIP, not floating chips: layer pills anchored left, token count
   as quiet text right, a top border separating it from the draft. Its own
   stacked area below the scroll box — never an overlay. */
.refinement-progress {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  margin-top: auto;
  background: #fafafa;
  border-top: 1px solid #ececec;
  padding: 9px 2px 3px;
  min-height: 22px;
  flex-shrink: 0;
}

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

.rp-label {
  flex: 0 0 110px;
  font-size: 11px;
  color: #8890a0;
}

.rp-pills {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.rp-pills > * { white-space: nowrap; }

.refinement-preview h2 {
  font-size: 16px;
  font-weight: 600;
  margin: 16px 0 8px;
  color: #333;
}

.refinement-preview h2:first-child {
  margin-top: 0;
}

.refinement-preview p {
  margin: 0 0 8px;
  color: #555;
}

.refinement-preview ul {
  margin: 0 0 8px;
  padding-left: 20px;
}

.refinement-preview li {
  margin-bottom: 4px;
  color: #555;
}

.refinement-empty {
  color: #bbb;
  font-style: italic;
  padding: 40px 20px;
  text-align: center;
}

/* --- Agent Suggestion Cards ------------------------------- */
.agent-cards {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.agent-card {
  display: flex;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  background: #fff;
  align-items: flex-start;
}

.agent-card input[type="checkbox"] {
  margin-top: 3px;
  flex-shrink: 0;
}

.agent-card-content {
  flex: 1;
  min-width: 0;
}

.agent-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 4px;
}

.agent-card-name {
  font-weight: 600;
  font-size: 14px;
  color: #333;
}

.agent-card-body {
  font-size: 13px;
  color: #666;
  line-height: 1.4;
}

.agent-card-reasoning {
  font-size: 12px;
  color: #999;
  margin-top: 4px;
  font-style: italic;
}

/* --- Department Pills ------------------------------------- */
.dept-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

/* Row wrapping stat pills + dept pills together */
.pill-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 0;
}

/* Stat pill — background counters with icon (agents / endpoints / tools / models) */
.stat-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
  background: #e8f0fb;
  color: #1c6ce5;
  border: 1px solid #d0e0f5;
}
.stat-pill-icon {
  display: inline-flex;
  align-items: center;
  color: #1c6ce5;
}

.dept-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
  background: #f0f0f0;
  color: #555;
}

.dept-pill .remove {
  cursor: pointer;
  font-size: 14px;
  color: #999;
  line-height: 1;
}

.dept-pill .remove:hover {
  color: #d32f2f;
}

/* Inline "+ Add" pill trigger for adding departments */
.dept-pill-add {
  cursor: pointer;
  background: transparent;
  border: 1px dashed #bbb;
  color: #666;
  padding: 3px 10px;
}
.dept-pill-add:hover {
  border-color: #1c6ce5;
  color: #1c6ce5;
}
.dept-pill-add .chevron {
  font-size: 10px;
  margin-left: 2px;
}
/* Inline dropdown for pill-based pickers (dept picker, project picker).
 * Uses own classes (not .multi-select) so the base absolute-position rules
 * don't clip inside modal overflow. Dropdown flows below the trigger and
 * the modal body scrolls to reveal it. */
.pill-add-wrap {
  display: inline-block;
  position: relative;
}
.pill-add-dropdown {
  display: none;
  margin-top: 6px;
  min-width: 220px;
  max-height: 240px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
.pill-add-wrap.open .pill-add-dropdown {
  display: block;
}
.pill-add-dropdown .multi-select-item {
  padding: 6px 12px;
  cursor: pointer;
}
.pill-add-dropdown .multi-select-item:hover {
  background: #f5f5f5;
}

/* --- Info Banner ------------------------------------------ */
.info-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: #e3f2fd;
  border: 1px solid #90caf9;
  border-radius: 8px;
  font-size: 13px;
  color: #1565c0;
  margin-bottom: 16px;
}

/* --- Skip Link -------------------------------------------- */
.skip-link {
  display: block;
  text-align: center;
  color: #999;
  font-size: 13px;
  cursor: pointer;
  padding: 8px;
  margin-top: 4px;
}

.skip-link:hover {
  color: #666;
}

/* Markdown viewers (prompt tab, knowledge notes): wrap everything, vertical
   scroll only — no horizontal scrollbar. */
.markdown-viewer {
  overflow-x: hidden;
  overflow-wrap: break-word;
}

.markdown-viewer pre {
  white-space: pre-wrap;
  word-break: break-word;
  overflow-x: hidden;
  max-width: 100%;
}

.markdown-viewer code {
  white-space: pre-wrap;
  word-break: break-word;
}

.markdown-viewer table {
  width: 100%;
  table-layout: fixed;
}

.markdown-viewer td,
.markdown-viewer th {
  word-break: break-word;
}

.markdown-viewer img {
  max-width: 100%;
}

/* Agent wizard prompt step: size with the viewport, not a fixed 400px. */
#wizard-agent .modal { max-height: 92vh; }
#aw-prompt-host .refinement-split {
  height: calc(92vh - 320px);
  min-height: 380px;
}
#aw-prompt-manual { min-height: calc(92vh - 340px) !important; }

/* Drag-resized tables switch to fixed layout — keep narrowed cells tidy
   instead of letting content spill across the next column. */
.data-table.cols-resizable td,
.data-table.cols-resizable th {
  overflow: hidden;
  text-overflow: ellipsis;
}


/* Form labels never wrap inside modal rows — the row gives the label its
   intrinsic width; inputs flex around it instead of squeezing it. */
.modal .form-group > .form-label { white-space: nowrap; }
.modal .form-group { min-width: 0; }

/* --- Themed single-select: native <select> replacement (ui/select.js).
   The native element stays in the DOM (hidden) as the source of truth;
   the facade reuses the .multi-select styling in both themes. ------------ */
.native-select-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  opacity: 0; pointer-events: none;
  margin: 0; padding: 0; border: 0;
}
.select-single { position: relative; display: inline-block; }
.select-single--block { display: block; width: 100%; }
.select-single--block .multi-select-trigger {
  display: flex; width: 100%; justify-content: space-between;
  align-items: center; box-sizing: border-box;
}
.select-single .multi-select-trigger.is-disabled { opacity: .55; cursor: not-allowed; }
.select-single .select-option { display: flex; gap: 8px; align-items: center; }
.select-single .select-option.is-selected { font-weight: 600; }
.select-single .select-option.is-disabled { opacity: .45; cursor: not-allowed; }
.select-single .select-option-tick { width: 14px; flex-shrink: 0; font-size: 11px; }

/* --- Chart legend (ui/charts.js appendLegend) --------------------------- */
.chart-legend {
  display: flex; flex-wrap: wrap; gap: 6px 18px;
  margin-top: 8px; font-size: 12px; color: #666;
}
.chart-legend__item { display: inline-flex; align-items: center; gap: 6px; }
.chart-legend__item i { width: 10px; height: 10px; border-radius: 2px; flex-shrink: 0; }

/* Sidebar user block: names must truncate, never overflow the rail. */
#sidebar-username {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  max-width: 128px; display: block;
}