/* ── Shell ────────────────────────────────────────────────────────────────
   The page tint has to run edge to edge behind the column, so the shell sits
   directly inside #mp-main rather than overriding it. Every earlier version of
   these pages set `#mp-main{background:var(--page)}`, which meant a page could not
   be embedded anywhere else without dragging its background along. */
.pf-shell {
  background: var(--pf-page);
  min-height: 70vh;
  padding-bottom: 56px;
}
.pf-wrap { max-width: 620px; margin: 0 auto; }
.pf-wrap-wide { max-width: 980px; margin: 0 auto; padding: 0 16px; }

/* ── Cover + identity ─────────────────────────────────────────────────────
   A flat band, not a gradient, and 132px rather than the 50-80px hero the old
   page used: the avatar overlaps it by half, which is what makes a profile read
   as a profile at a glance and a banner read as an advertisement. */
.pf-cover {
  height: 132px;
  background: var(--pf-accent);
  background-image: radial-gradient(circle at 22% 120%, rgba(255,255,255,.18), transparent 55%);
  position: relative;
}
.pf-cover-img { width: 100%; height: 100%; object-fit: cover; display: block; }

.pf-id {
  background: var(--pf-surface);
  border-bottom: 1px solid var(--pf-line);
  padding: 0 16px 14px;
  /* The overlap above only works if this block paints ON TOP of the cover.
     .pf-cover is position:relative, and a positioned element with z-index:auto
     paints above the content of static in-flow siblings — so without this the
     cover covered the top 44px of the avatar and the profile photo read as
     sitting *below* the banner instead of straddling it. */
  position: relative;
  z-index: 1;
}
.pf-id-top {
  display: flex;
  align-items: flex-end;
  gap: 14px;
  margin-top: -44px;
  margin-bottom: 11px;
}
.pf-avatar, .pf-avatar-txt {
  width: 96px; height: 96px;
  border-radius: 50%;
  border: 4px solid var(--pf-surface);
  background: var(--pf-page);
  flex: 0 0 auto;
}
.pf-avatar { object-fit: cover; }
.pf-avatar-txt {
  display: flex; align-items: center; justify-content: center;
  font-size: 36px; font-weight: 800; color: var(--pf-ink-2);
  line-height: 1;
}
.pf-id-acts {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.pf-display {
  display: flex; align-items: center; gap: 6px;
  font-size: 21px; font-weight: 800; color: var(--pf-ink);
  letter-spacing: -.02em; line-height: 1.2;
}
.pf-handle { font-size: 14px; color: var(--pf-muted); margin-top: 2px; }
.pf-tick {
  width: 17px; height: 17px;
  border-radius: 50%;
  background: var(--pf-blue);
  color: var(--primary-ink);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px;
  flex: 0 0 auto;
}
.pf-tick.is-seller { background: var(--pf-good); }
.pf-bio {
  font-size: 14.5px; line-height: 1.5; color: var(--pf-ink);
  margin: 9px 0 0;
  white-space: pre-line;
}

.pf-meta {
  display: flex; flex-wrap: wrap; gap: 7px 15px;
  margin-top: 10px;
  font-size: 13px; color: var(--pf-ink-2);
}
.pf-meta-item { display: inline-flex; align-items: center; gap: 6px; }
.pf-meta-item i { color: var(--pf-muted); font-size: 13px; }
.pf-meta-item a { color: var(--pf-accent); }
.pf-meta-item a:hover { text-decoration: underline; }

/* Counts read as one line of prose — bold number, muted noun — the way every
   social profile writes them. The old page gave each of eight numbers its own
   bordered tile, which made "Engagement 4" look like a KPI on a dashboard. */
.pf-counts { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 12px; }
.pf-count {
  font-size: 13.5px; color: var(--pf-muted);
  text-decoration: none;
  display: inline-flex; gap: 5px;
}
.pf-count strong { color: var(--pf-ink); font-weight: 800; }
a.pf-count:hover strong { text-decoration: underline; }
/* Followers and Following are pages, not tabs, so when you are standing on one
   the counts row is the only thing that can say so. */
.pf-count.is-on { color: var(--pf-accent); }
.pf-count.is-on strong { color: var(--pf-accent); }

/* ── Buttons ── */
.pf-btn {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--pf-accent); color: var(--primary-ink);
  border: 1px solid var(--pf-accent);
  border-radius: 8px;
  padding: 9px 15px;
  font-size: 14px; font-weight: 700;
  font-family: inherit;
  cursor: pointer; text-decoration: none;
  transition: background .15s, color .15s, border-color .15s;
  white-space: nowrap;
}
.pf-btn:hover { background: var(--pf-accent-dark); border-color: var(--pf-accent-dark); color: var(--primary-ink); }
.pf-btn-ghost {
  background: transparent; color: var(--pf-ink-2);
  border-color: var(--pf-line);
}
.pf-btn-ghost:hover { background: var(--pf-page); color: var(--pf-ink); border-color: var(--pf-line); }
.pf-btn-danger { background: transparent; color: var(--pf-bad); border-color: var(--pf-line); }
.pf-btn-danger:hover { background: var(--pf-bad-soft); color: var(--pf-bad); border-color: var(--pf-bad-soft); }
.pf-btn-sm { padding: 7px 12px; font-size: 13px; }
.pf-btn[disabled] { opacity: .55; cursor: default; }
/* The follow button carries its state in a class rather than in its text alone,
   so the AJAX handler has one thing to toggle and the two states cannot drift. */
