@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@500;600;700&display=swap");

* {
  box-sizing: border-box;
  font-family: Arial, sans-serif;
}

:root {
  --agile-sidebar-width: 234px;
  --agile-mobile-nav-stack: 122px;
  --crm-brand-font: "Aptos Display", "Segoe UI Variable Display", "Trebuchet MS", system-ui, sans-serif;
}

html {
  height: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: #edf2ff;
  color: #1f2937;
  padding-top: 0;
  padding-left: var(--agile-sidebar-width);
}

.hidden {
  display: none !important;
}

.agile-logo-mini {
  position: absolute;
  left: 12px;
  width: 60px;
  height: 60px;
  object-fit: contain;
}

.agile-top-left,
.agile-top-right {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 180px;
}

.agile-top-right {
  justify-content: flex-end;
}

.agile-cloud {
  font-size: 16px;
  opacity: 0.95;
}

.agile-icon {
  font-size: 12px;
  opacity: 0.85;
  color: #eef2ff;
  position: relative;
}

.agile-brand {
  font-weight: 700;
  letter-spacing: 0.03em;
}

.agile-badge-dot {
  min-width: 20px;
  height: 14px;
  border-radius: 999px;
  background: #ef4444;
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
}

.agile-icon.with-dot::after {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #84cc16;
  position: absolute;
  top: -3px;
  right: -4px;
}

.agile-mini-link {
  font-size: 12px;
  color: #f2f4ff;
}

.agile-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #f8fafc;
  color: #3c4664;
  font-size: 10px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.35);
}

.agile-nav {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  background: #0b1636;
  color: #c7d2fe;
  border-right: 1px solid #223d7c;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: var(--agile-sidebar-width);
  z-index: 1001;
  box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.03);
}

.agile-brand-link {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 12px 14px;
  margin: 0;
  text-decoration: none;
  border-bottom: 1px solid rgba(148, 163, 184, 0.22);
  transition: background 0.15s ease, box-shadow 0.15s ease;
}

.agile-brand-link:hover {
  background: rgba(30, 64, 175, 0.25);
  box-shadow: inset 0 -1px 0 rgba(99, 102, 241, 0.35);
}

.agile-brand-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  isolation: isolate;
}

/* Sidebar logo: no CSS blur - SVG glow was softening the word "Cadence" beside it */
.agile-brand-link .agile-brand-logo svg,
.agile-brand-link .agile-brand-logo img {
  display: block;
  width: 40px;
  height: 40px;
  border-radius: 11px;
  overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.12),
    0 2px 6px rgba(0, 0, 0, 0.35);
  filter: none;
}

.agile-brand-text {
  font-family: "Segoe UI", "Segoe UI Variable Display", system-ui, sans-serif;
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: #ffffff;
  line-height: 1.2;
  text-shadow: none;
}

.crm-nav-agent-profile {
  flex-shrink: 0;
  padding: 10px 12px 12px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.22);
  background: rgba(15, 23, 42, 0.35);
}

.crm-nav-agent-profile[hidden] {
  display: none !important;
}

.crm-nav-agent-profile-inner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(30, 41, 59, 0.55);
  border: 1px solid rgba(148, 163, 184, 0.2);
}

.crm-nav-agent-profile-photo {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  overflow: hidden;
  background: rgba(51, 65, 85, 0.8);
  border: 2px solid rgba(148, 163, 184, 0.35);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.crm-nav-agent-profile-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.crm-nav-agent-profile-name {
  margin: 0;
  flex: 1;
  min-width: 0;
  font-size: 0.75rem;
  font-weight: 600;
  color: #f1f5f9;
  line-height: 1.35;
  letter-spacing: 0.01em;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}

.agile-nav-inner {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 7px;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 11px 9px 14px;
  font-size: 13.5px;
  scrollbar-width: thin;
  scrollbar-color: rgba(148, 163, 184, 0.45) rgba(15, 23, 42, 0.35);
  -ms-overflow-style: auto;
}

.agile-nav-inner::-webkit-scrollbar {
  width: 8px;
}

.agile-nav-inner::-webkit-scrollbar-track {
  background: rgba(15, 23, 42, 0.35);
  border-radius: 6px;
}

.agile-nav-inner::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.45);
  border-radius: 6px;
}

.agile-nav-inner::-webkit-scrollbar-thumb:hover {
  background: rgba(203, 213, 225, 0.55);
}

.agile-nav-inner .active {
  color: #ffffff;
  font-weight: 700;
  background: linear-gradient(135deg, #4f46e5, #7c3aed);
  border-radius: 9px;
  padding: 8px 11px;
  box-shadow: 0 7px 18px rgba(79, 70, 229, 0.3);
  display: flex;
  align-items: center;
  gap: 9px;
}

.agile-nav-inner a {
  color: #dbeafe;
  text-decoration: none;
  border: 1px solid #2a4d95;
  border-radius: 9px;
  padding: 8px 11px;
  background: #142852;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 9px;
}

.agile-nav-icon {
  flex-shrink: 0;
  width: 19px;
  height: 19px;
  opacity: 0.92;
  color: inherit;
  fill: currentColor;
}

.agile-heading-icon {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  color: #4f46e5;
  fill: currentColor;
  filter: drop-shadow(0 6px 12px rgba(79, 70, 229, 0.18));
}

.topbar h1:has(.agile-heading-icon),
.calendar-topbar-head h1:has(.agile-heading-icon) {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.topbar h1 .agile-heading-text,
.calendar-topbar-head h1 .agile-heading-text {
  min-width: 0;
}

.login-redirect-link {
  color: #c62828;
  text-decoration: underline;
  font-weight: 600;
  cursor: pointer;
}

.login-redirect-link:hover,
.login-redirect-link:focus {
  color: #8b0000;
  text-decoration-thickness: 2px;
  outline: none;
}

.agile-nav-inner .agile-nav-link-placeholder {
  color: #dbeafe;
  text-decoration: none;
  border: 1px solid #2a4d95;
  border-radius: 9px;
  padding: 8px 11px;
  background: #142852;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 9px;
}

.agile-nav-inner a:hover {
  color: #ffffff;
  border-color: #4f46e5;
  background: #1d3b78;
}

.container {
  flex: 1 1 auto;
  width: 100%;
  max-width: none;
  margin: 0 auto;
  padding: 12px 16px 20px;
  min-height: 0;
}

@media (max-width: 980px) {
  body {
    padding-left: 0;
    padding-top: var(--agile-mobile-nav-stack);
  }

  .agile-nav {
    top: 0;
    left: 0;
    right: 0;
    bottom: auto;
    width: auto;
    max-height: none;
    border-right: none;
    border-bottom: 1px solid #223d7c;
  }

  .agile-brand-link {
    padding: 12px 12px 10px;
  }

  .agile-brand-text {
    font-size: 1.4rem;
    letter-spacing: 0.04em;
  }

  .crm-nav-agent-profile {
    padding: 8px 10px 10px;
  }

  .crm-nav-agent-profile-inner {
    padding: 6px 8px;
    gap: 8px;
  }

  .crm-nav-agent-profile-photo {
    width: 36px;
    height: 36px;
  }

  .crm-nav-agent-profile-name {
    font-size: 0.7rem;
    -webkit-line-clamp: 2;
  }

  .agile-nav-inner {
    flex-direction: row;
    align-items: center;
    gap: 7px;
    flex: 0 0 auto;
    min-height: 0;
    height: auto;
    padding: 8px 9px 10px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(148, 163, 184, 0.45) rgba(15, 23, 42, 0.35);
  }

  .agile-nav-inner::-webkit-scrollbar {
    width: 0;
    height: 8px;
  }

  .agile-nav-inner .active,
  .agile-nav-inner a {
    white-space: nowrap;
  }
}

.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 4px 0;
}

.topbar h1 {
  font-size: 34px;
  font-weight: 300;
  margin: 0;
  color: #4b5563;
}

#settingsBackBtn,
#backToContactsBtn,
#backToSummaryBtn,
#recycleBackBtn {
  width: auto;
  min-width: 0;
  margin-top: 0;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.25;
  background: #1e5fbf;
  color: #ffffff;
  border: 1px solid #1a54a8;
  border-radius: 4px;
  cursor: pointer;
  box-sizing: border-box;
}

#settingsBackBtn:hover,
#backToContactsBtn:hover,
#backToSummaryBtn:hover,
#recycleBackBtn:hover {
  background: #1a54a8;
  color: #ffffff;
  border-color: #174a94;
}

.contacts-topbar-add-wrap,
.contacts-topbar-quick-actions-wrap {
  position: relative;
}

.contacts-topbar-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.contacts-topbar-add-btn {
  display: inline-flex;
  width: 50%;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 0;
  min-width: 148px;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
  white-space: nowrap;
  color: #ffffff;
  background: linear-gradient(180deg, #7c3aed 0%, #6d28d9 55%, #5b21b6 100%);
  border: 1px solid #4c1d95;
  border-radius: 8px;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(91, 33, 182, 0.35);
}

.contacts-topbar-row-break {
  flex-basis: 100%;
  width: 100%;
  height: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.contacts-topbar-add-btn:hover {
  background: linear-gradient(180deg, #8b5cf6 0%, #7c3aed 55%, #6d28d9 100%);
  border-color: #5b21b6;
}

.contacts-topbar-add-btn:focus-visible {
  outline: 2px solid #c4b5fd;
  outline-offset: 2px;
}

.contacts-topbar-add-plus {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1em;
  height: 1em;
  font-size: 1em;
  font-weight: 700;
  line-height: 1;
}

.contacts-topbar-add-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  min-width: 200px;
  padding: 6px 0;
  margin: 0;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.18);
  z-index: 50;
}

.contacts-topbar-add-menu-item {
  display: block;
  width: 100%;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 500;
  text-align: left;
  color: #1f2937;
  background: transparent;
  border: none;
  cursor: pointer;
}

.contacts-topbar-add-menu-item:hover,
.contacts-topbar-add-menu-item:focus-visible {
  background: #f3f4f6;
  outline: none;
}

.contacts-topbar-quick-actions-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 0;
  padding: 8px 14px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  color: #374151;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}

.contacts-topbar-quick-actions-btn:hover {
  background: #f8fafc;
  border-color: #94a3b8;
}

.contacts-topbar-quick-actions-btn:focus-visible {
  outline: 2px solid #93c5fd;
  outline-offset: 2px;
}

.contacts-topbar-state-filter-wrap {
  position: relative;
  display: inline-flex;
  margin: 0;
}

.contacts-topbar-state-filter {
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: 8px 28px 8px 14px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  color: #374151;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
  appearance: none;
  -webkit-appearance: none;
  min-width: 9.5rem;
}

.contacts-topbar-state-filter:hover {
  background: #f8fafc;
  border-color: #94a3b8;
}

.contacts-topbar-state-filter:focus-visible {
  outline: 2px solid #93c5fd;
  outline-offset: 2px;
}

.contacts-topbar-import-csv-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  margin-top: 0;
  padding: 8px 14px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  color: #334155;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}

.contacts-topbar-import-csv-btn:hover {
  background: #f1f5f9;
  border-color: #94a3b8;
}

.contacts-topbar-import-csv-btn:focus-visible {
  outline: 2px solid #93c5fd;
  outline-offset: 2px;
}

.contacts-topbar-state-filter-wrap::after {
  content: "\25BE";
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: #374151;
  font-size: 12px;
  line-height: 1;
}

.page-contacts-leads .contacts-filter-toolbar {
  flex-wrap: wrap;
  row-gap: 8px;
}

.page-contacts-leads .contacts-filter-sort-inline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

.page-contacts-leads .contacts-filter-sort-inline label {
  font-size: 13px;
  font-weight: 600;
  color: #475569;
  white-space: nowrap;
}

.page-contacts-leads .contacts-filter-sort-inline select {
  min-width: 148px;
}

.page-contacts-leads .contacts-advanced-filters-toggle {
  flex: 0 0 auto;
  margin-top: 0;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
  color: #1e5fbf;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 8px;
  cursor: pointer;
}

.page-contacts-leads .contacts-advanced-filters-toggle:hover,
.page-contacts-leads .contacts-advanced-filters-toggle.is-open {
  background: #dbeafe;
  border-color: #93c5fd;
}

.page-contacts-leads .contacts-advanced-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  padding: 10px 12px 12px;
  border-top: 1px solid #e2e8f0;
}

.page-contacts-leads .contacts-advanced-filters.hidden {
  display: none;
}

.page-contacts-leads .contacts-advanced-filters .contacts-quick-filter-inline {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.contacts-empty-state {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 320px;
  padding: 32px 20px;
  text-align: center;
}

.contacts-empty-state.hidden {
  display: none;
}

.contacts-empty-state-inner {
  max-width: 440px;
}

.contacts-empty-state-title {
  margin: 0 0 10px;
  font-size: 22px;
  font-weight: 700;
  color: #0f172a;
}

.contacts-empty-state-text {
  margin: 0 0 22px;
  font-size: 15px;
  line-height: 1.55;
  color: #64748b;
}

.contacts-empty-state-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

.contacts-empty-state-btn {
  margin-top: 0;
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 600;
  color: #1e5fbf;
  background: #ffffff;
  border: 1px solid #93c5fd;
  border-radius: 8px;
  cursor: pointer;
}

.contacts-empty-state-btn:hover {
  background: #eff6ff;
}

.contacts-empty-state-btn--primary {
  color: #ffffff;
  background: linear-gradient(180deg, #7c3aed 0%, #6d28d9 55%, #5b21b6 100%);
  border-color: #4c1d95;
  box-shadow: 0 2px 6px rgba(91, 33, 182, 0.35);
}

.contacts-empty-state-btn--primary:hover {
  background: linear-gradient(180deg, #8b5cf6 0%, #7c3aed 55%, #6d28d9 100%);
}

.contacts-empty-state--filtered .contacts-empty-state-inner {
  max-width: 480px;
}

.contacts-table-wrap.hidden,
.contacts-mobile-list.hidden,
.contacts-top-meta.hidden,
.bulk-actions.hidden,
.contacts-mobile-select-all.hidden {
  display: none !important;
}

#homeRefreshBtn {
  width: auto;
  min-width: 58px;
  padding: 3px 8px;
  font-size: 11px;
  margin-top: 0;
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: #ffffff;
  border-color: #1d4ed8;
}

#homeRefreshBtn:hover {
  background: linear-gradient(135deg, #1d4ed8, #1e40af);
}

#activitiesRefreshBtn {
  width: auto;
  min-width: 58px;
  padding: 3px 8px;
  font-size: 11px;
  margin-top: 0;
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: #ffffff;
  border-color: #1d4ed8;
}

.activities-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}

.activities-window-control {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  color: #475569;
}

.activities-window-control select {
  width: auto;
  min-width: 128px;
  height: 34px;
  padding: 5px 10px;
  border-radius: 10px;
  border: 1px solid #cbd5e1;
  background: #ffffff;
  font-weight: 700;
  color: #0f172a;
}

#activitiesRefreshBtn:hover {
  background: linear-gradient(135deg, #1d4ed8, #1e40af);
}

.contact-topbar-actions,
.videos-topbar-actions {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  overflow-x: auto;
  overflow-y: hidden;
}

#videosRefreshBtn {
  width: auto;
  min-width: 52px;
  padding: 3px 10px;
  font-size: 11px;
  margin-top: 0;
  line-height: 1.25;
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: #ffffff;
  border-color: #1d4ed8;
}

#videosRefreshBtn:hover {
  background: linear-gradient(135deg, #1d4ed8, #1e40af);
}

.forms-topbar-actions {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  overflow-x: auto;
  overflow-y: hidden;
}

.landing-topbar-actions {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  overflow-x: auto;
  overflow-y: hidden;
}

.contact-topbar-actions > *,
.videos-topbar-actions > *,
.forms-topbar-actions > *,
.landing-topbar-actions > * {
  flex: 0 0 auto;
}

#landingPagesRefreshBtn {
  width: auto;
  min-width: 52px;
  padding: 3px 10px;
  font-size: 11px;
  margin-top: 0;
  line-height: 1.25;
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: #ffffff;
  border-color: #1d4ed8;
}

#landingPagesRefreshBtn:hover {
  background: linear-gradient(135deg, #1d4ed8, #1e40af);
}

#formsRefreshBtn {
  width: auto;
  min-width: 52px;
  padding: 3px 10px;
  font-size: 11px;
  margin-top: 0;
  line-height: 1.25;
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: #ffffff;
  border-color: #1d4ed8;
}

#formsRefreshBtn:hover {
  background: linear-gradient(135deg, #1d4ed8, #1e40af);
}

#backToContactsBtn,
#backToSummaryBtn {
  width: auto;
  min-width: 130px;
  padding: 6px 10px;
  font-size: 12px;
  margin-top: 0;
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: #ffffff;
  border-color: #1d4ed8;
}

#backToContactsBtn:hover,
#backToSummaryBtn:hover {
  background: linear-gradient(135deg, #1d4ed8, #1e40af);
}

.crm-logout-btn {
  width: auto !important;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  font-size: 12px;
  line-height: 1.2;
  padding: 4px 10px;
  margin-top: 0;
  border: 1px solid #9ca3af;
  background: #f3f4f6;
  color: #000000;
}

.crm-logout-btn:hover {
  background: #e5e7eb;
  border-color: #6b7280;
}

.panel {
  background: #ffffff;
  border-radius: 14px;
  padding: 10px;
  margin-top: 8px;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
  border: 1px solid #dbe4f6;
}

.compact-panel {
  background: #f3f5f9;
  overflow: visible;
}

.page-contacts-leads .compact-panel {
  overflow: visible;
  padding-top: 12px;
  padding-bottom: 12px;
}

.filter-toolbar {
  justify-content: flex-end;
}

.page-contacts-leads .filter-toolbar {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  overflow-x: auto;
  overflow-y: visible;
  gap: 6px;
  min-height: 44px;
  padding-top: 4px;
  padding-bottom: 4px;
}

.page-contacts-leads .filter-toolbar > * {
  flex: 0 0 auto;
  margin-top: 0;
}

/* Anchor the Search group (input + Search button + Clear button) on the left of
   the toolbar and push the Status filter and action buttons to the right, so the
   Search controls are clearly separated from the rest. */
.page-contacts-leads .filter-toolbar #clearSearchBtn {
  margin-right: auto;
  margin-left: 4px;
}
.page-contacts-leads .filter-toolbar #statusFilter {
  margin-left: 16px;
}

.page-contacts-leads .filter-toolbar #searchInput {
  flex: 1 1 280px;
  width: auto;
  min-width: 200px;
  max-width: none;
  height: 40px;
  min-height: 40px;
  margin: 0;
  padding: 0 14px;
  line-height: 38px;
  font-size: 14px;
  border-radius: 12px;
  box-sizing: border-box;
  align-self: center;
}

.filter-toolbar #searchInput {
  max-width: 280px;
}

.page-contacts-leads .toolbar-label {
  font-size: 15px;
  font-weight: 700;
  padding-right: 2px;
}

.filter-toolbar #searchField {
  max-width: 190px;
}

.filter-toolbar #statusFilter,
.filter-toolbar #outcomeFilter,
.filter-toolbar #contactsStateFilter,
.filter-toolbar #contactsFilterSelect {
  max-width: 145px;
  min-width: 118px;
  height: 36px;
  margin-top: 4px;
  padding: 0 28px 0 10px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  line-height: 36px;
  box-sizing: border-box;
  -webkit-appearance: none;
  appearance: none;
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 12px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 7.5L10 12.5L15 7.5' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.filter-toolbar #contactsFilterSelect {
  min-width: 150px;
  max-width: 168px;
}

.filter-toolbar #statusFilter,
.filter-toolbar #outcomeFilter,
.filter-toolbar #contactsStateFilter,
.filter-toolbar #contactsFilterSelect {
  background-color: #2563eb;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 7.5L10 12.5L15 7.5' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"),
    linear-gradient(135deg, #2563eb, #1d4ed8);
  background-repeat: no-repeat, repeat;
  background-position: right 8px center, 0 0;
  background-size: 12px, auto;
  color: #ffffff;
  border-color: #1d4ed8;
}

.filter-toolbar #statusFilter option,
.filter-toolbar #outcomeFilter option,
.filter-toolbar #contactsStateFilter option,
.filter-toolbar #contactsFilterSelect option {
  color: #0f172a;
  background: #ffffff;
}

/* Toolbar outcome groups: disabled header rows (reliable vs optgroup on Windows) */
.filter-toolbar #outcomeFilter option.contact-outcome-group-label {
  color: #1e3a8a;
  background: #e2e8f0;
  font-weight: 700;
}

.filter-toolbar #outcomeFilter optgroup {
  color: #1e3a8a;
  background: #f1f5f9;
  font-weight: 700;
  font-style: normal;
}

#applyFiltersBtn,
#clearSearchBtn,
#addContactTopBtn,
#contactsTasksBtn,
#contactsHelpBtn,
#twilioTopBtn,
#dripTopBtn {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: #ffffff;
  border-color: #1d4ed8;
}

#recycleBinBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: auto;
  margin-top: 0;
  min-width: 76px;
  height: 32px;
  padding: 4px 10px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  background: #f1f5f9;
  color: #334155;
  border: 1px solid #cbd5e1;
}
#recycleBinBtn:hover {
  background: #e2e8f0;
  border-color: #94a3b8;
}

.filter-toolbar #applyFiltersBtn,
.filter-toolbar #clearSearchBtn,
.filter-toolbar #addContactTopBtn,
.filter-toolbar #contactsTasksBtn,
.filter-toolbar #contactsHelpBtn,
.filter-toolbar #twilioTopBtn,
.filter-toolbar #dripTopBtn,
.filter-toolbar #importCsvBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: auto;
  margin-top: 4px;
  min-width: 76px;
  height: 32px;
  padding: 4px 10px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}

.page-contacts-leads .filter-toolbar #applyFiltersBtn,
.page-contacts-leads .filter-toolbar #clearSearchBtn,
.page-contacts-leads .filter-toolbar #addContactTopBtn,
.page-contacts-leads .filter-toolbar #contactsTasksBtn,
.page-contacts-leads .filter-toolbar #contactsHelpBtn,
.page-contacts-leads .filter-toolbar #twilioTopBtn,
.page-contacts-leads .filter-toolbar #dripTopBtn,
.page-contacts-leads .filter-toolbar #importCsvBtn {
  min-width: 92px;
  height: 40px;
  margin-top: 0;
  padding: 7px 12px;
  font-size: 13px;
}

.page-contacts-leads .filter-toolbar #applyFiltersBtn {
  min-width: 94px;
}

.page-contacts-leads .filter-toolbar #addContactTopBtn {
  min-width: 128px;
}


.page-contacts-leads .filter-toolbar #statusFilter,
.page-contacts-leads .filter-toolbar #outcomeFilter,
.page-contacts-leads .filter-toolbar #contactsStateFilter,
.page-contacts-leads .filter-toolbar #contactsFilterSelect {
  min-width: 126px;
  height: 40px;
  line-height: 40px;
  padding: 0 30px 0 10px;
  font-size: 13px;
  border-radius: 12px;
  margin-top: 0;
}

.page-contacts-leads .filter-toolbar #contactsFilterSelect {
  min-width: 154px;
  max-width: 176px;
}

@media (max-width: 1200px) {
  .page-contacts-leads .filter-toolbar {
    gap: 5px;
  }

  .page-contacts-leads .filter-toolbar #searchInput {
    flex-basis: 220px;
    min-width: 170px;
    max-width: 240px;
  }

  .page-contacts-leads .filter-toolbar #statusFilter,
  .page-contacts-leads .filter-toolbar #contactsStateFilter,
  .page-contacts-leads .filter-toolbar #outcomeFilter,
  .page-contacts-leads .filter-toolbar #contactsFilterSelect {
    min-width: 112px;
    height: 36px;
    line-height: 36px;
    padding: 0 26px 0 9px;
    font-size: 11px;
  }

  .page-contacts-leads .filter-toolbar #contactsFilterSelect {
    min-width: 136px;
  }

  .page-contacts-leads .filter-toolbar #applyFiltersBtn,
  .page-contacts-leads .filter-toolbar #clearSearchBtn,
  .page-contacts-leads .filter-toolbar #addContactTopBtn,
  .page-contacts-leads .filter-toolbar #contactsTasksBtn,
  .page-contacts-leads .filter-toolbar #contactsHelpBtn,
  .page-contacts-leads .filter-toolbar #twilioTopBtn,
  .page-contacts-leads .filter-toolbar #dripTopBtn,
  .page-contacts-leads .filter-toolbar #importCsvBtn {
    min-width: 84px;
    height: 36px;
    padding: 6px 10px;
    font-size: 11px;
  }

  .page-contacts-leads .filter-toolbar #addContactTopBtn {
    min-width: 116px;
  }
}

@media (max-width: 1080px) {
  .page-contacts-leads .filter-toolbar {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    overflow-y: visible;
    gap: 4px;
  }

  .page-contacts-leads .filter-toolbar > * {
    flex: 0 0 auto;
    margin-top: 0;
  }

  .page-contacts-leads .toolbar-label {
    display: none;
  }

  .page-contacts-leads .filter-toolbar #searchInput {
    flex: 1 1 180px;
    width: auto;
    min-width: 140px;
    max-width: 200px;
    height: 34px;
    min-height: 34px;
    margin: 0;
    padding: 0 9px;
    line-height: 32px;
    font-size: 11px;
  }

  .page-contacts-leads .filter-toolbar #applyFiltersBtn,
  .page-contacts-leads .filter-toolbar #clearSearchBtn,
  .page-contacts-leads .filter-toolbar #statusFilter,
  .page-contacts-leads .filter-toolbar #contactsStateFilter,
  .page-contacts-leads .filter-toolbar #outcomeFilter,
  .page-contacts-leads .filter-toolbar #contactsFilterSelect,
  .page-contacts-leads .filter-toolbar #addContactTopBtn,
  .page-contacts-leads .filter-toolbar #contactsTasksBtn,
  .page-contacts-leads .filter-toolbar #contactsHelpBtn,
  .page-contacts-leads .filter-toolbar #twilioTopBtn,
  .page-contacts-leads .filter-toolbar #dripTopBtn,
  .page-contacts-leads .filter-toolbar #importCsvBtn {
    flex: 0 0 auto;
    min-width: 74px;
    height: 34px;
    padding: 5px 8px;
    font-size: 10px;
  }

  .page-contacts-leads .filter-toolbar #statusFilter,
  .page-contacts-leads .filter-toolbar #contactsStateFilter,
  .page-contacts-leads .filter-toolbar #outcomeFilter,
  .page-contacts-leads .filter-toolbar #contactsFilterSelect {
    min-width: 100px;
    height: 34px;
    line-height: 34px;
    padding: 0 24px 0 8px;
    font-size: 10px;
  }

  .page-contacts-leads .filter-toolbar #contactsFilterSelect {
    min-width: 122px;
  }

  .page-contacts-leads .filter-toolbar #addContactTopBtn {
    min-width: 102px;
  }
}

@media (max-width: 900px) {
  .page-contacts-leads .filter-toolbar {
    gap: 3px;
  }

  .page-contacts-leads .filter-toolbar #searchInput {
    flex-basis: 150px;
    width: auto;
    min-width: 120px;
    max-width: 170px;
    height: 32px;
    min-height: 32px;
    margin: 0;
    padding: 0 8px;
    line-height: 30px;
    font-size: 10px;
  }

  .page-contacts-leads .filter-toolbar #statusFilter,
  .page-contacts-leads .filter-toolbar #contactsStateFilter,
  .page-contacts-leads .filter-toolbar #outcomeFilter,
  .page-contacts-leads .filter-toolbar #contactsFilterSelect {
    min-width: 86px;
    height: 32px;
    line-height: 32px;
    padding: 0 22px 0 7px;
    font-size: 10px;
  }

  .page-contacts-leads .filter-toolbar #contactsFilterSelect {
    min-width: 108px;
  }

  .page-contacts-leads .filter-toolbar #applyFiltersBtn,
  .page-contacts-leads .filter-toolbar #clearSearchBtn,
  .page-contacts-leads .filter-toolbar #addContactTopBtn,
  .page-contacts-leads .filter-toolbar #contactsTasksBtn,
  .page-contacts-leads .filter-toolbar #contactsHelpBtn,
  .page-contacts-leads .filter-toolbar #twilioTopBtn,
  .page-contacts-leads .filter-toolbar #dripTopBtn,
  .page-contacts-leads .filter-toolbar #importCsvBtn {
    min-width: 72px;
    width: auto;
    height: 32px;
    padding: 4px 8px;
    font-size: 10px;
    line-height: 1;
    gap: 4px;
  }

  .page-contacts-leads .filter-toolbar #addContactTopBtn::before {
    margin: 0;
  }

  .page-contacts-leads .filter-toolbar #applyFiltersBtn::before,
  .page-contacts-leads .filter-toolbar #clearSearchBtn::before,
  .page-contacts-leads .filter-toolbar #twilioTopBtn::before,
  .page-contacts-leads .filter-toolbar #dripTopBtn::before {
    font-size: 12px;
  }

  .page-contacts-leads .filter-toolbar #importCsvBtn::before {
    content: "";
    display: none;
  }
}

.filter-toolbar #applyFiltersBtn::before,
.filter-toolbar #clearSearchBtn::before,
.filter-toolbar #twilioTopBtn::before,
.filter-toolbar #dripTopBtn::before {
  content: "";
  display: none;
}

.filter-toolbar #twilioTopBtn {
  min-width: 64px;
  background: linear-gradient(135deg, #0f766e, #0d9488);
  border-color: #0f766e;
}

.filter-toolbar #dripTopBtn {
  min-width: 64px;
  background: linear-gradient(135deg, #7c3aed, #6d28d9);
  border-color: #6d28d9;
}

.filter-toolbar #importCsvBtn {
  min-width: 86px;
  background: linear-gradient(135deg, #f97316, #ea580c);
  border-color: #ea580c;
}

.filter-toolbar #applyFiltersBtn {
  min-width: 74px;
}

.filter-toolbar #clearSearchBtn {
  min-width: 68px;
  background: linear-gradient(135deg, #334155, #1f2937);
  border-color: #1f2937;
  color: #ffffff;
}

.filter-toolbar #clearSearchBtn:hover {
  color: #ffffff;
}

.filter-toolbar #addContactTopBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 124px;
  height: 34px;
  padding: 5px 12px;
  border-radius: 10px;
  border: 1px solid #5b4bc4;
  background: linear-gradient(135deg, #6b5fe6 0%, #4f46cf 100%);
  box-shadow: 0 8px 18px rgba(79, 70, 207, 0.26);
  font-size: 12px;
  font-weight: 700;
}

.filter-toolbar #addContactTopBtn::before {
  content: "+";
  width: 18px;
  height: 18px;
  border: 1.5px solid rgba(255, 255, 255, 0.85);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  line-height: 1;
}

.filter-toolbar #addContactTopBtn:hover {
  background: linear-gradient(135deg, #5d51de 0%, #4338ca 100%);
  border-color: #4c40b6;
  box-shadow: 0 10px 22px rgba(67, 56, 202, 0.34);
}

.filter-toolbar #contactsTasksBtn {
  min-width: 76px;
  background: linear-gradient(135deg, #16a34a, #15803d);
  border-color: #15803d;
}

.filter-toolbar #contactsTasksBtn:hover {
  background: linear-gradient(135deg, #15803d, #166534);
  border-color: #166534;
}

.filter-toolbar #contactsHelpBtn {
  min-width: 68px;
  background: linear-gradient(135deg, #7c3aed, #6d28d9);
  border-color: #6d28d9;
}

.filter-toolbar #contactsHelpBtn:hover {
  background: linear-gradient(135deg, #6d28d9, #5b21b6);
  border-color: #5b21b6;
}

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

/* Contacts workspace Twilio popup: show only SMS or only Call when opened from Add (or bulk SMS / bulk call). */
#twilioModal.twilio-modal-mode--sms .twilio-call-column {
  display: none;
}
#twilioModal.twilio-modal-mode--sms .contact-modal-card > .grid {
  grid-template-columns: 1fr;
}

/* Compact SMS-only Twilio popup */
#twilioModal.twilio-modal-mode--sms .contact-modal-card {
  width: min(400px, calc(100% - 24px));
  max-width: 100%;
  padding: 10px 12px;
  margin: 28px auto;
}

#twilioModal.twilio-modal-mode--sms #twilioSmsPopupForm {
  font-size: 14px;
}

#twilioModal.twilio-modal-mode--sms #twilioSmsPopupForm h3 {
  font-size: 1rem;
  margin: 0 0 6px;
}

#twilioModal.twilio-modal-mode--sms #twilioSmsPopupForm textarea[name="body"] {
  min-height: 96px;
  max-height: 200px;
  font-size: 14px;
  line-height: 1.35;
  resize: vertical;
}

#twilioModal.twilio-modal-mode--sms #twilioSmsPopupForm input,
#twilioModal.twilio-modal-mode--sms #twilioSmsPopupForm select,
#twilioModal.twilio-modal-mode--sms #twilioSmsPopupForm button {
  font-size: 14px;
}

#twilioModal.twilio-modal-mode--call #twilioSmsPopupForm {
  display: none;
}
#twilioModal.twilio-modal-mode--call .contact-modal-card > .grid {
  grid-template-columns: 1fr;
}

/* Narrower call UI: standalone Call popup + slimmer call column when SMS is open too */
#twilioModal.twilio-modal-mode--call .contact-modal-card {
  width: min(360px, calc(100% - 24px));
  max-width: 100%;
  padding: 10px 12px;
  margin: 28px auto;
}

#twilioModal.twilio-modal-mode--call .twilio-call-column {
  margin-top: 0;
}

#twilioModal.twilio-modal-mode--call #twilioCallPopupForm {
  font-size: 14px;
}

#twilioModal.twilio-modal-mode--call #twilioCallPopupForm h3 {
  font-size: 1rem;
  margin: 0 0 4px;
}

#twilioModal.twilio-modal-mode--call .twilio-dialpad {
  gap: 4px;
  margin-top: 6px;
}

#twilioModal.twilio-modal-mode--call .twilio-dialpad button {
  min-height: 30px;
  padding: 4px 0;
  font-size: 13px;
}

#twilioModal.twilio-modal-mode--call .twilio-call-actions {
  margin-top: 8px;
  gap: 6px;
}

#twilioModal.twilio-modal-mode--call #twilioCallPopupForm input,
#twilioModal.twilio-modal-mode--call #twilioCallPopupForm select,
#twilioModal.twilio-modal-mode--call #twilioCallPopupForm button {
  font-size: 14px;
}

#twilioModal:not(.twilio-modal-mode--sms):not(.twilio-modal-mode--call) .contact-modal-card > .grid {
  grid-template-columns: minmax(260px, 380px) minmax(240px, 300px);
  gap: 12px;
}

#twilioModal:not(.twilio-modal-mode--sms):not(.twilio-modal-mode--call) .contact-modal-card {
  width: min(700px, calc(100% - 24px));
}

#twilioModal:not(.twilio-modal-mode--sms):not(.twilio-modal-mode--call) #twilioSmsPopupForm textarea[name="body"] {
  min-height: 110px;
  max-height: 220px;
  font-size: 14px;
  line-height: 1.35;
}
#twilioModal:not(.twilio-modal-mode--sms):not(.twilio-modal-mode--call) .twilio-dialpad button {
  min-height: 30px;
  padding: 4px 0;
  font-size: 13px;
}

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.toolbar-label {
  display: inline-flex;
  align-items: center;
  font-size: 13px;
  font-weight: 700;
  color: #6b7280;
  padding-right: 4px;
}

input,
select,
textarea,
button {
  width: 100%;
  margin-top: 6px;
  padding: 6px 8px;
  border: 1px solid #cdd8ee;
  border-radius: 10px;
  font-size: 12px;
}

button {
  cursor: pointer;
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: #ffffff;
  border: 1px solid #1d4ed8;
  border-radius: 999px;
  padding: 7px 14px;
  font-weight: 700;
  letter-spacing: 0.01em;
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.08);
  transition:
    box-shadow 0.16s ease,
    transform 0.12s ease;
}

button:hover {
  box-shadow: 0 7px 14px rgba(15, 23, 42, 0.2);
  transform: translateY(-1px);
  background: linear-gradient(135deg, #1d4ed8, #1e40af);
  border-color: #1e40af;
}

button:active {
  transform: translateY(0);
}

/* Semantic button palette: neutral / primary / communication / campaign */
#clearSearchBtn,
.clear-filters-btn,
.inline-cancel,
#cancelEditBtn,
.agile-cancel-btn {
  background: linear-gradient(135deg, #e5e7eb, #cbd5e1);
  color: #1f2937;
  border-color: #94a3b8;
}

#clearSearchBtn:hover,
.clear-filters-btn:hover,
.inline-cancel:hover,
#cancelEditBtn:hover,
.agile-cancel-btn:hover {
  background: linear-gradient(135deg, #d1d5db, #94a3b8);
  color: #0f172a;
  border-color: #64748b;
}

#twilioTopBtn,
#twilioSmsPopupForm button[type="submit"],
#twilioModal .twilio-call-column .twilio-call-actions button[type="submit"],
#twilioCallPopupForm .twilio-call-actions button[type="submit"],
#contactSummaryCallBtn,
#contactPageCallBtn,
#contactSummarySmsBtn,
#contactPageSmsBtn {
  background: linear-gradient(135deg, #0f766e, #0d9488);
  border-color: #0f766e;
  color: #ffffff;
}

#twilioTopBtn:hover,
#twilioSmsPopupForm button[type="submit"]:hover,
#twilioModal .twilio-call-column .twilio-call-actions button[type="submit"]:hover,
#twilioCallPopupForm .twilio-call-actions button[type="submit"]:hover,
#contactSummaryCallBtn:hover,
#contactPageCallBtn:hover,
#contactSummarySmsBtn:hover,
#contactPageSmsBtn:hover {
  background: linear-gradient(135deg, #0f766e, #0f766e);
  border-color: #115e59;
}

#dripTopBtn,
#addCampaignCategoryBtn,
#addCampaignCategorySidebarBtn,
#addTagRuleBtn,
#addStepBtn,
#contactSummaryAddCampaignBtn,
#contactPageAddCampaignBtn,
button.campaign-inline-edit {
  background: linear-gradient(135deg, #7c3aed, #6d28d9);
  border-color: #6d28d9;
  color: #ffffff;
}

#dripTopBtn:hover,
#addCampaignCategoryBtn:hover,
#addCampaignCategorySidebarBtn:hover,
#addTagRuleBtn:hover,
#addStepBtn:hover,
#contactSummaryAddCampaignBtn:hover,
#contactPageAddCampaignBtn:hover,
button.campaign-inline-edit:hover {
  background: linear-gradient(135deg, #6d28d9, #5b21b6);
  border-color: #5b21b6;
}

/* Keep navigation/back and editor utility controls neutral */
#backToContactsBtn,
#settingsBackBtn,
#emailCancelBtn,
#cancelTemplateEditBtn,
#landingPagesCancelEditBtn,
#contactHistoryActionPinBtn,
#contactHistoryActionStarBtn,
#prevPageBtn,
#nextPageBtn,
#emailBodyBoldBtn,
#emailBodyItalicBtn,
#emailBodyUnderlineBtn,
#emailBodyAlignLeftBtn,
#emailBodyAlignCenterBtn,
#emailBodyAlignRightBtn,
#emailBodyLinkBtn,
#emailBodyInsertPhotoBtn,
#emailBodyInsertRobotBtn,
#emailBodyInsertGraphicUrlBtn,
#emailBodyClearFormatBtn,
#emailBodyAddImageUrlBtn,
#templateBodyBoldBtn,
#templateBodyItalicBtn,
#templateBodyUnderlineBtn,
#templateBodyAlignLeftBtn,
#templateBodyAlignCenterBtn,
#templateBodyAlignRightBtn,
#templateBodyLinkBtn,
#templateBodyInsert2ColBtn,
#templateBodyInsert3ColBtn,
#templateBodyInsertGridBtn,
#templateBodyInsertPhotoBtn,
#templateBodyInsertRobotBtn,
#templateBodyInsertGraphicUrlBtn,
#templateBodyClearFormatBtn,
#templateBodyAddImageUrlBtn,
#signatureBoldBtn,
#signatureItalicBtn,
#signatureUnderlineBtn,
#signatureAlignLeftBtn,
#signatureAlignCenterBtn,
#signatureAlignRightBtn,
#signatureIndentBtn,
#signatureOutdentBtn,
#signatureLinkBtn,
#signatureInsertPhotoBtn,
#signatureInsertGraphicUrlBtn,
#signatureClearFormatBtn,
#signatureAddImageUrlBtn {
  background: linear-gradient(135deg, #e5e7eb, #cbd5e1);
  color: #1f2937;
  border-color: #94a3b8;
}

#backToContactsBtn:hover,
#settingsBackBtn:hover,
#emailCancelBtn:hover,
#cancelTemplateEditBtn:hover,
#landingPagesCancelEditBtn:hover,
#contactHistoryActionPinBtn:hover,
#contactHistoryActionStarBtn:hover,
#prevPageBtn:hover,
#nextPageBtn:hover,
#emailBodyBoldBtn:hover,
#emailBodyItalicBtn:hover,
#emailBodyUnderlineBtn:hover,
#emailBodyAlignLeftBtn:hover,
#emailBodyAlignCenterBtn:hover,
#emailBodyAlignRightBtn:hover,
#emailBodyLinkBtn:hover,
#emailBodyInsertPhotoBtn:hover,
#emailBodyInsertRobotBtn:hover,
#emailBodyInsertGraphicUrlBtn:hover,
#emailBodyClearFormatBtn:hover,
#emailBodyAddImageUrlBtn:hover,
#templateBodyBoldBtn:hover,
#templateBodyItalicBtn:hover,
#templateBodyUnderlineBtn:hover,
#templateBodyAlignLeftBtn:hover,
#templateBodyAlignCenterBtn:hover,
#templateBodyAlignRightBtn:hover,
#templateBodyLinkBtn:hover,
#templateBodyInsert2ColBtn:hover,
#templateBodyInsert3ColBtn:hover,
#templateBodyInsertGridBtn:hover,
#templateBodyInsertPhotoBtn:hover,
#templateBodyInsertRobotBtn:hover,
#templateBodyInsertGraphicUrlBtn:hover,
#templateBodyClearFormatBtn:hover,
#templateBodyAddImageUrlBtn:hover,
#signatureBoldBtn:hover,
#signatureItalicBtn:hover,
#signatureUnderlineBtn:hover,
#signatureAlignLeftBtn:hover,
#signatureAlignCenterBtn:hover,
#signatureAlignRightBtn:hover,
#signatureIndentBtn:hover,
#signatureOutdentBtn:hover,
#signatureLinkBtn:hover,
#signatureInsertPhotoBtn:hover,
#signatureInsertGraphicUrlBtn:hover,
#signatureClearFormatBtn:hover,
#signatureAddImageUrlBtn:hover {
  background: linear-gradient(135deg, #d1d5db, #94a3b8);
  color: #0f172a;
  border-color: #64748b;
}

/* Communication actions not covered by Twilio popup selectors */
#contactModalSmsBtn,
#contactModalCallBtn,
#contactTwilioEndCallBtn {
  background: linear-gradient(135deg, #0f766e, #0d9488);
  border-color: #0f766e;
  color: #ffffff;
}

#contactModalSmsBtn:hover,
#contactModalCallBtn:hover,
#contactTwilioEndCallBtn:hover {
  background: linear-gradient(135deg, #0f766e, #115e59);
  border-color: #115e59;
}

/* Preserve dark sidebar button style in drip dashboard */
.drip-sidebar #backToContactsBtn,
.drip-sidebar #backToContactsBtn:hover {
  background: #142852;
  color: #dbeafe;
  border-color: #2a4d95;
  box-shadow: none;
  transform: none;
}

.table-action-btn {
  width: auto;
  margin-top: 0;
  padding: 6px 12px;
}

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

.contacts-header h2 {
  margin: 0;
  font-size: 30px;
  font-weight: 300;
  color: #4b5563;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* Contacts workspace: state filter dropdown next to total count */
.contacts-count-with-state-filter {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.contacts-state-filter-wrap {
  position: relative;
  flex-shrink: 0;
}

.contacts-state-filter-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: #1e5fbf;
  color: #ffffff;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
}

.contacts-state-filter-btn:hover {
  background: #2563eb;
}

.contacts-state-filter-btn.is-active {
  background: #164a9e;
}

.contacts-state-filter-panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 60;
  min-width: 228px;
  max-height: min(320px, 70vh);
  overflow-y: auto;
  margin: 0;
  padding: 6px 0;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  box-shadow: 0 12px 40px rgba(15, 23, 42, 0.14);
}

.contacts-state-filter-option {
  display: block;
  width: 100%;
  padding: 9px 14px;
  border: none;
  background: transparent;
  text-align: left;
  font-size: 14px;
  color: #334155;
  cursor: pointer;
}

.contacts-state-filter-option:hover {
  background: #f1f5f9;
}

.contacts-state-filter-option.is-selected {
  font-weight: 700;
  background: #eef2ff;
  color: #1e40af;
}

.crumb-sep {
  color: #98a2b3;
  margin: 0 4px;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.contacts-summary {
  color: #717b8e;
  font-size: 12px;
}

.contacts-ai-score-btn {
  width: auto;
  margin-top: 0;
  min-width: 112px;
  min-height: 34px;
  padding: 7px 12px;
  border-radius: 10px;
  border-color: #6d28d9;
  background: linear-gradient(135deg, #4f46e5, #7c3aed);
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  box-shadow: 0 7px 18px rgba(79, 70, 229, 0.24);
}

.contacts-ai-score-btn:hover {
  color: #ffffff;
  border-color: #5b21b6;
  background: linear-gradient(135deg, #4338ca, #6d28d9);
}

.contacts-quick-filter-inline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 6px;
}

/* Group the three inline filter spans (Quick Filter, Sort By, Created) so the
   Created date range can wrap onto its own line and stay aligned with the
   Quick Filter label rather than re-aligning to the left edge under "X Total". */
.contacts-filter-row-group {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-left: 6px;
}

.contacts-filter-row-group .contacts-quick-filter-inline {
  margin-left: 0;
}

.contacts-filter-row-group .contacts-date-range-inline {
  flex-basis: 100%;
  margin-top: 4px;
  margin-bottom: 20px;
}

.contacts-quick-filter-inline label {
  font-size: 13px;
  color: #6b7280;
  font-weight: 600;
}

#quickFilterField,
#quickFilterDropdown,
.tags-filter-term.tags-filter-value-box {
  margin-top: 0;
  padding: 6px 10px;
  font-size: 13px;
}

#statusHeaderDropdown,
#createdDateFrom,
#createdDateTo {
  margin-top: 0;
  padding: 4px 8px;
  font-size: 12px;
}

#quickFilterField,
#quickFilterDropdown {
  width: auto;
  min-width: 150px;
}

.contacts-quick-filter-inline .tags-filter-value-label {
  font-size: 13px;
  color: #6b7280;
  font-weight: 600;
}

.tags-filter-value-box {
  /* Same minimum width as #quickFilterDropdown */
  min-width: 150px;
  max-width: 320px;
}

.tags-filter-term {
  width: auto;
  min-width: 150px;
  max-width: 320px;
  box-sizing: border-box;
}

#statusHeaderDropdown {
  width: auto;
  min-width: 150px;
}

.contacts-date-range-inline {
  gap: 4px;
}

.contacts-date-range-sep {
  font-size: 12px;
  color: #6b7280;
  font-weight: 600;
}

#createdDateFrom,
#createdDateTo {
  width: auto;
  min-width: 140px;
}

.tags-filter-term:disabled {
  background: #e2e8f0;
  color: #64748b;
}

.contacts-top-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

/* Contacts workspace: full-width page line (main column) above the arrow buttons */
.page-contacts-leads .contacts-layout-panel .contacts-top-meta.contacts-top-meta--paginated {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  width: 100%;
}

.page-contacts-leads .contacts-layout-panel .contacts-pagination-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  width: 100%;
}

.page-contacts-leads .contacts-layout-panel .contacts-filter-page-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  min-height: 30px;
  padding: 4px 8px 6px 0;
  border-bottom: 1px solid #cbd5e1;
}

.page-contacts-leads .contacts-layout-panel .contacts-filter-page-line .sort-meta {
  margin: 0;
  flex-shrink: 0;
  white-space: nowrap;
  font-size: 14px;
  line-height: 1.35;
}

.page-contacts-leads .contacts-layout-panel .contacts-meta-divider-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  min-height: 30px;
  padding: 4px 8px 6px 0;
  border-bottom: 1px solid #cbd5e1;
}

.page-contacts-leads .contacts-layout-panel .contacts-meta-divider-line .sort-meta {
  flex: 0 0 auto;
  white-space: nowrap;
  font-size: 13px;
  line-height: 1.35;
}

.page-contacts-leads .contacts-layout-panel .contacts-pagination-row #pageInfo.contacts-pagination-page {
  flex: 0 0 auto;
  text-align: right;
  white-space: nowrap;
  font-size: 14px;
  line-height: 1.35;
  padding: 0;
  border-bottom: none;
  min-height: 0;
  display: block;
}

.page-contacts-leads .contacts-layout-panel .contacts-pagination-row .pagination-bar {
  margin-bottom: 0;
  flex-shrink: 0;
}

.active-filters-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.active-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.filter-chip {
  display: inline-block;
  font-size: 11px;
  padding: 4px 8px;
  border-radius: 999px;
  background: #eef3ff;
  color: #274690;
}

.clear-filters-btn {
  width: auto;
  margin-top: 0;
  padding: 6px 10px;
  background: #64748b;
  color: #fff;
}

.clear-filters-btn:hover {
  background: #475569;
  color: #fff;
}

.sort-meta {
  font-size: 12px;
  color: #6b7280;
}

.contacts-layout {
  display: block;
}

.contacts-main {
  min-width: 0;
}

/* Contacts list: card layout on phones (table on desktop) */
.page-contacts-leads .contacts-mobile-select-all {
  display: none;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  font-size: 14px;
  font-weight: 600;
  color: #334155;
}

.page-contacts-leads .contacts-mobile-select-all input {
  width: 18px;
  height: 18px;
  margin: 0;
}

.page-contacts-leads .contacts-mobile-list {
  display: none;
  gap: 10px;
}

.page-contacts-leads .contacts-mobile-card {
  border: 1px solid #dbe4f6;
  border-radius: 10px;
  background: #ffffff;
  padding: 12px;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
  cursor: pointer;
}

.page-contacts-leads .contacts-mobile-card-head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.page-contacts-leads .contacts-mobile-card-head .row-select {
  width: 18px;
  height: 18px;
  margin: 4px 0 0;
  flex-shrink: 0;
}

.page-contacts-leads .contacts-mobile-card-head .basic-info-cell {
  flex: 1;
  min-width: 0;
}

.page-contacts-leads .contacts-mobile-pills {
  display: grid;
  gap: 12px;
  margin-top: 10px;
}

.page-contacts-leads .contacts-mobile-pill-field {
  display: grid;
  gap: 4px;
}

.page-contacts-leads .contacts-mobile-pill-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #64748b;
}

.page-contacts-leads .contacts-mobile-card .status-pill,
.page-contacts-leads .contacts-mobile-card .outcome-pill {
  width: 100%;
  margin: 0;
  border-radius: 10px;
  padding: 6px 5px;
  font-size: 11.5px;
  line-height: 1.28;
  font-weight: 600;
}

.page-contacts-leads .contacts-mobile-card .lead-source-pill {
  width: 100%;
  margin: 0;
  border-radius: 10px;
  padding: 6px 5px;
  font-size: 11.5px;
  line-height: 1.28;
  font-weight: 600;
  background: #4f46e5;
  color: #ffffff;
}

.page-contacts-leads .contacts-mobile-card .lead-source-pill.lead-source-pill--referral {
  background: #be185d;
  color: #ffffff;
}

.page-contacts-leads .contacts-mobile-notes {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #e2e8f0;
}

.page-contacts-leads .contacts-mobile-meta-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #64748b;
  margin-bottom: 4px;
}

.page-contacts-leads .contacts-mobile-notes-text {
  font-size: 13px;
  color: #334155;
  line-height: 1.4;
}

.page-contacts-leads .contacts-mobile-footer {
  display: grid;
  gap: 10px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #e2e8f0;
}

.page-contacts-leads .contacts-layout-panel td.contacts-col-quote,
.page-contacts-leads .contacts-layout-panel td.contacts-col-quote strong {
  font-weight: 700;
  color: #0f172a;
}

.page-contacts-leads .contacts-mobile-quote strong {
  font-size: 15px;
  font-weight: 700;
  color: #0f172a;
}

.page-contacts-leads .contacts-mobile-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.page-contacts-leads .contacts-mobile-muted {
  color: #94a3b8;
  font-size: 13px;
}

.page-contacts-leads .contacts-mobile-empty {
  padding: 20px 12px;
  text-align: center;
  color: #64748b;
  font-size: 14px;
  border: 1px dashed #cbd5e1;
  border-radius: 10px;
  background: #f8fafc;
}

@media (max-width: 768px) {
  .page-contacts-leads .contacts-mobile-select-all {
    display: flex;
  }

  .page-contacts-leads .contacts-table-wrap {
    display: none;
  }

  .page-contacts-leads .contacts-mobile-list {
    display: grid;
  }

  .page-contacts-leads .bulk-actions {
    flex-wrap: wrap;
  }

  .page-contacts-leads .bulk-actions-label {
    flex: 1 1 100%;
  }

  .page-contacts-leads #bulkActionSelect {
    flex: 1 1 100%;
    min-width: 0;
  }
}

/* ── Contacts segment tabs (All / Leads / Clients) ───────────────────────── */
.contacts-view-tabs {
  display: flex;
  gap: 4px;
  padding: 14px 16px 0;
  border-bottom: 2px solid #e2e8f0;
  margin-bottom: 0;
}

.contacts-view-tab {
  position: relative;
  padding: 8px 22px 10px;
  font: 600 13px/1 system-ui, Segoe UI, Arial, sans-serif;
  color: #64748b;
  background: none;
  border: none;
  border-radius: 6px 6px 0 0;
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
  bottom: -2px;
  border-bottom: 2px solid transparent;
}

.contacts-view-tab:hover {
  color: #1e293b;
  background: #f1f5f9;
}

.contacts-view-tab.active {
  color: #6d28d9;
  border-bottom: 2px solid #7c3aed;
  background: none;
}

/* All Contacts tab active: purple */
.contacts-view-tab[data-view="all"].active {
  color: #6d28d9;
  border-bottom-color: #7c3aed;
}

/* Leads tab active: blue-indigo */
.contacts-view-tab[data-view="leads"].active {
  color: #1e40af;
  border-bottom-color: #1e40af;
}

/* Clients tab active: emerald green */
.contacts-view-tab[data-view="clients"].active {
  color: #065f46;
  border-bottom-color: #059669;
}

/* Light color-coded shading so all three tabs stand out, not just the active one */
.contacts-view-tab[data-view="all"] {
  background: #f5f3ff;
  color: #6d28d9;
}
.contacts-view-tab[data-view="leads"] {
  background: #eff6ff;
  color: #1e40af;
}
.contacts-view-tab[data-view="clients"] {
  background: #ecfdf5;
  color: #065f46;
}
.contacts-view-tab[data-view="all"].active {
  background: #ede9fe;
}
.contacts-view-tab[data-view="leads"].active {
  background: #dbeafe;
}
.contacts-view-tab[data-view="clients"].active {
  background: #d1fae5;
}

/* Extra breathing room between tabs and the Total count label */
.contacts-view-tabs + .contacts-header {
  padding-top: 14px;
}

.tab-count-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  font-size: 11px;
  font-weight: 700;
  border-radius: 10px;
  background: #e2e8f0;
  color: #475569;
  vertical-align: middle;
  line-height: 1.6;
}
.contacts-view-tab.active .tab-count-badge {
  background: #ede9fe;
  color: #6d28d9;
}
.contacts-view-tab[data-view="leads"].active .tab-count-badge {
  background: #dbeafe;
  color: #1e40af;
}
.contacts-view-tab[data-view="clients"].active .tab-count-badge {
  background: #d1fae5;
  color: #065f46;
}

/* ── End contacts segment tabs ───────────────────────────────────────────── */

/* Slightly larger typography in Contacts Workspace section */
.contacts-layout-panel .contacts-header h2 {
  font-size: 32px;
}

.contacts-layout-panel table {
  font-size: 14px;
}

.contacts-layout-panel thead th {
  font-size: 13px;
}

.contacts-sort-th {
  background: none;
  border: none;
  font: inherit;
  color: inherit;
  padding: 0;
  margin: 0;
  cursor: pointer;
  text-align: left;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.contacts-sort-th:hover {
  text-decoration: underline;
}

.contacts-sort-th .contacts-sort-arrow {
  font-size: 11px;
  opacity: 0.85;
  min-width: 0.9em;
  display: inline-block;
}

.contacts-sort-th.is-active {
  font-weight: 600;
}

.contacts-layout-panel .contact-name {
  font-size: 15px;
}

.contacts-layout-panel .contact-sub {
  font-size: 14px;
}

.contacts-layout-panel .avatar {
  font-size: 14px;
}

/**
 * Unified label sizing across Status, Outcome, Lead Source, and Tags columns.
 * All four share the same font-size + weight + padding so they read as a
 * single visual family even though their colors differ.
 */
.contacts-layout-panel .tag-chip,
.contacts-layout-panel .status-pill,
.contacts-layout-panel .outcome-pill,
.contacts-layout-panel .lead-source-pill {
  font-size: 12px;
  font-weight: 600;
  padding: 2px 8px;
  line-height: 1.4;
}

.contacts-layout-panel .outcome-pill.outcome-sold {
  font-size: 15px;
  font-weight: 700;
  padding: 3px 10px;
}

/* Contacts list: Status + Outcome — same rounded bar treatment as Lead Source */
.page-contacts-leads .contacts-layout-panel table th.contacts-col-status,
.page-contacts-leads .contacts-layout-panel table td.contacts-col-status {
  width: 10%;
  min-width: 86px;
  padding: 7px 6px;
  text-align: center;
  vertical-align: middle;
}

.page-contacts-leads .contacts-layout-panel table th.contacts-col-outcome,
.page-contacts-leads .contacts-layout-panel table td.contacts-col-outcome {
  width: 12%;
  min-width: 100px;
  padding: 7px 6px;
  text-align: center;
  vertical-align: middle;
}

.page-contacts-leads .contacts-layout-panel td.contacts-col-status .status-pill,
.page-contacts-leads .contacts-layout-panel td.contacts-col-outcome .outcome-pill {
  display: block;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  margin: 0;
  border-radius: 10px;
  text-align: center;
  padding: 6px 5px;
  line-height: 1.28;
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.page-contacts-leads .contacts-layout-panel td.contacts-col-outcome .outcome-pill:not(.outcome-sold):not(.outcome-call-back) {
  background: #6b7280;
  color: #ffffff;
}

.page-contacts-leads .contacts-layout-panel td.contacts-col-outcome .outcome-pill.outcome-sold {
  background: #b8860b;
  color: #ffffff;
  font-size: 11.5px;
  font-weight: 600;
  padding: 6px 5px;
}

.page-contacts-leads .contacts-layout-panel td.contacts-col-outcome .outcome-pill.outcome-call-back {
  background: #fb923c;
  color: #ffffff;
}

.page-contacts-leads .contacts-layout-panel table th.contacts-col-lead-source,
.page-contacts-leads .contacts-layout-panel table td.contacts-col-lead-source {
  width: 10%;
  min-width: 86px;
  padding: 7px 6px 7px 6px;
  text-align: center;
  vertical-align: middle;
}

.page-contacts-leads .contacts-layout-panel td.contacts-col-lead-source .lead-source-pill {
  display: block;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  margin: 0;
  border-radius: 10px;
  text-align: center;
  padding: 6px 5px;
  line-height: 1.28;
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background: #4f46e5;
  color: #ffffff;
}

.page-contacts-leads .contacts-layout-panel table th.contacts-col-notes,
.page-contacts-leads .contacts-layout-panel table td.contacts-col-notes {
  padding-left: 16px;
  padding-right: 8px;
}

.page-contacts-leads .contacts-layout-panel table th.contacts-col-notes {
  text-align: center;
}

.page-contacts-leads .contacts-layout-panel td.contacts-col-lead-source .lead-source-pill.lead-source-pill--referral {
  background: #be185d;
  color: #ffffff;
}

/* Contacts list: gray Status tags → very light purple (colored statuses unchanged) */
.page-contacts-leads .contacts-layout-panel td.contacts-col-status .status-pill[class="status-pill"],
.page-contacts-leads .contacts-layout-panel td.contacts-col-status .status-pill.status-sold,
.page-contacts-leads .contacts-layout-panel td.contacts-col-status .status-pill.status-quotem,
.page-contacts-leads .contacts-layout-panel td.contacts-col-status .status-pill.status-no-interest {
  background: #f5f3ff;
  color: #334155;
}

.page-contacts-leads .contacts-layout-panel td.contacts-col-status .status-pill.status-new {
  background: #2563eb;
  color: #ffffff;
}

.page-contacts-leads .contacts-layout-panel td.contacts-col-status .status-pill.status-approved {
  background: #16a34a;
  color: #ffffff;
}

.page-contacts-leads .contacts-layout-panel td.contacts-col-status .status-pill.status-closed,
.page-contacts-leads .contacts-layout-panel td.contacts-col-status .status-pill.status-declined,
.page-contacts-leads .contacts-layout-panel td.contacts-col-status .status-pill.status-referred {
  background: #7c3aed;
  color: #ffffff;
}

.page-contacts-leads .contacts-layout-panel td.contacts-col-status .status-pill.status-aps,
.page-contacts-leads .contacts-layout-panel td.contacts-col-status .status-pill.status-pending {
  background: #eab308;
  color: #ffffff;
}

.contacts-layout-panel .contacts-summary,
.contacts-layout-panel .sort-meta,
.contacts-layout-panel .contacts-quick-filter-inline label {
  font-size: 14px;
}

.contacts-layout-panel #quickFilterDropdown,
.contacts-layout-panel #statusHeaderDropdown,
.contacts-layout-panel #createdDateFrom,
.contacts-layout-panel #createdDateTo {
  font-size: 14px;
}

.contacts-layout-panel .filter-chip {
  font-size: 13px;
}

.contacts-layout-panel .contacts-top-meta #pageInfo.hint,
.contacts-layout-panel .pagination-bar .hint {
  font-size: 14px;
}

.contacts-layout-panel .bulk-actions-label {
  font-size: 16px;
}

.bulk-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
  position: static;
  align-items: center;
  background: #1e5fbf;
  border: 1px solid #1a54a8;
  border-radius: 4px;
  padding: 8px 10px;
}

.bulk-actions button {
  width: auto;
  margin-top: 0;
  padding: 6px 12px;
  font-size: 11px;
  font-weight: 600;
  background: #ffffff;
  color: #1e5fbf;
  border-color: #ffffff;
}

.bulk-actions button:hover {
  background: #eef3ff;
  color: #1e5fbf;
}

.bulk-actions-label {
  font-size: 15px;
  font-weight: 400;
  color: #ffffff;
  align-self: center;
}

.bulk-actions .hint,
.bulk-actions #selectedCount {
  color: rgba(255, 255, 255, 0.92);
}

#bulkActionSelect {
  width: auto;
  min-width: 220px;
  margin-top: 0;
  background: #ffffff;
  color: #1f2937;
  border-color: #ffffff;
  font-size: 15px;
  padding: 8px 10px;
}

#applyBulkActionBtn {
  width: auto;
  margin-top: 0;
  min-width: 92px;
  padding: 10px 18px;
  font-size: 14px;
}

button.danger {
  background: #b71c1c;
  color: #ffffff;
}

button.danger:hover {
  background: #8f1515;
}

.basic-info-cell {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.clickable-contact {
  cursor: pointer;
}

#contactsBody tr {
  cursor: pointer;
  transition: background 0.1s;
}

#contactsBody tr:hover {
  background: #e8eef6;
}

#contactsBody tr input,
#contactsBody tr button,
#contactsBody tr a,
#contactsBody tr select {
  cursor: auto;
}

/* Plain contact name (not a link): hand cursor, no underline or visited color */
.contact-name-hit {
  cursor: pointer;
  color: inherit;
  text-decoration: none;
}

.avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #e8eefc;
  color: #1c3f95;
  font-size: 13px;
  font-weight: 700;
  flex: 0 0 34px;
}

.contact-name {
  font-weight: 700;
  margin-bottom: 1px;
  color: #374151;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.contact-sub {
  font-size: 12px;
  color: #8a93a6;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tag-chip {
  display: inline-block;
  font-size: 10px;
  padding: 2px 7px;
  border-radius: 999px;
  background: #eef2f7;
  color: #6b7280;
  margin: 2px 4px 2px 0;
}

.status-pill {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 999px;
  background: #f1f5f9;
  color: #334155;
}

/* Contacts workspace Lead Source column — neutral pill that matches the Status pill family. */
.lead-source-pill {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 999px;
  background: #eef2f7;
  color: #475569;
}

.ai-score-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 54px;
  border-radius: 999px;
  padding: 2px 7px;
  font-size: 10px;
  font-weight: 800;
  color: #ffffff;
  background: #64748b;
}

.ai-score-pill--hot {
  background: #dc2626;
}

.ai-score-pill--warm {
  background: #d97706;
}

.ai-score-pill--cool {
  background: #2563eb;
}

.ai-score-pill--empty {
  color: #475569;
  background: #e2e8f0;
}

.contact-sub-ai-score {
  margin-top: 4px;
}

.contact-summary-score-row {
  margin-top: 8px;
}

.contact-summary-score-row .ai-score-pill {
  min-width: 92px;
  padding: 4px 10px;
  font-size: 12px;
}

.contact-urgency-alert {
  position: relative;
  margin: 12px 0 14px;
  padding: 12px 36px 12px 14px;
  border: 1px solid #f59e0b;
  border-left: 5px solid #d97706;
  border-radius: 10px;
  background: #fffbeb;
  color: #92400e;
  font-size: 0.94rem;
  line-height: 1.45;
  box-shadow: 0 8px 18px rgba(217, 119, 6, 0.12);
}

.contact-urgency-alert-dismiss {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: #92400e;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.contact-urgency-alert-dismiss:hover {
  background: rgba(217, 119, 6, 0.12);
  color: #78350f;
}

.contact-urgency-alert-dismiss:focus-visible {
  outline: 2px solid #d97706;
  outline-offset: 1px;
}

.contact-urgency-alert::before {
  content: "!";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  margin-right: 8px;
  border-radius: 50%;
  background: #f59e0b;
  color: #ffffff;
  font-size: 13px;
  font-weight: 900;
}

.contact-urgency-alert strong {
  color: #78350f;
}

.contact-urgency-alert span {
  font-weight: 800;
}

.contact-ai-panel .contact-urgency-alert {
  margin: 12px 0 16px;
  color: #92400e;
}

.contact-ai-panel .contact-urgency-alert strong {
  color: #78350f;
}

.contact-ai-panel .contact-urgency-alert span {
  color: #92400e;
}

.contact-ai-panel,
.campaign-ai-panel {
  margin-top: 16px;
}

.contact-ai-panel-head,
.campaign-ai-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}

.contact-ai-result,
.campaign-ai-result {
  margin-top: 10px;
}

.contact-ai-result-card,
.campaign-ai-card,
.contact-history-ai-detail {
  border: 1px solid #dbeafe;
  border-radius: 12px;
  padding: 12px;
  background: #eff6ff;
  color: #1e3a8a;
}

/* Contact workspace status column — label shades */
.status-new {
  background: #dbeafe;
  color: #1d4ed8;
}

.status-approved {
  background: #dcfce7;
  color: #15803d;
}

.status-pending {
  background: #ede9fe;
  color: #6d28d9;
}

.status-aps {
  background: #ffedd5;
  color: #c2410c;
}

.status-referred {
  background: #fce7f3;
  color: #9f1239;
}

.status-declined {
  background: #fee2e2;
  color: #b91c1c;
}

.status-closed {
  background: #fee2e2;
  color: #b91c1c;
}

.status-sold {
  background: #eef2f7;
  color: #6b7280;
}

.status-quotem {
  background: #eef2f7;
  color: #6b7280;
}

.status-no-interest {
  background: #eef2f7;
  color: #6b7280;
}

/* Contacts workspace Outcome column */
.outcome-pill {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 999px;
}

.outcome-pill.outcome-sold {
  background: #fef9c3;
  color: #a16207;
}

.outcome-pill.outcome-call-back {
  background: #fb923c;
  color: #ffffff;
}

.inline-edit {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin-top: 6px;
  flex-wrap: wrap;
}

.inline-edit .inline-status,
.inline-edit .inline-tags {
  margin-top: 0;
}

.inline-edit .inline-tags {
  min-width: 130px;
}

.inline-edit .inline-full-name {
  min-width: 160px;
}

.inline-edit .inline-email {
  min-width: 180px;
}

.inline-edit .inline-phone {
  min-width: 130px;
}

.inline-edit .inline-notes {
  min-width: 180px;
}

.inline-edit-actions {
  display: inline-flex;
  gap: 6px;
  align-items: center;
}

.inline-cancel {
  background: #64748b;
}

.inline-cancel:hover {
  background: #475569;
}

.pagination-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
}

.pagination-bar button {
  width: 24px;
  min-width: 24px;
  height: 22px;
  margin-top: 0;
  padding: 0;
  text-align: center;
  line-height: 20px;
  font-size: 14px;
}

.page-contacts-leads .pagination-bar button {
  width: 30px;
  min-width: 30px;
  height: 28px;
  line-height: 26px;
  font-size: 16px;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  table-layout: fixed;
}

th,
td {
  border-bottom: 1px solid #eceff5;
  text-align: left;
  padding: 8px 8px;
  vertical-align: middle;
}

thead th {
  font-size: 11px;
  font-weight: 700;
  color: #7d8698;
  text-transform: none;
  letter-spacing: 0;
  background: #f6f8fc;
  height: 34px;
}

th:nth-child(1),
td:nth-child(1) {
  width: 26px;
}

th:nth-child(2),
td:nth-child(2) {
  width: 220px;
}

th:nth-child(3),
td:nth-child(3) {
  width: 84px;
}

th:nth-child(4),
td:nth-child(4) {
  width: 140px;
}

th:nth-child(5),
td:nth-child(5) {
  width: 92px;
}

th:nth-child(6),
td:nth-child(6) {
  width: 170px;
}

th:nth-child(7),
td:nth-child(7) {
  width: 58px;
}

th:nth-child(8),
td:nth-child(8) {
  width: 120px;
}

th:nth-child(9),
td:nth-child(9) {
  width: 40px;
}

.hint {
  color: #666;
  font-size: 13px;
}

.import-hint {
  margin: 8px 0 0;
}

.filters button[type="button"] {
  margin-top: 8px;
}

.contacts-main tbody tr:nth-child(odd) {
  background: #ffffff;
}

.contacts-main tbody tr:nth-child(even) {
  background: #f4f6fb;
}

.contacts-main tbody tr:hover {
  background: #e8eef6;
}

tbody tr {
  height: 52px;
}

tbody tr:hover {
  background: #fbfdff;
}

.contacts-main td:nth-child(4),
.contacts-main td:nth-child(5),
.contacts-main td:nth-child(6),
.contacts-main td:nth-child(7) {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.menu-btn {
  width: 28px;
  min-width: 28px;
  padding: 0;
  height: 24px;
  font-size: 18px;
  line-height: 20px;
  border: none;
  background: transparent;
  color: #6b7280;
}

.menu-btn:hover {
  background: #eef2f7;
}

.edit-btn {
  min-width: 48px;
  padding: 3px 10px;
  font-size: 11px;
  line-height: 1.25;
  background: #1e5fbf;
  color: #ffffff;
  border: 1px solid #1a54a8;
  border-radius: 3px;
}

.page-contacts-leads .edit-btn {
  min-width: 56px;
  padding: 5px 12px;
  font-size: 12px;
}

.edit-btn:hover {
  background: #1a54a8;
  border-color: #174a94;
}

.row-actions {
  white-space: nowrap;
}

.contact-modal.hidden {
  display: none;
}

.contact-modal {
  position: fixed;
  inset: 0;
  z-index: 1200;
}

.contact-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(17, 24, 39, 0.45);
}

.contact-modal-card {
  position: relative;
  z-index: 1;
  width: min(920px, calc(100% - 24px));
  margin: 48px auto;
  background: #fff;
  border-radius: 8px;
  border: 1px solid #dbe2ef;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.25);
  padding: 14px;
}

.morning-briefing-modal .contact-modal-backdrop {
  background: rgba(15, 23, 42, 0.52);
}

.morning-briefing-card {
  width: min(760px, calc(100% - 24px));
  margin-top: 72px;
  border: 1px solid rgba(79, 70, 229, 0.2);
  border-radius: 18px;
  padding: 22px;
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.3);
}

.morning-briefing-header {
  align-items: flex-start;
  padding-bottom: 14px;
  border-bottom: 1px solid #e2e8f0;
}

.morning-briefing-header h3 {
  margin-top: 2px;
  color: #172554;
  font-size: 26px;
  line-height: 1.15;
}

.morning-briefing-eyebrow {
  margin: 0;
  color: #4f46e5;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.morning-briefing-content {
  padding: 16px 0 4px;
}

.morning-briefing-quote {
  margin: 0 0 16px;
  padding: 14px 16px;
  border: 1px solid #c7d2fe;
  border-radius: 14px;
  background: linear-gradient(135deg, #eef2ff 0%, #faf5ff 100%);
}

.morning-briefing-quote-label {
  margin: 0 0 6px;
  color: #4f46e5;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.morning-briefing-quote-text {
  margin: 0;
  color: #1e293b;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.45;
  font-style: italic;
}

.morning-briefing-quote-author {
  display: block;
  margin-top: 8px;
  color: #64748b;
  font-size: 13px;
  font-weight: 600;
  font-style: normal;
}

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

.morning-briefing-stat {
  padding: 12px;
  border: 1px solid #dbe4ff;
  border-radius: 14px;
  background: linear-gradient(180deg, #f8faff 0%, #eef2ff 100%);
}

.morning-briefing-stat span {
  display: block;
  color: #64748b;
  font-size: 12px;
  font-weight: 700;
}

.morning-briefing-stat strong {
  display: block;
  margin-top: 4px;
  color: #111827;
  font-size: 28px;
  line-height: 1;
}

.morning-briefing-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 14px;
  margin-top: 16px;
}

.morning-briefing-panel {
  padding: 14px;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  background: #ffffff;
}

.morning-briefing-panel h4 {
  margin: 0 0 8px;
  color: #1e293b;
  font-size: 14px;
}

.morning-briefing-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.morning-briefing-list li {
  padding: 8px 0;
  border-top: 1px solid #edf2f7;
  color: #334155;
  font-size: 13px;
  line-height: 1.35;
}

.morning-briefing-list li:first-child {
  border-top: 0;
}

.morning-briefing-empty {
  margin: 0;
  color: #64748b;
  font-size: 13px;
}

.morning-briefing-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 16px;
}

.morning-briefing-actions button,
.morning-briefing-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid #cbd5e1;
  background: #ffffff;
  color: #334155;
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
}

.morning-briefing-primary {
  border-color: #4f46e5;
  background: linear-gradient(135deg, #312e81 0%, #4f46e5 54%, #7c3aed 100%);
  color: #ffffff;
  box-shadow: 0 10px 22px rgba(79, 70, 229, 0.28);
}

@media (max-width: 720px) {
  .morning-briefing-card {
    margin-top: 24px;
    max-height: calc(100vh - 48px);
    overflow-y: auto;
  }

  .morning-briefing-grid,
  .morning-briefing-split {
    grid-template-columns: 1fr;
  }

  .morning-briefing-actions {
    flex-direction: column;
  }
}

/**
 * Draggable contact-modal popups (Twilio Send SMS / Start Call etc.):
 * the user can grab the header to reposition the card anywhere on screen.
 * Activated by `data-draggable="1"` on the `.contact-modal` element.
 * When dragged we switch the card from margin-centered to absolute positioning
 * so left/top can be applied directly.
 */
.contact-modal[data-draggable="1"] .contact-modal-header {
  cursor: grab;
  user-select: none;
  touch-action: none;
  padding-right: 4px;
}
.contact-modal[data-draggable="1"] .contact-modal-header::before {
  content: "\2630";
  color: #94a3b8;
  font-size: 14px;
  margin-right: 6px;
  line-height: 1;
  flex: 0 0 auto;
}
.contact-modal[data-draggable="1"] .contact-modal-header.is-dragging,
.contact-modal[data-draggable="1"] .contact-modal-header.is-dragging::before {
  cursor: grabbing;
}
.contact-modal[data-draggable="1"] .contact-modal-header .contact-modal-close {
  cursor: pointer;
}
.contact-modal[data-draggable="1"] .contact-modal-card.is-dragged {
  margin: 0 !important;
  position: absolute;
}

.contact-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.contact-modal-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #334155;
}

.contact-modal-close {
  position: relative;
  width: 30px;
  min-width: 30px;
  height: 28px;
  padding: 0;
  margin-top: 0;
  line-height: 1;
  font-size: 0;
  color: transparent;
  background: transparent;
  border: 0;
  overflow: hidden;
}

.contact-modal-close::after {
  content: "\00d7";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 400;
  line-height: 1;
  color: #64748b;
}

.contact-modal-form {
  display: grid;
  gap: 8px;
  max-height: min(76vh, 760px);
  overflow: auto;
  padding-right: 2px;
}

.contact-modal-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.contact-modal-form input,
.contact-modal-form select,
.contact-modal-form textarea {
  margin-top: 0;
}

#contactPageForm input,
#contactPageForm select,
#contactPageForm textarea,
#contactPageForm .contact-modal-field-label {
  font-size: 14px;
}

/* Let Contact Details extend further down than generic modal forms. */
#contactPageForm.contact-modal-form {
  max-height: none;
  overflow: visible;
  padding-right: 0;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

#contactPageForm.contact-modal-form::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.contact-full-mode-pending .contact-history-panel,
.contact-full-mode .contact-history-panel {
  display: none;
}

.contact-full-mode-pending .contact-details-layout,
.contact-full-mode .contact-details-layout {
  grid-template-columns: minmax(0, 1fr);
}

.contact-details-toolbar {
  position: static;
  z-index: 8;
  display: grid;
  grid-template-columns: minmax(210px, 280px) minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  margin-bottom: 16px;
  padding: 10px 12px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.05);
}

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

.contact-details-primary-actions button,
.contact-details-more-actions summary {
  width: auto;
  min-width: 104px;
  min-height: 34px;
  margin: 0;
  padding: 7px 12px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 800;
}

.contact-details-primary-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.contact-details-primary-actions button svg,
.contact-details-sticky-save #contactPageSaveBtn svg {
  flex: 0 0 auto;
}

.contact-details-primary-actions #contactPageCallBtn svg,
.contact-details-primary-actions #contactPageSmsBtn svg,
.contact-details-primary-actions #contactPageWhatsAppBtn svg,
.contact-details-primary-actions #contactPageEmailBtn svg,
.contact-details-primary-actions #contactPageAddCampaignBtn svg,
.contact-details-primary-actions #contactPageDeleteBtn svg,
.contact-details-sticky-save #contactPageSaveBtn svg {
  width: 18px;
  height: 18px;
  padding: 3px;
  border-radius: 999px;
  background: #ffffff;
  box-sizing: content-box;
  filter: drop-shadow(0 1px 1px rgba(15, 23, 42, 0.18));
}

.contact-details-primary-actions #contactPageCallBtn svg {
  color: #16a34a;
  background: #dcfce7;
}

.contact-details-primary-actions #contactPageSmsBtn svg {
  color: #2563eb;
  background: #dbeafe;
}

.contact-details-primary-actions #contactPageWhatsAppBtn svg {
  color: #16a34a;
  background: #dcfce7;
}

.contact-details-primary-actions #contactPageEmailBtn svg {
  color: #f59e0b;
  background: #fef3c7;
}

.contact-details-primary-actions #contactPageAddCampaignBtn svg {
  color: #7c3aed;
  background: #ede9fe;
}

.contact-details-primary-actions #contactPageDeleteBtn svg {
  color: #dc2626;
  background: #fee2e2;
}

.contact-details-sticky-save #contactPageSaveBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

.contact-details-sticky-save #contactPageSaveBtn svg {
  color: #2563eb;
  background: #dbeafe;
}

.contact-details-more-actions {
  position: relative;
}

.contact-details-more-actions summary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: 1px solid #c7d2fe;
  color: #3730a3;
  background: #eef2ff;
  list-style: none;
}

.contact-details-primary-actions #contactPageCallBtn {
  background: #16a34a;
  border-color: #15803d;
}

.contact-details-primary-actions #contactPageSmsBtn,
.contact-details-primary-actions #contactPageEmailBtn {
  background: #2563eb;
  border-color: #1d4ed8;
}

.contact-details-more-actions summary::-webkit-details-marker {
  display: none;
}

.contact-details-more-actions-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 12;
  display: grid;
  gap: 8px;
  min-width: 180px;
  padding: 10px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 18px 36px rgba(15, 23, 42, 0.18);
}

.contact-details-more-actions:not([open]) .contact-details-more-actions-menu {
  display: none;
}

.contact-details-more-actions-menu button {
  width: 100%;
  justify-content: center;
}

.contact-details-redesign-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(330px, 0.82fr);
  gap: 16px;
  align-items: start;
}

.contact-details-redesign-col {
  display: grid;
  gap: 14px;
}

.contact-details-redesign-col--right {
  position: sticky;
  top: 90px;
}

.contact-details-section {
  display: block;
  padding: 16px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.04);
}

.contact-details-section--priority {
  border-color: #dbeafe;
  background: #f8fbff;
}

.contact-details-section--lead-details {
  border-color: #c7d2fe;
  background: #eef2ff;
}

.contact-details-section h3,
.contact-details-sensitive-section summary {
  margin: 0 0 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid #e5e7eb;
  color: #334155;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.contact-details-sensitive-section summary {
  cursor: pointer;
  margin-bottom: 6px;
}

.contact-details-sensitive-section {
  border-color: #fed7aa;
  background: #fff7ed;
}

.contact-details-sensitive-hint {
  margin: 0 0 10px;
  color: #9a3412;
}

.contact-details-section-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 14px;
  align-items: start;
}

.contact-details-section-grid > .contact-field-box,
.contact-details-section-grid > .contact-status-box {
  min-width: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
  padding-bottom: 18px;
}

.contact-details-section-grid .contact-field-box > input,
.contact-details-section-grid .contact-field-box > select,
.contact-details-section-grid .contact-field-box > textarea,
.contact-details-section-grid .contact-status-box > select,
.contact-details-section-grid .contact-field-box > .crm-password-wrap {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.contact-details-section-grid .contact-field-box > input,
.contact-details-section-grid .contact-field-box > select,
.contact-details-section-grid .contact-status-box > select,
.contact-details-section-grid .contact-field-box > .crm-password-wrap > input {
  min-height: 38px;
  height: 38px;
  padding: 8px 10px;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.25;
}

.contact-details-section-grid .contact-modal-field-label {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: #475569;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1.3;
  min-height: 16px;
}

.contact-full-mode #contactPageForm .contact-details-section-grid .contact-modal-field-label[for="quote"],
.contact-full-mode #contactPageForm .contact-details-section-grid .contact-modal-field-label[for="lead_source"],
.contact-full-mode #contactPageForm .contact-details-section-grid .contact-modal-field-label[for="income"],
.contact-full-mode #contactPageForm .contact-details-section-grid .contact-modal-field-label[for="vcall"],
.contact-full-mode #contactPageForm .contact-details-section-grid .contact-modal-field-label[for="bank_routing"],
.contact-full-mode #contactPageForm .contact-details-section-grid .contact-modal-field-label[for="bank_account"] {
  display: block;
  margin: 0;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: #475569;
  font-size: 12px;
  font-weight: 800;
}

.contact-full-mode #contactPageForm .contact-details-section-grid .contact-modal-field-label[for="first_name"],
.contact-full-mode #contactPageForm .contact-details-section-grid .contact-modal-field-label[for="last_name"] {
  display: inline-block;
  margin: 0 0 5px;
  padding: 5px 10px;
  border-radius: 4px;
  background: #1e5fbf;
  color: #ffffff;
  font-size: 16px;
  font-weight: 900;
  letter-spacing: 0.02em;
}

.contact-full-mode #contactPageForm .contact-details-section-grid input#email,
.contact-full-mode #contactPageForm .contact-details-section-grid input#primary_phone,
.contact-full-mode #contactPageForm .contact-details-section-grid input#secondary_phone {
  min-height: 38px;
  height: 38px;
  padding: 8px 10px;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.25;
  background: #f8fbff;
}

.contact-full-mode #contactPageForm .contact-details-section-grid input#first_name,
.contact-full-mode #contactPageForm .contact-details-section-grid input#last_name {
  min-height: auto;
  height: auto;
  padding: 12px 14px;
  font-size: 24px;
  font-weight: 800;
  line-height: 1.25;
  background: #f8fbff;
}

.contact-details-section-grid .contact-inline-validation {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  min-height: 16px;
  margin-top: 0;
}

.contact-details-section-grid > .contact-status-box {
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
}

.contact-details-section-grid > .contact-status-box .contact-modal-field-label {
  background: transparent;
  color: #475569;
}

.contact-details-section-grid > .contact-field-box:has(textarea),
.contact-details-section-grid > .contact-field-box:has(.crm-password-wrap) {
  padding-bottom: 0;
  height: auto;
}

.contact-details-section-grid > .contact-field-box:has(textarea) > textarea {
  min-height: 112px;
  height: auto;
}

.contact-details-section-grid > .contact-field-box:last-child:nth-child(odd),
.contact-details-section-grid > .contact-status-box:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

.contact-details-section-grid > .contact-follow-up-section,
.contact-details-section-grid > .contact-tasks-section,
.contact-details-section-grid > .contact-field-box:has(textarea),
.contact-details-section-grid > .contact-field-box:has(#vcall),
.contact-details-section-grid > .contact-field-box:has(.crm-password-wrap) {
  grid-column: 1 / -1;
}

.contact-details-section-grid textarea {
  min-height: 112px;
}

.contact-inline-validation {
  min-height: 16px;
  margin-top: 4px;
  font-size: 12px;
  font-weight: 700;
}

.contact-field-valid .contact-inline-validation {
  color: #15803d;
}

.contact-field-invalid .contact-inline-validation {
  color: #b91c1c;
}

.contact-field-invalid input {
  border-color: #ef4444 !important;
  background: #fef2f2;
}

.contact-field-valid input {
  border-color: #22c55e !important;
}

.contact-details-sticky-save {
  position: sticky;
  bottom: 10px;
  z-index: 9;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
  padding: 10px 12px;
  border: 1px solid #bfdbfe;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 14px 32px rgba(15, 23, 42, 0.16);
  color: #475569;
  font-size: 13px;
  font-weight: 700;
  backdrop-filter: blur(8px);
}

.contact-details-sticky-save.is-saved {
  border-color: #86efac;
  background: rgba(240, 253, 244, 0.97);
  color: #166534;
}

.contact-details-sticky-save-label {
  margin-right: auto;
}

.contact-details-sticky-save #contactPageSaveBtn {
  width: auto;
  min-width: 150px;
  max-width: 190px;
  margin-top: 0;
  padding: 8px 18px;
}

.contact-full-mode #contactPageForm input,
.contact-full-mode #contactPageForm select,
.contact-full-mode #contactPageForm textarea {
  min-height: 36px;
  padding: 8px 10px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #ffffff;
  color: #0f172a;
  font-size: 13px;
}

.contact-full-mode #contactPageForm textarea {
  min-height: 96px;
}

.contact-full-mode #contactPageForm .contact-field-box {
  min-width: 0;
}

.contact-full-mode #contactPageForm #first_name,
.contact-full-mode #contactPageForm #last_name,
.contact-full-mode #contactPageForm #email,
.contact-full-mode #contactPageForm #primary_phone,
.contact-full-mode #contactPageForm #secondary_phone,
.contact-full-mode #contactPageForm #age,
.contact-full-mode #contactPageForm #date_of_birth,
.contact-full-mode #contactPageForm #gender,
.contact-full-mode #contactPageForm #household_size,
.contact-full-mode #contactPageForm #indian,
.contact-full-mode #contactPageForm #profession,
.contact-full-mode #contactPageForm #income,
.contact-full-mode #contactPageForm #quote,
.contact-full-mode #contactPageForm #coverages_sold,
.contact-full-mode #contactPageForm #coverage_start_date,
.contact-full-mode #contactPageForm #health_issues,
.contact-full-mode #contactPageForm #app_id,
.contact-full-mode #contactPageForm #upon_approval,
.contact-full-mode #contactPageForm #vcall,
.contact-full-mode #contactPageForm #home_address,
.contact-full-mode #contactPageForm #city,
.contact-full-mode #contactPageForm #state,
.contact-full-mode #contactPageForm #zip_code {
  background: #f8fbff;
}

.contact-full-mode #contactPageForm #vcall {
  width: 100%;
}

.contact-full-mode #contactPageForm #notes {
  min-height: 128px;
  font-size: 15px;
  line-height: 1.45;
}

.contact-full-mode #contactPageForm #special_notes {
  min-height: 72px;
  font-size: 13px;
  line-height: 1.4;
}

.contact-full-mode #contactPageForm .contact-status-box {
  padding: 8px;
  border: 1px solid #fecdd3;
  border-radius: 10px;
  background: #fff1f2;
}

.contact-full-mode #contactPageForm .contact-status-box .contact-modal-field-label {
  color: #b91c1c;
}

.contact-full-mode #contactPageForm #contactStatusSelect,
.contact-full-mode #contactPageForm #contactOutcomeSelect {
  border-color: #fda4af;
  background: #fff7f7;
}

#contactPageDeleteBtn {
  color: #ffffff;
}

#contactPageForm .contact-modal-field-label {
  font-size: 16px;
  background: #eef3ff;
  color: #274690;
  padding: 4px 8px;
  border-radius: 4px;
  display: inline-block;
}

.contact-full-mode #contactPageForm .contact-modal-field-label,
.contact-full-mode #contactPageForm .contact-status-box .contact-modal-field-label,
.contact-full-mode #contactPageForm .contact-modal-field-label[for="lead_source"],
.contact-full-mode #contactPageForm .contact-modal-field-label[for="income"],
.contact-full-mode #contactPageForm .contact-modal-field-label[for="quote"],
.contact-full-mode #contactPageForm .contact-modal-field-label[for="vcall"],
.contact-full-mode #contactPageForm .contact-modal-field-label[for="first_name"],
.contact-full-mode #contactPageForm .contact-modal-field-label[for="last_name"],
.contact-full-mode #contactPageForm .contact-modal-field-label[for="bank_routing"],
.contact-full-mode #contactPageForm .contact-modal-field-label[for="bank_account"],
.contact-full-mode #contactPageForm .contact-modal-field-label[for="notes"] {
  display: block;
  margin: 0 0 5px;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: #475569;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.contact-full-mode #contactPageForm .contact-modal-field-label[for="first_name"],
.contact-full-mode #contactPageForm .contact-modal-field-label[for="last_name"] {
  display: inline-block;
  padding: 5px 10px;
  border-radius: 4px;
  background: #1e5fbf;
  color: #ffffff;
  font-size: 16px;
  font-weight: 900;
}

#contactPageForm .contact-status-box .contact-modal-field-label {
  background: #fee2e2;
  color: #b91c1c;
}

#contactPageForm .contact-modal-field-label[for="lead_source"] {
  background: #eef3ff;
  color: #274690;
}

#contactPageForm .contact-modal-field-label[for="income"] {
  background: #eef3ff;
  color: #274690;
}

#contactPageForm .contact-modal-field-label[for="quote"] {
  background: #1e5fbf;
  color: #ffffff;
  font-size: 18px;
  font-weight: 400;
  letter-spacing: 0.02em;
}

#contactPageForm input#quote {
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.25;
  padding: 10px 12px;
}

#contactPageForm .contact-modal-field-label[for="vcall"] {
  background: #dcfce7;
  color: #166534;
}

#contactPageForm .contact-modal-field-label[for="first_name"],
#contactPageForm .contact-modal-field-label[for="last_name"] {
  background: #1e5fbf;
  color: #ffffff;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.02em;
}

#contactPageForm input#first_name,
#contactPageForm input#last_name {
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.25;
  padding: 14px 16px;
}

.contact-full-mode #contactPageForm input#first_name,
.contact-full-mode #contactPageForm input#last_name {
  font-size: 24px;
  font-weight: 800;
  padding: 12px 14px;
}

.contact-full-mode #contactPageForm input#quote {
  font-size: 18px;
  padding: 9px 11px;
}

#contactPageForm input#commission,
#contactModalForm input[name="commission"] {
  font-size: 15px;
}

#contactPageForm .contact-modal-field-label[for="bank_routing"],
#contactPageForm .contact-modal-field-label[for="bank_account"] {
  background: #eef3ff;
  color: #274690;
}

#contactPageForm .contact-modal-field-label[for="notes"] {
  background: #ffedd5;
  color: #c2410c;
}

#tags {
  min-height: 44px;
  font-size: 16px;
}

#contactTwilioFromSelect {
  width: 260px;
  max-width: 100%;
  font-size: 16px;
}

#contactPageSaveBtn,
#contactPageSmsBtn,
#contactPageEmailBtn,
#contactPageCallBtn {
  background: #1e5fbf;
  color: #ffffff;
  border-color: #1a54a8;
}

#contactPageSaveBtn {
  font-size: 16px;
  padding: 10px 14px;
}

#contactPageSaveBtn:hover,
#contactPageSmsBtn:hover,
#contactPageEmailBtn:hover,
#contactPageCallBtn:hover {
  background: #1a54a8;
}

#contactPageCallBtn {
  background: #16a34a;
  border-color: #15803d;
}

#contactPageCallBtn:hover {
  background: #15803d;
}

.contact-modal-field-label {
  font-size: 11px;
  font-weight: 700;
  color: #6b7280;
  align-self: flex-start;
}

.contact-field-box {
  display: grid;
  gap: 6px;
}

.contact-field-box .contact-modal-field-label {
  margin: 0;
}

.contact-field-box .contact-field-hint {
  margin: -2px 0 0;
  font-size: 11px;
  line-height: 1.35;
  color: #5c6b7a;
}

#contactPageForm input::placeholder,
#contactPageForm textarea::placeholder,
#contactModalForm input::placeholder,
#contactModalForm textarea::placeholder {
  color: #94a3b8;
  opacity: 1;
}

.crm-password-wrap {
  position: relative;
  display: block;
  width: 100%;
}

.crm-password-wrap input {
  width: 100%;
  box-sizing: border-box;
  padding-right: 2.75rem;
}

/* Mask bank routing/account as dots without type=password (avoids login password autofill). */
.crm-password-wrap input.crm-sensitive-masked {
  -webkit-text-security: disc;
  text-security: disc;
}

.crm-password-toggle {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: #64748b;
  cursor: pointer;
  line-height: 0;
}

.crm-password-toggle:hover {
  color: #1e293b;
  background: rgba(148, 163, 184, 0.18);
}

.crm-password-toggle:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}

.crm-password-toggle-icon {
  flex-shrink: 0;
}

.contact-status-box {
  display: grid;
  gap: 6px;
  padding: 8px;
  border: 1px solid #d9dee9;
  border-radius: 4px;
  background: #f8fafc;
}

.contact-status-box .contact-modal-field-label {
  margin: 0;
}

.contact-modal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

.contact-modal-grid textarea[name="notes"] {
  grid-column: 1 / -1;
  min-height: 72px;
}

.contact-modal-actions button {
  width: auto;
  margin-top: 0;
}

#addContactPopupForm .contact-modal-actions button[type="submit"] {
  background: #2563eb;
  color: #fff;
  border-color: #2563eb;
}

#addContactPopupForm .contact-modal-actions button[type="submit"]:hover {
  background: #1d4ed8;
  color: #fff;
  border-color: #1d4ed8;
}

#landingPagesForm .contact-modal-actions button[type="submit"] {
  background: #1e5fbf;
  color: #ffffff;
  border-color: #1a54a8;
}

#landingPagesForm .contact-modal-actions button[type="submit"]:hover {
  background: #1a54a8;
  color: #ffffff;
  border-color: #174a94;
}

#videosForm .contact-modal-actions button[type="submit"] {
  background: #1e5fbf;
  color: #ffffff;
  border-color: #1a54a8;
}

#videosForm .contact-modal-actions button[type="submit"]:hover {
  background: #1a54a8;
  color: #ffffff;
  border-color: #174a94;
}

#formsForm .contact-modal-actions button[type="submit"] {
  background: #1e5fbf;
  color: #ffffff;
  border-color: #1a54a8;
}

#formsForm .contact-modal-actions button[type="submit"]:hover {
  background: #1a54a8;
  color: #ffffff;
  border-color: #174a94;
}

.contact-details-layout {
  display: grid;
  grid-template-columns: 420px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

.contact-summary-mode-pending .contact-details-layout,
.contact-summary-mode .contact-details-layout {
  grid-template-columns: minmax(0, 1fr);
}

.contact-summary-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
  gap: 16px;
  align-items: stretch;
}

.contact-summary-main-card {
  min-width: 0;
}

.contact-summary-ai-column {
  position: sticky;
  top: 16px;
  align-self: stretch;
  display: flex;
}

.contact-summary-mode-pending .contact-ai-panel,
.contact-summary-mode .contact-ai-panel {
  margin-top: 0;
  width: 100%;
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

.contact-summary-mode-pending #aiCallSummaryNotes,
.contact-summary-mode #aiCallSummaryNotes {
  min-height: 150px;
}

.contact-summary-mode-pending #aiObjectionInput,
.contact-summary-mode #aiObjectionInput {
  min-height: 120px;
}

.contact-full-mode-pending #contactSummaryPanel,
.contact-full-mode .contact-summary-panel {
  display: none;
}

.contact-full-mode-pending #contactFullDetailsWrap {
  visibility: hidden;
}

.contact-summary-mode-pending #contactFullDetailsWrap,
.contact-summary-mode #contactFullDetailsWrap {
  display: none;
}

.contact-summary-panel h2 {
  margin: 0 0 10px;
  font-size: 20px;
  font-weight: 700;
  color: #1f2937;
}

.contact-summary-open-full-action {
  margin-bottom: 16px;
}

.contact-summary-actions {
  display: grid;
  gap: 8px;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid #e2e8f0;
}

.contact-summary-actions .contact-modal-actions button {
  width: auto;
  margin-top: 0;
}

.contact-summary-actions .contact-modal-actions,
#contactPageForm > .contact-modal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.contact-summary-actions .contact-modal-actions button,
#contactPageForm > .contact-modal-actions button {
  width: auto;
  flex: 0 0 auto;
}

#contactSummaryPanel .contact-modal-actions button {
  width: auto;
  flex: 0 0 auto;
  min-width: 0;
  padding: 6px 12px;
  font-size: 12px;
  line-height: 1.25;
  min-height: 32px;
  margin-top: 0;
}


#contactSummarySmsBtn,
#contactSummaryEmailBtn,
#openFullDetailsBtn {
  background: #1e5fbf;
  color: #ffffff;
  border-color: #1a54a8;
}

/* High-specificity rule so this beats the smaller defaults in
   `#contactSummaryPanel .contact-modal-actions button` above. */
#contactSummaryPanel .contact-summary-open-full-action #openFullDetailsBtn,
#contactSummaryPanel #openFullDetailsBtn {
  padding: 11px 20px;
  font-size: 15px;
  font-weight: 700;
  min-height: 44px;
  letter-spacing: 0.2px;
  box-shadow: 0 7px 18px rgba(30, 95, 191, 0.22);
}

#contactSummaryPanel .contact-summary-open-full-action #jumpToAiPanelBtn,
#contactSummaryPanel #jumpToAiPanelBtn {
  padding: 11px 20px;
  font-size: 15px;
  font-weight: 700;
  min-height: 44px;
  letter-spacing: 0.2px;
  color: #4f46e5;
  border-color: #a5b4fc;
  background: #ffffff;
  box-shadow: none;
}

#contactSummaryPanel .contact-summary-open-full-action #jumpToAiPanelBtn:hover,
#contactSummaryPanel #jumpToAiPanelBtn:hover {
  color: #4338ca;
  border-color: #818cf8;
  background: #eef2ff;
}

/* Make the Twilio caller-ID / phone-number dropdown in the contact summary panel
   easier to read and tap. Overrides the smaller defaults used in the surrounding
   summary actions cluster. */
#contactSummaryPanel #contactSummaryTwilioFromSelect {
  font-size: 15px;
  padding: 10px 14px;
  min-height: 44px;
  min-width: 240px;
  border-radius: 8px;
}

#contactSummaryPanel .contact-modal-field-label[for="contactSummaryTwilioFromSelect"] {
  font-size: 13px;
}

.contact-summary-primary-actions {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.contact-summary-primary-actions--top {
  margin: 0 0 14px;
  padding: 14px;
  border: 1px solid #dbe4f6;
  border-radius: 12px;
  background: #f8fbff;
  display: flex;
  align-items: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.contact-summary-primary-actions--top h3 {
  flex: 0 0 100%;
  margin-bottom: 0;
}

.contact-summary-primary-actions--top .contact-field-box {
  margin: 0;
  min-width: 220px;
  max-width: 280px;
  flex: 0 1 260px;
}

.contact-summary-primary-actions--top .contact-summary-primary-action-buttons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 0;
  flex: 1 1 360px;
}

#contactSummaryPanel .contact-summary-primary-actions--top .contact-summary-primary-action-buttons button {
  width: auto;
  min-height: 32px;
  padding: 6px 10px;
  font-size: 12px;
}

.contact-summary-primary-action-buttons {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}

#contactSummaryPanel .contact-summary-primary-action-buttons button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  min-height: 40px;
  padding: 8px 10px;
  font-size: 13px;
  font-weight: 800;
}

#contactSummaryPanel .summary-action-icon {
  flex: 0 0 auto;
  filter: drop-shadow(0 1px 1px rgba(15, 23, 42, 0.2));
}

#contactSummaryPanel .contact-summary-delete-btn {
  grid-column: 1 / -1;
  background: #fef2f2;
  border-color: #fecaca;
  color: #b91c1c;
}

#contactSummaryPanel .contact-summary-delete-btn:hover {
  background: #fee2e2;
  border-color: #fca5a5;
  color: #991b1b;
}

.contact-summary-more-actions {
  margin-top: 10px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
}

.contact-summary-more-actions summary {
  cursor: pointer;
  padding: 9px 11px;
  color: #ffffff;
  font-size: 13px;
  font-weight: 800;
}

.contact-summary-primary-actions--top .contact-summary-more-actions {
  border-color: #dbe4f6;
  background: #ffffff;
}

.contact-summary-primary-actions--top .contact-summary-more-actions summary {
  color: #174a94;
}

.contact-summary-more-actions button {
  width: calc(100% - 18px);
  margin: 0 9px 9px;
  justify-content: center;
}

.contact-ai-reason {
  margin-top: 14px;
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  font-size: 13px;
  line-height: 1.45;
}

#contactSummaryAddCampaignBtn,
#contactPageAddCampaignBtn {
  background: #7c3aed;
  color: #ffffff;
  border-color: #6d28d9;
}

#contactSummarySmsBtn:hover,
#contactSummaryEmailBtn:hover,
#openFullDetailsBtn:hover {
  background: #1a54a8;
  color: #ffffff;
  border-color: #174a94;
}

#contactSummaryAddCampaignBtn:hover,
#contactPageAddCampaignBtn:hover {
  background: #6d28d9;
  color: #ffffff;
  border-color: #5b21b6;
}

#contactSummaryCallBtn {
  background: #16a34a;
  color: #ffffff;
  border-color: #15803d;
}

#contactSummaryCallBtn:hover {
  background: #15803d;
  color: #ffffff;
  border-color: #166534;
}

.contact-summary-identity {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.contact-summary-initials {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 700;
  color: #ffffff;
  background: linear-gradient(135deg, #2563eb, #7c3aed);
  border: 4px solid rgba(37, 99, 235, 0.28);
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12);
}

.contact-summary-initials--approved {
  background: linear-gradient(135deg, #16a34a, #15803d);
}

.contact-summary-initials--pending {
  background: linear-gradient(135deg, #f59e0b, #d97706);
}

.contact-summary-initials--declined {
  background: linear-gradient(135deg, #dc2626, #b91c1c);
}

.contact-summary-initials--referred {
  background: linear-gradient(135deg, #7c3aed, #6d28d9);
}

.contact-summary-initials--aps {
  background: linear-gradient(135deg, #0ea5e9, #0284c7);
}

.contact-summary-initials--score-hot {
  border-color: #22c55e;
  box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.18);
}

.contact-summary-initials--score-warm {
  border-color: #f59e0b;
  box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.2);
}

.contact-summary-initials--score-cool {
  border-color: #94a3b8;
  box-shadow: 0 0 0 4px rgba(148, 163, 184, 0.2);
}

.contact-summary-name-wrap {
  min-width: 0;
}

.contact-summary-name {
  font-size: 26px;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.2;
  word-break: break-word;
}

.contact-summary-age-row {
  margin-top: 2px;
  margin-bottom: 6px;
  font-size: 16px;
  font-weight: 800;
  color: #1e293b;
}

.contact-summary-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  font-size: 14px;
  line-height: 1.4;
  color: #334155;
}

.contact-summary-field-group {
  display: grid;
  gap: 8px;
  align-content: start;
  padding: 12px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #f8fafc;
}

.contact-summary-field-group h3,
.contact-summary-primary-actions h3 {
  margin: 0 0 4px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #475569;
}

.contact-summary-field-group--wide {
  grid-column: 1 / -1;
}

.contact-summary-field-group--lead-details {
  background: #eef2ff;
  border-color: #c7d2fe;
}

.contact-summary-field-group--lead-details > div {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  align-items: center;
  column-gap: 10px;
}

.contact-summary-field-group--lead-details > div > strong {
  display: block;
  text-align: right;
  color: #475569;
}

.contact-summary-recordings-list {
  display: grid;
  gap: 8px;
  max-height: 260px;
  overflow: auto;
  padding-right: 2px;
}

.contact-summary-recording-card {
  padding: 8px;
  border: 1px solid #dbeafe;
  border-radius: 10px;
  background: #ffffff;
}

.contact-summary-recording-date {
  margin-bottom: 5px;
  color: #64748b;
  font-size: 12px;
  font-weight: 700;
}

.contact-summary-recordings .contact-history-call-recording {
  display: grid;
  gap: 6px;
}

.contact-summary-recordings .contact-history-call-recording-label {
  color: #1e3a8a;
  font-size: 13px;
  font-weight: 800;
}

.contact-summary-recordings .crm-call-recording-player {
  width: 100%;
  max-width: 100%;
}

.contact-summary-recordings .ai-transcribe-recording-btn {
  width: auto;
  margin-top: 0;
  padding: 6px 10px;
  font-size: 12px;
}

.contact-summary-recordings-empty {
  color: #64748b;
  font-size: 13px;
  font-weight: 600;
}

.contact-summary-recordings-empty.is-error {
  color: #b91c1c;
}

.contact-summary-quote {
  font-size: 24px;
  font-weight: 700;
  color: #1e3a8a;
}

.contact-summary-key-value {
  font-size: 20px;
  font-weight: 700;
  color: #0f172a;
}

.contact-summary-label--sold {
  color: #15803d;
  font-weight: 700;
}

.contact-summary-label--declined {
  color: #b91c1c;
  font-weight: 700;
}

.contact-summary-field-group .status-pill,
.contact-summary-field-group .outcome-pill,
.contact-summary-field-group .lead-source-pill {
  display: inline-block;
  min-width: 92px;
  box-sizing: border-box;
  margin: 0;
  border-radius: 10px;
  padding: 6px 10px;
  text-align: center;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.28;
}

.contact-summary-field-group .outcome-pill:not(.outcome-sold):not(.outcome-call-back) {
  background: #6b7280;
  color: #ffffff;
}

.contact-summary-field-group .outcome-pill.outcome-sold {
  background: #b8860b;
  color: #ffffff;
}

.contact-summary-field-group .lead-source-pill {
  background: #4f46e5;
  color: #ffffff;
}

.contact-summary-field-group .lead-source-pill.lead-source-pill--referral {
  background: #be185d;
  color: #ffffff;
}

.contact-summary-field-group .status-pill[class="status-pill"],
.contact-summary-field-group .status-pill.status-sold,
.contact-summary-field-group .status-pill.status-quotem,
.contact-summary-field-group .status-pill.status-no-interest {
  background: #f5f3ff;
  color: #334155;
}

.contact-summary-field-group .status-pill.status-new {
  background: #2563eb;
  color: #ffffff;
}

.contact-summary-field-group .status-pill.status-approved {
  background: #16a34a;
  color: #ffffff;
}

.contact-summary-field-group .status-pill.status-closed,
.contact-summary-field-group .status-pill.status-declined,
.contact-summary-field-group .status-pill.status-referred {
  background: #7c3aed;
  color: #ffffff;
}

.contact-summary-field-group .status-pill.status-aps,
.contact-summary-field-group .status-pill.status-pending {
  background: #eab308;
  color: #ffffff;
}

.contact-summary-mode-pending .contact-history-panel,
.contact-summary-mode .contact-history-panel {
  min-height: auto;
  display: flex;
  flex-direction: column;
}

.contact-summary-mode-pending .contact-history-list,
.contact-summary-mode .contact-history-list {
  flex: 1 1 auto;
  max-height: 420px;
  overflow: auto;
  padding-right: 4px;
}

.contact-full-mode-pending .contact-details-layout,
.contact-full-mode .contact-details-layout {
  grid-template-columns: 1fr;
}

.contact-full-mode-pending .contact-history-panel,
.contact-full-mode .contact-history-panel {
  display: none;
}

.contact-details-form-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 360px);
  gap: 12px;
  align-items: start;
}

#contactPageForm .contact-details-quote-notes {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  border: 1px solid #8b5cf6;
  border-radius: 6px;
  background: #f5f3ff;
}

#contactPageForm .contact-details-quote-notes textarea#notes,
#contactPageForm .contact-details-quote-notes textarea#special_notes {
  min-height: 140px;
  width: 100%;
  box-sizing: border-box;
  resize: vertical;
  font-family: inherit;
  line-height: 1.45;
}

#contactPageForm .contact-details-quote-notes input#quote {
  width: 100%;
  box-sizing: border-box;
}

#contactPageForm .contact-details-quote-notes textarea#tags {
  width: 100%;
  box-sizing: border-box;
  min-height: 120px;
  resize: vertical;
  font-family: inherit;
  line-height: 1.45;
}

.contact-follow-up-section {
  margin-top: 6px;
  padding-top: 10px;
  border-top: 1px solid #dbe2ef;
}

.contact-follow-up-heading {
  margin: 0 0 8px;
  font-size: 15px;
  font-weight: 700;
  color: #ffffff;
  background: #1e5fbf;
  border: 1px solid #1a54a8;
  border-radius: 4px;
  padding: 6px 10px;
  display: block;
  width: 100%;
  box-sizing: border-box;
}

#contactPageForm .contact-follow-up-section input[type="date"],
#contactPageForm .contact-follow-up-section input[type="time"] {
  width: 100%;
  box-sizing: border-box;
}

.contact-follow-up-hint {
  margin: 6px 0 0;
  font-size: 12px;
  color: #64748b;
  line-height: 1.4;
}

.contact-section-save-message {
  margin: 8px 0 0;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
}

.contact-section-save-message--ok {
  color: #166534;
  background: #f0fdf4;
  border: 1px solid #86efac;
}

.contact-section-save-message--error {
  color: #b91c1c;
  background: #fef2f2;
  border: 1px solid #fecaca;
}

.contact-tasks-section {
  margin-top: 6px;
  padding: 12px;
  border: 1px solid #bfdbfe;
  border-radius: 12px;
  background: #f8fbff;
  scroll-margin-top: 18px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.contact-tasks-section--focus,
.contact-tasks-section:target {
  border-color: #2563eb;
  background: #eff6ff;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.14);
}

.contact-tasks-header {
  display: flex;
  gap: 8px;
  align-items: center;
}

#contactTaskNewBtn {
  width: auto;
  margin-top: 0;
  padding: 5px 10px;
  font-size: 12px;
}

.contact-task-form {
  margin-top: 8px;
  display: grid;
  gap: 8px;
  padding: 8px;
  border: 1px solid #dbe2ef;
  border-radius: 6px;
  background: #ffffff;
}

.contact-tasks-list {
  margin-top: 8px;
  display: grid;
  gap: 6px;
  max-height: 240px;
  overflow: auto;
  padding-right: 2px;
}

.contact-task-item {
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 8px;
  background: #f8fafc;
}

.contact-task-name {
  font-size: 13px;
  font-weight: 700;
  color: #0f172a;
}

.contact-task-meta {
  margin-top: 4px;
  font-size: 12px;
  color: #475569;
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.contact-task-condition {
  font-size: 11px;
  font-weight: 700;
}

.contact-task-footer {
  margin-top: 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.contact-task-complete-btn {
  border: 1px solid #86efac;
  background: #f0fdf4;
  color: #166534;
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}

.contact-task-complete-btn:hover:not(:disabled) {
  background: #dcfce7;
  border-color: #4ade80;
}

.contact-task-complete-btn:disabled {
  opacity: 0.7;
  cursor: default;
}

.contact-task-condition-yet-to-start {
  color: #9a3412;
}

.contact-task-condition-in-progress {
  color: #1e40af;
}

.contact-task-condition-completed {
  color: #166534;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.contact-modal-follow-up-section {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  align-items: end;
  padding: 10px;
  border: 1px solid #dbe2ef;
  border-radius: 6px;
  background: #f8fafc;
}

.contact-modal-follow-up-section .contact-follow-up-heading {
  grid-column: 1 / -1;
  margin: 0 0 4px;
}

.contact-modal-follow-up-section .contact-follow-up-hint {
  grid-column: 1 / -1;
  margin: 0;
}

.contact-tags-trigger-hint {
  margin: 6px 0 0;
  line-height: 1.4;
}

@media (max-width: 960px) {
  .contact-details-form-split {
    grid-template-columns: 1fr;
  }

  .contact-details-toolbar,
  .contact-details-redesign-grid {
    grid-template-columns: 1fr;
  }

  .contact-details-redesign-col--right {
    position: static;
  }

  .contact-details-section-grid {
    grid-template-columns: 1fr;
  }

  .contact-details-primary-actions {
    justify-content: flex-start;
  }

  .contact-details-sticky-save {
    align-items: stretch;
    flex-direction: column;
  }
}

.settings-reminders-panel .settings-reminder-status-list {
  margin: 10px 0 12px;
  padding-left: 22px;
  color: #334155;
  font-size: 14px;
  line-height: 1.5;
}

.settings-reminders-panel .settings-reminder-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin: 8px 0 4px;
}

.settings-reminders-panel code {
  font-size: 12px;
}

.settings-reminders-panel .settings-reminder-actions button.settings-reminder-btn {
  width: auto;
  margin-top: 0;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.25;
  background: #1e5fbf;
  color: #ffffff;
  border: 1px solid #1a54a8;
  border-radius: 4px;
  cursor: pointer;
  box-sizing: border-box;
}

.settings-reminders-panel .settings-reminder-actions button.settings-reminder-btn:hover {
  background: #1a54a8;
  color: #ffffff;
  border-color: #174a94;
}

/* Settings — Runtime config (General + Social Marketing) */
.settings-runtime-form {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.settings-runtime-section {
  margin-top: 22px;
}

.settings-runtime-section:first-child {
  margin-top: 0;
}

/* Settings layout: sticky left nav + scrollable content */
.page-settings .settings-layout {
  display: grid;
  grid-template-columns: minmax(220px, 272px) minmax(0, 1fr);
  gap: 20px;
  align-items: start;
  margin-top: 4px;
}

.page-settings .settings-sidebar {
  position: sticky;
  top: 12px;
  max-height: calc(100vh - 24px);
  overflow: auto;
  padding: 14px 12px 12px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
}

.page-settings .settings-sidebar-head {
  margin-bottom: 10px;
}

.page-settings .settings-sidebar-title {
  margin: 0 0 8px;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #64748b;
}

.page-settings .settings-sidebar-filter {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  font-size: 0.9rem;
  background: #ffffff;
}

.page-settings .settings-sidebar-filter:focus {
  outline: 2px solid #93c5fd;
  outline-offset: 1px;
  border-color: #60a5fa;
}

.page-settings .settings-sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.page-settings .settings-nav-group-label {
  margin: 14px 0 5px;
  padding: 0 8px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #64748b;
}

.page-settings .settings-nav-group-label:first-child {
  margin-top: 0;
}

.page-settings .settings-nav-link {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid transparent;
  color: inherit;
  text-decoration: none;
  transition: background 0.12s ease, border-color 0.12s ease;
}

.page-settings .settings-nav-link:hover {
  background: #ffffff;
  border-color: #dbeafe;
}

.page-settings .settings-nav-link.is-active {
  background: #ffffff;
  border-color: #93c5fd;
  box-shadow: inset 3px 0 0 #2563eb, 0 1px 4px rgba(37, 99, 235, 0.12);
}

.page-settings .settings-nav-link-title {
  font-size: 0.92rem;
  font-weight: 600;
  color: #0f172a;
  line-height: 1.25;
}

.page-settings .settings-nav-link.is-active .settings-nav-link-title {
  color: #1d4ed8;
}

.page-settings .settings-nav-link-desc {
  font-size: 0.78rem;
  color: #64748b;
  line-height: 1.3;
}

.page-settings .settings-sidebar-empty {
  margin: 10px 0 0;
  font-size: 0.85rem;
  color: #64748b;
}

.page-settings .settings-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Settings: one section per page (sidebar link), not one long scroll */
.page-settings.settings-single-section .settings-category-group:not(.is-active-settings-page) {
  display: none !important;
}

.page-settings.settings-single-section .settings-category-group.is-active-settings-page {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.page-settings.settings-single-section .settings-category-heading {
  display: none;
}

.page-settings.settings-single-section .settings-main {
  min-height: 0;
}

.page-settings.settings-single-section section.panel[hidden] {
  display: none !important;
}

.page-settings .settings-category-group {
  margin-bottom: 28px;
  padding-bottom: 8px;
  border-bottom: 2px solid #cbd5e1;
}

.page-settings .settings-category-group:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.page-settings .settings-category-heading {
  margin: 0 0 14px;
  padding: 10px 14px;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  color: #475569;
  background: linear-gradient(90deg, #f8fafc 0%, #e2e8f0 50%, #f8fafc 100%);
  border: 1px solid #94a3b8;
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}

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

.page-settings .settings-category-body > .panel,
.page-settings .settings-category-body > section.panel {
  margin: 0;
  scroll-margin-top: 16px;
  border: 1px solid #cbd5e1;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
}

.page-settings .settings-main > .panel,
.page-settings .settings-main > section.panel {
  scroll-margin-top: 16px;
}

/* Settings: keep checkboxes beside their labels (not stretched across the row). */
.page-settings .settings-check-row,
.page-settings label.document-attach.settings-check-row,
.page-settings label.document-attach:has(input[type="checkbox"]) {
  display: inline-flex;
  align-items: flex-start;
  gap: 10px;
  width: fit-content;
  max-width: 100%;
  margin: 0;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  color: #334155;
  line-height: 1.4;
}

.page-settings .settings-check-row input[type="checkbox"],
.page-settings label.document-attach:has(input[type="checkbox"]) input[type="checkbox"] {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  min-width: 16px;
  min-height: 16px;
  margin: 2px 0 0;
  cursor: pointer;
}

.page-settings .settings-check-row > span,
.page-settings label.document-attach:has(input[type="checkbox"]) > span {
  flex: 0 1 auto;
}

.page-settings .twilio-headset-opt.settings-check-row {
  width: fit-content;
  max-width: 100%;
}

.page-settings .twilio-headset-opt.settings-check-row span {
  flex: 0 1 auto;
}

.page-settings .settings-build-stamp {
  font: 500 10px/1.2 system-ui, Segoe UI, Arial, sans-serif;
  color: #6b7280;
  text-align: left;
  padding: 6px 10px 10px;
}

@media (max-width: 960px) {
  .page-settings .settings-layout {
    grid-template-columns: 1fr;
  }

  .page-settings .settings-sidebar {
    position: static;
    max-height: none;
  }

  .page-settings .settings-sidebar-nav {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 6px;
  }

  .page-settings .settings-nav-group-label {
    grid-column: 1 / -1;
    margin-top: 8px;
  }
}

/* Softer destructive actions on Settings (not alarm-red) */
.page-settings button.danger,
.page-settings .danger.email-from-remove-btn,
.page-settings .danger.twilio-number-remove-btn,
.page-settings .danger.email-from-smtp-clear,
.page-settings .danger.crm-label-list-delete-btn,
.page-settings #customMergeFieldsSection .merge-delete-btn {
  background: #f1f5f9;
  color: #64748b;
  border: 1px solid #e2e8f0;
  box-shadow: none;
}

.page-settings button.danger:hover,
.page-settings .danger.email-from-remove-btn:hover,
.page-settings .danger.twilio-number-remove-btn:hover,
.page-settings .danger.email-from-smtp-clear:hover,
.page-settings .danger.crm-label-list-delete-btn:hover,
.page-settings #customMergeFieldsSection .merge-delete-btn:hover {
  background: #e2e8f0;
  color: #475569;
  border-color: #cbd5e1;
}

/* Merge Fields settings */
.page-settings #customMergeFieldsSection .merge-fields-lead {
  max-width: 52rem;
  margin: 0 0 20px;
  color: #64748b;
  line-height: 1.5;
}

.page-settings #customMergeFieldsSection .merge-fields-block {
  margin-bottom: 24px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
}

.page-settings #customMergeFieldsSection .merge-fields-block-header {
  padding: 14px 16px;
  background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
  border-bottom: 1px solid #e2e8f0;
  text-align: center;
}

.page-settings #customMergeFieldsSection .merge-fields-block-title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
  color: #0f172a;
}

.page-settings #customMergeFieldsSection .merge-fields-block-desc {
  margin: 4px 0 0;
  font-size: 0.85rem;
  color: #64748b;
  line-height: 1.4;
}

.page-settings #customMergeFieldsSection .merge-fields-table-wrap {
  max-height: 240px;
  overflow: auto;
}

.page-settings #customMergeFieldsSection .merge-fields-table-wrap--tall {
  max-height: none;
}

.page-settings #customMergeFieldsSection .merge-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0;
  font-size: 0.9rem;
}

.page-settings #customMergeFieldsSection .merge-table th,
.page-settings #customMergeFieldsSection .merge-table td {
  padding: 10px 14px;
  border-bottom: 1px solid #f1f5f9;
  text-align: left;
  vertical-align: middle;
}

.page-settings #customMergeFieldsSection .merge-table th:nth-child(2),
.page-settings #customMergeFieldsSection .merge-table td:nth-child(2) {
  text-align: center;
}

.page-settings #customMergeFieldsSection .merge-table td:nth-child(2) .merge-label-input {
  text-align: center;
}

.page-settings #customMergeFieldsSection .merge-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #fff;
  font-weight: 600;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #64748b;
  border-bottom: 1px solid #e2e8f0;
}

.page-settings #customMergeFieldsSection .merge-table tbody tr:last-child td {
  border-bottom: none;
}

.page-settings #customMergeFieldsSection .merge-row-builtin:nth-child(even) td {
  background: #fafbfc;
}

.page-settings #customMergeFieldsSection .merge-token {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 6px;
  background: #eff6ff;
  color: #1d4ed8;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.82rem;
  font-weight: 500;
}

.page-settings #customMergeFieldsSection .merge-source-cell {
  color: #64748b;
  font-size: 0.86rem;
}

.page-settings #customMergeFieldsSection .merge-value-input,
.page-settings #customMergeFieldsSection .merge-label-input {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.page-settings #customMergeFieldsSection .merge-form-row {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  align-items: end;
  padding: 16px;
  border-top: 1px solid #e2e8f0;
  background: #f8fafc;
}

.page-settings #customMergeFieldsSection .merge-form-row .contact-field-box {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.page-settings #customMergeFieldsSection .merge-form-row .contact-modal-field-label {
  align-self: center;
  text-align: center;
  width: 100%;
}

.page-settings #customMergeFieldsSection .merge-form-row input,
.page-settings #customMergeFieldsSection .merge-form-row .merge-save-btn {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.page-settings #customMergeFieldsSection .merge-save-btn {
  background: #2563eb;
  color: #fff;
  border: none;
  padding: 8px 16px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
  white-space: nowrap;
}

.page-settings #customMergeFieldsSection .merge-save-btn:hover {
  background: #1d4ed8;
}

.page-settings #customMergeFieldsSection .merge-save-btn:disabled {
  background: #93c5fd;
  cursor: default;
}

.page-settings #customMergeFieldsSection .merge-row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.page-settings #customMergeFieldsSection .merge-empty {
  color: #94a3b8;
  font-style: italic;
  padding: 20px 14px !important;
}

.page-settings #customMergeFieldsSection .merge-fields-message {
  min-height: 1.2em;
  margin: 0 16px 12px;
}

/* Settings top bar: Help link + search (synced with Help section search) */
.page-settings .settings-topbar {
  flex-wrap: wrap;
  gap: 10px 14px;
  align-items: center;
}

.page-settings .settings-topbar-help {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  flex: 1 1 200px;
  min-width: 0;
  max-width: min(440px, 100%);
}

.page-settings .settings-topbar-help-inner {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.page-settings .settings-topbar-help-empty {
  margin: 0;
  font-size: 0.82rem;
  color: #64748b;
  line-height: 1.35;
}

.page-settings .settings-topbar-help-link {
  flex-shrink: 0;
  font-weight: 600;
  font-size: 0.95rem;
  color: #2563eb;
  text-decoration: none;
  white-space: nowrap;
}

.page-settings .settings-topbar-help-link:hover {
  text-decoration: underline;
}

.page-settings .settings-contact-support-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 0.95rem;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(79, 70, 229, 0.35);
}

.page-settings .settings-contact-support-btn:hover {
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(79, 70, 229, 0.4);
}

#contactSupportSection h3 {
  margin: 0 0 8px;
}

.page-settings .settings-topbar-help .help-search {
  flex: 1 1 140px;
  min-width: 0;
  padding: 7px 11px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  font-size: 0.95rem;
  box-sizing: border-box;
}

/* API & integrations catalog (Settings) — channel-style browser */
.page-settings .visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.page-settings .settings-api-catalog {
  background: linear-gradient(180deg, #f8fafc 0%, #ffffff 32%);
  border: 1px solid #e2e8f0;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
  scroll-margin-top: 1rem;
}

.page-settings .settings-api-catalog-header {
  margin-bottom: 14px;
}

.page-settings .settings-api-catalog-title {
  margin: 0 0 6px;
  font-size: 1.35rem;
  font-weight: 700;
  color: #0f172a;
  letter-spacing: -0.02em;
  text-align: center;
}

.page-settings .settings-api-catalog-subtitle {
  margin: 0 auto;
  max-width: 62ch;
  color: #475569;
  font-size: 0.95rem;
  line-height: 1.5;
  text-align: center;
}

.page-settings .settings-api-catalog-header-text {
  text-align: center;
}

.page-settings .settings-api-catalog-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 16px;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid #e2e8f0;
}

.page-settings .settings-api-catalog-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.page-settings .settings-api-catalog-tab {
  border: 1px solid #e2e8f0;
  background: #ffffff;
  color: #475569;
  font-size: 0.82rem;
  font-weight: 600;
  padding: 7px 14px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.page-settings .settings-api-catalog-tab:hover {
  border-color: #93c5fd;
  color: #1e40af;
}

.page-settings .settings-api-catalog-tab.is-active {
  background: #2563eb;
  border-color: #2563eb;
  color: #ffffff;
}

.page-settings .settings-api-catalog-search {
  flex: 1 1 200px;
  max-width: 320px;
  min-width: 160px;
}

.page-settings .settings-api-catalog-search-input {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 12px 8px 36px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  font-size: 0.9rem;
  background: #ffffff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%2394a3b8' stroke-width='2' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.3-4.3'/%3E%3C/svg%3E")
    10px center no-repeat;
}

.page-settings .settings-api-catalog-search-input:focus {
  outline: 2px solid #93c5fd;
  outline-offset: 1px;
  border-color: #2563eb;
}

.page-settings .settings-api-catalog-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.page-settings .settings-api-catalog-card {
  display: flex;
  flex-direction: column;
  min-height: 148px;
  padding: 14px 14px 12px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.12s ease;
}

.page-settings .settings-api-catalog-card:hover {
  border-color: #bfdbfe;
  box-shadow: 0 6px 16px rgba(37, 99, 235, 0.1);
  transform: translateY(-1px);
}

.page-settings .settings-api-catalog-card-inner {
  display: flex;
  gap: 12px;
  flex: 1 1 auto;
  min-height: 0;
}

.page-settings .settings-api-catalog-card-copy {
  flex: 1 1 auto;
  min-width: 0;
}

.page-settings .settings-api-catalog-card-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}

.page-settings .settings-api-catalog-badge {
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
}

.page-settings .settings-api-catalog-badge--core {
  background: #dbeafe;
  color: #1e40af;
}

.page-settings .settings-api-catalog-badge--popular {
  background: #dcfce7;
  color: #166534;
}

.page-settings .settings-api-catalog-badge--new {
  background: #e0e7ff;
  color: #3730a3;
}

.page-settings .settings-api-catalog-card-title {
  margin: 0 0 6px;
  font-size: 1rem;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.25;
}

.page-settings .settings-api-catalog-card-desc {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.45;
  color: #64748b;
}

.page-settings .settings-api-catalog-card-visual {
  flex: 0 0 52px;
  width: 52px;
  height: 52px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.45rem;
  background: linear-gradient(145deg, #f1f5f9 0%, #e2e8f0 100%);
}

.page-settings .settings-api-catalog-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid #f1f5f9;
}

.page-settings .settings-api-catalog-status {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: 6px;
  color: #64748b;
  background: #f1f5f9;
  max-width: 55%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.page-settings .settings-api-catalog-status--ok {
  color: #166534;
  background: #dcfce7;
}

.page-settings .settings-api-catalog-status--warn {
  color: #9a3412;
  background: #ffedd5;
}

.page-settings .settings-public-url-tracking-hint.is-warn {
  color: #9a3412;
  font-weight: 600;
}

.page-settings .settings-api-catalog-status--error {
  color: #991b1b;
  background: #fee2e2;
}

.page-settings .settings-api-catalog-status--off {
  color: #475569;
  background: #f1f5f9;
}

.page-settings .settings-api-catalog-connect {
  font-size: 0.88rem;
  font-weight: 700;
  color: #2563eb;
  text-decoration: none;
  white-space: nowrap;
}

.page-settings .settings-api-catalog-connect:hover {
  text-decoration: underline;
}

.page-settings .settings-api-catalog-empty {
  margin: 10px 0 0;
  text-align: center;
}

/* Settings page: section titles centered in each panel */
.page-settings .settings-category-body .panel > h2,
.page-settings .settings-category-body .panel > h3,
.page-settings .settings-category-body section.panel > h2,
.page-settings .settings-category-body section.panel > h3,
.page-settings .settings-category-body .panel > h4:first-of-type,
.page-settings .settings-category-body section.panel > h4:first-of-type {
  text-align: center;
}

.page-settings .panel > h3,
.page-settings .settings-runtime-section-title {
  font-size: 18px;
  font-weight: 700;
  color: #334155;
  line-height: 1.35;
  letter-spacing: 0;
  text-align: center;
}

.settings-runtime-section-title {
  margin: 0 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid #e2e8f0;
}

.settings-runtime-section-lead {
  margin: -4px 0 14px;
  max-width: 62ch;
  line-height: 1.45;
}

.admin-tenant-search-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 6px 6px 6px 12px;
}
.admin-tenant-search-wrap input {
  flex: 1;
  padding: 7px 4px;
  border: none;
  background: transparent;
  font-size: 0.92rem;
  outline: none;
  min-width: 0;
  color: #0f172a;
}
.admin-tenant-search-wrap input::placeholder {
  color: #94a3b8;
}
.admin-tenant-search-wrap button {
  padding: 7px 16px;
  background: #4f46e5;
  color: #fff;
  border: none;
  border-radius: 7px;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}
.admin-tenant-search-wrap button:hover {
  background: #4338ca;
}
.admin-tenant-search-wrap .admin-tenant-count {
  font-size: 0.82rem;
  color: #64748b;
  white-space: nowrap;
  flex-shrink: 0;
  padding-right: 4px;
}

.admin-tenant-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
  margin-top: 8px;
}
.admin-tenant-card {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 16px 18px;
}
.admin-tenant-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}
.admin-tenant-card-name {
  font-size: 0.95rem;
  font-weight: 700;
  color: #0f172a;
}
.admin-tenant-card-status {
  font-size: 0.75rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 99px;
  border: 1.5px solid;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.admin-tenant-card-email {
  font-size: 0.82rem;
  color: #64748b;
  margin-bottom: 8px;
  word-break: break-all;
}
.admin-tenant-card-phone {
  font-size: 0.9rem;
  margin-bottom: 4px;
}

.settings-sms-usage-card {
  margin: 0 0 18px;
  padding: 14px 18px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.settings-sms-usage-row {
  display: grid;
  grid-template-columns: 100px 36px 1fr 70px;
  align-items: center;
  gap: 10px;
  font-size: 0.88rem;
}
.settings-sms-usage-label {
  font-weight: 600;
  color: #374151;
}
.settings-sms-usage-bar-wrap {
  background: #e2e8f0;
  border-radius: 99px;
  height: 8px;
  overflow: hidden;
}
.settings-sms-usage-bar {
  height: 100%;
  border-radius: 99px;
  background: #4f46e5;
  width: 0%;
  transition: width 0.4s ease;
}
.settings-sms-usage-bar.warn  { background: #f59e0b; }
.settings-sms-usage-bar.danger { background: #dc2626; }
.settings-sms-usage-limit {
  font-size: 0.82rem;
  color: #64748b;
  text-align: right;
}

.settings-forward-highlight {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin: 0 0 20px;
  padding: 16px 18px;
  background: #eff6ff;
  border: 1px solid #93c5fd;
  border-radius: 12px;
}
.settings-forward-highlight-icon {
  font-size: 1.6rem;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 2px;
}
.settings-forward-highlight strong {
  font-size: 0.95rem;
  color: #1e3a5f;
}
.settings-forward-inline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}
.settings-forward-inline label {
  font-size: 0.85rem;
  font-weight: 600;
  color: #374151;
  white-space: nowrap;
}
.settings-forward-inline input {
  flex: 1;
  min-width: 160px;
  max-width: 220px;
  padding: 7px 10px;
  border: 1px solid #93c5fd;
  border-radius: 8px;
  font-size: 0.9rem;
}
.settings-forward-inline button {
  padding: 7px 18px;
  background: #1e40af;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.settings-forward-inline button:hover {
  background: #1e3a8a;
}

.settings-gmail-guide {
  background: #fff8f7;
  border: 1px solid #fecaca;
  border-radius: 12px;
  padding: 16px 18px;
  margin-bottom: 8px;
}
.settings-gmail-guide-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.95rem;
  color: #1e293b;
  margin-bottom: 2px;
}
.settings-gmail-guide-smtp {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  background: #f8fafc;
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 0.83rem;
  color: #334155;
  margin-bottom: 10px;
}
.settings-gmail-guide-link {
  font-size: 0.83rem;
  color: #4f46e5;
  text-decoration: none;
  font-weight: 600;
}
.settings-gmail-guide-link:hover { text-decoration: underline; }

.settings-test-buttons {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 14px;
}
.settings-test-btn {
  padding: 9px 18px;
  background: #f1f5f9;
  color: #1e293b;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.settings-test-btn:hover {
  background: #e2e8f0;
  border-color: #cbd5e1;
}

.settings-provisioned-phone-banner {
  margin: 0 0 16px;
  padding: 12px 16px;
  background: #d1fae5;
  border: 1px solid #6ee7b7;
  border-radius: 10px;
  color: #065f46;
  font-size: 14px;
  font-weight: 600;
}

.page-settings .settings-twilio-setup-guide {
  margin: 0 0 18px;
  padding: 14px 16px;
  border: 1px solid #93c5fd;
  border-radius: 12px;
  background: linear-gradient(180deg, #eff6ff 0%, #ffffff 70%);
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.08);
}

.page-settings .settings-twilio-setup-guide-title {
  margin: 0 0 8px;
  font-size: 1rem;
  font-weight: 700;
  color: #0f172a;
  text-align: center;
}

.page-settings .settings-new-agent-panel > h2 {
  text-align: center;
}

.page-settings #helpSection > .help-header h3 {
  flex: 1;
  text-align: center;
}

.page-settings .settings-twilio-setup-guide-lead {
  margin: 0 0 10px;
  line-height: 1.5;
}

.page-settings .settings-twilio-setup-steps {
  margin: 0 0 10px;
  padding-left: 1.25rem;
  color: #1e293b;
  line-height: 1.5;
  font-size: 0.92rem;
}

.page-settings .settings-twilio-setup-steps li {
  margin: 0 0 8px;
}

.page-settings .settings-twilio-setup-steps li:last-child {
  margin-bottom: 0;
}

.page-settings .settings-twilio-setup-guide-foot {
  margin: 0;
  font-size: 0.88rem;
}

.page-settings .settings-twilio-setup-guide a {
  font-weight: 600;
  color: #1d4ed8;
}

.page-settings .settings-twilio-setup-guide a:hover {
  color: #1e40af;
  text-decoration: underline;
}

.page-settings .settings-twilio-pricing-note {
  margin: 0 0 12px;
  padding: 12px 14px;
  border: 1px solid #bfdbfe;
  border-radius: 10px;
  background: #eff6ff;
  color: #1e3a5f;
  font-size: 0.92rem;
  line-height: 1.5;
}

.page-settings .settings-twilio-pricing-note > strong {
  display: block;
  margin: 0 0 8px;
  font-size: 0.95rem;
  color: #1d4ed8;
}

.page-settings .settings-twilio-pricing-note p {
  margin: 0;
}

.page-settings .settings-twilio-personal-number-note {
  margin: 14px 0 0;
  padding: 12px 14px;
  border: 1px solid #fcd34d;
  border-radius: 10px;
  background: #fffbeb;
  color: #78350f;
  font-size: 0.92rem;
  line-height: 1.5;
}

.page-settings .settings-twilio-personal-number-note > strong {
  display: block;
  margin: 0 0 8px;
  font-size: 0.95rem;
  color: #92400e;
}

.page-settings .settings-twilio-personal-number-note p strong {
  display: inline;
  margin: 0;
  font-size: inherit;
  color: #92400e;
  font-weight: 700;
}

.page-settings .settings-twilio-personal-number-note p {
  margin: 0 0 8px;
}

.page-settings .settings-twilio-personal-number-note p:last-child {
  margin-bottom: 0;
}

.page-settings .settings-twilio-personal-number-note a {
  font-weight: 600;
  color: #b45309;
}

.page-settings .settings-twilio-personal-number-note a:hover {
  color: #92400e;
}

.page-settings .settings-twilio-plain-intro {
  margin: 0 0 16px;
  padding: 14px 16px;
  border: 1px solid #c7d2fe;
  border-radius: 10px;
  background: #f8fafc;
  line-height: 1.55;
}

.page-settings .settings-twilio-plain-intro p {
  margin: 0 0 10px;
  color: #1e293b;
}

.page-settings .settings-twilio-plain-intro p:last-child {
  margin-bottom: 0;
}

.page-settings .settings-additional-channels-details {
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 0 16px;
  background: #f8fafc;
}

.page-settings .settings-additional-channels-summary {
  cursor: pointer;
  padding: 16px 4px;
  list-style: none;
}

.page-settings .settings-additional-channels-summary::-webkit-details-marker {
  display: none;
}

.page-settings .settings-additional-channels-title {
  display: block;
  font-size: 1.05rem;
  font-weight: 700;
  color: #0f172a;
}

.page-settings .settings-additional-channels-desc {
  display: block;
  margin-top: 4px;
  font-size: 0.9rem;
  font-weight: 500;
  color: #64748b;
}

.page-settings .settings-additional-channels-inner {
  padding: 0 0 8px;
  border-top: 1px solid #e2e8f0;
}

.page-settings .settings-subsection-panel {
  padding: 16px 0 20px;
  border-bottom: 1px solid #e2e8f0;
}

.page-settings .settings-subsection-panel:last-child {
  border-bottom: none;
  padding-bottom: 8px;
}

.settings-social-card {
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: linear-gradient(180deg, #fafbfc 0%, #f1f5f9 100%);
  padding: 16px 18px 18px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
}

.settings-social-card-label {
  margin: 0 0 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #64748b;
}

.settings-social-webhooks-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 16px;
  align-items: start;
}

.settings-webhook-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
}

.settings-webhook-row input {
  min-width: 0;
  flex: 1 1 auto;
}

.page-settings .settings-webhook-test-btn {
  width: auto;
  margin-top: 0;
  padding: 7px 12px;
  flex: 0 0 auto;
  border: 1px solid #cbd5e1;
  background: #ffffff;
  color: #1e40af;
  box-shadow: none;
}

.page-settings .settings-webhook-test-btn:hover {
  background: #eff6ff;
  border-color: #93c5fd;
  color: #1d4ed8;
  transform: none;
  box-shadow: none;
}

.settings-webhook-status,
.settings-webhook-save-status {
  display: inline-flex;
  align-items: center;
  min-height: 1.2em;
  margin-top: 6px;
  font-size: 0.8rem;
  font-weight: 700;
  color: #64748b;
}

.settings-webhook-status--ok {
  color: #166534;
}

.settings-webhook-status--ok::before {
  content: "OK";
  margin-right: 4px;
}

.settings-webhook-status--error {
  color: #b91c1c;
}

.settings-webhook-status--error::before {
  content: "X";
  margin-right: 4px;
}

.settings-webhook-status--pending {
  color: #1d4ed8;
}

@media (max-width: 920px) {
  .settings-social-webhooks-grid {
    grid-template-columns: 1fr;
  }
}

.settings-social-additional {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid #e2e8f0;
}

.settings-social-additional .hint:last-child {
  margin-bottom: 0;
}

.settings-social-extra-webhooks-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 16px;
  margin-top: 14px;
  align-items: start;
}

@media (max-width: 720px) {
  .settings-social-extra-webhooks-grid {
    grid-template-columns: 1fr;
  }
}

.settings-social-extra-placeholder {
  margin: 12px 0 0;
  padding: 10px 12px;
  border-radius: 8px;
  background: #ffffff;
  border: 1px dashed #cbd5e1;
  color: #64748b;
  font-size: 13px;
  line-height: 1.45;
}

.settings-social-extra-placeholder[hidden] {
  display: none !important;
}

.settings-social-save-actions {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid #e2e8f0;
  gap: 10px;
}

.page-settings .settings-social-save-actions button {
  width: auto;
  margin-top: 0;
}

.settings-google-auth-note {
  margin: 8px 0 0;
  color: #475569;
}

.settings-runtime-form > .contact-modal-actions {
  margin-top: 22px;
  padding-top: 4px;
}

/* Social Marketing — library upload row + media thumbnails */
.social-library-upload-form button,
.social-library-upload-form .social-library-pick-btn {
  width: auto;
  max-width: none;
  margin-top: 0;
  flex: 0 0 auto;
}

.social-library-upload-form .social-library-file-label {
  flex: 1 1 140px;
  min-width: 0;
  margin-top: 0;
  padding: 6px 10px;
  font-size: 12px;
  color: #64748b;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border: 1px dashed #cbd5e1;
  border-radius: 8px;
  background: #f8fafc;
}

.videos-file-upload-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.videos-file-upload-row .social-library-pick-btn {
  width: auto;
  max-width: none;
  margin-top: 0;
  flex: 0 0 auto;
}

.videos-file-upload-row .social-library-file-label {
  flex: 1 1 140px;
  min-width: 0;
}

.social-media-library-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 14px;
  align-items: stretch;
}

.social-media-card {
  display: flex;
  flex-direction: column;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #ffffff;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
}

.social-media-card-thumb {
  aspect-ratio: 16 / 10;
  background: #0f172a;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.social-media-thumb-img,
.social-media-thumb-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.social-media-thumb-fallback {
  color: #94a3b8;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 8px;
  text-align: center;
}

.social-media-card-body {
  padding: 10px 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}

.social-media-card-name {
  font-size: 12px;
  font-weight: 600;
  color: #0f172a;
  line-height: 1.35;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.social-media-card-meta {
  font-size: 11px;
  color: #64748b;
}

.social-media-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: auto;
}

.social-media-card-open {
  font-size: 12px;
  font-weight: 600;
}

.social-media-use-in-post-btn,
.social-media-delete-btn {
  width: auto !important;
  margin-top: 0 !important;
  padding: 5px 10px !important;
  font-size: 11px !important;
  font-weight: 600;
}

.social-post-body-row {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-top: 8px;
}

.social-post-media-thumb {
  flex: 0 0 96px;
  width: 96px;
  height: 72px;
  border-radius: 8px;
  overflow: hidden;
  background: #0f172a;
}

.social-post-media-thumb img,
.social-post-media-thumb video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.social-post-body-main {
  flex: 1;
  min-width: 0;
}

.social-post-top-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.social-post-clear-btn {
  width: auto !important;
  min-width: 0;
  margin-top: 0 !important;
  padding: 4px 10px !important;
  font-size: 11px !important;
  font-weight: 600;
  line-height: 1.2;
}

.social-page-intro {
  margin: 0 0 14px;
  font-size: 15px;
  line-height: 1.5;
  color: #334155;
}

.social-setup-notice {
  margin: 0 0 16px;
  padding: 14px 16px;
  border: 1px solid #fcd34d;
  border-radius: 8px;
  background: #fffbeb;
  color: #92400e;
}

.social-setup-notice p {
  margin: 0;
  line-height: 1.5;
}

.social-setup-notice a {
  color: #b45309;
  font-weight: 600;
}

.social-media-library-toolbar {
  margin-bottom: 12px;
}

.social-media-library-toolbar input[type="search"] {
  flex: 1 1 180px;
  min-width: 0;
}

.social-platform-hint {
  margin: 0 0 8px;
}

.social-platform-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.social-platform-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid #cbd5e1;
  background: #f8fafc;
  font-size: 13px;
  font-weight: 600;
  color: #0f172a;
  cursor: pointer;
  user-select: none;
}

.social-platform-pill input[type="checkbox"] {
  width: 15px;
  height: 15px;
  margin: 0;
}

.social-platform-pill.is-connected {
  border-color: #2563eb;
  background: #eff6ff;
}

.social-platform-pill.is-connected:has(input:checked) {
  border-color: #1d4ed8;
  background: #dbeafe;
}

.social-platform-pill.is-disconnected {
  opacity: 0.55;
  cursor: not-allowed;
  background: #f1f5f9;
}

.social-platform-pill-note {
  font-size: 10px;
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.social-char-counter {
  margin-top: 6px;
}

.social-char-counter.is-over-limit {
  color: #b91c1c;
  font-weight: 600;
}

.social-schedule-options {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 8px;
}

.social-schedule-field-wrap {
  margin-top: 8px;
}

.social-schedule-field-wrap input[type="datetime-local"] {
  max-width: 280px;
}

.social-post-preview {
  font-size: 14px;
  line-height: 1.45;
  color: #0f172a;
  white-space: pre-wrap;
}

.social-post-platform-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.social-status-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.social-status-badge--sent {
  color: #166534;
  background: #dcfce7;
  border: 1px solid #86efac;
}

.social-status-badge--failed,
.social-status-badge--queued {
  color: #991b1b;
  background: #fee2e2;
  border: 1px solid #fca5a5;
}

.social-status-badge--scheduled {
  color: #1e40af;
  background: #dbeafe;
  border: 1px solid #93c5fd;
}

.social-post-media-line {
  margin-top: 6px;
  font-size: 12px;
  color: #64748b;
}

.documents-recovery-panel {
  margin: 8px 0 0;
  padding: 12px 14px;
  border: 1px solid #86efac;
  border-radius: 8px;
  background: #f0fdf4;
  color: #14532d;
  font-size: 14px;
  line-height: 1.5;
}

.documents-recovery-panel p {
  margin: 0 0 8px;
}

.documents-recovery-panel p:last-child {
  margin-bottom: 0;
}

.documents-recovery-panel .hint {
  margin: 0;
  color: #166534;
}

@media (max-width: 520px) {
  .social-post-body-row {
    flex-direction: column;
  }

  .social-post-media-thumb {
    flex: 0 0 auto;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
    max-height: 200px;
  }
}

#crmEmailOpenAlertBox {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 10050;
  display: grid;
  gap: 8px;
  max-width: min(420px, calc(100vw - 24px));
  pointer-events: none;
}

.crm-email-open-alert {
  pointer-events: auto;
  background: #0f766e;
  color: #f0fdfa;
  border: 1px solid rgba(153, 246, 228, 0.45);
  border-radius: 12px;
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.35);
  padding: 12px 14px;
  font: 600 14px/1.35 system-ui, Segoe UI, Arial, sans-serif;
  transition: opacity 180ms ease;
}

.crm-email-open-alert--sent {
  background: #1e3a8a;
  border-color: rgba(147, 197, 253, 0.45);
  color: #eff6ff;
}

.crm-email-open-alert.is-hiding {
  opacity: 0;
}

.crm-email-open-alert-title {
  font: 800 15px/1.2 system-ui, Segoe UI, Arial, sans-serif;
  margin-bottom: 4px;
}

.crm-email-open-alert-body {
  font: 600 14px/1.35 system-ui, Segoe UI, Arial, sans-serif;
}

#resetEmailOpenAlertsBtn {
  width: auto;
  margin-top: 0;
  padding: 5px 10px;
  font-size: 12px;
  min-height: 30px;
  white-space: nowrap;
}

#twilioNumbersSection {
  padding: 14px 16px;
}

#twilioNumbersSection h3 {
  font-size: 16px;
  margin: 0 0 6px;
}

#twilioNumbersSection > p.hint {
  font-size: 12px;
  margin: 0 0 8px;
}

#twilioNumbersSection .contact-modal-form {
  gap: 8px;
}

#twilioNumbersSection .contact-modal-grid {
  gap: 8px 12px;
}

#twilioNumbersSection .contact-modal-field-label {
  font-size: 12px;
  margin-bottom: 2px;
}

#twilioNumbersSection input[type="text"],
#twilioNumbersSection input[type="password"],
#twilioNumbersSection input:not([type]) {
  padding: 6px 9px;
  font-size: 13px;
  min-height: 30px;
}

#twilioNumbersSection .contact-modal-actions {
  margin-top: 4px;
}

#twilioNumbersSection .contact-modal-actions button {
  padding: 5px 11px;
  font-size: 12.5px;
  min-height: 30px;
}

#twilioNumbersSection #twilioNumberMessage {
  font-size: 12px;
}

#twilioNumbersSection .campaign-category-child {
  font-size: 14px;
  font-weight: 600;
  padding: 5px 8px;
}

#twilioNumbersSection .campaign-category-child-wrap {
  margin-bottom: 4px;
}

#twilioNumbersSection .campaign-category-inline-actions {
  gap: 6px;
}

#twilioNumbersSection .campaign-category-inline-actions button {
  width: auto;
  margin-top: 0;
  padding: 3px 8px;
  font-size: 11.5px;
  line-height: 1.15;
  border-radius: 6px;
}

#twilioConfigForm {
  margin-bottom: 12px;
}

#contactWorkspaceLabelsSection .crm-label-list-editor {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 10px;
}

#contactWorkspaceLabelsSection .crm-label-list-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

#contactWorkspaceLabelsSection .crm-label-list-row select,
#contactWorkspaceLabelsSection .crm-label-list-row input[type="text"] {
  flex: 1 1 160px;
  min-width: 120px;
  margin: 0;
}

#contactWorkspaceLabelsSection .crm-label-list-delete-btn {
  flex: 0 0 auto;
  width: auto;
  margin: 0;
  padding: 6px 10px;
  font-size: 12px;
}

#contactWorkspaceLabelsSection #contactWorkspaceLabelsMessage {
  font-size: 12px;
}

#contactWorkspaceLabelsSection .contact-workspace-save-scroll-note {
  margin: 0 0 14px;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid rgba(79, 70, 229, 0.22);
  background: rgba(79, 70, 229, 0.06);
  color: #3730a3;
  text-align: center;
}

.contact-history-panel h2 {
  margin: 0 0 10px;
  font-size: 21px;
  font-weight: 600;
  color: #334155;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(139, 92, 246, 0.22);
}

.contact-history-count {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 999px;
  background: #ede9fe;
  color: #5b21b6;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.contact-history-panel {
  border-color: #8b5cf6;
  background: #f5f3ff;
}

.contact-history-list {
  display: grid;
  gap: 8px;
  max-height: calc(100vh - 230px);
  overflow: auto;
  padding-right: 2px;
}

.contact-history-load-more-wrap {
  margin-top: 10px;
  display: flex;
  justify-content: center;
}

#contactHistoryLoadMoreBtn {
  width: auto;
  margin-top: 0;
  padding: 6px 12px;
}

.contact-history-item {
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  background: #f8fafc;
  padding: 7px 40px 7px 8px;
  cursor: pointer;
  position: relative;
}

.contact-history-actions-hit {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 36px;
  z-index: 2;
  cursor: pointer;
  border-radius: 0 6px 6px 0;
  border-left: 1px solid transparent;
}

.contact-history-actions-hit:hover {
  background: rgba(37, 99, 235, 0.08);
  border-left-color: #bfdbfe;
}

.contact-history-actions-hit .contact-history-markers {
  position: absolute;
  right: 8px;
  bottom: 7px;
  left: auto;
  top: auto;
}

.contact-history-item:hover {
  border-color: #93c5fd;
}

.contact-history-item:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}

.contact-history-item-sold-change {
  background: #dcfce7;
  border-color: #86efac;
}

.contact-history-item-follow-up {
  background: #e8f4fc;
  border-color: #bae6fd;
}

.contact-history-item-follow-up.contact-history-item-sold-change {
  background: #dcfce7;
  border-color: #86efac;
}

.contact-history-item-status-pending {
  background: #fef9c3;
  border-color: #facc15;
}

.contact-history-item-status-declined {
  background: #fee2e2;
  border-color: #fca5a5;
}

.contact-history-item-status-aps {
  background: #ede9fe;
  border-color: #c4b5fd;
}

.contact-history-item-status-referred {
  background: #fce7f3;
  border-color: #f9a8d4;
}

.contact-history-item-pinned {
  border-left: 4px solid #1d4ed8;
}

.contact-history-item-starred {
  box-shadow: inset 0 0 0 1px #f59e0b;
}

.contact-history-type-follow-up-date,
.contact-history-type-follow-up-time {
  color: #1e40af;
  background: #dbeafe;
}

.contact-history-top {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}

.contact-history-type {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  color: #1e3a8a;
  background: #dbeafe;
  border-radius: 999px;
  padding: 3px 10px;
}

.contact-history-type-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.72);
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
}

.contact-history-type-detail-change {
  color: #7c2d12;
  background: #ffedd5;
}

.contact-history-type-outcome,
.contact-history-type-status,
.contact-history-type-status-change {
  color: #334155;
  background: #e2e8f0;
}

.contact-history-type-vcall {
  color: #166534;
  background: #dcfce7;
}

.contact-history-type-tags,
.contact-history-type-notes,
.contact-history-type-notes-update {
  color: #854d0e;
  background: #fef3c7;
}

.contact-history-type-call-back-notes {
  color: #854d0e;
  background: #fef3c7;
}

.contact-history-type-special-notes {
  color: #854d0e;
  background: #fef3c7;
}

.contact-history-detail-after .contact-history-note-newest,
.contact-history-detail .contact-history-note-newest,
.contact-history-note-newest {
  color: #15803d !important;
  font-weight: 700;
  background: #dcfce7;
  padding: 1px 4px;
  border-radius: 4px;
}

.contact-history-type-sms {
  color: #6d28d9;
  background: #ede9fe;
}

.contact-history-type-call {
  color: #166534;
  background: #dcfce7;
}

.contact-history-type-email {
  color: #1d4ed8;
  background: #dbeafe;
}

.contact-history-type-email-opened {
  color: #0f766e;
  background: #ccfbf1;
}

.contact-history-email-opened-detail {
  display: grid;
  gap: 4px;
}

.contact-history-email-opened-title {
  font-weight: 700;
  color: #0f766e;
  font-size: 14px;
  line-height: 1.35;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.contact-history-email-opened-badge {
  display: inline-flex;
  align-items: center;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  background: #dcfce7;
  color: #15803d;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  vertical-align: middle;
  white-space: nowrap;
}

.contact-history-email-opened-when {
  font-size: 13px;
  color: #475569;
}

.contact-history-item-type-email-opened:hover {
  border-color: #5eead4;
}

.contact-history-type-campaign {
  color: #166534;
  background: #dcfce7;
}

.contact-history-type-event {
  color: #475569;
  background: #e2e8f0;
}

.contact-history-date {
  font-size: 13px;
  color: #64748b;
}

.contact-history-detail {
  font-size: 15px;
  color: #334155;
  line-height: 1.35;
  white-space: pre-wrap;
  word-break: break-word;
}

.contact-history-sms-detail {
  display: block;
}

.contact-history-sms-body {
  font-size: 15px;
  line-height: 1.45;
  color: #0f172a;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: anywhere;
}

.contact-history-detail-field {
  color: #7c2d12;
  font-weight: 700;
}

.contact-history-detail-before {
  color: #64748b;
}

.contact-history-detail-arrow {
  color: #7c2d12;
  font-weight: 700;
}

.contact-history-detail-after {
  color: #065f46;
  font-weight: 600;
}

.contact-history-email-detail {
  display: grid;
  gap: 4px;
}

.contact-history-item-type-email .contact-history-email-detail {
  gap: 2px;
}

.contact-history-email-title {
  font-weight: 700;
  color: #1e3a8a;
}

.contact-history-item-type-email .contact-history-email-title {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-height: 1.35;
  font-size: 14px;
}

.contact-history-email-meta {
  display: grid;
  gap: 2px;
  font-size: 13px;
  color: #475569;
}

.contact-history-email-key {
  color: #334155;
  font-weight: 700;
}

.contact-history-email-value {
  color: #475569;
}

.contact-history-email-body-label {
  margin-top: 4px;
  padding-top: 6px;
  border-top: 1px solid #dbe2ef;
  font-size: 12px;
  font-weight: 700;
  color: #334155;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.contact-history-item-type-email:not(.contact-history-item-type-email-opened) .contact-history-email-meta,
.contact-history-item-type-email:not(.contact-history-item-type-email-opened) .contact-history-email-body-label,
.contact-history-item-type-email:not(.contact-history-item-type-email-opened) .contact-history-email-body,
.contact-history-item-type-email:not(.contact-history-item-type-email-opened) .contact-history-email-actions {
  display: none;
}

.contact-history-item-type-email[data-history-open-email="1"]:hover {
  border-color: #93c5fd;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.12);
}

.contact-history-item-type-email .contact-history-email-heading-preview-iframe {
  max-height: 64px;
  min-height: 28px;
  margin-top: 4px;
  border-radius: 6px;
  border-bottom: 1px solid #e2e8f0;
}

.contact-history-email-body {
  font-size: 14px;
  line-height: 1.4;
  white-space: pre-wrap;
  word-break: break-word;
  color: #0f172a;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 8px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.contact-history-email-heading-preview-iframe {
  width: 100%;
  min-height: 32px;
  max-height: 200px;
  display: block;
  margin: 0 0 -1px 0;
  border: 1px solid #e2e8f0;
  border-bottom: 0;
  border-radius: 6px 6px 0 0;
  background: #ffffff;
  box-sizing: border-box;
}

.contact-history-email-body--after-heading {
  border-top: 0;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.contact-history-email-body-html {
  white-space: normal;
}

.contact-history-email-body-html img {
  max-width: 100%;
  height: auto;
}

.contact-history-email-body-iframe {
  width: 100%;
  min-height: 120px;
  border: 1px solid #dbe2ef;
  border-radius: 6px;
  background: #ffffff;
  display: block;
}

.contact-history-email-body-preview-iframe {
  min-height: 0;
  height: 70px;
  max-height: 90px;
  margin: 0;
  border: 1px solid #e2e8f0;
}

.contact-history-email-actions {
  margin-top: 0;
  padding-top: 0;
}

.contact-history-email-show-more {
  appearance: none;
  margin: 0;
  padding: 4px 10px;
  width: auto;
  min-width: 0;
  font-size: 12px;
  font-weight: 600;
  color: #ffffff;
  background: #2563eb;
  border: 1px solid #1d4ed8;
  border-radius: 6px;
  cursor: pointer;
}

.contact-history-email-show-more:hover {
  background: #1d4ed8;
  border-color: #1e40af;
}

.contact-history-email-show-more:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}

.contact-history-email-modal-meta {
  display: grid;
  gap: 3px;
  font-size: 13px;
  color: #334155;
  margin-bottom: 10px;
}

.contact-history-email-modal-frame {
  width: 100%;
  height: min(70vh, 680px);
  border: 1px solid #dbe2ef;
  border-radius: 6px;
  background: #ffffff;
}

.contact-history-empty {
  font-size: 15px;
  color: #64748b;
  border: 1px dashed #cbd5e1;
  border-radius: 6px;
  padding: 10px;
  background: #f8fafc;
}

.contact-history-markers {
  display: flex;
  gap: 6px;
  font-size: 13px;
  color: #1e3a8a;
}

.contact-history-marker {
  line-height: 1;
}

.contact-history-action-menu {
  position: absolute;
  z-index: 40;
  display: grid;
  gap: 6px;
  min-width: 160px;
  padding: 8px;
  border-radius: 8px;
  border: 1px solid #cbd5e1;
  background: #ffffff;
  box-shadow: 0 10px 28px rgba(2, 6, 23, 0.2);
}

.contact-history-action-menu button {
  width: 100%;
}

#message {
  margin-top: 12px;
  font-weight: bold;
}

#message.is-success {
  color: #166534;
  background: #dcfce7;
  border: 1px solid #86efac;
  border-radius: 6px;
  padding: 8px 10px;
}

#message.is-error {
  color: #b91c1c;
  background: #fee2e2;
  border: 1px solid #fca5a5;
  border-radius: 6px;
  padding: 8px 10px;
}

#homeMessage {
  margin-top: 12px;
  font-weight: bold;
}

.home-loading-status {
  margin: 16px 0 0;
  padding: 0;
  font-size: 14px;
  font-weight: 700;
  color: #1b5e20;
  text-align: left;
}

.home-summary-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.home-stat-card {
  margin-top: 0;
  border-width: 1px;
  border-style: solid;
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  border-color: #1d4ed8;
}

.home-stat-label {
  margin: 0;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.92);
  font-weight: 600;
}

.home-stat-value {
  margin: 6px 0 0;
  font-size: 34px;
  color: #ffffff;
  font-weight: 700;
}

.home-stat-card-activities {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  border-color: #1d4ed8;
}

.home-stat-card-touched {
  background: linear-gradient(135deg, #4f46e5, #4338ca);
  border-color: #4338ca;
}

.home-stat-card-24h {
  background: linear-gradient(135deg, #0d9488, #0f766e);
  border-color: #0f766e;
}

.home-stat-card-7d {
  background: linear-gradient(135deg, #f97316, #ea580c);
  border-color: #ea580c;
}

.home-stat-card-sold {
  background: linear-gradient(135deg, #16a34a, #15803d);
  border-color: #15803d;
}

.home-stat-card-opens-24h {
  background: linear-gradient(135deg, #7c3aed, #6d28d9);
  border-color: #6d28d9;
}

.home-stat-card-opens-7d {
  background: linear-gradient(135deg, #0891b2, #0e7490);
  border-color: #0e7490;
}

.home-stat-card-clicks-7d {
  background: linear-gradient(135deg, #db2777, #be185d);
  border-color: #be185d;
}

.home-stat-card-sent-7d {
  background: linear-gradient(135deg, #2563eb, #1e40af);
  border-color: #1e40af;
}

.home-stat-card-clicks-24h {
  background: linear-gradient(135deg, #e11d48, #be123c);
  border-color: #be123c;
}

.home-main-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 10px;
}

.home-sales-automation-section {
  margin-top: 10px;
}

.home-drip-head {
  margin-bottom: 10px;
}

.home-drip-head .home-panel-title {
  margin: 0;
}

.home-drip-queue-panel {
  margin-top: 10px;
}

.home-panel-title {
  margin: 0 0 10px;
  font-size: 22px;
  font-weight: 600;
  color: #334155;
}

.home-panel-subtitle {
  margin: -4px 0 10px;
  font-size: 12px;
  line-height: 1.4;
}

.home-automation-list {
  display: grid;
  gap: 8px;
  max-height: 360px;
  overflow: auto;
}

.home-automation-item {
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 10px 12px;
  background: #f8fafc;
}

.home-automation-item--running {
  border-color: #c7d2fe;
  background: #eef2ff;
}

.home-automation-item-link {
  display: block;
  text-decoration: none;
  color: inherit;
  transition:
    border-color 140ms ease,
    background 140ms ease,
    transform 140ms ease;
}

.home-automation-item-link:hover {
  border-color: #a5b4fc;
  background: #e0e7ff;
  transform: translateY(-1px);
}

.home-automation-item-content {
  display: grid;
  gap: 4px;
}

.home-automation-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.home-automation-status {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 999px;
}

.home-automation-status--running {
  background: #dbeafe;
  color: #1d4ed8;
}

.home-automation-status--pending {
  background: #ede9fe;
  color: #6d28d9;
}

.home-automation-status--sent {
  background: #dcfce7;
  color: #15803d;
}

.home-automation-status--failed {
  background: #fee2e2;
  color: #b91c1c;
}

.home-automation-status--skipped {
  background: #f1f5f9;
  color: #475569;
}

.home-automation-status--other {
  background: #e2e8f0;
  color: #334155;
}

.home-automation-time {
  font-size: 11px;
  color: #64748b;
  white-space: nowrap;
}

.home-automation-contact {
  font-size: 14px;
  font-weight: 700;
  color: #0f172a;
}

.home-automation-campaign {
  font-size: 12px;
  font-weight: 600;
  color: #475569;
}

.home-automation-detail {
  font-size: 12px;
  color: #64748b;
}

.home-automation-error {
  font-size: 11px;
  color: #b91c1c;
  line-height: 1.35;
}

.home-categories {
  display: grid;
  gap: 10px;
}

.home-category-row {
  display: grid;
  gap: 6px;
}

.home-category-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  color: #334155;
}

.home-category-track {
  width: 100%;
  height: 12px;
  border-radius: 999px;
  background: #e2e8f0;
  overflow: hidden;
}

.home-category-fill {
  height: 100%;
  border-radius: 999px;
}

.home-distribution-wrap {
  display: flex;
  gap: 14px;
  align-items: center;
}

.home-donut {
  width: 180px;
  height: 180px;
  border-radius: 50%;
  position: relative;
  flex: 0 0 180px;
}

.home-donut::after {
  content: "";
  position: absolute;
  width: 94px;
  height: 94px;
  background: #ffffff;
  border-radius: 50%;
  inset: 0;
  margin: auto;
}

.home-donut-center {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 94px;
  height: 94px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  font-size: 24px;
  font-weight: 700;
  color: #1e3a8a;
}

.home-donut-legend {
  display: grid;
  gap: 8px;
  font-size: 14px;
}

.home-legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #334155;
}

.home-legend-dot {
  width: 12px;
  height: 12px;
  border-radius: 999px;
}

.home-trend-bars {
  height: 230px;
  display: flex;
  align-items: flex-end;
  gap: 6px;
  border-bottom: 1px solid #dbe2ef;
  padding: 6px 4px 0;
}

.home-trend-bar-wrap {
  flex: 1 1 0;
  display: grid;
  justify-items: center;
  align-items: end;
  height: 100%;
}

.home-trend-bar {
  width: 100%;
  max-width: 20px;
  background: linear-gradient(180deg, #60a5fa 0%, #2563eb 100%);
  border-radius: 5px 5px 0 0;
}

.home-trend-count {
  font-size: 11px;
  color: #475569;
  margin-top: 4px;
}

.home-trend-label {
  font-size: 11px;
  color: #64748b;
  margin-top: 2px;
}

/* Live Dashboard — task reminder opens one hour before today’s scheduled task time */
.home-task-reminder-card {
  width: min(440px, calc(100% - 24px));
  margin: 12vh auto;
}

.home-task-reminder-lead {
  margin: 0 0 12px;
  font-size: 14px;
  color: #475569;
  line-height: 1.45;
}

.home-task-reminder-dl {
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.home-task-reminder-dl > div {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 8px 12px;
  font-size: 13px;
  align-items: baseline;
}

.home-task-reminder-dl dt {
  margin: 0;
  font-weight: 700;
  color: #64748b;
}

.home-task-reminder-dl dd {
  margin: 0;
  color: #0f172a;
}

.home-task-reminder-hint {
  margin: 12px 0 0;
  font-size: 12px;
  color: #64748b;
}

.home-task-reminder-actions {
  margin-top: 16px;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.home-task-reminder-open {
  font-size: 13px;
  font-weight: 600;
  color: #1d4ed8;
  text-decoration: none;
}

.home-task-reminder-open:hover {
  color: #1e3a8a;
  text-decoration: underline;
}

@media (max-width: 480px) {
  .home-task-reminder-dl > div {
    grid-template-columns: 1fr;
  }
}

.home-upcoming-list {
  display: grid;
  gap: 8px;
  max-height: 230px;
  overflow: auto;
  padding-right: 2px;
}

.home-upcoming-item {
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  background: #f8fafc;
  padding: 8px;
}

.home-upcoming-item.home-upcoming-item-call {
  border-color: #86efac;
  background: #f0fdf4;
}

.home-upcoming-item.home-upcoming-item-text {
  border-color: #93c5fd;
  background: #eff6ff;
}

.home-upcoming-item.home-upcoming-item-email {
  border-color: #c4b5fd;
  background: #f5f3ff;
}

.home-upcoming-item.home-upcoming-item-other {
  border-color: #f9a8d4;
  background: #fdf2f8;
}

.home-upcoming-item-link {
  display: block;
  color: inherit;
  text-decoration: none;
}

.home-upcoming-item-link:hover {
  border-color: #bfdbfe;
  background: #eff6ff;
}

.home-upcoming-item-link.home-upcoming-item-call:hover {
  border-color: #4ade80;
  background: #dcfce7;
}

.home-upcoming-item-link.home-upcoming-item-text:hover {
  border-color: #60a5fa;
  background: #dbeafe;
}

.home-upcoming-item-link.home-upcoming-item-email:hover {
  border-color: #a78bfa;
  background: #ede9fe;
}

.home-upcoming-item-link.home-upcoming-item-other:hover {
  border-color: #f472b6;
  background: #fce7f3;
}

.home-upcoming-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
}

.home-upcoming-top-meta {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
  flex-shrink: 0;
}

.home-upcoming-past-due {
  font-size: 11px;
  font-weight: 700;
  color: #dc2626;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.home-upcoming-name {
  font-size: 13px;
  font-weight: 700;
  color: #0f172a;
}

.home-upcoming-action {
  font-size: 11px;
  color: #1e40af;
  font-weight: 700;
}

.home-upcoming-contact {
  margin-top: 4px;
  font-size: 12px;
  color: #334155;
}

.home-upcoming-when {
  margin-top: 3px;
  font-size: 16px;
  font-weight: 700;
  color: #0f172a;
}

.home-recent-list {
  display: grid;
  gap: 8px;
  max-height: 230px;
  overflow: auto;
  padding-right: 2px;
}

.home-recent-item {
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  background: #f8fafc;
  padding: 8px;
}

.home-recent-item-link {
  display: block;
  color: inherit;
  text-decoration: none;
}

.home-recent-item-link:hover {
  background: #eef2ff;
  border-color: #c7d2fe;
}

.home-recent-item-content {
  display: block;
}

.home-recent-body {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.home-recent-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  flex: 0 0 28px;
}

.home-recent-main {
  min-width: 0;
  flex: 1 1 auto;
}

.home-recent-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.home-recent-type {
  font-size: 12px;
  color: #1e3a8a;
  font-weight: 700;
}

.home-recent-time {
  font-size: 11px;
  color: #64748b;
}

.home-recent-contact {
  margin-top: 4px;
  font-size: 14px;
  font-weight: 600;
  color: #334155;
}

.home-recent-detail {
  margin-top: 2px;
  font-size: 13px;
  color: #475569;
}

.home-empty {
  font-size: 13px;
  color: #64748b;
}

.activities-window-hint {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 14px;
}

.activities-window-hint #activitiesLastUpdated {
  font-weight: 600;
  color: #64748b;
}

.activities-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.activities-metric-card {
  cursor: pointer;
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease,
    filter 0.15s ease;
}

.activities-metric-card:hover,
.activities-metric-card:focus-visible {
  transform: translateY(-2px);
  filter: brightness(1.04);
  box-shadow: 0 18px 34px rgba(15, 23, 42, 0.2);
  outline: none;
}

.activities-main-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
  gap: 14px;
  margin-bottom: 14px;
  align-items: stretch;
}

@media (max-width: 960px) {
  .activities-main-grid {
    grid-template-columns: 1fr;
  }
}

.activities-main-panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
}

.activities-column-body {
  flex: 1;
  min-height: 0;
  max-height: min(68vh, 760px);
  overflow-y: auto;
  padding-right: 4px;
}

.activities-filter-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 12px;
}

.activities-filter-btn {
  width: auto;
  min-width: 0;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid #cbd5e1;
  background: #f8fafc;
  color: #334155;
  font-size: 12px;
  font-weight: 800;
}

.activities-filter-btn:hover,
.activities-filter-btn.is-active {
  background: #e0e7ff;
  border-color: #a5b4fc;
  color: #312e81;
}

.activities-panel-subtitle {
  margin: 0 0 10px;
}

.activities-user-sections {
  display: grid;
  gap: 14px;
}

.activities-user-block,
.activities-status-block {
  border-top: 1px solid #e2e8f0;
  padding-top: 10px;
  border-radius: 10px;
  min-width: 0;
}

.activities-user-block:first-child,
.activities-status-block:first-child {
  border-top: 0;
  padding-top: 0;
}

.activities-subheading {
  margin: 0 0 8px;
  font-size: 15px;
  font-weight: 700;
  color: #1e3a8a;
  display: flex;
  align-items: center;
  gap: 8px;
}

.activities-count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.6em;
  padding: 2px 8px;
  border-radius: 999px;
  background: #e0e7ff;
  color: #1e3a8a;
  font-size: 12px;
  font-weight: 700;
}

.activities-feed-list {
  max-height: none;
  min-width: 0;
}

.activities-main-panel .activities-feed-list,
.activities-column-body .home-recent-list {
  max-height: none;
  overflow: visible;
}

.activities-main-panel .home-recent-item {
  min-width: 0;
}

.activities-main-panel .home-recent-top,
.activities-main-panel .home-recent-detail,
.activities-main-panel .home-recent-contact {
  min-width: 0;
  overflow-wrap: anywhere;
}

.activities-main-panel .home-recent-time {
  flex: 0 0 auto;
  white-space: nowrap;
}

.activities-date-group {
  position: sticky;
  top: 0;
  z-index: 1;
  margin: 4px 0 2px;
  padding: 5px 8px;
  border-radius: 8px;
  background: #eef2ff;
  color: #312e81;
  font-size: 12px;
  font-weight: 800;
}

.activities-focus-flash {
  animation: activities-focus-flash 1.1s ease;
}

@keyframes activities-focus-flash {
  0%,
  100% {
    box-shadow: none;
  }
  30% {
    box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.22);
  }
}

.activities-status-panel {
  margin-bottom: 14px;
}

.activities-status-chart {
  margin-top: 4px;
}

.activities-status-chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin-bottom: 8px;
  font-size: 11px;
  color: #475569;
}

.activities-status-chart-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.activities-status-chart-legend-swatch {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  flex-shrink: 0;
}

.activities-status-line-chart-wrap {
  overflow-x: auto;
  padding: 2px 0 0;
}

.activities-status-line-chart {
  display: block;
  width: 100%;
  max-width: 680px;
  min-width: 480px;
  height: auto;
  margin: 0 auto;
}

.activities-status-bar-chart-wrap {
  overflow-x: auto;
  padding: 2px 0 0;
}

.activities-status-bar-chart {
  display: block;
  width: 100%;
  max-width: 640px;
  min-width: 460px;
  height: auto;
  margin: 0 auto;
}

.activities-status-chart-gridline line {
  stroke: #e2e8f0;
  stroke-width: 1;
}

.activities-status-chart-axis {
  stroke: #94a3b8;
  stroke-width: 1.4;
}

.activities-status-chart-gridline text,
.activities-status-chart-x-label {
  fill: #64748b;
  font-size: 10px;
  font-weight: 700;
}

.activities-status-bar rect {
  filter: drop-shadow(0 4px 7px rgba(15, 23, 42, 0.14));
}

.activities-status-bar-value {
  fill: #334155;
  font-size: 12px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.activities-status-bar-label {
  fill: #475569;
  font-size: 10px;
  font-weight: 800;
}

.activities-status-chart-series polyline {
  filter: drop-shadow(0 4px 8px rgba(15, 23, 42, 0.12));
}

.activities-status-chart-point circle {
  stroke: #ffffff;
  stroke-width: 2;
}

.activities-status-chart-point text {
  fill: #334155;
  font-size: 10px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.activities-status-chart-grid {
  display: grid;
  gap: 10px;
}

.activities-status-chart-head,
.activities-status-chart-row {
  display: grid;
  grid-template-columns: minmax(96px, 120px) repeat(4, minmax(0, 1fr)) 52px;
  gap: 10px;
  align-items: end;
}

.activities-status-chart-head {
  padding-bottom: 6px;
  border-bottom: 1px solid #e2e8f0;
  align-items: center;
}

.activities-status-chart-status-label,
.activities-status-chart-total-label,
.activities-status-chart-week {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #64748b;
}

.activities-status-chart-week {
  text-align: center;
  text-transform: none;
  font-size: 12px;
  font-weight: 600;
  color: #475569;
  line-height: 1.25;
}

.activities-status-chart-status {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: #1e3a8a;
  padding-bottom: 4px;
}

.activities-status-chart-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  flex-shrink: 0;
}

.activities-status-chart-bars {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  align-items: end;
  min-height: 120px;
}

.activities-status-chart-bar-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  height: 120px;
  gap: 4px;
}

.activities-status-chart-bar-value {
  font-size: 12px;
  font-weight: 700;
  color: #334155;
  font-variant-numeric: tabular-nums;
  min-height: 1.2em;
}

.activities-status-chart-bar {
  width: 100%;
  max-width: 48px;
  min-height: 0;
  border-radius: 6px 6px 2px 2px;
  transition: height 0.2s ease;
}

.activities-status-chart-total {
  text-align: center;
  font-size: 16px;
  font-weight: 800;
  color: #1e3a8a;
  font-variant-numeric: tabular-nums;
  padding-bottom: 6px;
}

@media (max-width: 720px) {
  .activities-status-chart-head,
  .activities-status-chart-row {
    grid-template-columns: minmax(72px, 88px) repeat(4, minmax(0, 1fr)) 40px;
    gap: 6px;
  }

  .activities-status-chart-bars {
    min-height: 96px;
    gap: 4px;
  }

  .activities-status-chart-bar-wrap {
    height: 96px;
  }

  .activities-status-chart-bar {
    max-width: 100%;
  }

  .activities-status-chart-week {
    font-size: 10px;
  }
}

.activities-status-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}

.activities-status-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 12px 8px;
  border-radius: 10px;
  background: linear-gradient(180deg, #f8fafc 0%, #eef2ff 100%);
  border: 1px solid #e2e8f0;
  text-align: center;
}

.activities-status-stat-value {
  font-size: 28px;
  font-weight: 800;
  line-height: 1.1;
  color: #1e3a8a;
  font-variant-numeric: tabular-nums;
}

.activities-status-stat-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #64748b;
}

.activities-status-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
  align-items: start;
}

.activities-status-block .activities-feed-list {
  max-height: 220px;
  overflow-y: auto;
}

.activities-status-block:empty,
.activities-status-block--hidden {
  display: none;
}

.activities-last-updated {
  margin: 16px 0 0;
  padding: 0;
  font-size: 14px;
  font-weight: 700;
  color: #1b5e20;
  text-align: left;
}

#activitiesMessage {
  margin-top: 8px;
  font-weight: bold;
}

.twilio-popup-status {
  margin-top: 10px;
  font-size: 14px;
  font-weight: 700;
  color: #1b5e20;
  min-height: 18px;
  display: flex;
}

.twilio-popup-status.align-right {
  text-align: right;
  justify-content: flex-end;
}

.twilio-popup-status.align-left {
  text-align: left;
  justify-content: flex-start;
}

.twilio-popup-status.is-error {
  color: #b91c1c;
}

.twilio-popup-status.is-success {
  color: #16a34a;
}

.twilio-call-options {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  grid-column: 1 / -1;
  margin: 6px 0 4px;
  width: 100%;
}

#twilioCallPhoneHeadsetWrap .twilio-call-options {
  margin-top: 8px;
}

.contact-modal-call-options {
  margin: 0 0 10px;
  padding: 0 4px;
}

#twilioConfigForm .twilio-call-options-wrap {
  grid-column: 1 / -1;
}

#twilioConfigForm .twilio-call-options {
  margin: 4px 0 0;
}

.twilio-headset-opt {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #374151;
  margin: 0;
  line-height: 1.35;
  cursor: pointer;
  width: 100%;
  max-width: 100%;
}

.twilio-headset-opt span {
  flex: 1;
  min-width: 0;
}

.twilio-headset-opt input[type="checkbox"] {
  margin: 0;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  cursor: pointer;
}

.contact-modal-headset-opt {
  margin: 0;
  padding: 0;
}

.twilio-call-column {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  margin-top: 8px;
}

.twilio-call-column .panel {
  margin-top: 0;
}

.twilio-dialpad {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin-top: 8px;
}

.twilio-dialpad button {
  margin-top: 0;
  min-height: 34px;
  padding: 6px 0;
  font-size: 14px;
}

.twilio-call-actions {
  display: flex;
  gap: 8px;
  margin-top: 6px;
  position: relative;
  z-index: 2;
}

.twilio-call-actions button {
  width: auto;
  margin-top: 0;
  flex: 1 1 0;
  min-width: 0;
}

.twilio-from-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: #6b7280;
  margin-top: 4px;
}

#twilioSmsPopupForm select[name="twilioFrom"],
#twilioCallPopupForm select[name="twilioFrom"] {
  width: 100%;
  margin-top: 4px;
}

#twilioSmsPopupForm,
#twilioCallPopupForm {
  font-size: 15px;
}

#twilioSmsPopupForm input,
#twilioSmsPopupForm select,
#twilioSmsPopupForm textarea,
#twilioSmsPopupForm button,
#twilioCallPopupForm input,
#twilioCallPopupForm select,
#twilioCallPopupForm textarea,
#twilioCallPopupForm button {
  font-size: 15px;
}

.add-contact-continue-btn {
  background: #1e5fbf;
  color: #ffffff;
  border-color: #1a54a8;
}

.add-contact-continue-btn:hover {
  background: #1a54a8;
}

.add-contact-status {
  margin: 4px 0 2px;
  padding: 10px 12px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.45;
  border-radius: 8px;
  background: #ecfdf5;
  color: #15803d;
  border: 1px solid #a7f3d0;
}

.add-contact-status.is-error {
  background: #fef2f2;
  color: #b91c1c;
  border-color: #fecaca;
}

/* Live Dashboard — contact count snapshot by Status / Outcome / Lead Source */
.home-snapshot-section {
  margin-top: 18px;
}
.home-snapshot-heading {
  margin-bottom: 4px;
}
.home-snapshot-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 12px;
}
@media (max-width: 980px) {
  .home-snapshot-grid {
    grid-template-columns: 1fr;
  }
}
.home-snapshot-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.home-snapshot-group-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.home-snapshot-group-title {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: #0f172a;
}
.home-snapshot-group-total {
  font-size: 13px;
  font-weight: 600;
  color: #64748b;
}
.home-snapshot-bars {
  display: flex;
  flex-direction: column;
}
.home-snapshot-row {
  display: block;
  padding: 5px 6px;
  margin: 0 -6px;
  border-radius: 8px;
  text-decoration: none;
  cursor: pointer;
}
.home-snapshot-row:hover {
  background: #f1f5f9;
}
.home-snapshot-row-head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 5px;
}
.home-snapshot-row-name {
  font-size: 13px;
  color: #1e293b;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.home-snapshot-row-count {
  flex-shrink: 0;
  font-size: 13px;
  font-weight: 600;
  color: #0f172a;
}
.home-snapshot-row-bar {
  display: block;
  height: 6px;
  min-width: 4px;
  border-radius: 999px;
  background: var(--snap-accent, #4f46e5);
}
.home-snapshot-more {
  align-self: flex-start;
  margin-top: 8px;
  padding: 4px 8px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: #4f46e5;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.home-snapshot-more:hover {
  background: #eef2ff;
}
.home-snapshot-extra[hidden] {
  display: none;
}

.is-hidden {
  display: none;
}

#twilioModal .twilio-call-column .twilio-call-actions button[type="submit"],
#twilioCallPopupForm .twilio-call-actions button[type="submit"] {
  background: #16a34a;
  color: #ffffff;
  border-color: #15803d;
}

#contactTwilioCallForm .twilio-call-actions button[type="submit"] {
  background: #16a34a;
  color: #ffffff;
  border-color: #15803d;
}

#callForm .twilio-call-actions button[type="submit"] {
  background: #16a34a;
  color: #ffffff;
  border-color: #15803d;
}

#twilioModal .twilio-call-column .twilio-call-actions button[type="submit"]:hover,
#twilioCallPopupForm .twilio-call-actions button[type="submit"]:hover {
  background: #15803d;
}

#contactTwilioCallForm .twilio-call-actions button[type="submit"]:hover {
  background: #15803d;
}

#callForm .twilio-call-actions button[type="submit"]:hover {
  background: #15803d;
}

#twilioEndCallBtn {
  background: #dc2626;
  color: #ffffff;
  border-color: #b91c1c;
}

#contactTwilioEndCallBtn {
  background: #dc2626;
  color: #ffffff;
  border-color: #b91c1c;
}

#toolsEndCallBtn {
  background: #dc2626;
  color: #ffffff;
  border-color: #b91c1c;
}

#twilioEndCallBtn:hover {
  background: #b91c1c;
}

#contactTwilioEndCallBtn:hover {
  background: #b91c1c;
}

#toolsEndCallBtn:hover {
  background: #b91c1c;
}

.twilio-sms-bulk-banner {
  margin: 0 0 10px;
  font-size: 13px;
  color: #6b7280;
  line-height: 1.4;
}

#twilioSmsPopupForm button[type="submit"] {
  background: #1e5fbf;
  color: #ffffff;
  border-color: #1a54a8;
  min-height: 46px !important;
  padding: 12px 20px !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  width: 100% !important;
}

#twilioSmsPopupForm button[type="submit"]:hover {
  background: #1a54a8;
}

#contactTwilioSmsForm button[type="submit"],
#contactTwilioSmsSubmitBtn {
  background: #16a34a;
  color: #ffffff;
  border-color: #15803d;
  width: 100% !important;
  min-height: 46px !important;
  padding: 12px 20px !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  margin-top: 4px;
}

#contactTwilioSmsForm button[type="submit"]:hover {
  background: #15803d;
}

#contactTwilioSmsForm .contact-field-box {
  grid-column: 1 / -1;
}

#contactTwilioCallForm .contact-field-box {
  grid-column: 1 / -1;
}

#contactTwilioCallForm input[name="contactName"] {
  grid-column: 1;
  grid-row: 2;
}

#contactTwilioCallForm input[name="phone"] {
  grid-column: 1;
  grid-row: 3;
}

#contactTwilioSmsForm .contact-twilio-sms-grid textarea[name="body"] {
  grid-column: 1;
  grid-row: 2 / span 2;
  min-height: 110px;
}

#contactTwilioSmsForm .contact-twilio-sms-grid input[name="contactName"] {
  grid-column: 2;
  grid-row: 2;
}

#contactTwilioSmsForm .contact-twilio-sms-grid input[name="phone"] {
  grid-column: 2;
  grid-row: 3;
}

#contactTwilioSmsForm input[name="contactName"],
#contactTwilioSmsForm input[name="phone"],
#contactTwilioCallForm input[name="contactName"],
#contactTwilioCallForm input[name="phone"] {
  font-size: 16px;
  color: #1e3a8a;
  background: #eaf2ff;
  border-color: #bcd0f5;
}

#contactTwilioSmsFrom,
#contactTwilioCallFrom {
  font-size: 16px;
}

code {
  font-size: 12px;
  background: #f0f2f7;
  padding: 2px 6px;
  border-radius: 4px;
}

.drip-panel h3 {
  margin-top: 20px;
  margin-bottom: 8px;
}

.drip-setup {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 12px 0;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 999px;
  font-size: 14px;
}

.pill.ok {
  background: #e8f5e9;
  color: #1b5e20;
}

.pill.bad {
  background: #ffebee;
  color: #b71c1c;
}

.drip-queue {
  margin-top: 8px;
}

.drip-dashboard {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 14px;
}

.drip-sidebar {
  background: #0b1636;
  border-radius: 16px;
  padding: 14px;
  color: #e8eeff;
  box-shadow: inset 0 0 0 1px #1f3a7b;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 760px;
}

.drip-sidebar h3 {
  margin: 0 0 6px;
  font-size: 17px;
  color: #c9d8ff;
}

.drip-sidebar-link {
  width: 100%;
  text-align: left;
  border: 1px solid #2b4e95;
  background: #12254e;
  color: #dbe7ff;
  border-radius: 10px;
  padding: 10px 12px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
}

.drip-sidebar-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #8fb4ff;
  box-shadow: 0 0 0 3px rgba(143, 180, 255, 0.22);
  flex: 0 0 auto;
}

.drip-sidebar-link.is-active {
  background: linear-gradient(135deg, #4f46e5, #6d28d9);
  border-color: #7c3aed;
  color: #ffffff;
}

.drip-content {
  display: grid;
  gap: 12px;
}

.drip-content-head {
  background: #ffffff;
  border-radius: 16px;
  border: 1px solid #d9e1f4;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.drip-content-head h1 {
  margin: 0;
  font-size: 25px;
  color: #172554;
}

.drip-topbar-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
}

#refreshDripQueueBtn {
  width: auto;
  min-width: 0;
  margin-top: 0;
  padding: 5px 10px;
  font-size: 11px;
  line-height: 1.2;
}

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

.drip-metric-card {
  border-radius: 14px;
  padding: 12px 14px;
  color: #ffffff;
  box-shadow: 0 10px 20px rgba(20, 30, 80, 0.2);
}

.drip-metric-card--sms {
  background: linear-gradient(135deg, #0f172a, #1e293b);
}

.drip-metric-card--sent {
  background: linear-gradient(135deg, #1d4ed8, #2563eb);
}

.drip-metric-card--failed {
  background: linear-gradient(135deg, #6d28d9, #7c3aed);
}

.drip-metric-card--campaigns {
  background: linear-gradient(135deg, #0f766e, #14b8a6);
}

.drip-metric-label {
  display: block;
  font-size: 12px;
  opacity: 0.9;
  margin-bottom: 4px;
}

.drip-metric-card strong {
  font-size: 24px;
  line-height: 1;
}

.drip-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.drip-dashboard .drip-panel {
  border-radius: 14px;
  border: 1px solid #d9e1f4;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
}

.drip-dashboard .drip-panel h3 {
  margin-top: 0;
  color: #1e3a8a;
}

.drip-campaign-blocks {
  display: grid;
  gap: 10px;
}

.drip-campaign-block {
  border: 1px solid #dbe4fb;
  border-radius: 14px;
  background: #f8fbff;
  padding: 12px;
}

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

.drip-campaign-head h4 {
  margin: 0;
  font-size: 15px;
  color: #172554;
}

.drip-campaign-head p {
  margin: 2px 0 0;
  font-size: 12px;
  color: #5b6b97;
}

.drip-campaign-badge {
  background: #e0e7ff;
  border: 1px solid #c7d2fe;
  color: #3730a3;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.drip-campaign-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.drip-campaign-stat {
  border-radius: 10px;
  padding: 9px 10px;
  color: #ffffff;
  min-height: 58px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.drip-campaign-stat span {
  font-size: 11px;
  opacity: 0.92;
}

.drip-campaign-stat strong {
  margin-top: 2px;
  font-size: 18px;
  line-height: 1;
}

.drip-campaign-stat--dark {
  background: linear-gradient(135deg, #0b1025, #1e293b);
}

.drip-campaign-stat--blue {
  background: linear-gradient(135deg, #1d4ed8, #2563eb);
}

.drip-campaign-stat--purple {
  background: linear-gradient(135deg, #6d28d9, #7c3aed);
}

.drip-campaign-stat--teal {
  background: linear-gradient(135deg, #0f766e, #14b8a6);
}

.drip-campaign-footnote {
  margin: 10px 2px 0;
  font-size: 12px;
  color: #475569;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.drip-contact-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid #dbe4fb;
  background: #ffffff;
}

.drip-enrolled-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 2px 7px;
  font-size: 11px;
  font-weight: 700;
  color: #166534;
  background: #dcfce7;
  border: 1px solid #86efac;
}

.contact-enrolled-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 2px 7px;
  font-size: 11px;
  font-weight: 700;
  color: #166534;
  background: #dcfce7;
  border: 1px solid #86efac;
  vertical-align: middle;
}

.contact-enrolled-badge--live,
.drip-enrolled-badge--live {
  color: #166534;
  background: #dcfce7;
  border-color: #86efac;
}

.contact-enrolled-badge--completed,
.drip-enrolled-badge--completed {
  color: #991b1b;
  background: #fee2e2;
  border-color: #fecaca;
}

.contact-summary-enrolled-wrap {
  margin-top: 4px;
}

@media (max-width: 1080px) {
  .drip-dashboard {
    grid-template-columns: 1fr;
  }

  .drip-sidebar {
    min-height: 0;
  }

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

  .drip-form-grid {
    grid-template-columns: 1fr;
  }

  .drip-campaign-stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.pipeline-page {
  padding: 14px;
}

.pipeline-intro {
  margin: 0 0 12px;
  padding: 9px 12px;
  border: 1px solid #dbeafe;
  border-radius: 10px;
  background: #eff6ff;
  color: #1e3a8a;
}

.pipeline-toolbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.pipeline-toolbar-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.pipeline-refresh-btn {
  min-width: 32px;
  width: 32px;
  height: 32px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  line-height: 1;
}

.pipeline-window-label {
  font-size: 0.85rem;
  color: #475569;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.pipeline-window-label select {
  padding: 4px 8px;
  border-radius: 6px;
  border: 1px solid #cbd5e1;
  font: inherit;
}

.pipeline-summary {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
  padding: 10px 12px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
}

.pipeline-summary-stat {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}

.pipeline-summary-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: #475569;
}

.pipeline-summary-stat strong {
  font-size: 1.35rem;
  color: #0f766e;
}

.pipeline-summary-note {
  font-size: 0.8rem;
  margin: 0;
}

.pipeline-kpi-row {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}

.pipeline-kpi-link {
  color: #fff;
  text-decoration: none;
  width: auto;
  margin-top: 0;
  box-shadow: none;
  border-radius: 10px;
  transition: filter 0.15s ease, transform 0.12s ease;
}

.pipeline-kpi-link:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
  color: #fff;
  text-decoration: none;
}

.pipeline-kpi-label {
  font-size: 11px;
  opacity: 0.95;
  line-height: 1.3;
}

.pipeline-kpi-value-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.pipeline-kpi-value-row strong {
  font-size: 20px;
  line-height: 1;
}

.pipeline-kpi-link .pipeline-trend {
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
}

.pipeline-kpi-link .pipeline-trend--up,
.pipeline-kpi-link .pipeline-trend--down,
.pipeline-kpi-link .pipeline-trend--flat {
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
}

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

.pipeline-column {
  background: #f8fbff;
  border: 1px solid #dbe4f6;
  border-radius: 10px;
  min-height: 280px;
  padding: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.pipeline-column.is-drag-over {
  background: #eef2ff;
  border-color: #818cf8;
  box-shadow: inset 0 0 0 2px rgba(99, 102, 241, 0.18);
}

.pipeline-column > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  font-weight: 700;
  color: #1e3a8a;
  margin-bottom: 8px;
  gap: 6px;
  line-height: 1.3;
}

.pipeline-column > header span:last-child {
  background: #dbeafe;
  color: #1e3a8a;
  border-radius: 999px;
  min-width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  flex-shrink: 0;
}

.pipeline-column-cards {
  padding: 8px;
  flex: 1;
  min-height: 0;
}

.pipeline-column-cards--scroll {
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.pipeline-column-cards--scroll::-webkit-scrollbar {
  width: 8px;
}

.pipeline-column-cards--scroll::-webkit-scrollbar-thumb {
  background: #94a3b8;
  border-radius: 999px;
}

.pipeline-column-cards--scroll::-webkit-scrollbar-track {
  background: transparent;
}

.pipeline-column-empty {
  margin: 8px 4px;
  font-size: 0.82rem;
}

.pipeline-kpi {
  color: #fff;
  border-radius: 10px;
  padding: 9px 10px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.pipeline-kpi span {
  font-size: 11px;
  opacity: 0.92;
}

.pipeline-kpi strong {
  font-size: 20px;
  line-height: 1;
}

.pipeline-kpi--blue { background: linear-gradient(135deg, #2563eb, #1d4ed8); }
.pipeline-kpi--indigo { background: linear-gradient(135deg, #4f46e5, #4338ca); }
.pipeline-kpi--amber { background: linear-gradient(135deg, #f59e0b, #d97706); }
.pipeline-kpi--orange { background: linear-gradient(135deg, #f97316, #ea580c); }
.pipeline-kpi--teal { background: linear-gradient(135deg, #0d9488, #0f766e); }
.pipeline-kpi--red { background: linear-gradient(135deg, #ef4444, #dc2626); }

.pipeline-next-actions {
  margin: 0 0 14px;
  padding: 14px 16px;
  border: 1px solid #c7d2fe;
  border-radius: 14px;
  background: linear-gradient(135deg, #eef2ff 0%, #ffffff 58%, #ecfeff 100%);
  box-shadow: 0 12px 28px rgba(79, 70, 229, 0.1);
}

.pipeline-next-actions-summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0;
  font-size: 1.05rem;
  font-weight: 800;
  color: #312e81;
}

.pipeline-next-actions-summary::-webkit-details-marker {
  display: none;
}

.pipeline-next-actions-summary::after {
  content: "v";
  font-size: 1.35rem;
  line-height: 1;
  color: #4f46e5;
  transition: transform 0.15s ease;
}

.pipeline-next-actions:not([open]) .pipeline-next-actions-summary::after {
  transform: rotate(-90deg);
}

.pipeline-next-actions-list {
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
  color: #334155;
  font-size: 0.9rem;
  display: grid;
  gap: 8px;
}

.pipeline-next-actions-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: #1d4ed8;
  text-decoration: none;
  padding: 8px 10px;
  border: 1px solid #dbeafe;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.76);
  font-weight: 700;
}

.pipeline-next-actions-list a:hover {
  text-decoration: none;
  background: #ffffff;
  border-color: #93c5fd;
}

.page-pipeline .pipeline-ai-bar {
  margin: 0 0 14px;
  padding: 14px 16px;
  border: 1px solid #ddd6fe;
  border-radius: 14px;
  background: linear-gradient(135deg, #f5f3ff 0%, #ffffff 58%, #faf8ff 100%);
  box-shadow: 0 10px 24px rgba(99, 102, 241, 0.08);
}

.page-pipeline .pipeline-ai-bar-inner {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.page-pipeline .pipeline-ai-bar-content {
  flex: 1;
  min-width: 0;
  position: relative;
  z-index: 1;
}

.page-pipeline .pipeline-ai-bar-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}

.page-pipeline .pipeline-ai-bar-title {
  font-size: 1.05rem;
  font-weight: 800;
  color: #312e81;
}

.page-pipeline .pipeline-ai-bar-lead {
  margin: 8px 0 0;
}

.page-pipeline .pipeline-ai-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  border: 1px solid #c7d2fe;
  background: #eef2ff;
  color: #4338ca;
}

.page-pipeline .pipeline-ai-status-badge[data-state="ready"] {
  border-color: #86efac;
  background: #ecfdf5;
  color: #15803d;
}

.page-pipeline .pipeline-ai-status-badge[data-state="unconfigured"],
.page-pipeline .pipeline-ai-status-badge[data-state="error"] {
  border-color: #fecaca;
  background: #fef2f2;
  color: #b91c1c;
}

.page-pipeline .pipeline-ai-summarize-btn {
  width: auto;
  margin: 0;
  padding: 8px 14px;
  font-size: 14px;
  font-weight: 700;
  color: #ffffff;
  background: linear-gradient(135deg, #6366f1, #4f46e5);
  border: 1px solid #4f46e5;
  border-radius: 10px;
  cursor: pointer;
}

.page-pipeline .pipeline-ai-summarize-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #4f46e5, #4338ca);
}

.page-pipeline .pipeline-ai-summarize-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.page-pipeline .pipeline-ai-assistant-link {
  margin-left: auto;
  font-size: 0.88rem;
  font-weight: 600;
  color: #4f46e5;
  text-decoration: none;
}

.page-pipeline .pipeline-ai-assistant-link:hover {
  text-decoration: underline;
}

.page-pipeline .pipeline-ai-robot {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 130px;
  padding-top: 4px;
  pointer-events: none;
  z-index: 0;
}

.page-pipeline .pipeline-ai-robot lottie-player {
  pointer-events: none;
}

.page-pipeline .pipeline-ai-robot-tip {
  margin: 0;
  text-align: center;
  font-size: 0.76rem;
  line-height: 1.4;
  color: #6366f1;
  font-style: italic;
  font-weight: 500;
}

.page-pipeline .pipeline-ai-summary-details {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #e9d5ff;
}

.page-pipeline .pipeline-ai-summary-summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 8px;
  font-size: 0.95rem;
  font-weight: 700;
  color: #4338ca;
}

.page-pipeline .pipeline-ai-summary-summary::-webkit-details-marker {
  display: none;
}

.page-pipeline .pipeline-ai-summary-summary::after {
  content: "v";
  font-size: 1.2rem;
  line-height: 1;
  color: #6366f1;
  transition: transform 0.15s ease;
}

.page-pipeline .pipeline-ai-summary-details:not([open]) .pipeline-ai-summary-summary::after {
  transform: rotate(-90deg);
}

.page-pipeline .pipeline-ai-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  margin: 0 0 12px;
  font-size: 0.92rem;
  color: #334155;
}

.page-pipeline .pipeline-ai-summary-body p,
.page-pipeline .pipeline-ai-summary-body .pipeline-ai-summary-bullet,
.page-pipeline .pipeline-ai-summary-body .pipeline-ai-summary-numbered {
  margin: 0 0 8px;
  line-height: 1.45;
  color: #334155;
}

.page-pipeline .pipeline-ai-summary-h4 {
  margin: 14px 0 8px;
  font-size: 1rem;
  font-weight: 700;
  color: #1e40af;
}

.page-pipeline .pipeline-ai-summary-h4:first-child {
  margin-top: 0;
}

.page-pipeline .pipeline-ai-summary-note {
  margin: 10px 0 0;
}

.page-pipeline .pipeline-ai-error {
  margin: 0;
  color: #b91c1c;
  font-weight: 600;
}

@media (max-width: 720px) {
  .page-pipeline .pipeline-ai-bar-inner {
    flex-direction: column;
  }

  .page-pipeline .pipeline-ai-robot {
    flex-direction: row;
    width: 100%;
    justify-content: flex-start;
    padding-top: 0;
  }

  .page-pipeline .pipeline-ai-robot-tip {
    text-align: left;
    max-width: 14rem;
  }
}

.pipeline-card {
  background: #ffffff;
  border: 1px solid #dbe4f6;
  border-radius: 8px;
  padding: 8px;
  margin-bottom: 8px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.12s ease;
}

.pipeline-card--clickable {
  cursor: pointer;
}

.pipeline-card--clickable:hover {
  border-color: #93c5fd;
  box-shadow: 0 2px 8px rgba(30, 95, 191, 0.14);
  transform: translateY(-1px);
}

.pipeline-card.is-dragging {
  opacity: 0.55;
  cursor: grabbing;
}

.pipeline-card-name {
  color: inherit;
  text-decoration: none;
}

.pipeline-card-name:hover {
  color: #1d4ed8;
  text-decoration: underline;
}

.pipeline-card h4 {
  margin: 0 0 4px;
  font-size: 13px;
  color: #1f2937;
}

.pipeline-card p {
  margin: 0 0 4px;
  font-size: 11px;
  color: #475569;
}

.pipeline-card-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 6px;
}

.pipeline-follow-up-badge {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 10px;
  font-weight: 800;
  line-height: 1.2;
}

.pipeline-follow-up-badge--overdue {
  background: #fef2f2;
  border-color: #fecaca;
  color: #b91c1c;
}

.pipeline-follow-up-badge--today {
  background: #fffbeb;
  border-color: #fde68a;
  color: #92400e;
}

.pipeline-follow-up-badge--future {
  background: #f1f5f9;
  border-color: #cbd5e1;
  color: #475569;
}

.pipeline-follow-up-badge--none {
  background: #f8fafc;
  border-color: #e2e8f0;
  color: #94a3b8;
}

.pipeline-follow-up-badge-link {
  display: inline-flex;
  text-decoration: none;
  color: inherit;
  border-radius: 999px;
}

.pipeline-follow-up-badge-link:hover .pipeline-follow-up-badge--overdue,
.pipeline-follow-up-badge-link:focus-visible .pipeline-follow-up-badge--overdue {
  background: #fee2e2;
  border-color: #fca5a5;
}

.pipeline-follow-up-badge-link:hover .pipeline-follow-up-badge--today,
.pipeline-follow-up-badge-link:focus-visible .pipeline-follow-up-badge--today {
  background: #fef3c7;
  border-color: #fcd34d;
}

.pipeline-follow-up-badge-link:hover .pipeline-follow-up-badge--future,
.pipeline-follow-up-badge-link:focus-visible .pipeline-follow-up-badge--future {
  background: #e2e8f0;
  border-color: #94a3b8;
}

.pipeline-card-more-link {
  display: block;
  margin: 2px 2px 0;
  padding: 8px;
  border: 1px dashed #cbd5e1;
  border-radius: 8px;
  color: #1d4ed8;
  font-size: 12px;
  font-weight: 800;
  text-align: center;
  text-decoration: none;
  background: #f8fafc;
}

.pipeline-card-more-link:hover {
  border-color: #93c5fd;
  background: #eff6ff;
  text-decoration: none;
}

.pipeline-card small {
  color: #64748b;
  font-size: 10px;
}

@media (max-width: 1200px) {
  .pipeline-kpi-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .pipeline-board {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .pipeline-kpi-row,
  .pipeline-board {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.campaign-grid {
  grid-template-columns: 1.2fr 1fr 1fr;
}

.campaign-top-input-grid {
  max-width: 960px;
  width: 100%;
  padding: 14px;
  border: 2px solid #bfdbfe;
  border-radius: 10px;
  background: #f8fbff;
  display: grid;
  gap: 12px;
  box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.08);
}

.campaign-name-only {
  grid-template-columns: 1fr;
  max-width: 320px;
  width: 100%;
}

.campaign-name-row {
  grid-template-columns: 1fr;
  align-items: start;
  gap: 12px;
  max-width: 920px;
  width: 100%;
}

.campaign-category-controls {
  display: flex;
  gap: 8px;
  align-items: center;
}

.campaign-category-controls select {
  min-width: 180px;
  color: #0f172a;
  background: #ffffff;
}

#campaignCategorySelect option {
  color: #0f172a;
  background: #ffffff;
}

.campaign-twilio-from-box select {
  width: 100%;
}

.campaign-email-from-row {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
  gap: 12px;
  max-width: 920px;
  width: 100%;
  margin-top: 4px;
}

.campaign-email-from-row select {
  width: 100%;
}

.campaign-signature-toggle {
  margin: 0 0 12px;
  padding: 10px 12px;
  border: 1px solid #dbe2ef;
  border-radius: 8px;
  background: #f8fafc;
}

.campaign-signature-toggle .document-attach {
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 700;
  color: #0f172a;
}

.campaign-signature-toggle input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin: 0;
}

#campaignForm select {
  font-size: 15px;
}

#campaignForm .contact-modal-field-label[for="campaignCategorySelect"],
#campaignForm .contact-modal-field-label[for="campaignTwilioFrom"] {
  font-size: 16px;
  font-weight: 700;
}

.campaign-name-only input[name="name"] {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.campaign-name-row input[name="name"] {
  font-size: 17px;
}

.campaign-step-offset-group {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  align-self: start;
}

.campaign-step-offset-group label {
  font-size: 11px;
  color: #64748b;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.campaign-step-offset-group label span {
  font-weight: 600;
}

.campaign-step-offset-group input {
  width: 100%;
  margin: 0;
}

#campaignForm .campaign-drip-start-immediate {
  margin: 0 0 12px;
  padding: 12px 14px;
  border: 1px solid #dbe2ef;
  border-radius: 8px;
  background: #f8fafc;
}

#campaignForm .campaign-drip-start-immediate .document-attach {
  align-items: center;
  gap: 12px;
  font-size: 18px;
  line-height: 1.35;
  font-weight: 700;
  color: #0f172a;
}

#campaignForm .campaign-drip-start-immediate .document-attach input[type="checkbox"] {
  width: 24px;
  height: 24px;
  min-width: 24px;
  min-height: 24px;
  margin: 0;
  cursor: pointer;
  flex-shrink: 0;
}

#campaignForm .campaign-drip-start-immediate__hint {
  margin: 8px 0 0;
  padding-left: 36px;
  font-size: 15px;
  line-height: 1.45;
  color: #475569;
}

.campaign-card-sched {
  display: inline-flex;
  align-items: center;
  width: auto;
  max-width: fit-content;
  font-size: 10px;
  line-height: 1.1;
  color: #475569;
  margin-bottom: 4px;
  padding: 2px 6px;
  border: 1px solid #cbd5e1;
  border-radius: 999px;
  background: #f8fafc;
}

.campaign-tag-rules-section {
  margin-top: 12px;
}

.campaign-tag-rules-header {
  align-items: flex-start;
}

.campaign-tag-rule-row {
  margin-top: 8px;
  border: 1px solid #dbe2ef;
  border-radius: 6px;
  padding: 10px;
  display: grid;
  gap: 8px;
  grid-template-columns: 1fr minmax(280px, 1.35fr);
  align-items: center;
}

.campaign-tag-rule-row .tag-rule-name {
  width: 100%;
  max-width: 360px;
  font-size: 17px;
}

.campaign-tag-rule-row .tag-rule-function {
  font-size: 16px;
}

.campaign-tag-name-label {
  font-size: 16px;
}

.campaign-tag-name-value {
  font-size: 18px;
}

.campaign-step-row .step-remove {
  box-sizing: border-box;
  width: 62px;
  height: 22px;
  min-width: 62px;
  max-width: 62px;
  min-height: 22px;
  max-height: 22px;
  margin-top: 0;
  padding: 0 4px;
  font-size: 10px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
}

.campaign-card-tags {
  margin: 6px 0 4px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.campaign-tag-chip {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 999px;
  background: #e8eef7;
  color: #1a365d;
}

.campaign-steps-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 8px;
}

.campaign-steps-header button {
  width: auto;
  margin-top: 0;
}

.campaign-add-step-after {
  margin-top: 8px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.campaign-step-row {
  margin-top: 12px;
  border: 1px solid #dbe2ef;
  border-radius: 12px;
  padding: 12px;
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(220px, 1.65fr) minmax(120px, 1fr) minmax(120px, 1fr) 62px;
  align-items: start;
}

.campaign-step-control-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-end;
  min-width: 0;
}

.campaign-step-offset-group {
  flex: 1 1 200px;
  min-width: 168px;
}

.campaign-step-channel-col {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  flex: 1 1 220px;
}

.campaign-step-channel-col .step-channel-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: #64748b;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 0;
}

.step-twilio-from-wrap .step-twilio-from-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: #64748b;
  letter-spacing: 0.03em;
  margin: 0 0 4px;
}

.campaign-step-row .step-twilio-from {
  width: 100%;
  min-width: 0;
  font-size: 13px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid #cbd5e1;
  background: #ffffff;
  box-sizing: border-box;
}

.campaign-step-number {
  grid-column: 1 / -1;
  padding: 8px 12px;
  border-radius: 8px;
  background: #e0ecff;
  color: #1e3a8a;
  font-size: 18px;
  font-weight: 800;
}

.campaign-step-row .step-channel {
  background: #1e5fbf;
  color: #ffffff;
  border: 1px solid #1a54a8;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  min-height: 38px;
  padding: 8px 10px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  border-radius: 8px;
}

.campaign-step-row .step-channel:focus {
  outline: 2px solid #93c5fd;
  outline-offset: 2px;
}

/* SMS steps: calmer card, violet accents, readable compose area */
.campaign-step-row--sms {
  border-color: #c4b5fd;
  background: linear-gradient(165deg, #fafbff 0%, #f5f3ff 38%, #fafafa 100%);
  box-shadow: 0 2px 12px rgba(99, 102, 241, 0.08);
  padding: 14px 16px;
}

.campaign-step-row--sms .campaign-step-number {
  background: linear-gradient(135deg, #4f46e5 0%, #6366f1 50%, #7c3aed 100%);
  color: #ffffff;
  border: none;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 10px;
}

.campaign-step-row--sms .campaign-step-control-strip {
  padding: 14px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid #e9e5ff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

.campaign-step-row--sms .campaign-step-channel-col--sms .step-twilio-from-wrap {
  margin-top: 4px;
  padding-top: 12px;
  border-top: 1px dashed #d4d4f8;
}

.campaign-step-row--sms .step-channel {
  background: #ffffff;
  color: #312e81;
  border: 2px solid #6366f1;
  box-shadow: 0 1px 2px rgba(79, 70, 229, 0.08);
}

.campaign-step-row--sms .step-channel:focus {
  outline: 2px solid #a5b4fc;
  outline-offset: 2px;
}

.campaign-step-row--sms .step-plain-compose .step-body-plain-label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: #4338ca;
  margin-bottom: 8px;
  letter-spacing: 0.02em;
}

.campaign-step-row--sms .step-plain-compose .step-body-plain {
  border-radius: 14px;
  border: 1px solid #c7d2fe;
  background: #ffffff;
  box-shadow: inset 0 1px 3px rgba(15, 23, 42, 0.05);
  font-size: 15px;
  line-height: 1.5;
  padding: 14px 16px;
  min-height: 128px;
}

.campaign-step-row--sms .step-plain-compose .step-body-plain:focus {
  outline: none;
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.22), inset 0 1px 3px rgba(15, 23, 42, 0.05);
}

.campaign-step-row--email {
  border-color: #38bdf8;
  background: linear-gradient(165deg, #f0f9ff 0%, #e0f2fe 38%, #fafafa 100%);
  box-shadow: 0 2px 12px rgba(14, 165, 233, 0.09);
  padding: 14px 16px;
}

.campaign-step-row--email .campaign-step-number {
  background: linear-gradient(135deg, #0284c7 0%, #0ea5e9 50%, #38bdf8 100%);
  color: #ffffff;
  border: none;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 10px;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.12);
}

.campaign-step-row--email .campaign-step-control-strip {
  padding: 14px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid #bae6fd;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

.campaign-step-row--email .campaign-step-channel-col--email .step-email-from-wrap {
  margin-top: 8px;
  padding-top: 12px;
  border-top: 1px dashed #7dd3fc;
}

.step-email-from-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: #0369a1;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  margin: 0 0 4px;
}

.campaign-step-row .step-email-from {
  width: 100%;
  min-width: 0;
  font-size: 13px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid #bae6fd;
  background: #ffffff;
  box-sizing: border-box;
  color: #0c4a6e;
}

.step-email-from-hint-text {
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
  color: #0c4a6e;
}

.step-email-from-hint-text a {
  color: #0369a1;
  text-decoration: underline;
}

.campaign-step-row--email .step-channel {
  background: #ffffff;
  color: #0c4a6e;
  border: 2px solid #0ea5e9;
  box-shadow: 0 1px 2px rgba(14, 165, 233, 0.12);
}

.campaign-step-row--email .step-channel:focus {
  outline: 2px solid #7dd3fc;
  outline-offset: 2px;
}

.step-email-meta {
  grid-column: 1 / -2;
  display: grid;
  grid-template-columns: minmax(200px, 1.5fr) minmax(160px, 1fr);
  gap: 14px;
  align-items: end;
}

.step-email-meta[hidden],
.step-email-compose[hidden] {
  display: none;
}

@media (max-width: 720px) {
  .step-email-meta {
    grid-template-columns: 1fr;
  }
}

.step-email-field-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: #0369a1;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  margin: 0 0 6px;
}

.step-email-subject-field .step-subject,
.step-email-template-field .step-email-template {
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 11px 14px;
  font-size: 15px;
  border-radius: 10px;
  border: 1px solid #bae6fd;
  background: #ffffff;
  color: #0f172a;
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.04);
}

.step-email-subject-field .step-subject:focus,
.step-email-template-field .step-email-template:focus {
  outline: none;
  border-color: #0ea5e9;
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.22), inset 0 1px 2px rgba(15, 23, 42, 0.04);
}

.step-email-template-field .step-email-template {
  font-size: 14px;
  cursor: pointer;
}

.step-email-compose {
  grid-column: 1 / -2;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.step-email-compose-label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: #0369a1;
  letter-spacing: 0.02em;
}

.step-email-compose-hint {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: #0c4a6e;
}

.step-email-compose-hint code {
  font-size: 12px;
  padding: 1px 6px;
  border-radius: 4px;
  background: #e0f2fe;
  color: #075985;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.campaign-step-row--email .step-email-editor-wrap {
  border-radius: 14px;
  border: 1px solid #bae6fd;
  background: #ffffff;
  overflow: hidden;
  box-shadow: inset 0 1px 3px rgba(15, 23, 42, 0.04);
}

.campaign-step-row--email .step-email-toolbar {
  margin: 0;
  border: none;
  border-bottom: 1px solid #e0f2fe;
  border-radius: 0;
  background: linear-gradient(180deg, #f8fafc 0%, #f0f9ff 100%);
  padding: 8px 10px;
}

.campaign-step-row--email .step-body-rich {
  min-height: 180px;
  padding: 14px 16px;
  font-size: 15px;
  line-height: 1.55;
  border: none;
  border-radius: 0;
}

.campaign-step-row--email .step-body-rich:focus {
  outline: none;
}

.campaign-step-row--call {
  border-color: #f59e0b;
  background: linear-gradient(165deg, #fffbeb 0%, #fff7ed 40%, #fafaf9 100%);
  box-shadow: 0 2px 12px rgba(245, 158, 11, 0.1);
  padding: 14px 16px;
}

.campaign-step-row--call .campaign-step-number {
  background: linear-gradient(135deg, #d97706 0%, #f59e0b 50%, #fbbf24 100%);
  color: #ffffff;
  border: none;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 10px;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.12);
}

.campaign-step-row--call .campaign-step-control-strip {
  padding: 14px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid #fde68a;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

.campaign-step-row--call .campaign-step-channel-col--call .step-twilio-from-wrap {
  margin-top: 8px;
  padding-top: 12px;
  border-top: 1px dashed #fcd34d;
}

.campaign-step-row--call .step-twilio-from-label {
  color: #92400e;
}

.campaign-step-row--call .step-twilio-from {
  border-color: #fcd34d;
  color: #78350f;
}

.campaign-step-row--call .step-channel {
  background: #ffffff;
  color: #78350f;
  border: 2px solid #f59e0b;
  box-shadow: 0 1px 2px rgba(217, 119, 6, 0.12);
}

.campaign-step-row--call .step-channel:focus {
  outline: 2px solid #fcd34d;
  outline-offset: 2px;
}

.step-call-compose {
  grid-column: 1 / -2;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
  border-radius: 14px;
  border: 1px solid #fde68a;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: inset 0 1px 2px rgba(255, 251, 235, 0.9);
}

.step-call-compose-label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: #b45309;
  letter-spacing: 0.02em;
}

.step-call-compose-hint {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: #92400e;
}

.campaign-step-row--call .step-twiml {
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 14px 16px;
  font-size: 15px;
  line-height: 1.4;
  border-radius: 12px;
  border: 1px solid #fcd34d;
  background: #ffffff;
  color: #0f172a;
  box-shadow: inset 0 1px 3px rgba(15, 23, 42, 0.05);
}

.campaign-step-row--call .step-twiml::placeholder {
  color: #94a3b8;
}

.campaign-step-row--call .step-twiml:focus {
  outline: none;
  border-color: #f59e0b;
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.28), inset 0 1px 3px rgba(15, 23, 42, 0.05);
}

.campaign-step-row .step-body-stack {
  grid-column: 1 / -2;
  min-height: 72px;
}

.step-plain-compose {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.campaign-step-row .step-body-plain {
  width: 100%;
  margin-top: 0;
  min-height: 88px;
  resize: vertical;
}

.campaign-step-row .step-email-editor-wrap {
  margin-top: 0;
}

.campaign-step-row .step-email-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  padding: 6px 8px;
  border: 1px solid #dbe2ef;
  border-radius: 6px;
  background: #f8fafc;
}

.campaign-step-row .step-email-toolbar button {
  width: auto;
  margin-top: 0;
  padding: 4px 10px;
  min-width: 0;
  font-size: 12px;
}

.campaign-step-row .step-email-img-btn {
  background: #1e5fbf;
  color: #ffffff;
  border-color: #1a54a8;
}

.campaign-step-row .step-email-img-btn:hover {
  background: #1a54a8;
}

.campaign-step-row .step-email-toolbar .step-email-fontsize {
  width: auto;
  margin-top: 0;
  min-width: 88px;
  padding: 4px 6px;
  font-size: 12px;
}

.campaign-step-row .step-email-color-label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: #475569;
}

.campaign-step-row .step-email-color {
  width: 32px;
  height: 28px;
  padding: 2px;
  margin: 0;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  cursor: pointer;
}

.campaign-step-row .step-body-rich {
  min-height: 120px;
  max-height: 320px;
  overflow: auto;
  padding: 10px 12px;
  border: 1px solid #dbe2ef;
  border-radius: 6px;
  background: #ffffff;
  font-size: 14px;
  line-height: 1.5;
  color: #111827;
}

.campaign-step-row .step-body-rich:focus {
  outline: 2px solid #1e5fbf;
  outline-offset: 1px;
}

.campaign-step-row .step-body-rich img {
  max-width: 320px;
  width: auto;
  height: auto;
  display: block;
  margin-bottom: 10px;
  vertical-align: middle;
}

/* Injected email signature: cap graphics even when HTML has width/height attrs or inline width (fixed in campaigns.js too). */
.campaign-step-row .step-body-rich .campaign-email-signature-block img {
  max-width: 220px !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain;
  box-sizing: border-box;
}

/* Table layout from pasted signatures (Outlook/Gmail) otherwise stays full viewport width. */
.campaign-step-row .step-body-rich .campaign-email-signature-block table {
  max-width: 100% !important;
  width: auto !important;
  table-layout: auto !important;
}

.campaign-step-row .step-body-rich .campaign-email-signature-block td,
.campaign-step-row .step-body-rich .campaign-email-signature-block th {
  max-width: 100% !important;
}

.campaign-step-row .step-email-image-wrap {
  display: inline-block;
  resize: both;
  overflow: auto;
  max-width: 100%;
  min-width: 48px;
  min-height: 28px;
  margin-top: 6px;
  border: 1px dashed #cbd5e1;
  background: #ffffff;
}

.campaign-step-row .step-email-image-wrap img {
  width: 100%;
  height: auto;
  max-width: none;
  margin: 0;
}

/* Legacy campaign email bodies may wrap signature photos in resizable wrappers.
   Keep those signature images from stretching full-width in the editor. */
.campaign-step-row .step-email-image-wrap img[alt="Signature image"] {
  width: auto !important;
  max-width: 220px !important;
}

.campaign-step-row .step-email-image-wrap:has(img[alt="Signature image"]) {
  max-width: 220px;
  box-sizing: border-box;
}

.journey-email-html-preview {
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 10px 12px;
  background: #ffffff;
  font-size: 14px;
  line-height: 1.5;
  max-height: 280px;
  overflow: auto;
  /* Do not inherit muted dl/dt slate (#334155) — default email text should read as near-black. */
  color: #0f172a;
}

.journey-email-html-preview a {
  color: #1d4ed8;
}

.journey-email-html-preview img {
  max-width: 100%;
  height: auto;
}

.journey-email-html-preview .campaign-email-signature-block img {
  max-width: 220px !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain;
}

.journey-email-html-preview .campaign-email-signature-block table {
  max-width: 100% !important;
  width: auto !important;
  table-layout: auto !important;
}

.journey-email-html-preview .campaign-email-signature-block td,
.journey-email-html-preview .campaign-email-signature-block th {
  max-width: 100% !important;
}

/* Also handle older saved HTML that lacks .campaign-email-signature-block wrapper. */
.journey-email-html-preview img[alt="Signature image"] {
  max-width: 220px;
  width: auto;
}

.page-campaigns .topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  padding: 12px 0;
  background: rgba(248, 250, 252, 0.94);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(203, 213, 225, 0.75);
}

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

.campaign-topbar-actions button {
  width: auto;
  margin-top: 0;
}

#campaignStickySaveBtn,
.campaign-summary-save-btn {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  border-color: #1d4ed8;
  color: #ffffff;
  box-shadow: 0 8px 18px rgba(37, 99, 235, 0.18);
}

.campaign-builder-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 320px);
  gap: 18px;
  align-items: start;
}

.campaign-form-main {
  min-width: 0;
}

.campaign-section-title {
  margin: 4px 0 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid #dbe2ef;
}

.campaign-section-title span,
.campaign-steps-header strong {
  display: block;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #1e3a8a;
}

.campaign-section-title p,
.campaign-steps-header p {
  margin: 4px 0 0;
  font-size: 0.9rem;
  line-height: 1.45;
  color: #64748b;
}

.campaign-summary-panel {
  position: sticky;
  top: 86px;
}

.campaign-summary-card {
  border: 1px solid #c7d2fe;
  border-radius: 16px;
  padding: 16px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  box-shadow: 0 14px 32px rgba(15, 23, 42, 0.08);
}

.campaign-summary-eyebrow {
  margin: 0 0 6px;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #4f46e5;
}

.campaign-summary-card h4 {
  margin: 0 0 14px;
  font-size: 1.05rem;
  color: #0f172a;
}

.campaign-summary-card dl {
  display: grid;
  gap: 10px;
  margin: 0 0 14px;
}

.campaign-summary-card dl div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 10px;
  border-radius: 10px;
  background: #f1f5f9;
}

.campaign-summary-card dt {
  font-size: 0.78rem;
  font-weight: 700;
  color: #64748b;
}

.campaign-summary-card dd {
  margin: 0;
  text-align: right;
  font-size: 0.85rem;
  font-weight: 800;
  color: #0f172a;
}

.campaign-summary-save-btn {
  width: 100%;
  margin-top: 4px;
}

#analyzeCampaignBtn {
  width: 206px;
  max-width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 9px 14px;
  margin-top: 0;
  font-size: 0.88rem;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 0.2px;
  white-space: normal;
  color: #4f46e5;
  border-color: #a5b4fc;
  background: #ffffff;
  box-shadow: none;
}

#analyzeCampaignBtn:hover:not(:disabled) {
  color: #4338ca;
  border-color: #818cf8;
  background: #eef2ff;
}

.campaign-ai-head {
  align-items: center;
}

.campaign-top-input-grid,
#campaignForm .campaign-drip-start-immediate,
.campaign-signature-toggle,
.campaign-tag-rule-row {
  border-color: #dbe2ef;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.campaign-tag-rules-section {
  margin: 16px 0 18px;
  padding: 14px;
  border: 1px solid #dbe2ef;
  border-radius: 14px;
  background: #f8fafc;
}

.campaign-tag-rules-section .campaign-steps-header {
  margin: 0 0 10px;
  padding-top: 0;
  border-top: 0;
}

.campaign-steps-header {
  margin: 18px 0 10px;
  padding-top: 16px;
  border-top: 1px solid #dbe2ef;
}

.campaign-step-row {
  position: relative;
  grid-template-columns: minmax(220px, 1.65fr) minmax(120px, 1fr) minmax(120px, 1fr) auto;
  border: 1px solid #dbe2ef;
  border-left: 5px solid #64748b;
  background: #ffffff;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06);
  padding: 14px 16px;
}

.campaign-step-row--sms {
  border-color: #dbe2ef;
  border-left-color: #7c3aed;
  background: #ffffff;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06);
}

.campaign-step-row--email {
  border-color: #dbe2ef;
  border-left-color: #0284c7;
  background: #ffffff;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06);
}

.campaign-step-row--call {
  border-color: #dbe2ef;
  border-left-color: #f59e0b;
  background: #ffffff;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06);
}

.campaign-step-row .campaign-step-number,
.campaign-step-row--sms .campaign-step-number,
.campaign-step-row--email .campaign-step-number,
.campaign-step-row--call .campaign-step-number {
  display: flex;
  align-items: center;
  gap: 10px;
  grid-column: 1 / -1;
  padding: 0 0 10px;
  border-bottom: 1px solid #e2e8f0;
  border-radius: 0;
  background: transparent;
  color: #0f172a;
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: none;
  text-shadow: none;
}

.campaign-step-grip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: #f1f5f9;
  color: #64748b;
  font-weight: 900;
  cursor: grab;
}

.campaign-step-index {
  flex: 1 1 auto;
}

.campaign-step-reorder {
  display: inline-flex;
  gap: 6px;
}

.campaign-step-reorder button {
  width: auto;
  min-width: 0;
  margin-top: 0;
  padding: 4px 8px;
  font-size: 0.72rem;
  border: 1px solid #cbd5e1;
  background: #ffffff;
  color: #475569;
}

.campaign-step-reorder button:disabled {
  opacity: 0.42;
  cursor: not-allowed;
}

.campaign-step-row--sms .campaign-step-control-strip,
.campaign-step-row--email .campaign-step-control-strip,
.campaign-step-row--call .campaign-step-control-strip {
  padding: 12px;
  border-radius: 12px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  box-shadow: none;
}

.campaign-step-row .step-channel,
.campaign-step-row--sms .step-channel,
.campaign-step-row--email .step-channel,
.campaign-step-row--call .step-channel {
  background: #ffffff;
  color: #0f172a;
  border: 1px solid #cbd5e1;
  box-shadow: none;
}

.campaign-step-row--sms .step-channel {
  border-left: 4px solid #7c3aed;
}

.campaign-step-row--email .step-channel {
  border-left: 4px solid #0284c7;
}

.campaign-step-row--call .step-channel {
  border-left: 4px solid #f59e0b;
}

.campaign-step-row .step-remove {
  width: auto;
  min-width: 0;
  max-width: none;
  height: auto;
  min-height: 0;
  max-height: none;
  padding: 3px 0;
  border: 0;
  background: transparent;
  color: #b91c1c;
  font-size: 0.78rem;
  font-weight: 700;
  text-decoration: underline;
  box-shadow: none;
}

.campaign-step-row .step-remove:hover {
  background: transparent;
  color: #7f1d1d;
}

.campaign-add-step-after {
  margin: 14px 0 18px;
  padding: 14px;
  border: 1px dashed #a5b4fc;
  border-radius: 14px;
  background: #f8fbff;
}

#addStepBtn {
  padding: 10px 18px;
  border-radius: 999px;
  font-weight: 800;
}

@media (max-width: 1080px) {
  .campaign-builder-shell {
    grid-template-columns: 1fr;
  }

  .campaign-summary-panel {
    position: static;
    order: -1;
  }
}

.campaign-list-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.campaign-list-header-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
}

.campaign-list-header-actions > * {
  flex: 0 0 auto;
}

.contact-topbar-actions button,
.videos-topbar-actions button,
.forms-topbar-actions button,
.landing-topbar-actions button,
.drip-topbar-actions button,
.campaign-list-header-actions button {
  width: auto;
  min-width: 0;
  margin-top: 0;
  white-space: nowrap;
}

@media (max-width: 1080px) {
  .contact-topbar-actions button,
  .videos-topbar-actions button,
  .forms-topbar-actions button,
  .landing-topbar-actions button,
  .drip-topbar-actions button,
  .campaign-list-header-actions button {
    padding: 4px 9px;
    font-size: 11px;
  }
}

@media (max-width: 900px) {
  .contact-topbar-actions button,
  .videos-topbar-actions button,
  .forms-topbar-actions button,
  .landing-topbar-actions button,
  .drip-topbar-actions button,
  .campaign-list-header-actions button {
    padding: 3px 7px;
    font-size: 10px;
  }
}

.campaigns-page {
  display: flex;
  flex-direction: column;
}

.campaigns-page #savedCampaignsSection {
  order: 1;
}

.campaigns-page #createCampaignSection {
  order: 2;
}

.campaign-ai-builder-panel {
  margin: 0 0 16px;
  padding: 16px 18px;
  border: 1px solid #c4b5fd;
  border-radius: 12px;
  background: linear-gradient(135deg, #faf5ff, #eff6ff);
}

.campaign-ai-builder-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.campaign-ai-builder-badge {
  font-size: 0.72rem;
  font-weight: 800;
  background: linear-gradient(135deg, #4f46e5, #7c3aed);
  color: #fff;
  padding: 2px 8px;
  border-radius: 999px;
  letter-spacing: 0.05em;
}

.campaign-ai-builder-title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
  color: #1e1b4b;
}

.campaign-starter-panel {
  margin: 0 0 16px;
  padding: 12px 14px;
  border: 1px solid #bfdbfe;
  border-radius: 10px;
  background: #eff6ff;
}

.campaign-starter-lead {
  margin: 0 0 10px;
}

.campaign-starter-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.campaign-starter-btn {
  width: auto;
  margin-top: 0;
  padding: 8px 14px;
  font-size: 13px;
  background: #ffffff;
  border: 1px solid #93c5fd;
  color: #1e40af;
}

.campaign-starter-btn:hover {
  background: #dbeafe;
  border-color: #3b82f6;
}

.campaign-category-child-main {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-width: 0;
}

.campaign-enrollment-stats {
  font-size: 0.78rem;
  font-weight: 600;
  color: #475569;
  line-height: 1.3;
}

.campaign-category-child.is-active .campaign-enrollment-stats {
  color: #1e3a8a;
}

.campaign-saved-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

.campaign-category-sidebar {
  border: 1px solid #dbe2ef;
  background: #f8fafc;
  border-radius: 6px;
  padding: 10px;
}

.campaign-category-sidebar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.campaign-category-sidebar-head strong {
  font-size: 17px;
}

.campaign-category-sidebar-head button {
  width: auto;
  margin-top: 0;
  padding: 6px 10px;
  font-size: 14px;
  background: linear-gradient(135deg, #7c3aed, #6d28d9);
  color: #ffffff;
  border-color: #6d28d9;
}

#addCampaignCategoryBtn {
  background: linear-gradient(135deg, #7c3aed, #6d28d9);
  color: #ffffff;
  border-color: #6d28d9;
}

.campaign-category-sidebar-head button:hover,
#addCampaignCategoryBtn:hover {
  background: linear-gradient(135deg, #6d28d9, #5b21b6);
  color: #ffffff;
  border-color: #5b21b6;
}

.campaign-category-list {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  align-items: start;
}

.campaign-category-quick-filters {
  display: contents;
}

.campaign-category-quick-btn {
  width: 100%;
  min-height: 0;
  margin-top: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  border: 1px solid #1d4ed8;
  border-radius: 10px;
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: #ffffff;
  padding: 9px 10px;
  font-size: 11px;
}

.campaign-category-quick-btn.is-active {
  border-color: #4338ca;
  background: linear-gradient(135deg, #4f46e5, #4338ca);
  color: #ffffff;
}

.campaign-category-quick-btn strong {
  font-size: 20px;
  line-height: 1;
  color: rgba(255, 255, 255, 0.92);
}

.campaign-category-group {
  border: 1px solid #1d4ed8;
  border-radius: 10px;
  background: #ffffff;
  overflow: hidden;
}

.campaign-category-list .campaign-category-group:nth-of-type(6n + 1) {
  border-color: #1d4ed8;
}

.campaign-category-list .campaign-category-group:nth-of-type(6n + 2) {
  border-color: #4338ca;
}

.campaign-category-list .campaign-category-group:nth-of-type(6n + 3) {
  border-color: #d97706;
}

.campaign-category-list .campaign-category-group:nth-of-type(6n + 4) {
  border-color: #ea580c;
}

.campaign-category-list .campaign-category-group:nth-of-type(6n + 5) {
  border-color: #0f766e;
}

.campaign-category-list .campaign-category-group:nth-of-type(6n + 6) {
  border-color: #dc2626;
}

.campaign-category-group summary {
  list-style: none;
}

.campaign-category-group summary::-webkit-details-marker {
  display: none;
}

.campaign-category-item {
  width: 100%;
  margin-top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: #ffffff;
  border: none;
  border-radius: 0;
  padding: 9px 10px;
  font-size: 15px;
  cursor: pointer;
}

.campaign-category-list .campaign-category-group:nth-of-type(6n + 1) .campaign-category-item {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
}

.campaign-category-list .campaign-category-group:nth-of-type(6n + 2) .campaign-category-item {
  background: linear-gradient(135deg, #4f46e5, #4338ca);
}

.campaign-category-list .campaign-category-group:nth-of-type(6n + 3) .campaign-category-item {
  background: linear-gradient(135deg, #f59e0b, #d97706);
}

.campaign-category-list .campaign-category-group:nth-of-type(6n + 4) .campaign-category-item {
  background: linear-gradient(135deg, #f97316, #ea580c);
}

.campaign-category-list .campaign-category-group:nth-of-type(6n + 5) .campaign-category-item {
  background: linear-gradient(135deg, #0d9488, #0f766e);
}

.campaign-category-list .campaign-category-group:nth-of-type(6n + 6) .campaign-category-item {
  background: linear-gradient(135deg, #ef4444, #dc2626);
}

.campaign-category-item::before {
  content: ">";
  margin-right: 8px;
  color: rgba(255, 255, 255, 0.9);
  font-size: 24px;
  line-height: 1;
  font-weight: 700;
}

.campaign-category-group[open] .campaign-category-item::before {
  content: "v";
}

.campaign-category-item.is-active {
  background: linear-gradient(135deg, #4f46e5, #4338ca);
  color: #ffffff;
}

.campaign-category-list .campaign-category-group:nth-of-type(6n + 1) .campaign-category-item.is-active {
  background: linear-gradient(135deg, #1d4ed8, #1e40af);
}

.campaign-category-list .campaign-category-group:nth-of-type(6n + 2) .campaign-category-item.is-active {
  background: linear-gradient(135deg, #4338ca, #312e81);
}

.campaign-category-list .campaign-category-group:nth-of-type(6n + 3) .campaign-category-item.is-active {
  background: linear-gradient(135deg, #d97706, #b45309);
}

.campaign-category-list .campaign-category-group:nth-of-type(6n + 4) .campaign-category-item.is-active {
  background: linear-gradient(135deg, #ea580c, #c2410c);
}

.campaign-category-list .campaign-category-group:nth-of-type(6n + 5) .campaign-category-item.is-active {
  background: linear-gradient(135deg, #0f766e, #115e59);
}

.campaign-category-list .campaign-category-group:nth-of-type(6n + 6) .campaign-category-item.is-active {
  background: linear-gradient(135deg, #dc2626, #b91c1c);
}

.campaign-category-item strong {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.92);
}

.campaign-category-children {
  border-top: 1px solid #e2e8f0;
  padding: 6px;
  display: grid;
  gap: 6px;
  background: #f8fafc;
}

.campaign-category-child {
  width: 100%;
  margin-top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border: 1px solid #c7d2fe;
  border-radius: 8px;
  background: linear-gradient(135deg, #eef2ff, #e0e7ff);
  padding: 7px 9px;
  font-size: 13px;
}

.campaign-category-group[open] .campaign-category-children {
  background: #ffffff;
}

.campaign-category-group[open] .campaign-category-child {
  background: #ffffff;
  border-color: #94a3b8;
  color: #0f172a;
}

.campaign-category-group[open] .campaign-category-child-name {
  color: #0f172a;
  font-size: 15px;
  font-weight: 400;
}

.campaign-category-group[open] .campaign-category-child-badge {
  color: #1e293b;
  border-color: #94a3b8;
  background: #e2e8f0;
}

.campaign-category-list .campaign-category-group:nth-of-type(6n + 1)[open] .campaign-category-children {
  background: #dbeafe;
}

.campaign-category-list .campaign-category-group:nth-of-type(6n + 1)[open] .campaign-category-child {
  background: linear-gradient(135deg, #eff6ff, #dbeafe);
  border-color: #60a5fa;
}

.campaign-category-list .campaign-category-group:nth-of-type(6n + 2)[open] .campaign-category-children {
  background: #e0e7ff;
}

.campaign-category-list .campaign-category-group:nth-of-type(6n + 2)[open] .campaign-category-child {
  background: linear-gradient(135deg, #eef2ff, #e0e7ff);
  border-color: #818cf8;
}

.campaign-category-list .campaign-category-group:nth-of-type(6n + 3)[open] .campaign-category-children {
  background: #fef3c7;
}

.campaign-category-list .campaign-category-group:nth-of-type(6n + 3)[open] .campaign-category-child {
  background: linear-gradient(135deg, #fffbeb, #fef3c7);
  border-color: #f59e0b;
}

.campaign-category-list .campaign-category-group:nth-of-type(6n + 4)[open] .campaign-category-children {
  background: #ffedd5;
}

.campaign-category-list .campaign-category-group:nth-of-type(6n + 4)[open] .campaign-category-child {
  background: linear-gradient(135deg, #fff7ed, #ffedd5);
  border-color: #fb923c;
}

.campaign-category-list .campaign-category-group:nth-of-type(6n + 5)[open] .campaign-category-children {
  background: #ccfbf1;
}

.campaign-category-list .campaign-category-group:nth-of-type(6n + 5)[open] .campaign-category-child {
  background: linear-gradient(135deg, #f0fdfa, #ccfbf1);
  border-color: #2dd4bf;
}

.campaign-category-list .campaign-category-group:nth-of-type(6n + 6)[open] .campaign-category-children {
  background: #fee2e2;
}

.campaign-category-list .campaign-category-group:nth-of-type(6n + 6)[open] .campaign-category-child {
  background: linear-gradient(135deg, #fef2f2, #fee2e2);
  border-color: #f87171;
}

.campaign-category-child.is-active {
  border-color: #4f46e5;
  background: linear-gradient(135deg, #4f46e5, #4338ca);
}

.campaign-category-child.is-active .campaign-category-child-name {
  color: #ffffff;
  font-weight: 600;
}

.campaign-category-group[open] .campaign-category-child.is-active {
  color: #0f172a;
}

.campaign-category-group[open] .campaign-category-child.is-active .campaign-category-child-name {
  color: #0f172a;
  font-weight: 400;
}

.campaign-category-child-name {
  text-align: left;
}

.campaign-category-child-badge {
  font-size: 11px;
  color: #334155;
  border: 1px solid #cbd5e1;
  border-radius: 999px;
  padding: 1px 6px;
  background: #f8fafc;
  white-space: nowrap;
}

.campaign-category-child-details {
  border: 1px solid #dbe2ef;
  border-top: none;
  border-radius: 0 0 4px 4px;
  background: #ffffff;
  padding: 8px;
  margin-top: -6px;
}

.campaign-category-child-details:not(.is-active) {
  display: none;
}

.campaign-category-inline-actions {
  margin-bottom: 6px;
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.campaign-category-empty {
  font-size: 12px;
  color: #64748b;
  padding: 4px 6px;
}

.campaign-list-header button {
  width: auto;
  margin-top: 0;
}

.campaign-list {
  display: none;
}

.campaign-card {
  border: 1px solid #dbe2ef;
  border-radius: 6px;
  background: #f8fafc;
  padding: 10px;
}

.campaign-card-selected {
  border-color: #1e5fbf;
  box-shadow: 0 0 0 2px rgba(30, 95, 191, 0.2);
  background: #eef4ff;
}

.campaign-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.campaign-card-top button {
  width: auto;
  margin-top: 0;
}

.campaign-card-actions {
  display: inline-flex;
  gap: 8px;
}

.campaign-inline-rename-form {
  margin: 8px 0 4px;
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.campaign-inline-rename-input {
  min-width: 240px;
  width: min(360px, 100%);
  margin: 0;
}

button.campaign-inline-rename-save,
button.campaign-inline-rename-cancel {
  width: auto;
  min-width: 54px;
  padding: 3px 10px;
  font-size: 11px;
  line-height: 1.25;
  margin-top: 0;
  border-radius: 3px;
  cursor: pointer;
  box-sizing: border-box;
}

button.campaign-inline-rename-save {
  background: #1e5fbf;
  color: #ffffff;
  border: 1px solid #1a54a8;
}

button.campaign-inline-rename-save:hover {
  background: #1a54a8;
  border-color: #174a94;
}

button.campaign-inline-rename-cancel {
  background: #f8fafc;
  color: #334155;
  border: 1px solid #cbd5e1;
}

button.campaign-inline-rename-cancel:hover {
  background: #f1f5f9;
  border-color: #94a3b8;
}

/* Smaller blue “Edit” / inline action buttons (Campaigns, Landing Pages, Forms open-link) */
button.campaign-inline-edit,
button.campaign-inline-duplicate,
button.campaign-inline-rename,
button.landing-edit-btn {
  width: auto;
  min-width: 54px;
  padding: 3px 10px;
  font-size: 11px;
  line-height: 1.25;
  margin-top: 0;
  background: #1e5fbf;
  color: #ffffff;
  border: 1px solid #1a54a8;
  border-radius: 3px;
  cursor: pointer;
  box-sizing: border-box;
}

button.campaign-inline-edit:hover,
button.campaign-inline-duplicate:hover,
button.campaign-inline-rename:hover,
button.landing-edit-btn:hover {
  background: #1a54a8;
  border-color: #174a94;
}

/* Same footprint as Edit — paired Delete on Campaigns, Landing Pages, Forms, Videos, Documents */
button.danger.campaign-inline-delete,
button.danger.landing-delete-btn,
button.danger.form-delete-btn,
button.danger.video-delete-btn,
button.danger.document-delete,
button.danger.email-template-list-delete-btn {
  width: auto;
  min-width: 54px;
  padding: 3px 10px;
  font-size: 11px;
  line-height: 1.25;
  margin-top: 0;
  border-radius: 3px;
  cursor: pointer;
  border: 1px solid #8f1515;
  box-sizing: border-box;
}

button.danger.campaign-inline-delete:hover,
button.danger.landing-delete-btn:hover,
button.danger.form-delete-btn:hover,
button.danger.video-delete-btn:hover,
button.danger.document-delete:hover,
button.danger.email-template-list-delete-btn:hover {
  background: #8f1515;
  border-color: #7a1212;
}

button.document-rename {
  width: auto;
  min-width: 0;
  padding: 2px 8px;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.25;
  margin-top: 0;
  border-radius: 3px;
  cursor: pointer;
  border: 1px solid #cbd5e1;
  background: #e5e7eb;
  color: #475569;
  box-sizing: border-box;
}

button.document-rename:hover {
  background: #d1d5db;
  border-color: #94a3b8;
  color: #334155;
}

.document-item-actions .document-rename {
  width: auto;
  margin-top: 0;
}

/* Actions column — space between Edit / Delete */
.landing-pages-table tbody td:last-child {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

/* Platform — label and values (e.g. Wix) centered under the column */
.landing-pages-table th:nth-child(3),
.landing-pages-table td:nth-child(3) {
  text-align: center;
  padding-left: 12px;
  padding-right: 12px;
}

/* Website URL — slight indent from Preview */
.landing-pages-table th:nth-child(4),
.landing-pages-table td:nth-child(4) {
  padding-left: 14px;
}

.landing-page-preview-cell {
  vertical-align: middle;
  width: 200px;
  text-align: right;
  padding-right: 4px;
}

.landing-page-snapshot-link {
  display: inline-block;
  line-height: 0;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid #dbe2ef;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}

.landing-page-snapshot-link:hover {
  border-color: #93c5fd;
  box-shadow: 0 2px 8px rgba(30, 95, 191, 0.15);
}

.landing-page-snapshot {
  display: block;
  width: 160px;
  height: 100px;
  object-fit: cover;
  object-position: top center;
  background: #f1f5f9;
}

.landing-page-snapshot-empty {
  color: #94a3b8;
  font-size: 13px;
}

.landing-pages-intro {
  line-height: 1.55;
  font-size: 0.95rem;
}

.landing-pages-form-grid {
  gap: 14px;
}

.landing-pages-form-grid .contact-field-box {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.landing-pages-notes-field {
  grid-column: 1 / -1;
}

.landing-pages-notes-field textarea {
  min-height: 72px;
}

.landing-platform-other {
  margin-top: 6px;
}

.landing-pages-preview-disclaimer {
  line-height: 1.45;
}

.landing-pages-empty {
  padding: 18px 12px !important;
  line-height: 1.5;
}

.landing-url-cell {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.landing-url-copy-btn {
  border: 1px solid #cbd5e1;
  background: #f8fafc;
  color: #334155;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 6px;
  cursor: pointer;
}

.landing-url-copy-btn:hover {
  background: #eef2ff;
  border-color: #93c5fd;
  color: #1e40af;
}

.campaign-card-meta {
  font-size: 12px;
  color: #64748b;
  margin-top: 4px;
}

.campaign-timeline-wrap {
  margin-top: 8px;
}

.campaign-timeline-wrap h4 {
  margin: 0 0 8px;
}

.campaign-timeline-preview {
  display: grid;
  gap: 6px;
}

.campaign-timeline-row {
  border: 1px solid #dbe2ef;
  border-radius: 4px;
  background: #ffffff;
  padding: 6px 8px;
  font-size: 12px;
  color: #334155;
}

.campaign-timeline-row--sms {
  border-color: #c4b5fd;
  border-left: 3px solid #7c3aed;
  background: linear-gradient(180deg, #fafbff 0%, #f5f3ff 100%);
}

.campaign-timeline-row--email {
  border-color: #7dd3fc;
  border-left: 3px solid #0ea5e9;
  background: linear-gradient(180deg, #f0f9ff 0%, #e0f2fe 100%);
}

.campaign-timeline-row--call {
  border-color: #fde68a;
  border-left: 3px solid #f59e0b;
  background: linear-gradient(180deg, #fffbeb 0%, #fff7ed 100%);
}

.campaign-timeline-row--unknown {
  border-left: 3px solid #94a3b8;
}

.campaign-journey-wrap {
  margin-top: 8px;
}

.campaign-journey-wrap h4 {
  margin: 0 0 8px;
}

.campaign-journey-chart {
  display: flex;
  align-items: stretch;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 2px;
}

.journey-node {
  appearance: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
  min-width: 220px;
  border: 2px solid #dbe2ef;
  border-radius: 6px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  padding: 8px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.journey-node--sms {
  border-color: #c4b5fd;
  background: linear-gradient(180deg, #fafbff 0%, #f5f3ff 100%);
}

.journey-node--sms:hover {
  background: linear-gradient(180deg, #fafbff 0%, #f5f3ff 100%);
  color: #334155;
  border-color: #a78bfa;
  box-shadow: 0 2px 8px rgba(124, 58, 237, 0.2);
}

.journey-node--sms:focus-visible {
  outline-color: #7c3aed;
}

.journey-node--sms .journey-node-title {
  color: #4338ca;
}

.journey-node--email {
  border-color: #e0f2fe;
  background: linear-gradient(180deg, #feffff 0%, #f4fbff 50%, #eff8ff 100%);
}

.journey-node--email:hover {
  background: linear-gradient(180deg, #feffff 0%, #f4fbff 50%, #eff8ff 100%);
  color: #334155;
  border-color: #dbeafe;
  box-shadow: 0 2px 12px rgba(186, 230, 253, 0.45);
}

.journey-node--email:focus-visible {
  outline-color: #bae6fd;
}

.journey-node--email .journey-node-title {
  color: #0e7490;
}

.journey-node--call {
  border-color: #fde68a;
  background: linear-gradient(180deg, #fffbeb 0%, #fff7ed 100%);
}

.journey-node--call:hover {
  background: linear-gradient(180deg, #fffbeb 0%, #fff7ed 100%);
  color: #334155;
  border-color: #fbbf24;
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.22);
}

.journey-node--call:focus-visible {
  outline-color: #d97706;
}

.journey-node--call .journey-node-title {
  color: #92400e;
}

.journey-node--unknown:hover {
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  color: #334155;
  border-color: #94a3b8;
  box-shadow: 0 2px 8px rgba(100, 116, 139, 0.18);
}

.journey-node--unknown:focus-visible {
  outline-color: #64748b;
}

.journey-node:focus {
  outline: none;
}

.journey-node:focus-visible {
  outline: 2px solid #1e5fbf;
  outline-offset: 2px;
}

.journey-node-title {
  font-size: 13px;
  font-weight: 700;
  color: #334155;
  text-align: center;
}

.journey-node-meta {
  margin-top: 4px;
  font-size: 12px;
  color: #334155;
  text-align: center;
}

.journey-node-time {
  margin-top: 6px;
  font-size: 12px;
  color: #64748b;
  text-align: center;
}

/* Align with Schedule Preview rows / saved campaign step density — compact cards, narrow default Step 1. */
.campaign-journey-chart .journey-node {
  min-width: 148px;
  max-width: 200px;
  padding: 6px 8px;
  border-radius: 48px;
}

.campaign-journey-chart .journey-node-title {
  font-size: 12px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.campaign-journey-chart .journey-node-meta {
  margin-top: 3px;
  font-size: 11px;
  line-height: 1.25;
}

.campaign-journey-chart .journey-node-time {
  margin-top: 4px;
  font-size: 11px;
}

.campaign-journey-chart .journey-node--email .journey-node-title {
  color: #0d9488;
}

.campaign-journey-chart .journey-node--email:hover {
  background: linear-gradient(180deg, #feffff 0%, #f4fbff 50%, #eff8ff 100%);
  color: #334155;
  border-color: #e0f2fe;
  box-shadow: 0 2px 14px rgba(224, 242, 254, 0.85);
}

.campaign-journey-chart .journey-node:hover .journey-node-meta {
  color: #334155;
}

.campaign-journey-chart .journey-node:hover .journey-node-time {
  color: #64748b;
}

.campaign-journey-chart .journey-node--sms:hover .journey-node-title {
  color: #4338ca;
}

.campaign-journey-chart .journey-node--email:hover .journey-node-title {
  color: #0d9488;
}

.campaign-journey-chart .journey-node--call:hover .journey-node-title {
  color: #92400e;
}

.campaign-journey-chart .journey-arrow::before {
  background: #94a3b8;
}

.campaign-journey-chart .journey-arrow::after {
  border-left-color: #94a3b8;
}

.journey-arrow {
  display: inline-flex;
  align-items: center;
  width: 34px;
  min-width: 34px;
  justify-content: center;
  position: relative;
}

.journey-arrow::before {
  content: "";
  width: 20px;
  height: 2px;
  background: #1e5fbf;
  border-radius: 1px;
}

.journey-arrow::after {
  content: "";
  position: absolute;
  right: 3px;
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 7px solid #1e5fbf;
}

.journey-step-dialog {
  max-width: min(640px, calc(100vw - 32px));
  padding: 0;
  border: 1px solid #dbe2ef;
  border-radius: 10px;
  box-shadow: 0 16px 48px rgba(15, 23, 42, 0.18);
}

/* Opened with show() so Save/Update stays clickable; center like a modal without document inert. */
.journey-step-dialog[open] {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  max-height: min(76vh, 620px);
  overflow: auto;
  z-index: 1200;
}

.journey-step-dialog::backdrop {
  background: rgba(15, 23, 42, 0.35);
}

.journey-step-dialog-inner {
  padding: 16px 40px 16px 16px;
  position: relative;
}

.journey-step-dialog-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 32px;
  height: 32px;
  padding: 0;
  margin: 0;
  border: none;
  border-radius: 6px;
  background: transparent;
  font-size: 22px;
  line-height: 1;
  color: #64748b;
  cursor: pointer;
}

.journey-step-dialog-close:hover {
  background: #f1f5f9;
  color: #0f172a;
}

.journey-step-dialog-heading {
  margin: 0 0 12px;
  font-size: 16px;
  color: #1e3a8a;
}

.journey-step-detail-list {
  margin: 0;
  display: grid;
  gap: 10px 0;
  font-size: 13px;
  color: #334155;
}

.journey-step-detail-list dt {
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #64748b;
}

.journey-step-detail-list dd {
  margin: 2px 0 0;
}

.journey-step-plain-body {
  max-height: min(48vh, 360px);
  overflow: auto;
  padding: 8px 10px;
  border-radius: 8px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  line-height: 1.45;
  white-space: normal;
  word-break: break-word;
}

.journey-step-break-url {
  word-break: break-all;
  font-size: 12px;
}

/* Inline editor inside the journey node detail dialog. Keeps the look close
   to the read-only detail list it replaces, but with proper input controls. */
.journey-step-edit-form {
  display: grid;
  gap: 10px;
  font-size: 13px;
  color: #334155;
}

.journey-step-edit-row {
  display: grid;
  gap: 4px;
}

.journey-step-offset-group {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.journey-step-offset-group label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  color: #64748b;
  text-transform: none;
  letter-spacing: normal;
}

.journey-step-offset-group label span {
  font-weight: 600;
}

.journey-step-offset-group input {
  width: 100%;
  margin: 0;
}

.journey-step-edit-label {
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #1e3a8a;
}

.journey-step-edit-form input[type="text"],
.journey-step-edit-form input[type="number"],
.journey-step-edit-form select,
.journey-step-edit-form textarea {
  width: 100%;
  padding: 7px 9px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  font: inherit;
  background: #fff;
  color: #0f172a;
  box-sizing: border-box;
}

.journey-step-edit-form input[readonly] {
  background: #f1f5f9;
  color: #475569;
  cursor: default;
}

.journey-step-edit-form textarea {
  resize: vertical;
  min-height: 96px;
  font-family: inherit;
  line-height: 1.45;
}

.journey-step-html-editor {
  min-height: 160px;
  max-height: min(48vh, 360px);
  overflow: auto;
  cursor: text;
  background: #fff;
  border: 1px solid #cbd5e1;
}

.journey-step-html-editor:focus {
  outline: 2px solid #6366f1;
  outline-offset: 1px;
}

.journey-step-edit-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 4px;
}

.journey-step-cancel-btn,
.journey-step-save-btn {
  padding: 7px 14px;
  border-radius: 6px;
  border: 1px solid #cbd5e1;
  cursor: pointer;
  font: inherit;
  font-weight: 600;
}

.journey-step-cancel-btn {
  background: #fff;
  color: #475569;
}

.journey-step-cancel-btn:hover {
  background: #f1f5f9;
}

.journey-step-save-btn {
  background: #2563eb;
  border-color: #2563eb;
  color: #fff;
}

.journey-step-save-btn:hover {
  background: #1d4ed8;
}

.journey-step-save-btn:disabled {
  background: #93c5fd;
  border-color: #93c5fd;
  cursor: default;
}

.journey-step-edit-note {
  margin: 0;
  color: #64748b;
  font-size: 12px;
  line-height: 1.4;
}

.campaign-category-dialog {
  width: min(560px, calc(100vw - 32px));
  max-width: min(560px, calc(100vw - 32px));
  padding: 0;
  border: 1px solid #dbe2ef;
  border-radius: 10px;
  box-shadow: 0 16px 48px rgba(15, 23, 42, 0.18);
}

.campaign-category-dialog[open] {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  z-index: 1200;
}

.campaign-category-dialog::backdrop {
  background: rgba(15, 23, 42, 0.35);
}

.campaign-category-dialog-inner {
  display: grid;
  gap: 10px;
  padding: 16px;
}

.campaign-category-dialog-inner h3 {
  margin: 0;
  font-size: 18px;
  color: #1e3a8a;
}

.journey-detail-list {
  margin: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px 14px;
  font-size: 13px;
  color: #334155;
}

.journey-detail-list dt {
  margin: 0;
  font-weight: 600;
  color: #475569;
}

.journey-detail-list dd {
  margin: 0;
}

.journey-detail-pre {
  margin: 4px 0 0;
  padding: 10px;
  border-radius: 6px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 12px;
  max-height: 240px;
  overflow: auto;
}

.journey-detail-footnote {
  margin: 12px 0 0;
  font-size: 12px;
  color: #64748b;
}

#campaignForm button[type="submit"] {
  background: #1e5fbf;
  color: #ffffff;
  border-color: #1a54a8;
}

#campaignForm button[type="submit"]:hover {
  background: #1a54a8;
}

#campaignForm #addTagRuleBtn,
#campaignForm #addStepBtn {
  background: #1e5fbf;
  color: #ffffff;
  border-color: #1a54a8;
  padding: 6px 12px;
  font-size: 12px;
}

#campaignForm #addTagRuleBtn:hover,
#campaignForm #addStepBtn:hover {
  background: #1a54a8;
}

/* Campaign builder should show full form without inner scrollbar */
#campaignForm.contact-modal-form {
  max-height: none;
  overflow: visible;
  padding-right: 0;
}

/* Send Email signature form should not show inner right scrollbar */
#emailSignatureForm.contact-modal-form {
  max-height: none;
  overflow: visible;
  padding-right: 0;
}

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

.documents-category-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  overflow: visible;
}

.documents-category-filter-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
}

.documents-category-btn {
  width: auto;
  flex: 0 0 auto;
  min-width: 220px;
  margin-top: 0;
  padding: 10px 12px;
  border: 1px solid #1d4ed8;
  border-radius: 10px;
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  font-size: 14px;
  line-height: 1.3;
  color: #ffffff;
}

.documents-category-btn.is-active {
  border-color: #4338ca;
  background: linear-gradient(135deg, #4f46e5, #4338ca);
}

.documents-category-btn--empty {
  opacity: 0.78;
}

.documents-empty-category-toggle,
.page-documents .documents-delete-category-link {
  width: auto;
  margin-top: 0;
  padding: 7px 10px;
  border: 1px solid #cbd5e1;
  border-radius: 999px;
  background: #ffffff;
  color: #475569;
  box-shadow: none;
  font-size: 12px;
  font-weight: 700;
}

.documents-empty-category-toggle:hover {
  background: #f8fafc;
  color: #1d4ed8;
  border-color: #93c5fd;
  transform: none;
  box-shadow: none;
}

.page-documents .documents-delete-category-link {
  border-color: transparent;
  color: #b91c1c;
  background: transparent;
}

.page-documents .documents-delete-category-link:hover {
  text-decoration: underline;
  background: #fef2f2;
  border-color: #fecaca;
  transform: none;
  box-shadow: none;
}

.documents-category-btn:nth-of-type(6n + 1) {
  border-color: #1d4ed8;
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
}

.documents-category-btn:nth-of-type(6n + 2) {
  border-color: #4338ca;
  background: linear-gradient(135deg, #4f46e5, #4338ca);
}

.documents-category-btn:nth-of-type(6n + 3) {
  border-color: #d97706;
  background: linear-gradient(135deg, #f59e0b, #d97706);
}

.documents-category-btn:nth-of-type(6n + 4) {
  border-color: #ea580c;
  background: linear-gradient(135deg, #f97316, #ea580c);
}

.documents-category-btn:nth-of-type(6n + 5) {
  border-color: #0f766e;
  background: linear-gradient(135deg, #0d9488, #0f766e);
}

.documents-category-btn:nth-of-type(6n + 6) {
  border-color: #dc2626;
  background: linear-gradient(135deg, #ef4444, #dc2626);
}

.documents-category-btn strong {
  font-size: 22px;
  line-height: 1;
  color: rgba(255, 255, 255, 0.92);
}

.document-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 10px 12px;
  border: 1px solid #dbe2ef;
  border-radius: 6px;
  background: #f8fafc;
  padding: 10px;
}

.documents-page-intro {
  margin: 0 0 16px;
  font-size: 15px;
  line-height: 1.5;
  color: #334155;
}

.documents-page-intro a {
  color: #1d4ed8;
  font-weight: 600;
}

.documents-upload-hint {
  margin-top: 8px;
}

.documents-upload-progress {
  display: grid;
  gap: 6px;
  margin-top: 10px;
}

.documents-upload-progress-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 10px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #f8fafc;
  color: #475569;
  font-size: 12px;
}

.documents-upload-progress-row span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.documents-upload-progress-row strong {
  flex: 0 0 auto;
}

.documents-upload-progress-row--ok {
  border-color: #bbf7d0;
  background: #f0fdf4;
  color: #166534;
}

.documents-upload-progress-row--error {
  border-color: #fecaca;
  background: #fef2f2;
  color: #991b1b;
}

.documents-empty-state {
  padding: 20px 16px;
  border: 1px dashed #cbd5e1;
  border-radius: 8px;
  background: #f8fafc;
  text-align: center;
}

.documents-empty-state p {
  margin: 0 0 8px;
}

.documents-delete-category-note {
  margin: 0 0 12px;
}

.document-row-select {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #334155;
  flex: 0 0 auto;
}

.document-row-select input[type="checkbox"] {
  width: 16px;
  height: 16px;
  min-width: 16px;
  min-height: 16px;
  flex-shrink: 0;
  cursor: pointer;
}

.document-row-main {
  flex: 1 1 200px;
  min-width: 0;
}

.document-row-title-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.document-type-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #1e3a8a;
  background: #dbeafe;
  border: 1px solid #93c5fd;
}

.document-row-meta-line {
  margin-top: 4px;
  font-size: 12px;
  color: #64748b;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.document-meta-sep {
  color: #94a3b8;
}

.document-attach {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #334155;
}

#documentsList .document-attach input[type="checkbox"] {
  width: 15px;
  height: 15px;
  min-width: 15px;
  min-height: 15px;
  flex-shrink: 0;
}

.document-name {
  width: auto;
  max-width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  font-weight: 700;
  color: #1e3a8a;
  text-align: left;
  overflow-wrap: anywhere;
}

.document-name:hover {
  color: #1d4ed8;
  text-decoration: underline;
  background: transparent;
  transform: none;
  box-shadow: none;
}

.document-rename-btn,
.document-download-link {
  width: auto;
  margin-top: 0;
  padding: 3px 8px;
  border: 1px solid #cbd5e1;
  border-radius: 999px;
  background: #ffffff;
  color: #475569;
  font-size: 11px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: none;
}

.document-rename-btn:hover,
.document-download-link:hover {
  background: #f8fafc;
  color: #1d4ed8;
  border-color: #93c5fd;
  text-decoration: none;
  transform: none;
  box-shadow: none;
}

.document-rename-form {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: 6px;
}

.document-rename-form[hidden] {
  display: none !important;
}

.document-rename-input {
  flex: 1 1 260px;
  min-width: 180px;
}

.document-rename-form button {
  width: auto;
  margin-top: 0;
  padding: 6px 10px;
  font-size: 12px;
}

.document-meta {
  margin-top: 4px;
  font-size: 12px;
  color: #64748b;
}

.document-item-actions {
  margin-top: 2px;
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.document-delete {
  width: 30px;
  height: 30px;
  min-width: 30px;
  margin-top: 0;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #cbd5e1;
  border-radius: 999px;
  background: #f8fafc;
  color: #64748b;
  box-shadow: none;
}

.document-delete:hover {
  background: #fef2f2;
  color: #dc2626;
  border-color: #fecaca;
  transform: none;
  box-shadow: none;
}

.document-preview-card {
  width: min(920px, calc(100% - 28px));
}

.document-preview-body {
  min-height: 360px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #f8fafc;
  overflow: hidden;
}

.document-preview-frame {
  width: 100%;
  min-height: 64vh;
  border: 0;
  background: #ffffff;
}

.document-preview-image {
  display: block;
  max-width: 100%;
  max-height: 70vh;
  margin: 0 auto;
  object-fit: contain;
}

.document-preview-actions {
  justify-content: flex-end;
}

.document-preview-download-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 14px;
  border-radius: 8px;
  background: #1e5fbf;
  color: #ffffff;
  text-decoration: none;
  font-weight: 700;
}

/* Forms — saved list: thumbnail (URL uses mshots like Landing Pages; files use image or type badge) */
.form-document-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  border: 1px solid #dbe2ef;
  border-radius: 6px;
  background: #f8fafc;
  padding: 10px;
}

.form-document-main-col {
  flex: 1;
  min-width: 0;
}

.form-thumb-cell {
  flex-shrink: 0;
}

.form-thumb-link {
  display: inline-block;
  line-height: 0;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid #dbe2ef;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}

.form-thumb-link:hover {
  border-color: #93c5fd;
  box-shadow: 0 2px 8px rgba(30, 95, 191, 0.15);
}

.form-thumb-img {
  display: block;
  width: 160px;
  height: 100px;
  object-fit: cover;
  object-position: top center;
  background: #f1f5f9;
}

.form-thumb-badge-link {
  display: inline-block;
  text-decoration: none;
  color: inherit;
}

.form-thumb-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 160px;
  height: 100px;
  border-radius: 6px;
  border: 1px solid #dbe2ef;
  background: linear-gradient(160deg, #f8fafc 0%, #e2e8f0 100%);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}

.form-thumb-badge-link:hover .form-thumb-badge {
  border-color: #93c5fd;
  box-shadow: 0 2px 8px rgba(30, 95, 191, 0.12);
}

.form-thumb-badge-ext {
  font-size: 18px;
  font-weight: 800;
  color: #1e3a8a;
  letter-spacing: 0.02em;
}

.form-thumb-badge-hint {
  font-size: 11px;
  color: #64748b;
}

.form-thumb-empty {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 160px;
  height: 100px;
  border-radius: 6px;
  border: 1px dashed #cbd5e1;
  color: #94a3b8;
  font-size: 13px;
  background: #f8fafc;
}

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

.document-actions a {
  color: #1e5fbf;
  text-decoration: none;
}

.document-actions button {
  width: auto;
  margin-top: 0;
}

#documentUploadForm button[type="submit"] {
  width: auto;
  margin-top: 0;
  padding: 9px 14px;
  font-size: 14px;
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: #ffffff;
  border-color: #1d4ed8;
  border-radius: 10px;
}

#documentUploadForm button[type="submit"]:hover {
  background: linear-gradient(135deg, #1d4ed8, #1e40af);
}

#documentCategorySelect,
#addDocumentCategoryBtn,
#deleteDocumentCategoryBtn {
  box-sizing: border-box;
  width: auto;
  height: 34px;
  margin-top: 0;
  padding: 6px 12px;
  font-size: 13px;
  line-height: 1.25;
  font-weight: 700;
  border-radius: 10px;
}

#addDocumentCategoryBtn,
#deleteDocumentCategoryBtn {
  letter-spacing: 0.01em;
}

#documentFileInput {
  font-size: 14px;
  margin-top: 0;
}

#documentCategorySelect {
  min-width: 168px;
  background: linear-gradient(135deg, #4f46e5, #4338ca);
  color: #ffffff;
  border-color: #4338ca;
}

#documentCategorySelect option {
  color: #0f172a;
  background: #ffffff;
}

#documentFileInput::file-selector-button,
#documentFileInput::-webkit-file-upload-button {
  border: 1px solid #0f766e;
  border-radius: 10px;
  background: linear-gradient(135deg, #0d9488, #0f766e);
  color: #ffffff;
  font-size: 13px;
  font-weight: 700;
  padding: 7px 12px;
  margin-right: 10px;
  cursor: pointer;
}

.page-send-email .topbar h1 {
  font-size: 28px;
}

.page-send-email main .panel > h3 {
  font-size: 15px;
  font-weight: 600;
}

.page-send-email #message,
.page-send-email .email-page-message {
  font-size: 14px;
  margin-top: 0;
  margin-bottom: 10px;
  min-height: 1.2em;
}

.page-send-email .email-page-status-bottom {
  margin-top: 16px;
  margin-bottom: 28px;
  padding: 12px 14px;
  border-radius: 8px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  box-sizing: border-box;
}

.page-send-email .email-page-status-bottom:empty {
  display: none;
  padding: 0;
  margin-top: 0;
  margin-bottom: 0;
  border: none;
  background: transparent;
}

.page-send-email .quick-send-top-status {
  position: sticky;
  top: 8px;
  z-index: 30;
  font-weight: 700;
  background: #ecfdf3;
  border-color: #86efac;
}

.page-send-email .quick-send-top-status[hidden] {
  display: none !important;
}

.email-signature-save-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.email-template-save-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.email-template-save-actions .signature-save-feedback {
  margin: 0;
}

.signature-save-feedback {
  font-size: 14px;
  font-weight: 600;
  color: #1b5e20;
  min-height: 1.2em;
}

.signature-save-feedback.signature-save-feedback--error {
  color: #c62828;
}

/* Prominent, hard-to-miss save confirmation — a badge, shown only when there is
   a message (so an empty span stays invisible). Green = saved, red = error. */
.signature-save-feedback:not(:empty) {
  display: inline-block;
  padding: 7px 13px;
  border-radius: 8px;
  background: #dcfce7;
  border: 1px solid #86efac;
  color: #166534;
}
.signature-save-feedback.signature-save-feedback--error:not(:empty) {
  background: #fee2e2;
  border-color: #fca5a5;
  color: #991b1b;
}

/* Email Templates page: collapsible Starter / Saved template panels so they
   don't sandwich the editor and force scrolling. */
.et-collapsible-panel > summary.et-collapsible-head {
  cursor: pointer;
  padding: 2px 0;
  user-select: none;
}
.et-collapsible-panel > summary.et-collapsible-head .email-page-section-heading {
  display: inline;
  margin: 0;
}
.et-collapsible-hint {
  color: #64748b;
  font-size: 13px;
  font-weight: 400;
  margin-left: 8px;
}
.et-collapsible-panel[open] > summary.et-collapsible-head {
  margin-bottom: 12px;
}

/* Sticky action bar: keep Update / Save / Delete reachable while editing,
   even with the preview open (no scrolling to the bottom of the page). */
.email-template-save-actions {
  position: sticky;
  bottom: 0;
  background: #ffffff;
  border-top: 1px solid #e2e8f0;
  padding: 12px 0;
  margin-top: 16px;
  z-index: 30;
  box-shadow: 0 -6px 16px rgba(15, 23, 42, 0.06);
}

/* Attachment Options (nested under form); smaller than Template / Signature panels */
.page-send-email h3.email-page-section-heading {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
  margin: 0 0 14px;
  color: #111827;
}

/* Save New Template & Email Signature — direct children of section.panel */
.page-send-email section.panel > h3.email-page-section-heading {
  font-size: 24px;
}

#sendEmailForm,
#saveTemplateForm {
  font-size: 14px;
}

#sendEmailForm .contact-modal-field-label,
#saveTemplateForm .contact-modal-field-label {
  font-size: 14px;
}

#sendEmailForm input,
#sendEmailForm select,
#sendEmailForm textarea,
#sendEmailForm button,
#saveTemplateForm input,
#saveTemplateForm select,
#saveTemplateForm textarea,
#saveTemplateForm button {
  font-size: 14px;
}

#sendEmailForm .contact-modal-actions button,
#saveTemplateForm .contact-modal-actions button {
  padding: 9px 12px;
}

#sendEmailForm .contact-modal-actions button[type="submit"],
#saveTemplateForm .contact-modal-actions button[type="submit"] {
  background: #1e5fbf;
  color: #ffffff;
  border-color: #1a54a8;
}

#sendEmailForm .contact-modal-actions button[type="submit"]:hover,
#saveTemplateForm .contact-modal-actions button[type="submit"]:hover {
  background: #1a54a8;
}

#emailAttachmentList .document-attach,
#emailAttachmentList .document-name,
#emailAttachmentList .document-meta {
  font-size: 11px;
}

#emailAttachmentList.documents-list {
  grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
  gap: 4px;
  align-items: stretch;
  max-height: min(32vh, 220px);
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 2px;
}

#emailAttachmentList .document-row {
  padding: 4px 6px;
  border-radius: 4px;
}

#emailAttachmentList .email-attach-tile {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 0;
  min-height: 0;
  box-sizing: border-box;
}

#emailAttachmentList .document-attach {
  width: 100%;
  align-items: flex-start;
  gap: 5px;
  font-size: 11px;
}

#emailAttachmentList .document-attach input[type="checkbox"],
#emailAttachmentList .email-attach-checkbox {
  flex-shrink: 0;
  margin-top: 1px;
  width: 13px;
  height: 13px;
  min-width: 13px;
  min-height: 13px;
}

#emailAttachmentList .email-attach-filename {
  flex: 1;
  min-width: 0;
  word-break: break-word;
  line-height: 1.25;
  font-size: 11px;
  font-weight: 600;
  color: #334155;
}

/* Computer / local files — checkbox + stacked text; Remove below */
#emailAttachmentList .email-local-tile-main {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
}

#emailAttachmentList .email-local-attach-inner {
  flex-direction: row;
  align-items: flex-start;
  gap: 6px;
  cursor: pointer;
}

#emailAttachmentList .email-local-text-stack {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

#emailAttachmentList .email-local-attach-badge {
  align-self: flex-start;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #1e40af;
  background: #dbeafe;
  border-radius: 3px;
  padding: 1px 4px;
}

#emailAttachmentList .email-local-meta {
  font-size: 10px;
  font-weight: 500;
  color: #64748b;
}

#emailAttachmentList .email-local-remove-btn {
  margin-top: 4px;
  width: 100%;
  padding: 3px 6px;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.2;
  color: #b91c1c;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 4px;
  cursor: pointer;
}

#emailAttachmentList .email-local-remove-btn:hover {
  background: #fee2e2;
  border-color: #fca5a5;
}

#emailAttachmentList .email-local-remove-btn:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}

/* Library docs on Send Email — same compact tile + Remove (deletes server copy) */
#emailAttachmentList .email-library-tile-main {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
}

#emailAttachmentList .email-library-attach-tile .document-attach {
  align-items: flex-start;
  gap: 6px;
}

#emailAttachmentList .email-library-remove-btn {
  width: 100%;
  padding: 3px 6px;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.2;
  color: #b91c1c;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 4px;
  cursor: pointer;
}

#emailAttachmentList .email-library-remove-btn:hover {
  background: #fee2e2;
  border-color: #fca5a5;
}

#emailAttachmentList .email-library-remove-btn:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}

.email-attachments-wrap input[type="file"] {
  font-size: 13px;
}

.email-attachments-wrap input[type="file"]::file-selector-button,
.email-attachments-wrap input[type="file"]::-webkit-file-upload-button {
  font-size: 12px;
  padding: 5px 10px;
  margin-right: 8px;
}

#sendEmailForm .email-subject-box,
#sendEmailForm .email-body-box {
  grid-column: 1 / -1;
}

#emailSignatureForm textarea {
  min-height: 120px;
}

.page-settings #emailSignatureEditor.email-signature-editor {
  min-height: 300px;
  max-height: min(560px, 55vh);
}

.email-signature-editor {
  min-height: 140px;
  border: 1px solid #d9dee9;
  border-radius: 4px;
  padding: 10px;
  background: #ffffff;
  line-height: 1.4;
  font-size: 14px;
  overflow: auto;
  resize: both;
}

.email-signature-toolbar,
.email-rich-toolbar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.email-signature-toolbar button,
.email-signature-toolbar select,
.email-rich-toolbar button,
.email-rich-toolbar select {
  width: auto;
  margin-top: 0;
  padding: 5px 10px;
  font-size: 13px;
}

/* B / I / U — same footprint; nested strong/em/u must not enlarge the glyph */
.email-rich-toolbar button strong,
.email-rich-toolbar button em,
.email-rich-toolbar button u,
.email-signature-toolbar button strong,
.email-signature-toolbar button em,
.email-signature-toolbar button u {
  font: inherit;
  line-height: 1;
}

#emailBodyBoldBtn,
#emailBodyItalicBtn,
#emailBodyUnderlineBtn,
#templateBodyBoldBtn,
#templateBodyItalicBtn,
#templateBodyUnderlineBtn,
#signatureBoldBtn,
#signatureItalicBtn,
#signatureUnderlineBtn {
  min-width: 2.1rem;
  padding: 5px 8px;
  text-align: center;
  line-height: 1.2;
}

#emailBodyBoldBtn,
#templateBodyBoldBtn,
#signatureBoldBtn {
  font-weight: 800;
}

#emailBodyItalicBtn,
#templateBodyItalicBtn,
#signatureItalicBtn {
  font-style: italic;
  font-weight: 600;
}

#emailBodyUnderlineBtn,
#templateBodyUnderlineBtn,
#signatureUnderlineBtn {
  text-decoration: underline;
  font-weight: 600;
}

#signatureInsertPhotoBtn,
#signatureInsertGraphicUrlBtn {
  background: #eef4ff;
  border: 1px solid #c7d7f7;
  color: #1f3f7a;
}

#signatureInlineFontSize,
.signature-merge-field-select {
  padding: 3px 6px;
  font-size: 11px;
  min-width: 11rem;
  max-width: 14rem;
}

.email-signature-toolbar-label {
  font-size: 12px;
  font-weight: 600;
  color: #374151;
  margin: 0;
  white-space: nowrap;
}

#signatureInlineColor {
  width: 34px;
  min-width: 34px;
  height: 28px;
  padding: 2px;
}

.page-send-email #emailBodyInsertPhotoBtn,
.page-send-email #emailBodyInsertRobotBtn,
.page-send-email #emailBodyInsertGraphicUrlBtn,
.page-send-email #templateBodyInsertPhotoBtn,
.page-send-email #templateBodyInsertRobotBtn,
.page-send-email #templateBodyInsertGraphicUrlBtn {
  background: #eef4ff;
  border: 1px solid #c7d7f7;
  color: #1f3f7a;
}

.page-send-email #emailBodyInlineFontSize,
.page-send-email #templateBodyInlineFontSize {
  min-width: 88px;
}

.page-send-email #emailBodyInlineColor,
.page-send-email #templateBodyInlineColor {
  width: 30px;
  min-width: 30px;
  height: 30px;
  margin-top: 0;
  padding: 5px;
  border: 1px solid #cdd8ee;
  border-radius: 10px;
  cursor: pointer;
  vertical-align: middle;
  box-sizing: border-box;
}

.page-send-email #emailBodyInlineColor::-webkit-color-swatch-wrapper,
.page-send-email #templateBodyInlineColor::-webkit-color-swatch-wrapper {
  padding: 0;
}

.page-send-email #emailBodyInlineColor::-webkit-color-swatch,
.page-send-email #templateBodyInlineColor::-webkit-color-swatch {
  border: none;
  border-radius: 4px;
}

.page-send-email #emailBodyInlineColor::-moz-color-swatch,
.page-send-email #templateBodyInlineColor::-moz-color-swatch {
  border: none;
  border-radius: 4px;
}

.page-send-email .email-rich-image-url {
  width: 100%;
  margin-top: 8px;
  padding: 6px 8px;
  border: 1px solid #d9dee9;
  border-radius: 4px;
  font-size: 13px;
  box-sizing: border-box;
}

/* Agile CRM–style compose layout */
.agile-email-compose-panel {
  margin-bottom: 24px;
  max-width: 1080px;
  margin-inline: auto;
  border-radius: 14px;
  box-shadow: 0 14px 28px rgba(79, 70, 229, 0.14);
  border: 1px solid #ddd6fe;
  background: linear-gradient(180deg, #faf8ff 0%, #ffffff 70%);
  padding: 18px 20px;
}

.agile-email-section-title {
  margin: 0 0 16px;
  font-size: 18px;
  font-weight: 600;
  color: #1e293b;
  border-bottom: 1px solid #e2e8f0;
  padding-bottom: 8px;
}

.agile-email-field-row {
  display: grid;
  grid-template-columns: minmax(96px, 120px) minmax(0, 1fr);
  gap: 8px 12px;
  align-items: center;
  margin-bottom: 8px;
}

.agile-email-field-row select,
.agile-email-field-row input[type="text"] {
  width: 100%;
  box-sizing: border-box;
}

.agile-label-required::after {
  content: " *";
  color: #c62828;
}

.agile-to-cc-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(180px, 260px);
  gap: 8px;
  align-items: end;
}

.agile-to-cc-item {
  min-width: 0;
}

.agile-to-cc-item .contact-modal-field-label {
  margin-bottom: 4px;
}

.agile-email-template-row {
  display: grid;
  grid-template-columns: minmax(96px, 120px) minmax(0, 1fr);
  gap: 8px 12px;
  align-items: center;
  margin-bottom: 8px;
}

.agile-template-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.agile-template-controls select {
  flex: 1;
  min-width: 180px;
}

.agile-link-action {
  white-space: nowrap;
  font-size: 14px;
  color: #ffffff;
  text-decoration: underline;
}

.agile-link-action:hover {
  color: #e2e8f0;
}

#bulkTagsModal .contact-modal-card {
  width: min(460px, calc(100% - 24px));
  margin: 72px auto;
  padding: 10px 12px;
}

#bulkTagsModal .contact-modal-header {
  margin-bottom: 6px;
}

#bulkTagsModal .contact-modal-header h3 {
  font-size: 20px;
}

#bulkTagsModal .contact-modal-form {
  max-height: none;
  overflow: visible;
  gap: 6px;
  padding-right: 0;
}

#bulkTagsModal .contact-modal-field-label {
  font-size: 15px;
}

#bulkTagsModal input,
#bulkTagsModal button {
  font-size: 15px;
}

#bulkStatusModal .contact-modal-card {
  width: min(340px, calc(100% - 24px));
  margin: 72px auto;
  padding: 10px 12px;
}

#bulkStatusModal .contact-modal-header {
  margin-bottom: 6px;
}

#bulkStatusModal .contact-modal-header h3 {
  font-size: 18px;
}

#bulkStatusModal .contact-modal-form {
  max-height: none;
  overflow: visible;
  gap: 6px;
  padding-right: 0;
}

#bulkStatusModal .contact-modal-field-label {
  font-size: 14px;
}

#bulkStatusModal select,
#bulkStatusModal button {
  font-size: 14px;
}

#bulkStatusModal .contact-modal-actions {
  justify-content: flex-end;
}

.agile-email-message-box .agile-email-rich-toolbar {
  margin-bottom: 8px;
  position: sticky;
  top: 10px;
  z-index: 20;
  background: #ffffff;
  border: 1px solid #d9dee9;
  border-radius: 8px;
  padding: 8px;
}

.agile-toolbar-select {
  min-width: 110px;
}

.page-send-email #emailToolbarAttachBtn {
  background: #eef4ff;
  border: 1px solid #c7d7f7;
  color: #1f3f7a;
}

.page-send-email #emailToolbarAttachBtn:hover {
  background: #e3edff;
}

.agile-email-compose-panel .email-attachments-wrap {
  margin-top: 10px;
  padding: 10px 12px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
}

#sendEmailForm #emailBodyEditor {
  min-height: 180px;
  max-height: 340px;
  color: #0f172a;
}

#sendEmailForm #emailBodyEditor .signature-image-wrap {
  display: block;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.agile-email-footer-meta {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid #e8ecf4;
}

.agile-tracking-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #64748b;
  cursor: default;
}

.agile-tracking-row input[disabled] {
  cursor: not-allowed;
}

.agile-tracking-block {
  margin-top: 10px;
}

.agile-tracking-hint {
  margin: 6px 0 0;
  max-width: 42rem;
  font-size: 0.85rem;
  line-height: 1.45;
}

.page-send-email .agile-tracking-hint {
  max-width: none;
  white-space: nowrap;
}

.email-signature-preview-wrap {
  margin-bottom: 12px;
  padding: 10px 12px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #f8fafc;
}

.email-include-signature-row {
  margin-bottom: 10px;
}

.email-include-signature-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #fff;
  color: #475569;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.email-include-signature-btn-label {
  line-height: 1.2;
}

.email-include-signature-btn:hover {
  border-color: #94a3b8;
  background: #f8fafc;
}

.email-include-signature-btn.is-active {
  border-color: #2563eb;
  background: #eff6ff;
  color: #1d4ed8;
  box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.18);
}

.email-signature-preview-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #64748b;
  margin-bottom: 4px;
}

.email-signature-enabled-check {
  display: none;
  align-items: center;
  gap: 4px;
  color: #16a34a;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding-left: 10px;
  border-left: 1px solid rgba(37, 99, 235, 0.22);
}

.email-include-signature-btn:not(.is-active) .email-signature-enabled-check {
  display: none !important;
}

.email-signature-enabled-check.is-visible,
.email-signature-enabled-check:not([hidden]) {
  display: inline-flex;
}

.email-signature-enabled-check-icon {
  display: block;
  flex-shrink: 0;
}

.email-signature-enabled-check-text {
  color: #15803d;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.68rem;
}

.email-signature-preview {
  font-size: 0.9rem;
  line-height: 1.45;
  color: #1e293b;
  margin-bottom: 6px;
  white-space: pre-wrap;
}

.email-signature-preview.is-empty {
  color: #b45309;
}

.email-signature-preview.is-muted {
  color: #64748b;
  font-style: italic;
}

.email-compose-merge-select {
  min-width: 10rem;
  max-width: 14rem;
  color: #0f172a;
  background: #ffffff;
}

.email-compose-merge-select option,
.signature-merge-field-select option,
#templateMergeFieldSelect option,
.email-merge-field-option {
  color: #0f172a;
  background: #ffffff;
}

.email-merge-field-group-label,
.email-rich-toolbar select option.email-merge-field-group-label,
#templateMergeFieldSelect option.email-merge-field-group-label {
  color: #1e3a8a;
  background: #e2e8f0;
  font-weight: 700;
}

.email-rich-toolbar select optgroup,
.signature-merge-field-select optgroup,
#templateMergeFieldSelect optgroup {
  color: #334155;
  background: #f8fafc;
  font-weight: 700;
}

body.email-send-modal-open {
  overflow: hidden;
}

.email-send-confirm-modal {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.email-send-confirm-modal[hidden] {
  display: none;
}

.email-send-confirm-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
}

.email-send-confirm-panel {
  position: relative;
  width: min(100%, 480px);
  background: #ffffff;
  border-radius: 12px;
  border: 1px solid #cbd5e1;
  box-shadow: 0 20px 40px rgba(15, 23, 42, 0.18);
  padding: 20px 22px 18px;
}

.email-send-confirm-title {
  margin: 0 0 14px;
  font-size: 1.15rem;
  color: #0f172a;
}

.email-send-confirm-list {
  margin: 0 0 12px;
  display: grid;
  gap: 8px;
}

.email-send-confirm-list > div {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr);
  gap: 8px;
  align-items: baseline;
}

.email-send-confirm-list dt {
  margin: 0;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #64748b;
}

.email-send-confirm-list dd {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.45;
  color: #0f172a;
  word-break: break-word;
}

.email-send-confirm-warn {
  margin: 0 0 10px;
  padding: 8px 10px;
  border-radius: 8px;
  background: #fff7ed;
  border: 1px solid #fed7aa;
  color: #9a3412;
  font-size: 0.88rem;
  line-height: 1.4;
}

.email-send-confirm-tracking {
  margin: 0 0 14px;
  font-size: 0.88rem;
  color: #166534;
  font-weight: 600;
}

.email-send-confirm-tracking.is-off {
  color: #64748b;
  font-weight: 500;
}

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

.agile-email-send-actions {
  justify-content: flex-start;
  gap: 10px;
  margin-top: 12px;
}

.agile-email-send-actions .email-send-inline-status {
  margin-left: auto;
  align-self: center;
  font-size: 14px;
  font-weight: 600;
  color: #1b5e20;
  min-height: 20px;
}

.agile-email-send-actions #message {
  margin-top: 0;
  margin-bottom: 0;
}

#sendEmailForm.agile-email-form .agile-cancel-btn {
  background: #ffffff;
  color: #334155;
  border: 1px solid #cbd5e1;
}

#sendEmailForm.agile-email-form .agile-cancel-btn:hover {
  background: #f8fafc;
  border-color: #94a3b8;
  color: #1e293b;
}

.page-send-email .email-rich-image-actions button {
  width: auto;
  margin-top: 6px;
}

.page-send-email .email-body-image-file-field {
  margin-top: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.page-send-email .email-body-image-file-input {
  display: none;
}

.page-send-email .email-body-image-file-label {
  display: inline-block;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  padding: 5px 10px;
  margin: 0;
  border: 1px solid #94a3b8;
  border-radius: 6px;
  background: #f8fafc;
  color: #1e293b;
  line-height: 1.3;
  user-select: none;
}

.page-send-email .email-body-image-file-label:hover {
  background: #e2e8f0;
  border-color: #64748b;
}

.page-send-email .email-body-image-file-field:focus-within .email-body-image-file-label {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}

.page-send-email .email-template-body-box {
  grid-column: 1 / -1;
}

.email-templates-groups {
  display: block;
}

.email-templates-page {
  display: flex;
  flex-direction: column;
}

.email-templates-page #starterTemplatesSection,
.email-templates-page .et-gallery-section {
  order: 0;
}

.email-templates-page .email-templates-workspace-banner {
  order: 1;
}

.email-templates-page #createEmailTemplateSection {
  order: 2;
}

/* Load for Edit: keep compact — global `button { width:100% }` + grid stretch
   was turning this into a giant vertical pill beside the starter gallery. */
.email-templates-page .email-template-load-box {
  grid-column: 1 / -1;
  align-self: start;
}

.email-templates-page .email-template-load-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.email-templates-page .email-template-load-controls select {
  flex: 1 1 240px;
  min-width: 0;
  width: auto;
  margin-top: 0;
}

.email-templates-page .email-template-load-controls button,
.email-templates-page #loadTemplateForEditBtn,
.email-templates-page #cancelTemplateEditBtn {
  width: auto !important;
  min-width: 0;
  max-width: none;
  height: auto !important;
  min-height: 0;
  max-height: none;
  flex: 0 0 auto;
  align-self: center;
  margin-top: 0;
  white-space: nowrap;
}

.email-templates-page #templateLivePreviewToggleBtn {
  width: auto;
  max-width: 100%;
  flex: 0 0 auto;
  margin: 0;
}

.email-templates-page #savedEmailTemplatesSection {
  order: 3;
}

.email-templates-page .email-templates-topbar {
  order: -1;
}

.email-templates-page .template-subject-hint {
  margin: 6px 0 0;
  font-size: 0.85rem;
}

.email-templates-page .template-subject-hint.is-muted {
  color: #94a3b8;
}

.email-templates-page .template-subject-char-count {
  margin: 4px 0 0;
  font-size: 0.8rem;
  color: #64748b;
}

.email-templates-page .template-subject-char-count.is-over-ideal {
  color: #b45309;
  font-weight: 600;
}

.email-templates-page .template-subject-char-count.is-long {
  color: #b91c1c;
}

.email-rich-toolbar--grouped {
  gap: 10px 12px;
}

.email-rich-toolbar-group {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #f8fafc;
}

.email-rich-toolbar-more {
  display: inline-block;
  border: 1px dashed #cbd5e1;
  border-radius: 8px;
  padding: 0 8px;
  background: #ffffff;
}

.email-rich-toolbar-more > summary {
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  color: #475569;
  padding: 6px 4px;
  list-style: none;
}

.email-rich-toolbar-more > summary::-webkit-details-marker {
  display: none;
}

.email-rich-toolbar-more-body {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 0 0 8px;
}

.email-templates-browser {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

.email-templates-browser.is-category-collapsed .email-template-pick-category-hint {
  margin: 4px 0 0;
  font-size: 0.9rem;
}

.email-template-categories {
  border: none;
  border-radius: 10px;
  background: #f8fafc;
  padding: 8px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.email-template-category-create-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
}

.email-template-category-create-toggle {
  border: 1px dashed #6366f1;
  border-radius: 10px;
  background: #eef2ff;
  color: #4338ca;
  font-size: 0.92rem;
  font-weight: 700;
  padding: 10px 14px;
  cursor: pointer;
}

.email-template-category-create-toggle:hover {
  background: #e0e7ff;
}

.email-template-category-create-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.email-template-category-create-form input {
  min-width: 220px;
  flex: 1 1 220px;
  padding: 10px 12px;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  font-size: 0.92rem;
}

.email-template-category-create-form button[type="submit"] {
  padding: 10px 14px;
  border: none;
  border-radius: 10px;
  background: #4f46e5;
  color: #fff;
  font-weight: 700;
  cursor: pointer;
}

.email-template-category-create-feedback {
  font-size: 0.88rem;
  font-weight: 600;
  color: #047857;
}

.email-template-category-field-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.email-template-category-field-wrap input {
  flex: 1 1 220px;
  min-width: 0;
}

.email-template-category-create-inline-btn {
  flex: 0 0 auto;
  padding: 10px 12px;
  border: 1px solid #c7d2fe;
  border-radius: 10px;
  background: #eef2ff;
  color: #4338ca;
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
}

.email-template-category-create-inline-btn:hover {
  background: #e0e7ff;
}

.email-template-table-pane {
  grid-column: 1 / -1;
}

.email-template-category-btn {
  width: auto;
  flex: 0 0 auto;
  margin-top: 0;
  padding: 12px 14px;
  border: 1px solid #1d4ed8;
  border-radius: 10px;
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  font-size: 14px;
  color: #ffffff;
}

.email-template-category-btn.is-active {
  border-color: #4338ca;
  background: linear-gradient(135deg, #4f46e5, #4338ca);
  color: #ffffff;
  font-weight: 700;
}

.email-template-category-btn strong {
  font-size: 24px;
  line-height: 1;
  color: rgba(255, 255, 255, 0.92);
}

.email-template-category-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.92);
}

.email-template-categories .email-template-category-btn:nth-of-type(6n + 1) {
  border-color: #1d4ed8;
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
}

.email-template-categories .email-template-category-btn:nth-of-type(6n + 2) {
  border-color: #4338ca;
  background: linear-gradient(135deg, #4f46e5, #4338ca);
}

.email-template-categories .email-template-category-btn:nth-of-type(6n + 3) {
  border-color: #d97706;
  background: linear-gradient(135deg, #f59e0b, #d97706);
}

.email-template-categories .email-template-category-btn:nth-of-type(6n + 4) {
  border-color: #ea580c;
  background: linear-gradient(135deg, #f97316, #ea580c);
}

.email-template-categories .email-template-category-btn:nth-of-type(6n + 5) {
  border-color: #0f766e;
  background: linear-gradient(135deg, #0d9488, #0f766e);
}

.email-template-categories .email-template-category-btn:nth-of-type(6n + 6) {
  border-color: #dc2626;
  background: linear-gradient(135deg, #ef4444, #dc2626);
}

.email-template-categories .email-template-category-btn:nth-of-type(6n + 1).is-active {
  background: linear-gradient(135deg, #1d4ed8, #1e40af);
}

.email-template-categories .email-template-category-btn:nth-of-type(6n + 2).is-active {
  background: linear-gradient(135deg, #4338ca, #312e81);
}

.email-template-categories .email-template-category-btn:nth-of-type(6n + 3).is-active {
  background: linear-gradient(135deg, #d97706, #b45309);
}

.email-template-categories .email-template-category-btn:nth-of-type(6n + 4).is-active {
  background: linear-gradient(135deg, #ea580c, #c2410c);
}

.email-template-categories .email-template-category-btn:nth-of-type(6n + 5).is-active {
  background: linear-gradient(135deg, #0f766e, #115e59);
}

.email-template-categories .email-template-category-btn:nth-of-type(6n + 6).is-active {
  background: linear-gradient(135deg, #dc2626, #b91c1c);
}

.email-template-table-pane {
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #ffffff;
}

.email-template-table-head {
  padding: 10px 12px;
  border-bottom: 1px solid #e2e8f0;
  background: #f8fafc;
  font-size: 14px;
  color: #0f172a;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.email-template-search-input {
  width: 280px;
  max-width: 100%;
  margin-top: 0;
  font-size: 13px;
  padding: 6px 8px;
}

.email-template-group-table-wrap {
  overflow-x: auto;
}

.email-template-group-table {
  width: 100%;
  border-collapse: collapse;
}

.email-template-group-table th,
.email-template-group-table td {
  padding: 10px 12px;
  border-bottom: 1px solid #eef2f7;
  font-size: 13px;
  text-align: left;
  vertical-align: top;
}

.email-template-group-table th {
  font-weight: 700;
  color: #334155;
  background: #f8fafc;
}

.email-template-group-table tbody tr:last-child td {
  border-bottom: none;
}

.email-template-list-action-cell {
  width: 140px;
  text-align: right;
}

.email-template-list-action-buttons {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}

.email-template-list-edit-btn {
  width: auto;
  margin-top: 0;
  padding: 4px 10px;
  font-size: 12px;
}

@media (max-width: 900px) {
  .email-templates-browser {
    grid-template-columns: 1fr;
  }
}

.email-rich-editor.email-signature-editor {
  margin-top: 10px;
  min-height: 160px;
}

.email-templates-page .email-template-body-box .email-rich-toolbar {
  position: sticky;
  top: 10px;
  z-index: 15;
  background: #ffffff;
  border: 1px solid #d9dee9;
  border-radius: 8px;
  padding: 8px;
}

.email-rich-toolbar-grid-cluster {
  display: inline-flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 8px;
}

.email-templates-page .email-rich-toolbar-grid-color-label {
  margin: 0;
  font-size: 13px;
  font-weight: 500;
  color: #334155;
  white-space: nowrap;
}

.email-templates-page #templateBodyGridColor {
  width: 34px;
  min-width: 34px;
  height: 28px;
  padding: 2px;
  flex-shrink: 0;
}

.email-templates-page #saveTemplateForm.contact-modal-form {
  max-height: none;
  overflow: visible;
}

.email-templates-page #templateBodyEditor {
  min-height: 300px;
  max-height: 720px;
  overflow-y: auto;
  color: #0f172a;
  font-size: 15px;
  line-height: 1.45;
}

.email-templates-page #templateBodyEditor.email-signature-editor:empty::before {
  font-size: 1.05rem;
}

.email-templates-page #templateBodyEditor ul,
.email-templates-page #templateBodyEditor ol {
  margin: 8px 0;
  padding-left: 1.5em;
}

.email-templates-page #templateBodyEditor li {
  margin: 2px 0;
}

/* Full-width row for inserted images so width:100% / max-width caps match the editor (inline-block shrink-wrap was keeping images narrow). */
.email-templates-page #templateBodyEditor .signature-image-wrap {
  display: block;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.email-templates-page #templateBodyEditor a[data-cadence-cta],
.email-templates-page #templateBodyEditor a[data-cadence-cta]:visited,
.email-templates-page #templateBodyEditor a[data-cadence-cta]:focus,
.email-templates-page #templateBodyEditor a[data-cadence-cta]:active {
  text-decoration: none;
  cursor: text;
}

.email-signature-editor:empty::before {
  content: attr(data-placeholder);
  color: #94a3b8;
}

.email-signature-editor img {
  max-width: 100%;
  height: auto;
  display: block;
  margin-top: 6px;
}

.signature-image-wrap {
  display: inline-block;
  resize: both;
  overflow: auto;
  max-width: 100%;
  min-width: 50px;
  min-height: 30px;
  border: 1px dashed #cbd5e1;
  margin-top: 6px;
  cursor: move;
}

.signature-image-wrap.is-dragging {
  opacity: 0.6;
}

.signature-image-wrap img {
  /* Override inline width:auto from editor HTML so resizing the wrapper also resizes image. */
  width: 100% !important;
  max-width: 100% !important;
  height: auto;
  max-height: none;
  margin-top: 0;
}

/* Floating "Image size" bar shown when an image is clicked in a rich editor. */
.rte-image-size-bar {
  position: absolute;
  display: none;
  z-index: 9999;
  gap: 4px;
  align-items: center;
  background: #1e293b;
  color: #ffffff;
  padding: 4px 6px;
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.28);
  font-size: 12px;
  line-height: 1;
}
.rte-image-size-bar .rte-image-size-label {
  opacity: 0.75;
  margin: 0 4px 0 2px;
  font-weight: 600;
}
.rte-image-size-bar button {
  background: #334155;
  color: #ffffff;
  border: 1px solid #475569;
  border-radius: 6px;
  padding: 4px 9px;
  cursor: pointer;
  font-size: 12px;
  line-height: 1;
}
.rte-image-size-bar button:hover {
  background: #4f46e5;
  border-color: #4f46e5;
}
.rte-image-size-bar input[type="number"] {
  width: 58px;
  background: #0f172a;
  color: #ffffff;
  border: 1px solid #475569;
  border-radius: 6px;
  padding: 4px 6px;
  font-size: 12px;
  line-height: 1;
  text-align: right;
}
.rte-image-size-bar .rte-image-size-unit {
  opacity: 0.75;
  margin-right: 2px;
}
.rte-image-size-bar button[data-img-step] {
  min-width: 26px;
  font-weight: 700;
  padding: 4px 8px;
}

.rte-image-size-bar button[data-img-link].is-linked {
  background: #4f46e5;
  border-color: #6366f1;
  color: #ffffff;
}

/* Outline the image currently being sized so it's obvious what's selected. */
.signature-image-wrap.rte-image-selected {
  outline: 2px solid #4f46e5;
  outline-offset: 2px;
}

#emailSignatureForm .contact-modal-grid input,
#emailSignatureForm .contact-modal-grid select,
#emailSignatureForm .document-attach,
#emailSignatureForm .contact-modal-actions button {
  font-size: 14px;
}

#emailSignatureForm .contact-modal-actions button[type="submit"] {
  background: #1e5fbf;
  color: #ffffff;
  border-color: #1a54a8;
}

#emailSignatureForm .contact-modal-actions button[type="submit"]:hover {
  background: #1a54a8;
}

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

  .contacts-layout {
    grid-template-columns: 1fr;
  }

  .quick-filters {
    position: static;
  }

  .active-filters-row {
    flex-direction: column;
    align-items: flex-start;
  }

  .contact-details-layout {
    grid-template-columns: 1fr;
  }

  .contact-summary-workspace {
    grid-template-columns: 1fr;
  }

  .contact-summary-ai-column {
    position: static;
  }

  .contact-summary-grid {
    grid-template-columns: 1fr;
  }

  .contact-history-list {
    max-height: none;
  }

  .home-summary-grid {
    grid-template-columns: 1fr 1fr;
  }

  .home-main-grid {
    grid-template-columns: 1fr;
  }

  .home-distribution-wrap {
    flex-direction: column;
    align-items: flex-start;
  }

  .campaign-saved-layout {
    grid-template-columns: 1fr;
  }
}

#addContactForm button[type="submit"],
#smsForm button[type="submit"] {
  width: auto;
  justify-self: start;
  padding: 4px 10px;
  font-size: 12px;
}

.journey-page .journey-board-panel {
  overflow: auto;
  max-width: 100%;
}

.journey-editor-layout {
  display: grid;
  grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.journey-editor-sidebar {
  position: sticky;
  top: 12px;
  display: grid;
  gap: 12px;
}

.journey-step-palette,
.journey-settings-panel {
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  background: #ffffff;
  padding: 14px 12px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
}

.journey-settings-panel {
  padding: 0;
  overflow: hidden;
}

.journey-settings-panel summary {
  list-style: none;
  cursor: pointer;
  padding: 12px 14px;
  font-size: 13px;
  font-weight: 800;
  color: #0f172a;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
}

.journey-settings-panel summary::-webkit-details-marker {
  display: none;
}

.journey-settings-panel summary::after {
  content: "v";
  float: right;
  color: #64748b;
}

.journey-settings-panel:not([open]) summary::after {
  content: ">";
}

.journey-settings-panel .journey-campaign-meta-form {
  padding: 12px 14px 14px;
}

.journey-palette-title {
  margin: 0 0 4px;
  font-size: 14px;
  font-weight: 700;
  color: #0f172a;
}

.journey-palette-hint {
  margin: 0 0 12px;
  font-size: 12px;
  line-height: 1.35;
  color: #64748b;
}

.journey-palette-items {
  display: grid;
  gap: 8px;
}

.journey-palette-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #f8fafc;
  padding: 10px;
  cursor: grab;
  transition:
    border-color 140ms ease,
    box-shadow 140ms ease,
    transform 140ms ease;
}

.journey-palette-item:hover {
  border-color: #c7d2fe;
  box-shadow: 0 6px 16px rgba(99, 102, 241, 0.12);
  transform: translateY(-1px);
}

.journey-palette-item:active {
  cursor: grabbing;
}

.journey-palette-item-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  background: #eef2ff;
  flex: 0 0 36px;
}

.journey-palette-item-icon svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.journey-palette-item[data-step-type="email"] .journey-palette-item-icon {
  color: #0369a1;
}

.journey-palette-item[data-step-type="sms"] .journey-palette-item-icon {
  background: #f5f3ff;
  color: #5b21b6;
}

.journey-palette-item[data-step-type="call"] .journey-palette-item-icon {
  background: #fffbeb;
  color: #b45309;
}

.journey-palette-item[data-step-type="condition"] .journey-palette-item-icon {
  background: #fef3c7;
  color: #92400e;
}

.journey-palette-item-text {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.journey-palette-item-text strong {
  font-size: 13px;
  color: #0f172a;
}

.journey-palette-item-text span {
  font-size: 11px;
  color: #64748b;
}

.journey-board-wrap {
  min-width: 0;
}

.journey-board {
  position: relative;
  width: 100%;
  min-width: 100%;
  min-height: 430px;
  border: 1px solid #dbe2ef;
  border-radius: 12px;
  background:
    radial-gradient(circle, rgba(100, 116, 139, 0.22) 1px, transparent 1.4px) 0 0 / 22px 22px,
    linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  overflow: visible;
}

.journey-board--flow {
  background:
    radial-gradient(circle, rgba(100, 116, 139, 0.2) 1px, transparent 1.4px) 0 0 / 22px 22px,
    radial-gradient(circle at 50% 0%, rgba(99, 102, 241, 0.06), transparent 42%),
    linear-gradient(180deg, #fafbff 0%, #f1f5f9 100%);
  padding: 16px 12px 32px;
}

.journey-flow-drop-slot {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: min(360px, calc(100% - 24px));
  height: 14px;
  border-radius: 8px;
  z-index: 1;
  pointer-events: auto;
}

.journey-flow-drop-slot.is-drag-over {
  background: rgba(99, 102, 241, 0.14);
  outline: 2px dashed #818cf8;
  outline-offset: 2px;
}

.journey-flow-connector {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 22px;
  background: #cbd5e1;
  z-index: 1;
  pointer-events: none;
}

.journey-flow-connector::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -4px;
  transform: translateX(-50%);
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid #cbd5e1;
}

.journey-flow-add-wrap {
  position: absolute;
  left: calc(50% + 36px);
  transform: translateX(-50%);
  z-index: 4;
  display: flex;
  justify-content: center;
  pointer-events: none;
}

.journey-flow-add-btn {
  pointer-events: auto;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 2px solid #c7d2fe;
  background: #ffffff;
  color: #4f46e5;
  font-size: 18px;
  line-height: 1;
  font-weight: 500;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(99, 102, 241, 0.18);
  transition:
    transform 120ms ease,
    border-color 120ms ease,
    background 120ms ease;
}

.journey-flow-add-btn:hover {
  transform: scale(1.06);
  border-color: #818cf8;
  background: #eef2ff;
}

.journey-add-step-menu {
  position: fixed;
  z-index: 3100;
  min-width: 160px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #ffffff;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.16);
  padding: 6px;
  display: grid;
  gap: 4px;
}

.journey-add-step-menu button {
  text-align: left;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #f8fafc;
  padding: 8px 10px;
  font-size: 12px;
  font-weight: 600;
  color: #1e293b;
  cursor: pointer;
}

.journey-add-step-menu button:hover {
  background: #eef2ff;
  border-color: #c7d2fe;
}

.journey-board-connections {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* Draw above node cards so links stay visible when a node overlaps the arrow;
     pointer-events none lets clicks reach nodes; paths use pointer-events: stroke. */
  z-index: 3;
  pointer-events: none;
}

.journey-link-path {
  fill: none;
  stroke: #4f46e5;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: stroke;
  cursor: pointer;
}

.journey-link-delete {
  pointer-events: auto;
  cursor: pointer;
}

.journey-link-delete circle {
  fill: #ffffff;
  stroke: #cbd5e1;
  stroke-width: 1.5;
  filter: drop-shadow(0 4px 8px rgba(15, 23, 42, 0.16));
}

.journey-link-delete text {
  fill: #ef4444;
  font-size: 14px;
  font-weight: 800;
  pointer-events: none;
}

.journey-link-delete:hover circle {
  fill: #fef2f2;
  stroke: #fca5a5;
}

.journey-link-path--drag-preview {
  pointer-events: none;
  stroke-dasharray: 7 5;
  opacity: 0.9;
  stroke: #6366f1;
}

.journey-board.is-link-dragging {
  cursor: crosshair;
}

.journey-link-label {
  fill: #4338ca;
  font-size: 11px;
  font-weight: 700;
  pointer-events: none;
}

.journey-node-card {
  position: absolute;
  width: 190px;
  min-height: 74px;
  border-radius: 12px;
  border: 1px solid rgba(148, 163, 184, 0.76);
  background: linear-gradient(145deg, #ffffff 0%, #f8fafc 56%, #e2e8f0 100%);
  box-shadow:
    0 14px 24px rgba(15, 23, 42, 0.2),
    0 4px 0 rgba(100, 116, 139, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 -1px 0 rgba(148, 163, 184, 0.2);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 32px 10px 10px;
  cursor: grab;
  user-select: none;
  touch-action: none;
  z-index: 2;
  transform: translateY(0);
  transition:
    transform 140ms ease,
    box-shadow 140ms ease,
    border-color 140ms ease,
    filter 140ms ease;
}

.journey-board--flow .journey-node-card {
  width: min(360px, calc(100% - 24px));
  min-height: 68px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.07);
  cursor: grab;
}

.journey-board--flow .journey-node-card--condition {
  width: min(280px, calc(100% - 80px));
  min-height: 82px;
  border-color: #f59e0b;
  background: #fffbeb;
}

.journey-board--flow .journey-node-card--condition .journey-node-icon {
  border-radius: 8px;
  transform: rotate(45deg);
  background: #fef3c7;
  color: #92400e;
}

.journey-board--flow .journey-node-card--condition .journey-node-icon {
  font-size: 15px;
}

.journey-board--flow .journey-node-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(15, 23, 42, 0.12);
  filter: none;
}

.journey-board--flow .journey-node-card.is-dragging {
  opacity: 0.55;
  transform: scale(0.98);
}

.journey-board--flow .journey-node-card.is-flow-drop-target {
  outline: 2px solid #818cf8;
  outline-offset: 3px;
}

.journey-node-step-badge {
  position: absolute;
  top: -11px;
  left: 14px;
  min-width: 24px;
  height: 24px;
  padding: 0 7px;
  border-radius: 999px;
  background: #4f46e5;
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(79, 70, 229, 0.35);
}

.journey-node-count-badge {
  position: absolute;
  right: 46px;
  bottom: 8px;
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  border-radius: 999px;
  border: 1px solid #cbd5e1;
  background: #f8fafc;
  color: #334155;
  font-size: 11px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.journey-node-main {
  display: grid;
  gap: 4px;
  flex: 1;
  min-width: 0;
}

.journey-node-type-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #64748b;
}

.journey-node-title {
  font-size: 13px;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.journey-node-subtitle {
  font-size: 11px;
  color: #64748b;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.journey-node-menu-btn {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #f8fafc;
  color: #475569;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}

.journey-node-menu-btn:hover {
  background: #eef2ff;
  border-color: #c7d2fe;
  color: #312e81;
}

.journey-board--flow .journey-node-connector-out {
  display: none;
}

.journey-board--flow .journey-node-type,
.journey-board--flow .journey-node-view-content,
.journey-board--flow .journey-node-text,
.journey-board--flow .journey-node-body {
  display: none;
}

.journey-board--flow .journey-node-card .journey-node-title {
  text-align: left;
}

.journey-board--flow .journey-node-card .journey-node-title {
  font-size: 14px;
  font-weight: 800;
}

.journey-board--flow .journey-node-subtitle {
  max-width: calc(100% - 34px);
}

.journey-board--flow .journey-flow-connector {
  display: none;
}

.journey-board.is-connecting .journey-node-card.is-connect-target {
  outline: 2px dashed #6366f1;
  outline-offset: 3px;
  cursor: pointer;
}

.journey-node-card:hover {
  filter: saturate(1.04);
  transform: translateY(-3px);
  box-shadow:
    0 18px 30px rgba(15, 23, 42, 0.24),
    0 7px 0 rgba(100, 116, 139, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.98),
    inset 0 -1px 0 rgba(148, 163, 184, 0.18);
}

.journey-node-card.is-dragging {
  cursor: grabbing;
  transform: translateY(-5px) scale(1.015);
  box-shadow:
    0 24px 36px rgba(15, 23, 42, 0.3),
    0 8px 0 rgba(100, 116, 139, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.98);
  will-change: left, top;
  /* Above connection layer so the card stays readable while dragging. */
  z-index: 5;
}

.journey-node-icon {
  width: 26px;
  height: 26px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  background: #e2e8f0;
  color: #1e293b;
  flex: 0 0 26px;
}

.journey-node-text {
  font-size: 13px;
  font-weight: 700;
  color: #1e293b;
  line-height: 1.2;
  min-height: 18px;
}

.journey-node-body {
  display: grid;
  gap: 6px;
  width: 100%;
}

.journey-node-text[contenteditable="true"] {
  outline: none;
  border-radius: 6px;
  padding: 2px 4px;
}

.journey-node-text[contenteditable="true"]:focus {
  background: #eff6ff;
  box-shadow: inset 0 0 0 1px #93c5fd;
}

.journey-node-type {
  width: 100%;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  background: #ffffff;
  color: #1f2937;
  font-size: 12px;
  padding: 3px 6px;
}

.journey-node-view-content {
  width: 100%;
  margin: 0;
  padding: 4px 8px;
  border: 1px solid #c7d2fe;
  border-radius: 6px;
  background: linear-gradient(180deg, #eef2ff 0%, #e0e7ff 100%);
  color: #3730a3;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
}

.journey-node-view-content:hover {
  border-color: #818cf8;
  color: #312e81;
}

.journey-node-view-content:focus-visible {
  outline: 2px solid #6366f1;
  outline-offset: 2px;
}

.journey-node-connector-out {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  margin: 0;
  padding: 0;
  border-radius: 999px;
  border: 2px solid #6366f1;
  background: linear-gradient(180deg, #eef2ff 0%, #e0e7ff 100%);
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.35);
  cursor: crosshair;
  flex-shrink: 0;
  z-index: 4;
  touch-action: none;
}

.journey-node-connector-out:hover {
  border-color: #4f46e5;
  background: #c7d2fe;
}

.journey-node-connector-out:focus-visible {
  outline: 2px solid #6366f1;
  outline-offset: 2px;
}

.journey-context-menu {
  position: fixed;
  z-index: 3000;
  min-width: 170px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 12px 24px rgba(2, 6, 23, 0.2);
  padding: 6px;
  display: grid;
  gap: 4px;
}

.journey-context-menu button {
  width: 100%;
  text-align: left;
  border: 1px solid #dbe2ef;
  border-radius: 6px;
  background: #f8fafc;
  color: #1e293b;
  font-size: 12px;
  padding: 6px 8px;
  cursor: pointer;
}

.journey-context-menu button:hover:not(:disabled) {
  background: #eef2ff;
  border-color: #c7d2fe;
}

.journey-context-menu button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.journey-context-menu button.danger {
  color: #991b1b;
  border-color: #fecaca;
  background: #fff1f2;
}

.journey-board.is-connecting {
  box-shadow: inset 0 0 0 2px #c7d2fe;
}

.journey-toast {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 3200;
  color: #ffffff;
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 12px;
  font-weight: 600;
  box-shadow: 0 10px 24px rgba(2, 6, 23, 0.3);
}

.journey-toast--success {
  background: #166534;
}

.journey-toast--danger {
  background: #991b1b;
}

.journey-campaign-picker-panel {
  margin-bottom: 12px;
}

.journey-campaign-subtitle {
  margin-top: 6px;
  font-weight: 600;
  color: #334155;
}

.journey-campaign-hint-col {
  margin: 0;
  padding: 12px 14px;
  align-self: start;
  border: 1px solid #dbe2ef;
  border-radius: 12px;
  background: #ffffff;
}

.journey-campaign-meta-col {
  margin: 0;
  padding: 12px 14px;
  align-self: start;
  border: 1px solid #dbe2ef;
  border-radius: 12px;
  background: #ffffff;
}

.journey-campaign-meta-title {
  margin: 0 0 10px;
  font-size: 14px;
  font-weight: 700;
  color: #0f172a;
}

.journey-campaign-meta-grid {
  display: grid;
  gap: 10px;
}

.journey-campaign-meta-field {
  display: grid;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  color: #475569;
}

.journey-campaign-meta-field input,
.journey-campaign-meta-field select {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  font: inherit;
  font-weight: 400;
  color: #0f172a;
  background: #fff;
  box-sizing: border-box;
}

.journey-campaign-meta-hint {
  margin: 10px 0 0;
  font-size: 12px;
  line-height: 1.45;
}

.journey-node-card--start {
  border-color: #86efac;
  background: linear-gradient(145deg, #ffffff 0%, #f0fdf4 54%, #bbf7d0 100%);
}
.journey-node-card--start .journey-node-icon {
  background: linear-gradient(145deg, #f0fdf4 0%, #bbf7d0 100%);
  color: #166534;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 2px 4px rgba(22, 101, 52, 0.18);
}

.journey-node-card--email {
  border-color: #7dd3fc;
  background: linear-gradient(145deg, #ffffff 0%, #f0f9ff 54%, #bae6fd 100%);
}
.journey-node-card--email .journey-node-icon {
  background: linear-gradient(145deg, #f0f9ff 0%, #bae6fd 100%);
  color: #0369a1;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 2px 4px rgba(3, 105, 161, 0.18);
}

.journey-node-card--sms {
  border-color: #c4b5fd;
  background: linear-gradient(145deg, #ffffff 0%, #f5f3ff 54%, #ddd6fe 100%);
}
.journey-node-card--sms .journey-node-icon {
  background: linear-gradient(145deg, #f5f3ff 0%, #ddd6fe 100%);
  color: #5b21b6;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 2px 4px rgba(91, 33, 182, 0.18);
}

.journey-node-card--call {
  border-color: #fde68a;
  background: linear-gradient(145deg, #ffffff 0%, #fffbeb 54%, #fde68a 100%);
}

.journey-node-card--condition {
  border-color: #f59e0b;
  background: linear-gradient(145deg, #ffffff 0%, #fffbeb 58%, #fde68a 100%);
}
.journey-node-card--condition .journey-node-icon {
  background: linear-gradient(145deg, #fffbeb 0%, #fde68a 100%);
  color: #92400e;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 2px 4px rgba(146, 64, 14, 0.18);
}
.journey-node-card--call .journey-node-icon {
  background: linear-gradient(145deg, #fffbeb 0%, #fde68a 100%);
  color: #b45309;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 2px 4px rgba(180, 83, 9, 0.18);
}

.journey-node-card--success {
  border-color: #86efac;
  background: linear-gradient(145deg, #ffffff 0%, #f0fdf4 54%, #bbf7d0 100%);
}
.journey-node-card--success .journey-node-icon {
  background: linear-gradient(145deg, #f0fdf4 0%, #bbf7d0 100%);
  color: #166534;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 2px 4px rgba(22, 101, 52, 0.18);
}

#journeyResetLayoutBtn {
  width: auto;
  min-width: 0;
  padding: 4px 10px;
  font-size: 12px;
  line-height: 1.2;
}

.journey-picker-layout {
  grid-template-columns: minmax(0, 1fr);
}

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

#journeySaveCampaignBtn {
  width: auto;
  min-width: 0;
  padding: 8px 14px;
  font-size: 13px;
  line-height: 1.2;
  background: #0f766e;
  color: #ffffff;
  border: 1px solid #0f766e;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 800;
  box-shadow: 0 8px 18px rgba(15, 118, 110, 0.18);
}

#journeySaveCampaignBtn:hover:not(:disabled) {
  background: #0d9488;
}

#journeyResetLayoutBtn,
#journeyRefreshCampaignsBtn,
#journeySandboxBtn {
  background: #ffffff;
  color: #475569;
  border-color: #cbd5e1;
}

#journeyResetLayoutBtn:hover,
#journeyRefreshCampaignsBtn:hover,
#journeySandboxBtn:hover {
  background: #f8fafc;
  color: #0f172a;
}

#journeySaveCampaignBtn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

@media (max-width: 900px) {
  .journey-editor-layout {
    grid-template-columns: 1fr;
  }

  .journey-step-palette {
    position: static;
  }

  .journey-palette-items {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .journey-palette-item {
    flex-direction: column;
    text-align: center;
    padding: 8px;
  }

  .journey-palette-item-text span {
    display: none;
  }
}

.calendar-topbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.page-calendar .container {
  padding-top: 6px;
}

.page-calendar .calendar-topbar {
  flex-direction: column;
  align-items: stretch;
  gap: 20px;
  margin: 0 0 14px;
}

.page-calendar .calendar-topbar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding-bottom: 4px;
}

.page-calendar .calendar-topbar-head h1 {
  font-size: 28px;
  line-height: 1.15;
  margin: 0;
}

.page-calendar .calendar-topbar-head .calendar-btn-primary {
  width: auto;
  margin-top: 0;
  flex-shrink: 0;
}

.page-calendar .calendar-topbar-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  width: 100%;
}

.page-calendar .calendar-period-bar {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.page-calendar .calendar-period-bar .calendar-btn-secondary,
.page-calendar .calendar-topbar-actions .calendar-btn-secondary,
.page-calendar .calendar-topbar-actions .calendar-view-tab {
  width: auto;
  margin-top: 0;
  flex: 0 0 auto;
}

.page-calendar .calendar-btn-compact {
  padding: 5px 10px;
  font-size: 0.82rem;
}

.page-calendar .calendar-btn-icon {
  padding: 5px 9px;
  min-width: 0;
  line-height: 1;
}

.page-calendar .calendar-month-label {
  min-width: 9rem;
  max-width: none;
  font-size: 1.35rem;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: -0.02em;
  padding: 6px 14px;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
  text-align: center;
  line-height: 1.2;
}

.page-calendar .calendar-view-tabs {
  flex-shrink: 0;
  width: auto;
  margin-top: 0;
}

.page-calendar .calendar-view-tab {
  padding: 4px 8px;
  font-size: 0.78rem;
}

.page-calendar .calendar-add-tab {
  flex: 0 0 auto;
  padding: 5px 10px;
  font-size: 0.8rem;
}

.page-calendar .calendar-google-banner-actions .calendar-btn-compact,
.page-calendar .calendar-google-tab-actions .calendar-btn-compact {
  padding: 5px 10px;
  font-size: 0.82rem;
}

.calendar-month-label {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: #1e293b;
  min-width: 160px;
  text-align: center;
}

.calendar-btn-primary,
.calendar-btn-secondary,
.calendar-btn-danger {
  width: auto;
  margin-top: 0;
  padding: 7px 14px;
  border-radius: 8px;
  border: 1px solid transparent;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.92rem;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  box-shadow: none;
  letter-spacing: normal;
}

.calendar-btn-primary {
  background: #2563eb;
  color: #ffffff;
  border-color: #1e40af;
}

.calendar-btn-primary:hover:not(:disabled) {
  background: #1d4ed8;
  transform: none;
  box-shadow: none;
}

.calendar-btn-secondary {
  background: #ffffff;
  color: #1e293b;
  border-color: #cbd5e1;
}

.calendar-btn-secondary:hover:not(:disabled) {
  border-color: #94a3b8;
  background: #f1f5f9;
  transform: none;
  box-shadow: none;
}

.calendar-btn-danger {
  background: #dc2626;
  color: #ffffff;
  border-color: #991b1b;
}

.calendar-btn-danger:hover:not(:disabled) {
  background: #b91c1c;
}

.calendar-google-banner {
  margin-bottom: 12px;
  padding: 14px 16px;
  border-left: 4px solid #16a34a;
}

.calendar-google-banner--compact {
  width: max-content;
  max-width: 100%;
  margin-left: auto;
  padding: 6px 8px;
  border-left: 0;
  border-color: #cbd5e1;
  border-radius: 999px;
  background: #f8fafc;
  box-shadow: none;
}

.calendar-google-banner--compact .calendar-google-banner-row {
  gap: 8px;
}

.calendar-google-banner--compact strong {
  color: #475569;
  font-size: 0.82rem;
}

.calendar-google-banner--compact .hint {
  display: none;
}

.calendar-google-banner--compact .calendar-google-banner-actions {
  gap: 6px;
}

.calendar-google-banner--compact .calendar-btn-compact,
.calendar-google-banner--compact .calendar-settings-link {
  padding: 3px 7px;
  border-radius: 999px;
  font-size: 0.76rem;
}

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

.calendar-google-banner-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.calendar-panel {
  padding: 14px 16px 18px;
}

.calendar-legend {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 10px;
  font-size: 0.85rem;
  color: #475569;
}

.calendar-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.calendar-legend-swatch {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  background: #2563eb;
  display: inline-block;
}

.calendar-legend-swatch.calendar-legend-event {
  background: #2563eb;
}

.calendar-legend-swatch.calendar-legend-google {
  background: #16a34a;
}

.calendar-legend-swatch.calendar-legend-task {
  background: #f59e0b;
}

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
  background: transparent;
  padding: 4px 2px 2px;
}

.calendar-day-header {
  background: transparent;
  padding: 6px 6px 4px;
  text-align: center;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #475569;
}

.calendar-day-cell {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-height: 110px;
  width: auto;
  margin: 0;
  padding: 7px 8px 9px;
  background: linear-gradient(180deg, #ffffff 0%, #f1f5fb 100%);
  border: 1px solid #c7d3ea;
  border-radius: 12px;
  text-align: left;
  color: #1e293b;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 -1px 0 rgba(15, 23, 42, 0.06),
    0 1px 2px rgba(15, 23, 42, 0.06),
    0 4px 8px -2px rgba(15, 23, 42, 0.10),
    0 2px 0 rgba(180, 195, 220, 0.55);
  transition: background 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease, transform 0.12s ease;
}

.calendar-day-cell::before {
  content: "+ Add";
  position: absolute;
  top: 7px;
  right: 8px;
  padding: 2px 6px;
  border-radius: 999px;
  background: #e0f2fe;
  color: #0369a1;
  font-size: 0.66rem;
  font-weight: 800;
  line-height: 1.2;
  opacity: 0;
  transform: translateY(-2px);
  transition: opacity 0.12s ease, transform 0.12s ease;
  pointer-events: none;
}

.calendar-day-cell:hover {
  background: linear-gradient(180deg, #ffffff 0%, #e7eefc 100%);
  border-color: #6f9bf0;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    inset 0 -1px 0 rgba(15, 23, 42, 0.08),
    0 2px 4px rgba(15, 23, 42, 0.08),
    0 8px 16px -4px rgba(37, 99, 235, 0.22),
    0 3px 0 rgba(150, 175, 220, 0.6);
  transform: translateY(-2px);
}

.calendar-day-cell:hover::before,
.calendar-day-cell:focus-visible::before {
  opacity: 1;
  transform: translateY(0);
}

.calendar-day-cell:focus-visible {
  outline: 3px solid rgba(14, 165, 233, 0.35);
  outline-offset: 2px;
}

.calendar-day-cell:active {
  transform: translateY(0);
  box-shadow:
    inset 0 2px 4px rgba(15, 23, 42, 0.10),
    0 1px 2px rgba(15, 23, 42, 0.05);
}

.calendar-day-cell--other {
  background: linear-gradient(180deg, #f1f5f9 0%, #e2e8f0 100%);
  border-color: #d8dee8;
  color: #94a3b8;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    0 1px 1px rgba(15, 23, 42, 0.03),
    0 1px 0 rgba(180, 195, 220, 0.35);
}

.calendar-day-cell--other:hover {
  background: linear-gradient(180deg, #ffffff 0%, #e8eef8 100%);
  border-color: #b8c4dc;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    0 2px 4px rgba(15, 23, 42, 0.06),
    0 2px 0 rgba(170, 185, 210, 0.45);
  transform: translateY(-1px);
}

.calendar-day-cell--other .calendar-day-number {
  color: #94a3b8;
}

.calendar-day-cell--today {
  background: linear-gradient(180deg, #ccfbf1 0%, #99f6e4 100%);
  border-color: #0f766e;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    inset 0 -1px 0 rgba(15, 118, 110, 0.22),
    0 1px 2px rgba(15, 23, 42, 0.08),
    0 8px 18px -3px rgba(13, 148, 136, 0.32),
    0 3px 0 rgba(13, 148, 136, 0.45);
}

.calendar-day-cell--today::after {
  content: "";
  position: absolute;
  top: 13px;
  left: 48px;
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: #0f766e;
  box-shadow: 0 0 0 4px rgba(15, 118, 110, 0.16);
  pointer-events: none;
}

.calendar-day-cell--today:hover {
  background: linear-gradient(180deg, #b2f5ea 0%, #5eead4 100%);
  border-color: #0d9488;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    inset 0 -1px 0 rgba(15, 118, 110, 0.24),
    0 2px 4px rgba(15, 23, 42, 0.10),
    0 10px 20px -4px rgba(13, 148, 136, 0.38),
    0 4px 0 rgba(13, 148, 136, 0.55);
}

.calendar-day-cell--today .calendar-day-number {
  background: #0f766e;
  color: #ffffff;
}

.calendar-day-number {
  align-self: flex-start;
  font-weight: 700;
  font-size: 0.82rem;
  padding: 2px 7px;
  border-radius: 999px;
  color: inherit;
  margin-bottom: 4px;
}

.calendar-day-items {
  display: flex;
  flex-direction: column;
  gap: 3px;
  overflow: hidden;
}

.calendar-chip {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px 6px 3px 8px;
  border-radius: 4px;
  border: 1px solid transparent;
  border-left: 3px solid #2563eb;
  background: #eff6ff;
  font-size: 0.75rem;
  font-weight: 600;
  color: #1e293b;
  cursor: pointer;
  text-decoration: none;
  text-align: left;
  font-family: inherit;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.calendar-chip:hover {
  filter: brightness(0.95);
}

.calendar-chip--google {
  background: #ecfdf5;
  border-left-color: #16a34a;
}

.calendar-chip--task {
  background: #fffbeb;
  border-left-color: #f59e0b;
  color: #78350f;
}

.calendar-chip-time {
  flex-shrink: 0;
  margin-left: auto;
  font-weight: 700;
  font-size: 0.7rem;
  color: #475569;
}

.calendar-chip--task .calendar-chip-time {
  color: #92400e;
}

.calendar-chip-title {
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
}

#calendarEventModal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}

#calendarEventModal.hidden {
  display: none;
}

.calendar-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
}

.calendar-modal-card {
  position: relative;
  width: min(640px, 92vw);
  max-height: 90vh;
  overflow: auto;
  padding: 18px 22px 20px;
  border-radius: 12px;
  z-index: 1;
}

.calendar-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.calendar-modal-header h2 {
  margin: 0;
}

.calendar-modal-close {
  background: transparent;
  border: 0;
  font-size: 1.6rem;
  line-height: 1;
  color: #475569;
  cursor: pointer;
  padding: 4px 8px;
}

.calendar-modal-close:hover {
  color: #0f172a;
}

.calendar-modal-actions-row {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 10px;
  flex-wrap: wrap;
}

.calendar-modal-actions-row #calendarEventDeleteBtn {
  margin-right: auto;
}

.calendar-view-tabs {
  display: inline-flex;
  gap: 4px;
  padding: 3px;
  border-radius: 8px;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
}

.calendar-view-tab {
  padding: 6px 12px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: #64748b;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}

.calendar-view-tab:hover {
  color: #1e293b;
}

.calendar-view-tab.is-active {
  background: #ffffff;
  color: #1d4ed8;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}

.calendar-grid--week {
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.calendar-grid--week .calendar-day-cell--week {
  min-height: 220px;
}

.calendar-grid--day {
  display: block;
}

.calendar-day-agenda {
  padding: 8px 4px;
}

.calendar-day-agenda-empty {
  margin: 12px 0;
}

.calendar-day-agenda-row {
  margin-bottom: 8px;
}

.calendar-day-agenda-row .calendar-chip {
  width: 100%;
  text-align: left;
}

.calendar-legend-swatch.calendar-legend-overdue {
  background: #fecaca;
  border-color: #dc2626;
}

.calendar-chip--overdue {
  background: #fef2f2 !important;
  border-left-color: #dc2626 !important;
  color: #991b1b;
}

.calendar-chip--overdue .calendar-chip-time {
  color: #b91c1c;
}

.calendar-chip--recurring .calendar-chip-title {
  font-style: italic;
}

.calendar-add-tabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin: 0 0 6px;
  padding-bottom: 8px;
  border-bottom: 1px solid #e2e8f0;
}

.calendar-add-tab {
  padding: 7px 12px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #f8fafc;
  color: #475569;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}

.calendar-add-tab:hover {
  border-color: #cbd5e1;
  color: #1e293b;
}

.calendar-add-tab.is-active {
  background: #eff6ff;
  border-color: #93c5fd;
  color: #1d4ed8;
}

.calendar-add-tab-desc {
  margin: 0 0 12px;
  font-size: 0.88rem;
}

.calendar-add-tab-panel {
  margin-bottom: 12px;
}

.calendar-google-tab-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
}

.calendar-settings-link {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}

.calendar-timezone-hint {
  margin: -4px 0 10px;
  font-size: 0.82rem;
}

.calendar-google-push-hint {
  margin: -6px 0 10px;
  color: #64748b;
}

.calendar-google-push-hint a {
  color: #64748b;
  text-decoration: underline;
}

@media (max-width: 720px) {
  .calendar-day-cell {
    min-height: 88px;
  }
  .calendar-chip {
    font-size: 0.68rem;
  }
  .calendar-month-label {
    font-size: 1.15rem;
    min-width: 7rem;
    padding: 5px 10px;
  }

  .page-calendar .calendar-topbar-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .page-calendar .calendar-period-bar {
    width: 100%;
    justify-content: center;
  }

  .page-calendar .calendar-view-tabs {
    align-self: center;
  }
}

/* "Open WhatsApp" launch button — opens wa.me in a new tab so the agent can
   message the contact from their own WhatsApp without server-side sending.
   Green tinted to distinguish from Send SMS / Start Call. */
.contact-whatsapp-launch-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #128c7e;
  border-color: #0e7060;
  color: #ffffff;
}

.contact-whatsapp-launch-btn:hover {
  background: #0e7060;
  border-color: #0a5a4d;
  color: #ffffff;
}

.contact-whatsapp-launch-btn svg {
  flex-shrink: 0;
}

/* =========================================================================
   Sign-in page
   Two-panel layout: branded preview on the left, credential card on the right.
   Stacks vertically on small screens. Scoped to body.signin-page so nothing
   leaks into the main app.
   ========================================================================= */
body.signin-page {
  margin: 0;
  min-height: 100vh;
  font-family: var(--crm-app-font, "Segoe UI", system-ui, sans-serif);
  color: #0f172a;
  background:
    radial-gradient(1200px 600px at 8% 10%, rgba(124, 58, 237, 0.18), transparent 60%),
    radial-gradient(900px 500px at 95% 90%, rgba(79, 70, 229, 0.18), transparent 60%),
    linear-gradient(135deg, #0b0f2c 0%, #1e1b4b 45%, #312e81 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 20px;
  box-sizing: border-box;
}

.signin-shell {
  width: 100%;
  max-width: 980px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  background: #ffffff;
  border-radius: 20px;
  overflow: hidden;
  box-shadow:
    0 30px 80px rgba(15, 23, 42, 0.45),
    0 0 0 1px rgba(255, 255, 255, 0.08);
}

/* ----- Left brand panel ----- */
.signin-brand-panel {
  position: relative;
  padding: 40px 36px;
  color: #f8fafc;
  background:
    radial-gradient(220px 220px at 80% 0%, rgba(255, 255, 255, 0.18), transparent 70%),
    radial-gradient(260px 260px at 0% 100%, rgba(253, 226, 196, 0.18), transparent 70%),
    linear-gradient(160deg, #312e81 0%, #4f46e5 55%, #7c3aed 100%);
  display: flex;
  flex-direction: column;
  gap: 22px;
  min-height: 540px;
  overflow: hidden;
}

.signin-brand-panel::after {
  /* Subtle glow ring behind the modules list */
  content: "";
  position: absolute;
  top: 55%;
  left: 50%;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.12), transparent 65%);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.signin-brand-header {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 14px;
}

.signin-brand-logo {
  display: flex;
  align-items: center;
  justify-content: center;
}

.signin-brand-logo img {
  display: block;
  border-radius: 14px;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.18),
    0 6px 18px rgba(15, 23, 42, 0.45);
}

.signin-brand-wordmark {
  font-family: var(--crm-brand-font);
  font-size: 2.1rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  color: #ffffff;
  text-shadow: 0 2px 10px rgba(15, 23, 42, 0.35);
}

.signin-brand-tagline {
  position: relative;
  z-index: 1;
  margin: 4px 0 0;
  font-size: 1.05rem;
  line-height: 1.5;
  color: rgba(248, 250, 252, 0.92);
  max-width: 320px;
}

.signin-brand-modules {
  position: relative;
  z-index: 1;
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.signin-brand-modules li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #f8fafc;
  font-size: 0.94rem;
  font-weight: 600;
  backdrop-filter: blur(6px);
  transition: transform 0.18s ease, background 0.18s ease;
}

.signin-brand-modules li:hover {
  background: rgba(255, 255, 255, 0.13);
  transform: translateX(2px);
}

.signin-brand-modules svg {
  color: #fde2c4;
  flex-shrink: 0;
}

.signin-brand-robot {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
}

.signin-brand-robot lottie-player {
  width: 220px;
  height: 220px;
}

.signin-brand-robot-caption {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.35;
  text-align: center;
  color: rgba(248, 250, 252, 0.82);
  font-style: italic;
}

.signin-brand-footnote {
  position: relative;
  z-index: 1;
  margin: auto 0 0;
  width: 100%;
  text-align: center;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(248, 250, 252, 0.7);
}

/* ----- Right credential card ----- */
.signin-card {
  background: #ffffff;
  display: flex;
  align-items: center;
}

.signin-card-inner {
  width: 100%;
  padding: 48px 44px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.signin-brand-logo--mobile {
  display: none;
}

.signin-heading {
  margin: 0;
  font-family: var(--crm-brand-font);
  font-size: 2.1rem;
  font-weight: 800;
  color: #1e1b4b;
  letter-spacing: -0.01em;
}

.signin-subheading {
  margin: 0 0 8px;
  color: #475569;
  font-size: 0.98rem;
  line-height: 1.5;
}

.signin-form {
  display: grid;
  gap: 14px;
}

.signin-field {
  display: grid;
  gap: 6px;
}

.signin-label {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #1e3a8a;
}

.signin-input {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  background: #ffffff;
  font: inherit;
  font-size: 0.98rem;
  color: #0f172a;
  box-sizing: border-box;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.signin-input:hover {
  border-color: #94a3b8;
}

.signin-input:focus {
  outline: none;
  border-color: #4f46e5;
  box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.18);
}

.signin-password-wrap {
  position: relative;
}

.signin-password-wrap .signin-input {
  padding-right: 42px;
}

.signin-password-wrap .crm-password-toggle {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
}

.signin-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 6px;
  padding: 12px 18px;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  font: inherit;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: #ffffff;
  background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
  box-shadow:
    0 6px 16px rgba(79, 70, 229, 0.35),
    0 1px 0 rgba(255, 255, 255, 0.25) inset;
  transition: transform 0.12s ease, box-shadow 0.18s ease, filter 0.18s ease;
}

.signin-submit:hover {
  filter: brightness(1.05);
  box-shadow:
    0 10px 24px rgba(79, 70, 229, 0.42),
    0 1px 0 rgba(255, 255, 255, 0.25) inset;
}

.signin-submit:active {
  transform: translateY(1px);
}

.signin-submit:disabled {
  cursor: default;
  filter: grayscale(0.4) brightness(0.95);
  box-shadow: none;
}

.signin-forgot-row {
  margin: 6px 0 0;
  text-align: right;
}

.signin-forgot-link {
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  color: #4f46e5;
  cursor: pointer;
  text-decoration: underline;
}

.signin-forgot-link:hover {
  color: #4f46e5;
}

.signin-forgot-panel {
  margin: 12px 0 4px;
  padding: 14px 16px;
  border-radius: 10px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
}

.signin-forgot-panel.hidden {
  display: none;
}

.signin-submit--secondary {
  margin-top: 4px;
  background: #ffffff;
  color: #4f46e5;
  border: 1px solid #c7d2fe;
  box-shadow: none;
}

.signin-submit--secondary:hover {
  background: #eef2ff;
  filter: none;
}

.signin-2fa-panel {
  margin-top: 8px;
  padding-top: 4px;
  border-top: 1px solid #e2e8f0;
}

.signin-2fa-back {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 8px 12px;
  border: none;
  background: transparent;
  color: #64748b;
  font: inherit;
  font-size: 0.9rem;
  cursor: pointer;
  text-decoration: underline;
}

.signin-2fa-back:hover {
  color: #334155;
}

.signin-message {
  min-height: 1.2em;
  margin: 4px 0 0;
  font-size: 0.9rem;
  font-weight: 600;
  color: #64748b;
}

.signin-message--error {
  color: #b91c1c;
}

.signin-message--ok {
  color: #047857;
}

.signin-footnote {
  margin: 8px 0 0;
  font-size: 0.82rem;
  line-height: 1.5;
  color: #94a3b8;
}

/* ----- Responsive: stack panels on small screens ----- */
@media (max-width: 760px) {
  body.signin-page {
    padding: 16px;
  }

  .signin-shell {
    grid-template-columns: minmax(0, 1fr);
    max-width: 480px;
  }

  .signin-brand-panel {
    display: none;
  }

  .signin-card-inner {
    padding: 32px 24px;
    text-align: left;
  }

  .signin-brand-logo--mobile {
    display: inline-flex;
    margin-bottom: 4px;
  }

  .signin-heading {
    font-size: 1.7rem;
  }
}

/* First-time onboarding footnotes (Contacts workspace) */
.crm-onboarding {
  position: fixed;
  inset: 0;
  z-index: 12000;
  pointer-events: none;
}

.crm-onboarding-backdrop {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  /* Dim main workspace only — keep sidebar logo + “Cadence” sharp */
  left: var(--agile-sidebar-width);
  background: rgba(15, 23, 42, 0.45);
  pointer-events: auto;
}

.crm-onboarding-highlight-ring {
  position: fixed;
  border-radius: 10px;
  box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.65);
  pointer-events: none;
  z-index: 1;
  transition: left 0.2s ease, top 0.2s ease, width 0.2s ease, height 0.2s ease;
}

.crm-onboarding-highlight {
  position: relative;
  z-index: 12001 !important;
}

.crm-onboarding-popover {
  position: fixed;
  z-index: 2;
  width: min(320px, calc(100vw - 24px));
  padding: 16px 18px 14px;
  border-radius: 12px;
  background: #fff;
  color: #0f172a;
  font-family: Arial, sans-serif;
  box-shadow:
    0 18px 40px rgba(15, 23, 42, 0.22),
    0 0 0 1px rgba(148, 163, 184, 0.25);
  pointer-events: auto;
}

.crm-onboarding-popover * {
  font-family: inherit;
}

.crm-onboarding-popover--center {
  max-width: 360px;
}

.crm-onboarding-popover--no-arrow .crm-onboarding-arrow {
  display: none;
}

.crm-onboarding-arrow {
  position: absolute;
  width: 0;
  height: 0;
  border: 10px solid transparent;
}

.crm-onboarding-arrow--bottom {
  top: -18px;
  transform: translateX(-50%);
  border-bottom-color: #fff;
  filter: drop-shadow(0 -1px 0 rgba(148, 163, 184, 0.35));
}

.crm-onboarding-arrow--top {
  bottom: -18px;
  transform: translateX(-50%);
  border-top-color: #fff;
}

.crm-onboarding-arrow--right {
  left: -18px;
  transform: translateY(-50%);
  border-right-color: #fff;
  filter: drop-shadow(-1px 0 0 rgba(148, 163, 184, 0.35));
}

.crm-onboarding-arrow--left {
  right: -18px;
  transform: translateY(-50%);
  border-left-color: #fff;
  filter: drop-shadow(1px 0 0 rgba(148, 163, 184, 0.35));
}

.crm-onboarding-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.crm-onboarding-close {
  flex-shrink: 0;
  border: 0;
  background: transparent;
  font-size: 1.25rem;
  line-height: 1;
  color: #64748b;
  cursor: pointer;
  padding: 2px 0 0 4px;
  margin: 0;
}

.crm-onboarding-close:hover {
  color: #0f172a;
}

.crm-onboarding-title {
  margin: 0;
  padding: 0;
  flex: 1;
  min-width: 0;
  font-size: 17px;
  font-weight: bold;
  line-height: 1.35;
  letter-spacing: normal;
  color: #111827;
  text-shadow: none;
  -webkit-font-smoothing: auto;
}

.crm-onboarding-body {
  margin: 0 0 14px;
  font-size: 0.92rem;
  line-height: 1.5;
  color: #475569;
}

.crm-onboarding-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.crm-onboarding-progress {
  font-size: 0.78rem;
  color: #94a3b8;
  font-weight: 600;
}

.crm-onboarding-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.crm-onboarding-btn {
  border-radius: 8px;
  padding: 7px 12px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
}

.crm-onboarding-btn--ghost {
  background: #f8fafc;
  border-color: #e2e8f0;
  color: #475569;
}

.crm-onboarding-btn--ghost:hover {
  background: #f1f5f9;
}

.crm-onboarding-btn--primary {
  background: #4f46e5;
  color: #fff;
}

.crm-onboarding-btn--primary:hover {
  background: #4338ca;
}

@media (max-width: 640px) {
  .crm-onboarding-backdrop {
    left: 0;
  }

  .crm-onboarding-popover {
    width: min(300px, calc(100vw - 20px));
  }

  .crm-onboarding-actions {
    width: 100%;
    justify-content: flex-end;
  }
}

.webinar-admin-grid .webinar-span-2 {
  grid-column: 1 / -1;
}

.webinar-publish-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.92rem;
  font-weight: 600;
  color: #334155;
}

.webinar-host-start {
  margin-left: 12px;
  font-weight: 600;
  color: #4f46e5;
}

.twilio-headset-opt.twilio-record-opt--warn {
  color: #92400e;
}

.twilio-headset-opt input[type="checkbox"]:disabled {
  cursor: not-allowed;
}

.twilio-headset-opt--disabled {
  opacity: 0.72;
}

.twilio-headset-hint {
  margin: 4px 0 0;
  font-size: 12px;
  line-height: 1.45;
  color: #64748b;
}

.twilio-headset-hint.is-ready {
  color: #166534;
}

.twilio-headset-hint.is-blocked {
  color: #b45309;
}

.webinar-admin-hint a {
  color: #4f46e5;
  font-weight: 600;
}

.webinar-admin-hint-title {
  margin: 0 0 8px;
  font-size: 1rem;
  color: #0f172a;
}

.webinar-admin-hint-lead {
  margin: 0 0 14px;
  line-height: 1.55;
}

.webinar-admin-hint-foot {
  margin: 14px 0 0;
  line-height: 1.5;
}

.webinar-share-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
  padding: 12px 14px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
}

.webinar-share-url-wrap {
  flex: 1 1 220px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.webinar-share-url-label {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #64748b;
}

.webinar-share-url {
  display: block;
  padding: 8px 10px;
  background: #fff;
  border: 1px dashed #cbd5e1;
  border-radius: 8px;
  font-size: 0.88rem;
  color: #334155;
  word-break: break-all;
}

.webinar-share-btn {
  flex: 0 0 auto;
}

.webinar-duration-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.webinar-duration-input-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}

.webinar-duration-input-wrap input {
  width: 5.5rem;
  flex: 0 0 auto;
}

.webinar-duration-unit {
  font-size: 0.92rem;
  font-weight: 600;
  color: #475569;
}

.webinar-field-stack {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.webinar-field-hint {
  margin: 0;
  line-height: 1.45;
}

.webinar-publish-label--on {
  color: #166534;
  background: #ecfdf5;
  border: 1px solid #86efac;
  border-radius: 8px;
  padding: 8px 10px;
}

.webinar-publish-label--off {
  color: #475569;
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  padding: 8px 10px;
}

.webinar-published-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.webinar-published-pill.is-on {
  color: #166534;
  background: #dcfce7;
  border: 1px solid #86efac;
}

.webinar-published-pill.is-off {
  color: #64748b;
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
}

.webinar-table-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.webinar-table-header h3 {
  margin: 0;
}

.webinar-filter-tabs {
  display: inline-flex;
  gap: 6px;
  padding: 4px;
  background: #f1f5f9;
  border-radius: 999px;
}

.webinar-filter-tab {
  border: 0;
  background: transparent;
  color: #475569;
  font-size: 0.86rem;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 999px;
  cursor: pointer;
}

.webinar-filter-tab.is-active {
  background: #fff;
  color: #0f172a;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}

.webinar-regs-btn {
  border: 0;
  background: transparent;
  color: #4f46e5;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.landing-topbar-actions button {
  width: auto;
  max-width: none;
  margin-top: 0;
}

.landing-topbar-actions .welcome-btn {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  font-size: 0.88rem;
  text-decoration: none;
  border-radius: 8px;
}

.contact-call-recordings-panel {
  margin: 0 0 14px;
  padding: 12px 14px;
  background: #eef2ff;
  border: 1px solid #c7d2fe;
  border-radius: 10px;
}

.contact-call-recordings-heading {
  margin: 0 0 8px;
  font-size: 0.95rem;
  font-weight: 700;
  color: #312e81;
}

.contact-call-recordings-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.contact-call-recording-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 0.88rem;
}

.contact-call-recording-item--pending {
  color: #4338ca;
  font-style: italic;
}

.crm-call-recording-player {
  width: 100%;
  max-width: min(320px, 100%);
  height: 36px;
  flex: 1 1 200px;
}

.contact-history-call-summary {
  line-height: 1.45;
}

.contact-history-call-length {
  font-weight: 600;
  color: #334155;
}

.contact-history-call-length--pending {
  font-weight: 500;
  color: #4338ca;
  font-style: italic;
}

.contact-history-call-recording {
  line-height: 1.45;
}

.contact-history-call-recording-label {
  display: block;
  margin-bottom: 6px;
  font-weight: 600;
}

.contact-history-call-recording-pending {
  font-weight: 500;
  color: #4338ca;
  font-style: italic;
}

.contact-history-call-recording-player {
  margin-top: 4px;
}

.contact-history-call-recording-player .crm-call-recording-player {
  max-width: 100%;
}

.social-video-library-panel .campaign-list-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.social-video-library-panel .campaign-list-header h3 {
  margin: 0;
}

.social-video-library-panel .campaign-list-header button {
  width: auto;
  margin-top: 0;
}

.social-video-subheading {
  margin: 0 0 10px;
  font-size: 15px;
  font-weight: 700;
  color: #1e3a8a;
}

.videos-page-intro {
  margin: 0 0 14px;
  line-height: 1.5;
}

.videos-url-formats-hint {
  margin: -4px 0 12px;
  padding: 10px 12px;
  border-radius: 8px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
}

.video-upload-progress-wrap {
  grid-column: 1 / -1;
  margin-top: 4px;
}

.video-upload-progress-wrap.is-hidden {
  display: none;
}

.video-upload-progress-label {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: #334155;
  margin-bottom: 6px;
}

.video-upload-progress-track {
  height: 10px;
  border-radius: 999px;
  background: #e2e8f0;
  overflow: hidden;
}

.video-upload-progress-bar {
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, #2563eb, #1d4ed8);
  transition: width 0.15s ease;
}

.videos-list {
  display: grid;
  gap: 12px;
}

.videos-empty-state {
  padding: 20px 16px;
  border-radius: 10px;
  background: #f8fafc;
  border: 1px dashed #cbd5e1;
  text-align: center;
}

.videos-empty-state p {
  margin: 0 0 8px;
}

.videos-empty-state p:last-child {
  margin-bottom: 0;
}

.video-card {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr);
  gap: 14px;
  padding: 12px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #fff;
}

.video-card-thumb {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  background: #0f172a;
  min-height: 90px;
  aspect-ratio: 16 / 9;
}

.video-card-thumb-img,
.video-card-thumb-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.video-card-thumb-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 90px;
  color: #e2e8f0;
  text-align: center;
  padding: 8px;
}

.video-card-thumb-placeholder span {
  font-size: 28px;
  font-weight: 800;
  line-height: 1;
}

.video-card-thumb-placeholder small {
  margin-top: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #94a3b8;
}

.video-card-title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.video-card-title {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: #1e3a8a;
}

.video-card-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  background: #e0e7ff;
  color: #3730a3;
}

.video-card-badge--youtube {
  background: #fee2e2;
  color: #b91c1c;
}

.video-card-badge--vimeo {
  background: #dbeafe;
  color: #1d4ed8;
}

.video-card-badge--loom {
  background: #ede9fe;
  color: #6d28d9;
}

.video-card-badge--upload {
  background: #dcfce7;
  color: #166534;
}

.video-card-badge--direct,
.video-card-badge--url {
  background: #f1f5f9;
  color: #475569;
}

.video-card-meta,
.video-card-date,
.video-card-notes {
  margin: 0 0 4px;
  font-size: 13px;
  color: #64748b;
  word-break: break-word;
}

.video-card-preview {
  margin: 8px 0;
}

.video-card-preview summary {
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: #2563eb;
}

.video-card-preview video {
  width: 100%;
  max-height: 240px;
  margin-top: 8px;
  border-radius: 8px;
  background: #000;
}

.video-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.video-card-actions button {
  width: auto;
  margin-top: 0;
  padding: 6px 12px;
  font-size: 13px;
}

@media (max-width: 720px) {
  .video-card {
    grid-template-columns: 1fr;
  }

  .video-card-thumb {
    max-width: 280px;
  }
}

.page-assistant .assistant-intro {
  margin: 0 0 10px;
}

.page-assistant .assistant-page-title {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.page-assistant .assistant-claude-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 9px;
  border: 1px solid #fed7aa;
  border-radius: 999px;
  background: #fff7ed;
  color: #9a3412;
  font-size: 15px;
  font-weight: 700;
}

.page-assistant .assistant-claude-logo {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
}

.page-assistant .assistant-status-badge {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 10px 0 14px;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid #c7d2fe;
  background: #eef2ff;
  color: #1e3a8a;
  font-size: 0.92rem;
  line-height: 1.45;
}

.page-assistant .assistant-status-badge__dot {
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  margin-top: 5px;
  border-radius: 50%;
  background: #94a3b8;
}

.page-assistant .assistant-status-badge[data-state="ready"] {
  border-color: #86efac;
  background: #f0fdf4;
  color: #14532d;
}

.page-assistant .assistant-status-badge[data-state="ready"] .assistant-status-badge__dot {
  background: #22c55e;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.18);
}

.page-assistant .assistant-status-badge[data-state="unconfigured"] {
  border-color: #fcd34d;
  background: #fffbeb;
  color: #92400e;
}

.page-assistant .assistant-status-badge[data-state="unconfigured"] .assistant-status-badge__dot {
  background: #f59e0b;
}

.page-assistant .assistant-status-badge[data-state="error"] {
  border-color: #fca5a5;
  background: #fef2f2;
  color: #991b1b;
}

.page-assistant .assistant-status-badge[data-state="error"] .assistant-status-badge__dot {
  background: #ef4444;
}

.page-assistant .assistant-tools-label {
  margin: 0 0 6px;
  font-size: 0.82rem;
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.page-assistant .assistant-tool-tabs-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
  margin: 0 0 14px;
}

.page-assistant .assistant-view-tabs--secondary {
  margin-bottom: 0;
}

.page-assistant .assistant-form-actions--row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: end;
}

.page-assistant .assistant-clear-form-btn,
.page-assistant .assistant-clear-result-btn,
.page-assistant .assistant-regenerate-btn {
  width: auto;
  margin-top: 0;
  padding: 8px 14px;
  background: linear-gradient(135deg, #e5e7eb, #cbd5e1);
  color: #1f2937;
  border-color: #94a3b8;
}

.page-assistant .assistant-contact-results {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #fff;
  max-height: 220px;
  overflow-y: auto;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
}

.page-assistant .assistant-contact-pick {
  display: block;
  width: 100%;
  margin: 0;
  padding: 10px 12px;
  border: none;
  border-bottom: 1px solid #f1f5f9;
  background: transparent;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: #1e293b;
}

.page-assistant .assistant-contact-pick:hover {
  background: #f1f5f9;
}

.page-assistant .assistant-contact-pick__meta {
  display: block;
  font-size: 0.78rem;
  color: #64748b;
  font-weight: 400;
  margin-top: 2px;
}

.page-assistant .assistant-contact-search {
  min-height: 38px;
  padding-top: 8px;
  padding-bottom: 8px;
  box-sizing: border-box;
}

.page-assistant .assistant-contact-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  padding: 6px 12px;
  border-radius: 8px;
  background: #dbeafe;
  color: #1e40af;
  font-size: 0.85rem;
  font-weight: 600;
  width: 100%;
  box-sizing: border-box;
}

.page-assistant .assistant-contact-chip__clear {
  width: auto;
  margin: 0;
  padding: 0 6px;
  border: none;
  background: transparent;
  color: inherit;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}

.page-assistant .assistant-contact-preview__body {
  margin: 0;
  padding: 10px 12px;
  font-size: 0.82rem;
  line-height: 1.4;
  white-space: pre-wrap;
  background: #f8fafc;
  border: 1px solid #c7d2fe;
  border-radius: 8px;
  color: #334155;
  max-height: 120px;
  overflow-y: auto;
}

.page-assistant .assistant-sms-meta--caution {
  color: #b45309;
}

.page-assistant .assistant-sms-meta--warn {
  color: #b91c1c;
  font-weight: 600;
}

.page-assistant .assistant-sms-split-note {
  color: #b45309;
}

.page-assistant .assistant-view-tabs {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  padding: 8px;
  margin: 0;
  border-radius: 10px;
  background: #eef2ff;
  border: 1px solid #c7d2fe;
  box-sizing: border-box;
}

.page-assistant .assistant-view-tab {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: #ffffff;
  color: #334155;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  box-sizing: border-box;
}

.page-assistant .assistant-view-tab:hover {
  color: #312e81;
  border-color: #a5b4fc;
  background: #e0e7ff;
}

.page-assistant .assistant-view-tab.is-active {
  background: linear-gradient(135deg, #4f46e5, #7c3aed);
  color: #ffffff;
  box-shadow: 0 7px 18px rgba(79, 70, 229, 0.3);
}

.page-assistant .assistant-tab-panel[hidden] {
  display: none !important;
}

.page-assistant .assistant-tab-panel {
  border: 1px solid #c7d2fe;
  background:
    radial-gradient(circle at top right, rgba(124, 58, 237, 0.08), transparent 34%),
    linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  color: #334155;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08);
}

.page-assistant .assistant-tab-panel h3,
.page-assistant .assistant-tab-panel .hint {
  color: #334155;
}

.page-assistant .assistant-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px 14px;
  align-items: end;
  margin-top: 8px;
  max-width: 780px;
}

.page-assistant .assistant-form-inline {
  grid-template-columns: repeat(auto-fit, minmax(160px, max-content));
}

.page-assistant .assistant-field-wide {
  grid-column: 1 / -1;
}

.page-assistant .assistant-form label {
  display: grid;
  gap: 4px;
  font-size: 0.85rem;
  font-weight: 600;
  color: #334155;
}

.page-assistant .assistant-form input,
.page-assistant .assistant-form select,
.page-assistant .assistant-form textarea {
  width: 100%;
  font: inherit;
  border-color: #cbd5e1;
  background: #ffffff;
}

.page-assistant .assistant-form textarea::placeholder {
  color: #b0bec5;
  opacity: 1;
}

.page-assistant .assistant-form-actions {
  display: flex;
  align-items: end;
}

.page-assistant .assistant-generate-btn {
  width: auto;
  margin-top: 0;
  white-space: nowrap;
  border-color: #6d28d9;
  background: linear-gradient(135deg, #4f46e5, #7c3aed);
  color: #ffffff;
  box-shadow: 0 7px 18px rgba(79, 70, 229, 0.25);
}

.page-assistant .assistant-result {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid #c7d2fe;
}

.page-assistant .assistant-result--empty .assistant-email-draft-body--empty,
.page-assistant .assistant-result--empty .assistant-result-pre--empty {
  min-height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #64748b;
}

.page-assistant .assistant-result--empty .assistant-result-empty-note {
  margin: 8px 0 0;
}

.page-assistant .assistant-result-actions button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.page-assistant .assistant-result-pre {
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 520px;
  overflow: auto;
  background: #eef2ff;
  border: 1px solid #c7d2fe;
  border-radius: 10px;
  padding: 12px;
  font-family: inherit;
  font-size: 0.92rem;
  line-height: 1.45;
}

.page-assistant .assistant-email-draft-body {
  max-height: 520px;
  overflow: auto;
  padding: 14px 16px;
  border: 1px solid #c7d2fe;
  border-radius: 10px;
  background: #ffffff;
  color: #1f2937;
  font-size: 0.95rem;
  line-height: 1.55;
}

.page-assistant .assistant-email-draft-body p {
  margin: 0 0 12px;
}

.page-assistant .assistant-email-draft-body p:last-child {
  margin-bottom: 0;
}

.page-assistant .assistant-result-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.page-assistant .assistant-result-actions button,
.page-assistant .assistant-copy-btn,
.page-assistant .assistant-use-email-btn {
  width: auto;
  margin-top: 0;
  padding: 8px 14px;
}

.page-assistant .assistant-error {
  color: #b91c1c;
  margin: 0;
}

/* Re-engagement cards */
.reengage-cards {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 8px;
}

.reengage-card {
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 14px 16px;
  background: #fff;
}

.reengage-card__meta {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}

.reengage-card__name {
  font-weight: 700;
  font-size: 0.95rem;
  color: #1e293b;
}

.reengage-card__days {
  font-size: 0.78rem;
  color: #94a3b8;
  font-weight: 500;
}

.reengage-card__subject {
  margin: 0 0 6px;
  font-size: 0.85rem;
  font-weight: 700;
  color: #334155;
}

.reengage-card__body {
  margin: 0;
  font-size: 0.85rem;
  color: #475569;
  white-space: pre-wrap;
  line-height: 1.55;
}

.page-assistant .assistant-idea-card {
  border: 1px solid #c7d2fe;
  border-radius: 12px;
  padding: 12px 14px;
  margin-top: 10px;
  background: #f8fafc;
}

.page-assistant .assistant-idea-card h4 {
  margin: 0 0 6px;
}

.page-assistant .assistant-idea-steps {
  margin: 8px 0 0;
  padding-left: 1.2rem;
}

.page-assistant .assistant-pipeline-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  margin: 8px 0 12px;
  font-size: 0.92rem;
}

.page-assistant .assistant-summary-body p,
.page-assistant .assistant-summary-body .assistant-summary-bullet,
.page-assistant .assistant-summary-body .assistant-summary-numbered {
  margin: 0 0 8px;
  line-height: 1.45;
}

.page-assistant .assistant-summary-h4 {
  margin: 14px 0 8px;
  font-size: 1rem;
  font-weight: 700;
  color: #1e40af;
}

.page-assistant .assistant-summary-h4:first-child {
  margin-top: 0;
}

.page-assistant .assistant-sms-meta {
  margin: 0 0 6px;
  color: #64748b;
  font-size: 0.85rem;
}

/* ── AI Avatar — floats in top-right corner of active panel ── */
.page-assistant .assistant-tab-panel {
  position: relative;
}

.page-assistant .assistant-avatar-sidebar {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 16px;
  width: 190px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  pointer-events: none;
  z-index: 2;
}

/* Tip text */
.assistant-avatar-tip {
  margin: 0;
  text-align: center;
  font-size: 0.78rem;
  line-height: 1.45;
  color: #6366f1;
  font-style: italic;
  font-weight: 500;
  padding: 0 4px;
  transition: opacity 0.25s;
}

/* Push form content left so it doesn't hide under the robot */
@media (min-width: 760px) {
  .page-assistant .assistant-tab-panel {
    padding-right: 210px;
  }
}

/* Hide on small screens */
@media (max-width: 759px) {
  .page-assistant .assistant-tool-tabs-wrap {
    grid-template-columns: 1fr;
  }

  .page-assistant .assistant-avatar-sidebar {
    display: none;
  }
}

.page-contact-import .import-intro {
  margin: 0 0 14px;
}

.page-contact-import .import-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
}

.page-contact-import .import-step {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  background: #f1f5f9;
  color: #64748b;
  font-size: 0.85rem;
  font-weight: 600;
}

.page-contact-import .import-step span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #cbd5e1;
  color: #334155;
  font-size: 0.75rem;
}

.page-contact-import .import-step.is-active {
  background: #dbeafe;
  color: #1d4ed8;
}

.page-contact-import .import-step.is-active span {
  background: #2563eb;
  color: #fff;
}

.page-contact-import .import-step.is-done {
  background: #ecfdf5;
  color: #047857;
}

.page-contact-import .import-panel[hidden] {
  display: none !important;
}

.page-contact-import .import-dropzone {
  border: 2px dashed #94a3b8;
  border-radius: 12px;
  padding: 36px 20px;
  text-align: center;
  background: #f8fafc;
  cursor: pointer;
  margin: 10px 0;
}

.page-contact-import .import-dropzone.is-dragover {
  border-color: #2563eb;
  background: #eff6ff;
}

.page-contact-import .import-dropzone__title {
  margin: 0 0 6px;
  font-size: 1.05rem;
  font-weight: 600;
  color: #334155;
}

.page-contact-import .import-map-table-wrap,
.page-contact-import .import-preview-table-wrap {
  overflow-x: auto;
  margin: 10px 0;
}

.page-contact-import .import-map-table,
.page-contact-import .import-preview-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}

.page-contact-import .import-map-table th,
.page-contact-import .import-map-table td,
.page-contact-import .import-preview-table th,
.page-contact-import .import-preview-table td {
  border: 1px solid #e2e8f0;
  padding: 8px 10px;
  text-align: left;
  vertical-align: top;
}

.page-contact-import .import-map-table th {
  background: #f8fafc;
}

.page-contact-import .import-samples {
  color: #64748b;
  font-size: 0.82rem;
  max-width: 220px;
}

.page-contact-import .import-field-select {
  min-width: 180px;
  font: inherit;
}

.page-contact-import .import-badge {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
}

.page-contact-import .import-badge--auto {
  background: #dcfce7;
  color: #166534;
}

.page-contact-import .import-badge--review {
  background: #fef3c7;
  color: #92400e;
}

.page-contact-import .import-badge--skip {
  background: #f1f5f9;
  color: #64748b;
}

.page-contact-import .import-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.page-contact-import .import-back-btn,
.page-contact-import .import-next-btn,
.page-contact-import .import-primary-btn,
.page-contact-import .import-secondary-btn {
  width: auto;
  margin-top: 0;
  padding: 8px 14px;
}

.page-contact-import .import-back-btn,
.page-contact-import .import-secondary-btn {
  background: linear-gradient(135deg, #e5e7eb, #cbd5e1);
  color: #1f2937;
  border-color: #94a3b8;
}

.page-contact-import .import-error {
  color: #b91c1c;
  margin: 8px 0 0;
}

.page-contact-import .import-done-summary {
  font-size: 1rem;
  margin: 8px 0 0;
}

.page-contact-import .import-success {
  margin-top: 16px;
  padding: 14px;
  border-radius: 10px;
  background: #ecfdf5;
  border: 1px solid #86efac;
}

.page-contact-import .import-paradigmai-panel {
  margin-bottom: 20px;
  border: 1px solid #c7d2fe;
  background: linear-gradient(180deg, #f5f3ff 0%, #ffffff 100%);
}

.page-contact-import .import-paradigmai-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin: 12px 0;
}

.page-contact-import .import-paradigmai-download {
  display: inline-flex;
  align-items: center;
  padding: 10px 16px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
}

.page-contact-import .import-paradigmai-hint {
  margin: 0;
}

.page-contact-import .import-paradigmai-success {
  margin-top: 14px;
}

.filter-toolbar-paradigmai-link {
  display: inline-flex;
  align-items: center;
  padding: 8px 12px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 0.88rem;
  text-decoration: none;
  color: #4338ca;
  background: #eef2ff;
  border: 1px solid #c7d2fe;
}

.filter-toolbar-paradigmai-link:hover {
  background: #e0e7ff;
}

.et-paradigmai-seed-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin: 0 0 14px;
}

.et-paradigmai-seed-btn {
  width: auto;
  margin-top: 0;
  padding: 8px 14px;
  border-radius: 8px;
  border: 1px solid #6366f1;
  background: linear-gradient(135deg, #4f46e5, #7c3aed);
  color: #fff;
  font-weight: 700;
  cursor: pointer;
}

.et-paradigmai-seed-btn:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

.email-templates-workspace-banner {
  border: 1px solid #cbd5e1;
  background: #f8fafc;
}

.email-templates-workspace-banner--trial {
  border-color: #fcd34d;
  background: #fffbeb;
}

.page-contact-import .import-success-link {
  display: inline-block;
  margin-top: 8px;
  font-weight: 600;
}

/* Contact Details: make Cadence AI feel intentionally separate from normal contact data. */
.contact-ai-panel {
  position: relative;
  overflow: hidden;
  border: 1px solid #2a4d95;
  background:
    radial-gradient(circle at top right, rgba(124, 58, 237, 0.22), transparent 36%),
    linear-gradient(135deg, #0b1636 0%, #142852 100%);
  color: #ffffff;
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.22), 0 0 0 1px rgba(255, 255, 255, 0.05) inset;
}

.contact-ai-panel::before {
  content: "AI";
  position: absolute;
  top: 14px;
  right: 16px;
  font-size: 42px;
  font-weight: 900;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.12);
  pointer-events: none;
}

.contact-ai-panel h3 {
  margin-bottom: 4px;
  color: #ffffff;
}

.contact-ai-panel .contact-ai-panel-head {
  display: block;
}

.contact-ai-robot {
  display: flex;
  justify-content: center;
  margin: -8px 0 10px;
}

.contact-ai-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0 0 10px;
  font-size: 1.15rem;
}

.contact-ai-claude-logo {
  width: 26px;
  height: 26px;
  flex: 0 0 auto;
  filter: drop-shadow(0 0 8px rgba(217, 119, 87, 0.45));
}

#aiLeadScoreBtn {
  margin: 0 0 10px;
}

.contact-ai-objection-field {
  margin-top: 16px;
}

.contact-ai-panel .hint,
.contact-ai-panel .contact-modal-field-label {
  color: #ffffff;
}

.contact-ai-panel p,
.contact-ai-panel strong,
.contact-ai-panel li {
  color: #ffffff;
}

.contact-ai-panel textarea {
  border-color: #2a4d95;
  background: #10244b;
  color: #f8fafc;
}

.contact-ai-panel textarea::placeholder {
  color: rgba(255, 255, 255, 0.62);
}

.contact-ai-panel button {
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: linear-gradient(135deg, #4f46e5, #7c3aed);
  color: #ffffff;
  box-shadow: 0 10px 24px rgba(79, 70, 229, 0.28);
}

.contact-ai-result-card {
  border-color: #2a4d95;
  background: #142852;
  color: #ffffff;
}

/* ── AI Panel: ID-specificity overrides to guarantee dark theme ───────── */
/* .panel sets background:#fff at specificity 0,1,0; #contactAiPanel wins at 1,0,0 */
#contactAiPanel {
  background:
    radial-gradient(circle at top right, rgba(124, 58, 237, 0.22), transparent 36%),
    linear-gradient(135deg, #0b1636 0%, #142852 100%) !important;
  border: 1px solid #2a4d95 !important;
  color: #ffffff;
}

#contactAiPanel h3,
#contactAiPanel .contact-modal-field-label,
#contactAiPanel .hint,
#contactAiPanel p,
#contactAiPanel strong,
#contactAiPanel li {
  color: #ffffff;
}

#contactAiPanel button:not(.danger) {
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: linear-gradient(135deg, #4f46e5, #7c3aed);
  color: #ffffff;
  box-shadow: 0 4px 14px rgba(79, 70, 229, 0.35);
}

#contactAiPanel button:not(.danger):hover {
  background: linear-gradient(135deg, #4338ca, #6d28d9);
}

/* ── Contact Details Tab System ───────────────────────────────────────── */
.cd-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  border-bottom: 2px solid #e5e7eb;
  margin: 12px 0 0 0;
  padding: 0;
  list-style: none;
}

.cd-tab {
  padding: 9px 18px;
  border: 1px solid transparent;
  border-bottom: none;
  background: #f9fafb;
  cursor: pointer;
  font-size: 13.5px;
  font-weight: 500;
  color: #6b7280;
  border-radius: 6px 6px 0 0;
  margin-bottom: -2px;
  transition: color 0.12s, background 0.12s, border-color 0.12s;
  white-space: nowrap;
}

.cd-tab:hover {
  color: #1d4ed8;
  background: #eff6ff;
  border-color: #bfdbfe;
}

.cd-tab.cd-tab--active {
  color: #1d4ed8;
  background: #ffffff;
  border-color: #e5e7eb;
  border-bottom-color: #ffffff;
  font-weight: 600;
}

.cd-tab-panel {
  display: none;
  padding: 16px 0 4px 0;
}

.cd-tab-panel.cd-tab-panel--active {
  display: block;
}

/* badge on tab showing filled-field count */
.cd-tab-badge {
  display: inline-block;
  min-width: 18px;
  padding: 1px 5px;
  margin-left: 5px;
  font-size: 11px;
  font-weight: 700;
  line-height: 16px;
  border-radius: 9px;
  background: #dbeafe;
  color: #1d4ed8;
  vertical-align: middle;
}

.cd-tab--active .cd-tab-badge {
  background: #1d4ed8;
  color: #fff;
}

/* field grid inside panels */
.cd-field-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px 16px;
}

/* ── Responsive: stack tabs on small screens ──────────────────────────── */
@media (max-width: 600px) {
  .cd-tab {
    padding: 7px 12px;
    font-size: 12.5px;
  }
}

.contact-form-left {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.contact-form-right {
  display: grid;
  gap: 12px;
  align-content: start;
  position: sticky;
  top: 16px;
}

/* ── Contact full edit form: distinct, labeled section cards ─────────────
   The stacked #cd-panel-* blocks used to run together with no separation.
   Card them (matching the summary-view cards) and inject a header label via
   ::before so each section is clearly identifiable — CSS only, no HTML change. */
#contactPageForm #cd-panel-info,
#contactPageForm #cd-panel-demographics,
#contactPageForm #cd-panel-coverage,
#contactPageForm #cd-panel-notes {
  position: relative;
  padding: 16px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
}

#contactPageForm #cd-panel-info::before,
#contactPageForm #cd-panel-demographics::before,
#contactPageForm #cd-panel-coverage::before,
#contactPageForm #cd-panel-notes::before {
  display: block;
  margin: 0 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid #eef2f7;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #4f46e5;
}
#contactPageForm #cd-panel-info::before { content: "Contact & Lead Details"; }
#contactPageForm #cd-panel-demographics::before { content: "Demographics & Address"; }
#contactPageForm #cd-panel-coverage::before { content: "Coverage & Billing"; }
#contactPageForm #cd-panel-notes::before { content: "Notes, Follow-up & Tasks"; }

/* Coverage tab — larger quote amount */
#contactPageForm #cd-panel-coverage .contact-modal-field-label[for="quote"] {
  font-size: 17px;
  font-weight: 700;
}

#contactPageForm #cd-panel-coverage input#quote {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.25;
  min-height: 46px;
  padding: 8px 12px;
}

body.contact-full-mode #contactPageForm #cd-panel-coverage .contact-modal-field-label[for="quote"] {
  font-size: 18px !important;
}

body.contact-full-mode #contactPageForm #cd-panel-coverage input#quote {
  font-size: 26px !important;
  font-weight: 700 !important;
  min-height: 48px !important;
  height: auto !important;
}

/* A bit more breathing room between the stacked section cards. */
#contactPageForm .contact-form-left,
#contactPageForm .contact-form-right {
  gap: 16px;
}

#contactPageForm #email,
#contactPageForm #primary_phone,
#contactPageForm #secondary_phone {
  font-weight: 700;
}

/* Contact details redesign — final unified field sizing (overrides legacy #contactPageForm rules). */
body.contact-full-mode #contactPageForm .contact-details-section-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

body.contact-full-mode #contactPageForm .contact-details-section-grid > .contact-field-box,
body.contact-full-mode #contactPageForm .contact-details-section-grid > .contact-status-box {
  width: 100%;
  min-width: 0;
  align-self: stretch;
}

body.contact-full-mode #contactPageForm .contact-details-section-grid .contact-modal-field-label:not([for="first_name"]):not([for="last_name"]):not([for="quote"]),
body.contact-full-mode #contactPageForm .contact-details-section-grid .contact-status-box .contact-modal-field-label {
  display: block !important;
  width: 100%;
  margin: 0 0 6px !important;
  padding: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #475569 !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: 0.02em;
  line-height: 1.3;
}

body.contact-full-mode #contactPageForm .contact-details-section-grid .contact-field-box > input:not([type="hidden"]):not(#first_name):not(#last_name):not(#quote),
body.contact-full-mode #contactPageForm .contact-details-section-grid .contact-field-box > select,
body.contact-full-mode #contactPageForm .contact-details-section-grid .contact-status-box > select,
body.contact-full-mode #contactPageForm .contact-details-section-grid .contact-field-box > .crm-password-wrap > input {
  display: block;
  width: 100% !important;
  max-width: none;
  min-width: 0;
  height: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
  margin: 0 !important;
  padding: 8px 12px !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 8px !important;
  background: #f8fbff !important;
  color: #0f172a !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 1.25 !important;
  box-sizing: border-box !important;
}

body.contact-full-mode #contactPageForm .contact-details-section-grid .contact-field-box > textarea {
  display: block;
  width: 100% !important;
  height: auto !important;
  min-height: 112px !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 10px 12px !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 1.45 !important;
  box-sizing: border-box !important;
}

body.contact-full-mode #contactPageForm .contact-details-section-grid .contact-field-box > .crm-password-wrap {
  width: 100%;
}

body.contact-full-mode #contactPageForm .contact-details-section-grid > .contact-status-box {
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
}

body.contact-full-mode #contactPageForm .contact-details-section-grid #contactStatusSelect,
body.contact-full-mode #contactPageForm .contact-details-section-grid #contactOutcomeSelect {
  border-color: #cbd5e1 !important;
  background: #f8fbff !important;
}

/* Identity name fields — prominent blue labels and large bold values (Contact Details). */
body.contact-full-mode #contactPageForm .contact-details-section-grid .contact-modal-field-label[for="first_name"],
body.contact-full-mode #contactPageForm .contact-details-section-grid .contact-modal-field-label[for="last_name"] {
  display: block !important;
  width: 100% !important;
  box-sizing: border-box;
  margin: 0 0 6px !important;
  padding: 7px 12px !important;
  border-radius: 4px !important;
  background: #1e5fbf !important;
  color: #ffffff !important;
  font-size: 16px !important;
  font-weight: 900 !important;
  letter-spacing: 0.02em;
}

body.contact-full-mode #contactPageForm .contact-details-section-grid .contact-field-box > input#first_name,
body.contact-full-mode #contactPageForm .contact-details-section-grid .contact-field-box > input#last_name {
  height: auto !important;
  min-height: auto !important;
  max-height: none !important;
  padding: 14px 16px !important;
  font-size: 24px !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
  background: #f8fbff !important;
}

/* Quote field emphasis in full details mode (Coverage section). */
body.contact-full-mode #contactPageForm .contact-details-section-grid .contact-modal-field-label[for="quote"] {
  font-size: 17px !important;
  font-weight: 700 !important;
  color: #1e3a8a !important;
}

body.contact-full-mode #contactPageForm .contact-details-section-grid .contact-field-box > input#quote {
  font-size: 26px !important;
  font-weight: 700 !important;
  min-height: 48px !important;
  height: 48px !important;
  padding: 8px 12px !important;
  color: #1e3a8a !important;
}

/* Quote emphasis — survives JS layout move into Coverage section */
body.contact-full-mode #contactPageForm .contact-quote-emphasis .contact-modal-field-label[for="quote"] {
  font-size: 17px !important;
  font-weight: 700 !important;
  color: #1e3a8a !important;
}

body.contact-full-mode #contactPageForm .contact-quote-emphasis input#quote {
  font-size: 26px !important;
  font-weight: 700 !important;
  min-height: 48px !important;
  height: 48px !important;
  max-height: none !important;
  padding: 8px 12px !important;
  color: #1e3a8a !important;
  line-height: 1.2 !important;
}

/* ── Contact: Do Not Email opt-out toggle ──────────────────────────────── */
.contact-do-not-email-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 6px 10px;
  border: 1px solid #fecaca;
  border-radius: 8px;
  background: #fef2f2;
  color: #991b1b;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.contact-do-not-email-toggle input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: #dc2626;
  cursor: pointer;
}

/* ── Recycle bin (deleted contacts) ────────────────────────────────────────── */
.recycle-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  margin-top: 12px;
}
.recycle-table th,
.recycle-table td {
  text-align: left;
  padding: 8px 10px;
  border-bottom: 1px solid #e2e8f0;
}
.recycle-table th {
  color: #64748b;
  font-weight: 600;
  font-size: 13px;
}
.recycle-table button {
  padding: 4px 12px;
}

/* ── Send Email: compact Insert Image panel ────────────────────────────── */
.email-image-insert-panel {
  display: grid;
  gap: 8px;
  margin: 8px 0;
  padding: 10px 12px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #f8fafc;
}
.email-image-insert-url-row {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  align-items: center;
}
.email-image-insert-url-row .email-rich-image-url {
  flex: 1;
  width: auto;
  min-width: 0;
  margin-top: 0;
}
.email-image-insert-url-row button {
  width: auto;
  margin-top: 0;
  flex-shrink: 0;
  padding: 6px 14px;
  font-size: 12px;
  white-space: nowrap;
}

/* ── Send Email: live rendered preview ─────────────────────────────────── */
.email-live-preview-wrap {
  margin: 10px 0 4px;
}
.email-live-preview-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
  /* Match the 12px padding + 1px border inset of the attachments panel so the
     "Show preview" button lines up with the "Add" button below it. */
  padding-right: 13px;
}
.email-live-preview-frame {
  width: 100%;
  height: 520px;
  border: 1px solid #cbd5e1;
  border-radius: 12px;
  background: #e2e8f0;
}
/* Keep "Show preview" and "Add" compact and matched (not full-width bars). */
#emailLivePreviewToggleBtn,
#emailAttachmentAddBtn {
  width: 160px;
  max-width: 100%;
  flex: 0 0 auto;
  margin: 0;
}
/* Keep the "send once per tag" checkbox at its natural size so it sits next
   to its label instead of stretching to full width. */
#emailBulkSkipSent {
  width: auto;
  flex: 0 0 auto;
  margin: 0;
}

/* ── Send Email: To-field contact autocomplete ─────────────────────────── */
.email-to-suggest-anchor {
  position: relative;
}
.email-to-suggest {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 60;
  max-height: 280px;
  overflow-y: auto;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  background: #ffffff;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.16);
}
.email-to-suggest-item {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 8px 12px;
  cursor: pointer;
}
.email-to-suggest-item:hover,
.email-to-suggest-item.is-active {
  background: #eef2ff;
}
.email-to-suggest-item strong {
  font-size: 13px;
  color: #0f172a;
}
.email-to-suggest-item span {
  font-size: 12px;
  color: #64748b;
}

.email-to-suggest-item--dne {
  opacity: 0.92;
}

.email-to-suggest-item--dne:hover,
.email-to-suggest-item--dne.is-active {
  background: #fef2f2;
}

.email-to-suggest-dne {
  display: inline-block;
  margin-top: 4px;
  padding: 2px 7px;
  border-radius: 999px;
  background: #fee2e2;
  color: #b91c1c;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* ── Send Email: tag campaign + recent opens panels ────────────────────── */
.email-bulk-campaign-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin: 8px 0;
}
.email-bulk-campaign-controls select {
  width: auto;
  min-width: 180px;
  max-width: 240px;
  flex: 0 1 auto;
}
.email-bulk-campaign-controls button {
  width: auto;
  min-width: 0;
  margin: 0;
  padding: 9px 18px;
  font-size: 13px;
  font-weight: 600;
  border-radius: 8px;
}
#emailBulkQueueMsg {
  margin: 6px 0;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
}
.email-bulk-campaigns {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 10px 0;
}
.email-bulk-campaign-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
}
.email-bulk-campaign-text {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  font-weight: 500;
  color: #334155;
  line-height: 1.45;
}
.email-bulk-campaign-cancel,
.email-bulk-campaign-pause,
.email-bulk-campaign-resume {
  width: auto;
  min-width: 0;
  flex: 0 0 auto;
  margin: 0;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 8px;
}
.email-bulk-campaign-pause {
  border: 0;
  color: #ffffff;
  background: #d97706;
  cursor: pointer;
}
.email-bulk-campaign-pause:hover {
  background: #b45309;
}
.email-bulk-campaign-resume {
  border: 0;
  color: #ffffff;
  background: #16a34a;
  cursor: pointer;
}
.email-bulk-campaign-resume:hover {
  background: #15803d;
}
.email-bulk-campaign-wrap {
  background: #eef2ff;
  border: 2px solid #818cf8;
  border-radius: 12px;
}
.email-bulk-campaign-wrap .email-page-section-heading {
  color: #4338ca;
}
#emailBulkStatusLine {
  font-weight: 600;
  color: #334155;
}
.email-recent-opens-list {
  display: grid;
  gap: 6px;
}
.email-recent-open-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px;
  padding: 7px 10px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #f8fafc;
  font-size: 13px;
}
.email-recent-open-who {
  font-weight: 700;
  color: #4f46e5;
  text-decoration: none;
}
a.email-recent-open-who:hover {
  text-decoration: underline;
}
.email-recent-open-meta {
  color: #475569;
}

/* ── Send Email: inline AI draft panel ─────────────────────────────────── */
.page-send-email .email-ai-draft-panel {
  margin: 12px 0 16px;
  padding: 14px 16px;
  background: linear-gradient(135deg, #f5f3ff 0%, #faf8ff 55%, #ffffff 100%);
  border: 1px solid #ddd6fe;
  border-radius: 12px;
}

.page-send-email .email-ai-draft-inner {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.page-send-email .email-ai-draft-content {
  flex: 1;
  min-width: 0;
  position: relative;
  z-index: 1;
}

.page-send-email .email-ai-purpose-custom-wrap:not([hidden]) {
  display: flex;
  grid-column: 1 / -1;
}

.page-send-email .email-ai-purpose-custom-wrap input {
  pointer-events: auto;
}

.page-send-email .email-ai-draft-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  margin-bottom: 4px;
}

.page-send-email .email-ai-draft-head .email-page-section-heading {
  margin: 0;
}

.page-send-email .email-ai-draft-lead {
  margin: 0 0 12px;
}

.page-send-email .email-ai-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  border: 1px solid #c7d2fe;
  background: #eef2ff;
  color: #4338ca;
}

.page-send-email .email-ai-status-badge[data-state="ready"] {
  border-color: #86efac;
  background: #ecfdf5;
  color: #15803d;
}

.page-send-email .email-ai-status-badge[data-state="unconfigured"],
.page-send-email .email-ai-status-badge[data-state="error"] {
  border-color: #fecaca;
  background: #fef2f2;
  color: #b91c1c;
}

.page-send-email .email-ai-draft-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px 12px;
}

.page-send-email .email-ai-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
}

.page-send-email .email-ai-context-field {
  grid-column: 1 / -1;
}

.page-send-email .email-ai-field .contact-modal-field-label {
  margin: 0;
}

.page-send-email .email-ai-field select,
.page-send-email .email-ai-field input,
.page-send-email .email-ai-field textarea {
  width: 100%;
  margin-top: 0;
  box-sizing: border-box;
}

.page-send-email .email-ai-draft-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.page-send-email .email-ai-generate-btn {
  width: auto;
  margin-top: 0;
  background: linear-gradient(135deg, #6366f1, #4f46e5);
  border-color: #4f46e5;
}

.page-send-email .email-ai-draft-actions .agile-cancel-btn {
  width: auto;
  margin-top: 0;
}

.page-send-email .email-ai-robot {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 130px;
  padding-top: 4px;
  pointer-events: none;
  z-index: 0;
}

.page-send-email .email-ai-robot lottie-player {
  pointer-events: none;
}

.page-send-email .email-ai-robot-tip {
  margin: 0;
  text-align: center;
  font-size: 0.76rem;
  line-height: 1.4;
  color: #6366f1;
  font-style: italic;
  font-weight: 500;
}

.page-send-email .email-ai-draft-result {
  margin-top: 14px;
  padding: 12px 14px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #ffffff;
}

.page-send-email .email-ai-result-title {
  margin: 0 0 6px;
  font-size: 15px;
  color: #0f172a;
}

.page-send-email .email-ai-result-note {
  margin: 0 0 10px;
}

.page-send-email .email-ai-result-body {
  margin: 8px 0 12px;
  padding: 10px 12px;
  border-radius: 8px;
  background: #f8fafc;
  font-size: 14px;
  line-height: 1.55;
  color: #1e293b;
}

.page-send-email .email-ai-result-body p {
  margin: 0 0 10px;
}

.page-send-email .email-ai-result-body p:last-child {
  margin-bottom: 0;
}

.page-send-email .email-ai-result-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.page-send-email .email-ai-use-draft-btn {
  width: auto;
  margin-top: 0;
  background: linear-gradient(135deg, #16a34a, #15803d);
  border-color: #15803d;
}

.page-send-email .email-ai-result-actions .agile-cancel-btn {
  width: auto;
  margin-top: 0;
}

.page-send-email .email-ai-error {
  margin: 0;
  color: #b91c1c;
  font-size: 13px;
}

.page-send-email .email-ai-purpose-select.email-ai-field--error {
  border-color: #f87171;
  box-shadow: 0 0 0 2px rgba(248, 113, 113, 0.25);
}

@media (max-width: 720px) {
  .page-send-email .email-ai-draft-inner {
    flex-direction: column;
  }

  .page-send-email .email-ai-robot {
    flex-direction: row;
    width: 100%;
    justify-content: flex-start;
    padding-top: 0;
  }

  .page-send-email .email-ai-robot-tip {
    text-align: left;
    max-width: 14rem;
  }
}

/* ── Settings: Contact Workspace labels — chip editor ───────────────────── */
.crm-label-chip-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 10px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #f8fafc;
  min-height: 46px;
}
.crm-label-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px 5px 12px;
  border: 1px solid #c7d2fe;
  border-radius: 999px;
  background: #eef2ff;
  color: #1e293b;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  user-select: none;
}
.crm-label-chip[draggable="true"] {
  cursor: grab;
}
.crm-label-chip.is-dragging {
  opacity: 0.45;
  cursor: grabbing;
}
.crm-label-chip[data-renamable="1"] .crm-label-chip-text {
  cursor: text;
}
.crm-label-chip[data-renamable="1"] .crm-label-chip-text:hover {
  text-decoration: underline dotted;
}
.crm-label-chip-count {
  padding: 1px 7px;
  border-radius: 999px;
  background: #4f46e5;
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
}
.crm-label-chip-x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #64748b;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}
.crm-label-chip-x:hover {
  background: #dc2626;
  color: #ffffff;
}
.crm-label-chip--pending {
  background: #fffbeb;
  border-color: #fcd34d;
  padding-left: 6px;
}
.crm-label-chip--pending select {
  border: 0;
  background: transparent;
  font-size: 13px;
  font-weight: 600;
}
.crm-label-chip-edit {
  width: 130px;
  padding: 2px 6px;
  border: 1px solid #4f46e5;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
}
.crm-label-chip-add-input {
  flex: 1 0 200px;
  min-width: 180px;
  padding: 6px 10px;
  border: 1px dashed #94a3b8;
  border-radius: 999px;
  background: #ffffff;
  font-size: 13px;
}
.crm-label-chip-add-input:focus {
  border-style: solid;
  border-color: #4f46e5;
  outline: none;
}

/* Sticky save bar — appears only with unsaved label changes. */
.crm-labels-sticky-bar {
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translate(-50%, 80px);
  z-index: 1200;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 16px;
  border: 1px solid #c7d2fe;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.22);
  opacity: 0;
  pointer-events: none;
  transition: transform 200ms ease, opacity 200ms ease;
}
.crm-labels-sticky-bar.is-visible {
  transform: translate(-50%, 0);
  opacity: 1;
  pointer-events: auto;
}
.crm-labels-sticky-bar-text {
  font-size: 13px;
  font-weight: 700;
  color: #92400e;
}
.crm-labels-sticky-bar-text::before {
  content: "● ";
  color: #f59e0b;
}
.crm-labels-sticky-bar-save {
  padding: 8px 16px;
  border: 0;
  border-radius: 8px;
  background: #4f46e5;
  color: #ffffff;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.crm-labels-sticky-bar-save:hover {
  background: #4338ca;
}

/* Chip lists must flow as wrapping rows — the legacy editor rule above forces
   a column at #id specificity, so match it and restore the row layout. */
#contactWorkspaceLabelsSection .crm-label-list-editor.crm-label-chip-list {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  align-content: flex-start;
  justify-content: flex-start;
}
#contactWorkspaceLabelsSection .crm-label-chip-list .crm-label-chip {
  flex: 0 0 auto;
  width: auto;
}
#contactWorkspaceLabelsSection .crm-label-chip-list .crm-label-chip-add-input {
  flex: 0 1 230px;
  width: 230px;
  max-width: 100%;
  height: 32px;
  min-height: 32px;
  padding: 4px 12px;
  box-sizing: border-box;
}

/* "+ Add field…" picker for Quick Filter / Sort By chip lists — styled to
   match the dashed inline add box on the label lists. */
#contactWorkspaceLabelsSection .crm-label-chip-list .crm-label-chip-add-select {
  flex: 0 1 200px;
  width: 200px;
  max-width: 100%;
  height: 32px;
  min-height: 32px;
  padding: 4px 10px;
  border: 1px dashed #94a3b8;
  border-radius: 999px;
  background: #ffffff;
  color: #475569;
  font-size: 13px;
  font-weight: 600;
  box-sizing: border-box;
  cursor: pointer;
}
#contactWorkspaceLabelsSection .crm-label-chip-list .crm-label-chip-add-select:focus {
  border-style: solid;
  border-color: #4f46e5;
  outline: none;
}

/* Save feedback inside the floating labels bar. */
.crm-labels-sticky-bar-status {
  font-size: 13px;
  font-weight: 700;
  color: #475569;
  max-width: 420px;
}
.crm-labels-sticky-bar.is-saving .crm-labels-sticky-bar-status {
  color: #475569;
}
.crm-labels-sticky-bar.is-saved {
  border-color: #86efac;
}
.crm-labels-sticky-bar.is-saved .crm-labels-sticky-bar-status {
  color: #047857;
}
.crm-labels-sticky-bar.is-saved .crm-labels-sticky-bar-text {
  display: none;
}
.crm-labels-sticky-bar.is-error {
  border-color: #fca5a5;
}
.crm-labels-sticky-bar.is-error .crm-labels-sticky-bar-status {
  color: #b91c1c;
}
.crm-labels-sticky-bar-save:disabled {
  opacity: 0.6;
  cursor: wait;
}