/* ============================================================
   chat.css — the sidebar's Chat tab, and the larger chat modal Enter opens

   The tab chrome itself is still sidebar.css's — this is only what is inside
   the pane, plus the modal box the same log is moved into.
   ============================================================ */

/* ─── THE PANE ───────────────────────────────────────────── */
/* The log scrolls; the composer does not. So the pane is a column with one
   flexible child, and the log carries the scrollbar rather than the pane —
   otherwise the input would scroll away from the reader mid-message. */
#tab-chat {
  padding: 0;
  gap: 0;
  overflow: hidden;
}

#chat-body {
  flex: 1;
  min-height: 0; /* or the log refuses to shrink and the composer is pushed out */
  display: flex;
  flex-direction: column;
}

#chat-log {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 12px 12px 6px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  scrollbar-gutter: stable;
}

.chat-log-empty {
  margin: auto;
  color: var(--text-dim);
  font-size: 12px;
  text-align: center;
}

/* The empty states — no campaign, or signed out. Shares the Party tab's shape
   so the sidebar's three "nothing here yet" panes read alike. */
.chat-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex: 1;
  padding: 40px 24px;
  text-align: center;
  color: var(--text-dim);
  font-size: 12px;
  line-height: 1.6;
}
.chat-empty .modal-note { margin: 0; }

/* ─── MESSAGES ───────────────────────────────────────────── */
/* Which side of the panel a line sits on is who said it — the read every chat
   app trains people in, and quicker than reading a name. The row is a column
   whose cross-axis alignment picks the edge; because it is not `stretch`, the
   bubble and the name above it both shrink to their content and hug that side. */
.chat-msg {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  max-width: 100%;
}
.chat-msg.own { align-items: flex-end; }

/* A run of lines from one speaker is one turn in the conversation, so the gap
   between them closes up and only the first carries a name. */
.chat-msg.run-on { margin-top: -6px; }

/* Reversed for your own lines so the *name* is the part against the panel edge
   either way, and the timestamp always falls on the inside. */
.chat-msg-head {
  display: flex;
  align-items: baseline;
  gap: 7px;
  flex-wrap: wrap;
  max-width: 100%;
}
.chat-msg.own .chat-msg-head { flex-direction: row-reverse; }

.chat-msg-name {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--accent);
  overflow-wrap: anywhere;
}

.chat-msg-time {
  font-size: 9px;
  letter-spacing: 0.04em;
  color: var(--text-dim);
  white-space: nowrap;
}

/* `max-width` is what makes the alignment legible at all: a bubble allowed to
   fill the panel is on both sides at once. 85% leaves a margin on the far side
   wide enough to read as deliberate in a sidebar this narrow, while still giving
   a long message nearly the whole width.

   `pre-wrap` keeps the line breaks a writer typed — Shift+Enter means something,
   so it has to survive being drawn. `anywhere` so an unbroken URL cannot widen
   the panel. The text inside stays left-aligned in both cases: it is the
   *bubble* that moves, and ragged-left prose is harder to read. */
.chat-msg-text {
  max-width: 85%;
  padding: 7px 9px;
  font-size: 12px;
  line-height: 1.5;
  text-align: left;
  color: var(--text);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 3px;
  border-left: 2px solid var(--border2);
}

/* Your own lines take the accent, and the marked edge crosses with them — a
   thick rule on the left of a right-hung bubble would point back at nothing. */
.chat-msg.own .chat-msg-text {
  background: color-mix(in srgb, var(--accent) 9%, var(--surface));
  border-left: 1px solid var(--border);
  border-right: 2px solid var(--accent);
}

/* ─── A ROLL, SAID ───────────────────────────────────────── */
/* A roll is a message, so it hangs on the same side as everything else its
   speaker said — but it is a *card* rather than a bubble, because the number is
   the point of it and a sentence buries the number in the middle of a line.
   The three pieces are the same three, in the same order, as the number that
   flew across the screen and the chip it landed in: total, label, what was on
   the dice. A roll should be recognisable as one event in all three places.

   The die glyph is what makes it distinct at a glance in a scrolling log —
   colour alone would not, and the accent is already everywhere here. */
