/* =========================================================
   VIKA THEME OVERLAY
   Drop this into static/vika-theme.css and link it AFTER
   styles.css in index.html:
     <link rel="stylesheet" href="/styles.css">
     <link rel="stylesheet" href="/vika-theme.css">

   It re-skins the existing DOM. It DOES NOT rename any IDs
   or classes â app.js keeps working untouched.
   ========================================================= */

:root{
  /* LOCK the accent hue â overrides whatever tweaks may have stored.
     195 = teal/cyan (the mock). Change this ONE number to re-tint. */
  --accent-h: 195 !important;
  --accent:        oklch(0.66 0.14 var(--accent-h)) !important;
  --accent-soft:   oklch(0.66 0.14 var(--accent-h) / 0.12) !important;
  --accent-border: oklch(0.66 0.14 var(--accent-h) / 0.35) !important;
  --accent-fg:     oklch(0.98 0.02 var(--accent-h)) !important;
  --font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Helvetica, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --radius: 10px;
  --radius-lg: 14px;
}

html[data-theme="light"]{
  --bg:           oklch(0.985 0.003 80);
  --bg-elev:      oklch(1 0 0);
  --bg-raised:    oklch(0.97 0.004 80);
  --bg-hover:     oklch(0.95 0.005 80);
  --panel:        oklch(0.99 0.003 80);
  --panel-border: oklch(0.90 0.005 80);
  --line:         oklch(0.92 0.005 80);
  --line-strong:  oklch(0.85 0.006 80);
  --fg:           oklch(0.22 0.01 80);
  --fg-muted:     oklch(0.42 0.01 80);
  --fg-dim:       oklch(0.58 0.008 80);
}
html[data-theme="dark"]{
  --bg:           oklch(0.16 0.006 80);
  --bg-elev:      oklch(0.195 0.007 80);
  --bg-raised:    oklch(0.22 0.008 80);
  --bg-hover:     oklch(0.24 0.008 80);
  --panel:        oklch(0.185 0.006 80);
  --panel-border: oklch(0.28 0.008 80);
  --line:         oklch(0.27 0.008 80);
  --line-strong:  oklch(0.34 0.008 80);
  --fg:           oklch(0.97 0.005 80);
  --fg-muted:     oklch(0.74 0.01 80);
  --fg-dim:       oklch(0.56 0.01 80);
}

body{
  font-family: var(--font-sans) !important;
  background: var(--bg) !important;
  color: var(--fg) !important;
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
}

/* Ambient orbs â hide the blurry blobs, they read as AI-slop */
.ambient-bg{ display: none !important; }

/* Sidebar */
#sidebar{
  background: var(--panel) !important;
  border-right: 1px solid var(--panel-border) !important;
}
.sidebar-header{ border-bottom: 1px solid var(--panel-border); }
.sidebar-logo{
  background: linear-gradient(140deg, var(--accent), oklch(0.48 0.14 var(--accent-h))) !important;
  color: white !important; border-radius: 8px !important;
}
.sidebar-wordmark{ color: var(--fg); font-weight: 600; }
.sidebar-eyebrow{
  font-family: var(--font-mono); font-size: 10.5px !important;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-dim) !important;
}

/* Nav */
.nav-item{
  border-radius: 7px !important; color: var(--fg-muted) !important;
  transition: background .12s, color .12s;
}
.nav-item:hover{ background: var(--bg-hover) !important; color: var(--fg) !important; }
.nav-item.active{
  background: var(--bg-raised) !important; color: var(--fg) !important;
  box-shadow: inset 2px 0 0 var(--accent);
}

/* Topbar */
#topbar{
  background: var(--bg) !important;
  border-bottom: 1px solid var(--panel-border) !important;
  height: 54px !important;
}
.status-pill{
  background: var(--bg-elev) !important;
  border: 1px solid var(--line) !important;
  color: var(--fg-muted) !important;
  font-family: var(--font-mono); font-size: 12px !important;
  border-radius: 999px !important;
}

