/* ═══════════════════════════════════════════════════════════════════
   Expo Design System — GeoDedo Theme Override
   Loaded AFTER inline styles via <link>, cascade handles specificity.
   ONLY visual properties. NO layout changes. NO !important.
   ═══════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600&display=swap');

/* ── Design Tokens ───────────────────────────────────────────────── */
:root {
  --expo-bg: #f0f0f3;
  --expo-surface: #ffffff;
  --expo-text: #000000;
  --expo-text-near: #1c2024;
  --expo-text-secondary: #60646c;
  --expo-text-tertiary: #b0b4ba;
  --expo-border: #e0e1e6;
  --expo-border-input: #d9d9e0;
  --expo-link: #0d74ce;
  --expo-success: #22c55e;
  --expo-error: #ef4444;
  --expo-warning: #ab6400;
  --expo-font: 'Inter', -apple-system, system-ui, sans-serif;
  --expo-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --expo-shadow-whisper: rgba(0,0,0,0.08) 0px 3px 6px, rgba(0,0,0,0.07) 0px 2px 4px;
  --expo-shadow-standard: rgba(0,0,0,0.1) 0px 10px 20px, rgba(0,0,0,0.05) 0px 3px 6px;
  --expo-radius-sm: 6px;
  --expo-radius-md: 8px;
  --expo-radius-lg: 16px;
  --expo-radius-pill: 9999px;
  --expo-transition: 0.15s ease;
}


/* ═══════════════════════════════════════════════════════════════════
   1. GLOBAL — Body & HTML
   ═══════════════════════════════════════════════════════════════════ */
html, body {
  font-family: var(--expo-font);
}


/* ═══════════════════════════════════════════════════════════════════
   2. SIDEBAR (dark, shared across all pages)
   ═══════════════════════════════════════════════════════════════════ */
.sidebar {
  background: #1a1a1a;
  color: #e0e0e0;
  border-color: #2e2e2e;
}

.sidebar-brand {
  color: #fff;
  font-family: var(--expo-font);
}

.new-chat-btn {
  background: #2a2a2a;
  border-color: #3a3a3a;
  color: #e0e0e0;
  font-family: var(--expo-font);
  transition: all var(--expo-transition);
}
.new-chat-btn:hover {
  background: #333333;
}

.sidebar-settings-btn {
  color: #999;
  transition: all var(--expo-transition);
}
.sidebar-settings-btn:hover {
  background: #2a2a2a;
  color: #e0e0e0;
}

.conv-item {
  color: #999;
  transition: all var(--expo-transition);
}
.conv-item:hover {
  background: #2a2a2a;
}
.conv-item.active {
  background: #2a2a2a;
  color: #fff;
}

.user-avatar {
  background: #333;
}

.sidebar::-webkit-scrollbar-thumb,
.sidebar *::-webkit-scrollbar-thumb {
  background: #444;
}


/* ═══════════════════════════════════════════════════════════════════
   3. MAIN CONTENT AREA
   ═══════════════════════════════════════════════════════════════════ */
.main-area {
  background: var(--expo-bg);
}
.main-content {
  background: var(--expo-bg);
}


/* ═══════════════════════════════════════════════════════════════════
   4. TOPBAR
   ═══════════════════════════════════════════════════════════════════ */
.topbar {
  background: var(--expo-bg);
  border-color: var(--expo-border);
}
.topbar-title,
.topbar h1,
.topbar .title {
  color: var(--expo-text);
  font-weight: 600;
  letter-spacing: -0.25px;
  font-family: var(--expo-font);
}


/* ═══════════════════════════════════════════════════════════════════
   5. CHAT MESSAGES
   ═══════════════════════════════════════════════════════════════════ */
.msg-row.bot .msg-bubble,
.msg-row.assistant .msg-bubble {
  color: var(--expo-text-near);
  font-family: var(--expo-font);
}

.msg-row.user .msg-bubble {
  background: var(--expo-text);
  color: #fff;
}

