/* ==========================================================================
   Chat page. One calm workspace: header, conversation + composer, and the
   onboarding-file side panel. One stylesheet, one pass: later rules do not
   fight earlier ones. Tokens: tokens.css. Shared parts: components.css.
   Motion is one-shot only (entrance, hover, press); tokens.css stops it all
   under prefers-reduced-motion.
   ========================================================================== */

/* ---- Shell ---- */
body {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--bg-thread);
  color: var(--text-primary);
  font-size: 15px;
  line-height: 1.5;
}
/* Once shared/viewport.js has measured the visible area, the shell becomes exactly
   that area. On iOS Safari the keyboard does not shrink the layout viewport, so
   without this the header slides off the top and a gap opens above the keyboard.
   Where the browser already resizes the layout (Android Chrome) the two agree. */
html.has-vv body {
  top: var(--vvt);
  bottom: auto;
  height: var(--vvh);
}
.chat-workspace {
  position: relative;
  flex: 1;
  min-height: 0;
  width: 100%;
  display: flex;
  overflow: hidden;
}
.chat-center {
  position: relative;
  flex: 1;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--thread-grad);
}

/* ---- Header ---- */
.top {
  flex: none;
  z-index: 15;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: var(--hdr-h);
  padding: var(--safe-t) calc(16px + var(--safe-r)) 0 calc(16px + var(--safe-l));
  background: var(--bg-main);
}
.hdr-status-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0 6px;
  margin-top: 1px;
  color: var(--text-secondary);
  font-size: 12.5px;
}
.status-dot { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--brand); }
.step-whisper { color: var(--brand-strong); font-weight: 600; }
.step-whisper::before { content: "\00b7"; margin-right: 6px; color: var(--text-muted); font-weight: 400; }
.ws-stage { color: var(--text-secondary); font-weight: 500; }
.dossier-toggle-btn { display: none; }

/* ---- Conversation ---- */
.chat-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  /* Not smooth: the script pins to the newest message by setting scrollTop, and a
     smooth scroller animates every pin, which fights a reader scrolling up. */
  scroll-behavior: auto;
  padding: 20px calc(16px + var(--safe-r)) 28px calc(16px + var(--safe-l));
}
.chat-scroll:focus-visible { outline-offset: -3px; }

/* "Latest" pill: shown only while the reader has scrolled away from the bottom. It
   sits at the end of the column and sticks to the scroller's bottom edge. */