/* Buttons */
.cds--btn{
  border-radius: 8px !important; font-family: var(--font-sans) !important;
  font-weight: 500 !important; letter-spacing: -0.005em !important;
}
.cds--btn--primary{ background: var(--accent) !important; color: var(--accent-fg) !important; border: none !important; }
.cds--btn--primary:hover{ filter: brightness(1.06); }
.cds--btn--secondary{ background: var(--bg-elev) !important; color: var(--fg) !important; border: 1px solid var(--line-strong) !important; }
.cds--btn--ghost{ color: var(--fg-muted) !important; }
.cds--btn--ghost:hover{ background: var(--bg-hover) !important; color: var(--fg) !important; }

/* Inputs */
.cds--text-input, .cds--text-area, .cds--select-input{
  background: var(--bg-elev) !important;
  border: 1px solid var(--line) !important;
  color: var(--fg) !important;
  border-radius: 8px !important;
  font-family: var(--font-sans) !important;
}
.cds--text-input:focus, .cds--text-area:focus, .cds--select-input:focus{
  border-color: var(--accent-border) !important;
  box-shadow: 0 0 0 3px var(--accent-soft) !important;
  outline: none !important;
}
.cds--label{ color: var(--fg-muted) !important; font-size: 11.5px !important; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.02em; }

/* Chat messages */
.message{ padding: 10px 0 !important; }
.message.assistant .message-body,
.message.user .message-body{
  font-size: 14px !important; line-height: 1.6 !important; color: var(--fg) !important;
}
.message-label{ color: var(--fg-dim) !important; font-size: 12px !important; }

/* Composer */
.composer{
  background: var(--bg-elev) !important;
  border: 1px solid var(--line-strong) !important;
  border-radius: var(--radius-lg) !important;
  transition: border-color .15s, box-shadow .15s;
}
.composer:focus-within{
  border-color: var(--accent-border) !important;
  box-shadow: 0 0 0 4px var(--accent-soft) !important;
}

/* Cards / panels */
.side-block, .contacts-section, .modal-box, .pipeline-sidebar, .candidate-detail{
  background: var(--panel) !important;
  border: 1px solid var(--panel-border) !important;
  border-radius: var(--radius-lg) !important;
}

/* Kanban */
.kanban-board{ gap: 14px !important; }
.kanban-column{
  background: var(--panel) !important;
  border: 1px solid var(--panel-border) !important;
  border-radius: var(--radius-lg) !important;
}
.candidate-card{
  background: var(--bg-elev) !important;
  border: 1px solid var(--line) !important;
  border-radius: 10px !important;
}

/* =========================================================
   LAYOUT FIXES â these address the "real data" problems:
   - Sidebar was too narrow â recent chats wrapped to 4 lines
   - Categories panel dumped into sidebar
   - Right drawer always open, eating a third of the screen
   ========================================================= */

/* Sidebar: guarantee width, allow internal scroll, don't let children push it */
#sidebar{
  width: 260px !important;
  min-width: 260px !important;
  max-width: 260px !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}
#sidebar > *{ min-width: 0 !important; }
.sidebar-body, .sidebar-scroll, #sidebar-scroll{
  flex: 1 1 auto !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  min-height: 0 !important;
}

/* Nav items: single line, truncate */
.nav-item, .sidebar-link, .recent-chat, .recent-chat-item, .chat-history-item{
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-height: 32px !important;
  padding: 6px 10px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  font-size: 13px !important;
  line-height: 1.3 !important;
}
.nav-item > *, .recent-chat > *, .chat-history-item > *{ min-width: 0 !important; }
.nav-item span, .recent-chat span, .chat-history-item span,
.nav-item .label, .recent-chat .title, .chat-history-item .title{
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  flex: 1 1 auto !important;
}

/* "New chat" button â stay on one line */
.new-chat-btn, #new-chat-btn, button[data-action="new-chat"]{
  white-space: nowrap !important;
  min-height: 36px !important;
  padding: 0 12px !important;
}

/* Integrations / Categories / Admin blocks â kill on sight.
   Root-cause belongs in HTML (move to Settings), but these selectors
   cover every plausible name Claude Code might use. */
