:root {
  color-scheme: light;
  --bg: #eef2f6;
  --surface: #ffffff;
  --surface-2: #f7f9fc;
  --line: #d9e1ea;
  --line-strong: #c3cfdb;
  --text: #17202a;
  --muted: #627184;
  --primary: #176d67;
  --primary-strong: #0f5b56;
  --danger: #c2413b;
  --warn: #b7791f;
  --ok: #177a4d;
  --sidebar: #14202d;
  --sidebar-2: #1c2a39;
  --shadow: 0 18px 45px rgba(31, 45, 61, 0.12);
}

* { box-sizing: border-box; }

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--text);
  background: var(--bg);
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  border: 0;
  border-radius: 7px;
  background: var(--primary);
  color: #fff;
  min-height: 38px;
  padding: 0 14px;
  cursor: pointer;
}

button:hover { background: var(--primary-strong); }
button:disabled { opacity: .55; cursor: not-allowed; }
button.secondary { background: #e9eef5; color: #1f3347; border: 1px solid var(--line); }
button.secondary:hover { background: #dfe7f0; }
button.danger { background: var(--danger); }
button.small { min-height: 30px; padding: 0 10px; font-size: 13px; }

input,
select,
textarea {
  width: 100%;
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  background: #fff;
  color: var(--text);
  padding: 9px 10px;
  outline: none;
}

textarea { resize: vertical; line-height: 1.45; }
input:focus, select:focus, textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(23, 109, 103, .13); }

.login {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    linear-gradient(135deg, rgba(20, 32, 45, .94), rgba(28, 42, 57, .88)),
    var(--bg);
}

.login-card {
  width: min(410px, 100%);
  display: grid;
  gap: 14px;
  padding: 24px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 28px 70px rgba(8, 18, 31, .28);
}

.login-card label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 13px;
}

.login-card button {
  margin-top: 4px;
}

.platform-splash {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    linear-gradient(135deg, rgba(20, 32, 45, .96), rgba(23, 109, 103, .86)),
    var(--bg);
}

.platform-splash-card {
  width: min(620px, 100%);
  display: grid;
  gap: 26px;
  padding: 30px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 8px;
  background: rgba(255,255,255,.96);
  box-shadow: 0 30px 80px rgba(8, 18, 31, .32);
}

.platform-splash-brand {
  padding: 0;
}

.platform-splash-brand h1,
.platform-splash-content h2,
.platform-splash-content p {
  margin: 0;
}

.platform-splash-brand p {
  color: var(--muted);
}

.platform-splash-content {
  display: grid;
  gap: 10px;
  opacity: 1;
  transform: translateY(0);
  transition: opacity .18s ease, transform .18s ease;
}

.platform-splash-content.is-changing {
  opacity: .38;
  transform: translateY(4px);
}

.platform-splash-step {
  display: inline-flex;
  width: max-content;
  min-height: 26px;
  align-items: center;
  padding: 0 10px;
  border-radius: 999px;
  background: #e7f5f2;
  color: var(--primary);
  font-size: 12px;
  font-weight: 800;
}

.platform-splash-content h2 {
  font-size: 30px;
  line-height: 1.12;
}

.platform-splash-content p {
  max-width: 54ch;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.55;
}

.platform-splash-progress {
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: #dbe5ee;
}

.platform-splash-progress span {
  display: block;
  width: 20%;
  height: 100%;
  border-radius: inherit;
  background: var(--primary);
  transition: width .24s ease;
}

.platform-splash-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 4px;
}

.platform-splash-skip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 14px;
  cursor: pointer;
}

.platform-splash-skip input {
  width: 16px;
  height: 16px;
  cursor: pointer;
}

.login-brand {
  padding: 0 0 8px;
  color: var(--text);
}

.login-brand p {
  color: var(--muted);
}

.error {
  min-height: 18px;
  margin: 0;
  color: var(--danger);
  font-size: 13px;
}

.console {
  position: relative;
  display: grid;
  grid-template-columns: 246px minmax(0, 1fr);
  width: 100%;
  height: 100%;
  transition: grid-template-columns .18s ease;
}

.console.main-sidebar-collapsed {
  grid-template-columns: 0 minmax(0, 1fr);
}

.sidebar {
  min-width: 0;
  overflow: hidden;
  background: linear-gradient(180deg, var(--sidebar), var(--sidebar-2));
  color: #e7edf5;
  display: flex;
  flex-direction: column;
  border-right: 1px solid rgba(255,255,255,.08);
  transition: opacity .16s ease, transform .16s ease, border-color .16s ease;
}

.console.main-sidebar-collapsed .sidebar {
  opacity: 0;
  pointer-events: none;
  transform: translateX(-20px);
  border-right-color: transparent;
}

.brand {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 22px 20px 18px;
}

.brand-text {
  min-width: 0;
  flex: 1;
}

.brand-mark {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 8px;
  background: #e8fbf7;
  color: #0d5e57;
  font-weight: 800;
}

.brand h1 {
  margin: 0;
  font-size: 17px;
  line-height: 1.12;
}

.brand p {
  margin: 4px 0 0;
  color: #aebdca;
  font-size: 12px;
}

.brand sup {
  font-size: .68em;
  line-height: 0;
  vertical-align: super;
}

.brand.login-brand {
  padding: 0 0 8px;
  color: var(--text);
}

.brand.login-brand p {
  color: var(--muted);
}

.sidebar-toggle {
  display: grid;
  place-items: center;
  width: 32px;
  min-width: 32px;
  height: 32px;
  min-height: 32px;
  padding: 0;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 7px;
  background: rgba(255,255,255,.08);
  color: #dce7f2;
  font-size: 22px;
  line-height: 1;
}

.sidebar-toggle:hover {
  background: rgba(255,255,255,.14);
}

.sidebar-expand {
  position: absolute;
  left: 0;
  top: 92px;
  z-index: 42;
  width: 34px;
  min-width: 34px;
  height: 92px;
  min-height: 92px;
  padding: 0;
  border-radius: 0 8px 8px 0;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  letter-spacing: 0;
  background: var(--sidebar);
  color: #e7edf5;
  box-shadow: var(--shadow);
}

.sidebar-expand:hover {
  background: var(--sidebar-2);
}

.nav {
  display: grid;
  gap: 4px;
  padding: 8px 12px;
}

.nav-item {
  background: transparent;
  color: #c9d5e2;
  text-align: left;
  border-radius: 7px;
  min-height: 40px;
}

/* Esplicita, anche se l'attributo basterebbe: le voci fuori dalla vista
   standard si nascondono con `hidden`, e una regola futura sui pulsanti che
   dichiarasse un display vincerebbe sul foglio del browser. */
.nav-item[hidden] {
  display: none;
}

.nav-item:hover {
  background: rgba(255,255,255,.08);
}

.nav-item.active {
  background: #e8fbf7;
  color: #0d4f4a;
  font-weight: 700;
}

/* L'interruttore della vista admin: in fondo al menu, subito prima della
   scheda utente col tasto di uscita. E' un interruttore, non una voce di
   navigazione, e si vede: forma diversa dalle voci sopra, e lo stato acceso
   colorato come la voce attiva. */
.vista-admin-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 9px 12px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 999px;
  background: rgba(255,255,255,.05);
  color: #c9d5e2;
  font-size: 12.5px;
  cursor: pointer;
}

.vista-admin-toggle:hover {
  background: rgba(255,255,255,.1);
}

.vista-admin-interruttore {
  position: relative;
  flex: 0 0 auto;
  width: 32px;
  height: 18px;
  border-radius: 999px;
  background: rgba(255,255,255,.2);
  transition: background .16s ease;
}

.vista-admin-interruttore::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  transition: transform .16s ease;
}

.vista-admin-toggle.acceso {
  border-color: rgba(126, 231, 209, .5);
  background: rgba(126, 231, 209, .14);
  color: #e8fbf7;
}

.vista-admin-toggle.acceso .vista-admin-interruttore {
  background: var(--primary);
}

.vista-admin-toggle.acceso .vista-admin-interruttore::after {
  transform: translateX(14px);
}

.sidebar-footer {
  margin-top: auto;
  padding: 16px 20px 20px;
  border-top: 1px solid rgba(255,255,255,.08);
  color: #b8c5d2;
  font-size: 13px;
  display: grid;
  gap: 9px;
}

.user-card {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 34px;
  gap: 10px;
  align-items: center;
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 8px;
  background: rgba(255,255,255,.06);
}

.user-avatar {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #e8fbf7;
  color: #0d5e57;
  font-size: 12px;
  font-weight: 800;
}

.user-meta {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.sidebar-user {
  overflow: hidden;
  color: #e7edf5;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.logout-icon {
  display: grid;
  place-items: center;
  width: 34px;
  min-width: 34px;
  height: 34px;
  min-height: 34px;
  padding: 0;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 7px;
  background: rgba(255,255,255,.08);
  color: #dce7f2;
}

.logout-icon:hover {
  background: rgba(255,255,255,.14);
}

.logout-icon svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

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

.dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--muted);
}

.dot.ok { background: var(--ok); }
.dot.warn { background: var(--warn); }
.dot.err { background: var(--danger); }

.workspace {
  position: relative;
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
}

.topbar {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: center;
  min-height: 74px;
  padding: 14px 24px;
  border-bottom: 1px solid var(--line);
  background: rgba(255,255,255,.88);
  backdrop-filter: blur(10px);
}

.topbar h2 {
  margin: 0;
  font-size: 21px;
}

.topbar p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.top-actions {
  display: flex;
  align-items: end;
  gap: 10px;
}

.view-loading-overlay {
  position: absolute;
  inset: 74px 0 0;
  z-index: 35;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(238, 242, 246, .62);
  backdrop-filter: blur(2px);
}

.loading-card {
  display: flex;
  align-items: center;
  gap: 14px;
  width: min(460px, 100%);
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, .96);
  box-shadow: var(--shadow);
}

.loading-card b {
  display: block;
  font-size: 15px;
}

.loading-card p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.loading-card.compact {
  width: min(390px, calc(100% - 28px));
  padding: 14px 16px;
}

