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

:root {
  --ink: #1c1c1e;
  --mid: #3a3a3c;
  --lite: #8e8e93;
  --bg: #F2F2F7;
  --paper: #F7F7F7;
  --white: #FFFFFF;
  --blue: #007AFF;
  --blue-light: rgba(0,122,255,0.08);
  --blue-border: rgba(0,122,255,0.25);
  --rule: rgba(60,60,67,0.18);
  --red: #FF3B30;
  --green: #34C759;
  --orange: #FF9500;
  --radius: 16px;
  --radius-sm: 12px;
  --radius-pill: 999px;
  --ui: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", system-ui, sans-serif;
  --dsp: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", system-ui, sans-serif;
  --sidebar-w: 260px;
  /* type scale */
  --text-xs: 11px;
  --text-sm: 13px;
  --text-base: 15px;
  --text-lg: 17px;
  --text-xl: 22px;
  --text-2xl: 28px;
  /* spacing rhythm */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 48px;
  /* elevation */
  --shadow-card: 0 1px 2px rgba(0,0,0,0.04);
  --shadow-raised: 0 4px 16px rgba(0,0,0,0.08);
  --shadow-overlay: 0 12px 40px rgba(0,0,0,0.18);
  /* semantic tints */
  --green-light: rgba(52,199,89,0.12);
  --orange-light: rgba(255,149,0,0.12);
  --red-light: rgba(255,59,48,0.12);
  /* motion — tool-crisp, strong ease-out (not marketing delight) */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --ease: var(--ease-out);
  --dur-fast: .12s;
  --dur: .2s;
}

body {
  font-family: var(--ui);
  background: var(--bg);
  color: var(--ink);
  min-height: 100vh;
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
}

/* ─── HEADER ─── */
.header {
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  color: var(--ink);
  /* Insets folded into the shorthand — declaring padding-left/right BEFORE a
     `padding` shorthand silently loses them. Landscape notch would otherwise
     clip the brand and the sign-out button. */
  padding: 0 max(20px, env(safe-area-inset-right)) 0 max(20px, env(safe-area-inset-left));
  height: 52px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  border-bottom: 0.5px solid var(--rule);
}
.header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}
.header-right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.header-user {
  font-size: 13px;
  color: var(--lite);
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.demo-role-toggle {
  gap: var(--sp-2);
}
.demo-role-label {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--lite);
  white-space: nowrap;
}
@media (max-width: 480px) {
  .demo-role-label { display: none; }
}
.hamburger {
  width: 36px; height: 36px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  border: none;
  background: none;
  padding: 4px;
  border-radius: var(--radius-sm);
  transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.hamburger:hover { background: var(--paper); }
.hamburger:active { transform: scale(0.96); }
.hamburger span {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--ink);
  border-radius: 1px;
  transition: transform var(--dur) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
}
.hamburger.open span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }
.header-brand {
  white-space: nowrap;
  font-family: var(--ui);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.3px;
  line-height: 1;
}
.header-brand b { color: var(--blue); font-weight: 700; }

/* ─── SIDEBAR NAV ─── */
.sidebar-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.35);
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
  z-index: 90;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity var(--dur) var(--ease-out),
    backdrop-filter var(--dur) var(--ease-out),
    -webkit-backdrop-filter var(--dur) var(--ease-out);
}
.sidebar-overlay.open {
  opacity: 1;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  pointer-events: all;
}

.sidebar {
  position: fixed;
  top: 52px;
  left: 0;
  bottom: 0;
  width: var(--sidebar-w);
  background: var(--white);
  z-index: 95;
  transform: translateX(-100%);
  transition: transform 0.2s var(--ease-drawer);
  padding: 16px 0;
  display: flex;
  flex-direction: column;
  border-right: 0.5px solid var(--rule);
  box-shadow: 4px 0 24px rgba(0,0,0,0.06);
}
.sidebar.open { transform: translateX(0); }
.sidebar:not(.open) { transition-duration: 0.16s; }

.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 20px;
  color: var(--mid);
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  font-family: var(--ui);
  transition:
    color var(--dur-fast) var(--ease-out),
    background var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.nav-item:hover { color: var(--ink); background: var(--paper); }
.nav-item:active { transform: scale(0.98); }
.nav-item.active {
  color: var(--blue);
  background: var(--blue-light);
  margin: 0 12px;
  padding-left: 16px;
  padding-right: 16px;
  width: calc(100% - 24px);
  border-radius: var(--radius-sm);
}
.nav-item .nav-icon { font-size: 18px; width: 24px; text-align: center; }
.nav-divider {
  height: 0.5px;
  background: var(--rule);
  margin: 12px 20px;
}
.nav-section-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--lite);
  padding: 8px 20px 4px;
}

/* ─── MAIN CONTENT ─── */
.main {
  margin-top: 52px;
  min-height: calc(100vh - 52px);
  min-height: calc(100dvh - 52px);
}
.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 24px 32px;
}
.page-header {
  margin-bottom: 24px;
}
.page-title {
  font-family: var(--ui);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.5px;
  line-height: 1.1;
  margin-bottom: 4px;
}
.page-subtitle {
  color: var(--mid);
  font-size: 14px;
}

/* ─── CARDS ─── */
.card {
  background: var(--white);
  border: 0.5px solid var(--rule);
  border-radius: var(--radius);
  padding: var(--sp-5);
  margin-bottom: var(--sp-4);
  box-shadow: var(--shadow-card);
}
.card-title {
  font-family: var(--ui);
  font-size: 17px;
  font-weight: 600;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}
/* Fixed-width slot so every card title's text starts at the same x,
   whatever the emoji's natural width. */
.card-title-icon {
  flex: none;
  width: 20px;
  font-size: 16px;
  line-height: 1;
  text-align: center;
}

/* ─── TABS ─── */
.tabs {
  display: flex;
  gap: 4px;
  border-bottom: 0.5px solid var(--rule);
  margin-bottom: 20px;
  overflow-x: auto;
}
.tab {
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  border: none;
  background: none;
  color: var(--lite);
  font-family: var(--ui);
  position: relative;
  white-space: nowrap;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}
.tab:hover { color: var(--mid); }
.tab.active { color: var(--blue); font-weight: 600; }
.tab.active::after {
  content: '';
  position: absolute;
  bottom: 0; left: 12px; right: 12px;
  height: 2px;
  background: var(--blue);
  border-radius: 1px;
}
.tab-count {
  background: var(--blue);
  color: var(--white);
  font-size: 11px;
  padding: 2px 7px;
  border-radius: var(--radius-pill);
  margin-left: 6px;
  font-weight: 600;
}

/* ─── COMPOSE FORM ─── */
.form-row {
  display: flex;
  gap: 16px;
  margin-bottom: 16px;
}
.form-group { flex: 1; }
.form-group.narrow { flex: 0 0 160px; }
.form-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--lite);
  display: block;
  margin-bottom: 6px;
}
.form-input, .form-select, .form-textarea {
  width: 100%;
  padding: 11px 14px;
  background: var(--white);
  border: 0.5px solid var(--rule);
  border-radius: var(--radius-sm);
  font-size: 15px;
  font-family: var(--ui);
  color: var(--ink);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px var(--blue-light);
}
.form-textarea { resize: vertical; min-height: 60px; }
.char-count { font-size: 11px; color: var(--lite); text-align: right; margin-top: 4px; }
.char-count.over { color: var(--red); font-weight: 700; }

/* ─── IMPORTANCE PICKER ─── */
.importance-row { display: flex; gap: 4px; }
.importance-btn {
  width: 34px; height: 34px;
  border: 0.5px solid var(--rule);
  border-radius: var(--radius-sm);
  background: var(--white);
  font-size: 14px; font-weight: 600; font-family: var(--ui);
  color: var(--mid);
  cursor: pointer;
  transition:
    border-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out),
    background var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.importance-btn:active { transform: scale(0.96); }
.importance-btn:hover { border-color: var(--blue); color: var(--blue); }
.importance-btn.active { background: var(--blue); border-color: var(--blue); color: var(--white); }

