.settings-page {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.settings-header h1 {
  margin: 0 0 6px;
  font-size: 28px;
}

.settings-header p {
  margin: 0;
  color: var(--muted);
}

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

.settings-grid.settings-grid-single {
  grid-template-columns: 1fr;
}

.settings-plan-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border: 1px solid var(--border);
  background: var(--card);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  box-shadow: var(--shadow-soft);
}

.settings-plan-main {
  display: flex;
  align-items: center;
  gap: 12px;
}

.settings-plan-main p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.settings-plan-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 72px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
}

.settings-plan-pill.is-free {
  color: var(--brand-orange-600);
  background: var(--brand-orange-100);
  border: 1px solid var(--brand-orange-300);
}

.settings-plan-pill.is-paid {
  color: #0a6d47;
  background: #e8f8f0;
  border: 1px solid #9bd3ba;
}

.settings-plan-side {
  display: flex;
  align-items: center;
  gap: 10px;
}

.settings-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 18px;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  text-decoration: none;
  color: var(--text);
  box-shadow: var(--shadow-soft);
  transition: transform 160ms ease, box-shadow 160ms ease;
  min-height: 126px;
}

.settings-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-mid);
}

.settings-card-locked {
  position: relative;
  border-style: dashed;
  background: linear-gradient(0deg, var(--accent-warm-soft), var(--accent-warm-soft)), var(--card);
}

.settings-card-locked:hover {
  transform: none;
  box-shadow: var(--shadow-soft);
}

.settings-lock {
  margin-left: auto;
  align-self: center;
  color: var(--brand-orange-600);
  font-size: 16px;
}

.settings-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: var(--accent-ghost-strong);
  color: var(--accent);
  display: grid;
  place-items: center;
  font-size: 20px;
}

.settings-card p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.settings-arrow {
  margin-left: auto;
  color: var(--muted);
  align-self: center;
}

/* ── Koppelingen-overzicht ─────────────────────────────────────────────────── */

.integration-note {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
  max-width: 68ch;
}

.integration-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 14px;
}

.integration-card {
  --integration-accent: var(--accent);
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  text-decoration: none;
  color: var(--text);
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

/* Enkel de kaarten met een href zijn echte links; een aangekondigde provider heeft er geen. */
a.integration-card[href]:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-mid);
  border-color: var(--border-strong);
}

/* De actieve keuze binnen een categorie: dubbele rand in de actie-kleur. */
.integration-card.is-active {
  border-color: var(--action);
  box-shadow: var(--shadow-mid), inset 0 0 0 1px var(--action);
}

a.integration-card.is-active[href]:hover {
  border-color: var(--action);
}

.integration-card.is-locked {
  border-style: dashed;
  background: var(--bg-elevated);
  box-shadow: none;
}

.integration-card-head {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Witte tegel: een merklogo rekent op een lichte achtergrond, ook in donkere modus. */
.integration-logo {
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  border-radius: var(--radius-md);
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid var(--border);
}

.integration-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 7px;
}

/* Plaatshouder zolang er geen logobestand in wwwroot/img/integrations staat. */
.integration-logo.is-monogram {
  background: color-mix(in srgb, var(--integration-accent) 16%, var(--card));
  border-color: color-mix(in srgb, var(--integration-accent) 30%, transparent);
  color: var(--integration-accent);
  font-weight: 800;
  font-size: 17px;
  letter-spacing: 0.03em;
}

[data-theme="dark"] .integration-logo.is-monogram {
  background: color-mix(in srgb, var(--integration-accent) 24%, var(--card));
  color: color-mix(in srgb, var(--integration-accent) 40%, #ffffff);
}

.integration-card.is-locked .integration-logo {
  filter: grayscale(1);
  opacity: 0.65;
}

.integration-card-title {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  min-width: 0;
}

.integration-card-title strong {
  font-size: 15px;
  line-height: 1.2;
}

.integration-card p {
  margin: 0;
  flex: 1 1 auto;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.integration-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  font-size: 12px;
  color: var(--muted);
}

.integration-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  font-weight: 600;
  color: var(--accent);
}

.integration-cta i {
  transition: transform 160ms ease;
}

a.integration-card[href]:hover .integration-cta i {
  transform: translateX(2px);
}

.integration-flag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: auto;
  align-self: flex-start;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
}

.integration-flag.is-on {
  color: var(--action-strong);
  background: var(--action-ghost);
  border: 1px solid color-mix(in srgb, var(--action) 45%, transparent);
}

