@import url('https://fonts.googleapis.com/css2?family=Lexend+Deca:wght@300;400;500;600;700&display=swap');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: #f5f5f5;
  color: #333;
}

/* Legacy .container (overridden by the HubSpot theme shell at the end of this file) */

/* Navbar */
.navbar {
  background: white;
  padding: 15px 30px;
  border-radius: 8px;
  margin-bottom: 20px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.navbar h1 {
  margin: 0;
  font-size: 24px;
  color: #1a1a1a;
}

.navbar-links {
  display: flex;
  gap: 5px;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.navbar-links.loaded {
  opacity: 1;
}

.navbar-links a,
.navbar-links button {
  padding: 10px 20px;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  border: none;
  cursor: pointer;
  transition: all 0.2s;
  background: #f3f4f6;
  color: #374151;
}

.navbar-links a:hover,
.navbar-links button:hover {
  background: #e5e7eb;
}

.navbar-links a.active {
  background: #2563eb;
  color: white;
}

.navbar-links button.logout {
  background: #dc2626;
  color: white;
}

.navbar-links button.logout:hover {
  background: #b91c1c;
}

.logged-in-label {
  font-size: 12px;
  color: #6b7280;
  text-align: right;
  margin-top: -14px;
  margin-bottom: 4px;
}

/* Notification Bell */
.notif-bell-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.notif-bell-btn {
  position: relative;
  background: #f3f4f6;
  border: none;
  border-radius: 6px;
  padding: 8px 12px;
  cursor: pointer;
  color: #374151;
  display: flex;
  align-items: center;
  transition: all 0.2s;
}

.notif-bell-btn:hover {
  background: #e5e7eb;
}

.notif-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background: #dc2626;
  color: white;
  font-size: 10px;
  font-weight: 700;
  min-width: 18px;
  height: 18px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
}

.notif-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 360px;
  max-height: 480px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.15);
  z-index: 1000;
  overflow: hidden;
}

.notif-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px;
  border-bottom: 1px solid #f3f4f6;
}

.notif-panel-title {
  font-weight: 600;
  font-size: 15px;
  color: #1a1a1a;
}

.notif-mark-all {
  background: none;
  border: none;
  color: #2563eb;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
}

.notif-mark-all:hover {
  text-decoration: underline;
}

.notif-list {
  max-height: 420px;
  overflow-y: auto;
}

.notif-empty {
  padding: 40px 16px;
  text-align: center;
  color: #9ca3af;
  font-size: 14px;
}

.notif-item {
  padding: 12px 16px;
  cursor: pointer;
  border-bottom: 1px solid #f9fafb;
  transition: background 0.15s;
}

.notif-item:hover {
  background: #f9fafb;
}

.notif-unread {
  background: #eff6ff;
  border-left: 3px solid #2563eb;
}

.notif-unread:hover {
  background: #dbeafe;
}

.notif-read {
  opacity: 0.7;
}

.notif-item-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2px;
}

.notif-sender {
  font-weight: 600;
  font-size: 13px;
  color: #1a1a1a;
}

.notif-time {
  font-size: 11px;
  color: #9ca3af;
}

.notif-contact {
  font-size: 12px;
  color: #6b7280;
  margin-bottom: 4px;
}

.notif-contact strong {
  color: #374151;
}

.notif-preview {
  font-size: 12px;
  color: #9ca3af;
  font-style: italic;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* @Mention Autocomplete */
.mention-dropdown {
  position: absolute;
  bottom: 100%;
  left: 0;
  width: 220px;
  max-height: 180px;
  overflow-y: auto;
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  z-index: 100;
  margin-bottom: 4px;
}

.mention-option {
  padding: 8px 14px;
  font-size: 14px;
  cursor: pointer;
  color: #374151;
}

.mention-option:hover,
.mention-active {
  background: #eff6ff;
  color: #2563eb;
}

/* @Mention tags in messages */
.mention-tag {
  background: #dbeafe;
  color: #1d4ed8;
  padding: 1px 4px;
  border-radius: 4px;
  font-weight: 600;
  font-size: 0.95em;
}

/* Message highlight animation (when clicking a notification) */
.message-highlight {
  animation: highlightPulse 3s ease-out;
}

@keyframes highlightPulse {
  0% { box-shadow: 0 0 0 3px #2563eb; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

/* Dashboard header / stats */
header {
  background: white;
  padding: 30px;
  border-radius: 8px;
  margin-bottom: 20px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

header h1 {
  margin-bottom: 20px;
  color: #1a1a1a;
}

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
}

.stat-box {
  display: flex;
  flex-direction: column;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 6px;
}

.stat-label {
  font-size: 14px;
  color: #666;
  margin-bottom: 8px;
}

.stat-value {
  font-size: 32px;
  font-weight: bold;
  color: #2563eb;
}

/* AI toggle */
.ai-toggle-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  background: #f8f9fa;
  border-radius: 6px;
}

.ai-toggle-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ai-toggle-title {
  font-size: 14px;
  font-weight: 600;
  color: #1a1a1a;
}

.ai-toggle-desc {
  font-size: 11px;
  color: #6b7280;
}

.toggle-switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  cursor: pointer;
  flex-shrink: 0;
}

.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-slider {
  position: absolute;
  inset: 0;
  background: #d1d5db;
  border-radius: 24px;
  cursor: pointer;
  transition: background 0.2s;
}

.toggle-slider::before {
  content: '';
  position: absolute;
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background: white;
  border-radius: 50%;
  transition: transform 0.2s;
}

.toggle-switch input:checked + .toggle-slider {
  background: #10b981;
}

.toggle-switch input:checked + .toggle-slider::before {
  transform: translateX(20px);
}

/* Main layout */
.main-content {
  display: grid;
  grid-template-columns: 400px 1fr;
  gap: 20px;
  height: calc(100vh - 240px);
}

.sidebar,
.chat-area {
  background: white;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.sidebar {
  overflow: hidden;
}

#conversationsList {
  flex: 1;
  min-height: 0;
}

/* Search & filters */
.search-row {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}

.search-row input {
  flex: 1;
  padding: 10px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-family: inherit;
  font-size: 14px;
}

.filter-btn {
  padding: 10px 14px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  background: white;
  cursor: pointer;
  font-size: 14px;
  color: #374151;
  white-space: nowrap;
}

.filter-btn:hover { background: #f3f4f6; }

.filter-btn.has-filters {
  border-color: #2563eb;
  color: #2563eb;
  background: #eff6ff;
}

.filter-panel {
  display: none;
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 10px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.filter-panel h4 {
  margin: 0 0 10px;
  font-size: 13px;
  color: #6b7280;
  text-transform: uppercase;
}

.filter-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}

.filter-tag {
  padding: 5px 12px;
  border: 1px solid #d1d5db;
  border-radius: 20px;
  background: white;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  color: #374151;
  transition: all 0.15s;
}

.filter-tag:hover { background: #f3f4f6; }

.filter-tag.active {
  background: #2563eb;
  color: white;
  border-color: #2563eb;
}

.filter-clear {
  font-size: 12px;
  color: #6b7280;
  cursor: pointer;
  border: none;
  background: none;
  text-decoration: underline;
}

.filter-clear:hover { color: #374151; }

/* Tabs */
.tabs {
  display: flex;
  gap: 10px;
  margin-bottom: 15px;
  padding-bottom: 15px;
  border-bottom: 1px solid #e5e5e5;
}

.tab {
  padding: 8px 16px;
  border: none;
  background: #f0f0f0;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
}

.tab.active {
  background: #2563eb;
  color: white;
}

/* Conversation list */
#conversationsList {
  flex: 1;
  overflow-y: auto;
  max-height: calc(100vh - 350px);
}

.conversation-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 15px;
  border-bottom: 1px solid #e5e5e5;
  transition: background 0.2s;
  gap: 10px;
}

.conversation-content {
  flex: 1;
  cursor: pointer;
  min-width: 0;
}

.conversation-item:hover {
  background: #f8f9fa;
}

.conversation-item.selected {
  background: #e3f2fd;
  border-left: 3px solid #2563eb;
}

.conversation-phone {
  font-weight: 600;
  margin-bottom: 5px;
}

.conversation-preview {
  font-size: 14px;
  color: #666;
  margin-bottom: 5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.conversation-meta {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: #999;
}

.status-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
}

.status-new { background: #fef3c7; color: #92400e; }
.status-active { background: #d1fae5; color: #065f46; }
.status-complete { background: #e5e7eb; color: #374151; }
.status-opted_out { background: #fee2e2; color: #991b1b; }
.status-paused { background: #fed7aa; color: #9a3412; }

/* Conversation menu */
.conversation-menu {
  position: relative;
  flex-shrink: 0;
}

.menu-btn {
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  padding: 5px 10px;
  color: #666;
}

.menu-btn:hover {
  background: #f0f0f0;
  border-radius: 4px;
}

.menu-dropdown {
  position: absolute;
  right: 0;
  top: 30px;
  background: white;
  border: 1px solid #ddd;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  z-index: 1000;
  min-width: 150px;
}

.menu-dropdown button {
  display: block;
  width: 100%;
  padding: 10px 15px;
  border: none;
  background: none;
  text-align: left;
  cursor: pointer;
  font-size: 14px;
}

.menu-dropdown button:hover {
  background: #f5f5f5;
}

.menu-dropdown button.danger {
  color: #dc2626;
}

.menu-dropdown button.danger:hover {
  background: #fee2e2;
}

/* Chat area */
#conversationHeader {
  padding-bottom: 15px;
  border-bottom: 2px solid #e5e5e5;
  margin-bottom: 15px;
}

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

.convo-header-info {
  flex-shrink: 0;
}

.convo-header-info p {
  margin-top: 4px;
  white-space: nowrap;
}

.convo-header-info .convo-phone {
  color: #666;
  font-size: 14px;
}

.convo-header-actions {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: nowrap;
  flex-shrink: 0;
}

/* Shared size for all header action buttons */
.convo-header-actions a,
.convo-header-actions button {
  padding: 5px 10px !important;
  font-size: 12px !important;
  white-space: nowrap;
}

.btn-external-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  background: #f3f4f6;
  color: #6b7280;
  text-decoration: none;
  transition: all 0.2s;
}

.btn-external-link:hover {
  background: #e5e7eb;
  color: #2563eb;
}

.btn-close-convo {
  background: #6b7280;
  color: white;
  border-radius: 6px;
  border: none;
  font-weight: 600;
  cursor: pointer;
}

.btn-reopen-convo {
  background: #10b981;
  color: white;
  border-radius: 6px;
  border: none;
  font-weight: 600;
  cursor: pointer;
}

.hubspot-btn {
  background: #ff7a59;
  color: white;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 600;
  display: inline-block;
}

.hubspot-btn:hover {
  background: #ff6243;
}

/* Messages */
#messagesList {
  flex: 1;
  overflow-y: auto;
  padding: 10px 0;
  max-height: calc(100vh - 450px);
}

.message {
  margin-bottom: 15px;
  padding: 12px;
  border-radius: 8px;
  max-width: 80%;
}

.message.incoming {
  background: #f0f0f0;
  margin-right: auto;
}

.message.outgoing {
  background: #2563eb;
  color: white;
  margin-left: auto;
}

.message.outgoing.comment {
  background: #fef9c3;
  color: #1a1a1a;
  margin-left: auto;
  border: 1px solid #fde047;
}

.message.outgoing.email-followup {
  background: #7c3aed;
  color: white;
  margin-left: auto;
}

.email-badge {
  display: inline-block;
  background: rgba(255,255,255,0.25);
  color: white;
  font-size: 10px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 4px;
  margin-left: 6px;
  vertical-align: middle;
  letter-spacing: 0.5px;
}

.message-text {
  margin-bottom: 5px;
}

.message-time {
  font-size: 11px;
  opacity: 0.7;
}

/* Message input */
#messageInput {
  border-top: 2px solid #e5e5e5;
  padding-top: 15px;
  margin-top: 15px;
}

#replyText {
  width: 100%;
  padding: 12px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-family: inherit;
  font-size: 14px;
  resize: vertical;
  min-height: 80px;
}

.input-actions {
  display: flex;
  gap: 10px;
  margin-top: 10px;
}

.input-actions button {
  padding: 10px 20px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
}

#sendBtn {
  background: var(--brand-blue);
  color: white;
}

#commentBtn {
  background: var(--hs-teal);
  color: #ffffff;
}

#pauseBtn,
#triggerAiBtn {
  background: white;
  color: #675f5f;
  border: 1px solid #d1d5db !important;
}

#triggerAiBtn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

button:hover {
  opacity: 0.9;
}