.pf-btn-follow.is-following {
  background: transparent; color: var(--pf-ink-2); border-color: var(--pf-line);
}
.pf-btn-follow.is-following:hover {
  background: var(--pf-bad-soft); color: var(--pf-bad); border-color: var(--pf-bad-soft);
}

/* ── Tabs ─────────────────────────────────────────────────────────────────
   Sticks below the site nav, which is itself sticky at top:0 with height 62px
   and z-index 200 — at top:0 this slides underneath it and disappears. Each tab
   is a real link with ?tab=, so the browser back button, a bookmark and a
   no-script client all behave. */
.pf-tabs {
  background: var(--pf-surface);
  border-bottom: 1px solid var(--pf-line);
  position: sticky; top: 62px; z-index: 20;
  display: flex;
  overflow-x: auto;
  scrollbar-width: none;
}
.pf-tabs::-webkit-scrollbar { display: none; }
.pf-tabs-inner {
  max-width: 620px; margin: 0 auto;
  display: flex; width: 100%;
}
.pf-tab {
  flex: 1 0 auto;
  text-align: center;
  padding: 14px 16px 11px;
  font-size: 14px; font-weight: 700;
  color: var(--pf-muted);
  text-decoration: none;
  border-bottom: 3px solid transparent;
  white-space: nowrap;
  transition: color .15s, background .15s;
}
.pf-tab:hover { color: var(--pf-ink); background: var(--pf-page); }
.pf-tab.is-on { color: var(--pf-ink); border-bottom-color: var(--pf-accent); }
.pf-tab span { color: var(--pf-muted); font-weight: 600; }

/* ── Feed items ───────────────────────────────────────────────────────────
   Same shape as .cf-post: full-bleed with a hairline on phones, a bordered card
   from 640px up. */