[data-theme="dark"] .integration-flag.is-on {
  color: var(--action);
}

.integration-flag.is-off {
  color: var(--muted);
  background: var(--overlay);
  border: 1px solid var(--border);
}

.workspace-panel {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  box-shadow: var(--shadow-mid);
}

/* Body of a help-center-style settings card (left nav + card layout). */
.chat-settings-cardbody {
  padding: 18px 22px 22px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.workspace-section > strong {
  font-size: 16px;
}

.chat-settings-message-editor {
  margin-top: 12px;
  display: grid;
  gap: 10px;
}

.chat-settings-message-input {
  min-height: 96px;
  overflow: hidden;
  padding: 12px 14px;
  line-height: 1.55;
  white-space: pre-wrap;
  font-family: inherit;
}

.chat-settings-message-input:focus {
  box-shadow: none;
  outline: none;
}

.chat-settings-message-input:empty::before {
  content: attr(data-placeholder);
  color: var(--muted);
  pointer-events: none;
}

.chat-settings-message-input[contenteditable="false"] {
  background: var(--bg);
}

.chat-settings-message-input p {
  margin: 0;
}

.chat-settings-message-input p + p,
.chat-settings-message-input p + ul,
.chat-settings-message-input p + ol,
.chat-settings-message-input ul + p,
.chat-settings-message-input ol + p,
.chat-settings-message-input ul + ol,
.chat-settings-message-input ol + ul {
  margin-top: 0.4rem;
}

.chat-settings-message-input ul,
.chat-settings-message-input ol {
  margin: 0;
  padding-inline-start: 1.25rem;
}

.chat-settings-message-input li + li {
  margin-top: 0.16rem;
}

.theme-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin-top: 12px;
}

.theme-option {
  border: 1px solid var(--border);
  background: var(--bg);
  border-radius: var(--radius-md);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  cursor: pointer;
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.theme-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.theme-option-title {
  font-weight: 600;
  color: var(--text);
}

.theme-option-meta {
  font-size: 12px;
  color: var(--muted);
}

.theme-option:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-soft);
  border-color: var(--border-strong);
}

.theme-option.is-active {
  border-color: var(--accent);
  background: linear-gradient(0deg, var(--accent-ghost), var(--accent-ghost)), var(--card);
  box-shadow: 0 10px 24px var(--accent-glow);
}

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

.business-hours {
  display: flex;
  flex-direction: column;
  margin-top: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg);
  overflow: hidden;
}

.business-hours-row {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
}

.business-hours-row:last-child {
  border-bottom: 0;
}

.business-hours-day {
  flex: 0 0 110px;
  font-weight: 600;
  color: var(--text);
  padding-top: 6px;
}

.business-hours-body {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  flex: 1;
}

.business-hours-closed {
  color: var(--muted);
  font-style: italic;
  padding: 6px 0;
}

.business-hours-range {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px 4px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
}

.business-hours-input {
  border: 0;
  background: transparent;
  color: var(--text);
  font-family: inherit;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  padding: 4px 2px;
  width: 78px;
}

.business-hours-input:focus {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

.business-hours-input::-webkit-calendar-picker-indicator {
  opacity: 0.55;
  cursor: pointer;
}

.business-hours-dash {
  color: var(--muted);
  user-select: none;
}

.business-hours-remove {
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
  line-height: 1;
}

.business-hours-remove:hover {
  color: var(--accent-warm, #b25904);
  background: var(--accent-warm-soft, rgba(178, 89, 4, 0.08));
}

.business-hours-add {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 1px dashed var(--border);
  background: transparent;
  color: var(--accent);
  font-size: 12px;
  font-weight: 600;
  padding: 5px 10px;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease;
}

.business-hours-add:hover {
  border-color: var(--accent);
  background: var(--accent-ghost);
}

.agent-settings-placeholder {
  margin-top: 10px;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--bg);
  color: var(--muted);
  padding: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.agent-settings-form-grid {
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

.export-panel-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.export-panel-header p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.export-scope-choice {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
}

.export-choice-card {
  border: 1px solid var(--border);
  background: var(--bg);
  border-radius: var(--radius-md);
  padding: 14px;
  display: flex;
  gap: 10px;
  cursor: pointer;
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.export-choice-card input {
  margin-top: 2px;
}

.export-choice-card span {
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: var(--muted);
  font-size: 13px;
}

.export-choice-card strong {
  color: var(--text);
  font-size: 15px;
}

.export-choice-card:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-soft);
  border-color: var(--border-strong);
}

.export-choice-card.is-selected {
  border-color: var(--accent);
  background: linear-gradient(0deg, var(--accent-ghost), var(--accent-ghost)), var(--card);
  box-shadow: 0 10px 24px var(--accent-glow);
}

.export-form-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg);
  color: var(--muted);
  padding: 12px 14px;
  font-size: 13px;
}