/* ─── TAG PICKER ─── */
.tag-section { margin-bottom: 16px; }
.tag-search-input { margin-bottom: 8px; max-width: 300px; }
.tag-grid { display: flex; flex-wrap: wrap; gap: 6px; }
.tag-chip {
  padding: 6px 12px; font-size: 13px; font-weight: 500;
  border: 0.5px solid var(--rule); border-radius: var(--radius-pill);
  background: var(--white); cursor: pointer; user-select: none;
  transition:
    border-color var(--dur-fast) var(--ease-out),
    background var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.tag-chip:active { transform: scale(0.96); }
.tag-chip:hover { border-color: var(--blue); }
.tag-chip.active { background: var(--blue-light); border-color: var(--blue-border); color: var(--blue); }
.exclude-section { padding-top: 12px; border-top: 1px dashed var(--rule); }
.label-hint { font-weight: 400; color: var(--lite); letter-spacing: 0; text-transform: none; font-size: 10px; }
.tag-chip.exclude:hover { border-color: var(--red); }
.tag-chip.exclude.active { background: #e53e3e11; border-color: #e53e3e44; color: var(--red); }

/* ─── SUGGESTION PREVIEW ─── */
.suggestion-preview {
  background: var(--paper); border: 1px solid var(--rule);
  border-radius: var(--radius); padding: 12px 16px; margin-top: 16px;
}
.preview-label {
  font-size: 10px; font-weight: 700; letter-spacing: 1px;
  text-transform: uppercase; color: var(--lite); margin-bottom: 8px;
}
.preview-button {
  display: inline-block; padding: 8px 16px;
  border: none; border-radius: 18px;
  background: var(--blue); color: var(--white);
  font-size: 15px; font-weight: 500; font-family: var(--ui);
}

/* ─── BUTTONS ─── */
.btn {
  padding: 10px 18px; font-size: 15px; font-weight: 600;
  font-family: var(--ui);
  border: none; border-radius: var(--radius-pill); cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  transition:
    transform var(--dur-fast) var(--ease-out),
    opacity var(--dur-fast) var(--ease-out),
    background var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.btn-primary { background: var(--blue); color: var(--white); box-shadow: 0 4px 14px rgba(0,122,255,0.28); }
.btn-primary:hover { opacity: 0.92; }
.btn-primary:disabled { opacity: 0.4; cursor: not-allowed; box-shadow: none; }
.btn-secondary { background: var(--ink); color: var(--white); }
.btn-ghost { background: var(--paper); border: 0.5px solid var(--rule); color: var(--mid); }
.btn-ghost:hover { background: var(--white); color: var(--ink); }
.btn-danger { background: var(--paper); border: 0.5px solid rgba(255,59,48,0.3); color: var(--red); }
.btn-danger:hover { background: var(--red); color: var(--white); }
.btn-success { background: var(--green); color: var(--white); }
.btn-lg { padding: 14px 24px; font-size: 17px; }
.btn-sm { padding: 6px 14px; font-size: 13px; }
.btn:active:not(:disabled) { transform: scale(0.96); }
@media (hover: hover) and (pointer: fine) {
  .btn:not(:disabled):hover:not(:active) { transform: scale(0.98); }
  .btn:not(:disabled):active { transform: scale(0.96); }
}
.form-actions {
  display: flex; gap: 10px; justify-content: flex-end;
  margin-top: 20px; padding-top: 16px; border-top: 0.5px solid var(--rule);
}

/* ─── STORY LIST ─── */
.story-list { display: flex; flex-direction: column; gap: 8px; }
.story-row {
  background: var(--white); border: 0.5px solid var(--rule); border-radius: var(--radius);
  padding: 14px 16px; display: flex; align-items: center; gap: 14px;
  transition:
    border-color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
}
.story-row:hover { border-color: var(--blue); }
@media (hover: hover) and (pointer: fine) {
  .story-row:hover:not(:active) {
    box-shadow: var(--shadow-raised);
    transform: translateY(-1px);
  }
}
.story-importance {
  width: 36px; height: 36px; border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 700; font-family: var(--ui); flex-shrink: 0;
}
.importance-high { background: rgba(255,59,48,0.12); color: var(--red); }
.importance-mid { background: rgba(255,149,0,0.12); color: var(--orange); }
.importance-low { background: rgba(52,199,89,0.12); color: var(--green); }
.story-info { flex: 1; min-width: 0; }
.story-headline { font-size: 14px; font-weight: 700; margin-bottom: 3px; }
.story-meta { font-size: 11px; color: var(--lite); display: flex; gap: 2px 12px; flex-wrap: wrap; }
.story-tags { display: flex; gap: 4px; flex-shrink: 0; }
.story-tag {
  padding: 2px 8px; font-size: 10px; font-weight: 600;
  background: var(--paper); border: 0.5px solid var(--rule); border-radius: var(--radius-pill); color: var(--mid);
}
.story-status {
  font-size: 10px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase;
  padding: 3px 8px; border-radius: var(--radius-pill); flex-shrink: 0;
}
.status-draft { background: var(--paper); color: var(--lite); }
.status-published { background: #38a16922; color: var(--green); }
.status-sent { background: rgba(0,122,255,0.08); color: var(--blue); }
.status-archived { background: var(--paper); color: var(--lite); }
.story-stats-inline { display: flex; gap: 6px; flex-shrink: 0; }
.stat-pill {
  padding: 3px 8px; font-size: 11px; font-weight: 600;
  background: var(--paper); border: 0.5px solid var(--rule); border-radius: var(--radius-pill);
  color: var(--mid); cursor: help; white-space: nowrap;
}
.story-actions { display: flex; gap: 6px; flex-shrink: 0; }
.story-action-btn {
  padding: 6px 12px; font-size: 13px; font-weight: 500;
  border: 0.5px solid var(--rule); border-radius: var(--radius-pill);
  background: var(--paper); cursor: pointer; color: var(--mid); font-family: var(--ui);
  transition:
    border-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out),
    background var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.story-action-btn:active { transform: scale(0.96); }
.story-action-btn:hover { border-color: var(--ink); color: var(--ink); }
.story-action-btn.delete:hover { border-color: var(--red); color: var(--red); }

/* ─── DETAIL PANEL ─── */
.detail-panel {
  background: var(--white); border: 1px solid var(--rule); border-top: none;
  border-radius: 0 0 var(--radius) var(--radius); padding: 24px; margin-top: -1px;
}
.detail-grid { display: flex; flex-direction: column; gap: 20px; }
.detail-section-title {
  font-size: 10px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--lite); margin-bottom: 10px; padding-bottom: 6px; border-bottom: 1px solid var(--rule);
}
.detail-stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.detail-stat {
  background: var(--paper); border: 1px solid var(--rule);
  border-radius: var(--radius); padding: 14px 16px; text-align: center;
}
.detail-stat-number { font-family: var(--ui); font-size: 28px; font-weight: 700; color: var(--ink); line-height: 1; margin-bottom: 4px; }
.detail-stat-label { font-size: 10px; font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase; color: var(--lite); }
.detail-stat.highlight { background: var(--blue-light); border-color: var(--blue-border); }
.detail-stat.highlight .detail-stat-number { color: var(--blue); }
.detail-info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 24px; font-size: 13px; }
.detail-label { font-weight: 700; color: var(--mid); font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; }
.detail-label-value { color: var(--ink); font-weight: 500; }
.detail-note {
  font-size: 13px; color: var(--mid); line-height: 1.5; font-style: italic;
  padding: 10px 14px; background: var(--paper);
  border-left: 3px solid var(--blue); border-radius: 0 var(--radius) var(--radius) 0;
}
.detail-suggestion-preview {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 20px; border: 1.5px solid var(--blue); border-radius: 20px;
  color: var(--blue); font-size: 14px; font-weight: 600; font-family: var(--ui); background: var(--blue-light);
}
.detail-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

/* ─── SORT BAR ─── */
.sort-bar { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; font-size: 11px; flex-wrap: wrap; }
.sort-label { font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--lite); flex-shrink: 0; }
.sort-options { display: flex; gap: 4px; flex-wrap: wrap; }
.sort-btn {
  padding: 6px 14px; font-size: 13px; font-weight: 500; font-family: var(--ui);
  border: 0.5px solid var(--rule); border-radius: var(--radius-pill);
  background: var(--white); color: var(--mid); cursor: pointer;
  transition:
    border-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out),
    background var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.sort-btn:active { transform: scale(0.96); }
.sort-btn:hover { border-color: var(--blue); color: var(--blue); }
.sort-btn.active { background: var(--blue); border-color: var(--blue); color: var(--white); }

/* ─── BROADCASTS ─── */
.broadcast-reach {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 20px;
  padding: 16px;
  background: rgba(0,122,255,0.06);
  border: 0.5px solid rgba(0,122,255,0.12);
  border-radius: var(--radius);
}
@media (max-width: 640px) {
  .broadcast-reach { grid-template-columns: 1fr; }
}
.broadcast-reach-card {
  background: var(--white);
  border: 0.5px solid var(--rule);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  text-align: center;
}
.broadcast-reach-num {
  font-size: 28px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.1;
}
.broadcast-reach-label {
  font-size: 11px;
  color: var(--lite);
  margin-top: 4px;
  font-weight: 600;
}
.broadcast-launch-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 640px) {
  .broadcast-launch-row { grid-template-columns: 1fr; }
}
.broadcast-launch-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 16px;
  border: 0.5px solid var(--rule);
  border-radius: var(--radius);
  background: var(--white);
  cursor: pointer;
  text-align: left;
  font-family: var(--ui);
  transition:
    border-color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out),
    background var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.broadcast-launch-card:active { transform: scale(0.98); }
