/* Agents is the design reference. Keep Connect's layout and controls intact. */
:root {
  --font: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --ink: #262626;
  --border: #e5e7eb;
  --line: var(--border);
}
.topbar .breadcrumb { font-size: 18px; font-weight: 500; }
.topbar .breadcrumb small { font-size: 18px; color: #6b7280; }
.nav-item { color: #374151; }
.nav-item.active { background: #e8e8eb; color: #1f2937; }
.nav-item.active svg { color: #8b5cf6; }
.page-heading h1, .native-page-heading h1, .role-dashboard .rd-heading h1 {
  font-size: 24px;
  font-weight: 600;
  line-height: 32px;
  letter-spacing: normal;
}
.native-page-heading h1 { color: #111827; }
.page-heading h1, .role-dashboard .rd-heading h1 {
  display: inline-block;
  background-image: linear-gradient(to right, #08a2f4, #6675f6, #a855f7);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.native-panel-heading h2, .role-dashboard .rd-panel-heading h2 {
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
}

/* Internal workspaces share the Agents typography, controls and page rhythm.
   Keep canvas geometry, conversation panes and status colors local. */
:root {
  --connect-page-inset: 24px;
  --connect-section-gap: 24px;
  --connect-panel-inset: 20px;
  --connect-control-radius: 10px;
  --connect-heading-ink: #111827;
  --connect-body-ink: #374151;
  --connect-muted-ink: #6b7280;
  --connect-primary: #7f22fe;
  --connect-primary-hover: #7008e7;
  --workspace-section-gap: var(--connect-section-gap);
  --workspace-content-inset: var(--connect-panel-inset);
}
#main:not(.module-main),
#main .native-page,
#main .ci-workspace {
  padding: var(--connect-page-inset);
  background: #fff;
  color: var(--connect-body-ink);
}
#main .ci-workspace {
  --ci-border: var(--border);
  --ci-ink: var(--connect-body-ink);
  --ci-muted: var(--connect-muted-ink);
  --ci-brand: var(--connect-primary);
}
#main :is(.native-page-heading, .ci-heading, .rd-heading) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 40px;
}
#main .native-page-heading { margin: 0; }
#main :is(.ci-heading, .rd-heading) { margin: 0 0 24px; }
#main :is(.native-page-heading, .ci-heading, .rd-heading) > div {
  min-width: 0;
  max-width: 100%;
}
#main :is(.native-page-heading, .ci-heading) h1 {
  margin: 0;
  font-size: 24px;
  font-weight: 600;
  line-height: 32px;
  letter-spacing: normal;
  background: none;
  color: var(--connect-heading-ink);
  overflow-wrap: anywhere;
}
#main .ci-title-group { flex-wrap: wrap; }
#main :is(.native-page-heading, .ci-heading, .rd-heading) p {
  font-size: 14px;
  line-height: 20px;
  margin: 6px 0 0;
  color: var(--connect-muted-ink);
}
#main :is(.native-heading-actions, .ci-heading > .ci-actions, .rd-actions,
  .native-actions, .workspace-actions, .native-form-actions) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
