/* GitHub Primer (github.com light) fallback — overridden by the active dark layer below */
:root {
  /* NAO repor `color-scheme` aqui. Esta declaracao dizia `light` e, por empatar em
     especificidade com a do design system (que diz `dark`) e vir depois na ordem de carga,
     GANHAVA-LHE sempre. O browser julgava a pagina clara mesmo no tema escuro, e isso
     partia tudo o que e desenhado pelo SISTEMA e nao por nos: barras de scroll claras,
     o preenchimento automatico do Chrome a pintar os campos de amarelo/branco no login
     escuro, seletores de ficheiro e de data, o cursor de texto e as caixas de verificacao.
     O color-scheme correto vive no contentlab.css, por tema. */
  --bg: #ffffff;
  --bg-2: #f6f8fa;
  --surface: #ffffff;
  --surface-2: #f6f8fa;
  --surface-3: #eaeef2;
  --inset: #f6f8fa;
  --line: #d0d7de;
  --line-2: #d8dee4;
  --text: #1f2328;
  --muted: #656d76;
  --faint: #8c959f;
  --accent: #0969da;
  --accent-light: #218bff;
  --accent-ink: #ffffff;
  --accent-subtle: var(--accent-subtle);
  --cyan: #0969da;
  --green: #1a7f37;
  --success: #1a7f37;
  --success-subtle: rgba(74, 194, 107, 0.15);
  --amber: #9a6700;
  --warning: #9a6700;
  --red: #cf222e;
  --danger: #cf222e;
  --danger-subtle: rgba(255, 129, 130, 0.15);
  --neutral: #656d76;
  --bad: #cf222e;
  --brand-green: #2e9e63;
  --brand-green-hover: #2a8f59;
  --tab-underline: #fd8c73;
  --soft: var(--accent-subtle);
  --soft-line: var(--accent-subtle);
  --shadow: none;
  --shadow-hover: none;
  --shadow-sm: none;
  --shadow-accent: none;
  --radius: 6px;
  --radius-sm: 6px;
  --radius-lg: 6px;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif;
  --display: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif;
}

* {
  box-sizing: border-box;
}

html,
body,
#app {
  min-height: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 14px/1.5 var(--font);
  -webkit-font-smoothing: antialiased;
}

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

button {
  cursor: pointer;
}

button:disabled,
input:disabled,
textarea:disabled {
  cursor: not-allowed;
  opacity: 0.48;
}

h1,
h2,
h3,
p {
  margin: 0;
}

h1 {
  font-size: 34px;
  font-family: var(--display);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: 0;
}

.mono {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}

.shell {
  min-height: 100vh;
  display: flex;
  background: var(--bg);
}

.main {
  min-width: 0;
  flex: 1;
  overflow: auto;
  position: relative;
}

.sidebar {
  width: 252px;
  flex: 0 0 252px;
  background: var(--bg-2);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  padding: 18px 14px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px 18px;
}

.brand-mark {
  width: 32px;
  height: 32px;
  border-radius: var(--radius);
  display: grid;
  place-items: center;
  background: var(--accent);
  color: var(--accent-ink);
  box-shadow: 0 0 0 1px var(--soft-line), 0 6px 24px rgba(198, 242, 78, 0.16);
}

.brand-name {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0;
}

.brand-sub,
.side-user em {
  display: block;
  color: var(--faint);
  font-size: 12px;
  font-style: normal;
}

.side-nav {
  display: grid;
  gap: 3px;
}

.nav-item {
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 38px;
  padding: 9px 10px;
  border-radius: var(--radius);
  text-align: left;
  transition: background var(--cl-t-fast) var(--cl-ease), color var(--cl-t-fast) var(--cl-ease);
}

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

.nav-item.sel {
  background: var(--surface-2);
  color: var(--text);
}

.nav-item.disabled {
  color: var(--faint);
}

.nav-item span {
  flex: 1;
}

.nav-count {
  color: var(--faint);
  font-size: 12px;
  font-style: normal;
}

.side-section {
  color: var(--faint);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0;
  padding: 22px 10px 8px;
  text-transform: uppercase;
}

.side-agents {
  display: grid;
  gap: 5px;
  min-width: 0;
  overflow-x: hidden;
  overflow-y: auto;
}

.side-agent {
  border: 0;
  background: transparent;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 38px;
  min-width: 0;
  width: 100%;
  padding: 5px 8px;
  border-radius: var(--radius);
  overflow: hidden;
  text-align: left;
}

.side-agent:hover,
.side-agent.sel {
  background: var(--surface);
  color: var(--text);
}

.side-agent span:last-child {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.side-empty {
  color: var(--faint);
  padding: 8px 10px;
}

.side-foot {
  margin-top: auto;
  padding-top: 18px;
  display: grid;
  gap: 12px;
}

.side-status {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 12px;
}

.status-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--green);
  box-shadow: 0 0 0 4px rgba(61, 214, 140, 0.14);
}

.side-user {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
}

.user-av {
  width: 31px;
  height: 31px;
  border-radius: var(--radius);
  background: var(--surface-3);
  display: grid;
  place-items: center;
  color: var(--text);
  font-size: 12px;
  font-weight: 700;
}

.side-user b {
  display: block;
  font-size: 13px;
}

.toast {
  position: sticky;
  top: 14px;
  z-index: 20;
  margin: 14px auto 0;
  max-width: 1180px;
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 10px 12px;
  box-shadow: var(--shadow);
}

.toast.error {
  color: #ffd4d3;
  border-color: rgba(239, 100, 97, 0.45);
  background: rgba(239, 100, 97, 0.11);
}

.library,
.detail,
.create-view,
.chat-view {
  max-width: 1180px;
  margin: 0 auto;
  min-height: 100vh;
  padding: 36px 40px;
}

.chat-view {
  display: flex;
  flex-direction: column;
  padding-bottom: 0;
}

.sub {
  color: var(--muted);
  margin-top: 4px;
}

.lib-head,
.create-head,
.detail-head,
.kn-head,
.chat-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.lib-head {
  align-items: flex-end;
  margin-bottom: 22px;
}

.stats-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
  margin-bottom: 22px;
}

.metric,
.ov-stat {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 15px;
}

.metric b,
.ov-stat b {
  display: block;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.1;
}

.metric em,
.ov-stat em {
  display: block;
  color: var(--faint);
  font-size: 12px;
  font-style: normal;
  margin-top: 4px;
}

.ov-stat small {
  display: block;
  color: var(--muted);
  font-size: 11px;
  margin-top: 7px;
}

.lib-toolbar {
  margin-bottom: 20px;
}

.search {
  max-width: 330px;
  height: 40px;
  display: flex;
  align-items: center;
  gap: 9px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0 13px;
  color: var(--faint);
}

.search input,
.chat-input input {
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  width: 100%;
}

.agent-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}

.agent-card {
  min-height: 206px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
  color: var(--text);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  position: relative;
  text-align: left;
  transition: transform var(--cl-t-fast) var(--cl-ease), border-color var(--cl-t-fast) var(--cl-ease), box-shadow var(--cl-t-fast) var(--cl-ease);
}

.agent-card:hover {
  border-color: var(--line-2);
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}

.new-card {
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--faint);
  border-style: dashed;
  background: transparent;
}

.new-card:hover {
  color: var(--accent);
  border-color: var(--soft-line);
  transform: none;
}

.new-card-plus {
  width: 44px;
  height: 44px;
  border: 1px solid currentColor;
  border-radius: 999px;
  display: grid;
  place-items: center;
}

.ac-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 13px;
}

.ac-del {
  opacity: 0;
}

.agent-card:hover .ac-del {
  opacity: 1;
}

.ac-name {
  font-size: 16px;
  font-weight: 700;
}

.ac-desc {
  min-height: 42px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
  margin: 4px 0 14px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.ac-sources {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 14px;
}

.ac-more {
  color: var(--faint);
  font-size: 12px;
}

.ac-foot {
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: auto;
  padding-top: 13px;
}

.ac-stat {
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
}

.ac-model {
  margin-left: auto;
  color: var(--muted);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 6px;
  font-family: var(--mono);
  font-size: 11px;
  padding: 3px 7px;
}

.btn {
  border: 1px solid transparent;
  border-radius: var(--radius);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 700;
  min-height: 38px;
  padding: 8px 14px;
  transition: background var(--cl-t-fast) var(--cl-ease), border-color var(--cl-t-fast) var(--cl-ease), box-shadow var(--cl-t-fast) var(--cl-ease), transform var(--cl-t-fast) var(--cl-ease);
  white-space: nowrap;
}

.btn-sm {
  min-height: 31px;
  padding: 5px 10px;
  font-size: 13px;
}

.btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}

.btn-primary:hover {
  box-shadow: 0 0 0 4px var(--soft), 0 8px 24px rgba(198, 242, 78, 0.14);
  transform: translateY(-1px);
}

.btn-ghost,
.btn-soft {
  background: var(--surface);
  border-color: var(--line);
  color: var(--text);
}

.btn-danger {
  background: rgba(220, 38, 38, 0.08);
  border-color: rgba(220, 38, 38, 0.48);
  color: var(--red);
}

.btn-ghost:hover,
.btn-soft:hover {
  background: var(--surface-2);
  border-color: var(--line-2);
}

.btn-danger:hover {
  background: rgba(220, 38, 38, 0.13);
  border-color: var(--red);
}

.icon-btn {
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  color: var(--faint);
  display: grid;
  place-items: center;
  transition: background var(--cl-t-fast) var(--cl-ease), color var(--cl-t-fast) var(--cl-ease);
}

.icon-btn:hover {
  background: var(--surface-2);
  color: var(--text);
}

.glyph {
  flex: 0 0 auto;
  border: 1px solid var(--soft-line);
  border-radius: var(--radius);
  background: var(--soft);
  color: var(--accent);
  display: grid;
  font-weight: 800;
  place-items: center;
}

.type-chip {
  border: 1px solid rgba(90, 209, 214, 0.28);
  border-radius: 7px;
  background: rgba(90, 209, 214, 0.12);
  color: var(--cyan);
  display: grid;
  flex: 0 0 auto;
  place-items: center;
}

.type-chip.good {
  border-color: rgba(61, 214, 140, 0.28);
  background: rgba(61, 214, 140, 0.12);
  color: var(--green);
}

.type-chip.wait {
  border-color: rgba(246, 196, 83, 0.28);
  background: rgba(246, 196, 83, 0.12);
  color: var(--amber);
}

.type-chip.bad {
  border-color: rgba(239, 100, 97, 0.28);
  background: rgba(239, 100, 97, 0.12);
  color: var(--red);
}

.mini-chip {
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  padding: 3px 8px;
}

.empty {
  min-height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 7px;
  padding: 34px 16px;
  text-align: center;
}

.empty-ico {
  width: 56px;
  height: 56px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--faint);
  display: grid;
  place-items: center;
  margin-bottom: 7px;
}

.empty-title {
  font-weight: 800;
  font-size: 16px;
}

.empty-sub {
  max-width: 340px;
  color: var(--muted);
}

.create-view {
  display: flex;
  flex-direction: column;
}

.create-head {
  padding-bottom: 26px;
}

.back-btn {
  border: 0;
  background: transparent;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 0;
}

.back-btn:hover {
  color: var(--text);
}

.step-rail {
  display: flex;
  align-items: center;
  gap: 4px;
}

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

.step-dot {
  width: 30px;
  height: 30px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--faint);
  display: grid;
  place-items: center;
  font-weight: 800;
}

.step-node.active .step-dot {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
  box-shadow: 0 0 0 4px var(--soft);
}

.step-node.done .step-dot {
  border-color: var(--soft-line);
  color: var(--accent);
}

.step-text {
  display: flex;
  flex-direction: column;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  text-transform: capitalize;
}

.step-text em {
  color: var(--faint);
  font-family: var(--mono);
  font-size: 11px;
  font-style: normal;
}

.step-node.active .step-text {
  color: var(--text);
}

.step-line {
  width: 36px;
  height: 1px;
  background: var(--line);
  margin: 0 8px;
}

.step-line.done {
  background: var(--soft-line);
}

.create-body {
  flex: 1;
}

.configure-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 312px;
  gap: 28px;
  align-items: start;
  max-width: 1000px;
  margin: 0 auto;
}

.cfg-main,
.cfg-side,
.settings-tab,
.knowledge-tab {
  display: grid;
  gap: 16px;
}

.cfg-side {
  position: sticky;
  top: 20px;
}

.section-label {
  color: var(--faint);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

.dropzone {
  border: 1.5px dashed var(--line-2);
  border-radius: var(--radius);
  background: var(--surface);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  padding: 36px 22px;
  text-align: center;
}

.file-drop {
  cursor: pointer;
  min-height: 292px;
  position: relative;
  transition: border-color var(--cl-t-fast) var(--cl-ease), background var(--cl-t-fast) var(--cl-ease), transform var(--cl-t-fast) var(--cl-ease);
}

.file-drop:hover,
.file-drop:focus-within {
  background: var(--surface-2);
  border-color: var(--accent);
  transform: translateY(-1px);
}

.file-drop.has-file {
  border-color: var(--accent);
}

.file-input {
  height: 1px;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  width: 1px;
}

.dropzone-ico {
  width: 58px;
  height: 58px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
  color: var(--accent);
  display: grid;
  place-items: center;
}

.dropzone-title {
  font-size: 17px;
  font-weight: 800;
}

.dropzone-sub {
  color: var(--muted);
  max-width: 520px;
}

.clear-source {
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--muted);
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  margin-top: 10px;
  padding: 7px 10px;
}

.clear-source:hover {
  border-color: var(--line-2);
  color: var(--text);
}

.dropzone-types {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin-top: 10px;
}

.dropzone-action {
  align-items: center;
  background: var(--accent);
  border-radius: var(--radius-sm);
  color: #11160c;
  display: inline-flex;
  font-size: 13px;
  font-weight: 800;
  justify-content: center;
  margin-top: 14px;
  min-height: 36px;
  padding: 0 16px;
}

.file-drop:hover .dropzone-action,
.file-drop:focus-within .dropzone-action {
  box-shadow: 0 0 0 4px rgba(190, 255, 62, 0.13);
}

.field {
  display: grid;
  gap: 7px;
}

.field-label {
  color: var(--muted);
  display: flex;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
}

.field-label em {
  color: var(--faint);
  font-style: normal;
  font-weight: 500;
}

.text-input,
.text-area,
select.text-input {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  padding: 10px 13px;
  outline: 0;
  transition: border-color var(--cl-t-fast) var(--cl-ease), box-shadow var(--cl-t-fast) var(--cl-ease);
}

.text-input.lg {
  font-size: 16px;
  font-weight: 800;
}

.text-area {
  min-height: 112px;
  line-height: 1.55;
  resize: vertical;
}

.text-area.tall {
  min-height: 176px;
}

.text-input:focus,
.text-area:focus {
  border-color: var(--soft-line);
  box-shadow: 0 0 0 4px var(--soft);
}

input::placeholder,
textarea::placeholder {
  color: var(--faint);
}

.side-card,
.kb-summary,
.knowledge-upload,
.ov-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 16px;
}

.glyph-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.glyph-opt {
  width: 38px;
  height: 38px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--muted);
  font-weight: 800;
}

.glyph-opt:hover,
.glyph-opt.sel {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--soft);
}

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

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

.graph-mode-card {
  min-height: 58px;
}

.model-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px 13px;
  text-align: left;
}

.model-card:hover,
.model-card.sel {
  border-color: var(--accent);
  background: var(--soft);
}

.model-radio {
  width: 16px;
  height: 16px;
  border: 2px solid var(--line-2);
  border-radius: 999px;
}

.model-card.sel .model-radio {
  border-color: var(--accent);
  background: radial-gradient(circle, var(--accent) 0 38%, transparent 42%);
}

.model-text b,
.model-text em {
  display: block;
}

.model-provider {
  color: var(--accent);
  display: block;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

.model-text em {
  color: var(--faint);
  font-size: 12px;
  font-style: normal;
}

.kb-summary {
  display: grid;
  gap: 10px;
}

.kb-row {
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 9px;
}

.create-foot {
  position: sticky;
  bottom: 0;
  border-top: 1px solid var(--line);
  background: linear-gradient(transparent, var(--bg) 30%);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 28px;
  padding: 18px 0;
}

.foot-info {
  color: var(--faint);
  font-size: 12px;
}

.foot-actions {
  display: flex;
  gap: 10px;
}

.detail-head {
  flex-wrap: wrap;
}

.detail-head .back-btn {
  width: 100%;
}

.detail-id {
  min-width: 0;
  flex: 1;
  display: flex;
  align-items: center;
  gap: 14px;
}

.detail-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ready-dot {
  color: var(--green);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 800;
}

.ready-dot.wait {
  color: var(--amber);
}

.ready-dot.bad {
  color: var(--red);
}

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

.tab {
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--muted);
  font-weight: 700;
  margin-bottom: -1px;
  padding: 11px 14px;
  text-transform: capitalize;
}

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

.tab.sel {
  border-bottom-color: var(--accent);
}

.detail-body {
  padding-top: 26px;
}

.overview {
  display: grid;
  gap: 16px;
}

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

.ov-card-h {
  color: var(--faint);
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 800;
  margin-bottom: 12px;
  text-transform: uppercase;
}

.instructions {
  color: var(--text);
  line-height: 1.65;
}

.ov-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ov-tool {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 11px;
}

.ov-tool svg {
  color: var(--accent);
}

.kb-id {
  color: var(--faint);
  font-size: 11px;
}

.knowledge-upload {
  display: grid;
  grid-template-columns: minmax(190px, 0.55fr) minmax(260px, 1fr) auto;
  align-items: end;
  gap: 12px;
}

.kn-stat {
  color: var(--muted);
}

.kn-stat b {
  color: var(--text);
}

.kn-table {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
}

.kn-tr {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 98px 82px 82px 82px 92px 82px 86px;
  gap: 12px;
  align-items: center;
  border-bottom: 1px solid var(--line);
  min-height: 56px;
  padding: 12px 16px;
}

.kn-tr:last-child {
  border-bottom: 0;
}

.kn-thead {
  min-height: 40px;
  background: var(--bg-2);
  color: var(--faint);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.kn-name {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

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

.kn-dim {
  color: var(--muted);
  font-size: 13px;
}

.graph-dim {
  color: var(--accent);
  font-weight: 800;
}

.kn-actions {
  display: flex;
  gap: 4px;
}

.kn-empty {
  color: var(--muted);
  padding: 18px;
}

.status {
  width: fit-content;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-size: 12px;
  padding: 3px 8px;
}

.status.good {
  border-color: rgba(61, 214, 140, 0.32);
  color: var(--green);
}

.status.wait {
  border-color: rgba(246, 196, 83, 0.32);
  color: var(--amber);
}

.status.bad,
.msg.refused .msg-bubble {
  border-color: rgba(239, 100, 97, 0.4);
  color: #ffd4d3;
}

.kn-status-cell {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
}

.kb-stale-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  padding: 10px 14px;
  border: 1px solid rgba(246, 196, 83, 0.32);
  border-radius: 10px;
  background: rgba(246, 196, 83, 0.08);
  color: var(--amber);
  font-size: 13px;
}

.kb-stale-banner .kb-stale-copy {
  flex: 1;
}

.kb-failed-banner {
  border-color: rgba(207, 34, 46, 0.32);
  background: rgba(207, 34, 46, 0.08);
  color: var(--red);
}

.kn-fail-reason {
  display: block;
  width: 100%;
  color: var(--red);
  font-size: 12px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.kb-warning-inbox {
  display: grid;
  gap: 8px;
  margin-bottom: 12px;
  padding: 10px 14px;
  border: 1px solid rgba(246, 196, 83, 0.32);
  border-radius: 10px;
  background: rgba(246, 196, 83, 0.08);
  font-size: 13px;
}

.kb-warning-head {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--amber);
}

.kb-warning-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  border-top: 1px solid rgba(246, 196, 83, 0.16);
}

.kb-warning-row .kb-warning-doc {
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 220px;
}

.kb-warning-row .kb-warning-msg {
  flex: 1;
  min-width: 0;
}

.kb-warning-row .kb-warning-time {
  color: var(--muted, rgba(255, 255, 255, 0.5));
  font-size: 12px;
  white-space: nowrap;
}

.extractor-tab {
  display: grid;
  gap: 16px;
}

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

.extractor-head h2 {
  font-size: 22px;
  line-height: 1.2;
}

.extractor-actions {
  display: flex;
  justify-content: flex-end;
}

.extractor-state {
  min-height: 180px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.extractor-preview {
  min-height: 520px;
  max-height: 72vh;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.65;
  margin: 0;
  padding: 18px;
  white-space: pre-wrap;
  word-break: break-word;
}

.deployments-tab {
  display: grid;
  gap: 18px;
}

.deploy-head {
  align-items: start;
  display: flex;
  justify-content: space-between;
  gap: 18px;
}

.deploy-head h2 {
  font-size: 22px;
  margin: 0 0 6px;
}

.deploy-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(110px, 1fr));
  gap: 10px;
  min-width: 240px;
}

.secret-panel,
.deploy-create,
.integration-panel {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  padding: 16px;
}

.secret-panel {
  display: grid;
  gap: 12px;
}

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

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

.secret-row code,
.integration-kv code,
.integration-code {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--text);
  font-family: var(--mono);
}

