:root {
  color-scheme: dark;
  --bg: #090a0d;
  --sidebar: #0c0d11;
  --surface: #101217;
  --surface-2: #14171d;
  --surface-3: #191c24;
  --line: #23262f;
  --line-strong: #30343f;
  --text: #f2f2f5;
  --text-soft: #c1c3cb;
  --muted: #81848f;
  --faint: #5f626c;
  --accent: #8b7cff;
  --accent-soft: rgba(139, 124, 255, .13);
  --accent-line: rgba(139, 124, 255, .34);
  --green: #54d89b;
  --green-soft: rgba(84, 216, 155, .11);
  --amber: #f1b85b;
  --amber-soft: rgba(241, 184, 91, .12);
  --red: #ff707d;
  --red-soft: rgba(255, 112, 125, .11);
  --blue: #69b7ff;
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 16px;
  --shadow: 0 18px 50px rgba(0, 0, 0, .32);
  --sidebar-width: 216px;
}

* { box-sizing: border-box; }

html {
  overflow-x: hidden;
  background: var(--bg);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 14px;
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}

body {
  overflow-x: hidden;
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  background:
    radial-gradient(circle at 70% -20%, rgba(139, 124, 255, .055), transparent 32rem),
    var(--bg);
}

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

button,
a,
summary,
select { -webkit-tap-highlight-color: transparent; }

button,
summary,
select { cursor: pointer; }

a {
  color: inherit;
  text-decoration: none;
}

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

h1 {
  font-size: clamp(25px, 2.25vw, 32px);
  line-height: 1.14;
  letter-spacing: -.035em;
  font-weight: 650;
}

h2 {
  font-size: 16px;
  line-height: 1.3;
  letter-spacing: -.015em;
  font-weight: 620;
}

small { font-size: 12px; }

::selection {
  background: rgba(139, 124, 255, .3);
  color: #fff;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.shell {
  min-height: 100vh;
}

.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 30;
  width: var(--sidebar-width);
  padding: 20px 14px 16px;
  display: flex;
  flex-direction: column;
  background: rgba(12, 13, 17, .96);
  border-right: 1px solid var(--line);
  backdrop-filter: blur(18px);
}

.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 40px;
  padding: 0 8px;
}

.brand-mark {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  color: #f5f2ff;
  border: 1px solid var(--accent-line);
  border-radius: 10px;
  background: linear-gradient(145deg, #7765ed, #5949c7);
  box-shadow: 0 7px 20px rgba(108, 89, 229, .24);
}

.brand-copy {
  min-width: 0;
  display: grid;
  gap: 1px;
}

.brand-copy strong {
  font-size: 14px;
  letter-spacing: -.01em;
}

.brand-copy small {
  color: var(--muted);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .1em;
}

.side-nav {
  margin-top: 38px;
  display: grid;
  gap: 4px;
}

.side-nav a {
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  height: 40px;
  padding: 0 11px;
  color: #92959f;
  border: 1px solid transparent;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 520;
  transition: color .15s, background .15s, border-color .15s;
}

.side-nav a:hover {
  color: var(--text-soft);
  background: rgba(255, 255, 255, .025);
}

.side-nav a.active {
  color: #f1efff;
  background: var(--accent-soft);
  border-color: rgba(139, 124, 255, .12);
}

.side-nav a.active::before {
  content: "";
  position: absolute;
  left: -15px;
  width: 2px;
  height: 20px;
  border-radius: 0 2px 2px 0;
  background: var(--accent);
}

.nav-icon {
  display: grid;
  place-items: center;
  width: 19px;
  color: inherit;
}

.side-foot {
  margin-top: auto;
}

.runtime-card {
  padding: 11px;
  display: flex;
  align-items: flex-start;
  gap: 9px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255, 255, 255, .017);
}

.runtime-dot {
  width: 7px;
  height: 7px;
  margin-top: 5px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--faint);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .025);
}

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

.runtime-dot.offline {
  background: var(--red);
  box-shadow: 0 0 0 3px var(--red-soft);
}

.runtime-copy {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.runtime-copy strong {
  color: var(--text-soft);
  font-size: 11px;
  font-weight: 570;
}

.runtime-copy small {
  overflow: hidden;
  color: var(--faint);
  font-size: 9px;
  line-height: 1.35;
  white-space: nowrap;
  text-overflow: ellipsis;
}

#app {
  min-width: 0;
  min-height: 100vh;
  margin-left: var(--sidebar-width);
}

#app:focus { outline: 0; }

.page {
  width: 100%;
  max-width: 1540px;
  min-height: 100vh;
  margin: 0 auto;
  padding: 34px 36px 60px;
}

.page-header,
.editor-header,
.call-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 26px;
}

.page-header p {
  max-width: 620px;
  margin-top: 7px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

.eyebrow,
.section-kicker {
  color: var(--faint);
  font-size: 10px;
  line-height: 1.4;
  font-weight: 650;
  letter-spacing: .105em;
  text-transform: uppercase;
}

.eyebrow { margin-bottom: 7px; }

.header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.icon {
  display: block;
  flex: 0 0 auto;
}

.button,
.icon-button,
.call-button {
  border: 0;
  color: var(--text);
  transition: background .15s, border-color .15s, color .15s, transform .15s, opacity .15s;
}

.button {
  min-height: 36px;
  padding: 0 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--surface-2);
  font-size: 12px;
  font-weight: 590;
  white-space: nowrap;
}

.button:hover:not(:disabled) {
  background: var(--surface-3);
  border-color: #3a3e4b;
}

.button:active:not(:disabled) { transform: translateY(1px); }

.button.primary {
  color: #fff;
  border-color: #7867ef;
  background: #7564e9;
}

.button.primary:hover:not(:disabled) {
  border-color: #8d7dff;
  background: #8170f3;
}

.button.primary.saved:not(.dirty) {
  color: #aaa4cf;
  border-color: var(--accent-line);
  background: var(--accent-soft);
}

.button.ghost {
  color: var(--text-soft);
  background: transparent;
  border-color: var(--line);
}

.button.secondary { background: var(--surface-2); }

.button.danger {
  color: #fff;
  border-color: #dc5967;
  background: #c94d5b;
}

.button.small {
  min-height: 30px;
  padding: 0 9px;
  font-size: 11px;
}

.button:disabled {
  cursor: default;
  opacity: .65;
}

.icon-button {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: transparent;
}

.icon-button:hover { background: var(--surface-3); }

.panel {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(16, 18, 23, .86);
}

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

.panel-heading h2 { color: var(--text); }

.panel-heading-actions { display: flex; flex-direction: column; gap: 8px; align-items: flex-end; }

.panel-heading p {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #aaa0ff;
  font-size: 12px;
  white-space: nowrap;
}

