/* THE TEXTS ROOM — its styles. The rebuild (15 Oct) moved them here out of
   app.css: the conversation list's rows, the open thread (header, bubbles, day
   rules, the scrolling column) and the Mac app's "can this read your texts?"
   card. Loaded right after app.css (see room-css:start in index.html), so a rule
   here wins a tie with app.css the way it did when it sat further down it.

   What stays in app.css, on purpose: .tx-compose and .tx-compose-note, because
   the contact card's reply box reuses them and its .cd-compose rules (earlier
   in app.css, same specificity) must keep winning over them. The mail shell the
   room borrows (.inbox-wrap, .mail-list-col, .mail-row...) is shared with Mail. */

/* ==========================================================================
   TEXTS. The same two-column shell mail uses (.inbox-wrap, .mail-list-col,
   .mail-list, .reading-pane) — a thread list on the left, one conversation on
   the right, including the "reading" class that hides the list behind the
   open thread on a phone. See #view-texts in index.html and loadTexts() /
   openTextThread() in app.js.

   THE READING PANE IS OVERRIDDEN INTO A COLUMN OF ITS OWN, here, because a
   conversation is not a document that scrolls as one piece the way an email
   does — the header and the compose box have to stay put while only the
   messages between them move. */
#view-texts .reading-pane{ display:flex; flex-direction:column; padding:0; overflow:hidden; }
.tx-empty{ flex:1; display:flex; align-items:center; justify-content:center;
  text-align:center; color:var(--text-dim); padding:var(--space-8); }
.tx-head{ flex:none; display:flex; align-items:center; gap:var(--space-3); padding:var(--space-4) var(--space-6);
  border-bottom:1px solid var(--glass-border); }
/* ITEM 107 — closeTextThread had no button. Hidden by default and revealed
   by the phone breakpoint below, the same rule .bottom-nav follows a little
   further down this file: never a control that is display:none only inside
   a media query, which would leave it sitting in the middle of the desktop
   layout at every other width. Desktop shows both columns side by side —
   see .inbox-wrap.reading below — so there is nothing to back OUT of there. */
.tx-back{ display:none; flex:none; font-size:var(--type-title); line-height:1; color:var(--text-dim);
  cursor:pointer; padding:var(--space-hair) var(--space-1); margin-right:var(--space-hair); border-radius:var(--radius-control); }
.tx-back:hover{ color:var(--text); background:color-mix(in srgb, var(--text) 8%, transparent); }
.tx-head-name{ font-weight:700; font-size:var(--type-lead); }
.tx-head-sub{ font-size:var(--type-body); color:var(--text-dim); margin-top:1px; }
/* ITEM 247 — "text window is longer than Texas - need to rim or border the
   text inbox to break it up a little."

   The conversation was one unbroken column running from the header straight
   down to the compose box with no edge of its own, and the day labels were
   bare centred text floating in the gap between bubbles — nothing in the
   whole scroll said "this much is one thing". Two rims, both drawn with
   --glass-border, the same token every other panel in the app rims itself
   with (.task-card, .body-metric, .rh-card and the rest):

     1. The scrolling column gets a card edge of its own, inset from the
        reading pane so the messages sit INSIDE something instead of running
        off the sides of the glass. The border belongs to the scroll box, so
        it stays put while the messages move under it.
     2. Each day label gets a hairline out to both edges, which cuts the run
        into visible days rather than leaving the reader to spot a slightly
        paler line of small caps. */
.tx-messages{ flex:1; overflow-y:auto; padding:var(--space-4) var(--space-5); display:flex; flex-direction:column; gap:var(--space-2);
  margin:var(--space-4) var(--space-4); border:1px solid var(--glass-border); border-radius:var(--radius-card);
  background:rgba(120,120,140,.05); }
.tx-day{ display:flex; align-items:center; gap:var(--space-3); font-size:var(--type-label); font-weight:700; letter-spacing:.07em;
  text-transform:uppercase; color:var(--text-faint); margin:var(--space-4) 0 var(--space-2); }