.categories, #categories, .sidebar-categories,
.integrations, #integrations, .sidebar-integrations,
.integration-list, .integrations-panel, .integrations-section,
#sidebar [data-section="integrations"],
#sidebar [data-section="categories"],
#sidebar [data-section="admin"],
#sidebar .api-keys, #sidebar .env-vars, #sidebar .config-panel{
  display: none !important;
}

/* Also hide any <table> inside the sidebar â raw data dumps don't belong in nav */
#sidebar table{ display: none !important; }

/* And any element that looks like a key/value config row */
#sidebar [class*="apollo"], #sidebar [class*="tavily"],
#sidebar [class*="twilio"], #sidebar [class*="slack-config"]{
  display: none !important;
}

/* Right drawer (Meeting Notes / context pane): collapsible, not always open */
.right-drawer, #right-drawer, .context-drawer, .notes-panel, #meeting-notes{
  width: 320px !important;
  max-width: 32vw !important;
  border-left: 1px solid var(--panel-border) !important;
  background: var(--panel) !important;
}
.right-drawer.collapsed, #right-drawer[aria-hidden="true"]{
  width: 0 !important;
  border-left: none !important;
  overflow: hidden !important;
}

/* Main chat area: take remaining space, center content with sensible max width */
.main-content, #main, .chat-main, .chat-container{
  flex: 1 1 auto !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
}
.chat-scroll, .messages, #messages{
  flex: 1 1 auto !important;
  overflow-y: auto !important;
  min-height: 0 !important;
}
.chat-scroll > *, .messages > *{
  max-width: 780px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  width: 100% !important;
}

/* Composer sticks to bottom, same max-width */
.composer-wrap, .composer-container{
  padding: 16px 24px 20px !important;
}
.composer{
  max-width: 780px !important;
  margin: 0 auto !important;
}

/* Welcome / empty state centering */
.welcome, .empty-state, .onboarding{
  max-width: 720px !important;
  margin: 0 auto !important;
  padding: 48px 24px !important;
}

/* Scrollbars */
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-thumb{
  background: var(--line-strong); border-radius: 999px;
  border: 2px solid transparent; background-clip: padding-box;
}
::-webkit-scrollbar-track{ background: transparent; }

/* =========================================================
   APP-SPECIFIC OVERRIDES (matches real class names)
   ========================================================= */

/* Conversation list items: app.js renders <strong>+<span>+<small> inside button */
.conversation-item {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 7px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  padding: 5px 10px !important;
  border-radius: 6px !important;
  font-size: 12.5px !important;
  min-height: 28px !important;
  width: 100% !important;
  text-align: left !important;
  background: transparent;
  color: var(--fg-muted);
  cursor: pointer;
  transition: background .12s;
}
.conversation-item:hover { background: var(--bg-hover) !important; color: var(--fg) !important; }
.conversation-item.active { background: var(--accent-soft) !important; color: var(--fg) !important; }
.conversation-item small {
  font-family: var(--font-mono) !important;
  font-size: 10.5px !important;
  color: var(--fg-dim) !important;
  flex-shrink: 0 !important;
  white-space: nowrap !important;
  font-weight: 400 !important;
}
.conversation-item strong {
  flex: 1 1 auto !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-weight: 400 !important;
  font-size: 12.5px !important;
}
.conversation-item span { display: none !important; }

/* Notes rail â closed by default */
.notes-rail, #note-panel {
  transition: width .25s cubic-bezier(.22,.61,.36,1), opacity .2s !important;
}
#note-panel[aria-hidden="true"] {
  width: 0 !important; min-width: 0 !important; padding: 0 !important;
  border-left: none !important; overflow: hidden !important; opacity: 0 !important;
}
#note-panel[aria-hidden="false"] {
  width: 260px !important; min-width: 260px !important; opacity: 1 !important;
}

/* Zoom controls: hidden */
#zoom-controls, .zoom-controls { display: none !important; }

/* =========================================================
   FINAL POLISH â match the mock exactly
   ========================================================= */