.broadcast-launch-card:hover { border-color: var(--blue); }
.broadcast-launch-card.active {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px var(--blue-light);
  background: var(--blue-light);
}
.broadcast-launch-icon { font-size: 20px; }
.broadcast-launch-title { font-size: 15px; font-weight: 600; color: var(--ink); }
.broadcast-launch-sub { font-size: 12px; color: var(--lite); }

/* ─── SCHEDULE / SEND CONTROLS ─── */
.send-controls {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 24px;
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  margin-bottom: 24px;
}
.send-controls-info { flex: 1; }
.send-controls-title {
  font-family: var(--ui);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.2;
}
.send-controls-detail {
  font-size: 12px; color: var(--mid); margin-top: 2px;
}
.schedule-row {
  display: flex; gap: 12px; align-items: center;
}
.schedule-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px; border-radius: var(--radius);
  font-size: 12px; font-weight: 600;
  background: var(--paper); border: 1px solid var(--rule); color: var(--mid);
}
.schedule-badge.active { background: #38a16915; border-color: #38a16944; color: var(--green); }
.schedule-badge .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--lite);
}
.schedule-badge.active .dot { background: var(--green); animation: pulse 2s infinite; }
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}
.send-log {
  margin-top: 16px;
  max-height: 180px;
  overflow-y: auto;
  font-size: 13px;
  font-family: var(--ui);
  color: var(--mid);
  padding: 12px 16px;
  background: var(--paper);
  border: 0.5px solid var(--rule);
  border-radius: var(--radius-sm);
}
.send-log-entry { padding: 3px 0; border-bottom: 1px solid rgba(0,0,0,0.04); }
.send-log-entry:last-child { border-bottom: none; }
.send-log-time { color: var(--lite); margin-right: 8px; }

/* ─── ANALYSIS PAGE ─── */
.analysis-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}
.analysis-card {
  background: var(--white); border: 1px solid var(--rule);
  border-radius: var(--radius); padding: 20px; text-align: center;
}
.analysis-number {
  font-family: var(--ui); font-size: 32px; font-weight: 700; color: var(--ink); line-height: 1;
}
.analysis-label {
  font-size: 10px; font-weight: 700; letter-spacing: 1px;
  text-transform: uppercase; color: var(--lite); margin-top: 6px;
}
.analysis-card.accent { background: var(--blue-light); border-color: var(--blue-border); }
.analysis-card.accent .analysis-number { color: var(--blue); }
.top-stories-list { display: flex; flex-direction: column; gap: 8px; }
.top-story-row {
  display: flex; align-items: center; gap: 14px;
  background: var(--white); border: 1px solid var(--rule); border-radius: var(--radius);
  padding: 12px 16px;
}
.top-story-rank {
  font-family: var(--ui); font-size: 20px; font-weight: 700; color: var(--lite);
  width: 32px; text-align: center; flex-shrink: 0;
}
.top-story-info { flex: 1; }
.top-story-headline { font-size: 14px; font-weight: 700; }
.top-story-meta { font-size: 11px; color: var(--lite); }
.top-story-stat {
  font-family: var(--ui); font-size: 22px; font-weight: 700; color: var(--blue); flex-shrink: 0;
}
.top-story-stat-label { font-size: 9px; color: var(--lite); text-transform: uppercase; letter-spacing: 0.5px; text-align: right; }

/* ─── FEED VIEW PAGE ─── */
.feed-grid { display: flex; flex-direction: column; gap: 10px; }
.feed-card {
  background: var(--white); border: 0.5px solid var(--rule); border-radius: var(--radius);
  padding: 16px 20px;
  display: grid;
  grid-template-columns: 1fr auto auto auto auto;
  align-items: center;
  gap: 20px;
  transition:
    border-color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
}
.feed-card:hover { border-color: var(--blue); }
@media (hover: hover) and (pointer: fine) {
  .feed-card:hover:not(:active) {
    box-shadow: var(--shadow-raised);
    transform: translateY(-1px);
  }
}
.feed-status-badge {
  padding: 4px 10px; border-radius: var(--radius-pill);
  font-size: 10px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase;
  white-space: nowrap;
}
.feed-name { font-size: 15px; font-weight: 700; }
.feed-stat-block { text-align: center; min-width: 80px; }
.feed-stat-num { font-family: var(--ui); font-size: 22px; font-weight: 700; line-height: 1; }
.feed-stat-lbl { font-size: 9px; font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase; color: var(--lite); }
.feed-ok { background: #38a16915; color: var(--green); }
.feed-stale { background: #dd6b2015; color: var(--orange); }
.feed-empty { background: #e53e3e11; color: var(--red); }

/* ─── EMPTY STATE ─── */
.empty-state { text-align: center; padding: 48px 24px; color: var(--lite); }
.empty-state-icon { font-size: 48px; margin-bottom: 12px; }
.empty-state-title {
  font-family: var(--ui); font-size: 20px; font-weight: 600; color: var(--mid);
  margin-bottom: 8px;
}

/* ─── LOGIN ─── */
.login-screen {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: var(--bg);
}
.login-card {
  background: var(--white);
  border: 0.5px solid var(--rule);
  border-radius: var(--radius);
  padding: 40px 36px 36px;
  width: 100%;
  max-width: 420px;
  box-shadow: var(--shadow-raised);
}
.login-logo {
  font-size: 26px;
  font-weight: 700;
  text-align: center;
  margin-bottom: 6px;
  letter-spacing: -0.02em;
}
.login-logo span { margin-left: 4px; }
.login-eyebrow {
  text-align: center;
  color: var(--lite);
  font-size: 15px;
  margin: 0 0 4px;
  line-height: 1.35;
}
.login-subtitle {
  text-align: center;
  color: var(--ink);
  font-size: 17px;
  font-weight: 600;
  margin: 0 0 28px;
  line-height: 1.35;
}
.login-field { margin-bottom: 20px; }
.login-turnstile {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
  min-height: 65px;
}
.login-submit {
  width: 100%;
  margin-bottom: 4px;
}
.login-hint {
  text-align: center;
  color: var(--lite);
  font-size: 13px;
  margin-top: 20px;
  line-height: 1.45;
}
.login-message {
  background: rgba(255, 59, 48, 0.08);
  color: #FF3B30;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  margin-bottom: 20px;
  text-align: center;
  line-height: 1.4;
}
.login-message.success {
  background: var(--blue-light);
  color: var(--blue);
}

/* ─── RESPONSIVE ─── */
@media (max-width: 768px) {
  .container { padding: 16px; }
  .form-row { flex-direction: column; gap: 12px; }
  .form-group.narrow { flex: 1; }
  .story-row { flex-wrap: wrap; }
  .story-tags { width: 100%; }
  .detail-stat-row { grid-template-columns: repeat(2, 1fr); }
  .detail-info-grid { grid-template-columns: 1fr; }
  .detail-two-col { grid-template-columns: 1fr; }
  .analysis-grid { grid-template-columns: repeat(2, 1fr); }
  .feed-card { grid-template-columns: 1fr; gap: 8px; }
  .send-controls { flex-direction: column; align-items: flex-start; }
}

/* Toast notification */
.toast {
  position: fixed;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%) translateY(100%);
  background: var(--ink);
  color: var(--white);
  padding: 12px 20px;
  border-radius: var(--radius-pill);
  font-family: var(--ui);
  font-size: 15px;
  font-weight: 500;
  box-shadow: var(--shadow-overlay);
  z-index: 200;
  opacity: 0;
  transition:
    transform 0.28s var(--ease-out),
    opacity 0.22s var(--ease-out);
  pointer-events: none;
  display: flex;
  align-items: center;
  gap: 10px;
}
.toast.show {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
  pointer-events: all;
  transition-duration: 0.28s, 0.22s;
}
.toast:not(.show) {
  transition-duration: 0.18s, 0.16s;
}
.toast-action {
  margin-left: 4px;
  color: var(--white);
  border-color: rgba(255,255,255,0.35);
  font-size: 13px;
  padding: 4px 10px;
  flex-shrink: 0;
}
.toast-action:hover {
  background: rgba(255,255,255,0.15);
  border-color: rgba(255,255,255,0.5);
}
.toast.success { background: var(--green); }
.toast.error { background: var(--red); }
.toast-icon { font-size: 18px; }

/* Confirm-before-send modal */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(28,28,30,0.45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: brains-modal-backdrop-in 0.24s var(--ease-out) both;
}
.modal-card {
  background: var(--white);
  border: 0.5px solid var(--rule);
  border-radius: var(--radius);
  padding: 24px;
  max-width: 420px;
  width: 100%;
  box-shadow: var(--shadow-overlay);
  transform-origin: center;
  animation: brains-modal-panel-in 0.28s var(--ease-out) both;
}
@keyframes brains-modal-backdrop-in {
  from {
    opacity: 0;
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
  }
  to {
    opacity: 1;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }
}
@keyframes brains-modal-panel-in {
  from { opacity: 0; transform: scale(0.95) translateY(8px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
.modal-title { font-size: 17px; font-weight: 700; margin-bottom: 8px; }
.modal-body { font-size: 14px; color: var(--mid); line-height: 1.5; }
.modal-note { font-size: 12px; color: var(--lite); margin-top: 8px; line-height: 1.4; }
.modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 20px; }

/* Engine health banner (Bundle page) */
.engine-warning-banner {
  background: rgba(255,149,0,0.12);
  border: 0.5px solid rgba(255,149,0,0.4);
  border-radius: var(--radius);
  color: #9A5B00;
  padding: 12px 16px;
  margin-bottom: 16px;
  font-size: 13px;
  font-weight: 600;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* ─── REPLIES: CONVERSATION INBOX ─── */
.convo-layout {
  display: flex;
  background: var(--white);
  border: 0.5px solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
  height: calc(100vh - 240px);
  height: calc(100dvh - 240px);
  min-height: 440px;
}
.convo-list {
  width: 300px;
  flex-shrink: 0;
  border-right: 0.5px solid var(--rule);
  overflow-y: auto;
}
.convo-item {
  display: block;
  width: 100%;
  text-align: left;
  border: none;
  background: none;
  font-family: var(--ui);
  padding: 12px 14px;
  cursor: pointer;
  border-bottom: 0.5px solid var(--rule);
  transition: background var(--dur-fast) var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
.convo-item:hover { background: var(--paper); }
.convo-item.active { background: var(--blue-light); }
.convo-item-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 2px;
}
.convo-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Unread: an iMessage-style blue dot plus a bolder name. Replaces the old
   .convo-count pill, which counted our own sends and never cleared. */
.convo-unread-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--blue);
  flex-shrink: 0;
  margin-right: 2px;
  /* .convo-item is align-items:flex-start, so centre the dot against the row. */
  align-self: center;
  visibility: hidden;
}
.convo-item.unread .convo-unread-dot { visibility: visible; }
.convo-item.unread .convo-name { font-weight: 700; }
.convo-item.unread .convo-snippet { color: var(--ink); }

.convo-list-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: var(--sp-3);
}
.convo-list-head .form-input { flex: 1; }
.convo-compose-btn {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border: none;
  border-radius: 50%;
  background: var(--blue);
  color: var(--white);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out);
}
.convo-compose-btn:active { transform: scale(0.94); }

.compose-picker {
  padding: 0 var(--sp-3) var(--sp-3);
  border-bottom: 0.5px solid var(--rule);
  background: var(--pale);
}
.compose-picker-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--lite);
  padding: 8px 2px 6px;
}
.compose-results { max-height: 240px; overflow-y: auto; margin-top: 8px; }
.compose-result {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: 100%;
  padding: 8px 10px;
  border: none;
  background: transparent;
  border-radius: var(--radius);
  cursor: pointer;
  text-align: left;
}
.compose-result:hover { background: var(--pale); }
.compose-result-name { font-size: var(--text-sm); color: var(--ink); font-weight: 600; }
.compose-result-phone { font-size: 12px; color: var(--lite); }
.convo-list-empty {
  padding: var(--sp-4);
  color: var(--lite);
  font-size: var(--text-sm);
}
.thread-readby {
  padding: 4px var(--sp-4);
  font-size: 12px;
  color: var(--lite);
  border-bottom: 0.5px solid var(--rule);
}