.msg-avatar {
  background: var(--expo-bg);
  border-color: var(--expo-border);
}

.typing-dot {
  background: var(--expo-border);
}


/* ═══════════════════════════════════════════════════════════════════
   6. INPUT AREA
   ═══════════════════════════════════════════════════════════════════ */
.input-row {
  background: var(--expo-surface);
  border-color: var(--expo-border-input);
  border-radius: 12px;
  transition: all var(--expo-transition);
}
.input-row:focus-within {
  border-color: #999;
  box-shadow: 0 0 0 3px rgba(0,0,0,0.04);
}

.chat-input {
  font-family: var(--expo-font);
  color: var(--expo-text);
}

.send-btn {
  background: var(--expo-text);
  border-radius: var(--expo-radius-pill);
  transition: all var(--expo-transition);
}
.send-btn:hover {
  background: #333;
}

.attach-btn {
  border-color: var(--expo-border-input);
  transition: all var(--expo-transition);
}

.chat-mic-btn {
  border-color: var(--expo-border-input);
  transition: all var(--expo-transition);
}


/* ═══════════════════════════════════════════════════════════════════
   7. BUTTONS — GLOBAL STYLES
   ═══════════════════════════════════════════════════════════════════ */
button {
  font-family: var(--expo-font);
  transition: all var(--expo-transition);
}

/* Primary buttons */
.btn-primary,
.primary-btn {
  background: var(--expo-text);
  color: #fff;
  border-radius: var(--expo-radius-pill);
}

/* Secondary buttons */
.btn-secondary,
.secondary-btn {
  background: var(--expo-surface);
  color: var(--expo-text-near);
  border: 1px solid var(--expo-border-input);
  border-radius: var(--expo-radius-sm);
}

/* Ghost buttons */
.btn-ghost,
.ghost-btn {
  background: transparent;
  color: var(--expo-text-secondary);
}


/* ═══════════════════════════════════════════════════════════════════
   8. SETTINGS PANEL (slide-out)
   ═══════════════════════════════════════════════════════════════════ */
.settings-panel {
  background: var(--expo-surface);
  border-color: var(--expo-border);
}

.settings-header h2 {
  color: var(--expo-text);
  font-weight: 600;
  font-family: var(--expo-font);
}

.settings-close-btn {
  background: var(--expo-bg);
  color: var(--expo-text-secondary);
  transition: all var(--expo-transition);
}

.integration-card {
  background: var(--expo-bg);
  border-color: var(--expo-border);
  border-radius: var(--expo-radius-md);
  transition: all var(--expo-transition);
}

.integration-icon {
  background: var(--expo-surface);
}

.profile-billing-block {
  background: var(--expo-bg);
  border-color: var(--expo-border);
}

.profile-upgrade-btn {
  border-radius: var(--expo-radius-pill);
}


/* ═══════════════════════════════════════════════════════════════════
   9. DRAFT PREVIEW CARDS (in chat)
   ═══════════════════════════════════════════════════════════════════ */
.draft-preview {
  background: var(--expo-surface);
  border-color: var(--expo-border);
  border-radius: 12px;
  box-shadow: var(--expo-shadow-whisper);
}

.draft-preview-header {
  background: var(--expo-bg);
}

.draft-field-label {
  color: var(--expo-text-tertiary);
  font-family: var(--expo-font);
}

.draft-field-value {
  color: var(--expo-text-near);
}


/* ═══════════════════════════════════════════════════════════════════
   10. SCHEDULE CARDS
   ═══════════════════════════════════════════════════════════════════ */
.sc-field {
  border-color: var(--expo-border-input);
}

.sc-day-btn {
  border-radius: var(--expo-radius-pill);
  transition: all var(--expo-transition);
}
.sc-day-btn.active {
  background: var(--expo-text);
  color: #fff;
}

.sc-btn {
  border-radius: var(--expo-radius-pill);
  background: var(--expo-text);
  transition: all var(--expo-transition);
}