.secret-row code {
  overflow: hidden;
  padding: 11px 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.deploy-create {
  align-items: end;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
}

.deploy-create-mode {
  align-items: center;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: inline-flex;
  gap: 4px;
  padding: 4px;
}

.seg {
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  padding: 8px 10px;
}

.seg.sel {
  background: var(--surface);
  color: var(--text);
}

.seg:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.deploy-new-fields {
  display: grid;
  grid-template-columns: minmax(180px, 0.8fr) minmax(220px, 1fr);
  gap: 10px;
}

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

.deploy-tr {
  align-items: start;
  display: grid;
  grid-template-columns: minmax(180px, 1fr) 100px minmax(260px, 1.35fr) 120px 120px;
  gap: 12px;
  padding: 14px;
  border-bottom: 1px solid var(--line);
}

.deploy-tr:last-child {
  border-bottom: 0;
}

.deploy-thead {
  background: var(--surface);
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.deploy-app,
.deploy-keys,
.deploy-key,
.deploy-actions {
  display: grid;
  gap: 6px;
}

.deploy-app b {
  font-size: 14px;
}

.deploy-app .mono,
.deploy-key .mono {
  color: var(--muted);
  font-size: 11px;
  overflow-wrap: anywhere;
}

.deploy-key {
  border: 1px solid var(--line);
  border-radius: 8px;
  grid-template-columns: minmax(86px, 0.8fr) auto minmax(95px, 1fr) minmax(80px, 0.8fr) auto;
  align-items: center;
  padding: 8px;
}

.deploy-key > span {
  color: var(--muted);
  font-size: 12px;
}

.mini-action {
  border: 1px solid var(--line);
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  padding: 6px 8px;
}

.mini-action.danger {
  color: #ffd4d3;
}

.muted-text {
  color: var(--muted);
  font-size: 13px;
}

.integration-panel {
  display: grid;
  gap: 12px;
}

.integration-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.integration-kv {
  display: grid;
  gap: 6px;
}

.integration-kv span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.integration-kv code {
  min-width: 0;
  overflow: hidden;
  padding: 9px 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.integration-code {
  font-size: 12px;
  line-height: 1.6;
  margin: 0;
  overflow: auto;
  padding: 14px;
}

.spinner {
  width: 15px;
  height: 15px;
  border: 2px solid var(--line-2);
  border-top-color: var(--accent);
  border-radius: 999px;
  animation: spin 700ms linear infinite;
}

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

/* Mesmo anel afilado do .cl-spinner do design system (ver contentlab.css): a espera na
   dashboard passa a ter o desenho da espera no login, em vez de um arco a saltar num
   ecra e outra coisa qualquer no outro. Quem nao tiver conic-gradient ou mascaras fica com o
   anel de borda de cima, que continua a funcionar.
   A regra .spinner mais abaixo neste ficheiro so mexe em cores de borda: com a borda a
   zero nao pinta nada, e por isso nao ha aqui conflito nenhum. */
@supports ((-webkit-mask: radial-gradient(#000, #000)) or (mask: radial-gradient(#000, #000))) and (background: conic-gradient(#000, #000)) {
  .spinner {
    border: 0;
    background: conic-gradient(from 0deg, transparent 0deg, color-mix(in srgb, var(--accent) 10%, transparent) 100deg, var(--accent) 340deg, var(--accent) 360deg);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
            mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
    animation: spin 900ms linear infinite;
  }
}

.settings-tab {
  max-width: 700px;
}

.settings-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.temp-value {
  margin-left: 8px;
  font-variant-numeric: tabular-nums;
  color: var(--accent, #ff5a1f);
}

.temp-slider {
  width: 100%;
  accent-color: var(--accent, #ff5a1f);
  margin: 4px 0 2px;
}

.field-hint {
  font-size: 12px;
  line-height: 1.4;
  color: var(--muted, #9a9a9a);
}

.settings-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

.chat-head {
  border-bottom: 1px solid var(--line);
  justify-content: flex-start;
  padding: 18px 4px;
}

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

.chat-id b {
  display: block;
  font-size: 15px;
}

.chat-model {
  width: fit-content;
  color: var(--faint);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 6px;
  font-family: var(--mono);
  font-size: 11px;
  margin-top: 3px;
  padding: 3px 7px;
}

.chat-scroll {
  flex: 1;
  overflow-y: auto;
  margin: 0 -40px;
  padding: 28px 40px;
}

.chat-inner {
  max-width: 750px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.msg {
  display: flex;
  gap: 12px;
}

.msg.user {
  justify-content: flex-end;
}

.msg-body {
  max-width: 76%;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.msg.user .msg-body {
  align-items: flex-end;
}

.msg-bubble {
  border-radius: var(--radius);
  font-size: 14.5px;
  line-height: 1.55;
  padding: 12px 16px;
  white-space: pre-wrap;
}

.msg.assistant .msg-bubble {
  white-space: normal;
}

.msg.assistant .msg-bubble {
  border: 1px solid var(--line);
  background: var(--surface);
}

.msg.user .msg-bubble {
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 700;
}

.markdown-answer {
  display: grid;
  gap: 12px;
}

.markdown-answer h3,
.markdown-answer h4 {
  color: var(--text);
  font-size: 16px;
  line-height: 1.35;
  margin: 2px 0 0;
}

.markdown-answer p {
  margin: 0;
}

.markdown-answer ul,
.markdown-answer ol {
  display: grid;
  gap: 8px;
  margin: 0;
  padding-left: 19px;
}

.markdown-answer li {
  padding-left: 2px;
}

.markdown-answer strong {
  font-weight: 850;
}

.markdown-answer em {
  color: inherit;
  font-style: italic;
}

.markdown-answer code {
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--surface-2);
  color: var(--text);
  font-family: var(--mono);
  font-size: 0.92em;
  padding: 1px 5px;
}

.markdown-answer pre {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #0b0d12;
  margin: 0;
  max-width: 100%;
  overflow-x: auto;
  padding: 12px;
}

.markdown-answer pre code {
  border: 0;
  background: transparent;
  display: block;
  padding: 0;
  white-space: pre;
}

.msg-cites {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
}

.cite-label {
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 0;
}

.cite {
  max-width: 260px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  overflow: hidden;
  padding: 5px 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cite-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Inline citation markers and the per-marker citations panel. */
.cite-ref {
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
  vertical-align: super;
  color: var(--accent, #4f7cff);
  cursor: help;
  white-space: nowrap;
}

.markdown-answer .cite-ref {
  margin-left: 1px;
}

.citations-panel {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

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

.citation-item {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 420px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
  color: var(--muted);
  padding: 5px 9px;
}

.citation-item .cite-ref {
  vertical-align: baseline;
  color: var(--accent, #4f7cff);
  flex: 0 0 auto;
}

.citation-source {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  overflow: hidden;
}

.citation-score {
  margin-left: auto;
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  color: var(--muted);
}

.msg-bubble.thinking {
  display: flex;
  align-items: center;
  gap: 5px;
}

.msg-bubble.thinking .dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--faint);
  animation: bounce 1100ms infinite;
}

.msg-bubble.thinking .dot:nth-child(2) {
  animation-delay: 140ms;
}

.msg-bubble.thinking .dot:nth-child(3) {
  animation-delay: 280ms;
}

@keyframes bounce {
  0%,
  60%,
  100% {
    opacity: 0.5;
    transform: translateY(0);
  }

  30% {
    opacity: 1;
    transform: translateY(-5px);
  }
}

.chat-input-wrap {
  max-width: 750px;
  width: 100%;
  margin: 0 auto;
  padding: 16px 0 24px;
}

.chat-input {
  min-height: 52px;
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  background: var(--surface);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 6px 6px 16px;
}

.chat-input:focus-within {
  border-color: var(--soft-line);
  box-shadow: 0 0 0 4px var(--soft);
}

.send-btn {
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: var(--radius);
  background: var(--accent);
  color: var(--accent-ink);
  display: grid;
  place-items: center;
}

.chat-foot {
  color: var(--faint);
  font-size: 11px;
  margin-top: 10px;
  text-align: center;
}

.skeleton {
  border-radius: var(--radius);
  background: linear-gradient(90deg, var(--surface), var(--surface-2), var(--surface));
  background-size: 240% 100%;
  animation: shimmer 1400ms ease-in-out infinite;
}

.skeleton.wide {
  width: 300px;
  height: 34px;
  margin-bottom: 24px;
}

.skeleton-card {
  cursor: default;
}

.glyph-skel {
  width: 42px;
  height: 42px;
  margin-bottom: 14px;
}

.line {
  height: 14px;
  margin-bottom: 10px;
}

.line.short {
  width: 65%;
}

@keyframes shimmer {
  to {
    background-position: -240% 0;
  }
}

@media (max-width: 980px) {
  .sidebar {
    display: none;
  }

  .library,
  .detail,
  .create-view,
  .chat-view {
    padding: 24px 18px;
  }

  .configure-grid,
  .knowledge-upload,
  .settings-grid {
    grid-template-columns: 1fr;
  }

  .cfg-side {
    position: static;
  }

  .ov-stats,
  .stats-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .step-text {
    display: none;
  }

  .kn-tr {
    grid-template-columns: minmax(0, 1fr) 84px 70px;
  }

  .kn-tr span:nth-child(4),
  .kn-tr span:nth-child(5),
  .kn-tr span:nth-child(6) {
    display: none;
  }

  .detail-actions,
  .lib-head {
    align-items: stretch;
    flex-direction: column;
  }

  .detail-actions .btn,
  .lib-head .btn {
    width: 100%;
  }

  .chat-scroll {
    margin: 0 -18px;
    padding: 24px 18px;
  }

  .msg-body {
    max-width: 88%;
  }
}

@media (max-width: 560px) {
  h1 {
    font-size: 23px;
  }

  .agent-grid,
  .stats-strip,
  .ov-stats {
    grid-template-columns: 1fr;
  }

  .step-line {
    width: 20px;
    margin: 0 3px;
  }

  .create-foot {
    align-items: stretch;
    flex-direction: column;
  }

  .foot-actions {
    display: grid;
    grid-template-columns: 1fr;
  }
}

/* Minimalist Modern design-system overrides */
button,
input,
textarea,
select,
a {
  outline: none;
}

button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
.file-drop:focus-within {
  box-shadow: 0 0 0 2px var(--accent), 0 0 0 5px var(--bg);
}

.sidebar {
  border-right: 0;
  background:
    radial-gradient(circle, rgba(255, 255, 255, 0.08) 1px, transparent 1px) 0 0 / 32px 32px,
    radial-gradient(circle at 10% 0%, rgba(0, 82, 255, 0.2), transparent 34%),
    #0f172a;
  box-shadow: 0 20px 60px rgba(15, 23, 42, 0.22);
  backdrop-filter: blur(18px);
  color: var(--text);
}

.sidebar .brand-name,
.sidebar .side-user b {
  color: #ffffff;
}

.sidebar .brand-sub,
.sidebar .side-section,
.sidebar .side-empty,
.sidebar .nav-count,
.sidebar .side-user em {
  color: rgba(255, 255, 255, 0.58);
}

.sidebar .nav-item,
.sidebar .side-agent,
.sidebar .side-status {
  color: rgba(255, 255, 255, 0.72);
}

.sidebar .nav-item:hover,
.sidebar .side-agent:hover,
.sidebar .side-agent.sel,
.sidebar .nav-item.sel {
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
}

.sidebar .side-user {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.06);
  box-shadow: none;
}

.brand-mark,
.glyph,
.user-av,
.type-chip,
.empty-ico,
.dropzone-ico,
.step-dot,
.new-card-plus {
  border: 1px solid rgba(226, 232, 240, 0.82);
  box-shadow: var(--shadow-sm);
}

.brand-mark {
  background: linear-gradient(135deg, var(--accent), var(--accent-light));
  color: var(--accent-ink);
  box-shadow: var(--shadow-accent);
}

.brand-name,
.ac-name,
.empty-title,
.dropzone-title,
.detail-id h1,
.lib-head h1 {
  font-family: var(--display);
  font-weight: 400;
}

.lib-head h1,
.detail-id h1 {
  background: linear-gradient(90deg, var(--text), var(--accent) 74%, var(--accent-light));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.nav-item,
.side-agent,
.back-btn,
.icon-btn,
.tab,
.glyph-opt,
/* (o `transition: all` que aqui vivia foi removido: animava TUDO, incluindo largura, altura e o
   anel de foco, e era a razao de um .tab fora de .tabs se comportar de forma diferente. Estes
   seletores sao cobertos pela camada de movimento no fim do ficheiro.) */

.nav-item:hover,
.side-agent:hover,
.side-agent.sel,
.nav-item.sel {
  background: var(--soft);
  color: var(--accent);
}

.side-user,
.metric,
.ov-stat,
.agent-card,
.side-card,
.kb-summary,
.knowledge-upload,
.ov-card,
.kn-table,
.msg.assistant .msg-bubble,
.toast {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.metric b,
.ov-stat b {
  background: linear-gradient(90deg, var(--accent), var(--accent-light));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.agent-card,
.metric,
.ov-stat,
.side-card,
.kb-summary,
.knowledge-upload,
.ov-card,
.kn-table {
  padding: 22px;
}

.agent-card:hover,
.metric:hover,
.ov-stat:hover,
.ov-card:hover,
.side-card:hover,
.model-card:hover {
  box-shadow: var(--shadow-hover);
  transform: translateY(-3px);
}

.new-card {
  border: 1px dashed var(--line-2);
  background: linear-gradient(135deg, #ffffff, rgba(0, 82, 255, 0.035));
  box-shadow: var(--shadow-sm);
}

.new-card:hover {
  color: var(--accent);
  border-color: var(--soft-line);
  box-shadow: var(--shadow-hover);
  transform: translateY(-3px);
}

.section-label {
  width: fit-content;
  border: 1px solid var(--soft-line);
  border-radius: 999px;
  background: var(--soft);
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.15em;
  padding: 7px 12px;
}

.section-label::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--accent);
  animation: pulseDot 2s ease-in-out infinite;
}

.ac-foot,
.tabs,
.chat-head,
.create-foot,
.kn-tr {
  border-color: transparent;
}

.ac-model,
.chat-model,
.mini-chip,
.status,
.cite,
.ov-tool,
.dropzone-types span {
  border: 1px solid var(--soft-line);
  border-radius: 999px;
  background: var(--soft);
  color: var(--accent);
}

.btn {
  border: 1px solid transparent;
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  min-height: 44px;
}

.btn-primary,
.send-btn,
.dropzone-action {
  background: linear-gradient(135deg, var(--accent), var(--accent-light));
  color: var(--accent-ink);
  box-shadow: var(--shadow-accent);
}

.btn-primary:hover,
.btn-ghost:hover,
.btn-soft:hover,
.send-btn:hover,
.dropzone-action:hover {
  box-shadow: var(--shadow-hover);
  filter: brightness(1.08);
  transform: translateY(-2px);
}

.btn-primary svg,
.send-btn svg {
  transition: transform var(--cl-t-med) var(--cl-ease);
}

.btn-primary:hover svg,
.send-btn:hover svg {
  transform: translateX(2px);
}

.btn:active,
.send-btn:active,
.icon-btn:active,
.model-card:active,
.glyph-opt:active {
  transform: scale(0.98);
}

.btn-ghost,
.btn-soft,
.icon-btn,
.glyph-opt,
.model-card {
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.icon-btn {
  width: 44px;
  height: 44px;
  border-radius: var(--radius);
}

.search,
.chat-input,
.text-input,
.text-area,
select.text-input,
.dropzone {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.dropzone-ico,
.empty-ico {
  background: linear-gradient(135deg, var(--accent), var(--accent-light));
  color: var(--accent-ink);
  box-shadow: var(--shadow-accent);
}

.text-input:focus,
.text-area:focus,
.chat-input:focus-within,
.search:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent), 0 0 0 5px rgba(0, 82, 255, 0.08);
}

input::placeholder,
textarea::placeholder {
  color: var(--faint);
}

.dropzone {
  border-radius: var(--radius-lg);
  background:
    radial-gradient(circle at 16% 12%, rgba(0, 82, 255, 0.08), transparent 25%),
    var(--surface);
  box-shadow: var(--shadow);
}

.file-drop:hover,
.file-drop:focus-within,
.file-drop.has-file {
  border-color: var(--soft-line);
  background: linear-gradient(135deg, #ffffff, rgba(0, 82, 255, 0.04));
  box-shadow: var(--shadow-hover);
}

.model-card.sel,
.glyph-opt.sel,
.tab.sel {
  background: var(--soft);
  color: var(--accent);
  border-color: var(--soft-line);
  box-shadow: var(--shadow-accent);
}

.model-radio {
  border: 2px solid var(--line-2);
}

.model-card.sel .model-radio {
  background: radial-gradient(circle, var(--accent) 0 38%, transparent 42%);
}

.tab {
  border: 0;
  border-radius: var(--radius);
  min-height: 44px;
  padding: 11px 18px;
}

.tab:hover {
  background: var(--soft);
  box-shadow: var(--shadow-sm);
}

.step-node.active .step-dot {
  border: 0;
  background: linear-gradient(135deg, var(--accent), var(--accent-light));
  box-shadow: var(--shadow-accent);
}

.step-node.done .step-dot {
  color: var(--accent);
  border-color: var(--soft-line);
  background: var(--soft);
}

.step-line {
  height: 2px;
  border-radius: 999px;
  background: var(--line);
}

.step-line.done {
  background: linear-gradient(90deg, var(--accent), var(--accent-light));
}

.type-chip {
  background: var(--surface);
  color: var(--cyan);
}

.type-chip.good {
  background: var(--surface);
  color: var(--green);
}

.type-chip.wait {
  background: var(--surface);
  color: var(--amber);
}

.type-chip.bad,
.status.bad,
.msg.refused .msg-bubble {
  background: var(--surface);
  color: var(--red);
}

.status.good {
  color: var(--green);
}

.status.wait {
  color: var(--amber);
}

.kn-thead {
  background: var(--surface-2);
}

.chat-scroll {
  scrollbar-color: var(--line-2) transparent;
}

.chat-inner {
  animation: fadeInUp var(--cl-t-slow) var(--cl-ease) both;
}

.msg.user .msg-bubble {
  background: linear-gradient(135deg, var(--accent), var(--accent-light));
  box-shadow: var(--shadow-accent);
}

.markdown-answer pre {
  border: 1px solid var(--line);
  background: #0f172a;
  color: var(--text);
}

.markdown-answer code {
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--text);
}

.markdown-answer pre code {
  box-shadow: none;
}

.create-foot {
  background: linear-gradient(transparent, var(--bg) 24%);
}

.spinner {
  border-color: var(--line);
  border-top-color: var(--accent);
}

.skeleton {
  background: linear-gradient(90deg, var(--surface-2), #ffffff, var(--surface-2));
  box-shadow: var(--shadow-sm);
}

@keyframes pulseDot {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }

  50% {
    opacity: 0.62;
    transform: scale(1.3);
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(18px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 1ms !important;
  }
}

@media (max-width: 980px) {
  .sidebar {
    margin: 0;
    border-radius: 0;
  }
}

/* Polished alignment pass */
.shell {
  background:
    linear-gradient(180deg, rgba(0, 82, 255, 0.035), transparent 340px),
    var(--bg);
}

.main {
  scroll-behavior: smooth;
}

.library,
.detail,
.create-view,
.chat-view {
  width: min(100%, 1240px);
  max-width: none;
  padding: 40px clamp(24px, 4vw, 56px);
}

.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  padding: 20px 16px;
}

.brand {
  min-height: 58px;
  padding: 4px 8px 20px;
}

.brand-mark {
  width: 38px;
  height: 38px;
}

.side-nav {
  gap: 6px;
}

.nav-item,
.side-agent {
  min-height: 42px;
  border-radius: 10px;
}

.side-foot {
  gap: 14px;
}

.lib-head,
.detail-head,
.create-head {
  margin-bottom: 26px;
}

.lib-head {
  align-items: center;
}

.lib-head h1,
.detail-id h1 {
  font-size: clamp(30px, 4vw, 46px);
}

.sub {
  max-width: 620px;
  font-size: 14px;
}

.stats-strip,
.ov-stats {
  gap: 14px;
}

.metric,
.ov-stat {
  min-height: 106px;
  display: grid;
  align-content: space-between;
  padding: 18px;
}

.metric b,
.ov-stat b {
  font-size: 30px;
}

.lib-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}

.search {
  width: min(100%, 390px);
  max-width: none;
  height: 46px;
}

.agent-grid {
  grid-template-columns: repeat(auto-fill, minmax(292px, 1fr));
  gap: 18px;
  align-items: stretch;
}

.agent-card {
  min-height: 244px;
}

.ac-top {
  min-height: 48px;
  margin-bottom: 16px;
}

.ac-name {
  font-family: var(--font);
  font-size: 17px;
  font-weight: 800;
  letter-spacing: 0;
}

.ac-desc {
  min-height: 44px;
}

.ac-sources {
  min-height: 30px;
}

.ac-foot {
  gap: 8px;
  padding-top: 14px;
}

.ac-stat {
  min-width: 0;
}

.ac-model {
  max-width: 118px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.btn {
  min-height: 42px;
  padding-inline: 16px;
}

.btn svg,
.icon-btn svg,
.send-btn svg {
  flex: 0 0 auto;
}

.configure-grid {
  max-width: 1120px;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 340px);
  gap: 32px;
}

.cfg-main,
.cfg-side,
.knowledge-tab,
.settings-tab,
.overview {
  gap: 18px;
}

.dropzone {
  min-height: 286px;
  justify-content: center;
  padding: 34px clamp(20px, 4vw, 44px);
}

.dropzone-title {
  font-family: var(--font);
  font-size: 20px;
  font-weight: 800;
}

.dropzone-sub {
  max-width: 560px;
  line-height: 1.55;
}

.dropzone-action {
  min-height: 38px;
  padding: 0 18px;
}

.side-card,
.kb-summary,
.ov-card,
.knowledge-upload,
.kn-table {
  border-radius: 16px;
}

.glyph-picker {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.glyph-opt {
  width: 100%;
  min-width: 0;
}

.model-card {
  min-height: 70px;
  align-items: center;
}

.model-text {
  min-width: 0;
}

.model-text b,
.model-text em {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.create-foot {
  margin-inline: auto;
  width: min(100%, 1120px);
}

.detail-head {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
}

.detail-head .back-btn {
  grid-column: 1 / -1;
  width: fit-content;
}

.detail-id {
  min-width: 0;
}

.detail-id h1,
.detail-id .sub {
  overflow-wrap: anywhere;
}

.detail-actions {
  justify-content: flex-end;
  flex-wrap: wrap;
}

.ready-dot {
  min-height: 36px;
  border: 1px solid currentColor;
  border-radius: 999px;
  padding: 0 12px;
}

.tabs {
  gap: 8px;
  margin-top: 8px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  width: fit-content;
  box-shadow: var(--shadow-sm);
}

.tab {
  min-width: 112px;
}

.detail-body {
  padding-top: 22px;
}

.knowledge-upload {
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  padding: 16px;
}

.kb-health-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 14px;
}

.kb-health-grid .ov-stat {
  min-height: 98px;
  padding: 16px;
}

.kb-health-grid .ov-stat:first-child,
.kb-health-grid .ov-stat:nth-child(6) {
  grid-column: span 2;
}

.kb-health-status {
  min-height: 98px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: var(--shadow);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  color: var(--amber);
  font-weight: 800;
  padding: 16px;
  text-align: center;
}

.kb-health-status.good {
  color: var(--green);
}

.kb-health-status.bad {
  color: var(--red);
}

.knowledge-file-drop {
  min-width: 0;
  min-height: 78px;
  border: 1px dashed var(--line-2);
  border-radius: 14px;
  background: linear-gradient(135deg, #ffffff, rgba(0, 82, 255, 0.035));
  color: var(--text);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
  transition: border-color var(--cl-t-fast) var(--cl-ease), box-shadow var(--cl-t-fast) var(--cl-ease), transform var(--cl-t-fast) var(--cl-ease);
}

.knowledge-file-drop:hover,
.knowledge-file-drop:focus-within,
.knowledge-file-drop.has-file {
  border-color: var(--accent);
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}

.knowledge-file-drop .dropzone-ico {
  width: 48px;
  height: 48px;
}

.knowledge-file-copy {
  min-width: 0;
  display: grid;
  gap: 3px;
  flex: 1;
}

.knowledge-file-copy b,
.knowledge-file-copy em {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.knowledge-file-copy b {
  font-size: 15px;
  font-weight: 800;
}

.knowledge-file-copy em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
}

.knowledge-file-drop .dropzone-action {
  margin-top: 0;
  flex: 0 0 auto;
}

.knowledge-upload > .clear-source {
  margin: 0;
  min-height: 42px;
}

.knowledge-inventory {
  display: grid;
  gap: 24px;
}

.kb-inventory-section {
  display: grid;
  gap: 16px;
}

.section-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.section-label-row .section-label {
  margin-bottom: 0;
}

.kb-agent-groups,
.kb-orphan-list,
.orphan-chunk-list {
  display: grid;
  gap: 14px;
}

.kb-agent-group,
.kb-orphan-card {
  border: 1px solid var(--line);
  background: var(--surface);
}

.kb-agent-head {
  min-height: 72px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px;
}

.kb-agent-main {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 14px;
}

.kb-agent-main h2 {
  font-size: 18px;
  line-height: 1.2;
}

.kb-agent-main p {
  color: var(--muted);
  margin-top: 3px;
}

.kb-inventory-list {
  display: grid;
}

.kb-inventory-row {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(260px, auto) auto;
  align-items: center;
  gap: 16px;
  border-bottom: 1px solid var(--line);
  min-height: 72px;
  padding: 14px 18px;
}

.kb-inventory-row:last-child {
  border-bottom: 0;
}

.kb-inventory-name {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
}

.kb-inventory-name > svg {
  color: var(--accent);
  flex: 0 0 auto;
}

.kb-inventory-name span,
.kb-inventory-name b,
.kb-inventory-name em {
  min-width: 0;
}

.kb-inventory-name span {
  display: grid;
  gap: 3px;
}

.kb-inventory-name b,
.kb-inventory-name em {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kb-inventory-name em {
  color: var(--faint);
  font-size: 11px;
  font-style: normal;
}

.kb-inventory-metrics,
.kb-inventory-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.kb-inventory-metrics {
  color: var(--muted);
  font-size: 13px;
}

.kb-inventory-metrics b {
  color: var(--text);
}

.kb-inventory-actions {
  min-width: 112px;
}

.orphan-chunk-card {
  border: 1px solid var(--line);
  background: var(--surface);
  display: grid;
  gap: 12px;
  padding: 16px 18px;
}

.orphan-chunk-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.orphan-chunk-title {
  min-width: 0;
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.orphan-chunk-title > svg {
  color: var(--accent);
  flex: 0 0 auto;
  margin-top: 2px;
}

.orphan-chunk-title span,
.orphan-chunk-title b,
.orphan-chunk-title em {
  min-width: 0;
}

.orphan-chunk-title span {
  display: grid;
  gap: 4px;
}

.orphan-chunk-title b,
.orphan-chunk-title em {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.orphan-chunk-title em {
  color: var(--faint);
  font-size: 11px;
  font-style: normal;
}

.orphan-chunk-card p {
  color: var(--text);
  font-size: 13px;
  line-height: 1.55;
  margin: 0;
}

.orphan-chunk-meta,
.orphan-chunk-ids {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  color: var(--muted);
  font-size: 12px;
}

.orphan-chunk-meta b {
  color: var(--text);
  font-weight: 700;
}

.orphan-chunk-ids {
  color: var(--faint);
}

.create-ingest-page {
  width: 100%;
}

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

.kb-workbench {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
  gap: 18px;
  align-items: start;
}

.kn-head {
  min-width: 0;
}

.kb-id {
  max-width: min(48vw, 520px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kn-table {
  padding: 0;
}

.kn-tr {
  grid-template-columns: minmax(220px, 1fr) 112px 82px 82px 82px 96px 94px 92px;
  min-height: 64px;
  padding: 14px 18px;
}

.kn-tr.sel {
  background: rgba(0, 82, 255, 0.045);
}

.kn-tr.sel .source-name {
  color: var(--accent);
}

.kn-thead {
  min-height: 46px;
}

.source-name {
  border: 0;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  font: inherit;
  min-width: 0;
  overflow: hidden;
  padding: 0;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.source-name:hover {
  color: var(--accent);
}

.kn-actions {
  justify-content: flex-end;
}

.status {
  justify-self: start;
  text-transform: capitalize;
}

.chunk-drawer,
.retrieval-panel {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: var(--shadow);
  padding: 18px;
}

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

.panel-head .section-label {
  margin-bottom: 8px;
}

.panel-sub {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
  margin: 0;
  overflow-wrap: anywhere;
}

.panel-empty {
  border: 1px dashed var(--line-2);
  border-radius: 14px;
  color: var(--muted);
  display: grid;
  min-height: 120px;
  place-items: center;
  padding: 18px;
  text-align: center;
}

.chunk-list {
  display: grid;
  gap: 10px;
  max-height: 520px;
  overflow: auto;
  padding-right: 3px;
}

.chunk-card,
.retrieval-match {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--bg-2);
  padding: 13px;
}

.chunk-meta,
.match-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: var(--faint);
  font-size: 12px;
  margin-bottom: 8px;
}

.chunk-card p,
.retrieval-match p {
  color: var(--text);
  font-size: 13px;
  line-height: 1.55;
  margin: 0;
}

.chunk-full-text {
  color: var(--text);
  font-family: inherit;
  font-size: 13px;
  line-height: 1.55;
  margin: 0;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.retrieval-panel {
  display: grid;
  gap: 14px;
}

.retrieval-input {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
}

.retrieval-input input {
  min-height: 46px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  outline: 0;
  padding: 0 14px;
}

.retrieval-input input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent), 0 0 0 5px rgba(0, 82, 255, 0.08);
}

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

.match-top b {
  color: var(--text);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.score-pill {
  border: 1px solid var(--soft-line);
  border-radius: 999px;
  background: var(--soft);
  color: var(--accent);
  flex: 0 0 auto;
  font-family: var(--mono);
  font-size: 11px;
  padding: 3px 8px;
}

.settings-tab {
  max-width: 820px;
}

.settings-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
  padding-top: 4px;
}

.chat-view {
  width: 100%;
  max-width: none;
  padding-top: 0;
}

.chat-head {
  width: min(100%, 920px);
  margin: 0 auto;
  padding: 22px 0;
}

.chat-scroll {
  margin: 0 calc(clamp(24px, 4vw, 56px) * -1);
  padding: 34px clamp(24px, 4vw, 56px);
}

.chat-inner,
.chat-input-wrap {
  max-width: 860px;
}

.msg-body {
  max-width: min(78%, 720px);
}

.msg-bubble {
  border-radius: 18px;
  font-size: 15px;
  padding: 15px 18px;
}

.msg.user .msg-bubble {
  border-bottom-right-radius: 7px;
}

.msg.assistant .msg-bubble {
  border-bottom-left-radius: 7px;
}

.markdown-answer {
  gap: 14px;
}

.markdown-answer h3,
.markdown-answer h4 {
  font-family: var(--font);
  font-size: 17px;
  font-weight: 800;
}

.chat-input {
  min-height: 60px;
  border-radius: 18px;
  padding-left: 18px;
}

.send-btn {
  width: 46px;
  height: 46px;
  border-radius: 14px;
}

@media (max-width: 1180px) {
  .configure-grid {
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 24px;
  }

  .detail-head {
    grid-template-columns: 1fr;
  }

  .detail-actions {
    justify-content: flex-start;
  }
}

@media (max-width: 980px) {
  .library,
  .detail,
  .create-view,
  .chat-view {
    width: 100%;
    padding: 26px 18px;
  }

  .configure-grid,
  .knowledge-upload,
  .kb-workbench,
  .settings-grid {
    grid-template-columns: 1fr;
  }

  .kb-health-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .kb-health-grid .ov-stat:first-child,
  .kb-health-grid .ov-stat:nth-child(6) {
    grid-column: span 1;
  }

  .knowledge-upload {
    align-items: stretch;
  }

  .knowledge-upload .btn,
  .knowledge-upload > .clear-source {
    width: 100%;
  }

  .knowledge-file-drop {
    align-items: flex-start;
  }

  .knowledge-file-drop .dropzone-action {
    display: none;
  }

  .kb-inventory-row {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .kb-inventory-metrics,
  .kb-inventory-actions {
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .orphan-chunk-top {
    align-items: stretch;
    flex-direction: column;
  }

  .tabs {
    width: 100%;
    overflow-x: auto;
  }

  .tab {
    flex: 1 0 110px;
  }

  .kn-table {
    overflow-x: auto;
  }

  .kn-tr {
    min-width: 980px;
  }

  .retrieval-input {
    grid-template-columns: 1fr;
  }

  .retrieval-input .btn {
    width: 100%;
  }

  .chat-head,
  .chat-input-wrap {
    width: 100%;
  }

  .chat-scroll {
    margin: 0 -18px;
    padding: 24px 18px;
  }
}

@media (max-width: 640px) {
  .lib-head,
  .detail-id,
  .detail-actions,
  .create-foot {
    align-items: stretch;
    flex-direction: column;
  }

  .detail-id {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
  }

  .detail-actions .btn,
  .detail-actions .ready-dot,
  .lib-head .btn {
    width: 100%;
    justify-content: center;
  }

  .stats-strip,
  .ov-stats,
  .kb-health-grid,
  .agent-grid {
    grid-template-columns: 1fr;
  }

  .metric,
  .ov-stat {
    min-height: 92px;
    padding: 16px;
  }

  .metric b,
  .ov-stat b {
    font-size: 26px;
  }

  .agent-card {
    min-height: 220px;
  }

  .knowledge-file-drop {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
  }

  .msg-body {
    max-width: 92%;
  }
}

/* Contentlab design system — active token layer (re-skin).
   Deep navy canvas, teal accent, rounded surfaces, soft shadows, gradients.
   Ported from the deleg8lab contentlab kit; drives the whole app through var(). */
:root {
  /* Ponte de tokens: os tokens da Factory bebem do contentlab.css canonico (--cl-*),
     por isso o [data-theme] do contentlab passa a mandar (claro/escuro). Editar o
     design system em design-system/contentlab.css do agentqa (fonte de verdade). */
  --bg: var(--cl-bg);
  --bg-2: var(--cl-surface-1);
  --surface: var(--cl-surface-1);
  --surface-2: var(--cl-surface-2);
  --surface-3: var(--cl-surface-3);
  --inset: var(--cl-surface-1);
  --line: var(--cl-border);
  --line-2: var(--cl-border-strong);
  --text: var(--cl-text);
  --muted: var(--cl-text-muted);
  --faint: var(--cl-text-faint);
  --accent: var(--cl-accent);
  --accent-light: var(--cl-accent-hover);
  --accent-ink: var(--cl-on-accent);
  --accent-subtle: var(--cl-accent-dim);
  --cyan: var(--cl-info);
  --green: var(--cl-success);
  --success: var(--cl-success);
  --success-subtle: var(--cl-success-dim);
  --amber: var(--cl-warning);
  --warning: var(--cl-warning);
  --warning-subtle: var(--cl-warning-dim);
  --red: var(--cl-danger);
  --danger: var(--cl-danger);
  --danger-subtle: var(--cl-danger-dim);
  --scrim: var(--cl-scrim);
  --pending: var(--cl-pending);
  --pending-subtle: var(--cl-pending-dim);
  --neutral: var(--cl-text-muted);
  --bad: var(--cl-danger);
  --brand-green: var(--cl-accent-press);
  --brand-green-hover: var(--cl-accent-hover);
  --tab-underline: var(--cl-accent);
  --soft: var(--cl-accent-dim);
  --soft-line: var(--cl-accent-line);
  --shadow-sm: var(--cl-shadow-sm);
  --shadow: var(--cl-shadow-md);
  --shadow-hover: var(--cl-lift);
  --shadow-accent: 0 0 0 3px var(--accent-subtle);
  --radius: 14px;
  --radius-sm: 10px;
  --radius-lg: 18px;
  --radius-pill: 999px;
  --mono: var(--cl-font-mono);
  --font: var(--cl-font-body);
  --display: var(--cl-font-mono);
  --edge: var(--cl-edge);
  --grad-accent: var(--cl-grad-accent);
  --grad-accent-hi: var(--cl-grad-accent-hi);
  --grad-hero: linear-gradient(180deg, var(--text) 20%, var(--cl-text-faint));
  --grad-bar: var(--cl-grad-bar);
  /* As curvas e as duracoes NAO tem alias local: usa-se --cl-ease / --cl-spring / --cl-t-*
     diretamente do design system. Ter duas grafias para a mesma curva foi como se chegou a
     13 formas de escrever duas curvas. Se aparecer aqui um --ease de novo, e um regresso. */
}

body {
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: normal;
}

.shell,
.main {
  background: transparent;
}

.sidebar {
  background: var(--bg);
  border-right: 1px solid var(--line);
  box-shadow: none;
}

.sidebar .nav-item:hover,
.sidebar .side-agent:hover {
  background: var(--surface);
  color: var(--text);
}

.sidebar .side-agent.sel,
.sidebar .nav-item.sel {
  background: var(--surface);
  color: var(--text);
  font-weight: 600;
}

.brand-mark,
.glyph,
.user-av,
.type-chip,
.empty-ico,
.dropzone-ico,
.step-dot,
.new-card-plus {
  border-radius: var(--radius);
  box-shadow: none;
}

.brand-mark,
.glyph,
.user-av {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--line);
}

.empty-ico,
.dropzone-ico {
  background: var(--surface);
  color: var(--muted);
  border: 1px solid var(--line);
}

.library,
.detail,
.create-view,
.chat-view {
  width: 100%;
  max-width: 1216px;
  margin: 0 auto;
  padding: 24px 24px 48px;
}

h1,
.lib-head h1,
.detail-id h1 {
  color: var(--text);
  background: none;
  font-family: var(--display);
  font-size: clamp(52px, 8vw, 112px);
  font-weight: 900;
  letter-spacing: -0.055em;
  line-height: 0.9;
  text-transform: uppercase;
}

.sub,
.panel-sub,
.empty-sub,
.dropzone-sub,
.ac-desc,
.field-label,
.chat-foot,
.kn-stat,
.kb-id,
.metric em,
.ov-stat em {
  color: var(--muted);
}

.brand-name,
.ac-name,
.empty-title,
.dropzone-title,
.chat-id b,
.model-text b,
.match-top b {
  color: var(--text);
  font-family: var(--font);
  letter-spacing: -0.03em;
}

.brand-sub,
.side-section,
.nav-count,
.side-empty,
.side-user em,
.model-text em,
.knowledge-file-copy em,
.chunk-meta,
.field-label em {
  color: var(--faint);
}

.side-section,
.section-label,
.model-provider,
.kn-thead,
.btn,
.tab,
.dropzone-action,
.clear-source,
.status,
.mini-chip,
.score-pill,
.ready-dot,
.ac-model,
.chat-model {
  font-family: var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.metric,
.ov-stat,
.agent-card,
.side-card,
.kb-summary,
.knowledge-upload,
.ov-card,
.kn-table,
.chunk-drawer,
.retrieval-panel,
.msg.assistant .msg-bubble,
.toast,
.side-user,
.search,
.chat-input,
.text-input,
.text-area,
select.text-input,
.dropzone,
.chunk-card,
.retrieval-match,
.knowledge-file-drop,
.kb-health-status {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 0;
  box-shadow: none;
}

.metric:hover,
.ov-stat:hover,
.agent-card:hover,
.ov-card:hover,
.side-card:hover,
.model-card:hover,
.new-card:hover {
  border-color: var(--accent);
  box-shadow: none;
  transform: none;
}

.metric b,
.ov-stat b,
.ac-model,
.chat-model,
.mini-chip,
.status,
.cite,
.ov-tool,
.score-pill {
  background: transparent;
  color: var(--accent);
  -webkit-background-clip: initial;
  background-clip: initial;
}

.metric,
.ov-stat {
  min-height: 124px;
}

.metric b,
.ov-stat b {
  font-family: var(--display);
  font-size: clamp(34px, 4vw, 58px);
  font-weight: 900;
  letter-spacing: -0.06em;
}

.detail-id h1 {
  font-size: clamp(38px, 4.6vw, 66px);
  line-height: 0.96;
  max-width: 560px;
}

.knowledge-tab .ov-stat {
  min-height: 92px;
  padding: 16px 18px;
}

.knowledge-tab .ov-stat b {
  font-size: clamp(24px, 2.25vw, 34px);
  letter-spacing: 0;
  line-height: 1;
}

.kb-health-grid .ov-stat:first-child b {
  font-size: clamp(26px, 2.55vw, 38px);
}

.kb-health-status {
  min-height: 92px;
  font-size: 16px;
}

.section-label {
  min-height: 42px;
  min-width: 136px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border: 1px solid var(--line-2);
  border-left: 4px solid var(--accent);
  border-radius: 0;
  background: transparent;
  color: var(--text);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  margin: 0 0 18px;
  padding: 0 18px;
  text-align: center;
  width: fit-content;
}

.section-label::before {
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  background: var(--accent);
  animation: none;
}

.section-label + * {
  margin-top: 0;
}

.panel-head .section-label {
  margin-bottom: 14px;
}

.cfg-main > .section-label:not(:first-child),
.settings-grid .section-label,
.side-card .section-label,
.panel-head {
  margin-top: 10px;
}

.mini-chip,
.status,
.cite,
.ac-model,
.chat-model,
.score-pill,
.ready-dot,
.dropzone-types span,
.kb-health-status,
.ov-tool {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid var(--line-2);
  border-radius: 0;
  line-height: 1;
  padding: 0 12px;
  text-align: center;
  white-space: nowrap;
}

.dropzone-types,
.msg-cites,
.ov-tools,
.ac-sources {
  gap: 10px;
}

.ac-model,
.chat-model {
  max-width: none;
  overflow: visible;
  text-overflow: clip;
}

.msg-cites .cite {
  font-family: var(--font);
  justify-content: flex-start;
  letter-spacing: 0;
  max-width: min(360px, 100%);
  text-transform: none;
}

.btn {
  position: relative;
  min-height: 44px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
  padding: 0;
}

.btn::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 4px;
  height: 2px;
  background: currentColor;
  transform: scaleX(1);
  transform-origin: left;
  transition: transform var(--cl-t-fast) var(--cl-ease);
}

.btn:hover,
.btn-primary:hover,
.btn-ghost:hover,
.btn-soft:hover {
  background: transparent;
  box-shadow: none;
  color: var(--accent-light);
  filter: none;
  transform: none;
}

.btn:hover::after {
  transform: scaleX(1.12);
}

.btn-ghost,
.btn-soft,
.icon-btn,
.glyph-opt,
.model-card,
.tab,
.clear-source {
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 0;
  box-shadow: none;
  color: var(--text);
}

.icon-btn {
  width: 42px;
  height: 42px;
}

.icon-btn:hover,
.glyph-opt:hover,
.glyph-opt.sel,
.model-card:hover,
.model-card.sel,
.tab:hover,
.tab.sel {
  background: var(--text);
  border-color: var(--text);
  color: var(--bg);
  box-shadow: none;
}

.model-card:hover .model-text b,
.model-card.sel .model-text b {
  color: #0a0a0a;
}

.glyph-picker {
  gap: 16px;
}

.glyph-opt {
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: 22px;
  font-weight: 900;
  text-align: center;
}

.model-list {
  gap: 14px;
}

.model-card {
  min-height: 86px;
  align-items: center;
  padding: 16px;
}

.model-radio {
  border-color: var(--line-2);
}

.model-card.sel .model-radio {
  background: var(--accent);
  border-color: var(--accent);
}

.create-foot {
  width: 100%;
  margin-top: 32px;
  margin-inline: 0;
  padding: 18px clamp(16px, 2.4vw, 28px);
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface-2) 92%, transparent);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.foot-info {
  min-width: 0;
  max-width: 620px;
  line-height: 1.4;
}

.foot-actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  padding-left: 24px;
}

.foot-actions .btn {
  min-height: 44px;
}

.text-input,
.text-area,
select.text-input,
.retrieval-input input,
.search,
.chat-input {
  background: var(--surface-2);
  border-color: var(--line);
  color: var(--text);
}

select.text-input {
  text-align: center;
  text-align-last: center;
}

.text-input:focus,
.text-area:focus,
.retrieval-input input:focus,
.chat-input:focus-within,
.search:focus-within {
  border-color: var(--accent);
  box-shadow: none;
}

button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
.file-drop:focus-within {
  box-shadow: 0 0 0 2px var(--accent), 0 0 0 5px var(--bg);
}

.chat-input input:focus,
.chat-input input:focus-visible {
  outline: none;
  box-shadow: none;
}

.tabs {
  border: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  gap: 0;
  padding: 0;
}

.tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  min-width: 132px;
  border-width: 0 1px 0 0;
  text-align: center;
}

.tab:last-child {
  border-right: 0;
}

.step-rail {
  gap: 14px;
}

.step-dot,
.step-node.active .step-dot,
.step-node.done .step-dot {
  background: transparent;
  border: 1px solid var(--line-2);
  color: var(--text);
}

.step-node.active .step-dot {
  border-color: var(--accent);
  color: var(--accent);
}

.step-line,
.step-line.done {
  background: var(--line-2);
}

.dropzone,
.knowledge-file-drop {
  background: transparent;
  border-style: solid;
}

.dropzone {
  min-height: 330px;
}

.file-drop:hover,
.file-drop:focus-within,
.file-drop.has-file,
.knowledge-file-drop:hover,
.knowledge-file-drop:focus-within,
.knowledge-file-drop.has-file {
  background: var(--surface-2);
  border-color: var(--accent);
  box-shadow: none;
  transform: none;
}

.dropzone-title {
  font-size: clamp(24px, 4vw, 42px);
  font-weight: 900;
  letter-spacing: -0.045em;
  line-height: 1;
  text-transform: uppercase;
}

.dropzone-action {
  min-height: 42px;
  border: 1px solid var(--accent);
  border-radius: 0;
  background: transparent;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 18px;
  padding: 0 18px;
  text-align: center;
}

.dropzone-action:hover {
  background: var(--accent);
  color: var(--accent-ink);
  box-shadow: none;
  filter: none;
  transform: none;
}

.knowledge-upload,
.kb-workbench,
.retrieval-panel,
.settings-tab,
.configure-grid {
  gap: 24px;
}

.kb-workbench {
  display: grid;
  grid-template-columns: 1fr;
  align-items: stretch;
}

.chunk-drawer {
  width: 100%;
}

.knowledge-file-drop {
  gap: 18px;
  padding: 18px;
}

.kn-thead {
  background: var(--surface-2);
}

.kn-tr {
  border-color: var(--line);
}

.kn-tr.sel {
  background: var(--soft);
}

.source-name {
  color: var(--text);
}

.source-name:hover,
.kn-tr.sel .source-name {
  color: var(--accent);
}

.status.good,
.kb-health-status.good,
.ready-dot:not(.wait):not(.bad) {
  color: var(--green);
  border-color: rgba(37, 211, 102, 0.5);
}

.status.wait,
.kb-health-status.wait,
.ready-dot.wait {
  color: var(--amber);
  border-color: rgba(245, 158, 11, 0.5);
}

.status.bad,
.kb-health-status.bad,
.ready-dot.bad,
.msg.refused .msg-bubble {
  color: var(--red);
  border-color: rgba(255, 90, 61, 0.6);
}

.chat-head {
  border-color: var(--line);
}

.msg-bubble,
.msg.user .msg-bubble,
.msg.assistant .msg-bubble,
.chat-input,
.send-btn {
  border-radius: 0;
}

.msg.user .msg-bubble {
  background: var(--accent);
  color: var(--accent-ink);
}

.send-btn {
  border: 1px solid var(--accent);
}

.send-btn:hover {
  background: transparent;
  color: var(--accent);
  box-shadow: none;
  filter: none;
  transform: none;
}

.text-area.auto-resize {
  min-height: 46px;
  overflow: hidden;
  resize: none;
}

.prompt-section-editor {
  display: grid;
  gap: 12px;
}

.prompt-editor-head {
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1fr);
}

.template-badge {
  margin-left: 10px;
  padding: 2px 8px;
  border: 1px solid var(--accent, #ff5a1f);
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent, #ff5a1f);
  white-space: nowrap;
}

.template-badge.template-badge-policy {
  border-style: dashed;
  border-color: var(--muted);
  color: var(--muted);
}

.prompt-template-tools {
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(200px, 280px) minmax(260px, 1fr);
}

.prompt-template-select {
  display: grid;
  gap: 6px;
}

.prompt-template-select span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.prompt-template-save {
  align-items: end;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.prompt-template-save > input.text-input {
  flex: 1 1 140px;
  min-width: 140px;
  width: auto;
}

.prompt-template-save > .prompt-template-select {
  flex: 1 1 200px;
  min-width: 200px;
}

.prompt-template-strict-toggle {
  align-items: center;
  color: var(--muted);
  display: flex;
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 700;
  gap: 8px;
  padding-bottom: 10px;
  white-space: nowrap;
}

.prompt-template-strict-toggle input[type="checkbox"] {
  width: auto;
}

.prompt-section {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  display: grid;
  gap: 10px;
  padding: 14px;
}

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

.prompt-section-head b {
  display: block;
  font-weight: 800;
}

.prompt-section-head em {
  color: var(--faint);
  display: block;
  font-size: 12px;
  font-style: normal;
}

.enhance-section-btn {
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--text);
  display: inline-flex;
  flex: 0 0 auto;
  gap: 7px;
  font-size: 12px;
  font-weight: 800;
  min-height: 34px;
  padding: 7px 10px;
  text-transform: uppercase;
}

.enhance-section-btn:hover {
  border-color: var(--line-2);
  background: var(--surface-2);
}

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

  .prompt-template-save > input.text-input,
  .prompt-template-save > .prompt-template-select {
    flex-basis: 100%;
  }
}

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

.knowledge-source-list {
  grid-column: 1 / -1;
  margin-top: 0;
}

.source-file-row {
  align-items: center;
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--text);
  display: flex;
  gap: 12px;
  justify-content: space-between;
  min-height: 56px;
  padding: 10px 12px;
}

.source-file-row.source-file-failed {
  border-color: var(--bad);
}

.source-file-main {
  align-items: center;
  display: flex;
  gap: 10px;
  min-width: 0;
}

.source-file-main svg {
  color: var(--accent);
  flex: 0 0 auto;
}

.source-file-copy {
  display: grid;
  min-width: 0;
}

.source-file-copy b,
.source-file-copy em {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.source-file-copy b {
  font-weight: 800;
}

.source-file-copy em {
  color: var(--faint);
  font-size: 12px;
  font-style: normal;
}

.source-file-error {
  color: var(--bad);
  font-size: 12px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.source-file-remove {
  flex: 0 0 auto;
  height: 36px;
  width: 36px;
}

.markdown-answer pre {
  background: #0a0a0a;
  border-color: var(--line-2);
}

.markdown-answer code {
  background: var(--surface-2);
  border-color: var(--line);
  color: var(--text);
}

.overview {
  gap: 24px;
}

.overview-hero,
.overview-grid,
.overview-side {
  display: grid;
  gap: 18px;
}

.overview-hero {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  border: 1px solid var(--line);
  background:
    linear-gradient(90deg, rgba(255, 61, 0, 0.12), transparent 48%),
    var(--surface);
  padding: clamp(20px, 3vw, 34px);
}

.overview-hero-main {
  min-width: 0;
  display: grid;
  gap: 14px;
}

.overview-status {
  width: fit-content;
  min-height: 36px;
  border: 1px solid rgba(37, 211, 102, 0.5);
  color: var(--green);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1;
  padding: 0 12px;
  text-transform: uppercase;
  white-space: nowrap;
}

.overview-status.wait {
  border-color: rgba(245, 158, 11, 0.5);
  color: var(--amber);
}

.overview-status.bad {
  border-color: rgba(255, 90, 61, 0.6);
  color: var(--red);
}

.overview-hero h2 {
  color: var(--text);
  font-family: var(--display);
  font-size: 56px;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 0.96;
  margin: 0;
  max-width: 820px;
  text-transform: uppercase;
}

.overview-hero p,
.overview-note,
.overview-empty-source {
  color: var(--muted);
  line-height: 1.55;
}

.overview-hero p {
  max-width: 680px;
}

.overview-hero-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
  flex-wrap: wrap;
}

.overview-grid {
  grid-template-columns: minmax(0, 1.2fr) minmax(260px, 0.8fr);
  align-items: stretch;
}

.overview-side {
  align-content: start;
}

.overview-card {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-height: 100%;
  padding: clamp(18px, 2.2vw, 24px);
}

.overview-card .ov-card-h {
  margin-bottom: 0;
}

.coverage-meter {
  height: 12px;
  border: 1px solid var(--line-2);
  background: #0a0a0a;
  overflow: hidden;
}

.coverage-meter span {
  display: block;
  height: 100%;
  min-width: 2px;
  background: var(--accent);
}

.overview-kv {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--line);
}

.overview-kv-row {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, auto);
  gap: 18px;
  align-items: center;
  border-bottom: 1px solid var(--line);
  padding: 12px 0;
}

.overview-kv-row span,
.overview-source-name span {
  color: var(--muted);
}

.overview-kv-row b {
  min-width: 0;
  color: var(--text);
  font-weight: 800;
  overflow: hidden;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.overview-runtime .overview-kv-row {
  grid-template-columns: 1fr;
  gap: 4px;
}

.overview-runtime .overview-kv-row b {
  overflow-wrap: anywhere;
  text-align: left;
  white-space: normal;
}

.overview-source-list {
  display: grid;
  gap: 10px;
}

.overview-source {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  border: 1px solid var(--line);
  padding: 12px;
}

.overview-source-name {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.overview-source-name b {
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.overview-source-name span,
.overview-note,
.overview-empty-source {
  font-size: 13px;
}

.overview-empty-source {
  border: 1px dashed var(--line-2);
  padding: 18px;
}

@media (max-width: 980px) {
  h1,
  .lib-head h1,
  .detail-id h1 {
    font-size: clamp(44px, 16vw, 72px);
  }

  .detail-id h1 {
    font-size: clamp(34px, 10vw, 52px);
  }

  .knowledge-tab .ov-stat b,
  .kb-health-grid .ov-stat:first-child b {
    font-size: clamp(24px, 8vw, 34px);
  }

  .section-label {
    min-width: 120px;
    margin-bottom: 16px;
  }

  .overview-hero,
  .overview-grid,
  .overview-side,
  .deploy-create,
  .deploy-head,
  .integration-grid {
    grid-template-columns: 1fr;
  }

  .deploy-head {
    display: grid;
  }

  .deploy-summary,
  .deploy-new-fields {
    grid-template-columns: 1fr;
  }

  .deploy-tr {
    grid-template-columns: 1fr;
  }

  .deploy-thead {
    display: none;
  }

  .deploy-key {
    grid-template-columns: 1fr;
  }

  .overview-hero {
    align-items: start;
  }

  .overview-hero-actions {
    justify-content: flex-start;
  }

  .overview-hero h2 {
    font-size: 44px;
  }
}

@media (max-width: 640px) {
  .library,
  .detail,
  .create-view,
  .chat-view {
    padding: 34px 18px;
  }

  .metric,
  .ov-stat {
    min-height: 104px;
  }

  .glyph-picker {
    gap: 10px;
  }

  .mini-chip,
  .status,
  .cite,
  .ac-model,
  .chat-model,
  .score-pill,
  .ready-dot,
  .dropzone-types span {
    min-height: 32px;
    white-space: normal;
  }

  .create-foot {
    gap: 16px;
    padding: 16px;
  }

  .foot-actions {
    width: 100%;
    padding-left: 0;
  }

  .overview-hero-actions,
  .overview-hero-actions .btn {
    width: 100%;
  }

  .overview-hero-actions {
    align-items: stretch;
    flex-direction: column;
    gap: 10px;
  }

  .overview-hero-actions .btn {
    justify-content: center;
  }

  .tabs {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    overflow: visible;
  }

  .tab {
    min-width: 0;
    padding-inline: 8px;
  }

  .overview-status {
    white-space: normal;
  }

  .overview-hero h2 {
    font-size: 34px;
  }

  .overview-kv-row {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .overview-kv-row b {
    text-align: left;
  }

  .source-file-row {
    align-items: stretch;
  }
}

/* ===== AI connections (Settings) ===== */
.connections-settings { display: flex; flex-direction: column; gap: 22px; }
.lib-head-actions { display: flex; gap: 10px; align-items: center; }
.conn-loading { color: var(--muted); padding: 24px 4px; }
.conn-list { display: flex; flex-direction: column; gap: 14px; }
.conn-card {
  display: flex; justify-content: space-between; gap: 18px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 18px 20px; box-shadow: var(--shadow-sm);
}
.conn-card.disabled { opacity: 0.6; }
.conn-card-main { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.conn-card-head { display: flex; align-items: center; gap: 10px; font-size: 16px; }
.conn-card-head b { color: var(--text); }
.conn-url { font-family: var(--mono); font-size: 13px; color: var(--muted); }
.conn-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.conn-badge {
  font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 999px;
  background: var(--soft); color: var(--accent); border: 1px solid var(--soft-line);
}
.conn-badge.accent { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.conn-badge.muted { background: var(--surface-2); color: var(--muted); border-color: var(--line); }
.conn-models { display: flex; flex-wrap: wrap; gap: 6px; }
.conn-model-chip {
  font-family: var(--mono); font-size: 12px; padding: 3px 9px; border-radius: 8px;
  background: var(--surface-2); color: var(--text); border: 1px solid var(--line);
}
.conn-model-chip.sel { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); cursor: pointer; }
.conn-card-actions { display: flex; flex-direction: column; gap: 8px; align-items: stretch; }

/* form overlay */
.conn-form-overlay {
  position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center;
  background: var(--scrim); padding: 24px;
}
.conn-form {
  width: min(640px, 100%); max-height: 90vh; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 24px; box-shadow: var(--shadow-hover);
  display: flex; flex-direction: column; gap: 16px;
}
.conn-form-head { display: flex; align-items: center; justify-content: space-between; }
.conn-form-head h2 { margin: 0; font-size: 18px; }
.icon-btn { background: none; border: none; color: var(--muted); cursor: pointer; padding: 4px; border-radius: 8px; }
.icon-btn:hover { color: var(--text); background: var(--surface-2); }
/* Modal do relatorio de QA: quase ecra inteiro (o report.html e uma pagina cheia). Reusa o scrim
   .conn-form-overlay; painel proprio porque o .conn-form limita a 640px. Header fixo + iframe a preencher. */
.qa-report-modal {
  width: min(1280px, calc(100vw - 32px)); height: calc(100vh - 40px);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-hover); overflow: hidden; display: flex; flex-direction: column;
}
.qa-report-modal > .conn-form-head { padding: 14px 18px; border-bottom: 1px solid var(--line); flex: none; }
.qa-report-tools { display: flex; align-items: center; gap: 8px; }
.qa-report-frame { flex: 1; width: 100%; border: 0; background: var(--surface); }
.qa-report-state { flex: 1; display: flex; align-items: center; justify-content: center; gap: 10px; color: var(--muted); font-size: 14px; padding: 24px; text-align: center; }
.conn-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.conn-test-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.conn-test-result { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; }
.conn-test-result.ok { color: var(--green); }
.conn-test-result.fail { color: var(--red); }
.conn-discovered { display: flex; flex-direction: column; gap: 8px; }
.conn-check { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--text); cursor: pointer; }
.conn-check input { width: 16px; height: 16px; accent-color: var(--accent); }
.conn-embedding-config {
  display: flex; flex-direction: column; gap: 12px;
  padding: 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-2);
}
.conn-warning {
  display: flex; align-items: flex-start; gap: 8px; font-size: 12.5px; line-height: 1.4;
  color: var(--amber); background: rgba(217, 119, 6, 0.08);
  border: 1px solid rgba(217, 119, 6, 0.3); border-radius: var(--radius); padding: 10px 12px;
}
.conn-form-actions { display: flex; justify-content: flex-end; gap: 10px; }
.btn-danger { color: var(--red); border-color: var(--red); }
.btn-danger:hover { background: var(--red); color: #fff; }

/* ── QA tab (AgentQA) ──────────────────────────────────────────────────────── */
.qa-tab { display: flex; flex-direction: column; gap: 18px; }
.qa-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.qa-head-actions { display: flex; align-items: center; gap: 12px; }
.qa-running { display: inline-flex; align-items: center; gap: 10px; font-size: 13.5px; font-weight: 600; color: var(--accent); }
.qa-hint { margin: 0; font-size: 13px; color: var(--amber); }
.qa-log {
  margin: 0; padding: 12px 14px; max-height: 240px; overflow: auto;
  font-family: var(--mono); font-size: 12px; line-height: 1.55; white-space: pre-wrap; word-break: break-word;
  color: var(--muted); background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius);
}
.qa-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 900px) { .qa-grid { grid-template-columns: 1fr; } }
.qa-side { display: flex; flex-direction: column; gap: 16px; }
.qa-score-row { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; }
.qa-score { font-family: var(--display); font-size: 44px; line-height: 1; }
.qa-score.good { color: var(--green); }
.qa-score.wait { color: var(--amber); }
.qa-score.bad { color: var(--red); }
.qa-score-meta { display: flex; flex-direction: column; gap: 5px; }
.qa-gate {
  align-self: flex-start; padding: 3px 10px; border-radius: 999px;
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.06em; border: 1px solid;
}
.qa-gate.good { color: var(--green); border-color: var(--accent-subtle); background: var(--accent-subtle); }
.qa-gate.wait { color: var(--amber); border-color: rgba(217, 119, 6, 0.5); background: rgba(217, 119, 6, 0.08); }
.qa-gate.bad { color: var(--red); border-color: rgba(220, 38, 38, 0.5); background: rgba(220, 38, 38, 0.08); }
.qa-meta-line { font-size: 12.5px; color: var(--muted); }
.qa-cats { display: flex; flex-direction: column; gap: 3px; }
.qa-cat-block { border-radius: var(--radius-sm); }
.qa-cat-block.open { background: var(--surface-2); }
.qa-cat {
  width: 100%; display: grid; grid-template-columns: 16px 126px minmax(0, 1fr) auto 42px;
  align-items: center; gap: 10px; padding: 7px 10px; border: 0; background: none; font: inherit;
  color: inherit; text-align: left; border-radius: var(--radius-sm); cursor: pointer;
}
.qa-cat:not(.static):hover { background: var(--surface-2); }
.qa-cat.static { cursor: default; }
.qa-cat-chev { font-size: 9px; color: var(--faint); }
.qa-cat-detail { padding: 0 12px 14px 38px; display: flex; flex-direction: column; gap: 12px; }
.qa-cat-mede { margin: 0; font-size: 12.5px; color: var(--muted); line-height: 1.5; }
.qa-cat-detail-h { font-size: 10.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--faint); margin-bottom: 8px; }
.qa-cat-fail { padding: 8px 11px; margin-bottom: 6px; border-radius: var(--radius-sm); background: var(--surface-3); border-left: 2px solid var(--red); display: flex; flex-direction: column; gap: 3px; }
.qa-cat-fail:last-child { margin-bottom: 0; }
.qa-cat-fail-q { font-size: 12.5px; color: var(--text); line-height: 1.4; }
.qa-cat-fail-r { font-size: 12px; color: var(--muted); line-height: 1.45; }
/* Detalhe nativo: TODOS os casos de uma categoria (pergunta, resposta, veredicto, razao). Substitui o
   report.html embebido; a borda esquerda e colorida pelo veredicto. */
.qa-cat-cases { display: flex; flex-direction: column; gap: 7px; }
.qa-case { padding: 9px 11px; border-radius: var(--radius-sm); background: var(--surface-3); border-left: 2px solid var(--line); display: flex; flex-direction: column; gap: 5px; }
.qa-case.PASS { border-left-color: var(--green); }
.qa-case.FAIL { border-left-color: var(--red); }
.qa-case.NEEDS_JUDGE { border-left-color: var(--amber); }
.qa-case-head { display: flex; align-items: baseline; gap: 8px; }
.qa-case-v { font-size: 9px; font-weight: 800; letter-spacing: 0.04em; padding: 2px 7px; border-radius: 999px; flex: none; background: var(--surface-2); }
.qa-case.PASS .qa-case-v { color: var(--green); }
.qa-case.FAIL .qa-case-v { color: var(--red); }
.qa-case.NEEDS_JUDGE .qa-case-v { color: var(--amber); }
.qa-case-q { font-size: 12.5px; font-weight: 600; color: var(--text); line-height: 1.4; }
.qa-case-r { font-size: 12px; color: var(--muted); line-height: 1.45; background: var(--surface-2); border-radius: var(--radius-sm); padding: 7px 10px; white-space: pre-wrap; word-break: break-word; }
.qa-case-r::before { content: "RESPOSTA"; display: block; font-size: 8.5px; font-weight: 700; letter-spacing: 0.05em; color: var(--faint); margin-bottom: 3px; }
.qa-case-why { font-size: 11.5px; color: var(--faint); font-style: italic; line-height: 1.4; padding-left: 9px; border-left: 2px solid var(--line); }

/* ── Relatorio completo NATIVO (QaFullReport), no modal "Full report", em vez do report.html iframe ── */
.qa-full-modal { width: min(920px, 94vw); max-width: 94vw; }
.qa-report-body { overflow: auto; max-height: calc(88vh - 64px); padding: 20px 22px; display: flex; flex-direction: column; gap: 16px; }
/* motion do design system nas seccoes do Full report (entram em cascata com a mola --cl-spring) */
/* (a entrada em cascata deste painel vive na camada de movimento no fim do ficheiro, com o
   utilitario .cl-stagger; aqui estava declarada uma segunda vez e com a curva elastica, que num
   painel inteiro de texto se le como gelatina.) */
/* no Full report a roda de score fica ao lado da meta, sem esticar */
.qa-report-body .qa-score-row .qa-ring { flex: none; }
.qa-full { display: flex; flex-direction: column; gap: 18px; }
.qa-full h3 { font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--faint); margin: 0 0 10px; }
.qa-full .mono { font-family: ui-monospace, "SF Mono", monospace; font-size: 11px; color: var(--faint); }
.qa-full-head { display: flex; align-items: center; gap: 12px; }
.qa-full-mark { width: 40px; height: 40px; border-radius: 10px; background: var(--accent); color: #051; display: grid; place-items: center; font-weight: 800; font-size: 13px; flex: none; }
.qa-full-title { font-size: 18px; font-weight: 800; }
.qa-full-sub { font-size: 12.5px; color: var(--muted); }
.qa-full-meta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; font-family: ui-monospace, monospace; font-size: 10.5px; color: var(--faint); }
.qa-full-hero { display: grid; grid-template-columns: 1.5fr 1fr; gap: 14px; }
.qa-full-gate { border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--surface-2); padding: 16px 18px; }
.qa-full-gate.good { border-color: var(--green); }
.qa-full-gate.bad { border-color: var(--red); }
.qa-full-gate.wait { border-color: var(--amber); }
.qa-full-gate-lbl { font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--faint); }
.qa-full-gate-word { font-size: 26px; font-weight: 800; letter-spacing: 0.02em; margin: 3px 0 2px; font-family: ui-monospace, monospace; }
.qa-full-gate.good .qa-full-gate-word { color: var(--green); }
.qa-full-gate.bad .qa-full-gate-word { color: var(--red); }
.qa-full-gate.wait .qa-full-gate-word { color: var(--amber); }
.qa-full-gate-sub { font-size: 12.5px; color: var(--text); }
.qa-full-gate-tok { display: block; font-size: 10.5px; font-family: ui-monospace, monospace; color: var(--faint); margin-top: 2px; }
.qa-full-reasons { margin: 10px 0 0; padding-left: 16px; display: flex; flex-direction: column; gap: 5px; }
.qa-full-reasons li { font-size: 12px; color: var(--muted); line-height: 1.4; }
.qa-full-score { border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--surface-2); padding: 14px; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.qa-full-score-lbl { font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--faint); }
.qa-ring { width: 128px; height: 128px; border-radius: 50%; display: grid; place-items: center; }
.qa-ring-in { width: 98px; height: 98px; border-radius: 50%; background: var(--surface-1); display: grid; place-items: center; }
.qa-ring-n { font-size: 30px; font-weight: 800; color: var(--accent); line-height: 1; font-family: ui-monospace, monospace; }
.qa-ring-d { font-size: 10px; color: var(--faint); margin-top: 2px; }
.qa-full-score-note { font-size: 11px; color: var(--faint); line-height: 1.4; }
.qa-full-cats { display: flex; flex-direction: column; gap: 14px; }
.qa-full-cat { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 6px 8px 10px; }
.qa-full-cat .qa-cat { cursor: default; }
/* no relatorio completo o nome da categoria mostra-se inteiro (a tab trunca-o por ser compacta) */
.qa-full-cat .qa-cat-name { max-width: none; overflow: visible; white-space: normal; min-width: 96px; }
.qa-full-cat .qa-cat-cases { padding: 4px 6px 0 6px; }
.qa-full-none { padding: 4px 8px; font-size: 12px; color: var(--faint); font-style: italic; }
.qa-full-sec h3 { margin-bottom: 8px; }
.qa-full-bk { display: flex; gap: 10px; padding: 9px 11px; border-radius: var(--radius-sm); background: var(--surface-3); margin-bottom: 6px; }
.qa-full-pri { font-size: 9px; font-weight: 800; letter-spacing: 0.04em; padding: 2px 7px; border-radius: 999px; flex: none; height: fit-content; background: var(--surface-2); color: var(--muted); }
.qa-full-pri.P0, .qa-full-pri.P1 { color: var(--red); }
.qa-full-pri.P2 { color: var(--amber); }
.qa-full-bk-top { font-size: 10.5px; color: var(--faint); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 2px; }
.qa-full-bk-q { font-size: 12.5px; font-weight: 600; color: var(--text); line-height: 1.4; }
.qa-full-bk-r { font-size: 12px; color: var(--muted); line-height: 1.45; margin-top: 2px; }
/* backlog em categorias COLAPSAVEIS (details/summary), colapsadas por omissao para nao poluir */
.qa-full-bkgroup { border: 1px solid var(--line); border-radius: var(--radius-sm); margin-bottom: 8px; overflow: hidden; }
.qa-full-bkgroup:last-child { margin-bottom: 0; }
.qa-full-bksum { display: flex; align-items: center; gap: 9px; padding: 10px 12px; cursor: pointer; list-style: none; user-select: none; background: var(--surface-2); }
.qa-full-bksum::-webkit-details-marker { display: none; }
.qa-full-bksum:hover { background: var(--surface-3); }
.qa-full-bkchev { font-size: 10px; color: var(--faint); transition: transform var(--cl-t-fast) var(--cl-ease); }
.qa-full-bkgroup[open] .qa-full-bkchev { transform: rotate(90deg); }
.qa-full-bkcat { flex: 1; font-weight: 700; font-size: 13px; color: var(--text); }
.qa-full-bkcount { font-family: ui-monospace, monospace; font-size: 11px; color: var(--muted); background: var(--surface-3); border-radius: 999px; padding: 1px 9px; }
.qa-full-bkitems { padding: 8px 12px 10px; display: flex; flex-direction: column; gap: 7px; }
.qa-full-cost { font-size: 11.5px; color: var(--muted); font-family: ui-monospace, monospace; line-height: 1.5; background: var(--surface-2); border-radius: var(--radius-sm); padding: 10px 12px; }
.qa-full-method { border-left: 2px solid var(--accent); background: var(--accent-subtle); border-radius: var(--radius-sm); padding: 12px 14px; }
.qa-full-method ul { margin: 0; padding-left: 16px; display: flex; flex-direction: column; gap: 6px; }
.qa-full-method li { font-size: 12px; color: var(--text); line-height: 1.5; }
/* ── Motion do DESIGN SYSTEM (contentlab): entrada cl-rise com a mola --cl-spring, em cascata ── */
/* (cascata destes contentores declarada uma so vez na camada de movimento, no fim do ficheiro) */
/* o modal abre com cl-rise (como os modais do contentlab); o selo AQ faz cl-icon-pop */
.qa-full-modal { animation: cl-rise var(--cl-t-slow) var(--cl-ease) both; }
.qa-full-mark { animation: cl-icon-pop var(--cl-t-slow) var(--cl-spring) both; }
/* as barras crescem da esquerda ao entrar, com a easing do design system */
.qa-full-catfill { animation: qa-bar-grow var(--cl-t-reveal) var(--cl-ease) both; transform-origin: left center; }
/* sem hover-lift nos cartoes: um relatorio nao e uma grelha de cartoes clicaveis (era o hover "podre") */
@keyframes qa-bar-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
/* as seccoes ganham o cartao real da app (.ov-card): borda, raio, superficie */
.qa-full-cats, .qa-full-sec, .qa-full-cost, .qa-full-method { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: 16px; }
.qa-full-method { border-left: 3px solid var(--accent); }
.qa-full-cat { border: 0; padding: 0; }
.qa-full-cat + .qa-full-cat { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
/* linha da categoria: nome INTEIRO (sem ellipsis), barra flexivel, score a direita */
.qa-full-catrow { display: flex; align-items: center; gap: 12px; }
.qa-full-catname { flex: 0 0 128px; font-size: 13px; font-weight: 700; color: var(--text); white-space: normal; line-height: 1.3; }
.qa-full-catbar { flex: 1; height: 8px; background: var(--surface-3); border-radius: 999px; overflow: hidden; }
.qa-full-catfill { display: block; height: 100%; border-radius: 999px; background: var(--muted); }
.qa-full-catfill.good { background: var(--green); }
.qa-full-catfill.wait { background: var(--amber); }
.qa-full-catfill.bad { background: var(--red); }
.qa-full-catn { flex: none; font-family: ui-monospace, monospace; font-size: 11px; color: var(--faint); }
.qa-full-catval { flex: none; min-width: 44px; text-align: right; font-family: ui-monospace, monospace; font-size: 16px; font-weight: 800; color: var(--muted); }
.qa-full-catval.good { color: var(--green); }
.qa-full-catval.wait { color: var(--amber); }
.qa-full-catval.bad { color: var(--red); }
.qa-full-cat .qa-cat-cases { margin-top: 10px; }
/* anel legivel: numero grande e centrado com a fonte de display da app */
/* Anel de qualidade em SVG, com varrimento animado e suave (easing do design system) */
.qa-ring { position: relative; width: 128px; height: 128px; display: block; }
.qa-ring-svg { width: 100%; height: 100%; display: block; }
.qa-ring-bg { stroke: var(--surface-3); }
.qa-ring-fg { stroke: var(--accent); }
@keyframes qa-ring-fill { from { stroke-dashoffset: 326.73; } }
.qa-ring-c { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; }
.qa-ring-n { font-family: var(--display, ui-monospace), ui-monospace, monospace; font-size: 30px; line-height: 1; color: var(--accent); }
.qa-ring-d { font-size: 10px; color: var(--faint); margin-top: 2px; }
@media (max-width: 620px) { .qa-full-hero { grid-template-columns: 1fr; } .qa-full-catname { flex-basis: 96px; } }
/* Impressao: isola o relatorio nativo (esconde o resto da app); "Guardar como PDF" no dialogo do browser. */
@media print {
  body * { visibility: hidden !important; }
  .conn-form-overlay, .conn-form-overlay * { visibility: visible !important; }
  .conn-form-overlay { position: absolute !important; inset: 0 !important; background: var(--bg) !important; padding: 0 !important; display: block !important; overflow: visible !important; }
  .qa-full-modal { position: static !important; width: 100% !important; max-width: none !important; max-height: none !important; border: 0 !important; box-shadow: none !important; overflow: visible !important; }
  .qa-full-modal .conn-form-head { display: none !important; }
  .qa-report-body { overflow: visible !important; max-height: none !important; padding: 0 12px !important; }
  .qa-full-cat, .qa-case, .qa-full-gate, .qa-full-sec, .qa-full-bk, .qa-full-hero { break-inside: avoid; }
}
.qa-cat-more { margin-top: 6px; font-size: 12px; color: var(--faint); }
.qa-cat-fix { padding: 11px 13px; border-radius: var(--radius-sm); background: var(--accent-subtle); border-left: 2px solid var(--accent); }
.qa-cat-fix p { margin: 0 0 6px; font-size: 12.5px; color: var(--text); line-height: 1.5; }
.qa-cat-fix p:last-child { margin-bottom: 0; }
.qa-cat-n { font-family: var(--mono); font-size: 11px; color: var(--faint); text-align: right; white-space: nowrap; }
.qa-cat-val.bad { color: var(--danger); }
.qa-why { margin: 8px 0 2px; padding: 10px 13px; list-style: none; display: flex; flex-direction: column; gap: 4px; background: var(--surface-2); border: 1px solid var(--line-2); border-left: 3px solid var(--amber); border-radius: var(--radius-sm); }
.qa-why li { font-size: 12.5px; color: var(--text); line-height: 1.45; }
.qa-cat-name { font-size: 12.5px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qa-cat-meter { height: 8px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.qa-cat-fill { display: block; height: 100%; border-radius: inherit; }
.qa-cat-fill.good { background: var(--green); }
.qa-cat-fill.wait { background: var(--amber); }
.qa-cat-fill.bad { background: var(--red); }
.qa-cat-fill.na { background: var(--line-2); }
.qa-cat-val { font-family: var(--mono); font-size: 12px; color: var(--muted); text-align: right; }
.qa-trend { width: 100%; height: auto; color: var(--accent); }
.qa-trend circle { fill: var(--accent); }
.qa-backlog { display: flex; flex-direction: column; gap: 8px; }
.qa-backlog-row { display: flex; align-items: center; gap: 10px; min-width: 0; }
.qa-pri {
  flex: none; padding: 2px 7px; border-radius: 6px; font-family: var(--mono);
  font-size: 11px; font-weight: 700; color: var(--red); background: rgba(220, 38, 38, 0.1);
}
.qa-pri.p2 { color: var(--amber); background: rgba(217, 119, 6, 0.1); }
.qa-pri.p3 { color: var(--muted); background: var(--surface-2); }
.qa-backlog-q { min-width: 0; flex: 1; font-size: 13px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qa-backlog-cat { flex: none; font-family: var(--mono); font-size: 11px; color: var(--faint); }
.qa-melhorias .extractor-preview { max-height: 420px; }
.qa-toggle { margin-left: auto; border: 0; background: none; color: var(--accent); font-size: 12.5px; font-weight: 600; cursor: pointer; }

/* ============================================================================
   GitHub Primer normalization — authoritative final layer.
   Overrides the earlier "Bold Typography" layer to match github.com (Primer):
   flat bordered boxes, system fonts, one blue accent, dense and utilitarian.
   This block is the last word in the cascade.
   ========================================================================== */

:root {
  --warning-subtle: var(--cl-warning-dim);
}

/* Botao de tema no dock (claro/escuro). */
.dock-theme {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  color: var(--muted);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  transition: color var(--cl-t-fast) var(--cl-ease), border-color var(--cl-t-fast) var(--cl-ease), background var(--cl-t-fast) var(--cl-ease);
}
/* Toggle de idioma (PT/EM): mesma pastilha do tema, mas com o codigo do idioma em mono. */
.dock-lang {
  height: 34px;
  min-width: 34px;
  padding: 0 10px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  color: var(--muted);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1;
  cursor: pointer;
  transition: color var(--cl-t-fast) var(--cl-ease), border-color var(--cl-t-fast) var(--cl-ease), background var(--cl-t-fast) var(--cl-ease), transform var(--cl-t-fast) var(--cl-ease);
}
.dock-lang:hover { color: var(--text); border-color: var(--soft-line); transform: translateY(-1px); }
@media (prefers-reduced-motion: reduce) { .dock-lang:hover { transform: none; } }
.dock-theme:hover {
  color: var(--text);
  border-color: var(--line-2);
  background: var(--surface-3);
}

/* --- Typography: no display / uppercase headings -------------------------- */
h1,
.lib-head h1,
.detail-id h1,
.overview-hero h2,
.dropzone-title,
.qa-score {
  font-family: var(--font);
  font-weight: 600;
  letter-spacing: normal;
  line-height: 1.25;
  text-transform: none;
}

h1,
.lib-head h1 { font-size: 24px; }
.detail-id h1 { font-size: 20px; max-width: none; }
.overview-hero h2 { font-size: 20px; line-height: 1.3; }
.dropzone-title { font-size: 16px; }
.qa-score { font-size: 28px; }

.brand-name,
.ac-name,
.empty-title,
.chat-id b,
.model-text b,
.match-top b { letter-spacing: normal; }

/* strip the monospace all-caps treatment from controls, labels, table heads */
.side-section,
.section-label,
.kn-thead,
.deploy-thead,
.btn,
.tab,
.dropzone-action,
.clear-source,
.enhance-section-btn,
.status,
.mini-chip,
.ready-dot,
.overview-status,
.template-badge,
.prompt-template-select span,
.qa-gate,
.qa-toggle {
  font-family: var(--font);
  letter-spacing: normal;
  text-transform: none;
}

/* data-shaped values stay monospace, never uppercase/tracked */
.ac-model,
.chat-model,
.score-pill,
.model-provider,
.conn-url,
.conn-model-chip,
.qa-log,
.qa-cat-val,
.qa-pri,
.kb-id,
.mono {
  font-family: var(--mono);
  letter-spacing: normal;
  text-transform: none;
}

/* --- Section headers: quiet 12px muted label, no marker box --------------- */
.section-label {
  min-height: 0;
  min-width: 0;
  width: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  margin: 0 0 8px;
  padding: 0;
  text-align: left;
}
.section-label::before { display: none; }

/* --- Stat tiles: modest neutral numerals --------------------------------- */
.metric,
.ov-stat { min-height: 0; }

.metric b,
.ov-stat b {
  font-family: var(--font);
  font-size: 24px;
  font-weight: 600;
  letter-spacing: normal;
  color: var(--text);
}
.knowledge-tab .ov-stat b { font-size: 20px; }

/* --- Boxes / surfaces: flat, 1px border, 6px radius ----------------------- */
.metric,
.ov-stat,
.agent-card,
.side-card,
.kb-summary,
.knowledge-upload,
.ov-card,
.kn-table,
.chunk-drawer,
.retrieval-panel,
.msg.assistant .msg-bubble,
.toast,
.side-user,
.dropzone,
.chunk-card,
.retrieval-match,
.knowledge-file-drop,
.kb-health-status,
.overview-hero,
.overview-source,
.prompt-section,
.source-file-row,
.conn-card,
.conn-form,
.deploy-table,
.secret-panel,
.integration-panel { border-radius: var(--radius); }

.metric:hover,
.ov-stat:hover,
.agent-card:hover,
.ov-card:hover,
.side-card:hover {
  border-color: var(--line-2);
  box-shadow: none;
  transform: none;
}

.new-card {
  background: var(--surface);
  border: 1px dashed var(--line);
  border-radius: var(--radius);
}
.new-card:hover { border-color: var(--line-2); background: var(--surface); }
.new-card-plus {
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--muted);
}

/* --- Chips / counters: 12px, rounded-full pills --------------------------- */
.mini-chip,
.cite,
.ac-model,
.chat-model,
.score-pill,
.ov-tool,
.conn-model-chip,
.dropzone-types span {
  min-height: 0;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 12px;
  line-height: 18px;
  padding: 1px 8px;
}

/* --- Status: subtle background + matching text ---------------------------- */
.status,
.ready-dot,
.overview-status,
.qa-gate {
  min-height: 0;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  line-height: 18px;
  padding: 1px 8px;
}
.status.good,
.ready-dot:not(.wait):not(.bad),
.qa-gate.good,
.overview-status:not(.wait):not(.bad) {
  color: var(--success);
  background: var(--success-subtle);
  border-color: transparent;
}
.status.wait,
.ready-dot.wait,
.qa-gate.wait,
.overview-status.wait {
  color: var(--warning);
  background: var(--warning-subtle);
  border-color: transparent;
}
.status.bad,
.ready-dot.bad,
.qa-gate.bad,
.overview-status.bad {
  color: var(--danger);
  background: var(--danger-subtle);
  border-color: transparent;
}
.kb-health-status.good { color: var(--success); }
.kb-health-status.wait { color: var(--warning); }
.kb-health-status.bad { color: var(--danger); }
.qa-pri { color: var(--danger); background: var(--danger-subtle); border-radius: 999px; }
.qa-pri.p2 { color: var(--warning); background: var(--warning-subtle); }
.qa-pri.p3 { color: var(--muted); background: var(--surface-2); }
.msg.refused .msg-bubble { color: var(--danger); border-color: var(--danger); }

/* --- Buttons -------------------------------------------------------------- */
.btn {
  position: relative;
  height: 32px;
  min-height: 32px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
  color: var(--text);
  font-size: 14px;
  font-weight: 500;
  padding: 0 12px;
  gap: 8px;
  transition: background-color var(--cl-t-fast) var(--cl-ease), border-color var(--cl-t-fast) var(--cl-ease), color var(--cl-t-fast) var(--cl-ease);
}
.btn::after { display: none; }
.btn:hover {
  background: var(--surface-3);
  border-color: var(--line-2);
  color: var(--text);
  filter: none;
  transform: none;
}
.btn-sm { height: 28px; min-height: 28px; padding: 0 8px; }
.foot-actions .btn { height: 32px; min-height: 32px; }

.btn-primary { background: var(--brand-green); }
.btn-primary,
.btn-primary:hover { border: 1px solid rgba(240, 246, 252, 0.1); color: #ffffff; }
.btn-primary:hover { background: var(--brand-green-hover); }

.btn-ghost,
.btn-soft {
  background: transparent;
  border-color: transparent;
  color: var(--accent);
}
.btn-ghost:hover,
.btn-soft:hover {
  background: var(--surface-2);
  border-color: transparent;
  color: var(--accent);
}

.btn-danger {
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--danger);
}
.btn-danger:hover {
  background: var(--danger);
  border-color: var(--danger);
  color: #ffffff;
}

.icon-btn {
  width: 32px;
  height: 32px;
  min-height: 32px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: transparent;
  color: var(--muted);
  box-shadow: none;
}
.icon-btn:hover {
  background: var(--surface-2);
  border-color: transparent;
  color: var(--text);
}

.dropzone-action {
  min-height: 28px;
  height: 28px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
  color: var(--text);
}
.dropzone-action:hover {
  background: var(--surface-3);
  border-color: var(--line-2);
  color: var(--text);
  filter: none;
  transform: none;
}
.clear-source { letter-spacing: normal; text-transform: none; }

.send-btn {
  background: var(--brand-green);
  border: 1px solid rgba(240, 246, 252, 0.1);
  color: #ffffff;
  border-radius: var(--radius);
}
.send-btn:hover {
  background: var(--brand-green-hover);
  color: #ffffff;
  filter: none;
  transform: none;
}

/* --- Tabs: GitHub underline nav ------------------------------------------- */
.tabs {
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  gap: 8px;
  padding: 0;
}
.tab {
  min-height: 0;
  height: auto;
  min-width: 0;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  font-size: 14px;
  font-weight: 500;
  padding: 8px 8px;
  margin-bottom: -1px;
}
.tab:hover {
  background: transparent;
  border-color: transparent;
  color: var(--text);
}
.tab.sel {
  background: transparent;
  border-color: transparent;
  border-bottom-color: var(--tab-underline);
  color: var(--text);
  font-weight: 600;
}

/* --- Inputs: inset background, accent focus ring -------------------------- */
.text-input,
.text-area,
select.text-input,
.retrieval-input input,
.search,
.chat-input {
  background: var(--inset);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--text);
}
.text-input:focus,
.text-area:focus,
select.text-input:focus,
.retrieval-input input:focus,
.search:focus-within,
.chat-input:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-subtle);
  outline: none;
}
.search input:focus,
.search input:focus-visible,
.chat-input input:focus,
.chat-input input:focus-visible {
  outline: none;
  box-shadow: none;
}

/* --- Focus: single 2px accent outline for controls ------------------------ */
button:focus-visible,
a:focus-visible,
.tab:focus-visible,
.nav-item:focus-visible,
.icon-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -1px;
  box-shadow: none;
}

/* --- Dropzones: flat, accent border on active ----------------------------- */
.file-drop:hover,
.file-drop:focus-within,
.file-drop.has-file,
.knowledge-file-drop:hover,
.knowledge-file-drop:focus-within,
.knowledge-file-drop.has-file {
  background: var(--surface);
  border-color: var(--accent);
  box-shadow: none;
  transform: none;
}

/* --- Overview hero: flat box, no gradient --------------------------------- */
.overview-hero {
  background: var(--surface);
  border: 1px solid var(--line);
  padding: 16px;
}
.overview-card { padding: 16px; }
.coverage-meter {
  background: var(--inset);
  border: 1px solid var(--line);
  border-radius: 999px;
}
.coverage-meter span { background: var(--accent); border-radius: 999px; }

/* --- Chat message bubbles ------------------------------------------------- */
.msg.user .msg-bubble {
  background: var(--accent-subtle);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.msg.assistant .msg-bubble { border-radius: var(--radius); }

/* --- Code / logs / output panels: inset background ------------------------ */
.markdown-answer pre,
.extractor-preview,
.qa-log {
  background: var(--inset);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.markdown-answer code {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 6px;
}

/* --- Picker selection: accent-subtle, not invert ------------------------- */
.glyph-opt.sel,
.model-card.sel {
  background: var(--accent-subtle);
  border-color: var(--accent);
  color: var(--text);
}
.glyph-opt:hover,
.model-card:hover {
  background: var(--surface);
  border-color: var(--line-2);
  color: var(--text);
}
.model-card:hover .model-text b,
.model-card.sel .model-text b { color: var(--text); }
.model-card.sel .model-radio { background: var(--accent); border-color: var(--accent); }

/* --- Banners / badges ----------------------------------------------------- */
.conn-warning {
  color: var(--warning);
  background: var(--warning-subtle);
  border: 1px solid transparent;
  border-radius: var(--radius);
}
.kb-stale-banner,
.kb-warning-inbox { border-radius: var(--radius); }
.template-badge { border-color: var(--accent); color: var(--accent); border-radius: 999px; }

/* --- Sidebar: muted nav text (token, not stray white-alpha) --------------- */
.sidebar .nav-item,
.sidebar .side-agent,
.sidebar .side-status,
.sidebar .nav-count,
.sidebar .side-section,
.sidebar .side-user em { color: var(--muted); }
.sidebar .brand-name,
.sidebar .side-user b { color: var(--text); }

/* --- Banners / alerts: subtle warning background, token colors ------------ */
.kb-stale-banner,
.kb-warning-inbox {
  background: var(--warning-subtle);
  border: 1px solid var(--warning-subtle);
  border-radius: var(--radius);
  color: var(--text);
}
.kb-failed-banner {
  background: var(--danger-subtle);
  border-color: var(--danger-subtle);
}
.kn-fail-reason { color: var(--danger); }
.kb-warning-head,
.kb-warning-row { border-color: var(--warning-subtle); }

/* --- Brand: quiet, muted -------------------------------------------------- */
.brand-mark { color: var(--muted); }
.brand-name { font-size: 14px; font-weight: 600; }

/* --- Motion: no entrance / shimmer (spinner + reduced-motion kept) -------- */
.chat-inner { animation: none; }
.skeleton { animation: none; background: var(--surface-2); }

/* ============================================================================
   Audit fixes — leaks the earlier layers left un-overridden (cascade/specificity)
   ========================================================================== */

/* Palette: off-token borders/glows/tints that survived */
.type-chip { color: var(--muted); background: var(--surface-2); border-color: var(--line); }
.type-chip.good { color: var(--success); background: var(--success-subtle); border-color: transparent; }
.type-chip.wait { color: var(--warning); background: var(--warning-subtle); border-color: transparent; }
.type-chip.bad { color: var(--danger); background: var(--danger-subtle); border-color: transparent; }

.kb-health-status.good { border-color: var(--success); }
.kb-health-status.wait { border-color: var(--warning); }
.kb-health-status.bad { border-color: var(--danger); }

.toast.error {
  color: var(--danger);
  background: var(--danger-subtle);
  border-color: transparent;
}

.status-dot {
  background: var(--success);
  box-shadow: none;
}

/* Effects & motion: kill remaining glows, blur, transform hovers / press */
.sidebar { backdrop-filter: none; }
.file-drop:hover .dropzone-action,
.file-drop:focus-within .dropzone-action { box-shadow: none; }
.btn:active,
.send-btn:active,
.icon-btn:active,
.model-card:active,
.glyph-opt:active { transform: none; }
.btn-primary:hover svg,
.send-btn:hover svg { transform: none; }

/* Typography: last uppercase/oversized escapes */
.ov-card-h {
  font-family: var(--font);
  font-weight: 600;
  letter-spacing: normal;
  text-transform: none;
}
.kb-health-grid .ov-stat:first-child b { font-size: 24px; }

/* Components: sizing + focus + alignment */
.send-btn { width: 32px; height: 32px; }
.dropzone-action { height: 32px; min-height: 32px; }
select.text-input { text-align: left; text-align-last: left; }
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -1px;
  box-shadow: none;
}

/* Spacing: bring major containers onto the 4px scale */
.metric,
.ov-stat,
.knowledge-tab .ov-stat,
.overview-card,
.overview-empty-source,
.knowledge-file-drop,
.prompt-section,
.source-file-row { padding: 16px; }
.dropzone { padding: 24px; }
.create-foot { padding: 16px 24px; }
.lib-head,
.detail-head,
.create-head { margin-bottom: 24px; }
.lib-toolbar { margin-bottom: 16px; }
.detail-body { padding-top: 24px; }
.agent-grid,
.stats-strip,
.ov-stats,
.kb-health-grid,
.model-list,
.side-foot,
.knowledge-file-drop,
.prompt-section,
.overview-hero,
.overview-grid,
.overview-side,
.overview-card,
.overview-kv-row,
.cfg-main,
.cfg-side,
.knowledge-tab { gap: 16px; }
.side-nav,
.foot-actions,
.dropzone-types,
.msg-cites,
.ov-tools,
.ac-sources,
.overview-source-list,
.prompt-template-tools { gap: 8px; }
.ac-foot { padding-top: 16px; }

/* ============================================================================
   Compact density pass — GitHub-tight form controls, pickers and rhythm
   ========================================================================== */

/* Inputs / selects / textareas → ~32px control height */
.text-input,
select.text-input,
.retrieval-input input { padding: 5px 12px; }
.text-area { min-height: 76px; padding: 6px 12px; line-height: 1.45; }
.field { gap: 6px; }
.field-label { font-size: 12px; font-weight: 600; }

/* Glyph picker → small 40px square tiles, wrapping (not 3 stretched columns) */
.glyph-picker {
  display: grid;
  grid-template-columns: repeat(auto-fill, 40px);
  gap: 8px;
}
.glyph-opt {
  width: 40px;
  height: 40px;
  min-width: 0;
  min-height: 0;
  font-size: 13px;
  font-weight: 600;
}

/* Model + graph-extraction cards → compact single rows */
.model-list { gap: 8px; }
.model-card {
  min-height: 0;
  gap: 10px;
  padding: 8px 12px;
}
.graph-mode-card { min-height: 0; padding: 8px 12px; }
.model-provider { font-size: 10px; }

/* Section rhythm → tighter vertical spacing in dense forms */
.settings-tab { gap: 16px; }
.settings-grid { gap: 16px 24px; }
.configure-grid { gap: 16px 24px; }
.section-label { margin-bottom: 6px; }
.detail-body { padding-top: 16px; }
.temp-slider { margin-top: 4px; }
.settings-actions { margin-top: 8px; }

/* Toolbar / search field → 32px like the buttons beside it */
.search { min-height: 32px; }

/* Section labels → left-aligned box headers (GitHub headers are not centered) */
.section-label { justify-content: flex-start; text-align: left; }

/* Knowledge views → consistent 6px bordered boxes */
.kb-agent-group,
.kb-orphan-card,
.orphan-chunk-card,
.panel-empty { border-radius: var(--radius); }

/* Side-card boxes → 16px padding (was 22px, off-scale) */
.side-card { padding: 16px; }

/* ============================================================================
   Layout fixes — page-container spacing, header alignment, form rows
   ========================================================================== */

/* Knowledge + Connections pages were flush-left — give them the shared
   1216px centred container with 24px side padding, like every other view */
.knowledge-inventory,
.connections-settings {
  width: 100%;
  max-width: 1216px;
  margin: 0 auto;
  padding: 24px 24px 48px;
}

/* Agent detail header → keep identity left, actions right (the 1fr/auto grid
   collapsed to one column once the sidebar narrowed the content) */
.detail-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  grid-template-columns: none;
}
.detail-head .back-btn { flex-basis: 100%; }
.detail-id { flex: 1 1 auto; min-width: 0; }
.detail-actions { margin-left: auto; justify-content: flex-end; }

/* Deploy-create row → single 32px baseline (segmented control was 44px, tops ragged) */
.deploy-create { align-items: center; }
.deploy-create-mode { height: 32px; padding: 3px; }
.seg { padding: 0 10px; font-weight: 500; }

/* Prompt template tools → stack the load-template picker above a single tidy
   row of controls instead of a cramped, wrapping two-column grid */
.prompt-template-tools {
  grid-template-columns: 1fr;
  gap: 12px;
}
.prompt-template-save { align-items: flex-end; }

/* ============================================================================
   GitHub dashboard look — near-black canvas + GitHub-menu sidebar
   ========================================================================== */

/* Sidebar reads like GitHub's slide-out menu */
.sidebar {
  background: var(--bg);
  padding: 16px 12px;
}

.nav-item,
.side-agent {
  position: relative;
  min-height: 32px;
  padding: 6px 8px;
  gap: 8px;
  border-radius: var(--radius);
  font-size: 14px;
}

.sidebar .nav-item:hover,
.sidebar .side-agent:hover {
  background: var(--surface-2);
  color: var(--text);
}

.sidebar .nav-item.sel,
.sidebar .side-agent.sel {
  background: var(--surface-2);
  color: var(--text);
  font-weight: 600;
}

/* GitHub's blue active-item indicator bar */
.sidebar .nav-item.sel::before,
.sidebar .side-agent.sel::before {
  content: "";
  position: absolute;
  left: -12px;
  top: 6px;
  bottom: 6px;
  width: 4px;
  border-radius: 999px;
  background: var(--accent);
}

/* Section headers: normal case, 12px, divider above — like "Top repositories" */
.side-section {
  text-transform: none;
  letter-spacing: normal;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  border-top: 1px solid var(--line);
  margin-top: 16px;
  padding: 16px 8px 8px;
}

.brand {
  padding: 4px 8px 16px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 16px;
}

.side-foot { border-top: 1px solid var(--line); padding-top: 16px; }
.side-user { background: transparent; border: 0; }

/* Boxes float on the darker canvas — hairline emphasis on header strips */
.kn-thead,
.deploy-thead { background: var(--surface-2); }

/* Keep chat/user bubbles and code panels legible on the darker canvas */
.msg.assistant .msg-bubble { background: var(--surface); }

/* GitHub repo-list pattern: titles are accent links, underline on hover only */
.agent-card .ac-name,
.kb-inventory-name b {
  color: var(--accent);
  font-size: 16px;
  font-weight: 600;
}
.agent-card:hover .ac-name,
.kb-inventory-row:hover .kb-inventory-name b { text-decoration: underline; }
.new-card .ac-name { color: var(--muted); }

/* ============================================================================
   Border-box padding normalization — every bordered box on the 4px scale
   (audited live: these were the remaining off-scale paddings/gaps)
   ========================================================================== */
.agent-card { padding: 16px; }
.kb-summary { padding: 16px; gap: 8px; }
.search { padding: 0 12px; gap: 8px; }
.chunk-drawer,
.retrieval-panel,
.extractor-preview,
.integration-code { padding: 16px; }
.secret-row code,
.integration-kv code { padding: 8px 12px; }
.dropzone-action { padding: 0 12px; }
.enhance-section-btn { min-height: 28px; padding: 4px 8px; gap: 8px; }
.model-card,
.graph-mode-card { gap: 8px; }
.chat-input { padding: 6px 6px 6px 12px; }
.create-foot { gap: 16px; }

/* ============================================================================
   Compact agent card — name (link), template name, model pill. No glyph.
   ========================================================================== */
.agent-card {
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.agent-card .ac-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 32px;
}
.agent-card .ac-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.agent-card .ac-desc {
  color: var(--muted);
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
  -webkit-line-clamp: unset;
  min-height: 0;
}
.agent-card .ac-foot {
  padding-top: 8px;
  margin-top: 4px;
  justify-content: flex-start;
}
.new-card { min-height: 0; }
.new-card-plus { width: 32px; height: 32px; }

/* ============================================================================
   Settings width + deployments table cleanup
   ========================================================================== */

/* Settings form fills the page container (was capped at 820px) */
.settings-tab { max-width: none; }

/* Deploy table: aligned columns, GitHub row density */
.deploy-tr {
  grid-template-columns: minmax(160px, 1fr) 90px minmax(320px, 2fr) 110px auto;
  gap: 16px;
  padding: 8px 16px;
  align-items: center;
}
.deploy-thead {
  font-weight: 600;
  text-transform: none;
  letter-spacing: normal;
}

/* Key rows: one wrapping flex line instead of a crushed 5-column grid */
.deploy-key {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  padding: 8px 12px;
  border-radius: var(--radius);
}
.deploy-key .mono {
  font-size: 12px;
  white-space: nowrap;
  overflow-wrap: normal;
}
.deploy-key .mini-action { margin-left: auto; }
.mini-action.danger { color: var(--danger); }
.deploy-table { border-radius: var(--radius); }

/* ============================================================================
   Per-agent response policy + execution disclosure
   ========================================================================== */

.deadline-policy-card {
  grid-column: 1 / -1;
}

.routing-policy-card {
  grid-column: 1 / -1;
}

.create-routing-policy-card {
  grid-column: auto;
}

.deadline-policy-fieldset {
  border: 0;
  margin: 0;
  min-width: 0;
  padding: 0;
}

.deadline-policy-fieldset > .section-label {
  margin-bottom: 8px;
  padding: 0;
}

.deadline-policy-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.deadline-policy-option {
  position: relative;
  min-width: 0;
  min-height: 104px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
  color: var(--text);
  cursor: pointer;
  display: flex;
  padding: 12px;
  transition: background-color var(--cl-t-fast) var(--cl-ease), border-color var(--cl-t-fast) var(--cl-ease);
}

.deadline-policy-option:hover {
  background: var(--surface-3);
  border-color: var(--line-2);
}

.deadline-policy-option.sel {
  background: var(--accent-subtle);
  border-color: var(--accent);
}

.deadline-policy-option:has(input:focus-visible) {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.deadline-policy-option input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.deadline-policy-copy,
.deadline-policy-name,
.deadline-policy-description {
  display: block;
}

.deadline-policy-copy {
  min-width: 0;
}

.deadline-policy-name {
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  line-height: 20px;
}

.deadline-policy-recommended {
  display: inline-flex;
  align-items: center;
  min-height: 18px;
  border-radius: 999px;
  background: var(--success-subtle);
  color: var(--success);
  font-size: 10px;
  font-weight: 600;
  line-height: 16px;
  margin-left: 7px;
  padding: 0 6px;
  vertical-align: 1px;
}

.deadline-policy-description {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
  margin-top: 6px;
}

.routing-policy-control {
  display: grid;
  gap: 9px;
}

.routing-policy-fieldset {
  border: 0;
  margin: 0;
  min-width: 0;
  padding: 0;
}

.routing-policy-fieldset > .section-label {
  margin-bottom: 8px;
  padding: 0;
}

.routing-policy-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.cfg-side .routing-policy-options {
  grid-template-columns: 1fr;
}

.routing-policy-option {
  position: relative;
  min-width: 0;
  min-height: 90px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
  color: var(--text);
  cursor: pointer;
  display: flex;
  padding: 11px 12px;
  transition: background-color var(--cl-t-fast) var(--cl-ease), border-color var(--cl-t-fast) var(--cl-ease), opacity var(--cl-t-fast) var(--cl-ease);
}

.routing-policy-option:hover {
  background: var(--surface-3);
  border-color: var(--line-2);
}

.routing-policy-option.sel {
  background: var(--accent-subtle);
  border-color: var(--accent);
}

.routing-policy-option:has(input:focus-visible) {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.routing-policy-option input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.routing-policy-copy,
.routing-policy-name,
.routing-policy-description {
  display: block;
}

.routing-policy-name {
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  line-height: 20px;
}

.routing-policy-description {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
  margin-top: 5px;
}

.routing-policy-recommended {
  display: inline-flex;
  align-items: center;
  min-height: 18px;
  border-radius: 999px;
  background: var(--success-subtle);
  color: var(--success);
  font-size: 10px;
  font-weight: 600;
  line-height: 16px;
  margin-left: 7px;
  padding: 0 6px;
  vertical-align: 1px;
}

.routing-policy-fieldset:disabled .routing-policy-option {
  cursor: not-allowed;
  opacity: 0.5;
}

.routing-policy-fieldset:disabled .routing-policy-option:hover {
  background: var(--surface-2);
  border-color: var(--line);
}

.routing-policy-fieldset:disabled .routing-policy-option.sel {
  border-color: var(--line-2);
}

.routing-policy-hint {
  margin: 0;
}

.msg-verification-row,
.msg-response-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.verification-badge,
.msg-response-meta span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 22px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
  line-height: 18px;
  padding: 1px 8px;
}

.verification-badge.verified {
  background: var(--success-subtle);
  color: var(--success);
}

.verification-badge.partial {
  color: var(--warning);
  background: var(--warning-subtle);
  font-size: 13px;
  font-weight: 700;
}
.verification-badge.grounding-secondary { font-size: 11px; font-weight: 400; }
.msg-missing-parts { margin-top: 8px; font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
.msg-missing-parts ul { margin: 4px 0 0; padding-left: 20px; }

.verification-badge.unverified {
  background: var(--warning-subtle);
  color: var(--warning);
}

.verification-badge.not-verified {
  background: var(--surface-2);
  color: var(--muted);
}

.verification-badge.refused {
  background: var(--danger-subtle);
  color: var(--danger);
}

.deadline-warning {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  border: 1px solid var(--warning-subtle);
  border-radius: var(--radius);
  background: var(--warning-subtle);
  color: var(--text);
  font-size: 12px;
  line-height: 1.45;
  padding: 9px 10px;
}

.deadline-warning svg {
  flex: 0 0 auto;
  color: var(--warning);
  margin-top: 1px;
}

.deadline-warning strong {
  color: var(--warning);
  font-weight: 600;
}

.msg-response-meta {
  color: var(--muted);
}

.msg-response-meta span {
  border-color: var(--line);
  background: var(--surface-2);
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 880px) {
  .deadline-policy-options,
  .routing-policy-options {
    grid-template-columns: 1fr;
  }

  .deadline-policy-option,
  .routing-policy-option {
    min-height: 0;
  }
}

/* ============================================================================
   Brand logo — deleg8lab mark, no background box, D in text color
   ========================================================================== */
.brand-mark {
  background: transparent;
  border: 0;
  box-shadow: none;
  color: var(--text);
  width: 24px;
  height: 24px;
}

/* Hero title row: logo beside the agent name */
.overview-hero-title {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text);
}
.overview-hero-title h2 { margin: 0; }
.overview-hero-title svg { flex: 0 0 auto; }

/* ============================================================================
   CONTENTLAB DESIGN LANGUAGE — authoritative skin (supersedes the GitHub layer)
   Re-skin only: colour, radius, shadow, gradient, motion and type roles.
   The layout, spacing and sizing from the earlier layers is kept on purpose;
   this block only changes how things look, never how they are arranged.
   Because it is last in source order it wins every equal-specificity contest.
   ========================================================================== */

/* ---- Canvas: soft accent glow on the deep navy --------------------------- */
body {
  background-color: var(--bg);
  background-image:
    radial-gradient(1100px 680px at 88% -12%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 56%),
    radial-gradient(1000px 700px at 50% 120%, color-mix(in srgb, var(--pending) 6%, transparent), transparent 60%);
  background-attachment: fixed;
}

/* ---- Type roles: gradient mono hero, quiet mono kickers ------------------ */
.lib-head h1,
.detail-id h1 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(26px, 3.4vw, 40px);
  letter-spacing: -0.02em;
  /* line-height 1.06 cortava os descendentes (g/y/p): com background-clip:text o gradiente
     so pinta dentro da caixa de conteudo, e a Space Mono precisa de folga. O padding-bottom
     entra na clip box, por isso os descendentes voltam a aparecer por inteiro. */
  line-height: 1.18;
  padding-bottom: 0.06em;
  background: var(--grad-hero);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.overview-hero h2 { font-family: var(--display); font-weight: 700; letter-spacing: -0.01em; }
.section-label {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}

/* ---- Surfaces: rounded, soft edge, spring hover-lift --------------------- */
.metric, .ov-stat, .agent-card, .side-card, .kb-summary, .knowledge-upload,
.ov-card, .kn-table, .chunk-drawer, .retrieval-panel, .msg.assistant .msg-bubble,
.toast, .side-user, .dropzone, .chunk-card, .retrieval-match, .knowledge-file-drop,
.kb-health-status, .overview-hero, .overview-source, .prompt-section, .source-file-row,
.conn-card, .conn-form, .deploy-table, .secret-panel, .integration-panel,
.kb-agent-group, .kb-orphan-card, .orphan-chunk-card, .panel-empty, .model-card,
.graph-mode-card {
  border-radius: var(--radius);
  box-shadow: var(--edge);
}
.agent-card, .ov-card, .side-card, .model-card, .new-card, .metric, .ov-stat {
  transition: transform var(--cl-t-slow) var(--cl-ease), border-color var(--cl-t-med) var(--cl-ease), box-shadow var(--cl-t-med) var(--cl-ease);
}
.agent-card:hover, .ov-card:hover, .model-card:hover, .new-card:hover {
  border-color: var(--soft-line);
  box-shadow: var(--shadow);
  transform: translateY(-3px);
}
.metric:hover, .ov-stat:hover, .side-card:hover {
  border-color: var(--soft-line);
  box-shadow: var(--shadow-sm);
  transform: translateY(-2px);
}

/* ---- Gradient accent tiles ---------------------------------------------- */
.glyph, .new-card-plus, .user-av, .empty-ico {
  background: var(--grad-accent);
  box-shadow: var(--grad-accent-hi);
  color: var(--accent-ink);
  border: none;
}
.dropzone-ico {
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--accent);
  border-radius: var(--radius);
  box-shadow: var(--edge);
}

/* ---- Buttons: gradient primary, neutral ghost, soft danger -------------- */
.btn {
  border-radius: var(--radius);
  font-family: var(--font);
  font-weight: 600;
  transition: transform var(--cl-t-fast) var(--cl-ease), background-color var(--cl-t-fast) var(--cl-ease),
    border-color var(--cl-t-fast) var(--cl-ease), color var(--cl-t-fast) var(--cl-ease),
    box-shadow var(--cl-t-fast) var(--cl-ease), filter var(--cl-t-fast) var(--cl-ease);
}
.btn-primary, .send-btn {
  background: var(--grad-accent);
  border: 1px solid transparent;
  color: var(--accent-ink);
  box-shadow: var(--grad-accent-hi);
}
.btn-primary:hover, .send-btn:hover {
  background: var(--grad-accent);
  border-color: transparent;
  color: var(--accent-ink);
  box-shadow: var(--grad-accent-hi), var(--shadow-hover);
  filter: brightness(1.06);
  transform: translateY(-2px);
}
.btn-primary:active, .send-btn:active { transform: translateY(0); filter: none; }
.btn-ghost, .btn-soft { color: var(--muted); border-color: var(--line); background: transparent; }
.btn-ghost:hover, .btn-soft:hover {
  color: var(--text);
  border-color: var(--line-2);
  background: var(--surface-2);
  transform: translateY(-1px);
}
.btn-danger { color: var(--danger); border-color: var(--danger-subtle); background: transparent; }
.btn-danger:hover {
  color: #ffffff;
  background: var(--danger);
  border-color: var(--danger);
  transform: translateY(-1px);
}
.icon-btn { border-radius: var(--radius-sm); }
.icon-btn:hover { background: var(--surface-2); color: var(--text); transform: translateY(-1px); }

/* ---- Badges / chips / status: mono pills -------------------------------- */
.mini-chip, .cite, .ac-model, .chat-model, .score-pill, .ov-tool, .conn-model-chip,
.dropzone-types span, .status, .ready-dot, .overview-status, .qa-gate, .qa-pri,
.template-badge, .type-chip {
  font-family: var(--mono);
  border-radius: var(--radius-pill);
}
.status, .ready-dot, .overview-status, .qa-gate, .template-badge { font-weight: 700; }

/* ---- Tabs: accent underline --------------------------------------------- */
.tab.sel { color: var(--accent); border-bottom-color: var(--accent); }

/* ---- Inputs: rounded, teal focus ring ----------------------------------- */
.text-input, .text-area, select.text-input, .search, .chat-input, .retrieval-input input {
  border-radius: var(--radius);
  transition: border-color var(--cl-t-fast) var(--cl-ease), box-shadow var(--cl-t-med) var(--cl-ease), background var(--cl-t-med) var(--cl-ease);
}
.text-input:hover, .text-area:hover, select.text-input:hover { border-color: var(--line-2); }

/* ---- Empty state, meters, bubbles, toast -------------------------------- */
.empty { border-radius: var(--radius-lg); border-style: dashed; }
.empty-ico { border-radius: var(--radius-lg); }
.coverage-meter span { background: var(--grad-bar); }
.toast { border-radius: var(--radius); box-shadow: var(--shadow); }
.msg.user .msg-bubble {
  background: var(--accent-subtle);
  border-color: var(--soft-line);
  border-radius: var(--radius-lg);
}
.msg.assistant .msg-bubble { border-radius: var(--radius-lg); }
.glyph-opt.sel, .model-card.sel { border-radius: var(--radius); }
.markdown-answer code { border-radius: var(--radius-sm); }

/* ============================================================================
   FLOATING DOCK — replaces the left sidebar (contentlab signature nav)
   The app renders <TopDock/> with dock-* classes; .shell becomes a column so
   the dock sits on top and the main content scrolls beneath it.
   ========================================================================== */
.shell { flex-direction: column; }

.dock-wrap {
  position: sticky;
  top: 0;
  z-index: 50;
  padding: 16px 20px 8px;
  background:
    radial-gradient(760px 360px at 88% -60%, color-mix(in srgb, var(--accent) 6%, transparent), transparent 60%),
    color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: blur(14px);
}
.dock {
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: 1216px;
  margin: 0 auto;
  padding: 10px 12px 10px 16px;
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  border: 1px solid var(--line-2);
  box-shadow: var(--edge), var(--shadow);
}
.dock-brand {
  display: flex;
  align-items: center;
  gap: 9px;
  padding-right: 14px;
  border-right: 1px solid var(--line);
}
.dock-brand-mark {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  background: var(--grad-accent);
  box-shadow: var(--grad-accent-hi);
  color: var(--accent-ink);
  flex: 0 0 auto;
}
/* O nome do produto na fonte de TEXTO da app, nao na monoespacada. O token --display aponta para
   a mono (ver o :root la em cima), e era isso que fazia a marca no topo parecer uma maquina de
   escrever ao lado do resto da interface. */
.dock-brand-name {
  font-family: var(--font);
  font-weight: 700;
  font-size: 13.5px;
  letter-spacing: -0.02em;
  color: var(--text);
  white-space: nowrap;
}
.dock-brand-sub {
  display: block;
  font-family: var(--font);
  font-size: 11px;
  letter-spacing: normal;
  color: var(--faint);
}

.dock-links { position: relative; display: flex; gap: 2px; flex: 1; min-width: 0; }
.dock-pill {
  position: absolute;
  z-index: 0;
  top: 0;
  bottom: 0;
  left: 0;
  width: calc(100% / var(--dock-count, 5));
  transform: translateX(calc(var(--dock-active, 0) * 100%));
  border-radius: 11px;
  background: var(--grad-accent);
  box-shadow: var(--grad-accent-hi), var(--shadow-sm);
  transition: transform var(--cl-t-med) var(--cl-ease);
}
.dock-links.no-active .dock-pill { opacity: 0; }
.dock-item {
  position: relative;
  z-index: 1;
  flex: 1 0 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 14px;
  border: none;
  background: none;
  border-radius: 11px;
  font-family: var(--font);
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--cl-t-med) var(--cl-ease);
}
.dock-item:hover:not(:disabled) { color: var(--text); }
.dock-links .dock-pill { display: none; }
.dock-item.sel { color: var(--accent-ink); background: var(--grad-accent); box-shadow: var(--grad-accent-hi); }
.dock-item:disabled { opacity: .45; cursor: not-allowed; }
/* icone dentro de um item de navegacao: e o unico sitio, com o svg do botao, onde a curva
   elastica e intencional (o salto do icone e a graca). */
.dock-item-ic { display: inline-flex; transition: transform var(--cl-t-fast) var(--cl-spring); }
.dock-item.sel .dock-item-ic { transform: scale(1.15) rotate(-4deg); }
.dock-item .nav-count {
  font-family: var(--mono);
  font-size: 10.5px;
  font-style: normal;
  color: currentColor;
  opacity: .72;
}

.dock-status {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 12px;
  border-radius: 11px;
  background: var(--surface-3);
  border: 1px solid var(--line-2);
  color: var(--muted);
  font-family: var(--font);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.dock-status .status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 0 3px var(--success-subtle);
}
.dock-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  background: var(--grad-accent);
  box-shadow: var(--grad-accent-hi);
  color: var(--accent-ink);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  cursor: default;
}

@media (max-width: 1150px) {
  .dock { flex-wrap: wrap; }
  .dock-brand { margin-right: auto; }
  .dock-links { order: 10; flex-basis: 100%; overflow-x: auto; }
}
@media (max-width: 720px) {
  .dock-wrap { padding: 10px 12px 6px; }
  .dock { gap: 10px; padding: 8px 10px; }
  .dock-brand { padding-right: 10px; }
  .dock-brand-sub { display: none; }
  .dock-links { overflow-x: auto; scrollbar-width: none; }
  .dock-links::-webkit-scrollbar { display: none; }
  .dock-item { flex: 0 0 auto; }
  .dock-pill { display: none; }
  .dock-item.sel { color: var(--accent-ink); }
  .dock-status { display: none; }
}

/* Honour reduced-motion for the new hover-lifts and the sliding pill */
@media (prefers-reduced-motion: reduce) {
  .agent-card:hover, .ov-card:hover, .model-card:hover, .new-card:hover,
  .metric:hover, .ov-stat:hover, .side-card:hover,
  .btn-primary:hover, .send-btn:hover, .btn-ghost:hover, .btn-soft:hover,
  .btn-danger:hover, .icon-btn:hover { transform: none; }
  .dock-pill { transition: none; }
}

/* Document health scores: paired gauges for chunk quality and graph coverage. */
.document-health-score {
  --health-color: var(--muted);
  --health-score: 0%;
  position: relative;
  width: 66px;
  padding: 4px 0 8px;
  color: var(--health-color);
  font-family: var(--mono);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  line-height: 1;
}

.document-health-score::before,
.document-health-score::after {
  position: absolute;
  right: 0;
  bottom: 2px;
  left: 0;
  height: 2px;
  border-radius: 999px;
  content: "";
}

.document-health-score::before {
  background: var(--line-2);
}

.document-health-score::after {
  right: auto;
  width: var(--health-score);
  background: var(--health-color);
}

.document-health-score.good { --health-color: var(--success); }
.document-health-score.wait { --health-color: var(--warning); }
.document-health-score.bad { --health-color: var(--danger); }
.document-health-score.unknown { --health-color: var(--faint); }

.document-health-score small {
  margin-left: 2px;
  color: var(--faint);
  font-size: 9px;
  font-weight: 600;
}

.document-health-score.unknown::after {
  display: none;
}

@media (max-width: 980px) {
  .kn-tr > span:nth-child(4),
  .kn-tr > span:nth-child(5),
  .kn-tr > span:nth-child(6) {
    display: initial;
  }
}

/* ============================================================================
   Design system: dropdown temado (Select), secção de conta e menu do avatar.
   Usa os mesmos tokens do resto da UI (--surface/--line/--text/--accent/--faint/
   --soft/--danger/--radius), por isso adapta-se ao tema claro e escuro sozinho.
   ========================================================================= */

/* --- Select (substitui os <select> nativos; o popup nativo nao adota o tema) --- */
.cl-select { position: relative; width: 100%; }
.cl-select-block { display: block; }
.cl-select-trigger {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); color: var(--text);
  padding: 10px 12px; font: inherit; font-size: 13.5px; text-align: left; cursor: pointer;
  transition: border-color var(--cl-t-fast) var(--cl-ease), box-shadow var(--cl-t-fast) var(--cl-ease);
}
.cl-select-trigger:hover { border-color: var(--soft-line); }
.cl-select.open .cl-select-trigger,
.cl-select-trigger:focus-visible { border-color: var(--soft-line); box-shadow: 0 0 0 4px var(--soft); outline: 0; }
.cl-select.is-disabled { opacity: 0.55; pointer-events: none; }
.cl-select-value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cl-select-chev { display: inline-flex; color: var(--faint); flex: 0 0 auto; transition: transform var(--cl-t-med) var(--cl-ease), color var(--cl-t-fast) var(--cl-ease); }
.cl-select.open .cl-select-chev { transform: rotate(180deg); color: var(--accent); }
.cl-select-scrim { position: fixed; inset: 0; z-index: 60; }
.cl-select-menu {
  position: absolute; z-index: 61; top: calc(100% + 6px); left: 0; right: 0;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface-2, var(--surface));
  padding: 6px; max-height: 320px; overflow-y: auto;
  box-shadow: var(--shadow);
  animation: cl-select-in var(--cl-t-fast) var(--cl-ease);
}
@keyframes cl-select-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
.cl-select-option {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  border: 0; border-radius: calc(var(--radius) - 1px); background: transparent; color: var(--text);
  padding: 9px 10px; font: inherit; font-size: 13.5px; text-align: left; cursor: pointer;
  transition: background var(--cl-t-fast) var(--cl-ease), color var(--cl-t-fast) var(--cl-ease);
}
.cl-select-option:hover { background: var(--soft); }
.cl-select-option.sel { color: var(--accent); font-weight: 600; }
.cl-select-option svg { color: var(--accent); flex: 0 0 auto; }
.cl-select-option-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cl-select-option-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cl-select-option-hint { font-size: 11.5px; color: var(--faint); }
.cl-select-search, .cl-select-empty {
  width: 100%; box-sizing: border-box; padding: 12px 14px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface-2, var(--surface)); color: var(--text); font: inherit;
}
.cl-select-search { margin-bottom: 4px; }
.cl-select-search:focus { outline: 2px solid var(--accent); outline-offset: -2px; }
.cl-select-empty { color: var(--faint); }

/* --- Conta + empresa ativa no header --- */
.dock-account { display: flex; min-width: 0; }
.dock-account-trigger {
  display: flex; align-items: center; gap: 9px; min-width: 0; max-width: 220px;
  border: 1px solid var(--line-2); border-radius: var(--radius); padding: 4px 8px 4px 5px;
  background: var(--surface-3); color: var(--text); text-align: left;
  transition: border-color var(--cl-t-fast) var(--cl-ease), background var(--cl-t-fast) var(--cl-ease), transform var(--cl-t-fast) var(--cl-ease);
}
.dock-account-trigger:hover { border-color: var(--soft-line); background: var(--surface-2); transform: translateY(-1px); }
.dock-account-trigger:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.dock-account-avatar {
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; flex: 0 0 auto;
  background: var(--grad-accent); box-shadow: var(--grad-accent-hi); color: var(--accent-ink);
  font-family: var(--mono); font-size: 10.5px; font-weight: 700;
}
.dock-company-copy { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.dock-company-copy small {
  color: var(--faint); font-size: 9px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
.dock-company-copy strong {
  max-width: 128px; overflow: hidden; color: var(--text); font-size: 11.5px; font-weight: 650;
  text-overflow: ellipsis; white-space: nowrap;
}
.dock-account-chevron { display: inline-flex; flex: 0 0 auto; color: var(--faint); }
.dock-user-menu {
  position: absolute; right: 0; top: calc(100% + 10px); z-index: 56;
  width: min(320px, calc(100vw - 24px)); max-height: min(620px, calc(100vh - 88px)); overflow-y: auto; padding: 14px;
}
.dock-user-name { font-weight: 600; font-size: 13.5px; color: var(--text); word-break: break-all; }
.dock-user-org { font-size: 12px; color: var(--faint); margin-top: 3px; }
.dock-user-sep { height: 1px; background: var(--line); margin: 12px 0; }
.dock-user-note { font-size: 11.5px; color: var(--faint); }
.organization-menu-label {
  margin-bottom: 6px; color: var(--faint); font-family: var(--mono); font-size: 9.5px;
  font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
.organization-menu-list { display: flex; flex-direction: column; gap: 4px; }
.organization-menu-option {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  border: 1px solid transparent; border-radius: var(--radius-sm); padding: 8px 9px;
  background: transparent; color: var(--text); text-align: left;
}
.organization-menu-option:hover { border-color: var(--line); background: var(--surface-2); }
.organization-menu-option.selected { border-color: var(--soft-line); background: var(--accent-subtle); color: var(--accent); }
.organization-menu-copy { display: flex; flex-direction: column; min-width: 0; }
.organization-menu-copy strong { overflow: hidden; color: inherit; font-size: 12.5px; text-overflow: ellipsis; white-space: nowrap; }
.organization-menu-copy small { color: var(--faint); font-size: 10.5px; }
.organization-menu-create {
  width: 100%; display: flex; align-items: center; gap: 8px; margin-top: 6px;
  border: 1px dashed var(--line-2); border-radius: var(--radius-sm); padding: 9px;
  background: transparent; color: var(--accent); font-size: 12.5px; font-weight: 600; text-align: left;
}
.organization-menu-create:hover { border-color: var(--accent); background: var(--accent-subtle); }

/* --- Organization chooser + creation form --- */
.organization-selection-card { max-width: 460px; }
.organization-selection-list { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.organization-selection-option {
  width: 100%; display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 11px;
  border: 1px solid var(--line); border-radius: var(--radius); padding: 11px 12px;
  background: var(--surface-2); color: var(--text); text-align: left;
  transition: border-color var(--cl-t-fast) var(--cl-ease), background var(--cl-t-fast) var(--cl-ease), transform var(--cl-t-fast) var(--cl-ease);
}
.organization-selection-option:hover { border-color: var(--soft-line); background: var(--accent-subtle); transform: translateY(-1px); }
.organization-option-mark {
  width: 36px; height: 36px; display: grid; place-items: center; border-radius: var(--radius-sm);
  background: var(--grad-accent); color: var(--accent-ink); font-family: var(--mono); font-size: 11px; font-weight: 700;
}
.organization-option-copy { display: flex; flex-direction: column; min-width: 0; }
.organization-option-copy strong { overflow: hidden; font-size: 13.5px; text-overflow: ellipsis; white-space: nowrap; }
.organization-option-copy small { color: var(--faint); font-size: 11px; }
.organization-create-trigger { width: 100%; justify-content: center; margin-top: 2px; }
.organization-create-form {
  display: flex; flex-direction: column; gap: 10px; margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--line);
}
.organization-create-actions { display: flex; justify-content: flex-end; gap: 8px; }
.organization-create-form .login-feedback { min-height: 0; }

@media (max-width: 1120px) {
  .dock-company-copy, .dock-account-chevron { display: none; }
  .dock-account-trigger { padding: 2px; border-color: transparent; background: transparent; }
}

/* --- Secção de conta (Settings) + botao de logout coerente --- */
.account-card {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface);
  padding: 16px 18px; margin-bottom: 20px;
}
.account-id { display: flex; align-items: center; gap: 14px; min-width: 0; }
.account-avatar {
  width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; flex: 0 0 auto;
  background: var(--grad-accent, var(--accent)); color: var(--on-accent, #04140F);
  font-family: var(--mono, monospace); font-weight: 700; font-size: 15px;
}
.account-id-text { min-width: 0; }
.account-name { font-weight: 600; font-size: 14.5px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.account-org { font-size: 12.5px; color: var(--faint); }
.account-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; padding: 3px 9px; border-radius: 999px; }
.account-badge-dot { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; }
.account-badge.on { color: var(--accent); background: var(--soft); }
.account-badge.on .account-badge-dot { background: var(--accent); }
.account-badge.off { color: var(--faint); background: rgba(128,128,128,0.14); }
.account-badge.off .account-badge-dot { background: var(--faint); }
.account-signout {
  border: 1px solid var(--danger); border-radius: var(--radius); padding: 9px 14px;
  background: rgba(207,34,46,0.10); background: color-mix(in srgb, var(--danger) 12%, transparent);
  color: var(--danger); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
  transition: background var(--cl-t-fast) var(--cl-ease); white-space: nowrap;
}
.account-signout:hover { background: rgba(207,34,46,0.18); background: color-mix(in srgb, var(--danger) 20%, transparent); }

/* ============================================================================
   Header/brand: presenca a serio. O simbolo ganha anel e brilho de acento, o
   divisor duro vira um gradiente suave, o subtitulo passa a caixa alta espacada
   (le mais a produto), e ha vida no hover. Sem elementos novos (nada duplicado):
   e o mesmo markup, com craft.
   ========================================================================= */
.dock-brand {
  gap: 11px;
  padding-right: 16px;
  border-right: 0;              /* substituido pelo divisor em gradiente abaixo */
  position: relative;
}
.dock-brand::after {
  content: "";
  position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  width: 1px; height: 64%;
  background: linear-gradient(180deg, transparent, var(--line-2, var(--line)), transparent);
}
.dock-brand-mark {
  width: 34px; height: 34px; border-radius: 11px;
  box-shadow:
    var(--grad-accent-hi),
    0 0 0 1px rgba(0, 224, 180, 0.30),
    0 0 0 1px color-mix(in srgb, var(--accent) 32%, transparent),
    0 6px 18px rgba(0, 224, 180, 0.20),
    0 6px 18px color-mix(in srgb, var(--accent) 22%, transparent);
  transition: transform var(--cl-t-med) var(--cl-ease), box-shadow var(--cl-t-med) var(--cl-ease);
}
.dock-brand:hover .dock-brand-mark {
  transform: translateY(-1px) scale(1.05);
  box-shadow:
    var(--grad-accent-hi),
    0 0 0 1px rgba(0, 224, 180, 0.48),
    0 0 0 1px color-mix(in srgb, var(--accent) 48%, transparent),
    0 10px 26px rgba(0, 224, 180, 0.30),
    0 10px 26px color-mix(in srgb, var(--accent) 32%, transparent);
}
/* O aperto entre letras baixa junto com a troca de fonte: -0.03em foi afinado para a mono e na
   DM Sans as letras colavam-se. */
.dock-brand-name { font-size: 14px; letter-spacing: -0.01em; }
.dock-brand-sub {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--faint);
  margin-top: 2px;
}

/* =========================================================================
   UI polish pass. Appended last so it wins the cascade. Tokens only, no raw
   hex, no new fonts. Scoped tightly so it touches only the intended surfaces.
   ========================================================================= */

/* ---- Tab bar: mono uppercase labels, accent underline, mobile scroll ----
   Scoped to `.tabs .tab` so stray `.tab` usages outside a tab bar are untouched. */
.tabs {
  display: flex;
  gap: 2px;
  border-bottom: 1px solid var(--line);
  margin-top: 24px;
  overflow-x: auto;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tabs .tab {
  position: relative;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 11px 15px;
  margin-bottom: -1px;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--cl-t-fast) var(--cl-ease), background var(--cl-t-fast) var(--cl-ease);
}
.tabs .tab:hover { color: var(--text); background: var(--accent-subtle); }
.tabs .tab.sel { color: var(--accent); background: transparent; border-bottom-color: transparent; }
.tabs .tab.sel::after {
  content: "";
  position: absolute;
  left: 12px; right: 12px; bottom: -1px;
  height: 2px;
  border-radius: 2px 2px 0 0;
  background: var(--accent);
}
.tabs .tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---- Empty states: solid hairline + faint accent wash, not a dashed box --- */
.empty {
  border-style: solid;
  border-color: var(--line);
  background:
    radial-gradient(130% 90% at 50% -10%, var(--accent-subtle), transparent 62%),
    var(--surface);
  gap: 10px;
  padding: 46px 26px;
}
.empty-title { font-size: 15px; font-weight: 800; letter-spacing: -0.01em; }
.empty-sub { color: var(--muted); font-size: 13px; line-height: 1.55; max-width: 380px; }

/* ---- Login screen: a design-system card on the app background ------------
   auth.js builds this before React mounts; these classes + tokens are already
   loaded in <head>, so the login inherits the same theme and light/dark toggle. */
.login-wrap {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background:
    radial-gradient(78% 52% at 50% -8%, var(--accent-subtle), transparent 60%),
    var(--bg);
}
.login-card {
  width: 100%; max-width: 384px;
  display: flex; flex-direction: column; gap: 14px;
  padding: 34px 30px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: var(--shadow-hover);
  font-family: var(--font);   /* era a familia escrita a mao: ficava para tras se a fonte de corpo mudasse */
}
.login-brand {
  font-family: var(--mono);
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--accent);
}
.login-title { font-size: 21px; font-weight: 800; letter-spacing: -0.02em; color: var(--text); margin-top: 2px; }
.login-sub { font-size: 13px; color: var(--muted); margin-top: -6px; }
.login-field { display: flex; flex-direction: column; gap: 6px; }
.login-label { font-size: 12px; font-weight: 600; color: var(--muted); }
.login-feedback { font-size: 12.5px; min-height: 16px; color: var(--danger); }
.login-submit { width: 100%; justify-content: center; margin-top: 4px; min-height: 42px; font-size: 14px; }
.login-toggle {
  background: none; border: 0; padding: 6px 0 0;
  color: var(--muted); font-size: 12.5px; cursor: pointer;
  text-align: center; transition: color var(--cl-t-fast) var(--cl-ease);
}
.login-toggle:hover { color: var(--accent); }
.login-toggle:disabled { opacity: .55; cursor: default; }
.login-accounts { display: flex; flex-wrap: wrap; gap: 8px; }
.login-account {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 8px 7px 12px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text);
  font-size: 12.5px; cursor: pointer;
  max-width: 100%;
  transition: border-color var(--cl-t-fast) var(--cl-ease), background var(--cl-t-fast) var(--cl-ease);
}
.login-account:hover { border-color: var(--accent); background: var(--accent-subtle); }
.login-account-email { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.login-account-forget {
  display: inline-grid; place-items: center;
  width: 18px; height: 18px; border-radius: 50%;
  color: var(--muted); font-size: 14px; line-height: 1; flex: 0 0 auto;
}
.login-account-forget:hover { color: var(--danger); background: var(--danger-subtle); }

/* ---- Settings: consistent card rhythm so each control reads as one unit --
   Conservative on purpose: every existing control stays, this only calms the
   vertical spacing and the grid. */
.settings-tab .side-card { display: flex; flex-direction: column; gap: 12px; }
.settings-tab .side-card > .section-label { margin: 0; }
.settings-tab .field-hint { margin-top: 0; }
.settings-tab .prompt-template-strict-toggle { white-space: normal; }
.settings-tab > *,
.settings-tab .settings-grid > * { min-width: 0; }
.settings-grid { gap: 18px; align-items: start; }
@media (max-width: 720px) {
  .settings-grid { grid-template-columns: 1fr; }
}

/* ── Enriquecimento da tab de QA (2026-07-15): veredicto, avisos, delta, backlog explorer ── */
.qa-warnings { display: flex; flex-direction: column; gap: 6px; margin: 12px 0 4px; }
.qa-warn { font-size: 12.5px; padding: 8px 12px; border-radius: var(--radius); border: 1px solid var(--line); border-left-width: 3px; }
.qa-warn.bad { background: var(--danger-subtle); border-left-color: var(--danger); color: var(--danger); }
.qa-warn.wait { background: var(--warning-subtle); border-left-color: var(--warning); color: var(--warning); }
.qa-warn.good { background: var(--success-subtle); border-left-color: var(--green); color: var(--green); }

.qa-verdict { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; padding: 10px 12px; margin-bottom: 12px; border-radius: var(--radius); border: 1px solid var(--line); border-left-width: 3px; }
.qa-verdict.good { background: var(--success-subtle); border-left-color: var(--green); }
.qa-verdict.bad { background: var(--danger-subtle); border-left-color: var(--danger); }
.qa-verdict.wait { background: var(--warning-subtle); border-left-color: var(--warning); }
.qa-verdict-q { font-size: 12px; color: var(--muted); }
.qa-verdict-label { font-family: var(--mono); font-weight: 700; font-size: 14px; letter-spacing: 0.3px; }
.qa-verdict.good .qa-verdict-label { color: var(--green); }
.qa-verdict.bad .qa-verdict-label { color: var(--danger); }
.qa-verdict.wait .qa-verdict-label { color: var(--warning); }
.qa-verdict-sub { font-size: 12px; color: var(--muted); flex-basis: 100%; }

.qa-delta-card .qa-delta-body { display: flex; flex-direction: column; gap: 8px; }
.qa-delta-num { font-family: var(--mono); font-weight: 700; font-size: 26px; line-height: 1; }
.qa-delta-num.good { color: var(--green); } .qa-delta-num.bad { color: var(--danger); } .qa-delta-num.wait { color: var(--muted); }
.qa-delta-lbl { font-family: inherit; font-weight: 400; font-size: 11px; color: var(--muted); margin-left: 6px; }
.qa-delta-fails { font-size: 12.5px; color: var(--muted); }
.qa-delta-fails .good { color: var(--green); font-weight: 600; } .qa-delta-fails .bad { color: var(--danger); font-weight: 600; } .qa-delta-fails .wait { color: var(--warning); font-weight: 600; }
.qa-delta-note { font-size: 12px; color: var(--muted); font-style: italic; }

.qa-backlog-explorer { margin-top: 14px; }
.qa-backlog-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.qa-backlog-title { display: inline-flex; align-items: center; gap: 6px; }
.qa-attrib { display: flex; gap: 8px; flex-wrap: wrap; }
.qa-attrib-chip { font-family: var(--mono); font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line); cursor: help; white-space: pre-line; }
.qa-attrib-chip.agente { background: var(--danger-subtle); color: var(--danger); border-color: transparent; }
.qa-attrib-chip.motor { background: var(--accent-subtle); color: var(--accent); border-color: transparent; }

.qa-backlog2 { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.qa-bk2-row { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.qa-bk2-row.open { border-color: var(--accent); }
.qa-bk2-top { display: flex; align-items: center; gap: 8px; padding: 9px 11px; cursor: pointer; background: var(--surface-2); }
.qa-bk2-top:hover { background: var(--accent-subtle); }
.qa-bk2-chev { color: var(--muted); font-size: 11px; width: 12px; flex: none; }
.qa-pri { font-family: var(--mono); font-weight: 700; font-size: 10px; padding: 2px 7px; border-radius: 5px; flex: none; }
.qa-pri.p0 { background: var(--danger-subtle); color: var(--danger); }
.qa-pri.p1 { background: var(--warning-subtle); color: var(--warning); }
.qa-pri.p2 { background: var(--accent-subtle); color: var(--accent); }
.qa-pri.p3 { background: var(--surface-2); color: var(--muted); }
.qa-bk2-q { flex: 1; font-size: 13px; font-weight: 500; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qa-bk2-row.open .qa-bk2-q { white-space: normal; }
.qa-bk2-cat { font-family: var(--mono); font-size: 10.5px; color: var(--muted); flex: none; }
.qa-diag { font-family: var(--mono); font-size: 10px; font-weight: 600; padding: 2px 8px; border-radius: 999px; flex: none; }
.qa-diag.bad { background: var(--danger-subtle); color: var(--danger); }
.qa-diag.wait { background: var(--warning-subtle); color: var(--warning); }
.qa-diag.muted { background: var(--surface-2); color: var(--muted); }
.qa-bk2-detail { padding: 11px 13px; display: flex; flex-direction: column; gap: 10px; border-top: 1px solid var(--line); }
.qa-bk2-block { display: flex; flex-direction: column; gap: 3px; }
.qa-bk2-lbl { font-family: var(--mono); font-size: 9.5px; font-weight: 700; letter-spacing: 0.5px; color: var(--muted); text-transform: uppercase; }
.qa-bk2-resp { font-size: 12.5px; color: var(--text); background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 10px; white-space: pre-wrap; }
.qa-bk2-razao { font-size: 12.5px; color: var(--muted); font-style: italic; }
@media (max-width: 640px) { .qa-bk2-cat { display: none; } .qa-attrib { width: 100%; } }

/* Refusals tab: reuses .qa-head / .ov-card / .panel-sub; only the row chrome is new. */
.refusals-summary { margin: 2px 0 16px; }
.refusals-list { display: flex; flex-direction: column; gap: 10px; }
.refusals-row .ov-card-h { display: flex; align-items: center; gap: 8px; }
.refusals-q { margin: 8px 0 6px; color: var(--text); font-weight: 500; }
.refusals-count {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  font-size: 12px;
}
.refusals-tag {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--inset);
  border: 1px solid var(--line);
  color: var(--muted);
}
.refusals-tag-content_gap { color: var(--warning); border-color: var(--warning); }
.refusals-tag-retrieval_quality { color: var(--accent); border-color: var(--accent); }
.refusals-tag-infra { color: var(--muted); }
.refusals-tag-unknown { color: var(--faint); }

/* Agent info extractor: regular settings card — shares a row with Temperature, below LLM re-ranking. */
.extractor-card .extractor-card-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.extractor-card .field-hint { margin-top: 6px; margin-bottom: 0; }

/* --- Primitivas UI: modal de confirmacao + menu do Select portalizado --- */

/* Modal de confirmacao (substitui o window.confirm nativo, que ignora o tema e nao anima).
   O scrim reusa .conn-form-overlay; este cartao e mais estreito que o .conn-form e as acoes
   ficam a direita. A animacao respeita o kill-switch global de prefers-reduced-motion. */
.confirm-modal {
  width: min(420px, 100%);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 22px;
  box-shadow: var(--shadow-hover);
  display: flex;
  flex-direction: column;
  gap: 10px;
  animation: cl-pop var(--cl-t-med) var(--cl-ease);
}
.confirm-title { font-weight: 700; font-size: 16px; color: var(--text); }
.confirm-body { font-size: 13.5px; color: var(--muted); line-height: 1.55; overflow-wrap: anywhere; }
.confirm-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }

/* Menu do Select portalizado para o <body>: escapa aos stacking contexts dos cartoes com
   transform (hover-lift), que prendiam o z-index do menu e deixavam o cartao seguinte pintar
   por cima (dropdown do Model tapado pelo Adaptive routing). O wrapper leva position:fixed
   inline (medido ao trigger); o menu passa a static dentro dele. */
.cl-select-portal { position: fixed; z-index: 1000; }
.cl-select-portal .cl-select-menu { position: static; }

/* --- Shell: badge de API real, avatares, motion e pagina Guide --- */

/* Badge "API online" ligado ao /api/health: tres estados com cor propria. O pulse so
   existe no estado offline, para chamar o olho quando algo esta mal. */
.dock-status.unknown .status-dot { background: var(--muted); box-shadow: 0 0 0 3px var(--surface-2); }
.dock-status.down { color: var(--danger); border-color: var(--danger-subtle); }
.dock-status.down .status-dot {
  background: var(--danger);
  box-shadow: 0 0 0 3px var(--danger-subtle);
  animation: status-pulse 1.6s ease-in-out infinite;
}
@keyframes status-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(0.7); opacity: 0.6; }
}