.chat-roll {
  display: flex;
  align-items: center;
  gap: 9px;
  /* Wider than a text bubble's 85%: a roll card carries fixed furniture — the
     die, the total's own column — before the label gets any width at all, and
     at 85% a two-word label wraps in a sidebar this narrow. */
  max-width: 94%;
  padding: 7px 11px 7px 9px;
  background: color-mix(in srgb, var(--accent) 14%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--border));
  border-radius: 3px;
  border-left: 3px solid var(--accent);
}
/* The marked edge crosses with the bubble, exactly as an ordinary line's does. */
.chat-msg.own .chat-roll {
  border-left: 1px solid color-mix(in srgb, var(--accent) 45%, var(--border));
  border-right: 3px solid var(--accent);
}

.chat-roll-die {
  flex-shrink: 0;
  font-size: 15px;
  color: var(--accent);
  opacity: 0.9;
}

.chat-roll-total {
  flex-shrink: 0;
  min-width: 26px;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  color: var(--accent);
}

.chat-roll-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.chat-roll-label {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--text);
  overflow-wrap: anywhere;
}
.chat-roll-detail {
  font-size: 10px;
  letter-spacing: 0.03em;
  color: var(--text-dim);
  overflow-wrap: anywhere;
}

/* A natural 20 and a natural 1, recoloured whole — and the detail line says
   which in words, so the colour is never carrying the fact by itself. */
.chat-roll.crit {
  background: color-mix(in srgb, var(--crit) 14%, var(--surface));
  border-color: color-mix(in srgb, var(--crit) 55%, var(--border));
  border-left-color: var(--crit);
}
.chat-msg.own .chat-roll.crit { border-right-color: var(--crit); }
.chat-roll.crit .chat-roll-total,
.chat-roll.crit .chat-roll-die { color: var(--crit); }

.chat-roll.fumble {
  background: color-mix(in srgb, var(--fumble) 13%, var(--surface));
  border-color: color-mix(in srgb, var(--fumble) 50%, var(--border));
  border-left-color: var(--fumble);
}
.chat-msg.own .chat-roll.fumble { border-right-color: var(--fumble); }
.chat-roll.fumble .chat-roll-total,
.chat-roll.fumble .chat-roll-die { color: var(--fumble); }

/* ─── THE COMPOSER ───────────────────────────────────────── */
#chat-form {
  flex-shrink: 0;
  display: flex;
  align-items: flex-end;
  gap: 6px;
  padding: 8px;
  border-top: 1px solid var(--border);
  background: var(--panel);
}

#chat-input {
  flex: 1;
  min-width: 0;
  resize: none;
  overflow-y: auto;
  min-height: 32px;
  padding: 7px 8px;
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 1.4;
}

#chat-send-btn { flex-shrink: 0; }

/* Reading someone else's sheet is read-only, but talking to them is not — the
   composer deliberately survives `party-readonly`, unlike the item controls. */

/* ─── THE CHAT MODAL ─────────────────────────────────────── */
/* The sidebar's log and composer, moved into a larger box (chat.js,
   openChatModal()). A fixed-height column, like the tab: the log flexes and
   scrolls, the composer stays put at the bottom. */
.chat-modal-box {
  width: 720px;
  height: min(80vh, 760px);
  display: flex;
  flex-direction: column;
  overflow: hidden; /* the log scrolls, not the box */
  padding-bottom: 14px;
}
.chat-modal-box h2 { flex-shrink: 0; margin-bottom: 10px; }

.chat-modal-close {
  position: absolute;
  top: 12px;
  right: 14px;
  width: 28px;
  height: 28px;
  border-radius: 3px;
  font-size: 14px;
  color: var(--text-dim);
}
.chat-modal-close:hover { color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); }

#chat-modal-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* A bigger room gets bigger type. */
#chat-modal .chat-msg-name  { font-size: 12px; }
#chat-modal .chat-msg-time  { font-size: 10px; }
#chat-modal .chat-msg-text,
#chat-modal .chat-roll-label,
#chat-modal #chat-input     { font-size: 14px; }
#chat-modal .chat-roll-detail { font-size: 11px; }