/* ═══════════════════════════════════════════════════════════════════
   11. CHANNEL PICKER
   ═══════════════════════════════════════════════════════════════════ */
.channel-picker-btn {
  border-radius: var(--expo-radius-pill);
  border-color: var(--expo-border-input);
  transition: all var(--expo-transition);
}
.channel-picker-btn.active {
  background: var(--expo-text);
  color: #fff;
}


/* ═══════════════════════════════════════════════════════════════════
   12. CONNECTION WIDGETS
   ═══════════════════════════════════════════════════════════════════ */
.cmo-channel-card {
  background: var(--expo-surface);
  border-color: var(--expo-border);
  border-radius: 12px;
  transition: all var(--expo-transition);
}

.cmo-connect-btn {
  border-radius: var(--expo-radius-pill);
  border-color: var(--expo-border-input);
  transition: all var(--expo-transition);
}


/* ═══════════════════════════════════════════════════════════════════
   13. TABLES IN CHAT
   ═══════════════════════════════════════════════════════════════════ */
.table-wrap {
  border-radius: var(--expo-radius-md);
  border: 1px solid var(--expo-border);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Ensure ANY table inside a message bubble scrolls horizontally */
.msg-bubble > div[style*="overflow"],
.msg-bubble .table-wrap,
.msg-content > div[style*="overflow"],
.msg-content .table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}

.msg-bubble table,
.msg-content table {
  white-space: nowrap;
}

.table-wrap th,
.msg-bubble th {
  background: var(--expo-bg);
  color: var(--expo-text-secondary);
  font-weight: 600;
  font-family: var(--expo-font);
}

.table-wrap td,
.msg-bubble td {
  border-color: var(--expo-border);
  color: var(--expo-text-near);
}

.table-wrap tr:nth-child(even) td,
.msg-bubble tr:nth-child(even) td {
  background: #f8f8fa;
}


/* ═══════════════════════════════════════════════════════════════════
   14. QUICK-REPLY BUTTONS
   ═══════════════════════════════════════════════════════════════════ */
.quick-reply-btn,
.quick-replies button {
  border-radius: var(--expo-radius-pill);
  font-family: var(--expo-font);
  transition: all var(--expo-transition);
}


/* ═══════════════════════════════════════════════════════════════════
   15. SCROLLBARS
   ═══════════════════════════════════════════════════════════════════ */
::-webkit-scrollbar-track {
  background: var(--expo-bg);
}
::-webkit-scrollbar-thumb {
  background: #ccc;
}
::-webkit-scrollbar-thumb:hover {
  background: #aaa;
}


/* ═══════════════════════════════════════════════════════════════════
   16. MODAL / DIALOG
   ═══════════════════════════════════════════════════════════════════ */
.modal-content,
.dialog,
.modal-box {
  background: var(--expo-surface);
  border-radius: 12px;
  border-color: var(--expo-border);
}

.credits-modal-content {
  background: var(--expo-surface);
  border-radius: 12px;
  border-color: var(--expo-border);
}


/* ═══════════════════════════════════════════════════════════════════
   PAGE-SPECIFIC OVERRIDES
   ═══════════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════════
   17. LOGIN (login.html) — Dark page, light touches
   ═══════════════════════════════════════════════════════════════════ */
.auth-container {
  font-family: var(--expo-font);
}

.auth-form input {
  font-family: var(--expo-font);
  transition: border-color var(--expo-transition);
}
.auth-form input:focus {
  border-color: #444;
}

.auth-form button[type="submit"],
.auth-submit-btn {
  border-radius: var(--expo-radius-pill);
  font-family: var(--expo-font);
  transition: all var(--expo-transition);
}

.auth-tabs {
  border-color: #333;
}
.auth-tabs button {
  font-family: var(--expo-font);
  transition: all var(--expo-transition);
}

.auth-left {
  font-family: var(--expo-font);
}

.auth-right {
  font-family: var(--expo-font);
}