/* Letras dos avatares a BRANCO (a tinta escura sobre o gradiente verde lia-se mal),
   com um text-shadow suave para aguentar o contraste tambem no tema claro. */
.dock-avatar,
.account-avatar {
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

/* Motion: o avatar da navbar reage ao rato e ao clique; o menu de conta entra com o
   spring do design system em vez de aparecer seco. */
.dock-avatar { cursor: pointer; transition: transform var(--cl-t-fast, var(--cl-t-fast)) var(--cl-spring); }
.dock-avatar:hover { transform: scale(1.08); }
.dock-avatar:active { transform: scale(0.94); }
.dock-user-menu { animation: cl-pop var(--cl-t-med) var(--cl-ease); transform-origin: top right; }
.dock-theme { transition: transform var(--cl-t-fast, var(--cl-t-fast)) var(--cl-spring), background var(--cl-t-fast) var(--cl-ease); }
.dock-theme:hover { transform: rotate(-12deg) scale(1.1); }
.account-signout { transition: background var(--cl-t-fast) var(--cl-ease), transform var(--cl-t-fast) var(--cl-ease); }
.account-signout:hover { transform: translateY(-1px); }

/* Pagina Guide: passos do fluxo em cartoes, mobile-first (1 coluna; 2 a partir de 720px). */
.guide-grid { display: grid; grid-template-columns: 1fr; gap: 14px; margin-top: 18px; }
@media (min-width: 720px) { .guide-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.guide-card { display: flex; flex-direction: column; gap: 8px; padding: 18px; }
.guide-card b { font-size: 15px; color: var(--text); }
.guide-card p { margin: 0; font-size: 13.5px; color: var(--muted); line-height: 1.55; }
.guide-card-ic {
  width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center;
  background: var(--accent-subtle); color: var(--accent);
}
.guide-support {
  margin-top: 18px; display: flex; align-items: center; gap: 8px;
  color: var(--muted); font-size: 13px;
}

@media (prefers-reduced-motion: reduce) {
  .dock-status.down .status-dot { animation: none; }
  .dock-avatar:hover, .dock-avatar:active, .dock-theme:hover, .account-signout:hover { transform: none; }
  .dock-user-menu { animation: none; }
}

/* --- Library: cards com glyph/capacidades/QA/data + filtros na toolbar --- */

.lib-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.lib-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; flex: 1; min-width: 0; }
.lib-filter { width: auto; min-width: 150px; flex: 0 1 auto; }
.lib-filter .cl-select-trigger { padding: 8px 11px; font-size: 12.5px; border-radius: 10px; }
@media (max-width: 640px) {
  .lib-filters { width: 100%; }
  .lib-filter { flex: 1 1 45%; min-width: 130px; }
}

.agent-card { display: flex; flex-direction: column; gap: 12px; }
.ac-top { display: flex; align-items: flex-start; gap: 12px; }
.ac-title { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ac-desc { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ac-caps { display: flex; flex-wrap: wrap; gap: 6px; }
.ac-cap {
  font-family: var(--mono); font-size: 10.5px; font-weight: 600; letter-spacing: 0.02em;
  padding: 3px 8px; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--line); color: var(--muted);
}
.ac-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; }
.ac-qa {
  font-family: var(--mono); font-size: 11px; font-weight: 700;
  padding: 3px 9px; border-radius: 999px; border: 1px solid transparent;
}
.ac-qa.good { background: var(--success-subtle); color: var(--success); }
.ac-qa.wait { background: var(--warning-subtle); color: var(--warning); }
.ac-qa.bad { background: var(--danger-subtle); color: var(--danger); }
.ac-qa.na { background: var(--surface-2); color: var(--faint); border-color: var(--line); }
.ac-date { font-size: 11px; color: var(--faint); white-space: nowrap; }

/* --- Knowledge: linha de atencao acionavel + titulo da KB clicavel --- */

.kb-attention {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px; border-radius: var(--radius); margin-bottom: 18px;
  font-size: 13px; border: 1px solid var(--line); background: var(--surface);
}
.kb-attention.ok { color: var(--success); border-color: var(--success-subtle); }
.kb-attention.warn { color: var(--warning); border-color: var(--warning-subtle); }

.kb-name-link {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; font-weight: 700; color: var(--accent); text-align: left;
  border-radius: 4px;
}
.kb-name-link:hover { text-decoration: underline; }
.kb-name-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* --- Detalhe do agente: overview, retrieval test, grelha de saude e tabs --- */

/* Bug do corte: o grid esticava os cartoes a altura da linha (align-items:stretch +
   min-height:100%), e o fim do cartao grande cortava a ultima source da lista. Com
   align-items:start cada cartao tem a altura do proprio conteudo. */
.overview-grid { align-items: start; }
.overview-card { min-height: auto; }

/* Botao do teste de retrieval alinhado ao centro do input (ficava a boiar quando a
   linha crescia); em ecras estreitos a grid colapsa e o botao ocupa a largura toda. */
.retrieval-input { align-items: center; }
.retrieval-input .btn { white-space: nowrap; }
@media (max-width: 560px) {
  .retrieval-input { grid-template-columns: 1fr; }
  .retrieval-input .btn { width: 100%; justify-content: center; }
}

/* Score de similaridade com tom semantico (bad/wait/good vem de retrievalScoreTone). */
.score-pill.bad { background: var(--danger-subtle); color: var(--danger); }
.score-pill.wait { background: var(--warning-subtle); color: var(--warning); }
.score-pill.good { background: var(--success-subtle); color: var(--success); }

/* Grelha de saude da KB com hierarquia: valor grande, label mono discreta, e o cartao
   de estado com fundo do proprio tom em vez de mais um retangulo igual aos outros. */
.kb-health-grid .ov-stat b { font-size: 22px; letter-spacing: -0.01em; }
.kb-health-grid .ov-stat em { font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; }
.kb-health-status { border-radius: var(--radius); font-weight: 700; }
.kb-health-status.good { background: var(--success-subtle); border-color: var(--success); color: var(--success); }
.kb-health-status.wait { background: var(--warning-subtle); border-color: var(--warning); color: var(--warning); }
.kb-health-status.bad { background: var(--danger-subtle); border-color: var(--danger); color: var(--danger); }
@media (max-width: 900px) { .kb-health-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } }
@media (max-width: 560px) { .kb-health-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }

/* Tabs do detalhe: bloco final e completo (ha varios blocos antigos para .tabs na
   cascata; este e o ultimo, ganha os empates todos). Indicador deslizante por
   border-bottom, mais respiro, scroll horizontal em mobile sem quebrar linha. */
.tabs {
  display: flex;
  gap: 2px;
  margin-top: 24px;
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
  scrollbar-width: none;
  flex-wrap: nowrap;
}
.tabs::-webkit-scrollbar { display: none; }
.tabs .tab {
  position: relative;
  background: none;
  border: 0;
  border-radius: 10px 10px 0 0;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 11px 16px;
  margin-bottom: 0;
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--cl-t-fast) var(--cl-ease), background var(--cl-t-fast) var(--cl-ease);
}
.tabs .tab::after {
  content: "";
  position: absolute;
  left: 14px; right: 14px; bottom: -1px;
  height: 2px;
  border-radius: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transition: transform var(--cl-t-med) var(--cl-ease);
}
.tabs .tab:hover { color: var(--text); background: var(--accent-subtle); }
.tabs .tab.sel { color: var(--accent); }
.tabs .tab.sel::after { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) { .tabs .tab::after { transition: none; } }

/* --- Deployments: passos numerados, description visivel, alinhamentos, show/hide da key --- */