.jump-latest {
  position: sticky;
  bottom: 10px;
  z-index: 5;
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  margin-top: -4px;
  padding: 0 16px 0 12px;
  border: 1px solid var(--brand-border);
  border-radius: 999px;
  background: #fff;
  color: var(--brand-strong);
  font-size: 13px;
  font-weight: 700;
  box-shadow: var(--shadow-popover);
  animation: popIn var(--dur-fast) var(--ease-out);
}
.jump-latest[hidden] { display: none !important; }
.jump-latest .ico { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.jump-latest.has-new { background: var(--brand); border-color: var(--brand); color: #fff; }
.chat-column { max-width: var(--max-col-width); margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
#thread { display: flex; flex-direction: column; gap: 10px; }

/* Intro card */
.ad-card {
  padding: 16px 18px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.55;
}
.ad-card .ad-label {
  margin: 0 0 6px;
  color: var(--brand-strong);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.ad-points { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.ad-points span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border: 1px solid var(--brand-border);
  border-radius: 999px;
  background: var(--brand-soft);
  color: var(--brand-strong);
  font-size: 12px;
  font-weight: 600;
}
.ad-points span::before { content: "\2713"; font-weight: 800; }
.ad-disclosure { margin-top: 12px; color: var(--text-muted); font-size: 12.5px; }

/* Messages */
.msg {
  max-width: min(86%, 62ch);
  padding: 11px 15px;
  font-size: 15.5px;
  line-height: 1.55;
  white-space: pre-line;
  overflow-wrap: anywhere;
  text-wrap: pretty;
}
.msg.support {
  align-self: flex-start;
  background: #fff;
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-radius: 6px 18px 18px 18px;
  box-shadow: var(--shadow-sm);
}
.msg.support.complete { background: var(--brand-soft); border-color: var(--brand-border); font-weight: 500; }
.msg.candidate {
  align-self: flex-end;
  background: var(--brand);
  color: #fff;
  border-radius: 18px 6px 18px 18px;
}
.msg.candidate.file-card {
  width: min(360px, 88%);
  background: #fff;
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  text-align: left;
}
/* bubble() adds msg-enter, then msg-enter-active on the next frame */
.msg-enter { opacity: 0; transform: translateY(8px); }
.msg-enter-active {
  opacity: 1;
  transform: none;
  transition: opacity var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out);
}

/* Upload card contents */
.thumb {
  display: block;
  max-width: 100%;
  max-height: 200px;
  margin-bottom: 8px;
  object-fit: cover;
  border: 1px solid var(--border);
  border-radius: 10px;
}
input.kind, select.kind {
  flex: 1;
  min-height: 38px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-subtle);
  color: var(--text-primary);
  font-size: 13.5px;
  font-weight: 500;
}
input.kind:focus, select.kind:focus { border-color: var(--brand); background: #fff; }
.mini {
  min-height: 38px;
  padding: 0 16px;
  border: 0;
  border-radius: 10px;
  background: var(--brand);
  color: #fff;
  font-size: 13.5px;
  font-weight: 600;
  white-space: nowrap;
  transition: background var(--dur-fast) var(--ease-out);
}
.mini:hover { background: var(--brand-strong); }
.mini:disabled { opacity: 0.5; cursor: default; }
.fstatus { margin-top: 6px; color: var(--text-secondary); font-size: 12.5px; font-weight: 500; }

/* Resume banner (reopened chat) */
.resume-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 13px;
  background: var(--brand-soft);
  border: 1px solid var(--brand-border);
  border-radius: var(--radius-md);
  color: var(--brand-strong);
  font-size: 13px;
  font-weight: 600;
  animation: fadeUp var(--dur-med) var(--ease-out);
}
.resume-banner small { font-family: var(--font-mono); font-size: 11.5px; font-weight: 500; color: var(--text-secondary); }

/* Completion card */
.completion-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 6px;
  padding: 16px 18px;
  background: var(--brand-soft);
  border: 1px solid var(--brand-border);
  border-radius: var(--radius-lg);
  animation: fadeUp var(--dur-med) var(--ease-out);
}
.completion-card.is-approved { background: #dff1e8; border-color: var(--brand); }
.comp-badge {
  align-self: flex-start;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--brand);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.completion-card h3 { font-size: 16.5px; font-weight: 700; color: var(--brand-strong); text-wrap: balance; }
.completion-card p { color: var(--text-secondary); font-size: 13.5px; line-height: 1.5; }
.comp-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 12px;
  margin-top: 2px;
  padding: 10px 12px;
  background: #fff;
  border: 1px solid var(--brand-border);
  border-radius: var(--radius-md);
}
.comp-grid div { display: flex; flex-direction: column; font-size: 12px; }
.comp-grid span { color: var(--text-muted); font-size: 11px; }
.comp-grid strong { color: var(--text-primary); font-weight: 600; }
.comp-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 4px; }

/* Typing indicator: the only looping motion, and only while Maya is replying */
.typing {
  display: none;
  align-self: flex-start;
  padding: 12px 18px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 6px 18px 18px 18px;
  box-shadow: var(--shadow-sm);
}
.typing.show { display: inline-flex; align-items: center; }
.typing-dots { display: inline-flex; align-items: center; gap: 5px; }
.typing-dots span {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--brand);
  animation: typingBounce 1.1s ease-in-out infinite;
}
.typing-dots span:nth-child(2) { animation-delay: 0.18s; }
.typing-dots span:nth-child(3) { animation-delay: 0.36s; }

.fatal-alert {
  display: none;
  padding: 12px 14px;
  background: var(--danger-soft);
  border: 1px solid var(--danger-border);
  border-radius: var(--radius-md);
  color: var(--danger);
  font-size: 13.5px;
  font-weight: 500;
}