/* ═══════════════════════════════════════════════════════════════════
   18. ONBOARDING (onboarding.html) — Light page
   ═══════════════════════════════════════════════════════════════════ */
.onboarding-container,
.onboarding-page {
  background: var(--expo-bg);
  font-family: var(--expo-font);
}

.continue-btn {
  border-radius: var(--expo-radius-pill);
  transition: all var(--expo-transition);
}

.answer-textarea {
  font-family: var(--expo-font);
  transition: border-color var(--expo-transition);
}

.url-go-btn {
  border-radius: 50%;
  transition: all var(--expo-transition);
}

.onboarding-step {
  font-family: var(--expo-font);
}

.onboarding-title,
.onboarding-subtitle {
  font-family: var(--expo-font);
}


/* ═══════════════════════════════════════════════════════════════════
   19. DASHBOARD (dashboard.html)
   ═══════════════════════════════════════════════════════════════════ */
.summary-card {
  background: var(--expo-surface);
  border-color: var(--expo-border);
  border-radius: 12px;
  box-shadow: var(--expo-shadow-whisper);
  transition: all var(--expo-transition);
}

.summary-value {
  font-weight: 700;
  letter-spacing: -0.5px;
  color: var(--expo-text);
}

.channel-card {
  background: var(--expo-surface);
  border-color: var(--expo-border);
  border-radius: 12px;
  box-shadow: var(--expo-shadow-whisper);
  transition: all var(--expo-transition);
}

.section-title {
  font-weight: 600;
  letter-spacing: -0.25px;
  color: var(--expo-text);
  font-family: var(--expo-font);
}

.refresh-btn {
  border-radius: var(--expo-radius-pill);
  transition: all var(--expo-transition);
}


/* ═══════════════════════════════════════════════════════════════════
   20. CONTACTS (contacts.html)
   ═══════════════════════════════════════════════════════════════════ */