.loading-spinner {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  border: 3px solid #cfdae6;
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: loading-spin .85s linear infinite;
}

.loading-spinner.small {
  width: 15px;
  height: 15px;
  border-width: 2px;
}

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

#sessionInfo {
  overflow: hidden;
  color: var(--ok);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#sessionInfo.warn {
  color: var(--warn);
}

.view {
  display: none;
  min-height: 0;
  overflow: auto;
  padding: 20px 24px 24px;
}

.view.active { display: block; }

.status-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(160px, 1fr));
  gap: 14px;
  margin-bottom: 16px;
}

.compact-status {
  grid-template-columns: repeat(4, minmax(120px, 1fr));
  margin: 14px 0;
}

.status-card,
.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.status-card {
  padding: 16px;
  min-height: 128px;
}

.status-card.mini-stat {
  min-height: 78px;
  padding: 12px;
}

.status-card.mini-stat h3 {
  margin: 8px 0 0;
  font-size: 15px;
  overflow-wrap: anywhere;
}

.status-card h3 {
  margin: 12px 0 8px;
  font-size: 15px;
}

.status-card p,
.meta {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

.badge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  background: #edf2f7;
  color: #536477;
}

.badge.ok { background: #e7f7ef; color: var(--ok); }
.badge.warn { background: #fff5df; color: var(--warn); }
.badge.err { background: #fdebea; color: var(--danger); }

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
  min-height: 0;
}

.split.tight { gap: 12px; margin-top: 12px; }
.split.grow { grid-template-rows: minmax(240px, 1fr); }

.monitor-layout {
  display: none;
}

/* Una barra di scorrimento sola, e sta dentro la tabella.
   Prima ce n'erano tre annidate - la pagina, il riquadro dei filtri, il
   riquadro delle esecuzioni - e per leggere una riga in fondo si scorreva una
   scatola dentro una pagina ferma. Poi le ho tolte tutte, ma cosi' la testata
   della tabella usciva dallo schermo dopo venti righe.
   La forma giusta e' questa: filtri in alto ad altezza propria, la tabella si
   prende quello che resta, e scorre lei con la testata fissa. */
.monitor-layout.active {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: stretch;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

.monitor-filter-panel {
  border-top: 4px solid var(--primary);
  /* Si vede per intero senza scorrere: e' la sezione da cui si parte, e
     comprimerla per fare posto alla tabella significherebbe nasconderne i
     campi proprio mentre li si sta usando. */
  flex: 0 0 auto;
  overflow: visible;
  padding: 20px 22px 18px;
  box-shadow: 0 10px 22px rgba(31, 45, 61, 0.08);
}

.monitor-filter-panel .panel-head {
  margin-bottom: 14px;
}

/* Due righe: cosa e' stato filtrato e come e' andata. I numeri stavano in una
   striscia di sette riquadri, che era una terza sezione da guardare in una
   vista che ne vuole due. */
#monitorScope {
  white-space: pre-line;
  margin-top: 10px;
  line-height: 1.5;
}

.monitor-filters {
  display: grid;
  grid-template-columns: minmax(190px, 1fr) minmax(190px, 1fr) minmax(230px, 1.15fr) minmax(230px, 1.15fr) minmax(120px, .6fr);
  gap: 14px;
  align-items: end;
}

.monitor-filters label {
  display: grid;
  gap: 6px;
  min-width: 0;
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
}

.monitor-filters input,
.monitor-filters select {
  min-height: 43px;
  font-weight: 500;
}

.monitor-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 10px;
}

.monitor-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.monitor-section-head h4 {
  margin: 0 0 4px;
}

.monitor-timeline {
  min-height: 150px;
  display: flex;
  align-items: end;
  gap: 6px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
}

.monitor-bar {
  display: inline-block;
  width: 12px;
  min-height: 4px;
  border-radius: 999px 999px 0 0;
  background: linear-gradient(180deg, #2f7d6d, #7bd0bd);
}

.monitor-workbench {
  display: grid;
  grid-template-columns: minmax(0, 1.8fr) minmax(340px, .9fr);
  gap: 16px;
  align-items: start;
}

.monitor-table-panel,
.monitor-trace-panel,
.monitor-chart-panel {
  min-height: 0;
}

.monitor-chart-panel {
  padding: 12px;
}

.monitor-chart-panel.collapsible-panel {
  border: 1px solid var(--line);
  border-top: 3px solid var(--primary);
  border-left: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  transition: background .16s ease, border-color .16s ease, box-shadow .16s ease, padding .16s ease;
}
/* Da chiuse le tre sezioni si comportano allo stesso modo: una barra a tutta
   larghezza con il titolo e il tasto. Prima solo il grafico si chiudeva, e si
   riduceva a una pillola stretta: un terzo comportamento in una pagina che ne
   aveva gia' due, e chi legge non sa cosa aspettarsi dal prossimo tasto. */
.monitor-chart-panel.is-collapsed {
  min-height: 0;
  padding: 10px 16px;
  border-left: 1px solid var(--line);
  border-radius: 10px;
  background: #f2f8f7;
  box-shadow: none;
}
.monitor-chart-panel.is-collapsed .panel-head {
  margin-bottom: 0;
  align-items: center;
}
/* Da chiusa la sezione dice quanto tiene nascosto: "Esecuzioni" da sola non
   basta a decidere se vale la pena riaprirla. */
.monitor-chart-panel.is-collapsed .meta {
  font-size: 12px;
  margin: 2px 0 0;
}
.monitor-chart-panel.is-collapsed h4 {
  margin: 0;
  font-size: 14px;
}

.monitor-chart-panel .panel-head {
  min-height: 40px;
  margin-bottom: 8px;
  align-items: center;
}



.monitor-chart-panel .panel-flag-toggle {
  width: 34px;
  height: 30px;
  min-height: 30px;
  border-radius: 999px;
  transform: none;
  background: #e7f3f1;
  color: var(--primary-strong);
}

.monitor-chart-panel.is-collapsed .panel-flag-toggle {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}





.monitor-chart-panel .panel-body {
  min-height: 0;
}

.monitor-table-panel {
  /* Si prende l'altezza che avanza: e' il contenuto principale della vista. */
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding-bottom: 12px;
}

.monitor-table-wrap {
  /* L'unica cosa che scorre nella pagina. La testata resta ferma perche' le
     cellule di intestazione sono sticky rispetto a questo riquadro: senza un
     contenitore che scorre, `position: sticky` non ha nulla a cui aggrapparsi
     e la riga dei nomi delle colonne se ne va dopo venti righe. */
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
}

.monitor-exec-table {
  width: 100%;
  min-width: 1040px;
  border-collapse: collapse;
  font-size: 13px;
}

.monitor-exec-table th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #f4f7fb;
  color: var(--muted);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .03em;
  text-align: left;
  border-bottom: 1px solid var(--line);
  padding: 10px;
}

.monitor-exec-table td {
  border-bottom: 1px solid var(--line);
  padding: 10px;
  vertical-align: middle;
}

/* Intestazioni ordinabili. Il bottone eredita tutto dall'intestazione: deve
   leggersi come un titolo di colonna, non come un comando piantato dentro una
   tabella. Resta un bottone perche' si deve poter raggiungere da tastiera e
   annunciare a chi usa uno screen reader, che legge anche `aria-sort`. */
.monitor-exec-table th.monitor-col-ordinabile { padding: 0; }

.monitor-exec-table th.monitor-col-ordinabile > button {
  width: 100%;
  background: none;
  border: 0;
  padding: 10px;
  margin: 0;
  font: inherit;
  color: inherit;
  text-transform: inherit;
  letter-spacing: inherit;
  text-align: left;
  cursor: pointer;
}

.monitor-exec-table th.monitor-col-ordinabile > button:hover { background: #e8eef7; }
.monitor-exec-table th.monitor-col-ordinabile.attiva { color: var(--primary); }

/* La riga che dice che l'ordinamento e' attivo, e come toglierlo. */
.monitor-ordine-attivo {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 8px 10px;
  margin-bottom: 8px;
  border-radius: 6px;
  background: #eef4fd;
  color: #2a3d5c;
  font-size: 12px;
}

.monitor-paginazione {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 10px 4px;
  font-size: 12px;
  color: var(--muted);
}

@media (max-width: 720px) {
  .monitor-paginazione { gap: 8px; }
  .monitor-ordine-attivo { font-size: 11px; }
}

.monitor-exec-row:hover td {
  background: #f8fbfd;
}

.monitor-exec-detail-row > td {
  background: #fbfcfe;
  border-bottom: 1px solid var(--line-strong);
  padding: 12px;
}

.monitor-expand-btn {
  width: 28px;
  min-width: 28px;
  min-height: 28px;
  padding: 0;
  border-radius: 999px;
  background: #e9eef5;
  border: 1px solid var(--line);
  color: var(--primary-strong);
  font-weight: 800;
  line-height: 1;
}

.monitor-expand-btn:hover {
  background: #dceeea;
}

.monitor-group-row td {
  background: #eef5f4;
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line-strong);
}

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

.monitor-group-row strong {
  color: var(--primary-strong);
}

.monitor-exec-table code {
  font-size: 12px;
}

.empty-state {
  padding: 20px;
  color: var(--muted);
  text-align: center;
}

.monitor-trace-tree {
  display: grid;
  gap: 8px;
}

.monitor-trace-row {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  color: var(--text);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto auto;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  text-align: left;
  cursor: pointer;
}

.monitor-trace-row:hover {
  border-color: var(--primary);
}

.monitor-trace-row span:first-child {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.monitor-trace-row code,
.monitor-trace-summary code {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.monitor-trace-view {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.monitor-trace-summary {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-2);
}

.monitor-trace-node {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-2);
  display: grid;
  grid-template-columns: auto minmax(120px, 1fr) auto minmax(160px, 2fr);
  gap: 10px;
  align-items: center;
  padding: 9px 12px;
  position: relative;
}

.monitor-trace-node.level-1 { margin-left: 20px; }
.monitor-trace-node.level-2 { margin-left: 40px; }
.monitor-trace-node.level-3 { margin-left: 60px; }
.monitor-trace-node.level-4 { margin-left: 80px; }

.monitor-trace-node.level-1::before,
.monitor-trace-node.level-2::before,
.monitor-trace-node.level-3::before,
.monitor-trace-node.level-4::before {
  content: "";
  position: absolute;
  left: -12px;
  top: 50%;
  width: 12px;
  border-top: 1px solid var(--line);
}

.monitor-raw-details {
  margin-top: 10px;
}

.monitor-raw-details summary {
  color: var(--muted);
  cursor: pointer;
  font-size: 13px;
  margin-bottom: 8px;
}

@media (max-width: 1180px) {
  .monitor-kpi-grid,
  .monitor-workbench {
    grid-template-columns: 1fr;
  }

  .monitor-filters {
    grid-template-columns: repeat(2, minmax(180px, 1fr));
  }
}

@media (max-width: 760px) {
  .monitor-filters {
    grid-template-columns: 1fr;
  }
}

.grow-input {
  flex: 1 1 auto;
  min-width: 0;
}

.panel {
  min-width: 0;
  min-height: 0;
  padding: 16px;
  overflow: auto;
}

.panel-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  margin-bottom: 12px;
}

.panel-head h3,
.subpanel h4 {
  margin: 0;
}

.collapsible-panel {
  position: relative;
  border-left: 4px solid #2f7d6d;
}

.collapsible-panel .panel-head {
  margin-bottom: 0;
}

.collapsible-panel:not(.is-collapsed) .panel-head {
  margin-bottom: 12px;
}

.collapsible-panel > .panel-body {
  display: contents;
}

.panel-flag-toggle {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border: 1px solid #b8c7d8;
  border-radius: 8px;
  background: #f4f8fb;
  color: #1b3b54;
  font-size: 18px;
  font-weight: 800;
  line-height: 1;
}

.panel-flag-toggle:hover,
.panel-flag-toggle:focus-visible {
  border-color: #2f7d6d;
  background: #e8f5f1;
  outline: none;
}

/* Il titolo parte sempre subito dopo il pulsante di apertura, in tutte le
   sezioni pieghevoli. Senza questa regola "space-between" lo colloca in base a
   cosa gli sta a destra - un conteggio, un pulsante, un link, niente - e ogni
   sezione finisce con il titolo in un punto diverso: alcune sembrano centrate,
   altre no. Facendo crescere l'elemento del titolo, quel che segue resta
   spinto a destra e l'allineamento a sinistra e' identico per tutte. */
.collapsible-panel .panel-head > .panel-flag-toggle + * {
  flex: 1 1 auto;
  min-width: 0;
  text-align: left;
}

.panel-body[hidden] {
  display: none;
}

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

.kv-list {
  display: grid;
  gap: 8px;
}

.kv-list > div {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
}

.kv-list b {
  color: var(--text);
  font-weight: 700;
  text-align: right;
}

.db-table-list {
  display: grid;
  gap: 10px;
}

.db-table-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: #fbfcfe;
}