/* Mode cards: subtle outlined, accent-tinted only when active */
.mode-card, .mode-btn, [data-mode], .mode-pill{
  background: var(--bg-elev) !important;
  border: 1px solid var(--line) !important;
  color: var(--fg) !important;
  border-radius: 10px !important;
  transition: border-color .15s, background .15s, transform .08s;
}
.mode-card:hover, .mode-btn:hover, [data-mode]:hover, .mode-pill:hover{
  border-color: var(--line-strong) !important;
  background: var(--bg-hover) !important;
}
.mode-card.active, .mode-btn.active, [data-mode].active,
[data-mode][aria-pressed="true"], .mode-card[aria-selected="true"]{
  background: var(--accent-soft) !important;
  border-color: var(--accent-border) !important;
  color: var(--fg) !important;
  box-shadow: inset 0 0 0 1px var(--accent-border);
}

/* Primary send button â solid accent */
.btn.primary, button.primary, .send-btn, #send-button{
  background: var(--accent) !important;
  color: white !important;
  border: none !important;
  box-shadow: 0 1px 0 rgba(0,0,0,.08), 0 2px 6px var(--accent-soft) !important;
}
.btn.primary:hover, button.primary:hover, .send-btn:hover, #send-button:hover{
  filter: brightness(1.05);
}

/* Welcome block rhythm */
#pane-chat .chat-wrap, .chat-wrap{ padding-top: 24px !important; }
.welcome-eyebrow, [class*="eyebrow"]{
  color: var(--accent) !important;
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  text-align: center !important;
}
h1.welcome-title, .welcome h1, .welcome-heading{
  font-size: 32px !important;
  font-weight: 500 !important;
  letter-spacing: -0.022em !important;
  text-align: center !important;
  margin: 8px auto 8px !important;
}
.welcome-sub, .welcome p{
  color: var(--fg-muted) !important;
  text-align: center !important;
  font-size: 14px !important;
  margin-bottom: 28px !important;
}

/* Suggested-for-you rows */
.suggest-row, [data-suggestion], .prompt-suggestion{
  display: grid !important;
  grid-template-columns: 160px 1fr !important;
  gap: 14px !important;
  align-items: baseline !important;
  padding: 10px 0 !important;
  border-bottom: 1px solid var(--line) !important;
  font-size: 13.5px !important;
}
.suggest-row:last-child, [data-suggestion]:last-child{ border-bottom: none !important; }
.suggest-row strong, [data-suggestion] strong{
  font-weight: 500 !important; color: var(--fg) !important;
}
.suggest-row span, [data-suggestion] span{
  color: var(--fg-muted) !important;
}

/* Footer byline under composer */
.footer-byline, .routing-note{
  text-align: center !important;
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  color: var(--fg-dim) !important;
  padding: 10px 0 14px !important;
  letter-spacing: 0.02em !important;
}

/* =========================================================
   MOBILE BOTTOM NAV
   Hidden by default; shown at ≤900px via media query below.
   ========================================================= */

.mobile-nav {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: 60px;
  background: var(--panel);
  border-top: 1px solid var(--panel-border);
  z-index: 100;
  align-items: stretch;
}

.mobile-nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  font-size: 10px;
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
  color: var(--fg-muted);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: color .15s;
  padding: 4px 0;
  -webkit-tap-highlight-color: transparent;
}
.mobile-nav-item:active { opacity: 0.7; }
.mobile-nav-item.active {
  color: var(--accent) !important;
}
.mobile-nav-item svg {
  flex-shrink: 0;
}