.pf-post {
  background: var(--pf-surface);
  border-bottom: 1px solid var(--pf-line);
  margin-bottom: 8px;
}
@media (min-width: 640px) {
  .pf-wrap { padding-top: 8px; }
  .pf-post { border: 1px solid var(--pf-line); border-radius: 10px; }
}
.pf-post-head {
  display: flex; align-items: center; gap: 11px;
  padding: 12px 14px 8px;
}
.pf-mini, .pf-mini-txt {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--pf-page);
  flex: 0 0 auto;
}
.pf-mini { object-fit: cover; }
.pf-mini-txt {
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 16px; color: var(--pf-ink-2);
}
.pf-who { min-width: 0; flex: 1; }
.pf-who-name {
  display: flex; align-items: center; gap: 5px;
  font-size: 14.5px; font-weight: 700; color: var(--pf-ink);
  text-decoration: none; line-height: 1.25;
}
.pf-who-name:hover { color: var(--pf-accent); }
.pf-who-meta {
  font-size: 12px; color: var(--pf-muted); margin-top: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pf-post-body { padding: 0 15px 13px; }
.pf-post-title {
  display: block;
  font-size: 16px; font-weight: 700; color: var(--pf-ink);
  line-height: 1.35; text-decoration: none; margin-bottom: 4px;
}
.pf-post-title:hover { color: var(--pf-accent); }
.pf-post-text {
  font-size: 14.5px; line-height: 1.5; color: var(--pf-ink); margin: 0;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  -webkit-box-orient: vertical;
}
.pf-post-img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--header);
  display: block;
}
.pf-post-stats {
  display: flex; align-items: center; gap: 16px;
  padding: 9px 15px 12px;
  font-size: 13px; color: var(--pf-muted);
}
.pf-post-stats span { display: inline-flex; align-items: center; gap: 6px; }
.pf-post-stats i { font-size: 14px; }

/* ── Rows — people, blogs, tips, conversations ─────────────────────────────
   One row primitive for four lists that were four different layouts: a followers
   grid of centred cards, a blogs grid with 150px thumbnails, a tips flex row and
   a chat list built entirely from inline styles. */
.pf-row {
  display: flex; align-items: center; gap: 13px;
  background: var(--pf-surface);
  border-bottom: 1px solid var(--pf-line);
  padding: 13px 15px;
  text-decoration: none;
  transition: background .15s;
}
.pf-row:hover { background: var(--pf-page); }
.pf-row.is-unread { background: rgba(var(--primary-rgb),.055); }
@media (min-width: 640px) {
  .pf-list { border: 1px solid var(--pf-line); border-radius: 10px; overflow: hidden; background: var(--pf-surface); }
  .pf-list .pf-row:last-child { border-bottom: 0; }
}
.pf-row-thumb {
  width: 56px; height: 56px;
  border-radius: 8px;
  object-fit: cover;
  background: var(--pf-page);
  flex: 0 0 auto;
}
.pf-row-thumb-txt {
  width: 56px; height: 56px;
  border-radius: 8px;
  background: var(--pf-page);
  display: flex; align-items: center; justify-content: center;
  font-size: 24px;
  flex: 0 0 auto;
}
.pf-row-body { min-width: 0; flex: 1; }
.pf-row-title {
  display: flex; align-items: center; gap: 5px;
  font-size: 14.5px; font-weight: 700; color: var(--pf-ink);
  line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pf-row-sub {
  font-size: 13px; color: var(--pf-ink-2);
  margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pf-row-meta {
  display: flex; flex-wrap: wrap; gap: 4px 12px;
  font-size: 12px; color: var(--pf-muted); margin-top: 5px;
}
.pf-row-meta span { display: inline-flex; align-items: center; gap: 5px; }
.pf-row-side {
  margin-left: auto;
  text-align: right;
  font-size: 12px; color: var(--pf-muted);
  flex: 0 0 auto;
  display: flex; flex-direction: column; align-items: flex-end; gap: 4px;
}
.pf-row-acts { display: flex; align-items: center; gap: 7px; flex: 0 0 auto; }
.pf-row-acts form { display: inline; margin: 0; }
.pf-row-side form { margin: 0; }
/* An unread preview is the one line on the page that has to pull the eye. */
.pf-row-sub.is-strong { color: var(--pf-ink); font-weight: 700; }
/* The inbox's dismiss button. It used to appear only on :hover, which on a phone
   means never — there is no hover, so the delete button did not exist on the
   device most of this site is read on. Always visible, quiet until you reach it. */
.pf-row-x {
  background: none; border: 0; padding: 2px 4px; cursor: pointer;
  color: var(--pf-muted); font-size: 13px; line-height: 1;
}
.pf-row-x:hover { color: var(--pf-bad); }

/* ── Cards — listings ─────────────────────────────────────────────────────
   My Ads was a seven-column table. A table is the right shape for a ledger and
   the wrong shape for seven pictures of a buffalo, which is what the row
   actually is: the photo is the thing the seller recognises their own ad by, and
   the table showed no photo at all. */
.pf-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(224px, 1fr));
  gap: 12px;
  padding: 12px 0;
}
.pf-card {
  background: var(--pf-surface);
  border: 1px solid var(--pf-line);
  border-radius: 10px;
  overflow: hidden;
  display: flex; flex-direction: column;
}
.pf-card-img, .pf-card-noimg {
  width: 100%; aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--pf-page);
  display: block;
}
.pf-card-noimg {
  display: flex; align-items: center; justify-content: center;
  font-size: 40px; color: var(--pf-muted);
}
/* Sold sits on the photo rather than in the meta line, because "sold" is the
   first thing to know about a card and the meta line is the last thing read. */