.convo-count {
  background: var(--blue);
  color: var(--white);
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: var(--radius-pill);
  margin-left: 6px;
  vertical-align: 1px;
}
.convo-time { font-size: 11px; color: var(--lite); flex-shrink: 0; white-space: nowrap; }
.convo-snippet {
  font-size: 13px;
  color: var(--mid);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.convo-snippet-reaction { color: var(--lite); }
.convo-thread {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.thread-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 0.5px solid var(--rule);
  background: rgba(247,247,247,0.8);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
.thread-back {
  display: none;
  border: none;
  background: none;
  color: var(--blue);
  font-size: 15px;
  font-weight: 600;
  font-family: var(--ui);
  cursor: pointer;
  padding: 4px 8px 4px 0;
}
.thread-title { flex: 1; min-width: 0; font-size: 15px; font-weight: 600; }
.thread-phone { font-size: 12px; color: var(--lite); font-weight: 400; margin-left: 8px; }
.thread-messages {
  flex: 1;
  overflow-y: auto;
  /* A wide image would otherwise push the whole page sideways. */
  overflow-x: hidden;
  overscroll-behavior: contain;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.thread-timestamp {
  align-self: center;
  font-size: 11px;
  font-weight: 500;
  color: var(--lite);
  margin: 12px 0 6px;
}
.thread-bubble {
  max-width: 72%;
  border-radius: 18px;
  padding: 8px 14px;
  font-size: 14px;
  line-height: 1.35;
  word-break: break-word;
}
.thread-bubble.ours { align-self: flex-end; background: var(--blue); color: var(--white); }
.thread-bubble.theirs { align-self: flex-start; background: #E9E9EB; color: var(--ink); }
button.thread-bubble {
  border: none;
  font-family: var(--ui);
  text-align: left;
  cursor: pointer;
  /* Don't inherit global .btn hover scale — bubbles are content, not chrome */
  transform: none !important;
}
button.thread-bubble-story {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  transition: filter var(--dur-fast) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  button.thread-bubble-story:hover { filter: brightness(1.08); }
}
button.thread-bubble-story:active { filter: brightness(0.95); }
.thread-story-kicker {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  opacity: 0.8;
}
.thread-story-title { font-size: 15px; font-weight: 600; line-height: 1.3; }
.thread-story-hint { font-size: 11px; opacity: 0.75; margin-top: 2px; }
.thread-event-link {
  border: none;
  background: none;
  font-family: var(--ui);
  cursor: pointer;
  text-align: left;
  padding: 2px 4px;
  border-radius: 6px;
}
.thread-event-link:hover { color: var(--blue); background: rgba(0,122,255,0.06); }
.thread-story-modal {
  position: relative;
  max-width: 420px;
  margin: var(--sp-8) auto;
  padding: var(--sp-5);
}
.thread-story-modal-close { position: absolute; top: var(--sp-3); right: var(--sp-3); }
.thread-story-modal-type {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--lite);
  margin-bottom: var(--sp-2);
}
.thread-story-modal-headline {
  font-size: var(--text-lg);
  font-weight: 700;
  padding-right: var(--sp-6);
  margin-bottom: var(--sp-2);
}
.thread-story-modal-message {
  font-size: var(--text-sm);
  line-height: 1.55;
  color: #fff;
  background: var(--blue);
  padding: 10px 14px;
  border-radius: 18px;
  margin-bottom: var(--sp-4);
  white-space: pre-wrap;
}
.thread-story-modal-empty {
  font-size: var(--text-sm);
  color: var(--mid);
  line-height: 1.5;
  margin-bottom: var(--sp-4);
}
.thread-story-modal-internal {
  margin-bottom: var(--sp-4);
  padding: var(--sp-3);
  background: var(--bg);
  border-radius: 12px;
}
.thread-story-modal-internal-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--lite);
  margin-bottom: var(--sp-1);
}
.thread-story-modal-internal p {
  font-size: var(--text-sm);
  color: var(--mid);
  line-height: 1.45;
  margin: 0;
}
.thread-tag {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  opacity: 0.75;
  margin-left: 6px;
}
.thread-event { align-self: flex-start; font-size: 12px; color: var(--lite); padding: 2px 4px; }
.thread-placeholder {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--lite);
  font-size: 14px;
  padding: 24px;
  text-align: center;
}
.thread-composer-note {
  border-top: 0.5px solid var(--rule);
  padding: 10px 16px;
  font-size: 12px;
  color: var(--lite);
  text-align: center;
  background: var(--paper);
}
.thread-composer {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  border-top: 0.5px solid var(--rule);
  padding: 10px 12px;
  /* MUST come after the `padding` shorthand above, or it's reset to 10px.
     Keeps the composer clear of the iPhone home indicator. */
  padding-bottom: calc(10px + env(safe-area-inset-bottom));
  background: rgba(247, 247, 247, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.thread-composer-input {
  flex: 1;
  border: 0.5px solid var(--rule);
  border-radius: 999px;
  padding: 9px 16px;
  font-size: 14px;
  font-family: inherit;
  color: var(--ink);
  background: var(--white);
  outline: none;
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.thread-composer-input:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px var(--blue-light);
}
.thread-composer-send {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border: none;
  border-radius: 50%;
  background: var(--blue);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.thread-composer-send:active:not(:disabled) { transform: scale(0.94); }
.thread-composer-send:disabled { opacity: 0.4; cursor: default; }
/* Attach button: same footprint as send, but ghosted so send stays the hero. */
.thread-composer-attach {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--blue);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.thread-composer-attach:active:not(:disabled) { transform: scale(0.94); }
.thread-composer-attach:disabled { opacity: 0.35; cursor: default; }
/* GIF button: a text wordmark rather than an icon, so it reads instantly. */
.thread-composer-gif {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.02em;
}
/* GIPHY panel: full-width row above the composer input. */
.gif-panel {
  order: -2;
  flex-basis: 100%;
  border-bottom: 0.5px solid var(--rule);
  padding-bottom: 8px;
  margin-bottom: 4px;
}
.gif-grid {
  max-height: 260px;
  overflow-y: auto;
  margin-top: 8px;
  min-height: 60px;
}
.gif-panel-error {
  margin: 8px 0 0;
  font-size: var(--text-sm);
  color: var(--red, #FF3B30);
}
/* Required by GIPHY's terms wherever their API is used. Plain text, not their
   hosted logo — an external image request would beacon every panel open. */
.gif-attribution {
  padding-top: 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--lite);
  text-align: right;
}

/* Pending-photo strip: full-width row ABOVE the input, hence order:-1. */
.thread-composer-attachment {
  order: -1;
  flex-basis: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 4px;
}
.thread-attach-thumb {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
}
.thread-attach-meta { font-size: 13px; color: var(--lite); flex: 1; }
.thread-attach-remove {
  border: none;
  background: transparent;
  color: var(--lite);
  font-size: 15px;
  line-height: 1;
  padding: 4px 6px;
  cursor: pointer;
}
.thread-attach-remove:hover { color: var(--ink); }
.thread-bubble.pending { opacity: 0.55; }
.thread-bubble.thread-media { padding: 3px; background: #E9E9EB; }
/* Photos WE sent ride in a blue bubble like our text does. */
.thread-bubble.ours.thread-media { background: var(--blue); }
.thread-bubble.ours.thread-media .thread-media-chip { color: #fff; }
.thread-image {
  display: block;
  max-width: 240px;
  max-height: 280px;
  border-radius: 15px;
  object-fit: cover;
}
/* The chip is a fallback for an image that won't decode, revealed by the
   img's onerror. `display: inline-block` beats the browser's [hidden] rule,
   so without this it shows under EVERY image. */
.thread-media-chip[hidden] { display: none; }
.thread-media-chip {
  display: inline-block;
  padding: 10px 14px;
  font-size: 13px;
  color: var(--blue);
  white-space: nowrap;
}
/* Grouping the header actions lets them drop to their own row on a phone
   instead of shoving the name off screen. Desktop is unchanged. */
.thread-header-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

.thread-sentby {
  align-self: flex-end;
  font-size: 11px;
  color: var(--lite);
  margin: 2px 4px 0 0;
}
/* The Inbox mobile rules used to live here, 780 lines from the classes they
   target — which is how they went stale. They now sit in the DS 2.0 responsive
   block beside .convo-list-panel. Don't add Inbox mobile rules here. */

/* ─── SUBSCRIBER TASTES ─── */
.taste-group { margin-bottom: 10px; }
.taste-group-label { font-size: 12px; font-weight: 600; color: var(--mid); margin-bottom: 6px; }
.taste-pill {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 500;
  border-radius: var(--radius-pill);
  border: 0.5px solid var(--rule);
  background: var(--paper);
  color: var(--mid);
}
.taste-pill.love {
  background: var(--blue-light);
  border-color: var(--blue-border);
  color: var(--blue);
}

/* Replies inbox + subscriber history */
.reply-row { align-items: flex-start; }
.reply-row-reaction { opacity: 0.75; }
.reply-bubble {
  display: inline-block;
  background: #E9E9EB;
  color: var(--ink);
  border-radius: 18px;
  padding: 8px 14px;
  font-size: 14px;
  line-height: 1.35;
  max-width: 480px;
  word-break: break-word;
}
.reply-reaction { font-size: 13px; color: var(--mid); }
.reply-time { font-size: 11px; color: var(--lite); flex-shrink: 0; white-space: nowrap; }
.history-list { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; }
.history-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px solid rgba(0,0,0,0.04);
}
.history-item:last-child { border-bottom: none; }
.history-text { font-size: 13px; color: var(--mid); line-height: 1.4; }

/* ═══════════════════════════════════════════════════════════════════════════
   Design System 2.0 — component library (Phase 0 scaffolding)
   ═══════════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  .sidebar,
  .sidebar-overlay,
  .toast,
  .modal-overlay,
  .modal-card,
  .hamburger span,
  .btn,
  .nav-item,
  .tag-chip,
  .sort-btn,
  .importance-btn,
  .story-action-btn {
    transition-duration: 0.01ms !important;
    animation: none !important;
  }
  .btn:hover,
  .btn:active,
  .nav-item:active,
  .hamburger:active,
  .tag-chip:active,
  .sort-btn:active,
  .importance-btn:active,
  .story-action-btn:active,
  .story-row:hover,
  .feed-card:hover {
    transform: none !important;
    box-shadow: none;
  }
  .toast {
    transform: translateX(-50%) translateY(0);
  }
  .modal-overlay,
  .modal-card {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-transparency: reduce) {
  .header {
    background: var(--white);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .sidebar-overlay,
  .modal-overlay {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(28,28,30,0.55);
  }
}

/* Global polish */
:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--blue-light);
  border-color: var(--blue);
}

/* Page header (title + subtitle + actions) */
.page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: var(--sp-6);
  flex-wrap: wrap;
}
.page-head-main { flex: 1; min-width: 0; }
.page-head-title {
  font-family: var(--ui);
  font-size: var(--text-2xl);
  font-weight: 700;
  letter-spacing: -0.5px;
  line-height: 1.1;
  margin-bottom: var(--sp-1);
}
.page-head-subtitle {
  font-size: var(--text-sm);
  color: var(--lite);
  line-height: 1.4;
}
.page-head-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-shrink: 0;
}

