/* ── Reset & Vars ──────────────────────────────────────────────────────── */
:root {
  color-scheme: light;

  /* ── Surfaces ── */
  --bg: #ffffff;
  --surface: #f7f7f9;
  --surface2: #eeeef2;
  --border: #e4e4ea;
  --border-strong: #d5d5dc;

  /* ── Text ── */
  --text: #16161f;
  --text2: #5f5f72;
  --text3: #8a8a9c;      /* metadata, timestamps, step labels */

  /* ── Brand ── */
  --accent: #BF2020;
  --accent-bg: rgba(191, 32, 32, 0.07);
  --accent-light: #d42525;
  --accent-on: #ffffff;  /* text on accent; flips in dark mode */
  --green: #1a7f37;

  /* ── Radii ── */
  --radius: 12px;
  --radius-sm: 8px;
  --r-lg: 20px;          /* user bubble */
  --r-md: 14px;          /* cards */

  /* ── Chat typography ── */
  --msg-size: 15px;
  --msg-lh: 1.62;
  --meta-size: 12px;     /* floor for metadata — replaces 0.65rem/10.4px */

  /* ── Motion ── */
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --dur-fast: 120ms;
  --dur: 220ms;

  --safe-bottom: env(safe-area-inset-bottom, 16px);
}

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

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100dvh;
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
}

a { color: var(--accent); text-decoration: none; }
button { cursor: pointer; border: none; background: none; color: inherit; font-family: inherit; }
input, textarea { font-family: inherit; }

/* ── #app container ────────────────────────────────────────────────────── */
#app {
  max-width: 480px;
  margin: 0 auto;
  position: relative;
  min-height: 100dvh;
}

/* ── Header (.header div) ──────────────────────────────────────────────── */
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 100;
}

.header-logo {
  height: 32px;
  width: auto;
}

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

.icon-btn {
  width: 36px; height: 36px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem;
  background: var(--surface2);
  transition: background 0.15s;
}
.icon-btn:active { background: var(--accent-bg); }

/* ── Views ─────────────────────────────────────────────────────────────── */
.view { display: none; padding: 16px; position: relative; }
.view.active { display: block; }
/* Non-chat views need top padding for cover */
.view:not(.chat-view) { padding-top: calc(var(--cover-total-collapsed) + 16px); }

.view-title {
  font-size: 1.15rem; font-weight: 700;
  margin-bottom: 12px;
}

.back-btn {
  font-size: 0.85rem;
  color: var(--accent-light);
  font-weight: 600;
  margin-bottom: 10px;
  padding: 4px 0;
}

/* ── Greeting ──────────────────────────────────────────────────────────── */
.greeting { font-size: 1.1rem; font-weight: 700; }
.greeting-sub { font-size: 0.82rem; color: var(--text2); margin-bottom: 14px; }

/* ── Section Titles ────────────────────────────────────────────────────── */
.section-title {
  font-size: 0.78rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.8px; color: var(--text2);
  margin: 20px 0 10px; padding-left: 2px;
}

/* ── Buttons ───────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 10px 20px; border-radius: var(--radius-sm);
  font-size: 0.9rem; font-weight: 600;
  transition: opacity 0.15s, transform 0.1s;
}
.btn:active { transform: scale(0.97); opacity: 0.85; }
.btn-primary { background: var(--accent); color: #fff; }
.btn-secondary { background: var(--surface2); color: var(--text); border: 1px solid var(--border); }
.btn-sm { padding: 6px 12px; font-size: 0.8rem; }

/* ── Insight Cards ─────────────────────────────────────────────────────── */
#insight-container {
  display: flex; flex-direction: column; gap: 10px;
  padding: 8px 0;
}
.insight-card {
  background: linear-gradient(135deg, var(--surface) 0%, var(--surface2) 100%);
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 14px 16px; display: flex; gap: 10px; align-items: flex-start;
}
.insight-icon { font-size: 1.4rem; flex-shrink: 0; }
.insight-text { font-size: 0.88rem; line-height: 1.4; color: var(--text); }

/* ── Insights Progress Circle ──────────────────────────────────────────── */
.insights-progress-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 24px 16px;
}
.insights-progress-svg {
  display: block;
  transform: rotate(-90deg);
}
.insights-arc {
  stroke-dashoffset: 565.49;  /* full circumference = hidden */
  transition: stroke-dashoffset 1s ease-out;
}
.insights-progress-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  width: 130px;
  pointer-events: none;
}
.insights-progress-count {
  display: block;
  font-size: 1.4rem;
  font-weight: 800;
  color: #1a1a2e;
  margin-bottom: 4px;
}
.insights-progress-label {
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.35;
  color: #1a1a2e;
}

.insights-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 0;
  gap: 12px;
}
.insights-loading-text {
  font-size: 0.75rem;
  font-weight: 600;
  color: #C61919;
}

/* ── Mic / Recording ───────────────────────────────────────────────────── */
.mic-section { text-align: center; margin: 20px 0 10px; }
.mic-btn {
  width: 64px; height: 64px; border-radius: 50%;
  background: linear-gradient(145deg, var(--accent) 0%, #991818 100%);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.7rem; margin: 0 auto;
  box-shadow: 0 4px 16px rgba(191, 32, 32, 0.25);
  transition: transform 0.15s, box-shadow 0.15s;
}
.mic-btn:active { transform: scale(0.93); }
.mic-btn.recording {
  animation: pulse 1.4s infinite;
  box-shadow: 0 0 0 0 rgba(191, 32, 32, 0.4);
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0   rgba(191,32,32,0.4); }
  70%  { box-shadow: 0 0 0 18px rgba(191,32,32,0);   }
  100% { box-shadow: 0 0 0 0   rgba(191,32,32,0);   }
}
.mic-label { font-size: 0.75rem; color: var(--text2); margin-top: 6px; }

/* ── Text Input ────────────────────────────────────────────────────────── */
.text-input-section { margin-bottom: 16px; }
.text-input-row {
  display: flex; gap: 8px; align-items: flex-end;
}
.text-input {
  flex: 1;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 10px 14px;
  color: var(--text); font-size: 0.9rem; outline: none;
  resize: vertical; min-height: 72px;
  transition: border-color 0.15s;
}
.text-input:focus { border-color: var(--accent); }
.text-input::placeholder { color: var(--text2); }

.send-btn {
  width: 38px; height: 38px; flex-shrink: 0;
  border-radius: 50%;
  background: var(--accent);
  color: #fff; font-size: 1rem;
  display: flex; align-items: center; justify-content: center;
  transition: opacity 0.15s;
}
.send-btn:active { opacity: 0.8; }

/* ── Draft Tiles ───────────────────────────────────────────────────────── */
#draft-tiles-container { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.draft-tile {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 10px 12px;
}
.draft-tile-label {
  font-size: 0.7rem; font-weight: 600; text-transform: uppercase;
  color: var(--accent); letter-spacing: 0.04em; margin-bottom: 4px;
}
.draft-tile-text {
  font-size: 0.85rem; color: var(--text2); line-height: 1.4;
  white-space: pre-wrap; word-break: break-word; margin-bottom: 8px;
}
.draft-tile-actions { display: flex; gap: 8px; justify-content: flex-end; align-items: center; }
.draft-tile-send {
  background: var(--accent); color: #fff; border: none;
  border-radius: 16px; padding: 5px 14px; font-size: 0.78rem;
  font-weight: 600; cursor: pointer;
}
.draft-tile-send:active { opacity: 0.8; }
.draft-tile-edit, .draft-tile-dismiss {
  background: none; border: none; color: var(--text2);
  font-size: 1rem; cursor: pointer; padding: 4px;
}
.draft-tile-edit:hover, .draft-tile-dismiss:hover { color: var(--text); }

/* ── Ask Section ───────────────────────────────────────────────────────── */
.ask-section { margin-top: 16px; }
.ask-input-row { display: flex; gap: 8px; }
.ask-input {
  flex: 1;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 10px 14px;
  color: var(--text); font-size: 0.9rem; outline: none;
  min-height: 72px;
}
.ask-input:focus { border-color: var(--accent); }
.ask-input::placeholder { color: var(--text2); transition: opacity 0.3s ease; }
.ask-input.placeholder-fade::placeholder { opacity: 0; }
.ask-answer {
  margin-top: 10px; padding: 14px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); font-size: 0.9rem;
  line-height: 1.5; display: none; color: var(--text);
}
.ask-answer.visible { display: block; }

/* ── People Cards ──────────────────────────────────────────────────────── */
.people-list { /* container */ }
.person-card {
  position: relative;
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius);
  margin-bottom: 8px; cursor: pointer;
  transition: background 0.12s;
}
.person-card:active { background: var(--surface2); }
.person-processing-dot {
  position: absolute; top: 6px; right: 6px;
  width: 9px; height: 9px; border-radius: 50%;
  background: #C61919;
  animation: pulseDot 1.1s ease-in-out infinite;
  pointer-events: none; z-index: 1;
}
.person-avatar {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--accent-bg); color: var(--accent-light);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.85rem; font-weight: 700; flex-shrink: 0;
}
.person-info { flex: 1; min-width: 0; }
.person-name {
  font-size: 0.95rem; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  display: flex; align-items: center; gap: 6px;
}
.person-meta {
  font-size: 0.78rem; color: var(--text2); margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.person-count { font-size: 0.75rem; color: var(--text2); flex-shrink: 0; }
.unverified-dot { width: 7px; height: 7px; border-radius: 50%; background: #f59e0b; flex-shrink: 0; }

/* Closeness bar on cards */
.closeness-bar { width: 100%; height: 3px; background: var(--border); border-radius: 2px; margin-top: 4px; overflow: hidden; }
.closeness-fill { height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-light)); border-radius: 2px; transition: width 0.3s; }

/* ── Multi-select mode ────────────────────────────────────────────────── */
.person-card.selected {
  background: rgba(198, 25, 25, 0.08);
  border-color: #C61919;
}
.person-card.selected .person-avatar {
  background: #C61919;
  color: #fff;
  font-size: 1rem;
}
.cover-delete-fab {
  position: sticky;
  bottom: 8px;
  float: right;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #C61919;
  color: #fff;
  border: none;
  box-shadow: 0 3px 12px rgba(198,25,25,0.4);
  cursor: pointer;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 12px;
}
.cover-delete-fab:active {
  background: #a01515;
  transform: scale(0.92);
}
.cover-delete-fab-count {
  position: absolute;
  top: -4px;
  right: -4px;
  background: #fff;
  color: #C61919;
  font-size: 0.7rem;
  font-weight: 700;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

/* ── Circle Filter Chips ───────────────────────────────────────────────── */
.circle-filter, #circle-filter { display: flex; gap: 8px; overflow-x: auto; padding: 4px 0 12px; }
.filter-chip {
  flex-shrink: 0; padding: 6px 14px;
  border: 1px solid var(--border); border-radius: 20px;
  font-size: 0.78rem; font-weight: 600;
  background: var(--surface); color: var(--text2);
  transition: all 0.15s;
}
.filter-chip.active { background: var(--accent-bg); border-color: var(--accent); color: var(--accent-light); }
.filter-chip:active { transform: scale(0.96); }
.sort-btn {
  flex-shrink: 0; width: 30px; height: 30px;
  border: 1px solid var(--border); border-radius: 50%;
  background: var(--surface); color: var(--text2);
  font-size: 16px; display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all 0.15s; position: sticky; right: 0;
}
.sort-btn.active { border-color: var(--accent); color: var(--accent-light); background: var(--accent-bg); }
.sort-btn:active { transform: scale(0.94); }

/* Sort Dropdown */
.sort-overlay {
  position: fixed; inset: 0; z-index: 149;
  background: transparent; display: none;
}
.sort-overlay.visible { display: block; }
.sort-menu {
  position: fixed;
  width: 220px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 8px 32px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.08);
  z-index: 150;
  padding: 6px 0;
  display: none;
  animation: settingsSlideIn 0.15s ease-out;
}
.sort-menu.visible { display: block; }
.sort-menu-title {
  padding: 8px 16px 4px;
  font-size: 0.72rem; font-weight: 700; color: var(--text2);
  text-transform: uppercase; letter-spacing: 0.5px;
}
.sort-option {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; padding: 10px 16px;
  font-size: 0.85rem; font-weight: 500;
  color: var(--text); text-align: left;
  border: none; background: none; cursor: pointer;
  transition: background 0.12s;
}
.sort-option:active { background: var(--accent-bg); }
.sort-option.active { color: var(--accent-light); background: var(--accent-bg); }
.sort-dir-icon { font-size: 14px; color: var(--text2); }

