/* shared/portal-messages.css
 *
 * The conversation list and the thread. Design system tokens only.
 *
 * THE THING THIS FILE EXISTS TO FIX, as much as the palette: the module it
 * replaces renders thirteen of its fourteen font sizes below the 16px floor,
 * including a 12px timestamp on every row. Nothing here goes below --fs-min,
 * and the design system guard fails the build if it does.
 *
 * --t3 is card-only. Secondary text on the page ground uses --t-min.
 */

.ms { padding: var(--sp-5) var(--sp-4) var(--sp-7); max-width: var(--portal-measure); margin: 0 auto; }
/* THE LIST IS A PAGE, THE THREAD IS A CONVERSATION, and they want opposite
   widths. `.ms` is the root of both, so the list gets the full portal measure
   and the thread pulls back to the reading one. Without this a message bubble
   at 88 percent of 1216px runs to over a thousand pixels, which is not a
   conversation, it is a wall. */
.ms-thread { max-width: var(--portal-reading); margin: 0 auto; }

.ms-head { margin-bottom: var(--sp-4); }
.ms-head h1 { font-size: var(--fs-h2); }

/* ── The list ────────────────────────────────────────────────────────────── */

.ms-list > * + * { margin-top: var(--sp-3); }

.hds .ms-row:not(.ds-btn) {
  display: flex; align-items: center; gap: var(--sp-4);
  width: 100%; text-align: left; cursor: pointer; min-height: var(--tap-primary);
  font-family: var(--font-body); font-size: var(--fs-body); color: var(--t1);
  background: var(--card);
}
.ms-row__av {
  flex: none; width: var(--tap-min); height: var(--tap-min); border-radius: var(--r-pill);
  background: var(--a2-bg); color: var(--a2); border: 1px solid var(--a2);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: var(--fs-min);
}
.ms-row__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ms-row__top { display: flex; align-items: baseline; gap: var(--sp-3); }
.ms-row__name { font-weight: 700; flex: 1; min-width: 0; }
/* The timestamp is 16px like everything else. It used to be 12px. */
.ms-row__when { font-size: var(--fs-min); color: var(--t3); flex: none; }
.ms-row__sub {
  font-size: var(--fs-min); color: var(--t3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ms-row__sub.is-declined { color: var(--t2); font-style: normal; }
/* An unread count is a number and a shape, never a bare colour. */
.ms-row__unread {
  flex: none; min-width: 1.75rem; height: 1.75rem; padding: 0 var(--sp-2);
  border-radius: var(--r-pill); background: var(--brand); color: var(--on-brand);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-min); font-weight: 700;
}

/* ── The thread ──────────────────────────────────────────────────────────── */

.ms-thread__head {
  display: flex; align-items: center; gap: var(--sp-3);
  padding-bottom: var(--sp-4); margin-bottom: var(--sp-4);
  border-bottom: 1px solid var(--bd-strong);
}
.ms-thread__av {
  flex: none; width: 2.5rem; height: 2.5rem; border-radius: var(--r-pill);
  background: var(--a2-bg); color: var(--a2); border: 1px solid var(--a2);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: var(--fs-min);
}
.ms-thread__who { font-family: var(--font-display); font-size: var(--fs-h3); line-height: var(--lh-head); }

.ms-msgs { display: flex; flex-direction: column; gap: var(--sp-4); }

.ms-msg { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-1); max-width: 88%; }
.ms-msg.is-mine { align-self: flex-end; align-items: flex-end; }
.ms-msg__bubble {
  background: var(--card); border: 1px solid var(--bd-strong);
  border-radius: var(--r-lg); padding: var(--sp-3) var(--sp-4);
  line-height: var(--lh-body);
}
.ms-msg.is-mine .ms-msg__bubble { background: var(--brand-tint); border-color: var(--brand); }
.ms-msg__when { font-size: var(--fs-min); color: var(--t-min); }

/* An event is a fact about what changed, not an announcement, so it is a plain
   centred line rather than a banner. */
.ms-event {
  text-align: center; margin: var(--sp-2) 0;
  font-size: var(--fs-min); color: var(--t-min);
}
.ms-event > span {
  display: inline-block; background: var(--surface);
  border: 1px solid var(--bd-strong); border-radius: var(--r-pill);
  padding: var(--sp-2) var(--sp-4); max-width: 34rem;
}

.ms-msg__bubble--plan, .ms-msg__bubble--arr { background: var(--surface); }
.ms-plan__title, .ms-arr__title {
  font-family: var(--font-display); font-size: var(--fs-lead);
  line-height: var(--lh-head); margin-bottom: var(--sp-2);
}
.ms-plan__body { margin-bottom: var(--sp-3); }