.export-job-list {
  display: grid;
  gap: 14px;
}

.export-job-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.export-job-card.is-live {
  border-color: rgba(31, 157, 106, 0.24);
  background: linear-gradient(0deg, rgba(31, 157, 106, 0.03), rgba(31, 157, 106, 0.03)), var(--bg);
}

.export-job-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.export-job-head p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.export-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.export-status-queued {
  background: #eef2ff;
  color: #3047b5;
}

.export-status-processing {
  background: #fff4d6;
  color: #926200;
}

.export-status-succeeded {
  background: #e7f7ef;
  color: #0c6a45;
}

.export-status-failed {
  background: #ffe7e7;
  color: #b42318;
}

.export-status-expired,
.export-status-default {
  background: #eef1f5;
  color: #52606d;
}

.export-job-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px 16px;
}

.export-job-meta-item {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.export-job-meta-item strong {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.export-job-meta-item span {
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
}

.export-job-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.export-job-progress {
  display: grid;
  gap: 10px;
}

.export-job-progress-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  font-size: 13px;
}

.export-job-progress-copy strong {
  color: var(--text);
  font-size: 13px;
}

.export-job-progress-copy span {
  color: var(--muted);
}

.export-job-progress-bar {
  position: relative;
  overflow: hidden;
  height: 8px;
  border-radius: 999px;
  background: var(--border);
}

.export-job-progress-bar span {
  position: absolute;
  inset: 0 auto 0 -35%;
  width: 35%;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(31, 157, 106, 0), var(--action), rgba(31, 157, 106, 0));
  animation: export-progress-slide 1.5s linear infinite;
}

.export-job-stat {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 5px 9px;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}

.export-job-stat.is-accent {
  color: var(--brand-orange-600);
  background: var(--brand-orange-100);
  border-color: var(--brand-orange-300);
}

.export-job-details {
  border-top: 1px solid var(--border);
  padding-top: 12px;
}

.export-job-details summary {
  cursor: pointer;
  color: var(--text);
  font-weight: 600;
}

.export-warning-list {
  margin: 10px 0 0;
  padding-left: 20px;
  color: var(--muted);
  font-size: 13px;
}

.export-job-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  padding-top: 2px;
}

.export-job-actions .btn {
  min-width: 168px;
  justify-content: center;
  box-shadow: 0 10px 24px rgba(31, 157, 106, 0.16);
}

.export-empty-state {
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-lg);
  padding: 28px 20px;
  background: var(--bg);
  color: var(--muted);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
}

.export-empty-state i {
  font-size: 24px;
  color: var(--accent);
}

/* Sectiegroepen in settings-overzicht */
.settings-section-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.settings-section-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text);
  margin: 0;
  padding: 2px 0 2px 10px;
  border-left: 3px solid var(--accent);
}

/* Abonnement — plankaarten */
.subscription-plans-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}

.subscription-plan-card {
  position: relative;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: var(--shadow-soft);
  transition: box-shadow 160ms ease, transform 160ms ease;
}

.subscription-plan-card:hover {
  box-shadow: var(--shadow-mid);
  transform: translateY(-2px);
}

.subscription-plan-card.is-highlighted {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow), var(--shadow-mid);
}

.subscription-plan-card.is-current {
  background: linear-gradient(0deg, var(--accent-ghost), var(--accent-ghost)), var(--card);
}

.subscription-plan-badge {
  display: inline-block;
  background: var(--accent);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 3px 10px;
  border-radius: 999px;
  text-transform: uppercase;
  align-self: flex-start;
}

.subscription-plan-name {
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
}

.subscription-plan-price {
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.subscription-plan-amount {
  font-size: 30px;
  font-weight: 700;
  color: var(--text);
  line-height: 1;
}

.subscription-plan-period {
  font-size: 13px;
  color: var(--muted);
}

.export-request-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  align-items: end;
}

.export-request-stack {
  display: grid;
  gap: 12px;
}

.export-request-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.export-request-footer .export-form-note {
  margin: 0;
  flex: 1 1 420px;
}