/* ── Profile ───────────────────────────────────────────────────────────── */
.profile-header { text-align: center; padding: 16px 0; }
.profile-avatar {
  width: 64px; height: 64px; border-radius: 50%; margin: 0 auto 10px;
  background: var(--accent-bg); color: var(--accent-light);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem; font-weight: 700;
}
.profile-name { font-size: 1.3rem; font-weight: 700; }
.profile-name-row {
  display: flex; align-items: center; justify-content: center; gap: 8px;
}
.profile-action-btn {
  background: none; border: none; cursor: pointer; font-size: 1rem;
  color: var(--text2); padding: 4px 6px; border-radius: var(--radius-sm);
  transition: background 0.12s, color 0.12s;
}
.profile-action-btn:hover { background: var(--surface2); color: var(--text); }
.profile-header-actions { margin-top: 10px; }
.btn-danger {
  background: #dc2626; color: #fff; border: none;
}
.btn-danger:hover { background: #b91c1c; }
.conflict-badge { margin-top: 6px; font-size: 0.78rem; color: #f59e0b; }

/* Profile field badges */
.profile-badges { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 16px; align-items: center; }
.field-badge {
  display: inline-flex; flex-direction: column;
  padding: 8px 12px; border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: var(--surface);
  cursor: pointer; min-width: 80px; transition: background 0.12s;
}
.field-badge:active { background: var(--surface2); }
.field-badge-label { font-size: 0.65rem; text-transform: uppercase; color: var(--text2); letter-spacing: 0.5px; }
.field-badge-value { font-size: 0.85rem; font-weight: 600; margin-top: 2px; }
.field-badge-check { font-size: 0.75rem; color: var(--green); }
.field-badge-action { font-size: 0.7rem; color: #f59e0b; font-weight: 600; }
.field-badge.unverified { border-color: rgba(245, 158, 11, 0.3); }
.field-badge .add-hint { color: var(--accent-light); font-size: 0.82rem; }

/* Closeness indicator (profile) */
.closeness-section { margin: 12px 0 16px; }
.closeness-control {
  display: flex; flex-direction: row; flex-wrap: nowrap;
  align-items: center; gap: 8px; padding: 10px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); justify-content: center;
}
.closeness-btn {
  width: 32px; height: 32px; min-width: 32px; border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--bg); color: var(--text); font-size: 1.2rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; user-select: none; -webkit-user-select: none;
  transition: background 0.15s, border-color 0.15s;
  line-height: 1; padding: 0; flex-shrink: 0;
}
.closeness-btn:active { background: var(--accent); color: #fff; border-color: var(--accent); }
.closeness-dots {
  display: flex; gap: 4px; align-items: center; flex-shrink: 1; min-width: 0;
}
.closeness-dot {
  width: 16px; height: 16px; min-width: 10px; border-radius: 50%;
  background: var(--border); transition: all 0.2s; flex-shrink: 1;
  aspect-ratio: 1;
}
.closeness-dot.filled {
  background: linear-gradient(135deg, var(--accent), var(--accent-light));
  box-shadow: 0 0 6px rgba(191, 32, 32, 0.3);
}

/* Closeness widget in chat feed */
.closeness-widget-chat {
  margin: 6px 0 2px;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.closeness-widget-name {
  font-size: 0.78rem; font-weight: 700; color: var(--text2);
  text-align: center; letter-spacing: 0.02em; text-transform: uppercase;
}
.closeness-widget-link {
  font-size: 0.75rem; color: var(--accent); cursor: pointer; text-align: center;
  opacity: 0.8; margin-top: 2px;
}
.closeness-widget-link:hover { opacity: 1; text-decoration: underline; }

/* Profile stats */
.profile-stats { display: flex; gap: 16px; justify-content: center; margin-bottom: 16px; }
.profile-stat { text-align: center; }
.profile-stat-value { font-size: 1.2rem; font-weight: 700; }
.profile-stat-label { font-size: 0.7rem; color: var(--text2); text-transform: uppercase; letter-spacing: 0.5px; }

.profile-summary {
  padding: 14px 16px; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius);
  font-size: 0.9rem; line-height: 1.5; margin-bottom: 12px;
}

/* Org cards */
.org-card {
  padding: 10px 14px; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  margin-bottom: 6px;
}
.org-name { font-weight: 600; font-size: 0.9rem; }
.org-role { font-size: 0.8rem; color: var(--text2); margin-top: 2px; }

/* Relationship cards */
.rel-card {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 14px; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  margin-bottom: 6px; cursor: pointer;
}
.rel-card:active { background: var(--surface2); }
.rel-name { font-weight: 600; font-size: 0.9rem; }
.rel-type { font-size: 0.78rem; color: var(--text2); }

/* Circle tags */
.profile-circles { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 12px; }
.circle-tag {
  padding: 5px 12px; border-radius: 16px;
  background: var(--accent-bg); border: 1px solid rgba(191, 32, 32, 0.25);
  font-size: 0.78rem; font-weight: 600; color: var(--accent-light);
  cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
  transition: background 0.15s;
}
.circle-tag:active { background: rgba(191, 32, 32, 0.15); }
.circle-tag-remove {
  font-size: 0.65rem; opacity: 0.5; cursor: pointer;
  padding: 0 2px; line-height: 1;
}
.circle-tag-remove:hover { opacity: 1; }

/* Circle add button (red + in profile) */
.circle-add-btn {
  width: 32px; height: 32px; border-radius: 50%;
  background: #C61919; color: #fff; border: none;
  font-size: 1.2rem; font-weight: 700; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0;
  transition: background 0.15s, transform 0.1s;
}
.circle-add-btn:active { background: #a01414; transform: scale(0.93); }

/* Circle cards (list page) */
.circle-card {
  display: flex; align-items: center; gap: 8px;
  padding: 0; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius);
  margin-bottom: 8px; overflow: hidden;
}
.circle-card-main {
  flex: 1; padding: 14px 16px; cursor: pointer;
  min-width: 0;
}
.circle-card-main:active { background: var(--surface2); }
.circle-name { font-weight: 600; font-size: 0.95rem; }
.circle-meta { font-size: 0.78rem; color: var(--text2); margin-top: 2px; }
.circle-delete-btn {
  background: none; border: none; padding: 14px 14px;
  font-size: 1rem; cursor: pointer; opacity: 0.4;
  flex-shrink: 0;
}
.circle-delete-btn:hover { opacity: 0.8; }
.create-circle-btn { width: 100%; margin-top: 8px; }

/* Circle detail page */
.circle-detail-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 12px;
}
.circle-detail-name {
  font-size: 1.4rem; font-weight: 700; color: var(--text);
}
.circle-detail-desc-section { margin-bottom: 16px; }
.circle-detail-desc {
  padding: 12px 14px; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  font-size: 0.9rem; line-height: 1.5; min-height: 40px;
}

/* Circle popup (add person to circle) */
.circle-popup-new {
  margin-bottom: 12px;
}
.circle-popup-new-row {
  display: flex; gap: 8px; align-items: center;
}
.circle-popup-input {
  flex: 1; min-width: 0;
}
.circle-popup-check {
  width: 36px; height: 36px; border-radius: 50%;
  background: #C61919; color: #fff; border: none;
  font-size: 1.1rem; font-weight: 700; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0;
  transition: background 0.15s;
}
.circle-popup-check:active { background: #a01414; }
.circle-popup-list {
  max-height: 240px; overflow-y: auto;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  margin-bottom: 12px;
}
.circle-popup-item {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 14px; cursor: pointer;
  border-bottom: 1px solid var(--border);
  transition: background 0.1s;
}
.circle-popup-item:last-child { border-bottom: none; }
.circle-popup-item:active { background: var(--accent-bg); }
.circle-popup-name { font-weight: 600; font-size: 0.9rem; }
.circle-popup-count { font-size: 0.75rem; color: var(--text2); }

/* Goodwill */
.goodwill-balance { font-weight: 400; font-size: 0.7rem; color: var(--text2); }
.goodwill-card {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  margin-bottom: 6px;
}
.goodwill-dir { font-size: 1rem; width: 24px; text-align: center; }
.goodwill-dir.given { color: var(--accent-light); }
.goodwill-dir.received { color: var(--green); }
.goodwill-desc { flex: 1; font-size: 0.85rem; }
.goodwill-recip { cursor: pointer; font-size: 1rem; padding: 4px; }

/* Reminder cards */
.reminders-list { /* container */ }
.reminder-card {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 14px; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  margin-bottom: 6px;
}
.reminder-card.completed { opacity: 0.5; }
.reminder-check { font-size: 1.2rem; cursor: pointer; flex-shrink: 0; padding: 2px; }
.reminder-body { flex: 1; }
.reminder-text { font-size: 0.88rem; }
.reminder-meta { font-size: 0.75rem; color: var(--text2); margin-top: 2px; }
.reminder-due { font-size: 0.72rem; color: var(--accent-light); margin-left: 6px; }

/* Interaction timeline */
.interaction-card {
  padding: 12px 14px; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius);
  margin-bottom: 8px; position: relative;
}
.interaction-header {
  display: flex; justify-content: space-between; align-items: flex-start;
  margin-bottom: 6px;
}
.interaction-meta { font-size: 0.75rem; color: var(--text2); flex: 1; }
.interaction-actions {
  display: flex; gap: 4px; opacity: 0; transition: opacity 0.2s;
  margin-left: 8px; flex-shrink: 0;
}
.interaction-card:hover .interaction-actions,
.interaction-card:focus-within .interaction-actions { opacity: 1; }
@media (hover: none) {
  /* On touch devices, always show edit/delete buttons */
  .interaction-actions { opacity: 0.6; }
  .interaction-card:active .interaction-actions { opacity: 1; }
}
.ix-action-btn {
  background: none; border: 1px solid var(--border); border-radius: 4px;
  color: var(--text2); font-size: 0.75rem; width: 26px; height: 26px;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: all 0.15s;
}
.ix-action-btn:hover { background: var(--bg); color: var(--text); border-color: var(--text2); }
.ix-delete-btn:hover { color: #e74c3c; border-color: #e74c3c; }
.interaction-transcript { font-size: 0.88rem; line-height: 1.5; }

/* Dossier sections in profile */
.dossier-section { margin-bottom: 12px; }
.dossier-content { font-size: 0.88rem; line-height: 1.5; color: var(--text2); white-space: pre-wrap; }

/* Interaction inline edit */
.ix-edit-area { margin-top: 8px; }
.ix-edit-textarea {
  width: 100%; min-height: 72px; padding: 10px 12px;
  font-size: 0.88rem; line-height: 1.5;
  background: var(--bg); color: var(--text);
  border: 1px solid var(--accent); border-radius: var(--radius);
  resize: vertical; font-family: inherit;
}
.ix-edit-textarea:focus { outline: none; border-color: var(--accent-light); }
.ix-edit-actions {
  display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px;
}

/* ── Circles View ── (styles defined above with circle-card, etc.) ──── */

/* ── Graph View ────────────────────────────────────────────────────────── */
#graph-canvas {
  width: 100%; border-radius: var(--radius);
  background: var(--surface); border: 1px solid var(--border);
}

/* ── Enrichment Panel ──────────────────────────────────────────────────── */
.enrichment-list { /* container */ }
.enrichment-card {
  padding: 12px 14px; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  margin-bottom: 8px;
}
.enrichment-text { font-size: 0.88rem; margin-bottom: 8px; line-height: 1.4; }
.enrichment-actions { display: flex; gap: 8px; }

/* ── Modals ─────────────────────────────────────────────────────────────── */
.modal-overlay {
  position: fixed; inset: 0; z-index: 600;
  background: rgba(0, 0, 0, 0.35); backdrop-filter: blur(4px);
  display: none; align-items: center; justify-content: center;
}
.modal-overlay.visible { display: flex; }

/* .modal is the inner card within modal-overlay */
.modal {
  width: 90%; max-width: 420px; max-height: 85dvh;
  background: var(--surface);
  border-radius: var(--radius);
  padding: 24px 20px;
  overflow-y: auto;
  animation: fadeIn 0.2s ease-out;
}
@keyframes fadeIn { from { transform: scale(0.95); opacity: 0; } to { transform: scale(1); opacity: 1; } }

.modal-title { font-size: 1.05rem; font-weight: 700; margin-bottom: 14px; text-align: center; }
.modal-subtitle { font-size: 0.85rem; color: var(--text2); margin-bottom: 12px; text-align: center; }
.modal-person-name { font-size: 1.15rem; font-weight: 700; text-align: center; margin-bottom: 6px; }
.modal-person-meta { font-size: 0.82rem; color: var(--text2); text-align: center; margin-bottom: 4px; }
.modal-last-seen { font-size: 0.78rem; color: var(--text2); text-align: center; margin-bottom: 16px; }
.modal-actions { display: flex; gap: 10px; justify-content: center; margin-top: 16px; flex-wrap: wrap; }

/* Confirm counter & nav */
.confirm-counter { font-size: 0.82rem; color: var(--text2); font-weight: 600; text-align: center; margin-bottom: 10px; }
.confirm-nav { display: flex; gap: 8px; justify-content: center; margin-top: 12px; }

/* Candidate cards */
.candidate-list { margin-top: 8px; }
.candidate-card {
  padding: 12px 14px; background: var(--surface2);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  margin-bottom: 6px; cursor: pointer; transition: background 0.12s;
}
.candidate-card:active { background: var(--accent-bg); }
.candidate-name { font-weight: 600; font-size: 0.9rem; }
.candidate-meta { font-size: 0.78rem; color: var(--text2); margin-top: 2px; }
.new-person-card { border-style: dashed; border-color: var(--accent); }

/* Pulsating dot (replaces all spinners) */
@keyframes pulseDot {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%       { transform: scale(1.5); opacity: 0.55; }
}
.pulse-dot {
  width: 14px; height: 14px; border-radius: 50%;
  background: #C61919;
  animation: pulseDot 1.1s ease-in-out infinite;
  flex-shrink: 0; display: inline-block;
}
.pulse-dot-sm {
  width: 9px; height: 9px;
}
@keyframes spin { to { transform: rotate(360deg); } }
#processing-message { font-size: 0.9rem; color: var(--text2); text-align: center; }

/* Input modal fields */
.field-edit-input {
  width: 100%; padding: 10px 14px; margin-bottom: 10px;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius-sm); color: var(--text);
  font-size: 0.9rem; outline: none;
  min-height: 72px;
}
input.field-edit-input { min-height: unset; }
input[type="date"].field-edit-input { min-height: unset; }
.field-edit-input:focus { border-color: var(--accent); }
.field-edit-input::placeholder { color: var(--text2); }

/* ── Phone field action buttons (Call & WhatsApp) ──────────────────────── */
.field-display-value {
  font-size: 1.2rem; font-weight: 600; text-align: center;
  padding: 12px 0 8px; color: var(--text-primary);
  word-break: break-all;
}
.field-edit-phone-actions {
  display: flex; gap: 8px; margin-bottom: 12px;
}
.field-phone-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 16px; border-radius: var(--radius-sm);
  font-size: 0.85rem; font-weight: 600;
  text-decoration: none; cursor: pointer;
  transition: opacity 0.15s;
}
.field-phone-btn:hover { opacity: 0.85; }
.field-phone-btn.call-btn {
  background: rgba(46, 160, 67, 0.12); color: #2ea043; border: 1px solid rgba(46, 160, 67, 0.25);
}
.field-phone-btn.wa-btn {
  background: rgba(37, 211, 102, 0.12); color: #25d366; border: 1px solid rgba(37, 211, 102, 0.25);
}
.field-phone-btn.email-btn {
  background: rgba(59, 130, 246, 0.12); color: #3b82f6; border: 1px solid rgba(59, 130, 246, 0.25);
}
.phone-btn-icon { font-size: 1rem; }
.profile-contact-actions {
  display: flex; gap: 8px; justify-content: center; flex-wrap: wrap;
  padding: 8px 0 4px;
}

.direction-toggle { display: flex; gap: 8px; justify-content: center; margin-bottom: 12px; }

/* ── Toast ─────────────────────────────────────────────────────────────── */
.toast {
  position: fixed; bottom: 30px; left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: 20px; padding: 10px 20px;
  font-size: 0.85rem; font-weight: 600;
  opacity: 0; z-index: 300;
  transition: opacity 0.25s, transform 0.25s;
  pointer-events: none;
}
.toast.visible { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ── Fullscreen Button ────────────────────────────────────────────────── */
.fullscreen-btn {
  position: fixed; bottom: 8px; right: 12px;
  font-size: 1.2rem; color: var(--text2);
  z-index: 50; opacity: 0.4;
}
.fullscreen-btn:active { opacity: 0.8; }
.is-native .fullscreen-btn { display: none; }
.is-native .auth-otp-section { display: none; }
.is-native body, .is-native html { overscroll-behavior: none; }

/* ── iOS safe areas & platform gating ────────────────────────────────── */
.is-ios { padding-top: env(safe-area-inset-top); }
.is-ios .cover-drawer { padding-bottom: env(safe-area-inset-bottom); }
.is-ios .chat-input-row { padding-bottom: env(safe-area-inset-bottom); }
/* TODO: Apple Sign-In button (Phase 7 — iOS auth) */
/* TODO: Payment UI gating — Apple policy prohibits in-app web payments on iOS */

/* ── My Profile ────────────────────────────────────────────────────────── */
.myprofile-bio {
  font-size: 0.88rem; color: var(--text2); margin-top: 6px;
  line-height: 1.5; text-align: center; max-width: 320px; margin-left: auto; margin-right: auto;
}
.myprofile-bio.hint { color: var(--accent-light); cursor: pointer; font-style: italic; font-size: 0.82rem; }
.myprofile-stats-section { margin-top: 16px; }
.myprofile-action-row { display: flex; gap: 10px; margin-top: 24px; padding-bottom: 32px; }
.myprofile-action-row .myprofile-action-btn { flex: 1; }

/* ── Memory section ────────────────────────────────────────────────────── */
.myprofile-memory-section { margin: 4px 0 16px; }
.memory-loading, .memory-empty { font-size: 0.84rem; color: var(--text2); padding: 8px 0; font-style: italic; }
.memory-group { margin-bottom: 14px; }
.memory-group-label { font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text2); margin-bottom: 6px; }
.memory-item { font-size: 0.88rem; color: var(--text1); line-height: 1.5; padding: 5px 0; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.memory-item:last-child { border-bottom: none; }
.memory-item-label { font-weight: 600; color: var(--text2); flex-shrink: 0; }
.memory-item.editable { cursor: pointer; }
.memory-edit-hint { font-size: 0.75rem; color: var(--accent); margin-left: auto; flex-shrink: 0; }
.memory-badge { font-size: 0.68rem; padding: 2px 6px; border-radius: 10px; font-weight: 600; flex-shrink: 0; }
.memory-badge.confirmed { background: rgba(76,175,80,0.15); color: #388e3c; }
.memory-badge.inferred { background: rgba(255,152,0,0.15); color: #e65100; }

/* ── Empty state ───────────────────────────────────────────────────────── */
.empty-state { text-align: center; padding: 40px 20px; color: var(--text2); }
.empty-state-icon { font-size: 2.5rem; margin-bottom: 10px; }

/* ── Scrollbar ─────────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

/* ── Inline Ingestion Tooltip ───────────────────────────────────────── */
.ingestion-tooltip {
  display: none;
  align-items: center;
  gap: 10px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 16px;
  margin-bottom: 12px;
  animation: fadeIn 0.25s ease-out;
}
.ingestion-tooltip.visible {
  display: flex;
}
.tooltip-spinner {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #C61919;
  animation: pulseDot 1.1s ease-in-out infinite;
  flex-shrink: 0;
}
.tooltip-text {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
}
.tooltip-retry {
  display: none;
  font-size: 0.78rem;
  color: var(--accent-light);
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
  margin-left: 4px;
}
.tooltip-retry:active { opacity: 0.7; }

/* ── Extraction Drawer ─────────────────────────────────────────────────── */
.extraction-drawer {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%) translateY(100%);
  width: 100%;
  max-width: 480px;
  background: var(--surface);
  border-top: 1px solid var(--border);
  border-radius: var(--radius) var(--radius) 0 0;
  z-index: 200;
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.12);
  padding: 16px 16px calc(16px + var(--safe-bottom));
}
.extraction-drawer.visible {
  transform: translateX(-50%) translateY(0);
}
.drawer-handle {
  width: 36px;
  height: 4px;
  background: var(--border);
  border-radius: 2px;
  margin: 0 auto 12px;
}
.drawer-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.drawer-title {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text);
}
.drawer-close {
  font-size: 1.2rem;
  color: var(--text2);
  cursor: pointer;
  padding: 4px 8px;
}
.drawer-close:active { opacity: 0.6; }