/* ---- Composer ---- */
.composer {
  flex: none;
  padding: 10px calc(16px + var(--safe-r)) calc(12px + var(--safe-b)) calc(16px + var(--safe-l));
  background: linear-gradient(180deg, rgba(247, 249, 248, 0) 0%, #f7f9f8 28%);
}
/* Keyboard up: the home-indicator inset is under the keyboard, and the upload tip is not needed mid-typing. */
html.kb-open .composer { padding-bottom: 10px; }
html.kb-open .photo-coach-bar { display: none; }
.photo-coach-bar, .quick-chips, .attach-tray, .composer-inner, .composer-hint {
  max-width: var(--max-col-width);
  margin-left: auto;
  margin-right: auto;
}
.photo-coach-bar {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 8px;
  padding: 8px 12px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.4;
}
.photo-coach-bar::before {
  content: "";
  width: 16px;
  height: 16px;
  flex: none;
  margin-top: 1px;
  background: var(--brand);
  -webkit-mask: var(--coach-icon) center / contain no-repeat;
  mask: var(--coach-icon) center / contain no-repeat;
  --coach-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.5 4h-5L7 7H4a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-3l-2.5-3z'/%3E%3Ccircle cx='12' cy='13' r='3'/%3E%3C/svg%3E");
}
.photo-coach-bar[data-icon="doc"]::before {
  --coach-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z'/%3E%3Cpath d='M14 2v6h6M16 13H8M16 17H8M10 9H8'/%3E%3C/svg%3E");
}

.quick-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 10px; }
.quick-chips:empty { display: none; margin: 0; }
.quick-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 38px;
  padding: 7px 14px;
  background: #fff;
  border: 1px solid var(--brand-border);
  border-radius: 999px;
  color: var(--brand-strong);
  font-size: 13px;
  font-weight: 600;
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out), transform var(--dur-instant) var(--ease-out);
}
.quick-chip:hover { background: var(--brand-soft); border-color: var(--brand); }
.quick-chip:active { transform: scale(0.97); }
.quick-chip.is-upload { background: var(--brand); border-color: var(--brand); color: #fff; }
.quick-chip.is-upload:hover { background: var(--brand-strong); border-color: var(--brand-strong); }

/* Files waiting to send */
.attach-tray { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 2px 8px; }
.attach-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 240px;
  padding: 5px 8px 5px 5px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  animation: popIn var(--dur-fast) var(--ease-out);
}
.attach-chip img { width: 38px; height: 38px; display: block; object-fit: cover; border-radius: 7px; }
.attach-chip .pdf-ico {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
  background: var(--bg-subtle);
  color: var(--text-secondary);
  font-size: 10px;
  font-weight: 700;
}
.attach-chip .fname {
  max-width: 140px;
  overflow: hidden;
  color: var(--text-primary);
  font-size: 12px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.attach-chip .rm {
  width: 24px;
  height: 24px;
  flex: none;
  border: 0;
  border-radius: 50%;
  background: var(--bg-subtle);
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1;
}
.attach-chip .rm:hover { background: var(--border); color: var(--text-primary); }

.composer-inner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px;
  background: var(--bg-composer);
  border: 1.5px solid var(--border);
  border-radius: 24px;
  box-shadow: var(--shadow-composer);
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.composer-inner:focus-within { border-color: var(--brand); box-shadow: var(--shadow-composer), 0 0 0 4px rgba(11, 110, 79, 0.13); }
.attach {
  width: 44px;
  height: 44px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: var(--brand-soft);
  color: var(--brand-strong);
  font-size: 22px;
  font-weight: 600;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), transform var(--dur-instant) var(--ease-out);
}
.attach:hover { background: var(--brand); color: #fff; }
.attach:active { transform: scale(0.95); }
.composer-inner textarea {
  flex: 1;
  min-width: 0;
  min-height: 44px;
  max-height: 132px;
  padding: 11px 8px;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text-primary);
  font: inherit;
  font-size: 16px;
  line-height: 1.4;
  align-self: center;
}
.composer-inner textarea::placeholder { color: var(--text-muted); }
.send {
  flex: none;
  min-width: 76px;
  height: 44px;
  padding: 0 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  background: var(--brand);
  color: #fff;
  font-size: 14.5px;
  font-weight: 600;
  transition: background var(--dur-fast) var(--ease-out), transform var(--dur-instant) var(--ease-out);
}
.send:hover { background: var(--brand-strong); }
.send:active { transform: scale(0.97); }
.send:disabled { opacity: 0.5; cursor: default; }
.composer-hint { margin-top: 8px; text-align: center; color: var(--text-muted); font-size: 11.5px; }

/* ---- Drag-and-drop ---- */
.drop-overlay {
  position: absolute;
  inset: 12px;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(232, 244, 239, 0.94);
  border: 2px dashed var(--brand);
  border-radius: 18px;
  pointer-events: none;
}
.drop-overlay[hidden] { display: none !important; }
.drop-box {
  padding: 16px 24px;
  background: #fff;
  border: 1px solid var(--brand-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-popover);
  color: var(--brand-strong);
  font-size: 15px;
  font-weight: 600;
  text-align: center;
  animation: popIn var(--dur-med) var(--ease-out);
}