/* ⋯ dropdown menu */
.menu-wrap { position: relative; display: inline-flex; }
.menu-trigger {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--mid);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 1px;
  cursor: pointer;
  font-family: var(--ui);
  transition: background var(--dur-fast) var(--ease);
}
.menu-trigger:hover { background: var(--paper); }
.menu {
  position: absolute;
  top: calc(100% + var(--sp-1));
  right: 0;
  min-width: 200px;
  background: var(--white);
  border: 0.5px solid var(--rule);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-raised);
  padding: var(--sp-2);
  z-index: 50;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), visibility var(--dur-fast);
}
.menu.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.menu-item {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  width: 100%;
  padding: var(--sp-2) var(--sp-3);
  border: none;
  border-radius: var(--radius-sm);
  background: none;
  font-family: var(--ui);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease);
}
.menu-item:hover { background: var(--paper); }
.menu-item.danger { color: var(--red); }
.menu-item.danger:hover { background: var(--red-light); }

/* iOS segmented control */
.segmented {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  background: var(--paper);
  border-radius: var(--radius-pill);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}
.segmented-btn {
  flex: 1 0 auto;
  padding: var(--sp-2) var(--sp-4);
  border: none;
  border-radius: var(--radius-pill);
  background: transparent;
  font-family: var(--ui);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--mid);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.segmented-btn:hover { color: var(--ink); }
.segmented-btn.active {
  background: var(--white);
  box-shadow: var(--shadow-card);
  color: var(--ink);
  font-weight: 600;
}

/* Stat tile */
.stat-tile {
  background: var(--white);
  border: 0.5px solid var(--rule);
  border-radius: var(--radius);
  padding: var(--sp-5);
  text-align: center;
}
.stat-tile-number {
  font-family: var(--ui);
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--ink);
  line-height: 1;
  margin-bottom: var(--sp-1);
}
.stat-tile-label {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--lite);
}
.stat-tile-hint {
  font-size: var(--text-xs);
  color: var(--lite);
  margin-top: var(--sp-2);
  line-height: 1.35;
}
.stat-tile.accent {
  background: var(--blue-light);
  border-color: var(--blue-border);
}
.stat-tile.accent .stat-tile-number { color: var(--blue); }