/* Drawer card container — swipeable */
.drawer-card-wrapper {
  overflow: hidden;
  touch-action: pan-x;
  user-select: none;
  -webkit-user-select: none;
}
.drawer-card {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  transition: transform 0.15s ease-out, opacity 0.15s;
  will-change: transform, opacity;
}
.drawer-card-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
}
.drawer-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--accent-bg);
  color: var(--accent-light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  font-weight: 700;
}
.drawer-name {
  font-size: 1.1rem;
  font-weight: 700;
  text-align: center;
}
.drawer-status-label {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--green);
  background: rgba(46, 160, 67, 0.12);
  padding: 2px 10px;
  border-radius: 10px;
}
.drawer-meta {
  text-align: center;
  font-size: 0.85rem;
  color: var(--text2);
  margin-bottom: 8px;
}
.drawer-contact-info {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-bottom: 8px;
}
.drawer-contact-item {
  font-size: 0.82rem;
  color: var(--text);
  background: var(--bg);
  padding: 4px 10px;
  border-radius: 12px;
  border: 1px solid var(--border);
}
.drawer-relation {
  text-align: center;
  font-size: 0.82rem;
  color: var(--text2);
  font-style: italic;
  margin-bottom: 8px;
}
.drawer-actions {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-top: 12px;
}

/* Pagination dots */
.drawer-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 12px;
}
.drawer-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--border);
  transition: background 0.2s, transform 0.2s;
}
.drawer-dot.active {
  background: var(--accent);
  transform: scale(1.3);
}

/* ── Structured Summary ────────────────────────────────────────────────── */
.structured-summary {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 12px;
}
.summary-category { margin-bottom: 10px; }
.summary-category:last-child { margin-bottom: 0; }
.summary-category-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--accent-light);
  margin-bottom: 4px;
}
.summary-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.summary-list li {
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--text);
  padding: 2px 0 2px 14px;
  position: relative;
}
.summary-list li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: var(--text2);
}
.summary-text {
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--text);
  padding: 2px 0;
}

/* ── Auth Screen ────────────────────────────────────────────────────────── */
.auth-screen {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100dvh;
  background: var(--bg);
  padding: 24px 16px;
}

.auth-container {
  max-width: 380px;
  width: 100%;
  text-align: center;
}

.auth-logo-wrap {
  position: relative;
  display: inline-block;
  margin-bottom: 16px;
}

.auth-logo {
  height: 72px;
  width: auto;
}

.auth-beta {
  position: absolute;
  top: -2px;
  right: -38px;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 1.5px;
  pointer-events: none;
}

.auth-title {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 4px;
}

.auth-subtitle {
  font-size: 0.95rem;
  color: var(--text2);
  margin-bottom: 32px;
}

.auth-options {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.auth-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 14px 16px;
  border-radius: var(--radius);
  font-size: 0.95rem;
  font-weight: 600;
  transition: background 0.15s, transform 0.1s;
}

.auth-btn:active { transform: scale(0.98); }

.auth-btn-google {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
}
.auth-btn-google:hover { background: var(--surface2); }


.auth-btn-icon {
  font-size: 1.1rem;
  font-weight: 700;
}

.auth-btn-icon-img {
  width: 20px;
  height: 20px;
  object-fit: contain;
}



.auth-btn-otp {
  background: var(--accent);
  color: #fff;
}
.auth-btn-otp:hover { background: var(--accent-light); }

.auth-btn-verify {
  background: var(--accent);
  color: #fff;
}

.auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 4px 0;
  color: var(--text2);
  font-size: 0.85rem;
}
.auth-divider::before, .auth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}

.auth-otp-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.auth-input {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 0.95rem;
  background: var(--surface);
  color: var(--text);
  outline: none;
  transition: border-color 0.2s;
}
.auth-input:focus { border-color: var(--accent); }

.auth-otp-input {
  text-align: center;
  font-size: 1.5rem;
  letter-spacing: 0.3em;
  font-weight: 700;
}

.auth-verify {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
}

.auth-verify-text {
  font-size: 0.95rem;
  color: var(--text2);
}

.auth-link {
  font-size: 0.9rem;
  color: var(--accent);
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
}

.auth-error {
  margin-top: 16px;
  padding: 10px 14px;
  background: rgba(191, 32, 32, 0.08);
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  color: var(--accent);
  font-size: 0.85rem;
}

/* ── Loading Screen (Network Animation) ─────────────────────────────────── */
.loading-screen {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--bg, #fff);
}

.loading-text {
  margin-top: 24px;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text2, #666);
  letter-spacing: 0.02em;
}

/* SVG nodes & lines */
.net-node {
  fill: #C61919;
  opacity: 0;
}
.net-line {
  stroke: #C61919;
  stroke-width: 2;
  stroke-dasharray: 4 4;
  stroke-linecap: round;
  opacity: 0;
}

/*
 * Full looping cycle (3.5s total):
 *   0–0.8s  nodes appear staggered, lines draw
 *   0.8–2.5s  hold visible
 *   2.5–3.2s  fade everything out
 *   3.2–3.5s  stay invisible (gap before restart)
 */

/* Node: appear at its delay%, hold, fade out, stay hidden */
@keyframes nodeLoop1 { 0%{opacity:0;r:0} 3%{opacity:1;r:10} 6%{opacity:1;r:8} 71%{opacity:1;r:8} 86%{opacity:0;r:0} 100%{opacity:0;r:0} }
@keyframes nodeLoop2 { 0%{opacity:0;r:0} 14%{opacity:0;r:0} 17%{opacity:1;r:10} 20%{opacity:1;r:8} 71%{opacity:1;r:8} 86%{opacity:0;r:0} 100%{opacity:0;r:0} }
@keyframes nodeLoop3 { 0%{opacity:0;r:0} 29%{opacity:0;r:0} 32%{opacity:1;r:10} 34%{opacity:1;r:8} 71%{opacity:1;r:8} 86%{opacity:0;r:0} 100%{opacity:0;r:0} }
@keyframes nodeLoop4 { 0%{opacity:0;r:0} 51%{opacity:0;r:0} 54%{opacity:1;r:10} 57%{opacity:1;r:8} 71%{opacity:1;r:8} 86%{opacity:0;r:0} 100%{opacity:0;r:0} }

/* Line: draw at its delay%, hold, fade out, stay hidden */
@keyframes lineLoop1 { 0%{stroke-dashoffset:60;opacity:0} 6%{stroke-dashoffset:60;opacity:0} 8%{opacity:1} 17%{stroke-dashoffset:0;opacity:1} 71%{opacity:1} 86%{opacity:0} 100%{opacity:0;stroke-dashoffset:60} }
@keyframes lineLoop2 { 0%{stroke-dashoffset:60;opacity:0} 17%{stroke-dashoffset:60;opacity:0} 19%{opacity:1} 29%{stroke-dashoffset:0;opacity:1} 71%{opacity:1} 86%{opacity:0} 100%{opacity:0;stroke-dashoffset:60} }
@keyframes lineLoop3 { 0%{stroke-dashoffset:60;opacity:0} 37%{stroke-dashoffset:60;opacity:0} 40%{opacity:1} 51%{stroke-dashoffset:0;opacity:1} 71%{opacity:1} 86%{opacity:0} 100%{opacity:0;stroke-dashoffset:60} }

/* Staggered node loops — 3.5s cycle */
.net-node-1 { animation: nodeLoop1 3.5s ease-in-out infinite; }
.net-node-2 { animation: nodeLoop2 3.5s ease-in-out infinite; }
.net-node-3 { animation: nodeLoop3 3.5s ease-in-out infinite; }
.net-node-4 { animation: nodeLoop3 3.5s ease-in-out infinite; }
.net-node-5 { animation: nodeLoop4 3.5s ease-in-out infinite; }
.net-node-6 { animation: nodeLoop4 3.5s ease-in-out infinite; }
.net-node-7 { animation: nodeLoop4 3.5s ease-in-out infinite; }

/* Staggered line loops — 3.5s cycle */
.net-line-1 { animation: lineLoop1 3.5s ease-in-out infinite; }
.net-line-2 { animation: lineLoop2 3.5s ease-in-out infinite; }
.net-line-3 { animation: lineLoop2 3.5s ease-in-out infinite; }
.net-line-4 { animation: lineLoop3 3.5s ease-in-out infinite; }
.net-line-5 { animation: lineLoop3 3.5s ease-in-out infinite; }
.net-line-6 { animation: lineLoop3 3.5s ease-in-out infinite; }

/* Fade-out when loading done */
.loading-screen.fade-out {
  animation: fadeOut 0.4s ease-out forwards;
}
.view-loading-overlay.fade-out {
  animation: fadeOut 0.3s ease-out forwards;
}
@keyframes fadeOut {
  to { opacity: 0; pointer-events: none; }
}

/* ── Per-View Loading Overlay ──────────────────────────────────────────────── */
.view-loading-overlay {
  position: absolute;
  inset: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--bg, #fff);
  min-height: 60vh;
}