.text-link:hover { color: #c3bbff; }

.badge,
.kind,
.qa-badge {
  width: fit-content;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  white-space: nowrap;
  font-size: 10px;
  line-height: 1;
  font-weight: 600;
}

.badge {
  min-height: 23px;
  padding: 0 8px;
  color: var(--text-soft);
  background: rgba(255, 255, 255, .025);
}

.badge.success {
  color: #7fe3b4;
  border-color: rgba(84, 216, 155, .2);
  background: var(--green-soft);
}

.badge.accent {
  color: #b4aaff;
  border-color: var(--accent-line);
  background: var(--accent-soft);
}

.badge.danger {
  color: #ff969f;
  border-color: rgba(255, 112, 125, .24);
  background: var(--red-soft);
}

.badge.live {
  color: #7fe3b4;
  border-color: rgba(84, 216, 155, .2);
  background: var(--green-soft);
}

.badge.unavailable {
  color: #999ba4;
  border-color: var(--line);
  background: transparent;
}

.pulse {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  animation: pulse 1.7s ease-in-out infinite;
}

.kind {
  min-height: 21px;
  padding: 0 7px;
  color: var(--muted);
  background: transparent;
}

.kind.prod {
  color: #73c4ff;
  border-color: rgba(105, 183, 255, .22);
  background: rgba(105, 183, 255, .08);
}

.kind.test {
  color: #aaa0ff;
  border-color: rgba(139, 124, 255, .19);
  background: rgba(139, 124, 255, .07);
}
.kind.web {
  color: #7fe3b4;
  border-color: rgba(84, 216, 155, .22);
  background: var(--green-soft);
}
.kind.unknown { color: var(--faint); border-color: var(--line); background: transparent; }

.qa-badge {
  min-height: 22px;
  padding: 0 7px;
  color: var(--muted);
  background: transparent;
}
.qa-badge.green { color: #7fe3b4; border-color: rgba(84, 216, 155, .24); background: var(--green-soft); }
.qa-badge.yellow { color: #f4c875; border-color: rgba(241, 184, 91, .25); background: var(--amber-soft); }
.qa-badge.red { color: #ff969f; border-color: rgba(255, 112, 125, .25); background: var(--red-soft); }
.qa-badge.pending { color: #b4aaff; border-color: var(--accent-line); background: var(--accent-soft); }
.qa-badge.unavailable,
.qa-badge.none { color: var(--faint); border-color: var(--line); }

.tone-good,
.latency-good > strong { color: var(--green) !important; }
.tone-warn,
.latency-warn > strong { color: var(--amber) !important; }
.tone-bad,
.latency-bad > strong { color: var(--red) !important; }
.tone-neutral { color: var(--muted) !important; }

.mono {
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.secondary-text { color: var(--muted); }

/* Overview */
.kpi-grid {
  margin-bottom: 18px;
  display: grid;
  grid-template-columns: repeat(4, minmax(165px, 1fr));
  gap: 12px;
}

.kpi-card {
  min-height: 124px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(16, 18, 23, .78);
}

.kpi-card > strong {
  margin: 12px 0 8px;
  color: var(--text);
  font-size: 29px;
  line-height: 1;
  letter-spacing: -.04em;
  font-weight: 640;
  font-variant-numeric: tabular-nums;
}

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

.kpi-note {
  color: var(--faint);
  font-size: 10px;
}

.overview-grid {
  margin-bottom: 18px;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(320px, .8fr);
  gap: 18px;
}

.latency-panel,
.agents-summary,
.recent-panel {
  padding: 20px;
}

.sample-count {
  padding: 5px 7px;
  color: var(--muted);
  border-radius: 6px;
  background: rgba(255, 255, 255, .03);
  font-size: 10px;
}

.latency-row { margin-top: 22px; }

.latency-row-head {
  margin-bottom: 9px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--muted);
  font-size: 11px;
}

.latency-row-head strong {
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.latency-row > small {
  display: block;
  margin-top: 7px;
  color: var(--faint);
  font-size: 10px;
}

.meter {
  position: relative;
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: #1b1e25;
}

.meter > span {
  display: block;
  height: 100%;
  min-width: 2px;
  border-radius: inherit;
  background: currentColor;
  opacity: .78;
}

.meter > i {
  position: absolute;
  top: -2px;
  bottom: -2px;
  width: 1px;
  background: #6f7380;
}

.quality-facts {
  margin-top: 23px;
  padding-top: 17px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  border-top: 1px solid var(--line);
}

.quality-facts div { display: grid; gap: 5px; }
.quality-facts span { color: var(--faint); font-size: 10px; }
.quality-facts strong { color: var(--text-soft); font-size: 13px; font-weight: 580; }

.compact-list {
  margin-top: 13px;
  display: grid;
}

.compact-agent {
  min-width: 0;
  min-height: 54px;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  border-top: 1px solid var(--line);
}

.compact-agent:first-child { border-top: 0; }
.compact-agent:hover .compact-copy strong { color: #fff; }

.avatar {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  flex: 0 0 32px;
  color: #bbb3ff;
  border: 1px solid rgba(139, 124, 255, .17);
  border-radius: 9px;
  background: rgba(139, 124, 255, .09);
  font-size: 11px;
  font-weight: 650;
}

.compact-copy,
.agent-cell > span:last-child,
.agent-name-cell,
.date-cell {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.compact-copy strong,
.agent-cell strong,
.agent-name-cell { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.compact-copy strong { color: var(--text-soft); font-size: 12px; }
.compact-copy small,
.agent-cell small,
.agent-name-cell small,
.date-cell small { overflow: hidden; color: var(--faint); text-overflow: ellipsis; white-space: nowrap; }
.compact-meta { font-size: 11px; font-variant-numeric: tabular-nums; }

.recent-panel .panel-heading { margin-bottom: 12px; }

/* Tables */
.table-panel { overflow: visible; }
.calls-journal { min-width: 0; overflow: hidden; contain: inline-size paint; }

.table-title { padding: 18px 20px 14px; }

.table-scroll {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
  contain: inline-size paint;
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: auto;
}

.data-table th {
  height: 37px;
  padding: 0 14px;
  color: var(--faint);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, .01);
  font-size: 9px;
  font-weight: 650;
  letter-spacing: .07em;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
}

.data-table td {
  height: 62px;
  padding: 9px 14px;
  color: var(--text-soft);
  border-bottom: 1px solid var(--line);
  font-size: 12px;
  vertical-align: middle;
}

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

.data-table tbody tr[data-href] {
  cursor: pointer;
  transition: background .13s;
}

.data-table tbody tr[data-href]:hover { background: rgba(255, 255, 255, .018); }

.agent-table { min-width: 870px; }
.agent-table th:first-child,
.agent-table td:first-child { width: 34%; }

.agent-cell {
  min-width: 220px;
  display: flex;
  align-items: center;
  gap: 11px;
}

.agent-cell strong {
  max-width: 330px;
  color: var(--text);
  font-size: 12px;
  font-weight: 580;
}

.agent-cell small { max-width: 360px; }

.actions-cell {
  width: 50px;
  text-align: right;
}

.row-menu { position: relative; }
.row-menu summary {
  width: 30px;
  height: 30px;
  margin-left: auto;
  display: grid;
  place-items: center;
  color: var(--muted);
  border-radius: 7px;
  list-style: none;
}
.row-menu summary::-webkit-details-marker { display: none; }
.row-menu summary:hover,
.row-menu[open] summary { color: var(--text); background: var(--surface-3); }

.menu-popover {
  position: absolute;
  z-index: 15;
  top: 33px;
  right: 0;
  width: 190px;
  padding: 5px;
  border: 1px solid var(--line-strong);
  border-radius: 9px;
  background: #17191f;
  box-shadow: var(--shadow);
}

.menu-popover button {
  width: 100%;
  height: 34px;
  padding: 0 9px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-soft);
  border: 0;
  border-radius: 6px;
  background: transparent;
  font-size: 11px;
  text-align: left;
}

.menu-popover button:hover { color: var(--text); background: rgba(255, 255, 255, .045); }
.menu-popover .danger-text { color: #ff909a; }

.runtime-strip {
  min-height: 60px;
  margin-bottom: 16px;
  padding: 10px 13px;
  display: flex;
  align-items: center;
  gap: 11px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(16, 18, 23, .65);
}

.runtime-strip > div {
  min-width: 0;
  margin-right: auto;
  display: grid;
  gap: 3px;
}

.runtime-strip strong { color: var(--text-soft); font-size: 12px; }
.runtime-strip small { color: var(--faint); font-size: 10px; }

.runtime-glyph,
.event-icon,
.audio-icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  color: #a79cff;
  border: 1px solid rgba(139, 124, 255, .16);
  background: rgba(139, 124, 255, .08);
}

.runtime-glyph {
  width: 34px;
  height: 34px;
  border-radius: 9px;
}

.archive-panel { margin-top: 16px; overflow: hidden; }
.archive-panel > summary {
  min-height: 48px;
  padding: 0 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--muted);
  list-style: none;
  font-size: 11px;
}
.archive-panel > summary::-webkit-details-marker { display: none; }
.archive-panel > summary span { display: flex; align-items: center; gap: 7px; }
.archive-list { border-top: 1px solid var(--line); }
.archive-row {
  min-height: 55px;
  padding: 8px 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-top: 1px solid var(--line);
}
.archive-row:first-child { border-top: 0; }
.archive-row > span { display: grid; gap: 4px; }
.archive-row strong { color: var(--text-soft); font-size: 12px; }
.archive-row small { color: var(--faint); }

.empty-state,
.error-state {
  min-height: 310px;
  padding: 42px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.empty-state h2,
.error-state h2 { margin-top: 14px; }
.empty-state p,
.error-state p { max-width: 390px; margin: 7px 0 18px; color: var(--muted); line-height: 1.5; }
.state-icon,
.test-orb {
  display: grid;
  place-items: center;
  color: #aba1ff;
  border: 1px solid var(--accent-line);
  border-radius: 13px;
  background: var(--accent-soft);
}
.state-icon { width: 46px; height: 46px; }
.inline-empty { padding: 38px 20px; color: var(--muted); font-size: 12px; text-align: center; }

/* Outbound campaigns */
.campaign-overview {
  margin-bottom: 14px;
  overflow: hidden;
}
.campaign-overview-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.campaign-overview-metrics > div {
  min-width: 0;
  min-height: 84px;
  padding: 14px 18px;
  display: grid;
  align-content: center;
  gap: 5px;
  border-left: 1px solid var(--line);
}
.campaign-overview-metrics > div:first-child { border-left: 0; }
.campaign-overview-metrics span { color: var(--muted); font-size: 10px; font-weight: 570; }
.campaign-overview-metrics strong {
  color: var(--text);
  font-size: 23px;
  line-height: 1;
  letter-spacing: -.035em;
  font-variant-numeric: tabular-nums;
}
.campaign-overview-metrics small { color: var(--faint); font-size: 9px; }
.campaign-runtime-strip { margin-bottom: 14px; }
.campaign-table { min-width: 1030px; }
.campaign-table td:first-child { min-width: 220px; }
.campaign-table td strong,
.campaign-table td small,
.release-table td strong,
.release-table td small {
  display: block;
}
.campaign-table td small,
.release-table td small {
  margin-top: 4px;
  color: var(--faint);
  font-size: 9px;
}
.campaign-modal { width: min(720px, 100%); }
.campaign-form-grid {
  margin: 18px 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.campaign-form-wide { grid-column: 1 / -1; }
.form-warning {
  margin: 0 0 16px;
  padding: 10px 12px;
  color: #ffd39e;
  border: 1px solid rgba(255, 180, 92, .2);
  border-radius: 8px;
  background: rgba(255, 180, 92, .08);
  font-size: 11px;
}
.campaign-header { margin-bottom: 18px; }
.campaign-progress {
  padding: 12px 18px 14px;
  border-top: 1px solid var(--line);
}
.campaign-progress > div:first-child {
  margin-bottom: 8px;
  display: flex;
  justify-content: space-between;
  color: var(--muted);
  font-size: 11px;
}
.campaign-progress strong { color: var(--text); }
.campaign-detail-grid,
.campaign-tables-grid {
  margin-bottom: 18px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
.campaign-config-card,
.campaign-readiness-card,
.lead-upload-card,
.release-management-card { overflow: hidden; }
.campaign-config-card .panel-heading,
.campaign-readiness-card .panel-heading,
.lead-upload-card .panel-heading,
.release-management-card .panel-heading {
  padding: 17px 18px;
}
.campaign-config-card .settings-kv { padding: 0 18px 14px; }
.campaign-config-card .settings-kv dd small {
  display: block;
  margin-top: 3px;
  color: var(--faint);
  font-size: 9px;
}
.campaign-readiness-card .settings-blockers { padding: 0 18px 14px; }
.campaign-launch-checklist {
  margin: 0;
  padding: 0 18px 14px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  list-style: none;
}
.campaign-launch-checklist li {
  min-width: 0;
  padding: 12px;
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  align-content: start;
  gap: 9px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: rgba(255,255,255,.015);
}
.campaign-launch-checklist li.ready > .campaign-check-icon { color: var(--green); }
.campaign-launch-checklist li.blocked > .campaign-check-icon { color: var(--amber); }
.campaign-check-icon { display: inline-flex; padding-top: 1px; }
.campaign-check-content { min-width: 0; }
.campaign-launch-checklist strong,
.campaign-launch-checklist small { display: block; overflow-wrap: anywhere; }
.campaign-launch-checklist strong { color: var(--text-soft); font-size: 12px; line-height: 1.35; }
.campaign-launch-checklist small { margin-top: 4px; color: var(--faint); font-size: 11px; line-height: 1.45; }
.campaign-check-actions {
  margin-top: 10px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
}
.campaign-check-actions .button { min-height: 32px; }
.campaign-check-subchecks {
  margin: 9px 0 0;
  padding: 0;
  display: grid;
  gap: 5px;
  list-style: none;
}
.campaign-launch-checklist .campaign-check-subchecks li {
  padding: 0;
  display: flex;
  align-items: flex-start;
  gap: 6px;
  color: var(--muted);
  border: 0;
  border-radius: 0;
  background: transparent;
  font-size: 10px;
  line-height: 1.4;
}
.campaign-check-subchecks li.ready svg { color: var(--green); }
.campaign-check-subchecks li.blocked svg { color: var(--amber); }
.campaign-check-warning {
  margin: 8px 0 0;
  color: #e8b86e;
  font-size: 10px;
  line-height: 1.45;
}
.settings-deep-link-target {
  scroll-margin-top: 22px;
  outline: 2px solid rgba(139, 124, 255, .7);
  outline-offset: 3px;
}
.campaign-policy-note {
  margin: 0 18px 14px;
  padding: 10px 12px;
  display: grid;
  gap: 4px;
  color: var(--muted);
  border: 1px solid var(--accent-line);
  border-radius: 9px;
  background: var(--accent-soft);
  font-size: 9px;
  line-height: 1.45;
}
.campaign-policy-note strong { color: var(--text-soft); font-size: 10px; }
.campaign-policy-note.danger {
  color: #e4aeb3;
  border-color: rgba(255, 106, 117, .3);
  background: rgba(255, 106, 117, .07);
}
.campaign-policy-note.danger strong { color: #ffd9dc; }
.destination-policy-options {
  min-width: 0;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
  border: 0;
}
.destination-policy-options legend {
  margin-bottom: 7px;
  color: var(--muted);
  font-size: 9px;
}
.destination-policy-options > label {
  min-width: 0;
  padding: 10px 11px;
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  align-items: flex-start;
  gap: 9px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: rgba(255,255,255,.012);
  cursor: pointer;
}
.destination-policy-options input { margin: 2px 0 0; accent-color: var(--accent); }
.destination-policy-options span { display: grid; gap: 3px; }
.destination-policy-options strong { color: var(--text-soft); font-size: 10px; }
.destination-policy-options small { color: var(--faint); font-size: 9px; line-height: 1.45; }
.destination-policy-risk { display: grid; gap: 11px; }
.destination-policy-risk[hidden] { display: none; }
.lead-upload-card { margin-bottom: 18px; }
.lead-intake-settings {
  padding: 14px 18px;
  display: flex;
  align-items: flex-end;
  gap: 16px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: rgba(255,255,255,.012);
}
.lead-intake-settings .field { flex: 0 1 300px; }
.lead-import-state {
  min-width: 0;
  padding-bottom: 8px;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.4;
}
.lead-import-state.pending { color: #c8beff; }
.lead-import-state.danger { color: #ff929c; }
.lead-intake-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.lead-intake-form {
  min-width: 0;
  padding: 18px;
  display: flex;
  align-items: stretch;
  flex-direction: column;
  gap: 12px;
  border-right: 1px solid var(--line);
}
.lead-intake-form:last-child { border-right: 0; }
.lead-intake-form-heading { min-height: 76px; }
.lead-intake-form-heading .badge { margin-bottom: 8px; }
.lead-intake-form-heading h3 { margin: 0 0 4px; color: var(--text); font-size: 13px; }
.lead-intake-form-heading p { margin: 0; color: var(--muted); font-size: 9px; line-height: 1.45; }
.lead-intake-form > .button { width: 100%; margin-top: auto; }
.lead-intake-form .field-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lead-intake-form textarea {
  min-height: 150px;
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 11px;
  line-height: 1.55;
}
.lead-intake-form textarea.lead-quick-custom { min-height: 72px; }
.lead-byte-status { min-height: 16px; color: var(--faint); font-size: 9px; line-height: 1.4; overflow-wrap: anywhere; }
.campaign-tables-grid .table-panel { min-width: 0; overflow: hidden; }
.campaign-tables-grid .data-table { min-width: 520px; }
.batch-progress-cell { min-width: 130px; }
.batch-progress-cell strong,
.batch-progress-cell small { display: block; }
.batch-progress-cell strong { color: var(--text-soft); font-size: 10px; }
.batch-progress-cell small { margin: 3px 0 6px; color: var(--faint); font-size: 9px; }
.batch-progress-cell .meter { height: 3px; }
.batch-errors summary { color: #ff929c; cursor: pointer; font-weight: 700; }
.batch-errors > div { min-width: 190px; padding-top: 6px; }
.batch-errors p { margin: 0 0 5px; display: flex; justify-content: space-between; gap: 12px; color: var(--muted); font-size: 9px; }
.batch-errors p strong { color: var(--text-soft); }
.batch-error-link { min-height: 28px; padding: 5px 8px; white-space: nowrap; }
.batch-error-modal { max-height: 100%; }
.batch-error-list { overflow-y: auto; max-height: 480px; margin: 0 0 18px; border: 1px solid var(--line); border-radius: 10px; }
.batch-error-list p { display: grid; grid-template-columns: 100px 1fr; gap: 12px; margin: 0; padding: 9px 12px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 11px; }
.batch-error-list p:last-child { border-bottom: 0; }
.batch-error-list strong { color: var(--text-soft); }
.batch-error-page-status { min-height: 18px; margin-bottom: 8px; color: var(--muted); font-size: 10px; }
.batch-error-pagination { margin: -8px 0 18px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.batch-error-pagination span { color: var(--muted); font-size: 10px; font-variant-numeric: tabular-nums; }
.csv-preview-modal { max-height: 100%; }
.csv-preview-facts {
  margin: 0 0 14px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid var(--line);
  border-radius: 10px;
}
.csv-preview-facts > div { min-width: 0; padding: 11px 12px; border-right: 1px solid var(--line); }
.csv-preview-facts > div:last-child { border-right: 0; }
.csv-preview-facts dt { margin-bottom: 4px; color: var(--faint); font-size: 9px; }
.csv-preview-facts dd { overflow-wrap: anywhere; color: var(--text-soft); font-size: 11px; }
.csv-preview-list { max-height: 270px; margin-bottom: 18px; overflow-y: auto; border: 1px solid var(--line); border-radius: 10px; }
.csv-preview-list > div:not(.inline-empty) { padding: 9px 12px; display: grid; grid-template-columns: minmax(120px, 1fr) auto; gap: 3px 12px; border-bottom: 1px solid var(--line); }
.csv-preview-list > div:last-child { border-bottom: 0; }
.csv-preview-list strong { overflow-wrap: anywhere; color: var(--text-soft); font-size: 11px; }
.csv-preview-list span,
.csv-preview-list small { color: var(--muted); font-size: 10px; }
.csv-preview-list small { grid-column: 1 / -1; }
.time-choice-list { margin-bottom: 18px; display: grid; gap: 8px; }
.time-choice-list .button { height: auto; padding: 11px 12px; align-items: flex-start; flex-direction: column; text-align: left; }
.time-choice-list .button strong { color: var(--text-soft); font-size: 11px; }
.time-choice-list .button small { color: var(--faint); font-size: 9px; }

/* Native Lead Ops */
.lead-filter-panel { margin-bottom: 16px; padding: 16px; }
.lead-filter-form {
  display: grid;
  grid-template-columns: minmax(240px, 1.4fr) repeat(4, minmax(150px, 1fr)) auto;
  align-items: end;
  gap: 10px;
}
.lead-filter-actions { display: flex; gap: 8px; }
.lead-table { min-width: 1120px; }
.lead-table td strong,
.lead-table td small { display: block; }
.lead-table td small { margin-top: 4px; color: var(--faint); font-size: 9px; }
.lead-pagination { padding: 14px 16px; display: flex; justify-content: flex-end; gap: 8px; border-top: 1px solid var(--line); }
.lead-header { margin-bottom: 18px; }
.lead-detail-grid,
.lead-work-grid {
  margin-bottom: 18px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
.lead-identity-card,
.lead-state-card,
.lead-work-grid > .panel { overflow: hidden; }
.lead-identity-card .panel-heading,
.lead-state-card .panel-heading,
.lead-work-grid .panel-heading { padding: 17px 18px; }
.lead-identity-card .settings-kv,
.lead-state-card .settings-kv { padding: 0 18px 16px; }
.lead-edit-form,
.lead-disposition-form,
.lead-note-form { padding: 0 18px 18px; }
.lead-edit-form > .button { margin-top: 12px; }
.lead-disposition-form { display: grid; grid-template-columns: 1fr 1fr auto; align-items: end; gap: 10px; }
.lead-callback-form { padding-top: 16px; border-top: 1px solid var(--line); }
.lead-note-form { display: flex; align-items: flex-end; gap: 10px; }
.lead-note-form textarea { min-height: 76px; flex: 1 1 auto; }
.lead-custom { margin: 0 18px 18px; border-top: 1px solid var(--line); }
.lead-custom summary { padding: 12px 0; color: var(--muted); cursor: pointer; font-size: 11px; }
.lead-custom pre { max-height: 260px; overflow: auto; padding: 12px; border: 1px solid var(--line); border-radius: 8px; color: var(--text-soft); background: rgba(0, 0, 0, .18); font-size: 10px; }
.lead-notes { max-height: 390px; overflow-y: auto; border-top: 1px solid var(--line); }
.lead-notes > div { padding: 13px 18px; border-bottom: 1px solid var(--line); }
.lead-notes p { margin: 0 0 6px; color: var(--text-soft); white-space: pre-wrap; font-size: 11px; line-height: 1.55; }
.lead-notes small { color: var(--faint); font-size: 9px; }
.lead-conflict-notice {
  margin: -4px 0 18px;
  padding: 13px 15px;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 10px;
  color: #f5b64d;
  border: 1px solid rgba(245, 182, 77, .3);
  border-radius: 10px;
  background: rgba(245, 182, 77, .07);
}
.lead-conflict-notice strong { color: var(--text-soft); font-size: 12px; }
.lead-conflict-notice p { margin: 4px 0 0; color: var(--muted); font-size: 10px; line-height: 1.5; }
.lead-form-error {
  grid-column: 1 / -1;
  margin-bottom: 12px;
  padding: 9px 11px;
  color: #ffc1c6;
  border: 1px solid rgba(255, 112, 125, .27);
  border-radius: 8px;
  background: rgba(255, 112, 125, .07);
  font-size: 10px;
  line-height: 1.45;
}
.release-management-card { margin-top: 18px; }
.release-publish-form {
  padding: 18px;
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(220px, 1fr) auto;
  align-items: end;
  gap: 12px;
  border-bottom: 1px solid var(--line);
}
.release-table { min-width: 720px; }
.compact-empty-state { min-height: 230px; }

/* Editor */
.editor-page { max-width: none; padding-top: 23px; }

.editor-header {
  min-height: 48px;
  margin-bottom: 18px;
  align-items: center;
}

.editor-title {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 11px;
}

.editor-title > div { min-width: 0; }
.editor-title h1 {
  max-width: 620px;
  overflow: hidden;
  font-size: 20px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.editor-title .eyebrow { margin-bottom: 3px; font-size: 9px; }

.back-link {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 8px;
}
.back-link:hover { color: var(--text); background: var(--surface-2); }

.studio {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 370px);
  gap: 18px;
  align-items: start;
}

.editor-canvas { min-width: 0; }

.identity-fields {
  margin-bottom: 12px;
  padding: 15px;
  display: grid;
  grid-template-columns: minmax(180px, .75fr) minmax(240px, 1.25fr);
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(16, 18, 23, .7);
}

.field {
  min-width: 0;
  display: grid;
  gap: 7px;
}

.field > span {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 570;
}

.field > span small {
  color: var(--faint);
  font-size: 9px;
  font-weight: 450;
}

input,
select,
textarea {
  width: 100%;
  color: var(--text);
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: #0c0e12;
  outline: 0;
  transition: border-color .15s, box-shadow .15s, background .15s;
}

input,
select {
  height: 36px;
  padding: 0 10px;
  font-size: 12px;
}

input[type="checkbox"],
input[type="radio"] {
  width: 16px;
  min-width: 16px;
  height: 16px;
  margin: 0;
  padding: 0;
  flex: 0 0 16px;
  accent-color: var(--accent);
  vertical-align: middle;
}

input[type="checkbox"]:not(:disabled),
input[type="radio"]:not(:disabled) { cursor: pointer; }

select {
  padding-right: 30px;
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, #777b87 50%), linear-gradient(135deg, #777b87 50%, transparent 50%);
  background-position: calc(100% - 15px) 15px, calc(100% - 11px) 15px;
  background-size: 4px 4px, 4px 4px;
  background-repeat: no-repeat;
}

input:hover,
select:hover,
textarea:hover { border-color: #393d48; }

input:focus,
select:focus,
textarea:focus {
  border-color: rgba(139, 124, 255, .7);
  box-shadow: 0 0 0 3px rgba(139, 124, 255, .09);
}

input::placeholder,
textarea::placeholder { color: #50535d; }

.compliance-note {
  margin-bottom: 12px;
  padding: 9px 11px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  color: #a8a0c3;
  border: 1px solid rgba(139, 124, 255, .13);
  border-radius: 9px;
  background: rgba(139, 124, 255, .045);
  font-size: 10px;
  line-height: 1.45;
}
.compliance-note .icon { margin-top: 1px; color: #9e92ff; }

.prompt-card {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(16, 18, 23, .75);
}

.prompt-heading {
  min-height: 68px;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border-bottom: 1px solid var(--line);
}
.prompt-heading h2 { margin-top: 4px; }
.character-count {
  color: var(--faint);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
}

#prompt {
  min-height: calc(100vh - 290px);
  height: calc(100vh - 290px);
  padding: 18px 20px;
  resize: vertical;
  color: #d6d7dd;
  border: 0;
  border-radius: 0;
  background: #0c0e12;
  box-shadow: none;
  font-family: "SFMono-Regular", ui-monospace, Consolas, monospace;
  font-size: 12px;
  line-height: 1.7;
  tab-size: 2;
}

#prompt:focus { box-shadow: inset 0 0 0 1px rgba(139, 124, 255, .35); }

.prompt-footer {
  min-height: 36px;
  padding: 0 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--faint);
  border-top: 1px solid var(--line);
  font-size: 9px;
}
.prompt-footer > span { display: flex; align-items: center; gap: 6px; }
.shortcut {
  padding: 3px 6px;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 5px;
  background: rgba(255, 255, 255, .025);
}

.test-rail {
  position: sticky;
  top: 22px;
  height: calc(100vh - 44px);
  min-height: 610px;
  max-height: 920px;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  background: #0f1116;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .18);
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.test-rail[data-call-state="active"] {
  border-color: rgba(84, 216, 155, .48);
  background: linear-gradient(180deg, rgba(84, 216, 155, .025), transparent 150px), #0f1116;
  animation: live-panel-glow 2.4s ease-in-out infinite;
}
.test-rail[data-call-state="preparing"] { border-color: rgba(241, 184, 91, .32); }
.test-rail[data-call-state="error"] { border-color: rgba(255, 112, 125, .38); }

.test-header {
  min-height: 69px;
  padding: 14px 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid var(--line);
}
.test-header h2 { margin-top: 4px; }

.test-status {
  min-height: 23px;
  padding: 0 8px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 9px;
  white-space: nowrap;
}
.test-status > span {
  display: inline-block;
}
.test-status > .test-status-signal {
  position: relative;
  width: 5px;
  height: 5px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: currentColor;
}
.test-status.active {
  color: var(--green);
  border-color: rgba(84, 216, 155, .3);
  background: var(--green-soft);
  font-weight: 650;
}
.test-status.active > .test-status-signal::after {
  content: "";
  position: absolute;
  inset: -5px;
  border: 1px solid currentColor;
  border-radius: 50%;
  animation: live-status-ring 1.5s ease-out infinite;
}
.test-status.preparing,
.test-status.ending { color: var(--amber); border-color: rgba(241, 184, 91, .24); background: var(--amber-soft); }
.test-status.ended { color: var(--text-soft); background: rgba(255, 255, 255, .025); }
.test-status.error { color: var(--red); }

.latency-live {
  min-height: 62px;
  padding: 10px 14px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, .012);
}
.latency-live div {
  min-width: 0;
  display: grid;
  gap: 5px;
}
.latency-live span {
  color: var(--faint);
  font-size: 8px;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.latency-live strong {
  color: var(--muted);
  font-size: 12px;
  font-weight: 620;
  font-variant-numeric: tabular-nums;
}

.transcript {
  min-height: 0;
  padding: 15px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
}

.transcript-empty {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.test-orb {
  width: 48px;
  height: 48px;
  margin-bottom: 13px;
  border-radius: 15px;
}
.transcript-empty.preparing .test-orb { animation: preparing-orb 1.6s ease-in-out infinite; }
.transcript-empty.active .test-orb {
  color: var(--green);
  border-color: rgba(84, 216, 155, .34);
  background: var(--green-soft);
  animation: live-orb 1.6s ease-in-out infinite;
}
.transcript-empty.error .test-orb {
  color: var(--red);
  border-color: rgba(255, 112, 125, .3);
  background: var(--red-soft);
}
.transcript-empty strong { color: var(--text-soft); font-size: 12px; }
.transcript-empty p {
  max-width: 260px;
  margin-top: 7px;
  color: var(--faint);
  font-size: 10px;
  line-height: 1.55;
}

.transcript-item {
  max-width: 88%;
  margin-bottom: 13px;
}
.transcript-item.user { margin-left: auto; }
.transcript-item.agent { margin-right: auto; }
.transcript-item p {
  padding: 9px 11px;
  color: #d5d6dd;
  border: 1px solid var(--line);
  border-radius: 5px 11px 11px 11px;
  background: #171920;
  font-size: 11px;
  line-height: 1.5;
  white-space: pre-wrap;
}
.transcript-item.user p {
  color: #e2defe;
  border-color: rgba(139, 124, 255, .19);
  border-radius: 11px 5px 11px 11px;
  background: rgba(139, 124, 255, .105);
}
.transcript-item.interim p { opacity: .58; }
.transcript-item.interim p::after {
  content: "";
  display: inline-block;
  width: 4px;
  height: 12px;
  margin-left: 3px;
  vertical-align: -2px;
  background: currentColor;
  animation: blink .8s steps(1) infinite;
}
.transcript-meta {
  min-height: 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--faint);
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.transcript-item.user .transcript-meta { flex-direction: row-reverse; }
.turn-latency:not(:empty) {
  font-size: 8px;
  text-transform: none;
  letter-spacing: 0;
}

.live-tool-event {
  width: 92%;
  margin: 4px auto 13px;
  padding: 8px 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, .018);
}
.live-tool-heading {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px;
}
.live-tool-heading > span { color: var(--accent); }
.live-tool-heading strong { color: var(--text-soft); font-size: 9px; }
.live-tool-heading em { color: var(--faint); font-size: 8px; font-style: normal; }
.live-tool-event details { margin-top: 7px; border-top: 1px solid var(--line); padding-top: 6px; }
.live-tool-event summary { color: var(--muted); font-size: 8px; list-style: none; cursor: pointer; }
.live-tool-event summary svg { margin-left: 3px; vertical-align: -2px; }
.live-tool-event details > div { margin-top: 6px; display: grid; gap: 4px; }
.live-tool-event details span { color: var(--faint); font-size: 8px; }
.live-tool-event code { display: block; padding: 5px; overflow: auto; color: var(--text-soft); background: #0c0e13; font-size: 8px; white-space: pre-wrap; }
.live-tool-event.completed { border-color: rgba(84, 216, 155, .25); background: var(--green-soft); }
.live-tool-event.blocked,
.live-tool-event.failed { border-color: rgba(255, 112, 125, .22); background: var(--red-soft); }
.live-tool-event.fallback { border-color: rgba(241, 184, 91, .24); background: var(--amber-soft); }

.test-controls {
  padding: 12px 14px 14px;
  border-top: 1px solid var(--line);
  background: #111319;
}
.test-controls audio { display: none; }
.test-meta {
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: var(--faint);
  font-size: 9px;
  font-variant-numeric: tabular-nums;
}
.test-result-link {
  min-height: 31px;
  margin-bottom: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: #b8afff;
  border: 1px solid var(--accent-line);
  border-radius: 8px;
  background: var(--accent-soft);
  font-size: 9px;
  font-weight: 650;
}
.test-result-link:hover { color: #d4ceff; background: rgba(139, 124, 255, .2); }
.test-result-link[hidden] { display: none; }
.test-elapsed {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.live-call-signal {
  height: 11px;
  display: none;
  align-items: center;
  gap: 2px;
  color: var(--green);
}
.test-rail[data-call-state="active"] .live-call-signal { display: inline-flex; }
.live-call-signal i {
  width: 2px;
  height: 5px;
  display: block;
  border-radius: 2px;
  background: currentColor;
  animation: live-signal-wave .78s ease-in-out infinite alternate;
}
.live-call-signal i:nth-child(2) { height: 10px; animation-delay: -.26s; }
.live-call-signal i:nth-child(3) { height: 7px; animation-delay: -.52s; }
.call-button {
  width: 100%;
  height: 43px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  color: #fff;
  border: 1px solid #7362e5;
  border-radius: 10px;
  background: #6f5edc;
  font-size: 12px;
  font-weight: 620;
}
.call-button:hover:not(:disabled) { background: #7a69e8; }
.call-button.active {
  border-color: #d85866;
  background: #bf4855;
  box-shadow: 0 0 0 1px rgba(255, 112, 125, .08), 0 10px 26px rgba(191, 72, 85, .2);
}
.call-button.active:hover:not(:disabled) { background: #ce5260; }
.call-button.preparing {
  color: #f7dcae;
  border-color: rgba(241, 184, 91, .42);
  background: rgba(241, 184, 91, .12);
}
.call-button.preparing:hover:not(:disabled) { background: rgba(241, 184, 91, .18); }
.call-button.ending { color: var(--muted); border-color: var(--line-strong); background: var(--surface-2); }
.call-button.ended { border-color: var(--accent-line); background: rgba(139, 124, 255, .16); }
.call-button.ended:hover:not(:disabled) { background: rgba(139, 124, 255, .24); }
.call-button.error { border-color: rgba(255, 112, 125, .4); background: var(--red-soft); }
.call-button:disabled { cursor: wait; opacity: .75; }

/* Drawers */
.drawer-open { overflow: hidden; }
.drawer-layer {
  position: fixed;
  z-index: 70;
  inset: 0;
  visibility: hidden;
  pointer-events: none;
}
.drawer-layer.open {
  visibility: visible;
  pointer-events: auto;
}
.drawer-backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  border: 0;
  background: rgba(2, 3, 5, .58);
  opacity: 0;
  backdrop-filter: blur(2px);
  transition: opacity .2s;
}
.drawer-layer.open .drawer-backdrop { opacity: 1; }
.drawer {
  position: absolute;
  inset: 0 0 0 auto;
  width: min(440px, 94vw);
  min-width: 0;
  max-width: 100%;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
  border-left: 1px solid var(--line-strong);
  background: #101217;
  box-shadow: -25px 0 70px rgba(0, 0, 0, .4);
  transform: translateX(100%);
  transition: transform .22s ease;
}
.drawer-layer.open .drawer { transform: translateX(0); }
.drawer-header {
  min-height: 78px;
  padding: 15px 17px 15px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border-bottom: 1px solid var(--line);
}
.drawer-header h2 { font-size: 16px; }
.drawer-header p { margin-top: 4px; color: var(--muted); font-size: 10px; }
.drawer-header > div { min-width: 0; }
.drawer-content {
  min-width: 0;
  min-height: 0;
  padding: 19px 20px 30px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.drawer-section {
  padding: 20px 0;
  display: grid;
  gap: 14px;
  border-top: 1px solid var(--line);
}
.drawer-section:first-child { padding-top: 0; border-top: 0; }
.drawer-section .section-kicker { margin-bottom: -1px; }
#openAISettings[hidden], #geminiVoiceSettings[hidden], #geminiInputSettings[hidden],
#openAIRetention[hidden], [data-openai-turn][hidden] { display: none; }
#geminiVoiceSettings, #openAISettings details { display: grid; gap: 14px; }
#openAISettings summary { cursor: pointer; }
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.gemini-input-grid .field > span {
  align-items: start;
  justify-content: start;
  flex-direction: column;
  gap: 2px;
}
.gemini-input-grid .field > span small { overflow-wrap: anywhere; }
.field-help { color: var(--faint); font-size: 10px; line-height: 1.5; }
.field-error { margin: 0; color: var(--red); font-size: 10px; line-height: 1.45; }

.pcm-gate-card {
  min-width: 0;
  margin: 0;
  padding: 13px;
  display: grid;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255, 255, 255, .015);
}
.pcm-gate-toggle { align-items: center; }
.pcm-gate-toggle > span:nth-child(2) { flex: 1; }
.pcm-gate-controls { min-width: 0; display: grid; gap: 10px; }
.pcm-gate-controls:has(input:disabled) { opacity: .55; }
.pcm-gate-advanced { min-width: 0; }
.pcm-gate-advanced summary { color: var(--muted); font-size: 10px; cursor: pointer; }
.pcm-gate-advanced[open] summary { margin-bottom: 10px; }
.test-scope-warning {
  margin: 0 14px 10px;
  padding: 9px 10px;
  display: flex;
  align-items: flex-start;
  gap: 7px;
  color: var(--amber);
  border: 1px solid rgba(241, 184, 91, .22);
  border-radius: 8px;
  background: var(--amber-soft);
  font-size: 9px;
  line-height: 1.45;
}
.test-scope-warning[hidden] { display: none; }
.test-scope-warning span { min-width: 0; }
.test-scope-warning strong { display: block; color: var(--text-soft); }
.pcm-gate-call-detail { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 5px; }
.pcm-gate-call-values { color: var(--faint); font-size: 9px; }

.locked-field {
  min-height: 59px;
  padding: 10px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: rgba(255, 255, 255, .015);
}
.locked-field > span:nth-child(2) { min-width: 0; display: grid; gap: 3px; }
.locked-field strong { color: var(--text-soft); font-size: 11px; }
.locked-field small { color: var(--faint); font-size: 9px; }
.lock-label {
  padding: 3px 5px;
  color: var(--faint);
  border: 1px solid var(--line);
  border-radius: 5px;
  font: 8px "SFMono-Regular", monospace;
  text-transform: uppercase;
}

.capability-list {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 9px;
}
.capability-list > div {
  min-height: 56px;
  padding: 8px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-top: 1px solid var(--line);
}
.capability-list > div:first-child { border-top: 0; }
.capability-list > div > span:first-child { display: grid; gap: 3px; }
.capability-list strong { color: var(--text-soft); font-size: 11px; font-weight: 570; }
.capability-list small { color: var(--faint); font-size: 9px; }

.agent-tool-list { display: grid; gap: 8px; margin-top: 10px; }
.agent-tool-row {
  min-width: 0; display: grid; gap: 9px; padding: 11px; border: 1px solid var(--line);
  border-radius: 10px; background: rgba(255,255,255,.018); opacity: .72;
}
.agent-tool-row.selected { border-color: rgba(139,124,255,.34); background: rgba(139,124,255,.055); opacity: 1; }
.agent-tool-row label { min-width: 0; display: flex; align-items: center; gap: 9px; cursor: pointer; }
.agent-tool-row.required label { cursor: default; }
.agent-tool-row label span { min-width: 0; display: grid; gap: 2px; }
.agent-tool-row label strong { overflow-wrap: anywhere; color: var(--text-soft); font-size: 12px; }
.agent-tool-row label small { color: var(--faint); font-size: 9px; }
.agent-tool-row p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.55; }
.agent-tool-meta { min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 8px; }

.tool-library-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.tool-library-card { display: grid; gap: 14px; padding: 18px; color: inherit; text-decoration: none; transition: border-color .16s ease, transform .16s ease; }
.tool-library-card:hover { border-color: rgba(139,124,255,.45); transform: translateY(-1px); }
.tool-library-card header { display: flex; align-items: center; gap: 10px; }
.tool-library-card header > span:last-child { display: grid; gap: 4px; }
.tool-library-card strong { color: var(--text); font-size: 13px; }
.tool-library-card small { color: var(--faint); font-size: 9px; }
.tool-library-card p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.6; }
.tool-library-card footer { display: flex; align-items: center; justify-content: space-between; color: var(--muted); font-size: 9px; }
.tool-library-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; color: var(--accent); background: rgba(139,124,255,.1); }

.tool-editor-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(300px, .8fr); gap: 16px; }
.tool-declaration-editor { display: grid; align-content: start; gap: 16px; padding: 20px; }
.tool-declaration-editor textarea { min-height: 300px; resize: vertical; line-height: 1.65; }
.tool-contract-column { display: grid; align-content: start; gap: 14px; }
.tool-contract-card, .tool-version-list { padding: 17px; }
.tool-contract-card dl { display: grid; gap: 10px; margin: 14px 0; }
.tool-contract-card dl div { display: flex; justify-content: space-between; gap: 12px; }
.tool-contract-card dt { color: var(--muted); font-size: 9px; }
.tool-contract-card dd { margin: 0; color: var(--text-soft); font-size: 9px; text-align: right; }
.tool-contract-card pre { max-height: 310px; overflow: auto; margin: 0; padding: 12px; border: 1px solid var(--line); border-radius: 9px; color: var(--muted); background: var(--bg); font-size: 9px; line-height: 1.55; }
.tool-version-list { display: grid; gap: 10px; }
.tool-version-list article { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 9px; border-top: 1px solid var(--line); }
.tool-version-list article span { display: grid; gap: 2px; }
.tool-version-list article strong { color: var(--text-soft); font-size: 10px; }
.tool-version-list article small, .tool-version-list article em { color: var(--faint); font-size: 8px; font-style: normal; }
.version-toolset { display: block; margin-top: -3px; color: var(--faint); font-size: 8px; line-height: 1.45; }

.versions-list { display: grid; gap: 8px; }
.version-card {
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: rgba(255, 255, 255, .012);
}
.version-card.current { border-color: rgba(84, 216, 155, .18); background: rgba(84, 216, 155, .025); }
.version-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.version-line > span { display: flex; align-items: center; gap: 7px; }
.version-line strong { color: var(--text-soft); font-size: 11px; }
.version-line time { color: var(--faint); font-size: 9px; }
.version-card p { margin: 7px 0 10px; color: var(--muted); font-size: 10px; }
.drawer-loading,
.drawer-error { padding: 30px 10px; color: var(--muted); text-align: center; font-size: 11px; }
.drawer-error { color: var(--red); }

/* Prompt QA */
.badge.warning {
  color: #f4c878;
  border-color: rgba(241, 184, 91, .22);
  background: var(--amber-soft);
}

.version-qa-status {
  margin: -1px 0 10px;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.version-qa-status.empty {
  color: var(--faint);
  font-size: 9px;
}

.version-clip-status {
  margin: -1px 0 10px;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.voice-clip-table td { vertical-align: middle; }

.voice-clip-actions {
  min-width: 220px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

.voice-clip-actions audio { width: 100%; height: 32px; color-scheme: dark; }

/* Compact placeholder for a clip with no audio yet (pending/failed) — deliberately not
   .inline-empty, whose 38px block padding was built for full empty-state sections and
   overlapped the "Перегенерировать" button next to it in this narrow table cell. */
.clip-no-audio {
  display: inline-block;
  padding: 0;
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.4;
  pointer-events: none;
}

.version-qa-badge {
  min-height: 24px;
  padding: 0 7px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  font-size: 9px;
  font-weight: 620;
}

.version-qa-badge:hover { color: var(--text); border-color: var(--line-strong); }
.version-qa-badge.success { color: #7fe3b4; border-color: rgba(84, 216, 155, .2); background: var(--green-soft); }
.version-qa-badge.accent { color: #b4aaff; border-color: var(--accent-line); background: var(--accent-soft); }
.version-qa-badge.warning { color: #f4c878; border-color: rgba(241, 184, 91, .22); background: var(--amber-soft); }
.version-qa-badge.danger { color: #ff969f; border-color: rgba(255, 112, 125, .24); background: var(--red-soft); }

#qaLayer .drawer { width: min(1180px, 96vw); }
#qaLayer .drawer-content {
  padding: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
}

.qa-editor-guard {
  min-height: 54px;
  padding: 9px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #f5c879;
  border-bottom: 1px solid rgba(241, 184, 91, .2);
  background: rgba(241, 184, 91, .075);
}

.qa-editor-guard[hidden] { display: none; }
.qa-editor-guard > svg { flex: 0 0 auto; }
.qa-editor-guard > span { min-width: 0; display: grid; gap: 2px; }
.qa-editor-guard strong { color: #f2d293; font-size: 11px; }
.qa-editor-guard small { color: #b19360; font-size: 9px; }
.qa-editor-guard .button { margin-left: auto; }

.qa-layout {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-columns: 310px minmax(0, 1fr);
}

.qa-control-pane {
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  border-right: 1px solid var(--line);
  background: #0d0f14;
}

.qa-control-section {
  padding: 17px;
  display: grid;
  gap: 13px;
  border-bottom: 1px solid var(--line);
}

.qa-control-section:last-child { border-bottom: 0; }
.qa-control-section > .section-kicker { margin-bottom: -3px; }

.qa-case-picker {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.qa-case-picker legend {
  width: 100%;
  margin-bottom: 7px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 570;
}

.qa-case-actions {
  margin-bottom: 7px;
  display: flex;
  gap: 12px;
}

.qa-case-actions button {
  padding: 0;
  color: #aaa0ff;
  border: 0;
  background: transparent;
  font-size: 9px;
}

.qa-case-actions button:hover { color: #cec8ff; }

.qa-case-options {
  max-height: 276px;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #0a0c10;
}

.qa-case-option {
  min-height: 58px;
  padding: 9px 10px;
  display: grid;
  grid-template-columns: 15px minmax(0, 1fr);
  align-items: flex-start;
  gap: 9px;
  border-top: 1px solid var(--line);
  cursor: pointer;
}

.qa-case-option:first-child { border-top: 0; }
.qa-case-option:hover { background: rgba(255, 255, 255, .018); }
.qa-case-option.unavailable { cursor: not-allowed; opacity: .48; }
.qa-case-option input { width: 16px; min-width: 16px; height: 16px; margin: 2px 0 0; flex-basis: 16px; accent-color: var(--accent); }
.qa-case-option > span { min-width: 0; display: grid; gap: 3px; }
.qa-case-option strong { color: var(--text-soft); font-size: 10px; font-weight: 600; }
.qa-case-option small { color: var(--faint); font-size: 9px; line-height: 1.45; }
.qa-case-option em { display: flex; gap: 4px; flex-wrap: wrap; font-style: normal; }
.qa-case-option em span {
  padding: 2px 4px;
  color: #8c8f9a;
  border: 1px solid var(--line);
  border-radius: 4px;
  font-size: 7px;
  letter-spacing: .02em;
}

.qa-repeat-field { grid-template-columns: minmax(0, 1fr) 66px; align-items: center; }
.qa-repeat-field > span { display: grid; justify-content: initial; gap: 2px; }
.qa-repeat-field input { text-align: center; }
.qa-run-count { color: var(--muted); font-size: 9px; line-height: 1.45; text-align: center; }
.qa-start { width: 100%; }
.qa-native-note { color: var(--faint); font-size: 9px; line-height: 1.55; text-align: center; }

.qa-section-heading {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.qa-section-heading h3,
.qa-section-heading h4 { margin: 2px 0 0; color: var(--text-soft); font-size: 12px; font-weight: 610; }
.qa-section-heading > span { color: var(--faint); font-size: 10px; font-variant-numeric: tabular-nums; }

.qa-history-section { padding-bottom: 30px; }
.qa-recent { display: grid; gap: 6px; }
.qa-recent-card {
  width: 100%;
  padding: 10px;
  display: grid;
  gap: 6px;
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, .012);
  text-align: left;
}

.qa-recent-card:hover { border-color: var(--line-strong); background: rgba(255, 255, 255, .025); }
.qa-recent-card.selected { border-color: var(--accent-line); background: var(--accent-soft); }
.qa-recent-line { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.qa-recent-line strong { font-size: 10px; }
.qa-recent-card > small { color: var(--faint); font-size: 8px; }
.qa-mini-progress { height: 2px; overflow: hidden; border-radius: 2px; background: var(--line); }
.qa-mini-progress i { display: block; height: 100%; border-radius: inherit; background: var(--accent); }

.qa-status {
  width: fit-content;
  min-height: 21px;
  padding: 0 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, .018);
  font-size: 8px;
  line-height: 1;
  font-weight: 650;
  white-space: nowrap;
}

.qa-status.large { min-height: 25px; padding: 0 9px; font-size: 9px; }
.qa-status.success { color: #7fe3b4; border-color: rgba(84, 216, 155, .2); background: var(--green-soft); }
.qa-status.accent { color: #b4aaff; border-color: var(--accent-line); background: var(--accent-soft); }
.qa-status.warning { color: #f4c878; border-color: rgba(241, 184, 91, .22); background: var(--amber-soft); }
.qa-status.danger { color: #ff969f; border-color: rgba(255, 112, 125, .24); background: var(--red-soft); }
.qa-status.muted { color: var(--faint); }

.qa-workspace {
  min-width: 0;
  min-height: 0;
  padding: 20px;
  overflow-y: auto;
  background: var(--surface);
}

.qa-workspace-loading { padding-top: 70px; }
.qa-empty-state {
  min-height: 390px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--muted);
  text-align: center;
}

.qa-empty-state.compact { min-height: 250px; }
.qa-empty-state h3 { color: var(--text-soft); font-size: 14px; }
.qa-empty-state p { max-width: 390px; font-size: 10px; line-height: 1.55; }
.qa-empty-state .button { margin-top: 7px; }

.qa-batch-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}

.qa-batch-header h2 { margin-top: 4px; font-size: 18px; }
.qa-batch-header p { margin-top: 5px; color: var(--faint); font: 9px "SFMono-Regular", Consolas, monospace; }
.qa-batch-actions { display: flex; align-items: center; gap: 7px; }
.danger-text { color: #ff929c !important; }

.qa-progress-card {
  margin-top: 16px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255, 255, 255, .014);
}

.qa-progress-copy { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.qa-progress-copy strong { color: var(--text-soft); font-size: 10px; }
.qa-progress-copy span { color: var(--muted); font-size: 9px; font-variant-numeric: tabular-nums; }
.qa-progress-track { height: 5px; margin-top: 9px; overflow: hidden; border-radius: 5px; background: var(--line); }
.qa-progress-track i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #6757dc, #9588ff); transition: width .3s ease; }
.qa-progress-stats { margin-top: 12px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.qa-progress-stats > span { min-width: 0; display: grid; gap: 3px; }
.qa-progress-stats small { color: var(--faint); font-size: 8px; }
.qa-progress-stats strong { color: var(--text-soft); font-size: 13px; font-variant-numeric: tabular-nums; }
.qa-batch-error {
  margin-top: 10px;
  padding: 8px 9px;
  display: flex;
  align-items: flex-start;
  gap: 7px;
  color: #ff9ca5;
  border: 1px solid rgba(255, 112, 125, .18);
  border-radius: 7px;
  background: var(--red-soft);
  font-size: 9px;
  line-height: 1.45;
}

.qa-results-grid {
  min-width: 0;
  margin-top: 16px;
  display: grid;
  grid-template-columns: minmax(245px, 300px) minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

.qa-case-results,
.qa-evidence {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255, 255, 255, .011);
}

.qa-case-results > .qa-section-heading,
.qa-evidence-header { min-height: 57px; padding: 11px 13px; border-bottom: 1px solid var(--line); }
.qa-case-result-list { display: grid; }
.qa-case-result { border-top: 1px solid var(--line); box-shadow: inset 2px 0 transparent; }
.qa-case-result:first-child { border-top: 0; }
.qa-case-result.success { box-shadow: inset 2px 0 var(--green); }
.qa-case-result.warning { box-shadow: inset 2px 0 var(--amber); }
.qa-case-result.danger { box-shadow: inset 2px 0 var(--red); }
.qa-case-result.accent { box-shadow: inset 2px 0 var(--accent); }
.qa-case-main {
  width: 100%;
  padding: 11px 12px 7px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  color: inherit;
  border: 0;
  background: transparent;
  text-align: left;
}

.qa-case-main:hover { background: rgba(255, 255, 255, .018); }
.qa-case-main > span:first-child { min-width: 0; display: grid; gap: 3px; }
.qa-case-main strong { color: var(--text-soft); font-size: 10px; }
.qa-case-main small { overflow: hidden; color: var(--faint); font-size: 8px; line-height: 1.4; text-overflow: ellipsis; }
.qa-case-main em { color: var(--muted); font-size: 8px; font-style: normal; font-variant-numeric: tabular-nums; }
.qa-attempts { padding: 0 12px 11px; display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.qa-attempts > span { color: var(--faint); font-size: 8px; }
.qa-attempt-dot {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  color: var(--muted);
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: var(--surface-2);
  font-size: 8px;
  font-weight: 650;
}

.qa-attempt-dot:hover,
.qa-attempt-dot.selected { box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px currentColor; }
.qa-attempt-dot.success { color: #75dda9; border-color: rgba(84, 216, 155, .3); background: var(--green-soft); }
.qa-attempt-dot.warning { color: #f1bd67; border-color: rgba(241, 184, 91, .3); background: var(--amber-soft); }
.qa-attempt-dot.danger { color: #ff8792; border-color: rgba(255, 112, 125, .3); background: var(--red-soft); }
.qa-attempt-dot.accent { color: #a99eff; border-color: var(--accent-line); background: var(--accent-soft); }

.qa-evidence-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.qa-evidence-header h3 { margin-top: 2px; color: var(--text-soft); font-size: 12px; }
.qa-evidence-actions { display: flex; align-items: center; justify-content: flex-end; gap: 7px; }
.qa-run-page { max-width: 1120px; }
.qa-run-page .page-header { margin-bottom: 18px; }
.qa-run-page-evidence { width: 100%; }
.qa-run-page-evidence .qa-transcript { max-height: 520px; }
.qa-run-meta {
  min-height: 36px;
  padding: 8px 13px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  color: var(--faint);
  border-bottom: 1px solid var(--line);
  font-size: 8px;
}

.qa-run-meta span,
.qa-run-meta a { display: inline-flex; align-items: center; gap: 4px; }
.qa-run-meta a { margin-left: auto; color: #aaa0ff; }
.qa-judge-card { margin: 10px 12px 0; padding: 12px; display: grid; gap: 8px; border: 1px solid var(--line); border-radius: 9px; background: rgba(255, 255, 255, .018); }
.qa-judge-card.success { border-color: rgba(84, 216, 155, .22); background: var(--green-soft); }
.qa-judge-card.warning { border-color: rgba(241, 184, 91, .24); background: var(--amber-soft); }
.qa-judge-card.danger { border-color: rgba(255, 112, 125, .24); background: var(--red-soft); }
.qa-judge-card h4 { margin-top: 2px; color: var(--text-soft); font-size: 11px; }
.qa-judge-card p,
.qa-judge-card li { color: var(--muted); font-size: 9px; line-height: 1.5; }
.qa-judge-card ul { margin: 0; padding-left: 17px; }
.qa-judge-card ul.failed li { color: #ffb1b8; }
.qa-evidence > .qa-batch-error { margin: 10px 12px 0; }
.qa-evidence-section { padding: 13px; border-bottom: 1px solid var(--line); }
.qa-evidence-section > .qa-section-heading { margin-bottom: 9px; }
.qa-check-list,
.qa-tool-list { display: grid; gap: 6px; }
.qa-check {
  min-height: 42px;
  padding: 8px;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  align-items: flex-start;
  gap: 7px;
  border: 1px solid var(--line);
  border-radius: 7px;
}

.qa-check > span { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 6px; }
.qa-check.passed > span { color: var(--green); background: var(--green-soft); }
.qa-check.failed { border-color: rgba(255, 112, 125, .18); background: rgba(255, 112, 125, .025); }
.qa-check.failed > span { color: var(--red); background: var(--red-soft); }
.qa-check > div { min-width: 0; display: grid; gap: 3px; }
.qa-check strong { color: var(--text-soft); font: 9px "SFMono-Regular", Consolas, monospace; overflow-wrap: anywhere; }
.qa-check p { color: var(--muted); font-size: 9px; line-height: 1.45; }
.qa-check em { padding: 2px 4px; color: #ff969f; border: 1px solid rgba(255, 112, 125, .2); border-radius: 4px; font-size: 7px; font-style: normal; }

.qa-transcript {
  max-height: 310px;
  padding: 10px;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #0b0d11;
}

.qa-transcript article { max-width: 88%; margin-bottom: 10px; }
.qa-transcript article:last-child { margin-bottom: 0; }
.qa-transcript article.agent { margin-right: auto; }
.qa-transcript article.user { margin-left: auto; }
.qa-transcript article > span { display: block; margin: 0 3px 3px; color: var(--faint); font-size: 7px; text-transform: uppercase; letter-spacing: .08em; }
.qa-transcript article.user > span { text-align: right; }
.qa-transcript article p { padding: 8px 9px; color: var(--text-soft); border: 1px solid var(--line); border-radius: 4px 9px 9px; background: var(--surface-2); font-size: 9px; line-height: 1.5; white-space: pre-wrap; }
.qa-transcript article.user p { color: #ded9ff; border-color: rgba(139, 124, 255, .17); border-radius: 9px 4px 9px 9px; background: var(--accent-soft); }
.qa-transcript article.tool { max-width: 100%; margin: 13px 0; }
.qa-transcript article.tool > span { text-align: center; }
.qa-transcript-tool-card {
  padding: 8px 9px;
  display: grid;
  gap: 7px;
  border: 1px solid rgba(139, 124, 255, .2);
  border-radius: 8px;
  background: rgba(139, 124, 255, .055);
}
.qa-transcript-tool-heading { display: grid; grid-template-columns: 22px minmax(0, 1fr); align-items: center; gap: 7px; }
.qa-transcript-tool-heading > i { width: 22px; height: 22px; display: grid; place-items: center; color: var(--accent-2); border-radius: 6px; background: var(--accent-soft); }
.qa-transcript-tool-heading > span { min-width: 0; display: grid; gap: 2px; }
.qa-transcript-tool-heading strong { color: var(--text); font: 9px "SFMono-Regular", Consolas, monospace; }
.qa-transcript-tool-heading small { color: var(--muted); font-size: 8px; }
.qa-transcript-tool-card > code { color: #c7c0ff; font: 8px/1.45 "SFMono-Regular", Consolas, monospace; overflow-wrap: anywhere; }
.qa-transcript-tool-card > details { border-top: 1px solid rgba(139, 124, 255, .14); padding-top: 6px; }
.qa-transcript-tool-card > details > summary { color: var(--faint); font-size: 8px; list-style: none; cursor: pointer; }
.qa-transcript-tool-card > details > summary svg { margin-left: 3px; vertical-align: -2px; }
.qa-transcript-tool-card > details[open] > summary svg { transform: rotate(180deg); }
.qa-transcript-tool-card > details > div { margin-top: 7px; display: grid; gap: 6px; }
.qa-transcript-tool-card > details > div > div { display: grid; gap: 3px; }
.qa-transcript-tool-card > details span { color: var(--faint); font-size: 8px; }
.qa-transcript-tool-card > details code { padding: 6px; color: #aeb0ba; background: #090b0f; font: 8px/1.45 "SFMono-Regular", Consolas, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
.qa-transcript article.tool.completed .qa-transcript-tool-card { border-color: rgba(84, 216, 155, .2); background: rgba(84, 216, 155, .04); }
.qa-transcript article.tool.failed .qa-transcript-tool-card,
.qa-transcript article.tool.blocked .qa-transcript-tool-card { border-color: rgba(255, 112, 125, .2); background: rgba(255, 112, 125, .04); }
.qa-transcript article.tool.fallback .qa-transcript-tool-card { border-color: rgba(241, 184, 91, .22); background: rgba(241, 184, 91, .045); }

.qa-tool-evidence { overflow: hidden; border: 1px solid var(--line); border-radius: 7px; }
.qa-tool-evidence summary { min-height: 42px; padding: 7px 9px; display: grid; grid-template-columns: 18px minmax(0, 1fr) 14px; align-items: center; gap: 7px; list-style: none; }
.qa-tool-evidence summary::-webkit-details-marker { display: none; }
.qa-tool-evidence summary > span { min-width: 0; display: grid; gap: 2px; }
.qa-tool-evidence summary strong { color: var(--text-soft); font-size: 9px; }
.qa-tool-evidence summary small { color: var(--faint); font-size: 8px; }
.qa-tool-evidence[open] summary { border-bottom: 1px solid var(--line); background: rgba(255, 255, 255, .014); }
.qa-tool-evidence[open] summary > svg:last-child { transform: rotate(180deg); }
.qa-tool-evidence > div { padding: 9px; display: grid; gap: 7px; }
.qa-tool-evidence p { min-width: 0; display: grid; gap: 4px; color: var(--muted); font-size: 8px; }
.qa-tool-evidence p strong { color: var(--text-soft); }
.qa-tool-evidence code,
.qa-tool-evidence pre,
.qa-raw-evidence pre { margin: 0; color: #aeb0ba; font: 8px/1.5 "SFMono-Regular", Consolas, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }

.qa-recording-card {
  min-height: 66px;
  padding: 10px 13px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--line);
}

.qa-recording-meta { min-width: 0; display: flex; align-items: center; gap: 8px; }
.qa-recording-meta > span:last-child { min-width: 0; display: grid; gap: 2px; }
.qa-recording-card strong { color: var(--text-soft); font-size: 9px; }
.qa-recording-card small { color: var(--faint); font-size: 8px; }
.qa-recording-card .recording-actions { width: min(465px, 72%); }
.qa-recording-card audio { height: 30px; color-scheme: dark; }

.qa-metrics-row {
  padding: 11px 13px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
  gap: 8px;
  border-bottom: 1px solid var(--line);
}

.qa-metrics-row > span { min-width: 0; display: grid; gap: 3px; }
.qa-metrics-row small { color: var(--faint); font-size: 7px; }
.qa-metrics-row strong { color: var(--text-soft); font-size: 11px; font-variant-numeric: tabular-nums; }
.qa-raw-evidence summary { min-height: 38px; padding: 0 13px; display: flex; align-items: center; justify-content: space-between; color: var(--muted); font-size: 9px; list-style: none; }
.qa-raw-evidence summary::-webkit-details-marker { display: none; }
.qa-raw-evidence[open] summary { border-bottom: 1px solid var(--line); }
.qa-raw-evidence[open] summary svg { transform: rotate(180deg); }
.qa-raw-evidence pre { max-height: 300px; padding: 11px 13px; overflow: auto; background: #0b0d11; }
.qa-raw-evidence [data-qa-raw-container] { padding: 10px 13px; display: flex; align-items: center; gap: 9px; }
.qa-raw-evidence [data-qa-raw-container].loaded { padding: 0; display: block; }
.qa-raw-evidence [data-qa-raw-container] > small { color: var(--faint); font-size: 8px; }

/* Calls journal */
.calls-kpis {
  grid-template-columns: repeat(5, minmax(140px, 1fr));
}
.calls-kpis .kpi-card { min-height: 112px; }
.calls-kpis .kpi-card > strong { font-size: 25px; }
.calls-search-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  padding: 16px;
  align-items: end;
}
.calls-search-grid > *, .calls-search-grid .field { min-width: 0; }
.calls-search-grid input, .calls-search-grid select { width: 100%; min-width: 0; max-width: 100%; }
.calls-search-grid .field > span { font-size: 10px; }
.calls-search-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.calls-search-note { margin: 0; padding: 10px 16px; color: var(--muted); font-size: 11px; line-height: 1.5; overflow-wrap: anywhere; }
.calls-search-note.warning { color: var(--amber); background: rgba(217, 161, 53, .07); }
.calls-search-note[hidden] { display: none; }
.calls-advanced { min-width: 0; border-top: 1px solid var(--line); }
.calls-advanced > summary { padding: 12px 16px; color: var(--text-soft); font-size: 11px; cursor: pointer; }
.calls-advanced .calls-filter-details { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: end; }
.calls-advanced .calls-filter-details > label { min-width: 0; }
.calls-advanced .calls-filter-details input, .calls-advanced .calls-filter-details select,
.calls-advanced .calls-filter-details .score-filter input { width: 100%; min-width: 0; }
.calls-advanced .calls-filter-details .attention-filter { grid-column: span 2; }
.calls-advanced .calls-filter-details .attention-filter input { width: 16px; min-width: 16px; }
.calls-results-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 16px; border-top: 1px solid var(--line); color: var(--muted); font-size: 11px; }
.call-result-cell, .call-context-cell, .call-duration-cell { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
.call-result-cell { min-width: 170px; max-width: 245px; }
.call-result-cell > .badge { white-space: normal; line-height: 1.4; }
.call-result-cell small, .call-context-cell small, .call-duration-cell small { color: var(--muted); font-size: 10px; line-height: 1.4; }
.call-context-cell { min-width: 130px; max-width: 220px; overflow-wrap: anywhere; }
.call-context-cell > a { white-space: normal; }
.call-context-history { color: var(--accent); font-size: 10px; }
.call-duration-cell { min-width: 115px; max-width: 165px; }
.call-duration-cell > strong { font-weight: 500; white-space: normal; }
.call-outcome-facts { margin-top: 14px; }
.call-outcome-facts + .text-link { margin-top: 10px; }
@media (max-width: 1100px) {
  .calls-search-grid, .calls-advanced .calls-filter-details { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .calls-search-grid, .calls-advanced .calls-filter-details { grid-template-columns: minmax(0, 1fr); }
  .calls-advanced .calls-filter-details .attention-filter { grid-column: auto; }
  .calls-search-actions { justify-content: stretch; }
  .calls-search-actions > button { flex: 1 1 auto; }
  .calls-results-heading { align-items: flex-start; }
}

.filters {
  min-height: 61px;
  padding: 11px 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid var(--line);
}
.filters label { flex: 0 0 auto; }
.filters select { width: auto; min-width: 125px; height: 34px; color: var(--text-soft); background-color: #0d0f13; }
.search-field {
  position: relative;
  width: min(310px, 32vw);
  flex: 0 1 310px !important;
}
.search-field .icon {
  position: absolute;
  z-index: 1;
  left: 10px;
  top: 9px;
  color: var(--faint);
}
.search-field input { height: 34px; padding-left: 33px; }
.filter-count {
  margin-left: auto;
  color: var(--faint);
  font-size: 10px;
  white-space: nowrap;
}

.calls-filter-details {
  min-height: 66px;
  padding: 10px 14px 12px;
  display: flex;
  align-items: flex-end;
  gap: 8px;
  border-bottom: 1px solid var(--line);
  background: rgba(8, 10, 14, .35);
}
.calls-filter-details > label { display: grid; gap: 5px; color: var(--faint); font-size: 9px; }
.calls-filter-details input,
.calls-filter-details select { height: 32px; min-width: 118px; color: var(--text-soft); background-color: #0d0f13; font-size: 10px; }
.calls-filter-details input[type="datetime-local"] { min-width: 172px; }
.calls-filter-details .score-filter input { width: 70px; min-width: 70px; }
.calls-filter-details .attention-filter {
  height: 32px;
  padding: 0 10px;
  display: flex;
  grid-template-columns: none;
  align-items: center;
  gap: 7px;
  color: var(--text-soft);
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  white-space: nowrap;
}
.calls-filter-details .attention-filter input { width: 16px; min-width: 16px; height: 16px; flex-basis: 16px; }
.calls-filter-actions { margin-left: auto; display: flex; gap: 7px; }
.calls-loading { min-height: 180px; display: flex; align-items: center; justify-content: center; gap: 9px; color: var(--muted); font-size: 11px; }
.calls-pagination { min-height: 52px; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px; padding: 8px; border-top: 1px solid var(--line); color: var(--muted); font-size: 11px; }
.calls-pagination:has(#callsPrevious[hidden]):has(#callsMore[hidden]) { display: none; }

.calls-table { min-width: var(--calls-min-width, 920px); table-layout: fixed; }
.calls-table th, .calls-table td { padding-left: 8px; padding-right: 8px; overflow-wrap: anywhere; }
.calls-table .call-result-cell, .calls-table .call-context-cell, .calls-table .call-duration-cell { min-width: 0; max-width: 100%; }
.calls-table .date-cell strong { white-space: normal; }
.calls-table th:last-child, .calls-table td:last-child { padding-left: 0; padding-right: 0; }
.calls-table .agent-name-cell { white-space: normal; }
.call-signal { display: block; min-width: 0; }
.call-signal .badge { max-width: 100%; white-space: normal; line-height: 1.45; text-align: left; }
.call-signal-explanation { display: block; margin-top: 6px; color: var(--muted); font-size: 11px; line-height: 1.5; }
.calls-primary-filters { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.calls-quick-filters { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 16px 14px; }
#callFilters > .calls-search-actions { padding: 12px 16px; }
.calls-table-actions, .call-columns-presets { display: flex; flex-wrap: wrap; gap: 8px; }
.modal.call-columns-modal { width: min(560px, 94vw); }
.call-columns-list { max-height: 48vh; overflow-y: auto; margin: 12px 0; border-top: 1px solid var(--line); }
.call-column-option { display: flex; align-items: center; gap: 6px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.call-column-option > label { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; font-size: 12px; }
.call-column-option input { width: 16px; height: 16px; flex-shrink: 0; }
.call-column-option > button { min-width: 32px; }
@media (max-width: 1100px) { .calls-primary-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .calls-primary-filters { grid-template-columns: minmax(0, 1fr); } }
.calls-table th:first-child,
.calls-table td:first-child { padding-left: 18px; }
.date-cell strong { color: var(--text-soft); font-size: 11px; font-weight: 560; white-space: nowrap; }
.agent-name-cell { max-width: 230px; color: var(--text-soft); font-size: 11px; }
.latency-pair { min-width: 85px; display: grid; gap: 3px; font-variant-numeric: tabular-nums; }
.latency-pair strong { font-size: 11px; font-weight: 610; }
.latency-pair small { font-size: 9px; }
.recording-state {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--faint);
  font-size: 10px;
}
.recording-state.ready { color: #71d8aa; }
.call-quality { min-width: 118px; display: flex; align-items: center; gap: 6px; }
.model-cost-cell { min-width: 145px; display: grid; gap: 3px; }
.model-cost-cell strong { color: var(--text-soft); font-size: 11px; font-weight: 670; font-variant-numeric: tabular-nums; white-space: nowrap; }
.model-cost-cell small { max-width: 170px; color: var(--faint); font-size: 8px; line-height: 1.35; }
.model-cost-cell.incomplete strong { color: var(--amber); }
.model-cost-cell.empty { color: var(--faint); font-size: 10px; }
.qa-score {
  min-width: 43px;
  color: var(--text-soft);
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.qa-score small { color: var(--faint); font-size: 8px; font-weight: 500; }
.qa-score.grade-green { color: var(--green); }
.qa-score.grade-yellow { color: var(--amber); }
.qa-score.grade-red { color: var(--red); }
.qa-score.empty { color: var(--faint); }
.row-open { width: 28px; height: 28px; display: grid; place-items: center; color: var(--faint); border-radius: 7px; }
.row-open:hover { color: var(--text); background: var(--surface-3); }

/* Call detail */
.call-page { max-width: 1440px; padding-top: 23px; }
.call-header { min-height: 48px; margin-bottom: 18px; align-items: center; }
.call-duration {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.call-detail-grid {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 350px);
  gap: 18px;
  align-items: start;
}
.model-cost-card { padding: 15px 16px; }
.model-cost-total { margin-top: 10px; padding-bottom: 11px; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--line); }
.model-cost-total span { color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .06em; }
.model-cost-total strong { color: var(--text); font-size: 21px; font-weight: 720; font-variant-numeric: tabular-nums; }
.model-cost-lines { display: grid; }
.model-cost-lines > div { min-height: 51px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--line); }
.model-cost-lines span { display: grid; gap: 3px; color: var(--text-soft); font-size: 10px; }
.model-cost-lines small { color: var(--faint); font-size: 8px; font-weight: 450; }
.model-cost-lines strong { color: var(--text-soft); font-size: 11px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.model-cost-card > p { margin: 11px 0 0; color: var(--faint); font-size: 9px; line-height: 1.5; }
.model-cost-card > .model-cost-warning { color: var(--amber); }
.conversation-pane { min-width: 0; overflow: hidden; }
.conversation-toolbar {
  min-height: 65px;
  padding: 13px 17px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid var(--line);
}
.conversation-toolbar h2 { margin-top: 4px; }
.conversation-toolbar > span { color: var(--faint); font-size: 10px; }

.audio-player {
  min-height: 55px;
  padding: 8px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, .014);
}
.audio-icon { width: 30px; height: 30px; border-radius: 8px; }
.audio-player audio {
  width: 100%;
  height: 32px;
  color-scheme: dark;
}

.recording-actions {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.recording-actions audio { min-width: 0; flex: 1 1 auto; }

.recording-speed,
.recording-dock-speed {
  min-width: 54px;
  display: grid;
  gap: 2px;
  flex: 0 0 auto;
}

.recording-speed > span,
.recording-dock-speed > span {
  color: var(--faint);
  font-size: 7px;
  line-height: 1;
  text-align: center;
}

.recording-speed select,
.recording-dock-speed select {
  min-width: 54px;
  height: 29px;
  padding: 0 19px 0 7px;
  color: var(--text-soft);
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background-color: rgba(255, 255, 255, .025);
  font-size: 9px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}

.recording-speed select:hover,
.recording-dock-speed select:hover { color: var(--text); border-color: var(--accent-line); background-color: var(--accent-soft); }

.recording-download {
  min-height: 30px;
  padding: 0 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  flex: 0 0 auto;
  color: var(--text-soft);
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: rgba(255, 255, 255, .025);
  font-size: 9px;
  font-weight: 620;
}

.recording-download:hover { color: var(--text); border-color: var(--accent-line); background: var(--accent-soft); }
.audio-player .recording-actions { width: 100%; }

.conversation-list {
  min-height: 480px;
  padding: 21px 20px 30px;
}
.conversation-item {
  max-width: 82%;
  margin-bottom: 19px;
}
.conversation-item.agent { margin-right: auto; }
.conversation-item.user { margin-left: auto; }
.conversation-item p {
  padding: 11px 13px;
  color: #d6d7dc;
  border: 1px solid var(--line);
  border-radius: 5px 12px 12px 12px;
  background: #16191f;
  font-size: 12px;
  line-height: 1.58;
  white-space: pre-wrap;
}
.conversation-item.user p {
  color: #e1ddfb;
  border-color: rgba(139, 124, 255, .18);
  border-radius: 12px 5px 12px 12px;
  background: rgba(139, 124, 255, .095);
}
.conversation-meta {
  min-height: 20px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--faint);
  font-size: 8px;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.conversation-item.user .conversation-meta { justify-content: flex-end; }
.turn-delay {
  margin-left: auto;
  padding: 2px 5px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  border: 1px solid currentColor;
  border-radius: 5px;
  opacity: .85;
  font-size: 8px;
  letter-spacing: 0;
  text-transform: none;
}
.conversation-item.user .turn-delay { margin-left: 0; }

.system-event {
  width: fit-content;
  max-width: 88%;
  min-height: 48px;
  margin: 7px auto 17px;
  padding: 8px 11px;
  display: flex;
  align-items: flex-start;
  gap: 9px;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 9px;
  background: rgba(255, 255, 255, .015);
}
.event-icon { width: 27px; height: 27px; border-radius: 7px; }
.system-event > div { display: grid; gap: 4px; }
.system-event strong { color: var(--text-soft); font-size: 10px; }
.system-event small,
.system-event p { color: var(--faint); font-size: 9px; line-height: 1.45; }
.error-event { border-color: rgba(255, 112, 125, .17); background: var(--red-soft); }
.error-event .event-icon { color: var(--red); border-color: rgba(255, 112, 125, .18); background: var(--red-soft); }
.tool-lifecycle-event { display: block; padding: 0; overflow: hidden; }
.tool-lifecycle-event > summary {
  min-width: 310px;
  padding: 8px 11px;
  display: grid;
  grid-template-columns: 27px minmax(0, 1fr) 14px;
  align-items: center;
  gap: 9px;
  list-style: none;
  cursor: pointer;
}
.tool-lifecycle-event > summary::-webkit-details-marker { display: none; }
.tool-lifecycle-event > summary > span:nth-child(2) { display: grid; gap: 3px; }
.tool-lifecycle-event > summary > svg:last-child { color: var(--faint); }
.tool-lifecycle-event[open] > summary > svg:last-child { transform: rotate(180deg); }
.tool-lifecycle-details { padding: 9px 11px; border-top: 1px solid var(--line); }
.tool-lifecycle-details > div { display: grid; gap: 4px; }
.tool-lifecycle-details span { color: var(--faint); font-size: 8px; }
.tool-lifecycle-details code { display: block; max-width: 620px; padding: 7px; overflow: auto; color: var(--text-soft); background: #0c0e13; font-size: 8px; white-space: pre-wrap; }
.tool-lifecycle-event.completed { border-color: rgba(84, 216, 155, .2); background: var(--green-soft); }
.tool-lifecycle-event.blocked,
.tool-lifecycle-event.failed { border-color: rgba(255, 112, 125, .2); background: var(--red-soft); }
.tool-lifecycle-event.fallback { border-color: rgba(241, 184, 91, .2); background: var(--amber-soft); }
.action-event.pending {
  border-color: rgba(241, 184, 91, .18);
  background: var(--amber-soft);
}
.action-event.pending .event-icon {
  color: var(--amber);
  border-color: rgba(241, 184, 91, .2);
  background: var(--amber-soft);
}
.action-event.blocked {
  border-color: rgba(255, 112, 125, .18);
  background: var(--red-soft);
}
.action-event.blocked .event-icon {
  color: var(--red);
  border-color: rgba(255, 112, 125, .2);
  background: var(--red-soft);
}
.action-event.verified {
  border-color: rgba(84, 216, 155, .18);
  background: var(--green-soft);
}
.action-event.verified .event-icon {
  color: var(--green);
  border-color: rgba(84, 216, 155, .2);
  background: var(--green-soft);
}
.conversation-empty { padding: 80px 20px; color: var(--muted); font-size: 11px; text-align: center; }

.insight-pane {
  display: grid;
  gap: 12px;
  position: sticky;
  top: 22px;
}
.call-qa-card {
  padding: 17px;
  overflow: hidden;
}
.call-qa-card.grade-green { border-color: rgba(84, 216, 155, .24); }
.call-qa-card.grade-yellow { border-color: rgba(241, 184, 91, .27); }
.call-qa-card.grade-red,
.call-qa-card.failed { border-color: rgba(255, 112, 125, .25); }
.call-qa-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.call-qa-heading h2 { margin-top: 4px; }
.call-qa-card > p {
  margin-top: 12px;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.55;
}
.call-qa-card > ul,
.call-qa-tips ul {
  margin: 9px 0 0;
  padding-left: 18px;
  color: var(--muted);
  font-size: 9px;
  line-height: 1.55;
}
.call-qa-request { margin-top: 13px; width: 100%; min-height: 34px; font-size: 9px; }
.call-qa-meta {
  margin-top: 13px;
  padding: 9px 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.call-qa-meta span { display: grid; gap: 3px; color: var(--faint); font-size: 8px; }
.call-qa-meta strong { color: var(--text-soft); font-size: 10px; }
.call-qa-summary { color: var(--text-soft) !important; }
.call-qa-findings { margin-top: 14px; }
.call-qa-findings h3,
.call-qa-tips h3 { margin: 0 0 7px; color: var(--muted); font-size: 9px; font-weight: 650; }
.call-qa-findings article {
  margin-top: 6px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, .015);
}
.call-qa-findings article p { color: var(--text-soft); font-size: 9px; line-height: 1.5; }
.call-qa-findings.critical article { border-color: rgba(255, 112, 125, .2); background: var(--red-soft); }
.call-qa-findings.concern article { border-color: rgba(241, 184, 91, .18); background: var(--amber-soft); }
.call-qa-findings.strength article { border-color: rgba(84, 216, 155, .16); background: var(--green-soft); }
.qa-evidence-refs { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 4px; }
.qa-evidence-refs button,
.qa-evidence-refs > span {
  min-height: 20px;
  padding: 0 6px;
  display: inline-flex;
  align-items: center;
  color: #aaa0ff;
  border: 1px solid rgba(139, 124, 255, .2);
  border-radius: 999px;
  background: rgba(139, 124, 255, .07);
  font-size: 8px;
}
.qa-evidence-refs button:hover { color: #d2ccff; border-color: var(--accent-line); }
.call-qa-dimensions { margin-top: 14px; display: grid; gap: 6px; }
.call-qa-dimensions article {
  padding: 8px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 3px 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.call-qa-dimensions article > span { color: var(--muted); font-size: 9px; }
.call-qa-dimensions article > strong { color: var(--text-soft); font-size: 9px; }
.call-qa-dimensions article > p { grid-column: 1 / -1; color: var(--faint); font-size: 8px; line-height: 1.45; }
.call-qa-dimensions article > .qa-evidence-refs { grid-column: 1 / -1; }
.call-qa-dimensions article.green { border-color: rgba(84, 216, 155, .14); }
.call-qa-dimensions article.yellow { border-color: rgba(241, 184, 91, .18); }
.call-qa-dimensions article.red { border-color: rgba(255, 112, 125, .2); }
.call-qa-tips { margin-top: 14px; }
.call-qa-footer {
  margin-top: 14px;
  padding-top: 11px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border-top: 1px solid var(--line);
}
.call-qa-footer small { color: var(--faint); font-size: 8px; overflow-wrap: anywhere; }
.call-qa-footer .call-qa-request { width: auto; margin-top: 0; flex: 0 0 auto; }
.qa-evidence-highlight { animation: qa-evidence-highlight 2.4s ease-out; }
@keyframes qa-evidence-highlight {
  0%, 35% { box-shadow: 0 0 0 2px var(--accent), 0 0 28px rgba(139, 124, 255, .3); }
  100% { box-shadow: none; }
}
.summary-card,
.call-metrics,
.detail-card { padding: 17px; }
.outcome-large { margin: 11px 0 9px; }
.summary-card > p { color: var(--muted); font-size: 10px; line-height: 1.5; }
.summary-card .error-copy { color: #ff929c; }

.call-metrics .panel-heading { margin-bottom: 14px; }
.metric-primary {
  min-height: 78px;
  padding: 13px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: rgba(255, 255, 255, .015);
}
.metric-primary span { color: var(--faint); font-size: 9px; text-transform: uppercase; }
.metric-primary strong { color: currentColor; font-size: 25px; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.metric-lines {
  margin-top: 8px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.metric-lines div {
  padding: 9px 10px;
  display: grid;
  gap: 5px;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.metric-lines span { color: var(--faint); font-size: 9px; }
.metric-lines strong { font-size: 11px; font-variant-numeric: tabular-nums; }

.detail-card .section-kicker { margin-bottom: 10px; }
.detail-list { margin: 0; }
.detail-list > div {
  min-height: 35px;
  padding: 8px 0;
  display: grid;
  grid-template-columns: minmax(85px, .75fr) minmax(0, 1.25fr);
  gap: 12px;
  border-top: 1px solid var(--line);
}
.detail-list > div:first-child { border-top: 0; }
.detail-list dt { color: var(--faint); font-size: 9px; }
.detail-list dd {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
  color: var(--text-soft);
  font-size: 10px;
  text-align: right;
}

.diagnostics { overflow: hidden; }
.diagnostics > summary {
  min-height: 44px;
  padding: 0 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--muted);
  list-style: none;
  font-size: 10px;
}
.diagnostics > summary::-webkit-details-marker { display: none; }
.diagnostics > summary span { display: flex; align-items: center; gap: 7px; }
.diagnostics .detail-list { padding: 0 14px 10px; border-top: 1px solid var(--line); }

/* Global persisted-recording controls, modal, toast, loading */
.recording-dock {
  position: fixed;
  z-index: 90;
  right: 20px;
  bottom: 20px;
  width: min(680px, calc(100vw - 40px));
  min-height: 82px;
  padding: 12px;
  display: grid;
  grid-template-columns: 40px minmax(150px, 1fr) auto;
  align-items: center;
  gap: 11px;
  color: var(--text);
  border: 1px solid rgba(139, 124, 255, .42);
  border-radius: 14px;
  background: rgba(20, 23, 29, .96);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .52), 0 0 0 1px rgba(139, 124, 255, .06) inset;
  backdrop-filter: blur(18px);
}

.recording-dock[hidden] { display: none; }
.recording-dock-art { width: 40px; height: 40px; display: grid; place-items: center; color: #aca2ff; border: 1px solid var(--accent-line); border-radius: 11px; background: var(--accent-soft); }
.recording-dock-main { min-width: 0; display: grid; gap: 9px; }
.recording-dock-heading { min-width: 0; display: grid; gap: 2px; }
.recording-dock-heading span { color: var(--faint); font-size: 8px; letter-spacing: .11em; text-transform: uppercase; }
.recording-dock-heading strong { overflow: hidden; color: var(--text-soft); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.recording-dock-progress { display: grid; grid-template-columns: 30px minmax(70px, 1fr) 30px; align-items: center; gap: 7px; color: var(--faint); font-size: 8px; font-variant-numeric: tabular-nums; }
.recording-dock-progress input { width: 100%; height: 3px; margin: 0; accent-color: var(--accent); cursor: pointer; }
.recording-dock-progress input:disabled { cursor: default; opacity: .45; }
.recording-dock-actions { display: flex; align-items: center; gap: 6px; }
.recording-dock-button {
  min-height: 34px;
  padding: 0 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  color: var(--text-soft);
  border: 1px solid var(--line-strong);
  border-radius: 9px;
  background: rgba(255, 255, 255, .025);
  font-size: 9px;
  font-weight: 620;
}
.recording-dock-button:hover { color: var(--text); border-color: var(--accent-line); background: var(--accent-soft); }
.recording-dock-button.stop:hover { color: #ffc1c6; border-color: rgba(255, 112, 125, .28); background: var(--red-soft); }
.recording-dock-speed select { height: 27px; }
.recording-dock-button.download span { display: none; }
body.recording-active .toast { bottom: 118px; }

html.modal-open,
body.modal-open {
  overflow: hidden;
  overscroll-behavior: none;
}

.modal-layer {
  --modal-gutter: 20px;
  position: fixed;
  z-index: 100;
  inset: 0;
  block-size: 100vh;
  block-size: 100dvh;
  min-width: 0;
  padding:
    max(var(--modal-gutter), env(safe-area-inset-top))
    max(var(--modal-gutter), env(safe-area-inset-right))
    max(var(--modal-gutter), env(safe-area-inset-bottom))
    max(var(--modal-gutter), env(safe-area-inset-left));
  display: grid;
  place-items: center;
  overflow: hidden;
  overscroll-behavior: contain;
  background: rgba(2, 3, 5, .7);
  backdrop-filter: blur(4px);
}
.modal {
  width: min(390px, 100%);
  min-width: 0;
  max-width: 100%;
  max-height: 100%;
  padding: 22px;
  overflow-x: hidden;
  overflow-y: auto;
  overflow-wrap: anywhere;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  background: #15171d;
  box-shadow: var(--shadow);
}
.modal-icon {
  width: 36px;
  height: 36px;
  margin-bottom: 14px;
  display: grid;
  place-items: center;
  color: #aca2ff;
  border: 1px solid var(--accent-line);
  border-radius: 10px;
  background: var(--accent-soft);
}
.modal-icon.danger { color: var(--red); border-color: rgba(255, 112, 125, .2); background: var(--red-soft); }
.modal h2 { font-size: 17px; }
.modal > p { margin: 8px 0 20px; color: var(--muted); font-size: 11px; line-height: 1.55; }
.modal-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; }
.modal-actions .button { min-width: 0; max-width: 100%; }
.release-override-modal { width: min(540px, 100%); }
.release-override-modal > p strong { color: var(--text); }
.release-override-modal .field { margin-bottom: 14px; }
.release-override-modal textarea { min-height: 78px; resize: vertical; }
.release-override-risk {
  margin: -4px 0 16px;
  padding: 11px 12px;
  display: grid;
  gap: 4px;
  color: #ffc1c6;
  border: 1px solid rgba(255, 112, 125, .25);
  border-radius: 9px;
  background: var(--red-soft);
  font-size: 11px;
  line-height: 1.5;
}
.release-override-risk strong { color: #ffd9dc; }
.release-override-risk span { color: #e4aeb3; }
.release-override-ack {
  margin-bottom: 18px;
  padding: 11px 12px;
  display: flex;
  align-items: flex-start;
  gap: 9px;
  color: var(--text-soft);
  border: 1px solid var(--line-strong);
  border-radius: 9px;
  background: rgba(255, 255, 255, .018);
  font-size: 11px;
  line-height: 1.5;
}
.release-override-ack input {
  width: 16px;
  min-width: 16px;
  height: 16px;
  margin: 2px 0 0;
  padding: 0;
  flex: 0 0 16px;
  border-radius: 4px;
  accent-color: var(--red);
}

.toast {
  position: fixed;
  z-index: 120;
  right: 20px;
  bottom: 20px;
  max-width: min(390px, calc(100vw - 40px));
  min-height: 42px;
  padding: 9px 12px;
  display: flex;
  align-items: center;
  gap: 9px;
  color: #bfead6;
  border: 1px solid rgba(84, 216, 155, .25);
  border-radius: 9px;
  background: #15221d;
  box-shadow: var(--shadow);
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity .18s, transform .18s;
  font-size: 11px;
}
.toast.show { opacity: 1; transform: translateY(0); }
.toast.error { color: #ffc1c6; border-color: rgba(255, 112, 125, .27); background: #27171a; }

.spinner {
  width: 14px;
  height: 14px;
  display: inline-block;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin .7s linear infinite;
}

.skeleton { pointer-events: none; }
.sk-line,
.sk-grid > div,
.sk-panel {
  border-radius: var(--radius);
  background: linear-gradient(100deg, #111319 20%, #171920 38%, #111319 55%);
  background-size: 200% 100%;
  animation: shimmer 1.4s linear infinite;
}
.sk-line { width: 260px; height: 38px; margin-bottom: 27px; }
.sk-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.sk-grid > div { height: 122px; }
.sk-panel { height: 380px; margin-top: 18px; }

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes shimmer { to { background-position-x: -200%; } }
@keyframes pulse { 50% { opacity: .35; transform: scale(.78); } }
@keyframes blink { 50% { opacity: 0; } }
@keyframes live-status-ring {
  0% { opacity: .8; transform: scale(.45); }
  80%, 100% { opacity: 0; transform: scale(1.25); }
}
@keyframes live-panel-glow {
  0%, 100% { box-shadow: 0 20px 60px rgba(0, 0, 0, .18), 0 0 0 rgba(84, 216, 155, 0); }
  50% { box-shadow: 0 20px 60px rgba(0, 0, 0, .18), 0 0 28px rgba(84, 216, 155, .11); }
}
@keyframes live-orb {
  0%, 100% { box-shadow: 0 0 0 0 rgba(84, 216, 155, .18); transform: scale(1); }
  50% { box-shadow: 0 0 0 10px rgba(84, 216, 155, 0); transform: scale(1.04); }
}
@keyframes preparing-orb {
  0%, 100% { box-shadow: 0 0 0 0 rgba(139, 124, 255, .14); transform: scale(1); }
  50% { box-shadow: 0 0 0 9px rgba(139, 124, 255, 0); transform: scale(1.035); }
}
@keyframes live-signal-wave {
  from { opacity: .48; transform: scaleY(.55); }
  to { opacity: 1; transform: scaleY(1); }
}

.settings-runtime-panel {
  margin-bottom: 14px;
  padding: 13px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.settings-runtime-state,
.settings-runtime-actions {
  display: flex;
  align-items: center;
  gap: 9px;
}
.settings-runtime-state { min-width: 0; }
.settings-runtime-state > div { min-width: 0; display: grid; gap: 3px; }
.settings-runtime-state h2 { font-size: 13px; }
.settings-runtime-state p { color: var(--faint); font-size: 10px; line-height: 1.4; }
.settings-runtime-actions { flex: 0 0 auto; flex-wrap: wrap; justify-content: flex-end; }
.settings-overview-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 14px;
  margin-bottom: 22px;
}
.settings-health-card,
.settings-attention-card,
.settings-table-card,
.settings-technical-panel,
.release-management-card { overflow: hidden; }
.settings-health-card > .panel-heading,
.settings-attention-card > .panel-heading {
  padding: 16px 18px 13px;
  border-bottom: 1px solid var(--line);
}
.settings-health-list { display: grid; }
.settings-health-list > div {
  min-height: 58px;
  padding: 9px 16px;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  border-top: 1px solid var(--line);
}
.settings-health-list > div:first-child { border-top: 0; }
.settings-health-list > div > span:nth-child(2) { min-width: 0; display: grid; gap: 3px; }
.settings-health-list strong { color: var(--text-soft); font-size: 11px; font-weight: 580; }
.settings-health-list small { overflow: hidden; color: var(--faint); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.settings-health-icon {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  color: #aaa0ff;
  border: 1px solid rgba(139, 124, 255, .14);
  border-radius: 8px;
  background: rgba(139, 124, 255, .07);
}
.settings-kv { margin: 0; }
.settings-kv > div {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
}
.settings-kv > div:last-child { border-bottom: 0; }
.settings-kv dt { color: var(--muted); }
.settings-kv dd { margin: 0; color: var(--text); text-align: right; }
.settings-blockers { display: grid; gap: 9px; }
.settings-attention-card .settings-blockers {
  max-height: 300px;
  padding: 12px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
}
.settings-blocker {
  display: flex;
  gap: 11px;
  padding: 10px 11px;
  border: 1px solid rgba(245, 182, 77, .3);
  border-radius: 9px;
  background: rgba(245, 182, 77, .06);
}
.settings-blocker > span { color: #f5b64d; }
.settings-blocker strong { color: var(--text-soft); font-size: 11px; font-weight: 570; }
.settings-blocker p { margin: 4px 0 0; color: var(--faint); font-size: 9px; line-height: 1.45; }
.settings-ready-state {
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  color: var(--green);
}
.settings-ready-state > span { display: grid; gap: 3px; }
.settings-ready-state strong { color: var(--text-soft); font-size: 11px; }
.settings-ready-state small { color: var(--faint); font-size: 9px; }
.settings-section-heading {
  margin: 0 0 11px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
}
.settings-section-heading .section-kicker { margin-bottom: 4px; }
.settings-section-heading h2 { font-size: 15px; }
.settings-section-heading p { margin-top: 4px; color: var(--muted); font-size: 10px; }
.settings-table-card td small { display: block; margin-top: 4px; color: var(--muted); }
.settings-table-card { margin-bottom: 12px; }
.settings-empty-state { min-height: 220px; }
.telephony-connection-list { display: grid; gap: 12px; padding: 14px; }
.telephony-connection-card { padding: 14px; border: 1px solid var(--line); border-radius: 10px; background: rgba(255, 255, 255, .012); }
.telephony-connection-card > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.telephony-connection-card > header strong,
.telephony-connection-card > header small { display: block; }
.telephony-connection-card > header strong { color: var(--text-soft); font-size: 12px; }
.telephony-connection-card > header small { margin-top: 4px; color: var(--faint); font-size: 9px; }
.telephony-facts { display: flex; flex-wrap: wrap; gap: 7px 18px; margin: 12px 0; color: var(--muted); font-size: 10px; }
.telephony-facts b { color: var(--text); font-weight: 600; }
.telephony-actions { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 12px; }
.telephony-preflight-blockers {
  margin: 0 0 12px;
  padding: 10px 11px;
  color: var(--muted);
  border: 1px solid rgba(245, 182, 77, .28);
  border-radius: 9px;
  background: rgba(245, 182, 77, .055);
}
.telephony-preflight-blockers > strong {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #f3c06d;
  font-size: 10px;
}
.telephony-preflight-blockers ul { margin: 8px 0 0; padding: 0; display: grid; gap: 7px; list-style: none; }
.telephony-preflight-blockers li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 10px; font-size: 9px; line-height: 1.45; }
.telephony-preflight-blockers code { color: var(--faint); font-size: 8px; overflow-wrap: anywhere; }
.trunk-health { min-width: 190px; display: grid; gap: 4px; color: var(--faint); }
.trunk-health-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.trunk-health-row small { margin: 0 !important; color: var(--faint) !important; }
.trunk-health-row b { font-size: 9px; font-weight: 650; }
.trunk-health-row b.success { color: var(--green); }
.trunk-health-row b.warning { color: var(--amber); }
.trunk-health-row b.danger { color: var(--red); }
.trunk-health-summary { font-size: 9px; line-height: 1.4; }
.trunk-health-summary.success { color: var(--green); }
.trunk-health-summary.warning { color: var(--amber); }
.trunk-health-summary.danger { color: var(--red); }
.trunk-health-missing b { color: var(--amber); font-size: 9px; }
.trunk-health-missing small { max-width: 220px; line-height: 1.4; }
.settings-technical-panel { margin-bottom: 12px; }
.settings-technical-panel > summary {
  min-height: 54px;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--muted);
  list-style: none;
}
.settings-technical-panel > summary::-webkit-details-marker { display: none; }
.settings-technical-panel > summary > span:first-child { display: grid; gap: 3px; }
.settings-technical-panel > summary strong { color: var(--text-soft); font-size: 12px; }
.settings-technical-panel[open] > summary > span:last-child { transform: rotate(90deg); }
.settings-technical-content { padding: 0 16px 15px; border-top: 1px solid var(--line); }
.settings-technical-content .settings-kv { max-width: 760px; }
.settings-technical-content > p { margin-top: 12px; color: var(--faint); font-size: 9px; line-height: 1.55; }

/* Company-scoped integrations and webhook self-service */
.company-settings-panel { margin-bottom: 22px; overflow: hidden; }
.company-settings-summary {
  min-height: 58px;
  padding: 11px 16px;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid var(--line);
}
.company-settings-summary > svg { color: #aaa0ff; }
.company-settings-summary > span:nth-child(2) { display: grid; gap: 3px; }
.company-settings-summary strong { color: var(--text-soft); font-size: 11px; }
.company-settings-summary small { color: var(--faint); font-size: 9px; }
.company-card-grid {
  padding: 14px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.company-card,
.integration-card,
.webhook-endpoint-card {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255, 255, 255, .012);
}
.company-card { padding: 13px; }
.company-card > header,
.integration-card > header,
.webhook-endpoint-card > header,
.integration-manager-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}
.company-card > header > span:first-child,
.integration-card > header > span:first-child,
.webhook-endpoint-card > header > span:first-child { min-width: 0; display: grid; gap: 4px; }
.company-card header strong,
.integration-card header strong,
.webhook-endpoint-card header strong { color: var(--text-soft); font-size: 11px; }
.company-card header small,
.integration-card header small,
.webhook-endpoint-card header small { overflow-wrap: anywhere; color: var(--faint); font-size: 8px; line-height: 1.45; }
.company-card-facts { margin: 12px 0; display: flex; flex-wrap: wrap; gap: 7px 14px; color: var(--muted); font-size: 9px; }
.company-card-actions,
.webhook-endpoint-actions { display: flex; flex-wrap: wrap; gap: 7px; }
.company-destinations-modal { width: min(780px, 100%); }
.company-destinations-summary {
  margin: 13px 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 14px;
  color: var(--muted);
  font-size: 9px;
}
.company-destination-form {
  margin-bottom: 14px;
  display: grid;
  grid-template-columns: minmax(150px, .8fr) minmax(180px, 1fr) minmax(220px, 1.2fr) auto;
  align-items: end;
  gap: 10px;
}
.company-destination-form .button { margin-bottom: 1px; }
.shared-auth-warning,
.native-integration-note {
  margin: 12px 14px;
  padding: 10px 11px;
  display: flex;
  align-items: flex-start;
  gap: 9px;
  color: #f3c06d;
  border: 1px solid rgba(245, 182, 77, .25);
  border-radius: 9px;
  background: rgba(245, 182, 77, .055);
}
.shared-auth-warning > span,
.native-integration-note > span { display: grid; gap: 3px; }
.shared-auth-warning strong,
.native-integration-note strong { color: var(--text-soft); font-size: 10px; }
.shared-auth-warning small,
.native-integration-note small { color: var(--muted); font-size: 9px; line-height: 1.5; }
.native-integration-note { margin: 14px 0 0; color: var(--green); border-color: rgba(72, 207, 137, .22); background: rgba(72, 207, 137, .05); }
.integration-manager-modal {
  width: min(1120px, calc(100vw - 32px));
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
}
.integration-manager-header { margin-bottom: 10px; }
.integration-manager-header > div { min-width: 0; }
.integration-manager-header h2 { margin-top: 3px; }
.integration-manager-header p { max-width: 680px; margin-top: 6px; color: var(--muted); font-size: 10px; line-height: 1.5; }
.integration-manager-list { margin: 14px 0; display: grid; gap: 14px; }
.integration-card { padding: 14px; }
.integration-subsection { margin-top: 14px; overflow: hidden; border: 1px solid var(--line); border-radius: 9px; }
.integration-subsection > .panel-heading { padding: 11px 12px; border-bottom: 1px solid var(--line); }
.integration-subsection h3 { font-size: 11px; }
.integration-subsection .panel-heading p { margin-top: 3px; color: var(--faint); font-size: 9px; }
.integration-subsection .inline-empty { padding-block: 24px; font-size: 10px; }
.credential-table { min-width: 820px; }
.credential-table td:last-child { white-space: nowrap; }
.scope-chip {
  margin: 2px 3px 2px 0;
  padding: 3px 6px;
  display: inline-flex;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, .018);
  font-size: 8px;
  line-height: 1.2;
}
.webhook-endpoint-list { padding: 11px; display: grid; gap: 10px; }
.webhook-endpoint-card { padding: 12px; }
.webhook-state-detail { margin: 8px 0; color: var(--muted); font-size: 9px; line-height: 1.45; }
.webhook-endpoint-facts { display: flex; flex-wrap: wrap; gap: 6px 16px; color: var(--muted); font-size: 9px; }
.webhook-endpoint-facts b { color: var(--text-soft); }
.webhook-event-chips { margin: 8px 0; }
.delivery-history-modal { width: min(980px, calc(100vw - 32px)); }
.delivery-table { min-width: 820px; }
.delivery-table td small { display: block; margin-top: 4px; color: var(--faint); font-size: 8px; }
.integration-editor-modal { width: min(760px, calc(100vw - 32px)); }
.webhook-editor-modal { width: min(860px, calc(100vw - 32px)); }
.webhook-authorization-editor {
  margin: 16px 0;
  padding: 12px;
  display: grid;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 9px;
}
.webhook-authorization-editor legend { padding: 0 5px; color: var(--muted); font-size: 9px; }
.webhook-authorization-editor small { color: var(--faint); font-size: 9px; line-height: 1.5; overflow-wrap: anywhere; }
.webhook-authorization-editor [data-webhook-bearer-fields] { min-width: 0; display: grid; gap: 7px; }
.webhook-authorization-editor [data-webhook-bearer-fields][hidden] { display: none; }
.integration-check-grid,
.campaign-access-fieldset {
  margin: 16px 0;
  padding: 12px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 9px;
}
.integration-check-grid legend,
.campaign-access-fieldset legend { padding: 0 5px; color: var(--muted); font-size: 9px; }
.integration-check-grid > label,
.campaign-access-list > label,
.switch-row { min-width: 0; display: flex; align-items: flex-start; gap: 8px; color: var(--muted); }
.integration-check-grid input,
.campaign-access-list input,
.switch-row input { margin-top: 2px; accent-color: var(--accent); }
.integration-check-grid label span,
.campaign-access-list label span,
.switch-row span { min-width: 0; display: grid; gap: 2px; }
.integration-check-grid strong,
.campaign-access-list strong,
.switch-row strong { color: var(--text-soft); font-size: 9px; font-weight: 560; }
.integration-check-grid small,
.campaign-access-list small,
.switch-row small { color: var(--faint); font-size: 8px; line-height: 1.4; }
.campaign-access-fieldset { grid-template-columns: 1fr; }
.campaign-access-list { margin-top: 4px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.campaign-access-list[hidden] { display: none; }
.webhook-subscription-editor { margin-top: 14px; }
.webhook-subscription-editor [hidden] { display: none; }
.webhook-payload-editor { margin-top: 16px; }
.webhook-payload-editor-head {
  margin: 10px 0 6px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: var(--muted);
  font-size: 9px;
}
.webhook-payload-editor-head small { color: var(--faint); }
.webhook-payload-editor textarea { width: 100%; min-height: 260px; resize: vertical; }
.webhook-payload-editor textarea[readonly] { color: var(--muted); background: rgba(255, 255, 255, .012); cursor: text; }
.form-hint { margin: 6px 0 12px; color: var(--faint); font-size: 9px; line-height: 1.45; }
.secret-reveal-control { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 7px; }
.secret-reveal-control input { min-width: 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.integration-secret-modal { width: min(720px, calc(100vw - 32px)); }

/* Stable two-column workspaces from 1024 through 1280 */
@media (max-width: 1400px) {
  .filters,
  .calls-filter-details { flex-wrap: wrap; }
  .filter-count,
  .calls-filter-actions { margin-left: 0; }
  .lead-filter-form { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lead-search-field { grid-column: span 2; }
  .lead-filter-actions { grid-column: 1 / -1; justify-content: flex-end; }
}

@media (max-width: 1180px) {
  :root { --sidebar-width: 176px; }
  .sidebar { padding-inline: 10px; }
  .brand { padding-inline: 6px; }
  .side-nav a.active::before { left: -11px; }
  .page { padding-inline: 22px; }
  .studio { grid-template-columns: minmax(0, 1fr) 310px; gap: 14px; }
  .call-detail-grid { grid-template-columns: minmax(0, 1fr) 300px; gap: 14px; }
  .overview-grid { grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr); gap: 14px; }
  .kpi-grid { gap: 9px; }
  .kpi-card { padding: 15px; }
  .calls-kpis { grid-template-columns: repeat(5, minmax(116px, 1fr)); }
  .lead-intake-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lead-intake-form:nth-child(2) { border-right: 0; }
  .lead-intake-form:last-child { grid-column: 1 / -1; border-top: 1px solid var(--line); }
  .company-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1000px) {
  .qa-results-grid { grid-template-columns: 1fr; }
  .qa-case-result-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .qa-case-result:nth-child(2) { border-top: 0; }
  .qa-case-result:nth-child(even) { border-left: 1px solid var(--line); }
}

@media (max-width: 900px) {
  .studio,
  .call-detail-grid,
  .overview-grid,
  .tool-editor-grid { grid-template-columns: 1fr; }
  .tool-library-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .test-rail {
    position: relative;
    top: auto;
    width: 100%;
    height: 680px;
    min-height: 560px;
    max-height: 80vh;
  }
  .insight-pane { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .insight-pane .call-qa-card { grid-column: 1 / -1; }
  .insight-pane .diagnostics { grid-column: 1 / -1; }
  .kpi-grid,
  .calls-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .settings-overview-grid { grid-template-columns: 1fr; }
  .settings-runtime-panel { align-items: stretch; flex-direction: column; }
  .settings-runtime-actions { justify-content: flex-start; }
  .integration-manager-header { flex-direction: column; }
  .integration-manager-header > .button { align-self: flex-start; }
  .campaign-detail-grid,
  .campaign-tables-grid,
  .lead-detail-grid,
  .lead-work-grid { grid-template-columns: 1fr; }
  .lead-intake-grid { grid-template-columns: 1fr; }
  .lead-intake-form,
  .lead-intake-form:nth-child(2) { border-right: 0; border-bottom: 1px solid var(--line); }
  .lead-intake-form:last-child { grid-column: auto; border-top: 0; border-bottom: 0; }
  .release-publish-form { grid-template-columns: 1fr 1fr; }
  .release-publish-form .button { grid-column: 1 / -1; }
  .identity-fields { grid-template-columns: 1fr; }
  #prompt { min-height: 560px; height: 64vh; }
  .filters { align-items: stretch; }
  .search-field { width: 100%; flex-basis: 100% !important; }
  .calls-filter-actions { margin-left: 0; }
  .qa-layout { grid-template-columns: 270px minmax(0, 1fr); }
  .qa-control-section { padding-inline: 14px; }
  .qa-workspace { padding: 16px; }
}

@media (max-width: 700px) {
  :root { --sidebar-width: 0px; }
  body { padding-bottom: 72px; }
  .modal-layer { --modal-gutter: 12px; }
  .modal { padding: 16px; }
  .sidebar {
    inset: auto 0 0;
    width: 100%;
    height: 72px;
    padding: 7px 10px calc(7px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--line);
    border-right: 0;
  }
  .brand,
  .side-foot { display: none; }
  .side-nav {
    height: 100%;
    margin: 0;
    display: flex;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    gap: 5px;
  }
  .side-nav a {
    flex: 0 0 66px;
    height: 100%;
    padding: 4px 6px;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    font-size: 9px;
  }
  .side-nav a.active::before { display: none; }
  .page { min-height: calc(100vh - 72px); padding: 22px 16px 42px; }
  .page-header,
  .editor-header,
  .call-header { align-items: flex-start; flex-direction: column; }
  .editor-header,
  .call-header { gap: 13px; }
  .editor-title { width: 100%; flex-wrap: wrap; }
  .editor-title h1 { max-width: calc(100vw - 100px); }
  .header-actions { width: 100%; justify-content: flex-start; }
  .header-actions .button { flex: 1 1 auto; }
  .kpi-grid,
  .calls-kpis { grid-template-columns: 1fr 1fr; }
  .campaign-overview-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .campaign-overview-metrics > div:nth-child(3) { border-top: 1px solid var(--line); border-left: 0; }
  .campaign-overview-metrics > div:nth-child(4) { border-top: 1px solid var(--line); }
  .campaign-launch-checklist { grid-template-columns: 1fr; }
  .campaign-check-actions { align-items: stretch; flex-direction: column; }
  .campaign-check-actions .button { width: 100%; min-height: 44px; }
  .campaign-form-grid,
  .release-publish-form { grid-template-columns: 1fr; }
  .campaign-form-wide,
  .release-publish-form .button { grid-column: auto; }
  .lead-intake-settings { align-items: stretch; flex-direction: column; }
  .lead-intake-settings .field { flex-basis: auto; }
  .lead-import-state { padding-bottom: 0; }
  .lead-intake-form .field-grid { grid-template-columns: 1fr; }
  .lead-note-form { align-items: stretch; flex-direction: column; }
  .lead-filter-form,
  .lead-disposition-form { grid-template-columns: 1fr; }
  .lead-search-field { grid-column: auto; }
  .csv-preview-facts { grid-template-columns: 1fr; }
  .csv-preview-facts > div { border-right: 0; border-bottom: 1px solid var(--line); }
  .csv-preview-facts > div:last-child { border-bottom: 0; }
  .settings-runtime-state { align-items: flex-start; }
  .settings-runtime-state > .badge { display: none; }
  .settings-runtime-actions .button { flex: 1 1 auto; }
  .settings-section-heading { align-items: flex-start; flex-direction: column; }
  .settings-section-heading .button { width: 100%; }
  .settings-health-list > div { grid-template-columns: 30px minmax(0, 1fr); }
  .settings-health-list > div > .badge { grid-column: 2; justify-self: start; }
  .company-card-grid,
  .integration-check-grid,
  .campaign-access-list { grid-template-columns: 1fr; }
  .company-destination-form { grid-template-columns: 1fr; }
  .company-destination-form .button { width: 100%; }
  .company-settings-summary { grid-template-columns: 26px minmax(0, 1fr); }
  .company-settings-summary > .badge { grid-column: 2; justify-self: start; }
  .integration-manager-modal,
  .integration-editor-modal,
  .webhook-editor-modal,
  .delivery-history-modal,
  .integration-secret-modal { width: 100%; }
  .integration-manager-header > .button { width: 100%; }
  .secret-reveal-control { grid-template-columns: 1fr 1fr; }
  .secret-reveal-control input { grid-column: 1 / -1; }
  .webhook-endpoint-actions .button,
  .company-card-actions .button { flex: 1 1 auto; }
  .kpi-card { min-height: 108px; }
  .kpi-card > strong { font-size: 24px; }
  .quality-facts { grid-template-columns: 1fr; }
  .runtime-strip { align-items: flex-start; }
  .tool-library-grid { grid-template-columns: 1fr; }
  .runtime-strip .badge { display: none; }
  .test-rail { height: 620px; max-height: none; }
  .insight-pane { grid-template-columns: 1fr; }
  .insight-pane .call-qa-card,
  .insight-pane .diagnostics { grid-column: auto; }
  .conversation-item { max-width: 94%; }
  .filters select { min-width: calc(50vw - 30px); }
  .filter-count { width: 100%; }
  .calls-filter-details > label { flex: 1 1 calc(50% - 8px); }
  .calls-filter-details input,
  .calls-filter-details select,
  .calls-filter-details input[type="datetime-local"] { width: 100%; min-width: 0; }
  .calls-filter-details .score-filter { flex: 0 1 calc(50% - 8px); }
  .calls-filter-details .score-filter input { width: 100%; }
  .calls-filter-details .attention-filter { flex: 1 1 100%; }
  .calls-filter-actions { width: 100%; }
  .drawer { width: 100%; }
  #qaLayer .drawer { width: 100%; }
  #qaLayer .drawer-content { display: block; overflow-y: auto; }
  .qa-editor-guard { position: sticky; top: 0; z-index: 2; align-items: flex-start; flex-wrap: wrap; }
  .qa-editor-guard .button { width: 100%; margin-left: 26px; }
  .qa-layout { display: block; overflow: visible; }
  .qa-control-pane { overflow: visible; border-right: 0; border-bottom: 1px solid var(--line); }
  .qa-case-options { max-height: 230px; }
  .qa-workspace { overflow: visible; padding: 15px; }
  .qa-batch-header { flex-direction: column; gap: 11px; }
  .qa-batch-actions { width: 100%; justify-content: space-between; }
  .qa-evidence-header { align-items: flex-start; }
  .qa-evidence-actions { flex-wrap: wrap; }
  .qa-progress-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .qa-case-result-list { grid-template-columns: 1fr; }
  .qa-case-result:nth-child(2) { border-top: 1px solid var(--line); }
  .qa-case-result:nth-child(even) { border-left: 0; }
  .qa-recording-card { align-items: flex-start; flex-direction: column; }
  .qa-recording-card .recording-actions { width: 100%; }
  .recording-dock { right: 12px; bottom: calc(76px + env(safe-area-inset-bottom)); width: calc(100vw - 24px); grid-template-columns: 36px minmax(0, 1fr); }
  .recording-dock-art { width: 36px; height: 36px; }
  .recording-dock-actions { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .recording-dock-button { flex: 1 1 auto; }
  .recording-dock-speed { min-width: 0; }
  .recording-dock-speed select { width: 100%; min-width: 0; }
  .recording-dock-button.download span { display: inline; }
  body.recording-active .toast { bottom: calc(194px + env(safe-area-inset-bottom)); }
}

@media (max-width: 430px) {
  .kpi-grid,
  .calls-kpis { grid-template-columns: 1fr; }
  .kpi-card { min-height: 102px; }
  .field-grid { grid-template-columns: 1fr; }
  .modal-actions { flex-direction: column-reverse; }
  .modal-actions .button { width: 100%; }
}

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

/* Детектор ботов: карточка кампании, журнал звонков, карточка звонка */
.campaign-bot-detector-fact .badge { vertical-align: middle; }
.bot-detector-modal .bot-detector-layers { display: grid; gap: 8px; padding: 8px 0 0; border: 0; }
.bot-detector-modal .bot-detector-layers legend { font-size: 13px; color: var(--muted, #6b7686); }
.call-outcome-cell { display: inline-flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.bot-detector-badge { white-space: nowrap; }
.bot-detector-call-values { display: block; margin-top: 4px; color: var(--muted, #6b7686); }
.bot-detector-reason-list { margin: 8px 0 0; padding-left: 18px; font-size: 13px; line-height: 1.5; }

/* The product shell stays private until its session has been checked. */
.auth-pending body > :not(#authStatus) { display: none !important; }
.auth-status { position: fixed; inset: 45% 20px auto; text-align: center; color: var(--muted, #a3a5b6); }
.session-controls { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.session-controls > span { overflow: hidden; text-overflow: ellipsis; font-size: 12px; color: var(--muted, #a3a5b6); }
/* AI provider credentials: password fields are never populated from the server. */
.ai-providers-panel { padding: 24px; }
.ai-provider-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.ai-provider-card { min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.ai-provider-card .panel-heading { margin: 0; }
.ai-provider-card h3 { margin: 0; }
.ai-provider-uses { margin: 0; color: var(--muted); min-height: 42px; }
.ai-provider-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.ai-provider-result { font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
.ai-provider-result:empty { display: none; }
.ai-provider-note { margin: 24px 0 0; color: var(--muted); font-size: 13px; line-height: 1.6; }
.ai-provider-history { margin-top: 18px; }
.ai-provider-history summary { cursor: pointer; }
.ai-provider-history .table-scroll { overflow-x: auto; }
.ai-provider-settings-link { display: block; margin: 12px 0; font-size: 13px; }
@media (max-width: 720px) { .ai-provider-grid { grid-template-columns: minmax(0, 1fr); } .ai-providers-panel { padding: 16px; } .ai-provider-card + .ai-provider-card { padding-top: 24px; border-top: 1px solid var(--line); } }