/* ---- Onboarding-file side panel ---- */
.dossier-sidebar {
  width: clamp(300px, 32vw, 380px);
  flex: none;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg-subtle);
  border-left: 1px solid var(--border);
}
.sidebar-header {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 54px;
  padding: 8px 16px;
  background: var(--bg-main);
  border-bottom: 1px solid var(--border);
}
.sidebar-title { display: flex; align-items: center; gap: 8px; color: var(--text-primary); font-size: 15.5px; font-weight: 600; }
.docs-count-pill {
  padding: 2px 10px;
  border: 1px solid var(--brand-border);
  border-radius: 999px;
  background: var(--brand-soft);
  color: var(--brand-strong);
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.dossier-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px calc(12px + var(--safe-r)) 12px 12px;
}
.mobile-close-dossier { display: none; }

/* Connection line */
.keybar { display: flex; flex-direction: column; gap: 4px; padding: 2px 2px 0; color: var(--text-secondary); font-size: 12.5px; }
.keybar-top { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.keybar strong { color: var(--text-secondary); font-weight: 500; }
.memoline { margin: 0; color: var(--text-muted); font-size: 11.5px; }
.memoline:empty { display: none; }

.issue-banner {
  padding: 10px 12px;
  background: var(--kb-soft);
  border: 1px solid var(--kb-border);
  border-radius: var(--radius-md);
  color: var(--kb-accent);
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.45;
}
.issue-banner[hidden] { display: none !important; }
.issue-banner ul { margin: 0; padding-left: 16px; }
.issue-banner li + li { margin-top: 3px; }

.profile-box {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 10px 8px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-size: 12.5px;
}
.profile-box[hidden] { display: none !important; }
.profile-box-title {
  margin-bottom: 4px;
  padding: 0 4px;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.profile-box-hint { margin-left: 4px; letter-spacing: 0; text-transform: none; font-weight: 500; }
.profile-row {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 4px;
  border-radius: 6px;
  line-height: 1.35;
}
.profile-row.is-editable { cursor: pointer; transition: background var(--dur-fast) var(--ease-out); }
.profile-row.is-editable:hover { background: var(--brand-soft); }
.profile-row span { color: var(--text-secondary); }
.profile-row strong { color: var(--text-primary); font-weight: 600; text-align: right; overflow-wrap: anywhere; }

/* Six steps */
.docs-grid { display: flex; flex-direction: column; gap: 8px; }
.doc-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.doc-item b {
  width: 24px;
  height: 24px;
  flex: none;
  margin-top: 1px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--bg-subtle);
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 700;
}
.doc-item-body { flex: 1; min-width: 0; }
.doc-item span { display: block; color: var(--text-primary); font-size: 14px; font-weight: 600; line-height: 1.3; }
.doc-item small { display: block; margin-top: 2px; color: var(--text-secondary); font-size: 12.5px; line-height: 1.4; }
.doc-item.done { background: var(--brand-soft); border-color: var(--brand-border); }
.doc-item.done b { background: var(--brand); border-color: var(--brand); color: #fff; }
.doc-item.done span { color: var(--brand-strong); }
.doc-item.warn { background: var(--kb-soft); border-color: var(--kb-border); }
.doc-item.warn b { background: #b45309; border-color: #b45309; color: #fff; }
.doc-item.warn span, .doc-item.warn small { color: var(--kb-accent); }
.doc-item.warn small { font-weight: 600; }
.doc-item.is-clickable { cursor: pointer; }
.doc-item.is-clickable:hover { border-color: var(--brand); box-shadow: var(--shadow-md); }
.doc-item .doc-cta {
  align-self: center;
  flex: none;
  padding: 2px 8px;
  border: 1px solid var(--brand-border);
  border-radius: 999px;
  background: var(--brand-soft);
  color: var(--brand-strong);
  font-size: 11px;
  font-weight: 700;
}
.doc-item.done .doc-cta { background: #fff; }
.upload-more { width: 100%; }
.docs-note { padding: 4px 6px; text-align: center; color: var(--text-muted); font-size: 12px; line-height: 1.45; }

/* "Why we ask for these" (built in state.js) */
.trust-acc {
  margin-top: 12px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-subtle);
  color: var(--text-secondary);
  font-size: 13px;
}
.trust-acc summary { display: flex; align-items: center; min-height: 28px; color: var(--text-primary); font-weight: 700; cursor: pointer; }
.trust-acc-body { display: grid; gap: 8px; margin-top: 8px; line-height: 1.5; }

/* ---- Drawer backdrop ---- */
.drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: none;
  background: rgba(10, 20, 16, 0.45);
}
.drawer-backdrop.open { display: block; animation: fadeUp var(--dur-fast) var(--ease-out); }

/* ---- Chat history and lead picker ---- */
.history-note { margin: 0 0 12px; color: var(--text-muted); font-size: 12.5px; line-height: 1.5; }
.outreach-login-row { display: flex; gap: 8px; margin: 0 0 12px; }
.outreach-login-row input {
  flex: 1;
  min-width: 0;
  min-height: 40px;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
  color: var(--text-primary);
  font: inherit;
  font-size: 16px;   /* under 16px, iOS Safari zooms the page when this is focused */
}
.outreach-login-row .ghost-btn { flex: none; }
.history-list { display: grid; gap: 8px; }
.history-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px 0 0;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  animation: fadeUp var(--dur-med) var(--ease-out) both;
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.history-row:hover { border-color: var(--brand-border); box-shadow: var(--shadow-sm); }
.history-row.is-current { border-color: var(--brand); background: var(--brand-soft); }
.history-main {
  flex: 1;
  min-width: 0;
  padding: 12px 4px 12px 13px;
  border: 0;
  border-radius: var(--radius-md);
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.history-title, .history-meta, .history-preview, .history-sid { display: block; }
.history-row > .ghost-btn { flex: none; }
.history-title { color: var(--text-primary); font-size: 13.5px; font-weight: 700; }
.history-meta { margin-top: 2px; color: var(--text-secondary); font-size: 12px; }
.history-preview { margin-top: 5px; color: var(--text-secondary); font-size: 12.5px; line-height: 1.45; }
.history-sid { margin-top: 5px; color: var(--text-muted); font-family: var(--font-mono); font-size: 11px; overflow-wrap: anywhere; }
.history-remove { flex: none; font-size: 11.5px; }
.history-empty { padding: 16px; border: 1px dashed var(--border); border-radius: var(--radius-md); color: var(--text-muted); font-size: 13px; text-align: center; }
.history-footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.history-footer a { display: inline-flex; align-items: center; min-height: 24px; color: var(--brand-strong); font-size: 12.5px; font-weight: 600; }

/* ==========================================================================
   Responsive
   ========================================================================== */
/* Wide and tall enough for the side panel to sit beside the conversation. */
@media (min-width: 761px) and (min-height: 501px), (min-width: 761px) and (orientation: portrait) {
  .drawer-backdrop { display: none !important; }
}

/* Side panel becomes a drawer: on narrow screens, and on a phone held sideways,
   where a 300px panel would leave the conversation about 90px of height. */
@media (max-width: 760px), (max-height: 500px) and (orientation: landscape) {
  .dossier-toggle-btn, .mobile-close-dossier { display: inline-flex; }
  .dossier-sidebar {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 50;
    width: min(90vw, 380px);
    padding-bottom: var(--safe-b);
    box-shadow: var(--shadow-popover);
    transform: translateX(105%);
    /* Closed means unreachable: visibility removes it from the Tab order and from
       screen readers once the slide-out has finished. */
    visibility: hidden;
    transition: transform var(--dur-med) var(--ease-out), visibility 0s linear var(--dur-med);
  }
  .dossier-sidebar.open { transform: none; visibility: visible; transition-delay: 0s; }
  .sidebar-header { padding-top: calc(8px + var(--safe-t)); padding-right: calc(16px + var(--safe-r)); }
  html.has-vv .dossier-sidebar,
  html.has-vv .drawer-backdrop { top: var(--vvt); bottom: auto; height: var(--vvh); }
  .top .nav-switch, #sidPill, #verPill { display: none; }
}

/* Compact header: phones upright, and phones on their side. One row; the words
   stay, the operator chrome goes. */
@media (max-width: 640px), (max-height: 500px) and (orientation: landscape) {
  .top { gap: 8px; min-height: 56px; padding: calc(var(--safe-t) + 6px) calc(12px + var(--safe-r)) 8px calc(12px + var(--safe-l)); }
  .top .brand { flex: 1 1 auto; }
  .top-actions { gap: 6px; flex: none; }
  .tool-btn { width: 40px; padding: 0; }
  .tool-btn .lbl { display: none; }
  .brand strong { font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .brand-org { display: none; }
  .hdr-status-row .status-dot, #connLabel, .step-whisper::before { display: none; }
  .step-progress { padding: 0 calc(12px + var(--safe-r)) 8px calc(12px + var(--safe-l)); gap: 4px; }
  #toggleDossierBtn { padding: 0 12px; background: var(--brand-soft); border-color: var(--brand-border); color: var(--brand-strong); font-weight: 700; }
}

/* Phone content density */
@media (max-width: 640px) {
  .chat-scroll { padding: 12px calc(10px + var(--safe-r)) 20px calc(10px + var(--safe-l)); }
  .chat-column { gap: 10px; }
  .msg { max-width: 90%; }
  .ad-card { padding: 14px; }
  .composer { padding-top: 8px; padding-left: calc(10px + var(--safe-l)); padding-right: calc(10px + var(--safe-r)); }
  .composer-hint { display: none; }
  .composer-inner { padding: 5px; border-radius: 22px; }
  .send { min-width: 68px; padding: 0 16px; }
  /* chips: one swipeable row, zero vertical cost */
  .quick-chips { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; margin-left: -2px; margin-right: -2px; padding: 2px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .quick-chips::-webkit-scrollbar { display: none; }
  .quick-chip { flex: none; min-height: 36px; padding: 6px 13px; font-size: 12.5px; white-space: nowrap; }
  .resume-banner small { display: none; }
  .comp-grid { grid-template-columns: 1fr; }
}

/* Narrow phones (320-400px): the header has to fit three buttons and a name. */
@media (max-width: 400px) {
  .top { gap: 6px; padding-left: calc(10px + var(--safe-l)); padding-right: calc(10px + var(--safe-r)); }
  .top .mark { width: 32px; height: 32px; font-size: 14px; }
  .top-actions { gap: 4px; }
  .file-word { display: none; }
  #toggleDossierBtn { padding: 0 10px; gap: 5px; }
}

/* Lead picker rows: the lead's name gets the full width, the three actions share a second line. */
@media (max-width: 520px) {
  .history-row.lead-row { flex-wrap: wrap; padding: 0 10px 10px 0; }
  .history-row.lead-row .history-main { flex: 1 1 100%; padding-right: 13px; }
  .history-row.lead-row .history-main + .ghost-btn { margin-left: 10px; }
  .history-row.lead-row > .ghost-btn { flex: 1 1 0; min-width: 0; padding-left: 8px; padding-right: 8px; }
}

/* Phones on their side: every pixel of height goes to the conversation. */
@media (max-height: 500px) and (orientation: landscape) {
  .top { min-height: 44px; padding-top: calc(var(--safe-t) + 4px); padding-bottom: 4px; }
  .top .mark { width: 30px; height: 30px; font-size: 13px; }
  .step-progress { padding-bottom: 6px; }
  .composer { padding-top: 6px; padding-bottom: calc(8px + var(--safe-b)); }
  .composer-hint { display: none; }
  .photo-coach-bar { display: none; }
  .quick-chips { flex-wrap: nowrap; overflow-x: auto; margin-bottom: 6px; scrollbar-width: none; }
  .quick-chips::-webkit-scrollbar { display: none; }
  .quick-chip { flex: none; white-space: nowrap; }
  .chat-scroll { padding-top: 10px; padding-bottom: 14px; }
  .ad-card { padding: 12px 14px; }
}

/* ---- Touch: nothing the thumb must hit is under 44px ---- */
@media (pointer: coarse) {
  .attach, .send { min-height: var(--touch); }
  .quick-chip { min-height: var(--touch); padding: 8px 16px; }
  .attach-chip .rm { width: var(--touch); height: var(--touch); font-size: 16px; }
  .doc-item .doc-cta { min-height: var(--touch); display: inline-flex; align-items: center; padding: 4px 12px; }
  .profile-row.is-editable { min-height: var(--touch); align-items: center; }
  .history-row { min-height: 64px; }
  .history-remove { min-width: var(--touch); min-height: var(--touch); display: inline-grid; place-items: center; }
  .dossier-toggle-btn, .mobile-close-dossier { min-width: var(--touch); min-height: var(--touch); }
  input.kind, select.kind, .mini { min-height: var(--touch); }
  .tool-btn { min-width: var(--touch); }
  .jump-latest { min-height: var(--touch); }
  .trust-acc summary { min-height: var(--touch); }
  .history-footer a { min-height: var(--touch); }
  .outreach-login-row input { min-height: var(--touch); }
}