.pf-card-tag {
  position: absolute; top: 8px; left: 8px;
  /* --header is dark chrome under both palettes, so this ground does not flip and
     the ink must not either — see .mph-card-dist-badge in marketplace.css, where
     the same pairing put light-theme ink on a dark badge. --primary-ink is
     near-black in the dark theme; --header-ink is light in both. */
  background: rgba(var(--header-rgb),.82);
  color: var(--header-ink);
  font-size: 11px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .05em;
  padding: 4px 8px; border-radius: 5px;
}
.pf-card-body { padding: 11px 12px 12px; display: flex; flex-direction: column; gap: 5px; flex: 1; }
.pf-card-cat { font-size: 11.5px; font-weight: 700; color: var(--pf-muted); text-transform: uppercase; letter-spacing: .04em; }
.pf-card-title {
  font-size: 14.5px; font-weight: 700; color: var(--pf-ink); line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.pf-card-price { font-size: 15px; font-weight: 800; color: var(--pf-accent); }
.pf-card-meta { font-size: 12px; color: var(--pf-muted); display: flex; flex-wrap: wrap; gap: 4px 10px; }
.pf-card-acts {
  display: flex; align-items: center; gap: 6px;
  margin-top: auto; padding-top: 9px;
  border-top: 1px solid var(--pf-line);
}
.pf-card-acts form { display: inline; margin: 0; }
.pf-card-acts .pf-btn { flex: 1; justify-content: center; }

/* ── Stat strip ───────────────────────────────────────────────────────────
   Four numbers in one bordered strip instead of four cards with four drop
   shadows and a 4px orange top border each. */
.pf-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  background: var(--pf-surface);
  border: 1px solid var(--pf-line);
  border-radius: 10px;
  overflow: hidden;
  margin: 12px 0;
}
.pf-stat {
  padding: 15px 14px;
  border-right: 1px solid var(--pf-line);
  text-decoration: none;
}
.pf-stat:last-child { border-right: 0; }
.pf-stat-num { font-size: 22px; font-weight: 800; color: var(--pf-ink); line-height: 1.1; letter-spacing: -.02em; }
.pf-stat-label { font-size: 12.5px; font-weight: 600; color: var(--pf-muted); margin-top: 3px; }
a.pf-stat:hover { background: var(--pf-page); }

/* ── Section heading ── */
.pf-sec {
  display: flex; align-items: center; gap: 9px;
  padding: 20px 2px 9px;
}
.pf-sec h2 { font-size: 16px; font-weight: 800; color: var(--pf-ink); margin: 0; letter-spacing: -.01em; }
.pf-sec-side { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.pf-sec-link { font-size: 13px; font-weight: 700; color: var(--pf-accent); text-decoration: none; }
.pf-sec-link:hover { text-decoration: underline; }

/* ── Panels — settings forms ── */
.pf-panel {
  background: var(--pf-surface);
  border: 1px solid var(--pf-line);
  border-radius: 10px;
  margin-bottom: 12px;
  overflow: hidden;
}
.pf-panel-hd {
  display: flex; align-items: center; gap: 9px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--pf-line);
  font-size: 15px; font-weight: 800; color: var(--pf-ink);
}
.pf-panel-hd i { color: var(--pf-accent); }
.pf-panel-bd { padding: 16px; }
.pf-panel-bd > form + form { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--pf-line); }