.db-schema-warning {
  border-color: #f5c56b;
  background: #fff8e8;
}

.db-table-card h4 {
  margin: 0 0 4px;
  font-size: 14px;
}

.db-table-card ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 6px 12px;
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
}

.db-table-card li {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
  padding: 7px 0;
  border-top: 1px solid var(--line);
  font-size: 12px;
}

.db-table-card li strong,
.db-table-card li span {
  overflow-wrap: anywhere;
}

.db-table-card li span {
  color: var(--muted);
  text-align: right;
}

.security-check-list {
  display: grid;
  gap: 8px;
  margin: 10px 0 12px;
}

.security-check-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfe;
}

.security-check-card.warning {
  border-color: #f5c56b;
  background: #fff8e8;
}

.security-check-card p {
  margin: 0;
  color: var(--muted);
  overflow-wrap: anywhere;
}

.activity {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 9px;
}

.activity li {
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 13px;
}

.chat-layout {
  height: 100%;
  overflow: hidden;
  display: none;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
}

.chat-layout.active { display: grid; }

.chat-tools {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) minmax(160px, 1fr) 104px minmax(126px, .8fr) 92px 100px 162px 110px;
  gap: 10px;
  align-items: end;
  padding-bottom: 12px;
}

.chat-tools label,
.form-grid label,
.compact-form label {
  color: var(--muted);
  font-size: 12px;
}

.chat-tools select {
  min-height: 38px;
}

.agent-picker { position: relative; min-width: 0; }
.agent-picker [hidden] { display: none !important; }
.agent-picker > label { display: block; margin-bottom: 4px; }
.agent-picker > input { width: 100%; min-height: 44px; padding-right: 44px; }
.agent-picker-clear { position: absolute; right: 1px; bottom: 1px; width: 42px; height: 42px; padding: 0; }
.agent-picker-options,
.agent-picker-empty {
  position: absolute;
  top: 100%;
  left: 0;
  width: max(100%, 320px);
  min-width: 100%;
  max-width: min(420px, 85vw);
  z-index: 50;
  background: var(--surface);
  color: var(--text, #17212b);
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  box-shadow: 0 6px 18px #0002;
  max-height: 280px;
  overflow-y: auto;
}
.agent-picker-options:empty { border: 0; }
.agent-picker-options { top: calc(100% + 28px); max-height: min(320px, 45dvh); overscroll-behavior: contain; }
.agent-picker-empty { min-height: 28px; padding: 5px 10px !important; font-size: 12px !important; border-radius: 6px 6px 0 0; }
.agent-picker-options [role="option"],
.agent-picker-empty { padding: 9px 12px; font-size: 13px; overflow-wrap: anywhere; }
.agent-picker-options [role="option"] { cursor: pointer; min-height: 44px; display: flex; align-items: center; white-space: normal; }
.agent-picker-options [role="option"]:hover,
.agent-picker-options [role="option"].active { background: #e5f8f5; color: #123b3a; }
.agent-picker-options [aria-selected="true"] { font-weight: 600; }

.tts-controls {
  display: flex;
  gap: 6px;
  align-items: center;
  min-height: 38px;
}

.tts-control {
  display: grid;
  place-items: center;
  width: 36px;
  height: 38px;
  padding: 0;
}

.tts-control svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.field {
  display: grid;
  gap: 6px;
  margin-bottom: 10px;
  color: var(--muted);
  font-size: 12px;
}

.check {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text);
  min-height: 38px;
  padding-bottom: 2px;
}

.check input {
  width: 18px;
  height: 18px;
}

.hidden { display: none !important; }

.chat-progress {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 36px;
  margin-top: 10px;
  padding: 8px 12px;
  border: 1px solid #cfe2df;
  border-radius: 8px;
  background: #f2fbf9;
  color: var(--primary-strong);
  font-size: 13px;
  font-weight: 700;
}

#chatProgressText {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.messages {
  min-height: 0;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 18px;
}

.message {
  display: grid;
  grid-template-columns: 34px minmax(0, 760px);
  gap: 10px;
  align-items: start;
}

.message.user {
  justify-content: end;
  grid-template-columns: minmax(0, 760px) 34px;
}

.message.user .avatar { order: 2; }
.message.user .message-content { order: 1; align-items: end; }

.avatar {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #dce6f0;
  color: #2b3d4f;
  font-size: 12px;
  font-weight: 800;
}

.assistant .avatar {
  background: var(--primary);
  color: #fff;
}

.message.streaming .avatar {
  animation: assistant-pulse 1.15s ease-in-out infinite;
}

@keyframes assistant-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(23, 109, 103, .24); }
  50% { box-shadow: 0 0 0 6px rgba(23, 109, 103, .08); }
}

.message-content {
  min-width: 0;
  display: grid;
  gap: 6px;
}

