/* Messages. Uses the theme's own tokens, so it inherits the site's colourway
   and both themes for free rather than carrying a second palette that drifts. */
.bb-chat{
  display:grid;grid-template-columns:minmax(200px,270px) 1fr;gap:0;
  min-height:min(620px,70vh);
  border:1px solid var(--line,#E1E8FF);border-radius:18px;overflow:hidden;
  background:var(--panel,#fff);
}
.bb-chat[data-state="message"],.bb-chat[data-state="boot"]{
  display:block;padding:40px 24px;text-align:center;min-height:0;
}
.bb-chat__msg{margin:0 0 12px;color:var(--muted,#818895);font-size:15px;font-weight:500}
.bb-chat__msg--bad{color:var(--no-ink,#C2321F)}

.bb-chat__list{border-right:1px solid var(--line,#E1E8FF);overflow:auto;padding:8px}
.bb-chat__item{
  display:flex;flex-direction:column;gap:3px;width:100%;
  padding:12px 13px;margin:0 0 4px;border:0;border-radius:12px;
  background:none;text-align:left;cursor:pointer;font:inherit;color:inherit;
  transition:background-color .18s ease;
}
.bb-chat__item:hover{background:var(--card,#F9F9FF)}
.bb-chat__item.is-on{background:var(--tint,#EEF2FF)}
.bb-chat__route{font-size:14px;font-weight:700;color:var(--head,#000D34)}
.bb-chat__id{font-size:11px;font-weight:600;color:var(--faint,#969FA8);letter-spacing:.04em}
.bb-chat__shut{color:var(--faint,#969FA8)}

.bb-chat__pane{display:flex;flex-direction:column;min-width:0}
.bb-chat__log{flex:1 1 auto;overflow:auto;padding:18px 20px;display:flex;flex-direction:column;gap:12px}
.bb-msg{max-width:min(560px,80%);align-self:flex-start}
.bb-msg--me{align-self:flex-end;text-align:right}
.bb-msg__who{
  margin:0 0 3px;font-size:11px;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:var(--faint,#969FA8);
}
.bb-msg__who time{font-weight:500;letter-spacing:0;text-transform:none}
.bb-msg__text{
  margin:0;padding:10px 14px;border-radius:14px;
  background:var(--card,#F9F9FF);border:1px solid var(--line,#E1E8FF);
  font-size:15px;line-height:1.55;color:var(--ink,#17161B);
  white-space:pre-wrap;overflow-wrap:anywhere;text-align:left;
}
.bb-msg--me .bb-msg__text{background:var(--brand,#1B4CFB);border-color:var(--brand,#1B4CFB);color:#fff}

.bb-chat__form{
  display:flex;gap:10px;align-items:flex-end;
  padding:12px 16px;border-top:1px solid var(--line,#E1E8FF);
}
.bb-chat__form textarea{
  flex:1 1 auto;resize:none;max-height:140px;
  padding:11px 13px;border-radius:12px;
  border:1px solid var(--line-2,#E1E8FF);background:var(--card,#F9F9FF);
  /* 16px, not 15: anything smaller and iOS Safari zooms the viewport on focus
     and never zooms back out. Longhand, not the `font:` shorthand — `inherit`
     as a shorthand's family is not inheritance, it is an invalid family, and
     the textarea silently fell back to the browser's monospace default. */
  font-family:inherit;font-size:16px;font-weight:600;line-height:1.45;
  color:var(--ink,#17161B);
}
.bb-chat__form textarea:focus-visible{outline:2px solid var(--brand,#1B4CFB);outline-offset:1px}
.bb-chat__sronly{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

@media (max-width:760px){
  .bb-chat{grid-template-columns:1fr;min-height:0}
  .bb-chat__list{border-right:0;border-bottom:1px solid var(--line,#E1E8FF);max-height:180px}
  .bb-chat__log{min-height:320px}
}
@media (prefers-reduced-motion:reduce){.bb-chat__item{transition:none}}

/* A message that has left the browser but not yet been acknowledged by the
   server. Visible, but not alarming — it almost always resolves in under a
   second, and pretending it is already delivered is the lie that makes people
   send it twice. */
.bb-msg.is-pending .bb-msg__text{opacity:.6}
.bb-msg.is-pending .bb-msg__who time{font-style:italic}