.pf-field { margin-bottom: 14px; }
.pf-field:last-child { margin-bottom: 0; }
.pf-label {
  display: block;
  font-size: 12.5px; font-weight: 700; color: var(--pf-ink-2);
  margin-bottom: 6px;
  text-transform: uppercase; letter-spacing: .04em;
}
.pf-input, .pf-textarea, .pf-select {
  width: 100%;
  border: 1px solid var(--pf-line);
  background: var(--pf-page);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 14.5px;
  font-family: inherit;
  color: var(--pf-ink);
  outline: none;
  transition: border-color .15s, background .15s;
}
.pf-input:focus, .pf-textarea:focus, .pf-select:focus { border-color: var(--pf-accent); background: var(--pf-surface); }
.pf-textarea { min-height: 92px; resize: vertical; line-height: 1.5; }
.pf-input[disabled], .pf-input[readonly] { color: var(--pf-muted); cursor: not-allowed; }
.pf-hint { font-size: 12.5px; color: var(--pf-muted); margin-top: 5px; line-height: 1.45; }
.pf-hint.is-good { color: var(--pf-good); }
.pf-hint.is-warn { color: var(--pf-warn); }
.pf-two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pf-form-acts { display: flex; align-items: center; gap: 9px; margin-top: 14px; flex-wrap: wrap; }

/* Avatar picker — a label wrapping a hidden file input, so the whole tile is
   the control and there is no onclick reaching across the DOM for it. */
.pf-pick {
  display: flex; align-items: center; gap: 15px;
}
.pf-pick-preview {
  width: 84px; height: 84px;
  border-radius: 50%;
  background: var(--pf-page);
  border: 1px solid var(--pf-line);
  object-fit: cover;
  display: flex; align-items: center; justify-content: center;
  font-size: 30px; color: var(--pf-muted);
  flex: 0 0 auto;
}
.pf-pick input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; }
.pf-pick-btn { cursor: pointer; }

/* ── Star rating input ────────────────────────────────────────────────────
   Five radios and five labels, no script. The old picker was five <span>s with
   mouseover handlers writing to a hidden input, which meant it could not be
   reached by keyboard, said nothing to a screen reader, and with scripting off
   posted whatever the hidden input started at — always 5.

   The stars are emitted 5,4,3,2,1 and laid out row-reverse, so 1 sits on the
   left. That ordering is what makes `:checked ~ label` work: the labels a
   sibling combinator can reach are exactly the ones that should light up. */
.pf-stars { display: flex; flex-direction: row-reverse; justify-content: flex-end; gap: 2px; }
.pf-stars input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.pf-stars label {
  font-size: 27px; line-height: 1;
  color: var(--pf-line);
  cursor: pointer;
  transition: color .12s;
}
.pf-stars input:checked ~ label,
.pf-stars label:hover,
.pf-stars label:hover ~ label { color: var(--pf-accent); }
/* The focus ring has to be on the label, because the radio itself is 1px. */
.pf-stars input:focus-visible + label { outline: 2px solid var(--pf-accent); outline-offset: 2px; border-radius: 3px; }

/* ── Conversation ─────────────────────────────────────────────────────────
   The messaging idiom, not a form: a named header with a back arrow, bubbles in
   a scroller, a round send button at the bottom. What was here before was a
   #007bff bubble on a #f9f9f9 field with every value written inline, which is
   Bootstrap's blue on a page whose accent is amber.

   The scroller has its own height rather than growing the page, because the
   composer has to stay reachable without scrolling past the whole history — and
   `overflow` on this box is also why the header is not sticky: a sticky child
   sticks to its nearest scroll container, so inside a clipped parent it does not
   move at all. The header is above the scroller instead, which gets the same
   result honestly. */