.export-live-indicator {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  background: var(--action-ghost);
  color: var(--action-strong);
  font-size: 13px;
  font-weight: 600;
}

.export-live-indicator-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  animation: export-live-pulse 1.4s ease-in-out infinite;
}

.subscription-plan-features {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
  font-size: 13px;
  color: var(--muted);
  flex: 1;
}

.subscription-plan-features li {
  display: flex;
  align-items: flex-start;
  gap: 7px;
}

.subscription-plan-features i {
  color: var(--accent);
  flex-shrink: 0;
  margin-top: 2px;
}

.subscription-plan-cta-wrap {
  margin-top: auto;
}

.subscription-plan-cta {
  width: 100%;
}

.subscription-plan-current-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 8px 12px;
  border-radius: var(--radius-md);
  background: var(--accent-ghost-strong);
  color: var(--accent);
  font-size: 14px;
  font-weight: 600;
}

.subscription-plan-cta-downgrade {
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--border);
  font-size: 13px;
}

.subscription-plan-cta-downgrade:hover:not(:disabled) {
  background: var(--bg);
  color: var(--text);
  border-color: var(--border-strong);
}

@media (max-width: 991.98px) {
  .settings-plan-banner {
    flex-direction: column;
    align-items: flex-start;
  }

  .settings-plan-side {
    width: 100%;
    justify-content: space-between;
  }

  .settings-grid {
    grid-template-columns: 1fr;
  }

  .subscription-plans-grid {
    grid-template-columns: 1fr;
  }

  .export-panel-header,
  .export-job-head {
    flex-direction: column;
  }

  .export-request-footer {
    align-items: stretch;
  }

  .export-job-actions {
    justify-content: stretch;
  }

  .export-job-actions .btn {
    width: 100%;
  }
}

@keyframes export-progress-slide {
  from {
    left: -35%;
  }

  to {
    left: 100%;
  }
}

@keyframes export-live-pulse {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }

  50% {
    opacity: 0.35;
    transform: scale(0.75);
  }
}

[data-theme="dark"] .settings-plan-pill.is-paid {
  color: var(--action);
  background: var(--action-ghost);
  border-color: rgba(52, 199, 138, 0.30);
}

[data-theme="dark"] .export-status-queued {
  background: var(--accent-ghost);
  color: var(--accent);
}

[data-theme="dark"] .export-status-processing {
  background: rgba(235, 120, 14, 0.12);
  color: var(--brand-orange-300);
}

[data-theme="dark"] .export-status-succeeded {
  background: var(--action-ghost);
  color: var(--action);
}

[data-theme="dark"] .export-status-failed {
  background: rgba(180, 35, 24, 0.12);
  color: #e88080;
}

[data-theme="dark"] .export-status-expired,
[data-theme="dark"] .export-status-default {
  background: var(--surface);
  color: var(--muted);
}

/* Per-language message editor selector (chat settings) */
.chat-settings-langbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin: 0;
}

.chat-settings-langbar-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
}

.chat-settings-langbar-pills {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px;
  border: 1px solid var(--border);
  background: var(--bg);
}

.chat-settings-langpill {
  border: 0;
  background: transparent;
  color: var(--muted);
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease, box-shadow 160ms ease;
}

.chat-settings-langpill:hover:not(:disabled) {
  color: var(--text);
}

.chat-settings-langpill.is-active {
  background: var(--card);
  color: var(--text);
  box-shadow: var(--shadow-soft);
}

.chat-settings-langpill:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.chat-settings-langbar-hint {
  flex-basis: 100%;
  margin: 0;
}

/* ── Gesprekstaxonomie: lijsten op /settings/topics ─────────────────────────
   Bootstraps .table wordt nergens in deze app gestyled, dus de tabellen hier
   vielen buiten het designsysteem. Deze klasse volgt dezelfde taal als
   .report-matrix in reports.css: muted kapitalen als kop, een lijn per rij en
   een hover die de hele rij oplicht. Getallen en acties staan rechts. */

.topics-table-scroll {
  overflow-x: auto;
  /* Ruimte voor de focusring van de icoonknoppen, anders knipt de scrollbox hem af.
     De negatieve marge haalt die ruimte er visueel weer af; alleen bovenaan blijft
     er 14px + 2px = 16px lucht staan. Zelfde truc als .report-matrix-scroll. */
  padding: 2px;
  margin: 14px -2px -2px;
}

.topics-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
}

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

.topics-table thead th {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-bottom: 1px solid var(--border-strong);
  white-space: nowrap;
}

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

