/* ══ people ══════════════════════════════════════════════════════════════
 * Everybody who is not you, and the two ways you reach them: the citizen card
 * you open from a byline, and the conversation you have afterwards.
 */

/* ── the citizen card ──────────────────────────────────────────────────── */

.profile { display: grid; gap: 12px; }
.profile-head { display: flex; gap: 12px; align-items: flex-start; }
/* A card you opened *on purpose*, to look at somebody. Everywhere else an
   avatar is a 38px marker saying which row is whose; here it is the point of
   the card, and a rare hat is only worth owning if it is worth seeing.

   A *direct child*, and that is load-bearing: pressing this avatar opens the
   face full size, and the viewer that does it is drawn inside this element. A
   descendant selector caught the enlarged copy too and shrank it back to 92px -
   which looked exactly like the zoom not working. */
.profile-head > .avatar { width: 92px; height: 92px; font-size: 36px; }
.profile-id { min-width: 0; display: grid; gap: 2px; }
.profile-name { font-family: var(--font-display); font-size: 19px; font-weight: 600;
  color: var(--text-hi); overflow-wrap: break-word; }
.profile-badges { flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.chip.mayor { background: rgba(255, 159, 67, .16);
  border-color: rgba(255, 159, 67, .38); color: var(--warn); }
/* Four numbers, not the character card's three - so it sets its own columns
   rather than leaving the fourth stranded on a row of its own. `.fact` itself
   is in `character.css`. */
.profile-facts { grid-template-columns: repeat(4, 1fr); }
.profile-actions { flex-wrap: wrap; gap: 7px; }
.profile-editions { display: grid; gap: 8px; }
/* Their posts, without the thread machinery - a card is a glance, not the feed. */
.profile-post { padding: 11px 13px; background: var(--panel-2); }
.profile-post .post-text { font-size: 14px; }

/* ── a person in a grid ────────────────────────────────────────────────── */
/* The ⋯ that hangs off one of these is `.card-menu`, in `overlays.css`. */
.person-card { position: relative; }
.person-card .row { flex-wrap: wrap; }
/* One card per row, for a list that is short by nature and exists for the
   buttons on the right of it: a friend request. In a quarter-width card those
   buttons sit under the name where they read as decoration; end to end they
   read as the question the row is asking. */
.people-list.spread > .grid { grid-template-columns: 1fr; gap: 8px; }
@media (min-width: 700px) {
  .person-card.spread { flex-direction: row; align-items: center; gap: 14px;
    padding: 13px 15px; }
  .person-card.spread .person-id { flex: 1; padding-right: 0; }
  /* `.action-card`'s floor-nailed last child is a column device - along a row
     `margin-top: auto` shoves whatever is last down against the bottom edge
     instead. Everything here is centred on the row and holds its own width. */
  .person-card.spread > * { margin-top: 0; flex: none; }
  /* The ⋯ hangs off the top-right corner, which on a row is on top of the
     buttons. It joins them instead. */
  .person-card.spread .card-menu { position: static; order: 9; }
}
/* Room for the ⋯ so a long name truncates before it, rather than under it. */
.person-card .person-id { padding-right: 30px; }
/* Who they are, stacked: byline first, then where they are and what they do.
   Deliberately not a flex row - see `.byline` on why the name loses that fight.
   The feed's rail reuses this for a neighbour. */
.person-id { display: grid; gap: 4px; min-width: 0; }
.person-id b { font-size: 13px; font-weight: 800; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.person-id .fine { padding-left: 2px; }
/* One row per card, whether or not there's a tag on it - so a grid of people is
   a grid and not a staircase. */
.person-meta { gap: 6px; row-gap: 4px; }
.person-meta .chip { padding: 2px 7px; font-size: 10.5px; }

/* Reaching the person behind a post - the whole point of the feed. */
.author-actions { gap: 4px; margin-left: auto; }
.author-actions button { padding: 2px 8px; font-size: 11px; }

/* ── sharing, and reading ──────────────────────────────────────────────── */

.share-actions { margin-top: 4px; }
.share-people { flex-wrap: wrap; gap: 7px; }
.reader-by { margin-bottom: 8px; }
/* Somebody actually wrote this. Give it room to be read rather than skimmed. */
.reader-text { white-space: pre-wrap; overflow-wrap: break-word; line-height: 1.7;
  max-height: 55vh; max-height: 55dvh; overflow-y: auto; overscroll-behavior: contain;
  padding: 12px 14px; background: var(--panel-2); border-radius: var(--r-md);
  border: 1px solid var(--border); }
/* Somebody's book, open: the same idea without the well around it. */
.book-text { white-space: pre-wrap; overflow-wrap: break-word; line-height: 1.7;
  max-height: 60vh; max-height: 60dvh; overflow-y: auto; overscroll-behavior: contain; }
/* Turning a page. Centred under the words rather than off to one side: this is
   the bottom of a page, not a toolbar, and a one-page book draws none of it. */
.page-turn { align-items: center; justify-content: center; gap: 8px; margin-top: 8px; }
.page-turn .fine { min-width: 96px; text-align: center; }

/* ── the inbox ───────────────────────────────────────────────────────────
 * A list of conversations, which is what it always should have been. This was
 * a row of `.filter-chip`s - a control for *narrowing a list* borrowed to
 * stand in for the list itself - so every conversation in Orbis was a name in
 * a capsule, and the two things `ThreadView` has been carrying the whole time
 * (the last thing said, and when) were thrown away for want of anywhere to put
 * them. Finding out which conversation had moved meant opening all of them.
 *
 * **Named `inbox-`, not `thread-`.** A row here was `.thread`, and `.thread` was
 * already the feed's inline conversation - two files, two meanings, one name,
 * and this file loads second. So every thread in the feed silently took this
 * rule: a column of replies became `display: flex; align-items: center`, which
 * laid the replies out *sideways* in shrink-to-fit columns three words wide and
 * left the reply box floating off the right-hand edge of the post. Nothing in
 * either file was wrong on its own; the collision was the whole bug, and a
 * prefix is what stops the next one.
 */
/* ── the two panes ───────────────────────────────────────────────────────
 * Messages is a list you pick from and a conversation you read, and those are
 * two different jobs - so they are two columns rather than one on top of the
 * other. Stacked, every conversation in Orbis sat between the player and the
 * box they answer in, and the log needed a scrolling window of its own punched
 * into a page that already scrolled.
 *
 * A fixed height, and it has to be: `.content` is one long scroll, so a pane
 * that sized to its contents would grow the page and take its scrollbar back.
 * Bounded above so the log does not become a wall on a tall monitor, and below
 * so it is still a conversation on a short one.
 */
.inbox-split { display: grid; gap: 12px; min-width: 0;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  height: clamp(400px, 62dvh, 680px); }
/* A column that scrolls inside a slab: the slab clips, the body scrolls, and
   the head stays. `min-height: 0` because a flex item's floor is its content,
   which would otherwise push the scroll back out onto the page. */
.pane { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.pane-head { display: flex; align-items: baseline; gap: 8px; flex: none;
  padding: 12px 14px 10px; border-bottom: 1px solid var(--border-soft); }
.pane-head b { font-family: var(--font-display); font-size: 14.5px;
  font-weight: 600; color: var(--text-hi); }
.pane-head .fine { margin-left: auto; color: var(--muted-2); }
.pane-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  padding: 8px; }
/* Nobody picked a conversation yet. A pane that vanished instead would shove
   the inbox sideways every time one was opened. */
.pane-blank { flex: 1; display: grid; place-items: center; text-align: center;
  padding: 24px; font-size: 13px; }

.threads { display: grid; gap: 6px; }
.inbox-row { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  padding: 9px 11px; border-radius: var(--r-md);
  background: var(--panel); border: 1.5px solid var(--border); box-shadow: none; }
.inbox-row.active { background: var(--panel-2); border-color: var(--accent); }
.inbox-row.unread { border-color: var(--border-hi); }
.inbox-row.unread .inbox-who { color: var(--text-hi); }
.inbox-row.unread .inbox-last { color: var(--text); }
.inbox-body { min-width: 0; flex: 1; display: grid; gap: 1px; }
.inbox-top { display: flex; align-items: baseline; gap: 8px; }
.inbox-who { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 13.5px; color: var(--text); }
.inbox-when { margin-left: auto; flex: none; color: var(--muted-2); font-weight: 400; }
/* One line, always. A preview that wraps turns the inbox back into a wall. */
.inbox-last { overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--muted); font-weight: 400; }
.inbox-row .badge.count { margin: 0; flex: none; }
@media (hover: hover) {
  .inbox-row:hover:not(.active) { border-color: var(--border-hi); background: var(--panel-2); }
}

/* ── conversations ───────────────────────────────────────────────────────
 * Orbis has two, and they sit differently. The staff room is a card in a
 * column of cards, so its log carries a window of its own; the inbox's fills a
 * pane, and the overrides that make it do so are all under `.chat-pane` below.
 * Everything a *message* looks like is shared and lives out here.
 */
.chat { display: grid; gap: 10px; }
.chat-log { display: grid; gap: 2px; max-height: 320px; overflow-y: auto; padding-right: 4px;
  overscroll-behavior: contain; }

/* A conversation that fills its pane: three bands, and only the middle one
   scrolls - so the name you are talking to and the box you are typing in are
   both always on screen, which is what lets the log give up its own window. */
.chat-pane .chat { flex: 1; min-height: 0;
  display: flex; flex-direction: column; gap: 0; }
.chat-pane .chat-head { flex: none; padding: 11px 15px; }
.chat-pane .chat-log { flex: 1; min-height: 0; max-height: none;
  align-content: start; padding: 12px 15px; }
/* The box and its note, nailed to the floor. */
.chat-compose { flex: none; display: grid; gap: 5px; padding: 10px 13px 12px;
  border-top: 1px solid var(--border-soft); }
/* A *turn*, not a row: avatar gutter, then what was said. Every bubble used to
   carry its own face, name and timestamp, so five messages in one minute drew
   the same person five times and the words were the smallest thing on screen.
   A run of messages from one speaker now shares one byline and ends on one
   time - `opens` is the first of a run, `closes` the last. */
.chat-turn { display: flex; align-items: flex-end; gap: 8px; }
.chat-turn.mine { flex-direction: row-reverse; }
.chat-turn.opens { margin-top: 10px; }
.chat-turn.opens:first-child { margin-top: 0; }
/* The gutter is held open on every turn in a run, so the bubbles under the
   first one stay lined up with it instead of sliding left. */
.chat-face { flex: none; width: 26px; }
.chat-face .byline-avatar { width: 26px; height: 26px; font-size: 12px; opacity: 1; }
.chat-said { min-width: 0; max-width: 78%; display: grid; gap: 3px; }
.chat-turn.mine .chat-said { justify-items: end; }
.chat-who { color: var(--muted-hi); padding-left: 2px; }
/* A bubble, and it is allowed to look like one: the corner facing the speaker
   is squared off so a run of them reads as coming from a side. Only the first
   of a run is squared - the rest are round, which is what makes the run read
   as one block. */
.chat-line { padding: 8px 12px; border-radius: var(--r-md);
  background: var(--panel-2); border: 1.5px solid var(--border);
  font-size: 13.5px; line-height: 1.45; overflow-wrap: anywhere; }
.chat-turn.opens .chat-line { border-top-left-radius: 4px; }
.chat-turn.mine .chat-line { background: rgba(75, 123, 236, .16);
  border-color: rgba(75, 123, 236, .4); border-top-left-radius: var(--r-md); }
.chat-turn.mine.opens .chat-line { border-top-right-radius: 4px; }
.chat-foot { display: flex; align-items: center; gap: 8px; padding: 0 2px;
  color: var(--muted-2); }
/* Who you're talking to, as a doorway to their card. */
.chat-head { display: flex; align-items: center; justify-content: space-between;
  gap: 8px; padding-bottom: 9px; border-bottom: 1px solid var(--border); }
.chat-head-acts { margin-left: auto; flex: none; gap: 6px; }
/* A shared shelf in a conversation is the same card the feed draws, but a chat
   bubble is narrow - so it gets the full width of one and its own breathing room. */
.chat-line .embed { margin-top: 7px; background: rgba(0, 0, 0, .22); }
.chat-turn:has(.embed) .chat-said { max-width: 92%; }

/* ── the phone ──────────────────────────────────────────────────────── */
@media (max-width: 920px) {
  .author-actions button { min-height: 34px; padding: 5px 11px; font-size: 12px; }
  .profile-actions > button, .profile-actions > .chip { flex: 1 1 auto; }
  /* Four across is too thin to read on a phone; two rows of two is not. */
  .profile-facts { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  /* No width for two columns, so it is the stack again - but each pane keeps
     its own scroll, so the inbox is a short list above the conversation rather
     than the whole of it. */
  .inbox-split { grid-template-columns: 1fr; height: auto; }
  .inbox-pane { max-height: 33dvh; }
  .chat-pane { height: 58dvh; min-height: 300px; }
}
@media (max-width: 560px) {
  .chat-said { max-width: 86%; }
  /* The staff room's own window. The pane sets its height from the split. */
  .chat-log { max-height: 46dvh; }
  .chat-pane .chat-log { max-height: none; padding: 10px 11px; }
  .chat-pane .chat-head { padding: 10px 12px; }
  .chat-compose { padding: 9px 10px 10px; }
  .pane-body { padding: 7px; }
}