/* Skeleton loaders */
@keyframes skeleton-shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.skeleton {
  background: linear-gradient(90deg, var(--paper) 25%, rgba(255,255,255,0.8) 50%, var(--paper) 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.4s ease-in-out infinite;
  border-radius: var(--radius-sm);
}
.skeleton-text {
  height: 14px;
  margin-bottom: var(--sp-2);
}
.skeleton-text.short { width: 60%; }
.skeleton-text.medium { width: 80%; }
.skeleton-row {
  height: 52px;
  margin-bottom: var(--sp-2);
  border-radius: var(--radius);
}
.skeleton-tile {
  height: 88px;
  border-radius: var(--radius);
}

/* Empty state v2 */
.empty-state-v2 {
  text-align: center;
  padding: var(--sp-10) var(--sp-6);
}
.empty-state-v2-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto var(--sp-4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  background: var(--blue-light);
  border-radius: 50%;
}
.empty-state-v2-title {
  font-family: var(--ui);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--ink);
  margin-bottom: var(--sp-2);
}
.empty-state-v2-body {
  font-size: var(--text-sm);
  color: var(--mid);
  line-height: 1.5;
  max-width: 320px;
  margin: 0 auto var(--sp-5);
}

/* Sticky action bar */
.action-bar {
  position: sticky;
  bottom: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  padding-bottom: calc(var(--sp-3) + env(safe-area-inset-bottom));
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 0.5px solid var(--rule);
}

/* Disclosure (details/summary) */
.disclosure {
  border: 0.5px solid var(--rule);
  border-radius: var(--radius-sm);
  background: var(--white);
  overflow: hidden;
}
.disclosure > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.disclosure > summary::-webkit-details-marker { display: none; }
.disclosure > summary::after {
  content: '›';
  font-size: 18px;
  color: var(--lite);
  transform: rotate(90deg);
  transition: transform var(--dur-fast) var(--ease);
}
.disclosure[open] > summary::after { transform: rotate(-90deg); }
.disclosure-content { padding: 0 var(--sp-4) var(--sp-4); }

/* Data table */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}
.table thead {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--white);
}
.table th {
  padding: var(--sp-2) var(--sp-3);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--lite);
  text-align: left;
  border-bottom: 0.5px solid var(--rule);
  white-space: nowrap;
}
.table th[data-sort] {
  cursor: pointer;
  user-select: none;
}
.table th[data-sort]:hover { color: var(--mid); }
.table th[data-sort].asc::after { content: ' ▲'; font-size: 9px; }
.table th[data-sort].desc::after { content: ' ▼'; font-size: 9px; }
.table td {
  padding: var(--sp-3);
  border-bottom: 0.5px solid var(--rule);
  color: var(--ink);
  vertical-align: middle;
}
.table tbody tr { transition: background var(--dur-fast) var(--ease); }
.table tbody tr:hover { background: var(--paper); }
.table tbody tr:last-child td { border-bottom: none; }

/* Horizontal bar row */
.bar-row { margin-bottom: var(--sp-3); }
.bar-row-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: var(--sp-1);
  font-size: var(--text-sm);
}
.bar-row-label { font-weight: 500; color: var(--ink); }
.bar-row-value { font-weight: 600; color: var(--mid); font-variant-numeric: tabular-nums; }
.bar-row-track {
  height: 6px;
  background: var(--paper);
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.bar-row-fill {
  height: 100%;
  background: var(--blue);
  border-radius: var(--radius-pill);
  transition: width var(--dur) var(--ease);
}

/* Wizard steps + summary bar */
.wizard-steps {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin-bottom: var(--sp-6);
}
.wizard-step {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--lite);
}
.wizard-step-circle {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-xs);
  font-weight: 700;
  border: 2px solid var(--rule);
  background: var(--white);
  flex-shrink: 0;
}
.wizard-step.filled .wizard-step-circle,
.wizard-step.current .wizard-step-circle {
  border-color: var(--blue);
  background: var(--blue);
  color: var(--white);
}
.wizard-step.current { color: var(--ink); font-weight: 600; }
.wizard-step.filled { color: var(--mid); }
.wizard-step-line {
  width: 48px;
  height: 2px;
  background: var(--rule);
  margin: 0 var(--sp-2);
  flex-shrink: 0;
}
.wizard-step-line.filled { background: var(--blue); }
.wizard-summary {
  position: sticky;
  top: 52px;
  z-index: 15;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 0.5px solid var(--rule);
  font-size: var(--text-sm);
  color: var(--mid);
}
.wizard-summary strong { color: var(--ink); font-weight: 600; }

/* Today page */
.today-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-4);
  /* Cards size to their own content instead of stretching to the tallest
     card in the row, which was leaving large empty areas below the short ones. */
  align-items: start;
}
/* The grid's own gap handles spacing; .card's default margin doubled it. */
.today-grid > .card { margin-bottom: 0; }
.lifecycle-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: default;
}
.lifecycle-legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.lifecycle-segment {
  transition: opacity 0.15s ease;
}
.lifecycle-segment:hover {
  opacity: 0.85;
}

/* Insights — lifecycle bar with hover tooltips */
.lifecycle-bar {
  display: flex;
  align-items: stretch;
  height: 14px;
  border-radius: var(--radius-pill);
  background: var(--paper);
  margin-bottom: var(--sp-4);
  overflow: visible;
  position: relative;
  z-index: 1;
}
.lifecycle-segment-btn {
  position: relative;
  border: none;
  padding: 0;
  margin: 0;
  min-width: 4px;
  height: 14px;
  cursor: pointer;
  transition: filter 0.15s ease, transform 0.15s ease;
}
.lifecycle-segment-btn:first-child { border-radius: var(--radius-pill) 0 0 var(--radius-pill); }
.lifecycle-segment-btn:last-child { border-radius: 0 var(--radius-pill) var(--radius-pill) 0; }
.lifecycle-segment-btn:only-child { border-radius: var(--radius-pill); }
.lifecycle-segment-btn:hover,
.lifecycle-segment-btn:focus-visible {
  filter: brightness(1.08);
  transform: scaleY(1.15);
  z-index: 2;
  outline: none;
}
.lifecycle-segment-tip {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  background: var(--ink);
  color: var(--white);
  font-size: 11px;
  font-weight: 600;
  padding: 5px 10px;
  border-radius: 8px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s ease;
  z-index: 10;
  box-shadow: var(--shadow-sm, 0 2px 8px rgba(0,0,0,0.12));
}
.lifecycle-segment-tip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--ink);
}
.lifecycle-segment-btn:hover .lifecycle-segment-tip,
.lifecycle-segment-btn:focus-visible .lifecycle-segment-tip {
  opacity: 1;
}