/* ── Item Actions Button (⋯) ──────────────────────────────────────────────── */
.item-actions-btn {
  background: none;
  border: none;
  font-size: 18px;
  color: var(--text-secondary, #888);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  flex-shrink: 0;
  line-height: 1;
  transition: background 0.15s;
}
.item-actions-btn:hover { background: var(--card-bg-hover, rgba(0,0,0,0.06)); }

.reminder-card, .goodwill-card { position: relative; }
.reminder-card .item-actions-btn,
.goodwill-card .item-actions-btn { margin-left: auto; }

/* ── Action Sheet (inside modal) ──────────────────────────────────────────── */
.action-sheet { display: flex; flex-direction: column; gap: 6px; }
.action-sheet-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 12px 14px;
  background: var(--card-bg, #f7f7f7);
  border: 1px solid var(--border, #e5e5e5);
  border-radius: 10px;
  font-size: 15px;
  color: var(--text, #1a1a1a);
  cursor: pointer;
  text-align: left;
  transition: background 0.15s;
}
.action-sheet-btn:hover { background: var(--card-bg-hover, #eee); }
.action-sheet-btn.danger { color: #d32f2f; }
.action-sheet-btn.danger:hover { background: rgba(211,47,47,0.08); }
.action-sheet-desc {
  color: var(--text-secondary, #888);
  font-size: 14px;
  margin-bottom: 10px;
  word-break: break-word;
}

/* ── Install Prompt Modal ──────────────────────────────────────────────── */
.install-prompt-choices { display: flex; flex-direction: column; gap: 12px; margin: 14px 0; }
.install-prompt-choice {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px;
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); cursor: pointer;
  transition: background 0.12s;
}
.install-prompt-choice:active { background: var(--accent-bg); }
.install-prompt-choice input[type="checkbox"] {
  width: 20px; height: 20px; accent-color: var(--accent);
  flex-shrink: 0;
}
.install-prompt-choice-label { font-size: 0.9rem; font-weight: 600; }
.install-prompt-choice-desc { font-size: 0.78rem; color: var(--text2); margin-top: 2px; }

/* ── Contact Import Modal ──────────────────────────────────────────────── */
.contact-import-preview {
  max-height: 200px; overflow-y: auto;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  margin: 10px 0;
}
.contact-import-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
}
.contact-import-item:last-child { border-bottom: none; }
.contact-import-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--accent-bg); color: var(--accent-light);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.78rem; font-weight: 700; flex-shrink: 0;
}
.contact-import-info { flex: 1; min-width: 0; }
.contact-import-name { font-size: 0.9rem; font-weight: 600; }
.contact-import-meta { font-size: 0.78rem; color: var(--text2); }

/* ── Profile Interaction Input ─────────────────────────────────────────── */
.profile-interaction-section {
  margin: 16px 0;
}
.profile-interaction-row {
  display: flex; gap: 8px; align-items: flex-end;
}
.profile-interaction-input {
  flex: 1;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 10px 14px;
  color: var(--text); font-size: 0.9rem; outline: none;
  resize: vertical; min-height: 72px;
  transition: border-color 0.15s;
}
.profile-interaction-input:focus { border-color: var(--accent); }
.profile-interaction-input::placeholder { color: var(--text2); }

/* ── Profile Processing Banner ─────────────────────────────────────────── */
.profile-processing-banner {
  display: flex; align-items: center; gap: 10px;
  margin-top: 10px; padding: 10px 14px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 0.85rem; color: var(--text2);
  animation: profile-processing-pulse 1.8s ease-in-out infinite;
}
.spinner-small {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: #C61919;
  animation: pulseDot 1.1s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes profile-processing-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

/* ── Imported Contacts Empty State ─────────────────────────────────────── */
.imported-empty-state {
  text-align: center; padding: 32px 20px; color: var(--text2);
}
.imported-empty-state p { font-size: 0.88rem; margin-bottom: 12px; }

/* ── Ask input alignment fix (now textarea) ────────────────────────────── */
.ask-input-row { display: flex; gap: 8px; align-items: flex-end; }
.ask-input {
  resize: vertical;
}
.ask-input::placeholder { color: var(--text2); transition: opacity 0.3s ease; }
.ask-input.placeholder-fade::placeholder { opacity: 0; }

/* ── Cycling placeholder animation ─────────────────────────────────────── */
.text-input::placeholder { transition: opacity 0.3s ease; }
.text-input.placeholder-fade::placeholder { opacity: 0; }

/* ── Phonebook Sync (Drawer & Profile) ─────────────────────────────────── */
.drawer-sync-status {
  margin-top: 10px; padding: 8px 12px;
  background: rgba(46, 160, 67, 0.08); border: 1px solid rgba(46, 160, 67, 0.2);
  border-radius: var(--radius-sm); text-align: center;
}
.drawer-sync-label {
  font-size: 0.78rem; font-weight: 600; color: var(--green);
  margin-bottom: 4px;
}
.drawer-sync-btn { margin-top: 4px; }
.btn-xs {
  font-size: 0.7rem; padding: 3px 10px; border-radius: 10px; margin-top: 6px;
}

/* Matching imported contacts in drawer */
.drawer-imported-matches {
  margin-top: 10px;
}
.drawer-matches-title {
  font-size: 0.75rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.4px; color: var(--text2); margin-bottom: 6px;
}
.drawer-match-item {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; background: var(--bg);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  margin-bottom: 4px; cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.drawer-match-item:active { background: var(--accent-bg); border-color: var(--accent); }
.drawer-match-avatar {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--accent-bg); color: var(--accent-light);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.65rem; font-weight: 700; flex-shrink: 0;
}
.drawer-match-info { flex: 1; min-width: 0; }
.drawer-match-name { font-size: 0.82rem; font-weight: 600; }
.drawer-match-meta { font-size: 0.72rem; color: var(--text2); }
.drawer-match-score {
  font-size: 0.68rem; font-weight: 700; color: var(--accent-light);
  background: var(--accent-bg); padding: 2px 8px; border-radius: 8px;
}

/* Phonebook sync in profile */
.phonebook-sync-section {
  margin: 10px 0;
}
.phonebook-sync-status {
  padding: 10px 14px;
  background: rgba(46, 160, 67, 0.06); border: 1px solid rgba(46, 160, 67, 0.15);
  border-radius: var(--radius-sm); text-align: center;
}
.phonebook-sync-label {
  font-size: 0.82rem; font-weight: 600; color: var(--green);
  display: block; margin-bottom: 4px;
}
.phonebook-sync-btn {
  margin-top: 2px;
}
.phonebook-extra-contacts {
  display: flex; flex-wrap: wrap; gap: 4px; justify-content: center;
  margin: 6px 0;
}

/* Red circle sync button inside profile-badges */
.sync-contact-circle {
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--accent); /* red */
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem; cursor: pointer;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(198, 25, 25, 0.25);
  transition: transform 0.15s, box-shadow 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.sync-contact-circle:active {
  transform: scale(0.9);
  box-shadow: 0 1px 4px rgba(198, 25, 25, 0.2);
}
.sync-contact-circle.synced {
  background: var(--green);
  box-shadow: 0 2px 8px rgba(46, 160, 67, 0.25);
}

/* Sync preview summary */
.sync-summary {
  margin: 8px 0; padding: 8px 12px;
  background: var(--surface2); border-radius: var(--radius-sm);
}
.sync-summary-item {
  font-size: 0.82rem; color: var(--text); margin-bottom: 2px;
}
.sync-summary-item:last-child { margin-bottom: 0; }

/* ── Limit Warning Popup ───────────────────────────────────────────────── */
.limit-warning-overlay {
  position: fixed; inset: 0; z-index: 10000;
  background: rgba(0,0,0,0.5);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  animation: fadeInSimple 0.2s ease;
}
.limit-warning-modal {
  background: #fff; border-radius: 16px;
  padding: 28px 24px; max-width: 360px; width: 100%;
  text-align: center;
  box-shadow: 0 8px 32px rgba(0,0,0,0.2);
  animation: slideUp 0.3s ease;
}
.limit-warning-icon { font-size: 40px; margin-bottom: 12px; }
.limit-warning-title { font-size: 18px; font-weight: 700; color: #1a1a2e; margin-bottom: 10px; }
.limit-warning-message { font-size: 14px; color: #6b6b80; line-height: 1.5; margin-bottom: 20px; }
.limit-warning-message a { text-decoration: none; font-weight: 600; }
.limit-warning-close {
  width: 100%; padding: 12px; border: none; border-radius: 10px;
  background: var(--accent); color: #fff; font-size: 15px; font-weight: 600;
  cursor: pointer;
}
.limit-warning-close:hover { background: var(--accent-light); }
@keyframes slideUp { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes fadeInSimple { from { opacity: 0; } to { opacity: 1; } }

/* ── Notification Permission Prompt Banner ─────────────────────────────── */
#notif-prompt-banner {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(30px);
  z-index: 400;
  width: calc(100% - 32px);
  max-width: 420px;
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none;
}
#notif-prompt-banner.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}
#notif-prompt-banner.hiding {
  animation: notifBannerOut 0.3s ease forwards;
}
@keyframes notifBannerOut {
  to { opacity: 0; transform: translateX(-50%) translateY(30px); }
}
.notif-prompt-inner {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 16px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
}
.notif-prompt-icon {
  font-size: 1.6rem;
  flex-shrink: 0;
}
.notif-prompt-text {
  flex: 1;
  min-width: 0;
}
.notif-prompt-text strong {
  display: block;
  font-size: 0.92rem;
  color: var(--text);
  margin-bottom: 2px;
}
.notif-prompt-text span {
  font-size: 0.8rem;
  color: var(--text2);
  line-height: 1.35;
}
.notif-prompt-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex-shrink: 0;
}
.btn-primary-sm {
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 7px 16px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s;
}
.btn-primary-sm:hover { opacity: 0.85; }
.btn-text-sm {
  background: none;
  border: none;
  color: var(--text2);
  font-size: 0.75rem;
  cursor: pointer;
  padding: 2px 4px;
  text-align: center;
}
.btn-text-sm:hover { color: var(--text); }

/* ── Permission Nudge Banner ───────────────────────────────────────────── */
#perm-nudge-banner {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(30px);
  z-index: 400;
  width: calc(100% - 32px);
  max-width: 420px;
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none;
}
#perm-nudge-banner.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}
#perm-nudge-banner.hiding {
  animation: notifBannerOut 0.3s ease forwards;
}

/* ── Permission Settings Rows ──────────────────────────────────────────── */
.perm-settings-header {
  padding: 12px 16px 6px;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text2);
  font-weight: 600;
}
.perm-row-status {
  font-size: 0.72rem;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 10px;
  margin-left: auto;
}
.perm-granted { color: #2e7d32; background: rgba(46,125,50,0.1); }
.perm-denied  { color: #d32f2f; background: rgba(211,47,47,0.08); }
.perm-prompt  { color: var(--text2); background: var(--accent-bg); }

/* ══════════════════════════════════════════════════════════════════════════
   CHAT-FIRST INTERFACE
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Nav Tabs (Chat / Network) ─────────────────────────────────────────── */
.nav-tab {
  padding: 6px 16px;
  border-radius: 20px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text2);
  background: transparent;
  border: 1px solid transparent;
  transition: all 0.15s;
}
.nav-tab.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.nav-tab:not(.active):active {
  background: var(--surface2);
}

/* ── Chat View Layout ──────────────────────────────────────────────────── */
.chat-view {
  flex-direction: column;
  height: 100dvh;
  padding: 0 !important;
  overflow: hidden;
}
.chat-view.active { display: flex !important; }

/* ── Reminder Strip ────────────────────────────────────────────────────── */
.chat-reminder-strip {
  flex-shrink: 0;
  padding: 10px 16px;
  background: linear-gradient(135deg, rgba(191, 32, 32, 0.06) 0%, rgba(191, 32, 32, 0.02) 100%);
  border-bottom: 1px solid rgba(191, 32, 32, 0.1);
  animation: reminderSlideIn 0.3s ease-out;
}
@keyframes reminderSlideIn {
  from { transform: translateY(-100%); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
.reminder-strip-text {
  font-size: 0.82rem;
  color: var(--text);
  line-height: 1.4;
  margin-bottom: 8px;
}
.reminder-strip-actions {
  display: flex;
  gap: 8px;
}
.reminder-strip-btn {
  padding: 5px 14px;
  border-radius: 16px;
  font-size: 0.75rem;
  font-weight: 600;
  transition: all 0.15s;
}
.reminder-strip-btn.primary {
  background: var(--accent);
  color: #fff;
}
.reminder-strip-btn.secondary {
  background: var(--surface2);
  color: var(--text2);
  border: 1px solid var(--border);
}
.reminder-strip-btn:active { transform: scale(0.96); }

/* ── Chat Feed ─────────────────────────────────────────────────────────── */
.chat-feed {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  /* No scroll-behavior:smooth here — _scrollChatToBottom is the single scroll
     owner; CSS smoothing on top of it caused double-scroll judder. */
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
}
/* Push chat content to the bottom (WhatsApp-style) */
.chat-feed > :first-child {
  margin-top: auto;
}

/* Welcome state */
.chat-welcome {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px 20px;
  min-height: 60%;
}
.chat-welcome-logo {
  width: 56px;
  height: 56px;
  margin-bottom: 16px;
  opacity: 0.7;
}
.chat-welcome-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 6px;
}
.chat-welcome-sub {
  font-size: 0.85rem;
  color: var(--text2);
  line-height: 1.5;
  max-width: 280px;
}

/* ── Message layout ─────────────────────────────────────────────────────── */
.chat-msg { margin-bottom: 12px; }

/* Animate only genuinely NEW nodes — the renderer adds .enter on live append and
   strips it after the animation. Feed rebuilds must not re-animate everything. */
.chat-msg.enter { animation: chatBubbleIn var(--dur) var(--ease); }
@keyframes chatBubbleIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* USER — bubble stays. It is short, it is theirs, it should feel like a stamp. */
.chat-msg.user { max-width: 82%; margin-left: auto; margin-top: 14px; }
.chat-msg.user .chat-bubble {
  background: var(--accent);
  color: var(--accent-on);
  padding: 10px 15px;
  border-radius: var(--r-lg);
  border-bottom-right-radius: 6px;
  font-size: var(--msg-size);
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}

/* ASSISTANT — no bubble, no border, no background, full column. */
.chat-msg.assistant {
  max-width: 100%;
  margin-right: 0;
  margin-top: 6px;
  margin-bottom: 20px;
  font-size: var(--msg-size);
  line-height: var(--msg-lh);
  color: var(--text);
}
.chat-msg.assistant .chat-bubble {
  background: none;
  border: none;
  padding: 0;
  border-radius: 0;
  font-size: inherit;
  line-height: inherit;
  white-space: normal;          /* the renderer emits real block elements now */
  word-break: break-word;
}

/* Consecutive bubbles from one turn (response_append) must read as ONE answer,
   not three stacked cards. */
.chat-msg.assistant .chat-bubble + .chat-bubble { margin-top: 10px; }

/* Timestamps: metadata floor 12px, hidden until hover (touch always shows).
   Assistant messages get no timestamp at all (renderer only stamps user rows). */
.chat-msg-time {
  font-size: var(--meta-size);
  color: var(--text3);
  margin-top: 4px;
  padding: 0 4px;
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease);
}
.chat-msg.user .chat-msg-time { text-align: right; }
.chat-msg.assistant .chat-msg-time { text-align: left; }
.chat-msg:hover .chat-msg-time,
.chat-msg.show-time .chat-msg-time { opacity: 1; }
@media (hover: none) { .chat-msg-time { opacity: 1; } }   /* touch: no hover, so show */

/* Day dividers replace per-message date noise */
.chat-day {
  align-self: center;
  font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text3); background: var(--surface);
  padding: 5px 11px; border-radius: 99px;
  margin: 12px auto 14px;
}

/* Pending (in flight): a hairline halo. Reads as "sending", not "failed". */
.chat-msg.pending .chat-bubble {
  box-shadow: 0 0 0 2px var(--accent-bg);
}
/* Failed: explicit, with a visible retry affordance (tap re-fills the input). */
.chat-msg.failed .chat-bubble {
  background: var(--surface);
  color: var(--text2);
  border: 1px solid var(--accent);
}
.chat-msg.failed::after {
  content: "Not sent · tap to retry";
  display: block; text-align: right;
  font-size: var(--meta-size); color: var(--accent);
  margin-top: 4px; cursor: pointer;
}

/* @mention highlighting in user messages */
.chat-mention {
  font-weight: 700;
}
.chat-msg.assistant .chat-mention {
  color: var(--accent);
}
/* Tappable person names in assistant prose */
.chat-person-link {
  color: var(--accent);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.chat-msg.user .chat-mention {
  color: #fff !important;
}

/* Typing indicator */
.chat-typing {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 12px 16px;
  max-width: 80px;
  margin-bottom: 12px;
}
.chat-typing .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text2);
  animation: typingDot 1.2s infinite;
}
.chat-typing .dot:nth-child(2) { animation-delay: 0.15s; }
.chat-typing .dot:nth-child(3) { animation-delay: 0.3s; }
@keyframes typingDot {
  0%, 60%, 100% { opacity: 0.3; transform: scale(0.8); }
  30% { opacity: 1; transform: scale(1); }
}

/* ── Action Tiles (in chat) ────────────────────────────────────────────── */
.chat-action-tiles {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}
.chat-action-tile {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  transition: all 0.15s;
}
.chat-action-tile:active { background: var(--surface2); }
.chat-tile-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.chat-tile-icon {
  font-size: 1rem;
  flex-shrink: 0;
}
.chat-tile-title {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text);
}
.chat-tile-meta {
  font-size: 0.78rem;
  color: var(--text2);
  margin-bottom: 8px;
}
.chat-tile-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.chat-tile-btn {
  padding: 5px 12px;
  border-radius: 14px;
  font-size: 0.75rem;
  font-weight: 600;
  transition: all 0.15s;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
}
.chat-tile-btn:active { transform: scale(0.96); }
.chat-tile-btn.primary {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
/* Lens chips (aug15): named ways to re-slice a set of recommendations — Best fit / People you
   know well / Haven't spoken in a while / New connections. Scrolls horizontally rather than
   wrapping, so four chips never eat two lines of a phone screen. */
.lens-chips {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 8px 0 2px;
  margin-top: 4px;
}
.lens-chips::-webkit-scrollbar { display: none; }
.lens-chip {
  flex: 0 0 auto;
  padding: 5px 12px;
  border-radius: 14px;
  font-size: 0.72rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.15s;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-muted, var(--text));
}
.lens-chip:active { transform: scale(0.96); }
.lens-chip.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.lens-note {
  font-size: 0.75rem;
  color: var(--text-muted, var(--text));
  opacity: 0.8;
  padding: 6px 2px 2px;
}

.chat-tile-btn.completed {
  background: rgba(26, 127, 55, 0.1);
  border-color: rgba(26, 127, 55, 0.2);
  color: var(--green);
  pointer-events: none;
}

/* ── Transaction Cards ─────────────────────────────────────────────────── */

.tx-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  margin-top: 6px;
  max-width: 360px;
}
.tx-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.tx-card-icon { font-size: 1rem; flex-shrink: 0; }
.tx-card-title {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text);
}
.tx-card-body {
  font-size: 0.82rem;
  color: var(--text2);
  line-height: 1.45;
  margin-bottom: 12px;
  white-space: pre-line;
}
.tx-card-details-wrap { margin-bottom: 10px; }
.tx-details-input {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  font-size: 0.8rem;
  resize: none;
  font-family: inherit;
  box-sizing: border-box;
}
.tx-details-input:focus { outline: none; border-color: var(--accent); }
.tx-card-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

/* ── Chat Input Bar ────────────────────────────────────────────────────── */

/* Sync status indicator — subtle dot to the left of the input bar */
.sync-indicator {
  position: absolute;
  top: -12px;
  left: 16px;
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.65rem;
  color: var(--text2);
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
}
.sync-indicator.visible { opacity: 1; }
.sync-indicator .sync-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--text2);
  transition: background 0.3s;
}
.sync-indicator.syncing .sync-dot {
  background: var(--accent);
  animation: sync-pulse 1.2s ease-in-out infinite;
}
.sync-indicator.offline .sync-dot { background: #aaa; }
.sync-indicator.reconnecting .sync-dot {
  background: #e8a317;
  animation: sync-pulse 0.8s ease-in-out infinite;
}
.sync-indicator.error .sync-dot { background: var(--accent); }

@keyframes sync-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.4; transform: scale(0.7); }
}

/* Offline banner — thin, non-intrusive bar below the cover */
.offline-banner {
  position: fixed;
  top: 0;
  left: 0; right: 0;
  z-index: 200;
  text-align: center;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: #fff;
  background: #888;
  padding: 2px 0;
  transform: translateY(-100%);
  transition: transform 0.3s ease;
}
.offline-banner.visible { transform: translateY(0); }