.tx-day::before, .tx-day::after{ content:''; flex:1; height:1px; background:var(--glass-border); }
.tx-day:first-child{ margin-top:0; }
/* A BUBBLE EACH SIDE, THE ONLY COLOUR ON THE PAGE. His own texts lean right
   and carry the app's one accent, exactly like the .htv-mine convention
   already used for his own turns elsewhere — everyone else's stay neutral
   glass, left-aligned, so the eye never has to read a name to know who sent
   which line. */
.tx-bub-row{ display:flex; }
.tx-bub-row.mine{ justify-content:flex-end; }
.tx-bub{ max-width:72%; padding:var(--space-2) var(--space-3); border-radius:var(--radius-card); font-size:var(--type-body);
  line-height:1.45; white-space:pre-wrap; word-break:break-word; }
.tx-bub-row:not(.mine) .tx-bub{ background:color-mix(in srgb, var(--text) 7%, transparent);
  border-bottom-left-radius:var(--radius-tight); }
.tx-bub-row.mine .tx-bub{ background:var(--accent); color:#fff; border-bottom-right-radius:var(--radius-tight); }
.tx-bub-row.pending .tx-bub{ opacity:.6; }
.tx-bub-meta{ font-size:var(--type-label); margin-top:var(--space-1); color:var(--text-faint); }
.tx-bub-row.mine .tx-bub-meta{ text-align:right; }
.tx-bub-nobody{ font-size:var(--type-body); color:var(--text-faint); padding:var(--space-hair) var(--space-1); }
.tx-thread-more{ text-align:center; padding:var(--space-3); }
/* THE LIST ROWS. .mail-row/.mail-from/.mail-time/.mail-preview are mail's own
   classes, reused rather than copied — a texting thread and an email both
   boil down to "who, when, and the last line", and giving that shape a
   second name here would just be two things to keep visually in step. */
.tx-thread .mail-preview{ display:flex; gap:var(--space-2); }
.tx-thread-count{ flex:none; font-family:var(--font-mono); font-size:var(--type-label);
  color:var(--text-faint); }

/* Mine are white on the accent; on a dark ground the accent can be light enough
   that white fails, so the dark modes take the ink the theme chose for it. */
:root:not([data-mode="light"]) .tx-bub-row.mine .tx-bub{ color:var(--on-accent); }

/* Phone width: the one screen whose list is hidden behind the open thread needs a
   way back to it. The rule above hides the arrow; this brings it back. */
@media (max-width: 780px){
  .tx-back{ display:inline-block; }
}

/* 14 October — CAN THIS MAC READ YOUR TEXTS? The Texts first-run card, Mac app
   only (txAccessHtml in app.js). A refusal is coloured as the one thing on the
   page that has to be read; a clean yes is quiet. */
#txAccess:empty{ display:none; }
.tx-access{ margin:0 0 var(--space-3); padding:var(--space-3) var(--space-4);
  border:var(--space-hair) solid var(--glass-border); border-radius:var(--radius-card);
  background:var(--glass-bg); }
.tx-access[data-tone="bad"]{ border-color:rgba(255,90,71,.28); background:rgba(255,90,71,.06); }
.tx-access[data-tone="good"]{ padding:var(--space-2) var(--space-4); }
.tx-access-head{ margin:0; font-size:var(--type-lead); color:var(--text); line-height:1.4; }
.tx-access[data-tone="bad"] .tx-access-head{ color:var(--pink-2); }
.tx-access-line{ margin:var(--space-1) 0 0; font-size:var(--type-body); color:var(--text-dim); line-height:1.5; }
.tx-access-quiet{ color:var(--text-faint); font-size:var(--type-label); }
.tx-access-steps{ margin:var(--space-2) 0 0; padding-left:var(--space-5); font-size:var(--type-body); color:var(--text); line-height:1.6; }
.tx-access-acts{ display:flex; align-items:center; gap:var(--space-2); flex-wrap:wrap; margin-top:var(--space-3); }
.tx-access-when{ font-size:var(--type-label); color:var(--text-faint); }