/**
 * styles/chat.css — the in-app hub chat surface (#/chat). P10-5.
 * ──────────────────────────────────────────────────────────────────────────
 * Token-based, phone-first: the thread scrolls vertically (never horizontally
 * ≤768px) and the composer sticks to the bottom. Bridged WhatsApp messages are
 * visually distinct (muted, tinted) from live Fresh messages. No raw hex — every
 * colour is a design token (constitution §5).
 */

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

/* ── read-only WhatsApp-bridge status ─────────────────────────────────────── */
.chat-bridge__row {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3);
}
.chat-bridge__chip {
  background: color-mix(in srgb, var(--rag-green) 12%, var(--surface));
  color: var(--ink); border-color: color-mix(in srgb, var(--rag-green) 30%, var(--surface));
}
.chat-bridge__ok {
  display: inline-flex; align-items: center; gap: 4px;
  color: var(--rag-green); font-weight: var(--fw-bold);
}
.chat-bridge__note { color: var(--muted); font-size: var(--fs-sm); }

/* ── room switcher / single-room label ────────────────────────────────────── */
.chat-rooms { max-width: 100%; overflow-x: auto; }
.chat-room-name {
  display: inline-flex; align-items: center; gap: 6px;
  margin: 0; color: var(--muted); font-weight: var(--fw-bold); font-size: var(--fs-sm);
}

/* ── pinned Megaphone banners ─────────────────────────────────────────────── */
.chat-megaphones { display: flex; flex-direction: column; gap: var(--sp-3); }
.chat-megaphone {
  display: flex; gap: var(--sp-3); align-items: flex-start;
  padding: var(--sp-4);
  border-left: 4px solid var(--fresh-yellow);
  background: color-mix(in srgb, var(--fresh-yellow) 8%, var(--surface));
}
.chat-megaphone.is-acked { opacity: .78; border-left-color: var(--rag-green); }
.chat-megaphone__badge {
  flex: 0 0 auto; display: inline-grid; place-items: center;
  width: 38px; height: 38px; border-radius: var(--radius-pill);
  background: var(--fresh-yellow); color: var(--ink);
}
.chat-megaphone__body { flex: 1 1 auto; min-width: 0; }
.chat-megaphone__eyebrow {
  margin: 0 0 2px; text-transform: uppercase; letter-spacing: .04em;
  font-size: var(--fs-xs); font-weight: var(--fw-bold); color: var(--muted);
}
.chat-megaphone__title { margin: 0 0 4px; font-size: var(--fs-md); }
.chat-megaphone__text { margin: 0 0 var(--sp-3); color: var(--ink-soft); }
.chat-megaphone__actions { display: flex; align-items: center; gap: var(--sp-2); }
.chat-megaphone__acked {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--rag-green); font-weight: var(--fw-bold); font-size: var(--fs-sm);
}

/* ── the message thread ───────────────────────────────────────────────────── */
.chat-thread {
  display: flex; flex-direction: column; gap: var(--sp-3);
  max-height: 58vh; overflow-y: auto; overflow-x: hidden;
  padding: var(--sp-3); border: 1px solid var(--line);
  border-radius: var(--radius); background: var(--surface-2);
}
.chat-thread:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.chat-msg { display: flex; gap: var(--sp-2); align-items: flex-start; max-width: 100%; }
.chat-msg__col { min-width: 0; max-width: min(560px, 82%); }
.chat-msg__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  margin-bottom: 3px; font-size: var(--fs-xs);
}
.chat-msg__author { font-weight: var(--fw-bold); color: var(--ink); }
.chat-msg__time { color: var(--muted); }
.chat-msg__bubble {
  padding: var(--sp-2) var(--sp-3);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-sm); border-top-left-radius: 3px;
}
.chat-msg__body { margin: 0; color: var(--ink); overflow-wrap: anywhere; }

/* my own Fresh messages — align right, accent-tinted */
.chat-msg--mine { flex-direction: row-reverse; }
.chat-msg--mine .chat-msg__col { margin-left: auto; }
.chat-msg--mine .chat-msg__meta { flex-direction: row-reverse; }
.chat-msg--mine .chat-msg__bubble {
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
  border-color: color-mix(in srgb, var(--accent) 26%, var(--surface));
  border-top-left-radius: var(--radius-sm); border-top-right-radius: 3px;
}
.chat-msg--mine .chat-msg__reactions { justify-content: flex-end; }

/* bridged WhatsApp messages — muted, tinted, clearly a read-only mirror */
.chat-msg--wa .chat-msg__bubble {
  background: color-mix(in srgb, var(--rag-green) 7%, var(--surface));
  border-color: color-mix(in srgb, var(--rag-green) 22%, var(--surface));
  border-style: dashed;
}
.chat-wa-tag {
  display: inline-flex; align-items: center; gap: 4px;
  color: var(--rag-green); font-weight: var(--fw-bold);
  font-size: var(--fs-xs);
}

/* ── reactions ────────────────────────────────────────────────────────────── */
.chat-msg__reactions {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 5px;
}
.chat-react {
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  min-height: 44px; padding: 2px 8px; border-radius: var(--radius-pill);
  border: 1px solid var(--line); background: var(--surface);
  color: var(--ink); font-size: var(--fs-xs); font-weight: var(--fw-bold);
  line-height: 1.4;
}
button.chat-react { cursor: pointer; }
button.chat-react:hover { border-color: var(--accent); }
.chat-react.is-on {
  background: color-mix(in srgb, var(--accent) 14%, var(--surface));
  border-color: color-mix(in srgb, var(--accent) 34%, var(--surface));
  color: var(--accent-ink);
}
.chat-react-palette {
  display: inline-flex; align-items: center; gap: 2px; margin-left: 2px;
  opacity: .55; transition: opacity var(--motion);
}
.chat-msg:hover .chat-react-palette,
.chat-msg:focus-within .chat-react-palette { opacity: 1; }
.chat-react-add {
  display: inline-grid; place-items: center;
  min-width: 44px; min-height: 44px; border-radius: var(--radius-pill);
  border: 1px solid transparent; background: transparent;
  color: var(--muted); cursor: pointer;
}
.chat-react-add:hover { background: var(--bg); color: var(--accent-ink); }

/* ── composer (sticky bottom) ─────────────────────────────────────────────── */
.chat-composer {
  position: sticky; bottom: 0;
  display: flex; gap: var(--sp-2); align-items: flex-end;
  padding: var(--sp-3); background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.chat-composer__input {
  flex: 1 1 auto; min-width: 0; resize: none;
  padding: var(--sp-2) var(--sp-3);
  font: inherit; color: var(--ink);
  background: var(--surface-2);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  max-height: 140px;
}
.chat-composer__input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.chat-composer__send { flex: 0 0 auto; min-height: 44px; }
.chat-send-ico { display: inline-flex; }

/* ── phone-first ──────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .chat-thread { max-height: 62vh; }
  .chat-msg__col { max-width: 88%; }
  .chat-composer__send .btn-label { display: none; }
  .chat-composer__send { min-width: 44px; justify-content: center; }
  .chat-react-palette { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .chat-react-palette { transition: none; }
}