.deploy-step { margin: 22px 0 10px; color: var(--accent); }
.deploy-app-desc { display: block; font-size: 12.5px; color: var(--muted); margin: 2px 0 3px; }

/* "Last used" alinhado ao TOPO como as restantes celulas (dancava ao meio quando a
   coluna Keys empilhava varias linhas); um respiro consistente entre linhas. */
.deploy-tr { align-items: start; }
.deploy-tr > span { padding-top: 6px; }
.deploy-tr.deploy-thead > span { padding-top: 0; }

.secret-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.secret-row code { flex: 1; min-width: 200px; overflow-wrap: anywhere; }

/* --- Refusals: filtros inline sem caixa, linhas colapsaveis --- */

.refusals-filters { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.refusals-filter { width: auto; min-width: 150px; }
.refusals-filter .cl-select-trigger {
  padding: 8px 11px; font-size: 12.5px; border-radius: 10px;
  background: transparent; border-color: var(--line);
}

.refusals-row-head { cursor: pointer; user-select: none; }
.refusals-row-head:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 8px; }
.refusals-chev { display: inline-flex; color: var(--faint); transition: transform var(--cl-t-med) var(--cl-ease); transform: rotate(-90deg); }
.refusals-row.open .refusals-chev { transform: rotate(0deg); color: var(--accent); }
.refusals-q-inline {
  flex: 1; min-width: 0; font-size: 13px; font-weight: 500; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.refusals-row.open .refusals-q-inline { display: none; }
.refusals-detail { padding-top: 4px; }
.refusals-row .refusals-q { margin: 4px 0 6px; }
@media (prefers-reduced-motion: reduce) { .refusals-chev { transition: none; } }

/* --- New agent + Settings do agente: stepper centrado, prompt em grupos, upload plano --- */

/* Stepper 01 Configure / 02 Ingest centrado no header (grid de 3 zonas: back | rail | vazio),
   em vez de colado ao botao de voltar. */
.create-head {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
}
.create-head .back-btn { justify-self: start; }
.create-head .step-rail { justify-self: center; }
@media (max-width: 640px) {
  .create-head { grid-template-columns: auto 1fr; }
  .create-head .step-rail { justify-self: end; }
}

/* Ferramentas do system prompt em tres grupos com label propria, alinhados em grelha
   (o flex-wrap antigo refluia de forma imprevisivel). O select do template ja nao traz
   caixa embrulhada; os grupos dao-lhe o contexto. */
.prompt-template-tools {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.4fr);
  gap: 14px;
  align-items: start;
}
@media (max-width: 900px) { .prompt-template-tools { grid-template-columns: 1fr; align-items: stretch; } }
.prompt-tool-group { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.prompt-tool-label {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.prompt-tool-group > .text-input,
.prompt-tool-group .cl-select-trigger { height: 42px; min-width: 0; }
.prompt-template-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.prompt-template-actions .prompt-template-strict-toggle { padding-bottom: 0; white-space: normal; }

/* Cartao de identidade no topo das settings (Name + Description + System prompt). */
.settings-identity { display: flex; flex-direction: column; gap: 14px; margin-bottom: 16px; }
.settings-identity .prompt-section-editor { margin-top: 4px; }

.prompt-optimizer-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px 28px;
  align-items: center;
  margin-bottom: 16px;
  border-color: color-mix(in srgb, var(--accent) 28%, var(--line));
}
.prompt-optimizer-copy .section-label { display: flex; align-items: center; gap: 8px; }
.prompt-optimizer-controls { display: flex; align-items: end; gap: 12px; }
.prompt-optimizer-model { display: grid; gap: 6px; min-width: 280px; }
.prompt-optimizer-result {
  grid-column: 1 / -1;
  display: grid;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line));
  border-radius: 10px;
  background: color-mix(in srgb, var(--accent) 7%, transparent);
}
.prompt-optimizer-result-head,
.prompt-optimizer-result-title,
.prompt-optimizer-guards,
.prompt-optimizer-warning,
.prompt-optimizer-meta {
  display: flex;
  align-items: center;
}
.prompt-optimizer-result-head { justify-content: space-between; gap: 12px; }
.prompt-optimizer-result-title { gap: 7px; min-width: 0; color: var(--text); }
.prompt-optimizer-result-title svg { flex: 0 0 auto; color: var(--accent); }
.prompt-optimizer-summary { color: var(--muted); line-height: 1.5; }
.prompt-optimizer-guards { flex-wrap: wrap; gap: 7px; }
.prompt-optimizer-guard {
  gap: 5px;
  padding: 4px 8px;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0.02em;
}
.prompt-optimizer-guard.is-safe { color: var(--success); }
.prompt-optimizer-guard.is-warning { color: var(--danger); }
.prompt-optimizer-warning {
  align-items: flex-start;
  gap: 7px;
  padding: 8px 10px;
  border-left: 3px solid var(--warning);
  background: color-mix(in srgb, var(--warning) 8%, transparent);
  color: var(--warning);
  font-size: 12px;
  line-height: 1.45;
}
.prompt-optimizer-warning svg { flex: 0 0 auto; margin-top: 1px; }
.prompt-optimizer-meta { flex-wrap: wrap; gap: 5px 14px; }
.prompt-optimizer-result small { color: var(--faint); }
.prompt-optimizer-result .btn span { color: inherit; }
.prompt-optimizer-result-undone {
  grid-template-columns: auto 1fr;
  align-items: center;
  color: var(--success);
}
.prompt-optimizer-result-edited {
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  color: var(--warning);
}
.rerank-prompt-field { display: grid; gap: 7px; margin-top: 8px; }
.rerank-prompt-input { min-height: 126px; resize: vertical; line-height: 1.45; }