.crm-table-wrap {
  background: var(--expo-surface);
  border-radius: var(--expo-radius-md);
  box-shadow: var(--expo-shadow-whisper);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.crm-table th {
  background: var(--expo-bg);
  font-weight: 600;
  color: var(--expo-text-secondary);
  font-family: var(--expo-font);
}

.crm-table td {
  border-color: var(--expo-border);
  color: var(--expo-text-near);
}

.pagination .active,
.pagination-btn.active {
  border-radius: var(--expo-radius-pill);
}

.btn-save {
  border-radius: var(--expo-radius-pill);
  transition: all var(--expo-transition);
}


/* ═══════════════════════════════════════════════════════════════════
   21. SETTINGS (settings.html)
   ═══════════════════════════════════════════════════════════════════ */
.nav-item {
  font-family: var(--expo-font);
  transition: all var(--expo-transition);
}
.nav-item.active {
  border-radius: var(--expo-radius-pill);
  background: var(--expo-text);
  color: #fff;
}

.settings-section,
.section {
  background: var(--expo-surface);
  border-radius: var(--expo-radius-md);
}

.settings-page {
  background: var(--expo-bg);
  font-family: var(--expo-font);
}

.settings-page h1,
.settings-page h2,
.settings-page h3 {
  color: var(--expo-text);
  font-family: var(--expo-font);
}


/* ═══════════════════════════════════════════════════════════════════
   22. GTM COPILOT / AI CMO (aicmo.html)
   ═══════════════════════════════════════════════════════════════════ */
.cmo-draft-card {
  border-color: var(--expo-border);
  border-radius: 12px;
  box-shadow: var(--expo-shadow-whisper);
  background: var(--expo-surface);
}

.started-card {
  border-color: var(--expo-success);
  border-radius: 12px;
}

.url-submit-btn {
  border-radius: var(--expo-radius-pill);
  transition: all var(--expo-transition);
}

.cmo-page {
  font-family: var(--expo-font);
}

.cmo-page h1,
.cmo-page h2,
.cmo-page h3 {
  font-family: var(--expo-font);
  color: var(--expo-text);
}

.cmo-section-title {
  font-weight: 600;
  letter-spacing: -0.25px;
  font-family: var(--expo-font);
}


/* ═══════════════════════════════════════════════════════════════════
   23. PAYWALL (paywall.html) — Dark page
   ═══════════════════════════════════════════════════════════════════ */
.plan-btn {
  border-radius: var(--expo-radius-pill);
  font-family: var(--expo-font);
  transition: all var(--expo-transition);
}

.credit-pack {
  border-radius: var(--expo-radius-md);
  transition: all var(--expo-transition);
}

.paywall-page,
.content {
  font-family: var(--expo-font);
}

.paywall-page h1,
.paywall-page h2,
.content h1,
.content h2 {
  font-family: var(--expo-font);
}


/* ═══════════════════════════════════════════════════════════════════
   ADDITIONAL POLISH — Links, code, misc
   ═══════════════════════════════════════════════════════════════════ */
a {
  color: var(--expo-link);
  transition: color var(--expo-transition);
}

code, pre {
  font-family: var(--expo-mono);
}

input, textarea, select {
  font-family: var(--expo-font);
  transition: border-color var(--expo-transition);
}

/* Sequence page specifics */
.seq-card {
  background: var(--expo-surface);
  border-color: var(--expo-border);
  border-radius: 12px;
  box-shadow: var(--expo-shadow-whisper);
  transition: all var(--expo-transition);
}

.seq-card:hover {
  box-shadow: var(--expo-shadow-standard);
}

.seq-status {
  border-radius: var(--expo-radius-pill);
  font-family: var(--expo-font);
}

.seq-btn {
  border-radius: var(--expo-radius-pill);
  transition: all var(--expo-transition);
}

/* Tooltips & popovers */
.tooltip,
.popover {
  background: var(--expo-text);
  color: #fff;
  border-radius: var(--expo-radius-sm);
  font-family: var(--expo-font);
}

/* Badge/chip styling */
.badge,
.chip,
.tag {
  border-radius: var(--expo-radius-pill);
  font-family: var(--expo-font);
}

/* Status colors */
.status-active,
.status-success {
  color: var(--expo-success);
}
.status-error,
.status-failed {
  color: var(--expo-error);
}
.status-warning {
  color: var(--expo-warning);
}

/* Empty states */
.empty-state {
  color: var(--expo-text-tertiary);
  font-family: var(--expo-font);
}

/* Loading states */
.spinner,
.loading-spinner {
  border-color: var(--expo-border);
  border-top-color: var(--expo-text);
}

/* Dropdown menus */
.dropdown-menu,
.context-menu {
  background: var(--expo-surface);
  border-color: var(--expo-border);
  border-radius: var(--expo-radius-md);
  box-shadow: var(--expo-shadow-standard);
}

.dropdown-item:hover,
.context-menu-item:hover {
  background: var(--expo-bg);
}

/* Toast notifications */
.toast {
  background: var(--expo-surface);
  border-color: var(--expo-border);
  border-radius: var(--expo-radius-md);
  box-shadow: var(--expo-shadow-standard);
  font-family: var(--expo-font);
}

/* Form labels */
label {
  font-family: var(--expo-font);
  color: var(--expo-text-near);
}

/* Placeholder text */
::placeholder {
  color: var(--expo-text-tertiary);
}

/* Selection highlight */
::selection {
  background: rgba(0, 0, 0, 0.12);
}

/* Focus ring for accessibility */
:focus-visible {
  outline-color: var(--expo-text);
}


/* ═══════════════════════════════════════════════════════════════════
   MOBILE RESPONSIVE OVERRIDES (max-width: 768px)
   Only visual refinements — no layout changes (those are in each HTML)
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── Draft preview cards ── */
  .draft-preview {
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    border-radius: 10px !important;
  }
  .draft-preview-header {
    padding: 10px 12px !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  .draft-preview-header .draft-contact-info {
    min-width: 0 !important;
  }
  .draft-preview-header .draft-contact-name {
    font-size: 13px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  .draft-field-label {
    font-size: 10px !important;
  }
  .draft-field-value {
    font-size: 13px !important;
    word-break: break-word !important;
  }
  .draft-field-value.draft-body {
    max-height: 100px !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  .draft-preview .draft-actions {
    padding: 8px 12px !important;
    gap: 6px !important;
  }
  .draft-preview .draft-actions button {
    font-size: 12px !important;
    padding: 6px 10px !important;
    min-height: 36px !important;
  }

  /* ── LinkedIn draft cards ── */
  .li-draft-preview,
  .linkedin-draft-card {
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* ── Schedule cards ── */
  .schedule-card,
  .sc-card {
    max-width: 100% !important;
    padding: 14px !important;
    border-radius: 10px !important;
  }
  .sc-field {
    flex-direction: column !important;
    gap: 4px !important;
  }
  .sc-field label {
    font-size: 12px !important;
  }
  .sc-field input,
  .sc-field select {
    font-size: 14px !important;
    min-height: 40px !important;
  }
  .sc-days {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  .sc-day-btn {
    width: 36px !important;
    height: 36px !important;
    font-size: 12px !important;
  }
  .sc-btn {
    font-size: 14px !important;
    padding: 10px 16px !important;
    min-height: 44px !important;
  }

  /* ── Channel picker bar ── */
  .channel-picker-bar {
    flex-wrap: wrap !important;
    gap: 6px !important;
    padding: 8px !important;
  }
  .channel-picker-btn {
    font-size: 12px !important;
    padding: 8px 12px !important;
    min-height: 36px !important;
  }

  /* ── LinkedIn choice cards (Connection Requests / DMs / Follow-up) ── */
  .li-choice-card {
    padding: 12px 14px !important;
    gap: 10px !important;
  }
  .li-choice-card div[style*="font-size:14px"] {
    font-size: 13px !important;
  }
  .li-choice-card div[style*="font-size:12px"] {
    font-size: 11px !important;
  }
  .li-choice-card div[style*="width:36px"] {
    width: 32px !important;
    height: 32px !important;
  }

  /* ── Connection widgets (connect-gmail, connect-linkedin, etc.) ── */
  .connect-widget,
  .cmo-channel-card {
    max-width: 100% !important;
    padding: 14px !important;
  }
  .connect-widget button,
  .cmo-connect-btn {
    font-size: 13px !important;
    padding: 10px 16px !important;
    min-height: 44px !important;
    border-radius: 9999px !important;
  }

  /* ── Quick reply buttons ── */
  .quick-replies {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  .quick-replies button,
  .qr-btn {
    font-size: 12px !important;
    padding: 8px 14px !important;
    min-height: 36px !important;
    border-radius: 9999px !important;
    white-space: nowrap !important;
  }

  /* ── Tables in chat messages ── */
  .table-wrap,
  .msg-bubble .table-wrap,
  .msg-content .table-wrap {
    margin: 6px -8px !important;
    padding: 0 8px !important;
    border-radius: 6px !important;
  }
  .msg-bubble table,
  .msg-content table,
  .table-wrap table {
    font-size: 11px !important;
  }
  .msg-bubble th,
  .msg-content th,
  .table-wrap th {
    padding: 6px 8px !important;
    font-size: 10px !important;
    white-space: nowrap !important;
  }
  .msg-bubble td,
  .msg-content td,
  .table-wrap td {
    padding: 5px 8px !important;
    white-space: nowrap !important;
  }

  /* ── Onboarding page ── */
  .onboarding-container,
  .ob-card {
    padding: 20px 16px !important;
    max-width: 100% !important;
  }
  .question-text {
    font-size: 22px !important;
    line-height: 1.3 !important;
    letter-spacing: -0.3px !important;
  }
  .answer-textarea {
    font-size: 16px !important;
    min-height: 60px !important;
  }
  .url-input-wrap {
    max-width: 100% !important;
  }
  .url-input-wrap input {
    font-size: 16px !important;
    padding: 12px 14px !important;
  }
  .url-go-btn {
    min-width: 44px !important;
    min-height: 44px !important;
  }
  .continue-btn {
    font-size: 15px !important;
    padding: 12px 24px !important;
    min-height: 48px !important;
    border-radius: 9999px !important;
  }
  .skip-link,
  .manual-link {
    font-size: 13px !important;
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
  }
  .progress-track {
    height: 4px !important;
  }

  /* ── Deep Research button and results ── */
  .deep-research-btn {
    font-size: 12px !important;
    padding: 8px 14px !important;
    min-height: 36px !important;
    border-radius: 9999px !important;
  }
  .research-results {
    max-width: 100% !important;
    font-size: 13px !important;
  }

  /* ── Settings panel (slide-out) ── */
  .settings-panel {
    width: 100vw !important;
    max-width: 100vw !important;
  }
  .settings-panel .settings-body {
    padding: 16px !important;
  }
  .integration-card {
    padding: 12px !important;
    gap: 10px !important;
  }
  .integration-card button {
    min-height: 44px !important;
    font-size: 13px !important;
    padding: 8px 14px !important;
    border-radius: 9999px !important;
  }
  .integration-icon {
    width: 36px !important;
    height: 36px !important;
  }

  /* ── Email choice buttons (New Outreach / Follow-up) ── */
  .email-sub-choice button,
  .quick-replies button[style*="New Outreach"],
  .quick-replies button[style*="Follow-up"] {
    min-height: 44px !important;
  }

  /* ── Contact tables (contacts page) ── */
  .crm-table-wrap {
    border-radius: 6px !important;
  }
  .crm-table {
    font-size: 12px !important;
  }
  .crm-table th {
    font-size: 11px !important;
    padding: 8px 6px !important;
    white-space: nowrap !important;
  }
  .crm-table td {
    padding: 8px 6px !important;
    font-size: 12px !important;
  }

  /* ── Message bubbles — ensure content doesn't overflow ── */
  .msg-bubble {
    max-width: 92% !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
  }
  .msg-bubble img {
    max-width: 100% !important;
    height: auto !important;
  }

  /* ── Tone slider ── */
  .tone-slider-wrap {
    max-width: 100% !important;
    padding: 8px !important;
  }

  /* ── Attachment previews ── */
  .attachment-previews {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  .attachment-thumb {
    width: 48px !important;
    height: 48px !important;
  }

  /* ── Dashboard summary/channel cards ── */
  .summary-card {
    padding: 14px 16px !important;
    border-radius: 10px !important;
  }
  .summary-value {
    font-size: 24px !important;
    letter-spacing: -0.5px !important;
  }
  .channel-card {
    padding: 14px !important;
    border-radius: 10px !important;
  }

  /* ── GTM Copilot / AI CMO cards ── */
  .cmo-channel-card {
    border-radius: 10px !important;
    padding: 14px !important;
  }
  .cmo-draft-card {
    max-width: 100% !important;
    border-radius: 10px !important;
  }
  .started-card {
    border-radius: 10px !important;
    padding: 14px !important;
  }

  /* ── Paywall ── */
  .plan-card {
    max-width: 100% !important;
    padding: 24px 20px !important;
  }
  .plan-btn {
    min-height: 48px !important;
    font-size: 15px !important;
    border-radius: 9999px !important;
  }
  .credit-pack {
    padding: 12px !important;
    border-radius: 10px !important;
  }

  /* ── Login page ── */
  .auth-left {
    padding: 24px 20px !important;
  }
  .auth-left input {
    font-size: 16px !important;
    min-height: 44px !important;
  }
  .auth-submit,
  .auth-left button[type="submit"] {
    min-height: 48px !important;
    font-size: 15px !important;
    border-radius: 9999px !important;
  }
}