.ms-arr__terms { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-2) var(--sp-4); margin-bottom: var(--sp-4); }
.ms-arr__terms dt { font-size: var(--fs-min); font-weight: 700; color: var(--t2); }
.ms-arr__terms dd { font-size: var(--fs-min); }
.ms-arr__note { margin-top: var(--sp-3); font-size: var(--fs-min); color: var(--t2); }

.ms-compose { margin-top: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-3); }
.ms-decline { margin-top: var(--sp-3); }
.ms-closed {
  margin-top: var(--sp-5); padding: var(--sp-4);
  background: var(--surface); border: 1px solid var(--bd-strong); border-radius: var(--r-md);
  color: var(--t2);
}

/* ── WHO SAID IT, AND THE GROUP ROOM. 7 Sep 2026. ──────────────────────────
   A one-to-one thread needs neither of these: two people, and the side of the
   bubble says which. A micro-provider room has three, and an unattributed
   "I can do Tuesday" is not an offer anybody can rely on. */
.hds .ms-msg__who{
  display:block;font-size:var(--fs-min);font-weight:700;color:var(--t2);
  margin:0 0 2px;letter-spacing:.02em;
}
/* Never on your own message: the bubble is already on your side, and your own
   name back at you is noise. Belt and braces with the render, which does not
   emit it for m.mine. */
.hds .ms-msg.is-mine .ms-msg__who{display:none;}

/* The group's row in her list. Marked, not restyled: it is the same row, and a
   room that looked like a different kind of object would read as a different
   kind of feature. */
.hds .ms-row.is-group .ms-row__av{
  background:var(--brand-tint);color:var(--brand);
}

/* ══════════════════════════════════════════════════════════════════════════
   THE MICROPROVIDER GROUP CARD. 8 Sep 2026.

   It sits under the conversation list because the group and the group chat are
   the same fact: membership is one column, and the room's policies read it.
   Founder: "creating a group should be in the messaging part of the carer
   portal ... rather than having it hidden in their profile."

   ALMOST EVERYTHING HERE IS LAYOUT. The card, the title, the field, the label,
   the hint, the input, the chip and the buttons all come from hibant-ds.css and
   none of it is restated. NOTHING HERE NAMES A COLOUR.
   ══════════════════════════════════════════════════════════════════════════ */

.ms-grp { margin-top: var(--sp-5); }

/* SOMETHING IS WAITING ON SOMEBODY. Boxed off rather than reading as another
   paragraph, in the tint the design system already uses for something
   informational, so it introduces no colour of its own. */
.ms-grp__ask {
  background: var(--info-bg);
  border: 1px solid var(--info);
  border-radius: var(--r-md);
  padding: var(--sp-4);
  margin-bottom: var(--sp-5);
}
/* .ds-card's body rule targets `.ds-card > p`, and these are two levels deeper,
   so without this they fall back to the page default. */
.ms-grp__ask > p { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--t2); }
.ms-grp__ask > p + p { margin-top: var(--sp-2); }
.ms-grp__ask .ds-actions { margin-top: var(--sp-4); }

/* Her own ask, still waiting on somebody else. Quieter than the boxes above,
   because nothing about it is hers to do. */
.ms-grp__pending { margin-bottom: var(--sp-5); }

/* WHO IS IN IT. A list and not a table: on a phone a table of three carers with
   two buttons each is a horizontal scrollbar. */
.ms-grp__people { list-style: none; margin: var(--sp-5) 0; padding: 0; }
.ms-grp__person {
  display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
  padding: var(--sp-3) 0;
  border-top: 1px solid var(--bd);
}
.ms-grp__person:last-child { border-bottom: 1px solid var(--bd); }
.ms-grp__name { font-weight: 600; color: var(--t1); }
/* The actions go to the far end on a wide screen and wrap under the name on a
   narrow one, rather than squeezing the name to nothing. */
.ms-grp__acts { margin-left: auto; display: flex; gap: var(--sp-2); flex-wrap: wrap; }

/* The link is for copying, not for typing in, so it reads as a value rather
   than as an empty box waiting for her. NO --font-mono: the first draft reached
   for one with a fallback, and the design system has no such token, so the
   fallback would have been the only value. It is one line of small text. */
#grp-link { font-size: var(--fs-min); }

/* THE FIELD AFTER A PARAGRAPH NEEDED SAYING, and this is the second time: the
   same rule was written for the profile version of this card and went with it
   when the card moved. Every other card in the portal opens with a hint that
   carries its own bottom margin; this one explains itself in full sentences
   first, and without this the label "Start a microprovider group" presses
   straight against the line above it. Seen in the preview, not reasoned about. */
.ms-grp > p + .ds-field { margin-top: var(--sp-5); }