@media (max-width: 840px) {
  .prompt-optimizer-card { grid-template-columns: 1fr; }
  .prompt-optimizer-controls { align-items: stretch; flex-direction: column; }
  .prompt-optimizer-model { min-width: 0; }
  .prompt-optimizer-result { grid-column: auto; }
  .prompt-optimizer-result-head { align-items: flex-start; flex-direction: column; }
}

/* --- QA: progresso da corrida por categoria (substitui o log de terminal na frente) --- */

.qa-progress-card { display: flex; flex-direction: column; gap: 14px; margin-bottom: 16px; }
.qa-progress-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.qa-progress-head b { font-size: 14px; color: var(--text); }
.qa-progress-phase { font-size: 12.5px; color: var(--muted); }

.qa-progress-cats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px 16px;
}
@media (max-width: 900px) { .qa-progress-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .qa-progress-cats { grid-template-columns: 1fr; } }

.qa-progress-cat { display: flex; flex-direction: column; gap: 6px; opacity: 0.55; transition: opacity var(--cl-t-med) var(--cl-ease); }
.qa-progress-cat.active, .qa-progress-cat.done { opacity: 1; }
.qa-progress-cat-top { display: flex; align-items: center; gap: 7px; font-size: 12px; }
.qa-progress-cat-name { color: var(--text); font-weight: 600; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qa-progress-cat-count { font-family: var(--mono); font-size: 11px; color: var(--muted); display: inline-flex; align-items: center; }
.qa-progress-cat.done .qa-progress-cat-count { color: var(--success); }

.qa-cat-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }

/* Paleta por categoria (6 posicoes, tokens do contentlab + semanticos): distingue as
   categorias entre si, como pedido; o tom semantico good/bad continua reservado ao resultado. */
.qa-catcolor-0 { background: var(--accent); }
.qa-catcolor-1 { background: var(--cl-cat-consumer, #4C86FF); }
.qa-catcolor-2 { background: var(--cl-cat-creative, #9B6BFF); }
.qa-catcolor-3 { background: var(--cl-cat-brand, #F5A524); }
.qa-catcolor-4 { background: var(--cl-cat-culture, #F45D9E); }
.qa-catcolor-5 { background: var(--danger); }
.qa-cat-fill.qa-catcolor-0, .qa-cat-fill.qa-catcolor-1, .qa-cat-fill.qa-catcolor-2,
.qa-cat-fill.qa-catcolor-3, .qa-cat-fill.qa-catcolor-4, .qa-cat-fill.qa-catcolor-5 {
  transition: width var(--cl-t-med) var(--cl-ease); /* largura = o dado, muda a cada tick */
}

/* Sem dados estruturados (sidecar antigo): barra indeterminada com varrimento. */
.qa-progress-indeterminate {
  position: relative; height: 8px; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--line); overflow: hidden;
}
.qa-progress-sweep {
  position: absolute; top: 0; bottom: 0; width: 34%; border-radius: 999px;
  background: var(--grad-accent, var(--accent));
  animation: qa-sweep 1.4s ease-in-out infinite;
}
@keyframes qa-sweep {
  0% { left: -34%; }
  100% { left: 100%; }
}

.qa-progress-logwrap { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
@media (prefers-reduced-motion: reduce) {
  .qa-progress-sweep { animation: none; left: 33%; }
  .qa-cat-fill { transition: none; }
}

/* --- Dynamic Guide: spotlight + popover animado com variacao --- */

.guide-layer { position: fixed; inset: 0; z-index: 1200; }

/* O "buraco" do spotlight: um retangulo com box-shadow gigante a escurecer o resto do
   ecra. Transicionar top/left/width/height faz o foco DESLIZAR de um alvo para o outro
   em vez de saltar: e isso que da a sensacao de tour continuo. */
.guide-hole {
  position: fixed;
  border-radius: 14px;
  box-shadow: 0 0 0 9999px rgba(4, 12, 10, 0.62);
  border: 1.5px solid var(--accent);
  /* sem curva elastica: com overshoot o realce passa AO LADO do alvo e volta atras, o que num
     retangulo que segue um elemento fica visivelmente errado. */
  transition: top var(--cl-t-slow) var(--cl-ease), left var(--cl-t-slow) var(--cl-ease),
              width var(--cl-t-slow) var(--cl-ease), height var(--cl-t-slow) var(--cl-ease);
  pointer-events: none;
}
[data-theme="light"] .guide-hole { box-shadow: 0 0 0 9999px rgba(15, 26, 23, 0.45); }

/* Pulso no alvo (variacao dos passos impares): um anel que respira a chamar o olho. */
.guide-pulse {
  position: absolute; inset: -3px; border-radius: 16px;
  border: 2px solid var(--accent);
  animation: guide-pulse 1.6s ease-out infinite;
  pointer-events: none;
}
@keyframes guide-pulse {
  0% { opacity: 0.9; transform: scale(1); }
  70% { opacity: 0; transform: scale(1.06); }
  100% { opacity: 0; transform: scale(1.06); }
}

.guide-pop {
  position: fixed;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-hover);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
/* Variacao deliberada da entrada (pedido: "nao pode ser sempre a mesma coisa"). */
.guide-pop.guide-variant-0 { animation: cl-rise var(--cl-t-slow) var(--cl-ease); }
.guide-pop.guide-variant-1 { animation: cl-pop var(--cl-t-med) var(--cl-ease); }
.guide-pop.guide-variant-2 { animation: guide-slide var(--cl-t-slow) var(--cl-ease); }
@keyframes guide-slide {
  from { opacity: 0; transform: translateX(-14px); }
  to { opacity: 1; transform: none; }
}

/* Seta do popover para o alvo, com um bounce subtil na direcao do foco. */
.guide-arrow {
  position: absolute;
  width: 14px; height: 14px;
  background: var(--surface);
  border-left: 1px solid var(--line);
  border-top: 1px solid var(--line);
  transform: rotate(45deg);
}
.guide-pop.below .guide-arrow { top: -8px; animation: guide-nudge-up 1.4s ease-in-out infinite; }
.guide-pop.above .guide-arrow { bottom: -8px; transform: rotate(225deg); animation: guide-nudge-down 1.4s ease-in-out infinite; }
@keyframes guide-nudge-up {
  0%, 100% { margin-top: 0; }
  50% { margin-top: -3px; }
}
@keyframes guide-nudge-down {
  0%, 100% { margin-bottom: 0; }
  50% { margin-bottom: -3px; }
}

.guide-pop-kicker {
  font-family: var(--mono); font-size: 10px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent);
}
.guide-pop-title { font-size: 15px; color: var(--text); }
.guide-pop-text { margin: 0; font-size: 13px; color: var(--muted); line-height: 1.55; }
.guide-pop-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; }
.guide-dots { display: flex; gap: 5px; }
.guide-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--line-2, var(--line));
  transition: background var(--cl-t-med) var(--cl-ease), transform var(--cl-t-med) var(--cl-ease);
}
.guide-dot.on { background: var(--accent); transform: scale(1.35); }
.guide-pop-actions { display: flex; align-items: center; gap: 8px; }
.guide-skip {
  background: none; border: 0; padding: 4px 6px; cursor: pointer;
  font: inherit; font-size: 12px; color: var(--faint); border-radius: 6px;
}
.guide-skip:hover { color: var(--muted); }

/* Pagina Guide: cartoes dos tours re-jogaveis. */
.guide-tours { display: grid; grid-template-columns: 1fr; gap: 10px; margin: 14px 0 22px; }
@media (min-width: 720px) { .guide-tours { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.guide-tour-card { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; }
.guide-tour-text { min-width: 0; }
.guide-tour-text b { font-size: 14px; color: var(--text); display: block; }
.guide-tour-text p { margin: 3px 0 0; font-size: 12.5px; color: var(--muted); }
.guide-tour-seen { display: inline-flex; align-items: center; gap: 4px; margin-top: 5px; font-size: 11px; color: var(--success); }
.guide-page .section-label { margin-top: 20px; }

@media (prefers-reduced-motion: reduce) {
  .guide-hole { transition: none; }
  .guide-pulse, .guide-pop.guide-variant-0, .guide-pop.guide-variant-1, .guide-pop.guide-variant-2,
  .guide-pop.below .guide-arrow, .guide-pop.above .guide-arrow { animation: none; }
}

/* --- Transicao de tema (View Transitions): o reveal circular e conduzido por JS no
   pseudo-elemento ::view-transition-new(root); aqui so desligamos o crossfade default
   para o circulo ser o unico efeito, com o tema novo por cima do antigo. --- */
::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}
::view-transition-old(root) { z-index: 1; }
::view-transition-new(root) { z-index: 2; }

/* Upload do passo Ingest sem caixa dupla: o dropzone tracejado E a caixa; o wrapper
   perde borda/fundo. O gradiente hardcoded claro (partia o dark mode) da lugar a tokens. */
.knowledge-upload { border: 0; background: transparent; padding: 0; }
.knowledge-file-drop {
  background: linear-gradient(135deg, var(--surface), var(--accent-subtle));
}

/* --- Full report do QA: polimento ao design system --- */

/* O anel do score segue o tom do portao (como as pills e as barras): PASS verde,
   INCONCLUSIVE/ABORTED ambar, FAIL vermelho. Antes ficava sempre verde-accent
   mesmo com a pill FAIL ao lado, sinais mistos. */
.qa-ring.good .qa-ring-fg { stroke: var(--success); }
.qa-ring.good .qa-ring-n { color: var(--success); }
.qa-ring.wait .qa-ring-fg { stroke: var(--warning); }
.qa-ring.wait .qa-ring-n { color: var(--warning); }
.qa-ring.bad .qa-ring-fg { stroke: var(--danger); }
.qa-ring.bad .qa-ring-n { color: var(--danger); }

/* Cabecalho do relatorio com a identidade do agente (glyph + nome + data da corrida):
   um relatorio a serio diz de quem e e de quando e, nao so "Relatorio completo". */
.qa-report-agent { display: flex; align-items: center; gap: 12px; min-width: 0; }
.qa-report-agent h2 { margin: 0; font-size: 17px; line-height: 1.2; }
.qa-report-sub { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; }

/* Respiro consistente entre as seccoes do corpo do relatorio. */
.qa-report-body { display: flex; flex-direction: column; gap: 16px; }
.qa-report-body > * { margin: 0; }

/* REGRA DE DESIGN SYSTEM (Duarte, 2026-07-17): NUNCA box dentro de box.
   O contentlab estiliza .cl-select como um INPUT (fundo + borda + padding), mas o dropdown
   da app reusa o mesmo nome como CONTAINER do trigger. Essa colisao desenhava uma caixa
   cinzenta a volta de TODOS os selects (deployments, filtros, settings...): o box-in-box.
   O container fica transparente; a unica caixa e o proprio trigger. */
.cl-select {
  background: none;
  border: 0;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
}

/* --- Tabs do detalhe: pill deslizante do design system (igual a navbar) --- */

/* Bloco final e completo: substitui o sublinhado por uma pill de gradiente que DESLIZA
   entre segmentos de largura igual (mesma mecanica CSS-vars do dock). */
.tabs {
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--tab-count, 6), minmax(108px, 1fr));
  gap: 0;
  margin-top: 24px;
  padding: 4px;
  border: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-2);
  overflow-x: auto;
  scrollbar-width: none;
  max-width: 760px;
}
.tabs::-webkit-scrollbar { display: none; }

.tabs .tab-pill {
  position: absolute;
  z-index: 0;
  top: 4px;
  bottom: 4px;
  left: 4px;
  width: calc((100% - 8px) / var(--tab-count, 6));
  transform: translateX(calc(var(--tab-active, 0) * 100%));
  border-radius: 999px;
  background: var(--grad-accent);
  /* So o brilho interior do gradiente: a sombra exterior (--shadow-sm) era cortada pelo
     clipping da barra (overflow) e virava uma linha dura a seguir a pill. */
  box-shadow: var(--grad-accent-hi);
  transition: transform var(--cl-t-med) var(--cl-ease);
}

.tabs .tab {
  position: relative;
  z-index: 1;
  background: none;
  border: 0;
  border-radius: 999px;
  margin-bottom: 0;
  padding: 9px 10px;
  text-align: center;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  /* cor a acompanhar a pastilha (med); o scale de :active e resposta ao toque (fast). */
  transition: color var(--cl-t-med) var(--cl-ease), transform var(--cl-t-fast) var(--cl-ease);
}
.tabs .tab::after { content: none; }
/* O sublinhado antigo vivia em .tabs .tab.sel::after (mais especifico que o reset acima),
   por isso continuava a desenhar-se e "seguia" a pill. Reset com a MESMA especificidade. */
.tabs .tab.sel::after { content: none; }
.tabs .tab:hover { color: var(--text); background: none; }
.tabs .tab:active { transform: scale(0.96); }
.tabs .tab.sel { color: var(--accent-ink); }
.tabs .tab.sel:hover { color: var(--accent-ink); }

@media (prefers-reduced-motion: reduce) {
  .tabs .tab-pill { transition: none; }
  .tabs .tab:active { transform: none; }
}

/* --- Fase A: backlog do QA como acordeao + barra de racio + modal de detalhe --- */

/* Cabecalho do backlog: titulo em cima, barra de racio por baixo em ecra estreito. */
.qa-backlog-explorer .qa-backlog-head { align-items: flex-start; gap: 14px; }

/* Barra de racio agente/motor: uma barra segmentada + legenda, no lugar das duas pills soltas. */
.qa-attrib2 { display: flex; flex-direction: column; gap: 6px; min-width: 220px; }
.qa-attrib2-bar { display: flex; height: 8px; border-radius: 999px; overflow: hidden; background: var(--surface-2); border: 1px solid var(--line); }
.qa-attrib2-ag { background: var(--danger); }
.qa-attrib2-mo { background: var(--muted); opacity: 0.55; }
/* (a barra .qa-attrib2 foi substituida pelos chips .qa-attrib3; CSS de movimento removido) */
.qa-attrib2-legend { display: flex; gap: 14px; font-size: 11px; color: var(--muted); }
.qa-attrib2-k { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.qa-attrib2-dot { width: 8px; height: 8px; border-radius: 2px; flex: none; }
.qa-attrib2-k.ag .qa-attrib2-dot { background: var(--danger); }
.qa-attrib2-k.mo .qa-attrib2-dot { background: var(--muted); opacity: 0.55; }

/* Acordeao por prioridade: uma seccao por P0/P1/P2, cabecalho clicavel, corpo colapsavel. */
.qa-bk-accordion { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.qa-bk-group { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.qa-bk-group.open { border-color: var(--soft-line); }
.qa-bk-group-head {
  width: 100%; display: flex; align-items: center; gap: 10px;
  padding: 11px 13px; background: var(--surface-2); border: 0; cursor: pointer;
  font: inherit; text-align: left; color: var(--text);
  transition: background var(--cl-t-fast) var(--cl-ease);
}
.qa-bk-group-head:hover { background: var(--accent-subtle); }
.qa-bk-chev { display: inline-flex; color: var(--muted); transition: transform var(--cl-t-med) var(--cl-ease); transform: rotate(-90deg); }
.qa-bk-group.open .qa-bk-chev { transform: rotate(0deg); color: var(--accent); }
.qa-bk-group-count { margin-left: auto; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.qa-bk-group-body { display: flex; flex-direction: column; padding: 6px; gap: 4px; }

/* Cada item e uma linha clicavel que abre o modal de detalhe. */
.qa-bk-item {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 9px 11px; border: 0; border-radius: calc(var(--radius) - 2px);
  background: transparent; cursor: pointer; font: inherit; text-align: left; color: var(--text);
  transition: background var(--cl-t-fast) var(--cl-ease), transform var(--cl-t-fast) var(--cl-ease);
}
.qa-bk-item:hover { background: var(--surface-2); }
.qa-bk-item:active { transform: scale(0.995); }
.qa-bk-item-q { flex: 1; min-width: 0; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qa-bk-item-cat { font-family: var(--mono); font-size: 10.5px; color: var(--muted); flex: none; }
.qa-bk-item > svg { color: var(--faint); flex: none; }

/* Chip de diagnostico curto (1-2 palavras); a frase completa vive no tooltip e no modal. */
.qa-diag.good { background: var(--success-subtle); color: var(--success); }

/* Modal de detalhe do item (reusa .confirm-modal, um pouco mais largo). */
.qa-bk-modal { width: min(560px, 100%); text-align: left; gap: 12px; }
.qa-bk-modal-head { display: flex; align-items: center; gap: 8px; }
.qa-bk-modal-cat { font-family: var(--mono); font-size: 11px; color: var(--muted); }
.qa-bk-modal-x { margin-left: auto; }
.qa-bk-modal-q { font-size: 15px; font-weight: 600; color: var(--text); line-height: 1.4; }
.qa-bk-modal-diag { font-size: 12.5px; color: var(--muted); }

/* Espacamento das categorias estaticas da tab (sem chevron nem hover de clique). */
.qa-cats { display: flex; flex-direction: column; gap: 9px; }
.qa-cat.static { cursor: default; padding: 2px 0; }
.qa-cat.static:hover { background: none; }
/* A grelha base tem 5 colunas (a 1a e o chevron, 16px). As categorias estaticas ja nao tem
   chevron: sem esta correcao o NOME caia na coluna de 16px e ficava cortado ("D...", "R..."). */
.qa-cat.static { grid-template-columns: minmax(104px, 168px) minmax(0, 1fr) auto 42px; }
.qa-cat.static .qa-cat-name { max-width: none; }

/* ── QA Full report (Fase B): colapsavel, FAIL-first, brief formatado ─────────────────────────
   O report nasce focado no que doi: categorias falhadas abertas, resto fechado; dentro de cada
   categoria os FAIL vem primeiro e os PASS ficam atras de "ver os N que passaram". Backlog com
   detalhe INLINE (o report ja e um modal; modal-em-modal e proibido) e brief em markdown lido. */

/* Anel de score com respiracao: colava no veredicto em cima e na meta ao lado. */
.qa-report-body .qa-score-row { gap: 26px; margin: 12px 2px 20px; }
.qa-report-body .qa-score-meta { gap: 8px; }
.qa-report-body .qa-cats { gap: 6px; }

/* Categoria colapsavel do report: chevron que RODA (mesmo padrao do acordeao do backlog),
   bloco ganha fundo e borda quando aberto. */
.qa-rcat { border: 1px solid transparent; transition: border-color var(--cl-t-med) var(--cl-ease), background var(--cl-t-med) var(--cl-ease); }
.qa-rcat.open { border-color: var(--line); background: var(--surface-2); }
.qa-rcat > .qa-cat { cursor: pointer; border-radius: var(--radius-sm); }
.qa-rcat > .qa-cat:hover { background: var(--accent-subtle); }
.qa-rcat > .qa-cat.static { cursor: default; }
.qa-rcat > .qa-cat.static:hover { background: none; }
.qa-rcat-chev { display: inline-flex; justify-self: center; color: var(--muted); transition: transform var(--cl-t-med) var(--cl-ease); transform: rotate(-90deg); }
.qa-rcat.open .qa-rcat-chev { transform: rotate(0deg); color: var(--accent); }
.qa-rcat-detail > * { animation: cl-rise var(--cl-t-med) var(--cl-ease) both; }

/* "Ver os N que passaram": disclosure discreto no fim dos casos a rever. */
.qa-pass-toggle { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; background: none; border: 1px dashed var(--line); border-radius: 999px; padding: 5px 12px; margin-top: 2px; font: inherit; font-size: 11.5px; color: var(--muted); cursor: pointer; transition: color var(--cl-t-fast) var(--cl-ease), border-color var(--cl-t-fast) var(--cl-ease); }
.qa-pass-toggle:hover { color: var(--text); border-color: var(--soft-line); }
.qa-pass-chev { display: inline-flex; transition: transform var(--cl-t-med) var(--cl-ease); transform: rotate(-90deg); }
.qa-pass-chev.open { transform: rotate(0deg); }
.qa-cat-cases { display: flex; flex-direction: column; gap: 8px; }

/* Detalhe inline de um item do backlog dentro do report. */
.qa-bk-itemwrap { border-radius: var(--radius-sm); }
.qa-bk-itemwrap.open { background: var(--surface-2); }
.qa-bk-itemwrap > .qa-bk-item { width: 100%; }
.qa-bk-item-chev { display: inline-flex; color: var(--faint); flex: none; transition: transform var(--cl-t-med) var(--cl-ease); transform: rotate(-90deg); }
.qa-bk-item-chev.open { transform: rotate(0deg); color: var(--accent); }
.qa-bk-inline { padding: 2px 12px 12px; display: flex; flex-direction: column; gap: 10px; }
.qa-bk-inline > * { animation: cl-rise var(--cl-t-med) var(--cl-ease) both; }
.qa-bk-chev.open { transform: rotate(0deg); color: var(--accent); }

/* Brief: header inteiro clicavel (chevron + titulo) e markdown FORMATADO em vez de <pre> cru. */
.qa-rbrief-head { display: flex; align-items: center; gap: 8px; width: 100%; background: none; border: 0; padding: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.qa-md { font-size: 13px; line-height: 1.55; color: var(--muted); display: flex; flex-direction: column; gap: 8px; max-height: 480px; overflow: auto; }
.qa-md h3, .qa-md h4, .qa-md h5 { color: var(--text); line-height: 1.3; margin: 6px 0 0; }
.qa-md h3 { font-size: 14.5px; }
.qa-md h4 { font-size: 13.5px; }
.qa-md h5 { font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--faint); }
.qa-md p { margin: 0; }
.qa-md ul, .qa-md ol { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; }
.qa-md code { font-family: var(--mono); font-size: 11.5px; background: var(--surface-3); border-radius: 4px; padding: 1px 5px; }
.qa-md strong { color: var(--text); }
.qa-md hr { border: 0; border-top: 1px solid var(--line); margin: 4px 0; }

/* O rotulo "RESPOSTA" estava hardcoded em portugues no CSS; passa a vir do i18n via data-label. */
.qa-case-r::before { content: attr(data-label); text-transform: uppercase; }

@media (prefers-reduced-motion: reduce) {
  .qa-rcat-detail > *, .qa-bk-inline > * { animation: none; }
  .qa-rcat-chev, .qa-pass-chev, .qa-bk-item-chev, .qa-rcat { transition: none; }
}

/* ============================================================================
   Camada de profundidade deleg8 — devolve elevacao e motion por cima da
   normalizacao Primer (que achatou sombras, raios e animacoes de toda a app).
   Mantem a densidade e a tipografia Primer; repoe apenas: sombra de repouso nos
   cartoes, lift no hover dos cartoes clicaveis, motion nos botoes e a regra
   obrigatoria dos icones (DESIGN.md, Principios 5-7). Tabelas densas e inputs
   ficam flat de proposito (sombra em grelha densa vira ruido visual).
   ========================================================================== */

/* Cartoes estaticos: sombra de repouso (nivel 1 da escada de elevacao). */
.ov-card,
.metric,
.ov-stat,
.side-card,
.overview-card,
.overview-hero,
.conn-card,
.conn-form,
.prompt-section,
.secret-panel,
.integration-panel,
.chunk-drawer,
.retrieval-panel {
  box-shadow: var(--shadow-sm);
}
.kn-table,
.deploy-table,
.text-input,
.text-area,
select.text-input,
.search,
.chat-input {
  box-shadow: none;
}

/* Cartoes clicaveis: lift no hover. Transform SO no hover, nunca em repouso
   (transform em repouso num ancestral parte o position:fixed dos menus). */
.agent-card,
.new-card,
.model-card {
  transition: transform var(--cl-t-med) var(--cl-ease), border-color var(--cl-t-fast) var(--cl-ease), box-shadow var(--cl-t-med) var(--cl-ease);
}
.agent-card:hover,
.model-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
  border-color: var(--soft-line);
}
.new-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

/* Botoes: micro-lift + sombra; o primario volta ao gradiente do design system.
   A curva do transform e a ease, NAO a elastica: um elastico num deslocamento de 1px treme.
   O elastico fica so no icone, mais abaixo. */
.btn {
  transition: background-color var(--cl-t-fast) var(--cl-ease),
    border-color var(--cl-t-fast) var(--cl-ease),
    color var(--cl-t-fast) var(--cl-ease),
    transform var(--cl-t-fast) var(--cl-ease),
    box-shadow var(--cl-t-fast) var(--cl-ease);
}
.btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}
.btn:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: none;
}
.btn-primary,
.btn-primary:hover {
  background: var(--grad-accent);
  color: var(--accent-ink);
  border: 1px solid transparent;
}
.btn-primary { box-shadow: var(--grad-accent-hi); }
.btn-primary:hover:not(:disabled) {
  filter: brightness(1.06);
  box-shadow: var(--grad-accent-hi), var(--shadow-sm);
}
.icon-btn {
  transition: color var(--cl-t-fast) var(--cl-ease),
    background var(--cl-t-fast) var(--cl-ease),
    transform var(--cl-t-fast) var(--cl-ease);
}
.icon-btn:hover { transform: scale(1.06); }
/* Estes tres perderam o `transition: all` de cima e nao tinham outra regra de movimento. */
.glyph-opt, .clear-source, .back-btn {
  transition: background-color var(--cl-t-fast) var(--cl-ease),
    border-color var(--cl-t-fast) var(--cl-ease),
    color var(--cl-t-fast) var(--cl-ease),
    transform var(--cl-t-fast) var(--cl-ease);
}

/* REGRA OBRIGATORIA (DESIGN.md, Principio 5): botoes com icone animam o icone.
   Direcional via data-icon (posto pelo componente Button); pop por omissao. */
.btn svg { transition: transform var(--cl-t-fast) var(--cl-spring); }
.btn:hover:not(:disabled) svg { transform: translateY(-1px) scale(1.12); }
.btn:active:not(:disabled) svg { transform: scale(.92); }
.btn[data-icon="play"]:hover:not(:disabled) svg { transform: translateX(2px) scale(1.08); }
.btn[data-icon="download"]:hover:not(:disabled) svg { transform: translateY(2px) scale(1.08); }
.btn[data-icon="refresh"]:hover:not(:disabled) svg { transform: rotate(40deg) scale(1.08); }
.btn[data-icon="spark"]:hover:not(:disabled) svg { animation: cl-icon-pop var(--cl-t-slow) var(--cl-spring) both; }
.send-btn:hover svg { transform: translateX(2px); }

/* Respiro: grelhas principais de cartoes 16 -> 20px; cartoes de conteudo +4 de padding. */
.agent-grid,
.overview-grid,
.ov-stats,
.stats-strip,
.kb-health-grid { gap: var(--cl-sp-5, 20px); }
.ov-card { padding: 20px; }
.agent-card { padding: 18px; }

@media (prefers-reduced-motion: reduce) {
  .agent-card, .new-card, .model-card, .btn, .icon-btn, .btn svg { transition: none; }
  .agent-card:hover, .model-card:hover, .new-card:hover,
  .btn:hover:not(:disabled), .icon-btn:hover { transform: none; }
  .btn:hover:not(:disabled) svg, .btn[data-icon]:hover:not(:disabled) svg,
  .send-btn:hover svg { transform: none; animation: none; }
}

/* ============================================================================
   Redesign da tab QA + Full report (2026-07): veredicto em dois eixos, tom
   "pending" (violeta) para INCONCLUSIVE/ABORTED, anel com gradiente, respiro,
   escada de elevacao (no-box-in-box) e backlog agrupado por acao.
   ========================================================================== */

/* ── Veredicto em dois eixos: qualidade (nota) + certificacao (portao) ────── */
.qa-verdict2 {
  display: flex;
  align-items: stretch;
  gap: var(--cl-sp-6, 24px);
  padding: var(--cl-sp-5, 20px);
  margin-bottom: var(--cl-sp-4, 16px);
  border-radius: var(--radius);
  border: 1px solid var(--line);
  border-left-width: 3px;
  background: var(--surface-2);
}
.qa-verdict2.good { border-left-color: var(--success); background: var(--success-subtle); }
.qa-verdict2.wait { border-left-color: var(--warning); background: var(--warning-subtle); }
.qa-verdict2.bad { border-left-color: var(--danger); background: var(--danger-subtle); }
.qa-verdict2.pending { border-left-color: var(--pending); background: var(--pending-subtle); }
.qa-vx-q {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--cl-sp-2, 8px);
  flex: none;
}
.qa-score-cap {
  font-size: 11px;
  color: var(--muted);
  text-align: center;
  max-width: 140px;
  line-height: 1.35;
}
.qa-vx-c {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 6px;
  min-width: 0;
}
.qa-verdict-story {
  margin: 2px 0 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text);
}
.qa-verdict2 .qa-gate {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.3px;
  padding: 3px 12px;
}
.qa-gate.pending, .qa-score.pending { color: var(--pending); }
.qa-gate.pending { background: var(--pending-subtle); border-color: transparent; }
.qa-verdict2 .qa-score { font-size: 40px; line-height: 1; }
.qa-meta-line { display: block; font-size: 11.5px; color: var(--faint); margin-bottom: var(--cl-sp-3, 12px); }
@media (max-width: 620px) {
  .qa-verdict2 { flex-direction: column; align-items: center; text-align: center; }
  .qa-vx-c { align-items: center; }
}

/* PORQUE do portao como disclosure dentro do eixo de certificacao (era um cartao
   cinzento solto, duplicado na tab e no report). */
.qa-why2 { width: 100%; margin-top: 4px; }
.qa-why2 summary {
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.qa-why2 summary::before { content: "▸"; font-size: 10px; transition: transform var(--cl-t-fast) var(--cl-ease); }
.qa-why2[open] summary::before { transform: rotate(90deg); }
.qa-why2 summary::-webkit-details-marker { display: none; }
.qa-why2-body { padding: var(--cl-sp-2, 8px) 0 0; animation: cl-pop var(--cl-t-med) var(--cl-ease) both; }
.qa-why2-title {
  display: block;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 4px;
}
.qa-why2 ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; }
.qa-why2 li { font-size: 12px; line-height: 1.5; color: var(--muted); }

/* ── Anel de score: maior, arco com gradiente por tom, numeros com respiro ── */
.qa-ring { width: 140px; height: 140px; }
.qa-ring-fg { stroke: url(#qa-ring-grad); animation: qa-ring-fill var(--cl-t-reveal) var(--cl-ease) both; }
.qa-ring.good { --qa-ring-a: var(--cl-accent-hover); --qa-ring-b: var(--cl-accent-press); }
.qa-ring.wait { --qa-ring-a: var(--cl-warning); --qa-ring-b: var(--cl-warning); }
.qa-ring.bad { --qa-ring-a: var(--cl-danger); --qa-ring-b: var(--cl-danger); }
.qa-ring.pending { --qa-ring-a: var(--cl-pending); --qa-ring-b: var(--cl-pending); }
.qa-ring-n {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 34px;
  font-weight: 700;
  line-height: 1;
  color: var(--text);
}
.qa-ring.good .qa-ring-n { color: var(--success); }
.qa-ring.wait .qa-ring-n { color: var(--warning); }
.qa-ring.bad .qa-ring-n { color: var(--danger); }
.qa-ring.pending .qa-ring-n { color: var(--pending); }
.qa-ring-d { font-size: 11px; color: var(--faint); margin-top: 4px; }
/* O numero do score NAO tem animacao de entrada. Tinha um pop com 450ms de atraso e, como a
   animacao segura o estado inicial durante o atraso, a nota (o dado mais importante do ecra)
   ficava invisivel quase meio segundo enquanto o anel rodava a volta de um buraco vazio. */

/* ── Respiro na tab e no modal ────────────────────────────────────────────── */
.qa-tab { gap: var(--cl-sp-6, 24px); }
.qa-grid { gap: var(--cl-sp-5, 20px); }
.qa-cats { gap: 6px; }
.qa-cat { padding: 9px 12px; }
.qa-report-body { gap: 22px; padding: 24px 28px; }
.qa-score-row { margin-bottom: 18px; }

/* ── Escada de elevacao (no-box-in-box): nivel 2 dentro do cartao, nivel 3
   dentro do nivel 2. O filho nunca repete o tratamento do pai. ────────────── */
.qa-cat-block.open,
.qa-bk-group,
.qa-case {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: none;
}
.qa-case-r { background: var(--surface-3); border: none; border-radius: 8px; }

/* ── Motion: entrada em cascata suave no modal; barras com stagger ────────── */
/* (cascata destes contentores declarada uma so vez na camada de movimento, no fim do ficheiro) */
/* transform-origin: left = a barra cresce DA ESQUERDA. Sem isto o valor por omissao e o centro
   e a barra abre do meio para os dois lados, que nao e como se le uma nota. */
.qa-cats .qa-cat-fill, .qa-cat-block .qa-cat-fill {
  transform-origin: left center;
  animation: qa-bar-grow var(--cl-t-reveal) var(--cl-ease) both;
}
.qa-cats > *:nth-child(1) .qa-cat-fill { animation-delay: 60ms; }
.qa-cats > *:nth-child(2) .qa-cat-fill { animation-delay: 120ms; }
.qa-cats > *:nth-child(3) .qa-cat-fill { animation-delay: 180ms; }
.qa-cats > *:nth-child(4) .qa-cat-fill { animation-delay: 240ms; }
.qa-cats > *:nth-child(5) .qa-cat-fill { animation-delay: 300ms; }
.qa-cats > *:nth-child(6) .qa-cat-fill { animation-delay: 360ms; }
.qa-bk-group-body { animation: cl-pop var(--cl-t-med) var(--cl-ease) both; }

/* ── Backlog agrupado por acao ────────────────────────────────────────────── */
.qa-bk-group-title {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  flex: 1;
  text-align: left;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}
.qa-bk-group-sub { font-size: 11px; font-weight: 400; color: var(--faint); line-height: 1.35; }
.qa-bk-group-head { display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px 14px; }
.qa-bk-item .qa-pri { flex: none; }
.qa-attrib2-help { display: inline-flex; color: var(--faint); cursor: help; }
.qa-attrib2-help:hover { color: var(--muted); }

@media (prefers-reduced-motion: reduce) {
  .qa-report-body > *, .qa-cat-fill, .qa-bk-group-body, .qa-why2-body, .qa-ring-c, .qa-ring-fg { animation: none; }
  .qa-why2 summary::before { transition: none; }
}

/* ============================================================================
   Polish round 2 (feedback 2026-07-21): pastilha do veredicto sem artefacto,
   cartao do veredicto com mais vida, numero do anel centrado, dock sem
   overshoot, atribuicao legivel, factos no relatorio e motion mais suave.
   ========================================================================== */

/* Pastilha do veredicto: a caixa colapsava (altura usada ~10px) e o texto
   transbordava do fundo, deixando um "fantasma" desalinhado. inline-flex com
   line-height 1 mede sempre certo, em qualquer fonte/tema. */
.qa-verdict2 .qa-gate {
  display: inline-flex;
  align-items: center;
  height: auto;
  min-height: 24px;
  line-height: 1;
  padding: 5px 14px;
}

/* Cartao do veredicto com mais vida: wash radial do tom no canto, edge subtil
   e o numero maior. O filho (pastilha) nao repete o tratamento (no-box-in-box). */
.qa-verdict2 {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.qa-verdict2::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .5;
}
.qa-verdict2.good::before { background: radial-gradient(420px 190px at 8% -10%, var(--success-subtle), transparent 62%); }
.qa-verdict2.wait::before { background: radial-gradient(420px 190px at 8% -10%, var(--warning-subtle), transparent 62%); }
.qa-verdict2.bad::before { background: radial-gradient(420px 190px at 8% -10%, var(--danger-subtle), transparent 62%); }
.qa-verdict2.pending::before { background: radial-gradient(420px 190px at 8% -10%, var(--pending-subtle), transparent 62%); }
.qa-verdict2 > * { position: relative; }
.qa-verdict2 .qa-score { font-size: 44px; }

/* Numero do anel perfeitamente centrado: o grid de duas linhas centrava cada
   linha na SUA metade (numero acima do centro). Flex column centra o conjunto. */
.qa-ring-c {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.qa-ring-n { display: block; }

/* Dock: a curva com overshoot (1.62) atirava o indicador para fora dos limites nas pontas.
   A troca para uma curva sem overshoot resolve sozinha (esta nao pode passar do destino), por
   isso NAO ha aqui clip nenhum: um overflow:hidden aqui cairia depois do media query de mobile
   e matava o scroll horizontal da navbar em ecras pequenos (itens inalcancaveis). */
.dock-pill { transition: transform var(--cl-t-slow) var(--cl-ease); }

/* Origem das falhas: dois chips com contagem + acao, sob um titulo curto
   (substitui a barra vermelha/cinzenta que lia como progresso). */
.qa-attrib3 { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.qa-attrib3-title {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--faint);
}
.qa-attrib3-chips { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.qa-attrib3-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  font-size: 11.5px;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px 10px;
  background: var(--surface-2);
  cursor: help;
}
.qa-attrib3-chip b { font-family: var(--mono); font-size: 12.5px; }
.qa-attrib3-chip.ag b { color: var(--danger); }
.qa-attrib3-chip.mo b { color: var(--muted); }
.qa-attrib3-chip.plat b { color: var(--warning); }
.qa-attrib3-chip.amb b { color: var(--muted); }
.qa-attrib3-chip em { font-style: normal; font-size: 10.5px; color: var(--faint); }
.qa-attrib3-dot { width: 7px; height: 7px; border-radius: 50%; align-self: center; }
.qa-attrib3-chip.ag .qa-attrib3-dot { background: var(--danger); }
.qa-attrib3-chip.mo .qa-attrib3-dot { background: var(--faint); }
.qa-attrib3-chip.plat .qa-attrib3-dot { background: var(--warning); }
.qa-attrib3-chip.amb .qa-attrib3-dot { background: var(--soft-line); }

/* Factos da corrida no relatorio completo: tiles pequenos, mono nos ids. */
.qa-report-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 2px 0 14px;
}
.qa-fact {
  display: flex;
  flex-direction: column;
  gap: 1px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  padding: 7px 12px;
  min-width: 76px;
}
.qa-fact-k {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--faint);
}
.qa-fact-v { font-size: 13px; font-weight: 600; color: var(--text); }
.qa-fact-v.mono { font-family: var(--mono); font-size: 11.5px; }
.qa-fact-v.good { color: var(--success); }
.qa-fact-v.bad { color: var(--danger); }

/* NOTA: aqui existia um bloco que so mexia nas DURACOES dos botoes (transition-duration
   isolado). Foi removido, e a razao interessa: mudar so a duracao NAO muda a curva, por isso
   o deslocamento do botao ficou a 240ms com a curva elastica e passou a tremer. Era esta a
   causa do "o movimento nao esta suave". A regra passou a ser: uma so declaracao completa por
   seletor (ver .btn / .icon-btn acima), nunca duracoes soltas noutro sitio do ficheiro. */
.qa-why2 summary::before { transition: transform var(--cl-t-med) var(--cl-ease); }
.qa-why2-body { animation: cl-pop var(--cl-t-med) var(--cl-ease) both; }
.qa-bk-group-body { animation: cl-pop var(--cl-t-med) var(--cl-ease) both; }
.qa-cat-detail { animation: cl-pop var(--cl-t-med) var(--cl-ease) both; }
@keyframes qa-fade { from { opacity: 0; } }
.conn-form-overlay { animation: qa-fade var(--cl-t-med) var(--cl-ease) both; }
.conn-form-overlay > * { animation: cl-rise var(--cl-t-slow) var(--cl-ease) both; }

/* PASTILHAS DESLIZANTES (navbar e tabs do agente). Duas exigencias:
   1. Curva sem overshoot. A elastica passa do destino antes de assentar e, nas pontas,
      empurrava a pastilha verde para cima da borda do contentor (era o "green thing goes
      over border"). Com esta curva isso e impossivel por construcao, e nao ha clip nenhum
      a fazer (um clip aqui ainda partia o scroll da navbar em telemovel).
   2. A pastilha e o texto por baixo dela tem de ter a MESMA duracao. Estavam a 500ms e a
      300ms: a cor do item mudava muito antes de a pastilha la chegar, e e essa desunicao
      que se le como "nao e suave como a navbar". */
.dock-pill,
.tabs .tab-pill { transition: transform var(--cl-t-med) var(--cl-ease); }
.dock-item,
.tabs .tab { transition: color var(--cl-t-med) var(--cl-ease); }

/* Em telemovel as tabs fazem scroll horizontal, e dentro de uma area com scroll a largura da
   pastilha (calculada em percentagem) resolve contra a parte VISIVEL e nao contra o conteudo,
   ficando com metade do tamanho do separador. Solucao ja usada pela navbar: esconder a
   pastilha e marcar o separador ativo pela cor. */
@media (max-width: 720px) {
  .tabs .tab-pill { display: none; }
  .tabs .tab.sel { background: var(--accent-subtle); border-radius: var(--radius-pill); color: var(--accent); }
}

@media (prefers-reduced-motion: reduce) {
  .conn-form-overlay, .conn-form-overlay > *, .qa-why2-body, .qa-bk-group-body, .qa-cat-detail { animation: none; }
  .dock-pill, .qa-why2 summary::before, .dock-item { transition: none; }
}

/* ============================================================================
   MOVIMENTO: entradas em cascata.
   O utilitario .cl-stagger vive no design system (contentlab.css) e escalona os filhos
   de um contentor. Aqui so se DECLARA quais os contentores da app que o usam, para nao
   ser preciso tocar no markup de cada um. Nao juntar aqui contentores que alojem menus
   ou dropdowns: durante a entrada ha um transform ativo, e um transform num antepassado
   desloca tudo o que e position:fixed la dentro.
   ========================================================================== */
:is(.qa-report-body, .qa-full) > * { animation: cl-rise var(--cl-t-slow) var(--cl-ease) both; }
:is(.qa-report-body, .qa-full) > *:nth-child(2) { animation-delay: calc(1 * var(--cl-stagger)); }
:is(.qa-report-body, .qa-full) > *:nth-child(3) { animation-delay: calc(2 * var(--cl-stagger)); }
:is(.qa-report-body, .qa-full) > *:nth-child(4) { animation-delay: calc(3 * var(--cl-stagger)); }
:is(.qa-report-body, .qa-full) > *:nth-child(5) { animation-delay: calc(4 * var(--cl-stagger)); }
:is(.qa-report-body, .qa-full) > *:nth-child(n+6) { animation-delay: calc(5 * var(--cl-stagger)); }

/* Impressao: o papel nunca leva animacoes. Sem isto, imprimir o relatorio antes de a cascata
   acabar deixa seccoes EM BRANCO no PDF (a animacao de entrada comeca em opacidade zero e o
   @media print nao a desliga). */
@media print {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ============================================================================
   Knowledge bases: pagina de inventario.
   Antes: um titulo mono gigante, um banner de saude sem presenca, os numeros
   escondidos dentro de uma frase, o racio de indexacao como "3/5" solto, e duas
   caixas vazias permanentes. Agora: titulo a escala normal, numeros em cima,
   banner com cor, e o racio como barra.
   ========================================================================== */

/* O titulo desta pagina nao e um hero: e um cabecalho de inventario. */
.kb-inv-head h1 {
  font-family: var(--font);
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.01em;
  background: none;
  -webkit-text-fill-color: currentColor;
  color: var(--text);
}

.kb-stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cl-sp-3, 12px);
  margin: var(--cl-sp-4, 16px) 0 var(--cl-sp-3, 12px);
}
.kb-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 116px;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.kb-stat-v {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  color: var(--text);
}
.kb-stat-v.bad { color: var(--danger); }
.kb-stat-k {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--faint);
}

/* Banner de saude com presenca: fundo tonal em vez de uma linha de texto solta. */
.kb-attention {
  padding: 11px 15px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  font-size: 13px;
  font-weight: 500;
}
.kb-attention.ok { background: var(--success-subtle); border-color: transparent; color: var(--success); }
.kb-attention.warn { background: var(--warning-subtle); border-color: transparent; color: var(--warning); }

/* Metricas da base alinhadas e legiveis, com o racio indexado como barra. */
.kb-metric { font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.kb-metric b { font-family: var(--mono); font-variant-numeric: tabular-nums; color: var(--text); }
.kb-indexed { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.kb-indexed b { font-family: var(--mono); font-variant-numeric: tabular-nums; color: var(--text); }
.kb-indexed-bar {
  width: 54px;
  height: 6px;
  border-radius: 999px;
  background: var(--surface-3);
  overflow: hidden;
  flex: none;
}
.kb-indexed-fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--warning);
  transition: width var(--cl-t-med) var(--cl-ease);
}
.kb-indexed-fill.full { background: var(--success); }

@media (max-width: 620px) {
  .kb-stat { flex: 1 1 calc(50% - 6px); min-width: 0; }
  .kb-graph { display: none; }
}

/* ============================================================================
   Login em ecra dividido: painel de marca a esquerda, formulario a direita.
   As classes .login-wrap/.login-card sao REUTILIZADAS por dois ecras pos-login
   (escolha de organizacao e onboarding), por isso o layout novo vive todo em
   .login-split e nao toca no cartao centrado que esses dois usam.
   ========================================================================== */
.login-wrap.login-split {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  align-items: stretch;
  gap: 0;
  min-height: 100vh;
  padding: 0;
  max-width: none;
}
.login-aside {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: var(--cl-sp-4, 16px);
  padding: clamp(32px, 6vw, 72px);
  background:
    radial-gradient(900px 520px at 12% -10%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 62%),
    linear-gradient(160deg, var(--surface-2), var(--bg) 70%);
  border-right: 1px solid var(--line);
}
/* Wordmark "deleg8lab" em SVG (ver brandLogo() em auth.js). Largura fixa, altura pela proporcao
   do texto. Sem filtro, sem halo, sem fundo: a tinta segue o tema, por isso nao ha pontos nem
   arestas brancas no escuro. */
.login-logo { width: 208px; height: auto; display: block; }
.login-logo-text {
  font-family: "Poppins", var(--display);
  font-weight: 600;
  font-size: 64px;
  letter-spacing: -1.5px;
}
/* Duas tintas da marca no tema claro: "deleg" petroleo, "lab" grafite. */
.d8-ink-1 { fill: #16323f; }
.d8-ink-2 { fill: #3a4046; }
/* No escuro ambas passam a cor de texto do tema (clara), para lerem sobre o painel escuro. */
[data-theme="dark"] .d8-ink { fill: var(--text); }
.login-aside-name {
  font-family: var(--mono);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text);
}
.login-aside-tag {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--muted);
  max-width: 30ch;
}
.login-split .login-card {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: none;
  max-width: 400px;
  margin: auto;
  padding: clamp(28px, 5vw, 48px);
}
/* O cartao ja nao e uma caixa; a marca repetida no topo do formulario sairia a dobrar. */
.login-split .login-brand { display: none; }
.login-split .login-title { font-size: 26px; }

.login-langs { display: flex; gap: 6px; justify-content: center; margin-top: 10px; }
.login-lang {
  border: 1px solid var(--line);
  background: none;
  color: var(--faint);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: color var(--cl-t-fast) var(--cl-ease), border-color var(--cl-t-fast) var(--cl-ease),
    background var(--cl-t-fast) var(--cl-ease);
}
.login-lang:hover { color: var(--text); border-color: var(--line-2); }
.login-lang.sel { color: var(--accent); border-color: var(--soft-line); background: var(--accent-subtle); }

/* A saida do login deixou de ser um desvanecer deste involucro: e a casca de arranque que sobe
   por cima dele e so desce quando a dashboard ja esta pintada (ver .boot mais abaixo). */

@media (max-width: 860px) {
  .login-wrap.login-split { grid-template-columns: 1fr; min-height: 100vh; }
  .login-aside {
    border-right: 0;
    border-bottom: 1px solid var(--line);
    padding: 28px clamp(20px, 6vw, 32px);
    gap: 10px;
  }
  .login-logo { width: 168px; }
  .login-aside-tag { font-size: 14px; max-width: none; }
  .login-split .login-card { margin: 0 auto; padding: 28px clamp(20px, 6vw, 32px) 40px; }
}

/* ============================================================================
   Login: grafo vivo + elementos novos do fluxo de entrada.
   O grafo (canvas) fica ATRAS do conteudo do painel de marca e nao recebe cliques.
   ========================================================================== */
.login-aside { position: relative; overflow: hidden; isolation: isolate; }
.login-graph {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  /* esbate nas margens para o grafo nao "cortar" contra a borda do painel */
  -webkit-mask-image: radial-gradient(120% 110% at 40% 45%, #000 55%, transparent 100%);
  mask-image: radial-gradient(120% 110% at 40% 45%, #000 55%, transparent 100%);
}
.login-aside > *:not(.login-graph) { position: relative; z-index: 1; }

/* Mostrar/ocultar palavra-passe, dentro do campo. */
.login-field.has-peek { position: relative; }
.login-field.has-peek .text-input { padding-right: 44px; }
.login-peek {
  position: absolute;
  right: 6px;
  bottom: 5px;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--faint);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  transition: color var(--cl-t-fast) var(--cl-ease), background var(--cl-t-fast) var(--cl-ease);
}
.login-peek::before { content: "\1F441"; }
.login-peek:hover { color: var(--text); background: var(--surface-2); }
.login-peek.on { color: var(--accent); }

/* "Esqueceste-te da palavra-passe?": discreto, alinhado a direita, mas alcancavel. */
.login-forgot {
  align-self: flex-end;
  margin-top: -6px;
  padding: 2px 0;
  border: 0;
  background: none;
  color: var(--muted);
  font-size: 12.5px;
  cursor: pointer;
  transition: color var(--cl-t-fast) var(--cl-ease);
}
.login-forgot:hover { color: var(--accent); }
.login-forgot[hidden] { display: none; }

/* Feedback com semantica de alerta (icone + cor), em vez de uma linha de texto solta. */
.login-feedback:not(:empty) { align-items: flex-start; }
.login-card.is-busy .text-input { opacity: .7; }

/* Botao de tema ao lado do idioma, no rodape do cartao. */
.login-theme { font-size: 13px; line-height: 1; padding: 4px 9px; }

/* Chip de conta lembrada: o "x" era um <span> nao alcancavel por teclado; agora e um botao
   a serio, e por isso precisa de nao herdar o aspeto de botao. */
.login-account-forget {
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  padding: 0 2px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .login-graph { opacity: .5; }
}

/* ============================================================================
   Polish (feedback 2026-07-22): back-btn, cartao de upload, olho da password,
   troca entrar/criar conta, logo na navbar, grafo visivel no tema claro.
   ========================================================================== */

/* "Voltar": era texto nu; um clique deixava-o com o retangulo de selecao de texto pintado
   (parecia um fundo mal feito). Passa a pill ghost do design system, sem selecao.
   ATENCAO A LARGURA: uma regra mais especifica (`.detail-head .back-btn { width:100% }`, mais um
   `flex-basis:100%`) fazia o botao ocupar a LINHA TODA. Enquanto era texto sem fundo ninguem
   reparava; ao ganhar fundo virou uma barra gigante de ponta a ponta. A pill tem de se medir
   pelo conteudo, por isso estas tres declaracoes tem de vencer aquelas. */
/* O cabecalho volta a ser GRELHA, como foi desenhado de origem. Estava como flex com o botao
   a ocupar a linha toda (`flex-basis:100%`): essa largura nao era decorativa, era o que empurrava
   o titulo do agente para a linha de baixo. Ao encolher o botao para o tamanho do conteudo (para
   deixar de ser uma barra gigante) tirei tambem a quebra de linha, e o "Voltar" subiu para ao pe
   do nome. Com grelha tem-se as duas coisas: o botao ocupa uma linha inteira mas so PINTA o que
   mede. */
.detail-head {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 8px 16px;
}
.detail-head .back-btn {
  grid-column: 1 / -1;
  justify-self: start;
}
.detail-head .detail-actions { justify-self: end; margin-left: 0; }
.detail-head .detail-id { min-width: 0; }
@media (max-width: 900px) {
  .detail-head { grid-template-columns: 1fr; }
  .detail-head .detail-actions { justify-self: start; }
}

.detail-head .back-btn,
.create-head .back-btn,
.back-btn {
  width: fit-content;
  max-width: 100%;
  align-self: flex-start;
}
.back-btn {
  user-select: none;
  padding: 6px 12px 6px 8px;
  border-radius: var(--radius-pill);
  transition: color var(--cl-t-fast) var(--cl-ease), background-color var(--cl-t-fast) var(--cl-ease),
    transform var(--cl-t-fast) var(--cl-ease);
}
.back-btn:hover { color: var(--text); background: var(--surface-2); }
.detail-head .back-btn:hover, .create-head .back-btn:hover { background: var(--surface-2); color: var(--text); }
.back-btn:active { transform: scale(0.97); }

/* Cartao de upload: hover suave (a borda e a sombra saltavam a seco). O "Choose files"
   e um <span> de proposito (um botao dentro de <label> roubava o clique ao input de
   ficheiro); veste-se de botao ghost do design system e anima como um. */
.knowledge-file-drop,
.file-drop {
  transition: border-color var(--cl-t-med) var(--cl-ease), background-color var(--cl-t-med) var(--cl-ease),
    box-shadow var(--cl-t-med) var(--cl-ease);
}
.dropzone-action {
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--text);
  font-weight: 600;
  padding: 0 14px;
  transition: color var(--cl-t-fast) var(--cl-ease), background-color var(--cl-t-fast) var(--cl-ease),
    border-color var(--cl-t-fast) var(--cl-ease), transform var(--cl-t-fast) var(--cl-ease),
    box-shadow var(--cl-t-fast) var(--cl-ease);
}
.file-drop:hover .dropzone-action,
.knowledge-file-drop:hover .dropzone-action {
  border-color: var(--soft-line);
  color: var(--accent);
  background: var(--surface);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

/* A marca no topo e so texto: saiu a PNG do simbolo d8 (e com ela o halo que era preciso para
   ela se ver no tema escuro). */
.dock-brand { display: flex; align-items: center; gap: 10px; }

/* Olho da password: SVG do design system (era um emoji), centrado na linha do campo. */
.login-peek::before { content: none; }
.login-peek {
  bottom: 3px;
  right: 5px;
  color: var(--muted);
  border-radius: var(--radius-pill);
}
.login-peek svg { display: block; }

/* Troca entrar <-> criar conta: o conteudo do cartao desliza e desvanece em vez de trocar a seco. */
@keyframes login-swap-in {
  from { opacity: 0.35; transform: translateY(7px); }
  to { opacity: 1; transform: none; }
}
.login-card.login-swap { animation: login-swap-in var(--cl-t-med) var(--cl-ease); }

/* Grafo no tema claro: os tracos com alfa pensada para fundo escuro quase desapareciam
   sobre branco. O canvas ganha um reforco de contraste so no claro. */


@media (prefers-reduced-motion: reduce) {
  .login-card.login-swap { animation: none; }
  .back-btn:active { transform: none; }
}

/* ============================================================================
   Login CENTRADO: marca por cima, formulario ao centro, grafo no ecra inteiro
   por tras. Substitui o ecra dividido. As classes .login-wrap/.login-card sao
   partilhadas com dois ecras pos-login (primeiro arranque e escolha de empresa),
   por isso tudo o que e novo vive debaixo de .login-centered e nao lhes toca.
   ========================================================================== */
.login-wrap.login-centered {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 100vh;
  max-width: none;
  padding: 40px 20px;
  overflow: hidden;
}

.login-stack {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 408px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--cl-sp-6, 24px);
}
.login-brandblock {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
}
.login-brandblock .login-logo { width: 190px; }
.login-brandblock .login-aside-name { font-size: 13px; letter-spacing: 0.12em; }
.login-brandblock .login-aside-tag { font-size: 13.5px; max-width: 34ch; margin: 0; }

/* O cartao flutua: sem caixa nem sombra, porque o grafo ja e afastado desta area (ver a
   zona segura no login-graph.js). E isso que da a sensacao de o formulario estar no espaco. */
.login-centered .login-card {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  gap: 13px;
}
.login-centered .login-brand { display: none; }   /* a marca vive no bloco de cima */
.login-centered .login-title { font-size: 28px; text-align: center; }
.login-centered .login-sub { text-align: center; }
.login-centered .login-langs { margin-top: 14px; }

@media (max-width: 620px) {
  .login-wrap.login-centered { padding: 28px 18px; }
  .login-brandblock .login-logo { width: 158px; }
}

/* ============================================================================
   Login "indexacao viva": as camadas de LUZ que faltavam. O fundo anterior era
   preto chapado com meia duzia de pontos: parecia vazio, nao calmo. Um fundo
   de nivel profissional compoe luz em camadas: nebulosa (no canvas), backlight
   atras do cartao, vinheta nas bordas e grain de filme por cima de tudo.
   ========================================================================== */

/* BACKLIGHT: o cartao e a consola da fabrica e tem luz propria. Resolve tambem a
   composicao: a zona segura do grafo deixou de ser um buraco escuro e passou a ser
   a FONTE de luz de onde o formulario emerge. */
.login-stack { position: relative; }
.login-stack::before {
  content: "";
  position: absolute;
  inset: -130px -150px;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(56% 44% at 50% 42%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 68%),
    radial-gradient(40% 32% at 50% 44%, color-mix(in srgb, var(--text) 3%, transparent), transparent 72%);
  filter: blur(2px);
}
[data-theme="light"] .login-stack::before {
  background:
    radial-gradient(58% 46% at 50% 42%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 70%),
    radial-gradient(46% 38% at 50% 44%, rgba(255, 255, 255, 0.85), transparent 78%);
}

/* VINHETA: escurece as bordas e foca o olho no centro. Transparente no meio, por
   isso pode viver por cima de tudo sem roubar contraste ao formulario. */
.login-wrap.login-centered::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: radial-gradient(120% 100% at 50% 46%, transparent 58%, color-mix(in srgb, var(--bg) 62%, transparent) 100%);
}