.pf-chat {
  background: var(--pf-surface);
  border: 1px solid var(--pf-line);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 12px;
}
.pf-chat-hd {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 13px;
  border-bottom: 1px solid var(--pf-line);
}
.pf-chat-back { flex: 0 0 auto; color: var(--pf-ink-2); font-size: 17px; padding: 3px 5px; text-decoration: none; }
.pf-chat-back:hover { color: var(--pf-accent); }
.pf-chat-who { min-width: 0; flex: 1; }
.pf-chat-name {
  display: block;
  font-size: 15px; font-weight: 800; color: var(--pf-ink); text-decoration: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pf-chat-name:hover { color: var(--pf-accent); }
.pf-chat-sub { font-size: 12.5px; color: var(--pf-muted); display: flex; align-items: center; gap: 6px; }
.pf-chat-acts { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; }
.pf-chat-acts form { margin: 0; }

/* The listing the thread is about. It was a price and a city in the header text;
   as a strip with the photo it is the same reminder a buyer with six open chats
   actually needs. */
.pf-chat-item {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 13px;
  background: var(--pf-page);
  border-bottom: 1px solid var(--pf-line);
  text-decoration: none;
}
.pf-chat-item:hover { background: var(--pf-accent-soft); }
.pf-chat-item-body { min-width: 0; flex: 1; }
.pf-chat-item-title {
  font-size: 13.5px; font-weight: 700; color: var(--pf-ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pf-chat-item-price { font-size: 13px; font-weight: 800; color: var(--pf-accent); }

.pf-chat-body {
  height: min(56vh, 500px);
  overflow-y: auto;
  padding: 14px 13px;
  background: var(--pf-page);
  display: flex; flex-direction: column; gap: 3px;
}
.pf-chat-day {
  align-self: center;
  margin: 12px 0 7px;
  padding: 3px 11px;
  border-radius: 20px;
  background: var(--pf-surface);
  border: 1px solid var(--pf-line);
  font-size: 11.5px; font-weight: 700; color: var(--pf-muted);
}
.pf-msg {
  max-width: 78%;
  align-self: flex-start;
  background: var(--pf-surface);
  border: 1px solid var(--pf-line);
  border-radius: 14px 14px 14px 4px;
  padding: 8px 12px;
}
/* Not a colour swap: the fill is the site's accent, and the tail flips side, so
   which messages are yours reads at a glance even in a screenshot. */
.pf-msg.is-mine {
  align-self: flex-end;
  background: var(--pf-accent);
  border-color: var(--pf-accent);
  border-radius: 14px 14px 4px 14px;
}
.pf-msg-who { font-size: 12px; font-weight: 700; color: var(--pf-accent); margin: 0 0 2px; }
.pf-msg-txt {
  margin: 0;
  font-size: 14.5px; line-height: 1.45; color: var(--pf-ink);
  /* Line breaks the sender typed are meaning, and a pasted phone number or URL
     with no spaces has to wrap instead of stretching the bubble off the screen. */
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.pf-msg.is-mine .pf-msg-txt { color: var(--primary-ink); }
.pf-msg-foot {
  display: flex; align-items: center; justify-content: flex-end; gap: 5px;
  margin-top: 3px;
  font-size: 10.5px; color: var(--pf-muted);
}
.pf-msg.is-mine .pf-msg-foot { color: rgba(255,255,255,.78); }

.pf-chat-foot { padding: 10px 12px; border-top: 1px solid var(--pf-line); }
.pf-typing { font-size: 12px; font-style: italic; color: var(--pf-muted); padding: 0 3px 6px; }
.pf-compose { display: flex; align-items: flex-end; gap: 8px; }
.pf-compose .pf-textarea {
  min-height: 44px; max-height: 120px;
  padding: 11px 14px;
  border-radius: 22px;
}
.pf-compose .pf-btn {
  flex: 0 0 auto;
  width: 44px; height: 44px;
  padding: 0;
  border-radius: 50%;
  justify-content: center;
}
/* Live/offline pill. It said "⏳ Connecting..." on first paint and stayed that way
   for anyone with the socket blocked, which reads as broken rather than as fine —
   the page polls in that case and still works, so it starts blank and only speaks
   once there is something true to say. */
.pf-live { font-size: 10.5px; font-weight: 700; border-radius: 20px; padding: 2px 8px; }
.pf-live:empty { display: none; }
.pf-live.is-on { background: var(--pf-good-soft); color: var(--ok-strong); }
.pf-live.is-off { background: var(--pf-page); color: var(--pf-muted); }

/* ── Badges ── */
.pf-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; font-weight: 700;
  border-radius: 5px;
  padding: 4px 8px;
  background: var(--pf-page);
  color: var(--pf-ink-2);
  white-space: nowrap;
}
.pf-badge.is-good { background: var(--pf-good-soft); color: var(--ok-strong); }
.pf-badge.is-warn { background: var(--pf-warn-soft); color: var(--primary-strong); }
.pf-badge.is-bad { background: var(--pf-bad-soft); color: var(--bad-strong); }
.pf-badge.is-accent { background: var(--pf-accent-soft); color: var(--primary-strong); }

/* ── Notes, empty states, pager ── */
.pf-note {
  background: var(--pf-surface);
  border: 1px solid var(--pf-line);
  border-radius: 10px;
  padding: 12px 14px;
  margin: 12px 0;
  font-size: 13.5px; color: var(--pf-ink-2);
  display: flex; align-items: flex-start; gap: 9px;
}
.pf-note i { color: var(--pf-accent); margin-top: 2px; }
.pf-note strong { color: var(--pf-ink); }
.pf-note.is-good { border-color: var(--ok); background: var(--pf-good-soft); color: var(--ok-strong); }
.pf-note.is-bad { border-color: var(--bad); background: var(--pf-bad-soft); color: var(--bad-strong); }

.pf-empty {
  background: var(--pf-surface);
  border-bottom: 1px solid var(--pf-line);
  text-align: center;
  padding: 52px 26px;
  color: var(--pf-ink-2);
}
@media (min-width: 640px) {
  .pf-empty { border: 1px solid var(--pf-line); border-radius: 10px; }
}
.pf-empty i { font-size: 32px; color: var(--pf-muted); margin-bottom: 13px; display: block; }
.pf-empty h3 { font-size: 17px; font-weight: 700; color: var(--pf-ink); margin: 0 0 6px; }
.pf-empty p { font-size: 14px; margin: 0 0 17px; }

.pf-pager {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  padding: 20px 0 6px;
  font-size: 13px; color: var(--pf-muted);
}

@media (max-width: 640px) {
  .pf-id-top { margin-top: -38px; }
  .pf-avatar, .pf-avatar-txt { width: 80px; height: 80px; font-size: 30px; }
  .pf-display { font-size: 19px; }
  .pf-two { grid-template-columns: 1fr; }
  .pf-id-acts { width: 100%; margin-left: 0; justify-content: flex-start; padding-bottom: 0; margin-top: 10px; }
  .pf-id-top { flex-wrap: wrap; }

  /* A gutter, so a bordered panel or a card grid does not sit flush against the
     edge of the screen with its rounded corners cut off by it. */
  .pf-wrap { padding-left: 12px; padding-right: 12px; }
  /* Except for the three things that are meant to run edge to edge on a phone —
     the feed item, the row list and the empty state all drop their border at
     this width and use a hairline instead, which only reads as a separator if it
     reaches both edges. Pulled back out over the gutter rather than excluded
     from it, because the gutter is on the parent. */
  .pf-wrap > .pf-post,
  .pf-wrap > .pf-list,
  .pf-wrap > .pf-empty { margin-left: -12px; margin-right: -12px; }

  /* A conversation goes full width too — a messaging screen with a 12px frame
     around it on a phone is the tell that it was designed on a desktop. */
  .pf-wrap > .pf-chat {
    margin-left: -12px; margin-right: -12px;
    border-left: 0; border-right: 0; border-radius: 0;
  }
  .pf-msg { max-width: 86%; }
  .pf-chat-body { height: min(62vh, 460px); }
}