/* Insights — interactive growth chart */
.growth-chart-wrap {
  margin-top: var(--sp-4);
  padding-top: var(--sp-4);
  border-top: 0.5px solid var(--rule);
}
.growth-chart-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
}
.growth-chart-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--lite);
  letter-spacing: 0.3px;
}
.growth-chart-detail {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-2) var(--sp-3);
  font-size: var(--text-sm);
}
.growth-chart-detail-week { color: var(--mid); font-weight: 600; }
.growth-chart-detail-count { font-size: var(--text-xl); font-weight: 700; color: var(--ink); }
.growth-chart-detail-delta { font-size: var(--text-sm); font-weight: 600; color: var(--lite); }
.growth-chart-detail-delta.up { color: var(--green); }
.growth-chart-detail-delta.down { color: var(--red); }
.growth-chart-detail-meta { font-size: var(--text-xs); color: var(--lite); width: 100%; }
.growth-chart-svg {
  display: block;
  max-width: 520px;
  height: auto;
  overflow: visible;
}
.growth-chart-grid {
  stroke: var(--rule);
  stroke-width: 0.5;
}
.growth-chart-axis {
  font-size: 9px;
  fill: var(--lite);
  font-family: var(--ui);
}
.growth-chart-line {
  fill: none;
  stroke: var(--blue);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.growth-chart-point { cursor: pointer; }
.growth-chart-hit { fill: transparent; }
.growth-chart-dot {
  fill: var(--white);
  stroke: var(--blue);
  stroke-width: 2;
  transition: r 0.12s ease;
}
.growth-chart-point.active .growth-chart-dot {
  fill: var(--blue);
  stroke: var(--white);
  stroke-width: 2;
}
.growth-chart-xlabel {
  font-size: 8px;
  fill: var(--lite);
  font-family: var(--ui);
}
.growth-chart-xlabel.active {
  fill: var(--blue);
  font-weight: 700;
}
.growth-chart-hint {
  font-size: var(--text-xs);
  color: var(--lite);
  margin: var(--sp-2) 0 0;
}
.today-hero-card {
  grid-column: 1 / -1;
}
.today-hero-countdown {
  font-size: var(--text-xl);
  font-weight: 600;
  line-height: 1.35;
  margin: var(--sp-2) 0;
}
.today-hero-warning {
  background: var(--orange-light, #fff8f0);
  border-color: rgba(255,149,0,0.35);
}
.today-hero-muted .today-hero-countdown {
  color: var(--mid);
}
/* Bundle engine cards */
.bundle-engine-card {
  margin-bottom: var(--sp-4);
}

/* Stories form */
.story-form-section {
  padding-bottom: var(--sp-5);
  margin-bottom: var(--sp-5);
  border-bottom: 0.5px solid var(--rule);
}
.story-form-card { padding-bottom: 0; overflow: hidden; }
.story-action-bar { margin: 0 calc(-1 * var(--sp-5)); width: auto; border-radius: 0 0 var(--radius) var(--radius); }

/* Audience */
.subscriber-avatar, .convo-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--blue-light);
  color: var(--blue);
  font-size: var(--text-sm);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.audience-row { display: flex; align-items: center; gap: var(--sp-3); }
.audience-row .story-info { flex: 1; min-width: 0; }
.audience-row-name {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
  margin-bottom: 3px;
}
.audience-row-name .story-headline { margin-bottom: 0; }
/* Fixed-width column so every row's bar starts and ends at the same x. */
.audience-row-engagement {
  flex: none;
  width: 140px;
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}
.audience-row-engagement-label {
  font-size: var(--text-xs);
  color: var(--lite);
}
.engagement-bar-wrap {
  height: 6px;
  background: var(--paper);
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.engagement-bar {
  height: 100%;
  background: var(--blue);
  border-radius: var(--radius-pill);
}
/* Four call sites each carried their own inline grid, and an inline style
   can't be overridden by any stylesheet — which is precisely why they were a
   latent mobile bug. auto-fit gives 4-across on a desktop container and
   2-across on a phone with no media query at all. */
.stat-tile-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}
/* Insights' send-health pair is meant to stay two-up on desktop. */
.stat-tile-row.is-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* Inbox */
.convo-item {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  text-align: left;
}
.convo-item-body { flex: 1; min-width: 0; }
.convo-list-panel {
  border-right: 0.5px solid var(--rule);
  display: flex;
  flex-direction: column;
  min-height: 0;
  /* Without this, the 300px .convo-list inside sets the flex base width and
     the panel refuses to shrink — squeezing the thread on narrow screens. */
  min-width: 0;
}

/* DS 2.0 responsive helpers */
@media (max-width: 768px) {
  .page-head { flex-direction: column; align-items: stretch; }
  .page-head-actions { justify-content: flex-start; }
  /* Not enough width for a metric column beside the name and the View button. */
  .audience-row-engagement { display: none; }
  /* Narrow tables become one card per row. Wide ones opt out with
     .table-wrap.is-scroll and stay a table you swipe sideways — a 9-column
     card is nine stacked lines, i.e. one row per screen. The marker lives on
     the WRAPPER because that's where the horizontal scrolling already is. */
  .table-wrap:not(.is-scroll) .table thead { display: none; }
  .table-wrap:not(.is-scroll) .table tbody tr {
    display: block;
    padding: var(--sp-3);
    margin-bottom: var(--sp-2);
    border: 0.5px solid var(--rule);
    border-radius: var(--radius-sm);
    background: var(--white);
  }
  .table tbody tr:hover { background: var(--white); }
  .table-wrap:not(.is-scroll) .table td {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--sp-3);
    padding: var(--sp-1) 0;
    border-bottom: none;
  }
  .table-wrap:not(.is-scroll) .table td::before {
    content: attr(data-label);
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    color: var(--lite);
    flex-shrink: 0;
  }
  .wizard-steps { overflow-x: auto; justify-content: flex-start; padding-bottom: var(--sp-2); }
  .today-grid { grid-template-columns: 1fr; }
  .table-wrap.is-scroll .table { min-width: 640px; }

  /* The header is a fixed 52px bar, so anything that wraps to a second line is
     simply clipped — which is what happened to the signed-in email. Nothing
     wraps, and the email steps aside: at 390px there is no room beside the
     wordmark and Sign out, and you know your own address. Sign out stays. */
  .header-right { flex-wrap: nowrap; }
  .header-user { display: none; }

  /* ── Inbox: one pane at a time ──────────────────────────────────
     There isn't room for a list AND a thread at 390px, so the list is the
     page until you open a conversation, then the thread takes over and
     '‹ Back' returns. The hidden element must be .convo-list-panel (the
     COLUMN) — hiding .convo-list only hides the scroller inside it and
     leaves the column holding the width. That was the July 2026 bug. */
  .convo-layout { height: calc(100vh - 180px); height: calc(100dvh - 180px); min-height: 360px; }
  .convo-list-panel { width: 100%; flex: 1 1 auto; min-width: 0; border-right: none; }
  .convo-list { width: 100%; }
  .convo-thread { display: none; }
  .convo-layout.show-thread .convo-list-panel { display: none; }
  .convo-layout.show-thread .convo-thread { display: flex; }
  .thread-back { display: inline-flex; }

  /* Full-width bubbles read as sentences; 72% of a narrow pane reads as a
     column of single words. */
  .thread-bubble { max-width: 86%; }
  .thread-image { max-width: 100%; height: auto; max-height: 60vh; object-fit: contain; }
  .gif-panel { min-width: 0; overflow-x: hidden; }
  .gif-grid { max-height: 200px; }

  /* Name gets the first row to itself; the actions wrap beneath it. */
  .thread-header { flex-wrap: wrap; }
  .thread-header-actions { flex-basis: 100%; justify-content: flex-end; }
}

/* ═══ TOUCH DEVICES ═══════════════════════════════════════════════
   Gated on `pointer: coarse` rather than a width, so a phone gets these
   and a mouse-driven Mac keeps its existing metrics exactly. A narrow
   desktop window is NOT a phone and shouldn't get finger-sized controls. */
@media (pointer: coarse) {
  /* iOS Safari zooms the whole page whenever you focus a field under 16px,
     and doesn't zoom back out. This one rule is most of why the dashboard
     felt hostile on a phone. */
  input, select, textarea,
  .form-input, .form-select, .form-textarea, .thread-composer-input { font-size: 16px; }

  /* Apple's minimum comfortable touch target is 44pt. These are all under it. */
  .hamburger,
  .convo-compose-btn,
  .thread-composer-send,
  .thread-composer-attach,
  .thread-attach-remove,
  .menu-trigger,
  .ws-icon-btn { min-width: 44px; min-height: 44px; }
  .btn-sm { min-height: 44px; padding-top: 10px; padding-bottom: 10px; }

  /* Hover-only tooltip, unreachable by finger. Every stage is already
     listed as a labelled row underneath the bar. */
  .lifecycle-segment-tip { display: none; }
}

/* Stop a stray downward swipe pull-to-refreshing the page and binning a
   half-typed reply; keep inner scrollers from chaining to the page. */
body { overscroll-behavior-y: none; }
.convo-list,
.sidebar,
.gif-grid,
.table-wrap { overscroll-behavior: contain; }

/* ── Desktop: persistent sidebar (Wingman Brains 2.0 review fix) ──
   Elite-dashboard behavior: the sidebar is always visible on large screens;
   the hamburger + overlay pattern is mobile/tablet only. */
@media (min-width: 1024px) {
  .sidebar {
    transform: translateX(0);
    border-right: 0.5px solid var(--rule);
    box-shadow: none;
  }
  .sidebar-overlay { display: none; }
  .hamburger { display: none; }
  .container {
    margin-left: var(--sidebar-w);
    margin-right: auto;
    max-width: 1100px;
    padding-left: 32px;
    padding-right: 32px;
  }
}

/* Website section tabs — rounded pill style (scoped; other .tabs unaffected) */
.tabs.site-tabs-pill {
  border-bottom: none;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.site-tabs-pill .tab {
  padding: 8px 15px;
  border: 1px solid var(--rule);
  border-radius: var(--radius-pill);
  color: var(--ink);
  font-weight: 600;
  background: var(--white);
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.site-tabs-pill .tab:hover { color: var(--ink); background: var(--paper); }
.site-tabs-pill .tab.active {
  background: var(--blue);
  border-color: var(--blue);
  color: var(--white);
  font-weight: 700;
}
.site-tabs-pill .tab.active::after { display: none; }

}

/* ══════════════════════════════════════════════════════════════
   WEBSITE EDITOR (flat, everything-visible — js/pages/website.js)
   ══════════════════════════════════════════════════════════════ */

.ws-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 4px 0 16px;
}
@media (max-width: 768px) {
  /* Six rows of pills need breathing room from the first card, and the pills
     themselves need a little more room to be tappable. */
  .ws-toolbar { margin-bottom: var(--sp-5); }
  .ws-pills { gap: 10px; }
}