#main :is(.native-panel, .native-stats, .native-live-strip, .rd-panel,
  .rd-metrics, .ci-layout, .integration-tile, .integration-detail, .dialer-panel) {
  border-color: var(--border);
  border-radius: 10px;
}
#main :is(.native-panel-heading, .rd-panel-heading) {
  padding: 16px var(--connect-panel-inset);
  gap: 12px;
  flex-wrap: wrap;
}
#main :is(.native-panel h2, .rd-panel-heading h2, .ci-thread-heading h2,
  .integration-hub h2, .integration-hub h3, .bc-report-heading h2) {
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  letter-spacing: normal;
  color: var(--connect-heading-ink);
}
#main .native-panel:has(> h2) { padding: var(--connect-panel-inset); }
#main .native-panel > h2 { margin: 0 0 12px; }
#main .native-panel > p { font-size: 14px; line-height: 22px; color: var(--connect-muted-ink); }
#main .native-panel.native-editor > .native-panel-heading { padding: 0 0 16px; }
#main :is(.native-panel-heading, .rd-panel-heading) p {
  font-size: 12px;
  line-height: 18px;
  margin-top: 4px;
  color: var(--connect-muted-ink);
}
/* Page and form actions use the same geometry; compact toolbar actions are 36px. */
#main :is(.button, .primary-button),
.native-dialog :is(.button, .primary-button) {
  min-height: 36px;
  padding: 7px 12px;
  border-radius: var(--connect-control-radius);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  gap: 8px;
}
#main .button:where(:not(.primary):not(.danger):not(.native-danger)),
.native-dialog .button:where(:not(.primary):not(.danger):not(.native-danger)) {
  border: 1px solid var(--border);
  background: #fff;
  color: #4b5563;
}
#main .button:where(:not(.primary):not(.danger):not(.native-danger)):hover,
.native-dialog .button:where(:not(.primary):not(.danger):not(.native-danger)):hover { background: #f9fafb; }
#main :is(.primary-button, .button.primary):not(.danger):not(.native-danger),
.native-dialog :is(.primary-button, .button.primary):not(.danger):not(.native-danger) {
  background: var(--connect-primary);
  color: #fff;
  border-color: transparent;
}
#main :is(.primary-button, .button.primary):not(.danger):not(.native-danger):hover,
.native-dialog :is(.primary-button, .button.primary):not(.danger):not(.native-danger):hover {
  background: var(--connect-primary-hover);
}
#main .rd-refresh { min-width: 36px; width: 36px; padding: 7px; }
#main :is(.native-form-actions, .native-dialog-footer) > :is(.button, .primary-button),
.native-dialog .native-form-actions > :is(.button, .primary-button) { min-height: 40px; }
#main .native-field, .native-dialog .native-field { font-size: 14px; line-height: 20px; }
#main .native-field :is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), select:not([multiple])),
.native-dialog .native-field :is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), select:not([multiple])) {
  min-height: 40px;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: var(--connect-control-radius);
  font-size: 14px;
  line-height: 20px;
  background: #fff;
  color: var(--connect-heading-ink);
}
#main .native-field textarea, .native-dialog .native-field textarea {
  padding: 10px 12px;
  border-color: var(--border);
  border-radius: var(--connect-control-radius);
  font-size: 14px;
  line-height: 22px;
}
#main :is(.native-field small, .native-help), .native-dialog .native-field small {
  font-size: 12px;
  line-height: 18px;
  color: var(--connect-muted-ink);
}
#main .query-filters .native-field :is(input, select),
#main .native-date-range :is(input, select) { min-height: 36px; padding-block: 7px; }
#main :is(.table-search, .number-toolbar label, .rd-toolbar .search-field) {
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: var(--connect-control-radius);
  background: #fff;
}
#main :is(.table-search, .number-toolbar label, .rd-toolbar .search-field) input {
  min-height: 34px;
  font-size: 14px;
  line-height: 20px;
  color: var(--connect-heading-ink);
  background: transparent;
}
#main :is(.native-tabs, .section-navigation, .saas-context-nav) {
  border-color: var(--border);
  gap: 20px;
}
#main :is(.native-tabs, .section-navigation, .saas-context-nav) > :is(a, button) {
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
}
#main .section-navigation { padding-inline: var(--connect-page-inset); }
#main :is(.native-table, .rd-calls table) { font-size: 14px; line-height: 20px; }
#main :is(.native-table, .rd-calls table) th {
  background: #f9fafb;
  border-color: var(--border);
  color: var(--connect-heading-ink);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
}
#main .native-table th button { padding: 10px 12px; }
#main .native-table td {
  padding: 12px;
  border-color: var(--border);
  color: var(--connect-body-ink);
  font-size: 14px;
  line-height: 20px;
}
#main .native-table tbody tr:hover { background: #f9fafb; }
#main :is(.native-chip, .badge) { font-size: 12px; line-height: 16px; border-radius: 6px; }
#main :is(.native-pagination, .rd-panel-footer) { font-size: 12px; color: var(--connect-muted-ink); }
#main .native-stat > strong { font-size: 24px; line-height: 32px; letter-spacing: normal; }
#main :is(.native-stat-label, .native-stat-detail) { font-size: 12px; line-height: 18px; }
.native-dialog { border: 1px solid var(--border); border-radius: 12px; }
.native-dialog .native-dialog-heading h2 { font-size: 18px; font-weight: 600; line-height: 28px; }
@media (max-width: 760px) {
  :root { --connect-page-inset: 16px; --connect-panel-inset: 16px; --connect-section-gap: 20px; }
  #main :is(.native-page-heading, .ci-heading, .rd-heading) { align-items: flex-start; gap: 12px; }
  #main :is(.native-heading-actions, .ci-actions, .rd-actions) { max-width: 100%; }
  #main :is(.button, .primary-button), .native-dialog :is(.button, .primary-button) {
    white-space: normal;
    text-align: center;
  }
}
/* Preserve selection and focus after unifying the neutral button appearance. */
#main .button.selected, #main .button[aria-pressed="true"],
#main .button[aria-selected="true"],
.native-dialog .button.selected {
  color: #6d28d9;
  border-color: #ddd6fe;
  background: #f5f3ff;
}
#main :is(.button, .primary-button, input, select, textarea):focus-visible,
.native-dialog :is(.button, .primary-button, input, select, textarea):focus-visible {
  outline: 2px solid #8b5cf6;
  outline-offset: 2px;
}
#main .native-report-body { gap: var(--connect-section-gap); }
#main .native-select { border-color: var(--border); border-radius: 10px; }
#main .native-select select,
#main .integration-filters :is(input, select),
#main .direction-filter select {
  min-height: 36px;
  font-size: 14px;
  line-height: 20px;
  color: var(--connect-body-ink);
}
#main .integration-filters input { border: 0; }
#main .integration-filters label, #main .integration-filters select {
  border-color: var(--border);
  border-radius: 10px;
}
#main .console-eyebrow { font-size: 12px; line-height: 18px; }
/* Fallback pages use the same hierarchy as normal workspace pages. */
#main .native-page > h1 {
  margin: 0;
  font-size: 24px;
  font-weight: 600;
  line-height: 32px;
  color: var(--connect-heading-ink);
}