.topics-table tbody tr:hover td {
  background: var(--accent-ghost);
}

.topics-table th.topics-table-number,
.topics-table td.topics-table-number {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.topics-table th.topics-table-actions,
.topics-table td.topics-table-actions {
  text-align: right;
  white-space: nowrap;
  width: 1%;
}

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

/* De span draagt de reden waarom de knop uitgeschakeld is; een uitgeschakelde
   knop toont zijn eigen title niet. */
.topics-action-wrap {
  display: inline-flex;
}

/* ── E-mailkanaal (/settings/email-channel) ─────────────────────────────────
   Twee delen: bovenaan de aan/uit-schakelaar met de opslagknop (de enige
   handeling binnen Sarrai zelf), daaronder een genummerde gids die de
   koppeling bij de mailprovider stap voor stap begeleidt. */

.email-channel-switch {
  font-size: 1.1rem;
  margin-bottom: 0;
}

.email-channel-switch .form-check-input {
  cursor: pointer;
}

.email-channel-switch .form-check-label {
  font-weight: 600;
  cursor: pointer;
}

/* De zelden aangeraakte instellingen zitten weggevouwen, zodat de eerste
   installatie niet als een muur van velden aanvoelt. */
.email-channel-advanced {
  margin-top: 18px;
  border-top: 1px solid var(--border);
  padding-top: 14px;
}

.email-channel-advanced > summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--text);
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.email-channel-advanced > summary::-webkit-details-marker {
  display: none;
}

.email-channel-caret {
  font-size: 12px;
  color: var(--muted);
  transition: transform 160ms ease;
}

.email-channel-advanced[open] > summary .email-channel-caret {
  transform: rotate(90deg);
}

/* Genummerde koppelgids: een verticale tijdlijn met een nummer per stap. */
.email-setup {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
}

.email-setup-step {
  position: relative;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 16px;
  padding-bottom: 26px;
}

.email-setup-step:last-child {
  padding-bottom: 0;
}

/* De verbindingslijn tussen de stapnummers loopt door tot aan het volgende. */
.email-setup-step:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 15px;
  top: 34px;
  bottom: 0;
  width: 2px;
  background: var(--border);
}

.email-setup-num {
  position: relative;
  z-index: 1;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--accent-ghost-strong);
  color: var(--accent);
  font-weight: 700;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

.email-setup-body {
  min-width: 0;
  padding-top: 4px;
}

.email-setup-body > strong {
  display: block;
  font-size: 15px;
}

.email-setup-body > .text-muted {
  margin-top: 4px;
}

/* Titel plus een lichte actieknop (codes vernieuwen) op dezelfde regel. */
.email-setup-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.email-setup-head > strong {
  font-size: 15px;
}

/* De doorstuurwaarschuwing geldt voor elke provider en is de nummer-een-valkuil,
   dus ze krijgt een eigen accent boven de accordeons. */
.email-setup-callout {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 10px 0;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  background: var(--accent-ghost);
  border: 1px solid var(--accent-ghost-strong);
  color: var(--text);
  font-size: 13px;
  line-height: 1.45;
}

.email-setup-callout > i {
  margin-top: 2px;
  color: var(--accent);
  flex-shrink: 0;
}

/* Het inkomende adres staat vast (beslissing G1). Het veld toont dat het niet
   te bewerken valt: een hangslot, een ingezonken achtergrond en geen tekst-
   cursor of focusgloed. readonly (niet disabled) houdt de tekst wel
   selecteerbaar, zodat handmatig kopiëren altijd kan. */
/* Het slotje en het veld vormen samen één ingezonken vlak (geen deellijn ertussen),
   daarna één rand naar de knop toe. Zo oogt de overgang afgewerkt in plaats van
   twee losse vakjes die tegen elkaar botsen. */
.email-address .input-group-text {
  background: var(--bg);
  border-color: var(--border);
  border-right: 0;
  color: var(--muted);
}

.email-address-input.form-control[readonly] {
  background: var(--bg);
  border-color: var(--border);
  border-left: 0;
  cursor: default;
}

.email-address-input.form-control[readonly]:focus {
  border-color: var(--border);
  box-shadow: none;
}

.email-address .btn {
  border-color: var(--border);
  background: var(--card);
  color: var(--text);
}

.email-address .btn:hover,
.email-address .btn:focus-visible {
  background: var(--accent-ghost);
  border-color: var(--border);
  color: var(--accent);
}