/* ===== Login Page ===== */
.login-container {
  max-width: 400px;
  margin: 100px auto;
  padding: 40px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.login-container h1 {
  text-align: center;
  margin-bottom: 30px;
  color: #1a1a1a;
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  font-weight: 600;
  margin-bottom: 8px;
  color: #333;
}

.form-group input {
  width: 100%;
  padding: 12px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 14px;
}

.login-btn {
  width: 100%;
  padding: 12px;
  background: #2563eb;
  color: white;
  border: none;
  border-radius: 6px;
  font-weight: 600;
  font-size: 16px;
  cursor: pointer;
}

.login-btn:hover {
  opacity: 0.9;
}

.error-message {
  background: #fee2e2;
  color: #991b1b;
  padding: 12px;
  border-radius: 6px;
  margin-bottom: 20px;
  display: none;
}

/* ===== Settings Page ===== */
.settings-container {
  max-width: 900px;
  margin: 0 auto;
  padding: 20px;
}

.settings-section {
  background: white;
  padding: 30px;
  border-radius: 8px;
  margin-bottom: 20px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.settings-section h2 {
  margin-bottom: 20px;
  color: #1a1a1a;
  border-bottom: 2px solid #e5e5e5;
  padding-bottom: 10px;
}

.setting-item {
  margin-bottom: 20px;
}

.setting-item label {
  display: block;
  font-weight: 600;
  margin-bottom: 8px;
  color: #333;
}

.setting-item input[type="text"],
.setting-item input[type="password"],
.setting-item input[type="number"],
.setting-item textarea,
.setting-item select {
  width: 100%;
  padding: 10px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-family: inherit;
  font-size: 14px;
}

.setting-item textarea {
  min-height: 100px;
  resize: vertical;
}

.setting-item input[type="checkbox"] {
  width: 20px;
  height: 20px;
  cursor: pointer;
}

.checkbox-wrapper {
  display: flex;
  align-items: center;
  gap: 10px;
}

.slider-container {
  display: flex;
  align-items: center;
  gap: 15px;
}

.slider-container input[type="range"] {
  flex: 1;
}

.slider-value {
  font-weight: 600;
  min-width: 40px;
}

.save-btn {
  background: #2563eb;
  color: white;
  padding: 12px 24px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
  font-size: 16px;
}

.save-btn:hover {
  opacity: 0.9;
}

.help-text {
  font-size: 13px;
  color: #666;
  margin-top: 5px;
}

.success-message {
  background: #d1fae5;
  color: #065f46;
  padding: 12px;
  border-radius: 6px;
  margin-bottom: 20px;
  display: none;
}

.test-btn {
  background: #10b981;
  margin-right: 10px;
}

.test-result {
  font-weight: 600;
}

/* ===== Admin Page ===== */
.admin-container {
  max-width: 900px;
  margin: 0 auto;
  padding: 20px;
}

.admin-section {
  background: white;
  padding: 30px;
  border-radius: 8px;
  margin-bottom: 20px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.admin-list {
  margin-top: 20px;
}

.admin-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  border: 1px solid #e5e5e5;
  border-radius: 6px;
  margin-bottom: 10px;
}

.admin-info {
  flex: 1;
}

.admin-info h3 {
  margin: 0 0 5px 0;
}

.admin-info p {
  margin: 0;
  color: #666;
  font-size: 14px;
}

.edit-btn {
  background: #2563eb;
  color: white;
  padding: 8px 16px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
}

.edit-btn:hover {
  background: #1d4ed8;
}

.delete-btn {
  background: #dc2626;
  color: white;
  padding: 8px 16px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
}

.add-admin-form {
  display: grid;
  gap: 15px;
  margin-top: 20px;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
}

.admin-section input,
.admin-section select {
  width: 100%;
  padding: 10px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
}

.admin-section input[type="checkbox"] {
  width: auto;
  padding: 0;
}

.add-btn {
  background: #4e85af;
  color: white;
  padding: 12px 24px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
}

/* ===== Reports Page ===== */
.reports-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.report-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.report-header h2 {
  margin: 0;
  color: #1a1a1a;
}

.refresh-btn {
  background: #2563eb;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
  font-size: 14px;
}

.refresh-btn:hover {
  opacity: 0.9;
}

.refresh-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Contacts "Create contact" button — orange CTA per the design guide (one action per view). */
.cc-create-btn {
  background: #FF6B4A;
  color: #fff;
  padding: 10px 20px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 700;
  font-size: 14px;
}
.cc-create-btn:hover { background: #F0572F; }

/* Create Contact modal body: two-column field grid inside the admin hs-modal frame. */
.cc-modal { max-width: 560px; }
.cc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; }
.cc-field { display: flex; flex-direction: column; gap: 5px; }
.cc-field.cc-span2 { grid-column: 1 / -1; }
.cc-field > span { font-size: 12px; font-weight: 600; color: var(--hs-navy-text, #33475b); }
.cc-field input {
  width: 100%; font-size: 14px; color: var(--hs-navy-text, #33475b);
  padding: 9px 11px; border: 1.5px solid var(--hs-border-soft, #E4EAF3); border-radius: 8px;
  outline: none; background: #fff; box-sizing: border-box;
}
.cc-field input:focus { border-color: #1D4FD7; }
/* Match the native select to the text inputs, with our own chevron (drops the OS default look). */
.cc-field select {
  width: 100%; font-size: 14px; font-family: inherit; color: var(--hs-navy-text, #33475b);
  padding: 9px 34px 9px 11px; border: 1.5px solid var(--hs-border-soft, #E4EAF3); border-radius: 8px;
  outline: none; background: #fff; box-sizing: border-box; cursor: pointer;
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235C6B82' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 11px center;
}
.cc-field select:focus { border-color: #1D4FD7; }
/* Contacts Filter button + modal sections */
.ct-filter-btn { display: inline-flex; align-items: center; gap: 7px; font-family: inherit; font-size: 14px;
  font-weight: 600; color: var(--hs-navy-text, #33475b); background: #fff;
  border: 1px solid var(--hs-border, #cbd6e2); border-radius: 6px; padding: 8px 14px; cursor: pointer; }
.ct-filter-btn:hover { border-color: var(--hs-label, #516f90); }
.ct-filter-count { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px;
  padding: 0 5px; border-radius: 999px; background: var(--brand-blue, #185FA5); color: #fff; font-size: 11px; font-weight: 700; }
/* The filter list outgrew the modal once Pulse Stage and Unfinished joined it. The shared modal body
   keeps overflow visible for the composer's mention dropdown, so the scroll is scoped to the filter
   modal: its body scrolls and the foot with Clear all and Save stays reachable. min-height 0 lets a
   flex child shrink below its content. */
#filterOverlay .hs-modal-body { overflow-y: auto; min-height: 0; }
.ff-group { margin: 4px 0 18px; }
.ff-group.ff-dim { opacity: .4; pointer-events: none; }
.ff-title { font-size: 14px; font-weight: 700; color: var(--hs-navy-text, #33475b); margin: 0 0 8px; }
.ff-opt { display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--hs-navy-text, #33475b); margin: 6px 0; cursor: pointer; }
.ff-empty { font-size: 13px; color: var(--hs-label, #516f90); margin: 4px 0 2px; }
/* Contact Owner dropdown. Same treatment as the Create-contact selects so the two modals match. */
.ff-select {
  width: 100%; font-size: 13.5px; font-family: inherit; color: var(--hs-navy-text, #33475b);
  padding: 9px 34px 9px 11px; border: 1.5px solid var(--hs-border-soft, #E4EAF3); border-radius: 8px;
  outline: none; background: #fff; box-sizing: border-box; cursor: pointer;
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235C6B82' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 11px center;
}
.ff-select:focus { border-color: #1D4FD7; }
.ff-select:disabled { background-color: #F5F8FA; cursor: default; }
/* Bulk selection action bar */
.bulk-bar { display: flex; align-items: center; gap: 12px; padding: 10px 14px; margin-bottom: 10px;
  background: #eef3fb; border: 1px solid var(--hs-border, #cbd6e2); border-radius: 6px;
  font-size: 13.5px; color: var(--hs-navy-text, #33475b); }
.bulk-bar #bulkCount { font-weight: 700; }
.bulk-link { background: none; border: none; color: var(--brand-blue, #185FA5); font-family: inherit;
  font-size: 13.5px; font-weight: 600; cursor: pointer; text-decoration: underline; padding: 0 2px; }
.bulk-del-btn { background: #D8442B; color: #fff; border: none; padding: 7px 16px; border-radius: 6px;
  font-family: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; }
.bulk-del-btn:hover { background: #b5350f; }
.cc-error { color: #D8442B; font-size: 13px; font-weight: 600; margin-bottom: 12px; line-height: 1.4; }
/* Footer buttons: orange Create + white/blue-text Cancel (like the report "Schedule" outline button). */
.cc-btn-create { background: #FF6B4A; color: #fff; border: none; padding: 10px 20px; border-radius: 8px; font-weight: 700; font-size: 14px; cursor: pointer; }
.cc-btn-create:hover { background: #F0572F; }
.cc-btn-create:disabled { opacity: .6; cursor: not-allowed; }
.cc-btn-cancel { background: #fff; color: #1D4FD7; border: 1.5px solid var(--hs-border-soft, #E4EAF3); padding: 10px 20px; border-radius: 8px; font-weight: 700; font-size: 14px; cursor: pointer; }
.cc-btn-cancel:hover { border-color: #1D4FD7; }
@media (max-width: 560px) { .cc-grid { grid-template-columns: 1fr; } .cc-field.cc-span2 { grid-column: auto; } }

/* Date filter */
.date-filter {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.date-filter input[type="date"] {
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 14px;
  font-family: inherit;
  color: #374151;
  background: white;
  outline: none;
  transition: border-color 0.15s;
}

.date-filter input[type="date"]:focus {
  border-color: #2563eb;
}

.date-separator {
  color: #6b7280;
  font-size: 14px;
  font-weight: 500;
}

.filter-apply-btn {
  background: #2563eb;
  color: white;
  padding: 8px 20px;
  border: none;
  border-radius: 6px;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.15s;
}

.filter-apply-btn:hover {
  background: #1d4ed8;
}

.filter-reset-btn {
  background: #f3f4f6;
  color: #374151;
  padding: 8px 16px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.15s;
}

.filter-reset-btn:hover {
  background: #e5e7eb;
}

/* Stats grid — uniform card sizes across all rows */
.stats-section {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 15px;
  margin-bottom: 30px;
}

.stat-card-spacer {
  /* Invisible spacer to force row break in 5-col grid */
}

.stat-card-wrapper {
  display: flex;
  flex-direction: column;
  min-width: 130px;
}

.stat-card-label {
  font-size: 12px;
  font-weight: 600;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
  padding-left: 4px;
}

.report-stat {
  background: white;
  padding: 24px 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  min-height: 100px;
  min-width: 130px;
}

.report-stat .stat-number {
  font-size: 36px;
  font-weight: 700;
  line-height: 1.2;
  min-width: 5ch;  /* accommodate 4-digit numbers */
}

/* Percentage line under stat number */
.stat-percent {
  font-size: 13px;
  font-weight: 600;
  color: #6b7280;
  margin-top: 2px;
}

/* Cold card breakdown */
.stat-breakdown {
  display: flex;
  gap: 8px;
  margin-top: 4px;
  font-size: 11px;
  font-weight: 600;
}

.breakdown-positive { color: #10b981; }
.breakdown-negative { color: #ef4444; }
.breakdown-appt { color: #2563eb; }

/* Color classes */
.stat-contacts .stat-number { color: #d97706; }
.stat-total .stat-number { color: #1a1a1a; }
.stat-appointments .stat-number { color: #2563eb; }
.stat-hot .stat-number { color: #dc2626; }
.stat-dnc .stat-number { color: #991b1b; }
.stat-warm .stat-number { color: #f59e0b; }
.stat-cold .stat-number { color: #6b7280; }
.stat-minimal .stat-number { color: #9ca3af; }
.stat-engagement .stat-number { color: #10b981; }
.stat-fast-cash .stat-number { color: #1a1a1a; }
.stat-listing .stat-number { color: #1a1a1a; }
.stat-urgent .stat-number { color: #1a1a1a; }
.stat-6months .stat-number { color: #1a1a1a; }
.stat-1year .stat-number { color: #1a1a1a; }
.stat-unsure .stat-number { color: #1a1a1a; }

.category-section {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  margin-bottom: 20px;
  overflow: hidden;
}

.category-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 24px;
  cursor: pointer;
  user-select: none;
  transition: background 0.15s;
}

.category-header:hover {
  background: #f8f9fa;
}

.category-header h3 {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
}

.category-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  padding: 0 8px;
  border-radius: 14px;
  font-size: 13px;
  font-weight: 700;
  color: white;
}

.count-appointments { background: #2563eb; }
.count-hot { background: #dc2626; }
.count-warm { background: #f59e0b; }
.count-cold { background: #6b7280; }
.count-cold-positive { background: #6b7280; }
.count-cold-negative { background: #ef4444; }
.count-minimal { background: #9ca3af; }
.count-dnc { background: #991b1b; }

.category-toggle {
  font-size: 18px;
  color: #666;
  transition: transform 0.2s;
}

.category-toggle.open {
  transform: rotate(180deg);
}

.category-body {
  display: none;
  border-top: 1px solid #e5e5e5;
}

.category-body.open {
  display: block;
}

.lead-table {
  width: 100%;
  border-collapse: collapse;
}

.lead-table th {
  text-align: left;
  padding: 12px 16px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  color: #6b7280;
  background: #f9fafb;
  border-bottom: 1px solid #e5e7eb;
}

.lead-table td {
  padding: 12px 16px;
  font-size: 14px;
  border-bottom: 1px solid #f3f4f6;
  vertical-align: top;
}

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

.lead-table tr:hover td {
  background: #f8f9fa;
}

.lead-name {
  font-weight: 600;
  color: #1a1a1a;
}

.lead-phone {
  font-size: 12px;
  color: #6b7280;
}

.lead-last-msg {
  max-width: 300px;
  font-size: 13px;
  color: #374151;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lead-link {
  color: #2563eb;
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
}

.lead-link:hover {
  text-decoration: underline;
}

.retrigger-btn {
  background: #2563eb;
  color: #fff;
  border: none;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s;
}

.retrigger-btn:hover {
  background: #1d4ed8;
}

.retrigger-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.exchange-badge {
  display: inline-block;
  background: #f3f4f6;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 600;
  color: #374151;
}

.loading-state {
  text-align: center;
  padding: 60px 20px;
  color: #6b7280;
  font-size: 16px;
}

.loading-spinner {
  display: inline-block;
  width: 32px;
  height: 32px;
  border: 3px solid #e5e7eb;
  border-top-color: #2563eb;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin-bottom: 12px;
}

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

.empty-state {
  text-align: center;
  padding: 30px;
  color: #9ca3af;
  font-size: 14px;
}

/* ===== Mobile back button ===== */
.mobile-back-btn {
  display: none;
  background: none;
  border: none;
  font-size: 14px;
  font-weight: 600;
  color: #2563eb;
  cursor: pointer;
  padding: 8px 0;
  margin-bottom: 8px;
}

/* ===== Follow-up System Settings ===== */
.followup-days-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 8px;
}

.day-checkbox {
  display: flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  padding: 6px 12px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 14px;
  user-select: none;
}

.day-checkbox:hover {
  background: #f3f4f6;
}

.day-checkbox input[type="checkbox"] {
  width: 16px;
  height: 16px;
}

.delay-input-row {
  display: flex;
  gap: 10px;
  align-items: center;
}

.delay-value-input {
  width: 100px !important;
  flex: none !important;
}

.delay-unit-select {
  width: 130px !important;
  flex: none !important;
}

.time-window-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.time-window-row input[type="time"] {
  padding: 10px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 14px;
  width: 150px;
}

.time-window-row span {
  color: #666;
  font-size: 14px;
}

.followup-delay-row {
  background: #f9fafb;
  padding: 15px;
  border-radius: 6px;
  border: 1px solid #e5e7eb;
  margin-bottom: 10px;
}

.followup-delay-row label {
  display: block;
  font-weight: 600;
  margin-bottom: 8px;
  color: #333;
}

/* Per-category follow-up toggles */
.followup-category-toggles {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 8px;
}

.category-toggle-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  color: #374151;
  background: #f9fafb;
  transition: border-color 0.15s, background 0.15s;
  user-select: none;
}

.category-toggle-item:hover {
  border-color: #6366f1;
  background: #f0f0ff;
}

.category-toggle-item input[type="checkbox"] {
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: #6366f1;
}

.category-toggle-item:has(input:checked) {
  border-color: #6366f1;
  background: #eef2ff;
  color: #4338ca;
}

#category_config_panel {
  border-top: 1px solid #e5e7eb;
  margin-top: 16px;
  padding-top: 16px;
}


.save-category-btn {
  margin-top: 4px;
}

/* ===== Enroll in Follow-Up button (conversation header) ===== */
.btn-enroll-followup {
  background: #7c3aed;
  color: white;
  border: none;
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}
.btn-enroll-followup:hover { background: #6d28d9; }

.btn-in-followup {
  background: #dc2626;
  color: white;
  border: none;
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}
.btn-in-followup:hover { background: #b91c1c; }

/* ===== Follow-Up Queue Page ===== */
.fq-stats-row {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}

.fq-table {
  width: 100%;
  margin-top: 8px;
}

.fq-cat-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 700;
}
.fq-cat-hot          { background: #fee2e2; color: #991b1b; }
.fq-cat-cold_positive { background: #d1fae5; color: #065f46; }
.fq-cat-minimal      { background: #f3f4f6; color: #374151; }

.fq-progress { font-size: 13px; color: #374151; }
.fq-next-at  { font-size: 13px; color: #6b7280; white-space: nowrap; }

/* Controls row (page size selector + pagination) */
.fq-controls-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 12px 0 8px;
  flex-wrap: wrap;
  gap: 8px;
}
.fq-controls-bottom { margin: 12px 0 0; }

.fq-page-size-wrap {
  font-size: 13px;
  color: #374151;
  display: flex;
  align-items: center;
  gap: 6px;
}
.fq-page-size-wrap select {
  padding: 3px 6px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  font-size: 13px;
  background: white;
  cursor: pointer;
}

.fq-page-info { font-size: 13px; color: #6b7280; }

.fq-pagination {
  display: flex;
  align-items: center;
  gap: 3px;
}
.fq-pg-btn {
  border: 1px solid #d1d5db;
  background: white;
  color: #374151;
  padding: 4px 9px;
  border-radius: 4px;
  font-size: 13px;
  cursor: pointer;
  line-height: 1.4;
  transition: background 0.15s;
}
.fq-pg-btn:hover:not(:disabled) { background: #f3f4f6; }
.fq-pg-btn:disabled { opacity: 0.4; cursor: default; }
.fq-pg-btn.fq-pg-active { background: #2563eb; color: white; border-color: #2563eb; font-weight: 700; }
.fq-pg-ellipsis { padding: 0 4px; color: #9ca3af; font-size: 13px; }

/* ===== Follow-Up Queue Modal ===== */
.fq-modal-inner {
  max-width: 680px;
  width: 95%;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
}
.fq-modal-body {
  overflow-y: auto;
  padding: 16px 8px 8px;
}

.fq-batch {
  margin-bottom: 12px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  overflow: hidden;
  background: white;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.fq-batch:last-child {
  margin-bottom: 0;
}

.fq-batch-header {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 12px 16px;
  background: #f3f4f6;
  border-bottom: 1px solid #d1d5db;
}

.fq-batch-label {
  font-weight: 700;
  font-size: 15px;
  color: #111827;
}

.fq-auto-stop-note {
  font-size: 12px;
  color: #92400e;
  background: #fef3c7;
  padding: 2px 10px;
  border-radius: 10px;
  font-weight: 600;
}

.fq-collapse-btn {
  margin-left: auto;
  background: none;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  padding: 3px 10px;
  font-size: 12px;
  cursor: pointer;
  color: #374151;
}
.fq-collapse-btn:hover { background: #e5e7eb; }

.fq-batch-entries { padding: 0; }
.fq-batch-entries.collapsed { display: none; }

.fq-entry {
  padding: 14px 16px;
  border-bottom: 1px solid #e5e7eb;
}
.fq-entry:last-child { border-bottom: none; }
.fq-entry-sent       { background: #ffffff; }
.fq-entry-auto_stopped,
.fq-entry-stopped    { background: #fffbeb; }
.fq-entry-deleted    { background: #fff5f5; }
.fq-entry-pending    { background: #ffffff; }

.fq-entry-header {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.fq-entry-num {
  font-weight: 700;
  font-size: 14px;
  color: #111827;
}

.fq-entry-time {
  font-size: 13px;
  color: #6b7280;
  margin-left: auto;
}

.fq-entry-channels {
  font-size: 13px;
  color: #6b7280;
}

.fq-msg-preview {
  font-size: 14px;
  color: #1f2937;
  background: #f3f4f6;
  border-radius: 6px;
  padding: 10px 12px;
  margin: 0 0 8px;
  line-height: 1.6;
}
.fq-msg-tbd {
  color: #9ca3af;
  background: #f9fafb;
  font-style: italic;
}

.fq-action-note {
  font-size: 13px;
  color: #6b7280;
  font-style: italic;
  margin-bottom: 6px;
}

.fq-entry-actions {
  display: flex;
  gap: 8px;
}

.fq-act-btn {
  padding: 5px 12px;
  border-radius: 5px;
  font-size: 12px;
  font-weight: 600;
  border: none;
  cursor: pointer;
}
.fq-send-now { background: #059669; color: white; }
.fq-send-now:hover { background: #047857; }
.fq-stop-btn { background: #f59e0b; color: white; }
.fq-stop-btn:hover { background: #d97706; }
.fq-del-btn  { background: #ef4444; color: white; }
.fq-del-btn:hover  { background: #dc2626; }

/* ===== Conversation Detail Page (3-Panel) ===== */
.conversation-detail-layout {
  display: grid;
  grid-template-columns: 300px 350px 1fr;
  gap: 20px;
  height: calc(100vh - 100px);
}

.contact-info-panel {
  background: white;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  overflow-y: auto;
}

.contact-name-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 15px;
  border-bottom: 2px solid #e5e5e5;
  margin-bottom: 15px;
}

.contact-name-header h2 {
  margin: 0;
  font-size: 20px;
  color: #1a1a1a;
}

.name-edit-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 16px;
  color: #6b7280;
  padding: 2px 6px;
  border-radius: 4px;
  transition: all 0.2s;
}

.name-edit-btn:hover {
  background: #f3f4f6;
  color: #374151;
}

.contact-name-expanded {
  background: #f9fafb;
  padding: 12px;
  border-radius: 6px;
  margin-bottom: 15px;
  border: 1px solid #e5e7eb;
}

.contact-info-fields {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.contact-info-field {
  padding: 8px 0;
  border-bottom: 1px solid #f3f4f6;
}

.contact-field-label {
  display: block;
  font-size: 12px;
  color: #6b7280;
  margin-bottom: 2px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.contact-field-value {
  display: block;
  font-size: 14px;
  color: #1a1a1a;
}

/* Category badges */
.category-badge {
  display: inline-block !important;
  padding: 2px 10px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 600;
}
.category-appt_confirmed { background: #ecfdf5; color: #059669; }
.category-appt_suggested { background: #f0fdf4; color: #16a34a; }
.category-hot { background: #fef2f2; color: #dc2626; }
.category-cold_positive { background: #eff6ff; color: #2563eb; }
.category-cold_negative { background: #f3f4f6; color: #6b7280; }
.category-minimal { background: #fefce8; color: #a16207; }
.category-dnc { background: #1a1a1a; color: #fff; }
.category-claimed { background: #ede9fe; color: #6d28d9; }
.category-pending_isa { background: #fff7ed; color: #c2410c; }
.category-unfinished { background: #f1f5f9; color: #475569; }

/* Contact edit mode */
.contact-edit-input {
  width: 100%;
  padding: 6px 10px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 14px;
  color: #1a1a1a;
  background: #fff;
  outline: none;
}
.contact-edit-input:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 2px rgba(37,99,235,0.1);
}

.btn-edit-contact, .btn-save-contact, .btn-cancel-edit {
  padding: 8px 16px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  margin-right: 8px;
  margin-top: 12px;
}
.btn-edit-contact {
  background: #f3f4f6;
  color: #374151;
  border: 1px solid #d1d5db;
}
.btn-edit-contact:hover { background: #e5e7eb; }
.btn-save-contact {
  background: #2563eb;
  color: white;
}
.btn-save-contact:hover { background: #1d4ed8; }
.btn-cancel-edit {
  background: #fff;
  color: #6b7280;
  border: 1px solid #d1d5db;
}
.btn-cancel-edit:hover { background: #f9fafb; }

.opt-status-section {
  margin-top: 15px;
  padding-top: 15px;
  border-top: 1px solid #e5e5e5;
}

.opt-status-section .opted-out-text {
  color: #dc2626;
  font-weight: 600;
}

.opt-status-section .opted-in-text {
  color: #16a34a;
  font-weight: 600;
}

.opt-in-btn {
  margin-top: 8px;
  padding: 5px 14px;
  font-size: 12px;
  background: #2563eb;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.2s;
}

.opt-in-btn:hover {
  background: #1d4ed8;
}

.conversations-list-panel {
  background: white;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.conversations-list-panel h3 {
  margin: 0 0 15px 0;
  padding-bottom: 10px;
  border-bottom: 2px solid #e5e5e5;
  color: #1a1a1a;
}

.conversations-list-panel #conversationsList {
  flex: 1;
  overflow-y: auto;
}

.conversation-messages-panel {
  background: white;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.conversation-messages-panel #messagesList {
  flex: 1;
  overflow-y: auto;
  padding: 10px 0;
}

.conversation-messages-panel #messageInput {
  border-top: 2px solid #e5e5e5;
  padding-top: 15px;
  margin-top: 15px;
}

.conversation-messages-panel #replyText {
  width: 100%;
  padding: 12px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-family: inherit;
  font-size: 14px;
  resize: vertical;
  min-height: 80px;
  box-sizing: border-box;
}

/* View More button */
.btn-view-more {
  background: #8b5cf6;
  color: white;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 600;
  display: inline-block;
}

.btn-view-more:hover {
  background: #7c3aed;
}

/* Toast for conversation detail page */
.toast {
  position: fixed;
  bottom: 20px;
  right: 20px;
  padding: 12px 24px;
  border-radius: 8px;
  color: white;
  font-weight: 600;
  z-index: 10000;
  animation: slideIn 0.3s ease;
}
.toast-success { background: #10b981; }
.toast-error { background: #dc2626; }
@keyframes slideIn {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

/* ===== Mobile Responsive ===== */
@media (max-width: 768px) {
  .container {
    padding: 10px;
  }

  /* Navbar stacks */
  .navbar {
    flex-direction: column;
    gap: 12px;
    padding: 12px 16px;
    text-align: center;
  }

  .navbar h1 {
    font-size: 20px;
  }

  .navbar-links {
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px;
  }

  .navbar-links a,
  .navbar-links button {
    padding: 8px 12px;
    font-size: 13px;
  }

  /* Stats grid */
  header {
    padding: 16px;
  }

  .stats {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .stat-box {
    padding: 12px;
  }

  .stat-value {
    font-size: 24px;
  }

  .stat-label {
    font-size: 12px;
  }

  /* Conversation detail: stack panels */
  .conversation-detail-layout {
    grid-template-columns: 1fr;
    height: auto;
  }

  .contact-info-panel,
  .conversations-list-panel,
  .conversation-messages-panel {
    max-height: 50vh;
  }

  /* Dashboard: single column, show/hide panels */
  .main-content {
    grid-template-columns: 1fr;
    height: auto;
    min-height: calc(100vh - 300px);
  }

  .sidebar {
    min-height: 300px;
    max-height: 50vh;
  }

  .chat-area {
    min-height: 400px;
  }

  .chat-area.mobile-hidden {
    display: none;
  }

  .sidebar.mobile-hidden {
    display: none;
  }

  .mobile-back-btn {
    display: block;
  }

  #conversationsList {
    max-height: none;
  }

  #messagesList {
    max-height: none;
    min-height: 200px;
  }

  /* Conversation header actions stack */
  .convo-header-row {
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
  }

  .convo-header-actions {
    flex-wrap: wrap;
    width: 100%;
  }

  .convo-header-actions a,
  .convo-header-actions button {
    flex: 1;
    text-align: center;
    min-width: 0;
    padding: 8px 10px;
    font-size: 13px;
  }

  .hubspot-btn {
    padding: 8px 12px;
    font-size: 13px;
  }

  /* Input actions wrap */
  .input-actions {
    flex-wrap: wrap;
  }

  .input-actions button {
    flex: 1;
    min-width: 0;
    padding: 10px 8px;
    font-size: 13px;
  }

  /* Reports */
  .stats-section {
    grid-template-columns: repeat(2, 1fr);
  }

  .report-stat .stat-number {
    font-size: 28px;
  }

  .reports-container {
    padding: 10px;
  }

  .report-header {
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
  }

  .lead-table th,
  .lead-table td {
    padding: 8px 10px;
    font-size: 12px;
  }

  .lead-last-msg {
    max-width: 120px;
  }

  .category-header {
    padding: 14px 16px;
  }

  /* Settings */
  .settings-container,
  .admin-container {
    padding: 10px;
  }

  .settings-section,
  .admin-section {
    padding: 20px;
  }

  /* Admin form row */
  .form-row {
    grid-template-columns: 1fr;
  }

  .admin-item {
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
  }

  /* Login */
  .login-container {
    margin: 40px auto;
    padding: 24px;
    width: 90%;
  }

  /* Tabs scroll horizontally */
  .tabs {
    overflow-x: auto;
    gap: 6px;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
  }

  .tab {
    white-space: nowrap;
    flex-shrink: 0;
    padding: 8px 12px;
    font-size: 13px;
  }

  /* Follow-up responsive */
  .followup-days-grid {
    gap: 6px;
  }

  .delay-input-row {
    flex-wrap: wrap;
  }

  .time-window-row {
    flex-wrap: wrap;
  }

  .time-window-row input[type="time"] {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .stats {
    grid-template-columns: 1fr;
  }

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

  .convo-header-actions {
    flex-direction: column;
  }

  .convo-header-actions a,
  .convo-header-actions button {
    width: 100%;
  }
}

/* Distribution Page */
.dist-container {
  background: white;
  border-radius: 8px;
  padding: 30px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.dist-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 10px;
}

.dist-header h2 {
  font-size: 22px;
  color: #1a1a1a;
}

.dist-subtitle {
  color: #6b7280;
  font-size: 14px;
  margin-top: 4px;
  margin-bottom: 20px;
}

.dist-message {
  display: none;
  padding: 12px 16px;
  border-radius: 6px;
  margin-bottom: 16px;
  font-size: 14px;
  font-weight: 500;
}

.dist-success {
  background: #ecfdf5;
  color: #065f46;
  border: 1px solid #a7f3d0;
}

.dist-error {
  background: #fef2f2;
  color: #991b1b;
  border: 1px solid #fecaca;
}

.dist-section {
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px;
}

.dist-section h3 {
  font-size: 16px;
  color: #1a1a1a;
  margin-bottom: 4px;
}

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

.dist-webhook-list {
  margin-top: 16px;
}

.dist-webhook-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  margin-bottom: 10px;
  background: #fafafa;
}

.dist-webhook-name {
  font-weight: 600;
  font-size: 14px;
  color: #1a1a1a;
  display: flex;
  align-items: center;
  gap: 8px;
}

.dist-webhook-badge {
  font-size: 11px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 10px;
}

.badge-active {
  background: #ecfdf5;
  color: #065f46;
}

.badge-disabled {
  background: #f3f4f6;
  color: #6b7280;
}

.dist-webhook-url {
  font-size: 12px;
  color: #6b7280;
  margin-top: 4px;
  word-break: break-all;
}

.dist-webhook-event {
  font-size: 12px;
  color: #9ca3af;
  margin-top: 2px;
}

.dist-webhook-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.dist-btn {
  padding: 8px 16px;
  border-radius: 6px;
  border: none;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.dist-btn-primary {
  background: #2563eb;
  color: white;
}

.dist-btn-primary:hover {
  background: #1d4ed8;
}

.dist-btn-secondary {
  background: #f3f4f6;
  color: #374151;
  border: 1px solid #d1d5db;
}

.dist-btn-secondary:hover {
  background: #e5e7eb;
}

.dist-btn-sm {
  padding: 4px 10px;
  border-radius: 4px;
  border: 1px solid #d1d5db;
  font-size: 12px;
  cursor: pointer;
  background: white;
  color: #374151;
  transition: all 0.2s;
}

.dist-btn-test:hover {
  background: #eff6ff;
  border-color: #93c5fd;
  color: #1d4ed8;
}

.dist-btn-toggle:hover {
  background: #fefce8;
  border-color: #fde68a;
  color: #92400e;
}

.dist-btn-edit:hover {
  background: #f0fdf4;
  border-color: #86efac;
  color: #166534;
}

.dist-btn-delete {
  color: #dc2626;
  border-color: #fecaca;
}

.dist-btn-delete:hover {
  background: #fef2f2;
  border-color: #f87171;
}

.dist-empty {
  text-align: center;
  padding: 20px;
  color: #9ca3af;
  font-size: 14px;
}

.dist-empty-sm {
  padding: 10px;
  color: #9ca3af;
  font-size: 13px;
}

.dist-toggle-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
}

.dist-toggle-row label:last-child {
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}

.dist-checkboxes {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.dist-checkboxes label {
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.dist-recipients {
  margin-top: 20px;
}

.dist-recipients > label {
  font-size: 14px;
  font-weight: 600;
  display: block;
  margin-bottom: 8px;
}

.dist-recipient-list {
  margin-bottom: 10px;
}

.dist-recipient {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 4px;
  margin-bottom: 6px;
  font-size: 14px;
}

.dist-add-recipient {
  display: flex;
  gap: 8px;
}

.dist-add-recipient input {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 14px;
}

.dist-add-recipient input:focus {
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.1);
}

.dist-log-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.dist-log-table th {
  text-align: left;
  padding: 8px 12px;
  background: #f9fafb;
  border-bottom: 2px solid #e5e7eb;
  font-weight: 600;
  color: #374151;
}

.dist-log-table td {
  padding: 8px 12px;
  border-bottom: 1px solid #f3f4f6;
  color: #4b5563;
}

.dist-status-badge {
  font-size: 11px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 10px;
}

.status-success {
  background: #ecfdf5;
  color: #065f46;
}

.status-failed {
  background: #fef2f2;
  color: #991b1b;
}

.dist-actions {
  margin-top: 10px;
  padding-top: 20px;
  border-top: 1px solid #e5e7eb;
}

/* Distribution Modal */
.dist-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.dist-modal-content {
  background: white;
  border-radius: 8px;
  padding: 24px;
  width: 480px;
  max-width: 90vw;
  position: relative;
}

.dist-modal-content h2 {
  font-size: 18px;
  margin-bottom: 16px;
}

.dist-modal-close {
  position: absolute;
  top: 16px;
  right: 20px;
  font-size: 24px;
  cursor: pointer;
  color: #6b7280;
  line-height: 1;
}

.dist-modal-close:hover {
  color: #1a1a1a;
}

.dist-form-group {
  margin-bottom: 16px;
}

.dist-form-group label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 6px;
  color: #374151;
}

.dist-form-group input,
.dist-form-group select {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 14px;
}

.dist-form-group input:focus,
.dist-form-group select:focus {
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.1);
}

.dist-modal-actions {
  display: flex;
  gap: 10px;
  margin-top: 20px;
}

@media (max-width: 768px) {
  .dist-webhook-card {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .dist-webhook-actions {
    width: 100%;
    flex-wrap: wrap;
  }

  .dist-section-header {
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
  }

  .dist-add-recipient {
    flex-direction: column;
  }
}

/* ===== Settings Confirm Modal ===== */
.confirm-modal-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.confirm-modal {
  background: white;
  border-radius: 8px;
  width: 480px;
  max-width: 90vw;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
}

.confirm-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px 0;
}

.confirm-modal-header h3 {
  margin: 0;
  font-size: 18px;
  color: #1a1a1a;
}

.confirm-modal-close {
  font-size: 24px;
  cursor: pointer;
  color: #6b7280;
  line-height: 1;
}

.confirm-modal-close:hover {
  color: #1a1a1a;
}

.confirm-modal-body {
  padding: 20px 24px;
}

.confirm-modal-user {
  font-size: 14px;
  color: #374151;
  margin-bottom: 4px;
}

.confirm-modal-prompt {
  font-size: 14px;
  color: #6b7280;
  margin-bottom: 12px;
}

.confirm-changes-list {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  overflow: hidden;
}

.confirm-changes-list li {
  padding: 10px 14px;
  font-size: 13px;
  color: #374151;
  border-bottom: 1px solid #f3f4f6;
}

.confirm-changes-list li:last-child {
  border-bottom: none;
}

.confirm-changes-list li strong {
  color: #1a1a1a;
}

.confirm-password-group {
  margin-top: 8px;
}

.confirm-password-group label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 6px;
  color: #374151;
}

.confirm-password-group input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 14px;
  font-family: inherit;
}

.confirm-password-group input:focus {
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.1);
}

.confirm-error {
  color: #dc2626;
  font-size: 13px;
  margin-top: 6px;
  min-height: 18px;
}

.confirm-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 0 24px 20px;
}

@media (max-width: 768px) {
  .confirm-modal {
    width: 95vw;
  }
}

/* ===== Test Environment ===== */
.test-env-container {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  display: flex;
  flex-direction: column;
  height: calc(100vh - 120px);
  overflow: hidden;
}

.test-env-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid #e5e7eb;
  background: #f9fafb;
  flex-shrink: 0;
}

.test-env-toolbar-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
}

.test-env-prompt-label {
  font-weight: 600;
  font-size: 14px;
  color: #374151;
  white-space: nowrap;
}

.test-env-prompt-select {
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 14px;
  font-family: inherit;
  background: white;
  min-width: 220px;
  max-width: 350px;
  cursor: pointer;
}

.test-env-prompt-select:focus {
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.1);
}

.test-env-toolbar-right {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: 12px;
}

.test-env-icon-btn {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  background: white;
  color: #6b7280;
  cursor: pointer;
  transition: all 0.15s;
}

.test-env-icon-btn:hover {
  background: #f3f4f6;
  color: #1a1a1a;
  border-color: #9ca3af;
}

.test-env-fyi {
  padding: 10px 20px;
  background: #eff6ff;
  border-bottom: 1px solid #bfdbfe;
  font-size: 13px;
  color: #1e40af;
  line-height: 1.5;
  flex-shrink: 0;
}

.test-env-fyi strong {
  color: #1e3a8a;
}

.test-env-chat {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.test-env-messages {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
}

.test-env-input {
  border-top: 2px solid #e5e7eb;
  padding: 16px 20px;
  background: #f9fafb;
  flex-shrink: 0;
}

.test-env-input textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-family: inherit;
  font-size: 14px;
  resize: none;
  min-height: 50px;
  max-height: 120px;
}

.test-env-input textarea:focus {
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.1);
}

.test-env-input-actions {
  display: flex;
  gap: 10px;
  margin-top: 10px;
}

.test-env-send-btn {
  padding: 10px 24px;
  background: #2563eb;
  color: white;
  border: none;
  border-radius: 6px;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
}

.test-env-send-btn:hover {
  background: #1d4ed8;
}

.test-env-send-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.test-env-reset-btn {
  padding: 10px 20px;
  background: white;
  color: #374151;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
}

.test-env-reset-btn:hover {
  background: #f3f4f6;
}

.test-env-prompt-textarea {
  width: 100%;
  min-height: 260px;
  padding: 12px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-family: inherit;
  font-size: 13px;
  line-height: 1.5;
  resize: vertical;
}

.test-env-prompt-textarea:focus {
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.1);
}

/* Typing indicator */
.test-env-typing {
  display: flex;
  gap: 4px;
  padding: 4px 0;
}

.test-env-typing span {
  width: 8px;
  height: 8px;
  background: rgba(0,0,0,0.3);
  border-radius: 50%;
  animation: testTypingBounce 1.4s infinite ease-in-out;
}

.test-env-typing span:nth-child(2) {
  animation-delay: 0.2s;
}

.test-env-typing span:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes testTypingBounce {
  0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
  40% { transform: scale(1); opacity: 1; }
}

/* Toast */
.test-env-toast {
  position: fixed;
  top: 20px;
  right: 20px;
  padding: 12px 20px;
  background: #d1fae5;
  color: #065f46;
  border-radius: 6px;
  font-weight: 600;
  font-size: 14px;
  z-index: 9999;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

@media (max-width: 768px) {
  .test-env-toolbar {
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
  }

  .test-env-toolbar-left {
    width: 100%;
  }

  .test-env-prompt-select {
    flex: 1;
    min-width: 0;
  }

  .test-env-toolbar-right {
    margin-left: 0;
  }
}

/* ============================================================
   Automatic Follow Up: engine cards, pending button, sections
   ============================================================ */

.fq-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 28px 0 12px;
}

/* Section-header action buttons (New Action / New Category) — same size + aligned */
.fq-header-action { min-width: 150px; text-align: center; flex-shrink: 0; }

.fq-section-header h3 {
  margin: 0;
  font-size: 17px;
  color: #1a1a1a;
}

.fq-engine-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}

.fq-engine-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 16px;
  cursor: pointer;
  transition: box-shadow 0.15s, border-color 0.15s;
}

.fq-engine-card:hover {
  border-color: #2563eb;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.08);
}

.fq-engine-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.fq-engine-card-name {
  font-weight: 700;
  font-size: 15px;
  color: #1a1a1a;
}

.fq-engine-lock {
  font-size: 13px;
}

.fq-engine-del {
  border: none;
  background: none;
  color: #9ca3af;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
}

.fq-engine-del:hover {
  background: #fee2e2;
  color: #dc2626;
}

.fq-engine-card-meta {
  margin-top: 6px;
  font-size: 12px;
  color: #6b7280;
}

.fq-pending-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  padding: 9px 16px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  background: #fff;
  font-size: 14px;
  font-weight: 600;
  color: #374151;
  cursor: pointer;
}

.fq-pending-btn:hover {
  border-color: #2563eb;
  color: #2563eb;
}

.fq-pending-badge {
  background: #dc2626;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  border-radius: 10px;
  padding: 2px 7px;
  line-height: 1.3;
}

/* ============================================================
   Follow-Up Category detail page (/followup/:id)
   ============================================================ */

.fu-detail-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 0;
  height: calc(100vh - 110px);
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  overflow: hidden;
}

/* Action Events have no subcategory sidebar — canvas spans the full width */
.fu-detail-layout-full { grid-template-columns: 1fr; }

.fu-sidebar {
  border-right: 1px solid #e5e7eb;
  padding: 18px;
  overflow-y: auto;
  background: #f9fafb;
}

.fu-back-link {
  display: inline-block;
  font-size: 13px;
  color: #6b7280;
  text-decoration: none;
  margin-bottom: 16px;
}

.fu-back-link:hover { color: #2563eb; }

.fu-sidebar-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #9ca3af;
  margin-bottom: 6px;
}

.fu-category-header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.fu-category-header h2 {
  margin: 0;
  font-size: 19px;
  color: #1a1a1a;
}

.fu-subcat-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.fu-subcat-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 14px;
  color: #374151;
  cursor: pointer;
}

.fu-subcat-item:hover { background: #f3f4f6; }

.fu-subcat-item.active {
  background: #eff6ff;
  color: #2563eb;
  font-weight: 600;
}

.fu-subcat-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #d1d5db;
  flex-shrink: 0;
}

.fu-subcat-dot.on { background: #10b981; }

.fu-subcat-empty {
  font-size: 13px;
  color: #9ca3af;
  padding: 8px 10px;
}

.fu-add-subcat-btn {
  margin-top: 10px;
  width: 100%;
  padding: 8px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  background: none;
  font-size: 13px;
  font-weight: 600;
  color: #6b7280;
  cursor: pointer;
}

.fu-add-subcat-btn:hover { border-color: #2563eb; color: #2563eb; }

/* Canvas */

.fu-canvas-area {
  display: flex;
  flex-direction: column;
  position: relative;
  min-width: 0;
}

.fu-canvas-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  border-bottom: 1px solid #e5e7eb;
  background: #fff;
  z-index: 5;
}

.fu-toolbar-left, .fu-toolbar-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.fu-subcat-title {
  font-weight: 700;
  font-size: 15px;
  color: #1a1a1a;
}

.fu-subcat-del-btn {
  border: none;
  background: none;
  color: #9ca3af;
  font-size: 12px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
}

.fu-subcat-del-btn:hover { background: #fee2e2; color: #dc2626; }

.fu-tool-btn {
  padding: 7px 12px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  background: #fff;
  font-size: 13px;
  font-weight: 600;
  color: #374151;
  cursor: pointer;
}

.fu-tool-btn:hover { border-color: #2563eb; color: #2563eb; }

.fu-save-btn {
  padding: 7px 18px;
  border: none;
  border-radius: 6px;
  background: #2563eb;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.fu-save-btn:hover { background: #1d4ed8; }

#drawflow {
  flex: 1;
  position: relative;
  background: #fafafa;
  background-image: radial-gradient(#d1d5db 1px, transparent 1px);
  background-size: 20px 20px;
}

.fu-canvas-empty {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: #9ca3af;
  background: #fafafa;
  background-image: radial-gradient(#e5e7eb 1px, transparent 1px);
  background-size: 20px 20px;
}

/* Zapier-style enable toggle */

.fu-enable-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
}

.fu-enable-toggle input { display: none; }

.fu-toggle-slider {
  width: 38px;
  height: 21px;
  border-radius: 11px;
  background: #d1d5db;
  position: relative;
  transition: background 0.2s;
  flex-shrink: 0;
}

.fu-toggle-slider::after {
  content: '';
  position: absolute;
  top: 2.5px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  transition: left 0.2s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.fu-enable-toggle input:checked + .fu-toggle-slider { background: #10b981; }
.fu-enable-toggle input:checked + .fu-toggle-slider::after { left: 19px; }

.fu-toggle-label {
  font-size: 13px;
  font-weight: 600;
  color: #374151;
}

/* Drawflow node theming */

.drawflow .drawflow-node {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 0;
  width: auto;
  min-width: 160px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.06);
}

.drawflow .drawflow-node.selected {
  border-color: #2563eb;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.18);
}

.drawflow .connection .main-path {
  stroke: #94a3b8;
  stroke-width: 3px;
}

.drawflow .connection .main-path:hover,
.drawflow .connection .main-path.selected {
  stroke: #2563eb;
}

.drawflow .drawflow-node .input,
.drawflow .drawflow-node .output {
  background: #fff;
  border: 2px solid #94a3b8;
  width: 14px;
  height: 14px;
}

.drawflow .drawflow-node .input:hover,
.drawflow .drawflow-node .output:hover {
  border-color: #2563eb;
}

.fu-node {
  padding: 12px 16px;
  text-align: left;
}

.fu-node-day {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #6b7280;
  margin-bottom: 4px;
}

.fu-node-action {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  padding: 2px 9px;
  border-radius: 10px;
}

.fu-node-action-sms { background: #dbeafe; color: #1d4ed8; }
.fu-node-action-email { background: #fef3c7; color: #92400e; }
.fu-node-action-call { background: #d1fae5; color: #065f46; }

.fu-node-detail {
  margin-top: 6px;
  font-size: 11px;
  color: #9ca3af;
}

/* Not connected to the flow, so the engine never schedules it. Called out on the canvas because an
   orphaned block fails completely silently: it never runs, never logs, never errors. */
.drawflow .drawflow-node.fu-orphan .fu-block {
  border: 2px dashed #D8442B !important;
  background: #FFF4F0 !important;
}
.drawflow .drawflow-node.fu-orphan::after {
  content: "Not connected, won't run";
  position: absolute;
  top: -11px;
  left: 12px;
  z-index: 5;
  background: #D8442B;
  color: #fff;
  font: 700 10px/1 Inter, system-ui, sans-serif;
  padding: 4px 7px;
  border-radius: 5px;
  white-space: nowrap;
  pointer-events: none;
}

/* Right slide-in block editor panel */

.fu-block-panel {
  position: fixed;
  top: 0;
  right: 0;
  width: 420px;
  max-width: 92vw;
  height: 100vh;
  z-index: 10000;
  transform: translateX(100%);
  transition: transform 0.25s ease;
}

.fu-block-panel.open { transform: translateX(0); }

.fu-block-panel.minimized { transform: translateX(calc(100% - 36px)); }

.fu-panel-tab {
  display: none;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  writing-mode: vertical-rl;
  background: #2563eb;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  padding: 14px 8px;
  border-radius: 8px 0 0 8px;
  cursor: pointer;
  white-space: nowrap;
}

.fu-block-panel.minimized .fu-panel-tab { display: block; }

.fu-panel-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #fff;
  border-left: 1px solid #e5e7eb;
  box-shadow: -8px 0 24px rgba(0,0,0,0.08);
}

.fu-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid #e5e7eb;
}

.fu-panel-header h3 {
  margin: 0;
  font-size: 16px;
  color: #1a1a1a;
}

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

.fu-panel-min, .fu-panel-close {
  border: none;
  background: none;
  font-size: 18px;
  line-height: 1;
  color: #6b7280;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
}

.fu-panel-min:hover { background: #f3f4f6; }
.fu-panel-close:hover { background: #fee2e2; color: #dc2626; }

.fu-panel-body {
  flex: 1;
  overflow-y: auto;
  padding: 18px 20px;
}

.fu-panel-field { margin-bottom: 16px; }

.fu-panel-field label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #374151;
  margin-bottom: 5px;
}

.fu-panel-field input[type="text"],
.fu-panel-field input[type="number"],
/* time was missing from this list, so every time field in a block panel rendered as a raw browser
   control: the segment schedule, the task due time, and the On Schedule times. Adding it here fixes
   all three rather than only the newest one. */
.fu-panel-field input[type="time"],
.fu-panel-field input[type="date"],
.fu-panel-field select,
.fu-panel-field textarea {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 13px;
  box-sizing: border-box;
  font-family: inherit;
}

.fu-panel-field textarea.fu-mono {
  font-family: 'SF Mono', Menlo, Consolas, monospace;
  font-size: 12px;
}

.fu-panel-help {
  margin: 5px 0 0;
  font-size: 11px;
  color: #9ca3af;
}

.fu-panel-toggle-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.fu-panel-toggle-row .fu-enable-toggle label { margin: 0; }

.fu-panel-footer {
  padding: 14px 20px;
  border-top: 1px solid #e5e7eb;
}

.fu-panel-footer .fu-save-btn { width: 100%; padding: 10px; }

/* (i) hover tooltip */

.fu-info-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: #e5e7eb;
  color: #6b7280;
  font-size: 11px;
  font-weight: 700;
  font-style: italic;
  cursor: help;
  position: relative;
  flex-shrink: 0;
}

.fu-info-tooltip {
  display: none;
  position: absolute;
  right: 0;
  top: 24px;
  width: 300px;
  background: #1f2937;
  color: #f9fafb;
  font-size: 12px;
  font-weight: 400;
  font-style: normal;
  line-height: 1.5;
  padding: 12px 14px;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
  z-index: 10002;
}

.fu-info-tooltip code {
  background: #374151;
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 11px;
}

.fu-info-icon:hover .fu-info-tooltip,
.fu-info-icon:focus .fu-info-tooltip {
  display: block;
}

@media (max-width: 768px) {
  .fu-detail-layout {
    grid-template-columns: 1fr;
    height: auto;
  }
  .fu-sidebar {
    border-right: none;
    border-bottom: 1px solid #e5e7eb;
  }
  #drawflow { min-height: 420px; }
  .fu-block-panel { width: 100vw; }
}

/* .fu-panel-field label sets display:block — keep toggle labels inline-flex */
.fu-panel-field label.fu-enable-toggle {
  display: inline-flex;
  margin-bottom: 0;
}

/* Catchall protected badge (replaces the lock glyph) */
.fq-engine-protected {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #6b7280;
  background: #f3f4f6;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 2px 8px;
}

/* Drawflow ships .drawflow-node.selected { background: red } — keep selection subtle */
.drawflow .drawflow-node.selected {
  background: #fff;
  border-color: #2563eb;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.18);
}

/* Per-block send-time line on canvas nodes */
.fu-node-time {
  margin-top: 4px;
  font-size: 11px;
  color: #6b7280;
}

/* Associated Contact typeahead + card (task modal) */

.contact-search-results {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  max-height: 260px;
  overflow-y: auto;
  z-index: 10010;
}

.contact-result-item {
  padding: 9px 12px;
  cursor: pointer;
  border-bottom: 1px solid #f3f4f6;
}

.contact-result-item:last-child { border-bottom: none; }
.contact-result-item:hover { background: #eff6ff; }

.contact-result-name {
  font-size: 14px;
  font-weight: 600;
  color: #1a1a1a;
}

.contact-result-meta {
  font-size: 12px;
  color: #6b7280;
  margin-top: 1px;
}

.contact-result-empty {
  padding: 12px;
  font-size: 13px;
  color: #9ca3af;
  text-align: center;
}

.contact-card {
  display: flex;
  align-items: stretch;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  overflow: hidden;
  background: #f9fafb;
}

.contact-card-main {
  flex: 1;
  display: block;
  padding: 10px 12px;
  text-decoration: none;
  transition: background 0.12s;
}

.contact-card-main:hover { background: #eff6ff; }

.contact-card-name {
  font-size: 14px;
  font-weight: 700;
  color: #1a1a1a;
}

.contact-card-meta {
  font-size: 12px;
  color: #6b7280;
  margin-top: 2px;
}

.contact-card-link {
  font-size: 12px;
  font-weight: 600;
  color: #2563eb;
  margin-top: 4px;
}

.contact-card-remove {
  border: none;
  border-left: 1px solid #e5e7eb;
  background: none;
  color: #9ca3af;
  font-size: 18px;
  padding: 0 12px;
  cursor: pointer;
}

.contact-card-remove:hover { background: #fee2e2; color: #dc2626; }

/* Canvas notes — sticky-note annotations (type, resize, recolor, move) */

.drawflow .drawflow-node.fu-note-node {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  min-width: 0;
  width: auto;
}

.drawflow .drawflow-node.fu-note-node.selected {
  background: transparent;
  border: none;
  box-shadow: none;
}

.fu-note {
  position: relative;
  border-radius: 8px;
  padding: 6px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  border: 1px solid;
}

.fu-note-text {
  display: block;
  resize: both;
  min-width: 140px;
  min-height: 70px;
  max-width: 700px;
  max-height: 600px;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 13px;
  line-height: 1.45;
  color: #1f2937;
  outline: none;
  box-sizing: border-box;
  padding: 4px 6px;
}

.fu-note-colors {
  display: none;
  position: absolute;
  top: -26px;
  left: 4px;
  gap: 5px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 4px 7px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.fu-note:hover .fu-note-colors { display: flex; }

.fu-note-color {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  cursor: pointer;
  border: 1px solid rgba(0,0,0,0.12);
}

.fu-note-color:hover { transform: scale(1.2); }

.fu-note-yellow { background: #fef9c3; border-color: #fde047; }
.fu-note-blue   { background: #dbeafe; border-color: #93c5fd; }
.fu-note-green  { background: #d1fae5; border-color: #6ee7b7; }
.fu-note-pink   { background: #fce7f3; border-color: #f9a8d4; }
.fu-note-gray   { background: #f3f4f6; border-color: #d1d5db; }

.fu-note-color-yellow { background: #fde047; }
.fu-note-color-blue   { background: #93c5fd; }
.fu-note-color-green  { background: #6ee7b7; }
.fu-note-color-pink   { background: #f9a8d4; }
.fu-note-color-gray   { background: #d1d5db; }

/* Contact profile middle panel: conversations (top half) + tasks (bottom half) */

.convo-panel-half {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.convo-panel-half #conversationsList,
.convo-panel-half #contactTasksList {
  flex: 1;
  overflow-y: auto;
}

.convo-panel-tasks {
  border-top: 2px solid #e5e5e5;
  margin-top: 14px;
  padding-top: 14px;
}

.contact-task-item {
  display: block;
  padding: 10px 12px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  margin-bottom: 8px;
  text-decoration: none;
  transition: border-color 0.12s, background 0.12s;
}

.contact-task-item:hover {
  border-color: #2563eb;
  background: #f8fafc;
}

.contact-task-done { opacity: 0.65; }

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

.contact-task-title {
  font-size: 13px;
  font-weight: 600;
  color: #1a1a1a;
}

.contact-task-status {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 10px;
  flex-shrink: 0;
}

.contact-task-status.is-open { background: #dbeafe; color: #1d4ed8; }
.contact-task-status.is-done { background: #d1fae5; color: #065f46; }

.contact-task-meta {
  font-size: 11px;
  color: #6b7280;
  margin-top: 3px;
}

.contact-tasks-empty {
  font-size: 12px;
  color: #9ca3af;
  padding: 8px 2px;
}

/* Canvas text — transparent, resizable free text */

.drawflow .drawflow-node.fu-text-node {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  min-width: 0;
  width: auto;
}

.drawflow .drawflow-node.fu-text-node.selected {
  background: transparent;
  border: none;
  box-shadow: none;
}

.fu-text-text {
  display: block;
  resize: both;
  min-width: 100px;
  min-height: 34px;
  max-width: 800px;
  max-height: 500px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  color: #374151;
  outline: none;
  box-sizing: border-box;
  padding: 4px 6px;
  overflow: hidden;
}

.fu-text-text:hover,
.fu-text-text:focus,
.drawflow .drawflow-node.fu-text-node.selected .fu-text-text {
  border-color: #d1d5db;
  overflow: auto;
}

/* Floating (i) tooltip — appended to body so panel scroll/transform can't clip it */
.fu-info-tooltip-floating {
  position: fixed;
  width: 320px;
  background: #1f2937;
  color: #f9fafb;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
  padding: 12px 14px;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
  z-index: 100000;
  box-sizing: border-box;
}

.fu-info-tooltip-floating code {
  background: #374151;
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 11px;
}

/* While minimized, only the restore tab is visible/clickable — no stray toggles in the sliver */
.fu-block-panel.minimized .fu-panel-inner {
  visibility: hidden;
  pointer-events: none;
}

/* Alignment guides shown while a dragged block is snapped to another block's line */
.fu-snap-guide {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  background: #2563eb;
  opacity: 0.5;
}

.fu-snap-guide-v { width: 1px; top: -5000px; height: 10000px; }
.fu-snap-guide-h { height: 1px; left: -5000px; width: 10000px; }

/* Notes/text move via a grab strip above the textarea (textareas no longer drag the node) */
.fu-note {
  padding: 14px 6px 6px;
  cursor: move;
}

.fu-note::before,
.fu-text::before {
  content: '';
  position: absolute;
  top: 4px;
  left: 50%;
  transform: translateX(-50%);
  width: 28px;
  height: 4px;
  border-radius: 2px;
  background: rgba(0, 0, 0, 0.12);
  opacity: 0;
  transition: opacity 0.12s;
}

.fu-note:hover::before,
.fu-text:hover::before { opacity: 1; }

.fu-text {
  position: relative;
  padding: 12px 4px 4px;
  cursor: move;
}

/* Text element font colors (resize scales the font; swatches recolor it) */
.fu-text-dark .fu-text-text   { color: #374151; }
.fu-text-blue .fu-text-text   { color: #2563eb; }
.fu-text-green .fu-text-text  { color: #059669; }
.fu-text-red .fu-text-text    { color: #dc2626; }
.fu-text-purple .fu-text-text { color: #7c3aed; }

.fu-text-swatch-dark   { background: #374151; }
.fu-text-swatch-blue   { background: #2563eb; }
.fu-text-swatch-green  { background: #059669; }
.fu-text-swatch-red    { background: #dc2626; }
.fu-text-swatch-purple { background: #7c3aed; }

/* Canvas right-click context menu */
.fu-ctx-menu {
  position: fixed;
  min-width: 150px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.14);
  padding: 4px;
  z-index: 100000;
}

.fu-ctx-item {
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 600;
  color: #374151;
  border-radius: 6px;
  cursor: pointer;
}

.fu-ctx-item:hover { background: #eff6ff; color: #2563eb; }

.fu-ctx-danger { color: #dc2626; }
.fu-ctx-danger:hover { background: #fee2e2; color: #dc2626; }

/* Canvas toolbar: buttons never wrap their label; the toolbar itself wraps as a whole */
.fu-canvas-toolbar { flex-wrap: wrap; row-gap: 8px; }
.fu-toolbar-right { flex-wrap: wrap; row-gap: 8px; }
.fu-tool-btn, .fu-save-btn { white-space: nowrap; flex-shrink: 0; }

/* While dragging a new connection it stays gray; once it lands on a block (drawflow
   adds the node_in_node-* class) it turns green to confirm the connection. */
.drawflow .connection .main-path {
  stroke: #94a3b8;
  stroke-width: 3px;
}
.drawflow .connection[class*="node_in_node-"] .main-path {
  stroke: #10b981;
}
.drawflow .connection[class*="node_in_node-"] .main-path:hover { stroke: #059669; }

/* Canvas stage = positioning context so the zoom controls sit ON the dotted canvas */
.fu-canvas-stage { position: relative; flex: 1; display: flex; min-height: 0; }
.fu-canvas-stage #drawflow { flex: 1; }

/* Viewport controls anchored to the top-right of the dotted canvas */
.fu-canvas-zoom {
  position: absolute;
  top: 12px;
  left: 12px;
  display: flex;
  gap: 6px;
  z-index: 6;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 4px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.fu-zoom-btn {
  padding: 6px 12px;
  border: none;
  background: #fff;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  color: #374151;
  cursor: pointer;
  line-height: 1;
}
.fu-zoom-btn:hover { background: #eff6ff; color: #2563eb; }

/* + Block dropdown menu */
.fu-block-add-wrap { position: relative; display: inline-block; }
.fu-block-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  width: 264px;
  max-height: 62vh;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.14);
  padding: 4px;
  z-index: 100;
  overflow: hidden;
}
.fu-block-search {
  margin: 2px 2px 4px;
  padding: 8px 10px;
  border: 1px solid #e2e5f0;
  border-radius: 6px;
  font: inherit;
  font-size: 12.5px;
  outline: none;
  flex-shrink: 0;
}
.fu-block-search:focus { border-color: #4f46e5; box-shadow: 0 0 0 3px #eef0fe; }
.fu-block-list { overflow-y: auto; flex: 1; min-height: 0; }
.fu-block-list::-webkit-scrollbar { width: 8px; }
.fu-block-list::-webkit-scrollbar-thumb { background: #e2e5f0; border-radius: 4px; }
.fu-block-menu-item {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 8px 12px;
  border-radius: 6px;
  cursor: pointer;
}
.fu-block-menu-item:hover { background: #eff6ff; }
.fu-block-menu-item strong { font-size: 13px; color: #1a1a1a; }
.fu-block-menu-item span { font-size: 11px; color: #9ca3af; }
.fu-block-menu-item.is-hidden { display: none; }
.fu-block-empty { padding: 10px 12px; font-size: 12px; color: #9ca3af; display: none; }

/* New block-type badge colors */
.fu-node-action-webhook { background: #ede9fe; color: #6d28d9; }
.fu-node-action-records { background: #cffafe; color: #0e7490; }
.fu-node-action-offers  { background: #fef3c7; color: #92400e; }
.fu-node-action-find    { background: #e0f2fe; color: #075985; }
.fu-node-action-claim   { background: #dcfce7; color: #166534; }
.fu-node-action-ai-appt { background: #ede9fe; color: #5b21b6; }
.fu-node-action-branch  { background: #fef3c7; color: #92400e; }
.fu-node-action-enroll  { background: #dbeafe; color: #1e40af; }
.fu-node-action-trigger { background: #fae8ff; color: #86198f; }
.fu-node-action-on-lead { background: #d1fae5; color: #065f46; }
.fu-node-action-zbuyer { background: #ffece5; color: #c2410c; }
.fu-node-action-create-contact { background: #cffafe; color: #155e75; }
.fu-node-action-add-dnc { background: #fee2e2; color: #991b1b; }
.fu-node-action-distribute { background: #dbeafe; color: #1e40af; }
.ae-check-label { display: flex; align-items: center; gap: 8px; font-weight: 500; cursor: pointer; }
.ae-check-label input { width: 16px; height: 16px; }

/* Action Events: variable picker ("+ insert variable") */
.ae-var-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; margin-left: 6px; padding: 0;
  border: 1px solid #d1d5db; border-radius: 5px; background: #f9fafb;
  color: #374151; font-size: 15px; line-height: 1; cursor: pointer; vertical-align: middle;
}
.ae-var-btn:hover { background: #eef2ff; border-color: #a5b4fc; color: #4338ca; }
.ae-var-picker {
  position: fixed; z-index: 10010; width: 280px; max-height: 360px; overflow-y: auto;
  background: #fff; border: 1px solid #e5e7eb; border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.18); padding: 6px;
}
.ae-var-group { padding: 4px 2px; }
.ae-var-group + .ae-var-group { border-top: 1px solid #f1f5f9; margin-top: 4px; }
.ae-var-group-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: #6b7280; padding: 6px 8px 4px; }
.ae-var-hint { font-size: 12px; color: #9ca3af; padding: 0 8px 6px; }
.ae-var-item { font-size: 13px; color: #1f2937; padding: 6px 8px; border-radius: 6px; cursor: pointer; font-family: monospace; }
.ae-var-item:hover { background: #eef2ff; color: #4338ca; }

/* Contact profile: read-only enrichment sections (public records, offers) */
.contact-readonly-section {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid #e5e7eb;
}
.contact-readonly-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  color: #1a1a1a;
  margin-bottom: 10px;
}
.contact-readonly-tag {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #6b7280;
  background: #f3f4f6;
  border-radius: 10px;
  padding: 2px 7px;
}
.contact-readonly-empty {
  font-size: 12px;
  color: #9ca3af;
  padding: 4px 0;
}
.offer-card {
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 8px;
  background: #f9fafb;
}
.offer-card-amount {
  font-size: 16px;
  font-weight: 700;
  color: #065f46;
}
.offer-card-buyer {
  font-size: 12px;
  color: #6b7280;
  margin-top: 2px;
}

/* Settings: collapsible email (SMTP) accounts */
.email-account {
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  margin-bottom: 10px;
  overflow: hidden;
}
.email-account-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 14px;
  cursor: pointer;
  background: #f9fafb;
}
.email-account.open .email-account-head { border-bottom: 1px solid #e5e7eb; }
.email-account-domain { font-weight: 700; font-size: 14px; color: #1a1a1a; }
.ea-caret { color: #6b7280; font-size: 12px; }
.ea-remove {
  border: none; background: none; color: #9ca3af; font-size: 18px;
  cursor: pointer; line-height: 1; padding: 0 4px;
}
.ea-remove:hover { color: #dc2626; }
.email-account-body { padding: 14px; }
.email-account-empty { font-size: 13px; color: #9ca3af; padding: 6px 0 12px; }
.dialer-static .email-account-head { cursor: default; }
.dialer-status { font-size: 12px; font-weight: 600; color: #0b7a43; background: #e9f8ef; border: 1px solid #c6ebd5; border-radius: 12px; padding: 3px 10px; }

/* Email/dialer account: actions row + remove button (themed; red only on hover) */
.ea-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ea-delete-btn {
  padding: 7px 14px;
  border: 1px solid var(--hs-border);
  border-radius: 6px;
  background: #fff;
  color: var(--hs-navy-text);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}
.ea-delete-btn:hover { background: #fde0e0; color: #b42318; border-color: #f3c0c0; }

/* ============================================================
   HUBSPOT-STYLE THEME (source of truth — see handoff brief)
   Appended so its shell + token rules win over legacy styles.
   ============================================================ */
:root {
  --hs-navy:        #2d3e50;
  --hs-navy-text:   #33475b;
  --hs-label:       #516f90;
  --hs-orange:      #ff7a59;
  --hs-orange-dark: #e8704f;
  --hs-teal:        #00a4bd;
  --hs-teal-dark:   #0091ae;
  --brand-blue:     #185FA5;   /* logo "AI" + nav active accent */
  --hs-bg:          #f5f8fa;
  --hs-surface:     #ffffff;
  --hs-border:      #cbd6e2;
  --hs-border-soft: #dfe3eb;
  --hs-hover:       #f0f5f9;
  --hs-radius:      6px;
  --hs-shadow:      0 1px 6px rgba(45, 62, 80, .08);
  --nav-w:          236px;
  --nav-w-collapsed:64px;
  --topbar-h:       52px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: 'Lexend Deca', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: var(--hs-bg);
  color: var(--hs-navy-text);
  font-size: 14px;
  line-height: 1.5;
}

/* ---------- Global top bar ---------- */
.topbar {
  position: sticky; top: 0; z-index: 100;
  display: flex; align-items: center; gap: 16px;
  height: var(--topbar-h); padding: 0 16px;
  background: var(--hs-navy); color: #fff;
}
.topbar-brand { font-size: 18px; font-weight: 700; color: #fff; white-space: nowrap; text-decoration: none; cursor: pointer; }
.topbar-brand .brand-convert { color: #fff; }
.topbar-brand .brand-ai { color: var(--brand-blue); }
.topbar-search {
  display: flex; align-items: center; gap: 8px;
  flex: 1; max-width: 520px; height: 34px; padding: 0 10px;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--hs-radius);
  transition: background .15s ease, border-color .15s ease;
}
.topbar-search:focus-within { background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.3); }
.topbar-search svg { width: 16px; height: 16px; color: #aebccc; flex-shrink: 0; }
.topbar-search input { flex: 1; background: transparent; border: none; outline: none; color: #fff; font: inherit; font-size: 13px; }
.topbar-search input::placeholder { color: #aebccc; }
.kbd { font-size: 11px; color: #aebccc; border: 1px solid rgba(255,255,255,.25); border-radius: 4px; padding: 1px 6px; white-space: nowrap; }
.topbar-actions { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.tb-icon {
  position: relative; width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: none; color: #c5d0db;
  border-radius: var(--hs-radius); cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.tb-icon:hover { background: rgba(255,255,255,.1); color: #fff; }
.tb-icon svg { width: 18px; height: 18px; }
.tb-badge {
  position: absolute; top: 2px; right: 2px; min-width: 16px; height: 16px; padding: 0 4px;
  background: var(--hs-orange); color: #fff; font-size: 10px; font-weight: 600;
  line-height: 16px; text-align: center; border-radius: 8px;
}
.tb-account { position: relative; margin-left: 6px; }
.tb-account-btn {
  display: flex; align-items: center; gap: 8px;
  background: transparent; border: none; color: #fff;
  font: inherit; font-size: 13px; font-weight: 500; cursor: pointer;
  padding: 5px 8px; border-radius: var(--hs-radius); transition: background .15s ease;
}
.tb-account-btn:hover { background: rgba(255,255,255,.1); }
.tb-avatar {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--hs-teal); color: #fff; font-size: 11px; font-weight: 600;
  display: flex; align-items: center; justify-content: center;
}
.tb-account-btn .chev { width: 14px; height: 14px; color: #c5d0db; transition: transform .15s ease; }
.tb-account.open .tb-account-btn .chev { transform: rotate(180deg); }
.tb-dropdown {
  position: absolute; top: calc(100% + 6px); right: 0; min-width: 210px;
  background: #fff; border: 1px solid var(--hs-border-soft); border-radius: var(--hs-radius);
  box-shadow: 0 6px 20px rgba(45,62,80,.18); padding: 6px; display: none; z-index: 110;
}
.tb-account.open .tb-dropdown { display: block; }
.tb-dropdown a, .tb-dropdown button {
  display: flex; width: 100%; align-items: center; gap: 10px; padding: 9px 10px;
  background: none; border: none; text-align: left; font: inherit; font-size: 13px;
  color: var(--hs-navy-text); text-decoration: none; border-radius: 4px; cursor: pointer;
}
.tb-dropdown a svg, .tb-dropdown button svg { width: 16px; height: 16px; color: var(--hs-label); }
.tb-dropdown a:hover, .tb-dropdown button:hover { background: var(--hs-hover); }
.tb-account-name { padding: 6px 10px 8px; }
.tb-account-name strong { display: block; font-size: 13px; color: var(--hs-navy-text); }
.tb-account-name span { display: block; font-size: 12px; color: var(--hs-label); }
.tb-account-name span:empty { display: none; }
.tb-divider { height: 1px; background: var(--hs-border-soft); margin: 6px 4px; }
.tb-logout { color: #c0341d; }
.tb-logout:hover { background: #fdeeeb; }

/* ---------- App shell: vertical rail + main ---------- */
.container {
  display: flex;
  min-height: calc(100vh - var(--topbar-h));
  max-width: none; margin: 0; padding: 0;
}
.vnav {
  position: sticky; top: var(--topbar-h); align-self: flex-start;
  height: calc(100vh - var(--topbar-h)); width: var(--nav-w); flex-shrink: 0;
  background: var(--hs-navy); color: #fff; display: flex; flex-direction: column;
  transition: width .18s ease; overflow: hidden;
}
.vnav.collapsed { width: var(--nav-w-collapsed); }
.vnav-links { flex: 1; display: flex; flex-direction: column; padding: 10px 0; overflow-y: auto; overflow-x: hidden; }
/* Hide rail links until permissions resolve, so unauthorized tabs never flash */
.vnav .vnav-links { opacity: 0; }
.vnav.perms-ready .vnav-links { opacity: 1; }
.vnav-links::-webkit-scrollbar { width: 6px; }
.vnav-links::-webkit-scrollbar-thumb { background: rgba(255,255,255,.18); border-radius: 3px; }
.vnav-link {
  position: relative; display: flex; align-items: center; gap: 12px; padding: 10px 18px;
  color: #c5d0db; text-decoration: none; font-size: 13px; font-weight: 500; white-space: nowrap;
  transition: background .15s ease, color .15s ease;
}
.vnav-link svg { flex-shrink: 0; width: 20px; height: 20px; }
.vnav-link:hover { background: rgba(255,255,255,.07); color: #fff; }
.vnav-link.active { color: #fff; background: rgba(255,255,255,.06); }
.vnav-link.active::before { content: ''; position: absolute; left: 0; top: 6px; bottom: 6px; width: 3px; background: var(--brand-blue); border-radius: 0 3px 3px 0; }
.vnav-label { transition: opacity .12s ease; }
.vnav.collapsed .vnav-link { justify-content: center; padding: 10px 0; }
.vnav.collapsed .vnav-label { display: none; }
.vnav.collapsed .vnav-link::after {
  content: attr(data-label); position: absolute; left: calc(100% + 8px); top: 50%; transform: translateY(-50%);
  background: #1b2733; color: #fff; font-size: 12px; padding: 5px 9px; border-radius: var(--hs-radius);
  white-space: nowrap; opacity: 0; pointer-events: none; z-index: 20; transition: opacity .12s ease;
}
.vnav.collapsed .vnav-link:hover::after { opacity: 1; }
.vnav-foot { border-top: 1px solid rgba(255,255,255,.08); padding: 8px 0; }
.vnav-collapse {
  width: 100%; display: flex; align-items: center; gap: 12px; padding: 10px 18px;
  background: transparent; border: none; color: #c5d0db; font: inherit; font-size: 13px;
  font-weight: 500; cursor: pointer; white-space: nowrap; transition: background .15s ease, color .15s ease;
}
.vnav-collapse:hover { background: rgba(255,255,255,.07); color: #fff; }
.vnav-collapse svg { flex-shrink: 0; width: 20px; height: 20px; transition: transform .18s ease; }
.vnav.collapsed .vnav-collapse { justify-content: center; padding: 10px 0; }
.vnav.collapsed .vnav-collapse .vnav-label { display: none; }
.vnav.collapsed .vnav-collapse svg { transform: rotate(180deg); }
.app-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

/* ---------- Dashboard two-pane ---------- */
header { padding: 24px 24px 0; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
.stat-box { background: var(--hs-surface); border: 1px solid var(--hs-border-soft); border-radius: var(--hs-radius); box-shadow: var(--hs-shadow); padding: 18px 20px; display: flex; flex-direction: column; gap: 6px; }
.stat-label { font-size: 11px; font-weight: 600; letter-spacing: .6px; text-transform: uppercase; color: var(--hs-label); }
.stat-value { font-size: 30px; font-weight: 600; color: var(--hs-navy-text); line-height: 1.1; }
.main-content { display: flex; gap: 16px; padding: 24px; flex: 1; min-height: 0; }
.sidebar { width: 360px; flex-shrink: 0; background: var(--hs-surface); border: 1px solid var(--hs-border-soft); border-radius: var(--hs-radius); box-shadow: var(--hs-shadow); display: flex; flex-direction: column; overflow: hidden; }
.chat-area { flex: 1; min-width: 0; background: var(--hs-surface); border: 1px solid var(--hs-border-soft); border-radius: var(--hs-radius); box-shadow: var(--hs-shadow); display: flex; flex-direction: column; overflow: hidden; }

/* ---------- Search + filters (dashboard) ---------- */
.search-row { display: flex; gap: 8px; padding: 16px; border-bottom: 1px solid var(--hs-border-soft); }
#searchInput { flex: 1; padding: 8px 12px; border: 1px solid var(--hs-border); border-radius: var(--hs-radius); font: inherit; color: var(--hs-navy-text); background: var(--hs-surface); transition: border-color .15s ease, box-shadow .15s ease; }
#searchInput::placeholder { color: #99acc2; }
#searchInput:focus { outline: none; border-color: var(--hs-teal); box-shadow: 0 0 0 2px rgba(0,164,189,.18); }

/* ---------- Tabs ---------- */
.tabs { display: flex; gap: 6px; border-bottom: 1px solid var(--hs-border-soft); padding: 8px 8px 10px; }
/* Pill-style filter tabs (All / New / Active / Complete) */
.tab { padding: 7px 14px; background: transparent; border: none; border-radius: var(--hs-radius); color: var(--hs-label); font: inherit; font-weight: 600; cursor: pointer; transition: background .15s ease, color .15s ease; }
.tab:hover { background: var(--hs-hover); color: var(--hs-navy-text); }
.tab.active { background: var(--hs-teal); color: #fff; border: none; }
.tab.active:hover { background: var(--hs-teal-dark); color: #fff; }

/* ---------- Conversation list + chat (dashboard, app.js-rendered) ---------- */
#conversationsList { flex: 1; overflow-y: auto; }
#conversationsList > * { border-bottom: 1px solid var(--hs-border-soft); cursor: pointer; transition: background .12s ease; }
#conversationsList > *:hover { background: var(--hs-hover); }
#conversationsList > .active, #conversationsList > .selected { background: #e5f5f8; box-shadow: inset 3px 0 0 var(--hs-teal); }
#messagesList { flex: 1; overflow-y: auto; padding: 20px; background: var(--hs-bg); display: flex; flex-direction: column; gap: 10px; }
#messagesList > .inbound, #messagesList > .received, #messagesList > .incoming { align-self: flex-start; background: var(--hs-surface); border: 1px solid var(--hs-border-soft); color: var(--hs-navy-text); }
#messagesList > .outbound, #messagesList > .sent, #messagesList > .outgoing { align-self: flex-end; background: var(--hs-teal); color: #fff; }

/* ---------- Reports dashboard (Gridstack) ---------- */
.reports-page { padding: 24px; }
.reports-toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
.reports-toolbar h1 { margin: 0; font-size: 20px; font-weight: 600; color: var(--hs-navy-text); }
.reports-toolbar .date-filter { margin-bottom: 0; }
.reports-toolbar .spacer { margin-left: auto; }
.btn { padding: 8px 14px; border-radius: var(--hs-radius); font: inherit; font-weight: 500; cursor: pointer; border: 1px solid var(--hs-border); background: var(--hs-surface); color: var(--hs-label); transition: background .15s ease, border-color .15s ease; }
.btn:hover { background: var(--hs-hover); }
.btn-primary { background: var(--hs-orange); border-color: var(--hs-orange); color: #fff; }
.btn-primary:hover { background: var(--hs-orange-dark); border-color: var(--hs-orange-dark); }
.report-card { background: var(--hs-surface); border: 1px solid var(--hs-border-soft); border-radius: var(--hs-radius); box-shadow: var(--hs-shadow); display: flex; flex-direction: column; min-height: 120px; transition: box-shadow .15s ease; overflow: hidden; }
.report-card:hover { box-shadow: 0 4px 14px rgba(45,62,80,.12); }
.report-head { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--hs-border-soft); }
.report-grip { cursor: grab; color: #b7c2d0; display: flex; line-height: 0; }
.report-grip:active { cursor: grabbing; }
.report-title { font-size: 13px; font-weight: 600; color: var(--hs-navy-text); }
.report-menu { margin-left: auto; color: var(--hs-label); background: none; border: none; cursor: pointer; font-size: 18px; line-height: 1; padding: 0 4px; }
.report-menu:hover { color: var(--hs-navy-text); }
.report-body { padding: 16px; flex: 1; overflow: auto; }
.kpi .report-body { display: flex; flex-direction: column; gap: 6px; justify-content: center; }
.kpi-value { font-size: 30px; font-weight: 600; color: var(--hs-navy-text); line-height: 1; }
.kpi-sub { font-size: 12px; color: var(--hs-label); }
.kpi-split { display: flex; flex-direction: column; gap: 2px; margin-top: 8px; font-size: 12px; font-weight: 600; }
.kpi-split .split-pos { color: #0a6b3b; }
.kpi-split .split-neg { color: #b5350f; }
.bars { display: flex; align-items: flex-end; gap: 12px; height: 170px; }
.bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 8px; height: 100%; }
.bar-fill { width: 60%; background: var(--hs-teal); border-radius: 4px 4px 0 0; min-height: 2px; }
.bar-label { font-size: 11px; color: var(--hs-label); white-space: nowrap; }
.bar-value { font-size: 11px; font-weight: 600; color: var(--hs-navy-text); }
.report-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.report-table th { text-align: left; font-size: 11px; font-weight: 600; letter-spacing: .4px; text-transform: uppercase; color: var(--hs-label); padding: 8px 10px; border-bottom: 1px solid var(--hs-border-soft); }
.report-table td { padding: 10px; border-bottom: 1px solid var(--hs-border-soft); color: var(--hs-navy-text); }
.report-table tr:last-child td { border-bottom: none; }

/* Collapsible admin sections (Add User / Change Password) */
.admin-toggle { cursor: pointer; user-select: none; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.admin-toggle .admin-chev { font-size: 13px; color: var(--hs-label); transition: transform .15s ease; }
.admin-toggle.collapsed .admin-chev { transform: rotate(-90deg); }
.admin-toggle.collapsed + .admin-collapse { display: none; }
.admin-collapse { margin-top: 12px; }

/* ---------- HubSpot-style Tasks table ---------- */
.hs-tasks-toolbar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 6px 0 16px; }
.hs-view-tabs { display: flex; gap: 6px; }
.hs-view-tab { padding: 7px 14px; border-radius: var(--hs-radius); border: none; background: transparent; color: var(--hs-label); font: inherit; font-weight: 600; font-size: 13px; cursor: pointer; transition: background .15s ease, color .15s ease; }
.hs-view-tab:hover { background: var(--hs-hover); color: var(--hs-navy-text); }
.hs-view-tab.active { background: var(--hs-teal); color: #fff; }
.hs-tasks-toolbar .hs-spacer { margin-left: auto; }
.hs-user-filter { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--hs-label); }
.hs-user-filter select { padding: 6px 10px; border: 1px solid var(--hs-border); border-radius: var(--hs-radius); font: inherit; font-size: 13px; color: var(--hs-navy-text); background: var(--hs-surface); }

.hs-task-card { background: var(--hs-surface); border: 1px solid var(--hs-border-soft); border-radius: var(--hs-radius); box-shadow: var(--hs-shadow); overflow: hidden; }
.hs-task-table { width: 100%; border-collapse: collapse; }
.hs-task-table thead th { text-align: left; font-size: 11px; font-weight: 600; letter-spacing: .4px; text-transform: uppercase; color: var(--hs-label); padding: 11px 14px; border-bottom: 1px solid var(--hs-border-soft); background: var(--hs-bg); white-space: nowrap; }
.hs-task-table td { padding: 12px 14px; border-bottom: 1px solid var(--hs-border-soft); vertical-align: top; font-size: 14px; color: var(--hs-navy-text); }
.hs-task-table tbody tr:last-child td { border-bottom: none; }
.hs-task-table tbody tr:hover { background: var(--hs-hover); }
.hs-task-check { width: 20px; height: 20px; padding: 0; border-radius: 50%; border: 2px solid var(--hs-border); background: #fff; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; color: transparent; transition: all .12s ease; }
.hs-task-check svg { width: 12px; height: 12px; }
.hs-task-check:hover { border-color: var(--hs-teal); color: var(--hs-teal); }
.hs-task-check.done { background: var(--hs-teal); border-color: var(--hs-teal); color: #fff; }
.hs-task-title { font-weight: 600; color: var(--hs-navy-text); }
.hs-task-title.done { text-decoration: line-through; color: var(--hs-label); }
.hs-task-notes { font-size: 12px; color: var(--hs-label); white-space: pre-wrap; margin-top: 2px; }
.hs-task-meta { font-size: 11px; color: #9aa7b8; margin-top: 3px; }
.hs-contact-chip { display: inline-flex; align-items: center; gap: 7px; color: var(--hs-teal-dark); text-decoration: none; font-weight: 500; }
.hs-contact-chip:hover { text-decoration: underline; }
.hs-contact-avatar { width: 22px; height: 22px; flex-shrink: 0; border-radius: 50%; background: var(--hs-teal); color: #fff; font-size: 10px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; }
.hs-due-overdue { color: #b5350f; font-weight: 700; }
.hs-status-badge { display: inline-block; padding: 2px 9px; border-radius: 12px; font-size: 11px; font-weight: 700; }
.hs-status-badge.open { color: var(--hs-teal-dark); background: #e0f5f9; }
.hs-status-badge.completed { color: #0a6b3b; background: #d6f0e0; }
.hs-task-actions { display: flex; gap: 6px; opacity: 0; transition: opacity .12s ease; white-space: nowrap; }
.hs-task-table tbody tr:hover .hs-task-actions { opacity: 1; }
.hs-task-actions button { padding: 5px 10px; border-radius: var(--hs-radius); border: 1px solid var(--hs-border); background: var(--hs-surface); color: var(--hs-label); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
.hs-task-actions button:hover { background: var(--hs-hover); }
.hs-task-actions .hs-del:hover { color: #b5350f; border-color: #f4b9aa; background: #fdeeeb; }

/* Gridstack integration: cards fill their grid cell */
.grid-stack-item-content { inset: 0; overflow: visible; }
.grid-stack .report-card { height: 100%; }
.report-card.kpi .report-body { display: flex; flex-direction: column; gap: 6px; justify-content: center; }

/* ---------- Reconciliation: legacy components -> HubSpot tokens ---------- */
.app-main { padding: 0; }
.logged-in-label { display: none !important; }
/* Centered page containers must fill app-main (they're flex items with margin:auto,
   which otherwise sizes them to content — causing the layout to jump between the
   empty state and a populated table). width:100% keeps them anchored. */
.reports-container, .settings-container, .admin-container, .test-env-container,
.api-testing-container, .dist-container, .reports-page { width: 100%; }

/* Primary action buttons (legacy blue -> orange) */
.refresh-btn, .save-btn, .filter-apply-btn, .dist-btn-primary, .retrigger-btn,
.fu-save-btn, .btn-save-contact {
  background: var(--hs-orange); border-color: var(--hs-orange); color: #fff;
}
.refresh-btn:hover, .save-btn:hover, .filter-apply-btn:hover, .dist-btn-primary:hover,
.retrigger-btn:hover, .fu-save-btn:hover { background: var(--hs-orange-dark); border-color: var(--hs-orange-dark); }
.refresh-btn:disabled, .retrigger-btn:disabled { opacity: .6; }

/* Secondary buttons */
.filter-reset-btn, .dist-btn-secondary, .fu-tool-btn {
  background: var(--hs-surface); border: 1px solid var(--hs-border); color: var(--hs-label);
}
.filter-reset-btn:hover, .dist-btn-secondary:hover { background: var(--hs-hover); }
.fu-tool-btn:hover { border-color: var(--hs-teal); color: var(--hs-teal-dark); }

/* Links / active accents -> teal */
.lead-link, .filter-clear { color: var(--hs-teal-dark); }
.lead-link:hover { color: var(--hs-teal); }
.filter-btn.has-filters { border-color: var(--hs-teal); color: var(--hs-teal-dark); background: #e5f5f8; }

/* Input focus rings -> teal */
.setting-item input:focus, .setting-item textarea:focus, .setting-item select:focus,
.dist-form-group input:focus, .dist-form-group select:focus,
.confirm-password-group input:focus, .search-row input:focus, .form-group input:focus {
  outline: none; border-color: var(--hs-teal); box-shadow: 0 0 0 2px rgba(0,164,189,.18);
}

/* Tables -> tokens */
.lead-table th { background: var(--hs-bg); color: var(--hs-label); border-bottom-color: var(--hs-border-soft); }
.lead-table td { border-bottom-color: var(--hs-border-soft); color: var(--hs-navy-text); }
.lead-table tr:hover td { background: var(--hs-hover); }
.lead-name { color: var(--hs-navy-text); }

/* Cards / sections -> tokens */
.dist-section { background: var(--hs-surface); box-shadow: var(--hs-shadow); border: 1px solid var(--hs-border-soft); }
.confirm-modal-header h3 { color: var(--hs-navy-text); }

/* Flow canvas chrome (restyle only; node logic untouched) */
.fu-canvas-toolbar { border-bottom-color: var(--hs-border-soft); background: var(--hs-surface); }
/* Fill the area under the top bar (old value was tuned to the removed navbar) */
.fu-detail-layout { height: calc(100vh - var(--topbar-h)); border-color: var(--hs-border-soft); border-radius: 0; }
.fu-sidebar { background: var(--hs-bg); border-right-color: var(--hs-border-soft); }
.drawflow .drawflow-node.selected { border-color: var(--hs-teal); box-shadow: 0 4px 14px rgba(0,164,189,.20); }
.drawflow .connection .main-path:hover, .drawflow .connection .main-path.selected { stroke: var(--hs-teal); }
.drawflow .drawflow-node .input:hover, .drawflow .drawflow-node .output:hover { border-color: var(--hs-teal); }

/* Notification bell sits in the dark top bar — match the other top-bar icons */
.topbar-actions .notif-bell-wrap .notif-bell-btn {
  width: 34px; height: 34px; padding: 0; display: flex; align-items: center; justify-content: center;
  background: transparent; border: none; color: #c5d0db; border-radius: var(--hs-radius); cursor: pointer;
}
.topbar-actions .notif-bell-wrap .notif-bell-btn svg { width: 19px; height: 19px; }
.topbar-actions .notif-bell-wrap .notif-bell-btn:hover { background: rgba(255,255,255,.1); color: #fff; }

/* Global search results dropdown */
.topbar-search { position: relative; }
.tb-search-results {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 120;
  background: #fff; border: 1px solid var(--hs-border-soft); border-radius: var(--hs-radius);
  box-shadow: 0 10px 30px rgba(45,62,80,.22); padding: 6px; display: none; max-height: 380px; overflow-y: auto;
}
.tb-search-results.open { display: block; }
.tb-search-item { padding: 8px 10px; border-radius: 5px; cursor: pointer; }
.tb-search-item:hover { background: var(--hs-hover); }
.tb-search-name { font-size: 13px; font-weight: 600; color: var(--hs-navy-text); }
.tb-search-meta { font-size: 12px; color: var(--hs-label); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tb-search-empty { padding: 12px 10px; font-size: 13px; color: var(--hs-label); }

/* ---------- Contacts index page ---------- */
.contacts-toolbar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 6px 0 16px; }
.contacts-search { flex: 1; min-width: 220px; max-width: 360px; position: relative; }
.contacts-search input { width: 100%; padding: 8px 12px; border: 1px solid var(--hs-border); border-radius: var(--hs-radius); font: inherit; color: var(--hs-navy-text); }
.contacts-search input:focus { outline: none; border-color: var(--hs-teal); box-shadow: 0 0 0 2px rgba(0,164,189,.18); }
.contacts-count { font-size: 13px; color: var(--hs-label); }
.contacts-card { background: var(--hs-surface); border: 1px solid var(--hs-border-soft); border-radius: var(--hs-radius); box-shadow: var(--hs-shadow); overflow: hidden; }
.contacts-table { width: 100%; border-collapse: collapse; }
.contacts-table thead th { text-align: left; font-size: 11px; font-weight: 600; letter-spacing: .4px; text-transform: uppercase; color: var(--hs-label); padding: 11px 14px; border-bottom: 1px solid var(--hs-border-soft); background: var(--hs-bg); white-space: nowrap; }
.contacts-table td { padding: 12px 14px; border-bottom: 1px solid var(--hs-border-soft); font-size: 14px; color: var(--hs-navy-text); vertical-align: middle; }
.contacts-table tbody tr:last-child td { border-bottom: none; }
.contacts-table tbody tr:hover { background: var(--hs-hover); cursor: pointer; }
.contacts-name { display: inline-flex; align-items: center; gap: 9px; color: var(--hs-teal-dark); font-weight: 600; text-decoration: none; }
.contacts-name:hover { text-decoration: underline; }
.contacts-avatar { width: 26px; height: 26px; flex-shrink: 0; border-radius: 50%; background: var(--hs-teal); color: #fff; font-size: 10px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; }
.contacts-muted { color: #9aa7b8; }
.contacts-pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; flex-wrap: wrap; }
.contacts-pager .pg-btns { display: flex; gap: 6px; align-items: center; }
.contacts-pager .pg-info { font-size: 13px; color: var(--hs-label); }

/* ---------- Mobile ---------- */
@media (max-width: 768px) {
  .topbar { gap: 8px; padding: 0 10px; }
  .topbar-brand { display: none; }
  .kbd { display: none; }
  .tb-account-btn .name { display: none; }
  .container { flex-direction: column; }
  .vnav, .vnav.collapsed { position: static; height: auto; width: 100%; flex-direction: row; align-items: center; }
  .vnav-links { flex-direction: row; padding: 0; overflow-x: auto; }
  .vnav-link { padding: 12px 12px; }
  .vnav-link .vnav-label { display: none; }
  .vnav-link.active::before { top: auto; bottom: 0; left: 6px; right: 6px; width: auto; height: 3px; border-radius: 3px 3px 0 0; }
  .vnav-foot { display: none; }
  .main-content { flex-direction: column; padding: 16px; }
  .sidebar { width: 100%; }
}

/* ============================================================
   HubSpot-style contact record page (conversation.html)
   ============================================================ */
.hs-contact-layout {
  display: grid;
  grid-template-columns: 330px minmax(0, 1fr);
  gap: 16px;
  width: 100%;
  box-sizing: border-box;
  padding: 16px 20px;
  align-items: start;
}
.hs-left { display: flex; flex-direction: column; gap: 12px; }

/* Cards */
.hs-card { background: #fff; border: 1px solid var(--hs-border-soft); border-radius: 8px; padding: 14px 16px; }
.hs-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.hs-card-title { font-size: 13px; font-weight: 600; color: var(--hs-navy-text); }
.hs-ro-tag { font-size: 10px; color: #7c98b6; background: #f0f4f8; padding: 2px 6px; border-radius: 4px; }
.hs-card-actions { display: flex; gap: 6px; }
.hs-card-btn { font-size: 12px; padding: 3px 9px; border: 1px solid var(--hs-border); background: #fff; color: var(--hs-teal); border-radius: 4px; cursor: pointer; font-weight: 600; font-family: inherit; }
.hs-card-btn:hover { background: #f0f8fb; }
.hs-card-btn-primary { background: var(--hs-teal); color: #fff; border-color: var(--hs-teal); }
.hs-card-btn-primary:hover { background: var(--hs-teal-dark); }

/* Fields */
.hs-fields { display: flex; flex-direction: column; gap: 10px; }
.hs-field { display: flex; flex-direction: column; gap: 2px; }
.hs-field-label { font-size: 11px; color: #7c98b6; font-weight: 500; }
.hs-field-value { font-size: 13px; color: var(--hs-navy-text); word-break: break-word; }
/* County links to its own county page. Reads as ordinary text until hovered, so the field list keeps
   its shape and the link is discovered rather than shouting for attention. */
.hs-field-link { color: inherit; text-decoration: none; cursor: pointer; }
.hs-field-link:hover { color: var(--brand-blue, #185FA5); text-decoration: underline; }
.hs-pill { display: inline-block; font-size: 11px; font-weight: 600; padding: 2px 9px; border-radius: 11px; }
.hs-pill.on { background: #e7f7ee; color: #0f7a43; }
.hs-pill.off { background: #f0f2f5; color: #7c8a9a; }
/* REAPI Extra Data: a comfortable label/value LIST, deliberately NOT the dash-tile grid. The raw
   payload carries ~90 usable fields plus four repeating sets, and as tiles that was a wall of boxes
   nobody read. Two columns where there is room, one when there is not, with quiet group headings and
   a horizontally scrollable table for the repeating sets so a long lender name cannot widen the tab. */
.rx-body { display: flex; flex-direction: column; }
.rx-group { margin-top: 18px; }
.rx-group:first-child { margin-top: 0; }
.rx-head { font-size: 10px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: #8aa0b8; padding-bottom: 7px; border-bottom: 1px solid #eef2f7; margin-bottom: 6px; }
.rx-rows { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 0 28px; }
.rx-row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 6px 0; border-bottom: 1px solid #f5f8fb; min-width: 0; }
.rx-k { font-size: 12px; color: #7c98b6; flex: 0 0 auto; }
.rx-v { font-size: 12.5px; color: var(--hs-navy-text); font-weight: 500; text-align: right; word-break: break-word; min-width: 0; }
.rx-flags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding-top: 2px; }
.rx-flag { display: inline-block; font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 11px; background: #fdecec; color: #b42318; }
.rx-flag.rx-flag-neutral { background: #f0f2f5; color: #64748b; }
.rx-none { font-size: 12.5px; color: #0f7a43; font-weight: 500; }
.rx-scroll { overflow-x: auto; }
.rx-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.rx-table th { text-align: left; font-size: 10px; text-transform: uppercase; letter-spacing: .4px; color: #8aa0b8; font-weight: 700; padding: 7px 14px 7px 0; border-bottom: 1px solid #eef2f7; white-space: nowrap; }
.rx-table td { padding: 7px 14px 7px 0; border-bottom: 1px solid #f5f8fb; color: var(--hs-navy-text); white-space: nowrap; }
.rx-table td:first-child, .rx-table th:first-child { white-space: normal; min-width: 160px; }
.rx-table tr:last-child td { border-bottom: none; }

/* Homeowner Dashboard card: tile grid like the portal Home Details block (no icons) */
.dash-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; align-items: stretch; }
.dash-tile { background: #f7f9fc; border: 1px solid #eef2f7; border-radius: 10px; padding: 11px 13px; display: flex; flex-direction: column; justify-content: space-between; gap: 7px; min-height: 60px; min-width: 0; }
.dash-tile.dash-wide { grid-column: 1 / -1; }
.dash-k { font-size: 10px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: #8aa0b8; line-height: 1.3; }
.dash-v { font-size: 14px; font-weight: 600; color: var(--hs-navy-text); word-break: break-word; line-height: 1.35; }
.dash-v a { color: var(--hs-teal); text-decoration: none; }
.dash-v a:hover { text-decoration: underline; }
.dash-v .hs-pill { align-self: flex-start; }
.dash-input { width: 100%; padding: 6px 8px; border: 1px solid var(--hs-border); border-radius: 5px; font-size: 13px; font-family: inherit; box-sizing: border-box; }
.hs-field-value.category-badge { align-self: flex-start; }
.hs-field-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; }
.hs-field-input { padding: 6px 8px; border: 1px solid var(--hs-border); border-radius: 4px; font-size: 13px; font-family: inherit; box-sizing: border-box; width: 100%; }
.hs-ro-empty { font-size: 12px; color: #7c98b6; font-style: italic; }

/* Identity */
.hs-identity { display: flex; gap: 12px; align-items: center; padding: 2px; }
.hs-avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--hs-teal); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 16px; flex-shrink: 0; }
.hs-identity-main { min-width: 0; }
.hs-identity-namerow { display: flex; align-items: center; gap: 6px; }
.hs-identity-namerow h2 { margin: 0; font-size: 18px; color: var(--hs-navy-text); }
.hs-icon-link { color: var(--hs-teal); display: inline-flex; }
.hs-identity-email { font-size: 13px; color: var(--hs-teal); text-decoration: none; word-break: break-all; }
.hs-identity-email:hover { text-decoration: underline; }

/* Enrollment banner */
.hs-enroll-banner { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border: 1px solid var(--hs-teal); border-radius: 8px; background: #e6f6fa; font-size: 13px; }
.hs-enroll-text { color: var(--hs-navy-text); }
.hs-enroll-action { color: var(--hs-teal); font-weight: 600; cursor: pointer; white-space: nowrap; }
.hs-enroll-action:hover { text-decoration: underline; }

/* Rearrange mode */
.hs-arrange-row { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border: 1px solid var(--hs-border-soft); border-radius: 6px; background: #fff; }
.hs-arrange-row.dragging { opacity: .5; }
.hs-arrange-row.is-hidden { background: #f5f8fa; }
.hs-arrange-row.is-hidden .hs-arrange-label { color: #9db3c8; }
.hs-drag-handle { color: #9db3c8; cursor: grab; user-select: none; font-size: 12px; letter-spacing: -2px; }
.hs-arrange-label { flex: 1; font-size: 13px; color: var(--hs-navy-text); }
.hs-eye-btn { font-size: 11px; padding: 2px 8px; border: 1px solid var(--hs-border); background: #fff; border-radius: 4px; cursor: pointer; color: var(--hs-navy-text); font-family: inherit; }

/* Middle: record + activities */
.hs-main { background: #fff; border: 1px solid var(--hs-border-soft); border-radius: 8px; display: flex; flex-direction: column; min-height: calc(100vh - 76px); }
.hs-record-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--hs-border-soft); }
.hs-record-headinfo h1 { margin: 0; font-size: 20px; color: var(--hs-navy-text); }
.hs-record-headinfo p { margin: 2px 0 0; font-size: 13px; color: #7c98b6; }
.hs-record-actions { display: flex; gap: 8px; flex-shrink: 0; }
.hs-rec-btn { font-size: 13px; font-weight: 600; padding: 7px 14px; border-radius: 6px; border: 1px solid var(--hs-border); background: #fff; color: var(--hs-navy-text); cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; font-family: inherit; }
.hs-rec-btn:hover { background: #f0f4f8; }
.hs-rec-btn-hs { background: var(--hs-orange); color: #fff; border-color: var(--hs-orange); }
.hs-rec-btn-hs:hover { background: var(--hs-orange-dark); border-color: var(--hs-orange-dark); }
.hs-rec-btn-enroll { color: var(--brand-blue); border-color: var(--brand-blue); }
.hs-rec-btn-enroll:hover { background: #eef4fb; }

/* Tabs */
.hs-tabs { display: flex; gap: 2px; padding: 8px 14px 0; border-bottom: 1px solid var(--hs-border-soft); flex-wrap: wrap; }
.hs-tab { background: none; border: none; border-bottom: 3px solid transparent; padding: 10px 12px; font-size: 13px; font-weight: 600; color: #5b7592; cursor: pointer; font-family: inherit; }
.hs-tab:hover { color: var(--hs-navy-text); }
.hs-tab.active { color: var(--hs-navy-text); border-bottom-color: var(--brand-blue); }
.hs-tab-count { font-size: 11px; background: #eaf0f6; color: #5b7592; border-radius: 10px; padding: 1px 7px; margin-left: 2px; }
.hs-tab-body { flex: 1; overflow-y: auto; padding: 12px 20px; min-height: 300px; }

/* Activity timeline — each activity is its own card */
.hs-act-list { display: flex; flex-direction: column; }
.hs-act { position: relative; display: flex; gap: 14px; padding: 18px 20px; background: #fff; border: 1px solid #e3e9f0; border-radius: 12px; margin-bottom: 14px; box-shadow: 0 1px 2px rgba(45,62,80,.06); }
.hs-act:hover { box-shadow: 0 4px 14px rgba(45,62,80,.10); }
.hs-act-top { margin-bottom: 2px; }
.hs-act-actions { position: absolute; top: 10px; right: 12px; display: none; gap: 6px; background: #fff; padding-left: 10px; }
.hs-act:hover .hs-act-actions { display: flex; }
.hs-act-act { font-size: 11px; padding: 3px 9px; border: 1px solid var(--hs-border); background: #fff; border-radius: 4px; cursor: pointer; color: var(--hs-navy-text); font-family: inherit; }
.hs-act-act:hover { background: #f0f4f8; }
.hs-act-del:hover { background: #fde0e0; color: #b42318; border-color: #f3c0c0; }
.hs-act-icon { width: 30px; height: 30px; border-radius: 50%; background: #eef2f6; display: flex; align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0; }
.hs-act-error { font-size: 12px; color: #b42318; background: #fdeceb; border: 1px solid #f3c0c0; border-radius: 6px; padding: 5px 9px; margin: 4px 0; }
.hs-act.k-sms .hs-act-icon { background: #e6f6fa; }
.hs-act.k-note .hs-act-icon { background: #fff4d6; }
.hs-act.k-email .hs-act-icon { background: #efe6fb; }
.hs-act.k-task .hs-act-icon { background: #e6f0ff; }
.hs-act.k-auto .hs-act-icon { background: #fdeee9; }
.hs-act-main { flex: 1; min-width: 0; }
.hs-act-top { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.hs-act-title { font-size: 13px; font-weight: 600; color: var(--hs-navy-text); }
.hs-act-time { font-size: 11px; color: #9db3c8; white-space: nowrap; }
.hs-act-sub { font-size: 12px; color: #5b7592; margin-top: 3px; }
.hs-act-body { font-size: 13px; color: #33475b; margin-top: 4px; white-space: pre-wrap; word-break: break-word; }
.hs-act-email.is-clamped .hs-act-body { max-height: 4.8em; overflow: hidden; -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent); mask-image: linear-gradient(to bottom, #000 55%, transparent); }
.hs-act-more { background: none; border: none; color: var(--brand-blue, #185FA5); font-family: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; padding: 4px 0 0; }
.hs-act-more:hover { text-decoration: underline; }
.hs-act-badge { font-size: 10px; font-weight: 600; padding: 1px 7px; border-radius: 4px; text-transform: capitalize; }
.hs-act-badge.is-done, .hs-act-badge.auto-done { background: #d6f3e0; color: #0b7a43; }
.hs-act-badge.is-open { background: #fde9c8; color: #9a6700; }
.hs-act-badge.auto-stopped { background: #fde0e0; color: #b42318; }
.hs-act-badge.auto-failed { background: #fde0e0; color: #b42318; }
.hs-act-badge.auto-running { background: #e0ecfa; color: #185FA5; }
.hs-empty { text-align: center; color: #9db3c8; font-size: 13px; padding: 48px 0; }
.hs-track-stat { font-weight: 600; color: #7c98b6; }
.hs-track-stat.is-on { color: #0b7a43; }

/* SMS thread (full conversation in the SMS tab) */

/* Opt-in status text (now lives in a generic card, not .opt-status-section) */
.hs-card .opted-out-text { color: #b42318; font-weight: 600; }
.hs-card .opted-in-text { color: #0b7a43; font-weight: 600; }
.hs-card .opt-in-btn { margin-top: 10px; }

/* Quick-action row (Note / Email / Call / Task / SMS / More) */
.hs-action-row { display: flex; gap: 4px; flex-wrap: wrap; padding: 6px 2px 2px; }
.hs-action-more { position: relative; }
.hs-action-btn { display: flex; flex-direction: column; align-items: center; gap: 4px; background: none; border: none; cursor: pointer; padding: 4px 6px; font-family: inherit; color: var(--hs-navy-text); }
.hs-action-ico { width: 34px; height: 34px; border-radius: 50%; background: #e6f1f9; color: var(--hs-teal); display: flex; align-items: center; justify-content: center; transition: background .15s; }
.hs-action-btn:hover:not(.is-disabled) .hs-action-ico { background: #d4e8f6; }
.hs-action-lbl { font-size: 11px; color: #516f8a; }
.hs-action-btn.is-disabled { opacity: .4; cursor: not-allowed; }
.hs-more-menu, .hs-create-menu { position: absolute; z-index: 50; background: #fff; border: 1px solid var(--hs-border-soft); border-radius: 8px; box-shadow: 0 6px 20px rgba(45,62,80,.16); min-width: 180px; overflow: hidden; }
.hs-more-menu { top: 60px; left: 50%; transform: translateX(-50%); }
.hs-create-menu { top: 38px; right: 0; }
.hs-menu-item { padding: 9px 14px; font-size: 13px; color: var(--hs-navy-text); cursor: pointer; }
.hs-menu-item:hover { background: #f0f6fb; }
.hs-menu-item-danger { color: #b91c1c; }
.hs-menu-item-danger:hover { background: #fef2f2; }

/* Middle top action bar + per-tab create toolbar */
.hs-main-actions { display: flex; justify-content: flex-end; align-items: center; gap: 8px; padding: 12px 20px; border-bottom: 1px solid var(--hs-border-soft); min-height: 40px; }
.hs-main-actions:empty { display: none; }
.hs-tab-toolbar { display: flex; justify-content: flex-end; padding: 10px 20px 0; }
.hs-tab-toolbar:empty { display: none; padding: 0; }
.hs-create-wrap { position: relative; }
.hs-create-btn { font-size: 13px; font-weight: 600; padding: 7px 14px; border-radius: 6px; border: 1px solid var(--hs-border); background: #fff; color: var(--hs-teal); cursor: pointer; font-family: inherit; }
.hs-create-btn:hover { background: #f0f8fb; }

/* Activity toolbar row (Create + Filter) */
.hs-toolbar-row { display: flex; gap: 8px; align-items: center; }
.hs-filter-wrap { position: relative; }
.hs-filter-menu { position: absolute; top: 38px; right: 0; z-index: 50; background: #fff; border: 1px solid var(--hs-border-soft); border-radius: 8px; box-shadow: 0 6px 20px rgba(45,62,80,.16); min-width: 200px; padding: 6px; }
.hs-filter-head { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: #8aa0b8; padding: 6px 10px 8px; }
.hs-filter-item { display: flex; align-items: center; gap: 9px; padding: 7px 10px; font-size: 13px; color: var(--hs-navy-text); cursor: pointer; border-radius: 6px; }
.hs-filter-item:hover { background: #f0f6fb; }
.hs-filter-item input { width: 15px; height: 15px; accent-color: var(--hs-teal); cursor: pointer; }
.hs-filter-all { font-weight: 600; }
.hs-filter-div { height: 1px; background: var(--hs-border-soft); margin: 4px 8px; }
.hs-filter-subhead { margin-top: 4px; padding-top: 8px; border-top: 1px solid var(--hs-border-soft); }

/* Homeowner-portal activity tag in the merged feed */
.hs-act-tag { font-size: 10.5px; font-weight: 700; color: var(--hs-teal); letter-spacing: .2px; }

/* Collapsible Homeowner details card */
.dash-head { cursor: pointer; user-select: none; }
.dash-chev { font-size: 12px; color: #8aa0b8; margin-left: 4px; line-height: 1; }

/* Report Portal Tiles card (per-contact tile overrides) */
.rpt-body { padding: 4px 2px 2px; }
.rpt-row { display: flex; align-items: center; gap: 12px; padding: 11px 4px; border-bottom: 1px solid #eef2f7; flex-wrap: wrap; }
.rpt-row:last-child { border-bottom: none; }
.rpt-info { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 180px; }
.rpt-title { font-size: 13.5px; font-weight: 600; color: var(--hs-navy-text); }
.rpt-meta { font-size: 11.5px; color: #6b7f96; }
.rpt-badges { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 2px; }
.rpt-b { font-size: 10px; font-weight: 700; letter-spacing: .3px; padding: 2px 8px; border-radius: 999px; text-transform: uppercase; }
.rpt-b-ok { background: #e6f6ec; color: #1a7f43; }
.rpt-b-wait { background: #f1f4f8; color: #7c8da0; }
.rpt-b-show { background: #e7eefc; color: #2563eb; }
.rpt-b-hide { background: #f6e9e9; color: #b0453a; }
.rpt-ctrls { display: flex; gap: 6px; flex-shrink: 0; }
.rpt-btn { font-size: 12px; font-weight: 600; padding: 6px 12px; border: 1px solid #d1d9e3; border-radius: 7px; background: #fff; color: #48607a; cursor: pointer; transition: background .12s, border-color .12s, color .12s; }
.rpt-btn:hover { border-color: #9db0c6; background: #f7f9fc; }
.rpt-btn.on { background: #2563eb; border-color: #2563eb; color: #fff; }

/* Month separators in the activity timeline */
.hs-act-month { font-size: 13px; font-weight: 700; color: var(--hs-navy-text); padding: 16px 2px 6px; border-bottom: 2px solid var(--hs-border-soft); margin-bottom: 4px; }
.hs-act-list .hs-act-month:first-child { padding-top: 4px; }

/* Composer modal */
.hs-modal-overlay { position: fixed; inset: 0; background: rgba(45,62,80,.45); display: flex; align-items: center; justify-content: center; z-index: 10002; }
.hs-modal { background: #fff; border-radius: 12px; width: 92%; max-width: 520px; max-height: 88vh; display: flex; flex-direction: column; box-shadow: 0 12px 40px rgba(0,0,0,.25); }
.hs-modal-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--hs-border-soft); font-size: 15px; font-weight: 600; color: var(--hs-navy-text); }
.hs-modal-x { background: none; border: none; font-size: 22px; line-height: 1; color: #7c98b6; cursor: pointer; }
.hs-modal-body { padding: 16px 20px; overflow: visible; }
/* Mention autocomplete inside composers: anchor to the textarea, open downward */
.hs-cmp-mention { position: relative; }
.hs-cmp-mention .mention-dropdown { bottom: auto; top: 100%; margin-top: 4px; }
/* Actions dropdown on the About card */
.hs-about-menu-wrap { position: relative; }
.hs-card-menu { position: absolute; top: 32px; right: 0; z-index: 50; background: #fff; border: 1px solid var(--hs-border-soft); border-radius: 8px; box-shadow: 0 6px 20px rgba(45,62,80,.16); min-width: 150px; overflow: hidden; }
.hs-modal-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 20px; border-top: 1px solid var(--hs-border-soft); }
.hs-cmp-label { display: block; font-size: 12px; font-weight: 600; color: #516f8a; margin: 12px 0 4px; }
.hs-cmp-label:first-child { margin-top: 0; }
.hs-cmp-input, .hs-cmp-textarea { width: 100%; box-sizing: border-box; padding: 9px 11px; border: 1px solid var(--hs-border); border-radius: 6px; font-size: 14px; font-family: inherit; }
.hs-cmp-textarea { min-height: 100px; resize: vertical; }
/* Mention textareas auto-grow, so the dropdown stays right under the caret line */
.hs-cmp-mention .hs-cmp-textarea { min-height: 44px; resize: none; overflow: hidden; }
.hs-card-btn.hs-danger { background: #e5484d; color: #fff; border-color: #e5484d; }
.hs-card-btn.hs-danger:hover { background: #cf3a3f; border-color: #cf3a3f; }

@media (max-width: 900px) {
  .hs-contact-layout { grid-template-columns: 1fr; }
}

/* Deal history cards (HubSpot activity import, Phase 1). Collapsed by default; the header carries the
   deal name, its stage and its date so the list is scannable without expanding anything. Tokens and
   radii match .dash-tile so the expanded body sits in the same visual family as every other field grid. */
.deal-card { border: 1px solid #eef2f7; border-radius: 10px; margin-bottom: 10px; overflow: hidden; background: #fff; }
.deal-head { width: 100%; display: flex; align-items: flex-start; gap: 10px; padding: 11px 14px; background: #f7f9fc;
  border: 0; border-bottom: 1px solid transparent; font: inherit; text-align: left; cursor: pointer; }
.deal-head:hover { background: #f1f5fa; }
.deal-head[aria-expanded="true"] { border-bottom-color: #eef2f7; }
.deal-head:focus-visible { outline: 2px solid var(--brand-blue, #185FA5); outline-offset: -2px; }
.deal-chev { color: #8aa0b8; font-size: 11px; flex: 0 0 auto; line-height: 1.5; }
.deal-headtext { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
/* Wraps rather than truncating: the deal name is how you tell one card from another. */
.deal-title { font-size: 14px; font-weight: 600; color: var(--hs-navy-text); line-height: 1.35; word-break: break-word; }
.deal-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.deal-stage { font-size: 10px; font-weight: 700; letter-spacing: .3px; text-transform: uppercase;
  background: #e8eff7; color: #4a6785; border-radius: 999px; padding: 3px 9px; }
.deal-when { font-size: 12px; color: #8aa0b8; }
/* A field list, not a tile grid: this mirrors how HubSpot lays out a deal record, and at the ~340px
   width of the activity panel a two-column list stays readable where tiles wrap awkwardly. */
.deal-body { padding: 4px 14px 12px; }
.deal-row { display: flex; align-items: baseline; gap: 12px; padding: 7px 0; border-top: 1px solid #f1f5f9; }
.deal-row:first-child { border-top: 0; }
.deal-row-k { flex: 0 0 46%; font-size: 12px; color: #8aa0b8; line-height: 1.4; }
.deal-row-v { flex: 1 1 auto; min-width: 0; font-size: 13px; font-weight: 600;
  color: var(--hs-navy-text); line-height: 1.4; word-break: break-word; }
/* Empty reads as HubSpot renders it. A field that vanished when blank would look like one we failed
   to import, which is a different and much worse message. */
.deal-row-v.is-empty { color: #c2cfdd; font-weight: 400; }

/* Imported Kixie history inside the SMS thread.
   Every colour here derives from the bubble via currentColor and opacity, NEVER a fixed value. The
   bubble is teal for outbound, grey for inbound, yellow for comments and purple for follow-up email,
   so any single hardcoded colour is unreadable on at least one of them. The first version used a
   slate blue on the teal bubble at about 1.6:1 contrast, which is what looked wrong. */
.message-who { font-size: 11px; font-weight: 700; color: inherit;
  margin-bottom: 5px; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
/* Full opacity on both. Fading them was the mistake: white at .82 over the teal bubble measures
   2.46:1, BELOW the 2.98:1 the bubble body text already sits at. Hierarchy comes from size, weight
   and the border instead, none of which cost contrast. */
.message-src { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px;
  color: inherit; background: transparent; border: 1px solid currentColor;
  border-radius: 999px; padding: 0 6px; line-height: 15px; opacity: .85; }

/* ── Subscription tab: ISA packages ───────────────────────────────────────────────────────────────
   A column per side, a card per COUNTY, a row per package type. County is the block because that is
   the unit ISA sells in: one agent routinely holds exclusive, shared and prospecting in one county.

   Literal hex rather than theme tokens, matching the approved design. The two agree today, and a
   token drifting later must not silently move this away from what was signed off. */
.isa-card { background: #fff; border: 1px solid #eef2f7; border-radius: 10px;
            box-shadow: 0 1px 6px rgba(45,62,80,.08); overflow: hidden; }
.isa-card.is-two { width: 1000px; max-width: 100%; }
/* One side present: the card does NOT stretch. A half-empty wide card reads as missing data rather
   than as an agent who only buys one kind of lead. */
.isa-card.is-one { width: 470px; max-width: 100%; }

.isa-head { display: flex; align-items: center; justify-content: space-between; gap: 12px;
            background: #f7f9fc; border-bottom: 1px solid #eef2f7; padding: 11px 14px;
            width: 100%; border-left: 0; border-right: 0; border-top: 0; cursor: pointer;
            font-family: inherit; text-align: left; }
.isa-head:hover { background: #f1f5fa; }
.isa-head:focus-visible { outline: 2px solid var(--brand-blue, #185FA5); outline-offset: -2px; }
.isa-head h3 { margin: 0; font-size: 14px; font-weight: 600; color: #33475b; }
.isa-chev { width: 9px; height: 9px; border-right: 1.5px solid #7b93ad; border-bottom: 1.5px solid #7b93ad;
            transform: rotate(45deg); margin-bottom: 4px; transition: transform .15s ease; }
.isa-head[aria-expanded="false"] .isa-chev { transform: rotate(-45deg); margin-bottom: 0; margin-top: 4px; }

.isa-body { display: grid; gap: 0; grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
.isa-card.is-one .isa-body { grid-template-columns: minmax(0,1fr); }
/* The column is the tinted ground and each county a white card on it, so a county reads as an object
   rather than as a spacing convention. At six counties that is the difference between a legible list
   and one long strip. */
.isa-col { padding: 13px 14px 15px; background: #f7f9fc; }
.isa-col + .isa-col { border-left: 1px solid #eef2f7; }
.isa-col-label { font-size: 11px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase;
                 color: #64748b; display: flex; justify-content: space-between; align-items: baseline;
                 margin-bottom: 12px; }
.isa-col-n { font-weight: 600; color: #8aa0b8; letter-spacing: 0; text-transform: none; font-size: 11.5px; }

.isa-cty { background: #fff; border: 1px solid #e5e9f0; border-radius: 9px;
           box-shadow: 0 1px 3px rgba(45,62,80,.07); padding: 10px 12px 8px; margin-bottom: 12px; }
.isa-cty:last-child { margin-bottom: 0; }
.isa-band { display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
            padding-bottom: 8px; border-bottom: 1px solid #eef2f7; margin-bottom: 2px; }
.isa-cty-name { font-size: 14px; font-weight: 700; color: #33475b; }
.isa-cty-link { color: inherit; text-decoration: none; }
.isa-cty-link:hover { color: var(--brand-blue, #185FA5); text-decoration: underline; }
.isa-zips { font-size: 10.5px; font-weight: 600; color: #a16207; background: #fef3c7;
            padding: 1px 6px; border-radius: 999px; margin-left: 5px; white-space: nowrap; }
/* The pill as a BUTTON keeps the pill's exact look; the affordance is the hover, not a restyle. */
.isa-zips--btn { border: none; cursor: pointer; font-family: inherit; }
.isa-zips--btn:hover { background: #fde68a; }

/* Preferred Areas: one row per county, the dot carrying active/inactive the same way the package
   dots carry kind. Green/grey only, since these are states rather than products. */
.pa-list { padding: 4px 2px; }
.pa-row { display: flex; align-items: baseline; gap: 9px; padding: 8px 10px; }
.pa-row + .pa-row { border-top: 1px solid #f6f8fb; }
.pa-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; position: relative; top: -1px; }
.pa-dot--on { background: #22a06b; }
.pa-dot--off { background: #cbd6e2; }
.pa-name { font-size: 13.5px; font-weight: 600; color: #33475b; }
.pa-primary { font-size: 10px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase;
              color: #185FA5; background: #e0ecfa; padding: 1px 7px; border-radius: 999px; }
.pa-status { font-size: 12px; color: #8aa0b8; margin-left: auto; white-space: nowrap; }
.pa-status.is-on { color: #0f7a43; font-weight: 600; }

/* Preferred Zips: county bands reuse the ISA card band; the zips themselves are chips. */
.pz-list { padding: 4px 2px; }
.pz-group { padding: 8px 10px; }
.pz-group + .pz-group { border-top: 1px solid #f6f8fb; }
.pz-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.pz-chip { display: inline-flex; align-items: baseline; gap: 5px; font-size: 12px;
           background: #f4f7fb; border: 1px solid #e5e9f0; border-radius: 7px; padding: 3px 8px; }
.pz-chip b { font-weight: 700; color: #33475b; }
.pz-city { color: #64748b; font-size: 11px; }

/* The zip pill's modal: a scrollable checklist rather than a form, so no footer. */
.zip-modal { max-width: 420px; }
.zip-modal-body { overflow-y: auto; padding: 8px 12px 14px; }
.zip-modal-count { font-size: 11.5px; font-weight: 600; color: #64748b; margin-left: 10px; }
.zip-row { display: flex; align-items: baseline; gap: 10px; padding: 6px 8px; border-radius: 6px; }
.zip-row + .zip-row { border-top: 1px solid #f6f8fb; }
.zip-row.is-on { background: #f2faf6; }
.zip-check { width: 16px; flex: 0 0 auto; text-align: center; color: #22a06b; font-weight: 700; }
.zip-code { font-size: 13px; font-weight: 600; color: #33475b; }
.zip-city { font-size: 12px; color: #64748b; }
.isa-band-v { font-size: 14px; font-weight: 700; color: #33475b; }

.isa-row { padding: 7px 0; }
.isa-row + .isa-row { border-top: 1px solid #f6f8fb; }
.isa-line { display: flex; align-items: baseline; gap: 8px; }
/* Colour rides on a dot, not on the text. #ff7a59 as 13px text measures 2.57:1 on white, well under
   the app's own body text; as a 7px mark it has no legibility threshold and stays exactly as designed,
   while the type name keeps full-strength navy. */
.isa-dot { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; position: relative; top: -1px; }
.isa-dot--x { background: #dc2626; }
.isa-dot--s { background: #ff7a59; }
.isa-dot--p { background: #cbd6e2; }
.isa-type { font-size: 13px; font-weight: 600; color: #33475b; }
.isa-detail { font-size: 12.5px; color: #64748b; margin-left: auto; text-align: right; white-space: nowrap; }
.isa-detail b { font-weight: 600; color: #33475b; }
.isa-num { font-variant-numeric: tabular-nums; }

/* Green because it is money saved, and the only green on the card, so it reads as a different KIND of
   fact rather than a fourth metric. */
.isa-disc { display: inline-block; font-size: 10.5px; font-weight: 700; color: #0f7a43;
            background: #e7f7ee; padding: 1px 5px; border-radius: 999px; margin-left: 5px; }
.isa-disc--over { color: #b5350f; background: #fee2e2; }

.isa-prog { margin: 6px 0 0 15px; }
.isa-bar { height: 4px; border-radius: 999px; background: #eef2f7; overflow: hidden; }
.isa-bar span { display: block; height: 100%; border-radius: 999px; background: #185FA5; }
/* Over-delivery keeps the bar full and tips it teal. A bar clamped at 100% would draw 8 of 7 exactly
   like 7 of 7 and hide the surplus. */
.isa-bar--over span { background: linear-gradient(90deg,#185FA5 0%,#185FA5 70%,#00a4bd 100%); }
.isa-prog-lbl { display: flex; justify-content: space-between; gap: 8px; margin-top: 4px;
                font-size: 11px; color: #64748b; }
.isa-prog-lbl b { color: #33475b; font-weight: 600; }
.isa-prog-go { color: #8aa0b8; }
.isa-prog-over { color: #0091ae; font-weight: 600; }

/* Total and cycle belong to the subscription, not to either column, which is why they sit in a
   full-width footer rather than inside one of the two sides. */
.isa-foot { background: #f7f9fc; border-top: 1px solid #eef2f7; padding: 11px 14px;
            display: flex; flex-direction: column; align-items: center; gap: 3px; }
.isa-total { display: flex; align-items: baseline; gap: 8px; }
.isa-total-k { font-size: 13px; font-weight: 600; color: #516f90; }
.isa-total-v { font-size: 18px; font-weight: 700; color: #33475b; }
.isa-total-per { font-size: 12px; color: #64748b; }
.isa-cycle { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 8px; }
.isa-cycle-k { font-size: 11px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: #64748b; }
.isa-cycle-rel { font-size: 13px; font-weight: 600; color: #33475b; }
.isa-cycle-date { font-size: 13px; color: #64748b; }

@media (max-width: 720px) {
  .isa-body { grid-template-columns: minmax(0,1fr); }
  .isa-col + .isa-col { border-left: 0; border-top: 1px solid #eef2f7; }
}


/* The HubSpot half of the Subscription tab, sibling to the ISA card. Same collapsible shell so the
   two read as one family, with the existing tile grid inside it. */
.sub-section { margin-bottom: 14px; }
.sub-section .isa-body-plain { padding: 18px 20px 20px; }
/* Besi 2026-08-20: these fields go in fixed horizontal rows, not the auto-flowing grid, so the
   three subscriber flags stay on one line and are read as a set. */
.sub-row3 { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 18px; margin-bottom: 18px; }
.sub-row2 { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 18px; margin-bottom: 18px; }
.sub-row3:last-child, .sub-row2:last-child { margin-bottom: 0; }
.sub-row3 .dash-tile, .sub-row2 .dash-tile { padding: 14px 16px; min-height: 68px; gap: 9px; }
@media (max-width: 640px) {
  .sub-row3, .sub-row2 { grid-template-columns: minmax(0,1fr); }
}

/* Leads / Past Leads toggle. One tab, two views (Besi 2026-08-20), so the switch has to sit in the
   body: a second tab is exactly what this replaced. */
.lead-toggle { display: inline-flex; gap: 2px; padding: 3px; margin: 0 0 12px;
               background: #f1f5f9; border-radius: 9px; }
.lead-toggle-btn { font-family: inherit; font-size: 13px; font-weight: 600; color: #64748b;
                   padding: 6px 14px; border: 0; background: transparent; border-radius: 7px; cursor: pointer; }
.lead-toggle-btn:hover { color: #33475b; }
.lead-toggle-btn.is-on { background: #fff; color: #185FA5; box-shadow: 0 1px 2px rgba(45,62,80,.10); }
.lead-toggle-btn:focus-visible { outline: 2px solid var(--brand-blue, #185FA5); outline-offset: -2px; }
.lead-toggle-n { font-size: 11px; font-weight: 700; color: #8aa0b8; font-variant-numeric: tabular-nums; }
.lead-toggle-btn.is-on .lead-toggle-n { color: #185FA5; }

/* ── Action Event panel: schedule times and the ISA sweep list ────────────────────────────────────
   These were shipped with an unstyled class name and rendered as raw browser buttons. They now use the
   same tokens as the rest of the panel. */
.fu-time-del {
  border: none; background: none; color: #9ca3af; font-size: 17px; line-height: 1;
  padding: 4px 8px; border-radius: 6px; cursor: pointer; font-family: inherit;
}
.fu-time-del:hover { background: #fee2e2; color: #dc2626; }
.fu-time-del:focus-visible { outline: 2px solid var(--brand-blue, #185FA5); outline-offset: -2px; }

.fu-panel-run-btn {
  font-family: inherit; font-size: 13px; font-weight: 600; color: #fff;
  background: var(--hs-orange, #ff7a59); border: none; border-radius: 7px;
  padding: 9px 16px; cursor: pointer;
}
.fu-panel-run-btn:hover { background: var(--hs-orange-dark, #e8704f); }
.fu-panel-run-btn:focus-visible { outline: 2px solid var(--brand-blue, #185FA5); outline-offset: 2px; }

/* The sweep list on the ISA Sync block. Rows are data, so they read as a small table rather than as
   prose, and the empty state says so plainly instead of leaving a blank. */
.fu-sweeps { font-size: 12.5px; color: #33475b; }
.fu-sweeps .fu-sweep {
  display: flex; gap: 10px; align-items: baseline;
  padding: 6px 0; border-top: 1px solid #f1f5f9;
}
.fu-sweeps .fu-sweep:first-child { border-top: 0; }
.fu-sweep-when { color: #64748b; min-width: 104px; font-variant-numeric: tabular-nums; }
.fu-sweep-status { font-weight: 600; }
.fu-sweep-status.is-ok { color: #0b8043; }
.fu-sweep-status.is-bad { color: #b5350f; }
.fu-sweep-counts { color: #33475b; font-variant-numeric: tabular-nums; }
.fu-sweep-ms { color: #94a3b8; margin-left: auto; font-variant-numeric: tabular-nums; }
.fu-sweeps-empty { color: #9db3c8; padding: 6px 0; }
.fu-sweeps-running { color: #185FA5; font-weight: 600; margin-bottom: 6px; }

/* One row per scheduled time: the field takes the space, the remove sits beside it. */
.aeSchedTimeRow { display: flex; gap: 6px; align-items: center; margin-bottom: 6px; }
.aeSchedTimeRow input[type="time"] { flex: 1 1 auto; min-width: 0; }

/* Bots (Zara). Lifted out of bots.html so the picker, Zara Main and Zara Prospecting share one
   copy instead of three drifting ones. Unchanged from the inline block it came from. */
.bt-grid { display:flex; flex-direction:column; gap:16px; }
    .bt-card { background:#fff; border:1px solid #e5e9f0; border-radius:12px; padding:16px 18px; }
    .bt-card h3 { margin:0 0 12px; font-size:15px; color:#1a1a1a; }
    .bt-row { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
    .bt-select, .bt-input { font-family:inherit; font-size:13px; color:#33475b; padding:7px 10px;
      border:1.5px solid #e5e9f0; border-radius:8px; background:#fff; outline:none; }
    .bt-select:focus, .bt-input:focus { border-color:#185FA5; }
    .bt-textarea { width:100%; min-height:90px; font-family:inherit; font-size:13px; color:#33475b;
      padding:9px 11px; border:1.5px solid #e5e9f0; border-radius:8px; outline:none; resize:vertical; }
    .bt-textarea:focus { border-color:#185FA5; }
    .bt-pill { display:inline-block; font-size:11px; font-weight:700; padding:3px 9px; border-radius:999px; }
    .bt-on { background:#dcfce7; color:#15803d; }
    .bt-off { background:#f1f5f9; color:#64748b; }
    .bt-status { font-size:13px; margin-left:8px; }
    .bt-toggle { font-family:inherit; font-size:13px; font-weight:700; padding:9px 18px; border-radius:8px;
      border:none; cursor:pointer; }
    .bt-toggle.is-on { background:#dcfce7; color:#15803d; }
    .bt-toggle.is-off { background:#fee2e2; color:#b91c1c; }
    .bt-table { width:100%; border-collapse:collapse; }
    .bt-table th { text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.4px;
      color:#64748b; font-weight:700; padding:9px 10px; border-bottom:1px solid #e5e9f0; }
    .bt-table td { padding:10px; font-size:13.5px; color:#374151; border-bottom:1px solid #f1f5f9; vertical-align:top; }
    .bt-table tr:last-child td { border-bottom:none; }
    .bt-name { font-weight:600; color:#111827; }
    .bt-sub { font-size:12px; color:#64748b; }
    .bt-btn { padding:6px 11px; border-radius:7px; font-size:12px; font-weight:600; cursor:pointer;
      border:1px solid #d1d5db; background:#fff; color:#374151; }
    .bt-btn:hover { background:#f9fafb; }
    .bt-btn:disabled { opacity:.45; cursor:default; }
    .bt-btn-danger { color:#b91c1c; border-color:#fecaca; }
    .bt-search-wrap { position:relative; flex:1 1 260px; max-width:340px; }
    .bt-results { position:absolute; top:calc(100% + 4px); left:0; right:0; background:#fff;
      border:1px solid #e5e9f0; border-radius:10px; box-shadow:0 12px 30px -12px rgba(15,40,80,.25);
      z-index:20; display:none; overflow:hidden; }
    .bt-results.open { display:block; }
    .bt-result { padding:9px 12px; cursor:pointer; }
    .bt-result:hover { background:#f8fafc; }
    .bt-log { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:1px;
      background:#e5e9f0; border:1px solid #e5e9f0; border-radius:10px; overflow:hidden; }
    .bt-log li { background:#fff; padding:10px 13px; font-size:13px; color:#374151;
      display:flex; gap:10px; align-items:baseline; }
    .bt-log .kind { font-family:ui-monospace,Consolas,monospace; font-size:11.5px; color:#185FA5; white-space:nowrap; }
    .bt-log time { color:#94a3b8; font-size:12px; margin-left:auto; white-space:nowrap; }
    .bt-empty { padding:18px 10px; text-align:center; color:#64748b; font-size:13.5px; }
    .bt-collapse { display:none; margin-top:12px; border-top:1px solid #f1f5f9; padding-top:12px; }
    .bt-collapse.open { display:block; }
    .bt-name-link { text-decoration:none; color:inherit; cursor:pointer; }
    .bt-name-link:hover { color:#185FA5; }
    .bt-modal-overlay { position:fixed; inset:0; background:rgba(15,23,42,.45); display:none;
      align-items:center; justify-content:center; z-index:100; }
    .bt-modal-overlay.open { display:flex; }
    .bt-modal { background:#fff; border-radius:14px; width:min(560px, calc(100vw - 32px));
      box-shadow:0 24px 60px -20px rgba(15,40,80,.45); padding:20px 22px; position:relative; }
    .bt-modal h3 { margin:0 0 14px; font-size:16px; color:#1a1a1a; padding-right:28px; }
    .bt-modal-x { position:absolute; top:12px; right:14px; border:none; background:none;
      font-size:22px; color:#64748b; cursor:pointer; line-height:1; padding:4px; }
    .bt-modal-x:hover { color:#1a1a1a; }
    .bt-modal-foot { display:flex; align-items:center; margin-top:14px; }
    .bt-modal-foot .bt-modal-center { flex:1; display:flex; gap:10px; justify-content:center; }
    .bt-modal-foot .bt-modal-spacer { width:38px; }
    .bt-botswitch { display:inline-flex; border:1px solid #e5e9f0; border-radius:9px; overflow:hidden; }
    .bt-botbtn { font-family:inherit; font-size:13px; font-weight:600; padding:8px 15px; border:none;
      background:#fff; color:#64748b; cursor:pointer; }
    .bt-botbtn + .bt-botbtn { border-left:1px solid #e5e9f0; }
    .bt-botbtn.is-active { background:#185FA5; color:#fff; }
    .bt-thumb-up { color:#15803d; border-color:#bbf7d0; }
    .bt-thumb-up:hover { background:#f0fdf4; }
    .bt-thumb-down { color:#b91c1c; border-color:#fecaca; }
    .bt-thumb-down:hover { background:#fef2f2; }

/* Bots picker tiles. Anchors rather than divs with onclick, so the browser's own affordances -
   middle-click, bookmarking, the back button - work without reimplementing any of them. */
.bt-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.bt-tile { display: flex; flex-direction: column; gap: 6px; background: #fff; border: 1px solid #e5e9f0; border-radius: 12px; padding: 20px 22px; text-decoration: none; transition: border-color .12s, box-shadow .12s, transform .12s; }
.bt-tile:hover { border-color: var(--brand-blue, #185FA5); box-shadow: 0 2px 10px rgba(24,95,165,.08); transform: translateY(-1px); }
.bt-tile-name { font-size: 16px; font-weight: 700; color: #1a1a1a; }
.bt-tile-desc { font-size: 13px; color: #7c98b6; line-height: 1.45; }
/* Prospecting: a single non-clickable pill where Zara Main has its inbound/outbound switch. It marks
   what the bot is, rather than offering a choice - there is no inbound side to switch to. */
.bt-kind { display: inline-block; font-size: 12px; font-weight: 700; padding: 7px 14px; border-radius: 8px; background: #eef2f7; color: #64748b; letter-spacing: .2px; }
/* Templates table. Same family as the allowed-contacts list it sits beside. */
.bt-tpl { width: 100%; border-collapse: collapse; font-size: 13px; }
.bt-tpl th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .4px; color: #8aa0b8; font-weight: 700; padding: 8px 12px 8px 0; border-bottom: 1px solid #eef2f7; }
.bt-tpl td { padding: 10px 12px 10px 0; border-bottom: 1px solid #f5f8fb; color: #33475b; vertical-align: middle; }
.bt-tpl tr:last-child td { border-bottom: none; }
.bt-tpl-name { background: none; border: none; padding: 0; font: inherit; font-weight: 600; color: var(--brand-blue, #185FA5); cursor: pointer; text-align: left; }
.bt-tpl-name:hover { text-decoration: underline; }
.bt-tpl-chan { display: inline-block; font-size: 11px; font-weight: 600; padding: 2px 9px; border-radius: 11px; background: #eef2f7; color: #64748b; text-transform: uppercase; letter-spacing: .3px; }
.bt-tpl-body { color: #7c98b6; max-width: 420px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Workflows (agent side): the 3-step builder pages and the Enrollment card on the canvas ── */
.wf-page { padding: 0 0 40px; }
.wf-head { display: flex; align-items: center; gap: 28px; padding: 16px 28px; background: #fff; border-bottom: 1px solid #e4e7ee; flex-wrap: wrap; }
.wf-head-left { display: flex; flex-direction: column; gap: 4px; min-width: 220px; }
.wf-title-row { display: flex; align-items: center; gap: 10px; }
.wf-title { margin: 0; font-size: 19px; font-weight: 700; color: var(--hs-navy, #17356b); }
.wf-status-pill { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 3px 9px; border-radius: 99px; background: #eef1f6; color: #4a5568; }
.wf-status-active { background: rgba(20,192,138,.14); color: #0e8f66; }
.wf-status-paused { background: rgba(245,158,11,.16); color: #b45309; }
.wf-status-closed { background: #e2e8f0; color: #475569; }
.wf-steps { display: flex; align-items: center; }
.wf-step { display: flex; align-items: center; gap: 9px; padding: 7px 14px; border-radius: 99px; text-decoration: none; font-size: 12.5px; font-weight: 500; color: #8b95ab; }
.wf-step.active { background: rgba(24,95,165,.1); color: var(--brand-blue, #185FA5); font-weight: 600; }
.wf-step-n { width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid #c3cad8; color: #8b95ab; font-size: 11px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; }
.wf-step.active .wf-step-n { background: var(--brand-blue, #185FA5); border-color: var(--brand-blue, #185FA5); color: #fff; }
.wf-step-line { width: 26px; height: 1px; background: #d8dde7; }
.wf-head-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.wf-head-actions .fu-tool-btn, .wf-head-actions .fu-save-btn { display: inline-flex; align-items: center; text-decoration: none; }
.wf-danger { color: #b91c1c; }
.wf-body { display: flex; gap: 24px; padding: 26px 28px; align-items: flex-start; }
.wf-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.wf-side { width: 330px; flex: none; display: flex; flex-direction: column; gap: 14px; }
.wf-card { background: #fff; border: 1px solid #e4e7ee; border-radius: 10px; padding: 22px 24px; }
.wf-card-title { font-size: 15.5px; font-weight: 700; color: var(--hs-navy, #17356b); }
.wf-card-title-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.wf-card-meta { font-size: 12px; color: #6b7689; }
.wf-match { display: flex; gap: 2px; padding: 2px; background: #eef1f6; border-radius: 7px; }
.wf-match-btn { padding: 5px 12px; border: none; border-radius: 5px; background: transparent; font-size: 11.5px; font-weight: 500; color: #6b7689; cursor: pointer; }
.wf-match-btn.active { background: #fff; color: var(--hs-navy, #17356b); font-weight: 600; box-shadow: 0 1px 2px rgba(15,35,80,.12); }
.wf-filters { display: flex; flex-direction: column; gap: 9px; }
.wf-filters-empty, .wf-muted { font-size: 12.5px; color: #8b95ab; }
.wf-filter-row { display: flex; align-items: flex-start; gap: 10px; border: 1px solid #e4e7ee; border-radius: 9px; padding: 12px 14px; }
.wf-filter-field { font-size: 13px; font-weight: 600; color: var(--hs-navy, #17356b); width: 150px; flex: none; padding-top: 7px; }
.wf-filter-value { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.wf-filter-remove { flex: none; border: none; background: transparent; color: #b3bbc9; font-size: 18px; cursor: pointer; padding: 4px 6px; line-height: 1; }
.wf-filter-remove:hover { color: #b91c1c; }
.wf-select, .wf-num { height: 34px; padding: 0 10px; border: 1px solid #d8dde7; border-radius: 7px; font-size: 13px; color: var(--hs-navy, #17356b); background: #fff; }
.wf-select-op { flex: none; }
.wf-num { width: 84px; }
.wf-chips { position: relative; flex: 1; min-width: 200px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; border: 1px solid #d8dde7; border-radius: 8px; padding: 6px 8px; min-height: 40px; }
.wf-chip { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 6px 0 10px; border-radius: 6px; background: rgba(24,95,165,.1); color: var(--brand-blue, #185FA5); font-size: 12px; font-weight: 600; }
.wf-chip button { border: none; background: transparent; color: #7ea6e8; font-size: 14px; cursor: pointer; padding: 0 2px; }
.wf-chip-input { border: none; outline: none; font-size: 12.5px; min-width: 120px; flex: 1; padding: 4px; }
.wf-typeahead { position: absolute; left: 0; top: 100%; margin-top: 4px; width: 100%; max-height: 220px; overflow-y: auto; background: #fff; border: 1px solid #e5e7eb; border-radius: 8px; box-shadow: 0 10px 30px rgba(0,0,0,.14); z-index: 20; }
.wf-ta-item { padding: 8px 12px; font-size: 13px; cursor: pointer; }
.wf-ta-item:hover { background: #eef2ff; }
.wf-ta-empty { padding: 8px 12px; font-size: 12.5px; color: #8b95ab; }
.wf-inline-check { width: 100%; display: flex; align-items: center; gap: 8px; font-size: 12px; color: #4a5568; margin-top: 4px; }
.wf-filter-add { position: relative; margin-top: 12px; }
.wf-add-btn { height: 34px; padding: 0 14px; border: 1px dashed #c3cad8; border-radius: 8px; background: #fff; font-size: 12.5px; font-weight: 600; color: var(--brand-blue, #185FA5); cursor: pointer; }
.wf-add-menu { position: absolute; left: 0; top: 100%; margin-top: 6px; background: #fff; border: 1px solid #e5e7eb; border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.16); padding: 6px; z-index: 30; min-width: 260px; }
.wf-add-item { padding: 8px 10px; border-radius: 6px; font-size: 13px; cursor: pointer; color: #1f2937; }
.wf-add-item:hover { background: #eef2ff; color: #4338ca; }
.wf-label { font-size: 12px; font-weight: 600; color: var(--hs-navy, #17356b); margin: 16px 0 9px; }
.wf-label-inline { font-size: 12px; font-weight: 600; color: var(--hs-navy, #17356b); margin-right: 4px; }
.wf-modes { display: flex; flex-direction: column; gap: 8px; }
.wf-mode { display: flex; gap: 11px; align-items: flex-start; border: 1px solid #e4e7ee; border-radius: 9px; padding: 13px 15px; cursor: pointer; }
.wf-mode.active { border: 1.5px solid var(--brand-blue, #185FA5); background: rgba(24,95,165,.05); }
.wf-mode input { margin-top: 3px; }
.wf-mode-title { font-size: 13px; font-weight: 600; color: var(--hs-navy, #17356b); }
.wf-mode-desc { font-size: 12px; line-height: 1.45; color: #6b7689; margin-top: 2px; }
.wf-divider { height: 1px; background: #eef1f6; margin: 20px 0; }
.wf-option-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-bottom: 16px; }
.wf-unenroll-statuses { border: 1px solid #e4e7ee; border-radius: 9px; background: #f8fafc; padding: 13px 15px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.wf-unenroll-statuses:empty { display: none; }
.wf-status-chip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 6px; border: 1px dashed #c3cad8; font-size: 12px; font-weight: 500; color: #6b7689; cursor: pointer; }
.wf-status-chip.on { border: 1px solid transparent; background: rgba(244,103,74,.12); color: #c9462a; font-weight: 600; }
.wf-count-card { background: var(--hs-navy, #17356b); border-radius: 10px; padding: 22px 22px 18px; color: #fff; }
.wf-count-label { font-size: 10.5px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: rgba(255,255,255,.6); }
.wf-count-row { display: flex; align-items: baseline; gap: 9px; margin: 6px 0 2px; }
.wf-count { font-size: 42px; font-weight: 700; letter-spacing: -1.5px; }
.wf-count-unit { font-size: 13px; font-weight: 500; color: rgba(255,255,255,.65); }
.wf-count-sub { font-size: 12px; line-height: 1.5; color: rgba(255,255,255,.65); margin-bottom: 16px; }
.wf-bars { display: flex; flex-direction: column; gap: 6px; }
.wf-bar-row { display: flex; justify-content: space-between; font-size: 12.5px; color: rgba(255,255,255,.75); }
.wf-bar-n { font-weight: 600; color: #fff; }
.wf-bar { height: 4px; border-radius: 2px; background: rgba(255,255,255,.15); margin-bottom: 4px; }
.wf-bar div { height: 4px; border-radius: 2px; background: #5fa8ff; }
.wf-side-card { padding: 18px 20px; }
.wf-side-title { font-size: 12px; font-weight: 600; color: var(--hs-navy, #17356b); margin-bottom: 12px; }
.wf-excluded { display: flex; flex-direction: column; gap: 10px; }
.wf-ex-row { display: flex; justify-content: space-between; gap: 12px; font-size: 12.5px; color: #6b7689; }
.wf-ex-n { font-weight: 600; color: var(--hs-navy, #17356b); flex: none; }
.wf-link-btn { display: inline-block; margin-top: 14px; border: none; background: transparent; padding: 0; font-size: 12px; font-weight: 600; color: var(--brand-blue, #185FA5); cursor: pointer; text-decoration: none; }
.wf-card-title-row .wf-link-btn { margin-top: 0; }
.wf-warn { border: 1px solid rgba(244,103,74,.35); background: rgba(244,103,74,.07); border-radius: 10px; padding: 14px 16px; display: flex; gap: 10px; font-size: 11.5px; line-height: 1.5; color: #8a3a26; }
.wf-warn-dot { width: 16px; height: 16px; border-radius: 50%; background: #f4674a; color: #fff; font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex: none; margin-top: 1px; }
.wf-review-list { display: flex; flex-direction: column; gap: 8px; }
.wf-review-row { font-size: 13px; color: #1f2937; line-height: 1.45; }
.wf-review-n { font-size: 10.5px; font-weight: 600; letter-spacing: .8px; text-transform: uppercase; color: #8b95ab; margin-right: 6px; }
.wf-activate-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.wf-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.wf-table th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: #8b95ab; padding: 6px 8px; border-bottom: 1px solid #eef1f6; }
.wf-table td { padding: 8px; border-bottom: 1px solid #f1f5f9; color: #1f2937; }
.wf-table a { color: var(--brand-blue, #185FA5); text-decoration: none; }
.wf-preview-modal { max-width: 860px; }
.wf-preview-modal .hs-modal-body { max-height: 70vh; overflow-y: auto; }
.wf-loading { padding: 40px; font-size: 13px; color: #8b95ab; }
/* the canvas page in workflow mode */
.wf-canvas-bar { display: flex; align-items: center; gap: 28px; padding: 12px 20px; background: #fff; border-bottom: 1px solid #e4e7ee; }
.wf-canvas-bar .fu-back-link { margin: 0; }
.wf-enroll-node { border: 1.5px solid var(--brand-blue, #185FA5); border-radius: 11px; box-shadow: 0 8px 20px rgba(24,95,165,.16); min-width: 230px; padding: 0; overflow: hidden; }
.wf-enroll-head { background: rgba(24,95,165,.08); padding: 8px 12px; display: flex; align-items: center; justify-content: space-between; font-size: 10.5px; font-weight: 600; letter-spacing: .8px; color: var(--brand-blue, #185FA5); }
.wf-enroll-head a { font-size: 11px; letter-spacing: 0; color: var(--brand-blue, #185FA5); text-decoration: none; font-weight: 600; }
.wf-enroll-count { font-size: 15px; font-weight: 700; color: var(--hs-navy, #17356b); padding: 12px 12px 0; }
.wf-enroll-sum { font-size: 12px; line-height: 1.5; color: #6b7689; padding: 4px 12px 0; }
.wf-enroll-chips { display: flex; gap: 6px; flex-wrap: wrap; padding: 10px 12px 12px; }
.wf-enroll-chip { height: 22px; padding: 0 8px; border-radius: 5px; background: #eef1f6; display: inline-flex; align-items: center; font-size: 11px; font-weight: 600; color: #4a5568; }
.wf-enroll-chip.on { background: rgba(20,192,138,.14); color: #0e8f66; }

/* ── Workflow test run (Besi 2026-09-15): the Test button on the Enrollment card and its two modals ── */
.wf-enroll-test { margin-left: auto; height: 22px; padding: 0 10px; border-radius: 5px; border: 1px solid var(--brand-blue, #185FA5); background: #fff; color: var(--brand-blue, #185FA5); font: inherit; font-size: 11px; font-weight: 600; cursor: pointer; }
.wf-enroll-test:hover { background: #eef4fb; }
.wf-test-modal { max-width: 560px; }
.wf-test-search { width: 100%; padding: 9px 12px; border: 1px solid #d1d5db; border-radius: 6px; font: inherit; font-size: 14px; box-sizing: border-box; }
.wf-test-results { margin-top: 10px; max-height: 260px; overflow: auto; border: 1px solid #e5e7eb; border-radius: 6px; }
.wf-test-row { display: flex; align-items: flex-start; gap: 10px; padding: 8px 10px; border-bottom: 1px solid #f1f3f6; cursor: pointer; font-size: 13px; line-height: 1.35; }
.wf-test-row:last-child { border-bottom: 0; }
.wf-test-row input { margin-top: 3px; }
.wf-test-empty { padding: 12px; color: #6b7280; font-size: 13px; }
.wf-test-selected { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 13px; }
.wf-test-footer { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 16px; border-top: 1px solid #e5e7eb; }
.wf-test-lead { margin: 0 0 10px; font-size: 14px; color: var(--hs-navy, #2d3e50); }
.wf-test-list { margin: 0; padding-left: 18px; font-size: 14px; }
.wf-test-list li { margin: 4px 0; }
.wf-test-badge { display: inline-block; padding: 1px 6px; border-radius: 4px; background: #fff4e5; color: #b45309; font-size: 11px; font-weight: 600; margin-right: 4px; vertical-align: 1px; }
.wf-test-modal .hs-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px 6px; }
.wf-test-modal .hs-modal-header h3 { margin: 0; font-size: 16px; color: var(--hs-navy, #2d3e50); }
.wf-test-modal .hs-modal-close { border: 0; background: none; font-size: 22px; line-height: 1; color: #6b7280; cursor: pointer; }

/* ── Dialer / SMS Integrations (Besi 2026-09-15): tiles per account and the dialer modal ── */
.dl-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; margin-bottom: 12px; }
.dl-tile { border: 1px solid #e5e7eb; border-radius: 10px; padding: 12px 14px; background: #fff; cursor: pointer; }
.dl-tile:hover { border-color: var(--brand-blue, #185FA5); box-shadow: 0 2px 8px rgba(0,0,0,.06); }
.dl-tile-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.dl-tile-label { font-weight: 600; color: var(--hs-navy, #2d3e50); }
.dl-tile-use { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 10px; background: #eef1f6; color: #4b5563; white-space: nowrap; }
.dl-tile-sub { margin-top: 6px; font-size: 13px; color: #4b5563; word-break: break-all; }
.dl-tile-meta { margin-top: 6px; font-size: 12px; color: #6b7280; }
.dl-empty { color: #6b7280; font-size: 13px; margin-bottom: 12px; }
.dl-modal { max-width: 640px; width: 94%; }
.dl-modal .confirm-modal-body { max-height: 70vh; overflow-y: auto; }
.dl-numbers { display: flex; flex-wrap: wrap; gap: 6px; min-height: 30px; padding: 8px; border: 1px solid #e5e7eb; border-radius: 6px; background: #f9fafb; }
.dl-number { display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px; border-radius: 6px; background: #fff; border: 1px solid #e5e7eb; font-size: 13px; }
.dl-number-name { color: #6b7280; font-size: 12px; }
.dl-numbers-foot { display: flex; justify-content: flex-end; margin-top: 6px; }
.dl-muted { color: #6b7280; font-size: 12px; }
.dl-error { color: #b91c1c; font-size: 13px; min-height: 18px; margin-top: 4px; }
.dl-footer { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 20px; border-top: 1px solid #e5e7eb; }
.dl-footer-right { display: flex; gap: 8px; margin-left: auto; }
.dl-delete { color: #b91c1c; border-color: #fca5a5; }

/* Two-output blocks on the workflow canvas (If/Else, Scan) and the assignee lists in their panels */
.drawflow .drawflow-node .output[data-label] { position: relative; }
.drawflow .drawflow-node .output[data-label]::after { content: attr(data-label); position: absolute; left: 22px; top: 2px; font-size: 10px; font-weight: 600; color: #6b7280; white-space: nowrap; pointer-events: none; }
.flow-assignees { display: flex; flex-direction: column; gap: 4px; max-height: 140px; overflow: auto; }
.flow-assignee { display: flex; gap: 6px; align-items: center; font-weight: 400; font-size: 13px; }

/* ── Automation tab: the one list, folders and menus (Besi 2026-09-16) ── */
.au-wrap { display: flex; gap: 16px; align-items: flex-start; }
.au-rail { width: 200px; flex-shrink: 0; background: #fff; border: 1px solid #e5e7eb; border-radius: 10px; padding: 8px; position: sticky; top: 12px; }
.au-main { flex: 1; min-width: 0; }
.au-folder { display: flex; align-items: center; gap: 6px; padding: 7px 10px; border-radius: 6px; cursor: pointer; font-size: 13px; color: #374151; }
.au-folder:hover { background: #f3f4f6; }
.au-folder.active { background: #e0ebf7; color: #185FA5; font-weight: 600; }
.au-folder-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.au-folder-n { font-size: 12px; color: #6b7280; }
.au-folder .au-dots { display: none; }
.au-folder:hover .au-dots { display: inline-flex; }
.au-folder-add { display: block; width: 100%; margin-top: 6px; padding: 7px 10px; border: none; border-radius: 6px; background: #fff; color: #185FA5; font-size: 13px; font-weight: 600; cursor: pointer; text-align: left; }
.au-folder-add:hover { background: #f3f4f6; }
.au-filters { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 12px; }
.au-chip-group { display: inline-flex; gap: 4px; background: #f3f4f6; border-radius: 8px; padding: 3px; }
.au-chip { border: none; background: transparent; border-radius: 6px; padding: 5px 10px; font-size: 12px; font-weight: 600; color: #4b5563; cursor: pointer; }
.au-chip.active { background: #fff; color: #185FA5; box-shadow: 0 1px 2px rgba(0,0,0,0.08); }
.au-card { position: relative; }
.au-card-name { margin-top: 8px; }
.au-badge { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 700; letter-spacing: 0.2px; }
.au-badge-me { background: #fff1e6; color: #c2410c; }
.au-badge-ae { background: #dbeafe; color: #1d4ed8; }
.au-badge-wf { background: #dcfce7; color: #15803d; }
.au-state { display: inline-flex; align-items: center; gap: 5px; margin: 0; }
.au-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.au-dots { border: none; background: none; color: #9ca3af; font-size: 16px; line-height: 1; cursor: pointer; padding: 0 4px; border-radius: 4px; }
.au-dots:hover { background: #e5e7eb; color: #374151; }
.au-card-folder { color: #185FA5; }
.au-menu { position: fixed; z-index: 10002; min-width: 180px; background: #fff; border: 1px solid #e5e7eb; border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,0.14); padding: 4px; font-size: 13px; color: #1f2937; }
.au-menu-item { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 10px; border-radius: 5px; cursor: pointer; white-space: nowrap; }
.au-menu-item:hover { background: #f3f4f6; }
.au-menu-item.danger { color: #dc2626; }
.au-menu-item.on { font-weight: 700; color: #185FA5; }
.au-menu-caret { color: #9ca3af; }
.au-submenu { display: none; position: absolute; left: 100%; top: -4px; min-width: 160px; max-height: 320px; overflow-y: auto; background: #fff; border: 1px solid #e5e7eb; border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,0.14); padding: 4px; }
.au-menu-parent:hover > .au-submenu { display: block; }
.au-modal-label { display: block; font-size: 13px; font-weight: 600; color: #374151; margin: 10px 0 5px; }
.au-modal-input { width: 100%; padding: 9px 12px; border: 1px solid #d1d5db; border-radius: 6px; font-size: 14px; box-sizing: border-box; background: #fff; }

/* The way in, on step 1 of a workflow */
.wf-entry-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.wf-entry-select { min-width: 320px; }
.wf-hook { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.wf-hook-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.wf-hook-url { flex: 1; min-width: 260px; padding: 7px 10px; border: 1px solid #d1d5db; border-radius: 6px; font-family: monospace; font-size: 12px; background: #f9fafb; }
.wf-hook-body { font-family: monospace; font-size: 12px; background: #f3f4f6; padding: 4px 8px; border-radius: 4px; }

/* The Member ID filter's id list (Besi 2026-09-21). */
.wf-idlist { width: 340px; padding: 7px 10px; border: 1px solid #d1d5db; border-radius: 6px; font-size: 14px; font-family: inherit; color: #333; background: #fff; }
.wf-idlist:focus { outline: none; border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,.12); }

/* ── Edit Subscription tab (Besi 2026-09-24, docs/subscription-editor.md) ──────────────────────
   The design pushed every cluster in a product row to the far edge of a full-width column, so on a
   wide screen "leads / month" and the figure it refers to ended a screen apart. Two changes: the
   counties flow into columns instead of one stretching across the room, and each row keeps its own
   measure rather than spreading to the card's edges. */
/* Flex-wrap rather than a media query, because the query would measure the WINDOW and what
   constrains this is the tab body: at a 1400px window the body is 761px, so a max-width:1100px rule
   never fires and the summary stays pinned beside a column too narrow for it. Wrapping on the
   container's own width puts the summary below as soon as there is no room for both. */
.es-wrap { display: flex; flex-wrap: wrap; gap: 18px; align-items: flex-start;
           width: 1000px; max-width: 100%; }
/* The counties get the room left over; the summary keeps a width it can actually
   hold a change list, a card and two buttons in. It was 260, which squeezed all
   three (Besi, 2026-09-25). */
.es-main { flex: 999 1 380px; min-width: 0; }
.es-note { font-size: 12.5px; color: #64748b; background: #f7f9fc; border: 1px solid #eef2f7;
           border-radius: 8px; padding: 9px 12px; margin-bottom: 12px; line-height: 1.45; }

/* Two counties side by side where there is room for them. */
.es-areas { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 12px; }
/* Two counties have to read as two things. A 1px #eef2f7 hairline against a
   #f7f9fc page ran them together into one long list (Besi, 2026-09-25). */
.es-area { background: #fff; border: 2px solid #d8e2ec; border-radius: 10px;
           box-shadow: 0 1px 6px rgba(45,62,80,.08); overflow: hidden; min-width: 0; }
.es-area-bad { border-color: #e9b7b7; }
.es-area-head { background: #f7f9fc; border-bottom: 1px solid #eef2f7; padding: 10px 13px; }
.es-area-name { font-size: 14px; font-weight: 600; color: #33475b; }
.es-area-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.es-tag { font-size: 11px; color: #64748b; background: #fff; border: 1px solid #e6ecf2;
          border-radius: 6px; padding: 3px 7px; white-space: nowrap; }
.es-tag-out { color: #9b3a3a; background: #fdeaea; border-color: #f3d3d3; }
.es-area-body { padding: 11px 13px; display: flex; flex-direction: column; gap: 10px; }

.es-prod { border: 1px solid #edf1f6; border-radius: 9px; padding: 10px 11px; background: #fcfdfe; }
.es-prod-top { display: flex; align-items: center; gap: 7px; }
.es-dot { width: 6px; height: 6px; border-radius: 50%; flex: none; }
.es-dot-seller { background: #e04b4b; }
.es-dot-buyer { background: #2b7fd4; }
.es-prod-name { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
                color: #41536a; }
/* The price ends the row rather than being flung to the far edge of the card. */
.es-prod-price { margin-left: auto; font-size: 13px; font-weight: 600; color: #1e3a52; }
/* One inline group, so the count sits beside its own words at any width. */
.es-prod-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; margin-top: 7px;
                font-size: 12.5px; color: #41536a; }
.es-prod-cpl { color: #41536a; }
.es-was { color: #8a9aac; font-size: 11.5px; }
.es-count { font-weight: 600; color: #1e3a52; margin-left: 4px; }
.es-per { color: #8a9aac; font-size: 12px; }
.es-bar { margin-top: 8px; height: 3px; background: #e8edf3; border-radius: 4px; overflow: hidden; }
.es-bar span { display: block; height: 3px; background: #2b4f8a; }
.es-bar-foot { display: flex; justify-content: space-between; margin-top: 4px; font-size: 11.5px;
               color: #8a9aac; }
.es-sub { margin-top: 6px; font-size: 12px; color: #64748b; }

.es-zips { display: flex; flex-wrap: wrap; gap: 5px; padding: 0 13px 12px; }
.es-zip { font-size: 11.5px; color: #41536a; background: #f7f9fc; border: 1px solid #eef2f7;
          border-radius: 5px; padding: 2px 6px; }
.es-zip-more { color: #8a9aac; }

.es-side { flex: 1 1 360px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.es-side-card { background: #fff; border: 1px solid #eef2f7; border-radius: 10px; padding: 12px 14px;
                box-shadow: 0 1px 6px rgba(45,62,80,.08); }
.es-side-k { font-size: 11px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase;
             color: #64748b; }
.es-side-v { font-size: 22px; font-weight: 600; color: #1e3a52; margin-top: 4px; }
.es-side-note { font-size: 12px; color: #64748b; margin-top: 5px; line-height: 1.45; }
.es-side-card-line { font-size: 12.5px; color: #41536a; margin-top: 5px; }
.es-muted { color: #8a9aac; }

/* ── Edit Subscription: the controls (phase 2) ────────────────────────────────────────────────── */
.es-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.es-head-t { font-size: 13px; font-weight: 600; color: #33475b; }
.es-head-t span { font-weight: 400; color: #8a9aac; margin-left: 7px; }
.es-add { margin-left: auto; font: 600 12.5px/1 inherit; color: #2b7fd4; background: #eef5fd;
          border: 1px solid #cfe1f7; padding: 6px 10px; border-radius: 8px; cursor: pointer; }
.es-add:hover { background: #e0edfb; }

.es-area-top { display: flex; align-items: center; gap: 8px; }
.es-x { margin-left: auto; width: 20px; height: 20px; flex: none; border: 1px solid #e6ecf2;
        background: #fff; color: #8a9aac; border-radius: 6px; cursor: pointer; font-size: 11px;
        line-height: 1; padding: 0; }
.es-x:hover { background: #f6f9fc; color: #41536a; }
.es-tag-btn { cursor: pointer; font-family: inherit; }
.es-tag-btn:hover { background: #f1f5fa; color: #41536a; }

/* The stepper sits where the plain number used to, so the row keeps its measure. */
.es-step { display: inline-flex; align-items: center; border: 1px solid #e2e8f0; border-radius: 8px;
           overflow: hidden; margin-left: 4px; }
.es-step button { width: 24px; height: 22px; border: 0; background: #f7fafc; color: #1e3a52;
                  font-size: 14px; line-height: 1; cursor: pointer; }
.es-step button:hover { background: #eaf0f6; }
.es-step b { min-width: 30px; text-align: center; font-size: 13px; color: #1e3a52; }

.es-block { background: #fff; border: 1px solid #eef2f7; border-radius: 10px; padding: 12px 14px;
            margin-top: 12px; box-shadow: 0 1px 6px rgba(45,62,80,.08); }
.es-block-k { font-size: 11px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase;
              color: #64748b; margin-bottom: 8px; }
.es-disc { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: #41536a;
           padding: 5px 0; }
.es-disc span { min-width: 0; }
.es-disc-new { color: #1a7f4b; }
.es-struck span { text-decoration: line-through; color: #9aa8b8; }
.es-ghost-sm { margin-left: auto; flex: none; font: 600 11.5px/1 inherit; color: #5a6b7e;
               background: #fff; border: 1px solid #e2e8f0; border-radius: 6px; padding: 4px 8px;
               cursor: pointer; }
.es-ghost-sm:hover { background: #f6f9fc; }
.es-disc-form { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px;
                padding-top: 10px; border-top: 1px solid #f1f5f9; font-size: 12.5px; }
.es-disc-form select, .es-disc-form input { border: 1px solid #e2e8f0; border-radius: 7px;
                padding: 5px 8px; font: inherit; font-size: 12.5px; color: #1e3a52; }
.es-disc-form input[type=number] { width: 56px; }
.es-disc-form input[type=text] { flex: 1 1 140px; min-width: 0; }

/* The change list. */
.es-side-n { font-weight: 400; color: #8a9aac; margin-left: 6px; }
.es-change { border-top: 1px solid #f1f5f9; padding: 8px 0 6px; }
.es-change:first-of-type { border-top: 0; }
.es-change-top { display: flex; align-items: baseline; gap: 8px; }
.es-change-label { font-size: 12.5px; font-weight: 600; color: #1e3a52; min-width: 0; }
.es-change-amt { margin-left: auto; font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.es-change-detail { font-size: 11.5px; color: #64748b; margin-top: 3px; line-height: 1.4; }
.es-up { color: #1a7f4b; }
.es-down { color: #b04a4a; }
.es-when { display: flex; gap: 4px; margin-top: 6px; align-items: center; }
.es-when span { font-size: 11.5px; color: #8a9aac; margin-right: 2px; }
.es-when button { font: 600 11px/1 inherit; color: #5a6b7e; background: #fff; border: 1px solid #e2e8f0;
                  border-radius: 6px; padding: 4px 8px; cursor: pointer; }
.es-when button.on { background: #16334c; border-color: #16334c; color: #fff; }
.es-when-all { padding-bottom: 8px; border-bottom: 1px solid #f1f5f9; margin-bottom: 4px; }
.es-charge { margin-top: 10px; padding-top: 9px; border-top: 1px solid #f1f5f9; font-size: 12.5px;
             color: #41536a; line-height: 1.45; }
.es-warn { margin-top: 9px; font-size: 12px; color: #8a5a1a; background: #fdf5e6; border: 1px solid #f0e0c0;
           border-radius: 7px; padding: 7px 9px; line-height: 1.4; }
.es-note-box { width: 100%; box-sizing: border-box; margin-top: 10px; border: 1px solid #e2e8f0;
               border-radius: 8px; padding: 8px 10px; font: inherit; font-size: 12.5px; color: #1e3a52;
               resize: vertical; }
.es-actions { display: flex; gap: 8px; margin-top: 9px; }
.es-primary { font: 600 12.5px/1 inherit; color: #fff; background: #2b7fd4; border: 0; border-radius: 8px;
              padding: 9px 14px; cursor: pointer; }
.es-primary:hover { background: #2470bd; }
.es-primary[disabled] { background: #9fc2e8; cursor: default; }
.es-ghost { font: 600 12.5px/1 inherit; color: #5a6b7e; background: #fff; border: 1px solid #e2e8f0;
            border-radius: 8px; padding: 9px 14px; cursor: pointer; }
.es-ghost:hover { background: #f6f9fc; }
.es-fine { font-size: 11.5px; margin-top: 7px; line-height: 1.4; }

/* Already proposed. */
.es-hist { border-top: 1px solid #f1f5f9; padding: 8px 0; }
.es-hist:first-of-type { border-top: 0; }
.es-hist-top { display: flex; align-items: baseline; gap: 8px; }
.es-hist-when { font-size: 11.5px; color: #8a9aac; }
.es-hist-status { margin-left: auto; font: 600 10.5px/1 inherit; text-transform: uppercase;
                  letter-spacing: .05em; padding: 3px 6px; border-radius: 5px; }
.es-status-draft { color: #5a6b7e; background: #f1f5f9; }
.es-status-pending { color: #8a5a1a; background: #fdf5e6; }
.es-status-applied { color: #1a7f4b; background: #e3f5ea; }
.es-status-denied { color: #9b3a3a; background: #fdeaea; }
.es-hist-sum { font-size: 12.5px; color: #41536a; margin-top: 3px; }
.es-hist-note { font-size: 11.5px; color: #64748b; margin-top: 3px; line-height: 1.4; }

/* Modals: the ZIP picker and the county search. */
.es-modal { position: fixed; inset: 0; z-index: 9000; display: flex; align-items: center;
            justify-content: center; }
.es-modal-back { position: absolute; inset: 0; background: rgba(20,35,61,.35); }
.es-modal-card { position: relative; background: #fff; border-radius: 12px; width: 520px;
                 max-width: calc(100vw - 32px); max-height: calc(100vh - 80px); display: flex;
                 flex-direction: column; box-shadow: 0 18px 50px rgba(20,35,61,.28); }
.es-modal-head { display: flex; align-items: center; gap: 10px; padding: 14px 16px;
                 border-bottom: 1px solid #eef2f7; }
.es-modal-head h3 { margin: 0; font-size: 15px; font-weight: 600; color: #33475b; }
.es-modal-count { font-size: 12px; color: #8a9aac; }
.es-modal-tools { display: flex; gap: 8px; padding: 10px 16px; border-bottom: 1px solid #f1f5f9; }
.es-modal-tools button { font: 600 12px/1 inherit; color: #5a6b7e; background: #fff;
                         border: 1px solid #e2e8f0; border-radius: 7px; padding: 6px 10px; cursor: pointer; }
.es-modal-tools input { flex: 1; border: 1px solid #e2e8f0; border-radius: 7px; padding: 7px 10px;
                        font: inherit; font-size: 13px; }
.es-modal-body { overflow: auto; padding: 8px 16px; }
.es-modal-foot { padding: 12px 16px; border-top: 1px solid #eef2f7; display: flex; justify-content: flex-end; }
.es-zipline { display: flex; align-items: center; gap: 9px; padding: 6px 0; font-size: 13px;
              color: #41536a; cursor: pointer; }
.es-zipline b { min-width: 58px; color: #1e3a52; }
.es-zipline span { color: #8a9aac; font-size: 12.5px; }
.es-countyline { display: flex; align-items: baseline; gap: 10px; width: 100%; text-align: left;
                 padding: 9px 0; border: 0; border-bottom: 1px solid #f1f5f9; background: none;
                 font: inherit; cursor: pointer; }
.es-countyline:hover:not([disabled]) { background: #f7fbff; }
.es-countyline[disabled] { cursor: default; opacity: .5; }
.es-countyline b { font-size: 13px; color: #1e3a52; }
.es-countyline span { margin-left: auto; font-size: 12px; color: #8a9aac; white-space: nowrap; }

.es-hist-act { display: flex; align-items: center; gap: 9px; margin-top: 8px; flex-wrap: wrap; }
.es-hist-act .es-fine { margin-top: 0; }
.es-scheduled { margin-top: 9px; padding-top: 8px; border-top: 1px solid #f1f5f9; font-size: 12px;
                color: #2b7fd4; line-height: 1.45; }

/* ── Approvals queue (phase 4) ────────────────────────────────────────────────────────────────── */
.bq-count { font-size: 13px; font-weight: 600; color: #fff; background: #b04a4a; border-radius: 999px;
            padding: 2px 9px; margin-left: 8px; vertical-align: middle; }
.bq-card { background: #fff; border: 1px solid #eef2f7; border-radius: 10px; padding: 16px 18px;
           margin-bottom: 12px; box-shadow: 0 1px 6px rgba(45,62,80,.08); }
.bq-lit { box-shadow: 0 0 0 2px #2b7fd4, 0 1px 6px rgba(45,62,80,.08); }
.bq-top { display: flex; align-items: flex-start; gap: 16px; }
.bq-what { font-size: 16px; font-weight: 600; color: #1e3a52; }
.bq-who { font-size: 12.5px; color: #64748b; margin-top: 4px; }
.bq-who a { color: #2b7fd4; text-decoration: none; }
.bq-who a:hover { text-decoration: underline; }
.bq-money { margin-left: auto; font-size: 15px; font-weight: 600; white-space: nowrap; }
.bq-up { color: #1a7f4b; }
.bq-down { color: #b04a4a; }
.bq-note { margin-top: 10px; font-size: 13px; color: #41536a; background: #f7f9fc;
           border: 1px solid #eef2f7; border-radius: 8px; padding: 9px 11px; line-height: 1.45; }
.bq-items { margin-top: 10px; }
.bq-item { display: flex; align-items: baseline; gap: 10px; padding: 5px 0; font-size: 12.5px;
           color: #41536a; border-top: 1px solid #f7f9fc; }
.bq-item-detail { color: #8a9aac; font-size: 12px; min-width: 0; }
.bq-item-amt { margin-left: auto; font-weight: 600; white-space: nowrap; }
.bq-item-when { color: #8a9aac; font-size: 11.5px; white-space: nowrap; }
.bq-warn { margin-top: 10px; font-size: 12.5px; color: #8a5a1a; background: #fdf5e6;
           border: 1px solid #f0e0c0; border-radius: 8px; padding: 8px 10px; }
.bq-act { display: flex; gap: 8px; margin-top: 13px; align-items: center; }
.bq-act input { flex: 1; min-width: 0; border: 1px solid #e2e8f0; border-radius: 8px;
                padding: 8px 11px; font: inherit; font-size: 13px; }
.bq-yes, .bq-no { font: 600 13px/1 inherit; border: 0; border-radius: 8px; padding: 10px 16px;
                  cursor: pointer; white-space: nowrap; }
.bq-yes { background: #1a7f4b; color: #fff; }
.bq-yes:hover { background: #16693e; }
.bq-no { background: #fff; color: #9b3a3a; border: 1px solid #f0d0d0; }
.bq-no:hover { background: #fdeaea; }
.bq-past { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; padding: 9px 2px;
           border-bottom: 1px solid #f1f5f9; font-size: 12.5px; color: #41536a; }
.bq-past-who { font-weight: 600; color: #1e3a52; }
.bq-tag { font: 600 10.5px/1 inherit; text-transform: uppercase; letter-spacing: .05em;
          padding: 3px 6px; border-radius: 5px; }
.bq-applied { color: #1a7f4b; background: #e3f5ea; }
.bq-denied { color: #9b3a3a; background: #fdeaea; }
.bq-past-meta { color: #8a9aac; font-size: 11.5px; }
.bq-past-note { width: 100%; color: #64748b; font-size: 12px; }

.es-acts { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }

.es-step button.es-maxed { opacity: .4; cursor: not-allowed; }

/* Add-ons, free days and the per-change undo (2026-09-25). */
.es-addon { padding: 10px 0; border-top: 1px solid #f7f9fc; }
.es-addon:first-of-type { border-top: 0; padding-top: 2px; }
.es-addon-k { font-size: 12.5px; font-weight: 600; color: #41536a; margin-bottom: 7px; }
.es-addon-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.es-addon-note { font-size: 12px; color: #8a9aac; line-height: 1.45; margin-top: 6px; }
.es-addon-row .es-addon-note { margin-top: 0; }
.es-pills { display: flex; gap: 6px; flex-wrap: wrap; }
.es-pill { font: 500 12.5px/1.3 inherit; color: #41536a; background: #fff; border: 1px solid #e2e8f0;
           border-radius: 9px; padding: 7px 11px; cursor: pointer; text-align: left; }
.es-pill span { display: block; font-size: 11px; color: #8a9aac; margin-top: 3px; }
.es-pill:hover { background: #f7fafc; }
.es-pill.on { background: #16334c; border-color: #16334c; color: #fff; }
.es-pill.on span { color: #b6c6d6; }
.es-undo { margin-left: auto; font: 500 11px/1 inherit; color: #8a9aac; background: none;
           border: 0; padding: 4px 2px; cursor: pointer; text-decoration: underline; }
.es-undo:hover { color: #41536a; }

/* The save step (2026-09-25). A modal rather than a note box, because it is the
   last moment before somebody else has to act on this. */
.es-save-card { width: 560px; }
.es-save-sum { background: #f7f9fc; border: 1px solid #eef2f7; border-radius: 10px;
               padding: 11px 13px; margin-bottom: 16px; }
.es-save-line { display: flex; align-items: baseline; gap: 10px; font-size: 12.5px;
                color: #41536a; padding: 3px 0; }
.es-save-line > span:first-child { flex: 1; min-width: 0; }
.es-save-line > span:nth-child(2) { font-weight: 600; white-space: nowrap; }
.es-save-when { color: #8a9aac; font-size: 11.5px; white-space: nowrap; width: 62px; text-align: right; }
.es-save-total { margin-top: 8px; padding-top: 8px; border-top: 1px solid #eef2f7;
                 font-size: 12.5px; color: #1e3a52; }
.es-field { display: block; font-size: 12.5px; font-weight: 600; color: #41536a; margin-bottom: 14px; }
.es-field textarea, .es-field input, .es-field select { display: block; width: 100%;
    box-sizing: border-box; margin-top: 6px; border: 1px solid #e2e8f0; border-radius: 9px;
    padding: 9px 11px; font: inherit; font-size: 13px; font-weight: 400; color: #1e3a52; resize: vertical; }
.es-prio { margin-top: 6px; }
.es-prio .es-pill { flex: 1 1 120px; }
.es-check { display: flex; align-items: center; gap: 9px; font-size: 13px; color: #41536a;
            margin-bottom: 12px; cursor: pointer; }
.es-save-task { border-left: 2px solid #eef2f7; padding-left: 13px; margin-bottom: 4px; }
.es-modal-foot { gap: 8px; }

/* The ISA queue: approved changes waiting to be typed into ISA by hand.
   Reuses the approvals queue's card, plus the instruction lines, the priority
   chips and the mismatch detail (2026-09-25). */
.iq-tags { margin-left: auto; display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.iq-prio { font: 600 10.5px/1 inherit; text-transform: uppercase; letter-spacing: .05em;
           border-radius: 999px; padding: 4px 9px; }
.iq-low { color: #5c6b7a; background: #eef2f7; }
.iq-medium { color: #1a5f8a; background: #e4f0fa; }
.iq-high { color: #8a5a1a; background: #fdf0dc; }
.iq-urgent { color: #9b3a3a; background: #fdeaea; }
.iq-when { font-size: 12px; color: #8a9aac; }
.iq-lines { margin-top: 12px; background: #f7f9fc; border: 1px solid #eef2f7; border-radius: 9px;
            padding: 11px 13px; }
.iq-line { font-size: 13.5px; line-height: 1.55; color: #1e3a52; }
.iq-line + .iq-line { margin-top: 7px; }
.iq-total { margin-top: 9px; font-size: 12.5px; color: #64748b; }
.iq-pending { margin-top: 11px; font-size: 12.5px; color: #64748b; background: #f7f9fc;
              border-radius: 8px; padding: 9px 12px; }
.iq-bad { border-color: #f0d0d0; }
.iq-off { margin-top: 5px; font-weight: 400; }
.bq-ghost-copy { font: 600 13px/1 inherit; border: 1px solid #e2e8f0; border-radius: 8px;
                 padding: 10px 14px; background: #fff; color: #41536a; cursor: pointer; }
.bq-ghost-copy:hover { background: #f7fafc; }

/* Editing a member whose package lives in ISA (2026-09-25). */
.es-isa-head { background: #fdf8ee; border: 1px solid #f0e4cc; border-radius: 10px;
               padding: 12px 15px; font-size: 12.5px; line-height: 1.6; color: #6b5526;
               margin-bottom: 16px; }
.es-isa-head b { color: #5a4416; }
.es-isa-open .es-block-k { color: #8a5a1a; }
.es-isa-task { border-top: 1px solid #f7f9fc; padding: 11px 0 2px; }
.es-isa-task:first-of-type { border-top: 0; }
.es-isa-row { display: flex; align-items: center; gap: 9px; margin-bottom: 7px; }
.es-isa-state { font-size: 12px; color: #64748b; }
.es-isa-when { margin-left: auto; font-size: 11.5px; color: #8a9aac; }
.es-isa-line { font-size: 12.5px; line-height: 1.55; color: #1e3a52; padding: 2px 0; }

/* Prospecting lists on a legacy package: read-only, one line per county. */
.es-prosp { margin-top: 9px; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
            gap: 2px 18px; }
.es-prosp-row { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px;
                color: #41536a; padding: 3px 0; }

/* The editor's own ask/confirm modal, replacing confirm() and prompt(). */
.es-ask-body { margin: 0 0 14px; font-size: 13.5px; line-height: 1.55; color: #41536a; }
.es-ask-err { margin-top: 2px; font-size: 12.5px; color: #9b3a3a; background: #fdeaea;
              border-radius: 8px; padding: 8px 11px; }

/* The discount step, following the mockup's flow (2026-09-25). */
.es-block-head { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }
.es-block-head .es-block-k { margin-bottom: 0; }
.es-block-head .es-add { margin-left: auto; }
.es-disc-card { width: 500px; }
.es-disc-presets { display: grid; grid-template-columns: repeat(auto-fit, minmax(185px, 1fr));
                   gap: 8px; margin-top: 7px; }
.es-disc-preset { text-align: left; padding: 10px 11px; border: 1px solid #e2e8f0; background: #fff;
                  border-radius: 11px; cursor: pointer; font: inherit; }
.es-disc-preset:hover { border-color: #b9cfe8; }
.es-disc-preset.on { border-color: #16334c; background: #f4f8fc; }
.es-disc-preset b { display: block; font: 600 12.5px/1.25 inherit; color: #1e3a52; }
.es-disc-preset span { display: block; font-size: 11.5px; color: #8a9aac; margin-top: 4px; }
.es-disc-preset.over span { color: #8a5a1f; }
.es-disc-two { display: flex; gap: 12px; }
.es-disc-two .es-field { flex: 1; }
.es-disc-preview { padding: 10px 11px; border-radius: 9px; background: #f6f9fc; border: 1px solid #e4eaf1;
                   font-size: 12.5px; color: #41536a; line-height: 1.5; margin-bottom: 14px; }
.es-disc-over { padding: 13px; border: 1px solid #efe0c2; background: #fdfaf2; border-radius: 10px;
                margin-bottom: 4px; }
.es-disc-over-k { font: 600 12.5px/1 inherit; color: #8a5a1f; margin-bottom: 12px; }
.es-disc-over .es-field:last-child { margin-bottom: 0; }