.bubble {
  max-width: 100%;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 13px 14px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.user .bubble {
  background: #e6f4f1;
  border-color: #c8e5df;
}

.bubble p { margin: 0 0 10px; }
.bubble p:last-child { margin-bottom: 0; }
.bubble ul, .bubble ol { margin: 8px 0 8px 22px; padding: 0; }
.bubble code { background: #eef2f6; padding: 1px 5px; border-radius: 4px; }
.bubble a { color: var(--primary); }

.citation-anchor {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  margin: 0 1px;
  border: 1px solid #bfd3e8;
  border-radius: 5px;
  background: #eef5fc;
  color: var(--primary);
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  vertical-align: baseline;
}

.citation-anchor:hover,
.citation-anchor:focus-visible {
  border-color: var(--primary);
  background: #e1eefb;
  outline: none;
}

.thinking-bubble {
  background: #f4f6f8;
  border-color: #d8e0e8;
  color: #4f5d6b;
  font-size: 13px;
  max-height: 220px;
  overflow: auto;
}

.thinking-label {
  color: #6a7785;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0;
  margin-bottom: 8px;
  text-transform: uppercase;
}

.thinking-bubble p,
.thinking-bubble li {
  margin-bottom: 6px;
}

.rich-content {
  display: grid;
  gap: 10px;
}

.map-results {
  display: grid;
  gap: 10px;
}

.map-card {
  display: grid;
  grid-template-columns: minmax(220px, 320px) minmax(0, 1fr);
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.map-frame-wrap {
  min-height: 190px;
  background: #eef2f6;
}

.map-frame {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 190px;
  border: 0;
}

.map-frame.placeholder {
  display: grid;
  place-items: center;
  color: var(--muted);
  font-size: 13px;
}

.map-card-body {
  display: grid;
  align-content: space-between;
  gap: 14px;
  min-width: 0;
  padding: 13px 14px;
}

.map-card h4 {
  margin: 0 0 5px;
  font-size: 15px;
}

.map-card p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

.map-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
  color: #596676;
  font-size: 12px;
}

.map-details {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 7px 12px;
  margin: 10px 0 0;
  padding: 0;
  color: #263241;
  font-size: 12px;
}

.map-details div {
  min-width: 0;
}

.map-details dt {
  margin: 0 0 2px;
  color: #667485;
  font-weight: 700;
}

.map-details dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.map-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.map-actions a {
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 7px 9px;
  background: #f8fafc;
  color: var(--primary);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}

.source-references {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.source-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  max-width: 100%;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 7px 9px;
  background: #f8fafc;
  color: var(--primary);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.source-chip span {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #e7eef8;
  color: #24476f;
  font-size: 11px;
}

/* Follow-up suggeriti dal nodo radice: chip cliccabili sotto la risposta per guidare il dialogo. */
.suggestions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 4px;
}

.suggestions-label {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted, #6b7280);
}

.suggestions-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.suggestion-chip {
  max-width: 100%;
  border: 1px solid var(--primary, #5b4bd6);
  border-radius: 999px;
  padding: 7px 13px;
  background: color-mix(in srgb, var(--primary, #5b4bd6) 8%, transparent);
  color: var(--primary, #5b4bd6);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.25;
  text-align: left;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
}

.suggestion-chip:hover {
  background: color-mix(in srgb, var(--primary, #5b4bd6) 16%, transparent);
}

.suggestion-chip:active {
  transform: translateY(1px);
}

.grounding-panel {
  display: grid;
  gap: 9px;
  max-width: 100%;
  border: 1px solid #d8e3ec;
  border-radius: 8px;
  background: #fbfcfd;
  padding: 10px 11px;
  color: #344254;
  font-size: 12px;
}

.runtime-trace-panel {
  display: grid;
  gap: 9px;
  max-width: 100%;
  border: 1px solid #d7e7de;
  border-radius: 8px;
  background: #f8fcfa;
  padding: 10px 11px;
  color: #344254;
  font-size: 12px;
}

body.explainability-hidden .grounding-panel,
body.explainability-hidden .agent-reasoning {
  display: none;
}

.agent-reasoning {
  max-width: 100%;
  border: 1px solid #d6dcea;
  border-radius: 8px;
  background: #fbfbfe;
  padding: 8px 11px;
  color: #344254;
  font-size: 12px;
}

.agent-reasoning > summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  list-style: none;
  color: #344254;
}

.agent-reasoning > summary::-webkit-details-marker {
  display: none;
}

.agent-reasoning > summary::before {
  content: "▸";
  color: #7a6cf0;
  font-size: 11px;
}

.agent-reasoning[open] > summary::before {
  content: "▾";
}

.agent-reasoning-badge {
  font-weight: 700;
  color: #5b4bd6;
}

.agent-reasoning-orch {
  font-weight: 700;
  color: #283545;
  overflow-wrap: anywhere;
}

.agent-reasoning > summary em {
  color: var(--muted);
  font-style: normal;
  font-weight: 700;
}

.agent-reasoning-steps {
  display: grid;
  gap: 8px;
  margin: 9px 0 0;
  padding: 0;
  list-style: none;
}

.agent-reasoning-step {
  border-left: 2px solid #e0dcf6;
  padding: 2px 0 2px 10px;
}

.agent-reasoning-step-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.agent-reasoning-step-head strong {
  color: #173f5f;
  font-size: 12px;
}

.agent-reasoning-objective {
  margin-top: 2px;
  color: #6b7785;
}

.agent-reasoning-think,
.agent-reasoning-contrib {
  margin-top: 6px;
  border-radius: 6px;
  padding: 6px 8px;
  overflow-wrap: anywhere;
}

.agent-reasoning-think {
  background: #f3f1fb;
}

.agent-reasoning-contrib {
  background: #f4f8fb;
}

.agent-reasoning-tag {
  display: block;
  margin-bottom: 3px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #8a83b8;
}

.agent-reasoning-think p,
.agent-reasoning-think li,
.agent-reasoning-contrib p,
.agent-reasoning-contrib li {
  margin: 2px 0;
}

.agent-reasoning-docs {
  color: var(--muted);
  font-weight: 700;
  white-space: nowrap;
}

.agent-reasoning .agent-reasoning {
  margin-top: 8px;
  background: #f7f7fc;
}

.agent-reasoning-fastpath {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 8px 0 0;
  border-radius: 6px;
  padding: 5px 8px;
  font-size: 11px;
}

.agent-reasoning-fastpath.hit {
  background: #eaf7ef;
  color: #1f7a44;
}

.agent-reasoning-fastpath.miss {
  background: #f1f2f6;
  color: #5a6472;
}

.agent-reasoning-fastpath .agent-reasoning-tag {
  margin-bottom: 0;
  color: inherit;
  white-space: nowrap;
}

.location-status {
  align-self: center;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.location-status.ok {
  color: #1f7a44;
}

.location-status.warn {
  color: #9a6a00;
}

.location-status.err {
  color: #b3261e;
}

.farmacie-refine {
  max-width: 100%;
  margin-top: 8px;
  border: 1px solid #dcd8f2;
  border-radius: 10px;
  background: #fbfbfe;
  padding: 11px 12px;
}

.farmacie-refine-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 8px;
}

.farmacie-refine-head strong {
  color: #5b4bd6;
  font-size: 13px;
}

.farmacie-refine-head span {
  color: var(--muted);
  font-size: 12px;
}

.veneto-map {
  display: block;
  width: 100%;
  max-width: 380px;
  height: auto;
  margin: 0 auto;
}

.veneto-prov {
  cursor: pointer;
}

.veneto-prov > polygon {
  stroke: #ffffff;
  stroke-width: 1.4;
  transition: fill 0.12s ease, stroke 0.12s ease;
}

.veneto-prov:hover > polygon,
.veneto-prov:focus > polygon {
  stroke: #5b4bd6;
  stroke-width: 2;
  outline: none;
}

.veneto-prov.disabled {
  cursor: default;
}

.veneto-abbr {
  font-size: 11px;
  font-weight: 700;
  fill: #26203f;
  text-anchor: middle;
  dominant-baseline: middle;
  pointer-events: none;
}

.veneto-count {
  font-size: 9px;
  font-weight: 700;
  fill: #514a6b;
  text-anchor: middle;
  dominant-baseline: middle;
  pointer-events: none;
}

.refine-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.refine-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid #d6dcea;
  border-radius: 999px;
  background: #f4f6fb;
  padding: 4px 10px;
  font-size: 12px;
  color: #283545;
  cursor: pointer;
  transition: border-color 0.12s ease, background 0.12s ease;
}

.refine-chip:hover,
.refine-chip:focus {
  border-color: #5b4bd6;
  background: #eeeafc;
  outline: none;
}

.refine-chip span {
  font-weight: 700;
  color: #5b4bd6;
}

.farmacie-list {
  max-width: 100%;
  margin-top: 8px;
  border: 1px solid #d8e3ec;
  border-radius: 10px;
  background: #fbfcfd;
  padding: 10px 12px;
  font-size: 12px;
}

.farmacie-list-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 6px;
}

.farmacie-list-head strong {
  color: #173f5f;
  font-size: 13px;
}

.farmacie-list-head span {
  color: var(--muted);
  font-weight: 700;
}

.farmacie-list-items {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
  max-height: 320px;
  overflow-y: auto;
}

.farmacie-list-items li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
  padding: 4px 0;
  border-bottom: 1px solid #eef2f6;
}

.farmacie-list-name {
  font-weight: 700;
  color: #283545;
}

.farmacie-list-addr {
  color: #6b7785;
  overflow-wrap: anywhere;
}

.farmacie-list-link {
  margin-left: auto;
  color: #5b4bd6;
  font-weight: 700;
  white-space: nowrap;
}

.farmacie-list-more {
  margin-top: 8px;
  color: var(--muted);
  font-style: italic;
}

.grounding-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.grounding-head strong {
  color: #173f5f;
  font-size: 13px;
}

.grounding-head span {
  color: var(--muted);
  font-weight: 700;
}

.grounding-grid {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 5px 11px;
}

.grounding-grid span {
  color: #6b7785;
}

.grounding-grid strong {
  min-width: 0;
  color: #283545;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.grounding-docs {
  display: grid;
  gap: 5px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.grounding-docs li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.grounding-docs span {
  display: inline-grid;
  place-items: center;
  min-width: 24px;
  height: 22px;
  border-radius: 5px;
  background: #e9f2f7;
  color: #1f5872;
  font-weight: 800;
}

.grounding-docs strong {
  min-width: 0;
  overflow-wrap: anywhere;
}

.grounding-docs em {
  color: #42576b;
  font-style: normal;
  font-variant-numeric: tabular-nums;
}

.grounding-docs small {
  color: #6b7785;
  white-space: nowrap;
}

.runtime-trace-list {
  display: grid;
  gap: 5px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.runtime-trace-list li {
  display: grid;
  grid-template-columns: minmax(120px, auto) minmax(72px, auto) minmax(0, 1fr) auto;
  gap: 7px;
  align-items: center;
}

.runtime-trace-list span {
  color: #376650;
  font-weight: 800;
}

.runtime-trace-list strong {
  color: #283545;
  font-weight: 700;
}

.runtime-trace-list em {
  min-width: 0;
  color: #536170;
  font-style: normal;
  overflow-wrap: anywhere;
}

.runtime-trace-list small {
  color: #6b7785;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.source-drawer {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 40;
  width: min(760px, 48vw);
  min-width: 460px;
  max-width: calc(100vw - 260px);
  height: 100vh;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  background: #ffffff;
  border-left: 1px solid var(--line);
  box-shadow: -18px 0 38px rgba(15, 23, 42, 0.16);
}

.source-drawer.hidden {
  display: none;
}

.source-drawer-resize {
  position: absolute;
  top: 0;
  left: -5px;
  width: 10px;
  height: 100%;
  cursor: ew-resize;
  z-index: 2;
}

.source-drawer-resize::after {
  content: "";
  position: absolute;
  top: 0;
  left: 4px;
  width: 1px;
  height: 100%;
  background: transparent;
}

.source-drawer-resize:hover::after,
.resizing-source-drawer .source-drawer-resize::after {
  background: var(--primary);
}

.resizing-source-drawer {
  cursor: ew-resize;
  user-select: none;
}

.source-drawer-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 16px;
  border-bottom: 1px solid var(--line);
  background: #f8fafc;
}

.source-drawer-head h3 {
  margin: 7px 0 4px;
  font-size: 16px;
}

.source-drawer-head p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  overflow-wrap: anywhere;
}

.icon-button {
  width: 34px;
  height: 34px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #ffffff;
  color: #263241;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.source-drawer-body {
  min-height: 0;
  overflow: auto;
  background: #eef2f6;
}

.source-viewer-layout {
  min-height: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 36%);
  gap: 0;
}

.source-viewer-pane {
  min-width: 0;
  min-height: 100%;
  overflow: auto;
  background: #ffffff;
  border-right: 1px solid var(--line);
}

.source-pdf-frame {
  display: block;
  width: 100%;
  height: 100vh;
  min-height: 100%;
  border: 0;
  background: #ffffff;
}

.source-text-tools,
.source-loading,
.source-error {
  padding: 12px 14px;
  color: var(--muted);
  font-size: 13px;
}

.source-error {
  color: #a12828;
}

.source-text {
  min-height: 100%;
  margin: 0;
  padding: 16px;
  background: #ffffff;
  color: #17202c;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-family: Consolas, "Courier New", monospace;
  font-size: 13px;
  line-height: 1.55;
}

.source-doc-chat {
  min-width: 0;
  min-height: 100%;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  background: #f8fafc;
}

.source-doc-chat-head {
  display: grid;
  gap: 8px;
  padding: 12px;
  border-bottom: 1px solid var(--line);
}

.source-doc-chat-head h4 {
  margin: 0;
  font-size: 14px;
}

.source-doc-messages {
  min-height: 0;
  overflow: auto;
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 12px;
}

.source-doc-message {
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 9px 10px;
  background: #ffffff;
  font-size: 13px;
  line-height: 1.45;
}

.source-doc-message.user {
  background: #e7f4f1;
  border-color: #b7ddd3;
}

.source-doc-message p {
  margin: 0 0 8px;
}

.source-doc-message p:last-child {
  margin-bottom: 0;
}

.source-doc-empty,
.source-doc-note {
  color: var(--muted);
  font-size: 12px;
}

.source-doc-form {
  display: grid;
  gap: 8px;
  padding: 12px;
  border-top: 1px solid var(--line);
}

.source-doc-form textarea {
  min-height: 70px;
  max-height: 150px;
}

.source-doc-note {
  padding: 0 12px 12px;
}

.composer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  padding-top: 12px;
}

.composer textarea {
  min-height: 44px;
  max-height: 150px;
  resize: none;
}

.two-column {
  height: 100%;
  overflow: hidden;
  display: none;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 12px;
}

.two-column.active { display: grid; }

#collectionsView {
  position: relative;
}

#agentsView {
  position: relative;
}