/* Mobile scrim — overlay behind sidebar drawer */
.mobile-scrim {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 49; /* just under sidebar z-index:50 */
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

/* =========================================================
   MOBILE RESPONSIVE — supplements styles.css @900px breakpoint
   ========================================================= */

@media (max-width: 900px) {

  /* Show bottom nav */
  .mobile-nav { display: flex !important; }

  /* Show scrim when sidebar is expanded */
  .app[data-sidebar="expanded"] .mobile-scrim { display: block !important; }

  /* Push content above bottom nav + safe area for iOS */
  .main {
    padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* Make the chat scroll not get hidden behind bottom nav */
  .pane {
    padding-bottom: 0 !important;
  }
  #pane-chat {
    padding-bottom: 0 !important;
  }

  /* Topbar: tighten for small screens */
  .topbar {
    padding: 0 10px !important;
    gap: 6px !important;
  }
  .topbar-actions { gap: 4px !important; }

  /* Zoom controls: already hidden in styles.css, enforce */
  .zoom-controls, #zoom-controls { display: none !important; }

  /* Overview stats: 2 columns on tablet, 1 on very small */
  .overview-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Pane header: stack on mobile */
  .pane-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
  }
  .pane-actions {
    width: 100% !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  .pane-actions .btn {
    flex: 1 1 auto !important;
    justify-content: center !important;
  }

  /* Composer hint: hide on tiny screens to save space */
  .composer-hint { display: none !important; }

  /* Touch targets: all interactive elements min 44px */
  .btn, .icon-btn, .nav-item, .chip-btn, .upload-chip,
  input[type="submit"], button {
    min-height: 40px !important;
  }
  .icon-btn { min-width: 40px !important; }

  /* Chat messages: tighter padding */
  .message { padding: 6px 12px !important; }
  #workflow-panel { padding: 0 12px !important; }

  /* Composer wrap */
  .composer-wrap { padding: 8px 12px 12px !important; }
  #chat-input { font-size: 16px !important; } /* prevents iOS zoom on focus */

  /* Pipeline: ensure side panel is scrollable and has sensible max-height */
  .pipeline-side-panel {
    max-height: 50vh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* Kanban: horizontal scroll */
  .kanban-scroll {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  .kanban-board {
    min-width: max-content !important;
  }
  .kanban-column {
    min-width: 240px !important;
    width: 240px !important;
  }

  /* Email sidebar: full width stacked */
  .email-sidebar-col { width: 100% !important; }

  /* Contacts search bar: single column */
  .contacts-search-bar {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  /* Forms: single column */
  .inline-grid { grid-template-columns: 1fr !important; }

  /* Welcome block */
  .welcome h1, h1.welcome-title, .welcome-heading {
    font-size: 24px !important;
  }

  /* Mode cards: 2 per row on mobile */
  .modes, #mode-buttons {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Command palette: full width on mobile */
  .cmd-box {
    width: calc(100vw - 32px) !important;
    max-width: none !important;
  }

  /* Tweaks panel: full-width bottom sheet on mobile */
  .tweaks-panel {
    bottom: 60px !important;
    right: 0 !important;
    left: 0 !important;
    width: 100% !important;
    max-height: 80vh !important;
    overflow-y: auto !important;
    border-radius: 16px 16px 0 0 !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: none !important;
    border-top: 1px solid var(--panel-border) !important;
  }

}

@media (max-width: 480px) {
  /* Single column stats on very small phones */
  .overview-grid { grid-template-columns: 1fr !important; }

  /* Hide search-btn text (already in styles.css but reinforce) */
  .search-btn span { display: none !important; }
  .search-btn { min-width: 36px !important; padding: 0 8px !important; }

  /* Mode cards: 1 per row */
  .modes, #mode-buttons {
    grid-template-columns: 1fr !important;
  }

  /* Topbar title: truncate */
  .topbar-title {
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    max-width: 160px !important;
  }
}

/* ── Clay Enrichment Popup ───────────────────────────────────────────────── */
.clay-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  backdrop-filter: blur(3px);
}
.clay-modal-overlay.hidden { display: none; }

.clay-modal {
  background: var(--surface, #1a1f2e);
  border: 1px solid var(--border, rgba(255,255,255,.1));
  border-radius: 14px;
  width: 100%;
  max-width: 480px;
  max-height: 85vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 24px 60px rgba(0,0,0,.5);
}

.clay-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border, rgba(255,255,255,.08));
}
.clay-modal-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 15px;
}
.clay-logo-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: linear-gradient(135deg, #f97316, #ec4899);
  flex-shrink: 0;
}
.clay-modal-close {
  background: none;
  border: none;
  color: var(--text-muted, #8a8fa8);
  font-size: 16px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  line-height: 1;
}
.clay-modal-close:hover { background: rgba(255,255,255,.07); }

.clay-modal-body {
  overflow-y: auto;
  padding: 20px;
  flex: 1;
}

/* Loading state */
.clay-loading {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--text-muted, #8a8fa8);
  font-size: 14px;
  padding: 20px 0;
}
.clay-spinner {
  width: 18px; height: 18px;
  border: 2px solid rgba(255,255,255,.15);
  border-top-color: var(--accent, #38bdf8);
  border-radius: 50%;
  animation: clay-spin .7s linear infinite;
  flex-shrink: 0;
}
@keyframes clay-spin { to { transform: rotate(360deg); } }

/* Profile card inside popup */
.clay-profile {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.clay-profile-hero {
  display: flex;
  align-items: center;
  gap: 14px;
}
.clay-avatar {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent, #38bdf8), #818cf8);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}
.clay-profile-name { font-size: 17px; font-weight: 600; }
.clay-profile-sub  { font-size: 13px; color: var(--text-muted, #8a8fa8); margin-top: 2px; }

.clay-divider {
  height: 1px;
  background: var(--border, rgba(255,255,255,.08));
}

.clay-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.clay-field {
  background: var(--surface-2, rgba(255,255,255,.04));
  border-radius: 8px;
  padding: 10px 12px;
}
.clay-field-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-muted, #8a8fa8);
  margin-bottom: 3px;
}
.clay-field-value {
  font-size: 13px;
  font-weight: 500;
  word-break: break-word;
}
.clay-field.full { grid-column: 1 / -1; }

.clay-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}
.clay-tag {
  background: var(--accent-soft, rgba(56,189,248,.12));
  color: var(--accent, #38bdf8);
  border: 1px solid var(--accent-border, rgba(56,189,248,.3));
  border-radius: 20px;
  font-size: 11px;
  padding: 2px 10px;
}

.clay-actions {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}
.clay-pushed-note {
  font-size: 12px;
  color: var(--text-muted, #8a8fa8);
  background: rgba(255,255,255,.04);
  border-radius: 8px;
  padding: 10px 12px;
  text-align: center;
}
.clay-pushed-note strong { color: #4ade80; }

/* Contact card enrich button */
.contact-enrich-btn {
  background: linear-gradient(135deg, rgba(249,115,22,.15), rgba(236,72,153,.15));
  border: 1px solid rgba(249,115,22,.3);
  color: #fb923c;
  border-radius: 6px;
  font-size: 11.5px;
  padding: 3px 10px;
  cursor: pointer;
  white-space: nowrap;
}
.contact-enrich-btn:hover {
  background: linear-gradient(135deg, rgba(249,115,22,.25), rgba(236,72,153,.25));
}

/* Clay enriched badge */
.clay-enriched-badge {
  display: inline-block;
  background: linear-gradient(135deg, rgba(249,115,22,.2), rgba(236,72,153,.2));
  color: #fb923c;
  border: 1px solid rgba(249,115,22,.4);
  border-radius: 10px;
  font-size: 10px;
  font-weight: 600;
  padding: 1px 7px;
  margin-left: 6px;
  vertical-align: middle;
}
.clay-enriched-badge.hidden { display: none; }

/* Chat people result cards */
.chat-people-results {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}
.chat-person-card {
  background: var(--surface-2, rgba(255,255,255,.04));
  border: 1px solid var(--border, rgba(255,255,255,.08));
  border-radius: 10px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.chat-person-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
}
.chat-person-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent, #38bdf8), #818cf8);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}
.chat-person-name { font-weight: 600; font-size: 14px; }
.chat-person-sub  { font-size: 12px; color: var(--text-muted, #8a8fa8); margin-top: 1px; }
.chat-person-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 12px;
  color: var(--text-muted, #8a8fa8);
}
.chat-person-actions {
  display: flex;
  gap: 6px;
  margin-top: 2px;
}
.chat-person-actions .btn {
  font-size: 11px;
  padding: 3px 10px;
  height: auto;
}