/* comms — Settings → Integrations, message logs, spreadsheet import.
 *
 * Arrangements only; cards, chips, facts, banners and sheets are the shared kit.
 */

.integ-page { display: grid; gap: 24px; }
.integ-group-h { font-size: 13px; font-weight: 600; letter-spacing: .02em; color: var(--ink-3); margin: 0 0 8px; }
.integ-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr)); gap: 16px; align-items: start; }
.integ-card { min-width: 0; }
.integ-card .card-head h3 { margin: 0; font-size: 15px; font-weight: 600; }
.integ-does { margin: 0 0 12px; color: var(--ink-2); }
.integ-off { display: flex; gap: 8px; align-items: flex-start; margin: 0 0 4px; }
.integ-off svg, .integ-where svg { flex: none; width: 16px; height: 16px; margin-top: 2px; }
.integ-facts { margin: 0 -16px 8px; border-top: 1px solid var(--hair-2); }
.integ-facts .fact .v { overflow-wrap: anywhere; }
.integ-acts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.integ-acts form { margin: 0; }
.integ-where { display: flex; gap: 8px; align-items: flex-start; margin: 0 0 12px; }
.integ-card .banner { margin-top: 8px; }
.integ-url { display: flex; gap: 6px; align-items: center; min-width: 0; }
.integ-url code { overflow-wrap: anywhere; font-size: 12px; }

@media (max-width: 600px) {
  .integ-facts { grid-template-columns: 1fr; }
  .integ-facts .fact:nth-child(odd) { border-right: 0; }
  .integ-acts .btn { min-height: 44px; }
}

/* ── the message log ─────────────────────────────────────────────────────── */

.msg-acts { padding: 12px 16px 0; justify-content: flex-start; }
.msg-acts .hint { display: inline-flex; gap: 6px; align-items: center; margin: 0; }
.msg-acts .hint svg { width: 16px; height: 16px; flex: none; }
.msg-hint { display: flex; gap: 8px; align-items: flex-start; margin: 0; padding: 12px 16px 0; }
.msg-hint svg { flex: none; width: 16px; height: 16px; margin-top: 2px; }
.msg-dir { display: inline-flex; gap: 6px; align-items: baseline; }
.msg-dir svg { width: 13px; height: 13px; flex: none; color: var(--ink-3); }
.msg-preview { white-space: normal; }
.sub.bad { color: var(--bad); }

/* ── notifications: the bell switch and the email switch on one row ──────── */

.notify-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 16px; align-items: center; grid-column: 1 / -1; padding: 2px 0; }
.notify-row .field { margin: 0; }
@media (max-width: 600px) {
  .notify-row { grid-template-columns: minmax(0, 1fr); }
}

/* ── the OAuth redirect address ──────────────────────────────────────────── */

.integ-redirect { margin-bottom: 12px; }
.integ-redirect .integ-url { padding: 8px 10px; border: 1px solid var(--hair-2); border-radius: 8px; background: var(--surface-2); }

/* ── importing a spreadsheet ─────────────────────────────────────────────── */

.import-choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 16px; }
.import-choice h3 { margin: 0 0 4px; font-size: 14px; font-weight: 600; }
.import-choice .hint { margin: 0 0 8px; }
.import-note { display: flex; gap: 8px; align-items: flex-start; margin: 16px 0 0; }
.import-note svg { flex: none; width: 16px; height: 16px; margin-top: 2px; }
#preview .sub.bad { display: block; }
#preview td .sub { white-space: normal; }

/* ── the live phone check (public/js/phone.js) ───────────────────────────── */

.hint.phone-ok { color: var(--ink-2); }
.hint.phone-bad { color: var(--bad); }
.integ-optional, .integ-group-note { display: flex; gap: 8px; align-items: flex-start; margin: 0 0 12px; }
.integ-optional svg, .integ-group-note svg { flex: none; width: 16px; height: 16px; margin-top: 2px; }
.integ-group-note { margin-bottom: 12px; }

/* ── the email intake queue (COMMS-6) ────────────────────────────────────── */

.intake-parsed { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 16px; margin: 0; font-size: 13px; }
.intake-parsed dt { color: var(--ink-3); }
.intake-parsed dd { margin: 0; overflow-wrap: anywhere; }
.intake-parsed dd .sub { display: block; }
.intake-files { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 8px; }
.intake-files li { display: flex; gap: 8px; align-items: flex-start; }
.intake-files svg { flex: none; width: 16px; height: 16px; margin-top: 2px; color: var(--ink-3); }
.intake-files .sub { display: block; }
.intake-body {
  margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font: inherit;
  max-height: 460px; overflow-y: auto; color: var(--ink-2);
}
.intake-main { min-width: 0; }
.intake-acts { flex-wrap: wrap; gap: 8px; }
.intake-acts form { margin: 0; }
.msg-row-acts { display: inline-flex; gap: 4px; margin-top: 4px; }
.inline-form { display: inline-block; margin: 0; }

@media (max-width: 600px) {
  .intake-parsed { grid-template-columns: minmax(0, 1fr); gap: 2px 0; }
  .intake-parsed dt { margin-top: 8px; }
  .intake-acts .btn { min-height: 44px; }
}

/* ── the conversation view on a customer or an advance (COMMS-6) ─────────── */

.msg-threads { display: grid; gap: 16px; padding: 12px 16px; }
.msg-thread { border: 1px solid var(--hair-2); border-radius: 10px; overflow: hidden; }
.msg-thread-head { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; padding: 10px 12px; border-bottom: 1px solid var(--hair-2); }
.msg-thread-head h3 { margin: 0; font-size: 14px; font-weight: 600; }
.msg-list { list-style: none; margin: 0; padding: 0; display: grid; }
.msg-list .msg { padding: 10px 12px; border-bottom: 1px solid var(--hair-2); }
.msg-list .msg:last-child { border-bottom: 0; }
.msg-list .msg.in { background: var(--surface-2); }
.msg-meta { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; font-size: 12px; }
.msg-who { font-weight: 500; }
.msg-text { margin: 6px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.msg-thread-acts { padding: 8px 12px; border-top: 1px solid var(--hair-2); }

@media (max-width: 600px) {
  .msg-thread-acts .btn { min-height: 44px; }
}