/* GRAIN: ruido finissimo estatico por cima de tudo. E o detalhe que separa "render
   digital chapado" de "fotografia". Textura fixa, custo zero por frame. */
.login-wrap.login-centered::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
}
[data-theme="light"] .login-wrap.login-centered::after { opacity: 0.035; }

/* ============================================================================
   SCROLL-TELLING da app (pedido: "como a Anthropic, mas melhor"). Tecnica
   scroll-driven do CSS moderno: zero JavaScript, e em browsers sem suporte
   simplesmente nao acontece nada (o conteudo aparece normal).
   ========================================================================== */
@supports (animation-timeline: scroll()) {
  /* A navbar condensa-se ao rolar: encolhe o respiro, ganha vidro e sombra. E o
     "estar a acompanhar-te" que se sente nos produtos de topo. Sem transform:
     um transform aqui deslocaria os menus fixos que abrem a partir da navbar. */
  @keyframes dock-condense {
    to {
      padding-top: 6px;
      padding-bottom: 6px;
      box-shadow: 0 10px 30px rgb(0 0 0 / 0.35), var(--shadow-sm);
      background: color-mix(in srgb, var(--surface) 72%, transparent);
      backdrop-filter: blur(14px) saturate(1.2);
      border-color: var(--line-2);
    }
  }
  .dock {
    animation: dock-condense linear both;
    animation-timeline: scroll();
    animation-range: 0 160px;
  }

  /* Os cartoes das paginas revelam-se ao ENTRAR no ecra, guiados pelo proprio
     scroll (nao por um temporizador): rolar para cima tambem os re-anima, como
     no site da Anthropic. :where() = especificidade zero: qualquer animacao ja
     existente num destes elementos (modais, cascatas proprias) ganha sempre. */
  @keyframes scroll-rise {
    from { opacity: 0; transform: translateY(22px) scale(0.985); }
  }
  :where(.agent-card, .ov-stat, .kb-stat, .kb-agent-group, .conn-card, .orphan-chunk-card) {
    animation: scroll-rise var(--cl-ease) both;
    animation-timeline: view();
    animation-range: entry 0% entry 42%;
  }
}
@media (prefers-reduced-motion: reduce) {
  /* o kill-switch global zera duracoes, mas timelines de scroll ignoram a duracao:
     tem de se desligar a animacao em si */
  .dock,
  .agent-card, .ov-stat, .kb-stat, .kb-agent-group, .conn-card, .orphan-chunk-card {
    animation: none !important;
  }
}

/* Correcoes do painel de critica (contraste no tema escuro):
   - textos secundarios subiam de --faint/--muted esbatido para tons legiveis;
   - os campos quase nao se separavam do fundo: superficie propria e borda mais forte;
   - os toggles PT/EN/tema estavam quase invisiveis. */
.login-centered .login-sub,
.login-centered .login-aside-tag { color: var(--muted); }
.login-centered .login-forgot,
.login-centered .login-toggle { color: var(--muted); }
.login-centered .login-forgot:hover,
.login-centered .login-toggle:hover { color: var(--accent); }
.login-centered .text-input {
  background: color-mix(in srgb, var(--surface-2) 84%, transparent);
  border-color: var(--line-2);
}
.login-centered .text-input:focus { border-color: var(--accent); }
.login-centered .login-lang { color: var(--muted); border-color: var(--line-2); }
.login-centered .login-lang.sel { color: var(--accent); }

/* ============================================================================
   AURORA: o fundo do login passa a ser um campo de cor continuo.
   Porque mudou: as constelacoes liam-se como "estrelinhas" isoladas e o conjunto
   tinha movimento a mais. Isto e a tecnica que a Stripe, a Linear e a Vercel usam:
   manchas de cor enormes, muito desfocadas, a derivar devagar e a misturarem-se.
   Nao ha pontos, nao ha linhas, nao ha aglomerados.
   Porque e SUAVE: cada mancha e a sua propria camada (o desfoque e calculado uma
   vez e guardado) e a animacao mexe SO em transform, que a placa grafica compoe.
   Nenhum pixel e redesenhado por frame, ao contrario do canvas anterior.
   ========================================================================== */
.login-aurora {
  position: absolute;
  inset: -25%;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.login-aurora span {
  position: absolute;
  display: block;
  border-radius: 50%;
  will-change: transform;
  /* duracoes primas entre si: as manchas nunca voltam a alinhar-se, e por isso o
     conjunto nunca parece repetir-se */
  animation-timing-function: cubic-bezier(.44, 0, .56, 1);
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
.login-aurora span:nth-child(1) {
  width: 62vw; height: 62vw; left: -8%; top: -6%;
  background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--accent) 62%, transparent), transparent 62%);
  filter: blur(52px);
  animation-name: aurora-a; animation-duration: 37s;
}
.login-aurora span:nth-child(2) {
  width: 54vw; height: 54vw; right: -6%; top: 2%;
  background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--pending) 56%, transparent), transparent 62%);
  filter: blur(58px);
  animation-name: aurora-b; animation-duration: 43s;
}
.login-aurora span:nth-child(3) {
  width: 58vw; height: 58vw; left: 8%; bottom: -12%;
  background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--cyan) 50%, transparent), transparent 62%);
  filter: blur(60px);
  animation-name: aurora-c; animation-duration: 53s;
}
.login-aurora span:nth-child(4) {
  width: 46vw; height: 46vw; right: 4%; bottom: -4%;
  background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--accent) 48%, transparent), transparent 62%);
  filter: blur(54px);
  animation-name: aurora-d; animation-duration: 61s;
}
.login-aurora span:nth-child(5) {
  width: 40vw; height: 40vw; left: 34%; top: 26%;
  background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--pending) 38%, transparent), transparent 64%);
  filter: blur(66px);
  animation-name: aurora-e; animation-duration: 71s;
}
/* deslocamentos curtos e lentos: o movimento nota-se se se olhar, nunca chama a atencao */
@keyframes aurora-a { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(7%, 5%, 0) scale(1.12); } }
@keyframes aurora-b { from { transform: translate3d(0,0,0) scale(1.08); } to { transform: translate3d(-6%, 7%, 0) scale(1); } }
@keyframes aurora-c { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(5%, -6%, 0) scale(1.14); } }
@keyframes aurora-d { from { transform: translate3d(0,0,0) scale(1.1); } to { transform: translate3d(-7%, -4%, 0) scale(1); } }
@keyframes aurora-e { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(4%, 6%, 0) scale(1.18); } }

/* Grao fino por cima de tudo. Um gradiente grande e liso mostra faixas (o ecra nao tem
   cores suficientes para a transicao ser continua); o ruido quebra-as e e o que separa um
   fundo que parece pintado a serio de um que parece um degrade de apresentacao. */
.login-aurora::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.16;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
}

/* No tema claro o fundo e luminoso: manchas escurecidas por opacidade ficam cinzentas e
   quase nao se veem. Em vez de as apagar, deixam-se saturadas e multiplicam-se com o fundo,
   que e a forma correta de por cor sobre branco sem sujar. */
/* a aurora cria grupo isolado (esta posicionada com z-index), por isso a multiplicacao so
   ve o que estiver DENTRO dela: pinta-se o fundo da pagina ca dentro para ela ter contra o
   que multiplicar. A cor e a mesma, portanto nada muda visualmente por causa disto. */
[data-theme="light"] .login-aurora { background: var(--bg); }
[data-theme="light"] .login-aurora span { mix-blend-mode: multiply; opacity: 0.62; }
[data-theme="light"] .login-aurora::after { opacity: 0.10; }

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

/* ============================================================================
   ESPERA: UM SO INDICADOR, DO PRIMEIRO PIXEL ATE A DASHBOARD MONTAR

   Havia tres animacoes de espera sem relacao nenhuma entre elas: nada (ecra
   branco) antes do login existir, a roda generica dentro do botao, e o corte
   para os esqueletos cinzentos da dashboard. Passam a ser a mesma coisa vista
   em dois tamanhos: uma linha fina com o gradiente da marca a atravessar, por
   baixo do wordmark no arranque e no login, e o mesmo gradiente enrolado em
   anel dentro do botao. Entre o arranque e o login o wordmark nao desaparece,
   viaja para o lugar dele (ver .vt-brand mais abaixo).
   ========================================================================== */

/* A casca (markup em index.html). Cobre tudo, inclusive a camada do tour guiado
   (z-index 1200), porque enquanto ela esta no ecra nao ha app nenhuma por baixo. */
.boot {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--bg);
  transition: opacity var(--cl-t-med) var(--cl-ease);
}
.boot[hidden] { display: none; }
.boot.is-gone { opacity: 0; pointer-events: none; }

/* As mesmas manchas do login (mesmos tamanhos, mesmas cores, mesmos keyframes), tres em
   vez de cinco: a casca aparece em maquinas frias, e cada mancha e uma camada desfocada
   a mais para compor. As duas que faltam entram com o login, por baixo da casca ja a
   desvanecer-se, e com este desfoque ninguem as ve chegar. */