#clientsView {
  position: relative;
}

#agentsView.agents-sidebar-collapsed {
  grid-template-columns: minmax(0, 1fr);
}

#clientsView.clients-sidebar-collapsed {
  grid-template-columns: minmax(0, 1fr);
}

#agentsView.agents-sidebar-collapsed .agent-sidebar {
  display: none;
}

#clientsView.clients-sidebar-collapsed .client-sidebar {
  display: none;
}

#agentsView.agents-sidebar-collapsed .editor {
  grid-column: 1 / -1;
}

.intent-router-box {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fbfb;
}

.intent-router-box > div:first-child {
  grid-column: 1 / -1;
}

.intent-router-box h5 {
  margin: 0 0 4px;
  font-size: 14px;
}

.intent-router-box p {
  margin: 0;
}

.capability-card-box {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfaf6;
}

.capability-card-box > div:first-child,
.capability-card-box .wide {
  grid-column: 1 / -1;
}

.capability-card-box h4 {
  margin: 0 0 4px;
  font-size: 15px;
}

.capability-card-box p {
  margin: 0;
}

.follow-ups-box,
.avatar-box,
.tools-box,
.retrieval-suite-box {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f6f8fb;
}

.follow-ups-box > div:first-child,
.follow-ups-box .wide,
.avatar-box > div:first-child,
.avatar-box .wide,
.tools-box > div:first-child,
.tools-box .wide,
.retrieval-suite-box > div:first-child,
.retrieval-suite-box .wide {
  grid-column: 1 / -1;
}

.follow-ups-box h4,
.avatar-box h4,
.tools-box h4,
.retrieval-suite-box h4 {
  margin: 0 0 4px;
  font-size: 15px;
}

.follow-ups-box p,
.avatar-box p,
.tools-box p,
.retrieval-suite-box p {
  margin: 0;
}

#clientsView.clients-sidebar-collapsed .editor {
  grid-column: 1 / -1;
}

#collectionsView.collections-sidebar-collapsed {
  grid-template-columns: minmax(0, 1fr);
}

#collectionsView.collections-sidebar-collapsed .collection-sidebar {
  display: none;
}

#collectionsView.collections-sidebar-collapsed .collection-workspace {
  grid-column: 1 / -1;
}

.side-panel-expand,
.collection-panel-expand {
  display: none;
  position: absolute;
  z-index: 5;
  left: 0;
  top: 72px;
  min-height: 34px;
  min-width: 34px;
  padding: 8px 7px;
  border: 1px solid var(--line-strong);
  border-left: 0;
  border-radius: 0 7px 7px 0;
  background: #fff;
  color: var(--primary);
  box-shadow: 0 10px 24px rgba(31, 45, 61, .16);
  font-size: 12px;
  font-weight: 800;
  writing-mode: vertical-rl;
  text-orientation: mixed;
}

.agents-sidebar-collapsed .side-panel-expand,
.clients-sidebar-collapsed .side-panel-expand,
.custom-mcp-sidebar-collapsed .side-panel-expand,
.collections-sidebar-collapsed .collection-panel-expand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.list-panel {
  min-height: 0;
  overflow: auto;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
  padding: 14px;
}

.collection-sidebar .panel-head {
  align-items: center;
}

/* Il filtro resta attaccato in alto mentre la lista scorre: con una cinquantina
   di agenti, un campo che scompare al primo scroll costringe a risalire ogni
   volta che si vuole correggere la ricerca. */
.agent-filter {
  position: sticky;
  top: 0;
  z-index: 2;
  display: grid;
  gap: 6px;
  margin-bottom: 10px;
  padding-bottom: 8px;
  background: var(--surface);
}

.agent-filter .meta {
  margin: 0;
}

.collection-picker {
  position: relative;
  display: grid;
  gap: 7px;
  margin-bottom: 12px;
}