.chat-input-bar {
  flex-shrink: 0;
  position: relative;
  padding: 10px 12px calc(10px + var(--safe-bottom));
  background: var(--bg);
  border-top: 1px solid var(--border);
}
.chat-input-row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 22px;
  padding: 6px 6px 6px 16px;
  transition: border-color 0.15s;
}
.chat-input-row:focus-within {
  border-color: var(--accent);
}
/* Inner column wrapper: stacks mention chips above textarea */
.chat-input-inner {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
/* Mention indicator — inline red label inside the input row */
.mention-chips-container {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 2px 0 0;
}
.mention-chips-container .mention-indicator {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
.mention-chip-x {
  font-size: 0.75rem;
  margin-left: 2px;
  opacity: 0.6;
  cursor: pointer;
}
.mention-chip-x:hover {
  opacity: 1;
}
.mention-indicator {
  font-size: 0.82rem;
  font-weight: 600;
  color: #C61919;
  white-space: nowrap;
  flex-shrink: 0;
  cursor: pointer;
  padding: 4px 0;
  line-height: 1.4;
}
.chat-input {
  width: 100%;
  border: none;
  background: transparent;
  color: var(--text);
  font-size: 0.9rem;
  line-height: 1.4;
  outline: none;
  resize: none;
  max-height: 120px;
  min-height: 24px;
  padding: 4px 0;
  font-family: inherit;
}
.chat-input::placeholder {
  color: var(--text2);
  transition: opacity 0.3s ease;
}
.chat-input.placeholder-fade::placeholder { opacity: 0; }
.chat-mic-btn, .chat-send-btn {
  width: 40px;   /* 36px failed the touch-target floor */
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.15s;
}
.chat-mic-btn {
  background: transparent;
  color: var(--text2);
}
.chat-mic-btn:active { color: var(--accent); }
.chat-mic-btn.recording {
  background: var(--accent);
  color: #fff;
  animation: pulse 1.4s infinite;
}
.chat-send-btn {
  background: var(--accent);
  color: #fff;
}
.chat-send-btn:active { opacity: 0.8; }

/* ── Network Menu ──────────────────────────────────────────────────────── */
#network-menu {
  top: 52px;
  right: 12px;
}

/* ── Progressive Discovery Locks ───────────────────────────────────────── */
.nm-locked {
  opacity: 0.4;
  pointer-events: none;
  position: relative;
}
.nm-locked::after {
  content: "🔒";
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.75rem;
}

/* ── Chat Processing Indicator ─────────────────────────────────────────── */
.chat-processing {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  border-bottom-left-radius: 4px;
  max-width: 85%;
  margin-bottom: 12px;
  animation: chatBubbleIn 0.25s ease-out;
}
.chat-processing .pulse-dot-sm {
  width: 9px; height: 9px;
}
.chat-processing-text {
  font-size: 0.82rem;
  color: var(--text2);
}

/* ── Driver Agent Chat Elements ─────────────────────────────────────────────── */

/* Person suggestion buttons */
.chat-suggestion-buttons {
  display: flex; flex-direction: column; gap: 6px;
  margin-top: 8px; max-width: 85%;
}
.chat-person-btn {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  text-align: left;
  cursor: pointer;
  transition: all 0.15s;
}
.chat-person-btn:active {
  background: var(--surface2);
  transform: scale(0.98);
}
.chat-person-btn.secondary {
  background: var(--surface);
  border-style: dashed;
}
.chat-person-btn-info {
  display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0;
}
.chat-person-btn-name {
  font-size: 0.88rem; font-weight: 600; color: var(--text);
}
.chat-person-btn-meta {
  font-size: 0.75rem; color: var(--text2);
}
/* Contact action icons in chat tiles/cards */
.chat-contact-actions {
  display: flex; gap: 6px; align-items: center; flex-shrink: 0;
}
.chat-action-icon {
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 50%;
  font-size: 0.9rem; text-decoration: none;
  transition: opacity 0.15s;
}
.chat-action-icon:active { opacity: 0.7; transform: scale(0.9); }
.chat-action-icon.call { background: rgba(46, 160, 67, 0.12); }
.chat-action-icon.whatsapp { background: rgba(37, 211, 102, 0.12); }
.chat-action-icon.email { background: rgba(59, 130, 246, 0.12); }
.chat-card-actions {
  display: flex; gap: 6px; justify-content: flex-end; padding-top: 8px;
  border-top: 1px solid var(--border); margin-top: 8px;
}
/* Person disambiguation dropdown (4+ matches) */
.chat-person-dropdown-wrap {
  margin-top: 8px; max-width: 85%;
}
.chat-person-dropdown {
  width: 100%;
  padding: 10px 14px;
  font-size: 0.88rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  cursor: pointer;
  appearance: auto;
}
/* Event suggestion controls */
.chat-event-suggestion {
  max-width: 85%;
}
.chat-event-controls {
  display: flex; flex-direction: column; gap: 8px;
  margin-top: 8px;
}

/* Inline action buttons */
.chat-action-btns {
  display: flex; gap: 6px; flex-wrap: wrap;
  margin-top: 8px;
  margin-bottom: 14px;
}

/* Inline contact card */
.chat-contact-card {
  margin-top: 8px;
  padding: 12px 14px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: all 0.15s;
  max-width: 85%;
}
.chat-contact-card:active {
  background: var(--surface2);
  transform: scale(0.98);
}
.chat-card-label {
  font-size: 0.72rem; color: var(--text2); text-transform: uppercase;
  letter-spacing: 0.04em; margin-bottom: 8px; font-weight: 600;
}
.chat-card-row {
  display: flex; align-items: center; gap: 12px;
}
.chat-card-info { flex: 1; min-width: 0; }
.chat-card-name {
  font-size: 0.9rem; font-weight: 600; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.chat-card-meta {
  font-size: 0.78rem; color: var(--text2); margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.chat-card-closeness {
  font-size: 0.72rem; color: var(--accent); margin-top: 3px; font-weight: 600;
}
.chat-card-arrow {
  font-size: 1.4rem; color: var(--text2); flex-shrink: 0;
}
.person-avatar.sm {
  width: 36px; height: 36px; font-size: 0.75rem;
}

/* Chat lists (sorted/unsorted) */
.chat-list {
  margin-top: 8px; max-width: 85%;
}
.chat-sort-toggle {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px; margin-bottom: 6px;
  font-size: 0.72rem; font-weight: 600;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 14px; color: var(--text2); cursor: pointer;
  transition: all 0.15s;
}
.chat-sort-toggle:active { background: var(--surface2); }
.chat-list-items {
  display: flex; flex-direction: column; gap: 4px;
}
.chat-list-item {
  display: flex; flex-direction: column; gap: 2px;
  padding: 8px 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  text-align: left; cursor: pointer;
  transition: all 0.15s; width: 100%;
}
.chat-list-item:active {
  background: var(--surface2);
}
.chat-list-item-name {
  font-size: 0.85rem; font-weight: 600; color: var(--text);
}
.chat-list-item-meta {
  font-size: 0.73rem; color: var(--text2);
}

/* Chat inline confirmation buttons */
.chat-confirm-candidate-btn,
.chat-confirm-new-btn {
  display: block;
  width: 100%;
  padding: 10px 14px;
  margin-top: 6px;
  border-radius: 10px;
  border: 1.5px solid var(--border);
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.chat-confirm-candidate-btn {
  background: #fff;
  color: var(--text);
}
.chat-confirm-candidate-btn:hover {
  background: var(--primary-light, #fef2f2);
  border-color: var(--cover-red, #C61919);
}
.chat-confirm-new-btn {
  background: transparent;
  color: var(--text2);
  border-style: dashed;
}
.chat-confirm-new-btn:hover {
  background: var(--surface2, #f5f5f5);
  color: var(--text);
}

/* Merge disambiguation cards */
.merge-suggestion-card {
  background: var(--surface, #fff);
  border: 1.5px solid var(--border);
  border-radius: 14px;
  padding: 14px 16px 12px;
  margin: 8px 0;
  transition: opacity 0.2s ease;
}
.merge-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}
.merge-card-label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--cover-red, #C61919);
}
.merge-card-conf {
  font-size: 0.72rem;
  color: var(--text2);
}
.merge-card-reason {
  font-size: 0.82rem;
  color: var(--text2);
  margin-bottom: 10px;
}
.merge-card-people {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin-bottom: 12px;
}
.merge-person-card {
  flex: 1;
  background: var(--surface2, #f9f9f9);
  border-radius: 10px;
  padding: 10px 12px;
  min-width: 0;
}
.merge-person-name {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.merge-person-field {
  font-size: 0.78rem;
  color: var(--text2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.merge-person-source {
  font-size: 0.72rem;
  color: var(--text3, #aaa);
  margin-top: 4px;
  font-style: italic;
}
.merge-card-vs {
  font-size: 0.75rem;
  color: var(--text3, #bbb);
  align-self: center;
  flex-shrink: 0;
}
.merge-card-actions {
  display: flex;
  gap: 8px;
}
.merge-confirm-btn,
.merge-reject-btn {
  flex: 1;
  padding: 8px 0;
  border-radius: 10px;
  font-size: 0.84rem;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: background 0.15s ease;
}
.merge-confirm-btn {
  background: var(--cover-red, #C61919);
  color: #fff;
}
.merge-confirm-btn:hover { background: #a81212; }
.merge-reject-btn {
  background: var(--surface2, #f0f0f0);
  color: var(--text2);
  border: 1.5px solid var(--border);
}
.merge-reject-btn:hover { background: var(--surface3, #e8e8e8); }

/* Cover profile action buttons */
.cover-profile-actions {
  padding: 10px 0 6px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.cover-action-btn {
  flex: 1 1 calc(50% - 4px);
  min-width: 0;
  padding: 9px 10px;
  border-radius: 10px;
  border: 1.5px solid var(--border, #e0e0e0);
  background: #fff;
  color: var(--text);
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  text-align: center;
  transition: background 0.15s, border-color 0.15s;
}
.cover-action-btn:active {
  background: var(--surface2, #f5f5f5);
}
.cover-action-btn--done {
  background: #2e7d32;
  color: #fff;
  border-color: #2e7d32;
}
.cover-action-btn--done:active {
  background: #256029;
}
.cover-action-btn--danger {
  background: transparent;
  color: #C61919;
  border-color: #C61919;
}
.cover-action-btn--danger:active {
  background: #C61919;
  color: #fff;
}

/* Floating + button on cover profile */
.cover-profile-fab {
  position: sticky;
  bottom: 16px;
  float: right;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #C61919;
  color: #fff;
  border: none;
  font-size: 28px;
  font-weight: 300;
  line-height: 1;
  box-shadow: 0 2px 8px rgba(198,25,25,0.35);
  cursor: pointer;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 12px;
  margin-right: 4px;
}
.cover-profile-fab:active {
  background: #a01515;
  transform: scale(0.92);
}

/* Chat bubble with formatted text */
.chat-bubble strong { font-weight: 700; }
.chat-bubble .chat-bullet {
  display: block;
  padding-left: 12px;
  position: relative;
  margin: 2px 0;
}
.chat-bubble .chat-bullet::before {
  content: '\2022';
  position: absolute; left: 0;
}
/* ── Assistant prose (the de-bubbled answer is a document) ─────────────── */
.chat-msg.assistant .chat-bubble > p:first-child,
.chat-msg.assistant .chat-heading:first-child,
.chat-msg.assistant .chat-bubble > h2:first-child,
.chat-msg.assistant .chat-bubble > h3:first-child { margin-top: 0; }
.chat-msg.assistant p { margin: 0 0 10px; }
.chat-msg.assistant p:last-child { margin-bottom: 0; }

.chat-msg.assistant .chat-heading,
.chat-msg.assistant h1, .chat-msg.assistant h2,
.chat-msg.assistant h3, .chat-msg.assistant h4 {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 16px 0 8px;
  padding-bottom: 0;
  border-bottom: none;
  line-height: 1.35;
}

.chat-msg.assistant ul,
.chat-msg.assistant ol { margin: 2px 0 12px; padding-left: 20px; }
.chat-msg.assistant li { margin: 4px 0; }
.chat-msg.assistant li::marker { color: var(--accent); }
.chat-msg.assistant li > ul,
.chat-msg.assistant li > ol { margin: 4px 0 4px; }

.chat-msg.assistant strong { font-weight: 650; }
.chat-msg.assistant a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.chat-msg.assistant blockquote {
  margin: 8px 0 12px; padding: 2px 0 2px 12px;
  border-left: 3px solid var(--border-strong); color: var(--text2);
}

.chat-msg.assistant code {
  font: 500 0.9em ui-monospace, SFMono-Regular, Menlo, monospace;
  background: var(--surface); padding: 1px 5px; border-radius: 5px;
}
.chat-msg.assistant pre {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 12px; overflow-x: auto; margin: 8px 0 12px;
}
.chat-msg.assistant pre code { background: none; padding: 0; }

.chat-msg.assistant table {
  width: 100%; border-collapse: collapse; margin: 8px 0 12px; font-size: 13.5px;
}
.chat-msg.assistant th, .chat-msg.assistant td {
  text-align: left; padding: 7px 10px; border-bottom: 1px solid var(--border);
}
.chat-msg.assistant th { font-weight: 650; color: var(--text2); }

/* Legacy list class (old persisted renders / other card surfaces) */
.chat-bubble .chat-list {
  margin: 4px 0 6px 0;
  padding-left: 18px;
  list-style: disc;
}
.chat-bubble .chat-list li { margin: 2px 0; line-height: 1.45; }
.chat-bubble .chat-list li::marker { color: var(--accent); }

/* ══════════════════════════════════════════════════════════════════════════
   COVER (Pull-Down Drawer)
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  --cover-red: #C61919;
  --cover-collapsed-h: 120px;
  --cover-handle-h: 40px;
  --cover-total-collapsed: calc(var(--cover-collapsed-h) + var(--cover-handle-h));
  --safe-top: env(safe-area-inset-top, 0px);
}

/* ── Cover container ──────────────────────────────────────────────────── */
.cover {
  position: fixed;
  top: 0;
  left: 50%;
  width: 100%;
  max-width: 480px;
  z-index: 500;
  transform: translateX(-50%) translateY(var(--cover-ty, 0px));
  will-change: transform;
  user-select: none;
  -webkit-user-select: none;
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.cover.dragging { transition: none !important; }
.cover.dragging .cover-content-box { transition: none !important; }
.cover.dragging .cover-menu { transition: none !important; }
.cover.dragging .cover-notifications { transition: none !important; }


/* ── Red area ─────────────────────────────────────────────────────────── */
.cover-red {
  background: var(--cover-red);
  padding: calc(var(--safe-top) + 24px) 0 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  position: relative;
  overflow: hidden;


/* ── RUNGS logo — always at bottom of red area ────────────────────────── */
.cover-logo {
  font-family: "MuseoModerno", sans-serif;
  font-weight: 700;
  font-size: 2.8rem;
  color: #fff;
  letter-spacing: 0.04em;
  text-align: center;
  padding: 10px 0 8px;
  transition: opacity 0.4s ease;
  pointer-events: none;
  flex-shrink: 0;
  z-index: 1;
  overflow: visible;
}
.cover-logo-inner {
  position: relative;
  display: inline-block;
}
.cover-logo.hidden { opacity: 0; pointer-events: none; padding: 0; max-height: 0; }

.cover-scan-btn {
  position: absolute;
  right: 20px;
  bottom: 14px;
  width: 44px;
  height: 44px;
  background: rgba(255, 255, 255, 0.18);
  border: 2px solid rgba(255, 255, 255, 0.45);
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  transition: background 0.18s, transform 0.14s;
  -webkit-tap-highlight-color: transparent;
  flex-shrink: 0;
}
.cover-scan-btn:active { background: rgba(255, 255, 255, 0.35); transform: scale(0.9); }

/* Home button — mirrors .cover-scan-btn but on the LEFT of the logo. */
.cover-home-btn {
  position: absolute;
  left: 20px;
  bottom: 14px;
  width: 44px;
  height: 44px;
  background: rgba(255, 255, 255, 0.18);
  border: 2px solid rgba(255, 255, 255, 0.45);
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  transition: background 0.18s, transform 0.14s;
  -webkit-tap-highlight-color: transparent;
  flex-shrink: 0;
}
.cover-home-btn:active { background: rgba(255, 255, 255, 0.35); transform: scale(0.9); }

.cover-beta {
  position: absolute;
  top: -2px;
  right: -4px;
  transform: translateX(100%);
  font-family: inherit;
  font-size: 0.3em;
  font-weight: 700;
  letter-spacing: 1.5px;
}
}

/* ── White content box ─────────────────────────────────────────────── */
.cover-content-box {
  width: calc(100% - 40px);
  margin: 0 auto;
  background: #fff;
  border-radius: 14px;
  position: relative;
  overflow: hidden;
  /* hidden by default — visually collapsed, zero height so no layout impact */
  max-height: 0;
  opacity: 0;
  transform: scaleX(0);
  transform-origin: center center;
  transition: opacity 0.3s ease, transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              max-height 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform, opacity, max-height;
  flex-shrink: 0;
  flex-grow: 0;
  pointer-events: none;
}
.cover-content-box.visible {
  opacity: 1;
  transform: scaleX(1);
  pointer-events: auto;
}

/* State 0: no notification box — logo only */
/* State 1 (peek/partial reminder bar) removed — binary drawer per ARCH §5.557. */

/* State 2: menu / subview canvas — pinned to top, logo stays at bottom */
.cover-content-box.state-2 {
  max-height: calc(100dvh - 280px);
  margin-bottom: auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* ── Notification area ────────────────────────────────────────────────── */
.cover-notifications {
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: opacity 0.25s ease, max-height 0.3s ease;
}
.cover-notifications.cover-notifs-hidden {
  opacity: 0;
  max-height: 0;
  padding: 0 16px;
  overflow: hidden;
  pointer-events: none;
}
}

.cover-notif-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 0;
  min-height: 32px;
  animation: notifFadeIn 0.3s ease-out;
}

/* Staggered entrance animation for all-at-once rendering */
.cover-notif-item.cover-notif-stagger {
  opacity: 0;
  transform: translateY(8px);
  animation: notifStaggerIn 0.35s ease-out forwards;
}
@keyframes notifStaggerIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes notifFadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

.cover-notif-text {
  flex: 1;
  font-size: 0.84rem;
  color: var(--text);
  line-height: 1.35;
  min-width: 0;
  word-break: break-word;
}
/* Typewriter — allow wrapping so text isn't clipped */
.cover-notif-text.typing {
  border-right: 2px solid var(--cover-red);
  animation: typewriterCursor 0.6s step-end infinite;
}
@keyframes typewriterCursor {
  50% { border-color: transparent; }
}

.cover-notif-actions {
  display: flex; gap: 6px; flex-shrink: 0; align-items: center;
}
.cover-notif-check {
  width: 22px; height: 22px; border-radius: 50%;
  border: 2px solid var(--border); background: transparent;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; padding: 0; font-size: 0.7rem;
  transition: background 0.2s, border-color 0.2s;
}
.cover-notif-check.checked { background: var(--green); border-color: var(--green); color: #fff; }
.cover-notif-dismiss {
  width: 22px; height: 22px; border-radius: 50%;
  background: transparent; border: 1px solid var(--border);
  color: var(--text2); font-size: 0.75rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; padding: 0;
  /* The ✕ stays visually 22px but claims a full-size hit area around it, so dismissing
     doesn't require precision the ring's diameter doesn't advertise (aug20). */
  position: relative;
}
.cover-notif-dismiss::after {
  content: ''; position: absolute; top: 50%; left: 50%;
  width: 44px; height: 44px; transform: translate(-50%, -50%);
}
.cover-notif-dismiss:active { background: var(--surface2); }
.cover-notif-act {
  height: 22px; padding: 0 10px; border-radius: 11px;
  border: 1px solid var(--border); background: transparent;
  color: var(--text1); font-size: 0.72rem; cursor: pointer;
  display: flex; align-items: center; flex-shrink: 0; white-space: nowrap;
}
.cover-notif-act:active { background: var(--surface2); }
/* ── Home screen (default surface; chat is on-demand) ───────────────────── */
.home-screen { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow: hidden;
  padding-top: calc(var(--cover-total-collapsed) + 8px); }
/* When chat is open, hide the home surface; when home, hide the feed. */
#view-chat.chat-active .home-screen { display: none; }
#view-chat:not(.chat-active) .chat-feed { display: none; }

/* Active Goals rail */
.goals-rail-wrap { padding: 10px 12px 4px; }
.goals-rail-header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.goals-rail-title { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.02em; color: var(--text, #eee); }
.goals-rail-counter { font-size: 0.72rem; color: var(--text2, #999); }
.goals-rail-row { display: flex; align-items: stretch; gap: 8px; }
.goals-rail { display: flex; gap: 8px; overflow-x: auto; scroll-behavior: smooth; flex: 1; min-width: 0;
  -ms-overflow-style: none; scrollbar-width: none; scroll-snap-type: x proximity; }
.goals-rail::-webkit-scrollbar { display: none; }
.goal-card { flex: 0 0 46%; max-width: 46%; min-height: 88px; scroll-snap-align: start;
  background: linear-gradient(150deg, var(--accent, #BF2020) 0%, #991818 100%); color: #fff;
  border-radius: 14px; padding: 12px 12px 10px; display: flex; flex-direction: column;
  justify-content: space-between; cursor: pointer; box-shadow: 0 1px 4px rgba(0,0,0,0.18); }
.goal-card:active { transform: scale(0.98); }
.goal-card-title { font-size: 0.92rem; font-weight: 600; line-height: 1.2; }
.goal-prog-track { height: 7px; border-radius: 4px; background: rgba(255,255,255,0.28); overflow: hidden; margin-top: 10px; }
.goal-prog-fill { height: 100%; background: #111; border-radius: 4px; transition: width 0.4s; }
/* Progress dots (ARCH §5.490): variable count; filled (black) = milestone reached. */
.goal-dots { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.goal-dot { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,0.85);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.12); }
.goal-dot.on { background: #111; }
.goal-horizon-badge { display: inline-block; font-size: 0.62rem; font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase; padding: 2px 6px; border-radius: 20px;
  background: rgba(0,0,0,0.22); color: rgba(255,255,255,0.85); margin-bottom: 4px; }
/* Paused goal (aug04): still on the rail (last, and reachable), but visibly out of play — grey,
   not the accent red, because red is what "Rungs is working on this" looks like everywhere else. */
.goal-card { position: relative; }
.goal-card.goal-paused { background: linear-gradient(150deg, #4a4a52 0%, #35353c 100%);
  color: rgba(255,255,255,0.72); box-shadow: none; }
.goal-card.goal-paused .goal-dot { background: rgba(255,255,255,0.4); }
.goal-card.goal-paused .goal-dot.on { background: rgba(0,0,0,0.45); }
.goal-pause { position: absolute; top: 6px; right: 6px; background: rgba(0,0,0,0.22); border: none;
  color: rgba(255,255,255,0.9); border-radius: 20px; font-size: 0.6rem; line-height: 1;
  padding: 5px 7px; cursor: pointer; }
.goal-pause:active { transform: scale(0.94); }

/* Goal action bar (inside goal chat, above messages) */
.goal-action-bar { padding: 12px 14px; margin: 0 0 6px; background: linear-gradient(150deg, var(--accent, #BF2020) 0%, #991818 100%);
  border-radius: 14px; color: #fff; }
/* The bar is inserted as the feed's FIRST child, which made `.chat-feed > :first-child
   { margin-top: auto }` — the WhatsApp-style push-content-to-the-bottom rule — shove it down to sit
   just above the composer. It belongs at the top, under the cover, so: cancel the auto margin, hand
   it to the next element instead so messages still bottom-align, and pin the bar while scrolling. */
.chat-feed > .goal-action-bar { margin-top: 0; position: sticky; top: 0; z-index: 5; }
.chat-feed > .goal-action-bar + * { margin-top: auto; }
.goal-action-bar-title { font-size: 0.92rem; font-weight: 600; line-height: 1.25; margin-bottom: 10px; }
.goal-action-bar-btns { display: flex; gap: 8px; }
.goal-action-bar .cover-action-btn { color: #fff; border-color: rgba(255,255,255,0.5); background: transparent; font-size: 0.78rem; }
.goal-action-bar .cover-action-btn:active { background: rgba(255,255,255,0.15); }
.goal-action-bar .cover-action-btn--done { background: #fff; color: #991818; border-color: #fff; }
.goal-action-bar .cover-action-btn--done:active { background: #eee; }

/* People to Call Back — a persistent, calm (NOT alarm-red) home card. Memory, not attention:
   it opens a browseable backlog, it never nags. */
.callbacks-card { margin: 2px 12px 8px; padding: 11px 13px; border-radius: 14px; cursor: pointer;
  background: var(--panel2, rgba(255,255,255,0.04)); border: 1px solid var(--border, rgba(255,255,255,0.10)); }
.callbacks-card:active { transform: scale(0.99); }
.callbacks-card-title { font-size: 0.86rem; font-weight: 700; color: var(--text, #eee); }
.callbacks-card-sub { font-size: 0.76rem; color: var(--text2, #9a9aa6); margin-top: 3px; line-height: 1.3; }

/* Full-screen feed sheet (the browseable backlog). */
.callbacks-overlay { position: fixed; inset: 0; z-index: 1400; background: rgba(0,0,0,0.55);
  display: flex; align-items: flex-end; justify-content: center; }
.callbacks-sheet { width: 100%; max-width: 640px; max-height: 88vh; display: flex; flex-direction: column;
  background: var(--bg, #14141a); border-radius: 18px 18px 0 0; box-shadow: 0 -6px 24px rgba(0,0,0,0.4);
  animation: cbSheetUp 0.22s ease; }
@keyframes cbSheetUp { from { transform: translateY(24px); opacity: 0.6; } to { transform: translateY(0); opacity: 1; } }
.callbacks-sheet-head { display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px 10px; border-bottom: 1px solid var(--border, rgba(255,255,255,0.08)); }
.callbacks-sheet-title { font-size: 1rem; font-weight: 700; color: var(--text, #eee); }
.callbacks-sheet-close { background: none; border: none; color: var(--text2, #9a9aa6); font-size: 1.1rem;
  cursor: pointer; padding: 4px 8px; }
.callbacks-feed { overflow-y: auto; padding: 12px 14px 22px; -webkit-overflow-scrolling: touch; }
.callbacks-empty { text-align: center; color: var(--text2, #9a9aa6); font-size: 0.85rem; padding: 40px 12px; }

.cb-card { background: var(--panel2, rgba(255,255,255,0.04)); border: 1px solid var(--border, rgba(255,255,255,0.08));
  border-radius: 13px; padding: 12px 13px; margin-bottom: 10px; position: relative; }
.cb-card.cb-snoozed { opacity: 0.5; }
/* ✕ on a grouped follow-up / reconnect row (FEAT-02: top-left), with the title indented past it. */
.cb-dismiss { position: absolute; top: 8px; left: 9px; background: none; border: none; line-height: 1;
  font-size: 1.05rem; color: var(--text2, #9a9aa6); cursor: pointer; padding: 2px 6px; }
.cb-dismissable .cb-name, .cb-dismissable .cb-line { padding-left: 20px; }
.cb-name { font-size: 0.92rem; font-weight: 700; color: var(--text, #eee); }
.cb-sub { font-size: 0.74rem; font-weight: 500; color: var(--text2, #9a9aa6); }
.cb-line { font-size: 0.78rem; line-height: 1.35; margin-top: 5px; color: var(--text, #ddd); }
.cb-what { color: var(--text2, #9a9aa6); }
.cb-last { color: var(--text2, #9a9aa6); font-style: italic; }
/* Why this person, why now. Readable body text — NOT the italic grey of an aside: with the aug11
   ranking these are often people the user has not spoken to in years, and the reason is the only
   thing that makes the suggestion make sense. Clamped to 3 lines so a long reason cannot push the
   action buttons off a phone screen; the full text is in the session the row opens. */
.cb-why { color: var(--text, #ddd); font-style: normal;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.cb-promised { color: var(--text, #eee); font-weight: 500; }
.cb-actions { display: flex; gap: 8px; margin-top: 11px; flex-wrap: wrap; }
.cb-btn { font-size: 0.76rem; font-weight: 600; padding: 6px 13px; border-radius: 20px; cursor: pointer;
  border: 1px solid var(--border, rgba(255,255,255,0.16)); background: transparent; color: var(--text, #eee);
  text-decoration: none; display: inline-block; }
.cb-btn:active { transform: scale(0.97); }
.cb-call { background: #1f7a3d; border-color: #1f7a3d; color: #fff; }
.cb-done { background: var(--accent, #BF2020); border-color: var(--accent, #BF2020); color: #fff; }
/* "Delay 3d" — deliberately quiet. It is the middle option between acting and removing, and it
   should not compete with the CTA or with Done for attention. */
.cb-delay { background: transparent; color: var(--text2, #9a9aa6); }

/* Chats menu overlay (ARCH §5.557) */
.chats-menu-overlay { position: fixed; inset: 0; z-index: 10000; background: rgba(0,0,0,0.45);
  display: flex; align-items: flex-end; justify-content: center; }
.chats-menu { width: 100%; max-width: 560px; max-height: 72vh; background: var(--surface, #1a1a22);
  border-radius: 18px 18px 0 0; display: flex; flex-direction: column; overflow: hidden;
  box-shadow: 0 -4px 24px rgba(0,0,0,0.3); animation: chatsUp 0.25s ease; }
@keyframes chatsUp { from { transform: translateY(20px); opacity: 0; } to { transform: none; opacity: 1; } }
.chats-menu-head { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px;
  font-weight: 700; font-size: 0.95rem; border-bottom: 1px solid var(--border); color: var(--text, #eee); }
.chats-menu-close { background: none; border: none; font-size: 1.4rem; color: var(--text2, #999); cursor: pointer; line-height: 1; }
.chats-menu-list { overflow-y: auto; padding: 6px; }
.chats-menu-item { width: 100%; display: flex; align-items: center; gap: 12px; padding: 12px 14px;
  background: none; border: none; color: var(--text, #eee); font-size: 0.9rem; text-align: left; cursor: pointer;
  border-radius: 10px; }
.chats-menu-item:active { background: var(--surface2, #2a2a35); }
.chats-menu-icon { font-size: 1.1rem; flex-shrink: 0; }
.chats-menu-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chats-menu-empty { padding: 28px 20px; text-align: center; color: var(--text2, #999); font-size: 0.85rem; line-height: 1.5; }
.goal-add-card { flex: 0 0 auto; width: 56px; align-self: stretch; min-height: 88px;
  background: var(--accent, #BF2020); color: #fff; border: none; border-radius: 14px;
  font-size: 1.8rem; font-weight: 300; cursor: pointer; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 4px rgba(0,0,0,0.18); }
.goal-add-card:active { transform: scale(0.97); }

/* ProOrch cards: category + one-liner + CTA */
.home-cards { display: flex; flex-direction: column; gap: 8px; padding: 8px 12px 0; overflow-y: auto; flex: 1; min-height: 0; }
.home-card { background: var(--surface, #1a1a22); border: 1px solid var(--border); border-radius: 12px;
  padding: 11px 13px; animation: homeCardIn 0.32s ease; }
@keyframes homeCardIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
/* Short type badge (Insight / Follow up / Morning brief) */
.home-card-type-label { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--accent-light, #d42525); margin-bottom: 4px; }
/* Card title — bold, max 2 lines, then ellipsis */
.home-card-title-line { font-size: 0.92rem; font-weight: 600; color: var(--text, #eee);
  line-height: 1.35; margin-bottom: 8px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* Legacy alias kept so old code paths don't break */
.home-card-cat { display: none; }
.home-card-text { display: none; }
/* Touch targets (aug20 review). These were `padding: 4px 2px` with `gap: 6px` — about 24px
   tall and 2px apart, well under the ~44px a thumb needs. Worse, the row swallows taps that
   miss (see the onclick in _paintHomeCards), so a near-miss did nothing at all: no button, no
   card, not even a flicker. That is most of what "the buttons don't work" actually was.
   The gap is now small and the buttons carry their own hit area instead. */
.home-card-actions { display: flex; gap: 2px; align-items: center; justify-content: flex-end; flex-wrap: wrap;
  margin: 0 -6px -4px; }
.home-card-cta { background: none; border: none; color: var(--accent-light, #d42525); font-weight: 600;
  font-size: 0.83rem; cursor: pointer; padding: 0 10px; min-height: 44px;
  display: inline-flex; align-items: center; gap: 3px; }
.home-card-cta:active { opacity: 0.6; }
.home-card-cta[disabled] { opacity: 0.45; cursor: default; }
/* Tapped, not yet confirmed by the server. The ✓ only lands once the write is acknowledged. */
.home-card-cta.pending { opacity: 0.5; }
.home-card-cta-sec { color: var(--text2, #999); font-weight: 500; }
/* Created/Due meta on reminder cards — sits right of the CTA buttons. */
.home-card-meta { font-size: 0.68rem; color: var(--text2, #999); margin-left: auto;
  padding: 4px 8px; white-space: nowrap; }
/* Reminder contact CTAs (call / WhatsApp / email / LinkedIn) — compact icon buttons. */
.cover-rem-cta { font-size: 1rem; padding: 0 8px; min-width: 44px; min-height: 44px; justify-content: center; }
.cover-rem-cta[title="LinkedIn"] { font-weight: 800; font-style: italic; font-size: 0.9rem; }
/* ── Possible-duplicate review (list, not chat) ─────────────────────────────── */
.dup-review-overlay { position: fixed; inset: 0; z-index: 4000; background: rgba(0,0,0,0.45);
  display: none; align-items: flex-end; justify-content: center; }
.dup-review-sheet { background: #fff; width: 100%; max-width: 620px; max-height: 88vh;
  border-radius: 18px 18px 0 0; display: flex; flex-direction: column; overflow: hidden;
  box-shadow: 0 -4px 24px rgba(0,0,0,0.2); }
.dup-review-head { display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px 8px; }
.dup-review-title { font-size: 1.05rem; font-weight: 700; color: #1a1a1a; }
.dup-review-close { background: none; border: none; font-size: 1.6rem; line-height: 1;
  color: #999; cursor: pointer; padding: 0 4px; }
.dup-review-sub { padding: 0 18px 10px; font-size: 0.82rem; color: var(--text2, #888); }
.dup-review-list { overflow-y: auto; padding: 4px 12px 24px; }
.dup-review-loading { padding: 40px 0; text-align: center; color: #999; font-size: 0.85rem; }
.dup-row { border: 1px solid #eee; border-radius: 12px; padding: 12px 14px; margin: 8px 4px;
  transition: opacity 0.3s ease, transform 0.3s ease; background: #fff; }
.dup-row-fading { opacity: 0; transform: translateX(24px); }
.dup-person { padding: 3px 0; }
.dup-person-name { font-weight: 700; color: #c61919; font-size: 0.95rem; }
.dup-person-link { display: inline-block; margin-left: 7px; padding: 0 6px; border-radius: 5px;
  background: #f2e3e3; color: #c61919; font-size: 0.68rem; font-weight: 700;
  text-decoration: none; text-transform: uppercase; letter-spacing: 0.03em; vertical-align: 2px; }
.dup-person-desc { font-size: 0.8rem; color: #555; margin-top: 1px; }
.dup-vs { text-align: center; color: #bbb; font-size: 0.95rem; margin: 2px 0; }
.dup-row-actions { display: flex; gap: 10px; margin-top: 12px; }
.dup-btn { flex: 1; border: none; border-radius: 9px; padding: 10px 0; font-size: 0.86rem;
  font-weight: 700; cursor: pointer; color: #fff; }
.dup-btn-same { background: #c61919; }
.dup-btn-sep { background: #fff; color: #c61919; border: 1.5px solid #c61919; }
.dup-btn:active { opacity: 0.7; }
.dup-btn:disabled { opacity: 0.5; }

.home-empty { padding: 28px 24px; text-align: center; }
.home-empty-text { font-size: 0.85rem; color: var(--text2, #999); line-height: 1.5; }
.home-empty-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 14px; }
.home-empty-btn { border: none; border-radius: 999px; padding: 8px 14px; font-size: 0.8rem; font-weight: 600;
  background: var(--accent, #d32f2f); color: #fff; cursor: pointer; }
.home-empty-btn.secondary { background: transparent; color: var(--accent, #d32f2f);
  border: 1px solid var(--accent, #d32f2f); }

/* Back-to-home pill (chat mode only) */
.home-back-btn { position: absolute; top: calc(var(--cover-total-collapsed) + 6px); left: 10px; z-index: 30; background: var(--surface, #1a1a22);
  border: 1px solid var(--border); color: var(--text, #eee); border-radius: 18px; padding: 5px 12px;
  font-size: 0.78rem; cursor: pointer; box-shadow: 0 1px 4px rgba(0,0,0,0.2); }
.home-back-btn:active { background: var(--surface2, #2a2a35); }
.usage-dashboard { background: var(--surface, #1a1a22); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; margin-bottom: 12px; }
.usage-head { display: flex; justify-content: space-between; align-items: center; font-weight: 600; font-size: 0.85rem; margin-bottom: 8px; }
.usage-tier { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--accent, #C61919); border: 1px solid var(--accent, #C61919); border-radius: 10px; padding: 1px 8px; }
.usage-row { margin: 6px 0; }
.usage-row-label { display: flex; justify-content: space-between; font-size: 0.75rem; color: var(--text2); margin-bottom: 3px; }
.usage-track { height: 6px; border-radius: 3px; background: var(--surface2, #2a2a35); overflow: hidden; }
.usage-fill { height: 100%; background: var(--accent, #C61919); border-radius: 3px; }
.usage-fill-near { background: #e0a000; }
.usage-reset { font-size: 0.68rem; color: var(--text2); margin-top: 6px; }
.draft-bubble { border-left: 3px solid var(--accent, #C61919); }
.draft-label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text2); margin-bottom: 4px; }
.draft-body { white-space: pre-wrap; }
.cover-notif-act-primary {
  border-color: var(--accent, #C61919);
  color: var(--accent, #C61919);
  font-weight: 600;
}

/* ── Pulsating expand arrow — inside cover-red, not content-box ──────── */
.cover-expand-arrow {
  align-self: flex-end;
  margin-right: 28px;
  margin-top: -4px;
  margin-bottom: 4px;
  opacity: 0;
  pointer-events: none;
  z-index: 2;
  transition: opacity 0.3s ease;
  flex-shrink: 0;
}
.cover-expand-arrow.visible {
  opacity: 1;
  pointer-events: auto;
  cursor: pointer;
  animation: pulseArrow 1.2s ease-in-out infinite;
}
@keyframes pulseArrow {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(3px); }
}

/* ── Cover menu ───────────────────────────────────────────────────────── */
.cover-menu {
  display: flex;
  flex-direction: column;
  padding: 8px 0;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  pointer-events: none;
  transition: opacity 0.3s ease, max-height 0.35s ease;
}
.cover-menu.visible {
  opacity: 1;
  max-height: 600px;
  pointer-events: auto;
}
.cover-menu-item {
  display: flex; align-items: center; gap: 12px;
  width: 100%; padding: 14px 20px;
  font-size: 0.95rem; font-weight: 500;
  color: var(--text); text-align: left;
  border: none; background: none; cursor: pointer;
  transition: background 0.12s;
}
.cover-menu-item:active { background: var(--accent-bg); }
.cover-menu-item.cover-menu-danger { color: #d32f2f; }
.cover-menu-icon { font-size: 1.1rem; width: 24px; text-align: center; flex-shrink: 0; }
.cover-menu-divider { height: 1px; background: var(--border); margin: 4px 16px; }

/* ── Cover sub-view (views opened inside cover) ──────────────────────── */
.cover-subview {
  background: #fff;
  border-radius: 14px;
  z-index: 3;
  padding: 12px 16px;
}
.cover-back-btn {
  font-size: 0.85rem; color: var(--accent-light); font-weight: 600;
  margin-bottom: 10px; padding: 4px 0;
  background: none; border: none; cursor: pointer;
}

/* ── Contacts alphabet index (Profiles list) ───────────────────────────── */
/* The A–Z rail down the right edge, its sticky section headers and the letter
   bubble that follows a scrubbing finger. Colours are chosen against the cover
   box's hardcoded #fff (see .cover-subview), which is why this block uses
   --accent-light rather than --accent: --accent flips to a neon red in dark mode
   for contrast against a dark page, but this surface is white in both themes. */
.contacts-body {
  display: flex;
  align-items: flex-start;
  gap: 2px;
}
.contacts-list { flex: 1 1 auto; min-width: 0; }

.contacts-section-head {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #fff;
  color: var(--accent-light);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  padding: 4px 2px 3px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 6px;
}

.alpha-index {
  position: sticky;
  top: 2px;
  flex: 0 0 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0;
  z-index: 3;
  cursor: pointer;
  /* The rail owns every touch inside it: without this the drawer's own drag
     handler and the list's native scroll both fight the scrub. */
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.alpha-index-letter {
  font-size: 0.6rem;
  line-height: 1;
  font-weight: 700;
  color: var(--accent-light);
  /* Each letter is a ~9px tall target, so the HIT area is the rail, not the span
     (_alphaLetterAt resolves the letter from the rail's geometry). Pointer events
     are off here so a span can never swallow a move during a capture. */
  pointer-events: none;
}
.alpha-index-letter.empty { color: #c9c9d2; }
.alpha-index-letter.active {
  color: #fff;
  background: var(--accent-light);
  border-radius: 4px;
  padding: 0 2px;
  margin: 0 -2px;
}
.alpha-index.scrubbing { background: rgba(191, 32, 32, 0.06); border-radius: 10px; }

.alpha-bubble {
  position: fixed;
  right: 46px;
  transform: translateY(-50%) scale(0.8);
  min-width: 52px;
  height: 52px;
  padding: 0 10px;
  border-radius: 26px;
  background: var(--accent-light);
  color: #fff;
  font-size: 1.5rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  z-index: 60;
  transition: opacity 0.12s ease, transform 0.12s ease;
}
.alpha-bubble.visible { opacity: 1; transform: translateY(-50%) scale(1); }

/* ── Hamburger handle ─────────────────────────────────────────────────── */
.cover-handle {
  width: 100%;
  height: var(--cover-handle-h);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  cursor: grab;
  -webkit-tap-highlight-color: transparent;
  touch-action: none;
}
.cover-handle:active { cursor: grabbing; }

/* Curved background for handle — transparent sides, only red tab visible */
.cover-handle::before {
  content: '';
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%;
  background: transparent;
}
/* Red fill in the curved tab center */
.cover-handle::after {
  content: '';
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%;
  background: var(--cover-red);
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 480 40' preserveAspectRatio='none'%3E%3Cpath d='M0,0 L170,0 Q200,0 210,20 Q220,40 240,40 Q260,40 270,20 Q280,0 310,0 L480,0 Z' fill='white'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 480 40' preserveAspectRatio='none'%3E%3Cpath d='M0,0 L170,0 Q200,0 210,20 Q220,40 240,40 Q260,40 270,20 Q280,0 310,0 L480,0 Z' fill='white'/%3E%3C/svg%3E");
  mask-size: 100% 100%; -webkit-mask-size: 100% 100%;
  z-index: -1;
}
.cover-hamburger {
  display: flex; flex-direction: column; gap: 4px;
  align-items: center; z-index: 1; padding: 8px;
}
.cover-hamburger span {
  display: block; width: 22px; height: 2px;
  background: #fff; border-radius: 1px;
  transition: background 0.3s ease;
}

/* Pulsating red notification indicator on hamburger */
.cover-hamburger.has-notifs span {
  animation: hamburgerNotifPulse 1.4s ease-in-out infinite;
}
@keyframes hamburgerNotifPulse {
  0%, 100% { background: #fff; }
  50% { background: #C61919; box-shadow: 0 0 6px rgba(255, 68, 68, 0.6); }
}
@media (hover: hover) {
  .cover-handle:hover { cursor: grab; }
  .cover-handle:hover .cover-hamburger span { background: #ffffffcc; }
}

/* ── Chat feed padding ────────────────────────────────────────────────── */
.chat-feed {
  padding-top: calc(var(--cover-total-collapsed) + 20px) !important;
  /* The cover is position:fixed and outside this scroll container, so
     scrollIntoView ignores the padding — scroll-padding makes the browser's own
     anchoring account for it (a landed answer's top no longer hides under it). */
  scroll-padding-top: calc(var(--cover-total-collapsed) + 16px);
  overscroll-behavior: contain;
}
.chat-input-bar {
  padding-bottom: calc(10px + var(--safe-bottom)) !important;
  position: relative; z-index: 1;
}

/* ── Hide old header ──────────────────────────────────────────────────── */
.header { display: none !important; }

/* ── Mention Dropdown ────────────────────────────────────────────────── */
.mention-dropdown {
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  max-height: 200px;
  overflow-y: auto;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px 12px 0 0;
  box-shadow: 0 -4px 20px rgba(0,0,0,0.15);
  z-index: 1000;
  padding: 4px 0;
}
.mention-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  cursor: pointer;
  transition: background 0.15s;
}
.mention-item:hover,
.mention-item-active {
  background: var(--hover);
}
.mention-icon {
  font-size: 18px;
  width: 28px;
  text-align: center;
  flex-shrink: 0;
}
.mention-name {
  font-weight: 500;
  color: var(--text);
  font-size: 14px;
}
.mention-meta {
  font-size: 12px;
  color: var(--text-secondary);
  margin-left: auto;
}

/* Mention context chip — no longer used (mention is inline text in textarea) */

/* ── Command Info Modal ──────────────────────────────────────────────── */
.command-info-section {
  text-align: left;
  padding: 4px 0;
}
.command-info-group {
  margin-bottom: 16px;
}
.command-info-heading {
  font-weight: 600;
  font-size: 14px;
  color: var(--accent);
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.command-info-item {
  font-size: 13px;
  color: var(--text);
  padding: 3px 0;
  line-height: 1.5;
}
.command-info-item code {
  background: var(--hover);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 12px;
  font-family: 'SF Mono', 'Menlo', monospace;
  color: var(--accent);
}
.command-info-example {
  background: var(--hover);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 12px;
  font-family: 'SF Mono', 'Menlo', monospace;
  color: var(--text-secondary);
  white-space: pre-line;
  line-height: 1.6;
  margin-top: 6px;
}

/* ── Multi-select popup items ────────────────────────────────────────── */
.multi-select-item {
  display: flex !important;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}
.multi-select-item input[type="checkbox"] {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  accent-color: var(--accent, #C61919);
  cursor: pointer;
}
.multi-select-item input[type="checkbox"]:disabled {
  opacity: 0.4;
  cursor: default;
}

/* ── WhatsApp Chat Import ──────────────────────────────────────────────────── */

.whatsapp-import-modal {
  max-width: 380px;
  width: 90vw;
}

.whatsapp-instructions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 16px 0;
}

.whatsapp-step {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  color: var(--text-secondary, #6b6b80);
  line-height: 1.4;
}

.step-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  min-width: 22px;
  border-radius: 50%;
  background: var(--accent, #C61919);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
}

.whatsapp-note {
  font-size: 12px;
  color: var(--text-muted, #999);
  margin: 8px 0;
  padding: 8px 12px;
  background: var(--bg-secondary, #f0f0f3);
  border-radius: 8px;
}

.whatsapp-divider {
  height: 1px;
  background: var(--border, #e0e0e5);
  margin: 12px 0;
}

.whatsapp-or {
  font-size: 13px;
  color: var(--text-secondary, #6b6b80);
  text-align: center;
  margin-bottom: 12px;
}

.whatsapp-open-btn {
  background: #25D366 !important;
  text-decoration: none;
  text-align: center;
}

.whatsapp-processing {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 24px 0;
  font-size: 14px;
  color: var(--text-secondary, #6b6b80);
}

.whatsapp-success {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 16px 0;
  font-size: 14px;
  text-align: center;
}

.whatsapp-processing-status {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text-muted, #999);
}

.whatsapp-shared-info {
  text-align: center;
  padding: 12px 0;
  font-size: 14px;
  color: var(--text-secondary, #6b6b80);
}

.whatsapp-associate {
  margin: 12px 0;
}

.whatsapp-associate label {
  display: block;
  font-size: 13px;
  color: var(--text-secondary, #6b6b80);
  margin-bottom: 6px;
}

.whatsapp-select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border, #e0e0e5);
  border-radius: 8px;
  background: var(--bg, #fff);
  color: var(--text-primary, #1a1a2e);
  font-size: 14px;
  appearance: none;
  -webkit-appearance: none;
}

/* WhatsApp import suggestion tile (in chat view) */
.whatsapp-import-tile {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  margin: 8px 0;
  background: var(--bg, #fff);
  border: 1px solid var(--border, #e0e0e5);
  border-radius: 12px;
  cursor: pointer;
  transition: background 0.15s;
}

.whatsapp-import-tile:active {
  background: var(--bg-secondary, #f0f0f3);
}

.wa-tile-icon {
  font-size: 24px;
  flex-shrink: 0;
}

.wa-tile-content {
  flex: 1;
  min-width: 0;
}

.wa-tile-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary, #1a1a2e);
}

.wa-tile-subtitle {
  font-size: 12px;
  color: var(--text-muted, #999);
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wa-tile-dismiss {
  background: none;
  border: none;
  color: var(--text-muted, #999);
  font-size: 16px;
  padding: 4px;
  cursor: pointer;
  flex-shrink: 0;
}

/* WhatsApp person picker */
.wa-person-pick-list {
  max-height: 300px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.wa-person-pick-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.12s;
}

.wa-person-pick-item:active,
.wa-person-pick-item:hover {
  background: var(--bg-secondary, #f0f0f3);
}

.wa-person-pick-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--accent, #C61919);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  flex-shrink: 0;
}

.wa-person-pick-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary, #1a1a2e);
}

/* ── Post-event follow-up grid ───────────────────────────────────────────── */
.chat-post-event-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 4px 0;
}
.chat-post-event-person {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--bg);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  text-align: left;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  width: 100%;
}
.chat-post-event-person:active,
.chat-post-event-person:hover {
  background: var(--surface2);
  border-color: var(--cover-red, #C61919);
}
.chat-post-event-person:disabled {
  opacity: 0.5;
  cursor: default;
}
.chat-post-event-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.chat-post-event-name {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chat-post-event-desc {
  font-size: 0.75rem;
  color: var(--text2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── WhatsApp prefill editor ─────────────────────────────────────────────── */
.chat-wa-editor-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  background: var(--surface2, #f5f5f5);
  border-radius: var(--radius-sm);
  margin: 4px 0;
}
.chat-wa-editor-label {
  font-size: 0.8rem;
  color: var(--text2);
  font-weight: 500;
}
.chat-wa-editor-textarea {
  width: 100%;
  padding: 10px;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  font-size: 0.875rem;
  color: var(--text);
  background: var(--bg);
  resize: vertical;
  font-family: inherit;
  line-height: 1.5;
  box-sizing: border-box;
}
.chat-wa-editor-textarea:focus {
  outline: none;
  border-color: var(--cover-red, #C61919);
}

/* ══════════════════════════════════════════════════════════════════════════
   V2 Components — Step Trace, Streaming Message, Contact Tile, Insight Card,
   Morning Brief
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Step Trace ─────────────────────────────────────────────────────────── */
.step-trace {
  margin-bottom: 4px;
  font-size: 0.78rem;
  color: var(--text2);
}
.step-trace-toggle {
  background: none;
  border: none;
  padding: 4px 0;
  color: var(--text2);
  font-size: 0.78rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
}
.step-trace-toggle:hover { color: var(--text); }
.step-trace-chevron { transition: transform 0.15s; font-style: normal; }
.step-trace.expanded .step-trace-chevron { transform: rotate(90deg); }
.step-trace-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease;
}
.step-trace.expanded .step-trace-body { max-height: 400px; }
.step-trace.collapsed { opacity: 0.5; }
.step-trace-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  border-left: 2px solid var(--border);
  margin: 2px 0;
}
.step-trace-item.status-active { border-left-color: var(--accent); }
.step-trace-item.status-complete { border-left-color: var(--green, #1a7f37); opacity: 0.8; }
.step-trace-item.status-error { border-left-color: var(--accent); }
.step-trace-icon {
  font-size: 0.75rem;
  width: 14px;
  text-align: center;
  flex-shrink: 0;
}
.step-trace-item.status-active .step-trace-icon {
  animation: step-pulse 1s ease-in-out infinite;
}
@keyframes step-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

/* ── Streaming Message ──────────────────────────────────────────────────── */
.streaming-content { }
/* Caret only while text is GENUINELY revealing (.streaming is added on first
   delta / reveal start, never at create time — so it can't flash on a one-shot
   render). */
.chat-msg.streaming .chat-bubble:last-child::after {
  content: '';
  display: inline-block;
  width: 2px; height: 1.05em;
  background: var(--accent);
  vertical-align: -2px; margin-left: 2px;
  animation: cursor-blink 0.9s steps(1) infinite;
}
@keyframes cursor-blink { 50% { opacity: 0; } }

/* ── Contact Tile ───────────────────────────────────────────────────────── */
.contact-tile {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  margin-top: 8px;
  transition: all 0.15s;
}
.contact-tile:hover { border-color: var(--accent); }
.contact-tile-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.contact-tile-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.contact-tile-info { flex: 1; min-width: 0; }
.contact-tile-name {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.contact-tile-subtitle {
  font-size: 0.75rem;
  color: var(--text2);
  margin-top: 1px;
}
.contact-tile-strength {
  width: 36px;
  height: 4px;
  background: var(--border);
  border-radius: 2px;
  overflow: hidden;
  flex-shrink: 0;
}
.contact-tile-strength-bar {
  height: 100%;
  background: var(--accent);
  border-radius: 2px;
  transition: width 0.4s ease;
}
.contact-tile-reason {
  font-size: 0.8rem;
  color: var(--text);
  line-height: 1.4;
  margin-bottom: 6px;
  font-style: italic;
}
.contact-tile-last {
  font-size: 0.72rem;
  color: var(--text2);
  margin-bottom: 8px;
}
.contact-tile-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.contact-tile-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  border-radius: 14px;
  font-size: 0.72rem;
  font-weight: 600;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  transition: all 0.15s;
}
.contact-tile-btn:active { transform: scale(0.96); background: var(--surface2); }
.contact-tile-btn-icon { font-size: 0.85rem; }
.contact-tile-reach { font-size: 0.68rem; font-weight: 700; padding: 2px 7px; border-radius: 999px;
  margin-left: auto; white-space: nowrap; }
.contact-tile-reach-known { background: #e8f5e9; color: #2e7d32; }
.contact-tile-reach-acquaintance { background: #fff8e1; color: #f57f17; }
.contact-tile-reach-cold { background: #fce4ec; color: #b71c1c; }

/* ── Insight Card ───────────────────────────────────────────────────────── */
.insight-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  margin-top: 8px;
  transition: all 0.15s, opacity 0.3s, transform 0.3s;
}
.insight-card.urgency-high { border-left-color: var(--accent); }
.insight-card.urgency-medium { border-left-color: #e8a317; }
.insight-card.urgency-low { border-left-color: var(--border); }
.insight-card.dismissed { opacity: 0; transform: translateX(16px); }
.insight-card-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}
.insight-card-icon { font-size: 1rem; }
.insight-card-category {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text2);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  flex: 1;
}
.insight-card-badge {
  font-size: 0.65rem;
  font-weight: 700;
  background: var(--accent);
  color: #fff;
  padding: 2px 6px;
  border-radius: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.insight-card-summary {
  font-size: 0.85rem;
  color: var(--text);
  line-height: 1.4;
  margin-bottom: 8px;
}
.insight-card-person {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--accent);
  background: var(--accent-bg, rgba(198,25,25,0.08));
  padding: 2px 8px;
  border-radius: 10px;
  margin-bottom: 8px;
}
.insight-card-actions {
  display: flex;
  gap: 6px;
}
.insight-card-btn {
  padding: 5px 12px;
  border-radius: 14px;
  font-size: 0.75rem;
  font-weight: 600;
  border: 1px solid var(--border);
  background: var(--surface2);
  color: var(--text);
  cursor: pointer;
  transition: all 0.15s;
}
.insight-card-btn.primary {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.insight-card-btn:active { transform: scale(0.96); }

/* ── Morning Brief Modal ────────────────────────────────────────────────── */
.morning-brief-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 1000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s;
}
.morning-brief-overlay.visible {
  opacity: 1;
  pointer-events: all;
}
.morning-brief-modal {
  background: var(--bg);
  border-radius: 20px 20px 0 0;
  width: 100%;
  max-width: 520px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.32, 0, 0, 1);
}
.morning-brief-overlay.visible .morning-brief-modal {
  transform: translateY(0);
}
.morning-brief-header {
  padding: 20px 20px 12px;
  border-bottom: 1px solid var(--border);
}
.morning-brief-title {
  font-size: 0.9rem;
  color: var(--text);
  line-height: 1.4;
}
.morning-brief-date {
  font-size: 0.75rem;
  color: var(--text2);
  margin-top: 3px;
}
.morning-brief-cards {
  flex: 1;
  overflow-y: auto;
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.morning-brief-footer {
  padding: 12px 16px 20px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 12px;
}
.morning-brief-done-btn {
  flex: 1;
  padding: 10px;
  border-radius: 12px;
  background: var(--accent);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 600;
  border: none;
  cursor: pointer;
}
.morning-brief-more-note {
  font-size: 0.75rem;
  color: var(--text2);
}

/* ── WhatsApp tracked-chats picker ─────────────────────────────────────────
   Reuses the .chats-menu bottom sheet, the .circle-filter chips and the
   .multi-select-item checkbox rows so it reads as part of the app rather than
   a bolted-on consent screen. Taller than the default sheet because in gate
   mode it is the ONLY thing on screen until the user finishes. */
.wa-chats-sheet { max-height: 88vh; }
/* .chats-menu is a flex COLUMN. Everything that is not the scrolling list must be flex:0 0 auto —
   without it the browser shrinks these rows to fit a long list, which collapsed the tab chips to a
   sliver and shoved the search box over them. */
.wa-chats-sub { flex: 0 0 auto; padding: 10px 18px 0; color: var(--text2, #999);
  font-size: 0.82rem; line-height: 1.5; }
.wa-chats-sheet .circle-filter { flex: 0 0 auto; padding: 10px 14px 4px; }
.wa-chats-search { flex: 0 0 auto; display: block; margin: 4px 14px 8px; width: calc(100% - 28px);
  padding: 10px 14px; background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius-sm, 10px); color: var(--text, #eee); font-size: 0.9rem; outline: none; }
.wa-chats-search:focus { border-color: var(--accent, #C61919); }
.wa-chats-search::placeholder { color: var(--text2, #999); }
.wa-chats-list { flex: 1 1 auto; overflow-y: auto; padding: 2px 8px 8px; min-height: 120px; }
.wa-chat-row { padding: 11px 10px; border-radius: 10px; gap: 12px; }
.wa-chat-row:active { background: var(--surface2, #2a2a35); }
.wa-chat-name { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--text, #eee); font-size: 0.9rem; }
.wa-chat-meta { flex: 0 0 auto; color: var(--text2, #999); font-size: 0.72rem; white-space: nowrap; }
.wa-chats-foot { flex: 0 0 auto; padding: 10px 18px 16px; border-top: 1px solid var(--border);
  background: var(--surface, #1a1a22); }
.wa-chats-bulk { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.wa-chats-link { background: none; border: none; padding: 0; cursor: pointer;
  color: var(--accent, #C61919); font-size: 0.82rem; font-weight: 600; }
.wa-chats-dot { color: var(--text2, #999); }
.wa-chats-note { color: var(--text2, #999); font-size: 0.74rem; line-height: 1.5; }
.wa-chats-note div + div { margin-top: 5px; }
.wa-chats-done { width: 100%; margin-top: 12px; }

/* ── Rate an answer (aug12): tap-and-hold an assistant bubble ───────────────── */
/* Bottom sheet rather than a popover: thumb-reachable on a phone, and it cannot cover the
   answer being judged. */
.rate-sheet { position: fixed; inset: 0; z-index: 2400; background: rgba(0,0,0,0.45);
  display: flex; align-items: flex-end; justify-content: center; }
/* --bg2 was never defined anywhere, so this always fell back to the hardcoded dark #17171b —
   while .rate-note's colour follows --text, which is #16161f in LIGHT mode. Dark text on a dark
   sheet: the user could not see what they were typing (aug15). Use the real surface variable so
   the sheet follows the theme in both directions. */
.rate-sheet-inner { width: 100%; max-width: 520px; background: var(--surface, #17171b);
  border-top-left-radius: 18px; border-top-right-radius: 18px; padding: 18px 18px 24px;
  border-top: 1px solid var(--border, rgba(255,255,255,0.12)); }
.rate-q { font-size: 0.95rem; font-weight: 600; color: var(--text, #eee); margin-bottom: 12px; }
.rate-btns { display: flex; gap: 12px; margin-bottom: 12px; }
.rate-btn { flex: 1; font-size: 1.5rem; padding: 10px 0; border-radius: 12px; cursor: pointer;
  background: transparent; border: 1px solid var(--border, rgba(255,255,255,0.16)); }
.rate-btn.sel { border-color: var(--accent, #BF2020); background: rgba(191,32,32,0.14); }
.rate-note { width: 100%; box-sizing: border-box; resize: none; border-radius: 10px; padding: 9px;
  /* 16px: anything smaller makes iOS Safari zoom the whole page on focus. */
  font-size: 16px; font-family: inherit; color: var(--text, #eee); background: var(--bg, transparent);
  border: 1px solid var(--border, rgba(255,255,255,0.16)); min-height: 64px; }
.rate-note::placeholder { color: var(--text2, #8a8a9a); opacity: 1; }
.rate-note:focus { outline: none; border-color: var(--accent, #BF2020); }
.rate-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 12px; }
.rate-cancel, .rate-send { font-size: 0.82rem; font-weight: 600; padding: 8px 16px;
  border-radius: 20px; cursor: pointer; border: 1px solid var(--border, rgba(255,255,255,0.16));
  background: transparent; color: var(--text, #eee); }
.rate-send { background: var(--accent, #BF2020); border-color: var(--accent, #BF2020); color: #fff; }
.rate-send:disabled { opacity: 0.45; cursor: default; }

/* ══════════════════════════════════════════════════════════════════════════
   Chat UI rebuild (aug12) — work trace, message actions, stop, dark mode,
   accessibility. See docs/CHAT_UI_REBUILD.md.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Live work trace ────────────────────────────────────────────────────── */
.work-trace { margin: 6px 0 16px; align-self: stretch; }
.work-trace-body { display: flex; flex-direction: column; }

.work-row {
  display: flex; align-items: center; gap: 9px;
  padding: 5px 0;
  font-size: 13.5px; line-height: 1.4;
  color: var(--text2);
}
.work-row.done { color: var(--text3); }
.work-row.err  { color: var(--accent); }
.work-row.live { color: var(--text); font-weight: 500; }

.work-ico {
  width: 16px; height: 16px; flex-shrink: 0;
  display: grid; place-items: center;
  font-size: 11px;
}
.work-row.done .work-ico { color: var(--green); }

.work-spin {
  width: 13px; height: 13px; border-radius: 50%;
  border: 1.8px solid var(--accent-bg);
  border-top-color: var(--accent);
  animation: work-spin 0.7s linear infinite;
}
@keyframes work-spin { to { transform: rotate(360deg); } }

/* Shimmer only on the active label — signals "still working" without a second spinner */
.work-row.live .work-label {
  background: linear-gradient(90deg, var(--text2) 20%, var(--accent) 45%, var(--text2) 70%);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  animation: work-shim 1.9s linear infinite;
}
@keyframes work-shim { to { background-position: -220% 0; } }

.work-elapsed {
  margin-left: auto;
  font: 500 11.5px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--text3);
  font-variant-numeric: tabular-nums;
}

/* Pre-first-step pips */
.work-pips { display: flex; gap: 5px; align-items: center; padding: 10px 0; }
.work-pips i {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent); opacity: 0.28;
  animation: work-pip 1.25s ease-in-out infinite;
}
.work-pips i:nth-child(2) { animation-delay: 0.16s; }
.work-pips i:nth-child(3) { animation-delay: 0.32s; }
@keyframes work-pip {
  0%, 60%, 100% { opacity: 0.28; transform: translateY(0); }
  30%           { opacity: 1;    transform: translateY(-3px); }
}

/* Collapsed summary — one line, tappable to re-expand */
.work-trace.collapsed { cursor: pointer; }
.work-trace.collapsed .work-trace-body { display: none; }
.work-trace.collapsed::before {
  content: "✓  " attr(data-summary);
  display: inline-flex; align-items: center;
  font-size: 12.5px; color: var(--text3);
  padding: 3px 0;
}
.work-trace.collapsed:hover::before { color: var(--text2); }
.work-trace.collapsed:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px;
}

/* ── Message actions (Copy · Retry · 👍 · 👎) ──────────────────────────── */
.msg-acts {
  display: flex; gap: 2px; margin-top: 8px;
  opacity: 0; transition: opacity var(--dur-fast) var(--ease);
}
.chat-msg.assistant:hover .msg-acts,
.msg-acts:focus-within { opacity: 1; }
@media (hover: none) { .msg-acts { opacity: 0.55; } }   /* touch: always visible */

.msg-act {
  display: inline-flex; align-items: center; gap: 5px;
  min-height: 32px; padding: 5px 9px;
  border: none; background: none; border-radius: 8px;
  font-size: 12px; font-weight: 500; color: var(--text3);
  cursor: pointer;
}
.msg-act:hover { background: var(--surface); color: var(--text2); }
.msg-act:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.msg-act[aria-pressed="true"] { color: var(--accent); }

/* ── Stop button (swaps with send while a turn runs) ───────────────────── */
.chat-input-bar .chat-stop-btn { display: none; }
.chat-input-bar.generating .chat-send-btn { display: none; }
.chat-input-bar.generating .chat-stop-btn { display: grid; place-items: center; }
.chat-stop-btn {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--text); color: var(--bg);
  flex-shrink: 0;
}

/* ── Focus visibility (there was none anywhere) ────────────────────────── */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ── Dark mode ─────────────────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #111114;
    --surface: #1b1b21;
    --surface2: #24242c;
    --border: #2b2b34;
    --border-strong: #3a3a46;
    --text: #f0f0f4;
    --text2: #a3a3b4;
    --text3: #77778a;
    --accent: #FF5A5A;        /* #BF2020 on #111114 is 2.6:1 — fails. This is 5.9:1. */
    --accent-bg: rgba(255, 90, 90, 0.12);
    --accent-on: #1a0505;
    --green: #3fb950;
    --cover-red: #8f1414;
  }
  /* The user bubble is a brand surface: stays #BF2020 in either theme
     (white on #BF2020 is 6.1:1; --accent at #FF5A5A would be neon). */
  :root:not([data-theme="light"]) .chat-msg.user .chat-bubble {
    background: #BF2020; color: #fff;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #111114;
  --surface: #1b1b21;
  --surface2: #24242c;
  --border: #2b2b34;
  --border-strong: #3a3a46;
  --text: #f0f0f4;
  --text2: #a3a3b4;
  --text3: #77778a;
  --accent: #FF5A5A;
  --accent-bg: rgba(255, 90, 90, 0.12);
  --accent-on: #1a0505;
  --green: #3fb950;
  --cover-red: #8f1414;
}
:root[data-theme="dark"] .chat-msg.user .chat-bubble {
  background: #BF2020; color: #fff;
}

/* ── Reduced motion ────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  /* Keep progress legible without motion */
  .work-row.live .work-label { -webkit-text-fill-color: var(--text); animation: none; }
  .work-spin { border-top-color: var(--accent); }
}