.ws-pills { display: flex; gap: 8px; flex-wrap: wrap; }

.ws-pill {
  padding: 8px 14px;
  background: var(--white);
  color: var(--ink);
  border: 1px solid var(--rule);
  border-radius: var(--radius-pill);
  font-size: 13px;
  font-weight: 700;
  font-family: var(--ui);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.ws-pill:hover { border-color: var(--blue); color: var(--blue); }
.ws-pill.active { background: var(--blue); color: #fff; border-color: var(--blue); }
.ws-pill.ws-pill-dirty::after { content: ' •'; color: var(--orange); }
.ws-pill.active.ws-pill-dirty::after { color: #fff; }

.ws-toolbar-actions { margin-left: auto; display: flex; gap: 8px; align-items: center; }

.ws-status { font-size: 12.5px; color: var(--lite); }
.ws-status-ok { color: #1f8f3b; }
.ws-status-dirty { color: var(--orange); font-weight: 600; }

/* Save lives in a bar stuck to the bottom of the viewport, on desktop as well
   as mobile — this page is long, and previously you had to scroll back to the
   very top to save an edit made at the bottom. Bleeds to the container edges
   so it reads as a bar rather than a floating card. */
.ws-action-bar {
  margin: var(--sp-5) calc(-1 * var(--sp-4)) 0;
  width: auto;
  border-radius: 0;
}
.ws-action-bar-btns { display: flex; gap: var(--sp-2); align-items: center; }

.ws-view-site { font-size: 13px; color: var(--blue); font-weight: 600; text-decoration: none; }
.ws-view-site:hover { text-decoration: underline; }

.ws-stack { display: flex; flex-direction: column; gap: 12px; }

.ws-card {
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: 16px;
  box-shadow: var(--shadow-card);
}

.ws-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.ws-card-tag {
  font-size: 11px;
  font-weight: 700;
  color: var(--lite);
  letter-spacing: 0.8px;
  text-transform: uppercase;
}

.ws-card-tools { display: flex; gap: 6px; }

.ws-icon-btn {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  border: 1px solid var(--rule);
  background: var(--white);
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
  color: var(--ink);
}
.ws-icon-btn:disabled { opacity: 0.35; cursor: default; }
.ws-icon-btn:not(:disabled):hover { border-color: var(--blue); color: var(--blue); }
.ws-icon-danger { color: var(--red); }
.ws-icon-danger:not(:disabled):hover { border-color: var(--red); color: var(--red); background: var(--red-light); }

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

.ws-field-wide { grid-column: 1 / -1; }
.ws-field-emoji { max-width: 120px; }

.ws-label {
  font-size: 11px;
  font-weight: 700;
  color: #86868b;
  display: block;
  margin-bottom: 4px;
}

.ws-hint { font-size: 11px; color: var(--lite); margin-top: 3px; line-height: 1.4; }

.ws-input {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  background: var(--white);
  border: 1.5px solid var(--rule);
  border-radius: 10px;
  color: var(--ink);
  font-size: 14px;
  outline: none;
  font-family: var(--ui);
  resize: vertical;
}
.ws-input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-light); }
.ws-emoji { font-size: 18px; text-align: center; }
.ws-mono { line-height: 1.5; }

.ws-check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--ink);
  cursor: pointer;
  padding: 10px 0;
}
.ws-check input { width: 16px; height: 16px; accent-color: var(--blue); cursor: pointer; }

.ws-add-btn {
  margin-top: 12px;
  padding: 12px 16px;
  background: var(--white);
  color: var(--blue);
  border: 1.5px dashed var(--rule);
  border-radius: 12px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  width: 100%;
  font-family: var(--ui);
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.ws-add-btn:hover { border-color: var(--blue); background: var(--blue-light); }

.ws-error {
  background: var(--red-light);
  color: #c8281d;
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 12px;
}

/* ── Website editor: live preview dock (bottom of the screen) ── */

:root { --wsp-h: 45dvh; --wsp-bar-h: 42px; }

/* Make room for the dock so the last cards aren't hidden behind it. */
body.ws-has-preview .main { padding-bottom: calc(var(--wsp-bar-h) + 16px); }
body.ws-preview-open .main { padding-bottom: calc(var(--wsp-h) + 16px); }

.wsp-dock {
  position: fixed;
  left: var(--sidebar-w);
  right: 0;
  bottom: 0;
  z-index: 60;
  background: var(--white);
  border-top: 1px solid var(--rule);
  box-shadow: 0 -8px 24px rgba(0,0,0,0.06);
  display: flex;
  flex-direction: column;
}
.wsp-dock.is-hidden { display: none; }

.wsp-resize {
  position: absolute;
  top: -5px;
  left: 0;
  right: 0;
  height: 10px;
  cursor: row-resize;
  z-index: 2;
}
.wsp-resize::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 4px;
  transform: translateX(-50%);
  width: 44px;
  height: 4px;
  border-radius: 999px;
  background: var(--rule);
  transition: background var(--dur-fast) var(--ease);
}
.wsp-resize:hover::before,
.wsp-dock.is-resizing .wsp-resize::before { background: var(--blue); }
.wsp-dock.is-resizing .wsp-frame { pointer-events: none; }
body.wsp-resizing { cursor: row-resize; user-select: none; }
.wsp-dock.is-collapsed .wsp-resize { display: none; }

.wsp-bar {
  height: var(--wsp-bar-h);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 16px;
  flex-shrink: 0;
}

.wsp-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--ui);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--ink);
  padding: 0;
}
.wsp-chevron { display: inline-block; transition: transform var(--dur-fast) var(--ease); font-size: 11px; }
.wsp-dock.is-collapsed .wsp-chevron { transform: rotate(-90deg); }

.wsp-note { font-size: 12px; color: var(--lite); }
.wsp-dock.is-collapsed .wsp-note { display: none; }

.wsp-tools { margin-left: auto; display: flex; align-items: center; gap: 6px; }

.wsp-devices {
  display: flex;
  background: var(--bg);
  border-radius: var(--radius-pill);
  padding: 2px;
}
.wsp-dev {
  border: none;
  background: transparent;
  border-radius: var(--radius-pill);
  padding: 4px 10px;
  font-size: 13px;
  cursor: pointer;
  line-height: 1;
}
.wsp-dev.active { background: var(--white); box-shadow: var(--shadow-card); }

.wsp-btn {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: var(--white);
  color: var(--ink);
  font-size: 13px;
  cursor: pointer;
  text-decoration: none;
  line-height: 1;
}
.wsp-btn:hover { border-color: var(--blue); color: var(--blue); }

.wsp-stage {
  height: calc(var(--wsp-h) - var(--wsp-bar-h));
  background: var(--bg);
  position: relative;
  display: flex;
  justify-content: center;
  overflow: hidden;
}
.wsp-dock.is-collapsed .wsp-stage { display: none; }

.wsp-frame {
  border: none;
  width: 100%;
  height: 100%;
  background: #fff;
}
.wsp-dock.is-phone .wsp-stage { padding: 12px 0 0; }
.wsp-dock.is-phone .wsp-frame {
  width: 390px;
  border-radius: 14px 14px 0 0;
  box-shadow: 0 4px 24px rgba(0,0,0,0.10), 0 0 0 1px var(--rule);
}

.wsp-loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: var(--lite);
  background: var(--bg);
}
.wsp-dock.is-loaded .wsp-loading { display: none; }

/* The sidebar disappears at 1024, not 900 — between the two the dock was
   still offset by --sidebar-w and hung off the right edge. */
@media (max-width: 1023.98px) {
  .wsp-dock { left: 0; }

  /* Below the sidebar breakpoint there is no side-by-side to have: the dock
     would eat half the screen while you type into the other half, and its
     phone preset renders a 390px iframe inside a 390px viewport — a copy of
     your own screen. The ↗ open-in-new-tab link in the bar is the better
     affordance on a phone. (The previous preview implementation did exactly
     this.) The padding rules matter too, or the page reserves dead space for
     a dock that isn't there. */
  .wsp-dock { display: none; }
  body.ws-has-preview .main,
  body.ws-preview-open .main { padding-bottom: 0; }
}