.boot-aurora {
  position: absolute;
  inset: -25%;
  overflow: hidden;
  pointer-events: none;
}
.boot-aurora span {
  position: absolute;
  display: block;
  border-radius: 50%;
  will-change: transform;
  animation-timing-function: cubic-bezier(.44, 0, .56, 1);
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
.boot-aurora span:nth-child(1) {
  width: 62vw; height: 62vw; left: -8%; top: -6%;
  background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--accent) 62%, transparent), transparent 62%);
  filter: blur(52px);
  animation-name: aurora-a; animation-duration: 37s;
}
.boot-aurora span:nth-child(2) {
  width: 54vw; height: 54vw; right: -6%; top: 2%;
  background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--pending) 56%, transparent), transparent 62%);
  filter: blur(58px);
  animation-name: aurora-b; animation-duration: 43s;
}
.boot-aurora span:nth-child(3) {
  width: 58vw; height: 58vw; left: 8%; bottom: -12%;
  background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--cyan) 50%, transparent), transparent 62%);
  filter: blur(60px);
  animation-name: aurora-c; animation-duration: 53s;
}
[data-theme="light"] .boot-aurora { background: var(--bg); }
[data-theme="light"] .boot-aurora span { mix-blend-mode: multiply; opacity: 0.62; }

.boot-mark {
  position: relative;
  z-index: 1;
  opacity: 0;
}
.boot.is-ready .boot-mark { opacity: 1; transition: opacity var(--cl-t-slow) var(--cl-ease); }
/* Maior do que os 190px do login de proposito: e a diferenca de tamanho que faz o voo do
   wordmark ler-se como movimento. A 230px a escala era 1,21x e o gesto passava despercebido. */
.boot-mark .login-logo { width: min(280px, 62vw); }

/* A marca e a linha, uma por cima da outra, com a largura ditada pela marca. */
.d8-brand { display: flex; flex-direction: column; align-items: center; gap: 10px; width: fit-content; }
.d8-mark { position: relative; line-height: 0; }

/* ---------- O WORDMARK VIAJA PARA O LUGAR DELE ---------------------------------------------
   Do centro do ecra de arranque para cima do cartao de login, como uma so peca. O nome so
   existe enquanto a classe .vt-brand estiver no <html> (posta e tirada pelo showLogin no
   auth.js): permanente, este nome roubava o wordmark ao retrato da raiz e partia o circulo do
   botao de tema, e colidia consigo proprio no salto para a dashboard, onde as duas marcas
   coexistem no DOM durante uns instantes. */
:root.vt-brand .boot-mark .d8-mark,
:root.vt-brand .login-brandblock .d8-mark { view-transition-name: d8-wordmark; }

:root.vt-brand::view-transition-group(d8-wordmark) {
  animation-duration: 520ms;
  animation-timing-function: var(--cl-ease);
}
/* O crossfade da raiz esta desligado para toda a app (ver a transicao de tema, mais acima), por
   isso tem de ser reposto so para esta. O fundo assenta em 380ms e a marca pousa em 520ms: e a
   marca a chegar por ultimo que faz o olho perceber que e a mesma. */
:root.vt-brand::view-transition-old(root) { animation: d8-vt-out 380ms var(--cl-ease) both; }
:root.vt-brand::view-transition-new(root) { animation: d8-vt-in 380ms var(--cl-ease) both; }
@keyframes d8-vt-out { to { opacity: 0; } }
@keyframes d8-vt-in { from { opacity: 0; } }

/* O kill-switch de movimento reduzido do contentlab.css usa o seletor *, que NAO apanha
   pseudo-elementos: uma view transition correria a velocidade normal a quem pediu menos
   movimento. O showLogin ja nao a inicia nesse modo; isto e o cinto para qualquer outro
   caminho que venha a inicia-la. */
@media (prefers-reduced-motion: reduce) {
  :root.vt-brand::view-transition-group(*),
  :root.vt-brand::view-transition-old(*),
  :root.vt-brand::view-transition-new(*) { animation: none !important; }
}

/* ---------- A LINHA DE ESPERA -------------------------------------------------------------
   O indicador unico desta app, do primeiro pixel ate a dashboard montar. Substituiu uma banda
   de luz a atravessar as letras que ninguem via: o ciclo era de 2,1s e o ecra de arranque
   costuma estar visivel menos do que isso, portanto na maior parte das vezes nao se apanhava
   sequer uma passagem. Uma linha por baixo da marca le-se em qualquer janela de tempo. */
.d8-line {
  position: relative;
  width: 100%;
  height: 2px;
  overflow: hidden;
  border-radius: 999px;
  background: color-mix(in srgb, var(--text) 10%, transparent);
  opacity: 0;
  transition: opacity var(--cl-t-med) var(--cl-ease);
}
.is-loading .d8-line { opacity: 1; }
.d8-line > span {
  position: absolute;
  top: 0; bottom: 0; left: -42%;
  width: 42%;
  border-radius: inherit;
  background: linear-gradient(90deg, #127a68, #37a457 55%, #86c53f);
  /* pontas esbatidas: uma barra de topos direitos le-se como uma peca a deslizar, e com as
     pontas a desvanecer le-se como luz, que e a linguagem do resto deste ecra. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent);
  /* Quase linear (o travao nos extremos e minimo) pela mesma razao que ja tinha travado a
     banda de luz: com a curva da casa o segmento dispara no inicio e arrasta-se no fim, e isso
     le-se como piscar em vez de andamento. 1,2s mantem a familia das outras duas barras
     indeterminadas do repo (1,4s e 1,35s) e e um pouco mais desperto, que assenta a uma linha
     fina. Numa janela de 400ms percorre-se um terco do trajeto: movimento inequivoco e sem
     repeticao visivel. */
  animation: d8-line-run 1200ms cubic-bezier(.45, .05, .55, .95) infinite;
}
@keyframes d8-line-run { to { left: 100%; } }

/* Com movimento reduzido a linha para, mas continua a dizer alguma coisa: fica um traco
   continuo e esbatido debaixo da marca. Tem de ser desligada aqui de forma explicita porque o
   kill-switch do contentlab.css corta a DURACAO das animacoes e nao as remove, o que congelaria
   o segmento fora da vista e deixaria um sulco vazio, pior do que nada. */
@media (prefers-reduced-motion: reduce) {
  .boot-aurora span { animation: none; }
  .boot.is-ready .boot-mark { transition: none; }
  .d8-line { transition: none; }
  .d8-line > span { animation: none; left: 0; width: 100%; opacity: 0.5; }
}

/* O olho da palavra-passe estava a ganhar um circulo cinzento ao passar o rato, o que o
   fazia parecer um botao a flutuar por cima da caixa. Passa a ser so o icone, que muda de
   cor; e fica centrado na altura do campo em vez de encostado ao fundo. */
.login-inputwrap { position: relative; display: flex; }
.login-inputwrap > .text-input { flex: 1 1 auto; min-width: 0; }
.login-peek {
  top: 0;
  bottom: 0;
  margin-block: auto;          /* centra na CAIXA, seja qual for a altura dela */
  transform: none;
  width: 30px;
  height: 30px;
  right: 8px;
  border-radius: var(--radius-sm);
}
.login-peek:hover { background: none; color: var(--text); }
.login-peek:active { background: none; }
.login-peek.on { color: var(--accent); background: none; }
/* o campo da palavra-passe tem o botao la dentro: a etiqueta fica em cima, por isso o
   centro do botao e o centro do INPUT, nao o do campo inteiro */
.login-field.has-peek { position: relative; }

/* "Esquecer contas guardadas": discreto, so aparece quando ha contas. */
.login-forgetall {
  align-self: flex-end;
  margin-top: -4px;
  padding: 2px 0;
  border: 0;
  background: none;
  color: var(--faint);
  font-size: 11.5px;
  cursor: pointer;
  transition: color var(--cl-t-fast) var(--cl-ease);
}
.login-forgetall:hover { color: var(--danger); }
.login-forgetall[hidden] { display: none; }

/* ==========================================================================
   Mapa do conhecimento (separador Knowledge)
   Desenha a rede de temas que a extracao de grafo ja constroi. Posicoes fixas,
   sem simulacao fisica: a mesma base fica sempre igual, para se poder comparar.
   ========================================================================== */
/* Seccao colapsavel: cabecalho sempre visivel + corpo que abre/fecha com motion suave. */
.kmap-collapse {
  margin: 18px 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
}
.kmap-toggle {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 15px 18px; border: 0; background: none; cursor: pointer;
  text-align: left; color: var(--text);
  transition: background var(--cl-t-fast) var(--cl-ease);
}
.kmap-toggle:hover { background: var(--surface-2); }
.kmap-toggle-chevron { display: inline-flex; color: var(--muted); }
.kmap-toggle-chevron svg { transition: transform var(--cl-t-med) var(--cl-ease); }
.kmap-collapse.open .kmap-toggle-chevron svg { transform: rotate(180deg); }
.kmap-toggle-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.kmap-toggle-title { font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text); }
.kmap-toggle-hint { font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Motion do colapso: grid-template-rows 0fr -> 1fr anima uma altura desconhecida sem medir nada. */
.kmap-collapse-body {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows var(--cl-t-slow) var(--cl-ease);
}
.kmap-collapse.open .kmap-collapse-body { grid-template-rows: 1fr; }
.kmap-collapse-inner { overflow: hidden; min-height: 0; }

.kmap {
  /* Paleta CATEGORICA, nao semantica: as cores dizem "que tipo de tema", nao
     "bom/mau". Cinco familias mais outros; doze cores nao se distinguiriam. */
  --fam-concept: #3b82f6;
  --fam-person: #d97706;
  --fam-product: #8b5cf6;
  --fam-org: #0d9488;
  --fam-source: #db2777;
  --fam-other: #64748b;
  padding: 4px 18px 18px;
}
[data-theme="dark"] .kmap {
  /* sobre fundo escuro os mesmos matizes precisam de mais luz para se lerem */
  --fam-concept: #60a5fa;
  --fam-person: #fbbf24;
  --fam-product: #a78bfa;
  --fam-org: #2dd4bf;
  --fam-source: #f472b6;
  --fam-other: #94a3b8;
}
.kmap-state { display: block; }
.kmap-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.kmap-sub { margin: 4px 0 0; color: var(--muted); font-size: 13px; max-width: 62ch; }
.kmap-counts { display: flex; gap: 16px; color: var(--muted); font-size: 13px; white-space: nowrap; }
.kmap-counts b { color: var(--text); font-variant-numeric: tabular-nums; }

.kmap-signal {
  display: flex; align-items: center; gap: 8px;
  margin-top: 12px; padding: 9px 12px;
  border-radius: var(--radius-sm);
  background: var(--warning-subtle, rgba(154, 103, 0, 0.12));
  color: var(--amber); font-size: 12.5px;
  cursor: help;
}

.kmap-legend { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.kmap-chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 11px 5px 9px;
  border: 1px solid var(--border); border-radius: var(--radius-pill, 999px);
  background: var(--surface); color: var(--text);
  font-size: 12px; cursor: pointer;
  transition: background var(--cl-t-fast) var(--cl-ease), border-color var(--cl-t-fast) var(--cl-ease), opacity var(--cl-t-fast) var(--cl-ease);
}
.kmap-chip .kmap-swatch { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.kmap-chip.fam-concept .kmap-swatch { background: var(--fam-concept); }
.kmap-chip.fam-person .kmap-swatch { background: var(--fam-person); }
.kmap-chip.fam-product .kmap-swatch { background: var(--fam-product); }
.kmap-chip.fam-org .kmap-swatch { background: var(--fam-org); }
.kmap-chip.fam-source .kmap-swatch { background: var(--fam-source); }
.kmap-chip.fam-other .kmap-swatch { background: var(--fam-other); }
.kmap-chip.off { opacity: 0.4; }
.kmap-chip.on:hover { border-color: var(--faint); }

.kmap-stage { position: relative; margin-top: 12px; }
/* touch-action:none deixa o arraste do mapa funcionar no telemovel sem a pagina rolar por baixo. */
.kmap-svg { display: block; width: 100%; height: auto; max-height: 560px; overflow: hidden; cursor: grab; touch-action: none; }
.kmap-svg.panning { cursor: grabbing; }

/* Controlos de zoom, sobrepostos no canto do palco. */
.kmap-zoom { position: absolute; right: 10px; bottom: 10px; display: flex; flex-direction: column; gap: 4px; }
.kmap-zoom-btn {
  display: grid; place-items: center; width: 30px; height: 30px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--muted); cursor: pointer;
  transition: background var(--cl-t-fast) var(--cl-ease), color var(--cl-t-fast) var(--cl-ease), border-color var(--cl-t-fast) var(--cl-ease);
}
.kmap-zoom-btn:hover { color: var(--text); border-color: var(--faint); background: var(--surface-2); }

.kmap-edge { stroke: var(--faint); stroke-opacity: 0.28; transition: stroke-opacity var(--cl-t-fast) var(--cl-ease); }
.kmap-edge.dim { stroke-opacity: 0.06; }
.kmap-edge.lit { stroke: var(--accent); stroke-opacity: 0.65; }

.kmap-node { cursor: grab; }
.kmap-node:active { cursor: grabbing; }
.kmap-node .kmap-dot {
  stroke: var(--surface); stroke-width: 1.5;
  transition: opacity var(--cl-t-fast) var(--cl-ease);
}
.kmap-node.fam-concept .kmap-dot { fill: var(--fam-concept); }
.kmap-node.fam-person .kmap-dot { fill: var(--fam-person); }
.kmap-node.fam-product .kmap-dot { fill: var(--fam-product); }
.kmap-node.fam-org .kmap-dot { fill: var(--fam-org); }
.kmap-node.fam-source .kmap-dot { fill: var(--fam-source); }
.kmap-node.fam-other .kmap-dot { fill: var(--fam-other); }
.kmap-node.dim { opacity: 0.22; }
.kmap-node.picked .kmap-dot { stroke: var(--text); stroke-width: 2.5; }
/* Ilha: grupo de temas sem ligação ao bloco principal. Anel âmbar tracejado para se distinguir
   como satélite à parte, sem perder a cor de família do próprio tema. */
.kmap-node.island .kmap-dot { stroke: var(--amber); stroke-width: 2; stroke-dasharray: 3 2.5; }
.kmap-node.island.picked .kmap-dot { stroke: var(--text); stroke-dasharray: none; }
.kmap-label {
  fill: var(--text); font-size: 12px; text-anchor: middle;
  paint-order: stroke; stroke: var(--surface); stroke-width: 3px;
  pointer-events: none;
}

/* A nota aparece ao LADO do no (posicao vinda do JS em left/top). Centra-se na vertical do no e,
   quando o no esta encostado a direita, abre para a esquerda (flip). */
.kmap-hovercard {
  position: absolute;
  transform: translateY(-50%);
  max-width: 240px; padding: 10px 12px;
  border: 1px solid var(--border); border-left-width: 3px;
  border-radius: var(--radius-sm);
  background: var(--surface); box-shadow: var(--cl-elev-2, 0 6px 20px rgba(0,0,0,0.14));
  pointer-events: none; z-index: 3;
}
.kmap-hovercard.flip { transform: translate(-100%, -50%); }
.kmap-hovercard.fam-concept { border-left-color: var(--fam-concept); }
.kmap-hovercard.fam-person { border-left-color: var(--fam-person); }
.kmap-hovercard.fam-product { border-left-color: var(--fam-product); }
.kmap-hovercard.fam-org { border-left-color: var(--fam-org); }
.kmap-hovercard.fam-source { border-left-color: var(--fam-source); }
.kmap-hovercard.fam-other { border-left-color: var(--fam-other); }
.kmap-hc-type { display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
.kmap-hovercard b { display: block; margin: 2px 0 6px; color: var(--text); font-size: 14px; }
.kmap-hc-meta { display: flex; gap: 12px; color: var(--muted); font-size: 12px; }

.kmap-hint { margin: 10px 0 0; color: var(--faint); font-size: 12px; text-align: center; }

/* Painel de detalhe: aparece por baixo do mapa quando se clica num tema. */
.kmap-detail {
  margin-top: 14px; padding: 14px 16px;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface-2);
}
.kmap-detail-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.kmap-detail-type {
  display: inline-block; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.05em;
  padding: 1px 7px; border-radius: var(--radius-pill, 999px); color: var(--accent-ink);
}
.kmap-detail-type.fam-concept { background: var(--fam-concept); }
.kmap-detail-type.fam-person { background: var(--fam-person); }
.kmap-detail-type.fam-product { background: var(--fam-product); }
.kmap-detail-type.fam-org { background: var(--fam-org); }
.kmap-detail-type.fam-source { background: var(--fam-source); }
.kmap-detail-type.fam-other { background: var(--fam-other); }
.kmap-detail-head b { display: block; margin-top: 5px; color: var(--text); font-size: 16px; }
.kmap-detail-empty { padding: 10px 0; color: var(--muted); font-size: 13px; }
.kmap-detail-body { display: flex; flex-direction: column; gap: 14px; margin-top: 12px; }
.kmap-detail-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); margin-bottom: 6px; }
.kmap-doc-row {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 7px 9px; margin-bottom: 4px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text);
  font-size: 13px; text-align: left; cursor: pointer;
  transition: border-color var(--cl-t-fast) var(--cl-ease), background var(--cl-t-fast) var(--cl-ease);
}
.kmap-doc-row:hover { border-color: var(--accent); background: var(--surface-2); }
.kmap-doc-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kmap-doc-count { color: var(--muted); font-size: 11.5px; white-space: nowrap; }
.kmap-neighbors { display: flex; flex-wrap: wrap; gap: 6px; }
.kmap-neighbor {
  padding: 3px 9px; border-radius: var(--radius-pill, 999px);
  border: 1px solid var(--border); background: var(--surface);
  font-size: 12px; color: var(--text);
  border-left: 3px solid var(--fam-other);
}
.kmap-neighbor.fam-concept { border-left-color: var(--fam-concept); }
.kmap-neighbor.fam-person { border-left-color: var(--fam-person); }
.kmap-neighbor.fam-product { border-left-color: var(--fam-product); }
.kmap-neighbor.fam-org { border-left-color: var(--fam-org); }
.kmap-neighbor.fam-source { border-left-color: var(--fam-source); }

.kmap-loading { display: flex; align-items: center; gap: 10px; justify-content: center; padding: 40px 0; color: var(--muted); }
.kmap-empty { text-align: center; padding: 34px 20px; }
.kmap-empty-ico { display: inline-flex; color: var(--faint); margin-bottom: 8px; }
.kmap-empty b { display: block; color: var(--text); font-size: 15px; margin-bottom: 4px; }
.kmap-empty p { margin: 0 auto; color: var(--muted); font-size: 13px; max-width: 46ch; }

@media (max-width: 620px) {
  .kmap { padding: 14px; }
  .kmap-svg { max-height: 420px; }
  .kmap-counts { gap: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .kmap-edge, .kmap-node .kmap-dot, .kmap-chip, .kmap-doc-row,
  .kmap-toggle-chevron svg, .kmap-collapse-body, .kmap-zoom-btn { transition: none; }
}


/* ---- Custo por agente (tab "cost") ------------------------------------------------------------
   Mobile-first: os KPIs empilham num telemovel e passam a tres colunas a partir de 620px. As barras
   de repartição são a leitura rápida ("qual destes modelos leva o dinheiro"); os números exatos
   ficam na linha de meta por baixo. */
.cost-kpis { display: grid; grid-template-columns: 1fr; gap: 10px; margin-bottom: 18px; }
.cost-kpi { text-align: left; }
.cost-kpi-v {
  font-size: 22px; font-weight: 650; color: var(--text);
  font-variant-numeric: tabular-nums; letter-spacing: -0.01em;
}
.cost-kpi-k { color: var(--muted); font-size: 12px; margin-top: 2px; }
.cost-warn { color: var(--warning); margin: 0 0 16px; }
.cost-section { margin-top: 22px; }
.cost-section h3 { margin: 0 0 10px; font-size: 14px; font-weight: 600; color: var(--text); }
.cost-rows { display: flex; flex-direction: column; gap: 10px; }
.cost-row-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cost-row-name {
  color: var(--text); font-weight: 550; font-size: 13.5px;
  overflow-wrap: anywhere;
}
.cost-row-cost {
  margin-left: auto; color: var(--text); font-weight: 600;
  font-variant-numeric: tabular-nums; font-size: 13.5px;
}
.cost-bar {
  margin: 9px 0 7px; height: 6px; border-radius: 999px;
  background: var(--inset); overflow: hidden;
}
.cost-bar-fill {
  display: block; height: 100%; min-width: 2px; border-radius: 999px;
  background: var(--accent);
}
.cost-row-meta { margin: 0; font-size: 12px; }

/* Painel do teste de carga (dentro de .cost-section).
   A assinatura e a "rampa" de concorrencia: cada patamar 5/10/15... e um checkpoint real,
   com o lote ativo a preencher e os anteriores a conservar o veredicto. */
.loadtest-panel { --loadtest-tone: var(--accent); }
.loadtest-empty {
  display: flex; align-items: center; gap: 11px;
  margin: 14px 0; padding: 13px 15px;
  border: 1px dashed var(--line-2); border-radius: var(--radius);
  background: color-mix(in srgb, var(--surface-2) 72%, transparent);
  color: var(--muted);
}
.loadtest-empty > svg, .loadtest-empty > .spinner { flex: none; }
.loadtest-empty strong { display: block; color: var(--text); font-size: 13.5px; }
.loadtest-empty p { margin: 2px 0 0; font-size: 12.5px; }
.loadtest-empty.is-loading { border-style: solid; }

.loadtest-form { display: flex; flex-direction: column; gap: 6px; margin: 15px 0 10px; }
.loadtest-form-again { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.loadtest-form h4 { margin: 0 0 5px; color: var(--text); font-size: 13.5px; font-weight: 650; }
.loadtest-form label { margin: 5px 0 0; }
.loadtest-actions { display: flex; align-items: center; gap: 10px; margin-top: 9px; }

.loadtest-run-card,
.loadtest-phase { --loadtest-tone: var(--muted); }
.loadtest-run-card.tone-running,
.loadtest-phase.tone-running { --loadtest-tone: var(--accent); }
.loadtest-run-card.tone-ok,
.loadtest-phase.tone-ok { --loadtest-tone: var(--success); }
.loadtest-run-card.tone-partial,
.loadtest-phase.tone-partial { --loadtest-tone: var(--warning); }
.loadtest-run-card.tone-clear,
.loadtest-run-card.tone-failed,
.loadtest-phase.tone-clear { --loadtest-tone: var(--danger); }
.loadtest-run-card.tone-cancelled,
.loadtest-phase.tone-cancelled { --loadtest-tone: var(--faint); }

.loadtest-run-card {
  position: relative; overflow: hidden;
  margin: 16px 0 12px; padding: 16px 17px;
  border-color: color-mix(in srgb, var(--loadtest-tone) 38%, var(--line));
}
.loadtest-run-card::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 3px;
  background: var(--loadtest-tone);
}
.loadtest-run-head {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center; gap: 10px;
}
.loadtest-run-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%;
  background: color-mix(in srgb, var(--loadtest-tone) 13%, transparent);
  color: var(--loadtest-tone);
}
.loadtest-run-title { min-width: 0; }
.loadtest-run-title strong { display: block; color: var(--text); font-size: 14.5px; font-weight: 650; }
.loadtest-run-title span { display: block; margin-top: 2px; color: var(--muted); font-size: 11.5px; }
.loadtest-state-badge,
.loadtest-stage-verdict {
  display: inline-flex; align-items: center; justify-content: center;
  width: max-content; padding: 3px 8px; border-radius: var(--radius-pill, 999px);
  border: 1px solid var(--line); background: var(--surface-2);
  color: var(--muted); font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.025em; text-transform: uppercase; white-space: nowrap;
}
.loadtest-state-badge.tone-running,
.loadtest-stage-verdict.tone-running { border-color: var(--accent); color: var(--accent); background: var(--accent-subtle); }
.loadtest-state-badge.tone-ok,
.loadtest-stage-verdict.tone-ok { border-color: var(--success); color: var(--success); background: var(--success-subtle); }
.loadtest-state-badge.tone-partial,
.loadtest-stage-verdict.tone-partial { border-color: var(--warning); color: var(--warning); background: var(--warning-subtle); }
.loadtest-state-badge.tone-clear,
.loadtest-state-badge.tone-failed,
.loadtest-stage-verdict.tone-clear { border-color: var(--danger); color: var(--danger); background: var(--danger-subtle); }
.loadtest-state-badge.tone-cancelled,
.loadtest-stage-verdict.tone-notRun { color: var(--faint); background: transparent; }

.loadtest-run-facts { display: flex; flex-wrap: wrap; gap: 8px; margin: 13px 0 0 44px; }
.loadtest-run-facts > span {
  display: inline-flex; align-items: baseline; gap: 5px;
  padding: 5px 9px; border-radius: var(--radius-sm);
  background: var(--surface-2); color: var(--muted); font-size: 11.5px;
}
.loadtest-run-facts b { color: var(--text); font-family: var(--mono); font-size: 11.5px; }
.loadtest-current { margin: 13px 0 0 44px; }
.loadtest-current-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; color: var(--muted); font-size: 11.5px; }
.loadtest-current-meta strong { color: var(--text); font-family: var(--mono); font-size: 11px; font-weight: 600; }
.loadtest-current-meta svg { color: var(--loadtest-tone); }
.loadtest-meter {
  position: relative; height: 7px; overflow: hidden;
  border: 1px solid var(--line); border-radius: var(--radius-pill, 999px);
  background: var(--surface-2);
}
.loadtest-meter > span {
  display: block; height: 100%; min-width: 0;
  border-radius: inherit; background: var(--loadtest-tone);
  transition: width var(--cl-t-med) var(--cl-ease);
}
.loadtest-meter.is-complete > span { background: var(--loadtest-tone); }
.loadtest-meter.is-indeterminate > span {
  position: absolute; inset: 0 auto 0 -32%; width: 32%;
  min-width: 32%; animation: loadtest-sweep 1.35s ease-in-out infinite;
}
@keyframes loadtest-sweep { to { left: 100%; } }
.loadtest-run-error { margin: 12px 0 0 44px; color: var(--danger); font-size: 12px; }

.loadtest-phase {
  margin: 12px 0; padding: 0; overflow: hidden;
  border-color: color-mix(in srgb, var(--loadtest-tone) 28%, var(--line));
}
.loadtest-phase-head {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center; gap: 11px; padding: 14px 16px;
  border-bottom: 1px solid var(--line);
}
.loadtest-phase-sequence {
  display: inline-flex; align-items: center; justify-content: center;
  width: 31px; height: 31px; border: 1px solid var(--loadtest-tone);
  border-radius: 50%; color: var(--loadtest-tone);
  font-family: var(--mono); font-size: 10.5px; font-weight: 700;
}
.loadtest-phase-title { min-width: 0; }
.loadtest-phase-title strong { display: block; color: var(--text); font-size: 14px; }
.loadtest-phase-title p {
  display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  margin: 3px 0 0; color: var(--muted); font-size: 11.5px; line-height: 1.35;
}
.loadtest-route {
  margin: 0; padding: 9px 16px;
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  border-bottom: 1px solid var(--line); background: var(--surface-2); font-size: 11.5px;
}
.loadtest-phase > .cost-warn { margin: 0; padding: 10px 16px; border-bottom: 1px solid var(--line); font-size: 12px; }

.loadtest-ramp {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 8px; margin: 0; padding: 14px 16px; list-style: none;
}
.loadtest-checkpoint {
  position: relative;
  display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto;
  align-content: start; gap: 8px 9px; min-width: 0; padding: 11px;
  border: 1px solid var(--line); border-top: 2px solid var(--faint);
  border-radius: var(--radius-sm); background: var(--surface-2);
}
.loadtest-checkpoint.state-running {
  border-color: color-mix(in srgb, var(--accent) 52%, var(--line));
  border-top-color: var(--accent); background: var(--accent-subtle);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 9%, transparent);
}
.loadtest-checkpoint.state-ok { border-top-color: var(--success); }
.loadtest-checkpoint.state-partial { border-top-color: var(--warning); }
.loadtest-checkpoint.state-clear { border-top-color: var(--danger); }
.loadtest-checkpoint.state-waiting,
.loadtest-checkpoint.state-notRun { opacity: 0.57; }
.loadtest-checkpoint-marker {
  display: inline-flex; align-items: center; justify-content: center;
  width: 25px; height: 25px; border-radius: 50%;
  background: var(--surface); color: var(--muted);
}
.state-running .loadtest-checkpoint-marker { color: var(--accent); }
.state-ok .loadtest-checkpoint-marker { color: var(--success); }
.state-partial .loadtest-checkpoint-marker { color: var(--warning); }
.state-clear .loadtest-checkpoint-marker { color: var(--danger); }
.loadtest-checkpoint-main { min-width: 0; }
.loadtest-checkpoint-title { display: flex; align-items: baseline; gap: 5px; }
.loadtest-checkpoint-title strong { color: var(--text); font-family: var(--mono); font-size: 17px; line-height: 1; }
.loadtest-checkpoint-title span { color: var(--muted); font-size: 11px; }
.loadtest-stage-verdict { grid-column: 2; justify-self: start; }
.loadtest-checkpoint-progress { margin-top: 8px; }
.loadtest-checkpoint-progress > span { display: block; margin-bottom: 5px; color: var(--muted); font-family: var(--mono); font-size: 10.5px; }
.loadtest-checkpoint-progress .loadtest-meter { height: 6px; }
.loadtest-checkpoint-metrics { display: flex; flex-wrap: wrap; gap: 4px 9px; margin-top: 7px; color: var(--muted); font-size: 10.5px; line-height: 1.35; }
.loadtest-checkpoint-errors { color: var(--danger); overflow-wrap: anywhere; }
.loadtest-checkpoint-errors.tone-partial { color: var(--warning); }

.loadtest-diagnostics {
  --diagnostic-tone: var(--warning);
  margin: 0 16px 14px; overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--diagnostic-tone) 38%, var(--line));
  border-radius: var(--radius-sm); background: var(--surface-2);
}
.loadtest-diagnostics.tone-clear { --diagnostic-tone: var(--danger); }
.loadtest-diagnostics > summary {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center; gap: 10px; min-height: 44px; padding: 10px 12px;
  list-style: none; cursor: pointer; color: var(--text);
  background: color-mix(in srgb, var(--diagnostic-tone) 7%, var(--surface-2));
}
.loadtest-diagnostics > summary::-webkit-details-marker { display: none; }
.loadtest-diagnostics > summary::after {
  content: "›"; color: var(--muted); font-size: 18px; line-height: 1;
  transform: rotate(90deg); transition: transform var(--cl-t-fast) var(--cl-ease);
}
.loadtest-diagnostics:not([open]) > summary::after { transform: rotate(0); }
.loadtest-diagnostics > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.loadtest-diagnostics-summary-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%;
  background: color-mix(in srgb, var(--diagnostic-tone) 12%, transparent);
  color: var(--diagnostic-tone);
}
.loadtest-diagnostics-summary-copy { min-width: 0; }
.loadtest-diagnostics-summary-copy strong { display: block; font-size: 12.5px; font-weight: 700; }
.loadtest-diagnostics-summary-copy small { display: block; margin-top: 1px; color: var(--muted); font-size: 10.5px; }
.loadtest-diagnostics-count {
  color: var(--diagnostic-tone); font-family: var(--mono); font-size: 10.5px; font-weight: 700;
  white-space: nowrap;
}
.loadtest-diagnostics-list { border-top: 1px solid var(--line); }
.loadtest-diagnostic {
  --diagnostic-row-tone: var(--warning);
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px;
  padding: 13px 12px; border-left: 2px solid var(--diagnostic-row-tone);
}
.loadtest-diagnostic + .loadtest-diagnostic { border-top: 1px solid var(--line); }
.loadtest-diagnostic.tone-clear { --diagnostic-row-tone: var(--danger); }
.loadtest-diagnostic-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--diagnostic-row-tone) 10%, var(--surface));
  color: var(--diagnostic-row-tone);
}
.loadtest-diagnostic-main { min-width: 0; }
.loadtest-diagnostic-title { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; }
.loadtest-diagnostic-title strong { color: var(--text); font-size: 12.5px; }
.loadtest-diagnostic-title code {
  padding: 2px 5px; border: 1px solid var(--line); border-radius: 4px;
  background: var(--surface); color: var(--diagnostic-row-tone);
  font-family: var(--mono); font-size: 9.5px; font-weight: 700; overflow-wrap: anywhere;
}
.loadtest-diagnostic-main > p { margin: 4px 0 0; color: var(--muted); font-size: 11.5px; line-height: 1.4; }
.loadtest-diagnostic-evidence { display: flex; flex-wrap: wrap; gap: 5px 12px; margin-top: 7px; }
.loadtest-diagnostic-evidence span {
  color: var(--text-2, var(--muted)); font-family: var(--mono); font-size: 10px; font-weight: 600;
}
.loadtest-diagnostic-action {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 5px 9px;
  margin-top: 9px; padding-top: 8px; border-top: 1px dashed var(--line);
  color: var(--muted); font-size: 10.75px; line-height: 1.4;
}
.loadtest-diagnostic-action b { color: var(--diagnostic-row-tone); font-size: 10px; text-transform: uppercase; letter-spacing: 0.035em; }

.loadtest-summary {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px;
  margin: 0; padding: 11px 16px; border-top: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface-2) 70%, transparent);
}
.loadtest-summary > span { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; }
.loadtest-summary .tone-ok { color: var(--success); }
.loadtest-summary .tone-partial { color: var(--warning); }
.loadtest-summary .tone-clear { color: var(--danger); }

@media (max-width: 700px) {
  .loadtest-run-head { grid-template-columns: auto minmax(0, 1fr); }
  .loadtest-run-head > .loadtest-state-badge { margin-left: 44px; }
  .loadtest-run-head > .btn { justify-self: end; }
  .loadtest-ramp { grid-template-columns: repeat(auto-fit, minmax(175px, 1fr)); }
}
@media (max-width: 480px) {
  .loadtest-run-head > .loadtest-state-badge { margin-left: 0; }
  .loadtest-run-head > .btn { width: 100%; justify-content: center; }
  .loadtest-run-facts, .loadtest-current, .loadtest-run-error { margin-left: 0; }
  .loadtest-phase-head { grid-template-columns: auto minmax(0, 1fr); }
  .loadtest-phase-head > .loadtest-state-badge { grid-column: 2; }
  .loadtest-ramp { grid-template-columns: 1fr; }
  .loadtest-current-meta { align-items: flex-start; flex-direction: column; gap: 3px; }
  .loadtest-diagnostics { margin-inline: 12px; }
  .loadtest-diagnostics > summary { grid-template-columns: auto minmax(0, 1fr) auto; }
  .loadtest-diagnostics-count { grid-column: 2; }
  .loadtest-diagnostics > summary::after { grid-column: 3; grid-row: 1 / span 2; }
  .loadtest-diagnostic-action { grid-template-columns: 1fr; gap: 3px; }
}
@media (prefers-reduced-motion: reduce) {
  .loadtest-meter > span { transition: none; }
  .loadtest-meter.is-indeterminate > span { animation: none; left: 34%; }
}

@media (min-width: 620px) {
  .cost-kpis { grid-template-columns: repeat(3, 1fr); }
}