.collection-picker label {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.collection-dropdown {
  display: grid;
  max-height: 360px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.collection-option {
  width: 100%;
  display: grid;
  gap: 2px;
  text-align: left;
  background: #fff;
  color: var(--text);
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  min-height: 48px;
  padding: 9px 11px;
}

.collection-option:last-child {
  border-bottom: 0;
}

.collection-option:hover,
.collection-option.active {
  background: #e7f4f1;
}

.collection-option span {
  font-weight: 800;
}

.collection-option small,
.collection-empty {
  color: var(--muted);
  font-size: 12px;
}

.collection-option mark {
  padding: 0 1px;
  border-radius: 3px;
  background: #fff3bf;
  color: inherit;
}

.collection-empty {
  padding: 12px;
}

.compact-form {
  display: grid;
  gap: 8px;
  margin-bottom: 12px;
}

.editor {
  height: 100%;
  display: grid;
  align-content: start;
  gap: 14px;
}

.collection-workspace {
  min-width: 0;
  min-height: 0;
  height: 100%;
  overflow: auto;
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.form-grid .wide { grid-column: 1 / -1; }
.form-check { align-self: end; }

.agent-form-grid {
  align-content: start;
}

.orchestration-box {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
  padding: 12px;
}

.panel-head.compact {
  margin-bottom: 10px;
}

.panel-head.compact h4 {
  margin: 0;
}

.checks {
  display: grid;
  grid-template-columns: repeat(4, minmax(150px, 1fr));
  gap: 8px 12px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #f8fafc;
}

.checks .check {
  min-height: 28px;
  padding: 0;
  font-size: 13px;
}

.permission-matrix {
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.documents-panel {
  position: relative;
  min-width: 0;
  display: grid;
  gap: 8px;
  align-content: start;
  padding-top: 6px;
  border-top: 1px solid var(--line);
}

.panel-loading-overlay {
  position: absolute;
  inset: 44px 0 0;
  z-index: 8;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 96px;
  background: rgba(247, 249, 252, .68);
  backdrop-filter: blur(1px);
  border-radius: 8px;
}

.documents-panel.panel-loading-active .document-table-wrap,
.documents-panel.panel-loading-active .pagination-bar {
  opacity: .48;
}

.document-filter-bar {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto auto;
  gap: 8px;
  align-items: center;
}

.document-table-wrap {
  width: 100%;
  min-height: 420px;
  overflow-x: auto;
  overflow-y: visible;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.document-table {
  width: 100%;
  min-width: 1120px;
  border-collapse: collapse;
  font-size: 12px;
}

.document-table th,
.document-table td {
  padding: 7px 10px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: middle;
}

.document-table th {
  background: #f8fafc;
  color: var(--muted);
  font-weight: 700;
}

.document-table tr:last-child td {
  border-bottom: 0;
}

.document-table tr.document-highlight td {
  animation: documentHighlight 1800ms ease;
}

@keyframes documentHighlight {
  0% { background: #fff3bf; }
  100% { background: transparent; }
}

.file-type,
.index-state {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
}

.file-type {
  background: #eef2f6;
  color: #34465a;
}

.index-state.ok {
  background: #e4f6ee;
  color: var(--ok);
}

.index-state.warn {
  background: #fff3d8;
  color: var(--warn);
}

.remote-sources-panel {
  margin: 12px 0;
}

.remote-source-form {
  display: grid;
  grid-template-columns: minmax(140px, 1fr) minmax(180px, 1fr) 2fr minmax(160px, 1fr);
  gap: 10px;
}

.remote-source-list {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.remote-source-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.view.flow-layout {
  display: none;
}

.view.flow-layout.active {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 14px;
  height: 100%;
  min-height: 0;
}

.flow-toolbar {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
}

.flow-actions {
  display: grid;
  grid-template-columns: minmax(220px, 320px) auto auto auto auto;
  gap: 10px;
  align-items: end;
}

.flow-workspace {
  position: relative;
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr) 340px;
  gap: 14px;
  min-height: 0;
}

.flow-workspace.flow-toolbox-collapsed {
  grid-template-columns: minmax(0, 1fr) 340px;
}

.flow-workspace.flow-inspector-collapsed {
  grid-template-columns: 280px minmax(0, 1fr);
}

.flow-workspace.flow-toolbox-collapsed.flow-inspector-collapsed {
  grid-template-columns: minmax(0, 1fr);
}

.flow-workspace.flow-toolbox-collapsed .flow-toolbox,
.flow-workspace.flow-inspector-collapsed .flow-inspector {
  display: none;
}

.flow-workspace.flow-toolbox-collapsed .flow-canvas-panel,
.flow-workspace.flow-inspector-collapsed .flow-canvas-panel {
  min-width: 0;
}

.flow-workspace.flow-toolbox-collapsed .flow-toolbox-expand,
.flow-workspace.flow-inspector-collapsed .flow-inspector-expand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.flow-inspector-expand {
  left: auto;
  right: 0;
  border-left: 1px solid var(--line-strong);
  border-right: 0;
  border-radius: 7px 0 0 7px;
}

.flow-toolbox,
.flow-canvas-panel,
.flow-inspector {
  min-height: 0;
  overflow: hidden;
}

.flow-toolbox,
.flow-inspector {
  overflow: auto;
}

.flow-toolbox h3,
.flow-inspector h3 {
  margin-top: 0;
}

.flow-toolbox .panel-head h3,
.flow-inspector .panel-head h3 {
  margin: 0;
}

.flow-toolbox-content {
  display: grid;
  gap: 14px;
}

.flow-tool-section {
  display: grid;
  gap: 8px;
}

.flow-tool-section h4 {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  letter-spacing: 0;
  text-transform: uppercase;
}

.flow-tool-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 56px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--text);
  text-align: left;
  cursor: grab;
}

.flow-tool-item:hover {
  border-color: var(--primary);
  background: #f8fbff;
}

.flow-tool-item.linked {
  border-color: #b7ddd3;
  background: #eefaf7;
}

.flow-tool-item span {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.flow-tool-item b,
.flow-tool-item small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.flow-tool-item small {
  color: var(--muted);
  font-size: 11px;
}

.flow-tool-item em {
  color: var(--primary);
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
}

.flow-canvas {
  width: 100%;
  height: 100%;
  min-height: 520px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(#eef3f8 1px, transparent 1px),
    linear-gradient(90deg, #eef3f8 1px, transparent 1px),
    #fbfdff;
  background-size: 28px 28px;
}

.flow-node {
  cursor: grab;
  user-select: none;
  touch-action: none;
}

.flow-node.dragging {
  cursor: grabbing;
}

.flow-node rect {
  fill: #fff;
  stroke: var(--line-strong);
  stroke-width: 1.2;
  filter: drop-shadow(0 8px 14px rgba(31, 45, 61, .08));
}

.flow-node.selected rect {
  stroke: var(--primary);
  stroke-width: 2.2;
}

.flow-node.dragging rect {
  stroke: #0f766e;
  stroke-width: 2.4;
}

.flow-connect-handle {
  cursor: crosshair;
}

.flow-connect-handle circle {
  fill: var(--primary);
  stroke: #fff;
  stroke-width: 2;
  filter: drop-shadow(0 4px 8px rgba(15, 118, 110, .24));
}

.flow-connect-handle text {
  fill: #fff;
  font-size: 16px;
  font-weight: 900;
  pointer-events: none;
}

.flow-node.orchestrator rect { fill: #e9fbf6; }
.flow-node.worker rect { fill: #f7f9fc; }
.flow-node.collection rect { fill: #fff8e6; }
.flow-node.mcp rect { fill: #eef2ff; }
.flow-node.rules rect { fill: #f8eefc; }

.flow-node-kind {
  fill: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.flow-node-label {
  fill: var(--text);
  font-size: 14px;
  font-weight: 800;
}

.flow-node-ref {
  fill: var(--muted);
  font-size: 11px;
}

.flow-edge path {
  fill: none;
  stroke: #6b7a8c;
  stroke-width: 1.8;
}

.flow-edge {
  cursor: context-menu;
}

.flow-edge:hover path {
  stroke: #0f766e;
  stroke-width: 2.6;
}

.flow-edge.orchestrates path {
  stroke: var(--primary);
  stroke-width: 2.4;
}

.flow-edge text {
  fill: var(--muted);
  font-size: 11px;
  paint-order: stroke;
  stroke: #fbfdff;
  stroke-width: 4px;
}

.flow-link-preview {
  fill: none;
  stroke: #0f766e;
  stroke-width: 2.4;
  stroke-dasharray: 6 5;
  pointer-events: none;
}

.flow-context-menu {
  position: fixed;
  z-index: 40;
  min-width: 180px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 18px 40px rgba(18, 32, 48, .18);
}

.flow-context-menu button {
  width: 100%;
  padding: 9px 10px;
  border: 0;
  background: transparent;
  color: #b42318;
  text-align: left;
  font-weight: 700;
}

.flow-context-menu button:hover {
  background: #fff1f1;
}

.flow-empty {
  fill: var(--muted);
  font-size: 14px;
}

.flow-inspector-content {
  display: grid;
  gap: 10px;
  margin-bottom: 16px;
}

.flow-node-properties {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
}

.flow-node-properties h4 {
  margin: 0;
}

.flow-property-field {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

@media (max-width: 1180px) {
  .flow-workspace {
    grid-template-columns: 240px minmax(0, 1fr);
  }

  .flow-inspector {
    grid-column: 1 / -1;
    min-height: 260px;
  }

  .upload-panel {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  }

  .upload-panel #uploadSummary {
    grid-column: 1 / -1;
  }
}

.compact-kv {
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}

.flow-editor {
  display: grid;
  gap: 10px;
}

.flow-editor h4 {
  margin: 0;
}

.flow-identity-box {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid #b7ddd3;
  border-radius: 8px;
  background: #eefaf7;
}

.flow-identity-box h4 {
  margin: 0;
}

.permission-matrix table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
}

.permission-matrix th,
.permission-matrix td {
  padding: 10px;
  border-bottom: 1px solid var(--line);
  text-align: center;
  font-size: 13px;
}

.permission-matrix th:first-child {
  text-align: left;
}

.permission-matrix thead th {
  position: sticky;
  top: 0;
  background: #f3f6fa;
  color: var(--muted);
  z-index: 1;
}

.permission-matrix input {
  width: 18px;
  height: 18px;
}

.secret-box {
  display: grid;
  gap: 6px;
  margin: 12px 0;
  padding: 12px;
  border: 1px solid #f0d9a7;
  border-radius: 8px;
  background: #fff9eb;
}

.secret-box p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

.secret-box code {
  display: block;
  overflow-wrap: anywhere;
  padding: 9px;
  border-radius: 7px;
  background: #101926;
  color: #dbe8f6;
}

.agent-try {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.try-messages {
  min-height: 180px;
  max-height: 300px;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-2);
}

.try-msg {
  display: grid;
  gap: 5px;
  max-width: min(760px, 92%);
}

.try-msg.user {
  align-self: flex-end;
}

.try-msg.assistant {
  align-self: flex-start;
}

.try-bubble {
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  line-height: 1.45;
}

.try-msg.user .try-bubble {
  background: #e6f4f1;
  border-color: #c8e5df;
}

.try-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.retrieval-eval-form {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(180px, 260px) 88px auto;
  gap: 8px;
  align-items: end;
}

.retrieval-eval-results {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.retrieval-eval-summary {
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #f8fafc;
  color: var(--muted);
  font-size: 13px;
}

.retrieval-eval-summary.ok {
  border-color: #b7dfc7;
  background: #eaf8f0;
  color: #1f6f3c;
}

.retrieval-eval-summary.error {
  border-color: #f2b8b5;
  background: #fdeceb;
  color: #8a1f1f;
}

.retrieval-suite-head {
  margin-top: 12px;
}

.retrieval-suite-cases {
  display: grid;
  gap: 8px;
}

.retrieval-suite-case {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, .8fr);
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.retrieval-suite-case.passed {
  border-color: #b7dfc7;
}

.retrieval-suite-case.failed {
  border-color: #f2b8b5;
  background: #fff8f8;
}

.retrieval-eval-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  align-items: start;
}

.retrieval-eval-channel {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.channel-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.channel-head h4 {
  margin: 0;
  font-size: 15px;
}

.retrieval-eval-item {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 8px;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface-2);
}

.retrieval-eval-item p {
  margin: 4px 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
}

.retrieval-eval-rank {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 28px;
  border-radius: 7px;
  background: #e6f4f1;
  color: var(--primary);
  font-size: 12px;
  font-weight: 800;
}

.inline-status {
  background: #f5f8fb;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 10px;
  color: var(--muted);
  font-size: 13px;
}

.collection-quality {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fbfcfe;
  font-size: 13px;
}

.quality-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  color: var(--muted);
}

.quality-summary.warning {
  color: #7a4d00;
}

.quality-summary.error {
  color: #8a1f1f;
}

.quality-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.quality-badge {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 2px 8px;
  border: 1px solid #b7dfc7;
  border-radius: 999px;
  background: #eaf8f0;
  color: #1f6f3c;
  font-size: 12px;
  line-height: 1.2;
}

.quality-badge.warning {
  border-color: #efd089;
  background: #fff7df;
  color: #8a5b00;
}

.quality-badge.error {
  border-color: #f0b4b4;
  background: #fff0f0;
  color: #9b2424;
}

.quality-details {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  color: var(--muted);
}

.quality-warnings {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.quality-warnings li {
  display: grid;
  grid-template-columns: minmax(120px, auto) minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.quality-warnings span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.upload-progress {
  display: grid;
  gap: 7px;
  color: var(--text);
}

.upload-progress-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
}

.progress-track {
  width: 100%;
  height: 8px;
  overflow: hidden;
  background: #e8edf3;
  border-radius: 4px;
}

.progress-bar {
  height: 100%;
  width: 0;
  background: #20856f;
  transition: width 160ms ease;
}

.upload-panel {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(320px, 1.15fr) auto;
  gap: 10px;
  align-items: end;
  padding: 10px 0 12px;
  border-bottom: 1px solid var(--line);
}

.upload-panel #uploadSummary {
  min-width: 0;
  grid-column: 1 / -1;
}

.upload-index-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.pagination-bar {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  min-height: 36px;
  color: var(--muted);
  font-size: 13px;
}

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

.pagination-actions button:disabled {
  opacity: .45;
  cursor: default;
}

.collection-search-panel {
  order: 20;
  display: grid;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.collection-search-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
}

.remote-sources-panel {
  display: grid;
  gap: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.collection-workspace h4,
.documents-panel h4,
.collection-search-panel h4,
.remote-sources-panel h4 {
  margin: 0;
}

.doc-list,
.model-list {
  display: grid;
  gap: 8px;
}

.doc-row,
.model-row {
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 10px;
  background: #fff;
}

.model-row {
  width: 100%;
  min-height: auto;
  color: var(--text);
  text-align: left;
}

.model-row:hover,
.model-row.active {
  border-color: #9bcfc7;
  background: #e7f4f1;
}

.models-governance-layout.active {
  display: grid;
  grid-template-columns: minmax(280px, .8fr) minmax(420px, 1.4fr);
  grid-template-rows: auto minmax(260px, 1fr);
  gap: 16px;
  height: 100%;
  overflow: hidden;
}

.models-test-panel {
  grid-column: 1 / -1;
  min-height: 0;
}

.models-runtime-panel,
.models-provisioning-panel,
.models-test-panel {
  min-height: 0;
  overflow: auto;
}

.runtime-control-layout {
  height: 100%;
  overflow: hidden;
}

.runtime-control-layout.active {
  display: grid;
  grid-template-columns: minmax(300px, .72fr) minmax(0, 1.28fr);
  grid-template-rows: minmax(260px, .92fr) minmax(220px, .72fr);
  gap: 16px;
}

.runtime-components-panel {
  grid-row: 1 / -1;
  min-height: 0;
}

.runtime-detail-panel,
.runtime-logs-panel {
  min-height: 0;
}

.runtime-component-list {
  display: grid;
  gap: 10px;
}

.runtime-component-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 6px 10px;
  align-items: center;
  width: 100%;
  min-height: 82px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfe;
  color: var(--text);
  text-align: left;
}

.runtime-component-row:hover,
.runtime-component-row.active {
  border-color: #9bcfc7;
  background: #e7f4f1;
}

.runtime-component-row strong,
.runtime-component-row small,
.runtime-component-row em {
  min-width: 0;
  overflow-wrap: anywhere;
}

.runtime-component-row small,
.runtime-component-row em {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
}

.runtime-diagnostics {
  margin-top: 12px;
}

.runtime-diagnostics-card {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid #d7e6f5;
  border-radius: 8px;
  background: #f7fbff;
}

.runtime-diagnostics-card h4 {
  margin: 0 0 4px;
  font-size: 14px;
}

.runtime-diagnostics-card p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
}

.runtime-diagnostics-card ul {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.runtime-issue,
.runtime-check {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 4px 10px;
  align-items: start;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.runtime-issue span,
.runtime-check strong {
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}

.runtime-issue strong,
.runtime-check span {
  min-width: 0;
  color: var(--text);
  font-weight: 800;
  overflow-wrap: anywhere;
}

.runtime-issue em,
.runtime-check em {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  overflow-wrap: anywhere;
}

.runtime-issue.err,
.runtime-check.err {
  border-color: #f1c2c2;
  background: #fff8f8;
}

.runtime-issue.warn,
.runtime-check.warn {
  border-color: #efd89d;
  background: #fffaf0;
}

.runtime-issue.neutral,
.runtime-check.ok {
  border-color: #b8ded7;
  background: #f6fcfa;
}

.runtime-issue.err span,
.runtime-check.err strong {
  background: #fee2e2;
  color: #991b1b;
}

.runtime-issue.warn span,
.runtime-check.warn strong {
  background: #fef3c7;
  color: #8a5a00;
}

.runtime-issue.neutral span,
.runtime-check.ok strong {
  background: #dff5ec;
  color: #13694f;
}

.runtime-checks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 8px;
  margin: 12px 0;
}

.retrieval-studio-layout {
  height: 100%;
  overflow: hidden;
}

.retrieval-studio-layout.active {
  display: grid;
  grid-template-columns: minmax(280px, .56fr) minmax(0, 1.44fr);
  gap: 16px;
}

.retrieval-profile-list-panel,
.retrieval-profile-editor {
  min-height: 0;
}

.retrieval-profile-editor {
  overflow: auto;
}

.retrieval-profile-form {
  display: grid;
  grid-template-columns: repeat(4, minmax(130px, 1fr));
  gap: 12px;
}

.retrieval-profile-form .wide {
  grid-column: 1 / -1;
}

.retrieval-profile-form label {
  display: grid;
  gap: 7px;
  min-width: 0;
  color: var(--muted);
  font-size: 13px;
}

.retrieval-profile-form output {
  justify-self: end;
  min-width: 48px;
  padding: 2px 7px;
  border-radius: 999px;
  background: #e8eef5;
  color: #26384d;
  font-size: 12px;
  font-weight: 800;
  text-align: right;
}

.retrieval-profile-form input[type="range"] {
  height: 28px;
  padding: 0;
  border: 0;
  box-shadow: none;
  accent-color: var(--primary);
}

.retrieval-tuning-section {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  align-items: stretch;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
}

.retrieval-tuning-section > div {
  grid-column: 1 / -1;
}

.retrieval-tuning-section label {
  grid-template-columns: minmax(0, 1fr) auto;
  align-content: start;
  gap: 8px 10px;
  min-height: 82px;
  padding: 10px;
  border: 1px solid #dce5ee;
  border-radius: 8px;
  background: #ffffff;
}

.retrieval-tuning-section label input[type="range"] {
  grid-column: 1 / -1;
  width: 100%;
}

.retrieval-expansion-section {
  grid-template-columns: minmax(220px, .9fr) minmax(220px, 1fr);
}

.retrieval-toggle-card {
  display: flex !important;
  grid-template-columns: none !important;
  align-items: center;
  min-height: 58px;
  color: var(--text) !important;
  font-weight: 800;
}

.retrieval-toggle-card input {
  width: 20px;
  height: 20px;
}

.retrieval-synonym-studio {
  display: grid;
  gap: 12px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.retrieval-synonym-layout {
  display: grid;
  grid-template-columns: minmax(220px, .52fr) minmax(0, 1.48fr);
  gap: 12px;
  min-height: 0;
}

.retrieval-synonym-editor {
  display: grid;
  grid-template-columns: minmax(180px, .7fr) minmax(140px, .3fr);
  gap: 12px;
  min-width: 0;
}

.retrieval-synonym-editor label {
  display: grid;
  gap: 7px;
  min-width: 0;
  color: var(--muted);
  font-size: 13px;
}

.retrieval-synonym-editor .wide {
  grid-column: 1 / -1;
}

.retrieval-synonym-editor textarea {
  min-height: 140px;
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  font-size: 12px;
  line-height: 1.45;
}

.retrieval-tuning-section h4,
.retrieval-tuning-section p {
  margin: 0;
}

.retrieval-tuning-section h4 {
  font-size: 15px;
}

.retrieval-tuning-section p {
  line-height: 1.35;
}

.model-action-form {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto auto;
  gap: 10px;
  align-items: end;
  margin-bottom: 14px;
}

.model-governance-hint {
  display: grid;
  gap: 4px;
  margin: 0 0 12px;
  padding: 10px 12px;
  border: 1px solid #d7e6f5;
  border-radius: 8px;
  background: #f6faff;
  color: var(--text);
}

.state-pill {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 22px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
  white-space: nowrap;
}

.state-pill + .state-pill {
  margin-left: 6px;
}

.state-pill.ok {
  background: #e4f6ee;
  color: var(--ok);
}

.state-pill.warn {
  background: #fff3d8;
  color: var(--warn);
}

.state-pill.neutral {
  background: #eef2f6;
  color: #34465a;
}

.model-governance-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}

.mcp-layout {
  height: 100%;
  overflow: hidden;
}

.mcp-layout.active {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 16px;
}

.custom-mcp-layout {
  position: relative;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

.custom-mcp-layout.active {
  display: grid;
  grid-template-columns: minmax(320px, .72fr) minmax(0, 1.28fr);
  gap: 16px;
}

.custom-mcp-layout.active.custom-mcp-sidebar-collapsed {
  grid-template-columns: minmax(0, 1fr);
}

.custom-mcp-layout.custom-mcp-sidebar-collapsed .custom-mcp-list-panel {
  display: none;
}

.custom-mcp-layout.custom-mcp-sidebar-collapsed .custom-mcp-editor {
  grid-column: 1 / -1;
}

.custom-mcp-list-panel,
.custom-mcp-editor {
  min-height: 0;
  overflow: auto;
}

.custom-mcp-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 12px;
}

.custom-mcp-form label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
}

.custom-mcp-form .wide {
  grid-column: 1 / -1;
}

.custom-mcp-form .check {
  align-self: center;
  min-height: 34px;
}

.custom-mcp-tools {
  display: grid;
  gap: 8px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.compact-output {
  min-height: 120px;
  max-height: 260px;
  margin-top: 12px;
}

.mcp-header {
  display: grid;
  grid-template-columns: minmax(240px, .7fr) minmax(0, 1fr);
  gap: 18px;
  align-items: end;
}

.mcp-header h3 {
  margin: 10px 0 5px;
}

.mcp-search {
  display: grid;
  grid-template-columns: minmax(180px, .85fr) minmax(220px, 1fr) 130px 110px 90px auto;
  gap: 10px;
  align-items: end;
}

.mcp-search label {
  color: var(--muted);
  font-size: 12px;
}

.mcp-grid {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(300px, .8fr) minmax(0, 1fr) minmax(260px, .7fr);
  gap: 16px;
}

.mcp-list {
  display: grid;
  gap: 9px;
}

.mcp-row {
  width: 100%;
  display: grid;
  gap: 7px;
  min-height: auto;
  padding: 11px;
  text-align: left;
  color: var(--text);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 7px;
}

.mcp-row:hover,
.mcp-row.active {
  background: #e7f4f1;
  border-color: #9bcfc7;
}

.mcp-row p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
}

.mcp-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.mcp-tags span {
  display: inline-flex;
  align-items: center;
  min-height: 23px;
  padding: 0 8px;
  border-radius: 999px;
  background: #edf2f7;
  color: #536477;
  font-size: 12px;
  font-weight: 700;
}

.mcp-detail {
  display: grid;
  gap: 13px;
}

.mcp-detail h3,
.mcp-detail h4,
.mcp-detail p {
  margin: 0;
}

.mcp-detail p {
  color: var(--muted);
  line-height: 1.45;
}

.detail-tags {
  margin-top: -4px;
}

.compact-kv {
  gap: 4px;
}

.compact-kv > div {
  padding: 7px 0;
}

.policy-note {
  padding: 10px;
  border: 1px solid #f0d9a7;
  border-radius: 7px;
  background: #fff9eb;
}

.install-box {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.param-list {
  display: grid;
  gap: 7px;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #f8fafc;
}

.param-list > div {
  display: grid;
  gap: 2px;
}

.param-list span,
.param-list p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}

.doc-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
}

.output {
  width: 100%;
  min-height: 180px;
  max-height: 420px;
  overflow: auto;
  white-space: pre-wrap;
  background: #101926;
  color: #dbe8f6;
  border-radius: 8px;
  padding: 14px;
  border: 1px solid #253449;
}

.settings-panel {
  max-width: 900px;
}

.settings-form {
  display: grid;
  gap: 10px;
  max-width: 560px;
  margin: 16px 0;
}

.settings-form-wide {
  max-width: 760px;
}

.settings-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(120px, 1fr));
  gap: 10px;
}

.settings-grid.two {
  grid-template-columns: repeat(2, minmax(180px, 1fr));
}

.settings-form label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 13px;
}

.settings-form input,
.settings-form select {
  height: 38px;
}

.settings-form textarea {
  min-height: 116px;
  resize: vertical;
}

.compact-output {
  max-height: 220px;
}

.toast {
  position: fixed;
  right: 20px;
  bottom: 20px;
  max-width: 420px;
  background: #17202a;
  color: #fff;
  padding: 12px 14px;
  border-radius: 8px;
  box-shadow: var(--shadow);
  z-index: 20;
}

.toast.err { background: var(--danger); }
.toast.ok { background: var(--primary); }

@media (max-width: 1120px) {
  .console { grid-template-columns: 210px minmax(0, 1fr); }
  .console.main-sidebar-collapsed { grid-template-columns: 0 minmax(0, 1fr); }
  .status-grid { grid-template-columns: repeat(2, minmax(160px, 1fr)); }
  .split { grid-template-columns: 1fr; }
  .chat-tools { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .two-column { grid-template-columns: 280px minmax(0, 1fr); }
  .retrieval-studio-layout.active { grid-template-columns: 260px minmax(0, 1fr); }
  .retrieval-tuning-section { grid-template-columns: repeat(2, minmax(150px, 1fr)); }
  .retrieval-synonym-layout { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  body { overflow: auto; }
  .source-drawer { width: 100vw !important; min-width: 0; max-width: 100vw; }
  .source-drawer-resize { display: none; }
  .source-viewer-layout { grid-template-columns: 1fr; }
  .source-viewer-pane { min-height: 65vh; border-right: 0; border-bottom: 1px solid var(--line); }
  .source-doc-chat { min-height: 420px; }
  .console { min-height: 100vh; height: auto; grid-template-columns: 1fr; }
  .console.main-sidebar-collapsed { grid-template-columns: 1fr; }
  .sidebar { position: static; }
  .console.main-sidebar-collapsed .sidebar {
    display: none;
  }
  .sidebar-expand {
    top: 12px;
    height: 78px;
    min-height: 78px;
  }
  .nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .workspace { min-height: 100vh; }
  .topbar { align-items: stretch; flex-direction: column; }
  .top-actions { align-items: stretch; flex-direction: column; }
  .view { overflow: visible; }
  .two-column.active { display: block; }
  .list-panel { margin-bottom: 14px; }
  .collection-workspace { height: auto; overflow: visible; }
  .upload-panel { grid-template-columns: 1fr; }
  .status-grid, .form-grid, .chat-tools { grid-template-columns: 1fr; }
  .map-card { grid-template-columns: 1fr; }
  .grounding-docs li { grid-template-columns: auto minmax(0, 1fr); }
  .grounding-docs em,
  .grounding-docs small { grid-column: 2; }
  .mcp-layout.active, .mcp-header, .mcp-search, .mcp-grid { grid-template-columns: 1fr; }
  .custom-mcp-layout.active, .custom-mcp-form { grid-template-columns: 1fr; }
  .retrieval-studio-layout.active,
  .retrieval-profile-form,
  .retrieval-tuning-section,
  .retrieval-synonym-editor {
    grid-template-columns: 1fr;
  }
  .checks { grid-template-columns: 1fr; }
  .try-form { grid-template-columns: 1fr; }
  .retrieval-eval-form,
  .retrieval-eval-grid,
  .retrieval-suite-case { grid-template-columns: 1fr; }
}

/* Filler avatar per categoria (Fase 3) */
/* Campo ESPLICITO di associazione worker->categoria: distinto dalla cartella di upload sottostante. */
.filler-assoc { display: flex; flex-direction: column; gap: 4px; font-weight: 700; margin: 10px 0 4px; }
.filler-assoc > input { font-weight: 400; border: 1px solid #5b4bd6; border-radius: 8px; padding: 8px 10px; }
.filler-assoc-info { margin: 0 0 8px; font-size: 12px; }
.filler-assoc-info.warn { color: #b3261e; font-weight: 600; }
.filler-controls { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 8px 0; }
.filler-controls > input { flex: 1 1 160px; min-width: 140px; }
.filler-list { display: flex; flex-direction: column; gap: 10px; }
.filler-cat { border: 1px solid rgba(128, 128, 128, 0.3); border-radius: 8px; padding: 8px 10px; }
.filler-cat-name { font-weight: 600; margin-bottom: 6px; }
.filler-clip { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 3px 0; }
.filler-clip span { font-family: monospace; font-size: 0.85em; word-break: break-all; }

/* Controlli dello zoom del Flow: stanno nella barra accanto agli altri
   pulsanti, con la percentuale in mezzo perche' e' l'informazione che dice se
   si e' persi. */
.flow-zoom {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 8px;
}

.flow-zoom .meta {
  min-width: 46px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* Il cursore dice che la tela si puo' trascinare: senza, l'unico modo di
   scoprirlo e' provarci per caso. */
.flow-canvas { cursor: grab; }
.flow-canvas.in-trascinamento { cursor: grabbing; }
.flow-canvas [data-flow-node] { cursor: move; }

/* Riquadro di selezione: tratteggiato e appena riempito, cosi' si vede cosa si
   sta racchiudendo senza coprire i nodi sotto. */
.flow-riquadro {
  fill: rgba(47, 125, 109, 0.10);
  stroke: #2f7d6d;
  stroke-width: 1.5;
  stroke-dasharray: 6 4;
  pointer-events: none;
}

/* Un nodo selezionato si distingue da quello semplicemente attivo: la
   selezione multipla e' uno stato diverso dal "sto guardando questo". */
.flow-canvas [data-flow-node].selezionato rect:first-of-type {
  stroke: #2f7d6d;
  stroke-width: 2.5;
}

.flow-selezione-count {
  margin-left: 10px;
  font-weight: 700;
  color: #2f7d6d;
}

/* Anagrafica dell'agente nell'ispettore: stessa forma dell'editor delle
   relazioni che le sta sotto, cosi' le due sezioni si leggono come una scheda
   sola invece che come due pannelli accostati. */
.flow-anagrafica {
  display: grid;
  gap: 8px;
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}

.flow-anagrafica h4 { margin: 0; }
.flow-anagrafica label { display: grid; gap: 4px; font-size: 12px; color: var(--muted); }
.flow-anagrafica .meta { margin: 0; }
.flow-anagrafica.hidden { display: none; }

.flow-ricerca {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 10px;
}

.flow-ricerca input { min-width: 180px; }

/* La ricerca evidenzia, non filtra: i nodi restano tutti al loro posto e
   quelli che non corrispondono sbiadiscono, cosi' le frecce che li
   attraversano continuano a raccontare la relazione che si sta seguendo. */
.flow-canvas [data-flow-node].sbiadito { opacity: 0.22; }

.flow-canvas [data-flow-node].trovato rect:first-of-type {
  stroke: #b8860b;
  stroke-width: 3;
}

/* Sotto il 60% l'identificativo e il tipo diventano macchie illeggibili:
   restano il nome e il riquadro, che bastano a orientarsi da lontano. */
.flow-canvas.poco-dettaglio .flow-node-ref,
.flow-canvas.poco-dettaglio .flow-node-kind { display: none; }

.flow-canvas.poco-dettaglio .flow-node-label { font-size: 15px; }

/* Toolbox a sezioni richiudibili con ricerca in testa. Con 160 agenti e 265
   collezioni l'elenco completo riempiva la colonna di pulsanti fra cui era
   impossibile trovare qualcosa: il conteggio nell'intestazione dice quanto c'e'
   dentro senza doverla aprire. */
.flow-tool-testa {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #f4f8fb;
  font-weight: 700;
  color: #1b3b54;
  cursor: pointer;
}

.flow-tool-testa em {
  font-style: normal;
  font-weight: 700;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.flow-tool-testa[aria-expanded="false"] { background: #fff; }

.flow-tool-corpo {
  display: grid;
  gap: 6px;
  padding: 8px 0 4px;
}

.flow-tool-cerca { width: 100%; }

/* L'elenco scorre per conto suo: la colonna non deve allungarsi finche' la
   sezione successiva finisce fuori schermo. */
.flow-tool-elenco {
  display: grid;
  gap: 6px;
  max-height: 260px;
  overflow: auto;
}

.flow-tool-elenco .meta { margin: 0; padding: 4px 2px; }