/* Texts (Build E, texts-design.md): the composer's Text tab (components/sms-composer.js), text items in History
   (components/timeline.js `.tl-sms-*`), Settings › Text templates (pages/settings-text-templates.js `.stpl-*`) and
   Texts not filed (pages/texts-unmatched.js `.unm-*`). Looks like the Email tab beside it: same rows (mail.css .mc-row),
   same footer (.mail-foot), same green Send. Existing tokens only; no gold (no AI part here). */

/* ---- A. Text tab ---- */
.sms-composer { display: flex; flex-direction: column; padding: var(--sp-2) var(--sp-6) var(--sp-6); animation: composer-open var(--t-med) var(--ease-enter); }
.sms-composer [hidden] { display: none !important; }
.sms-to, .sms-from { display: inline-block; padding-top: 7px; font-size: var(--fs-md); overflow-wrap: anywhere; }
.sms-from { color: var(--text-2); }
.sms-to-main > .select-trigger { flex: 1 1 240px; max-width: 100%; }
.sms-editor { display: flex; flex-direction: column; }
.sms-body {
  display: block; width: 100%; box-sizing: border-box; min-height: 96px; max-height: 240px; margin-top: var(--sp-5);
  padding: var(--sp-5) var(--sp-6); border: 1px solid var(--border); border-radius: var(--r-md); background: var(--bg-surface);
  color: var(--text); font: inherit; font-size: var(--fs-md); line-height: var(--lh-md); resize: vertical; overflow-y: auto; outline: none;
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.sms-body:focus { border-color: var(--border-focus); }
.sms-body::placeholder { color: var(--placeholder); }
.sms-count { color: var(--text-2); font-size: var(--fs-sm); white-space: nowrap; }
.sms-count.is-full { color: var(--red); }
.sms-count-note { margin-top: var(--sp-3); color: var(--text-2); font-size: var(--fs-sm); }
.sms-foot { row-gap: var(--sp-3); }
.sms-error { margin-top: var(--sp-4); color: var(--red); font-size: var(--fs-sm); }
.sms-error:empty { display: none; }
.sms-state { margin-top: var(--sp-4); }
.sms-opted-out {
  display: flex; align-items: flex-start; gap: var(--sp-4); padding: var(--sp-4) var(--sp-5); border-radius: var(--r-md);
  background: var(--lost-bg); color: var(--red); font-size: var(--fs-md); line-height: var(--lh-md);
}
.sms-opted-out .ic, .sms-opted-out svg { width: 16px; height: 16px; display: block; flex: none; margin-top: 2px; }
.sms-no-phone { color: var(--text-2); font-size: var(--fs-md); padding: var(--sp-3) 0; }
.sms-no-phone a { color: var(--link); }
.sms-bad-phone { margin-top: var(--sp-4); }

/* ---- B. Text items in History ---- */
.tl-sms-head { min-width: 0; font-size: var(--fs-md); line-height: var(--lh-md); font-weight: var(--fw-semibold); overflow-wrap: anywhere; }
.tl-sms-head.is-new-reply { font-weight: 700; color: var(--text); }
.tl-sms.is-new-reply { box-shadow: var(--shadow-raised), inset 3px 0 0 var(--reply-blue); }
.tl-pill.tl-sms-pill.is-delivered { background: var(--won-bg); color: var(--green); }
.tl-pill.tl-sms-pill.is-failed { background: var(--lost-bg); color: var(--red); }
.tl-sms-error { margin-top: var(--sp-2); color: var(--red); font-size: var(--fs-sm); }
.tl-sms-body { margin-top: var(--sp-3); color: var(--text); white-space: pre-wrap; overflow-wrap: anywhere; line-height: var(--lh-md); }
.tl-sms-by { margin-top: var(--sp-3); color: var(--text-2); font-size: var(--fs-sm); }
.tl-sms-reply {
  border: 0; background: none; padding: 0; color: var(--link); font: inherit; font-size: var(--fs-sm); cursor: pointer;
}
.tl-sms-reply:hover { text-decoration: underline; }
.tl-sms-reply:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; border-radius: var(--r-sm); }

/* Review round 2: move a text to another lead or deal (History '...' menu) */
.tl-sms-more { margin-left: var(--sp-2); }
.tl-sms-move-box { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-3) var(--sp-4); margin-top: var(--sp-4); }
.tl-sms-move-box[hidden] { display: none; }
.tl-sms-move-label { color: var(--text-2); font-size: var(--fs-sm); }
.tl-sms-move-box .lookup { flex: 1 1 220px; min-width: 0; max-width: 360px; }

/* ---- D. Settings › Text templates ---- */
.stpl-text { min-height: 120px; margin-top: 0; }
.stpl-tools { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; margin-top: var(--sp-3); }
.stpl-editor .sms-count-note { margin-top: 0; }

/* ---- E. Texts not filed ---- */
.unm-page { max-width: 760px; }
.unm-intro { margin: 0 0 var(--sp-5); color: var(--text-2); font-size: var(--fs-md); }
.unm-card { background: var(--bg-surface); border-radius: var(--r-lg); box-shadow: var(--shadow-raised); }
.unm-row { display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-6); border-bottom: 1px solid var(--border); }
.unm-row:last-child { border-bottom: 0; }
.unm-head { color: var(--text-2); font-size: var(--fs-sm); }
.unm-text { color: var(--text); font-size: var(--fs-md); line-height: var(--lh-md); white-space: pre-wrap; overflow-wrap: anywhere; }
.unm-cands { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-3) var(--sp-4); }
.unm-cands-label { color: var(--text-2); font-size: var(--fs-sm); }
.unm-actions { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; }
.unm-link { border: 0; background: none; padding: 0; color: var(--link); font: inherit; font-size: var(--fs-sm); cursor: pointer; }
.unm-link:hover { text-decoration: underline; }
.unm-link.unm-dismiss { color: var(--text-2); }
.unm-lookup-box { max-width: 420px; }
.unm-empty { padding: var(--sp-8) var(--sp-6); color: var(--text-2); text-align: center; }
.unm-removed-foot { display: flex; justify-content: flex-end; margin-top: var(--sp-4); }
.unm-removed-foot:has(> [hidden]) { margin-top: 0; }
.unm-removed { margin-top: var(--sp-4); }
.unm-removed .unm-text { color: var(--text-2); }
.unm-removed[hidden], .unm-link[hidden], .leads-texts-unmatched[hidden] { display: none; }

/* Review round 2: the way back to Texts not filed, in the Leads Inbox toolbar (pages/leads.js) */
.leads-texts-unmatched {
  display: inline-flex; align-items: center; gap: var(--sp-2); color: var(--link); font-size: var(--fs-sm);
  font-weight: 600; text-decoration: none; white-space: nowrap;
}
.leads-texts-unmatched:hover { text-decoration: underline; }
.leads-texts-unmatched .ic { width: 16px; height: 16px; }

/* Build 8 (prelaunch-design.md D): Reply from a number that isn't on the contact (same yellow line as sms-bad-phone). */
.sms-unknown-number { margin-top: var(--sp-4); flex-wrap: wrap; align-items: center; }
.sms-unknown-number .btn, .sms-unknown-number .link-btn { flex: none; }