/* ── Typography, self-hosted ──────────────────────────────────────────────────
   The app used to pull DM Sans and JetBrains Mono from fonts.googleapis.com. That host started
   returning 503 and the whole UI silently dropped to system fallbacks — a third party having a
   bad afternoon changed how NameDrop looked, and there was nothing to be done about it from here.

   Typography is not a feature worth an external dependency. The files are in /static/fonts now
   and nothing leaves the box to render text.

   ONE FILE PER FAMILY, not one per weight: Google serves these as VARIABLE fonts, and the four
   weights it advertised for DM Sans were four downloads of the same 36,932 bytes. The
   font-weight RANGE below is what makes 300–600 work from a single file. */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 100 1000;      /* variable — the whole range lives in this one file */
  font-display: swap;
  src: url('/static/fonts/dm-sans.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url('/static/fonts/jetbrains-mono.woff2') format('woff2');
}

/* NameDrop Dashboard Styles */
* { box-sizing: border-box; }
body { font-family: 'DM Sans', sans-serif; }
.font-mono { font-family: 'JetBrains Mono', monospace; }

/* ── Button system ──────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 8px 16px; font-size: 13px; font-weight: 500; line-height: 1;
  border-radius: 8px; border: 1px solid transparent; cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.1s;
  white-space: nowrap; user-select: none;
}
.btn:active { transform: scale(0.98); }
.btn:disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; }
.btn-sm { padding: 6px 12px; font-size: 12px; border-radius: 7px; }
.btn-primary { background: #4f46e5; color: #fff; }
.btn-primary:hover { background: #6366f1; }
.btn-secondary { background: #1f2937; color: #e5e7eb; border-color: #374151; }
.btn-secondary:hover { background: #374151; border-color: #4b5563; }
.btn-ghost { background: transparent; color: #9ca3af; }
.btn-ghost:hover { background: rgba(55,65,81,0.5); color: #fff; }
.btn-danger { background: #dc2626; color: #fff; }
.btn-danger:hover { background: #ef4444; }
.btn-danger-soft { background: rgba(220,38,38,0.12); color: #f87171; border-color: rgba(220,38,38,0.3); }
.btn-danger-soft:hover { background: rgba(220,38,38,0.2); color: #fca5a5; }

/* ── Empty states ───────────────────────────────────────────── */
.empty-state {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 56px 24px;
}
.empty-state-icon {
  width: 48px; height: 48px; border-radius: 12px;
  background: rgba(55,65,81,0.5); color: #9ca3af;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 14px;
}
.empty-state-title { font-size: 14px; font-weight: 500; color: #e5e7eb; }
.empty-state-body { font-size: 12px; color: #6b7280; margin-top: 4px; max-width: 320px; line-height: 1.5; }
.empty-state-cta { margin-top: 16px; }

/* ── Skeleton loaders ───────────────────────────────────────── */
@keyframes skeleton-shimmer {
  0% { background-position: -200px 0; }
  100% { background-position: calc(200px + 100%) 0; }
}
.skeleton {
  background: linear-gradient(90deg, rgba(55,65,81,0.3) 0px, rgba(75,85,99,0.5) 40px, rgba(55,65,81,0.3) 80px);
  background-size: 200px 100%;
  animation: skeleton-shimmer 1.2s ease-in-out infinite;
  border-radius: 6px;
}
.skeleton-text { height: 12px; }
.skeleton-row {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; border-bottom: 1px solid rgba(55,65,81,0.3);
}
.skeleton-row:last-child { border-bottom: none; }
.skeleton-circle { width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0; }
.skeleton-row .skeleton-stack { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.skeleton-row .skeleton-line-lg { width: 40%; height: 13px; }
.skeleton-row .skeleton-line-sm { width: 65%; height: 10px; }

/* ── Segmented control (for detail panel trust/status) ─────── */
.seg-group {
  display: flex; background: #111118; border: 1px solid #1f2937;
  border-radius: 10px; padding: 3px; gap: 2px; width: 100%;
}
.seg-btn {
  flex: 1; padding: 8px 6px; font-size: 11px; font-weight: 500;
  background: transparent; color: #9ca3af; border: none; cursor: pointer;
  border-radius: 7px; transition: background 0.12s, color 0.12s;
  white-space: nowrap; min-height: 32px;
}
.seg-btn:hover { color: #e5e7eb; }
.seg-btn.active { background: rgba(99,102,241,0.18); color: #818cf8; }

/* ── WebSocket status pill ──────────────────────────────────── */
.ws-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; font-size: 11px; font-weight: 500;
  border-radius: 999px; background: rgba(55,65,81,0.4);
}
.ws-pill .ws-dot {
  width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
  background: #6b7280;
}
.ws-pill.connected { color: #86efac; background: rgba(34,197,94,0.12); }
.ws-pill.connected .ws-dot { background: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,0.2); }
.ws-pill.reconnecting { color: #fcd34d; background: rgba(245,158,11,0.12); }
.ws-pill.reconnecting .ws-dot { background: #f59e0b; }
.ws-pill.offline { color: #9ca3af; }
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #374151; border-radius: 2px; }
::-webkit-scrollbar-thumb:hover { background: #4b5563; }
#slide-panel { transform: translateX(100%); transition: transform 0.25s cubic-bezier(0.4,0,0.2,1); }
#slide-panel.open { transform: translateX(0); }
#slide-overlay { opacity: 0; pointer-events: none; transition: opacity 0.25s ease; }
#slide-overlay.open { opacity: 1; pointer-events: auto; }
.expand-content { max-height: 0; overflow: hidden; transition: max-height 0.25s ease; }
.expand-content.open { max-height: 600px; }
@keyframes live-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(99,102,241,0.5); }
  70%  { box-shadow: 0 0 0 6px rgba(99,102,241,0); }
  100% { box-shadow: 0 0 0 0 rgba(99,102,241,0); }
}
.live-pulse { animation: live-pulse 0.8s ease-out; }
@keyframes badge-bounce { 0%,100%{transform:scale(1)} 50%{transform:scale(1.3)} }
.badge-bounce { animation: badge-bounce 0.4s ease; }
.conf-high { background: #22c55e; }
.conf-med  { background: #f59e0b; }
.conf-low  { background: #ef4444; }
/* The toast used to hide itself by sliding DOWN 80px. That clears the screen only while it sits
   at bottom:24px — and on a phone it is raised to 72px, and to 156px when a panel is open. An
   80px slide does not clear 156px, so an EMPTY GREY PILL sat on the person card permanently,
   under the fields, looking like a rendering artifact. Because it was one.

   Hide it properly. opacity + visibility do not care where the bottom edge is. */
#toast {
  transform: translateY(80px);
  opacity: 0;
  visibility: hidden;
  transition: transform 0.3s ease, opacity 0.2s ease, visibility 0s linear 0.2s;
}
#toast.show {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
  transition: transform 0.3s ease, opacity 0.2s ease, visibility 0s;
}
@keyframes spin { to { transform: rotate(360deg); } }
.spinner { width:16px;height:16px;border:2px solid #374151;border-top-color:#6366f1;border-radius:50%;animation:spin 0.6s linear infinite;display:inline-block;flex-shrink:0; }
.nav-item.active { background: rgba(99,102,241,0.15); color: #818cf8; }
.nav-item.active svg { color: #818cf8; }
#sidebar { transition: transform 0.25s ease; }
@media (max-width: 768px) {
  #sidebar { transform: translateX(-100%); position: fixed; z-index: 50; height: 100%; }
  #sidebar.mobile-open { transform: translateX(0); }
}
/* search dropdown */
.search-dropdown { position:absolute;top:100%;left:0;right:0;z-index:200;margin-top:4px; }
/* link autocomplete */
.link-dropdown { position:absolute;top:100%;left:0;right:0;z-index:10;margin-top:2px; }
/* identity status colors */
.status-unverified { color:#9ca3af; }
.status-likely     { color:#f59e0b; }
.status-verified   { color:#22c55e; }
.status-disputed   { color:#ef4444; }

/* ── Avatar ────────────────────────────────────────────────── */
.avatar-thumb { cursor: default; }
#avatar-enlarge-overlay img { cursor: zoom-out; }

/* ── Mobile-first ──────────────────────────────────────────── */
button, a, select, input, [onclick] { -webkit-tap-highlight-color: transparent; }

/* Bottom nav */
#mobile-bottom-nav .bnav-btn {
  min-height: 48px; min-width: 44px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; color: #6b7280; transition: color 0.15s; position: relative;
  padding: 6px 0; flex: 1; background: none; border: none; cursor: pointer;
}
#mobile-bottom-nav .bnav-btn.active { color: #818cf8; }
#mobile-bottom-nav .bnav-label { font-size: 10px; line-height: 1; }
#mobile-bottom-nav .bnav-badge {
  position: absolute; top: 2px; right: calc(50% - 16px);
  min-width: 16px; height: 16px; background: #ef4444; color: white;
  font-size: 9px; font-family: 'JetBrains Mono', monospace;
  border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 600;
}

/* Mobile card items */
.mobile-card {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; border-bottom: 1px solid rgba(55,65,81,0.5);
  transition: background 0.15s; cursor: pointer;
  -webkit-user-select: none; user-select: none;
}
.mobile-card:active { background: rgba(55,65,81,0.3); }
.mobile-card:last-child { border-bottom: none; }
.mobile-card .mc-body { flex: 1; min-width: 0; }
.mobile-card .mc-name {
  font-size: 15px; color: #e5e7eb; font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mobile-card .mc-sub {
  font-size: 11px; color: #6b7280; margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Unscoped ON PURPOSE. This lived under `.mobile-card` and the desktop People row is not one, so
   the chevron there had no size at all and rendered at 1316px. A rule that only works inside one
   container is a rule that a refactor can silently step outside of. */
.mc-chevron { width: 1rem; height: 1rem; flex-shrink: 0; color: #4b5563; }
.mobile-card .mc-chevron { width: 16px; height: 16px; color: #4b5563; flex-shrink: 0; }

/* Mobile action cards (merges, flags) */
.mobile-action-card {
  padding: 14px 16px; border-bottom: 1px solid rgba(55,65,81,0.5);
}
.mobile-action-card:last-child { border-bottom: none; }
.mobile-action-card .mac-actions {
  display: flex; gap: 8px; margin-top: 10px;
}
.mobile-action-card .mac-actions button {
  flex: 1; padding: 10px 0; border-radius: 8px;
  font-size: 13px; font-weight: 500; min-height: 44px; border: none; cursor: pointer;
}

/* Detail panel mobile essentials */
.detail-essentials { padding: 20px 16px; }
.detail-essentials .de-name {
  font-size: 20px; font-weight: 600; color: white;
  margin-bottom: 16px; word-break: break-word;
}
.detail-essentials .de-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 0; border-bottom: 1px solid rgba(55,65,81,0.3);
}
.detail-essentials .de-row:last-child { border-bottom: none; }
.detail-essentials .de-icon {
  width: 40px; height: 40px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.detail-essentials .de-label { font-size: 11px; color: #6b7280; }
.detail-essentials .de-value {
  font-size: 14px; color: #d1d5db; font-family: 'JetBrains Mono', monospace;
}
.detail-expand-btn {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  width: 100%; padding: 12px; font-size: 13px; color: #818cf8;
  background: rgba(99,102,241,0.08); border: 1px solid rgba(99,102,241,0.2);
  border-radius: 10px; margin: 16px 0 0; transition: background 0.15s; cursor: pointer;
}
.detail-expand-btn:active { background: rgba(99,102,241,0.15); }
#detail-full-content { display: none; }
#detail-full-content.open { display: block; }

@media (max-width: 767px) {
  /* KPI 2-column stacked grid on mobile */
  #kpi-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  #kpi-grid > div { min-width: 0; }

  .section { padding: 16px !important; }
  .section h1 { font-size: 17px; line-height: 1.25; }
  .section > div:first-child > p { margin-top: 2px; }

  /* Search/filter stacking */
  .mobile-search-row { flex-direction: column !important; gap: 8px !important; }
  .mobile-search-row > button, .mobile-search-row > select { width: 100%; justify-content: center; }
  .search-bar-wrap { padding: 12px 16px 8px !important; }
  .cl-filters { flex-direction: column !important; gap: 8px !important; }
  .cl-filters select { width: 100%; }

  /* Bot activity controls stacking */
  .bot-activity-controls { flex-direction: column; gap: 8px !important; align-items: stretch; }
  .bot-activity-controls select { width: 100%; }

  /* Full-screen modals */
  .modal-inner {
    height: 100% !important; max-height: 100% !important;
    border-radius: 0 !important; border: none !important;
  }
  .modal-outer { padding: 0 !important; }

  /* Form grid stacking */
  .form-grid-2 { grid-template-columns: 1fr !important; }
  .form-grid-3 { grid-template-columns: 1fr !important; }

  #toast { bottom: 72px !important; }
  main { padding-bottom: 56px !important; }
  /* Chat section: shrink to fit above bottom nav, accounting for main overflow */
  #section-chat { max-height: calc(100vh - 3rem - 63px - 56px) !important; }
  /* 3rem = mobile header, 63px = search bar, 56px = bottom nav */
}

@supports (padding-bottom: env(safe-area-inset-bottom)) {
  #mobile-bottom-nav { padding-bottom: env(safe-area-inset-bottom); }
  #batch-mobile-actions { padding-bottom: calc(16px + env(safe-area-inset-bottom)); }
}

@media (display-mode: standalone) {
  #mobile-header { padding-top: env(safe-area-inset-top); height: calc(48px + env(safe-area-inset-top)); }
}

/* Mobile slide panel bottom actions.
   max(), not a bare env(): on a phone without a home indicator env() is 0, which left the
   Edit/Delete/Close row flush against the very bottom edge of the screen with nothing to
   grab. And on a phone WITH one, 12px keeps the buttons clear of the home bar instead of
   sitting under it. */
#slide-mobile-actions.safe-area-bottom {
  padding-bottom: max(12px, env(safe-area-inset-bottom, 0px));
}
/* The toast lives at bottom:72px, which is inside the panel's action bar — so "Saved" landed
   on top of the buttons you had just pressed. Lift it above the bar while the panel is open. */
body.panel-open #toast { bottom: 156px !important; }
#slide-drag-handle { cursor: grab; -webkit-user-select: none; user-select: none; }
@media (max-width: 767px) {
  #slide-panel.open { transform: translateY(0) !important; }
  #slide-panel { transform: translateY(100%) !important; border-left: none; border-top: 1px solid #1f2937; border-radius: 16px 16px 0 0; }
  #slide-content { padding-bottom: 0 !important; }
}

/* ── Batch Review ──────────────────────────────────────────── */
.batch-card {
  width: 100%; max-width: 480px;
  background: #111118; border: 1px solid #1f2937;
  border-radius: 16px; overflow: hidden;
  transition: transform 0.3s cubic-bezier(0.4,0,0.2,1), opacity 0.3s ease;
  touch-action: pan-y; user-select: none; -webkit-user-select: none;
}
.batch-card.slide-left {
  transform: translateX(-120%) rotate(-8deg); opacity: 0;
}
.batch-card.slide-right {
  transform: translateX(120%) rotate(8deg); opacity: 0;
}
.batch-card.slide-up {
  transform: translateY(-100%); opacity: 0;
}
.batch-card .bc-header {
  padding: 20px 20px 16px;
  border-bottom: 1px solid rgba(55,65,81,0.4);
}
.batch-card .bc-names {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.batch-card .bc-name {
  font-size: 16px; font-weight: 600; color: #e5e7eb;
}
.batch-card .bc-arrow {
  color: #6366f1; flex-shrink: 0;
}
.batch-card .bc-conf {
  display: flex; align-items: center; gap: 8px; margin-top: 12px;
}
.batch-card .bc-conf-bar {
  flex: 1; height: 6px; background: #1f2937; border-radius: 3px; overflow: hidden;
}
.batch-card .bc-conf-fill { height: 100%; border-radius: 3px; }
.batch-card .bc-body { padding: 16px 20px 20px; }
.batch-card .bc-section-title {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em;
  color: #6b7280; font-family: 'JetBrains Mono', monospace; margin-bottom: 8px;
}
.batch-card .bc-field-row {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 6px 0; border-bottom: 1px solid rgba(55,65,81,0.25);
  font-size: 13px;
}
.batch-card .bc-field-row:last-child { border-bottom: none; }
.batch-card .bc-field-label { color: #9ca3af; }
.batch-card .bc-field-value {
  color: #d1d5db; font-family: 'JetBrains Mono', monospace; font-size: 12px;
  text-align: right; max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.batch-card .bc-desktop-actions {
  display: flex; gap: 10px; padding: 0 20px 20px; justify-content: center;
}
.batch-card .bc-desktop-actions button {
  flex: 1; max-width: 160px; padding: 10px 0; border-radius: 10px;
  font-size: 13px; font-weight: 500; min-height: 44px; border: none; cursor: pointer;
  transition: background 0.15s, transform 0.1s;
}
.batch-card .bc-desktop-actions button:active { transform: scale(0.97); }

/* Swipe hint overlay */
.swipe-hint {
  position: absolute; top: 0; bottom: 0; width: 50%;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none; opacity: 0; transition: opacity 0.15s;
  font-size: 14px; font-weight: 600;
}
.swipe-hint.left { left: 0; background: linear-gradient(to right, rgba(220,38,38,0.15), transparent); color: #f87171; }
.swipe-hint.right { right: 0; background: linear-gradient(to left, rgba(22,163,74,0.15), transparent); color: #4ade80; }

/* Session summary */
.batch-summary {
  max-width: 400px; width: 100%; text-align: center; padding: 24px;
}
.batch-summary .bs-stat {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px; border-bottom: 1px solid rgba(55,65,81,0.3);
  font-size: 14px;
}
.batch-summary .bs-stat:last-child { border-bottom: none; }

@media (max-width: 767px) {
  .batch-card { max-width: 100%; border-radius: 12px; }
  .batch-card .bc-desktop-actions { display: none; }
  #batch-review-overlay { padding-bottom: 0; }
}
@media (min-width: 768px) {
  #batch-mobile-actions { display: none !important; }
}

/* ── Import Wizard ────────────────────────────────────────── */
.import-dropzone {
  min-height: 180px; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  -webkit-user-select: none; user-select: none;
}
.import-dropzone.drag-over {
  border-color: #818cf8; background: rgba(99,102,241,0.06);
}
.import-step {
  color: #6b7280; background: transparent;
}
.import-step .import-step-num {
  background: #374151; color: #9ca3af;
}
.import-step.active {
  color: #818cf8; background: rgba(99,102,241,0.1);
}
.import-step.active .import-step-num {
  background: #6366f1; color: white;
}
.import-step.done {
  color: #22c55e;
}
.import-step.done .import-step-num {
  background: rgba(34,197,94,0.2); color: #22c55e;
}
.import-has-dupe {
  background: rgba(245,158,11,0.04);
}
@media (max-width: 767px) {
  .import-dropzone { min-height: 200px; padding: 32px 16px; }
  #import-steps { flex-wrap: wrap; gap: 6px; }
  #import-steps svg.w-4 { display: none; }
}

/* ── Timeline ─────────────────────────────────────────────── */
.timeline-feed { position: relative; }
.timeline-feed::before {
  content: ''; position: absolute; left: 15px; top: 0; bottom: 0;
  width: 2px; background: rgba(55,65,81,0.5);
}
.tl-item {
  position: relative; padding-left: 40px; padding-bottom: 16px;
}
.tl-item:last-child { padding-bottom: 0; }
.tl-dot {
  position: absolute; left: 8px; top: 2px;
  width: 16px; height: 16px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; z-index: 1;
}
.tl-dot svg { width: 10px; height: 10px; }
.tl-dot.tl-create  { background: rgba(34,197,94,0.2); color: #4ade80; }
.tl-dot.tl-update  { background: rgba(59,130,246,0.2); color: #60a5fa; }
.tl-dot.tl-delete  { background: rgba(239,68,68,0.2); color: #f87171; }
.tl-dot.tl-merge   { background: rgba(245,158,11,0.2); color: #fbbf24; }
.tl-dot.tl-restore { background: rgba(20,184,166,0.2); color: #2dd4bf; }
.tl-dot.tl-link    { background: rgba(168,85,247,0.2); color: #c084fc; }
.tl-body {
  background: rgba(17,17,24,0.6); border: 1px solid rgba(55,65,81,0.4);
  border-radius: 10px; padding: 10px 12px;
}
.tl-body:active { background: rgba(55,65,81,0.2); }
.tl-summary { font-size: 13px; color: #d1d5db; line-height: 1.4; }
.tl-meta {
  display: flex; align-items: center; gap: 8px; margin-top: 4px;
  font-size: 11px; color: #6b7280; font-family: 'JetBrains Mono', monospace;
}
.tl-diff {
  margin-top: 6px; padding: 6px 8px;
  background: rgba(0,0,0,0.3); border-radius: 6px;
  font-size: 11px; font-family: 'JetBrains Mono', monospace;
  line-height: 1.5; overflow-x: auto;
}
.tl-diff-old { color: #f87171; }
.tl-diff-new { color: #4ade80; }
.tl-tabs {
  display: flex; gap: 0; border-bottom: 1px solid rgba(55,65,81,0.5);
  margin-bottom: 16px;
}
.tl-tab {
  flex: 1; padding: 10px 0; text-align: center;
  font-size: 12px; color: #6b7280; background: none; border: none;
  border-bottom: 2px solid transparent; cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
  font-family: 'JetBrains Mono', monospace;
}
.tl-tab:active { background: rgba(55,65,81,0.2); }
.tl-tab.active { color: #818cf8; border-bottom-color: #818cf8; }
.tl-load-more {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  width: 100%; padding: 10px; font-size: 12px; color: #818cf8;
  background: rgba(99,102,241,0.06); border: 1px solid rgba(99,102,241,0.15);
  border-radius: 8px; margin-top: 12px; cursor: pointer;
  transition: background 0.15s;
}
.tl-load-more:active { background: rgba(99,102,241,0.12); }

/* ── Tag Autocomplete ─────────────────────────────────────── */
.tag-ac-dropdown {
  position: absolute; left: 0; right: 0; top: 100%;
  z-index: 60; margin-top: 4px;
  background: #1a1a24; border: 1px solid #374151;
  border-radius: 10px; box-shadow: 0 8px 32px rgba(0,0,0,0.5);
  max-height: 200px; overflow-y: auto;
}
.tag-ac-option {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; padding: 8px 12px; border: none; background: none;
  font-size: 13px; color: #d1d5db; text-align: left; cursor: pointer;
  transition: background 0.1s;
}
.tag-ac-option:hover, .tag-ac-option.active {
  background: rgba(99,102,241,0.15); color: #fff;
}
.tag-ac-option:first-child { border-radius: 10px 10px 0 0; }
.tag-ac-option:last-child { border-radius: 0 0 10px 10px; }
.tag-ac-option:only-child { border-radius: 10px; }
.tag-ac-count {
  font-size: 10px; font-family: 'JetBrains Mono', monospace;
  color: #6b7280; margin-left: 8px; flex-shrink: 0;
}
@media (max-width: 767px) {
  .tag-ac-dropdown { max-height: 160px; }
  .tag-ac-option { padding: 10px 12px; font-size: 14px; }
}

/* ── Data Health Report ── */
.dh-bar {
  height: 6px; border-radius: 3px; background: #1f2937; overflow: hidden; width: 100%;
}
.dh-bar-fill {
  height: 100%; border-radius: 3px; transition: width 0.4s ease;
}
.dh-field-grid {
  display: flex; flex-direction: column;
}
.dh-field-row {
  display: flex; align-items: center; gap: 12px; padding: 10px 16px;
  border-bottom: 1px solid rgba(31,41,55,0.5);
}
.dh-field-row:last-child { border-bottom: none; }
.dh-field-label {
  width: 72px; flex-shrink: 0; font-size: 12px; color: #9ca3af; font-weight: 500;
}
.dh-field-bar-wrap { flex: 1; min-width: 0; }
.dh-field-pct {
  width: 40px; flex-shrink: 0; text-align: right; font-size: 12px; font-family: 'JetBrains Mono', monospace; font-weight: 600;
}
.dh-field-counts {
  width: 120px; flex-shrink: 0; text-align: right; font-size: 10px; font-family: 'JetBrains Mono', monospace;
}
@media (max-width: 767px) {
  .dh-field-row { flex-wrap: wrap; gap: 6px; padding: 10px 12px; }
  .dh-field-label { width: 60px; font-size: 11px; }
  .dh-field-bar-wrap { flex: 1; min-width: 60px; }
  .dh-field-pct { width: 36px; font-size: 11px; }
  .dh-field-counts { width: 100%; text-align: left; padding-left: 66px; font-size: 10px; margin-top: -2px; }
}

/* ── Feature flag switch ─────────────────────────────────────
   A real switch, sized for a thumb. auto_enrich spends money; it should take a deliberate
   press, and it should be obvious at a glance which way it is set. */
.flag-switch {
  position: relative; flex-shrink: 0;
  width: 52px; height: 32px; border-radius: 16px;
  background: #374151; border: 1px solid #4b5563;
  transition: background 0.18s ease, border-color 0.18s ease;
  cursor: pointer;
  /* The pill is 52x32, but the tappable box is padded out to 44px tall via the row. */
}
.flag-switch .flag-knob {
  position: absolute; top: 3px; left: 3px;
  width: 24px; height: 24px; border-radius: 50%;
  background: #9ca3af;
  transition: transform 0.18s ease, background 0.18s ease;
}
.flag-switch.on { background: #4f46e5; border-color: #6366f1; }
.flag-switch.on .flag-knob { transform: translateX(20px); background: #fff; }
.flag-switch:active .flag-knob { width: 28px; }
.flag-switch:focus-visible { outline: 2px solid #6366f1; outline-offset: 2px; }
.flag-row { min-height: 44px; }

/* ══════════════════════════════════════════════════════════════════════════════
   MOBILE: the thumb rules
   Everything below fixes something a phone actually hit. Apple's minimum tap target is
   44x44 and almost every control here was 25–30px tall — small enough that you aim.
   ══════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  /* Every control you can press is at least 44px tall. */
  .btn, .btn-sm,
  #section-verify button, #section-flags button, #section-contacts button,
  #section-entities button, #section-bots button, #section-changelog button,
  #section-settings button, #section-chat button,
  .vtab, .pag-btn {
    min-height: 44px;
  }
  /* Selects too — a 36px dropdown is a miss waiting to happen. */
  .section select { min-height: 44px; font-size: 16px; }
  /* Height alone is not enough: a 26px-wide ✕ is still a 26px-wide target. Icon-only
     buttons need the width as well. Buttons that are already wide are unaffected. */
  .section button, #slide-panel button, .modal-inner button { min-width: 44px; }
  /* Checkboxes ship at 13x13. You cannot reliably hit 13px with a thumb. The box itself
     stays a sane 22px — the tappable thing is the label wrapping it, so that is what gets
     the 44px. Blowing the box up to 44px instead would just look broken. */
  .section input[type="checkbox"]:not(.sr-only) {
    width: 22px; height: 22px; accent-color: #6366f1;
  }
  .section label:has(input[type="checkbox"]) { min-height: 44px; }
  /* 16px on inputs is not a style choice: iOS zooms the whole page in on anything smaller,
     and you then have to pinch back out to see the form you are filling in.

     Written as "every input except the ones that are not typed into" on purpose. The
     obvious spelling — input[type="text"] — silently misses <input name="name"> with no
     type attribute at all, which is exactly what the Add Contact form uses for the one
     field it requires. And it must not be scoped to .section: the modals and the slide
     panel live outside it, and those are the forms you actually type into. */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]),
  select, textarea {
    font-size: 16px;
  }
  /* Give those fields a real height too, now that we are here. */
  .modal-inner input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  .modal-inner textarea, .modal-inner button,
  #slide-panel input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  #slide-panel select, #slide-panel button {
    min-height: 44px;
  }

  /* Section headers: the title, its description and its buttons were fighting for one row,
     so the description wrapped to four lines and the buttons landed on top of it. */
  .section > .flex.items-center.justify-between {
    flex-direction: column; align-items: stretch !important; gap: 12px;
  }
  .section > .flex.items-center.justify-between > .flex.items-center.gap-2 { width: 100%; }
  .section > .flex.items-center.justify-between > .flex.items-center.gap-2 > button { flex: 1; justify-content: center; }

  /* Verification tabs ran off the right edge with no hint that they did. Let them scroll,
     and fade the edge so it is visible that there is more. */
  .vtab-strip {
    display: flex; gap: 6px; overflow-x: auto; scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
    margin: 0 -16px; padding: 0 16px 4px;
    -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 24px), transparent 100%);
            mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 24px), transparent 100%);
  }
  .vtab-strip::-webkit-scrollbar { display: none; }
  .vtab { scroll-snap-align: start; flex-shrink: 0; display: flex; align-items: center; }

  /* Settings rows: Save was printed straight on top of the threshold value. Stack them. */
  .ctx-controls { flex-direction: column; align-items: stretch !important; gap: 14px !important; }
  .ctx-controls > div { width: 100%; }
  .ctx-controls input[type="range"] { height: 28px; }   /* fat enough to actually drag */
  .ctx-save { width: 100%; }

  /* Desktop tables that do not fit a phone: let them scroll rather than clipping the last
     column off the edge, which is how "Can Delete" became invisible and unreachable. */
  #bots-table-wrap, #changelog-table-wrap, #flags-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  #bots-table-wrap table, #changelog-table-wrap table, #flags-table-wrap table { min-width: 560px; }

  /* Two search boxes stacked on top of each other — the global one and the section's own —
     ate the top third of the screen and did subtly different things. On the sections that
     bring their own search, the global bar stands down. */
  body.has-section-search .search-bar-wrap { display: none; }

  /* The unread badge sat directly on top of the word it was counting. */
  .bnav-badge { top: 2px; right: 50%; transform: translateX(18px); }
}

/* ── Belief, made visible ──────────────────────────────────────────────
   The original critique was exactly right: the claim graph is the product, and the UI was
   hiding it. The main surface showed flat facts with no signal about what was corroborated and
   what was a single stale guess — Nick Liuzza's phone is literally +1-234-567-8910, a
   placeholder, and it rendered with the same authority as a verified number.

   So belief is weight. Two independent sources agreeing LOOKS solid. One source, said once, a
   while ago, looks faint. You can tell them apart without reading a word, which is the only way
   anyone actually reads a screen. */
.nd-field { padding: 2px 0; }

.nd-field .de-value,
.nd-field .de-label { transition: opacity 0.15s ease, font-weight 0.15s ease; }

/* corroborated: more than one independent source agrees, and it hasn't gone stale */
.nd-solid .de-value { opacity: 1; font-weight: 600; color: #f3f4f6; }

/* single source, uncontradicted — true as far as anyone knows, and no further */
.nd-thin  .de-value { opacity: 0.82; font-weight: 400; }

/* one stale source, or nothing behind it at all. Present, but do not lean on it. */
.nd-faint .de-value { opacity: 0.5;  font-weight: 400; font-style: italic; }
.nd-faint .de-label { opacity: 0.6; }

.nd-why:empty { display: none; }
.nd-why { padding-bottom: 6px; }

/* ── Thumb-sized, in the drawer too ─────────────────────────────────────────
   The sidebar items were 36px and the Admin / Sign out row 32px. That is fine for a mouse and
   wrong for a thumb — 44px is the smallest thing a person can hit reliably without looking. */
@media (max-width: 767px) {
  #sidebar .nav-item,
  #sidebar #admin-toggle,
  #sidebar button { min-height: 44px; }
}